@adamosuiteservices/ui 2.10.13 → 2.11.13

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-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-400);--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-400);--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-400);--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-400);--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-400);--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-400);--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/docs/components/layout/full-screen-loader.md

@@ -0,0 +1,500 @@
+# Full Screen Loader Component
+
+## Descripción
+
+Overlay de **carga a pantalla completa** que bloquea la interacción del usuario durante operaciones asíncronas. Incluye un spinner animado y un fondo semi-transparente con efecto de backdrop, ideal para indicar operaciones críticas o procesos de carga inicial.
+
+## Características
+
+- ✅ Overlay a pantalla completa con posicionamiento fijo
+- ✅ Fondo semi-transparente (`bg-black/50`)
+- ✅ Spinner animado en color primario
+- ✅ Control programático con `show()` y `hide()`
+- ✅ Patrón observable para sincronización global
+- ✅ Portal rendering para z-index óptimo (`z-100`)
+- ✅ Centrado automático del spinner
+- ✅ Bloqueo de interacción durante carga
+
+## Importación
+
+```typescript
+import {
+  FullScreenLoader,
+  FullScreenLoaderManager,
+} from "@adamosuiteservices/ui/full-screen-loader";
+```
+
+## Setup Inicial
+
+Agrega el componente `FullScreenLoader` en el nivel más alto de tu aplicación:
+
+```tsx
+import { FullScreenLoader } from "@adamosuiteservices/ui/full-screen-loader";
+
+function App() {
+  return (
+    <>
+      {/* Tu app aquí */}
+      <FullScreenLoader />
+    </>
+  );
+}
+```
+
+**Importante**: Solo necesitas una instancia de `FullScreenLoader` en toda tu aplicación.
+
+## Uso Básico
+
+```tsx
+import { FullScreenLoaderManager } from "@adamosuiteservices/ui/full-screen-loader";
+import { Button } from "@adamosuiteservices/ui/button";
+
+function MyComponent() {
+  const handleAsyncOperation = async () => {
+    // Mostrar loader
+    FullScreenLoaderManager.show();
+
+    try {
+      await someAsyncOperation();
+    } finally {
+      // Ocultar loader siempre, incluso si hay error
+      FullScreenLoaderManager.hide();
+    }
+  };
+
+  return <Button onClick={handleAsyncOperation}>Process Data</Button>;
+}
+```
+
+## Patrones de Uso
+
+### Operación Asíncrona Simple
+
+```tsx
+async function fetchData() {
+  FullScreenLoaderManager.show();
+
+  try {
+    const data = await api.getData();
+    return data;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    FullScreenLoaderManager.hide();
+  }
+}
+```
+
+### Múltiples Operaciones en Secuencia
+
+```tsx
+async function processMultipleSteps() {
+  FullScreenLoaderManager.show();
+
+  try {
+    await step1();
+    await step2();
+    await step3();
+  } catch (error) {
+    console.error("Process failed:", error);
+  } finally {
+    FullScreenLoaderManager.hide();
+  }
+}
+```
+
+### Con Timeout Automático
+
+```tsx
+function showTemporaryLoader() {
+  FullScreenLoaderManager.show();
+
+  // Auto-ocultar después de 3 segundos
+  setTimeout(() => {
+    FullScreenLoaderManager.hide();
+  }, 3000);
+}
+```
+
+### Operaciones Paralelas con Promise.all
+
+```tsx
+async function fetchMultipleResources() {
+  FullScreenLoaderManager.show();
+
+  try {
+    const [users, products, orders] = await Promise.all([
+      api.getUsers(),
+      api.getProducts(),
+      api.getOrders(),
+    ]);
+
+    return { users, products, orders };
+  } finally {
+    FullScreenLoaderManager.hide();
+  }
+}
+```
+
+### Navegación con Next.js Router
+
+```tsx
+import { useRouter } from "next/navigation";
+import { FullScreenLoaderManager } from "@adamosuiteservices/ui/full-screen-loader";
+
+function NavigationComponent() {
+  const router = useRouter();
+
+  const handleNavigation = () => {
+    FullScreenLoaderManager.show();
+    router.push("/dashboard");
+    // El loader se ocultará después de que la página cargue
+    // Puedes usar un useEffect en la página de destino para ocultarlo
+  };
+
+  return <Button onClick={handleNavigation}>Go to Dashboard</Button>;
+}
+```
+
+### Carga Inicial de la Aplicación
+
+```tsx
+import { FullScreenLoaderManager } from "@adamosuiteservices/ui/full-screen-loader";
+import { useEffect } from "react";
+
+function App() {
+  useEffect(() => {
+    // Mostrar loader al inicio
+    FullScreenLoaderManager.show();
+
+    // Inicializar la app
+    initializeApp().then(() => {
+      FullScreenLoaderManager.hide();
+    });
+  }, []);
+
+  return (
+    <>
+      {/* App content */}
+      <FullScreenLoader />
+    </>
+  );
+}
+```
+
+## API Reference
+
+### FullScreenLoaderManager
+
+Clase singleton para controlar el estado del loader globalmente.
+
+#### `show()`
+
+Muestra el loader de pantalla completa.
+
+```tsx
+FullScreenLoaderManager.show();
+```
+
+**Uso**: Llamar antes de iniciar operaciones que requieran bloquear la UI.
+
+#### `hide()`
+
+Oculta el loader de pantalla completa.
+
+```tsx
+FullScreenLoaderManager.hide();
+```
+
+**Uso**: Llamar después de completar operaciones, siempre en un bloque `finally` para garantizar ejecución.
+
+## Comportamiento
+
+### Estado Global
+
+El loader usa un patrón observable que sincroniza el estado en toda la aplicación:
+
+- Una sola instancia de `FullScreenLoader` responde a todos los llamados de `show()`/`hide()`
+- Múltiples componentes pueden controlar el loader sin conflictos
+- El estado se mantiene consistente incluso con navegación
+
+### Z-Index y Posicionamiento
+
+- **z-index**: `z-100` para estar sobre todo el contenido
+- **Posicionamiento**: `fixed` con `inset-0` (cubre toda la ventana)
+- **Centrado**: Flexbox con `items-center` y `justify-center`
+
+### Estilos Visuales
+
+```css
+/* Overlay background */
+bg-black/50  /* Negro con 50% opacidad */
+
+/* Spinner */
+text-4xl      /* Tamaño grande del spinner */
+text-primary  /* Color primario del tema */
+```
+
+## Best Practices
+
+### ✅ DO: Usar `finally` para Garantizar Hide
+
+```tsx
+async function operation() {
+  FullScreenLoaderManager.show();
+  try {
+    await asyncOperation();
+  } finally {
+    // ✅ Siempre se ejecuta, incluso si hay error
+    FullScreenLoaderManager.hide();
+  }
+}
+```
+
+### ❌ DON'T: Olvidar Ocultar el Loader
+
+```tsx
+async function operation() {
+  FullScreenLoaderManager.show();
+  await asyncOperation();
+  // ❌ Si hay error, el loader queda visible
+  FullScreenLoaderManager.hide();
+}
+```
+
+### ✅ DO: Una Sola Instancia en la App
+
+```tsx
+// ✅ En App.tsx o layout principal
+function App() {
+  return (
+    <>
+      <YourApp />
+      <FullScreenLoader />
+    </>
+  );
+}
+```
+
+### ❌ DON'T: Múltiples Instancias
+
+```tsx
+// ❌ No crear múltiples instancias
+function PageA() {
+  return (
+    <>
+      <Content />
+      <FullScreenLoader /> {/* ❌ Redundante */}
+    </>
+  );
+}
+```
+
+### ✅ DO: Operaciones Críticas y Largas
+
+```tsx
+// ✅ Bueno para: autenticación, carga inicial, procesamiento pesado
+async function authenticate() {
+  FullScreenLoaderManager.show();
+  await login();
+  FullScreenLoaderManager.hide();
+}
+```
+
+### ❌ DON'T: Operaciones Rápidas o Menores
+
+```tsx
+// ❌ No usar para operaciones menores de 500ms
+async function quickAction() {
+  FullScreenLoaderManager.show(); // ❌ Muy intrusivo
+  await quickApi(); // < 500ms
+  FullScreenLoaderManager.hide();
+}
+
+// ✅ Mejor usar un spinner local o skeleton
+```
+
+## Casos de Uso
+
+### ✅ Recomendado Para:
+
+- **Autenticación y Login**: Procesos de inicio de sesión
+- **Carga Inicial**: Primera carga de datos de la aplicación
+- **Navegación Crítica**: Cambios de página con carga pesada
+- **Procesamiento Pesado**: Cálculos complejos o batch operations
+- **Uploads Grandes**: Subida de archivos que bloquean la UI
+- **Transacciones Críticas**: Operaciones que no deben interrumpirse
+
+### ❌ No Recomendado Para:
+
+- **Operaciones Rápidas** (< 500ms): Usar spinner local
+- **Búsquedas en Tiempo Real**: Usar loading states inline
+- **Validaciones de Formulario**: Usar feedback local
+- **Acciones Menores**: Usar botones con loading state
+- **Scroll Infinito**: Usar skeleton loaders
+
+## Accesibilidad
+
+El componente incluye consideraciones básicas de accesibilidad:
+
+- **Portal rendering**: Asegura que el loader esté en el nivel superior del DOM
+- **Fixed positioning**: Garantiza visibilidad sobre todo el contenido
+- **Visual feedback**: Spinner animado claramente visible
+
+### Mejoras Sugeridas
+
+Para aplicaciones con requisitos estrictos de accesibilidad, considera agregar:
+
+```tsx
+<div role="dialog" aria-modal="true" aria-label="Loading" aria-busy="true">
+  <Spinner />
+</div>
+```
+
+## Troubleshooting
+
+### El loader no aparece
+
+**Causa**: Falta el componente `<FullScreenLoader />` en la aplicación.
+
+**Solución**: Agregar en el nivel más alto de tu app (App.tsx, layout, etc.).
+
+### El loader queda visible permanentemente
+
+**Causa**: No se llamó `hide()` después de una operación, probablemente debido a un error.
+
+**Solución**: Siempre usar bloque `try/finally` para garantizar que `hide()` se ejecute.
+
+```tsx
+try {
+  await operation();
+} finally {
+  FullScreenLoaderManager.hide(); // ✅ Siempre se ejecuta
+}
+```
+
+### El loader aparece detrás de otros elementos
+
+**Causa**: Algún elemento tiene un `z-index` mayor que 100.
+
+**Solución**: El loader usa `z-100`. Verifica que ningún elemento tenga un z-index mayor. Si es necesario, ajusta el z-index del loader.
+
+### Múltiples loaders aparecen simultáneamente
+
+**Causa**: Múltiples instancias de `<FullScreenLoader />` en la aplicación.
+
+**Solución**: Solo debe haber una instancia en toda la aplicación, en el nivel más alto.
+
+## Integración con Otros Componentes
+
+### Con React Query
+
+```tsx
+import { useMutation } from "@tanstack/react-query";
+import { FullScreenLoaderManager } from "@adamosuiteservices/ui/full-screen-loader";
+
+function MyComponent() {
+  const mutation = useMutation({
+    mutationFn: saveData,
+    onMutate: () => {
+      FullScreenLoaderManager.show();
+    },
+    onSettled: () => {
+      FullScreenLoaderManager.hide();
+    },
+  });
+
+  return <Button onClick={() => mutation.mutate()}>Save</Button>;
+}
+```
+
+### Con Redux/Zustand
+
+```tsx
+// En tu action/slice
+export const fetchData = createAsyncThunk("data/fetch", async () => {
+  FullScreenLoaderManager.show();
+  try {
+    const data = await api.getData();
+    return data;
+  } finally {
+    FullScreenLoaderManager.hide();
+  }
+});
+```
+
+### Con Form Submit
+
+```tsx
+import { useForm } from "react-hook-form";
+import { FullScreenLoaderManager } from "@adamosuiteservices/ui/full-screen-loader";
+
+function FormComponent() {
+  const { handleSubmit } = useForm();
+
+  const onSubmit = async (data) => {
+    FullScreenLoaderManager.show();
+    try {
+      await api.submitForm(data);
+    } finally {
+      FullScreenLoaderManager.hide();
+    }
+  };
+
+  return <form onSubmit={handleSubmit(onSubmit)}>...</form>;
+}
+```
+
+## Componentes Relacionados
+
+- **[Spinner](../../ui/spinner.md)**: Loading indicator usado internamente
+- **[Button](../../ui/button.md)**: Para triggers de operaciones con loading state
+- **[Toaster](./toaster.md)**: Para feedback después de operaciones (combinar con loader)
+
+## Ejemplo Completo
+
+```tsx
+import {
+  FullScreenLoader,
+  FullScreenLoaderManager,
+} from "@adamosuiteservices/ui/full-screen-loader";
+import { ToastManager } from "@adamosuiteservices/ui/toaster";
+import { Button } from "@adamosuiteservices/ui/button";
+
+function App() {
+  return (
+    <>
+      <Dashboard />
+      <FullScreenLoader />
+    </>
+  );
+}
+
+function Dashboard() {
+  const handleSync = async () => {
+    FullScreenLoaderManager.show();
+
+    try {
+      await syncData();
+      ToastManager.show({
+        message: "Data synchronized successfully",
+        variant: "success",
+      });
+    } catch (error) {
+      ToastManager.show({
+        message: "Failed to synchronize data",
+        variant: "destructive",
+      });
+    } finally {
+      FullScreenLoaderManager.hide();
+    }
+  };
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <Button onClick={handleSync}>Sync Data</Button>
+    </div>
+  );
+}
+```