@adamosuiteservices/ui 2.12.2 → 2.13.1

package/dist/table.cjs

@@ -12,7 +12,7 @@
           adm:text-xs adm:font-semibold adm:whitespace-nowrap
           adm:text-muted-foreground adm:uppercase
           adm:[&:has([role=checkbox])]:pr-0
-          adm:[&>[role=checkbox]]:translate-y-[2px]
+          adm:*:[&>[role=checkbox]]:translate-y-[2px]
         `,e),...a})}function b({className:e,...a}){return t.jsxRuntimeExports.jsx("td",{"data-slot":"table-cell",className:d.cn(`
           adm:p-4 adm:align-middle adm:text-sm adm:whitespace-nowrap
           adm:text-muted-foreground

package/dist/table.js

@@ -85,7 +85,7 @@ function u({ className: a, ...t }) {
           adm:text-xs adm:font-semibold adm:whitespace-nowrap
           adm:text-muted-foreground adm:uppercase
           adm:[&:has([role=checkbox])]:pr-0
-          adm:[&>[role=checkbox]]:translate-y-[2px]
+          adm:*:[&>[role=checkbox]]:translate-y-[2px]
         `,
         a
       ),

package/dist/themes.css

@@ -1 +1 @@
-[data-theme=default]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--default);--primary-foreground: var(--neutrals-0);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--default);--chart-1: var(--default-500);--chart-2: var(--default-400);--chart-3: var(--default-300);--chart-4: var(--default-200);--chart-5: var(--default-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--default);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--default);--primary-25: var(--default-25);--primary-50: var(--default-50);--primary-100: var(--default-100);--primary-200: var(--default-200);--primary-300: var(--default-300);--primary-400: var(--default-400);--primary-500: var(--default-500);--primary-600: var(--default-600);--primary-700: var(--default-700);--primary-800: var(--default-800);--primary-900: var(--default-900)}[data-theme=default].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--default);--primary-foreground: var(--neutrals-900);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--default);--chart-1: var(--default-500);--chart-2: var(--default-400);--chart-3: var(--default-300);--chart-4: var(--default-200);--chart-5: var(--default-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--default);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--default)}[data-theme=sign]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--sign);--primary-foreground: var(--neutrals-0);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--sign);--chart-1: var(--sign-500);--chart-2: var(--sign-400);--chart-3: var(--sign-300);--chart-4: var(--sign-200);--chart-5: var(--sign-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--sign);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--sign);--primary-25: var(--sign-25);--primary-50: var(--sign-50);--primary-100: var(--sign-100);--primary-200: var(--sign-200);--primary-300: var(--sign-300);--primary-400: var(--sign-400);--primary-500: var(--sign-500);--primary-600: var(--sign-600);--primary-700: var(--sign-700);--primary-800: var(--sign-800);--primary-900: var(--sign-900)}[data-theme=sign].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--sign);--primary-foreground: var(--neutrals-900);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--sign);--chart-1: var(--sign-500);--chart-2: var(--sign-400);--chart-3: var(--sign-300);--chart-4: var(--sign-200);--chart-5: var(--sign-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--sign);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--sign)}[data-theme=id]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--id);--primary-foreground: var(--neutrals-0);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--id);--chart-1: var(--id-500);--chart-2: var(--id-400);--chart-3: var(--id-300);--chart-4: var(--id-200);--chart-5: var(--id-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--id);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--id-500);--primary-25: var(--id-25);--primary-50: var(--id-50);--primary-100: var(--id-100);--primary-200: var(--id-200);--primary-300: var(--id-300);--primary-400: var(--id-400);--primary-500: var(--id-500);--primary-600: var(--id-600);--primary-700: var(--id-700);--primary-800: var(--id-800);--primary-900: var(--id-900)}[data-theme=id].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--id);--primary-foreground: var(--neutrals-900);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--id);--chart-1: var(--id-500);--chart-2: var(--id-400);--chart-3: var(--id-300);--chart-4: var(--id-200);--chart-5: var(--id-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--id);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--id)}[data-theme=pay]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--pay);--primary-foreground: var(--neutrals-0);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--pay);--chart-1: var(--pay-500);--chart-2: var(--pay-400);--chart-3: var(--pay-300);--chart-4: var(--pay-200);--chart-5: var(--pay-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--pay);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--pay);--primary-25: var(--pay-25);--primary-50: var(--pay-50);--primary-100: var(--pay-100);--primary-200: var(--pay-200);--primary-300: var(--pay-300);--primary-400: var(--pay-400);--primary-500: var(--pay-500);--primary-600: var(--pay-600);--primary-700: var(--pay-700);--primary-800: var(--pay-800);--primary-900: var(--pay-900)}[data-theme=pay].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--pay);--primary-foreground: var(--neutrals-900);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--pay);--chart-1: var(--pay-500);--chart-2: var(--pay-400);--chart-3: var(--pay-300);--chart-4: var(--pay-200);--chart-5: var(--pay-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--pay);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--pay)}[data-theme=risk]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--risk);--primary-foreground: var(--neutrals-0);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--risk);--chart-1: var(--risk-500);--chart-2: var(--risk-400);--chart-3: var(--risk-300);--chart-4: var(--risk-200);--chart-5: var(--risk-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--risk);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--risk);--primary-25: var(--risk-25);--primary-50: var(--risk-50);--primary-100: var(--risk-100);--primary-200: var(--risk-200);--primary-300: var(--risk-300);--primary-400: var(--risk-400);--primary-500: var(--risk-500);--primary-600: var(--risk-600);--primary-700: var(--risk-700);--primary-800: var(--risk-800);--primary-900: var(--risk-900)}[data-theme=risk].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--risk);--primary-foreground: var(--neutrals-900);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--risk);--chart-1: var(--risk-500);--chart-2: var(--risk-400);--chart-3: var(--risk-300);--chart-4: var(--risk-200);--chart-5: var(--risk-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--risk);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--risk)}[data-theme=check]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--check);--primary-foreground: var(--neutrals-0);--secondary: var(--check-100);--secondary-foreground: var(--check-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--check);--chart-1: var(--check-500);--chart-2: var(--check-400);--chart-3: var(--check-300);--chart-4: var(--check-200);--chart-5: var(--check-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--check);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--check);--primary-25: var(--check-25);--primary-50: var(--check-50);--primary-100: var(--check-100);--primary-200: var(--check-200);--primary-300: var(--check-300);--primary-400: var(--check-400);--primary-500: var(--check-500);--primary-600: var(--check-600);--primary-700: var(--check-700);--primary-800: var(--check-800);--primary-900: var(--check-900)}[data-theme=check].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--check);--primary-foreground: var(--neutrals-900);--secondary: var(--check-100);--secondary-foreground: var(--check-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--check);--chart-1: var(--check-500);--chart-2: var(--check-400);--chart-3: var(--check-300);--chart-4: var(--check-200);--chart-5: var(--check-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--check);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--check)}
+[data-theme=default]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--default);--primary-foreground: var(--neutrals-0);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: var(--neutrals-50);--muted-foreground: var(--neutrals-600);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--default);--chart-1: var(--default-500);--chart-2: var(--default-400);--chart-3: var(--default-300);--chart-4: var(--default-200);--chart-5: var(--default-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--default);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--default);--primary-25: var(--default-25);--primary-50: var(--default-50);--primary-100: var(--default-100);--primary-200: var(--default-200);--primary-300: var(--default-300);--primary-400: var(--default-400);--primary-500: var(--default-500);--primary-600: var(--default-600);--primary-700: var(--default-700);--primary-800: var(--default-800);--primary-900: var(--default-900)}[data-theme=default].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--default);--primary-foreground: var(--neutrals-900);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--default);--chart-1: var(--default-500);--chart-2: var(--default-400);--chart-3: var(--default-300);--chart-4: var(--default-200);--chart-5: var(--default-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--default);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--default)}[data-theme=sign]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--sign);--primary-foreground: var(--neutrals-0);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: var(--neutrals-50);--muted-foreground: var(--neutrals-600);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--sign);--chart-1: var(--sign-500);--chart-2: var(--sign-400);--chart-3: var(--sign-300);--chart-4: var(--sign-200);--chart-5: var(--sign-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--sign);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--sign);--primary-25: var(--sign-25);--primary-50: var(--sign-50);--primary-100: var(--sign-100);--primary-200: var(--sign-200);--primary-300: var(--sign-300);--primary-400: var(--sign-400);--primary-500: var(--sign-500);--primary-600: var(--sign-600);--primary-700: var(--sign-700);--primary-800: var(--sign-800);--primary-900: var(--sign-900)}[data-theme=sign].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--sign);--primary-foreground: var(--neutrals-900);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--sign);--chart-1: var(--sign-500);--chart-2: var(--sign-400);--chart-3: var(--sign-300);--chart-4: var(--sign-200);--chart-5: var(--sign-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--sign);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--sign)}[data-theme=id]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--id);--primary-foreground: var(--neutrals-0);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: var(--neutrals-50);--muted-foreground: var(--neutrals-600);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--id);--chart-1: var(--id-500);--chart-2: var(--id-400);--chart-3: var(--id-300);--chart-4: var(--id-200);--chart-5: var(--id-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--id);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--id-500);--primary-25: var(--id-25);--primary-50: var(--id-50);--primary-100: var(--id-100);--primary-200: var(--id-200);--primary-300: var(--id-300);--primary-400: var(--id-400);--primary-500: var(--id-500);--primary-600: var(--id-600);--primary-700: var(--id-700);--primary-800: var(--id-800);--primary-900: var(--id-900)}[data-theme=id].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--id);--primary-foreground: var(--neutrals-900);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--id);--chart-1: var(--id-500);--chart-2: var(--id-400);--chart-3: var(--id-300);--chart-4: var(--id-200);--chart-5: var(--id-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--id);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--id)}[data-theme=pay]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--pay);--primary-foreground: var(--neutrals-0);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: var(--neutrals-50);--muted-foreground: var(--neutrals-600);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--pay);--chart-1: var(--pay-500);--chart-2: var(--pay-400);--chart-3: var(--pay-300);--chart-4: var(--pay-200);--chart-5: var(--pay-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--pay);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--pay);--primary-25: var(--pay-25);--primary-50: var(--pay-50);--primary-100: var(--pay-100);--primary-200: var(--pay-200);--primary-300: var(--pay-300);--primary-400: var(--pay-400);--primary-500: var(--pay-500);--primary-600: var(--pay-600);--primary-700: var(--pay-700);--primary-800: var(--pay-800);--primary-900: var(--pay-900)}[data-theme=pay].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--pay);--primary-foreground: var(--neutrals-900);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--pay);--chart-1: var(--pay-500);--chart-2: var(--pay-400);--chart-3: var(--pay-300);--chart-4: var(--pay-200);--chart-5: var(--pay-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--pay);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--pay)}[data-theme=risk]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--risk);--primary-foreground: var(--neutrals-0);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: var(--neutrals-50);--muted-foreground: var(--neutrals-600);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--risk);--chart-1: var(--risk-500);--chart-2: var(--risk-400);--chart-3: var(--risk-300);--chart-4: var(--risk-200);--chart-5: var(--risk-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--risk);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--risk);--primary-25: var(--risk-25);--primary-50: var(--risk-50);--primary-100: var(--risk-100);--primary-200: var(--risk-200);--primary-300: var(--risk-300);--primary-400: var(--risk-400);--primary-500: var(--risk-500);--primary-600: var(--risk-600);--primary-700: var(--risk-700);--primary-800: var(--risk-800);--primary-900: var(--risk-900)}[data-theme=risk].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--risk);--primary-foreground: var(--neutrals-900);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--risk);--chart-1: var(--risk-500);--chart-2: var(--risk-400);--chart-3: var(--risk-300);--chart-4: var(--risk-200);--chart-5: var(--risk-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--risk);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--risk)}[data-theme=check]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--check);--primary-foreground: var(--neutrals-0);--secondary: var(--check-100);--secondary-foreground: var(--check-700);--muted: var(--neutrals-50);--muted-foreground: var(--neutrals-600);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--check);--chart-1: var(--check-500);--chart-2: var(--check-400);--chart-3: var(--check-300);--chart-4: var(--check-200);--chart-5: var(--check-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--check);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--check);--primary-25: var(--check-25);--primary-50: var(--check-50);--primary-100: var(--check-100);--primary-200: var(--check-200);--primary-300: var(--check-300);--primary-400: var(--check-400);--primary-500: var(--check-500);--primary-600: var(--check-600);--primary-700: var(--check-700);--primary-800: var(--check-800);--primary-900: var(--check-900)}[data-theme=check].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--check);--primary-foreground: var(--neutrals-900);--secondary: var(--check-100);--secondary-foreground: var(--check-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--check);--chart-1: var(--check-500);--chart-2: var(--check-400);--chart-3: var(--check-300);--chart-4: var(--check-200);--chart-5: var(--check-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--check);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--check)}

package/dist/typography-9EoV0kcN.js

@@ -0,0 +1,44 @@
+"use client";
+import { j as e } from "./jsx-runtime-BzflLqGi.js";
+import { S as d } from "./index-BvLQnI56.js";
+import { c as n } from "./index-CRiPKpXj.js";
+import { c as p } from "./index-BqtVL8d-.js";
+const x = p("", {
+  variants: {
+    variant: {
+      sm: "adm:text-sm",
+      md: "adm:text-base",
+      lg: "adm:text-lg",
+      xs: "adm:text-xs",
+      caption: "adm:text-[11px]"
+    },
+    color: {
+      default: "adm:text-foreground",
+      muted: "adm:text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "sm",
+    color: "default"
+  }
+});
+function u({
+  className: t,
+  variant: a,
+  color: o,
+  asChild: r = !1,
+  ...m
+}) {
+  const s = r ? d : "p";
+  return /* @__PURE__ */ e.jsx(
+    s,
+    {
+      "data-slot": "typography",
+      className: n(x({ variant: a, color: o, className: t })),
+      ...m
+    }
+  );
+}
+export {
+  u as T
+};

package/dist/typography-DqQZZpkD.cjs

@@ -0,0 +1 @@
+"use client";"use strict";const n=require("./jsx-runtime-BB_1_6y_.cjs"),d=require("./index-CjyiloO7.cjs"),i=require("./index-DoxiiusW.cjs"),m=require("./index-BTzZJcis.cjs"),u=m.cva("",{variants:{variant:{sm:"adm:text-sm",md:"adm:text-base",lg:"adm:text-lg",xs:"adm:text-xs",caption:"adm:text-[11px]"},color:{default:"adm:text-foreground",muted:"adm:text-muted-foreground"}},defaultVariants:{variant:"sm",color:"default"}});function x({className:t,variant:e,color:a,asChild:r=!1,...s}){const o=r?d.Slot:"p";return n.jsxRuntimeExports.jsx(o,{"data-slot":"typography",className:i.cn(u({variant:e,color:a,className:t})),...s})}exports.Typography=x;

package/dist/typography.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./jsx-runtime-BB_1_6y_.cjs"),d=require("./index-CjyiloO7.cjs"),i=require("./index-DoxiiusW.cjs"),u=require("./index-BTzZJcis.cjs"),m=u.cva("",{variants:{variant:{sm:"adm:text-sm",md:"adm:text-base",lg:"adm:text-lg",xs:"adm:text-xs",caption:"adm:text-[11px]"},color:{default:"adm:text-foreground",muted:"adm:text-muted-foreground"}},defaultVariants:{variant:"sm",color:"default"}});function c({className:t,variant:e,color:a,asChild:r=!1,...o}){const s=r?d.Slot:"p";return n.jsxRuntimeExports.jsx(s,{"data-slot":"typography",className:i.cn(m({variant:e,color:a,className:t})),...o})}exports.Typography=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./typography-DqQZZpkD.cjs");exports.Typography=e.Typography;

package/dist/typography.js

@@ -1,44 +1,4 @@
-"use client";
-import { j as e } from "./jsx-runtime-BzflLqGi.js";
-import { S as d } from "./index-BvLQnI56.js";
-import { c as n } from "./index-CRiPKpXj.js";
-import { c as p } from "./index-BqtVL8d-.js";
-const x = p("", {
-  variants: {
-    variant: {
-      sm: "adm:text-sm",
-      md: "adm:text-base",
-      lg: "adm:text-lg",
-      xs: "adm:text-xs",
-      caption: "adm:text-[11px]"
-    },
-    color: {
-      default: "adm:text-foreground",
-      muted: "adm:text-muted-foreground"
-    }
-  },
-  defaultVariants: {
-    variant: "sm",
-    color: "default"
-  }
-});
-function u({
-  className: t,
-  variant: a,
-  color: o,
-  asChild: r = !1,
-  ...m
-}) {
-  const s = r ? d : "p";
-  return /* @__PURE__ */ e.jsx(
-    s,
-    {
-      "data-slot": "typography",
-      className: n(x({ variant: a, color: o, className: t })),
-      ...m
-    }
-  );
-}
+import { T as r } from "./typography-9EoV0kcN.js";
 export {
-  u as Typography
+  r as Typography
 };

package/docs/components/ui/file-upload.md

@@ -0,0 +1,473 @@
+# File Upload Component
+
+## Descripción
+
+Componente de carga de archivos con funcionalidad **drag & drop**, validación de extensiones y tamaño, vista previa del archivo seleccionado y área de arrastre visual. Ideal para formularios que requieren subida de archivos con feedback inmediato al usuario.
+
+## Características
+
+- ✅ Drag & Drop con feedback visual
+- ✅ Validación de extensiones de archivo
+- ✅ Validación de tamaño máximo
+- ✅ Vista previa del archivo seleccionado con tamaño
+- ✅ Botón para remover archivo seleccionado
+- ✅ Etiquetas personalizables (i18n)
+- ✅ Estado de arrastre visual (borde y fondo cambian)
+- ✅ Integración con formularios React
+- ✅ TypeScript completo con tipos exportados
+
+## Importación
+
+```typescript
+import { FileUpload } from "@adamosuiteservices/ui/file-upload";
+import type { FileUploadProps, FileUploadLabels } from "@adamosuiteservices/ui/file-upload";
+```
+
+## Uso Básico
+
+```tsx
+import { useState } from "react";
+import { FileUpload } from "@adamosuiteservices/ui/file-upload";
+
+function MyForm() {
+  const [file, setFile] = useState<File | null>(null);
+
+  return (
+    <FileUpload
+      selectedFile={file}
+      onFileSelect={setFile}
+    />
+  );
+}
+```
+
+**Configuración por defecto**:
+- Extensiones aceptadas: `.xls`, `.xlsx`, `.numbers`
+- Tamaño máximo: 50 MB
+
+## Props
+
+### selectedFile (requerido)
+
+```tsx
+selectedFile: File | null
+```
+
+Estado del archivo actualmente seleccionado. Usa `null` cuando no hay archivo.
+
+### onFileSelect (requerido)
+
+```tsx
+onFileSelect: (file: File | null) => void
+```
+
+Callback invocado cuando el usuario selecciona o remueve un archivo.
+
+### acceptedExtensions
+
+```tsx
+acceptedExtensions?: string[]
+```
+
+Array de extensiones de archivo permitidas. Por defecto: `[".xls", ".xlsx", ".numbers"]`
+
+**Ejemplo**:
+```tsx
+<FileUpload
+  selectedFile={file}
+  onFileSelect={setFile}
+  acceptedExtensions={[".pdf", ".doc", ".docx"]}
+/>
+```
+
+### maxSizeInMB
+
+```tsx
+maxSizeInMB?: number
+```
+
+Tamaño máximo del archivo en megabytes. Por defecto: `50`
+
+**Ejemplo**:
+```tsx
+<FileUpload
+  selectedFile={file}
+  onFileSelect={setFile}
+  maxSizeInMB={10}
+/>
+```
+
+### labels
+
+```tsx
+labels?: FileUploadLabels
+
+type FileUploadLabels = {
+  dragDrop?: string
+  selectFile?: string
+  fileRequirements?: string
+}
+```
+
+Etiquetas personalizables para internacionalización o textos específicos.
+
+**Ejemplo**:
+```tsx
+<FileUpload
+  selectedFile={file}
+  onFileSelect={setFile}
+  labels={{
+    dragDrop: "Arrastra y suelta tu archivo aquí o",
+    selectFile: "Selecciona el archivo",
+    fileRequirements: "Archivos permitidos: .xls, .xlsx. Tamaño máximo 50 MB."
+  }}
+/>
+```
+
+## Ejemplos
+
+### Archivos de Excel (Por Defecto)
+
+```tsx
+const [file, setFile] = useState<File | null>(null);
+
+<FileUpload
+  selectedFile={file}
+  onFileSelect={setFile}
+/>
+```
+
+### Imágenes
+
+```tsx
+const [image, setImage] = useState<File | null>(null);
+
+<FileUpload
+  selectedFile={image}
+  onFileSelect={setImage}
+  acceptedExtensions={[".jpg", ".jpeg", ".png", ".gif", ".webp"]}
+  maxSizeInMB={5}
+  labels={{
+    dragDrop: "Drag and drop your image here or",
+    selectFile: "Select an image",
+    fileRequirements: "Supported formats: JPG, PNG, GIF, WebP. Max 5MB."
+  }}
+/>
+```
+
+### Documentos PDF
+
+```tsx
+const [document, setDocument] = useState<File | null>(null);
+
+<FileUpload
+  selectedFile={document}
+  onFileSelect={setDocument}
+  acceptedExtensions={[".pdf"]}
+  maxSizeInMB={20}
+  labels={{
+    dragDrop: "Drag and drop your PDF here or",
+    selectFile: "Select PDF",
+    fileRequirements: "Only PDF files. Maximum 20 MB."
+  }}
+/>
+```
+
+### CSV/Excel para Importación
+
+```tsx
+const [dataFile, setDataFile] = useState<File | null>(null);
+
+<FileUpload
+  selectedFile={dataFile}
+  onFileSelect={setDataFile}
+  acceptedExtensions={[".csv", ".xls", ".xlsx"]}
+  maxSizeInMB={30}
+/>
+```
+
+### Archivos Comprimidos
+
+```tsx
+const [archive, setArchive] = useState<File | null>(null);
+
+<FileUpload
+  selectedFile={archive}
+  onFileSelect={setArchive}
+  acceptedExtensions={[".zip", ".rar", ".7z"]}
+  maxSizeInMB={500}
+  labels={{
+    dragDrop: "Drag and drop your archive here or",
+    selectFile: "Select the archive"
+  }}
+/>
+```
+
+### Con Integración en Formulario
+
+```tsx
+function UploadForm() {
+  const [file, setFile] = useState<File | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const response = await fetch("/api/upload", {
+        method: "POST",
+        body: formData
+      });
+      
+      if (response.ok) {
+        alert("File uploaded successfully!");
+        setFile(null);
+      }
+    } catch (error) {
+      console.error("Upload failed:", error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <FileUpload
+        selectedFile={file}
+        onFileSelect={setFile}
+      />
+      <Button type="submit" disabled={!file}>
+        Upload File
+      </Button>
+    </form>
+  );
+}
+```
+
+## Estados Visuales
+
+### Sin Archivo Seleccionado
+
+El componente muestra:
+- Área de drag & drop con borde punteado
+- Icono de documento en fondo azul claro
+- Texto instructivo y link para seleccionar archivo
+- Requisitos del archivo (extensiones y tamaño)
+
+### Durante Drag Over
+
+Cuando el usuario arrastra un archivo sobre el área:
+- Borde cambia a `border-primary-500`
+- Fondo cambia a `bg-primary-50`
+- Transición suave con `transition-colors`
+
+### Con Archivo Seleccionado
+
+El componente muestra:
+- Tarjeta con fondo `bg-neutral-100`
+- Icono de documento en fondo blanco
+- Nombre del archivo (con truncate si es largo)
+- Tamaño del archivo en MB
+- Botón destructivo para remover el archivo
+
+## Validación
+
+El componente valida automáticamente:
+
+1. **Extensión**: Solo acepta archivos con extensiones en `acceptedExtensions`
+2. **Tamaño**: Rechaza archivos mayores a `maxSizeInMB`
+
+Si un archivo no cumple estas validaciones, no se selecciona y `onFileSelect` no se invoca.
+
+## Estilos Base
+
+### Área de Drag & Drop
+
+- Padding: `p-6` (24px)
+- Border radius: `rounded-2xl` (16px)
+- Border: `border-2 border-dashed`
+- Gap entre elementos: `gap-6` (24px)
+- Transiciones: `transition-colors`
+
+### Estado Normal vs Dragging
+
+```tsx
+// Normal
+border-neutral-300 bg-neutral-50
+
+// Dragging
+border-primary-500 bg-primary-50
+```
+
+### Tarjeta de Archivo Seleccionado
+
+- Padding: `p-6` (24px)
+- Border radius: `rounded-2xl` (16px)
+- Background: `bg-neutral-100`
+- Gap horizontal: `gap-4` (16px)
+- Icono en fondo blanco con `rounded-xl` y `p-2.5`
+
+### Botón de Remover
+
+- Variante: `destructive-medium`
+- Icono: `delete` de Material Symbols
+- Color del icono: `text-destructive-500`
+
+## Accesibilidad
+
+- Input file oculto con `className="adm:hidden"`
+- Label asociado correctamente con `htmlFor="file-upload"`
+- Botón de link usa `asChild` para comportamiento semántico
+- Typography con color `muted` para textos secundarios
+
+## Buenas Prácticas
+
+### ✅ Recomendado
+
+```tsx
+// Estado controlado con useState
+const [file, setFile] = useState<File | null>(null);
+
+// Validación de tamaño apropiada
+maxSizeInMB={10} // Para documentos comunes
+maxSizeInMB={5}  // Para imágenes
+maxSizeInMB={500} // Para archivos grandes (zip, videos)
+
+// Labels específicas y claras
+labels={{
+  dragDrop: "Drag and drop your invoice here or",
+  selectFile: "Select invoice",
+  fileRequirements: "PDF only. Max 10MB."
+}}
+
+// Reset después de upload exitoso
+onSuccess={() => setFile(null)}
+```
+
+### ❌ Evitar
+
+```tsx
+// No validar el archivo antes de hacer upload
+// Siempre verificar que file no sea null
+
+// Extensiones demasiado permisivas
+acceptedExtensions={[".*"]} // Inseguro
+
+// Tamaño excesivo sin justificación
+maxSizeInMB={10000} // 10GB es excesivo
+
+// Labels genéricas cuando el contexto es específico
+labels={{ selectFile: "Select file" }} // Poco descriptivo
+```
+
+## Tipos TypeScript
+
+```typescript
+export type FileUploadLabels = {
+  dragDrop?: string
+  selectFile?: string
+  fileRequirements?: string
+};
+
+export type FileUploadProps = ComponentProps<"div"> & Readonly<{
+  selectedFile: File | null
+  onFileSelect: (file: File | null) => void
+  acceptedExtensions?: string[]
+  maxSizeInMB?: number
+  labels?: FileUploadLabels
+}>;
+```
+
+## Integración con Backend
+
+### FormData para Upload
+
+```tsx
+const uploadFile = async (file: File) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("metadata", JSON.stringify({
+    uploadedAt: new Date().toISOString()
+  }));
+
+  const response = await fetch("/api/upload", {
+    method: "POST",
+    body: formData
+  });
+
+  return response.json();
+};
+```
+
+### Con Progress Tracking
+
+```tsx
+const [progress, setProgress] = useState(0);
+
+const uploadWithProgress = async (file: File) => {
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const xhr = new XMLHttpRequest();
+
+  xhr.upload.addEventListener("progress", (e) => {
+    if (e.lengthComputable) {
+      setProgress((e.loaded / e.total) * 100);
+    }
+  });
+
+  xhr.open("POST", "/api/upload");
+  xhr.send(formData);
+};
+```
+
+## Personalización
+
+### Custom Styling
+
+```tsx
+<FileUpload
+  selectedFile={file}
+  onFileSelect={setFile}
+  className="adm:max-w-2xl adm:mx-auto"
+/>
+```
+
+### Con Wrapper Adicional
+
+```tsx
+<div className="adm:space-y-4">
+  <Label>Upload your document</Label>
+  <FileUpload
+    selectedFile={file}
+    onFileSelect={setFile}
+  />
+  {file && (
+    <Typography color="success">
+      ✓ File ready to upload
+    </Typography>
+  )}
+</div>
+```
+
+## Comparación con Input type="file"
+
+| Característica | Input file nativo | FileUpload |
+|----------------|-------------------|------------|
+| Drag & Drop | ❌ No | ✅ Sí |
+| Validación visual | ❌ No | ✅ Sí |
+| Preview del archivo | ❌ No | ✅ Sí con nombre y tamaño |
+| Extensiones validadas | ⚠️ Solo accept attribute | ✅ Con feedback visual |
+| Tamaño validado | ❌ Solo en backend | ✅ Cliente y servidor |
+| UX consistente | ❌ Varía por browser | ✅ Consistente |
+| Labels customizables | ❌ No | ✅ Sí (i18n friendly) |
+
+## Notas
+
+- El componente usa `File` API nativa del browser
+- La validación es solo en cliente - siempre validar también en el servidor
+- El drag & drop solo funciona con un archivo a la vez
+- Los archivos no se almacenan automáticamente - manejar el upload con `onFileSelect`
+- El componente es completamente controlado - el padre maneja el estado del archivo

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "2.12.2",
+  "version": "2.13.1",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -114,6 +114,10 @@
       "types": "./dist/components/ui/field/field.d.ts",
       "import": "./dist/field.js"
     },
+    "./file-upload": {
+      "types": "./dist/components/ui/file-upload/file-upload.d.ts",
+      "import": "./dist/file-upload.js"
+    },
     "./hover-card": {
       "types": "./dist/components/ui/hover-card/hover-card.d.ts",
       "import": "./dist/hover-card.js"