@boxcustodia/library 2.0.0-alpha.13 → 2.0.0-alpha.14

package/dist/theme.css

@@ -29,7 +29,7 @@
   --color-success-foreground: oklch(98.42% 0.003 247.86);
 
   --color-warning: oklch(79.65% 0.16 70.08);
-  --color-warning-foreground: oklch(17.97% 0.034 59.63);
+  --color-warning-foreground: oklch(98.42% 0.003 247.86);
 
   --color-info: oklch(62.8% 0.152 237.57);
   --color-info-foreground: oklch(98.42% 0.003 247.86);

package/package.json

@@ -1,11 +1,20 @@
 {
   "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.14",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "style": "dist/index.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./styles": "./dist/index.css",
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "files": [
     "/dist",
@@ -54,24 +63,28 @@
   "description": "",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "tw-animate-css": "^1.2.9",
-    "@biomejs/biome": "^2.3.8",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-presence": "^1.1.5",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "1.2.8",
+    "@headless-tree/core": "^1.7.0",
+    "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "react-aria-components": "^1.13.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "0.561.0",
     "react-day-picker": "^9.14.0",
-    "vite-tsconfig-paths": "^6.0.1"
+    "react-dropzone": "^15.0.0",
+    "react-hook-form": "^7.68.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tw-animate-css": "^1.2.9",
+    "zod": "^4.2.0",
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.3.8",
     "@chromatic-com/storybook": "^5.1.2",
     "@faker-js/faker": "^10.1.0",
-    "@hookform/resolvers": "^5.2.2",
+    "@headless-tree/react": "^1.7.0",
     "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-links": "10.3.5",
     "@storybook/addon-mcp": "^0.6.0",
@@ -89,34 +102,25 @@
     "@types/react-transition-group": "^4.4.12",
     "@vitejs/plugin-react": "^5.1.2",
     "autoprefixer": "^10.4.23",
-    "bunx": "^0.1.0",
     "chromatic": "^16.2.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
     "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
-    "date-fns": "^4.1.0",
     "husky": "^9.1.7",
     "jsdom": "^27.3.0",
     "lint-staged": "^16.2.7",
-    "lucide-react": "0.561.0",
     "plop": "^4.0.4",
     "react-arborist": "^3.4.3",
-    "react-hook-form": "^7.68.0",
     "react-markdown": "^10.1.0",
     "react-transition-group": "^4.4.5",
     "standard-version": "^9.5.0",
     "storybook": "10.3.5",
-    "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "^3.2.2",
+    "storybook-addon-tag-badges": "^3.1.0",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.15",
-    "zod": "^4.2.0",
-    "zustand": "^5.0.9"
+    "vite-tsconfig-paths": "^6.0.1",
+    "vitest": "^4.0.15"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -126,5 +130,9 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  }
+  },
+  "trustedDependencies": [
+    "@parcel/watcher",
+    "esbuild"
+  ]
 }

package/src/__doc__/Examples.tsx

@@ -37,7 +37,7 @@ export const ExampleProps = (props: InputProps) => {
       <Input
         {...props}
         value={value}
-        onChange={setValue}
+        onValueChange={setValue}
         className={cn("pr-12", props.className)}
       />
       <Button

package/src/__doc__/Intro.mdx

@@ -11,7 +11,7 @@ import { BorderRadius } from "./Examples";
 
 # Librería de componentes de 📦
 
-La librería te ofrece una colección de componentes de UI personalizables que se adaptan fácilmente a lo que necesites.  
+La librería te ofrece una colección de componentes de UI personalizables que se adaptan fácilmente a lo que necesites.
 Ya sea que estés buscando consistencia o flexibilidad, estos componentes te permiten construir interfaces rápidamente sin perder control sobre el estilo.
 Además, incluye hooks y utilidades que te facilitan la vida al manejar estados y otras tareas comunes, todo pensado para que desarrollar en frontend sea más sencillo y rápido.
 
@@ -29,7 +29,7 @@ Luego, agregá estas dos líneas en tu CSS principal:
 
 ```css filename="index.css"
 @import "tailwindcss";
-@import "@boxcustodia/library/dist/index.css";
+@import "@boxcustodia/library/styles";
 ```
 
 Un solo import incluye el tema, las variantes y los estilos pre-compilados de todos los componentes. No hace falta `@source` apuntando a `node_modules`.
@@ -40,7 +40,7 @@ Para ajustar colores, radios u otras variables a la identidad visual de tu proye
 
 ```css filename="index.css"
 @import "tailwindcss";
-@import "@boxcustodia/library/dist/index.css";
+@import "@boxcustodia/library/styles";
 
 @theme {
   --color-background: oklch(100% 0 0);

package/src/__doc__/Tabs.mdx

@@ -0,0 +1,112 @@
+---
+title: Tabs
+description: A component for toggling between related panels on the same page.
+
+links:
+  doc: https://base-ui.com/react/components/tabs#api-reference
+---
+
+<ComponentPreview name="p-tabs-1" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTab value="cli">CLI</TabsTab>
+  <TabsTab value="manual">Manual</TabsTab>
+</TabsList>
+<TabsPanel value="cli">
+
+```bash
+npx shadcn@latest add @coss/tabs
+```
+
+</TabsPanel>
+
+<TabsPanel value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="tabs" title="components/ui/tabs.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsPanel>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"
+```
+
+```tsx
+<Tabs defaultValue="tab-1">
+  <TabsList>
+    <TabsTab value="tab-1">Tab 1</TabsTab>
+    <TabsTab value="tab-2">Tab 2</TabsTab>
+    <TabsTab value="tab-3">Tab 3</TabsTab>
+  </TabsList>
+  <TabsPanel value="tab-1">Tab 1 content</TabsPanel>
+  <TabsPanel value="tab-2">Tab 2 content</TabsPanel>
+  <TabsPanel value="tab-3">Tab 3 content</TabsPanel>
+</Tabs>
+```
+
+## API Reference
+
+### Tabs
+
+Root component. Styled wrapper for `Tabs.Root` from Base UI. Accepts all `Tabs.Root` props.
+
+| Prop           | Type                             | Default        | Description                          |
+| -------------- | -------------------------------- | -------------- | ------------------------------------ |
+| `defaultValue` | `string`                         | —              | Uncontrolled initial active tab      |
+| `value`        | `string`                         | —              | Controlled active tab value          |
+| `onValueChange`| `(value: string) => void`        | —              | Callback when active tab changes     |
+| `orientation`  | `"horizontal" \| "vertical"`     | `"horizontal"` | Layout direction                     |
+
+### TabsList
+
+Container for tab triggers. Styled wrapper for `Tabs.List` from Base UI. Renders the animated indicator internally.
+
+| Prop      | Type                         | Default     | Description                   |
+| --------- | ---------------------------- | ----------- | ----------------------------- |
+| `variant` | `"underline" \| "pill"`       | `"underline"` | Underline indicator or pill background |
+
+### TabsTab
+
+Individual tab trigger. Styled wrapper for `Tabs.Tab` from Base UI.
+
+| Prop       | Type      | Default | Description                  |
+| ---------- | --------- | ------- | ---------------------------- |
+| `value`    | `string`  | —       | Matches the panel to activate |
+| `disabled` | `boolean` | `false` | Prevents interaction          |
+
+### TabsPanel
+
+Content panel for each tab. Styled wrapper for `Tabs.Panel` from Base UI.
+
+| Prop    | Type     | Default | Description                     |
+| ------- | -------- | ------- | ------------------------------- |
+| `value` | `string` | —       | Matches the trigger that shows this panel |
+
+## Examples
+
+### Underline Variant
+
+<ComponentPreview name="p-tabs-2" />
+
+### Vertical Orientation
+
+<ComponentPreview name="p-tabs-3" />
+
+### Underline with Vertical Orientation
+
+<ComponentPreview name="p-tabs-4" />