@brycks/core-front 0.3.1 → 0.3.2

package/dist/components/form/Rating/Rating.js

@@ -0,0 +1,163 @@
+import { jsx as s, jsxs as R } from "react/jsx-runtime";
+import { forwardRef as U, useState as w, useCallback as h } from "react";
+import { cx as _ } from "../../../utils/styles.js";
+import { spacing as l } from "../../../design-system/tokens/spacing.js";
+import { durations as q, easings as H } from "../../../design-system/tokens/motion.js";
+const J = {
+  sm: { size: l[4], gap: l[0.5] },
+  md: { size: l[5], gap: l[1] },
+  lg: { size: l[6], gap: l[1] },
+  xl: { size: l[8], gap: l[1.5] }
+};
+function L({ filled: b, half: c }) {
+  return c ? /* @__PURE__ */ R("svg", { viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ R("linearGradient", { id: "halfGradient", children: [
+      /* @__PURE__ */ s("stop", { offset: "50%", stopColor: "currentColor" }),
+      /* @__PURE__ */ s("stop", { offset: "50%", stopColor: "transparent" })
+    ] }) }),
+    /* @__PURE__ */ s(
+      "path",
+      {
+        d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+        fill: "url(#halfGradient)",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }) : /* @__PURE__ */ s("svg", { viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ s(
+    "path",
+    {
+      d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+      fill: b ? "currentColor" : "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+const P = U(function({
+  value: c,
+  defaultValue: D = 0,
+  onChange: C,
+  max: u = 5,
+  size: M = "md",
+  allowHalf: i = !1,
+  readOnly: v = !1,
+  disabled: d = !1,
+  allowClear: z = !0,
+  filledIcon: S,
+  emptyIcon: x,
+  halfIcon: A,
+  color: F = "var(--brycks-warning-default)",
+  "aria-label": $ = "Rating",
+  className: j,
+  testId: B
+}, V) {
+  const [G, I] = w(D), [p, k] = w(null), o = c !== void 0 ? c : G, f = p !== null ? p : o, m = J[M], n = !v && !d, a = h(
+    (t) => {
+      if (!n) return;
+      const e = z && t === o ? 0 : t;
+      c === void 0 && I(e), C?.(e);
+    },
+    [n, z, o, c, C]
+  ), K = h(
+    (t, e) => {
+      if (!n) return;
+      const r = t.currentTarget.getBoundingClientRect(), y = t.clientX - r.left < r.width / 2;
+      k(i && y ? e + 0.5 : e + 1);
+    },
+    [n, i]
+  ), N = h(
+    (t, e) => {
+      if (!n) return;
+      const r = t.currentTarget.getBoundingClientRect(), y = t.clientX - r.left < r.width / 2;
+      a(i && y ? e + 0.5 : e + 1);
+    },
+    [n, i, a]
+  ), T = h(
+    (t) => {
+      if (!n) return;
+      const e = i ? 0.5 : 1;
+      switch (t.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          t.preventDefault(), a(Math.min(o + e, u));
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          t.preventDefault(), a(Math.max(o - e, 0));
+          break;
+        case "Home":
+          t.preventDefault(), a(0);
+          break;
+        case "End":
+          t.preventDefault(), a(u);
+          break;
+      }
+    },
+    [n, i, o, u, a]
+  ), W = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: m.gap,
+    cursor: n ? "pointer" : "default",
+    opacity: d ? 0.5 : 1,
+    outline: "none"
+  }, X = (t) => {
+    const e = t + 1, r = f >= e, g = i && f >= e - 0.5 && f < e;
+    return {
+      width: m.size,
+      height: m.size,
+      color: r || g ? F : "var(--brycks-border-default)",
+      transition: `all ${q.fast}ms ${H.easeOut}`,
+      transform: p !== null && p >= e ? "scale(1.1)" : "scale(1)"
+    };
+  }, E = (t) => {
+    const e = t + 1, r = f >= e;
+    return i && f >= e - 0.5 && f < e ? A || /* @__PURE__ */ s(L, { filled: !1, half: !0 }) : r ? S || /* @__PURE__ */ s(L, { filled: !0 }) : x || /* @__PURE__ */ s(L, { filled: !1 });
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: V,
+      role: "slider",
+      "aria-label": $,
+      "aria-valuemin": 0,
+      "aria-valuemax": u,
+      "aria-valuenow": o,
+      "aria-valuetext": `${o} out of ${u} stars`,
+      "aria-disabled": d,
+      "aria-readonly": v,
+      tabIndex: n ? 0 : -1,
+      className: _(
+        "brycks-rating",
+        `brycks-rating--${M}`,
+        v && "brycks-rating--readonly",
+        d && "brycks-rating--disabled",
+        j
+      ),
+      style: W,
+      onKeyDown: T,
+      onMouseLeave: () => n && k(null),
+      "data-testid": B,
+      children: Array.from({ length: u }, (t, e) => /* @__PURE__ */ s(
+        "span",
+        {
+          style: X(e),
+          onMouseMove: (r) => K(r, e),
+          onClick: (r) => N(r, e),
+          children: E(e)
+        },
+        e
+      ))
+    }
+  );
+});
+P.displayName = "Rating";
+export {
+  P as Rating
+};
+//# sourceMappingURL=Rating.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","sources":["../../../../src/components/form/Rating/Rating.tsx"],"sourcesContent":["/**\n * Rating Component\n *\n * A star rating component for collecting user ratings.\n * Supports half stars, custom icons, and keyboard navigation.\n *\n * @module components/form/Rating\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  type CSSProperties,\n  type ReactNode,\n  type KeyboardEvent,\n  type MouseEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, durations, easings } from '../../../design-system'\n\nexport type RatingSize = 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface RatingProps {\n  /** Current rating value */\n  value?: number\n  /** Default rating value (uncontrolled) */\n  defaultValue?: number\n  /** Callback when rating changes */\n  onChange?: (value: number) => void\n  /** Maximum rating (number of stars) */\n  max?: number\n  /** Component size */\n  size?: RatingSize\n  /** Whether to allow half stars */\n  allowHalf?: boolean\n  /** Whether the rating is read-only */\n  readOnly?: boolean\n  /** Whether the rating is disabled */\n  disabled?: boolean\n  /** Whether to allow clearing (clicking same value again) */\n  allowClear?: boolean\n  /** Custom filled icon */\n  filledIcon?: ReactNode\n  /** Custom empty icon */\n  emptyIcon?: ReactNode\n  /** Custom half-filled icon */\n  halfIcon?: ReactNode\n  /** Color for filled stars */\n  color?: string\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<RatingSize, { size: number; gap: number }> = {\n  sm: { size: spacing[4], gap: spacing[0.5] },\n  md: { size: spacing[5], gap: spacing[1] },\n  lg: { size: spacing[6], gap: spacing[1] },\n  xl: { size: spacing[8], gap: spacing[1.5] },\n}\n\nfunction StarIcon({ filled, half }: { filled: boolean; half?: boolean }) {\n  if (half) {\n    return (\n      <svg viewBox=\"0 0 24 24\" fill=\"none\">\n        <defs>\n          <linearGradient id=\"halfGradient\">\n            <stop offset=\"50%\" stopColor=\"currentColor\" />\n            <stop offset=\"50%\" stopColor=\"transparent\" />\n          </linearGradient>\n        </defs>\n        <path\n          d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n          fill=\"url(#halfGradient)\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    )\n  }\n\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\">\n      <path\n        d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n        fill={filled ? 'currentColor' : 'none'}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(\n  {\n    value: controlledValue,\n    defaultValue = 0,\n    onChange,\n    max = 5,\n    size = 'md',\n    allowHalf = false,\n    readOnly = false,\n    disabled = false,\n    allowClear = true,\n    filledIcon,\n    emptyIcon,\n    halfIcon,\n    color = 'var(--brycks-warning-default)',\n    'aria-label': ariaLabel = 'Rating',\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [hoverValue, setHoverValue] = useState<number | null>(null)\n\n  const value = controlledValue !== undefined ? controlledValue : internalValue\n  const displayValue = hoverValue !== null ? hoverValue : value\n  const config = sizeConfig[size]\n\n  const isInteractive = !readOnly && !disabled\n\n  const handleSelect = useCallback(\n    (newValue: number) => {\n      if (!isInteractive) return\n\n      // Allow clearing if clicking same value\n      const finalValue = allowClear && newValue === value ? 0 : newValue\n\n      if (controlledValue === undefined) {\n        setInternalValue(finalValue)\n      }\n      onChange?.(finalValue)\n    },\n    [isInteractive, allowClear, value, controlledValue, onChange]\n  )\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent<HTMLSpanElement>, starIndex: number) => {\n      if (!isInteractive) return\n\n      const rect = e.currentTarget.getBoundingClientRect()\n      const x = e.clientX - rect.left\n      const isLeftHalf = x < rect.width / 2\n\n      if (allowHalf && isLeftHalf) {\n        setHoverValue(starIndex + 0.5)\n      } else {\n        setHoverValue(starIndex + 1)\n      }\n    },\n    [isInteractive, allowHalf]\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLSpanElement>, starIndex: number) => {\n      if (!isInteractive) return\n\n      const rect = e.currentTarget.getBoundingClientRect()\n      const x = e.clientX - rect.left\n      const isLeftHalf = x < rect.width / 2\n\n      if (allowHalf && isLeftHalf) {\n        handleSelect(starIndex + 0.5)\n      } else {\n        handleSelect(starIndex + 1)\n      }\n    },\n    [isInteractive, allowHalf, handleSelect]\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (!isInteractive) return\n\n      const step = allowHalf ? 0.5 : 1\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          e.preventDefault()\n          handleSelect(Math.min(value + step, max))\n          break\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          e.preventDefault()\n          handleSelect(Math.max(value - step, 0))\n          break\n        case 'Home':\n          e.preventDefault()\n          handleSelect(0)\n          break\n        case 'End':\n          e.preventDefault()\n          handleSelect(max)\n          break\n      }\n    },\n    [isInteractive, allowHalf, value, max, handleSelect]\n  )\n\n  const containerStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: config.gap,\n    cursor: isInteractive ? 'pointer' : 'default',\n    opacity: disabled ? 0.5 : 1,\n    outline: 'none',\n  }\n\n  const starStyle = (index: number): CSSProperties => {\n    const starValue = index + 1\n    const isFilled = displayValue >= starValue\n    const isHalfFilled = allowHalf && displayValue >= starValue - 0.5 && displayValue < starValue\n\n    return {\n      width: config.size,\n      height: config.size,\n      color: isFilled || isHalfFilled ? color : 'var(--brycks-border-default)',\n      transition: `all ${durations.fast}ms ${easings.easeOut}`,\n      transform: hoverValue !== null && hoverValue >= starValue ? 'scale(1.1)' : 'scale(1)',\n    }\n  }\n\n  const renderStar = (index: number) => {\n    const starValue = index + 1\n    const isFilled = displayValue >= starValue\n    const isHalfFilled = allowHalf && displayValue >= starValue - 0.5 && displayValue < starValue\n\n    if (isHalfFilled) {\n      return halfIcon || <StarIcon filled={false} half />\n    }\n    if (isFilled) {\n      return filledIcon || <StarIcon filled />\n    }\n    return emptyIcon || <StarIcon filled={false} />\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"slider\"\n      aria-label={ariaLabel}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      aria-valuetext={`${value} out of ${max} stars`}\n      aria-disabled={disabled}\n      aria-readonly={readOnly}\n      tabIndex={isInteractive ? 0 : -1}\n      className={cx(\n        'brycks-rating',\n        `brycks-rating--${size}`,\n        readOnly && 'brycks-rating--readonly',\n        disabled && 'brycks-rating--disabled',\n        className\n      )}\n      style={containerStyle}\n      onKeyDown={handleKeyDown}\n      onMouseLeave={() => isInteractive && setHoverValue(null)}\n      data-testid={testId}\n    >\n      {Array.from({ length: max }, (_, index) => (\n        <span\n          key={index}\n          style={starStyle(index)}\n          onMouseMove={(e) => handleMouseMove(e, index)}\n          onClick={(e) => handleClick(e, index)}\n        >\n          {renderStar(index)}\n        </span>\n      ))}\n    </div>\n  )\n})\n\nRating.displayName = 'Rating'\n"],"names":["sizeConfig","spacing","StarIcon","filled","half","jsxs","jsx","Rating","forwardRef","controlledValue","defaultValue","onChange","max","size","allowHalf","readOnly","disabled","allowClear","filledIcon","emptyIcon","halfIcon","color","ariaLabel","className","testId","ref","internalValue","setInternalValue","useState","hoverValue","setHoverValue","value","displayValue","config","isInteractive","handleSelect","useCallback","newValue","finalValue","handleMouseMove","e","starIndex","rect","isLeftHalf","handleClick","handleKeyDown","step","containerStyle","starStyle","index","starValue","isFilled","isHalfFilled","durations","easings","renderStar","cx","_"],"mappings":"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"}

package/dist/components/form/Slider/Slider.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),V=require("../../../utils/styles.cjs"),A={sm:{track:4,thumb:14,fontSize:12},md:{track:6,thumb:18,fontSize:14},lg:{track:8,thumb:22,fontSize:16}},x=r.forwardRef(function({size:g="md",min:o=0,max:i=100,step:w=1,value:d,defaultValue:j=o,onChange:p,showValue:b=!1,formatValue:R=y=>String(y),label:f,disabled:n=!1,className:C,style:z,testId:M,...E},l){const[y,I]=r.useState(j),[c,u]=r.useState(!1),[$,m]=r.useState(!1),v=r.useRef(null),h=d??y,t=A[g],S=(h-o)/(i-o)*100,k=r.useCallback(e=>{const a=Math.max(o,Math.min(i,e));d===void 0&&I(a),p?.(a)},[d,o,i,p]);r.useEffect(()=>{const e=v.current;if(!e)return;const a=P=>{const U=P.target;k(parseFloat(U.value))};return e.addEventListener("input",a),()=>e.removeEventListener("input",a)},[k]);const D={display:"flex",flexDirection:"column",gap:8,opacity:n?.5:1,...z},q={display:"flex",alignItems:"center",justifyContent:"space-between",gap:12},L={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-default)"},N={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-muted)",fontVariantNumeric:"tabular-nums"},T={position:"relative",display:"flex",alignItems:"center",height:t.thumb,cursor:n?"not-allowed":"pointer"},H={position:"absolute",width:"100%",height:t.track,borderRadius:t.track/2,backgroundColor:"var(--brycks-background-muted)"},W={position:"absolute",left:0,height:t.track,width:`${S}%`,borderRadius:t.track/2,backgroundColor:n?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)",transition:c?"none":"width 100ms ease-out"},F={position:"absolute",left:`calc(${S}% - ${t.thumb/2}px)`,width:t.thumb,height:t.thumb,borderRadius:"50%",backgroundColor:"white",border:`2px solid ${n?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)"}`,boxShadow:c||$?"var(--brycks-shadow-md)":"var(--brycks-shadow-sm)",transform:c?"scale(1.1)":"scale(1)",transition:c?"transform 100ms ease-out, box-shadow 100ms ease-out":"all 100ms ease-out",pointerEvents:"none"},O={position:"absolute",width:"100%",height:t.thumb,margin:0,padding:0,opacity:0,cursor:n?"not-allowed":"pointer"};return s.jsxs("div",{className:V.cx("brycks-slider",`brycks-slider--${g}`,C),style:D,children:[(f||b)&&s.jsxs("div",{style:q,children:[f&&s.jsx("span",{style:L,children:f}),b&&s.jsx("span",{style:N,children:R(h)})]}),s.jsxs("div",{style:T,onMouseEnter:()=>m(!0),onMouseLeave:()=>m(!1),children:[s.jsx("div",{style:H}),s.jsx("div",{style:W}),s.jsx("div",{style:F}),s.jsx("input",{ref:e=>{v.current=e,typeof l=="function"?l(e):l&&(l.current=e)},type:"range",min:o,max:i,step:w,value:h,disabled:n,style:O,onMouseDown:()=>u(!0),onMouseUp:()=>u(!1),onTouchStart:()=>u(!0),onTouchEnd:()=>u(!1),"data-testid":M,...E})]})]})});x.displayName="Slider";exports.Slider=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react"),J=require("../../../utils/styles.cjs"),m=require("../../../design-system/tokens/typography.cjs"),l=require("../../../design-system/tokens/spacing.cjs"),z=require("../../../design-system/primitives/sizing.cjs"),c=require("../../../design-system/tokens/motion.cjs"),Q={sm:{track:l.spacing[1],thumb:l.spacing[3.5],fontSize:m.fontSizes.sm},md:{track:z.componentGap.sm,thumb:l.spacing[4]+l.spacing[.5],fontSize:m.fontSizes.base},lg:{track:l.spacing[2],thumb:l.spacing[5]+l.spacing[.5],fontSize:m.fontSizes.md}},R=i.forwardRef(function({size:k="md",min:a=0,max:u=100,step:f=1,value:b,defaultValue:C=a,onChange:S,showValue:w=!1,formatValue:x=v=>String(v),label:p,disabled:d=!1,className:q,style:E,testId:M,...I},g){const[v,O]=i.useState(C),[y,h]=i.useState(!1),[A,D]=i.useState(!1),$=i.useRef(null),s=b??v,t=Q[k],j=(s-a)/(u-a)*100,r=i.useCallback(e=>{const n=Math.max(a,Math.min(u,e));b===void 0&&O(n),S?.(n)},[b,a,u,S]);i.useEffect(()=>{const e=$.current;if(!e)return;const n=V=>{const B=V.target;r(parseFloat(B.value))};return e.addEventListener("input",n),()=>e.removeEventListener("input",n)},[r]);const L=i.useCallback(e=>{const n=e.shiftKey?f*10:f;switch(e.key){case"ArrowRight":case"ArrowUp":e.preventDefault(),r(s+n);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),r(s-n);break;case"Home":e.preventDefault(),r(a);break;case"End":e.preventDefault(),r(u);break;case"PageUp":e.preventDefault(),r(s+n*10);break;case"PageDown":e.preventDefault(),r(s-n*10);break}},[s,f,a,u,r]),H={display:"flex",flexDirection:"column",gap:l.spacing[2],opacity:d?.5:1,...E},K={display:"flex",alignItems:"center",justifyContent:"space-between",gap:z.componentGap.xl},N={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-default)"},P={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-muted)",fontVariantNumeric:"tabular-nums"},T={position:"relative",display:"flex",alignItems:"center",height:t.thumb,cursor:d?"not-allowed":"pointer"},U={position:"absolute",width:"100%",height:t.track,borderRadius:t.track/2,backgroundColor:"var(--brycks-background-muted)"},G={position:"absolute",left:0,height:t.track,width:`${j}%`,borderRadius:t.track/2,backgroundColor:d?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)",transition:y?"none":`width ${c.durations.fast}ms ${c.easings.easeOut}`},W={position:"absolute",left:`calc(${j}% - ${t.thumb/2}px)`,width:t.thumb,height:t.thumb,borderRadius:"50%",backgroundColor:"white",border:`2px solid ${d?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)"}`,boxShadow:y||A?"var(--brycks-shadow-md)":"var(--brycks-shadow-sm)",transform:y?"scale(1.1)":"scale(1)",transition:y?`transform ${c.durations.fast}ms ${c.easings.easeOut}, box-shadow ${c.durations.fast}ms ${c.easings.easeOut}`:`all ${c.durations.fast}ms ${c.easings.easeOut}`,pointerEvents:"none"},F={position:"absolute",width:"100%",height:t.thumb,margin:0,padding:0,opacity:0,cursor:d?"not-allowed":"pointer"};return o.jsxs("div",{className:J.cx("brycks-slider",`brycks-slider--${k}`,q),style:H,children:[(p||w)&&o.jsxs("div",{style:K,children:[p&&o.jsx("span",{style:N,children:p}),w&&o.jsx("span",{style:P,children:x(s)})]}),o.jsxs("div",{style:T,onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),children:[o.jsx("div",{style:U}),o.jsx("div",{style:G}),o.jsx("div",{style:W}),o.jsx("input",{ref:e=>{$.current=e,typeof g=="function"?g(e):g&&(g.current=e)},type:"range",role:"slider","aria-valuemin":a,"aria-valuemax":u,"aria-valuenow":s,"aria-valuetext":x(s),"aria-label":p,min:a,max:u,step:f,value:s,disabled:d,style:F,onKeyDown:L,onMouseDown:()=>h(!0),onMouseUp:()=>h(!1),onTouchStart:()=>h(!0),onTouchEnd:()=>h(!1),"data-testid":M,...I})]})]})});R.displayName="Slider";exports.Slider=R;
 //# sourceMappingURL=Slider.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","sources":["../../../../src/components/form/Slider/Slider.tsx"],"sourcesContent":["/**\n * Slider Component\n *\n * Accessible range slider with custom styling.\n * Supports different sizes and shows value feedback.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type CSSProperties,\n  type InputHTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type SliderSize = 'sm' | 'md' | 'lg'\n\nexport interface SliderProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange'> {\n  /** Slider size */\n  size?: SliderSize\n  /** Minimum value */\n  min?: number\n  /** Maximum value */\n  max?: number\n  /** Step increment */\n  step?: number\n  /** Current value (controlled) */\n  value?: number\n  /** Default value (uncontrolled) */\n  defaultValue?: number\n  /** Callback when value changes */\n  onChange?: (value: number) => void\n  /** Whether to show the value label */\n  showValue?: boolean\n  /** Format the value for display */\n  formatValue?: (value: number) => string\n  /** Label for the slider */\n  label?: string\n  /** Whether the slider is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<SliderSize, { track: number; thumb: number; fontSize: number }> = {\n  sm: { track: 4, thumb: 14, fontSize: 12 },\n  md: { track: 6, thumb: 18, fontSize: 14 },\n  lg: { track: 8, thumb: 22, fontSize: 16 },\n}\n\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    size = 'md',\n    min = 0,\n    max = 100,\n    step = 1,\n    value: controlledValue,\n    defaultValue = min,\n    onChange,\n    showValue = false,\n    formatValue = (v) => String(v),\n    label,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [isDragging, setIsDragging] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const value = controlledValue ?? internalValue\n  const config = sizeConfig[size]\n  const percentage = ((value - min) / (max - min)) * 100\n\n  const handleChange = useCallback(\n    (newValue: number) => {\n      const clampedValue = Math.max(min, Math.min(max, newValue))\n      if (controlledValue === undefined) {\n        setInternalValue(clampedValue)\n      }\n      onChange?.(clampedValue)\n    },\n    [controlledValue, min, max, onChange]\n  )\n\n  useEffect(() => {\n    const input = inputRef.current\n    if (!input) return\n\n    const handleInputChange = (e: Event) => {\n      const target = e.target as HTMLInputElement\n      handleChange(parseFloat(target.value))\n    }\n\n    input.addEventListener('input', handleInputChange)\n    return () => input.removeEventListener('input', handleInputChange)\n  }, [handleChange])\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 8,\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  }\n\n  const labelRowStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 12,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const valueStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-muted)',\n    fontVariantNumeric: 'tabular-nums',\n  }\n\n  const sliderContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    height: config.thumb,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  const trackStyle: CSSProperties = {\n    position: 'absolute',\n    width: '100%',\n    height: config.track,\n    borderRadius: config.track / 2,\n    backgroundColor: 'var(--brycks-background-muted)',\n  }\n\n  const fillStyle: CSSProperties = {\n    position: 'absolute',\n    left: 0,\n    height: config.track,\n    width: `${percentage}%`,\n    borderRadius: config.track / 2,\n    backgroundColor: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-primary-default)',\n    transition: isDragging ? 'none' : 'width 100ms ease-out',\n  }\n\n  const thumbStyle: CSSProperties = {\n    position: 'absolute',\n    left: `calc(${percentage}% - ${config.thumb / 2}px)`,\n    width: config.thumb,\n    height: config.thumb,\n    borderRadius: '50%',\n    backgroundColor: 'white',\n    border: `2px solid ${\n      disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-primary-default)'\n    }`,\n    boxShadow: isDragging || isHovered\n      ? 'var(--brycks-shadow-md)'\n      : 'var(--brycks-shadow-sm)',\n    transform: isDragging ? 'scale(1.1)' : 'scale(1)',\n    transition: isDragging\n      ? 'transform 100ms ease-out, box-shadow 100ms ease-out'\n      : 'all 100ms ease-out',\n    pointerEvents: 'none',\n  }\n\n  const inputStyle: CSSProperties = {\n    position: 'absolute',\n    width: '100%',\n    height: config.thumb,\n    margin: 0,\n    padding: 0,\n    opacity: 0,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  return (\n    <div className={cx('brycks-slider', `brycks-slider--${size}`, className)} style={containerStyle}>\n      {(label || showValue) && (\n        <div style={labelRowStyle}>\n          {label && <span style={labelStyle}>{label}</span>}\n          {showValue && <span style={valueStyle}>{formatValue(value)}</span>}\n        </div>\n      )}\n      <div\n        style={sliderContainerStyle}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <div style={trackStyle} />\n        <div style={fillStyle} />\n        <div style={thumbStyle} />\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"range\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          style={inputStyle}\n          onMouseDown={() => setIsDragging(true)}\n          onMouseUp={() => setIsDragging(false)}\n          onTouchStart={() => setIsDragging(true)}\n          onTouchEnd={() => setIsDragging(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </div>\n    </div>\n  )\n})\n\nSlider.displayName = 'Slider'\n"],"names":["sizeConfig","Slider","forwardRef","size","min","max","step","controlledValue","defaultValue","onChange","showValue","formatValue","v","label","disabled","className","style","testId","props","ref","internalValue","setInternalValue","useState","isDragging","setIsDragging","isHovered","setIsHovered","inputRef","useRef","value","config","percentage","handleChange","useCallback","newValue","clampedValue","useEffect","input","handleInputChange","e","target","containerStyle","labelRowStyle","labelStyle","valueStyle","sliderContainerStyle","trackStyle","fillStyle","thumbStyle","inputStyle","jsxs","cx","jsx","node"],"mappings":"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"}
+{"version":3,"file":"Slider.cjs","sources":["../../../../src/components/form/Slider/Slider.tsx"],"sourcesContent":["/**\n * Slider Component\n *\n * Accessible range slider with custom styling.\n * Supports different sizes and shows value feedback.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentGap } from '../../../design-system/primitives'\n\nexport type SliderSize = 'sm' | 'md' | 'lg'\n\nexport interface SliderProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange'> {\n  /** Slider size */\n  size?: SliderSize\n  /** Minimum value */\n  min?: number\n  /** Maximum value */\n  max?: number\n  /** Step increment */\n  step?: number\n  /** Current value (controlled) */\n  value?: number\n  /** Default value (uncontrolled) */\n  defaultValue?: number\n  /** Callback when value changes */\n  onChange?: (value: number) => void\n  /** Whether to show the value label */\n  showValue?: boolean\n  /** Format the value for display */\n  formatValue?: (value: number) => string\n  /** Label for the slider */\n  label?: string\n  /** Whether the slider is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<SliderSize, { track: number; thumb: number; fontSize: number }> = {\n  sm: { track: spacing[1], thumb: spacing[3.5], fontSize: fontSizes.sm },\n  md: { track: componentGap.sm, thumb: spacing[4] + spacing[0.5], fontSize: fontSizes.base },\n  lg: { track: spacing[2], thumb: spacing[5] + spacing[0.5], fontSize: fontSizes.md },\n}\n\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    size = 'md',\n    min = 0,\n    max = 100,\n    step = 1,\n    value: controlledValue,\n    defaultValue = min,\n    onChange,\n    showValue = false,\n    formatValue = (v) => String(v),\n    label,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [isDragging, setIsDragging] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const value = controlledValue ?? internalValue\n  const config = sizeConfig[size]\n  const percentage = ((value - min) / (max - min)) * 100\n\n  const handleChange = useCallback(\n    (newValue: number) => {\n      const clampedValue = Math.max(min, Math.min(max, newValue))\n      if (controlledValue === undefined) {\n        setInternalValue(clampedValue)\n      }\n      onChange?.(clampedValue)\n    },\n    [controlledValue, min, max, onChange]\n  )\n\n  useEffect(() => {\n    const input = inputRef.current\n    if (!input) return\n\n    const handleInputChange = (e: Event) => {\n      const target = e.target as HTMLInputElement\n      handleChange(parseFloat(target.value))\n    }\n\n    input.addEventListener('input', handleInputChange)\n    return () => input.removeEventListener('input', handleInputChange)\n  }, [handleChange])\n\n  // Keyboard navigation for accessibility\n  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n    const stepValue = e.shiftKey ? step * 10 : step\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        e.preventDefault()\n        handleChange(value + stepValue)\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        e.preventDefault()\n        handleChange(value - stepValue)\n        break\n      case 'Home':\n        e.preventDefault()\n        handleChange(min)\n        break\n      case 'End':\n        e.preventDefault()\n        handleChange(max)\n        break\n      case 'PageUp':\n        e.preventDefault()\n        handleChange(value + stepValue * 10)\n        break\n      case 'PageDown':\n        e.preventDefault()\n        handleChange(value - stepValue * 10)\n        break\n    }\n  }, [value, step, min, max, handleChange])\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: spacing[2],\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  }\n\n  const labelRowStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: componentGap.xl,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const valueStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-muted)',\n    fontVariantNumeric: 'tabular-nums',\n  }\n\n  const sliderContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    height: config.thumb,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  const trackStyle: CSSProperties = {\n    position: 'absolute',\n    width: '100%',\n    height: config.track,\n    borderRadius: config.track / 2,\n    backgroundColor: 'var(--brycks-background-muted)',\n  }\n\n  const fillStyle: CSSProperties = {\n    position: 'absolute',\n    left: 0,\n    height: config.track,\n    width: `${percentage}%`,\n    borderRadius: config.track / 2,\n    backgroundColor: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-primary-default)',\n    transition: isDragging ? 'none' : `width ${durations.fast}ms ${easings.easeOut}`,\n  }\n\n  const thumbStyle: CSSProperties = {\n    position: 'absolute',\n    left: `calc(${percentage}% - ${config.thumb / 2}px)`,\n    width: config.thumb,\n    height: config.thumb,\n    borderRadius: '50%',\n    backgroundColor: 'white',\n    border: `2px solid ${\n      disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-primary-default)'\n    }`,\n    boxShadow: isDragging || isHovered\n      ? 'var(--brycks-shadow-md)'\n      : 'var(--brycks-shadow-sm)',\n    transform: isDragging ? 'scale(1.1)' : 'scale(1)',\n    transition: isDragging\n      ? `transform ${durations.fast}ms ${easings.easeOut}, box-shadow ${durations.fast}ms ${easings.easeOut}`\n      : `all ${durations.fast}ms ${easings.easeOut}`,\n    pointerEvents: 'none',\n  }\n\n  const inputStyle: CSSProperties = {\n    position: 'absolute',\n    width: '100%',\n    height: config.thumb,\n    margin: 0,\n    padding: 0,\n    opacity: 0,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  return (\n    <div className={cx('brycks-slider', `brycks-slider--${size}`, className)} style={containerStyle}>\n      {(label || showValue) && (\n        <div style={labelRowStyle}>\n          {label && <span style={labelStyle}>{label}</span>}\n          {showValue && <span style={valueStyle}>{formatValue(value)}</span>}\n        </div>\n      )}\n      <div\n        style={sliderContainerStyle}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <div style={trackStyle} />\n        <div style={fillStyle} />\n        <div style={thumbStyle} />\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"range\"\n          role=\"slider\"\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={value}\n          aria-valuetext={formatValue(value)}\n          aria-label={label}\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          style={inputStyle}\n          onKeyDown={handleKeyDown}\n          onMouseDown={() => setIsDragging(true)}\n          onMouseUp={() => setIsDragging(false)}\n          onTouchStart={() => setIsDragging(true)}\n          onTouchEnd={() => setIsDragging(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </div>\n    </div>\n  )\n})\n\nSlider.displayName = 'Slider'\n"],"names":["sizeConfig","spacing","fontSizes","componentGap","Slider","forwardRef","size","min","max","step","controlledValue","defaultValue","onChange","showValue","formatValue","label","disabled","className","style","testId","props","ref","internalValue","setInternalValue","useState","isDragging","setIsDragging","isHovered","setIsHovered","inputRef","useRef","value","config","percentage","handleChange","useCallback","newValue","clampedValue","useEffect","input","handleInputChange","e","target","handleKeyDown","stepValue","containerStyle","labelRowStyle","labelStyle","valueStyle","sliderContainerStyle","trackStyle","fillStyle","durations","easings","thumbStyle","inputStyle","jsxs","cx","jsx","node"],"mappings":"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"}

package/dist/components/form/Slider/Slider.js

@@ -1,138 +1,173 @@
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { forwardRef as B, useState as y, useRef as G, useCallback as J, useEffect as K } from "react";
-import { cx as O } from "../../../utils/styles.js";
-const P = {
-  sm: { track: 4, thumb: 14, fontSize: 12 },
-  md: { track: 6, thumb: 18, fontSize: 14 },
-  lg: { track: 8, thumb: 22, fontSize: 16 }
-}, Q = B(function({
-  size: g = "md",
-  min: o = 0,
-  max: a = 100,
-  step: x = 1,
-  value: u,
-  defaultValue: C = o,
-  onChange: m,
-  showValue: b = !1,
-  formatValue: z = (f) => String(f),
-  label: d,
-  disabled: r = !1,
-  className: R,
-  style: E,
-  testId: I,
-  ...M
-}, i) {
-  const [f, $] = y(C), [l, c] = y(!1), [D, v] = y(!1), k = G(null), h = u ?? f, t = P[g], S = (h - o) / (a - o) * 100, w = J(
+import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { forwardRef as X, useState as k, useRef as Y, useCallback as E, useEffect as Z } from "react";
+import { cx as _ } from "../../../utils/styles.js";
+import { fontSizes as w } from "../../../design-system/tokens/typography.js";
+import { spacing as s } from "../../../design-system/tokens/spacing.js";
+import { componentGap as I } from "../../../design-system/primitives/sizing.js";
+import { durations as m, easings as y } from "../../../design-system/tokens/motion.js";
+const ee = {
+  sm: { track: s[1], thumb: s[3.5], fontSize: w.sm },
+  md: { track: I.sm, thumb: s[4] + s[0.5], fontSize: w.base },
+  lg: { track: s[2], thumb: s[5] + s[0.5], fontSize: w.md }
+}, te = X(function({
+  size: S = "md",
+  min: a = 0,
+  max: i = 100,
+  step: u = 1,
+  value: g,
+  defaultValue: M = a,
+  onChange: D,
+  showValue: $ = !1,
+  formatValue: x = (b) => String(b),
+  label: f,
+  disabled: l = !1,
+  className: A,
+  style: L,
+  testId: O,
+  ...j
+}, d) {
+  const [b, H] = k(M), [p, h] = k(!1), [K, z] = k(!1), C = Y(null), r = g ?? b, t = ee[S], R = (r - a) / (i - a) * 100, n = E(
     (e) => {
-      const s = Math.max(o, Math.min(a, e));
-      u === void 0 && $(s), m?.(s);
+      const o = Math.max(a, Math.min(i, e));
+      g === void 0 && H(o), D?.(o);
     },
-    [u, o, a, m]
+    [g, a, i, D]
   );
-  K(() => {
-    const e = k.current;
+  Z(() => {
+    const e = C.current;
     if (!e) return;
-    const s = (q) => {
-      const A = q.target;
-      w(parseFloat(A.value));
+    const o = (J) => {
+      const Q = J.target;
+      n(parseFloat(Q.value));
     };
-    return e.addEventListener("input", s), () => e.removeEventListener("input", s);
-  }, [w]);
-  const j = {
+    return e.addEventListener("input", o), () => e.removeEventListener("input", o);
+  }, [n]);
+  const N = E((e) => {
+    const o = e.shiftKey ? u * 10 : u;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        e.preventDefault(), n(r + o);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        e.preventDefault(), n(r - o);
+        break;
+      case "Home":
+        e.preventDefault(), n(a);
+        break;
+      case "End":
+        e.preventDefault(), n(i);
+        break;
+      case "PageUp":
+        e.preventDefault(), n(r + o * 10);
+        break;
+      case "PageDown":
+        e.preventDefault(), n(r - o * 10);
+        break;
+    }
+  }, [r, u, a, i, n]), U = {
     display: "flex",
     flexDirection: "column",
-    gap: 8,
-    opacity: r ? 0.5 : 1,
-    ...E
-  }, L = {
+    gap: s[2],
+    opacity: l ? 0.5 : 1,
+    ...L
+  }, P = {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: 12
-  }, N = {
+    gap: I.xl
+  }, T = {
     fontSize: t.fontSize,
     fontWeight: 500,
     color: "var(--brycks-foreground-default)"
-  }, H = {
+  }, W = {
     fontSize: t.fontSize,
     fontWeight: 500,
     color: "var(--brycks-foreground-muted)",
     fontVariantNumeric: "tabular-nums"
-  }, T = {
+  }, F = {
     position: "relative",
     display: "flex",
     alignItems: "center",
     height: t.thumb,
-    cursor: r ? "not-allowed" : "pointer"
-  }, W = {
+    cursor: l ? "not-allowed" : "pointer"
+  }, G = {
     position: "absolute",
     width: "100%",
     height: t.track,
     borderRadius: t.track / 2,
     backgroundColor: "var(--brycks-background-muted)"
-  }, F = {
+  }, V = {
     position: "absolute",
     left: 0,
     height: t.track,
-    width: `${S}%`,
+    width: `${R}%`,
     borderRadius: t.track / 2,
-    backgroundColor: r ? "var(--brycks-foreground-muted)" : "var(--brycks-primary-default)",
-    transition: l ? "none" : "width 100ms ease-out"
-  }, U = {
+    backgroundColor: l ? "var(--brycks-foreground-muted)" : "var(--brycks-primary-default)",
+    transition: p ? "none" : `width ${m.fast}ms ${y.easeOut}`
+  }, q = {
     position: "absolute",
-    left: `calc(${S}% - ${t.thumb / 2}px)`,
+    left: `calc(${R}% - ${t.thumb / 2}px)`,
     width: t.thumb,
     height: t.thumb,
     borderRadius: "50%",
     backgroundColor: "white",
-    border: `2px solid ${r ? "var(--brycks-foreground-muted)" : "var(--brycks-primary-default)"}`,
-    boxShadow: l || D ? "var(--brycks-shadow-md)" : "var(--brycks-shadow-sm)",
-    transform: l ? "scale(1.1)" : "scale(1)",
-    transition: l ? "transform 100ms ease-out, box-shadow 100ms ease-out" : "all 100ms ease-out",
+    border: `2px solid ${l ? "var(--brycks-foreground-muted)" : "var(--brycks-primary-default)"}`,
+    boxShadow: p || K ? "var(--brycks-shadow-md)" : "var(--brycks-shadow-sm)",
+    transform: p ? "scale(1.1)" : "scale(1)",
+    transition: p ? `transform ${m.fast}ms ${y.easeOut}, box-shadow ${m.fast}ms ${y.easeOut}` : `all ${m.fast}ms ${y.easeOut}`,
     pointerEvents: "none"
-  }, V = {
+  }, B = {
     position: "absolute",
     width: "100%",
     height: t.thumb,
     margin: 0,
     padding: 0,
     opacity: 0,
-    cursor: r ? "not-allowed" : "pointer"
+    cursor: l ? "not-allowed" : "pointer"
   };
-  return /* @__PURE__ */ p("div", { className: O("brycks-slider", `brycks-slider--${g}`, R), style: j, children: [
-    (d || b) && /* @__PURE__ */ p("div", { style: L, children: [
-      d && /* @__PURE__ */ n("span", { style: N, children: d }),
-      b && /* @__PURE__ */ n("span", { style: H, children: z(h) })
+  return /* @__PURE__ */ v("div", { className: _("brycks-slider", `brycks-slider--${S}`, A), style: U, children: [
+    (f || $) && /* @__PURE__ */ v("div", { style: P, children: [
+      f && /* @__PURE__ */ c("span", { style: T, children: f }),
+      $ && /* @__PURE__ */ c("span", { style: W, children: x(r) })
     ] }),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ v(
       "div",
       {
-        style: T,
-        onMouseEnter: () => v(!0),
-        onMouseLeave: () => v(!1),
+        style: F,
+        onMouseEnter: () => z(!0),
+        onMouseLeave: () => z(!1),
         children: [
-          /* @__PURE__ */ n("div", { style: W }),
-          /* @__PURE__ */ n("div", { style: F }),
-          /* @__PURE__ */ n("div", { style: U }),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ c("div", { style: G }),
+          /* @__PURE__ */ c("div", { style: V }),
+          /* @__PURE__ */ c("div", { style: q }),
+          /* @__PURE__ */ c(
             "input",
             {
               ref: (e) => {
-                k.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+                C.current = e, typeof d == "function" ? d(e) : d && (d.current = e);
               },
               type: "range",
-              min: o,
-              max: a,
-              step: x,
-              value: h,
-              disabled: r,
-              style: V,
-              onMouseDown: () => c(!0),
-              onMouseUp: () => c(!1),
-              onTouchStart: () => c(!0),
-              onTouchEnd: () => c(!1),
-              "data-testid": I,
-              ...M
+              role: "slider",
+              "aria-valuemin": a,
+              "aria-valuemax": i,
+              "aria-valuenow": r,
+              "aria-valuetext": x(r),
+              "aria-label": f,
+              min: a,
+              max: i,
+              step: u,
+              value: r,
+              disabled: l,
+              style: B,
+              onKeyDown: N,
+              onMouseDown: () => h(!0),
+              onMouseUp: () => h(!1),
+              onTouchStart: () => h(!0),
+              onTouchEnd: () => h(!1),
+              "data-testid": O,
+              ...j
             }
           )
         ]
@@ -140,8 +175,8 @@ const P = {
     )
   ] });
 });
-Q.displayName = "Slider";
+te.displayName = "Slider";
 export {
-  Q as Slider
+  te as Slider
 };
 //# sourceMappingURL=Slider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/components/form/Slider/Slider.tsx"],"sourcesContent":["/**\n * Slider Component\n *\n * Accessible range slider with custom styling.\n * Supports different sizes and shows value feedback.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type CSSProperties,\n  type InputHTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type SliderSize = 'sm' | 'md' | 'lg'\n\nexport interface SliderProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange'> {\n  /** Slider size */\n  size?: SliderSize\n  /** Minimum value */\n  min?: number\n  /** Maximum value */\n  max?: number\n  /** Step increment */\n  step?: number\n  /** Current value (controlled) */\n  value?: number\n  /** Default value (uncontrolled) */\n  defaultValue?: number\n  /** Callback when value changes */\n  onChange?: (value: number) => void\n  /** Whether to show the value label */\n  showValue?: boolean\n  /** Format the value for display */\n  formatValue?: (value: number) => string\n  /** Label for the slider */\n  label?: string\n  /** Whether the slider is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<SliderSize, { track: number; thumb: number; fontSize: number }> = {\n  sm: { track: 4, thumb: 14, fontSize: 12 },\n  md: { track: 6, thumb: 18, fontSize: 14 },\n  lg: { track: 8, thumb: 22, fontSize: 16 },\n}\n\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    size = 'md',\n    min = 0,\n    max = 100,\n    step = 1,\n    value: controlledValue,\n    defaultValue = min,\n    onChange,\n    showValue = false,\n    formatValue = (v) => String(v),\n    label,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [isDragging, setIsDragging] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const value = controlledValue ?? internalValue\n  const config = sizeConfig[size]\n  const percentage = ((value - min) / (max - min)) * 100\n\n  const handleChange = useCallback(\n    (newValue: number) => {\n      const clampedValue = Math.max(min, Math.min(max, newValue))\n      if (controlledValue === undefined) {\n        setInternalValue(clampedValue)\n      }\n      onChange?.(clampedValue)\n    },\n    [controlledValue, min, max, onChange]\n  )\n\n  useEffect(() => {\n    const input = inputRef.current\n    if (!input) return\n\n    const handleInputChange = (e: Event) => {\n      const target = e.target as HTMLInputElement\n      handleChange(parseFloat(target.value))\n    }\n\n    input.addEventListener('input', handleInputChange)\n    return () => input.removeEventListener('input', handleInputChange)\n  }, [handleChange])\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 8,\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  }\n\n  const labelRowStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 12,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const valueStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-muted)',\n    fontVariantNumeric: 'tabular-nums',\n  }\n\n  const sliderContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    height: config.thumb,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  const trackStyle: CSSProperties = {\n    position: 'absolute',\n    width: '100%',\n    height: config.track,\n    borderRadius: config.track / 2,\n    backgroundColor: 'var(--brycks-background-muted)',\n  }\n\n  const fillStyle: CSSProperties = {\n    position: 'absolute',\n    left: 0,\n    height: config.track,\n    width: `${percentage}%`,\n    borderRadius: config.track / 2,\n    backgroundColor: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-primary-default)',\n    transition: isDragging ? 'none' : 'width 100ms ease-out',\n  }\n\n  const thumbStyle: CSSProperties = {\n    position: 'absolute',\n    left: `calc(${percentage}% - ${config.thumb / 2}px)`,\n    width: config.thumb,\n    height: config.thumb,\n    borderRadius: '50%',\n    backgroundColor: 'white',\n    border: `2px solid ${\n      disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-primary-default)'\n    }`,\n    boxShadow: isDragging || isHovered\n      ? 'var(--brycks-shadow-md)'\n      : 'var(--brycks-shadow-sm)',\n    transform: isDragging ? 'scale(1.1)' : 'scale(1)',\n    transition: isDragging\n      ? 'transform 100ms ease-out, box-shadow 100ms ease-out'\n      : 'all 100ms ease-out',\n    pointerEvents: 'none',\n  }\n\n  const inputStyle: CSSProperties = {\n    position: 'absolute',\n    width: '100%',\n    height: config.thumb,\n    margin: 0,\n    padding: 0,\n    opacity: 0,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  return (\n    <div className={cx('brycks-slider', `brycks-slider--${size}`, className)} style={containerStyle}>\n      {(label || showValue) && (\n        <div style={labelRowStyle}>\n          {label && <span style={labelStyle}>{label}</span>}\n          {showValue && <span style={valueStyle}>{formatValue(value)}</span>}\n        </div>\n      )}\n      <div\n        style={sliderContainerStyle}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <div style={trackStyle} />\n        <div style={fillStyle} />\n        <div style={thumbStyle} />\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"range\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          style={inputStyle}\n          onMouseDown={() => setIsDragging(true)}\n          onMouseUp={() => setIsDragging(false)}\n          onTouchStart={() => setIsDragging(true)}\n          onTouchEnd={() => setIsDragging(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </div>\n    </div>\n  )\n})\n\nSlider.displayName = 'Slider'\n"],"names":["sizeConfig","Slider","forwardRef","size","min","max","step","controlledValue","defaultValue","onChange","showValue","formatValue","v","label","disabled","className","style","testId","props","ref","internalValue","setInternalValue","useState","isDragging","setIsDragging","isHovered","setIsHovered","inputRef","useRef","value","config","percentage","handleChange","useCallback","newValue","clampedValue","useEffect","input","handleInputChange","e","target","containerStyle","labelRowStyle","labelStyle","valueStyle","sliderContainerStyle","trackStyle","fillStyle","thumbStyle","inputStyle","jsxs","cx","jsx","node"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/components/form/Slider/Slider.tsx"],"sourcesContent":["/**\n * Slider Component\n *\n * Accessible range slider with custom styling.\n * Supports different sizes and shows value feedback.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentGap } from '../../../design-system/primitives'\n\nexport type SliderSize = 'sm' | 'md' | 'lg'\n\nexport interface SliderProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange'> {\n  /** Slider size */\n  size?: SliderSize\n  /** Minimum value */\n  min?: number\n  /** Maximum value */\n  max?: number\n  /** Step increment */\n  step?: number\n  /** Current value (controlled) */\n  value?: number\n  /** Default value (uncontrolled) */\n  defaultValue?: number\n  /** Callback when value changes */\n  onChange?: (value: number) => void\n  /** Whether to show the value label */\n  showValue?: boolean\n  /** Format the value for display */\n  formatValue?: (value: number) => string\n  /** Label for the slider */\n  label?: string\n  /** Whether the slider is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<SliderSize, { track: number; thumb: number; fontSize: number }> = {\n  sm: { track: spacing[1], thumb: spacing[3.5], fontSize: fontSizes.sm },\n  md: { track: componentGap.sm, thumb: spacing[4] + spacing[0.5], fontSize: fontSizes.base },\n  lg: { track: spacing[2], thumb: spacing[5] + spacing[0.5], fontSize: fontSizes.md },\n}\n\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    size = 'md',\n    min = 0,\n    max = 100,\n    step = 1,\n    value: controlledValue,\n    defaultValue = min,\n    onChange,\n    showValue = false,\n    formatValue = (v) => String(v),\n    label,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [isDragging, setIsDragging] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const value = controlledValue ?? internalValue\n  const config = sizeConfig[size]\n  const percentage = ((value - min) / (max - min)) * 100\n\n  const handleChange = useCallback(\n    (newValue: number) => {\n      const clampedValue = Math.max(min, Math.min(max, newValue))\n      if (controlledValue === undefined) {\n        setInternalValue(clampedValue)\n      }\n      onChange?.(clampedValue)\n    },\n    [controlledValue, min, max, onChange]\n  )\n\n  useEffect(() => {\n    const input = inputRef.current\n    if (!input) return\n\n    const handleInputChange = (e: Event) => {\n      const target = e.target as HTMLInputElement\n      handleChange(parseFloat(target.value))\n    }\n\n    input.addEventListener('input', handleInputChange)\n    return () => input.removeEventListener('input', handleInputChange)\n  }, [handleChange])\n\n  // Keyboard navigation for accessibility\n  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n    const stepValue = e.shiftKey ? step * 10 : step\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        e.preventDefault()\n        handleChange(value + stepValue)\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        e.preventDefault()\n        handleChange(value - stepValue)\n        break\n      case 'Home':\n        e.preventDefault()\n        handleChange(min)\n        break\n      case 'End':\n        e.preventDefault()\n        handleChange(max)\n        break\n      case 'PageUp':\n        e.preventDefault()\n        handleChange(value + stepValue * 10)\n        break\n      case 'PageDown':\n        e.preventDefault()\n        handleChange(value - stepValue * 10)\n        break\n    }\n  }, [value, step, min, max, handleChange])\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: spacing[2],\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  }\n\n  const labelRowStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: componentGap.xl,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const valueStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-muted)',\n    fontVariantNumeric: 'tabular-nums',\n  }\n\n  const sliderContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    height: config.thumb,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  const trackStyle: CSSProperties = {\n    position: 'absolute',\n    width: '100%',\n    height: config.track,\n    borderRadius: config.track / 2,\n    backgroundColor: 'var(--brycks-background-muted)',\n  }\n\n  const fillStyle: CSSProperties = {\n    position: 'absolute',\n    left: 0,\n    height: config.track,\n    width: `${percentage}%`,\n    borderRadius: config.track / 2,\n    backgroundColor: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-primary-default)',\n    transition: isDragging ? 'none' : `width ${durations.fast}ms ${easings.easeOut}`,\n  }\n\n  const thumbStyle: CSSProperties = {\n    position: 'absolute',\n    left: `calc(${percentage}% - ${config.thumb / 2}px)`,\n    width: config.thumb,\n    height: config.thumb,\n    borderRadius: '50%',\n    backgroundColor: 'white',\n    border: `2px solid ${\n      disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-primary-default)'\n    }`,\n    boxShadow: isDragging || isHovered\n      ? 'var(--brycks-shadow-md)'\n      : 'var(--brycks-shadow-sm)',\n    transform: isDragging ? 'scale(1.1)' : 'scale(1)',\n    transition: isDragging\n      ? `transform ${durations.fast}ms ${easings.easeOut}, box-shadow ${durations.fast}ms ${easings.easeOut}`\n      : `all ${durations.fast}ms ${easings.easeOut}`,\n    pointerEvents: 'none',\n  }\n\n  const inputStyle: CSSProperties = {\n    position: 'absolute',\n    width: '100%',\n    height: config.thumb,\n    margin: 0,\n    padding: 0,\n    opacity: 0,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  return (\n    <div className={cx('brycks-slider', `brycks-slider--${size}`, className)} style={containerStyle}>\n      {(label || showValue) && (\n        <div style={labelRowStyle}>\n          {label && <span style={labelStyle}>{label}</span>}\n          {showValue && <span style={valueStyle}>{formatValue(value)}</span>}\n        </div>\n      )}\n      <div\n        style={sliderContainerStyle}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <div style={trackStyle} />\n        <div style={fillStyle} />\n        <div style={thumbStyle} />\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"range\"\n          role=\"slider\"\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={value}\n          aria-valuetext={formatValue(value)}\n          aria-label={label}\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          style={inputStyle}\n          onKeyDown={handleKeyDown}\n          onMouseDown={() => setIsDragging(true)}\n          onMouseUp={() => setIsDragging(false)}\n          onTouchStart={() => setIsDragging(true)}\n          onTouchEnd={() => setIsDragging(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </div>\n    </div>\n  )\n})\n\nSlider.displayName = 'Slider'\n"],"names":["sizeConfig","spacing","fontSizes","componentGap","Slider","forwardRef","size","min","max","step","controlledValue","defaultValue","onChange","showValue","formatValue","v","label","disabled","className","style","testId","props","ref","internalValue","setInternalValue","useState","isDragging","setIsDragging","isHovered","setIsHovered","inputRef","useRef","value","config","percentage","handleChange","useCallback","newValue","clampedValue","useEffect","input","handleInputChange","e","target","handleKeyDown","stepValue","containerStyle","labelRowStyle","labelStyle","valueStyle","sliderContainerStyle","trackStyle","fillStyle","durations","easings","thumbStyle","inputStyle","jsxs","cx","jsx","node"],"mappings":"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"}