@underverse-ui/underverse 0.2.43 → 0.2.44

package/dist/index.d.cts

@@ -994,14 +994,26 @@ interface Category {
     name: string;
     parent_id?: number | null;
 }
+interface CategoryTreeSelectLabels {
+    /** Text shown when no categories available */
+    emptyText?: string;
+    /** Text shown when categories are selected, receives count as parameter */
+    selectedText?: (count: number) => string;
+}
 interface CategoryTreeSelectProps {
     categories: Category[];
-    value: number[];
-    onChange: (selectedIds: number[]) => void;
+    value?: number[];
+    onChange?: (selectedIds: number[]) => void;
     placeholder?: string;
     disabled?: boolean;
-}
-declare function CategoryTreeSelect({ categories, value, onChange, placeholder, disabled }: CategoryTreeSelectProps): react_jsx_runtime.JSX.Element;
+    /** When true, renders as a read-only tree view without select functionality */
+    viewOnly?: boolean;
+    /** Default expanded state for all nodes in viewOnly mode */
+    defaultExpanded?: boolean;
+    /** i18n labels for localization */
+    labels?: CategoryTreeSelectLabels;
+}
+declare function CategoryTreeSelect({ categories, value, onChange, placeholder, disabled, viewOnly, defaultExpanded, labels, }: CategoryTreeSelectProps): react_jsx_runtime.JSX.Element;
 
 type Fit = "cover" | "contain";
 interface SmartImageProps {

package/dist/index.d.ts

@@ -994,14 +994,26 @@ interface Category {
     name: string;
     parent_id?: number | null;
 }
+interface CategoryTreeSelectLabels {
+    /** Text shown when no categories available */
+    emptyText?: string;
+    /** Text shown when categories are selected, receives count as parameter */
+    selectedText?: (count: number) => string;
+}
 interface CategoryTreeSelectProps {
     categories: Category[];
-    value: number[];
-    onChange: (selectedIds: number[]) => void;
+    value?: number[];
+    onChange?: (selectedIds: number[]) => void;
     placeholder?: string;
     disabled?: boolean;
-}
-declare function CategoryTreeSelect({ categories, value, onChange, placeholder, disabled }: CategoryTreeSelectProps): react_jsx_runtime.JSX.Element;
+    /** When true, renders as a read-only tree view without select functionality */
+    viewOnly?: boolean;
+    /** Default expanded state for all nodes in viewOnly mode */
+    defaultExpanded?: boolean;
+    /** i18n labels for localization */
+    labels?: CategoryTreeSelectLabels;
+}
+declare function CategoryTreeSelect({ categories, value, onChange, placeholder, disabled, viewOnly, defaultExpanded, labels, }: CategoryTreeSelectProps): react_jsx_runtime.JSX.Element;
 
 type Fit = "cover" | "contain";
 interface SmartImageProps {

package/dist/index.js

@@ -7944,12 +7944,26 @@ function OverlayControls({
 }
 
 // ../../components/ui/CategoryTreeSelect.tsx
-import { useState as useState25 } from "react";
+import { useState as useState25, useEffect as useEffect15 } from "react";
 import { ChevronRight as ChevronRight5, ChevronDown as ChevronDown3, Check as Check6 } from "lucide-react";
 import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
-function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1ECDn danh m\u1EE5c", disabled }) {
+var defaultLabels = {
+  emptyText: "No categories",
+  selectedText: (count) => `${count} selected`
+};
+function CategoryTreeSelect({
+  categories,
+  value = [],
+  onChange,
+  placeholder = "Select category",
+  disabled,
+  viewOnly = false,
+  defaultExpanded = false,
+  labels
+}) {
   const [isOpen, setIsOpen] = useState25(false);
   const [expandedNodes, setExpandedNodes] = useState25(/* @__PURE__ */ new Set());
+  const mergedLabels = { ...defaultLabels, ...labels };
   const parentCategories = categories.filter((c) => !c.parent_id);
   const childrenMap = /* @__PURE__ */ new Map();
   categories.forEach((cat) => {
@@ -7960,6 +7974,12 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
       childrenMap.get(cat.parent_id).push(cat);
     }
   });
+  useEffect15(() => {
+    if (viewOnly && defaultExpanded) {
+      const allParentIds = categories.filter((c) => childrenMap.has(c.id)).map((c) => c.id);
+      setExpandedNodes(new Set(allParentIds));
+    }
+  }, [viewOnly, defaultExpanded, categories]);
   const toggleExpand = (id) => {
     const newExpanded = new Set(expandedNodes);
     if (newExpanded.has(id)) {
@@ -7970,6 +7990,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
     setExpandedNodes(newExpanded);
   };
   const handleSelect = (categoryId, category) => {
+    if (viewOnly || !onChange) return;
     const newSelected = new Set(value);
     if (newSelected.has(categoryId)) {
       newSelected.delete(categoryId);
@@ -7993,20 +8014,14 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
         "div",
         {
           className: cn(
-            "relative flex items-center gap-2 px-3 py-2 cursor-pointer rounded-md transition-colors",
-            "hover:bg-accent",
-            // Selected state: subtle bg + square left indicator, avoid left rounding
-            isSelected && "bg-primary/10 rounded-r-md"
+            "relative flex items-center gap-2 px-3 py-2 rounded-md transition-colors",
+            !viewOnly && "cursor-pointer hover:bg-accent",
+            // Selected state: subtle bg + square left indicator (only in select mode)
+            !viewOnly && isSelected && "bg-primary/10 rounded-r-md"
           ),
           style: { paddingLeft: `${level * 1.5 + 0.75}rem` },
           children: [
-            isSelected && /* @__PURE__ */ jsx36(
-              "span",
-              {
-                "aria-hidden": true,
-                className: "absolute left-0 top-0 bottom-0 w-1 bg-primary"
-              }
-            ),
+            !viewOnly && isSelected && /* @__PURE__ */ jsx36("span", { "aria-hidden": true, className: "absolute left-0 top-0 bottom-0 w-1 bg-primary" }),
             hasChildren ? /* @__PURE__ */ jsx36(
               "button",
               {
@@ -8019,25 +8034,24 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
                 children: isExpanded ? /* @__PURE__ */ jsx36(ChevronDown3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx36(ChevronRight5, { className: "w-4 h-4" })
               }
             ) : /* @__PURE__ */ jsx36("span", { className: "w-5" }),
-            /* @__PURE__ */ jsxs31(
-              "div",
-              {
-                onClick: () => handleSelect(category.id, category),
-                className: "flex items-center gap-2 flex-1",
-                children: [
-                  /* @__PURE__ */ jsx36(
-                    "div",
-                    {
-                      className: cn(
-                        "w-4 h-4 border-2 rounded flex items-center justify-center transition-colors",
-                        isSelected ? "bg-primary border-primary" : "border-muted-foreground/30"
-                      ),
-                      children: isSelected && /* @__PURE__ */ jsx36(Check6, { className: "w-3 h-3 text-primary-foreground" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx36("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
-                ]
-              }
+            viewOnly ? (
+              // View-only mode: just display the name
+              /* @__PURE__ */ jsx36("span", { className: "text-sm", children: category.name })
+            ) : (
+              // Select mode: clickable with checkbox
+              /* @__PURE__ */ jsxs31("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2 flex-1", children: [
+                /* @__PURE__ */ jsx36(
+                  "div",
+                  {
+                    className: cn(
+                      "w-4 h-4 border-2 rounded flex items-center justify-center transition-colors",
+                      isSelected ? "bg-primary border-primary" : "border-muted-foreground/30"
+                    ),
+                    children: isSelected && /* @__PURE__ */ jsx36(Check6, { className: "w-3 h-3 text-primary-foreground" })
+                  }
+                ),
+                /* @__PURE__ */ jsx36("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
+              ] })
             )
           ]
         }
@@ -8045,8 +8059,11 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
       hasChildren && isExpanded && /* @__PURE__ */ jsx36("div", { children: children.map((child) => renderCategory(child, level + 1)) })
     ] }, category.id);
   };
+  if (viewOnly) {
+    return /* @__PURE__ */ jsx36("div", { className: cn("rounded-md border bg-background p-2", disabled && "opacity-50"), children: parentCategories.length === 0 ? /* @__PURE__ */ jsx36("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: mergedLabels.emptyText }) : parentCategories.map((cat) => renderCategory(cat)) });
+  }
   const selectedCount = value.length;
-  const displayText = selectedCount > 0 ? `\u0110\xE3 ch\u1ECDn ${selectedCount} danh m\u1EE5c` : placeholder;
+  const displayText = selectedCount > 0 ? mergedLabels.selectedText(selectedCount) : placeholder;
   return /* @__PURE__ */ jsxs31("div", { className: "relative", children: [
     /* @__PURE__ */ jsxs31(
       "button",
@@ -8079,7 +8096,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
             "rounded-md border bg-popover text-popover-foreground shadow-md",
             "backdrop-blur-sm bg-popover/95 border-border/60"
           ),
-          children: /* @__PURE__ */ jsx36("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ jsx36("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Kh\xF4ng c\xF3 danh m\u1EE5c n\xE0o" }) : parentCategories.map((cat) => renderCategory(cat)) })
+          children: /* @__PURE__ */ jsx36("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ jsx36("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: mergedLabels.emptyText }) : parentCategories.map((cat) => renderCategory(cat)) })
         }
       )
     ] })
@@ -10304,16 +10321,16 @@ var Grid_default = Grid;
 import { useMemo as useMemo6, useState as useState33, useRef as useRef14 } from "react";
 
 // ../../components/ui/ChartTooltip.tsx
-import { useEffect as useEffect18, useState as useState32 } from "react";
+import { useEffect as useEffect19, useState as useState32 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, secondaryValue, items, containerRef }) {
   const [isMounted, setIsMounted] = useState32(false);
   const [position, setPosition] = useState32(null);
-  useEffect18(() => {
+  useEffect19(() => {
     setIsMounted(true);
   }, []);
-  useEffect18(() => {
+  useEffect19(() => {
     if (visible && containerRef?.current) {
       const rect = containerRef.current.getBoundingClientRect();
       setPosition({
@@ -11665,11 +11682,11 @@ function GaugeChart({
 }
 
 // ../../components/ui/ClientOnly.tsx
-import { useEffect as useEffect19, useState as useState38 } from "react";
+import { useEffect as useEffect20, useState as useState38 } from "react";
 import { Fragment as Fragment19, jsx as jsx53 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const [hasMounted, setHasMounted] = useState38(false);
-  useEffect19(() => {
+  useEffect20(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
@@ -12622,7 +12639,7 @@ function AccessDenied({
 
 // ../../components/ui/ThemeToggleHeadless.tsx
 import { Moon, Sun, Monitor } from "lucide-react";
-import { useEffect as useEffect21, useRef as useRef19, useState as useState39 } from "react";
+import { useEffect as useEffect22, useRef as useRef19, useState as useState39 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Fragment as Fragment21, jsx as jsx61, jsxs as jsxs55 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
@@ -12635,7 +12652,7 @@ function ThemeToggleHeadless({
   const [mounted, setMounted] = useState39(false);
   const triggerRef = useRef19(null);
   const [dropdownPosition, setDropdownPosition] = useState39(null);
-  useEffect21(() => setMounted(true), []);
+  useEffect22(() => setMounted(true), []);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: Sun },
     { value: "dark", label: labels?.dark ?? "Dark", icon: Moon },