@open-mercato/ui 0.4.2-canary-c02407ff85

package/dist/backend/UserMenu.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { User, LogOut } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function UserMenu({ email }) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const logoutButtonRef = React.useRef(null);
+  const toggle = () => setOpen((v) => !v);
+  const onMouseEnter = () => setOpen(true);
+  const onMouseLeave = () => setOpen(false);
+  React.useEffect(() => {
+    if (!open) return;
+    function handleClick(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        setOpen(false);
+        buttonRef.current?.focus();
+      } else if (event.key === "ArrowDown" || event.key === "Tab") {
+        event.preventDefault();
+        logoutButtonRef.current?.focus();
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        logoutButtonRef.current?.focus();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+  React.useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        logoutButtonRef.current?.focus();
+      }, 0);
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", onMouseEnter, onMouseLeave, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: buttonRef,
+        className: "text-sm px-2 py-1 rounded hover:bg-accent inline-flex items-center gap-2",
+        onClick: () => setOpen(true),
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        "aria-controls": "user-menu-dropdown",
+        id: "user-menu-button",
+        type: "button",
+        title: email || t("ui.userMenu.userFallback", "User"),
+        children: /* @__PURE__ */ jsx(User, { className: "size-4" })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: menuRef,
+        id: "user-menu-dropdown",
+        className: "absolute right-0 top-full mt-0 w-56 rounded-md border bg-background p-1 shadow z-50",
+        role: "menu",
+        "aria-labelledby": "user-menu-button",
+        tabIndex: -1,
+        children: [
+          email && /* @__PURE__ */ jsxs("div", { className: "px-2 py-2 text-xs text-muted-foreground border-b mb-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium", children: t("ui.userMenu.loggedInAs", "Logged in as:") }),
+            /* @__PURE__ */ jsx("div", { className: "truncate", children: email })
+          ] }),
+          /* @__PURE__ */ jsx("form", { action: "/api/auth/logout", method: "POST", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: logoutButtonRef,
+              className: "w-full text-left text-sm px-2 py-1 rounded hover:bg-accent inline-flex items-center gap-2 outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0",
+              type: "submit",
+              role: "menuitem",
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                if (e.key === "Escape") {
+                  setOpen(false);
+                  buttonRef.current?.focus();
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(LogOut, { className: "size-4" }),
+                /* @__PURE__ */ jsx("span", { children: t("ui.userMenu.logout", "Logout") })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  UserMenu
+};
+//# sourceMappingURL=UserMenu.js.map

package/dist/backend/UserMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/UserMenu.tsx"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { User, LogOut } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport function UserMenu({ email }: { email?: string }) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const buttonRef = React.useRef<HTMLButtonElement>(null)\n  const menuRef = React.useRef<HTMLDivElement>(null)\n  const logoutButtonRef = React.useRef<HTMLButtonElement>(null)\n\n  // Toggle menu open/close\n  const toggle = () => setOpen((v) => !v)\n\n  // Open on hover, close when mouse leaves the menu area\n  const onMouseEnter = () => setOpen(true)\n  const onMouseLeave = () => setOpen(false)\n\n  // Close menu when clicking outside\n  React.useEffect(() => {\n    if (!open) return\n    function handleClick(event: MouseEvent) {\n      if (\n        menuRef.current &&\n        !menuRef.current.contains(event.target as Node) &&\n        buttonRef.current &&\n        !buttonRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [open])\n\n  // Keyboard navigation\n  React.useEffect(() => {\n    if (!open) return\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.key === 'Escape') {\n        setOpen(false)\n        buttonRef.current?.focus()\n      } else if (event.key === 'ArrowDown' || event.key === 'Tab') {\n        event.preventDefault()\n        logoutButtonRef.current?.focus()\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault()\n        logoutButtonRef.current?.focus()\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [open])\n\n  // Focus the first menu item when menu opens\n  React.useEffect(() => {\n    if (open) {\n      setTimeout(() => {\n        logoutButtonRef.current?.focus()\n      }, 0)\n    }\n  }, [open])\n\n  return (\n    <div className=\"relative\" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n      <button\n        ref={buttonRef}\n        className=\"text-sm px-2 py-1 rounded hover:bg-accent inline-flex items-center gap-2\"\n        onClick={() => setOpen(true)}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        aria-controls=\"user-menu-dropdown\"\n        id=\"user-menu-button\"\n        type=\"button\"\n        title={email || t('ui.userMenu.userFallback', 'User')}\n      >\n        <User className=\"size-4\" />\n      </button>\n      {open && (\n        <div\n          ref={menuRef}\n          id=\"user-menu-dropdown\"\n          className=\"absolute right-0 top-full mt-0 w-56 rounded-md border bg-background p-1 shadow z-50\"\n          role=\"menu\"\n          aria-labelledby=\"user-menu-button\"\n          tabIndex={-1}\n        >\n          {email && (\n            <div className=\"px-2 py-2 text-xs text-muted-foreground border-b mb-1\">\n              <div className=\"font-medium\">{t('ui.userMenu.loggedInAs', 'Logged in as:')}</div>\n              <div className=\"truncate\">{email}</div>\n            </div>\n          )}\n          <form action=\"/api/auth/logout\" method=\"POST\">\n            <button\n              ref={logoutButtonRef}\n              className=\"w-full text-left text-sm px-2 py-1 rounded hover:bg-accent inline-flex items-center gap-2 outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0\"\n              type=\"submit\"\n              role=\"menuitem\"\n              tabIndex={0}\n              onKeyDown={(e) => {\n                if (e.key === 'Escape') {\n                  setOpen(false)\n                  buttonRef.current?.focus()\n                }\n              }}\n            >\n              <LogOut className=\"size-4\" />\n              <span>{t('ui.userMenu.logout', 'Logout')}</span>\n            </button>\n          </form>\n        </div>\n      )}\n    </div>\n  )\n}\n\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/ValueIcons.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, X, AlertTriangle, Minus, Circle } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function BooleanIcon({ value, trueLabel, falseLabel, className }) {
+  const v = !!value;
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 ${className ?? ""}`, children: [
+    v ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-emerald-600" }) : /* @__PURE__ */ jsx(X, { className: "size-4 text-muted-foreground" }),
+    v && trueLabel ? /* @__PURE__ */ jsx("span", { className: "text-xs", children: trueLabel }) : null,
+    !v && falseLabel ? /* @__PURE__ */ jsx("span", { className: "text-xs", children: falseLabel }) : null
+  ] });
+}
+function EnumBadge({ value, map, fallback }) {
+  if (!value) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: fallback ?? "\u2014" });
+  const cfg = map[value] || { label: String(value) };
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border ${cfg.className ?? ""}`, children: [
+    cfg.icon,
+    /* @__PURE__ */ jsx("span", { children: cfg.label })
+  ] });
+}
+function useSeverityPreset() {
+  const t = useT();
+  return {
+    low: { label: t("ui.badges.severity.low", "Low"), className: "border-amber-200 text-amber-700 bg-amber-50", icon: /* @__PURE__ */ jsx(Circle, { className: "size-3" }) },
+    medium: { label: t("ui.badges.severity.medium", "Medium"), className: "border-yellow-200 text-yellow-800 bg-yellow-50", icon: /* @__PURE__ */ jsx(Minus, { className: "size-3" }) },
+    high: { label: t("ui.badges.severity.high", "High"), className: "border-red-200 text-red-700 bg-red-50", icon: /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3" }) }
+  };
+}
+export {
+  BooleanIcon,
+  EnumBadge,
+  useSeverityPreset
+};
+//# sourceMappingURL=ValueIcons.js.map

package/dist/backend/ValueIcons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/ValueIcons.tsx"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { Check, X, AlertTriangle, Minus, Circle } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport function BooleanIcon({ value, trueLabel, falseLabel, className }: {\n  value?: boolean | null\n  trueLabel?: string\n  falseLabel?: string\n  className?: string\n}) {\n  const v = !!value\n  return (\n    <span className={`inline-flex items-center gap-1 ${className ?? ''}`}>\n      {v ? (\n        <Check className=\"size-4 text-emerald-600\" />\n      ) : (\n        <X className=\"size-4 text-muted-foreground\" />\n      )}\n      {v && trueLabel ? <span className=\"text-xs\">{trueLabel}</span> : null}\n      {!v && falseLabel ? <span className=\"text-xs\">{falseLabel}</span> : null}\n    </span>\n  )\n}\n\nexport type EnumBadgeMap = Record<string, { label: string; className?: string; icon?: React.ReactNode }>\n\nexport function EnumBadge({ value, map, fallback }: { value?: string | null; map: EnumBadgeMap; fallback?: string }) {\n  if (!value) return <span className=\"text-muted-foreground text-xs\">{fallback ?? '\u2014'}</span>\n  const cfg = map[value] || { label: String(value) }\n  return (\n    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border ${cfg.className ?? ''}`}>\n      {cfg.icon}\n      <span>{cfg.label}</span>\n    </span>\n  )\n}\n\n// Presets for common enums (optional helper)\nexport function useSeverityPreset(): EnumBadgeMap {\n  const t = useT()\n  return {\n    low: { label: t('ui.badges.severity.low', 'Low'), className: 'border-amber-200 text-amber-700 bg-amber-50', icon: <Circle className=\"size-3\" /> },\n    medium: { label: t('ui.badges.severity.medium', 'Medium'), className: 'border-yellow-200 text-yellow-800 bg-yellow-50', icon: <Minus className=\"size-3\" /> },\n    high: { label: t('ui.badges.severity.high', 'High'), className: 'border-red-200 text-red-700 bg-red-50', icon: <AlertTriangle className=\"size-3\" /> },\n  }\n}\n\n"],
+  "mappings": ";AAaI,SAEI,KAFJ;AAXJ,SAAS,OAAO,GAAG,eAAe,OAAO,cAAc;AACvD,SAAS,YAAY;AAEd,SAAS,YAAY,EAAE,OAAO,WAAW,YAAY,UAAU,GAKnE;AACD,QAAM,IAAI,CAAC,CAAC;AACZ,SACE,qBAAC,UAAK,WAAW,kCAAkC,aAAa,EAAE,IAC/D;AAAA,QACC,oBAAC,SAAM,WAAU,2BAA0B,IAE3C,oBAAC,KAAE,WAAU,gCAA+B;AAAA,IAE7C,KAAK,YAAY,oBAAC,UAAK,WAAU,WAAW,qBAAU,IAAU;AAAA,IAChE,CAAC,KAAK,aAAa,oBAAC,UAAK,WAAU,WAAW,sBAAW,IAAU;AAAA,KACtE;AAEJ;AAIO,SAAS,UAAU,EAAE,OAAO,KAAK,SAAS,GAAoE;AACnH,MAAI,CAAC,MAAO,QAAO,oBAAC,UAAK,WAAU,iCAAiC,sBAAY,UAAI;AACpF,QAAM,MAAM,IAAI,KAAK,KAAK,EAAE,OAAO,OAAO,KAAK,EAAE;AACjD,SACE,qBAAC,UAAK,WAAW,0EAA0E,IAAI,aAAa,EAAE,IAC3G;AAAA,QAAI;AAAA,IACL,oBAAC,UAAM,cAAI,OAAM;AAAA,KACnB;AAEJ;AAGO,SAAS,oBAAkC;AAChD,QAAM,IAAI,KAAK;AACf,SAAO;AAAA,IACL,KAAK,EAAE,OAAO,EAAE,0BAA0B,KAAK,GAAG,WAAW,+CAA+C,MAAM,oBAAC,UAAO,WAAU,UAAS,EAAG;AAAA,IAChJ,QAAQ,EAAE,OAAO,EAAE,6BAA6B,QAAQ,GAAG,WAAW,kDAAkD,MAAM,oBAAC,SAAM,WAAU,UAAS,EAAG;AAAA,IAC3J,MAAM,EAAE,OAAO,EAAE,2BAA2B,MAAM,GAAG,WAAW,yCAAyC,MAAM,oBAAC,iBAAc,WAAU,UAAS,EAAG;AAAA,EACtJ;AACF;",
+  "names": []
+}