@open-mercato/ui 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2964.d5ac4a6ebb

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
 Generated lucide registry with 134 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
-[build:ui] found 271 entry points
+[build:ui] found 275 entry points
 [build:ui] built successfully

package/AGENTS.md

@@ -23,6 +23,14 @@ When you need… use this. Details (variants, sizes, props, MUST rules) live in
 | Marketing CTA with brand gradient | `FancyButton` | `@open-mercato/ui/primitives/fancy-button` |
 | Checkbox primitive (with indeterminate) | `Checkbox` | `@open-mercato/ui/primitives/checkbox` |
 | Checkbox with label + description | `CheckboxField` | `@open-mercato/ui/primitives/checkbox-field` |
+| Text input (text/email/password/number/etc.) | `Input` | `@open-mercato/ui/primitives/input` |
+| Multi-line text input (with optional char counter) | `Textarea` | `@open-mercato/ui/primitives/textarea` |
+| Dropdown / select | `Select` (with `SelectTrigger` / `SelectContent` / `SelectItem`) | `@open-mercato/ui/primitives/select` |
+| Tooltip on hover (with arrow, dark/light) | `SimpleTooltip` (or `Tooltip`+`TooltipTrigger`+`TooltipContent`) | `@open-mercato/ui/primitives/tooltip` |
+| Toggle switch (binary on/off preference) | `Switch` | `@open-mercato/ui/primitives/switch` |
+| Switch with label + description (preference row) | `SwitchField` | `@open-mercato/ui/primitives/switch-field` |
+| Radio button (single primitive) | `Radio` (inside `RadioGroup`) | `@open-mercato/ui/primitives/radio` |
+| Radio with label + description (form row) | `RadioField` | `@open-mercato/ui/primitives/radio-field` |
 | User / entity avatar | `Avatar`, `AvatarStack` | `@open-mercato/ui/primitives/avatar` |
 | Keyboard shortcut keys | `Kbd`, `KbdShortcut` | `@open-mercato/ui/primitives/kbd` |
 | Entity tag pill | `Tag` (with `TagMap`) | `@open-mercato/ui/primitives/tag` |

package/dist/backend/CrudForm.js

@@ -15,6 +15,15 @@ import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-
 import { CSS } from "@dnd-kit/utilities";
 import { DataLoader } from "../primitives/DataLoader.js";
 import { Checkbox } from "../primitives/checkbox.js";
+import { Input } from "../primitives/input.js";
+import { Textarea } from "../primitives/textarea.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../primitives/select.js";
 import { flash } from "./FlashMessages.js";
 import dynamic from "next/dynamic";
 import { FormHeader } from "./forms/FormHeader.js";
@@ -86,6 +95,7 @@ import { evaluateInjectedVisibility } from "./injection/visibility-utils.js";
 import { ComponentReplacementHandles } from "@open-mercato/shared/modules/widgets/component-registry";
 import { sanitizeHtmlRichText, sanitizeRichTextHref, sanitizeRichTextPasteContent } from "./utils/richTextSanitizer.js";
 const EMPTY_OPTIONS = [];
+const SELECT_CLEAR_SENTINEL = "__crudform_select_clear__";
 const FOCUSABLE_SELECTOR = '[data-crud-focus-target], input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const CRUDFORM_EXTENDED_EVENTS_ENABLED = parseBooleanWithDefault(
   process.env.NEXT_PUBLIC_OM_CRUDFORM_EXTENDED_EVENTS_ENABLED,
@@ -1481,6 +1491,11 @@ function CrudForm({
     if (!fieldId || lastErrorFieldRef.current === fieldId) return;
     const form = document.getElementById(formId);
     if (!form) return;
+    const active = document.activeElement;
+    if (active instanceof HTMLElement && form.contains(active)) {
+      lastErrorFieldRef.current = fieldId;
+      return;
+    }
     const container = form.querySelector(`[data-crud-field-id="${fieldId}"]`);
     const target = container?.querySelector(FOCUSABLE_SELECTOR) ?? form.querySelector(`[name="${fieldId}"]`) ?? container ?? null;
     if (target && typeof target.focus === "function") {
@@ -2127,17 +2142,16 @@ function CrudForm({
           /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
             /* @__PURE__ */ jsx("label", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: fieldsetSelectorLabel }),
             /* @__PURE__ */ jsxs(
-              "select",
+              Select,
               {
-                className: "h-9 rounded border pl-3 pr-8 text-sm",
-                value: entityLayout.activeFieldset ?? "",
-                onChange: (event) => handleFieldsetSelectionChange(
+                value: entityLayout.activeFieldset || void 0,
+                onValueChange: (value) => handleFieldsetSelectionChange(
                   entityLayout.entityId,
-                  event.target.value || null
+                  value || null
                 ),
                 children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: defaultFieldsetLabel }),
-                  entityLayout.availableFieldsets.map((fs) => /* @__PURE__ */ jsx("option", { value: fs.code, children: fs.label }, fs.code))
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-auto min-w-[10rem]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: defaultFieldsetLabel }) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: entityLayout.availableFieldsets.map((fs) => /* @__PURE__ */ jsx(SelectItem, { value: fs.code, children: fs.label }, fs.code)) })
                 ]
               }
             ),
@@ -2634,10 +2648,9 @@ function RelationSelect({
   }, [query, options]);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
     /* @__PURE__ */ jsx(
-      "input",
+      Input,
       {
         ref: inputRef,
-        className: "w-full h-9 rounded border px-2 text-sm",
         placeholder: placeholder || t("ui.forms.listbox.searchPlaceholder", "Search..."),
         value: query,
         onChange: (e) => setQuery(e.target.value),
@@ -2718,10 +2731,9 @@ function TextInput({
   }, [commitIfChanged]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      "input",
+      Input,
       {
         type: inputType,
-        className: "w-full h-9 rounded border px-2 text-sm",
         placeholder,
         value: local,
         onChange: handleChange,
@@ -2779,10 +2791,9 @@ function NumberInput({
     commitIfChanged();
   }, [commitIfChanged]);
   return /* @__PURE__ */ jsx(
-    "input",
+    Input,
     {
       type: "number",
-      className: "w-full h-9 rounded border px-2 text-sm",
       placeholder,
       value: local,
       onChange: handleChange,
@@ -2798,7 +2809,11 @@ function TextAreaInput({
   value,
   onChange,
   placeholder,
-  autoFocus
+  autoFocus,
+  maxLength,
+  showCount,
+  rows,
+  disabled
 }) {
   const [local, setLocal] = React.useState(value);
   const isFocusedRef = React.useRef(false);
@@ -2822,15 +2837,18 @@ function TextAreaInput({
     commitIfChanged();
   }, [commitIfChanged]);
   return /* @__PURE__ */ jsx(
-    "textarea",
+    Textarea,
     {
-      className: "w-full rounded border px-2 py-2 min-h-[80px] sm:min-h-[120px] text-sm",
       placeholder,
       value: local,
       onChange: handleChange,
       onFocus: handleFocus,
       onBlur: handleBlur,
       autoFocus,
+      maxLength,
+      showCount,
+      rows,
+      disabled,
       "data-crud-focus-target": ""
     }
   );
@@ -3106,9 +3124,10 @@ const ListboxMultiSelect = React.memo(function ListboxMultiSelect2({
   );
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsx(
-      "input",
+      Input,
       {
-        className: "mb-2 w-full h-8 rounded border px-2 text-sm",
+        className: "mb-2",
+        size: "sm",
         placeholder: searchPlaceholder,
         value: query,
         onChange: (e) => setQuery(e.target.value),
@@ -3226,10 +3245,9 @@ const FieldControl = React.memo(
             }
           ),
           field.type === "date" && /* @__PURE__ */ jsx(
-            "input",
+            Input,
             {
               type: "date",
-              className: "w-full h-9 rounded border px-2 text-sm",
               value: typeof value === "string" ? value : "",
               onChange: (e) => setValue(field.id, e.target.value || void 0),
               autoFocus: autoFocusField,
@@ -3238,10 +3256,9 @@ const FieldControl = React.memo(
             }
           ),
           field.type === "datetime-local" && /* @__PURE__ */ jsx(
-            "input",
+            Input,
             {
               type: "datetime-local",
-              className: "w-full h-9 rounded border px-2 text-sm",
               value: typeof value === "string" ? value : "",
               onChange: (e) => setValue(field.id, e.target.value || void 0),
               autoFocus: autoFocusField,
@@ -3296,7 +3313,11 @@ const FieldControl = React.memo(
               value: value == null ? "" : String(value),
               placeholder,
               onChange: (next) => fieldSetValue(next),
-              autoFocus: autoFocusField
+              autoFocus: autoFocusField,
+              maxLength: builtin?.maxLength,
+              showCount: builtin?.showCount,
+              rows: builtin?.rows,
+              disabled
             }
           ),
           field.type === "richtext" && builtin?.editor === "simple" && /* @__PURE__ */ jsx(SimpleMarkdownEditor, { value: String(value ?? ""), onChange: fieldSetValue }),
@@ -3345,16 +3366,23 @@ const FieldControl = React.memo(
             /* @__PURE__ */ jsx("span", { className: "text-sm", children: field.label })
           ] }),
           field.type === "select" && !builtin?.multiple && /* @__PURE__ */ jsxs(
-            "select",
+            Select,
             {
-              className: "w-full h-9 rounded border pl-3 pr-8 text-sm",
               value: Array.isArray(value) ? String(value[0] ?? "") : value == null ? "" : String(value),
-              onChange: (e) => setValue(field.id, e.target.value || void 0),
-              "data-crud-focus-target": "",
+              onValueChange: (next) => {
+                if (!next || next === SELECT_CLEAR_SENTINEL) {
+                  setValue(field.id, void 0);
+                  return;
+                }
+                setValue(field.id, next);
+              },
               disabled,
               children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: t("ui.forms.select.emptyOption", "\u2014") }),
-                options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                /* @__PURE__ */ jsx(SelectTrigger, { "data-crud-focus-target": "", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("ui.forms.select.emptyOption", "\u2014") }) }),
+                /* @__PURE__ */ jsxs(SelectContent, { children: [
+                  !field.required && value != null && value !== "" && /* @__PURE__ */ jsx(SelectItem, { value: SELECT_CLEAR_SENTINEL, children: t("ui.forms.select.clearOption", "\u2014 Clear \u2014") }),
+                  options.filter((opt) => opt.value !== "").map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))
+                ] })
               ]
             }
           ),