@karakuri-ui/react 0.3.2 → 0.3.4

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/table.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// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n  size: TableSize\n  variant: TableVariant\n  stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n  sm: 'px-3 py-2 text-sm',\n  default: 'px-4 py-3 text-sm',\n  lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n  sm: 'px-3 py-2 text-xs',\n  default: 'px-4 py-3 text-xs',\n  lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n  sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n  default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n  lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n  'w-full caption-bottom text-sm',\n  {\n    variants: {\n      variant: {\n        default: '',\n        bordered: 'border border-border',\n        striped: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n  extends React.HTMLAttributes<HTMLTableElement>,\n    VariantProps<typeof tableVariants> {\n  /** Table density */\n  size?: TableSize\n  /** Visual style */\n  variant?: TableVariant\n  /** Sticky header when scrolling */\n  stickyHeader?: boolean\n  /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n  wrapperClassName?: string\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n    <TableContext.Provider value={{ size, variant, stickyHeader }}>\n      <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n        <table\n          ref={ref}\n          className={cn(tableVariants({ variant }), className)}\n          {...props}\n        />\n      </div>\n    </TableContext.Provider>\n  )\n)\nTable.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { stickyHeader } = React.useContext(TableContext)\n  return (\n    <thead\n      ref={ref}\n      className={cn(\n        '[&_tr]:border-b [&_tr]:border-border',\n        stickyHeader && 'sticky top-0 z-10 bg-background',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { variant } = React.useContext(TableContext)\n  return (\n    <tbody\n      ref={ref}\n      className={cn(\n        '[&_tr:last-child]:border-b-0',\n        variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Enable hover highlight */\n  interactive?: boolean\n  /** Selected state background */\n  selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, interactive = false, selected = false, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-selected={selected || undefined}\n      className={cn(\n        'border-b border-border transition-colors duration-fast',\n        interactive && 'hover:bg-background-muted/50 cursor-pointer',\n        className\n      )}\n      {...props}\n    />\n  )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n  asc: (\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  ),\n  desc: (\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  ),\n  default: (\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=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n    </svg>\n  ),\n}\n\nexport interface SortIconSet {\n  /** Icon for ascending state */\n  asc?: React.ReactNode\n  /** Icon for descending state */\n  desc?: React.ReactNode\n  /** Icon for unsorted (default) state */\n  default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Enable sort indicator */\n  sortable?: boolean\n  /** Current sort direction */\n  sortDirection?: SortDirection\n  /** Sort click handler */\n  onSort?: () => void\n  /** Custom sort icons (overrides built-in icons) */\n  sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n    const { size } = React.useContext(TableContext)\n    const icons = { ...defaultSortIcons, ...sortIcon }\n\n    const content = sortable ? (\n      <button\n        type=\"button\"\n        className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n        onClick={onSort}\n      >\n        {children}\n        <span className={cn(\n          'shrink-0 transition-colors duration-fast',\n          sortDirection ? 'text-foreground' : 'text-text-muted'\n        )}>\n          {sortDirection === 'asc' ? icons.asc\n            : sortDirection === 'desc' ? icons.desc\n            : icons.default}\n        </span>\n      </button>\n    ) : children\n\n    return (\n      <th\n        ref={ref}\n        className={cn(\n          'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n          headPaddingMap[size],\n          checkboxPaddingMap[size],\n          align === 'center' && 'text-center',\n          align === 'right' && 'text-right',\n          sortable && 'select-none',\n          className\n        )}\n        aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n        {...props}\n      >\n        {content}\n      </th>\n    )\n  }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, align = 'left', ...props }, ref) => {\n    const { size } = React.useContext(TableContext)\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          'text-foreground align-middle',\n          cellPaddingMap[size],\n          checkboxPaddingMap[size],\n          align === 'center' && 'text-center',\n          align === 'right' && 'text-right',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-text-muted', className)}\n    {...props}\n  />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableRow,\n  TableHead,\n  TableCell,\n  TableCaption,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,sCAAuC;AACvC,mBAAmB;AASnB,MAAM,eAAe,MAAM,cAIxB,EAAE,MAAM,WAAW,SAAS,WAAW,cAAc,MAAM,CAAC;AAG/D,MAAM,iBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,iBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,qBAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAEA,MAAM,oBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAgBA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,WAAW,OAAO,WAAW,UAAU,WAAW,eAAe,OAAO,kBAAkB,GAAG,MAAM,GAAG,QACvG,oCAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,SAAS,aAAa,KAC1D,oCAAC,SAAI,eAAW,iBAAG,iCAAiC,gBAAgB,KAClE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA;AAAA,EACN,CACF,CACF;AAEJ;AACA,MAAM,cAAc;AAGpB,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,aAAa,IAAI,MAAM,WAAW,YAAY;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW;AAAA,QACT;AAAA,QACA,gBAAgB;AAAA,QAChB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,YAAY,cAAc;AAG1B,MAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,QAAQ,IAAI,MAAM,WAAW,YAAY;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW;AAAA,QACT;AAAA,QACA,YAAY,aAAa;AAAA,QACzB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,UAAU,cAAc;AAGxB,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAU1B,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC,EAAE,WAAW,cAAc,OAAO,WAAW,OAAO,GAAG,MAAM,GAAG,QAC/D;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBAAe,YAAY;AAAA,MAC3B,eAAW;AAAA,QACT;AAAA,QACA,eAAe;AAAA,QACf;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,SAAS,cAAc;AAMvB,MAAM,mBAAmB;AAAA,EACvB,KACE,oCAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,GAAG,eAAY,UACzG,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,iBAAgB,CACvE;AAAA,EAEF,MACE,oCAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,GAAG,eAAY,UACzG,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,kBAAiB,CACxE;AAAA,EAEF,SACE,oCAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,GAAG,eAAY,UACzG,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,oDAAmD,CAC1G;AAEJ;AAwBA,MAAM,YAAY,MAAM;AAAA,EACtB,CAAC,EAAE,WAAW,QAAQ,QAAQ,WAAW,OAAO,gBAAgB,MAAM,QAAQ,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpH,UAAM,EAAE,KAAK,IAAI,MAAM,WAAW,YAAY;AAC9C,UAAM,QAAQ,EAAE,GAAG,kBAAkB,GAAG,SAAS;AAEjD,UAAM,UAAU,WACd;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS;AAAA;AAAA,MAER;AAAA,MACD,oCAAC,UAAK,eAAW;AAAA,QACf;AAAA,QACA,gBAAgB,oBAAoB;AAAA,MACtC,KACG,kBAAkB,QAAQ,MAAM,MAC7B,kBAAkB,SAAS,MAAM,OACjC,MAAM,OACZ;AAAA,IACF,IACE;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB,mBAAmB,IAAI;AAAA,UACvB,UAAU,YAAY;AAAA,UACtB,UAAU,WAAW;AAAA,UACrB,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QACA,aAAW,kBAAkB,QAAQ,cAAc,kBAAkB,SAAS,eAAe;AAAA,QAC5F,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;AAQxB,MAAM,YAAY,MAAM;AAAA,EACtB,CAAC,EAAE,WAAW,QAAQ,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAChD,UAAM,EAAE,KAAK,IAAI,MAAM,WAAW,YAAY;AAC9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB,mBAAmB,IAAI;AAAA,UACvB,UAAU,YAAY;AAAA,UACtB,UAAU,WAAW;AAAA,UACrB;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;AAGxB,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,gCAAgC,SAAS;AAAA,IACtD,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/table.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// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n  size: TableSize\n  variant: TableVariant\n  stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n  sm: 'px-3 py-2 text-sm',\n  default: 'px-4 py-3 text-sm',\n  lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n  sm: 'px-3 py-2 text-xs',\n  default: 'px-4 py-3 text-xs',\n  lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n  sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n  default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n  lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n  'w-full caption-bottom text-sm',\n  {\n    variants: {\n      variant: {\n        default: '',\n        bordered: 'border border-border',\n        striped: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n  extends React.HTMLAttributes<HTMLTableElement>,\n    VariantProps<typeof tableVariants> {\n  /** Table density */\n  size?: TableSize\n  /** Visual style */\n  variant?: TableVariant\n  /** Sticky header when scrolling */\n  stickyHeader?: boolean\n  /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n  wrapperClassName?: string\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n    <TableContext.Provider value={{ size, variant, stickyHeader }}>\n      <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n        <table\n          ref={ref}\n          className={cn(tableVariants({ variant }), className)}\n          {...props}\n        />\n      </div>\n    </TableContext.Provider>\n  )\n)\nTable.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { stickyHeader } = React.useContext(TableContext)\n  return (\n    <thead\n      ref={ref}\n      className={cn(\n        '[&_tr]:border-b [&_tr]:border-border',\n        stickyHeader && 'sticky top-0 z-10 bg-background',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { variant } = React.useContext(TableContext)\n  return (\n    <tbody\n      ref={ref}\n      className={cn(\n        '[&_tr:last-child]:border-b-0',\n        variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Enable hover highlight */\n  interactive?: boolean\n  /** Selected state background */\n  selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, interactive = false, selected = false, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-selected={selected || undefined}\n      className={cn(\n        'border-b border-border transition-colors duration-fast',\n        interactive && 'hover:bg-background-muted/50 cursor-pointer',\n        className\n      )}\n      {...props}\n    />\n  )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n  asc: (\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  ),\n  desc: (\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  ),\n  default: (\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=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n    </svg>\n  ),\n}\n\nexport interface SortIconSet {\n  /** Icon for ascending state */\n  asc?: React.ReactNode\n  /** Icon for descending state */\n  desc?: React.ReactNode\n  /** Icon for unsorted (default) state */\n  default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Enable sort indicator */\n  sortable?: boolean\n  /** Current sort direction */\n  sortDirection?: SortDirection\n  /** Sort click handler */\n  onSort?: () => void\n  /** Custom sort icons (overrides built-in icons) */\n  sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n    const { size } = React.useContext(TableContext)\n    const icons = { ...defaultSortIcons, ...sortIcon }\n\n    const content = sortable ? (\n      <button\n        type=\"button\"\n        className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n        onClick={onSort}\n      >\n        {children}\n        <span className={cn(\n          'shrink-0 transition-colors duration-fast',\n          sortDirection ? 'text-foreground' : 'text-text-muted'\n        )}>\n          {sortDirection === 'asc' ? icons.asc\n            : sortDirection === 'desc' ? icons.desc\n            : icons.default}\n        </span>\n      </button>\n    ) : children\n\n    return (\n      <th\n        ref={ref}\n        className={cn(\n          'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n          headPaddingMap[size],\n          checkboxPaddingMap[size],\n          align === 'center' && 'text-center',\n          align === 'right' && 'text-right',\n          sortable && 'select-none',\n          className\n        )}\n        aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n        {...props}\n      >\n        {content}\n      </th>\n    )\n  }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, align = 'left', ...props }, ref) => {\n    const { size } = React.useContext(TableContext)\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          'text-foreground align-middle',\n          cellPaddingMap[size],\n          checkboxPaddingMap[size],\n          align === 'center' && 'text-center',\n          align === 'right' && 'text-right',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-text-muted', className)}\n    {...props}\n  />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableRow,\n  TableHead,\n  TableCell,\n  TableCaption,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/table.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -34,19 +35,19 @@ const tableVariants = cva(
   }
 );
 const Table = React.forwardRef(
-  ({ className, size = "default", variant = "default", stickyHeader = false, wrapperClassName, ...props }, ref) => /* @__PURE__ */ React.createElement(TableContext.Provider, { value: { size, variant, stickyHeader } }, /* @__PURE__ */ React.createElement("div", { className: cn("relative w-full overflow-auto", wrapperClassName) }, /* @__PURE__ */ React.createElement(
+  ({ className, size = "default", variant = "default", stickyHeader = false, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsx(TableContext.Provider, { value: { size, variant, stickyHeader }, children: /* @__PURE__ */ jsx("div", { className: cn("relative w-full overflow-auto", wrapperClassName), children: /* @__PURE__ */ jsx(
     "table",
     {
       ref,
       className: cn(tableVariants({ variant }), className),
       ...props
     }
-  )))
+  ) }) })
 );
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => {
   const { stickyHeader } = React.useContext(TableContext);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "thead",
     {
       ref,
@@ -62,7 +63,7 @@ const TableHeader = React.forwardRef(({ className, ...props }, ref) => {
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => {
   const { variant } = React.useContext(TableContext);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "tbody",
     {
       ref,
@@ -76,7 +77,7 @@ const TableBody = React.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableBody.displayName = "TableBody";
-const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -89,7 +90,7 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 TableFooter.displayName = "TableFooter";
 const TableRow = React.forwardRef(
-  ({ className, interactive = false, selected = false, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ({ className, interactive = false, selected = false, ...props }, ref) => /* @__PURE__ */ jsx(
     "tr",
     {
       ref,
@@ -105,28 +106,30 @@ const TableRow = React.forwardRef(
 );
 TableRow.displayName = "TableRow";
 const defaultSortIcons = {
-  asc: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" })),
-  desc: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })),
-  default: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }))
+  asc: /* @__PURE__ */ jsx("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" }) }),
+  desc: /* @__PURE__ */ jsx("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }),
+  default: /* @__PURE__ */ jsx("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) })
 };
 const TableHead = React.forwardRef(
   ({ className, align = "left", sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {
     const { size } = React.useContext(TableContext);
     const icons = { ...defaultSortIcons, ...sortIcon };
-    const content = sortable ? /* @__PURE__ */ React.createElement(
+    const content = sortable ? /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         className: "inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group",
-        onClick: onSort
-      },
-      children,
-      /* @__PURE__ */ React.createElement("span", { className: cn(
-        "shrink-0 transition-colors duration-fast",
-        sortDirection ? "text-foreground" : "text-text-muted"
-      ) }, sortDirection === "asc" ? icons.asc : sortDirection === "desc" ? icons.desc : icons.default)
+        onClick: onSort,
+        children: [
+          children,
+          /* @__PURE__ */ jsx("span", { className: cn(
+            "shrink-0 transition-colors duration-fast",
+            sortDirection ? "text-foreground" : "text-text-muted"
+          ), children: sortDirection === "asc" ? icons.asc : sortDirection === "desc" ? icons.desc : icons.default })
+        ]
+      }
     ) : children;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "th",
       {
         ref,
@@ -140,9 +143,9 @@ const TableHead = React.forwardRef(
           className
         ),
         "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : void 0,
-        ...props
-      },
-      content
+        ...props,
+        children: content
+      }
     );
   }
 );
@@ -150,7 +153,7 @@ TableHead.displayName = "TableHead";
 const TableCell = React.forwardRef(
   ({ className, align = "left", ...props }, ref) => {
     const { size } = React.useContext(TableContext);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "td",
       {
         ref,
@@ -168,7 +171,7 @@ const TableCell = React.forwardRef(
   }
 );
 TableCell.displayName = "TableCell";
-const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/table.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// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n  size: TableSize\n  variant: TableVariant\n  stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n  sm: 'px-3 py-2 text-sm',\n  default: 'px-4 py-3 text-sm',\n  lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n  sm: 'px-3 py-2 text-xs',\n  default: 'px-4 py-3 text-xs',\n  lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n  sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n  default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n  lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n  'w-full caption-bottom text-sm',\n  {\n    variants: {\n      variant: {\n        default: '',\n        bordered: 'border border-border',\n        striped: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n  extends React.HTMLAttributes<HTMLTableElement>,\n    VariantProps<typeof tableVariants> {\n  /** Table density */\n  size?: TableSize\n  /** Visual style */\n  variant?: TableVariant\n  /** Sticky header when scrolling */\n  stickyHeader?: boolean\n  /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n  wrapperClassName?: string\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n    <TableContext.Provider value={{ size, variant, stickyHeader }}>\n      <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n        <table\n          ref={ref}\n          className={cn(tableVariants({ variant }), className)}\n          {...props}\n        />\n      </div>\n    </TableContext.Provider>\n  )\n)\nTable.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { stickyHeader } = React.useContext(TableContext)\n  return (\n    <thead\n      ref={ref}\n      className={cn(\n        '[&_tr]:border-b [&_tr]:border-border',\n        stickyHeader && 'sticky top-0 z-10 bg-background',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { variant } = React.useContext(TableContext)\n  return (\n    <tbody\n      ref={ref}\n      className={cn(\n        '[&_tr:last-child]:border-b-0',\n        variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Enable hover highlight */\n  interactive?: boolean\n  /** Selected state background */\n  selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, interactive = false, selected = false, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-selected={selected || undefined}\n      className={cn(\n        'border-b border-border transition-colors duration-fast',\n        interactive && 'hover:bg-background-muted/50 cursor-pointer',\n        className\n      )}\n      {...props}\n    />\n  )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n  asc: (\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  ),\n  desc: (\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  ),\n  default: (\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=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n    </svg>\n  ),\n}\n\nexport interface SortIconSet {\n  /** Icon for ascending state */\n  asc?: React.ReactNode\n  /** Icon for descending state */\n  desc?: React.ReactNode\n  /** Icon for unsorted (default) state */\n  default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Enable sort indicator */\n  sortable?: boolean\n  /** Current sort direction */\n  sortDirection?: SortDirection\n  /** Sort click handler */\n  onSort?: () => void\n  /** Custom sort icons (overrides built-in icons) */\n  sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n    const { size } = React.useContext(TableContext)\n    const icons = { ...defaultSortIcons, ...sortIcon }\n\n    const content = sortable ? (\n      <button\n        type=\"button\"\n        className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n        onClick={onSort}\n      >\n        {children}\n        <span className={cn(\n          'shrink-0 transition-colors duration-fast',\n          sortDirection ? 'text-foreground' : 'text-text-muted'\n        )}>\n          {sortDirection === 'asc' ? icons.asc\n            : sortDirection === 'desc' ? icons.desc\n            : icons.default}\n        </span>\n      </button>\n    ) : children\n\n    return (\n      <th\n        ref={ref}\n        className={cn(\n          'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n          headPaddingMap[size],\n          checkboxPaddingMap[size],\n          align === 'center' && 'text-center',\n          align === 'right' && 'text-right',\n          sortable && 'select-none',\n          className\n        )}\n        aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n        {...props}\n      >\n        {content}\n      </th>\n    )\n  }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, align = 'left', ...props }, ref) => {\n    const { size } = React.useContext(TableContext)\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          'text-foreground align-middle',\n          cellPaddingMap[size],\n          checkboxPaddingMap[size],\n          align === 'center' && 'text-center',\n          align === 'right' && 'text-right',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-text-muted', className)}\n    {...props}\n  />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableRow,\n  TableHead,\n  TableCell,\n  TableCaption,\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/table.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// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n  size: TableSize\n  variant: TableVariant\n  stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n  sm: 'px-3 py-2 text-sm',\n  default: 'px-4 py-3 text-sm',\n  lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n  sm: 'px-3 py-2 text-xs',\n  default: 'px-4 py-3 text-xs',\n  lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n  sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n  default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n  lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n  'w-full caption-bottom text-sm',\n  {\n    variants: {\n      variant: {\n        default: '',\n        bordered: 'border border-border',\n        striped: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n  extends React.HTMLAttributes<HTMLTableElement>,\n    VariantProps<typeof tableVariants> {\n  /** Table density */\n  size?: TableSize\n  /** Visual style */\n  variant?: TableVariant\n  /** Sticky header when scrolling */\n  stickyHeader?: boolean\n  /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n  wrapperClassName?: string\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n    <TableContext.Provider value={{ size, variant, stickyHeader }}>\n      <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n        <table\n          ref={ref}\n          className={cn(tableVariants({ variant }), className)}\n          {...props}\n        />\n      </div>\n    </TableContext.Provider>\n  )\n)\nTable.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { stickyHeader } = React.useContext(TableContext)\n  return (\n    <thead\n      ref={ref}\n      className={cn(\n        '[&_tr]:border-b [&_tr]:border-border',\n        stickyHeader && 'sticky top-0 z-10 bg-background',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { variant } = React.useContext(TableContext)\n  return (\n    <tbody\n      ref={ref}\n      className={cn(\n        '[&_tr:last-child]:border-b-0',\n        variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Enable hover highlight */\n  interactive?: boolean\n  /** Selected state background */\n  selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, interactive = false, selected = false, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-selected={selected || undefined}\n      className={cn(\n        'border-b border-border transition-colors duration-fast',\n        interactive && 'hover:bg-background-muted/50 cursor-pointer',\n        className\n      )}\n      {...props}\n    />\n  )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n  asc: (\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  ),\n  desc: (\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  ),\n  default: (\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=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n    </svg>\n  ),\n}\n\nexport interface SortIconSet {\n  /** Icon for ascending state */\n  asc?: React.ReactNode\n  /** Icon for descending state */\n  desc?: React.ReactNode\n  /** Icon for unsorted (default) state */\n  default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Enable sort indicator */\n  sortable?: boolean\n  /** Current sort direction */\n  sortDirection?: SortDirection\n  /** Sort click handler */\n  onSort?: () => void\n  /** Custom sort icons (overrides built-in icons) */\n  sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n    const { size } = React.useContext(TableContext)\n    const icons = { ...defaultSortIcons, ...sortIcon }\n\n    const content = sortable ? (\n      <button\n        type=\"button\"\n        className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n        onClick={onSort}\n      >\n        {children}\n        <span className={cn(\n          'shrink-0 transition-colors duration-fast',\n          sortDirection ? 'text-foreground' : 'text-text-muted'\n        )}>\n          {sortDirection === 'asc' ? icons.asc\n            : sortDirection === 'desc' ? icons.desc\n            : icons.default}\n        </span>\n      </button>\n    ) : children\n\n    return (\n      <th\n        ref={ref}\n        className={cn(\n          'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n          headPaddingMap[size],\n          checkboxPaddingMap[size],\n          align === 'center' && 'text-center',\n          align === 'right' && 'text-right',\n          sortable && 'select-none',\n          className\n        )}\n        aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n        {...props}\n      >\n        {content}\n      </th>\n    )\n  }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, align = 'left', ...props }, ref) => {\n    const { size } = React.useContext(TableContext)\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          'text-foreground align-middle',\n          cellPaddingMap[size],\n          checkboxPaddingMap[size],\n          align === 'center' && 'text-center',\n          align === 'right' && 'text-right',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-text-muted', className)}\n    {...props}\n  />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableRow,\n  TableHead,\n  TableCell,\n  TableCaption,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/tabs.js

@@ -37,6 +37,7 @@ __export(tabs_exports, {
   tabsTriggerVariants: () => tabsTriggerVariants
 });
 module.exports = __toCommonJS(tabs_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
 var import_class_variance_authority = require("class-variance-authority");
@@ -65,7 +66,7 @@ const tabsListVariants = (0, import_class_variance_authority.cva)(
 );
 const TabsList = React.forwardRef(({ className, variant, size, fitted, color, radius, ...props }, ref) => {
   const resolvedVariant = variant || "line";
-  return /* @__PURE__ */ React.createElement(TabsStyleContext.Provider, { value: { variant: resolvedVariant, size: size || "default", fitted: fitted ?? false, color: color || "default", radius: radius || "md" } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsStyleContext.Provider, { value: { variant: resolvedVariant, size: size || "default", fitted: fitted ?? false, color: color || "default", radius: radius || "md" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     TabsPrimitive.List,
     {
       ref,
@@ -76,14 +77,15 @@ const TabsList = React.forwardRef(({ className, variant, size, fitted, color, ra
       ),
       ...props
     }
-  ));
+  ) });
 });
 TabsList.displayName = "TabsList";
 const tabsTriggerVariants = (0, import_class_variance_authority.cva)(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "transition-all duration-micro ease-out cursor-pointer",
-    "focus-visible:focus-ring",
+    // Keyboard-only focus ring: see pointer tracking in TabsTrigger
+    "[&:focus-visible:not([data-pointer-focus])]:focus-ring",
     "disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50"
   ].join(" "),
   {
@@ -187,10 +189,11 @@ const pillItemRadiusClasses = {
   "3xl": "rounded-2xl",
   full: "rounded-full"
 };
-const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
+const TabsTrigger = React.forwardRef(({ className, children, onPointerDown, onKeyDown, onBlur, ...props }, ref) => {
   const { variant, size, fitted, color, radius } = useTabsStyleContext();
   const resolvedSize = size || "default";
-  return /* @__PURE__ */ React.createElement(
+  const [pointerFocus, setPointerFocus] = React.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     TabsPrimitive.Trigger,
     {
       ref,
@@ -202,13 +205,26 @@ const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) =>
         variant === "pill" && pillItemRadiusClasses[radius || "md"],
         className
       ),
-      ...props
-    },
-    children
+      "data-pointer-focus": pointerFocus ? "" : void 0,
+      onPointerDown: (event) => {
+        setPointerFocus(true);
+        onPointerDown?.(event);
+      },
+      onKeyDown: (event) => {
+        setPointerFocus(false);
+        onKeyDown?.(event);
+      },
+      onBlur: (event) => {
+        setPointerFocus(false);
+        onBlur?.(event);
+      },
+      ...props,
+      children
+    }
   );
 });
 TabsTrigger.displayName = "TabsTrigger";
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   TabsPrimitive.Content,
   {
     ref,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n  variant?: 'line' | 'enclosed' | 'pill'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  fitted?: boolean\n  color?: 'default' | 'primary'\n  radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        line: 'border-b border-border bg-transparent gap-0',\n        enclosed: 'border-b border-border bg-transparent gap-0',\n        pill: 'bg-background-muted p-1 gap-1',\n      },\n      fitted: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n      fitted: false,\n    },\n  }\n)\n\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  /** Indicator color for line variant */\n  color?: 'default' | 'primary'\n  /** Top border-radius for enclosed variant, container radius for pill variant */\n  radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n  const resolvedVariant = variant || 'line'\n  return (\n    <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(\n          tabsListVariants({ variant, fitted }),\n          resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n          className\n        )}\n        {...props}\n      />\n    </TabsStyleContext.Provider>\n  )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n    'transition-all duration-micro ease-out cursor-pointer',\n    'focus-visible:focus-ring',\n    'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        line: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border',\n          'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n        ].join(' '),\n        enclosed: [\n          'border border-transparent -mb-px',\n          'hover:text-foreground',\n          'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n          'data-[state=active]:border-border data-[state=active]:border-b-background',\n        ].join(' '),\n        pill: [\n          'hover:text-foreground',\n          'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n        ].join(' '),\n      },\n      size: {\n        sm: 'h-8 text-sm',       // 32px, 13px\n        md: 'h-9 text-sm',       // 36px, 13px\n        default: 'h-10 text-md', // 40px, 14px\n        lg: 'h-12 text-base',    // 48px, 16px\n      },\n      fitted: {\n        true: 'flex-1',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // Padding per variant × size\n      { variant: 'line', size: 'sm', className: 'px-3' },\n      { variant: 'line', size: 'md', className: 'px-3.5' },\n      { variant: 'line', size: 'default', className: 'px-4' },\n      { variant: 'line', size: 'lg', className: 'px-6' },\n      { variant: 'enclosed', size: 'sm', className: 'px-3' },\n      { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n      { variant: 'enclosed', size: 'default', className: 'px-4' },\n      { variant: 'enclosed', size: 'lg', className: 'px-6' },\n      // Pill: reduced height + Segmented-matching font/padding\n      { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n      { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n      { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n      { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n    ],\n    defaultVariants: {\n      variant: 'line',\n      size: 'default',\n      fitted: false,\n    },\n  }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n} as const\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n  default: 'data-[state=active]:border-foreground',\n  primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n  none: 'rounded-t-none',\n  sm: 'rounded-t-sm',\n  base: 'rounded-t',\n  md: 'rounded-t-md',\n  lg: 'rounded-t-lg',\n  xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  md: 'rounded-md',\n  lg: 'rounded-md',\n  xl: 'rounded-lg',\n  '2xl': 'rounded-xl',\n  '3xl': 'rounded-2xl',\n  full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => {\n  const { variant, size, fitted, color, radius } = useTabsStyleContext()\n  const resolvedSize = size || 'default'\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n        triggerIconSizeClasses[resolvedSize],\n        variant === 'line' && lineColorClasses[color || 'default'],\n        variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n        variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      'mt-4 focus-visible:focus-ring',\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst Tabs = TabsPrimitive.Root\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  tabsListVariants,\n  tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n  variant?: 'line' | 'enclosed' | 'pill'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  fitted?: boolean\n  color?: 'default' | 'primary'\n  radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        line: 'border-b border-border bg-transparent gap-0',\n        enclosed: 'border-b border-border bg-transparent gap-0',\n        pill: 'bg-background-muted p-1 gap-1',\n      },\n      fitted: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n      fitted: false,\n    },\n  }\n)\n\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  /** Indicator color for line variant */\n  color?: 'default' | 'primary'\n  /** Top border-radius for enclosed variant, container radius for pill variant */\n  radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n  const resolvedVariant = variant || 'line'\n  return (\n    <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(\n          tabsListVariants({ variant, fitted }),\n          resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n          className\n        )}\n        {...props}\n      />\n    </TabsStyleContext.Provider>\n  )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n    'transition-all duration-micro ease-out cursor-pointer',\n    // Keyboard-only focus ring: see pointer tracking in TabsTrigger\n    '[&:focus-visible:not([data-pointer-focus])]:focus-ring',\n    'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        line: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border',\n          'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n        ].join(' '),\n        enclosed: [\n          'border border-transparent -mb-px',\n          'hover:text-foreground',\n          'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n          'data-[state=active]:border-border data-[state=active]:border-b-background',\n        ].join(' '),\n        pill: [\n          'hover:text-foreground',\n          'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n        ].join(' '),\n      },\n      size: {\n        sm: 'h-8 text-sm',       // 32px, 13px\n        md: 'h-9 text-sm',       // 36px, 13px\n        default: 'h-10 text-md', // 40px, 14px\n        lg: 'h-12 text-base',    // 48px, 16px\n      },\n      fitted: {\n        true: 'flex-1',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // Padding per variant × size\n      { variant: 'line', size: 'sm', className: 'px-3' },\n      { variant: 'line', size: 'md', className: 'px-3.5' },\n      { variant: 'line', size: 'default', className: 'px-4' },\n      { variant: 'line', size: 'lg', className: 'px-6' },\n      { variant: 'enclosed', size: 'sm', className: 'px-3' },\n      { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n      { variant: 'enclosed', size: 'default', className: 'px-4' },\n      { variant: 'enclosed', size: 'lg', className: 'px-6' },\n      // Pill: reduced height + Segmented-matching font/padding\n      { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n      { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n      { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n      { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n    ],\n    defaultVariants: {\n      variant: 'line',\n      size: 'default',\n      fitted: false,\n    },\n  }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n} as const\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n  default: 'data-[state=active]:border-foreground',\n  primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n  none: 'rounded-t-none',\n  sm: 'rounded-t-sm',\n  base: 'rounded-t',\n  md: 'rounded-t-md',\n  lg: 'rounded-t-lg',\n  xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  md: 'rounded-md',\n  lg: 'rounded-md',\n  xl: 'rounded-lg',\n  '2xl': 'rounded-xl',\n  '3xl': 'rounded-2xl',\n  full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, onPointerDown, onKeyDown, onBlur, ...props }, ref) => {\n  const { variant, size, fitted, color, radius } = useTabsStyleContext()\n  const resolvedSize = size || 'default'\n  // Radix Tabs 1.2+ calls focus() on mouse down, so :focus-visible matches after any\n  // earlier keyboard input. Mark pointer-initiated focus to keep the ring keyboard-only.\n  const [pointerFocus, setPointerFocus] = React.useState(false)\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n        triggerIconSizeClasses[resolvedSize],\n        variant === 'line' && lineColorClasses[color || 'default'],\n        variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n        variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n        className\n      )}\n      data-pointer-focus={pointerFocus ? '' : undefined}\n      onPointerDown={(event) => {\n        setPointerFocus(true)\n        onPointerDown?.(event)\n      }}\n      onKeyDown={(event) => {\n        setPointerFocus(false)\n        onKeyDown?.(event)\n      }}\n      onBlur={(event) => {\n        setPointerFocus(false)\n        onBlur?.(event)\n      }}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      'mt-4 focus-visible:focus-ring',\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst Tabs = TabsPrimitive.Root\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  tabsListVariants,\n  tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/tabs.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cva } from "class-variance-authority";
@@ -27,7 +28,7 @@ const tabsListVariants = cva(
 );
 const TabsList = React.forwardRef(({ className, variant, size, fitted, color, radius, ...props }, ref) => {
   const resolvedVariant = variant || "line";
-  return /* @__PURE__ */ React.createElement(TabsStyleContext.Provider, { value: { variant: resolvedVariant, size: size || "default", fitted: fitted ?? false, color: color || "default", radius: radius || "md" } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(TabsStyleContext.Provider, { value: { variant: resolvedVariant, size: size || "default", fitted: fitted ?? false, color: color || "default", radius: radius || "md" }, children: /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
       ref,
@@ -38,14 +39,15 @@ const TabsList = React.forwardRef(({ className, variant, size, fitted, color, ra
       ),
       ...props
     }
-  ));
+  ) });
 });
 TabsList.displayName = "TabsList";
 const tabsTriggerVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "transition-all duration-micro ease-out cursor-pointer",
-    "focus-visible:focus-ring",
+    // Keyboard-only focus ring: see pointer tracking in TabsTrigger
+    "[&:focus-visible:not([data-pointer-focus])]:focus-ring",
     "disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50"
   ].join(" "),
   {
@@ -149,10 +151,11 @@ const pillItemRadiusClasses = {
   "3xl": "rounded-2xl",
   full: "rounded-full"
 };
-const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
+const TabsTrigger = React.forwardRef(({ className, children, onPointerDown, onKeyDown, onBlur, ...props }, ref) => {
   const { variant, size, fitted, color, radius } = useTabsStyleContext();
   const resolvedSize = size || "default";
-  return /* @__PURE__ */ React.createElement(
+  const [pointerFocus, setPointerFocus] = React.useState(false);
+  return /* @__PURE__ */ jsx(
     TabsPrimitive.Trigger,
     {
       ref,
@@ -164,13 +167,26 @@ const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) =>
         variant === "pill" && pillItemRadiusClasses[radius || "md"],
         className
       ),
-      ...props
-    },
-    children
+      "data-pointer-focus": pointerFocus ? "" : void 0,
+      onPointerDown: (event) => {
+        setPointerFocus(true);
+        onPointerDown?.(event);
+      },
+      onKeyDown: (event) => {
+        setPointerFocus(false);
+        onKeyDown?.(event);
+      },
+      onBlur: (event) => {
+        setPointerFocus(false);
+        onBlur?.(event);
+      },
+      ...props,
+      children
+    }
   );
 });
 TabsTrigger.displayName = "TabsTrigger";
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n  variant?: 'line' | 'enclosed' | 'pill'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  fitted?: boolean\n  color?: 'default' | 'primary'\n  radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        line: 'border-b border-border bg-transparent gap-0',\n        enclosed: 'border-b border-border bg-transparent gap-0',\n        pill: 'bg-background-muted p-1 gap-1',\n      },\n      fitted: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n      fitted: false,\n    },\n  }\n)\n\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  /** Indicator color for line variant */\n  color?: 'default' | 'primary'\n  /** Top border-radius for enclosed variant, container radius for pill variant */\n  radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n  const resolvedVariant = variant || 'line'\n  return (\n    <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(\n          tabsListVariants({ variant, fitted }),\n          resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n          className\n        )}\n        {...props}\n      />\n    </TabsStyleContext.Provider>\n  )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n    'transition-all duration-micro ease-out cursor-pointer',\n    'focus-visible:focus-ring',\n    'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        line: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border',\n          'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n        ].join(' '),\n        enclosed: [\n          'border border-transparent -mb-px',\n          'hover:text-foreground',\n          'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n          'data-[state=active]:border-border data-[state=active]:border-b-background',\n        ].join(' '),\n        pill: [\n          'hover:text-foreground',\n          'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n        ].join(' '),\n      },\n      size: {\n        sm: 'h-8 text-sm',       // 32px, 13px\n        md: 'h-9 text-sm',       // 36px, 13px\n        default: 'h-10 text-md', // 40px, 14px\n        lg: 'h-12 text-base',    // 48px, 16px\n      },\n      fitted: {\n        true: 'flex-1',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // Padding per variant × size\n      { variant: 'line', size: 'sm', className: 'px-3' },\n      { variant: 'line', size: 'md', className: 'px-3.5' },\n      { variant: 'line', size: 'default', className: 'px-4' },\n      { variant: 'line', size: 'lg', className: 'px-6' },\n      { variant: 'enclosed', size: 'sm', className: 'px-3' },\n      { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n      { variant: 'enclosed', size: 'default', className: 'px-4' },\n      { variant: 'enclosed', size: 'lg', className: 'px-6' },\n      // Pill: reduced height + Segmented-matching font/padding\n      { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n      { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n      { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n      { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n    ],\n    defaultVariants: {\n      variant: 'line',\n      size: 'default',\n      fitted: false,\n    },\n  }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n} as const\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n  default: 'data-[state=active]:border-foreground',\n  primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n  none: 'rounded-t-none',\n  sm: 'rounded-t-sm',\n  base: 'rounded-t',\n  md: 'rounded-t-md',\n  lg: 'rounded-t-lg',\n  xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  md: 'rounded-md',\n  lg: 'rounded-md',\n  xl: 'rounded-lg',\n  '2xl': 'rounded-xl',\n  '3xl': 'rounded-2xl',\n  full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => {\n  const { variant, size, fitted, color, radius } = useTabsStyleContext()\n  const resolvedSize = size || 'default'\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n        triggerIconSizeClasses[resolvedSize],\n        variant === 'line' && lineColorClasses[color || 'default'],\n        variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n        variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      'mt-4 focus-visible:focus-ring',\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst Tabs = TabsPrimitive.Root\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  tabsListVariants,\n  tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n  variant?: 'line' | 'enclosed' | 'pill'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  fitted?: boolean\n  color?: 'default' | 'primary'\n  radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        line: 'border-b border-border bg-transparent gap-0',\n        enclosed: 'border-b border-border bg-transparent gap-0',\n        pill: 'bg-background-muted p-1 gap-1',\n      },\n      fitted: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n      fitted: false,\n    },\n  }\n)\n\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  /** Indicator color for line variant */\n  color?: 'default' | 'primary'\n  /** Top border-radius for enclosed variant, container radius for pill variant */\n  radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n  const resolvedVariant = variant || 'line'\n  return (\n    <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(\n          tabsListVariants({ variant, fitted }),\n          resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n          className\n        )}\n        {...props}\n      />\n    </TabsStyleContext.Provider>\n  )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n    'transition-all duration-micro ease-out cursor-pointer',\n    // Keyboard-only focus ring: see pointer tracking in TabsTrigger\n    '[&:focus-visible:not([data-pointer-focus])]:focus-ring',\n    'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        line: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border',\n          'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n        ].join(' '),\n        enclosed: [\n          'border border-transparent -mb-px',\n          'hover:text-foreground',\n          'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n          'data-[state=active]:border-border data-[state=active]:border-b-background',\n        ].join(' '),\n        pill: [\n          'hover:text-foreground',\n          'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n        ].join(' '),\n      },\n      size: {\n        sm: 'h-8 text-sm',       // 32px, 13px\n        md: 'h-9 text-sm',       // 36px, 13px\n        default: 'h-10 text-md', // 40px, 14px\n        lg: 'h-12 text-base',    // 48px, 16px\n      },\n      fitted: {\n        true: 'flex-1',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // Padding per variant × size\n      { variant: 'line', size: 'sm', className: 'px-3' },\n      { variant: 'line', size: 'md', className: 'px-3.5' },\n      { variant: 'line', size: 'default', className: 'px-4' },\n      { variant: 'line', size: 'lg', className: 'px-6' },\n      { variant: 'enclosed', size: 'sm', className: 'px-3' },\n      { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n      { variant: 'enclosed', size: 'default', className: 'px-4' },\n      { variant: 'enclosed', size: 'lg', className: 'px-6' },\n      // Pill: reduced height + Segmented-matching font/padding\n      { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n      { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n      { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n      { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n    ],\n    defaultVariants: {\n      variant: 'line',\n      size: 'default',\n      fitted: false,\n    },\n  }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n} as const\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n  default: 'data-[state=active]:border-foreground',\n  primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n  none: 'rounded-t-none',\n  sm: 'rounded-t-sm',\n  base: 'rounded-t',\n  md: 'rounded-t-md',\n  lg: 'rounded-t-lg',\n  xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  md: 'rounded-md',\n  lg: 'rounded-md',\n  xl: 'rounded-lg',\n  '2xl': 'rounded-xl',\n  '3xl': 'rounded-2xl',\n  full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, onPointerDown, onKeyDown, onBlur, ...props }, ref) => {\n  const { variant, size, fitted, color, radius } = useTabsStyleContext()\n  const resolvedSize = size || 'default'\n  // Radix Tabs 1.2+ calls focus() on mouse down, so :focus-visible matches after any\n  // earlier keyboard input. Mark pointer-initiated focus to keep the ring keyboard-only.\n  const [pointerFocus, setPointerFocus] = React.useState(false)\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n        triggerIconSizeClasses[resolvedSize],\n        variant === 'line' && lineColorClasses[color || 'default'],\n        variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n        variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n        className\n      )}\n      data-pointer-focus={pointerFocus ? '' : undefined}\n      onPointerDown={(event) => {\n        setPointerFocus(true)\n        onPointerDown?.(event)\n      }}\n      onKeyDown={(event) => {\n        setPointerFocus(false)\n        onKeyDown?.(event)\n      }}\n      onBlur={(event) => {\n        setPointerFocus(false)\n        onBlur?.(event)\n      }}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      'mt-4 focus-visible:focus-ring',\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst Tabs = TabsPrimitive.Root\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  tabsListVariants,\n  tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/textarea.js

@@ -33,6 +33,7 @@ __export(textarea_exports, {
   textareaVariants: () => textareaVariants
 });
 module.exports = __toCommonJS(textarea_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_class_variance_authority = require("class-variance-authority");
 var import_utils = require("../../lib/utils");
@@ -150,7 +151,7 @@ const Textarea = React.forwardRef(
     const ariaDescribedBy = fieldContext ? [
       resolvedError ? `${fieldContext.id}-error` : null
     ].filter(Boolean).join(" ") || void 0 : void 0;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "textarea",
       {
         id: textareaId,