@glyphui/ui 0.3.0 → 0.5.0

package/dist/motion/use-motion-settings.js

@@ -0,0 +1,47 @@
+"use client";
+import { GlyphContext } from "../provider/glyph-context.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
+import { useContext, useMemo } from "react";
+//#region src/motion/use-motion-settings.ts
+const defaultSpring = {
+	stiffness: 420,
+	damping: 34
+};
+function seconds(value, fallback) {
+	if (!value) return fallback;
+	const n = Number.parseFloat(value);
+	if (Number.isNaN(n)) return fallback;
+	return value.trim().endsWith("ms") ? n / 1e3 : n;
+}
+/**
+* How Glyph components should animate right now. Every animated component reads this, so a
+* theme's `motion.level`, the provider's `motion` prop and the visitor's reduced-motion
+* setting control all motion in one place.
+*/
+function useMotionSettings() {
+	const context = useContext(GlyphContext);
+	const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+	const motion = context?.theme.motion;
+	const level = reduced ? "none" : context?.motion ?? motion?.level ?? "subtle";
+	const spring = motion?.spring ?? defaultSpring;
+	const durations = motion?.duration;
+	return useMemo(() => ({
+		level,
+		animate: level !== "none",
+		spring: {
+			type: "spring",
+			...spring
+		},
+		duration: {
+			fast: seconds(durations?.fast, .12),
+			base: seconds(durations?.base, .18),
+			slow: seconds(durations?.slow, .28)
+		}
+	}), [
+		level,
+		spring,
+		durations
+	]);
+}
+//#endregion
+export { useMotionSettings };

package/dist/motion/use-reveal.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+//#region src/motion/use-reveal.d.ts
+export interface RevealOptions {
+  /** Animate only the first time it scrolls into view. Default true. */
+  once?: boolean | undefined;
+  /** Share of the element that must be visible, 0–1. Default 0.15. */
+  amount?: number | undefined;
+  /** Set false to show the content without animating. */
+  enabled?: boolean | undefined;
+}
+//#endregion

package/dist/motion/use-reveal.js

@@ -0,0 +1,41 @@
+"use client";
+import { useMotionSettings } from "./use-motion-settings.js";
+import { useEffect, useLayoutEffect } from "react";
+//#region src/motion/use-reveal.ts
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/**
+* Drives a `data-<attribute>="hidden|shown"` attribute from an IntersectionObserver.
+*
+* Content stays visible unless everything needed to reveal it is available: motion is on,
+* the browser has IntersectionObserver, and JavaScript ran. Server HTML, tests and
+* reduced-motion visitors always get visible content.
+*/
+function useReveal(ref, attribute, { once = true, amount = .15, enabled = true } = {}) {
+	const { animate } = useMotionSettings();
+	const active = enabled && animate;
+	useIsomorphicLayoutEffect(() => {
+		const el = ref.current;
+		if (!el || !active || typeof IntersectionObserver === "undefined") return;
+		const key = `data-${attribute}`;
+		el.setAttribute(key, "hidden");
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry) return;
+			if (entry.isIntersecting) {
+				el.setAttribute(key, "shown");
+				if (once) observer.disconnect();
+			} else if (!once) el.setAttribute(key, "hidden");
+		}, { threshold: amount });
+		observer.observe(el);
+		return () => {
+			observer.disconnect();
+			el.removeAttribute(key);
+		};
+	}, [
+		active,
+		attribute,
+		once,
+		amount
+	]);
+}
+//#endregion
+export { useReveal };

package/dist/patterns/app-shell/app-shell-context.d.ts

@@ -0,0 +1,14 @@
+//#region src/patterns/app-shell/app-shell-context.d.ts
+export interface AppShellContextValue {
+  /** Desktop sidebar is collapsed to an icon rail. */
+  collapsed: boolean;
+  setCollapsed: (collapsed: boolean) => void;
+  /** Mobile navigation drawer is open. */
+  mobileOpen: boolean;
+  setMobileOpen: (open: boolean) => void;
+  /** True for the sidebar copy rendered inside the mobile drawer. */
+  inDrawer: boolean;
+}
+/** Sidebar state. Works outside an AppShell too (always expanded). */
+export declare function useAppShell(): AppShellContextValue;
+//#endregion

package/dist/patterns/app-shell/app-shell-context.js

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, useContext } from "react";
+//#region src/patterns/app-shell/app-shell-context.ts
+const AppShellContext = createContext(null);
+/** Sidebar state. Works outside an AppShell too (always expanded). */
+function useAppShell() {
+	return useContext(AppShellContext) ?? {
+		collapsed: false,
+		setCollapsed: () => {},
+		mobileOpen: false,
+		setMobileOpen: () => {},
+		inDrawer: false
+	};
+}
+//#endregion
+export { AppShellContext, useAppShell };

package/dist/patterns/app-shell/app-shell.d.ts

@@ -0,0 +1,21 @@
+import { AppShellVariants } from "./app-shell.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/patterns/app-shell/app-shell.d.ts
+export interface AppShellProps extends Omit<ComponentProps<'div'>, 'children'>, AppShellVariants {
+  /** A `<Sidebar>`. Shown fixed on desktop and in a drawer on mobile. */
+  sidebar: ReactNode;
+  children: ReactNode;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Shown next to the menu button in the mobile top bar. */
+  mobileBrand?: ReactNode;
+}
+/**
+ * App layout: sidebar plus main content. Handles desktop collapse to an icon rail,
+ * the mobile drawer (focus-trapped, closes on navigation), and the mobile top bar.
+ *
+ * `layout="page"` fills the viewport; `layout="embedded"` fills its parent.
+ */
+export declare function AppShell(inProps: AppShellProps): import("react").JSX.Element;
+//#endregion

package/dist/patterns/app-shell/app-shell.js

@@ -0,0 +1,82 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { appShellStyles } from "./app-shell.styles.js";
+import { AppShellContext } from "./app-shell-context.js";
+import { SidebarTrigger } from "./sidebar.js";
+import { Dialog } from "radix-ui";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/app-shell/app-shell.tsx
+/**
+* App layout: sidebar plus main content. Handles desktop collapse to an icon rail,
+* the mobile drawer (focus-trapped, closes on navigation), and the mobile top bar.
+*
+* `layout="page"` fills the viewport; `layout="embedded"` fills its parent.
+*/
+function AppShell(inProps) {
+	const [props, slots] = useComponentConfig("AppShell", inProps);
+	const { sidebar, children, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, mobileBrand, layout, className, ...rest } = props;
+	const [collapsed, setCollapsed] = useControllableState({
+		value: collapsedProp,
+		defaultValue: defaultCollapsed,
+		onChange: onCollapsedChange
+	});
+	const [mobileOpen, setMobileOpen] = useState(false);
+	const s = appShellStyles({ layout });
+	const desktop = useMemo(() => ({
+		collapsed,
+		setCollapsed,
+		mobileOpen,
+		setMobileOpen,
+		inDrawer: false
+	}), [
+		collapsed,
+		setCollapsed,
+		mobileOpen
+	]);
+	const drawer = useMemo(() => ({
+		...desktop,
+		collapsed: false,
+		inDrawer: true
+	}), [desktop]);
+	return /* @__PURE__ */ jsx(AppShellContext.Provider, {
+		value: desktop,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "app-shell",
+			className: s.root({ class: [slots.root, className] }),
+			...rest,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: s.sidebar({ class: slots.sidebar }),
+					children: sidebar
+				}),
+				/* @__PURE__ */ jsx(Dialog.Root, {
+					open: mobileOpen,
+					onOpenChange: setMobileOpen,
+					children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: s.overlay({ class: slots.overlay }) }), /* @__PURE__ */ jsxs(Dialog.Content, {
+						className: s.drawer({ class: slots.drawer }),
+						"aria-describedby": void 0,
+						children: [/* @__PURE__ */ jsx(Dialog.Title, {
+							className: "sr-only",
+							children: "Navigation"
+						}), /* @__PURE__ */ jsx(AppShellContext.Provider, {
+							value: drawer,
+							children: sidebar
+						})]
+					})] })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "app-shell-main",
+					className: s.main({ class: slots.main }),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: s.mobileBar({ class: slots.mobileBar }),
+						children: [/* @__PURE__ */ jsx(SidebarTrigger, {}), mobileBrand]
+					}), children]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { AppShell };

package/dist/patterns/app-shell/app-shell.styles.d.ts

@@ -0,0 +1,302 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/patterns/app-shell/app-shell.styles.d.ts
+export declare const appShellStyles: import("tailwind-variants").TVReturnType<{
+  layout: {
+    page: {
+      root: string;
+      sidebar: string;
+      mobileBar: string;
+    };
+    embedded: {
+      root: string;
+      sidebar: string;
+      main: string;
+    };
+  };
+}, {
+  root: string;
+  sidebar: string;
+  main: string;
+  mobileBar: string[];
+  overlay: string;
+  drawer: string;
+}, undefined, {
+  layout: {
+    page: {
+      root: string;
+      sidebar: string;
+      mobileBar: string;
+    };
+    embedded: {
+      root: string;
+      sidebar: string;
+      main: string;
+    };
+  };
+}, {
+  root: string;
+  sidebar: string;
+  main: string;
+  mobileBar: string[];
+  overlay: string;
+  drawer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  layout: {
+    page: {
+      root: string;
+      sidebar: string;
+      mobileBar: string;
+    };
+    embedded: {
+      root: string;
+      sidebar: string;
+      main: string;
+    };
+  };
+}, {
+  root: string;
+  sidebar: string;
+  main: string;
+  mobileBar: string[];
+  overlay: string;
+  drawer: string;
+}>>;
+export type AppShellVariants = VariantProps<typeof appShellStyles>;
+export declare const sidebarStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      footer?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      section?: import("tailwind-variants").ClassValue;
+      sectionLabel?: import("tailwind-variants").ClassValue;
+      itemIcon?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      itemBadge?: import("tailwind-variants").ClassValue;
+      itemIndicator?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      footer?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      section?: import("tailwind-variants").ClassValue;
+      sectionLabel?: import("tailwind-variants").ClassValue;
+      itemIcon?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      itemBadge?: import("tailwind-variants").ClassValue;
+      itemIndicator?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string[];
+  header: string;
+  content: string;
+  section: string;
+  sectionLabel: string;
+  item: string[];
+  /** The active item's background and accent bar. Slides between items on navigation. */
+  itemIndicator: string[];
+  itemIcon: string;
+  itemLabel: string;
+  itemBadge: string;
+  footer: string[];
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      footer?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      section?: import("tailwind-variants").ClassValue;
+      sectionLabel?: import("tailwind-variants").ClassValue;
+      itemIcon?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      itemBadge?: import("tailwind-variants").ClassValue;
+      itemIndicator?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string[];
+  header: string;
+  content: string;
+  section: string;
+  sectionLabel: string;
+  item: string[];
+  /** The active item's background and accent bar. Slides between items on navigation. */
+  itemIndicator: string[];
+  itemIcon: string;
+  itemLabel: string;
+  itemBadge: string;
+  footer: string[];
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string[];
+  header: string;
+  content: string;
+  section: string;
+  sectionLabel: string;
+  item: string[];
+  /** The active item's background and accent bar. Slides between items on navigation. */
+  itemIndicator: string[];
+  itemIcon: string;
+  itemLabel: string;
+  itemBadge: string;
+  footer: string[];
+}>>;
+export declare const navbarStyles: import("tailwind-variants").TVReturnType<{
+  sticky: {
+    true: {
+      root: string;
+    };
+    false: {
+      root: string;
+    };
+  };
+  blur: {
+    true: {
+      root: string;
+    };
+    false: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  inner: string;
+  brand: string;
+  links: string;
+  link: string[];
+  actions: string;
+  menuButton: string;
+  overlay: string;
+  panel: string[];
+  panelHeader: string;
+  panelLinks: string;
+  panelLink: string[];
+  panelActions: string[];
+}, undefined, {
+  sticky: {
+    true: {
+      root: string;
+    };
+    false: {
+      root: string;
+    };
+  };
+  blur: {
+    true: {
+      root: string;
+    };
+    false: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  inner: string;
+  brand: string;
+  links: string;
+  link: string[];
+  actions: string;
+  menuButton: string;
+  overlay: string;
+  panel: string[];
+  panelHeader: string;
+  panelLinks: string;
+  panelLink: string[];
+  panelActions: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  sticky: {
+    true: {
+      root: string;
+    };
+    false: {
+      root: string;
+    };
+  };
+  blur: {
+    true: {
+      root: string;
+    };
+    false: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  inner: string;
+  brand: string;
+  links: string;
+  link: string[];
+  actions: string;
+  menuButton: string;
+  overlay: string;
+  panel: string[];
+  panelHeader: string;
+  panelLinks: string;
+  panelLink: string[];
+  panelActions: string[];
+}>>;
+export declare const pageHeaderStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      actions?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      text?: import("tailwind-variants").ClassValue;
+      eyebrow?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      actions?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      text?: import("tailwind-variants").ClassValue;
+      eyebrow?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string[];
+  text: string;
+  eyebrow: string;
+  title: string;
+  description: string;
+  actions: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      actions?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      text?: import("tailwind-variants").ClassValue;
+      eyebrow?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string[];
+  text: string;
+  eyebrow: string;
+  title: string;
+  description: string;
+  actions: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string[];
+  text: string;
+  eyebrow: string;
+  title: string;
+  description: string;
+  actions: string;
+}>>;
+//#endregion

package/dist/patterns/app-shell/app-shell.styles.js

@@ -0,0 +1,106 @@
+"use client";
+import { focusRing, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/patterns/app-shell/app-shell.styles.ts
+const appShellStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "flex w-full bg-background",
+		sidebar: "hidden shrink-0 md:flex",
+		main: "flex min-w-0 flex-1 flex-col",
+		mobileBar: ["flex h-14 shrink-0 items-center gap-2 border-b-border px-3 md:hidden", "border-b-(length:--glyph-border-width)"],
+		overlay: "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
+		drawer: "fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] shadow-lg data-[state=open]:animate-sheet-in-left data-[state=closed]:animate-sheet-out-left outline-none [&>[data-slot=sidebar]]:w-full"
+	},
+	variants: { layout: {
+		page: {
+			root: "min-h-dvh",
+			sidebar: "sticky top-0 h-dvh",
+			mobileBar: "sticky top-0 z-30 bg-background/80 backdrop-blur-xl"
+		},
+		embedded: {
+			root: "h-full min-h-0 overflow-hidden",
+			sidebar: "h-full",
+			main: "overflow-y-auto"
+		}
+	} },
+	defaultVariants: { layout: "page" }
+});
+const sidebarStyles = /* @__PURE__ */ tv({ slots: {
+	root: [
+		"group/sidebar isolate flex h-full w-60 flex-col overflow-hidden border-r-border bg-subtle",
+		"border-r-(length:--glyph-border-width)",
+		"transition-[width] duration-(--glyph-duration-base) ease-standard data-[collapsed=true]:w-15"
+	],
+	header: "flex h-14 shrink-0 items-center gap-2 px-3",
+	content: "flex flex-1 flex-col gap-5 overflow-y-auto overflow-x-hidden px-3 py-3",
+	section: "flex flex-col gap-0.5",
+	sectionLabel: "mb-1 truncate px-2 font-mono text-caption uppercase tracking-[0.1em] text-faint-foreground group-data-[collapsed=true]/sidebar:sr-only",
+	item: [
+		"relative flex h-8 w-full shrink-0 cursor-pointer items-center gap-2.5 rounded-sm px-2 text-small font-medium text-muted-foreground",
+		transition,
+		focusRing,
+		"hover:bg-muted hover:text-foreground",
+		"aria-[current=page]:text-foreground",
+		"group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0"
+	],
+	/** The active item's background and accent bar. Slides between items on navigation. */
+	itemIndicator: ["pointer-events-none absolute inset-0 -z-10 rounded-[inherit] bg-muted", "before:absolute before:inset-y-1.5 before:-left-3 before:w-0.5 before:rounded-r-pill before:bg-primary"],
+	itemIcon: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+	itemLabel: "min-w-0 flex-1 truncate text-left group-data-[collapsed=true]/sidebar:sr-only",
+	itemBadge: "ml-auto font-mono text-caption text-faint-foreground tabular-nums group-data-[collapsed=true]/sidebar:hidden",
+	footer: ["mt-auto flex shrink-0 items-center gap-2 border-t-border px-3 py-3 group-data-[collapsed=true]/sidebar:justify-center", "border-t-(length:--glyph-border-width)"]
+} });
+const navbarStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: [
+			"top-0 z-40 w-full border-b-transparent",
+			"border-b-(length:--glyph-border-width)",
+			"transition-[background-color,border-color,backdrop-filter] duration-(--glyph-duration-base) ease-standard"
+		],
+		inner: "flex h-16 items-center gap-6",
+		brand: "flex shrink-0 items-center gap-2 font-display text-h4 text-foreground",
+		links: "hidden items-center gap-1 md:flex",
+		link: [
+			"rounded-sm px-3 py-1.5 text-small font-medium text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:text-foreground aria-[current=page]:text-foreground"
+		],
+		actions: "ml-auto hidden items-center gap-2 md:flex",
+		menuButton: "ml-auto md:hidden",
+		overlay: "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
+		panel: ["fixed inset-x-0 top-0 z-50 max-h-dvh overflow-y-auto border-b-border bg-background px-4 pb-6 shadow-lg outline-none animate-slide-in-top data-[state=closed]:animate-pop-out", "border-b-(length:--glyph-border-width)"],
+		panelHeader: "flex h-16 items-center justify-between",
+		panelLinks: "flex flex-col gap-1",
+		panelLink: [
+			"rounded-md px-3 py-2.5 text-body font-medium text-muted-foreground",
+			focusRing,
+			"hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
+		],
+		panelActions: ["mt-4 flex flex-col gap-2 border-t-border pt-4", "border-t-(length:--glyph-border-width)"]
+	},
+	variants: {
+		sticky: {
+			true: { root: "sticky" },
+			false: { root: "relative" }
+		},
+		blur: {
+			true: { root: "data-[scrolled=true]:border-b-border data-[scrolled=true]:bg-background/72 data-[scrolled=true]:backdrop-blur-xl data-[scrolled=true]:backdrop-saturate-150" },
+			false: { root: "border-b-border bg-background" }
+		}
+	},
+	defaultVariants: {
+		sticky: true,
+		blur: true
+	}
+});
+const pageHeaderStyles = /* @__PURE__ */ tv({ slots: {
+	root: ["flex flex-col gap-4 border-b-border pb-5 sm:flex-row sm:items-end sm:justify-between", "border-b-(length:--glyph-border-width)"],
+	text: "grid min-w-0 gap-1",
+	eyebrow: "font-mono text-caption uppercase tracking-[0.12em] text-faint-foreground",
+	title: "font-display text-h3 text-foreground",
+	description: "max-w-2xl text-small text-muted-foreground",
+	actions: "flex shrink-0 flex-wrap items-center gap-2"
+} });
+//#endregion
+export { appShellStyles, navbarStyles, pageHeaderStyles, sidebarStyles };

package/dist/patterns/app-shell/index.d.ts

@@ -0,0 +1,7 @@
+import { appShellStyles, navbarStyles, pageHeaderStyles, sidebarStyles } from "./app-shell.styles.js";
+import { AppShell, AppShellProps } from "./app-shell.js";
+import { AppShellContextValue, useAppShell } from "./app-shell-context.js";
+import { NavLink, Navbar, NavbarProps } from "./navbar.js";
+import { PageHeader, PageHeaderProps } from "./page-header.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarItemProps, SidebarSection, SidebarSectionProps, SidebarTrigger } from "./sidebar.js";
+export { AppShell, type AppShellContextValue, type AppShellProps, type NavLink, Navbar, type NavbarProps, PageHeader, type PageHeaderProps, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarSection, type SidebarSectionProps, SidebarTrigger, appShellStyles, navbarStyles, pageHeaderStyles, sidebarStyles, useAppShell };

package/dist/patterns/app-shell/navbar.d.ts

@@ -0,0 +1,29 @@
+import { ContainerProps } from "../../components/container/container.js";
+import "../../components/container/index.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/patterns/app-shell/navbar.d.ts
+export interface NavLink {
+  label: ReactNode;
+  href: string;
+  /** Marks the current page. Computed from the provider's `router` when not set. */
+  active?: boolean;
+  /** With automatic matching, only the exact path is active (not its children). */
+  end?: boolean;
+}
+export interface NavbarProps extends Omit<ComponentProps<'header'>, 'children'> {
+  brand: ReactNode;
+  links?: readonly NavLink[];
+  /** Right side on desktop; bottom of the menu panel on mobile. */
+  actions?: ReactNode;
+  /** Stick to the top of the viewport. Default true. */
+  sticky?: boolean;
+  /** Transparent at the top; translucent with blur and a border once scrolled. Default true. */
+  blurOnScroll?: boolean;
+  containerSize?: ContainerProps['size'];
+}
+/**
+ * Site header from data: brand, links, actions. Responsive out of the box: links collapse
+ * into a focus-trapped menu panel on small screens.
+ */
+export declare function Navbar(inProps: NavbarProps): import("react").JSX.Element;
+//#endregion