@brycks/core-front 0.2.7 → 0.2.9

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../../src/components/form/Radio/Radio.tsx"],"sourcesContent":["/**\n * Radio Component\n *\n * Accessible radio button with custom styling.\n * Supports different sizes and states.\n */\n\nimport {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type RadioSize = 'sm' | 'md' | 'lg'\n\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n  /** Radio size */\n  size?: RadioSize\n  /** Radio label */\n  label?: ReactNode\n  /** Description below the label */\n  description?: ReactNode\n  /** Whether the radio is invalid */\n  isInvalid?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<RadioSize, { radio: number; dot: number; fontSize: number; gap: number }> = {\n  sm: { radio: 16, dot: 6, fontSize: 13, gap: 8 },\n  md: { radio: 20, dot: 8, fontSize: 14, gap: 10 },\n  lg: { radio: 24, dot: 10, fontSize: 16, gap: 12 },\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    size = 'md',\n    label,\n    description,\n    isInvalid = false,\n    disabled = false,\n    className,\n    style,\n    testId,\n    checked,\n    ...props\n  },\n  ref\n) {\n  const [isHovered, setIsHovered] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const config = sizeConfig[size]\n\n  const containerStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'flex-start',\n    gap: config.gap,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  }\n\n  const radioContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: config.radio,\n    height: config.radio,\n    flexShrink: 0,\n  }\n\n  const radioStyle: CSSProperties = {\n    width: config.radio,\n    height: config.radio,\n    borderRadius: '50%',\n    border: `2px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : checked\n        ? 'var(--brycks-primary-default)'\n        : isHovered\n        ? 'var(--brycks-border-strong)'\n        : 'var(--brycks-border-default)'\n    }`,\n    backgroundColor: checked\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-background-input)',\n    transition: 'all 150ms ease-out',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    boxShadow: isFocused\n      ? '0 0 0 3px var(--brycks-primary-100)'\n      : undefined,\n  }\n\n  const dotStyle: CSSProperties = {\n    width: config.dot,\n    height: config.dot,\n    borderRadius: '50%',\n    backgroundColor: 'white',\n    transform: checked ? 'scale(1)' : 'scale(0)',\n    transition: 'transform 150ms ease-out',\n  }\n\n  const inputStyle: CSSProperties = {\n    position: 'absolute',\n    width: config.radio,\n    height: config.radio,\n    opacity: 0,\n    margin: 0,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: config.fontSize - 1,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  return (\n    <label\n      className={cx('brycks-radio', `brycks-radio--${size}`, className)}\n      style={containerStyle}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <span style={radioContainerStyle}>\n        <span style={radioStyle}>\n          <span style={dotStyle} />\n        </span>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          checked={checked}\n          style={inputStyle}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </span>\n      {(label || description) && (\n        <span style={labelContainerStyle}>\n          {label && <span style={labelStyle}>{label}</span>}\n          {description && <span style={descriptionStyle}>{description}</span>}\n        </span>\n      )}\n    </label>\n  )\n})\n\nRadio.displayName = 'Radio'\n\n// RadioGroup component for grouping radios\nexport interface RadioGroupProps {\n  /** Radio group name */\n  name: string\n  /** Current value */\n  value?: string\n  /** Default value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when value changes */\n  onChange?: (value: string) => void\n  /** Whether the group is disabled */\n  disabled?: boolean\n  /** Radio size */\n  size?: RadioSize\n  /** Orientation */\n  orientation?: 'horizontal' | 'vertical'\n  /** Gap between items */\n  gap?: number\n  /** Children (Radio components) */\n  children: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Custom styles */\n  style?: CSSProperties\n}\n\nexport function RadioGroup({\n  name,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  disabled = false,\n  size = 'md',\n  orientation = 'vertical',\n  gap = 12,\n  children,\n  className,\n  style,\n}: RadioGroupProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '')\n  const value = controlledValue ?? internalValue\n\n  const handleChange = (newValue: string) => {\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n    onChange?.(newValue)\n  }\n\n  const groupStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    flexWrap: orientation === 'horizontal' ? 'wrap' : undefined,\n    gap,\n    ...style,\n  }\n\n  // Clone children and inject props\n  const clonedChildren = Array.isArray(children)\n    ? children.map((child, index) => {\n        if (child && typeof child === 'object' && 'props' in child) {\n          const childValue = child.props.value\n          return {\n            ...child,\n            key: child.key ?? index,\n            props: {\n              ...child.props,\n              name,\n              size,\n              disabled: disabled || child.props.disabled,\n              checked: childValue === value,\n              onChange: () => handleChange(childValue),\n            },\n          }\n        }\n        return child\n      })\n    : children\n\n  return (\n    <div\n      role=\"radiogroup\"\n      className={cx('brycks-radio-group', className)}\n      style={groupStyle}\n    >\n      {clonedChildren}\n    </div>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n"],"names":["sizeConfig","Radio","forwardRef","size","label","description","isInvalid","disabled","className","style","testId","checked","props","ref","isHovered","setIsHovered","useState","isFocused","setIsFocused","config","containerStyle","radioContainerStyle","radioStyle","dotStyle","inputStyle","labelContainerStyle","labelStyle","descriptionStyle","jsxs","cx","jsx","RadioGroup","name","controlledValue","defaultValue","onChange","orientation","gap","children","internalValue","setInternalValue","value","handleChange","newValue","groupStyle","clonedChildren","child","index","childValue"],"mappings":"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"}

package/dist/components/form/Select/Select.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),L=require("../../../utils/styles.cjs"),R={sm:{height:32,fontSize:13,padding:10},md:{height:40,fontSize:14,padding:12},lg:{height:48,fontSize:15,padding:14}};function q(){return e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 4.5L6 8L9.5 4.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const p=u.forwardRef(function({size:c="md",variant:n="outline",isInvalid:s,placeholder:a,className:b,style:f,testId:y,disabled:o,children:g,onFocus:h,onBlur:k,value:i,...S},m){const[d,l]=u.useState(!1),t=R[c],x=i!==void 0&&i!=="",v={position:"relative",display:"inline-flex",width:"100%"},w=()=>{const r={width:"100%",height:t.height,paddingLeft:t.padding,paddingRight:t.padding+24,fontSize:t.fontSize,fontFamily:"var(--brycks-font-sans)",color:x||!a?"var(--brycks-foreground-default)":"var(--brycks-foreground-muted)",backgroundColor:n==="filled"?"var(--brycks-background-muted)":"var(--brycks-background-app)",border:`1px solid ${s?"var(--brycks-error-default)":d?"var(--brycks-border-focus)":n==="filled"?"transparent":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-default)",outline:"none",cursor:o?"not-allowed":"pointer",appearance:"none",WebkitAppearance:"none",transition:"all 200ms ease-out",boxShadow:d?s?"0 0 0 3px rgba(239, 68, 68, 0.15)":"0 0 0 3px rgba(85, 120, 244, 0.15)":"none"};return o&&(r.opacity=.5),r},j={position:"absolute",right:t.padding,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"var(--brycks-foreground-muted)",transition:"transform 200ms ease-out"},z=r=>{l(!0),h?.(r)},F=r=>{l(!1),k?.(r)};return e.jsxs("div",{className:L.cx("brycks-select-wrapper",`brycks-select-wrapper--${n}`,`brycks-select-wrapper--${c}`,s&&"brycks-select-wrapper--invalid",o&&"brycks-select-wrapper--disabled",b),style:{...v,...f},children:[e.jsxs("select",{ref:m,className:"brycks-select",style:w(),disabled:o,"aria-invalid":s,"data-testid":y,value:i,onFocus:z,onBlur:F,...S,children:[a&&e.jsx("option",{value:"",disabled:!0,children:a}),g]}),e.jsx("span",{style:j,children:e.jsx(q,{})})]})});p.displayName="Select";exports.Select=p;
+//# sourceMappingURL=Select.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/form/Select/Select.tsx"],"sourcesContent":["/**\r\n * Select Component\r\n *\r\n * Native select with custom styling for cross-browser consistency.\r\n * Maintains accessibility while providing Apple-inspired visuals.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  type CSSProperties,\r\n  type SelectHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SelectSize = 'sm' | 'md' | 'lg'\r\nexport type SelectVariant = 'outline' | 'filled'\r\n\r\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\r\n  /** Select size */\r\n  size?: SelectSize\r\n  /** Visual variant */\r\n  variant?: SelectVariant\r\n  /** Error state */\r\n  isInvalid?: boolean\r\n  /** Placeholder option */\r\n  placeholder?: string\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Children (option elements) */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeStyles: Record<SelectSize, { height: number; fontSize: number; padding: number }> = {\r\n  sm: { height: 32, fontSize: 13, padding: 10 },\r\n  md: { height: 40, fontSize: 14, padding: 12 },\r\n  lg: { height: 48, fontSize: 15, padding: 14 },\r\n}\r\n\r\n/** Chevron down icon */\r\nfunction ChevronIcon() {\r\n  return (\r\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n      <path\r\n        d=\"M2.5 4.5L6 8L9.5 4.5\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n}\r\n\r\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(\r\n  {\r\n    size = 'md',\r\n    variant = 'outline',\r\n    isInvalid,\r\n    placeholder,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    children,\r\n    onFocus,\r\n    onBlur,\r\n    value,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n\r\n  const sizeValue = sizeStyles[size]\r\n  const hasValue = value !== undefined && value !== ''\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    position: 'relative',\r\n    display: 'inline-flex',\r\n    width: '100%',\r\n  }\r\n\r\n  const getSelectStyle = (): CSSProperties => {\r\n    const base: CSSProperties = {\r\n      width: '100%',\r\n      height: sizeValue.height,\r\n      paddingLeft: sizeValue.padding,\r\n      paddingRight: sizeValue.padding + 24,\r\n      fontSize: sizeValue.fontSize,\r\n      fontFamily: 'var(--brycks-font-sans)',\r\n      color: hasValue || !placeholder ? 'var(--brycks-foreground-default)' : 'var(--brycks-foreground-muted)',\r\n      backgroundColor: variant === 'filled' ? 'var(--brycks-background-muted)' : 'var(--brycks-background-app)',\r\n      border: `1px solid ${\r\n        isInvalid\r\n          ? 'var(--brycks-error-default)'\r\n          : isFocused\r\n            ? 'var(--brycks-border-focus)'\r\n            : variant === 'filled'\r\n              ? 'transparent'\r\n              : 'var(--brycks-border-default)'\r\n      }`,\r\n      borderRadius: 'var(--brycks-radius-default)',\r\n      outline: 'none',\r\n      cursor: disabled ? 'not-allowed' : 'pointer',\r\n      appearance: 'none',\r\n      WebkitAppearance: 'none',\r\n      transition: 'all 200ms ease-out',\r\n      boxShadow: isFocused\r\n        ? isInvalid\r\n          ? '0 0 0 3px rgba(239, 68, 68, 0.15)'\r\n          : '0 0 0 3px rgba(85, 120, 244, 0.15)'\r\n        : 'none',\r\n    }\r\n\r\n    if (disabled) {\r\n      base.opacity = 0.5\r\n    }\r\n\r\n    return base\r\n  }\r\n\r\n  const iconStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    right: sizeValue.padding,\r\n    top: '50%',\r\n    transform: 'translateY(-50%)',\r\n    pointerEvents: 'none',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'transform 200ms ease-out',\r\n  }\r\n\r\n  const handleFocus = (e: React.FocusEvent<HTMLSelectElement>) => {\r\n    setIsFocused(true)\r\n    onFocus?.(e)\r\n  }\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLSelectElement>) => {\r\n    setIsFocused(false)\r\n    onBlur?.(e)\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-select-wrapper',\r\n        `brycks-select-wrapper--${variant}`,\r\n        `brycks-select-wrapper--${size}`,\r\n        isInvalid && 'brycks-select-wrapper--invalid',\r\n        disabled && 'brycks-select-wrapper--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n    >\r\n      <select\r\n        ref={ref}\r\n        className=\"brycks-select\"\r\n        style={getSelectStyle()}\r\n        disabled={disabled}\r\n        aria-invalid={isInvalid}\r\n        data-testid={testId}\r\n        value={value}\r\n        onFocus={handleFocus}\r\n        onBlur={handleBlur}\r\n        {...props}\r\n      >\r\n        {placeholder && (\r\n          <option value=\"\" disabled>\r\n            {placeholder}\r\n          </option>\r\n        )}\r\n        {children}\r\n      </select>\r\n\r\n      <span style={iconStyle}>\r\n        <ChevronIcon />\r\n      </span>\r\n    </div>\r\n  )\r\n})\r\n\r\nSelect.displayName = 'Select'\r\n"],"names":["sizeStyles","ChevronIcon","jsx","Select","forwardRef","size","variant","isInvalid","placeholder","className","style","testId","disabled","children","onFocus","onBlur","value","props","ref","isFocused","setIsFocused","useState","sizeValue","hasValue","wrapperStyle","getSelectStyle","base","iconStyle","handleFocus","e","handleBlur","jsxs","cx"],"mappings":"+KAoCMA,EAAwF,CAC5F,GAAI,CAAE,OAAQ,GAAI,SAAU,GAAI,QAAS,EAAA,EACzC,GAAI,CAAE,OAAQ,GAAI,SAAU,GAAI,QAAS,EAAA,EACzC,GAAI,CAAE,OAAQ,GAAI,SAAU,GAAI,QAAS,EAAA,CAC3C,EAGA,SAASC,GAAc,CACrB,OACEC,EAAAA,IAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACnD,SAAAA,EAAAA,IAAC,OAAA,CACC,EAAE,uBACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,OAAA,CAAA,EAEnB,CAEJ,CAEO,MAAMC,EAASC,EAAAA,WAA2C,SAC/D,CACE,KAAAC,EAAO,KACP,QAAAC,EAAU,UACV,UAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAE1CC,EAAYtB,EAAWK,CAAI,EAC3BkB,EAAWP,IAAU,QAAaA,IAAU,GAE5CQ,EAA8B,CAClC,SAAU,WACV,QAAS,cACT,MAAO,MAAA,EAGHC,EAAiB,IAAqB,CAC1C,MAAMC,EAAsB,CAC1B,MAAO,OACP,OAAQJ,EAAU,OAClB,YAAaA,EAAU,QACvB,aAAcA,EAAU,QAAU,GAClC,SAAUA,EAAU,SACpB,WAAY,0BACZ,MAAOC,GAAY,CAACf,EAAc,mCAAqC,iCACvE,gBAAiBF,IAAY,SAAW,iCAAmC,+BAC3E,OAAQ,aACNC,EACI,8BACAY,EACE,6BACAb,IAAY,SACV,cACA,8BACV,GACA,aAAc,+BACd,QAAS,OACT,OAAQM,EAAW,cAAgB,UACnC,WAAY,OACZ,iBAAkB,OAClB,WAAY,qBACZ,UAAWO,EACPZ,EACE,oCACA,qCACF,MAAA,EAGN,OAAIK,IACFc,EAAK,QAAU,IAGVA,CACT,EAEMC,EAA2B,CAC/B,SAAU,WACV,MAAOL,EAAU,QACjB,IAAK,MACL,UAAW,mBACX,cAAe,OACf,MAAO,iCACP,WAAY,0BAAA,EAGRM,EAAeC,GAA2C,CAC9DT,EAAa,EAAI,EACjBN,IAAUe,CAAC,CACb,EAEMC,EAAcD,GAA2C,CAC7DT,EAAa,EAAK,EAClBL,IAASc,CAAC,CACZ,EAEA,OACEE,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,GACT,wBACA,0BAA0B1B,CAAO,GACjC,0BAA0BD,CAAI,GAC9BE,GAAa,iCACbK,GAAY,kCACZH,CAAA,EAEF,MAAO,CAAE,GAAGe,EAAc,GAAGd,CAAA,EAE7B,SAAA,CAAAqB,EAAAA,KAAC,SAAA,CACC,IAAAb,EACA,UAAU,gBACV,MAAOO,EAAA,EACP,SAAAb,EACA,eAAcL,EACd,cAAaI,EACb,MAAAK,EACA,QAASY,EACT,OAAQE,EACP,GAAGb,EAEH,SAAA,CAAAT,SACE,SAAA,CAAO,MAAM,GAAG,SAAQ,GACtB,SAAAA,EACH,EAEDK,CAAA,CAAA,CAAA,QAGF,OAAA,CAAK,MAAOc,EACX,SAAAzB,EAAAA,IAACD,IAAY,CAAA,CACf,CAAA,CAAA,CAAA,CAGN,CAAC,EAEDE,EAAO,YAAc"}

package/dist/components/form/Select/Select.js

@@ -0,0 +1,114 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { forwardRef as L, useState as j } from "react";
+import { cx as B } from "../../../utils/styles.js";
+const C = {
+  sm: { height: 32, fontSize: 13, padding: 10 },
+  md: { height: 40, fontSize: 14, padding: 12 },
+  lg: { height: 48, fontSize: 15, padding: 14 }
+};
+function N() {
+  return /* @__PURE__ */ t("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ t(
+    "path",
+    {
+      d: "M2.5 4.5L6 8L9.5 4.5",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+const R = L(function({
+  size: c = "md",
+  variant: s = "outline",
+  isInvalid: o,
+  placeholder: a,
+  className: u,
+  style: f,
+  testId: b,
+  disabled: n,
+  children: g,
+  onFocus: h,
+  onBlur: y,
+  value: i,
+  ...k
+}, m) {
+  const [d, l] = j(!1), r = C[c], S = i !== void 0 && i !== "", v = {
+    position: "relative",
+    display: "inline-flex",
+    width: "100%"
+  }, w = () => {
+    const e = {
+      width: "100%",
+      height: r.height,
+      paddingLeft: r.padding,
+      paddingRight: r.padding + 24,
+      fontSize: r.fontSize,
+      fontFamily: "var(--brycks-font-sans)",
+      color: S || !a ? "var(--brycks-foreground-default)" : "var(--brycks-foreground-muted)",
+      backgroundColor: s === "filled" ? "var(--brycks-background-muted)" : "var(--brycks-background-app)",
+      border: `1px solid ${o ? "var(--brycks-error-default)" : d ? "var(--brycks-border-focus)" : s === "filled" ? "transparent" : "var(--brycks-border-default)"}`,
+      borderRadius: "var(--brycks-radius-default)",
+      outline: "none",
+      cursor: n ? "not-allowed" : "pointer",
+      appearance: "none",
+      WebkitAppearance: "none",
+      transition: "all 200ms ease-out",
+      boxShadow: d ? o ? "0 0 0 3px rgba(239, 68, 68, 0.15)" : "0 0 0 3px rgba(85, 120, 244, 0.15)" : "none"
+    };
+    return n && (e.opacity = 0.5), e;
+  }, x = {
+    position: "absolute",
+    right: r.padding,
+    top: "50%",
+    transform: "translateY(-50%)",
+    pointerEvents: "none",
+    color: "var(--brycks-foreground-muted)",
+    transition: "transform 200ms ease-out"
+  }, z = (e) => {
+    l(!0), h?.(e);
+  }, F = (e) => {
+    l(!1), y?.(e);
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: B(
+        "brycks-select-wrapper",
+        `brycks-select-wrapper--${s}`,
+        `brycks-select-wrapper--${c}`,
+        o && "brycks-select-wrapper--invalid",
+        n && "brycks-select-wrapper--disabled",
+        u
+      ),
+      style: { ...v, ...f },
+      children: [
+        /* @__PURE__ */ p(
+          "select",
+          {
+            ref: m,
+            className: "brycks-select",
+            style: w(),
+            disabled: n,
+            "aria-invalid": o,
+            "data-testid": b,
+            value: i,
+            onFocus: z,
+            onBlur: F,
+            ...k,
+            children: [
+              a && /* @__PURE__ */ t("option", { value: "", disabled: !0, children: a }),
+              g
+            ]
+          }
+        ),
+        /* @__PURE__ */ t("span", { style: x, children: /* @__PURE__ */ t(N, {}) })
+      ]
+    }
+  );
+});
+R.displayName = "Select";
+export {
+  R as Select
+};
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../src/components/form/Select/Select.tsx"],"sourcesContent":["/**\r\n * Select Component\r\n *\r\n * Native select with custom styling for cross-browser consistency.\r\n * Maintains accessibility while providing Apple-inspired visuals.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  type CSSProperties,\r\n  type SelectHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SelectSize = 'sm' | 'md' | 'lg'\r\nexport type SelectVariant = 'outline' | 'filled'\r\n\r\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\r\n  /** Select size */\r\n  size?: SelectSize\r\n  /** Visual variant */\r\n  variant?: SelectVariant\r\n  /** Error state */\r\n  isInvalid?: boolean\r\n  /** Placeholder option */\r\n  placeholder?: string\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Children (option elements) */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeStyles: Record<SelectSize, { height: number; fontSize: number; padding: number }> = {\r\n  sm: { height: 32, fontSize: 13, padding: 10 },\r\n  md: { height: 40, fontSize: 14, padding: 12 },\r\n  lg: { height: 48, fontSize: 15, padding: 14 },\r\n}\r\n\r\n/** Chevron down icon */\r\nfunction ChevronIcon() {\r\n  return (\r\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n      <path\r\n        d=\"M2.5 4.5L6 8L9.5 4.5\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n}\r\n\r\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(\r\n  {\r\n    size = 'md',\r\n    variant = 'outline',\r\n    isInvalid,\r\n    placeholder,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    children,\r\n    onFocus,\r\n    onBlur,\r\n    value,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n\r\n  const sizeValue = sizeStyles[size]\r\n  const hasValue = value !== undefined && value !== ''\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    position: 'relative',\r\n    display: 'inline-flex',\r\n    width: '100%',\r\n  }\r\n\r\n  const getSelectStyle = (): CSSProperties => {\r\n    const base: CSSProperties = {\r\n      width: '100%',\r\n      height: sizeValue.height,\r\n      paddingLeft: sizeValue.padding,\r\n      paddingRight: sizeValue.padding + 24,\r\n      fontSize: sizeValue.fontSize,\r\n      fontFamily: 'var(--brycks-font-sans)',\r\n      color: hasValue || !placeholder ? 'var(--brycks-foreground-default)' : 'var(--brycks-foreground-muted)',\r\n      backgroundColor: variant === 'filled' ? 'var(--brycks-background-muted)' : 'var(--brycks-background-app)',\r\n      border: `1px solid ${\r\n        isInvalid\r\n          ? 'var(--brycks-error-default)'\r\n          : isFocused\r\n            ? 'var(--brycks-border-focus)'\r\n            : variant === 'filled'\r\n              ? 'transparent'\r\n              : 'var(--brycks-border-default)'\r\n      }`,\r\n      borderRadius: 'var(--brycks-radius-default)',\r\n      outline: 'none',\r\n      cursor: disabled ? 'not-allowed' : 'pointer',\r\n      appearance: 'none',\r\n      WebkitAppearance: 'none',\r\n      transition: 'all 200ms ease-out',\r\n      boxShadow: isFocused\r\n        ? isInvalid\r\n          ? '0 0 0 3px rgba(239, 68, 68, 0.15)'\r\n          : '0 0 0 3px rgba(85, 120, 244, 0.15)'\r\n        : 'none',\r\n    }\r\n\r\n    if (disabled) {\r\n      base.opacity = 0.5\r\n    }\r\n\r\n    return base\r\n  }\r\n\r\n  const iconStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    right: sizeValue.padding,\r\n    top: '50%',\r\n    transform: 'translateY(-50%)',\r\n    pointerEvents: 'none',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'transform 200ms ease-out',\r\n  }\r\n\r\n  const handleFocus = (e: React.FocusEvent<HTMLSelectElement>) => {\r\n    setIsFocused(true)\r\n    onFocus?.(e)\r\n  }\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLSelectElement>) => {\r\n    setIsFocused(false)\r\n    onBlur?.(e)\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-select-wrapper',\r\n        `brycks-select-wrapper--${variant}`,\r\n        `brycks-select-wrapper--${size}`,\r\n        isInvalid && 'brycks-select-wrapper--invalid',\r\n        disabled && 'brycks-select-wrapper--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n    >\r\n      <select\r\n        ref={ref}\r\n        className=\"brycks-select\"\r\n        style={getSelectStyle()}\r\n        disabled={disabled}\r\n        aria-invalid={isInvalid}\r\n        data-testid={testId}\r\n        value={value}\r\n        onFocus={handleFocus}\r\n        onBlur={handleBlur}\r\n        {...props}\r\n      >\r\n        {placeholder && (\r\n          <option value=\"\" disabled>\r\n            {placeholder}\r\n          </option>\r\n        )}\r\n        {children}\r\n      </select>\r\n\r\n      <span style={iconStyle}>\r\n        <ChevronIcon />\r\n      </span>\r\n    </div>\r\n  )\r\n})\r\n\r\nSelect.displayName = 'Select'\r\n"],"names":["sizeStyles","ChevronIcon","jsx","Select","forwardRef","size","variant","isInvalid","placeholder","className","style","testId","disabled","children","onFocus","onBlur","value","props","ref","isFocused","setIsFocused","useState","sizeValue","hasValue","wrapperStyle","getSelectStyle","base","iconStyle","handleFocus","handleBlur","jsxs","cx"],"mappings":"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"}

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

@@ -0,0 +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;
+//# sourceMappingURL=Slider.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,147 @@
+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(
+    (e) => {
+      const s = Math.max(o, Math.min(a, e));
+      u === void 0 && $(s), m?.(s);
+    },
+    [u, o, a, m]
+  );
+  K(() => {
+    const e = k.current;
+    if (!e) return;
+    const s = (q) => {
+      const A = q.target;
+      w(parseFloat(A.value));
+    };
+    return e.addEventListener("input", s), () => e.removeEventListener("input", s);
+  }, [w]);
+  const j = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    opacity: r ? 0.5 : 1,
+    ...E
+  }, L = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12
+  }, N = {
+    fontSize: t.fontSize,
+    fontWeight: 500,
+    color: "var(--brycks-foreground-default)"
+  }, H = {
+    fontSize: t.fontSize,
+    fontWeight: 500,
+    color: "var(--brycks-foreground-muted)",
+    fontVariantNumeric: "tabular-nums"
+  }, T = {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    height: t.thumb,
+    cursor: r ? "not-allowed" : "pointer"
+  }, W = {
+    position: "absolute",
+    width: "100%",
+    height: t.track,
+    borderRadius: t.track / 2,
+    backgroundColor: "var(--brycks-background-muted)"
+  }, F = {
+    position: "absolute",
+    left: 0,
+    height: t.track,
+    width: `${S}%`,
+    borderRadius: t.track / 2,
+    backgroundColor: r ? "var(--brycks-foreground-muted)" : "var(--brycks-primary-default)",
+    transition: l ? "none" : "width 100ms ease-out"
+  }, U = {
+    position: "absolute",
+    left: `calc(${S}% - ${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",
+    pointerEvents: "none"
+  }, V = {
+    position: "absolute",
+    width: "100%",
+    height: t.thumb,
+    margin: 0,
+    padding: 0,
+    opacity: 0,
+    cursor: r ? "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) })
+    ] }),
+    /* @__PURE__ */ p(
+      "div",
+      {
+        style: T,
+        onMouseEnter: () => v(!0),
+        onMouseLeave: () => v(!1),
+        children: [
+          /* @__PURE__ */ n("div", { style: W }),
+          /* @__PURE__ */ n("div", { style: F }),
+          /* @__PURE__ */ n("div", { style: U }),
+          /* @__PURE__ */ n(
+            "input",
+            {
+              ref: (e) => {
+                k.current = e, typeof i == "function" ? i(e) : i && (i.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
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+Q.displayName = "Slider";
+export {
+  Q as Slider
+};
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +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;
+//# sourceMappingURL=Switch.cjs.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,118 @@
+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(
+    "label",
+    {
+      className: L(
+        "brycks-switch",
+        `brycks-switch--${n}`,
+        o && "brycks-switch--checked",
+        e && "brycks-switch--disabled",
+        g
+      ),
+      style: { ...$, ...w },
+      "data-testid": S,
+      onMouseDown: () => l(!0),
+      onMouseUp: () => l(!1),
+      onMouseLeave: () => l(!1),
+      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 })
+        ] })
+      ]
+    }
+  );
+});
+O.displayName = "Switch";
+export {
+  O as Switch
+};
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +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":"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"}

package/dist/components/form/TextField/TextField.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),I=require("../../../utils/styles.cjs"),S=require("../Input/Input.cjs"),u=a.forwardRef(function({label:d,helperText:o,errorMessage:i,isRequired:l,hideLabel:y,isInvalid:f,id:b,className:h,testId:p,...x},g){const m=a.useId(),t=b??m,n=`${t}-helper`,s=`${t}-error`,r=!!i||f,j=[r&&s,o&&n].filter(Boolean).join(" "),v={display:"block",marginBottom:6,fontSize:13,fontWeight:500,color:"var(--brycks-foreground-default)",...y&&{position:"absolute",width:1,height:1,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:0}},c={display:"block",marginTop:6,fontSize:12,lineHeight:1.5,color:"var(--brycks-foreground-muted)"},k={...c,color:"var(--brycks-error-default)"};return e.jsxs("div",{className:I.cx("brycks-text-field",r&&"brycks-text-field--error",h),"data-testid":p,children:[d&&e.jsxs("label",{htmlFor:t,style:v,children:[d,l&&e.jsx("span",{"aria-hidden":"true",style:{color:"var(--brycks-error-default)",marginLeft:2},children:"*"})]}),e.jsx(S.Input,{ref:g,id:t,isInvalid:r,"aria-describedby":j||void 0,"aria-required":l,...x}),r&&i&&e.jsx("span",{id:s,role:"alert",style:k,children:i}),!r&&o&&e.jsx("span",{id:n,style:c,children:o})]})});u.displayName="TextField";exports.TextField=u;
+//# sourceMappingURL=TextField.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/form/TextField/TextField.tsx"],"sourcesContent":["/**\r\n * TextField Component\r\n *\r\n * Complete text input field with label, helper text, and error handling.\r\n * Combines Input with proper accessibility and form structure.\r\n */\r\n\r\nimport { forwardRef, useId, type ReactNode } from 'react'\r\nimport { Input, type InputProps } from '../Input'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport interface TextFieldProps extends InputProps {\r\n  /** Field label */\r\n  label?: ReactNode\r\n  /** Helper text below the input */\r\n  helperText?: ReactNode\r\n  /** Error message (also sets isInvalid) */\r\n  errorMessage?: ReactNode\r\n  /** Whether the field is required */\r\n  isRequired?: boolean\r\n  /** Whether to hide the label visually (still accessible) */\r\n  hideLabel?: boolean\r\n}\r\n\r\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\r\n  {\r\n    label,\r\n    helperText,\r\n    errorMessage,\r\n    isRequired,\r\n    hideLabel,\r\n    isInvalid,\r\n    id,\r\n    className,\r\n    testId,\r\n    ...inputProps\r\n  },\r\n  ref\r\n) {\r\n  const generatedId = useId()\r\n  const fieldId = id ?? generatedId\r\n  const helperId = `${fieldId}-helper`\r\n  const errorId = `${fieldId}-error`\r\n\r\n  const hasError = Boolean(errorMessage) || isInvalid\r\n  const describedBy = [hasError && errorId, helperText && helperId].filter(Boolean).join(' ')\r\n\r\n  const labelStyle: React.CSSProperties = {\r\n    display: 'block',\r\n    marginBottom: 6,\r\n    fontSize: 13,\r\n    fontWeight: 500,\r\n    color: 'var(--brycks-foreground-default)',\r\n    ...(hideLabel && {\r\n      position: 'absolute',\r\n      width: 1,\r\n      height: 1,\r\n      padding: 0,\r\n      margin: -1,\r\n      overflow: 'hidden',\r\n      clip: 'rect(0, 0, 0, 0)',\r\n      whiteSpace: 'nowrap',\r\n      border: 0,\r\n    }),\r\n  }\r\n\r\n  const helperStyle: React.CSSProperties = {\r\n    display: 'block',\r\n    marginTop: 6,\r\n    fontSize: 12,\r\n    lineHeight: 1.5,\r\n    color: 'var(--brycks-foreground-muted)',\r\n  }\r\n\r\n  const errorStyle: React.CSSProperties = {\r\n    ...helperStyle,\r\n    color: 'var(--brycks-error-default)',\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-text-field',\r\n        hasError && 'brycks-text-field--error',\r\n        className\r\n      )}\r\n      data-testid={testId}\r\n    >\r\n      {label && (\r\n        <label htmlFor={fieldId} style={labelStyle}>\r\n          {label}\r\n          {isRequired && (\r\n            <span\r\n              aria-hidden=\"true\"\r\n              style={{\r\n                color: 'var(--brycks-error-default)',\r\n                marginLeft: 2,\r\n              }}\r\n            >\r\n              *\r\n            </span>\r\n          )}\r\n        </label>\r\n      )}\r\n\r\n      <Input\r\n        ref={ref}\r\n        id={fieldId}\r\n        isInvalid={hasError}\r\n        aria-describedby={describedBy || undefined}\r\n        aria-required={isRequired}\r\n        {...inputProps}\r\n      />\r\n\r\n      {hasError && errorMessage && (\r\n        <span id={errorId} role=\"alert\" style={errorStyle}>\r\n          {errorMessage}\r\n        </span>\r\n      )}\r\n\r\n      {!hasError && helperText && (\r\n        <span id={helperId} style={helperStyle}>\r\n          {helperText}\r\n        </span>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nTextField.displayName = 'TextField'\r\n"],"names":["TextField","forwardRef","label","helperText","errorMessage","isRequired","hideLabel","isInvalid","id","className","testId","inputProps","ref","generatedId","useId","fieldId","helperId","errorId","hasError","describedBy","labelStyle","helperStyle","errorStyle","jsxs","cx","jsx","Input"],"mappings":"+MAwBaA,EAAYC,EAAAA,WAA6C,SACpE,CACE,MAAAC,EACA,WAAAC,EACA,aAAAC,EACA,WAAAC,EACA,UAAAC,EACA,UAAAC,EACA,GAAAC,EACA,UAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAUP,GAAMK,EAChBG,EAAW,GAAGD,CAAO,UACrBE,EAAU,GAAGF,CAAO,SAEpBG,EAAW,EAAQd,GAAiBG,EACpCY,EAAc,CAACD,GAAYD,EAASd,GAAca,CAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAEpFI,EAAkC,CACtC,QAAS,QACT,aAAc,EACd,SAAU,GACV,WAAY,IACZ,MAAO,mCACP,GAAId,GAAa,CACf,SAAU,WACV,MAAO,EACP,OAAQ,EACR,QAAS,EACT,OAAQ,GACR,SAAU,SACV,KAAM,mBACN,WAAY,SACZ,OAAQ,CAAA,CACV,EAGIe,EAAmC,CACvC,QAAS,QACT,UAAW,EACX,SAAU,GACV,WAAY,IACZ,MAAO,gCAAA,EAGHC,EAAkC,CACtC,GAAGD,EACH,MAAO,6BAAA,EAGT,OACEE,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,GACT,oBACAN,GAAY,2BACZT,CAAA,EAEF,cAAaC,EAEZ,SAAA,CAAAR,GACCqB,EAAAA,KAAC,QAAA,CAAM,QAASR,EAAS,MAAOK,EAC7B,SAAA,CAAAlB,EACAG,GACCoB,EAAAA,IAAC,OAAA,CACC,cAAY,OACZ,MAAO,CACL,MAAO,8BACP,WAAY,CAAA,EAEf,SAAA,GAAA,CAAA,CAED,EAEJ,EAGFA,EAAAA,IAACC,EAAAA,MAAA,CACC,IAAAd,EACA,GAAIG,EACJ,UAAWG,EACX,mBAAkBC,GAAe,OACjC,gBAAed,EACd,GAAGM,CAAA,CAAA,EAGLO,GAAYd,GACXqB,EAAAA,IAAC,OAAA,CAAK,GAAIR,EAAS,KAAK,QAAQ,MAAOK,EACpC,SAAAlB,CAAA,CACH,EAGD,CAACc,GAAYf,GACZsB,EAAAA,IAAC,QAAK,GAAIT,EAAU,MAAOK,EACxB,SAAAlB,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDH,EAAU,YAAc"}