@brycks/core-front 0.2.7 → 0.2.9

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.js","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":";;;AA2BA,MAAMA,IAA0F;AAAA,EAC9F,IAAI,EAAE,UAAU,IAAI,UAAU,IAAI,KAAK,EAAA;AAAA,EACvC,IAAI,EAAE,UAAU,IAAI,UAAU,IAAI,KAAK,EAAA;AAAA,EACvC,IAAI,EAAE,UAAU,IAAI,UAAU,IAAI,KAAK,EAAA;AACzC;AAEA,SAASC,EAAU,EAAE,MAAAC,KAA0B;AAC7C,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAOD;AAAA,MACP,QAAQA;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MAEZ,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAGN;AAEO,MAAMC,IAAaC,EAA6C,SACrE;AAAA,EACE,MAAAH,IAAO;AAAA,EACP,UAAAI;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASd,EAAWE,CAAI,GAExBa,IAA4B;AAAA,IAChC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAKD,EAAO;AAAA,IACZ,UAAUA,EAAO;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,GAAGJ;AAAA,EAAA,GAGCM,IAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAY;AAAA,EAAA;AAGd,SAAKV,IAGH,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWK,EAAG,sBAAsB,uBAAuBhB,CAAI,IAAIO,CAAS;AAAA,MAC5E,OAAOM;AAAA,MACP,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAaJ;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAL,KACC,gBAAAJ,EAAC,QAAA,EAAK,OAAOa,GACV,UAAAR,uBAASP,GAAA,EAAU,MAAMa,EAAO,SAAA,CAAU,EAAA,CAC7C;AAAA,QAEDR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAjBiB;AAoBxB,CAAC;AAEDF,EAAW,cAAc;"}

package/dist/components/form/FileInput/FileInput.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),Q=require("../../../utils/styles.cjs"),V={sm:{height:80,fontSize:12,padding:16,iconSize:24},md:{height:120,fontSize:14,padding:24,iconSize:32},lg:{height:160,fontSize:16,padding:32,iconSize:40}};function X({size:f}){return r.jsx("svg",{width:f,height:f,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"})})}const x=n.forwardRef(function({size:h="md",variant:S="dropzone",accept:m,multiple:a=!1,maxSize:y,label:k,description:d,error:p,isInvalid:D=!1,onChange:v,icon:j,disabled:t=!1,className:C,style:z,testId:w,...I},i){const[c,g]=n.useState(!1),[F,b]=n.useState(!1),l=n.useRef(null),o=V[h],R=D||!!p,u=n.useCallback(e=>{if(!e||e.length===0)return;let s=Array.from(e);y&&(s=s.filter(J=>J.size<=y)),!a&&s.length>1&&(s=[s[0]]),v?.(s)},[y,a,v]),O=n.useCallback(e=>{e.preventDefault(),e.stopPropagation(),t||g(!0)},[t]),P=n.useCallback(e=>{e.preventDefault(),e.stopPropagation(),g(!1)},[]),T=n.useCallback(e=>{e.preventDefault(),e.stopPropagation(),g(!1),t||u(e.dataTransfer.files)},[t,u]),W=n.useCallback(e=>{u(e.target.files),l.current&&(l.current.value="")},[u]),q=n.useCallback(()=>{t||l.current?.click()},[t]),A=n.useCallback(e=>{(e.key==="Enter"||e.key===" ")&&!t&&(e.preventDefault(),l.current?.click())},[t]),L={display:"flex",flexDirection:"column",gap:6,...z},M={fontSize:o.fontSize,fontWeight:500,color:"var(--brycks-foreground-default)"},$={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:8,minHeight:o.height,padding:o.padding,border:`2px dashed ${R?"var(--brycks-error-default)":c||F?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-lg)",backgroundColor:c?"var(--brycks-primary-50)":"var(--brycks-background-muted)",cursor:t?"not-allowed":"pointer",opacity:t?.5:1,transition:"all 150ms ease-out",outline:"none"},B={color:c?"var(--brycks-primary-default)":"var(--brycks-foreground-muted)",transition:"color 150ms ease-out"},E={display:"flex",flexDirection:"column",alignItems:"center",gap:4,textAlign:"center"},K={fontSize:o.fontSize,fontWeight:500,color:"var(--brycks-foreground-default)"},N={fontSize:o.fontSize-2,color:"var(--brycks-foreground-muted)"},H={color:"var(--brycks-primary-default)",fontWeight:500},U={fontSize:o.fontSize-2,color:"var(--brycks-error-default)"},G=a?"Drag files here or click to browse":"Drag a file here or click to browse";return r.jsxs("div",{className:Q.cx("brycks-file-input",`brycks-file-input--${h}`,`brycks-file-input--${S}`,C),style:L,children:[k&&r.jsx("label",{style:M,children:k}),r.jsxs("div",{style:$,onDragOver:O,onDragLeave:P,onDrop:T,onClick:q,onKeyDown:A,onFocus:()=>b(!0),onBlur:()=>b(!1),tabIndex:t?-1:0,role:"button","aria-label":String(d)||G,children:[r.jsx("div",{style:B,children:j||r.jsx(X,{size:o.iconSize})}),r.jsxs("div",{style:E,children:[r.jsx("span",{style:K,children:c?"Drop files here":r.jsxs(r.Fragment,{children:[r.jsx("span",{style:H,children:"Click to browse"})," or drag files here"]})}),d&&r.jsx("span",{style:N,children:d})]})]}),p&&r.jsx("span",{style:U,children:p}),r.jsx("input",{ref:e=>{l.current=e,typeof i=="function"?i(e):i&&(i.current=e)},type:"file",accept:m,multiple:a,disabled:t,onChange:W,style:{display:"none"},"data-testid":w,...I})]})});x.displayName="FileInput";exports.FileInput=x;
+//# sourceMappingURL=FileInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.cjs","sources":["../../../../src/components/form/FileInput/FileInput.tsx"],"sourcesContent":["/**\n * FileInput Component\n *\n * Accessible file upload input with drag-and-drop support.\n * Supports multiple files and file type restrictions.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type DragEvent,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FileInputSize = 'sm' | 'md' | 'lg'\nexport type FileInputVariant = 'default' | 'dropzone'\n\nexport interface FileInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value'> {\n  /** Input size */\n  size?: FileInputSize\n  /** Input variant */\n  variant?: FileInputVariant\n  /** Accepted file types (e.g., \"image/*,.pdf\") */\n  accept?: string\n  /** Whether multiple files can be selected */\n  multiple?: boolean\n  /** Maximum file size in bytes */\n  maxSize?: number\n  /** Label text */\n  label?: ReactNode\n  /** Description text inside dropzone */\n  description?: ReactNode\n  /** Error message */\n  error?: ReactNode\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Callback when files are selected */\n  onChange?: (files: File[]) => void\n  /** Icon to display in dropzone */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FileInputSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: 80, fontSize: 12, padding: 16, iconSize: 24 },\n  md: { height: 120, fontSize: 14, padding: 24, iconSize: 32 },\n  lg: { height: 160, fontSize: 16, padding: 32, iconSize: 40 },\n}\n\nfunction UploadIcon({ size }: { size: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n    </svg>\n  )\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(function FileInput(\n  {\n    size = 'md',\n    variant = 'dropzone',\n    accept,\n    multiple = false,\n    maxSize,\n    label,\n    description,\n    error,\n    isInvalid = false,\n    onChange,\n    icon,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [isDragOver, setIsDragOver] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const handleFiles = useCallback(\n    (fileList: FileList | null) => {\n      if (!fileList || fileList.length === 0) return\n\n      let files = Array.from(fileList)\n\n      // Filter by max size if specified\n      if (maxSize) {\n        files = files.filter((file) => file.size <= maxSize)\n      }\n\n      // If not multiple, only take first file\n      if (!multiple && files.length > 1) {\n        files = [files[0]]\n      }\n\n      onChange?.(files)\n    },\n    [maxSize, multiple, onChange]\n  )\n\n  const handleDragOver = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (!disabled) {\n      setIsDragOver(true)\n    }\n  }, [disabled])\n\n  const handleDragLeave = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragOver(false)\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setIsDragOver(false)\n\n      if (!disabled) {\n        handleFiles(e.dataTransfer.files)\n      }\n    },\n    [disabled, handleFiles]\n  )\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      handleFiles(e.target.files)\n      // Reset input value to allow selecting the same file again\n      if (inputRef.current) {\n        inputRef.current.value = ''\n      }\n    },\n    [handleFiles]\n  )\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      inputRef.current?.click()\n    }\n  }, [disabled])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n        e.preventDefault()\n        inputRef.current?.click()\n      }\n    },\n    [disabled]\n  )\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,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const dropzoneStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n    minHeight: config.height,\n    padding: config.padding,\n    border: `2px dashed ${\n      hasError\n        ? 'var(--brycks-error-default)'\n        : isDragOver\n        ? 'var(--brycks-primary-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-lg)',\n    backgroundColor: isDragOver\n      ? 'var(--brycks-primary-50)'\n      : 'var(--brycks-background-muted)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    transition: 'all 150ms ease-out',\n    outline: 'none',\n  }\n\n  const iconContainerStyle: CSSProperties = {\n    color: isDragOver\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-foreground-muted)',\n    transition: 'color 150ms ease-out',\n  }\n\n  const textContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: 4,\n    textAlign: 'center',\n  }\n\n  const primaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const secondaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-foreground-muted)',\n  }\n\n  const browseStyle: CSSProperties = {\n    color: 'var(--brycks-primary-default)',\n    fontWeight: 500,\n  }\n\n  const errorStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-error-default)',\n  }\n\n  const defaultDescription = multiple\n    ? 'Drag files here or click to browse'\n    : 'Drag a file here or click to browse'\n\n  return (\n    <div\n      className={cx('brycks-file-input', `brycks-file-input--${size}`, `brycks-file-input--${variant}`, className)}\n      style={containerStyle}\n    >\n      {label && <label style={labelStyle}>{label}</label>}\n      <div\n        style={dropzoneStyle}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        tabIndex={disabled ? -1 : 0}\n        role=\"button\"\n        aria-label={String(description) || defaultDescription}\n      >\n        <div style={iconContainerStyle}>\n          {icon || <UploadIcon size={config.iconSize} />}\n        </div>\n        <div style={textContainerStyle}>\n          <span style={primaryTextStyle}>\n            {isDragOver ? 'Drop files here' : (\n              <>\n                <span style={browseStyle}>Click to browse</span> or drag files here\n              </>\n            )}\n          </span>\n          {description && <span style={secondaryTextStyle}>{description}</span>}\n        </div>\n      </div>\n      {error && <span style={errorStyle}>{error}</span>}\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=\"file\"\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        onChange={handleChange}\n        style={{ display: 'none' }}\n        data-testid={testId}\n        {...props}\n      />\n    </div>\n  )\n})\n\nFileInput.displayName = 'FileInput'\n"],"names":["sizeConfig","UploadIcon","size","jsx","FileInput","forwardRef","variant","accept","multiple","maxSize","label","description","error","isInvalid","onChange","icon","disabled","className","style","testId","props","ref","isDragOver","setIsDragOver","useState","isFocused","setIsFocused","inputRef","useRef","config","hasError","handleFiles","useCallback","fileList","files","file","handleDragOver","handleDragLeave","handleDrop","handleChange","handleClick","handleKeyDown","containerStyle","labelStyle","dropzoneStyle","iconContainerStyle","textContainerStyle","primaryTextStyle","secondaryTextStyle","browseStyle","errorStyle","defaultDescription","jsxs","cx","Fragment","node"],"mappings":"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"}

package/dist/components/form/FileInput/FileInput.js

@@ -0,0 +1,163 @@
+import { jsxs as u, jsx as t, Fragment as V } from "react/jsx-runtime";
+import { forwardRef as X, useState as D, useRef as Y, useCallback as o } from "react";
+import { cx as Z } from "../../../utils/styles.js";
+const _ = {
+  sm: { height: 80, fontSize: 12, padding: 16, iconSize: 24 },
+  md: { height: 120, fontSize: 14, padding: 24, iconSize: 32 },
+  lg: { height: 160, fontSize: 16, padding: 32, iconSize: 40 }
+};
+function ee({ size: d }) {
+  return /* @__PURE__ */ t("svg", { width: d, height: d, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) });
+}
+const re = X(function({
+  size: k = "md",
+  variant: b = "dropzone",
+  accept: z,
+  multiple: l = !1,
+  maxSize: y,
+  label: v,
+  description: p,
+  error: g,
+  isInvalid: x = !1,
+  onChange: m,
+  icon: C,
+  disabled: r = !1,
+  className: w,
+  style: I,
+  testId: F,
+  ...j
+}, s) {
+  const [c, h] = D(!1), [O, S] = D(!1), a = Y(null), n = _[k], R = x || !!g, f = o(
+    (e) => {
+      if (!e || e.length === 0) return;
+      let i = Array.from(e);
+      y && (i = i.filter((Q) => Q.size <= y)), !l && i.length > 1 && (i = [i[0]]), m?.(i);
+    },
+    [y, l, m]
+  ), W = o((e) => {
+    e.preventDefault(), e.stopPropagation(), r || h(!0);
+  }, [r]), A = o((e) => {
+    e.preventDefault(), e.stopPropagation(), h(!1);
+  }, []), L = o(
+    (e) => {
+      e.preventDefault(), e.stopPropagation(), h(!1), r || f(e.dataTransfer.files);
+    },
+    [r, f]
+  ), P = o(
+    (e) => {
+      f(e.target.files), a.current && (a.current.value = "");
+    },
+    [f]
+  ), T = o(() => {
+    r || a.current?.click();
+  }, [r]), $ = o(
+    (e) => {
+      (e.key === "Enter" || e.key === " ") && !r && (e.preventDefault(), a.current?.click());
+    },
+    [r]
+  ), B = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6,
+    ...I
+  }, E = {
+    fontSize: n.fontSize,
+    fontWeight: 500,
+    color: "var(--brycks-foreground-default)"
+  }, K = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    minHeight: n.height,
+    padding: n.padding,
+    border: `2px dashed ${R ? "var(--brycks-error-default)" : c || O ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
+    borderRadius: "var(--brycks-radius-lg)",
+    backgroundColor: c ? "var(--brycks-primary-50)" : "var(--brycks-background-muted)",
+    cursor: r ? "not-allowed" : "pointer",
+    opacity: r ? 0.5 : 1,
+    transition: "all 150ms ease-out",
+    outline: "none"
+  }, M = {
+    color: c ? "var(--brycks-primary-default)" : "var(--brycks-foreground-muted)",
+    transition: "color 150ms ease-out"
+  }, N = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 4,
+    textAlign: "center"
+  }, H = {
+    fontSize: n.fontSize,
+    fontWeight: 500,
+    color: "var(--brycks-foreground-default)"
+  }, U = {
+    fontSize: n.fontSize - 2,
+    color: "var(--brycks-foreground-muted)"
+  }, q = {
+    color: "var(--brycks-primary-default)",
+    fontWeight: 500
+  }, G = {
+    fontSize: n.fontSize - 2,
+    color: "var(--brycks-error-default)"
+  }, J = l ? "Drag files here or click to browse" : "Drag a file here or click to browse";
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: Z("brycks-file-input", `brycks-file-input--${k}`, `brycks-file-input--${b}`, w),
+      style: B,
+      children: [
+        v && /* @__PURE__ */ t("label", { style: E, children: v }),
+        /* @__PURE__ */ u(
+          "div",
+          {
+            style: K,
+            onDragOver: W,
+            onDragLeave: A,
+            onDrop: L,
+            onClick: T,
+            onKeyDown: $,
+            onFocus: () => S(!0),
+            onBlur: () => S(!1),
+            tabIndex: r ? -1 : 0,
+            role: "button",
+            "aria-label": String(p) || J,
+            children: [
+              /* @__PURE__ */ t("div", { style: M, children: C || /* @__PURE__ */ t(ee, { size: n.iconSize }) }),
+              /* @__PURE__ */ u("div", { style: N, children: [
+                /* @__PURE__ */ t("span", { style: H, children: c ? "Drop files here" : /* @__PURE__ */ u(V, { children: [
+                  /* @__PURE__ */ t("span", { style: q, children: "Click to browse" }),
+                  " or drag files here"
+                ] }) }),
+                p && /* @__PURE__ */ t("span", { style: U, children: p })
+              ] })
+            ]
+          }
+        ),
+        g && /* @__PURE__ */ t("span", { style: G, children: g }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            ref: (e) => {
+              a.current = e, typeof s == "function" ? s(e) : s && (s.current = e);
+            },
+            type: "file",
+            accept: z,
+            multiple: l,
+            disabled: r,
+            onChange: P,
+            style: { display: "none" },
+            "data-testid": F,
+            ...j
+          }
+        )
+      ]
+    }
+  );
+});
+re.displayName = "FileInput";
+export {
+  re as FileInput
+};
+//# sourceMappingURL=FileInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.js","sources":["../../../../src/components/form/FileInput/FileInput.tsx"],"sourcesContent":["/**\n * FileInput Component\n *\n * Accessible file upload input with drag-and-drop support.\n * Supports multiple files and file type restrictions.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type DragEvent,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FileInputSize = 'sm' | 'md' | 'lg'\nexport type FileInputVariant = 'default' | 'dropzone'\n\nexport interface FileInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value'> {\n  /** Input size */\n  size?: FileInputSize\n  /** Input variant */\n  variant?: FileInputVariant\n  /** Accepted file types (e.g., \"image/*,.pdf\") */\n  accept?: string\n  /** Whether multiple files can be selected */\n  multiple?: boolean\n  /** Maximum file size in bytes */\n  maxSize?: number\n  /** Label text */\n  label?: ReactNode\n  /** Description text inside dropzone */\n  description?: ReactNode\n  /** Error message */\n  error?: ReactNode\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Callback when files are selected */\n  onChange?: (files: File[]) => void\n  /** Icon to display in dropzone */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FileInputSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: 80, fontSize: 12, padding: 16, iconSize: 24 },\n  md: { height: 120, fontSize: 14, padding: 24, iconSize: 32 },\n  lg: { height: 160, fontSize: 16, padding: 32, iconSize: 40 },\n}\n\nfunction UploadIcon({ size }: { size: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n    </svg>\n  )\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(function FileInput(\n  {\n    size = 'md',\n    variant = 'dropzone',\n    accept,\n    multiple = false,\n    maxSize,\n    label,\n    description,\n    error,\n    isInvalid = false,\n    onChange,\n    icon,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [isDragOver, setIsDragOver] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const handleFiles = useCallback(\n    (fileList: FileList | null) => {\n      if (!fileList || fileList.length === 0) return\n\n      let files = Array.from(fileList)\n\n      // Filter by max size if specified\n      if (maxSize) {\n        files = files.filter((file) => file.size <= maxSize)\n      }\n\n      // If not multiple, only take first file\n      if (!multiple && files.length > 1) {\n        files = [files[0]]\n      }\n\n      onChange?.(files)\n    },\n    [maxSize, multiple, onChange]\n  )\n\n  const handleDragOver = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (!disabled) {\n      setIsDragOver(true)\n    }\n  }, [disabled])\n\n  const handleDragLeave = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragOver(false)\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setIsDragOver(false)\n\n      if (!disabled) {\n        handleFiles(e.dataTransfer.files)\n      }\n    },\n    [disabled, handleFiles]\n  )\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      handleFiles(e.target.files)\n      // Reset input value to allow selecting the same file again\n      if (inputRef.current) {\n        inputRef.current.value = ''\n      }\n    },\n    [handleFiles]\n  )\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      inputRef.current?.click()\n    }\n  }, [disabled])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n        e.preventDefault()\n        inputRef.current?.click()\n      }\n    },\n    [disabled]\n  )\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,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const dropzoneStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n    minHeight: config.height,\n    padding: config.padding,\n    border: `2px dashed ${\n      hasError\n        ? 'var(--brycks-error-default)'\n        : isDragOver\n        ? 'var(--brycks-primary-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-lg)',\n    backgroundColor: isDragOver\n      ? 'var(--brycks-primary-50)'\n      : 'var(--brycks-background-muted)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    transition: 'all 150ms ease-out',\n    outline: 'none',\n  }\n\n  const iconContainerStyle: CSSProperties = {\n    color: isDragOver\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-foreground-muted)',\n    transition: 'color 150ms ease-out',\n  }\n\n  const textContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: 4,\n    textAlign: 'center',\n  }\n\n  const primaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const secondaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-foreground-muted)',\n  }\n\n  const browseStyle: CSSProperties = {\n    color: 'var(--brycks-primary-default)',\n    fontWeight: 500,\n  }\n\n  const errorStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-error-default)',\n  }\n\n  const defaultDescription = multiple\n    ? 'Drag files here or click to browse'\n    : 'Drag a file here or click to browse'\n\n  return (\n    <div\n      className={cx('brycks-file-input', `brycks-file-input--${size}`, `brycks-file-input--${variant}`, className)}\n      style={containerStyle}\n    >\n      {label && <label style={labelStyle}>{label}</label>}\n      <div\n        style={dropzoneStyle}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        tabIndex={disabled ? -1 : 0}\n        role=\"button\"\n        aria-label={String(description) || defaultDescription}\n      >\n        <div style={iconContainerStyle}>\n          {icon || <UploadIcon size={config.iconSize} />}\n        </div>\n        <div style={textContainerStyle}>\n          <span style={primaryTextStyle}>\n            {isDragOver ? 'Drop files here' : (\n              <>\n                <span style={browseStyle}>Click to browse</span> or drag files here\n              </>\n            )}\n          </span>\n          {description && <span style={secondaryTextStyle}>{description}</span>}\n        </div>\n      </div>\n      {error && <span style={errorStyle}>{error}</span>}\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=\"file\"\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        onChange={handleChange}\n        style={{ display: 'none' }}\n        data-testid={testId}\n        {...props}\n      />\n    </div>\n  )\n})\n\nFileInput.displayName = 'FileInput'\n"],"names":["sizeConfig","UploadIcon","size","jsx","FileInput","forwardRef","variant","accept","multiple","maxSize","label","description","error","isInvalid","onChange","icon","disabled","className","style","testId","props","ref","isDragOver","setIsDragOver","useState","isFocused","setIsFocused","inputRef","useRef","config","hasError","handleFiles","useCallback","fileList","files","file","handleDragOver","handleDragLeave","handleDrop","handleChange","handleClick","handleKeyDown","containerStyle","labelStyle","dropzoneStyle","iconContainerStyle","textContainerStyle","primaryTextStyle","secondaryTextStyle","browseStyle","errorStyle","defaultDescription","jsxs","cx","Fragment","node"],"mappings":";;;AAoDA,MAAMA,IAA6G;AAAA,EACjH,IAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,SAAS,IAAI,UAAU,GAAA;AAAA,EACvD,IAAI,EAAE,QAAQ,KAAK,UAAU,IAAI,SAAS,IAAI,UAAU,GAAA;AAAA,EACxD,IAAI,EAAE,QAAQ,KAAK,UAAU,IAAI,SAAS,IAAI,UAAU,GAAA;AAC1D;AAEA,SAASC,GAAW,EAAE,MAAAC,KAA0B;AAC9C,SACE,gBAAAC,EAAC,SAAI,OAAOD,GAAM,QAAQA,GAAM,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAChG,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wFAAA,CAAwF,EAAA,CAC/I;AAEJ;AAEO,MAAME,KAAYC,EAA6C,SACpE;AAAA,EACE,MAAAH,IAAO;AAAA,EACP,SAAAI,IAAU;AAAA,EACV,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1CG,IAAWC,EAAyB,IAAI,GACxCC,IAAS7B,EAAWE,CAAI,GACxB4B,IAAWjB,KAAa,CAAC,CAACD,GAE1BmB,IAAcC;AAAA,IAClB,CAACC,MAA8B;AAC7B,UAAI,CAACA,KAAYA,EAAS,WAAW,EAAG;AAExC,UAAIC,IAAQ,MAAM,KAAKD,CAAQ;AAG/B,MAAIxB,MACFyB,IAAQA,EAAM,OAAO,CAACC,MAASA,EAAK,QAAQ1B,CAAO,IAIjD,CAACD,KAAY0B,EAAM,SAAS,MAC9BA,IAAQ,CAACA,EAAM,CAAC,CAAC,IAGnBpB,IAAWoB,CAAK;AAAA,IAClB;AAAA,IACA,CAACzB,GAASD,GAAUM,CAAQ;AAAA,EAAA,GAGxBsB,IAAiBJ,EAAY,CAAC,MAAiB;AACnD,MAAE,eAAA,GACF,EAAE,gBAAA,GACGhB,KACHO,EAAc,EAAI;AAAA,EAEtB,GAAG,CAACP,CAAQ,CAAC,GAEPqB,IAAkBL,EAAY,CAAC,MAAiB;AACpD,MAAE,eAAA,GACF,EAAE,gBAAA,GACFT,EAAc,EAAK;AAAA,EACrB,GAAG,CAAA,CAAE,GAECe,IAAaN;AAAA,IACjB,CAAC,MAAiB;AAChB,QAAE,eAAA,GACF,EAAE,gBAAA,GACFT,EAAc,EAAK,GAEdP,KACHe,EAAY,EAAE,aAAa,KAAK;AAAA,IAEpC;AAAA,IACA,CAACf,GAAUe,CAAW;AAAA,EAAA,GAGlBQ,IAAeP;AAAA,IACnB,CAAC,MAA2C;AAC1C,MAAAD,EAAY,EAAE,OAAO,KAAK,GAEtBJ,EAAS,YACXA,EAAS,QAAQ,QAAQ;AAAA,IAE7B;AAAA,IACA,CAACI,CAAW;AAAA,EAAA,GAGRS,IAAcR,EAAY,MAAM;AACpC,IAAKhB,KACHW,EAAS,SAAS,MAAA;AAAA,EAEtB,GAAG,CAACX,CAAQ,CAAC,GAEPyB,IAAgBT;AAAA,IACpB,CAAC,MAA2B;AAC1B,OAAK,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAQ,CAAChB,MAC3C,EAAE,eAAA,GACFW,EAAS,SAAS,MAAA;AAAA,IAEtB;AAAA,IACA,CAACX,CAAQ;AAAA,EAAA,GAGL0B,IAAgC;AAAA,IACpC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,GAAGxB;AAAA,EAAA,GAGCyB,IAA4B;AAAA,IAChC,UAAUd,EAAO;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,EAAA,GAGHe,IAA+B;AAAA,IACnC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,WAAWf,EAAO;AAAA,IAClB,SAASA,EAAO;AAAA,IAChB,QAAQ,cACNC,IACI,gCACAR,KAEAG,IADA,kCAGA,8BACN;AAAA,IACA,cAAc;AAAA,IACd,iBAAiBH,IACb,6BACA;AAAA,IACJ,QAAQN,IAAW,gBAAgB;AAAA,IACnC,SAASA,IAAW,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,SAAS;AAAA,EAAA,GAGL6B,IAAoC;AAAA,IACxC,OAAOvB,IACH,kCACA;AAAA,IACJ,YAAY;AAAA,EAAA,GAGRwB,IAAoC;AAAA,IACxC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,WAAW;AAAA,EAAA,GAGPC,IAAkC;AAAA,IACtC,UAAUlB,EAAO;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,EAAA,GAGHmB,IAAoC;AAAA,IACxC,UAAUnB,EAAO,WAAW;AAAA,IAC5B,OAAO;AAAA,EAAA,GAGHoB,IAA6B;AAAA,IACjC,OAAO;AAAA,IACP,YAAY;AAAA,EAAA,GAGRC,IAA4B;AAAA,IAChC,UAAUrB,EAAO,WAAW;AAAA,IAC5B,OAAO;AAAA,EAAA,GAGHsB,IAAqB3C,IACvB,uCACA;AAEJ,SACE,gBAAA4C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,qBAAqB,sBAAsBnD,CAAI,IAAI,sBAAsBI,CAAO,IAAIW,CAAS;AAAA,MAC3G,OAAOyB;AAAA,MAEN,UAAA;AAAA,QAAAhC,KAAS,gBAAAP,EAAC,SAAA,EAAM,OAAOwC,GAAa,UAAAjC,GAAM;AAAA,QAC3C,gBAAA0C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAOR;AAAA,YACP,YAAYR;AAAA,YACZ,aAAaC;AAAA,YACb,QAAQC;AAAA,YACR,SAASE;AAAA,YACT,WAAWC;AAAA,YACX,SAAS,MAAMf,EAAa,EAAI;AAAA,YAChC,QAAQ,MAAMA,EAAa,EAAK;AAAA,YAChC,UAAUV,IAAW,KAAK;AAAA,YAC1B,MAAK;AAAA,YACL,cAAY,OAAOL,CAAW,KAAKwC;AAAA,YAEnC,UAAA;AAAA,cAAA,gBAAAhD,EAAC,OAAA,EAAI,OAAO0C,GACT,UAAA9B,uBAASd,IAAA,EAAW,MAAM4B,EAAO,SAAA,CAAU,EAAA,CAC9C;AAAA,cACA,gBAAAuB,EAAC,OAAA,EAAI,OAAON,GACV,UAAA;AAAA,gBAAA,gBAAA3C,EAAC,QAAA,EAAK,OAAO4C,GACV,UAAAzB,IAAa,oBACZ,gBAAA8B,EAAAE,GAAA,EACE,UAAA;AAAA,kBAAA,gBAAAnD,EAAC,QAAA,EAAK,OAAO8C,GAAa,UAAA,mBAAe;AAAA,kBAAO;AAAA,gBAAA,EAAA,CAClD,EAAA,CAEJ;AAAA,gBACCtC,KAAe,gBAAAR,EAAC,QAAA,EAAK,OAAO6C,GAAqB,UAAArC,EAAA,CAAY;AAAA,cAAA,EAAA,CAChE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDC,KAAS,gBAAAT,EAAC,QAAA,EAAK,OAAO+C,GAAa,UAAAtC,GAAM;AAAA,QAC1C,gBAAAT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK,CAACoD,MAAS;AACZ,cAAA5B,EAA6D,UAAU4B,GACpE,OAAOlC,KAAQ,aAAYA,EAAIkC,CAAI,IAC9BlC,QAAS,UAAUkC;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,QAAAhD;AAAA,YACA,UAAAC;AAAA,YACA,UAAAQ;AAAA,YACA,UAAUuB;AAAA,YACV,OAAO,EAAE,SAAS,OAAA;AAAA,YAClB,eAAapB;AAAA,YACZ,GAAGC;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAEDhB,GAAU,cAAc;"}

package/dist/components/form/Form/Form.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),p=require("react"),y=require("../../../utils/styles.cjs"),r=require("../../../design-system/tokens/spacing.cjs"),b={sm:r.spacing[3],md:r.spacing[4],lg:r.spacing[6],xl:r.spacing[8]},i=p.forwardRef(function({gap:t="md",disabled:e,children:o,className:c,style:a,testId:m,onSubmit:l,...u},d){const f={display:"flex",flexDirection:"column",gap:b[t],...a},g=s=>{if(e){s.preventDefault();return}l?.(s)};return n.jsx("form",{ref:d,className:y.cx("brycks-form",`brycks-form--gap-${t}`,e&&"brycks-form--disabled",c),style:f,onSubmit:g,"aria-disabled":e,"data-testid":m,...u,children:n.jsx("fieldset",{disabled:e,style:{border:"none",padding:0,margin:0,minWidth:0},children:o})})});i.displayName="Form";exports.Form=i;
+//# sourceMappingURL=Form.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.cjs","sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["/**\n * Form Component\n *\n * A semantic form wrapper component with consistent styling and spacing.\n * Handles form submission and provides a consistent layout for form fields.\n *\n * @module components/form/Form\n */\n\nimport { forwardRef, type FormHTMLAttributes, type ReactNode } from 'react'\nimport { spacing } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormGap = 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /** Gap between form groups */\n  gap?: FormGap\n  /** Disable the form */\n  disabled?: boolean\n  /** Form children */\n  children: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst gapValues: Record<FormGap, number> = {\n  sm: spacing[3],\n  md: spacing[4],\n  lg: spacing[6],\n  xl: spacing[8],\n}\n\nexport const Form = forwardRef<HTMLFormElement, FormProps>(function Form(\n  {\n    gap = 'md',\n    disabled,\n    children,\n    className,\n    style,\n    testId,\n    onSubmit,\n    ...props\n  },\n  ref\n) {\n  const formStyle = {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: gapValues[gap],\n    ...style,\n  }\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    if (disabled) {\n      e.preventDefault()\n      return\n    }\n    onSubmit?.(e)\n  }\n\n  return (\n    <form\n      ref={ref}\n      className={cx(\n        'brycks-form',\n        `brycks-form--gap-${gap}`,\n        disabled && 'brycks-form--disabled',\n        className\n      )}\n      style={formStyle}\n      onSubmit={handleSubmit}\n      aria-disabled={disabled}\n      data-testid={testId}\n      {...props}\n    >\n      <fieldset\n        disabled={disabled}\n        style={{\n          border: 'none',\n          padding: 0,\n          margin: 0,\n          minWidth: 0,\n        }}\n      >\n        {children}\n      </fieldset>\n    </form>\n  )\n})\n\nForm.displayName = 'Form'\n"],"names":["gapValues","spacing","Form","forwardRef","gap","disabled","children","className","style","testId","onSubmit","props","ref","formStyle","handleSubmit","e","jsx","cx"],"mappings":"sOA4BMA,EAAqC,CACzC,GAAIC,EAAAA,QAAQ,CAAC,EACb,GAAIA,EAAAA,QAAQ,CAAC,EACb,GAAIA,EAAAA,QAAQ,CAAC,EACb,GAAIA,EAAAA,QAAQ,CAAC,CACf,EAEaC,EAAOC,EAAAA,WAAuC,SACzD,CACE,IAAAC,EAAM,KACN,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAY,CAChB,QAAS,OACT,cAAe,SACf,IAAKb,EAAUI,CAAG,EAClB,GAAGI,CAAA,EAGCM,EAAgBC,GAAwC,CAC5D,GAAIV,EAAU,CACZU,EAAE,eAAA,EACF,MACF,CACAL,IAAWK,CAAC,CACd,EAEA,OACEC,EAAAA,IAAC,OAAA,CACC,IAAAJ,EACA,UAAWK,EAAAA,GACT,cACA,oBAAoBb,CAAG,GACvBC,GAAY,wBACZE,CAAA,EAEF,MAAOM,EACP,SAAUC,EACV,gBAAeT,EACf,cAAaI,EACZ,GAAGE,EAEJ,SAAAK,EAAAA,IAAC,WAAA,CACC,SAAAX,EACA,MAAO,CACL,OAAQ,OACR,QAAS,EACT,OAAQ,EACR,SAAU,CAAA,EAGX,SAAAC,CAAA,CAAA,CACH,CAAA,CAGN,CAAC,EAEDJ,EAAK,YAAc"}

package/dist/components/form/Form/Form.js

@@ -0,0 +1,67 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { cx as y } from "../../../utils/styles.js";
+import { spacing as o } from "../../../design-system/tokens/spacing.js";
+const g = {
+  sm: o[3],
+  md: o[4],
+  lg: o[6],
+  xl: o[8]
+}, x = u(function({
+  gap: m = "md",
+  disabled: r,
+  children: i,
+  className: n,
+  style: s,
+  testId: a,
+  onSubmit: f,
+  ...l
+}, c) {
+  const d = {
+    display: "flex",
+    flexDirection: "column",
+    gap: g[m],
+    ...s
+  }, p = (t) => {
+    if (r) {
+      t.preventDefault();
+      return;
+    }
+    f?.(t);
+  };
+  return /* @__PURE__ */ e(
+    "form",
+    {
+      ref: c,
+      className: y(
+        "brycks-form",
+        `brycks-form--gap-${m}`,
+        r && "brycks-form--disabled",
+        n
+      ),
+      style: d,
+      onSubmit: p,
+      "aria-disabled": r,
+      "data-testid": a,
+      ...l,
+      children: /* @__PURE__ */ e(
+        "fieldset",
+        {
+          disabled: r,
+          style: {
+            border: "none",
+            padding: 0,
+            margin: 0,
+            minWidth: 0
+          },
+          children: i
+        }
+      )
+    }
+  );
+});
+x.displayName = "Form";
+export {
+  x as Form
+};
+//# sourceMappingURL=Form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["/**\n * Form Component\n *\n * A semantic form wrapper component with consistent styling and spacing.\n * Handles form submission and provides a consistent layout for form fields.\n *\n * @module components/form/Form\n */\n\nimport { forwardRef, type FormHTMLAttributes, type ReactNode } from 'react'\nimport { spacing } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormGap = 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /** Gap between form groups */\n  gap?: FormGap\n  /** Disable the form */\n  disabled?: boolean\n  /** Form children */\n  children: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst gapValues: Record<FormGap, number> = {\n  sm: spacing[3],\n  md: spacing[4],\n  lg: spacing[6],\n  xl: spacing[8],\n}\n\nexport const Form = forwardRef<HTMLFormElement, FormProps>(function Form(\n  {\n    gap = 'md',\n    disabled,\n    children,\n    className,\n    style,\n    testId,\n    onSubmit,\n    ...props\n  },\n  ref\n) {\n  const formStyle = {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: gapValues[gap],\n    ...style,\n  }\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    if (disabled) {\n      e.preventDefault()\n      return\n    }\n    onSubmit?.(e)\n  }\n\n  return (\n    <form\n      ref={ref}\n      className={cx(\n        'brycks-form',\n        `brycks-form--gap-${gap}`,\n        disabled && 'brycks-form--disabled',\n        className\n      )}\n      style={formStyle}\n      onSubmit={handleSubmit}\n      aria-disabled={disabled}\n      data-testid={testId}\n      {...props}\n    >\n      <fieldset\n        disabled={disabled}\n        style={{\n          border: 'none',\n          padding: 0,\n          margin: 0,\n          minWidth: 0,\n        }}\n      >\n        {children}\n      </fieldset>\n    </form>\n  )\n})\n\nForm.displayName = 'Form'\n"],"names":["gapValues","spacing","Form","forwardRef","gap","disabled","children","className","style","testId","onSubmit","props","ref","formStyle","handleSubmit","e","jsx","cx"],"mappings":";;;;AA4BA,MAAMA,IAAqC;AAAA,EACzC,IAAIC,EAAQ,CAAC;AAAA,EACb,IAAIA,EAAQ,CAAC;AAAA,EACb,IAAIA,EAAQ,CAAC;AAAA,EACb,IAAIA,EAAQ,CAAC;AACf,GAEaC,IAAOC,EAAuC,SACzD;AAAA,EACE,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAY;AAAA,IAChB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAKb,EAAUI,CAAG;AAAA,IAClB,GAAGI;AAAA,EAAA,GAGCM,IAAe,CAACC,MAAwC;AAC5D,QAAIV,GAAU;AACZ,MAAAU,EAAE,eAAA;AACF;AAAA,IACF;AACA,IAAAL,IAAWK,CAAC;AAAA,EACd;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWK;AAAA,QACT;AAAA,QACA,oBAAoBb,CAAG;AAAA,QACvBC,KAAY;AAAA,QACZE;AAAA,MAAA;AAAA,MAEF,OAAOM;AAAA,MACP,UAAUC;AAAA,MACV,iBAAeT;AAAA,MACf,eAAaI;AAAA,MACZ,GAAGE;AAAA,MAEJ,UAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAAX;AAAA,UACA,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,UAAU;AAAA,UAAA;AAAA,UAGX,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;AAEDJ,EAAK,cAAc;"}

package/dist/components/form/FormCard/FormCard.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("react"),p=require("../../../utils/styles.cjs"),x={neutral:"var(--brycks-background-muted)",primary:"var(--brycks-primary-muted)",success:"var(--brycks-success-muted)",warning:"var(--brycks-warning-muted)",error:"var(--brycks-error-muted)",info:"var(--brycks-info-muted)"},t=h.forwardRef(function({title:e,icon:s,iconIntent:c="primary",headerExtra:a,children:d,className:o,style:n,testId:i,...l},y){const b={background:"var(--brycks-background-card)",borderRadius:"var(--brycks-radius-lg)",border:"1px solid var(--brycks-border-subtle)",overflow:"hidden",...n},m={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px 20px",borderBottom:"1px solid var(--brycks-border-subtle)"},u={display:"flex",alignItems:"center",gap:12},f={width:32,height:32,borderRadius:"50%",background:x[c],display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},k={fontFamily:"var(--brycks-font-sans)",fontSize:"var(--brycks-font-size-md)",fontWeight:600,color:"var(--brycks-foreground-default)",lineHeight:1.4,margin:0},v={padding:20},g=e||s||a;return r.jsxs("div",{ref:y,className:p.cx("brycks-form-card",o),style:b,"data-testid":i,...l,children:[g&&r.jsxs("div",{className:"brycks-form-card__header",style:m,children:[r.jsxs("div",{style:u,children:[s&&r.jsx("div",{className:"brycks-form-card__icon",style:f,children:s}),e&&r.jsx("h3",{className:"brycks-form-card__title",style:k,children:e})]}),a&&r.jsx("div",{className:"brycks-form-card__header-extra",children:a})]}),r.jsx("div",{className:"brycks-form-card__body",style:v,children:d})]})});t.displayName="FormCard";exports.FormCard=t;
+//# sourceMappingURL=FormCard.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormCard.cjs","sources":["../../../../src/components/form/FormCard/FormCard.tsx"],"sourcesContent":["/**\n * FormCard Component\n *\n * Card wrapper optimized for form sections with optional icon and title.\n * Provides consistent spacing and visual hierarchy for form layouts.\n */\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FormCardIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info'\n\nexport interface FormCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string\n  /** Icon displayed before title */\n  icon?: ReactNode\n  /** Color intent for the icon circle */\n  iconIntent?: FormCardIntent\n  /** Additional content in the header (e.g., counter, badge) */\n  headerExtra?: ReactNode\n  /** Card body content */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentColors: Record<FormCardIntent, string> = {\n  neutral: 'var(--brycks-background-muted)',\n  primary: 'var(--brycks-primary-muted)',\n  success: 'var(--brycks-success-muted)',\n  warning: 'var(--brycks-warning-muted)',\n  error: 'var(--brycks-error-muted)',\n  info: 'var(--brycks-info-muted)',\n}\n\nexport const FormCard = forwardRef<HTMLDivElement, FormCardProps>(\n  function FormCard(\n    {\n      title,\n      icon,\n      iconIntent = 'primary',\n      headerExtra,\n      children,\n      className,\n      style,\n      testId,\n      ...props\n    },\n    ref\n  ) {\n    const cardStyle: CSSProperties = {\n      background: 'var(--brycks-background-card)',\n      borderRadius: 'var(--brycks-radius-lg)',\n      border: '1px solid var(--brycks-border-subtle)',\n      overflow: 'hidden',\n      ...style,\n    }\n\n    const headerStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '16px 20px',\n      borderBottom: '1px solid var(--brycks-border-subtle)',\n    }\n\n    const headerLeftStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 12,\n    }\n\n    const iconCircleStyle: CSSProperties = {\n      width: 32,\n      height: 32,\n      borderRadius: '50%',\n      background: intentColors[iconIntent],\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    }\n\n    const titleStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-md)',\n      fontWeight: 600,\n      color: 'var(--brycks-foreground-default)',\n      lineHeight: 1.4,\n      margin: 0,\n    }\n\n    const bodyStyle: CSSProperties = {\n      padding: 20,\n    }\n\n    const hasHeader = title || icon || headerExtra\n\n    return (\n      <div\n        ref={ref}\n        className={cx('brycks-form-card', className)}\n        style={cardStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {hasHeader && (\n          <div className=\"brycks-form-card__header\" style={headerStyle}>\n            <div style={headerLeftStyle}>\n              {icon && (\n                <div\n                  className=\"brycks-form-card__icon\"\n                  style={iconCircleStyle}\n                >\n                  {icon}\n                </div>\n              )}\n              {title && (\n                <h3 className=\"brycks-form-card__title\" style={titleStyle}>\n                  {title}\n                </h3>\n              )}\n            </div>\n            {headerExtra && (\n              <div className=\"brycks-form-card__header-extra\">\n                {headerExtra}\n              </div>\n            )}\n          </div>\n        )}\n\n        <div className=\"brycks-form-card__body\" style={bodyStyle}>\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\n\nFormCard.displayName = 'FormCard'\n"],"names":["intentColors","FormCard","forwardRef","title","icon","iconIntent","headerExtra","children","className","style","testId","props","ref","cardStyle","headerStyle","headerLeftStyle","iconCircleStyle","titleStyle","bodyStyle","hasHeader","jsxs","cx","jsx"],"mappings":"+KAkCMA,EAA+C,CACnD,QAAS,iCACT,QAAS,8BACT,QAAS,8BACT,QAAS,8BACT,MAAO,4BACP,KAAM,0BACR,EAEaC,EAAWC,EAAAA,WACtB,SACE,CACE,MAAAC,EACA,KAAAC,EACA,WAAAC,EAAa,UACb,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAA2B,CAC/B,WAAY,gCACZ,aAAc,0BACd,OAAQ,wCACR,SAAU,SACV,GAAGJ,CAAA,EAGCK,EAA6B,CACjC,QAAS,OACT,WAAY,SACZ,eAAgB,gBAChB,QAAS,YACT,aAAc,uCAAA,EAGVC,EAAiC,CACrC,QAAS,OACT,WAAY,SACZ,IAAK,EAAA,EAGDC,EAAiC,CACrC,MAAO,GACP,OAAQ,GACR,aAAc,MACd,WAAYhB,EAAaK,CAAU,EACnC,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,CAAA,EAGRY,EAA4B,CAChC,WAAY,0BACZ,SAAU,6BACV,WAAY,IACZ,MAAO,mCACP,WAAY,IACZ,OAAQ,CAAA,EAGJC,EAA2B,CAC/B,QAAS,EAAA,EAGLC,EAAYhB,GAASC,GAAQE,EAEnC,OACEc,EAAAA,KAAC,MAAA,CACC,IAAAR,EACA,UAAWS,EAAAA,GAAG,mBAAoBb,CAAS,EAC3C,MAAOK,EACP,cAAaH,EACZ,GAAGC,EAEH,SAAA,CAAAQ,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAU,2BAA2B,MAAON,EAC/C,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,MAAOL,EACT,SAAA,CAAAX,GACCkB,EAAAA,IAAC,MAAA,CACC,UAAU,yBACV,MAAON,EAEN,SAAAZ,CAAA,CAAA,EAGJD,GACCmB,EAAAA,IAAC,KAAA,CAAG,UAAU,0BAA0B,MAAOL,EAC5C,SAAAd,CAAA,CACH,CAAA,EAEJ,EACCG,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAU,iCACZ,SAAAhB,CAAA,CACH,CAAA,EAEJ,QAGD,MAAA,CAAI,UAAU,yBAAyB,MAAOY,EAC5C,SAAAX,CAAA,CACH,CAAA,CAAA,CAAA,CAGN,CACF,EAEAN,EAAS,YAAc"}

package/dist/components/form/FormCard/FormCard.js

@@ -0,0 +1,91 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { cx as h } from "../../../utils/styles.js";
+const x = {
+  neutral: "var(--brycks-background-muted)",
+  primary: "var(--brycks-primary-muted)",
+  success: "var(--brycks-success-muted)",
+  warning: "var(--brycks-warning-muted)",
+  error: "var(--brycks-error-muted)",
+  info: "var(--brycks-info-muted)"
+}, _ = g(
+  function({
+    title: e,
+    icon: s,
+    iconIntent: d = "primary",
+    headerExtra: a,
+    children: c,
+    className: o,
+    style: n,
+    testId: i,
+    ...l
+  }, y) {
+    const m = {
+      background: "var(--brycks-background-card)",
+      borderRadius: "var(--brycks-radius-lg)",
+      border: "1px solid var(--brycks-border-subtle)",
+      overflow: "hidden",
+      ...n
+    }, b = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "16px 20px",
+      borderBottom: "1px solid var(--brycks-border-subtle)"
+    }, f = {
+      display: "flex",
+      alignItems: "center",
+      gap: 12
+    }, k = {
+      width: 32,
+      height: 32,
+      borderRadius: "50%",
+      background: x[d],
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0
+    }, u = {
+      fontFamily: "var(--brycks-font-sans)",
+      fontSize: "var(--brycks-font-size-md)",
+      fontWeight: 600,
+      color: "var(--brycks-foreground-default)",
+      lineHeight: 1.4,
+      margin: 0
+    }, v = {
+      padding: 20
+    }, p = e || s || a;
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: y,
+        className: h("brycks-form-card", o),
+        style: m,
+        "data-testid": i,
+        ...l,
+        children: [
+          p && /* @__PURE__ */ t("div", { className: "brycks-form-card__header", style: b, children: [
+            /* @__PURE__ */ t("div", { style: f, children: [
+              s && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "brycks-form-card__icon",
+                  style: k,
+                  children: s
+                }
+              ),
+              e && /* @__PURE__ */ r("h3", { className: "brycks-form-card__title", style: u, children: e })
+            ] }),
+            a && /* @__PURE__ */ r("div", { className: "brycks-form-card__header-extra", children: a })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "brycks-form-card__body", style: v, children: c })
+        ]
+      }
+    );
+  }
+);
+_.displayName = "FormCard";
+export {
+  _ as FormCard
+};
+//# sourceMappingURL=FormCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormCard.js","sources":["../../../../src/components/form/FormCard/FormCard.tsx"],"sourcesContent":["/**\n * FormCard Component\n *\n * Card wrapper optimized for form sections with optional icon and title.\n * Provides consistent spacing and visual hierarchy for form layouts.\n */\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FormCardIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info'\n\nexport interface FormCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string\n  /** Icon displayed before title */\n  icon?: ReactNode\n  /** Color intent for the icon circle */\n  iconIntent?: FormCardIntent\n  /** Additional content in the header (e.g., counter, badge) */\n  headerExtra?: ReactNode\n  /** Card body content */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentColors: Record<FormCardIntent, string> = {\n  neutral: 'var(--brycks-background-muted)',\n  primary: 'var(--brycks-primary-muted)',\n  success: 'var(--brycks-success-muted)',\n  warning: 'var(--brycks-warning-muted)',\n  error: 'var(--brycks-error-muted)',\n  info: 'var(--brycks-info-muted)',\n}\n\nexport const FormCard = forwardRef<HTMLDivElement, FormCardProps>(\n  function FormCard(\n    {\n      title,\n      icon,\n      iconIntent = 'primary',\n      headerExtra,\n      children,\n      className,\n      style,\n      testId,\n      ...props\n    },\n    ref\n  ) {\n    const cardStyle: CSSProperties = {\n      background: 'var(--brycks-background-card)',\n      borderRadius: 'var(--brycks-radius-lg)',\n      border: '1px solid var(--brycks-border-subtle)',\n      overflow: 'hidden',\n      ...style,\n    }\n\n    const headerStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '16px 20px',\n      borderBottom: '1px solid var(--brycks-border-subtle)',\n    }\n\n    const headerLeftStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 12,\n    }\n\n    const iconCircleStyle: CSSProperties = {\n      width: 32,\n      height: 32,\n      borderRadius: '50%',\n      background: intentColors[iconIntent],\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    }\n\n    const titleStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-md)',\n      fontWeight: 600,\n      color: 'var(--brycks-foreground-default)',\n      lineHeight: 1.4,\n      margin: 0,\n    }\n\n    const bodyStyle: CSSProperties = {\n      padding: 20,\n    }\n\n    const hasHeader = title || icon || headerExtra\n\n    return (\n      <div\n        ref={ref}\n        className={cx('brycks-form-card', className)}\n        style={cardStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {hasHeader && (\n          <div className=\"brycks-form-card__header\" style={headerStyle}>\n            <div style={headerLeftStyle}>\n              {icon && (\n                <div\n                  className=\"brycks-form-card__icon\"\n                  style={iconCircleStyle}\n                >\n                  {icon}\n                </div>\n              )}\n              {title && (\n                <h3 className=\"brycks-form-card__title\" style={titleStyle}>\n                  {title}\n                </h3>\n              )}\n            </div>\n            {headerExtra && (\n              <div className=\"brycks-form-card__header-extra\">\n                {headerExtra}\n              </div>\n            )}\n          </div>\n        )}\n\n        <div className=\"brycks-form-card__body\" style={bodyStyle}>\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\n\nFormCard.displayName = 'FormCard'\n"],"names":["intentColors","FormCard","forwardRef","title","icon","iconIntent","headerExtra","children","className","style","testId","props","ref","cardStyle","headerStyle","headerLeftStyle","iconCircleStyle","titleStyle","bodyStyle","hasHeader","jsxs","cx","jsx"],"mappings":";;;AAkCA,MAAMA,IAA+C;AAAA,EACnD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR,GAEaC,IAAWC;AAAA,EACtB,SACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAA2B;AAAA,MAC/B,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAGJ;AAAA,IAAA,GAGCK,IAA6B;AAAA,MACjC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,cAAc;AAAA,IAAA,GAGVC,IAAiC;AAAA,MACrC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,KAAK;AAAA,IAAA,GAGDC,IAAiC;AAAA,MACrC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,YAAYhB,EAAaK,CAAU;AAAA,MACnC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY;AAAA,IAAA,GAGRY,IAA4B;AAAA,MAChC,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QAAQ;AAAA,IAAA,GAGJC,IAA2B;AAAA,MAC/B,SAAS;AAAA,IAAA,GAGLC,IAAYhB,KAASC,KAAQE;AAEnC,WACE,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,WAAWS,EAAG,oBAAoBb,CAAS;AAAA,QAC3C,OAAOK;AAAA,QACP,eAAaH;AAAA,QACZ,GAAGC;AAAA,QAEH,UAAA;AAAA,UAAAQ,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BAA2B,OAAON,GAC/C,UAAA;AAAA,YAAA,gBAAAM,EAAC,OAAA,EAAI,OAAOL,GACT,UAAA;AAAA,cAAAX,KACC,gBAAAkB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAON;AAAA,kBAEN,UAAAZ;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJD,KACC,gBAAAmB,EAAC,MAAA,EAAG,WAAU,2BAA0B,OAAOL,GAC5C,UAAAd,EAAA,CACH;AAAA,YAAA,GAEJ;AAAA,YACCG,KACC,gBAAAgB,EAAC,OAAA,EAAI,WAAU,kCACZ,UAAAhB,EAAA,CACH;AAAA,UAAA,GAEJ;AAAA,4BAGD,OAAA,EAAI,WAAU,0BAAyB,OAAOY,GAC5C,UAAAX,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAN,EAAS,cAAc;"}

package/dist/components/form/FormField/FormField.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),C=require("react"),D=require("../../../utils/styles.cjs"),H=require("../../../hooks/useId.cjs"),N={sm:{labelSize:12,helperSize:11,gap:4},md:{labelSize:14,helperSize:12,gap:6},lg:{labelSize:16,helperSize:14,gap:8}},u=C.forwardRef(function({size:t="md",label:n,required:g=!1,helperText:o,error:e,isInvalid:p=!1,disabled:d=!1,fieldId:h,orientation:r="vertical",labelWidth:m=120,className:S,style:b,children:a,testId:v,...x},z){const k=H.useId("field"),i=h||k,c=`${i}-helper`,f=`${i}-error`,s=N[t],y=p||!!e,F={display:"flex",flexDirection:r==="horizontal"?"row":"column",gap:r==="horizontal"?16:s.gap,alignItems:r==="horizontal"?"flex-start":"stretch",opacity:d?.6:1,...b},j={display:"flex",alignItems:"baseline",gap:4,...r==="horizontal"&&{width:m,flexShrink:0,paddingTop:t==="lg"?14:t==="md"?10:8}},I={fontSize:s.labelSize,fontWeight:500,color:d?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",lineHeight:1.4},q={color:"var(--brycks-error-default)",marginLeft:2},$={display:"flex",flexDirection:"column",gap:s.gap,flex:1},w={fontSize:s.helperSize,color:y?"var(--brycks-error-default)":"var(--brycks-foreground-muted)",lineHeight:1.4},R={id:i,"aria-describedby":o||e?e?f:c:void 0,"aria-invalid":y?!0:void 0};return l.jsxs("div",{ref:z,className:D.cx("brycks-form-field",`brycks-form-field--${t}`,`brycks-form-field--${r}`,S),style:F,"data-testid":v,...x,children:[n&&l.jsx("div",{style:j,children:l.jsxs("label",{htmlFor:i,style:I,children:[n,g&&l.jsx("span",{style:q,"aria-hidden":"true",children:"*"})]})}),l.jsxs("div",{style:$,children:[typeof a=="function"?a(R):a,(o||e)&&l.jsx("span",{id:e?f:c,style:w,role:e?"alert":void 0,children:e||o})]})]})});u.displayName="FormField";exports.FormField=u;
+//# sourceMappingURL=FormField.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.cjs","sources":["../../../../src/components/form/FormField/FormField.tsx"],"sourcesContent":["/**\n * FormField Component\n *\n * A wrapper component that provides consistent structure for form inputs.\n * Includes label, required indicator, helper text, and error message.\n */\n\nimport { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type FormFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Field size */\n  size?: FormFieldSize\n  /** Field label */\n  label?: ReactNode\n  /** Whether the field is required */\n  required?: boolean\n  /** Helper text below the field */\n  helperText?: ReactNode\n  /** Error message (also sets invalid state) */\n  error?: ReactNode\n  /** Whether the field is invalid */\n  isInvalid?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Custom ID for the field (auto-generated if not provided) */\n  fieldId?: string\n  /** Field orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Label width for horizontal orientation */\n  labelWidth?: number | string\n  /** Custom class name */\n  className?: string\n  /** Children (form input) */\n  children: ReactNode | ((props: { id: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean }) => ReactNode)\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FormFieldSize, { labelSize: number; helperSize: number; gap: number }> = {\n  sm: { labelSize: 12, helperSize: 11, gap: 4 },\n  md: { labelSize: 14, helperSize: 12, gap: 6 },\n  lg: { labelSize: 16, helperSize: 14, gap: 8 },\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    size = 'md',\n    label,\n    required = false,\n    helperText,\n    error,\n    isInvalid = false,\n    disabled = false,\n    fieldId,\n    orientation = 'vertical',\n    labelWidth = 120,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId('field')\n  const id = fieldId || generatedId\n  const helperId = `${id}-helper`\n  const errorId = `${id}-error`\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 16 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    opacity: disabled ? 0.6 : 1,\n    ...style,\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: 4,\n    ...(orientation === 'horizontal' && {\n      width: labelWidth,\n      flexShrink: 0,\n      paddingTop: size === 'lg' ? 14 : size === 'md' ? 10 : 8,\n    }),\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const requiredStyle: CSSProperties = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: config.gap,\n    flex: 1,\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.helperSize,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  // Props to pass to the child input\n  const childProps = {\n    id,\n    'aria-describedby': helperText || error ? (error ? errorId : helperId) : undefined,\n    'aria-invalid': hasError ? true : undefined,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-form-field', `brycks-form-field--${size}`, `brycks-form-field--${orientation}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <div style={labelContainerStyle}>\n          <label htmlFor={id} style={labelStyle}>\n            {label}\n            {required && <span style={requiredStyle} aria-hidden=\"true\">*</span>}\n          </label>\n        </div>\n      )}\n      <div style={contentStyle}>\n        {typeof children === 'function' ? children(childProps) : children}\n        {(helperText || error) && (\n          <span\n            id={error ? errorId : helperId}\n            style={helperStyle}\n            role={error ? 'alert' : undefined}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n})\n\nFormField.displayName = 'FormField'\n"],"names":["sizeConfig","FormField","forwardRef","size","label","required","helperText","error","isInvalid","disabled","fieldId","orientation","labelWidth","className","style","children","testId","props","ref","generatedId","useId","id","helperId","errorId","config","hasError","containerStyle","labelContainerStyle","labelStyle","requiredStyle","contentStyle","helperStyle","childProps","jsxs","cx","jsx"],"mappings":"qNA0CMA,EAA4F,CAChG,GAAI,CAAE,UAAW,GAAI,WAAY,GAAI,IAAK,CAAA,EAC1C,GAAI,CAAE,UAAW,GAAI,WAAY,GAAI,IAAK,CAAA,EAC1C,GAAI,CAAE,UAAW,GAAI,WAAY,GAAI,IAAK,CAAA,CAC5C,EAEaC,EAAYC,EAAAA,WAA2C,SAClE,CACE,KAAAC,EAAO,KACP,MAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,QAAAC,EACA,YAAAC,EAAc,WACd,WAAAC,EAAa,IACb,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAM,OAAO,EAC3BC,EAAKX,GAAWS,EAChBG,EAAW,GAAGD,CAAE,UAChBE,EAAU,GAAGF,CAAE,SACfG,EAASxB,EAAWG,CAAI,EACxBsB,EAAWjB,GAAa,CAAC,CAACD,EAE1BmB,EAAgC,CACpC,QAAS,OACT,cAAef,IAAgB,aAAe,MAAQ,SACtD,IAAKA,IAAgB,aAAe,GAAKa,EAAO,IAChD,WAAYb,IAAgB,aAAe,aAAe,UAC1D,QAASF,EAAW,GAAM,EAC1B,GAAGK,CAAA,EAGCa,EAAqC,CACzC,QAAS,OACT,WAAY,WACZ,IAAK,EACL,GAAIhB,IAAgB,cAAgB,CAClC,MAAOC,EACP,WAAY,EACZ,WAAYT,IAAS,KAAO,GAAKA,IAAS,KAAO,GAAK,CAAA,CACxD,EAGIyB,EAA4B,CAChC,SAAUJ,EAAO,UACjB,WAAY,IACZ,MAAOf,EACH,iCACA,mCACJ,WAAY,GAAA,EAGRoB,EAA+B,CACnC,MAAO,8BACP,WAAY,CAAA,EAGRC,EAA8B,CAClC,QAAS,OACT,cAAe,SACf,IAAKN,EAAO,IACZ,KAAM,CAAA,EAGFO,EAA6B,CACjC,SAAUP,EAAO,WACjB,MAAOC,EAAW,8BAAgC,iCAClD,WAAY,GAAA,EAIRO,EAAa,CACjB,GAAAX,EACA,mBAAoBf,GAAcC,EAASA,EAAQgB,EAAUD,EAAY,OACzE,eAAgBG,EAAW,GAAO,MAAA,EAGpC,OACEQ,EAAAA,KAAC,MAAA,CACC,IAAAf,EACA,UAAWgB,EAAAA,GAAG,oBAAqB,sBAAsB/B,CAAI,GAAI,sBAAsBQ,CAAW,GAAIE,CAAS,EAC/G,MAAOa,EACP,cAAaV,EACZ,GAAGC,EAEH,SAAA,CAAAb,GACC+B,EAAAA,IAAC,OAAI,MAAOR,EACV,gBAAC,QAAA,CAAM,QAASN,EAAI,MAAOO,EACxB,SAAA,CAAAxB,EACAC,GAAY8B,EAAAA,IAAC,OAAA,CAAK,MAAON,EAAe,cAAY,OAAO,SAAA,GAAA,CAAC,CAAA,CAAA,CAC/D,CAAA,CACF,EAEFI,EAAAA,KAAC,MAAA,CAAI,MAAOH,EACT,SAAA,CAAA,OAAOf,GAAa,WAAaA,EAASiB,CAAU,EAAIjB,GACvDT,GAAcC,IACd4B,EAAAA,IAAC,OAAA,CACC,GAAI5B,EAAQgB,EAAUD,EACtB,MAAOS,EACP,KAAMxB,EAAQ,QAAU,OAEvB,SAAAA,GAASD,CAAA,CAAA,CACZ,CAAA,CAEJ,CAAA,CAAA,CAAA,CAGN,CAAC,EAEDL,EAAU,YAAc"}

package/dist/components/form/FormField/FormField.js

@@ -0,0 +1,97 @@
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { forwardRef as H } from "react";
+import { cx as N } from "../../../utils/styles.js";
+import { useId as q } from "../../../hooks/useId.js";
+const E = {
+  sm: { labelSize: 12, helperSize: 11, gap: 4 },
+  md: { labelSize: 14, helperSize: 12, gap: 6 },
+  lg: { labelSize: 16, helperSize: 14, gap: 8 }
+}, L = H(function({
+  size: r = "md",
+  label: d,
+  required: y = !1,
+  helperText: i,
+  error: e,
+  isInvalid: g = !1,
+  disabled: c = !1,
+  fieldId: h,
+  orientation: l = "vertical",
+  labelWidth: u = 120,
+  className: S,
+  style: b,
+  children: a,
+  testId: v,
+  ...z
+}, x) {
+  const k = q("field"), o = h || k, f = `${o}-helper`, p = `${o}-error`, t = E[r], m = g || !!e, F = {
+    display: "flex",
+    flexDirection: l === "horizontal" ? "row" : "column",
+    gap: l === "horizontal" ? 16 : t.gap,
+    alignItems: l === "horizontal" ? "flex-start" : "stretch",
+    opacity: c ? 0.6 : 1,
+    ...b
+  }, I = {
+    display: "flex",
+    alignItems: "baseline",
+    gap: 4,
+    ...l === "horizontal" && {
+      width: u,
+      flexShrink: 0,
+      paddingTop: r === "lg" ? 14 : r === "md" ? 10 : 8
+    }
+  }, $ = {
+    fontSize: t.labelSize,
+    fontWeight: 500,
+    color: c ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
+    lineHeight: 1.4
+  }, w = {
+    color: "var(--brycks-error-default)",
+    marginLeft: 2
+  }, j = {
+    display: "flex",
+    flexDirection: "column",
+    gap: t.gap,
+    flex: 1
+  }, C = {
+    fontSize: t.helperSize,
+    color: m ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)",
+    lineHeight: 1.4
+  }, D = {
+    id: o,
+    "aria-describedby": i || e ? e ? p : f : void 0,
+    "aria-invalid": m ? !0 : void 0
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: x,
+      className: N("brycks-form-field", `brycks-form-field--${r}`, `brycks-form-field--${l}`, S),
+      style: F,
+      "data-testid": v,
+      ...z,
+      children: [
+        d && /* @__PURE__ */ s("div", { style: I, children: /* @__PURE__ */ n("label", { htmlFor: o, style: $, children: [
+          d,
+          y && /* @__PURE__ */ s("span", { style: w, "aria-hidden": "true", children: "*" })
+        ] }) }),
+        /* @__PURE__ */ n("div", { style: j, children: [
+          typeof a == "function" ? a(D) : a,
+          (i || e) && /* @__PURE__ */ s(
+            "span",
+            {
+              id: e ? p : f,
+              style: C,
+              role: e ? "alert" : void 0,
+              children: e || i
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+L.displayName = "FormField";
+export {
+  L as FormField
+};
+//# sourceMappingURL=FormField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sources":["../../../../src/components/form/FormField/FormField.tsx"],"sourcesContent":["/**\n * FormField Component\n *\n * A wrapper component that provides consistent structure for form inputs.\n * Includes label, required indicator, helper text, and error message.\n */\n\nimport { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type FormFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Field size */\n  size?: FormFieldSize\n  /** Field label */\n  label?: ReactNode\n  /** Whether the field is required */\n  required?: boolean\n  /** Helper text below the field */\n  helperText?: ReactNode\n  /** Error message (also sets invalid state) */\n  error?: ReactNode\n  /** Whether the field is invalid */\n  isInvalid?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Custom ID for the field (auto-generated if not provided) */\n  fieldId?: string\n  /** Field orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Label width for horizontal orientation */\n  labelWidth?: number | string\n  /** Custom class name */\n  className?: string\n  /** Children (form input) */\n  children: ReactNode | ((props: { id: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean }) => ReactNode)\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FormFieldSize, { labelSize: number; helperSize: number; gap: number }> = {\n  sm: { labelSize: 12, helperSize: 11, gap: 4 },\n  md: { labelSize: 14, helperSize: 12, gap: 6 },\n  lg: { labelSize: 16, helperSize: 14, gap: 8 },\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    size = 'md',\n    label,\n    required = false,\n    helperText,\n    error,\n    isInvalid = false,\n    disabled = false,\n    fieldId,\n    orientation = 'vertical',\n    labelWidth = 120,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId('field')\n  const id = fieldId || generatedId\n  const helperId = `${id}-helper`\n  const errorId = `${id}-error`\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 16 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    opacity: disabled ? 0.6 : 1,\n    ...style,\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: 4,\n    ...(orientation === 'horizontal' && {\n      width: labelWidth,\n      flexShrink: 0,\n      paddingTop: size === 'lg' ? 14 : size === 'md' ? 10 : 8,\n    }),\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const requiredStyle: CSSProperties = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: config.gap,\n    flex: 1,\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.helperSize,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  // Props to pass to the child input\n  const childProps = {\n    id,\n    'aria-describedby': helperText || error ? (error ? errorId : helperId) : undefined,\n    'aria-invalid': hasError ? true : undefined,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-form-field', `brycks-form-field--${size}`, `brycks-form-field--${orientation}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <div style={labelContainerStyle}>\n          <label htmlFor={id} style={labelStyle}>\n            {label}\n            {required && <span style={requiredStyle} aria-hidden=\"true\">*</span>}\n          </label>\n        </div>\n      )}\n      <div style={contentStyle}>\n        {typeof children === 'function' ? children(childProps) : children}\n        {(helperText || error) && (\n          <span\n            id={error ? errorId : helperId}\n            style={helperStyle}\n            role={error ? 'alert' : undefined}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n})\n\nFormField.displayName = 'FormField'\n"],"names":["sizeConfig","FormField","forwardRef","size","label","required","helperText","error","isInvalid","disabled","fieldId","orientation","labelWidth","className","style","children","testId","props","ref","generatedId","useId","id","helperId","errorId","config","hasError","containerStyle","labelContainerStyle","labelStyle","requiredStyle","contentStyle","helperStyle","childProps","jsxs","cx","jsx"],"mappings":"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"}