highsoft-ui 1.0.141 → 1.0.144

package/CLAUDE.md

@@ -208,9 +208,41 @@ The foundational layout component. Use it instead of raw `<div>` with inline sty
 ```
 
 ### InputSolo
+Standalone, self-bordered text field with a floating label, help text, and error/success states.
 ```tsx
 <InputSolo label="Email" placeholder="you@example.com" />
+<InputSolo label="Search" size={300} iconLeft={<Icon name="search-md" />} />
+<InputSolo label="API key" hasError helpText="That key isn't valid." />
 ```
+- **`size`:** `100`, `200` (default), `300`
+- **`variant`:** `"default"`, `"white"`
+- **`iconLeft`:** icon rendered inside the field (not next to the label — that's `InputGrouped`'s `labelIcon`)
+- **`hasError` / `success`:** state styling; pair with `helpText`
+
+### SearchDropdown
+Combobox / autocomplete: a search field (built on `InputSolo`) with a filtered, keyboard-navigable results popover and match highlighting.
+```tsx
+const items = [
+  { id: 'chart.type', label: 'chart.type', kind: 'option' },
+  { id: 'series.data', label: 'series.data', kind: 'option' },
+]
+
+<SearchDropdown
+  items={items}
+  placeholder="Search options…"
+  onSelect={(item) => router.push(`/api/${item.id}`)}
+/>
+
+// Server-side / async filtering — disable built-in filtering and feed results:
+<SearchDropdown items={results} filter={false} onQueryChange={setQuery} mono />
+```
+- **`items`:** `SearchDropdownItem[]` — each `{ id, label, kind?, iconLeft?, disabled?, highlightFrom? }`
+- **`onSelect(item)`:** called when a result is chosen; **`onQueryChange(query)`:** called as the user types
+- **`filter`:** `true` (default, built-in substring match), `false` (you filter — pair with `onQueryChange`), or a custom `(item, query) => boolean`
+- **`value` / `defaultValue`:** controlled / uncontrolled query
+- **`size`:** `100` | `200` (default) | `300`; **`variant`:** `"default"` | `"white"` (forwarded to `InputSolo`)
+- **`mono`:** monospace row labels (handy for code/API names); **`minChars`:** chars before the popover opens (default `1`)
+- **`iconLeft`, `label`, `placeholder`, `emptyState`, `maxHeight`** also supported
 
 ### InputGrouped / SelectGrouped / FormGroup / FormRow
 ```tsx
@@ -284,6 +316,49 @@ const a = 2   // [!code ++]`} />
 <Notification variant="danger" title="Error" message="Something went wrong" />
 ```
 
+### Sidebar (SidebarLayout, Sidebar, NavItem, NavGroup, …)
+A composable, resizable sidebar-navigation shell for docs/app layouts. The
+`<SidebarLayout>` is a two-column grid that owns the resize width and the mobile
+off-canvas drawer; compose the rest inside it.
+
+```tsx
+import {
+  SidebarLayout, SidebarMain, Sidebar, SidebarHeader, SidebarBody,
+  SidebarSection, NavItem, NavGroup, NavDisclosure
+} from 'highsoft-ui'
+import { BarChart01 } from '@untitled-ui/icons-react'
+
+<SidebarLayout storageKey="docs.sidebarWidth">
+  <Sidebar aria-label="Docs navigation">
+    <SidebarHeader>{/* logo, product switcher, search */}</SidebarHeader>
+    <SidebarBody>
+      <SidebarSection label="Getting started">
+        <NavItem href="/overview" active iconLeft={<BarChart01 />}>Overview</NavItem>
+        <NavItem href="/install">Installation</NavItem>
+      </SidebarSection>
+      <SidebarSection label="Components" collapsible>
+        <NavGroup label="Inputs" defaultOpen>
+          <NavItem href="/inputs/text">Text field</NavItem>
+          <NavItem href="/inputs/select">Select</NavItem>
+        </NavGroup>
+        <NavItem href="/button">Button</NavItem>
+      </SidebarSection>
+    </SidebarBody>
+  </Sidebar>
+  <SidebarMain>{children}</SidebarMain>
+</SidebarLayout>
+```
+
+- **`SidebarLayout`** — the grid shell. `defaultWidth`/`minWidth`/`maxWidth` (drag-to-resize), `storageKey` (persist width), `resizable` (default `true`), `fill` (default `true` — grows to fill a flex/grid parent), `mobileTriggerLabel` (default `"Menu"`). Owns the mobile drawer (sticky trigger, backdrop, Escape).
+- **`SidebarMain`** — the fluid content column beside the sidebar.
+- **`Sidebar`** — the `<aside>`; becomes the off-canvas drawer on mobile and auto-renders the resize handle + close button.
+- **`SidebarHeader` / `SidebarBody`** — fixed top region / scrollable body.
+- **`SidebarSection`** — labelled group. `collapsible` surfaces a "Minimize" control that collapses its open `NavGroup`s; `action` slots a custom control instead.
+- **`NavItem`** — polymorphic nav link (`as`, default `<a>`); `active`, `icon`. Closes the mobile drawer on click. Open parents pin to the top while their list scrolls.
+- **`NavGroup`** — expandable tree node (`defaultOpen`, controlled `open`/`onOpenChange`, `active` to tint the guide-line on the active path).
+- **`NavDisclosure`** — collapses behind a tap-toggle on narrow screens, inert on desktop.
+- The sidebar imposes **no background** of its own — set `--hs-sidebar-bg` (the mobile drawer keeps an opaque fallback). Colours use `--HS-*` tokens, so dark mode is automatic.
+
 ## Hooks
 
 ### useSuccessFlash

package/dist/components/Sidebar/NavDisclosure.js

@@ -0,0 +1,39 @@
+"use client";
+import { t as e } from "../../clsx-BWCAbrjV.js";
+import { t } from "../../styles.module-Bd4HbnpA.js";
+import { useId as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/components/Sidebar/NavDisclosure.tsx
+function o({ label: o, children: s, className: c }) {
+	let [l, u] = r(!1), d = n();
+	return /* @__PURE__ */ a("div", {
+		className: e(t.disclosure, c),
+		"data-open": l,
+		children: [/* @__PURE__ */ a("button", {
+			type: "button",
+			className: t.disclosureToggle,
+			"aria-expanded": l,
+			"aria-controls": d,
+			onClick: () => u((e) => !e),
+			children: [/* @__PURE__ */ i("svg", {
+				className: t.disclosureChevron,
+				width: "14",
+				height: "14",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ i("path", { d: "m9 18 6-6-6-6" })
+			}), /* @__PURE__ */ i("span", { children: o })]
+		}), /* @__PURE__ */ i("div", {
+			id: d,
+			className: t.disclosureBody,
+			children: s
+		})]
+	});
+}
+//#endregion
+export { o as NavDisclosure };

package/dist/components/Sidebar/NavGroup.js

@@ -0,0 +1,74 @@
+"use client";
+import { t as e } from "../../clsx-BWCAbrjV.js";
+import { useOptionalSidebarSection as t } from "./context.js";
+import { t as n } from "../../styles.module-Bd4HbnpA.js";
+import { createContext as r, useCallback as i, useContext as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region lib/components/Sidebar/NavGroup.tsx
+var f = r(0);
+function p({ label: r, children: p, icon: m, defaultOpen: h = !1, open: g, onOpenChange: _, active: v, className: y }) {
+	let [b, x] = l(h), S = g !== void 0, C = S ? g : b, w = s(), T = s(), E = t(), D = a(f), O = i((e) => {
+		S || x(e), _?.(e);
+	}, [S, _]), k = i(() => O(!C), [C, O]);
+	o(() => (E?.reportOpen(T, C), () => E?.reportOpen(T, !1)), [
+		C,
+		T,
+		E
+	]);
+	let A = c(E?.collapseNonce ?? 0);
+	return o(() => {
+		let e = E?.collapseNonce ?? 0;
+		e !== A.current && (A.current = e, C && O(!1));
+	}, [
+		E?.collapseNonce,
+		C,
+		E,
+		O
+	]), /* @__PURE__ */ d("div", {
+		className: e(n.group, C && n.groupOpen, v && n.groupActive, y),
+		style: { "--hs-nav-depth": D },
+		children: [/* @__PURE__ */ d("button", {
+			type: "button",
+			className: n.groupToggle,
+			"aria-expanded": C,
+			"aria-controls": w,
+			onClick: k,
+			children: [
+				/* @__PURE__ */ u("svg", {
+					className: n.groupChevron,
+					width: "14",
+					height: "14",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ u("path", { d: "m9 18 6-6-6-6" })
+				}),
+				m == null ? null : /* @__PURE__ */ u("span", {
+					className: n.itemIcon,
+					children: m
+				}),
+				/* @__PURE__ */ u("span", {
+					className: n.groupLabel,
+					children: r
+				})
+			]
+		}), /* @__PURE__ */ u("div", {
+			id: w,
+			className: n.groupChildren,
+			role: "group",
+			children: /* @__PURE__ */ u("div", {
+				className: n.groupChildrenInner,
+				children: /* @__PURE__ */ u(f.Provider, {
+					value: D + 1,
+					children: p
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { p as NavGroup };

package/dist/components/Sidebar/NavItem.js

@@ -0,0 +1,28 @@
+"use client";
+import { t as e } from "../../clsx-BWCAbrjV.js";
+import { useOptionalSidebarLayout as t } from "./context.js";
+import { t as n } from "../../styles.module-Bd4HbnpA.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/components/Sidebar/NavItem.tsx
+var o = r(function({ as: r, active: o, icon: s, children: c, className: l, onClick: u, ...d }, f) {
+	let p = r || "a", m = t();
+	return /* @__PURE__ */ a(p, {
+		ref: f,
+		className: e(n.item, o && n.itemActive, l),
+		"aria-current": o ? "page" : void 0,
+		onClick: (e) => {
+			u?.(e), m?.closeMobile();
+		},
+		...d,
+		children: [s == null ? null : /* @__PURE__ */ i("span", {
+			className: n.itemIcon,
+			children: s
+		}), /* @__PURE__ */ i("span", {
+			className: n.itemLabel,
+			children: c
+		})]
+	});
+});
+//#endregion
+export { o as NavItem };

package/dist/components/Sidebar/Sidebar.js

@@ -0,0 +1,107 @@
+"use client";
+import { t as e } from "../../clsx-BWCAbrjV.js";
+import { t } from "../../Button-awCDIEXQ.js";
+import { SidebarSectionContext as n, useSidebarLayout as r } from "./context.js";
+import { t as i } from "../../styles.module-Bd4HbnpA.js";
+import { SidebarResizer as a } from "./SidebarResizer.js";
+import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region lib/components/Sidebar/Sidebar.tsx
+function f({ children: t, "aria-label": n = "Sidebar navigation", closeLabel: o = "Close navigation", className: l }) {
+	let { resizable: f, mobileOpen: p, closeMobile: m } = r(), h = c(null);
+	return s(() => {
+		p && h.current?.focus();
+	}, [p]), /* @__PURE__ */ d("aside", {
+		id: "hs-sidebar-drawer",
+		className: e(i.sidebar, p && i.sidebarOpen, l),
+		"aria-label": n,
+		children: [
+			/* @__PURE__ */ u("button", {
+				ref: h,
+				type: "button",
+				className: i.close,
+				"aria-label": o,
+				onClick: m,
+				children: /* @__PURE__ */ u(_, {})
+			}),
+			t,
+			f ? /* @__PURE__ */ u(a, {}) : null
+		]
+	});
+}
+function p({ children: t, className: n }) {
+	return /* @__PURE__ */ u("div", {
+		className: e(i.header, n),
+		children: t
+	});
+}
+function m({ children: t, className: n }) {
+	return /* @__PURE__ */ u("div", {
+		className: e(i.body, n),
+		children: t
+	});
+}
+function h({ children: r, label: a, collapsible: s = !1, minimizeLabel: f = "Minimize", action: p, className: m }) {
+	let [h, _] = l(0), v = c(/* @__PURE__ */ new Set()), [y, b] = l(0), x = o((e, t) => {
+		let n = v.current;
+		t ? n.add(e) : n.delete(e), b(n.size);
+	}, []), S = s && p == null && y > 0, C = a != null || p != null || S;
+	return /* @__PURE__ */ u(n.Provider, {
+		value: {
+			collapseNonce: h,
+			reportOpen: x
+		},
+		children: /* @__PURE__ */ d("section", {
+			className: e(i.section, C && i.hasStickyHead, m),
+			children: [C ? /* @__PURE__ */ d("div", {
+				className: i.sectionHead,
+				children: [a == null ? null : /* @__PURE__ */ u("h3", {
+					className: i.sectionLabel,
+					children: a
+				}), p ?? (S ? /* @__PURE__ */ u(t, {
+					variant: "plain",
+					size: 100,
+					className: i.minimizeBtn,
+					iconLeft: /* @__PURE__ */ u(g, {}),
+					onClick: () => _((e) => e + 1),
+					children: f
+				}) : null)]
+			}) : null, r]
+		})
+	});
+}
+function g() {
+	return /* @__PURE__ */ d("svg", {
+		width: "14",
+		height: "14",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.25",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ u("rect", {
+			x: "2.5",
+			y: "2.5",
+			width: "11",
+			height: "11",
+			rx: "2"
+		}), /* @__PURE__ */ u("path", { d: "M5.5 8h5" })]
+	});
+}
+function _() {
+	return /* @__PURE__ */ u("svg", {
+		width: "18",
+		height: "18",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ u("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+//#endregion
+export { f as Sidebar, m as SidebarBody, p as SidebarHeader, h as SidebarSection };

package/dist/components/Sidebar/SidebarLayout.js

@@ -0,0 +1,95 @@
+"use client";
+import { t as e } from "../../clsx-BWCAbrjV.js";
+import { SidebarLayoutContext as t } from "./context.js";
+import { t as n } from "../../styles.module-Bd4HbnpA.js";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region lib/components/Sidebar/SidebarLayout.tsx
+function l({ children: l, defaultWidth: u = 320, minWidth: f = 230, maxWidth: p = 460, resizable: m = !0, storageKey: h, mobileTriggerLabel: g = "Menu", fill: _ = !0, className: v, style: y }) {
+	let [b, x] = o(u), [S, C] = o(!1), w = a(null), T = r((e) => {
+		let t = Math.min(Math.max(Math.round(e), f), p);
+		if (x(t), h) try {
+			localStorage.setItem(h, String(t));
+		} catch {}
+	}, [
+		f,
+		p,
+		h
+	]);
+	i(() => {
+		if (h) try {
+			let e = localStorage.getItem(h);
+			e && T(Number(e) || u);
+		} catch {}
+	}, []);
+	let E = r(() => {
+		C(!1), w.current?.focus();
+	}, []), D = r(() => C(!0), []);
+	return i(() => {
+		if (!S) return;
+		let e = (e) => {
+			e.key === "Escape" && E();
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [S, E]), /* @__PURE__ */ s(t.Provider, {
+		value: {
+			resizable: m,
+			width: b,
+			setWidth: T,
+			minWidth: f,
+			maxWidth: p,
+			mobileOpen: S,
+			openMobile: D,
+			closeMobile: E
+		},
+		children: /* @__PURE__ */ c("div", {
+			className: e(n.layout, _ && n.fill, v),
+			style: {
+				"--hs-sidebar-w": `${b}px`,
+				...y
+			},
+			children: [
+				/* @__PURE__ */ s("div", {
+					className: n.mobileBar,
+					children: /* @__PURE__ */ c("button", {
+						ref: w,
+						type: "button",
+						className: n.trigger,
+						"aria-expanded": S,
+						"aria-controls": "hs-sidebar-drawer",
+						onClick: D,
+						children: [/* @__PURE__ */ s(d, {}), g]
+					})
+				}),
+				l,
+				/* @__PURE__ */ s("div", {
+					className: e(n.backdrop, S && n.backdropOpen),
+					onClick: E,
+					"aria-hidden": "true"
+				})
+			]
+		})
+	});
+}
+function u({ children: t, className: r, ...i }) {
+	return /* @__PURE__ */ s("main", {
+		className: e(n.main, r),
+		...i,
+		children: t
+	});
+}
+function d() {
+	return /* @__PURE__ */ s("svg", {
+		width: "18",
+		height: "18",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ s("path", { d: "M3 6h18M3 12h18M3 18h18" })
+	});
+}
+//#endregion
+export { l as SidebarLayout, u as SidebarMain };

package/dist/components/Sidebar/SidebarResizer.js

@@ -0,0 +1,59 @@
+"use client";
+import { useSidebarLayout as e } from "./context.js";
+import { t } from "../../styles.module-Bd4HbnpA.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region lib/components/Sidebar/SidebarResizer.tsx
+function l() {
+	let { width: l, setWidth: u, minWidth: d, maxWidth: f } = e(), p = i(null), m = i(!1), [h, g] = a(!1), [_, v] = a(!1);
+	r(() => {
+		function e(e) {
+			if (!m.current || !p.current) return;
+			let t = p.current.parentElement;
+			if (!t) return;
+			let n = p.current.offsetWidth / 2;
+			u(e.clientX - t.getBoundingClientRect().left + n);
+		}
+		function t() {
+			m.current = !1, g(!1), document.body.style.userSelect = "";
+		}
+		return window.addEventListener("mousemove", e), window.addEventListener("mouseup", t), () => {
+			window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", t);
+		};
+	}, [u]);
+	let y = n(() => {
+		m.current = !0, g(!0), document.body.style.userSelect = "none";
+	}, []), b = _ || h;
+	return /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("div", {
+			className: t.hatchClip,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ s("div", { className: `${t.hatchInner}${b ? ` ${t.hatchHi}` : ""}${h ? ` ${t.hatchDrag}` : ""}` })
+		}),
+		/* @__PURE__ */ s("div", {
+			ref: p,
+			className: t.handle,
+			onMouseDown: y,
+			onPointerEnter: () => v(!0),
+			onPointerLeave: () => v(!1),
+			onFocus: () => v(!0),
+			onBlur: () => v(!1),
+			onKeyDown: (e) => {
+				(e.key === "ArrowLeft" || e.key === "ArrowRight") && (e.preventDefault(), u(l + (e.key === "ArrowLeft" ? -16 : 16)));
+			},
+			tabIndex: 0,
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-label": "Resize sidebar",
+			"aria-valuenow": l,
+			"aria-valuemin": d,
+			"aria-valuemax": f
+		}),
+		h ? /* @__PURE__ */ s("div", {
+			className: t.overlay,
+			"aria-hidden": "true"
+		}) : null
+	] });
+}
+//#endregion
+export { l as SidebarResizer };

package/dist/components/Sidebar/context.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+//#region lib/components/Sidebar/context.ts
+var n = e(null);
+function r() {
+	let e = t(n);
+	if (!e) throw Error("Sidebar components must be rendered within <SidebarLayout>");
+	return e;
+}
+function i() {
+	return t(n);
+}
+var a = e(null);
+function o() {
+	return t(a);
+}
+//#endregion
+export { n as SidebarLayoutContext, a as SidebarSectionContext, i as useOptionalSidebarLayout, o as useOptionalSidebarSection, r as useSidebarLayout };

package/dist/components/Sidebar/index.js

@@ -0,0 +1,8 @@
+import { useOptionalSidebarLayout as e, useSidebarLayout as t } from "./context.js";
+import { SidebarLayout as n, SidebarMain as r } from "./SidebarLayout.js";
+import { SidebarResizer as i } from "./SidebarResizer.js";
+import { Sidebar as a, SidebarBody as o, SidebarHeader as s, SidebarSection as c } from "./Sidebar.js";
+import { NavItem as l } from "./NavItem.js";
+import { NavGroup as u } from "./NavGroup.js";
+import { NavDisclosure as d } from "./NavDisclosure.js";
+export { d as NavDisclosure, u as NavGroup, l as NavItem, a as Sidebar, o as SidebarBody, s as SidebarHeader, n as SidebarLayout, r as SidebarMain, i as SidebarResizer, c as SidebarSection, e as useOptionalSidebarLayout, t as useSidebarLayout };