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

package/src/components/date-picker/date-picker.tsx

@@ -1,6 +1,6 @@
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { CalendarIcon } from "lucide-react";
-import { ReactNode, useRef, useState } from "react";
+import { type ReactElement, ReactNode, useRef, useState } from "react";
 import {
   Calendar,
   FieldControl,
@@ -24,11 +24,14 @@ import {
   formatSingleDate,
 } from "./date-picker.utils";
 
-export const DatePicker = (props: DatePickerProps) => {
+export function DatePicker(props: SingleDatePickerProps): ReactElement;
+export function DatePicker(props: RangeDatePickerProps): ReactElement;
+export function DatePicker(props: MultipleDatePickerProps): ReactElement;
+export function DatePicker(props: DatePickerProps): ReactElement {
   if (props.mode === "range") return <RangePicker {...props} />;
   if (props.mode === "multiple") return <MultiplePicker {...props} />;
   return <SinglePicker {...props} />;
-};
+}
 
 // ─── Shared popover shell ────────────────────────────────────────────────────
 
@@ -39,6 +42,7 @@ type PickerShellProps = {
   hasValue: boolean;
   disabled?: boolean;
   className?: string;
+  classNames?: DatePickerProps["classNames"];
   children: ReactNode;
   footer?: ReactNode;
   slot: string;
@@ -53,6 +57,7 @@ const PickerShell = ({
   hasValue,
   disabled,
   className,
+  classNames,
   children,
   footer,
   slot,
@@ -100,13 +105,16 @@ const PickerShell = ({
         }
       />
       <PopoverPopup
-        className="w-auto p-0"
+        className={cn("w-auto p-0", classNames?.popup)}
         align="start"
         data-slot={`${slot}-content`}
       >
         {children}
         {footer && (
-          <div className="p-2" data-slot={`${slot}-footer`}>
+          <div
+            className={cn("p-2", classNames?.footer)}
+            data-slot={`${slot}-footer`}
+          >
             {footer}
           </div>
         )}
@@ -120,19 +128,20 @@ const PickerShell = ({
 const SinglePicker = ({
   value: valueProp,
   defaultValue,
-  onChange,
+  onValueChange,
   placeholder = "Seleccionar fecha",
   disabled,
   disabledDate,
   renderFooter,
   className,
+  classNames,
   required,
 }: SingleDatePickerProps) => {
   const [open, setOpen] = useState(false);
 
   const [value, setValue] = useControllableState<Date | null>({
     prop: valueProp,
-    onChange: (next) => onChange?.(next ?? null),
+    onChange: (next) => onValueChange?.(next ?? null),
     defaultProp: defaultValue ?? null,
   });
 
@@ -157,12 +166,13 @@ const SinglePicker = ({
       hasValue={!!value}
       disabled={disabled}
       className={className}
+      classNames={classNames}
       footer={renderFooter?.(footerProps)}
       formValue={formatSingleDate(value, "")}
       required={required}
     >
       <Calendar
-        className="border-none"
+        className={cn("border-none", classNames?.calendar)}
         mode="single"
         selected={value ?? undefined}
         onSelect={(next) => {
@@ -183,19 +193,20 @@ const EMPTY_RANGE: DateRange = { start: null, end: null };
 const RangePicker = ({
   value: valueProp,
   defaultValue,
-  onChange,
+  onValueChange,
   placeholder = "Seleccionar rango",
   disabled,
   disabledDate,
   renderFooter,
   className,
+  classNames,
   required,
 }: RangeDatePickerProps) => {
   const [open, setOpen] = useState(false);
 
   const [value, setValue] = useControllableState<DateRange>({
     prop: valueProp,
-    onChange: (next) => onChange?.(next ?? EMPTY_RANGE),
+    onChange: (next) => onValueChange?.(next ?? EMPTY_RANGE),
     defaultProp: defaultValue ?? EMPTY_RANGE,
   });
 
@@ -220,6 +231,7 @@ const RangePicker = ({
       hasValue={!!(range.start || range.end)}
       disabled={disabled}
       className={className}
+      classNames={classNames}
       footer={renderFooter?.(footerProps)}
       formValue={formatRangeDate(
         range.start || range.end ? range : undefined,
@@ -228,7 +240,7 @@ const RangePicker = ({
       required={required}
     >
       <Calendar
-        className="border-none"
+        className={cn("border-none", classNames?.calendar)}
         mode="range"
         selected={{
           from: range.start ?? undefined,
@@ -248,19 +260,20 @@ const RangePicker = ({
 const MultiplePicker = ({
   value: valueProp,
   defaultValue,
-  onChange,
+  onValueChange,
   placeholder = "Seleccionar fechas",
   disabled,
   disabledDate,
   renderFooter,
   className,
+  classNames,
   required,
 }: MultipleDatePickerProps) => {
   const [open, setOpen] = useState(false);
 
   const [value, setValue] = useControllableState<Date[]>({
     prop: valueProp,
-    onChange: (next) => onChange?.(next ?? []),
+    onChange: (next) => onValueChange?.(next ?? []),
     defaultProp: defaultValue ?? [],
   });
 
@@ -280,12 +293,13 @@ const MultiplePicker = ({
       hasValue={(value?.length ?? 0) > 0}
       disabled={disabled}
       className={className}
+      classNames={classNames}
       footer={renderFooter?.(footerProps)}
       formValue={formatMultipleDates(value, "")}
       required={required}
     >
       <Calendar
-        className="border-none"
+        className={cn("border-none", classNames?.calendar)}
         mode="multiple"
         selected={value ?? []}
         onSelect={(next) => {

package/src/components/dialog/dialog.stories.tsx

@@ -42,6 +42,7 @@ const meta: Meta<typeof Dialog> = {
     hideClose: { control: "boolean" },
     footer: { control: false },
     children: { control: false },
+    classNames: { control: false },
   },
 };
 
@@ -50,6 +51,23 @@ type Story = StoryObj<typeof Dialog>;
 
 export const Default: Story = {};
 
+/**
+ * `className` styles the popup panel. `classNames` exposes the `backdrop`,
+ * `viewport`, `header`, `title`, `description`, `footer`, and `closeButton` slots.
+ */
+export const WithClassNames: Story = {
+  args: {
+    trigger: <Button variant="outline">Open styled dialog</Button>,
+    title: "Styled dialog",
+    description: "Each internal slot can be tweaked via classNames.",
+    classNames: {
+      backdrop: "bg-primary/30",
+      title: "text-primary",
+      closeButton: "text-primary",
+    },
+  },
+};
+
 /**
  * The primary use case: a dialog containing a form.
  * `children` renders between the description and the footer.

package/src/components/dialog/dialog.test.tsx

@@ -11,7 +11,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components";
-import { click } from "../../utils";
+import { click } from "../../utils/tests";
 
 describe("Dialog component", () => {
   const setup = (

package/src/components/dialog/dialog.tsx

@@ -68,24 +68,31 @@ export function DialogViewport({
 /**
  * Dialog content container. Includes Portal, Backdrop and Viewport internally.
  * Pass `portalProps` to configure the portal (e.g. a custom `container`).
- * Pass `closeProps` to customise the close button.
+ * `classNames` styles the internal `backdrop`, `viewport` and `closeButton` slots.
  */
 export function DialogPopup({
   className,
+  classNames,
   children,
   hideClose,
-  closeProps,
   portalProps,
   ...props
 }: DialogBase.Popup.Props & {
   hideClose?: boolean;
-  closeProps?: DialogBase.Close.Props;
   portalProps?: DialogBase.Portal.Props;
+  classNames?: {
+    /** Overlay rendered behind the dialog. */
+    backdrop?: string;
+    /** Full-screen container that centers the popup. */
+    viewport?: string;
+    /** Close (×) button rendered inside the popup. */
+    closeButton?: string;
+  };
 }) {
   return (
     <DialogBase.Portal {...portalProps}>
-      <DialogBackdrop />
-      <DialogViewport>
+      <DialogBackdrop className={classNames?.backdrop} />
+      <DialogViewport className={classNames?.viewport}>
         <DialogBase.Popup
           data-slot="dialog-popup"
           className={cn(
@@ -101,9 +108,8 @@ export function DialogPopup({
           {!hideClose && (
             <DialogBase.Close
               aria-label="Close"
-              className="absolute right-2 top-2"
+              className={cn("absolute right-2 top-2", classNames?.closeButton)}
               render={<Button size="icon" variant="ghost" />}
-              {...closeProps}
             >
               <X className="size-4" />
             </DialogBase.Close>
@@ -201,12 +207,25 @@ export type DialogProps = Omit<DialogBase.Root.Props, "children"> & {
   onClose?: () => void;
   /** Hides the close (×) button inside the popup. */
   hideClose?: boolean;
-  /** Props forwarded to the close button primitive. */
-  closeProps?: DialogBase.Close.Props;
-  /** Props forwarded to the portal. */
-  portalProps?: DialogBase.Portal.Props;
-  /** Additional className forwarded to the popup panel. */
+  /** Styles the dialog popup panel. */
   className?: string;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Overlay rendered behind the dialog. */
+    backdrop?: string;
+    /** Full-screen container that centers the popup. */
+    viewport?: string;
+    /** Layout wrapper for title and description. */
+    header?: string;
+    /** Dialog heading. */
+    title?: string;
+    /** Supporting text below the title. */
+    description?: string;
+    /** Layout wrapper for footer content. */
+    footer?: string;
+    /** Close (×) button rendered inside the popup. */
+    closeButton?: string;
+  };
 };
 
 /**
@@ -216,6 +235,10 @@ export type DialogProps = Omit<DialogBase.Root.Props, "children"> & {
  * making it composable with `<Tooltip>` at the primitive level.
  * For full structural control, use the exported primitives directly.
  *
+ * `className` styles the popup panel. `classNames` exposes the `backdrop`,
+ * `viewport`, `header`, `title`, `description`, `footer`, and `closeButton`
+ * slots for fine-grained tweaks without dropping to primitives.
+ *
  * @example
  * ```tsx
  * <Dialog
@@ -236,9 +259,8 @@ export function Dialog({
   footer,
   onClose,
   hideClose,
-  closeProps,
-  portalProps,
   className,
+  classNames,
   onOpenChange,
   ...props
 }: DialogProps) {
@@ -254,19 +276,28 @@ export function Dialog({
       <DialogPopup
         className={className}
         hideClose={hideClose}
-        closeProps={closeProps}
-        portalProps={portalProps}
+        classNames={{
+          backdrop: classNames?.backdrop,
+          viewport: classNames?.viewport,
+          closeButton: classNames?.closeButton,
+        }}
       >
         {(title || description) && (
-          <DialogHeader>
-            {title && <DialogTitle>{title}</DialogTitle>}
+          <DialogHeader className={classNames?.header}>
+            {title && (
+              <DialogTitle className={classNames?.title}>{title}</DialogTitle>
+            )}
             {description && (
-              <DialogDescription>{description}</DialogDescription>
+              <DialogDescription className={classNames?.description}>
+                {description}
+              </DialogDescription>
             )}
           </DialogHeader>
         )}
         {children}
-        {footer && <DialogFooter>{footer}</DialogFooter>}
+        {footer && (
+          <DialogFooter className={classNames?.footer}>{footer}</DialogFooter>
+        )}
       </DialogPopup>
     </DialogRoot>
   );

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

@@ -1,70 +1,145 @@
-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",
+  },
+  argTypes: {
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"],
+    },
+  },
+  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 };