@pautena/react-design-system 2.0.0-alpha.1b → 2.0.0-alpha.5

package/dist/components/form-dialog/form-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-dialog.mjs","sources":["../../../src/components/form-dialog/form-dialog.tsx"],"sourcesContent":["import { Loader2, X } from \"lucide-react\";\nimport type { FormEvent, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport Button from \"@/components/button\";\nimport Dialog, { type DialogSize } from \"@/components/dialog\";\nimport { getFormData } from \"@/utils/forms\";\n\n/**\n * Props for the FormDialog component.\n *\n * @template T - The type of data returned from the form.\n */\nexport interface FormDialogProps<T> {\n  /**\n   * Whether the dialog is open.\n   */\n  open: boolean;\n  /**\n   * The title of the dialog.\n   */\n  title: ReactNode;\n  /**\n   * Optional description rendered under the title.\n   */\n  description?: ReactNode;\n  /**\n   * Whether the dialog is in a loading state.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the dialog is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the submit button is disabled.\n   * @default false\n   */\n  disableAccept?: boolean;\n  /**\n   * Whether the cancel button is disabled.\n   * @default false\n   */\n  disableCancel?: boolean;\n  /**\n   * The text to display on the submit button.\n   * @default \"Submit\"\n   */\n  submitText?: string;\n  /**\n   * The text to display on the cancel button.\n   * @default \"Cancel\"\n   */\n  cancelText?: string;\n  /**\n   * Size variant for the dialog content.\n   * @default \"md\"\n   */\n  size?: DialogSize;\n  /**\n   * Additional class names for the dialog content.\n   */\n  className?: string;\n  /**\n   * Content rendered inside the form.\n   */\n  children?: ReactNode;\n  /**\n   * Callback function to be called when the cancel button is clicked.\n   */\n  onCancel: () => void;\n  /**\n   * Callback function to be called when the submit button is clicked.\n   * @param data - The data to be submitted.\n   */\n  onSubmit: (data: T) => void;\n}\n\n/**\n * Form dialog wrapper with submit handling.\n */\nexport function FormDialog<T>({\n  open,\n  title,\n  description,\n  loading = false,\n  disabled = false,\n  disableAccept = false,\n  disableCancel = false,\n  submitText = \"Submit\",\n  cancelText = \"Cancel\",\n  size = \"md\",\n  className,\n  children,\n  onSubmit,\n  onCancel,\n}: FormDialogProps<T>) {\n  const formId = useId();\n  const closeDisabled = disabled || loading;\n  const cancelDisabled = disabled || loading;\n  const acceptDisabled = disabled || loading;\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    onSubmit(getFormData<T>(event));\n  };\n\n  const titleContent = (\n    <div className=\"flex items-start justify-between gap-4\">\n      <div className=\"flex items-center gap-2\">\n        <span>{title}</span>\n        {loading ? (\n          <Loader2\n            role=\"progressbar\"\n            aria-label=\"loading\"\n            className=\"h-4 w-4 animate-spin text-muted-foreground\"\n          />\n        ) : null}\n      </div>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        aria-label=\"close\"\n        disabled={closeDisabled}\n        onClick={onCancel}\n      >\n        <X className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </Button>\n    </div>\n  );\n\n  const footer = (\n    <>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        disabled={cancelDisabled || disableCancel}\n        onClick={onCancel}\n      >\n        {cancelText}\n      </Button>\n      <Button\n        type=\"submit\"\n        form={formId}\n        disabled={acceptDisabled || disableAccept}\n      >\n        {loading ? (\n          <span className=\"inline-flex items-center gap-2\">\n            <Loader2 className=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n            {submitText}\n          </span>\n        ) : (\n          submitText\n        )}\n      </Button>\n    </>\n  );\n\n  return (\n    <Dialog\n      open={open}\n      title={titleContent}\n      description={description}\n      size={size}\n      className={className}\n      showCloseButton={false}\n      footer={footer}\n      onClose={onCancel}\n    >\n      <form id={formId} onSubmit={handleSubmit} className=\"space-y-4\">\n        <fieldset disabled={loading || disabled} className=\"space-y-4\">\n          {children}\n        </fieldset>\n      </form>\n    </Dialog>\n  );\n}\n\nexport default FormDialog;\n"],"names":["FormDialog","open","title","description","loading","disabled","disableAccept","disableCancel","submitText","cancelText","size","className","children","onSubmit","onCancel","formId","useId","jsx","Dialog","jsxs","Loader2","Button","X","Fragment","event","getFormData"],"mappings":";;;;;;;AAkFO,SAASA,EAAc;AAAA,EAC5B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAuB;AACrB,QAAMC,IAASC,EAAA;AA8Df,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAjB;AAAA,MACA,OAtDF,gBAAAkB,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAA,gBAAAF,EAAC,UAAM,UAAAf,EAAA,CAAM;AAAA,UACZE,IACC,gBAAAa;AAAA,YAACG;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,WAAU;AAAA,YAAA;AAAA,UAAA,IAEV;AAAA,QAAA,GACN;AAAA,QACA,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UA1BgBhB,KAAYD;AAAA,YA2B5B,SAASU;AAAA,YAET,UAAA,gBAAAG,EAACK,GAAA,EAAE,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC5C,GACF;AAAA,MAkCE,aAAAnB;AAAA,MACA,MAAAO;AAAA,MACA,WAAAC;AAAA,MACA,iBAAiB;AAAA,MACjB,QAlCF,gBAAAQ,EAAAI,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,UAtCiBhB,KAAYD,KAsCDG;AAAA,YAC5B,SAASO;AAAA,YAER,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAQ;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAMN;AAAA,YACN,UA7CiBV,KAAYD,KA6CDE;AAAA,YAE3B,UAAAF,IACC,gBAAAe,EAAC,QAAA,EAAK,WAAU,kCACd,UAAA;AAAA,cAAA,gBAAAF,EAACG,GAAA,EAAQ,WAAU,wBAAuB,eAAY,QAAO;AAAA,cAC5DZ;AAAA,YAAA,EAAA,CACH,IAEAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ,GACF;AAAA,MAYE,SAASM;AAAA,MAET,4BAAC,QAAA,EAAK,IAAIC,GAAQ,UApED,CAACS,MAAsC;AAC1D,QAAAA,EAAM,eAAA,GACNX,EAASY,EAAeD,CAAK,CAAC;AAAA,MAChC,GAiE8C,WAAU,aAClD,UAAA,gBAAAP,EAAC,YAAA,EAAS,UAAUb,KAAWC,GAAU,WAAU,aAChD,UAAAO,GACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/form-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export type { FormDialogProps } from './form-dialog';
+export { default, default as FormDialog } from './form-dialog';

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

@@ -0,0 +1,63 @@
+import { ChangeEvent, InputHTMLAttributes, MouseEvent, ReactNode } from 'react';
+/**
+ * Supported field sizes for Autocomplete.
+ */
+export type AutocompleteSize = "small" | "medium";
+/**
+ * Props for the Autocomplete component.
+ *
+ * @template T - Option type.
+ */
+export interface AutocompleteProps<T> extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
+    /**
+     * Label shown above the combobox.
+     */
+    label: string;
+    /**
+     * Available options.
+     */
+    options: T[];
+    /**
+     * Current selected option.
+     */
+    value?: T;
+    /**
+     * Helper text rendered below the field.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error text rendered below the field.
+     */
+    error?: ReactNode;
+    /**
+     * Input size variant.
+     * @default "medium"
+     */
+    size?: AutocompleteSize;
+    /**
+     * Optional accent color used for border and text.
+     */
+    color?: string;
+    /**
+     * Shows a spinner while options are loading.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Called when user selects a value.
+     * @param e - Input or option interaction event.
+     * @param value - Trimmed selected value label.
+     */
+    onChangeValue?: (e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>, value: string) => void;
+    /**
+     * Converts options into labels.
+     */
+    getOptionLabel?: (option: T) => string;
+}
+/**
+ * Searchable combobox with local option filtering.
+ *
+ * @template T - Option type.
+ */
+export declare function Autocomplete<T>({ id, label, options, value, helperText, error, size, color, loading, className, disabled, onChangeValue, getOptionLabel, "aria-invalid": ariaInvalid, ...props }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Autocomplete;

package/dist/components/forms/autocomplete/autocomplete.mjs

@@ -0,0 +1,117 @@
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { useState as C, useEffect as j, useMemo as K } from "react";
+import { Field as O, FieldLabel as q, FieldDescription as z, FieldError as A } from "../../ui/field.mjs";
+import { Input as B } from "../../ui/input.mjs";
+import { cn as F } from "../../../lib/utils.mjs";
+import M from "../../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+function U({
+  id: N,
+  label: p,
+  options: f,
+  value: r,
+  helperText: b,
+  error: d,
+  size: L = "medium",
+  color: u,
+  loading: h = !1,
+  className: $,
+  disabled: x,
+  onChangeValue: v,
+  getOptionLabel: k,
+  "aria-invalid": E,
+  ...D
+}) {
+  const a = (e) => k?.(e) ?? String(e), [g, l] = C(!1), [i, m] = C(r ? a(r) : "");
+  j(() => {
+    r !== void 0 && m(a(r));
+  }, [r]);
+  const w = K(() => {
+    const e = i.toLowerCase();
+    return f.filter(
+      (n) => a(n).toLowerCase().includes(e)
+    );
+  }, [i, f]), s = N ?? `${p}-autocomplete`, c = !!d, I = (e, n) => {
+    const o = a(n);
+    m(o), l(!1), v?.(e, o.trim());
+  }, S = (e) => {
+    e.key === "Escape" && l(!1);
+  };
+  return /* @__PURE__ */ y(
+    O,
+    {
+      "data-invalid": c || void 0,
+      className: F("gap-1.5", $),
+      children: [
+        /* @__PURE__ */ t(q, { htmlFor: s, children: p }),
+        /* @__PURE__ */ y("div", { className: "relative", children: [
+          /* @__PURE__ */ t(
+            B,
+            {
+              id: s,
+              role: "combobox",
+              "aria-expanded": g,
+              "aria-controls": `${s}-listbox`,
+              "aria-autocomplete": "list",
+              "aria-busy": h,
+              "aria-invalid": E || c || void 0,
+              value: i,
+              disabled: x,
+              onFocus: () => l(!0),
+              onClick: () => l(!0),
+              onKeyDown: S,
+              onChange: (e) => {
+                m(e.target.value), l(!0), v?.(e, e.target.value.trim());
+              },
+              className: F(
+                "w-full text-sm pr-9",
+                L === "small" ? "h-9 px-2" : "h-10 px-3",
+                c && "border-destructive",
+                x && "opacity-70"
+              ),
+              style: u ? { borderColor: u, color: u } : void 0,
+              ...D
+            }
+          ),
+          h && /* @__PURE__ */ t(
+            M,
+            {
+              role: "progressbar",
+              "aria-label": "loading",
+              className: "pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin"
+            }
+          ),
+          g && w.length > 0 ? /* @__PURE__ */ t(
+            "div",
+            {
+              id: `${s}-listbox`,
+              role: "listbox",
+              className: "absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md border border-input bg-popover p-1 text-popover-foreground shadow-md",
+              children: w.map((e, n) => {
+                const o = a(e);
+                return /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": o === i,
+                    className: "block w-full cursor-pointer rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground",
+                    onClick: (V) => I(V, e),
+                    children: o
+                  },
+                  `${o}-${n}`
+                );
+              })
+            }
+          ) : null
+        ] }),
+        b && !c ? /* @__PURE__ */ t(z, { children: b }) : null,
+        d ? /* @__PURE__ */ t(A, { children: d }) : null
+      ]
+    }
+  );
+}
+export {
+  U as Autocomplete,
+  U as default
+};
+//# sourceMappingURL=autocomplete.mjs.map

package/dist/components/forms/autocomplete/autocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.mjs","sources":["../../../../src/components/forms/autocomplete/autocomplete.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Supported field sizes for Autocomplete.\n */\nexport type AutocompleteSize = \"small\" | \"medium\";\n\n/**\n * Props for the Autocomplete component.\n *\n * @template T - Option type.\n */\nexport interface AutocompleteProps<T>\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"onChange\" | \"value\" | \"defaultValue\"\n  > {\n  /**\n   * Label shown above the combobox.\n   */\n  label: string;\n  /**\n   * Available options.\n   */\n  options: T[];\n  /**\n   * Current selected option.\n   */\n  value?: T;\n  /**\n   * Helper text rendered below the field.\n   */\n  helperText?: ReactNode;\n  /**\n   * Error text rendered below the field.\n   */\n  error?: ReactNode;\n  /**\n   * Input size variant.\n   * @default \"medium\"\n   */\n  size?: AutocompleteSize;\n  /**\n   * Optional accent color used for border and text.\n   */\n  color?: string;\n  /**\n   * Shows a spinner while options are loading.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Called when user selects a value.\n   * @param e - Input or option interaction event.\n   * @param value - Trimmed selected value label.\n   */\n  onChangeValue?: (\n    e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,\n    value: string,\n  ) => void;\n  /**\n   * Converts options into labels.\n   */\n  getOptionLabel?: (option: T) => string;\n}\n\n/**\n * Searchable combobox with local option filtering.\n *\n * @template T - Option type.\n */\nexport function Autocomplete<T>({\n  id,\n  label,\n  options,\n  value,\n  helperText,\n  error,\n  size = \"medium\",\n  color,\n  loading = false,\n  className,\n  disabled,\n  onChangeValue,\n  getOptionLabel,\n  \"aria-invalid\": ariaInvalid,\n  ...props\n}: AutocompleteProps<T>) {\n  const optionLabel = (option: T) => getOptionLabel?.(option) ?? String(option);\n\n  const [open, setOpen] = useState(false);\n  const [inputValue, setInputValue] = useState(value ? optionLabel(value) : \"\");\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setInputValue(optionLabel(value));\n    }\n  }, [value]);\n\n  const renderedOptions = useMemo(() => {\n    const query = inputValue.toLowerCase();\n    return options.filter((option) =>\n      optionLabel(option).toLowerCase().includes(query),\n    );\n  }, [inputValue, options]);\n\n  const inputId = id ?? `${label}-autocomplete`;\n  const hasError = Boolean(error);\n\n  const handleSelect = (e: MouseEvent<HTMLButtonElement>, option: T) => {\n    const nextValue = optionLabel(option);\n    setInputValue(nextValue);\n    setOpen(false);\n    onChangeValue?.(e, nextValue.trim());\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Escape\") {\n      setOpen(false);\n    }\n  };\n\n  return (\n    <Field\n      data-invalid={hasError || undefined}\n      className={cn(\"gap-1.5\", className)}\n    >\n      <FieldLabel htmlFor={inputId}>{label}</FieldLabel>\n\n      <div className=\"relative\">\n        <Input\n          id={inputId}\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-controls={`${inputId}-listbox`}\n          aria-autocomplete=\"list\"\n          aria-busy={loading}\n          aria-invalid={ariaInvalid || hasError || undefined}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setOpen(true)}\n          onClick={() => setOpen(true)}\n          onKeyDown={handleKeyDown}\n          onChange={(event) => {\n            setInputValue(event.target.value);\n            setOpen(true);\n            onChangeValue?.(event, event.target.value.trim());\n          }}\n          className={cn(\n            \"w-full text-sm pr-9\",\n            size === \"small\" ? \"h-9 px-2\" : \"h-10 px-3\",\n            hasError && \"border-destructive\",\n            disabled && \"opacity-70\",\n          )}\n          style={color ? { borderColor: color, color } : undefined}\n          {...props}\n        />\n\n        {loading && (\n          <Loader2\n            role=\"progressbar\"\n            aria-label=\"loading\"\n            className=\"pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin\"\n          />\n        )}\n\n        {open && renderedOptions.length > 0 ? (\n          <div\n            id={`${inputId}-listbox`}\n            role=\"listbox\"\n            className=\"absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md border border-input bg-popover p-1 text-popover-foreground shadow-md\"\n          >\n            {renderedOptions.map((option, index) => {\n              const labelValue = optionLabel(option);\n\n              return (\n                <button\n                  type=\"button\"\n                  key={`${labelValue}-${index}`}\n                  role=\"option\"\n                  aria-selected={labelValue === inputValue}\n                  className=\"block w-full cursor-pointer rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground\"\n                  onClick={(e) => handleSelect(e, option)}\n                >\n                  {labelValue}\n                </button>\n              );\n            })}\n          </div>\n        ) : null}\n      </div>\n\n      {helperText && !hasError ? (\n        <FieldDescription>{helperText}</FieldDescription>\n      ) : null}\n\n      {error ? <FieldError>{error}</FieldError> : null}\n    </Field>\n  );\n}\n\nexport default Autocomplete;\n"],"names":["Autocomplete","id","label","options","value","helperText","error","size","color","loading","className","disabled","onChangeValue","getOptionLabel","ariaInvalid","props","optionLabel","option","open","setOpen","useState","inputValue","setInputValue","useEffect","renderedOptions","useMemo","query","inputId","hasError","handleSelect","nextValue","handleKeyDown","event","jsxs","Field","cn","jsx","FieldLabel","Input","Loader2","index","labelValue","e","FieldDescription","FieldError"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export type { AutocompleteProps, AutocompleteSize } from './autocomplete';
+export { default, default as Autocomplete } from './autocomplete';

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

@@ -0,0 +1,37 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Checkbox } from '../../ui/checkbox';
+/**
+ * Props for the CheckboxField component.
+ */
+export interface CheckboxFieldProps extends Omit<ComponentProps<typeof Checkbox>, "id" | "className"> {
+    /**
+     * Label shown next to the checkbox.
+     */
+    label: string;
+    /**
+     * Helper text rendered below the control.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error text rendered below the control.
+     */
+    error?: ReactNode;
+    /**
+     * Makes the field span the container width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Field id used to connect label and checkbox.
+     */
+    id?: string;
+    /**
+     * Additional CSS classes for the field wrapper.
+     */
+    className?: string;
+}
+/**
+ * Checkbox form wrapper with helper and error states.
+ */
+export declare function CheckboxField({ id, label, helperText, error, fullWidth, className, disabled, ...props }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+export default CheckboxField;

package/dist/components/forms/checkbox-field/checkbox-field.mjs

@@ -0,0 +1,47 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { Checkbox as h } from "../../ui/checkbox.mjs";
+import { Field as f, FieldContent as u, FieldLabel as F, FieldDescription as p, FieldError as v } from "../../ui/field.mjs";
+import { cn as x } from "../../../lib/utils.mjs";
+function E({
+  id: e,
+  label: o,
+  helperText: a,
+  error: l,
+  fullWidth: c = !1,
+  className: s,
+  disabled: r,
+  ...m
+}) {
+  const d = e ?? `${o}-checkbox`, n = !!l;
+  return /* @__PURE__ */ t(
+    f,
+    {
+      orientation: "horizontal",
+      "data-disabled": r || void 0,
+      "data-invalid": n || void 0,
+      className: x(c && "w-full", s),
+      children: [
+        /* @__PURE__ */ i(
+          h,
+          {
+            id: d,
+            disabled: r,
+            "aria-label": o,
+            "aria-invalid": n || void 0,
+            ...m
+          }
+        ),
+        /* @__PURE__ */ t(u, { children: [
+          /* @__PURE__ */ i(F, { htmlFor: d, className: "font-normal", children: o }),
+          a && !n ? /* @__PURE__ */ i(p, { children: a }) : null,
+          l ? /* @__PURE__ */ i(v, { children: l }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  E as CheckboxField,
+  E as default
+};
+//# sourceMappingURL=checkbox-field.mjs.map

package/dist/components/forms/checkbox-field/checkbox-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-field.mjs","sources":["../../../../src/components/forms/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Props for the CheckboxField component.\n */\nexport interface CheckboxFieldProps\n  extends Omit<ComponentProps<typeof Checkbox>, \"id\" | \"className\"> {\n  /**\n   * Label shown next to the checkbox.\n   */\n  label: string;\n  /**\n   * Helper text rendered below the control.\n   */\n  helperText?: ReactNode;\n  /**\n   * Error text rendered below the control.\n   */\n  error?: ReactNode;\n  /**\n   * Makes the field span the container width.\n   * @default false\n   */\n  fullWidth?: boolean;\n  /**\n   * Field id used to connect label and checkbox.\n   */\n  id?: string;\n  /**\n   * Additional CSS classes for the field wrapper.\n   */\n  className?: string;\n}\n\n/**\n * Checkbox form wrapper with helper and error states.\n */\nexport function CheckboxField({\n  id,\n  label,\n  helperText,\n  error,\n  fullWidth = false,\n  className,\n  disabled,\n  ...props\n}: CheckboxFieldProps) {\n  const inputId = id ?? `${label}-checkbox`;\n  const hasError = Boolean(error);\n\n  return (\n    <Field\n      orientation=\"horizontal\"\n      data-disabled={disabled || undefined}\n      data-invalid={hasError || undefined}\n      className={cn(fullWidth && \"w-full\", className)}\n    >\n      <Checkbox\n        id={inputId}\n        disabled={disabled}\n        aria-label={label}\n        aria-invalid={hasError || undefined}\n        {...props}\n      />\n\n      <FieldContent>\n        <FieldLabel htmlFor={inputId} className=\"font-normal\">\n          {label}\n        </FieldLabel>\n\n        {helperText && !hasError ? (\n          <FieldDescription>{helperText}</FieldDescription>\n        ) : null}\n\n        {error ? <FieldError>{error}</FieldError> : null}\n      </FieldContent>\n    </Field>\n  );\n}\n\nexport default CheckboxField;\n"],"names":["CheckboxField","id","label","helperText","error","fullWidth","className","disabled","props","inputId","hasError","jsxs","Field","cn","jsx","Checkbox","FieldContent","FieldLabel","FieldDescription","FieldError"],"mappings":";;;;AA8CO,SAASA,EAAc;AAAA,EAC5B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAuB;AACrB,QAAMC,IAAUR,KAAM,GAAGC,CAAK,aACxBQ,IAAW,EAAQN;AAEzB,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,iBAAeL,KAAY;AAAA,MAC3B,gBAAcG,KAAY;AAAA,MAC1B,WAAWG,EAAGR,KAAa,UAAUC,CAAS;AAAA,MAE9C,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAIN;AAAA,YACJ,UAAAF;AAAA,YACA,cAAYL;AAAA,YACZ,gBAAcQ,KAAY;AAAA,YACzB,GAAGF;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGLQ,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAF,EAACG,GAAA,EAAW,SAASR,GAAS,WAAU,eACrC,UAAAP,GACH;AAAA,UAECC,KAAc,CAACO,IACd,gBAAAI,EAACI,GAAA,EAAkB,aAAW,IAC5B;AAAA,UAEHd,IAAQ,gBAAAU,EAACK,GAAA,EAAY,UAAAf,EAAA,CAAM,IAAgB;AAAA,QAAA,EAAA,CAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,2 @@
+export type { CheckboxFieldProps } from './checkbox-field';
+export { default, default as CheckboxField } from './checkbox-field';

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

@@ -0,0 +1,2 @@
+export type { SelectOption, SelectProps, SelectSize } from './select';
+export { default, default as Select } from './select';

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

@@ -0,0 +1,82 @@
+import { ChangeEvent, ReactNode, SelectHTMLAttributes } from 'react';
+/**
+ * Supported field sizes for Select.
+ */
+export type SelectSize = "small" | "medium";
+/**
+ * Option model accepted by Select.
+ */
+export interface SelectOption {
+    /**
+     * Visual label shown in the list.
+     */
+    label: string;
+    /**
+     * Submitted value.
+     */
+    value: string;
+}
+/**
+ * Props for the Select component.
+ */
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "color"> {
+    /**
+     * Label shown above the select.
+     */
+    label: string;
+    /**
+     * Selected value.
+     */
+    value: string;
+    /**
+     * Select options for native rendering.
+     */
+    options?: SelectOption[];
+    /**
+     * Helper text rendered below the select.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error text rendered below the select.
+     */
+    error?: ReactNode;
+    /**
+     * Shows a spinner while value is loading.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Shows a progress state while options are being fetched.
+     * @default false
+     */
+    fetching?: boolean;
+    /**
+     * Input size variant.
+     * @default "medium"
+     */
+    size?: SelectSize;
+    /**
+     * Makes the select span the container width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Optional accent color used for border and text.
+     */
+    color?: string;
+    /**
+     * Optional option children for compatibility.
+     */
+    children?: ReactNode;
+    /**
+     * Called when the select value changes.
+     * @param e - Native select change event.
+     * @param value - Trimmed selected value.
+     */
+    onChangeValue?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;
+}
+/**
+ * Native select wrapper with loading and fetching states.
+ */
+export declare function Select({ id, label, value, options, helperText, error, loading, fetching, size, fullWidth, className, color, children, onChange, onChangeValue, disabled, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/forms/select/select.mjs

@@ -0,0 +1,82 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { Field as w, FieldLabel as L, FieldDescription as j, FieldError as B } from "../../ui/field.mjs";
+import { cn as c } from "../../../lib/utils.mjs";
+import E from "../../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+const S = (o) => (Array.isArray(o) ? o : [o]).filter(Boolean).map(
+  (a) => a
+).filter((a) => typeof a?.props?.value == "string").map((a) => ({
+  value: a.props.value,
+  label: String(a.props.children ?? a.props.value)
+}));
+function V({
+  id: o,
+  label: i,
+  value: a,
+  options: b,
+  helperText: d,
+  error: s,
+  loading: u = !1,
+  fetching: l = !1,
+  size: f = "medium",
+  fullWidth: y = !1,
+  className: h,
+  color: n,
+  children: x,
+  onChange: F,
+  onChangeValue: A,
+  disabled: p,
+  ...C
+}) {
+  const m = o ?? `${i}-select`, N = b ?? S(x), g = l ? "" : a, v = !!s;
+  return /* @__PURE__ */ t(
+    w,
+    {
+      "data-invalid": v || void 0,
+      className: c(y && "w-full", h),
+      children: [
+        /* @__PURE__ */ r(L, { htmlFor: m, children: i }),
+        /* @__PURE__ */ t("div", { className: "relative", children: [
+          /* @__PURE__ */ t(
+            "select",
+            {
+              id: m,
+              value: g,
+              disabled: p || l,
+              "aria-busy": u || l,
+              className: c(
+                "w-full rounded-md border border-input bg-background pr-9 text-sm outline-none aria-invalid:border-destructive",
+                f === "small" ? "h-9 px-2" : "h-10 px-3",
+                (p || l) && "opacity-70"
+              ),
+              "aria-invalid": v || void 0,
+              onChange: (e) => {
+                F?.(e), A?.(e, e.target.value.trim());
+              },
+              style: n ? { borderColor: n, color: n } : void 0,
+              ...C,
+              children: [
+                l ? /* @__PURE__ */ r("option", { value: "", children: "Loading options..." }) : null,
+                l ? null : N.map((e) => /* @__PURE__ */ r("option", { value: e.value, children: e.label }, e.value))
+              ]
+            }
+          ),
+          (u || l) && /* @__PURE__ */ r(
+            E,
+            {
+              role: "progressbar",
+              "aria-label": "loading",
+              className: "pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin"
+            }
+          )
+        ] }),
+        d ? /* @__PURE__ */ r(j, { children: d }) : null,
+        s ? /* @__PURE__ */ r(B, { children: s }) : null
+      ]
+    }
+  );
+}
+export {
+  V as Select,
+  V as default
+};
+//# sourceMappingURL=select.mjs.map

package/dist/components/forms/select/select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.mjs","sources":["../../../../src/components/forms/select/select.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport type {\n  ChangeEvent,\n  ReactElement,\n  ReactNode,\n  SelectHTMLAttributes,\n} from \"react\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Supported field sizes for Select.\n */\nexport type SelectSize = \"small\" | \"medium\";\n\n/**\n * Option model accepted by Select.\n */\nexport interface SelectOption {\n  /**\n   * Visual label shown in the list.\n   */\n  label: string;\n  /**\n   * Submitted value.\n   */\n  value: string;\n}\n\n/**\n * Props for the Select component.\n */\nexport interface SelectProps\n  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"size\" | \"color\"> {\n  /**\n   * Label shown above the select.\n   */\n  label: string;\n  /**\n   * Selected value.\n   */\n  value: string;\n  /**\n   * Select options for native rendering.\n   */\n  options?: SelectOption[];\n  /**\n   * Helper text rendered below the select.\n   */\n  helperText?: ReactNode;\n  /**\n   * Error text rendered below the select.\n   */\n  error?: ReactNode;\n  /**\n   * Shows a spinner while value is loading.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Shows a progress state while options are being fetched.\n   * @default false\n   */\n  fetching?: boolean;\n  /**\n   * Input size variant.\n   * @default \"medium\"\n   */\n  size?: SelectSize;\n  /**\n   * Makes the select span the container width.\n   * @default false\n   */\n  fullWidth?: boolean;\n  /**\n   * Optional accent color used for border and text.\n   */\n  color?: string;\n  /**\n   * Optional option children for compatibility.\n   */\n  children?: ReactNode;\n  /**\n   * Called when the select value changes.\n   * @param e - Native select change event.\n   * @param value - Trimmed selected value.\n   */\n  onChangeValue?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;\n}\n\nconst fromChildren = (children: ReactNode): SelectOption[] => {\n  const asArray = Array.isArray(children) ? children : [children];\n\n  return asArray\n    .filter(Boolean)\n    .map(\n      (child) =>\n        child as ReactElement<{ value?: string; children?: ReactNode }>,\n    )\n    .filter((child) => typeof child?.props?.value === \"string\")\n    .map((child) => ({\n      value: child.props.value as string,\n      label: String(child.props.children ?? child.props.value),\n    }));\n};\n\n/**\n * Native select wrapper with loading and fetching states.\n */\nexport function Select({\n  id,\n  label,\n  value,\n  options,\n  helperText,\n  error,\n  loading = false,\n  fetching = false,\n  size = \"medium\",\n  fullWidth = false,\n  className,\n  color,\n  children,\n  onChange,\n  onChangeValue,\n  disabled,\n  ...props\n}: SelectProps) {\n  const selectId = id ?? `${label}-select`;\n  const allOptions = options ?? fromChildren(children);\n  const activeValue = fetching ? \"\" : value;\n  const hasError = Boolean(error);\n\n  return (\n    <Field\n      data-invalid={hasError || undefined}\n      className={cn(fullWidth && \"w-full\", className)}\n    >\n      <FieldLabel htmlFor={selectId}>{label}</FieldLabel>\n\n      <div className=\"relative\">\n        <select\n          id={selectId}\n          value={activeValue}\n          disabled={disabled || fetching}\n          aria-busy={loading || fetching}\n          className={cn(\n            \"w-full rounded-md border border-input bg-background pr-9 text-sm outline-none aria-invalid:border-destructive\",\n            size === \"small\" ? \"h-9 px-2\" : \"h-10 px-3\",\n            (disabled || fetching) && \"opacity-70\",\n          )}\n          aria-invalid={hasError || undefined}\n          onChange={(e) => {\n            onChange?.(e);\n            onChangeValue?.(e, e.target.value.trim());\n          }}\n          style={color ? { borderColor: color, color } : undefined}\n          {...props}\n        >\n          {fetching ? <option value=\"\">Loading options...</option> : null}\n          {!fetching\n            ? allOptions.map((option) => (\n                <option key={option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))\n            : null}\n        </select>\n\n        {(loading || fetching) && (\n          <Loader2\n            role=\"progressbar\"\n            aria-label=\"loading\"\n            className=\"pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin\"\n          />\n        )}\n      </div>\n\n      {helperText ? <FieldDescription>{helperText}</FieldDescription> : null}\n\n      {error ? <FieldError>{error}</FieldError> : null}\n    </Field>\n  );\n}\n\nexport default Select;\n"],"names":["fromChildren","children","child","Select","id","label","value","options","helperText","error","loading","fetching","size","fullWidth","className","color","onChange","onChangeValue","disabled","props","selectId","allOptions","activeValue","hasError","jsxs","Field","cn","jsx","FieldLabel","option","Loader2","FieldDescription","FieldError"],"mappings":";;;;AA+FA,MAAMA,IAAe,CAACC,OACJ,MAAM,QAAQA,CAAQ,IAAIA,IAAW,CAACA,CAAQ,GAG3D,OAAO,OAAO,EACd;AAAA,EACC,CAACC,MACCA;AAAA,EAEH,OAAO,CAACA,MAAU,OAAOA,GAAO,OAAO,SAAU,QAAQ,EACzD,IAAI,CAACA,OAAW;AAAA,EACf,OAAOA,EAAM,MAAM;AAAA,EACnB,OAAO,OAAOA,EAAM,MAAM,YAAYA,EAAM,MAAM,KAAK;AAAA,EACvD;AAMC,SAASC,EAAO;AAAA,EACrB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAd;AAAA,EACA,UAAAe;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAWhB,KAAM,GAAGC,CAAK,WACzBgB,IAAad,KAAWP,EAAaC,CAAQ,GAC7CqB,IAAcX,IAAW,KAAKL,GAC9BiB,IAAW,EAAQd;AAEzB,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAcF,KAAY;AAAA,MAC1B,WAAWG,EAAGb,KAAa,UAAUC,CAAS;AAAA,MAE9C,UAAA;AAAA,QAAA,gBAAAa,EAACC,GAAA,EAAW,SAASR,GAAW,UAAAf,GAAM;AAAA,QAEtC,gBAAAmB,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAIJ;AAAA,cACJ,OAAOE;AAAA,cACP,UAAUJ,KAAYP;AAAA,cACtB,aAAWD,KAAWC;AAAA,cACtB,WAAWe;AAAA,gBACT;AAAA,gBACAd,MAAS,UAAU,aAAa;AAAA,iBAC/BM,KAAYP,MAAa;AAAA,cAAA;AAAA,cAE5B,gBAAcY,KAAY;AAAA,cAC1B,UAAU,CAAC,MAAM;AACf,gBAAAP,IAAW,CAAC,GACZC,IAAgB,GAAG,EAAE,OAAO,MAAM,MAAM;AAAA,cAC1C;AAAA,cACA,OAAOF,IAAQ,EAAE,aAAaA,GAAO,OAAAA,MAAU;AAAA,cAC9C,GAAGI;AAAA,cAEH,UAAA;AAAA,gBAAAR,IAAW,gBAAAgB,EAAC,UAAA,EAAO,OAAM,IAAG,gCAAkB,IAAY;AAAA,gBACzDhB,IAME,OALAU,EAAW,IAAI,CAACQ,MACd,gBAAAF,EAAC,UAAA,EAA0B,OAAOE,EAAO,OACtC,UAAAA,EAAO,MAAA,GADGA,EAAO,KAEpB,CACD;AAAA,cACD;AAAA,YAAA;AAAA,UAAA;AAAA,WAGJnB,KAAWC,MACX,gBAAAgB;AAAA,YAACG;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ,GAEJ;AAAA,QAECtB,IAAa,gBAAAmB,EAACI,GAAA,EAAkB,UAAAvB,EAAA,CAAW,IAAsB;AAAA,QAEjEC,IAAQ,gBAAAkB,EAACK,GAAA,EAAY,UAAAvB,EAAA,CAAM,IAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;"}

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

@@ -0,0 +1,2 @@
+export type { TextFieldInputProps, TextFieldProps, TextFieldSize, } from './text-field';
+export { default, default as TextField } from './text-field';

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

@@ -0,0 +1,65 @@
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * Supported field sizes for TextField.
+ */
+export type TextFieldSize = "small" | "medium";
+/**
+ * Props for input-specific composition.
+ */
+export interface TextFieldInputProps {
+    /**
+     * Content rendered at the end of the input.
+     */
+    endAdornment?: ReactNode;
+}
+/**
+ * Props for the TextField component.
+ */
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "color"> {
+    /**
+     * Label shown above the input.
+     */
+    label?: string;
+    /**
+     * Helper text rendered below the input.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error text rendered below the input.
+     */
+    error?: ReactNode;
+    /**
+     * Shows a spinner inside the field.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Input size variant.
+     * @default "medium"
+     */
+    size?: TextFieldSize;
+    /**
+     * Makes the field span the container width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Optional accent color used for border and text.
+     */
+    hexColor?: string;
+    /**
+     * Additional props for the input content area.
+     */
+    InputProps?: TextFieldInputProps;
+    /**
+     * Called when the input value changes.
+     * @param e - Native input change event.
+     * @param value - Trimmed input value.
+     */
+    onChangeValue?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
+}
+/**
+ * Text input with loading state.
+ */
+export declare function TextField({ id, label, helperText, error, loading, size, fullWidth, className, hexColor, InputProps, onChange, onChangeValue, disabled, ...props }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export default TextField;

package/dist/components/forms/text-field/text-field.mjs

@@ -0,0 +1,73 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Field as g, FieldLabel as y, FieldDescription as A, FieldError as b } from "../../ui/field.mjs";
+import { Input as j } from "../../ui/input.mjs";
+import { cn as f } from "../../../lib/utils.mjs";
+import w from "../../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+function $({
+  id: u,
+  label: n,
+  helperText: s,
+  error: r,
+  loading: i = !1,
+  size: h = "medium",
+  fullWidth: p = !1,
+  className: v,
+  hexColor: a,
+  InputProps: l,
+  onChange: x,
+  onChangeValue: F,
+  disabled: o,
+  ...N
+}) {
+  const c = u ?? `${n ?? "textfield"}-input`, t = !!r;
+  return /* @__PURE__ */ m(
+    g,
+    {
+      "data-invalid": t || void 0,
+      className: f("gap-1.5", p && "w-full", v),
+      children: [
+        n ? /* @__PURE__ */ e(y, { htmlFor: c, children: n }) : null,
+        /* @__PURE__ */ m("div", { className: "relative", children: [
+          /* @__PURE__ */ e(
+            j,
+            {
+              id: c,
+              disabled: o,
+              "aria-busy": i,
+              "aria-invalid": t || void 0,
+              className: f(
+                "text-sm",
+                h === "small" ? "h-9 px-2" : "h-10 px-3",
+                (l?.endAdornment || i) && "pr-10",
+                o && "opacity-70"
+              ),
+              style: a ? { borderColor: a, color: a } : void 0,
+              onChange: (d) => {
+                x?.(d), F?.(d, d.target.value.trim());
+              },
+              ...N
+            }
+          ),
+          (l?.endAdornment || i) && /* @__PURE__ */ m("div", { className: "absolute inset-y-0 right-3 flex items-center gap-2", children: [
+            l?.endAdornment ? /* @__PURE__ */ e("div", { className: "inline-flex items-center", children: l.endAdornment }) : null,
+            i ? /* @__PURE__ */ e(
+              w,
+              {
+                role: "progressbar",
+                "aria-label": "loading",
+                className: "h-4 w-4 animate-spin"
+              }
+            ) : null
+          ] })
+        ] }),
+        s && !t ? /* @__PURE__ */ e(A, { children: s }) : null,
+        r ? /* @__PURE__ */ e(b, { children: r }) : null
+      ]
+    }
+  );
+}
+export {
+  $ as TextField,
+  $ as default
+};
+//# sourceMappingURL=text-field.mjs.map