@nationaldesignstudio/react 0.5.1 → 0.5.2

package/dist/lib/theme.d.ts

@@ -1,330 +0,0 @@
-/**
- * Component-level theming interface
- *
- * This interface defines all the customizable design tokens that can be
- * overridden at the component level. Components accepting a `theme` prop
- * will apply these values as CSS custom properties, allowing fine-grained
- * control over appearance without creating new variants.
- *
- * All values use primitive token names (e.g., "gray-100", "spacing-40")
- * which are converted to CSS variable references internally.
- */
-/**
- * Color token names - maps to `--color-{name}` CSS variables
- * @example "gray-100", "ember-v300", "alpha-black-10"
- */
-export type ColorToken = "gray-50" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900" | "gray-1000" | "gray-1100" | "gray-1200" | "steel-50" | "steel-100" | "steel-200" | "steel-300" | "steel-400" | "steel-500" | "steel-600" | "steel-700" | "steel-800" | "steel-900" | "steel-1000" | "steel-1100" | "steel-1200" | "brown-50" | "brown-100" | "brown-200" | "brown-300" | "brown-400" | "brown-500" | "brown-600" | "brown-700" | "brown-800" | "brown-900" | "brown-1000" | "brown-1100" | "brown-1200" | "ember-50" | "ember-100" | "ember-200" | "ember-300" | "ember-400" | "ember-500" | "ember-600" | "ember-700" | "ember-800" | "ember-900" | "ember-v100" | "ember-v200" | "ember-v300" | "ember-v400" | "orange-50" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "orange-900" | "orange-v100" | "orange-v200" | "orange-v300" | "orange-v400" | "amber-50" | "amber-100" | "amber-200" | "amber-300" | "amber-400" | "amber-500" | "amber-600" | "amber-700" | "amber-800" | "amber-900" | "amber-v100" | "amber-v200" | "amber-v300" | "amber-v400" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "yellow-v100" | "yellow-v200" | "yellow-v300" | "yellow-v400" | "lime-50" | "lime-100" | "lime-200" | "lime-300" | "lime-400" | "lime-500" | "lime-600" | "lime-700" | "lime-800" | "lime-900" | "lime-v100" | "lime-v200" | "lime-v300" | "lime-v400" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "green-v100" | "green-v200" | "green-v300" | "green-v400" | "sage-50" | "sage-100" | "sage-200" | "sage-300" | "sage-400" | "sage-500" | "sage-600" | "sage-700" | "sage-800" | "sage-900" | "sage-v100" | "sage-v200" | "sage-v300" | "sage-v400" | "teal-50" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "teal-600" | "teal-700" | "teal-800" | "teal-900" | "teal-v100" | "teal-v200" | "teal-v300" | "teal-v400" | "cyan-50" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "cyan-900" | "cyan-v100" | "cyan-v200" | "cyan-v300" | "cyan-v400" | "ice-50" | "ice-100" | "ice-200" | "ice-300" | "ice-400" | "ice-500" | "ice-600" | "ice-700" | "ice-800" | "ice-900" | "ice-v100" | "ice-v200" | "ice-v300" | "ice-v400" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "blue-v100" | "blue-v200" | "blue-v300" | "blue-v400" | "indigo-50" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "indigo-900" | "indigo-v100" | "indigo-v200" | "indigo-v300" | "indigo-v400" | "iris-50" | "iris-100" | "iris-200" | "iris-300" | "iris-400" | "iris-500" | "iris-600" | "iris-700" | "iris-800" | "iris-900" | "iris-v100" | "iris-v200" | "iris-v300" | "iris-v400" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "purple-v100" | "purple-v200" | "purple-v300" | "purple-v400" | "pink-50" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "pink-900" | "pink-v100" | "pink-v200" | "pink-v300" | "pink-v400" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "red-v100" | "red-v200" | "red-v300" | "red-v400" | "alpha-black-5" | "alpha-black-10" | "alpha-black-20" | "alpha-black-30" | "alpha-black-40" | "alpha-black-50" | "alpha-black-60" | "alpha-black-70" | "alpha-black-80" | "alpha-black-90" | "alpha-black-95" | "alpha-white-5" | "alpha-white-10" | "alpha-white-20" | "alpha-white-30" | "alpha-white-40" | "alpha-white-50" | "alpha-white-60" | "alpha-white-70" | "alpha-white-80" | "alpha-white-90" | "alpha-white-95" | "white" | "black";
-/**
- * Spacing token names - maps to `--spacing-{name}` CSS variables
- * @example "spacing-40", "spacing-72"
- */
-export type SpacingToken = "spacing-0" | "spacing-2" | "spacing-4" | "spacing-6" | "spacing-8" | "spacing-10" | "spacing-11" | "spacing-12" | "spacing-16" | "spacing-20" | "spacing-24" | "spacing-28" | "spacing-32" | "spacing-36" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-96" | "spacing-112" | "spacing-128" | "spacing-144" | "spacing-160" | "spacing-176" | "spacing-192" | "spacing-208" | "spacing-224" | "spacing-240" | "spacing-256" | "spacing-288" | "spacing-320" | "spacing-352" | "spacing-384" | "spacing-400";
-/**
- * Radius token names - maps to `--radii-{name}` CSS variables
- * @example "radii-4", "radii-6"
- */
-export type RadiusToken = "radii-0" | "radii-2" | "radii-4" | "radii-6" | "radii-8" | "radii-10" | "radii-11" | "radii-12" | "radii-16" | "radii-20" | "radii-24" | "radii-28" | "radii-32" | "radii-36" | "radii-40" | "radii-48" | "radii-56" | "radii-64" | "radii-72" | "radii-80" | "radii-96" | "radii-112" | "radii-128" | "radii-144" | "radii-160" | "radii-176" | "radii-192" | "radii-208" | "radii-224" | "radii-240" | "radii-256" | "radii-288" | "radii-320" | "radii-352" | "radii-384" | "radii-400";
-/**
- * Font size token values - primitive font sizes available in the design system
- * These correspond to Tailwind classes like `text-64`, `text-128`, etc.
- * @example 64, 128, 192
- */
-export type FontSizeToken = 9 | 11 | 12 | 14 | 16 | 18 | 21 | 24 | 28 | 32 | 36 | 42 | 48 | 56 | 64 | 72 | 84 | 88 | 96 | 112 | 128 | 148 | 168 | 192 | 224 | 256 | 280;
-/**
- * Array of all available font sizes for use in UI selectors/dropdowns
- */
-export declare const FONT_SIZES: FontSizeToken[];
-/**
- * Helper to generate typography class string from font size
- * @example fontSizeToClass(128) => "text-128 leading-128 tracking-128"
- */
-export declare function fontSizeToClass(size: FontSizeToken): string;
-/**
- * Helper to generate responsive typography class string
- * @example responsiveTypographyClass(64, 128, 192) => "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 xl:text-192 xl:leading-192 xl:tracking-192"
- */
-export declare function responsiveTypographyClass(mobile: FontSizeToken, tablet: FontSizeToken, desktop: FontSizeToken): string;
-export interface ComponentThemeColors {
-    /**
-     * Background color for sections
-     * @example "gray-100"
-     */
-    bgSection?: ColorToken;
-    /**
-     * Background color for cards
-     * @example "white"
-     */
-    cardBackground?: ColorToken;
-    /**
-     * Muted background color
-     * @example "gray-50"
-     */
-    bgMuted?: ColorToken;
-    /**
-     * Primary text color
-     * @example "gray-1100"
-     */
-    textPrimary?: ColorToken;
-    /**
-     * Secondary text color
-     * @example "gray-800"
-     */
-    textSecondary?: ColorToken;
-    /**
-     * Muted text color
-     * @example "gray-600"
-     */
-    textMuted?: ColorToken;
-    /**
-     * Inverted text color (for dark backgrounds)
-     * @example "gray-100"
-     */
-    textInverted?: ColorToken;
-    /**
-     * Link text color
-     * @example "gray-1100"
-     */
-    textLink?: ColorToken;
-    /**
-     * Link hover text color
-     * @example "gray-700"
-     */
-    textLinkHover?: ColorToken;
-    /**
-     * Brand accent color
-     * @example "ember-v300"
-     */
-    accentBrand?: ColorToken;
-    /**
-     * Soft brand accent color
-     * @example "ember-100"
-     */
-    accentBrandSoft?: ColorToken;
-    /**
-     * Subtle border color
-     * @example "alpha-black-10"
-     */
-    borderSubtle?: ColorToken;
-    /**
-     * Strong border color
-     * @example "alpha-black-20"
-     */
-    borderStrong?: ColorToken;
-    /**
-     * Focus border color (uses accentBrand by default)
-     * @example "ember-v300"
-     */
-    borderFocus?: ColorToken;
-    /**
-     * Divider border color
-     * @example "alpha-black-10"
-     */
-    borderDivider?: ColorToken;
-    /**
-     * Primary button background color
-     * @example "gray-1100"
-     */
-    buttonPrimaryBg?: ColorToken;
-    /**
-     * Primary button hover background color
-     * @example "gray-600"
-     */
-    buttonPrimaryBgHover?: ColorToken;
-    /**
-     * Secondary button background color
-     * @example "white"
-     */
-    buttonSecondaryBg?: ColorToken;
-    /**
-     * Secondary button hover background color
-     * @example "gray-100"
-     */
-    buttonSecondaryBgHover?: ColorToken;
-}
-export interface ComponentThemeSpatial {
-    /**
-     * Grid margin for large breakpoint
-     * @example "spacing-72"
-     */
-    gridLargeMargin?: SpacingToken;
-    /**
-     * Grid gutter for large breakpoint
-     * @example "spacing-24"
-     */
-    gridLargeGutter?: SpacingToken;
-    /**
-     * Number of grid columns for large breakpoint
-     */
-    gridLargeColumns?: number;
-    /**
-     * Grid margin for medium breakpoint
-     * @example "spacing-56"
-     */
-    gridMediumMargin?: SpacingToken;
-    /**
-     * Grid gutter for medium breakpoint
-     * @example "spacing-20"
-     */
-    gridMediumGutter?: SpacingToken;
-    /**
-     * Number of grid columns for medium breakpoint
-     */
-    gridMediumColumns?: number;
-    /**
-     * Grid margin for small breakpoint
-     * @example "spacing-24"
-     */
-    gridSmallMargin?: SpacingToken;
-    /**
-     * Grid gutter for small breakpoint
-     * @example "spacing-12"
-     */
-    gridSmallGutter?: SpacingToken;
-    /**
-     * Number of grid columns for small breakpoint
-     */
-    gridSmallColumns?: number;
-    /**
-     * Section gap for large breakpoint
-     * @example "spacing-64"
-     */
-    sectionLargeGap?: SpacingToken;
-    /**
-     * Section padding for large breakpoint
-     * @example "spacing-128"
-     */
-    sectionLargePadding?: SpacingToken;
-    /**
-     * Section gap for medium breakpoint
-     * @example "spacing-56"
-     */
-    sectionMediumGap?: SpacingToken;
-    /**
-     * Section padding for medium breakpoint
-     * @example "spacing-96"
-     */
-    sectionMediumPadding?: SpacingToken;
-    /**
-     * Section gap for small breakpoint
-     * @example "spacing-32"
-     */
-    sectionSmallGap?: SpacingToken;
-    /**
-     * Section padding for small breakpoint
-     * @example "spacing-64"
-     */
-    sectionSmallPadding?: SpacingToken;
-    /**
-     * Card gap for large size
-     * @example "spacing-10"
-     */
-    cardLargeGap?: SpacingToken;
-    /**
-     * Card padding for large size
-     * @example "spacing-24"
-     */
-    cardLargePadding?: SpacingToken;
-    /**
-     * Card gap for small size
-     * @example "spacing-12"
-     */
-    cardSmallGap?: SpacingToken;
-    /**
-     * Card padding for small size
-     * @example "spacing-16"
-     */
-    cardSmallPadding?: SpacingToken;
-}
-export interface ComponentThemeSurface {
-    /**
-     * Card border radius
-     * @example "radii-4"
-     */
-    cardRadius?: RadiusToken;
-    /**
-     * Card stroke/border width in pixels
-     * @example 1
-     */
-    cardStroke?: number;
-    /**
-     * Button border radius
-     * @example "radii-6"
-     */
-    buttonRadius?: RadiusToken;
-    /**
-     * Button stroke/border weight in pixels
-     * @example 1
-     */
-    buttonStrokeWeight?: number;
-}
-/**
- * Complete component theme interface combining colors, spatial, and surface tokens.
- *
- * @example
- * ```tsx
- * const customTheme: ComponentTheme = {
- *   colors: {
- *     textPrimary: "gray-100",
- *     accentBrand: "ember-500",
- *   },
- *   spatial: {
- *     sectionLargePadding: "spacing-96",
- *   },
- *   surface: {
- *     cardRadius: "radii-8",
- *   },
- * };
- *
- * <Tout theme={customTheme} ... />
- * ```
- */
-export interface ComponentTheme {
-    colors?: ComponentThemeColors;
-    spatial?: ComponentThemeSpatial;
-    surface?: ComponentThemeSurface;
-}
-/**
- * Button-specific theme interface for customizing individual button appearance.
- *
- * @example
- * ```tsx
- * const buttonTheme: ButtonTheme = {
- *   bg: "ember-500",
- *   bgHover: "ember-600",
- *   text: "white",
- *   radius: "radii-8",
- * };
- *
- * <Button theme={buttonTheme}>Themed Button</Button>
- * ```
- */
-export interface ButtonTheme {
-    /** Background color */
-    bg?: ColorToken;
-    /** Background color on hover */
-    bgHover?: ColorToken;
-    /** Background color on active/press */
-    bgActive?: ColorToken;
-    /** Text color */
-    text?: ColorToken;
-    /** Border color (if using border) */
-    borderColor?: ColorToken;
-    /** Border width in pixels (0 for no border) */
-    borderWidth?: number;
-    /** Border radius */
-    radius?: RadiusToken;
-}
-/**
- * Converts a ComponentTheme object to CSS custom properties (inline style object)
- *
- * @param theme - The theme object to convert
- * @returns An object suitable for use as React inline styles
- */
-export declare function themeToStyleVars(theme: ComponentTheme | undefined): React.CSSProperties;
-/**
- * Converts a ButtonTheme object to CSS custom properties (inline style object)
- *
- * @param theme - The button theme object to convert
- * @returns An object suitable for use as React inline styles
- */
-export declare function buttonThemeToStyleVars(theme: ButtonTheme | undefined): React.CSSProperties;

package/dist/lib/theme.js

@@ -1,100 +0,0 @@
-const o = [
-  9,
-  11,
-  12,
-  14,
-  16,
-  18,
-  21,
-  24,
-  28,
-  32,
-  36,
-  42,
-  48,
-  56,
-  64,
-  72,
-  84,
-  88,
-  96,
-  112,
-  128,
-  148,
-  168,
-  192,
-  224,
-  256,
-  280
-];
-function d(t) {
-  return `text-${t} leading-${t} tracking-${t}`;
-}
-function g(t, e, r) {
-  return [
-    d(t),
-    `md:${d(e).split(" ").join(" md:")}`,
-    `xl:${d(r).split(" ").join(" xl:")}`
-  ].join(" ");
-}
-function i(t) {
-  return `var(--color-${t})`;
-}
-function a(t) {
-  return `var(--${t})`;
-}
-function n(t) {
-  return `var(--${t})`;
-}
-function c(t) {
-  if (!t) return {};
-  const e = {};
-  if (t.colors) {
-    const { colors: r } = t;
-    r.bgSection && (e["--theme-bg-section"] = i(r.bgSection)), r.cardBackground && (e["--theme-card-background"] = i(r.cardBackground)), r.bgMuted && (e["--theme-bg-muted"] = i(r.bgMuted)), r.textPrimary && (e["--theme-text-primary"] = i(r.textPrimary)), r.textSecondary && (e["--theme-text-secondary"] = i(r.textSecondary)), r.textMuted && (e["--theme-text-muted"] = i(r.textMuted)), r.textInverted && (e["--theme-text-inverted"] = i(r.textInverted)), r.textLink && (e["--theme-text-link"] = i(r.textLink)), r.textLinkHover && (e["--theme-text-link-hover"] = i(r.textLinkHover)), r.accentBrand && (e["--theme-accent-brand"] = i(r.accentBrand)), r.accentBrandSoft && (e["--theme-accent-brand-soft"] = i(r.accentBrandSoft)), r.borderSubtle && (e["--theme-border-subtle"] = i(r.borderSubtle)), r.borderStrong && (e["--theme-border-strong"] = i(r.borderStrong)), r.borderFocus && (e["--theme-border-focus"] = i(r.borderFocus)), r.borderDivider && (e["--theme-border-divider"] = i(r.borderDivider)), r.buttonPrimaryBg && (e["--theme-button-primary-bg"] = i(r.buttonPrimaryBg)), r.buttonPrimaryBgHover && (e["--theme-button-primary-bg-hover"] = i(
-      r.buttonPrimaryBgHover
-    )), r.buttonSecondaryBg && (e["--theme-button-secondary-bg"] = i(
-      r.buttonSecondaryBg
-    )), r.buttonSecondaryBgHover && (e["--theme-button-secondary-bg-hover"] = i(
-      r.buttonSecondaryBgHover
-    ));
-  }
-  if (t.spatial) {
-    const { spatial: r } = t;
-    r.gridLargeMargin && (e["--theme-grid-large-margin"] = a(r.gridLargeMargin)), r.gridLargeGutter && (e["--theme-grid-large-gutter"] = a(r.gridLargeGutter)), r.gridLargeColumns && (e["--theme-grid-large-columns"] = String(r.gridLargeColumns)), r.gridMediumMargin && (e["--theme-grid-medium-margin"] = a(
-      r.gridMediumMargin
-    )), r.gridMediumGutter && (e["--theme-grid-medium-gutter"] = a(
-      r.gridMediumGutter
-    )), r.gridMediumColumns && (e["--theme-grid-medium-columns"] = String(r.gridMediumColumns)), r.gridSmallMargin && (e["--theme-grid-small-margin"] = a(r.gridSmallMargin)), r.gridSmallGutter && (e["--theme-grid-small-gutter"] = a(r.gridSmallGutter)), r.gridSmallColumns && (e["--theme-grid-small-columns"] = String(r.gridSmallColumns)), r.sectionLargeGap && (e["--theme-section-large-gap"] = a(r.sectionLargeGap)), r.sectionLargePadding && (e["--theme-section-large-padding"] = a(
-      r.sectionLargePadding
-    )), r.sectionMediumGap && (e["--theme-section-medium-gap"] = a(
-      r.sectionMediumGap
-    )), r.sectionMediumPadding && (e["--theme-section-medium-padding"] = a(
-      r.sectionMediumPadding
-    )), r.sectionSmallGap && (e["--theme-section-small-gap"] = a(r.sectionSmallGap)), r.sectionSmallPadding && (e["--theme-section-small-padding"] = a(
-      r.sectionSmallPadding
-    )), r.cardLargeGap && (e["--theme-card-large-gap"] = a(r.cardLargeGap)), r.cardLargePadding && (e["--theme-card-large-padding"] = a(
-      r.cardLargePadding
-    )), r.cardSmallGap && (e["--theme-card-small-gap"] = a(r.cardSmallGap)), r.cardSmallPadding && (e["--theme-card-small-padding"] = a(
-      r.cardSmallPadding
-    ));
-  }
-  if (t.surface) {
-    const { surface: r } = t;
-    r.cardRadius && (e["--theme-card-radius"] = n(r.cardRadius)), r.cardStroke && (e["--theme-card-stroke"] = `${r.cardStroke}px`), r.buttonRadius && (e["--theme-button-radius"] = n(r.buttonRadius)), r.buttonStrokeWeight && (e["--theme-button-stroke-weight"] = `${r.buttonStrokeWeight}px`);
-  }
-  return e;
-}
-function u(t) {
-  if (!t) return {};
-  const e = {};
-  return t.bg && (e["--btn-bg"] = i(t.bg)), t.bgHover && (e["--btn-bg-hover"] = i(t.bgHover)), t.bgActive && (e["--btn-bg-active"] = i(t.bgActive)), t.text && (e["--btn-text"] = i(t.text)), t.borderColor && (e["--btn-border-color"] = i(t.borderColor)), t.borderWidth !== void 0 && (e["--btn-border-width"] = `${t.borderWidth}px`), t.radius && (e["--btn-radius"] = n(t.radius)), e;
-}
-export {
-  o as FONT_SIZES,
-  u as buttonThemeToStyleVars,
-  d as fontSizeToClass,
-  g as responsiveTypographyClass,
-  c as themeToStyleVars
-};
-//# sourceMappingURL=theme.js.map

package/dist/lib/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.js","sources":["../../src/lib/theme.ts"],"sourcesContent":["/**\n * Component-level theming interface\n *\n * This interface defines all the customizable design tokens that can be\n * overridden at the component level. Components accepting a `theme` prop\n * will apply these values as CSS custom properties, allowing fine-grained\n * control over appearance without creating new variants.\n *\n * All values use primitive token names (e.g., \"gray-100\", \"spacing-40\")\n * which are converted to CSS variable references internally.\n */\n\n// =============================================================================\n// Token Name Types\n// =============================================================================\n\n/**\n * Color token names - maps to `--color-{name}` CSS variables\n * @example \"gray-100\", \"ember-v300\", \"alpha-black-10\"\n */\nexport type ColorToken =\n\t// Grayscale\n\t| \"gray-50\"\n\t| \"gray-100\"\n\t| \"gray-200\"\n\t| \"gray-300\"\n\t| \"gray-400\"\n\t| \"gray-500\"\n\t| \"gray-600\"\n\t| \"gray-700\"\n\t| \"gray-800\"\n\t| \"gray-900\"\n\t| \"gray-1000\"\n\t| \"gray-1100\"\n\t| \"gray-1200\"\n\t// Steel\n\t| \"steel-50\"\n\t| \"steel-100\"\n\t| \"steel-200\"\n\t| \"steel-300\"\n\t| \"steel-400\"\n\t| \"steel-500\"\n\t| \"steel-600\"\n\t| \"steel-700\"\n\t| \"steel-800\"\n\t| \"steel-900\"\n\t| \"steel-1000\"\n\t| \"steel-1100\"\n\t| \"steel-1200\"\n\t// Brown\n\t| \"brown-50\"\n\t| \"brown-100\"\n\t| \"brown-200\"\n\t| \"brown-300\"\n\t| \"brown-400\"\n\t| \"brown-500\"\n\t| \"brown-600\"\n\t| \"brown-700\"\n\t| \"brown-800\"\n\t| \"brown-900\"\n\t| \"brown-1000\"\n\t| \"brown-1100\"\n\t| \"brown-1200\"\n\t// Ember\n\t| \"ember-50\"\n\t| \"ember-100\"\n\t| \"ember-200\"\n\t| \"ember-300\"\n\t| \"ember-400\"\n\t| \"ember-500\"\n\t| \"ember-600\"\n\t| \"ember-700\"\n\t| \"ember-800\"\n\t| \"ember-900\"\n\t| \"ember-v100\"\n\t| \"ember-v200\"\n\t| \"ember-v300\"\n\t| \"ember-v400\"\n\t// Orange\n\t| \"orange-50\"\n\t| \"orange-100\"\n\t| \"orange-200\"\n\t| \"orange-300\"\n\t| \"orange-400\"\n\t| \"orange-500\"\n\t| \"orange-600\"\n\t| \"orange-700\"\n\t| \"orange-800\"\n\t| \"orange-900\"\n\t| \"orange-v100\"\n\t| \"orange-v200\"\n\t| \"orange-v300\"\n\t| \"orange-v400\"\n\t// Amber\n\t| \"amber-50\"\n\t| \"amber-100\"\n\t| \"amber-200\"\n\t| \"amber-300\"\n\t| \"amber-400\"\n\t| \"amber-500\"\n\t| \"amber-600\"\n\t| \"amber-700\"\n\t| \"amber-800\"\n\t| \"amber-900\"\n\t| \"amber-v100\"\n\t| \"amber-v200\"\n\t| \"amber-v300\"\n\t| \"amber-v400\"\n\t// Yellow\n\t| \"yellow-50\"\n\t| \"yellow-100\"\n\t| \"yellow-200\"\n\t| \"yellow-300\"\n\t| \"yellow-400\"\n\t| \"yellow-500\"\n\t| \"yellow-600\"\n\t| \"yellow-700\"\n\t| \"yellow-800\"\n\t| \"yellow-900\"\n\t| \"yellow-v100\"\n\t| \"yellow-v200\"\n\t| \"yellow-v300\"\n\t| \"yellow-v400\"\n\t// Lime\n\t| \"lime-50\"\n\t| \"lime-100\"\n\t| \"lime-200\"\n\t| \"lime-300\"\n\t| \"lime-400\"\n\t| \"lime-500\"\n\t| \"lime-600\"\n\t| \"lime-700\"\n\t| \"lime-800\"\n\t| \"lime-900\"\n\t| \"lime-v100\"\n\t| \"lime-v200\"\n\t| \"lime-v300\"\n\t| \"lime-v400\"\n\t// Green\n\t| \"green-50\"\n\t| \"green-100\"\n\t| \"green-200\"\n\t| \"green-300\"\n\t| \"green-400\"\n\t| \"green-500\"\n\t| \"green-600\"\n\t| \"green-700\"\n\t| \"green-800\"\n\t| \"green-900\"\n\t| \"green-v100\"\n\t| \"green-v200\"\n\t| \"green-v300\"\n\t| \"green-v400\"\n\t// Sage\n\t| \"sage-50\"\n\t| \"sage-100\"\n\t| \"sage-200\"\n\t| \"sage-300\"\n\t| \"sage-400\"\n\t| \"sage-500\"\n\t| \"sage-600\"\n\t| \"sage-700\"\n\t| \"sage-800\"\n\t| \"sage-900\"\n\t| \"sage-v100\"\n\t| \"sage-v200\"\n\t| \"sage-v300\"\n\t| \"sage-v400\"\n\t// Teal\n\t| \"teal-50\"\n\t| \"teal-100\"\n\t| \"teal-200\"\n\t| \"teal-300\"\n\t| \"teal-400\"\n\t| \"teal-500\"\n\t| \"teal-600\"\n\t| \"teal-700\"\n\t| \"teal-800\"\n\t| \"teal-900\"\n\t| \"teal-v100\"\n\t| \"teal-v200\"\n\t| \"teal-v300\"\n\t| \"teal-v400\"\n\t// Cyan\n\t| \"cyan-50\"\n\t| \"cyan-100\"\n\t| \"cyan-200\"\n\t| \"cyan-300\"\n\t| \"cyan-400\"\n\t| \"cyan-500\"\n\t| \"cyan-600\"\n\t| \"cyan-700\"\n\t| \"cyan-800\"\n\t| \"cyan-900\"\n\t| \"cyan-v100\"\n\t| \"cyan-v200\"\n\t| \"cyan-v300\"\n\t| \"cyan-v400\"\n\t// Ice\n\t| \"ice-50\"\n\t| \"ice-100\"\n\t| \"ice-200\"\n\t| \"ice-300\"\n\t| \"ice-400\"\n\t| \"ice-500\"\n\t| \"ice-600\"\n\t| \"ice-700\"\n\t| \"ice-800\"\n\t| \"ice-900\"\n\t| \"ice-v100\"\n\t| \"ice-v200\"\n\t| \"ice-v300\"\n\t| \"ice-v400\"\n\t// Blue\n\t| \"blue-50\"\n\t| \"blue-100\"\n\t| \"blue-200\"\n\t| \"blue-300\"\n\t| \"blue-400\"\n\t| \"blue-500\"\n\t| \"blue-600\"\n\t| \"blue-700\"\n\t| \"blue-800\"\n\t| \"blue-900\"\n\t| \"blue-v100\"\n\t| \"blue-v200\"\n\t| \"blue-v300\"\n\t| \"blue-v400\"\n\t// Indigo\n\t| \"indigo-50\"\n\t| \"indigo-100\"\n\t| \"indigo-200\"\n\t| \"indigo-300\"\n\t| \"indigo-400\"\n\t| \"indigo-500\"\n\t| \"indigo-600\"\n\t| \"indigo-700\"\n\t| \"indigo-800\"\n\t| \"indigo-900\"\n\t| \"indigo-v100\"\n\t| \"indigo-v200\"\n\t| \"indigo-v300\"\n\t| \"indigo-v400\"\n\t// Iris\n\t| \"iris-50\"\n\t| \"iris-100\"\n\t| \"iris-200\"\n\t| \"iris-300\"\n\t| \"iris-400\"\n\t| \"iris-500\"\n\t| \"iris-600\"\n\t| \"iris-700\"\n\t| \"iris-800\"\n\t| \"iris-900\"\n\t| \"iris-v100\"\n\t| \"iris-v200\"\n\t| \"iris-v300\"\n\t| \"iris-v400\"\n\t// Purple\n\t| \"purple-50\"\n\t| \"purple-100\"\n\t| \"purple-200\"\n\t| \"purple-300\"\n\t| \"purple-400\"\n\t| \"purple-500\"\n\t| \"purple-600\"\n\t| \"purple-700\"\n\t| \"purple-800\"\n\t| \"purple-900\"\n\t| \"purple-v100\"\n\t| \"purple-v200\"\n\t| \"purple-v300\"\n\t| \"purple-v400\"\n\t// Pink\n\t| \"pink-50\"\n\t| \"pink-100\"\n\t| \"pink-200\"\n\t| \"pink-300\"\n\t| \"pink-400\"\n\t| \"pink-500\"\n\t| \"pink-600\"\n\t| \"pink-700\"\n\t| \"pink-800\"\n\t| \"pink-900\"\n\t| \"pink-v100\"\n\t| \"pink-v200\"\n\t| \"pink-v300\"\n\t| \"pink-v400\"\n\t// Red\n\t| \"red-50\"\n\t| \"red-100\"\n\t| \"red-200\"\n\t| \"red-300\"\n\t| \"red-400\"\n\t| \"red-500\"\n\t| \"red-600\"\n\t| \"red-700\"\n\t| \"red-800\"\n\t| \"red-900\"\n\t| \"red-v100\"\n\t| \"red-v200\"\n\t| \"red-v300\"\n\t| \"red-v400\"\n\t// Alpha\n\t| \"alpha-black-5\"\n\t| \"alpha-black-10\"\n\t| \"alpha-black-20\"\n\t| \"alpha-black-30\"\n\t| \"alpha-black-40\"\n\t| \"alpha-black-50\"\n\t| \"alpha-black-60\"\n\t| \"alpha-black-70\"\n\t| \"alpha-black-80\"\n\t| \"alpha-black-90\"\n\t| \"alpha-black-95\"\n\t| \"alpha-white-5\"\n\t| \"alpha-white-10\"\n\t| \"alpha-white-20\"\n\t| \"alpha-white-30\"\n\t| \"alpha-white-40\"\n\t| \"alpha-white-50\"\n\t| \"alpha-white-60\"\n\t| \"alpha-white-70\"\n\t| \"alpha-white-80\"\n\t| \"alpha-white-90\"\n\t| \"alpha-white-95\"\n\t// Special\n\t| \"white\"\n\t| \"black\";\n\n/**\n * Spacing token names - maps to `--spacing-{name}` CSS variables\n * @example \"spacing-40\", \"spacing-72\"\n */\nexport type SpacingToken =\n\t| \"spacing-0\"\n\t| \"spacing-2\"\n\t| \"spacing-4\"\n\t| \"spacing-6\"\n\t| \"spacing-8\"\n\t| \"spacing-10\"\n\t| \"spacing-11\"\n\t| \"spacing-12\"\n\t| \"spacing-16\"\n\t| \"spacing-20\"\n\t| \"spacing-24\"\n\t| \"spacing-28\"\n\t| \"spacing-32\"\n\t| \"spacing-36\"\n\t| \"spacing-40\"\n\t| \"spacing-48\"\n\t| \"spacing-56\"\n\t| \"spacing-64\"\n\t| \"spacing-72\"\n\t| \"spacing-80\"\n\t| \"spacing-96\"\n\t| \"spacing-112\"\n\t| \"spacing-128\"\n\t| \"spacing-144\"\n\t| \"spacing-160\"\n\t| \"spacing-176\"\n\t| \"spacing-192\"\n\t| \"spacing-208\"\n\t| \"spacing-224\"\n\t| \"spacing-240\"\n\t| \"spacing-256\"\n\t| \"spacing-288\"\n\t| \"spacing-320\"\n\t| \"spacing-352\"\n\t| \"spacing-384\"\n\t| \"spacing-400\";\n\n/**\n * Radius token names - maps to `--radii-{name}` CSS variables\n * @example \"radii-4\", \"radii-6\"\n */\nexport type RadiusToken =\n\t| \"radii-0\"\n\t| \"radii-2\"\n\t| \"radii-4\"\n\t| \"radii-6\"\n\t| \"radii-8\"\n\t| \"radii-10\"\n\t| \"radii-11\"\n\t| \"radii-12\"\n\t| \"radii-16\"\n\t| \"radii-20\"\n\t| \"radii-24\"\n\t| \"radii-28\"\n\t| \"radii-32\"\n\t| \"radii-36\"\n\t| \"radii-40\"\n\t| \"radii-48\"\n\t| \"radii-56\"\n\t| \"radii-64\"\n\t| \"radii-72\"\n\t| \"radii-80\"\n\t| \"radii-96\"\n\t| \"radii-112\"\n\t| \"radii-128\"\n\t| \"radii-144\"\n\t| \"radii-160\"\n\t| \"radii-176\"\n\t| \"radii-192\"\n\t| \"radii-208\"\n\t| \"radii-224\"\n\t| \"radii-240\"\n\t| \"radii-256\"\n\t| \"radii-288\"\n\t| \"radii-320\"\n\t| \"radii-352\"\n\t| \"radii-384\"\n\t| \"radii-400\";\n\n/**\n * Font size token values - primitive font sizes available in the design system\n * These correspond to Tailwind classes like `text-64`, `text-128`, etc.\n * @example 64, 128, 192\n */\nexport type FontSizeToken =\n\t| 9\n\t| 11\n\t| 12\n\t| 14\n\t| 16\n\t| 18\n\t| 21\n\t| 24\n\t| 28\n\t| 32\n\t| 36\n\t| 42\n\t| 48\n\t| 56\n\t| 64\n\t| 72\n\t| 84\n\t| 88\n\t| 96\n\t| 112\n\t| 128\n\t| 148\n\t| 168\n\t| 192\n\t| 224\n\t| 256\n\t| 280;\n\n/**\n * Array of all available font sizes for use in UI selectors/dropdowns\n */\nexport const FONT_SIZES: FontSizeToken[] = [\n\t9, 11, 12, 14, 16, 18, 21, 24, 28, 32, 36, 42, 48, 56, 64, 72, 84, 88, 96,\n\t112, 128, 148, 168, 192, 224, 256, 280,\n];\n\n/**\n * Helper to generate typography class string from font size\n * @example fontSizeToClass(128) => \"text-128 leading-128 tracking-128\"\n */\nexport function fontSizeToClass(size: FontSizeToken): string {\n\treturn `text-${size} leading-${size} tracking-${size}`;\n}\n\n/**\n * Helper to generate responsive typography class string\n * @example responsiveTypographyClass(64, 128, 192) => \"text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 xl:text-192 xl:leading-192 xl:tracking-192\"\n */\nexport function responsiveTypographyClass(\n\tmobile: FontSizeToken,\n\ttablet: FontSizeToken,\n\tdesktop: FontSizeToken,\n): string {\n\treturn [\n\t\tfontSizeToClass(mobile),\n\t\t`md:${fontSizeToClass(tablet).split(\" \").join(\" md:\")}`,\n\t\t`xl:${fontSizeToClass(desktop).split(\" \").join(\" xl:\")}`,\n\t].join(\" \");\n}\n\n// =============================================================================\n// Color Tokens\n// =============================================================================\n\nexport interface ComponentThemeColors {\n\t/**\n\t * Background color for sections\n\t * @example \"gray-100\"\n\t */\n\tbgSection?: ColorToken;\n\n\t/**\n\t * Background color for cards\n\t * @example \"white\"\n\t */\n\tcardBackground?: ColorToken;\n\n\t/**\n\t * Muted background color\n\t * @example \"gray-50\"\n\t */\n\tbgMuted?: ColorToken;\n\n\t/**\n\t * Primary text color\n\t * @example \"gray-1100\"\n\t */\n\ttextPrimary?: ColorToken;\n\n\t/**\n\t * Secondary text color\n\t * @example \"gray-800\"\n\t */\n\ttextSecondary?: ColorToken;\n\n\t/**\n\t * Muted text color\n\t * @example \"gray-600\"\n\t */\n\ttextMuted?: ColorToken;\n\n\t/**\n\t * Inverted text color (for dark backgrounds)\n\t * @example \"gray-100\"\n\t */\n\ttextInverted?: ColorToken;\n\n\t/**\n\t * Link text color\n\t * @example \"gray-1100\"\n\t */\n\ttextLink?: ColorToken;\n\n\t/**\n\t * Link hover text color\n\t * @example \"gray-700\"\n\t */\n\ttextLinkHover?: ColorToken;\n\n\t/**\n\t * Brand accent color\n\t * @example \"ember-v300\"\n\t */\n\taccentBrand?: ColorToken;\n\n\t/**\n\t * Soft brand accent color\n\t * @example \"ember-100\"\n\t */\n\taccentBrandSoft?: ColorToken;\n\n\t/**\n\t * Subtle border color\n\t * @example \"alpha-black-10\"\n\t */\n\tborderSubtle?: ColorToken;\n\n\t/**\n\t * Strong border color\n\t * @example \"alpha-black-20\"\n\t */\n\tborderStrong?: ColorToken;\n\n\t/**\n\t * Focus border color (uses accentBrand by default)\n\t * @example \"ember-v300\"\n\t */\n\tborderFocus?: ColorToken;\n\n\t/**\n\t * Divider border color\n\t * @example \"alpha-black-10\"\n\t */\n\tborderDivider?: ColorToken;\n\n\t/**\n\t * Primary button background color\n\t * @example \"gray-1100\"\n\t */\n\tbuttonPrimaryBg?: ColorToken;\n\n\t/**\n\t * Primary button hover background color\n\t * @example \"gray-600\"\n\t */\n\tbuttonPrimaryBgHover?: ColorToken;\n\n\t/**\n\t * Secondary button background color\n\t * @example \"white\"\n\t */\n\tbuttonSecondaryBg?: ColorToken;\n\n\t/**\n\t * Secondary button hover background color\n\t * @example \"gray-100\"\n\t */\n\tbuttonSecondaryBgHover?: ColorToken;\n}\n\n// =============================================================================\n// Spatial Tokens\n// =============================================================================\n\nexport interface ComponentThemeSpatial {\n\t/**\n\t * Grid margin for large breakpoint\n\t * @example \"spacing-72\"\n\t */\n\tgridLargeMargin?: SpacingToken;\n\n\t/**\n\t * Grid gutter for large breakpoint\n\t * @example \"spacing-24\"\n\t */\n\tgridLargeGutter?: SpacingToken;\n\n\t/**\n\t * Number of grid columns for large breakpoint\n\t */\n\tgridLargeColumns?: number;\n\n\t/**\n\t * Grid margin for medium breakpoint\n\t * @example \"spacing-56\"\n\t */\n\tgridMediumMargin?: SpacingToken;\n\n\t/**\n\t * Grid gutter for medium breakpoint\n\t * @example \"spacing-20\"\n\t */\n\tgridMediumGutter?: SpacingToken;\n\n\t/**\n\t * Number of grid columns for medium breakpoint\n\t */\n\tgridMediumColumns?: number;\n\n\t/**\n\t * Grid margin for small breakpoint\n\t * @example \"spacing-24\"\n\t */\n\tgridSmallMargin?: SpacingToken;\n\n\t/**\n\t * Grid gutter for small breakpoint\n\t * @example \"spacing-12\"\n\t */\n\tgridSmallGutter?: SpacingToken;\n\n\t/**\n\t * Number of grid columns for small breakpoint\n\t */\n\tgridSmallColumns?: number;\n\n\t/**\n\t * Section gap for large breakpoint\n\t * @example \"spacing-64\"\n\t */\n\tsectionLargeGap?: SpacingToken;\n\n\t/**\n\t * Section padding for large breakpoint\n\t * @example \"spacing-128\"\n\t */\n\tsectionLargePadding?: SpacingToken;\n\n\t/**\n\t * Section gap for medium breakpoint\n\t * @example \"spacing-56\"\n\t */\n\tsectionMediumGap?: SpacingToken;\n\n\t/**\n\t * Section padding for medium breakpoint\n\t * @example \"spacing-96\"\n\t */\n\tsectionMediumPadding?: SpacingToken;\n\n\t/**\n\t * Section gap for small breakpoint\n\t * @example \"spacing-32\"\n\t */\n\tsectionSmallGap?: SpacingToken;\n\n\t/**\n\t * Section padding for small breakpoint\n\t * @example \"spacing-64\"\n\t */\n\tsectionSmallPadding?: SpacingToken;\n\n\t/**\n\t * Card gap for large size\n\t * @example \"spacing-10\"\n\t */\n\tcardLargeGap?: SpacingToken;\n\n\t/**\n\t * Card padding for large size\n\t * @example \"spacing-24\"\n\t */\n\tcardLargePadding?: SpacingToken;\n\n\t/**\n\t * Card gap for small size\n\t * @example \"spacing-12\"\n\t */\n\tcardSmallGap?: SpacingToken;\n\n\t/**\n\t * Card padding for small size\n\t * @example \"spacing-16\"\n\t */\n\tcardSmallPadding?: SpacingToken;\n}\n\n// =============================================================================\n// Surface Tokens\n// =============================================================================\n\nexport interface ComponentThemeSurface {\n\t/**\n\t * Card border radius\n\t * @example \"radii-4\"\n\t */\n\tcardRadius?: RadiusToken;\n\n\t/**\n\t * Card stroke/border width in pixels\n\t * @example 1\n\t */\n\tcardStroke?: number;\n\n\t/**\n\t * Button border radius\n\t * @example \"radii-6\"\n\t */\n\tbuttonRadius?: RadiusToken;\n\n\t/**\n\t * Button stroke/border weight in pixels\n\t * @example 1\n\t */\n\tbuttonStrokeWeight?: number;\n}\n\n// =============================================================================\n// Combined Theme Interface\n// =============================================================================\n\n/**\n * Complete component theme interface combining colors, spatial, and surface tokens.\n *\n * @example\n * ```tsx\n * const customTheme: ComponentTheme = {\n *   colors: {\n *     textPrimary: \"gray-100\",\n *     accentBrand: \"ember-500\",\n *   },\n *   spatial: {\n *     sectionLargePadding: \"spacing-96\",\n *   },\n *   surface: {\n *     cardRadius: \"radii-8\",\n *   },\n * };\n *\n * <Tout theme={customTheme} ... />\n * ```\n */\nexport interface ComponentTheme {\n\tcolors?: ComponentThemeColors;\n\tspatial?: ComponentThemeSpatial;\n\tsurface?: ComponentThemeSurface;\n}\n\n// =============================================================================\n// Button Theme Interface\n// =============================================================================\n\n/**\n * Button-specific theme interface for customizing individual button appearance.\n *\n * @example\n * ```tsx\n * const buttonTheme: ButtonTheme = {\n *   bg: \"ember-500\",\n *   bgHover: \"ember-600\",\n *   text: \"white\",\n *   radius: \"radii-8\",\n * };\n *\n * <Button theme={buttonTheme}>Themed Button</Button>\n * ```\n */\nexport interface ButtonTheme {\n\t/** Background color */\n\tbg?: ColorToken;\n\t/** Background color on hover */\n\tbgHover?: ColorToken;\n\t/** Background color on active/press */\n\tbgActive?: ColorToken;\n\t/** Text color */\n\ttext?: ColorToken;\n\t/** Border color (if using border) */\n\tborderColor?: ColorToken;\n\t/** Border width in pixels (0 for no border) */\n\tborderWidth?: number;\n\t/** Border radius */\n\tradius?: RadiusToken;\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Converts a color token name to a CSS variable reference\n */\nfunction colorToVar(token: ColorToken): string {\n\treturn `var(--color-${token})`;\n}\n\n/**\n * Converts a spacing token name to a CSS variable reference\n */\nfunction spacingToVar(token: SpacingToken): string {\n\treturn `var(--${token})`;\n}\n\n/**\n * Converts a radius token name to a CSS variable reference\n */\nfunction radiusToVar(token: RadiusToken): string {\n\treturn `var(--${token})`;\n}\n\n/**\n * Converts a ComponentTheme object to CSS custom properties (inline style object)\n *\n * @param theme - The theme object to convert\n * @returns An object suitable for use as React inline styles\n */\nexport function themeToStyleVars(\n\ttheme: ComponentTheme | undefined,\n): React.CSSProperties {\n\tif (!theme) return {};\n\n\tconst vars: Record<string, string> = {};\n\n\t// Colors\n\tif (theme.colors) {\n\t\tconst { colors } = theme;\n\t\tif (colors.bgSection)\n\t\t\tvars[\"--theme-bg-section\"] = colorToVar(colors.bgSection);\n\t\tif (colors.cardBackground)\n\t\t\tvars[\"--theme-card-background\"] = colorToVar(colors.cardBackground);\n\t\tif (colors.bgMuted) vars[\"--theme-bg-muted\"] = colorToVar(colors.bgMuted);\n\t\tif (colors.textPrimary)\n\t\t\tvars[\"--theme-text-primary\"] = colorToVar(colors.textPrimary);\n\t\tif (colors.textSecondary)\n\t\t\tvars[\"--theme-text-secondary\"] = colorToVar(colors.textSecondary);\n\t\tif (colors.textMuted)\n\t\t\tvars[\"--theme-text-muted\"] = colorToVar(colors.textMuted);\n\t\tif (colors.textInverted)\n\t\t\tvars[\"--theme-text-inverted\"] = colorToVar(colors.textInverted);\n\t\tif (colors.textLink)\n\t\t\tvars[\"--theme-text-link\"] = colorToVar(colors.textLink);\n\t\tif (colors.textLinkHover)\n\t\t\tvars[\"--theme-text-link-hover\"] = colorToVar(colors.textLinkHover);\n\t\tif (colors.accentBrand)\n\t\t\tvars[\"--theme-accent-brand\"] = colorToVar(colors.accentBrand);\n\t\tif (colors.accentBrandSoft)\n\t\t\tvars[\"--theme-accent-brand-soft\"] = colorToVar(colors.accentBrandSoft);\n\t\tif (colors.borderSubtle)\n\t\t\tvars[\"--theme-border-subtle\"] = colorToVar(colors.borderSubtle);\n\t\tif (colors.borderStrong)\n\t\t\tvars[\"--theme-border-strong\"] = colorToVar(colors.borderStrong);\n\t\tif (colors.borderFocus)\n\t\t\tvars[\"--theme-border-focus\"] = colorToVar(colors.borderFocus);\n\t\tif (colors.borderDivider)\n\t\t\tvars[\"--theme-border-divider\"] = colorToVar(colors.borderDivider);\n\t\tif (colors.buttonPrimaryBg)\n\t\t\tvars[\"--theme-button-primary-bg\"] = colorToVar(colors.buttonPrimaryBg);\n\t\tif (colors.buttonPrimaryBgHover)\n\t\t\tvars[\"--theme-button-primary-bg-hover\"] = colorToVar(\n\t\t\t\tcolors.buttonPrimaryBgHover,\n\t\t\t);\n\t\tif (colors.buttonSecondaryBg)\n\t\t\tvars[\"--theme-button-secondary-bg\"] = colorToVar(\n\t\t\t\tcolors.buttonSecondaryBg,\n\t\t\t);\n\t\tif (colors.buttonSecondaryBgHover)\n\t\t\tvars[\"--theme-button-secondary-bg-hover\"] = colorToVar(\n\t\t\t\tcolors.buttonSecondaryBgHover,\n\t\t\t);\n\t}\n\n\t// Spatial\n\tif (theme.spatial) {\n\t\tconst { spatial } = theme;\n\t\tif (spatial.gridLargeMargin)\n\t\t\tvars[\"--theme-grid-large-margin\"] = spacingToVar(spatial.gridLargeMargin);\n\t\tif (spatial.gridLargeGutter)\n\t\t\tvars[\"--theme-grid-large-gutter\"] = spacingToVar(spatial.gridLargeGutter);\n\t\tif (spatial.gridLargeColumns)\n\t\t\tvars[\"--theme-grid-large-columns\"] = String(spatial.gridLargeColumns);\n\t\tif (spatial.gridMediumMargin)\n\t\t\tvars[\"--theme-grid-medium-margin\"] = spacingToVar(\n\t\t\t\tspatial.gridMediumMargin,\n\t\t\t);\n\t\tif (spatial.gridMediumGutter)\n\t\t\tvars[\"--theme-grid-medium-gutter\"] = spacingToVar(\n\t\t\t\tspatial.gridMediumGutter,\n\t\t\t);\n\t\tif (spatial.gridMediumColumns)\n\t\t\tvars[\"--theme-grid-medium-columns\"] = String(spatial.gridMediumColumns);\n\t\tif (spatial.gridSmallMargin)\n\t\t\tvars[\"--theme-grid-small-margin\"] = spacingToVar(spatial.gridSmallMargin);\n\t\tif (spatial.gridSmallGutter)\n\t\t\tvars[\"--theme-grid-small-gutter\"] = spacingToVar(spatial.gridSmallGutter);\n\t\tif (spatial.gridSmallColumns)\n\t\t\tvars[\"--theme-grid-small-columns\"] = String(spatial.gridSmallColumns);\n\t\tif (spatial.sectionLargeGap)\n\t\t\tvars[\"--theme-section-large-gap\"] = spacingToVar(spatial.sectionLargeGap);\n\t\tif (spatial.sectionLargePadding)\n\t\t\tvars[\"--theme-section-large-padding\"] = spacingToVar(\n\t\t\t\tspatial.sectionLargePadding,\n\t\t\t);\n\t\tif (spatial.sectionMediumGap)\n\t\t\tvars[\"--theme-section-medium-gap\"] = spacingToVar(\n\t\t\t\tspatial.sectionMediumGap,\n\t\t\t);\n\t\tif (spatial.sectionMediumPadding)\n\t\t\tvars[\"--theme-section-medium-padding\"] = spacingToVar(\n\t\t\t\tspatial.sectionMediumPadding,\n\t\t\t);\n\t\tif (spatial.sectionSmallGap)\n\t\t\tvars[\"--theme-section-small-gap\"] = spacingToVar(spatial.sectionSmallGap);\n\t\tif (spatial.sectionSmallPadding)\n\t\t\tvars[\"--theme-section-small-padding\"] = spacingToVar(\n\t\t\t\tspatial.sectionSmallPadding,\n\t\t\t);\n\t\tif (spatial.cardLargeGap)\n\t\t\tvars[\"--theme-card-large-gap\"] = spacingToVar(spatial.cardLargeGap);\n\t\tif (spatial.cardLargePadding)\n\t\t\tvars[\"--theme-card-large-padding\"] = spacingToVar(\n\t\t\t\tspatial.cardLargePadding,\n\t\t\t);\n\t\tif (spatial.cardSmallGap)\n\t\t\tvars[\"--theme-card-small-gap\"] = spacingToVar(spatial.cardSmallGap);\n\t\tif (spatial.cardSmallPadding)\n\t\t\tvars[\"--theme-card-small-padding\"] = spacingToVar(\n\t\t\t\tspatial.cardSmallPadding,\n\t\t\t);\n\t}\n\n\t// Surface\n\tif (theme.surface) {\n\t\tconst { surface } = theme;\n\t\tif (surface.cardRadius)\n\t\t\tvars[\"--theme-card-radius\"] = radiusToVar(surface.cardRadius);\n\t\tif (surface.cardStroke)\n\t\t\tvars[\"--theme-card-stroke\"] = `${surface.cardStroke}px`;\n\t\tif (surface.buttonRadius)\n\t\t\tvars[\"--theme-button-radius\"] = radiusToVar(surface.buttonRadius);\n\t\tif (surface.buttonStrokeWeight)\n\t\t\tvars[\"--theme-button-stroke-weight\"] = `${surface.buttonStrokeWeight}px`;\n\t}\n\n\treturn vars as React.CSSProperties;\n}\n\n/**\n * Converts a ButtonTheme object to CSS custom properties (inline style object)\n *\n * @param theme - The button theme object to convert\n * @returns An object suitable for use as React inline styles\n */\nexport function buttonThemeToStyleVars(\n\ttheme: ButtonTheme | undefined,\n): React.CSSProperties {\n\tif (!theme) return {};\n\n\tconst vars: Record<string, string> = {};\n\n\tif (theme.bg) vars[\"--btn-bg\"] = colorToVar(theme.bg);\n\tif (theme.bgHover) vars[\"--btn-bg-hover\"] = colorToVar(theme.bgHover);\n\tif (theme.bgActive) vars[\"--btn-bg-active\"] = colorToVar(theme.bgActive);\n\tif (theme.text) vars[\"--btn-text\"] = colorToVar(theme.text);\n\tif (theme.borderColor)\n\t\tvars[\"--btn-border-color\"] = colorToVar(theme.borderColor);\n\tif (theme.borderWidth !== undefined)\n\t\tvars[\"--btn-border-width\"] = `${theme.borderWidth}px`;\n\tif (theme.radius) vars[\"--btn-radius\"] = radiusToVar(theme.radius);\n\n\treturn vars as React.CSSProperties;\n}\n"],"names":["FONT_SIZES","fontSizeToClass","size","responsiveTypographyClass","mobile","tablet","desktop","colorToVar","token","spacingToVar","radiusToVar","themeToStyleVars","theme","vars","colors","spatial","surface","buttonThemeToStyleVars"],"mappings":"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"}

package/dist/lib/utils.d.ts

@@ -1 +0,0 @@
-export { cnBase as cn } from 'tailwind-variants';

package/dist/node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/accordion/header/AccordionHeader.js

@@ -1,24 +0,0 @@
-import * as n from "react";
-import { useRenderElement as c } from "../../utils/useRenderElement.js";
-import { useAccordionItemContext as i } from "../item/AccordionItemContext.js";
-import { accordionStateAttributesMapping as s } from "../item/stateAttributesMapping.js";
-const a = /* @__PURE__ */ n.forwardRef(function(e, t) {
-  const {
-    render: d,
-    className: p,
-    ...r
-  } = e, {
-    state: o
-  } = i();
-  return c("h3", e, {
-    state: o,
-    ref: t,
-    props: r,
-    stateAttributesMapping: s
-  });
-});
-process.env.NODE_ENV !== "production" && (a.displayName = "AccordionHeader");
-export {
-  a as AccordionHeader
-};
-//# sourceMappingURL=AccordionHeader.js.map

package/dist/node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/accordion/header/AccordionHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionHeader.js","sources":["../../../../../../../../../../../../node_modules/.bun/@base-ui-components+react@1.0.0-rc.0+6526322f93af6249/node_modules/@base-ui-components/react/esm/accordion/header/AccordionHeader.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useRenderElement } from \"../../utils/useRenderElement.js\";\nimport { useAccordionItemContext } from \"../item/AccordionItemContext.js\";\nimport { accordionStateAttributesMapping } from \"../item/stateAttributesMapping.js\";\n\n/**\n * A heading that labels the corresponding panel.\n * Renders an `<h3>` element.\n *\n * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)\n */\nexport const AccordionHeader = /*#__PURE__*/React.forwardRef(function AccordionHeader(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    ...elementProps\n  } = componentProps;\n  const {\n    state\n  } = useAccordionItemContext();\n  const element = useRenderElement('h3', componentProps, {\n    state,\n    ref: forwardedRef,\n    props: elementProps,\n    stateAttributesMapping: accordionStateAttributesMapping\n  });\n  return element;\n});\nif (process.env.NODE_ENV !== \"production\") AccordionHeader.displayName = \"AccordionHeader\";"],"names":["AccordionHeader","React","componentProps","forwardedRef","render","className","elementProps","state","useAccordionItemContext","useRenderElement","accordionStateAttributesMapping"],"mappings":";;;;AAaY,MAACA,IAA+B,gBAAAC,EAAM,WAAW,SAAyBC,GAAgBC,GAAc;AAClH,QAAM;AAAA,IACJ,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EACP,IAAMJ,GACE;AAAA,IACJ,OAAAK;AAAA,EACJ,IAAMC,EAAuB;AAO3B,SANgBC,EAAiB,MAAMP,GAAgB;AAAA,IACrD,OAAAK;AAAA,IACA,KAAKJ;AAAA,IACL,OAAOG;AAAA,IACP,wBAAwBI;AAAA,EAC5B,CAAG;AAEH,CAAC;AACG,QAAQ,IAAI,aAAa,iBAAcV,EAAgB,cAAc;","x_google_ignoreList":[0]}

package/dist/node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/accordion/item/AccordionItem.js

@@ -1,79 +0,0 @@
-import * as o from "react";
-import { useStableCallback as k } from "../../../../../../../@base-ui-components_utils@0.2.2_6526322f93af6249/node_modules/@base-ui-components/utils/esm/useStableCallback.js";
-import { useMergedRefs as j } from "../../../../../../../@base-ui-components_utils@0.2.2_6526322f93af6249/node_modules/@base-ui-components/utils/esm/useMergedRefs.js";
-import { useBaseUiId as C } from "../../utils/useBaseUiId.js";
-import { useCollapsibleRoot as w } from "../../collapsible/root/useCollapsibleRoot.js";
-import { CollapsibleRootContext as y } from "../../collapsible/root/CollapsibleRootContext.js";
-import { useCompositeListItem as B } from "../../composite/list/useCompositeListItem.js";
-import { useAccordionRootContext as D } from "../root/AccordionRootContext.js";
-import { AccordionItemContext as L } from "./AccordionItemContext.js";
-import { accordionStateAttributesMapping as T } from "./stateAttributesMapping.js";
-import { useRenderElement as U } from "../../utils/useRenderElement.js";
-import { jsx as g } from "react/jsx-runtime";
-const _ = /* @__PURE__ */ o.forwardRef(function(c, I) {
-  const {
-    className: z,
-    disabled: h = !1,
-    onOpenChange: v,
-    render: F,
-    value: R,
-    ...x
-  } = c, {
-    ref: M,
-    index: d
-  } = B(), S = j(I, M), {
-    disabled: A,
-    handleValueChange: P,
-    state: m,
-    value: n
-  } = D(), N = C(), s = R ?? N, i = h || A, r = o.useMemo(() => {
-    if (!n)
-      return !1;
-    for (let t = 0; t < n.length; t += 1)
-      if (n[t] === s)
-        return !0;
-    return !1;
-  }, [n, s]), a = k((t, b) => {
-    v?.(t, b), !b.isCanceled && P(s, t);
-  }), e = w({
-    open: r,
-    onOpenChange: a,
-    disabled: i
-  }), p = o.useMemo(() => ({
-    open: e.open,
-    disabled: e.disabled,
-    hidden: !e.mounted,
-    transitionStatus: e.transitionStatus
-  }), [e.open, e.disabled, e.mounted, e.transitionStatus]), O = o.useMemo(() => ({
-    ...e,
-    onOpenChange: a,
-    state: p
-  }), [e, p, a]), l = o.useMemo(() => ({
-    ...m,
-    index: d,
-    disabled: i,
-    open: r
-  }), [i, d, r, m]), [u, f] = o.useState(C()), V = o.useMemo(() => ({
-    open: r,
-    state: l,
-    setTriggerId: f,
-    triggerId: u
-  }), [r, l, f, u]), E = U("div", c, {
-    state: l,
-    ref: S,
-    props: x,
-    stateAttributesMapping: T
-  });
-  return /* @__PURE__ */ g(y.Provider, {
-    value: O,
-    children: /* @__PURE__ */ g(L.Provider, {
-      value: V,
-      children: E
-    })
-  });
-});
-process.env.NODE_ENV !== "production" && (_.displayName = "AccordionItem");
-export {
-  _ as AccordionItem
-};
-//# sourceMappingURL=AccordionItem.js.map

package/dist/node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/accordion/item/AccordionItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../../../../../../../../../node_modules/.bun/@base-ui-components+react@1.0.0-rc.0+6526322f93af6249/node_modules/@base-ui-components/react/esm/accordion/item/AccordionItem.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useStableCallback } from '@base-ui-components/utils/useStableCallback';\nimport { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';\nimport { useBaseUiId } from \"../../utils/useBaseUiId.js\";\nimport { useCollapsibleRoot } from \"../../collapsible/root/useCollapsibleRoot.js\";\nimport { CollapsibleRootContext } from \"../../collapsible/root/CollapsibleRootContext.js\";\nimport { useCompositeListItem } from \"../../composite/list/useCompositeListItem.js\";\nimport { useAccordionRootContext } from \"../root/AccordionRootContext.js\";\nimport { AccordionItemContext } from \"./AccordionItemContext.js\";\nimport { accordionStateAttributesMapping } from \"./stateAttributesMapping.js\";\nimport { useRenderElement } from \"../../utils/useRenderElement.js\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Groups an accordion header with the corresponding panel.\n * Renders a `<div>` element.\n *\n * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)\n */\nexport const AccordionItem = /*#__PURE__*/React.forwardRef(function AccordionItem(componentProps, forwardedRef) {\n  const {\n    className,\n    disabled: disabledProp = false,\n    onOpenChange: onOpenChangeProp,\n    render,\n    value: valueProp,\n    ...elementProps\n  } = componentProps;\n  const {\n    ref: listItemRef,\n    index\n  } = useCompositeListItem();\n  const mergedRef = useMergedRefs(forwardedRef, listItemRef);\n  const {\n    disabled: contextDisabled,\n    handleValueChange,\n    state: rootState,\n    value: openValues\n  } = useAccordionRootContext();\n  const fallbackValue = useBaseUiId();\n  const value = valueProp ?? fallbackValue;\n  const disabled = disabledProp || contextDisabled;\n  const isOpen = React.useMemo(() => {\n    if (!openValues) {\n      return false;\n    }\n    for (let i = 0; i < openValues.length; i += 1) {\n      if (openValues[i] === value) {\n        return true;\n      }\n    }\n    return false;\n  }, [openValues, value]);\n  const onOpenChange = useStableCallback((nextOpen, eventDetails) => {\n    onOpenChangeProp?.(nextOpen, eventDetails);\n    if (eventDetails.isCanceled) {\n      return;\n    }\n    handleValueChange(value, nextOpen);\n  });\n  const collapsible = useCollapsibleRoot({\n    open: isOpen,\n    onOpenChange,\n    disabled\n  });\n  const collapsibleState = React.useMemo(() => ({\n    open: collapsible.open,\n    disabled: collapsible.disabled,\n    hidden: !collapsible.mounted,\n    transitionStatus: collapsible.transitionStatus\n  }), [collapsible.open, collapsible.disabled, collapsible.mounted, collapsible.transitionStatus]);\n  const collapsibleContext = React.useMemo(() => ({\n    ...collapsible,\n    onOpenChange,\n    state: collapsibleState\n  }), [collapsible, collapsibleState, onOpenChange]);\n  const state = React.useMemo(() => ({\n    ...rootState,\n    index,\n    disabled,\n    open: isOpen\n  }), [disabled, index, isOpen, rootState]);\n  const [triggerId, setTriggerId] = React.useState(useBaseUiId());\n  const accordionItemContext = React.useMemo(() => ({\n    open: isOpen,\n    state,\n    setTriggerId,\n    triggerId\n  }), [isOpen, state, setTriggerId, triggerId]);\n  const element = useRenderElement('div', componentProps, {\n    state,\n    ref: mergedRef,\n    props: elementProps,\n    stateAttributesMapping: accordionStateAttributesMapping\n  });\n  return /*#__PURE__*/_jsx(CollapsibleRootContext.Provider, {\n    value: collapsibleContext,\n    children: /*#__PURE__*/_jsx(AccordionItemContext.Provider, {\n      value: accordionItemContext,\n      children: element\n    })\n  });\n});\nif (process.env.NODE_ENV !== \"production\") AccordionItem.displayName = \"AccordionItem\";"],"names":["AccordionItem","React","componentProps","forwardedRef","className","disabledProp","onOpenChangeProp","render","valueProp","elementProps","listItemRef","index","useCompositeListItem","mergedRef","useMergedRefs","contextDisabled","handleValueChange","rootState","openValues","useAccordionRootContext","fallbackValue","useBaseUiId","value","disabled","isOpen","i","onOpenChange","useStableCallback","nextOpen","eventDetails","collapsible","useCollapsibleRoot","collapsibleState","collapsibleContext","state","triggerId","setTriggerId","accordionItemContext","element","useRenderElement","accordionStateAttributesMapping","_jsx","CollapsibleRootContext","AccordionItemContext"],"mappings":";;;;;;;;;;;;AAoBY,MAACA,IAA6B,gBAAAC,EAAM,WAAW,SAAuBC,GAAgBC,GAAc;AAC9G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAUC,IAAe;AAAA,IACzB,cAAcC;AAAA,IACd,QAAAC;AAAA,IACA,OAAOC;AAAA,IACP,GAAGC;AAAA,EACP,IAAMP,GACE;AAAA,IACJ,KAAKQ;AAAA,IACL,OAAAC;AAAA,EACJ,IAAMC,EAAoB,GAClBC,IAAYC,EAAcX,GAAcO,CAAW,GACnD;AAAA,IACJ,UAAUK;AAAA,IACV,mBAAAC;AAAA,IACA,OAAOC;AAAA,IACP,OAAOC;AAAA,EACX,IAAMC,EAAuB,GACrBC,IAAgBC,EAAW,GAC3BC,IAAQd,KAAaY,GACrBG,IAAWlB,KAAgBU,GAC3BS,IAASvB,EAAM,QAAQ,MAAM;AACjC,QAAI,CAACiB;AACH,aAAO;AAET,aAASO,IAAI,GAAGA,IAAIP,EAAW,QAAQO,KAAK;AAC1C,UAAIP,EAAWO,CAAC,MAAMH;AACpB,eAAO;AAGX,WAAO;AAAA,EACT,GAAG,CAACJ,GAAYI,CAAK,CAAC,GAChBI,IAAeC,EAAkB,CAACC,GAAUC,MAAiB;AAEjE,IADAvB,IAAmBsB,GAAUC,CAAY,GACrC,CAAAA,EAAa,cAGjBb,EAAkBM,GAAOM,CAAQ;AAAA,EACnC,CAAC,GACKE,IAAcC,EAAmB;AAAA,IACrC,MAAMP;AAAA,IACN,cAAAE;AAAA,IACA,UAAAH;AAAA,EACJ,CAAG,GACKS,IAAmB/B,EAAM,QAAQ,OAAO;AAAA,IAC5C,MAAM6B,EAAY;AAAA,IAClB,UAAUA,EAAY;AAAA,IACtB,QAAQ,CAACA,EAAY;AAAA,IACrB,kBAAkBA,EAAY;AAAA,EAClC,IAAM,CAACA,EAAY,MAAMA,EAAY,UAAUA,EAAY,SAASA,EAAY,gBAAgB,CAAC,GACzFG,IAAqBhC,EAAM,QAAQ,OAAO;AAAA,IAC9C,GAAG6B;AAAA,IACH,cAAAJ;AAAA,IACA,OAAOM;AAAA,EACX,IAAM,CAACF,GAAaE,GAAkBN,CAAY,CAAC,GAC3CQ,IAAQjC,EAAM,QAAQ,OAAO;AAAA,IACjC,GAAGgB;AAAA,IACH,OAAAN;AAAA,IACA,UAAAY;AAAA,IACA,MAAMC;AAAA,EACV,IAAM,CAACD,GAAUZ,GAAOa,GAAQP,CAAS,CAAC,GAClC,CAACkB,GAAWC,CAAY,IAAInC,EAAM,SAASoB,GAAa,GACxDgB,IAAuBpC,EAAM,QAAQ,OAAO;AAAA,IAChD,MAAMuB;AAAA,IACN,OAAAU;AAAA,IACA,cAAAE;AAAA,IACA,WAAAD;AAAA,EACJ,IAAM,CAACX,GAAQU,GAAOE,GAAcD,CAAS,CAAC,GACtCG,IAAUC,EAAiB,OAAOrC,GAAgB;AAAA,IACtD,OAAAgC;AAAA,IACA,KAAKrB;AAAA,IACL,OAAOJ;AAAA,IACP,wBAAwB+B;AAAA,EAC5B,CAAG;AACD,SAAoBC,gBAAAA,EAAKC,EAAuB,UAAU;AAAA,IACxD,OAAOT;AAAA,IACP,UAAuBQ,gBAAAA,EAAKE,EAAqB,UAAU;AAAA,MACzD,OAAON;AAAA,MACP,UAAUC;AAAA,IAChB,CAAK;AAAA,EACL,CAAG;AACH,CAAC;AACG,QAAQ,IAAI,aAAa,iBAActC,EAAc,cAAc;","x_google_ignoreList":[0]}