@music-vine/cadence 3.0.2 → 3.1.1

package/dist/components/badge.d.ts

@@ -29,8 +29,8 @@ import type * as React from "react";
  * Includes color variants matching Button component for consistency.
  */
 declare const badgeVariants: (props?: ({
-    variant?: "contrast" | "bold" | "white" | "transparent" | "light" | "subtle" | "brand" | "brandSecondary" | "success" | "error" | "primary" | "secondary" | "destructive" | "brandLight" | "outline" | null | undefined;
-    size?: "xs" | "sm" | "lg" | "default" | "icon" | null | undefined;
+    variant?: "bold" | "white" | "transparent" | "light" | "subtle" | "brand" | "brandSecondary" | "contrast" | "success" | "error" | "primary" | "secondary" | "destructive" | "brandLight" | "outline" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | null | undefined;
     shadow?: boolean | null | undefined;
     strong?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/button.d.ts

@@ -47,10 +47,10 @@ import type { ButtonHTMLAttributes, Ref } from "react";
 type ButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "xl";
 type ButtonFontSize = "xxs" | "xs" | "sm" | "base" | "lg" | "xl" | null;
 declare const buttonVariants: (props?: ({
-    variant?: "contrast" | "bold" | "transparent" | "light" | "subtle" | "brand" | "brandSecondary" | "success" | "error" | null | undefined;
-    size?: "xs" | "sm" | "lg" | "xl" | "default" | "icon" | null | undefined;
-    fontSize?: "xs" | "sm" | "base" | "lg" | "xl" | "xxs" | "null" | null | undefined;
-    borderRadius?: "rounded" | "sm" | "default" | "full" | null | undefined;
+    variant?: "bold" | "transparent" | "light" | "subtle" | "brand" | "brandSecondary" | "contrast" | "success" | "error" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    fontSize?: "base" | "xs" | "sm" | "lg" | "xl" | "xxs" | "null" | null | undefined;
+    borderRadius?: "default" | "sm" | "rounded" | "full" | null | undefined;
     border?: boolean | null | undefined;
     noFeedback?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -96,7 +96,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Om
 declare const Button: ({ className, variant, size, borderRadius, border, noFeedback, asChild, type, children, fontSize, icon, ref, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 /** CVA variants for Loading spinner sizing */
 declare const loadingVariants: (props?: ({
-    size?: "xs" | "sm" | "lg" | "xl" | "default" | "icon" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | null | undefined;
     visible?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**

package/dist/components/card.js

@@ -4,7 +4,7 @@ const Card = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
-      "rounded-lg border border-gray-150 border-solid bg-white text-gray-950 shadow-card dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
+      "rounded-lg border border-gray-150 border-solid bg-white text-gray-950 shadow-card dark:border-gray-800 dark:bg-gray-875 dark:text-gray-50",
       className
     ),
     ref,

package/dist/components/card.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/card.tsx"],
-  "sourcesContent": ["/**\n * @module Card\n *\n * Container component for grouping related content with consistent styling.\n * Provides structured sections for headers, content, and footers.\n *\n * @see {@link https://ui.shadcn.com/docs/components/card Shadcn Card}\n *\n * @example\n * // Basic card\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Subscription</CardTitle>\n *     <CardDescription>Your current plan details</CardDescription>\n *   </CardHeader>\n *   <CardContent>\n *     <p>Premium Plan - $9.99/month</p>\n *   </CardContent>\n *   <CardFooter>\n *     <Button>Manage</Button>\n *   </CardFooter>\n * </Card>\n */\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Main card container with border, shadow, and rounded corners. */\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst Card = ({ className, ref, ...props }: CardProps) => (\n  <div\n    className={cn(\n      \"rounded-lg border border-gray-150 border-solid bg-white text-gray-950 shadow-card dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Card header section with vertical spacing for title and description. */\ninterface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CardHeader = ({ className, ref, ...props }: CardHeaderProps) => (\n  <div\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Card title with semibold weight and larger text. */\ninterface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CardTitle = ({ className, ref, ...props }: CardTitleProps) => (\n  <div\n    className={cn(\n      \"font-semibold text-2xl leading-none tracking-tight\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Muted description text below the card title. */\ninterface CardDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CardDescription = ({\n  className,\n  ref,\n  ...props\n}: CardDescriptionProps) => (\n  <div\n    className={cn(\"text-gray-600 text-sm dark:text-gray-400\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Main content area of the card. */\ninterface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CardContent = ({ className, ref, ...props }: CardContentProps) => (\n  <div className={cn(\"p-6 pt-0\", className)} ref={ref} {...props} />\n);\n\n/** Card footer section, typically for actions/buttons. */\ninterface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CardFooter = ({ className, ref, ...props }: CardFooterProps) => (\n  <div\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n};\n"],
+  "sourcesContent": ["/**\n * @module Card\n *\n * Container component for grouping related content with consistent styling.\n * Provides structured sections for headers, content, and footers.\n *\n * @see {@link https://ui.shadcn.com/docs/components/card Shadcn Card}\n *\n * @example\n * // Basic card\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Subscription</CardTitle>\n *     <CardDescription>Your current plan details</CardDescription>\n *   </CardHeader>\n *   <CardContent>\n *     <p>Premium Plan - $9.99/month</p>\n *   </CardContent>\n *   <CardFooter>\n *     <Button>Manage</Button>\n *   </CardFooter>\n * </Card>\n */\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Main card container with border, shadow, and rounded corners. */\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst Card = ({ className, ref, ...props }: CardProps) => (\n  <div\n    className={cn(\n      \"rounded-lg border border-gray-150 border-solid bg-white text-gray-950 shadow-card dark:border-gray-800 dark:bg-gray-875 dark:text-gray-50\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Card header section with vertical spacing for title and description. */\ninterface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CardHeader = ({ className, ref, ...props }: CardHeaderProps) => (\n  <div\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Card title with semibold weight and larger text. */\ninterface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CardTitle = ({ className, ref, ...props }: CardTitleProps) => (\n  <div\n    className={cn(\n      \"font-semibold text-2xl leading-none tracking-tight\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Muted description text below the card title. */\ninterface CardDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CardDescription = ({\n  className,\n  ref,\n  ...props\n}: CardDescriptionProps) => (\n  <div\n    className={cn(\"text-gray-600 text-sm dark:text-gray-400\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Main content area of the card. */\ninterface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CardContent = ({ className, ref, ...props }: CardContentProps) => (\n  <div className={cn(\"p-6 pt-0\", className)} ref={ref} {...props} />\n);\n\n/** Card footer section, typically for actions/buttons. */\ninterface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CardFooter = ({ className, ref, ...props }: CardFooterProps) => (\n  <div\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n};\n"],
   "mappings": "AAiCE;AARF,SAAS,UAAU;AAOnB,MAAM,OAAO,CAAC,EAAE,WAAW,KAAK,GAAG,MAAM,MACvC;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAQF,MAAM,aAAa,CAAC,EAAE,WAAW,KAAK,GAAG,MAAM,MAC7C;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACxD;AAAA,IACC,GAAG;AAAA;AACN;AAQF,MAAM,YAAY,CAAC,EAAE,WAAW,KAAK,GAAG,MAAM,MAC5C;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAQF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,4CAA4C,SAAS;AAAA,IACnE;AAAA,IACC,GAAG;AAAA;AACN;AAQF,MAAM,cAAc,CAAC,EAAE,WAAW,KAAK,GAAG,MAAM,MAC9C,oBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GAAG,KAAW,GAAG,OAAO;AAQlE,MAAM,aAAa,CAAC,EAAE,WAAW,KAAK,GAAG,MAAM,MAC7C;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,8BAA8B,SAAS;AAAA,IACrD;AAAA,IACC,GAAG;AAAA;AACN;",
   "names": []
 }

package/dist/components/dialog.js

@@ -35,7 +35,7 @@ const DialogContent = ({
     DialogPrimitive.Content,
     {
       className: cn(
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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-875",
         className
       ),
       ref,

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 * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { headingVariants } from \"./typography/heading\";\nimport { textVariants } 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 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-hidden 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  <DialogPrimitive.Title\n    className={cn(\n      headingVariants({ variant: \"h5\", fontFamily: \"brand\" }),\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\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  <DialogPrimitive.Description\n    className={cn(textVariants(), \"text-sm\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\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 * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { headingVariants } from \"./typography/heading\";\nimport { textVariants } 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 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-875\",\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-hidden 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  <DialogPrimitive.Title\n    className={cn(\n      headingVariants({ variant: \"h5\", fontFamily: \"brand\" }),\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\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  <DialogPrimitive.Description\n    className={cn(textVariants(), \"text-sm\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],
   "mappings": "AAyEE,cAqCM,YArCN;AA9BF,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAIlB,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAG7B,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;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW;AAAA,MACT,gBAAgB,EAAE,SAAS,MAAM,YAAY,QAAQ,CAAC;AAAA,MACtD;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,aAAa,GAAG,WAAW,SAAS;AAAA,IAClD;AAAA,IACC,GAAG;AAAA;AACN;",
   "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-gray-200 bg-white px-6 pt-10 pb-12 dark:border-gray-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-875",
           className
         ),
         ref,

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 */\n\nimport type * as React from \"react\";\nimport type { Ref } 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  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n};\n"],
+  "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 */\n\nimport type * as React from \"react\";\nimport type { Ref } 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-875\",\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  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n};\n"],
   "mappings": "AAsDE,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/input.d.ts

@@ -35,7 +35,7 @@
 import { type VariantProps } from "class-variance-authority";
 import type { Ref } from "react";
 declare const inputVariants: (props?: ({
-    size?: "sm" | "default" | "auto" | null | undefined;
+    size?: "default" | "auto" | "sm" | null | undefined;
     hasLeftIcon?: boolean | null | undefined;
     hasRightIcon?: boolean | null | undefined;
     type?: "search" | null | undefined;

package/dist/components/popover.js

@@ -16,7 +16,7 @@ const PopoverContent = ({
   {
     align,
     className: cn(
-      "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-875 dark:text-gray-50",
       className
     ),
     ref,

package/dist/components/popover.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/popover.tsx"],
-  "sourcesContent": ["/**\n * @module Popover\n *\n * Floating content panel anchored to a trigger element. Built on Radix UI Popover primitive.\n * Supports controlled/uncontrolled modes, custom positioning, and focus management.\n *\n * @see {@link https://ui.shadcn.com/docs/components/popover Shadcn Popover}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/popover Radix Popover}\n *\n * @example\n * // Basic popover\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button>Open Popover</Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content here</p>\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // Controlled popover with custom positioning\n * const [open, setOpen] = useState(false);\n *\n * <Popover open={open} onOpenChange={setOpen}>\n *   <PopoverTrigger>Settings</PopoverTrigger>\n *   <PopoverContent align=\"start\" sideOffset={8}>\n *     <SettingsForm onSave={() => setOpen(false)} />\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // With custom anchor point\n * <Popover>\n *   <PopoverAnchor asChild>\n *     <div>Anchor element (popover positions relative to this)</div>\n *   </PopoverAnchor>\n *   <PopoverTrigger>Open</PopoverTrigger>\n *   <PopoverContent>Content</PopoverContent>\n * </Popover>\n */\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Root component that manages popover open/closed state. */\nconst Popover = PopoverPrimitive.Root;\n\n/** Element that toggles the popover when clicked. Use `asChild` to wrap custom elements. */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\n/** Alternative anchor point for popover positioning (separate from trigger). */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\n/**\n * Popover content container. Animated on open/close.\n * @param align - Horizontal alignment: `\"start\"`, `\"center\"` (default), or `\"end\"`\n * @param sideOffset - Distance from anchor in pixels (default: 4)\n * @param forceMount - Keep mounted in DOM even when closed\n */\nconst PopoverContent = ({\n  className,\n  forceMount,\n  align = \"center\",\n  sideOffset = 4,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n  ref?: Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;\n}) => (\n  <PopoverPrimitive.Portal forceMount={forceMount}>\n    <PopoverPrimitive.Content\n      align={align}\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50\",\n        className\n      )}\n      ref={ref}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n);\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],
+  "sourcesContent": ["/**\n * @module Popover\n *\n * Floating content panel anchored to a trigger element. Built on Radix UI Popover primitive.\n * Supports controlled/uncontrolled modes, custom positioning, and focus management.\n *\n * @see {@link https://ui.shadcn.com/docs/components/popover Shadcn Popover}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/popover Radix Popover}\n *\n * @example\n * // Basic popover\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button>Open Popover</Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content here</p>\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // Controlled popover with custom positioning\n * const [open, setOpen] = useState(false);\n *\n * <Popover open={open} onOpenChange={setOpen}>\n *   <PopoverTrigger>Settings</PopoverTrigger>\n *   <PopoverContent align=\"start\" sideOffset={8}>\n *     <SettingsForm onSave={() => setOpen(false)} />\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // With custom anchor point\n * <Popover>\n *   <PopoverAnchor asChild>\n *     <div>Anchor element (popover positions relative to this)</div>\n *   </PopoverAnchor>\n *   <PopoverTrigger>Open</PopoverTrigger>\n *   <PopoverContent>Content</PopoverContent>\n * </Popover>\n */\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Root component that manages popover open/closed state. */\nconst Popover = PopoverPrimitive.Root;\n\n/** Element that toggles the popover when clicked. Use `asChild` to wrap custom elements. */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\n/** Alternative anchor point for popover positioning (separate from trigger). */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\n/**\n * Popover content container. Animated on open/close.\n * @param align - Horizontal alignment: `\"start\"`, `\"center\"` (default), or `\"end\"`\n * @param sideOffset - Distance from anchor in pixels (default: 4)\n * @param forceMount - Keep mounted in DOM even when closed\n */\nconst PopoverContent = ({\n  className,\n  forceMount,\n  align = \"center\",\n  sideOffset = 4,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n  ref?: Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;\n}) => (\n  <PopoverPrimitive.Portal forceMount={forceMount}>\n    <PopoverPrimitive.Content\n      align={align}\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-875 dark:text-gray-50\",\n        className\n      )}\n      ref={ref}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n);\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],
   "mappings": "AAyEI;AAhCJ,SAAS,WAAW,wBAAwB;AAI5C,SAAS,UAAU;AAGnB,MAAM,UAAU,iBAAiB;AAGjC,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAQvC,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAGE,oBAAC,iBAAiB,QAAjB,EAAwB,YACvB;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,GACF;",
   "names": []
 }

package/dist/components/textarea.d.ts

@@ -18,7 +18,7 @@
 import { type VariantProps } from "class-variance-authority";
 import type { Ref } from "react";
 declare const textareaVariants: (props?: ({
-    size?: "sm" | "default" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
     resize?: "none" | "horizontal" | "vertical" | "both" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**

package/dist/components/typography/list.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 import type { Ref } from "react";
 declare const listVariants: (props?: ({
-    size?: "sm" | "lg" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
     variant?: "ordered" | "custom" | "unordered" | null | undefined;
     color?: "default" | "modal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/lib/utils.d.ts

@@ -1,12 +1,25 @@
 import { type ClassValue } from "clsx";
 /**
- * Merge Tailwind CSS classes with clsx and tailwind-merge.
- * Supports both standard Tailwind classes and fluid-tailwind text sizing.
- * This ensures proper handling of conflicting classes.
+ * `twMerge` from `fluid-tailwindcss/tailwind-merge` is a tailwind-merge
+ * instance preconfigured to recognise every `fl-*` utility (padding,
+ * margin, gap, text, sizing, inset, border-radius, …) so merging works
+ * correctly out of the box:
  *
- * Fluid classes are expanded to conflict at multiple modifier levels:
- * - `@md:fl-text-2xl/3xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl`
- * - This ensures fluid classes override all related text sizing
+ * - Fluid and standard utilities conflict at the same modifier level
+ *   (e.g. `@md:fl-text-2xl/3xl` overrides `@md:text-5xl`).
+ * - A container-prefixed fluid utility does NOT override its un-prefixed
+ *   counterpart (e.g. `@md:fl-text-2xl/3xl` leaves `text-4xl` intact),
+ *   matching the CSS cascade — the prefixed rule only applies inside the
+ *   container query, so the base utility must survive as the mobile
+ *   fallback.
+ *
+ * This replaces the previous hand-rolled adapter that was ported from
+ * `fluid-tailwind` (the `~`-prefix variant). The codebase no longer uses
+ * `~`-prefixed fluid classes — `fluid-tailwindcss` is the sole fluid plugin.
+ */
+/**
+ * Merge Tailwind CSS classes with clsx and tailwind-merge, with fluid utility
+ * conflict resolution.
  */
 export declare function cn(...inputs: ClassValue[]): string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AA8E7C;;;;;;;;GAQG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAqBzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;GAGG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -1,59 +1,7 @@
 import { clsx } from "clsx";
-import { extendTailwindMerge, mergeConfigs } from "tailwind-merge";
-const isFluidTextSize = (classPart) => {
-  const fluidPattern = /^fl-text-([a-z0-9]+)\/([a-z0-9]+)$/;
-  const match = classPart.match(fluidPattern);
-  if (!match) {
-    return false;
-  }
-  const [, startSize, endSize] = match;
-  const validSizes = [
-    "xs",
-    "sm",
-    "base",
-    "lg",
-    "xl",
-    "2xl",
-    "3xl",
-    "4xl",
-    "5xl",
-    "6xl",
-    "7xl",
-    "8xl",
-    "9xl"
-  ];
-  return validSizes.includes(startSize) && validSizes.includes(endSize);
-};
-const customTwMerge = extendTailwindMerge((config) => {
-  return mergeConfigs(config, {
-    extend: {
-      classGroups: {
-        // Extend font-size class group to support fluid syntax
-        // Top-level validator receives the full className (e.g., "fl-text-2xl/3xl")
-        "font-size": [isFluidTextSize]
-      }
-    },
-    // Parse className to extract modifiers and base class name
-    // For @md:fl-text-4xl/5xl → modifiers:[@md], baseClassName:fl-text-4xl/5xl
-    experimentalParseClassName: ({ className, parseClassName }) => {
-      return parseClassName(className);
-    }
-  });
-});
+import { twMerge } from "fluid-tailwindcss/tailwind-merge";
 function cn(...inputs) {
-  const classList = clsx(inputs);
-  const expanded = classList.split(" ").flatMap((className) => {
-    const fluidWithModifier = className.match(
-      /^(@[\w-]+):fl-text-(\w+)\/(\w+)$/
-    );
-    if (fluidWithModifier) {
-      const [, modifier, startSize, endSize] = fluidWithModifier;
-      const baseFluid = `fl-text-${startSize}/${endSize}`;
-      return [className, baseFluid];
-    }
-    return [className];
-  });
-  return customTwMerge(expanded.join(" "));
+  return twMerge(clsx(inputs));
 }
 export {
   cn

package/dist/lib/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/utils.ts"],
-  "sourcesContent": ["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge, mergeConfigs } from \"tailwind-merge\";\n\n/**\n * Fluid-tailwind support for tailwind-merge.\n * Adapted from @fluid-tailwind/tailwind-merge source code.\n *\n * **How it works:**\n * 1. Fluid classes with modifiers (e.g., `@md:fl-text-2xl/3xl`) are expanded\n *    to include both the modified and base versions\n * 2. This ensures they conflict at multiple modifier levels:\n *    - `@md:fl-text-2xl/3xl` conflicts with `@md:text-5xl` (responsive)\n *    - `@md:fl-text-2xl/3xl` conflicts with `text-4xl` (base)\n * 3. Simple fluid classes (e.g., `fl-text-2xl/3xl`) conflict with `text-4xl`\n *\n * **Supported patterns:**\n * - `fl-text-4xl/5xl` conflicts with `text-4xl` \u2713\n * - `@md:fl-text-4xl/5xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl` \u2713\n * - Fluid text sizing with any container query breakpoint \u2713\n *\n * This implementation ensures that passing a fluid className overrides all\n * related text sizing classes, as expected in a component library.\n */\n\n/**\n * Validator for fluid text sizes with `/` separator.\n * This matches the full className including prefix and postfix.\n * Tailwind-merge class groups can receive full className for top-level validators.\n */\nconst isFluidTextSize = (classPart: string): boolean => {\n  // Match full fluid class patterns: fl-text-X/Y\n  const fluidPattern = /^fl-text-([a-z0-9]+)\\/([a-z0-9]+)$/;\n  const match = classPart.match(fluidPattern);\n\n  if (!match) {\n    return false;\n  }\n\n  const [, startSize, endSize] = match;\n  const validSizes = [\n    \"xs\",\n    \"sm\",\n    \"base\",\n    \"lg\",\n    \"xl\",\n    \"2xl\",\n    \"3xl\",\n    \"4xl\",\n    \"5xl\",\n    \"6xl\",\n    \"7xl\",\n    \"8xl\",\n    \"9xl\",\n  ];\n\n  return validSizes.includes(startSize) && validSizes.includes(endSize);\n};\n\n/**\n * Custom tailwind-merge with fluid text size support.\n */\nconst customTwMerge = extendTailwindMerge((config) => {\n  return mergeConfigs(config, {\n    extend: {\n      classGroups: {\n        // Extend font-size class group to support fluid syntax\n        // Top-level validator receives the full className (e.g., \"fl-text-2xl/3xl\")\n        \"font-size\": [isFluidTextSize],\n      },\n    },\n    // Parse className to extract modifiers and base class name\n    // For @md:fl-text-4xl/5xl \u2192 modifiers:[@md], baseClassName:fl-text-4xl/5xl\n    experimentalParseClassName: ({ className, parseClassName }) => {\n      return parseClassName(className);\n    },\n  });\n});\n\n/**\n * Merge Tailwind CSS classes with clsx and tailwind-merge.\n * Supports both standard Tailwind classes and fluid-tailwind text sizing.\n * This ensures proper handling of conflicting classes.\n *\n * Fluid classes are expanded to conflict at multiple modifier levels:\n * - `@md:fl-text-2xl/3xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl`\n * - This ensures fluid classes override all related text sizing\n */\nexport function cn(...inputs: ClassValue[]) {\n  const classList = clsx(inputs);\n\n  // Expand fluid classes to conflict at multiple modifier levels\n  const expanded = classList.split(\" \").flatMap((className) => {\n    // Match fluid classes with modifiers: @md:fl-text-2xl/3xl\n    const fluidWithModifier = className.match(\n      /^(@[\\w-]+):fl-text-(\\w+)\\/(\\w+)$/\n    );\n    if (fluidWithModifier) {\n      const [, modifier, startSize, endSize] = fluidWithModifier;\n      const baseFluid = `fl-text-${startSize}/${endSize}`;\n      // Return both the modified version and base version\n      // This makes it conflict with both @md:text-* and text-*\n      return [className, baseFluid];\n    }\n\n    return [className];\n  });\n\n  return customTwMerge(expanded.join(\" \"));\n}\n"],
-  "mappings": "AAAA,SAA0B,YAAY;AACtC,SAAS,qBAAqB,oBAAoB;AA4BlD,MAAM,kBAAkB,CAAC,cAA+B;AAEtD,QAAM,eAAe;AACrB,QAAM,QAAQ,UAAU,MAAM,YAAY;AAE1C,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,CAAC,EAAE,WAAW,OAAO,IAAI;AAC/B,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,WAAW,SAAS,SAAS,KAAK,WAAW,SAAS,OAAO;AACtE;AAKA,MAAM,gBAAgB,oBAAoB,CAAC,WAAW;AACpD,SAAO,aAAa,QAAQ;AAAA,IAC1B,QAAQ;AAAA,MACN,aAAa;AAAA;AAAA;AAAA,QAGX,aAAa,CAAC,eAAe;AAAA,MAC/B;AAAA,IACF;AAAA;AAAA;AAAA,IAGA,4BAA4B,CAAC,EAAE,WAAW,eAAe,MAAM;AAC7D,aAAO,eAAe,SAAS;AAAA,IACjC;AAAA,EACF,CAAC;AACH,CAAC;AAWM,SAAS,MAAM,QAAsB;AAC1C,QAAM,YAAY,KAAK,MAAM;AAG7B,QAAM,WAAW,UAAU,MAAM,GAAG,EAAE,QAAQ,CAAC,cAAc;AAE3D,UAAM,oBAAoB,UAAU;AAAA,MAClC;AAAA,IACF;AACA,QAAI,mBAAmB;AACrB,YAAM,CAAC,EAAE,UAAU,WAAW,OAAO,IAAI;AACzC,YAAM,YAAY,WAAW,SAAS,IAAI,OAAO;AAGjD,aAAO,CAAC,WAAW,SAAS;AAAA,IAC9B;AAEA,WAAO,CAAC,SAAS;AAAA,EACnB,CAAC;AAED,SAAO,cAAc,SAAS,KAAK,GAAG,CAAC;AACzC;",
+  "sourcesContent": ["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"fluid-tailwindcss/tailwind-merge\";\n\n/**\n * `twMerge` from `fluid-tailwindcss/tailwind-merge` is a tailwind-merge\n * instance preconfigured to recognise every `fl-*` utility (padding,\n * margin, gap, text, sizing, inset, border-radius, \u2026) so merging works\n * correctly out of the box:\n *\n * - Fluid and standard utilities conflict at the same modifier level\n *   (e.g. `@md:fl-text-2xl/3xl` overrides `@md:text-5xl`).\n * - A container-prefixed fluid utility does NOT override its un-prefixed\n *   counterpart (e.g. `@md:fl-text-2xl/3xl` leaves `text-4xl` intact),\n *   matching the CSS cascade \u2014 the prefixed rule only applies inside the\n *   container query, so the base utility must survive as the mobile\n *   fallback.\n *\n * This replaces the previous hand-rolled adapter that was ported from\n * `fluid-tailwind` (the `~`-prefix variant). The codebase no longer uses\n * `~`-prefixed fluid classes \u2014 `fluid-tailwindcss` is the sole fluid plugin.\n */\n\n/**\n * Merge Tailwind CSS classes with clsx and tailwind-merge, with fluid utility\n * conflict resolution.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],
+  "mappings": "AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAyBjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;",
   "names": []
 }

package/dist/styles/storybook.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
-@import "../../tailwind.config.v4.css";
-@import "./index.v4.css";
+@import "../../tailwind.config.css";
+@import "./index.css";
 
 /* Storybook-specific global styles */
 body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music-vine/cadence",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -94,6 +94,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.5.1",
+    "fluid-tailwindcss": "^1.0.5",
     "lodash": "^4.18.1",
     "lucide-react": "^0.531.0",
     "motion": "^12.0.0",