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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.12",
+  "version": "2.0.0-alpha.13",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/__doc__/Migration.mdx

@@ -232,12 +232,12 @@ La prop `containerClassName` fue eliminada. Usá `className` para estilizar el i
 
 ---
 
-## 3. Version 2.0.0-alpha.8
+## 4. Version 2.0.0-alpha.11
 
 ### Instalación
 
 ```bash
-npm install @boxcustodia/library@2.0.0-alpha.8
+npm install @boxcustodia/library@2.0.0-alpha.11
 ```
 
 ### Cambios necesarios
@@ -260,18 +260,6 @@ import { useForm, Form, FormField } from "@/components/form/form";
 
 El resto de tu código no necesita ningún cambio.
 
----
-
-## 4. Version 2.0.0-alpha.10
-
-### Instalación
-
-```bash
-npm install @boxcustodia/library@2.0.0-alpha.10
-```
-
-### Cambios necesarios
-
 #### Calendar
 
 El componente `Calendar` fue completamente reescrito usando `react-day-picker` en lugar de una implementación custom. La API cambió significativamente:
@@ -391,18 +379,6 @@ El componente ahora soporta múltiples modos y cambió de API internamente.
 
 **Si necesitás un date picker editable:** Usá el nuevo componente `DateInput` que permite escribir la fecha directamente en el input además de seleccionar desde el calendar.
 
----
-
-## 5. Version 2.0.0-alpha.11
-
-### Instalación
-
-```bash
-npm install @boxcustodia/library@2.0.0-alpha.11
-```
-
-### Cambios necesarios
-
 #### Combobox
 
 El Combobox fue completamente reescrito usando Base UI en lugar de la arquitectura anterior. La API es significativamente diferente. Ahora soporta selección múltiple con chips dinámicos y una arquitectura de primitivas para casos de uso avanzados.

package/src/components/combobox/combobox.tsx

@@ -1,4 +1,5 @@
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import { Field as FieldPrimitive } from "@base-ui/react/field";
 import { ChevronsUpDownIcon, XIcon } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../lib";
@@ -487,31 +488,36 @@ export function ComboboxChips({
   const { chipsRef } = React.useContext(ComboboxContext);
 
   return (
-    <ComboboxPrimitive.Chips
-      className={cn(
-        inputBaseClasses,
-        "relative inline-flex pr-6 w-full flex-wrap gap-1",
-        "placeholder:text-muted-foreground",
-        "focus-within:border-ring",
-        "has-aria-invalid:border-error focus-within:has-aria-invalid:ring-error/20",
-        "has-disabled:cursor-not-allowed has-disabled:opacity-50",
-        className,
-      )}
-      data-slot="combobox-chips"
-      ref={chipsRef as React.Ref<HTMLDivElement> | null}
-      {...props}
-    >
-      {startAddon && (
-        <div
-          aria-hidden="true"
-          className="flex shrink-0 items-center ps-2 opacity-80 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5"
-          data-slot="combobox-start-addon"
+    <FieldPrimitive.Validity>
+      {({ validity }) => (
+        <ComboboxPrimitive.Chips
+          aria-invalid={validity.valid === false ? true : undefined}
+          className={cn(
+            inputBaseClasses,
+            "relative inline-flex pr-6 w-full flex-wrap gap-1",
+            "placeholder:text-muted-foreground",
+            "focus-within:border-ring",
+            "aria-invalid:border-error focus-within:aria-invalid:ring-error/20",
+            "has-disabled:cursor-not-allowed has-disabled:opacity-50",
+            className,
+          )}
+          data-slot="combobox-chips"
+          ref={chipsRef as React.Ref<HTMLDivElement> | null}
+          {...props}
         >
-          {startAddon}
-        </div>
+          {startAddon && (
+            <div
+              aria-hidden="true"
+              className="flex shrink-0 items-center ps-2 opacity-80 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5"
+              data-slot="combobox-start-addon"
+            >
+              {startAddon}
+            </div>
+          )}
+          {children}
+        </ComboboxPrimitive.Chips>
       )}
-      {children}
-    </ComboboxPrimitive.Chips>
+    </FieldPrimitive.Validity>
   );
 }
 

package/src/components/divider/divider.stories.tsx

@@ -1,70 +1,139 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { CatIcon, Github, PencilIcon } from "lucide-react";
-import { Button, Divider } from "../../components";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Divider } from "../../components";
 
+/**
+ * Visual separator between sections or inline elements.
+ *
+ * Built on the Base UI `Separator` primitive. Supports `orientation` (`horizontal` | `vertical`)
+ * and a `render` prop for polymorphic composition. The DOM element receives `data-orientation`
+ * which can be used as a CSS selector for conditional styles.
+ */
 const meta: Meta<typeof Divider> = {
-  title: "others/Divider",
+  title: "Components/Divider",
   component: Divider,
+  args: {
+    orientation: "horizontal",
+  },
+  parameters: {
+    layout: "centered",
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Divider>;
 
+export const Default: Story = {
+  render: () => (
+    <div className="w-72 rounded-lg border p-4 text-sm">
+      <div className="flex items-center justify-between">
+        <span className="font-medium">Deployment #847</span>
+        <span className="text-xs text-green-500">● Live</span>
+      </div>
+      <Divider className="my-3" />
+      <div className="space-y-1.5 text-muted-foreground">
+        <div className="flex justify-between">
+          <span>Triggered by</span>
+          <span className="text-foreground">fbaigorria</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Branch</span>
+          <span className="text-foreground">develop</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Duration</span>
+          <span className="text-foreground">1m 43s</span>
+        </div>
+      </div>
+      <Divider className="my-3" />
+      <div className="flex items-center justify-center gap-4 text-muted-foreground">
+        <span>2 warnings</span>
+        <Divider orientation="vertical" className="h-4" />
+        <span>0 errors</span>
+        <Divider orientation="vertical" className="h-4" />
+        <span>127 tests</span>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Default orientation. Renders a full-width 1px horizontal line via `data-[orientation=horizontal]`.
+ * Commonly used to separate named sections inside a panel or card.
+ */
 export const Horizontal: Story = {
+  render: () => (
+    <div className="w-72 rounded-lg border p-4 space-y-4">
+      <div>
+        <p className="text-sm font-medium">Profile</p>
+        <p className="text-xs text-muted-foreground">Franco Baigorria</p>
+      </div>
+      <Divider />
+      <div>
+        <p className="text-sm font-medium">Team</p>
+        <p className="text-xs text-muted-foreground">Engineering</p>
+      </div>
+      <Divider />
+      <div>
+        <p className="text-sm font-medium">Role</p>
+        <p className="text-xs text-muted-foreground">Frontend Architect</p>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * In vertical orientation the component uses `self-stretch` to fill the full height of
+ * the flex container. Wrapping in a `div` with `flex` and a defined height is the expected pattern.
+ */
+export const Vertical: Story = {
   args: {
-    orientation: "horizontal",
+    orientation: "vertical",
   },
-  decorators: [
-    (Story) => (
-      <div className="w-20 m-auto rounded flex flex-col items-center gap-2">
-        <Button size="icon">
-          <PencilIcon />
-        </Button>
-        <Story />
-        <Button size="icon">
-          <CatIcon />
-        </Button>
-        <Story />
-        <Button size="icon">
-          <Github />
-        </Button>
-      </div>
-    ),
-  ],
+  render: (args) => (
+    <div className="flex h-10 items-center gap-4">
+      <span className="text-sm">Section A</span>
+      <Divider {...args} />
+      <span className="text-sm">Section B</span>
+      <Divider {...args} />
+      <span className="text-sm">Section C</span>
+    </div>
+  ),
 };
 
 /**
- * Para poder desplegar el componente `Divider` de manera vertical, se debe utilizar el atributo `orientation` con el valor `vertical`
- * y setear una altura en el contenedor
+ * The `render` prop replaces the rendered DOM element. Useful for swapping semantics
+ * to `<hr>` or any other element without losing component styles.
  *
  * ```tsx
- * <div className="h-16"> // <- Altura fija
- *   <PencilIcon />
- *   <Divider orientation="vertical" /> // <- vertical
- *   <CatIcon />
- * </div>
+ * <Divider render={<hr />} />
  * ```
  */
-
-export const Vertical: Story = {
-  args: {
-    orientation: "vertical",
+export const Render: Story = {
+  render: (args) => (
+    <div className="w-64">
+      <Divider {...args} render={<hr />} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Divider render={<hr />} />`,
+      },
+    },
   },
-  decorators: [
-    (Story) => (
-      <div className="h-16 w-36 m-auto rounded flex items-center gap-2">
-        <Button size="icon">
-          <PencilIcon />
-        </Button>
-        <Story />
-        <Button size="icon">
-          <CatIcon />
-        </Button>
-        <Story />
-        <Button size="icon">
-          <Github />
-        </Button>
-      </div>
-    ),
-  ],
+};
+
+/**
+ * `className` accepts Tailwind classes to override color, thickness, or spacing.
+ * `data-[orientation=horizontal]` and `data-[orientation=vertical]` are available
+ * as CSS selectors for advanced conditional styles.
+ */
+export const Custom: Story = {
+  render: () => (
+    <div className="space-y-4 w-64">
+      <Divider className="bg-primary" />
+      <Divider className="bg-error" />
+      <Divider className="border-t border-dashed border-input bg-transparent" />
+    </div>
+  ),
 };

package/src/components/divider/divider.tsx

@@ -1,23 +1,23 @@
-import { HTMLProps } from "react";
-import { cn } from "../../lib";
-
-type Props = {
-  orientation?: "horizontal" | "vertical";
-} & HTMLProps<HTMLHRElement>;
-
-export const Divider = (props: Props) => {
-  const { className, orientation = "horizontal" } = props;
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import type React from "react";
+import { cn } from "tailwind-variants";
 
+export function Divider({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props): React.ReactElement {
   return (
-    <hr
-      {...props}
-      aria-orientation={orientation}
+    <SeparatorPrimitive
       className={cn(
-        "shrink-0 bg-input",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        "shrink-0 bg-input data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
         className,
       )}
-      data-slot="divider"
+      data-slot="separator"
+      orientation={orientation}
+      {...props}
     />
   );
-};
+}
+
+export { SeparatorPrimitive };

package/src/components/field/field.stories.tsx

@@ -127,7 +127,7 @@ export const WithValidity: Story = {
         <FieldValidity>
           {({ validity }) =>
             !validity.valid && (
-              <p className="text-destructive-foreground text-xs">
+              <p className="text-error-foreground text-xs">
                 {validity.valueMissing
                   ? "Email is required."
                   : "Enter a valid email address."}

package/src/components/multi-select/multi-select.stories.tsx

@@ -11,7 +11,7 @@ const generateRandomOption = () => ({
 const items = faker.helpers.multiple(generateRandomOption, { count: 10 });
 
 const meta: Meta<typeof MultiSelect> = {
-  title: "Data entry/MultiSelect",
+  title: "Deprecated/MultiSelect",
   component: MultiSelect,
   args: {
     items,

package/src/components/number-input/number-input.tsx

@@ -32,11 +32,12 @@ export function NumberInputGroup({
   return (
     <NumberFieldPrimitive.Group
       className={cn(
-        "flex w-full items-center overflow-hidden rounded-md border border-input bg-background text-sm transition-shadow",
-        "focus-within:border-ring",
-        "aria-invalid:border-error focus-within:aria-invalid:ring-error/20",
-        "has-aria-invalid:border-error focus-within:has-aria-invalid:ring-error/20",
-        "data-[invalid]:border-error focus-within:data-[invalid]:ring-error/20",
+        "flex h-10 w-full items-center overflow-hidden rounded-md bg-background text-sm transition-shadow",
+        "outline outline-1 outline-input [outline-offset:-1px]",
+        "focus-within:outline-ring",
+        "aria-invalid:outline-error focus-within:aria-invalid:ring-error/20",
+        "has-aria-invalid:outline-error focus-within:has-aria-invalid:ring-error/20",
+        "data-[invalid]:outline-error focus-within:data-[invalid]:ring-error/20",
         "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:pointer-events-none",
         "[&_svg]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
@@ -195,6 +196,7 @@ export function NumberInput({
           {...(invalid ? { "aria-invalid": true } : {})}
           placeholder={placeholder}
           {...inputProps}
+          className={cn("self-stretch", inputProps?.className)}
         />
         {!hideControls && (
           <div className="flex flex-col self-stretch divide-y divide-input border-l border-input">

package/src/components/password/password.tsx

@@ -37,10 +37,7 @@ export function Password({
   return (
     <div
       className={cn(
-        "relative inline-flex w-full rounded-md border border-input bg-background",
-        "text-sm transition-shadow",
-        "has-focus-visible:border-ring",
-        "has-aria-invalid:border-error has-focus-visible:has-aria-invalid:ring-error/20",
+        "relative inline-flex w-full",
         "has-disabled:cursor-not-allowed has-disabled:opacity-50",
         className,
       )}
@@ -50,7 +47,14 @@ export function Password({
         {...rest}
         onChange={handleChange}
         type={showPassword ? "text" : "password"}
-        className="w-full min-w-0 rounded-[inherit] bg-transparent py-2 pl-3 pr-10 text-sm outline-none placeholder:text-muted-foreground [&::-ms-clear]:hidden [&::-ms-reveal]:hidden"
+        className={cn(
+          "h-10 w-full min-w-0 rounded-md border border-input bg-background",
+          "pl-3 pr-10 text-sm outline-none transition-shadow placeholder:text-muted-foreground",
+          "focus-visible:border-ring",
+          "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
+          "disabled:cursor-not-allowed",
+          "[&::-ms-clear]:hidden [&::-ms-reveal]:hidden",
+        )}
       />
       <button
         data-slot="password-toggle"