Merge pull request #1 from pswui/fix/separate-components

Split library & component files into directory

packages/cli/.eslintrc.json

@@ -43,7 +43,8 @@
     "@typescript-eslint/no-useless-constructor": "error",
     "@typescript-eslint/no-var-requires": "off",
     "import/no-unresolved": "error",
-    "import/default": "warn",
+    "import/default": "off",
+    "import/no-named-as-default-member": "off",
     "n/no-missing-import": "off",
     "n/no-unsupported-features/es-syntax": "off",
     "no-unused-expressions": "off",

packages/cli/README.md

@@ -20,7 +20,7 @@ $ npm install -g @psw-ui/cli
 $ pswui COMMAND
 running command...
 $ pswui (--version)
-@psw-ui/cli/0.2.0 linux-x64 node-v20.13.1
+@psw-ui/cli/0.5.0 linux-x64 node-v20.13.1
 $ pswui --help [COMMAND]
 USAGE
   $ pswui COMMAND
@@ -49,7 +49,7 @@ FLAGS
   -c, --components=<value>  place for installation of components
   -f, --force               override the existing file
   -p, --config=<value>      path to config
-  -r, --registry=<value>    override registry ur
+  -r, --branch=<value>      use other branch instead of main
   -s, --shared=<value>      place for installation of shared.ts
 
 DESCRIPTION
@@ -59,7 +59,7 @@ EXAMPLES
   $ pswui add
 ```
 
-_See code: [packages/cli/src/commands/add.tsx](https://github.com/pswui/ui/blob/cli@0.4.1/packages/cli/src/commands/add.tsx)_
+_See code: [packages/cli/src/commands/add.tsx](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/add.tsx)_
 
 ## `pswui help [COMMAND]`
 
@@ -91,7 +91,7 @@ USAGE
 
 FLAGS
   -p, --config=<value>  path to config
-  -r, --registry=<value>  override registry url
+  -r, --branch=<value>  use other branch instead of main
   -u, --url             include component file URL
 
 DESCRIPTION
@@ -101,7 +101,7 @@ EXAMPLES
   $ pswui list
 ```
 
-_See code: [packages/cli/src/commands/list.ts](https://github.com/pswui/ui/blob/cli@0.4.1/packages/cli/src/commands/list.ts)_
+_See code: [packages/cli/src/commands/list.ts](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/list.ts)_
 
 ## `pswui search`
 
@@ -117,7 +117,7 @@ ARGUMENTS
   QUERY  search query
 
 FLAGS
-  -r, --registry=<value>  override registry url
+  -r, --branch=<value>  use other branch instead of main
 
 DESCRIPTION
   Search components.
@@ -126,5 +126,5 @@ EXAMPLES
   $ pswui search
 ```
 
-_See code: [packages/cli/src/commands/search.tsx](https://github.com/pswui/ui/blob/cli@0.4.1/packages/cli/src/commands/search.tsx)_
+_See code: [packages/cli/src/commands/search.tsx](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/search.tsx)_
 <!-- commandsstop -->

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@psw-ui/cli",
   "description": "CLI for PSW/UI",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "author": "p-sw",
   "bin": {
     "pswui": "./bin/run.js"

packages/cli/src/commands/add.tsx

@@ -2,15 +2,16 @@ import {Args, Command, Flags} from '@oclif/core'
 import {loadConfig, validateConfig} from '../helpers/config.js'
 import {existsSync} from 'node:fs'
 import {mkdir, writeFile} from 'node:fs/promises'
-import {join, dirname} from 'node:path'
+import {join} from 'node:path'
-import {getAvailableComponentNames, getComponentRealname, getComponentURL, getRegistry} from '../helpers/registry.js'
+import {getComponentURL, getDirComponentURL, getRegistry} from '../helpers/registry.js'
 import ora from 'ora'
 import React, {ComponentPropsWithoutRef} from 'react'
 import {render, Box} from 'ink'
 import {SearchBox} from '../components/SearchBox.js'
-import {getComponentsInstalled} from '../helpers/path.js'
+import {getDirComponentRequiredFiles, checkComponentInstalled} from '../helpers/path.js'
 import {Choice} from '../components/Choice.js'
 import {colorize} from '@oclif/core/ux'
+import {safeFetch} from '../helpers/safe-fetcher.js'
 
 function Generator() {
   let complete: boolean = false
@@ -85,7 +86,7 @@ export default class Add extends Command {
   static override examples = ['<%= config.bin %> <%= command.id %>']
 
   static override flags = {
-    registry: Flags.string({char: 'r', description: 'override registry url'}),
+    branch: Flags.string({char: 'r', description: 'use other branch instead of main'}),
     force: Flags.boolean({char: 'f', description: 'override the existing file'}),
     config: Flags.string({char: 'p', description: 'path to config'}),
     shared: Flags.string({char: 's', description: 'place for installation of shared.ts'}),
@@ -100,35 +101,35 @@ export default class Add extends Command {
 
     const resolvedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config))
     const componentFolder = join(process.cwd(), resolvedConfig.paths.components)
-    const libFile = join(process.cwd(), resolvedConfig.paths.lib)
+    const libFolder = join(process.cwd(), resolvedConfig.paths.lib)
     if (!existsSync(componentFolder)) {
       await mkdir(componentFolder, {recursive: true})
     }
-    if (!existsSync(dirname(libFile))) {
+    if (!existsSync(libFolder)) {
-      await mkdir(dirname(libFile), {recursive: true})
+      await mkdir(libFolder, {recursive: true})
     }
 
     const loadRegistryOra = ora('Fetching registry...').start()
     if (flags.registry) {
-      this.log(`Using ${flags.registry} for registry.`)
+      this.log(`Using ${flags.branch} for branch.`)
     }
-    const unsafeRegistry = await getRegistry(flags.registry)
+    const unsafeRegistry = await getRegistry(flags.branch)
     if (!unsafeRegistry.ok) {
       loadRegistryOra.fail(unsafeRegistry.message)
       return
     }
     const registry = unsafeRegistry.registry
-    const componentNames = await getAvailableComponentNames(registry)
+    const componentNames = Object.keys(registry.components)
     loadRegistryOra.succeed(`Successfully fetched registry! (${componentNames.length} components)`)
-    const componentRealNames = await Promise.all(
+    const searchBoxComponent: {displayName: string; key: string; installed: boolean}[] = []
-      componentNames.map(async (name) => await getComponentRealname(registry, name)),
+    for await (const name of componentNames) {
-    )
+      const installed = await checkComponentInstalled(registry.components[name], resolvedConfig)
-    const installed = await getComponentsInstalled(componentRealNames, resolvedConfig)
+      searchBoxComponent.push({
-    const searchBoxComponent = componentNames.map((name, index) => ({
+        displayName: installed ? `${name} (installed)` : name,
-      displayName: installed.includes(componentRealNames[index]) ? `${name} (installed)` : name,
         key: name,
-      installed: installed.includes(componentRealNames[index]),
+        installed,
-    }))
+      })
+    }
 
     let name: string | undefined = args.name?.toLowerCase?.()
     let requireForce: boolean =
@@ -183,40 +184,73 @@ export default class Add extends Command {
     }
 
     const libFileOra = ora('Installing required library...').start()
-    if (!existsSync(libFile)) {
+    let successCount = 0
-      const libFileContentResponse = await fetch(registry.base + registry.paths.lib)
+    for await (const libFile of registry.lib) {
+      const filePath = join(libFolder, libFile)
+      if (!existsSync(filePath)) {
+        const libFileContentResponse = await safeFetch(registry.base + registry.paths.lib.replace('{libName}', libFile))
         if (!libFileContentResponse.ok) {
-        libFileOra.fail(
+          libFileOra.fail(libFileContentResponse.message)
-          `Error while fetching library content: ${libFileContentResponse.status} ${libFileContentResponse.statusText}`,
-        )
           return
         }
-      const libFileContent = await libFileContentResponse.text()
+        const libFileContent = await libFileContentResponse.response.text()
-      await writeFile(libFile, libFileContent)
+        await writeFile(filePath, libFileContent)
-      libFileOra.succeed('Library is successfully installed!')
+        successCount++
+      }
+    }
+    if (successCount > 1) {
+      libFileOra.succeed('Successfully installed library files!')
     } else {
-      libFileOra.succeed('Library is already installed!')
+      libFileOra.succeed('Library files are already installed!')
     }
 
     const componentFileOra = ora(`Installing ${name} component...`).start()
+    const componentObject = registry.components[name]
+    if (componentObject.type === 'file') {
       const componentFile = join(componentFolder, registry.components[name].name)
       if (existsSync(componentFile) && !force) {
         componentFileOra.succeed(`Component is already installed! (${componentFile})`)
       } else {
-      const componentFileContentResponse = await fetch(await getComponentURL(registry, name))
+        const componentFileContentResponse = await safeFetch(await getComponentURL(registry, componentObject))
         if (!componentFileContentResponse.ok) {
-        componentFileOra.fail(
+          componentFileOra.fail(componentFileContentResponse.message)
-          `Error while fetching component file content: ${componentFileContentResponse.status} ${componentFileContentResponse.statusText}`,
-        )
           return
         }
-      const componentFileContent = (await componentFileContentResponse.text()).replaceAll(
+        const componentFileContent = (await componentFileContentResponse.response.text()).replaceAll(
           /import\s+{[^}]*}\s+from\s+"@pswui-lib"/g,
           (match) => match.replace(/@pswui-lib/, resolvedConfig.import.lib),
         )
         await writeFile(componentFile, componentFileContent)
         componentFileOra.succeed('Component is successfully installed!')
       }
+    } else if (componentObject.type === 'dir') {
+      const componentDir = join(componentFolder, componentObject.name)
+      if (!existsSync(componentDir)) {
+        await mkdir(componentDir, {recursive: true})
+      }
+      const requiredFiles = await getDirComponentRequiredFiles(componentObject, resolvedConfig)
+      if (requiredFiles.length === 0 && !force) {
+        componentFileOra.succeed(`Component is already installed! (${componentDir})`)
+      } else {
+        const requiredFilesURLs = await getDirComponentURL(registry, componentObject, requiredFiles)
+        for await (const [filename, url] of requiredFilesURLs) {
+          const componentFile = join(componentDir, filename)
+          if (!existsSync(componentFile) || force) {
+            const componentFileContentResponse = await safeFetch(url)
+            if (!componentFileContentResponse.ok) {
+              componentFileOra.fail(componentFileContentResponse.message)
+              return
+            }
+            const componentFileContent = (await componentFileContentResponse.response.text()).replaceAll(
+              /import\s+{[^}]*}\s+from\s+"@pswui-lib"/g,
+              (match) => match.replace(/@pswui-lib/, resolvedConfig.import.lib),
+            )
+            await writeFile(componentFile, componentFileContent)
+          }
+        }
+        componentFileOra.succeed('Component is successfully installed!')
+      }
+    }
 
     this.log('Now you can import the component.')
   }

packages/cli/src/commands/list.ts

@@ -1,10 +1,10 @@
 import {Command, Flags} from '@oclif/core'
 import ora from 'ora'
-import {asTree} from 'treeify'
+import treeify from 'treeify'
 
 import {loadConfig, validateConfig} from '../helpers/config.js'
-import {getComponentsInstalled} from '../helpers/path.js'
+import {checkComponentInstalled} from '../helpers/path.js'
-import {getAvailableComponentNames, getComponentRealname, getComponentURL, getRegistry} from '../helpers/registry.js'
+import {getComponentURL, getDirComponentURL, getRegistry} from '../helpers/registry.js'
 
 export default class List extends Command {
   static override description = 'Prints all available components in registry and components installed in this project.'
@@ -12,8 +12,8 @@ export default class List extends Command {
   static override examples = ['<%= config.bin %> <%= command.id %>']
 
   static override flags = {
+    branch: Flags.string({char: 'r', description: 'use other branch instead of main'}),
     config: Flags.string({char: 'p', description: 'path to config'}),
-    registry: Flags.string({char: 'r', description: 'override registry url'}),
     url: Flags.boolean({char: 'u', description: 'include component file URL'}),
   }
 
@@ -21,38 +21,38 @@ export default class List extends Command {
     const {flags} = await this.parse(List)
 
     const registrySpinner = ora('Fetching registry...')
-    const getInstalledSpinner = ora('Getting installed components...')
 
     const loadedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config))
 
     registrySpinner.start()
-    if (flags.registry) {
+    if (flags.branch) {
-      this.log(`Using ${flags.registry} for registry.`)
+      this.log(`Using ${flags.branch} for registry.`)
     }
 
-    const unsafeRegistry = await getRegistry(flags.registry)
+    const unsafeRegistry = await getRegistry(flags.branch)
     if (!unsafeRegistry.ok) {
       registrySpinner.fail(unsafeRegistry.message)
       return
     }
 
     const {registry} = unsafeRegistry
-    registrySpinner.succeed(`Fetched ${Object.keys(registry.components).length} components.`)
+    const names = Object.keys(registry.components)
 
-    const names = await getAvailableComponentNames(registry)
+    registrySpinner.succeed(`Fetched ${names.length} components.`)
 
-    getInstalledSpinner.start()
+    let final: Record<string, {URL?: Record<string, string>; installed: 'no' | 'yes'}> = {}
-    const installedNames = await getComponentsInstalled(
-      await Promise.all(names.map(async (name) => getComponentRealname(registry, name))),
-      loadedConfig,
-    )
-    getInstalledSpinner.succeed(`Got ${installedNames.length} installed components.`)
-
-    let final: Record<string, {URL?: string; installed: 'no' | 'yes'}> = {}
     for await (const name of names) {
-      const installed = installedNames.includes(await getComponentRealname(registry, name)) ? 'yes' : 'no'
+      const componentObject = registry.components[name]
+      const installed = (await checkComponentInstalled(componentObject, loadedConfig)) ? 'yes' : 'no'
       if (flags.url) {
-        const url = await getComponentURL(registry, name)
+        let url: Record<string, string> = {}
+
+        if (componentObject.type === 'file') {
+          url[name] = await getComponentURL(registry, componentObject)
+        } else if (componentObject.type === 'dir') {
+          url = Object.fromEntries(await getDirComponentURL(registry, componentObject))
+        }
+
         final = {...final, [name]: {URL: url, installed}}
       } else {
         final = {...final, [name]: {installed}}
@@ -60,6 +60,6 @@ export default class List extends Command {
     }
 
     this.log('AVAILABLE COMPONENTS')
-    this.log(asTree(final, true, true))
+    this.log(treeify.asTree(final, true, true))
   }
 }

packages/cli/src/commands/search.tsx

@@ -1,7 +1,7 @@
 import {Command, Args, Flags} from '@oclif/core'
 import {render} from 'ink'
 import {SearchBox} from '../components/SearchBox.js'
-import {getAvailableComponentNames, getRegistry} from '../helpers/registry.js'
+import {getRegistry} from '../helpers/registry.js'
 import React from 'react'
 
 export default class Search extends Command {
@@ -10,7 +10,7 @@ export default class Search extends Command {
   }
 
   static override flags = {
-    registry: Flags.string({char: 'r', description: 'override registry url'})
+    branch: Flags.string({char: 'r', description: 'use other branch instead of main'}),
   }
 
   static override description = 'Search components.'
@@ -20,15 +20,15 @@ export default class Search extends Command {
   public async run(): Promise<void> {
     const {args, flags} = await this.parse(Search)
 
-    if (flags.registry) {
+    if (flags.branch) {
-      this.log(`Using ${flags.registry} for registry.`)
+      this.log(`Using ${flags.branch} for registry.`)
     }
-    const registryResult = await getRegistry(flags.registry)
+    const registryResult = await getRegistry(flags.branch)
     if (!registryResult.ok) {
       this.error(registryResult.message)
     }
     const registry = registryResult.registry
-    const componentNames = await getAvailableComponentNames(registry)
+    const componentNames = Object.keys(registry.components)
 
     await render(
       <SearchBox

packages/cli/src/const.ts

@@ -1,15 +1,23 @@
 import {z} from 'zod'
 
-export const REGISTRY_URL = 'https://raw.githubusercontent.com/pswui/ui/main/registry.json'
+export const registryURL = (branch: string) => `https://raw.githubusercontent.com/pswui/ui/${branch}/registry.json`
 export const CONFIG_DEFAULT_PATH = 'pswui.config.js'
 
-interface RegistryComponent {
+export type RegistryComponent =
+  | {
+      files: string[]
       name: string
+      type: 'dir'
+    }
+  | {
+      name: string
+      type: 'file'
     }
 
 export interface Registry {
   base: string
   components: Record<string, RegistryComponent>
+  lib: string[]
   paths: {
     components: string
     lib: string
@@ -28,7 +36,7 @@ export interface Config {
    */
   paths?: {
     components?: 'src/pswui/components' | string
-    lib?: 'src/pswui/lib.tsx' | string
+    lib?: 'src/pswui/lib' | string
   }
 }
 export type ResolvedConfig<T = Config> = {
@@ -41,7 +49,7 @@ export const DEFAULT_CONFIG = {
   },
   paths: {
     components: 'src/pswui/components',
-    lib: 'src/pswui/lib.tsx',
+    lib: 'src/pswui/lib',
   },
 }
 export const configZod = z.object({

packages/cli/src/helpers/path.ts

@@ -2,23 +2,35 @@ import {existsSync} from 'node:fs'
 import {readdir} from 'node:fs/promises'
 import path from 'node:path'
 
-import {ResolvedConfig} from '../const.js'
+import {RegistryComponent, ResolvedConfig} from '../const.js'
+
+export async function getDirComponentRequiredFiles<T extends {type: 'dir'} & RegistryComponent>(
+  componentObject: T,
+  config: ResolvedConfig,
+) {
+  const componentPath = path.join(process.cwd(), config.paths.components, componentObject.name)
+  if (!existsSync(componentPath)) {
+    return componentObject.files
+  }
 
-export async function getComponentsInstalled(components: string[], config: ResolvedConfig) {
-  const componentPath = path.join(process.cwd(), config.paths.components)
-  if (existsSync(componentPath)) {
   const dir = await readdir(componentPath)
-    const dirOnlyContainsComponent = []
+
-    for (const fileName of dir) {
+  return componentObject.files.filter((filename) => !dir.includes(filename))
-      if (components.includes(fileName)) {
-        dirOnlyContainsComponent.push(fileName)
-      }
 }
 
-    return dirOnlyContainsComponent
+export async function checkComponentInstalled(component: RegistryComponent, config: ResolvedConfig): Promise<boolean> {
+  const componentDirRoot = path.join(process.cwd(), config.paths.components)
+  if (!existsSync(componentDirRoot)) return false
+
+  if (component.type === 'file') {
+    const dir = await readdir(componentDirRoot)
+    return dir.includes(component.name)
   }
 
-  return []
+  const componentDir = path.join(componentDirRoot, component.name)
+  if (!existsSync(componentDir)) return false
+  const dir = await readdir(componentDir)
+  return component.files.filter((filename) => !dir.includes(filename)).length === 0
 }
 
 export async function changeExtension(_path: string, extension: string): Promise<string> {

packages/cli/src/helpers/registry.ts

@@ -1,36 +1,37 @@
-import fetch from 'node-fetch'
+import {Registry, RegistryComponent, registryURL} from '../const.js'
-
+import {safeFetch} from './safe-fetcher.js'
-import {REGISTRY_URL, Registry} from '../const.js'
 
 export async function getRegistry(
-  REGISTRY_OVERRIDE_URL?: string,
+  branch?: string,
 ): Promise<{message: string; ok: false} | {ok: true; registry: Registry}> {
-  const registryResponse = await fetch(REGISTRY_OVERRIDE_URL ?? REGISTRY_URL)
+  const registryResponse = await safeFetch(registryURL(branch ?? 'main'))
 
   if (registryResponse.ok) {
+    const registryJson = (await registryResponse.response.json()) as Registry
+    registryJson.base = registryJson.base.replace('{branch}', branch ?? 'main')
+
     return {
       ok: true,
-      registry: (await registryResponse.json()) as Registry,
+      registry: registryJson,
     }
   }
 
-  return {
+  return registryResponse
-    message: `Error while fetching registry: ${registryResponse.status} ${registryResponse.statusText}`,
-    ok: false,
-  }
 }
 
-export async function getAvailableComponentNames(registry: Registry): Promise<string[]> {
+export async function getComponentURL(
-  return Object.keys(registry.components)
-}
-
-export async function getComponentURL(registry: Registry, componentName: string): Promise<string> {
-  return registry.base + registry.paths.components.replace('{componentName}', registry.components[componentName].name)
-}
-
-export async function getComponentRealname(
   registry: Registry,
-  componentName: keyof Registry['components'],
+  component: {type: 'file'} & RegistryComponent,
 ): Promise<string> {
-  return registry.components[componentName].name
+  return registry.base + registry.paths.components.replace('{componentName}', component.name)
+}
+
+export async function getDirComponentURL(
+  registry: Registry,
+  component: {type: 'dir'} & RegistryComponent,
+  files?: string[],
+): Promise<[string, string][]> {
+  const base = registry.base + registry.paths.components.replace('{componentName}', component.name)
+
+  return (files ?? component.files).map((filename) => [filename, base + '/' + filename])
 }

packages/cli/src/helpers/safe-fetcher.ts

@@ -0,0 +1,19 @@
+import fetch, {Response} from 'node-fetch'
+
+export async function safeFetch(
+  url: string,
+): Promise<{message: string; ok: false; response: Response} | {ok: true; response: Response}> {
+  const response = await fetch(url)
+  if (response.ok) {
+    return {
+      ok: true,
+      response,
+    }
+  }
+
+  return {
+    message: `Error while fetching from ${response.url}: ${response.status} ${response.statusText}`,
+    ok: false,
+    response,
+  }
+}

packages/react/components/Dialog/Component.tsx

@@ -1,32 +1,13 @@
-import React, { Dispatch, SetStateAction, useState } from "react";
+import React, { useState } from "react";
 import { Slot, VariantProps, vcn } from "@pswui-lib";
 import ReactDOM from "react-dom";
 
-/**
+import {
- * =========================
+  DialogContext,
- * DialogContext
- * =========================
- */
-
-interface DialogContext {
-  opened: boolean;
-}
-
-const initialDialogContext: DialogContext = { opened: false };
-const DialogContext = React.createContext<
-  [DialogContext, Dispatch<SetStateAction<DialogContext>>]
->([
   initialDialogContext,
-  () => {
+  useDialogContext,
-    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+  IDialogContext,
-      console.warn(
+} from "./Context";
-        "It seems like you're using DialogContext outside of a provider.",
-      );
-    }
-  },
-]);
-
-const useDialogContext = () => React.useContext(DialogContext);
 
 /**
  * =========================
@@ -39,7 +20,7 @@ interface DialogRootProps {
 }
 
 const DialogRoot = ({ children }: DialogRootProps) => {
-  const state = useState<DialogContext>(initialDialogContext);
+  const state = useState<IDialogContext>(initialDialogContext);
   return (
     <DialogContext.Provider value={state}>{children}</DialogContext.Provider>
   );
@@ -411,7 +392,6 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
 );
 
 export {
-  useDialogContext,
   DialogRoot,
   DialogTrigger,
   DialogOverlay,

packages/react/components/Dialog/Context.ts

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction, useContext, createContext } from "react";
+
+/**
+ * =========================
+ * DialogContext
+ * =========================
+ */
+
+export interface IDialogContext {
+  opened: boolean;
+}
+
+export const initialDialogContext: IDialogContext = { opened: false };
+export const DialogContext = createContext<
+  [IDialogContext, Dispatch<SetStateAction<IDialogContext>>]
+>([
+  initialDialogContext,
+  () => {
+    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+      console.warn(
+        "It seems like you're using DialogContext outside of a provider.",
+      );
+    }
+  },
+]);
+
+export const useDialogContext = () => useContext(DialogContext);

packages/react/components/Dialog/index.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export { useDialogContext } from "./Context";

packages/react/components/Drawer.tsx

@@ -349,7 +349,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
             transitionDuration: dragState.isDragging ? "0s" : undefined,
             userSelect: dragState.isDragging ? "none" : undefined,
           }}
-          ref={(el) => {
+          ref={(el: HTMLDivElement | null) => {
             internalRef.current = el;
             if (typeof ref === "function") {
               ref(el);

packages/react/components/Tabs/Component.tsx

@@ -1,30 +1,7 @@
 import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
 import React from "react";
 
-interface Tab {
+import { TabContextBody, TabContext, Tab } from "./Context";
-  name: string;
-}
-
-interface TabContextBody {
-  tabs: Tab[];
-  active: [number, string] /* index, name */;
-}
-
-const TabContext = React.createContext<
-  [TabContextBody, React.Dispatch<React.SetStateAction<TabContextBody>>]
->([
-  {
-    tabs: [],
-    active: [0, ""],
-  },
-  () => {
-    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
-      console.warn(
-        "It seems like you're using TabContext outside of provider.",
-      );
-    }
-  },
-]);
 
 interface TabProviderProps {
   defaultName: string;
@@ -40,77 +17,6 @@ const TabProvider = ({ defaultName, children }: TabProviderProps) => {
   return <TabContext.Provider value={state}>{children}</TabContext.Provider>;
 };
 
-/**
- * Provides current state for tab, using context.
- * Also provides functions to control state.
- */
-const useTabState = () => {
-  const [state, setState] = React.useContext(TabContext);
-
-  function getActiveTab() {
-    return state.active;
-  }
-
-  function setActiveTab(name: string): void;
-  function setActiveTab(index: number): void;
-  function setActiveTab(param: string | number) {
-    if (typeof param === "number") {
-      if (param < 0 || param >= state.tabs.length) {
-        if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
-          console.error(
-            `Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
-              state.tabs.length - 1
-            }`,
-          );
-        }
-        return;
-      }
-
-      setState((prev) => {
-        return {
-          ...prev,
-          active: [param, prev.tabs[param].name],
-        };
-      });
-    } else if (typeof param === "string") {
-      const index = state.tabs.findIndex((tab) => tab.name === param);
-      if (index === -1) {
-        if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
-          console.error(
-            `Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
-              .map((tab) => tab.name)
-              .join(", ")}`,
-          );
-        }
-        return;
-      }
-
-      setActiveTab(index);
-    }
-  }
-
-  function setPreviousActive() {
-    if (state.active[0] === 0) {
-      return;
-    }
-    setActiveTab(state.active[0] - 1);
-  }
-
-  function setNextActive() {
-    if (state.active[0] === state.tabs.length - 1) {
-      return;
-    }
-    setActiveTab(state.active[0] + 1);
-  }
-
-  return {
-    getActiveTab,
-    setActiveTab,
-    setPreviousActive,
-    setNextActive,
-  };
-};
-
 const [TabListVariant, resolveTabListVariantProps] = vcn({
   base: "flex flex-row bg-gray-100 dark:bg-neutral-800 rounded-lg p-1.5 gap-1",
   variants: {},
@@ -227,4 +133,4 @@ const TabContent = (props: TabContentProps) => {
   }
 };
 
-export { TabProvider, useTabState, TabList, TabTrigger, TabContent };
+export { TabProvider, TabList, TabTrigger, TabContent };

packages/react/components/Tabs/Context.ts

@@ -0,0 +1,26 @@
+import React from "react";
+
+export interface Tab {
+  name: string;
+}
+
+export interface TabContextBody {
+  tabs: Tab[];
+  active: [number, string] /* index, name */;
+}
+
+export const TabContext = React.createContext<
+  [TabContextBody, React.Dispatch<React.SetStateAction<TabContextBody>>]
+>([
+  {
+    tabs: [],
+    active: [0, ""],
+  },
+  () => {
+    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+      console.warn(
+        "It seems like you're using TabContext outside of provider.",
+      );
+    }
+  },
+]);

packages/react/components/Tabs/Hook.ts

@@ -0,0 +1,74 @@
+import React from "react";
+
+import { TabContext } from "./Context";
+
+/**
+ * Provides current state for tab, using context.
+ * Also provides functions to control state.
+ */
+export const useTabState = () => {
+  const [state, setState] = React.useContext(TabContext);
+
+  function getActiveTab() {
+    return state.active;
+  }
+
+  function setActiveTab(name: string): void;
+  function setActiveTab(index: number): void;
+  function setActiveTab(param: string | number) {
+    if (typeof param === "number") {
+      if (param < 0 || param >= state.tabs.length) {
+        if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+          console.error(
+            `Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
+              state.tabs.length - 1
+            }`,
+          );
+        }
+        return;
+      }
+
+      setState((prev) => {
+        return {
+          ...prev,
+          active: [param, prev.tabs[param].name],
+        };
+      });
+    } else if (typeof param === "string") {
+      const index = state.tabs.findIndex((tab) => tab.name === param);
+      if (index === -1) {
+        if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+          console.error(
+            `Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
+              .map((tab) => tab.name)
+              .join(", ")}`,
+          );
+        }
+        return;
+      }
+
+      setActiveTab(index);
+    }
+  }
+
+  function setPreviousActive() {
+    if (state.active[0] === 0) {
+      return;
+    }
+    setActiveTab(state.active[0] - 1);
+  }
+
+  function setNextActive() {
+    if (state.active[0] === state.tabs.length - 1) {
+      return;
+    }
+    setActiveTab(state.active[0] + 1);
+  }
+
+  return {
+    getActiveTab,
+    setActiveTab,
+    setPreviousActive,
+    setNextActive,
+  };
+};

packages/react/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./Hook";

packages/react/components/Toast/Component.tsx

@@ -2,148 +2,19 @@ import React, { useEffect, useId, useRef } from "react";
 import ReactDOM from "react-dom";
 import { VariantProps, vcn } from "@pswui-lib";
 
-interface ToastOption {
+import { toastVariant } from "./Variant";
-  closeButton: boolean;
+import {
-  closeTimeout: number | null;
+  ToastOption,
-}
+  toasts,
-
+  subscribeSingle,
-const defaultToastOption: ToastOption = {
+  getSingleSnapshot,
-  closeButton: true,
+  notifySingle,
-  closeTimeout: 3000,
-};
-
-const toastColors = {
-  background: "bg-white dark:bg-black",
-  borders: {
-    default: "border-black/10 dark:border-white/20",
-    error: "border-red-500/80",
-    success: "border-green-500/80",
-    warning: "border-yellow-500/80",
-    loading: "border-black/50 dark:border-white/50 animate-pulse",
-  },
-};
-
-const [toastVariant] = vcn({
-  base: `flex flex-col gap-2 border p-4 rounded-lg pr-8 pointer-events-auto ${toastColors.background} relative transition-all duration-150`,
-  variants: {
-    status: {
-      default: toastColors.borders.default,
-      error: toastColors.borders.error,
-      success: toastColors.borders.success,
-      warning: toastColors.borders.warning,
-      loading: toastColors.borders.loading,
-    },
-    life: {
-      born: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(0,.6,.7,1)]",
-      normal: "translate-y-0 scale-100 ease-[cubic-bezier(0,.6,.7,1)]",
-      dead: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(.6,0,1,.7)]",
-    },
-  },
-  defaults: {
-    status: "default",
-    life: "born",
-  },
-});
-
-interface ToastBody extends Omit<VariantProps<typeof toastVariant>, "preset"> {
-  title: string;
-  description: string;
-}
-
-let index = 0;
-const toasts: Record<
-  `${number}`,
-  ToastBody & Partial<ToastOption> & { subscribers: (() => void)[] }
-> = {};
-let subscribers: (() => void)[] = [];
-
-/**
- * ====
- * Controls
- * ====
- */
-
-function subscribe(callback: () => void) {
-  subscribers.push(callback);
-  return () => {
-    subscribers = subscribers.filter((subscriber) => subscriber !== callback);
-  };
-}
-
-function getSnapshot() {
-  return { ...toasts };
-}
-
-function subscribeSingle(id: `${number}`) {
-  return (callback: () => void) => {
-    toasts[id].subscribers.push(callback);
-    return () => {
-      toasts[id].subscribers = toasts[id].subscribers.filter(
-        (subscriber) => subscriber !== callback,
-      );
-    };
-  };
-}
-
-function getSingleSnapshot(id: `${number}`) {
-  return () => {
-    return {
-      ...toasts[id],
-    };
-  };
-}
-
-function notify() {
-  subscribers.forEach((subscriber) => subscriber());
-}
-
-function notifySingle(id: `${number}`) {
-  toasts[id].subscribers.forEach((subscriber) => subscriber());
-}
-
-function close(id: `${number}`) {
-  toasts[id] = {
-    ...toasts[id],
-    life: "dead",
-  };
-  notifySingle(id);
-}
-
-function update(
-  id: `${number}`,
-  toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>,
-) {
-  toasts[id] = {
-    ...toasts[id],
-    ...toast,
-  };
-  notifySingle(id);
-}
-
-function addToast(toast: Omit<ToastBody, "life"> & Partial<ToastOption>) {
-  const id: `${number}` = `${index}`;
-  toasts[id] = {
-    ...toast,
-    subscribers: [],
-    life: "born",
-  };
-  index += 1;
-  notify();
-
-  return {
-    update: (toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>) =>
-      update(id, toast),
-    close: () => close(id),
-  };
-}
-
-function useToast() {
-  return {
-    toast: addToast,
-    update,
   close,
-  };
+  notify,
-}
+  defaultToastOption,
+  subscribe,
+  getSnapshot,
+} from "./Store";
 
 const ToastTemplate = ({
   id,
@@ -307,7 +178,7 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
       {ReactDOM.createPortal(
         <div
           {...otherPropsExtracted}
-          data-toaster-root
+          data-toaster-root={true}
           className={toasterVariant(variantProps)}
           ref={(el) => {
             internalRef.current = el;
@@ -333,4 +204,4 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
   );
 });
 
-export { Toaster, useToast };
+export { Toaster };

packages/react/components/Toast/Hook.ts

@@ -0,0 +1,9 @@
+import { addToast, update, close } from "./Store";
+
+export function useToast() {
+  return {
+    toast: addToast,
+    update,
+    close,
+  };
+}

packages/react/components/Toast/Store.ts

@@ -0,0 +1,100 @@
+import { ToastBody } from "./Variant";
+
+export interface ToastOption {
+  closeButton: boolean;
+  closeTimeout: number | null;
+}
+
+export const defaultToastOption: ToastOption = {
+  closeButton: true,
+  closeTimeout: 3000,
+};
+
+let index = 0;
+export const toasts: Record<
+  `${number}`,
+  ToastBody & Partial<ToastOption> & { subscribers: (() => void)[] }
+> = {};
+let subscribers: (() => void)[] = [];
+
+/**
+ * ====
+ * Controls
+ * ====
+ */
+
+export function subscribe(callback: () => void) {
+  subscribers.push(callback);
+  return () => {
+    subscribers = subscribers.filter((subscriber) => subscriber !== callback);
+  };
+}
+
+export function getSnapshot() {
+  return { ...toasts };
+}
+
+export function subscribeSingle(id: `${number}`) {
+  return (callback: () => void) => {
+    toasts[id].subscribers.push(callback);
+    return () => {
+      toasts[id].subscribers = toasts[id].subscribers.filter(
+        (subscriber) => subscriber !== callback,
+      );
+    };
+  };
+}
+
+export function getSingleSnapshot(id: `${number}`) {
+  return () => {
+    return {
+      ...toasts[id],
+    };
+  };
+}
+
+export function notify() {
+  subscribers.forEach((subscriber) => subscriber());
+}
+
+export function notifySingle(id: `${number}`) {
+  toasts[id].subscribers.forEach((subscriber) => subscriber());
+}
+
+export function close(id: `${number}`) {
+  toasts[id] = {
+    ...toasts[id],
+    life: "dead",
+  };
+  notifySingle(id);
+}
+
+export function update(
+  id: `${number}`,
+  toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>,
+) {
+  toasts[id] = {
+    ...toasts[id],
+    ...toast,
+  };
+  notifySingle(id);
+}
+
+export function addToast(
+  toast: Omit<ToastBody, "life"> & Partial<ToastOption>,
+) {
+  const id: `${number}` = `${index}`;
+  toasts[id] = {
+    ...toast,
+    subscribers: [],
+    life: "born",
+  };
+  index += 1;
+  notify();
+
+  return {
+    update: (toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>) =>
+      update(id, toast),
+    close: () => close(id),
+  };
+}

packages/react/components/Toast/Variant.ts

@@ -0,0 +1,40 @@
+import { VariantProps, vcn } from "@pswui-lib";
+
+const toastColors = {
+  background: "bg-white dark:bg-black",
+  borders: {
+    default: "border-black/10 dark:border-white/20",
+    error: "border-red-500/80",
+    success: "border-green-500/80",
+    warning: "border-yellow-500/80",
+    loading: "border-black/50 dark:border-white/50 animate-pulse",
+  },
+};
+
+export const [toastVariant, resolveToastVariantProps] = vcn({
+  base: `flex flex-col gap-2 border p-4 rounded-lg pr-8 pointer-events-auto ${toastColors.background} relative transition-all duration-150`,
+  variants: {
+    status: {
+      default: toastColors.borders.default,
+      error: toastColors.borders.error,
+      success: toastColors.borders.success,
+      warning: toastColors.borders.warning,
+      loading: toastColors.borders.loading,
+    },
+    life: {
+      born: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(0,.6,.7,1)]",
+      normal: "translate-y-0 scale-100 ease-[cubic-bezier(0,.6,.7,1)]",
+      dead: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(.6,0,1,.7)]",
+    },
+  },
+  defaults: {
+    status: "default",
+    life: "born",
+  },
+});
+
+export interface ToastBody
+  extends Omit<VariantProps<typeof toastVariant>, "preset"> {
+  title: string;
+  description: string;
+}

packages/react/lib/Slot.tsx

@@ -0,0 +1,97 @@
+import { twMerge } from "tailwind-merge";
+import React from "react";
+
+/**
+ * Merges the react props.
+ * Basically childProps will override parentProps.
+ * But if it is a event handler, style, or className, it will be merged.
+ *
+ * @param parentProps - The parent props.
+ * @param childProps - The child props.
+ * @returns The merged props.
+ */
+function mergeReactProps(
+  parentProps: Record<string, unknown>,
+  childProps: Record<string, unknown>,
+) {
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const parentPropValue = parentProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (
+        childPropValue &&
+        parentPropValue &&
+        typeof childPropValue === "function" &&
+        typeof parentPropValue === "function"
+      ) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue?.(...args);
+          parentPropValue?.(...args);
+        };
+      } else if (parentPropValue) {
+        overrideProps[propName] = parentPropValue;
+      }
+    } else if (
+      propName === "style" &&
+      typeof parentPropValue === "object" &&
+      typeof childPropValue === "object"
+    ) {
+      overrideProps[propName] = { ...parentPropValue, ...childPropValue };
+    } else if (
+      propName === "className" &&
+      typeof parentPropValue === "string" &&
+      typeof childPropValue === "string"
+    ) {
+      overrideProps[propName] = twMerge(parentPropValue, childPropValue);
+    }
+  }
+
+  return { ...parentProps, ...overrideProps };
+}
+
+/**
+ * Takes an array of refs, and returns a single ref.
+ *
+ * @param refs - The array of refs.
+ * @returns The single ref.
+ */
+function combinedRef<I>(refs: React.Ref<I | null>[]) {
+  return (instance: I | null) =>
+    refs.forEach((ref) => {
+      if (ref instanceof Function) {
+        ref(instance);
+      } else if (ref) {
+        (ref as React.MutableRefObject<I | null>).current = instance;
+      }
+    });
+}
+
+interface SlotProps {
+  children?: React.ReactNode;
+}
+export const Slot = React.forwardRef<
+  HTMLElement,
+  SlotProps & Record<string, unknown>
+>((props, ref) => {
+  const { children, ...slotProps } = props;
+  const { asChild: _1, ...safeSlotProps } = slotProps;
+  if (!React.isValidElement(children)) {
+    console.warn(`given children "${children}" is not valid for asChild`);
+    return null;
+  }
+  return React.cloneElement(children, {
+    ...mergeReactProps(safeSlotProps, children.props),
+    ref: combinedRef([
+      ref,
+      (children as unknown as { ref: React.Ref<HTMLElement> }).ref,
+    ]),
+  } as never);
+});
+
+export interface AsChild {
+  asChild?: boolean;
+}

packages/react/lib/index.ts

@@ -0,0 +1,2 @@
+export * from "./vcn";
+export * from "./Slot";

packages/react/lib/vcn.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { twMerge } from "tailwind-merge";
 
 /**
@@ -109,7 +108,8 @@ export function vcn<V extends VariantType>(param: {
   /**
    * Any Props -> Variant Props, Other Props
    */
-  <AnyPropBeforeResolve extends Record<string, unknown>>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  <AnyPropBeforeResolve extends Record<string, any>>(
     anyProps: AnyPropBeforeResolve,
   ) => [
     Partial<VariantKV<V>> & {
@@ -139,7 +139,8 @@ export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
   /**
    * Any Props -> Variant Props, Other Props
    */
-  <AnyPropBeforeResolve extends Record<string, unknown>>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  <AnyPropBeforeResolve extends Record<string, any>>(
     anyProps: AnyPropBeforeResolve,
   ) => [
     Partial<VariantKV<V>> & {
@@ -268,103 +269,5 @@ export function vcn<
  * }
  * ```
  */
-export type VariantProps<F extends (props: unknown) => string> = F extends (
+export type VariantProps<F extends (props: Record<string, unknown>) => string> =
-  props: infer P,
+  F extends (props: infer P) => string ? { [key in keyof P]: P[key] } : never;
-) => string
-  ? P
-  : never;
-
-/**
- * Merges the react props.
- * Basically childProps will override parentProps.
- * But if it is a event handler, style, or className, it will be merged.
- *
- * @param parentProps - The parent props.
- * @param childProps - The child props.
- * @returns The merged props.
- */
-function mergeReactProps(
-  parentProps: Record<string, unknown>,
-  childProps: Record<string, unknown>,
-) {
-  const overrideProps = { ...childProps };
-
-  for (const propName in childProps) {
-    const parentPropValue = parentProps[propName];
-    const childPropValue = childProps[propName];
-
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (
-        childPropValue &&
-        parentPropValue &&
-        typeof childPropValue === "function" &&
-        typeof parentPropValue === "function"
-      ) {
-        overrideProps[propName] = (...args: unknown[]) => {
-          childPropValue?.(...args);
-          parentPropValue?.(...args);
-        };
-      } else if (parentPropValue) {
-        overrideProps[propName] = parentPropValue;
-      }
-    } else if (
-      propName === "style" &&
-      typeof parentPropValue === "object" &&
-      typeof childPropValue === "object"
-    ) {
-      overrideProps[propName] = { ...parentPropValue, ...childPropValue };
-    } else if (
-      propName === "className" &&
-      typeof parentPropValue === "string" &&
-      typeof childPropValue === "string"
-    ) {
-      overrideProps[propName] = twMerge(parentPropValue, childPropValue);
-    }
-  }
-
-  return { ...parentProps, ...overrideProps };
-}
-
-/**
- * Takes an array of refs, and returns a single ref.
- *
- * @param refs - The array of refs.
- * @returns The single ref.
- */
-function combinedRef<I>(refs: React.Ref<I | null>[]) {
-  return (instance: I | null) =>
-    refs.forEach((ref) => {
-      if (ref instanceof Function) {
-        ref(instance);
-      } else if (ref) {
-        (ref as React.MutableRefObject<I | null>).current = instance;
-      }
-    });
-}
-
-interface SlotProps {
-  children?: React.ReactNode;
-}
-export const Slot = React.forwardRef<
-  HTMLElement,
-  SlotProps & Record<string, unknown>
->((props, ref) => {
-  const { children, ...slotProps } = props;
-  const { asChild: _1, ...safeSlotProps } = slotProps;
-  if (!React.isValidElement(children)) {
-    console.warn(`given children "${children}" is not valid for asChild`);
-    return null;
-  }
-  return React.cloneElement(children, {
-    ...mergeReactProps(safeSlotProps, children.props),
-    ref: combinedRef([
-      ref,
-      (children as unknown as { ref: React.Ref<HTMLElement> }).ref,
-    ]),
-  } as never);
-});
-
-export interface AsChild {
-  asChild?: boolean;
-}

packages/react/src/main.tsx

@@ -1,10 +1,7 @@
 import "./tailwind.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
+  <React.StrictMode></React.StrictMode>,
-    <App />
-  </React.StrictMode>
 );

packages/react/tsconfig.json

@@ -5,6 +5,7 @@
     "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "esModuleInterop": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -25,9 +26,9 @@
     "paths": {
       "@components/*": ["components/*"],
       "@/*": ["src/*"],
-      "@pswui-lib": ["lib.tsx"]
+      "@pswui-lib": ["lib/index.ts"]
     }
   },
-  "include": ["components", "src", "./lib.tsx"],
+  "include": ["components", "src", "lib"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/react/vite.config.ts

@@ -5,9 +5,7 @@ import { resolve } from "node:path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
+  plugins: [react()],
-    react()
-  ],
   css: {
     postcss: {
       plugins: [tailwindcss()],
@@ -17,7 +15,7 @@ export default defineConfig({
     alias: {
       "@components": resolve(__dirname, "./components"),
       "@": resolve(__dirname, "./src"),
-      "@pswui-lib": resolve(__dirname, "./lib.tsx"),
+      "@pswui-lib": resolve(__dirname, "./vcn.ts"),
     },
   },
 });

registry.json

@@ -1,20 +1,25 @@
 {
-  "base": "https://raw.githubusercontent.com/pswui/ui",
+  "base": "https://raw.githubusercontent.com/pswui/ui/{branch}",
   "paths": {
-    "components": "/main/packages/react/components/{componentName}",
+    "components": "/packages/react/components/{componentName}",
-    "lib": "/main/packages/react/lib.tsx"
+    "lib": "/packages/react/lib/{libName}"
   },
+  "lib": [
+    "index.ts",
+    "Slot.tsx",
+    "vcn.ts"
+  ],
   "components": {
-    "button": { "name": "Button.tsx" },
+    "button": { "type": "file", "name": "Button.tsx" },
-    "checkbox": { "name": "Checkbox.tsx" },
+    "checkbox": { "type": "file", "name": "Checkbox.tsx" },
-    "dialog": { "name": "Dialog.tsx" },
+    "dialog": { "type": "dir", "name": "Dialog", "files": ["index.ts", "Component.tsx", "Context.ts"] },
-    "drawer": { "name": "Drawer.tsx" },
+    "drawer": { "type": "file", "name": "Drawer.tsx" },
-    "input": { "name": "Input.tsx" },
+    "input": { "type": "file", "name": "Input.tsx" },
-    "label": { "name": "Label.tsx" },
+    "label": { "type": "file", "name": "Label.tsx" },
-    "popover": { "name": "Popover.tsx" },
+    "popover": { "type": "file", "name": "Popover.tsx" },
-    "switch": { "name": "Switch.tsx" },
+    "switch": { "type": "file", "name": "Switch.tsx" },
-    "tabs": { "name": "Tabs.tsx" },
+    "tabs": { "type": "dir", "name": "Tabs", "files": ["index.ts", "Context.ts", "Hook.ts", "Component.tsx"] },
-    "toast": { "name": "Toast.tsx" },
+    "toast": { "type": "dir", "name": "Toast", "files": ["index.ts", "Component.tsx", "Hook.ts", "Store.ts", "Variant.ts"] },
-    "tooltip": {"name": "Tooltip.tsx" }
+    "tooltip": { "type": "file", "name": "Tooltip.tsx" }
   }
 }