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

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

@@ -0,0 +1,32 @@
+import { SelectProps } from '../select/select';
+import { FormSpacing } from '../../../theme/size-tokens';
+export type FormSelectProps = Omit<SelectProps, 'validationState' | 'label'> & {
+    /** Label text displayed above the select */
+    label?: string;
+    /** Helper text displayed below select */
+    helperText?: string;
+    /** Spacing between label, select, and helper text */
+    spacing?: FormSpacing;
+    /** Error message to display */
+    error?: string;
+    /** Placeholder option text displayed as first disabled option */
+    selectLabel?: string;
+};
+/**
+ * FormSelect - Select wrapped with FormField for label and error display
+ *
+ * @example
+ * ```tsx
+ * <FormSelect label="Country" required>
+ *   <SelectItem value="">Select a country</SelectItem>
+ *   <SelectItem value="us">United States</SelectItem>
+ *   <SelectItem value="uk">United Kingdom</SelectItem>
+ * </FormSelect>
+ * ```
+ */
+declare function FormSelect({ label, helperText, spacing, error, required, disabled, id, selectLabel, ...selectProps }: Readonly<FormSelectProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace FormSelect {
+    var displayName: string;
+}
+export default FormSelect;
+//# sourceMappingURL=form-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-select.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-select/form-select.tsx"],"names":[],"mappings":"AACA,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,iBAAiB,GAAG,OAAO,CAAC,GAAG;IAC7E,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,iBAAS,UAAU,CAAC,EAElB,KAAK,EACL,UAAU,EACV,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,WAAW,EACX,GAAG,WAAW,EACf,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAc3B;kBAzBQ,UAAU;;;AA6BnB,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import FormField from "../form-field/form-field.js";
+import Select from "../select/select.js";
+function FormSelect({
+  // FormField props
+  label,
+  helperText,
+  spacing,
+  error,
+  required,
+  disabled,
+  id,
+  selectLabel,
+  ...selectProps
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      label,
+      helperText,
+      spacing,
+      error,
+      required,
+      disabled,
+      id,
+      children: /* @__PURE__ */ jsx(Select, { ...selectProps, label: selectLabel, required, disabled, id })
+    }
+  );
+}
+FormSelect.displayName = "FormSelect";
+export {
+  FormSelect as default
+};
+//# sourceMappingURL=form-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-select.js","sources":["../../../../src/components/forms/form-select/form-select.tsx"],"sourcesContent":["import FormField from '../form-field/form-field';\nimport Select, { type SelectProps } from '../select/select';\nimport type { FormSpacing } from '../../../theme/size-tokens';\n\nexport type FormSelectProps = Omit<SelectProps, 'validationState' | 'label'> & {\n  /** Label text displayed above the select */\n  label?: string;\n  /** Helper text displayed below select */\n  helperText?: string;\n  /** Spacing between label, select, and helper text */\n  spacing?: FormSpacing;\n  /** Error message to display */\n  error?: string;\n  /** Placeholder option text displayed as first disabled option */\n  selectLabel?: string;\n};\n\n/**\n * FormSelect - Select wrapped with FormField for label and error display\n *\n * @example\n * ```tsx\n * <FormSelect label=\"Country\" required>\n *   <SelectItem value=\"\">Select a country</SelectItem>\n *   <SelectItem value=\"us\">United States</SelectItem>\n *   <SelectItem value=\"uk\">United Kingdom</SelectItem>\n * </FormSelect>\n * ```\n */\nfunction FormSelect({\n  // FormField props\n  label,\n  helperText,\n  spacing,\n  error,\n  required,\n  disabled,\n  id,\n  selectLabel,\n  ...selectProps\n}: Readonly<FormSelectProps>) {\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    >\n      <Select {...selectProps} label={selectLabel} required={required} disabled={disabled} id={id} />\n    </FormField>\n  );\n}\n\nFormSelect.displayName = 'FormSelect';\n\nexport default FormSelect;\n"],"names":[],"mappings":";;;AA6BA,SAAS,WAAW;AAAA;AAAA,EAElB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA,oBAAC,UAAQ,GAAG,aAAa,OAAO,aAAa,UAAoB,UAAoB,GAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAGnG;AAEA,WAAW,cAAc;"}

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

@@ -0,0 +1,31 @@
+import { TextareaProps } from '../textarea/textarea';
+import { FormSpacing } from '../../../theme/size-tokens';
+export type FormTextareaProps = Omit<TextareaProps, 'validationState'> & {
+    /** Label text displayed above the textarea */
+    label?: string;
+    /** Helper text displayed below textarea */
+    helperText?: string;
+    /** Spacing between label, textarea, and helper text */
+    spacing?: FormSpacing;
+    /** Error message to display */
+    error?: string;
+};
+/**
+ * FormTextarea - Textarea wrapped with FormField for label and error display
+ *
+ * @example
+ * ```tsx
+ * <FormTextarea
+ *   label="Description"
+ *   placeholder="Enter a description..."
+ *   required
+ *   minLength={10}
+ * />
+ * ```
+ */
+declare function FormTextarea({ label, helperText, spacing, error, required, disabled, id, onChange, ...textareaProps }: Readonly<FormTextareaProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace FormTextarea {
+    var displayName: string;
+}
+export default FormTextarea;
+//# sourceMappingURL=form-textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-textarea/form-textarea.tsx"],"names":[],"mappings":"AACA,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,EAAE,iBAAiB,CAAC,GAAG;IACvE,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,iBAAS,YAAY,CAAC,EAEpB,KAAK,EACL,UAAU,EACV,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAc7B;kBAzBQ,YAAY;;;AA6BrB,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import FormField from "../form-field/form-field.js";
+import Textarea from "../textarea/textarea.js";
+function FormTextarea({
+  // FormField props
+  label,
+  helperText,
+  spacing,
+  error,
+  required,
+  disabled,
+  id,
+  onChange,
+  ...textareaProps
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      label,
+      helperText,
+      spacing,
+      error,
+      required,
+      disabled,
+      id,
+      children: /* @__PURE__ */ jsx(Textarea, { ...textareaProps, onChange, required, disabled, id })
+    }
+  );
+}
+FormTextarea.displayName = "FormTextarea";
+export {
+  FormTextarea as default
+};
+//# sourceMappingURL=form-textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-textarea.js","sources":["../../../../src/components/forms/form-textarea/form-textarea.tsx"],"sourcesContent":["import FormField from '../form-field/form-field';\nimport Textarea, { type TextareaProps } from '../textarea/textarea';\nimport type { FormSpacing } from '../../../theme/size-tokens';\n\nexport type FormTextareaProps = Omit<TextareaProps, 'validationState'> & {\n  /** Label text displayed above the textarea */\n  label?: string;\n  /** Helper text displayed below textarea */\n  helperText?: string;\n  /** Spacing between label, textarea, and helper text */\n  spacing?: FormSpacing;\n  /** Error message to display */\n  error?: string;\n};\n\n/**\n * FormTextarea - Textarea wrapped with FormField for label and error display\n *\n * @example\n * ```tsx\n * <FormTextarea\n *   label=\"Description\"\n *   placeholder=\"Enter a description...\"\n *   required\n *   minLength={10}\n * />\n * ```\n */\nfunction FormTextarea({\n  // FormField props\n  label,\n  helperText,\n  spacing,\n  error,\n  required,\n  disabled,\n  id,\n  onChange,\n  ...textareaProps\n}: Readonly<FormTextareaProps>) {\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    >\n      <Textarea {...textareaProps} onChange={onChange} required={required} disabled={disabled} id={id} />\n    </FormField>\n  );\n}\n\nFormTextarea.displayName = 'FormTextarea';\n\nexport default FormTextarea;\n"],"names":[],"mappings":";;;AA4BA,SAAS,aAAa;AAAA;AAAA,EAEpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,UAAA,EAAU,GAAG,eAAe,UAAoB,UAAoB,UAAoB,GAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAGvG;AAEA,aAAa,cAAc;"}

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

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

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

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

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

@@ -0,0 +1,71 @@
+import { default as React } from 'react';
+import { InteractiveSize, InputWidth, ValidationState } from '../../../theme/size-tokens';
+import { AutocompleteOption } from '../../../theme/tokens';
+export type { ValidationState };
+export type InputProps = {
+    /** Current input value (controlled) */
+    value?: string;
+    /** Default value for uncontrolled input */
+    defaultValue?: string;
+    /** Change event handler for controlled input */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Focus event handler */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Blur event handler */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Placeholder text displayed when input is empty */
+    placeholder?: string;
+    /** Disables input interaction and applies disabled styling */
+    disabled?: boolean;
+    /** HTML input type attribute */
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+    /** Accessible label for screen readers */
+    ariaLabel?: string;
+    /** React ref for the input element */
+    ref?: React.Ref<HTMLInputElement>;
+    /** HTML id attribute for the input */
+    id?: string;
+    /** HTML name attribute for form submission */
+    name?: string;
+    /** Marks input as required for form validation */
+    required?: boolean;
+    /** Size variant - uses unified size system */
+    size?: InteractiveSize;
+    /** Width of the input field - uses semantic sizing */
+    width?: InputWidth;
+    /** Visual validation state affecting border color and styling */
+    validationState?: ValidationState;
+    /** HTML autocomplete attribute */
+    autoComplete?: AutocompleteOption;
+    /** Maximum length of input value */
+    maxLength?: number;
+    /** Minimum length of input value */
+    minLength?: number;
+    /** Custom validation rule */
+    pattern?: string;
+    /** Custom validation message */
+    title?: string;
+    /** Makes input read-only */
+    readOnly?: boolean;
+    /** Minimum value for number inputs */
+    min?: number | string;
+    /** Maximum value for number inputs */
+    max?: number | string;
+};
+/**
+ * Input - Accessible text input with validation state support
+ *
+ * @example
+ * ```tsx
+ * <Input placeholder="Enter email" type="email" />
+ * <Input validationState="error" placeholder="Invalid input" />
+ * <Input size="lg" placeholder="Large input" />
+ * <Input width="sm" placeholder="ZIP" type="text" />
+ * ```
+ */
+declare function Input({ value, defaultValue, onChange, onFocus, onBlur, placeholder, disabled, type, ariaLabel, ref, id, name, required, size, width, validationState, autoComplete, maxLength, minLength, pattern, title, readOnly, min, max }: Readonly<InputProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Input {
+    var displayName: string;
+}
+export default Input;
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,eAAe,EACrB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC,MAAM,MAAM,UAAU,GAAG;IACvB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,0BAA0B;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,yBAAyB;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC3E,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sDAAsD;IACtD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iEAAiE;IACjE,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kCAAkC;IAClC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,MAAM,EACN,WAAW,EACX,QAAgB,EAChB,IAAa,EACb,SAAS,EACT,GAAG,EACH,EAAE,EACF,IAAI,EACJ,QAAgB,EAChB,IAAW,EACX,KAAK,EACL,eAA2B,EAC3B,YAAY,EACZ,SAAS,EACT,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAgB,EAChB,GAAG,EACH,GAAG,EACJ,EAAE,QAAQ,CAAC,UAAU,CAAC,2CA+BtB;kBAxDQ,KAAK;;;AA4Dd,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { inputWidthSizes, getInputClasses } from "../../../theme/size-tokens.js";
+function Input({
+  value,
+  defaultValue,
+  onChange,
+  onFocus,
+  onBlur,
+  placeholder,
+  disabled = false,
+  type = "text",
+  ariaLabel,
+  ref,
+  id,
+  name,
+  required = false,
+  size = "md",
+  width,
+  validationState = "neutral",
+  autoComplete,
+  maxLength,
+  minLength,
+  pattern,
+  title,
+  readOnly = false,
+  min,
+  max
+}) {
+  const widthClass = width ? inputWidthSizes[width] : "w-full";
+  const inputClasses = `${getInputClasses(size, validationState)} ${widthClass}`.trim();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      value,
+      defaultValue,
+      ref,
+      onChange,
+      onFocus,
+      onBlur,
+      placeholder,
+      autoComplete,
+      disabled,
+      "aria-label": ariaLabel,
+      id,
+      name,
+      required,
+      readOnly,
+      maxLength,
+      minLength,
+      pattern,
+      title,
+      min,
+      max,
+      "aria-invalid": validationState === "error",
+      className: inputClasses
+    }
+  );
+}
+Input.displayName = "Input";
+export {
+  Input as default
+};
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../../src/components/forms/input/input.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  getInputClasses,\n  inputWidthSizes,\n  type InteractiveSize,\n  type InputWidth,\n  type ValidationState\n} from '../../../theme/size-tokens';\nimport { AutocompleteOption } from '../../../theme/tokens';\n\nexport type { ValidationState };\n\nexport type InputProps = {\n  /** Current input value (controlled) */\n  value?: string;\n  /** Default value for uncontrolled input */\n  defaultValue?: string;\n  /** Change event handler for controlled input */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Focus event handler */\n  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  /** Blur event handler */\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  /** Placeholder text displayed when input is empty */\n  placeholder?: string;\n  /** Disables input interaction and applies disabled styling */\n  disabled?: boolean;\n  /** HTML input type attribute */\n  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';\n  /** Accessible label for screen readers */\n  ariaLabel?: string;\n  /** React ref for the input element */\n  ref?: React.Ref<HTMLInputElement>;\n  /** HTML id attribute for the input */\n  id?: string;\n  /** HTML name attribute for form submission */\n  name?: string;\n  /** Marks input as required for form validation */\n  required?: boolean;\n  /** Size variant - uses unified size system */\n  size?: InteractiveSize;\n  /** Width of the input field - uses semantic sizing */\n  width?: InputWidth;\n  /** Visual validation state affecting border color and styling */\n  validationState?: ValidationState;\n  /** HTML autocomplete attribute */\n  autoComplete?: AutocompleteOption;\n  /** Maximum length of input value */\n  maxLength?: number;\n  /** Minimum length of input value */\n  minLength?: number;\n  /** Custom validation rule */\n  pattern?: string;\n  /** Custom validation message */\n  title?: string;\n  /** Makes input read-only */\n  readOnly?: boolean;\n  /** Minimum value for number inputs */\n  min?: number | string;\n  /** Maximum value for number inputs */\n  max?: number | string;\n};\n\n/**\n * Input - Accessible text input with validation state support\n *\n * @example\n * ```tsx\n * <Input placeholder=\"Enter email\" type=\"email\" />\n * <Input validationState=\"error\" placeholder=\"Invalid input\" />\n * <Input size=\"lg\" placeholder=\"Large input\" />\n * <Input width=\"sm\" placeholder=\"ZIP\" type=\"text\" />\n * ```\n */\nfunction Input({\n  value,\n  defaultValue,\n  onChange,\n  onFocus,\n  onBlur,\n  placeholder,\n  disabled = false,\n  type = 'text',\n  ariaLabel,\n  ref,\n  id,\n  name,\n  required = false,\n  size = 'md',\n  width,\n  validationState = 'neutral',\n  autoComplete,\n  maxLength,\n  minLength,\n  pattern,\n  title,\n  readOnly = false,\n  min,\n  max\n}: Readonly<InputProps>) {\n  const widthClass = width ? inputWidthSizes[width] : 'w-full';\n  const inputClasses = `${getInputClasses(size, validationState)} ${widthClass}`.trim();\n\n  return (\n    <input\n      type={type}\n      value={value}\n      defaultValue={defaultValue}\n      ref={ref}\n      onChange={onChange}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      placeholder={placeholder}\n      autoComplete={autoComplete}\n      disabled={disabled}\n      aria-label={ariaLabel}\n      id={id}\n      name={name}\n      required={required}\n      readOnly={readOnly}\n      maxLength={maxLength}\n      minLength={minLength}\n      pattern={pattern}\n      title={title}\n      min={min}\n      max={max}\n      aria-invalid={validationState === 'error'}\n      className={inputClasses}\n    />\n  );\n}\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":[],"mappings":";;AA2EA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,aAAa,QAAQ,gBAAgB,KAAK,IAAI;AACpD,QAAM,eAAe,GAAG,gBAAgB,MAAM,eAAe,CAAC,IAAI,UAAU,GAAG,KAAA;AAE/E,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,MACA,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAc,oBAAoB;AAAA,MAClC,WAAW;AAAA,IAAA;AAAA,EAAA;AAGjB;AAEA,MAAM,cAAc;"}

package/dist/components/forms/input-group/index.d.ts

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

package/dist/components/forms/input-group/index.d.ts.map

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

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

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { ValidationState } from '../../../theme/size-tokens';
+export type InputGroupProps = {
+    /** Input component - typically Input element */
+    children: ReactNode;
+    /** Element displayed before the input - icons or text */
+    prefix?: ReactNode;
+    /** Element displayed after the input - text or button */
+    suffix?: ReactNode;
+    /** Visual validation state */
+    validationState?: ValidationState;
+    /** Disables the input group */
+    disabled?: boolean;
+    /** Additional CSS classes for the input group container */
+    className?: string;
+};
+/**
+ * InputGroup - Combines input with prefix/suffix elements
+ *
+ * Perfect for search inputs, URL inputs, currency inputs, etc.
+ * Automatically styles child inputs to remove borders and blend with the group.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup prefix={<Icon name="search" />}>
+ *   <Input placeholder="Search..." />
+ * </InputGroup>
+ *
+ * <InputGroup prefix="$" suffix=".00">
+ *   <Input type="number" placeholder="0" />
+ * </InputGroup>
+ *
+ * <InputGroup suffix={<Button size="sm">Search</Button>}>
+ *   <Input placeholder="Enter search term" />
+ * </InputGroup>
+ * ```
+ */
+declare function InputGroup({ children, prefix, suffix, validationState, disabled, className }: Readonly<InputGroupProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace InputGroup {
+    var displayName: string;
+}
+export default InputGroup;
+//# sourceMappingURL=input-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA8C,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,KAAK,eAAe,EAA2B,MAAM,4BAA4B,CAAC;AAE3F,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,QAAQ,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmBF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,eAA2B,EAC3B,QAAgB,EAChB,SAAS,EACV,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA6C3B;kBApDQ,UAAU;;;AAwDnB,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { isValidElement, cloneElement } from "react";
+import { validationBorderClasses } from "../../../theme/size-tokens.js";
+const containerBaseClasses = "inline-flex items-stretch rounded-lg border shadow-sm bg-background focus-within:ring-2 focus-within:ring-ring/20 transition-colors duration-150 overflow-hidden";
+const inputResetClasses = [
+  "[&>input]:border-0 [&>input]:shadow-none [&>input]:rounded-none [&>input]:ring-0",
+  "[&>input]:focus:ring-0 [&>input]:focus:border-0 [&>input]:bg-transparent",
+  "[&>input]:flex-1 [&>input]:min-w-0"
+].join(" ");
+const buttonResetClasses = [
+  "[&_button]:rounded-none [&_button]:border-0 [&_button]:shadow-none [&_button]:m-0",
+  "[&_button]:h-full"
+].join(" ");
+function InputGroup({
+  children,
+  prefix,
+  suffix,
+  validationState = "neutral",
+  disabled = false,
+  className
+}) {
+  const isTextPrefix = typeof prefix === "string" || typeof prefix === "number";
+  const isTextSuffix = typeof suffix === "string" || typeof suffix === "number";
+  const borderClass = validationState === "neutral" ? "border-input focus-within:border-ring" : validationBorderClasses[validationState].split(" ")[0];
+  const disabledClass = disabled ? "opacity-50 cursor-not-allowed" : "";
+  const enhancedChild = isValidElement(children) && disabled ? cloneElement(children, { disabled: true }) : children;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${containerBaseClasses} ${borderClass} ${inputResetClasses} ${buttonResetClasses} ${disabledClass} ${className ?? ""}`.trim(),
+      children: [
+        prefix && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `flex items-center shrink-0 ${isTextPrefix ? "px-3 bg-muted/50 text-muted-foreground text-sm" : "px-3 text-muted-foreground"}`,
+            children: prefix
+          }
+        ),
+        enhancedChild,
+        suffix && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: isTextSuffix ? "flex items-center px-3 bg-muted/50 text-muted-foreground text-sm shrink-0" : "flex items-stretch shrink-0",
+            children: suffix
+          }
+        )
+      ]
+    }
+  );
+}
+InputGroup.displayName = "InputGroup";
+export {
+  InputGroup as default
+};
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","sources":["../../../../src/components/forms/input-group/input-group.tsx"],"sourcesContent":["import { ReactNode, ReactElement, cloneElement, isValidElement } from 'react';\n\nimport { type ValidationState, validationBorderClasses } from '../../../theme/size-tokens';\n\nexport type InputGroupProps = {\n  /** Input component - typically Input element */\n  children: ReactNode;\n  /** Element displayed before the input - icons or text */\n  prefix?: ReactNode;\n  /** Element displayed after the input - text or button */\n  suffix?: ReactNode;\n  /** Visual validation state */\n  validationState?: ValidationState;\n  /** Disables the input group */\n  disabled?: boolean;\n  /** Additional CSS classes for the input group container */\n  className?: string;\n};\n\n// Base container styles\nconst containerBaseClasses =\n  'inline-flex items-stretch rounded-lg border shadow-sm bg-background focus-within:ring-2 focus-within:ring-ring/20 transition-colors duration-150 overflow-hidden';\n\n// CSS selectors to style nested inputs without cloning\nconst inputResetClasses = [\n  '[&>input]:border-0 [&>input]:shadow-none [&>input]:rounded-none [&>input]:ring-0',\n  '[&>input]:focus:ring-0 [&>input]:focus:border-0 [&>input]:bg-transparent',\n  '[&>input]:flex-1 [&>input]:min-w-0'\n].join(' ');\n\n// CSS selectors to style nested buttons\nconst buttonResetClasses = [\n  '[&_button]:rounded-none [&_button]:border-0 [&_button]:shadow-none [&_button]:m-0',\n  '[&_button]:h-full'\n].join(' ');\n\n/**\n * InputGroup - Combines input with prefix/suffix elements\n *\n * Perfect for search inputs, URL inputs, currency inputs, etc.\n * Automatically styles child inputs to remove borders and blend with the group.\n *\n * @example\n * ```tsx\n * <InputGroup prefix={<Icon name=\"search\" />}>\n *   <Input placeholder=\"Search...\" />\n * </InputGroup>\n *\n * <InputGroup prefix=\"$\" suffix=\".00\">\n *   <Input type=\"number\" placeholder=\"0\" />\n * </InputGroup>\n *\n * <InputGroup suffix={<Button size=\"sm\">Search</Button>}>\n *   <Input placeholder=\"Enter search term\" />\n * </InputGroup>\n * ```\n */\nfunction InputGroup({\n  children,\n  prefix,\n  suffix,\n  validationState = 'neutral',\n  disabled = false,\n  className\n}: Readonly<InputGroupProps>) {\n  const isTextPrefix = typeof prefix === 'string' || typeof prefix === 'number';\n  const isTextSuffix = typeof suffix === 'string' || typeof suffix === 'number';\n\n  // Get border class based on validation state\n  const borderClass =\n    validationState === 'neutral'\n      ? 'border-input focus-within:border-ring'\n      : validationBorderClasses[validationState].split(' ')[0]; // Just the border color\n\n  const disabledClass = disabled ? 'opacity-50 cursor-not-allowed' : '';\n\n  // Pass disabled state to child input\n  const enhancedChild =\n    isValidElement(children) && disabled\n      ? cloneElement(children as ReactElement<{ disabled?: boolean }>, { disabled: true })\n      : children;\n\n  return (\n    <div\n      className={`${containerBaseClasses} ${borderClass} ${inputResetClasses} ${buttonResetClasses} ${disabledClass} ${className ?? ''}`.trim()}\n    >\n      {prefix && (\n        <div\n          className={`flex items-center shrink-0 ${isTextPrefix ? 'px-3 bg-muted/50 text-muted-foreground text-sm' : 'px-3 text-muted-foreground'}`}\n        >\n          {prefix}\n        </div>\n      )}\n\n      {enhancedChild}\n\n      {suffix && (\n        <div\n          className={\n            isTextSuffix\n              ? 'flex items-center px-3 bg-muted/50 text-muted-foreground text-sm shrink-0'\n              : 'flex items-stretch shrink-0'\n          }\n        >\n          {suffix}\n        </div>\n      )}\n    </div>\n  );\n}\n\nInputGroup.displayName = 'InputGroup';\n\nexport default InputGroup;\n"],"names":[],"mappings":";;;AAoBA,MAAM,uBACJ;AAGF,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAGV,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAuBV,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX;AACF,GAA8B;AAC5B,QAAM,eAAe,OAAO,WAAW,YAAY,OAAO,WAAW;AACrE,QAAM,eAAe,OAAO,WAAW,YAAY,OAAO,WAAW;AAGrE,QAAM,cACJ,oBAAoB,YAChB,0CACA,wBAAwB,eAAe,EAAE,MAAM,GAAG,EAAE,CAAC;AAE3D,QAAM,gBAAgB,WAAW,kCAAkC;AAGnE,QAAM,gBACJ,eAAe,QAAQ,KAAK,WACxB,aAAa,UAAkD,EAAE,UAAU,KAAA,CAAM,IACjF;AAEN,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,oBAAoB,IAAI,WAAW,IAAI,iBAAiB,IAAI,kBAAkB,IAAI,aAAa,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,MAElI,UAAA;AAAA,QAAA,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,8BAA8B,eAAe,mDAAmD,4BAA4B;AAAA,YAEtI,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ;AAAA,QAEA,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WACE,eACI,8EACA;AAAA,YAGL,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,WAAW,cAAc;"}

package/dist/components/forms/multi-select/index.d.ts

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

package/dist/components/forms/multi-select/index.d.ts.map

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

package/dist/components/forms/multi-select/multi-select.d.ts

@@ -0,0 +1,75 @@
+import { InteractiveSize } from '../../../theme/size-tokens';
+export type MultiSelectOption = {
+    value: string;
+    label: string;
+};
+export type MultiSelectProps = {
+    /**
+     * Available options to select from
+     */
+    options: MultiSelectOption[];
+    /**
+     * Currently selected values
+     */
+    value?: string[];
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (values: string[]) => void;
+    /**
+     * Placeholder text when no selection
+     */
+    placeholder?: string;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Maximum number of selections allowed
+     */
+    maxSelections?: number;
+    /**
+     * Size variant - uses unified size system
+     */
+    size?: InteractiveSize;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Text to display when no options are found
+     */
+    noneFoundText?: string;
+};
+/**
+ * MultiSelect - Select multiple options from a dropdown list
+ *
+ * Features:
+ * - Multiple selections with chips
+ * - Searchable dropdown
+ * - Keyboard navigation
+ * - Max selections limit
+ * - Clearable
+ * - Accessible
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<string[]>([]);
+ *
+ * <MultiSelect
+ *   options={[
+ *     { value: '1', label: 'Option 1' },
+ *     { value: '2', label: 'Option 2' }
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Select options..."
+ * />
+ * ```
+ */
+declare function MultiSelect({ options, value, onChange, placeholder, noneFoundText, disabled, maxSelections, size, className }: Readonly<MultiSelectProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiSelect {
+    var displayName: string;
+}
+export default MultiSelect;
+//# sourceMappingURL=multi-select.d.ts.map

package/dist/components/forms/multi-select/multi-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/multi-select/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8C,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE9G,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAU,EACV,QAAQ,EACR,WAAiC,EACjC,aAAkC,EAClC,QAAgB,EAChB,aAAa,EACb,IAAW,EACX,SAAc,EACf,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CA6R5B;kBAvSQ,WAAW;;;AA2SpB,eAAe,WAAW,CAAC"}