@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/forms/form/form.d.ts

@@ -0,0 +1,44 @@
+import { FormEvent, ReactNode } from 'react';
+import { FormSpacing } from '../../../theme/size-tokens';
+export type FormProps = {
+    /** Form content - typically FormField, Fieldset, or Button components */
+    children: ReactNode;
+    /** Form submission handler - automatically prevents default */
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+    /** HTML form method */
+    method?: 'get' | 'post';
+    /** Form action URL for native submission */
+    action?: string;
+    /** Disable browser validation */
+    noValidate?: boolean;
+    /** HTML id attribute */
+    id?: string;
+    /** Accessible label for screen readers */
+    ariaLabel?: string;
+    /** Spacing between form elements */
+    spacing?: FormSpacing;
+    /** Additional CSS classes applied to the form element */
+    className?: string;
+};
+/**
+ * Form - Semantic form wrapper with layout support
+ *
+ * Automatically prevents default on submit when onSubmit is provided.
+ * Uses flexbox for layout with configurable direction, spacing, and alignment.
+ *
+ * @example
+ * ```tsx
+ * <Form onSubmit={handleSubmit} spacing="md">
+ *   <FormField label="Email" required>
+ *     <Input type="email" />
+ *   </FormField>
+ *   <Button type="submit">Submit</Button>
+ * </Form>
+ * ```
+ */
+declare function Form({ children, onSubmit, method, action, noValidate, id, ariaLabel, spacing, className }: Readonly<FormProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Form {
+    var displayName: string;
+}
+export default Form;
+//# sourceMappingURL=form.d.ts.map

package/dist/components/forms/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form/form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE3E,MAAM,MAAM,SAAS,GAAG;IACtB,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACnD,uBAAuB;IACvB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AAEH,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,MAAM,EACN,UAAkB,EAClB,EAAE,EACF,SAAS,EACT,OAAc,EACd,SAAS,EACV,EAAE,QAAQ,CAAC,SAAS,CAAC,2CAqBrB;kBA/BQ,IAAI;;;AAmCb,eAAe,IAAI,CAAC"}

package/dist/components/forms/form/form.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "../../../node_modules/clsx/dist/clsx.js";
+import { formSpacing } from "../../../theme/size-tokens.js";
+function Form({
+  children,
+  onSubmit,
+  method,
+  action,
+  noValidate = false,
+  id,
+  ariaLabel,
+  spacing = "md",
+  className
+}) {
+  const handleSubmit = (e) => {
+    if (onSubmit) {
+      e.preventDefault();
+      onSubmit(e);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      method,
+      action,
+      noValidate,
+      id,
+      "aria-label": ariaLabel,
+      className: clsx("flex flex-col", formSpacing[spacing], className),
+      children
+    }
+  );
+}
+Form.displayName = "Form";
+export {
+  Form as default
+};
+//# sourceMappingURL=form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sources":["../../../../src/components/forms/form/form.tsx"],"sourcesContent":["import { FormEvent, ReactNode } from 'react';\nimport clsx from 'clsx';\n\nimport { formSpacing, type FormSpacing } from '../../../theme/size-tokens';\n\nexport type FormProps = {\n  /** Form content - typically FormField, Fieldset, or Button components */\n  children: ReactNode;\n  /** Form submission handler - automatically prevents default */\n  onSubmit?: (e: FormEvent<HTMLFormElement>) => void;\n  /** HTML form method */\n  method?: 'get' | 'post';\n  /** Form action URL for native submission */\n  action?: string;\n  /** Disable browser validation */\n  noValidate?: boolean;\n  /** HTML id attribute */\n  id?: string;\n  /** Accessible label for screen readers */\n  ariaLabel?: string;\n  /** Spacing between form elements */\n  spacing?: FormSpacing;\n  /** Additional CSS classes applied to the form element */\n  className?: string;\n};\n\n/**\n * Form - Semantic form wrapper with layout support\n *\n * Automatically prevents default on submit when onSubmit is provided.\n * Uses flexbox for layout with configurable direction, spacing, and alignment.\n *\n * @example\n * ```tsx\n * <Form onSubmit={handleSubmit} spacing=\"md\">\n *   <FormField label=\"Email\" required>\n *     <Input type=\"email\" />\n *   </FormField>\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n */\n\nfunction Form({\n  children,\n  onSubmit,\n  method,\n  action,\n  noValidate = false,\n  id,\n  ariaLabel,\n  spacing = 'md',\n  className\n}: Readonly<FormProps>) {\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    if (onSubmit) {\n      e.preventDefault();\n      onSubmit(e);\n    }\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      method={method}\n      action={action}\n      noValidate={noValidate}\n      id={id}\n      aria-label={ariaLabel}\n      className={clsx('flex flex-col', formSpacing[spacing], className)}\n    >\n      {children}\n    </form>\n  );\n}\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"names":[],"mappings":";;;AA2CA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAAwB;AACtB,QAAM,eAAe,CAAC,MAAkC;AACtD,QAAI,UAAU;AACZ,QAAE,eAAA;AACF,eAAS,CAAC;AAAA,IACZ;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,WAAW,KAAK,iBAAiB,YAAY,OAAO,GAAG,SAAS;AAAA,MAE/D;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,KAAK,cAAc;"}

package/dist/components/forms/form/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './form';
+export type { FormProps } from './form';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/forms/form-checkbox/form-checkbox.d.ts

@@ -0,0 +1,27 @@
+import { CheckboxProps } from '../checkbox/checkbox';
+import { FormSpacing } from '../../../theme/size-tokens';
+export type FormCheckboxProps = Omit<CheckboxProps, 'ariaLabel' | 'id' | 'aria-describedby'> & {
+    /** Label text displayed next to the checkbox */
+    label: string;
+    /** Helper text displayed below the checkbox */
+    helperText?: string;
+    /** Error message to display */
+    error?: string;
+    /** Shows required asterisk next to label */
+    required?: boolean;
+    /** HTML id attribute for the checkbox */
+    id?: string;
+    /** Spacing between checkbox/label and helper text */
+    spacing?: FormSpacing;
+    /** Associates the checkbox with additional descriptive text (merged with internal message reference) */
+    'aria-describedby'?: string;
+};
+/**
+ * FormCheckbox - Checkbox with built-in label and optional helper/error text
+ */
+declare function FormCheckbox({ label, helperText, error, required, spacing, id: providedId, disabled, validationState, className, 'aria-describedby': userAriaDescribedby, ...checkboxProps }: Readonly<FormCheckboxProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace FormCheckbox {
+    var displayName: string;
+}
+export default FormCheckbox;
+//# sourceMappingURL=form-checkbox.d.ts.map

package/dist/components/forms/form-checkbox/form-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-checkbox/form-checkbox.tsx"],"names":[],"mappings":"AAEA,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAsC,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAElG,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,GAAG,kBAAkB,CAAC,GAAG;IAC7F,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qDAAqD;IACrD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,wGAAwG;IACxG,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAgB,EAChB,OAAc,EACd,EAAE,EAAE,UAAU,EACd,QAAQ,EACR,eAAe,EACf,SAAS,EACT,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,aAAa,EACjB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAwC7B;kBApDQ,YAAY;;;AAwDrB,eAAe,YAAY,CAAC"}

package/dist/components/forms/form-checkbox/form-checkbox.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import Checkbox from "../checkbox/checkbox.js";
+import { formSpacing, validationTextClasses } from "../../../theme/size-tokens.js";
+function FormCheckbox({
+  label,
+  helperText,
+  error,
+  required = false,
+  spacing = "xs",
+  id: providedId,
+  disabled,
+  validationState,
+  className,
+  "aria-describedby": userAriaDescribedby,
+  ...checkboxProps
+}) {
+  const autoId = useId();
+  const inputId = providedId ?? autoId;
+  const messageId = `${inputId}-message`;
+  const resolvedValidationState = error ? "error" : validationState;
+  const hasMessage = !!(error || helperText);
+  const ariaDescribedby = [hasMessage ? messageId : void 0, userAriaDescribedby].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${formSpacing[spacing]}`, children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "inline-flex items-center gap-2 text-sm text-foreground w-fit", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          ...checkboxProps,
+          id: inputId,
+          disabled,
+          validationState: resolvedValidationState,
+          className,
+          ariaLabel: label,
+          "aria-describedby": ariaDescribedby
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: disabled ? "text-muted-foreground" : "text-foreground", children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "text-error ml-1", children: "*" })
+      ] })
+    ] }),
+    hasMessage && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: messageId,
+        className: `text-sm ${error ? validationTextClasses.error : validationTextClasses.neutral}`,
+        "aria-live": "polite",
+        children: error || helperText
+      }
+    )
+  ] });
+}
+FormCheckbox.displayName = "FormCheckbox";
+export {
+  FormCheckbox as default
+};
+//# sourceMappingURL=form-checkbox.js.map

package/dist/components/forms/form-checkbox/form-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-checkbox.js","sources":["../../../../src/components/forms/form-checkbox/form-checkbox.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport Checkbox, { type CheckboxProps } from '../checkbox/checkbox';\nimport { formSpacing, validationTextClasses, type FormSpacing } from '../../../theme/size-tokens';\n\nexport type FormCheckboxProps = Omit<CheckboxProps, 'ariaLabel' | 'id' | 'aria-describedby'> & {\n  /** Label text displayed next to the checkbox */\n  label: string;\n  /** Helper text displayed below the checkbox */\n  helperText?: string;\n  /** Error message to display */\n  error?: string;\n  /** Shows required asterisk next to label */\n  required?: boolean;\n  /** HTML id attribute for the checkbox */\n  id?: string;\n  /** Spacing between checkbox/label and helper text */\n  spacing?: FormSpacing;\n  /** Associates the checkbox with additional descriptive text (merged with internal message reference) */\n  'aria-describedby'?: string;\n};\n\n/**\n * FormCheckbox - Checkbox with built-in label and optional helper/error text\n */\nfunction FormCheckbox({\n  label,\n  helperText,\n  error,\n  required = false,\n  spacing = 'xs',\n  id: providedId,\n  disabled,\n  validationState,\n  className,\n  'aria-describedby': userAriaDescribedby,\n  ...checkboxProps\n}: Readonly<FormCheckboxProps>) {\n  const autoId = useId();\n  const inputId = providedId ?? autoId;\n  const messageId = `${inputId}-message`;\n  const resolvedValidationState = error ? 'error' : validationState;\n  const hasMessage = !!(error || helperText);\n\n  // Merge internal message reference with user-provided aria-describedby\n  const ariaDescribedby =\n    [hasMessage ? messageId : undefined, userAriaDescribedby].filter(Boolean).join(' ') || undefined;\n\n  return (\n    <div className={`flex flex-col ${formSpacing[spacing]}`}>\n      <label htmlFor={inputId} className=\"inline-flex items-center gap-2 text-sm text-foreground w-fit\">\n        <Checkbox\n          {...checkboxProps}\n          id={inputId}\n          disabled={disabled}\n          validationState={resolvedValidationState}\n          className={className}\n          ariaLabel={label}\n          aria-describedby={ariaDescribedby}\n        />\n        <span className={disabled ? 'text-muted-foreground' : 'text-foreground'}>\n          {label}\n          {required && <span className=\"text-error ml-1\">*</span>}\n        </span>\n      </label>\n\n      {hasMessage && (\n        <p\n          id={messageId}\n          className={`text-sm ${error ? validationTextClasses.error : validationTextClasses.neutral}`}\n          aria-live=\"polite\"\n        >\n          {error || helperText}\n        </p>\n      )}\n    </div>\n  );\n}\n\nFormCheckbox.displayName = 'FormCheckbox';\n\nexport default FormCheckbox;\n"],"names":[],"mappings":";;;;AAyBA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACL,GAAgC;AAC9B,QAAM,SAAS,MAAA;AACf,QAAM,UAAU,cAAc;AAC9B,QAAM,YAAY,GAAG,OAAO;AAC5B,QAAM,0BAA0B,QAAQ,UAAU;AAClD,QAAM,aAAa,CAAC,EAAE,SAAS;AAG/B,QAAM,kBACJ,CAAC,aAAa,YAAY,QAAW,mBAAmB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEzF,8BACG,OAAA,EAAI,WAAW,iBAAiB,YAAY,OAAO,CAAC,IACnD,UAAA;AAAA,IAAA,qBAAC,SAAA,EAAM,SAAS,SAAS,WAAU,gEACjC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,IAAI;AAAA,UACJ;AAAA,UACA,iBAAiB;AAAA,UACjB;AAAA,UACA,WAAW;AAAA,UACX,oBAAkB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEpB,qBAAC,QAAA,EAAK,WAAW,WAAW,0BAA0B,mBACnD,UAAA;AAAA,QAAA;AAAA,QACA,YAAY,oBAAC,QAAA,EAAK,WAAU,mBAAkB,UAAA,IAAA,CAAC;AAAA,MAAA,EAAA,CAClD;AAAA,IAAA,GACF;AAAA,IAEC,cACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,WAAW,QAAQ,sBAAsB,QAAQ,sBAAsB,OAAO;AAAA,QACzF,aAAU;AAAA,QAET,UAAA,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ;AAEA,aAAa,cAAc;"}

package/dist/components/forms/form-checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './form-checkbox';
+export type { FormCheckboxProps } from './form-checkbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/form-checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/forms/form-checkbox-group/form-checkbox-group.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { FormSpacing, InputWidth } from '../../../theme/size-tokens';
+import { Alignment } from '../../../theme/tokens';
+export type FormCheckboxGroupProps = {
+    /** Checkbox components or custom checkbox rows */
+    children: ReactNode;
+    /** Label text displayed above the checkbox group */
+    label?: string;
+    /** Helper text displayed below the checkbox group */
+    helperText?: string;
+    /** Error message to display */
+    error?: string;
+    /** Shows required asterisk next to label */
+    required?: boolean;
+    /** Disables all checkboxes within the group */
+    disabled?: boolean;
+    /** HTML id attribute for the fieldset */
+    id?: string;
+    /** Spacing between label, group, and helper/error text */
+    spacing?: FormSpacing;
+    /** Spacing between checkbox items */
+    itemSpacing?: FormSpacing;
+    /** Layout direction for the checkbox list */
+    orientation?: 'horizontal' | 'vertical';
+    /** Width of the group - uses semantic sizing */
+    width?: InputWidth;
+    /** Aligns the group - left, center, or right */
+    align?: Alignment;
+    /** Reserve space for helper/error text to prevent layout shift */
+    reserveMessageSpace?: boolean;
+};
+/**
+ * FormCheckboxGroup - Checkbox list wrapper with label and validation messaging
+ */
+declare function FormCheckboxGroup({ children, label, helperText, error, required, disabled, id, spacing, itemSpacing, orientation, width, align, reserveMessageSpace }: Readonly<FormCheckboxGroupProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace FormCheckboxGroup {
+    var displayName: string;
+}
+export default FormCheckboxGroup;
+//# sourceMappingURL=form-checkbox-group.d.ts.map

package/dist/components/forms/form-checkbox-group/form-checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-checkbox-group.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-checkbox-group/form-checkbox-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAe,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvD,MAAM,MAAM,sBAAsB,GAAG;IACnC,kDAAkD;IAClD,QAAQ,EAAE,SAAS,CAAC;IACpB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0DAA0D;IAC1D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qCAAqC;IACrC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,6CAA6C;IAC7C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,gDAAgD;IAChD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAoCF;;GAEG;AACH,iBAAS,iBAAiB,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,EAAE,EACF,OAAc,EACd,WAAkB,EAClB,WAAwB,EACxB,KAAc,EACd,KAAgB,EAChB,mBAA2B,EAC5B,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CA0BlC;kBAxCQ,iBAAiB;;;AA4C1B,eAAe,iBAAiB,CAAC"}

package/dist/components/forms/form-checkbox-group/form-checkbox-group.js

@@ -0,0 +1,74 @@
+import { jsx } from "react/jsx-runtime";
+import FormField from "../form-field/form-field.js";
+import { formSpacing } from "../../../theme/size-tokens.js";
+import Fieldset from "../fieldset/fieldset.js";
+function CheckboxGroupField({
+  children,
+  itemSpacing,
+  orientation,
+  validationState,
+  disabled,
+  id,
+  "aria-describedby": ariaDescribedBy
+}) {
+  const orientationClasses = orientation === "horizontal" ? "flex flex-row flex-wrap" : "flex flex-col";
+  return /* @__PURE__ */ jsx(
+    Fieldset,
+    {
+      id,
+      disabled,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": validationState === "error" ? "true" : void 0,
+      bordered: false,
+      children: /* @__PURE__ */ jsx("div", { className: `${orientationClasses} ${formSpacing[itemSpacing]}`, children })
+    }
+  );
+}
+function FormCheckboxGroup({
+  children,
+  label,
+  helperText,
+  error,
+  required = false,
+  disabled = false,
+  id,
+  spacing = "sm",
+  itemSpacing = "sm",
+  orientation = "vertical",
+  width = "full",
+  align = "center",
+  reserveMessageSpace = false
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      label,
+      helperText,
+      spacing,
+      error,
+      required,
+      disabled,
+      id,
+      width,
+      align,
+      reserveMessageSpace,
+      children: /* @__PURE__ */ jsx(
+        CheckboxGroupField,
+        {
+          itemSpacing,
+          orientation,
+          validationState: error ? "error" : void 0,
+          disabled,
+          id,
+          "aria-describedby": id && (helperText || error) ? `${id}-helper-text` : void 0,
+          children
+        }
+      )
+    }
+  );
+}
+FormCheckboxGroup.displayName = "FormCheckboxGroup";
+export {
+  FormCheckboxGroup as default
+};
+//# sourceMappingURL=form-checkbox-group.js.map

package/dist/components/forms/form-checkbox-group/form-checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-checkbox-group.js","sources":["../../../../src/components/forms/form-checkbox-group/form-checkbox-group.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport FormField, { type ValidationState } from '../form-field/form-field';\nimport { formSpacing, type FormSpacing, type InputWidth } from '../../../theme/size-tokens';\nimport { type Alignment } from '../../../theme/tokens';\nimport Fieldset from '../../forms/fieldset/fieldset';\n\nexport type FormCheckboxGroupProps = {\n  /** Checkbox components or custom checkbox rows */\n  children: ReactNode;\n  /** Label text displayed above the checkbox group */\n  label?: string;\n  /** Helper text displayed below the checkbox group */\n  helperText?: string;\n  /** Error message to display */\n  error?: string;\n  /** Shows required asterisk next to label */\n  required?: boolean;\n  /** Disables all checkboxes within the group */\n  disabled?: boolean;\n  /** HTML id attribute for the fieldset */\n  id?: string;\n  /** Spacing between label, group, and helper/error text */\n  spacing?: FormSpacing;\n  /** Spacing between checkbox items */\n  itemSpacing?: FormSpacing;\n  /** Layout direction for the checkbox list */\n  orientation?: 'horizontal' | 'vertical';\n  /** Width of the group - uses semantic sizing */\n  width?: InputWidth;\n  /** Aligns the group - left, center, or right */\n  align?: Alignment;\n  /** Reserve space for helper/error text to prevent layout shift */\n  reserveMessageSpace?: boolean;\n};\n\ntype CheckboxGroupFieldProps = {\n  children: ReactNode;\n  itemSpacing: FormSpacing;\n  orientation: 'horizontal' | 'vertical';\n  validationState?: ValidationState;\n  disabled?: boolean;\n  id?: string;\n  'aria-describedby'?: string;\n};\n\nfunction CheckboxGroupField({\n  children,\n  itemSpacing,\n  orientation,\n  validationState,\n  disabled,\n  id,\n  'aria-describedby': ariaDescribedBy\n}: Readonly<CheckboxGroupFieldProps>) {\n  const orientationClasses = orientation === 'horizontal' ? 'flex flex-row flex-wrap' : 'flex flex-col';\n\n  return (\n    <Fieldset\n      id={id}\n      disabled={disabled}\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={validationState === 'error' ? 'true' : undefined}\n      bordered={false}\n    >\n      <div className={`${orientationClasses} ${formSpacing[itemSpacing]}`}>{children}</div>\n    </Fieldset>\n  );\n}\n\n/**\n * FormCheckboxGroup - Checkbox list wrapper with label and validation messaging\n */\nfunction FormCheckboxGroup({\n  children,\n  label,\n  helperText,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  spacing = 'sm',\n  itemSpacing = 'sm',\n  orientation = 'vertical',\n  width = 'full',\n  align = 'center',\n  reserveMessageSpace = false\n}: Readonly<FormCheckboxGroupProps>) {\n  return (\n    <FormField\n      label={label}\n      helperText={helperText}\n      spacing={spacing}\n      error={error}\n      required={required}\n      disabled={disabled}\n      id={id}\n      width={width}\n      align={align}\n      reserveMessageSpace={reserveMessageSpace}\n    >\n      <CheckboxGroupField\n        itemSpacing={itemSpacing}\n        orientation={orientation}\n        validationState={error ? 'error' : undefined}\n        disabled={disabled}\n        id={id}\n        aria-describedby={id && (helperText || error) ? `${id}-helper-text` : undefined}\n      >\n        {children}\n      </CheckboxGroupField>\n    </FormField>\n  );\n}\n\nFormCheckboxGroup.displayName = 'FormCheckboxGroup';\n\nexport default FormCheckboxGroup;\n"],"names":[],"mappings":";;;;AA8CA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACtB,GAAsC;AACpC,QAAM,qBAAqB,gBAAgB,eAAe,4BAA4B;AAEtF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,oBAAkB;AAAA,MAClB,gBAAc,oBAAoB,UAAU,SAAS;AAAA,MACrD,UAAU;AAAA,MAEV,UAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,kBAAkB,IAAI,YAAY,WAAW,CAAC,IAAK,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGrF;AAKA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,sBAAsB;AACxB,GAAqC;AACnC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,iBAAiB,QAAQ,UAAU;AAAA,UACnC;AAAA,UACA;AAAA,UACA,oBAAkB,OAAO,cAAc,SAAS,GAAG,EAAE,iBAAiB;AAAA,UAErE;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,kBAAkB,cAAc;"}

package/dist/components/forms/form-field/form-field.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { ValidationState, FormSpacing, InputWidth } from '../../../theme/size-tokens';
+import { Alignment } from '../../../theme/tokens';
+export type { ValidationState };
+export type FormFieldProps = {
+    /** Form input component - typically Input, Select, Textarea, etc. */
+    children: ReactNode;
+    /** Label text displayed above the input */
+    label?: string;
+    /** Error message to display */
+    error?: string;
+    /** Helper text displayed below input */
+    helperText?: string;
+    /** Shows required asterisk next to label */
+    required?: boolean;
+    /** Spacing between label, input, and helper text */
+    spacing?: FormSpacing;
+    /** Disables the form field and child input */
+    disabled?: boolean;
+    /** HTML id for the input - auto-generated if not provided */
+    id?: string;
+    /** Same as id - use when you want the label's htmlFor to match the input id (accessibility) */
+    htmlFor?: string;
+    /** Width of the form field - uses semantic sizing */
+    width?: InputWidth;
+    /** Aligns the form field - left, center, or right */
+    align?: Alignment;
+    /** Reserve space for helper/error text to prevent layout shift */
+    reserveMessageSpace?: boolean;
+};
+/**
+ * FormField - Simple wrapper for form inputs with label and error display
+ *
+ * For most use cases, prefer the unified components:
+ * - FormInput - for text inputs
+ * - FormSelect - for dropdowns
+ * - FormTextarea - for multi-line text
+ *
+ * Use FormField when you need to wrap custom or third-party inputs.
+ *
+ * @example
+ * ```tsx
+ * <FormField label="Email" required error={errors.email}>
+ *   <Input type="email" placeholder="you@example.com" />
+ * </FormField>
+ * ```
+ */
+declare function FormField({ children, label, error, helperText, required, spacing, disabled, id: providedId, htmlFor: htmlForId, width, align, reserveMessageSpace }: Readonly<FormFieldProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace FormField {
+    var displayName: string;
+}
+export default FormField;
+//# sourceMappingURL=form-field.d.ts.map

package/dist/components/forms/form-field/form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqD,MAAM,OAAO,CAAC;AAErF,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,UAAU,EAEhB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,uBAAuB,CAAC;AAE1E,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC,MAAM,MAAM,cAAc,GAAG;IAC3B,qEAAqE;IACrE,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,UAAU,EACV,QAAgB,EAChB,OAAc,EACd,QAAgB,EAChB,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,SAAS,EAClB,KAAc,EACd,KAAgB,EAChB,mBAA2B,EAC5B,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAoD1B;kBAjEQ,SAAS;;;AAqElB,eAAe,SAAS,CAAC"}

package/dist/components/forms/form-field/form-field.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, isValidElement, cloneElement } from "react";
+import { inputWidthSizes, formSpacing, validationTextClasses } from "../../../theme/size-tokens.js";
+import { inputAlignClasses } from "../../../theme/tokens.js";
+function FormField({
+  children,
+  label,
+  error,
+  helperText,
+  required = false,
+  spacing = "sm",
+  disabled = false,
+  id: providedId,
+  htmlFor: htmlForId,
+  width = "full",
+  align = "center",
+  reserveMessageSpace = false
+}) {
+  const autoId = useId();
+  const inputId = providedId ?? htmlForId ?? autoId;
+  const validationState = error ? "error" : "neutral";
+  const hasMessage = !!(error || helperText);
+  const enhancedChild = isValidElement(children) ? cloneElement(
+    children,
+    {
+      validationState,
+      ...disabled ? { disabled: true } : {},
+      id: inputId,
+      ...hasMessage ? { "aria-describedby": `${inputId}-message` } : {}
+    }
+  ) : children;
+  const widthClass = inputWidthSizes[width];
+  const alignmentClass = inputAlignClasses[align];
+  const shouldReserveSpace = reserveMessageSpace && !helperText;
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${widthClass} ${alignmentClass} ${formSpacing[spacing]}`, children: [
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "text-sm font-semibold text-foreground", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-error ml-1", children: "*" })
+    ] }),
+    enhancedChild,
+    (helperText || error || shouldReserveSpace) && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: `${inputId}-message`,
+        className: `text-sm ${error ? validationTextClasses.error : validationTextClasses.neutral}`,
+        "aria-live": "polite",
+        children: error || helperText || " "
+      }
+    )
+  ] });
+}
+FormField.displayName = "FormField";
+export {
+  FormField as default
+};
+//# sourceMappingURL=form-field.js.map

package/dist/components/forms/form-field/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","sources":["../../../../src/components/forms/form-field/form-field.tsx"],"sourcesContent":["import { ReactNode, ReactElement, cloneElement, isValidElement, useId } from 'react';\n\nimport {\n  validationTextClasses,\n  formSpacing,\n  type ValidationState,\n  type FormSpacing,\n  type InputWidth,\n  inputWidthSizes\n} from '../../../theme/size-tokens';\nimport { type Alignment, inputAlignClasses } from '../../../theme/tokens';\n\nexport type { ValidationState };\n\nexport type FormFieldProps = {\n  /** Form input component - typically Input, Select, Textarea, etc. */\n  children: ReactNode;\n  /** Label text displayed above the input */\n  label?: string;\n  /** Error message to display */\n  error?: string;\n  /** Helper text displayed below input */\n  helperText?: string;\n  /** Shows required asterisk next to label */\n  required?: boolean;\n  /** Spacing between label, input, and helper text */\n  spacing?: FormSpacing;\n  /** Disables the form field and child input */\n  disabled?: boolean;\n  /** HTML id for the input - auto-generated if not provided */\n  id?: string;\n  /** Same as id - use when you want the label's htmlFor to match the input id (accessibility) */\n  htmlFor?: string;\n  /** Width of the form field - uses semantic sizing */\n  width?: InputWidth;\n  /** Aligns the form field - left, center, or right */\n  align?: Alignment;\n  /** Reserve space for helper/error text to prevent layout shift */\n  reserveMessageSpace?: boolean;\n};\n\n/**\n * FormField - Simple wrapper for form inputs with label and error display\n *\n * For most use cases, prefer the unified components:\n * - FormInput - for text inputs\n * - FormSelect - for dropdowns\n * - FormTextarea - for multi-line text\n *\n * Use FormField when you need to wrap custom or third-party inputs.\n *\n * @example\n * ```tsx\n * <FormField label=\"Email\" required error={errors.email}>\n *   <Input type=\"email\" placeholder=\"you@example.com\" />\n * </FormField>\n * ```\n */\nfunction FormField({\n  children,\n  label,\n  error,\n  helperText,\n  required = false,\n  spacing = 'sm',\n  disabled = false,\n  id: providedId,\n  htmlFor: htmlForId,\n  width = 'full',\n  align = 'center',\n  reserveMessageSpace = false\n}: Readonly<FormFieldProps>) {\n  const autoId = useId();\n  const inputId = providedId ?? htmlForId ?? autoId;\n\n  const validationState: ValidationState = error ? 'error' : 'neutral';\n  const hasMessage = !!(error || helperText);\n\n  const enhancedChild = isValidElement(children)\n    ? cloneElement(\n        children as ReactElement<{\n          validationState?: ValidationState;\n          disabled?: boolean;\n          id?: string;\n          'aria-describedby'?: string;\n        }>,\n        {\n          validationState,\n          ...(disabled ? { disabled: true } : {}),\n          id: inputId,\n          ...(hasMessage ? { 'aria-describedby': `${inputId}-message` } : {})\n        }\n      )\n    : children;\n\n  const widthClass = inputWidthSizes[width];\n  const alignmentClass = inputAlignClasses[align];\n\n  // Only reserve space when there's no helper text but we want to prevent layout shift for errors\n  const shouldReserveSpace = reserveMessageSpace && !helperText;\n\n  return (\n    <div className={`flex flex-col ${widthClass} ${alignmentClass} ${formSpacing[spacing]}`}>\n      {label && (\n        <label htmlFor={inputId} className=\"text-sm font-semibold text-foreground\">\n          {label}\n          {required && <span className=\"text-error ml-1\">*</span>}\n        </label>\n      )}\n\n      {enhancedChild}\n\n      {(helperText || error || shouldReserveSpace) && (\n        <p\n          id={`${inputId}-message`}\n          className={`text-sm ${error ? validationTextClasses.error : validationTextClasses.neutral}`}\n          aria-live=\"polite\"\n        >\n          {error || helperText || '\\u00A0'}\n        </p>\n      )}\n    </div>\n  );\n}\n\nFormField.displayName = 'FormField';\n\nexport default FormField;\n"],"names":[],"mappings":";;;;AA0DA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,sBAAsB;AACxB,GAA6B;AAC3B,QAAM,SAAS,MAAA;AACf,QAAM,UAAU,cAAc,aAAa;AAE3C,QAAM,kBAAmC,QAAQ,UAAU;AAC3D,QAAM,aAAa,CAAC,EAAE,SAAS;AAE/B,QAAM,gBAAgB,eAAe,QAAQ,IACzC;AAAA,IACE;AAAA,IAMA;AAAA,MACE;AAAA,MACA,GAAI,WAAW,EAAE,UAAU,KAAA,IAAS,CAAA;AAAA,MACpC,IAAI;AAAA,MACJ,GAAI,aAAa,EAAE,oBAAoB,GAAG,OAAO,eAAe,CAAA;AAAA,IAAC;AAAA,EACnE,IAEF;AAEJ,QAAM,aAAa,gBAAgB,KAAK;AACxC,QAAM,iBAAiB,kBAAkB,KAAK;AAG9C,QAAM,qBAAqB,uBAAuB,CAAC;AAEnD,SACE,qBAAC,OAAA,EAAI,WAAW,iBAAiB,UAAU,IAAI,cAAc,IAAI,YAAY,OAAO,CAAC,IAClF,UAAA;AAAA,IAAA,SACC,qBAAC,SAAA,EAAM,SAAS,SAAS,WAAU,yCAChC,UAAA;AAAA,MAAA;AAAA,MACA,YAAY,oBAAC,QAAA,EAAK,WAAU,mBAAkB,UAAA,IAAA,CAAC;AAAA,IAAA,GAClD;AAAA,IAGD;AAAA,KAEC,cAAc,SAAS,uBACvB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAG,OAAO;AAAA,QACd,WAAW,WAAW,QAAQ,sBAAsB,QAAQ,sBAAsB,OAAO;AAAA,QACzF,aAAU;AAAA,QAET,mBAAS,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1B,GAEJ;AAEJ;AAEA,UAAU,cAAc;"}

package/dist/components/forms/form-field/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './form-field';
+export type { FormFieldProps, ValidationState } from './form-field';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/form-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/forms/form-input/form-input.d.ts

@@ -0,0 +1,60 @@
+import { InputProps } from '../input/input';
+import { FormSpacing } from '../../../theme/size-tokens';
+export type FormInputProps = Omit<InputProps, 'validationState'> & {
+    /** Label text displayed above the input */
+    label?: string;
+    /** Helper text displayed below input */
+    helperText?: string;
+    /** Spacing between label, input, and helper text */
+    spacing?: FormSpacing;
+    /** Error message to display */
+    error?: string;
+    /** Custom validation rule */
+    pattern?: string;
+    /** Custom validation message */
+    title?: string;
+    /** Input alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Reserve space for error message to prevent layout shift */
+    reserveMessageSpace?: boolean;
+};
+/**
+ * FormInput - Input wrapped with FormField for label and error display
+ *
+ * Uses native HTML5 validation. Set `pattern` and `title` for custom validation messages.
+ *
+ * **Validation State:**
+ * - When `error` prop is provided, the validation state is set to 'error', the input displays
+ *   error styling (red border), and the error message is shown below the input
+ * - The `error` prop takes precedence over `helperText` - only one is displayed at a time
+ * - Without an error, `helperText` is displayed in default styling
+ *
+ * @example
+ * ```tsx
+ * // Simple required email
+ * <FormInput label="Email" type="email" required placeholder="you@example.com" />
+ *
+ * // With error state
+ * <FormInput label="Email" error="Invalid email address" helperText="We'll never share" />
+ *
+ * // With custom validation message
+ * <FormInput
+ *   label="Corporate Email"
+ *   type="email"
+ *   required
+ *   pattern=".+@company\.com"
+ *   title="Please use your company email address"
+ *   placeholder="you@company.com"
+ * />
+ *
+ * // Number with range
+ * <FormInput label="Age" type="number" min={18} max={120} required />
+ *
+ * ```
+ */
+declare function FormInput({ label, helperText, spacing, error, required, disabled, id, pattern, title, width, align, reserveMessageSpace, onChange, ...inputProps }: Readonly<FormInputProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace FormInput {
+    var displayName: string;
+}
+export default FormInput;
+//# sourceMappingURL=form-input.d.ts.map

package/dist/components/forms/form-input/form-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-input.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-input/form-input.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,iBAAiB,CAAC,GAAG;IACjE,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,8DAA8D;IAC9D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,iBAAS,SAAS,CAAC,EAEjB,KAAK,EACL,UAAU,EACV,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,OAAO,EACP,KAAK,EACL,KAAK,EACL,KAAgB,EAChB,mBAA2B,EAC3B,QAAQ,EACR,GAAG,UAAU,EACd,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAyB1B;kBAzCQ,SAAS;;;AA6ClB,eAAe,SAAS,CAAC"}

package/dist/components/forms/form-input/form-input.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import FormField from "../form-field/form-field.js";
+import Input from "../input/input.js";
+function FormInput({
+  // FormField props
+  label,
+  helperText,
+  spacing,
+  error,
+  required,
+  disabled,
+  id,
+  pattern,
+  title,
+  width,
+  align = "center",
+  reserveMessageSpace = false,
+  onChange,
+  ...inputProps
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      label,
+      helperText,
+      spacing,
+      error,
+      required,
+      disabled,
+      id,
+      width,
+      align,
+      reserveMessageSpace,
+      children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...inputProps,
+          onChange,
+          required,
+          disabled,
+          id,
+          pattern,
+          title
+        }
+      )
+    }
+  );
+}
+FormInput.displayName = "FormInput";
+export {
+  FormInput as default
+};
+//# sourceMappingURL=form-input.js.map

package/dist/components/forms/form-input/form-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-input.js","sources":["../../../../src/components/forms/form-input/form-input.tsx"],"sourcesContent":["import FormField from '../form-field/form-field';\nimport Input, { type InputProps } from '../input/input';\nimport type { FormSpacing } from '../../../theme/size-tokens';\n\nexport type FormInputProps = Omit<InputProps, 'validationState'> & {\n  /** Label text displayed above the input */\n  label?: string;\n  /** Helper text displayed below input */\n  helperText?: string;\n  /** Spacing between label, input, and helper text */\n  spacing?: FormSpacing;\n  /** Error message to display */\n  error?: string;\n  /** Custom validation rule */\n  pattern?: string;\n  /** Custom validation message */\n  title?: string;\n  /** Input alignment */\n  align?: 'left' | 'center' | 'right';\n  /** Reserve space for error message to prevent layout shift */\n  reserveMessageSpace?: boolean;\n};\n\n/**\n * FormInput - Input wrapped with FormField for label and error display\n *\n * Uses native HTML5 validation. Set `pattern` and `title` for custom validation messages.\n *\n * **Validation State:**\n * - When `error` prop is provided, the validation state is set to 'error', the input displays\n *   error styling (red border), and the error message is shown below the input\n * - The `error` prop takes precedence over `helperText` - only one is displayed at a time\n * - Without an error, `helperText` is displayed in default styling\n *\n * @example\n * ```tsx\n * // Simple required email\n * <FormInput label=\"Email\" type=\"email\" required placeholder=\"you@example.com\" />\n *\n * // With error state\n * <FormInput label=\"Email\" error=\"Invalid email address\" helperText=\"We'll never share\" />\n *\n * // With custom validation message\n * <FormInput\n *   label=\"Corporate Email\"\n *   type=\"email\"\n *   required\n *   pattern=\".+@company\\.com\"\n *   title=\"Please use your company email address\"\n *   placeholder=\"you@company.com\"\n * />\n *\n * // Number with range\n * <FormInput label=\"Age\" type=\"number\" min={18} max={120} required />\n *\n * ```\n */\nfunction FormInput({\n  // FormField props\n  label,\n  helperText,\n  spacing,\n  error,\n  required,\n  disabled,\n  id,\n  pattern,\n  title,\n  width,\n  align = 'center',\n  reserveMessageSpace = false,\n  onChange,\n  ...inputProps\n}: Readonly<FormInputProps>) {\n  return (\n    <FormField\n      label={label}\n      helperText={helperText}\n      spacing={spacing}\n      error={error}\n      required={required}\n      disabled={disabled}\n      id={id}\n      width={width}\n      align={align}\n      reserveMessageSpace={reserveMessageSpace}\n    >\n      <Input\n        {...inputProps}\n        onChange={onChange}\n        required={required}\n        disabled={disabled}\n        id={id}\n        pattern={pattern}\n        title={title}\n      />\n    </FormField>\n  );\n}\n\nFormInput.displayName = 'FormInput';\n\nexport default FormInput;\n"],"names":[],"mappings":";;;AAyDA,SAAS,UAAU;AAAA;AAAA,EAEjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,sBAAsB;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAEA,UAAU,cAAc;"}