@vantageos/mosaic 0.2.2 → 0.3.0

package/dist/react/forms.js

@@ -0,0 +1,1326 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm, FormProvider as FormProvider$1, Controller, useFieldArray as useFieldArray$1 } from 'react-hook-form';
+import { z } from 'zod';
+import { createContext, useContext, useId, useRef, useCallback, useEffect, useState, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/runtimes/react/components/forms/useMosaicForm.tsx
+
+// src/components/forms/useMosaicForm.logic.ts
+function toRhfMode(mode) {
+  return mode;
+}
+var MosaicFormModeSchema = z.enum(["onBlur", "onChange", "onSubmit"]);
+var UseMosaicFormOptionsSchema = z.object({
+  mode: MosaicFormModeSchema.default("onBlur")
+});
+function validateOptions(raw) {
+  return UseMosaicFormOptionsSchema.parse(raw);
+}
+
+// src/runtimes/react/components/forms/useMosaicForm.tsx
+function useMosaicForm(options) {
+  const parsedOptions = validateOptions({ mode: options.mode });
+  const form = useForm({
+    // biome-ignore lint/suspicious/noExplicitAny: zodResolver's generic shape forces a cast at this boundary
+    resolver: zodResolver(options.schema),
+    defaultValues: options.defaultValues,
+    mode: toRhfMode(parsedOptions.mode)
+  });
+  const extended = form;
+  extended.mosaicSchema = options.schema;
+  extended.mosaicMode = parsedOptions.mode;
+  return extended;
+}
+
+// src/components/forms/FormProvider.logic.ts
+var FORM_PROVIDER_CONTEXT_MISSING = "useMosaicFormContext must be used inside <FormProvider>. Wrap your tree with <FormProvider form={...}> from @vantageos/mosaic/{react,preact}/forms.";
+var MosaicFormContext = createContext(null);
+function FormProvider({
+  form,
+  children
+}) {
+  return /* @__PURE__ */ jsx(MosaicFormContext.Provider, { value: form, children: /* @__PURE__ */ jsx(FormProvider$1, { ...form, children }) });
+}
+function useMosaicFormContext() {
+  const ctx = useContext(MosaicFormContext);
+  if (!ctx) {
+    throw new Error(FORM_PROVIDER_CONTEXT_MISSING);
+  }
+  return ctx;
+}
+function FormField({
+  name,
+  children
+}) {
+  const form = useMosaicFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control: form.control,
+      name,
+      render: ({ field, fieldState, formState }) => children({
+        field,
+        fieldState,
+        formState
+      })
+    }
+  );
+}
+
+// src/components/forms/ErrorDisplay.logic.ts
+function formatErrorMessage(error, messageMap) {
+  if (!error) return void 0;
+  if (error.message && error.message.length > 0) return error.message;
+  const mapped = messageMap?.[error.type];
+  if (mapped && mapped.length > 0) return mapped;
+  return "Invalid value";
+}
+function ErrorDisplay({ error, messageMap, className }) {
+  const message = formatErrorMessage(error, messageMap);
+  if (!message) return null;
+  return /* @__PURE__ */ jsx("span", { role: "alert", className: className ?? "mosaic-forms-error", children: message });
+}
+
+// src/components/forms/SubmitButton.logic.ts
+function computeSubmitButtonState(input) {
+  return {
+    disabled: input.isSubmitting || !input.isValid,
+    loading: input.isSubmitting
+  };
+}
+var SubmitButtonPropsSchema = z.object({
+  label: z.string().min(1).default("Submit"),
+  loadingLabel: z.string().min(1).default("Submitting\u2026")
+});
+function validateSubmitButtonProps(raw) {
+  return SubmitButtonPropsSchema.parse(raw);
+}
+function SubmitButton(props) {
+  const { label, loadingLabel } = validateSubmitButtonProps({
+    label: props.label,
+    loadingLabel: props.loadingLabel
+  });
+  const form = useMosaicFormContext();
+  const { isValid, isSubmitting } = form.formState;
+  const { disabled, loading } = computeSubmitButtonState({ isValid, isSubmitting });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "submit",
+      disabled,
+      "aria-busy": loading || void 0,
+      className: props.className ?? "mosaic-forms-submit",
+      children: loading ? loadingLabel : label
+    }
+  );
+}
+
+// src/components/forms/Input.logic.ts
+function buildErrorDescribedBy(inputId, hasError) {
+  return hasError ? `${inputId}-error` : void 0;
+}
+function resolveHtmlType(type) {
+  return type ?? "text";
+}
+function Input({
+  name,
+  type,
+  label,
+  placeholder,
+  disabled,
+  autoComplete,
+  id,
+  messageMap,
+  className,
+  inputClassName,
+  errorClassName
+}) {
+  const form = useMosaicFormContext();
+  const reactId = useId();
+  const inputId = id ?? `mosaic-input-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}-${String(name)}`;
+  const htmlType = resolveHtmlType(type);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control: form.control,
+      name,
+      render: ({ field, fieldState }) => {
+        const f = field;
+        const hasError = Boolean(fieldState.error);
+        const describedBy = buildErrorDescribedBy(inputId, hasError);
+        const message = formatErrorMessage(
+          fieldState.error ? { type: fieldState.error.type, message: fieldState.error.message } : void 0,
+          messageMap
+        );
+        const value = f.value ?? "";
+        return /* @__PURE__ */ jsxs("div", { className: className ?? "mosaic-forms-input", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: inputId, children: label }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              name: f.name,
+              type: htmlType,
+              value,
+              onChange: f.onChange,
+              onBlur: f.onBlur,
+              ref: f.ref,
+              placeholder,
+              disabled: disabled ?? false,
+              autoComplete,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": describedBy,
+              className: inputClassName
+            }
+          ),
+          hasError && message ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: `${inputId}-error`,
+              role: "alert",
+              className: errorClassName ?? "mosaic-forms-error",
+              children: message
+            }
+          ) : null
+        ] });
+      }
+    }
+  );
+}
+
+// src/components/forms/Textarea.logic.ts
+var DEFAULT_TEXTAREA_ROWS = 3;
+function clampToMaxLength(value, maxLength) {
+  if (maxLength === void 0) return value;
+  if (value.length <= maxLength) return value;
+  return value.slice(0, maxLength);
+}
+function resolveRows(rows) {
+  if (rows === void 0) return DEFAULT_TEXTAREA_ROWS;
+  if (!Number.isFinite(rows) || rows < 1) return DEFAULT_TEXTAREA_ROWS;
+  return Math.floor(rows);
+}
+function computeAutoResizeHeight(scrollHeight, minHeightPx) {
+  if (!Number.isFinite(scrollHeight) || scrollHeight <= 0) return minHeightPx;
+  return Math.max(scrollHeight, minHeightPx);
+}
+function Textarea(props) {
+  const {
+    name,
+    rows,
+    maxLength,
+    autoResize = false,
+    placeholder,
+    disabled,
+    label,
+    className,
+    errorMessageMap
+  } = props;
+  const effectiveRows = resolveRows(rows);
+  const reactId = useId();
+  const fieldId = `mosaic-textarea-${reactId}`;
+  const errorId = `${fieldId}-error`;
+  return /* @__PURE__ */ jsx(FormField, { name, children: ({ field, fieldState }) => {
+    const hasError = Boolean(fieldState.error);
+    return /* @__PURE__ */ jsx(
+      TextareaInner,
+      {
+        id: fieldId,
+        errorId,
+        label,
+        value: field.value ?? "",
+        onChange: (next) => field.onChange(clampToMaxLength(next, maxLength)),
+        onBlur: field.onBlur,
+        rows: effectiveRows,
+        maxLength,
+        autoResize,
+        placeholder,
+        disabled,
+        hasError,
+        className,
+        children: /* @__PURE__ */ jsx(
+          ErrorDisplay,
+          {
+            error: fieldState.error ? {
+              type: fieldState.error.type ?? "validation",
+              message: fieldState.error.message
+            } : void 0,
+            messageMap: errorMessageMap,
+            className: "mosaic-forms-error"
+          }
+        )
+      }
+    );
+  } });
+}
+function TextareaInner(props) {
+  const {
+    id,
+    errorId,
+    label,
+    value,
+    onChange,
+    onBlur,
+    rows,
+    maxLength,
+    autoResize,
+    placeholder,
+    disabled,
+    hasError,
+    className,
+    children
+  } = props;
+  const ref = useRef(null);
+  const resize = useCallback(() => {
+    if (!autoResize) return;
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const minPx = rows * 20;
+    const next = computeAutoResizeHeight(el.scrollHeight, minPx);
+    el.style.height = `${next}px`;
+  }, [autoResize, rows]);
+  useEffect(() => {
+    resize();
+  }, [resize]);
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "mosaic-forms-textarea", children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor: id, className: "mosaic-forms-textarea-label", children: label }) : null,
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id,
+        value,
+        rows,
+        maxLength,
+        placeholder,
+        disabled,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        onChange: (e) => {
+          onChange(e.target.value);
+          resize();
+        },
+        onBlur
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: errorId, children })
+  ] });
+}
+
+// src/components/forms/FieldArray.logic.ts
+function buildListAriaLabel(name) {
+  return `${name} items`;
+}
+function buildRemoveAriaLabel(name, index) {
+  return `Remove ${name} item ${index + 1}`;
+}
+function buildAddAriaLabel(name) {
+  return `Add ${name} item`;
+}
+function nextFocusIndexAfterRemove(previousLength, removedIndex) {
+  if (previousLength <= 1) return -1;
+  const newLength = previousLength - 1;
+  return Math.min(removedIndex, newLength - 1);
+}
+function useFieldArray({ name, control }) {
+  const ctx = useMosaicFormContext();
+  const resolvedControl = control ?? ctx.control;
+  return useFieldArray$1({
+    // biome-ignore lint/suspicious/noExplicitAny: bridging erased generic
+    control: resolvedControl,
+    name
+  });
+}
+function FieldArray({ name, children, ariaLabel }) {
+  const ctx = useMosaicFormContext();
+  const { fields, append, remove, move, swap } = useFieldArray$1({
+    // biome-ignore lint/suspicious/noExplicitAny: bridging erased generic
+    control: ctx.control,
+    name
+  });
+  const controls = {
+    fields,
+    append,
+    remove,
+    move,
+    swap
+  };
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "aria-label": ariaLabel ?? buildListAriaLabel(name),
+      style: { listStyle: "none", padding: 0, margin: 0 },
+      children: fields.map((field, index) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          "data-mosaic-fieldarray-item": true,
+          "data-mosaic-fieldarray-name": name,
+          "data-mosaic-fieldarray-index": index,
+          children: children(
+            {
+              field,
+              index
+            },
+            controls
+          )
+        },
+        field.id
+      ))
+    }
+  );
+}
+
+// src/components/forms/Checkbox.logic.ts
+function resolveAriaChecked(checked, indeterminate) {
+  if (indeterminate) return "mixed";
+  return checked;
+}
+function resolveDescribedBy(descriptionId, description, hasError, errorId) {
+  const parts = [];
+  if (description) parts.push(descriptionId);
+  if (hasError) parts.push(errorId);
+  return parts.length > 0 ? parts.join(" ") : void 0;
+}
+function Checkbox(props) {
+  const { name, label, disabled, indeterminate, description, className, errorMessageMap } = props;
+  const reactId = useId();
+  const fieldId = `mosaic-checkbox-${reactId}`;
+  const errorId = `${fieldId}-error`;
+  const descriptionId = `${fieldId}-description`;
+  return /* @__PURE__ */ jsx(FormField, { name, children: ({ field, fieldState }) => {
+    const hasError = Boolean(fieldState.error);
+    return /* @__PURE__ */ jsx(
+      CheckboxInner,
+      {
+        id: fieldId,
+        errorId,
+        descriptionId,
+        label,
+        checked: field.value ?? false,
+        onChange: (next) => field.onChange(next),
+        onBlur: field.onBlur,
+        disabled,
+        indeterminate,
+        description,
+        hasError,
+        className,
+        children: /* @__PURE__ */ jsx(
+          ErrorDisplay,
+          {
+            error: fieldState.error ? {
+              type: fieldState.error.type ?? "validation",
+              message: fieldState.error.message
+            } : void 0,
+            messageMap: errorMessageMap,
+            className: "mosaic-forms-error"
+          }
+        )
+      }
+    );
+  } });
+}
+function CheckboxInner(props) {
+  const {
+    id,
+    errorId,
+    descriptionId,
+    label,
+    checked,
+    onChange,
+    onBlur,
+    disabled,
+    indeterminate,
+    description,
+    hasError,
+    className,
+    children
+  } = props;
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.indeterminate = Boolean(indeterminate);
+    }
+  }, [indeterminate]);
+  const ariaChecked = resolveAriaChecked(checked, indeterminate);
+  const describedBy = resolveDescribedBy(descriptionId, description, hasError, errorId);
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "mosaic-forms-checkbox", children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "mosaic-forms-checkbox-label", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          id,
+          checked,
+          disabled,
+          "aria-checked": ariaChecked,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": describedBy,
+          onChange: (e) => onChange(e.target.checked),
+          onBlur
+        }
+      ),
+      label
+    ] }),
+    description ? /* @__PURE__ */ jsx("span", { id: descriptionId, className: "mosaic-forms-checkbox-description", children: description }) : null,
+    /* @__PURE__ */ jsx("div", { id: errorId, children })
+  ] });
+}
+
+// src/components/forms/MultiSelect.logic.ts
+function getAvailableOptions(options, selected) {
+  const set = new Set(selected);
+  return options.filter((opt) => !set.has(opt.value));
+}
+function getSelectedOptions(options, selected) {
+  const byValue = new Map(options.map((opt) => [opt.value, opt]));
+  const out = [];
+  for (const value of selected) {
+    const opt = byValue.get(value);
+    if (opt) out.push(opt);
+  }
+  return out;
+}
+function filterBySearch(options, query) {
+  const q = query.trim().toLowerCase();
+  if (q.length === 0) return [...options];
+  return options.filter(
+    (opt) => opt.label.toLowerCase().includes(q) || opt.value.toLowerCase().includes(q)
+  );
+}
+function addValue(current, value, maxItems) {
+  if (current.includes(value)) return current;
+  if (typeof maxItems === "number" && current.length >= maxItems) return current;
+  return [...current, value];
+}
+function removeValue(current, value) {
+  return current.filter((v) => v !== value);
+}
+function isAtMaxItems(current, maxItems) {
+  return typeof maxItems === "number" && current.length >= maxItems;
+}
+var MultiSelectOptionSchema = z.object({
+  value: z.string().min(1),
+  label: z.string().min(1)
+});
+var MultiSelectPropsSchema = z.object({
+  name: z.string().min(1),
+  label: z.string().min(1),
+  options: z.array(MultiSelectOptionSchema).min(1),
+  placeholder: z.string().optional(),
+  disabled: z.boolean().optional(),
+  searchable: z.boolean().optional(),
+  maxItems: z.number().int().positive().optional()
+});
+function MultiSelect(props) {
+  const parsed = MultiSelectPropsSchema.parse({
+    name: props.name,
+    label: props.label,
+    options: props.options,
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    searchable: props.searchable,
+    maxItems: props.maxItems
+  });
+  const { name, label, options, placeholder, disabled, searchable, maxItems } = parsed;
+  const reactId = useId();
+  const triggerId = `${reactId}-trigger`;
+  const listboxId = `${reactId}-listbox`;
+  const labelId = `${reactId}-label`;
+  return /* @__PURE__ */ jsx(FormField, { name, children: ({ field }) => {
+    const value = Array.isArray(field.value) ? field.value : [];
+    return /* @__PURE__ */ jsx(
+      Inner,
+      {
+        triggerId,
+        listboxId,
+        labelId,
+        label,
+        options,
+        value,
+        disabled,
+        searchable,
+        maxItems,
+        placeholder,
+        onChange: (next) => field.onChange(next),
+        onBlur: () => field.onBlur(),
+        className: props.className
+      }
+    );
+  } });
+}
+function Inner(p) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const triggerRef = useRef(null);
+  const selectedOptions = useMemo(
+    () => getSelectedOptions(p.options, p.value),
+    [p.options, p.value]
+  );
+  const availableAfterSelect = useMemo(
+    () => getAvailableOptions(p.options, p.value),
+    [p.options, p.value]
+  );
+  const visibleOptions = useMemo(
+    () => p.searchable ? filterBySearch(availableAfterSelect, query) : availableAfterSelect,
+    [availableAfterSelect, p.searchable, query]
+  );
+  const atMax = isAtMaxItems(p.value, p.maxItems);
+  const handleSelect = useCallback(
+    (val) => {
+      const next = addValue(p.value, val, p.maxItems);
+      if (next !== p.value) {
+        p.onChange(next);
+      }
+      setQuery("");
+    },
+    [p]
+  );
+  const handleRemove = useCallback(
+    (val) => {
+      p.onChange(removeValue(p.value, val));
+    },
+    [p]
+  );
+  const handleTriggerKeyDown = useCallback(
+    (e) => {
+      if (p.disabled) return;
+      if (e.key === "Backspace" || e.key === "Delete") {
+        const last = p.value[p.value.length - 1];
+        if (last !== void 0) {
+          e.preventDefault();
+          handleRemove(last);
+        }
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setOpen(true);
+        setActiveIndex(0);
+        return;
+      }
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    },
+    [p.disabled, p.value, handleRemove]
+  );
+  const handleListKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, Math.max(visibleOptions.length - 1, 0)));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const opt = visibleOptions[activeIndex];
+        if (opt) handleSelect(opt.value);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    },
+    [visibleOptions, activeIndex, handleSelect]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: p.className ?? "mosaic-multiselect", onBlur: p.onBlur, children: [
+    /* @__PURE__ */ jsx("span", { id: p.labelId, className: "mosaic-multiselect-label", children: p.label }),
+    /* @__PURE__ */ jsx("div", { className: "mosaic-multiselect-chips", "data-testid": "multiselect-chips", children: selectedOptions.map((opt) => /* @__PURE__ */ jsxs("span", { className: "mosaic-multiselect-chip", "data-chip-value": opt.value, children: [
+      opt.label,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Remove ${opt.label}`,
+          "data-testid": `chip-remove-${opt.value}`,
+          className: "mosaic-multiselect-chip-remove",
+          disabled: p.disabled,
+          onClick: () => handleRemove(opt.value),
+          children: "\xD7"
+        }
+      )
+    ] }, opt.value)) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        id: p.triggerId,
+        type: "button",
+        role: "combobox",
+        "aria-multiselectable": true,
+        "aria-expanded": open,
+        "aria-controls": p.listboxId,
+        "aria-labelledby": p.labelId,
+        "aria-disabled": p.disabled || atMax || void 0,
+        disabled: p.disabled,
+        "data-testid": "multiselect-trigger",
+        className: "mosaic-multiselect-trigger",
+        onClick: () => !p.disabled && setOpen((o) => !o),
+        onKeyDown: handleTriggerKeyDown,
+        children: p.value.length === 0 ? p.placeholder ?? "Select\u2026" : `${p.value.length} selected`
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs("div", { className: "mosaic-multiselect-panel", children: [
+      p.searchable ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          "aria-label": "Search options",
+          "data-testid": "multiselect-search",
+          className: "mosaic-multiselect-search",
+          value: query,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setActiveIndex(0);
+          }
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          id: p.listboxId,
+          role: "listbox",
+          "aria-multiselectable": true,
+          "aria-labelledby": p.labelId,
+          tabIndex: -1,
+          className: "mosaic-multiselect-listbox",
+          onKeyDown: handleListKeyDown,
+          children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx("li", { className: "mosaic-multiselect-empty", children: "No options" }) : visibleOptions.map((opt, i) => (
+            // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the listbox; APG combobox active-descendant pattern.
+            // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard handled at listbox level per APG.
+            /* @__PURE__ */ jsx(
+              "li",
+              {
+                role: "option",
+                "aria-selected": false,
+                "data-testid": `option-${opt.value}`,
+                "data-active": i === activeIndex || void 0,
+                className: "mosaic-multiselect-option",
+                onClick: () => handleSelect(opt.value),
+                children: opt.label
+              },
+              opt.value
+            )
+          ))
+        }
+      )
+    ] }) : null
+  ] });
+}
+
+// src/components/forms/RadioGroup.logic.ts
+function getNavKeys(orientation) {
+  return orientation === "vertical" ? { prev: "ArrowUp", next: "ArrowDown" } : { prev: "ArrowLeft", next: "ArrowRight" };
+}
+function findNextEnabledIndex(options, currentIndex, direction) {
+  const len = options.length;
+  if (len === 0) return currentIndex;
+  let i = (currentIndex + direction + len) % len;
+  for (let tries = 0; tries < len; tries++) {
+    if (!options[i]?.disabled) return i;
+    i = (i + direction + len) % len;
+  }
+  return currentIndex;
+}
+function findFirstEnabledIndex(options) {
+  const idx = options.findIndex((o) => !o.disabled);
+  return idx === -1 ? 0 : idx;
+}
+function findLastEnabledIndex(options) {
+  for (let i = options.length - 1; i >= 0; i--) {
+    if (!options[i]?.disabled) return i;
+  }
+  return options.length - 1;
+}
+function findSelectedIndex(options, selectedValue) {
+  if (selectedValue === void 0 || selectedValue === "") return -1;
+  return options.findIndex((o) => o.value === selectedValue);
+}
+function getRovingTabIndex(options, selectedValue) {
+  const selectedIdx = findSelectedIndex(options, selectedValue);
+  if (selectedIdx >= 0) return selectedIdx;
+  return findFirstEnabledIndex(options);
+}
+function getGroupLabelId(instanceId, name) {
+  return `${instanceId}-${name}-label`;
+}
+function getOptionLabelId(instanceId, name, optionValue) {
+  return `${instanceId}-${name}-${optionValue}-label`;
+}
+function getOptionDescriptionId(instanceId, name, optionValue) {
+  return `${instanceId}-${name}-${optionValue}-desc`;
+}
+function getGroupClasses(orientation) {
+  return orientation === "vertical" ? "flex flex-col gap-2" : "flex flex-row flex-wrap gap-4";
+}
+function getOptionRowClasses(isDisabled, orientation) {
+  const base = "flex items-start gap-2";
+  const orient = orientation === "vertical" ? "flex-row" : "flex-row";
+  const state = isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
+  return [base, orient, state].join(" ");
+}
+function getRadioControlClasses(isSelected, isDisabled) {
+  const base = "inline-flex items-center justify-center w-4 h-4 mt-0.5 rounded-full border-2 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 shrink-0";
+  const state = isDisabled ? "border-slate-300 bg-slate-100" : isSelected ? "border-blue-600 bg-white" : "border-slate-400 bg-white hover:border-slate-600";
+  return [base, state].join(" ");
+}
+function isActivationKey(key) {
+  return key === " " || key === "Space" || key === "Enter";
+}
+var RadioGroupOptionSchema = z.object({
+  value: z.string().min(1),
+  label: z.string().min(1),
+  description: z.string().optional(),
+  disabled: z.boolean().optional().default(false)
+});
+var RadioGroupPropsSchema = z.object({
+  name: z.string().min(1),
+  label: z.string().min(1),
+  options: z.array(RadioGroupOptionSchema).min(1),
+  orientation: z.enum(["vertical", "horizontal"]).default("vertical"),
+  disabled: z.boolean().optional().default(false),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateRadioGroupProps(raw) {
+  return RadioGroupPropsSchema.parse(raw);
+}
+function RadioGroup(props) {
+  const validated = validateRadioGroupProps({
+    name: props.name,
+    label: props.label,
+    options: props.options,
+    orientation: props.orientation,
+    disabled: props.disabled
+  });
+  const { name, label, options, orientation, disabled } = validated;
+  const instanceId = useId();
+  const groupLabelId = getGroupLabelId(instanceId, name);
+  const { prev: prevKey, next: nextKey } = getNavKeys(orientation);
+  const radioRefs = useRef([]);
+  const focusAndSelect = useCallback(
+    (index, onChange) => {
+      const el = radioRefs.current[index];
+      if (el) el.focus();
+      const opt = options[index];
+      if (opt && !opt.disabled) {
+        onChange(opt.value);
+      }
+    },
+    [options]
+  );
+  return /* @__PURE__ */ jsx(FormField, { name, children: ({ field, fieldState }) => {
+    const selectedValue = field.value;
+    const rovingIdx = getRovingTabIndex(options, selectedValue);
+    const handleKeyDown = (e, currentIndex) => {
+      const { key } = e;
+      if (key === prevKey || key === nextKey) {
+        e.preventDefault();
+        const direction = key === nextKey ? 1 : -1;
+        const nextIdx = findNextEnabledIndex(options, currentIndex, direction);
+        focusAndSelect(nextIdx, field.onChange);
+        return;
+      }
+      if (key === "Home") {
+        e.preventDefault();
+        focusAndSelect(findFirstEnabledIndex(options), field.onChange);
+        return;
+      }
+      if (key === "End") {
+        e.preventDefault();
+        focusAndSelect(findLastEnabledIndex(options), field.onChange);
+        return;
+      }
+      if (isActivationKey(key)) {
+        e.preventDefault();
+        const opt = options[currentIndex];
+        if (opt && !opt.disabled) {
+          field.onChange(opt.value);
+        }
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { className: props.className ?? "mosaic-forms-radiogroup", children: [
+      /* @__PURE__ */ jsx("span", { id: groupLabelId, className: "mosaic-forms-radiogroup-label", children: label }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-labelledby": groupLabelId,
+          "aria-orientation": orientation,
+          "aria-disabled": disabled || void 0,
+          className: getGroupClasses(orientation),
+          children: options.map((option, index) => {
+            const isSelected = selectedValue === option.value;
+            const isDisabled = !!(disabled || option.disabled);
+            const optLabelId = getOptionLabelId(instanceId, name, option.value);
+            const optDescId = option.description ? getOptionDescriptionId(instanceId, name, option.value) : void 0;
+            const tabIdx = index === rovingIdx ? 0 : -1;
+            return /* @__PURE__ */ jsxs("div", { className: getOptionRowClasses(isDisabled, orientation), children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: (el) => {
+                    radioRefs.current[index] = el;
+                  },
+                  type: "radio",
+                  id: `${instanceId}-${name}-${option.value}`,
+                  name: field.name,
+                  value: option.value,
+                  checked: isSelected,
+                  disabled: isDisabled,
+                  "aria-labelledby": optLabelId,
+                  "aria-describedby": optDescId,
+                  tabIndex: isDisabled ? -1 : tabIdx,
+                  className: "mosaic-forms-radiogroup-input sr-only",
+                  onChange: () => {
+                    field.onChange(option.value);
+                  },
+                  onKeyDown: (e) => {
+                    if (!isDisabled) handleKeyDown(e, index);
+                  },
+                  onBlur: field.onBlur
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx("span", { id: optLabelId, className: "mosaic-forms-radiogroup-option-label", children: option.label }),
+                option.description ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    id: optDescId,
+                    className: "mosaic-forms-radiogroup-option-description text-sm text-slate-500",
+                    children: option.description
+                  }
+                ) : null
+              ] })
+            ] }, option.value);
+          })
+        }
+      ),
+      fieldState.error ? /* @__PURE__ */ jsx("span", { role: "alert", className: "mosaic-forms-radiogroup-error text-sm text-red-600", children: fieldState.error.message }) : null
+    ] });
+  } });
+}
+
+// src/components/forms/Select.logic.ts
+function getTriggerId(instanceId) {
+  return `${instanceId}-trigger`;
+}
+function getListboxId(instanceId) {
+  return `${instanceId}-listbox`;
+}
+function getOptionId(instanceId, value) {
+  return `${instanceId}-opt-${value}`;
+}
+function filterOptions(options, query) {
+  const q = query.trim().toLowerCase();
+  if (q === "") return options;
+  return options.filter((o) => o.label.toLowerCase().includes(q));
+}
+function indexOfValue(options, value) {
+  if (value == null) return -1;
+  return options.findIndex((o) => o.value === value);
+}
+function findNextEnabledIndex2(options, startIndex, direction) {
+  const len = options.length;
+  if (len === 0) return -1;
+  let i = startIndex;
+  for (let tries = 0; tries < len; tries++) {
+    i = (i + direction + len) % len;
+    if (!options[i]?.disabled) return i;
+  }
+  return -1;
+}
+function findFirstEnabledIndex2(options) {
+  const idx = options.findIndex((o) => !o.disabled);
+  return idx === -1 ? -1 : idx;
+}
+function findLastEnabledIndex2(options) {
+  for (let i = options.length - 1; i >= 0; i--) {
+    if (!options[i]?.disabled) return i;
+  }
+  return -1;
+}
+function findByTypeAhead(options, buffer) {
+  if (buffer === "") return -1;
+  const needle = buffer.toLowerCase();
+  for (let i = 0; i < options.length; i++) {
+    const o = options[i];
+    if (!o || o.disabled) continue;
+    if (o.label.toLowerCase().startsWith(needle)) return i;
+  }
+  return -1;
+}
+function getTriggerClasses(isDisabled, isOpen) {
+  const base = "inline-flex items-center justify-between gap-2 w-full rounded-md border px-3 py-2 text-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600";
+  const state = isDisabled ? "border-slate-200 text-slate-400 bg-slate-50 cursor-not-allowed" : isOpen ? "border-blue-600 bg-white text-slate-900" : "border-slate-300 bg-white text-slate-900 hover:border-slate-400";
+  return `${base} ${state}`;
+}
+function getListboxClasses() {
+  return "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-slate-200 bg-white py-1 shadow-lg focus:outline-none";
+}
+function getOptionClasses(isActive, isSelected, isDisabled) {
+  const base = "flex items-center px-3 py-2 text-sm select-none";
+  if (isDisabled) return `${base} text-slate-400 cursor-not-allowed`;
+  const active = isActive ? "bg-blue-50 text-blue-900" : "text-slate-900";
+  const selected = isSelected ? "font-medium" : "";
+  return `${base} ${active} ${selected} cursor-pointer`;
+}
+function getSearchInputClasses() {
+  return "w-full px-3 py-2 text-sm border-b border-slate-200 focus:outline-none focus:border-blue-600";
+}
+function resolveSelectedLabel(options, value) {
+  if (value == null) return null;
+  const o = options.find((opt) => opt.value === value);
+  return o?.label ?? null;
+}
+function Select({
+  name,
+  label,
+  options,
+  placeholder,
+  disabled = false,
+  searchable = false,
+  className,
+  errorMessageMap
+}) {
+  const reactId = useId();
+  const instanceId = `mosaic-select-${reactId.replace(/[^a-zA-Z0-9-]/g, "")}`;
+  const triggerId = getTriggerId(instanceId);
+  const listboxId = getListboxId(instanceId);
+  const labelId = `${instanceId}-label`;
+  const errorId = `${instanceId}-error`;
+  return /* @__PURE__ */ jsx(FormField, { name, children: ({ field, fieldState }) => {
+    const hasError = Boolean(fieldState.error);
+    return /* @__PURE__ */ jsx(
+      SelectInner,
+      {
+        field,
+        label,
+        labelId,
+        triggerId,
+        listboxId,
+        errorId,
+        instanceId,
+        options,
+        placeholder,
+        disabled,
+        searchable,
+        className,
+        hasError,
+        children: /* @__PURE__ */ jsx(
+          ErrorDisplay,
+          {
+            error: fieldState.error ? {
+              type: fieldState.error.type ?? "validation",
+              message: fieldState.error.message
+            } : void 0,
+            messageMap: errorMessageMap,
+            className: "mosaic-forms-error"
+          }
+        )
+      }
+    );
+  } });
+}
+function SelectInner({
+  field,
+  label,
+  labelId,
+  triggerId,
+  listboxId,
+  errorId,
+  instanceId,
+  options,
+  placeholder,
+  disabled,
+  searchable,
+  className,
+  hasError,
+  children
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const triggerRef = useRef(null);
+  const searchRef = useRef(null);
+  const typeAheadRef = useRef({
+    buffer: "",
+    timer: null
+  });
+  const visibleOptions = useMemo(
+    () => searchable ? filterOptions(options, query) : options,
+    [options, query, searchable]
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    const selectedIdx = indexOfValue(visibleOptions, field.value);
+    if (selectedIdx >= 0 && !visibleOptions[selectedIdx]?.disabled) {
+      setActiveIndex(selectedIdx);
+    } else {
+      setActiveIndex(findFirstEnabledIndex2(visibleOptions));
+    }
+  }, [isOpen, visibleOptions, field.value]);
+  const closePopup = useCallback((restoreFocus = true) => {
+    setIsOpen(false);
+    setQuery("");
+    if (restoreFocus) triggerRef.current?.focus();
+  }, []);
+  const commitOption = useCallback(
+    (idx) => {
+      const opt = visibleOptions[idx];
+      if (!opt || opt.disabled) return;
+      field.onChange(opt.value);
+      closePopup(true);
+      field.onBlur();
+    },
+    [visibleOptions, field, closePopup]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      if (!isOpen) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          setIsOpen(true);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const start = activeIndex < 0 ? -1 : activeIndex;
+          const next = findNextEnabledIndex2(visibleOptions, start, 1);
+          if (next >= 0) setActiveIndex(next);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const start = activeIndex < 0 ? visibleOptions.length : activeIndex;
+          const prev = findNextEnabledIndex2(visibleOptions, start, -1);
+          if (prev >= 0) setActiveIndex(prev);
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          const first = findFirstEnabledIndex2(visibleOptions);
+          if (first >= 0) setActiveIndex(first);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const last = findLastEnabledIndex2(visibleOptions);
+          if (last >= 0) setActiveIndex(last);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          if (activeIndex >= 0) commitOption(activeIndex);
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          closePopup(true);
+          break;
+        }
+        default: {
+          if (!searchable && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            e.preventDefault();
+            const ta = typeAheadRef.current;
+            ta.buffer += e.key.toLowerCase();
+            if (ta.timer) clearTimeout(ta.timer);
+            ta.timer = setTimeout(() => {
+              ta.buffer = "";
+            }, 500);
+            const idx = findByTypeAhead(visibleOptions, ta.buffer);
+            if (idx >= 0) setActiveIndex(idx);
+          }
+          break;
+        }
+      }
+    },
+    [activeIndex, closePopup, commitOption, disabled, isOpen, searchable, visibleOptions]
+  );
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    function onDocClick(e) {
+      if (!rootRef.current) return;
+      if (!rootRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setQuery("");
+        field.onBlur();
+      }
+    }
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, [isOpen, field]);
+  const selectedLabel = resolveSelectedLabel(options, field.value);
+  const activeId = activeIndex >= 0 ? getOptionId(instanceId, visibleOptions[activeIndex]?.value ?? "") : void 0;
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: className ?? "relative inline-block w-full", children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        id: labelId,
+        htmlFor: triggerId,
+        className: "block text-sm font-medium text-slate-700 mb-1",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id: triggerId,
+        ref: (el) => {
+          triggerRef.current = el;
+          field.ref(el);
+        },
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": listboxId,
+        "aria-labelledby": labelId,
+        "aria-activedescendant": isOpen ? activeId : void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        disabled,
+        className: getTriggerClasses(disabled, isOpen),
+        onClick: () => !disabled && setIsOpen((o) => !o),
+        onKeyDown: handleKeyDown,
+        onBlur: (e) => {
+          if (rootRef.current?.contains(e.relatedTarget)) return;
+          if (!isOpen) field.onBlur();
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: selectedLabel ? "" : "text-slate-400", children: selectedLabel ?? placeholder ?? "" }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25BE" })
+        ]
+      }
+    ),
+    isOpen ? /* @__PURE__ */ jsxs("div", { className: getListboxClasses(), children: [
+      searchable ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: searchRef,
+          type: "text",
+          className: getSearchInputClasses(),
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: "Search\u2026",
+          autoFocus: true,
+          "aria-label": "Search options"
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("ul", { id: listboxId, role: "listbox", "aria-labelledby": labelId, tabIndex: -1, children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-slate-500", role: "presentation", children: "No options" }) : visibleOptions.map((opt, idx) => {
+        const isSelected = opt.value === field.value;
+        const isActive = idx === activeIndex;
+        return (
+          // biome-ignore lint/a11y/useFocusableInteractive: APG combobox — options are managed via aria-activedescendant on the combobox and are intentionally not in the tab order
+          /* @__PURE__ */ jsx(
+            "li",
+            {
+              id: getOptionId(instanceId, opt.value),
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": opt.disabled || void 0,
+              className: getOptionClasses(isActive, isSelected, !!opt.disabled),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                if (!opt.disabled) commitOption(idx);
+              },
+              onMouseEnter: () => {
+                if (!opt.disabled) setActiveIndex(idx);
+              },
+              children: opt.label
+            },
+            opt.value
+          )
+        );
+      }) })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { id: errorId, children })
+  ] });
+}
+var FieldErrorShapeSchema = z.object({
+  type: z.string(),
+  message: z.string().optional()
+});
+var ErrorDisplayPropsSchema = z.object({
+  error: FieldErrorShapeSchema.optional(),
+  messageMap: z.record(z.string(), z.string()).optional()
+});
+var FormFieldPropsSchema = z.object({
+  name: z.string().min(1)
+});
+var FormProviderPropsSchema = z.object({
+  name: z.string().optional()
+});
+var InputTypeSchema = z.enum(["text", "email", "password", "number", "url"]);
+var InputPropsSchema = z.object({
+  name: z.string().min(1),
+  type: InputTypeSchema.default("text").optional(),
+  placeholder: z.string().optional(),
+  disabled: z.boolean().optional(),
+  autoComplete: z.string().optional(),
+  label: z.string().min(1)
+});
+var TextareaPropsSchema = z.object({
+  name: z.string().min(1),
+  rows: z.number().int().min(1).default(3),
+  maxLength: z.number().int().min(1).optional(),
+  autoResize: z.boolean().default(false),
+  placeholder: z.string().optional(),
+  disabled: z.boolean().optional(),
+  label: z.string().optional()
+});
+function validateTextareaProps(raw) {
+  return TextareaPropsSchema.parse(raw);
+}
+var FieldArrayPropsSchema = z.object({
+  name: z.string().min(1)
+});
+var UseFieldArrayOptionsSchema = z.object({
+  name: z.string().min(1)
+});
+var CheckboxPropsSchema = z.object({
+  name: z.string().min(1),
+  label: z.string().min(1),
+  disabled: z.boolean().optional(),
+  indeterminate: z.boolean().optional(),
+  description: z.string().optional()
+});
+function validateCheckboxProps(raw) {
+  return CheckboxPropsSchema.parse(raw);
+}
+var SelectOptionSchema = z.object({
+  value: z.string().min(1),
+  label: z.string().min(1),
+  disabled: z.boolean().optional().default(false)
+});
+var SelectPropsSchema = z.object({
+  name: z.string().min(1),
+  label: z.string().min(1),
+  options: z.array(SelectOptionSchema).min(1),
+  placeholder: z.string().optional(),
+  disabled: z.boolean().optional().default(false),
+  searchable: z.boolean().optional().default(false),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateSelectProps(raw) {
+  return SelectPropsSchema.parse(raw);
+}
+
+export { Checkbox, CheckboxPropsSchema, DEFAULT_TEXTAREA_ROWS, ErrorDisplay, ErrorDisplayPropsSchema, FieldArray, FieldArrayPropsSchema, FieldErrorShapeSchema, FormField, FormFieldPropsSchema, FormProvider, FormProviderPropsSchema, Input, InputPropsSchema, InputTypeSchema, MosaicFormModeSchema, MultiSelect, MultiSelectOptionSchema, MultiSelectPropsSchema, RadioGroup, RadioGroupOptionSchema, RadioGroupPropsSchema, Select, SelectOptionSchema, SelectPropsSchema, SubmitButton, SubmitButtonPropsSchema, Textarea, TextareaPropsSchema, UseFieldArrayOptionsSchema, UseMosaicFormOptionsSchema, buildAddAriaLabel, buildListAriaLabel, buildRemoveAriaLabel, clampToMaxLength, computeAutoResizeHeight, findFirstEnabledIndex, findLastEnabledIndex, findNextEnabledIndex, findSelectedIndex, getGroupClasses, getGroupLabelId, getNavKeys, getOptionDescriptionId, getOptionLabelId, getOptionRowClasses, getRadioControlClasses, getRovingTabIndex, isActivationKey, nextFocusIndexAfterRemove, resolveAriaChecked, resolveDescribedBy, resolveRows, useFieldArray, useMosaicForm, useMosaicFormContext, validateCheckboxProps, validateRadioGroupProps, validateSelectProps, validateTextareaProps };
+//# sourceMappingURL=forms.js.map
+//# sourceMappingURL=forms.js.map