@xex/ui 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -309,10 +309,15 @@ interface HeaderProps {
     title: string;
     subtitle?: string;
     actions?: ReactNode;
-    /** Opens the navigation drawer; the button only shows below lg. */
+    /** Opens the navigation drawer. */
     onMenu?: () => void;
+    /**
+     * Show the menu button at every width. By default it only shows below lg, where the navigation is a
+     * drawer; set this when the user has collapsed the navigation on a wide screen.
+     */
+    menuAlwaysVisible?: boolean;
 }
-declare function Header({ title, subtitle, actions, onMenu }: HeaderProps): react.JSX.Element;
+declare function Header({ title, subtitle, actions, onMenu, menuAlwaysVisible }: HeaderProps): react.JSX.Element;
 
 /** One entry in a page's "On this page" guide. */
 interface PageSection {
@@ -345,12 +350,28 @@ interface SidebarProps {
     items: NavEntry[];
     active: string;
     onSelect: (id: string) => void;
-    /** Mobile drawer state; ignored at lg+, where the sidebar is always visible. */
+    /** Drawer state: whether the slide-over navigation is showing (small screens, or when `collapsed`). */
     open: boolean;
     onClose: () => void;
+    /**
+     * The user has collapsed the navigation to give the page more room. On wide screens it then behaves
+     * as it does on narrow ones: hidden, and opened as a slide-over drawer from the header's menu button.
+     */
+    collapsed?: boolean;
+    /**
+     * Collapse (when docked) or pin open again (when collapsed). Omit to hide the button and keep the
+     * sidebar always docked on wide screens.
+     */
+    onToggleCollapse?: () => void;
 }
-/** App navigation: persistent at lg+, slide-over drawer below. */
-declare function Sidebar({ items, active, onSelect, open, onClose }: SidebarProps): react.JSX.Element;
+/** App navigation: docked at lg+ (collapsible), slide-over drawer below, or when collapsed. */
+declare function Sidebar({ items, active, onSelect, open, onClose, collapsed, onToggleCollapse }: SidebarProps): react.JSX.Element;
+
+/**
+ * Whether the user has collapsed the sidebar, remembered in localStorage.
+ * Give each app its own key (like ThemeProvider's `storagePrefix`), e.g. `my-app-nav-collapsed`.
+ */
+declare function useSidebarCollapsed(storageKey?: string): [collapsed: boolean, setCollapsed: (value: boolean) => void];
 
 type ColorMode = 'light' | 'dark';
 interface ThemeContextValue {
@@ -387,4 +408,4 @@ declare function ThemeSwitcher({ showLabels }: {
     showLabels?: boolean;
 }): react.JSX.Element;
 
-export { AVATAR_COLORS, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type ColorMode, ConfirmDialog, type ConfirmDialogProps, DataTable, type DataTableColumn, type DataTableProps, type FetchState, FetchStatus, type FetchStatusProps, Header, Input, type InputProps, LoadingDots, LoadingOverlay, type LoadingOverlayProps, Modal, type ModalProps, type ModalSize, MultiSelect, type MultiSelectOption, type MultiSelectProps, type NavEntry, PageGuide, type PageSection, PaginationBar, type PaginationBarProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, type ProgressTone, Section, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, Sidebar, Skeleton, type SkeletonProps, SkeletonText, Spinner, type SpinnerProps, type SpinnerSize, type TabItem, Tabs, type TabsProps, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, colorFor, focusablesIn, initialsOf, pageWindow, radioGroupKeyDown, useDialogFocus, useTheme };
+export { AVATAR_COLORS, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type ColorMode, ConfirmDialog, type ConfirmDialogProps, DataTable, type DataTableColumn, type DataTableProps, type FetchState, FetchStatus, type FetchStatusProps, Header, Input, type InputProps, LoadingDots, LoadingOverlay, type LoadingOverlayProps, Modal, type ModalProps, type ModalSize, MultiSelect, type MultiSelectOption, type MultiSelectProps, type NavEntry, PageGuide, type PageSection, PaginationBar, type PaginationBarProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, type ProgressTone, Section, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, Sidebar, Skeleton, type SkeletonProps, SkeletonText, Spinner, type SpinnerProps, type SpinnerSize, type TabItem, Tabs, type TabsProps, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, colorFor, focusablesIn, initialsOf, pageWindow, radioGroupKeyDown, useDialogFocus, useSidebarCollapsed, useTheme };

package/dist/index.js

@@ -1104,9 +1104,10 @@ function Tabs({
 }
 
 // src/layout/Header.tsx
+import clsx13 from "clsx";
 import { Bars3Icon } from "@heroicons/react/24/outline";
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
-function Header({ title, subtitle, actions, onMenu }) {
+function Header({ title, subtitle, actions, onMenu, menuAlwaysVisible = false }) {
   return /* @__PURE__ */ jsxs13("header", { className: "sticky top-0 z-30 flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 bg-surface px-4 py-4 sm:px-6", children: [
     /* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 items-center gap-3", children: [
       onMenu && /* @__PURE__ */ jsx16(
@@ -1115,7 +1116,10 @@ function Header({ title, subtitle, actions, onMenu }) {
           type: "button",
           onClick: onMenu,
           "aria-label": "Open navigation",
-          className: "rounded-lg p-1.5 text-gray-600 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400 lg:hidden",
+          className: clsx13(
+            "rounded-lg p-1.5 text-gray-600 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+            !menuAlwaysVisible && "lg:hidden"
+          ),
           children: /* @__PURE__ */ jsx16(Bars3Icon, { className: "h-6 w-6" })
         }
       ),
@@ -1130,7 +1134,7 @@ function Header({ title, subtitle, actions, onMenu }) {
 
 // src/layout/PageGuide.tsx
 import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState4 } from "react";
-import clsx13 from "clsx";
+import clsx14 from "clsx";
 import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var OFFSET = 96;
 var reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -1250,7 +1254,7 @@ function PageGuide({ sections }) {
           onPointerMove,
           onPointerUp: endDrag,
           onPointerCancel: endDrag,
-          className: clsx13("absolute -left-2 bottom-0 top-0 z-10 w-5 touch-none select-none", dragging ? "cursor-grabbing" : "cursor-grab")
+          className: clsx14("absolute -left-2 bottom-0 top-0 z-10 w-5 touch-none select-none", dragging ? "cursor-grabbing" : "cursor-grab")
         }
       ),
       /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", className: "absolute bottom-0 left-0 top-0 w-px bg-gray-200" }),
@@ -1259,7 +1263,7 @@ function PageGuide({ sections }) {
         {
           ref: markerRef,
           "aria-hidden": "true",
-          className: clsx13(
+          className: clsx14(
             "pointer-events-none absolute left-0 top-0 rounded-full bg-brand-600 transition-[width,margin] duration-150",
             dragging ? "-ml-px w-1" : "w-0.5 group-hover:-ml-px group-hover:w-1"
           )
@@ -1277,7 +1281,7 @@ function PageGuide({ sections }) {
             e.preventDefault();
             goTo(i, e.detail === 0);
           },
-          className: clsx13(
+          className: clsx14(
             "block py-1.5 pl-3 pr-2 text-sm transition-colors",
             i === active ? "font-medium text-accent" : "text-gray-500 hover:text-gray-900"
           ),
@@ -1300,41 +1304,44 @@ function Section({ id, title, description, children }) {
 
 // src/layout/Sidebar.tsx
 import { useEffect as useEffect5, useRef as useRef6 } from "react";
-import clsx14 from "clsx";
-import { XMarkIcon as XMarkIcon3 } from "@heroicons/react/24/outline";
+import clsx15 from "clsx";
+import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon, XMarkIcon as XMarkIcon3 } from "@heroicons/react/24/outline";
 import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
-function Sidebar({ items, active, onSelect, open, onClose }) {
+var iconButton = "rounded-lg p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400";
+function Sidebar({ items, active, onSelect, open, onClose, collapsed = false, onToggleCollapse }) {
   const asideRef = useRef6(null);
   const trapTab = useDialogFocus(open, asideRef, {
     initialFocus: () => asideRef.current?.querySelector('[aria-current="page"]')
   });
   useEffect5(() => {
-    if (!open) return;
+    if (!open || collapsed) return;
     const mq = window.matchMedia("(min-width: 1024px)");
     const onChange = () => mq.matches && onClose();
     mq.addEventListener("change", onChange);
     return () => mq.removeEventListener("change", onChange);
-  }, [open, onClose]);
+  }, [open, collapsed, onClose]);
   useEffect5(() => {
     if (!open) return;
     const onKey = (e) => e.key === "Escape" && onClose();
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
+  const docked = !collapsed;
   return /* @__PURE__ */ jsxs16(Fragment2, { children: [
-    open && /* @__PURE__ */ jsx19("div", { className: "fixed inset-0 z-40 bg-black/40 backdrop-blur-sm lg:hidden", onClick: onClose, "aria-hidden": "true" }),
+    open && /* @__PURE__ */ jsx19("div", { className: clsx15("fixed inset-0 z-40 bg-black/40 backdrop-blur-sm", docked && "lg:hidden"), onClick: onClose, "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs16(
       "aside",
       {
         ref: asideRef,
         "aria-label": "Main navigation",
+        "data-collapsed": collapsed || void 0,
         onKeyDown: open ? trapTab : void 0,
-        className: clsx14(
+        className: clsx15(
           "fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-gray-200 bg-surface duration-200",
-          "lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:w-60 lg:shrink-0 lg:translate-x-0",
-          // Closed on small screens: invisible = out of the tab order. It switches off only after
-          // the slide-out finishes, but switches on immediately so focus can move in on open.
-          open ? "visible translate-x-0 shadow-2xl transition-transform" : "invisible -translate-x-full transition-[transform,visibility] lg:visible"
+          docked && "lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:w-60 lg:shrink-0 lg:translate-x-0",
+          // Hidden drawer: invisible = out of the tab order. It switches off only after the slide-out
+          // finishes, but switches on immediately so focus can move in on open.
+          open ? "visible translate-x-0 shadow-2xl transition-transform" : clsx15("invisible -translate-x-full transition-[transform,visibility]", docked && "lg:visible")
         ),
         children: [
           /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between px-5 py-5", children: [
@@ -1342,7 +1349,20 @@ function Sidebar({ items, active, onSelect, open, onClose }) {
               /* @__PURE__ */ jsx19("span", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-sm font-bold text-white", children: "X" }),
               /* @__PURE__ */ jsx19("span", { className: "text-lg font-bold tracking-tight text-gray-900", children: "XeX" })
             ] }),
-            /* @__PURE__ */ jsx19("button", { type: "button", onClick: onClose, "aria-label": "Close navigation", className: "rounded-lg p-1 text-gray-500 hover:bg-gray-100 lg:hidden", children: /* @__PURE__ */ jsx19(XMarkIcon3, { className: "h-5 w-5" }) })
+            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
+              onToggleCollapse && /* @__PURE__ */ jsx19(
+                "button",
+                {
+                  type: "button",
+                  onClick: onToggleCollapse,
+                  "aria-label": collapsed ? "Keep navigation open" : "Collapse navigation",
+                  title: collapsed ? "Keep navigation open" : "Collapse navigation",
+                  className: clsx15(iconButton, "hidden lg:inline-flex"),
+                  children: collapsed ? /* @__PURE__ */ jsx19(ChevronDoubleRightIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx19(ChevronDoubleLeftIcon, { className: "h-5 w-5" })
+                }
+              ),
+              /* @__PURE__ */ jsx19("button", { type: "button", onClick: onClose, "aria-label": "Close navigation", className: clsx15(iconButton, docked && "lg:hidden"), children: /* @__PURE__ */ jsx19(XMarkIcon3, { className: "h-5 w-5" }) })
+            ] })
           ] }),
           /* @__PURE__ */ jsx19("nav", { className: "flex-1 space-y-1 overflow-y-auto px-3 pb-4 pt-2", children: items.map(({ id, label, icon: Icon }) => /* @__PURE__ */ jsxs16(
             "a",
@@ -1367,8 +1387,31 @@ function Sidebar({ items, active, onSelect, open, onClose }) {
   ] });
 }
 
+// src/layout/useSidebarCollapsed.ts
+import { useCallback as useCallback3, useState as useState5 } from "react";
+function useSidebarCollapsed(storageKey = "xex-nav-collapsed") {
+  const [collapsed, setState] = useState5(() => {
+    try {
+      return localStorage.getItem(storageKey) === "1";
+    } catch {
+      return false;
+    }
+  });
+  const setCollapsed = useCallback3(
+    (value) => {
+      setState(value);
+      try {
+        localStorage.setItem(storageKey, value ? "1" : "0");
+      } catch {
+      }
+    },
+    [storageKey]
+  );
+  return [collapsed, setCollapsed];
+}
+
 // src/theme/ThemeSwitcher.tsx
-import clsx15 from "clsx";
+import clsx16 from "clsx";
 import { CheckIcon, MoonIcon, SunIcon } from "@heroicons/react/24/solid";
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function ThemeSwitcher({ showLabels = false }) {
@@ -1385,7 +1428,7 @@ function ThemeSwitcher({ showLabels = false }) {
           tabIndex: selected ? 0 : -1,
           title: t.name,
           onClick: () => setThemeId(t.id),
-          className: clsx15(
+          className: clsx16(
             "flex items-center gap-2 rounded-full border p-1 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
             showLabels && "pr-3",
             selected ? "border-gray-400" : "border-transparent hover:border-gray-300"
@@ -1454,5 +1497,6 @@ export {
   pageWindow,
   radioGroupKeyDown,
   useDialogFocus,
+  useSidebarCollapsed,
   useTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xex/ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "XeX design system: React components, app shell and theme provider.",
   "license": "MIT",
   "keywords": [
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@xex/tokens": "^0.2.1",
+    "@xex/tokens": "^0.3.0",
     "clsx": "^2.1.1"
   },
   "peerDependencies": {