hazo_ui 4.6.1 → 4.8.0

package/CHANGE_LOG.md

@@ -5,6 +5,31 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v4.7.0 (2026-07-01)
+
+### New
+- **`HazoUiDialog` acknowledge/OK-only footer** — two new props enable a
+  single self-closing button without hand-rolling `footerContent`:
+  - `showActionButton?: boolean` (default `true`) — symmetric with
+    `showCancelButton`; set `false` to hide the confirm button.
+  - `closeOnConfirm?: boolean` (default `false`) — when `true`, clicking the
+    action button calls `onConfirm` (if any) then `onOpenChange(false)`.
+    Default preserves the prior "consumer controls close" behavior.
+
+  Usage for a plain "Okay" acknowledgment dialog:
+  ```tsx
+  <HazoUiDialog
+    open={open}
+    onOpenChange={setOpen}
+    title="Preview"
+    actionButtonText="Okay"
+    showCancelButton={false}
+    closeOnConfirm
+  >
+    {children}
+  </HazoUiDialog>
+  ```
+
 ## v4.6.0 (2026-06-24)
 
 > Versions 4.4.0–4.5.0 were internal bumps that were never published to the

package/README.md

@@ -2283,6 +2283,8 @@ interface HazoUiDialogProps {
   actionButtonVariant?: ButtonVariant; // default: "default"
   cancelButtonText?: string;           // default: "Cancel"
   showCancelButton?: boolean;          // default: true
+  showActionButton?: boolean;          // default: true - hide for a cancel-only footer
+  closeOnConfirm?: boolean;            // default: false - auto-close (calls onOpenChange(false)) after onConfirm
 
   // Action Button Enhancement
   actionButtonLoading?: boolean;       // default: false - Shows spinner, disables button
@@ -3078,6 +3080,8 @@ function FormDialog() {
 | `actionButtonVariant` | `ButtonVariant` | `"default"` | Action button style |
 | `cancelButtonText` | `string` | `"Cancel"` | Cancel button label |
 | `showCancelButton` | `boolean` | `true` | Show cancel button |
+| `showActionButton` | `boolean` | `true` | Show action button; set `false` for a cancel-only footer |
+| `closeOnConfirm` | `boolean` | `false` | Auto-close (calls `onOpenChange(false)`) after `onConfirm` fires |
 | `actionButtonLoading` | `boolean` | `false` | Shows loading spinner and disables action button |
 | `actionButtonDisabled` | `boolean` | `false` | Disables the action button |
 | `actionButtonIcon` | `React.ReactNode` | - | Icon element rendered before action button text |

package/dist/index.cjs

@@ -4704,6 +4704,12 @@ function CanvasTextToolbar({
   onUnderline,
   onColor,
   onAlign,
+  verticalAlign = "middle",
+  font = "sans-serif",
+  bullet,
+  onVerticalAlign,
+  onFont,
+  onBullet,
   className,
   style
 }) {
@@ -4784,7 +4790,55 @@ function CanvasTextToolbar({
               )
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-6 w-px bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            is_active: verticalAlign === "top",
+            onClick: () => onVerticalAlign?.("top"),
+            tooltip: "Align top",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignVerticalJustifyStart, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            is_active: verticalAlign === "middle",
+            onClick: () => onVerticalAlign?.("middle"),
+            tooltip: "Align middle",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignVerticalJustifyCenter, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            is_active: verticalAlign === "bottom",
+            onClick: () => onVerticalAlign?.("bottom"),
+            tooltip: "Align bottom",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignVerticalJustifyEnd, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-6 w-px bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: font,
+            onChange: (e) => onFont?.(e.target.value),
+            className: "h-8 text-xs rounded-md border border-border bg-background px-1 text-foreground focus:outline-none",
+            title: "Font family",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "sans-serif", children: "Sans" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "serif", children: "Serif" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "monospace", children: "Mono" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Arial", children: "Arial" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Georgia", children: "Georgia" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Courier New", children: "Courier" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-6 w-px bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { is_active: bullet, onClick: onBullet, tooltip: "Bullet list", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuList, { className: "h-4 w-4" }) })
       ]
     }
   ) });
@@ -6758,6 +6812,8 @@ function HazoUiDialog({
   actionButtonVariant,
   cancelButtonText = "Cancel",
   showCancelButton = true,
+  showActionButton = true,
+  closeOnConfirm = false,
   actionButtonLoading = false,
   actionButtonDisabled = false,
   actionButtonIcon,
@@ -6791,6 +6847,9 @@ function HazoUiDialog({
   const resolved_action_button_variant = actionButtonVariant ?? variant_preset?.action_button_variant ?? "default";
   const handleConfirm = () => {
     onConfirm?.();
+    if (closeOnConfirm) {
+      onOpenChange?.(false);
+    }
   };
   const handleCancel = () => {
     onCancel?.();
@@ -6973,7 +7032,7 @@ function HazoUiDialog({
                       children: cancelButtonText
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
+                  showActionButton && /* @__PURE__ */ jsxRuntime.jsxs(
                     Button,
                     {
                       type: "button",
@@ -7108,14 +7167,14 @@ function HazoUiConfirmDialog({
           "bg-background shadow-lg",
           "duration-200",
           animation_classes,
-          "overflow-hidden",
-          "focus:outline-none"
+          "overflow-hidden"
         ),
         style: {
           width: "min(90vw, 420px)",
           borderRadius: "12px",
           borderTop: `4px solid ${resolved_accent_color}`,
-          boxShadow: "0 20px 60px rgba(0,0,0,0.15)"
+          boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
+          outline: "none"
         },
         onOpenAutoFocus: (e) => {
           if ((variant === "destructive" || variant === "warning") && showCancelButton && cancel_ref.current) {
@@ -7135,7 +7194,7 @@ function HazoUiConfirmDialog({
               {
                 ref: cancel_ref,
                 type: "button",
-                className: "cls_confirm_cancel_button",
+                className: "cls_confirm_cancel_button focus-visible:ring-0 focus-visible:ring-offset-0",
                 variant: "outline",
                 onClick: handle_cancel,
                 disabled: is_loading,
@@ -11167,6 +11226,233 @@ function HazoUiEtaProgress({
   );
 }
 
+// src/components/hazo_ui_memory_dropdown/store.ts
+var MAX_ENTRIES = 50;
+function filterEntries(entries, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return entries;
+  return entries.filter((e) => e.label.toLowerCase().includes(q));
+}
+function upsertEntry(entries, entry) {
+  const without = entries.filter((e) => e.id !== entry.id);
+  const updated = [entry, ...without];
+  return updated.slice(0, MAX_ENTRIES);
+}
+function removeEntry(entries, id) {
+  return entries.filter((e) => e.id !== id);
+}
+function HazoUiMemoryDropdown({
+  history_key,
+  placeholder = "Search history\u2026",
+  on_select,
+  add_entry,
+  empty_label = "No history yet"
+}) {
+  const { value: stored, setValue } = client$1.useHazoState(history_key, {
+    level: "scope",
+    fallback: []
+  });
+  const storedEntries = Array.isArray(stored) ? stored : [];
+  const [query, setQuery] = React26__namespace.useState("");
+  React26__namespace.useEffect(() => {
+    if (!add_entry) return;
+    const updated = upsertEntry(storedEntries, add_entry);
+    setValue(updated);
+  }, [add_entry, setValue]);
+  const filtered = filterEntries(storedEntries, query);
+  function handleDelete(id, e) {
+    e.stopPropagation();
+    const updated = removeEntry(storedEntries, id);
+    setValue(updated);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        border: "1px solid #DAE1E7",
+        borderRadius: 6,
+        background: "#F0F4F8",
+        overflow: "hidden",
+        fontSize: 14,
+        color: "#1A202C"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 10px", borderBottom: "1px solid #DAE1E7" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            placeholder,
+            style: {
+              width: "100%",
+              background: "#FFFFFF",
+              border: "1px solid #DAE1E7",
+              borderRadius: 4,
+              padding: "5px 8px",
+              fontSize: 13,
+              color: "#1A202C",
+              outline: "none",
+              boxSizing: "border-box"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              overflowY: "auto",
+              maxHeight: 240
+            },
+            children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  padding: "10px 12px",
+                  color: "#94A3B8",
+                  fontStyle: "italic",
+                  fontSize: 13
+                },
+                children: empty_label
+              }
+            ) : filtered.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+              EntryRow,
+              {
+                entry,
+                on_select,
+                onDelete: handleDelete
+              },
+              entry.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+function EntryRow({ entry, on_select, onDelete }) {
+  const [deleteHovered, setDeleteHovered] = React26__namespace.useState(false);
+  const [rowHovered, setRowHovered] = React26__namespace.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      onClick: () => on_select(entry),
+      onMouseEnter: () => setRowHovered(true),
+      onMouseLeave: () => setRowHovered(false),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "7px 12px",
+        cursor: "pointer",
+        background: rowHovered ? "#DAE1E7" : "transparent",
+        borderBottom: "1px solid #DAE1E7",
+        gap: 8
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              flex: 1,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              fontSize: 13,
+              color: "#1A202C"
+            },
+            children: entry.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: (e) => onDelete(entry.id, e),
+            onMouseEnter: () => setDeleteHovered(true),
+            onMouseLeave: () => setDeleteHovered(false),
+            "aria-label": `Remove ${entry.label} from history`,
+            style: {
+              flexShrink: 0,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "2px 4px",
+              borderRadius: 3,
+              color: deleteHovered ? "#EF4444" : "#94A3B8",
+              fontSize: 14,
+              lineHeight: 1
+            },
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+}
+var ThemeContext = React26__namespace.createContext(void 0);
+function HazoThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme"
+}) {
+  const [theme, setTheme] = useLocalStorage(storageKey, defaultTheme);
+  const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+  const resolvedTheme = theme === "system" ? prefersDark ? "dark" : "light" : theme;
+  React26__namespace.useEffect(() => {
+    document.documentElement.classList.toggle("dark", resolvedTheme === "dark");
+  }, [resolvedTheme]);
+  const toggleTheme = React26__namespace.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  }, [resolvedTheme, setTheme]);
+  const value = React26__namespace.useMemo(
+    () => ({ theme, setTheme, resolvedTheme, toggleTheme }),
+    [theme, setTheme, resolvedTheme, toggleTheme]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = React26__namespace.useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a <HazoThemeProvider>");
+  }
+  return context;
+}
+function ThemeScript({ storageKey = "theme" }) {
+  const script = `(function(){try{var k=${JSON.stringify(
+    storageKey
+  )};var raw=localStorage.getItem(k);var t="system";if(raw){try{t=JSON.parse(raw);}catch(e){t=String(raw).replace(/^"|"$/g,"");}}var m=window.matchMedia("(prefers-color-scheme: dark)").matches;var isDark=t==="dark"||((t==="system"||!t)&&m);var c=document.documentElement.classList;if(isDark){c.add("dark");}else{c.remove("dark");}}catch(e){}})();`;
+  return /* @__PURE__ */ jsxRuntime.jsx("script", { dangerouslySetInnerHTML: { __html: script } });
+}
+var ThemeToggle = React26__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { resolvedTheme, toggleTheme } = useTheme();
+    const [mounted, setMounted] = React26__namespace.useState(false);
+    React26__namespace.useEffect(() => {
+      setMounted(true);
+    }, []);
+    const isDark = mounted && resolvedTheme === "dark";
+    const label = isDark ? "Switch to light theme" : "Switch to dark theme";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        ref,
+        onClick: toggleTheme,
+        "aria-label": label,
+        className: cn(
+          "inline-flex h-9 w-9 items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted 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",
+          className
+        ),
+        ...props,
+        children: isDark ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4" })
+      }
+    );
+  }
+);
+ThemeToggle.displayName = "ThemeToggle";
+
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
   get: function () { return sonner.toast; }
@@ -11239,6 +11525,7 @@ exports.ErrorBanner = ErrorBanner;
 exports.ErrorPage = ErrorPage;
 exports.FunnelChart = FunnelChart;
 exports.HazoContextProvider = HazoContextProvider;
+exports.HazoThemeProvider = HazoThemeProvider;
 exports.HazoUiConfirmDialog = HazoUiConfirmDialog;
 exports.HazoUiDialog = HazoUiDialog;
 exports.HazoUiDialogClose = DialogClose;
@@ -11258,6 +11545,7 @@ exports.HazoUiImageCropper = HazoUiImageCropper;
 exports.HazoUiImageCropperDialog = HazoUiImageCropperDialog;
 exports.HazoUiKanban = HazoUiKanban;
 exports.HazoUiKanbanFilter = HazoUiKanbanFilter;
+exports.HazoUiMemoryDropdown = HazoUiMemoryDropdown;
 exports.HazoUiMultiFilterDialog = HazoUiMultiFilterDialog;
 exports.HazoUiMultiSortDialog = HazoUiMultiSortDialog;
 exports.HazoUiPillRadio = HazoUiPillRadio;
@@ -11327,6 +11615,8 @@ exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.Textarea = Textarea;
+exports.ThemeScript = ThemeScript;
+exports.ThemeToggle = ThemeToggle;
 exports.Toggle = Toggle;
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem;
@@ -11356,6 +11646,7 @@ exports.set_logger = set_logger;
 exports.successToast = successToast;
 exports.text_to_tiptap_content = text_to_tiptap_content;
 exports.toggleVariants = toggleVariants;
+exports.upsertMemoryEntry = upsertEntry;
 exports.useClickOutside = useClickOutside;
 exports.useCopyToClipboard = useCopyToClipboard;
 exports.useDebounce = useDebounce;
@@ -11367,6 +11658,7 @@ exports.useLoadingState = useLoadingState;
 exports.useLocalStorage = useLocalStorage;
 exports.useMediaQuery = useMediaQuery;
 exports.useSessionStorage = useSessionStorage;
+exports.useTheme = useTheme;
 exports.useViewport = useViewport;
 exports.useWakeLock = useWakeLock;
 exports.use_fullscreen = use_fullscreen;