@arqel-dev/ui 0.11.0 → 0.14.0

package/dist/chunk-4JJS2SVS.js

@@ -0,0 +1,628 @@
+import { cn } from './chunk-B7ULUJVO.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useId, useState, useRef } from 'react';
+import { isFieldEntry, isLayoutEntry } from '@arqel-dev/types/forms';
+
+// src/form/FieldRegistry.tsx
+var registry = /* @__PURE__ */ new Map();
+function registerField(name, component) {
+  registry.set(name, component);
+}
+function getFieldComponent(name) {
+  return registry.get(name);
+}
+function unregisterField(name) {
+  registry.delete(name);
+}
+function getRegisteredFields() {
+  return Array.from(registry.keys()).sort();
+}
+function clearFieldRegistry() {
+  registry.clear();
+}
+var inputClasses = cn(
+  "h-9 rounded-sm border border-[var(--input)]",
+  "bg-background px-3 text-sm",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "disabled:cursor-not-allowed disabled:opacity-50"
+);
+function NativeFieldInput(props) {
+  const { field } = props;
+  switch (field.type) {
+    case "text":
+    case "email":
+    case "url":
+    case "password":
+    case "slug":
+      return /* @__PURE__ */ jsx(TextLike, { ...props, field });
+    case "textarea":
+      return /* @__PURE__ */ jsx(Textarea, { ...props, field });
+    case "number":
+    case "currency":
+      return /* @__PURE__ */ jsx(NumericInput, { ...props, field });
+    case "boolean":
+    case "toggle":
+      return /* @__PURE__ */ jsx(Checkbox, { ...props, field });
+    case "select":
+      return /* @__PURE__ */ jsx(SelectInput, { ...props, field });
+    case "multiSelect":
+    case "hasMany":
+      return /* @__PURE__ */ jsx(MultiSelectInput, { ...props, field });
+    case "radio":
+      return /* @__PURE__ */ jsx(RadioGroup, { ...props, field });
+    case "belongsTo":
+      return /* @__PURE__ */ jsx(BelongsToInput, { ...props, field });
+    case "date":
+    case "dateTime":
+      return /* @__PURE__ */ jsx(DateInput, { ...props, field });
+    case "file":
+    case "image":
+      return /* @__PURE__ */ jsx(FileInput, { ...props });
+    default:
+      return /* @__PURE__ */ jsx(UnregisteredField, { field });
+  }
+}
+function UnregisteredField({ field }) {
+  if (field.component) {
+    console.warn(
+      `[arqel] field "${field.name}" uses unregistered component "${field.component}" \u2014 did you import its /register module?`
+    );
+  } else {
+    console.warn(`[arqel] field "${field.name}" has no native input for type "${field.type}".`);
+  }
+  const detail = field.component ? `unregistered component "${field.component}"` : `unsupported type "${field.type}"`;
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      "data-testid": "arqel-unregistered-field",
+      role: "alert",
+      className: "rounded-sm border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive",
+      children: [
+        'Field "',
+        field.name,
+        '" could not render: ',
+        detail,
+        "."
+      ]
+    }
+  );
+}
+function TextLike({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const htmlType = field.type === "email" ? "email" : field.type === "password" ? "password" : field.type === "url" ? "url" : "text";
+  const isDisabled = disabled || field.disabled || field.readonly;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: htmlType,
+      className: inputClasses,
+      value: typeof value === "string" ? value : (value ?? "")?.toString() ?? "",
+      placeholder: field.placeholder ?? void 0,
+      disabled: isDisabled,
+      readOnly: field.readonly === true,
+      required: field.required === true,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
+function Textarea({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      id: inputId,
+      className: cn(inputClasses, "h-auto min-h-[5rem] py-2"),
+      value: typeof value === "string" ? value : "",
+      placeholder: field.placeholder ?? void 0,
+      disabled: disabled || field.disabled || field.readonly,
+      readOnly: field.readonly === true,
+      required: field.required === true,
+      rows: 4,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
+function NumericInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "number",
+      className: inputClasses,
+      value: value === null || value === void 0 ? "" : String(value),
+      placeholder: field.placeholder ?? void 0,
+      disabled: disabled || field.disabled || field.readonly,
+      readOnly: field.readonly === true,
+      required: field.required === true,
+      "aria-describedby": describedBy,
+      onChange: (e) => {
+        const raw = e.target.value;
+        if (raw === "") {
+          onChange(null);
+          return;
+        }
+        const num = Number(raw);
+        onChange(Number.isNaN(num) ? null : num);
+      }
+    }
+  );
+}
+function Checkbox({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "checkbox",
+      className: "h-4 w-4 rounded border-[var(--input)]",
+      checked: value === true,
+      disabled: disabled || field.disabled || field.readonly,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.checked)
+    }
+  );
+}
+function normaliseOptions(options) {
+  if (!options) return [];
+  if (Array.isArray(options)) return options;
+  return Object.entries(options).map(([value, label]) => ({ value, label }));
+}
+function SelectInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const options = normaliseOptions(field.props.options);
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      id: inputId,
+      className: inputClasses,
+      value: value === null || value === void 0 ? "" : String(value),
+      disabled: disabled || field.disabled || field.readonly,
+      required: field.required === true,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
+      children: [
+        field.placeholder && /* @__PURE__ */ jsx("option", { value: "", children: field.placeholder }),
+        options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      ]
+    }
+  );
+}
+function MultiSelectInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const arr = Array.isArray(value) ? value : [];
+  const options = field.type === "multiSelect" ? normaliseOptions(field.props.options) : [];
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      id: inputId,
+      multiple: true,
+      className: cn(inputClasses, "h-auto min-h-[6rem] py-1"),
+      value: arr.map(String),
+      disabled: disabled || field.disabled || field.readonly,
+      "aria-describedby": describedBy,
+      onChange: (e) => {
+        const next = Array.from(e.target.selectedOptions, (o) => o.value);
+        onChange(next);
+      },
+      children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+    }
+  );
+}
+function RadioGroup({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: inputId,
+      className: "flex flex-col gap-1",
+      "aria-describedby": describedBy,
+      role: "radiogroup",
+      children: (field.props.options ?? []).map((opt) => /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name: field.name,
+            value: String(opt.value),
+            checked: String(value ?? "") === String(opt.value),
+            disabled: disabled || field.disabled || field.readonly,
+            onChange: () => onChange(opt.value)
+          }
+        ),
+        opt.label
+      ] }, opt.value))
+    }
+  );
+}
+function BelongsToInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "text",
+      className: inputClasses,
+      value: value === null || value === void 0 ? "" : String(value),
+      placeholder: field.placeholder ?? `Search ${field.props.relatedResource}\u2026`,
+      disabled: disabled || field.disabled || field.readonly,
+      readOnly: field.readonly === true,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+    }
+  );
+}
+function DateInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: field.type === "dateTime" ? "datetime-local" : "date",
+      className: inputClasses,
+      value: typeof value === "string" ? value : "",
+      disabled: disabled || field.disabled || field.readonly,
+      readOnly: field.readonly === true,
+      required: field.required === true,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+    }
+  );
+}
+function FileInput({
+  field,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "file",
+      className: "text-sm",
+      disabled: disabled || field.disabled || field.readonly,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.files?.[0] ?? null)
+    }
+  );
+}
+function FieldRenderer(props) {
+  const { field, errors, className } = props;
+  const id = useId();
+  const errorId = `${id}-error`;
+  const helperId = `${id}-helper`;
+  const hasError = errors && errors.length > 0;
+  const Custom = field.component ? getFieldComponent(field.component) : void 0;
+  const Input = Custom ?? NativeFieldInput;
+  const describedBy = [field.helperText ? helperId : null, hasError ? errorId : null].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-arqel-field": field.name,
+      "data-field-type": field.type,
+      className: cn("flex flex-col gap-1", className),
+      children: [
+        field.label !== null && field.label !== "" && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "text-sm font-medium", children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx(Input, { ...props, inputId: id, describedBy: describedBy || void 0 }),
+        field.helperText && !hasError && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-xs text-muted-foreground", children: field.helperText }),
+        hasError && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-xs text-destructive", children: errors[0] })
+      ]
+    }
+  );
+}
+function FormFieldset({ config, children, className }) {
+  return /* @__PURE__ */ jsxs("fieldset", { className: cn("rounded-md border border-border p-4", className), children: [
+    /* @__PURE__ */ jsx("legend", { className: "px-1 text-sm font-medium", children: config.legend }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "grid gap-4",
+        style: { gridTemplateColumns: `repeat(${config.columns ?? 1}, minmax(0, 1fr))` },
+        children
+      }
+    )
+  ] });
+}
+function FormGrid({ config, children, className }) {
+  const columns = typeof config.columns === "number" ? config.columns : config.columns["md"] ?? 1;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid", className),
+      style: {
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gap: config.gap ?? "1rem"
+      },
+      children
+    }
+  );
+}
+function FormSection({ config, children, className }) {
+  const [open, setOpen] = useState(!config.collapsed);
+  const collapsible = config.collapsible === true;
+  const heading = /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: config.heading }),
+      config.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: config.description })
+    ] }),
+    collapsible && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        className: "text-sm text-muted-foreground hover:underline",
+        children: open ? "Hide" : "Show"
+      }
+    )
+  ] });
+  const body = open && /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "grid gap-4",
+      style: { gridTemplateColumns: `repeat(${config.columns ?? 1}, minmax(0, 1fr))` },
+      children
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "data-arqel-section": "",
+      className: cn(
+        "rounded-md border border-border bg-background",
+        config.compact ? "p-3" : "p-4",
+        className
+      ),
+      children: config.aside ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-[16rem_1fr]", children: [
+        /* @__PURE__ */ jsx("div", { children: heading }),
+        /* @__PURE__ */ jsx("div", { children: body })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-3", children: heading }),
+        body
+      ] })
+    }
+  );
+}
+function FormTabs({ config, tabs, className }) {
+  const [active, setActive] = useState(config.defaultTab ?? tabs[0]?.id ?? null);
+  const baseId = useId();
+  const refs = useRef([]);
+  if (tabs.length === 0 || active === null) return null;
+  const activeIndex = Math.max(
+    0,
+    tabs.findIndex((t) => t.id === active)
+  );
+  const activeTab = tabs[activeIndex];
+  if (!activeTab) return null;
+  const focus = (i) => {
+    const target = tabs[i];
+    if (!target) return;
+    setActive(target.id);
+    refs.current[i]?.focus();
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focus((activeIndex + 1) % tabs.length);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focus((activeIndex - 1 + tabs.length) % tabs.length);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focus(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      focus(tabs.length - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tablist",
+        "aria-orientation": config.orientation,
+        className: "flex gap-1 border-b border-border",
+        children: tabs.map((tab, i) => {
+          const selected = tab.id === active;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (el) => {
+                refs.current[i] = el;
+              },
+              type: "button",
+              role: "tab",
+              id: `${baseId}-tab-${tab.id}`,
+              "aria-controls": `${baseId}-panel-${tab.id}`,
+              "aria-selected": selected,
+              tabIndex: selected ? 0 : -1,
+              onClick: () => setActive(tab.id),
+              onKeyDown,
+              className: cn(
+                "-mb-px border-b-2 px-3 py-2 text-sm transition-colors",
+                selected ? "border-primary font-medium text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+              ),
+              children: [
+                tab.label,
+                tab.badge !== void 0 && tab.badge !== null && /* @__PURE__ */ jsx("span", { className: "ml-1 rounded-full bg-muted px-1.5 text-xs", children: tab.badge })
+              ]
+            },
+            tab.id
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${baseId}-panel-${activeTab.id}`,
+        "aria-labelledby": `${baseId}-tab-${activeTab.id}`,
+        className: "pt-4",
+        children: activeTab.content
+      }
+    )
+  ] });
+}
+function FormRenderer({
+  schema,
+  fields,
+  values,
+  errors = {},
+  onChange,
+  disabled = false,
+  className
+}) {
+  const remaining = [...fields];
+  const claimField = (entry) => {
+    let idx = remaining.findIndex((f) => f.name === entry.name && f.type === entry.type);
+    if (idx === -1) idx = remaining.findIndex((f) => f.name === entry.name);
+    if (idx === -1) return void 0;
+    return remaining.splice(idx, 1)[0];
+  };
+  const renderEntry = (entry, key) => {
+    if (isFieldEntry(entry)) {
+      return renderFieldEntry(entry, key);
+    }
+    if (isLayoutEntry(entry)) {
+      return renderLayoutEntry(entry, key);
+    }
+    return null;
+  };
+  const renderFieldEntry = (entry, key) => {
+    const field = claimField(entry);
+    if (!field) return null;
+    return /* @__PURE__ */ jsx(
+      FieldRenderer,
+      {
+        field,
+        value: values[entry.name],
+        errors: errors[entry.name],
+        disabled: disabled || schema.disabled === true,
+        onChange: (value) => onChange(entry.name, value)
+      },
+      key
+    );
+  };
+  const renderChildren = (entries) => {
+    if (!entries) return null;
+    return entries.map((child, i) => renderEntry(child, `${i}`));
+  };
+  const renderLayoutEntry = (entry, key) => {
+    switch (entry.type) {
+      case "section":
+        return /* @__PURE__ */ jsx(FormSection, { config: entry.props, children: renderChildren(entry.schema) }, key);
+      case "fieldset":
+        return /* @__PURE__ */ jsx(FormFieldset, { config: entry.props, children: renderChildren(entry.schema) }, key);
+      case "grid":
+      case "columns":
+        return /* @__PURE__ */ jsx(
+          FormGrid,
+          {
+            config: entry.type === "columns" ? { columns: entry.props.columns } : entry.props,
+            children: renderChildren(entry.schema)
+          },
+          key
+        );
+      case "group":
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex gap-4",
+              entry.props.orientation === "vertical" ? "flex-col" : "flex-row"
+            ),
+            children: renderChildren(entry.schema)
+          },
+          key
+        );
+      case "tabs": {
+        const tabs = (entry.schema ?? []).filter((c) => isLayoutEntry(c) && c.type === "tab").map((tab) => ({
+          id: tab.props.id,
+          label: tab.props.label,
+          badge: tab.props.badge,
+          content: renderChildren(tab.schema) ?? /* @__PURE__ */ jsx("span", {}, `tab-${tab.props.id}-empty`)
+        }));
+        return /* @__PURE__ */ jsx(FormTabs, { config: entry.props, tabs }, key);
+      }
+      case "tab":
+        return null;
+    }
+  };
+  const columns = schema.columns ?? 1;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-arqel-form": "",
+      className: cn("grid gap-4", className),
+      style: columns > 1 ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : void 0,
+      children: schema.schema.map((entry, i) => renderEntry(entry, `${i}`))
+    }
+  );
+}
+
+export { FieldRenderer, FormFieldset, FormGrid, FormRenderer, FormSection, FormTabs, NativeFieldInput, clearFieldRegistry, getFieldComponent, getRegisteredFields, registerField, unregisterField };
+//# sourceMappingURL=chunk-4JJS2SVS.js.map
+//# sourceMappingURL=chunk-4JJS2SVS.js.map