@music-vine/cadence 3.0.2 → 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/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.2",
+  "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",