@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/ui/toast.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/ui/toast.d.ts
+declare const toast: import("@base-ui/react").ToastManager<any>;
+declare function ToastProvider({ ...props }: Toast.Provider.Props): React.JSX.Element;
+declare function ToastPortal({ ...props }: Toast.Portal.Props): React.JSX.Element;
+declare function ToastViewport({ className, ...props }: Toast.Viewport.Props): React.JSX.Element;
+declare function Toast$1({ className, ...props }: Toast.Root.Props): React.JSX.Element;
+declare function ToastContent({ className, ...props }: Toast.Content.Props): React.JSX.Element;
+declare function ToastTitle({ className, ...props }: Toast.Title.Props): React.JSX.Element;
+declare function ToastDescription({ className, ...props }: Toast.Description.Props): React.JSX.Element;
+declare function ToastAction({ className, render, ...props }: Toast.Action.Props): React.JSX.Element;
+declare function ToastClose({ className, children, render, ...props }: Toast.Close.Props): React.JSX.Element;
+declare function Toaster({ children, toastManager, ...props }: Toast.Provider.Props): React.JSX.Element;
+declare const createToastManager: typeof Toast.createToastManager;
+declare const useToastManager: typeof Toast.useToastManager;
+//#endregion
+export { Toast$1 as Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager };

package/dist/components/ui/toast.js

@@ -0,0 +1,121 @@
+import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/ui/toast.tsx
+const toast = Toast.createToastManager();
+function ToastProvider({ ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Provider, { ...props });
+}
+function ToastPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		"data-slot": "toast-portal",
+		...props
+	});
+}
+function ToastViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Viewport, {
+		"data-slot": "toast-viewport",
+		className: cn("pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full", className),
+		...props
+	});
+}
+function Toast$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Root, {
+		"data-slot": "toast",
+		className: cn("group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-md border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]", "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']", "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]", "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]", "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]", "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]", "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", className),
+		...props
+	});
+}
+function ToastContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Content, {
+		"data-slot": "toast-content",
+		className: cn("flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100", className),
+		...props
+	});
+}
+function ToastTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Title, {
+		"data-slot": "toast-title",
+		className: cn("text-sm font-medium", className),
+		...props
+	});
+}
+function ToastDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Description, {
+		"data-slot": "toast-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+}
+function ToastAction({ className, render = /* @__PURE__ */ jsx(Button, {
+	variant: "outline",
+	size: "sm"
+}), ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Action, {
+		"data-slot": "toast-action",
+		render,
+		className: cn("shrink-0", className),
+		...props
+	});
+}
+function ToastClose({ className, children, render = /* @__PURE__ */ jsx(Button, {
+	variant: "ghost",
+	size: "icon-sm"
+}), ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Close, {
+		"data-slot": "toast-close",
+		"aria-label": "Close toast",
+		render,
+		className: cn("relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+	});
+}
+function ToastIcon({ type }) {
+	let icon = null;
+	if (type === "success") icon = /* @__PURE__ */ jsx(CircleCheckIcon, { "aria-hidden": "true" });
+	if (type === "info") icon = /* @__PURE__ */ jsx(InfoIcon, { "aria-hidden": "true" });
+	if (type === "warning") icon = /* @__PURE__ */ jsx(TriangleAlertIcon, { "aria-hidden": "true" });
+	if (type === "error") icon = /* @__PURE__ */ jsx(OctagonXIcon, {
+		className: "text-destructive",
+		"aria-hidden": "true"
+	});
+	if (type === "loading") icon = /* @__PURE__ */ jsx(Loader2Icon, {
+		className: "animate-spin",
+		"aria-hidden": "true"
+	});
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "toast-icon",
+		className: "shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+		children: icon
+	});
+}
+function ToastList() {
+	const { toasts } = Toast.useToastManager();
+	return toasts.map((toastItem) => /* @__PURE__ */ jsx(Toast$1, {
+		toast: toastItem,
+		children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+			/* @__PURE__ */ jsx(ToastIcon, { type: toastItem.type }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [/* @__PURE__ */ jsx(ToastTitle, {}), /* @__PURE__ */ jsx(ToastDescription, {})]
+			}),
+			/* @__PURE__ */ jsx(ToastAction, {}),
+			/* @__PURE__ */ jsx(ToastClose, {})
+		] })
+	}, toastItem.id));
+}
+function Toaster({ children, toastManager = toast, ...props }) {
+	return /* @__PURE__ */ jsxs(ToastProvider, {
+		toastManager,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(ToastViewport, { children: /* @__PURE__ */ jsx(ToastList, {}) }) })]
+	});
+}
+const createToastManager = Toast.createToastManager;
+const useToastManager = Toast.useToastManager;
+//#endregion
+export { Toast$1 as Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager };

package/dist/components/ui/toggle-group.d.ts

@@ -0,0 +1,13 @@
+import { toggleVariants } from "./toggle.js";
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/ui/toggle-group.d.ts
+declare function ToggleGroup$1({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroup.Props & VariantProps<typeof toggleVariants> & {
+  spacing?: number;
+  orientation?: "horizontal" | "vertical";
+}): React.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: Toggle.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
+//#endregion
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupItem };

package/dist/components/ui/toggle-group.js

@@ -0,0 +1,51 @@
+import { toggleVariants } from "./toggle.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/ui/toggle-group.tsx
+const ToggleGroupContext = React.createContext({
+	size: "default",
+	variant: "default",
+	spacing: 2,
+	orientation: "horizontal"
+});
+function ToggleGroup$1({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		"data-slot": "toggle-group",
+		"data-variant": variant,
+		"data-size": size,
+		"data-spacing": spacing,
+		"data-orientation": orientation,
+		style: { "--gap": spacing },
+		className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] data-vertical:flex-col data-vertical:items-stretch", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+			value: {
+				variant,
+				size,
+				spacing,
+				orientation
+			},
+			children
+		})
+	});
+}
+function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
+	const context = React.useContext(ToggleGroupContext);
+	return /* @__PURE__ */ jsx(Toggle, {
+		"data-slot": "toggle-group-item",
+		"data-variant": context.variant || variant,
+		"data-size": context.size || size,
+		"data-spacing": context.spacing,
+		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+			variant: context.variant || variant,
+			size: context.size || size
+		}), className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupItem };

package/dist/components/ui/toggle.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from "class-variance-authority";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/ui/toggle.d.ts
+declare const toggleVariants: (props?: ({
+  variant?: "default" | "outline" | null | undefined;
+  size?: "default" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Toggle$1({ className, variant, size, ...props }: Toggle.Props & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
+//#endregion
+export { Toggle$1 as Toggle, toggleVariants };

package/dist/components/ui/toggle.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/ui/toggle.tsx
+const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border border-input bg-transparent hover:bg-muted"
+		},
+		size: {
+			default: "h-7 min-w-7 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+			sm: "h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			lg: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Toggle$1({ className, variant = "default", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Toggle, {
+		"data-slot": "toggle",
+		className: cn(toggleVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+}
+//#endregion
+export { Toggle$1 as Toggle, toggleVariants };

package/dist/components/ui/tooltip.d.ts

@@ -0,0 +1,8 @@
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/ui/tooltip.d.ts
+declare function TooltipProvider({ delay, ...props }: Tooltip.Provider.Props): import("react").JSX.Element;
+declare function Tooltip$1({ ...props }: Tooltip.Root.Props): import("react").JSX.Element;
+declare function TooltipTrigger({ ...props }: Tooltip.Trigger.Props): import("react").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: Tooltip.Popup.Props & Pick<Tooltip.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/ui/tooltip.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/ui/tooltip.tsx
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+}
+function Tooltip$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		"data-slot": "tooltip",
+		...props
+	});
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+			"data-slot": "tooltip-content",
+			className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, {
+				"data-slot": "tooltip-arrow",
+				className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5"
+			})]
+		})
+	}) });
+}
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/compositions/app-rail/app-rail.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+//#region src/compositions/app-rail/app-rail.d.ts
+type AppRailPanelState = "ok" | "unreachable" | "disabled";
+interface AppRailPanel {
+  id: string;
+  name: string;
+  icon: React.ReactNode;
+  href: string;
+  current?: boolean;
+  state?: AppRailPanelState;
+}
+interface AppRailProps {
+  panels: readonly AppRailPanel[];
+  onNavigate?: (panel: AppRailPanel) => void;
+  label?: string;
+}
+declare function AppRail({ panels, onNavigate, label }: AppRailProps): React.JSX.Element | null;
+//#endregion
+export { AppRail, type AppRailPanel, type AppRailPanelState, type AppRailProps };

package/dist/compositions/app-rail/app-rail.js

@@ -0,0 +1,58 @@
+import { buttonVariants } from "../../components/ui/button.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../components/ui/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+//#region src/compositions/app-rail/app-rail.tsx
+function AppRail({ panels, onNavigate, label = "Panels" }) {
+	if (panels.length === 0) return null;
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("nav", {
+		"data-slot": "app-rail",
+		"aria-label": label,
+		className: "flex h-full w-14 shrink-0 flex-col items-center gap-3 border-r border-sidebar-border bg-muted/50 py-4",
+		children: panels.map((panel) => {
+			const disabled = panel.state === "disabled";
+			const unreachable = panel.state === "unreachable";
+			const hint = disabled ? `${panel.name} - coming later` : unreachable ? `${panel.name} - not responding` : panel.name;
+			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+				render: /* @__PURE__ */ jsx("a", {
+					href: panel.href,
+					"aria-label": hint,
+					"aria-current": panel.current ? "page" : void 0,
+					"aria-disabled": disabled ? true : void 0,
+					tabIndex: disabled ? -1 : void 0,
+					className: cn(buttonVariants({
+						variant: panel.current ? "default" : "ghost",
+						size: "icon-lg"
+					}), "relative size-10", disabled ? "cursor-not-allowed!" : "cursor-pointer"),
+					onClick: (event) => {
+						if (disabled || panel.current) {
+							event.preventDefault();
+							return;
+						}
+						if (onNavigate && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) {
+							event.preventDefault();
+							onNavigate(panel);
+						}
+					},
+					onAuxClick: (event) => {
+						if (disabled || panel.current) event.preventDefault();
+					}
+				}),
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn("flex items-center justify-center [&_svg]:size-5", (disabled || unreachable) && "opacity-50"),
+					children: panel.icon
+				}), unreachable ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "app-rail-status",
+					className: "absolute right-1 bottom-1 size-1.5 rounded-full bg-destructive ring-2 ring-background"
+				}) : null]
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "right",
+				children: hint
+			})] }, panel.id);
+		})
+	}) });
+}
+//#endregion
+export { AppRail };

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

@@ -0,0 +1,56 @@
+import * as React from "react";
+//#region src/compositions/app-shell/app-shell.d.ts
+type AppShellNavItem = {
+  /** Stable id, passed to `onNavigate` and matched against `activeNavId`. */
+  id: string;
+  label: string;
+  /** Shown beside the label, and alone while the sidebar is collapsed to icons. */
+  icon?: React.ReactNode;
+  /** Renders the item as a link. Without it the item is a button. */
+  href?: string;
+  /** Trailing count or status, hidden while the sidebar is collapsed. */
+  badge?: React.ReactNode;
+};
+type AppShellNavGroup = {
+  /** Group heading. Omit it for an unlabelled group. */
+  label?: string;
+  items: AppShellNavItem[];
+};
+type AppShellBrand = {
+  name: string;
+  /** Square mark shown alone while collapsed. Defaults to the name's initial. */
+  logo?: React.ReactNode;
+  caption?: string;
+};
+type AppShellProps = {
+  /** Sidebar navigation, in display order. */
+  nav: AppShellNavGroup[];
+  /** Id of the current item. Navigation state belongs to the consumer's router. */
+  activeNavId?: string;
+  /** Called when an item is chosen. Call `event.preventDefault()` to stop a link's default navigation. */
+  onNavigate?: (id: string, event: React.MouseEvent<HTMLElement>) => void;
+  /** Page title in the header, rendered as the page's `h1`. */
+  title: React.ReactNode;
+  /** Header controls, placed before the theme toggle. */
+  actions?: React.ReactNode;
+  brand?: AppShellBrand;
+  sidebarFooter?: React.ReactNode;
+  /** Panel switcher, rendered left of the sidebar and inside its mobile sheet. */
+  rail?: React.ReactNode;
+  /** Accessible name of the navigation landmark. */
+  navLabel?: string;
+  /** Controlled sidebar state (expanded when true). */
+  sidebarOpen?: boolean;
+  defaultSidebarOpen?: boolean;
+  onSidebarOpenChange?: (open: boolean) => void;
+  className?: string;
+  children?: React.ReactNode;
+};
+/**
+ * Application frame: a sidebar that collapses to icons, and a header with the
+ * page title, an actions slot and the theme toggle. Takes props only; the
+ * theme toggle needs a `ThemeProvider` above it.
+ */
+declare function AppShell({ nav, activeNavId, onNavigate, title, actions, brand, sidebarFooter, rail, navLabel, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, className, children }: AppShellProps): React.JSX.Element;
+//#endregion
+export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps };

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

@@ -0,0 +1,143 @@
+import { Separator } from "../../components/ui/separator.js";
+import { TooltipProvider } from "../../components/ui/tooltip.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar } from "../../components/ui/sidebar.js";
+import { ThemeToggle } from "./theme-toggle.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/compositions/app-shell/app-shell.tsx
+function AppShellBrandMark({ brand }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "app-shell-brand",
+		className: "flex h-12 w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:p-0",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sm font-medium text-sidebar-primary-foreground [&_svg]:size-4",
+			children: brand.logo ?? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: brand.name.charAt(0).toUpperCase()
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "grid min-w-0 flex-1 text-left leading-tight",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate text-sm font-medium",
+				children: brand.name
+			}), brand.caption ? /* @__PURE__ */ jsx("span", {
+				className: "truncate text-xs text-sidebar-foreground/70",
+				children: brand.caption
+			}) : null]
+		})]
+	});
+}
+function AppShellNavLink({ item, isActive, onNavigate }) {
+	const { isMobile, setOpenMobile } = useSidebar();
+	const { href } = item;
+	return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsxs(SidebarMenuButton, {
+		className: "focus-visible:bg-sidebar-accent focus-visible:text-sidebar-accent-foreground",
+		isActive,
+		tooltip: item.label,
+		"aria-current": isActive ? "page" : void 0,
+		render: href ? (props) => /* @__PURE__ */ jsx("a", {
+			...props,
+			href
+		}) : void 0,
+		onClick: (event) => {
+			onNavigate?.(item.id, event);
+			if (isMobile) setOpenMobile(false);
+		},
+		children: [item.icon ?? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "flex size-4 shrink-0 items-center justify-center",
+			children: item.label.charAt(0).toUpperCase()
+		}), /* @__PURE__ */ jsx("span", { children: item.label })]
+	}), item.badge === void 0 ? null : /* @__PURE__ */ jsx(SidebarMenuBadge, { children: item.badge })] });
+}
+/**
+* Application frame: a sidebar that collapses to icons, and a header with the
+* page title, an actions slot and the theme toggle. Takes props only; the
+* theme toggle needs a `ThemeProvider` above it.
+*/
+function AppShell({ nav, activeNavId, onNavigate, title, actions, brand, sidebarFooter, rail, navLabel = "Main", sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, className, children }) {
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultSidebarOpen ?? true);
+	const isControlled = sidebarOpen !== void 0;
+	const open = isControlled ? sidebarOpen : uncontrolledOpen;
+	const handleOpenChange = (next) => {
+		if (!isControlled) setUncontrolledOpen(next);
+		onSidebarOpenChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(SidebarProvider, {
+		"data-slot": "app-shell",
+		open,
+		onOpenChange: handleOpenChange,
+		className,
+		style: rail != null ? {
+			"--sidebar-width": "19.5rem",
+			"--sidebar-width-icon": "6.5rem"
+		} : void 0,
+		children: [/* @__PURE__ */ jsxs(Sidebar, {
+			collapsible: "icon",
+			children: [rail != null ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "app-shell-sidebar-layout",
+				className: "relative flex h-full min-w-0 flex-col pl-14",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "absolute inset-y-0 left-0 w-14",
+					children: rail
+				}), /* @__PURE__ */ jsx(AppShellSidebarContent, {
+					brand,
+					nav,
+					navLabel,
+					activeNavId,
+					onNavigate,
+					sidebarFooter
+				})]
+			}) : /* @__PURE__ */ jsx(AppShellSidebarContent, {
+				brand,
+				nav,
+				navLabel,
+				activeNavId,
+				onNavigate,
+				sidebarFooter
+			}), /* @__PURE__ */ jsx(SidebarRail, {})]
+		}), /* @__PURE__ */ jsxs(SidebarInset, {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsxs("header", {
+				"data-slot": "app-shell-header",
+				className: "sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b bg-background px-4",
+				children: [
+					/* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }),
+					/* @__PURE__ */ jsx(Separator, {
+						orientation: "vertical",
+						className: "mr-2 h-4 data-vertical:self-center"
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "min-w-0 flex-1 truncate font-heading text-sm font-medium",
+						children: title
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-slot": "app-shell-actions",
+						className: "flex shrink-0 items-center gap-2",
+						children: [actions, /* @__PURE__ */ jsx(ThemeToggle, {})]
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				"data-slot": "app-shell-content",
+				className: "flex flex-1 flex-col gap-4 p-4",
+				children
+			})]
+		})]
+	}) });
+}
+function AppShellSidebarContent({ brand, nav, navLabel, activeNavId, onNavigate, sidebarFooter }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		brand ? /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx(AppShellBrandMark, { brand }) }) : null,
+		/* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx("nav", {
+			"aria-label": navLabel,
+			children: nav.map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [group.label ? /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }) : null, /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((item) => /* @__PURE__ */ jsx(AppShellNavLink, {
+				item,
+				isActive: item.id === activeNavId,
+				onNavigate
+			}, item.id)) }) })] }, group.label ?? group.items.map((item) => item.id).join("|")))
+		}) }),
+		sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, { children: sidebarFooter }) : null
+	] });
+}
+//#endregion
+export { AppShell };

package/dist/compositions/app-shell/theme-toggle.d.ts

@@ -0,0 +1,10 @@
+//#region src/compositions/app-shell/theme-toggle.d.ts
+/**
+ * Light, dark and system theme menu. Reads and sets the preference through
+ * the package ThemeProvider, so it must render inside one.
+ */
+declare function ThemeToggle({ className }: {
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+export { ThemeToggle };