@yarcl/react 0.1.0 → 0.2.0

package/dist/themes/index.d.ts

@@ -0,0 +1,1425 @@
+import { brutalist } from './brutalist';
+import { compact } from './compact';
+import { editorial } from './editorial';
+import { bloom } from './bloom';
+export type { ThemeContract } from './contract';
+export { brutalist, compact, editorial, bloom };
+/**
+ * Every bundled theme, keyed by id, including the library defaults as `yarcl`.
+ * All of them satisfy {@link ThemeContract}, so they're interchangeable.
+ *
+ * @example
+ * ```ts
+ * // src/yarcl.config.ts: use a theme as is
+ * export { editorial as default } from '@yarcl/react/themes';
+ * ```
+ *
+ * @example
+ * ```ts
+ * // or start from one and change what you need
+ * import { defineConfig } from '@yarcl/react/define';
+ * import { bloom } from '@yarcl/react/themes';
+ *
+ * export default defineConfig({
+ *   ...bloom,
+ *   colors: { ...bloom.colors, primary: { light: '#db2777', dark: '#f9a8d4' } },
+ * });
+ * ```
+ */
+export declare const themes: {
+    yarcl: {
+        readonly colors: {
+            readonly primary: {
+                readonly light: "#2d4bb8";
+                readonly dark: "#8aa2ff";
+            };
+            readonly neutral: {
+                readonly light: "#4b5263";
+                readonly dark: "#a3a9b8";
+            };
+            readonly success: {
+                readonly light: "#15803d";
+                readonly dark: "#4ade80";
+            };
+            readonly warning: {
+                readonly light: "#b45309";
+                readonly dark: "#fbbf24";
+            };
+            readonly danger: {
+                readonly light: "#dc2626";
+                readonly dark: "#f87171";
+            };
+            readonly info: {
+                readonly light: "#0369a1";
+                readonly dark: "#38bdf8";
+            };
+        };
+        readonly neutrals: {
+            readonly bg: {
+                readonly light: "#f8f9fb";
+                readonly dark: "#0f1115";
+            };
+            readonly surface: {
+                readonly light: "#ffffff";
+                readonly dark: "#181b21";
+            };
+            readonly text: {
+                readonly light: "#101828";
+                readonly dark: "#e6e8ec";
+            };
+            readonly muted: {
+                readonly light: "#667085";
+                readonly dark: "#8b93a1";
+            };
+            readonly border: {
+                readonly light: "#d0d5dd";
+                readonly dark: "#2e333d";
+            };
+        };
+        readonly sizes: {
+            readonly xs: {
+                readonly height: "1.75rem";
+                readonly paddingX: "0.625rem";
+                readonly fontSize: "0.75rem";
+                readonly iconSize: "0.75rem";
+            };
+            readonly sm: {
+                readonly height: "2rem";
+                readonly paddingX: "0.75rem";
+                readonly fontSize: "0.8125rem";
+                readonly iconSize: "0.875rem";
+            };
+            readonly md: {
+                readonly height: "2.5rem";
+                readonly paddingX: "1rem";
+                readonly fontSize: "0.875rem";
+                readonly iconSize: "1rem";
+            };
+            readonly lg: {
+                readonly height: "3rem";
+                readonly paddingX: "1.25rem";
+                readonly fontSize: "1rem";
+                readonly iconSize: "1.25rem";
+            };
+            readonly xl: {
+                readonly height: "3.5rem";
+                readonly paddingX: "1.5rem";
+                readonly fontSize: "1.125rem";
+                readonly iconSize: "1.5rem";
+            };
+        };
+        readonly radii: {
+            readonly square: "0";
+            readonly sm: "0.25rem";
+            readonly md: "0.375rem";
+            readonly lg: "0.5rem";
+            readonly xl: "0.75rem";
+            readonly rounded: "9999px";
+        };
+        readonly variants: {
+            readonly solid: {
+                readonly background: "fill";
+                readonly border: "color";
+                readonly text: "on";
+            };
+            readonly soft: {
+                readonly background: "tint";
+                readonly border: "none";
+                readonly text: "color";
+            };
+            readonly outline: {
+                readonly background: "none";
+                readonly border: "color";
+                readonly text: "color";
+            };
+            readonly ghost: {
+                readonly background: "none";
+                readonly border: "none";
+                readonly text: "color";
+            };
+        };
+        readonly spacing: {
+            readonly xs: "0.25rem";
+            readonly sm: "0.5rem";
+            readonly md: "1rem";
+            readonly lg: "1.5rem";
+            readonly xl: "2rem";
+        };
+        readonly shadows: {
+            readonly sm: "0 1px 2px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5))";
+            readonly md: "0 4px 12px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.6))";
+            readonly lg: "0 12px 32px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.7))";
+        };
+        readonly density: {
+            readonly compact: {
+                readonly paddingX: "0.5rem";
+                readonly paddingY: "0.25rem";
+                readonly fontSize: "0.8125rem";
+            };
+            readonly comfortable: {
+                readonly paddingX: "0.75rem";
+                readonly paddingY: "0.625rem";
+                readonly fontSize: "0.875rem";
+            };
+        };
+        readonly modalSizes: {
+            readonly sm: "24rem";
+            readonly md: "32rem";
+            readonly lg: "48rem";
+            readonly xl: "64rem";
+            readonly full: "100vw";
+        };
+        readonly typography: {
+            readonly families: {
+                readonly sans: "system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
+                readonly mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
+            };
+            readonly styles: {
+                readonly display: {
+                    readonly family: "sans";
+                    readonly size: "2.25rem";
+                    readonly weight: 800;
+                    readonly lineHeight: 1.1;
+                    readonly letterSpacing: "-0.02em";
+                };
+                readonly heading: {
+                    readonly family: "sans";
+                    readonly size: "1.5rem";
+                    readonly weight: 700;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "-0.01em";
+                };
+                readonly subheading: {
+                    readonly family: "sans";
+                    readonly size: "1.125rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.35;
+                };
+                readonly body: {
+                    readonly family: "sans";
+                    readonly size: "1rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.5;
+                };
+                readonly caption: {
+                    readonly family: "sans";
+                    readonly size: "0.8125rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.4;
+                };
+                readonly code: {
+                    readonly family: "mono";
+                    readonly size: "0.875rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.5;
+                };
+                readonly label: {
+                    readonly family: "sans";
+                    readonly size: "0.875rem";
+                    readonly weight: 500;
+                    readonly lineHeight: 1.4;
+                };
+            };
+            readonly headings: {
+                readonly h1: "display";
+                readonly h2: "heading";
+                readonly h3: "subheading";
+                readonly h4: "subheading";
+                readonly h5: "label";
+                readonly h6: "label";
+            };
+        };
+        readonly zIndex: {
+            readonly dropdown: 1000;
+            readonly tooltip: 1100;
+            readonly dialog: 1200;
+            readonly toast: 1300;
+        };
+        readonly motion: {
+            readonly fast: "120ms";
+            readonly base: "200ms";
+            readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+        };
+        readonly timing: {
+            readonly tooltipDelay: 400;
+            readonly hoverOpenDelay: 300;
+            readonly hoverCloseDelay: 150;
+            readonly toastDuration: 5000;
+        };
+        readonly borders: {
+            readonly width: "1px";
+        };
+        readonly focusRing: {
+            readonly width: "2px";
+            readonly offset: "2px";
+            readonly color: "primary";
+        };
+        readonly defaults: {
+            readonly size: "md";
+            readonly radius: "md";
+            readonly color: "primary";
+            readonly variant: "solid";
+            readonly errorColor: "danger";
+            readonly textStyle: "body";
+            readonly labelStyle: "label";
+            readonly helperStyle: "caption";
+            readonly gap: "md";
+            readonly padding: "lg";
+            readonly floatingShadow: "md";
+            readonly density: "comfortable";
+            readonly softVariant: "soft";
+            readonly modalSize: "md";
+        };
+        readonly components: {
+            readonly Avatar: {
+                readonly radius: "rounded";
+            };
+            readonly EmptyState: {
+                readonly color: "neutral";
+                readonly gap: "sm";
+                readonly padding: "lg";
+                readonly textStyle: "body";
+            };
+            readonly Alert: {
+                readonly gap: "sm";
+                readonly padding: "md";
+                readonly textStyle: "label";
+            };
+            readonly Drawer: {
+                readonly size: "sm";
+            };
+            readonly Tooltip: {
+                readonly radius: "md";
+                readonly padding: "sm";
+                readonly textStyle: "caption";
+            };
+            readonly Toast: {
+                readonly radius: "lg";
+                readonly gap: "sm";
+                readonly padding: "md";
+                readonly textStyle: "label";
+            };
+        };
+    };
+    brutalist: {
+        readonly colors: {
+            readonly primary: {
+                readonly light: "#ff3d2e";
+                readonly dark: "#ff5a4d";
+            };
+            readonly neutral: {
+                readonly light: "#1a1a1a";
+                readonly dark: "#f5f5f5";
+            };
+            readonly success: {
+                readonly light: "#00b862";
+                readonly dark: "#3dfc9a";
+            };
+            readonly warning: {
+                readonly light: "#ff8a00";
+                readonly dark: "#ffb14a";
+            };
+            readonly danger: {
+                readonly light: "#c2005a";
+                readonly dark: "#ff5ca1";
+            };
+            readonly info: {
+                readonly light: "#2f6bff";
+                readonly dark: "#7aa2ff";
+            };
+        };
+        readonly neutrals: {
+            readonly bg: {
+                readonly light: "#fffdf2";
+                readonly dark: "#0f0f0f";
+            };
+            readonly surface: {
+                readonly light: "#ffffff";
+                readonly dark: "#1a1a1a";
+            };
+            readonly text: {
+                readonly light: "#000000";
+                readonly dark: "#ffffff";
+            };
+            readonly muted: {
+                readonly light: "#3d3d3d";
+                readonly dark: "#cfcfcf";
+            };
+            readonly border: {
+                readonly light: "#000000";
+                readonly dark: "#ffffff";
+            };
+        };
+        readonly sizes: {
+            readonly xs: {
+                readonly height: "1.75rem";
+                readonly paddingX: "0.625rem";
+                readonly fontSize: "0.75rem";
+                readonly iconSize: "0.75rem";
+            };
+            readonly sm: {
+                readonly height: "2rem";
+                readonly paddingX: "0.75rem";
+                readonly fontSize: "0.8125rem";
+                readonly iconSize: "0.875rem";
+            };
+            readonly md: {
+                readonly height: "2.5rem";
+                readonly paddingX: "1rem";
+                readonly fontSize: "0.875rem";
+                readonly iconSize: "1rem";
+            };
+            readonly lg: {
+                readonly height: "3rem";
+                readonly paddingX: "1.25rem";
+                readonly fontSize: "1rem";
+                readonly iconSize: "1.25rem";
+            };
+            readonly xl: {
+                readonly height: "3.5rem";
+                readonly paddingX: "1.5rem";
+                readonly fontSize: "1.125rem";
+                readonly iconSize: "1.5rem";
+            };
+        };
+        readonly radii: {
+            readonly square: "0";
+            readonly sm: "0";
+            readonly md: "0";
+            readonly lg: "0";
+            readonly xl: "0";
+            readonly rounded: "9999px";
+        };
+        readonly variants: {
+            readonly solid: {
+                readonly background: "fill";
+                readonly border: "neutral";
+                readonly text: "on";
+            };
+            readonly soft: {
+                readonly background: "tint";
+                readonly border: "neutral";
+                readonly text: "neutral";
+            };
+            readonly outline: {
+                readonly background: "none";
+                readonly border: "neutral";
+                readonly text: "neutral";
+            };
+            readonly ghost: {
+                readonly background: "none";
+                readonly border: "none";
+                readonly text: "neutral";
+            };
+        };
+        readonly shadows: {
+            readonly sm: "3px 3px 0 0 light-dark(#000000, #ffffff)";
+            readonly md: "5px 5px 0 0 light-dark(#000000, #ffffff)";
+            readonly lg: "8px 8px 0 0 light-dark(#000000, #ffffff)";
+        };
+        readonly borders: {
+            readonly width: "2px";
+        };
+        readonly typography: {
+            readonly families: {
+                readonly sans: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
+                readonly mono: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
+            };
+            readonly styles: {
+                readonly display: {
+                    readonly family: "sans";
+                    readonly size: "2.5rem";
+                    readonly weight: 800;
+                    readonly lineHeight: 1;
+                    readonly letterSpacing: "-0.04em";
+                };
+                readonly heading: {
+                    readonly family: "sans";
+                    readonly size: "1.5rem";
+                    readonly weight: 800;
+                    readonly lineHeight: 1.15;
+                    readonly letterSpacing: "-0.02em";
+                };
+                readonly subheading: {
+                    readonly family: "sans";
+                    readonly size: "1.125rem";
+                    readonly weight: 700;
+                    readonly lineHeight: 1.3;
+                };
+                readonly body: {
+                    readonly family: "sans";
+                    readonly size: "0.875rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.55;
+                };
+                readonly caption: {
+                    readonly family: "sans";
+                    readonly size: "0.75rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.45;
+                };
+                readonly code: {
+                    readonly family: "mono";
+                    readonly size: "0.8125rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.5;
+                };
+                readonly label: {
+                    readonly family: "sans";
+                    readonly size: "0.8125rem";
+                    readonly weight: 700;
+                    readonly lineHeight: 1.4;
+                    readonly letterSpacing: "0.04em";
+                };
+            };
+            readonly headings: {
+                readonly h1: "display";
+                readonly h2: "heading";
+                readonly h3: "heading";
+                readonly h4: "subheading";
+                readonly h5: "subheading";
+                readonly h6: "label";
+            };
+        };
+        readonly focusRing: {
+            readonly width: "3px";
+            readonly offset: "3px";
+            readonly color: "neutral";
+            readonly style: "dashed";
+        };
+        readonly defaults: {
+            readonly radius: "md";
+            readonly padding: "lg";
+            readonly floatingShadow: "md";
+            readonly size: "md";
+            readonly color: "primary";
+            readonly variant: "solid";
+            readonly errorColor: "danger";
+            readonly textStyle: "body";
+            readonly labelStyle: "label";
+            readonly helperStyle: "caption";
+            readonly gap: "md";
+            readonly density: "comfortable";
+            readonly softVariant: "soft";
+            readonly modalSize: "md";
+        };
+        readonly spacing: {
+            readonly xs: "0.25rem";
+            readonly sm: "0.5rem";
+            readonly md: "1rem";
+            readonly lg: "1.5rem";
+            readonly xl: "2rem";
+        };
+        readonly density: {
+            readonly compact: {
+                readonly paddingX: "0.5rem";
+                readonly paddingY: "0.25rem";
+                readonly fontSize: "0.8125rem";
+            };
+            readonly comfortable: {
+                readonly paddingX: "0.75rem";
+                readonly paddingY: "0.625rem";
+                readonly fontSize: "0.875rem";
+            };
+        };
+        readonly modalSizes: {
+            readonly sm: "24rem";
+            readonly md: "32rem";
+            readonly lg: "48rem";
+            readonly xl: "64rem";
+            readonly full: "100vw";
+        };
+        readonly zIndex: {
+            readonly dropdown: 1000;
+            readonly tooltip: 1100;
+            readonly dialog: 1200;
+            readonly toast: 1300;
+        };
+        readonly motion: {
+            readonly fast: "120ms";
+            readonly base: "200ms";
+            readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+        };
+        readonly timing: {
+            readonly tooltipDelay: 400;
+            readonly hoverOpenDelay: 300;
+            readonly hoverCloseDelay: 150;
+            readonly toastDuration: 5000;
+        };
+        readonly components: {
+            readonly Avatar: {
+                readonly radius: "rounded";
+            };
+            readonly EmptyState: {
+                readonly color: "neutral";
+                readonly gap: "sm";
+                readonly padding: "lg";
+                readonly textStyle: "body";
+            };
+            readonly Alert: {
+                readonly gap: "sm";
+                readonly padding: "md";
+                readonly textStyle: "label";
+            };
+            readonly Drawer: {
+                readonly size: "sm";
+            };
+            readonly Tooltip: {
+                readonly radius: "md";
+                readonly padding: "sm";
+                readonly textStyle: "caption";
+            };
+            readonly Toast: {
+                readonly radius: "lg";
+                readonly gap: "sm";
+                readonly padding: "md";
+                readonly textStyle: "label";
+            };
+        };
+    };
+    bloom: {
+        readonly colors: {
+            readonly primary: {
+                readonly light: "#7c3aed";
+                readonly dark: "#c4b5fd";
+            };
+            readonly neutral: {
+                readonly light: "#6b6485";
+                readonly dark: "#b5aecf";
+            };
+            readonly success: {
+                readonly light: "#0f8a5f";
+                readonly dark: "#5eead4";
+            };
+            readonly warning: {
+                readonly light: "#c2410c";
+                readonly dark: "#fdba74";
+            };
+            readonly danger: {
+                readonly light: "#e11d48";
+                readonly dark: "#fb7185";
+            };
+            readonly info: {
+                readonly light: "#0369a1";
+                readonly dark: "#7dd3fc";
+            };
+        };
+        readonly neutrals: {
+            readonly bg: {
+                readonly light: "#f7f4ff";
+                readonly dark: "#14111f";
+            };
+            readonly surface: {
+                readonly light: "#ffffff";
+                readonly dark: "#1f1a30";
+            };
+            readonly text: {
+                readonly light: "#2a2540";
+                readonly dark: "#efeafc";
+            };
+            readonly muted: {
+                readonly light: "#6b6485";
+                readonly dark: "#aaa3c4";
+            };
+            readonly border: {
+                readonly light: "#e6dff7";
+                readonly dark: "#342c4d";
+            };
+        };
+        readonly sizes: {
+            readonly xs: {
+                readonly height: "2rem";
+                readonly paddingX: "0.875rem";
+                readonly fontSize: "0.8125rem";
+                readonly iconSize: "0.875rem";
+            };
+            readonly sm: {
+                readonly height: "2.25rem";
+                readonly paddingX: "1rem";
+                readonly fontSize: "0.875rem";
+                readonly iconSize: "1rem";
+            };
+            readonly md: {
+                readonly height: "2.75rem";
+                readonly paddingX: "1.25rem";
+                readonly fontSize: "0.9375rem";
+                readonly iconSize: "1.125rem";
+            };
+            readonly lg: {
+                readonly height: "3.25rem";
+                readonly paddingX: "1.625rem";
+                readonly fontSize: "1.0625rem";
+                readonly iconSize: "1.25rem";
+            };
+            readonly xl: {
+                readonly height: "3.75rem";
+                readonly paddingX: "2rem";
+                readonly fontSize: "1.1875rem";
+                readonly iconSize: "1.5rem";
+            };
+        };
+        readonly radii: {
+            readonly square: "0";
+            readonly sm: "0.75rem";
+            readonly md: "1rem";
+            readonly lg: "1.5rem";
+            readonly xl: "2rem";
+            readonly rounded: "9999px";
+        };
+        readonly spacing: {
+            readonly xs: "0.375rem";
+            readonly sm: "0.75rem";
+            readonly md: "1.25rem";
+            readonly lg: "1.75rem";
+            readonly xl: "2.5rem";
+        };
+        readonly shadows: {
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
+        };
+        readonly density: {
+            readonly compact: {
+                readonly paddingX: "0.75rem";
+                readonly paddingY: "0.5rem";
+                readonly fontSize: "0.875rem";
+            };
+            readonly comfortable: {
+                readonly paddingX: "1.25rem";
+                readonly paddingY: "0.875rem";
+                readonly fontSize: "0.9375rem";
+            };
+        };
+        readonly typography: {
+            readonly families: {
+                readonly sans: "Nunito, \"SF Pro Rounded\", ui-rounded, \"Varela Round\", system-ui, sans-serif";
+                readonly mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
+            };
+            readonly styles: {
+                readonly display: {
+                    readonly family: "sans";
+                    readonly size: "2.5rem";
+                    readonly weight: 800;
+                    readonly lineHeight: 1.1;
+                    readonly letterSpacing: "-0.02em";
+                };
+                readonly heading: {
+                    readonly family: "sans";
+                    readonly size: "1.625rem";
+                    readonly weight: 800;
+                    readonly lineHeight: 1.2;
+                };
+                readonly subheading: {
+                    readonly family: "sans";
+                    readonly size: "1.1875rem";
+                    readonly weight: 700;
+                    readonly lineHeight: 1.35;
+                };
+                readonly body: {
+                    readonly family: "sans";
+                    readonly size: "1rem";
+                    readonly weight: 500;
+                    readonly lineHeight: 1.55;
+                };
+                readonly caption: {
+                    readonly family: "sans";
+                    readonly size: "0.8125rem";
+                    readonly weight: 500;
+                    readonly lineHeight: 1.45;
+                };
+                readonly code: {
+                    readonly family: "mono";
+                    readonly size: "0.875rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.5;
+                };
+                readonly label: {
+                    readonly family: "sans";
+                    readonly size: "0.9375rem";
+                    readonly weight: 700;
+                    readonly lineHeight: 1.4;
+                };
+            };
+            readonly headings: {
+                readonly h1: "display";
+                readonly h2: "heading";
+                readonly h3: "heading";
+                readonly h4: "subheading";
+                readonly h5: "subheading";
+                readonly h6: "label";
+            };
+        };
+        readonly focusRing: {
+            readonly width: "3px";
+            readonly offset: "3px";
+            readonly color: "primary";
+        };
+        readonly components: {
+            readonly Button: {
+                readonly radius: "rounded";
+            };
+            readonly IconButton: {
+                readonly radius: "rounded";
+            };
+            readonly ToggleGroup: {
+                readonly radius: "rounded";
+            };
+            readonly Badge: {
+                readonly radius: "rounded";
+            };
+            readonly Input: {
+                readonly radius: "rounded";
+            };
+            readonly Select: {
+                readonly radius: "rounded";
+            };
+            readonly Combobox: {
+                readonly radius: "rounded";
+            };
+            readonly Avatar: {
+                readonly radius: "rounded";
+            };
+            readonly EmptyState: {
+                readonly color: "neutral";
+                readonly gap: "sm";
+                readonly padding: "lg";
+                readonly textStyle: "body";
+            };
+            readonly Alert: {
+                readonly gap: "sm";
+                readonly padding: "md";
+                readonly textStyle: "label";
+            };
+            readonly Drawer: {
+                readonly size: "sm";
+            };
+            readonly Tooltip: {
+                readonly radius: "md";
+                readonly padding: "sm";
+                readonly textStyle: "caption";
+            };
+            readonly Toast: {
+                readonly radius: "lg";
+                readonly gap: "sm";
+                readonly padding: "md";
+                readonly textStyle: "label";
+            };
+        };
+        readonly defaults: {
+            readonly radius: "lg";
+            readonly padding: "lg";
+            readonly gap: "md";
+            readonly size: "md";
+            readonly color: "primary";
+            readonly variant: "solid";
+            readonly errorColor: "danger";
+            readonly textStyle: "body";
+            readonly labelStyle: "label";
+            readonly helperStyle: "caption";
+            readonly floatingShadow: "md";
+            readonly density: "comfortable";
+            readonly softVariant: "soft";
+            readonly modalSize: "md";
+        };
+        readonly variants: {
+            readonly solid: {
+                readonly background: "fill";
+                readonly border: "color";
+                readonly text: "on";
+            };
+            readonly soft: {
+                readonly background: "tint";
+                readonly border: "none";
+                readonly text: "color";
+            };
+            readonly outline: {
+                readonly background: "none";
+                readonly border: "color";
+                readonly text: "color";
+            };
+            readonly ghost: {
+                readonly background: "none";
+                readonly border: "none";
+                readonly text: "color";
+            };
+        };
+        readonly modalSizes: {
+            readonly sm: "24rem";
+            readonly md: "32rem";
+            readonly lg: "48rem";
+            readonly xl: "64rem";
+            readonly full: "100vw";
+        };
+        readonly zIndex: {
+            readonly dropdown: 1000;
+            readonly tooltip: 1100;
+            readonly dialog: 1200;
+            readonly toast: 1300;
+        };
+        readonly motion: {
+            readonly fast: "120ms";
+            readonly base: "200ms";
+            readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+        };
+        readonly timing: {
+            readonly tooltipDelay: 400;
+            readonly hoverOpenDelay: 300;
+            readonly hoverCloseDelay: 150;
+            readonly toastDuration: 5000;
+        };
+        readonly borders: {
+            readonly width: "1px";
+        };
+    };
+    compact: {
+        readonly colors: {
+            readonly primary: {
+                readonly light: "#0f766e";
+                readonly dark: "#2dd4bf";
+            };
+            readonly neutral: {
+                readonly light: "#52606d";
+                readonly dark: "#9aa5b1";
+            };
+            readonly success: {
+                readonly light: "#15803d";
+                readonly dark: "#4ade80";
+            };
+            readonly warning: {
+                readonly light: "#a16207";
+                readonly dark: "#facc15";
+            };
+            readonly danger: {
+                readonly light: "#b91c1c";
+                readonly dark: "#f87171";
+            };
+            readonly info: {
+                readonly light: "#1d4ed8";
+                readonly dark: "#60a5fa";
+            };
+        };
+        readonly neutrals: {
+            readonly bg: {
+                readonly light: "#eef1f4";
+                readonly dark: "#0b0f14";
+            };
+            readonly surface: {
+                readonly light: "#ffffff";
+                readonly dark: "#141a21";
+            };
+            readonly text: {
+                readonly light: "#1f2933";
+                readonly dark: "#e4e7eb";
+            };
+            readonly muted: {
+                readonly light: "#52606d";
+                readonly dark: "#9aa5b1";
+            };
+            readonly border: {
+                readonly light: "#cbd2d9";
+                readonly dark: "#2a333d";
+            };
+        };
+        readonly sizes: {
+            readonly xs: {
+                readonly height: "1.25rem";
+                readonly paddingX: "0.375rem";
+                readonly fontSize: "0.6875rem";
+                readonly iconSize: "0.75rem";
+            };
+            readonly sm: {
+                readonly height: "1.5rem";
+                readonly paddingX: "0.5rem";
+                readonly fontSize: "0.75rem";
+                readonly iconSize: "0.75rem";
+            };
+            readonly md: {
+                readonly height: "1.75rem";
+                readonly paddingX: "0.625rem";
+                readonly fontSize: "0.8125rem";
+                readonly iconSize: "0.875rem";
+            };
+            readonly lg: {
+                readonly height: "2.25rem";
+                readonly paddingX: "0.875rem";
+                readonly fontSize: "0.875rem";
+                readonly iconSize: "1rem";
+            };
+            readonly xl: {
+                readonly height: "2.75rem";
+                readonly paddingX: "1rem";
+                readonly fontSize: "1rem";
+                readonly iconSize: "1.125rem";
+            };
+        };
+        readonly radii: {
+            readonly square: "0";
+            readonly sm: "2px";
+            readonly md: "3px";
+            readonly lg: "4px";
+            readonly xl: "6px";
+            readonly rounded: "9999px";
+        };
+        readonly variants: {
+            readonly outline: {
+                readonly background: "none";
+                readonly border: "neutral";
+                readonly text: "neutral";
+            };
+            readonly solid: {
+                readonly background: "fill";
+                readonly border: "color";
+                readonly text: "on";
+            };
+            readonly soft: {
+                readonly background: "tint";
+                readonly border: "none";
+                readonly text: "color";
+            };
+            readonly ghost: {
+                readonly background: "none";
+                readonly border: "none";
+                readonly text: "color";
+            };
+        };
+        readonly spacing: {
+            readonly xs: "0.125rem";
+            readonly sm: "0.25rem";
+            readonly md: "0.5rem";
+            readonly lg: "0.75rem";
+            readonly xl: "1rem";
+        };
+        readonly shadows: {
+            readonly sm: "0 1px 0 light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.4))";
+            readonly md: "0 2px 8px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.55))";
+            readonly lg: "0 8px 24px light-dark(rgb(15 23 42 / 0.18), rgb(0 0 0 / 0.6))";
+        };
+        readonly density: {
+            readonly compact: {
+                readonly paddingX: "0.5rem";
+                readonly paddingY: "0.25rem";
+                readonly fontSize: "0.75rem";
+            };
+            readonly comfortable: {
+                readonly paddingX: "0.625rem";
+                readonly paddingY: "0.375rem";
+                readonly fontSize: "0.8125rem";
+            };
+        };
+        readonly typography: {
+            readonly families: {
+                readonly sans: "\"IBM Plex Sans\", \"Segoe UI\", system-ui, -apple-system, sans-serif";
+                readonly mono: "\"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace";
+            };
+            readonly styles: {
+                readonly display: {
+                    readonly family: "sans";
+                    readonly size: "1.5rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.25;
+                };
+                readonly heading: {
+                    readonly family: "sans";
+                    readonly size: "1.125rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.3;
+                };
+                readonly subheading: {
+                    readonly family: "sans";
+                    readonly size: "0.9375rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.35;
+                };
+                readonly body: {
+                    readonly family: "sans";
+                    readonly size: "0.8125rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.45;
+                };
+                readonly caption: {
+                    readonly family: "sans";
+                    readonly size: "0.75rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.4;
+                };
+                readonly code: {
+                    readonly family: "mono";
+                    readonly size: "0.75rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.45;
+                };
+                readonly label: {
+                    readonly family: "sans";
+                    readonly size: "0.75rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.35;
+                    readonly letterSpacing: "0.02em";
+                };
+            };
+            readonly headings: {
+                readonly h1: "display";
+                readonly h2: "heading";
+                readonly h3: "heading";
+                readonly h4: "subheading";
+                readonly h5: "subheading";
+                readonly h6: "label";
+            };
+        };
+        readonly focusRing: {
+            readonly width: "2px";
+            readonly offset: "1px";
+            readonly color: "info";
+        };
+        readonly defaults: {
+            readonly radius: "sm";
+            readonly padding: "lg";
+            readonly gap: "md";
+            readonly density: "compact";
+            readonly size: "md";
+            readonly color: "primary";
+            readonly variant: "solid";
+            readonly errorColor: "danger";
+            readonly textStyle: "body";
+            readonly labelStyle: "label";
+            readonly helperStyle: "caption";
+            readonly floatingShadow: "md";
+            readonly softVariant: "soft";
+            readonly modalSize: "md";
+        };
+        readonly modalSizes: {
+            readonly sm: "24rem";
+            readonly md: "32rem";
+            readonly lg: "48rem";
+            readonly xl: "64rem";
+            readonly full: "100vw";
+        };
+        readonly zIndex: {
+            readonly dropdown: 1000;
+            readonly tooltip: 1100;
+            readonly dialog: 1200;
+            readonly toast: 1300;
+        };
+        readonly motion: {
+            readonly fast: "120ms";
+            readonly base: "200ms";
+            readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+        };
+        readonly timing: {
+            readonly tooltipDelay: 400;
+            readonly hoverOpenDelay: 300;
+            readonly hoverCloseDelay: 150;
+            readonly toastDuration: 5000;
+        };
+        readonly borders: {
+            readonly width: "1px";
+        };
+        readonly components: {
+            readonly Avatar: {
+                readonly radius: "rounded";
+            };
+            readonly EmptyState: {
+                readonly color: "neutral";
+                readonly gap: "sm";
+                readonly padding: "lg";
+                readonly textStyle: "body";
+            };
+            readonly Alert: {
+                readonly gap: "sm";
+                readonly padding: "md";
+                readonly textStyle: "label";
+            };
+            readonly Drawer: {
+                readonly size: "sm";
+            };
+            readonly Tooltip: {
+                readonly radius: "md";
+                readonly padding: "sm";
+                readonly textStyle: "caption";
+            };
+            readonly Toast: {
+                readonly radius: "lg";
+                readonly gap: "sm";
+                readonly padding: "md";
+                readonly textStyle: "label";
+            };
+        };
+    };
+    editorial: {
+        readonly colors: {
+            readonly primary: {
+                readonly light: "#9a3412";
+                readonly dark: "#fb923c";
+            };
+            readonly neutral: {
+                readonly light: "#57534e";
+                readonly dark: "#a8a29e";
+            };
+            readonly success: {
+                readonly light: "#3f6212";
+                readonly dark: "#a3e635";
+            };
+            readonly warning: {
+                readonly light: "#a16207";
+                readonly dark: "#fcd34d";
+            };
+            readonly danger: {
+                readonly light: "#9f1239";
+                readonly dark: "#fda4af";
+            };
+            readonly info: {
+                readonly light: "#1e3a8a";
+                readonly dark: "#93c5fd";
+            };
+        };
+        readonly neutrals: {
+            readonly bg: {
+                readonly light: "#f6f1e7";
+                readonly dark: "#1c1917";
+            };
+            readonly surface: {
+                readonly light: "#fffdf8";
+                readonly dark: "#262220";
+            };
+            readonly text: {
+                readonly light: "#1c1917";
+                readonly dark: "#f5efe3";
+            };
+            readonly muted: {
+                readonly light: "#57534e";
+                readonly dark: "#aaa39b";
+            };
+            readonly border: {
+                readonly light: "#d6cdbd";
+                readonly dark: "#48413b";
+            };
+        };
+        readonly sizes: {
+            readonly xs: {
+                readonly height: "1.75rem";
+                readonly paddingX: "0.75rem";
+                readonly fontSize: "0.8125rem";
+                readonly iconSize: "0.75rem";
+            };
+            readonly sm: {
+                readonly height: "2rem";
+                readonly paddingX: "0.875rem";
+                readonly fontSize: "0.875rem";
+                readonly iconSize: "0.875rem";
+            };
+            readonly md: {
+                readonly height: "2.625rem";
+                readonly paddingX: "1.375rem";
+                readonly fontSize: "1rem";
+                readonly iconSize: "1rem";
+            };
+            readonly lg: {
+                readonly height: "3.25rem";
+                readonly paddingX: "1.75rem";
+                readonly fontSize: "1.0625rem";
+                readonly iconSize: "1.25rem";
+            };
+            readonly xl: {
+                readonly height: "3.875rem";
+                readonly paddingX: "2.125rem";
+                readonly fontSize: "1.1875rem";
+                readonly iconSize: "1.375rem";
+            };
+        };
+        readonly radii: {
+            readonly square: "0";
+            readonly sm: "1px";
+            readonly md: "2px";
+            readonly lg: "3px";
+            readonly xl: "4px";
+            readonly rounded: "9999px";
+        };
+        readonly spacing: {
+            readonly xs: "0.375rem";
+            readonly sm: "0.75rem";
+            readonly md: "1.25rem";
+            readonly lg: "2rem";
+            readonly xl: "3rem";
+        };
+        readonly shadows: {
+            readonly sm: "none";
+            readonly md: "0 18px 40px -18px light-dark(rgb(68 44 20 / 0.35), rgb(0 0 0 / 0.75))";
+            readonly lg: "0 30px 60px -20px light-dark(rgb(68 44 20 / 0.4), rgb(0 0 0 / 0.8))";
+        };
+        readonly typography: {
+            readonly families: {
+                readonly sans: "\"Helvetica Neue\", Helvetica, \"Inter\", \"Segoe UI\", Arial, sans-serif";
+                readonly mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
+            };
+            readonly styles: {
+                readonly display: {
+                    readonly family: "sans";
+                    readonly size: "2.75rem";
+                    readonly weight: 300;
+                    readonly lineHeight: 1.05;
+                    readonly letterSpacing: "-0.03em";
+                };
+                readonly heading: {
+                    readonly family: "sans";
+                    readonly size: "1.75rem";
+                    readonly weight: 300;
+                    readonly lineHeight: 1.2;
+                    readonly letterSpacing: "-0.015em";
+                };
+                readonly subheading: {
+                    readonly family: "sans";
+                    readonly size: "1.25rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.3;
+                };
+                readonly body: {
+                    readonly family: "sans";
+                    readonly size: "1rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.6;
+                };
+                readonly caption: {
+                    readonly family: "sans";
+                    readonly size: "0.875rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.5;
+                };
+                readonly code: {
+                    readonly family: "mono";
+                    readonly size: "0.875rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.5;
+                };
+                readonly label: {
+                    readonly family: "sans";
+                    readonly size: "0.8125rem";
+                    readonly weight: 700;
+                    readonly lineHeight: 1.4;
+                    readonly letterSpacing: "0.08em";
+                };
+            };
+            readonly headings: {
+                readonly h1: "display";
+                readonly h2: "heading";
+                readonly h3: "heading";
+                readonly h4: "subheading";
+                readonly h5: "subheading";
+                readonly h6: "label";
+            };
+        };
+        readonly focusRing: {
+            readonly width: "3px";
+            readonly offset: "3px";
+            readonly color: "primary";
+            readonly style: "double";
+        };
+        readonly defaults: {
+            readonly radius: "square";
+            readonly padding: "lg";
+            readonly gap: "md";
+            readonly floatingShadow: "md";
+            readonly size: "md";
+            readonly color: "primary";
+            readonly variant: "solid";
+            readonly errorColor: "danger";
+            readonly textStyle: "body";
+            readonly labelStyle: "label";
+            readonly helperStyle: "caption";
+            readonly density: "comfortable";
+            readonly softVariant: "soft";
+            readonly modalSize: "md";
+        };
+        readonly variants: {
+            readonly solid: {
+                readonly background: "fill";
+                readonly border: "color";
+                readonly text: "on";
+            };
+            readonly soft: {
+                readonly background: "tint";
+                readonly border: "none";
+                readonly text: "color";
+            };
+            readonly outline: {
+                readonly background: "none";
+                readonly border: "color";
+                readonly text: "color";
+            };
+            readonly ghost: {
+                readonly background: "none";
+                readonly border: "none";
+                readonly text: "color";
+            };
+        };
+        readonly density: {
+            readonly compact: {
+                readonly paddingX: "0.5rem";
+                readonly paddingY: "0.25rem";
+                readonly fontSize: "0.8125rem";
+            };
+            readonly comfortable: {
+                readonly paddingX: "0.75rem";
+                readonly paddingY: "0.625rem";
+                readonly fontSize: "0.875rem";
+            };
+        };
+        readonly modalSizes: {
+            readonly sm: "24rem";
+            readonly md: "32rem";
+            readonly lg: "48rem";
+            readonly xl: "64rem";
+            readonly full: "100vw";
+        };
+        readonly zIndex: {
+            readonly dropdown: 1000;
+            readonly tooltip: 1100;
+            readonly dialog: 1200;
+            readonly toast: 1300;
+        };
+        readonly motion: {
+            readonly fast: "120ms";
+            readonly base: "200ms";
+            readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+        };
+        readonly timing: {
+            readonly tooltipDelay: 400;
+            readonly hoverOpenDelay: 300;
+            readonly hoverCloseDelay: 150;
+            readonly toastDuration: 5000;
+        };
+        readonly borders: {
+            readonly width: "1px";
+        };
+        readonly components: {
+            readonly Avatar: {
+                readonly radius: "rounded";
+            };
+            readonly EmptyState: {
+                readonly color: "neutral";
+                readonly gap: "sm";
+                readonly padding: "lg";
+                readonly textStyle: "body";
+            };
+            readonly Alert: {
+                readonly gap: "sm";
+                readonly padding: "md";
+                readonly textStyle: "label";
+            };
+            readonly Drawer: {
+                readonly size: "sm";
+            };
+            readonly Tooltip: {
+                readonly radius: "md";
+                readonly padding: "sm";
+                readonly textStyle: "caption";
+            };
+            readonly Toast: {
+                readonly radius: "lg";
+                readonly gap: "sm";
+                readonly padding: "md";
+                readonly textStyle: "label";
+            };
+        };
+    };
+};
+/** Display names of the bundled themes. */
+export declare const themeNames: Record<keyof typeof themes, string>;