@music-vine/cadence 2.6.2 → 2.7.0

package/dist/theme/index.js

@@ -36,7 +36,7 @@ function darkenColor(hex, percent = 20) {
   return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
 }
 function createTheme(config = {}) {
-  const themeId = `cadence-theme-${Math.random().toString(36).substring(2, 11)}`;
+  const themeId = `cadence-theme-${Math.random().toString(36).slice(2, 11)}`;
   const cssVariables = [];
   if (config.brand?.primary) {
     cssVariables.push(`--brand-primary: ${config.brand.primary};`);

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 = 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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",
+  "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  /** Accent/hover color for primary brand interactions */\n  accent?: string;\n  /** Primary brand color (used for primary buttons, links, focus rings) */\n  primary?: string;\n}\n\n/**\n * Configuration for status/semantic colors\n */\nexport interface StatusColors {\n  /** Error state color */\n  error?: string;\n  /** Info state color */\n  info?: string;\n  /** Success state color */\n  success?: string;\n  /** Warning state color */\n  warning?: string;\n}\n\n/**\n * Configuration for font families\n */\nexport interface FontConfig {\n  /** Font family for headings */\n  heading?: string;\n  /** Sans-serif font family for body text */\n  sans?: 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  /** Font family overrides */\n  fonts?: FontConfig;\n  /** Border radius preset */\n  radius?: RadiusPreset;\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).slice(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": "AAkGA,MAAM,eAA6C;AAAA,EACjD,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMA,SAAS,aAAa,KAAa,UAAU,IAAY;AACvD,QAAM,MAAM,OAAO,SAAS,IAAI,QAAQ,KAAK,EAAE,GAAG,EAAE;AACpD,QAAM,IAAI,KAAK;AAAA,IACb;AAAA,IACA,KAAK,OAAO,OAAO,OAAQ,OAAO,OAAO,OAAO,UAAW,GAAG;AAAA,EAChE;AACA,QAAM,IAAI,KAAK;AAAA,IACb;AAAA,IACA,KAAK;AAAA,OACD,OAAO,IAAK,QAAa,OAAQ,OAAO,IAAK,QAAY,UAAW;AAAA,IACxE;AAAA,EACF;AACA,QAAM,IAAI,KAAK;AAAA,IACb;AAAA,IACA,KAAK;AAAA,OACF,MAAM,QAAgB,OAAO,MAAM,QAAe,UAAW;AAAA,IAChE;AAAA,EACF;AACA,SAAO,KAAM,KAAK,KAAO,KAAK,IAAK,GAAG,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC;AACrE;AAKA,SAAS,YAAY,KAAa,UAAU,IAAY;AACtD,QAAM,MAAM,OAAO,SAAS,IAAI,QAAQ,KAAK,EAAE,GAAG,EAAE;AACpD,QAAM,IAAI,KAAK,IAAI,GAAG,KAAK,OAAO,OAAO,OAAO,IAAI,UAAU,IAAI,CAAC;AACnE,QAAM,IAAI,KAAK;AAAA,IACb;AAAA,IACA,KAAK,OAAQ,OAAO,IAAK,QAAY,IAAI,UAAU,IAAI;AAAA,EACzD;AACA,QAAM,IAAI,KAAK,IAAI,GAAG,KAAK,OAAO,MAAM,QAAe,IAAI,UAAU,IAAI,CAAC;AAC1E,SAAO,KAAM,KAAK,KAAO,KAAK,IAAK,GAAG,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC;AACrE;AAkBO,SAAS,YAAY,SAAsB,CAAC,GAAW;AAC5D,QAAM,UAAU,iBAAiB,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC;AACxE,QAAM,eAAyB,CAAC;AAGhC,MAAI,OAAO,OAAO,SAAS;AACzB,iBAAa,KAAK,oBAAoB,OAAO,MAAM,OAAO,GAAG;AAC7D,iBAAa;AAAA,MACX,0BAA0B,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,SAAS,EAAE,CAAC;AAAA,IACxF;AACA,iBAAa;AAAA,MACX,2BAA2B,YAAY,OAAO,MAAM,SAAS,EAAE,CAAC;AAAA,IAClE;AACA,iBAAa;AAAA,MACX,sBAAsB,aAAa,OAAO,MAAM,SAAS,EAAE,CAAC;AAAA,IAC9D;AACA,iBAAa;AAAA,MACX,4BAA4B,aAAa,OAAO,MAAM,SAAS,EAAE,CAAC;AAAA,IACpE;AACA,iBAAa,KAAK,iBAAiB,OAAO,MAAM,OAAO,GAAG;AAC1D,iBAAa,KAAK,mBAAmB,OAAO,MAAM,OAAO,GAAG;AAC5D,iBAAa,KAAK,iBAAiB,OAAO,MAAM,OAAO,GAAG;AAAA,EAC5D;AAEA,MAAI,OAAO,OAAO,QAAQ;AACxB,iBAAa,KAAK,0BAA0B,OAAO,MAAM,MAAM,GAAG;AAAA,EACpE;AAGA,MAAI,OAAO,QAAQ,SAAS;AAC1B,iBAAa,KAAK,cAAc,OAAO,OAAO,OAAO,GAAG;AACxD,iBAAa;AAAA,MACX,mBAAmB,YAAY,OAAO,OAAO,SAAS,EAAE,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,MAAI,OAAO,QAAQ,OAAO;AACxB,iBAAa,KAAK,YAAY,OAAO,OAAO,KAAK,GAAG;AACpD,iBAAa,KAAK,iBAAiB,YAAY,OAAO,OAAO,OAAO,EAAE,CAAC,GAAG;AAAA,EAC5E;AAEA,MAAI,OAAO,QAAQ,SAAS;AAC1B,iBAAa,KAAK,cAAc,OAAO,OAAO,OAAO,GAAG;AAAA,EAC1D;AAEA,MAAI,OAAO,QAAQ,MAAM;AACvB,iBAAa,KAAK,WAAW,OAAO,OAAO,IAAI,GAAG;AAAA,EACpD;AAGA,MAAI,OAAO,QAAQ;AACjB,UAAM,cAAc,aAAa,OAAO,MAAM;AAC9C,iBAAa,KAAK,qBAAqB,WAAW,GAAG;AACrD,iBAAa,KAAK,gBAAgB,OAAO,SAAS,WAAW,IAAI,CAAC,KAAK;AACvE,iBAAa,KAAK,gBAAgB,OAAO,SAAS,WAAW,IAAI,GAAG,KAAK;AAAA,EAC3E;AAGA,MAAI,OAAO,OAAO,MAAM;AACtB,iBAAa,KAAK,gBAAgB,OAAO,MAAM,IAAI,GAAG;AAAA,EACxD;AAEA,MAAI,OAAO,OAAO,SAAS;AACzB,iBAAa,KAAK,mBAAmB,OAAO,MAAM,OAAO,GAAG;AAAA,EAC9D;AAGA,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,UAAU,GAAG,OAAO;AAC1B,QAAI,eAAe,SAAS,eAAe,OAAO;AAElD,QAAI,CAAC,cAAc;AACjB,qBAAe,SAAS,cAAc,OAAO;AAC7C,mBAAa,KAAK;AAClB,eAAS,KAAK,YAAY,YAAY;AAAA,IACxC;AAEA,iBAAa,cAAc;AAAA,SACtB,OAAO;AAAA,UACN,aAAa,KAAK,YAAY,CAAC;AAAA;AAAA;AAAA,EAGvC;AAEA,SAAO;AACT;AAKO,SAAS,gBAAgB,OAAwB;AACtD,SAAO,qCAAqC,KAAK,KAAK;AACxD;AAKO,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AAAA,IACT,OAAO;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AASO,SAAS,sBACd,QACQ;AACR,SAAO,YAAY,aAAa,MAAM,CAAC;AACzC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music-vine/cadence",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -110,6 +110,7 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.3.3",
     "@playwright/test": "^1.58.2",
     "@storybook/addon-a11y": "^10.1.11",
     "@storybook/addon-docs": "^10.1.11",