@pipelex/mthds-form 0.1.0

package/dist/react/index.js

@@ -0,0 +1,1118 @@
+"use client";
+import { toStoredDateValue, toDateInputValue, isFilled } from '../chunk-DAP47OGP.js';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { ChevronDown, ChevronUp, Check, List, Braces, ListChecks, ToggleLeft, Hash, Image, FileText, CalendarDays, Type, Loader2, Upload, Link2, ImageOff, EyeOff, Eye, X, Minus, Plus, Trash2 } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React2 from 'react';
+import { createContext, useMemo, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { useDropzone } from 'react-dropzone';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva } from 'class-variance-authority';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var CATEGORY_ICON = {
+  text: Type,
+  date: CalendarDays,
+  document: FileText,
+  image: Image,
+  number: Hash,
+  boolean: ToggleLeft,
+  choice: ListChecks,
+  structured: Braces,
+  list: List
+};
+function ConceptPill({ conceptRef, category, className }) {
+  const Icon2 = CATEGORY_ICON[category];
+  const label = conceptRef ?? category;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 font-mono text-[10.5px] leading-none text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon2, { className: "h-3 w-3 shrink-0 opacity-70", strokeWidth: 1.75, "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+      ]
+    }
+  );
+}
+var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+function BooleanField({ field, value, onChange, id, disabled }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-4 rounded-md border border-border bg-input px-3.5 py-3",
+        disabled && "opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: id,
+                className: "font-mono text-[13px] font-medium leading-none text-foreground",
+                children: field.title ?? field.name
+              }
+            ),
+            /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "boolean" })
+          ] }),
+          field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id,
+            checked: value ?? false,
+            onCheckedChange: onChange,
+            disabled,
+            className: "shrink-0"
+          }
+        )
+      ]
+    }
+  );
+}
+var DEFAULT_FIELD_STRINGS = {
+  optionalBadge: "optional",
+  selectPlaceholder: "Select\u2026",
+  typeValuePlaceholder: "Type a value\u2026",
+  writeHerePlaceholder: "Write here\u2026",
+  jsonHint: "Enter this value as raw JSON.",
+  decrease: "Decrease",
+  increase: "Increase",
+  noItemsYet: "No items yet",
+  addItem: "Add item",
+  removeItemAria: (index) => `Remove item ${index}`,
+  itemsCount: (count) => count === 1 ? "1 item" : `${count} items`,
+  uploading: "Uploading\u2026",
+  dropToUpload: "Drop to upload",
+  dropOrBrowse: "Drop a file or click to browse",
+  pasteUrlInstead: "paste a URL instead",
+  urlPlaceholder: "https://\u2026 or pipelex-storage://\u2026",
+  uploadedFile: "Uploaded file",
+  preview: "Preview",
+  removeFileAria: "Remove file",
+  previewUnavailablePdf: "Preview unavailable - open to view.",
+  hideOptionalFields: "Hide optional fields",
+  hideOptionalInputs: "Hide optional inputs",
+  optionalFieldsCount: (count) => count === 1 ? "1 optional field" : `${count} optional fields`,
+  optionalInputsCount: (count) => count === 1 ? "1 optional input" : `${count} optional inputs`
+};
+var FieldStringsContext = createContext(DEFAULT_FIELD_STRINGS);
+function FieldStringsProvider({
+  strings,
+  children
+}) {
+  const merged = useMemo(() => ({ ...DEFAULT_FIELD_STRINGS, ...strings }), [strings]);
+  return /* @__PURE__ */ jsx(FieldStringsContext.Provider, { value: merged, children });
+}
+function useFieldStrings() {
+  return useContext(FieldStringsContext);
+}
+function FieldShell({
+  name,
+  title,
+  conceptRef,
+  category,
+  description,
+  required,
+  error,
+  htmlFor,
+  children,
+  className
+}) {
+  const s = useFieldStrings();
+  const Label2 = htmlFor ? "label" : "div";
+  const labelText = title !== void 0 ? title : name;
+  const showLabel = labelText.trim() !== "";
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+      showLabel && /* @__PURE__ */ jsx(
+        Label2,
+        {
+          ...htmlFor ? { htmlFor } : {},
+          className: "font-mono text-[13px] font-medium leading-none text-foreground",
+          children: labelText
+        }
+      ),
+      /* @__PURE__ */ jsx(ConceptPill, { conceptRef, category }),
+      !required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: s.optionalBadge })
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: description }),
+    children,
+    error && /* @__PURE__ */ jsx("p", { className: "flex items-center gap-1 text-[11px] text-destructive", role: "alert", children: error })
+  ] });
+}
+
+// src/react/field-styles.ts
+var fieldControlClass = cn(
+  "w-full rounded-md border border-border bg-input text-sm text-foreground",
+  "placeholder:text-muted-foreground/70 transition-colors",
+  "focus-visible:outline-none focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary/40",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/30"
+);
+function DateField({ field, value, onChange, id, error, disabled }) {
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "date",
+      description: field.description,
+      required: field.required,
+      error,
+      htmlFor: id,
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "date",
+          value: toDateInputValue(value),
+          disabled,
+          "aria-invalid": !!error,
+          onChange: (e) => onChange(toStoredDateValue(e.target.value, field.datetime)),
+          className: cn(fieldControlClass, "h-11 px-3 font-mono tabular-nums")
+        }
+      )
+    }
+  );
+}
+var IMAGE_EXT_RE = /\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)(\?|$)/i;
+var PDF_EXT_RE = /\.pdf(\?|$)/i;
+function DocumentField(props) {
+  return /* @__PURE__ */ jsx(FileField, { ...props, category: "document" });
+}
+function ImageField(props) {
+  return /* @__PURE__ */ jsx(FileField, { ...props, category: "image" });
+}
+function FileField({
+  field,
+  value,
+  onDropFile,
+  onChange,
+  id,
+  uploading,
+  resolveUrl,
+  error,
+  disabled,
+  category
+}) {
+  const s = useFieldStrings();
+  const [showUrl, setShowUrl] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [localPreview, setLocalPreview] = useState(null);
+  const localUrlRef = useRef(null);
+  const setLocal = useCallback((next) => {
+    if (localUrlRef.current) URL.revokeObjectURL(localUrlRef.current);
+    localUrlRef.current = next?.url ?? null;
+    setLocalPreview(next);
+  }, []);
+  useEffect(() => () => setLocal(null), [setLocal]);
+  const handleFile = useCallback(
+    (file) => {
+      setLocal({ url: URL.createObjectURL(file), type: file.type });
+      onDropFile(file);
+    },
+    [setLocal, onDropFile]
+  );
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    maxFiles: 1,
+    multiple: false,
+    disabled: disabled || uploading,
+    onDrop: (files) => {
+      const file = files[0];
+      if (file) handleFile(file);
+    }
+  });
+  const clear = useCallback(() => {
+    setLocal(null);
+    setResolvedSrc(null);
+    setPreviewOpen(false);
+    onChange(void 0);
+  }, [setLocal, onChange]);
+  const hasFile = !!value?.url;
+  const ref = `${value?.filename ?? ""} ${value?.url ?? ""}`;
+  const isImage = category === "image" || localPreview?.type.startsWith("image/") || IMAGE_EXT_RE.test(ref);
+  const isPdf = localPreview?.type === "application/pdf" || PDF_EXT_RE.test(ref);
+  const canPreview = isImage || isPdf;
+  const [resolvedSrc, setResolvedSrc] = useState(null);
+  const storageUri = value?.url && !value.url.startsWith("http") ? value.url : null;
+  useEffect(() => {
+    if (!previewOpen || !storageUri || localPreview || !resolveUrl) return;
+    let cancelled = false;
+    void resolveUrl(storageUri).then((url) => {
+      if (!cancelled) setResolvedSrc(url);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [previewOpen, storageUri, localPreview, resolveUrl]);
+  const previewSrc = localPreview?.url ?? (value?.url?.startsWith("http") ? value.url : resolvedSrc ?? void 0);
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category,
+      description: field.description,
+      required: field.required,
+      error,
+      children: [
+        hasFile && !uploading ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(
+            FileChip,
+            {
+              value,
+              disabled,
+              onClear: clear,
+              canPreview,
+              previewOpen,
+              onTogglePreview: () => setPreviewOpen((v) => !v)
+            }
+          ),
+          previewOpen && (previewSrc && isImage ? /* @__PURE__ */ jsx(ImagePreview, { src: previewSrc, filename: value?.filename }) : previewSrc && isPdf ? /* @__PURE__ */ jsx(PdfPreview, { src: previewSrc }) : /* @__PURE__ */ jsx("div", { className: "flex h-24 items-center justify-center rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }))
+        ] }) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...getRootProps(),
+            className: cn(
+              "flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed px-4 py-6 text-center",
+              "cursor-pointer select-none transition-colors",
+              isDragActive ? "border-primary/60 bg-primary/5" : "border-border bg-input hover:border-border hover:bg-muted",
+              (disabled || uploading) && "cursor-not-allowed opacity-60"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("input", { ...getInputProps(), id, "aria-invalid": !!error }),
+              uploading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }),
+                /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground", children: s.uploading })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Upload, { className: "h-5 w-5 text-muted-foreground", strokeWidth: 1.75 }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[13px] text-foreground", children: isDragActive ? s.dropToUpload : s.dropOrBrowse }),
+                  field.accept && /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-muted-foreground", children: field.accept })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        !showUrl ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => setShowUrl(true),
+            className: "inline-flex items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
+              s.pasteUrlInstead
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            autoFocus: true,
+            value: value?.url ?? "",
+            disabled,
+            placeholder: s.urlPlaceholder,
+            onChange: (e) => {
+              setLocal(null);
+              onChange(e.target.value ? { url: e.target.value } : void 0);
+            },
+            className: cn(fieldControlClass, "h-9 px-3 font-mono text-[12px]")
+          }
+        )
+      ]
+    }
+  );
+}
+function ImagePreview({ src, filename }) {
+  const s = useFieldStrings();
+  const [broken, setBroken] = useState(false);
+  if (broken) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-28 items-center justify-center rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(ImageOff, { className: "h-5 w-5 text-muted-foreground" }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex max-h-[640px] justify-center overflow-auto rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: filename ?? s.preview,
+      className: "h-auto w-full max-w-full object-contain",
+      onError: () => setBroken(true)
+    }
+  ) });
+}
+function PdfPreview({ src }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsx(
+    "object",
+    {
+      data: `${src}#view=FitH`,
+      type: "application/pdf",
+      className: "h-[78vh] min-h-[520px] w-full rounded-md border border-border bg-muted",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-28 flex-col items-center justify-center gap-1.5 text-center", children: [
+        /* @__PURE__ */ jsx(FileText, { className: "h-5 w-5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground", children: s.previewUnavailablePdf })
+      ] })
+    }
+  );
+}
+function FileChip({
+  value,
+  disabled,
+  onClear,
+  canPreview,
+  previewOpen,
+  onTogglePreview
+}) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-md border border-border bg-input px-3 py-2.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted", children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-[13px] font-medium text-foreground", children: value?.filename ?? s.uploadedFile }),
+      /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[10.5px] text-muted-foreground", children: value?.url })
+    ] }),
+    canPreview && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onTogglePreview,
+        className: "inline-flex h-7 shrink-0 items-center gap-1 rounded-md border border-border px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        children: [
+          previewOpen ? /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
+          s.preview
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(ClearButton, { disabled, onClick: onClear })
+  ] });
+}
+function ClearButton({ disabled, onClick }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-label": s.removeFileAria,
+      className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50",
+      children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+    }
+  );
+}
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      // Adapted from the registry to DESIGN.md ("Inputs"): the `--input` surface,
+      // a hairline `--border`, and a border-color focus signal instead of the
+      // upstream 2px focus ring ("No focus glow by default").
+      "flex h-10 w-full items-center justify-between rounded-md border border-border bg-input px-3 py-2 text-sm transition-colors data-[placeholder]:text-muted-foreground focus:border-ring focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React2.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Toggle = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  TogglePrimitive.Root,
+  {
+    ref,
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+var ToggleGroupContext = React2.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = React2.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn("flex items-center justify-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+var ToggleGroupItem = React2.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React2.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+var CLEAR_VALUE = "__none__";
+function EnumField({ field, value, onChange, id, error, disabled }) {
+  const s = useFieldStrings();
+  const isSegmented = field.options.length <= 4 && field.options.every((o) => o.length <= 16);
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "choice",
+      description: field.description,
+      required: field.required,
+      error,
+      htmlFor: isSegmented ? void 0 : id,
+      children: isSegmented ? (
+        // `type="single"` gives the roving tabindex and arrow-key navigation a
+        // radiogroup owes its user, and emits `''` when the active item is
+        // pressed again - which is the field's "clear" path.
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            type: "single",
+            value: value ?? "",
+            onValueChange: (next) => onChange(next === "" ? void 0 : next),
+            disabled,
+            "aria-label": field.title ?? field.name,
+            className: "flex flex-wrap justify-start gap-1.5",
+            children: field.options.map((option) => /* @__PURE__ */ jsxs(
+              ToggleGroupItem,
+              {
+                value: option,
+                variant: "outline",
+                className: "h-9 min-w-0 gap-1.5 border-border bg-input px-3 text-[13px] text-muted-foreground hover:bg-muted hover:text-foreground data-[state=on]:border-primary/40 data-[state=on]:bg-primary/10 data-[state=on]:font-medium data-[state=on]:text-foreground",
+                children: [
+                  value === option && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary", strokeWidth: 2.5, "aria-hidden": "true" }),
+                  option
+                ]
+              },
+              option
+            ))
+          }
+        )
+      ) : /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: value ?? "",
+          disabled,
+          onValueChange: (next) => onChange(next === CLEAR_VALUE ? void 0 : next),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id, "aria-invalid": !!error, className: "h-11", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: s.selectPlaceholder }) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: CLEAR_VALUE, children: s.selectPlaceholder }),
+              field.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: option }, option))
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function NumberField({ field, value, onChange, id, error, disabled }) {
+  const s = useFieldStrings();
+  const step = field.integer ? 1 : 0.1;
+  const clamp = (n) => {
+    let next = n;
+    if (typeof field.min === "number") next = Math.max(field.min, next);
+    if (typeof field.max === "number") next = Math.min(field.max, next);
+    return field.integer ? Math.round(next) : next;
+  };
+  const nudge = (delta) => onChange(clamp((value ?? 0) + delta));
+  const rangeHint = field.min !== void 0 || field.max !== void 0 ? `${field.min ?? "\u2212\u221E"} \u2013 ${field.max ?? "\u221E"}` : void 0;
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "number",
+      description: field.description ?? rangeHint,
+      required: field.required,
+      error,
+      htmlFor: id,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            type: "number",
+            inputMode: field.integer ? "numeric" : "decimal",
+            value: value ?? "",
+            step,
+            min: field.min,
+            max: field.max,
+            disabled,
+            "aria-invalid": !!error,
+            placeholder: "0",
+            onChange: (e) => onChange(e.target.value === "" ? void 0 : Number(e.target.value)),
+            className: cn(
+              fieldControlClass,
+              "h-11 px-3 font-mono tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(StepButton, { onClick: () => nudge(-step), disabled, label: s.decrease, children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(StepButton, { onClick: () => nudge(step), disabled, label: s.increase, children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) })
+      ] })
+    }
+  );
+}
+function StepButton({
+  onClick,
+  disabled,
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-label": label,
+      className: cn(
+        "flex h-11 w-11 shrink-0 items-center justify-center rounded-md border border-border bg-input text-muted-foreground transition-colors",
+        "hover:border-border hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+      ),
+      children
+    }
+  );
+}
+function TextField({ field, value, onChange, id, error, disabled }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "text",
+      description: field.description,
+      required: field.required,
+      error,
+      htmlFor: id,
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "text",
+          value: value ?? "",
+          disabled,
+          "aria-invalid": !!error,
+          placeholder: field.placeholder ?? s.typeValuePlaceholder,
+          onChange: (e) => onChange(e.target.value === "" ? void 0 : e.target.value),
+          className: cn(fieldControlClass, "h-11 px-3")
+        }
+      )
+    }
+  );
+}
+function ProseField({ field, value, onChange, id, error, disabled }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "text",
+      description: field.description,
+      required: field.required,
+      error,
+      htmlFor: id,
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id,
+          value: value ?? "",
+          disabled,
+          "aria-invalid": !!error,
+          rows: 3,
+          placeholder: field.placeholder ?? s.writeHerePlaceholder,
+          onChange: (e) => onChange(e.target.value === "" ? void 0 : e.target.value),
+          className: cn(
+            fieldControlClass,
+            "min-h-[88px] resize-y px-3 py-2.5 leading-relaxed [field-sizing:content]"
+          )
+        }
+      )
+    }
+  );
+}
+function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      className: "inline-flex items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground",
+      children: [
+        expanded ? /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }),
+        expanded ? noun === "field" ? s.hideOptionalFields : s.hideOptionalInputs : noun === "field" ? s.optionalFieldsCount(count) : s.optionalInputsCount(count)
+      ]
+    }
+  );
+}
+function ObjectField({ field, value, onChange, id, error, env }) {
+  const s = useFieldStrings();
+  const [showOptional, setShowOptional] = useState(false);
+  const data = value ?? {};
+  const setChild = (name, childValue) => onChange({ ...data, [name]: childValue });
+  const optionalEmpty = field.fields.filter((f) => !f.required && !isFilled(data[f.name]));
+  const visible = showOptional ? field.fields : field.fields.filter((f) => f.required || isFilled(data[f.name]));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[13px] font-medium leading-none text-foreground", children: field.title ?? field.name }),
+      /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "structured" }),
+      !field.required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: s.optionalBadge })
+    ] }),
+    field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "space-y-4 rounded-lg border bg-card/40 p-4",
+          error ? "border-destructive/50" : "border-border"
+        ),
+        children: [
+          visible.map((child) => /* @__PURE__ */ jsx(
+            FieldRenderer,
+            {
+              field: child,
+              value: data[child.name],
+              onChange: (v) => setChild(child.name, v),
+              id: `${id}.${child.name}`,
+              env
+            },
+            child.name
+          )),
+          optionalEmpty.length > 0 && /* @__PURE__ */ jsx(
+            OptionalToggle,
+            {
+              count: optionalEmpty.length,
+              expanded: showOptional,
+              onToggle: () => setShowOptional((v) => !v),
+              noun: "field"
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", role: "alert", children: error })
+  ] });
+}
+function ListField({ field, value, onChange, id, error, env }) {
+  const s = useFieldStrings();
+  const items = value ?? [];
+  const setItem = (index, itemValue) => {
+    const next = items.slice();
+    next[index] = itemValue;
+    onChange(next);
+  };
+  const removeItem = (index) => onChange(items.filter((_, i) => i !== index));
+  const addItem = () => onChange([...items, emptyValue(field.item)]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[13px] font-medium leading-none text-foreground", children: field.title ?? field.name }),
+      /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "list" }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[10.5px] text-muted-foreground", children: s.itemsCount(items.length) }),
+      !field.required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: s.optionalBadge })
+    ] }),
+    field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      items.length === 0 && /* @__PURE__ */ jsx("p", { className: "rounded-md border border-dashed border-border bg-input/50 px-3 py-4 text-center text-[12px] text-muted-foreground", children: s.noItemsYet }),
+      items.map((item, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start gap-2 rounded-md border border-border bg-card/40 p-3",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-1 w-5 shrink-0 text-center font-mono text-[11px] text-muted-foreground", children: index + 1 }),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+              FieldRenderer,
+              {
+                field: { ...field.item, title: "", name: `${field.name}[${index}]` },
+                value: item,
+                onChange: (v) => setItem(index, v),
+                id: `${id}.${index}`,
+                env
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeItem(index),
+                disabled: env?.disabled,
+                "aria-label": s.removeItemAria(index + 1),
+                className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-destructive disabled:opacity-50",
+                children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ]
+        },
+        index
+      )),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: addItem,
+          disabled: env?.disabled,
+          className: cn(
+            "inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-border text-[13px] text-muted-foreground transition-colors",
+            "hover:border-primary/40 hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            s.addItem
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", role: "alert", children: error })
+  ] });
+}
+function emptyValue(field) {
+  switch (field.kind) {
+    case "boolean":
+      return false;
+    case "object":
+      return {};
+    case "list":
+      return [];
+    case "document":
+    case "image":
+      return void 0;
+    default:
+      return void 0;
+  }
+}
+function UnknownField({ field, value, onChange, id, error, disabled }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "structured",
+      description: field.description ?? s.jsonHint,
+      required: field.required,
+      error,
+      htmlFor: id,
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id,
+          value: value ?? "",
+          disabled,
+          "aria-invalid": !!error,
+          rows: 3,
+          spellCheck: false,
+          placeholder: '{\n  "key": "value"\n}',
+          onChange: (e) => onChange(e.target.value === "" ? void 0 : e.target.value),
+          className: cn(fieldControlClass, "min-h-[80px] resize-y px-3 py-2.5 font-mono text-[12px]")
+        }
+      )
+    }
+  );
+}
+function FieldRenderer({ field, value, onChange, id, error, env }) {
+  const disabled = env?.disabled;
+  switch (field.kind) {
+    case "text":
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "prose":
+      return /* @__PURE__ */ jsx(
+        ProseField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx(
+        DateField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        NumberField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ jsx(
+        BooleanField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          disabled
+        }
+      );
+    case "enum":
+      return /* @__PURE__ */ jsx(
+        EnumField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "document":
+      return /* @__PURE__ */ jsx(
+        DocumentField,
+        {
+          field,
+          value,
+          onChange,
+          onDropFile: (file) => env?.onDropFile?.(id, file),
+          uploading: env?.uploadingIds?.has(id),
+          resolveUrl: env?.resolveUrl,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "image":
+      return /* @__PURE__ */ jsx(
+        ImageField,
+        {
+          field,
+          value,
+          onChange,
+          onDropFile: (file) => env?.onDropFile?.(id, file),
+          uploading: env?.uploadingIds?.has(id),
+          resolveUrl: env?.resolveUrl,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "object":
+      return /* @__PURE__ */ jsx(
+        ObjectField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          env
+        }
+      );
+    case "list":
+      return /* @__PURE__ */ jsx(
+        ListField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          env
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx(
+        UnknownField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+  }
+}
+
+export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EnumField, FieldRenderer, FieldShell, FieldStringsProvider, ImageField, ListField, NumberField, ObjectField, OptionalToggle, ProseField, TextField, UnknownField, fieldControlClass, useFieldStrings };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map