@karakuri-ui/react 0.2.3 → 0.2.4

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { cn } from '../../lib/utils'\n\n// Radius (matches Input — set at Root, propagates to Trigger and Content)\ntype SelectRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n\nconst triggerRadiusMap: Record<SelectRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  default: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Auto-mapping: root radius → content radius (3 levels)\ntype SelectContentRadius = 'md' | 'lg' | 'xl'\n\nconst contentRadiusFromRoot: Record<SelectRadius, SelectContentRadius> = {\n  none: 'md',\n  sm: 'md',\n  base: 'md',\n  default: 'md',\n  lg: 'lg',\n  xl: 'xl',\n  '2xl': 'xl',\n  '3xl': 'xl',\n  full: 'xl',\n}\n\nconst contentRadiusMap: Record<SelectContentRadius, string> = {\n  md: 'rounded-md',     // 6px\n  lg: 'rounded-lg',     // 8px\n  xl: 'rounded-xl',     // 12px\n}\n\nconst itemRadiusMap: Record<SelectContentRadius, string> = {\n  md: 'rounded',        // 4px — perceptual balance (67%)\n  lg: 'rounded-md',     // 6px — perceptual balance (75%)\n  xl: 'rounded-lg',     // 8px — perceptual balance (67%)\n}\n\n// Size variants (matches Input component)\ntype SelectSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl'\n\n// Trigger sizes (identical to Input)\nconst triggerSizeMap: Record<SelectSize, string> = {\n  xs: 'h-9 px-3 text-sm',          // 36px\n  sm: 'h-10 px-3 text-md',         // 40px\n  default: 'h-11 px-4 text-base',  // 44px\n  lg: 'h-12 px-4 text-base',       // 48px\n  xl: 'h-14 px-4 text-base',       // 56px\n}\n\n// Trigger icon sizes (matches Input icon pattern)\nconst triggerIconSizeMap: Record<SelectSize, string> = {\n  xs: 'icon-xs',      // 14px\n  sm: 'icon-xs',      // 14px\n  default: 'icon-sm', // 16px\n  lg: 'icon-sm',      // 16px\n  xl: 'icon-sm',      // 16px\n}\n\n// Auto-mapping: trigger size → content item size (3 levels)\ntype SelectItemSize = 'sm' | 'md' | 'lg'\n\nconst itemSizeFromTrigger: Record<SelectSize, SelectItemSize> = {\n  xs: 'sm',\n  sm: 'sm',\n  default: 'md',\n  lg: 'md',\n  xl: 'lg',\n}\n\n// Item sizes (font matches Trigger for seamless selection, padding controls density)\nconst itemSizeMap: Record<SelectItemSize, string> = {\n  sm: 'pl-2 pr-6 py-1.5 text-sm',\n  md: 'pl-3 pr-8 py-1.5 text-base',\n  lg: 'pl-3 pr-10 py-2.5 text-base',\n}\n\n// Item indicator (check mark) — right-aligned\nconst indicatorSizeMap: Record<SelectItemSize, string> = {\n  sm: 'right-2 h-3 w-3',\n  md: 'right-2 h-3.5 w-3.5',\n  lg: 'right-3 h-4 w-4',\n}\n\n// Label sizes\nconst labelSizeMap: Record<SelectItemSize, string> = {\n  sm: 'px-2 py-1.5 text-xs',\n  md: 'px-2 py-1.5 text-xs',\n  lg: 'px-3 py-2.5 text-xs',\n}\n\n// Flush mode — items span full width, no inner radius\nconst flushItemPaddingMap: Record<SelectItemSize, string> = {\n  sm: 'pl-3 pr-7',\n  md: 'pl-4 pr-9',\n  lg: 'pl-4 pr-11',\n}\n\nconst flushIndicatorSizeMap: Record<SelectItemSize, string> = {\n  sm: 'right-3 h-3 w-3',\n  md: 'right-3 h-3.5 w-3.5',\n  lg: 'right-4 h-4 w-4',\n}\n\nconst flushLabelPaddingMap: Record<SelectItemSize, string> = {\n  sm: 'px-3',\n  md: 'px-3',\n  lg: 'px-4',\n}\n\n// Root context — set at Root, consumed by Trigger and Content\nconst SelectRootContext = React.createContext<{\n  size: SelectSize\n  radius: SelectRadius\n}>({ size: 'default', radius: 'default' })\n\n// Style context — set at Content, consumed by Item/Label\nconst SelectStyleContext = React.createContext<{\n  contentRadius: SelectContentRadius\n  itemSize: SelectItemSize\n  flush: boolean\n}>({ contentRadius: 'xl', itemSize: 'md', flush: false })\n\n// Root — state management + size/radius context\nconst SelectRoot = ({\n  size = 'default',\n  radius = 'default',\n  ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {\n  size?: SelectSize\n  radius?: SelectRadius\n}) => (\n  <SelectRootContext.Provider value={{ size, radius }}>\n    <SelectPrimitive.Root {...props} />\n  </SelectRootContext.Provider>\n)\n\n// Value — displays selected value or placeholder\nconst SelectValue = SelectPrimitive.Value\n\n// Group — groups related items\nconst SelectGroup = SelectPrimitive.Group\n\n// Trigger — the element that opens the select (reads size + radius from context)\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => {\n  const { size, radius } = React.useContext(SelectRootContext)\n  return (\n    <SelectPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'flex w-full items-center justify-between bg-background text-foreground hover:bg-background-muted',\n        'border border-border-form',\n        triggerRadiusMap[radius],\n        'transition-colors duration-micro outline-transparent',\n        'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)] focus:[outline:2px_solid_transparent]',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'data-[placeholder]:text-foreground/30',\n        triggerSizeMap[size],\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <svg\n          className={cn('ml-2 shrink-0 text-text-muted', triggerIconSizeMap[size])}\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n          aria-hidden=\"true\"\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n        </svg>\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\n// ScrollUpButton — scroll indicator at top\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn('flex items-center justify-center py-1 cursor-default', className)}\n    {...props}\n  >\n    <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n    </svg>\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\n// ScrollDownButton — scroll indicator at bottom\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn('flex items-center justify-center py-1 cursor-default', className)}\n    {...props}\n  >\n    <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n    </svg>\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName\n\n// Content — the floating panel (reads size + radius from context, auto-maps both)\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n    flush?: boolean\n  }\n>(({ className, children, position = 'popper', sideOffset = 1, flush = false, onCloseAutoFocus, ...props }, ref) => {\n  const { size, radius } = React.useContext(SelectRootContext)\n  const itemSize = itemSizeFromTrigger[size]\n  const contentRadius = contentRadiusFromRoot[radius]\n  return (\n    <SelectPrimitive.Portal>\n      <SelectStyleContext.Provider value={{ contentRadius, itemSize, flush }}>\n        <SelectPrimitive.Content\n          ref={ref}\n          onCloseAutoFocus={(e) => {\n            e.preventDefault()\n            onCloseAutoFocus?.(e)\n          }}\n          className={cn(\n            'relative z-dropdown min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n            flush ? 'py-1' : 'p-1',\n            contentRadiusMap[contentRadius],\n            position === 'popper' &&\n              'max-h-[var(--radix-select-content-available-height)]',\n            className\n          )}\n          position={position}\n          sideOffset={sideOffset}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.Viewport\n            className={cn(\n              position === 'popper' &&\n                'h-[var(--radix-select-content-available-height)] w-full'\n            )}\n          >\n            {children}\n          </SelectPrimitive.Viewport>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Content>\n      </SelectStyleContext.Provider>\n    </SelectPrimitive.Portal>\n  )\n})\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\n// Item — a single selectable item (with right-aligned check indicator)\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => {\n  const { contentRadius, itemSize, flush } = React.useContext(SelectStyleContext)\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      className={cn(\n        'relative flex w-full cursor-default select-none items-center outline-none',\n        itemSizeMap[itemSize],\n        !flush && itemRadiusMap[contentRadius],\n        flush && flushItemPaddingMap[itemSize],\n        'transition-colors duration-fast',\n        'focus:bg-background-muted',\n        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"truncate\">{children}</SelectPrimitive.ItemText>\n      <span className={cn('absolute flex items-center justify-center', flush ? flushIndicatorSizeMap[itemSize] : indicatorSizeMap[itemSize])}>\n        <SelectPrimitive.ItemIndicator>\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n          </svg>\n        </SelectPrimitive.ItemIndicator>\n      </span>\n    </SelectPrimitive.Item>\n  )\n})\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\n// Label — non-interactive group heading\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => {\n  const { itemSize, flush } = React.useContext(SelectStyleContext)\n  return (\n    <SelectPrimitive.Label\n      ref={ref}\n      className={cn(\n        'font-semibold text-text-muted',\n        labelSizeMap[itemSize],\n        flush && flushLabelPaddingMap[itemSize],\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\n// Separator — visual divider between groups\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n  const { flush } = React.useContext(SelectStyleContext)\n  return (\n    <SelectPrimitive.Separator\n      ref={ref}\n      className={cn('h-px bg-border my-1', !flush && '-mx-1', className)}\n      {...props}\n    />\n  )\n})\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport type { SelectRadius, SelectSize }\n\n// ─── Namespace ──────────────────────────────────────────\nconst Select = Object.assign(SelectRoot, {\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Content: SelectContent,\n  Item: SelectItem,\n  Group: SelectGroup,\n  Label: SelectLabel,\n  Separator: SelectSeparator,\n})\n\nexport {\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectContent,\n  SelectItem,\n  SelectGroup,\n  SelectLabel,\n  SelectSeparator,\n}\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,SAAS,UAAU;AAKnB,MAAM,mBAAiD;AAAA,EACrD,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR;AAKA,MAAM,wBAAmE;AAAA,EACvE,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,mBAAwD;AAAA,EAC5D,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AACN;AAEA,MAAM,gBAAqD;AAAA,EACzD,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AACN;AAMA,MAAM,iBAA6C;AAAA,EACjD,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AACN;AAGA,MAAM,qBAAiD;AAAA,EACrD,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AACN;AAKA,MAAM,sBAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,cAA8C;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,mBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,eAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,sBAAsD;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,wBAAwD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,uBAAuD;AAAA,EAC3D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,oBAAoB,MAAM,cAG7B,EAAE,MAAM,WAAW,QAAQ,UAAU,CAAC;AAGzC,MAAM,qBAAqB,MAAM,cAI9B,EAAE,eAAe,MAAM,UAAU,MAAM,OAAO,MAAM,CAAC;AAGxD,MAAM,aAAa,CAAC;AAAA,EAClB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAG;AACL,MAIE,oCAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,OAAO,KAChD,oCAAC,gBAAgB,MAAhB,EAAsB,GAAG,OAAO,CACnC;AAIF,MAAM,cAAc,gBAAgB;AAGpC,MAAM,cAAc,gBAAgB;AAGpC,MAAM,gBAAgB,MAAM,WAG1B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,QAAM,EAAE,MAAM,OAAO,IAAI,MAAM,WAAW,iBAAiB;AAC3D,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,iBAAiB,MAAM;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,IAAI;AAAA,QACnB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,IACD,oCAAC,gBAAgB,MAAhB,EAAqB,SAAO,QAC3B;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,iCAAiC,mBAAmB,IAAI,CAAC;AAAA,QACvE,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,QAAO;AAAA,QACP,aAAa;AAAA,QACb,eAAY;AAAA;AAAA,MAEZ,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,kBAAiB;AAAA,IACxE,CACF;AAAA,EACF;AAEJ,CAAC;AACD,cAAc,cAAc,gBAAgB,QAAQ;AAGpD,MAAM,uBAAuB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,wDAAwD,SAAS;AAAA,IAC9E,GAAG;AAAA;AAAA,EAEJ,oCAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,GAAG,eAAY,UACzG,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,iBAAgB,CACvE;AACF,CACD;AACD,qBAAqB,cAAc,gBAAgB,eAAe;AAGlE,MAAM,yBAAyB,MAAM,WAGnC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,wDAAwD,SAAS;AAAA,IAC9E,GAAG;AAAA;AAAA,EAEJ,oCAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,GAAG,eAAY,UACzG,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,kBAAiB,CACxE;AACF,CACD;AACD,uBAAuB,cAAc,gBAAgB,iBAAiB;AAGtE,MAAM,gBAAgB,MAAM,WAK1B,CAAC,EAAE,WAAW,UAAU,WAAW,UAAU,aAAa,GAAG,QAAQ,OAAO,kBAAkB,GAAG,MAAM,GAAG,QAAQ;AAClH,QAAM,EAAE,MAAM,OAAO,IAAI,MAAM,WAAW,iBAAiB;AAC3D,QAAM,WAAW,oBAAoB,IAAI;AACzC,QAAM,gBAAgB,sBAAsB,MAAM;AAClD,SACE,oCAAC,gBAAgB,QAAhB,MACC,oCAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,eAAe,UAAU,MAAM,KACnE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,kBAAkB,CAAC,MAAM;AACvB,UAAE,eAAe;AACjB,2BAAmB,CAAC;AAAA,MACtB;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,SAAS;AAAA,QACjB,iBAAiB,aAAa;AAAA,QAC9B,aAAa,YACX;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ,oCAAC,0BAAqB;AAAA,IACtB;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAW;AAAA,UACT,aAAa,YACX;AAAA,QACJ;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,IACA,oCAAC,4BAAuB;AAAA,EAC1B,CACF,CACF;AAEJ,CAAC;AACD,cAAc,cAAc,gBAAgB,QAAQ;AAGpD,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,QAAM,EAAE,eAAe,UAAU,MAAM,IAAI,MAAM,WAAW,kBAAkB;AAC9E,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,YAAY,QAAQ;AAAA,QACpB,CAAC,SAAS,cAAc,aAAa;AAAA,QACrC,SAAS,oBAAoB,QAAQ;AAAA,QACrC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ,oCAAC,gBAAgB,UAAhB,EAAyB,WAAU,cAAY,QAAS;AAAA,IACzD,oCAAC,UAAK,WAAW,GAAG,6CAA6C,QAAQ,sBAAsB,QAAQ,IAAI,iBAAiB,QAAQ,CAAC,KACnI,oCAAC,gBAAgB,eAAhB,MACC,oCAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,GAAG,eAAY,UACzG,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,kBAAiB,CACxE,CACF,CACF;AAAA,EACF;AAEJ,CAAC;AACD,WAAW,cAAc,gBAAgB,KAAK;AAG9C,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,UAAU,MAAM,IAAI,MAAM,WAAW,kBAAkB;AAC/D,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,aAAa,QAAQ;AAAA,QACrB,SAAS,qBAAqB,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,YAAY,cAAc,gBAAgB,MAAM;AAGhD,MAAM,kBAAkB,MAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,MAAM,IAAI,MAAM,WAAW,kBAAkB;AACrD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,uBAAuB,CAAC,SAAS,SAAS,SAAS;AAAA,MAChE,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,gBAAgB,cAAc,gBAAgB,UAAU;AAKxD,MAAM,SAAS,OAAO,OAAO,YAAY;AAAA,EACvC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AACb,CAAC;","names":[]}

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

@@ -0,0 +1,26 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const skeletonVariants: (props?: ({
+    variant?: "text" | "circular" | "rectangular" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+    /** Animation style */
+    animation?: 'pulse' | 'wave' | false;
+    /** Custom width */
+    width?: string | number;
+    /** Custom height */
+    height?: string | number;
+    /** Custom border radius */
+    radius?: string | number;
+    /** Number of text lines (text variant only, generates stacked lines) */
+    count?: number;
+    /** Conditional loading — true: show skeleton, false: render children */
+    loading?: boolean;
+    /** Children to render when loading=false */
+    children?: React.ReactNode;
+}
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, type SkeletonProps, skeletonVariants };

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

@@ -0,0 +1,26 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const skeletonVariants: (props?: ({
+    variant?: "text" | "circular" | "rectangular" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+    /** Animation style */
+    animation?: 'pulse' | 'wave' | false;
+    /** Custom width */
+    width?: string | number;
+    /** Custom height */
+    height?: string | number;
+    /** Custom border radius */
+    radius?: string | number;
+    /** Number of text lines (text variant only, generates stacked lines) */
+    count?: number;
+    /** Conditional loading — true: show skeleton, false: render children */
+    loading?: boolean;
+    /** Children to render when loading=false */
+    children?: React.ReactNode;
+}
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, type SkeletonProps, skeletonVariants };

package/dist/components/ui/skeleton.js

@@ -0,0 +1,144 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var skeleton_exports = {};
+__export(skeleton_exports, {
+  Skeleton: () => Skeleton,
+  skeletonVariants: () => skeletonVariants
+});
+module.exports = __toCommonJS(skeleton_exports);
+var React = __toESM(require("react"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+const PULSE_DURATION_MS = 2e3;
+const WAVE_DURATION_MS = 1800;
+const WAVE_GRADIENT = [
+  "transparent 0%",
+  "transparent 30%",
+  "var(--color-background-elevated) 50%",
+  "transparent 70%",
+  "transparent 100%"
+].join(", ");
+const MULTI_LINE_WIDTHS = ["100%", "92%", "100%", "85%", "75%"];
+const skeletonVariants = (0, import_class_variance_authority.cva)(
+  "bg-background-muted",
+  {
+    variants: {
+      variant: {
+        text: "rounded-md h-4 w-full",
+        circular: "rounded-full w-10 h-10",
+        rectangular: "rounded-xl w-full h-24"
+      }
+    },
+    defaultVariants: {
+      variant: "text"
+    }
+  }
+);
+const SkeletonBlock = React.forwardRef(
+  ({
+    className,
+    variant = "text",
+    animation = "pulse",
+    width,
+    height,
+    radius,
+    style,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: (0, import_utils.cn)(
+          skeletonVariants({ variant }),
+          animation === "pulse" && "animate-skeleton-pulse",
+          animation === "wave" && "relative overflow-hidden",
+          className
+        ),
+        style: {
+          ...style,
+          ...width != null ? { width } : {},
+          ...height != null ? { height } : {},
+          ...radius != null ? { borderRadius: radius } : {},
+          ...animation === "pulse" ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}
+        },
+        ...props
+      },
+      animation === "wave" && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "absolute inset-0 animate-skeleton-wave",
+          style: {
+            animationDuration: `${WAVE_DURATION_MS}ms`,
+            background: `linear-gradient(90deg, ${WAVE_GRADIENT})`
+          }
+        }
+      )
+    );
+  }
+);
+SkeletonBlock.displayName = "SkeletonBlock";
+const Skeleton = React.forwardRef(
+  ({
+    count,
+    loading,
+    children,
+    variant = "text",
+    ...rest
+  }, ref) => {
+    if (loading !== void 0) {
+      if (!loading) return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+    }
+    if (count != null && count > 1 && variant === "text") {
+      return /* @__PURE__ */ React.createElement("div", { ref, className: "space-y-2.5", "aria-hidden": "true" }, Array.from({ length: count }, (_, i) => {
+        const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length];
+        const isLast = i === count - 1;
+        return /* @__PURE__ */ React.createElement(
+          SkeletonBlock,
+          {
+            key: i,
+            variant: "text",
+            style: { width: isLast ? "60%" : widthPattern },
+            ...rest
+          }
+        );
+      }));
+    }
+    return /* @__PURE__ */ React.createElement(SkeletonBlock, { ref, variant, ...rest });
+  }
+);
+Skeleton.displayName = "Skeleton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton,
+  skeletonVariants
+});
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/skeleton.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Pulse animation duration in ms (slower = more premium) */\nconst PULSE_DURATION_MS = 2000\n/** Wave animation duration in ms */\nconst WAVE_DURATION_MS = 1800\n\n/**\n * Wave shimmer gradient — wide sweep with soft edges.\n * 5 gradient stops create a broader, smoother light band.\n */\nconst WAVE_GRADIENT = [\n  'transparent 0%',\n  'transparent 30%',\n  'var(--color-background-elevated) 50%',\n  'transparent 70%',\n  'transparent 100%',\n].join(', ')\n\n/**\n * Multi-line text width pattern.\n * Last line is always shorter for natural appearance.\n */\nconst MULTI_LINE_WIDTHS = ['100%', '92%', '100%', '85%', '75%'] as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst skeletonVariants = cva(\n  'bg-background-muted',\n  {\n    variants: {\n      variant: {\n        text: 'rounded-md h-4 w-full',\n        circular: 'rounded-full w-10 h-10',\n        rectangular: 'rounded-xl w-full h-24',\n      },\n    },\n    defaultVariants: {\n      variant: 'text',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {\n  /** Animation style */\n  animation?: 'pulse' | 'wave' | false\n  /** Custom width */\n  width?: string | number\n  /** Custom height */\n  height?: string | number\n  /** Custom border radius */\n  radius?: string | number\n  /** Number of text lines (text variant only, generates stacked lines) */\n  count?: number\n  /** Conditional loading — true: show skeleton, false: render children */\n  loading?: boolean\n  /** Children to render when loading=false */\n  children?: React.ReactNode\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst SkeletonBlock = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, 'count' | 'loading' | 'children'>>(\n  ({\n    className,\n    variant = 'text',\n    animation = 'pulse',\n    width,\n    height,\n    radius,\n    style,\n    ...props\n  }, ref) => {\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\n          skeletonVariants({ variant }),\n          animation === 'pulse' && 'animate-skeleton-pulse',\n          animation === 'wave' && 'relative overflow-hidden',\n          className,\n        )}\n        style={{\n          ...style,\n          ...(width != null ? { width } : {}),\n          ...(height != null ? { height } : {}),\n          ...(radius != null ? { borderRadius: radius } : {}),\n          ...(animation === 'pulse' ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}),\n        }}\n        {...props}\n      >\n        {animation === 'wave' && (\n          <div\n            className=\"absolute inset-0 animate-skeleton-wave\"\n            style={{\n              animationDuration: `${WAVE_DURATION_MS}ms`,\n              background: `linear-gradient(90deg, ${WAVE_GRADIENT})`,\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n)\nSkeletonBlock.displayName = 'SkeletonBlock'\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({\n    count,\n    loading,\n    children,\n    variant = 'text',\n    ...rest\n  }, ref) => {\n    // loading mode — show skeleton or children\n    if (loading !== undefined) {\n      if (!loading) return <>{children}</>\n      // When loading, fall through to render skeleton\n    }\n\n    // count mode — render multiple text lines\n    if (count != null && count > 1 && variant === 'text') {\n      return (\n        <div ref={ref} className=\"space-y-2.5\" aria-hidden=\"true\">\n          {Array.from({ length: count }, (_, i) => {\n            const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length]\n            const isLast = i === count - 1\n            return (\n              <SkeletonBlock\n                key={i}\n                variant=\"text\"\n                style={{ width: isLast ? '60%' : widthPattern }}\n                {...rest}\n              />\n            )\n          })}\n        </div>\n      )\n    }\n\n    return <SkeletonBlock ref={ref} variant={variant} {...rest} />\n  }\n)\nSkeleton.displayName = 'Skeleton'\n\nexport { Skeleton, skeletonVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,sCAAuC;AACvC,mBAAmB;AAOnB,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAMzB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,IAAI;AAMX,MAAM,oBAAoB,CAAC,QAAQ,OAAO,QAAQ,OAAO,KAAK;AAM9D,MAAM,uBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AA6BA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,eAAW;AAAA,UACT,iBAAiB,EAAE,QAAQ,CAAC;AAAA,UAC5B,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAI,SAAS,OAAO,EAAE,MAAM,IAAI,CAAC;AAAA,UACjC,GAAI,UAAU,OAAO,EAAE,OAAO,IAAI,CAAC;AAAA,UACnC,GAAI,UAAU,OAAO,EAAE,cAAc,OAAO,IAAI,CAAC;AAAA,UACjD,GAAI,cAAc,UAAU,EAAE,mBAAmB,GAAG,iBAAiB,KAAK,IAAI,CAAC;AAAA,QACjF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH,cAAc,UACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,mBAAmB,GAAG,gBAAgB;AAAA,YACtC,YAAY,0BAA0B,aAAa;AAAA,UACrD;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAE5B,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,QAAI,YAAY,QAAW;AACzB,UAAI,CAAC,QAAS,QAAO,0DAAG,QAAS;AAAA,IAEnC;AAGA,QAAI,SAAS,QAAQ,QAAQ,KAAK,YAAY,QAAQ;AACpD,aACE,oCAAC,SAAI,KAAU,WAAU,eAAc,eAAY,UAChD,MAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAAM;AACvC,cAAM,eAAe,kBAAkB,IAAI,kBAAkB,MAAM;AACnE,cAAM,SAAS,MAAM,QAAQ;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,SAAS,QAAQ,aAAa;AAAA,YAC7C,GAAG;AAAA;AAAA,QACN;AAAA,MAEJ,CAAC,CACH;AAAA,IAEJ;AAEA,WAAO,oCAAC,iBAAc,KAAU,SAAmB,GAAG,MAAM;AAAA,EAC9D;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/components/ui/skeleton.mjs

@@ -0,0 +1,109 @@
+"use client";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const PULSE_DURATION_MS = 2e3;
+const WAVE_DURATION_MS = 1800;
+const WAVE_GRADIENT = [
+  "transparent 0%",
+  "transparent 30%",
+  "var(--color-background-elevated) 50%",
+  "transparent 70%",
+  "transparent 100%"
+].join(", ");
+const MULTI_LINE_WIDTHS = ["100%", "92%", "100%", "85%", "75%"];
+const skeletonVariants = cva(
+  "bg-background-muted",
+  {
+    variants: {
+      variant: {
+        text: "rounded-md h-4 w-full",
+        circular: "rounded-full w-10 h-10",
+        rectangular: "rounded-xl w-full h-24"
+      }
+    },
+    defaultVariants: {
+      variant: "text"
+    }
+  }
+);
+const SkeletonBlock = React.forwardRef(
+  ({
+    className,
+    variant = "text",
+    animation = "pulse",
+    width,
+    height,
+    radius,
+    style,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(
+          skeletonVariants({ variant }),
+          animation === "pulse" && "animate-skeleton-pulse",
+          animation === "wave" && "relative overflow-hidden",
+          className
+        ),
+        style: {
+          ...style,
+          ...width != null ? { width } : {},
+          ...height != null ? { height } : {},
+          ...radius != null ? { borderRadius: radius } : {},
+          ...animation === "pulse" ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}
+        },
+        ...props
+      },
+      animation === "wave" && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "absolute inset-0 animate-skeleton-wave",
+          style: {
+            animationDuration: `${WAVE_DURATION_MS}ms`,
+            background: `linear-gradient(90deg, ${WAVE_GRADIENT})`
+          }
+        }
+      )
+    );
+  }
+);
+SkeletonBlock.displayName = "SkeletonBlock";
+const Skeleton = React.forwardRef(
+  ({
+    count,
+    loading,
+    children,
+    variant = "text",
+    ...rest
+  }, ref) => {
+    if (loading !== void 0) {
+      if (!loading) return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+    }
+    if (count != null && count > 1 && variant === "text") {
+      return /* @__PURE__ */ React.createElement("div", { ref, className: "space-y-2.5", "aria-hidden": "true" }, Array.from({ length: count }, (_, i) => {
+        const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length];
+        const isLast = i === count - 1;
+        return /* @__PURE__ */ React.createElement(
+          SkeletonBlock,
+          {
+            key: i,
+            variant: "text",
+            style: { width: isLast ? "60%" : widthPattern },
+            ...rest
+          }
+        );
+      }));
+    }
+    return /* @__PURE__ */ React.createElement(SkeletonBlock, { ref, variant, ...rest });
+  }
+);
+Skeleton.displayName = "Skeleton";
+export {
+  Skeleton,
+  skeletonVariants
+};
+//# sourceMappingURL=skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/skeleton.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Pulse animation duration in ms (slower = more premium) */\nconst PULSE_DURATION_MS = 2000\n/** Wave animation duration in ms */\nconst WAVE_DURATION_MS = 1800\n\n/**\n * Wave shimmer gradient — wide sweep with soft edges.\n * 5 gradient stops create a broader, smoother light band.\n */\nconst WAVE_GRADIENT = [\n  'transparent 0%',\n  'transparent 30%',\n  'var(--color-background-elevated) 50%',\n  'transparent 70%',\n  'transparent 100%',\n].join(', ')\n\n/**\n * Multi-line text width pattern.\n * Last line is always shorter for natural appearance.\n */\nconst MULTI_LINE_WIDTHS = ['100%', '92%', '100%', '85%', '75%'] as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst skeletonVariants = cva(\n  'bg-background-muted',\n  {\n    variants: {\n      variant: {\n        text: 'rounded-md h-4 w-full',\n        circular: 'rounded-full w-10 h-10',\n        rectangular: 'rounded-xl w-full h-24',\n      },\n    },\n    defaultVariants: {\n      variant: 'text',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {\n  /** Animation style */\n  animation?: 'pulse' | 'wave' | false\n  /** Custom width */\n  width?: string | number\n  /** Custom height */\n  height?: string | number\n  /** Custom border radius */\n  radius?: string | number\n  /** Number of text lines (text variant only, generates stacked lines) */\n  count?: number\n  /** Conditional loading — true: show skeleton, false: render children */\n  loading?: boolean\n  /** Children to render when loading=false */\n  children?: React.ReactNode\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst SkeletonBlock = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, 'count' | 'loading' | 'children'>>(\n  ({\n    className,\n    variant = 'text',\n    animation = 'pulse',\n    width,\n    height,\n    radius,\n    style,\n    ...props\n  }, ref) => {\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\n          skeletonVariants({ variant }),\n          animation === 'pulse' && 'animate-skeleton-pulse',\n          animation === 'wave' && 'relative overflow-hidden',\n          className,\n        )}\n        style={{\n          ...style,\n          ...(width != null ? { width } : {}),\n          ...(height != null ? { height } : {}),\n          ...(radius != null ? { borderRadius: radius } : {}),\n          ...(animation === 'pulse' ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}),\n        }}\n        {...props}\n      >\n        {animation === 'wave' && (\n          <div\n            className=\"absolute inset-0 animate-skeleton-wave\"\n            style={{\n              animationDuration: `${WAVE_DURATION_MS}ms`,\n              background: `linear-gradient(90deg, ${WAVE_GRADIENT})`,\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n)\nSkeletonBlock.displayName = 'SkeletonBlock'\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({\n    count,\n    loading,\n    children,\n    variant = 'text',\n    ...rest\n  }, ref) => {\n    // loading mode — show skeleton or children\n    if (loading !== undefined) {\n      if (!loading) return <>{children}</>\n      // When loading, fall through to render skeleton\n    }\n\n    // count mode — render multiple text lines\n    if (count != null && count > 1 && variant === 'text') {\n      return (\n        <div ref={ref} className=\"space-y-2.5\" aria-hidden=\"true\">\n          {Array.from({ length: count }, (_, i) => {\n            const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length]\n            const isLast = i === count - 1\n            return (\n              <SkeletonBlock\n                key={i}\n                variant=\"text\"\n                style={{ width: isLast ? '60%' : widthPattern }}\n                {...rest}\n              />\n            )\n          })}\n        </div>\n      )\n    }\n\n    return <SkeletonBlock ref={ref} variant={variant} {...rest} />\n  }\n)\nSkeleton.displayName = 'Skeleton'\n\nexport { Skeleton, skeletonVariants }\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAOnB,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAMzB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,IAAI;AAMX,MAAM,oBAAoB,CAAC,QAAQ,OAAO,QAAQ,OAAO,KAAK;AAM9D,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AA6BA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT,iBAAiB,EAAE,QAAQ,CAAC;AAAA,UAC5B,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAI,SAAS,OAAO,EAAE,MAAM,IAAI,CAAC;AAAA,UACjC,GAAI,UAAU,OAAO,EAAE,OAAO,IAAI,CAAC;AAAA,UACnC,GAAI,UAAU,OAAO,EAAE,cAAc,OAAO,IAAI,CAAC;AAAA,UACjD,GAAI,cAAc,UAAU,EAAE,mBAAmB,GAAG,iBAAiB,KAAK,IAAI,CAAC;AAAA,QACjF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH,cAAc,UACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,mBAAmB,GAAG,gBAAgB;AAAA,YACtC,YAAY,0BAA0B,aAAa;AAAA,UACrD;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAE5B,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,QAAI,YAAY,QAAW;AACzB,UAAI,CAAC,QAAS,QAAO,0DAAG,QAAS;AAAA,IAEnC;AAGA,QAAI,SAAS,QAAQ,QAAQ,KAAK,YAAY,QAAQ;AACpD,aACE,oCAAC,SAAI,KAAU,WAAU,eAAc,eAAY,UAChD,MAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAAM;AACvC,cAAM,eAAe,kBAAkB,IAAI,kBAAkB,MAAM;AACnE,cAAM,SAAS,MAAM,QAAQ;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,SAAS,QAAQ,aAAa;AAAA,YAC7C,GAAG;AAAA;AAAA,QACN;AAAA,MAEJ,CAAC,CACH;AAAA,IAEJ;AAEA,WAAO,oCAAC,iBAAc,KAAU,SAAmB,GAAG,MAAM;AAAA,EAC9D;AACF;AACA,SAAS,cAAc;","names":[]}

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

@@ -0,0 +1,38 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { VariantProps } from 'class-variance-authority';
+
+declare const sliderVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderColorMap: {
+    readonly default: {
+        readonly range: "bg-foreground";
+        readonly thumb: "bg-background border-foreground";
+        readonly thumbHover: "hover:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-text)_16%,transparent)] hover:border-foreground";
+        readonly thumbActive: "active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-text)_16%,transparent)]";
+    };
+    readonly primary: {
+        readonly range: "bg-primary";
+        readonly thumb: "bg-primary-foreground border-primary";
+        readonly thumbHover: "hover:shadow-primary-glow hover:border-primary-hover";
+        readonly thumbActive: "active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]";
+    };
+};
+type SliderColor = keyof typeof sliderColorMap;
+interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, VariantProps<typeof sliderVariants> {
+    /** Track and thumb color */
+    color?: SliderColor;
+    /** Tooltip display mode: auto (hover/drag), always, never */
+    showTooltip?: 'auto' | 'always' | 'never';
+    /** Custom formatter for tooltip value */
+    formatLabel?: (value: number) => string;
+    /** Content to display before the slider (icon, label, etc.) */
+    startContent?: React.ReactNode;
+    /** Content to display after the slider */
+    endContent?: React.ReactNode;
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Slider, type SliderColor, type SliderProps, sliderVariants };

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

@@ -0,0 +1,38 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { VariantProps } from 'class-variance-authority';
+
+declare const sliderVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderColorMap: {
+    readonly default: {
+        readonly range: "bg-foreground";
+        readonly thumb: "bg-background border-foreground";
+        readonly thumbHover: "hover:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-text)_16%,transparent)] hover:border-foreground";
+        readonly thumbActive: "active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-text)_16%,transparent)]";
+    };
+    readonly primary: {
+        readonly range: "bg-primary";
+        readonly thumb: "bg-primary-foreground border-primary";
+        readonly thumbHover: "hover:shadow-primary-glow hover:border-primary-hover";
+        readonly thumbActive: "active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]";
+    };
+};
+type SliderColor = keyof typeof sliderColorMap;
+interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, VariantProps<typeof sliderVariants> {
+    /** Track and thumb color */
+    color?: SliderColor;
+    /** Tooltip display mode: auto (hover/drag), always, never */
+    showTooltip?: 'auto' | 'always' | 'never';
+    /** Custom formatter for tooltip value */
+    formatLabel?: (value: number) => string;
+    /** Content to display before the slider (icon, label, etc.) */
+    startContent?: React.ReactNode;
+    /** Content to display after the slider */
+    endContent?: React.ReactNode;
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Slider, type SliderColor, type SliderProps, sliderVariants };

package/dist/components/ui/slider.js

@@ -0,0 +1,180 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var slider_exports = {};
+__export(slider_exports, {
+  Slider: () => Slider,
+  sliderVariants: () => sliderVariants
+});
+module.exports = __toCommonJS(slider_exports);
+var React = __toESM(require("react"));
+var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+const sliderVariants = (0, import_class_variance_authority.cva)(
+  "relative flex touch-none select-none",
+  {
+    variants: {
+      size: {
+        sm: "",
+        default: "",
+        lg: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const trackSizes = {
+  sm: "h-1 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1",
+  default: "h-1.5 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1.5",
+  lg: "h-2 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-2"
+};
+const thumbSizes = {
+  sm: "w-[var(--component-slider-thumb-sm)] h-[var(--component-slider-thumb-sm)]",
+  default: "w-[var(--component-slider-thumb-default)] h-[var(--component-slider-thumb-default)]",
+  lg: "w-[var(--component-slider-thumb-lg)] h-[var(--component-slider-thumb-lg)]"
+};
+const contentSizes = {
+  sm: "text-xs",
+  default: "text-sm",
+  lg: "text-base"
+};
+const sliderColorMap = {
+  default: {
+    range: "bg-foreground",
+    thumb: "bg-background border-foreground",
+    thumbHover: "hover:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-text)_16%,transparent)] hover:border-foreground",
+    thumbActive: "active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-text)_16%,transparent)]"
+  },
+  primary: {
+    range: "bg-primary",
+    thumb: "bg-primary-foreground border-primary",
+    thumbHover: "hover:shadow-primary-glow hover:border-primary-hover",
+    thumbActive: "active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]"
+  }
+};
+const Slider = React.forwardRef(({ className, size, color = "default", value, defaultValue, onValueChange, showTooltip = "never", formatLabel, startContent, endContent, orientation, ...props }, ref) => {
+  const resolvedSize = size || "default";
+  const thumbCount = value?.length ?? defaultValue?.length ?? 1;
+  const hasTooltip = showTooltip !== "never";
+  const hasWrapper = !!(startContent || endContent);
+  const isVertical = orientation === "vertical";
+  const [internalValue, setInternalValue] = React.useState(
+    () => value ?? defaultValue ?? Array(thumbCount).fill(props.min ?? 0)
+  );
+  const displayValues = value ?? internalValue;
+  const handleValueChange = React.useCallback((newValue) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+  }, [onValueChange]);
+  const sliderRoot = /* @__PURE__ */ React.createElement(
+    SliderPrimitive.Root,
+    {
+      ref,
+      className: (0, import_utils.cn)(
+        sliderVariants({ size }),
+        isVertical ? "h-full w-auto flex-col items-center" : "w-full items-center",
+        hasWrapper && (isVertical ? "flex-1 min-h-0" : "flex-1 min-w-0"),
+        !hasWrapper && className
+      ),
+      value,
+      defaultValue,
+      onValueChange: hasTooltip ? handleValueChange : onValueChange,
+      orientation,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      SliderPrimitive.Track,
+      {
+        className: (0, import_utils.cn)(
+          "relative grow overflow-hidden rounded-full bg-border",
+          isVertical ? "h-full" : "w-full",
+          trackSizes[resolvedSize]
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        SliderPrimitive.Range,
+        {
+          className: (0, import_utils.cn)(
+            "absolute rounded-full",
+            sliderColorMap[color].range,
+            isVertical ? "w-full transition-[top,bottom] duration-fast ease-out" : "h-full transition-[left,right] duration-fast ease-out"
+          )
+        }
+      )
+    ),
+    Array.from({ length: thumbCount }).map((_, i) => /* @__PURE__ */ React.createElement(
+      SliderPrimitive.Thumb,
+      {
+        key: i,
+        className: (0, import_utils.cn)(
+          "group/thumb block rounded-full border-2 shadow-sm",
+          sliderColorMap[color].thumb,
+          isVertical ? "transition-[top,box-shadow,border-color] duration-fast ease-out" : "transition-[left,box-shadow,border-color] duration-fast ease-out",
+          sliderColorMap[color].thumbHover,
+          sliderColorMap[color].thumbActive,
+          "focus-visible:focus-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          thumbSizes[resolvedSize]
+        )
+      },
+      hasTooltip && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: (0, import_utils.cn)(
+            "absolute pointer-events-none",
+            "transition-all duration-fast ease-out",
+            isVertical ? "right-full top-1/2 -translate-y-1/2 mr-2 origin-right" : "bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom",
+            showTooltip === "always" ? "opacity-100 scale-100" : [
+              "opacity-0 scale-95",
+              "group-hover/thumb:opacity-100 group-hover/thumb:scale-100",
+              "group-active/thumb:opacity-100 group-active/thumb:scale-100",
+              "group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100"
+            ]
+          )
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap" }, formatLabel ? formatLabel(displayValues[i]) : displayValues[i], isVertical ? /* @__PURE__ */ React.createElement("div", { className: "absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground" }) : /* @__PURE__ */ React.createElement("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground" }))
+      )
+    ))
+  );
+  if (!hasWrapper) return sliderRoot;
+  return /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)(
+    isVertical ? "inline-flex flex-col items-center gap-2 h-full" : "flex items-center gap-3",
+    className
+  ) }, startContent && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0 text-text-muted select-none", contentSizes[resolvedSize], props.disabled && "opacity-50") }, startContent), sliderRoot, endContent && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0 text-text-muted select-none", contentSizes[resolvedSize], props.disabled && "opacity-50") }, endContent));
+});
+Slider.displayName = "Slider";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slider,
+  sliderVariants
+});
+//# sourceMappingURL=slider.js.map