@brycks/core-front 0.3.3 → 0.3.4

package/dist/components/form/Switch/Switch.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),C=require("../../../utils/styles.cjs"),p=require("../../../design-system/primitives/sizing.cjs"),d=require("../../../design-system/primitives/opacity.cjs"),I=require("../../../design-system/primitives/focus.cjs"),b=require("../../../design-system/primitives/transitions.cjs"),r=require("../../../design-system/primitives/typography.cjs"),f=h.forwardRef(function({size:i="md",label:a,description:c,className:m,style:S,testId:w,disabled:o,checked:s,onChange:x,...k},v){const[j,y]=h.useState(!1),[g,l]=h.useState(!1),t=p.switchSizes[i],u=r.componentFontSize[i],n=(t.height-t.thumb)/2,q=t.width-t.thumb-n*2,R={display:"inline-flex",alignItems:"flex-start",gap:p.componentGap.xl,cursor:o?"not-allowed":"pointer",opacity:o?d.stateOpacity.disabled:1},H={position:"relative",width:t.width,height:t.height,borderRadius:t.height/2,backgroundColor:s?"var(--brycks-primary-default)":"var(--brycks-background-muted)",border:`1px solid ${s?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,transition:b.transition.spring,boxShadow:j?I.focusRing.default:"inset 0 1px 2px rgba(0,0,0,0.05)",flexShrink:0},F={position:"absolute",top:n,left:s?n+q:n,width:g?t.thumb+4:t.thumb,height:t.thumb,borderRadius:t.thumb/2,backgroundColor:"var(--brycks-background-elevated)",boxShadow:"var(--brycks-shadow-sm)",transition:b.transition.spring,transform:g?`scale(${d.scale.pressedStrong})`:`scale(${d.scale.normal})`},L={position:"absolute",width:"100%",height:"100%",opacity:0,cursor:o?"not-allowed":"pointer",margin:0},M={display:"flex",flexDirection:"column",gap:p.componentGap.xs,paddingTop:(t.height-u*r.componentLineHeight.snug)/2},$={fontSize:u,lineHeight:r.componentLineHeight.snug,color:"var(--brycks-foreground-default)",userSelect:"none"},z={fontSize:u-1,lineHeight:r.componentLineHeight.snug,color:"var(--brycks-foreground-muted)",userSelect:"none"};return e.jsxs("label",{className:C.cx("brycks-switch",`brycks-switch--${i}`,s&&"brycks-switch--checked",o&&"brycks-switch--disabled",m),style:{...R,...S},"data-testid":w,onMouseDown:()=>l(!0),onMouseUp:()=>l(!1),onMouseLeave:()=>l(!1),children:[e.jsxs("span",{style:H,children:[e.jsx("input",{ref:v,type:"checkbox",role:"switch",style:L,checked:s,disabled:o,"aria-checked":s,onChange:x,onFocus:()=>y(!0),onBlur:()=>y(!1),...k}),e.jsx("span",{style:F})]}),(a||c)&&e.jsxs("span",{style:M,children:[a&&e.jsx("span",{style:$,children:a}),c&&e.jsx("span",{style:z,children:c})]})]})});f.displayName="Switch";exports.Switch=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("react"),_=require("../../../utils/styles.cjs"),k=require("../../../design-system/primitives/sizing.cjs"),n=y.forwardRef(function({size:r="md",label:e,description:h,className:l,style:b,testId:w,disabled:a,checked:c,onChange:d,...u},o){const s=k.switchSizes[r],i=(s.height-s.thumb)/2,m=s.width-s.thumb-i*2;return t.jsxs("label",{className:_.cx("brycks-switch",`brycks-switch--${r}`,c&&"brycks-switch--checked",a&&"brycks-switch--disabled",l),style:b,"data-testid":w,children:[t.jsxs("span",{className:"brycks-switch__track",style:{width:s.width,height:s.height,borderRadius:s.height/2},children:[t.jsx("input",{ref:o,type:"checkbox",role:"switch",className:"brycks-switch__input",checked:c,disabled:a,"aria-checked":c,onChange:d,...u}),t.jsx("span",{className:"brycks-switch__thumb",style:{top:i,left:c?i+m:i,width:s.thumb,height:s.thumb,borderRadius:s.thumb/2}})]}),(e||h)&&t.jsxs("span",{className:"brycks-switch__label",children:[e&&t.jsx("span",{className:"brycks-switch__label-text",children:e}),h&&t.jsx("span",{className:"brycks-switch__description",children:h})]})]})});n.displayName="Switch";exports.Switch=n;
 //# sourceMappingURL=Switch.cjs.map

package/dist/components/form/Switch/Switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/form/Switch/Switch.tsx"],"sourcesContent":["/**\r\n * Switch Component\r\n *\r\n * Apple-inspired toggle switch with smooth spring animation.\r\n * Clean, tactile design with satisfying micro-interactions.\r\n *\r\n * @module components/form/Switch\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  type CSSProperties,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport {\r\n  switchSizes,\r\n  componentGap,\r\n  componentFontSize,\r\n  componentLineHeight,\r\n  focusRing,\r\n  transition,\r\n  stateOpacity,\r\n  scale,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SwitchSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\r\n  /** Switch size */\r\n  size?: SwitchSize\r\n  /** Label text */\r\n  label?: ReactNode\r\n  /** Description below label */\r\n  description?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\r\n  {\r\n    size = 'md',\r\n    label,\r\n    description,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    checked,\r\n    onChange,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n  const [isPressed, setIsPressed] = useState(false)\r\n\r\n  const config = switchSizes[size]\r\n  const fontSize = componentFontSize[size]\r\n\r\n  const padding = (config.height - config.thumb) / 2\r\n  const travel = config.width - config.thumb - padding * 2\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'flex-start',\r\n    gap: componentGap.xl,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    opacity: disabled ? stateOpacity.disabled : 1,\r\n  }\r\n\r\n  const trackStyle: CSSProperties = {\r\n    position: 'relative',\r\n    width: config.width,\r\n    height: config.height,\r\n    borderRadius: config.height / 2,\r\n    backgroundColor: checked\r\n      ? 'var(--brycks-primary-default)'\r\n      : 'var(--brycks-background-muted)',\r\n    border: `1px solid ${checked ? 'var(--brycks-primary-default)' : 'var(--brycks-border-default)'}`,\r\n    transition: transition.spring,\r\n    boxShadow: isFocused ? focusRing.default : 'inset 0 1px 2px rgba(0,0,0,0.05)',\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const thumbStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: padding,\r\n    left: checked ? padding + travel : padding,\r\n    width: isPressed ? config.thumb + 4 : config.thumb,\r\n    height: config.thumb,\r\n    borderRadius: config.thumb / 2,\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    boxShadow: 'var(--brycks-shadow-sm)',\r\n    transition: transition.spring,\r\n    transform: isPressed ? `scale(${scale.pressedStrong})` : `scale(${scale.normal})`,\r\n  }\r\n\r\n  const inputStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    width: '100%',\r\n    height: '100%',\r\n    opacity: 0,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    margin: 0,\r\n  }\r\n\r\n  const labelContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: componentGap.xs,\r\n    paddingTop: (config.height - fontSize * componentLineHeight.snug) / 2,\r\n  }\r\n\r\n  const labelStyle: CSSProperties = {\r\n    fontSize,\r\n    lineHeight: componentLineHeight.snug,\r\n    color: 'var(--brycks-foreground-default)',\r\n    userSelect: 'none',\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSize - 1,\r\n    lineHeight: componentLineHeight.snug,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    userSelect: 'none',\r\n  }\r\n\r\n  return (\r\n    <label\r\n      className={cx(\r\n        'brycks-switch',\r\n        `brycks-switch--${size}`,\r\n        checked && 'brycks-switch--checked',\r\n        disabled && 'brycks-switch--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n      data-testid={testId}\r\n      onMouseDown={() => setIsPressed(true)}\r\n      onMouseUp={() => setIsPressed(false)}\r\n      onMouseLeave={() => setIsPressed(false)}\r\n    >\r\n      <span style={trackStyle}>\r\n        <input\r\n          ref={ref}\r\n          type=\"checkbox\"\r\n          role=\"switch\"\r\n          style={inputStyle}\r\n          checked={checked}\r\n          disabled={disabled}\r\n          aria-checked={checked}\r\n          onChange={onChange}\r\n          onFocus={() => setIsFocused(true)}\r\n          onBlur={() => setIsFocused(false)}\r\n          {...props}\r\n        />\r\n        <span style={thumbStyle} />\r\n      </span>\r\n\r\n      {(label || description) && (\r\n        <span style={labelContainerStyle}>\r\n          {label && <span style={labelStyle}>{label}</span>}\r\n          {description && <span style={descriptionStyle}>{description}</span>}\r\n        </span>\r\n      )}\r\n    </label>\r\n  )\r\n})\r\n\r\nSwitch.displayName = 'Switch'\r\n"],"names":["Switch","forwardRef","size","label","description","className","style","testId","disabled","checked","onChange","props","ref","isFocused","setIsFocused","useState","isPressed","setIsPressed","config","switchSizes","fontSize","componentFontSize","padding","travel","wrapperStyle","componentGap","stateOpacity","trackStyle","transition","focusRing","thumbStyle","scale","inputStyle","labelContainerStyle","componentLineHeight","labelStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":"0dA2CaA,EAASC,EAAAA,WAA0C,SAC9D,CACE,KAAAC,EAAO,KACP,MAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAC1C,CAACC,EAAWC,CAAY,EAAIF,EAAAA,SAAS,EAAK,EAE1CG,EAASC,EAAAA,YAAYjB,CAAI,EACzBkB,EAAWC,EAAAA,kBAAkBnB,CAAI,EAEjCoB,GAAWJ,EAAO,OAASA,EAAO,OAAS,EAC3CK,EAASL,EAAO,MAAQA,EAAO,MAAQI,EAAU,EAEjDE,EAA8B,CAClC,QAAS,cACT,WAAY,aACZ,IAAKC,EAAAA,aAAa,GAClB,OAAQjB,EAAW,cAAgB,UACnC,QAASA,EAAWkB,EAAAA,aAAa,SAAW,CAAA,EAGxCC,EAA4B,CAChC,SAAU,WACV,MAAOT,EAAO,MACd,OAAQA,EAAO,OACf,aAAcA,EAAO,OAAS,EAC9B,gBAAiBT,EACb,gCACA,iCACJ,OAAQ,aAAaA,EAAU,gCAAkC,8BAA8B,GAC/F,WAAYmB,EAAAA,WAAW,OACvB,UAAWf,EAAYgB,YAAU,QAAU,mCAC3C,WAAY,CAAA,EAGRC,EAA4B,CAChC,SAAU,WACV,IAAKR,EACL,KAAMb,EAAUa,EAAUC,EAASD,EACnC,MAAON,EAAYE,EAAO,MAAQ,EAAIA,EAAO,MAC7C,OAAQA,EAAO,MACf,aAAcA,EAAO,MAAQ,EAC7B,gBAAiB,oCACjB,UAAW,0BACX,WAAYU,EAAAA,WAAW,OACvB,UAAWZ,EAAY,SAASe,QAAM,aAAa,IAAM,SAASA,EAAAA,MAAM,MAAM,GAAA,EAG1EC,EAA4B,CAChC,SAAU,WACV,MAAO,OACP,OAAQ,OACR,QAAS,EACT,OAAQxB,EAAW,cAAgB,UACnC,OAAQ,CAAA,EAGJyB,EAAqC,CACzC,QAAS,OACT,cAAe,SACf,IAAKR,EAAAA,aAAa,GAClB,YAAaP,EAAO,OAASE,EAAWc,EAAAA,oBAAoB,MAAQ,CAAA,EAGhEC,EAA4B,CAChC,SAAAf,EACA,WAAYc,EAAAA,oBAAoB,KAChC,MAAO,mCACP,WAAY,MAAA,EAGRE,EAAkC,CACtC,SAAUhB,EAAW,EACrB,WAAYc,EAAAA,oBAAoB,KAChC,MAAO,iCACP,WAAY,MAAA,EAGd,OACEG,EAAAA,KAAC,QAAA,CACC,UAAWC,EAAAA,GACT,gBACA,kBAAkBpC,CAAI,GACtBO,GAAW,yBACXD,GAAY,0BACZH,CAAA,EAEF,MAAO,CAAE,GAAGmB,EAAc,GAAGlB,CAAA,EAC7B,cAAaC,EACb,YAAa,IAAMU,EAAa,EAAI,EACpC,UAAW,IAAMA,EAAa,EAAK,EACnC,aAAc,IAAMA,EAAa,EAAK,EAEtC,SAAA,CAAAoB,EAAAA,KAAC,OAAA,CAAK,MAAOV,EACX,SAAA,CAAAY,EAAAA,IAAC,QAAA,CACC,IAAA3B,EACA,KAAK,WACL,KAAK,SACL,MAAOoB,EACP,QAAAvB,EACA,SAAAD,EACA,eAAcC,EACd,SAAAC,EACA,QAAS,IAAMI,EAAa,EAAI,EAChC,OAAQ,IAAMA,EAAa,EAAK,EAC/B,GAAGH,CAAA,CAAA,EAEN4B,EAAAA,IAAC,OAAA,CAAK,MAAOT,CAAA,CAAY,CAAA,EAC3B,GAEE3B,GAASC,IACTiC,EAAAA,KAAC,OAAA,CAAK,MAAOJ,EACV,SAAA,CAAA9B,GAASoC,EAAAA,IAAC,OAAA,CAAK,MAAOJ,EAAa,SAAAhC,EAAM,EACzCC,GAAemC,EAAAA,IAAC,OAAA,CAAK,MAAOH,EAAmB,SAAAhC,CAAA,CAAY,CAAA,CAAA,CAC9D,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDJ,EAAO,YAAc"}
+{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/form/Switch/Switch.tsx"],"sourcesContent":["/**\r\n * Switch Component\r\n *\r\n * Apple-inspired toggle switch with smooth spring animation.\r\n * Clean, tactile design with satisfying micro-interactions.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n *\r\n * @module components/form/Switch\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { switchSizes } from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SwitchSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\r\n  /** Switch size */\r\n  size?: SwitchSize\r\n  /** Label text */\r\n  label?: ReactNode\r\n  /** Description below label */\r\n  description?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\r\n  {\r\n    size = 'md',\r\n    label,\r\n    description,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    checked,\r\n    onChange,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const config = switchSizes[size]\r\n  const padding = (config.height - config.thumb) / 2\r\n  const travel = config.width - config.thumb - padding * 2\r\n\r\n  return (\r\n    <label\r\n      className={cx(\r\n        'brycks-switch',\r\n        `brycks-switch--${size}`,\r\n        checked && 'brycks-switch--checked',\r\n        disabled && 'brycks-switch--disabled',\r\n        className\r\n      )}\r\n      style={style}\r\n      data-testid={testId}\r\n    >\r\n      <span\r\n        className=\"brycks-switch__track\"\r\n        style={{\r\n          width: config.width,\r\n          height: config.height,\r\n          borderRadius: config.height / 2,\r\n        }}\r\n      >\r\n        <input\r\n          ref={ref}\r\n          type=\"checkbox\"\r\n          role=\"switch\"\r\n          className=\"brycks-switch__input\"\r\n          checked={checked}\r\n          disabled={disabled}\r\n          aria-checked={checked}\r\n          onChange={onChange}\r\n          {...props}\r\n        />\r\n        <span\r\n          className=\"brycks-switch__thumb\"\r\n          style={{\r\n            top: padding,\r\n            left: checked ? padding + travel : padding,\r\n            width: config.thumb,\r\n            height: config.thumb,\r\n            borderRadius: config.thumb / 2,\r\n          }}\r\n        />\r\n      </span>\r\n\r\n      {(label || description) && (\r\n        <span className=\"brycks-switch__label\">\r\n          {label && <span className=\"brycks-switch__label-text\">{label}</span>}\r\n          {description && <span className=\"brycks-switch__description\">{description}</span>}\r\n        </span>\r\n      )}\r\n    </label>\r\n  )\r\n})\r\n\r\nSwitch.displayName = 'Switch'\r\n"],"names":["Switch","forwardRef","size","label","description","className","style","testId","disabled","checked","onChange","props","ref","config","switchSizes","padding","travel","jsxs","cx","jsx"],"mappings":"yOAkCaA,EAASC,EAAAA,WAA0C,SAC9D,CACE,KAAAC,EAAO,KACP,MAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAASC,EAAAA,YAAYZ,CAAI,EACzBa,GAAWF,EAAO,OAASA,EAAO,OAAS,EAC3CG,EAASH,EAAO,MAAQA,EAAO,MAAQE,EAAU,EAEvD,OACEE,EAAAA,KAAC,QAAA,CACC,UAAWC,EAAAA,GACT,gBACA,kBAAkBhB,CAAI,GACtBO,GAAW,yBACXD,GAAY,0BACZH,CAAA,EAEF,MAAAC,EACA,cAAaC,EAEb,SAAA,CAAAU,EAAAA,KAAC,OAAA,CACC,UAAU,uBACV,MAAO,CACL,MAAOJ,EAAO,MACd,OAAQA,EAAO,OACf,aAAcA,EAAO,OAAS,CAAA,EAGhC,SAAA,CAAAM,EAAAA,IAAC,QAAA,CACC,IAAAP,EACA,KAAK,WACL,KAAK,SACL,UAAU,uBACV,QAAAH,EACA,SAAAD,EACA,eAAcC,EACd,SAAAC,EACC,GAAGC,CAAA,CAAA,EAENQ,EAAAA,IAAC,OAAA,CACC,UAAU,uBACV,MAAO,CACL,IAAKJ,EACL,KAAMN,EAAUM,EAAUC,EAASD,EACnC,MAAOF,EAAO,MACd,OAAQA,EAAO,MACf,aAAcA,EAAO,MAAQ,CAAA,CAC/B,CAAA,CACF,CAAA,CAAA,GAGAV,GAASC,IACTa,EAAAA,KAAC,OAAA,CAAK,UAAU,uBACb,SAAA,CAAAd,GAASgB,EAAAA,IAAC,OAAA,CAAK,UAAU,4BAA6B,SAAAhB,EAAM,EAC5DC,GAAee,EAAAA,IAAC,OAAA,CAAK,UAAU,6BAA8B,SAAAf,CAAA,CAAY,CAAA,CAAA,CAC5E,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDJ,EAAO,YAAc"}

package/dist/components/form/Switch/Switch.js

@@ -1,118 +1,83 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import { forwardRef as D, useState as m } from "react";
-import { cx as L } from "../../../utils/styles.js";
-import { componentGap as y, switchSizes as N } from "../../../design-system/primitives/sizing.js";
-import { stateOpacity as P, scale as f } from "../../../design-system/primitives/opacity.js";
-import { focusRing as B } from "../../../design-system/primitives/focus.js";
-import { transition as b } from "../../../design-system/primitives/transitions.js";
-import { componentLineHeight as u, componentFontSize as G } from "../../../design-system/primitives/typography.js";
-const O = D(function({
-  size: n = "md",
-  label: i,
-  description: a,
-  className: g,
-  style: w,
-  testId: S,
-  disabled: e,
-  checked: o,
-  onChange: x,
-  ...k
-}, v) {
-  const [F, h] = m(!1), [d, l] = m(!1), t = N[n], c = G[n], r = (t.height - t.thumb) / 2, R = t.width - t.thumb - r * 2, $ = {
-    display: "inline-flex",
-    alignItems: "flex-start",
-    gap: y.xl,
-    cursor: e ? "not-allowed" : "pointer",
-    opacity: e ? P.disabled : 1
-  }, C = {
-    position: "relative",
-    width: t.width,
-    height: t.height,
-    borderRadius: t.height / 2,
-    backgroundColor: o ? "var(--brycks-primary-default)" : "var(--brycks-background-muted)",
-    border: `1px solid ${o ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
-    transition: b.spring,
-    boxShadow: F ? B.default : "inset 0 1px 2px rgba(0,0,0,0.05)",
-    flexShrink: 0
-  }, H = {
-    position: "absolute",
-    top: r,
-    left: o ? r + R : r,
-    width: d ? t.thumb + 4 : t.thumb,
-    height: t.thumb,
-    borderRadius: t.thumb / 2,
-    backgroundColor: "var(--brycks-background-elevated)",
-    boxShadow: "var(--brycks-shadow-sm)",
-    transition: b.spring,
-    transform: d ? `scale(${f.pressedStrong})` : `scale(${f.normal})`
-  }, I = {
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    opacity: 0,
-    cursor: e ? "not-allowed" : "pointer",
-    margin: 0
-  }, M = {
-    display: "flex",
-    flexDirection: "column",
-    gap: y.xs,
-    paddingTop: (t.height - c * u.snug) / 2
-  }, j = {
-    fontSize: c,
-    lineHeight: u.snug,
-    color: "var(--brycks-foreground-default)",
-    userSelect: "none"
-  }, z = {
-    fontSize: c - 1,
-    lineHeight: u.snug,
-    color: "var(--brycks-foreground-muted)",
-    userSelect: "none"
-  };
-  return /* @__PURE__ */ p(
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { cx as u } from "../../../utils/styles.js";
+import { switchSizes as _ } from "../../../design-system/primitives/sizing.js";
+const k = y(function({
+  size: e = "md",
+  label: h,
+  description: r,
+  className: b,
+  style: l,
+  testId: n,
+  disabled: m,
+  checked: s,
+  onChange: o,
+  ...w
+}, d) {
+  const t = _[e], c = (t.height - t.thumb) / 2, p = t.width - t.thumb - c * 2;
+  return /* @__PURE__ */ a(
     "label",
     {
-      className: L(
+      className: u(
         "brycks-switch",
-        `brycks-switch--${n}`,
-        o && "brycks-switch--checked",
-        e && "brycks-switch--disabled",
-        g
+        `brycks-switch--${e}`,
+        s && "brycks-switch--checked",
+        m && "brycks-switch--disabled",
+        b
       ),
-      style: { ...$, ...w },
-      "data-testid": S,
-      onMouseDown: () => l(!0),
-      onMouseUp: () => l(!1),
-      onMouseLeave: () => l(!1),
+      style: l,
+      "data-testid": n,
       children: [
-        /* @__PURE__ */ p("span", { style: C, children: [
-          /* @__PURE__ */ s(
-            "input",
-            {
-              ref: v,
-              type: "checkbox",
-              role: "switch",
-              style: I,
-              checked: o,
-              disabled: e,
-              "aria-checked": o,
-              onChange: x,
-              onFocus: () => h(!0),
-              onBlur: () => h(!1),
-              ...k
-            }
-          ),
-          /* @__PURE__ */ s("span", { style: H })
-        ] }),
-        (i || a) && /* @__PURE__ */ p("span", { style: M, children: [
-          i && /* @__PURE__ */ s("span", { style: j, children: i }),
-          a && /* @__PURE__ */ s("span", { style: z, children: a })
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: "brycks-switch__track",
+            style: {
+              width: t.width,
+              height: t.height,
+              borderRadius: t.height / 2
+            },
+            children: [
+              /* @__PURE__ */ i(
+                "input",
+                {
+                  ref: d,
+                  type: "checkbox",
+                  role: "switch",
+                  className: "brycks-switch__input",
+                  checked: s,
+                  disabled: m,
+                  "aria-checked": s,
+                  onChange: o,
+                  ...w
+                }
+              ),
+              /* @__PURE__ */ i(
+                "span",
+                {
+                  className: "brycks-switch__thumb",
+                  style: {
+                    top: c,
+                    left: s ? c + p : c,
+                    width: t.thumb,
+                    height: t.thumb,
+                    borderRadius: t.thumb / 2
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        (h || r) && /* @__PURE__ */ a("span", { className: "brycks-switch__label", children: [
+          h && /* @__PURE__ */ i("span", { className: "brycks-switch__label-text", children: h }),
+          r && /* @__PURE__ */ i("span", { className: "brycks-switch__description", children: r })
         ] })
       ]
     }
   );
 });
-O.displayName = "Switch";
+k.displayName = "Switch";
 export {
-  O as Switch
+  k as Switch
 };
 //# sourceMappingURL=Switch.js.map

package/dist/components/form/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../src/components/form/Switch/Switch.tsx"],"sourcesContent":["/**\r\n * Switch Component\r\n *\r\n * Apple-inspired toggle switch with smooth spring animation.\r\n * Clean, tactile design with satisfying micro-interactions.\r\n *\r\n * @module components/form/Switch\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  type CSSProperties,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport {\r\n  switchSizes,\r\n  componentGap,\r\n  componentFontSize,\r\n  componentLineHeight,\r\n  focusRing,\r\n  transition,\r\n  stateOpacity,\r\n  scale,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SwitchSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\r\n  /** Switch size */\r\n  size?: SwitchSize\r\n  /** Label text */\r\n  label?: ReactNode\r\n  /** Description below label */\r\n  description?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\r\n  {\r\n    size = 'md',\r\n    label,\r\n    description,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    checked,\r\n    onChange,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n  const [isPressed, setIsPressed] = useState(false)\r\n\r\n  const config = switchSizes[size]\r\n  const fontSize = componentFontSize[size]\r\n\r\n  const padding = (config.height - config.thumb) / 2\r\n  const travel = config.width - config.thumb - padding * 2\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'flex-start',\r\n    gap: componentGap.xl,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    opacity: disabled ? stateOpacity.disabled : 1,\r\n  }\r\n\r\n  const trackStyle: CSSProperties = {\r\n    position: 'relative',\r\n    width: config.width,\r\n    height: config.height,\r\n    borderRadius: config.height / 2,\r\n    backgroundColor: checked\r\n      ? 'var(--brycks-primary-default)'\r\n      : 'var(--brycks-background-muted)',\r\n    border: `1px solid ${checked ? 'var(--brycks-primary-default)' : 'var(--brycks-border-default)'}`,\r\n    transition: transition.spring,\r\n    boxShadow: isFocused ? focusRing.default : 'inset 0 1px 2px rgba(0,0,0,0.05)',\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const thumbStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: padding,\r\n    left: checked ? padding + travel : padding,\r\n    width: isPressed ? config.thumb + 4 : config.thumb,\r\n    height: config.thumb,\r\n    borderRadius: config.thumb / 2,\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    boxShadow: 'var(--brycks-shadow-sm)',\r\n    transition: transition.spring,\r\n    transform: isPressed ? `scale(${scale.pressedStrong})` : `scale(${scale.normal})`,\r\n  }\r\n\r\n  const inputStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    width: '100%',\r\n    height: '100%',\r\n    opacity: 0,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    margin: 0,\r\n  }\r\n\r\n  const labelContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: componentGap.xs,\r\n    paddingTop: (config.height - fontSize * componentLineHeight.snug) / 2,\r\n  }\r\n\r\n  const labelStyle: CSSProperties = {\r\n    fontSize,\r\n    lineHeight: componentLineHeight.snug,\r\n    color: 'var(--brycks-foreground-default)',\r\n    userSelect: 'none',\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSize - 1,\r\n    lineHeight: componentLineHeight.snug,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    userSelect: 'none',\r\n  }\r\n\r\n  return (\r\n    <label\r\n      className={cx(\r\n        'brycks-switch',\r\n        `brycks-switch--${size}`,\r\n        checked && 'brycks-switch--checked',\r\n        disabled && 'brycks-switch--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n      data-testid={testId}\r\n      onMouseDown={() => setIsPressed(true)}\r\n      onMouseUp={() => setIsPressed(false)}\r\n      onMouseLeave={() => setIsPressed(false)}\r\n    >\r\n      <span style={trackStyle}>\r\n        <input\r\n          ref={ref}\r\n          type=\"checkbox\"\r\n          role=\"switch\"\r\n          style={inputStyle}\r\n          checked={checked}\r\n          disabled={disabled}\r\n          aria-checked={checked}\r\n          onChange={onChange}\r\n          onFocus={() => setIsFocused(true)}\r\n          onBlur={() => setIsFocused(false)}\r\n          {...props}\r\n        />\r\n        <span style={thumbStyle} />\r\n      </span>\r\n\r\n      {(label || description) && (\r\n        <span style={labelContainerStyle}>\r\n          {label && <span style={labelStyle}>{label}</span>}\r\n          {description && <span style={descriptionStyle}>{description}</span>}\r\n        </span>\r\n      )}\r\n    </label>\r\n  )\r\n})\r\n\r\nSwitch.displayName = 'Switch'\r\n"],"names":["Switch","forwardRef","size","label","description","className","style","testId","disabled","checked","onChange","props","ref","isFocused","setIsFocused","useState","isPressed","setIsPressed","config","switchSizes","fontSize","componentFontSize","padding","travel","wrapperStyle","componentGap","stateOpacity","trackStyle","transition","focusRing","thumbStyle","scale","inputStyle","labelContainerStyle","componentLineHeight","labelStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":";;;;;;;;AA2CO,MAAMA,IAASC,EAA0C,SAC9D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAE1CG,IAASC,EAAYjB,CAAI,GACzBkB,IAAWC,EAAkBnB,CAAI,GAEjCoB,KAAWJ,EAAO,SAASA,EAAO,SAAS,GAC3CK,IAASL,EAAO,QAAQA,EAAO,QAAQI,IAAU,GAEjDE,IAA8B;AAAA,IAClC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAKC,EAAa;AAAA,IAClB,QAAQjB,IAAW,gBAAgB;AAAA,IACnC,SAASA,IAAWkB,EAAa,WAAW;AAAA,EAAA,GAGxCC,IAA4B;AAAA,IAChC,UAAU;AAAA,IACV,OAAOT,EAAO;AAAA,IACd,QAAQA,EAAO;AAAA,IACf,cAAcA,EAAO,SAAS;AAAA,IAC9B,iBAAiBT,IACb,kCACA;AAAA,IACJ,QAAQ,aAAaA,IAAU,kCAAkC,8BAA8B;AAAA,IAC/F,YAAYmB,EAAW;AAAA,IACvB,WAAWf,IAAYgB,EAAU,UAAU;AAAA,IAC3C,YAAY;AAAA,EAAA,GAGRC,IAA4B;AAAA,IAChC,UAAU;AAAA,IACV,KAAKR;AAAA,IACL,MAAMb,IAAUa,IAAUC,IAASD;AAAA,IACnC,OAAON,IAAYE,EAAO,QAAQ,IAAIA,EAAO;AAAA,IAC7C,QAAQA,EAAO;AAAA,IACf,cAAcA,EAAO,QAAQ;AAAA,IAC7B,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,YAAYU,EAAW;AAAA,IACvB,WAAWZ,IAAY,SAASe,EAAM,aAAa,MAAM,SAASA,EAAM,MAAM;AAAA,EAAA,GAG1EC,IAA4B;AAAA,IAChC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQxB,IAAW,gBAAgB;AAAA,IACnC,QAAQ;AAAA,EAAA,GAGJyB,IAAqC;AAAA,IACzC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAKR,EAAa;AAAA,IAClB,aAAaP,EAAO,SAASE,IAAWc,EAAoB,QAAQ;AAAA,EAAA,GAGhEC,IAA4B;AAAA,IAChC,UAAAf;AAAA,IACA,YAAYc,EAAoB;AAAA,IAChC,OAAO;AAAA,IACP,YAAY;AAAA,EAAA,GAGRE,IAAkC;AAAA,IACtC,UAAUhB,IAAW;AAAA,IACrB,YAAYc,EAAoB;AAAA,IAChC,OAAO;AAAA,IACP,YAAY;AAAA,EAAA;AAGd,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA,kBAAkBpC,CAAI;AAAA,QACtBO,KAAW;AAAA,QACXD,KAAY;AAAA,QACZH;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,GAAGmB,GAAc,GAAGlB,EAAA;AAAA,MAC7B,eAAaC;AAAA,MACb,aAAa,MAAMU,EAAa,EAAI;AAAA,MACpC,WAAW,MAAMA,EAAa,EAAK;AAAA,MACnC,cAAc,MAAMA,EAAa,EAAK;AAAA,MAEtC,UAAA;AAAA,QAAA,gBAAAoB,EAAC,QAAA,EAAK,OAAOV,GACX,UAAA;AAAA,UAAA,gBAAAY;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAA3B;AAAA,cACA,MAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAOoB;AAAA,cACP,SAAAvB;AAAA,cACA,UAAAD;AAAA,cACA,gBAAcC;AAAA,cACd,UAAAC;AAAA,cACA,SAAS,MAAMI,EAAa,EAAI;AAAA,cAChC,QAAQ,MAAMA,EAAa,EAAK;AAAA,cAC/B,GAAGH;AAAA,YAAA;AAAA,UAAA;AAAA,UAEN,gBAAA4B,EAAC,QAAA,EAAK,OAAOT,EAAA,CAAY;AAAA,QAAA,GAC3B;AAAA,SAEE3B,KAASC,MACT,gBAAAiC,EAAC,QAAA,EAAK,OAAOJ,GACV,UAAA;AAAA,UAAA9B,KAAS,gBAAAoC,EAAC,QAAA,EAAK,OAAOJ,GAAa,UAAAhC,GAAM;AAAA,UACzCC,KAAe,gBAAAmC,EAAC,QAAA,EAAK,OAAOH,GAAmB,UAAAhC,EAAA,CAAY;AAAA,QAAA,EAAA,CAC9D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDJ,EAAO,cAAc;"}
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/form/Switch/Switch.tsx"],"sourcesContent":["/**\r\n * Switch Component\r\n *\r\n * Apple-inspired toggle switch with smooth spring animation.\r\n * Clean, tactile design with satisfying micro-interactions.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n *\r\n * @module components/form/Switch\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { switchSizes } from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SwitchSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\r\n  /** Switch size */\r\n  size?: SwitchSize\r\n  /** Label text */\r\n  label?: ReactNode\r\n  /** Description below label */\r\n  description?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\r\n  {\r\n    size = 'md',\r\n    label,\r\n    description,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    checked,\r\n    onChange,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const config = switchSizes[size]\r\n  const padding = (config.height - config.thumb) / 2\r\n  const travel = config.width - config.thumb - padding * 2\r\n\r\n  return (\r\n    <label\r\n      className={cx(\r\n        'brycks-switch',\r\n        `brycks-switch--${size}`,\r\n        checked && 'brycks-switch--checked',\r\n        disabled && 'brycks-switch--disabled',\r\n        className\r\n      )}\r\n      style={style}\r\n      data-testid={testId}\r\n    >\r\n      <span\r\n        className=\"brycks-switch__track\"\r\n        style={{\r\n          width: config.width,\r\n          height: config.height,\r\n          borderRadius: config.height / 2,\r\n        }}\r\n      >\r\n        <input\r\n          ref={ref}\r\n          type=\"checkbox\"\r\n          role=\"switch\"\r\n          className=\"brycks-switch__input\"\r\n          checked={checked}\r\n          disabled={disabled}\r\n          aria-checked={checked}\r\n          onChange={onChange}\r\n          {...props}\r\n        />\r\n        <span\r\n          className=\"brycks-switch__thumb\"\r\n          style={{\r\n            top: padding,\r\n            left: checked ? padding + travel : padding,\r\n            width: config.thumb,\r\n            height: config.thumb,\r\n            borderRadius: config.thumb / 2,\r\n          }}\r\n        />\r\n      </span>\r\n\r\n      {(label || description) && (\r\n        <span className=\"brycks-switch__label\">\r\n          {label && <span className=\"brycks-switch__label-text\">{label}</span>}\r\n          {description && <span className=\"brycks-switch__description\">{description}</span>}\r\n        </span>\r\n      )}\r\n    </label>\r\n  )\r\n})\r\n\r\nSwitch.displayName = 'Switch'\r\n"],"names":["Switch","forwardRef","size","label","description","className","style","testId","disabled","checked","onChange","props","ref","config","switchSizes","padding","travel","jsxs","cx","jsx"],"mappings":";;;;AAkCO,MAAMA,IAASC,EAA0C,SAC9D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASC,EAAYZ,CAAI,GACzBa,KAAWF,EAAO,SAASA,EAAO,SAAS,GAC3CG,IAASH,EAAO,QAAQA,EAAO,QAAQE,IAAU;AAEvD,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA,kBAAkBhB,CAAI;AAAA,QACtBO,KAAW;AAAA,QACXD,KAAY;AAAA,QACZH;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MACA,eAAaC;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOJ,EAAO;AAAA,cACd,QAAQA,EAAO;AAAA,cACf,cAAcA,EAAO,SAAS;AAAA,YAAA;AAAA,YAGhC,UAAA;AAAA,cAAA,gBAAAM;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAAP;AAAA,kBACA,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,SAAAH;AAAA,kBACA,UAAAD;AAAA,kBACA,gBAAcC;AAAA,kBACd,UAAAC;AAAA,kBACC,GAAGC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEN,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,KAAKJ;AAAA,oBACL,MAAMN,IAAUM,IAAUC,IAASD;AAAA,oBACnC,OAAOF,EAAO;AAAA,oBACd,QAAQA,EAAO;AAAA,oBACf,cAAcA,EAAO,QAAQ;AAAA,kBAAA;AAAA,gBAC/B;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,SAGAV,KAASC,MACT,gBAAAa,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,UAAAd,KAAS,gBAAAgB,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAhB,GAAM;AAAA,UAC5DC,KAAe,gBAAAe,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAAf,EAAA,CAAY;AAAA,QAAA,EAAA,CAC5E;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDJ,EAAO,cAAc;"}

package/dist/components/layout/Card/Card.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("react"),b=require("../../../utils/styles.cjs"),m=require("../../../design-system/primitives/sizing.cjs"),c=require("../../../design-system/tokens/motion.cjs"),o=require("../../../design-system/tokens/spacing.cjs"),j={none:0,sm:o.spacing[3],md:o.spacing[4],lg:o.spacing[6],xl:o.spacing[8]},k=l.forwardRef(function({variant:r="elevated",padding:t="md",interactive:s=!1,selected:a=!1,className:d,style:n,children:i,testId:f,...g},h){const w={...(()=>{const e={borderRadius:"var(--brycks-radius-lg)",transition:`transform ${c.durations.quick}ms ${c.easings.easeOut}, box-shadow ${c.durations.quick}ms ${c.easings.easeOut}, border-color ${c.durations.quick}ms ${c.easings.easeOut}`};switch(r){case"elevated":return{...e,backgroundColor:"var(--brycks-background-elevated)",boxShadow:a?"0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)":"var(--brycks-shadow-md)",border:"1px solid var(--brycks-border-subtle)"};case"outline":return{...e,backgroundColor:"var(--brycks-background-default)",border:a?"2px solid var(--brycks-primary-default)":"1px solid var(--brycks-border-default)"};case"filled":return{...e,backgroundColor:"var(--brycks-background-muted)",border:a?"2px solid var(--brycks-primary-default)":"1px solid transparent"};case"ghost":return{...e,backgroundColor:"transparent",border:a?"2px solid var(--brycks-primary-default)":"1px solid transparent"}}})(),padding:j[t],display:"flex",flexDirection:"column",cursor:s?"pointer":void 0,...n},S=l.useCallback(y=>{const e=y.currentTarget;r==="elevated"?(e.style.boxShadow=a?"0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)":"var(--brycks-shadow-lg)",e.style.transform="translateY(-2px)"):r!=="ghost"&&(e.style.borderColor="var(--brycks-border-strong)")},[r,a]),q=l.useCallback(y=>{const e=y.currentTarget;r==="elevated"?(e.style.boxShadow=a?"0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)":"var(--brycks-shadow-md)",e.style.transform="translateY(0)"):r!=="ghost"&&(e.style.borderColor=a?"var(--brycks-primary-default)":"var(--brycks-border-default)")},[r,a]);return u.jsx("div",{ref:h,className:b.cx("brycks-card",`brycks-card--${r}`,s&&"brycks-card--interactive",a&&"brycks-card--selected",d),style:w,"data-testid":f,onMouseEnter:s?S:void 0,onMouseLeave:s?q:void 0,...g,children:i})});k.displayName="Card";const x=l.forwardRef(function({divider:r=!1,className:t,style:s,children:a,...d},n){const i={display:"flex",alignItems:"center",justifyContent:"space-between",gap:m.componentGap.xl,paddingBottom:r?o.spacing[4]:0,marginBottom:r?o.spacing[4]:o.spacing[3],borderBottom:r?"1px solid var(--brycks-border-muted)":void 0,...s};return u.jsx("div",{ref:n,className:b.cx("brycks-card-header",t),style:i,...d,children:a})});x.displayName="CardHeader";const v=l.forwardRef(function({className:r,style:t,children:s,...a},d){const n={flex:1,...t};return u.jsx("div",{ref:d,className:b.cx("brycks-card-body",r),style:n,...a,children:s})});v.displayName="CardBody";const C=l.forwardRef(function({divider:r=!1,align:t="right",className:s,style:a,children:d,...n},i){const g={display:"flex",alignItems:"center",justifyContent:{left:"flex-start",center:"center",right:"flex-end",between:"space-between"}[t],gap:m.componentGap.xl,paddingTop:r?o.spacing[4]:0,marginTop:r?o.spacing[4]:o.spacing[3],borderTop:r?"1px solid var(--brycks-border-muted)":void 0,...a};return u.jsx("div",{ref:i,className:b.cx("brycks-card-footer",s),style:g,...n,children:d})});C.displayName="CardFooter";exports.Card=k;exports.CardBody=v;exports.CardFooter=C;exports.CardHeader=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react"),i=require("../../../utils/styles.cjs"),f=o.forwardRef(function({variant:r="elevated",padding:e="md",interactive:a=!1,selected:d=!1,className:c,style:s,children:y,testId:b,..._},k){return t.jsx("div",{ref:k,className:i.cx("brycks-card",`brycks-card--${r}`,`brycks-card--padding-${e}`,a&&"brycks-card--interactive",d&&"brycks-card--selected",c),style:s,"data-testid":b,..._,children:y})});f.displayName="Card";const l=o.forwardRef(function({divider:r=!1,className:e,style:a,children:d,...c},s){return t.jsx("div",{ref:s,className:i.cx("brycks-card__header",r&&"brycks-card__header--divider",e),style:a,...c,children:d})});l.displayName="CardHeader";const C=o.forwardRef(function({className:r,style:e,children:a,...d},c){return t.jsx("div",{ref:c,className:i.cx("brycks-card__body",r),style:e,...d,children:a})});C.displayName="CardBody";const u=o.forwardRef(function({divider:r=!1,align:e="right",className:a,style:d,children:c,...s},y){return t.jsx("div",{ref:y,className:i.cx("brycks-card__footer",r&&"brycks-card__footer--divider",`brycks-card__footer--${e}`,a),style:d,...s,children:c})});u.displayName="CardFooter";exports.Card=f;exports.CardBody=C;exports.CardFooter=u;exports.CardHeader=l;
 //# sourceMappingURL=Card.cjs.map

package/dist/components/layout/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":["/**\n * Card Component\n *\n * A flexible card container with optional header, footer, and body sections.\n * Supports different variants and padding sizes.\n */\n\nimport { forwardRef, useCallback, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, durations, easings } from '../../../design-system'\nimport { componentGap } from '../../../design-system/primitives'\n\nexport type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost'\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card variant */\n  variant?: CardVariant\n  /** Card padding */\n  padding?: CardPadding\n  /** Whether the card is interactive (adds hover effect) */\n  interactive?: boolean\n  /** Whether the card is selected */\n  selected?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider below the header */\n  divider?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider above the footer */\n  divider?: boolean\n  /** Footer alignment */\n  align?: 'left' | 'center' | 'right' | 'between'\n  /** Custom class name */\n  className?: string\n}\n\nconst paddingMap: Record<CardPadding, number> = {\n  none: 0,\n  sm: spacing[3],\n  md: spacing[4],\n  lg: spacing[6],\n  xl: spacing[8],\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    variant = 'elevated',\n    padding = 'md',\n    interactive = false,\n    selected = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const getVariantStyles = (): CSSProperties => {\n    const transitionValue = `transform ${durations.quick}ms ${easings.easeOut}, box-shadow ${durations.quick}ms ${easings.easeOut}, border-color ${durations.quick}ms ${easings.easeOut}`\n    const base: CSSProperties = {\n      borderRadius: 'var(--brycks-radius-lg)',\n      transition: transitionValue,\n    }\n\n    switch (variant) {\n      case 'elevated':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-elevated)',\n          boxShadow: selected\n            ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)'\n            : 'var(--brycks-shadow-md)',\n          border: '1px solid var(--brycks-border-subtle)',\n        }\n      case 'outline':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-default)',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid var(--brycks-border-default)',\n        }\n      case 'filled':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-muted)',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid transparent',\n        }\n      case 'ghost':\n        return {\n          ...base,\n          backgroundColor: 'transparent',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid transparent',\n        }\n    }\n  }\n\n  const cardStyle: CSSProperties = {\n    ...getVariantStyles(),\n    padding: paddingMap[padding],\n    display: 'flex',\n    flexDirection: 'column',\n    cursor: interactive ? 'pointer' : undefined,\n    ...style,\n  }\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    const target = e.currentTarget\n    if (variant === 'elevated') {\n      target.style.boxShadow = selected\n        ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)'\n        : 'var(--brycks-shadow-lg)'\n      target.style.transform = 'translateY(-2px)'\n    } else if (variant !== 'ghost') {\n      target.style.borderColor = 'var(--brycks-border-strong)'\n    }\n  }, [variant, selected])\n\n  const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    const target = e.currentTarget\n    if (variant === 'elevated') {\n      target.style.boxShadow = selected\n        ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)'\n        : 'var(--brycks-shadow-md)'\n      target.style.transform = 'translateY(0)'\n    } else if (variant !== 'ghost') {\n      target.style.borderColor = selected\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }\n  }, [variant, selected])\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card',\n        `brycks-card--${variant}`,\n        interactive && 'brycks-card--interactive',\n        selected && 'brycks-card--selected',\n        className\n      )}\n      style={cardStyle}\n      data-testid={testId}\n      onMouseEnter={\n        interactive\n          ? handleMouseEnter\n          : undefined\n      }\n      onMouseLeave={\n        interactive\n          ? handleMouseLeave\n          : undefined\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCard.displayName = 'Card'\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { divider = false, className, style, children, ...props },\n  ref\n) {\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: componentGap.xl,\n    paddingBottom: divider ? spacing[4] : 0,\n    marginBottom: divider ? spacing[4] : spacing[3],\n    borderBottom: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-header', className)} style={headerStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardHeader.displayName = 'CardHeader'\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(function CardBody(\n  { className, style, children, ...props },\n  ref\n) {\n  const bodyStyle: CSSProperties = {\n    flex: 1,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-body', className)} style={bodyStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardBody.displayName = 'CardBody'\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { divider = false, align = 'right', className, style, children, ...props },\n  ref\n) {\n  const alignMap: Record<string, CSSProperties['justifyContent']> = {\n    left: 'flex-start',\n    center: 'center',\n    right: 'flex-end',\n    between: 'space-between',\n  }\n\n  const footerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: alignMap[align],\n    gap: componentGap.xl,\n    paddingTop: divider ? spacing[4] : 0,\n    marginTop: divider ? spacing[4] : spacing[3],\n    borderTop: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-footer', className)} style={footerStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardFooter.displayName = 'CardFooter'\n"],"names":["paddingMap","spacing","Card","forwardRef","variant","padding","interactive","selected","className","style","children","testId","props","ref","cardStyle","base","durations","easings","handleMouseEnter","useCallback","e","target","handleMouseLeave","jsx","cx","CardHeader","divider","headerStyle","componentGap","CardBody","bodyStyle","CardFooter","align","footerStyle"],"mappings":"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"}
+{"version":3,"file":"Card.cjs","sources":["../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":["/**\n * Card Component\n *\n * A flexible card container with optional header, footer, and body sections.\n * Supports different variants and padding sizes.\n *\n * All color styles are handled via CSS classes for easy customization.\n */\n\nimport { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost'\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card variant */\n  variant?: CardVariant\n  /** Card padding */\n  padding?: CardPadding\n  /** Whether the card is interactive (adds hover effect) */\n  interactive?: boolean\n  /** Whether the card is selected */\n  selected?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider below the header */\n  divider?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider above the footer */\n  divider?: boolean\n  /** Footer alignment */\n  align?: 'left' | 'center' | 'right' | 'between'\n  /** Custom class name */\n  className?: string\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    variant = 'elevated',\n    padding = 'md',\n    interactive = false,\n    selected = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card',\n        `brycks-card--${variant}`,\n        `brycks-card--padding-${padding}`,\n        interactive && 'brycks-card--interactive',\n        selected && 'brycks-card--selected',\n        className\n      )}\n      style={style}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCard.displayName = 'Card'\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { divider = false, className, style, children, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-card__header', divider && 'brycks-card__header--divider', className)}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCardHeader.displayName = 'CardHeader'\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(function CardBody(\n  { className, style, children, ...props },\n  ref\n) {\n  return (\n    <div ref={ref} className={cx('brycks-card__body', className)} style={style} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardBody.displayName = 'CardBody'\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { divider = false, align = 'right', className, style, children, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card__footer',\n        divider && 'brycks-card__footer--divider',\n        `brycks-card__footer--${align}`,\n        className\n      )}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCardFooter.displayName = 'CardFooter'\n"],"names":["Card","forwardRef","variant","padding","interactive","selected","className","style","children","testId","props","ref","jsx","cx","CardHeader","divider","CardBody","CardFooter","align"],"mappings":"+KAmDaA,EAAOC,EAAAA,WAAsC,SACxD,CACE,QAAAC,EAAU,WACV,QAAAC,EAAU,KACV,YAAAC,EAAc,GACd,SAAAC,EAAW,GACX,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GACT,cACA,gBAAgBX,CAAO,GACvB,wBAAwBC,CAAO,GAC/BC,GAAe,2BACfC,GAAY,wBACZC,CAAA,EAEF,MAAAC,EACA,cAAaE,EACZ,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDR,EAAK,YAAc,OAEZ,MAAMc,EAAab,EAAAA,WAA4C,SACpE,CAAE,QAAAc,EAAU,GAAO,UAAAT,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EAClDC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,sBAAuBE,GAAW,+BAAgCT,CAAS,EACzF,MAAAC,EACC,GAAGG,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDM,EAAW,YAAc,aAElB,MAAME,EAAWf,EAAAA,WAA0C,SAChE,CAAE,UAAAK,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACjCC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CAAI,IAAAD,EAAU,UAAWE,EAAAA,GAAG,oBAAqBP,CAAS,EAAG,MAAAC,EAAe,GAAGG,EAC7E,SAAAF,CAAA,CACH,CAEJ,CAAC,EAEDQ,EAAS,YAAc,WAEhB,MAAMC,EAAahB,EAAAA,WAA4C,SACpE,CAAE,QAAAc,EAAU,GAAO,MAAAG,EAAQ,QAAS,UAAAZ,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACnEC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GACT,sBACAE,GAAW,+BACX,wBAAwBG,CAAK,GAC7BZ,CAAA,EAEF,MAAAC,EACC,GAAGG,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDS,EAAW,YAAc"}

package/dist/components/layout/Card/Card.js

@@ -1,138 +1,76 @@
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as b, useCallback as g } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
 import { cx as i } from "../../../utils/styles.js";
-import { componentGap as x } from "../../../design-system/primitives/sizing.js";
-import { durations as m, easings as f } from "../../../design-system/tokens/motion.js";
-import { spacing as s } from "../../../design-system/tokens/spacing.js";
-const S = {
-  none: 0,
-  sm: s[3],
-  md: s[4],
-  lg: s[6],
-  xl: s[8]
-}, N = b(function({
+const b = t(function({
   variant: r = "elevated",
-  padding: t = "md",
-  interactive: e = !1,
-  selected: a = !1,
-  className: d,
-  style: n,
-  children: l,
-  testId: k,
-  ...p
-}, v) {
-  const C = {
-    ...(() => {
-      const o = {
-        borderRadius: "var(--brycks-radius-lg)",
-        transition: `transform ${m.quick}ms ${f.easeOut}, box-shadow ${m.quick}ms ${f.easeOut}, border-color ${m.quick}ms ${f.easeOut}`
-      };
-      switch (r) {
-        case "elevated":
-          return {
-            ...o,
-            backgroundColor: "var(--brycks-background-elevated)",
-            boxShadow: a ? "0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)" : "var(--brycks-shadow-md)",
-            border: "1px solid var(--brycks-border-subtle)"
-          };
-        case "outline":
-          return {
-            ...o,
-            backgroundColor: "var(--brycks-background-default)",
-            border: a ? "2px solid var(--brycks-primary-default)" : "1px solid var(--brycks-border-default)"
-          };
-        case "filled":
-          return {
-            ...o,
-            backgroundColor: "var(--brycks-background-muted)",
-            border: a ? "2px solid var(--brycks-primary-default)" : "1px solid transparent"
-          };
-        case "ghost":
-          return {
-            ...o,
-            backgroundColor: "transparent",
-            border: a ? "2px solid var(--brycks-primary-default)" : "1px solid transparent"
-          };
-      }
-    })(),
-    padding: S[t],
-    display: "flex",
-    flexDirection: "column",
-    cursor: e ? "pointer" : void 0,
-    ...n
-  }, h = g((c) => {
-    const o = c.currentTarget;
-    r === "elevated" ? (o.style.boxShadow = a ? "0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)" : "var(--brycks-shadow-lg)", o.style.transform = "translateY(-2px)") : r !== "ghost" && (o.style.borderColor = "var(--brycks-border-strong)");
-  }, [r, a]), w = g((c) => {
-    const o = c.currentTarget;
-    r === "elevated" ? (o.style.boxShadow = a ? "0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)" : "var(--brycks-shadow-md)", o.style.transform = "translateY(0)") : r !== "ghost" && (o.style.borderColor = a ? "var(--brycks-primary-default)" : "var(--brycks-border-default)");
-  }, [r, a]);
-  return /* @__PURE__ */ y(
+  padding: a = "md",
+  interactive: d = !1,
+  selected: e = !1,
+  className: c,
+  style: s,
+  children: n,
+  testId: f,
+  ...m
+}, l) {
+  return /* @__PURE__ */ o(
     "div",
     {
-      ref: v,
+      ref: l,
       className: i(
         "brycks-card",
         `brycks-card--${r}`,
-        e && "brycks-card--interactive",
-        a && "brycks-card--selected",
-        d
+        `brycks-card--padding-${a}`,
+        d && "brycks-card--interactive",
+        e && "brycks-card--selected",
+        c
       ),
-      style: C,
-      "data-testid": k,
-      onMouseEnter: e ? h : void 0,
-      onMouseLeave: e ? w : void 0,
-      ...p,
-      children: l
+      style: s,
+      "data-testid": f,
+      ...m,
+      children: n
     }
   );
 });
-N.displayName = "Card";
-const M = b(function({ divider: r = !1, className: t, style: e, children: a, ...d }, n) {
-  const l = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: x.xl,
-    paddingBottom: r ? s[4] : 0,
-    marginBottom: r ? s[4] : s[3],
-    borderBottom: r ? "1px solid var(--brycks-border-muted)" : void 0,
-    ...e
-  };
-  return /* @__PURE__ */ y("div", { ref: n, className: i("brycks-card-header", t), style: l, ...d, children: a });
+b.displayName = "Card";
+const C = t(function({ divider: r = !1, className: a, style: d, children: e, ...c }, s) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ref: s,
+      className: i("brycks-card__header", r && "brycks-card__header--divider", a),
+      style: d,
+      ...c,
+      children: e
+    }
+  );
 });
-M.displayName = "CardHeader";
-const $ = b(function({ className: r, style: t, children: e, ...a }, d) {
-  const n = {
-    flex: 1,
-    ...t
-  };
-  return /* @__PURE__ */ y("div", { ref: d, className: i("brycks-card-body", r), style: n, ...a, children: e });
+C.displayName = "CardHeader";
+const _ = t(function({ className: r, style: a, children: d, ...e }, c) {
+  return /* @__PURE__ */ o("div", { ref: c, className: i("brycks-card__body", r), style: a, ...e, children: d });
 });
-$.displayName = "CardBody";
-const B = b(function({ divider: r = !1, align: t = "right", className: e, style: a, children: d, ...n }, l) {
-  const p = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: {
-      left: "flex-start",
-      center: "center",
-      right: "flex-end",
-      between: "space-between"
-    }[t],
-    gap: x.xl,
-    paddingTop: r ? s[4] : 0,
-    marginTop: r ? s[4] : s[3],
-    borderTop: r ? "1px solid var(--brycks-border-muted)" : void 0,
-    ...a
-  };
-  return /* @__PURE__ */ y("div", { ref: l, className: i("brycks-card-footer", e), style: p, ...n, children: d });
+_.displayName = "CardBody";
+const k = t(function({ divider: r = !1, align: a = "right", className: d, style: e, children: c, ...s }, n) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ref: n,
+      className: i(
+        "brycks-card__footer",
+        r && "brycks-card__footer--divider",
+        `brycks-card__footer--${a}`,
+        d
+      ),
+      style: e,
+      ...s,
+      children: c
+    }
+  );
 });
-B.displayName = "CardFooter";
+k.displayName = "CardFooter";
 export {
-  N as Card,
-  $ as CardBody,
-  B as CardFooter,
-  M as CardHeader
+  b as Card,
+  _ as CardBody,
+  k as CardFooter,
+  C as CardHeader
 };
 //# sourceMappingURL=Card.js.map

package/dist/components/layout/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":["/**\n * Card Component\n *\n * A flexible card container with optional header, footer, and body sections.\n * Supports different variants and padding sizes.\n */\n\nimport { forwardRef, useCallback, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, durations, easings } from '../../../design-system'\nimport { componentGap } from '../../../design-system/primitives'\n\nexport type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost'\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card variant */\n  variant?: CardVariant\n  /** Card padding */\n  padding?: CardPadding\n  /** Whether the card is interactive (adds hover effect) */\n  interactive?: boolean\n  /** Whether the card is selected */\n  selected?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider below the header */\n  divider?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider above the footer */\n  divider?: boolean\n  /** Footer alignment */\n  align?: 'left' | 'center' | 'right' | 'between'\n  /** Custom class name */\n  className?: string\n}\n\nconst paddingMap: Record<CardPadding, number> = {\n  none: 0,\n  sm: spacing[3],\n  md: spacing[4],\n  lg: spacing[6],\n  xl: spacing[8],\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    variant = 'elevated',\n    padding = 'md',\n    interactive = false,\n    selected = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const getVariantStyles = (): CSSProperties => {\n    const transitionValue = `transform ${durations.quick}ms ${easings.easeOut}, box-shadow ${durations.quick}ms ${easings.easeOut}, border-color ${durations.quick}ms ${easings.easeOut}`\n    const base: CSSProperties = {\n      borderRadius: 'var(--brycks-radius-lg)',\n      transition: transitionValue,\n    }\n\n    switch (variant) {\n      case 'elevated':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-elevated)',\n          boxShadow: selected\n            ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)'\n            : 'var(--brycks-shadow-md)',\n          border: '1px solid var(--brycks-border-subtle)',\n        }\n      case 'outline':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-default)',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid var(--brycks-border-default)',\n        }\n      case 'filled':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-muted)',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid transparent',\n        }\n      case 'ghost':\n        return {\n          ...base,\n          backgroundColor: 'transparent',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid transparent',\n        }\n    }\n  }\n\n  const cardStyle: CSSProperties = {\n    ...getVariantStyles(),\n    padding: paddingMap[padding],\n    display: 'flex',\n    flexDirection: 'column',\n    cursor: interactive ? 'pointer' : undefined,\n    ...style,\n  }\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    const target = e.currentTarget\n    if (variant === 'elevated') {\n      target.style.boxShadow = selected\n        ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)'\n        : 'var(--brycks-shadow-lg)'\n      target.style.transform = 'translateY(-2px)'\n    } else if (variant !== 'ghost') {\n      target.style.borderColor = 'var(--brycks-border-strong)'\n    }\n  }, [variant, selected])\n\n  const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    const target = e.currentTarget\n    if (variant === 'elevated') {\n      target.style.boxShadow = selected\n        ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)'\n        : 'var(--brycks-shadow-md)'\n      target.style.transform = 'translateY(0)'\n    } else if (variant !== 'ghost') {\n      target.style.borderColor = selected\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }\n  }, [variant, selected])\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card',\n        `brycks-card--${variant}`,\n        interactive && 'brycks-card--interactive',\n        selected && 'brycks-card--selected',\n        className\n      )}\n      style={cardStyle}\n      data-testid={testId}\n      onMouseEnter={\n        interactive\n          ? handleMouseEnter\n          : undefined\n      }\n      onMouseLeave={\n        interactive\n          ? handleMouseLeave\n          : undefined\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCard.displayName = 'Card'\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { divider = false, className, style, children, ...props },\n  ref\n) {\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: componentGap.xl,\n    paddingBottom: divider ? spacing[4] : 0,\n    marginBottom: divider ? spacing[4] : spacing[3],\n    borderBottom: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-header', className)} style={headerStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardHeader.displayName = 'CardHeader'\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(function CardBody(\n  { className, style, children, ...props },\n  ref\n) {\n  const bodyStyle: CSSProperties = {\n    flex: 1,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-body', className)} style={bodyStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardBody.displayName = 'CardBody'\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { divider = false, align = 'right', className, style, children, ...props },\n  ref\n) {\n  const alignMap: Record<string, CSSProperties['justifyContent']> = {\n    left: 'flex-start',\n    center: 'center',\n    right: 'flex-end',\n    between: 'space-between',\n  }\n\n  const footerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: alignMap[align],\n    gap: componentGap.xl,\n    paddingTop: divider ? spacing[4] : 0,\n    marginTop: divider ? spacing[4] : spacing[3],\n    borderTop: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-footer', className)} style={footerStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardFooter.displayName = 'CardFooter'\n"],"names":["paddingMap","spacing","Card","forwardRef","variant","padding","interactive","selected","className","style","children","testId","props","ref","cardStyle","base","durations","easings","handleMouseEnter","useCallback","e","target","handleMouseLeave","jsx","cx","CardHeader","divider","headerStyle","componentGap","CardBody","bodyStyle","CardFooter","align","footerStyle"],"mappings":"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"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":["/**\n * Card Component\n *\n * A flexible card container with optional header, footer, and body sections.\n * Supports different variants and padding sizes.\n *\n * All color styles are handled via CSS classes for easy customization.\n */\n\nimport { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost'\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card variant */\n  variant?: CardVariant\n  /** Card padding */\n  padding?: CardPadding\n  /** Whether the card is interactive (adds hover effect) */\n  interactive?: boolean\n  /** Whether the card is selected */\n  selected?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider below the header */\n  divider?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider above the footer */\n  divider?: boolean\n  /** Footer alignment */\n  align?: 'left' | 'center' | 'right' | 'between'\n  /** Custom class name */\n  className?: string\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    variant = 'elevated',\n    padding = 'md',\n    interactive = false,\n    selected = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card',\n        `brycks-card--${variant}`,\n        `brycks-card--padding-${padding}`,\n        interactive && 'brycks-card--interactive',\n        selected && 'brycks-card--selected',\n        className\n      )}\n      style={style}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCard.displayName = 'Card'\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { divider = false, className, style, children, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-card__header', divider && 'brycks-card__header--divider', className)}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCardHeader.displayName = 'CardHeader'\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(function CardBody(\n  { className, style, children, ...props },\n  ref\n) {\n  return (\n    <div ref={ref} className={cx('brycks-card__body', className)} style={style} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardBody.displayName = 'CardBody'\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { divider = false, align = 'right', className, style, children, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card__footer',\n        divider && 'brycks-card__footer--divider',\n        `brycks-card__footer--${align}`,\n        className\n      )}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCardFooter.displayName = 'CardFooter'\n"],"names":["Card","forwardRef","variant","padding","interactive","selected","className","style","children","testId","props","ref","jsx","cx","CardHeader","divider","CardBody","CardFooter","align"],"mappings":";;;AAmDO,MAAMA,IAAOC,EAAsC,SACxD;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA,gBAAgBX,CAAO;AAAA,QACvB,wBAAwBC,CAAO;AAAA,QAC/BC,KAAe;AAAA,QACfC,KAAY;AAAA,QACZC;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MACA,eAAaE;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDR,EAAK,cAAc;AAEZ,MAAMc,IAAab,EAA4C,SACpE,EAAE,SAAAc,IAAU,IAAO,WAAAT,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGE,EAAA,GAClDC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAG,uBAAuBE,KAAW,gCAAgCT,CAAS;AAAA,MACzF,OAAAC;AAAA,MACC,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDM,EAAW,cAAc;AAElB,MAAME,IAAWf,EAA0C,SAChE,EAAE,WAAAK,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGE,EAAA,GACjCC,GACA;AACA,SACE,gBAAAC,EAAC,OAAA,EAAI,KAAAD,GAAU,WAAWE,EAAG,qBAAqBP,CAAS,GAAG,OAAAC,GAAe,GAAGG,GAC7E,UAAAF,EAAA,CACH;AAEJ,CAAC;AAEDQ,EAAS,cAAc;AAEhB,MAAMC,IAAahB,EAA4C,SACpE,EAAE,SAAAc,IAAU,IAAO,OAAAG,IAAQ,SAAS,WAAAZ,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGE,EAAA,GACnEC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAE,KAAW;AAAA,QACX,wBAAwBG,CAAK;AAAA,QAC7BZ;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MACC,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDS,EAAW,cAAc;"}