highsoft-ui 1.0.141 → 1.0.144

package/dist/lib/components/Sidebar/NavDisclosure.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface NavDisclosureProps {
+    /** Label on the tap-to-expand toggle (shown only on narrow screens). */
+    label: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Wraps a nav tree so that on narrow / docked layouts it collapses behind a
+ * tap-to-expand toggle, keeping content above the fold. On desktop the wrapper
+ * is inert (`display: contents`) — the children stay direct flex descendants of
+ * the sidebar body and keep their fill-and-scroll behaviour.
+ */
+export declare function NavDisclosure({ label, children, className }: NavDisclosureProps): import("react").JSX.Element;

package/dist/lib/components/Sidebar/NavGroup.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface NavGroupProps {
+    /** The group's label, shown on the toggle row. */
+    label: ReactNode;
+    children: ReactNode;
+    /** Leading icon (16×16) shown before the label. */
+    icon?: ReactNode;
+    /** Open on first render (uncontrolled). Ignored when `open` is provided. */
+    defaultOpen?: boolean;
+    /** Controlled open state. Provide together with `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Marks this group as lying on the path to the active item — tints its
+     * guide-line so the trail to the current page stands out. Set it when a
+     * descendant <NavItem> is `active`.
+     */
+    active?: boolean;
+    className?: string;
+}
+/**
+ * An expandable nav node — a toggle row that discloses a nested list of
+ * <NavItem>s (or further <NavGroup>s). Works controlled or uncontrolled.
+ */
+export declare function NavGroup({ label, children, icon, defaultOpen, open: openProp, onOpenChange, active, className }: NavGroupProps): import("react").JSX.Element;

package/dist/lib/components/Sidebar/NavItem.d.ts

@@ -0,0 +1,15 @@
+import { ElementType, ComponentPropsWithoutRef, ReactNode } from 'react';
+export type NavItemProps<T extends ElementType = 'a'> = {
+    as?: T;
+    /** Marks the item as the current page (brand-tinted, aria-current). */
+    active?: boolean;
+    /** Leading icon (16×16). */
+    icon?: ReactNode;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, 'as'>;
+/**
+ * A single navigation link. Polymorphic — renders as `<a>` by default, or pass
+ * `as={RouterLink}` / `as="button"` for SPA navigation. Selecting an item
+ * automatically closes the mobile drawer when inside a <SidebarLayout>.
+ */
+export declare const NavItem: import('react').ForwardRefExoticComponent<Omit<NavItemProps<ElementType>, "ref"> & import('react').RefAttributes<any>>;

package/dist/lib/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+export interface SidebarProps {
+    children: ReactNode;
+    /** Accessible label for the navigation landmark. */
+    'aria-label'?: string;
+    /** Label on the mobile drawer's close button. Default "Close navigation". */
+    closeLabel?: string;
+    className?: string;
+}
+/**
+ * The sidebar column. On desktop it's a fixed-position-free flex column filling
+ * the layout's first grid track; on narrow screens it becomes an off-canvas
+ * drawer driven by the layout's mobile state. Auto-renders the resize handle
+ * (when the layout is resizable) and the mobile close button.
+ */
+export declare function Sidebar({ children, 'aria-label': ariaLabel, closeLabel, className }: SidebarProps): import("react").JSX.Element;
+/** Fixed top region of the sidebar (switchers, search, logo). Does not scroll. */
+export declare function SidebarHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** Scrollable body of the sidebar — put nav sections / trees here. */
+export declare function SidebarBody({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export interface SidebarSectionProps {
+    children: ReactNode;
+    /** Section heading shown above the items. */
+    label?: ReactNode;
+    /**
+     * Surface a "Minimize" control that collapses every open <NavGroup> in this
+     * section. It appears only while at least one group is open. Default false.
+     */
+    collapsible?: boolean;
+    /** Label on the auto Minimize control. Default "Minimize". */
+    minimizeLabel?: ReactNode;
+    /**
+     * Custom control aligned to the right of the label. Overrides the auto
+     * Minimize button when provided.
+     */
+    action?: ReactNode;
+    className?: string;
+}
+/** A labelled group of nav items within the sidebar body. */
+export declare function SidebarSection({ children, label, collapsible, minimizeLabel, action, className }: SidebarSectionProps): import("react").JSX.Element;

package/dist/lib/components/Sidebar/SidebarLayout.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface SidebarLayoutProps {
+    children: ReactNode;
+    /** Initial sidebar width in px. Default 320. */
+    defaultWidth?: number;
+    /** Smallest the sidebar can be dragged. Default 230. */
+    minWidth?: number;
+    /** Largest the sidebar can be dragged. Default 460. */
+    maxWidth?: number;
+    /** Show the drag-to-resize handle on desktop. Default true. */
+    resizable?: boolean;
+    /**
+     * localStorage key under which the chosen width is remembered. Omit to keep
+     * the width only for the current session (no persistence).
+     */
+    storageKey?: string;
+    /** Label on the mobile "open navigation" trigger bar. Default "Menu". */
+    mobileTriggerLabel?: ReactNode;
+    /**
+     * Grow to fill a flex/grid parent (sets `flex: 1 1 auto; min-height: 0`) so
+     * the shell takes the available height and the content column scrolls on its
+     * own. Default `true` — set `false` for a layout sized to its content.
+     */
+    fill?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * The resizable two-column shell: a sidebar column (`--hs-sidebar-w` wide) and a
+ * fluid content column. Owns the resize width and the mobile drawer state, which
+ * <Sidebar>, <SidebarMain> and <NavItem> read from context.
+ *
+ * On narrow screens (<=760px) the grid collapses to a single column, the sidebar
+ * becomes an off-canvas drawer, and a sticky trigger bar appears at the top.
+ */
+export declare function SidebarLayout({ children, defaultWidth, minWidth, maxWidth, resizable, storageKey, mobileTriggerLabel, fill, className, style }: SidebarLayoutProps): import("react").JSX.Element;
+/** The fluid content column that sits beside the sidebar. */
+export declare function SidebarMain({ children, className, ...rest }: {
+    children: ReactNode;
+    className?: string;
+} & React.ComponentPropsWithoutRef<'main'>): import("react").JSX.Element;

package/dist/lib/components/Sidebar/SidebarResizer.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Drag handle on the sidebar's right edge. Reads/writes the width through the
+ * layout context (which clamps and persists it) and is keyboard-operable via
+ * its `role="separator"` + arrow keys. The hatched edge is decorative.
+ */
+export declare function SidebarResizer(): import("react").JSX.Element;

package/dist/lib/components/Sidebar/context.d.ts

@@ -0,0 +1,29 @@
+export interface SidebarLayoutContextValue {
+    /** Whether the sidebar shows a drag-to-resize handle on desktop. */
+    resizable: boolean;
+    /** Current sidebar width in px (desktop). */
+    width: number;
+    /** Clamp + apply + persist a new sidebar width. */
+    setWidth: (w: number) => void;
+    minWidth: number;
+    maxWidth: number;
+    /** Whether the mobile off-canvas drawer is open. */
+    mobileOpen: boolean;
+    openMobile: () => void;
+    closeMobile: () => void;
+}
+export declare const SidebarLayoutContext: import('react').Context<SidebarLayoutContextValue | null>;
+/** Throws when used outside <SidebarLayout> — for components that require it. */
+export declare function useSidebarLayout(): SidebarLayoutContextValue;
+/** Non-throwing accessor — for components that also work standalone (NavItem). */
+export declare function useOptionalSidebarLayout(): SidebarLayoutContextValue | null;
+export interface SidebarSectionContextValue {
+    /** Bumped by the section's Minimize control to collapse its open groups. */
+    collapseNonce: number;
+    /** A descendant <NavGroup> reports its open state so the section knows
+     *  whether to surface the Minimize control. */
+    reportOpen: (id: string, open: boolean) => void;
+}
+export declare const SidebarSectionContext: import('react').Context<SidebarSectionContextValue | null>;
+/** Lets a <NavGroup> participate in its section's collapse-all behaviour. */
+export declare function useOptionalSidebarSection(): SidebarSectionContextValue | null;

package/dist/lib/components/Sidebar/index.d.ts

@@ -0,0 +1,13 @@
+export { SidebarLayout, SidebarMain } from './SidebarLayout';
+export type { SidebarLayoutProps } from './SidebarLayout';
+export { Sidebar, SidebarHeader, SidebarBody, SidebarSection } from './Sidebar';
+export type { SidebarProps, SidebarSectionProps } from './Sidebar';
+export { SidebarResizer } from './SidebarResizer';
+export { NavItem } from './NavItem';
+export type { NavItemProps } from './NavItem';
+export { NavGroup } from './NavGroup';
+export type { NavGroupProps } from './NavGroup';
+export { NavDisclosure } from './NavDisclosure';
+export type { NavDisclosureProps } from './NavDisclosure';
+export { useSidebarLayout, useOptionalSidebarLayout } from './context';
+export type { SidebarLayoutContextValue } from './context';

package/dist/lib/main.d.ts

@@ -55,6 +55,8 @@ export { ModalContactFooter } from './components/Modal/ModalContactFooter';
 export type { ModalProps, ModalFooterType, ModalSubmitVariant } from './components/Modal';
 export type { ModalContactFooterProps } from './components/Modal/ModalContactFooter';
 export { Notification } from './components/Notification';
+export { SidebarLayout, SidebarMain, Sidebar, SidebarHeader, SidebarBody, SidebarSection, SidebarResizer, NavItem, NavGroup, NavDisclosure, useSidebarLayout, useOptionalSidebarLayout } from './components/Sidebar';
+export type { SidebarLayoutProps, SidebarProps, SidebarSectionProps, NavItemProps, NavGroupProps, NavDisclosureProps, SidebarLayoutContextValue } from './components/Sidebar';
 export { PrefPanel } from './components/PrefPanel';
 export { ThemeLoader, themeLoaderScript } from './components/ThemeLoader';
 export { useTheme, useClipboard, useSuccessFlash } from './utils';

package/dist/main.js

@@ -30,5 +30,13 @@ import { n as B, t as V } from "./Checkbox-CrF45NBl.js";
 import { Modal as H } from "./components/Modal/index.js";
 import { t as U } from "./RoadmapDetails-DsLtsnqg.js";
 import { ModalContactFooter as W } from "./components/Modal/ModalContactFooter.js";
-import { ThemeLoader as G, themeLoaderScript as K } from "./components/ThemeLoader/index.js";
-export { a as Box, o as Button, p as ButtonGroup, V as Checkbox, B as CheckboxGroup, l as CodeBlock, b as Container, s as CopyCode, x as DiscordInvite, O as Dropdown, E as DropdownItem, D as DropdownSeparator, M as Footer, y as FormGroup, _ as FormRow, c as FrameworkIcon, N as GPTInput, I as Header, S as Heading, u as Icon, v as InputGrouped, m as InputSolo, j as Label, d as Link, w as Logo, H as Modal, W as ModalContactFooter, A as NewTag, T as NewsletterSignup, P as Notification, k as PrefPanel, f as ProductIcon, z as RadioBox, R as RadioBoxGroup, U as RoadmapDetails, h as SearchDropdown, g as SelectGrouped, F as SubHeader, L as Tabs, G as ThemeLoader, i as ThemeProvider, C as Typography, K as themeLoaderScript, n as useClipboard, t as useNextTheme, r as useSuccessFlash, e as useTheme };
+import { useOptionalSidebarLayout as G, useSidebarLayout as K } from "./components/Sidebar/context.js";
+import { SidebarLayout as q, SidebarMain as J } from "./components/Sidebar/SidebarLayout.js";
+import { SidebarResizer as Y } from "./components/Sidebar/SidebarResizer.js";
+import { Sidebar as X, SidebarBody as Z, SidebarHeader as Q, SidebarSection as $ } from "./components/Sidebar/Sidebar.js";
+import { NavItem as ee } from "./components/Sidebar/NavItem.js";
+import { NavGroup as te } from "./components/Sidebar/NavGroup.js";
+import { NavDisclosure as ne } from "./components/Sidebar/NavDisclosure.js";
+import "./components/Sidebar/index.js";
+import { ThemeLoader as re, themeLoaderScript as ie } from "./components/ThemeLoader/index.js";
+export { a as Box, o as Button, p as ButtonGroup, V as Checkbox, B as CheckboxGroup, l as CodeBlock, b as Container, s as CopyCode, x as DiscordInvite, O as Dropdown, E as DropdownItem, D as DropdownSeparator, M as Footer, y as FormGroup, _ as FormRow, c as FrameworkIcon, N as GPTInput, I as Header, S as Heading, u as Icon, v as InputGrouped, m as InputSolo, j as Label, d as Link, w as Logo, H as Modal, W as ModalContactFooter, ne as NavDisclosure, te as NavGroup, ee as NavItem, A as NewTag, T as NewsletterSignup, P as Notification, k as PrefPanel, f as ProductIcon, z as RadioBox, R as RadioBoxGroup, U as RoadmapDetails, h as SearchDropdown, g as SelectGrouped, X as Sidebar, Z as SidebarBody, Q as SidebarHeader, q as SidebarLayout, J as SidebarMain, Y as SidebarResizer, $ as SidebarSection, F as SubHeader, L as Tabs, re as ThemeLoader, i as ThemeProvider, C as Typography, ie as themeLoaderScript, n as useClipboard, t as useNextTheme, G as useOptionalSidebarLayout, K as useSidebarLayout, r as useSuccessFlash, e as useTheme };

package/dist/styles.module-Bd4HbnpA.js

@@ -0,0 +1,42 @@
+var e = {
+	backdrop: "UvvIVG_backdrop",
+	backdropOpen: "UvvIVG_backdropOpen",
+	body: "UvvIVG_body",
+	close: "UvvIVG_close",
+	disclosure: "UvvIVG_disclosure",
+	disclosureBody: "UvvIVG_disclosureBody",
+	disclosureChevron: "UvvIVG_disclosureChevron",
+	disclosureToggle: "UvvIVG_disclosureToggle",
+	fill: "UvvIVG_fill",
+	groupActive: "UvvIVG_groupActive",
+	groupChevron: "UvvIVG_groupChevron",
+	groupChildren: "UvvIVG_groupChildren",
+	groupChildrenInner: "UvvIVG_groupChildrenInner",
+	groupLabel: "UvvIVG_groupLabel",
+	groupOpen: "UvvIVG_groupOpen",
+	groupToggle: "UvvIVG_groupToggle",
+	handle: "UvvIVG_handle",
+	hasStickyHead: "UvvIVG_hasStickyHead",
+	hatchClip: "UvvIVG_hatchClip",
+	hatchDrag: "UvvIVG_hatchDrag",
+	hatchHi: "UvvIVG_hatchHi",
+	hatchInner: "UvvIVG_hatchInner",
+	header: "UvvIVG_header",
+	item: "UvvIVG_item",
+	itemActive: "UvvIVG_itemActive",
+	itemIcon: "UvvIVG_itemIcon",
+	itemLabel: "UvvIVG_itemLabel",
+	layout: "UvvIVG_layout",
+	main: "UvvIVG_main",
+	minimizeBtn: "UvvIVG_minimizeBtn",
+	mobileBar: "UvvIVG_mobileBar",
+	overlay: "UvvIVG_overlay",
+	section: "UvvIVG_section",
+	sectionHead: "UvvIVG_sectionHead",
+	sectionLabel: "UvvIVG_sectionLabel",
+	sidebar: "UvvIVG_sidebar",
+	sidebarOpen: "UvvIVG_sidebarOpen",
+	trigger: "UvvIVG_trigger"
+};
+//#endregion
+export { e as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.141",
+  "version": "1.0.144",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {