@dimaan/ui 0.0.29 → 0.0.30

package/dist/index.cjs

@@ -372,7 +372,7 @@ function DashboardMain({ className, children, ...props }) {
         // stretching the whole layout past 100%.
         "flex min-h-screen min-w-0 flex-1 flex-col transition-[margin] duration-200 ease-out",
         // On desktop, push the main column past the fixed sidebar using logical margin.
-        collapsed ? "lg:ms-[var(--sidebar-width-collapsed)]" : "lg:ms-[var(--sidebar-width)]",
+        collapsed ? "lg:ms-0" : "lg:ms-(--sidebar-width)",
         className
       ),
       ...props,
@@ -541,14 +541,16 @@ function Sidebar({ className, children, ...props }) {
           "fixed inset-y-0 start-0 z-40 flex flex-col",
           // Surface
           "bg-sidebar text-sidebar-foreground border-e border-sidebar-border",
-          // Sizing — width animates between full and collapsed
-          collapsed ? "w-[var(--sidebar-width-collapsed)]" : "w-[var(--sidebar-width)]",
+          // Sizing — always full width; collapse hides it off-canvas (below).
+          "w-[var(--sidebar-width)]",
           // Motion
-          "transition-[transform,width] duration-200 ease-out",
-          // Mobile slide: hidden by default, visible when mobileOpen.
-          // Logical translate via rtl variant so it slides off the inline-start edge
-          // in both LTR and RTL.
-          mobileOpen ? "translate-x-0" : "-translate-x-full rtl:translate-x-full lg:translate-x-0 lg:rtl:translate-x-0",
+          "transition-transform duration-200 ease-out",
+          // Mobile: slide in/out via mobileOpen. Logical translate (rtl variant)
+          // so it slides off the inline-start edge in both LTR and RTL.
+          mobileOpen ? "translate-x-0" : "-translate-x-full rtl:translate-x-full",
+          // Desktop: collapse fully hides the sidebar off-canvas; the header
+          // trigger slides it back in and the main content reclaims the width.
+          collapsed ? "lg:-translate-x-full lg:rtl:translate-x-full" : "lg:translate-x-0 lg:rtl:translate-x-0",
           className
         ),
         ...props,
@@ -571,18 +573,8 @@ function SidebarFooter({ className, children, ...props }) {
   );
 }
 function SidebarGroup({ label, className, children, ...props }) {
-  const { collapsed } = useDashboardLayout();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1 py-2", className), ...props, children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "px-3 pb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground transition-opacity",
-          collapsed && "pointer-events-none h-0 overflow-hidden opacity-0"
-        ),
-        children: label
-      }
-    ) : null,
+    label ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children })
   ] });
 }
@@ -616,7 +608,6 @@ function SidebarNavGroup({
   onClick,
   ...props
 }) {
-  const { collapsed } = useDashboardLayout();
   const submenuId = react.useId();
   const [internalOpen, setInternalOpen] = react.useState(defaultOpen);
   const isControlled = openProp !== void 0;
@@ -643,27 +634,23 @@ function SidebarNavGroup({
   const isActive = active || hasActiveChild;
   const prevHasActiveChild = react.useRef(false);
   react.useEffect(() => {
-    if (hasActiveChild && !prevHasActiveChild.current && !collapsed) {
+    if (hasActiveChild && !prevHasActiveChild.current) {
       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;
+  }, [hasActiveChild, setOpen]);
+  const titleAttr = props.title ?? void 0;
   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,
+        "aria-expanded": open,
+        "aria-controls": submenuId,
         "data-active": isActive ? "true" : void 0,
         title: titleAttr,
         onClick: (e) => {
-          if (showChildren) setOpen(!open);
+          setOpen(!open);
           onClick?.(e);
         },
         className: cn(
@@ -671,7 +658,6 @@ function SidebarNavGroup({
           "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",
           isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
-          collapsed && "justify-center px-0",
           className
         ),
         ...props,
@@ -684,18 +670,9 @@ function SidebarNavGroup({
             }
           ) : null,
           icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center", children: icon }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "flex-1 truncate text-start transition-[opacity,width]",
-                collapsed && "pointer-events-none w-0 opacity-0"
-              ),
-              children: label
-            }
-          ),
-          endSlot && !collapsed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: endSlot }) : null,
-          showChildren ? /* @__PURE__ */ jsxRuntime.jsx(ChevronCaret, { open }) : null
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-start", children: label }),
+          endSlot ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: endSlot }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronCaret, { open })
         ]
       }
     ),
@@ -703,10 +680,10 @@ function SidebarNavGroup({
       "div",
       {
         id: submenuId,
-        hidden: !showChildren || !open,
+        hidden: !open,
         className: cn(
           "grid transition-[grid-template-rows] duration-200 ease-out",
-          showChildren && open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          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: /* @__PURE__ */ jsxRuntime.jsx(SidebarNavGroupContext.Provider, { value: contextValue, children }) }) })
       }
@@ -737,7 +714,6 @@ function SidebarNavItem({
   end,
   ...props
 }) {
-  const { collapsed } = useDashboardLayout();
   const resolved = reactRouterDom.useResolvedPath(to);
   const group = react.useContext(SidebarNavGroupContext);
   const itemId = react.useId();
@@ -749,13 +725,12 @@ function SidebarNavItem({
     return () => group.reportActive(itemId, false);
   }, [group, itemId, isActive]);
   const labelContent = label ?? children;
-  const titleAttr = collapsed && typeof labelContent === "string" ? labelContent : props.title;
+  const titleAttr = props.title;
   const getClassName = (active) => cn(
     "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",
-    collapsed && "justify-center px-0",
     className
   );
   const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -767,17 +742,8 @@ function SidebarNavItem({
       }
     ) : null,
     icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center", children: icon }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn(
-          "flex-1 truncate text-start transition-[opacity,width]",
-          collapsed && "pointer-events-none w-0 opacity-0"
-        ),
-        children: labelContent
-      }
-    ),
-    endSlot && !collapsed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ms-auto flex shrink-0 items-center", children: endSlot }) : null
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-start", children: labelContent }),
+    endSlot ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ms-auto flex shrink-0 items-center", children: endSlot }) : null
   ] });
   if (render) {
     return render({