@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/tokens/sidebar.js

@@ -0,0 +1,92 @@
+"use client";
+const e = {
+  // Icon sizes
+  icon: {
+    sm: "h-4 w-4",
+    // 16px
+    md: "h-5 w-5",
+    // 20px (default)
+    lg: "h-6 w-6"
+    // 24px
+  },
+  // Text sizes
+  text: {
+    xs: "text-xs",
+    // 12px (group titles)
+    sm: "text-sm",
+    // 14px (items - default)
+    base: "text-base"
+    // 16px
+  },
+  // Spacing
+  spacing: {
+    itemPaddingX: "px-4",
+    // 16px horizontal padding for items
+    itemPaddingY: "py-2",
+    // 8px vertical padding for items
+    nestedIndent: "pl-6",
+    // 24px for nested items (level 1)
+    nestedIndentLevel2: "pl-10",
+    // 40px for nested items (level 2)
+    nestedIndentLevel3: "pl-14",
+    // 56px for nested items (level 3)
+    groupTitlePadding: "px-4 py-2",
+    // Padding for group titles
+    iconMargin: "mr-3"
+    // 12px margin between icon and text
+  },
+  // Colors (using Tailwind classes)
+  colors: {
+    active: {
+      bg: "bg-surface-brand-muted",
+      text: "text-fg-brand-emphasis",
+      border: "border-line-brand"
+    },
+    inactive: {
+      text: "text-fg-secondary",
+      hover: "hover:bg-surface-hover hover:text-fg-primary"
+    },
+    groupTitle: "text-fg-tertiary"
+  },
+  // Chevron (for collapsible groups)
+  chevron: {
+    size: "h-3 w-3",
+    // 12px (reduced from h-4 w-4)
+    color: "text-fg-quaternary"
+  },
+  // Navigation column (for split sidebar)
+  navigation: {
+    width: {
+      default: "56px",
+      compact: "48px",
+      expanded: "200px"
+    },
+    background: {
+      default: "#fafafa",
+      hover: "#f5f5f5"
+    }
+  },
+  // Split sidebar
+  split: {
+    transition: "transition-all duration-300",
+    collapsedWidth: "0px"
+  },
+  // Content area
+  content: {
+    scrollbar: {
+      width: "thin",
+      color: {
+        thumb: "#cbd5e1",
+        track: "#f1f5f9"
+      }
+    }
+  }
+};
+function n(t) {
+  return t <= 0 ? e.spacing.itemPaddingX : t === 1 ? e.spacing.nestedIndent : t === 2 ? e.spacing.nestedIndentLevel2 : t === 3 ? e.spacing.nestedIndentLevel3 : `pl-${4 + t * 4}`;
+}
+export {
+  e as SIDEBAR_TOKENS,
+  n as getNestedIndentClass
+};
+//# sourceMappingURL=sidebar.js.map

package/dist/granular/ui/tokens/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","sources":["../../../../src/ui/tokens/sidebar.ts"],"sourcesContent":["/**\n * Sidebar Design Tokens\n *\n * Centralized tokens for sidebar components to ensure consistency\n * and ease of maintenance. All spacing, sizing, and color values\n * should reference these tokens.\n */\n\nexport const SIDEBAR_TOKENS = {\n  // Icon sizes\n  icon: {\n    sm: \"h-4 w-4\", // 16px\n    md: \"h-5 w-5\", // 20px (default)\n    lg: \"h-6 w-6\", // 24px\n  },\n\n  // Text sizes\n  text: {\n    xs: \"text-xs\", // 12px (group titles)\n    sm: \"text-sm\", // 14px (items - default)\n    base: \"text-base\", // 16px\n  },\n\n  // Spacing\n  spacing: {\n    itemPaddingX: \"px-4\", // 16px horizontal padding for items\n    itemPaddingY: \"py-2\", // 8px vertical padding for items\n    nestedIndent: \"pl-6\", // 24px for nested items (level 1)\n    nestedIndentLevel2: \"pl-10\", // 40px for nested items (level 2)\n    nestedIndentLevel3: \"pl-14\", // 56px for nested items (level 3)\n    groupTitlePadding: \"px-4 py-2\", // Padding for group titles\n    iconMargin: \"mr-3\", // 12px margin between icon and text\n  },\n\n  // Colors (using Tailwind classes)\n  colors: {\n    active: {\n      bg: \"bg-surface-brand-muted\",\n      text: \"text-fg-brand-emphasis\",\n      border: \"border-line-brand\",\n    },\n    inactive: {\n      text: \"text-fg-secondary\",\n      hover: \"hover:bg-surface-hover hover:text-fg-primary\",\n    },\n    groupTitle: \"text-fg-tertiary\",\n  },\n\n  // Chevron (for collapsible groups)\n  chevron: {\n    size: \"h-3 w-3\", // 12px (reduced from h-4 w-4)\n    color: \"text-fg-quaternary\",\n  },\n\n  // Navigation column (for split sidebar)\n  navigation: {\n    width: {\n      default: \"56px\",\n      compact: \"48px\",\n      expanded: \"200px\",\n    },\n    background: {\n      default: \"#fafafa\",\n      hover: \"#f5f5f5\",\n    },\n  },\n\n  // Split sidebar\n  split: {\n    transition: \"transition-all duration-300\",\n    collapsedWidth: \"0px\",\n  },\n\n  // Content area\n  content: {\n    scrollbar: {\n      width: \"thin\",\n      color: {\n        thumb: \"#cbd5e1\",\n        track: \"#f1f5f9\",\n      },\n    },\n  },\n} as const;\n\n/**\n * Helper function to get nested indent class based on level\n */\nexport function getNestedIndentClass(level: number): string {\n  if (level <= 0) return SIDEBAR_TOKENS.spacing.itemPaddingX;\n  if (level === 1) return SIDEBAR_TOKENS.spacing.nestedIndent;\n  if (level === 2) return SIDEBAR_TOKENS.spacing.nestedIndentLevel2;\n  if (level === 3) return SIDEBAR_TOKENS.spacing.nestedIndentLevel3;\n  // For levels > 3, calculate dynamically: pl-{4 + level * 4}\n  return `pl-${4 + level * 4}`;\n}\n"],"names":["SIDEBAR_TOKENS","getNestedIndentClass","level"],"mappings":";AAQO,MAAMA,IAAiB;AAAA;AAAA,EAE5B,MAAM;AAAA,IACJ,IAAI;AAAA;AAAA,IACJ,IAAI;AAAA;AAAA,IACJ,IAAI;AAAA;AAAA,EAAA;AAAA;AAAA,EAIN,MAAM;AAAA,IACJ,IAAI;AAAA;AAAA,IACJ,IAAI;AAAA;AAAA,IACJ,MAAM;AAAA;AAAA,EAAA;AAAA;AAAA,EAIR,SAAS;AAAA,IACP,cAAc;AAAA;AAAA,IACd,cAAc;AAAA;AAAA,IACd,cAAc;AAAA;AAAA,IACd,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,mBAAmB;AAAA;AAAA,IACnB,YAAY;AAAA;AAAA,EAAA;AAAA;AAAA,EAId,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,IAEV,UAAU;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,IAET,YAAY;AAAA,EAAA;AAAA;AAAA,EAId,SAAS;AAAA,IACP,MAAM;AAAA;AAAA,IACN,OAAO;AAAA,EAAA;AAAA;AAAA,EAIT,YAAY;AAAA,IACV,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,IAEZ,YAAY;AAAA,MACV,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAAA;AAAA,EAIF,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAAA;AAAA;AAAA,EAIlB,SAAS;AAAA,IACP,WAAW;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,QACL,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF;AAEJ;AAKO,SAASC,EAAqBC,GAAuB;AAC1D,SAAIA,KAAS,IAAUF,EAAe,QAAQ,eAC1CE,MAAU,IAAUF,EAAe,QAAQ,eAC3CE,MAAU,IAAUF,EAAe,QAAQ,qBAC3CE,MAAU,IAAUF,EAAe,QAAQ,qBAExC,MAAM,IAAIE,IAAQ,CAAC;AAC5B;"}

package/dist/granular/ui/tokens/spacing.js

@@ -0,0 +1,143 @@
+"use client";
+var s = Object.defineProperty;
+var i = (a, t, p) => t in a ? s(a, t, { enumerable: !0, configurable: !0, writable: !0, value: p }) : a[t] = p;
+var c = (a, t, p) => i(a, typeof t != "symbol" ? t + "" : t, p);
+class e {
+  // 4px base
+  /**
+   * Create a spacing token from scale value
+   */
+  static create(t) {
+    const p = t * this.BASE_UNIT, r = p / 16;
+    return {
+      value: p,
+      rem: `${r}rem`,
+      px: `${p}px`,
+      tailwind: this.getTailwindClass(t)
+    };
+  }
+  /**
+   * Get Tailwind class for spacing value
+   */
+  static getTailwindClass(t) {
+    return {
+      0: "0",
+      0.5: "0.5",
+      // 2px — half-step, used by fine UI (badges, switches, separators)
+      1: "1",
+      // 4px
+      1.5: "1.5",
+      // 6px — half-step
+      2: "2",
+      // 8px
+      2.5: "2.5",
+      // 10px — half-step
+      3: "3",
+      // 12px
+      3.5: "3.5",
+      // 14px — half-step
+      4: "4",
+      // 16px
+      5: "5",
+      // 20px
+      6: "6",
+      // 24px
+      8: "8",
+      // 32px
+      10: "10",
+      // 40px
+      12: "12",
+      // 48px
+      16: "16",
+      // 64px
+      20: "20",
+      // 80px
+      24: "24",
+      // 96px
+      32: "32",
+      // 128px
+      40: "40",
+      // 160px
+      48: "48",
+      // 192px
+      64: "64",
+      // 256px
+      80: "80",
+      // 320px
+      96: "96"
+      // 384px
+    }[t] || String(t);
+  }
+}
+c(e, "BASE_UNIT", 4);
+const n = {
+  // Micro spacing (0-14px)
+  none: e.create(0),
+  "0.5": e.create(0.5),
+  // 2px (half-step)
+  xs: e.create(1),
+  // 4px
+  "1.5": e.create(1.5),
+  // 6px (half-step)
+  sm: e.create(2),
+  // 8px
+  "2.5": e.create(2.5),
+  // 10px (half-step)
+  md: e.create(3),
+  // 12px
+  "3.5": e.create(3.5),
+  // 14px (half-step)
+  // Standard spacing (16-32px)
+  base: e.create(4),
+  // 16px
+  lg: e.create(6),
+  // 24px
+  xl: e.create(8),
+  // 32px
+  // Large spacing (40-64px)
+  "2xl": e.create(10),
+  // 40px
+  "3xl": e.create(12),
+  // 48px
+  "4xl": e.create(16),
+  // 64px
+  // Extra large spacing (80px+)
+  "5xl": e.create(20),
+  // 80px
+  "6xl": e.create(24)
+  // 96px
+};
+function m(a) {
+  return n[a];
+}
+function g(a, t = "p") {
+  const r = n[a].tailwind;
+  return `${{
+    p: "p",
+    m: "m",
+    px: "px",
+    mx: "mx",
+    py: "py",
+    my: "my",
+    pt: "pt",
+    mt: "mt",
+    pr: "pr",
+    mr: "mr",
+    pb: "pb",
+    mb: "mb",
+    pl: "pl",
+    ml: "ml",
+    gap: "gap",
+    "gap-x": "gap-x",
+    "gap-y": "gap-y",
+    "space-x": "space-x",
+    "space-y": "space-y"
+  }[t]}-${r}`;
+}
+export {
+  n as SPACING_TOKENS,
+  e as SpacingTokenFactory,
+  m as getSpacing,
+  g as getSpacingClass
+};
+//# sourceMappingURL=spacing.js.map

package/dist/granular/ui/tokens/spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.js","sources":["../../../../src/ui/tokens/spacing.ts"],"sourcesContent":["/**\n * Spacing Tokens\n *\n * Centralized spacing scale based on 4px base unit.\n * Uses Factory Pattern for type-safe token creation.\n */\n\nexport type SpacingScale =\n  | 0\n  | 0.5\n  | 1\n  | 1.5\n  | 2\n  | 2.5\n  | 3\n  | 3.5\n  | 4\n  | 5\n  | 6\n  | 8\n  | 10\n  | 12\n  | 16\n  | 20\n  | 24\n  | 32\n  | 40\n  | 48\n  | 64\n  | 80\n  | 96;\n\nexport interface SpacingToken {\n  value: number;\n  rem: string;\n  px: string;\n  tailwind: string;\n}\n\n/**\n * Spacing Token Factory\n * Creates spacing tokens with consistent naming and values\n */\nexport class SpacingTokenFactory {\n  private static readonly BASE_UNIT = 4; // 4px base\n\n  /**\n   * Create a spacing token from scale value\n   */\n  static create(scale: SpacingScale): SpacingToken {\n    const px = scale * this.BASE_UNIT;\n    const rem = px / 16; // 16px = 1rem\n\n    return {\n      value: px,\n      rem: `${rem}rem`,\n      px: `${px}px`,\n      tailwind: this.getTailwindClass(scale),\n    };\n  }\n\n  /**\n   * Get Tailwind class for spacing value\n   */\n  private static getTailwindClass(scale: SpacingScale): string {\n    const tailwindMap: Record<SpacingScale, string> = {\n      0: \"0\",\n      0.5: \"0.5\", // 2px — half-step, used by fine UI (badges, switches, separators)\n      1: \"1\", // 4px\n      1.5: \"1.5\", // 6px — half-step\n      2: \"2\", // 8px\n      2.5: \"2.5\", // 10px — half-step\n      3: \"3\", // 12px\n      3.5: \"3.5\", // 14px — half-step\n      4: \"4\", // 16px\n      5: \"5\", // 20px\n      6: \"6\", // 24px\n      8: \"8\", // 32px\n      10: \"10\", // 40px\n      12: \"12\", // 48px\n      16: \"16\", // 64px\n      20: \"20\", // 80px\n      24: \"24\", // 96px\n      32: \"32\", // 128px\n      40: \"40\", // 160px\n      48: \"48\", // 192px\n      64: \"64\", // 256px\n      80: \"80\", // 320px\n      96: \"96\", // 384px\n    };\n\n    return tailwindMap[scale] || String(scale);\n  }\n}\n\n/**\n * Pre-defined spacing tokens\n */\nexport const SPACING_TOKENS = {\n  // Micro spacing (0-14px)\n  none: SpacingTokenFactory.create(0),\n  \"0.5\": SpacingTokenFactory.create(0.5), // 2px (half-step)\n  xs: SpacingTokenFactory.create(1), // 4px\n  \"1.5\": SpacingTokenFactory.create(1.5), // 6px (half-step)\n  sm: SpacingTokenFactory.create(2), // 8px\n  \"2.5\": SpacingTokenFactory.create(2.5), // 10px (half-step)\n  md: SpacingTokenFactory.create(3), // 12px\n  \"3.5\": SpacingTokenFactory.create(3.5), // 14px (half-step)\n\n  // Standard spacing (16-32px)\n  base: SpacingTokenFactory.create(4), // 16px\n  lg: SpacingTokenFactory.create(6), // 24px\n  xl: SpacingTokenFactory.create(8), // 32px\n\n  // Large spacing (40-64px)\n  \"2xl\": SpacingTokenFactory.create(10), // 40px\n  \"3xl\": SpacingTokenFactory.create(12), // 48px\n  \"4xl\": SpacingTokenFactory.create(16), // 64px\n\n  // Extra large spacing (80px+)\n  \"5xl\": SpacingTokenFactory.create(20), // 80px\n  \"6xl\": SpacingTokenFactory.create(24), // 96px\n} as const;\n\n/**\n * Helper function to get spacing value\n */\nexport function getSpacing(scale: keyof typeof SPACING_TOKENS): SpacingToken {\n  return SPACING_TOKENS[scale];\n}\n\n/**\n * Helper function to get spacing as Tailwind class\n */\nexport function getSpacingClass(\n  scale: keyof typeof SPACING_TOKENS,\n  direction:\n    | \"p\"\n    | \"m\"\n    | \"px\"\n    | \"mx\"\n    | \"py\"\n    | \"my\"\n    | \"pt\"\n    | \"mt\"\n    | \"pr\"\n    | \"mr\"\n    | \"pb\"\n    | \"mb\"\n    | \"pl\"\n    | \"ml\"\n    | \"gap\"\n    | \"gap-x\"\n    | \"gap-y\"\n    | \"space-x\"\n    | \"space-y\" = \"p\",\n): string {\n  const token = SPACING_TOKENS[scale];\n  const value = token.tailwind;\n\n  const prefixMap: Record<string, string> = {\n    p: \"p\",\n    m: \"m\",\n    px: \"px\",\n    mx: \"mx\",\n    py: \"py\",\n    my: \"my\",\n    pt: \"pt\",\n    mt: \"mt\",\n    pr: \"pr\",\n    mr: \"mr\",\n    pb: \"pb\",\n    mb: \"mb\",\n    pl: \"pl\",\n    ml: \"ml\",\n    gap: \"gap\",\n    \"gap-x\": \"gap-x\",\n    \"gap-y\": \"gap-y\",\n    \"space-x\": \"space-x\",\n    \"space-y\": \"space-y\",\n  };\n\n  return `${prefixMap[direction]}-${value}`;\n}\n"],"names":["SpacingTokenFactory","scale","px","rem","__publicField","SPACING_TOKENS","getSpacing","getSpacingClass","direction","value"],"mappings":";;;;AA2CO,MAAMA,EAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,EAM/B,OAAO,OAAOC,GAAmC;AAC/C,UAAMC,IAAKD,IAAQ,KAAK,WAClBE,IAAMD,IAAK;AAEjB,WAAO;AAAA,MACL,OAAOA;AAAA,MACP,KAAK,GAAGC,CAAG;AAAA,MACX,IAAI,GAAGD,CAAE;AAAA,MACT,UAAU,KAAK,iBAAiBD,CAAK;AAAA,IAAA;AAAA,EAEzC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAe,iBAAiBA,GAA6B;AA2B3D,WA1BkD;AAAA,MAChD,GAAG;AAAA,MACH,KAAK;AAAA;AAAA,MACL,GAAG;AAAA;AAAA,MACH,KAAK;AAAA;AAAA,MACL,GAAG;AAAA;AAAA,MACH,KAAK;AAAA;AAAA,MACL,GAAG;AAAA;AAAA,MACH,KAAK;AAAA;AAAA,MACL,GAAG;AAAA;AAAA,MACH,GAAG;AAAA;AAAA,MACH,GAAG;AAAA;AAAA,MACH,GAAG;AAAA;AAAA,MACH,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,IAAA,EAGaA,CAAK,KAAK,OAAOA,CAAK;AAAA,EAC3C;AACF;AAjDEG,EADWJ,GACa,aAAY;AAsD/B,MAAMK,IAAiB;AAAA;AAAA,EAE5B,MAAML,EAAoB,OAAO,CAAC;AAAA,EAClC,OAAOA,EAAoB,OAAO,GAAG;AAAA;AAAA,EACrC,IAAIA,EAAoB,OAAO,CAAC;AAAA;AAAA,EAChC,OAAOA,EAAoB,OAAO,GAAG;AAAA;AAAA,EACrC,IAAIA,EAAoB,OAAO,CAAC;AAAA;AAAA,EAChC,OAAOA,EAAoB,OAAO,GAAG;AAAA;AAAA,EACrC,IAAIA,EAAoB,OAAO,CAAC;AAAA;AAAA,EAChC,OAAOA,EAAoB,OAAO,GAAG;AAAA;AAAA;AAAA,EAGrC,MAAMA,EAAoB,OAAO,CAAC;AAAA;AAAA,EAClC,IAAIA,EAAoB,OAAO,CAAC;AAAA;AAAA,EAChC,IAAIA,EAAoB,OAAO,CAAC;AAAA;AAAA;AAAA,EAGhC,OAAOA,EAAoB,OAAO,EAAE;AAAA;AAAA,EACpC,OAAOA,EAAoB,OAAO,EAAE;AAAA;AAAA,EACpC,OAAOA,EAAoB,OAAO,EAAE;AAAA;AAAA;AAAA,EAGpC,OAAOA,EAAoB,OAAO,EAAE;AAAA;AAAA,EACpC,OAAOA,EAAoB,OAAO,EAAE;AAAA;AACtC;AAKO,SAASM,EAAWL,GAAkD;AAC3E,SAAOI,EAAeJ,CAAK;AAC7B;AAKO,SAASM,EACdN,GACAO,IAmBgB,KACR;AAER,QAAMC,IADQJ,EAAeJ,CAAK,EACd;AAwBpB,SAAO,GAtBmC;AAAA,IACxC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,SAAS;AAAA,IACT,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,EAAA,EAGOO,CAAS,CAAC,IAAIC,CAAK;AACzC;"}

package/dist/granular/ui/tokens/switch.js

@@ -0,0 +1,51 @@
+"use client";
+const h = {
+  /**
+   * Track (the rounded background bar).
+   * w * h:
+   *   sm — 36 × 20 px
+   *   md — 44 × 24 px
+   *   lg — 56 × 28 px
+   */
+  track: {
+    sm: { w: "w-9", h: "h-5" },
+    md: { w: "w-11", h: "h-6" },
+    lg: { w: "w-14", h: "h-7" }
+  },
+  /**
+   * Thumb (the circular knob).
+   * w * h:
+   *   sm — 16 × 16 px
+   *   md — 20 × 20 px
+   *   lg — 24 × 24 px
+   */
+  thumb: {
+    sm: { w: "w-4", h: "h-4" },
+    md: { w: "w-5", h: "h-5" },
+    lg: { w: "w-6", h: "h-6" }
+  },
+  /**
+   * Translation distance of the thumb when the switch is on. Matches the
+   * track width minus the thumb width and border for visual symmetry.
+   *   sm — 16 px
+   *   md — 20 px
+   *   lg — 28 px
+   */
+  translate: {
+    sm: "translate-x-4",
+    md: "translate-x-5",
+    lg: "translate-x-7"
+  }
+};
+function a(t) {
+  return {
+    track: `${h.track[t].w} ${h.track[t].h}`,
+    thumb: `${h.thumb[t].w} ${h.thumb[t].h}`,
+    translate: h.translate[t]
+  };
+}
+export {
+  h as SWITCH_TOKENS,
+  a as getSwitchClasses
+};
+//# sourceMappingURL=switch.js.map

package/dist/granular/ui/tokens/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":["../../../../src/ui/tokens/switch.ts"],"sourcesContent":["/**\n * Switch Design Tokens\n *\n * Component-scoped tokens for the Switch primitive. These dimensions are\n * anatomical to the control (track / thumb / on-state translation) and do\n * not belong in the global spacing scale — keeping them here prevents the\n * scale from being polluted with one-off values like w-9 / w-11 / w-14 /\n * h-7 that only ever make sense on a switch.\n *\n * Sizes mirror the SwitchSize variants (\"sm\" | \"md\" | \"lg\").\n */\n\nexport type SwitchSizeToken = \"sm\" | \"md\" | \"lg\";\n\nexport const SWITCH_TOKENS = {\n  /**\n   * Track (the rounded background bar).\n   * w * h:\n   *   sm — 36 × 20 px\n   *   md — 44 × 24 px\n   *   lg — 56 × 28 px\n   */\n  track: {\n    sm: { w: \"w-9\", h: \"h-5\" },\n    md: { w: \"w-11\", h: \"h-6\" },\n    lg: { w: \"w-14\", h: \"h-7\" },\n  },\n\n  /**\n   * Thumb (the circular knob).\n   * w * h:\n   *   sm — 16 × 16 px\n   *   md — 20 × 20 px\n   *   lg — 24 × 24 px\n   */\n  thumb: {\n    sm: { w: \"w-4\", h: \"h-4\" },\n    md: { w: \"w-5\", h: \"h-5\" },\n    lg: { w: \"w-6\", h: \"h-6\" },\n  },\n\n  /**\n   * Translation distance of the thumb when the switch is on. Matches the\n   * track width minus the thumb width and border for visual symmetry.\n   *   sm — 16 px\n   *   md — 20 px\n   *   lg — 28 px\n   */\n  translate: {\n    sm: \"translate-x-4\",\n    md: \"translate-x-5\",\n    lg: \"translate-x-7\",\n  },\n} as const;\n\n/**\n * Helper: returns the full set of classes for a given switch size.\n */\nexport function getSwitchClasses(size: SwitchSizeToken): {\n  track: string;\n  thumb: string;\n  translate: string;\n} {\n  return {\n    track: `${SWITCH_TOKENS.track[size].w} ${SWITCH_TOKENS.track[size].h}`,\n    thumb: `${SWITCH_TOKENS.thumb[size].w} ${SWITCH_TOKENS.thumb[size].h}`,\n    translate: SWITCH_TOKENS.translate[size],\n  };\n}\n"],"names":["SWITCH_TOKENS","getSwitchClasses","size"],"mappings":";AAcO,MAAMA,IAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3B,OAAO;AAAA,IACL,IAAI,EAAE,GAAG,OAAO,GAAG,MAAA;AAAA,IACnB,IAAI,EAAE,GAAG,QAAQ,GAAG,MAAA;AAAA,IACpB,IAAI,EAAE,GAAG,QAAQ,GAAG,MAAA;AAAA,EAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU5B,OAAO;AAAA,IACL,IAAI,EAAE,GAAG,OAAO,GAAG,MAAA;AAAA,IACnB,IAAI,EAAE,GAAG,OAAO,GAAG,MAAA;AAAA,IACnB,IAAI,EAAE,GAAG,OAAO,GAAG,MAAA;AAAA,EAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU3B,WAAW;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAER;AAKO,SAASC,EAAiBC,GAI/B;AACA,SAAO;AAAA,IACL,OAAO,GAAGF,EAAc,MAAME,CAAI,EAAE,CAAC,IAAIF,EAAc,MAAME,CAAI,EAAE,CAAC;AAAA,IACpE,OAAO,GAAGF,EAAc,MAAME,CAAI,EAAE,CAAC,IAAIF,EAAc,MAAME,CAAI,EAAE,CAAC;AAAA,IACpE,WAAWF,EAAc,UAAUE,CAAI;AAAA,EAAA;AAE3C;"}

package/dist/granular/ui/tokens/typography.js

@@ -0,0 +1,146 @@
+"use client";
+class e {
+  /**
+   * Create font size token
+   */
+  static createFontSize(n) {
+    const i = {
+      "2xs": { px: 10, tailwind: "text-2xs" },
+      // micro-text (badge counters, mini chips)
+      xs: { px: 12, tailwind: "text-xs" },
+      sm: { px: 14, tailwind: "text-sm" },
+      base: { px: 16, tailwind: "text-base" },
+      lg: { px: 18, tailwind: "text-lg" },
+      xl: { px: 20, tailwind: "text-xl" },
+      "2xl": { px: 24, tailwind: "text-2xl" },
+      "3xl": { px: 30, tailwind: "text-3xl" },
+      "4xl": { px: 36, tailwind: "text-4xl" },
+      "5xl": { px: 48, tailwind: "text-5xl" },
+      "6xl": { px: 60, tailwind: "text-6xl" }
+    }[n];
+    return {
+      value: i.px,
+      rem: `${i.px / 16}rem`,
+      px: `${i.px}px`,
+      tailwind: i.tailwind
+    };
+  }
+  /**
+   * Create line height token
+   */
+  static createLineHeight(n) {
+    const i = {
+      none: { value: 1, tailwind: "leading-none" },
+      tight: { value: 1.25, tailwind: "leading-tight" },
+      snug: { value: 1.375, tailwind: "leading-snug" },
+      normal: { value: 1.5, tailwind: "leading-normal" },
+      relaxed: { value: 1.625, tailwind: "leading-relaxed" },
+      loose: { value: 2, tailwind: "leading-loose" }
+    }[n];
+    return {
+      value: i.value,
+      tailwind: i.tailwind
+    };
+  }
+  /**
+   * Create font weight token
+   */
+  static createFontWeight(n) {
+    const i = {
+      light: { value: 300, tailwind: "font-light" },
+      normal: { value: 400, tailwind: "font-normal" },
+      medium: { value: 500, tailwind: "font-medium" },
+      semibold: { value: 600, tailwind: "font-semibold" },
+      bold: { value: 700, tailwind: "font-bold" }
+    }[n];
+    return {
+      value: i.value,
+      tailwind: i.tailwind
+    };
+  }
+  /**
+   * Create complete typography token
+   */
+  static create(n, l = "normal", i = "normal") {
+    return {
+      fontSize: this.createFontSize(n),
+      lineHeight: this.createLineHeight(l),
+      fontWeight: this.createFontWeight(i)
+    };
+  }
+}
+const o = {
+  sans: {
+    name: "sans",
+    stack: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+    tailwind: "font-sans"
+  },
+  serif: {
+    name: "serif",
+    stack: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    tailwind: "font-serif"
+  },
+  mono: {
+    name: "mono",
+    stack: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    tailwind: "font-mono"
+  }
+}, r = {
+  light: e.createFontWeight("light"),
+  normal: e.createFontWeight("normal"),
+  medium: e.createFontWeight("medium"),
+  semibold: e.createFontWeight("semibold"),
+  bold: e.createFontWeight("bold")
+}, a = {
+  // Headings
+  h1: e.create("4xl", "tight", "bold"),
+  h2: e.create("3xl", "tight", "bold"),
+  h3: e.create("2xl", "snug", "semibold"),
+  h4: e.create("xl", "snug", "semibold"),
+  h5: e.create("lg", "normal", "medium"),
+  h6: e.create("base", "normal", "medium"),
+  // Body text
+  body: e.create("base", "relaxed", "normal"),
+  bodySmall: e.create("sm", "relaxed", "normal"),
+  bodyLarge: e.create("lg", "relaxed", "normal"),
+  // UI elements
+  label: e.create("sm", "normal", "medium"),
+  caption: e.create("xs", "normal", "normal"),
+  button: e.create("base", "normal", "medium")
+};
+function s(t) {
+  return a[t];
+}
+function d(t) {
+  const n = a[t];
+  return `${n.fontSize.tailwind} ${n.lineHeight.tailwind} ${n.fontWeight.tailwind}`;
+}
+function g(t) {
+  return a[t].fontSize.tailwind;
+}
+function m(t) {
+  return e.createFontSize(t).tailwind;
+}
+function c(t) {
+  return a[t].fontWeight.tailwind;
+}
+function u(t) {
+  return e.createFontWeight(t).tailwind;
+}
+function x(t) {
+  return a[t].lineHeight.tailwind;
+}
+export {
+  o as FONT_FAMILY_TOKENS,
+  r as FONT_WEIGHT_TOKENS,
+  a as TYPOGRAPHY_TOKENS,
+  e as TypographyTokenFactory,
+  s as getTypography,
+  d as getTypographyClasses,
+  x as getTypographyLineHeight,
+  g as getTypographySize,
+  m as getTypographySizeFromFontSize,
+  c as getTypographyWeight,
+  u as getTypographyWeightFromFontWeight
+};
+//# sourceMappingURL=typography.js.map

package/dist/granular/ui/tokens/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sources":["../../../../src/ui/tokens/typography.ts"],"sourcesContent":["/**\n * Typography Tokens\n *\n * Centralized typography system with font families, sizes, weights, and line heights.\n * Uses Factory Pattern for type-safe token creation.\n */\n\nexport type FontFamily = \"sans\" | \"serif\" | \"mono\";\nexport type FontWeight = \"light\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\";\nexport type FontSize =\n  | \"2xs\"\n  | \"xs\"\n  | \"sm\"\n  | \"base\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\"\n  | \"5xl\"\n  | \"6xl\";\nexport type LineHeight =\n  | \"none\"\n  | \"tight\"\n  | \"snug\"\n  | \"normal\"\n  | \"relaxed\"\n  | \"loose\";\n\nexport interface TypographyToken {\n  fontSize: {\n    value: number;\n    rem: string;\n    px: string;\n    tailwind: string;\n  };\n  lineHeight: {\n    value: number;\n    tailwind: string;\n  };\n  fontWeight: {\n    value: number;\n    tailwind: string;\n  };\n}\n\nexport interface FontFamilyToken {\n  name: string;\n  stack: string;\n  tailwind: string;\n}\n\nexport interface FontWeightToken {\n  value: number;\n  tailwind: string;\n}\n\n/**\n * Typography Token Factory\n * Creates typography tokens with consistent values\n */\nexport class TypographyTokenFactory {\n  /**\n   * Create font size token\n   */\n  static createFontSize(size: FontSize): TypographyToken[\"fontSize\"] {\n    const sizeMap: Record<FontSize, { px: number; tailwind: string }> = {\n      \"2xs\": { px: 10, tailwind: \"text-2xs\" }, // micro-text (badge counters, mini chips)\n      xs: { px: 12, tailwind: \"text-xs\" },\n      sm: { px: 14, tailwind: \"text-sm\" },\n      base: { px: 16, tailwind: \"text-base\" },\n      lg: { px: 18, tailwind: \"text-lg\" },\n      xl: { px: 20, tailwind: \"text-xl\" },\n      \"2xl\": { px: 24, tailwind: \"text-2xl\" },\n      \"3xl\": { px: 30, tailwind: \"text-3xl\" },\n      \"4xl\": { px: 36, tailwind: \"text-4xl\" },\n      \"5xl\": { px: 48, tailwind: \"text-5xl\" },\n      \"6xl\": { px: 60, tailwind: \"text-6xl\" },\n    };\n\n    const config = sizeMap[size];\n    return {\n      value: config.px,\n      rem: `${config.px / 16}rem`,\n      px: `${config.px}px`,\n      tailwind: config.tailwind,\n    };\n  }\n\n  /**\n   * Create line height token\n   */\n  static createLineHeight(height: LineHeight): TypographyToken[\"lineHeight\"] {\n    const heightMap: Record<LineHeight, { value: number; tailwind: string }> = {\n      none: { value: 1, tailwind: \"leading-none\" },\n      tight: { value: 1.25, tailwind: \"leading-tight\" },\n      snug: { value: 1.375, tailwind: \"leading-snug\" },\n      normal: { value: 1.5, tailwind: \"leading-normal\" },\n      relaxed: { value: 1.625, tailwind: \"leading-relaxed\" },\n      loose: { value: 2, tailwind: \"leading-loose\" },\n    };\n\n    const config = heightMap[height];\n    return {\n      value: config.value,\n      tailwind: config.tailwind,\n    };\n  }\n\n  /**\n   * Create font weight token\n   */\n  static createFontWeight(weight: FontWeight): FontWeightToken {\n    const weightMap: Record<FontWeight, { value: number; tailwind: string }> = {\n      light: { value: 300, tailwind: \"font-light\" },\n      normal: { value: 400, tailwind: \"font-normal\" },\n      medium: { value: 500, tailwind: \"font-medium\" },\n      semibold: { value: 600, tailwind: \"font-semibold\" },\n      bold: { value: 700, tailwind: \"font-bold\" },\n    };\n\n    const config = weightMap[weight];\n    return {\n      value: config.value,\n      tailwind: config.tailwind,\n    };\n  }\n\n  /**\n   * Create complete typography token\n   */\n  static create(\n    size: FontSize,\n    lineHeight: LineHeight = \"normal\",\n    weight: FontWeight = \"normal\",\n  ): TypographyToken {\n    return {\n      fontSize: this.createFontSize(size),\n      lineHeight: this.createLineHeight(lineHeight),\n      fontWeight: this.createFontWeight(weight),\n    };\n  }\n}\n\n/**\n * Font family tokens\n */\nexport const FONT_FAMILY_TOKENS: Record<FontFamily, FontFamilyToken> = {\n  sans: {\n    name: \"sans\",\n    stack:\n      'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif',\n    tailwind: \"font-sans\",\n  },\n  serif: {\n    name: \"serif\",\n    stack: 'ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif',\n    tailwind: \"font-serif\",\n  },\n  mono: {\n    name: \"mono\",\n    stack:\n      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\n    tailwind: \"font-mono\",\n  },\n} as const;\n\n/**\n * Font weight tokens\n */\nexport const FONT_WEIGHT_TOKENS: Record<FontWeight, FontWeightToken> = {\n  light: TypographyTokenFactory.createFontWeight(\"light\"),\n  normal: TypographyTokenFactory.createFontWeight(\"normal\"),\n  medium: TypographyTokenFactory.createFontWeight(\"medium\"),\n  semibold: TypographyTokenFactory.createFontWeight(\"semibold\"),\n  bold: TypographyTokenFactory.createFontWeight(\"bold\"),\n} as const;\n\n/**\n * Pre-defined typography tokens for common use cases\n */\nexport const TYPOGRAPHY_TOKENS = {\n  // Headings\n  h1: TypographyTokenFactory.create(\"4xl\", \"tight\", \"bold\"),\n  h2: TypographyTokenFactory.create(\"3xl\", \"tight\", \"bold\"),\n  h3: TypographyTokenFactory.create(\"2xl\", \"snug\", \"semibold\"),\n  h4: TypographyTokenFactory.create(\"xl\", \"snug\", \"semibold\"),\n  h5: TypographyTokenFactory.create(\"lg\", \"normal\", \"medium\"),\n  h6: TypographyTokenFactory.create(\"base\", \"normal\", \"medium\"),\n\n  // Body text\n  body: TypographyTokenFactory.create(\"base\", \"relaxed\", \"normal\"),\n  bodySmall: TypographyTokenFactory.create(\"sm\", \"relaxed\", \"normal\"),\n  bodyLarge: TypographyTokenFactory.create(\"lg\", \"relaxed\", \"normal\"),\n\n  // UI elements\n  label: TypographyTokenFactory.create(\"sm\", \"normal\", \"medium\"),\n  caption: TypographyTokenFactory.create(\"xs\", \"normal\", \"normal\"),\n  button: TypographyTokenFactory.create(\"base\", \"normal\", \"medium\"),\n} as const;\n\n/**\n * Helper function to get typography token\n */\nexport function getTypography(\n  variant: keyof typeof TYPOGRAPHY_TOKENS,\n): TypographyToken {\n  return TYPOGRAPHY_TOKENS[variant];\n}\n\n/**\n * Helper function to get typography classes as string\n */\nexport function getTypographyClasses(\n  variant: keyof typeof TYPOGRAPHY_TOKENS,\n): string {\n  const token = TYPOGRAPHY_TOKENS[variant];\n  return `${token.fontSize.tailwind} ${token.lineHeight.tailwind} ${token.fontWeight.tailwind}`;\n}\n\n/**\n * Helper function to get only font size class\n */\nexport function getTypographySize(\n  variant: keyof typeof TYPOGRAPHY_TOKENS,\n): string {\n  return TYPOGRAPHY_TOKENS[variant].fontSize.tailwind;\n}\n\n/**\n * Helper function to get font size class directly from FontSize\n * This is a convenience function for when you just need a size, not a full typography variant\n */\nexport function getTypographySizeFromFontSize(size: FontSize): string {\n  return TypographyTokenFactory.createFontSize(size).tailwind;\n}\n\n/**\n * Helper function to get only font weight class\n */\nexport function getTypographyWeight(\n  variant: keyof typeof TYPOGRAPHY_TOKENS,\n): string {\n  return TYPOGRAPHY_TOKENS[variant].fontWeight.tailwind;\n}\n\n/**\n * Helper function to get font weight class directly from FontWeight\n * This is a convenience function for when you just need a weight, not a full typography variant\n */\nexport function getTypographyWeightFromFontWeight(weight: FontWeight): string {\n  return TypographyTokenFactory.createFontWeight(weight).tailwind;\n}\n\n/**\n * Helper function to get only line height class\n */\nexport function getTypographyLineHeight(\n  variant: keyof typeof TYPOGRAPHY_TOKENS,\n): string {\n  return TYPOGRAPHY_TOKENS[variant].lineHeight.tailwind;\n}\n"],"names":["TypographyTokenFactory","size","config","height","weight","lineHeight","FONT_FAMILY_TOKENS","FONT_WEIGHT_TOKENS","TYPOGRAPHY_TOKENS","getTypography","variant","getTypographyClasses","token","getTypographySize","getTypographySizeFromFontSize","getTypographyWeight","getTypographyWeightFromFontWeight","getTypographyLineHeight"],"mappings":";AA6DO,MAAMA,EAAuB;AAAA;AAAA;AAAA;AAAA,EAIlC,OAAO,eAAeC,GAA6C;AAejE,UAAMC,IAd8D;AAAA,MAClE,OAAO,EAAE,IAAI,IAAI,UAAU,WAAA;AAAA;AAAA,MAC3B,IAAI,EAAE,IAAI,IAAI,UAAU,UAAA;AAAA,MACxB,IAAI,EAAE,IAAI,IAAI,UAAU,UAAA;AAAA,MACxB,MAAM,EAAE,IAAI,IAAI,UAAU,YAAA;AAAA,MAC1B,IAAI,EAAE,IAAI,IAAI,UAAU,UAAA;AAAA,MACxB,IAAI,EAAE,IAAI,IAAI,UAAU,UAAA;AAAA,MACxB,OAAO,EAAE,IAAI,IAAI,UAAU,WAAA;AAAA,MAC3B,OAAO,EAAE,IAAI,IAAI,UAAU,WAAA;AAAA,MAC3B,OAAO,EAAE,IAAI,IAAI,UAAU,WAAA;AAAA,MAC3B,OAAO,EAAE,IAAI,IAAI,UAAU,WAAA;AAAA,MAC3B,OAAO,EAAE,IAAI,IAAI,UAAU,WAAA;AAAA,IAAW,EAGjBD,CAAI;AAC3B,WAAO;AAAA,MACL,OAAOC,EAAO;AAAA,MACd,KAAK,GAAGA,EAAO,KAAK,EAAE;AAAA,MACtB,IAAI,GAAGA,EAAO,EAAE;AAAA,MAChB,UAAUA,EAAO;AAAA,IAAA;AAAA,EAErB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,iBAAiBC,GAAmD;AAUzE,UAAMD,IATqE;AAAA,MACzE,MAAM,EAAE,OAAO,GAAG,UAAU,eAAA;AAAA,MAC5B,OAAO,EAAE,OAAO,MAAM,UAAU,gBAAA;AAAA,MAChC,MAAM,EAAE,OAAO,OAAO,UAAU,eAAA;AAAA,MAChC,QAAQ,EAAE,OAAO,KAAK,UAAU,iBAAA;AAAA,MAChC,SAAS,EAAE,OAAO,OAAO,UAAU,kBAAA;AAAA,MACnC,OAAO,EAAE,OAAO,GAAG,UAAU,gBAAA;AAAA,IAAgB,EAGtBC,CAAM;AAC/B,WAAO;AAAA,MACL,OAAOD,EAAO;AAAA,MACd,UAAUA,EAAO;AAAA,IAAA;AAAA,EAErB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,iBAAiBE,GAAqC;AAS3D,UAAMF,IARqE;AAAA,MACzE,OAAO,EAAE,OAAO,KAAK,UAAU,aAAA;AAAA,MAC/B,QAAQ,EAAE,OAAO,KAAK,UAAU,cAAA;AAAA,MAChC,QAAQ,EAAE,OAAO,KAAK,UAAU,cAAA;AAAA,MAChC,UAAU,EAAE,OAAO,KAAK,UAAU,gBAAA;AAAA,MAClC,MAAM,EAAE,OAAO,KAAK,UAAU,YAAA;AAAA,IAAY,EAGnBE,CAAM;AAC/B,WAAO;AAAA,MACL,OAAOF,EAAO;AAAA,MACd,UAAUA,EAAO;AAAA,IAAA;AAAA,EAErB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,OACLD,GACAI,IAAyB,UACzBD,IAAqB,UACJ;AACjB,WAAO;AAAA,MACL,UAAU,KAAK,eAAeH,CAAI;AAAA,MAClC,YAAY,KAAK,iBAAiBI,CAAU;AAAA,MAC5C,YAAY,KAAK,iBAAiBD,CAAM;AAAA,IAAA;AAAA,EAE5C;AACF;AAKO,MAAME,IAA0D;AAAA,EACrE,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OACE;AAAA,IACF,UAAU;AAAA,EAAA;AAAA,EAEZ,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAAA,EAEZ,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OACE;AAAA,IACF,UAAU;AAAA,EAAA;AAEd,GAKaC,IAA0D;AAAA,EACrE,OAAOP,EAAuB,iBAAiB,OAAO;AAAA,EACtD,QAAQA,EAAuB,iBAAiB,QAAQ;AAAA,EACxD,QAAQA,EAAuB,iBAAiB,QAAQ;AAAA,EACxD,UAAUA,EAAuB,iBAAiB,UAAU;AAAA,EAC5D,MAAMA,EAAuB,iBAAiB,MAAM;AACtD,GAKaQ,IAAoB;AAAA;AAAA,EAE/B,IAAIR,EAAuB,OAAO,OAAO,SAAS,MAAM;AAAA,EACxD,IAAIA,EAAuB,OAAO,OAAO,SAAS,MAAM;AAAA,EACxD,IAAIA,EAAuB,OAAO,OAAO,QAAQ,UAAU;AAAA,EAC3D,IAAIA,EAAuB,OAAO,MAAM,QAAQ,UAAU;AAAA,EAC1D,IAAIA,EAAuB,OAAO,MAAM,UAAU,QAAQ;AAAA,EAC1D,IAAIA,EAAuB,OAAO,QAAQ,UAAU,QAAQ;AAAA;AAAA,EAG5D,MAAMA,EAAuB,OAAO,QAAQ,WAAW,QAAQ;AAAA,EAC/D,WAAWA,EAAuB,OAAO,MAAM,WAAW,QAAQ;AAAA,EAClE,WAAWA,EAAuB,OAAO,MAAM,WAAW,QAAQ;AAAA;AAAA,EAGlE,OAAOA,EAAuB,OAAO,MAAM,UAAU,QAAQ;AAAA,EAC7D,SAASA,EAAuB,OAAO,MAAM,UAAU,QAAQ;AAAA,EAC/D,QAAQA,EAAuB,OAAO,QAAQ,UAAU,QAAQ;AAClE;AAKO,SAASS,EACdC,GACiB;AACjB,SAAOF,EAAkBE,CAAO;AAClC;AAKO,SAASC,EACdD,GACQ;AACR,QAAME,IAAQJ,EAAkBE,CAAO;AACvC,SAAO,GAAGE,EAAM,SAAS,QAAQ,IAAIA,EAAM,WAAW,QAAQ,IAAIA,EAAM,WAAW,QAAQ;AAC7F;AAKO,SAASC,EACdH,GACQ;AACR,SAAOF,EAAkBE,CAAO,EAAE,SAAS;AAC7C;AAMO,SAASI,EAA8Bb,GAAwB;AACpE,SAAOD,EAAuB,eAAeC,CAAI,EAAE;AACrD;AAKO,SAASc,EACdL,GACQ;AACR,SAAOF,EAAkBE,CAAO,EAAE,WAAW;AAC/C;AAMO,SAASM,EAAkCZ,GAA4B;AAC5E,SAAOJ,EAAuB,iBAAiBI,CAAM,EAAE;AACzD;AAKO,SAASa,EACdP,GACQ;AACR,SAAOF,EAAkBE,CAAO,EAAE,WAAW;AAC/C;"}

package/dist/granular/ui/tokens/z-index.js

@@ -0,0 +1,79 @@
+"use client";
+class e {
+  /**
+   * Create a z-index token
+   */
+  static create(a) {
+    return {
+      base: {
+        value: 0,
+        tailwind: "z-0",
+        description: "Base layer for normal content"
+      },
+      dropdown: {
+        value: 1e3,
+        tailwind: "z-[1000]",
+        description: "Dropdown menus and select options"
+      },
+      sticky: {
+        value: 1020,
+        tailwind: "z-[1020]",
+        description: "Sticky headers and navigation"
+      },
+      fixed: {
+        value: 1030,
+        tailwind: "z-[1030]",
+        description: "Fixed position elements"
+      },
+      "modal-backdrop": {
+        value: 1040,
+        tailwind: "z-[1040]",
+        description: "Modal backdrop/overlay"
+      },
+      modal: {
+        value: 1050,
+        tailwind: "z-[1050]",
+        description: "Modal dialogs and drawers"
+      },
+      popover: {
+        value: 1060,
+        tailwind: "z-[1060]",
+        description: "Popovers and tooltips"
+      },
+      tooltip: {
+        value: 1070,
+        tailwind: "z-[1070]",
+        description: "Tooltips (highest priority)"
+      },
+      toast: {
+        value: 1080,
+        tailwind: "z-[1080]",
+        description: "Toast notifications (highest priority)"
+      }
+    }[a];
+  }
+}
+const i = {
+  base: e.create("base"),
+  dropdown: e.create("dropdown"),
+  sticky: e.create("sticky"),
+  fixed: e.create("fixed"),
+  "modal-backdrop": e.create("modal-backdrop"),
+  modal: e.create("modal"),
+  popover: e.create("popover"),
+  tooltip: e.create("tooltip"),
+  toast: e.create("toast")
+};
+function r(t) {
+  return e.create(t);
+}
+function d(t) {
+  return e.create(t).tailwind;
+}
+export {
+  e as ZIndexTokenFactory,
+  i as Z_INDEX_TOKENS,
+  r as getZIndex,
+  d as getZIndexClass
+};
+//# sourceMappingURL=z-index.js.map

package/dist/granular/ui/tokens/z-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-index.js","sources":["../../../../src/ui/tokens/z-index.ts"],"sourcesContent":["/**\n * Z-Index Tokens\n *\n * Centralized z-index system for consistent layering.\n * Uses Factory Pattern for type-safe token creation.\n */\n\nexport type ZIndexLayer =\n  | \"base\"\n  | \"dropdown\"\n  | \"sticky\"\n  | \"fixed\"\n  | \"modal-backdrop\"\n  | \"modal\"\n  | \"popover\"\n  | \"tooltip\"\n  | \"toast\";\n\nexport interface ZIndexToken {\n  value: number;\n  tailwind: string;\n  description: string;\n}\n\n/**\n * Z-Index Token Factory\n * Creates z-index tokens with consistent layering\n */\nexport class ZIndexTokenFactory {\n  /**\n   * Create a z-index token\n   */\n  static create(layer: ZIndexLayer): ZIndexToken {\n    const layerMap: Record<\n      ZIndexLayer,\n      { value: number; tailwind: string; description: string }\n    > = {\n      base: {\n        value: 0,\n        tailwind: \"z-0\",\n        description: \"Base layer for normal content\",\n      },\n      dropdown: {\n        value: 1000,\n        tailwind: \"z-[1000]\",\n        description: \"Dropdown menus and select options\",\n      },\n      sticky: {\n        value: 1020,\n        tailwind: \"z-[1020]\",\n        description: \"Sticky headers and navigation\",\n      },\n      fixed: {\n        value: 1030,\n        tailwind: \"z-[1030]\",\n        description: \"Fixed position elements\",\n      },\n      \"modal-backdrop\": {\n        value: 1040,\n        tailwind: \"z-[1040]\",\n        description: \"Modal backdrop/overlay\",\n      },\n      modal: {\n        value: 1050,\n        tailwind: \"z-[1050]\",\n        description: \"Modal dialogs and drawers\",\n      },\n      popover: {\n        value: 1060,\n        tailwind: \"z-[1060]\",\n        description: \"Popovers and tooltips\",\n      },\n      tooltip: {\n        value: 1070,\n        tailwind: \"z-[1070]\",\n        description: \"Tooltips (highest priority)\",\n      },\n      toast: {\n        value: 1080,\n        tailwind: \"z-[1080]\",\n        description: \"Toast notifications (highest priority)\",\n      },\n    };\n\n    return layerMap[layer];\n  }\n}\n\n/**\n * Pre-defined z-index tokens\n */\nexport const Z_INDEX_TOKENS = {\n  base: ZIndexTokenFactory.create(\"base\"),\n  dropdown: ZIndexTokenFactory.create(\"dropdown\"),\n  sticky: ZIndexTokenFactory.create(\"sticky\"),\n  fixed: ZIndexTokenFactory.create(\"fixed\"),\n  \"modal-backdrop\": ZIndexTokenFactory.create(\"modal-backdrop\"),\n  modal: ZIndexTokenFactory.create(\"modal\"),\n  popover: ZIndexTokenFactory.create(\"popover\"),\n  tooltip: ZIndexTokenFactory.create(\"tooltip\"),\n  toast: ZIndexTokenFactory.create(\"toast\"),\n} as const;\n\n/**\n * Helper function to get z-index token\n */\nexport function getZIndex(layer: ZIndexLayer): ZIndexToken {\n  return ZIndexTokenFactory.create(layer);\n}\n\n/**\n * Helper function to get z-index as Tailwind class\n */\nexport function getZIndexClass(layer: ZIndexLayer): string {\n  return ZIndexTokenFactory.create(layer).tailwind;\n}\n"],"names":["ZIndexTokenFactory","layer","Z_INDEX_TOKENS","getZIndex","getZIndexClass"],"mappings":";AA4BO,MAAMA,EAAmB;AAAA;AAAA;AAAA;AAAA,EAI9B,OAAO,OAAOC,GAAiC;AAoD7C,WAhDI;AAAA,MACF,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,UAAU;AAAA,QACR,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,QAAQ;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,OAAO;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,kBAAkB;AAAA,QAChB,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,OAAO;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,SAAS;AAAA,QACP,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,SAAS;AAAA,QACP,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,OAAO;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,IACf,EAGcA,CAAK;AAAA,EACvB;AACF;AAKO,MAAMC,IAAiB;AAAA,EAC5B,MAAMF,EAAmB,OAAO,MAAM;AAAA,EACtC,UAAUA,EAAmB,OAAO,UAAU;AAAA,EAC9C,QAAQA,EAAmB,OAAO,QAAQ;AAAA,EAC1C,OAAOA,EAAmB,OAAO,OAAO;AAAA,EACxC,kBAAkBA,EAAmB,OAAO,gBAAgB;AAAA,EAC5D,OAAOA,EAAmB,OAAO,OAAO;AAAA,EACxC,SAASA,EAAmB,OAAO,SAAS;AAAA,EAC5C,SAASA,EAAmB,OAAO,SAAS;AAAA,EAC5C,OAAOA,EAAmB,OAAO,OAAO;AAC1C;AAKO,SAASG,EAAUF,GAAiC;AACzD,SAAOD,EAAmB,OAAOC,CAAK;AACxC;AAKO,SAASG,EAAeH,GAA4B;AACzD,SAAOD,EAAmB,OAAOC,CAAK,EAAE;AAC1C;"}

package/dist/granular/ui/utils/cn.js

@@ -0,0 +1,10 @@
+"use client";
+import { clsx as t } from "clsx";
+import { twMerge as e } from "tailwind-merge";
+function c(...r) {
+  return e(t(r));
+}
+export {
+  c as cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/granular/ui/utils/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sources":["../../../../src/ui/utils/cn.ts"],"sourcesContent":["/**\n * CN Utility - ClassName Merge\n *\n * Utility function for merging classNames with Tailwind conflict resolution.\n * Combines clsx for conditional classes and tailwind-merge for conflict resolution.\n *\n * @example\n * ```tsx\n * cn('base-class', condition && 'conditional-class', className)\n * cn(['class1', 'class2'], { 'class3': true })\n * ```\n */\n\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merges classNames and resolves Tailwind class conflicts.\n *\n * Uses clsx for conditional class handling and tailwind-merge\n * to intelligently merge Tailwind classes, resolving conflicts\n * (e.g., 'p-2' and 'p-4' -> 'p-4').\n *\n * @param inputs - Class values to merge (strings, arrays, objects)\n * @returns Merged className string with conflicts resolved\n *\n * @example\n * ```tsx\n * // Basic usage\n * cn('base-class', 'another-class') // 'base-class another-class'\n *\n * // Conditional classes\n * cn('base', isActive && 'active', className)\n *\n * // Arrays and objects\n * cn(['class1', 'class2'], { 'class3': true, 'class4': false })\n *\n * // Tailwind conflict resolution\n * cn('p-2', 'p-4') // 'p-4' (p-2 is overridden)\n * cn('text-red-500', 'text-blue-500') // 'text-blue-500'\n * ```\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"],"names":["cn","inputs","twMerge","clsx"],"mappings":";;;AA0CO,SAASA,KAAMC,GAA8B;AAClD,SAAOC,EAAQC,EAAKF,CAAM,CAAC;AAC7B;"}

package/dist/granular/ui/utils/cva.js

@@ -0,0 +1,14 @@
+"use client";
+import { cva as o } from "class-variance-authority";
+import { cn as s } from "./cn.js";
+const v = (r, t) => {
+  const n = o(r, t);
+  return ((a) => {
+    const c = n(a);
+    return s(c);
+  });
+};
+export {
+  v as cva
+};
+//# sourceMappingURL=cva.js.map

package/dist/granular/ui/utils/cva.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cva.js","sources":["../../../../src/ui/utils/cva.ts"],"sourcesContent":["/**\n * CVA Utility - Class Variance Authority\n *\n * Type-safe utility for creating component variants with compound variants support.\n * Based on class-variance-authority but integrated with our design system.\n *\n * @example\n * ```tsx\n * const buttonVariants = cva('base-class', {\n *   variants: {\n *     variant: { primary: 'bg-blue-500', secondary: 'bg-gray-500' },\n *     size: { sm: 'text-sm', md: 'text-base' }\n *   },\n *   defaultVariants: { variant: 'primary', size: 'md' }\n * })\n * ```\n */\n\nimport { type VariantProps, cva as cvaLib } from \"class-variance-authority\";\nimport type { ClassValue } from \"clsx\";\nimport { cn } from \"./cn\";\n\n/**\n * Re-export VariantProps for type inference\n */\nexport type { VariantProps };\n\n/**\n * Creates a type-safe variant function with compound variants support.\n *\n * Integrates with our cn() utility for proper Tailwind conflict resolution.\n * This is a thin wrapper around class-variance-authority's cva function\n * that ensures cn() is used for final class merging.\n *\n * @param base - Base classes that always apply\n * @param config - Variant configuration with variants, compoundVariants, and defaultVariants\n * @returns Function that returns className based on variant props\n *\n * @example\n * ```tsx\n * // Simple variants\n * const buttonVariants = cva('base-class', {\n *   variants: {\n *     variant: {\n *       primary: 'bg-blue-500 text-white',\n *       secondary: 'bg-gray-500 text-white'\n *     },\n *     size: {\n *       sm: 'px-2 py-1 text-sm',\n *       md: 'px-4 py-2 text-base'\n *     }\n *   },\n *   defaultVariants: {\n *     variant: 'primary',\n *     size: 'md'\n *   }\n * });\n *\n * // Usage\n * buttonVariants({ variant: 'primary', size: 'sm' })\n *\n * // Compound variants\n * const badgeVariants = cva('base', {\n *   variants: {\n *     variant: { success: '', error: '' },\n *     style: { solid: '', outline: '' }\n *   },\n *   compoundVariants: [\n *     { variant: 'success', style: 'solid', class: 'bg-green-500' },\n *     { variant: 'error', style: 'outline', class: 'border-red-500' }\n *   ]\n * });\n * ```\n */\nexport const cva = <T extends Record<string, Record<string, ClassValue>>>(\n  base?: ClassValue,\n  config?: Parameters<typeof cvaLib<T>>[1],\n) => {\n  const variantFn = cvaLib(base, config);\n\n  // Wrap to ensure cn() is used for final merge\n  return ((props?: Parameters<typeof variantFn>[0]) => {\n    const variantClasses = variantFn(props);\n    return cn(variantClasses);\n  }) as typeof variantFn;\n};\n"],"names":["cva","base","config","variantFn","cvaLib","props","variantClasses","cn"],"mappings":";;;AA0EO,MAAMA,IAAM,CACjBC,GACAC,MACG;AACH,QAAMC,IAAYC,EAAOH,GAAMC,CAAM;AAGrC,UAAQ,CAACG,MAA4C;AACnD,UAAMC,IAAiBH,EAAUE,CAAK;AACtC,WAAOE,EAAGD,CAAc;AAAA,EAC1B;AACF;"}

package/dist/granular/ui/utils/mergeRefs.js

@@ -0,0 +1,11 @@
+"use client";
+function t(...n) {
+  return (f) => {
+    for (const e of n)
+      e && (typeof e == "function" ? e(f) : e.current = f);
+  };
+}
+export {
+  t as mergeRefs
+};
+//# sourceMappingURL=mergeRefs.js.map

package/dist/granular/ui/utils/mergeRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeRefs.js","sources":["../../../../src/ui/utils/mergeRefs.ts"],"sourcesContent":["import type { Ref, RefCallback } from \"react\";\n\n/**\n * Compose multiple refs into a single ref callback.\n *\n * Each input ref receives the node when the returned callback is invoked.\n * Callback refs are called with the node; object refs receive it via\n * `.current`; `null`/`undefined` entries are ignored. Designed for the\n * common cloneElement pattern where a parent owns an internal ref to a\n * trigger AND the consumer may have supplied their own ref on that\n * trigger — both need to land on the same node.\n *\n * Under React 19, a consumer's ref attached to `<Child ref={r}/>` flows\n * through `child.props.ref` after cloneElement; pass that into mergeRefs\n * alongside the parent's internal ref.\n */\nexport function mergeRefs<T>(\n  ...refs: Array<Ref<T> | undefined>\n): RefCallback<T> {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (!ref) continue;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else {\n        // RefObject is invariant on T; the only writable shape we accept\n        // is { current: T | null }, which matches both useRef and\n        // createRef outputs.\n        (ref as { current: T | null }).current = node;\n      }\n    }\n  };\n}\n"],"names":["mergeRefs","refs","node","ref"],"mappings":";AAgBO,SAASA,KACXC,GACa;AAChB,SAAO,CAACC,MAAmB;AACzB,eAAWC,KAAOF;AAChB,MAAKE,MACD,OAAOA,KAAQ,aACjBA,EAAID,CAAI,IAKPC,EAA8B,UAAUD;AAAA,EAG/C;AACF;"}

package/dist/granular/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>