northline 0.1.0 → 0.2.0

package/README.md

@@ -119,6 +119,32 @@ theme change. If you need charts to follow the theme too, re-create the
 chart (or update its options) when `data-theme`/`prefers-color-scheme`
 changes.
 
+## Responsiveness
+
+One breakpoint, 640px (roughly phone-width), covers the patterns that
+actually needed it:
+
+- `ScoreCard`'s grid (`.scorecards`) drops from a fixed 4 columns to
+  `auto-fit` (min 150px) instead of squishing.
+- `Table`/`.nl-table-wrap` scrolls horizontally instead of clipping content.
+- `Navbar`'s `items` menu collapses behind a hamburger toggle instead of
+  wrapping/overflowing; `BottomNav` appears (it's `display: none` above the
+  breakpoint).
+- `ChartCard` drops its 320px `min-width` floor so it doesn't force page-level
+  horizontal scroll.
+- `Modal`/`Drawer` go full-bleed; `Pagination`/`SegmentedControl` wrap;
+  `Stepper` scrolls horizontally rather than overflowing.
+
+For the mobile primary-navigation pattern, pair `Canvas` + `Navbar` (brand +
+actions only, or omit `items` since `BottomNav` is the primary nav on
+phones) + `BottomNav`, rather than `Sidebar` (a persistent rail doesn't fit
+a phone viewport - it isn't auto-hidden for you, since some apps do want it
+on tablet-width screens; hide/show it yourself based on viewport if needed).
+
+Everything else - `Stack`/`Grid`/`Container` sizes, flex-wrapping button
+rows, etc - was already responsive by construction (flexbox/grid with
+sensible min-widths), not by a breakpoint override.
+
 ## Components
 
 | Component | Purpose |
@@ -191,7 +217,9 @@ Generic, non-dashboard-specific primitives (typography/layout, feedback, remaini
 | `CodeBlock` | Monospace code snippet frame with optional language tag + copy button |
 | `Kbd` | Keyboard-shortcut chip |
 | `Tree` | Nested expandable hierarchy (file trees, category trees) |
-| `Navbar` | App header bar: brand + arbitrary nav items/actions |
+| `Canvas` | Full-viewport app shell wrapper (background + flex column) - mount `Navbar`/routed content/`BottomNav` inside it |
+| `Navbar` | App header bar: brand, an optional `items` nav menu (collapses behind a hamburger under 640px), and arbitrary actions |
+| `BottomNav` | Fixed mobile bottom tab bar (icon + label), hidden above 640px - the mobile counterpart to `Navbar`'s menu/`Sidebar` |
 | `Sidebar` | Persistent side navigation rail, with a `collapsed` icon-only mode |
 | `ButtonGroup` | Visually merges adjacent `Button`s into one segmented-looking group |
 | `ColorPicker` | Preset swatch grid plus a native color input for anything else |

package/dist/components/BottomNav.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface BottomNavItem {
+    id: string;
+    label: ReactNode;
+    icon: ReactNode;
+    onClick?: () => void;
+}
+export interface BottomNavProps {
+    items: BottomNavItem[];
+    activeId?: string;
+}
+export default function BottomNav({ items, activeId }: BottomNavProps): import('react').JSX.Element;

package/dist/components/Canvas.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface CanvasProps {
+    children: ReactNode;
+    className?: string;
+    /** Escape hatch, e.g. to constrain height when embedding a Canvas demo inside another layout. */
+    style?: CSSProperties;
+}
+export default function Canvas({ children, className, style }: CanvasProps): import('react').JSX.Element;

package/dist/components/Icon.d.ts

@@ -1,4 +1,4 @@
-export type IconName = 'close' | 'check' | 'chevron-left' | 'chevron-right' | 'kebab' | 'drag-handle' | 'copy' | 'trash' | 'plus' | 'minus' | 'upload' | 'star' | 'info' | 'warning' | 'settings' | 'inbox' | 'search' | 'calendar' | 'eye' | 'eye-off';
+export type IconName = 'close' | 'check' | 'chevron-left' | 'chevron-right' | 'kebab' | 'drag-handle' | 'copy' | 'trash' | 'plus' | 'minus' | 'upload' | 'star' | 'info' | 'warning' | 'settings' | 'inbox' | 'search' | 'calendar' | 'eye' | 'eye-off' | 'menu' | 'home';
 export interface IconProps {
     name: IconName;
     size?: number;

package/dist/components/Navbar.d.ts

@@ -1,7 +1,14 @@
 import { ReactNode } from 'react';
+export interface NavbarItem {
+    id: string;
+    label: ReactNode;
+    onClick?: () => void;
+}
 export interface NavbarProps {
     brand?: ReactNode;
+    items?: NavbarItem[];
+    activeId?: string;
     children?: ReactNode;
     sticky?: boolean;
 }
-export default function Navbar({ brand, children, sticky }: NavbarProps): import('react').JSX.Element;
+export default function Navbar({ brand, items, activeId, children, sticky }: NavbarProps): import('react').JSX.Element;

package/dist/index.d.ts

@@ -61,7 +61,9 @@ export { default as AvatarGroup } from './components/AvatarGroup';
 export { default as CodeBlock } from './components/CodeBlock';
 export { default as Kbd } from './components/Kbd';
 export { default as Tree } from './components/Tree';
+export { default as Canvas } from './components/Canvas';
 export { default as Navbar } from './components/Navbar';
+export { default as BottomNav } from './components/BottomNav';
 export { default as Sidebar } from './components/Sidebar';
 export { default as ButtonGroup } from './components/ButtonGroup';
 export { default as ColorPicker } from './components/ColorPicker';

package/dist/index.js

@@ -208,7 +208,16 @@ var v = {
 		/* @__PURE__ */ t("path", { d: "M3 3l18 18" }),
 		/* @__PURE__ */ t("path", { d: "M10.6 5.2A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a15.6 15.6 0 0 1-3.4 4.3M6.6 6.6A15.7 15.7 0 0 0 2 12s3.5 7 10 7a10.4 10.4 0 0 0 3.4-.6" }),
 		/* @__PURE__ */ t("path", { d: "M9.9 9.9a3 3 0 0 0 4.2 4.2" })
-	] })
+	] }),
+	menu: /* @__PURE__ */ n(e, { children: [
+		/* @__PURE__ */ t("path", { d: "M4 6h16" }),
+		/* @__PURE__ */ t("path", { d: "M4 12h16" }),
+		/* @__PURE__ */ t("path", { d: "M4 18h16" })
+	] }),
+	home: /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("path", { d: "M4 11l8-7 8 7" }), /* @__PURE__ */ t("path", {
+		d: "M6 9.5V20a1 1 0 0 0 1 1h4v-6h2v6h4a1 1 0 0 0 1-1V9.5",
+		strokeLinejoin: "round"
+	})] })
 };
 function y({ name: e, size: n = 16, color: r = "currentColor", filled: i = !1 }) {
 	return /* @__PURE__ */ t("svg", {
@@ -2148,22 +2157,81 @@ function $e({ nodes: e, defaultExpandedIds: n = [], onSelect: r, selectedId: i }
 	});
 }
 //#endregion
+//#region src/components/Canvas.tsx
+function et({ children: e, className: n, style: r }) {
+	return /* @__PURE__ */ t("div", {
+		className: `nl-canvas${n ? ` ${n}` : ""}`,
+		style: r,
+		children: e
+	});
+}
+//#endregion
 //#region src/components/Navbar.tsx
-function et({ brand: e, children: r, sticky: i = !1 }) {
+function tt({ brand: e, items: r, activeId: i, children: a, sticky: o = !1 }) {
+	let [s, c] = d(!1);
 	return /* @__PURE__ */ n("header", {
-		className: `navbar${i ? " navbar--sticky" : ""}`,
-		children: [e && /* @__PURE__ */ t("div", {
-			className: "navbar__brand",
-			children: e
-		}), /* @__PURE__ */ t("div", {
-			className: "navbar__actions",
-			children: r
+		className: `navbar${o ? " navbar--sticky" : ""}`,
+		children: [/* @__PURE__ */ n("div", {
+			className: "navbar__row",
+			children: [
+				e && /* @__PURE__ */ t("div", {
+					className: "navbar__brand",
+					children: e
+				}),
+				r && r.length > 0 && /* @__PURE__ */ t("button", {
+					type: "button",
+					className: "navbar__menu-toggle",
+					"aria-label": s ? "Close menu" : "Open menu",
+					"aria-expanded": s,
+					onClick: () => c((e) => !e),
+					children: /* @__PURE__ */ t(y, {
+						name: s ? "close" : "menu",
+						size: 18
+					})
+				}),
+				/* @__PURE__ */ t("div", {
+					className: "navbar__actions",
+					children: a
+				})
+			]
+		}), r && r.length > 0 && /* @__PURE__ */ t("nav", {
+			className: `navbar__menu${s ? " navbar__menu--open" : ""}`,
+			"aria-label": "Primary",
+			children: r.map((e) => /* @__PURE__ */ t("button", {
+				type: "button",
+				className: `navbar__menu-item${e.id === i ? " navbar__menu-item--active" : ""}`,
+				onClick: () => {
+					c(!1), e.onClick?.();
+				},
+				children: e.label
+			}, e.id))
 		})]
 	});
 }
 //#endregion
+//#region src/components/BottomNav.tsx
+function nt({ items: e, activeId: r }) {
+	return /* @__PURE__ */ t("nav", {
+		className: "bottom-nav",
+		"aria-label": "Primary",
+		children: e.map((e) => /* @__PURE__ */ n("button", {
+			type: "button",
+			className: `bottom-nav__item${e.id === r ? " bottom-nav__item--active" : ""}`,
+			"aria-current": e.id === r ? "page" : void 0,
+			onClick: e.onClick,
+			children: [/* @__PURE__ */ t("span", {
+				className: "bottom-nav__icon",
+				children: e.icon
+			}), /* @__PURE__ */ t("span", {
+				className: "bottom-nav__label",
+				children: e.label
+			})]
+		}, e.id))
+	});
+}
+//#endregion
 //#region src/components/Sidebar.tsx
-function tt({ items: e, activeId: r, collapsed: i = !1, header: a }) {
+function rt({ items: e, activeId: r, collapsed: i = !1, header: a }) {
 	return /* @__PURE__ */ n("nav", {
 		className: `sidebar${i ? " sidebar--collapsed" : ""}`,
 		children: [a && /* @__PURE__ */ t("div", {
@@ -2189,7 +2257,7 @@ function tt({ items: e, activeId: r, collapsed: i = !1, header: a }) {
 }
 //#endregion
 //#region src/components/ButtonGroup.tsx
-function nt({ children: e }) {
+function it({ children: e }) {
 	return /* @__PURE__ */ t("div", {
 		className: "button-group",
 		children: e
@@ -2197,7 +2265,7 @@ function nt({ children: e }) {
 }
 //#endregion
 //#region src/components/ColorPicker.tsx
-var rt = [
+var at = [
 	"#8FB4F5",
 	"#7FD8C9",
 	"#C9A8F0",
@@ -2205,7 +2273,7 @@ var rt = [
 	"#F19A9A",
 	"#8FCB9E"
 ];
-function it({ value: e, onChange: r, swatches: i = rt, label: a = "Color" }) {
+function ot({ value: e, onChange: r, swatches: i = at, label: a = "Color" }) {
 	return /* @__PURE__ */ n("div", {
 		className: "color-picker",
 		role: "group",
@@ -2230,7 +2298,7 @@ function it({ value: e, onChange: r, swatches: i = rt, label: a = "Color" }) {
 }
 //#endregion
 //#region src/components/PasswordInput.tsx
-function at({ label: e, value: r, onChange: i, placeholder: a, disabled: o = !1, error: s = !1, hint: l, id: u, autoComplete: f = "current-password" }) {
+function st({ label: e, value: r, onChange: i, placeholder: a, disabled: o = !1, error: s = !1, hint: l, id: u, autoComplete: f = "current-password" }) {
 	let [p, m] = d(!1), h = c(), g = u ?? h;
 	return /* @__PURE__ */ n("div", {
 		className: `field${s ? " field--error" : ""}`,
@@ -2273,7 +2341,7 @@ function at({ label: e, value: r, onChange: i, placeholder: a, disabled: o = !1,
 }
 //#endregion
 //#region src/components/OTPInput.tsx
-function ot({ length: e = 6, value: n, onChange: r, disabled: i = !1, label: a = "Verification code" }) {
+function ct({ length: e = 6, value: n, onChange: r, disabled: i = !1, label: a = "Verification code" }) {
 	let o = u([]), s = Array.from({ length: e }, (e, t) => n[t] ?? ""), c = (t, n) => {
 		let i = s.slice();
 		i[t] = n, r(i.join("").slice(0, e));
@@ -2309,7 +2377,7 @@ function ot({ length: e = 6, value: n, onChange: r, disabled: i = !1, label: a =
 }
 //#endregion
 //#region src/components/LoadingOverlay.tsx
-function st({ active: e, children: r, label: i = "Loading" }) {
+function lt({ active: e, children: r, label: i = "Loading" }) {
 	return /* @__PURE__ */ n("div", {
 		className: "loading-overlay",
 		children: [r, e && /* @__PURE__ */ t("div", {
@@ -2322,7 +2390,7 @@ function st({ active: e, children: r, label: i = "Loading" }) {
 }
 //#endregion
 //#region src/components/ErrorBoundary.tsx
-var ct = class extends r {
+var ut = class extends r {
 	state = { error: null };
 	static getDerivedStateFromError(e) {
 		return { error: e };
@@ -2353,7 +2421,7 @@ var ct = class extends r {
 };
 //#endregion
 //#region src/components/Carousel.tsx
-function lt({ items: r, autoPlay: i = !1, interval: a = 4e3 }) {
+function dt({ items: r, autoPlay: i = !1, interval: a = 4e3 }) {
 	let [o, c] = d(0);
 	if (s(() => {
 		if (!i || r.length <= 1) return;
@@ -2407,12 +2475,12 @@ function lt({ items: r, autoPlay: i = !1, interval: a = 4e3 }) {
 }
 //#endregion
 //#region src/components/Portal.tsx
-function ut({ children: e }) {
+function ft({ children: e }) {
 	return typeof document > "u" ? null : f(e, document.body);
 }
 //#endregion
 //#region src/hooks/useClickOutside.ts
-function dt(e, t, n = !0) {
+function pt(e, t, n = !0) {
 	s(() => {
 		if (!n) return;
 		let r = (n) => {
@@ -2431,7 +2499,7 @@ function dt(e, t, n = !0) {
 }
 //#endregion
 //#region src/chartTheme.ts
-var ft = [
+var mt = [
 	"#8FB4F5",
 	"#7FD8C9",
 	"#C9A8F0",
@@ -2468,7 +2536,7 @@ function Z() {
 		}
 	};
 }
-var pt = Z().axisColor, mt = Z().gridColor, ht = {
+var ht = Z().axisColor, gt = Z().gridColor, _t = {
 	...Z().tooltip,
 	borderWidth: 1,
 	padding: 8,
@@ -2507,7 +2575,7 @@ var $ = {
 		family: "'IBM Plex Mono', monospace"
 	}
 };
-function gt(e) {
+function vt(e) {
 	if (typeof window > "u") return () => {};
 	let t = window.matchMedia("(prefers-color-scheme: dark)");
 	t.addEventListener("change", e);
@@ -2519,7 +2587,7 @@ function gt(e) {
 		t.removeEventListener("change", e), n.disconnect();
 	};
 }
-function _t(e, { rotateXTicks: t = !1, maxTicks: n, longLabels: r = !1 } = {}) {
+function yt(e, { rotateXTicks: t = !1, maxTicks: n, longLabels: r = !1 } = {}) {
 	let { gridColor: i, axisColor: a } = Z();
 	return {
 		responsive: !0,
@@ -2580,7 +2648,7 @@ function _t(e, { rotateXTicks: t = !1, maxTicks: n, longLabels: r = !1 } = {}) {
 		}
 	};
 }
-function vt({ cutout: e = "65%", showLegend: t = !0 } = {}) {
+function bt({ cutout: e = "65%", showLegend: t = !0 } = {}) {
 	return {
 		responsive: !0,
 		maintainAspectRatio: !1,
@@ -2598,7 +2666,7 @@ function vt({ cutout: e = "65%", showLegend: t = !0 } = {}) {
 		}
 	};
 }
-function yt({ maxTicks: e, beginAtZero: t = !0 } = {}) {
+function xt({ maxTicks: e, beginAtZero: t = !0 } = {}) {
 	let { gridColor: n, axisColor: r } = Z();
 	return {
 		indexAxis: "y",
@@ -2632,7 +2700,7 @@ function yt({ maxTicks: e, beginAtZero: t = !0 } = {}) {
 		}
 	};
 }
-function bt({ maxTicks: e, beginAtZero: t = !0, unit: n = "" } = {}) {
+function St({ maxTicks: e, beginAtZero: t = !0, unit: n = "" } = {}) {
 	let { gridColor: r, axisColor: i } = Z();
 	return {
 		responsive: !0,
@@ -2671,7 +2739,7 @@ function bt({ maxTicks: e, beginAtZero: t = !0, unit: n = "" } = {}) {
 		}
 	};
 }
-function xt({ maxTicks: e, rotateXTicks: t = !1 } = {}) {
+function Ct({ maxTicks: e, rotateXTicks: t = !1 } = {}) {
 	let { gridColor: n, axisColor: r } = Z();
 	return {
 		responsive: !0,
@@ -2718,7 +2786,7 @@ function xt({ maxTicks: e, rotateXTicks: t = !1 } = {}) {
 		}
 	};
 }
-function St() {
+function wt() {
 	let { gridColor: e, axisColor: t } = Z();
 	return {
 		responsive: !0,
@@ -2749,7 +2817,7 @@ function St() {
 		} }
 	};
 }
-function Ct(e, t, n) {
+function Tt(e, t, n) {
 	return e.map((r, i) => {
 		let a = Math.max(0, i - n + 1), o = e.slice(a, i + 1).filter((e) => e[t] != null);
 		if (!o.length) return null;
@@ -2759,11 +2827,11 @@ function Ct(e, t, n) {
 }
 //#endregion
 //#region src/chartSetup.ts
-var wt = !1;
-function Tt() {
-	wt || (wt = !0, p.register(...m, h), p.defaults.set("plugins.datalabels", { display: !1 }));
+var Et = !1;
+function Dt() {
+	Et || (Et = !0, p.register(...m, h), p.defaults.set("plugins.datalabels", { display: !1 }));
 }
 //#endregion
-export { pt as AXIS_COLOR, Y as AXIS_TICK_FONT, me as Accordion, K as Alert, H as Avatar, Xe as AvatarGroup, j as Badge, se as Breadcrumbs, ve as BulletChart, A as Button, nt as ButtonGroup, fe as Card, lt as Carousel, x as ChartCard, ge as ChartLegend, z as Checkbox, Ze as CodeBlock, it as ColorPicker, ze as Combobox, ke as Container, W as CopyButton, Ke as DatePicker, O as DateRangePicker, Ee as DescriptionList, Ne as Divider, xe as Drawer, pe as EmptyState, ct as ErrorBoundary, Re as Fieldset, Ve as FileUpload, mt as GRID_COLOR, le as Gauge, Me as Grid, je as HStack, Oe as Heading, y as Icon, Ie as IconButton, b as InfoTooltip, M as Input, Qe as Kbd, Pe as Link, Je as List, st as LoadingOverlay, ie as Menu, _e as MiniBar, P as Modal, et as Navbar, Be as NumberStepper, ot as OTPInput, ft as PALETTE, oe as Pagination, at as PasswordInput, Se as Popover, ut as Portal, ce as ProgressBar, B as Radio, te as RadioGroup, qe as Rating, _ as ScoreCard, we as SearchInput, he as SegmentedControl, S as Select, tt as Sidebar, re as Skeleton, ye as Slider, g as Sparkline, U as Spinner, G as Stack, Te as StatusDot, be as Stepper, ee as Switch, ht as TOOLTIP_OPTS, N as Table, k as Tabs, Ce as TagInput, De as Text, ne as Textarea, Ye as Timeline, L as ToastProvider, Le as Tooltip, $e as Tree, Ae as VStack, bt as areaOptions, vt as donutOptions, _t as dualAxisOptions, Z as getChartColors, yt as horizontalBarOptions, Tt as installCharts, gt as onThemeChange, St as radarOptions, Ct as rollingAverage, xt as stackedBarOptions, dt as useClickOutside, R as useToast };
+export { ht as AXIS_COLOR, Y as AXIS_TICK_FONT, me as Accordion, K as Alert, H as Avatar, Xe as AvatarGroup, j as Badge, nt as BottomNav, se as Breadcrumbs, ve as BulletChart, A as Button, it as ButtonGroup, et as Canvas, fe as Card, dt as Carousel, x as ChartCard, ge as ChartLegend, z as Checkbox, Ze as CodeBlock, ot as ColorPicker, ze as Combobox, ke as Container, W as CopyButton, Ke as DatePicker, O as DateRangePicker, Ee as DescriptionList, Ne as Divider, xe as Drawer, pe as EmptyState, ut as ErrorBoundary, Re as Fieldset, Ve as FileUpload, gt as GRID_COLOR, le as Gauge, Me as Grid, je as HStack, Oe as Heading, y as Icon, Ie as IconButton, b as InfoTooltip, M as Input, Qe as Kbd, Pe as Link, Je as List, lt as LoadingOverlay, ie as Menu, _e as MiniBar, P as Modal, tt as Navbar, Be as NumberStepper, ct as OTPInput, mt as PALETTE, oe as Pagination, st as PasswordInput, Se as Popover, ft as Portal, ce as ProgressBar, B as Radio, te as RadioGroup, qe as Rating, _ as ScoreCard, we as SearchInput, he as SegmentedControl, S as Select, rt as Sidebar, re as Skeleton, ye as Slider, g as Sparkline, U as Spinner, G as Stack, Te as StatusDot, be as Stepper, ee as Switch, _t as TOOLTIP_OPTS, N as Table, k as Tabs, Ce as TagInput, De as Text, ne as Textarea, Ye as Timeline, L as ToastProvider, Le as Tooltip, $e as Tree, Ae as VStack, St as areaOptions, bt as donutOptions, yt as dualAxisOptions, Z as getChartColors, xt as horizontalBarOptions, Dt as installCharts, vt as onThemeChange, wt as radarOptions, Tt as rollingAverage, Ct as stackedBarOptions, pt as useClickOutside, R as useToast };
 
 //# sourceMappingURL=index.js.map