@music-vine/cadence 0.1.1 → 1.0.1

package/README.md

@@ -1,5 +1,7 @@
 # @music-vine/cadence
 
+> [**View full documentation →**](https://music-vine.github.io/uppbeat-frontend/)
+
 Cadence Design System - UI components and icons for Uppbeat applications.
 
 ## Installation

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

@@ -1 +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,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;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,aAAa,EACb,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,GACtB,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE3D,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,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;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,aAAa,EACb,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,GACtB,CAAC"}

package/dist/components/accordion.js

@@ -59,7 +59,7 @@ function AccordionTrigger({
           ),
           children: [
             children,
-            /* @__PURE__ */ jsx(ChevronDown, { className: "w-5 fill-none transition-transform duration-150 group-data-[state=open]:rotate-180" })
+            /* @__PURE__ */ jsx(ChevronDown, { className: "w-5 transition-transform duration-150 group-data-[state=open]:rotate-180" })
           ]
         }
       )

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-pink-500 [&: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-pink-500 [&: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 fill-none 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"],
-  "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,gRACA;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,sFAAqF;AAAA;AAAA;AAAA,MAC9G;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;",
+  "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 { Ref } from \"react\";\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-pink-500 [&: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-pink-500 [&: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"],
+  "mappings": "AA6DI,cA2EI,YA3EJ;AAlCJ,SAAS,mBAAmB;AAC5B,SAAS,aAAa,0BAA0B;AAGhD,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,gRACA;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

@@ -29,8 +29,8 @@ import type * as React from "react";
  * Includes color variants matching Button component for consistency.
  */
 declare const badgeVariants: (props?: ({
-    variant?: "bold" | "pink" | "white" | "transparent" | "light" | "subtle" | "pinkSecondary" | "contrast" | "success" | "error" | "primary" | "secondary" | "destructive" | "lightPink" | "outline" | "free" | "pink-200" | null | undefined;
-    size?: "default" | "icon" | "xs" | "sm" | "lg" | null | undefined;
+    variant?: "contrast" | "bold" | "pink" | "white" | "transparent" | "light" | "subtle" | "pinkSecondary" | "success" | "error" | "primary" | "secondary" | "destructive" | "lightPink" | "outline" | "free" | "pink-200" | 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;
@@ -42,9 +42,11 @@ declare const badgeVariants: (props?: ({
  * @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.
@@ -55,6 +57,6 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, Varian
  * - Status indicators (New, Sale, Popular)
  * - Tags and categories
  */
-declare const Badge: ({ className, variant, size, shadow, strong, asChild, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +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;;;;;;;;GAQG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK,GAAI,iEAQZ,UAAU,4CAYZ,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
+{"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

@@ -57,6 +57,7 @@ const Badge = ({
   shadow,
   strong,
   asChild = false,
+  ref,
   ...props
 }) => {
   const Comp = asChild ? SlotPrimitive.Slot : "div";
@@ -67,6 +68,7 @@ const Badge = ({
         badgeVariants({ variant, size, shadow, strong }),
         className
       ),
+      ref,
       ...props
     }
   );

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=\"pink\">Premium</Badge>\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\">Expired</Badge>\n *\n * @example\n * // As a child element (e.g., wrapping a link)\n * <Badge asChild variant=\"outline\">\n *   <a href=\"/pricing\">View Plans</a>\n * </Badge>\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * CVA variants for Badge styling.\n * Includes color variants matching Button component for consistency.\n */\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 dark:focus-visible:ring-neutral-300\",\n  {\n    variants: {\n      variant: {\n        // Matching button variants (without hover/disabled states)\n        subtle:\n          \"border-1 border-gray-150 border-solid bg-white text-gray-950 dark:border-gray-800 dark:bg-gray-950 dark:text-white\",\n        pink: \"border-1 border-pink-500 border-solid bg-pink-500 text-white\",\n        pinkSecondary:\n          \"border-1 border-pink-50 border-solid bg-pink-50 text-pink-600 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-500 bg-green-500 text-white dark:border-green-400 dark:bg-green-400\",\n        error:\n          \"border-red-600 bg-red-600 text-white dark:border-red-500 dark:bg-red-500\",\n        primary:\n          \"border-gray-900 bg-gray-900 text-white dark:border-gray-50 dark:bg-gray-50 dark:text-gray-950\",\n        secondary:\n          \"border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white\",\n        destructive: \"border-red bg-red text-white\",\n        white: \"border-neutral-200 bg-white text-pink-500\",\n        lightPink: \"border-pink-100 bg-pink-50 text-pink-600\",\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        free: \"border-free bg-free text-gray-950\",\n        \"pink-200\": \"border-pink-100 bg-pink-200 text-pink-500\",\n      },\n      size: {\n        default: \"h-8 px-4 py-2 leading-8\",\n        xs: \"h-5 gap-1.5 px-2 text-xs leading-5\",\n        sm: \"h-6 px-2.5 text-xs leading-6 2xl:text-sm\",\n        lg: \"h-10 gap-4 px-8 text-lg leading-10\",\n        icon: \"h-8 w-8 leading-8\",\n      },\n      shadow: {\n        true: \"shadow\",\n        false: \"\",\n      },\n      strong: {\n        true: \"font-semibold\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"bold\",\n      size: \"default\",\n      shadow: false,\n      strong: false,\n    },\n  }\n);\n\n/**\n * Props for the Badge component.\n *\n * @property variant - Color scheme: `pink`, `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 */\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\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  ...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      {...props}\n    />\n  );\n};\n\nexport { Badge, badgeVariants };\n"],
-  "mappings": "AAgII;AAxGJ,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,MAAM;AAAA,QACN,eACE;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,WAAW;AAAA,QACX,SACE;AAAA,QACF,MAAM;AAAA,QACN,YAAY;AAAA,MACd;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;AA0BA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,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,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "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=\"pink\">Premium</Badge>\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\">Expired</Badge>\n *\n * @example\n * // As a child element (e.g., wrapping a link)\n * <Badge asChild variant=\"outline\">\n *   <a href=\"/pricing\">View Plans</a>\n * </Badge>\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * CVA variants for Badge styling.\n * Includes color variants matching Button component for consistency.\n */\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 dark:focus-visible:ring-neutral-300\",\n  {\n    variants: {\n      variant: {\n        // Matching button variants (without hover/disabled states)\n        subtle:\n          \"border-1 border-gray-150 border-solid bg-white text-gray-950 dark:border-gray-800 dark:bg-gray-950 dark:text-white\",\n        pink: \"border-1 border-pink-500 border-solid bg-pink-500 text-white\",\n        pinkSecondary:\n          \"border-1 border-pink-50 border-solid bg-pink-50 text-pink-600 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-500 bg-green-500 text-white dark:border-green-400 dark:bg-green-400\",\n        error:\n          \"border-red-600 bg-red-600 text-white dark:border-red-500 dark:bg-red-500\",\n        primary:\n          \"border-gray-900 bg-gray-900 text-white dark:border-gray-50 dark:bg-gray-50 dark:text-gray-950\",\n        secondary:\n          \"border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white\",\n        destructive: \"border-red bg-red text-white\",\n        white: \"border-neutral-200 bg-white text-pink-500\",\n        lightPink: \"border-pink-100 bg-pink-50 text-pink-600\",\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        free: \"border-free bg-free text-gray-950\",\n        \"pink-200\": \"border-pink-100 bg-pink-200 text-pink-500\",\n      },\n      size: {\n        default: \"h-8 px-4 py-2 leading-8\",\n        xs: \"h-5 gap-1.5 px-2 text-xs leading-5\",\n        sm: \"h-6 px-2.5 text-xs leading-6 2xl:text-sm\",\n        lg: \"h-10 gap-4 px-8 text-lg leading-10\",\n        icon: \"h-8 w-8 leading-8\",\n      },\n      shadow: {\n        true: \"shadow\",\n        false: \"\",\n      },\n      strong: {\n        true: \"font-semibold\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"bold\",\n      size: \"default\",\n      shadow: false,\n      strong: false,\n    },\n  }\n);\n\n/**\n * Props for the Badge component.\n *\n * @property variant - Color scheme: `pink`, `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,MAAM;AAAA,QACN,eACE;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,WAAW;AAAA,QACX,SACE;AAAA,QACF,MAAM;AAAA,QACN,YAAY;AAAA,MACd;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

@@ -1,24 +1,33 @@
-import * as React from "react";
+import type * as React from "react";
+import type { Ref } from "react";
 /**
  * Root navigation container with `aria-label="breadcrumb"`.
  */
-declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+declare const Breadcrumb: ({ ref, ...props }: React.ComponentPropsWithoutRef<"nav"> & {
     separator?: React.ReactNode;
-} & React.RefAttributes<HTMLElement>>;
+    ref?: Ref<HTMLElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 /** Ordered list container for breadcrumb items. */
-declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+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: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+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: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+declare const BreadcrumbLink: ({ asChild, className, ref, ...props }: React.ComponentPropsWithoutRef<"a"> & {
     asChild?: boolean;
-} & React.RefAttributes<HTMLAnchorElement>>;
+    ref?: Ref<HTMLAnchorElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 /** Current page indicator (non-clickable). Has `aria-current="page"`. */
-declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+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;

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;GAEG;AACH,QAAA,MAAM,UAAU;gBAGA,KAAK,CAAC,SAAS;qCAE+C,CAAC;AAI/E,mDAAmD;AACnD,QAAA,MAAM,cAAc,2KAYlB,CAAC;AAIH,qDAAqD;AACrD,QAAA,MAAM,cAAc,kKASlB,CAAC;AAIH;;;;GAIG;AACH,QAAA,MAAM,cAAc;cAGN,OAAO;2CAenB,CAAC;AAIH,yEAAyE;AACzE,QAAA,MAAM,cAAc,sKAalB,CAAC;AAIH,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"}
+{"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,4CAUA,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/breadcrumb.js

@@ -1,11 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { Slot as SlotPrimitive } from "radix-ui";
-import * as React from "react";
 import { cn } from "../lib/utils";
-const Breadcrumb = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", ref, ...props }));
-Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Breadcrumb = ({
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", ref, ...props });
+const BreadcrumbList = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "ol",
   {
     className: cn(
@@ -15,18 +20,25 @@ const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => /* @__
     ref,
     ...props
   }
-));
-BreadcrumbList.displayName = "BreadcrumbList";
-const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+);
+const BreadcrumbItem = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "li",
   {
     className: cn("inline-flex items-center", className),
     ref,
     ...props
   }
-));
-BreadcrumbItem.displayName = "BreadcrumbItem";
-const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+);
+const BreadcrumbLink = ({
+  asChild,
+  className,
+  ref,
+  ...props
+}) => {
   const Comp = asChild ? SlotPrimitive.Slot : "a";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -39,9 +51,12 @@ const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref)
       ...props
     }
   );
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
-const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+};
+const BreadcrumbPage = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "span",
   {
     "aria-current": "page",
@@ -52,8 +67,7 @@ const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => /* @__
     ref,
     ...props
   }
-));
-BreadcrumbPage.displayName = "BreadcrumbPage";
+);
 const BreadcrumbSeparator = ({
   children,
   className,

package/dist/components/breadcrumb.js.map

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

package/dist/components/button.d.ts

@@ -43,14 +43,14 @@
  * </Button>
  */
 import { type VariantProps } from "class-variance-authority";
-import { type ButtonHTMLAttributes } from "react";
+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?: "bold" | "pink" | "transparent" | "light" | "subtle" | "pinkSecondary" | "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;
+    variant?: "contrast" | "bold" | "pink" | "transparent" | "light" | "subtle" | "pinkSecondary" | "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;
@@ -91,11 +91,12 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Om
     size?: ResponsiveButtonSize;
     fontSize?: ResponsiveButtonFontSize;
     icon?: boolean;
+    ref?: Ref<HTMLButtonElement>;
 }
-declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+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?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    size?: "xs" | "sm" | "lg" | "xl" | "default" | "icon" | null | undefined;
     visible?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**

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

@@ -1 +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,EAAE,KAAK,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAyB9D,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;;;;;;;8EA0FnB,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,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,wBAAwB,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,QAAA,MAAM,MAAM,2GAoIX,CAAC;AAIF,8CAA8C;AAC9C,QAAA,MAAM,eAAe;;;8EAmBnB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,OAAO,GAAI,mBAAmB,YAAY,CAAC,OAAO,eAAe,CAAC,4CAEvE,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC;AAC5D,YAAY,EACV,oBAAoB,EACpB,UAAU,EACV,wBAAwB,EACxB,cAAc,GACf,CAAC"}
+{"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;;;;;;;8EA0FnB,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,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,wBAAwB,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,MAAM,GAAI,wHAcb,WAAW,4CAkHb,CAAC;AAEF,8CAA8C;AAC9C,QAAA,MAAM,eAAe;;;8EAmBnB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,OAAO,GAAI,mBAAmB,YAAY,CAAC,OAAO,eAAe,CAAC,4CAEvE,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC;AAC5D,YAAY,EACV,oBAAoB,EACpB,UAAU,EACV,wBAAwB,EACxB,cAAc,GACf,CAAC"}

package/dist/components/button.js

@@ -1,8 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { Loader } from "lucide-react";
+import { LoaderCircle } from "lucide-react";
 import { Slot as SlotPrimitive } from "radix-ui";
-import { forwardRef } from "react";
 import { cn } from "../lib/utils";
 const sizeClasses = {
   default: "h-8 px-4 py-2 leading-8",
@@ -163,109 +162,107 @@ function generateResponsiveFontSizeClasses(fontSize) {
   }
   return classes.join(" ");
 }
-const Button = forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    borderRadius,
-    border,
-    noFeedback,
-    asChild = false,
-    type,
-    children,
-    fontSize,
-    icon = false,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? SlotPrimitive.Slot : "button";
-    const buttonType = asChild ? void 0 : type ?? "button";
-    const responsiveClasses = typeof size === "object" ? generateResponsiveSizeClasses(size) : void 0;
-    let responsiveFontSizeClasses;
+const Button = ({
+  className,
+  variant,
+  size,
+  borderRadius,
+  border,
+  noFeedback,
+  asChild = false,
+  type,
+  children,
+  fontSize,
+  icon = false,
+  ref,
+  ...props
+}) => {
+  const Comp = asChild ? SlotPrimitive.Slot : "button";
+  const buttonType = asChild ? void 0 : type ?? "button";
+  const responsiveClasses = typeof size === "object" ? generateResponsiveSizeClasses(size) : void 0;
+  let responsiveFontSizeClasses;
+  if (typeof fontSize === "object") {
+    responsiveFontSizeClasses = generateResponsiveFontSizeClasses(fontSize);
+  } else if (typeof size === "object" && fontSize === void 0) {
+    const autoFontSize = {
+      default: defaultFontSizeForSize[size.default] || "base"
+    };
+    const breakpointMappings = [
+      { sizeKey: "xxs", fontKey: "xxs" },
+      { sizeKey: "xs", fontKey: "xs" },
+      { sizeKey: "sm", fontKey: "sm" },
+      { sizeKey: "md", fontKey: "md" },
+      { sizeKey: "lg", fontKey: "lg" },
+      { sizeKey: "xl", fontKey: "xl" },
+      { sizeKey: "2xl", fontKey: "2xl" }
+    ];
+    for (const { sizeKey, fontKey } of breakpointMappings) {
+      const sizeValue = size[sizeKey];
+      if (sizeValue && sizeValue in defaultFontSizeForSize) {
+        autoFontSize[fontKey] = defaultFontSizeForSize[sizeValue];
+      }
+    }
+    responsiveFontSizeClasses = generateResponsiveFontSizeClasses(autoFontSize);
+  }
+  const cvaSize = typeof size === "object" ? size.default : size;
+  let cvaFontSize = null;
+  if (fontSize) {
     if (typeof fontSize === "object") {
-      responsiveFontSizeClasses = generateResponsiveFontSizeClasses(fontSize);
-    } else if (typeof size === "object" && fontSize === void 0) {
-      const autoFontSize = {
-        default: defaultFontSizeForSize[size.default] || "base"
-      };
+      cvaFontSize = fontSize.default || null;
+    } else {
+      cvaFontSize = fontSize;
+    }
+  }
+  let iconClasses = "";
+  if (icon) {
+    iconClasses = "aspect-square p-0";
+    if (typeof size === "object") {
+      const iconResponsiveClasses = [];
       const breakpointMappings = [
-        { sizeKey: "xxs", fontKey: "xxs" },
-        { sizeKey: "xs", fontKey: "xs" },
-        { sizeKey: "sm", fontKey: "sm" },
-        { sizeKey: "md", fontKey: "md" },
-        { sizeKey: "lg", fontKey: "lg" },
-        { sizeKey: "xl", fontKey: "xl" },
-        { sizeKey: "2xl", fontKey: "2xl" }
+        { sizeKey: "xxs", prefix: "xxs" },
+        { sizeKey: "xs", prefix: "xs" },
+        { sizeKey: "sm", prefix: "sm" },
+        { sizeKey: "md", prefix: "md" },
+        { sizeKey: "lg", prefix: "lg" },
+        { sizeKey: "xl", prefix: "xl" },
+        { sizeKey: "2xl", prefix: "2xl" }
       ];
-      for (const { sizeKey, fontKey } of breakpointMappings) {
+      for (const { sizeKey, prefix } of breakpointMappings) {
         const sizeValue = size[sizeKey];
-        if (sizeValue && sizeValue in defaultFontSizeForSize) {
-          autoFontSize[fontKey] = defaultFontSizeForSize[sizeValue];
+        if (sizeValue) {
+          iconResponsiveClasses.push(`${prefix}:p-0`);
         }
       }
-      responsiveFontSizeClasses = generateResponsiveFontSizeClasses(autoFontSize);
-    }
-    const cvaSize = typeof size === "object" ? size.default : size;
-    let cvaFontSize = null;
-    if (fontSize) {
-      if (typeof fontSize === "object") {
-        cvaFontSize = fontSize.default || null;
-      } else {
-        cvaFontSize = fontSize;
+      if (iconResponsiveClasses.length > 0) {
+        iconClasses += ` ${iconResponsiveClasses.join(" ")}`;
       }
     }
-    let iconClasses = "";
-    if (icon) {
-      iconClasses = "aspect-square p-0";
-      if (typeof size === "object") {
-        const iconResponsiveClasses = [];
-        const breakpointMappings = [
-          { sizeKey: "xxs", prefix: "xxs" },
-          { sizeKey: "xs", prefix: "xs" },
-          { sizeKey: "sm", prefix: "sm" },
-          { sizeKey: "md", prefix: "md" },
-          { sizeKey: "lg", prefix: "lg" },
-          { sizeKey: "xl", prefix: "xl" },
-          { sizeKey: "2xl", prefix: "2xl" }
-        ];
-        for (const { sizeKey, prefix } of breakpointMappings) {
-          const sizeValue = size[sizeKey];
-          if (sizeValue) {
-            iconResponsiveClasses.push(`${prefix}:p-0`);
-          }
-        }
-        if (iconResponsiveClasses.length > 0) {
-          iconClasses += ` ${iconResponsiveClasses.join(" ")}`;
-        }
-      }
-    }
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        className: cn(
-          buttonVariants({
-            variant,
-            size: cvaSize,
-            fontSize: cvaFontSize,
-            borderRadius,
-            border,
-            noFeedback
-          }),
-          responsiveClasses,
-          responsiveFontSizeClasses,
-          iconClasses,
-          className
-        ),
-        ref,
-        type: buttonType,
-        ...props,
-        children
-      }
-    );
   }
-);
-Button.displayName = "Button";
-const loadingVariants = cva("hidden w-4 text-inherit", {
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        buttonVariants({
+          variant,
+          size: cvaSize,
+          fontSize: cvaFontSize,
+          borderRadius,
+          border,
+          noFeedback
+        }),
+        responsiveClasses,
+        responsiveFontSizeClasses,
+        iconClasses,
+        className
+      ),
+      ref,
+      type: buttonType,
+      ...props,
+      children
+    }
+  );
+};
+const loadingVariants = cva("hidden w-4 animate-[spin_0.75s_linear_infinite] text-inherit", {
   variants: {
     size: {
       default: "w-4",
@@ -285,7 +282,7 @@ const loadingVariants = cva("hidden w-4 text-inherit", {
     visible: false
   }
 });
-const Loading = ({ size, visible }) => /* @__PURE__ */ jsx(Loader, { className: cn(loadingVariants({ size, visible })) });
+const Loading = ({ size, visible }) => /* @__PURE__ */ jsx(LoaderCircle, { className: cn(loadingVariants({ size, visible })) });
 export {
   Button,
   Loading,