@dimaan/ui 0.0.27 → 0.0.28

package/dist/index.cjs

@@ -602,6 +602,7 @@ function SidebarHeader({ className, children, ...props }) {
 function SidebarNav({ className, children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("flex flex-1 flex-col gap-1 overflow-y-auto p-2", className), ...props, children });
 }
+var SidebarNavGroupContext = react.createContext(null);
 function SidebarNavGroup({
   icon,
   label,
@@ -627,19 +628,39 @@ function SidebarNavGroup({
     },
     [isControlled, onOpenChange]
   );
+  const [activeChildIds, setActiveChildIds] = react.useState(() => /* @__PURE__ */ new Set());
+  const reportActive = react.useCallback((id, isItemActive) => {
+    setActiveChildIds((prev) => {
+      if (isItemActive === prev.has(id)) return prev;
+      const next = new Set(prev);
+      if (isItemActive) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }, []);
+  const contextValue = react.useMemo(() => ({ reportActive }), [reportActive]);
+  const hasActiveChild = activeChildIds.size > 0;
+  const isActive = active || hasActiveChild;
+  const prevHasActiveChild = react.useRef(false);
+  react.useEffect(() => {
+    if (hasActiveChild && !prevHasActiveChild.current && !collapsed) {
+      setOpen(true);
+    }
+    prevHasActiveChild.current = hasActiveChild;
+  }, [hasActiveChild, collapsed, setOpen]);
   react.useEffect(() => {
     if (collapsed && open) setOpen(false);
   }, [collapsed, open, setOpen]);
   const titleAttr = collapsed && typeof label === "string" ? label : props.title ?? void 0;
   const showChildren = !collapsed;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
         "aria-expanded": showChildren ? open : void 0,
         "aria-controls": showChildren ? submenuId : void 0,
-        "data-active": active ? "true" : void 0,
+        "data-active": isActive ? "true" : void 0,
         title: titleAttr,
         onClick: (e) => {
           if (showChildren) setOpen(!open);
@@ -649,12 +670,19 @@ function SidebarNavGroup({
           "group relative flex h-9 w-full items-center gap-3 rounded-md px-3 text-sm font-medium outline-none transition-colors",
           "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar",
-          active && "bg-sidebar-accent text-sidebar-accent-foreground",
+          isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
           collapsed && "justify-center px-0",
           className
         ),
         ...props,
         children: [
+          isActive ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-y-1.5 start-0 w-1 rounded-full bg-primary"
+            }
+          ) : null,
           icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
@@ -680,7 +708,7 @@ function SidebarNavGroup({
           "grid transition-[grid-template-rows] duration-200 ease-out",
           showChildren && open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5 ps-7 pt-1", children }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5 ps-7 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(SidebarNavGroupContext.Provider, { value: contextValue, children }) }) })
       }
     )
   ] });
@@ -710,13 +738,20 @@ function SidebarNavItem({
   ...props
 }) {
   const { collapsed } = useDashboardLayout();
-  const location = reactRouterDom.useLocation();
   const resolved = reactRouterDom.useResolvedPath(to);
-  const isActive = forcedActive || (end ? location.pathname === resolved.pathname : location.pathname.startsWith(resolved.pathname));
+  const group = react.useContext(SidebarNavGroupContext);
+  const itemId = react.useId();
+  const routeMatch = reactRouterDom.useMatch({ path: resolved.pathname, end: end ?? false });
+  const isActive = forcedActive || routeMatch != null;
+  react.useEffect(() => {
+    if (!group) return;
+    group.reportActive(itemId, isActive);
+    return () => group.reportActive(itemId, false);
+  }, [group, itemId, isActive]);
   const labelContent = label ?? children;
   const titleAttr = collapsed && typeof labelContent === "string" ? labelContent : props.title;
   const getClassName = (active) => cn(
-    "group relative flex h-9 items-center gap-3 rounded-md px-3 text-sm font-medium outline-none transition-colors",
+    "group relative flex h-9 shrink-0 items-center gap-3 rounded-md px-3 text-sm font-medium outline-none transition-colors",
     "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
     "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar",
     active && "bg-sidebar-accent text-sidebar-accent-foreground",
@@ -724,6 +759,13 @@ function SidebarNavItem({
     className
   );
   const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isActive ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute inset-y-1.5 start-0 w-1 rounded-full bg-primary"
+      }
+    ) : null,
     icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -2621,6 +2663,7 @@ var selectItemClass = "relative flex w-full cursor-pointer select-none items-cen
 var selectItemIndicatorClass = "absolute start-2 inline-flex h-3.5 w-3.5 items-center justify-center [&_svg]:h-3.5 [&_svg]:w-3.5";
 var selectGroupLabelClass = "px-2 py-1.5 text-xs font-semibold text-muted-foreground";
 var selectSeparatorClass = "-mx-1 my-1 h-px bg-border";
+var selectStatusClass = "flex items-center justify-center gap-2 px-2 py-6 text-center text-sm text-muted-foreground";
 
 // src/components/multi-select/multiSelectVariants.ts
 var multiSelectTriggerSizeClass = {
@@ -2638,11 +2681,13 @@ var multiSelectOptionClass = "flex w-full cursor-pointer select-none items-cente
 var multiSelectEmptyClass = "px-2 py-6 text-center text-sm text-muted-foreground";
 var DEFAULT_LABELS_LTR4 = {
   search: "Search\u2026",
-  empty: "No results"
+  empty: "No results",
+  loading: "Loading\u2026"
 };
 var DEFAULT_LABELS_RTL4 = {
   search: "\u0628\u062D\u062B\u2026",
-  empty: "\u0644\u0627 \u0646\u062A\u0627\u0626\u062C"
+  empty: "\u0644\u0627 \u0646\u062A\u0627\u0626\u062C",
+  loading: "\u062C\u0627\u0631\u064D \u0627\u0644\u062A\u062D\u0645\u064A\u0644\u2026"
 };
 function toArray(value) {
   return Array.isArray(value) ? value : [];
@@ -2652,6 +2697,7 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
   selectSize = "md",
   options,
   placeholder,
+  loading = false,
   value,
   defaultValue,
   onValueChange,
@@ -2732,7 +2778,10 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: multiSelectValueRowClass, children: selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: multiSelectValueRowClass, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+            labels.loading
+          ] }) : selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             shownValues.map((v) => /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "default", size: "sm", className: multiSelectChipClass, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: labelByValue.get(v) ?? v }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -2767,7 +2816,7 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       RadixPopover__namespace.Content,
       {
         align: "start",
@@ -2777,7 +2826,10 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
         onOpenAutoFocus: (event) => {
           if (!searchable) event.preventDefault();
         },
-        children: [
+        children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: multiSelectEmptyClass, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+          labels.loading
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           searchable ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: multiSelectSearchRowClass, children: /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
@@ -2817,7 +2869,7 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
               option.value
             );
           }) })
-        ]
+        ] })
       }
     ) })
   ] });
@@ -2831,6 +2883,9 @@ var Select = react.forwardRef(function Select2({
   selectSize = "md",
   options,
   placeholder,
+  loading = false,
+  loadingText = "Loading\u2026",
+  emptyText = "No options",
   value,
   defaultValue,
   onValueChange,
@@ -2889,7 +2944,7 @@ var Select = react.forwardRef(function Select2({
               className
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Value, { placeholder }),
+              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Value, { placeholder, children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(SelectLoading, { text: loadingText }) }) : void 0 }),
               /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "pointer-events-none absolute end-3 top-1/2 size-4 shrink-0 -translate-y-1/2 text-muted-foreground" }) })
             ]
           }
@@ -2903,7 +2958,7 @@ var Select = react.forwardRef(function Select2({
             className: selectContentClass,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ScrollUpButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { className: selectViewportClass, children: children ?? (options ? renderOptions(options) : null) }),
+              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { className: selectViewportClass, children: children ?? renderViewportContent({ loading, options, loadingText, emptyText }) }),
               /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ScrollDownButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" }) })
             ]
           }
@@ -2912,6 +2967,26 @@ var Select = react.forwardRef(function Select2({
     }
   );
 });
+function SelectLoading({ text }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+    text
+  ] });
+}
+function renderViewportContent({
+  loading,
+  options,
+  loadingText,
+  emptyText
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: selectStatusClass, role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsx(SelectLoading, { text: loadingText }) });
+  }
+  if (!options || options.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: selectStatusClass, role: "presentation", children: emptyText });
+  }
+  return renderOptions(options);
+}
 function renderOptions(options) {
   if (isGroupedOptions(options)) {
     const lastIndex = options.length - 1;
@@ -2952,6 +3027,7 @@ function DebouncedFilterInput({
   value,
   onChange,
   debounceMs,
+  id,
   ariaLabel,
   placeholder,
   wrapperClassName,
@@ -2989,6 +3065,7 @@ function DebouncedFilterInput({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
+      id,
       type: "search",
       "aria-label": ariaLabel,
       placeholder,
@@ -3073,6 +3150,16 @@ function ListPageFilterBar({
 }
 function FilterControl({ filter, value, onChange, disabled, mode }) {
   const spanClass = FILTER_SPAN_CLASS[filter.width ?? "default"];
+  const label = filter.label ?? filter.key;
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, className: spanClass, children: renderFilterControl({ filter, value, onChange, disabled, mode }) });
+}
+function renderFilterControl({
+  filter,
+  value,
+  onChange,
+  disabled,
+  mode
+}) {
   const ariaLabel = typeof filter.label === "string" ? filter.label : filter.key;
   switch (filter.type) {
     case "select":
@@ -3083,7 +3170,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           value: value ?? filterDefaultValue(filter),
           onValueChange: (v) => onChange?.(filter.key, v),
           options: filter.options,
-          className: spanClass,
           disabled
         }
       );
@@ -3096,7 +3182,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           debounceMs: mode === "live" ? filter.debounceMs ?? DEFAULT_TEXT_DEBOUNCE_MS : 0,
           ariaLabel,
           placeholder: filter.placeholder,
-          wrapperClassName: spanClass,
           disabled
         }
       );
@@ -3108,7 +3193,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           placeholder: filter.placeholder,
           value: value ?? "",
           onValueChange: (v) => onChange?.(filter.key, v),
-          className: spanClass,
           disabled
         }
       );
@@ -3121,7 +3205,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           options: filter.options,
           value: value ? value.split(",").filter(Boolean) : [],
           onValueChange: (values) => onChange?.(filter.key, values.join(",")),
-          className: spanClass,
           disabled
         }
       );