@music-vine/cadence 3.0.1 → 3.1.0

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/badge.js

@@ -27,7 +27,7 @@ const badgeVariants = cva(
       size: {
         default: "h-8 px-4 py-2 leading-8",
         xs: "h-5 gap-1.5 px-2 text-xs leading-5",
-        sm: "h-6 px-2.5 leading-6 text-sm",
+        sm: "h-6 px-2.5 text-sm leading-6",
         lg: "h-10 gap-4 px-8 text-lg leading-10",
         icon: "h-8 w-8 leading-8"
       },

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-hidden 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:\n          \"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:\n          \"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 leading-6 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-hidden 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:\n          \"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:\n          \"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-sm leading-6\",\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": "AAmII;AA3GJ,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,OACE;AAAA,QACF,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,YACE;AAAA,QACF,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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music-vine/cadence",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "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",
@@ -105,7 +106,6 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.3",
-    "@playwright/test": "^1.58.2",
     "@storybook/addon-a11y": "^10.1.11",
     "@storybook/addon-docs": "^10.1.11",
     "@storybook/addon-links": "^10.1.11",
@@ -116,7 +116,6 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash": "^4.17.13",
-    "@types/pixelmatch": "^5.2.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitest/coverage-v8": "^3.2.4",
@@ -125,14 +124,10 @@
     "esbuild": "^0.25.0",
     "glob": "^11.0.0",
     "jsdom": "^26.1.0",
-    "pixelmatch": "^7.1.0",
-    "pngjs": "^7.0.0",
     "postcss": "^8.5.13",
     "rimraf": "^6.0.1",
     "storybook": "^10.2.10",
     "tailwindcss": "^4.1.18",
-    "tailwindcss-v3": "npm:tailwindcss@^3.4.18",
-    "tsx": "^4.21.0",
     "typescript": "^5.2.2",
     "vite": "^8.0.10",
     "vitest": "^3.2.4"
@@ -146,11 +141,6 @@
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "test:visual": "pnpm run test:visual:build && playwright test --config visual-tests/playwright.config.ts",
-    "test:visual:build": "pnpm run build && tsx visual-tests/fixtures/build-fixtures.ts",
-    "test:visual:update": "pnpm run test:visual -- --update-snapshots",
-    "test:visual:ui": "playwright test --config visual-tests/playwright.config.ts --ui",
-    "test:visual:report": "playwright show-report visual-tests/reports",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build --output-dir storybook-static",
     "preview-storybook": "npx http-server storybook-static -p 6007"