@music-vine/cadence 2.1.0 → 2.2.0

package/README.md

@@ -7,7 +7,7 @@ Cadence Design System - UI components and icons for Uppbeat applications.
 ## Installation
 
 ```bash
-npm install @music-vine/cadence
+pnpm add @music-vine/cadence
 ```
 
 ## Usage
@@ -59,7 +59,11 @@ function App() {
 
 ## Tailwind Configuration
 
-Extend your Tailwind config with the Cadence theme:
+Cadence supports both Tailwind CSS v3 and v4. Choose the version that matches your project.
+
+### Tailwind v3 (JavaScript config)
+
+Extend your Tailwind config with the Cadence preset:
 
 ```js
 // tailwind.config.js
@@ -74,14 +78,47 @@ export default {
 };
 ```
 
+Then import the v3 styles:
+
+```css
+/* app.css */
+@import '@music-vine/cadence/styles';
+```
+
+### Tailwind v4 (CSS-first config)
+
+For Tailwind v4, use the CSS-first configuration:
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "@music-vine/cadence/tailwind.config.v4";
+@import "@music-vine/cadence/styles.v4";
+
+@source "./src/**/*.{js,ts,jsx,tsx}";
+@source "./node_modules/@music-vine/cadence/dist/**/*.js";
+```
+
+**Benefits of v4:**
+- 3-10x faster builds
+- 100x faster incremental rebuilds
+- Built-in container queries
+- Native CSS variable support
+- Smaller bundle size
+
+See the [Migration Guide](./src/docs/02-guides/tailwind-v4-migration.mdx) for detailed instructions.
+
 ## Available Exports
 
 | Export | Description |
 |--------|-------------|
 | `@music-vine/cadence/ui` | React UI components (Button, Text, Card, etc.) |
 | `@music-vine/cadence/icons` | Lucide icons + custom Uppbeat icons |
-| `@music-vine/cadence/styles` | Base CSS styles |
-| `@music-vine/cadence/tailwind.config` | Tailwind CSS preset with Uppbeat theme |
+| `@music-vine/cadence/theme` | Theme customization API (`createTheme`, presets) |
+| `@music-vine/cadence/styles` | Base CSS styles (Tailwind v3) |
+| `@music-vine/cadence/styles.v4` | Base CSS styles (Tailwind v4) |
+| `@music-vine/cadence/tailwind.config` | Tailwind v3 preset (JavaScript) |
+| `@music-vine/cadence/tailwind.config.v4` | Tailwind v4 config (CSS) |
 
 ## Components
 
@@ -109,14 +146,14 @@ This package requires React 19+:
 
 ### Local Development
 
-For local development within the monorepo, the package is automatically linked via npm workspaces.
+For local development within the monorepo, the package is automatically linked via pnpm workspaces.
 
 ```bash
 # Build the package
-npm run build:packages
+pnpm build:packages
 
 # Watch mode for development
-npm run dev:packages
+pnpm dev:packages
 ```
 
 ### Storybook
@@ -125,7 +162,7 @@ View and develop components in isolation:
 
 ```bash
 cd packages/cadence
-npm run storybook
+pnpm storybook
 ```
 
 ### Creating a Release

package/dist/components/badge.js

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { Slot as SlotPrimitive } from "radix-ui";
 import { cn } from "../lib/utils";
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 dark:focus-visible:ring-neutral-300",
+  "inline-flex items-center rounded-full border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 dark:focus-visible:ring-gray-300",
   {
     variants: {
       variant: {
@@ -20,7 +20,7 @@ const badgeVariants = cva(
         primary: "border-gray-900 bg-gray-900 text-white dark:border-gray-50 dark:bg-gray-50 dark:text-gray-950",
         secondary: "border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white",
         destructive: "border-red bg-red text-white",
-        white: "border-neutral-200 bg-white text-brand-primary",
+        white: "border-gray-200 bg-white text-brand-primary",
         brandLight: "border-brand-secondary bg-brand-secondary text-brand-primary-hover",
         outline: "border border-gray-200 border-solid bg-transparent text-gray-800 focus-visible:ring-gray-500 dark:border-gray-800 dark:bg-transparent dark:text-white dark:focus-visible:ring-gray-400"
       },

package/dist/components/badge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/badge.tsx"],
-  "sourcesContent": ["/**\n * @module Badge\n *\n * Small status indicators and labels for highlighting information.\n * Supports multiple color variants and sizes for different contexts.\n *\n * @see {@link https://ui.shadcn.com/docs/components/badge Shadcn Badge}\n *\n * @example\n * // Basic badge\n * <Badge>New</Badge>\n *\n * @example\n * // Badge variants\n * <Badge variant=\"brand\">Premium</Badge>\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\">Expired</Badge>\n *\n * @example\n * // As a child element (e.g., wrapping a link)\n * <Badge asChild variant=\"outline\">\n *   <a href=\"/pricing\">View Plans</a>\n * </Badge>\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * CVA variants for Badge styling.\n * Includes color variants matching Button component for consistency.\n */\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 dark:focus-visible:ring-neutral-300\",\n  {\n    variants: {\n      variant: {\n        // Matching button variants (without hover/disabled states)\n        subtle:\n          \"border-1 border-gray-150 border-solid bg-white text-gray-950 dark:border-gray-800 dark:bg-gray-950 dark:text-white\",\n        brand: \"border-1 border-brand-primary border-solid bg-brand-primary text-white\",\n        brandSecondary:\n          \"border-1 border-brand-secondary border-solid bg-brand-secondary text-brand-primary-hover dark:border-gray-900 dark:bg-gray-900 dark:text-white\",\n        bold: \"border-gray-950 bg-gray-950 text-white dark:border-white  dark:bg-white dark:text-gray-950\",\n        light:\n          \"border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white\",\n        transparent:\n          \"border-transparent bg-transparent text-gray-950 dark:text-white\",\n        contrast: \"border-white bg-white text-gray-950\",\n        success:\n          \"border-green-600 bg-green-600 text-white dark:border-green-500 dark:bg-green-500\",\n        error:\n          \"border-red-600 bg-red-600 text-white dark:border-red-500 dark:bg-red-500\",\n        primary:\n          \"border-gray-900 bg-gray-900 text-white dark:border-gray-50 dark:bg-gray-50 dark:text-gray-950\",\n        secondary:\n          \"border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white\",\n        destructive: \"border-red bg-red text-white\",\n        white: \"border-neutral-200 bg-white text-brand-primary\",\n        brandLight: \"border-brand-secondary bg-brand-secondary text-brand-primary-hover\",\n        outline:\n          \"border border-gray-200 border-solid bg-transparent text-gray-800 focus-visible:ring-gray-500 dark:border-gray-800 dark:bg-transparent dark:text-white dark:focus-visible:ring-gray-400\",\n      },\n      size: {\n        default: \"h-8 px-4 py-2 leading-8\",\n        xs: \"h-5 gap-1.5 px-2 text-xs leading-5\",\n        sm: \"h-6 px-2.5 text-xs leading-6 2xl:text-sm\",\n        lg: \"h-10 gap-4 px-8 text-lg leading-10\",\n        icon: \"h-8 w-8 leading-8\",\n      },\n      shadow: {\n        true: \"shadow\",\n        false: \"\",\n      },\n      strong: {\n        true: \"font-semibold\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"bold\",\n      size: \"default\",\n      shadow: false,\n      strong: false,\n    },\n  }\n);\n\n/**\n * Props for the Badge component.\n *\n * @property variant - Color scheme: `brand`, `brandSecondary`, `success`, `error`, `subtle`, `bold`, etc.\n * @property size - Size variant: `xs`, `sm`, `default`, `lg`, `icon`\n * @property shadow - Add drop shadow when true\n * @property strong - Use semibold font weight when true\n * @property asChild - Render as child element (uses Radix Slot)\n * @property ref - Ref to the underlying div element\n */\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Displays a small label or status indicator.\n *\n * Common use cases:\n * - Subscription status (Free, Premium)\n * - Item counts\n * - Status indicators (New, Sale, Popular)\n * - Tags and categories\n */\nconst Badge = ({\n  className,\n  variant,\n  size,\n  shadow,\n  strong,\n  asChild = false,\n  ref,\n  ...props\n}: BadgeProps) => {\n  const Comp = asChild ? SlotPrimitive.Slot : \"div\";\n\n  return (\n    <Comp\n      className={cn(\n        badgeVariants({ variant, size, shadow, strong }),\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  );\n};\n\nexport { Badge, badgeVariants };\n"],
+  "sourcesContent": ["/**\n * @module Badge\n *\n * Small status indicators and labels for highlighting information.\n * Supports multiple color variants and sizes for different contexts.\n *\n * @see {@link https://ui.shadcn.com/docs/components/badge Shadcn Badge}\n *\n * @example\n * // Basic badge\n * <Badge>New</Badge>\n *\n * @example\n * // Badge variants\n * <Badge variant=\"brand\">Premium</Badge>\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\">Expired</Badge>\n *\n * @example\n * // As a child element (e.g., wrapping a link)\n * <Badge asChild variant=\"outline\">\n *   <a href=\"/pricing\">View Plans</a>\n * </Badge>\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * CVA variants for Badge styling.\n * Includes color variants matching Button component for consistency.\n */\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 dark:focus-visible:ring-gray-300\",\n  {\n    variants: {\n      variant: {\n        // Matching button variants (without hover/disabled states)\n        subtle:\n          \"border-1 border-gray-150 border-solid bg-white text-gray-950 dark:border-gray-800 dark:bg-gray-950 dark:text-white\",\n        brand: \"border-1 border-brand-primary border-solid bg-brand-primary text-white\",\n        brandSecondary:\n          \"border-1 border-brand-secondary border-solid bg-brand-secondary text-brand-primary-hover dark:border-gray-900 dark:bg-gray-900 dark:text-white\",\n        bold: \"border-gray-950 bg-gray-950 text-white dark:border-white  dark:bg-white dark:text-gray-950\",\n        light:\n          \"border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white\",\n        transparent:\n          \"border-transparent bg-transparent text-gray-950 dark:text-white\",\n        contrast: \"border-white bg-white text-gray-950\",\n        success:\n          \"border-green-600 bg-green-600 text-white dark:border-green-500 dark:bg-green-500\",\n        error:\n          \"border-red-600 bg-red-600 text-white dark:border-red-500 dark:bg-red-500\",\n        primary:\n          \"border-gray-900 bg-gray-900 text-white dark:border-gray-50 dark:bg-gray-50 dark:text-gray-950\",\n        secondary:\n          \"border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white\",\n        destructive: \"border-red bg-red text-white\",\n        white: \"border-gray-200 bg-white text-brand-primary\",\n        brandLight: \"border-brand-secondary bg-brand-secondary text-brand-primary-hover\",\n        outline:\n          \"border border-gray-200 border-solid bg-transparent text-gray-800 focus-visible:ring-gray-500 dark:border-gray-800 dark:bg-transparent dark:text-white dark:focus-visible:ring-gray-400\",\n      },\n      size: {\n        default: \"h-8 px-4 py-2 leading-8\",\n        xs: \"h-5 gap-1.5 px-2 text-xs leading-5\",\n        sm: \"h-6 px-2.5 text-xs leading-6 2xl:text-sm\",\n        lg: \"h-10 gap-4 px-8 text-lg leading-10\",\n        icon: \"h-8 w-8 leading-8\",\n      },\n      shadow: {\n        true: \"shadow\",\n        false: \"\",\n      },\n      strong: {\n        true: \"font-semibold\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"bold\",\n      size: \"default\",\n      shadow: false,\n      strong: false,\n    },\n  }\n);\n\n/**\n * Props for the Badge component.\n *\n * @property variant - Color scheme: `brand`, `brandSecondary`, `success`, `error`, `subtle`, `bold`, etc.\n * @property size - Size variant: `xs`, `sm`, `default`, `lg`, `icon`\n * @property shadow - Add drop shadow when true\n * @property strong - Use semibold font weight when true\n * @property asChild - Render as child element (uses Radix Slot)\n * @property ref - Ref to the underlying div element\n */\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Displays a small label or status indicator.\n *\n * Common use cases:\n * - Subscription status (Free, Premium)\n * - Item counts\n * - Status indicators (New, Sale, Popular)\n * - Tags and categories\n */\nconst Badge = ({\n  className,\n  variant,\n  size,\n  shadow,\n  strong,\n  asChild = false,\n  ref,\n  ...props\n}: BadgeProps) => {\n  const Comp = asChild ? SlotPrimitive.Slot : \"div\";\n\n  return (\n    <Comp\n      className={cn(\n        badgeVariants({ variant, size, shadow, strong }),\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  );\n};\n\nexport { Badge, badgeVariants };\n"],
   "mappings": "AAiII;AAzGJ,SAAS,WAA8B;AACvC,SAAS,QAAQ,qBAAqB;AAGtC,SAAS,UAAU;AAMnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA;AAAA,QAEP,QACE;AAAA,QACF,OAAO;AAAA,QACP,gBACE;AAAA,QACF,MAAM;AAAA,QACN,OACE;AAAA,QACF,aACE;AAAA,QACF,UAAU;AAAA,QACV,SACE;AAAA,QACF,OACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,aAAa;AAAA,QACb,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,SACE;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AA4BA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAkB;AAChB,QAAM,OAAO,UAAU,cAAc,OAAO;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,cAAc,EAAE,SAAS,MAAM,QAAQ,OAAO,CAAC;AAAA,QAC/C;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

package/dist/components/breadcrumb.js

@@ -14,7 +14,7 @@ const BreadcrumbList = ({
   "ol",
   {
     className: cn(
-      "flex flex-wrap items-center gap-1 break-words text-neutral-500 text-sm sm:gap-2.5 dark:text-neutral-400",
+      "flex flex-wrap items-center gap-1 break-words text-gray-500 text-sm sm:gap-2.5 dark:text-gray-400",
       className
     ),
     ref,
@@ -44,7 +44,7 @@ const BreadcrumbLink = ({
     Comp,
     {
       className: cn(
-        "transition-colors hover:text-neutral-950 dark:hover:text-neutral-50",
+        "transition-colors hover:text-gray-950 dark:hover:text-gray-50",
         className
       ),
       ref,
@@ -61,7 +61,7 @@ const BreadcrumbPage = ({
   {
     "aria-current": "page",
     className: cn(
-      "font-normal text-neutral-950 dark:text-neutral-50",
+      "font-normal text-gray-950 dark:text-gray-50",
       className
     ),
     ref,

package/dist/components/breadcrumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/breadcrumb.tsx"],
-  "sourcesContent": ["/**\n * @module Breadcrumb\n *\n * Navigation component showing the user's location within a site hierarchy.\n * Fully accessible with proper ARIA attributes and semantic markup.\n *\n * @see {@link https://ui.shadcn.com/docs/components/breadcrumb Shadcn Breadcrumb}\n *\n * @example\n * // Basic breadcrumb navigation\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem>\n *       <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n *     </BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem>\n *       <BreadcrumbLink href=\"/music\">Music</BreadcrumbLink>\n *     </BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem>\n *       <BreadcrumbPage>Ambient</BreadcrumbPage>\n *     </BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n *\n * @example\n * // With ellipsis for long paths\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem><BreadcrumbPage>Current</BreadcrumbPage></BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n */\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * Root navigation container with `aria-label=\"breadcrumb\"`.\n */\nconst Breadcrumb = ({\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<\"nav\"> & {\n  separator?: React.ReactNode;\n  ref?: Ref<HTMLElement>;\n}) => <nav aria-label=\"breadcrumb\" ref={ref} {...props} />;\n\n/** Ordered list container for breadcrumb items. */\nconst BreadcrumbList = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<\"ol\"> & {\n  ref?: Ref<HTMLOListElement>;\n}) => (\n  <ol\n    className={cn(\n      \"flex flex-wrap items-center gap-1 break-words text-neutral-500 text-sm sm:gap-2.5 dark:text-neutral-400\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** List item wrapper for each breadcrumb segment. */\nconst BreadcrumbItem = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & {\n  ref?: Ref<HTMLLIElement>;\n}) => (\n  <li\n    className={cn(\"inline-flex items-center\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Clickable link within a breadcrumb. Use `asChild` to wrap custom link components.\n *\n * @param asChild - When true, renders as child element (e.g., Next.js Link)\n */\nconst BreadcrumbLink = ({\n  asChild,\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<\"a\"> & {\n  asChild?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n}) => {\n  const Comp = asChild ? SlotPrimitive.Slot : \"a\";\n\n  return (\n    <Comp\n      className={cn(\n        \"transition-colors hover:text-neutral-950 dark:hover:text-neutral-50\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  );\n};\n\n/** Current page indicator (non-clickable). Has `aria-current=\"page\"`. */\nconst BreadcrumbPage = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<\"span\"> & {\n  ref?: Ref<HTMLSpanElement>;\n}) => (\n  <span\n    aria-current=\"page\"\n    className={cn(\n      \"font-normal text-neutral-950 dark:text-neutral-50\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Visual separator between breadcrumb items. Defaults to chevron icon. */\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:h-3.5 [&>svg]:w-3.5\", className)}\n    role=\"presentation\"\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n);\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\";\n\n/** Ellipsis indicator for collapsed breadcrumb items (long paths). */\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    role=\"presentation\"\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n);\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\";\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n};\n"],
+  "sourcesContent": ["/**\n * @module Breadcrumb\n *\n * Navigation component showing the user's location within a site hierarchy.\n * Fully accessible with proper ARIA attributes and semantic markup.\n *\n * @see {@link https://ui.shadcn.com/docs/components/breadcrumb Shadcn Breadcrumb}\n *\n * @example\n * // Basic breadcrumb navigation\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem>\n *       <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n *     </BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem>\n *       <BreadcrumbLink href=\"/music\">Music</BreadcrumbLink>\n *     </BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem>\n *       <BreadcrumbPage>Ambient</BreadcrumbPage>\n *     </BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n *\n * @example\n * // With ellipsis for long paths\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem><BreadcrumbPage>Current</BreadcrumbPage></BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n */\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * Root navigation container with `aria-label=\"breadcrumb\"`.\n */\nconst Breadcrumb = ({\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<\"nav\"> & {\n  separator?: React.ReactNode;\n  ref?: Ref<HTMLElement>;\n}) => <nav aria-label=\"breadcrumb\" ref={ref} {...props} />;\n\n/** Ordered list container for breadcrumb items. */\nconst BreadcrumbList = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<\"ol\"> & {\n  ref?: Ref<HTMLOListElement>;\n}) => (\n  <ol\n    className={cn(\n      \"flex flex-wrap items-center gap-1 break-words text-gray-500 text-sm sm:gap-2.5 dark:text-gray-400\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** List item wrapper for each breadcrumb segment. */\nconst BreadcrumbItem = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & {\n  ref?: Ref<HTMLLIElement>;\n}) => (\n  <li\n    className={cn(\"inline-flex items-center\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Clickable link within a breadcrumb. Use `asChild` to wrap custom link components.\n *\n * @param asChild - When true, renders as child element (e.g., Next.js Link)\n */\nconst BreadcrumbLink = ({\n  asChild,\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<\"a\"> & {\n  asChild?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n}) => {\n  const Comp = asChild ? SlotPrimitive.Slot : \"a\";\n\n  return (\n    <Comp\n      className={cn(\n        \"transition-colors hover:text-gray-950 dark:hover:text-gray-50\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  );\n};\n\n/** Current page indicator (non-clickable). Has `aria-current=\"page\"`. */\nconst BreadcrumbPage = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<\"span\"> & {\n  ref?: Ref<HTMLSpanElement>;\n}) => (\n  <span\n    aria-current=\"page\"\n    className={cn(\n      \"font-normal text-gray-950 dark:text-gray-50\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Visual separator between breadcrumb items. Defaults to chevron icon. */\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:h-3.5 [&>svg]:w-3.5\", className)}\n    role=\"presentation\"\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n);\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\";\n\n/** Ellipsis indicator for collapsed breadcrumb items (long paths). */\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    role=\"presentation\"\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n);\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\";\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n};\n"],
   "mappings": "AAsDM,cAyGJ,YAzGI;AAhBN,SAAS,cAAc,sBAAsB;AAC7C,SAAS,QAAQ,qBAAqB;AAItC,SAAS,UAAU;AAKnB,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA,GAAG;AACL,MAGM,oBAAC,SAAI,cAAW,cAAa,KAAW,GAAG,OAAO;AAGxD,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAIF,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,4BAA4B,SAAS;AAAA,IACnD;AAAA,IACC,GAAG;AAAA;AACN;AAQF,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGM;AACJ,QAAM,OAAO,UAAU,cAAc,OAAO;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC;AAAA;AAAA,IACC,gBAAa;AAAA,IACb,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAIF,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAW,GAAG,+BAA+B,SAAS;AAAA,IACtD,MAAK;AAAA,IACJ,GAAG;AAAA,IAEH,sBAAY,oBAAC,gBAAa;AAAA;AAC7B;AAGF,oBAAoB,cAAc;AAGlC,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAW,GAAG,4CAA4C,SAAS;AAAA,IACnE,MAAK;AAAA,IACJ,GAAG;AAAA,IAEJ;AAAA,0BAAC,kBAAe,WAAU,WAAU;AAAA,MACpC,oBAAC,UAAK,WAAU,WAAU,kBAAI;AAAA;AAAA;AAChC;AAGF,mBAAmB,cAAc;",
   "names": []
 }

package/dist/components/dialog.js

@@ -46,7 +46,7 @@ const DialogContent = ({
           DialogPrimitive.Close,
           {
             asChild: true,
-            className: "absolute top-4 right-4 opacity-100 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400 dark:focus:ring-neutral-300",
+            className: "absolute top-4 right-4 opacity-100 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:ring-offset-gray-950 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400 dark:focus:ring-gray-300",
             children: /* @__PURE__ */ jsxs(Button, { "aria-label": "Close", size: "icon", variant: "transparent", children: [
               /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })

package/dist/components/dialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/dialog.tsx"],
-  "sourcesContent": ["/**\n * @module Dialog\n *\n * Modal dialog overlay for focused user interaction. Built on Radix UI Dialog primitive.\n * Includes backdrop overlay, close button, and focus trapping.\n *\n * @see {@link https://ui.shadcn.com/docs/components/dialog Shadcn Dialog}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog Radix Dialog}\n *\n * @example\n * // Basic dialog\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open Dialog</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Are you sure?</DialogTitle>\n *       <DialogDescription>\n *         This action cannot be undone.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <DialogFooter>\n *       <Button>Confirm</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n *\n * @example\n * // Controlled dialog\n * const [open, setOpen] = useState(false);\n *\n * <Dialog open={open} onOpenChange={setOpen}>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Edit Profile</DialogTitle>\n *     </DialogHeader>\n *     <form onSubmit={() => setOpen(false)}>\n *       ...\n *     </form>\n *   </DialogContent>\n * </Dialog>\n */\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { Echo } from \"./typography/heading\";\nimport { Text } from \"./typography/text\";\n\n/** Root component that manages dialog open/closed state. */\nconst Dialog = DialogPrimitive.Root;\n\n/** Element that opens the dialog when clicked. Use `asChild` to wrap custom buttons. */\nconst DialogTrigger = DialogPrimitive.Trigger;\n\n/** Portal for rendering dialog outside the DOM hierarchy. */\nconst DialogPortal = DialogPrimitive.Portal;\n\n/** Closes the dialog when clicked. Use `asChild` to wrap custom close buttons. */\nconst DialogClose = DialogPrimitive.Close;\n\n/** Semi-transparent backdrop behind the dialog. Animated fade on open/close. */\nconst DialogOverlay = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Overlay>>;\n}) => (\n  <DialogPrimitive.Overlay\n    className={cn(\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Main dialog container. Centered on screen with close button.\n * Includes overlay, focus trap, and Escape key handling.\n */\nconst DialogContent = ({\n  className,\n  children,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Content>>;\n}) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-150 border-solid bg-white p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg dark:border-gray-800 dark:bg-gray-950\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close\n        asChild\n        className=\"absolute top-4 right-4 opacity-100 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400 dark:focus:ring-neutral-300\"\n      >\n        <Button aria-label=\"Close\" size=\"icon\" variant=\"transparent\">\n          <X className=\"h-5 w-5\" />\n          <span className=\"sr-only\">Close</span>\n        </Button>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n);\n\n/** Header section for dialog title and description. Centered on mobile, left-aligned on desktop. */\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Footer section for action buttons. Stacks on mobile, horizontal on desktop. */\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\n/** Dialog title with Echo typography. Required for accessibility. */\nconst DialogTitle = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Title>>;\n}) => (\n  <Echo asChild>\n    <DialogPrimitive.Title className={className} ref={ref} {...props} />\n  </Echo>\n);\n\n/** Accessible description text below the title. */\nconst DialogDescription = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Description>>;\n}) => (\n  <Text asChild className=\"text-sm\">\n    <DialogPrimitive.Description className={className} ref={ref} {...props} />\n  </Text>\n);\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n"],
+  "sourcesContent": ["/**\n * @module Dialog\n *\n * Modal dialog overlay for focused user interaction. Built on Radix UI Dialog primitive.\n * Includes backdrop overlay, close button, and focus trapping.\n *\n * @see {@link https://ui.shadcn.com/docs/components/dialog Shadcn Dialog}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog Radix Dialog}\n *\n * @example\n * // Basic dialog\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open Dialog</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Are you sure?</DialogTitle>\n *       <DialogDescription>\n *         This action cannot be undone.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <DialogFooter>\n *       <Button>Confirm</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n *\n * @example\n * // Controlled dialog\n * const [open, setOpen] = useState(false);\n *\n * <Dialog open={open} onOpenChange={setOpen}>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Edit Profile</DialogTitle>\n *     </DialogHeader>\n *     <form onSubmit={() => setOpen(false)}>\n *       ...\n *     </form>\n *   </DialogContent>\n * </Dialog>\n */\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { Echo } from \"./typography/heading\";\nimport { Text } from \"./typography/text\";\n\n/** Root component that manages dialog open/closed state. */\nconst Dialog = DialogPrimitive.Root;\n\n/** Element that opens the dialog when clicked. Use `asChild` to wrap custom buttons. */\nconst DialogTrigger = DialogPrimitive.Trigger;\n\n/** Portal for rendering dialog outside the DOM hierarchy. */\nconst DialogPortal = DialogPrimitive.Portal;\n\n/** Closes the dialog when clicked. Use `asChild` to wrap custom close buttons. */\nconst DialogClose = DialogPrimitive.Close;\n\n/** Semi-transparent backdrop behind the dialog. Animated fade on open/close. */\nconst DialogOverlay = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Overlay>>;\n}) => (\n  <DialogPrimitive.Overlay\n    className={cn(\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Main dialog container. Centered on screen with close button.\n * Includes overlay, focus trap, and Escape key handling.\n */\nconst DialogContent = ({\n  className,\n  children,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Content>>;\n}) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-150 border-solid bg-white p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg dark:border-gray-800 dark:bg-gray-950\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close\n        asChild\n        className=\"absolute top-4 right-4 opacity-100 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:ring-offset-gray-950 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400 dark:focus:ring-gray-300\"\n      >\n        <Button aria-label=\"Close\" size=\"icon\" variant=\"transparent\">\n          <X className=\"h-5 w-5\" />\n          <span className=\"sr-only\">Close</span>\n        </Button>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n);\n\n/** Header section for dialog title and description. Centered on mobile, left-aligned on desktop. */\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Footer section for action buttons. Stacks on mobile, horizontal on desktop. */\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\n/** Dialog title with Echo typography. Required for accessibility. */\nconst DialogTitle = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Title>>;\n}) => (\n  <Echo asChild>\n    <DialogPrimitive.Title className={className} ref={ref} {...props} />\n  </Echo>\n);\n\n/** Accessible description text below the title. */\nconst DialogDescription = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Description>>;\n}) => (\n  <Text asChild className=\"text-sm\">\n    <DialogPrimitive.Description className={className} ref={ref} {...props} />\n  </Text>\n);\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n"],
   "mappings": "AAyEE,cAqCM,YArCN;AA9BF,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAIlB,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY;AAGrB,MAAM,SAAS,gBAAgB;AAG/B,MAAM,gBAAgB,gBAAgB;AAGtC,MAAM,eAAe,gBAAgB;AAGrC,MAAM,cAAc,gBAAgB;AAGpC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAOF,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE,qBAAC,gBACC;AAAA,sBAAC,iBAAc;AAAA,EACf;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,SAAO;AAAA,YACP,WAAU;AAAA,YAEV,+BAAC,UAAO,cAAW,SAAQ,MAAK,QAAO,SAAQ,eAC7C;AAAA,kCAAC,KAAE,WAAU,WAAU;AAAA,cACvB,oBAAC,UAAK,WAAU,WAAU,mBAAK;AAAA,eACjC;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAAA,GACF;AAIF,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN;AAEF,aAAa,cAAc;AAG3B,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN;AAEF,aAAa,cAAc;AAG3B,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE,oBAAC,QAAK,SAAO,MACX,8BAAC,gBAAgB,OAAhB,EAAsB,WAAsB,KAAW,GAAG,OAAO,GACpE;AAIF,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE,oBAAC,QAAK,SAAO,MAAC,WAAU,WACtB,8BAAC,gBAAgB,aAAhB,EAA4B,WAAsB,KAAW,GAAG,OAAO,GAC1E;",
   "names": []
 }

package/dist/components/drawer.js

@@ -54,7 +54,7 @@ const DrawerContent = ({
       DrawerPrimitive.Content,
       {
         className: cn(
-          "fixed inset-x-0 bottom-0 z-[9999] mt-16 flex h-auto flex-col rounded-t-[20px] border border-neutral-200 bg-white px-6 pt-10 pb-12 dark:border-neutral-800 dark:bg-gray-900",
+          "fixed inset-x-0 bottom-0 z-[9999] mt-16 flex h-auto flex-col rounded-t-[20px] border border-gray-200 bg-white px-6 pt-10 pb-12 dark:border-gray-800 dark:bg-gray-900",
           className
         ),
         ref,
@@ -119,7 +119,7 @@ const DrawerDescription = ({
 }) => /* @__PURE__ */ jsx(
   DrawerPrimitive.Description,
   {
-    className: cn("text-neutral-500 text-sm dark:text-neutral-400", className),
+    className: cn("text-gray-500 text-sm dark:text-gray-400", className),
     ref,
     ...props
   }

package/dist/components/drawer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/drawer.tsx"],
-  "sourcesContent": ["/**\n * @module Drawer\n *\n * Bottom sheet drawer for mobile-friendly interactions. Built on Vaul library.\n * Supports drag-to-dismiss, snap points, and background scaling.\n *\n * @see {@link https://ui.shadcn.com/docs/components/drawer Shadcn Drawer}\n * @see {@link https://vaul.emilkowal.ski/ Vaul Documentation}\n *\n * @example\n * // Basic drawer\n * <Drawer>\n *   <DrawerTrigger asChild>\n *     <Button>Open Drawer</Button>\n *   </DrawerTrigger>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences</DrawerDescription>\n *     </DrawerHeader>\n *     <div className=\"p-4\">Content here</div>\n *     <DrawerFooter>\n *       <DrawerClose asChild>\n *         <Button variant=\"outline\">Close</Button>\n *       </DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n *\n * @example\n * // Controlled drawer with custom handle\n * const [open, setOpen] = useState(false);\n *\n * <Drawer open={open} onOpenChange={setOpen}>\n *   <DrawerContent handleColor=\"dark\">\n *     <DrawerTitle>Menu</DrawerTitle>\n *   </DrawerContent>\n * </Drawer>\n */\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * Root drawer component. Scales background by default.\n * @param shouldScaleBackground - Scale page content when drawer opens (default: true)\n */\nconst Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root\n    shouldScaleBackground={shouldScaleBackground}\n    {...props}\n  />\n);\n\nDrawer.displayName = \"Drawer\";\n\n/** Element that opens the drawer when clicked. Use `asChild` to wrap custom triggers. */\nconst DrawerTrigger = DrawerPrimitive.Trigger;\n\n/** Portal for rendering drawer outside the DOM hierarchy. */\nconst DrawerPortal = DrawerPrimitive.Portal;\n\n/** Closes the drawer when clicked. Use `asChild` to wrap custom close buttons. */\nconst DrawerClose = DrawerPrimitive.Close;\n\n/** Semi-transparent backdrop behind the drawer. */\nconst DrawerOverlay = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Overlay>>;\n}) => (\n  <DrawerPrimitive.Overlay\n    className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Main drawer content container. Slides up from bottom with drag handle.\n * @param handleColor - Handle bar color: `\"default\"`, `\"dark\"`, `\"light\"`, or `\"custom\"`\n * @param customHandleColor - Tailwind class for custom handle color (when handleColor=\"custom\")\n */\nconst DrawerContent = ({\n  className,\n  children,\n  handleColor = \"default\",\n  customHandleColor,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {\n  handleColor?: \"default\" | \"dark\" | \"light\" | \"custom\";\n  customHandleColor?: string;\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Content>>;\n}) => {\n  const getHandleColorClass = () => {\n    switch (handleColor) {\n      case \"dark\":\n        return \"bg-gray-300 dark:bg-gray-700\";\n      case \"light\":\n        return \"bg-gray-100 dark:bg-gray-900\";\n      case \"custom\":\n        return customHandleColor ?? \"bg-gray-200 dark:bg-gray-800\";\n      case \"default\":\n      default:\n        return \"bg-gray-200 dark:bg-gray-800\";\n    }\n  };\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-[9999] mt-16 flex h-auto flex-col rounded-t-[20px] border border-neutral-200 bg-white px-6 pt-10 pb-12 dark:border-neutral-800 dark:bg-gray-900\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"absolute top-2 right-0 left-0 mx-auto h-1 w-[100px] rounded-full\",\n            getHandleColorClass()\n          )}\n        />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n};\n\n/** Header section for drawer title and description. Centered on mobile, left-aligned on desktop. */\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n);\n\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Footer section for action buttons, pushed to bottom of drawer. */\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n);\n\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Drawer title with semibold weight. Required for accessibility. */\nconst DrawerTitle = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Title>>;\n}) => (\n  <DrawerPrimitive.Title\n    className={cn(\n      \"font-semibold text-lg leading-none tracking-tight\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Muted description text below the title. */\nconst DrawerDescription = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Description>>;\n}) => (\n  <DrawerPrimitive.Description\n    className={cn(\"text-neutral-500 text-sm dark:text-neutral-400\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],
-  "mappings": "AAqDE,cAkEI,YAlEJ;AAZF,SAAS,UAAU,uBAAuB;AAE1C,SAAS,UAAU;AAMnB,MAAM,SAAS,CAAC;AAAA,EACd,wBAAwB;AAAA,EACxB,GAAG;AACL,MACE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACC,GAAG;AAAA;AACN;AAGF,OAAO,cAAc;AAGrB,MAAM,gBAAgB,gBAAgB;AAGtC,MAAM,eAAe,gBAAgB;AAGrC,MAAM,cAAc,gBAAgB;AAGpC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW,GAAG,kCAAkC,SAAS;AAAA,IACzD;AAAA,IACC,GAAG;AAAA;AACN;AAQF,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAIM;AACJ,QAAM,sBAAsB,MAAM;AAChC,YAAQ,aAAa;AAAA,MACnB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO,qBAAqB;AAAA,MAC9B,KAAK;AAAA,MACL;AACE,eAAO;AAAA,IACX;AAAA,EACF;AAEA,SACE,qBAAC,gBACC;AAAA,wBAAC,iBAAc;AAAA,IACf;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,oBAAoB;AAAA,cACtB;AAAA;AAAA,UACF;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAGA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,6CAA6C,SAAS;AAAA,IACnE,GAAG;AAAA;AACN;AAGF,aAAa,cAAc;AAG3B,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,mCAAmC,SAAS;AAAA,IACzD,GAAG;AAAA;AACN;AAGF,aAAa,cAAc;AAG3B,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAIF,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW,GAAG,kDAAkD,SAAS;AAAA,IACzE;AAAA,IACC,GAAG;AAAA;AACN;",
+  "sourcesContent": ["/**\n * @module Drawer\n *\n * Bottom sheet drawer for mobile-friendly interactions. Built on Vaul library.\n * Supports drag-to-dismiss, snap points, and background scaling.\n *\n * @see {@link https://ui.shadcn.com/docs/components/drawer Shadcn Drawer}\n * @see {@link https://vaul.emilkowal.ski/ Vaul Documentation}\n *\n * @example\n * // Basic drawer\n * <Drawer>\n *   <DrawerTrigger asChild>\n *     <Button>Open Drawer</Button>\n *   </DrawerTrigger>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences</DrawerDescription>\n *     </DrawerHeader>\n *     <div className=\"p-4\">Content here</div>\n *     <DrawerFooter>\n *       <DrawerClose asChild>\n *         <Button variant=\"outline\">Close</Button>\n *       </DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n *\n * @example\n * // Controlled drawer with custom handle\n * const [open, setOpen] = useState(false);\n *\n * <Drawer open={open} onOpenChange={setOpen}>\n *   <DrawerContent handleColor=\"dark\">\n *     <DrawerTitle>Menu</DrawerTitle>\n *   </DrawerContent>\n * </Drawer>\n */\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * Root drawer component. Scales background by default.\n * @param shouldScaleBackground - Scale page content when drawer opens (default: true)\n */\nconst Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root\n    shouldScaleBackground={shouldScaleBackground}\n    {...props}\n  />\n);\n\nDrawer.displayName = \"Drawer\";\n\n/** Element that opens the drawer when clicked. Use `asChild` to wrap custom triggers. */\nconst DrawerTrigger = DrawerPrimitive.Trigger;\n\n/** Portal for rendering drawer outside the DOM hierarchy. */\nconst DrawerPortal = DrawerPrimitive.Portal;\n\n/** Closes the drawer when clicked. Use `asChild` to wrap custom close buttons. */\nconst DrawerClose = DrawerPrimitive.Close;\n\n/** Semi-transparent backdrop behind the drawer. */\nconst DrawerOverlay = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Overlay>>;\n}) => (\n  <DrawerPrimitive.Overlay\n    className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Main drawer content container. Slides up from bottom with drag handle.\n * @param handleColor - Handle bar color: `\"default\"`, `\"dark\"`, `\"light\"`, or `\"custom\"`\n * @param customHandleColor - Tailwind class for custom handle color (when handleColor=\"custom\")\n */\nconst DrawerContent = ({\n  className,\n  children,\n  handleColor = \"default\",\n  customHandleColor,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {\n  handleColor?: \"default\" | \"dark\" | \"light\" | \"custom\";\n  customHandleColor?: string;\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Content>>;\n}) => {\n  const getHandleColorClass = () => {\n    switch (handleColor) {\n      case \"dark\":\n        return \"bg-gray-300 dark:bg-gray-700\";\n      case \"light\":\n        return \"bg-gray-100 dark:bg-gray-900\";\n      case \"custom\":\n        return customHandleColor ?? \"bg-gray-200 dark:bg-gray-800\";\n      case \"default\":\n      default:\n        return \"bg-gray-200 dark:bg-gray-800\";\n    }\n  };\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-[9999] mt-16 flex h-auto flex-col rounded-t-[20px] border border-gray-200 bg-white px-6 pt-10 pb-12 dark:border-gray-800 dark:bg-gray-900\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"absolute top-2 right-0 left-0 mx-auto h-1 w-[100px] rounded-full\",\n            getHandleColorClass()\n          )}\n        />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n};\n\n/** Header section for drawer title and description. Centered on mobile, left-aligned on desktop. */\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n);\n\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Footer section for action buttons, pushed to bottom of drawer. */\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n);\n\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Drawer title with semibold weight. Required for accessibility. */\nconst DrawerTitle = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Title>>;\n}) => (\n  <DrawerPrimitive.Title\n    className={cn(\n      \"font-semibold text-lg leading-none tracking-tight\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Muted description text below the title. */\nconst DrawerDescription = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Description>>;\n}) => (\n  <DrawerPrimitive.Description\n    className={cn(\"text-gray-500 text-sm dark:text-gray-400\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],
+  "mappings": "AAqDE,cAkEI,YAlEJ;AAZF,SAAS,UAAU,uBAAuB;AAE1C,SAAS,UAAU;AAMnB,MAAM,SAAS,CAAC;AAAA,EACd,wBAAwB;AAAA,EACxB,GAAG;AACL,MACE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACC,GAAG;AAAA;AACN;AAGF,OAAO,cAAc;AAGrB,MAAM,gBAAgB,gBAAgB;AAGtC,MAAM,eAAe,gBAAgB;AAGrC,MAAM,cAAc,gBAAgB;AAGpC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW,GAAG,kCAAkC,SAAS;AAAA,IACzD;AAAA,IACC,GAAG;AAAA;AACN;AAQF,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAIM;AACJ,QAAM,sBAAsB,MAAM;AAChC,YAAQ,aAAa;AAAA,MACnB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO,qBAAqB;AAAA,MAC9B,KAAK;AAAA,MACL;AACE,eAAO;AAAA,IACX;AAAA,EACF;AAEA,SACE,qBAAC,gBACC;AAAA,wBAAC,iBAAc;AAAA,IACf;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,oBAAoB;AAAA,cACtB;AAAA;AAAA,UACF;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAGA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,6CAA6C,SAAS;AAAA,IACnE,GAAG;AAAA;AACN;AAGF,aAAa,cAAc;AAG3B,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,mCAAmC,SAAS;AAAA,IACzD,GAAG;AAAA;AACN;AAGF,aAAa,cAAc;AAG3B,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAIF,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW,GAAG,4CAA4C,SAAS;AAAA,IACnE;AAAA,IACC,GAAG;AAAA;AACN;",
   "names": []
 }

package/dist/components/label.js

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { Label as LabelPrimitive } from "radix-ui";
 import { cn } from "../lib/utils";
 const labelVariants = cva(
-  "font-semibold text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "block font-semibold text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 const Label = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,

package/dist/components/label.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/label.tsx"],
-  "sourcesContent": ["/**\n * @module Label\n *\n * Accessible label for form controls. Built on Radix UI Label primitive.\n * Automatically associates with form elements via `htmlFor` prop.\n *\n * @see {@link https://ui.shadcn.com/docs/components/label Shadcn Label}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/label Radix Label}\n *\n * @example\n * // Basic label with input\n * <Label htmlFor=\"email\">Email</Label>\n * <Input id=\"email\" type=\"email\" />\n *\n * @example\n * // With checkbox\n * <div className=\"flex items-center gap-2\">\n *   <Checkbox id=\"terms\" />\n *   <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n * </div>\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithoutRef, ElementRef, Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** CVA variants for label styling */\nconst labelVariants = cva(\n  \"font-semibold text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\ninterface LabelProps\n  extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n    VariantProps<typeof labelVariants> {\n  ref?: Ref<ElementRef<typeof LabelPrimitive.Root>>;\n}\n\n/**\n * Form label with accessible peer state handling.\n * Dims when associated form control is disabled.\n */\nconst Label = ({ className, ref, ...props }: LabelProps) => (\n  <LabelPrimitive.Root\n    className={cn(labelVariants(), className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport { Label };\n"],
+  "sourcesContent": ["/**\n * @module Label\n *\n * Accessible label for form controls. Built on Radix UI Label primitive.\n * Automatically associates with form elements via `htmlFor` prop.\n *\n * @see {@link https://ui.shadcn.com/docs/components/label Shadcn Label}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/label Radix Label}\n *\n * @example\n * // Basic label with input\n * <Label htmlFor=\"email\">Email</Label>\n * <Input id=\"email\" type=\"email\" />\n *\n * @example\n * // With checkbox\n * <div className=\"flex items-center gap-2\">\n *   <Checkbox id=\"terms\" />\n *   <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n * </div>\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithoutRef, ElementRef, Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** CVA variants for label styling */\nconst labelVariants = cva(\n  \"block font-semibold text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\ninterface LabelProps\n  extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n    VariantProps<typeof labelVariants> {\n  ref?: Ref<ElementRef<typeof LabelPrimitive.Root>>;\n}\n\n/**\n * Form label with accessible peer state handling.\n * Dims when associated form control is disabled.\n */\nconst Label = ({ className, ref, ...props }: LabelProps) => (\n  <LabelPrimitive.Root\n    className={cn(labelVariants(), className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport { Label };\n"],
   "mappings": "AA2CE;AAtBF,SAAS,WAA8B;AACvC,SAAS,SAAS,sBAAsB;AAGxC,SAAS,UAAU;AAGnB,MAAM,gBAAgB;AAAA,EACpB;AACF;AAYA,MAAM,QAAQ,CAAC,EAAE,WAAW,KAAK,GAAG,MAAM,MACxC;AAAA,EAAC,eAAe;AAAA,EAAf;AAAA,IACC,WAAW,GAAG,cAAc,GAAG,SAAS;AAAA,IACxC;AAAA,IACC,GAAG;AAAA;AACN;",
   "names": []
 }

package/dist/components/slider.js

@@ -61,7 +61,7 @@ const Slider = React.memo(
                 SliderPrimitive.Range,
                 {
                   className: cn(
-                    "absolute bg-brand-primary dark:bg-neutral-50",
+                    "absolute bg-brand-primary",
                     orientation === "horizontal" ? "h-full" : "right-0 w-full"
                   ),
                   "data-orientation": orientation
@@ -72,7 +72,7 @@ const Slider = React.memo(
           (props.value ?? props.defaultValue ?? []).map((_, index) => /* @__PURE__ */ jsx(
             SliderPrimitive.Thumb,
             {
-              className: "block h-3 w-3 rounded-full border-2 border-neutral-900 bg-brand-primary ring-offset-white transition-colors hover:cursor-grab focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:bg-neutral-950 dark:ring-offset-gray-950 dark:focus-visible:ring-neutral-300"
+              className: "block h-3 w-3 rounded-full border-2 border-gray-900 bg-brand-primary ring-offset-white transition-colors hover:cursor-grab focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50 dark:border-gray-50 dark:bg-gray-950 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300"
             },
             index
           ))

package/dist/components/slider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/slider.tsx"],
-  "sourcesContent": ["/**\n * @module Slider\n *\n * Range input slider with draggable thumb. Built on Radix UI Slider primitive.\n *\n * @see {@link https://ui.shadcn.com/docs/components/slider Shadcn Slider}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/slider Radix Slider}\n *\n * @example\n * // Basic slider\n * <Slider defaultValue={[50]} max={100} step={1} />\n *\n * @example\n * // With value display\n * <Slider defaultValue={[50]} max={100} showValue />\n *\n * @example\n * // Controlled slider\n * const [value, setValue] = useState([25]);\n *\n * <Slider value={value} onValueChange={setValue} max={100} />\n *\n * @example\n * // Vertical orientation\n * <Slider orientation=\"vertical\" className=\"h-48\" />\n */\nimport { cva } from \"class-variance-authority\";\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst sliderVariants = cva(\n  \"relative flex h-full w-full touch-none select-none items-center justify-center\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        dynamic: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nconst trackVariants = cva(\n  \"relative overflow-hidden rounded-full bg-gray-200 hover:cursor-pointer\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-gray-200\",\n        dynamic: \"bg-gray-100 dark:bg-gray-700\",\n      },\n      orientation: {\n        horizontal: \"h-1 w-full\",\n        vertical: \"h-full w-1\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      orientation: \"horizontal\",\n    },\n  }\n);\n\n/**\n * Props for the Slider component.\n * @property variant - Visual style: `\"default\"` or `\"dynamic\"`\n * @property showValue - Display current value next to slider (horizontal only)\n */\ninterface SliderProps\n  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n  variant?: \"default\" | \"dynamic\";\n  ref?: Ref<React.ElementRef<typeof SliderPrimitive.Root>>;\n  /** Display the current value to the right of the slider */\n  showValue?: boolean;\n}\n\nconst Slider = React.memo(\n  ({\n    className,\n    orientation = \"horizontal\",\n    variant,\n    showValue = false,\n    ref,\n    ...props\n  }: SliderProps) => {\n    const sliderElement = (\n      <SliderPrimitive.Root\n        className={cn(sliderVariants({ variant, className }))}\n        orientation={orientation}\n        ref={ref}\n        {...props}\n      >\n        <SliderPrimitive.Track\n          className={cn(trackVariants({ variant, orientation }))}\n        >\n          <SliderPrimitive.Range\n            className={cn(\n              \"absolute bg-brand-primary dark:bg-neutral-50\",\n              orientation === \"horizontal\" ? \"h-full\" : \"right-0 w-full\"\n            )}\n            data-orientation={orientation}\n          />\n        </SliderPrimitive.Track>\n        {(props.value ?? props.defaultValue ?? []).map((_, index) => (\n          <SliderPrimitive.Thumb\n            className=\"block h-3 w-3 rounded-full border-2 border-neutral-900 bg-brand-primary ring-offset-white transition-colors hover:cursor-grab focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:bg-neutral-950 dark:ring-offset-gray-950 dark:focus-visible:ring-neutral-300\"\n            key={index}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    );\n\n    if (showValue && orientation === \"horizontal\") {\n      return (\n        <div className=\"flex items-center gap-3\">\n          {sliderElement}\n          <span className=\"min-w-[2rem] text-right text-gray-700 text-sm tabular-nums dark:text-gray-200\">\n            {props.value?.at(0) ?? props.defaultValue?.at(0) ?? 0}\n          </span>\n        </div>\n      );\n    }\n\n    return sliderElement;\n  }\n);\n\nexport { Slider, sliderVariants };\nexport type { SliderProps };\n"],
+  "sourcesContent": ["/**\n * @module Slider\n *\n * Range input slider with draggable thumb. Built on Radix UI Slider primitive.\n *\n * @see {@link https://ui.shadcn.com/docs/components/slider Shadcn Slider}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/slider Radix Slider}\n *\n * @example\n * // Basic slider\n * <Slider defaultValue={[50]} max={100} step={1} />\n *\n * @example\n * // With value display\n * <Slider defaultValue={[50]} max={100} showValue />\n *\n * @example\n * // Controlled slider\n * const [value, setValue] = useState([25]);\n *\n * <Slider value={value} onValueChange={setValue} max={100} />\n *\n * @example\n * // Vertical orientation\n * <Slider orientation=\"vertical\" className=\"h-48\" />\n */\nimport { cva } from \"class-variance-authority\";\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst sliderVariants = cva(\n  \"relative flex h-full w-full touch-none select-none items-center justify-center\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        dynamic: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nconst trackVariants = cva(\n  \"relative overflow-hidden rounded-full bg-gray-200 hover:cursor-pointer\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-gray-200\",\n        dynamic: \"bg-gray-100 dark:bg-gray-700\",\n      },\n      orientation: {\n        horizontal: \"h-1 w-full\",\n        vertical: \"h-full w-1\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      orientation: \"horizontal\",\n    },\n  }\n);\n\n/**\n * Props for the Slider component.\n * @property variant - Visual style: `\"default\"` or `\"dynamic\"`\n * @property showValue - Display current value next to slider (horizontal only)\n */\ninterface SliderProps\n  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n  variant?: \"default\" | \"dynamic\";\n  ref?: Ref<React.ElementRef<typeof SliderPrimitive.Root>>;\n  /** Display the current value to the right of the slider */\n  showValue?: boolean;\n}\n\nconst Slider = React.memo(\n  ({\n    className,\n    orientation = \"horizontal\",\n    variant,\n    showValue = false,\n    ref,\n    ...props\n  }: SliderProps) => {\n    const sliderElement = (\n      <SliderPrimitive.Root\n        className={cn(sliderVariants({ variant, className }))}\n        orientation={orientation}\n        ref={ref}\n        {...props}\n      >\n        <SliderPrimitive.Track\n          className={cn(trackVariants({ variant, orientation }))}\n        >\n          <SliderPrimitive.Range\n            className={cn(\n              \"absolute bg-brand-primary\",\n              orientation === \"horizontal\" ? \"h-full\" : \"right-0 w-full\"\n            )}\n            data-orientation={orientation}\n          />\n        </SliderPrimitive.Track>\n        {(props.value ?? props.defaultValue ?? []).map((_, index) => (\n          <SliderPrimitive.Thumb\n            className=\"block h-3 w-3 rounded-full border-2 border-gray-900 bg-brand-primary ring-offset-white transition-colors hover:cursor-grab focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50 dark:border-gray-50 dark:bg-gray-950 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300\"\n            key={index}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    );\n\n    if (showValue && orientation === \"horizontal\") {\n      return (\n        <div className=\"flex items-center gap-3\">\n          {sliderElement}\n          <span className=\"min-w-[2rem] text-right text-gray-700 text-sm tabular-nums dark:text-gray-200\">\n            {props.value?.at(0) ?? props.defaultValue?.at(0) ?? 0}\n          </span>\n        </div>\n      );\n    }\n\n    return sliderElement;\n  }\n);\n\nexport { Slider, sliderVariants };\nexport type { SliderProps };\n"],
   "mappings": "AA2FM,SASI,KATJ;AAjEN,SAAS,WAAW;AACpB,SAAS,UAAU,uBAAuB;AAE1C,YAAY,WAAW;AAEvB,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,aAAa;AAAA,QACX,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAeA,MAAM,SAAS,MAAM;AAAA,EACnB,CAAC;AAAA,IACC;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,MAAmB;AACjB,UAAM,gBACJ;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,CAAC,CAAC;AAAA,QACpD;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,WAAW,GAAG,cAAc,EAAE,SAAS,YAAY,CAAC,CAAC;AAAA,cAErD;AAAA,gBAAC,gBAAgB;AAAA,gBAAhB;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,gBAAgB,eAAe,WAAW;AAAA,kBAC5C;AAAA,kBACA,oBAAkB;AAAA;AAAA,cACpB;AAAA;AAAA,UACF;AAAA,WACE,MAAM,SAAS,MAAM,gBAAgB,CAAC,GAAG,IAAI,CAAC,GAAG,UACjD;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,WAAU;AAAA;AAAA,YACL;AAAA,UACP,CACD;AAAA;AAAA;AAAA,IACH;AAGF,QAAI,aAAa,gBAAgB,cAAc;AAC7C,aACE,qBAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACD,oBAAC,UAAK,WAAU,iFACb,gBAAM,OAAO,GAAG,CAAC,KAAK,MAAM,cAAc,GAAG,CAAC,KAAK,GACtD;AAAA,SACF;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/dist/components/toast.js

@@ -153,13 +153,13 @@ const normalizeToastArgs = (messageOrOptions, options) => {
   }
   return messageOrOptions;
 };
-const toast = (messageOrOptions, options) => createGlobalToast("info", normalizeToastArgs(messageOrOptions, options));
-toast.success = (messageOrOptions, options) => createGlobalToast("success", normalizeToastArgs(messageOrOptions, options));
-toast.error = (messageOrOptions, options) => createGlobalToast("error", normalizeToastArgs(messageOrOptions, options));
-toast.info = (messageOrOptions, options) => createGlobalToast("info", normalizeToastArgs(messageOrOptions, options));
-toast.warning = (messageOrOptions, options) => createGlobalToast("warning", normalizeToastArgs(messageOrOptions, options));
-toast.loading = (messageOrOptions, options) => createGlobalToast("loading", normalizeToastArgs(messageOrOptions, options));
-toast.message = (messageOrOptions, options) => createGlobalToast("info", normalizeToastArgs(messageOrOptions, options));
+const toast = ((messageOrOptions, options) => createGlobalToast("info", normalizeToastArgs(messageOrOptions, options)));
+toast.success = ((messageOrOptions, options) => createGlobalToast("success", normalizeToastArgs(messageOrOptions, options)));
+toast.error = ((messageOrOptions, options) => createGlobalToast("error", normalizeToastArgs(messageOrOptions, options)));
+toast.info = ((messageOrOptions, options) => createGlobalToast("info", normalizeToastArgs(messageOrOptions, options)));
+toast.warning = ((messageOrOptions, options) => createGlobalToast("warning", normalizeToastArgs(messageOrOptions, options)));
+toast.loading = ((messageOrOptions, options) => createGlobalToast("loading", normalizeToastArgs(messageOrOptions, options)));
+toast.message = ((messageOrOptions, options) => createGlobalToast("info", normalizeToastArgs(messageOrOptions, options)));
 toast.promise = (promiseOrFn, states) => {
   const toastId = createGlobalToast("loading", states.loading);
   const promise = typeof promiseOrFn === "function" ? promiseOrFn() : promiseOrFn;

package/dist/components/toast.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/components/toast.tsx"],
   "sourcesContent": ["/**\n * @module Toast\n *\n * Toast notification system built on Sonner. Provides success, error, info, and warning variants.\n *\n * @see {@link https://ui.shadcn.com/docs/components/sonner Shadcn Sonner}\n * @see {@link https://sonner.emilkowal.ski/ Sonner Documentation}\n *\n * @example\n * // Setup: Add Toaster to your app root\n * <Toaster />\n *\n * @example\n * // Show toast notifications\n * toast(\"Default message\");\n * toast.success(\"Operation completed\");\n * toast.error(\"Something went wrong\");\n * toast.info(\"Information\");\n * toast.warning(\"Warning message\");\n *\n * @example\n * // With action button\n * toast({\n *   title: \"Item deleted\",\n *   action: {\n *     label: \"Undo\",\n *     onClick: () => undoDelete(),\n *   },\n * });\n *\n * @example\n * // Promise toast\n * const id = toast.promise(promise, {\n        loading: { title: \"Saving document...\" },\n        success: (data) => ({\n          title: `${data.name} saved successfully!`,\n          duration: 10_000,\n        }),\n\n        error: { title: \"Failed to save document\", duration: 10_000 },\n      });\n */\nimport { cva } from \"class-variance-authority\";\nimport type React from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n  type ExternalToast,\n  Toaster as SonnerToaster,\n  toast as sonnerToast,\n} from \"sonner\";\nimport { Button, type ButtonProps, cn } from \"..\";\nimport { Check, CircleX, InfoIcon, Loader, TriangleAlert, X } from \"../icons\";\n\ntype ToasterProps = React.ComponentProps<typeof SonnerToaster>;\ntype ToastVariant = \"error\" | \"info\" | \"loading\" | \"success\" | \"warning\";\n\nconst GLOBAL_TOASTER_ID = \"global\";\n\ntype GlobalToastAction = {\n  label: string;\n  onClick: () => void;\n};\n\ntype GlobalToastProps = {\n  id: string | number;\n  title?: string;\n  description?: string;\n  variant: ToastVariant;\n  action?: GlobalToastAction;\n};\n\nexport interface GlobalToastOptions extends ExternalToast {\n  title?: string;\n  description?: string;\n  action?: GlobalToastAction;\n}\n\nconst GlobalToastTitle = ({\n  className,\n  children,\n}: {\n  className?: string;\n  children: ReactNode;\n}) => {\n  if (!children) {\n    return;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"line-clamp-1 font-semibold text-black text-sm dark:text-white w-[90%]\",\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst GlobalToastDescription = ({ children }: { children: ReactNode }) => {\n  if (!children) {\n    return;\n  }\n\n  return (\n    <div className=\"line-clamp-2 font-normal text-gray-700 text-sm dark:text-gray-200 \">\n      {children}\n    </div>\n  );\n};\n\nconst globalToastIconVariants = cva(\n  \"size-7 flex-shrink-0 rounded-full flex items-center justify-center [&_svg]:size-4\",\n  {\n    variants: {\n      variant: {\n        error:\n          \"bg-red-50 dark:bg-red-950 [&_svg]:text-red-500 [&_svg]:dark:text-red-400\",\n        info: \"bg-gray-100 dark:bg-gray-800 [&_svg]:text-gray-700 [&_svg]:dark:text-gray-200\",\n        loading:\n          \"bg-gray-100 dark:bg-gray-800 [&_svg]:text-gray-700 [&_svg]:dark:text-gray-200\",\n        success:\n          \"bg-green-50 dark:bg-green-950 [&_svg]:text-green-500 [&_svg]:dark:text-green-400\",\n        warning:\n          \"bg-yellow-50 dark:bg-yellow-950 [&_svg]:text-yellow-500 [&_svg]:dark:text-yellow-400\",\n      },\n    },\n    defaultVariants: {\n      variant: \"info\",\n    },\n  }\n);\n\nconst GlobalToastIcon = ({ variant }: { variant: ToastVariant }) => {\n  if (variant === \"error\") {\n    return (\n      <span className={cn(globalToastIconVariants({ variant }))}>\n        <CircleX />\n      </span>\n    );\n  }\n\n  if (variant === \"info\") {\n    return (\n      <span className={cn(globalToastIconVariants({ variant }))}>\n        <InfoIcon />\n      </span>\n    );\n  }\n\n  if (variant === \"loading\") {\n    return (\n      <span className={cn(globalToastIconVariants({ variant }))}>\n        <Loader\n          className=\"animate-spin\"\n          style={{ animationDuration: \"1.5s\" }}\n        />\n      </span>\n    );\n  }\n\n  if (variant === \"success\") {\n    return (\n      <span className={cn(globalToastIconVariants({ variant }))}>\n        <Check />\n      </span>\n    );\n  }\n\n  if (variant === \"warning\") {\n    return (\n      <span className={cn(globalToastIconVariants({ variant }))}>\n        <TriangleAlert className=\"pb-[1px]\" />\n      </span>\n    );\n  }\n};\n\nconst globalToastLeftBorderVariants = cva(\"absolute top-0 left-0 h-full w-1\", {\n  variants: {\n    variant: {\n      error: \"bg-red-500 dark:bg-red-400\",\n      info: \"bg-gray-700 dark:bg-gray-200\",\n      loading: \"bg-gray-700 dark:bg-gray-200\",\n      success: \"bg-green-500 dark:bg-green-400\",\n      warning: \"bg-yellow-500 dark:bg-yellow-400\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst GlobalToastLeftBorder = ({ variant }: { variant: ToastVariant }) => (\n  <div className={cn(globalToastLeftBorderVariants({ variant }))} />\n);\n\nconst GlobalToastDismissButton = ({\n  toastId,\n}: {\n  toastId: number | string;\n}) => (\n  <Button\n    className=\"absolute top-1 right-1\"\n    onClick={() => sonnerToast.dismiss(toastId)}\n    size=\"icon\"\n    variant=\"subtle\"\n  >\n    <X className=\"size-5\" />\n  </Button>\n);\n\nconst GlobalToastActionButton = ({ onClick, ...props }: ButtonProps) => (\n  <Button onClick={onClick} size=\"sm\" variant=\"light\" {...props} />\n);\n\nexport const GlobalToast = (props: GlobalToastProps) => {\n  const { id, title, description, variant, action } = props;\n\n  return (\n    <div\n      className={cn(\n        \"flex max-h-24 min-h-16 w-80 md:w-[360px] items-center gap-2 rounded-lg border-1 border-gray-150 border-solid bg-white px-4 py-3 text-black shadow-md dark:border-gray-800 dark:bg-black dark:text-white\",\n        \"relative overflow-hidden\"\n      )}\n      key={id}\n    >\n      <GlobalToastLeftBorder variant={variant} />\n      <GlobalToastIcon variant={variant} />\n      <div className=\"flex w-full flex-col gap-0.5\">\n        <GlobalToastTitle className={action ? \"w-full\" : \"w-[90%]\"}>\n          {title}\n        </GlobalToastTitle>\n        <GlobalToastDescription>{description}</GlobalToastDescription>\n      </div>\n\n      {action ? (\n        <GlobalToastActionButton onClick={action.onClick}>\n          {action.label}\n        </GlobalToastActionButton>\n      ) : (\n        <GlobalToastDismissButton toastId={id} />\n      )}\n    </div>\n  );\n};\n\n/**\n * Toast container component. Place once at app root.\n * Positioned bottom-right by default, shows up to 4 toasts.\n */\nconst Toaster: React.FC<ToasterProps> = ({ toastOptions, ...props }) => (\n  <SonnerToaster\n    id={GLOBAL_TOASTER_ID}\n    position=\"bottom-right\"\n    visibleToasts={4}\n    {...props}\n  />\n);\n\nconst createGlobalToast = (\n  variant: ToastVariant,\n  options?: GlobalToastOptions\n) => {\n  const { action, description, title, id: customId, ...rest } = options || {};\n\n  const toastId = sonnerToast.custom(\n    (id) => (\n      <GlobalToast\n        action={action}\n        description={description}\n        id={customId || id}\n        title={title}\n        variant={variant}\n      />\n    ),\n    { id: customId, toasterId: GLOBAL_TOASTER_ID, ...rest }\n  );\n\n  // Return the custom ID if provided, otherwise return Sonner's generated ID\n  return customId !== undefined ? customId : toastId;\n};\n\n// Helper method to normalize toast arguments\nconst normalizeToastArgs = (\n  messageOrOptions?: GlobalToastOptions | string,\n  options?: GlobalToastOptions\n): GlobalToastOptions | undefined => {\n  if (typeof messageOrOptions === \"string\") {\n    return { ...options, title: messageOrOptions };\n  }\n\n  return messageOrOptions;\n};\n\ntype PromiseToastOptions<T> = {\n  loading: GlobalToastOptions;\n  success: GlobalToastOptions | ((data: T) => GlobalToastOptions);\n  error: GlobalToastOptions | ((error: unknown) => GlobalToastOptions);\n};\n\ntype ToastFunction = {\n  (message: string, options?: GlobalToastOptions): string | number;\n  (options: GlobalToastOptions): string | number;\n  success: {\n    (message: string, options?: GlobalToastOptions): string | number;\n    (options: GlobalToastOptions): string | number;\n  };\n  error: {\n    (message: string, options?: GlobalToastOptions): string | number;\n    (options: GlobalToastOptions): string | number;\n  };\n  info: {\n    (message: string, options?: GlobalToastOptions): string | number;\n    (options: GlobalToastOptions): string | number;\n  };\n  warning: {\n    (message: string, options?: GlobalToastOptions): string | number;\n    (options: GlobalToastOptions): string | number;\n  };\n  loading: {\n    (message: string, options?: GlobalToastOptions): string | number;\n    (options: GlobalToastOptions): string | number;\n  };\n  message: {\n    (message: string, options?: GlobalToastOptions): string | number;\n    (options: GlobalToastOptions): string | number;\n  };\n  custom: typeof sonnerToast.custom;\n  promise: <T>(\n    promise: Promise<T> | (() => Promise<T>),\n    options: PromiseToastOptions<T>\n  ) => Promise<T>;\n  dismiss: typeof sonnerToast.dismiss;\n  getHistory: typeof sonnerToast.getHistory;\n  getToasts: typeof sonnerToast.getToasts;\n};\n\nconst toast: ToastFunction = ((\n  messageOrOptions?: GlobalToastOptions | string,\n  options?: GlobalToastOptions\n) =>\n  createGlobalToast(\"info\", normalizeToastArgs(messageOrOptions, options))) as ToastFunction;\n\ntoast.success = ((\n  messageOrOptions?: GlobalToastOptions | string,\n  options?: GlobalToastOptions\n) =>\n  createGlobalToast(\"success\", normalizeToastArgs(messageOrOptions, options))) as ToastFunction[\"success\"];\n\ntoast.error = ((\n  messageOrOptions?: GlobalToastOptions | string,\n  options?: GlobalToastOptions\n) =>\n  createGlobalToast(\"error\", normalizeToastArgs(messageOrOptions, options))) as ToastFunction[\"error\"];\n\ntoast.info = ((\n  messageOrOptions?: GlobalToastOptions | string,\n  options?: GlobalToastOptions\n) =>\n  createGlobalToast(\"info\", normalizeToastArgs(messageOrOptions, options))) as ToastFunction[\"info\"];\n\ntoast.warning = ((\n  messageOrOptions?: GlobalToastOptions | string,\n  options?: GlobalToastOptions\n) =>\n  createGlobalToast(\"warning\", normalizeToastArgs(messageOrOptions, options))) as ToastFunction[\"warning\"];\n\ntoast.loading = ((\n  messageOrOptions?: GlobalToastOptions | string,\n  options?: GlobalToastOptions\n) =>\n  createGlobalToast(\"loading\", normalizeToastArgs(messageOrOptions, options))) as ToastFunction[\"loading\"];\n\ntoast.message = ((\n  messageOrOptions?: GlobalToastOptions | string,\n  options?: GlobalToastOptions\n) =>\n  createGlobalToast(\"info\", normalizeToastArgs(messageOrOptions, options))) as ToastFunction[\"message\"];\n\ntoast.promise = <T,>(\n  promiseOrFn: Promise<T> | (() => Promise<T>),\n  states: PromiseToastOptions<T>\n): Promise<T> => {\n  const toastId = createGlobalToast(\"loading\", states.loading);\n  const promise =\n    typeof promiseOrFn === \"function\" ? promiseOrFn() : promiseOrFn;\n\n  promise\n    .then((data) => {\n      const successToastOptions =\n        typeof states.success === \"function\"\n          ? states.success(data)\n          : states.success;\n\n      const { title, description, action, ...rest } = successToastOptions || {};\n\n      sonnerToast.custom(\n        (id) => (\n          <GlobalToast\n            action={action}\n            description={description}\n            id={id}\n            title={title}\n            variant=\"success\"\n          />\n        ),\n        { id: toastId, toasterId: GLOBAL_TOASTER_ID, ...rest }\n      );\n    })\n    .catch((error) => {\n      const errorToastOptions =\n        typeof states.error === \"function\" ? states.error(error) : states.error;\n\n      const { title, description, action, ...rest } = errorToastOptions || {};\n\n      sonnerToast.custom(\n        (id) => (\n          <GlobalToast\n            action={action}\n            description={description}\n            id={id}\n            title={title}\n            variant=\"error\"\n          />\n        ),\n        { id: toastId, toasterId: GLOBAL_TOASTER_ID, ...rest }\n      );\n    });\n\n  return promise;\n};\n\ntoast.custom = sonnerToast.custom;\ntoast.dismiss = sonnerToast.dismiss;\ntoast.getHistory = sonnerToast.getHistory;\ntoast.getToasts = sonnerToast.getToasts;\n\nexport { Toaster, toast, type ToasterProps };\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

package/dist/styles/index.v4.css

@@ -0,0 +1,49 @@
+/**
+ * Cadence Design System - Tailwind CSS v4 Entry Point
+ *
+ * This is the main stylesheet for Cadence when using Tailwind CSS v4.
+ * Import this in your application after importing the Tailwind v4 config.
+ *
+ * @example
+ * // app.css
+ * @import "tailwindcss";
+ * @import "@music-vine/cadence/tailwind.config.v4";
+ * @import "@music-vine/cadence/styles.v4";
+ *
+ * @source "./src/**\/*.{js,ts,jsx,tsx}";
+ */
+
+/* ================================
+   Base Layer - CSS Variables
+   ================================ */
+@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;
+
+    /* Focus Ring - Follows brand color */
+    --focus-ring: var(--brand-primary);
+    --focus-ring-offset: var(--background);
+  }
+
+  .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;
+
+    /* Focus Ring - Follows brand color */
+    --focus-ring: var(--brand-primary);
+    --focus-ring-offset: var(--background);
+  }
+}