@ponti-studios/ui 2.0.1 → 3.0.0

package/dist/components/forms/stepper.js

@@ -0,0 +1,41 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../primitives/button.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Minus as i, Plus as a } from "lucide-react";
+//#region src/components/forms/stepper.tsx
+function o({ value: o, min: s = 0, max: c = 100, step: l = 1, format: u, onChange: d, className: f, disabled: p, increaseLabel: m = "Increase", decreaseLabel: h = "Decrease" }) {
+	let g = o <= s, _ = o >= c;
+	return /* @__PURE__ */ r("div", {
+		className: e("border-input bg-muted flex items-center rounded-lg border", f),
+		children: [
+			/* @__PURE__ */ n(t, {
+				type: "button",
+				variant: "ghost",
+				onClick: () => d(Math.max(s, o - l)),
+				disabled: p || g,
+				className: "text-muted-foreground rounded-none rounded-l-lg border-r",
+				"aria-label": h,
+				children: /* @__PURE__ */ n(i, { className: "size-3.5" })
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "flex min-w-[3ch] flex-1 items-center justify-center px-3",
+				children: /* @__PURE__ */ n("span", {
+					className: "text-foreground text-sm font-semibold tabular-nums",
+					children: u ? u(o) : o
+				})
+			}),
+			/* @__PURE__ */ n(t, {
+				type: "button",
+				variant: "ghost",
+				onClick: () => d(Math.min(c, o + l)),
+				disabled: p || _,
+				className: "text-muted-foreground rounded-none rounded-r-lg border-l",
+				"aria-label": m,
+				children: /* @__PURE__ */ n(a, { className: "size-3.5" })
+			})
+		]
+	});
+}
+//#endregion
+export { o as Stepper };

package/dist/components/forms/switch.d.ts

@@ -0,0 +1,6 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import * as React from "react";
+declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+export { Switch };

package/dist/components/forms/switch.js

@@ -0,0 +1,21 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Switch as n } from "@base-ui/react/switch";
+//#region src/components/forms/switch.tsx
+function r({ className: r, size: i = "default", ...a }) {
+	return /* @__PURE__ */ t(n.Root, {
+		"data-slot": "switch",
+		"data-size": i,
+		className: e("peer inline-flex shrink-0 items-center rounded-full border border-transparent p-px", "data-checked:bg-primary data-unchecked:bg-input data-checked:justify-end data-unchecked:justify-start", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", i === "default" ? "h-[1.15rem] w-8" : "h-3.5 w-6", r),
+		...a,
+		children: /* @__PURE__ */ t(n.Thumb, {
+			"data-slot": "switch-thumb",
+			"data-size": i,
+			className: e("pointer-events-none block rounded-full bg-background shadow-sm ring-1 ring-border/5 transition-all", i === "default" ? "size-4" : "size-3")
+		})
+	});
+}
+//#endregion
+export { r as Switch };

package/dist/components/forms/text-field.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { TextFieldBaseProps, TextFieldType } from "./text-field.types";
+interface TextFieldProps extends Omit<React.ComponentProps<"input">, "type">, TextFieldBaseProps {
+    type?: TextFieldType | undefined;
+}
+/**
+ * TextField — composed input with label, helper text, and error state.
+ * Replaces raw `<input>` + `<label>` + error span patterns in feature code.
+ *
+ * @example
+ * <TextField label="Email" type="email" error={errors.email?.message} />
+ * <TextField label="Search" type="search" helpText="Press Enter to search" />
+ */
+declare function TextField({ id, label, helpText, error, className, disabled, type, ...inputProps }: TextFieldProps): React.JSX.Element;
+export { TextField, type TextFieldProps };

package/dist/components/forms/text-field.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Input as t } from "./input.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/forms/text-field.tsx
+function a({ id: a, label: o, helpText: s, error: c, className: l, disabled: u, type: d = "text", ...f }) {
+	let p = n.useId(), m = a ?? p, h = `${m}-description`, g = `${m}-error`;
+	return !o && !s && !c ? /* @__PURE__ */ r(t, {
+		id: m,
+		className: l,
+		disabled: u,
+		type: d,
+		...f
+	}) : /* @__PURE__ */ i("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			o && /* @__PURE__ */ r("label", {
+				htmlFor: m,
+				className: e("text-foreground text-sm font-medium", f.required && "after:text-destructive-text after:ml-0.5 after:content-['*']"),
+				children: o
+			}),
+			/* @__PURE__ */ r(t, {
+				id: m,
+				className: l,
+				disabled: u,
+				type: d,
+				"aria-describedby": c ? g : s ? h : void 0,
+				"aria-invalid": c ? !0 : void 0,
+				...f
+			}),
+			c ? /* @__PURE__ */ r("p", {
+				id: g,
+				role: "alert",
+				className: "text-destructive-text text-sm",
+				children: c
+			}) : s ? /* @__PURE__ */ r("p", {
+				id: h,
+				className: "text-muted-foreground text-sm",
+				children: s
+			}) : null
+		]
+	});
+}
+//#endregion
+export { a as TextField };

package/dist/components/forms/text-field.types.d.ts

@@ -0,0 +1,8 @@
+export type TextFieldType = "text" | "email" | "password" | "search";
+export interface TextFieldBaseProps {
+    disabled?: boolean | undefined;
+    error?: string | undefined;
+    helpText?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+}

package/dist/components/forms/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };

package/dist/components/forms/textarea.js

@@ -0,0 +1,14 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/forms/textarea.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("textarea", {
+		"data-slot": "textarea",
+		className: e("border-input flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base transition-colors md:text-sm", "placeholder:text-muted-foreground", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:ring-destructive/20 aria-invalid:border-destructive", n),
+		...r
+	});
+}
+//#endregion
+export { n as Textarea };

package/dist/components/layout/index.js

@@ -0,0 +1,5 @@
+import { ParticleBackground as e } from "./particle-background.js";
+import { ScrollArea as t } from "./scroll-area.js";
+import { SectionIntro as n } from "./section-intro.js";
+import { SurfacePanel as r } from "./surface-panel.js";
+export { e as ParticleBackground, t as ScrollArea, n as SectionIntro, r as SurfacePanel };

package/dist/components/layout/particle-background.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface ParticleBackgroundPalette {
+    particle: string;
+    link: string;
+}
+export interface ParticleBackgroundProps extends React.ComponentProps<"div"> {
+    enabled?: boolean;
+    interactive?: boolean;
+    particleCount?: number;
+    particleDensity?: number;
+    maxLinkDistance?: number;
+    attractRadius?: number;
+    attractStrength?: number;
+    velocity?: number;
+    showGradient?: boolean;
+    palette?: ParticleBackgroundPalette;
+}
+/** Animated canvas background of drifting, linked particles. Skips rendering under `prefers-reduced-motion`. */
+export declare function ParticleBackground({ className, enabled, interactive, particleCount, particleDensity, maxLinkDistance, attractRadius, attractStrength, velocity, showGradient: _showGradient, palette, ...props }: ParticleBackgroundProps): React.JSX.Element | null;

package/dist/components/layout/particle-background.js

@@ -0,0 +1,171 @@
+"use client";
+import { useMediaQuery as e } from "../../hooks/use-media-query.js";
+import { cn as t } from "../../lib/utils.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/layout/particle-background.tsx
+var i = 320, a = 2800, o = 90, s = .003, c = 150, l = .06, u = .015, d = 2e-4, f = 8e-4, p = .2, m = {
+	particle: "15,23,42",
+	link: "15,23,42"
+};
+function h(e, t) {
+	return typeof window > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
+}
+function g(e) {
+	if (e.startsWith("#")) {
+		let t = e.slice(1);
+		t.length === 3 && (t = t.split("").map((e) => e + e).join(""));
+		let n = Number.parseInt(t, 16);
+		return `${n >> 16 & 255},${n >> 8 & 255},${n & 255}`;
+	}
+	let t = e.match(/rgba?\(([^)]+)\)/);
+	return t ? t[1].split(",").slice(0, 3).map((e) => e.trim()).join(",") : m.particle;
+}
+function _() {
+	let [e, t] = n.useState(m);
+	return n.useEffect(() => {
+		let e = () => {
+			let e = g(h("--color-primary", "#0969da")), n = g(h("--color-foreground", "#25292e"));
+			t({
+				particle: e,
+				link: n
+			});
+		};
+		e();
+		let n = window.matchMedia("(prefers-color-scheme: dark)");
+		return n.addEventListener("change", e), () => {
+			n.removeEventListener("change", e);
+		};
+	}, []), e;
+}
+function v() {
+	let [e, t] = n.useState("light");
+	return n.useEffect(() => {
+		let e = window.matchMedia("(prefers-color-scheme: dark)"), n = () => t(e.matches ? "dark" : "light");
+		return n(), e.addEventListener("change", n), () => {
+			e.removeEventListener("change", n);
+		};
+	}, []), e;
+}
+function y({ className: m, enabled: h = !0, interactive: g = !0, particleCount: y, particleDensity: b = a, maxLinkDistance: x = o, attractRadius: S = c, attractStrength: C = s, velocity: w = l, showGradient: T = !0, palette: E, ...D }) {
+	let O = e("(prefers-reduced-motion: reduce)"), k = n.useRef(null), A = n.useRef({
+		x: -9999,
+		y: -9999
+	}), j = n.useRef([]), M = n.useRef(0), N = n.useRef(typeof window > "u" ? 0 : window.scrollY), P = v(), F = _(), I = E ?? F;
+	return n.useEffect(() => {
+		if (O || !h) return;
+		let e = k.current;
+		if (!e) return;
+		let t = e.getContext("2d");
+		if (!t) return;
+		let n = e, r = t;
+		function a() {
+			let e = n.getBoundingClientRect(), t = window.devicePixelRatio || 1;
+			n.width = Math.max(1, Math.round(e.width * t)), n.height = Math.max(1, Math.round(e.height * t)), r.setTransform(t, 0, 0, t, 0, 0);
+			let a = y ?? Math.max(80, Math.min(i, Math.round(e.width * e.height / b)));
+			j.current = Array.from({ length: a }, () => {
+				let t = Math.random();
+				return {
+					x: Math.random() * e.width,
+					y: Math.random() * e.height,
+					vx: (Math.random() - .5) * w * (.4 + t * .8),
+					vy: (Math.random() - .5) * w * (.4 + t * .8),
+					opacity: p * (.5 + t * .5),
+					depth: t,
+					twinklePhase: Math.random() * Math.PI * 2,
+					twinkleSpeed: d + Math.random() * (f - d)
+				};
+			});
+		}
+		let o = !1, s = !0, c = !document.hidden, l = [];
+		function m(e) {
+			let t = n.clientWidth, i = n.clientHeight;
+			r.clearRect(0, 0, t, i), r.lineCap = "round";
+			let a = j.current, s = N.current * u;
+			for (let n = 0; n < a.length; n++) {
+				let o = a[n], c = A.current.x - o.x, u = A.current.y - o.y, d = Math.sqrt(c * c + u * u);
+				if (g && d < S) {
+					let e = (1 - d / S) * C;
+					o.vx += c * e, o.vy += u * e;
+				}
+				o.vx *= .98, o.vy *= .98, o.x += o.vx, o.y += o.vy, o.x < 0 && (o.x = t), o.x > t && (o.x = 0), o.y < 0 && (o.y = i), o.y > i && (o.y = 0);
+				let f = ((o.y + s * o.depth) % i + i) % i;
+				l[n] = {
+					x: o.x,
+					y: f
+				};
+				let p = .6 + .4 * Math.sin(e * o.twinkleSpeed + o.twinklePhase), m = .6 + o.depth * 1.4;
+				r.beginPath(), r.arc(o.x, f, m, 0, Math.PI * 2), r.fillStyle = `rgba(${I.particle},${o.opacity * p})`, r.fill();
+				for (let e = n + 1; e < a.length; e++) {
+					let t = a[e], n = l[e] ?? {
+						x: t.x,
+						y: t.y
+					}, i = o.x - t.x, s = f - n.y, c = Math.sqrt(i * i + s * s);
+					if (c < x) {
+						let e = (o.depth + t.depth) / 2, i = (1 - c / x) * (P === "dark" ? .015 : .01) * e;
+						r.beginPath(), r.moveTo(o.x, f), r.lineTo(n.x, n.y), r.strokeStyle = `rgba(${I.link},${i})`, r.lineWidth = .5, r.stroke();
+					}
+				}
+			}
+			o && (M.current = requestAnimationFrame(m));
+		}
+		function _() {
+			let e = s && c;
+			e && !o ? (o = !0, M.current = requestAnimationFrame(m)) : !e && o && (o = !1, cancelAnimationFrame(M.current));
+		}
+		function v() {
+			a(), o || m(performance.now());
+		}
+		let T = new ResizeObserver(v);
+		T.observe(n), a(), m(performance.now()), _();
+		let E = (e) => {
+			let t = n.getBoundingClientRect();
+			A.current = {
+				x: e.clientX - t.left,
+				y: e.clientY - t.top
+			};
+		}, D = () => {
+			A.current = {
+				x: -9999,
+				y: -9999
+			};
+		};
+		g && (n.addEventListener("mousemove", E), n.addEventListener("mouseleave", D), document.addEventListener("mousemove", E));
+		let F = () => {
+			N.current = window.scrollY;
+		};
+		window.addEventListener("scroll", F, { passive: !0 });
+		let L = new IntersectionObserver(([e]) => {
+			s = e?.isIntersecting ?? !0, _();
+		}, { threshold: 0 });
+		L.observe(n);
+		let R = () => {
+			c = !document.hidden, _();
+		};
+		return document.addEventListener("visibilitychange", R), () => {
+			o = !1, cancelAnimationFrame(M.current), T.disconnect(), L.disconnect(), document.removeEventListener("mousemove", E), document.removeEventListener("visibilitychange", R), n.removeEventListener("mousemove", E), n.removeEventListener("mouseleave", D), window.removeEventListener("scroll", F);
+		};
+	}, [
+		S,
+		C,
+		h,
+		g,
+		x,
+		I,
+		y,
+		b,
+		O,
+		P,
+		w
+	]), !h || O ? null : /* @__PURE__ */ r("div", {
+		className: t("pointer-events-none absolute inset-0 overflow-hidden", m),
+		"aria-hidden": "true",
+		...D,
+		children: /* @__PURE__ */ r("canvas", {
+			ref: k,
+			className: "absolute inset-0 h-full w-full"
+		})
+	});
+}
+//#endregion
+export { y as ParticleBackground };

package/dist/components/layout/scroll-area.d.ts

@@ -0,0 +1,9 @@
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import * as React from "react";
+interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
+    orientation?: "horizontal" | "vertical";
+    snap?: "start" | "center" | "none";
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea };
+export type { ScrollAreaProps };

package/dist/components/layout/scroll-area.js

@@ -0,0 +1,35 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { ScrollArea as i } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area.tsx
+var a = {
+	start: "snap-start",
+	center: "snap-center",
+	none: void 0
+}, o = e("flex touch-none p-0.5 opacity-0 transition-opacity duration-150 ease-out", "data-[hovering]:opacity-100 data-[scrolling]:opacity-100", "data-[orientation=vertical]:w-2.5", "data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col"), s = t.forwardRef(({ className: s, children: c, orientation: l = "horizontal", snap: u = "none", ...d }, f) => /* @__PURE__ */ r(i.Root, {
+	ref: f,
+	className: e("relative flex overflow-hidden", l === "horizontal" ? "flex-row" : "flex-col", s),
+	...d,
+	children: [
+		/* @__PURE__ */ n(i.Viewport, {
+			className: e("scrollbar-hide flex overflow-auto", l === "horizontal" ? "min-w-0 flex-1 flex-row" : "min-h-0 flex-1 flex-col", u !== "none" && (l === "horizontal" ? "snap-x" : "snap-y"), u !== "none" && "snap-mandatory"),
+			children: t.Children.map(c, (n) => t.isValidElement(n) ? t.cloneElement(n, { className: e(a[u], n.props.className) }) : n)
+		}),
+		/* @__PURE__ */ n(i.Scrollbar, {
+			orientation: "horizontal",
+			className: o,
+			children: /* @__PURE__ */ n(i.Thumb, { className: "bg-foreground/40 hover:bg-foreground/60 relative flex-1 rounded-full transition-colors duration-150 ease" })
+		}),
+		/* @__PURE__ */ n(i.Scrollbar, {
+			orientation: "vertical",
+			className: o,
+			children: /* @__PURE__ */ n(i.Thumb, { className: "bg-foreground/40 hover:bg-foreground/60 relative flex-1 rounded-full transition-colors duration-150 ease" })
+		}),
+		/* @__PURE__ */ n(i.Corner, {})
+	]
+}));
+s.displayName = "ScrollArea";
+//#endregion
+export { s as ScrollArea };

package/dist/components/layout/section-intro.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export interface SectionIntroProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+}
+/**
+ * Page-level heading composition: eyebrow label, title, description, and an
+ * optional trailing actions slot.
+ */
+export declare function SectionIntro({ eyebrow, title, description, actions }: SectionIntroProps): import("react").JSX.Element;

package/dist/components/layout/section-intro.js

@@ -0,0 +1,28 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/layout/section-intro.tsx
+function n({ eyebrow: n, title: r, description: i, actions: a }) {
+	return /* @__PURE__ */ t("div", {
+		className: "flex items-start justify-between gap-6",
+		children: [/* @__PURE__ */ t("div", {
+			className: "min-w-0 flex-1",
+			children: [n ? /* @__PURE__ */ e("div", {
+				className: "text-muted-foreground mb-3 text-[11px] font-medium tracking-[0.18em] uppercase",
+				children: n
+			}) : null, /* @__PURE__ */ t("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ e("h1", {
+					className: "text-2xl text-foreground font-semibold tracking-tight",
+					children: r
+				}), i ? /* @__PURE__ */ e("p", {
+					className: "text-muted-foreground text-sm",
+					children: i
+				}) : null]
+			})]
+		}), a ? /* @__PURE__ */ e("div", {
+			className: "shrink-0",
+			children: a
+		}) : null]
+	});
+}
+//#endregion
+export { n as SectionIntro };

package/dist/components/layout/surface-panel.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+type SurfacePanelProps<T extends ElementType = "div"> = {
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, "as">;
+/** Rounded, bordered surface panel — a generic content container. */
+export declare function SurfacePanel<T extends ElementType = "div">({ as, className, ...props }: SurfacePanelProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/layout/surface-panel.js

@@ -0,0 +1,11 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/layout/surface-panel.tsx
+function n({ as: n, className: r, ...i }) {
+	return /* @__PURE__ */ t(n ?? "div", {
+		className: e("border-border bg-card rounded-3xl border p-5", r),
+		...i
+	});
+}
+//#endregion
+export { n as SurfacePanel };

package/dist/components/navigation/app-navigation.d.ts

@@ -0,0 +1,67 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import * as React from "react";
+/** @internal Undocumented — not part of the public API surface. */
+type NavigationVariant = "nokia";
+export interface NavigationRootProps {
+    children: ReactNode;
+    ariaLabel?: string;
+    className?: string;
+    /**
+     * @internal Undocumented mobile-Sheet skin, not part of the public API
+     * (no README/Storybook entry). Opt in at your own risk.
+     */
+    variant?: NavigationVariant;
+}
+/**
+ * Sticky nav shell. Compose it with `Navigation.Brand`, `Navigation.List`
+ * (containing `Navigation.Item`s), and any other content — a CTA `Button`,
+ * a search input, a notification bell — as plain children. `Navigation`
+ * only owns the responsive chrome: `Navigation.Brand` stays visible at
+ * every width, everything else collapses into a Sheet-based mobile menu
+ * below `sm`, reusing the exact elements you composed (not a parallel data
+ * shape) so `Navigation.Item`'s active state and `asChild` composition
+ * behave identically in both places.
+ */
+declare function NavigationRoot({ children, ariaLabel, className, variant, }: NavigationRootProps): React.JSX.Element;
+export interface NavigationBrandProps {
+    children: ReactNode;
+    className?: string;
+}
+/** Always visible, at every viewport width — compose your own link/logo markup directly. */
+declare function NavigationBrand({ children, className }: NavigationBrandProps): React.JSX.Element;
+export interface NavigationListProps {
+    children: ReactNode;
+    className?: string;
+}
+/** Semantic `<ul>` of `Navigation.Item`s. Lays out horizontally on desktop, stacks inside the mobile Sheet. */
+declare function NavigationList({ children, className }: NavigationListProps): React.JSX.Element;
+interface NavigationItemOwnProps {
+    active?: boolean;
+    /** Apply the item styling to a single child (e.g. your router's `Link`) instead of rendering an `<a>`. */
+    asChild?: boolean;
+}
+export type NavigationItemProps = NavigationItemOwnProps & Omit<ComponentPropsWithoutRef<"a">, keyof NavigationItemOwnProps>;
+/** A single nav link, wrapped in `<li>`. Auto-closes the mobile Sheet on click when rendered there. */
+declare function NavigationItem({ active, asChild, className, children, ...props }: NavigationItemProps): React.JSX.Element;
+export interface NavigationActionProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Layout wrapper for a CTA, avatar menu, theme toggle, etc. — bring your
+ * own `Button`, no dedicated CTA component needed. Content here does not
+ * auto-close the mobile Sheet on click (it may hold more than one
+ * element, or non-navigational controls) — use `Navigation.Item` instead
+ * for a link that should close the menu when tapped.
+ */
+declare function NavigationAction({ children, className }: NavigationActionProps): React.JSX.Element;
+type NavigationComponent = typeof NavigationRoot & {
+    Brand: typeof NavigationBrand;
+    List: typeof NavigationList;
+    Item: typeof NavigationItem;
+    Action: typeof NavigationAction;
+};
+export declare const Navigation: NavigationComponent;
+/** @deprecated Use `Navigation` instead. */
+export declare const AppNavigation: NavigationComponent;
+export {};

package/dist/components/navigation/app-navigation.js

@@ -0,0 +1,106 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../primitives/button.js";
+import { Sheet as n, SheetClose as r, SheetContent as i, SheetTitle as a, SheetTrigger as o } from "../overlays/sheet.js";
+import { Slot as s } from "../../lib/slot.js";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Menu as d } from "lucide-react";
+//#region src/components/navigation/app-navigation.tsx
+var f = c.createContext({ isMobile: !1 }), p = "nokia-screen rounded-none border-[6px] border-nokia-bezel bg-nokia-screen p-4 font-nokia text-nokia-ink shadow-[0_0_0_3px_var(--color-nokia-screen-deep),0_10px_30px_-6px_rgba(0,0,0,0.65)]", m = "text-nokia-ink hover:bg-nokia-ink hover:text-nokia-screen rounded-none border-2 border-nokia-ink", h = "!grid grid-cols-3 gap-3", g = "!h-auto !max-h-none w-full flex-col justify-center gap-1 rounded-none border-2 border-nokia-ink/40 px-2 py-3 text-center font-nokia text-base tracking-widest uppercase hover:bg-transparent active:bg-nokia-ink active:text-nokia-screen data-[active]:border-nokia-ink data-[active]:bg-nokia-ink data-[active]:text-nokia-screen";
+function _({ children: r, ariaLabel: s = "Primary navigation", className: h, variant: g }) {
+	let [_, y] = c.useState(!1), b = g === "nokia", x = c.Children.toArray(r), S = x.find((e) => c.isValidElement(e) && e.type === v), C = x.filter((e) => e !== S);
+	return /* @__PURE__ */ l("header", {
+		className: "bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 flex w-full justify-center border-b px-4 backdrop-blur",
+		children: /* @__PURE__ */ u("nav", {
+			className: e("flex min-h-14 w-full max-w-7xl items-center justify-between gap-6", h),
+			"aria-label": s,
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "flex min-w-0 items-center",
+					children: S
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "ml-auto hidden min-w-0 items-center gap-6 sm:flex",
+					children: C
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "ml-auto flex items-center sm:hidden",
+					children: /* @__PURE__ */ u(n, {
+						open: _,
+						onOpenChange: y,
+						children: [/* @__PURE__ */ l(o, {
+							asChild: !0,
+							children: /* @__PURE__ */ l(t, {
+								variant: "outline",
+								size: "icon",
+								"aria-label": _ ? "Close menu" : "Open menu",
+								children: /* @__PURE__ */ l(d, {
+									className: "size-4",
+									"aria-hidden": "true"
+								})
+							})
+						}), /* @__PURE__ */ u(i, {
+							className: b ? p : void 0,
+							closeClassName: b ? m : void 0,
+							children: [/* @__PURE__ */ l(a, {
+								className: "sr-only",
+								children: "Navigation menu"
+							}), /* @__PURE__ */ l("div", {
+								className: "mt-8 flex flex-1 flex-col gap-4",
+								children: /* @__PURE__ */ l(f.Provider, {
+									value: {
+										isMobile: !0,
+										variant: g
+									},
+									children: C
+								})
+							})]
+						})]
+					})
+				})
+			]
+		})
+	});
+}
+function v({ children: t, className: n }) {
+	return /* @__PURE__ */ l("div", {
+		className: e("flex items-center font-semibold", n),
+		children: t
+	});
+}
+function y({ children: t, className: n }) {
+	let { isMobile: r, variant: i } = c.useContext(f);
+	return /* @__PURE__ */ l("ul", {
+		className: e("flex items-center gap-1", r && "flex-col items-stretch gap-1", r && i === "nokia" && h, n),
+		children: t
+	});
+}
+function b({ active: t = !1, asChild: n = !1, className: i, children: a, ...o }) {
+	let { isMobile: u, variant: d } = c.useContext(f), p = e("inline-flex h-9 max-h-9 shrink-0 items-center px-3 py-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground data-[active]:font-semibold data-[active]:text-foreground", u && d === "nokia" && g, i), m = l(n ? s : "a", {
+		...o,
+		"data-active": t || void 0,
+		"aria-current": t ? "page" : void 0,
+		className: p,
+		children: a
+	});
+	return /* @__PURE__ */ l("li", { children: u ? /* @__PURE__ */ l(r, {
+		asChild: !0,
+		children: m
+	}) : m });
+}
+function x({ children: t, className: n }) {
+	let { isMobile: r, variant: i } = c.useContext(f);
+	return /* @__PURE__ */ l("div", {
+		className: e("flex items-center gap-3", r && "mt-2 flex-col items-stretch gap-3 border-t pt-4", r && i === "nokia" && "border-nokia-ink/40", n),
+		children: t
+	});
+}
+var S = Object.assign(_, {
+	Brand: v,
+	List: y,
+	Item: b,
+	Action: x
+}), C = S;
+//#endregion
+export { C as AppNavigation, S as Navigation };

package/{src/components/navigation/index.ts → dist/components/navigation/index.d.ts}

@@ -1,11 +1,5 @@
 export { AppNavigation, Navigation } from "./app-navigation";
-export type {
-  NavigationActionProps,
-  NavigationBrandProps,
-  NavigationItemProps,
-  NavigationListProps,
-  NavigationRootProps,
-} from "./app-navigation";
+export type { NavigationActionProps, NavigationBrandProps, NavigationItemProps, NavigationListProps, NavigationRootProps, } from "./app-navigation";
 export { PaginationControls } from "./pagination-controls";
 export type { PaginationControlsProps } from "./pagination-controls";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";