@music-vine/cadence 2.6.2 → 3.0.0

package/README.md

@@ -59,55 +59,18 @@ function App() {
 
 ## Tailwind Configuration
 
-Cadence supports both Tailwind CSS v3 and v4. Choose the version that matches your project.
-
-### Tailwind v3 (JavaScript config)
-
-Extend your Tailwind config with the Cadence preset:
-
-```js
-// tailwind.config.js
-import cadenceConfig from '@music-vine/cadence/tailwind.config';
-
-export default {
-  presets: [cadenceConfig],
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@music-vine/cadence/dist/**/*.js',
-  ],
-};
-```
-
-Then import the v3 styles:
-
-```css
-/* app.css */
-@import '@music-vine/cadence/styles';
-```
-
-### Tailwind v4 (CSS-first config)
-
-For Tailwind v4, use the CSS-first configuration:
+Cadence requires **Tailwind CSS v4+**. Users requiring Tailwind v3 support should pin to Cadence 2.x.
 
 ```css
 /* app.css */
 @import "tailwindcss";
-@import "@music-vine/cadence/tailwind.config.v4";
-@import "@music-vine/cadence/styles.v4";
+@import "@music-vine/cadence/tailwind.config";
+@import "@music-vine/cadence/styles";
 
 @source "./src/**/*.{js,ts,jsx,tsx}";
 @source "./node_modules/@music-vine/cadence/dist/**/*.js";
 ```
 
-**Benefits of v4:**
-- 3-10x faster builds
-- 100x faster incremental rebuilds
-- Built-in container queries
-- Native CSS variable support
-- Smaller bundle size
-
-See the [Migration Guide](./src/docs/02-guides/tailwind-v4-migration.mdx) for detailed instructions.
-
 ## Available Exports
 
 | Export | Description |
@@ -115,10 +78,8 @@ See the [Migration Guide](./src/docs/02-guides/tailwind-v4-migration.mdx) for de
 | `@music-vine/cadence/ui` | React UI components (Button, Text, Card, etc.) |
 | `@music-vine/cadence/icons` | Lucide icons + custom Uppbeat icons |
 | `@music-vine/cadence/theme` | Theme customization API (`createTheme`, presets) |
-| `@music-vine/cadence/styles` | Base CSS styles (Tailwind v3) |
-| `@music-vine/cadence/styles.v4` | Base CSS styles (Tailwind v4) |
-| `@music-vine/cadence/tailwind.config` | Tailwind v3 preset (JavaScript) |
-| `@music-vine/cadence/tailwind.config.v4` | Tailwind v4 config (CSS) |
+| `@music-vine/cadence/styles` | Base CSS styles |
+| `@music-vine/cadence/tailwind.config` | Tailwind v4 CSS config |
 
 ## Components
 

package/dist/components/accordion.d.ts

@@ -0,0 +1,71 @@
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import type * as React from "react";
+/**
+ * Visual style variants for the accordion.
+ * - `default`: Light theme with subtle borders
+ * - `hc`: High contrast dark theme variant
+ */
+type AccordionVariant = "default" | "hc";
+type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & {
+    variant?: AccordionVariant;
+};
+type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    variant?: AccordionVariant;
+};
+/**
+ * Root container for accordion items. Controls single or multiple expansion.
+ *
+ * @param type - `"single"` allows one item open at a time, `"multiple"` allows many
+ * @param collapsible - When `type="single"`, allows closing all items (default: false)
+ * @param variant - Visual style: `"default"` or `"hc"` (high contrast)
+ */
+declare function Accordion({ variant, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+/**
+ * Wrapper for each accordion section. Must have a unique `value` prop.
+ *
+ * @param value - Unique identifier for this item (required)
+ * @param variant - Visual style matching parent Accordion
+ * @param disabled - Prevents interaction when true
+ */
+declare function AccordionItem({ className, variant, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
+/** Props for AccordionTrigger component */
+interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    headerClassName?: string;
+    triggerChildrenClassName?: string;
+    variant?: AccordionVariant;
+}
+/**
+ * Clickable heading that toggles the associated AccordionContent.
+ * Includes an animated chevron indicator.
+ *
+ * @param variant - Visual style: `"default"` or `"hc"`
+ * @param headerClassName - Additional classes for the header wrapper
+ * @param triggerChildrenClassName - Additional classes for the inner content wrapper
+ */
+declare function AccordionTrigger({ className, children, variant, headerClassName, triggerChildrenClassName, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionTrigger {
+    var displayName: string | undefined;
+}
+/** Props for AccordionContent component */
+interface AccordionContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+    variant?: AccordionVariant;
+}
+/**
+ * Collapsible content panel with smooth expand/collapse animation.
+ * Automatically hidden when parent AccordionItem is closed.
+ *
+ * @param variant - Visual style: `"default"` or `"hc"`
+ * @param forceMount - Keep content in DOM even when closed (useful for SEO/forms)
+ */
+declare function AccordionContent({ className, children, variant, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionContent {
+    var displayName: string | undefined;
+}
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, };
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;;GAIG;AACH,KAAK,gBAAgB,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzC,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CACtD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,GAAG;IACF,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAEF,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,GAAG;IACF,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAEF;;;;;;GAMG;AACH,iBAAS,SAAS,CAAC,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAOnE;kBAPQ,SAAS;;;AAWlB;;;;;;GAMG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAcpB;kBAlBQ,aAAa;;;AAsBtB,2CAA2C;AAC3C,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA6BvB;kBApCQ,gBAAgB;;;AAwCzB,2CAA2C;AAC3C,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;IACzE,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAcvB;kBAnBQ,gBAAgB;;;AAuBzB,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,GACtB,CAAC"}

package/dist/components/accordion.js

@@ -53,7 +53,7 @@ function AccordionTrigger({
         "div",
         {
           className: cn(
-            "flex flex-1 items-center justify-between gap-1 rounded-sm py-2 font-semibold text-base transition-colors 2xl:text-lg",
+            "flex flex-1 items-center justify-between gap-1 rounded-xs py-2 font-semibold text-base transition-colors 2xl:text-lg",
             variant === "default" ? "md:px-2 md:hover:bg-gray-50 dark:md:hover:bg-gray-900" : "-my-1 px-2 hover:bg-gray-900",
             triggerChildrenClassName
           ),
@@ -77,7 +77,7 @@ function AccordionContent({
     AccordionPrimitive.Content,
     {
       className: cn(
-        variant === "default" ? "overflow-hidden text-left font-sans text-gray-700 text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down md:px-2 2xl:text-base dark:text-gray-200" : "-mx-6 ~px-6/12 overflow-hidden bg-gray-900 pt-6 text-left font-sans text-gray-400 text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down 2xl:text-base"
+        variant === "default" ? "overflow-hidden text-left font-sans text-gray-700 text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down md:px-2 2xl:text-base dark:text-gray-200" : "-mx-6 fl-px-6/12 overflow-hidden bg-gray-900 pt-6 text-left font-sans text-gray-400 text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down 2xl:text-base"
       ),
       "data-variant": variant,
       ...props,

package/dist/components/accordion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/accordion.tsx"],
-  "sourcesContent": ["/**\n * @module Accordion\n *\n * A vertically stacked set of interactive headings that reveal/hide associated content.\n * Built on Radix UI Accordion primitive with custom styling variants.\n *\n * @see {@link https://ui.shadcn.com/docs/components/accordion Shadcn Accordion}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/accordion Radix Accordion}\n *\n * @example\n * // Basic single-select accordion\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content for section 1</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n *\n * @example\n * // Multi-select accordion with HC variant (dark theme)\n * <Accordion type=\"multiple\" variant=\"hc\">\n *   <AccordionItem value=\"faq-1\" variant=\"hc\">\n *     <AccordionTrigger variant=\"hc\">What is Uppbeat?</AccordionTrigger>\n *     <AccordionContent variant=\"hc\">Royalty-free music platform</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n */\nimport { ChevronDown } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"../lib/utils\";\n\n/**\n * Visual style variants for the accordion.\n * - `default`: Light theme with subtle borders\n * - `hc`: High contrast dark theme variant\n */\ntype AccordionVariant = \"default\" | \"hc\";\n\ntype AccordionItemProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Item\n> & {\n  variant?: AccordionVariant;\n};\n\ntype AccordionProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Root\n> & {\n  variant?: AccordionVariant;\n};\n\n/**\n * Root container for accordion items. Controls single or multiple expansion.\n *\n * @param type - `\"single\"` allows one item open at a time, `\"multiple\"` allows many\n * @param collapsible - When `type=\"single\"`, allows closing all items (default: false)\n * @param variant - Visual style: `\"default\"` or `\"hc\"` (high contrast)\n */\nfunction Accordion({ variant = \"default\", ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      className={cn(variant === \"hc\" && \"hc-accordion\")}\n      {...props}\n    />\n  );\n}\n\nAccordion.displayName = \"Accordion\";\n\n/**\n * Wrapper for each accordion section. Must have a unique `value` prop.\n *\n * @param value - Unique identifier for this item (required)\n * @param variant - Visual style matching parent Accordion\n * @param disabled - Prevents interaction when true\n */\nfunction AccordionItem({\n  className,\n  variant = \"default\",\n  ...props\n}: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      className={cn(\n        variant === \"default\"\n          ? \"border-0 border-gray-150 border-b-1 border-solid bg-transparent transition-colors md:mb-1 dark:border-gray-800 [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:ring-[var(--focus-ring)] [&:has(:focus-visible)]:ring-offset-8 dark:[&:has(:focus-visible)]:ring-offset-gray-950\"\n          : \"border-0 border-gray-800 border-b-1 border-solid bg-transparent transition-colors [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:ring-[var(--focus-ring)] [&:has(:focus-visible)]:ring-offset-8 [&:has(:focus-visible)]:ring-offset-gray-950 [&:has([data-state='open'])]:border-transparent\",\n        \"last-of-type:border-b-0\",\n        className\n      )}\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\nAccordionItem.displayName = \"AccordionItem\";\n\n/** Props for AccordionTrigger component */\ninterface AccordionTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\n  variant?: AccordionVariant;\n  headerClassName?: string;\n  triggerChildrenClassName?: string;\n}\n\n/**\n * Clickable heading that toggles the associated AccordionContent.\n * Includes an animated chevron indicator.\n *\n * @param variant - Visual style: `\"default\"` or `\"hc\"`\n * @param headerClassName - Additional classes for the header wrapper\n * @param triggerChildrenClassName - Additional classes for the inner content wrapper\n */\nfunction AccordionTrigger({\n  className,\n  children,\n  variant = \"default\",\n  headerClassName,\n  triggerChildrenClassName,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className={cn(\"flex\", headerClassName)}>\n      <AccordionPrimitive.Trigger\n        className={cn(\n          variant === \"default\"\n            ? \"group my-4 flex flex-1 items-center justify-between text-left font-sans font-semibold text-base text-gray-950 transition-all md:my-3 2xl:my-2 2xl:text-lg dark:text-white [&>[data-icon='closed']]:data-[state=closed]:block [&>[data-icon='open']]:data-[state=open]:block [&>[data-icon]]:hidden\"\n            : \"group my-3 flex flex-1 items-center justify-between text-left font-sans font-semibold text-base text-white transition-all 2xl:text-lg [&>[data-icon='closed']]:data-[state=closed]:block [&>[data-icon='open']]:data-[state=open]:block [&>[data-icon]]:hidden\",\n          className\n        )}\n        data-variant={variant}\n        style={{ WebkitTapHighlightColor: \"transparent\" }}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 items-center justify-between gap-1 rounded-sm py-2 font-semibold text-base transition-colors 2xl:text-lg\",\n            variant === \"default\"\n              ? \"md:px-2 md:hover:bg-gray-50 dark:md:hover:bg-gray-900\"\n              : \"-my-1 px-2 hover:bg-gray-900\",\n            triggerChildrenClassName\n          )}\n        >\n          {children}\n          <ChevronDown className=\"w-5 transition-transform duration-150 group-data-[state=open]:rotate-180\" />\n        </div>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\n/** Props for AccordionContent component */\ninterface AccordionContentProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {\n  variant?: AccordionVariant;\n}\n\n/**\n * Collapsible content panel with smooth expand/collapse animation.\n * Automatically hidden when parent AccordionItem is closed.\n *\n * @param variant - Visual style: `\"default\"` or `\"hc\"`\n * @param forceMount - Keep content in DOM even when closed (useful for SEO/forms)\n */\nfunction AccordionContent({\n  className,\n  children,\n  variant = \"default\",\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Content\n      className={cn(\n        variant === \"default\"\n          ? \"overflow-hidden text-left font-sans text-gray-700 text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down md:px-2 2xl:text-base dark:text-gray-200\"\n          : \"-mx-6 ~px-6/12 overflow-hidden bg-gray-900 pt-6 text-left font-sans text-gray-400 text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down 2xl:text-base\"\n      )}\n      data-variant={variant}\n      {...props}\n    >\n      <div className={cn(\"pb-8\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nexport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  type AccordionContentProps,\n  type AccordionItemProps,\n  type AccordionProps,\n  type AccordionTriggerProps,\n  type AccordionVariant,\n};\n"],
+  "sourcesContent": ["/**\n * @module Accordion\n *\n * A vertically stacked set of interactive headings that reveal/hide associated content.\n * Built on Radix UI Accordion primitive with custom styling variants.\n *\n * @see {@link https://ui.shadcn.com/docs/components/accordion Shadcn Accordion}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/accordion Radix Accordion}\n *\n * @example\n * // Basic single-select accordion\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content for section 1</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n *\n * @example\n * // Multi-select accordion with HC variant (dark theme)\n * <Accordion type=\"multiple\" variant=\"hc\">\n *   <AccordionItem value=\"faq-1\" variant=\"hc\">\n *     <AccordionTrigger variant=\"hc\">What is Uppbeat?</AccordionTrigger>\n *     <AccordionContent variant=\"hc\">Royalty-free music platform</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n */\nimport { ChevronDown } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"../lib/utils\";\n\n/**\n * Visual style variants for the accordion.\n * - `default`: Light theme with subtle borders\n * - `hc`: High contrast dark theme variant\n */\ntype AccordionVariant = \"default\" | \"hc\";\n\ntype AccordionItemProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Item\n> & {\n  variant?: AccordionVariant;\n};\n\ntype AccordionProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Root\n> & {\n  variant?: AccordionVariant;\n};\n\n/**\n * Root container for accordion items. Controls single or multiple expansion.\n *\n * @param type - `\"single\"` allows one item open at a time, `\"multiple\"` allows many\n * @param collapsible - When `type=\"single\"`, allows closing all items (default: false)\n * @param variant - Visual style: `\"default\"` or `\"hc\"` (high contrast)\n */\nfunction Accordion({ variant = \"default\", ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      className={cn(variant === \"hc\" && \"hc-accordion\")}\n      {...props}\n    />\n  );\n}\n\nAccordion.displayName = \"Accordion\";\n\n/**\n * Wrapper for each accordion section. Must have a unique `value` prop.\n *\n * @param value - Unique identifier for this item (required)\n * @param variant - Visual style matching parent Accordion\n * @param disabled - Prevents interaction when true\n */\nfunction AccordionItem({\n  className,\n  variant = \"default\",\n  ...props\n}: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      className={cn(\n        variant === \"default\"\n          ? \"border-0 border-gray-150 border-b-1 border-solid bg-transparent transition-colors md:mb-1 dark:border-gray-800 [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:ring-[var(--focus-ring)] [&:has(:focus-visible)]:ring-offset-8 dark:[&:has(:focus-visible)]:ring-offset-gray-950\"\n          : \"border-0 border-gray-800 border-b-1 border-solid bg-transparent transition-colors [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:ring-[var(--focus-ring)] [&:has(:focus-visible)]:ring-offset-8 [&:has(:focus-visible)]:ring-offset-gray-950 [&:has([data-state='open'])]:border-transparent\",\n        \"last-of-type:border-b-0\",\n        className\n      )}\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\nAccordionItem.displayName = \"AccordionItem\";\n\n/** Props for AccordionTrigger component */\ninterface AccordionTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\n  headerClassName?: string;\n  triggerChildrenClassName?: string;\n  variant?: AccordionVariant;\n}\n\n/**\n * Clickable heading that toggles the associated AccordionContent.\n * Includes an animated chevron indicator.\n *\n * @param variant - Visual style: `\"default\"` or `\"hc\"`\n * @param headerClassName - Additional classes for the header wrapper\n * @param triggerChildrenClassName - Additional classes for the inner content wrapper\n */\nfunction AccordionTrigger({\n  className,\n  children,\n  variant = \"default\",\n  headerClassName,\n  triggerChildrenClassName,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className={cn(\"flex\", headerClassName)}>\n      <AccordionPrimitive.Trigger\n        className={cn(\n          variant === \"default\"\n            ? \"group my-4 flex flex-1 items-center justify-between text-left font-sans font-semibold text-base text-gray-950 transition-all md:my-3 2xl:my-2 2xl:text-lg dark:text-white [&>[data-icon='closed']]:data-[state=closed]:block [&>[data-icon='open']]:data-[state=open]:block [&>[data-icon]]:hidden\"\n            : \"group my-3 flex flex-1 items-center justify-between text-left font-sans font-semibold text-base text-white transition-all 2xl:text-lg [&>[data-icon='closed']]:data-[state=closed]:block [&>[data-icon='open']]:data-[state=open]:block [&>[data-icon]]:hidden\",\n          className\n        )}\n        data-variant={variant}\n        style={{ WebkitTapHighlightColor: \"transparent\" }}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 items-center justify-between gap-1 rounded-xs py-2 font-semibold text-base transition-colors 2xl:text-lg\",\n            variant === \"default\"\n              ? \"md:px-2 md:hover:bg-gray-50 dark:md:hover:bg-gray-900\"\n              : \"-my-1 px-2 hover:bg-gray-900\",\n            triggerChildrenClassName\n          )}\n        >\n          {children}\n          <ChevronDown className=\"w-5 transition-transform duration-150 group-data-[state=open]:rotate-180\" />\n        </div>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\n/** Props for AccordionContent component */\ninterface AccordionContentProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {\n  variant?: AccordionVariant;\n}\n\n/**\n * Collapsible content panel with smooth expand/collapse animation.\n * Automatically hidden when parent AccordionItem is closed.\n *\n * @param variant - Visual style: `\"default\"` or `\"hc\"`\n * @param forceMount - Keep content in DOM even when closed (useful for SEO/forms)\n */\nfunction AccordionContent({\n  className,\n  children,\n  variant = \"default\",\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Content\n      className={cn(\n        variant === \"default\"\n          ? \"overflow-hidden text-left font-sans text-gray-700 text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down md:px-2 2xl:text-base dark:text-gray-200\"\n          : \"-mx-6 fl-px-6/12 overflow-hidden bg-gray-900 pt-6 text-left font-sans text-gray-400 text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down 2xl:text-base\"\n      )}\n      data-variant={variant}\n      {...props}\n    >\n      <div className={cn(\"pb-8\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nexport {\n  Accordion,\n  AccordionContent,\n  type AccordionContentProps,\n  AccordionItem,\n  type AccordionItemProps,\n  type AccordionProps,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n  type AccordionVariant,\n};\n"],
   "mappings": "AA4DI,cA2EI,YA3EJ;AAjCJ,SAAS,mBAAmB;AAC5B,SAAS,aAAa,0BAA0B;AAEhD,SAAS,UAAU;AA4BnB,SAAS,UAAU,EAAE,UAAU,WAAW,GAAG,MAAM,GAAmB;AACpE,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,WAAW,GAAG,YAAY,QAAQ,cAAc;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,UAAU,cAAc;AASxB,SAAS,cAAc;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAuB;AACrB,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,WAAW;AAAA,QACT,YAAY,YACR,2RACA;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA,MACA,gBAAc;AAAA,MACb,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,cAAc,cAAc;AAkB5B,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,WAAW,GAAG,QAAQ,eAAe,GAC9D;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,WAAW;AAAA,QACT,YAAY,YACR,uSACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,gBAAc;AAAA,MACd,OAAO,EAAE,yBAAyB,cAAc;AAAA,MAC/C,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,YAAY,YACR,0DACA;AAAA,YACJ;AAAA,UACF;AAAA,UAEC;AAAA;AAAA,YACD,oBAAC,eAAY,WAAU,4EAA2E;AAAA;AAAA;AAAA,MACpG;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,iBAAiB,cAAc,mBAAmB,QAAQ;AAe1D,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,WAAW;AAAA,QACT,YAAY,YACR,wMACA;AAAA,MACN;AAAA,MACA,gBAAc;AAAA,MACb,GAAG;AAAA,MAEJ,8BAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,GAAI,UAAS;AAAA;AAAA,EACnD;AAEJ;AAEA,iBAAiB,cAAc,mBAAmB,QAAQ;",
   "names": []
 }

package/dist/components/badge.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @module Badge
+ *
+ * Small status indicators and labels for highlighting information.
+ * Supports multiple color variants and sizes for different contexts.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/badge Shadcn Badge}
+ *
+ * @example
+ * // Basic badge
+ * <Badge>New</Badge>
+ *
+ * @example
+ * // Badge variants
+ * <Badge variant="brand">Premium</Badge>
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="error">Expired</Badge>
+ *
+ * @example
+ * // As a child element (e.g., wrapping a link)
+ * <Badge asChild variant="outline">
+ *   <a href="/pricing">View Plans</a>
+ * </Badge>
+ */
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+/**
+ * CVA variants for Badge styling.
+ * 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;
+    shadow?: boolean | null | undefined;
+    strong?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props for the Badge component.
+ *
+ * @property variant - Color scheme: `brand`, `brandSecondary`, `success`, `error`, `subtle`, `bold`, etc.
+ * @property size - Size variant: `xs`, `sm`, `default`, `lg`, `icon`
+ * @property shadow - Add drop shadow when true
+ * @property strong - Use semibold font weight when true
+ * @property asChild - Render as child element (uses Radix Slot)
+ * @property ref - Ref to the underlying div element
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    asChild?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Displays a small label or status indicator.
+ *
+ * Common use cases:
+ * - Subscription status (Free, Premium)
+ * - Item counts
+ * - Status indicators (New, Sale, Popular)
+ * - Tags and categories
+ */
+declare const Badge: ({ className, variant, size, shadow, strong, asChild, ref, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;GAGG;AACH,QAAA,MAAM,aAAa;;;;;8EAwDlB,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK,GAAI,sEASZ,UAAU,4CAaZ,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/badge.js

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { Slot as SlotPrimitive } from "radix-ui";
 import { cn } from "../lib/utils";
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 dark:focus-visible:ring-gray-300",
+  "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",
   {
     variants: {
       variant: {

package/dist/components/badge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/badge.tsx"],
-  "sourcesContent": ["/**\n * @module Badge\n *\n * Small status indicators and labels for highlighting information.\n * Supports multiple color variants and sizes for different contexts.\n *\n * @see {@link https://ui.shadcn.com/docs/components/badge Shadcn Badge}\n *\n * @example\n * // Basic badge\n * <Badge>New</Badge>\n *\n * @example\n * // Badge variants\n * <Badge variant=\"brand\">Premium</Badge>\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\">Expired</Badge>\n *\n * @example\n * // As a child element (e.g., wrapping a link)\n * <Badge asChild variant=\"outline\">\n *   <a href=\"/pricing\">View Plans</a>\n * </Badge>\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * CVA variants for Badge styling.\n * Includes color variants matching Button component for consistency.\n */\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-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 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"],
   "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/breadcrumb.d.ts

@@ -0,0 +1,42 @@
+import type * as React from "react";
+import type { Ref } from "react";
+/**
+ * Root navigation container with `aria-label="breadcrumb"`.
+ */
+declare const Breadcrumb: ({ ref, ...props }: React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+    ref?: Ref<HTMLElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Ordered list container for breadcrumb items. */
+declare const BreadcrumbList: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"ol"> & {
+    ref?: Ref<HTMLOListElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** List item wrapper for each breadcrumb segment. */
+declare const BreadcrumbItem: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"li"> & {
+    ref?: Ref<HTMLLIElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Clickable link within a breadcrumb. Use `asChild` to wrap custom link components.
+ *
+ * @param asChild - When true, renders as child element (e.g., Next.js Link)
+ */
+declare const BreadcrumbLink: ({ asChild, className, ref, ...props }: React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+    ref?: Ref<HTMLAnchorElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Current page indicator (non-clickable). Has `aria-current="page"`. */
+declare const BreadcrumbPage: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
+    ref?: Ref<HTMLSpanElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Visual separator between breadcrumb items. Defaults to chevron icon. */
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Ellipsis indicator for collapsed breadcrumb items (long paths). */
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/components/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC;;GAEG;AACH,QAAA,MAAM,UAAU,GAAI,mBAGjB,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACzC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,4CAAyD,CAAC;AAE3D,mDAAmD;AACnD,QAAA,MAAM,cAAc,GAAI,8BAIrB,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,4CASA,CAAC;AAEF,qDAAqD;AACrD,QAAA,MAAM,cAAc,GAAI,8BAIrB,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B,4CAMA,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,cAAc,GAAI,uCAKrB,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAAG;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B,4CAaA,CAAC;AAEF,yEAAyE;AACzE,QAAA,MAAM,cAAc,GAAI,8BAIrB,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,GAAG;IAC1C,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B,4CAOA,CAAC;AAEF,2EAA2E;AAC3E,QAAA,MAAM,mBAAmB;wCAItB,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;;CAS5B,CAAC;AAIF,sEAAsE;AACtE,QAAA,MAAM,kBAAkB;8BAGrB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;;CAU9B,CAAC;AAIF,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,GACpB,CAAC"}

package/dist/components/button.d.ts

@@ -0,0 +1,117 @@
+/**
+ * @module Button
+ *
+ * Versatile button component with multiple variants, sizes, and responsive options.
+ * Supports all standard button interactions plus loading states and icon-only modes.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/button Shadcn Button}
+ *
+ * @example
+ * // Basic buttons
+ * <Button>Default</Button>
+ * <Button variant="brand">Primary Action</Button>
+ * <Button variant="subtle">Secondary</Button>
+ *
+ * @example
+ * // Sizes
+ * <Button size="xs">Extra Small</Button>
+ * <Button size="sm">Small</Button>
+ * <Button size="lg">Large</Button>
+ * <Button size="xl">Extra Large</Button>
+ *
+ * @example
+ * // Responsive size (changes at breakpoints)
+ * <Button size={{ default: "sm", md: "default", lg: "lg" }}>
+ *   Responsive Button
+ * </Button>
+ *
+ * @example
+ * // Icon button
+ * <Button icon size="default"><PlayIcon /></Button>
+ *
+ * @example
+ * // As link (using asChild)
+ * <Button asChild variant="brand">
+ *   <a href="/signup">Sign Up</a>
+ * </Button>
+ *
+ * @example
+ * // With loading state
+ * <Button disabled>
+ *   <Loading visible={isLoading} />
+ *   {isLoading ? "Loading..." : "Submit"}
+ * </Button>
+ */
+import { type VariantProps } from "class-variance-authority";
+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;
+    border?: boolean | null | undefined;
+    noFeedback?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ResponsiveButtonSize = ButtonSize | {
+    default: ButtonSize;
+    xxs?: ButtonSize;
+    xs?: ButtonSize;
+    sm?: ButtonSize;
+    md?: ButtonSize;
+    lg?: ButtonSize;
+    xl?: ButtonSize;
+    "2xl"?: ButtonSize;
+};
+type ResponsiveButtonFontSize = Exclude<ButtonFontSize, null> | {
+    default?: Exclude<ButtonFontSize, null>;
+    xxs?: Exclude<ButtonFontSize, null>;
+    xs?: Exclude<ButtonFontSize, null>;
+    sm?: Exclude<ButtonFontSize, null>;
+    md?: Exclude<ButtonFontSize, null>;
+    lg?: Exclude<ButtonFontSize, null>;
+    xl?: Exclude<ButtonFontSize, null>;
+    "2xl"?: Exclude<ButtonFontSize, null>;
+};
+/**
+ * Props for the Button component.
+ *
+ * @property variant - Color/style: `brand`, `brandSecondary`, `subtle`, `bold`, `light`, `transparent`, `contrast`, `success`, `error`
+ * @property size - Size or responsive size object: `xs`, `sm`, `default`, `lg`, `xl`, `icon`
+ * @property fontSize - Override font size or responsive font size object
+ * @property borderRadius - Corner style: `default`, `sm`, `full`, `rounded`
+ * @property border - Show border when true
+ * @property noFeedback - Disable scale animation on click
+ * @property asChild - Render as child element (e.g., for links)
+ * @property icon - Square aspect ratio with no padding (for icon-only buttons)
+ */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, "size" | "fontSize"> {
+    asChild?: boolean;
+    fontSize?: ResponsiveButtonFontSize;
+    icon?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+    size?: ResponsiveButtonSize;
+}
+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;
+    visible?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Animated loading spinner for use inside buttons.
+ *
+ * @param size - Match parent button size for proper scaling
+ * @param visible - Show/hide the spinner
+ *
+ * @example
+ * <Button disabled={isLoading}>
+ *   <Loading visible={isLoading} size="default" />
+ *   Submit
+ * </Button>
+ */
+declare const Loading: ({ size, visible }: VariantProps<typeof loadingVariants>) => import("react/jsx-runtime").JSX.Element;
+export type { ButtonFontSize, ButtonSize, ResponsiveButtonFontSize, ResponsiveButtonSize, };
+export { Button, buttonVariants, Loading, loadingVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAyBvD,KAAK,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;AAEjE,KAAK,cAAc,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAexE,QAAA,MAAM,cAAc;;;;;;;8EA2FnB,CAAC;AAEF,KAAK,oBAAoB,GACrB,UAAU,GACV;IACE,OAAO,EAAE,UAAU,CAAC;IACpB,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEN,KAAK,wBAAwB,GACzB,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,GAC7B;IACE,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;CACvC,CAAC;AAkFN;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,wBAAwB,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,oBAAoB,CAAC;CAC7B;AAED,QAAA,MAAM,MAAM,GAAI,wHAcb,WAAW,4CA+Gb,CAAC;AAEF,8CAA8C;AAC9C,QAAA,MAAM,eAAe;;;8EAsBpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,OAAO,GAAI,mBAAmB,YAAY,CAAC,OAAO,eAAe,CAAC,4CAEvE,CAAC;AAEF,YAAY,EACV,cAAc,EACd,UAAU,EACV,wBAAwB,EACxB,oBAAoB,GACrB,CAAC;AACF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/button.js

@@ -28,7 +28,7 @@ const defaultFontSizeForSize = {
   xl: "lg"
 };
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-normal font-sans text-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--focus-ring-offset)] enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-normal font-sans text-base transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--focus-ring-offset)] enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -38,7 +38,7 @@ const buttonVariants = cva(
         brandSecondary: "border-1 border-brand-secondary border-solid bg-brand-secondary font-semibold text-brand-primary-hover hover:border-brand-secondary-hover hover:bg-brand-secondary-hover disabled:hover:bg-brand-secondary-hover dark:border-gray-900 dark:bg-gray-900 hover:dark:border-gray-800 hover:dark:bg-gray-800 dark:text-white dark:disabled:hover:border-gray-900 dark:disabled:hover:bg-gray-900",
         bold: "border-gray-950 bg-gray-950 font-semibold text-white dark:border-white dark:bg-white dark:text-gray-950",
         light: "border-gray-150 bg-gray-100 font-semibold text-gray-950 hover:border-gray-200 hover:bg-gray-200 disabled:hover:border-gray-150 disabled:hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:disabled:hover:bg-gray-800",
-        transparent: "!border-transparent bg-transparent font-semibold text-gray-950 hover:border-gray-50 hover:bg-gray-50 disabled:hover:border-transparent disabled:hover:bg-transparent dark:text-white dark:hover:border-gray-900 dark:hover:bg-gray-900",
+        transparent: "border-transparent! bg-transparent font-semibold text-gray-950 hover:border-gray-50 hover:bg-gray-50 disabled:hover:border-transparent disabled:hover:bg-transparent dark:text-white dark:hover:border-gray-900 dark:hover:bg-gray-900",
         contrast: "border-white bg-white font-semibold text-gray-950 hover:bg-gray-50 hover:disabled:border-white hover:disabled:bg-white",
         success: "border-green-600 bg-green-600 font-semibold text-white hover:border-green-700 hover:bg-green-700 disabled:hover:border-green-600 disabled:hover:bg-green-600 dark:border-green-500 dark:bg-green-500 dark:hover:border-green-650 dark:hover:bg-green-650 dark:disabled:hover:border-green-500 dark:disabled:hover:bg-green-500",
         error: "border-red-600 bg-red-600 font-semibold text-white hover:bg-red-700 disabled:hover:border-red-700 disabled:hover:bg-red-700 dark:border-red-500 dark:bg-red-500 dark:hover:border-red-600 dark:hover:bg-red-600 dark:disabled:hover:border-red-600 dark:disabled:hover:bg-red-600"
@@ -61,7 +61,7 @@ const buttonVariants = cva(
       },
       noFeedback: {
         true: "",
-        false: "transition-scale active:scale-[0.97] disabled:scale-100"
+        false: "transition-transform active:scale-[0.97] disabled:scale-100"
       }
     },
     compoundVariants: [