@brycks/core-front 0.3.1 → 0.3.3

package/dist/components/data/List/List.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("react"),c=require("../../../utils/styles.cjs"),b=d.createContext({size:"md",variant:"default"});function R(){return d.useContext(b)}const v=d.forwardRef(function({size:i="md",variant:e="default",interactive:o=!1,className:t,style:r,children:n,testId:u,...p},f){const g={listStyle:"none",margin:0,padding:0,display:"flex",flexDirection:"column",gap:e==="separated"?8:0,border:e==="bordered"?"1px solid var(--brycks-border-default)":void 0,borderRadius:e==="bordered"?"var(--brycks-radius-lg)":void 0,overflow:e==="bordered"?"hidden":void 0,...r};return s.jsx(b.Provider,{value:{size:i,variant:e},children:s.jsx("ul",{ref:f,className:c.cx("brycks-list",`brycks-list--${i}`,`brycks-list--${e}`,o&&"brycks-list--interactive",t),style:g,"data-testid":u,...p,children:n})})});v.displayName="List";const w={sm:{padding:"8px 12px",fontSize:13,secondarySize:12,gap:10,minHeight:40},md:{padding:"12px 16px",fontSize:14,secondarySize:13,gap:12,minHeight:52},lg:{padding:"16px 20px",fontSize:16,secondarySize:14,gap:14,minHeight:64}},k=d.forwardRef(function({leftElement:i,rightElement:e,secondary:o,selected:t=!1,disabled:r=!1,clickable:n=!1,className:u,style:p,children:f,...g},L){const{size:j,variant:l}=R(),a=w[j],z={display:"flex",alignItems:"center",gap:a.gap,padding:a.padding,minHeight:a.minHeight,backgroundColor:t?"var(--brycks-primary-50)":"transparent",borderBottom:l==="default"||l==="bordered"?"1px solid var(--brycks-border-muted)":void 0,border:l==="separated"?"1px solid var(--brycks-border-default)":void 0,borderRadius:l==="separated"?"var(--brycks-radius-lg)":void 0,cursor:r?"not-allowed":n?"pointer":void 0,opacity:r?.5:1,transition:"background-color 150ms ease-out",...p},H={flex:1,display:"flex",flexDirection:"column",gap:2,minWidth:0},C={fontSize:a.fontSize,fontWeight:500,color:"var(--brycks-foreground-default)",lineHeight:1.4},N={fontSize:a.secondarySize,color:"var(--brycks-foreground-muted)",lineHeight:1.4},x={display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0};return s.jsxs("li",{ref:L,className:c.cx("brycks-list-item",t&&"brycks-list-item--selected",n&&"brycks-list-item--clickable",r&&"brycks-list-item--disabled",u),style:z,onMouseEnter:m=>{n&&!r&&!t&&(m.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:m=>{t||(m.currentTarget.style.backgroundColor="transparent")},...g,children:[i&&s.jsx("span",{style:x,children:i}),s.jsxs("div",{style:H,children:[s.jsx("span",{style:C,children:f}),o&&s.jsx("span",{style:N,children:o})]}),e&&s.jsx("span",{style:x,children:e})]})});k.displayName="ListItem";const S=d.forwardRef(function({className:i,style:e,...o},t){const r={height:1,backgroundColor:"var(--brycks-border-muted)",margin:"8px 0",...e};return s.jsx("li",{ref:t,role:"separator",className:c.cx("brycks-list-divider",i),style:r,...o})});S.displayName="ListDivider";const h=d.forwardRef(function({className:i,style:e,children:o,...t},r){const n={padding:"12px 16px 8px 16px",fontSize:11,fontWeight:600,color:"var(--brycks-foreground-muted)",textTransform:"uppercase",letterSpacing:"0.05em",...e};return s.jsx("li",{ref:r,className:c.cx("brycks-list-header",i),style:n,...t,children:o})});h.displayName="ListHeader";exports.List=v;exports.ListDivider=S;exports.ListHeader=h;exports.ListItem=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),p=require("react"),m=require("../../../utils/styles.cjs"),o=require("../../../design-system/tokens/spacing.cjs"),v=require("../../../design-system/tokens/motion.cjs"),c=require("../../../design-system/tokens/typography.cjs"),n=require("../../../design-system/primitives/sizing.cjs"),h=p.createContext({size:"md",variant:"default"});function R(){return p.useContext(h)}const z=p.forwardRef(function({size:r="md",variant:e="default",interactive:a=!1,className:t,style:i,children:d,testId:u,...f},b){const x={listStyle:"none",margin:0,padding:0,display:"flex",flexDirection:"column",gap:e==="separated"?o.spacing[2]:0,border:e==="bordered"?"1px solid var(--brycks-border-default)":void 0,borderRadius:e==="bordered"?"var(--brycks-radius-lg)":void 0,overflow:e==="bordered"?"hidden":void 0,...i};return s.jsx(h.Provider,{value:{size:r,variant:e},children:s.jsx("ul",{ref:b,className:m.cx("brycks-list",`brycks-list--${r}`,`brycks-list--${e}`,a&&"brycks-list--interactive",t),style:x,"data-testid":u,...f,children:d})})});z.displayName="List";const w={sm:{paddingY:n.componentPaddingY.md,paddingX:n.componentPaddingX.sm,fontSize:c.fontSizes.base-1,secondarySize:c.fontSizes.sm,gap:n.componentGap.lg,minHeight:n.componentHeights.md},md:{paddingY:n.componentPaddingX.sm,paddingX:n.componentPaddingX.md,fontSize:c.fontSizes.base,secondarySize:c.fontSizes.base-1,gap:n.componentGap.xl,minHeight:52},lg:{paddingY:n.componentPaddingX.md,paddingX:n.componentPaddingX.lg,fontSize:c.fontSizes.md,secondarySize:c.fontSizes.base,gap:o.spacing[3.5],minHeight:o.spacing[16]}},L=p.forwardRef(function({leftElement:r,rightElement:e,secondary:a,selected:t=!1,disabled:i=!1,clickable:d=!1,className:u,style:f,children:b,...x},$){const{size:C,variant:g}=R(),l=w[C],X={display:"flex",alignItems:"center",gap:l.gap,padding:`${l.paddingY}px ${l.paddingX}px`,minHeight:l.minHeight,backgroundColor:t?"var(--brycks-primary-50)":"transparent",borderBottom:g==="default"||g==="bordered"?"1px solid var(--brycks-border-muted)":void 0,border:g==="separated"?"1px solid var(--brycks-border-default)":void 0,borderRadius:g==="separated"?"var(--brycks-radius-lg)":void 0,cursor:i?"not-allowed":d?"pointer":void 0,opacity:i?.5:1,transition:`background-color ${v.durations.quick}ms ${v.easings.easeOut}`,...f},q={flex:1,display:"flex",flexDirection:"column",gap:o.spacing[.5],minWidth:0},N={fontSize:l.fontSize,fontWeight:500,color:"var(--brycks-foreground-default)",lineHeight:1.4},P={fontSize:l.secondarySize,color:"var(--brycks-foreground-muted)",lineHeight:1.4},k={display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0};return s.jsxs("li",{ref:$,className:m.cx("brycks-list-item",t&&"brycks-list-item--selected",d&&"brycks-list-item--clickable",i&&"brycks-list-item--disabled",u),style:X,onMouseEnter:S=>{d&&!i&&!t&&(S.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:S=>{t||(S.currentTarget.style.backgroundColor="transparent")},...x,children:[r&&s.jsx("span",{style:k,children:r}),s.jsxs("div",{style:q,children:[s.jsx("span",{style:N,children:b}),a&&s.jsx("span",{style:P,children:a})]}),e&&s.jsx("span",{style:k,children:e})]})});L.displayName="ListItem";const j=p.forwardRef(function({className:r,style:e,...a},t){const i={height:1,backgroundColor:"var(--brycks-border-muted)",margin:`${o.spacing[2]}px 0`,...e};return s.jsx("li",{ref:t,role:"separator",className:m.cx("brycks-list-divider",r),style:i,...a})});j.displayName="ListDivider";const H=p.forwardRef(function({className:r,style:e,children:a,...t},i){const d={padding:`${o.spacing[3]}px ${o.spacing[4]}px ${o.spacing[2]}px ${o.spacing[4]}px`,fontSize:c.fontSizes.xs,fontWeight:600,color:"var(--brycks-foreground-muted)",textTransform:"uppercase",letterSpacing:"0.05em",...e};return s.jsx("li",{ref:i,className:m.cx("brycks-list-header",r),style:d,...t,children:a})});H.displayName="ListHeader";exports.List=z;exports.ListDivider=j;exports.ListHeader=H;exports.ListItem=L;
 //# sourceMappingURL=List.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","sources":["../../../../src/components/data/List/List.tsx"],"sourcesContent":["/**\n * List Component\n *\n * A flexible list component for displaying items in a vertical layout.\n * Supports different sizes, icons, and interactive items.\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type ListSize = 'sm' | 'md' | 'lg'\nexport type ListVariant = 'default' | 'bordered' | 'separated'\n\ninterface ListContextValue {\n  size: ListSize\n  variant: ListVariant\n}\n\nconst ListContext = createContext<ListContextValue>({ size: 'md', variant: 'default' })\n\nfunction useListContext() {\n  return useContext(ListContext)\n}\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  /** List size */\n  size?: ListSize\n  /** List variant */\n  variant?: ListVariant\n  /** Whether list items are interactive */\n  interactive?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const List = forwardRef<HTMLUListElement, ListProps>(function List(\n  {\n    size = 'md',\n    variant = 'default',\n    interactive = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const listStyle: CSSProperties = {\n    listStyle: 'none',\n    margin: 0,\n    padding: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: variant === 'separated' ? 8 : 0,\n    border: variant === 'bordered' ? '1px solid var(--brycks-border-default)' : undefined,\n    borderRadius: variant === 'bordered' ? 'var(--brycks-radius-lg)' : undefined,\n    overflow: variant === 'bordered' ? 'hidden' : undefined,\n    ...style,\n  }\n\n  return (\n    <ListContext.Provider value={{ size, variant }}>\n      <ul\n        ref={ref}\n        className={cx(\n          'brycks-list',\n          `brycks-list--${size}`,\n          `brycks-list--${variant}`,\n          interactive && 'brycks-list--interactive',\n          className\n        )}\n        style={listStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </ul>\n    </ListContext.Provider>\n  )\n})\n\nList.displayName = 'List'\n\n// ListItem\nexport interface ListItemProps extends HTMLAttributes<HTMLLIElement> {\n  /** Icon or avatar on the left */\n  leftElement?: ReactNode\n  /** Element on the right (badge, button, etc.) */\n  rightElement?: ReactNode\n  /** Secondary text below the main content */\n  secondary?: ReactNode\n  /** Whether the item is selected */\n  selected?: boolean\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Whether the item is clickable */\n  clickable?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nconst sizeConfig: Record<ListSize, { padding: string; fontSize: number; secondarySize: number; gap: number; minHeight: number }> = {\n  sm: { padding: '8px 12px', fontSize: 13, secondarySize: 12, gap: 10, minHeight: 40 },\n  md: { padding: '12px 16px', fontSize: 14, secondarySize: 13, gap: 12, minHeight: 52 },\n  lg: { padding: '16px 20px', fontSize: 16, secondarySize: 14, gap: 14, minHeight: 64 },\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(\n  {\n    leftElement,\n    rightElement,\n    secondary,\n    selected = false,\n    disabled = false,\n    clickable = false,\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const { size, variant } = useListContext()\n  const config = sizeConfig[size]\n\n  const itemStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: config.gap,\n    padding: config.padding,\n    minHeight: config.minHeight,\n    backgroundColor: selected\n      ? 'var(--brycks-primary-50)'\n      : 'transparent',\n    borderBottom: variant === 'default' || variant === 'bordered'\n      ? '1px solid var(--brycks-border-muted)'\n      : undefined,\n    border: variant === 'separated' ? '1px solid var(--brycks-border-default)' : undefined,\n    borderRadius: variant === 'separated' ? 'var(--brycks-radius-lg)' : undefined,\n    cursor: disabled ? 'not-allowed' : clickable ? 'pointer' : undefined,\n    opacity: disabled ? 0.5 : 1,\n    transition: 'background-color 150ms ease-out',\n    ...style,\n  }\n\n  const contentStyle: CSSProperties = {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    minWidth: 0,\n  }\n\n  const primaryStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const secondaryStyle: CSSProperties = {\n    fontSize: config.secondarySize,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  const elementStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }\n\n  return (\n    <li\n      ref={ref}\n      className={cx(\n        'brycks-list-item',\n        selected && 'brycks-list-item--selected',\n        clickable && 'brycks-list-item--clickable',\n        disabled && 'brycks-list-item--disabled',\n        className\n      )}\n      style={itemStyle}\n      onMouseEnter={(e) => {\n        if (clickable && !disabled && !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      {leftElement && <span style={elementStyle}>{leftElement}</span>}\n      <div style={contentStyle}>\n        <span style={primaryStyle}>{children}</span>\n        {secondary && <span style={secondaryStyle}>{secondary}</span>}\n      </div>\n      {rightElement && <span style={elementStyle}>{rightElement}</span>}\n    </li>\n  )\n})\n\nListItem.displayName = 'ListItem'\n\n// ListDivider\nexport interface ListDividerProps extends HTMLAttributes<HTMLLIElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const ListDivider = forwardRef<HTMLLIElement, ListDividerProps>(function ListDivider(\n  { className, style, ...props },\n  ref\n) {\n  const dividerStyle: CSSProperties = {\n    height: 1,\n    backgroundColor: 'var(--brycks-border-muted)',\n    margin: '8px 0',\n    ...style,\n  }\n\n  return (\n    <li\n      ref={ref}\n      role=\"separator\"\n      className={cx('brycks-list-divider', className)}\n      style={dividerStyle}\n      {...props}\n    />\n  )\n})\n\nListDivider.displayName = 'ListDivider'\n\n// ListHeader\nexport interface ListHeaderProps extends HTMLAttributes<HTMLLIElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const ListHeader = forwardRef<HTMLLIElement, ListHeaderProps>(function ListHeader(\n  { className, style, children, ...props },\n  ref\n) {\n  const headerStyle: CSSProperties = {\n    padding: '12px 16px 8px 16px',\n    fontSize: 11,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n    ...style,\n  }\n\n  return (\n    <li\n      ref={ref}\n      className={cx('brycks-list-header', className)}\n      style={headerStyle}\n      {...props}\n    >\n      {children}\n    </li>\n  )\n})\n\nListHeader.displayName = 'ListHeader'\n"],"names":["ListContext","createContext","useListContext","useContext","List","forwardRef","size","variant","interactive","className","style","children","testId","props","ref","listStyle","jsx","cx","sizeConfig","ListItem","leftElement","rightElement","secondary","selected","disabled","clickable","config","itemStyle","contentStyle","primaryStyle","secondaryStyle","elementStyle","jsxs","e","ListDivider","dividerStyle","ListHeader","headerStyle"],"mappings":"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"}
+{"version":3,"file":"List.cjs","sources":["../../../../src/components/data/List/List.tsx"],"sourcesContent":["/**\n * List Component\n *\n * A flexible list component for displaying items in a vertical layout.\n * Supports different sizes, icons, and interactive items.\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentGap, componentPaddingX, componentPaddingY } from '../../../design-system/primitives'\n\nexport type ListSize = 'sm' | 'md' | 'lg'\nexport type ListVariant = 'default' | 'bordered' | 'separated'\n\ninterface ListContextValue {\n  size: ListSize\n  variant: ListVariant\n}\n\nconst ListContext = createContext<ListContextValue>({ size: 'md', variant: 'default' })\n\nfunction useListContext() {\n  return useContext(ListContext)\n}\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  /** List size */\n  size?: ListSize\n  /** List variant */\n  variant?: ListVariant\n  /** Whether list items are interactive */\n  interactive?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const List = forwardRef<HTMLUListElement, ListProps>(function List(\n  {\n    size = 'md',\n    variant = 'default',\n    interactive = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const listStyle: CSSProperties = {\n    listStyle: 'none',\n    margin: 0,\n    padding: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: variant === 'separated' ? spacing[2] : 0,\n    border: variant === 'bordered' ? '1px solid var(--brycks-border-default)' : undefined,\n    borderRadius: variant === 'bordered' ? 'var(--brycks-radius-lg)' : undefined,\n    overflow: variant === 'bordered' ? 'hidden' : undefined,\n    ...style,\n  }\n\n  return (\n    <ListContext.Provider value={{ size, variant }}>\n      <ul\n        ref={ref}\n        className={cx(\n          'brycks-list',\n          `brycks-list--${size}`,\n          `brycks-list--${variant}`,\n          interactive && 'brycks-list--interactive',\n          className\n        )}\n        style={listStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </ul>\n    </ListContext.Provider>\n  )\n})\n\nList.displayName = 'List'\n\n// ListItem\nexport interface ListItemProps extends HTMLAttributes<HTMLLIElement> {\n  /** Icon or avatar on the left */\n  leftElement?: ReactNode\n  /** Element on the right (badge, button, etc.) */\n  rightElement?: ReactNode\n  /** Secondary text below the main content */\n  secondary?: ReactNode\n  /** Whether the item is selected */\n  selected?: boolean\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Whether the item is clickable */\n  clickable?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nconst sizeConfig: Record<ListSize, { paddingX: number; paddingY: number; fontSize: number; secondarySize: number; gap: number; minHeight: number }> = {\n  sm: { paddingY: componentPaddingY.md, paddingX: componentPaddingX.sm, fontSize: fontSizes.base - 1, secondarySize: fontSizes.sm, gap: componentGap.lg, minHeight: componentHeights.md },\n  md: { paddingY: componentPaddingX.sm, paddingX: componentPaddingX.md, fontSize: fontSizes.base, secondarySize: fontSizes.base - 1, gap: componentGap.xl, minHeight: 52 },\n  lg: { paddingY: componentPaddingX.md, paddingX: componentPaddingX.lg, fontSize: fontSizes.md, secondarySize: fontSizes.base, gap: spacing[3.5], minHeight: spacing[16] },\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(\n  {\n    leftElement,\n    rightElement,\n    secondary,\n    selected = false,\n    disabled = false,\n    clickable = false,\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const { size, variant } = useListContext()\n  const config = sizeConfig[size]\n\n  const itemStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: config.gap,\n    padding: `${config.paddingY}px ${config.paddingX}px`,\n    minHeight: config.minHeight,\n    backgroundColor: selected\n      ? 'var(--brycks-primary-50)'\n      : 'transparent',\n    borderBottom: variant === 'default' || variant === 'bordered'\n      ? '1px solid var(--brycks-border-muted)'\n      : undefined,\n    border: variant === 'separated' ? '1px solid var(--brycks-border-default)' : undefined,\n    borderRadius: variant === 'separated' ? 'var(--brycks-radius-lg)' : undefined,\n    cursor: disabled ? 'not-allowed' : clickable ? 'pointer' : undefined,\n    opacity: disabled ? 0.5 : 1,\n    transition: `background-color ${durations.quick}ms ${easings.easeOut}`,\n    ...style,\n  }\n\n  const contentStyle: CSSProperties = {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: spacing[0.5],\n    minWidth: 0,\n  }\n\n  const primaryStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const secondaryStyle: CSSProperties = {\n    fontSize: config.secondarySize,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  const elementStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }\n\n  return (\n    <li\n      ref={ref}\n      className={cx(\n        'brycks-list-item',\n        selected && 'brycks-list-item--selected',\n        clickable && 'brycks-list-item--clickable',\n        disabled && 'brycks-list-item--disabled',\n        className\n      )}\n      style={itemStyle}\n      onMouseEnter={(e) => {\n        if (clickable && !disabled && !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      {leftElement && <span style={elementStyle}>{leftElement}</span>}\n      <div style={contentStyle}>\n        <span style={primaryStyle}>{children}</span>\n        {secondary && <span style={secondaryStyle}>{secondary}</span>}\n      </div>\n      {rightElement && <span style={elementStyle}>{rightElement}</span>}\n    </li>\n  )\n})\n\nListItem.displayName = 'ListItem'\n\n// ListDivider\nexport interface ListDividerProps extends HTMLAttributes<HTMLLIElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const ListDivider = forwardRef<HTMLLIElement, ListDividerProps>(function ListDivider(\n  { className, style, ...props },\n  ref\n) {\n  const dividerStyle: CSSProperties = {\n    height: 1,\n    backgroundColor: 'var(--brycks-border-muted)',\n    margin: `${spacing[2]}px 0`,\n    ...style,\n  }\n\n  return (\n    <li\n      ref={ref}\n      role=\"separator\"\n      className={cx('brycks-list-divider', className)}\n      style={dividerStyle}\n      {...props}\n    />\n  )\n})\n\nListDivider.displayName = 'ListDivider'\n\n// ListHeader\nexport interface ListHeaderProps extends HTMLAttributes<HTMLLIElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const ListHeader = forwardRef<HTMLLIElement, ListHeaderProps>(function ListHeader(\n  { className, style, children, ...props },\n  ref\n) {\n  const headerStyle: CSSProperties = {\n    padding: `${spacing[3]}px ${spacing[4]}px ${spacing[2]}px ${spacing[4]}px`,\n    fontSize: fontSizes.xs,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n    ...style,\n  }\n\n  return (\n    <li\n      ref={ref}\n      className={cx('brycks-list-header', className)}\n      style={headerStyle}\n      {...props}\n    >\n      {children}\n    </li>\n  )\n})\n\nListHeader.displayName = 'ListHeader'\n"],"names":["ListContext","createContext","useListContext","useContext","List","forwardRef","size","variant","interactive","className","style","children","testId","props","ref","listStyle","spacing","jsx","cx","sizeConfig","componentPaddingY","componentPaddingX","fontSizes","componentGap","componentHeights","ListItem","leftElement","rightElement","secondary","selected","disabled","clickable","config","itemStyle","durations","easings","contentStyle","primaryStyle","secondaryStyle","elementStyle","jsxs","e","ListDivider","dividerStyle","ListHeader","headerStyle"],"mappings":"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"}

package/dist/components/data/List/List.js

@@ -1,178 +1,182 @@
-import { jsx as o, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as l, createContext as H, useContext as N } from "react";
-import { cx as c } from "../../../utils/styles.js";
-const k = H({ size: "md", variant: "default" });
-function D() {
-  return N(k);
+import { jsx as n, jsxs as S } from "react/jsx-runtime";
+import { forwardRef as p, createContext as I, useContext as X } from "react";
+import { cx as y } from "../../../utils/styles.js";
+import { spacing as s } from "../../../design-system/tokens/spacing.js";
+import { durations as Y, easings as j } from "../../../design-system/tokens/motion.js";
+import { fontSizes as a } from "../../../design-system/tokens/typography.js";
+import { componentPaddingX as c, componentGap as h, componentHeights as w, componentPaddingY as P } from "../../../design-system/primitives/sizing.js";
+const L = I({ size: "md", variant: "default" });
+function R() {
+  return X(L);
 }
-const I = l(function({
+const T = p(function({
   size: i = "md",
   variant: e = "default",
-  interactive: s = !1,
+  interactive: o = !1,
   className: t,
   style: r,
-  children: n,
-  testId: y,
-  ...m
-}, u) {
-  const f = {
+  children: d,
+  testId: f,
+  ...u
+}, b) {
+  const x = {
     listStyle: "none",
     margin: 0,
     padding: 0,
     display: "flex",
     flexDirection: "column",
-    gap: e === "separated" ? 8 : 0,
+    gap: e === "separated" ? s[2] : 0,
     border: e === "bordered" ? "1px solid var(--brycks-border-default)" : void 0,
     borderRadius: e === "bordered" ? "var(--brycks-radius-lg)" : void 0,
     overflow: e === "bordered" ? "hidden" : void 0,
     ...r
   };
-  return /* @__PURE__ */ o(k.Provider, { value: { size: i, variant: e }, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ n(L.Provider, { value: { size: i, variant: e }, children: /* @__PURE__ */ n(
     "ul",
     {
-      ref: u,
-      className: c(
+      ref: b,
+      className: y(
         "brycks-list",
         `brycks-list--${i}`,
         `brycks-list--${e}`,
-        s && "brycks-list--interactive",
+        o && "brycks-list--interactive",
         t
       ),
-      style: f,
-      "data-testid": y,
-      ...m,
-      children: n
+      style: x,
+      "data-testid": f,
+      ...u,
+      children: d
     }
   ) });
 });
-I.displayName = "List";
-const j = {
-  sm: { padding: "8px 12px", fontSize: 13, secondarySize: 12, gap: 10, minHeight: 40 },
-  md: { padding: "12px 16px", fontSize: 14, secondarySize: 13, gap: 12, minHeight: 52 },
-  lg: { padding: "16px 20px", fontSize: 16, secondarySize: 14, gap: 14, minHeight: 64 }
-}, w = l(function({
+T.displayName = "List";
+const W = {
+  sm: { paddingY: P.md, paddingX: c.sm, fontSize: a.base - 1, secondarySize: a.sm, gap: h.lg, minHeight: w.md },
+  md: { paddingY: c.sm, paddingX: c.md, fontSize: a.base, secondarySize: a.base - 1, gap: h.xl, minHeight: 52 },
+  lg: { paddingY: c.md, paddingX: c.lg, fontSize: a.md, secondarySize: a.base, gap: s[3.5], minHeight: s[16] }
+}, M = p(function({
   leftElement: i,
   rightElement: e,
-  secondary: s,
+  secondary: o,
   selected: t = !1,
   disabled: r = !1,
-  clickable: n = !1,
-  className: y,
-  style: m,
-  children: u,
-  ...f
-}, v) {
-  const { size: S, variant: a } = D(), d = j[S], h = {
+  clickable: d = !1,
+  className: f,
+  style: u,
+  children: b,
+  ...x
+}, z) {
+  const { size: H, variant: m } = R(), l = W[H], $ = {
     display: "flex",
     alignItems: "center",
-    gap: d.gap,
-    padding: d.padding,
-    minHeight: d.minHeight,
+    gap: l.gap,
+    padding: `${l.paddingY}px ${l.paddingX}px`,
+    minHeight: l.minHeight,
     backgroundColor: t ? "var(--brycks-primary-50)" : "transparent",
-    borderBottom: a === "default" || a === "bordered" ? "1px solid var(--brycks-border-muted)" : void 0,
-    border: a === "separated" ? "1px solid var(--brycks-border-default)" : void 0,
-    borderRadius: a === "separated" ? "var(--brycks-radius-lg)" : void 0,
-    cursor: r ? "not-allowed" : n ? "pointer" : void 0,
+    borderBottom: m === "default" || m === "bordered" ? "1px solid var(--brycks-border-muted)" : void 0,
+    border: m === "separated" ? "1px solid var(--brycks-border-default)" : void 0,
+    borderRadius: m === "separated" ? "var(--brycks-radius-lg)" : void 0,
+    cursor: r ? "not-allowed" : d ? "pointer" : void 0,
     opacity: r ? 0.5 : 1,
-    transition: "background-color 150ms ease-out",
-    ...m
-  }, L = {
+    transition: `background-color ${Y.quick}ms ${j.easeOut}`,
+    ...u
+  }, C = {
     flex: 1,
     display: "flex",
     flexDirection: "column",
-    gap: 2,
+    gap: s[0.5],
     minWidth: 0
-  }, z = {
-    fontSize: d.fontSize,
+  }, N = {
+    fontSize: l.fontSize,
     fontWeight: 500,
     color: "var(--brycks-foreground-default)",
     lineHeight: 1.4
-  }, C = {
-    fontSize: d.secondarySize,
+  }, D = {
+    fontSize: l.secondarySize,
     color: "var(--brycks-foreground-muted)",
     lineHeight: 1.4
-  }, b = {
+  }, v = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ S(
     "li",
     {
-      ref: v,
-      className: c(
+      ref: z,
+      className: y(
         "brycks-list-item",
         t && "brycks-list-item--selected",
-        n && "brycks-list-item--clickable",
+        d && "brycks-list-item--clickable",
         r && "brycks-list-item--disabled",
-        y
+        f
       ),
-      style: h,
-      onMouseEnter: (g) => {
-        n && !r && !t && (g.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
+      style: $,
+      onMouseEnter: (k) => {
+        d && !r && !t && (k.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
       },
-      onMouseLeave: (g) => {
-        t || (g.currentTarget.style.backgroundColor = "transparent");
+      onMouseLeave: (k) => {
+        t || (k.currentTarget.style.backgroundColor = "transparent");
       },
-      ...f,
+      ...x,
       children: [
-        i && /* @__PURE__ */ o("span", { style: b, children: i }),
-        /* @__PURE__ */ x("div", { style: L, children: [
-          /* @__PURE__ */ o("span", { style: z, children: u }),
-          s && /* @__PURE__ */ o("span", { style: C, children: s })
+        i && /* @__PURE__ */ n("span", { style: v, children: i }),
+        /* @__PURE__ */ S("div", { style: C, children: [
+          /* @__PURE__ */ n("span", { style: N, children: b }),
+          o && /* @__PURE__ */ n("span", { style: D, children: o })
         ] }),
-        e && /* @__PURE__ */ o("span", { style: b, children: e })
+        e && /* @__PURE__ */ n("span", { style: v, children: e })
       ]
     }
   );
 });
-w.displayName = "ListItem";
-const R = l(function({ className: i, style: e, ...s }, t) {
+M.displayName = "ListItem";
+const q = p(function({ className: i, style: e, ...o }, t) {
   const r = {
     height: 1,
     backgroundColor: "var(--brycks-border-muted)",
-    margin: "8px 0",
+    margin: `${s[2]}px 0`,
     ...e
   };
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ n(
     "li",
     {
       ref: t,
       role: "separator",
-      className: c("brycks-list-divider", i),
+      className: y("brycks-list-divider", i),
       style: r,
-      ...s
+      ...o
     }
   );
 });
-R.displayName = "ListDivider";
-const T = l(function({ className: i, style: e, children: s, ...t }, r) {
-  const n = {
-    padding: "12px 16px 8px 16px",
-    fontSize: 11,
+q.displayName = "ListDivider";
+const B = p(function({ className: i, style: e, children: o, ...t }, r) {
+  const d = {
+    padding: `${s[3]}px ${s[4]}px ${s[2]}px ${s[4]}px`,
+    fontSize: a.xs,
     fontWeight: 600,
     color: "var(--brycks-foreground-muted)",
     textTransform: "uppercase",
     letterSpacing: "0.05em",
     ...e
   };
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ n(
     "li",
     {
       ref: r,
-      className: c("brycks-list-header", i),
-      style: n,
+      className: y("brycks-list-header", i),
+      style: d,
       ...t,
-      children: s
+      children: o
     }
   );
 });
-T.displayName = "ListHeader";
+B.displayName = "ListHeader";
 export {
-  I as List,
-  R as ListDivider,
-  T as ListHeader,
-  w as ListItem
+  T as List,
+  q as ListDivider,
+  B as ListHeader,
+  M as ListItem
 };
 //# sourceMappingURL=List.js.map

package/dist/components/data/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../../src/components/data/List/List.tsx"],"sourcesContent":["/**\n * List Component\n *\n * A flexible list component for displaying items in a vertical layout.\n * Supports different sizes, icons, and interactive items.\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type ListSize = 'sm' | 'md' | 'lg'\nexport type ListVariant = 'default' | 'bordered' | 'separated'\n\ninterface ListContextValue {\n  size: ListSize\n  variant: ListVariant\n}\n\nconst ListContext = createContext<ListContextValue>({ size: 'md', variant: 'default' })\n\nfunction useListContext() {\n  return useContext(ListContext)\n}\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  /** List size */\n  size?: ListSize\n  /** List variant */\n  variant?: ListVariant\n  /** Whether list items are interactive */\n  interactive?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const List = forwardRef<HTMLUListElement, ListProps>(function List(\n  {\n    size = 'md',\n    variant = 'default',\n    interactive = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const listStyle: CSSProperties = {\n    listStyle: 'none',\n    margin: 0,\n    padding: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: variant === 'separated' ? 8 : 0,\n    border: variant === 'bordered' ? '1px solid var(--brycks-border-default)' : undefined,\n    borderRadius: variant === 'bordered' ? 'var(--brycks-radius-lg)' : undefined,\n    overflow: variant === 'bordered' ? 'hidden' : undefined,\n    ...style,\n  }\n\n  return (\n    <ListContext.Provider value={{ size, variant }}>\n      <ul\n        ref={ref}\n        className={cx(\n          'brycks-list',\n          `brycks-list--${size}`,\n          `brycks-list--${variant}`,\n          interactive && 'brycks-list--interactive',\n          className\n        )}\n        style={listStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </ul>\n    </ListContext.Provider>\n  )\n})\n\nList.displayName = 'List'\n\n// ListItem\nexport interface ListItemProps extends HTMLAttributes<HTMLLIElement> {\n  /** Icon or avatar on the left */\n  leftElement?: ReactNode\n  /** Element on the right (badge, button, etc.) */\n  rightElement?: ReactNode\n  /** Secondary text below the main content */\n  secondary?: ReactNode\n  /** Whether the item is selected */\n  selected?: boolean\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Whether the item is clickable */\n  clickable?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nconst sizeConfig: Record<ListSize, { padding: string; fontSize: number; secondarySize: number; gap: number; minHeight: number }> = {\n  sm: { padding: '8px 12px', fontSize: 13, secondarySize: 12, gap: 10, minHeight: 40 },\n  md: { padding: '12px 16px', fontSize: 14, secondarySize: 13, gap: 12, minHeight: 52 },\n  lg: { padding: '16px 20px', fontSize: 16, secondarySize: 14, gap: 14, minHeight: 64 },\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(\n  {\n    leftElement,\n    rightElement,\n    secondary,\n    selected = false,\n    disabled = false,\n    clickable = false,\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const { size, variant } = useListContext()\n  const config = sizeConfig[size]\n\n  const itemStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: config.gap,\n    padding: config.padding,\n    minHeight: config.minHeight,\n    backgroundColor: selected\n      ? 'var(--brycks-primary-50)'\n      : 'transparent',\n    borderBottom: variant === 'default' || variant === 'bordered'\n      ? '1px solid var(--brycks-border-muted)'\n      : undefined,\n    border: variant === 'separated' ? '1px solid var(--brycks-border-default)' : undefined,\n    borderRadius: variant === 'separated' ? 'var(--brycks-radius-lg)' : undefined,\n    cursor: disabled ? 'not-allowed' : clickable ? 'pointer' : undefined,\n    opacity: disabled ? 0.5 : 1,\n    transition: 'background-color 150ms ease-out',\n    ...style,\n  }\n\n  const contentStyle: CSSProperties = {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    minWidth: 0,\n  }\n\n  const primaryStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const secondaryStyle: CSSProperties = {\n    fontSize: config.secondarySize,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  const elementStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }\n\n  return (\n    <li\n      ref={ref}\n      className={cx(\n        'brycks-list-item',\n        selected && 'brycks-list-item--selected',\n        clickable && 'brycks-list-item--clickable',\n        disabled && 'brycks-list-item--disabled',\n        className\n      )}\n      style={itemStyle}\n      onMouseEnter={(e) => {\n        if (clickable && !disabled && !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      {leftElement && <span style={elementStyle}>{leftElement}</span>}\n      <div style={contentStyle}>\n        <span style={primaryStyle}>{children}</span>\n        {secondary && <span style={secondaryStyle}>{secondary}</span>}\n      </div>\n      {rightElement && <span style={elementStyle}>{rightElement}</span>}\n    </li>\n  )\n})\n\nListItem.displayName = 'ListItem'\n\n// ListDivider\nexport interface ListDividerProps extends HTMLAttributes<HTMLLIElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const ListDivider = forwardRef<HTMLLIElement, ListDividerProps>(function ListDivider(\n  { className, style, ...props },\n  ref\n) {\n  const dividerStyle: CSSProperties = {\n    height: 1,\n    backgroundColor: 'var(--brycks-border-muted)',\n    margin: '8px 0',\n    ...style,\n  }\n\n  return (\n    <li\n      ref={ref}\n      role=\"separator\"\n      className={cx('brycks-list-divider', className)}\n      style={dividerStyle}\n      {...props}\n    />\n  )\n})\n\nListDivider.displayName = 'ListDivider'\n\n// ListHeader\nexport interface ListHeaderProps extends HTMLAttributes<HTMLLIElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const ListHeader = forwardRef<HTMLLIElement, ListHeaderProps>(function ListHeader(\n  { className, style, children, ...props },\n  ref\n) {\n  const headerStyle: CSSProperties = {\n    padding: '12px 16px 8px 16px',\n    fontSize: 11,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n    ...style,\n  }\n\n  return (\n    <li\n      ref={ref}\n      className={cx('brycks-list-header', className)}\n      style={headerStyle}\n      {...props}\n    >\n      {children}\n    </li>\n  )\n})\n\nListHeader.displayName = 'ListHeader'\n"],"names":["ListContext","createContext","useListContext","useContext","List","forwardRef","size","variant","interactive","className","style","children","testId","props","ref","listStyle","jsx","cx","sizeConfig","ListItem","leftElement","rightElement","secondary","selected","disabled","clickable","config","itemStyle","contentStyle","primaryStyle","secondaryStyle","elementStyle","jsxs","e","ListDivider","dividerStyle","ListHeader","headerStyle"],"mappings":"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"}
+{"version":3,"file":"List.js","sources":["../../../../src/components/data/List/List.tsx"],"sourcesContent":["/**\n * List Component\n *\n * A flexible list component for displaying items in a vertical layout.\n * Supports different sizes, icons, and interactive items.\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentGap, componentPaddingX, componentPaddingY } from '../../../design-system/primitives'\n\nexport type ListSize = 'sm' | 'md' | 'lg'\nexport type ListVariant = 'default' | 'bordered' | 'separated'\n\ninterface ListContextValue {\n  size: ListSize\n  variant: ListVariant\n}\n\nconst ListContext = createContext<ListContextValue>({ size: 'md', variant: 'default' })\n\nfunction useListContext() {\n  return useContext(ListContext)\n}\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  /** List size */\n  size?: ListSize\n  /** List variant */\n  variant?: ListVariant\n  /** Whether list items are interactive */\n  interactive?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const List = forwardRef<HTMLUListElement, ListProps>(function List(\n  {\n    size = 'md',\n    variant = 'default',\n    interactive = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const listStyle: CSSProperties = {\n    listStyle: 'none',\n    margin: 0,\n    padding: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: variant === 'separated' ? spacing[2] : 0,\n    border: variant === 'bordered' ? '1px solid var(--brycks-border-default)' : undefined,\n    borderRadius: variant === 'bordered' ? 'var(--brycks-radius-lg)' : undefined,\n    overflow: variant === 'bordered' ? 'hidden' : undefined,\n    ...style,\n  }\n\n  return (\n    <ListContext.Provider value={{ size, variant }}>\n      <ul\n        ref={ref}\n        className={cx(\n          'brycks-list',\n          `brycks-list--${size}`,\n          `brycks-list--${variant}`,\n          interactive && 'brycks-list--interactive',\n          className\n        )}\n        style={listStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </ul>\n    </ListContext.Provider>\n  )\n})\n\nList.displayName = 'List'\n\n// ListItem\nexport interface ListItemProps extends HTMLAttributes<HTMLLIElement> {\n  /** Icon or avatar on the left */\n  leftElement?: ReactNode\n  /** Element on the right (badge, button, etc.) */\n  rightElement?: ReactNode\n  /** Secondary text below the main content */\n  secondary?: ReactNode\n  /** Whether the item is selected */\n  selected?: boolean\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Whether the item is clickable */\n  clickable?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nconst sizeConfig: Record<ListSize, { paddingX: number; paddingY: number; fontSize: number; secondarySize: number; gap: number; minHeight: number }> = {\n  sm: { paddingY: componentPaddingY.md, paddingX: componentPaddingX.sm, fontSize: fontSizes.base - 1, secondarySize: fontSizes.sm, gap: componentGap.lg, minHeight: componentHeights.md },\n  md: { paddingY: componentPaddingX.sm, paddingX: componentPaddingX.md, fontSize: fontSizes.base, secondarySize: fontSizes.base - 1, gap: componentGap.xl, minHeight: 52 },\n  lg: { paddingY: componentPaddingX.md, paddingX: componentPaddingX.lg, fontSize: fontSizes.md, secondarySize: fontSizes.base, gap: spacing[3.5], minHeight: spacing[16] },\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(\n  {\n    leftElement,\n    rightElement,\n    secondary,\n    selected = false,\n    disabled = false,\n    clickable = false,\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const { size, variant } = useListContext()\n  const config = sizeConfig[size]\n\n  const itemStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: config.gap,\n    padding: `${config.paddingY}px ${config.paddingX}px`,\n    minHeight: config.minHeight,\n    backgroundColor: selected\n      ? 'var(--brycks-primary-50)'\n      : 'transparent',\n    borderBottom: variant === 'default' || variant === 'bordered'\n      ? '1px solid var(--brycks-border-muted)'\n      : undefined,\n    border: variant === 'separated' ? '1px solid var(--brycks-border-default)' : undefined,\n    borderRadius: variant === 'separated' ? 'var(--brycks-radius-lg)' : undefined,\n    cursor: disabled ? 'not-allowed' : clickable ? 'pointer' : undefined,\n    opacity: disabled ? 0.5 : 1,\n    transition: `background-color ${durations.quick}ms ${easings.easeOut}`,\n    ...style,\n  }\n\n  const contentStyle: CSSProperties = {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: spacing[0.5],\n    minWidth: 0,\n  }\n\n  const primaryStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const secondaryStyle: CSSProperties = {\n    fontSize: config.secondarySize,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  const elementStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }\n\n  return (\n    <li\n      ref={ref}\n      className={cx(\n        'brycks-list-item',\n        selected && 'brycks-list-item--selected',\n        clickable && 'brycks-list-item--clickable',\n        disabled && 'brycks-list-item--disabled',\n        className\n      )}\n      style={itemStyle}\n      onMouseEnter={(e) => {\n        if (clickable && !disabled && !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      {leftElement && <span style={elementStyle}>{leftElement}</span>}\n      <div style={contentStyle}>\n        <span style={primaryStyle}>{children}</span>\n        {secondary && <span style={secondaryStyle}>{secondary}</span>}\n      </div>\n      {rightElement && <span style={elementStyle}>{rightElement}</span>}\n    </li>\n  )\n})\n\nListItem.displayName = 'ListItem'\n\n// ListDivider\nexport interface ListDividerProps extends HTMLAttributes<HTMLLIElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const ListDivider = forwardRef<HTMLLIElement, ListDividerProps>(function ListDivider(\n  { className, style, ...props },\n  ref\n) {\n  const dividerStyle: CSSProperties = {\n    height: 1,\n    backgroundColor: 'var(--brycks-border-muted)',\n    margin: `${spacing[2]}px 0`,\n    ...style,\n  }\n\n  return (\n    <li\n      ref={ref}\n      role=\"separator\"\n      className={cx('brycks-list-divider', className)}\n      style={dividerStyle}\n      {...props}\n    />\n  )\n})\n\nListDivider.displayName = 'ListDivider'\n\n// ListHeader\nexport interface ListHeaderProps extends HTMLAttributes<HTMLLIElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const ListHeader = forwardRef<HTMLLIElement, ListHeaderProps>(function ListHeader(\n  { className, style, children, ...props },\n  ref\n) {\n  const headerStyle: CSSProperties = {\n    padding: `${spacing[3]}px ${spacing[4]}px ${spacing[2]}px ${spacing[4]}px`,\n    fontSize: fontSizes.xs,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n    ...style,\n  }\n\n  return (\n    <li\n      ref={ref}\n      className={cx('brycks-list-header', className)}\n      style={headerStyle}\n      {...props}\n    >\n      {children}\n    </li>\n  )\n})\n\nListHeader.displayName = 'ListHeader'\n"],"names":["ListContext","createContext","useListContext","useContext","List","forwardRef","size","variant","interactive","className","style","children","testId","props","ref","listStyle","spacing","jsx","cx","sizeConfig","componentPaddingY","componentPaddingX","fontSizes","componentGap","componentHeights","ListItem","leftElement","rightElement","secondary","selected","disabled","clickable","config","itemStyle","durations","easings","contentStyle","primaryStyle","secondaryStyle","elementStyle","jsxs","e","ListDivider","dividerStyle","ListHeader","headerStyle"],"mappings":"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"}

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"),c=require("react"),b=require("../../../utils/styles.cjs"),v=c.createContext({size:"md",variant:"default"});function g(){return c.useContext(v)}const m={sm:{fontSize:13,padding:"8px 12px",headerPadding:"8px 12px"},md:{fontSize:14,padding:"12px 16px",headerPadding:"12px 16px"},lg:{fontSize:15,padding:"16px 20px",headerPadding:"14px 20px"}},T=c.forwardRef(function({size:e="md",variant:t="default",stickyHeader:l=!1,loading:r=!1,className:a,style:n,children:s,testId:f,...y},i){const u={position:"relative",width:"100%",overflow:"auto",...n},p={width:"100%",borderCollapse:t==="bordered"?"separate":"collapse",borderSpacing:0,fontSize:m[e].fontSize,opacity:r?.6:1,transition:"opacity 150ms ease-out"};return o.jsx(v.Provider,{value:{size:e,variant:t},children:o.jsx("div",{className:"brycks-table-container",style:u,children:o.jsx("table",{ref:i,className:b.cx("brycks-table",`brycks-table--${e}`,`brycks-table--${t}`,a),style:p,"data-testid":f,...y,children:s})})})});T.displayName="Table";const k=c.forwardRef(function({sticky:e=!1,className:t,style:l,children:r,...a},n){const s={backgroundColor:"var(--brycks-background-muted)",position:e?"sticky":void 0,top:e?0:void 0,zIndex:e?1:void 0,...l};return o.jsx("thead",{ref:n,className:b.cx("brycks-table-head",e&&"brycks-table-head--sticky",t),style:s,...a,children:r})});k.displayName="TableHead";const h=c.forwardRef(function({className:e,style:t,children:l,...r},a){const n={...t};return o.jsx("tbody",{ref:a,className:b.cx("brycks-table-body",e),style:n,...r,children:l})});h.displayName="TableBody";const w=c.forwardRef(function({selected:e=!1,clickable:t=!1,className:l,style:r,children:a,...n},s){const{variant:f}=g(),y={backgroundColor:e?"var(--brycks-primary-50)":"transparent",borderBottom:f!=="bordered"?"1px solid var(--brycks-border-muted)":void 0,cursor:t?"pointer":void 0,transition:"background-color 150ms ease-out",...r};return o.jsx("tr",{ref:s,className:b.cx("brycks-table-row",e&&"brycks-table-row--selected",t&&"brycks-table-row--clickable",l),style:y,onMouseEnter:i=>{t&&!e&&(i.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:i=>{e||(i.currentTarget.style.backgroundColor="transparent")},...n,children:a})});w.displayName="TableRow";function L({direction:d}){return d?o.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:d==="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},children:[o.jsx("path",{d:"M7 3L10 6H4L7 3Z",fill:"currentColor"}),o.jsx("path",{d:"M7 11L4 8H10L7 11Z",fill:"currentColor"})]})}const C=c.forwardRef(function({sortable:e=!1,sortDirection:t=null,onSort:l,align:r="left",className:a,style:n,children:s,...f},y){const{size:i}=g(),p={padding:m[i].headerPadding,fontWeight:600,color:"var(--brycks-foreground-muted)",textAlign:r,whiteSpace:"nowrap",cursor:e?"pointer":void 0,userSelect:e?"none":void 0,transition:"color 150ms ease-out",...n},H={display:"flex",alignItems:"center",gap:6,justifyContent:r==="right"?"flex-end":r==="center"?"center":"flex-start"},R=()=>{e&&l&&l()};return o.jsx("th",{ref:y,className:b.cx("brycks-table-header",e&&"brycks-table-header--sortable",a),style:p,onClick:R,onMouseEnter:x=>{e&&(x.currentTarget.style.color="var(--brycks-foreground-default)")},onMouseLeave:x=>{x.currentTarget.style.color="var(--brycks-foreground-muted)"},...f,children:o.jsxs("span",{style:H,children:[s,e&&o.jsx(L,{direction:t})]})})});C.displayName="TableHeader";const S=c.forwardRef(function({align:e="left",truncate:t=!1,className:l,style:r,children:a,...n},s){const{size:f,variant:y}=g(),u={padding:m[f].padding,color:"var(--brycks-foreground-default)",textAlign:e,verticalAlign:"middle",border:y==="bordered"?"1px solid var(--brycks-border-muted)":void 0,maxWidth:t?200:void 0,overflow:t?"hidden":void 0,textOverflow:t?"ellipsis":void 0,whiteSpace:t?"nowrap":void 0,...r};return o.jsx("td",{ref:s,className:b.cx("brycks-table-cell",t&&"brycks-table-cell--truncate",l),style:u,title:t&&typeof a=="string"?a:void 0,...n,children:a})});S.displayName="TableCell";const j=c.forwardRef(function({className:e,style:t,children:l,...r},a){const n={backgroundColor:"var(--brycks-background-muted)",fontWeight:500,...t};return o.jsx("tfoot",{ref:a,className:b.cx("brycks-table-foot",e),style:n,...r,children:l})});j.displayName="TableFoot";const N=c.forwardRef(function({placement:e="bottom",className:t,style:l,children:r,...a},n){const s={captionSide:e,padding:"12px 16px",fontSize:13,color:"var(--brycks-foreground-muted)",textAlign:"left",...l};return o.jsx("caption",{ref:n,className:b.cx("brycks-table-caption",t),style:s,...a,children:r})});N.displayName="TableCaption";exports.Table=T;exports.TableBody=h;exports.TableCaption=N;exports.TableCell=S;exports.TableFoot=j;exports.TableHead=k;exports.TableHeader=C;exports.TableRow=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),u=require("../../../utils/styles.cjs"),g=require("../../../design-system/tokens/motion.cjs"),s=require("../../../design-system/primitives/sizing.cjs"),k=require("../../../design-system/tokens/spacing.cjs"),m=require("../../../design-system/tokens/typography.cjs"),w=b.createContext({size:"md",variant:"default"});function v(){return b.useContext(w)}const T={sm:{fontSize:m.fontSizes.base-1,paddingY:s.componentPaddingY.md,paddingX:s.componentPaddingX.sm,headerPaddingY:s.componentPaddingY.md,headerPaddingX:s.componentPaddingX.sm},md:{fontSize:m.fontSizes.base,paddingY:s.componentPaddingX.sm,paddingX:s.componentPaddingX.md,headerPaddingY:s.componentPaddingX.sm,headerPaddingX:s.componentPaddingX.md},lg:{fontSize:m.fontSizes.base+1,paddingY:s.componentPaddingX.md,paddingX:s.componentPaddingX.lg,headerPaddingY:k.spacing[3.5],headerPaddingX:s.componentPaddingX.lg}},S=b.forwardRef(function({size:e="md",variant:o="default",stickyHeader:r=!1,loading:a=!1,className:n,style:d,children:l,testId:f,...p},c){const y={position:"relative",width:"100%",overflow:"auto",...d},x={width:"100%",borderCollapse:o==="bordered"?"separate":"collapse",borderSpacing:0,fontSize:T[e].fontSize,opacity:a?.6:1,transition:`opacity ${g.durations.quick}ms ${g.easings.easeOut}`};return t.jsx(w.Provider,{value:{size:e,variant:o},children:t.jsx("div",{className:"brycks-table-container",style:y,children:t.jsx("table",{ref:c,className:u.cx("brycks-table",`brycks-table--${e}`,`brycks-table--${o}`,n),style:x,"data-testid":f,...p,children:l})})})});S.displayName="Table";const C=b.forwardRef(function({sticky:e=!1,className:o,style:r,children:a,...n},d){const l={backgroundColor:"var(--brycks-background-muted)",position:e?"sticky":void 0,top:e?0:void 0,zIndex:e?1:void 0,...r};return t.jsx("thead",{ref:d,className:u.cx("brycks-table-head",e&&"brycks-table-head--sticky",o),style:l,...n,children:a})});C.displayName="TableHead";const j=b.forwardRef(function({className:e,style:o,children:r,...a},n){const d={...o};return t.jsx("tbody",{ref:n,className:u.cx("brycks-table-body",e),style:d,...a,children:r})});j.displayName="TableBody";const P=b.forwardRef(function({selected:e=!1,clickable:o=!1,className:r,style:a,children:n,...d},l){const{variant:f}=v(),p={backgroundColor:e?"var(--brycks-primary-50)":"transparent",borderBottom:f!=="bordered"?"1px solid var(--brycks-border-muted)":void 0,cursor:o?"pointer":void 0,transition:`background-color ${g.durations.quick}ms ${g.easings.easeOut}`,...a};return t.jsx("tr",{ref:l,className:u.cx("brycks-table-row",e&&"brycks-table-row--selected",o&&"brycks-table-row--clickable",r),style:p,onMouseEnter:c=>{o&&!e&&(c.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:c=>{e||(c.currentTarget.style.backgroundColor="transparent")},...d,children:n})});P.displayName="TableRow";function q({direction:i}){return i?t.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",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},children:[t.jsx("path",{d:"M7 3L10 6H4L7 3Z",fill:"currentColor"}),t.jsx("path",{d:"M7 11L4 8H10L7 11Z",fill:"currentColor"})]})}const N=b.forwardRef(function({sortable:e=!1,sortDirection:o=null,onSort:r,align:a="left",className:n,style:d,children:l,...f},p){const{size:c}=v(),y=T[c],x={padding:`${y.headerPaddingY}px ${y.headerPaddingX}px`,fontWeight:600,color:"var(--brycks-foreground-muted)",textAlign:a,whiteSpace:"nowrap",cursor:e?"pointer":void 0,userSelect:e?"none":void 0,transition:`color ${g.durations.quick}ms ${g.easings.easeOut}`,...d},R={display:"flex",alignItems:"center",gap:s.componentGap.sm,justifyContent:a==="right"?"flex-end":a==="center"?"center":"flex-start"},$=()=>{e&&r&&r()};return t.jsx("th",{ref:p,className:u.cx("brycks-table-header",e&&"brycks-table-header--sortable",n),style:x,onClick:$,onMouseEnter:h=>{e&&(h.currentTarget.style.color="var(--brycks-foreground-default)")},onMouseLeave:h=>{h.currentTarget.style.color="var(--brycks-foreground-muted)"},...f,children:t.jsxs("span",{style:R,children:[l,e&&t.jsx(q,{direction:o})]})})});N.displayName="TableHeader";const X=b.forwardRef(function({align:e="left",truncate:o=!1,className:r,style:a,children:n,...d},l){const{size:f,variant:p}=v(),c=T[f],y={padding:`${c.paddingY}px ${c.paddingX}px`,color:"var(--brycks-foreground-default)",textAlign:e,verticalAlign:"middle",border:p==="bordered"?"1px solid var(--brycks-border-muted)":void 0,maxWidth:o?200:void 0,overflow:o?"hidden":void 0,textOverflow:o?"ellipsis":void 0,whiteSpace:o?"nowrap":void 0,...a};return t.jsx("td",{ref:l,className:u.cx("brycks-table-cell",o&&"brycks-table-cell--truncate",r),style:y,title:o&&typeof n=="string"?n:void 0,...d,children:n})});X.displayName="TableCell";const z=b.forwardRef(function({className:e,style:o,children:r,...a},n){const d={backgroundColor:"var(--brycks-background-muted)",fontWeight:500,...o};return t.jsx("tfoot",{ref:n,className:u.cx("brycks-table-foot",e),style:d,...a,children:r})});z.displayName="TableFoot";const H=b.forwardRef(function({placement:e="bottom",className:o,style:r,children:a,...n},d){const l={captionSide:e,padding:`${k.spacing[3]}px ${k.spacing[4]}px`,fontSize:m.fontSizes.base-1,color:"var(--brycks-foreground-muted)",textAlign:"left",...r};return t.jsx("caption",{ref:d,className:u.cx("brycks-table-caption",o),style:l,...n,children:a})});H.displayName="TableCaption";exports.Table=S;exports.TableBody=j;exports.TableCaption=H;exports.TableCell=X;exports.TableFoot=z;exports.TableHead=C;exports.TableHeader=N;exports.TableRow=P;
 //# 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'\n\nexport type TableSize = 'sm' | 'md' | 'lg'\nexport type TableVariant = 'default' | 'striped' | 'bordered'\n\ninterface TableContextValue {\n  size: TableSize\n  variant: TableVariant\n}\n\nconst TableContext = createContext<TableContextValue>({ size: 'md', variant: 'default' })\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; padding: string; headerPadding: string }> = {\n  sm: { fontSize: 13, padding: '8px 12px', headerPadding: '8px 12px' },\n  md: { fontSize: 14, padding: '12px 16px', headerPadding: '12px 16px' },\n  lg: { fontSize: 15, padding: '16px 20px', headerPadding: '14px 20px' },\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  {\n    size = 'md',\n    variant = 'default',\n    stickyHeader: _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    opacity: loading ? 0.6 : 1,\n    transition: 'opacity 150ms ease-out',\n  }\n\n  return (\n    <TableContext.Provider value={{ size, variant }}>\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          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 headStyle: CSSProperties = {\n    backgroundColor: 'var(--brycks-background-muted)',\n    position: sticky ? 'sticky' : undefined,\n    top: sticky ? 0 : undefined,\n    zIndex: sticky ? 1 : undefined,\n    ...style,\n  }\n\n  return (\n    <thead\n      ref={ref}\n      className={cx('brycks-table-head', sticky && '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-50)'\n      : 'transparent',\n    borderBottom: variant !== 'bordered' ? '1px solid var(--brycks-border-muted)' : undefined,\n    cursor: clickable ? 'pointer' : undefined,\n    transition: 'background-color 150ms ease-out',\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 }}>\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\">\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.headerPadding,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: align,\n    whiteSpace: 'nowrap',\n    cursor: sortable ? 'pointer' : undefined,\n    userSelect: sortable ? 'none' : undefined,\n    transition: 'color 150ms ease-out',\n    ...style,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 6,\n    justifyContent: align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start',\n  }\n\n  const handleClick = () => {\n    if (sortable && onSort) {\n      onSort()\n    }\n  }\n\n  return (\n    <th\n      ref={ref}\n      className={cx('brycks-table-header', sortable && 'brycks-table-header--sortable', className)}\n      style={headerStyle}\n      onClick={handleClick}\n      onMouseEnter={(e) => {\n        if (sortable) {\n          e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n      }}\n      {...props}\n    >\n      <span style={contentStyle}>\n        {children}\n        {sortable && <SortIcon direction={sortDirection} />}\n      </span>\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.padding,\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: '12px 16px',\n    fontSize: 13,\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","Table","forwardRef","size","variant","_stickyHeader","loading","className","style","children","testId","props","ref","containerStyle","tableStyle","jsx","cx","TableHead","sticky","headStyle","TableBody","bodyStyle","TableRow","selected","clickable","rowStyle","e","SortIcon","direction","jsxs","TableHeader","sortable","sortDirection","onSort","align","headerStyle","contentStyle","handleClick","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} 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}\n\nconst TableContext = createContext<TableContextValue>({ size: 'md', variant: 'default' })\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: _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    opacity: loading ? 0.6 : 1,\n    transition: `opacity ${durations.quick}ms ${easings.easeOut}`,\n  }\n\n  return (\n    <TableContext.Provider value={{ size, variant }}>\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          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 headStyle: CSSProperties = {\n    backgroundColor: 'var(--brycks-background-muted)',\n    position: sticky ? 'sticky' : undefined,\n    top: sticky ? 0 : undefined,\n    zIndex: sticky ? 1 : undefined,\n    ...style,\n  }\n\n  return (\n    <thead\n      ref={ref}\n      className={cx('brycks-table-head', sticky && '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-50)'\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 }}>\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\">\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    cursor: sortable ? 'pointer' : undefined,\n    userSelect: sortable ? 'none' : undefined,\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  const handleClick = () => {\n    if (sortable && onSort) {\n      onSort()\n    }\n  }\n\n  return (\n    <th\n      ref={ref}\n      className={cx('brycks-table-header', sortable && 'brycks-table-header--sortable', className)}\n      style={headerStyle}\n      onClick={handleClick}\n      onMouseEnter={(e) => {\n        if (sortable) {\n          e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n      }}\n      {...props}\n    >\n      <span style={contentStyle}>\n        {children}\n        {sortable && <SortIcon direction={sortDirection} />}\n      </span>\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","headStyle","TableBody","bodyStyle","TableRow","selected","clickable","rowStyle","e","SortIcon","direction","jsxs","TableHeader","sortable","sortDirection","onSort","align","config","headerStyle","contentStyle","componentGap","handleClick","TableCell","truncate","cellStyle","TableFoot","footStyle","TableCaption","placement","captionStyle"],"mappings":"gZA4BMA,EAAeC,EAAAA,cAAiC,CAAE,KAAM,KAAM,QAAS,UAAW,EAExF,SAASC,GAAkB,CACzB,OAAOC,EAAAA,WAAWH,CAAY,CAChC,CAiBA,MAAMI,EAA0I,CAC9I,GAAI,CAAE,SAAUC,EAAAA,UAAU,KAAO,EAAG,SAAUC,EAAAA,kBAAkB,GAAI,SAAUC,EAAAA,kBAAkB,GAAI,eAAgBD,EAAAA,kBAAkB,GAAI,eAAgBC,EAAAA,kBAAkB,EAAA,EAC5K,GAAI,CAAE,SAAUF,EAAAA,UAAU,KAAM,SAAUE,EAAAA,kBAAkB,GAAI,SAAUA,EAAAA,kBAAkB,GAAI,eAAgBA,EAAAA,kBAAkB,GAAI,eAAgBA,EAAAA,kBAAkB,EAAA,EACxK,GAAI,CAAE,SAAUF,EAAAA,UAAU,KAAO,EAAG,SAAUE,EAAAA,kBAAkB,GAAI,SAAUA,EAAAA,kBAAkB,GAAI,eAAgBC,EAAAA,QAAQ,GAAG,EAAG,eAAgBD,EAAAA,kBAAkB,EAAA,CACtK,EAEaE,EAAQC,EAAAA,WAAyC,SAC5D,CACE,KAAAC,EAAO,KACP,QAAAC,EAAU,UACV,aAAcC,EAAgB,GAC9B,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAgC,CACpC,SAAU,WACV,MAAO,OACP,SAAU,OACV,GAAGL,CAAA,EAGCM,EAA4B,CAChC,MAAO,OACP,eAAgBV,IAAY,WAAa,WAAa,WACtD,cAAe,EACf,SAAUR,EAAWO,CAAI,EAAE,SAC3B,QAASG,EAAU,GAAM,EACzB,WAAY,WAAWS,EAAAA,UAAU,KAAK,MAAMC,EAAAA,QAAQ,OAAO,EAAA,EAG7D,OACEC,EAAAA,IAACzB,EAAa,SAAb,CAAsB,MAAO,CAAE,KAAAW,EAAM,QAAAC,CAAA,EACpC,SAAAa,EAAAA,IAAC,MAAA,CAAI,UAAU,yBAAyB,MAAOJ,EAC7C,SAAAI,EAAAA,IAAC,QAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,GAAG,eAAgB,iBAAiBf,CAAI,GAAI,iBAAiBC,CAAO,GAAIG,CAAS,EAC5F,MAAOO,EACP,cAAaJ,EACZ,GAAGC,EAEH,SAAAF,CAAA,CAAA,EAEL,CAAA,CACF,CAEJ,CAAC,EAEDR,EAAM,YAAc,QAUb,MAAMkB,EAAYjB,EAAAA,WAAoD,SAC3E,CAAE,OAAAkB,EAAS,GAAO,UAAAb,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACjDC,EACA,CACA,MAAMS,EAA2B,CAC/B,gBAAiB,iCACjB,SAAUD,EAAS,SAAW,OAC9B,IAAKA,EAAS,EAAI,OAClB,OAAQA,EAAS,EAAI,OACrB,GAAGZ,CAAA,EAGL,OACES,EAAAA,IAAC,QAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,GAAG,oBAAqBE,GAAU,4BAA6Bb,CAAS,EACnF,MAAOc,EACN,GAAGV,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDU,EAAU,YAAc,YAQjB,MAAMG,EAAYpB,EAAAA,WAAoD,SAC3E,CAAE,UAAAK,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACjCC,EACA,CACA,MAAMW,EAA2B,CAC/B,GAAGf,CAAA,EAGL,OACES,EAAAA,IAAC,QAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,GAAG,oBAAqBX,CAAS,EAC5C,MAAOgB,EACN,GAAGZ,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDa,EAAU,YAAc,YAYjB,MAAME,EAAWtB,EAAAA,WAA+C,SACrE,CAAE,SAAAuB,EAAW,GAAO,UAAAC,EAAY,GAAO,UAAAnB,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACtEC,EACA,CACA,KAAM,CAAE,QAAAR,CAAA,EAAYV,EAAA,EAEdiC,EAA0B,CAC9B,gBAAiBF,EACb,2BACA,cACJ,aAAcrB,IAAY,WAAa,uCAAyC,OAChF,OAAQsB,EAAY,UAAY,OAChC,WAAY,oBAAoBX,EAAAA,UAAU,KAAK,MAAMC,EAAAA,QAAQ,OAAO,GACpE,GAAGR,CAAA,EAGL,OACES,EAAAA,IAAC,KAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,GACT,mBACAO,GAAY,6BACZC,GAAa,8BACbnB,CAAA,EAEF,MAAOoB,EACP,aAAeC,GAAM,CACfF,GAAa,CAACD,IAChBG,EAAE,cAAc,MAAM,gBAAkB,iCAE5C,EACA,aAAeA,GAAM,CACdH,IACHG,EAAE,cAAc,MAAM,gBAAkB,cAE5C,EACC,GAAGjB,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDe,EAAS,YAAc,WAgBvB,SAASK,EAAS,CAAE,UAAAC,GAAmD,CACrE,OAAKA,EAUHb,EAAAA,IAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAClD,SAAAa,IAAc,YACZ,OAAA,CAAK,EAAE,mBAAmB,KAAK,cAAA,CAAe,EAE/Cb,EAAAA,IAAC,OAAA,CAAK,EAAE,qBAAqB,KAAK,cAAA,CAAe,CAAA,CAErD,EAdEc,EAAAA,KAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAO,CAAE,QAAS,IAC5E,SAAA,CAAAd,EAAAA,IAAC,OAAA,CAAK,EAAE,mBAAmB,KAAK,eAAe,EAC/CA,EAAAA,IAAC,OAAA,CAAK,EAAE,qBAAqB,KAAK,cAAA,CAAe,CAAA,EACnD,CAaN,CAEO,MAAMe,EAAc9B,EAAAA,WAAmD,SAC5E,CACE,SAAA+B,EAAW,GACX,cAAAC,EAAgB,KAChB,OAAAC,EACA,MAAAC,EAAQ,OACR,UAAA7B,EACA,MAAAC,EACA,SAAAC,EACA,GAAGE,CACL,EACAC,EACA,CACA,KAAM,CAAE,KAAAT,CAAA,EAAST,EAAA,EACX2C,EAASzC,EAAWO,CAAI,EAExBmC,EAA6B,CACjC,QAAS,GAAGD,EAAO,cAAc,MAAMA,EAAO,cAAc,KAC5D,WAAY,IACZ,MAAO,iCACP,UAAWD,EACX,WAAY,SACZ,OAAQH,EAAW,UAAY,OAC/B,WAAYA,EAAW,OAAS,OAChC,WAAY,SAASlB,EAAAA,UAAU,KAAK,MAAMC,EAAAA,QAAQ,OAAO,GACzD,GAAGR,CAAA,EAGC+B,EAA8B,CAClC,QAAS,OACT,WAAY,SACZ,IAAKC,EAAAA,aAAa,GAClB,eAAgBJ,IAAU,QAAU,WAAaA,IAAU,SAAW,SAAW,YAAA,EAG7EK,EAAc,IAAM,CACpBR,GAAYE,GACdA,EAAA,CAEJ,EAEA,OACElB,EAAAA,IAAC,KAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,GAAG,sBAAuBe,GAAY,gCAAiC1B,CAAS,EAC3F,MAAO+B,EACP,QAASG,EACT,aAAeb,GAAM,CACfK,IACFL,EAAE,cAAc,MAAM,MAAQ,mCAElC,EACA,aAAeA,GAAM,CACnBA,EAAE,cAAc,MAAM,MAAQ,gCAChC,EACC,GAAGjB,EAEJ,SAAAoB,EAAAA,KAAC,OAAA,CAAK,MAAOQ,EACV,SAAA,CAAA9B,EACAwB,GAAYhB,EAAAA,IAACY,EAAA,CAAS,UAAWK,CAAA,CAAe,CAAA,CAAA,CACnD,CAAA,CAAA,CAGN,CAAC,EAEDF,EAAY,YAAc,cAYnB,MAAMU,EAAYxC,EAAAA,WAAiD,SACxE,CAAE,MAAAkC,EAAQ,OAAQ,SAAAO,EAAW,GAAO,UAAApC,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACnEC,EACA,CACA,KAAM,CAAE,KAAAT,EAAM,QAAAC,CAAA,EAAYV,EAAA,EACpB2C,EAASzC,EAAWO,CAAI,EAExByC,EAA2B,CAC/B,QAAS,GAAGP,EAAO,QAAQ,MAAMA,EAAO,QAAQ,KAChD,MAAO,mCACP,UAAWD,EACX,cAAe,SACf,OAAQhC,IAAY,WAAa,uCAAyC,OAC1E,SAAUuC,EAAW,IAAM,OAC3B,SAAUA,EAAW,SAAW,OAChC,aAAcA,EAAW,WAAa,OACtC,WAAYA,EAAW,SAAW,OAClC,GAAGnC,CAAA,EAGL,OACES,EAAAA,IAAC,KAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,GAAG,oBAAqByB,GAAY,8BAA+BpC,CAAS,EACvF,MAAOqC,EACP,MAAOD,GAAY,OAAOlC,GAAa,SAAWA,EAAW,OAC5D,GAAGE,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDiC,EAAU,YAAc,YAQjB,MAAMG,EAAY3C,EAAAA,WAAoD,SAC3E,CAAE,UAAAK,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACjCC,EACA,CACA,MAAMkC,EAA2B,CAC/B,gBAAiB,iCACjB,WAAY,IACZ,GAAGtC,CAAA,EAGL,OACES,EAAAA,IAAC,QAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,GAAG,oBAAqBX,CAAS,EAC5C,MAAOuC,EACN,GAAGnC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDoC,EAAU,YAAc,YAUjB,MAAME,EAAe7C,EAAAA,WAAuD,SACjF,CAAE,UAAA8C,EAAY,SAAU,UAAAzC,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACvDC,EACA,CACA,MAAMqC,EAA8B,CAClC,YAAaD,EACb,QAAS,GAAGhD,EAAAA,QAAQ,CAAC,CAAC,MAAMA,EAAAA,QAAQ,CAAC,CAAC,KACtC,SAAUH,EAAAA,UAAU,KAAO,EAC3B,MAAO,iCACP,UAAW,OACX,GAAGW,CAAA,EAGL,OACES,EAAAA,IAAC,UAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,GAAG,uBAAwBX,CAAS,EAC/C,MAAO0C,EACN,GAAGtC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDsC,EAAa,YAAc"}