@arqel-dev/fields 0.8.0

package/dist/index.js

@@ -0,0 +1,944 @@
+import { cn } from '@arqel-dev/ui/utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useRef } from 'react';
+
+// src/shared/styles.ts
+var inputClasses = cn(
+  "h-9 w-full rounded-sm border border-[var(--input)]",
+  "bg-background px-3 text-sm text-foreground",
+  "placeholder:text-muted-foreground",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "aria-invalid:border-destructive"
+);
+var checkboxClasses = cn(
+  "h-4 w-4 rounded border-[var(--input)]",
+  "text-primary",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "disabled:cursor-not-allowed disabled:opacity-50"
+);
+function Checkbox({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "checkbox",
+      className: checkboxClasses,
+      checked: value === true,
+      disabled: disabled || f.disabled || f.readonly,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.checked)
+    }
+  );
+}
+function Toggle({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const checked = value === true;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        id: inputId,
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": describedBy,
+        disabled: isDisabled,
+        onClick: () => onChange(!checked),
+        className: cn(
+          "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
+          checked ? "bg-primary" : "bg-muted",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform",
+              checked ? "translate-x-5" : "translate-x-0.5"
+            )
+          }
+        )
+      }
+    ),
+    (f.props.onLabel || f.props.offLabel) && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: checked ? f.props.onLabel : f.props.offLabel })
+  ] });
+}
+function ColorInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  const current = typeof value === "string" && value.length > 0 ? value : "#000000";
+  const presets = f.props.presets ?? [];
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        type: "color",
+        className: cn(
+          "h-9 w-12 cursor-pointer rounded-sm border border-[var(--input)]",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ),
+        value: current,
+        disabled: isDisabled,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": describedBy,
+        onChange: (e) => onChange(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: "h-9 w-28 rounded-sm border border-[var(--input)] bg-background px-2 font-mono text-xs",
+        value: current,
+        disabled: isDisabled,
+        onChange: (e) => onChange(e.target.value)
+      }
+    ),
+    presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: presets.map((preset) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Preset ${preset}`,
+        disabled: isDisabled,
+        onClick: () => onChange(preset),
+        className: "h-6 w-6 rounded-full border border-border disabled:cursor-not-allowed disabled:opacity-50",
+        style: { backgroundColor: preset }
+      },
+      preset
+    )) })
+  ] });
+}
+function DateInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "date",
+      className: inputClasses,
+      value: typeof value === "string" ? value : "",
+      disabled: disabled || f.disabled || f.readonly,
+      readOnly: f.readonly === true,
+      required: f.required === true,
+      min: f.props.minDate,
+      max: f.props.maxDate,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+    }
+  );
+}
+function DateTimeInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "datetime-local",
+      className: inputClasses,
+      value: typeof value === "string" ? value : "",
+      disabled: disabled || f.disabled || f.readonly,
+      readOnly: f.readonly === true,
+      required: f.required === true,
+      min: f.props.minDate,
+      max: f.props.maxDate,
+      step: f.props.seconds ? 1 : void 0,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+    }
+  );
+}
+function FileInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  const [dragOver, setDragOver] = useState(false);
+  const file = value instanceof File ? value : null;
+  const filename = file?.name ?? (typeof value === "string" ? value : null);
+  const handleFiles = (files) => {
+    if (!files || files.length === 0) return;
+    onChange(files[0]);
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": "File upload",
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!isDisabled) setDragOver(true);
+      },
+      onDragLeave: () => setDragOver(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setDragOver(false);
+        if (!isDisabled) handleFiles(e.dataTransfer.files);
+      },
+      className: cn(
+        "flex flex-col items-center justify-center gap-2 rounded-sm border-2 border-dashed px-4 py-6 text-sm",
+        dragOver ? "border-primary bg-muted" : "border-border",
+        hasError && "border-destructive",
+        isDisabled && "opacity-50"
+      ),
+      children: [
+        filename ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: filename }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Drag a file here or click to browse" }),
+        /* @__PURE__ */ jsxs("label", { className: "cursor-pointer text-xs text-primary hover:underline", children: [
+          filename ? "Choose another file" : "Browse",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type: "file",
+              className: "sr-only",
+              disabled: isDisabled,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": describedBy,
+              onChange: (e) => handleFiles(e.target.files)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ImageInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  const [previewUrl, setPreviewUrl] = useState(null);
+  useEffect(() => {
+    if (value instanceof File) {
+      const url = URL.createObjectURL(value);
+      setPreviewUrl(url);
+      return () => URL.revokeObjectURL(url);
+    }
+    if (typeof value === "string" && value.length > 0) {
+      setPreviewUrl(value);
+      return void 0;
+    }
+    setPreviewUrl(null);
+    return void 0;
+  }, [value]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    previewUrl && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: previewUrl,
+        alt: "Preview",
+        className: cn("max-h-40 w-auto rounded-sm border border-border")
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "inline-flex w-fit cursor-pointer items-center gap-2 rounded-sm border border-border px-3 py-1.5 text-sm",
+          "hover:bg-muted",
+          isDisabled && "cursor-not-allowed opacity-50"
+        ),
+        children: [
+          previewUrl ? "Replace image" : "Choose image",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type: "file",
+              accept: "image/*",
+              className: "sr-only",
+              disabled: isDisabled,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": describedBy,
+              onChange: (e) => {
+                const file = e.target.files?.[0];
+                if (file) onChange(file);
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function HiddenInput({ field, value, inputId }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "hidden",
+      name: field.name,
+      value: value === null || value === void 0 ? "" : String(value),
+      readOnly: true
+    }
+  );
+}
+function CurrencyInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const [focused, setFocused] = useState(false);
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  const numeric = typeof value === "number" ? value : value === "" || value == null ? null : Number(value);
+  const decimals = f.props.decimals ?? 2;
+  const formatted = numeric === null || Number.isNaN(numeric) ? "" : `${f.props.prefix}${formatNumber(numeric, decimals, f.props.thousandsSeparator, f.props.decimalSeparator)}${f.props.suffix ?? ""}`;
+  const display = focused ? numeric === null ? "" : String(numeric) : formatted;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: focused ? "number" : "text",
+      inputMode: "decimal",
+      className: inputClasses,
+      value: display,
+      placeholder: f.placeholder ?? void 0,
+      disabled: isDisabled,
+      readOnly: f.readonly === true,
+      required: f.required === true,
+      min: f.props.min,
+      max: f.props.max,
+      step: f.props.step ?? 10 ** -decimals,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      onChange: (e) => {
+        const raw = e.target.value;
+        if (raw === "") {
+          onChange(null);
+          return;
+        }
+        const num = Number(raw);
+        onChange(Number.isNaN(num) ? null : num);
+      }
+    }
+  );
+}
+function formatNumber(num, decimals, thousands, decimal) {
+  const fixed = num.toFixed(decimals);
+  const [whole, frac] = fixed.split(".");
+  const safeWhole = (whole ?? "0").replace(/\B(?=(\d{3})+(?!\d))/g, thousands);
+  return frac ? `${safeWhole}${decimal}${frac}` : safeWhole;
+}
+function NumberInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  const setValue = (raw) => {
+    if (Number.isNaN(raw)) {
+      onChange(null);
+      return;
+    }
+    if (f.props.integer) onChange(Math.trunc(raw));
+    else onChange(raw);
+  };
+  const current = typeof value === "number" ? value : null;
+  const step = typeof f.props.step === "number" ? f.props.step : 1;
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex w-full", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        type: "number",
+        inputMode: f.props.integer ? "numeric" : "decimal",
+        className: cn(inputClasses, "pr-16"),
+        value: current === null ? "" : String(current),
+        placeholder: f.placeholder ?? void 0,
+        disabled: isDisabled,
+        readOnly: f.readonly === true,
+        required: f.required === true,
+        min: f.props.min,
+        max: f.props.max,
+        step: f.props.step,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": describedBy,
+        onChange: (e) => {
+          if (e.target.value === "") {
+            onChange(null);
+            return;
+          }
+          setValue(Number(e.target.value));
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "absolute inset-y-0 right-0 flex flex-col", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Increment",
+          disabled: isDisabled,
+          onClick: () => setValue((current ?? 0) + step),
+          className: "flex h-1/2 w-8 items-center justify-center text-xs text-muted-foreground hover:text-foreground disabled:opacity-50",
+          children: "\u25B2"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Decrement",
+          disabled: isDisabled,
+          onClick: () => setValue((current ?? 0) - step),
+          className: "flex h-1/2 w-8 items-center justify-center text-xs text-muted-foreground hover:text-foreground disabled:opacity-50",
+          children: "\u25BC"
+        }
+      )
+    ] })
+  ] });
+}
+function BelongsToInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [open, setOpen] = useState(false);
+  const debounceRef = useRef(null);
+  const abortRef = useRef(null);
+  useEffect(() => {
+    if (!f.props.searchRoute || !query) {
+      setResults([]);
+      return;
+    }
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const url = `${f.props.searchRoute}?q=${encodeURIComponent(query)}`;
+      fetch(url, { signal: controller.signal, headers: { Accept: "application/json" } }).then((r) => r.ok ? r.json() : []).then((data) => {
+        if (Array.isArray(data)) setResults(data);
+      }).catch(() => {
+      });
+    }, 300);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query, f.props.searchRoute]);
+  const selectedLabel = results.find((r) => String(r.value) === String(value))?.label;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        type: "text",
+        className: inputClasses,
+        value: open ? query : selectedLabel ?? (value === null || value === void 0 ? "" : String(value)),
+        placeholder: f.placeholder ?? `Search ${f.props.relatedResource}\u2026`,
+        disabled: isDisabled,
+        readOnly: !(f.readonly === true || f.readonly === void 0),
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": describedBy,
+        "aria-expanded": open,
+        "aria-controls": `${inputId}-listbox`,
+        role: "combobox",
+        onFocus: () => setOpen(true),
+        onBlur: () => setTimeout(() => setOpen(false), 100),
+        onChange: (e) => setQuery(e.target.value)
+      }
+    ),
+    open && results.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `${inputId}-listbox`,
+        role: "listbox",
+        className: cn(
+          "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-sm border border-border bg-background shadow-md"
+        ),
+        children: results.map((r) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "option",
+            "aria-selected": String(r.value) === String(value),
+            tabIndex: -1,
+            className: "cursor-pointer px-3 py-1.5 text-sm hover:bg-muted",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              onChange(r.value);
+              setQuery("");
+              setOpen(false);
+            },
+            children: r.label
+          },
+          String(r.value)
+        ))
+      }
+    )
+  ] });
+}
+function HasManyReadonly({ field, value, inputId, describedBy }) {
+  const f = field;
+  const items = Array.isArray(value) ? value : [];
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxs("p", { id: inputId, "aria-describedby": describedBy, className: "text-sm text-muted-foreground", children: [
+      "No ",
+      f.props.relatedResource,
+      " linked."
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      id: inputId,
+      "aria-describedby": describedBy,
+      className: "divide-y divide-[var(--border)] rounded-sm border border-border",
+      children: items.map((item) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex items-center justify-between gap-3 px-3 py-2 text-sm",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: item.label ?? `#${item.id}` }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground", children: item.id })
+          ]
+        },
+        String(item.id)
+      ))
+    }
+  );
+}
+
+// src/shared/options.ts
+function normaliseOptions(options) {
+  if (!options) return [];
+  if (Array.isArray(options)) {
+    return options.filter(
+      (o) => typeof o === "object" && o !== null && "value" in o && "label" in o
+    );
+  }
+  if (typeof options === "object") {
+    return Object.entries(options).map(([value, label]) => ({
+      value,
+      label
+    }));
+  }
+  return [];
+}
+function MultiSelectInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const options = normaliseOptions(f.props.options);
+  const arr = Array.isArray(value) ? value : [];
+  const selectedSet = new Set(arr.map(String));
+  const isDisabled = disabled || f.disabled || f.readonly;
+  const remove = (v) => {
+    onChange(arr.filter((x) => String(x) !== String(v)));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    arr.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: arr.map((v) => {
+      const opt = options.find((o) => String(o.value) === String(v));
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex items-center gap-1 rounded-sm bg-muted px-2 py-0.5 text-xs",
+          children: [
+            opt?.label ?? String(v),
+            !isDisabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${opt?.label ?? String(v)}`,
+                onClick: () => remove(v),
+                className: "text-muted-foreground hover:text-foreground",
+                children: "\u2715"
+              }
+            )
+          ]
+        },
+        String(v)
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        id: inputId,
+        multiple: true,
+        className: cn(inputClasses, "h-auto min-h-[6rem] py-1"),
+        value: Array.from(selectedSet),
+        disabled: isDisabled,
+        "aria-invalid": hasError || void 0,
+        "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,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: inputId,
+      role: "radiogroup",
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      className: cn("flex gap-3", f.props.inline ? "flex-row flex-wrap" : "flex-col"),
+      children: (f.props.options ?? []).map((opt) => {
+        const checked = String(value ?? "") === String(opt.value);
+        return /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: f.name,
+              value: String(opt.value),
+              checked,
+              disabled: isDisabled,
+              onChange: () => onChange(opt.value),
+              className: "h-4 w-4 border-[var(--input)] text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            }
+          ),
+          opt.label
+        ] }, String(opt.value));
+      })
+    }
+  );
+}
+function SelectInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const options = normaliseOptions(f.props.options);
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      id: inputId,
+      className: inputClasses,
+      value: value === null || value === void 0 ? "" : String(value),
+      disabled: disabled || f.disabled || f.readonly,
+      required: f.required === true,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
+      children: [
+        (f.placeholder || !f.required) && /* @__PURE__ */ jsx("option", { value: "", children: f.placeholder ?? "\u2014" }),
+        options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      ]
+    }
+  );
+}
+function SlugInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "text",
+      className: inputClasses,
+      value: typeof value === "string" ? value : "",
+      placeholder: f.placeholder ?? "my-resource-slug",
+      disabled: disabled || f.disabled || f.readonly,
+      readOnly: f.readonly === true,
+      required: f.required === true,
+      maxLength: f.props.maxLength,
+      autoComplete: "off",
+      pattern: "^[a-z0-9-]*$",
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(slugify(e.target.value))
+    }
+  );
+}
+function slugify(input) {
+  return input.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function EmailInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "email",
+      className: inputClasses,
+      value: typeof value === "string" ? value : "",
+      placeholder: f.placeholder ?? void 0,
+      disabled: disabled || f.disabled || f.readonly,
+      readOnly: f.readonly === true,
+      required: f.required === true,
+      autoComplete: f.props.autocomplete ?? "email",
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
+function PasswordInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const [revealed, setRevealed] = useState(false);
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        type: revealed ? "text" : "password",
+        className: cn(inputClasses, "pr-10"),
+        value: typeof value === "string" ? value : "",
+        placeholder: f.placeholder ?? void 0,
+        disabled: isDisabled,
+        readOnly: f.readonly === true,
+        required: f.required === true,
+        autoComplete: f.props.autocomplete ?? "current-password",
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": describedBy,
+        onChange: (e) => onChange(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": revealed ? "Hide password" : "Show password",
+        "aria-pressed": revealed,
+        disabled: isDisabled,
+        onClick: () => setRevealed((v) => !v),
+        className: cn(
+          "absolute inset-y-0 right-0 flex w-9 items-center justify-center text-sm",
+          "text-muted-foreground hover:text-foreground",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ),
+        children: revealed ? "\u25C9" : "\u25CB"
+      }
+    )
+  ] });
+}
+function TextareaInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      id: inputId,
+      className: cn(inputClasses, "h-auto min-h-[5rem] py-2"),
+      value: typeof value === "string" ? value : "",
+      placeholder: f.placeholder ?? void 0,
+      disabled: disabled || f.disabled || f.readonly,
+      readOnly: f.readonly === true,
+      required: f.required === true,
+      rows: 4,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
+function TextInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "text",
+      className: inputClasses,
+      value: typeof value === "string" ? value : "",
+      placeholder: f.placeholder ?? void 0,
+      disabled: disabled || f.disabled || f.readonly,
+      readOnly: f.readonly === true,
+      required: f.required === true,
+      maxLength: f.props.maxLength,
+      minLength: f.props.minLength,
+      pattern: f.props.pattern,
+      autoComplete: f.props.autocomplete,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
+function UrlInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "url",
+      inputMode: "url",
+      className: inputClasses,
+      value: typeof value === "string" ? value : "",
+      placeholder: f.placeholder ?? "https://\u2026",
+      disabled: disabled || f.disabled || f.readonly,
+      readOnly: f.readonly === true,
+      required: f.required === true,
+      autoComplete: f.props.autocomplete ?? "url",
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
+
+export { BelongsToInput, Checkbox, ColorInput, CurrencyInput, DateInput, DateTimeInput, EmailInput, FileInput, HasManyReadonly, HiddenInput, ImageInput, MultiSelectInput, NumberInput, PasswordInput, RadioGroup, SelectInput, SlugInput, TextInput, TextareaInput, Toggle, UrlInput, slugify };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map