@brycks/core-front 0.2.7 → 0.2.9

package/dist/components/form/FormGroup/FormGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),v=require("../../../utils/styles.cjs"),G=require("../FormLabel/FormLabel.cjs"),s=require("../../../design-system/tokens/spacing.cjs"),N={none:0,xs:s.spacing[.5],sm:s.spacing[1],md:s.spacing[1.5]},i=a.forwardRef(function({label:o,fieldId:l,labelSize:m="md",required:u,disabled:c,description:p,error:r,helperText:t,gap:d="sm",children:g,className:y,style:f,testId:b,...x},h){const k=a.useId(),F=l||k,S={display:"flex",flexDirection:"column",gap:N[d],...f},n={fontSize:"0.75rem",lineHeight:1.4,marginTop:s.spacing[.5]},j={...n,color:"var(--brycks-error-default)"},q={...n,color:"var(--brycks-foreground-muted)"};return e.jsxs("div",{ref:h,className:v.cx("brycks-form-group",!!r&&"brycks-form-group--error",!!c&&"brycks-form-group--disabled",y),style:S,"data-testid":b,...x,children:[o&&e.jsx(G.FormLabel,{htmlFor:F,size:m,required:u,disabled:c,description:p,children:o}),g,r&&e.jsx("span",{className:"brycks-form-group__error",style:j,role:"alert",children:r}),!r&&t&&e.jsx("span",{className:"brycks-form-group__helper",style:q,children:t})]})});i.displayName="FormGroup";exports.FormGroup=i;
+//# sourceMappingURL=FormGroup.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.cjs","sources":["../../../../src/components/form/FormGroup/FormGroup.tsx"],"sourcesContent":["/**\n * FormGroup Component\n *\n * A container component that groups a label with its form input.\n * Provides consistent spacing and layout for form fields.\n *\n * @module components/form/FormGroup\n */\n\nimport { forwardRef, type HTMLAttributes, type ReactNode, useId } from 'react'\nimport { spacing } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\nimport { FormLabel, type FormLabelSize } from '../FormLabel'\n\nexport type FormGroupGap = 'none' | 'xs' | 'sm' | 'md'\n\nexport interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Label text for the form field */\n  label?: ReactNode\n  /** Form field ID - auto-generated if not provided */\n  fieldId?: string\n  /** Label size */\n  labelSize?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text below the label */\n  description?: ReactNode\n  /** Error message to display */\n  error?: ReactNode\n  /** Helper text to display below the input */\n  helperText?: ReactNode\n  /** Gap between label and input */\n  gap?: FormGroupGap\n  /** Children (the form input) */\n  children: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst gapValues: Record<FormGroupGap, number> = {\n  none: 0,\n  xs: spacing[0.5],\n  sm: spacing[1],\n  md: spacing[1.5],\n}\n\nexport const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(function FormGroup(\n  {\n    label,\n    fieldId,\n    labelSize = 'md',\n    required,\n    disabled,\n    description,\n    error,\n    helperText,\n    gap = 'sm',\n    children,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId()\n  const id = fieldId || generatedId\n\n  const containerStyle = {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: gapValues[gap],\n    ...style,\n  }\n\n  const messageStyle = {\n    fontSize: '0.75rem',\n    lineHeight: 1.4,\n    marginTop: spacing[0.5],\n  }\n\n  const errorStyle = {\n    ...messageStyle,\n    color: 'var(--brycks-error-default)',\n  }\n\n  const helperStyle = {\n    ...messageStyle,\n    color: 'var(--brycks-foreground-muted)',\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-form-group',\n        !!error && 'brycks-form-group--error',\n        !!disabled && 'brycks-form-group--disabled',\n        className\n      )}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <FormLabel\n          htmlFor={id}\n          size={labelSize}\n          required={required}\n          disabled={disabled}\n          description={description}\n        >\n          {label}\n        </FormLabel>\n      )}\n      {children}\n      {error && (\n        <span className=\"brycks-form-group__error\" style={errorStyle} role=\"alert\">\n          {error}\n        </span>\n      )}\n      {!error && helperText && (\n        <span className=\"brycks-form-group__helper\" style={helperStyle}>\n          {helperText}\n        </span>\n      )}\n    </div>\n  )\n})\n\nFormGroup.displayName = 'FormGroup'\n"],"names":["gapValues","spacing","FormGroup","forwardRef","label","fieldId","labelSize","required","disabled","description","error","helperText","gap","children","className","style","testId","props","ref","generatedId","useId","id","containerStyle","messageStyle","errorStyle","helperStyle","jsxs","cx","jsx","FormLabel"],"mappings":"8QA2CMA,EAA0C,CAC9C,KAAM,EACN,GAAIC,EAAAA,QAAQ,EAAG,EACf,GAAIA,EAAAA,QAAQ,CAAC,EACb,GAAIA,EAAAA,QAAQ,GAAG,CACjB,EAEaC,EAAYC,EAAAA,WAA2C,SAClE,CACE,MAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,KACZ,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,MAAAC,EACA,WAAAC,EACA,IAAAC,EAAM,KACN,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKhB,GAAWc,EAEhBG,EAAiB,CACrB,QAAS,OACT,cAAe,SACf,IAAKtB,EAAUY,CAAG,EAClB,GAAGG,CAAA,EAGCQ,EAAe,CACnB,SAAU,UACV,WAAY,IACZ,UAAWtB,EAAAA,QAAQ,EAAG,CAAA,EAGlBuB,EAAa,CACjB,GAAGD,EACH,MAAO,6BAAA,EAGHE,EAAc,CAClB,GAAGF,EACH,MAAO,gCAAA,EAGT,OACEG,EAAAA,KAAC,MAAA,CACC,IAAAR,EACA,UAAWS,EAAAA,GACT,oBACA,CAAC,CAACjB,GAAS,2BACX,CAAC,CAACF,GAAY,8BACdM,CAAA,EAEF,MAAOQ,EACP,cAAaN,EACZ,GAAGC,EAEH,SAAA,CAAAb,GACCwB,EAAAA,IAACC,EAAAA,UAAA,CACC,QAASR,EACT,KAAMf,EACN,SAAAC,EACA,SAAAC,EACA,YAAAC,EAEC,SAAAL,CAAA,CAAA,EAGJS,EACAH,SACE,OAAA,CAAK,UAAU,2BAA2B,MAAOc,EAAY,KAAK,QAChE,SAAAd,CAAA,CACH,EAED,CAACA,GAASC,GACTiB,EAAAA,IAAC,QAAK,UAAU,4BAA4B,MAAOH,EAChD,SAAAd,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDT,EAAU,YAAc"}

package/dist/components/form/FormGroup/FormGroup.js

@@ -0,0 +1,79 @@
+import { jsxs as N, jsx as e } from "react/jsx-runtime";
+import { forwardRef as _, useId as v } from "react";
+import { cx as G } from "../../../utils/styles.js";
+import { FormLabel as j } from "../FormLabel/FormLabel.js";
+import { spacing as o } from "../../../design-system/tokens/spacing.js";
+const z = {
+  none: 0,
+  xs: o[0.5],
+  sm: o[1],
+  md: o[1.5]
+}, I = _(function({
+  label: s,
+  fieldId: n,
+  labelSize: l = "md",
+  required: a,
+  disabled: t,
+  description: i,
+  error: r,
+  helperText: m,
+  gap: p = "sm",
+  children: d,
+  className: f,
+  style: u,
+  testId: y,
+  ...g
+}, b) {
+  const h = v(), k = n || h, x = {
+    display: "flex",
+    flexDirection: "column",
+    gap: z[p],
+    ...u
+  }, c = {
+    fontSize: "0.75rem",
+    lineHeight: 1.4,
+    marginTop: o[0.5]
+  }, F = {
+    ...c,
+    color: "var(--brycks-error-default)"
+  }, S = {
+    ...c,
+    color: "var(--brycks-foreground-muted)"
+  };
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      ref: b,
+      className: G(
+        "brycks-form-group",
+        !!r && "brycks-form-group--error",
+        !!t && "brycks-form-group--disabled",
+        f
+      ),
+      style: x,
+      "data-testid": y,
+      ...g,
+      children: [
+        s && /* @__PURE__ */ e(
+          j,
+          {
+            htmlFor: k,
+            size: l,
+            required: a,
+            disabled: t,
+            description: i,
+            children: s
+          }
+        ),
+        d,
+        r && /* @__PURE__ */ e("span", { className: "brycks-form-group__error", style: F, role: "alert", children: r }),
+        !r && m && /* @__PURE__ */ e("span", { className: "brycks-form-group__helper", style: S, children: m })
+      ]
+    }
+  );
+});
+I.displayName = "FormGroup";
+export {
+  I as FormGroup
+};
+//# sourceMappingURL=FormGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sources":["../../../../src/components/form/FormGroup/FormGroup.tsx"],"sourcesContent":["/**\n * FormGroup Component\n *\n * A container component that groups a label with its form input.\n * Provides consistent spacing and layout for form fields.\n *\n * @module components/form/FormGroup\n */\n\nimport { forwardRef, type HTMLAttributes, type ReactNode, useId } from 'react'\nimport { spacing } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\nimport { FormLabel, type FormLabelSize } from '../FormLabel'\n\nexport type FormGroupGap = 'none' | 'xs' | 'sm' | 'md'\n\nexport interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Label text for the form field */\n  label?: ReactNode\n  /** Form field ID - auto-generated if not provided */\n  fieldId?: string\n  /** Label size */\n  labelSize?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text below the label */\n  description?: ReactNode\n  /** Error message to display */\n  error?: ReactNode\n  /** Helper text to display below the input */\n  helperText?: ReactNode\n  /** Gap between label and input */\n  gap?: FormGroupGap\n  /** Children (the form input) */\n  children: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst gapValues: Record<FormGroupGap, number> = {\n  none: 0,\n  xs: spacing[0.5],\n  sm: spacing[1],\n  md: spacing[1.5],\n}\n\nexport const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(function FormGroup(\n  {\n    label,\n    fieldId,\n    labelSize = 'md',\n    required,\n    disabled,\n    description,\n    error,\n    helperText,\n    gap = 'sm',\n    children,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId()\n  const id = fieldId || generatedId\n\n  const containerStyle = {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: gapValues[gap],\n    ...style,\n  }\n\n  const messageStyle = {\n    fontSize: '0.75rem',\n    lineHeight: 1.4,\n    marginTop: spacing[0.5],\n  }\n\n  const errorStyle = {\n    ...messageStyle,\n    color: 'var(--brycks-error-default)',\n  }\n\n  const helperStyle = {\n    ...messageStyle,\n    color: 'var(--brycks-foreground-muted)',\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-form-group',\n        !!error && 'brycks-form-group--error',\n        !!disabled && 'brycks-form-group--disabled',\n        className\n      )}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <FormLabel\n          htmlFor={id}\n          size={labelSize}\n          required={required}\n          disabled={disabled}\n          description={description}\n        >\n          {label}\n        </FormLabel>\n      )}\n      {children}\n      {error && (\n        <span className=\"brycks-form-group__error\" style={errorStyle} role=\"alert\">\n          {error}\n        </span>\n      )}\n      {!error && helperText && (\n        <span className=\"brycks-form-group__helper\" style={helperStyle}>\n          {helperText}\n        </span>\n      )}\n    </div>\n  )\n})\n\nFormGroup.displayName = 'FormGroup'\n"],"names":["gapValues","spacing","FormGroup","forwardRef","label","fieldId","labelSize","required","disabled","description","error","helperText","gap","children","className","style","testId","props","ref","generatedId","useId","id","containerStyle","messageStyle","errorStyle","helperStyle","jsxs","cx","jsx","FormLabel"],"mappings":";;;;;AA2CA,MAAMA,IAA0C;AAAA,EAC9C,MAAM;AAAA,EACN,IAAIC,EAAQ,GAAG;AAAA,EACf,IAAIA,EAAQ,CAAC;AAAA,EACb,IAAIA,EAAQ,GAAG;AACjB,GAEaC,IAAYC,EAA2C,SAClE;AAAA,EACE,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAcC,EAAA,GACdC,IAAKhB,KAAWc,GAEhBG,IAAiB;AAAA,IACrB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAKtB,EAAUY,CAAG;AAAA,IAClB,GAAGG;AAAA,EAAA,GAGCQ,IAAe;AAAA,IACnB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAWtB,EAAQ,GAAG;AAAA,EAAA,GAGlBuB,IAAa;AAAA,IACjB,GAAGD;AAAA,IACH,OAAO;AAAA,EAAA,GAGHE,IAAc;AAAA,IAClB,GAAGF;AAAA,IACH,OAAO;AAAA,EAAA;AAGT,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,WAAWS;AAAA,QACT;AAAA,QACA,CAAC,CAACjB,KAAS;AAAA,QACX,CAAC,CAACF,KAAY;AAAA,QACdM;AAAA,MAAA;AAAA,MAEF,OAAOQ;AAAA,MACP,eAAaN;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAb,KACC,gBAAAwB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAASR;AAAA,YACT,MAAMf;AAAA,YACN,UAAAC;AAAA,YACA,UAAAC;AAAA,YACA,aAAAC;AAAA,YAEC,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJS;AAAA,QACAH,uBACE,QAAA,EAAK,WAAU,4BAA2B,OAAOc,GAAY,MAAK,SAChE,UAAAd,EAAA,CACH;AAAA,QAED,CAACA,KAASC,KACT,gBAAAiB,EAAC,UAAK,WAAU,6BAA4B,OAAOH,GAChD,UAAAd,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDT,EAAU,cAAc;"}

package/dist/components/form/FormLabel/FormLabel.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),S=require("../../../utils/styles.cjs"),t=require("../../../design-system/tokens/spacing.cjs"),r=require("../../../design-system/tokens/typography.cjs"),h={sm:{fontSize:"var(--brycks-fs-ui-xs)"},md:{fontSize:"var(--brycks-fs-ui-sm)"},lg:{fontSize:"var(--brycks-fs-ui-md)"}},a=p.forwardRef(function({children:i,size:o="md",required:n,disabled:s,description:l,className:c,style:f,testId:y,...m},b){const u=h[o],d={display:"block",fontFamily:r.textStyles.label.fontFamily,fontSize:u.fontSize,fontWeight:r.fontWeights.medium,lineHeight:r.textStyles.label.lineHeight,color:s?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",cursor:s?"not-allowed":"pointer",marginBottom:t.spacing[1],...f},g={color:"var(--brycks-error-default)",marginLeft:t.spacing[.5]},k={display:"block",fontSize:"var(--brycks-fs-ui-xs)",fontWeight:r.fontWeights.regular,color:"var(--brycks-foreground-muted)",marginTop:t.spacing[.5]};return e.jsxs("label",{ref:b,className:S.cx("brycks-form-label",`brycks-form-label--${o}`,s&&"brycks-form-label--disabled",c),style:d,"data-testid":y,...m,children:[e.jsxs("span",{className:"brycks-form-label__text",children:[i,n&&e.jsx("span",{className:"brycks-form-label__required",style:g,"aria-hidden":"true",children:"*"})]}),l&&e.jsx("span",{className:"brycks-form-label__description",style:k,children:l})]})});a.displayName="FormLabel";exports.FormLabel=a;
+//# sourceMappingURL=FormLabel.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.cjs","sources":["../../../../src/components/form/FormLabel/FormLabel.tsx"],"sourcesContent":["/**\n * FormLabel Component\n *\n * A semantic label component for form fields with consistent styling.\n * Supports required indicator and description text.\n * Uses CSS variables for font sizes to enable dynamic scaling.\n *\n * @module components/form/FormLabel\n */\n\nimport { forwardRef, type LabelHTMLAttributes, type ReactNode } from 'react'\nimport { textStyles, spacing, fontWeights } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormLabelSize = 'sm' | 'md' | 'lg'\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Label text */\n  children: ReactNode\n  /** Label size */\n  size?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text */\n  description?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\n/**\n * Maps FormLabel sizes to CSS variables\n * Uses --brycks-fs-ui-* for UI elements\n */\nconst sizeStyles: Record<FormLabelSize, { fontSize: string }> = {\n  sm: { fontSize: 'var(--brycks-fs-ui-xs)' },\n  md: { fontSize: 'var(--brycks-fs-ui-sm)' },\n  lg: { fontSize: 'var(--brycks-fs-ui-md)' },\n}\n\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(function FormLabel(\n  {\n    children,\n    size = 'md',\n    required,\n    disabled,\n    description,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeStyles[size]\n\n  const labelStyle = {\n    display: 'block',\n    fontFamily: textStyles.label.fontFamily,\n    fontSize: config.fontSize,\n    fontWeight: fontWeights.medium,\n    lineHeight: textStyles.label.lineHeight,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    marginBottom: spacing[1],\n    ...style,\n  }\n\n  const requiredStyle = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: spacing[0.5],\n  }\n\n  const descriptionStyle = {\n    display: 'block',\n    fontSize: 'var(--brycks-fs-ui-xs)',\n    fontWeight: fontWeights.regular,\n    color: 'var(--brycks-foreground-muted)',\n    marginTop: spacing[0.5],\n  }\n\n  return (\n    <label\n      ref={ref}\n      className={cx(\n        'brycks-form-label',\n        `brycks-form-label--${size}`,\n        disabled && 'brycks-form-label--disabled',\n        className\n      )}\n      style={labelStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"brycks-form-label__text\">\n        {children}\n        {required && (\n          <span className=\"brycks-form-label__required\" style={requiredStyle} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span className=\"brycks-form-label__description\" style={descriptionStyle}>\n          {description}\n        </span>\n      )}\n    </label>\n  )\n})\n\nFormLabel.displayName = 'FormLabel'\n"],"names":["sizeStyles","FormLabel","forwardRef","children","size","required","disabled","description","className","style","testId","props","ref","config","labelStyle","textStyles","fontWeights","spacing","requiredStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":"gSAqCMA,EAA0D,CAC9D,GAAI,CAAE,SAAU,wBAAA,EAChB,GAAI,CAAE,SAAU,wBAAA,EAChB,GAAI,CAAE,SAAU,wBAAA,CAClB,EAEaC,EAAYC,EAAAA,WAA6C,SACpE,CACE,SAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAASb,EAAWI,CAAI,EAExBU,EAAa,CACjB,QAAS,QACT,WAAYC,EAAAA,WAAW,MAAM,WAC7B,SAAUF,EAAO,SACjB,WAAYG,EAAAA,YAAY,OACxB,WAAYD,EAAAA,WAAW,MAAM,WAC7B,MAAOT,EAAW,iCAAmC,mCACrD,OAAQA,EAAW,cAAgB,UACnC,aAAcW,EAAAA,QAAQ,CAAC,EACvB,GAAGR,CAAA,EAGCS,EAAgB,CACpB,MAAO,8BACP,WAAYD,EAAAA,QAAQ,EAAG,CAAA,EAGnBE,EAAmB,CACvB,QAAS,QACT,SAAU,yBACV,WAAYH,EAAAA,YAAY,QACxB,MAAO,iCACP,UAAWC,EAAAA,QAAQ,EAAG,CAAA,EAGxB,OACEG,EAAAA,KAAC,QAAA,CACC,IAAAR,EACA,UAAWS,EAAAA,GACT,oBACA,sBAAsBjB,CAAI,GAC1BE,GAAY,8BACZE,CAAA,EAEF,MAAOM,EACP,cAAaJ,EACZ,GAAGC,EAEJ,SAAA,CAAAS,EAAAA,KAAC,OAAA,CAAK,UAAU,0BACb,SAAA,CAAAjB,EACAE,SACE,OAAA,CAAK,UAAU,8BAA8B,MAAOa,EAAe,cAAY,OAAO,SAAA,GAAA,CAEvF,CAAA,EAEJ,EACCX,GACCe,EAAAA,IAAC,OAAA,CAAK,UAAU,iCAAiC,MAAOH,EACrD,SAAAZ,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDN,EAAU,YAAc"}

package/dist/components/form/FormLabel/FormLabel.js

@@ -0,0 +1,68 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { cx as h } from "../../../utils/styles.js";
+import { spacing as e } from "../../../design-system/tokens/spacing.js";
+import { textStyles as a, fontWeights as i } from "../../../design-system/tokens/typography.js";
+const v = {
+  sm: { fontSize: "var(--brycks-fs-ui-xs)" },
+  md: { fontSize: "var(--brycks-fs-ui-sm)" },
+  lg: { fontSize: "var(--brycks-fs-ui-md)" }
+}, x = S(function({
+  children: n,
+  size: o = "md",
+  required: c,
+  disabled: r,
+  description: l,
+  className: m,
+  style: f,
+  testId: b,
+  ...y
+}, d) {
+  const u = v[o], k = {
+    display: "block",
+    fontFamily: a.label.fontFamily,
+    fontSize: u.fontSize,
+    fontWeight: i.medium,
+    lineHeight: a.label.lineHeight,
+    color: r ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
+    cursor: r ? "not-allowed" : "pointer",
+    marginBottom: e[1],
+    ...f
+  }, p = {
+    color: "var(--brycks-error-default)",
+    marginLeft: e[0.5]
+  }, g = {
+    display: "block",
+    fontSize: "var(--brycks-fs-ui-xs)",
+    fontWeight: i.regular,
+    color: "var(--brycks-foreground-muted)",
+    marginTop: e[0.5]
+  };
+  return /* @__PURE__ */ t(
+    "label",
+    {
+      ref: d,
+      className: h(
+        "brycks-form-label",
+        `brycks-form-label--${o}`,
+        r && "brycks-form-label--disabled",
+        m
+      ),
+      style: k,
+      "data-testid": b,
+      ...y,
+      children: [
+        /* @__PURE__ */ t("span", { className: "brycks-form-label__text", children: [
+          n,
+          c && /* @__PURE__ */ s("span", { className: "brycks-form-label__required", style: p, "aria-hidden": "true", children: "*" })
+        ] }),
+        l && /* @__PURE__ */ s("span", { className: "brycks-form-label__description", style: g, children: l })
+      ]
+    }
+  );
+});
+x.displayName = "FormLabel";
+export {
+  x as FormLabel
+};
+//# sourceMappingURL=FormLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/form/FormLabel/FormLabel.tsx"],"sourcesContent":["/**\n * FormLabel Component\n *\n * A semantic label component for form fields with consistent styling.\n * Supports required indicator and description text.\n * Uses CSS variables for font sizes to enable dynamic scaling.\n *\n * @module components/form/FormLabel\n */\n\nimport { forwardRef, type LabelHTMLAttributes, type ReactNode } from 'react'\nimport { textStyles, spacing, fontWeights } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormLabelSize = 'sm' | 'md' | 'lg'\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Label text */\n  children: ReactNode\n  /** Label size */\n  size?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text */\n  description?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\n/**\n * Maps FormLabel sizes to CSS variables\n * Uses --brycks-fs-ui-* for UI elements\n */\nconst sizeStyles: Record<FormLabelSize, { fontSize: string }> = {\n  sm: { fontSize: 'var(--brycks-fs-ui-xs)' },\n  md: { fontSize: 'var(--brycks-fs-ui-sm)' },\n  lg: { fontSize: 'var(--brycks-fs-ui-md)' },\n}\n\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(function FormLabel(\n  {\n    children,\n    size = 'md',\n    required,\n    disabled,\n    description,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeStyles[size]\n\n  const labelStyle = {\n    display: 'block',\n    fontFamily: textStyles.label.fontFamily,\n    fontSize: config.fontSize,\n    fontWeight: fontWeights.medium,\n    lineHeight: textStyles.label.lineHeight,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    marginBottom: spacing[1],\n    ...style,\n  }\n\n  const requiredStyle = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: spacing[0.5],\n  }\n\n  const descriptionStyle = {\n    display: 'block',\n    fontSize: 'var(--brycks-fs-ui-xs)',\n    fontWeight: fontWeights.regular,\n    color: 'var(--brycks-foreground-muted)',\n    marginTop: spacing[0.5],\n  }\n\n  return (\n    <label\n      ref={ref}\n      className={cx(\n        'brycks-form-label',\n        `brycks-form-label--${size}`,\n        disabled && 'brycks-form-label--disabled',\n        className\n      )}\n      style={labelStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"brycks-form-label__text\">\n        {children}\n        {required && (\n          <span className=\"brycks-form-label__required\" style={requiredStyle} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span className=\"brycks-form-label__description\" style={descriptionStyle}>\n          {description}\n        </span>\n      )}\n    </label>\n  )\n})\n\nFormLabel.displayName = 'FormLabel'\n"],"names":["sizeStyles","FormLabel","forwardRef","children","size","required","disabled","description","className","style","testId","props","ref","config","labelStyle","textStyles","fontWeights","spacing","requiredStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":";;;;;AAqCA,MAAMA,IAA0D;AAAA,EAC9D,IAAI,EAAE,UAAU,yBAAA;AAAA,EAChB,IAAI,EAAE,UAAU,yBAAA;AAAA,EAChB,IAAI,EAAE,UAAU,yBAAA;AAClB,GAEaC,IAAYC,EAA6C,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASb,EAAWI,CAAI,GAExBU,IAAa;AAAA,IACjB,SAAS;AAAA,IACT,YAAYC,EAAW,MAAM;AAAA,IAC7B,UAAUF,EAAO;AAAA,IACjB,YAAYG,EAAY;AAAA,IACxB,YAAYD,EAAW,MAAM;AAAA,IAC7B,OAAOT,IAAW,mCAAmC;AAAA,IACrD,QAAQA,IAAW,gBAAgB;AAAA,IACnC,cAAcW,EAAQ,CAAC;AAAA,IACvB,GAAGR;AAAA,EAAA,GAGCS,IAAgB;AAAA,IACpB,OAAO;AAAA,IACP,YAAYD,EAAQ,GAAG;AAAA,EAAA,GAGnBE,IAAmB;AAAA,IACvB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAYH,EAAY;AAAA,IACxB,OAAO;AAAA,IACP,WAAWC,EAAQ,GAAG;AAAA,EAAA;AAGxB,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,WAAWS;AAAA,QACT;AAAA,QACA,sBAAsBjB,CAAI;AAAA,QAC1BE,KAAY;AAAA,QACZE;AAAA,MAAA;AAAA,MAEF,OAAOM;AAAA,MACP,eAAaJ;AAAA,MACZ,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,UAAAjB;AAAA,UACAE,uBACE,QAAA,EAAK,WAAU,+BAA8B,OAAOa,GAAe,eAAY,QAAO,UAAA,IAAA,CAEvF;AAAA,QAAA,GAEJ;AAAA,QACCX,KACC,gBAAAe,EAAC,QAAA,EAAK,WAAU,kCAAiC,OAAOH,GACrD,UAAAZ,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDN,EAAU,cAAc;"}

package/dist/components/form/Input/Input.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),F=require("../../../utils/styles.cjs"),d=require("../../../design-system/primitives/typography.cjs"),u=require("../../../design-system/primitives/focus.cjs"),t=require("../../../design-system/primitives/sizing.cjs"),f=require("../../../design-system/primitives/transitions.cjs"),C=require("../../../design-system/primitives/opacity.cjs"),O={sm:{height:t.componentHeights.sm,fontSize:d.componentFontSize.sm,paddingX:t.componentPaddingX.sm,radius:"var(--brycks-radius-md)"},md:{height:t.componentHeights.md,fontSize:d.componentFontSize.md,paddingX:t.componentPaddingX.md,radius:"var(--brycks-radius-default)"},lg:{height:t.componentHeights.lg,fontSize:d.componentFontSize.lg,paddingX:t.componentPaddingX.lg,radius:"var(--brycks-radius-lg)"}},m=y.forwardRef(function({size:p="md",variant:l="outline",isInvalid:n,leftElement:i,rightElement:c,className:k,style:h,testId:S,disabled:o,onFocus:v,onBlur:x,...w},j){const[s,g]=y.useState(!1),r=O[p],R=()=>{const e={display:"flex",alignItems:"center",width:"100%",position:"relative",height:r.height,borderRadius:r.radius,transition:f.transition.default};switch(l){case"outline":Object.assign(e,{backgroundColor:"var(--brycks-background-app)",border:`1px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,boxShadow:s?n?u.focusRing.error:u.focusRing.default:u.focusRing.none});break;case"filled":Object.assign(e,{backgroundColor:"var(--brycks-background-muted)",border:"1px solid transparent",borderColor:n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"transparent"});break;case"flushed":Object.assign(e,{backgroundColor:"transparent",borderRadius:0,borderBottom:`2px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`});break}return o&&Object.assign(e,{opacity:C.stateOpacity.disabled,cursor:"not-allowed"}),e},X={width:"100%",height:r.height,fontFamily:"var(--brycks-font-sans)",fontSize:r.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none",borderRadius:r.radius,paddingLeft:i?t.componentGap.md:r.paddingX,paddingRight:c?t.componentGap.md:r.paddingX,cursor:o?"not-allowed":"text",transition:f.transition.default},z=e=>{g(!0),v?.(e)},q=e=>{g(!1),x?.(e)},b={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",flexShrink:0};return a.jsxs("div",{className:F.cx("brycks-input-wrapper",`brycks-input-wrapper--${l}`,`brycks-input-wrapper--${p}`,n&&"brycks-input-wrapper--invalid",o&&"brycks-input-wrapper--disabled",k),style:{...R(),...h},children:[i&&a.jsx("span",{className:"brycks-input-left-element",style:{...b,paddingLeft:r.paddingX},children:i}),a.jsx("input",{ref:j,className:"brycks-input",style:X,disabled:o,"aria-invalid":n,"data-testid":S,onFocus:z,onBlur:q,...w}),c&&a.jsx("span",{className:"brycks-input-right-element",style:{...b,paddingRight:r.paddingX},children:c})]})});m.displayName="Input";exports.Input=m;
+//# sourceMappingURL=Input.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.cjs","sources":["../../../../src/components/form/Input/Input.tsx"],"sourcesContent":["/**\r\n * Input Component\r\n *\r\n * Base input component with Apple-inspired styling.\r\n * Clean, minimal design with smooth focus transitions.\r\n *\r\n * @module components/form/Input\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  componentHeights,\r\n  componentPaddingX,\r\n  componentGap,\r\n  componentFontSize,\r\n  focusRing,\r\n  transition,\r\n  stateOpacity,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type InputSize = 'sm' | 'md' | 'lg'\r\nexport type InputVariant = 'outline' | 'filled' | 'flushed'\r\n\r\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\r\n  /** Input size */\r\n  size?: InputSize\r\n  /** Visual variant */\r\n  variant?: InputVariant\r\n  /** Error state */\r\n  isInvalid?: boolean\r\n  /** Left element/icon */\r\n  leftElement?: ReactNode\r\n  /** Right element/icon */\r\n  rightElement?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\n/** Size configuration derived from design tokens */\r\nconst sizeConfig: Record<InputSize, { height: number; fontSize: number; paddingX: number; radius: string }> = {\r\n  sm: {\r\n    height: componentHeights.sm,\r\n    fontSize: componentFontSize.sm,\r\n    paddingX: componentPaddingX.sm,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  md: {\r\n    height: componentHeights.md,\r\n    fontSize: componentFontSize.md,\r\n    paddingX: componentPaddingX.md,\r\n    radius: 'var(--brycks-radius-default)',\r\n  },\r\n  lg: {\r\n    height: componentHeights.lg,\r\n    fontSize: componentFontSize.lg,\r\n    paddingX: componentPaddingX.lg,\r\n    radius: 'var(--brycks-radius-lg)',\r\n  },\r\n}\r\n\r\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\r\n  {\r\n    size = 'md',\r\n    variant = 'outline',\r\n    isInvalid,\r\n    leftElement,\r\n    rightElement,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    onFocus,\r\n    onBlur,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n\r\n  const config = sizeConfig[size]\r\n\r\n  const getWrapperStyles = (): CSSProperties => {\r\n    const base: CSSProperties = {\r\n      display: 'flex',\r\n      alignItems: 'center',\r\n      width: '100%',\r\n      position: 'relative',\r\n      height: config.height,\r\n      borderRadius: config.radius,\r\n      transition: transition.default,\r\n    }\r\n\r\n    switch (variant) {\r\n      case 'outline':\r\n        Object.assign(base, {\r\n          backgroundColor: 'var(--brycks-background-app)',\r\n          border: `1px solid ${\r\n            isInvalid\r\n              ? 'var(--brycks-error-default)'\r\n              : isFocused\r\n                ? 'var(--brycks-border-focus)'\r\n                : 'var(--brycks-border-default)'\r\n          }`,\r\n          boxShadow: isFocused\r\n            ? isInvalid\r\n              ? focusRing.error\r\n              : focusRing.default\r\n            : focusRing.none,\r\n        })\r\n        break\r\n\r\n      case 'filled':\r\n        Object.assign(base, {\r\n          backgroundColor: 'var(--brycks-background-muted)',\r\n          border: '1px solid transparent',\r\n          borderColor: isInvalid\r\n            ? 'var(--brycks-error-default)'\r\n            : isFocused\r\n              ? 'var(--brycks-border-focus)'\r\n              : 'transparent',\r\n        })\r\n        break\r\n\r\n      case 'flushed':\r\n        Object.assign(base, {\r\n          backgroundColor: 'transparent',\r\n          borderRadius: 0,\r\n          borderBottom: `2px solid ${\r\n            isInvalid\r\n              ? 'var(--brycks-error-default)'\r\n              : isFocused\r\n                ? 'var(--brycks-border-focus)'\r\n                : 'var(--brycks-border-default)'\r\n          }`,\r\n        })\r\n        break\r\n    }\r\n\r\n    if (disabled) {\r\n      Object.assign(base, {\r\n        opacity: stateOpacity.disabled,\r\n        cursor: 'not-allowed',\r\n      })\r\n    }\r\n\r\n    return base\r\n  }\r\n\r\n  const inputStyles: CSSProperties = {\r\n    width: '100%',\r\n    height: config.height,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    fontSize: config.fontSize,\r\n    color: 'var(--brycks-foreground-default)',\r\n    backgroundColor: 'transparent',\r\n    border: 'none',\r\n    outline: 'none',\r\n    borderRadius: config.radius,\r\n    paddingLeft: leftElement ? componentGap.md : config.paddingX,\r\n    paddingRight: rightElement ? componentGap.md : config.paddingX,\r\n    cursor: disabled ? 'not-allowed' : 'text',\r\n    transition: transition.default,\r\n  }\r\n\r\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\r\n    setIsFocused(true)\r\n    onFocus?.(e)\r\n  }\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\r\n    setIsFocused(false)\r\n    onBlur?.(e)\r\n  }\r\n\r\n  const elementStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    flexShrink: 0,\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-input-wrapper',\r\n        `brycks-input-wrapper--${variant}`,\r\n        `brycks-input-wrapper--${size}`,\r\n        isInvalid && 'brycks-input-wrapper--invalid',\r\n        disabled && 'brycks-input-wrapper--disabled',\r\n        className\r\n      )}\r\n      style={{ ...getWrapperStyles(), ...style }}\r\n    >\r\n      {leftElement && (\r\n        <span\r\n          className=\"brycks-input-left-element\"\r\n          style={{ ...elementStyle, paddingLeft: config.paddingX }}\r\n        >\r\n          {leftElement}\r\n        </span>\r\n      )}\r\n\r\n      <input\r\n        ref={ref}\r\n        className=\"brycks-input\"\r\n        style={inputStyles}\r\n        disabled={disabled}\r\n        aria-invalid={isInvalid}\r\n        data-testid={testId}\r\n        onFocus={handleFocus}\r\n        onBlur={handleBlur}\r\n        {...props}\r\n      />\r\n\r\n      {rightElement && (\r\n        <span\r\n          className=\"brycks-input-right-element\"\r\n          style={{ ...elementStyle, paddingRight: config.paddingX }}\r\n        >\r\n          {rightElement}\r\n        </span>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nInput.displayName = 'Input'\r\n"],"names":["sizeConfig","componentHeights","componentFontSize","componentPaddingX","Input","forwardRef","size","variant","isInvalid","leftElement","rightElement","className","style","testId","disabled","onFocus","onBlur","props","ref","isFocused","setIsFocused","useState","config","getWrapperStyles","base","transition","focusRing","stateOpacity","inputStyles","componentGap","handleFocus","handleBlur","elementStyle","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/form/Input/Input.js

@@ -0,0 +1,155 @@
+import { jsxs as F, jsx as d } from "react/jsx-runtime";
+import { forwardRef as N, useState as O } from "react";
+import { cx as $ } from "../../../utils/styles.js";
+import { componentFontSize as i } from "../../../design-system/primitives/typography.js";
+import { focusRing as c } from "../../../design-system/primitives/focus.js";
+import { componentPaddingX as p, componentHeights as u, componentGap as m } from "../../../design-system/primitives/sizing.js";
+import { transition as y } from "../../../design-system/primitives/transitions.js";
+import { stateOpacity as B } from "../../../design-system/primitives/opacity.js";
+const L = {
+  sm: {
+    height: u.sm,
+    fontSize: i.sm,
+    paddingX: p.sm,
+    radius: "var(--brycks-radius-md)"
+  },
+  md: {
+    height: u.md,
+    fontSize: i.md,
+    paddingX: p.md,
+    radius: "var(--brycks-radius-default)"
+  },
+  lg: {
+    height: u.lg,
+    fontSize: i.lg,
+    paddingX: p.lg,
+    radius: "var(--brycks-radius-lg)"
+  }
+}, G = N(function({
+  size: l = "md",
+  variant: b = "outline",
+  isInvalid: t,
+  leftElement: s,
+  rightElement: n,
+  className: k,
+  style: h,
+  testId: v,
+  disabled: o,
+  onFocus: w,
+  onBlur: x,
+  ...S
+}, X) {
+  const [a, f] = O(!1), r = L[l], j = () => {
+    const e = {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      position: "relative",
+      height: r.height,
+      borderRadius: r.radius,
+      transition: y.default
+    };
+    switch (b) {
+      case "outline":
+        Object.assign(e, {
+          backgroundColor: "var(--brycks-background-app)",
+          border: `1px solid ${t ? "var(--brycks-error-default)" : a ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
+          boxShadow: a ? t ? c.error : c.default : c.none
+        });
+        break;
+      case "filled":
+        Object.assign(e, {
+          backgroundColor: "var(--brycks-background-muted)",
+          border: "1px solid transparent",
+          borderColor: t ? "var(--brycks-error-default)" : a ? "var(--brycks-border-focus)" : "transparent"
+        });
+        break;
+      case "flushed":
+        Object.assign(e, {
+          backgroundColor: "transparent",
+          borderRadius: 0,
+          borderBottom: `2px solid ${t ? "var(--brycks-error-default)" : a ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`
+        });
+        break;
+    }
+    return o && Object.assign(e, {
+      opacity: B.disabled,
+      cursor: "not-allowed"
+    }), e;
+  }, C = {
+    width: "100%",
+    height: r.height,
+    fontFamily: "var(--brycks-font-sans)",
+    fontSize: r.fontSize,
+    color: "var(--brycks-foreground-default)",
+    backgroundColor: "transparent",
+    border: "none",
+    outline: "none",
+    borderRadius: r.radius,
+    paddingLeft: s ? m.md : r.paddingX,
+    paddingRight: n ? m.md : r.paddingX,
+    cursor: o ? "not-allowed" : "text",
+    transition: y.default
+  }, R = (e) => {
+    f(!0), w?.(e);
+  }, z = (e) => {
+    f(!1), x?.(e);
+  }, g = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "var(--brycks-foreground-muted)",
+    flexShrink: 0
+  };
+  return /* @__PURE__ */ F(
+    "div",
+    {
+      className: $(
+        "brycks-input-wrapper",
+        `brycks-input-wrapper--${b}`,
+        `brycks-input-wrapper--${l}`,
+        t && "brycks-input-wrapper--invalid",
+        o && "brycks-input-wrapper--disabled",
+        k
+      ),
+      style: { ...j(), ...h },
+      children: [
+        s && /* @__PURE__ */ d(
+          "span",
+          {
+            className: "brycks-input-left-element",
+            style: { ...g, paddingLeft: r.paddingX },
+            children: s
+          }
+        ),
+        /* @__PURE__ */ d(
+          "input",
+          {
+            ref: X,
+            className: "brycks-input",
+            style: C,
+            disabled: o,
+            "aria-invalid": t,
+            "data-testid": v,
+            onFocus: R,
+            onBlur: z,
+            ...S
+          }
+        ),
+        n && /* @__PURE__ */ d(
+          "span",
+          {
+            className: "brycks-input-right-element",
+            style: { ...g, paddingRight: r.paddingX },
+            children: n
+          }
+        )
+      ]
+    }
+  );
+});
+G.displayName = "Input";
+export {
+  G as Input
+};
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../src/components/form/Input/Input.tsx"],"sourcesContent":["/**\r\n * Input Component\r\n *\r\n * Base input component with Apple-inspired styling.\r\n * Clean, minimal design with smooth focus transitions.\r\n *\r\n * @module components/form/Input\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  componentHeights,\r\n  componentPaddingX,\r\n  componentGap,\r\n  componentFontSize,\r\n  focusRing,\r\n  transition,\r\n  stateOpacity,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type InputSize = 'sm' | 'md' | 'lg'\r\nexport type InputVariant = 'outline' | 'filled' | 'flushed'\r\n\r\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\r\n  /** Input size */\r\n  size?: InputSize\r\n  /** Visual variant */\r\n  variant?: InputVariant\r\n  /** Error state */\r\n  isInvalid?: boolean\r\n  /** Left element/icon */\r\n  leftElement?: ReactNode\r\n  /** Right element/icon */\r\n  rightElement?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\n/** Size configuration derived from design tokens */\r\nconst sizeConfig: Record<InputSize, { height: number; fontSize: number; paddingX: number; radius: string }> = {\r\n  sm: {\r\n    height: componentHeights.sm,\r\n    fontSize: componentFontSize.sm,\r\n    paddingX: componentPaddingX.sm,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  md: {\r\n    height: componentHeights.md,\r\n    fontSize: componentFontSize.md,\r\n    paddingX: componentPaddingX.md,\r\n    radius: 'var(--brycks-radius-default)',\r\n  },\r\n  lg: {\r\n    height: componentHeights.lg,\r\n    fontSize: componentFontSize.lg,\r\n    paddingX: componentPaddingX.lg,\r\n    radius: 'var(--brycks-radius-lg)',\r\n  },\r\n}\r\n\r\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\r\n  {\r\n    size = 'md',\r\n    variant = 'outline',\r\n    isInvalid,\r\n    leftElement,\r\n    rightElement,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    onFocus,\r\n    onBlur,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n\r\n  const config = sizeConfig[size]\r\n\r\n  const getWrapperStyles = (): CSSProperties => {\r\n    const base: CSSProperties = {\r\n      display: 'flex',\r\n      alignItems: 'center',\r\n      width: '100%',\r\n      position: 'relative',\r\n      height: config.height,\r\n      borderRadius: config.radius,\r\n      transition: transition.default,\r\n    }\r\n\r\n    switch (variant) {\r\n      case 'outline':\r\n        Object.assign(base, {\r\n          backgroundColor: 'var(--brycks-background-app)',\r\n          border: `1px solid ${\r\n            isInvalid\r\n              ? 'var(--brycks-error-default)'\r\n              : isFocused\r\n                ? 'var(--brycks-border-focus)'\r\n                : 'var(--brycks-border-default)'\r\n          }`,\r\n          boxShadow: isFocused\r\n            ? isInvalid\r\n              ? focusRing.error\r\n              : focusRing.default\r\n            : focusRing.none,\r\n        })\r\n        break\r\n\r\n      case 'filled':\r\n        Object.assign(base, {\r\n          backgroundColor: 'var(--brycks-background-muted)',\r\n          border: '1px solid transparent',\r\n          borderColor: isInvalid\r\n            ? 'var(--brycks-error-default)'\r\n            : isFocused\r\n              ? 'var(--brycks-border-focus)'\r\n              : 'transparent',\r\n        })\r\n        break\r\n\r\n      case 'flushed':\r\n        Object.assign(base, {\r\n          backgroundColor: 'transparent',\r\n          borderRadius: 0,\r\n          borderBottom: `2px solid ${\r\n            isInvalid\r\n              ? 'var(--brycks-error-default)'\r\n              : isFocused\r\n                ? 'var(--brycks-border-focus)'\r\n                : 'var(--brycks-border-default)'\r\n          }`,\r\n        })\r\n        break\r\n    }\r\n\r\n    if (disabled) {\r\n      Object.assign(base, {\r\n        opacity: stateOpacity.disabled,\r\n        cursor: 'not-allowed',\r\n      })\r\n    }\r\n\r\n    return base\r\n  }\r\n\r\n  const inputStyles: CSSProperties = {\r\n    width: '100%',\r\n    height: config.height,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    fontSize: config.fontSize,\r\n    color: 'var(--brycks-foreground-default)',\r\n    backgroundColor: 'transparent',\r\n    border: 'none',\r\n    outline: 'none',\r\n    borderRadius: config.radius,\r\n    paddingLeft: leftElement ? componentGap.md : config.paddingX,\r\n    paddingRight: rightElement ? componentGap.md : config.paddingX,\r\n    cursor: disabled ? 'not-allowed' : 'text',\r\n    transition: transition.default,\r\n  }\r\n\r\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\r\n    setIsFocused(true)\r\n    onFocus?.(e)\r\n  }\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\r\n    setIsFocused(false)\r\n    onBlur?.(e)\r\n  }\r\n\r\n  const elementStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    flexShrink: 0,\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-input-wrapper',\r\n        `brycks-input-wrapper--${variant}`,\r\n        `brycks-input-wrapper--${size}`,\r\n        isInvalid && 'brycks-input-wrapper--invalid',\r\n        disabled && 'brycks-input-wrapper--disabled',\r\n        className\r\n      )}\r\n      style={{ ...getWrapperStyles(), ...style }}\r\n    >\r\n      {leftElement && (\r\n        <span\r\n          className=\"brycks-input-left-element\"\r\n          style={{ ...elementStyle, paddingLeft: config.paddingX }}\r\n        >\r\n          {leftElement}\r\n        </span>\r\n      )}\r\n\r\n      <input\r\n        ref={ref}\r\n        className=\"brycks-input\"\r\n        style={inputStyles}\r\n        disabled={disabled}\r\n        aria-invalid={isInvalid}\r\n        data-testid={testId}\r\n        onFocus={handleFocus}\r\n        onBlur={handleBlur}\r\n        {...props}\r\n      />\r\n\r\n      {rightElement && (\r\n        <span\r\n          className=\"brycks-input-right-element\"\r\n          style={{ ...elementStyle, paddingRight: config.paddingX }}\r\n        >\r\n          {rightElement}\r\n        </span>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nInput.displayName = 'Input'\r\n"],"names":["sizeConfig","componentHeights","componentFontSize","componentPaddingX","Input","forwardRef","size","variant","isInvalid","leftElement","rightElement","className","style","testId","disabled","onFocus","onBlur","props","ref","isFocused","setIsFocused","useState","config","getWrapperStyles","base","transition","focusRing","stateOpacity","inputStyles","componentGap","handleFocus","handleBlur","elementStyle","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/form/Radio/Radio.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("react"),k=require("../../../utils/styles.cjs"),N={sm:{radio:16,dot:6,fontSize:13,gap:8},md:{radio:20,dot:8,fontSize:14,gap:10},lg:{radio:24,dot:10,fontSize:16,gap:12}},j=y.forwardRef(function({size:a="md",label:n,description:i,isInvalid:f=!1,disabled:t=!1,className:d,style:g,testId:l,checked:s,...m},b){const[x,c]=y.useState(!1),[v,u]=y.useState(!1),o=N[a],e={display:"inline-flex",alignItems:"flex-start",gap:o.gap,cursor:t?"not-allowed":"pointer",opacity:t?.5:1,...g},S={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:o.radio,height:o.radio,flexShrink:0},p={width:o.radio,height:o.radio,borderRadius:"50%",border:`2px solid ${f?"var(--brycks-error-default)":s?"var(--brycks-primary-default)":x?"var(--brycks-border-strong)":"var(--brycks-border-default)"}`,backgroundColor:s?"var(--brycks-primary-default)":"var(--brycks-background-input)",transition:"all 150ms ease-out",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:v?"0 0 0 3px var(--brycks-primary-100)":void 0},w={width:o.dot,height:o.dot,borderRadius:"50%",backgroundColor:"white",transform:s?"scale(1)":"scale(0)",transition:"transform 150ms ease-out"},C={position:"absolute",width:o.radio,height:o.radio,opacity:0,margin:0,cursor:t?"not-allowed":"pointer"},z={display:"flex",flexDirection:"column",gap:2},I={fontSize:o.fontSize,fontWeight:500,color:t?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",lineHeight:1.4},H={fontSize:o.fontSize-1,color:"var(--brycks-foreground-muted)",lineHeight:1.4};return r.jsxs("label",{className:k.cx("brycks-radio",`brycks-radio--${a}`,d),style:e,onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),children:[r.jsxs("span",{style:S,children:[r.jsx("span",{style:p,children:r.jsx("span",{style:w})}),r.jsx("input",{ref:b,type:"radio",disabled:t,checked:s,style:C,onFocus:()=>u(!0),onBlur:()=>u(!1),"data-testid":l,...m})]}),(n||i)&&r.jsxs("span",{style:z,children:[n&&r.jsx("span",{style:I,children:n}),i&&r.jsx("span",{style:H,children:i})]})]})});j.displayName="Radio";function R({name:h,value:a,defaultValue:n,onChange:i,disabled:f=!1,size:t="md",orientation:d="vertical",gap:g=12,children:l,className:s,style:m}){const[b,x]=y.useState(n??""),c=a??b,v=e=>{a===void 0&&x(e),i?.(e)},u={display:"flex",flexDirection:d==="vertical"?"column":"row",flexWrap:d==="horizontal"?"wrap":void 0,gap:g,...m},o=Array.isArray(l)?l.map((e,S)=>{if(e&&typeof e=="object"&&"props"in e){const p=e.props.value;return{...e,key:e.key??S,props:{...e.props,name:h,size:t,disabled:f||e.props.disabled,checked:p===c,onChange:()=>v(p)}}}return e}):l;return r.jsx("div",{role:"radiogroup",className:k.cx("brycks-radio-group",s),style:u,children:o})}R.displayName="RadioGroup";exports.Radio=j;exports.RadioGroup=R;
+//# sourceMappingURL=Radio.cjs.map

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

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

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

@@ -0,0 +1,162 @@
+import { jsxs as S, jsx as a } from "react/jsx-runtime";
+import { forwardRef as H, useState as k } from "react";
+import { cx as w } from "../../../utils/styles.js";
+const N = {
+  sm: { radio: 16, dot: 6, fontSize: 13, gap: 8 },
+  md: { radio: 20, dot: 8, fontSize: 14, gap: 10 },
+  lg: { radio: 24, dot: 10, fontSize: 16, gap: 12 }
+}, F = H(function({
+  size: s = "md",
+  label: n,
+  description: i,
+  isInvalid: y = !1,
+  disabled: e = !1,
+  className: d,
+  style: f,
+  testId: l,
+  checked: t,
+  ...g
+}, m) {
+  const [b, c] = k(!1), [v, p] = k(!1), r = N[s], o = {
+    display: "inline-flex",
+    alignItems: "flex-start",
+    gap: r.gap,
+    cursor: e ? "not-allowed" : "pointer",
+    opacity: e ? 0.5 : 1,
+    ...f
+  }, h = {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: r.radio,
+    height: r.radio,
+    flexShrink: 0
+  }, u = {
+    width: r.radio,
+    height: r.radio,
+    borderRadius: "50%",
+    border: `2px solid ${y ? "var(--brycks-error-default)" : t ? "var(--brycks-primary-default)" : b ? "var(--brycks-border-strong)" : "var(--brycks-border-default)"}`,
+    backgroundColor: t ? "var(--brycks-primary-default)" : "var(--brycks-background-input)",
+    transition: "all 150ms ease-out",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: v ? "0 0 0 3px var(--brycks-primary-100)" : void 0
+  }, C = {
+    width: r.dot,
+    height: r.dot,
+    borderRadius: "50%",
+    backgroundColor: "white",
+    transform: t ? "scale(1)" : "scale(0)",
+    transition: "transform 150ms ease-out"
+  }, z = {
+    position: "absolute",
+    width: r.radio,
+    height: r.radio,
+    opacity: 0,
+    margin: 0,
+    cursor: e ? "not-allowed" : "pointer"
+  }, R = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2
+  }, I = {
+    fontSize: r.fontSize,
+    fontWeight: 500,
+    color: e ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
+    lineHeight: 1.4
+  }, j = {
+    fontSize: r.fontSize - 1,
+    color: "var(--brycks-foreground-muted)",
+    lineHeight: 1.4
+  };
+  return /* @__PURE__ */ S(
+    "label",
+    {
+      className: w("brycks-radio", `brycks-radio--${s}`, d),
+      style: o,
+      onMouseEnter: () => c(!0),
+      onMouseLeave: () => c(!1),
+      children: [
+        /* @__PURE__ */ S("span", { style: h, children: [
+          /* @__PURE__ */ a("span", { style: u, children: /* @__PURE__ */ a("span", { style: C }) }),
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ref: m,
+              type: "radio",
+              disabled: e,
+              checked: t,
+              style: z,
+              onFocus: () => p(!0),
+              onBlur: () => p(!1),
+              "data-testid": l,
+              ...g
+            }
+          )
+        ] }),
+        (n || i) && /* @__PURE__ */ S("span", { style: R, children: [
+          n && /* @__PURE__ */ a("span", { style: I, children: n }),
+          i && /* @__PURE__ */ a("span", { style: j, children: i })
+        ] })
+      ]
+    }
+  );
+});
+F.displayName = "Radio";
+function A({
+  name: x,
+  value: s,
+  defaultValue: n,
+  onChange: i,
+  disabled: y = !1,
+  size: e = "md",
+  orientation: d = "vertical",
+  gap: f = 12,
+  children: l,
+  className: t,
+  style: g
+}) {
+  const [m, b] = k(n ?? ""), c = s ?? m, v = (o) => {
+    s === void 0 && b(o), i?.(o);
+  }, p = {
+    display: "flex",
+    flexDirection: d === "vertical" ? "column" : "row",
+    flexWrap: d === "horizontal" ? "wrap" : void 0,
+    gap: f,
+    ...g
+  }, r = Array.isArray(l) ? l.map((o, h) => {
+    if (o && typeof o == "object" && "props" in o) {
+      const u = o.props.value;
+      return {
+        ...o,
+        key: o.key ?? h,
+        props: {
+          ...o.props,
+          name: x,
+          size: e,
+          disabled: y || o.props.disabled,
+          checked: u === c,
+          onChange: () => v(u)
+        }
+      };
+    }
+    return o;
+  }) : l;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: "radiogroup",
+      className: w("brycks-radio-group", t),
+      style: p,
+      children: r
+    }
+  );
+}
+A.displayName = "RadioGroup";
+export {
+  F as Radio,
+  A as RadioGroup
+};
+//# sourceMappingURL=Radio.js.map