@fayz-ai/plugin-menu 0.12.10 → 0.13.0

package/dist/{MenuPage-ITS2DGKM.js → MenuPage-7WXTOSQK.js}

@@ -5,7 +5,7 @@ import { Plus, Sparkles, Search, UtensilsCrossed, MoreVertical, Pencil, Copy, Po
 import { useSensors, useSensor, PointerSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { useTranslation } from '@fayz-ai/core';
-import { PageHeaderActions, PageTabs, Button, AiActionButton, toast, ConfirmDialog, Dropdown, DropdownTrigger, Hint, DropdownContent, DropdownItem, DropdownSeparator, Skeleton, DraftCommitBar, SheetBody, Input, Switch, SheetFooter, ImageDrop, CurrencyInput, SegmentedControl, Modal, ModalContent, ModalHeader, ModalTitle, ModalBody, TimePicker } from '@fayz-ai/ui';
+import { PageHeaderActions, PageTabs, Input, Button, AiActionButton, toast, ConfirmDialog, Dropdown, DropdownTrigger, Hint, DropdownContent, DropdownItem, DropdownSeparator, Skeleton, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DraftCommitBar, SheetBody, Switch, SheetFooter, ImageDrop, CurrencyInput, SegmentedControl, Modal, ModalContent, ModalHeader, ModalTitle, ModalBody, TimePicker } from '@fayz-ai/ui';
 import { CSS } from '@dnd-kit/utilities';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -462,15 +462,17 @@ function InlinePrice({ value, currency, muted, onSave }) {
   const [draft, setDraft] = useState("");
   if (!editing) {
     return /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        variant: "bare",
+        size: "bare",
         type: "button",
         onClick: (e) => {
           e.stopPropagation();
           setDraft(String(value ?? 0));
           setEditing(true);
         },
-        className: `rounded px-1.5 py-0.5 text-sm tabular-nums transition-colors hover:bg-muted ${muted ? "text-muted-foreground" : "font-medium"}`,
+        className: `font-normal rounded px-1.5 py-0.5 text-sm tabular-nums transition-colors hover:bg-muted ${muted ? "text-muted-foreground" : "font-medium"}`,
         children: formatCurrency(value ?? 0, currency)
       }
     );
@@ -480,8 +482,8 @@ function InlinePrice({ value, currency, muted, onSave }) {
     setEditing(false);
     if (Number.isFinite(parsed) && parsed !== value) onSave(Math.max(0, parsed));
   };
-  return /* @__PURE__ */ jsx(
-    "input",
+  return /* @__PURE__ */ jsx("div", { className: "w-20", children: /* @__PURE__ */ jsx(
+    Input,
     {
       autoFocus: true,
       value: draft,
@@ -492,9 +494,9 @@ function InlinePrice({ value, currency, muted, onSave }) {
         if (e.key === "Enter") commit();
         if (e.key === "Escape") setEditing(false);
       },
-      className: "w-20 rounded border bg-card px-1.5 py-0.5 text-right text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-ring"
+      className: "h-auto rounded border-border px-1.5 py-0.5 text-right tabular-nums shadow-none focus-visible:ring-offset-0"
     }
-  );
+  ) });
 }
 function ItemRow({ placement, item, currency, deliveryPricing, multiMenu, pending, handlers }) {
   const t = useTranslation();
@@ -513,8 +515,10 @@ function ItemRow({ placement, item, currency, deliveryPricing, multiMenu, pendin
       className: `group flex items-center gap-3 border-b px-3 py-2 last:border-0 ${isDragging ? "opacity-40" : "hover:bg-muted/20"} ${pending ? "pointer-events-none opacity-60" : ""}`,
       children: [
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "bare",
+            size: "bare",
             ...attributes,
             ...listeners,
             "aria-label": t("menu.manager.dragItem"),
@@ -524,11 +528,13 @@ function ItemRow({ placement, item, currency, deliveryPricing, multiMenu, pendin
         ),
         /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted/40", children: item.imageUrl ? /* @__PURE__ */ jsx("img", { src: item.imageUrl, alt: "", className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx(ImageOff, { className: "h-3.5 w-3.5 text-muted-foreground/40" }) }),
         /* @__PURE__ */ jsxs(
-          "button",
+          Button,
           {
+            variant: "bare",
+            size: "bare",
             type: "button",
             onClick: () => handlers.onEditItem(item, placement),
-            className: "min-w-0 flex-1 text-left",
+            className: "block min-w-0 flex-1 text-left font-normal",
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
                 /* @__PURE__ */ jsx("span", { className: `truncate text-sm font-medium ${item.status === "hidden" ? "text-muted-foreground" : ""}`, children: item.name }),
@@ -559,7 +565,7 @@ function ItemRow({ placement, item, currency, deliveryPricing, multiMenu, pendin
           /* @__PURE__ */ jsx(Switch, { size: "sm", checked: item.availableForDelivery, onCheckedChange: (v) => handlers.onToggleItem(item.id, "availableForDelivery", v), label: t("menu.manager.delivery") })
         ] }),
         /* @__PURE__ */ jsxs(Dropdown, { children: [
-          /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": t("menu.manager.itemActions"), children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }),
+          /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "bare", size: "bare", className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": t("menu.manager.itemActions"), children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }),
           /* @__PURE__ */ jsxs(DropdownContent, { align: "end", children: [
             /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => handlers.onEditItem(item, placement), children: [
               /* @__PURE__ */ jsx(Pencil, { className: "mr-2 h-3.5 w-3.5" }),
@@ -628,8 +634,10 @@ function SectionCard({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b bg-muted/20 px-3 py-2", children: [
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              variant: "bare",
+              size: "bare",
               ...attributes,
               ...listeners,
               "aria-label": t("menu.manager.dragSection"),
@@ -638,8 +646,10 @@ function SectionCard({
             }
           ),
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              variant: "bare",
+              size: "bare",
               type: "button",
               onClick: () => setCollapsed((c) => !c),
               className: "text-muted-foreground hover:text-foreground",
@@ -647,8 +657,8 @@ function SectionCard({
               children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
             }
           ),
-          renaming ? /* @__PURE__ */ jsx(
-            "input",
+          renaming ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Input,
             {
               autoFocus: true,
               value: draft,
@@ -664,11 +674,13 @@ function SectionCard({
                   setRenaming(false);
                 }
               },
-              className: "rounded border bg-card px-2 py-0.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-ring"
+              className: "h-auto rounded border-border px-2 py-0.5 font-semibold shadow-none focus-visible:ring-offset-0"
             }
-          ) : /* @__PURE__ */ jsx(
-            "button",
+          ) }) : /* @__PURE__ */ jsx(
+            Button,
             {
+              variant: "bare",
+              size: "bare",
               type: "button",
               onClick: () => {
                 setDraft(section.name);
@@ -696,7 +708,7 @@ function SectionCard({
               t("menu.manager.addItem")
             ] }),
             /* @__PURE__ */ jsxs(Dropdown, { children: [
-              /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": t("menu.manager.sectionActions"), children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }),
+              /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "bare", size: "bare", className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": t("menu.manager.sectionActions"), children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }),
               /* @__PURE__ */ jsxs(DropdownContent, { align: "end", children: [
                 /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => handlers.onEditSection(section), children: [
                   /* @__PURE__ */ jsx(Pencil, { className: "mr-2 h-3.5 w-3.5" }),
@@ -714,11 +726,13 @@ function SectionCard({
           ] })
         ] }),
         !collapsed && (placements.length === 0 ? /* @__PURE__ */ jsxs(
-          "button",
+          Button,
           {
+            variant: "bare",
+            size: "bare",
             type: "button",
             onClick: () => handlers.onAddItem(section.id),
-            className: "flex w-full flex-col items-center gap-1 border-2 border-dashed border-transparent py-6 text-center transition-colors hover:bg-muted/20",
+            className: "flex w-full flex-col items-center justify-start gap-1 rounded-none border-2 border-dashed border-transparent py-6 text-center font-normal transition-colors hover:bg-muted/20",
             children: [
               /* @__PURE__ */ jsx(UtensilsCrossed, { className: "h-5 w-5 text-muted-foreground/40" }),
               /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("menu.manager.emptySection") })
@@ -775,8 +789,10 @@ function ScheduleEditor({ value, onChange, locale }) {
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("label", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: t("menu.schedule.days") }),
         /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: labels.map((label, day) => /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "bare",
+            size: "bare",
             type: "button",
             onClick: () => toggleDay(day),
             className: `rounded-full px-2.5 py-1 text-xs font-medium capitalize transition-colors ${days.includes(day) ? "bg-primary text-primary-foreground" : "bg-muted/50 text-muted-foreground hover:bg-muted"}`,
@@ -785,8 +801,10 @@ function ScheduleEditor({ value, onChange, locale }) {
           day
         )) }),
         /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: WEEKDAY_PRESETS.map((preset) => /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "bare",
+            size: "bare",
             type: "button",
             onClick: () => onChange({ ...value, days: preset.days }),
             className: "text-[11px] text-muted-foreground underline-offset-2 hover:text-foreground hover:underline",
@@ -882,8 +900,10 @@ function MenuRailPage({ open, menu, locale, onClose, onSubmit }) {
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("label", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: t("menu.menuDialog.channels") }),
             /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: MENU_CHANNELS.map((channel) => /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                variant: "bare",
+                size: "bare",
                 type: "button",
                 onClick: () => toggleChannel(channel),
                 className: `rounded-full px-3 py-1 text-xs font-medium transition-colors ${channels.includes(channel) ? "bg-primary text-primary-foreground" : "bg-muted/50 text-muted-foreground hover:bg-muted"}`,
@@ -1062,11 +1082,13 @@ function ItemRailPage({
                   }
                 ),
                 values.priceOverride !== void 0 && /* @__PURE__ */ jsx(
-                  "button",
+                  Button,
                   {
+                    variant: "bare",
+                    size: "bare",
                     type: "button",
                     onClick: () => patch({ priceOverride: void 0 }),
-                    className: "text-[11px] text-muted-foreground underline-offset-2 transition-colors hover:text-foreground hover:underline",
+                    className: "text-[11px] text-muted-foreground underline-offset-2 transition-colors hover:text-foreground hover:underline font-normal",
                     children: t("menu.itemForm.clearOverride")
                   }
                 )
@@ -1074,15 +1096,10 @@ function ItemRailPage({
             ] })
           ] }),
           /* @__PURE__ */ jsxs(Group, { title: t("menu.itemForm.menuGroup"), children: [
-            /* @__PURE__ */ jsx(Field, { label: t("menu.itemForm.section"), children: /* @__PURE__ */ jsx(
-              "select",
-              {
-                value: values.sectionId,
-                onChange: (e) => patch({ sectionId: e.target.value }),
-                className: "h-9 w-full rounded-input border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring",
-                children: sections.map((section) => /* @__PURE__ */ jsx("option", { value: section.id, children: section.name }, section.id))
-              }
-            ) }),
+            /* @__PURE__ */ jsx(Field, { label: t("menu.itemForm.section"), children: /* @__PURE__ */ jsxs(Select, { value: values.sectionId, onValueChange: (sectionId2) => patch({ sectionId: sectionId2 }), children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "px-2", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: sections.map((section) => /* @__PURE__ */ jsx(SelectItem, { value: section.id, children: section.name }, section.id)) })
+            ] }) }),
             /* @__PURE__ */ jsx(Field, { label: t("menu.itemForm.status"), children: /* @__PURE__ */ jsx(
               SegmentedControl,
               {
@@ -1182,38 +1199,43 @@ function ToggleRow({ label, hint, checked, onChange }) {
     }
   );
 }
+var INLINE_FIELD = "h-auto rounded border-border bg-card px-1.5 py-0.5 text-right tabular-nums shadow-none focus-visible:ring-offset-0";
+var GHOST_FIELD = "h-auto rounded border-transparent bg-transparent px-1 py-0.5 shadow-none hover:border-border focus:border-border focus-visible:ring-offset-0";
+var NEW_SECTION = "__new__";
 function DraftRow({ item, onChange, onRemove }) {
   const t = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-dashed px-3 py-1.5 last:border-0", children: [
-    /* @__PURE__ */ jsx(
-      "input",
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+      Input,
       {
         value: item.name,
         onChange: (e) => onChange({ name: e.target.value }),
-        className: "min-w-0 flex-1 rounded border border-transparent bg-transparent px-1 py-0.5 text-sm hover:border-border focus:border-border focus:outline-none focus:ring-2 focus:ring-ring"
+        className: GHOST_FIELD
       }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 flex-1 sm:block", children: /* @__PURE__ */ jsx(
+      Input,
       {
         value: item.description ?? "",
         onChange: (e) => onChange({ description: e.target.value }),
         placeholder: t("menu.itemForm.description"),
-        className: "hidden min-w-0 flex-1 rounded border border-transparent bg-transparent px-1 py-0.5 text-[11px] text-muted-foreground hover:border-border focus:border-border focus:outline-none focus:ring-2 focus:ring-ring sm:block"
+        className: `${GHOST_FIELD} text-[11px] text-muted-foreground`
       }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "w-20", children: /* @__PURE__ */ jsx(
+      Input,
       {
         value: item.price,
         inputMode: "decimal",
         onChange: (e) => onChange({ price: Number(e.target.value.replace(",", ".")) || 0 }),
-        className: `w-20 rounded border bg-card px-1.5 py-0.5 text-right text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-ring ${item.price === 0 ? "border-warning text-warning" : ""}`
+        className: `${INLINE_FIELD} ${item.price === 0 ? "border-warning text-warning" : ""}`
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        variant: "bare",
+        size: "bare",
         onClick: onRemove,
         className: "rounded p-1 text-muted-foreground hover:text-destructive",
         "aria-label": t("menu.import.dropItem"),
@@ -1227,33 +1249,37 @@ function DraftSectionCard({ section, sections, onPatchSection, onRemoveSection,
   return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-card border-2 border-dashed border-primary/40 bg-primary/[0.03]", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-dashed border-primary/30 px-3 py-2", children: [
       /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 text-primary" }),
-      /* @__PURE__ */ jsx(
-        "input",
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Input,
         {
           value: section.name,
           onChange: (e) => onPatchSection({ name: e.target.value }),
-          className: "rounded border border-transparent bg-transparent px-1 py-0.5 text-sm font-semibold hover:border-border focus:border-border focus:outline-none focus:ring-2 focus:ring-ring"
+          className: `${GHOST_FIELD} font-semibold`
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: t("menu.manager.itemsCount", { count: String(section.items.length) }) }),
       /* @__PURE__ */ jsxs("label", { className: "ml-auto flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
         t("menu.import.destination"),
         /* @__PURE__ */ jsxs(
-          "select",
+          Select,
           {
-            value: section.targetSectionId ?? "",
-            onChange: (e) => onPatchSection({ targetSectionId: e.target.value || void 0 }),
-            className: "h-7 rounded-md border bg-card px-2 text-xs text-foreground",
+            value: section.targetSectionId ?? NEW_SECTION,
+            onValueChange: (v) => onPatchSection({ targetSectionId: v === NEW_SECTION ? void 0 : v }),
             children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: t("menu.import.createSection") }),
-              sections.map((s) => /* @__PURE__ */ jsx("option", { value: s.id, children: s.name }, s.id))
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 w-auto gap-2 rounded-md border-border bg-card px-2 py-0 text-xs text-foreground shadow-none", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: NEW_SECTION, children: t("menu.import.createSection") }),
+                sections.map((s) => /* @__PURE__ */ jsx(SelectItem, { value: s.id, children: s.name }, s.id))
+              ] })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "bare",
+          size: "bare",
           onClick: onRemoveSection,
           className: "rounded p-1 text-muted-foreground hover:text-destructive",
           "aria-label": t("menu.import.dropSection"),
@@ -1681,12 +1707,12 @@ function MenuManagerView() {
       /* @__PURE__ */ jsxs("div", { className: "relative min-w-[12rem] flex-1", children: [
         /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
         /* @__PURE__ */ jsx(
-          "input",
+          Input,
           {
             value: search,
             onChange: (e) => setSearch(e.target.value),
             placeholder: t("menu.manager.search"),
-            className: "w-full rounded-input border bg-card py-1.5 pl-8 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            className: "h-auto border-border py-1.5 pl-8 pr-3 shadow-none focus-visible:ring-offset-0"
           }
         )
       ] }),
@@ -1834,5 +1860,5 @@ function MenuPage({ config, provider, store, registries }) {
 }
 
 export { MenuPage };
-//# sourceMappingURL=MenuPage-ITS2DGKM.js.map
-//# sourceMappingURL=MenuPage-ITS2DGKM.js.map
+//# sourceMappingURL=MenuPage-7WXTOSQK.js.map
+//# sourceMappingURL=MenuPage-7WXTOSQK.js.map