@brycks/core-front 0.2.7 → 0.2.9

package/dist/components/form/Checkbox/Checkbox.js

@@ -0,0 +1,144 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { forwardRef as N, useState as f } from "react";
+import { cx as O } from "../../../utils/styles.js";
+import { componentGap as x, controlSizes as T } from "../../../design-system/primitives/sizing.js";
+import { stateOpacity as W, scale as s } from "../../../design-system/primitives/opacity.js";
+import { focusRing as g } from "../../../design-system/primitives/focus.js";
+import { transition as v } from "../../../design-system/primitives/transitions.js";
+import { componentLineHeight as S, componentFontSize as E } from "../../../design-system/primitives/typography.js";
+function G({ size: o }) {
+  return /* @__PURE__ */ e("svg", { width: o, height: o, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M2.5 6L5 8.5L9.5 4",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function U({ size: o }) {
+  return /* @__PURE__ */ e("svg", { width: o, height: o, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M2.5 6H9.5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+const A = N(function({
+  size: c = "md",
+  label: i,
+  description: a,
+  isInvalid: l,
+  isIndeterminate: y,
+  className: w,
+  style: C,
+  testId: L,
+  disabled: r,
+  checked: h,
+  onChange: M,
+  ...H
+}, $) {
+  const [k, b] = f(!1), [I, m] = f(!1), [j, d] = f(!1), t = T[c], u = E[c], n = h || y, F = {
+    display: "inline-flex",
+    alignItems: "flex-start",
+    gap: x.lg,
+    cursor: r ? "not-allowed" : "pointer",
+    opacity: r ? W.disabled : 1
+  }, B = {
+    position: "relative",
+    width: t.box,
+    height: t.box,
+    borderRadius: "var(--brycks-radius-sm)",
+    border: `1.5px solid ${l ? "var(--brycks-error-default)" : n ? "var(--brycks-primary-default)" : k ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
+    backgroundColor: n ? "var(--brycks-primary-default)" : I ? "var(--brycks-background-subtle)" : "var(--brycks-background-app)",
+    transition: v.quick,
+    transform: j ? `scale(${s.controlPressed})` : `scale(${s.normal})`,
+    boxShadow: k ? g.default : g.none,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }, P = {
+    color: "var(--brycks-primary-foreground)",
+    opacity: n ? 1 : 0,
+    transform: n ? `scale(${s.normal})` : `scale(${s.hidden})`,
+    transition: v.quick
+  }, R = {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    opacity: 0,
+    cursor: r ? "not-allowed" : "pointer",
+    margin: 0
+  }, q = {
+    display: "flex",
+    flexDirection: "column",
+    gap: x.xs,
+    paddingTop: (t.box - u) / 2
+  }, z = {
+    fontSize: u,
+    lineHeight: S.snug,
+    color: "var(--brycks-foreground-default)",
+    userSelect: "none"
+  }, D = {
+    fontSize: u - 1,
+    lineHeight: S.snug,
+    color: "var(--brycks-foreground-muted)",
+    userSelect: "none"
+  };
+  return /* @__PURE__ */ p(
+    "label",
+    {
+      className: O(
+        "brycks-checkbox",
+        `brycks-checkbox--${c}`,
+        n && "brycks-checkbox--checked",
+        l && "brycks-checkbox--invalid",
+        r && "brycks-checkbox--disabled",
+        w
+      ),
+      style: { ...F, ...C },
+      "data-testid": L,
+      onMouseEnter: () => m(!0),
+      onMouseLeave: () => {
+        m(!1), d(!1);
+      },
+      onMouseDown: () => d(!0),
+      onMouseUp: () => d(!1),
+      children: [
+        /* @__PURE__ */ p("span", { style: B, children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: $,
+              type: "checkbox",
+              style: R,
+              checked: h,
+              disabled: r,
+              "aria-invalid": l,
+              onChange: M,
+              onFocus: () => b(!0),
+              onBlur: () => b(!1),
+              ...H
+            }
+          ),
+          /* @__PURE__ */ e("span", { style: P, children: y ? /* @__PURE__ */ e(U, { size: t.icon }) : /* @__PURE__ */ e(G, { size: t.icon }) })
+        ] }),
+        (i || a) && /* @__PURE__ */ p("span", { style: q, children: [
+          i && /* @__PURE__ */ e("span", { style: z, children: i }),
+          a && /* @__PURE__ */ e("span", { style: D, children: a })
+        ] })
+      ]
+    }
+  );
+});
+A.displayName = "Checkbox";
+export {
+  A as Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/form/Checkbox/Checkbox.tsx"],"sourcesContent":["/**\r\n * Checkbox Component\r\n *\r\n * Apple-inspired checkbox with smooth animations and tactile feedback.\r\n *\r\n * @module components/form/Checkbox\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  controlSizes,\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 CheckboxSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\r\n  /** Checkbox size */\r\n  size?: CheckboxSize\r\n  /** Label text */\r\n  label?: ReactNode\r\n  /** Description below label */\r\n  description?: ReactNode\r\n  /** Error state */\r\n  isInvalid?: boolean\r\n  /** Indeterminate state */\r\n  isIndeterminate?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\n/** Checkmark icon */\r\nfunction CheckIcon({ size }: { size: number }) {\r\n  return (\r\n    <svg width={size} height={size} viewBox=\"0 0 12 12\" fill=\"none\">\r\n      <path\r\n        d=\"M2.5 6L5 8.5L9.5 4\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n}\r\n\r\n/** Indeterminate/minus icon */\r\nfunction MinusIcon({ size }: { size: number }) {\r\n  return (\r\n    <svg width={size} height={size} viewBox=\"0 0 12 12\" fill=\"none\">\r\n      <path\r\n        d=\"M2.5 6H9.5\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n}\r\n\r\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\r\n  {\r\n    size = 'md',\r\n    label,\r\n    description,\r\n    isInvalid,\r\n    isIndeterminate,\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 [isHovered, setIsHovered] = useState(false)\r\n  const [isPressed, setIsPressed] = useState(false)\r\n\r\n  const config = controlSizes[size]\r\n  const fontSize = componentFontSize[size]\r\n\r\n  const isCheckedOrIndeterminate = checked || isIndeterminate\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'flex-start',\r\n    gap: componentGap.lg,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    opacity: disabled ? stateOpacity.disabled : 1,\r\n  }\r\n\r\n  const boxStyle: CSSProperties = {\r\n    position: 'relative',\r\n    width: config.box,\r\n    height: config.box,\r\n    borderRadius: 'var(--brycks-radius-sm)',\r\n    border: `1.5px solid ${\r\n      isInvalid\r\n        ? 'var(--brycks-error-default)'\r\n        : isCheckedOrIndeterminate\r\n          ? 'var(--brycks-primary-default)'\r\n          : isFocused\r\n            ? 'var(--brycks-border-focus)'\r\n            : 'var(--brycks-border-default)'\r\n    }`,\r\n    backgroundColor: isCheckedOrIndeterminate\r\n      ? 'var(--brycks-primary-default)'\r\n      : isHovered\r\n        ? 'var(--brycks-background-subtle)'\r\n        : 'var(--brycks-background-app)',\r\n    transition: transition.quick,\r\n    transform: isPressed ? `scale(${scale.controlPressed})` : `scale(${scale.normal})`,\r\n    boxShadow: isFocused ? focusRing.default : focusRing.none,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const iconStyle: CSSProperties = {\r\n    color: 'var(--brycks-primary-foreground)',\r\n    opacity: isCheckedOrIndeterminate ? 1 : 0,\r\n    transform: isCheckedOrIndeterminate ? `scale(${scale.normal})` : `scale(${scale.hidden})`,\r\n    transition: transition.quick,\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.box - fontSize) / 2,\r\n  }\r\n\r\n  const labelTextStyle: 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-checkbox',\r\n        `brycks-checkbox--${size}`,\r\n        isCheckedOrIndeterminate && 'brycks-checkbox--checked',\r\n        isInvalid && 'brycks-checkbox--invalid',\r\n        disabled && 'brycks-checkbox--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n      data-testid={testId}\r\n      onMouseEnter={() => setIsHovered(true)}\r\n      onMouseLeave={() => {\r\n        setIsHovered(false)\r\n        setIsPressed(false)\r\n      }}\r\n      onMouseDown={() => setIsPressed(true)}\r\n      onMouseUp={() => setIsPressed(false)}\r\n    >\r\n      <span style={boxStyle}>\r\n        <input\r\n          ref={ref}\r\n          type=\"checkbox\"\r\n          style={inputStyle}\r\n          checked={checked}\r\n          disabled={disabled}\r\n          aria-invalid={isInvalid}\r\n          onChange={onChange}\r\n          onFocus={() => setIsFocused(true)}\r\n          onBlur={() => setIsFocused(false)}\r\n          {...props}\r\n        />\r\n        <span style={iconStyle}>\r\n          {isIndeterminate ? <MinusIcon size={config.icon} /> : <CheckIcon size={config.icon} />}\r\n        </span>\r\n      </span>\r\n\r\n      {(label || description) && (\r\n        <span style={labelContainerStyle}>\r\n          {label && <span style={labelTextStyle}>{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\nCheckbox.displayName = 'Checkbox'\r\n"],"names":["CheckIcon","size","jsx","MinusIcon","Checkbox","forwardRef","label","description","isInvalid","isIndeterminate","className","style","testId","disabled","checked","onChange","props","ref","isFocused","setIsFocused","useState","isHovered","setIsHovered","isPressed","setIsPressed","config","controlSizes","fontSize","componentFontSize","isCheckedOrIndeterminate","wrapperStyle","componentGap","stateOpacity","boxStyle","transition","scale","focusRing","iconStyle","inputStyle","labelContainerStyle","labelTextStyle","componentLineHeight","descriptionStyle","jsxs","cx"],"mappings":"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"}

package/dist/components/form/DateInput/DateInput.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),F=require("../../../utils/styles.cjs"),$={sm:{height:32,fontSize:13,padding:10,iconSize:14},md:{height:40,fontSize:14,padding:12,iconSize:16},lg:{height:48,fontSize:16,padding:14,iconSize:18}},g=d.forwardRef(function({size:c="md",variant:o="outline",type:b="date",label:l,helperText:u,error:s,isInvalid:S=!1,leftIcon:n,disabled:a=!1,className:h,style:k,testId:v,...m},x){const[i,y]=d.useState(!1),[z,f]=d.useState(!1),e=$[c],r=S||!!s,j={display:"flex",flexDirection:"column",gap:6,...k},R={fontSize:e.fontSize-1,fontWeight:500,color:"var(--brycks-foreground-default)"},I={position:"relative",display:"flex",alignItems:"center"},w=()=>{const p={width:"100%",height:e.height,fontSize:e.fontSize,fontFamily:"inherit",color:"var(--brycks-foreground-default)",backgroundColor:o==="filled"?"var(--brycks-background-muted)":"var(--brycks-background-input)",paddingLeft:n?e.padding+e.iconSize+8:e.padding,paddingRight:e.padding,transition:"all 150ms ease-out",outline:"none",opacity:a?.5:1,cursor:a?"not-allowed":"pointer"};return o==="flushed"?{...p,border:"none",borderBottom:`2px solid ${r?"var(--brycks-error-default)":i?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:0,paddingLeft:n?e.iconSize+8:0,paddingRight:0,backgroundColor:"transparent"}:{...p,border:`1px solid ${r?"var(--brycks-error-default)":i?"var(--brycks-primary-default)":z?"var(--brycks-border-strong)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-md)",boxShadow:i&&!r?"0 0 0 3px var(--brycks-primary-100)":i&&r?"0 0 0 3px var(--brycks-error-100)":void 0}},C={position:"absolute",left:o==="flushed"?0:e.padding,color:"var(--brycks-foreground-muted)",display:"flex",alignItems:"center",justifyContent:"center",width:e.iconSize,height:e.iconSize,pointerEvents:"none"},D={fontSize:e.fontSize-2,color:r?"var(--brycks-error-default)":"var(--brycks-foreground-muted)"};return t.jsxs("div",{className:F.cx("brycks-date-input",`brycks-date-input--${c}`,`brycks-date-input--${o}`,h),style:j,children:[l&&t.jsx("label",{style:R,children:l}),t.jsxs("div",{style:I,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),children:[n&&t.jsx("span",{style:C,children:n}),t.jsx("input",{ref:x,type:b,disabled:a,style:w(),onFocus:()=>y(!0),onBlur:()=>y(!1),"data-testid":v,...m})]}),(u||s)&&t.jsx("span",{style:D,children:s||u})]})});g.displayName="DateInput";exports.DateInput=g;
+//# sourceMappingURL=DateInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.cjs","sources":["../../../../src/components/form/DateInput/DateInput.tsx"],"sourcesContent":["/**\n * DateInput Component\n *\n * A styled date input that uses the native date picker.\n * Consistent with other form inputs in the design system.\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 DateInputSize = 'sm' | 'md' | 'lg'\nexport type DateInputVariant = 'outline' | 'filled' | 'flushed'\nexport type DateInputType = 'date' | 'datetime-local' | 'time' | 'month' | 'week'\n\nexport interface DateInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n  /** Input size */\n  size?: DateInputSize\n  /** Input variant */\n  variant?: DateInputVariant\n  /** Type of date input */\n  type?: DateInputType\n  /** Input label */\n  label?: ReactNode\n  /** Helper text below input */\n  helperText?: ReactNode\n  /** Error message */\n  error?: ReactNode\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Icon on the left side */\n  leftIcon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<DateInputSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: 32, fontSize: 13, padding: 10, iconSize: 14 },\n  md: { height: 40, fontSize: 14, padding: 12, iconSize: 16 },\n  lg: { height: 48, fontSize: 16, padding: 14, iconSize: 18 },\n}\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(function DateInput(\n  {\n    size = 'md',\n    variant = 'outline',\n    type = 'date',\n    label,\n    helperText,\n    error,\n    isInvalid = false,\n    leftIcon,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [isFocused, setIsFocused] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 6,\n    ...style,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize - 1,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const inputContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n  }\n\n  const getInputStyle = (): CSSProperties => {\n    const baseStyle: CSSProperties = {\n      width: '100%',\n      height: config.height,\n      fontSize: config.fontSize,\n      fontFamily: 'inherit',\n      color: 'var(--brycks-foreground-default)',\n      backgroundColor: variant === 'filled' ? 'var(--brycks-background-muted)' : 'var(--brycks-background-input)',\n      paddingLeft: leftIcon ? config.padding + config.iconSize + 8 : config.padding,\n      paddingRight: config.padding,\n      transition: 'all 150ms ease-out',\n      outline: 'none',\n      opacity: disabled ? 0.5 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n    }\n\n    if (variant === 'flushed') {\n      return {\n        ...baseStyle,\n        border: 'none',\n        borderBottom: `2px solid ${\n          hasError\n            ? 'var(--brycks-error-default)'\n            : isFocused\n            ? 'var(--brycks-primary-default)'\n            : 'var(--brycks-border-default)'\n        }`,\n        borderRadius: 0,\n        paddingLeft: leftIcon ? config.iconSize + 8 : 0,\n        paddingRight: 0,\n        backgroundColor: 'transparent',\n      }\n    }\n\n    return {\n      ...baseStyle,\n      border: `1px solid ${\n        hasError\n          ? 'var(--brycks-error-default)'\n          : isFocused\n          ? 'var(--brycks-primary-default)'\n          : isHovered\n          ? 'var(--brycks-border-strong)'\n          : 'var(--brycks-border-default)'\n      }`,\n      borderRadius: 'var(--brycks-radius-md)',\n      boxShadow: isFocused && !hasError\n        ? '0 0 0 3px var(--brycks-primary-100)'\n        : isFocused && hasError\n        ? '0 0 0 3px var(--brycks-error-100)'\n        : undefined,\n    }\n  }\n\n  const iconStyle: CSSProperties = {\n    position: 'absolute',\n    left: variant === 'flushed' ? 0 : config.padding,\n    color: 'var(--brycks-foreground-muted)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: config.iconSize,\n    height: config.iconSize,\n    pointerEvents: 'none',\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n  }\n\n  return (\n    <div\n      className={cx('brycks-date-input', `brycks-date-input--${size}`, `brycks-date-input--${variant}`, className)}\n      style={containerStyle}\n    >\n      {label && <label style={labelStyle}>{label}</label>}\n      <div\n        style={inputContainerStyle}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        {leftIcon && <span style={iconStyle}>{leftIcon}</span>}\n        <input\n          ref={ref}\n          type={type}\n          disabled={disabled}\n          style={getInputStyle()}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </div>\n      {(helperText || error) && (\n        <span style={helperStyle}>{error || helperText}</span>\n      )}\n    </div>\n  )\n})\n\nDateInput.displayName = 'DateInput'\n"],"names":["sizeConfig","DateInput","forwardRef","size","variant","type","label","helperText","error","isInvalid","leftIcon","disabled","className","style","testId","props","ref","isFocused","setIsFocused","useState","isHovered","setIsHovered","config","hasError","containerStyle","labelStyle","inputContainerStyle","getInputStyle","baseStyle","iconStyle","helperStyle","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/form/DateInput/DateInput.js

@@ -0,0 +1,119 @@
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import { forwardRef as $, useState as g } from "react";
+import { cx as j } from "../../../utils/styles.js";
+const E = {
+  sm: { height: 32, fontSize: 13, padding: 10, iconSize: 14 },
+  md: { height: 40, fontSize: 14, padding: 12, iconSize: 16 },
+  lg: { height: 48, fontSize: 16, padding: 14, iconSize: 18 }
+}, L = $(function({
+  size: d = "md",
+  variant: t = "outline",
+  type: b = "date",
+  label: c,
+  helperText: l,
+  error: s,
+  isInvalid: h = !1,
+  leftIcon: o,
+  disabled: a = !1,
+  className: S,
+  style: k,
+  testId: m,
+  ...v
+}, z) {
+  const [n, u] = g(!1), [x, f] = g(!1), e = E[d], r = h || !!s, w = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6,
+    ...k
+  }, C = {
+    fontSize: e.fontSize - 1,
+    fontWeight: 500,
+    color: "var(--brycks-foreground-default)"
+  }, I = {
+    position: "relative",
+    display: "flex",
+    alignItems: "center"
+  }, R = () => {
+    const p = {
+      width: "100%",
+      height: e.height,
+      fontSize: e.fontSize,
+      fontFamily: "inherit",
+      color: "var(--brycks-foreground-default)",
+      backgroundColor: t === "filled" ? "var(--brycks-background-muted)" : "var(--brycks-background-input)",
+      paddingLeft: o ? e.padding + e.iconSize + 8 : e.padding,
+      paddingRight: e.padding,
+      transition: "all 150ms ease-out",
+      outline: "none",
+      opacity: a ? 0.5 : 1,
+      cursor: a ? "not-allowed" : "pointer"
+    };
+    return t === "flushed" ? {
+      ...p,
+      border: "none",
+      borderBottom: `2px solid ${r ? "var(--brycks-error-default)" : n ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
+      borderRadius: 0,
+      paddingLeft: o ? e.iconSize + 8 : 0,
+      paddingRight: 0,
+      backgroundColor: "transparent"
+    } : {
+      ...p,
+      border: `1px solid ${r ? "var(--brycks-error-default)" : n ? "var(--brycks-primary-default)" : x ? "var(--brycks-border-strong)" : "var(--brycks-border-default)"}`,
+      borderRadius: "var(--brycks-radius-md)",
+      boxShadow: n && !r ? "0 0 0 3px var(--brycks-primary-100)" : n && r ? "0 0 0 3px var(--brycks-error-100)" : void 0
+    };
+  }, D = {
+    position: "absolute",
+    left: t === "flushed" ? 0 : e.padding,
+    color: "var(--brycks-foreground-muted)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: e.iconSize,
+    height: e.iconSize,
+    pointerEvents: "none"
+  }, F = {
+    fontSize: e.fontSize - 2,
+    color: r ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)"
+  };
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      className: j("brycks-date-input", `brycks-date-input--${d}`, `brycks-date-input--${t}`, S),
+      style: w,
+      children: [
+        c && /* @__PURE__ */ i("label", { style: C, children: c }),
+        /* @__PURE__ */ y(
+          "div",
+          {
+            style: I,
+            onMouseEnter: () => f(!0),
+            onMouseLeave: () => f(!1),
+            children: [
+              o && /* @__PURE__ */ i("span", { style: D, children: o }),
+              /* @__PURE__ */ i(
+                "input",
+                {
+                  ref: z,
+                  type: b,
+                  disabled: a,
+                  style: R(),
+                  onFocus: () => u(!0),
+                  onBlur: () => u(!1),
+                  "data-testid": m,
+                  ...v
+                }
+              )
+            ]
+          }
+        ),
+        (l || s) && /* @__PURE__ */ i("span", { style: F, children: s || l })
+      ]
+    }
+  );
+});
+L.displayName = "DateInput";
+export {
+  L as DateInput
+};
+//# sourceMappingURL=DateInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","sources":["../../../../src/components/form/DateInput/DateInput.tsx"],"sourcesContent":["/**\n * DateInput Component\n *\n * A styled date input that uses the native date picker.\n * Consistent with other form inputs in the design system.\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 DateInputSize = 'sm' | 'md' | 'lg'\nexport type DateInputVariant = 'outline' | 'filled' | 'flushed'\nexport type DateInputType = 'date' | 'datetime-local' | 'time' | 'month' | 'week'\n\nexport interface DateInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n  /** Input size */\n  size?: DateInputSize\n  /** Input variant */\n  variant?: DateInputVariant\n  /** Type of date input */\n  type?: DateInputType\n  /** Input label */\n  label?: ReactNode\n  /** Helper text below input */\n  helperText?: ReactNode\n  /** Error message */\n  error?: ReactNode\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Icon on the left side */\n  leftIcon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<DateInputSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: 32, fontSize: 13, padding: 10, iconSize: 14 },\n  md: { height: 40, fontSize: 14, padding: 12, iconSize: 16 },\n  lg: { height: 48, fontSize: 16, padding: 14, iconSize: 18 },\n}\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(function DateInput(\n  {\n    size = 'md',\n    variant = 'outline',\n    type = 'date',\n    label,\n    helperText,\n    error,\n    isInvalid = false,\n    leftIcon,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [isFocused, setIsFocused] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 6,\n    ...style,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize - 1,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const inputContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n  }\n\n  const getInputStyle = (): CSSProperties => {\n    const baseStyle: CSSProperties = {\n      width: '100%',\n      height: config.height,\n      fontSize: config.fontSize,\n      fontFamily: 'inherit',\n      color: 'var(--brycks-foreground-default)',\n      backgroundColor: variant === 'filled' ? 'var(--brycks-background-muted)' : 'var(--brycks-background-input)',\n      paddingLeft: leftIcon ? config.padding + config.iconSize + 8 : config.padding,\n      paddingRight: config.padding,\n      transition: 'all 150ms ease-out',\n      outline: 'none',\n      opacity: disabled ? 0.5 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n    }\n\n    if (variant === 'flushed') {\n      return {\n        ...baseStyle,\n        border: 'none',\n        borderBottom: `2px solid ${\n          hasError\n            ? 'var(--brycks-error-default)'\n            : isFocused\n            ? 'var(--brycks-primary-default)'\n            : 'var(--brycks-border-default)'\n        }`,\n        borderRadius: 0,\n        paddingLeft: leftIcon ? config.iconSize + 8 : 0,\n        paddingRight: 0,\n        backgroundColor: 'transparent',\n      }\n    }\n\n    return {\n      ...baseStyle,\n      border: `1px solid ${\n        hasError\n          ? 'var(--brycks-error-default)'\n          : isFocused\n          ? 'var(--brycks-primary-default)'\n          : isHovered\n          ? 'var(--brycks-border-strong)'\n          : 'var(--brycks-border-default)'\n      }`,\n      borderRadius: 'var(--brycks-radius-md)',\n      boxShadow: isFocused && !hasError\n        ? '0 0 0 3px var(--brycks-primary-100)'\n        : isFocused && hasError\n        ? '0 0 0 3px var(--brycks-error-100)'\n        : undefined,\n    }\n  }\n\n  const iconStyle: CSSProperties = {\n    position: 'absolute',\n    left: variant === 'flushed' ? 0 : config.padding,\n    color: 'var(--brycks-foreground-muted)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: config.iconSize,\n    height: config.iconSize,\n    pointerEvents: 'none',\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n  }\n\n  return (\n    <div\n      className={cx('brycks-date-input', `brycks-date-input--${size}`, `brycks-date-input--${variant}`, className)}\n      style={containerStyle}\n    >\n      {label && <label style={labelStyle}>{label}</label>}\n      <div\n        style={inputContainerStyle}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        {leftIcon && <span style={iconStyle}>{leftIcon}</span>}\n        <input\n          ref={ref}\n          type={type}\n          disabled={disabled}\n          style={getInputStyle()}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </div>\n      {(helperText || error) && (\n        <span style={helperStyle}>{error || helperText}</span>\n      )}\n    </div>\n  )\n})\n\nDateInput.displayName = 'DateInput'\n"],"names":["sizeConfig","DateInput","forwardRef","size","variant","type","label","helperText","error","isInvalid","leftIcon","disabled","className","style","testId","props","ref","isFocused","setIsFocused","useState","isHovered","setIsHovered","config","hasError","containerStyle","labelStyle","inputContainerStyle","getInputStyle","baseStyle","iconStyle","helperStyle","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/form/DropZone/DropZone.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),F=require("../../../utils/styles.cjs"),d=t.forwardRef(function({onFiles:k,accept:g,multiple:i=!0,maxSize:f,disabled:e=!1,children:p,icon:v,helperText:y,error:s,className:b,testId:D},m){const[c,l]=t.useState(!1),a=t.useRef(null),h=t.useCallback(r=>{r.preventDefault(),r.stopPropagation(),e||l(!0)},[e]),x=t.useCallback(r=>{r.preventDefault(),r.stopPropagation(),l(!1)},[]),C=t.useCallback(r=>{r.preventDefault(),r.stopPropagation(),e||l(!0)},[e]),u=t.useCallback(r=>{if(!r||r.length===0)return;let n=Array.from(r);f&&(n=n.filter(E=>E.size<=f)),!i&&n.length>1&&(n=[n[0]]),k?.(n)},[f,i,k]),j=t.useCallback(r=>{r.preventDefault(),r.stopPropagation(),l(!1),!e&&u(r.dataTransfer.files)},[e,u]),z=t.useCallback(()=>{e||a.current?.click()},[e]),S=t.useCallback(r=>{u(r.target.files),a.current&&(a.current.value="")},[u]),R=t.useCallback(r=>{(r.key==="Enter"||r.key===" ")&&!e&&(r.preventDefault(),a.current?.click())},[e]),O={padding:"40px 20px",border:`2px dashed ${s?"var(--brycks-error-default)":c?"var(--brycks-primary-default)":"var(--brycks-border-muted)"}`,borderRadius:"var(--brycks-radius-lg)",cursor:e?"not-allowed":"pointer",textAlign:"center",transition:"all var(--brycks-duration-fast) var(--brycks-easing-out)",background:c?"var(--brycks-primary-muted)":"var(--brycks-background-muted)",opacity:e?.5:1},P={display:"flex",justifyContent:"center",marginBottom:12,color:c?"var(--brycks-primary-default)":"var(--brycks-foreground-muted)"},w={fontFamily:"var(--brycks-font-sans)",fontSize:"var(--brycks-font-size-sm)",fontWeight:500,color:"var(--brycks-foreground-default)",marginBottom:y?4:0},Z={fontFamily:"var(--brycks-font-sans)",fontSize:"var(--brycks-font-size-xs)",color:"var(--brycks-foreground-muted)"},q={fontFamily:"var(--brycks-font-sans)",fontSize:"var(--brycks-font-size-xs)",color:"var(--brycks-error-default)",marginTop:8};return o.jsxs("div",{ref:m,className:F.cx("brycks-dropzone",c&&"brycks-dropzone--drag-over",e&&"brycks-dropzone--disabled",s&&"brycks-dropzone--error",b),style:O,onClick:z,onDragEnter:h,onDragLeave:x,onDragOver:C,onDrop:j,onKeyDown:R,role:"button",tabIndex:e?-1:0,"aria-disabled":e,"data-testid":D,children:[o.jsx("input",{ref:a,type:"file",accept:g,multiple:i,onChange:S,style:{display:"none"},"aria-hidden":"true"}),v&&o.jsx("div",{style:P,children:v}),p&&o.jsx("div",{style:w,children:p}),y&&o.jsx("div",{style:Z,children:y}),s&&o.jsx("div",{style:q,children:s})]})});d.displayName="DropZone";exports.DropZone=d;
+//# sourceMappingURL=DropZone.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropZone.cjs","sources":["../../../../src/components/form/DropZone/DropZone.tsx"],"sourcesContent":["/**\n * DropZone Component\n *\n * File upload area with drag-and-drop support.\n * Provides visual feedback during drag operations.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type ReactNode,\n  type DragEvent,\n  type ChangeEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport interface DropZoneProps {\n  /** Callback when files are selected or dropped */\n  onFiles?: (files: File[]) => void\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Whether multiple files can be selected */\n  multiple?: boolean\n  /** Maximum file size in bytes */\n  maxSize?: number\n  /** Whether the drop zone is disabled */\n  disabled?: boolean\n  /** Main text content */\n  children?: ReactNode\n  /** Icon to display */\n  icon?: ReactNode\n  /** Helper text shown below main content */\n  helperText?: string\n  /** Error message */\n  error?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const DropZone = forwardRef<HTMLDivElement, DropZoneProps>(\n  function DropZone(\n    {\n      onFiles,\n      accept,\n      multiple = true,\n      maxSize,\n      disabled = false,\n      children,\n      icon,\n      helperText,\n      error,\n      className,\n      testId,\n    },\n    ref\n  ) {\n    const [isDragOver, setIsDragOver] = useState(false)\n    const fileInputRef = useRef<HTMLInputElement>(null)\n\n    const handleDragEnter = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled) {\n          setIsDragOver(true)\n        }\n      },\n      [disabled]\n    )\n\n    const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setIsDragOver(false)\n    }, [])\n\n    const handleDragOver = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled) {\n          setIsDragOver(true)\n        }\n      },\n      [disabled]\n    )\n\n    const processFiles = useCallback(\n      (fileList: FileList | null) => {\n        if (!fileList || fileList.length === 0) return\n\n        let files = Array.from(fileList)\n\n        // Filter by size if maxSize is set\n        if (maxSize) {\n          files = files.filter((file) => file.size <= maxSize)\n        }\n\n        // Take only first file if multiple is false\n        if (!multiple && files.length > 1) {\n          files = [files[0]]\n        }\n\n        onFiles?.(files)\n      },\n      [maxSize, multiple, onFiles]\n    )\n\n    const handleDrop = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragOver(false)\n\n        if (disabled) return\n\n        processFiles(e.dataTransfer.files)\n      },\n      [disabled, processFiles]\n    )\n\n    const handleClick = useCallback(() => {\n      if (!disabled) {\n        fileInputRef.current?.click()\n      }\n    }, [disabled])\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        processFiles(e.target.files)\n        // Reset input value to allow selecting the same file again\n        if (fileInputRef.current) {\n          fileInputRef.current.value = ''\n        }\n      },\n      [processFiles]\n    )\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n          e.preventDefault()\n          fileInputRef.current?.click()\n        }\n      },\n      [disabled]\n    )\n\n    const containerStyle: CSSProperties = {\n      padding: '40px 20px',\n      border: `2px dashed ${\n        error\n          ? 'var(--brycks-error-default)'\n          : isDragOver\n            ? 'var(--brycks-primary-default)'\n            : 'var(--brycks-border-muted)'\n      }`,\n      borderRadius: 'var(--brycks-radius-lg)',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      textAlign: 'center',\n      transition: 'all var(--brycks-duration-fast) var(--brycks-easing-out)',\n      background: isDragOver\n        ? 'var(--brycks-primary-muted)'\n        : 'var(--brycks-background-muted)',\n      opacity: disabled ? 0.5 : 1,\n    }\n\n    const iconStyle: CSSProperties = {\n      display: 'flex',\n      justifyContent: 'center',\n      marginBottom: 12,\n      color: isDragOver\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-foreground-muted)',\n    }\n\n    const textStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-sm)',\n      fontWeight: 500,\n      color: 'var(--brycks-foreground-default)',\n      marginBottom: helperText ? 4 : 0,\n    }\n\n    const helperStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-xs)',\n      color: 'var(--brycks-foreground-muted)',\n    }\n\n    const errorStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-xs)',\n      color: 'var(--brycks-error-default)',\n      marginTop: 8,\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          'brycks-dropzone',\n          isDragOver && 'brycks-dropzone--drag-over',\n          disabled && 'brycks-dropzone--disabled',\n          error && 'brycks-dropzone--error',\n          className\n        )}\n        style={containerStyle}\n        onClick={handleClick}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-disabled={disabled}\n        data-testid={testId}\n      >\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          onChange={handleChange}\n          style={{ display: 'none' }}\n          aria-hidden=\"true\"\n        />\n\n        {icon && <div style={iconStyle}>{icon}</div>}\n\n        {children && <div style={textStyle}>{children}</div>}\n\n        {helperText && <div style={helperStyle}>{helperText}</div>}\n\n        {error && <div style={errorStyle}>{error}</div>}\n      </div>\n    )\n  }\n)\n\nDropZone.displayName = 'DropZone'\n"],"names":["DropZone","forwardRef","onFiles","accept","multiple","maxSize","disabled","children","icon","helperText","error","className","testId","ref","isDragOver","setIsDragOver","useState","fileInputRef","useRef","handleDragEnter","useCallback","e","handleDragLeave","handleDragOver","processFiles","fileList","files","file","handleDrop","handleClick","handleChange","handleKeyDown","containerStyle","iconStyle","textStyle","helperStyle","errorStyle","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/form/DropZone/DropZone.js

@@ -0,0 +1,132 @@
+import { jsxs as I, jsx as a } from "react/jsx-runtime";
+import { forwardRef as Z, useState as A, useRef as B, useCallback as e } from "react";
+import { cx as K } from "../../../utils/styles.js";
+const N = Z(
+  function({
+    onFiles: p,
+    accept: k,
+    multiple: l = !0,
+    maxSize: y,
+    disabled: t = !1,
+    children: v,
+    icon: d,
+    helperText: u,
+    error: s,
+    className: g,
+    testId: m
+  }, D) {
+    const [c, f] = A(!1), n = B(null), b = e(
+      (r) => {
+        r.preventDefault(), r.stopPropagation(), t || f(!0);
+      },
+      [t]
+    ), h = e((r) => {
+      r.preventDefault(), r.stopPropagation(), f(!1);
+    }, []), x = e(
+      (r) => {
+        r.preventDefault(), r.stopPropagation(), t || f(!0);
+      },
+      [t]
+    ), i = e(
+      (r) => {
+        if (!r || r.length === 0) return;
+        let o = Array.from(r);
+        y && (o = o.filter((F) => F.size <= y)), !l && o.length > 1 && (o = [o[0]]), p?.(o);
+      },
+      [y, l, p]
+    ), z = e(
+      (r) => {
+        r.preventDefault(), r.stopPropagation(), f(!1), !t && i(r.dataTransfer.files);
+      },
+      [t, i]
+    ), S = e(() => {
+      t || n.current?.click();
+    }, [t]), C = e(
+      (r) => {
+        i(r.target.files), n.current && (n.current.value = "");
+      },
+      [i]
+    ), w = e(
+      (r) => {
+        (r.key === "Enter" || r.key === " ") && !t && (r.preventDefault(), n.current?.click());
+      },
+      [t]
+    ), O = {
+      padding: "40px 20px",
+      border: `2px dashed ${s ? "var(--brycks-error-default)" : c ? "var(--brycks-primary-default)" : "var(--brycks-border-muted)"}`,
+      borderRadius: "var(--brycks-radius-lg)",
+      cursor: t ? "not-allowed" : "pointer",
+      textAlign: "center",
+      transition: "all var(--brycks-duration-fast) var(--brycks-easing-out)",
+      background: c ? "var(--brycks-primary-muted)" : "var(--brycks-background-muted)",
+      opacity: t ? 0.5 : 1
+    }, P = {
+      display: "flex",
+      justifyContent: "center",
+      marginBottom: 12,
+      color: c ? "var(--brycks-primary-default)" : "var(--brycks-foreground-muted)"
+    }, R = {
+      fontFamily: "var(--brycks-font-sans)",
+      fontSize: "var(--brycks-font-size-sm)",
+      fontWeight: 500,
+      color: "var(--brycks-foreground-default)",
+      marginBottom: u ? 4 : 0
+    }, j = {
+      fontFamily: "var(--brycks-font-sans)",
+      fontSize: "var(--brycks-font-size-xs)",
+      color: "var(--brycks-foreground-muted)"
+    }, E = {
+      fontFamily: "var(--brycks-font-sans)",
+      fontSize: "var(--brycks-font-size-xs)",
+      color: "var(--brycks-error-default)",
+      marginTop: 8
+    };
+    return /* @__PURE__ */ I(
+      "div",
+      {
+        ref: D,
+        className: K(
+          "brycks-dropzone",
+          c && "brycks-dropzone--drag-over",
+          t && "brycks-dropzone--disabled",
+          s && "brycks-dropzone--error",
+          g
+        ),
+        style: O,
+        onClick: S,
+        onDragEnter: b,
+        onDragLeave: h,
+        onDragOver: x,
+        onDrop: z,
+        onKeyDown: w,
+        role: "button",
+        tabIndex: t ? -1 : 0,
+        "aria-disabled": t,
+        "data-testid": m,
+        children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ref: n,
+              type: "file",
+              accept: k,
+              multiple: l,
+              onChange: C,
+              style: { display: "none" },
+              "aria-hidden": "true"
+            }
+          ),
+          d && /* @__PURE__ */ a("div", { style: P, children: d }),
+          v && /* @__PURE__ */ a("div", { style: R, children: v }),
+          u && /* @__PURE__ */ a("div", { style: j, children: u }),
+          s && /* @__PURE__ */ a("div", { style: E, children: s })
+        ]
+      }
+    );
+  }
+);
+N.displayName = "DropZone";
+export {
+  N as DropZone
+};
+//# sourceMappingURL=DropZone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropZone.js","sources":["../../../../src/components/form/DropZone/DropZone.tsx"],"sourcesContent":["/**\n * DropZone Component\n *\n * File upload area with drag-and-drop support.\n * Provides visual feedback during drag operations.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type ReactNode,\n  type DragEvent,\n  type ChangeEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport interface DropZoneProps {\n  /** Callback when files are selected or dropped */\n  onFiles?: (files: File[]) => void\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Whether multiple files can be selected */\n  multiple?: boolean\n  /** Maximum file size in bytes */\n  maxSize?: number\n  /** Whether the drop zone is disabled */\n  disabled?: boolean\n  /** Main text content */\n  children?: ReactNode\n  /** Icon to display */\n  icon?: ReactNode\n  /** Helper text shown below main content */\n  helperText?: string\n  /** Error message */\n  error?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const DropZone = forwardRef<HTMLDivElement, DropZoneProps>(\n  function DropZone(\n    {\n      onFiles,\n      accept,\n      multiple = true,\n      maxSize,\n      disabled = false,\n      children,\n      icon,\n      helperText,\n      error,\n      className,\n      testId,\n    },\n    ref\n  ) {\n    const [isDragOver, setIsDragOver] = useState(false)\n    const fileInputRef = useRef<HTMLInputElement>(null)\n\n    const handleDragEnter = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled) {\n          setIsDragOver(true)\n        }\n      },\n      [disabled]\n    )\n\n    const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setIsDragOver(false)\n    }, [])\n\n    const handleDragOver = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled) {\n          setIsDragOver(true)\n        }\n      },\n      [disabled]\n    )\n\n    const processFiles = useCallback(\n      (fileList: FileList | null) => {\n        if (!fileList || fileList.length === 0) return\n\n        let files = Array.from(fileList)\n\n        // Filter by size if maxSize is set\n        if (maxSize) {\n          files = files.filter((file) => file.size <= maxSize)\n        }\n\n        // Take only first file if multiple is false\n        if (!multiple && files.length > 1) {\n          files = [files[0]]\n        }\n\n        onFiles?.(files)\n      },\n      [maxSize, multiple, onFiles]\n    )\n\n    const handleDrop = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragOver(false)\n\n        if (disabled) return\n\n        processFiles(e.dataTransfer.files)\n      },\n      [disabled, processFiles]\n    )\n\n    const handleClick = useCallback(() => {\n      if (!disabled) {\n        fileInputRef.current?.click()\n      }\n    }, [disabled])\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        processFiles(e.target.files)\n        // Reset input value to allow selecting the same file again\n        if (fileInputRef.current) {\n          fileInputRef.current.value = ''\n        }\n      },\n      [processFiles]\n    )\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n          e.preventDefault()\n          fileInputRef.current?.click()\n        }\n      },\n      [disabled]\n    )\n\n    const containerStyle: CSSProperties = {\n      padding: '40px 20px',\n      border: `2px dashed ${\n        error\n          ? 'var(--brycks-error-default)'\n          : isDragOver\n            ? 'var(--brycks-primary-default)'\n            : 'var(--brycks-border-muted)'\n      }`,\n      borderRadius: 'var(--brycks-radius-lg)',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      textAlign: 'center',\n      transition: 'all var(--brycks-duration-fast) var(--brycks-easing-out)',\n      background: isDragOver\n        ? 'var(--brycks-primary-muted)'\n        : 'var(--brycks-background-muted)',\n      opacity: disabled ? 0.5 : 1,\n    }\n\n    const iconStyle: CSSProperties = {\n      display: 'flex',\n      justifyContent: 'center',\n      marginBottom: 12,\n      color: isDragOver\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-foreground-muted)',\n    }\n\n    const textStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-sm)',\n      fontWeight: 500,\n      color: 'var(--brycks-foreground-default)',\n      marginBottom: helperText ? 4 : 0,\n    }\n\n    const helperStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-xs)',\n      color: 'var(--brycks-foreground-muted)',\n    }\n\n    const errorStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-xs)',\n      color: 'var(--brycks-error-default)',\n      marginTop: 8,\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          'brycks-dropzone',\n          isDragOver && 'brycks-dropzone--drag-over',\n          disabled && 'brycks-dropzone--disabled',\n          error && 'brycks-dropzone--error',\n          className\n        )}\n        style={containerStyle}\n        onClick={handleClick}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-disabled={disabled}\n        data-testid={testId}\n      >\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          onChange={handleChange}\n          style={{ display: 'none' }}\n          aria-hidden=\"true\"\n        />\n\n        {icon && <div style={iconStyle}>{icon}</div>}\n\n        {children && <div style={textStyle}>{children}</div>}\n\n        {helperText && <div style={helperStyle}>{helperText}</div>}\n\n        {error && <div style={errorStyle}>{error}</div>}\n      </div>\n    )\n  }\n)\n\nDropZone.displayName = 'DropZone'\n"],"names":["DropZone","forwardRef","onFiles","accept","multiple","maxSize","disabled","children","icon","helperText","error","className","testId","ref","isDragOver","setIsDragOver","useState","fileInputRef","useRef","handleDragEnter","useCallback","e","handleDragLeave","handleDragOver","processFiles","fileList","files","file","handleDrop","handleClick","handleChange","handleKeyDown","containerStyle","iconStyle","textStyle","helperStyle","errorStyle","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/form/FieldError/FieldError.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),S=require("../../../utils/styles.cjs"),h={sm:{fontSize:11,iconSize:12,gap:4},md:{fontSize:12,iconSize:14,gap:6},lg:{fontSize:14,iconSize:16,gap:8}};function x({size:r}){return e.jsx("svg",{width:r,height:r,viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e.jsx("path",{d:"M8 5v3m0 2.5h.007M14 8A6 6 0 112 8a6 6 0 0112 0z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const o=y.forwardRef(function({size:t="md",children:n,showIcon:s=!0,icon:l,className:c,style:a,testId:d,...f},u){const i=h[t],g={display:"inline-flex",alignItems:"center",gap:i.gap,fontSize:i.fontSize,fontWeight:500,color:"var(--brycks-error-default)",lineHeight:1.4,...a},p={display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0};return n?e.jsxs("span",{ref:u,className:S.cx("brycks-field-error",`brycks-field-error--${t}`,c),style:g,role:"alert","aria-live":"polite","data-testid":d,...f,children:[s&&e.jsx("span",{style:p,children:l||e.jsx(x,{size:i.iconSize})}),n]}):null});o.displayName="FieldError";exports.FieldError=o;
+//# sourceMappingURL=FieldError.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.cjs","sources":["../../../../src/components/form/FieldError/FieldError.tsx"],"sourcesContent":["/**\n * FieldError Component\n *\n * Displays form field error messages with consistent styling.\n * Includes an optional icon and proper accessibility attributes.\n */\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FieldErrorSize = 'sm' | 'md' | 'lg'\n\nexport interface FieldErrorProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {\n  /** Error size */\n  size?: FieldErrorSize\n  /** Error message */\n  children: ReactNode\n  /** Whether to show the error icon */\n  showIcon?: boolean\n  /** Custom icon */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FieldErrorSize, { fontSize: number; iconSize: number; gap: number }> = {\n  sm: { fontSize: 11, iconSize: 12, gap: 4 },\n  md: { fontSize: 12, iconSize: 14, gap: 6 },\n  lg: { fontSize: 14, iconSize: 16, gap: 8 },\n}\n\nfunction ErrorIcon({ size }: { size: number }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M8 5v3m0 2.5h.007M14 8A6 6 0 112 8a6 6 0 0112 0z\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport const FieldError = forwardRef<HTMLSpanElement, FieldErrorProps>(function FieldError(\n  {\n    size = 'md',\n    children,\n    showIcon = true,\n    icon,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeConfig[size]\n\n  const errorStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: config.gap,\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-error-default)',\n    lineHeight: 1.4,\n    ...style,\n  }\n\n  const iconStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }\n\n  if (!children) return null\n\n  return (\n    <span\n      ref={ref}\n      className={cx('brycks-field-error', `brycks-field-error--${size}`, className)}\n      style={errorStyle}\n      role=\"alert\"\n      aria-live=\"polite\"\n      data-testid={testId}\n      {...props}\n    >\n      {showIcon && (\n        <span style={iconStyle}>\n          {icon || <ErrorIcon size={config.iconSize} />}\n        </span>\n      )}\n      {children}\n    </span>\n  )\n})\n\nFieldError.displayName = 'FieldError'\n"],"names":["sizeConfig","ErrorIcon","size","jsx","FieldError","forwardRef","children","showIcon","icon","className","style","testId","props","ref","config","errorStyle","iconStyle","jsxs","cx"],"mappings":"+KA2BMA,EAA0F,CAC9F,GAAI,CAAE,SAAU,GAAI,SAAU,GAAI,IAAK,CAAA,EACvC,GAAI,CAAE,SAAU,GAAI,SAAU,GAAI,IAAK,CAAA,EACvC,GAAI,CAAE,SAAU,GAAI,SAAU,GAAI,IAAK,CAAA,CACzC,EAEA,SAASC,EAAU,CAAE,KAAAC,GAA0B,CAC7C,OACEC,EAAAA,IAAC,MAAA,CACC,MAAOD,EACP,OAAQA,EACR,QAAQ,YACR,KAAK,OACL,cAAY,OAEZ,SAAAC,EAAAA,IAAC,OAAA,CACC,EAAE,mDACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,OAAA,CAAA,CACjB,CAAA,CAGN,CAEO,MAAMC,EAAaC,EAAAA,WAA6C,SACrE,CACE,KAAAH,EAAO,KACP,SAAAI,EACA,SAAAC,EAAW,GACX,KAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAASd,EAAWE,CAAI,EAExBa,EAA4B,CAChC,QAAS,cACT,WAAY,SACZ,IAAKD,EAAO,IACZ,SAAUA,EAAO,SACjB,WAAY,IACZ,MAAO,8BACP,WAAY,IACZ,GAAGJ,CAAA,EAGCM,EAA2B,CAC/B,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,CAAA,EAGd,OAAKV,EAGHW,EAAAA,KAAC,OAAA,CACC,IAAAJ,EACA,UAAWK,EAAAA,GAAG,qBAAsB,uBAAuBhB,CAAI,GAAIO,CAAS,EAC5E,MAAOM,EACP,KAAK,QACL,YAAU,SACV,cAAaJ,EACZ,GAAGC,EAEH,SAAA,CAAAL,GACCJ,EAAAA,IAAC,OAAA,CAAK,MAAOa,EACV,SAAAR,SAASP,EAAA,CAAU,KAAMa,EAAO,QAAA,CAAU,CAAA,CAC7C,EAEDR,CAAA,CAAA,CAAA,EAjBiB,IAoBxB,CAAC,EAEDF,EAAW,YAAc"}

package/dist/components/form/FieldError/FieldError.js

@@ -0,0 +1,77 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { cx as h } from "../../../utils/styles.js";
+const S = {
+  sm: { fontSize: 11, iconSize: 12, gap: 4 },
+  md: { fontSize: 12, iconSize: 14, gap: 6 },
+  lg: { fontSize: 14, iconSize: 16, gap: 8 }
+};
+function y({ size: r }) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: r,
+      height: r,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M8 5v3m0 2.5h.007M14 8A6 6 0 112 8a6 6 0 0112 0z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+const z = u(function({
+  size: o = "md",
+  children: n,
+  showIcon: t = !0,
+  icon: l,
+  className: s,
+  style: a,
+  testId: c,
+  ...f
+}, d) {
+  const i = S[o], p = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: i.gap,
+    fontSize: i.fontSize,
+    fontWeight: 500,
+    color: "var(--brycks-error-default)",
+    lineHeight: 1.4,
+    ...a
+  }, g = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  };
+  return n ? /* @__PURE__ */ m(
+    "span",
+    {
+      ref: d,
+      className: h("brycks-field-error", `brycks-field-error--${o}`, s),
+      style: p,
+      role: "alert",
+      "aria-live": "polite",
+      "data-testid": c,
+      ...f,
+      children: [
+        t && /* @__PURE__ */ e("span", { style: g, children: l || /* @__PURE__ */ e(y, { size: i.iconSize }) }),
+        n
+      ]
+    }
+  ) : null;
+});
+z.displayName = "FieldError";
+export {
+  z as FieldError
+};
+//# sourceMappingURL=FieldError.js.map