@boxcustodia/library 2.0.0-alpha.13 → 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

@@ -14,6 +14,12 @@ const meta: Meta<typeof Divider> = {
   args: {
     orientation: "horizontal",
   },
+  argTypes: {
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"],
+    },
+  },
   parameters: {
     layout: "centered",
   },

package/src/components/dropzone/dropzone.stories.tsx

@@ -1,36 +1,61 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Camera, File, FileArchive, ImageIcon, Trash } from "lucide-react";
-import React from "react";
 import { Button } from "../../components/button";
-import { Dropzone } from ".";
-import { FileType, FileTypeGroups, FileTypeValue } from "./file-types";
 import {
-  UploadAcceptedFiles,
-  UploadContent,
-  UploadRejectedFiles,
-  UploadRoot,
-  UploadTrigger,
-} from "./upload-primitives";
-import { FileError } from "./use-dropzone";
+  Dropzone,
+  DropzoneAcceptedFiles,
+  DropzoneContent,
+  DropzoneRejectedFiles,
+  DropzoneRoot,
+  DropzoneTrigger,
+  type FileError,
+} from ".";
+import { FileType, FileTypeGroups, type FileTypeValue } from "./file-types";
 
+/**
+ * Drag-and-drop file uploader built on react-dropzone. Supports controlled and uncontrolled
+ * file state, MIME type filtering, size limits, and custom file item rendering via render props.
+ *
+ * Compose with primitives (`DropzoneRoot`, `DropzoneTrigger`, `DropzoneContent`,
+ * `DropzoneAcceptedFiles`, `DropzoneRejectedFiles`) for full layout control.
+ */
 const meta: Meta<typeof Dropzone> = {
-  title: "data entry/Dropzone",
+  title: "Components/Dropzone",
   component: Dropzone,
   subcomponents: {
-    UploadRoot: UploadRoot as React.ComponentType<unknown>,
-    UploadTrigger: UploadTrigger as React.ComponentType<unknown>,
-    UploadContent: UploadContent as React.ComponentType<unknown>,
-    UploadAcceptedFiles: UploadAcceptedFiles as React.ComponentType<unknown>,
-    UploadRejectedFiles: UploadRejectedFiles as React.ComponentType<unknown>,
+    DropzoneRoot: DropzoneRoot as React.ComponentType<unknown>,
+    DropzoneTrigger: DropzoneTrigger as React.ComponentType<unknown>,
+    DropzoneContent: DropzoneContent as React.ComponentType<unknown>,
+    DropzoneAcceptedFiles:
+      DropzoneAcceptedFiles as React.ComponentType<unknown>,
+    DropzoneRejectedFiles:
+      DropzoneRejectedFiles as React.ComponentType<unknown>,
+  },
+  args: {
+    allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
+  },
+  argTypes: {
+    classNames: { control: false },
   },
+  tags: ["beta"],
 };
 
 export default meta;
 type Story = StoryObj<typeof Dropzone>;
 
-export const Default: Story = {
+export const Default: Story = {};
+
+/**
+ * `className` styles the outer wrapper. `classNames` exposes the `trigger`,
+ * `icon`, `label`, and `content` slots for fine-grained tweaks.
+ */
+export const WithClassNames: Story = {
   args: {
-    allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
+    classNames: {
+      trigger: "border-primary bg-primary/5",
+      icon: "text-primary",
+      label: "text-primary",
+    },
   },
 };
 
@@ -59,60 +84,20 @@ export const MultipleFiles: Story = {
 };
 
 /**
- * El callback `onError` te permite manejar errores cuando se rechazan archivos durante la validación.
- *
- * ### Interfaz FileError
- * ```typescript
- * type FileError = {
- *   file: File;           // El archivo que causó el error
- *   errorMessage: string; // Mensaje de error genérico
- *   errorCode: FileErrorCode; // Código para identificar el tipo de error
- * };
- * ```
- *
- * ### Códigos de Error Disponibles
- * - `'INVALID_EXTENSION'`: El archivo no tiene una extensión permitida
- * - `'FILE_TOO_LARGE'`: El archivo excede el tamaño máximo permitido
- * - `'MAX_FILES_EXCEEDED'`: Se ha alcanzado el límite máximo de archivos
- *
- * ### Ejemplo de Uso
- * ```typescript
- * onError: (fileErrors) => {
- *   fileErrors.forEach(({ file, errorCode }) => {
- *     switch (errorCode) {
- *       case 'INVALID_EXTENSION':
- *         toast.error(`${file.name} no es un tipo válido`);
- *         break;
- *       case 'FILE_TOO_LARGE':
- *         toast.error(`${file.name} es muy grande`);
- *         break;
- *       case 'MAX_FILES_EXCEEDED':
- *         toast.error('Demasiados archivos');
- *         break;
- *     }
- *   });
- * };
- * ```
- *
- * ### Notas Importantes
- * - El `onError` se ejecuta automáticamente cada vez que `validateFiles` encuentra errores
- * - Puedes acceder al archivo original para mostrar información personalizada
- * - Los mensajes de error son genéricos, puedes crear los tuyos propios basándote en el `errorCode`
+ * `onError` fires with a `FileError[]` whenever files are rejected. Each entry
+ * includes `errorCode` (`INVALID_EXTENSION`, `FILE_TOO_LARGE`, `MAX_FILES_EXCEEDED`)
+ * for granular error handling.
  */
 export const WithErrorHandling: Story = {
   args: {
     multiple: true,
     maxFiles: 2,
-    maxFileSize: 2 * 1024 * 1024, // 2MB
+    maxFileSize: 2 * 1024 * 1024,
     allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
     onError: (fileErrors: FileError[]) => {
-      console.log("Errores de archivos:", fileErrors);
       alert(
         fileErrors
-          .map(
-            ({ file, errorMessage, errorCode }) =>
-              `${file.name}: ${errorMessage} (${errorCode})`,
-          )
+          .map(({ file, errorCode }) => `${file.name}: ${errorCode}`)
           .join("\n"),
       );
     },
@@ -174,37 +159,33 @@ export const CustomFilePreview: Story = {
 };
 
 /**
- * El componente Dropzone está compuesto por los componentes primitivos UploadRoot, UploadTrigger, UploadContent, UploadAcceptedFiles y UploadRejectedFiles.
+ * Use primitives directly for full layout control. `DropzoneTrigger` with `render`
+ * turns any element into the drag target and click handler.
  *
- * Este ejemplo muestra como armar el componente Dropzone usando los componentes primitivos.
- *
- * ##### Estructura
  * ```tsx
- * <UploadRoot>
- *   <UploadTrigger>
- *   ...
- *   </UploadTrigger>
- *   <UploadContent>
- *     <UploadAcceptedFiles />
- *     <UploadRejectedFiles />
- *   </UploadContent>
- * </UploadRoot>
+ * <DropzoneRoot>
+ *   <DropzoneTrigger render={<Button>Upload</Button>} />
+ *   <DropzoneContent>
+ *     <DropzoneAcceptedFiles />
+ *     <DropzoneRejectedFiles />
+ *   </DropzoneContent>
+ * </DropzoneRoot>
  * ```
  */
-export const Primitives: Story = {
-  render: () => {
-    return (
-      <UploadRoot>
-        <UploadTrigger asChild>
+export const Primitive: Story = {
+  render: () => (
+    <DropzoneRoot>
+      <DropzoneTrigger
+        render={
           <Button>
             <Camera /> Upload
           </Button>
-        </UploadTrigger>
-        <UploadContent>
-          <UploadAcceptedFiles />
-          <UploadRejectedFiles />
-        </UploadContent>
-      </UploadRoot>
-    );
-  },
+        }
+      />
+      <DropzoneContent>
+        <DropzoneAcceptedFiles />
+        <DropzoneRejectedFiles />
+      </DropzoneContent>
+    </DropzoneRoot>
+  ),
 };