@open-mercato/ui 0.5.1-develop.2856.35de414092 → 0.5.1-develop.2874.77704bccbd

package/dist/backend/ContextHelp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/backend/ContextHelp.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { Lightbulb, Info } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../primitives/button'\n\nexport type ContextHelpProps = {\n  title: React.ReactNode\n  children: React.ReactNode\n  defaultOpen?: boolean\n  bulb?: boolean\n  className?: string\n}\n\nexport function ContextHelp({ title, children, defaultOpen = false, bulb = true, className = '' }: ContextHelpProps) {\n  const t = useT()\n  const [open, setOpen] = React.useState<boolean>(defaultOpen)\n  const Icon = bulb ? Lightbulb : Info\n  return (\n    <div className={`rounded-md border bg-card ${className}`}>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        className=\"w-full justify-start gap-2 px-4 py-3 text-left hover:bg-accent/40\"\n        aria-expanded={open}\n        onClick={() => setOpen(v => !v)}\n      >\n        <Icon size={16} className={`shrink-0 ${open ? 'text-amber-500' : 'text-muted-foreground'}`} />\n        <span className=\"font-medium\">{title}</span>\n        <span className=\"ml-auto text-xs text-muted-foreground\">{open ? t('ui.contextHelp.hide', 'Hide') : t('ui.contextHelp.show', 'Show')}</span>\n      </Button>\n      {open ? (\n        <div className=\"px-4 pb-4 pt-1 border-t text-sm leading-relaxed\">\n          {children}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\n"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { Lightbulb, Info } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../primitives/button'\n\nexport type ContextHelpProps = {\n  title: React.ReactNode\n  children: React.ReactNode\n  defaultOpen?: boolean\n  bulb?: boolean\n  className?: string\n}\n\nexport function ContextHelp({ title, children, defaultOpen = false, bulb = true, className = '' }: ContextHelpProps) {\n  const t = useT()\n  const [open, setOpen] = React.useState<boolean>(defaultOpen)\n  const Icon = bulb ? Lightbulb : Info\n  return (\n    <div className={`rounded-md border bg-card ${className}`}>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        className=\"w-full justify-start gap-2 px-4 py-3 text-left hover:bg-accent/50\"\n        aria-expanded={open}\n        onClick={() => setOpen(v => !v)}\n      >\n        <Icon size={16} className={`shrink-0 ${open ? 'text-amber-500' : 'text-muted-foreground'}`} />\n        <span className=\"font-medium\">{title}</span>\n        <span className=\"ml-auto text-xs text-muted-foreground\">{open ? t('ui.contextHelp.hide', 'Hide') : t('ui.contextHelp.show', 'Show')}</span>\n      </Button>\n      {open ? (\n        <div className=\"px-4 pb-4 pt-1 border-t text-sm leading-relaxed\">\n          {children}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\n"],
   "mappings": ";AAoBM,SAOE,KAPF;AAnBN,YAAY,WAAW;AACvB,SAAS,WAAW,YAAY;AAChC,SAAS,YAAY;AACrB,SAAS,cAAc;AAUhB,SAAS,YAAY,EAAE,OAAO,UAAU,cAAc,OAAO,OAAO,MAAM,YAAY,GAAG,GAAqB;AACnH,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAkB,WAAW;AAC3D,QAAM,OAAO,OAAO,YAAY;AAChC,SACE,qBAAC,SAAI,WAAW,6BAA6B,SAAS,IACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,iBAAe;AAAA,QACf,SAAS,MAAM,QAAQ,OAAK,CAAC,CAAC;AAAA,QAE9B;AAAA,8BAAC,QAAK,MAAM,IAAI,WAAW,YAAY,OAAO,mBAAmB,uBAAuB,IAAI;AAAA,UAC5F,oBAAC,UAAK,WAAU,eAAe,iBAAM;AAAA,UACrC,oBAAC,UAAK,WAAU,yCAAyC,iBAAO,EAAE,uBAAuB,MAAM,IAAI,EAAE,uBAAuB,MAAM,GAAE;AAAA;AAAA;AAAA,IACtI;AAAA,IACC,OACC,oBAAC,SAAI,WAAU,mDACZ,UACH,IACE;AAAA,KACN;AAEJ;",
   "names": []
 }

package/dist/backend/CrudForm.js

@@ -7,6 +7,7 @@ import { DndContext, closestCenter, PointerSensor, KeyboardSensor, useSensor, us
 import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { DataLoader } from "../primitives/DataLoader.js";
+import { Checkbox } from "../primitives/checkbox.js";
 import { flash } from "./FlashMessages.js";
 import dynamic from "next/dynamic";
 import { FormHeader } from "./forms/FormHeader.js";
@@ -1331,7 +1332,7 @@ function CrudForm({
   const customFieldsEmptyState = React.useMemo(() => {
     const text = t("entities.customFields.empty");
     const action = t("entities.customFields.addFirst");
-    return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-dashed border-muted-foreground/50 bg-muted/10 px-3 py-4 text-sm text-muted-foreground", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-dashed border-muted-foreground/50 bg-muted/30 px-3 py-4 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsxs("span", { children: [
         text,
         " "
@@ -2198,7 +2199,7 @@ function CrudForm({
         onKeyDownCapture: handleReadOnlyKeyDownCapture,
         children: [
           /* @__PURE__ */ jsx("div", { className: "pointer-events-none select-none opacity-70", children }),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-start justify-center rounded-lg bg-background/60 p-4 backdrop-blur-[1px] sm:p-6", children: readOnlyOverlay ?? /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border/70 bg-background/95 px-4 py-3 shadow-sm" }) })
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-start justify-center rounded-lg bg-background/80 p-4 backdrop-blur-[1px] sm:p-6", children: readOnlyOverlay ?? /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border/70 bg-background/95 px-4 py-3 shadow-sm" }) })
         ]
       }
     );
@@ -2898,7 +2899,7 @@ const HtmlRichTextEditor = React.memo(function HtmlRichTextEditor2({ value = "",
       "div",
       {
         ref,
-        className: "w-full px-2 py-2 min-h-[100px] sm:min-h-[160px] focus:outline-none prose prose-sm max-w-none",
+        className: "w-full px-2 py-2 min-h-[100px] sm:min-h-[160px] focus-visible:outline-none prose prose-sm max-w-none",
         contentEditable: true,
         suppressContentEditableWarning: true,
         onKeyDown,
@@ -3048,7 +3049,7 @@ const ListboxMultiSelect = React.memo(function ListboxMultiSelect2({
             onClick: () => toggle(opt.value),
             className: `w-full justify-start rounded-none font-normal px-3 py-2 ${isSel ? "bg-muted" : ""}`,
             children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("input", { type: "checkbox", className: "size-4", readOnly: true, checked: isSel }),
+              /* @__PURE__ */ jsx(Checkbox, { checked: isSel, disabled: true, tabIndex: -1, className: "pointer-events-none" }),
               /* @__PURE__ */ jsx("span", { children: opt.label })
             ] })
           },
@@ -3253,14 +3254,12 @@ const FieldControl = React.memo(
               disabled
             }
           ),
-          field.type === "checkbox" && /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2", children: [
+          field.type === "checkbox" && /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2 cursor-pointer", children: [
             /* @__PURE__ */ jsx(
-              "input",
+              Checkbox,
               {
-                type: "checkbox",
-                className: "size-4",
                 checked: value === true,
-                onChange: (e) => setValue(field.id, e.target.checked),
+                onCheckedChange: (next) => setValue(field.id, next === true),
                 "data-crud-focus-target": "",
                 disabled
               }
@@ -3294,16 +3293,14 @@ const FieldControl = React.memo(
           field.type === "select" && builtin?.multiple && builtin.listbox !== true && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: options.map((opt) => {
             const arr = Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
             const checked = arr.includes(opt.value);
-            return /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2", children: [
+            return /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2 cursor-pointer", children: [
               /* @__PURE__ */ jsx(
-                "input",
+                Checkbox,
                 {
-                  type: "checkbox",
-                  className: "size-4",
                   checked,
-                  onChange: (e) => {
+                  onCheckedChange: (state) => {
                     const next = new Set(arr);
-                    if (e.target.checked) {
+                    if (state === true) {
                       next.add(opt.value);
                     } else {
                       next.delete(opt.value);