@underverse-ui/underverse 1.0.8 → 1.0.10

package/dist/index.cjs

@@ -6536,6 +6536,14 @@ var import_lucide_react17 = require("lucide-react");
 var import_lucide_react15 = require("lucide-react");
 var React24 = __toESM(require("react"), 1);
 var import_jsx_runtime30 = require("react/jsx-runtime");
+var VIETNAM_HOLIDAYS = [
+  { date: "01-01", name: "T\u1EBFt D\u01B0\u01A1ng l\u1ECBch", recurring: true },
+  { date: "04-30", name: "Gi\u1EA3i ph\xF3ng mi\u1EC1n Nam", recurring: true },
+  { date: "05-01", name: "Qu\u1ED1c t\u1EBF Lao \u0111\u1ED9ng", recurring: true },
+  { date: "09-02", name: "Qu\u1ED1c kh\xE1nh", recurring: true },
+  { date: "03-10", name: "Gi\u1ED7 T\u1ED5 H\xF9ng V\u01B0\u01A1ng", recurring: true }
+  // Lunar 10/3, simplified
+];
 function startOfMonth(d) {
   return new Date(d.getFullYear(), d.getMonth(), 1);
 }
@@ -6565,6 +6573,20 @@ function startOfWeek(d, weekStartsOn) {
   s.setDate(d.getDate() - diff);
   return new Date(s.getFullYear(), s.getMonth(), s.getDate());
 }
+function isHoliday(d, holidays) {
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  const mmdd = `${mm}-${dd}`;
+  for (const h of holidays) {
+    if (h.recurring) {
+      if (h.date === mmdd) return h;
+    } else {
+      const hDate = h.date instanceof Date ? h.date : new Date(h.date);
+      if (isSameDay(d, hDate)) return h;
+    }
+  }
+  return void 0;
+}
 function getMonthGrid(view, weekStartsOn) {
   const start = startOfMonth(view);
   const end = endOfMonth(view);
@@ -6614,8 +6636,13 @@ function Calendar2({
   animate = false,
   showEventBadges = false,
   highlightWeekends = false,
+  weekendTextColor = "text-destructive",
+  highlightHolidays = false,
+  holidayTextColor = "text-destructive",
+  holidays = VIETNAM_HOLIDAYS,
   cellMode = "compact",
   maxEventsPerDay = 3,
+  showEventCount = true,
   onEventClick,
   renderEvent,
   enableEventSheet,
@@ -6802,6 +6829,8 @@ function Calendar2({
         const dayEvents = byDay.get(k) || [];
         const disabled = isDateDisabled(d);
         const isWeekend = d.getDay() === 0 || d.getDay() === 6;
+        const holidayMatch = isHoliday(d, holidays);
+        const isHolidayDay = highlightHolidays && !!holidayMatch;
         const customDay = renderDay?.({ date: d, isCurrentMonth: inMonth, isToday: isToday2, isSelected: selectedDay, events: dayEvents });
         if (customDay) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React24.Fragment, { children: customDay }, `${monthLabel}-${idx}`);
         if (cellMode === "events") {
@@ -6820,9 +6849,11 @@ function Calendar2({
                 !inMonth && "opacity-40",
                 disabled && "opacity-30 cursor-not-allowed",
                 highlightWeekends && isWeekend && "bg-destructive/5",
+                isHolidayDay && "bg-destructive/5",
                 isToday2 && !selectedDay && "ring-2 ring-primary/40 border-primary/50",
                 selectedDay && "border-primary/60 bg-primary/5"
               ),
+              title: holidayMatch?.name,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between px-2.5 py-1.5", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -6831,6 +6862,8 @@ function Calendar2({
                       className: cn(
                         "font-semibold tabular-nums",
                         cellSz.day,
+                        highlightWeekends && isWeekend && weekendTextColor,
+                        isHolidayDay && holidayTextColor,
                         isToday2 && "text-primary",
                         selectedDay && "text-primary",
                         !inMonth && "text-muted-foreground/50"
@@ -6838,7 +6871,7 @@ function Calendar2({
                       children: d.getDate()
                     }
                   ),
-                  dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-md bg-muted/60 text-muted-foreground font-medium", children: dayEvents.length })
+                  dayEvents.length > 0 && showEventCount && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-md bg-muted/60 text-muted-foreground font-medium", children: dayEvents.length })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-1 px-2 pb-2", children: [
                   visibleEvents.map((e, i) => {
@@ -6851,7 +6884,7 @@ function Calendar2({
                         type: "button",
                         onClick: () => handleEventActivate(e, d, k, i),
                         className: cn(
-                          "group w-full text-left rounded-lg px-2.5 py-1.5",
+                          "group w-full text-left rounded-r-lg px-2.5 py-1.5",
                           "transition-all duration-150",
                           "hover:bg-accent/50 hover:shadow-sm hover:-translate-y-0.5",
                           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
@@ -6893,11 +6926,14 @@ function Calendar2({
               !inMonth && "text-muted-foreground/50",
               disabled && "opacity-40 cursor-not-allowed",
               highlightWeekends && isWeekend && "bg-destructive/5",
+              highlightWeekends && isWeekend && !selectedDay && weekendTextColor,
+              isHolidayDay && "bg-destructive/5",
+              isHolidayDay && !selectedDay && holidayTextColor,
               isToday2 && !selectedDay && "ring-2 ring-primary/60 bg-primary/5 font-bold",
               selectedDay && "bg-linear-to-br from-primary to-primary/90 text-primary-foreground shadow-md hover:shadow-lg hover:scale-105",
               !selectedDay && !disabled && "hover:bg-accent hover:text-accent-foreground hover:scale-105 active:scale-95"
             ),
-            title: d.toDateString(),
+            title: holidayMatch?.name || d.toDateString(),
             children: [
               d.getDate(),
               dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -6981,6 +7017,8 @@ function Calendar2({
         const dayEvents = byDay.get(k) || [];
         const disabled = isDateDisabled(d);
         const isWeekend = d.getDay() === 0 || d.getDay() === 6;
+        const holidayMatch = isHoliday(d, holidays);
+        const isHolidayDay = highlightHolidays && !!holidayMatch;
         const customDay = renderDay?.({ date: d, isCurrentMonth: inMonth, isToday: isToday2, isSelected: selectedDay, events: dayEvents });
         if (customDay) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React24.Fragment, { children: customDay }, `wd-${idx}`);
         if (cellMode === "events") {
@@ -6998,9 +7036,11 @@ function Calendar2({
                 cellSz.cell,
                 disabled && "opacity-30 cursor-not-allowed",
                 highlightWeekends && isWeekend && "bg-destructive/5",
+                isHolidayDay && "bg-destructive/5",
                 isToday2 && !selectedDay && "ring-2 ring-primary/40 border-primary/50",
                 selectedDay && "border-primary/60 bg-primary/5"
               ),
+              title: holidayMatch?.name,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between px-2.5 py-1.5", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -7009,13 +7049,15 @@ function Calendar2({
                       className: cn(
                         "font-semibold tabular-nums",
                         cellSz.day,
+                        highlightWeekends && isWeekend && weekendTextColor,
+                        isHolidayDay && holidayTextColor,
                         isToday2 && "text-primary",
                         selectedDay && "text-primary"
                       ),
                       children: d.getDate()
                     }
                   ),
-                  dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-md bg-muted/60 text-muted-foreground font-medium", children: dayEvents.length })
+                  dayEvents.length > 0 && showEventCount && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-md bg-muted/60 text-muted-foreground font-medium", children: dayEvents.length })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-1 px-2 pb-2", children: [
                   visibleEvents.map((e, i) => {
@@ -7028,7 +7070,7 @@ function Calendar2({
                         type: "button",
                         onClick: () => handleEventActivate(e, d, k, i),
                         className: cn(
-                          "group w-full text-left rounded-lg px-2.5 py-1.5",
+                          "group w-full text-left rounded-r-lg px-2.5 py-1.5",
                           "transition-all duration-150",
                           "hover:bg-accent/50 hover:shadow-sm hover:-translate-y-0.5",
                           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
@@ -7069,7 +7111,9 @@ function Calendar2({
               highlightWeekends && isWeekend && "bg-accent/10",
               isToday2 && !selectedDay && "ring-1 ring-primary/50",
               selectedDay && "bg-primary text-primary-foreground hover:bg-primary/90",
-              !selectedDay && "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+              !selectedDay && "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+              !selectedDay && highlightHolidays && isHoliday(d, holidays) && holidayTextColor,
+              !selectedDay && !(highlightHolidays && isHoliday(d, holidays)) && isWeekend && weekendTextColor
             ),
             title: d.toDateString(),
             children: [
@@ -12693,7 +12737,9 @@ var import_lucide_react24 = require("lucide-react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var defaultLabels = {
   emptyText: "No categories",
-  selectedText: (count) => `${count} selected`
+  selectedText: (count) => `${count} selected`,
+  searchPlaceholder: "Search...",
+  noResultsText: "No results found"
 };
 function CategoryTreeSelect(props) {
   const {
@@ -12702,6 +12748,7 @@ function CategoryTreeSelect(props) {
     disabled,
     viewOnly = false,
     defaultExpanded = false,
+    enableSearch,
     labels,
     inline = false,
     onNodeClick,
@@ -12710,18 +12757,76 @@ function CategoryTreeSelect(props) {
   } = props;
   const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
   const [expandedNodes, setExpandedNodes] = (0, import_react18.useState)(/* @__PURE__ */ new Set());
+  const [query, setQuery] = (0, import_react18.useState)("");
+  const searchInputRef = (0, import_react18.useRef)(null);
   const mergedLabels = { ...defaultLabels, ...labels };
   const valueArray = singleSelect ? props.value != null ? [props.value] : [] : props.value || [];
-  const parentCategories = categories.filter((c) => !c.parent_id);
-  const childrenMap = /* @__PURE__ */ new Map();
-  categories.forEach((cat) => {
-    if (cat.parent_id) {
-      if (!childrenMap.has(cat.parent_id)) {
-        childrenMap.set(cat.parent_id, []);
+  const { parentCategories, childrenMap, byId } = (0, import_react18.useMemo)(() => {
+    const byId2 = /* @__PURE__ */ new Map();
+    const childrenMap2 = /* @__PURE__ */ new Map();
+    const parentCategories2 = [];
+    for (const cat of categories) byId2.set(cat.id, cat);
+    for (const cat of categories) {
+      if (cat.parent_id == null) {
+        parentCategories2.push(cat);
+        continue;
+      }
+      if (!childrenMap2.has(cat.parent_id)) childrenMap2.set(cat.parent_id, []);
+      childrenMap2.get(cat.parent_id).push(cat);
+    }
+    return { parentCategories: parentCategories2, childrenMap: childrenMap2, byId: byId2 };
+  }, [categories]);
+  const isSearchEnabled = (0, import_react18.useMemo)(() => enableSearch ?? categories.length > 10, [enableSearch, categories.length]);
+  const normalizedQuery = (0, import_react18.useMemo)(() => query.trim().toLowerCase(), [query]);
+  const isSearchMode = isSearchEnabled && normalizedQuery.length > 0;
+  const visibleIds = (0, import_react18.useMemo)(() => {
+    if (!isSearchMode) return null;
+    const matches = categories.filter((c) => c.name.toLowerCase().includes(normalizedQuery));
+    if (matches.length === 0) return /* @__PURE__ */ new Set();
+    const visible = /* @__PURE__ */ new Set();
+    const addAncestors = (cat) => {
+      let cur = cat;
+      let guard = 0;
+      while (cur && cur.parent_id != null && guard++ < categories.length) {
+        const pid = cur.parent_id;
+        if (typeof pid !== "number") break;
+        if (visible.has(pid)) {
+          cur = byId.get(pid);
+          continue;
+        }
+        visible.add(pid);
+        cur = byId.get(pid);
+      }
+    };
+    const addDescendants = (rootId) => {
+      const stack = [rootId];
+      let guard = 0;
+      while (stack.length > 0 && guard++ < categories.length * 3) {
+        const id = stack.pop();
+        const children = childrenMap.get(id) ?? [];
+        for (const child of children) {
+          if (visible.has(child.id)) continue;
+          visible.add(child.id);
+          stack.push(child.id);
+        }
       }
-      childrenMap.get(cat.parent_id).push(cat);
+    };
+    for (const m of matches) {
+      visible.add(m.id);
+      addAncestors(m);
+      addDescendants(m.id);
     }
-  });
+    return visible;
+  }, [byId, categories, childrenMap, isSearchMode, normalizedQuery]);
+  (0, import_react18.useEffect)(() => {
+    if (!isOpen) setQuery("");
+  }, [isOpen]);
+  (0, import_react18.useEffect)(() => {
+    if (!isOpen) return;
+    if (!isSearchEnabled) return;
+    const t = setTimeout(() => searchInputRef.current?.focus(), 50);
+    return () => clearTimeout(t);
+  }, [isOpen, isSearchEnabled]);
   (0, import_react18.useEffect)(() => {
     if ((viewOnly || inline) && defaultExpanded) {
       const allParentIds = categories.filter((c) => childrenMap.has(c.id)).map((c) => c.id);
@@ -12729,6 +12834,7 @@ function CategoryTreeSelect(props) {
     }
   }, [viewOnly, inline, defaultExpanded, categories]);
   const toggleExpand = (id) => {
+    if (isSearchMode) return;
     const newExpanded = new Set(expandedNodes);
     if (newExpanded.has(id)) {
       newExpanded.delete(id);
@@ -12769,9 +12875,10 @@ function CategoryTreeSelect(props) {
     }
   };
   const renderCategory = (category, level = 0) => {
-    const children = childrenMap.get(category.id) || [];
+    const allChildren = childrenMap.get(category.id) || [];
+    const children = isSearchMode ? allChildren.filter((c) => visibleIds?.has(c.id)) : allChildren;
     const hasChildren = children.length > 0;
-    const isExpanded = expandedNodes.has(category.id);
+    const isExpanded = hasChildren && (isSearchMode || expandedNodes.has(category.id));
     const isSelected = valueArray.includes(category.id);
     const isParent = level === 0;
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "animate-in fade-in-50 duration-200", style: { animationDelay: `${level * 30}ms` }, children: [
@@ -12801,8 +12908,10 @@ function CategoryTreeSelect(props) {
                   "p-1.5 rounded-lg transition-all duration-200",
                   "hover:scale-110 active:scale-95",
                   "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
-                  isExpanded && "text-primary"
+                  isExpanded && "text-primary",
+                  isSearchMode && "opacity-60 cursor-not-allowed hover:scale-100 active:scale-100"
                 ),
+                disabled: isSearchMode,
                 children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.ChevronRight, { className: "w-4 h-4" }) })
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "w-7" }),
@@ -12826,15 +12935,60 @@ function CategoryTreeSelect(props) {
       hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("ml-2 pl-2 border-l-2 border-dashed border-border/50", "animate-in slide-in-from-top-2 fade-in-50 duration-200"), children: children.map((child) => renderCategory(child, level + 1)) })
     ] }, category.id);
   };
-  const renderTreeContent = () => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "space-y-0.5", children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.Layers, { className: "w-6 h-6 text-muted-foreground/50" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm text-muted-foreground", children: mergedLabels.emptyText })
-  ] }) : parentCategories.map((cat) => renderCategory(cat)) });
+  const renderSearch = () => {
+    if (!isSearchEnabled) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "sticky top-0 z-10 px-1 pt-1 pb-2 bg-popover/80 backdrop-blur-xl", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "input",
+        {
+          ref: searchInputRef,
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: mergedLabels.searchPlaceholder,
+          className: cn(
+            "w-full h-10 rounded-full px-10 pr-10 text-sm",
+            "bg-background/70 border border-border/60",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/40"
+          )
+        }
+      ),
+      query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setQuery("");
+            searchInputRef.current?.focus();
+          },
+          className: cn(
+            "absolute right-2 top-1/2 -translate-y-1/2 h-7 w-7 rounded-full",
+            "flex items-center justify-center",
+            "text-muted-foreground hover:text-foreground hover:bg-accent/40 transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          ),
+          "aria-label": "Clear search",
+          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.X, { className: "h-4 w-4" })
+        }
+      )
+    ] }) });
+  };
+  const effectiveParentCategories = (0, import_react18.useMemo)(() => {
+    if (!isSearchMode) return parentCategories;
+    return parentCategories.filter((c) => visibleIds?.has(c.id));
+  }, [isSearchMode, parentCategories, visibleIds]);
+  const renderTreeContent = () => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "space-y-0.5", children: effectiveParentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: isSearchMode ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.SearchX, { className: "w-6 h-6 text-muted-foreground/50" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.Layers, { className: "w-6 h-6 text-muted-foreground/50" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm text-muted-foreground", children: isSearchMode ? mergedLabels.noResultsText : mergedLabels.emptyText })
+  ] }) : effectiveParentCategories.map((cat) => renderCategory(cat)) });
   if (viewOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("rounded-2xl border border-border/60 bg-card/50 backdrop-blur-sm p-3 shadow-sm", disabled && "opacity-50", className), children: renderTreeContent() });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("rounded-2xl border border-border/60 bg-card/50 backdrop-blur-sm p-3 shadow-sm", disabled && "opacity-50", className), children: [
+      renderSearch(),
+      renderTreeContent()
+    ] });
   }
   if (inline) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "div",
       {
         className: cn(
@@ -12842,7 +12996,10 @@ function CategoryTreeSelect(props) {
           disabled && "opacity-50 pointer-events-none",
           className
         ),
-        children: renderTreeContent()
+        children: [
+          renderSearch(),
+          renderTreeContent()
+        ]
       }
     );
   }
@@ -12899,7 +13056,7 @@ function CategoryTreeSelect(props) {
     ),
     isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
         "div",
         {
           className: cn(
@@ -12909,7 +13066,10 @@ function CategoryTreeSelect(props) {
             "p-2",
             "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
           ),
-          children: renderTreeContent()
+          children: [
+            renderSearch(),
+            renderTreeContent()
+          ]
         }
       )
     ] })