@music-vine/cadence 2.4.0 → 2.5.0

package/dist/icons/custom/lightning-bolt.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../..";
+const LightningBolt = ({
+  className,
+  "aria-hidden": ariaHidden = true
+}) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("text-black dark:text-white", className),
+      "aria-hidden": ariaHidden,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M11.211 1.90927C11.3195 1.63336 11.1196 1.33325 10.8273 1.33325H5.95064C5.77278 1.33325 5.61489 1.44893 5.55865 1.62045L3.35489 8.34076C3.26571 8.61276 3.46486 8.89359 3.74689 8.89359H5.95001C6.21883 8.89359 6.41607 9.15039 6.35087 9.4155L5.18823 14.1427C5.08659 14.556 5.58494 14.8428 5.88127 14.5417L13.2115 7.09053C13.4718 6.82592 13.2875 6.37348 12.9193 6.37348H10.0646C9.77226 6.37348 9.57236 6.07336 9.68095 5.79747L11.211 1.90927Z",
+          stroke: "currentColor",
+          strokeWidth: "1.33",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
+export {
+  LightningBolt
+};
+//# sourceMappingURL=lightning-bolt.js.map

package/dist/icons/custom/lightning-bolt.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/icons/custom/lightning-bolt.tsx"],
+  "sourcesContent": ["import { cn } from \"../..\";\n\nexport const LightningBolt = ({\n  className,\n  'aria-hidden': ariaHidden = true,\n}: {\n  className?: string;\n  'aria-hidden'?: boolean;\n}) => {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn(\"text-black dark:text-white\", className)}\n      aria-hidden={ariaHidden}\n    >\n      <path\n        d=\"M11.211 1.90927C11.3195 1.63336 11.1196 1.33325 10.8273 1.33325H5.95064C5.77278 1.33325 5.61489 1.44893 5.55865 1.62045L3.35489 8.34076C3.26571 8.61276 3.46486 8.89359 3.74689 8.89359H5.95001C6.21883 8.89359 6.41607 9.15039 6.35087 9.4155L5.18823 14.1427C5.08659 14.556 5.58494 14.8428 5.88127 14.5417L13.2115 7.09053C13.4718 6.82592 13.2875 6.37348 12.9193 6.37348H10.0646C9.77226 6.37348 9.57236 6.07336 9.68095 5.79747L11.211 1.90927Z\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.33\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n};\n"],
+  "mappings": "AAmBM;AAnBN,SAAS,UAAU;AAEZ,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,eAAe,aAAa;AAC9B,MAGM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACrD,eAAa;AAAA,MAEb;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA;AAAA,MACjB;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/icons/custom/tick.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/icons/custom/tick.tsx"],
-  "sourcesContent": ["import { memo } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst _Tick = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    aria-hidden=\"true\"\n    className={className}\n    fill=\"none\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M16.6666 5L7.49992 14.1667L3.33325 10\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2.5\"\n    />\n  </svg>\n);\n\nconst Tick = memo(_Tick);\n\nexport { Tick };\n"],
-  "mappings": "AAeI;AAfJ,SAAS,YAAY;AAIrB,MAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,MACnC;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ;AAAA,IACA,MAAK;AAAA,IACL,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,OAAM;AAAA,IACL,GAAG;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,eAAc;AAAA,QACd,gBAAe;AAAA,QACf,aAAY;AAAA;AAAA,IACd;AAAA;AACF;AAGF,MAAM,OAAO,KAAK,KAAK;",
+  "sourcesContent": ["import { memo } from \"react\";\n\nconst _Tick = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    aria-hidden=\"true\"\n    className={className}\n    fill=\"none\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M16.6666 5L7.49992 14.1667L3.33325 10\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2.5\"\n    />\n  </svg>\n);\n\nconst Tick = memo(_Tick);\n\nexport { Tick };\n"],
+  "mappings": "AAaI;AAbJ,SAAS,YAAY;AAErB,MAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,MACnC;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ;AAAA,IACA,MAAK;AAAA,IACL,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,OAAM;AAAA,IACL,GAAG;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,eAAc;AAAA,QACd,gBAAe;AAAA,QACf,aAAY;AAAA;AAAA,IACd;AAAA;AACF;AAGF,MAAM,OAAO,KAAK,KAAK;",
   "names": []
 }

package/dist/icons/index.js

@@ -6,6 +6,7 @@ export * from "./custom/horizontal-orientation";
 export * from "./custom/pin";
 export * from "./custom/premium-star";
 export * from "./custom/social";
+export * from "./custom/lightning-bolt";
 export * from "./custom/square-aspect-ratio";
 import { Tick } from "./custom/tick";
 export * from "./custom/tick-in-circle";

package/dist/icons/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/icons/index.ts"],
-  "sourcesContent": ["/**\n * Cadence Icons\n *\n * All Lucide icons are re-exported, plus custom Uppbeat icons.\n *\n * @example\n * import { Play, Pause, Tick, PremiumStar } from '@music-vine/cadence/icons';\n */\n\n// Re-export ALL Lucide icons\nexport * from \"lucide-react\";\nexport * from \"./custom/boards-indicator\";\nexport * from \"./custom/download-history\";\nexport * from \"./custom/exclamation-mark-in-octagon\";\nexport * from \"./custom/horizontal-orientation\";\nexport * from \"./custom/pin\";\nexport * from \"./custom/premium-star\";\n// Social icons\nexport * from \"./custom/social\";\n// Custom Uppbeat icons\nexport * from \"./custom/square-aspect-ratio\";\nexport { Tick } from \"./custom/tick\";\nexport * from \"./custom/tick-in-circle\";\nexport * from \"./custom/tick-small\";\nexport * from \"./custom/ultra-wide-aspect-ratio\";\nexport * from \"./custom/uppbeat-credit\";\nexport * from \"./custom/vertical-orientation\";\nexport * from \"./custom/view-credit-note\";\n"],
-  "mappings": "AAUA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,SAAS,YAAY;AACrB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["/**\n * Cadence Icons\n *\n * All Lucide icons are re-exported, plus custom Uppbeat icons.\n *\n * @example\n * import { Play, Pause, Tick, PremiumStar } from '@music-vine/cadence/icons';\n */\n\n// Re-export ALL Lucide icons\nexport * from \"lucide-react\";\nexport * from \"./custom/boards-indicator\";\nexport * from \"./custom/download-history\";\nexport * from \"./custom/exclamation-mark-in-octagon\";\nexport * from \"./custom/horizontal-orientation\";\nexport * from \"./custom/pin\";\nexport * from \"./custom/premium-star\";\n// Social icons\nexport * from \"./custom/social\";\n// Custom Uppbeat icons\nexport * from \"./custom/lightning-bolt\";\nexport * from \"./custom/square-aspect-ratio\";\nexport { Tick } from \"./custom/tick\";\nexport * from \"./custom/tick-in-circle\";\nexport * from \"./custom/tick-small\";\nexport * from \"./custom/ultra-wide-aspect-ratio\";\nexport * from \"./custom/uppbeat-credit\";\nexport * from \"./custom/vertical-orientation\";\nexport * from \"./custom/view-credit-note\";\n"],
+  "mappings": "AAUA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,SAAS,YAAY;AACrB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/lib/utils.js

@@ -53,7 +53,9 @@ const customTwMerge = extendTailwindMerge((config) => {
 function cn(...inputs) {
   const classList = clsx(inputs);
   const expanded = classList.split(" ").flatMap((className) => {
-    const fluidWithModifier = className.match(/^~(@[\w-]+):~text-(\w+)\/(\w+)$/);
+    const fluidWithModifier = className.match(
+      /^~(@[\w-]+):~text-(\w+)\/(\w+)$/
+    );
     if (fluidWithModifier) {
       const [, modifier, startSize, endSize] = fluidWithModifier;
       const baseFluid = `~text-${startSize}/${endSize}`;

package/dist/lib/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/utils.ts"],
-  "sourcesContent": ["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge, mergeConfigs } from \"tailwind-merge\";\nimport type { Config } from \"tailwind-merge\";\n\n/**\n * Fluid-tailwind support for tailwind-merge.\n * Adapted from @fluid-tailwind/tailwind-merge source code.\n *\n * **How it works:**\n * 1. Fluid classes with modifiers (e.g., `~@md:~text-2xl/3xl`) are expanded\n *    to include both the modified and base versions\n * 2. This ensures they conflict at multiple modifier levels:\n *    - `~@md:~text-2xl/3xl` conflicts with `@md:text-5xl` (responsive)\n *    - `~@md:~text-2xl/3xl` conflicts with `text-4xl` (base)\n * 3. Simple fluid classes (e.g., `~text-2xl/3xl`) conflict with `text-4xl`\n *\n * **Supported patterns:**\n * - `~text-4xl/5xl` conflicts with `text-4xl` \u2713\n * - `~@md:~text-4xl/5xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl` \u2713\n * - Fluid text sizing with any container query breakpoint \u2713\n *\n * This implementation ensures that passing a fluid className overrides all\n * related text sizing classes, as expected in a component library.\n */\n\n/**\n * Validator for fluid text sizes with `/` separator.\n * This matches the full className including prefix and postfix.\n * Tailwind-merge class groups can receive full className for top-level validators.\n */\nconst isFluidTextSize = (classPart: string): boolean => {\n  // Match full fluid class patterns: ~text-X/Y\n  const fluidPattern = /^~text-([a-z0-9]+)\\/([a-z0-9]+)$/;\n  const match = classPart.match(fluidPattern);\n\n  if (!match) {\n    return false;\n  }\n\n  const [, startSize, endSize] = match;\n  const validSizes = [\n    \"xs\",\n    \"sm\",\n    \"base\",\n    \"lg\",\n    \"xl\",\n    \"2xl\",\n    \"3xl\",\n    \"4xl\",\n    \"5xl\",\n    \"6xl\",\n    \"7xl\",\n    \"8xl\",\n    \"9xl\",\n  ];\n\n  return validSizes.includes(startSize) && validSizes.includes(endSize);\n};\n\n/**\n * Custom tailwind-merge with fluid text size support.\n */\nconst customTwMerge = extendTailwindMerge((config) => {\n  return mergeConfigs(config, {\n    extend: {\n      classGroups: {\n        // Extend font-size class group to support fluid syntax\n        // Top-level validator receives the full className (e.g., \"~text-2xl/3xl\")\n        \"font-size\": [isFluidTextSize],\n      },\n    },\n    // Strip `~` prefixes from modifiers only (NOT from baseClassName)\n    // This allows ~@md:~text-4xl/5xl to conflict with @md:text-5xl\n    // After processing: ~@md:~text-4xl/5xl \u2192 modifiers:[@md], baseClassName:~text-4xl/5xl\n    // We keep the ~ on baseClassName because tailwind-merge needs it to recognize fluid syntax\n    experimentalParseClassName: ({ className, parseClassName }) => {\n      const parsed = parseClassName(className);\n\n      // Strip ~ prefix from each modifier (map, not filter!)\n      const cleanedModifiers = parsed.modifiers.map((modifier) =>\n        modifier.startsWith(\"~\") ? modifier.slice(1) : modifier\n      );\n\n      return {\n        ...parsed,\n        modifiers: cleanedModifiers,\n        // Keep baseClassName as-is (preserving ~) so fluid syntax isn't misinterpreted as line-height\n      };\n    },\n  });\n});\n\n/**\n * Merge Tailwind CSS classes with clsx and tailwind-merge.\n * Supports both standard Tailwind classes and fluid-tailwind text sizing.\n * This ensures proper handling of conflicting classes.\n *\n * Fluid classes are expanded to conflict at multiple modifier levels:\n * - `~@md:~text-2xl/3xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl`\n * - This ensures fluid classes override all related text sizing\n */\nexport function cn(...inputs: ClassValue[]) {\n  const classList = clsx(inputs);\n\n  // Expand fluid classes to conflict at multiple modifier levels\n  const expanded = classList.split(' ').flatMap(className => {\n    // Match fluid classes with modifiers: ~@md:~text-2xl/3xl\n    const fluidWithModifier = className.match(/^~(@[\\w-]+):~text-(\\w+)\\/(\\w+)$/);\n    if (fluidWithModifier) {\n      const [, modifier, startSize, endSize] = fluidWithModifier;\n      const baseFluid = `~text-${startSize}/${endSize}`;\n      // Return both the modified version and base version\n      // This makes it conflict with both @md:text-* and text-*\n      return [className, baseFluid];\n    }\n\n    return [className];\n  });\n\n  return customTwMerge(expanded.join(' '));\n}\n"],
-  "mappings": "AAAA,SAA0B,YAAY;AACtC,SAAS,qBAAqB,oBAAoB;AA6BlD,MAAM,kBAAkB,CAAC,cAA+B;AAEtD,QAAM,eAAe;AACrB,QAAM,QAAQ,UAAU,MAAM,YAAY;AAE1C,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,CAAC,EAAE,WAAW,OAAO,IAAI;AAC/B,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,WAAW,SAAS,SAAS,KAAK,WAAW,SAAS,OAAO;AACtE;AAKA,MAAM,gBAAgB,oBAAoB,CAAC,WAAW;AACpD,SAAO,aAAa,QAAQ;AAAA,IAC1B,QAAQ;AAAA,MACN,aAAa;AAAA;AAAA;AAAA,QAGX,aAAa,CAAC,eAAe;AAAA,MAC/B;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,4BAA4B,CAAC,EAAE,WAAW,eAAe,MAAM;AAC7D,YAAM,SAAS,eAAe,SAAS;AAGvC,YAAM,mBAAmB,OAAO,UAAU;AAAA,QAAI,CAAC,aAC7C,SAAS,WAAW,GAAG,IAAI,SAAS,MAAM,CAAC,IAAI;AAAA,MACjD;AAEA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,WAAW;AAAA;AAAA,MAEb;AAAA,IACF;AAAA,EACF,CAAC;AACH,CAAC;AAWM,SAAS,MAAM,QAAsB;AAC1C,QAAM,YAAY,KAAK,MAAM;AAG7B,QAAM,WAAW,UAAU,MAAM,GAAG,EAAE,QAAQ,eAAa;AAEzD,UAAM,oBAAoB,UAAU,MAAM,iCAAiC;AAC3E,QAAI,mBAAmB;AACrB,YAAM,CAAC,EAAE,UAAU,WAAW,OAAO,IAAI;AACzC,YAAM,YAAY,SAAS,SAAS,IAAI,OAAO;AAG/C,aAAO,CAAC,WAAW,SAAS;AAAA,IAC9B;AAEA,WAAO,CAAC,SAAS;AAAA,EACnB,CAAC;AAED,SAAO,cAAc,SAAS,KAAK,GAAG,CAAC;AACzC;",
+  "sourcesContent": ["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge, mergeConfigs } from \"tailwind-merge\";\n\n/**\n * Fluid-tailwind support for tailwind-merge.\n * Adapted from @fluid-tailwind/tailwind-merge source code.\n *\n * **How it works:**\n * 1. Fluid classes with modifiers (e.g., `~@md:~text-2xl/3xl`) are expanded\n *    to include both the modified and base versions\n * 2. This ensures they conflict at multiple modifier levels:\n *    - `~@md:~text-2xl/3xl` conflicts with `@md:text-5xl` (responsive)\n *    - `~@md:~text-2xl/3xl` conflicts with `text-4xl` (base)\n * 3. Simple fluid classes (e.g., `~text-2xl/3xl`) conflict with `text-4xl`\n *\n * **Supported patterns:**\n * - `~text-4xl/5xl` conflicts with `text-4xl` \u2713\n * - `~@md:~text-4xl/5xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl` \u2713\n * - Fluid text sizing with any container query breakpoint \u2713\n *\n * This implementation ensures that passing a fluid className overrides all\n * related text sizing classes, as expected in a component library.\n */\n\n/**\n * Validator for fluid text sizes with `/` separator.\n * This matches the full className including prefix and postfix.\n * Tailwind-merge class groups can receive full className for top-level validators.\n */\nconst isFluidTextSize = (classPart: string): boolean => {\n  // Match full fluid class patterns: ~text-X/Y\n  const fluidPattern = /^~text-([a-z0-9]+)\\/([a-z0-9]+)$/;\n  const match = classPart.match(fluidPattern);\n\n  if (!match) {\n    return false;\n  }\n\n  const [, startSize, endSize] = match;\n  const validSizes = [\n    \"xs\",\n    \"sm\",\n    \"base\",\n    \"lg\",\n    \"xl\",\n    \"2xl\",\n    \"3xl\",\n    \"4xl\",\n    \"5xl\",\n    \"6xl\",\n    \"7xl\",\n    \"8xl\",\n    \"9xl\",\n  ];\n\n  return validSizes.includes(startSize) && validSizes.includes(endSize);\n};\n\n/**\n * Custom tailwind-merge with fluid text size support.\n */\nconst customTwMerge = extendTailwindMerge((config) => {\n  return mergeConfigs(config, {\n    extend: {\n      classGroups: {\n        // Extend font-size class group to support fluid syntax\n        // Top-level validator receives the full className (e.g., \"~text-2xl/3xl\")\n        \"font-size\": [isFluidTextSize],\n      },\n    },\n    // Strip `~` prefixes from modifiers only (NOT from baseClassName)\n    // This allows ~@md:~text-4xl/5xl to conflict with @md:text-5xl\n    // After processing: ~@md:~text-4xl/5xl \u2192 modifiers:[@md], baseClassName:~text-4xl/5xl\n    // We keep the ~ on baseClassName because tailwind-merge needs it to recognize fluid syntax\n    experimentalParseClassName: ({ className, parseClassName }) => {\n      const parsed = parseClassName(className);\n\n      // Strip ~ prefix from each modifier (map, not filter!)\n      const cleanedModifiers = parsed.modifiers.map((modifier) =>\n        modifier.startsWith(\"~\") ? modifier.slice(1) : modifier\n      );\n\n      return {\n        ...parsed,\n        modifiers: cleanedModifiers,\n        // Keep baseClassName as-is (preserving ~) so fluid syntax isn't misinterpreted as line-height\n      };\n    },\n  });\n});\n\n/**\n * Merge Tailwind CSS classes with clsx and tailwind-merge.\n * Supports both standard Tailwind classes and fluid-tailwind text sizing.\n * This ensures proper handling of conflicting classes.\n *\n * Fluid classes are expanded to conflict at multiple modifier levels:\n * - `~@md:~text-2xl/3xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl`\n * - This ensures fluid classes override all related text sizing\n */\nexport function cn(...inputs: ClassValue[]) {\n  const classList = clsx(inputs);\n\n  // Expand fluid classes to conflict at multiple modifier levels\n  const expanded = classList.split(\" \").flatMap((className) => {\n    // Match fluid classes with modifiers: ~@md:~text-2xl/3xl\n    const fluidWithModifier = className.match(\n      /^~(@[\\w-]+):~text-(\\w+)\\/(\\w+)$/\n    );\n    if (fluidWithModifier) {\n      const [, modifier, startSize, endSize] = fluidWithModifier;\n      const baseFluid = `~text-${startSize}/${endSize}`;\n      // Return both the modified version and base version\n      // This makes it conflict with both @md:text-* and text-*\n      return [className, baseFluid];\n    }\n\n    return [className];\n  });\n\n  return customTwMerge(expanded.join(\" \"));\n}\n"],
+  "mappings": "AAAA,SAA0B,YAAY;AACtC,SAAS,qBAAqB,oBAAoB;AA4BlD,MAAM,kBAAkB,CAAC,cAA+B;AAEtD,QAAM,eAAe;AACrB,QAAM,QAAQ,UAAU,MAAM,YAAY;AAE1C,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,CAAC,EAAE,WAAW,OAAO,IAAI;AAC/B,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,WAAW,SAAS,SAAS,KAAK,WAAW,SAAS,OAAO;AACtE;AAKA,MAAM,gBAAgB,oBAAoB,CAAC,WAAW;AACpD,SAAO,aAAa,QAAQ;AAAA,IAC1B,QAAQ;AAAA,MACN,aAAa;AAAA;AAAA;AAAA,QAGX,aAAa,CAAC,eAAe;AAAA,MAC/B;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,4BAA4B,CAAC,EAAE,WAAW,eAAe,MAAM;AAC7D,YAAM,SAAS,eAAe,SAAS;AAGvC,YAAM,mBAAmB,OAAO,UAAU;AAAA,QAAI,CAAC,aAC7C,SAAS,WAAW,GAAG,IAAI,SAAS,MAAM,CAAC,IAAI;AAAA,MACjD;AAEA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,WAAW;AAAA;AAAA,MAEb;AAAA,IACF;AAAA,EACF,CAAC;AACH,CAAC;AAWM,SAAS,MAAM,QAAsB;AAC1C,QAAM,YAAY,KAAK,MAAM;AAG7B,QAAM,WAAW,UAAU,MAAM,GAAG,EAAE,QAAQ,CAAC,cAAc;AAE3D,UAAM,oBAAoB,UAAU;AAAA,MAClC;AAAA,IACF;AACA,QAAI,mBAAmB;AACrB,YAAM,CAAC,EAAE,UAAU,WAAW,OAAO,IAAI;AACzC,YAAM,YAAY,SAAS,SAAS,IAAI,OAAO;AAG/C,aAAO,CAAC,WAAW,SAAS;AAAA,IAC9B;AAEA,WAAO,CAAC,SAAS;AAAA,EACnB,CAAC;AAED,SAAO,cAAc,SAAS,KAAK,GAAG,CAAC;AACzC;",
   "names": []
 }

package/dist/styles/index.css

@@ -5,13 +5,13 @@
 @layer base {
   :root {
     /* Brand Colors - Themeable */
-    --brand-primary: #F23D75;
-    --brand-primary-hover: #DF1F64;
-    --brand-primary-active: #BC1454;
-    --brand-secondary: #FFF1F4;
-    --brand-secondary-hover: #FFE4EA;
-    --background: #FFF;
-    --foreground: #151A20;
+    --brand-primary: #f23d75;
+    --brand-primary-hover: #df1f64;
+    --brand-primary-active: #bc1454;
+    --brand-secondary: #fff1f4;
+    --brand-secondary-hover: #ffe4ea;
+    --background: #fff;
+    --foreground: #151a20;
 
     /* Focus Ring - Follows brand color */
     --focus-ring: var(--brand-primary);
@@ -20,13 +20,13 @@
 
   .theme-dark {
     /* Brand Colors (same in dark mode) */
-    --brand-primary: #F23D75;
-    --brand-primary-hover: #DF1F64;
-    --brand-primary-active: #BC1454;
-    --brand-secondary: #461F34;
-    --brand-secondary-hover: #5F152E;
-    --background: #151A20;
-    --foreground: #FFF;
+    --brand-primary: #f23d75;
+    --brand-primary-hover: #df1f64;
+    --brand-primary-active: #bc1454;
+    --brand-secondary: #461f34;
+    --brand-secondary-hover: #5f152e;
+    --background: #151a20;
+    --foreground: #fff;
 
     /* Focus Ring - Follows brand color */
     --focus-ring: var(--brand-primary);

package/dist/styles/index.v4.css

@@ -19,13 +19,13 @@
 @layer base {
   :root {
     /* Brand Colors - Themeable */
-    --brand-primary: #F23D75;
-    --brand-primary-hover: #DF1F64;
-    --brand-primary-active: #BC1454;
-    --brand-secondary: #FFF1F4;
-    --brand-secondary-hover: #FFE4EA;
-    --background: #FFF;
-    --foreground: #151A20;
+    --brand-primary: #f23d75;
+    --brand-primary-hover: #df1f64;
+    --brand-primary-active: #bc1454;
+    --brand-secondary: #fff1f4;
+    --brand-secondary-hover: #ffe4ea;
+    --background: #fff;
+    --foreground: #151a20;
 
     /* Focus Ring - Follows brand color */
     --focus-ring: var(--brand-primary);
@@ -34,13 +34,13 @@
 
   .theme-dark {
     /* Brand Colors (same in dark mode) */
-    --brand-primary: #F23D75;
-    --brand-primary-hover: #DF1F64;
-    --brand-primary-active: #BC1454;
-    --brand-secondary: #461F34;
-    --brand-secondary-hover: #5F152E;
-    --background: #151A20;
-    --foreground: #FFF;
+    --brand-primary: #f23d75;
+    --brand-primary-hover: #df1f64;
+    --brand-primary-active: #bc1454;
+    --brand-secondary: #461f34;
+    --brand-secondary-hover: #5f152e;
+    --background: #151a20;
+    --foreground: #fff;
 
     /* Focus Ring - Follows brand color */
     --focus-ring: var(--brand-primary);

package/dist/test/setup.js

@@ -1,6 +1,6 @@
 import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
-import { afterEach, beforeAll, afterAll, vi } from "vitest";
+import { afterAll, afterEach, beforeAll, vi } from "vitest";
 afterEach(() => {
   cleanup();
 });
@@ -52,7 +52,9 @@ const originalError = console.error;
 const originalWarn = console.warn;
 beforeAll(() => {
   console.error = (...args) => {
-    if (typeof args[0] === "string" && (args[0].includes("ReactDOM.render") || args[0].includes("Not implemented: HTMLFormElement.prototype.requestSubmit"))) {
+    if (typeof args[0] === "string" && (args[0].includes("ReactDOM.render") || args[0].includes(
+      "Not implemented: HTMLFormElement.prototype.requestSubmit"
+    ))) {
       return;
     }
     originalError.call(console, ...args);

package/dist/test/setup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/test/setup.ts"],
-  "sourcesContent": ["import '@testing-library/jest-dom/vitest';\nimport { cleanup } from '@testing-library/react';\nimport { afterEach, beforeAll, afterAll, vi } from 'vitest';\n\nafterEach(() => {\n  cleanup();\n});\n\n// Mock IntersectionObserver (Radix Popover, ContextMenu)\nglobal.IntersectionObserver = vi.fn().mockImplementation(() => ({\n  observe: vi.fn(),\n  unobserve: vi.fn(),\n  disconnect: vi.fn(),\n  root: null,\n  rootMargin: '',\n  thresholds: [],\n  takeRecords: vi.fn(),\n}));\n\n// Mock ResizeObserver (Dialog, Drawer, Popover positioning)\nglobal.ResizeObserver = vi.fn().mockImplementation(() => ({\n  observe: vi.fn(),\n  unobserve: vi.fn(),\n  disconnect: vi.fn(),\n}));\n\n// Mock matchMedia (responsive components, dark mode)\nObject.defineProperty(window, 'matchMedia', {\n  writable: true,\n  value: vi.fn().mockImplementation((query: string) => ({\n    matches: false,\n    media: query,\n    onchange: null,\n    addListener: vi.fn(),\n    removeListener: vi.fn(),\n    addEventListener: vi.fn(),\n    removeEventListener: vi.fn(),\n    dispatchEvent: vi.fn(),\n  })),\n});\n\n// Mock scrollTo (Dialog scroll locking)\nglobal.scrollTo = vi.fn();\n\n// Mock HTMLElement.prototype methods used by Radix UI\nHTMLElement.prototype.hasPointerCapture = vi.fn();\nHTMLElement.prototype.scrollIntoView = vi.fn();\nHTMLElement.prototype.releasePointerCapture = vi.fn();\nHTMLElement.prototype.setPointerCapture = vi.fn();\n\n// Mock getComputedStyle for transform calculations (Drawer/Vaul)\nconst originalGetComputedStyle = window.getComputedStyle;\nwindow.getComputedStyle = (element: Element) => {\n  const style = originalGetComputedStyle(element);\n  // Return a proxy that includes transform properties\n  return new Proxy(style, {\n    get(target, prop) {\n      if (prop === 'transform' || prop === 'webkitTransform' || prop === 'mozTransform') {\n        return 'none';\n      }\n      return target[prop as keyof CSSStyleDeclaration];\n    },\n  });\n};\n\n// Suppress known test warnings\nconst originalError = console.error;\nconst originalWarn = console.warn;\n\nbeforeAll(() => {\n  console.error = (...args: unknown[]) => {\n    if (\n      typeof args[0] === 'string' &&\n      (args[0].includes('ReactDOM.render') ||\n        args[0].includes('Not implemented: HTMLFormElement.prototype.requestSubmit'))\n    ) {\n      return;\n    }\n    originalError.call(console, ...args);\n  };\n\n  console.warn = (...args: unknown[]) => {\n    if (typeof args[0] === 'string' && args[0].includes('When server rendering')) {\n      return;\n    }\n    originalWarn.call(console, ...args);\n  };\n});\n\nafterAll(() => {\n  console.error = originalError;\n  console.warn = originalWarn;\n});\n"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,eAAe;AACxB,SAAS,WAAW,WAAW,UAAU,UAAU;AAEnD,UAAU,MAAM;AACd,UAAQ;AACV,CAAC;AAGD,OAAO,uBAAuB,GAAG,GAAG,EAAE,mBAAmB,OAAO;AAAA,EAC9D,SAAS,GAAG,GAAG;AAAA,EACf,WAAW,GAAG,GAAG;AAAA,EACjB,YAAY,GAAG,GAAG;AAAA,EAClB,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,YAAY,CAAC;AAAA,EACb,aAAa,GAAG,GAAG;AACrB,EAAE;AAGF,OAAO,iBAAiB,GAAG,GAAG,EAAE,mBAAmB,OAAO;AAAA,EACxD,SAAS,GAAG,GAAG;AAAA,EACf,WAAW,GAAG,GAAG;AAAA,EACjB,YAAY,GAAG,GAAG;AACpB,EAAE;AAGF,OAAO,eAAe,QAAQ,cAAc;AAAA,EAC1C,UAAU;AAAA,EACV,OAAO,GAAG,GAAG,EAAE,mBAAmB,CAAC,WAAmB;AAAA,IACpD,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa,GAAG,GAAG;AAAA,IACnB,gBAAgB,GAAG,GAAG;AAAA,IACtB,kBAAkB,GAAG,GAAG;AAAA,IACxB,qBAAqB,GAAG,GAAG;AAAA,IAC3B,eAAe,GAAG,GAAG;AAAA,EACvB,EAAE;AACJ,CAAC;AAGD,OAAO,WAAW,GAAG,GAAG;AAGxB,YAAY,UAAU,oBAAoB,GAAG,GAAG;AAChD,YAAY,UAAU,iBAAiB,GAAG,GAAG;AAC7C,YAAY,UAAU,wBAAwB,GAAG,GAAG;AACpD,YAAY,UAAU,oBAAoB,GAAG,GAAG;AAGhD,MAAM,2BAA2B,OAAO;AACxC,OAAO,mBAAmB,CAAC,YAAqB;AAC9C,QAAM,QAAQ,yBAAyB,OAAO;AAE9C,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,MAAM;AAChB,UAAI,SAAS,eAAe,SAAS,qBAAqB,SAAS,gBAAgB;AACjF,eAAO;AAAA,MACT;AACA,aAAO,OAAO,IAAiC;AAAA,IACjD;AAAA,EACF,CAAC;AACH;AAGA,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,eAAe,QAAQ;AAE7B,UAAU,MAAM;AACd,UAAQ,QAAQ,IAAI,SAAoB;AACtC,QACE,OAAO,KAAK,CAAC,MAAM,aAClB,KAAK,CAAC,EAAE,SAAS,iBAAiB,KACjC,KAAK,CAAC,EAAE,SAAS,0DAA0D,IAC7E;AACA;AAAA,IACF;AACA,kBAAc,KAAK,SAAS,GAAG,IAAI;AAAA,EACrC;AAEA,UAAQ,OAAO,IAAI,SAAoB;AACrC,QAAI,OAAO,KAAK,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE,SAAS,uBAAuB,GAAG;AAC5E;AAAA,IACF;AACA,iBAAa,KAAK,SAAS,GAAG,IAAI;AAAA,EACpC;AACF,CAAC;AAED,SAAS,MAAM;AACb,UAAQ,QAAQ;AAChB,UAAQ,OAAO;AACjB,CAAC;",
+  "sourcesContent": ["import \"@testing-library/jest-dom/vitest\";\nimport { cleanup } from \"@testing-library/react\";\nimport { afterAll, afterEach, beforeAll, vi } from \"vitest\";\n\nafterEach(() => {\n  cleanup();\n});\n\n// Mock IntersectionObserver (Radix Popover, ContextMenu)\nglobal.IntersectionObserver = vi.fn().mockImplementation(() => ({\n  observe: vi.fn(),\n  unobserve: vi.fn(),\n  disconnect: vi.fn(),\n  root: null,\n  rootMargin: \"\",\n  thresholds: [],\n  takeRecords: vi.fn(),\n}));\n\n// Mock ResizeObserver (Dialog, Drawer, Popover positioning)\nglobal.ResizeObserver = vi.fn().mockImplementation(() => ({\n  observe: vi.fn(),\n  unobserve: vi.fn(),\n  disconnect: vi.fn(),\n}));\n\n// Mock matchMedia (responsive components, dark mode)\nObject.defineProperty(window, \"matchMedia\", {\n  writable: true,\n  value: vi.fn().mockImplementation((query: string) => ({\n    matches: false,\n    media: query,\n    onchange: null,\n    addListener: vi.fn(),\n    removeListener: vi.fn(),\n    addEventListener: vi.fn(),\n    removeEventListener: vi.fn(),\n    dispatchEvent: vi.fn(),\n  })),\n});\n\n// Mock scrollTo (Dialog scroll locking)\nglobal.scrollTo = vi.fn();\n\n// Mock HTMLElement.prototype methods used by Radix UI\nHTMLElement.prototype.hasPointerCapture = vi.fn();\nHTMLElement.prototype.scrollIntoView = vi.fn();\nHTMLElement.prototype.releasePointerCapture = vi.fn();\nHTMLElement.prototype.setPointerCapture = vi.fn();\n\n// Mock getComputedStyle for transform calculations (Drawer/Vaul)\nconst originalGetComputedStyle = window.getComputedStyle;\nwindow.getComputedStyle = (element: Element) => {\n  const style = originalGetComputedStyle(element);\n  // Return a proxy that includes transform properties\n  return new Proxy(style, {\n    get(target, prop) {\n      if (\n        prop === \"transform\" ||\n        prop === \"webkitTransform\" ||\n        prop === \"mozTransform\"\n      ) {\n        return \"none\";\n      }\n      return target[prop as keyof CSSStyleDeclaration];\n    },\n  });\n};\n\n// Suppress known test warnings\nconst originalError = console.error;\nconst originalWarn = console.warn;\n\nbeforeAll(() => {\n  console.error = (...args: unknown[]) => {\n    if (\n      typeof args[0] === \"string\" &&\n      (args[0].includes(\"ReactDOM.render\") ||\n        args[0].includes(\n          \"Not implemented: HTMLFormElement.prototype.requestSubmit\"\n        ))\n    ) {\n      return;\n    }\n    originalError.call(console, ...args);\n  };\n\n  console.warn = (...args: unknown[]) => {\n    if (\n      typeof args[0] === \"string\" &&\n      args[0].includes(\"When server rendering\")\n    ) {\n      return;\n    }\n    originalWarn.call(console, ...args);\n  };\n});\n\nafterAll(() => {\n  console.error = originalError;\n  console.warn = originalWarn;\n});\n"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,eAAe;AACxB,SAAS,UAAU,WAAW,WAAW,UAAU;AAEnD,UAAU,MAAM;AACd,UAAQ;AACV,CAAC;AAGD,OAAO,uBAAuB,GAAG,GAAG,EAAE,mBAAmB,OAAO;AAAA,EAC9D,SAAS,GAAG,GAAG;AAAA,EACf,WAAW,GAAG,GAAG;AAAA,EACjB,YAAY,GAAG,GAAG;AAAA,EAClB,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,YAAY,CAAC;AAAA,EACb,aAAa,GAAG,GAAG;AACrB,EAAE;AAGF,OAAO,iBAAiB,GAAG,GAAG,EAAE,mBAAmB,OAAO;AAAA,EACxD,SAAS,GAAG,GAAG;AAAA,EACf,WAAW,GAAG,GAAG;AAAA,EACjB,YAAY,GAAG,GAAG;AACpB,EAAE;AAGF,OAAO,eAAe,QAAQ,cAAc;AAAA,EAC1C,UAAU;AAAA,EACV,OAAO,GAAG,GAAG,EAAE,mBAAmB,CAAC,WAAmB;AAAA,IACpD,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa,GAAG,GAAG;AAAA,IACnB,gBAAgB,GAAG,GAAG;AAAA,IACtB,kBAAkB,GAAG,GAAG;AAAA,IACxB,qBAAqB,GAAG,GAAG;AAAA,IAC3B,eAAe,GAAG,GAAG;AAAA,EACvB,EAAE;AACJ,CAAC;AAGD,OAAO,WAAW,GAAG,GAAG;AAGxB,YAAY,UAAU,oBAAoB,GAAG,GAAG;AAChD,YAAY,UAAU,iBAAiB,GAAG,GAAG;AAC7C,YAAY,UAAU,wBAAwB,GAAG,GAAG;AACpD,YAAY,UAAU,oBAAoB,GAAG,GAAG;AAGhD,MAAM,2BAA2B,OAAO;AACxC,OAAO,mBAAmB,CAAC,YAAqB;AAC9C,QAAM,QAAQ,yBAAyB,OAAO;AAE9C,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,MAAM;AAChB,UACE,SAAS,eACT,SAAS,qBACT,SAAS,gBACT;AACA,eAAO;AAAA,MACT;AACA,aAAO,OAAO,IAAiC;AAAA,IACjD;AAAA,EACF,CAAC;AACH;AAGA,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,eAAe,QAAQ;AAE7B,UAAU,MAAM;AACd,UAAQ,QAAQ,IAAI,SAAoB;AACtC,QACE,OAAO,KAAK,CAAC,MAAM,aAClB,KAAK,CAAC,EAAE,SAAS,iBAAiB,KACjC,KAAK,CAAC,EAAE;AAAA,MACN;AAAA,IACF,IACF;AACA;AAAA,IACF;AACA,kBAAc,KAAK,SAAS,GAAG,IAAI;AAAA,EACrC;AAEA,UAAQ,OAAO,IAAI,SAAoB;AACrC,QACE,OAAO,KAAK,CAAC,MAAM,YACnB,KAAK,CAAC,EAAE,SAAS,uBAAuB,GACxC;AACA;AAAA,IACF;AACA,iBAAa,KAAK,SAAS,GAAG,IAAI;AAAA,EACpC;AACF,CAAC;AAED,SAAS,MAAM;AACb,UAAQ,QAAQ;AAChB,UAAQ,OAAO;AACjB,CAAC;",
   "names": []
 }

package/dist/theme/index.js

@@ -6,16 +6,32 @@ const radiusValues = {
   xl: "16px"
 };
 function lightenColor(hex, percent = 20) {
-  const num = parseInt(hex.replace("#", ""), 16);
-  const r = Math.min(255, Math.floor((num >> 16) + (255 - (num >> 16)) * percent / 100));
-  const g = Math.min(255, Math.floor((num >> 8 & 255) + (255 - (num >> 8 & 255)) * percent / 100));
-  const b = Math.min(255, Math.floor((num & 255) + (255 - (num & 255)) * percent / 100));
+  const num = Number.parseInt(hex.replace("#", ""), 16);
+  const r = Math.min(
+    255,
+    Math.floor((num >> 16) + (255 - (num >> 16)) * percent / 100)
+  );
+  const g = Math.min(
+    255,
+    Math.floor(
+      (num >> 8 & 255) + (255 - (num >> 8 & 255)) * percent / 100
+    )
+  );
+  const b = Math.min(
+    255,
+    Math.floor(
+      (num & 255) + (255 - (num & 255)) * percent / 100
+    )
+  );
   return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
 }
 function darkenColor(hex, percent = 20) {
-  const num = parseInt(hex.replace("#", ""), 16);
+  const num = Number.parseInt(hex.replace("#", ""), 16);
   const r = Math.max(0, Math.floor((num >> 16) * (1 - percent / 100)));
-  const g = Math.max(0, Math.floor((num >> 8 & 255) * (1 - percent / 100)));
+  const g = Math.max(
+    0,
+    Math.floor((num >> 8 & 255) * (1 - percent / 100))
+  );
   const b = Math.max(0, Math.floor((num & 255) * (1 - percent / 100)));
   return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
 }
@@ -24,10 +40,18 @@ function createTheme(config = {}) {
   const cssVariables = [];
   if (config.brand?.primary) {
     cssVariables.push(`--brand-primary: ${config.brand.primary};`);
-    cssVariables.push(`--brand-primary-hover: ${config.brand.accent || darkenColor(config.brand.primary, 15)};`);
-    cssVariables.push(`--brand-primary-active: ${darkenColor(config.brand.primary, 25)};`);
-    cssVariables.push(`--brand-secondary: ${lightenColor(config.brand.primary, 40)};`);
-    cssVariables.push(`--brand-secondary-hover: ${lightenColor(config.brand.primary, 30)};`);
+    cssVariables.push(
+      `--brand-primary-hover: ${config.brand.accent || darkenColor(config.brand.primary, 15)};`
+    );
+    cssVariables.push(
+      `--brand-primary-active: ${darkenColor(config.brand.primary, 25)};`
+    );
+    cssVariables.push(
+      `--brand-secondary: ${lightenColor(config.brand.primary, 40)};`
+    );
+    cssVariables.push(
+      `--brand-secondary-hover: ${lightenColor(config.brand.primary, 30)};`
+    );
     cssVariables.push(`--text-brand: ${config.brand.primary};`);
     cssVariables.push(`--border-brand: ${config.brand.primary};`);
     cssVariables.push(`--focus-ring: ${config.brand.primary};`);
@@ -37,7 +61,9 @@ function createTheme(config = {}) {
   }
   if (config.colors?.success) {
     cssVariables.push(`--success: ${config.colors.success};`);
-    cssVariables.push(`--success-dark: ${darkenColor(config.colors.success, 15)};`);
+    cssVariables.push(
+      `--success-dark: ${darkenColor(config.colors.success, 15)};`
+    );
   }
   if (config.colors?.error) {
     cssVariables.push(`--error: ${config.colors.error};`);
@@ -52,8 +78,8 @@ function createTheme(config = {}) {
   if (config.radius) {
     const radiusValue = radiusValues[config.radius];
     cssVariables.push(`--radius-default: ${radiusValue};`);
-    cssVariables.push(`--radius-sm: ${parseInt(radiusValue) / 2}px;`);
-    cssVariables.push(`--radius-lg: ${parseInt(radiusValue) * 1.5}px;`);
+    cssVariables.push(`--radius-sm: ${Number.parseInt(radiusValue) / 2}px;`);
+    cssVariables.push(`--radius-lg: ${Number.parseInt(radiusValue) * 1.5}px;`);
   }
   if (config.fonts?.sans) {
     cssVariables.push(`--font-sans: ${config.fonts.sans};`);

package/dist/theme/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/theme/index.ts"],
-  "sourcesContent": ["/**\n * @module Theme\n *\n * Theme customization utilities for Cadence Design System.\n *\n * @example\n * // Basic usage\n * import { createTheme } from '@music-vine/cadence/theme';\n *\n * const customTheme = createTheme({\n *   brand: {\n *     primary: '#FF6B6B',\n *     accent: '#4ECDC4',\n *   }\n * });\n *\n * // Apply to root or specific container\n * <div className={customTheme}>\n *   <Button>Themed Button</Button>\n * </div>\n *\n * @example\n * // Complete customization\n * const theme = createTheme({\n *   brand: {\n *     primary: '#FF6B6B',\n *     accent: '#4ECDC4',\n *   },\n *   colors: {\n *     success: '#51CF66',\n *     error: '#FF6B6B',\n *     warning: '#FFD93D',\n *     info: '#74C0FC',\n *   },\n *   radius: 'lg',\n *   fonts: {\n *     sans: 'Inter, system-ui, sans-serif',\n *     heading: 'Poppins, system-ui, sans-serif',\n *   },\n * });\n */\n\n/**\n * Configuration for brand colors\n */\nexport interface BrandColors {\n  /** Primary brand color (used for primary buttons, links, focus rings) */\n  primary?: string;\n  /** Accent/hover color for primary brand interactions */\n  accent?: string;\n}\n\n/**\n * Configuration for status/semantic colors\n */\nexport interface StatusColors {\n  /** Success state color */\n  success?: string;\n  /** Error state color */\n  error?: string;\n  /** Warning state color */\n  warning?: string;\n  /** Info state color */\n  info?: string;\n}\n\n/**\n * Configuration for font families\n */\nexport interface FontConfig {\n  /** Sans-serif font family for body text */\n  sans?: string;\n  /** Font family for headings */\n  heading?: string;\n}\n\n/**\n * Border radius presets\n */\nexport type RadiusPreset = 'none' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Complete theme configuration\n */\nexport interface ThemeConfig {\n  /** Brand color overrides */\n  brand?: BrandColors;\n  /** Status color overrides */\n  colors?: StatusColors;\n  /** Border radius preset */\n  radius?: RadiusPreset;\n  /** Font family overrides */\n  fonts?: FontConfig;\n}\n\n/**\n * Border radius values mapped to CSS values\n */\nconst radiusValues: Record<RadiusPreset, string> = {\n  none: '0px',\n  sm: '4px',\n  md: '8px',\n  lg: '12px',\n  xl: '16px',\n};\n\n/**\n * Generates a lightened version of a hex color\n * Simple implementation - for production, consider using a color manipulation library\n */\nfunction lightenColor(hex: string, percent: number = 20): string {\n  const num = parseInt(hex.replace('#', ''), 16);\n  const r = Math.min(255, Math.floor((num >> 16) + ((255 - (num >> 16)) * percent) / 100));\n  const g = Math.min(255, Math.floor(((num >> 8) & 0x00FF) + ((255 - ((num >> 8) & 0x00FF)) * percent) / 100));\n  const b = Math.min(255, Math.floor((num & 0x0000FF) + ((255 - (num & 0x0000FF)) * percent) / 100));\n  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;\n}\n\n/**\n * Generates a darkened version of a hex color\n */\nfunction darkenColor(hex: string, percent: number = 20): string {\n  const num = parseInt(hex.replace('#', ''), 16);\n  const r = Math.max(0, Math.floor((num >> 16) * (1 - percent / 100)));\n  const g = Math.max(0, Math.floor(((num >> 8) & 0x00FF) * (1 - percent / 100)));\n  const b = Math.max(0, Math.floor((num & 0x0000FF) * (1 - percent / 100)));\n  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;\n}\n\n/**\n * Creates a custom theme by generating CSS variables based on the provided configuration.\n * Returns a className that can be applied to any container element.\n *\n * @param config - Theme configuration object\n * @returns CSS class name to apply to container\n *\n * @example\n * const theme = createTheme({\n *   brand: { primary: '#FF6B6B' }\n * });\n *\n * <div className={theme}>\n *   <Button variant=\"brand\">Custom Themed Button</Button>\n * </div>\n */\nexport function createTheme(config: ThemeConfig = {}): string {\n  const themeId = `cadence-theme-${Math.random().toString(36).substring(2, 11)}`;\n  const cssVariables: string[] = [];\n\n  // Brand colors\n  if (config.brand?.primary) {\n    cssVariables.push(`--brand-primary: ${config.brand.primary};`);\n    cssVariables.push(`--brand-primary-hover: ${config.brand.accent || darkenColor(config.brand.primary, 15)};`);\n    cssVariables.push(`--brand-primary-active: ${darkenColor(config.brand.primary, 25)};`);\n    cssVariables.push(`--brand-secondary: ${lightenColor(config.brand.primary, 40)};`);\n    cssVariables.push(`--brand-secondary-hover: ${lightenColor(config.brand.primary, 30)};`);\n    cssVariables.push(`--text-brand: ${config.brand.primary};`);\n    cssVariables.push(`--border-brand: ${config.brand.primary};`);\n    cssVariables.push(`--focus-ring: ${config.brand.primary};`);\n  }\n\n  if (config.brand?.accent) {\n    cssVariables.push(`--brand-primary-hover: ${config.brand.accent};`);\n  }\n\n  // Status colors\n  if (config.colors?.success) {\n    cssVariables.push(`--success: ${config.colors.success};`);\n    cssVariables.push(`--success-dark: ${darkenColor(config.colors.success, 15)};`);\n  }\n\n  if (config.colors?.error) {\n    cssVariables.push(`--error: ${config.colors.error};`);\n    cssVariables.push(`--error-dark: ${darkenColor(config.colors.error, 15)};`);\n  }\n\n  if (config.colors?.warning) {\n    cssVariables.push(`--warning: ${config.colors.warning};`);\n  }\n\n  if (config.colors?.info) {\n    cssVariables.push(`--info: ${config.colors.info};`);\n  }\n\n  // Border radius\n  if (config.radius) {\n    const radiusValue = radiusValues[config.radius];\n    cssVariables.push(`--radius-default: ${radiusValue};`);\n    cssVariables.push(`--radius-sm: ${parseInt(radiusValue) / 2}px;`);\n    cssVariables.push(`--radius-lg: ${parseInt(radiusValue) * 1.5}px;`);\n  }\n\n  // Font families\n  if (config.fonts?.sans) {\n    cssVariables.push(`--font-sans: ${config.fonts.sans};`);\n  }\n\n  if (config.fonts?.heading) {\n    cssVariables.push(`--font-heading: ${config.fonts.heading};`);\n  }\n\n  // Inject styles into document head\n  if (typeof document !== 'undefined') {\n    const styleId = `${themeId}-styles`;\n    let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n    if (!styleElement) {\n      styleElement = document.createElement('style');\n      styleElement.id = styleId;\n      document.head.appendChild(styleElement);\n    }\n\n    styleElement.textContent = `\n      .${themeId} {\n        ${cssVariables.join('\\n        ')}\n      }\n    `;\n  }\n\n  return themeId;\n}\n\n/**\n * Type guard to check if a string is a valid hex color\n */\nexport function isValidHexColor(color: string): boolean {\n  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);\n}\n\n/**\n * Pre-configured theme presets for common use cases\n */\nexport const themePresets = {\n  /**\n   * Default Uppbeat theme (pink brand color)\n   */\n  uppbeat: {\n    brand: {\n      primary: '#F23D75',\n      accent: '#DF1F64',\n    },\n  },\n\n  /**\n   * Music Vine theme (coral pink brand color)\n   */\n  musicVine: {\n    brand: {\n      primary: '#FF5F6E',\n      accent: '#671920',\n    },\n  },\n} satisfies Record<string, ThemeConfig>;\n\n/**\n * Helper to create a theme from a preset\n *\n * @example\n * const theme = createThemeFromPreset('ocean');\n * <div className={theme}>...</div>\n */\nexport function createThemeFromPreset(preset: keyof typeof themePresets): string {\n  return createTheme(themePresets[preset]);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * @module Theme\n *\n * Theme customization utilities for Cadence Design System.\n *\n * @example\n * // Basic usage\n * import { createTheme } from '@music-vine/cadence/theme';\n *\n * const customTheme = createTheme({\n *   brand: {\n *     primary: '#FF6B6B',\n *     accent: '#4ECDC4',\n *   }\n * });\n *\n * // Apply to root or specific container\n * <div className={customTheme}>\n *   <Button>Themed Button</Button>\n * </div>\n *\n * @example\n * // Complete customization\n * const theme = createTheme({\n *   brand: {\n *     primary: '#FF6B6B',\n *     accent: '#4ECDC4',\n *   },\n *   colors: {\n *     success: '#51CF66',\n *     error: '#FF6B6B',\n *     warning: '#FFD93D',\n *     info: '#74C0FC',\n *   },\n *   radius: 'lg',\n *   fonts: {\n *     sans: 'Inter, system-ui, sans-serif',\n *     heading: 'Poppins, system-ui, sans-serif',\n *   },\n * });\n */\n\n/**\n * Configuration for brand colors\n */\nexport interface BrandColors {\n  /** Primary brand color (used for primary buttons, links, focus rings) */\n  primary?: string;\n  /** Accent/hover color for primary brand interactions */\n  accent?: string;\n}\n\n/**\n * Configuration for status/semantic colors\n */\nexport interface StatusColors {\n  /** Success state color */\n  success?: string;\n  /** Error state color */\n  error?: string;\n  /** Warning state color */\n  warning?: string;\n  /** Info state color */\n  info?: string;\n}\n\n/**\n * Configuration for font families\n */\nexport interface FontConfig {\n  /** Sans-serif font family for body text */\n  sans?: string;\n  /** Font family for headings */\n  heading?: string;\n}\n\n/**\n * Border radius presets\n */\nexport type RadiusPreset = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Complete theme configuration\n */\nexport interface ThemeConfig {\n  /** Brand color overrides */\n  brand?: BrandColors;\n  /** Status color overrides */\n  colors?: StatusColors;\n  /** Border radius preset */\n  radius?: RadiusPreset;\n  /** Font family overrides */\n  fonts?: FontConfig;\n}\n\n/**\n * Border radius values mapped to CSS values\n */\nconst radiusValues: Record<RadiusPreset, string> = {\n  none: \"0px\",\n  sm: \"4px\",\n  md: \"8px\",\n  lg: \"12px\",\n  xl: \"16px\",\n};\n\n/**\n * Generates a lightened version of a hex color\n * Simple implementation - for production, consider using a color manipulation library\n */\nfunction lightenColor(hex: string, percent = 20): string {\n  const num = Number.parseInt(hex.replace(\"#\", \"\"), 16);\n  const r = Math.min(\n    255,\n    Math.floor((num >> 16) + ((255 - (num >> 16)) * percent) / 100)\n  );\n  const g = Math.min(\n    255,\n    Math.floor(\n      ((num >> 8) & 0x00_ff) + ((255 - ((num >> 8) & 0x00_ff)) * percent) / 100\n    )\n  );\n  const b = Math.min(\n    255,\n    Math.floor(\n      (num & 0x00_00_ff) + ((255 - (num & 0x00_00_ff)) * percent) / 100\n    )\n  );\n  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, \"0\")}`;\n}\n\n/**\n * Generates a darkened version of a hex color\n */\nfunction darkenColor(hex: string, percent = 20): string {\n  const num = Number.parseInt(hex.replace(\"#\", \"\"), 16);\n  const r = Math.max(0, Math.floor((num >> 16) * (1 - percent / 100)));\n  const g = Math.max(\n    0,\n    Math.floor(((num >> 8) & 0x00_ff) * (1 - percent / 100))\n  );\n  const b = Math.max(0, Math.floor((num & 0x00_00_ff) * (1 - percent / 100)));\n  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, \"0\")}`;\n}\n\n/**\n * Creates a custom theme by generating CSS variables based on the provided configuration.\n * Returns a className that can be applied to any container element.\n *\n * @param config - Theme configuration object\n * @returns CSS class name to apply to container\n *\n * @example\n * const theme = createTheme({\n *   brand: { primary: '#FF6B6B' }\n * });\n *\n * <div className={theme}>\n *   <Button variant=\"brand\">Custom Themed Button</Button>\n * </div>\n */\nexport function createTheme(config: ThemeConfig = {}): string {\n  const themeId = `cadence-theme-${Math.random().toString(36).substring(2, 11)}`;\n  const cssVariables: string[] = [];\n\n  // Brand colors\n  if (config.brand?.primary) {\n    cssVariables.push(`--brand-primary: ${config.brand.primary};`);\n    cssVariables.push(\n      `--brand-primary-hover: ${config.brand.accent || darkenColor(config.brand.primary, 15)};`\n    );\n    cssVariables.push(\n      `--brand-primary-active: ${darkenColor(config.brand.primary, 25)};`\n    );\n    cssVariables.push(\n      `--brand-secondary: ${lightenColor(config.brand.primary, 40)};`\n    );\n    cssVariables.push(\n      `--brand-secondary-hover: ${lightenColor(config.brand.primary, 30)};`\n    );\n    cssVariables.push(`--text-brand: ${config.brand.primary};`);\n    cssVariables.push(`--border-brand: ${config.brand.primary};`);\n    cssVariables.push(`--focus-ring: ${config.brand.primary};`);\n  }\n\n  if (config.brand?.accent) {\n    cssVariables.push(`--brand-primary-hover: ${config.brand.accent};`);\n  }\n\n  // Status colors\n  if (config.colors?.success) {\n    cssVariables.push(`--success: ${config.colors.success};`);\n    cssVariables.push(\n      `--success-dark: ${darkenColor(config.colors.success, 15)};`\n    );\n  }\n\n  if (config.colors?.error) {\n    cssVariables.push(`--error: ${config.colors.error};`);\n    cssVariables.push(`--error-dark: ${darkenColor(config.colors.error, 15)};`);\n  }\n\n  if (config.colors?.warning) {\n    cssVariables.push(`--warning: ${config.colors.warning};`);\n  }\n\n  if (config.colors?.info) {\n    cssVariables.push(`--info: ${config.colors.info};`);\n  }\n\n  // Border radius\n  if (config.radius) {\n    const radiusValue = radiusValues[config.radius];\n    cssVariables.push(`--radius-default: ${radiusValue};`);\n    cssVariables.push(`--radius-sm: ${Number.parseInt(radiusValue) / 2}px;`);\n    cssVariables.push(`--radius-lg: ${Number.parseInt(radiusValue) * 1.5}px;`);\n  }\n\n  // Font families\n  if (config.fonts?.sans) {\n    cssVariables.push(`--font-sans: ${config.fonts.sans};`);\n  }\n\n  if (config.fonts?.heading) {\n    cssVariables.push(`--font-heading: ${config.fonts.heading};`);\n  }\n\n  // Inject styles into document head\n  if (typeof document !== \"undefined\") {\n    const styleId = `${themeId}-styles`;\n    let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n    if (!styleElement) {\n      styleElement = document.createElement(\"style\");\n      styleElement.id = styleId;\n      document.head.appendChild(styleElement);\n    }\n\n    styleElement.textContent = `\n      .${themeId} {\n        ${cssVariables.join(\"\\n        \")}\n      }\n    `;\n  }\n\n  return themeId;\n}\n\n/**\n * Type guard to check if a string is a valid hex color\n */\nexport function isValidHexColor(color: string): boolean {\n  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);\n}\n\n/**\n * Pre-configured theme presets for common use cases\n */\nexport const themePresets = {\n  /**\n   * Default Uppbeat theme (pink brand color)\n   */\n  uppbeat: {\n    brand: {\n      primary: \"#F23D75\",\n      accent: \"#DF1F64\",\n    },\n  },\n\n  /**\n   * Music Vine theme (coral pink brand color)\n   */\n  musicVine: {\n    brand: {\n      primary: \"#FF5F6E\",\n      accent: \"#671920\",\n    },\n  },\n} satisfies Record<string, ThemeConfig>;\n\n/**\n * Helper to create a theme from a preset\n *\n * @example\n * const theme = createThemeFromPreset('ocean');\n * <div className={theme}>...</div>\n */\nexport function createThemeFromPreset(\n  preset: keyof typeof themePresets\n): string {\n  return createTheme(themePresets[preset]);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music-vine/cadence",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -134,12 +134,12 @@
     "pngjs": "^7.0.0",
     "postcss": "^8.4.49",
     "rimraf": "^6.0.1",
-    "storybook": "^10.1.11",
+    "storybook": "^10.2.10",
     "tailwindcss": "^4.1.18",
     "tailwindcss-v3": "npm:tailwindcss@^3.4.18",
     "tsx": "^4.21.0",
     "typescript": "^5.2.2",
-    "vite": "^6.4.1",
+    "vite": "^6.4.2",
     "vitest": "^3.2.4"
   },
   "scripts": {

package/tailwind.config.ts

@@ -1,6 +1,6 @@
-import type { Config } from "tailwindcss-v3";
-import * as animate from "tailwindcss-animate";
 import * as containerQueries from "@tailwindcss/container-queries";
+import * as animate from "tailwindcss-animate";
+import type { Config } from "tailwindcss-v3";
 
 /**
  * Cadence Design System - Tailwind Configuration
@@ -160,6 +160,7 @@ const cadenceConfig: Config = {
         700: "#5A646F",
         800: "#3D4653",
         850: "#323A45",
+        875: "#292F38",
         900: "#1D232C",
         950: "#151A20",
       },

package/tailwind.config.v4.css

@@ -63,6 +63,7 @@
   --color-gray-700: #5A646F;
   --color-gray-800: #3D4653;
   --color-gray-850: #323A45;
+  --color-gray-875: #292F38;
   --color-gray-900: #1D232C;
   --color-gray-950: #151A20;