@customafk/lunas-ui 0.2.4 → 0.2.6

package/dist/ui/switch.mjs

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t}from"react/jsx-runtime";import{Switch as n}from"radix-ui";function r({className:r,...i}){return t(n.Root,{"data-slot":`switch`,className:e(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all`,`inline-flex h-5`,`data-[state=checked]:bg-primary`,`data-[state=unchecked]:bg-border-muted`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`data-[state=unchecked]:border-border-weak`,`data-[state=unchecked]:[&_span]:bg-accent-weak`,`data-[state=unchecked]:bg-transparent`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:shadow-none`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,r),...i,children:t(n.Thumb,{"data-slot":`switch-thumb`,className:e(`bg-background`,`pointer-events-none block size-4 rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}export{r as Switch};
+"use client";import{jsx as e}from"react/jsx-runtime";import{cn as t}from"@customafk/react-toolkit/utils";import{Switch as n}from"radix-ui";function r({className:r,...i}){return e(n.Root,{"data-slot":`switch`,className:t(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all`,`inline-flex h-5`,`data-[state=checked]:bg-primary`,`data-[state=unchecked]:bg-border-muted`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`data-[state=unchecked]:border-border-weak`,`data-[state=unchecked]:[&_span]:bg-accent-weak`,`data-[state=unchecked]:bg-transparent`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:shadow-none`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,r),...i,children:e(n.Thumb,{"data-slot":`switch-thumb`,className:t(`bg-background`,`pointer-events-none block size-4 rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}export{r as Switch};
 //# sourceMappingURL=switch.mjs.map

package/dist/ui/switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.mjs","names":["SwitchPrimitive"],"sources":["../../packages/components/ui/switch.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer',\n        'w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all',\n        'inline-flex h-5',\n        'data-[state=checked]:bg-primary',\n        'data-[state=unchecked]:bg-border-muted',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:ring-4',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-50',\n        'data-[state=unchecked]:border-border-weak',\n        'data-[state=unchecked]:[&_span]:bg-accent-weak',\n        'data-[state=unchecked]:bg-transparent',\n        'data-[state=unchecked]:[&_span]:size-4',\n        'data-[state=unchecked]:[&_span]:translate-x-0.5',\n        'data-[state=unchecked]:[&_span]:shadow-none',\n        'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'bg-background',\n          'pointer-events-none block size-4 rounded-full ring-0 transition-transform',\n          'data-[state=checked]:translate-x-[calc(100%-3px)]',\n          'data-[state=unchecked]:translate-x-0'\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":"2IAMA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAACA,EAAgB,KAAA,CACf,YAAU,SACV,UAAW,EACT,OACA,wHACA,kBACA,kCACA,yCACA,sCACA,kCACA,uBACA,8BACA,sBACA,4CACA,iDACA,wCACA,yCACA,kDACA,8CACA,uDACA,EACD,CACD,GAAI,WAEJ,EAACA,EAAgB,MAAA,CACf,YAAU,eACV,UAAW,EACT,gBACA,4EACA,oDACA,uCACD,EACD,EACmB"}
+{"version":3,"file":"switch.mjs","names":["SwitchPrimitive"],"sources":["../../packages/components/ui/switch.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/**\n * Accessible toggle switch built on Radix UI's Switch primitive, with animated thumb and primary/muted color states.\n *\n * @example\n * ```tsx\n * import { Switch } from '@customafk/lunas-ui/ui/switch';\n * import { Label } from '@customafk/lunas-ui/ui/label';\n *\n * <div className=\"flex items-center gap-2\">\n *   <Switch id=\"notifications\" />\n *   <Label htmlFor=\"notifications\">Enable notifications</Label>\n * </div>\n * ```\n */\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer',\n        'w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all',\n        'inline-flex h-5',\n        'data-[state=checked]:bg-primary',\n        'data-[state=unchecked]:bg-border-muted',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:ring-4',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-50',\n        'data-[state=unchecked]:border-border-weak',\n        'data-[state=unchecked]:[&_span]:bg-accent-weak',\n        'data-[state=unchecked]:bg-transparent',\n        'data-[state=unchecked]:[&_span]:size-4',\n        'data-[state=unchecked]:[&_span]:translate-x-0.5',\n        'data-[state=unchecked]:[&_span]:shadow-none',\n        'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'bg-background',\n          'pointer-events-none block size-4 rounded-full ring-0 transition-transform',\n          'data-[state=checked]:translate-x-[calc(100%-3px)]',\n          'data-[state=unchecked]:translate-x-0'\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":"2IAoBA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAACA,EAAgB,KAAA,CACf,YAAU,SACV,UAAW,EACT,OACA,wHACA,kBACA,kCACA,yCACA,sCACA,kCACA,uBACA,8BACA,sBACA,4CACA,iDACA,wCACA,yCACA,kDACA,8CACA,uDACA,EACD,CACD,GAAI,WAEJ,EAACA,EAAgB,MAAA,CACf,YAAU,eACV,UAAW,EACT,gBACA,4EACA,oDACA,uCACD,EACD,EACmB"}

package/dist/ui/table.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`react`),r=require(`react/jsx-runtime`);const i=(0,n.memo)(({className:e,...n})=>(0,r.jsx)(`table`,{"data-slot":`table`,className:(0,t.cn)(`w-full caption-bottom text-sm`,e),...n}));i.displayName=`Table`;const a=(0,n.memo)(({className:e,...n})=>(0,r.jsx)(`thead`,{"data-slot":`table-header`,className:(0,t.cn)(`[&_tr:not(:last-child)_td]:border-b`,e),...n}));a.displayName=`TableHeader`;const o=(0,n.memo)(({className:e,...n})=>(0,r.jsx)(`tbody`,{"data-slot":`table-body`,className:(0,t.cn)(`[&_tr:last-child]:border-0`,`[&_tr]:hover:bg-muted-muted/50`,`[&_tr]:active:bg-muted-muted`,`[&_tr]:data-[state=selected]:bg-muted`,`[&_tr]:border-border-weak`,`[&_tr]:border-b`,`[&_tr]:transition-colors`,e),...n}));o.displayName=`TableBody`;const s=(0,n.memo)(({className:e,...n})=>(0,r.jsx)(`tfoot`,{"data-slot":`table-footer`,className:(0,t.cn)(`border-border-weak border-t font-medium [&>tr]:last:border-b-0`,e),...n}));s.displayName=`TableFooter`;const c=(0,n.memo)(({className:e,...t})=>(0,r.jsx)(`tr`,{"data-slot":`table-row`,className:e,...t}));c.displayName=`TableRow`;const l=(0,n.memo)(({className:e,...n})=>(0,r.jsx)(`th`,{"data-slot":`table-head`,className:(0,t.cn)(`text-text-positive-weak`,`h-10 whitespace-nowrap px-2 text-left align-middle font-medium`,`[&:has([role=checkbox])]:pr-0`,`[&>[role=checkbox]]:translate-y-0.5`,e),...n}));l.displayName=`TableHead`;const u=(0,n.memo)(({className:e,...t})=>(0,r.jsx)(`td`,{"data-slot":`table-cell`,className:e,...t}));u.displayName=`TableCell`;const d=(0,n.memo)(({className:e,...n})=>(0,r.jsx)(`caption`,{"data-slot":`table-caption`,className:(0,t.cn)(`text-text-positive-muted mt-4 text-sm`,e),...n}));d.displayName=`TableCaption`,exports.Table=i,exports.TableBody=o,exports.TableCaption=d,exports.TableCell=u,exports.TableFooter=s,exports.TableHead=l,exports.TableHeader=a,exports.TableRow=c;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@customafk/react-toolkit/utils`);const i=(0,t.memo)(({className:e,...t})=>(0,n.jsx)(`table`,{"data-slot":`table`,className:(0,r.cn)(`w-full caption-bottom text-sm`,e),...t}));i.displayName=`Table`;const a=(0,t.memo)(({className:e,...t})=>(0,n.jsx)(`thead`,{"data-slot":`table-header`,className:(0,r.cn)(`[&_tr:not(:last-child)_td]:border-b`,e),...t}));a.displayName=`TableHeader`;const o=(0,t.memo)(({className:e,...t})=>(0,n.jsx)(`tbody`,{"data-slot":`table-body`,className:(0,r.cn)(`[&_tr:last-child]:border-0`,`[&_tr]:hover:bg-muted-muted/50`,`[&_tr]:active:bg-muted-muted`,`[&_tr]:data-[state=selected]:bg-muted`,`[&_tr]:border-border-weak`,`[&_tr]:border-b`,`[&_tr]:transition-colors`,e),...t}));o.displayName=`TableBody`;const s=(0,t.memo)(({className:e,...t})=>(0,n.jsx)(`tfoot`,{"data-slot":`table-footer`,className:(0,r.cn)(`border-border-weak border-t font-medium [&>tr]:last:border-b-0`,e),...t}));s.displayName=`TableFooter`;const c=(0,t.memo)(({className:e,...t})=>(0,n.jsx)(`tr`,{"data-slot":`table-row`,className:e,...t}));c.displayName=`TableRow`;const l=(0,t.memo)(({className:e,...t})=>(0,n.jsx)(`th`,{"data-slot":`table-head`,className:(0,r.cn)(`text-text-positive-weak`,`h-10 whitespace-nowrap px-2 text-left align-middle font-medium`,`[&:has([role=checkbox])]:pr-0`,`[&>[role=checkbox]]:translate-y-0.5`,e),...t}));l.displayName=`TableHead`;const u=(0,t.memo)(({className:e,...t})=>(0,n.jsx)(`td`,{"data-slot":`table-cell`,className:e,...t}));u.displayName=`TableCell`;const d=(0,t.memo)(({className:e,...t})=>(0,n.jsx)(`caption`,{"data-slot":`table-caption`,className:(0,r.cn)(`text-text-positive-muted mt-4 text-sm`,e),...t}));d.displayName=`TableCaption`,exports.Table=i,exports.TableBody=o,exports.TableCaption=d,exports.TableCell=u,exports.TableFooter=s,exports.TableHead=l,exports.TableHeader=a,exports.TableRow=c;
 //# sourceMappingURL=table.cjs.map

package/dist/ui/table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"table.cjs","names":[],"sources":["../../packages/components/ui/table.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nconst Table = memo(({ className, ...props }: React.ComponentProps<'table'>) => {\n  return <table data-slot=\"table\" className={cn('w-full caption-bottom text-sm', className)} {...props} />;\n});\nTable.displayName = 'Table';\n\nconst TableHeader = memo(({ className, ...props }: React.ComponentProps<'thead'>) => {\n  return <thead data-slot=\"table-header\" className={cn('[&_tr:not(:last-child)_td]:border-b', className)} {...props} />;\n});\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = memo(({ className, ...props }: React.ComponentProps<'tbody'>) => {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\n        '[&_tr:last-child]:border-0',\n        '[&_tr]:hover:bg-muted-muted/50',\n        '[&_tr]:active:bg-muted-muted',\n        '[&_tr]:data-[state=selected]:bg-muted',\n        '[&_tr]:border-border-weak',\n        '[&_tr]:border-b',\n        '[&_tr]:transition-colors',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = memo(({ className, ...props }: React.ComponentProps<'tfoot'>) => {\n  return <tfoot data-slot=\"table-footer\" className={cn('border-border-weak border-t font-medium [&>tr]:last:border-b-0', className)} {...props} />;\n});\nTableFooter.displayName = 'TableFooter';\n\nconst TableRow = memo(({ className, ...props }: React.ComponentProps<'tr'>) => {\n  return <tr data-slot=\"table-row\" className={className} {...props} />;\n});\nTableRow.displayName = 'TableRow';\n\nconst TableHead = memo(({ className, ...props }: React.ComponentProps<'th'>) => {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        'text-text-positive-weak',\n        'h-10 whitespace-nowrap px-2 text-left align-middle font-medium',\n        '[&:has([role=checkbox])]:pr-0',\n        '[&>[role=checkbox]]:translate-y-0.5',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableHead.displayName = 'TableHead';\n\nconst TableCell = memo(({ className, ...props }: React.ComponentProps<'td'>) => {\n  return <td data-slot=\"table-cell\" className={className} {...props} />;\n});\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = memo(({ className, ...props }: React.ComponentProps<'caption'>) => {\n  return <caption data-slot=\"table-caption\" className={cn('text-text-positive-muted mt-4 text-sm', className)} {...props} />;\n});\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };\n"],"mappings":"wJAMA,MAAM,GAAA,EAAA,EAAA,OAAc,CAAE,YAAW,GAAG,MAC3B,EAAA,EAAA,KAAC,QAAA,CAAM,YAAU,QAAQ,WAAA,EAAA,EAAA,IAAc,gCAAiC,EAAU,CAAE,GAAI,GAAS,CACxG,CACF,EAAM,YAAc,QAEpB,MAAM,GAAA,EAAA,EAAA,OAAoB,CAAE,YAAW,GAAG,MACjC,EAAA,EAAA,KAAC,QAAA,CAAM,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,sCAAuC,EAAU,CAAE,GAAI,GAAS,CACrH,CACF,EAAY,YAAc,cAE1B,MAAM,GAAA,EAAA,EAAA,OAAkB,CAAE,YAAW,GAAG,MAEpC,EAAA,EAAA,KAAC,QAAA,CACC,YAAU,aACV,WAAA,EAAA,EAAA,IACE,6BACA,iCACA,+BACA,wCACA,4BACA,kBACA,2BACA,EACD,CACD,GAAI,GACJ,CAEJ,CACF,EAAU,YAAc,YAExB,MAAM,GAAA,EAAA,EAAA,OAAoB,CAAE,YAAW,GAAG,MACjC,EAAA,EAAA,KAAC,QAAA,CAAM,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,iEAAkE,EAAU,CAAE,GAAI,GAAS,CAChJ,CACF,EAAY,YAAc,cAE1B,MAAM,GAAA,EAAA,EAAA,OAAiB,CAAE,YAAW,GAAG,MAC9B,EAAA,EAAA,KAAC,KAAA,CAAG,YAAU,YAAuB,YAAW,GAAI,GAAS,CACpE,CACF,EAAS,YAAc,WAEvB,MAAM,GAAA,EAAA,EAAA,OAAkB,CAAE,YAAW,GAAG,MAEpC,EAAA,EAAA,KAAC,KAAA,CACC,YAAU,aACV,WAAA,EAAA,EAAA,IACE,0BACA,iEACA,gCACA,sCACA,EACD,CACD,GAAI,GACJ,CAEJ,CACF,EAAU,YAAc,YAExB,MAAM,GAAA,EAAA,EAAA,OAAkB,CAAE,YAAW,GAAG,MAC/B,EAAA,EAAA,KAAC,KAAA,CAAG,YAAU,aAAwB,YAAW,GAAI,GAAS,CACrE,CACF,EAAU,YAAc,YAExB,MAAM,GAAA,EAAA,EAAA,OAAqB,CAAE,YAAW,GAAG,MAClC,EAAA,EAAA,KAAC,UAAA,CAAQ,YAAU,gBAAgB,WAAA,EAAA,EAAA,IAAc,wCAAyC,EAAU,CAAE,GAAI,GAAS,CAC1H,CACF,EAAa,YAAc"}
+{"version":3,"file":"table.cjs","names":[],"sources":["../../packages/components/ui/table.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\n/**\n * Full-width semantic table with caption-bottom layout, intended to be composed with TableHeader, TableBody, and related sub-components.\n *\n * @example\n * ```tsx\n * import {\n *   Table, TableHeader, TableBody, TableRow,\n *   TableHead, TableCell, TableCaption,\n * } from '@customafk/lunas-ui/ui/table';\n *\n * <Table>\n *   <TableCaption>Invoice list</TableCaption>\n *   <TableHeader>\n *     <TableRow>\n *       <TableHead>Name</TableHead>\n *       <TableHead>Amount</TableHead>\n *     </TableRow>\n *   </TableHeader>\n *   <TableBody>\n *     <TableRow>\n *       <TableCell>Acme Corp</TableCell>\n *       <TableCell>$1,200</TableCell>\n *     </TableRow>\n *   </TableBody>\n * </Table>\n * ```\n */\nconst Table = memo(({ className, ...props }: React.ComponentProps<'table'>) => {\n  return <table data-slot=\"table\" className={cn('w-full caption-bottom text-sm', className)} {...props} />;\n});\nTable.displayName = 'Table';\n\n/** The `<thead>` element containing one or more header rows. */\nconst TableHeader = memo(({ className, ...props }: React.ComponentProps<'thead'>) => {\n  return <thead data-slot=\"table-header\" className={cn('[&_tr:not(:last-child)_td]:border-b', className)} {...props} />;\n});\nTableHeader.displayName = 'TableHeader';\n\n/** The `<tbody>` element containing data rows with hover and selection styling. */\nconst TableBody = memo(({ className, ...props }: React.ComponentProps<'tbody'>) => {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\n        '[&_tr:last-child]:border-0',\n        '[&_tr]:hover:bg-muted-muted/50',\n        '[&_tr]:active:bg-muted-muted',\n        '[&_tr]:data-[state=selected]:bg-muted',\n        '[&_tr]:border-border-weak',\n        '[&_tr]:border-b',\n        '[&_tr]:transition-colors',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableBody.displayName = 'TableBody';\n\n/** The `<tfoot>` element for summary or aggregate rows at the bottom of the table. */\nconst TableFooter = memo(({ className, ...props }: React.ComponentProps<'tfoot'>) => {\n  return <tfoot data-slot=\"table-footer\" className={cn('border-border-weak border-t font-medium [&>tr]:last:border-b-0', className)} {...props} />;\n});\nTableFooter.displayName = 'TableFooter';\n\n/** A single `<tr>` row used inside TableHeader, TableBody, or TableFooter. */\nconst TableRow = memo(({ className, ...props }: React.ComponentProps<'tr'>) => {\n  return <tr data-slot=\"table-row\" className={className} {...props} />;\n});\nTableRow.displayName = 'TableRow';\n\n/** A `<th>` column header cell with medium-weight text and left alignment. */\nconst TableHead = memo(({ className, ...props }: React.ComponentProps<'th'>) => {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        'text-text-positive-weak',\n        'h-10 whitespace-nowrap px-2 text-left align-middle font-medium',\n        '[&:has([role=checkbox])]:pr-0',\n        '[&>[role=checkbox]]:translate-y-0.5',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableHead.displayName = 'TableHead';\n\n/** A standard `<td>` data cell used inside a TableRow. */\nconst TableCell = memo(({ className, ...props }: React.ComponentProps<'td'>) => {\n  return <td data-slot=\"table-cell\" className={className} {...props} />;\n});\nTableCell.displayName = 'TableCell';\n\n/** An accessible `<caption>` element displayed below the table. */\nconst TableCaption = memo(({ className, ...props }: React.ComponentProps<'caption'>) => {\n  return <caption data-slot=\"table-caption\" className={cn('text-text-positive-muted mt-4 text-sm', className)} {...props} />;\n});\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };\n"],"mappings":"wJAiCA,MAAM,GAAA,EAAA,EAAA,OAAc,CAAE,YAAW,GAAG,MAC3B,EAAA,EAAA,KAAC,QAAA,CAAM,YAAU,QAAQ,WAAA,EAAA,EAAA,IAAc,gCAAiC,EAAU,CAAE,GAAI,GAAS,CACxG,CACF,EAAM,YAAc,QAGpB,MAAM,GAAA,EAAA,EAAA,OAAoB,CAAE,YAAW,GAAG,MACjC,EAAA,EAAA,KAAC,QAAA,CAAM,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,sCAAuC,EAAU,CAAE,GAAI,GAAS,CACrH,CACF,EAAY,YAAc,cAG1B,MAAM,GAAA,EAAA,EAAA,OAAkB,CAAE,YAAW,GAAG,MAEpC,EAAA,EAAA,KAAC,QAAA,CACC,YAAU,aACV,WAAA,EAAA,EAAA,IACE,6BACA,iCACA,+BACA,wCACA,4BACA,kBACA,2BACA,EACD,CACD,GAAI,GACJ,CAEJ,CACF,EAAU,YAAc,YAGxB,MAAM,GAAA,EAAA,EAAA,OAAoB,CAAE,YAAW,GAAG,MACjC,EAAA,EAAA,KAAC,QAAA,CAAM,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,iEAAkE,EAAU,CAAE,GAAI,GAAS,CAChJ,CACF,EAAY,YAAc,cAG1B,MAAM,GAAA,EAAA,EAAA,OAAiB,CAAE,YAAW,GAAG,MAC9B,EAAA,EAAA,KAAC,KAAA,CAAG,YAAU,YAAuB,YAAW,GAAI,GAAS,CACpE,CACF,EAAS,YAAc,WAGvB,MAAM,GAAA,EAAA,EAAA,OAAkB,CAAE,YAAW,GAAG,MAEpC,EAAA,EAAA,KAAC,KAAA,CACC,YAAU,aACV,WAAA,EAAA,EAAA,IACE,0BACA,iEACA,gCACA,sCACA,EACD,CACD,GAAI,GACJ,CAEJ,CACF,EAAU,YAAc,YAGxB,MAAM,GAAA,EAAA,EAAA,OAAkB,CAAE,YAAW,GAAG,MAC/B,EAAA,EAAA,KAAC,KAAA,CAAG,YAAU,aAAwB,YAAW,GAAI,GAAS,CACrE,CACF,EAAU,YAAc,YAGxB,MAAM,GAAA,EAAA,EAAA,OAAqB,CAAE,YAAW,GAAG,MAClC,EAAA,EAAA,KAAC,UAAA,CAAQ,YAAU,gBAAgB,WAAA,EAAA,EAAA,IAAc,wCAAyC,EAAU,CAAE,GAAI,GAAS,CAC1H,CACF,EAAa,YAAc"}

package/dist/ui/table.d.cts

@@ -1,39 +1,74 @@
-import * as react_jsx_runtime235 from "react/jsx-runtime";
+import * as react_jsx_runtime244 from "react/jsx-runtime";
 import * as react28 from "react";
 
 //#region packages/components/ui/table.d.ts
+
+/**
+ * Full-width semantic table with caption-bottom layout, intended to be composed with TableHeader, TableBody, and related sub-components.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Table, TableHeader, TableBody, TableRow,
+ *   TableHead, TableCell, TableCaption,
+ * } from '@customafk/lunas-ui/ui/table';
+ *
+ * <Table>
+ *   <TableCaption>Invoice list</TableCaption>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Name</TableHead>
+ *       <TableHead>Amount</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>Acme Corp</TableCell>
+ *       <TableCell>$1,200</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
 declare const Table: react28.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"table">) => react_jsx_runtime235.JSX.Element>;
+}: React.ComponentProps<"table">) => react_jsx_runtime244.JSX.Element>;
+/** The `<thead>` element containing one or more header rows. */
 declare const TableHeader: react28.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"thead">) => react_jsx_runtime235.JSX.Element>;
+}: React.ComponentProps<"thead">) => react_jsx_runtime244.JSX.Element>;
+/** The `<tbody>` element containing data rows with hover and selection styling. */
 declare const TableBody: react28.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"tbody">) => react_jsx_runtime235.JSX.Element>;
+}: React.ComponentProps<"tbody">) => react_jsx_runtime244.JSX.Element>;
+/** The `<tfoot>` element for summary or aggregate rows at the bottom of the table. */
 declare const TableFooter: react28.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"tfoot">) => react_jsx_runtime235.JSX.Element>;
+}: React.ComponentProps<"tfoot">) => react_jsx_runtime244.JSX.Element>;
+/** A single `<tr>` row used inside TableHeader, TableBody, or TableFooter. */
 declare const TableRow: react28.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"tr">) => react_jsx_runtime235.JSX.Element>;
+}: React.ComponentProps<"tr">) => react_jsx_runtime244.JSX.Element>;
+/** A `<th>` column header cell with medium-weight text and left alignment. */
 declare const TableHead: react28.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"th">) => react_jsx_runtime235.JSX.Element>;
+}: React.ComponentProps<"th">) => react_jsx_runtime244.JSX.Element>;
+/** A standard `<td>` data cell used inside a TableRow. */
 declare const TableCell: react28.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"td">) => react_jsx_runtime235.JSX.Element>;
+}: React.ComponentProps<"td">) => react_jsx_runtime244.JSX.Element>;
+/** An accessible `<caption>` element displayed below the table. */
 declare const TableCaption: react28.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"caption">) => react_jsx_runtime235.JSX.Element>;
+}: React.ComponentProps<"caption">) => react_jsx_runtime244.JSX.Element>;
 //#endregion
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
 //# sourceMappingURL=table.d.cts.map

package/dist/ui/table.d.mts

@@ -1,39 +1,74 @@
-import * as react8 from "react";
-import * as react_jsx_runtime260 from "react/jsx-runtime";
+import * as react1 from "react";
+import * as react_jsx_runtime76 from "react/jsx-runtime";
 
 //#region packages/components/ui/table.d.ts
-declare const Table: react8.MemoExoticComponent<({
+
+/**
+ * Full-width semantic table with caption-bottom layout, intended to be composed with TableHeader, TableBody, and related sub-components.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Table, TableHeader, TableBody, TableRow,
+ *   TableHead, TableCell, TableCaption,
+ * } from '@customafk/lunas-ui/ui/table';
+ *
+ * <Table>
+ *   <TableCaption>Invoice list</TableCaption>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Name</TableHead>
+ *       <TableHead>Amount</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>Acme Corp</TableCell>
+ *       <TableCell>$1,200</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
+declare const Table: react1.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"table">) => react_jsx_runtime260.JSX.Element>;
-declare const TableHeader: react8.MemoExoticComponent<({
+}: React.ComponentProps<"table">) => react_jsx_runtime76.JSX.Element>;
+/** The `<thead>` element containing one or more header rows. */
+declare const TableHeader: react1.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"thead">) => react_jsx_runtime260.JSX.Element>;
-declare const TableBody: react8.MemoExoticComponent<({
+}: React.ComponentProps<"thead">) => react_jsx_runtime76.JSX.Element>;
+/** The `<tbody>` element containing data rows with hover and selection styling. */
+declare const TableBody: react1.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"tbody">) => react_jsx_runtime260.JSX.Element>;
-declare const TableFooter: react8.MemoExoticComponent<({
+}: React.ComponentProps<"tbody">) => react_jsx_runtime76.JSX.Element>;
+/** The `<tfoot>` element for summary or aggregate rows at the bottom of the table. */
+declare const TableFooter: react1.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"tfoot">) => react_jsx_runtime260.JSX.Element>;
-declare const TableRow: react8.MemoExoticComponent<({
+}: React.ComponentProps<"tfoot">) => react_jsx_runtime76.JSX.Element>;
+/** A single `<tr>` row used inside TableHeader, TableBody, or TableFooter. */
+declare const TableRow: react1.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"tr">) => react_jsx_runtime260.JSX.Element>;
-declare const TableHead: react8.MemoExoticComponent<({
+}: React.ComponentProps<"tr">) => react_jsx_runtime76.JSX.Element>;
+/** A `<th>` column header cell with medium-weight text and left alignment. */
+declare const TableHead: react1.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"th">) => react_jsx_runtime260.JSX.Element>;
-declare const TableCell: react8.MemoExoticComponent<({
+}: React.ComponentProps<"th">) => react_jsx_runtime76.JSX.Element>;
+/** A standard `<td>` data cell used inside a TableRow. */
+declare const TableCell: react1.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"td">) => react_jsx_runtime260.JSX.Element>;
-declare const TableCaption: react8.MemoExoticComponent<({
+}: React.ComponentProps<"td">) => react_jsx_runtime76.JSX.Element>;
+/** An accessible `<caption>` element displayed below the table. */
+declare const TableCaption: react1.MemoExoticComponent<({
   className,
   ...props
-}: React.ComponentProps<"caption">) => react_jsx_runtime260.JSX.Element>;
+}: React.ComponentProps<"caption">) => react_jsx_runtime76.JSX.Element>;
 //#endregion
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
 //# sourceMappingURL=table.d.mts.map

package/dist/ui/table.mjs

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"@customafk/react-toolkit/utils";import{memo as t}from"react";import{jsx as n}from"react/jsx-runtime";const r=t(({className:t,...r})=>n(`table`,{"data-slot":`table`,className:e(`w-full caption-bottom text-sm`,t),...r}));r.displayName=`Table`;const i=t(({className:t,...r})=>n(`thead`,{"data-slot":`table-header`,className:e(`[&_tr:not(:last-child)_td]:border-b`,t),...r}));i.displayName=`TableHeader`;const a=t(({className:t,...r})=>n(`tbody`,{"data-slot":`table-body`,className:e(`[&_tr:last-child]:border-0`,`[&_tr]:hover:bg-muted-muted/50`,`[&_tr]:active:bg-muted-muted`,`[&_tr]:data-[state=selected]:bg-muted`,`[&_tr]:border-border-weak`,`[&_tr]:border-b`,`[&_tr]:transition-colors`,t),...r}));a.displayName=`TableBody`;const o=t(({className:t,...r})=>n(`tfoot`,{"data-slot":`table-footer`,className:e(`border-border-weak border-t font-medium [&>tr]:last:border-b-0`,t),...r}));o.displayName=`TableFooter`;const s=t(({className:e,...t})=>n(`tr`,{"data-slot":`table-row`,className:e,...t}));s.displayName=`TableRow`;const c=t(({className:t,...r})=>n(`th`,{"data-slot":`table-head`,className:e(`text-text-positive-weak`,`h-10 whitespace-nowrap px-2 text-left align-middle font-medium`,`[&:has([role=checkbox])]:pr-0`,`[&>[role=checkbox]]:translate-y-0.5`,t),...r}));c.displayName=`TableHead`;const l=t(({className:e,...t})=>n(`td`,{"data-slot":`table-cell`,className:e,...t}));l.displayName=`TableCell`;const u=t(({className:t,...r})=>n(`caption`,{"data-slot":`table-caption`,className:e(`text-text-positive-muted mt-4 text-sm`,t),...r}));u.displayName=`TableCaption`;export{r as Table,a as TableBody,u as TableCaption,l as TableCell,o as TableFooter,c as TableHead,i as TableHeader,s as TableRow};
+"use client";import{memo as e}from"react";import{jsx as t}from"react/jsx-runtime";import{cn as n}from"@customafk/react-toolkit/utils";const r=e(({className:e,...r})=>t(`table`,{"data-slot":`table`,className:n(`w-full caption-bottom text-sm`,e),...r}));r.displayName=`Table`;const i=e(({className:e,...r})=>t(`thead`,{"data-slot":`table-header`,className:n(`[&_tr:not(:last-child)_td]:border-b`,e),...r}));i.displayName=`TableHeader`;const a=e(({className:e,...r})=>t(`tbody`,{"data-slot":`table-body`,className:n(`[&_tr:last-child]:border-0`,`[&_tr]:hover:bg-muted-muted/50`,`[&_tr]:active:bg-muted-muted`,`[&_tr]:data-[state=selected]:bg-muted`,`[&_tr]:border-border-weak`,`[&_tr]:border-b`,`[&_tr]:transition-colors`,e),...r}));a.displayName=`TableBody`;const o=e(({className:e,...r})=>t(`tfoot`,{"data-slot":`table-footer`,className:n(`border-border-weak border-t font-medium [&>tr]:last:border-b-0`,e),...r}));o.displayName=`TableFooter`;const s=e(({className:e,...n})=>t(`tr`,{"data-slot":`table-row`,className:e,...n}));s.displayName=`TableRow`;const c=e(({className:e,...r})=>t(`th`,{"data-slot":`table-head`,className:n(`text-text-positive-weak`,`h-10 whitespace-nowrap px-2 text-left align-middle font-medium`,`[&:has([role=checkbox])]:pr-0`,`[&>[role=checkbox]]:translate-y-0.5`,e),...r}));c.displayName=`TableHead`;const l=e(({className:e,...n})=>t(`td`,{"data-slot":`table-cell`,className:e,...n}));l.displayName=`TableCell`;const u=e(({className:e,...r})=>t(`caption`,{"data-slot":`table-caption`,className:n(`text-text-positive-muted mt-4 text-sm`,e),...r}));u.displayName=`TableCaption`;export{r as Table,a as TableBody,u as TableCaption,l as TableCell,o as TableFooter,c as TableHead,i as TableHeader,s as TableRow};
 //# sourceMappingURL=table.mjs.map

package/dist/ui/table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"table.mjs","names":[],"sources":["../../packages/components/ui/table.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nconst Table = memo(({ className, ...props }: React.ComponentProps<'table'>) => {\n  return <table data-slot=\"table\" className={cn('w-full caption-bottom text-sm', className)} {...props} />;\n});\nTable.displayName = 'Table';\n\nconst TableHeader = memo(({ className, ...props }: React.ComponentProps<'thead'>) => {\n  return <thead data-slot=\"table-header\" className={cn('[&_tr:not(:last-child)_td]:border-b', className)} {...props} />;\n});\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = memo(({ className, ...props }: React.ComponentProps<'tbody'>) => {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\n        '[&_tr:last-child]:border-0',\n        '[&_tr]:hover:bg-muted-muted/50',\n        '[&_tr]:active:bg-muted-muted',\n        '[&_tr]:data-[state=selected]:bg-muted',\n        '[&_tr]:border-border-weak',\n        '[&_tr]:border-b',\n        '[&_tr]:transition-colors',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = memo(({ className, ...props }: React.ComponentProps<'tfoot'>) => {\n  return <tfoot data-slot=\"table-footer\" className={cn('border-border-weak border-t font-medium [&>tr]:last:border-b-0', className)} {...props} />;\n});\nTableFooter.displayName = 'TableFooter';\n\nconst TableRow = memo(({ className, ...props }: React.ComponentProps<'tr'>) => {\n  return <tr data-slot=\"table-row\" className={className} {...props} />;\n});\nTableRow.displayName = 'TableRow';\n\nconst TableHead = memo(({ className, ...props }: React.ComponentProps<'th'>) => {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        'text-text-positive-weak',\n        'h-10 whitespace-nowrap px-2 text-left align-middle font-medium',\n        '[&:has([role=checkbox])]:pr-0',\n        '[&>[role=checkbox]]:translate-y-0.5',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableHead.displayName = 'TableHead';\n\nconst TableCell = memo(({ className, ...props }: React.ComponentProps<'td'>) => {\n  return <td data-slot=\"table-cell\" className={className} {...props} />;\n});\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = memo(({ className, ...props }: React.ComponentProps<'caption'>) => {\n  return <caption data-slot=\"table-caption\" className={cn('text-text-positive-muted mt-4 text-sm', className)} {...props} />;\n});\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };\n"],"mappings":"sIAMA,MAAM,EAAQ,GAAM,CAAE,YAAW,GAAG,KAC3B,EAAC,QAAA,CAAM,YAAU,QAAQ,UAAW,EAAG,gCAAiC,EAAU,CAAE,GAAI,GAAS,CACxG,CACF,EAAM,YAAc,QAEpB,MAAM,EAAc,GAAM,CAAE,YAAW,GAAG,KACjC,EAAC,QAAA,CAAM,YAAU,eAAe,UAAW,EAAG,sCAAuC,EAAU,CAAE,GAAI,GAAS,CACrH,CACF,EAAY,YAAc,cAE1B,MAAM,EAAY,GAAM,CAAE,YAAW,GAAG,KAEpC,EAAC,QAAA,CACC,YAAU,aACV,UAAW,EACT,6BACA,iCACA,+BACA,wCACA,4BACA,kBACA,2BACA,EACD,CACD,GAAI,GACJ,CAEJ,CACF,EAAU,YAAc,YAExB,MAAM,EAAc,GAAM,CAAE,YAAW,GAAG,KACjC,EAAC,QAAA,CAAM,YAAU,eAAe,UAAW,EAAG,iEAAkE,EAAU,CAAE,GAAI,GAAS,CAChJ,CACF,EAAY,YAAc,cAE1B,MAAM,EAAW,GAAM,CAAE,YAAW,GAAG,KAC9B,EAAC,KAAA,CAAG,YAAU,YAAuB,YAAW,GAAI,GAAS,CACpE,CACF,EAAS,YAAc,WAEvB,MAAM,EAAY,GAAM,CAAE,YAAW,GAAG,KAEpC,EAAC,KAAA,CACC,YAAU,aACV,UAAW,EACT,0BACA,iEACA,gCACA,sCACA,EACD,CACD,GAAI,GACJ,CAEJ,CACF,EAAU,YAAc,YAExB,MAAM,EAAY,GAAM,CAAE,YAAW,GAAG,KAC/B,EAAC,KAAA,CAAG,YAAU,aAAwB,YAAW,GAAI,GAAS,CACrE,CACF,EAAU,YAAc,YAExB,MAAM,EAAe,GAAM,CAAE,YAAW,GAAG,KAClC,EAAC,UAAA,CAAQ,YAAU,gBAAgB,UAAW,EAAG,wCAAyC,EAAU,CAAE,GAAI,GAAS,CAC1H,CACF,EAAa,YAAc"}
+{"version":3,"file":"table.mjs","names":[],"sources":["../../packages/components/ui/table.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\n/**\n * Full-width semantic table with caption-bottom layout, intended to be composed with TableHeader, TableBody, and related sub-components.\n *\n * @example\n * ```tsx\n * import {\n *   Table, TableHeader, TableBody, TableRow,\n *   TableHead, TableCell, TableCaption,\n * } from '@customafk/lunas-ui/ui/table';\n *\n * <Table>\n *   <TableCaption>Invoice list</TableCaption>\n *   <TableHeader>\n *     <TableRow>\n *       <TableHead>Name</TableHead>\n *       <TableHead>Amount</TableHead>\n *     </TableRow>\n *   </TableHeader>\n *   <TableBody>\n *     <TableRow>\n *       <TableCell>Acme Corp</TableCell>\n *       <TableCell>$1,200</TableCell>\n *     </TableRow>\n *   </TableBody>\n * </Table>\n * ```\n */\nconst Table = memo(({ className, ...props }: React.ComponentProps<'table'>) => {\n  return <table data-slot=\"table\" className={cn('w-full caption-bottom text-sm', className)} {...props} />;\n});\nTable.displayName = 'Table';\n\n/** The `<thead>` element containing one or more header rows. */\nconst TableHeader = memo(({ className, ...props }: React.ComponentProps<'thead'>) => {\n  return <thead data-slot=\"table-header\" className={cn('[&_tr:not(:last-child)_td]:border-b', className)} {...props} />;\n});\nTableHeader.displayName = 'TableHeader';\n\n/** The `<tbody>` element containing data rows with hover and selection styling. */\nconst TableBody = memo(({ className, ...props }: React.ComponentProps<'tbody'>) => {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\n        '[&_tr:last-child]:border-0',\n        '[&_tr]:hover:bg-muted-muted/50',\n        '[&_tr]:active:bg-muted-muted',\n        '[&_tr]:data-[state=selected]:bg-muted',\n        '[&_tr]:border-border-weak',\n        '[&_tr]:border-b',\n        '[&_tr]:transition-colors',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableBody.displayName = 'TableBody';\n\n/** The `<tfoot>` element for summary or aggregate rows at the bottom of the table. */\nconst TableFooter = memo(({ className, ...props }: React.ComponentProps<'tfoot'>) => {\n  return <tfoot data-slot=\"table-footer\" className={cn('border-border-weak border-t font-medium [&>tr]:last:border-b-0', className)} {...props} />;\n});\nTableFooter.displayName = 'TableFooter';\n\n/** A single `<tr>` row used inside TableHeader, TableBody, or TableFooter. */\nconst TableRow = memo(({ className, ...props }: React.ComponentProps<'tr'>) => {\n  return <tr data-slot=\"table-row\" className={className} {...props} />;\n});\nTableRow.displayName = 'TableRow';\n\n/** A `<th>` column header cell with medium-weight text and left alignment. */\nconst TableHead = memo(({ className, ...props }: React.ComponentProps<'th'>) => {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        'text-text-positive-weak',\n        'h-10 whitespace-nowrap px-2 text-left align-middle font-medium',\n        '[&:has([role=checkbox])]:pr-0',\n        '[&>[role=checkbox]]:translate-y-0.5',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableHead.displayName = 'TableHead';\n\n/** A standard `<td>` data cell used inside a TableRow. */\nconst TableCell = memo(({ className, ...props }: React.ComponentProps<'td'>) => {\n  return <td data-slot=\"table-cell\" className={className} {...props} />;\n});\nTableCell.displayName = 'TableCell';\n\n/** An accessible `<caption>` element displayed below the table. */\nconst TableCaption = memo(({ className, ...props }: React.ComponentProps<'caption'>) => {\n  return <caption data-slot=\"table-caption\" className={cn('text-text-positive-muted mt-4 text-sm', className)} {...props} />;\n});\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };\n"],"mappings":"sIAiCA,MAAM,EAAQ,GAAM,CAAE,YAAW,GAAG,KAC3B,EAAC,QAAA,CAAM,YAAU,QAAQ,UAAW,EAAG,gCAAiC,EAAU,CAAE,GAAI,GAAS,CACxG,CACF,EAAM,YAAc,QAGpB,MAAM,EAAc,GAAM,CAAE,YAAW,GAAG,KACjC,EAAC,QAAA,CAAM,YAAU,eAAe,UAAW,EAAG,sCAAuC,EAAU,CAAE,GAAI,GAAS,CACrH,CACF,EAAY,YAAc,cAG1B,MAAM,EAAY,GAAM,CAAE,YAAW,GAAG,KAEpC,EAAC,QAAA,CACC,YAAU,aACV,UAAW,EACT,6BACA,iCACA,+BACA,wCACA,4BACA,kBACA,2BACA,EACD,CACD,GAAI,GACJ,CAEJ,CACF,EAAU,YAAc,YAGxB,MAAM,EAAc,GAAM,CAAE,YAAW,GAAG,KACjC,EAAC,QAAA,CAAM,YAAU,eAAe,UAAW,EAAG,iEAAkE,EAAU,CAAE,GAAI,GAAS,CAChJ,CACF,EAAY,YAAc,cAG1B,MAAM,EAAW,GAAM,CAAE,YAAW,GAAG,KAC9B,EAAC,KAAA,CAAG,YAAU,YAAuB,YAAW,GAAI,GAAS,CACpE,CACF,EAAS,YAAc,WAGvB,MAAM,EAAY,GAAM,CAAE,YAAW,GAAG,KAEpC,EAAC,KAAA,CACC,YAAU,aACV,UAAW,EACT,0BACA,iEACA,gCACA,sCACA,EACD,CACD,GAAI,GACJ,CAEJ,CACF,EAAU,YAAc,YAGxB,MAAM,EAAY,GAAM,CAAE,YAAW,GAAG,KAC/B,EAAC,KAAA,CAAG,YAAU,aAAwB,YAAW,GAAI,GAAS,CACrE,CACF,EAAU,YAAc,YAGxB,MAAM,EAAe,GAAM,CAAE,YAAW,GAAG,KAClC,EAAC,UAAA,CAAQ,YAAU,gBAAgB,UAAW,EAAG,wCAAyC,EAAU,CAAE,GAAI,GAAS,CAC1H,CACF,EAAa,YAAc"}

package/dist/ui/tabs.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`react/jsx-runtime`),r=require(`radix-ui`);function i({className:e,...i}){return(0,n.jsx)(r.Tabs.Root,{"data-slot":`tabs`,className:(0,t.cn)(`flex flex-col gap-2`,e),...i})}function a({className:e,...i}){return(0,n.jsx)(r.Tabs.List,{"data-slot":`tabs-list`,className:(0,t.cn)(`inline-flex h-9 w-fit items-center justify-center gap-x-1 rounded-sm bg-muted-muted p-1`,e),...i})}function o({className:e,...i}){return(0,n.jsx)(r.Tabs.Trigger,{"data-slot":`tabs-trigger`,className:(0,t.cn)(`text-text-positive-weak`,`inline-flex h-[calc(100%-1px)] min-w-32 flex-1 cursor-pointer items-center justify-center gap-1.5`,`rounded-sm`,`whitespace-nowrap border border-transparent px-2 py-1 font-medium text-sm transition`,`data-[state=active]:shadow-card`,`data-[state=active]:bg-background`,`disabled:opacity-50`,`disabled:pointer-events-none`,`focus-visible:border-primary`,`focus-visible:ring-4`,`focus-visible:ring-primary-weak`,`focus-visible:outline-1`,`focus-visible:outline-primary`,`[&_svg]:pointer-events-none`,`[&_svg]:shrink-0`,`[&_svg:not([class*='size-'])]:size-4`,e),...i})}function s({className:e,...i}){return(0,n.jsx)(r.Tabs.Content,{"data-slot":`tabs-content`,className:(0,t.cn)(`flex-1 outline-none`,e),...i})}exports.Tabs=i,exports.TabsContent=s,exports.TabsList=a,exports.TabsTrigger=o;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`react/jsx-runtime`),n=require(`@customafk/react-toolkit/utils`),r=require(`radix-ui`);function i({className:e,...i}){return(0,t.jsx)(r.Tabs.Root,{"data-slot":`tabs`,className:(0,n.cn)(`flex flex-col gap-2`,e),...i})}function a({className:e,...i}){return(0,t.jsx)(r.Tabs.List,{"data-slot":`tabs-list`,className:(0,n.cn)(`inline-flex h-9 w-fit items-center justify-center gap-x-1 rounded-sm bg-muted-muted p-1`,e),...i})}function o({className:e,...i}){return(0,t.jsx)(r.Tabs.Trigger,{"data-slot":`tabs-trigger`,className:(0,n.cn)(`text-text-positive-weak`,`inline-flex h-[calc(100%-1px)] min-w-32 flex-1 cursor-pointer items-center justify-center gap-1.5`,`rounded-sm`,`whitespace-nowrap border border-transparent px-2 py-1 font-medium text-sm transition`,`data-[state=active]:shadow-card`,`data-[state=active]:bg-background`,`disabled:opacity-50`,`disabled:pointer-events-none`,`focus-visible:border-primary`,`focus-visible:ring-4`,`focus-visible:ring-primary-weak`,`focus-visible:outline-1`,`focus-visible:outline-primary`,`[&_svg]:pointer-events-none`,`[&_svg]:shrink-0`,`[&_svg:not([class*='size-'])]:size-4`,e),...i})}function s({className:e,...i}){return(0,t.jsx)(r.Tabs.Content,{"data-slot":`tabs-content`,className:(0,n.cn)(`flex-1 outline-none`,e),...i})}exports.Tabs=i,exports.TabsContent=s,exports.TabsList=a,exports.TabsTrigger=o;
 //# sourceMappingURL=tabs.cjs.map

package/dist/ui/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.cjs","names":["TabsPrimitive"],"sources":["../../packages/components/ui/tabs.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Tabs as TabsPrimitive } from 'radix-ui';\n\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return <TabsPrimitive.Root data-slot=\"tabs\" className={cn('flex flex-col gap-2', className)} {...props} />;\n}\n\nfunction TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn('inline-flex h-9 w-fit items-center justify-center gap-x-1 rounded-sm bg-muted-muted p-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'text-text-positive-weak',\n        'inline-flex h-[calc(100%-1px)] min-w-32 flex-1 cursor-pointer items-center justify-center gap-1.5',\n        'rounded-sm',\n        'whitespace-nowrap border border-transparent px-2 py-1 font-medium text-sm transition',\n        // 'hover:bg-muted-muted/60',\n        'data-[state=active]:shadow-card',\n        'data-[state=active]:bg-background',\n        'disabled:opacity-50',\n        'disabled:pointer-events-none',\n        'focus-visible:border-primary',\n        'focus-visible:ring-4',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:outline-1',\n        'focus-visible:outline-primary',\n        '[&_svg]:pointer-events-none',\n        '[&_svg]:shrink-0',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content data-slot=\"tabs-content\" className={cn('flex-1 outline-none', className)} {...props} />;\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n"],"mappings":"2JAMA,SAAS,EAAK,CAAE,YAAW,GAAG,GAA0D,CACtF,OAAO,EAAA,EAAA,KAACA,EAAAA,KAAc,KAAA,CAAK,YAAU,OAAO,WAAA,EAAA,EAAA,IAAc,sBAAuB,EAAU,CAAE,GAAI,GAAS,CAG5G,SAAS,EAAS,CAAE,YAAW,GAAG,GAA0D,CAC1F,OACE,EAAA,EAAA,KAACA,EAAAA,KAAc,KAAA,CACb,YAAU,YACV,WAAA,EAAA,EAAA,IAAc,0FAA2F,EAAU,CACnH,GAAI,GACJ,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OACE,EAAA,EAAA,KAACA,EAAAA,KAAc,QAAA,CACb,YAAU,eACV,WAAA,EAAA,EAAA,IACE,0BACA,oGACA,aACA,uFAEA,kCACA,oCACA,sBACA,+BACA,+BACA,uBACA,kCACA,0BACA,gCACA,8BACA,mBACA,uCACA,EACD,CACD,GAAI,GACJ,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OAAO,EAAA,EAAA,KAACA,EAAAA,KAAc,QAAA,CAAQ,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,sBAAuB,EAAU,CAAE,GAAI,GAAS"}
+{"version":3,"file":"tabs.cjs","names":["TabsPrimitive"],"sources":["../../packages/components/ui/tabs.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Tabs as TabsPrimitive } from 'radix-ui';\n\n/**\n * Keyboard-accessible tabbed panel built on Radix UI's Tabs primitives, composed from `Tabs`, `TabsList`, `TabsTrigger`, and `TabsContent`.\n *\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@customafk/lunas-ui/ui/tabs';\n *\n * <Tabs defaultValue=\"overview\">\n *   <TabsList>\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content here.</TabsContent>\n *   <TabsContent value=\"settings\">Settings content here.</TabsContent>\n * </Tabs>\n * ```\n */\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return <TabsPrimitive.Root data-slot=\"tabs\" className={cn('flex flex-col gap-2', className)} {...props} />;\n}\n\n/** Container that holds the row of `TabsTrigger` buttons with a muted background pill style. */\nfunction TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn('inline-flex h-9 w-fit items-center justify-center gap-x-1 rounded-sm bg-muted-muted p-1', className)}\n      {...props}\n    />\n  );\n}\n\n/** Individual tab button that activates its associated `TabsContent` panel when clicked. */\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'text-text-positive-weak',\n        'inline-flex h-[calc(100%-1px)] min-w-32 flex-1 cursor-pointer items-center justify-center gap-1.5',\n        'rounded-sm',\n        'whitespace-nowrap border border-transparent px-2 py-1 font-medium text-sm transition',\n        // 'hover:bg-muted-muted/60',\n        'data-[state=active]:shadow-card',\n        'data-[state=active]:bg-background',\n        'disabled:opacity-50',\n        'disabled:pointer-events-none',\n        'focus-visible:border-primary',\n        'focus-visible:ring-4',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:outline-1',\n        'focus-visible:outline-primary',\n        '[&_svg]:pointer-events-none',\n        '[&_svg]:shrink-0',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Panel whose visibility is controlled by the active `TabsTrigger`; each panel must have a matching `value`. */\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content data-slot=\"tabs-content\" className={cn('flex-1 outline-none', className)} {...props} />;\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n"],"mappings":"2JAuBA,SAAS,EAAK,CAAE,YAAW,GAAG,GAA0D,CACtF,OAAO,EAAA,EAAA,KAACA,EAAAA,KAAc,KAAA,CAAK,YAAU,OAAO,WAAA,EAAA,EAAA,IAAc,sBAAuB,EAAU,CAAE,GAAI,GAAS,CAI5G,SAAS,EAAS,CAAE,YAAW,GAAG,GAA0D,CAC1F,OACE,EAAA,EAAA,KAACA,EAAAA,KAAc,KAAA,CACb,YAAU,YACV,WAAA,EAAA,EAAA,IAAc,0FAA2F,EAAU,CACnH,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OACE,EAAA,EAAA,KAACA,EAAAA,KAAc,QAAA,CACb,YAAU,eACV,WAAA,EAAA,EAAA,IACE,0BACA,oGACA,aACA,uFAEA,kCACA,oCACA,sBACA,+BACA,+BACA,uBACA,kCACA,0BACA,gCACA,8BACA,mBACA,uCACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OAAO,EAAA,EAAA,KAACA,EAAAA,KAAc,QAAA,CAAQ,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,sBAAuB,EAAU,CAAE,GAAI,GAAS"}

package/dist/ui/tabs.d.cts

@@ -1,23 +1,44 @@
-import * as react_jsx_runtime248 from "react/jsx-runtime";
+import * as react_jsx_runtime253 from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "radix-ui";
 
 //#region packages/components/ui/tabs.d.ts
+
+/**
+ * Keyboard-accessible tabbed panel built on Radix UI's Tabs primitives, composed from `Tabs`, `TabsList`, `TabsTrigger`, and `TabsContent`.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@customafk/lunas-ui/ui/tabs';
+ *
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="settings">Settings</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">Overview content here.</TabsContent>
+ *   <TabsContent value="settings">Settings content here.</TabsContent>
+ * </Tabs>
+ * ```
+ */
 declare function Tabs({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime248.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime253.JSX.Element;
+/** Container that holds the row of `TabsTrigger` buttons with a muted background pill style. */
 declare function TabsList({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.List>): react_jsx_runtime248.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.List>): react_jsx_runtime253.JSX.Element;
+/** Individual tab button that activates its associated `TabsContent` panel when clicked. */
 declare function TabsTrigger({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime248.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime253.JSX.Element;
+/** Panel whose visibility is controlled by the active `TabsTrigger`; each panel must have a matching `value`. */
 declare function TabsContent({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime248.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime253.JSX.Element;
 //#endregion
 export { Tabs, TabsContent, TabsList, TabsTrigger };
 //# sourceMappingURL=tabs.d.cts.map

package/dist/ui/tabs.d.mts

@@ -1,23 +1,44 @@
-import * as react_jsx_runtime109 from "react/jsx-runtime";
+import * as react_jsx_runtime170 from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "radix-ui";
 
 //#region packages/components/ui/tabs.d.ts
+
+/**
+ * Keyboard-accessible tabbed panel built on Radix UI's Tabs primitives, composed from `Tabs`, `TabsList`, `TabsTrigger`, and `TabsContent`.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@customafk/lunas-ui/ui/tabs';
+ *
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="settings">Settings</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">Overview content here.</TabsContent>
+ *   <TabsContent value="settings">Settings content here.</TabsContent>
+ * </Tabs>
+ * ```
+ */
 declare function Tabs({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime109.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime170.JSX.Element;
+/** Container that holds the row of `TabsTrigger` buttons with a muted background pill style. */
 declare function TabsList({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.List>): react_jsx_runtime109.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.List>): react_jsx_runtime170.JSX.Element;
+/** Individual tab button that activates its associated `TabsContent` panel when clicked. */
 declare function TabsTrigger({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime109.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime170.JSX.Element;
+/** Panel whose visibility is controlled by the active `TabsTrigger`; each panel must have a matching `value`. */
 declare function TabsContent({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime109.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime170.JSX.Element;
 //#endregion
 export { Tabs, TabsContent, TabsList, TabsTrigger };
 //# sourceMappingURL=tabs.d.mts.map

package/dist/ui/tabs.mjs

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t}from"react/jsx-runtime";import{Tabs as n}from"radix-ui";function r({className:r,...i}){return t(n.Root,{"data-slot":`tabs`,className:e(`flex flex-col gap-2`,r),...i})}function i({className:r,...i}){return t(n.List,{"data-slot":`tabs-list`,className:e(`inline-flex h-9 w-fit items-center justify-center gap-x-1 rounded-sm bg-muted-muted p-1`,r),...i})}function a({className:r,...i}){return t(n.Trigger,{"data-slot":`tabs-trigger`,className:e(`text-text-positive-weak`,`inline-flex h-[calc(100%-1px)] min-w-32 flex-1 cursor-pointer items-center justify-center gap-1.5`,`rounded-sm`,`whitespace-nowrap border border-transparent px-2 py-1 font-medium text-sm transition`,`data-[state=active]:shadow-card`,`data-[state=active]:bg-background`,`disabled:opacity-50`,`disabled:pointer-events-none`,`focus-visible:border-primary`,`focus-visible:ring-4`,`focus-visible:ring-primary-weak`,`focus-visible:outline-1`,`focus-visible:outline-primary`,`[&_svg]:pointer-events-none`,`[&_svg]:shrink-0`,`[&_svg:not([class*='size-'])]:size-4`,r),...i})}function o({className:r,...i}){return t(n.Content,{"data-slot":`tabs-content`,className:e(`flex-1 outline-none`,r),...i})}export{r as Tabs,o as TabsContent,i as TabsList,a as TabsTrigger};
+"use client";import{jsx as e}from"react/jsx-runtime";import{cn as t}from"@customafk/react-toolkit/utils";import{Tabs as n}from"radix-ui";function r({className:r,...i}){return e(n.Root,{"data-slot":`tabs`,className:t(`flex flex-col gap-2`,r),...i})}function i({className:r,...i}){return e(n.List,{"data-slot":`tabs-list`,className:t(`inline-flex h-9 w-fit items-center justify-center gap-x-1 rounded-sm bg-muted-muted p-1`,r),...i})}function a({className:r,...i}){return e(n.Trigger,{"data-slot":`tabs-trigger`,className:t(`text-text-positive-weak`,`inline-flex h-[calc(100%-1px)] min-w-32 flex-1 cursor-pointer items-center justify-center gap-1.5`,`rounded-sm`,`whitespace-nowrap border border-transparent px-2 py-1 font-medium text-sm transition`,`data-[state=active]:shadow-card`,`data-[state=active]:bg-background`,`disabled:opacity-50`,`disabled:pointer-events-none`,`focus-visible:border-primary`,`focus-visible:ring-4`,`focus-visible:ring-primary-weak`,`focus-visible:outline-1`,`focus-visible:outline-primary`,`[&_svg]:pointer-events-none`,`[&_svg]:shrink-0`,`[&_svg:not([class*='size-'])]:size-4`,r),...i})}function o({className:r,...i}){return e(n.Content,{"data-slot":`tabs-content`,className:t(`flex-1 outline-none`,r),...i})}export{r as Tabs,o as TabsContent,i as TabsList,a as TabsTrigger};
 //# sourceMappingURL=tabs.mjs.map

package/dist/ui/tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.mjs","names":["TabsPrimitive"],"sources":["../../packages/components/ui/tabs.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Tabs as TabsPrimitive } from 'radix-ui';\n\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return <TabsPrimitive.Root data-slot=\"tabs\" className={cn('flex flex-col gap-2', className)} {...props} />;\n}\n\nfunction TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn('inline-flex h-9 w-fit items-center justify-center gap-x-1 rounded-sm bg-muted-muted p-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'text-text-positive-weak',\n        'inline-flex h-[calc(100%-1px)] min-w-32 flex-1 cursor-pointer items-center justify-center gap-1.5',\n        'rounded-sm',\n        'whitespace-nowrap border border-transparent px-2 py-1 font-medium text-sm transition',\n        // 'hover:bg-muted-muted/60',\n        'data-[state=active]:shadow-card',\n        'data-[state=active]:bg-background',\n        'disabled:opacity-50',\n        'disabled:pointer-events-none',\n        'focus-visible:border-primary',\n        'focus-visible:ring-4',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:outline-1',\n        'focus-visible:outline-primary',\n        '[&_svg]:pointer-events-none',\n        '[&_svg]:shrink-0',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content data-slot=\"tabs-content\" className={cn('flex-1 outline-none', className)} {...props} />;\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n"],"mappings":"yIAMA,SAAS,EAAK,CAAE,YAAW,GAAG,GAA0D,CACtF,OAAO,EAACA,EAAc,KAAA,CAAK,YAAU,OAAO,UAAW,EAAG,sBAAuB,EAAU,CAAE,GAAI,GAAS,CAG5G,SAAS,EAAS,CAAE,YAAW,GAAG,GAA0D,CAC1F,OACE,EAACA,EAAc,KAAA,CACb,YAAU,YACV,UAAW,EAAG,0FAA2F,EAAU,CACnH,GAAI,GACJ,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OACE,EAACA,EAAc,QAAA,CACb,YAAU,eACV,UAAW,EACT,0BACA,oGACA,aACA,uFAEA,kCACA,oCACA,sBACA,+BACA,+BACA,uBACA,kCACA,0BACA,gCACA,8BACA,mBACA,uCACA,EACD,CACD,GAAI,GACJ,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OAAO,EAACA,EAAc,QAAA,CAAQ,YAAU,eAAe,UAAW,EAAG,sBAAuB,EAAU,CAAE,GAAI,GAAS"}
+{"version":3,"file":"tabs.mjs","names":["TabsPrimitive"],"sources":["../../packages/components/ui/tabs.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Tabs as TabsPrimitive } from 'radix-ui';\n\n/**\n * Keyboard-accessible tabbed panel built on Radix UI's Tabs primitives, composed from `Tabs`, `TabsList`, `TabsTrigger`, and `TabsContent`.\n *\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@customafk/lunas-ui/ui/tabs';\n *\n * <Tabs defaultValue=\"overview\">\n *   <TabsList>\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content here.</TabsContent>\n *   <TabsContent value=\"settings\">Settings content here.</TabsContent>\n * </Tabs>\n * ```\n */\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return <TabsPrimitive.Root data-slot=\"tabs\" className={cn('flex flex-col gap-2', className)} {...props} />;\n}\n\n/** Container that holds the row of `TabsTrigger` buttons with a muted background pill style. */\nfunction TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn('inline-flex h-9 w-fit items-center justify-center gap-x-1 rounded-sm bg-muted-muted p-1', className)}\n      {...props}\n    />\n  );\n}\n\n/** Individual tab button that activates its associated `TabsContent` panel when clicked. */\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'text-text-positive-weak',\n        'inline-flex h-[calc(100%-1px)] min-w-32 flex-1 cursor-pointer items-center justify-center gap-1.5',\n        'rounded-sm',\n        'whitespace-nowrap border border-transparent px-2 py-1 font-medium text-sm transition',\n        // 'hover:bg-muted-muted/60',\n        'data-[state=active]:shadow-card',\n        'data-[state=active]:bg-background',\n        'disabled:opacity-50',\n        'disabled:pointer-events-none',\n        'focus-visible:border-primary',\n        'focus-visible:ring-4',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:outline-1',\n        'focus-visible:outline-primary',\n        '[&_svg]:pointer-events-none',\n        '[&_svg]:shrink-0',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Panel whose visibility is controlled by the active `TabsTrigger`; each panel must have a matching `value`. */\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content data-slot=\"tabs-content\" className={cn('flex-1 outline-none', className)} {...props} />;\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n"],"mappings":"yIAuBA,SAAS,EAAK,CAAE,YAAW,GAAG,GAA0D,CACtF,OAAO,EAACA,EAAc,KAAA,CAAK,YAAU,OAAO,UAAW,EAAG,sBAAuB,EAAU,CAAE,GAAI,GAAS,CAI5G,SAAS,EAAS,CAAE,YAAW,GAAG,GAA0D,CAC1F,OACE,EAACA,EAAc,KAAA,CACb,YAAU,YACV,UAAW,EAAG,0FAA2F,EAAU,CACnH,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OACE,EAACA,EAAc,QAAA,CACb,YAAU,eACV,UAAW,EACT,0BACA,oGACA,aACA,uFAEA,kCACA,oCACA,sBACA,+BACA,+BACA,uBACA,kCACA,0BACA,gCACA,8BACA,mBACA,uCACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OAAO,EAACA,EAAc,QAAA,CAAQ,YAAU,eAAe,UAAW,EAAG,sBAAuB,EAAU,CAAE,GAAI,GAAS"}

package/dist/ui/textarea.cjs

@@ -1 +1 @@
-"use client";const e=require(`../textarea-COQoSVSc.cjs`);exports.Textarea=e.t;
+"use client";const e=require(`../textarea-BsgmN4jy.cjs`);exports.Textarea=e.t;

package/dist/ui/textarea.d.cts

@@ -1,14 +1,30 @@
-import * as react_jsx_runtime243 from "react/jsx-runtime";
+import * as react_jsx_runtime280 from "react/jsx-runtime";
 
 //#region packages/components/ui/textarea.d.ts
+
+/**
+ * Styled multi-line text area built on the native `<textarea>` element with resize, focus, and validation state styles.
+ *
+ * @example
+ * ```tsx
+ * import { Textarea } from '@customafk/lunas-ui/ui/textarea';
+ *
+ * <Textarea
+ *   placeholder="Write a description…"
+ *   rows={4}
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
 declare function Textarea({
   className,
   onChange,
   onValueChange,
   ...props
 }: React.ComponentProps<'textarea'> & {
+  /** Convenience callback that receives the raw string value on every change, bypassing the synthetic event. */
   onValueChange?: (value: string) => void;
-}): react_jsx_runtime243.JSX.Element;
+}): react_jsx_runtime280.JSX.Element;
 //#endregion
 export { Textarea };
 //# sourceMappingURL=textarea.d.cts.map

package/dist/ui/textarea.d.mts

@@ -1,14 +1,30 @@
-import * as react_jsx_runtime87 from "react/jsx-runtime";
+import * as react_jsx_runtime196 from "react/jsx-runtime";
 
 //#region packages/components/ui/textarea.d.ts
+
+/**
+ * Styled multi-line text area built on the native `<textarea>` element with resize, focus, and validation state styles.
+ *
+ * @example
+ * ```tsx
+ * import { Textarea } from '@customafk/lunas-ui/ui/textarea';
+ *
+ * <Textarea
+ *   placeholder="Write a description…"
+ *   rows={4}
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
 declare function Textarea({
   className,
   onChange,
   onValueChange,
   ...props
 }: React.ComponentProps<'textarea'> & {
+  /** Convenience callback that receives the raw string value on every change, bypassing the synthetic event. */
   onValueChange?: (value: string) => void;
-}): react_jsx_runtime87.JSX.Element;
+}): react_jsx_runtime196.JSX.Element;
 //#endregion
 export { Textarea };
 //# sourceMappingURL=textarea.d.mts.map

package/dist/ui/textarea.mjs

@@ -1 +1 @@
-"use client";import{t as e}from"../textarea-bLtmb71c.mjs";export{e as Textarea};
+"use client";import{t as e}from"../textarea-CdGSEkZB.mjs";export{e as Textarea};

package/dist/ui/toggle-group.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`./toggle.cjs`);let n=require(`@customafk/react-toolkit/utils`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`radix-ui`);const o=(0,r.createContext)({size:`default`,variant:`default`});function s({className:e,variant:t,size:r,children:s,...c}){return(0,i.jsx)(a.ToggleGroup.Root,{"data-slot":`toggle-group`,"data-variant":t,"data-size":r,className:(0,n.cn)(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,e),...c,children:(0,i.jsx)(o.Provider,{value:{variant:t,size:r},children:s})})}function c({className:e,children:s,variant:c,size:l,...u}){let d=(0,r.use)(o);return(0,i.jsx)(a.ToggleGroup.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:(0,n.cn)(t.toggleVariants({variant:d.variant||c,size:d.size||l}),`min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l`,e),...u,children:s})}exports.ToggleGroup=s,exports.ToggleGroupItem=c;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`./toggle.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`),i=require(`@customafk/react-toolkit/utils`),a=require(`radix-ui`);const o=(0,n.createContext)({size:`default`,variant:`default`});function s({className:e,variant:t,size:n,children:s,...c}){return(0,r.jsx)(a.ToggleGroup.Root,{"data-slot":`toggle-group`,"data-variant":t,"data-size":n,className:(0,i.cn)(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,e),...c,children:(0,r.jsx)(o.Provider,{value:{variant:t,size:n},children:s})})}function c({className:e,children:s,variant:c,size:l,...u}){let d=(0,n.use)(o);return(0,r.jsx)(a.ToggleGroup.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:(0,i.cn)(t.toggleVariants({variant:d.variant||c,size:d.size||l}),`min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l`,e),...u,children:s})}exports.ToggleGroup=s,exports.ToggleGroupItem=c;
 //# sourceMappingURL=toggle-group.cjs.map

package/dist/ui/toggle-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.cjs","names":["ToggleGroupPrimitive","toggleVariants"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["'use client';\nimport { createContext, use } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';\nimport { toggleVariants } from '@/components/ui/toggle';\n\nconst ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({\n  size: 'default',\n  variant: 'default',\n});\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', className)}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  );\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {\n  const context = use(ToggleGroupContext);\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":"wMASA,MAAM,GAAA,EAAA,EAAA,eAAwE,CAC5E,KAAM,UACN,QAAS,UACV,CAAC,CAEF,SAAS,EAAY,CACnB,YACA,UACA,OACA,WACA,GAAG,GAC4F,CAC/F,OACE,EAAA,EAAA,KAACA,EAAAA,YAAqB,KAAA,CACpB,YAAU,eACV,eAAc,EACd,YAAW,EACX,WAAA,EAAA,EAAA,IAAc,yFAA0F,EAAU,CAClH,GAAI,YAEJ,EAAA,EAAA,KAAC,EAAmB,SAAA,CAAS,MAAO,CAAE,UAAS,OAAM,CAAG,YAAuC,EACrE,CAIhC,SAAS,EAAgB,CACvB,YACA,WACA,UACA,OACA,GAAG,GAC4F,CAC/F,IAAM,GAAA,EAAA,EAAA,KAAc,EAAmB,CAEvC,OACE,EAAA,EAAA,KAACA,EAAAA,YAAqB,KAAA,CACpB,YAAU,oBACV,eAAc,EAAQ,SAAW,EACjC,YAAW,EAAQ,MAAQ,EAC3B,WAAA,EAAA,EAAA,IACEC,EAAAA,eAAe,CACb,QAAS,EAAQ,SAAW,EAC5B,KAAM,EAAQ,MAAQ,EACvB,CAAC,CACF,8LACA,EACD,CACD,GAAI,EAEH,YACyB"}
+{"version":3,"file":"toggle-group.cjs","names":["ToggleGroupPrimitive","toggleVariants"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["'use client';\nimport { createContext, use } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';\nimport { toggleVariants } from '@/components/ui/toggle';\n\nconst ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({\n  size: 'default',\n  variant: 'default',\n});\n\n/**\n * A group of connected Toggle buttons where one or multiple items can be active at a time.\n *\n * @example\n * ```tsx\n * import { ToggleGroup, ToggleGroupItem } from '@customafk/lunas-ui/ui/toggle-group';\n *\n * <ToggleGroup type=\"single\" variant=\"outline\">\n *   <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n *   <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n *   <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n * </ToggleGroup>\n * ```\n */\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', className)}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  );\n}\n\n/** A single item/button within a ToggleGroup that inherits the group's variant and size. */\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {\n  const context = use(ToggleGroupContext);\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":"wMASA,MAAM,GAAA,EAAA,EAAA,eAAwE,CAC5E,KAAM,UACN,QAAS,UACV,CAAC,CAgBF,SAAS,EAAY,CACnB,YACA,UACA,OACA,WACA,GAAG,GAC4F,CAC/F,OACE,EAAA,EAAA,KAACA,EAAAA,YAAqB,KAAA,CACpB,YAAU,eACV,eAAc,EACd,YAAW,EACX,WAAA,EAAA,EAAA,IAAc,yFAA0F,EAAU,CAClH,GAAI,YAEJ,EAAA,EAAA,KAAC,EAAmB,SAAA,CAAS,MAAO,CAAE,UAAS,OAAM,CAAG,YAAuC,EACrE,CAKhC,SAAS,EAAgB,CACvB,YACA,WACA,UACA,OACA,GAAG,GAC4F,CAC/F,IAAM,GAAA,EAAA,EAAA,KAAc,EAAmB,CAEvC,OACE,EAAA,EAAA,KAACA,EAAAA,YAAqB,KAAA,CACpB,YAAU,oBACV,eAAc,EAAQ,SAAW,EACjC,YAAW,EAAQ,MAAQ,EAC3B,WAAA,EAAA,EAAA,IACEC,EAAAA,eAAe,CACb,QAAS,EAAQ,SAAW,EAC5B,KAAM,EAAQ,MAAQ,EACvB,CAAC,CACF,8LACA,EACD,CACD,GAAI,EAEH,YACyB"}

package/dist/ui/toggle-group.d.cts

@@ -1,23 +1,39 @@
 import { toggleVariants } from "./toggle.cjs";
-import * as react_jsx_runtime286 from "react/jsx-runtime";
+import * as react_jsx_runtime281 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
 
 //#region packages/components/ui/toggle-group.d.ts
+
+/**
+ * A group of connected Toggle buttons where one or multiple items can be active at a time.
+ *
+ * @example
+ * ```tsx
+ * import { ToggleGroup, ToggleGroupItem } from '@customafk/lunas-ui/ui/toggle-group';
+ *
+ * <ToggleGroup type="single" variant="outline">
+ *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
+ *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
+ *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
 declare function ToggleGroup({
   className,
   variant,
   size,
   children,
   ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime286.JSX.Element;
+}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime281.JSX.Element;
+/** A single item/button within a ToggleGroup that inherits the group's variant and size. */
 declare function ToggleGroupItem({
   className,
   children,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime286.JSX.Element;
+}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime281.JSX.Element;
 //#endregion
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.cts.map