@karakuri-ui/react 0.3.9 → 0.3.11

package/dist/components/ui/breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Context ──────────────────────────────────────────────\n\ntype BreadcrumbContextValue = {\n  size?: 'sm' | 'default' | 'lg'\n  separator?: React.ReactNode\n  maxItems?: number\n  itemsBeforeCollapse?: number\n  itemsAfterCollapse?: number\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\nconst useBreadcrumbContext = () => React.useContext(BreadcrumbContext)\n\n// ─── Default Separator Icon ───────────────────────────────\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n    >\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  )\n}\n\n// ─── Ellipsis Icon ────────────────────────────────────────\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n    </svg>\n  )\n}\n\n// ─── Breadcrumb (Root) ────────────────────────────────────\n\nconst breadcrumbSizeMap = {\n  sm: { text: 'text-xs', icon: 'icon-xs', gap: 'gap-1.5' },\n  default: { text: 'text-sm', icon: 'icon-xs', gap: 'gap-2' },\n  lg: { text: 'text-md', icon: 'icon-sm', gap: 'gap-2' },\n} as const\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n  /** Separator element between items */\n  separator?: React.ReactNode\n  /** Size of the breadcrumb */\n  size?: 'sm' | 'default' | 'lg'\n  /** Collapse the middle items into an ellipsis when there are more items than this (undefined = no collapse) */\n  maxItems?: number\n  /** Items kept before the ellipsis when collapsed */\n  itemsBeforeCollapse?: number\n  /** Items kept after the ellipsis when collapsed */\n  itemsAfterCollapse?: number\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ className, separator, size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...props }, ref) => (\n    <BreadcrumbContext.Provider value={{ size, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse }}>\n      <nav\n        ref={ref}\n        aria-label=\"breadcrumb\"\n        className={cn('', className)}\n        {...props}\n      />\n    </BreadcrumbContext.Provider>\n  )\n)\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ─── BreadcrumbList ───────────────────────────────────────\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n  ({ className, children, ...props }, ref) => {\n    const { size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1 } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <ol\n        ref={ref}\n        className={cn(\n          'flex flex-wrap items-center',\n          sizeClass.gap,\n          sizeClass.text,\n          'text-text-muted',\n          className\n        )}\n        {...props}\n      >\n        {collapseItems(children, maxItems, itemsBeforeCollapse, itemsAfterCollapse)}\n      </ol>\n    )\n  }\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ─── BreadcrumbItem ───────────────────────────────────────\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      className={cn('inline-flex items-center gap-1.5', className)}\n      {...props}\n    />\n  )\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ─── BreadcrumbLink ───────────────────────────────────────\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n  /** Use Radix Slot to compose with custom link components */\n  asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild, className, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'a'\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          'transition-colors duration-fast hover:text-foreground',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ─── BreadcrumbPage ───────────────────────────────────────\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n  ({ className, ...props }, ref) => (\n    <span\n      ref={ref}\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn('text-foreground', className)}\n      {...props}\n    />\n  )\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ─── BreadcrumbSeparator ──────────────────────────────────\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ children, className, ...props }, ref) => {\n    const { separator, size = 'default' } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <li\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('flex items-center text-text-subtle', className)}\n        {...props}\n      >\n        {children ?? separator ?? <ChevronRightIcon className={sizeClass.icon} />}\n      </li>\n    )\n  }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ─── BreadcrumbEllipsis ───────────────────────────────────\n\nexport interface BreadcrumbEllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n  ({ className, ...props }, ref) => {\n    const { size = 'default' } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <span\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('flex items-center justify-center', className)}\n        {...props}\n      >\n        <EllipsisIcon className={sizeClass.icon} />\n        <span className=\"sr-only\">More</span>\n      </span>\n    )\n  }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n// ─── Collapse ─────────────────────────────────────────────\n\n// Items are often rendered from a list as <Fragment>{separator}{item}</Fragment>,\n// so fragments are unwrapped before counting.\nfunction flattenFragments(children: React.ReactNode): React.ReactNode[] {\n  return React.Children.toArray(children).flatMap((node) =>\n    React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment\n      ? flattenFragments(node.props.children).map((child) =>\n          // Prefix keys so children of different fragments stay unique\n          React.isValidElement(child) ? React.cloneElement(child, { key: `${node.key}${child.key}` }) : child\n        )\n      : [node]\n  )\n}\n\n// Groups children into segments (the separator before an item + the item),\n// then keeps the first `before` and last `after` segments around one ellipsis\n// item. The user's own separators are reused, so custom separators survive.\nfunction collapseItems(children: React.ReactNode, maxItems: number | undefined, before: number, after: number) {\n  if (maxItems === undefined) return children\n\n  const nodes = flattenFragments(children)\n  const segments: { separator: React.ReactNode; nodes: React.ReactNode[] }[] = []\n  let pendingSeparator: React.ReactNode = null\n  for (const node of nodes) {\n    const type = React.isValidElement(node) ? node.type : null\n    if (type === BreadcrumbSeparator) {\n      pendingSeparator = node\n    } else if (type === BreadcrumbItem) {\n      segments.push({ separator: pendingSeparator, nodes: [node] })\n      pendingSeparator = null\n    } else if (segments.length > 0) {\n      segments[segments.length - 1].nodes.push(node)\n    } else {\n      segments.push({ separator: null, nodes: [node] })\n    }\n  }\n\n  if (segments.length <= maxItems || before + after >= segments.length) return children\n\n  const head = segments.slice(0, before)\n  const tail = segments.slice(segments.length - after)\n  const render = (list: typeof segments) => list.flatMap((seg) => (seg.separator ? [seg.separator, ...seg.nodes] : seg.nodes))\n  const ellipsisSeparator = segments[before].separator\n\n  return [\n    ...render(head),\n    ...(ellipsisSeparator ? [ellipsisSeparator] : []),\n    <BreadcrumbItem key=\"breadcrumb-collapsed\">\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>,\n    ...render(tail),\n  ]\n}\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n  breadcrumbSizeMap,\n}\n"],"mappings":";AA+BM,cASF,YATE;AA7BN,YAAY,WAAW;AACvB,SAAS,YAAY;AAErB,SAAS,UAAU;AAYnB,MAAM,oBAAoB,MAAM,cAAsC,CAAC,CAAC;AACxE,MAAM,uBAAuB,MAAM,MAAM,WAAW,iBAAiB;AAIrE,SAAS,iBAAiB,EAAE,UAAU,GAA2B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA,MAEb,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,gBAAe;AAAA;AAAA,EACtE;AAEJ;AAIA,SAAS,aAAa,EAAE,UAAU,GAA2B;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MAER;AAAA,4BAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,OAAM;AAAA,QAC/B,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA,QAChC,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA;AAAA;AAAA,EAClC;AAEJ;AAIA,MAAM,oBAAoB;AAAA,EACxB,IAAI,EAAE,MAAM,WAAW,MAAM,WAAW,KAAK,UAAU;AAAA,EACvD,SAAS,EAAE,MAAM,WAAW,MAAM,WAAW,KAAK,QAAQ;AAAA,EAC1D,IAAI,EAAE,MAAM,WAAW,MAAM,WAAW,KAAK,QAAQ;AACvD;AAeA,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,WAAW,OAAO,WAAW,UAAU,sBAAsB,GAAG,qBAAqB,GAAG,GAAG,MAAM,GAAG,QAChH,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,WAAW,UAAU,qBAAqB,mBAAmB,GACtG;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAW;AAAA,MACX,WAAW,GAAG,IAAI,SAAS;AAAA,MAC1B,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AACA,WAAW,cAAc;AAIzB,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,EAAE,OAAO,WAAW,UAAU,sBAAsB,GAAG,qBAAqB,EAAE,IAAI,qBAAqB;AAC7G,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH,wBAAc,UAAU,UAAU,qBAAqB,kBAAkB;AAAA;AAAA,IAC5E;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAI7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,oCAAoC,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,eAAe,cAAc;AAS7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,SAAS,WAAW,GAAG,MAAM,GAAG,QAAQ;AACzC,UAAM,OAAO,UAAU,OAAO;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAI7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,gBAAa;AAAA,MACb,WAAW,GAAG,mBAAmB,SAAS;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,eAAe,cAAc;AAI7B,MAAM,sBAAsB,MAAM;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,EAAE,WAAW,OAAO,UAAU,IAAI,qBAAqB;AAC7D,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW,GAAG,sCAAsC,SAAS;AAAA,QAC5D,GAAG;AAAA,QAEH,sBAAY,aAAa,oBAAC,oBAAiB,WAAW,UAAU,MAAM;AAAA;AAAA,IACzE;AAAA,EAEJ;AACF;AACA,oBAAoB,cAAc;AAMlC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,OAAO,UAAU,IAAI,qBAAqB;AAClD,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW,GAAG,oCAAoC,SAAS;AAAA,QAC1D,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa,WAAW,UAAU,MAAM;AAAA,UACzC,oBAAC,UAAK,WAAU,WAAU,kBAAI;AAAA;AAAA;AAAA,IAChC;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAMjC,SAAS,iBAAiB,UAA8C;AACtE,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAAQ,CAAC,SAC/C,MAAM,eAA+C,IAAI,KAAK,KAAK,SAAS,MAAM,WAC9E,iBAAiB,KAAK,MAAM,QAAQ,EAAE;AAAA,MAAI,CAAC;AAAA;AAAA,QAEzC,MAAM,eAAe,KAAK,IAAI,MAAM,aAAa,OAAO,EAAE,KAAK,GAAG,KAAK,GAAG,GAAG,MAAM,GAAG,GAAG,CAAC,IAAI;AAAA;AAAA,IAChG,IACA,CAAC,IAAI;AAAA,EACX;AACF;AAKA,SAAS,cAAc,UAA2B,UAA8B,QAAgB,OAAe;AAC7G,MAAI,aAAa,OAAW,QAAO;AAEnC,QAAM,QAAQ,iBAAiB,QAAQ;AACvC,QAAM,WAAuE,CAAC;AAC9E,MAAI,mBAAoC;AACxC,aAAW,QAAQ,OAAO;AACxB,UAAM,OAAO,MAAM,eAAe,IAAI,IAAI,KAAK,OAAO;AACtD,QAAI,SAAS,qBAAqB;AAChC,yBAAmB;AAAA,IACrB,WAAW,SAAS,gBAAgB;AAClC,eAAS,KAAK,EAAE,WAAW,kBAAkB,OAAO,CAAC,IAAI,EAAE,CAAC;AAC5D,yBAAmB;AAAA,IACrB,WAAW,SAAS,SAAS,GAAG;AAC9B,eAAS,SAAS,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI;AAAA,IAC/C,OAAO;AACL,eAAS,KAAK,EAAE,WAAW,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC;AAAA,IAClD;AAAA,EACF;AAEA,MAAI,SAAS,UAAU,YAAY,SAAS,SAAS,SAAS,OAAQ,QAAO;AAE7E,QAAM,OAAO,SAAS,MAAM,GAAG,MAAM;AACrC,QAAM,OAAO,SAAS,MAAM,SAAS,SAAS,KAAK;AACnD,QAAM,SAAS,CAAC,SAA0B,KAAK,QAAQ,CAAC,QAAS,IAAI,YAAY,CAAC,IAAI,WAAW,GAAG,IAAI,KAAK,IAAI,IAAI,KAAM;AAC3H,QAAM,oBAAoB,SAAS,MAAM,EAAE;AAE3C,SAAO;AAAA,IACL,GAAG,OAAO,IAAI;AAAA,IACd,GAAI,oBAAoB,CAAC,iBAAiB,IAAI,CAAC;AAAA,IAC/C,oBAAC,kBACC,8BAAC,sBAAmB,KADF,sBAEpB;AAAA,IACA,GAAG,OAAO,IAAI;AAAA,EAChB;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Context ──────────────────────────────────────────────\n\ntype BreadcrumbContextValue = {\n  size?: 'sm' | 'default' | 'lg'\n  separator?: React.ReactNode\n  maxItems?: number\n  itemsBeforeCollapse?: number\n  itemsAfterCollapse?: number\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\nconst useBreadcrumbContext = () => React.useContext(BreadcrumbContext)\n\n// ─── Default Separator Icon ───────────────────────────────\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n    >\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  )\n}\n\n// ─── Ellipsis Icon ────────────────────────────────────────\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n    </svg>\n  )\n}\n\n// ─── Breadcrumb (Root) ────────────────────────────────────\n\nconst breadcrumbSizeMap = {\n  sm: { text: 'text-xs', icon: 'icon-xs', gap: 'gap-1.5' },\n  default: { text: 'text-sm', icon: 'icon-xs', gap: 'gap-2' },\n  lg: { text: 'text-md', icon: 'icon-sm', gap: 'gap-2' },\n} as const\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n  /** Separator element between items */\n  separator?: React.ReactNode\n  /** Size of the breadcrumb */\n  size?: 'sm' | 'default' | 'lg'\n  /** Collapse the middle items into an ellipsis when there are more items than this (undefined = no collapse) */\n  maxItems?: number\n  /** Items kept before the ellipsis when collapsed */\n  itemsBeforeCollapse?: number\n  /** Items kept after the ellipsis when collapsed */\n  itemsAfterCollapse?: number\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ className, separator, size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...props }, ref) => (\n    <BreadcrumbContext.Provider value={{ size, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse }}>\n      <nav\n        ref={ref}\n        aria-label=\"breadcrumb\"\n        className={cn('', className)}\n        {...props}\n      />\n    </BreadcrumbContext.Provider>\n  )\n)\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ─── BreadcrumbList ───────────────────────────────────────\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n  ({ className, children, ...props }, ref) => {\n    const { size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1 } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <ol\n        ref={ref}\n        className={cn(\n          'flex flex-wrap items-center',\n          sizeClass.gap,\n          sizeClass.text,\n          'text-text-muted',\n          className\n        )}\n        {...props}\n      >\n        {collapseItems(children, maxItems, itemsBeforeCollapse, itemsAfterCollapse)}\n      </ol>\n    )\n  }\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ─── BreadcrumbItem ───────────────────────────────────────\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      className={cn('inline-flex items-center gap-1.5', className)}\n      {...props}\n    />\n  )\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ─── BreadcrumbLink ───────────────────────────────────────\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n  /** Use Radix Slot to compose with custom link components */\n  asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild, className, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'a'\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          'transition-colors duration-fast hover:text-foreground',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ─── BreadcrumbPage ───────────────────────────────────────\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n  ({ className, ...props }, ref) => (\n    <span\n      ref={ref}\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn('text-foreground', className)}\n      {...props}\n    />\n  )\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ─── BreadcrumbSeparator ──────────────────────────────────\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ children, className, ...props }, ref) => {\n    const { separator, size = 'default' } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <li\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('flex items-center text-text-subtle', className)}\n        {...props}\n      >\n        {children ?? separator ?? <ChevronRightIcon className={sizeClass.icon} />}\n      </li>\n    )\n  }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ─── BreadcrumbEllipsis ───────────────────────────────────\n\nexport interface BreadcrumbEllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n  ({ className, ...props }, ref) => {\n    const { size = 'default' } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <span\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('flex items-center justify-center', className)}\n        {...props}\n      >\n        <EllipsisIcon className={sizeClass.icon} />\n        <span className=\"sr-only\">More</span>\n      </span>\n    )\n  }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n// ─── Collapse ─────────────────────────────────────────────\n\n// Items are often rendered from a list as <Fragment>{separator}{item}</Fragment>,\n// so fragments are unwrapped before counting.\nfunction flattenFragments(children: React.ReactNode): React.ReactNode[] {\n  return React.Children.toArray(children).flatMap((node) =>\n    React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment\n      ? flattenFragments(node.props.children).map((child) =>\n          // Prefix keys so children of different fragments stay unique\n          React.isValidElement(child) ? React.cloneElement(child, { key: `${node.key}${child.key}` }) : child\n        )\n      : [node]\n  )\n}\n\n// Children passed from a Server Component arrive with lazy element types, so\n// `node.type === BreadcrumbItem` cannot tell them apart. When no child can be\n// identified, the list is read as the alternating item / separator order every\n// breadcrumb uses. Unidentified children next to identified separators (items\n// wrapped in the caller's own component) count as items.\nfunction classifyNodes(nodes: React.ReactNode[]): ('item' | 'separator')[] {\n  const known = nodes.map((node) => {\n    const type = React.isValidElement(node) ? node.type : null\n    return type === BreadcrumbSeparator ? 'separator' : type === BreadcrumbItem ? 'item' : null\n  })\n  if (known.every((kind) => kind === null)) {\n    return nodes.map((_, i) => (i % 2 === 0 ? 'item' : 'separator'))\n  }\n  return known.map((kind) => kind ?? 'item')\n}\n\n// Groups children into segments (the separator before an item + the item),\n// then keeps the first `before` and last `after` segments around one ellipsis\n// item. The user's own separators are reused, so custom separators survive.\nfunction collapseItems(children: React.ReactNode, maxItems: number | undefined, before: number, after: number) {\n  if (maxItems === undefined) return children\n\n  const nodes = flattenFragments(children)\n  const kinds = classifyNodes(nodes)\n  const segments: { separator: React.ReactNode; nodes: React.ReactNode[] }[] = []\n  let pendingSeparator: React.ReactNode = null\n  nodes.forEach((node, i) => {\n    if (kinds[i] === 'separator') {\n      pendingSeparator = node\n    } else {\n      segments.push({ separator: pendingSeparator, nodes: [node] })\n      pendingSeparator = null\n    }\n  })\n\n  if (segments.length <= maxItems || before + after >= segments.length) return children\n\n  const head = segments.slice(0, before)\n  const tail = segments.slice(segments.length - after)\n  const render = (list: typeof segments) => list.flatMap((seg) => (seg.separator ? [seg.separator, ...seg.nodes] : seg.nodes))\n  const ellipsisSeparator = segments[before].separator\n\n  return [\n    ...render(head),\n    ...(ellipsisSeparator ? [ellipsisSeparator] : []),\n    <BreadcrumbItem key=\"breadcrumb-collapsed\">\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>,\n    ...render(tail),\n  ]\n}\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n  breadcrumbSizeMap,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/button.d.mts

@@ -11,8 +11,8 @@ declare const solidColorMap: {
 type ButtonColor = keyof typeof solidColorMap;
 declare const buttonVariants: (props?: ({
     variant?: "link" | "outline" | "solid" | "ghost" | null | undefined;
-    size?: "xs" | "sm" | "default" | "lg" | "icon" | "md" | null | undefined;
-    radius?: "sm" | "default" | "lg" | "xl" | "2xl" | "base" | "none" | "3xl" | "full" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "md" | "xs" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

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

@@ -11,8 +11,8 @@ declare const solidColorMap: {
 type ButtonColor = keyof typeof solidColorMap;
 declare const buttonVariants: (props?: ({
     variant?: "link" | "outline" | "solid" | "ghost" | null | undefined;
-    size?: "xs" | "sm" | "default" | "lg" | "icon" | "md" | null | undefined;
-    radius?: "sm" | "default" | "lg" | "xl" | "2xl" | "base" | "none" | "3xl" | "full" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "md" | "xs" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/ui/button.js

@@ -101,6 +101,16 @@ const buttonVariants = (0, import_class_variance_authority.cva)(
     }
   }
 );
+const REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
+function renderInsideChild(children, render) {
+  let child = children;
+  const resolve = React.use;
+  if (typeof child === "object" && child !== null && child.$$typeof === REACT_LAZY_TYPE && typeof resolve === "function") {
+    child = resolve(child._payload);
+  }
+  if (!React.isValidElement(child)) return render(children);
+  return React.cloneElement(child, void 0, render(child.props.children));
+}
 const Button = React.forwardRef(
   ({
     className,
@@ -144,6 +154,26 @@ const Button = React.forwardRef(
       // icon-only → 20px
     }[size || "default"];
     const selectedStyles = selected ? variant === "outline" ? "bg-background-muted" : variant === "ghost" ? "font-semibold" : "" : "";
+    const renderContent = (content) => loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "svg",
+        {
+          className: (0, import_utils.cn)(iconSizeClass, "animate-spin"),
+          fill: "none",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: content })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: leftIcon }),
+      content,
+      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: rightIcon })
+    ] });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Comp,
       {
@@ -153,26 +183,7 @@ const Button = React.forwardRef(
         "aria-busy": loading || void 0,
         "aria-pressed": selected || void 0,
         ...props,
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "svg",
-            {
-              className: (0, import_utils.cn)(iconSizeClass, "animate-spin"),
-              fill: "none",
-              viewBox: "0 0 24 24",
-              "aria-hidden": "true",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          leftIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: leftIcon }),
-          children,
-          rightIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: rightIcon })
-        ] })
+        children: asChild ? renderInsideChild(children, renderContent) : renderContent(children)
       }
     );
   }

package/dist/components/ui/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\n// Solid color maps (applied when variant=\"solid\")\nconst solidColorMap = {\n  default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n  primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n  destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nexport type ButtonColor = keyof typeof solidColorMap\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        solid: 'font-semibold',\n        outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted font-normal',\n        ghost: 'text-foreground hover:bg-background-muted font-normal',\n        link: 'text-text-link underline-offset-4 hover:underline font-normal',\n      },\n      size: {\n        xs: 'h-7 px-2.5 text-xs gap-1',     // 28px height, 10px paddingX, 12px font\n        sm: 'h-8 px-3 text-sm gap-2',       // 32px height, 12px paddingX, 13px font\n        md: 'h-9 px-3.5 text-md gap-2',     // 36px height, 14px paddingX, 14px font\n        default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n        lg: 'h-12 px-6 text-base gap-2',    // 48px height, 24px paddingX, 16px font\n        icon: 'h-10 w-10',\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md (Figma button default)\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: 'w-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n      radius: 'default',\n      fullWidth: false,\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** Solid variant color */\n  color?: ButtonColor\n  asChild?: boolean\n  loading?: boolean\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  selected?: boolean\n  fontWeight?: 'normal' | 'semibold'\n  pressEffect?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    className,\n    variant: variantProp,\n    color: colorProp,\n    size: sizeProp,\n    radius: radiusProp,\n    fullWidth,\n    asChild = false,\n    loading = false,\n    disabled: disabledProp,\n    leftIcon,\n    rightIcon,\n    selected = false,\n    fontWeight: fontWeightProp,\n    pressEffect,\n    children,\n    ...props\n  }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    const groupContext = useButtonGroup()\n\n    // Use context values as fallback, individual props take precedence\n    const variant = variantProp ?? groupContext?.variant ?? 'solid'\n    const color = colorProp ?? 'default'\n    const size = sizeProp ?? groupContext?.size\n    const radius = radiusProp ?? groupContext?.radius\n    const disabled = disabledProp ?? groupContext?.disabled\n\n    // Priority: direct prop > ButtonGroup context > variant default (no class)\n    const fontWeight = fontWeightProp ?? groupContext?.fontWeight\n\n    // FontWeight class (overrides variant default)\n    const fontWeightClass = fontWeight === 'normal' ? 'font-normal' : fontWeight === 'semibold' ? 'font-semibold' : ''\n\n    // Icon size for button with text (5-step scale)\n    // xs~sm: 14px, md~default~lg: 16px\n    const iconSizeClass = {\n      xs: 'icon-xs',      // 14px\n      sm: 'icon-xs',      // 14px\n      md: 'icon-sm',      // 16px\n      default: 'icon-sm', // 16px\n      lg: 'icon-sm',      // 16px\n      icon: 'icon-md',    // icon-only → 20px\n    }[size || 'default']\n\n    // Selected styles by variant (used in ButtonGroup)\n    const selectedStyles = selected ? (\n      variant === 'outline' ? 'bg-background-muted' :\n      variant === 'ghost' ? 'font-semibold' : ''\n    ) : ''\n\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, radius, fullWidth }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', fontWeightClass, selectedStyles, className)}\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        aria-pressed={selected || undefined}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <svg\n              className={cn(iconSizeClass, 'animate-spin')}\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              aria-hidden=\"true\"\n            >\n              <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n              <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n            </svg>\n            <span>{children}</span>\n          </>\n        ) : (\n          <>\n            {leftIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{leftIcon}</span>}\n            {children}\n            {rightIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{rightIcon}</span>}\n          </>\n        )}\n      </Comp>\n    )\n  }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\n// Solid color maps (applied when variant=\"solid\")\nconst solidColorMap = {\n  default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n  primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n  destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nexport type ButtonColor = keyof typeof solidColorMap\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        solid: 'font-semibold',\n        outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted font-normal',\n        ghost: 'text-foreground hover:bg-background-muted font-normal',\n        link: 'text-text-link underline-offset-4 hover:underline font-normal',\n      },\n      size: {\n        xs: 'h-7 px-2.5 text-xs gap-1',     // 28px height, 10px paddingX, 12px font\n        sm: 'h-8 px-3 text-sm gap-2',       // 32px height, 12px paddingX, 13px font\n        md: 'h-9 px-3.5 text-md gap-2',     // 36px height, 14px paddingX, 14px font\n        default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n        lg: 'h-12 px-6 text-base gap-2',    // 48px height, 24px paddingX, 16px font\n        icon: 'h-10 w-10',\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md (Figma button default)\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: 'w-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n      radius: 'default',\n      fullWidth: false,\n    },\n  }\n)\n\nconst REACT_LAZY_TYPE = Symbol.for('react.lazy')\n\n// asChild: Slot merges props only into a single child element, so icons and\n// wrappers must go inside that child, not next to it. Lazy children (from\n// Server Components) are resolved the same way Radix Slot does.\nfunction renderInsideChild(\n  children: React.ReactNode,\n  render: (content: React.ReactNode) => React.ReactNode\n): React.ReactNode {\n  let child: unknown = children\n  const resolve = (React as { use?: (usable: unknown) => unknown }).use\n  if (\n    typeof child === 'object' && child !== null &&\n    (child as { $$typeof?: symbol }).$$typeof === REACT_LAZY_TYPE &&\n    typeof resolve === 'function'\n  ) {\n    child = resolve((child as { _payload: unknown })._payload)\n  }\n  if (!React.isValidElement<{ children?: React.ReactNode }>(child)) return render(children)\n  return React.cloneElement(child, undefined, render(child.props.children))\n}\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** Solid variant color */\n  color?: ButtonColor\n  asChild?: boolean\n  loading?: boolean\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  selected?: boolean\n  fontWeight?: 'normal' | 'semibold'\n  pressEffect?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    className,\n    variant: variantProp,\n    color: colorProp,\n    size: sizeProp,\n    radius: radiusProp,\n    fullWidth,\n    asChild = false,\n    loading = false,\n    disabled: disabledProp,\n    leftIcon,\n    rightIcon,\n    selected = false,\n    fontWeight: fontWeightProp,\n    pressEffect,\n    children,\n    ...props\n  }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    const groupContext = useButtonGroup()\n\n    // Use context values as fallback, individual props take precedence\n    const variant = variantProp ?? groupContext?.variant ?? 'solid'\n    const color = colorProp ?? 'default'\n    const size = sizeProp ?? groupContext?.size\n    const radius = radiusProp ?? groupContext?.radius\n    const disabled = disabledProp ?? groupContext?.disabled\n\n    // Priority: direct prop > ButtonGroup context > variant default (no class)\n    const fontWeight = fontWeightProp ?? groupContext?.fontWeight\n\n    // FontWeight class (overrides variant default)\n    const fontWeightClass = fontWeight === 'normal' ? 'font-normal' : fontWeight === 'semibold' ? 'font-semibold' : ''\n\n    // Icon size for button with text (5-step scale)\n    // xs~sm: 14px, md~default~lg: 16px\n    const iconSizeClass = {\n      xs: 'icon-xs',      // 14px\n      sm: 'icon-xs',      // 14px\n      md: 'icon-sm',      // 16px\n      default: 'icon-sm', // 16px\n      lg: 'icon-sm',      // 16px\n      icon: 'icon-md',    // icon-only → 20px\n    }[size || 'default']\n\n    // Selected styles by variant (used in ButtonGroup)\n    const selectedStyles = selected ? (\n      variant === 'outline' ? 'bg-background-muted' :\n      variant === 'ghost' ? 'font-semibold' : ''\n    ) : ''\n\n    const renderContent = (content: React.ReactNode) => loading ? (\n      <>\n        <svg\n          className={cn(iconSizeClass, 'animate-spin')}\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n          <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n        </svg>\n        <span>{content}</span>\n      </>\n    ) : (\n      <>\n        {leftIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{leftIcon}</span>}\n        {content}\n        {rightIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{rightIcon}</span>}\n      </>\n    )\n\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, radius, fullWidth }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', fontWeightClass, selectedStyles, className)}\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        aria-pressed={selected || undefined}\n        {...props}\n      >\n        {asChild ? renderInsideChild(children, renderContent) : renderContent(children)}\n      </Comp>\n    )\n  }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":[]}

package/dist/components/ui/button.mjs

@@ -67,6 +67,16 @@ const buttonVariants = cva(
     }
   }
 );
+const REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
+function renderInsideChild(children, render) {
+  let child = children;
+  const resolve = React.use;
+  if (typeof child === "object" && child !== null && child.$$typeof === REACT_LAZY_TYPE && typeof resolve === "function") {
+    child = resolve(child._payload);
+  }
+  if (!React.isValidElement(child)) return render(children);
+  return React.cloneElement(child, void 0, render(child.props.children));
+}
 const Button = React.forwardRef(
   ({
     className,
@@ -110,6 +120,26 @@ const Button = React.forwardRef(
       // icon-only → 20px
     }[size || "default"];
     const selectedStyles = selected ? variant === "outline" ? "bg-background-muted" : variant === "ghost" ? "font-semibold" : "" : "";
+    const renderContent = (content) => loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: cn(iconSizeClass, "animate-spin"),
+          fill: "none",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: content })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftIcon && /* @__PURE__ */ jsx("span", { className: cn(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: leftIcon }),
+      content,
+      rightIcon && /* @__PURE__ */ jsx("span", { className: cn(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: rightIcon })
+    ] });
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -119,26 +149,7 @@ const Button = React.forwardRef(
         "aria-busy": loading || void 0,
         "aria-pressed": selected || void 0,
         ...props,
-        children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: cn(iconSizeClass, "animate-spin"),
-              fill: "none",
-              viewBox: "0 0 24 24",
-              "aria-hidden": "true",
-              children: [
-                /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { children })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          leftIcon && /* @__PURE__ */ jsx("span", { className: cn(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: leftIcon }),
-          children,
-          rightIcon && /* @__PURE__ */ jsx("span", { className: cn(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: rightIcon })
-        ] })
+        children: asChild ? renderInsideChild(children, renderContent) : renderContent(children)
       }
     );
   }

package/dist/components/ui/button.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\n// Solid color maps (applied when variant=\"solid\")\nconst solidColorMap = {\n  default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n  primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n  destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nexport type ButtonColor = keyof typeof solidColorMap\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        solid: 'font-semibold',\n        outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted font-normal',\n        ghost: 'text-foreground hover:bg-background-muted font-normal',\n        link: 'text-text-link underline-offset-4 hover:underline font-normal',\n      },\n      size: {\n        xs: 'h-7 px-2.5 text-xs gap-1',     // 28px height, 10px paddingX, 12px font\n        sm: 'h-8 px-3 text-sm gap-2',       // 32px height, 12px paddingX, 13px font\n        md: 'h-9 px-3.5 text-md gap-2',     // 36px height, 14px paddingX, 14px font\n        default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n        lg: 'h-12 px-6 text-base gap-2',    // 48px height, 24px paddingX, 16px font\n        icon: 'h-10 w-10',\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md (Figma button default)\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: 'w-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n      radius: 'default',\n      fullWidth: false,\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** Solid variant color */\n  color?: ButtonColor\n  asChild?: boolean\n  loading?: boolean\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  selected?: boolean\n  fontWeight?: 'normal' | 'semibold'\n  pressEffect?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    className,\n    variant: variantProp,\n    color: colorProp,\n    size: sizeProp,\n    radius: radiusProp,\n    fullWidth,\n    asChild = false,\n    loading = false,\n    disabled: disabledProp,\n    leftIcon,\n    rightIcon,\n    selected = false,\n    fontWeight: fontWeightProp,\n    pressEffect,\n    children,\n    ...props\n  }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    const groupContext = useButtonGroup()\n\n    // Use context values as fallback, individual props take precedence\n    const variant = variantProp ?? groupContext?.variant ?? 'solid'\n    const color = colorProp ?? 'default'\n    const size = sizeProp ?? groupContext?.size\n    const radius = radiusProp ?? groupContext?.radius\n    const disabled = disabledProp ?? groupContext?.disabled\n\n    // Priority: direct prop > ButtonGroup context > variant default (no class)\n    const fontWeight = fontWeightProp ?? groupContext?.fontWeight\n\n    // FontWeight class (overrides variant default)\n    const fontWeightClass = fontWeight === 'normal' ? 'font-normal' : fontWeight === 'semibold' ? 'font-semibold' : ''\n\n    // Icon size for button with text (5-step scale)\n    // xs~sm: 14px, md~default~lg: 16px\n    const iconSizeClass = {\n      xs: 'icon-xs',      // 14px\n      sm: 'icon-xs',      // 14px\n      md: 'icon-sm',      // 16px\n      default: 'icon-sm', // 16px\n      lg: 'icon-sm',      // 16px\n      icon: 'icon-md',    // icon-only → 20px\n    }[size || 'default']\n\n    // Selected styles by variant (used in ButtonGroup)\n    const selectedStyles = selected ? (\n      variant === 'outline' ? 'bg-background-muted' :\n      variant === 'ghost' ? 'font-semibold' : ''\n    ) : ''\n\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, radius, fullWidth }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', fontWeightClass, selectedStyles, className)}\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        aria-pressed={selected || undefined}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <svg\n              className={cn(iconSizeClass, 'animate-spin')}\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              aria-hidden=\"true\"\n            >\n              <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n              <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n            </svg>\n            <span>{children}</span>\n          </>\n        ) : (\n          <>\n            {leftIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{leftIcon}</span>}\n            {children}\n            {rightIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{rightIcon}</span>}\n          </>\n        )}\n      </Comp>\n    )\n  }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\n// Solid color maps (applied when variant=\"solid\")\nconst solidColorMap = {\n  default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n  primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n  destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nexport type ButtonColor = keyof typeof solidColorMap\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        solid: 'font-semibold',\n        outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted font-normal',\n        ghost: 'text-foreground hover:bg-background-muted font-normal',\n        link: 'text-text-link underline-offset-4 hover:underline font-normal',\n      },\n      size: {\n        xs: 'h-7 px-2.5 text-xs gap-1',     // 28px height, 10px paddingX, 12px font\n        sm: 'h-8 px-3 text-sm gap-2',       // 32px height, 12px paddingX, 13px font\n        md: 'h-9 px-3.5 text-md gap-2',     // 36px height, 14px paddingX, 14px font\n        default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n        lg: 'h-12 px-6 text-base gap-2',    // 48px height, 24px paddingX, 16px font\n        icon: 'h-10 w-10',\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md (Figma button default)\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: 'w-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n      radius: 'default',\n      fullWidth: false,\n    },\n  }\n)\n\nconst REACT_LAZY_TYPE = Symbol.for('react.lazy')\n\n// asChild: Slot merges props only into a single child element, so icons and\n// wrappers must go inside that child, not next to it. Lazy children (from\n// Server Components) are resolved the same way Radix Slot does.\nfunction renderInsideChild(\n  children: React.ReactNode,\n  render: (content: React.ReactNode) => React.ReactNode\n): React.ReactNode {\n  let child: unknown = children\n  const resolve = (React as { use?: (usable: unknown) => unknown }).use\n  if (\n    typeof child === 'object' && child !== null &&\n    (child as { $$typeof?: symbol }).$$typeof === REACT_LAZY_TYPE &&\n    typeof resolve === 'function'\n  ) {\n    child = resolve((child as { _payload: unknown })._payload)\n  }\n  if (!React.isValidElement<{ children?: React.ReactNode }>(child)) return render(children)\n  return React.cloneElement(child, undefined, render(child.props.children))\n}\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** Solid variant color */\n  color?: ButtonColor\n  asChild?: boolean\n  loading?: boolean\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  selected?: boolean\n  fontWeight?: 'normal' | 'semibold'\n  pressEffect?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    className,\n    variant: variantProp,\n    color: colorProp,\n    size: sizeProp,\n    radius: radiusProp,\n    fullWidth,\n    asChild = false,\n    loading = false,\n    disabled: disabledProp,\n    leftIcon,\n    rightIcon,\n    selected = false,\n    fontWeight: fontWeightProp,\n    pressEffect,\n    children,\n    ...props\n  }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    const groupContext = useButtonGroup()\n\n    // Use context values as fallback, individual props take precedence\n    const variant = variantProp ?? groupContext?.variant ?? 'solid'\n    const color = colorProp ?? 'default'\n    const size = sizeProp ?? groupContext?.size\n    const radius = radiusProp ?? groupContext?.radius\n    const disabled = disabledProp ?? groupContext?.disabled\n\n    // Priority: direct prop > ButtonGroup context > variant default (no class)\n    const fontWeight = fontWeightProp ?? groupContext?.fontWeight\n\n    // FontWeight class (overrides variant default)\n    const fontWeightClass = fontWeight === 'normal' ? 'font-normal' : fontWeight === 'semibold' ? 'font-semibold' : ''\n\n    // Icon size for button with text (5-step scale)\n    // xs~sm: 14px, md~default~lg: 16px\n    const iconSizeClass = {\n      xs: 'icon-xs',      // 14px\n      sm: 'icon-xs',      // 14px\n      md: 'icon-sm',      // 16px\n      default: 'icon-sm', // 16px\n      lg: 'icon-sm',      // 16px\n      icon: 'icon-md',    // icon-only → 20px\n    }[size || 'default']\n\n    // Selected styles by variant (used in ButtonGroup)\n    const selectedStyles = selected ? (\n      variant === 'outline' ? 'bg-background-muted' :\n      variant === 'ghost' ? 'font-semibold' : ''\n    ) : ''\n\n    const renderContent = (content: React.ReactNode) => loading ? (\n      <>\n        <svg\n          className={cn(iconSizeClass, 'animate-spin')}\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n          <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n        </svg>\n        <span>{content}</span>\n      </>\n    ) : (\n      <>\n        {leftIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{leftIcon}</span>}\n        {content}\n        {rightIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{rightIcon}</span>}\n      </>\n    )\n\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, radius, fullWidth }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', fontWeightClass, selectedStyles, className)}\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        aria-pressed={selected || undefined}\n        {...props}\n      >\n        {asChild ? renderInsideChild(children, renderContent) : renderContent(children)}\n      </Comp>\n    )\n  }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":[]}

package/dist/components/ui/card.d.mts

@@ -6,8 +6,8 @@ type CardSize = 'sm' | 'default' | 'lg';
 type CardDirection = 'vertical' | 'horizontal';
 declare const cardVariants: (props?: ({
     variant?: "default" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "default" | "lg" | null | undefined;
-    radius?: "sm" | "lg" | "xl" | "2xl" | "base" | "md" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    radius?: "sm" | "lg" | "base" | "md" | "xl" | "2xl" | null | undefined;
     direction?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CardVariant = 'default' | 'outline' | 'ghost';

package/dist/components/ui/card.d.ts

@@ -6,8 +6,8 @@ type CardSize = 'sm' | 'default' | 'lg';
 type CardDirection = 'vertical' | 'horizontal';
 declare const cardVariants: (props?: ({
     variant?: "default" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "default" | "lg" | null | undefined;
-    radius?: "sm" | "lg" | "xl" | "2xl" | "base" | "md" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    radius?: "sm" | "lg" | "base" | "md" | "xl" | "2xl" | null | undefined;
     direction?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CardVariant = 'default' | 'outline' | 'ghost';

package/dist/components/ui/chart.d.mts

@@ -74,7 +74,7 @@ type ChartTooltipContentProps = React.ComponentProps<'div'> & {
     labelKey?: string;
 };
 declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
 type LegendPayloadItem = {
     value?: string;
     type?: string;

package/dist/components/ui/chart.d.ts

@@ -74,7 +74,7 @@ type ChartTooltipContentProps = React.ComponentProps<'div'> & {
     labelKey?: string;
 };
 declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
 type LegendPayloadItem = {
     value?: string;
     type?: string;

package/dist/components/ui/checkbox.d.mts

@@ -9,7 +9,7 @@ declare const checkboxColorMap: {
 };
 type CheckboxColor = keyof typeof checkboxColorMap;
 declare const checkboxVariants: (props?: ({
-    size?: "sm" | "default" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
     radius?: "sm" | "none" | "md" | null | undefined;
     weight?: "bold" | "thin" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/ui/checkbox.d.ts

@@ -9,7 +9,7 @@ declare const checkboxColorMap: {
 };
 type CheckboxColor = keyof typeof checkboxColorMap;
 declare const checkboxVariants: (props?: ({
-    size?: "sm" | "default" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
     radius?: "sm" | "none" | "md" | null | undefined;
     weight?: "bold" | "thin" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/ui/divider.d.mts

@@ -6,7 +6,7 @@ declare const dividerVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
     variant?: "solid" | "dashed" | "dotted" | null | undefined;
     color?: "default" | "strong" | "muted" | null | undefined;
-    spacing?: "sm" | "default" | "lg" | "md" | null | undefined;
+    spacing?: "default" | "sm" | "lg" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface DividerProps extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {
     /** Direction of the divider */

package/dist/components/ui/divider.d.ts

@@ -6,7 +6,7 @@ declare const dividerVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
     variant?: "solid" | "dashed" | "dotted" | null | undefined;
     color?: "default" | "strong" | "muted" | null | undefined;
-    spacing?: "sm" | "default" | "lg" | "md" | null | undefined;
+    spacing?: "default" | "sm" | "lg" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface DividerProps extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {
     /** Direction of the divider */

package/dist/components/ui/drawer.d.mts

@@ -5,10 +5,10 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
 type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 declare const drawerSizeHorizontal: (props?: ({
-    size?: "sm" | "lg" | "xl" | "md" | "full" | null | undefined;
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const drawerSizeVertical: (props?: ({
-    size?: "sm" | "lg" | "xl" | "md" | "full" | null | undefined;
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/drawer.d.ts

@@ -5,10 +5,10 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
 type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 declare const drawerSizeHorizontal: (props?: ({
-    size?: "sm" | "lg" | "xl" | "md" | "full" | null | undefined;
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const drawerSizeVertical: (props?: ({
-    size?: "sm" | "lg" | "xl" | "md" | "full" | null | undefined;
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/field.d.mts

@@ -22,7 +22,7 @@ type FieldControlKind = 'single' | 'group' | 'labelled';
 declare function useFieldContext(): FieldContextValue | null;
 declare function useFieldControl(kind: FieldControlKind, enabled: boolean): void;
 declare const fieldVariants: (props?: ({
-    gap?: "xs" | "sm" | "default" | "lg" | "none" | null | undefined;
+    gap?: "default" | "sm" | "lg" | "none" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof fieldVariants> {
     error?: boolean;

package/dist/components/ui/field.d.ts

@@ -22,7 +22,7 @@ type FieldControlKind = 'single' | 'group' | 'labelled';
 declare function useFieldContext(): FieldContextValue | null;
 declare function useFieldControl(kind: FieldControlKind, enabled: boolean): void;
 declare const fieldVariants: (props?: ({
-    gap?: "xs" | "sm" | "default" | "lg" | "none" | null | undefined;
+    gap?: "default" | "sm" | "lg" | "none" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof fieldVariants> {
     error?: boolean;

package/dist/components/ui/icon-button.d.mts

@@ -5,8 +5,8 @@ import { ButtonColor } from './button.mjs';
 
 declare const iconButtonVariants: (props?: ({
     variant?: "outline" | "solid" | "subtle" | "ghost" | null | undefined;
-    size?: "xs" | "sm" | "default" | "lg" | "md" | null | undefined;
-    radius?: "sm" | "default" | "lg" | "xl" | "2xl" | "base" | "none" | "3xl" | "full" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | "xs" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
     /** Solid variant color */

package/dist/components/ui/icon-button.d.ts

@@ -5,8 +5,8 @@ import { ButtonColor } from './button.js';
 
 declare const iconButtonVariants: (props?: ({
     variant?: "outline" | "solid" | "subtle" | "ghost" | null | undefined;
-    size?: "xs" | "sm" | "default" | "lg" | "md" | null | undefined;
-    radius?: "sm" | "default" | "lg" | "xl" | "2xl" | "base" | "none" | "3xl" | "full" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | "xs" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
     /** Solid variant color */

package/dist/components/ui/icon-button.js

@@ -95,6 +95,16 @@ const iconButtonVariants = (0, import_class_variance_authority.cva)(
     }
   }
 );
+const REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
+function renderInsideChild(children, render) {
+  let child = children;
+  const resolve = React.use;
+  if (typeof child === "object" && child !== null && child.$$typeof === REACT_LAZY_TYPE && typeof resolve === "function") {
+    child = resolve(child._payload);
+  }
+  if (!React.isValidElement(child)) return render(children);
+  return React.cloneElement(child, void 0, render(child.props.children));
+}
 const IconButton = React.forwardRef(
   ({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {
     const groupContext = (0, import_button_group.useButtonGroup)();
@@ -116,6 +126,19 @@ const IconButton = React.forwardRef(
       lg: "icon-lg"
       // 24px
     }[size || "default"];
+    const renderContent = (content) => loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        className: (0, import_utils.cn)(iconSize, "animate-spin"),
+        fill: "none",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSize, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: content });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Comp,
       {
@@ -124,19 +147,7 @@ const IconButton = React.forwardRef(
         disabled: disabled || loading,
         "aria-busy": loading || void 0,
         ...props,
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "svg",
-          {
-            className: (0, import_utils.cn)(iconSize, "animate-spin"),
-            fill: "none",
-            viewBox: "0 0 24 24",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-            ]
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSize, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children })
+        children: asChild ? renderInsideChild(children, renderContent) : renderContent(children)
       }
     );
   }