@adamosuiteservices/ui 1.4.6 → 1.6.6

package/dist/themes.css

@@ -1 +1 @@
-[data-theme=default]{--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: var(--default);--primary-foreground: oklch(.985 0 0);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: var(--error-500);--destructive-foreground: oklch(1 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: var(--default-500);--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: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: var(--default-500);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--sidebar-ring: var(--default-500);--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: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: var(--default);--primary-foreground: oklch(.205 0 0);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: var(--error-500);--destructive-foreground: oklch(1 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: var(--default-500);--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: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: var(--default-500);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: var(--default-500)}[data-theme=sign]{--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: var(--sign);--primary-foreground: oklch(.985 0 0);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: var(--error-500);--destructive-foreground: oklch(1 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: var(--sign-500);--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: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: var(--sign-500);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--sidebar-ring: var(--sign-500);--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: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: var(--sign);--primary-foreground: oklch(.205 0 0);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: var(--error-500);--destructive-foreground: oklch(1 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: var(--sign-500);--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: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: var(--sign-500);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: var(--sign-500)}[data-theme=id]{--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: var(--id);--primary-foreground: oklch(.985 0 0);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: var(--error-500);--destructive-foreground: oklch(1 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: var(--id-500);--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: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: var(--id-500);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--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: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: var(--id);--primary-foreground: oklch(.205 0 0);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: var(--error-500);--destructive-foreground: oklch(1 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: var(--id-500);--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: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: var(--id-500);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: var(--id-500)}[data-theme=pay]{--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: var(--pay);--primary-foreground: oklch(.985 0 0);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: var(--error-500);--destructive-foreground: oklch(1 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: var(--pay-500);--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: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: var(--pay-500);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--sidebar-ring: var(--pay-500);--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: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: var(--pay);--primary-foreground: oklch(.205 0 0);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: var(--error-500);--destructive-foreground: oklch(1 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: var(--pay-500);--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: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: var(--pay-500);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: var(--pay-500)}[data-theme=risk]{--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: var(--risk);--primary-foreground: oklch(.985 0 0);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: var(--error-500);--destructive-foreground: oklch(1 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: var(--risk-500);--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: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: var(--risk-500);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--sidebar-ring: var(--risk-500);--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: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: var(--risk);--primary-foreground: oklch(.205 0 0);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: var(--error-500);--destructive-foreground: oklch(1 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: var(--risk-500);--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: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: var(--risk-500);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: var(--risk-500)}
+[data-theme=default]{--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: var(--default);--primary-foreground: oklch(.985 0 0);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: var(--error);--destructive-foreground: oklch(1 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: var(--default-500);--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: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: var(--default);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--sidebar-ring: var(--default-500);--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: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: var(--default);--primary-foreground: oklch(.205 0 0);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: var(--error);--destructive-foreground: oklch(1 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: var(--default-500);--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: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: var(--default);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: var(--default-500)}[data-theme=sign]{--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: var(--sign);--primary-foreground: oklch(.985 0 0);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: var(--error);--destructive-foreground: oklch(1 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: var(--sign-500);--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: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: var(--sign);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--sidebar-ring: var(--sign-500);--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: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: var(--sign);--primary-foreground: oklch(.205 0 0);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: var(--error);--destructive-foreground: oklch(1 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: var(--sign-500);--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: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: var(--sign);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: var(--sign-500)}[data-theme=id]{--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: var(--id);--primary-foreground: oklch(.985 0 0);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: var(--error);--destructive-foreground: oklch(1 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: var(--id-500);--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: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: var(--id);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--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: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: var(--id);--primary-foreground: oklch(.205 0 0);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: var(--error);--destructive-foreground: oklch(1 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: var(--id-500);--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: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: var(--id);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: var(--id-500)}[data-theme=pay]{--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: var(--pay);--primary-foreground: oklch(.985 0 0);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: var(--error);--destructive-foreground: oklch(1 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: var(--pay-500);--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: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: var(--pay);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--sidebar-ring: var(--pay-500);--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: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: var(--pay);--primary-foreground: oklch(.205 0 0);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: var(--error);--destructive-foreground: oklch(1 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: var(--pay-500);--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: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: var(--pay);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: var(--pay-500)}[data-theme=risk]{--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: var(--risk);--primary-foreground: oklch(.985 0 0);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: var(--error);--destructive-foreground: oklch(1 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: var(--risk-500);--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: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: var(--risk);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--sidebar-ring: var(--risk-500);--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: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: var(--risk);--primary-foreground: oklch(.205 0 0);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: var(--error);--destructive-foreground: oklch(1 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: var(--risk-500);--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: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: var(--risk);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: var(--risk-500)}

package/docs/components/ui/combobox.md

@@ -1,6 +1,6 @@
 # Combobox
 
-Componente de selección avanzado que combina Popover + Command para búsqueda y selección. Soporta selección simple/múltiple, búsqueda filtrable, opciones deshabilitadas, y feedback visual con checkbox o check.
+Componente de selección avanzado que combina Popover + Command para búsqueda y selección. Soporta selección simple/múltiple, búsqueda filtrable, opciones deshabilitadas, feedback visual con checkbox o check, placeholder persistente, iconos personalizados, y renderizado completamente personalizable mediante render props.
 
 ## Importación
 
@@ -25,16 +25,20 @@ import { Combobox } from "@adamosuiteservices/ui/combobox";
 
 ## Props Principales
 
-| Prop               | Tipo                                  | Default      | Descripción                                                |
-| ------------------ | ------------------------------------- | ------------ | ---------------------------------------------------------- |
-| `options`          | `ComboboxOption[]`                    | **required** | Array de opciones `{ value, label, disabled? }`            |
-| `value`            | `string \| string[]`                  | -            | Valor controlado (string para single, array para multiple) |
-| `onValueChange`    | `(value: string \| string[]) => void` | -            | Callback al cambiar selección                              |
-| `searchable`       | `boolean`                             | `false`      | Habilita input de búsqueda                                 |
-| `multiple`         | `boolean`                             | `false`      | Permite selección múltiple                                 |
-| `selectedFeedback` | `"checkbox" \| "check"`               | `"checkbox"` | Tipo de indicador visual                                   |
-| `labels`           | `ComboboxLabels`                      | -            | Textos personalizables (ver tabla abajo)                   |
-| `classNames`       | `ComboboxClassNames`                  | -            | Clases CSS por sección (ver tabla abajo)                   |
+| Prop                    | Tipo                                    | Default      | Descripción                                                 |
+| ----------------------- | --------------------------------------- | ------------ | ----------------------------------------------------------- |
+| `options`               | `ComboboxOption[]`                      | **required** | Array de opciones `{ value, label, disabled? }`             |
+| `value`                 | `string \| string[]`                    | -            | Valor controlado (string para single, array para multiple)  |
+| `onValueChange`         | `(value: string \| string[]) => void`   | -            | Callback al cambiar selección                               |
+| `searchable`            | `boolean`                               | `false`      | Habilita input de búsqueda                                  |
+| `multiple`              | `boolean`                               | `false`      | Permite selección múltiple                                  |
+| `selectedFeedback`      | `"checkbox" \| "check"`                 | `"checkbox"` | Tipo de indicador visual                                    |
+| `icon`                  | `ComponentType<{ className?: string }>` | -            | Componente de icono opcional para mostrar en el trigger     |
+| `showIcon`              | `boolean`                               | `false`      | Muestra el icono en el trigger                              |
+| `alwaysShowPlaceholder` | `boolean`                               | `false`      | Mantiene el placeholder visible junto al valor seleccionado |
+| `labels`                | `ComboboxLabels`                        | -            | Textos personalizables (ver tabla abajo)                    |
+| `classNames`            | `ComboboxClassNames`                    | -            | Clases CSS por sección (ver tabla abajo)                    |
+| `renders`               | `ComboboxRenderProps`                   | -            | Funciones de renderizado personalizadas (ver tabla abajo)   |
 
 ### ComboboxLabels
 
@@ -60,6 +64,22 @@ import { Combobox } from "@adamosuiteservices/ui/combobox";
 | `checkbox` | Checkbox de selección (si `selectedFeedback="checkbox"`) |
 | `check`    | Icono de check (si `selectedFeedback="check"`)           |
 
+### ComboboxRenderProps
+
+Funciones de renderizado personalizadas para control total sobre la UI. Todas son opcionales y reciben props relevantes.
+
+| Prop               | Parámetros                                                            | Descripción                             |
+| ------------------ | --------------------------------------------------------------------- | --------------------------------------- |
+| `trigger`          | `{ open, value, displayText, placeholder, hasValue, icon, showIcon }` | Renderiza el botón trigger completo     |
+| `triggerIcon`      | `{ open }`                                                            | Renderiza el icono del dropdown         |
+| `placeholder`      | `{ text, hasValue }`                                                  | Renderiza el texto del placeholder      |
+| `displayValue`     | `{ text, value }`                                                     | Renderiza el valor seleccionado         |
+| `option`           | `{ option, isSelected, selectedFeedback }`                            | Renderiza una opción completa           |
+| `optionLabel`      | `{ option }`                                                          | Renderiza solo la etiqueta de la opción |
+| `selectedFeedback` | `{ option, isSelected, type }`                                        | Renderiza el indicador de selección     |
+| `empty`            | `{ text }`                                                            | Renderiza el estado vacío               |
+| `searchInput`      | `{ placeholder }`                                                     | Renderiza el input de búsqueda          |
+
 ## Patrones de Uso
 
 ### Básico (Sin Búsqueda)
@@ -77,6 +97,55 @@ const frameworks = [
 />;
 ```
 
+### Con Icono
+
+```tsx
+import { CalendarIcon } from "lucide-react";
+
+<Combobox
+  searchable
+  showIcon
+  icon={CalendarIcon}
+  options={frameworks}
+  labels={{ placeholder: "Select framework..." }}
+/>;
+```
+
+### Placeholder Persistente
+
+Útil para usar el placeholder como etiqueta que permanece visible.
+
+```tsx
+<Combobox
+  searchable
+  alwaysShowPlaceholder
+  options={frameworks}
+  value={value}
+  onValueChange={setValue}
+  labels={{ placeholder: "Framework" }}
+/>
+```
+
+**Comportamiento**:
+
+- Sin valor: Muestra solo "Framework"
+- Con valor: Muestra "Framework: Next.js" (placeholder + valor separados)
+
+### Icono + Placeholder Persistente
+
+```tsx
+<Combobox
+  searchable
+  showIcon
+  alwaysShowPlaceholder
+  icon={CalendarIcon}
+  options={frameworks}
+  value={value}
+  onValueChange={setValue}
+  labels={{ placeholder: "Framework" }}
+/>
+```
+
 ### Con Búsqueda
 
 ```tsx
@@ -249,6 +318,200 @@ const [values, setValues] = useState<string[]>([]);
 </div>;
 ```
 
+## Renderizado Personalizado
+
+El prop `renders` permite personalizar completamente la UI usando el patrón render prop. Todas las funciones son opcionales.
+
+### Custom Option Label
+
+```tsx
+<Combobox
+  searchable
+  options={frameworks}
+  value={value}
+  onValueChange={setValue}
+  renders={{
+    optionLabel: ({ option }) => (
+      <div className="flex items-center gap-2">
+        <span className="font-semibold text-blue-600">🚀</span>
+        <span>{option.label}</span>
+      </div>
+    ),
+  }}
+/>
+```
+
+### Custom Display Value
+
+```tsx
+<Combobox
+  searchable
+  options={frameworks}
+  value={value}
+  onValueChange={setValue}
+  renders={{
+    displayValue: ({ text }) => (
+      <span className="font-semibold text-blue-600">{text}</span>
+    ),
+  }}
+/>
+```
+
+### Custom Trigger Completo
+
+```tsx
+<Combobox
+  searchable
+  options={frameworks}
+  value={value}
+  onValueChange={setValue}
+  renders={{
+    trigger: ({ open, displayText, placeholder, hasValue }) => (
+      <button
+        type="button"
+        className="flex items-center justify-between w-full px-4 py-2 text-sm bg-linear-to-r from-purple-500 to-pink-500 text-white rounded-lg shadow-md hover:shadow-lg transition-all"
+      >
+        <span>{hasValue ? displayText : placeholder}</span>
+        <span className={`transition-transform ${open ? "rotate-180" : ""}`}>
+          ▼
+        </span>
+      </button>
+    ),
+  }}
+/>
+```
+
+### Custom Empty State
+
+```tsx
+<Combobox
+  searchable
+  options={[]}
+  renders={{
+    empty: ({ text }) => (
+      <div className="py-8 text-center">
+        <div className="text-4xl mb-2">🔍</div>
+        <p className="text-sm font-medium text-muted-foreground">{text}</p>
+        <p className="text-xs text-muted-foreground mt-1">
+          Try adjusting your search criteria
+        </p>
+      </div>
+    ),
+  }}
+/>
+```
+
+### Custom Selected Feedback
+
+```tsx
+<Combobox
+  searchable
+  multiple
+  options={frameworks}
+  value={values}
+  onValueChange={setValues}
+  renders={{
+    selectedFeedback: ({ isSelected }) => (
+      <span className="text-lg">{isSelected ? "✅" : "⬜"}</span>
+    ),
+  }}
+/>
+```
+
+### Custom Placeholder
+
+```tsx
+<Combobox
+  searchable
+  alwaysShowPlaceholder
+  options={frameworks}
+  value={value}
+  onValueChange={setValue}
+  renders={{
+    placeholder: ({ text, hasValue }) => (
+      <span className={hasValue ? "opacity-50 italic" : ""}>{text}</span>
+    ),
+  }}
+/>
+```
+
+### Custom Trigger Icon
+
+```tsx
+<Combobox
+  searchable
+  options={frameworks}
+  value={value}
+  onValueChange={setValue}
+  renders={{
+    triggerIcon: ({ open }) => (
+      <span className={`transition-transform ${open ? "rotate-90" : ""}`}>
+        →
+      </span>
+    ),
+  }}
+/>
+```
+
+### Custom Search Input
+
+```tsx
+<Combobox
+  searchable
+  options={frameworks}
+  value={value}
+  onValueChange={setValue}
+  renders={{
+    searchInput: ({ placeholder }) => (
+      <div className="flex items-center px-3 py-2 border-b">
+        <span className="mr-2">🔍</span>
+        <input
+          type="text"
+          placeholder={placeholder}
+          className="flex-1 outline-none text-sm"
+        />
+      </div>
+    ),
+  }}
+/>
+```
+
+### Combinando Múltiples Renders
+
+```tsx
+<Combobox
+  searchable
+  multiple
+  options={frameworks}
+  value={values}
+  onValueChange={setValues}
+  labels={{
+    placeholder: "Select frameworks...",
+    searchPlaceholder: "Search...",
+  }}
+  renders={{
+    optionLabel: ({ option }) => (
+      <div className="flex items-center gap-2">
+        <span>🚀</span>
+        <span className="font-medium">{option.label}</span>
+      </div>
+    ),
+    displayValue: ({ text }) => (
+      <span className="font-semibold text-purple-600">{text}</span>
+    ),
+    selectedFeedback: ({ isSelected }) => (
+      <span className="text-lg">{isSelected ? "✅" : "⬜"}</span>
+    ),
+    empty: ({ text }) => (
+      <div className="py-6 text-center">
+        <div className="text-3xl mb-2">😕</div>
+        <p className="text-sm text-gray-500">{text}</p>
+      </div>
+    ),
+  }}
+/>
+```
+
 ## Modos de Operación
 
 ### Single Selection
@@ -273,7 +536,10 @@ const [values, setValues] = useState<string[]>([]);
 **Tags/Categories**: Selección múltiple de categorías  
 **Settings filters**: Filtros multi-selección en dashboards  
 **User assignment**: Asignar múltiples usuarios a tarea  
-**Language selector**: Selección de idioma con búsqueda
+**Language selector**: Selección de idioma con búsqueda  
+**Status selector con icono**: Usar `icon` + `alwaysShowPlaceholder` para selectores etiquetados  
+**Rich options**: Usar `renders.optionLabel` para mostrar avatares, badges, etc.  
+**Custom UI**: Usar `renders.trigger` para triggers completamente personalizados
 
 ## Estados Internos
 
@@ -281,8 +547,11 @@ const [values, setValues] = useState<string[]>([]);
 
 - **Sin selección**: Muestra `labels.placeholder`
 - **Single selection**: Muestra `label` de la opción seleccionada
+- **Single selection + alwaysShowPlaceholder**: Muestra `placeholder: label` separados
 - **Multiple (1 item)**: Muestra `label` del único item seleccionado
+- **Multiple (1 item) + alwaysShowPlaceholder**: Muestra `placeholder: label` separados
 - **Multiple (>1 items)**: Muestra resultado de `labels.multipleSelected(count)`
+- **Multiple (>1 items) + alwaysShowPlaceholder**: Muestra `placeholder: X items selected` separados
 
 ### Popover State
 
@@ -308,8 +577,12 @@ const [values, setValues] = useState<string[]>([]);
   - `"checkbox"`: Muestra Checkbox a la izquierda de cada opción
   - `"check"`: Muestra CheckIcon a la derecha (agrega `pr-8` automáticamente)
 - **Popover alignment**: `align="start"` por defecto para alinear con trigger
-- **ChevronDownIcon**: Se muestra en trigger con `opacity-50`
+- **ChevronDownIcon**: Se muestra en trigger con `opacity-50` (puede sobrescribirse con `renders.triggerIcon`)
 - **No animation**: Selección instantánea, sin delays
+- **alwaysShowPlaceholder**: Renderiza placeholder y valor como elementos separados con gap
+- **icon**: Se muestra con `opacity-50` por defecto, solo visible si `showIcon={true}`
+- **Render props**: Tienen prioridad sobre renderizado por defecto, permiten personalización completa
+- **Composición de renders**: Puedes combinar múltiples render props para personalización granular
 
 ## Troubleshooting
 
@@ -319,10 +592,14 @@ const [values, setValues] = useState<string[]>([]);
 **Labels incorrectas en multiple**: Usa función `multipleSelected` para pluralización  
 **Tipo de value incorrecto**: Single usa `string`, Multiple usa `string[]`  
 **Checkboxes no aparecen**: Solo aparecen cuando `selectedFeedback="checkbox"` (default)  
-**Check icon no visible**: Solo aparece cuando `selectedFeedback="check"`
+**Check icon no visible**: Solo aparece cuando `selectedFeedback="check"`  
+**Icon no se muestra**: Asegúrate de pasar tanto `icon` como `showIcon={true}`  
+**Placeholder desaparece al seleccionar**: Si quieres mantenerlo visible, usa `alwaysShowPlaceholder={true}`  
+**Render prop no funciona**: Verifica que el render prop retorne un `ReactNode` válido  
+**Custom trigger pierde funcionalidad**: Cuando usas `renders.trigger`, debes manejar el click manualmente o envolver en `PopoverTrigger`
 
 ## Referencias
 
-- **Radix UI Popover**: https://www.radix-ui.com/primitives/docs/components/popover
+- **Radix UI Popover**: <https://www.radix-ui.com/primitives/docs/components/popover>
 - **Command Component**: Ver documentación de Command
-- **ARIA Combobox**: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+- **ARIA Combobox**: <https://www.w3.org/WAI/ARIA/apg/patterns/combobox/>