@brycks/core-front 0.3.6 → 0.5.0

package/dist/components/data/Table/Table.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("react"),p=require("../../../utils/styles.cjs"),g=require("../../../design-system/tokens/motion.cjs"),l=require("../../../design-system/primitives/sizing.cjs"),v=require("../../../design-system/tokens/spacing.cjs"),m=require("../../../design-system/tokens/typography.cjs"),S=u.createContext({size:"md",variant:"default",stickyHeader:!1});function x(){return u.useContext(S)}const T={sm:{fontSize:m.fontSizes.base-1,paddingY:l.componentPaddingY.md,paddingX:l.componentPaddingX.sm,headerPaddingY:l.componentPaddingY.md,headerPaddingX:l.componentPaddingX.sm},md:{fontSize:m.fontSizes.base,paddingY:l.componentPaddingX.sm,paddingX:l.componentPaddingX.md,headerPaddingY:l.componentPaddingX.sm,headerPaddingX:l.componentPaddingX.md},lg:{fontSize:m.fontSizes.base+1,paddingY:l.componentPaddingX.md,paddingX:l.componentPaddingX.lg,headerPaddingY:v.spacing[3.5],headerPaddingX:l.componentPaddingX.lg}},C=u.forwardRef(function({size:t="md",variant:e="default",stickyHeader:r=!1,loading:a=!1,className:n,style:s,children:d,testId:i,...y},b){const f={position:"relative",width:"100%",overflow:"auto",...s},h={width:"100%",borderCollapse:e==="bordered"?"separate":"collapse",borderSpacing:0,fontSize:T[t].fontSize,fontVariantNumeric:"tabular-nums",opacity:a?.6:1,transition:`opacity ${g.durations.quick}ms ${g.easings.easeOut}`};return o.jsx(S.Provider,{value:{size:t,variant:e,stickyHeader:r},children:o.jsx("div",{className:"brycks-table-container",style:f,children:o.jsx("table",{ref:b,className:p.cx("brycks-table",`brycks-table--${t}`,`brycks-table--${e}`,n),style:h,"aria-busy":a||void 0,"data-testid":i,...y,children:d})})})});C.displayName="Table";const j=u.forwardRef(function({sticky:t=!1,className:e,style:r,children:a,...n},s){const{stickyHeader:d}=x(),i=t||d,y={backgroundColor:"var(--brycks-background-muted)",position:i?"sticky":void 0,top:i?0:void 0,zIndex:i?1:void 0,...r};return o.jsx("thead",{ref:s,className:p.cx("brycks-table-head",i&&"brycks-table-head--sticky",e),style:y,...n,children:a})});j.displayName="TableHead";const P=u.forwardRef(function({className:t,style:e,children:r,...a},n){const s={...e};return o.jsx("tbody",{ref:n,className:p.cx("brycks-table-body",t),style:s,...a,children:r})});P.displayName="TableBody";const N=u.forwardRef(function({selected:t=!1,clickable:e=!1,className:r,style:a,children:n,...s},d){const{variant:i}=x(),y={backgroundColor:t?"var(--brycks-primary-muted)":"transparent",borderBottom:i!=="bordered"?"1px solid var(--brycks-border-muted)":void 0,cursor:e?"pointer":void 0,transition:`background-color ${g.durations.quick}ms ${g.easings.easeOut}`,...a};return o.jsx("tr",{ref:d,className:p.cx("brycks-table-row",t&&"brycks-table-row--selected",e&&"brycks-table-row--clickable",r),style:y,onMouseEnter:b=>{e&&!t&&(b.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:b=>{t||(b.currentTarget.style.backgroundColor="transparent")},...s,children:n})});N.displayName="TableRow";function q({direction:c}){return c?o.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","aria-hidden":"true",children:c==="asc"?o.jsx("path",{d:"M7 3L10 6H4L7 3Z",fill:"currentColor"}):o.jsx("path",{d:"M7 11L4 8H10L7 11Z",fill:"currentColor"})}):o.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",style:{opacity:.4},"aria-hidden":"true",children:[o.jsx("path",{d:"M7 3L10 6H4L7 3Z",fill:"currentColor"}),o.jsx("path",{d:"M7 11L4 8H10L7 11Z",fill:"currentColor"})]})}const X=u.forwardRef(function({sortable:t=!1,sortDirection:e=null,onSort:r,align:a="left",className:n,style:s,children:d,...i},y){const{size:b}=x(),f=T[b],h={padding:`${f.headerPaddingY}px ${f.headerPaddingX}px`,fontWeight:600,color:"var(--brycks-foreground-muted)",textAlign:a,whiteSpace:"nowrap",transition:`color ${g.durations.quick}ms ${g.easings.easeOut}`,...s},w={display:"flex",alignItems:"center",gap:l.componentGap.sm,justifyContent:a==="right"?"flex-end":a==="center"?"center":"flex-start"},$={...w,width:"100%",padding:0,background:"transparent",border:"none",font:"inherit",fontWeight:"inherit",color:"inherit",cursor:"pointer",userSelect:"none"};return o.jsx("th",{ref:y,"aria-sort":t?e==="asc"?"ascending":e==="desc"?"descending":"none":void 0,className:p.cx("brycks-table-header",t&&"brycks-table-header--sortable",n),style:h,...i,children:t?o.jsxs("button",{type:"button",style:$,onClick:()=>r?.(),onMouseEnter:k=>{k.currentTarget.style.color="var(--brycks-foreground-default)"},onMouseLeave:k=>{k.currentTarget.style.color="inherit"},children:[d,o.jsx(q,{direction:e})]}):o.jsx("span",{style:w,children:d})})});X.displayName="TableHeader";const z=u.forwardRef(function({align:t="left",truncate:e=!1,className:r,style:a,children:n,...s},d){const{size:i,variant:y}=x(),b=T[i],f={padding:`${b.paddingY}px ${b.paddingX}px`,color:"var(--brycks-foreground-default)",textAlign:t,verticalAlign:"middle",border:y==="bordered"?"1px solid var(--brycks-border-muted)":void 0,maxWidth:e?200:void 0,overflow:e?"hidden":void 0,textOverflow:e?"ellipsis":void 0,whiteSpace:e?"nowrap":void 0,...a};return o.jsx("td",{ref:d,className:p.cx("brycks-table-cell",e&&"brycks-table-cell--truncate",r),style:f,title:e&&typeof n=="string"?n:void 0,...s,children:n})});z.displayName="TableCell";const H=u.forwardRef(function({className:t,style:e,children:r,...a},n){const s={backgroundColor:"var(--brycks-background-muted)",fontWeight:500,...e};return o.jsx("tfoot",{ref:n,className:p.cx("brycks-table-foot",t),style:s,...a,children:r})});H.displayName="TableFoot";const R=u.forwardRef(function({placement:t="bottom",className:e,style:r,children:a,...n},s){const d={captionSide:t,padding:`${v.spacing[3]}px ${v.spacing[4]}px`,fontSize:m.fontSizes.base-1,color:"var(--brycks-foreground-muted)",textAlign:"left",...r};return o.jsx("caption",{ref:s,className:p.cx("brycks-table-caption",e),style:d,...n,children:a})});R.displayName="TableCaption";exports.Table=C;exports.TableBody=P;exports.TableCaption=R;exports.TableCell=z;exports.TableFoot=H;exports.TableHead=j;exports.TableHeader=X;exports.TableRow=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),u=require("../../../utils/styles.cjs"),M=require("../../utility/EmptyState/EmptyState.cjs"),B=require("../../utility/Skeleton/Skeleton.cjs"),g=require("../../../design-system/tokens/motion.cjs"),c=require("../../../design-system/primitives/sizing.cjs"),T=require("../../../design-system/tokens/spacing.cjs"),m=require("../../../design-system/tokens/typography.cjs"),N=b.createContext({size:"md",variant:"default",stickyHeader:!1});function x(){return b.useContext(N)}const v={sm:{fontSize:m.fontSizes.base-1,paddingY:c.componentPaddingY.md,paddingX:c.componentPaddingX.sm,headerPaddingY:c.componentPaddingY.md,headerPaddingX:c.componentPaddingX.sm},md:{fontSize:m.fontSizes.base,paddingY:c.componentPaddingX.sm,paddingX:c.componentPaddingX.md,headerPaddingY:c.componentPaddingX.sm,headerPaddingX:c.componentPaddingX.md},lg:{fontSize:m.fontSizes.base+1,paddingY:c.componentPaddingX.md,paddingX:c.componentPaddingX.lg,headerPaddingY:T.spacing[3.5],headerPaddingX:c.componentPaddingX.lg}},P=b.forwardRef(function({size:a="md",variant:e="default",stickyHeader:s=!1,loading:o=!1,className:n,style:r,children:d,testId:l,...p},y){const f={position:"relative",width:"100%",overflow:"auto",...r},h={width:"100%",borderCollapse:e==="bordered"?"separate":"collapse",borderSpacing:0,fontSize:v[a].fontSize,fontVariantNumeric:"tabular-nums",opacity:o?.6:1,transition:`opacity ${g.durations.quick}ms ${g.easings.easeOut}`};return t.jsx(N.Provider,{value:{size:a,variant:e,stickyHeader:s},children:t.jsx("div",{className:"brycks-table-container",style:f,children:t.jsx("table",{ref:y,className:u.cx("brycks-table",`brycks-table--${a}`,`brycks-table--${e}`,n),style:h,"aria-busy":o||void 0,"data-testid":l,...p,children:d})})})});P.displayName="Table";const X=b.forwardRef(function({sticky:a=!1,className:e,style:s,children:o,...n},r){const{stickyHeader:d}=x(),l=a||d,p={backgroundColor:"var(--brycks-background-muted)",position:l?"sticky":void 0,top:l?0:void 0,zIndex:l?1:void 0,...s};return t.jsx("thead",{ref:r,className:u.cx("brycks-table-head",l&&"brycks-table-head--sticky",e),style:p,...n,children:o})});X.displayName="TableHead";const R=b.forwardRef(function({className:a,style:e,children:s,...o},n){const r={...e};return t.jsx("tbody",{ref:n,className:u.cx("brycks-table-body",a),style:r,...o,children:s})});R.displayName="TableBody";const S=b.forwardRef(function({selected:a=!1,clickable:e=!1,className:s,style:o,children:n,...r},d){const{variant:l}=x(),p={backgroundColor:a?"var(--brycks-primary-muted)":"transparent",borderBottom:l!=="bordered"?"1px solid var(--brycks-border-muted)":void 0,cursor:e?"pointer":void 0,transition:`background-color ${g.durations.quick}ms ${g.easings.easeOut}`,...o};return t.jsx("tr",{ref:d,className:u.cx("brycks-table-row",a&&"brycks-table-row--selected",e&&"brycks-table-row--clickable",s),style:p,onMouseEnter:y=>{e&&!a&&(y.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:y=>{a||(y.currentTarget.style.backgroundColor="transparent")},...r,children:n})});S.displayName="TableRow";function E({direction:i}){return i?t.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","aria-hidden":"true",children:i==="asc"?t.jsx("path",{d:"M7 3L10 6H4L7 3Z",fill:"currentColor"}):t.jsx("path",{d:"M7 11L4 8H10L7 11Z",fill:"currentColor"})}):t.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",style:{opacity:.4},"aria-hidden":"true",children:[t.jsx("path",{d:"M7 3L10 6H4L7 3Z",fill:"currentColor"}),t.jsx("path",{d:"M7 11L4 8H10L7 11Z",fill:"currentColor"})]})}const z=b.forwardRef(function({sortable:a=!1,sortDirection:e=null,onSort:s,align:o="left",className:n,style:r,children:d,...l},p){const{size:y}=x(),f=v[y],h={padding:`${f.headerPaddingY}px ${f.headerPaddingX}px`,fontWeight:600,color:"var(--brycks-foreground-muted)",textAlign:o,whiteSpace:"nowrap",transition:`color ${g.durations.quick}ms ${g.easings.easeOut}`,...r},j={display:"flex",alignItems:"center",gap:c.componentGap.sm,justifyContent:o==="right"?"flex-end":o==="center"?"center":"flex-start"},Y={...j,width:"100%",padding:0,background:"transparent",border:"none",font:"inherit",fontWeight:"inherit",color:"inherit",cursor:"pointer",userSelect:"none"};return t.jsx("th",{ref:p,"aria-sort":a?e==="asc"?"ascending":e==="desc"?"descending":"none":void 0,className:u.cx("brycks-table-header",a&&"brycks-table-header--sortable",n),style:h,...l,children:a?t.jsxs("button",{type:"button",style:Y,onClick:()=>s?.(),onMouseEnter:k=>{k.currentTarget.style.color="var(--brycks-foreground-default)"},onMouseLeave:k=>{k.currentTarget.style.color="inherit"},children:[d,t.jsx(E,{direction:e})]}):t.jsx("span",{style:j,children:d})})});z.displayName="TableHeader";const w=b.forwardRef(function({align:a="left",truncate:e=!1,className:s,style:o,children:n,...r},d){const{size:l,variant:p}=x(),y=v[l],f={padding:`${y.paddingY}px ${y.paddingX}px`,color:"var(--brycks-foreground-default)",textAlign:a,verticalAlign:"middle",border:p==="bordered"?"1px solid var(--brycks-border-muted)":void 0,maxWidth:e?200:void 0,overflow:e?"hidden":void 0,textOverflow:e?"ellipsis":void 0,whiteSpace:e?"nowrap":void 0,...o};return t.jsx("td",{ref:d,className:u.cx("brycks-table-cell",e&&"brycks-table-cell--truncate",s),style:f,title:e&&typeof n=="string"?n:void 0,...r,children:n})});w.displayName="TableCell";const H=b.forwardRef(function({className:a,style:e,children:s,...o},n){const r={backgroundColor:"var(--brycks-background-muted)",fontWeight:500,...e};return t.jsx("tfoot",{ref:n,className:u.cx("brycks-table-foot",a),style:r,...o,children:s})});H.displayName="TableFoot";const $=b.forwardRef(function({placement:a="bottom",className:e,style:s,children:o,...n},r){const d={captionSide:a,padding:`${T.spacing[3]}px ${T.spacing[4]}px`,fontSize:m.fontSizes.base-1,color:"var(--brycks-foreground-muted)",textAlign:"left",...s};return t.jsx("caption",{ref:r,className:u.cx("brycks-table-caption",e),style:d,...n,children:o})});$.displayName="TableCaption";const q=b.forwardRef(function({colSpan:a,icon:e,title:s,description:o,action:n,className:r},d){return t.jsx("tr",{ref:d,className:u.cx("brycks-table-empty",r),children:t.jsx("td",{colSpan:a,style:{padding:0},children:t.jsx(M.EmptyState,{icon:e,title:s,description:o,action:n})})})});q.displayName="TableEmpty";const C=["70%","45%","85%","55%","60%","40%"];function L({rows:i=5,columns:a,className:e}){return t.jsx(t.Fragment,{children:Array.from({length:i}).map((s,o)=>t.jsx(S,{className:u.cx("brycks-table-skeleton-row",e),"aria-hidden":"true",children:Array.from({length:a}).map((n,r)=>t.jsx(w,{children:t.jsx(B.Skeleton,{variant:"text",width:C[r%C.length]})},r))},o))})}L.displayName="TableSkeleton";exports.Table=P;exports.TableBody=R;exports.TableCaption=$;exports.TableCell=w;exports.TableEmpty=q;exports.TableFoot=H;exports.TableHead=X;exports.TableHeader=z;exports.TableRow=S;exports.TableSkeleton=L;
 //# sourceMappingURL=Table.cjs.map

package/dist/components/data/Table/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","sources":["../../../../src/components/data/Table/Table.tsx"],"sourcesContent":["/**\n * Table Component\n *\n * A flexible table component with sorting, selection, and responsive support.\n * Follows design system patterns for consistent styling.\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ThHTMLAttributes,\n  type TdHTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentGap, componentPaddingX, componentPaddingY } from '../../../design-system/primitives'\n\nexport type TableSize = 'sm' | 'md' | 'lg'\nexport type TableVariant = 'default' | 'striped' | 'bordered'\n\ninterface TableContextValue {\n  size: TableSize\n  variant: TableVariant\n  stickyHeader: boolean\n}\n\nconst TableContext = createContext<TableContextValue>({ size: 'md', variant: 'default', stickyHeader: false })\n\nfunction useTableContext() {\n  return useContext(TableContext)\n}\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  /** Table size */\n  size?: TableSize\n  /** Table variant */\n  variant?: TableVariant\n  /** Whether the table has a sticky header */\n  stickyHeader?: boolean\n  /** Whether the table is in a loading state */\n  loading?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<TableSize, { fontSize: number; paddingY: number; paddingX: number; headerPaddingY: number; headerPaddingX: number }> = {\n  sm: { fontSize: fontSizes.base - 1, paddingY: componentPaddingY.md, paddingX: componentPaddingX.sm, headerPaddingY: componentPaddingY.md, headerPaddingX: componentPaddingX.sm },\n  md: { fontSize: fontSizes.base, paddingY: componentPaddingX.sm, paddingX: componentPaddingX.md, headerPaddingY: componentPaddingX.sm, headerPaddingX: componentPaddingX.md },\n  lg: { fontSize: fontSizes.base + 1, paddingY: componentPaddingX.md, paddingX: componentPaddingX.lg, headerPaddingY: spacing[3.5], headerPaddingX: componentPaddingX.lg },\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  {\n    size = 'md',\n    variant = 'default',\n    stickyHeader = false,\n    loading = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    width: '100%',\n    overflow: 'auto',\n    ...style,\n  }\n\n  const tableStyle: CSSProperties = {\n    width: '100%',\n    borderCollapse: variant === 'bordered' ? 'separate' : 'collapse',\n    borderSpacing: 0,\n    fontSize: sizeConfig[size].fontSize,\n    fontVariantNumeric: 'tabular-nums',\n    opacity: loading ? 0.6 : 1,\n    transition: `opacity ${durations.quick}ms ${easings.easeOut}`,\n  }\n\n  return (\n    <TableContext.Provider value={{ size, variant, stickyHeader }}>\n      <div className=\"brycks-table-container\" style={containerStyle}>\n        <table\n          ref={ref}\n          className={cx('brycks-table', `brycks-table--${size}`, `brycks-table--${variant}`, className)}\n          style={tableStyle}\n          aria-busy={loading || undefined}\n          data-testid={testId}\n          {...props}\n        >\n          {children}\n        </table>\n      </div>\n    </TableContext.Provider>\n  )\n})\n\nTable.displayName = 'Table'\n\n// TableHead\nexport interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Whether the header is sticky */\n  sticky?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(function TableHead(\n  { sticky = false, className, style, children, ...props },\n  ref\n) {\n  const { stickyHeader } = useTableContext()\n  const isSticky = sticky || stickyHeader\n\n  const headStyle: CSSProperties = {\n    backgroundColor: 'var(--brycks-background-muted)',\n    position: isSticky ? 'sticky' : undefined,\n    top: isSticky ? 0 : undefined,\n    zIndex: isSticky ? 1 : undefined,\n    ...style,\n  }\n\n  return (\n    <thead\n      ref={ref}\n      className={cx('brycks-table-head', isSticky && 'brycks-table-head--sticky', className)}\n      style={headStyle}\n      {...props}\n    >\n      {children}\n    </thead>\n  )\n})\n\nTableHead.displayName = 'TableHead'\n\n// TableBody\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(function TableBody(\n  { className, style, children, ...props },\n  ref\n) {\n  const bodyStyle: CSSProperties = {\n    ...style,\n  }\n\n  return (\n    <tbody\n      ref={ref}\n      className={cx('brycks-table-body', className)}\n      style={bodyStyle}\n      {...props}\n    >\n      {children}\n    </tbody>\n  )\n})\n\nTableBody.displayName = 'TableBody'\n\n// TableRow\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  /** Whether the row is selected */\n  selected?: boolean\n  /** Whether the row is clickable */\n  clickable?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(\n  { selected = false, clickable = false, className, style, children, ...props },\n  ref\n) {\n  const { variant } = useTableContext()\n\n  const rowStyle: CSSProperties = {\n    backgroundColor: selected\n      ? 'var(--brycks-primary-muted)'\n      : 'transparent',\n    borderBottom: variant !== 'bordered' ? '1px solid var(--brycks-border-muted)' : undefined,\n    cursor: clickable ? 'pointer' : undefined,\n    transition: `background-color ${durations.quick}ms ${easings.easeOut}`,\n    ...style,\n  }\n\n  return (\n    <tr\n      ref={ref}\n      className={cx(\n        'brycks-table-row',\n        selected && 'brycks-table-row--selected',\n        clickable && 'brycks-table-row--clickable',\n        className\n      )}\n      style={rowStyle}\n      onMouseEnter={(e) => {\n        if (clickable && !selected) {\n          e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!selected) {\n          e.currentTarget.style.backgroundColor = 'transparent'\n        }\n      }}\n      {...props}\n    >\n      {children}\n    </tr>\n  )\n})\n\nTableRow.displayName = 'TableRow'\n\n// TableHeader (th)\nexport interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  /** Whether the column is sortable */\n  sortable?: boolean\n  /** Sort direction */\n  sortDirection?: 'asc' | 'desc' | null\n  /** Callback when sort is requested */\n  onSort?: () => void\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Custom class name */\n  className?: string\n}\n\nfunction SortIcon({ direction }: { direction: 'asc' | 'desc' | null }) {\n  if (!direction) {\n    return (\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" style={{ opacity: 0.4 }} aria-hidden=\"true\">\n        <path d=\"M7 3L10 6H4L7 3Z\" fill=\"currentColor\" />\n        <path d=\"M7 11L4 8H10L7 11Z\" fill=\"currentColor\" />\n      </svg>\n    )\n  }\n\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      {direction === 'asc' ? (\n        <path d=\"M7 3L10 6H4L7 3Z\" fill=\"currentColor\" />\n      ) : (\n        <path d=\"M7 11L4 8H10L7 11Z\" fill=\"currentColor\" />\n      )}\n    </svg>\n  )\n}\n\nexport const TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(function TableHeader(\n  {\n    sortable = false,\n    sortDirection = null,\n    onSort,\n    align = 'left',\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const { size } = useTableContext()\n  const config = sizeConfig[size]\n\n  const headerStyle: CSSProperties = {\n    padding: `${config.headerPaddingY}px ${config.headerPaddingX}px`,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: align,\n    whiteSpace: 'nowrap',\n    transition: `color ${durations.quick}ms ${easings.easeOut}`,\n    ...style,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: componentGap.sm,\n    justifyContent: align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start',\n  }\n\n  // Sorting happens through a real button so it is reachable by keyboard\n  const sortButtonStyle: CSSProperties = {\n    ...contentStyle,\n    width: '100%',\n    padding: 0,\n    background: 'transparent',\n    border: 'none',\n    font: 'inherit',\n    fontWeight: 'inherit',\n    color: 'inherit',\n    cursor: 'pointer',\n    userSelect: 'none',\n  }\n\n  return (\n    <th\n      ref={ref}\n      aria-sort={\n        sortable\n          ? sortDirection === 'asc'\n            ? 'ascending'\n            : sortDirection === 'desc'\n            ? 'descending'\n            : 'none'\n          : undefined\n      }\n      className={cx('brycks-table-header', sortable && 'brycks-table-header--sortable', className)}\n      style={headerStyle}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          style={sortButtonStyle}\n          onClick={() => onSort?.()}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.color = 'inherit'\n          }}\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        <span style={contentStyle}>{children}</span>\n      )}\n    </th>\n  )\n})\n\nTableHeader.displayName = 'TableHeader'\n\n// TableCell (td)\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Whether to truncate text */\n  truncate?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { align = 'left', truncate = false, className, style, children, ...props },\n  ref\n) {\n  const { size, variant } = useTableContext()\n  const config = sizeConfig[size]\n\n  const cellStyle: CSSProperties = {\n    padding: `${config.paddingY}px ${config.paddingX}px`,\n    color: 'var(--brycks-foreground-default)',\n    textAlign: align,\n    verticalAlign: 'middle',\n    border: variant === 'bordered' ? '1px solid var(--brycks-border-muted)' : undefined,\n    maxWidth: truncate ? 200 : undefined,\n    overflow: truncate ? 'hidden' : undefined,\n    textOverflow: truncate ? 'ellipsis' : undefined,\n    whiteSpace: truncate ? 'nowrap' : undefined,\n    ...style,\n  }\n\n  return (\n    <td\n      ref={ref}\n      className={cx('brycks-table-cell', truncate && 'brycks-table-cell--truncate', className)}\n      style={cellStyle}\n      title={truncate && typeof children === 'string' ? children : undefined}\n      {...props}\n    >\n      {children}\n    </td>\n  )\n})\n\nTableCell.displayName = 'TableCell'\n\n// TableFoot\nexport interface TableFootProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>(function TableFoot(\n  { className, style, children, ...props },\n  ref\n) {\n  const footStyle: CSSProperties = {\n    backgroundColor: 'var(--brycks-background-muted)',\n    fontWeight: 500,\n    ...style,\n  }\n\n  return (\n    <tfoot\n      ref={ref}\n      className={cx('brycks-table-foot', className)}\n      style={footStyle}\n      {...props}\n    >\n      {children}\n    </tfoot>\n  )\n})\n\nTableFoot.displayName = 'TableFoot'\n\n// TableCaption\nexport interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {\n  /** Caption placement */\n  placement?: 'top' | 'bottom'\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(function TableCaption(\n  { placement = 'bottom', className, style, children, ...props },\n  ref\n) {\n  const captionStyle: CSSProperties = {\n    captionSide: placement,\n    padding: `${spacing[3]}px ${spacing[4]}px`,\n    fontSize: fontSizes.base - 1,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: 'left',\n    ...style,\n  }\n\n  return (\n    <caption\n      ref={ref}\n      className={cx('brycks-table-caption', className)}\n      style={captionStyle}\n      {...props}\n    >\n      {children}\n    </caption>\n  )\n})\n\nTableCaption.displayName = 'TableCaption'\n"],"names":["TableContext","createContext","useTableContext","useContext","sizeConfig","fontSizes","componentPaddingY","componentPaddingX","spacing","Table","forwardRef","size","variant","stickyHeader","loading","className","style","children","testId","props","ref","containerStyle","tableStyle","durations","easings","jsx","cx","TableHead","sticky","isSticky","headStyle","TableBody","bodyStyle","TableRow","selected","clickable","rowStyle","e","SortIcon","direction","TableHeader","sortable","sortDirection","onSort","align","config","headerStyle","contentStyle","componentGap","sortButtonStyle","jsxs","TableCell","truncate","cellStyle","TableFoot","footStyle","TableCaption","placement","captionStyle"],"mappings":"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"}
+{"version":3,"file":"Table.cjs","sources":["../../../../src/components/data/Table/Table.tsx"],"sourcesContent":["/**\n * Table Component\n *\n * A flexible table component with sorting, selection, and responsive support.\n * Follows design system patterns for consistent styling.\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ThHTMLAttributes,\n  type TdHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentGap, componentPaddingX, componentPaddingY } from '../../../design-system/primitives'\nimport { EmptyState } from '../../utility/EmptyState'\nimport { Skeleton } from '../../utility/Skeleton'\n\nexport type TableSize = 'sm' | 'md' | 'lg'\n// `striped` was dead API (no CSS, incompatible with inline row styling) — removed in 0.5.0.\nexport type TableVariant = 'default' | 'bordered'\n\ninterface TableContextValue {\n  size: TableSize\n  variant: TableVariant\n  stickyHeader: boolean\n}\n\nconst TableContext = createContext<TableContextValue>({ size: 'md', variant: 'default', stickyHeader: false })\n\nfunction useTableContext() {\n  return useContext(TableContext)\n}\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  /** Table size */\n  size?: TableSize\n  /** Table variant */\n  variant?: TableVariant\n  /** Whether the table has a sticky header */\n  stickyHeader?: boolean\n  /** Whether the table is in a loading state */\n  loading?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<TableSize, { fontSize: number; paddingY: number; paddingX: number; headerPaddingY: number; headerPaddingX: number }> = {\n  sm: { fontSize: fontSizes.base - 1, paddingY: componentPaddingY.md, paddingX: componentPaddingX.sm, headerPaddingY: componentPaddingY.md, headerPaddingX: componentPaddingX.sm },\n  md: { fontSize: fontSizes.base, paddingY: componentPaddingX.sm, paddingX: componentPaddingX.md, headerPaddingY: componentPaddingX.sm, headerPaddingX: componentPaddingX.md },\n  lg: { fontSize: fontSizes.base + 1, paddingY: componentPaddingX.md, paddingX: componentPaddingX.lg, headerPaddingY: spacing[3.5], headerPaddingX: componentPaddingX.lg },\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  {\n    size = 'md',\n    variant = 'default',\n    stickyHeader = false,\n    loading = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    width: '100%',\n    overflow: 'auto',\n    ...style,\n  }\n\n  const tableStyle: CSSProperties = {\n    width: '100%',\n    borderCollapse: variant === 'bordered' ? 'separate' : 'collapse',\n    borderSpacing: 0,\n    fontSize: sizeConfig[size].fontSize,\n    fontVariantNumeric: 'tabular-nums',\n    opacity: loading ? 0.6 : 1,\n    transition: `opacity ${durations.quick}ms ${easings.easeOut}`,\n  }\n\n  return (\n    <TableContext.Provider value={{ size, variant, stickyHeader }}>\n      <div className=\"brycks-table-container\" style={containerStyle}>\n        <table\n          ref={ref}\n          className={cx('brycks-table', `brycks-table--${size}`, `brycks-table--${variant}`, className)}\n          style={tableStyle}\n          aria-busy={loading || undefined}\n          data-testid={testId}\n          {...props}\n        >\n          {children}\n        </table>\n      </div>\n    </TableContext.Provider>\n  )\n})\n\nTable.displayName = 'Table'\n\n// TableHead\nexport interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Whether the header is sticky */\n  sticky?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(function TableHead(\n  { sticky = false, className, style, children, ...props },\n  ref\n) {\n  const { stickyHeader } = useTableContext()\n  const isSticky = sticky || stickyHeader\n\n  const headStyle: CSSProperties = {\n    backgroundColor: 'var(--brycks-background-muted)',\n    position: isSticky ? 'sticky' : undefined,\n    top: isSticky ? 0 : undefined,\n    zIndex: isSticky ? 1 : undefined,\n    ...style,\n  }\n\n  return (\n    <thead\n      ref={ref}\n      className={cx('brycks-table-head', isSticky && 'brycks-table-head--sticky', className)}\n      style={headStyle}\n      {...props}\n    >\n      {children}\n    </thead>\n  )\n})\n\nTableHead.displayName = 'TableHead'\n\n// TableBody\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(function TableBody(\n  { className, style, children, ...props },\n  ref\n) {\n  const bodyStyle: CSSProperties = {\n    ...style,\n  }\n\n  return (\n    <tbody\n      ref={ref}\n      className={cx('brycks-table-body', className)}\n      style={bodyStyle}\n      {...props}\n    >\n      {children}\n    </tbody>\n  )\n})\n\nTableBody.displayName = 'TableBody'\n\n// TableRow\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  /** Whether the row is selected */\n  selected?: boolean\n  /** Whether the row is clickable */\n  clickable?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(\n  { selected = false, clickable = false, className, style, children, ...props },\n  ref\n) {\n  const { variant } = useTableContext()\n\n  const rowStyle: CSSProperties = {\n    backgroundColor: selected\n      ? 'var(--brycks-primary-muted)'\n      : 'transparent',\n    borderBottom: variant !== 'bordered' ? '1px solid var(--brycks-border-muted)' : undefined,\n    cursor: clickable ? 'pointer' : undefined,\n    transition: `background-color ${durations.quick}ms ${easings.easeOut}`,\n    ...style,\n  }\n\n  return (\n    <tr\n      ref={ref}\n      className={cx(\n        'brycks-table-row',\n        selected && 'brycks-table-row--selected',\n        clickable && 'brycks-table-row--clickable',\n        className\n      )}\n      style={rowStyle}\n      onMouseEnter={(e) => {\n        if (clickable && !selected) {\n          e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!selected) {\n          e.currentTarget.style.backgroundColor = 'transparent'\n        }\n      }}\n      {...props}\n    >\n      {children}\n    </tr>\n  )\n})\n\nTableRow.displayName = 'TableRow'\n\n// TableHeader (th)\nexport interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  /** Whether the column is sortable */\n  sortable?: boolean\n  /** Sort direction */\n  sortDirection?: 'asc' | 'desc' | null\n  /** Callback when sort is requested */\n  onSort?: () => void\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Custom class name */\n  className?: string\n}\n\nfunction SortIcon({ direction }: { direction: 'asc' | 'desc' | null }) {\n  if (!direction) {\n    return (\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" style={{ opacity: 0.4 }} aria-hidden=\"true\">\n        <path d=\"M7 3L10 6H4L7 3Z\" fill=\"currentColor\" />\n        <path d=\"M7 11L4 8H10L7 11Z\" fill=\"currentColor\" />\n      </svg>\n    )\n  }\n\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      {direction === 'asc' ? (\n        <path d=\"M7 3L10 6H4L7 3Z\" fill=\"currentColor\" />\n      ) : (\n        <path d=\"M7 11L4 8H10L7 11Z\" fill=\"currentColor\" />\n      )}\n    </svg>\n  )\n}\n\nexport const TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(function TableHeader(\n  {\n    sortable = false,\n    sortDirection = null,\n    onSort,\n    align = 'left',\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const { size } = useTableContext()\n  const config = sizeConfig[size]\n\n  const headerStyle: CSSProperties = {\n    padding: `${config.headerPaddingY}px ${config.headerPaddingX}px`,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: align,\n    whiteSpace: 'nowrap',\n    transition: `color ${durations.quick}ms ${easings.easeOut}`,\n    ...style,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: componentGap.sm,\n    justifyContent: align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start',\n  }\n\n  // Sorting happens through a real button so it is reachable by keyboard\n  const sortButtonStyle: CSSProperties = {\n    ...contentStyle,\n    width: '100%',\n    padding: 0,\n    background: 'transparent',\n    border: 'none',\n    font: 'inherit',\n    fontWeight: 'inherit',\n    color: 'inherit',\n    cursor: 'pointer',\n    userSelect: 'none',\n  }\n\n  return (\n    <th\n      ref={ref}\n      aria-sort={\n        sortable\n          ? sortDirection === 'asc'\n            ? 'ascending'\n            : sortDirection === 'desc'\n            ? 'descending'\n            : 'none'\n          : undefined\n      }\n      className={cx('brycks-table-header', sortable && 'brycks-table-header--sortable', className)}\n      style={headerStyle}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          style={sortButtonStyle}\n          onClick={() => onSort?.()}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.color = 'inherit'\n          }}\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        <span style={contentStyle}>{children}</span>\n      )}\n    </th>\n  )\n})\n\nTableHeader.displayName = 'TableHeader'\n\n// TableCell (td)\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Whether to truncate text */\n  truncate?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { align = 'left', truncate = false, className, style, children, ...props },\n  ref\n) {\n  const { size, variant } = useTableContext()\n  const config = sizeConfig[size]\n\n  const cellStyle: CSSProperties = {\n    padding: `${config.paddingY}px ${config.paddingX}px`,\n    color: 'var(--brycks-foreground-default)',\n    textAlign: align,\n    verticalAlign: 'middle',\n    border: variant === 'bordered' ? '1px solid var(--brycks-border-muted)' : undefined,\n    maxWidth: truncate ? 200 : undefined,\n    overflow: truncate ? 'hidden' : undefined,\n    textOverflow: truncate ? 'ellipsis' : undefined,\n    whiteSpace: truncate ? 'nowrap' : undefined,\n    ...style,\n  }\n\n  return (\n    <td\n      ref={ref}\n      className={cx('brycks-table-cell', truncate && 'brycks-table-cell--truncate', className)}\n      style={cellStyle}\n      title={truncate && typeof children === 'string' ? children : undefined}\n      {...props}\n    >\n      {children}\n    </td>\n  )\n})\n\nTableCell.displayName = 'TableCell'\n\n// TableFoot\nexport interface TableFootProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>(function TableFoot(\n  { className, style, children, ...props },\n  ref\n) {\n  const footStyle: CSSProperties = {\n    backgroundColor: 'var(--brycks-background-muted)',\n    fontWeight: 500,\n    ...style,\n  }\n\n  return (\n    <tfoot\n      ref={ref}\n      className={cx('brycks-table-foot', className)}\n      style={footStyle}\n      {...props}\n    >\n      {children}\n    </tfoot>\n  )\n})\n\nTableFoot.displayName = 'TableFoot'\n\n// TableCaption\nexport interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {\n  /** Caption placement */\n  placement?: 'top' | 'bottom'\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(function TableCaption(\n  { placement = 'bottom', className, style, children, ...props },\n  ref\n) {\n  const captionStyle: CSSProperties = {\n    captionSide: placement,\n    padding: `${spacing[3]}px ${spacing[4]}px`,\n    fontSize: fontSizes.base - 1,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: 'left',\n    ...style,\n  }\n\n  return (\n    <caption\n      ref={ref}\n      className={cx('brycks-table-caption', className)}\n      style={captionStyle}\n      {...props}\n    >\n      {children}\n    </caption>\n  )\n})\n\nTableCaption.displayName = 'TableCaption'\n\n// TableEmpty — a full-width empty state row, drop inside <TableBody>\nexport interface TableEmptyProps {\n  /** Number of columns to span (match the table's column count) */\n  colSpan: number\n  /** Icon or illustration */\n  icon?: ReactNode\n  /** Title text */\n  title?: ReactNode\n  /** Description text */\n  description?: ReactNode\n  /** Action element (button, link) */\n  action?: ReactNode\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableEmpty = forwardRef<HTMLTableRowElement, TableEmptyProps>(function TableEmpty(\n  { colSpan, icon, title, description, action, className },\n  ref\n) {\n  return (\n    <tr ref={ref} className={cx('brycks-table-empty', className)}>\n      <td colSpan={colSpan} style={{ padding: 0 }}>\n        <EmptyState icon={icon} title={title} description={description} action={action} />\n      </td>\n    </tr>\n  )\n})\n\nTableEmpty.displayName = 'TableEmpty'\n\n// TableSkeleton — placeholder rows shown while data loads, drop inside <TableBody>\nexport interface TableSkeletonProps {\n  /** Number of skeleton rows */\n  rows?: number\n  /** Number of columns per row (match the table's column count) */\n  columns: number\n  /** Custom class name applied to each row */\n  className?: string\n}\n\n// Deterministic per-column widths so the placeholder reads like real data\nconst skeletonWidths = ['70%', '45%', '85%', '55%', '60%', '40%']\n\nexport function TableSkeleton({ rows = 5, columns, className }: TableSkeletonProps) {\n  return (\n    <>\n      {Array.from({ length: rows }).map((_, rowIndex) => (\n        <TableRow key={rowIndex} className={cx('brycks-table-skeleton-row', className)} aria-hidden=\"true\">\n          {Array.from({ length: columns }).map((_, colIndex) => (\n            <TableCell key={colIndex}>\n              <Skeleton variant=\"text\" width={skeletonWidths[colIndex % skeletonWidths.length]} />\n            </TableCell>\n          ))}\n        </TableRow>\n      ))}\n    </>\n  )\n}\n\nTableSkeleton.displayName = 'TableSkeleton'\n"],"names":["TableContext","createContext","useTableContext","useContext","sizeConfig","fontSizes","componentPaddingY","componentPaddingX","spacing","Table","forwardRef","size","variant","stickyHeader","loading","className","style","children","testId","props","ref","containerStyle","tableStyle","durations","easings","jsx","cx","TableHead","sticky","isSticky","headStyle","TableBody","bodyStyle","TableRow","selected","clickable","rowStyle","e","SortIcon","direction","TableHeader","sortable","sortDirection","onSort","align","config","headerStyle","contentStyle","componentGap","sortButtonStyle","jsxs","TableCell","truncate","cellStyle","TableFoot","footStyle","TableCaption","placement","captionStyle","TableEmpty","colSpan","icon","title","description","action","EmptyState","skeletonWidths","TableSkeleton","rows","columns","Fragment","_","rowIndex","colIndex","Skeleton"],"mappings":"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"}

package/dist/components/data/Table/Table.js

@@ -1,155 +1,157 @@
-import { jsx as r, jsxs as N } from "react/jsx-runtime";
-import { forwardRef as u, createContext as P, useContext as z } from "react";
-import { cx as p } from "../../../utils/styles.js";
-import { durations as T, easings as x } from "../../../design-system/tokens/motion.js";
-import { componentPaddingX as y, componentPaddingY as w, componentGap as L } from "../../../design-system/primitives/sizing.js";
+import { jsx as o, jsxs as $, Fragment as X } from "react/jsx-runtime";
+import { forwardRef as m, createContext as Y, useContext as M } from "react";
+import { cx as b } from "../../../utils/styles.js";
+import { EmptyState as B } from "../../utility/EmptyState/EmptyState.js";
+import { Skeleton as A } from "../../utility/Skeleton/Skeleton.js";
+import { durations as T, easings as S } from "../../../design-system/tokens/motion.js";
+import { componentPaddingX as p, componentPaddingY as C, componentGap as E } from "../../../design-system/primitives/sizing.js";
 import { spacing as v } from "../../../design-system/tokens/spacing.js";
-import { fontSizes as m } from "../../../design-system/tokens/typography.js";
-const $ = P({ size: "md", variant: "default", stickyHeader: !1 });
+import { fontSizes as f } from "../../../design-system/tokens/typography.js";
+const H = Y({ size: "md", variant: "default", stickyHeader: !1 });
 function g() {
-  return z($);
+  return M(H);
 }
-const S = {
-  sm: { fontSize: m.base - 1, paddingY: w.md, paddingX: y.sm, headerPaddingY: w.md, headerPaddingX: y.sm },
-  md: { fontSize: m.base, paddingY: y.sm, paddingX: y.md, headerPaddingY: y.sm, headerPaddingX: y.md },
-  lg: { fontSize: m.base + 1, paddingY: y.md, paddingX: y.lg, headerPaddingY: v[3.5], headerPaddingX: y.lg }
-}, X = u(function({
+const x = {
+  sm: { fontSize: f.base - 1, paddingY: C.md, paddingX: p.sm, headerPaddingY: C.md, headerPaddingX: p.sm },
+  md: { fontSize: f.base, paddingY: p.sm, paddingX: p.md, headerPaddingY: p.sm, headerPaddingX: p.md },
+  lg: { fontSize: f.base + 1, paddingY: p.md, paddingX: p.lg, headerPaddingY: v[3.5], headerPaddingX: p.lg }
+}, W = m(function({
   size: t = "md",
   variant: e = "default",
-  stickyHeader: n = !1,
-  loading: o = !1,
-  className: a,
-  style: d,
-  children: l,
+  stickyHeader: l = !1,
+  loading: a = !1,
+  className: r,
+  style: n,
+  children: d,
   testId: s,
-  ...b
+  ...y
 }, c) {
-  const f = {
+  const u = {
     position: "relative",
     width: "100%",
     overflow: "auto",
-    ...d
+    ...n
   }, h = {
     width: "100%",
     borderCollapse: e === "bordered" ? "separate" : "collapse",
     borderSpacing: 0,
-    fontSize: S[t].fontSize,
+    fontSize: x[t].fontSize,
     fontVariantNumeric: "tabular-nums",
-    opacity: o ? 0.6 : 1,
-    transition: `opacity ${T.quick}ms ${x.easeOut}`
+    opacity: a ? 0.6 : 1,
+    transition: `opacity ${T.quick}ms ${S.easeOut}`
   };
-  return /* @__PURE__ */ r($.Provider, { value: { size: t, variant: e, stickyHeader: n }, children: /* @__PURE__ */ r("div", { className: "brycks-table-container", style: f, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(H.Provider, { value: { size: t, variant: e, stickyHeader: l }, children: /* @__PURE__ */ o("div", { className: "brycks-table-container", style: u, children: /* @__PURE__ */ o(
     "table",
     {
       ref: c,
-      className: p("brycks-table", `brycks-table--${t}`, `brycks-table--${e}`, a),
+      className: b("brycks-table", `brycks-table--${t}`, `brycks-table--${e}`, r),
       style: h,
-      "aria-busy": o || void 0,
+      "aria-busy": a || void 0,
       "data-testid": s,
-      ...b,
-      children: l
+      ...y,
+      children: d
     }
   ) }) });
 });
-X.displayName = "Table";
-const Y = u(function({ sticky: t = !1, className: e, style: n, children: o, ...a }, d) {
-  const { stickyHeader: l } = g(), s = t || l, b = {
+W.displayName = "Table";
+const F = m(function({ sticky: t = !1, className: e, style: l, children: a, ...r }, n) {
+  const { stickyHeader: d } = g(), s = t || d, y = {
     backgroundColor: "var(--brycks-background-muted)",
     position: s ? "sticky" : void 0,
     top: s ? 0 : void 0,
     zIndex: s ? 1 : void 0,
-    ...n
+    ...l
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "thead",
     {
-      ref: d,
-      className: p("brycks-table-head", s && "brycks-table-head--sticky", e),
-      style: b,
-      ...a,
-      children: o
+      ref: n,
+      className: b("brycks-table-head", s && "brycks-table-head--sticky", e),
+      style: y,
+      ...r,
+      children: a
     }
   );
 });
-Y.displayName = "TableHead";
-const M = u(function({ className: t, style: e, children: n, ...o }, a) {
-  const d = {
+F.displayName = "TableHead";
+const O = m(function({ className: t, style: e, children: l, ...a }, r) {
+  const n = {
     ...e
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "tbody",
     {
-      ref: a,
-      className: p("brycks-table-body", t),
-      style: d,
-      ...o,
-      children: n
+      ref: r,
+      className: b("brycks-table-body", t),
+      style: n,
+      ...a,
+      children: l
     }
   );
 });
-M.displayName = "TableBody";
-const B = u(function({ selected: t = !1, clickable: e = !1, className: n, style: o, children: a, ...d }, l) {
-  const { variant: s } = g(), b = {
+O.displayName = "TableBody";
+const P = m(function({ selected: t = !1, clickable: e = !1, className: l, style: a, children: r, ...n }, d) {
+  const { variant: s } = g(), y = {
     backgroundColor: t ? "var(--brycks-primary-muted)" : "transparent",
     borderBottom: s !== "bordered" ? "1px solid var(--brycks-border-muted)" : void 0,
     cursor: e ? "pointer" : void 0,
-    transition: `background-color ${T.quick}ms ${x.easeOut}`,
-    ...o
+    transition: `background-color ${T.quick}ms ${S.easeOut}`,
+    ...a
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "tr",
     {
-      ref: l,
-      className: p(
+      ref: d,
+      className: b(
         "brycks-table-row",
         t && "brycks-table-row--selected",
         e && "brycks-table-row--clickable",
-        n
+        l
       ),
-      style: b,
+      style: y,
       onMouseEnter: (c) => {
         e && !t && (c.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
       },
       onMouseLeave: (c) => {
         t || (c.currentTarget.style.backgroundColor = "transparent");
       },
-      ...d,
-      children: a
+      ...n,
+      children: r
     }
   );
 });
-B.displayName = "TableRow";
-function A({ direction: i }) {
-  return i ? /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: i === "asc" ? /* @__PURE__ */ r("path", { d: "M7 3L10 6H4L7 3Z", fill: "currentColor" }) : /* @__PURE__ */ r("path", { d: "M7 11L4 8H10L7 11Z", fill: "currentColor" }) }) : /* @__PURE__ */ N("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { opacity: 0.4 }, "aria-hidden": "true", children: [
-    /* @__PURE__ */ r("path", { d: "M7 3L10 6H4L7 3Z", fill: "currentColor" }),
-    /* @__PURE__ */ r("path", { d: "M7 11L4 8H10L7 11Z", fill: "currentColor" })
+P.displayName = "TableRow";
+function R({ direction: i }) {
+  return i ? /* @__PURE__ */ o("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: i === "asc" ? /* @__PURE__ */ o("path", { d: "M7 3L10 6H4L7 3Z", fill: "currentColor" }) : /* @__PURE__ */ o("path", { d: "M7 11L4 8H10L7 11Z", fill: "currentColor" }) }) : /* @__PURE__ */ $("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { opacity: 0.4 }, "aria-hidden": "true", children: [
+    /* @__PURE__ */ o("path", { d: "M7 3L10 6H4L7 3Z", fill: "currentColor" }),
+    /* @__PURE__ */ o("path", { d: "M7 11L4 8H10L7 11Z", fill: "currentColor" })
   ] });
 }
-const O = u(function({
+const Z = m(function({
   sortable: t = !1,
   sortDirection: e = null,
-  onSort: n,
-  align: o = "left",
-  className: a,
-  style: d,
-  children: l,
+  onSort: l,
+  align: a = "left",
+  className: r,
+  style: n,
+  children: d,
   ...s
-}, b) {
-  const { size: c } = g(), f = S[c], h = {
-    padding: `${f.headerPaddingY}px ${f.headerPaddingX}px`,
+}, y) {
+  const { size: c } = g(), u = x[c], h = {
+    padding: `${u.headerPaddingY}px ${u.headerPaddingX}px`,
     fontWeight: 600,
     color: "var(--brycks-foreground-muted)",
-    textAlign: o,
+    textAlign: a,
     whiteSpace: "nowrap",
-    transition: `color ${T.quick}ms ${x.easeOut}`,
-    ...d
-  }, C = {
+    transition: `color ${T.quick}ms ${S.easeOut}`,
+    ...n
+  }, w = {
     display: "flex",
     alignItems: "center",
-    gap: L.sm,
-    justifyContent: o === "right" ? "flex-end" : o === "center" ? "center" : "flex-start"
-  }, H = {
-    ...C,
+    gap: E.sm,
+    justifyContent: a === "right" ? "flex-end" : a === "center" ? "center" : "flex-start"
+  }, L = {
+    ...w,
     width: "100%",
     padding: 0,
     background: "transparent",
@@ -160,20 +162,20 @@ const O = u(function({
     cursor: "pointer",
     userSelect: "none"
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "th",
     {
-      ref: b,
+      ref: y,
       "aria-sort": t ? e === "asc" ? "ascending" : e === "desc" ? "descending" : "none" : void 0,
-      className: p("brycks-table-header", t && "brycks-table-header--sortable", a),
+      className: b("brycks-table-header", t && "brycks-table-header--sortable", r),
       style: h,
       ...s,
-      children: t ? /* @__PURE__ */ N(
+      children: t ? /* @__PURE__ */ $(
         "button",
         {
           type: "button",
-          style: H,
-          onClick: () => n?.(),
+          style: L,
+          onClick: () => l?.(),
           onMouseEnter: (k) => {
             k.currentTarget.style.color = "var(--brycks-foreground-default)";
           },
@@ -181,88 +183,99 @@ const O = u(function({
             k.currentTarget.style.color = "inherit";
           },
           children: [
-            l,
-            /* @__PURE__ */ r(A, { direction: e })
+            d,
+            /* @__PURE__ */ o(R, { direction: e })
           ]
         }
-      ) : /* @__PURE__ */ r("span", { style: C, children: l })
+      ) : /* @__PURE__ */ o("span", { style: w, children: d })
     }
   );
 });
-O.displayName = "TableHeader";
-const R = u(function({ align: t = "left", truncate: e = !1, className: n, style: o, children: a, ...d }, l) {
-  const { size: s, variant: b } = g(), c = S[s], f = {
+Z.displayName = "TableHeader";
+const z = m(function({ align: t = "left", truncate: e = !1, className: l, style: a, children: r, ...n }, d) {
+  const { size: s, variant: y } = g(), c = x[s], u = {
     padding: `${c.paddingY}px ${c.paddingX}px`,
     color: "var(--brycks-foreground-default)",
     textAlign: t,
     verticalAlign: "middle",
-    border: b === "bordered" ? "1px solid var(--brycks-border-muted)" : void 0,
+    border: y === "bordered" ? "1px solid var(--brycks-border-muted)" : void 0,
     maxWidth: e ? 200 : void 0,
     overflow: e ? "hidden" : void 0,
     textOverflow: e ? "ellipsis" : void 0,
     whiteSpace: e ? "nowrap" : void 0,
-    ...o
+    ...a
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "td",
     {
-      ref: l,
-      className: p("brycks-table-cell", e && "brycks-table-cell--truncate", n),
-      style: f,
-      title: e && typeof a == "string" ? a : void 0,
-      ...d,
-      children: a
+      ref: d,
+      className: b("brycks-table-cell", e && "brycks-table-cell--truncate", l),
+      style: u,
+      title: e && typeof r == "string" ? r : void 0,
+      ...n,
+      children: r
     }
   );
 });
-R.displayName = "TableCell";
-const W = u(function({ className: t, style: e, children: n, ...o }, a) {
-  const d = {
+z.displayName = "TableCell";
+const j = m(function({ className: t, style: e, children: l, ...a }, r) {
+  const n = {
     backgroundColor: "var(--brycks-background-muted)",
     fontWeight: 500,
     ...e
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "tfoot",
     {
-      ref: a,
-      className: p("brycks-table-foot", t),
-      style: d,
-      ...o,
-      children: n
+      ref: r,
+      className: b("brycks-table-foot", t),
+      style: n,
+      ...a,
+      children: l
     }
   );
 });
-W.displayName = "TableFoot";
-const Z = u(function({ placement: t = "bottom", className: e, style: n, children: o, ...a }, d) {
-  const l = {
+j.displayName = "TableFoot";
+const q = m(function({ placement: t = "bottom", className: e, style: l, children: a, ...r }, n) {
+  const d = {
     captionSide: t,
     padding: `${v[3]}px ${v[4]}px`,
-    fontSize: m.base - 1,
+    fontSize: f.base - 1,
     color: "var(--brycks-foreground-muted)",
     textAlign: "left",
-    ...n
+    ...l
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "caption",
     {
-      ref: d,
-      className: p("brycks-table-caption", e),
-      style: l,
-      ...a,
-      children: o
+      ref: n,
+      className: b("brycks-table-caption", e),
+      style: d,
+      ...r,
+      children: a
     }
   );
 });
-Z.displayName = "TableCaption";
+q.displayName = "TableCaption";
+const I = m(function({ colSpan: t, icon: e, title: l, description: a, action: r, className: n }, d) {
+  return /* @__PURE__ */ o("tr", { ref: d, className: b("brycks-table-empty", n), children: /* @__PURE__ */ o("td", { colSpan: t, style: { padding: 0 }, children: /* @__PURE__ */ o(B, { icon: e, title: l, description: a, action: r }) }) });
+});
+I.displayName = "TableEmpty";
+const N = ["70%", "45%", "85%", "55%", "60%", "40%"];
+function _({ rows: i = 5, columns: t, className: e }) {
+  return /* @__PURE__ */ o(X, { children: Array.from({ length: i }).map((l, a) => /* @__PURE__ */ o(P, { className: b("brycks-table-skeleton-row", e), "aria-hidden": "true", children: Array.from({ length: t }).map((r, n) => /* @__PURE__ */ o(z, { children: /* @__PURE__ */ o(A, { variant: "text", width: N[n % N.length] }) }, n)) }, a)) });
+}
+_.displayName = "TableSkeleton";
 export {
-  X as Table,
-  M as TableBody,
-  Z as TableCaption,
-  R as TableCell,
-  W as TableFoot,
-  Y as TableHead,
-  O as TableHeader,
-  B as TableRow
+  W as Table,
+  O as TableBody,
+  q as TableCaption,
+  z as TableCell,
+  I as TableEmpty,
+  j as TableFoot,
+  F as TableHead,
+  Z as TableHeader,
+  P as TableRow,
+  _ as TableSkeleton
 };
 //# sourceMappingURL=Table.js.map