@logicplanes/kaeso-ui 0.1.0 → 0.2.0

package/dist/types/components/code-block/code-block.d.ts

@@ -24,6 +24,8 @@ export interface CodeBlockProps {
     code?: string | undefined;
     lang?: CodeLang | undefined;
     tabs?: CodeTab[] | undefined;
+    tab?: string | undefined;
+    onTabChange?: ((label: string) => void) | undefined;
     title?: ReactNode | undefined;
     lineNumbers?: boolean | undefined;
     highlightLines?: number[] | undefined;

package/dist/types/components/code-block/docs.d.ts

@@ -9,6 +9,8 @@ export declare const docs: {
             lang: string;
             lineNumbers: string;
             surface: string;
+            onTabChange: string;
+            tab: string;
             tabs: string;
             title: string;
             wrap: string;
@@ -24,6 +26,8 @@ export declare const docs: {
             lang: string;
             lineNumbers: string;
             surface: string;
+            onTabChange: string;
+            tab: string;
             tabs: string;
             title: string;
             wrap: string;

package/dist/types/components/command-palette/command-palette.d.ts

@@ -37,6 +37,7 @@ export interface CommandPaletteProps {
     keyHints?: boolean | undefined;
     inline?: boolean | undefined;
     defaultQuery?: string | undefined;
+    query?: string | undefined;
 }
 export declare function CommandPalette(props: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CommandPalette {

package/dist/types/components/command-palette/docs.d.ts

@@ -12,6 +12,7 @@ export declare const docs: {
             onQueryChange: string;
             open: string;
             placeholder: string;
+            query: string;
         };
     };
 };

package/dist/types/components/dialog/dialog.d.ts

@@ -25,6 +25,7 @@ export interface DialogProps {
     trigger?: ReactElement | undefined;
     title: ReactNode;
     description?: ReactNode | undefined;
+    busy?: boolean | undefined;
     size?: keyof typeof KAESO_DIALOG_VARIANTS.size | undefined;
     children?: ReactNode | undefined;
     footer?: ReactNode | undefined;
@@ -35,7 +36,9 @@ export interface DialogProps {
     inline?: boolean | undefined;
 }
 declare function Close({ children }: {
-    children: ReactElement;
+    children: ReactElement<{
+        disabled?: boolean | undefined;
+    }>;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace Close {
     var displayName: string;
@@ -71,7 +74,7 @@ export interface AlertDialogProps {
     description: ReactNode;
     confirmLabel: string;
     cancelLabel?: string | undefined;
-    onConfirm: () => void | Promise<void>;
+    onConfirm: () => void | Promise<unknown>;
     tone?: keyof typeof KAESO_ALERT_DIALOG_VARIANTS.tone | undefined;
     confirmText?: string | undefined;
     loading?: boolean | undefined;

package/dist/types/components/dialog/docs.d.ts

@@ -20,6 +20,7 @@ export declare const docs: {
     Dialog: {
         description: string;
         props: {
+            busy: string;
             children: string;
             defaultOpen: string;
             description: string;
@@ -35,9 +36,17 @@ export declare const docs: {
             trigger: string;
         };
     };
+    DialogScope: {
+        description: string;
+        props: {
+            children: string;
+            open: string;
+        };
+    };
     LayerDialog: {
         description: string;
         props: {
+            busy: string;
             defaultOpen: string;
             hideClose: string;
             inline: string;
@@ -59,6 +68,7 @@ export declare const docs: {
             onOpenChange: string;
             onSubmit: string;
             open: string;
+            result: string;
             size: string;
             steps: string;
             submitLabel: string;

package/dist/types/components/dialog/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./dialog.js";
 export * from "./step-dialog.js";
+export * from "./scope.js";

package/dist/types/components/dialog/scope.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+export interface DialogScopeProps {
+    open: boolean;
+    children: ReactNode;
+}
+export declare function DialogScope({ open, children }: DialogScopeProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace DialogScope {
+    var displayName: string;
+}

package/dist/types/components/dialog/step-dialog.d.ts

@@ -7,6 +7,13 @@ export interface DialogStep {
     content: ReactNode;
     blockedReason?: string | undefined;
 }
+export interface StepDialogResult {
+    title: ReactNode;
+    description?: ReactNode | undefined;
+    content: ReactNode;
+    footer: ReactNode;
+    size?: keyof typeof KAESO_DIALOG_VARIANTS.size | undefined;
+}
 export interface StepDialogProps {
     open?: boolean | undefined;
     onOpenChange?: ((open: boolean) => void) | undefined;
@@ -19,8 +26,9 @@ export interface StepDialogProps {
     size?: keyof typeof KAESO_DIALOG_VARIANTS.size | undefined;
     inline?: boolean | undefined;
     defaultStep?: number | undefined;
+    result?: StepDialogResult | undefined;
 }
-export declare function StepDialog({ open, onOpenChange, title, steps, submitLabel, onSubmit, submitting, tone, size, inline, defaultStep, }: StepDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepDialog({ open, onOpenChange, title, steps, submitLabel, onSubmit, submitting, tone, size, inline, defaultStep, result, }: StepDialogProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StepDialog {
     var displayName: string;
 }

package/dist/types/components/link/link.d.ts

@@ -13,6 +13,14 @@ export declare const KAESO_LINK_VARIANTS: {
             readonly classes: "font-medium text-fg no-underline hover:underline hover:decoration-line-strong hover:underline-offset-3";
             readonly description: "A link on its own line (“Team overview ›”)";
         };
+        readonly heading: {
+            readonly classes: "group/heading text-inherit no-underline";
+            readonly description: "A heading's link to itself: the heading's own look, with a # beside it on hover and keyboard focus";
+        };
+        readonly card: {
+            readonly classes: "mx-0 flex flex-col gap-4 rounded-well bg-fill-1 px-16 py-12 text-fg no-underline hover:bg-fill-2";
+            readonly description: "A page to read next: a filled well with the page's name and one sentence about it";
+        };
     };
 };
 export declare const KAESO_LINK_DEFAULT_VARIANTS: {

package/dist/types/components/logo/nav-wordmark.d.ts

@@ -0,0 +1,6 @@
+import { type SVGAttributes } from "react";
+export interface NavWordmarkProps extends Omit<SVGAttributes<SVGSVGElement>, "children"> {
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+}
+export declare const NavWordmark: import("react").ForwardRefExoticComponent<NavWordmarkProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -2,15 +2,15 @@ import { type ReactNode } from "react";
 export declare const KAESO_SCROLL_AREA_VARIANTS: {
     readonly orientation: {
         readonly vertical: {
-            readonly classes: "scroll-fade-y";
+            readonly classes: "scroll-axis-y scroll-fade-y";
             readonly description: "Scrolls up and down; the content fades at an edge with more to scroll to (default)";
         };
         readonly horizontal: {
-            readonly classes: "scroll-fade-x";
+            readonly classes: "scroll-axis-x scroll-fade-x";
             readonly description: "Scrolls sideways";
         };
         readonly both: {
-            readonly classes: "";
+            readonly classes: "scroll-axis-both";
             readonly description: "Both directions";
         };
     };

package/dist/types/components/theme-image/docs.d.ts

@@ -0,0 +1,13 @@
+export declare const docs: {
+    ThemeImage: {
+        description: string;
+        props: {
+            alt: string;
+            "aria-describedby": string;
+            dark: string;
+            height: string;
+            light: string;
+            width: string;
+        };
+    };
+};

package/dist/types/components/theme-image/index.d.ts

@@ -0,0 +1 @@
+export * from "./theme-image.js";

package/dist/types/components/theme-image/theme-image.d.ts

@@ -0,0 +1,23 @@
+export declare const KAESO_THEME_IMAGE_VARIANTS: {
+    readonly theme: {
+        readonly light: {
+            readonly classes: "theme-light-only";
+            readonly description: "Shown in the light theme and in print";
+        };
+        readonly dark: {
+            readonly classes: "theme-dark-only";
+            readonly description: "Shown in the dark theme";
+        };
+    };
+};
+export declare const KAESO_THEME_IMAGE_DEFAULT_VARIANTS: {};
+export interface ThemeImageProps {
+    light: string;
+    dark: string;
+    alt: string;
+    width?: number | undefined;
+    height?: number | undefined;
+    className?: string | undefined;
+    "aria-describedby"?: string | undefined;
+}
+export declare const ThemeImage: import("react").ForwardRefExoticComponent<ThemeImageProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/types/components/theme-select/docs.d.ts

@@ -0,0 +1,10 @@
+export declare const docs: {
+    ThemeSelect: {
+        description: string;
+        props: {
+            appearance: string;
+            fullWidth: string;
+            size: string;
+        };
+    };
+};

package/dist/types/components/theme-select/index.d.ts

@@ -0,0 +1 @@
+export * from "./theme-select.js";

package/dist/types/components/theme-select/theme-select.d.ts

@@ -0,0 +1,34 @@
+export declare const KAESO_THEME_SELECT_VARIANTS: {
+    readonly appearance: {
+        readonly ghost: {
+            readonly classes: "";
+            readonly description: "A quiet pill for sidebars and toolbars (default)";
+        };
+        readonly default: {
+            readonly classes: "";
+            readonly description: "A raised pill with a ring";
+        };
+    };
+    readonly size: {
+        readonly sm: {
+            readonly classes: "";
+            readonly description: "32px (default)";
+        };
+        readonly md: {
+            readonly classes: "";
+            readonly description: "36px";
+        };
+    };
+};
+export declare const KAESO_THEME_SELECT_DEFAULT_VARIANTS: {
+    readonly appearance: "ghost";
+    readonly size: "sm";
+};
+export interface ThemeSelectProps {
+    appearance?: keyof typeof KAESO_THEME_SELECT_VARIANTS.appearance | undefined;
+    size?: keyof typeof KAESO_THEME_SELECT_VARIANTS.size | undefined;
+    fullWidth?: boolean | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const ThemeSelect: import("react").ForwardRefExoticComponent<ThemeSelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/icons/groups.d.ts

@@ -1,5 +1,5 @@
 export declare const ICON_GROUPS: {
-    readonly "Kaeso objects": readonly ["key", "providerKey", "project", "organization", "model", "playground", "alias", "limit", "budget", "requestLog", "usage", "member", "members", "serviceAccount", "settings", "audit", "instance", "provider", "route", "gateway", "database", "security", "session", "overview", "chart", "home"];
+    readonly "Kaeso objects": readonly ["key", "providerKey", "project", "organization", "model", "playground", "alias", "limit", "budget", "requestLog", "usage", "member", "members", "serviceAccount", "settings", "audit", "instance", "provider", "route", "gateway", "database", "update", "security", "session", "overview", "chart", "home"];
     readonly Capabilities: readonly ["tools", "reasoning", "vision", "pdf", "structuredOutput"];
     readonly Actions: readonly ["signOut", "copy", "externalLink", "openExternal", "add", "close", "edit", "delete", "download", "upload", "refresh", "retry", "search", "filter", "displayOptions", "more", "menu", "sort", "switcher", "expand", "collapse", "show", "hide", "reveal", "sidebar", "sidePanel", "list", "board", "stack"];
     readonly Status: readonly ["check", "success", "warning", "error", "info", "minus", "notification"];

package/dist/types/icons/vocabulary.d.ts

@@ -104,6 +104,11 @@ export declare const icons: {
     }][] | readonly (readonly [string, {
         readonly [key: string]: string | number;
     }])[];
+    readonly update: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
     readonly security: [string, {
         [key: string]: string | number;
     }][] | readonly (readonly [string, {

package/dist/types/index.d.ts

@@ -41,6 +41,8 @@ export * from "./components/skeleton/index.js";
 export * from "./components/sidebar/index.js";
 export * from "./components/app-frame/index.js";
 export * from "./components/theme-menu/index.js";
+export * from "./components/theme-select/index.js";
+export * from "./components/theme-image/index.js";
 export * from "./components/calendar/index.js";
 export * from "./components/date-picker/index.js";
 export * from "./components/filter-chip/index.js";

package/dist/types/theme/theme-provider.d.ts

@@ -3,7 +3,7 @@ export type ThemePreference = "system" | "light" | "dark";
 export type ResolvedTheme = "light" | "dark";
 export declare const THEME_STORAGE_KEY = "kaeso:theme";
 export declare function installFocusModality(): void;
-export declare const themeScript = "(function(){var d=document.documentElement;try{var t=localStorage.getItem(\"kaeso:theme\");if(t===\"light\"||t===\"dark\"){d.setAttribute(\"data-theme\",t)}}catch(e){}if(!window.__kModality){window.__kModality=1;document.addEventListener(\"pointerdown\",function(){d.setAttribute(\"data-k-pointer\",\"\")},true);document.addEventListener(\"keydown\",function(e){if(!e.metaKey&&!e.ctrlKey&&!e.altKey){d.removeAttribute(\"data-k-pointer\")}},true)}})();";
+export declare const themeScript: string;
 interface ThemeContextValue {
     theme: ThemePreference;
     resolvedTheme: ResolvedTheme;

package/dist/types/utils/dialog-scope.d.ts

@@ -0,0 +1,7 @@
+export interface DialogScopeTracker {
+    showing: (id: string) => void;
+    hidden: (id: string) => void;
+}
+export declare const DialogScopeContext: import("react").Context<DialogScopeTracker | null>;
+export declare function useScopedDialog(open: boolean | undefined): (open: boolean) => void;
+export declare function useOpenSession(open: boolean): number;

package/dist/types/utils/lazy-module.d.ts

@@ -3,6 +3,11 @@ export interface LazyModule<T> {
     load: () => Promise<T>;
 }
 export declare function lazyModulesSettled(): Promise<void>;
-export declare function lazyModule<T>(load: () => Promise<T>): LazyModule<T>;
+export interface LazyModuleOptions<T> {
+    base?: (() => string) | undefined;
+    reimport?: ((url: string) => Promise<T>) | undefined;
+}
+export declare function lazyModule<T>(load: () => Promise<T>, { base, reimport }?: LazyModuleOptions<T>): LazyModule<T>;
 export declare function preload<T>(m: LazyModule<T>): void;
-export declare function useLazyModule<T>(m: LazyModule<T>, wanted: boolean): T | undefined;
+export declare function useLazyModule<T>(m: LazyModule<T>, wanted: boolean, onFail?: (() => void) | undefined): T | undefined;
+export declare function useLazyModuleRetried<T>(m: LazyModule<T>, wanted: boolean): [T | undefined, () => void];

package/dist/types/utils/observe-resize.d.ts

@@ -0,0 +1 @@
+export declare function observeResize(targets: Iterable<Element>, onResize: (entries: readonly ResizeObserverEntry[]) => void): () => void;

package/dist/types/utils/resize-motion.d.ts

@@ -0,0 +1,2 @@
+export declare function resizeSources(box: Element): Element[];
+export declare function useResizeMotion(box: HTMLElement | null, onSettle?: (() => void) | undefined): void;

package/foundations/motion.md

@@ -33,6 +33,7 @@ Loading keeps one beat of 800ms on the pulse easing. The spinner is three routes
 ## Rules
 
 - Overlays scale from 0.96 and fade from their trigger; dialogs from 0.98 in the center; sheets slide from their edge.
+- A dialog whose content changes stays centered and grows or shrinks to its new size from the size it has, in `--k-duration-dialog` on the `standard` curve; a sheet from the bottom grows upwards. Keep one dialog open through a task, and change its content, rather than closing one dialog and opening another.
 - No page-enter animation and no loops but loading's.
 - Never `transition: all`; only the properties that change.
 - With reduced motion, transforms are removed and only opacity changes remain.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicplanes/kaeso-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Kaeso's UI library: React components on Base UI, Tailwind CSS v4 and the Kaeso tokens.",
   "license": "MIT",
   "author": "Devin Oldenburg",
@@ -102,7 +102,7 @@
     "shiki": "4.4.3",
     "tailwind-merge": "3.7.0",
     "uqr": "0.1.3",
-    "@logicplanes/kaeso-tokens": "0.1.0"
+    "@logicplanes/kaeso-tokens": "0.2.0"
   },
   "devDependencies": {
     "@hugeicons/core-free-icons": "4.3.5",

package/dist/chunks/app-frame-BBIMch8X.js

@@ -1,224 +0,0 @@
-"use client";
-import { t as e } from "./cn-CidVUKMm.js";
-import { r as t } from "./portal-context-BBbzDKmY.js";
-import { t as n } from "./inset-BLMdxX4I.js";
-import { i as r } from "./context-BELWW79w.js";
-import { a as i } from "./button-BHKAE6ui.js";
-import { t as a } from "./icon-button-Bw67oKtx.js";
-import { c as o, l as s, s as c, t as l } from "./sidebar-C4fL_KMm.js";
-import { createContext as u, forwardRef as d, useContext as f, useEffect as p, useId as m, useRef as h, useState as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { SidebarLeftIcon as y } from "@hugeicons/core-free-icons";
-import { Dialog as b } from "@base-ui/react/dialog";
-//#region src/components/app-frame/app-frame.tsx
-var x = { fill: {
-	screen: { classes: "h-dvh" },
-	parent: { classes: "h-full" }
-} }, S = { fill: "screen" }, C = /* @__PURE__ */ u({
-	openNav: () => void 0,
-	embedded: !1
-}), w = () => f(C), T = /* @__PURE__ */ d(function({ sidebar: t, children: n, corner: r, fill: i = "screen", brandHref: a, brandLabel: o, className: s }, c) {
-	let [l, u] = g(!1), d = h(null), f = `k-main-${m().replace(/[^\w-]/g, "")}`, p = i === "screen" ? "main" : "div";
-	return /* @__PURE__ */ v(C.Provider, {
-		value: {
-			openNav: () => u(!0),
-			embedded: i === "parent"
-		},
-		children: [/* @__PURE__ */ v("div", {
-			ref: c,
-			className: e("relative isolate flex w-full flex-col overflow-hidden bg-chrome text-fg lg:flex-row", x.fill[i].classes, s),
-			children: [
-				/* @__PURE__ */ _(E, { target: f }),
-				/* @__PURE__ */ _("div", {
-					className: "hidden h-full lg:flex",
-					children: t
-				}),
-				/* @__PURE__ */ _(D, {
-					banner: i === "screen",
-					href: a,
-					label: o,
-					open: l,
-					onOpen: () => u(!0),
-					toggleRef: d
-				}),
-				/* @__PURE__ */ _(p, {
-					id: f,
-					className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-panel outline-none safe-area-panel lg:my-8 lg:mr-8 lg:rounded-panel lg:shadow-panel",
-					children: n
-				}),
-				r && /* @__PURE__ */ _("div", {
-					className: "fixed right-16 bottom-16 z-10 flex items-center gap-8",
-					children: r
-				})
-			]
-		}), /* @__PURE__ */ _(A, {
-			navOpen: l,
-			setNavOpen: u,
-			returnFocus: d,
-			children: t
-		})]
-	});
-});
-process.env.NODE_ENV !== "production" && (T.displayName = "AppFrame");
-function E({ target: t }) {
-	let n = r();
-	return /* @__PURE__ */ _("a", {
-		href: `#${t}`,
-		onClick: (e) => {
-			let n = document.getElementById(t);
-			n && (e.preventDefault(), n.setAttribute("tabindex", "-1"), n.addEventListener("blur", () => n.removeAttribute("tabindex"), { once: !0 }), n.focus());
-		},
-		className: e(i({ size: "sm" }), "absolute top-8 left-8 z-50 not-focus:sr-only"),
-		children: n("appFrame.skipToContent", "Skip to content")
-	});
-}
-process.env.NODE_ENV !== "production" && (E.displayName = "AppFrame.SkipLink");
-function D({ banner: e, href: t, label: n, open: i, onOpen: o, toggleRef: s }) {
-	let c = e ? "header" : "div", u = r();
-	return /* @__PURE__ */ _(c, {
-		"data-phone-bar": "",
-		className: "shrink-0 bg-panel safe-area-bar lg:hidden",
-		children: /* @__PURE__ */ v("div", {
-			className: "mt-8 flex h-52 items-center justify-between pr-20 pl-28",
-			children: [/* @__PURE__ */ _(l, {
-				href: t,
-				label: n
-			}), /* @__PURE__ */ _(a, {
-				ref: s,
-				icon: y,
-				"aria-label": u("appFrame.openNavigation", "Open navigation"),
-				"aria-haspopup": "dialog",
-				"aria-expanded": i,
-				tooltip: !1,
-				onClick: o
-			})]
-		})
-	});
-}
-process.env.NODE_ENV !== "production" && (D.displayName = "AppFrame.PhoneBar");
-function O({ open: e, onOpenChange: n, peek: i = !1, returnFocus: a, children: s }) {
-	let l = h(void 0), u = r();
-	return p(() => {
-		if (!e || i || typeof window > "u") return;
-		let t = window.matchMedia("(min-width: 1024px)"), r = () => t.matches && n(!1);
-		return r(), t.addEventListener("change", r), () => t.removeEventListener("change", r);
-	}, [
-		e,
-		i,
-		n
-	]), /* @__PURE__ */ _(b.Root, {
-		open: e,
-		onOpenChange: (e) => n(e),
-		modal: !i,
-		children: /* @__PURE__ */ v(b.Portal, {
-			container: t(),
-			children: [/* @__PURE__ */ _(b.Backdrop, { className: "fixed inset-0 z-40 bg-overlay opacity-60 backdrop-motion" }), /* @__PURE__ */ _(b.Popup, {
-				"aria-label": u("appFrame.navigation", "Navigation"),
-				"data-side": "left",
-				initialFocus: !i,
-				...a ? { finalFocus: a } : {},
-				className: "fixed top-0 bottom-0 left-0 z-40 flex overflow-hidden rounded-r-sheet bg-chrome shadow-dialog outline-none safe-area-sheet sheet-motion",
-				onClick: (e) => {
-					e.target.closest("a[href]") && n(!1);
-				},
-				onPointerEnter: () => clearTimeout(l.current),
-				onPointerLeave: () => {
-					i && (l.current = setTimeout(() => n(!1), 160));
-				},
-				children: /* @__PURE__ */ _(c.Provider, {
-					value: !0,
-					children: /* @__PURE__ */ _(o.Provider, {
-						value: {
-							close: () => n(!1),
-							peek: i
-						},
-						children: s
-					})
-				})
-			})]
-		})
-	});
-}
-process.env.NODE_ENV !== "production" && (O.displayName = "NavSheet");
-var k = 750;
-function A({ navOpen: e, setNavOpen: t, returnFocus: n, children: r }) {
-	let { peeking: i, setPeeking: a } = s();
-	return /* @__PURE__ */ _(O, {
-		open: e || i,
-		peek: i && !e,
-		...e ? { returnFocus: n } : {},
-		onOpenChange: (e) => {
-			e || (t(!1), a(!1));
-		},
-		children: r
-	});
-}
-function j({ className: t }) {
-	let { openNav: n } = w(), { collapsed: i, setCollapsed: o, setPeeking: c } = s(), l = h(void 0), u = r(), d = () => typeof window < "u" && window.matchMedia("(min-width: 1024px)").matches;
-	return /* @__PURE__ */ _(a, {
-		onPointerEnter: () => {
-			i && d() && (l.current = setTimeout(() => c(!0), 750));
-		},
-		onPointerLeave: () => clearTimeout(l.current),
-		icon: y,
-		"data-sidebar-expand": "",
-		"aria-label": i ? u("appFrame.expandSidebar", "Expand sidebar") : u("appFrame.openNavigation", "Open navigation"),
-		shortcut: i ? ["["] : void 0,
-		onClick: () => {
-			clearTimeout(l.current), i && d() ? o(!1) : n();
-		},
-		className: e("hidden", i && "lg:inline-flex", t)
-	});
-}
-process.env.NODE_ENV !== "production" && (j.displayName = "AppFrame.MenuButton");
-var M = { padding: {
-	none: { classes: "" },
-	list: { classes: "pt-8 pb-24" },
-	page: { classes: "px-24 pt-16 pb-48" }
-} }, N = { padding: "none" }, P = /* @__PURE__ */ d(function({ className: t, padding: n = "none", ...r }, i) {
-	return /* @__PURE__ */ _("div", {
-		ref: i,
-		className: e("min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-quiet", M.padding[n].classes, t),
-		...r
-	});
-});
-process.env.NODE_ENV !== "production" && (P.displayName = "AppFrame.Body");
-var F = /* @__PURE__ */ d(function({ title: t, description: r, actions: i, className: a, children: o, ...s }, c) {
-	return /* @__PURE__ */ v(P, {
-		ref: c,
-		className: "relative",
-		children: [/* @__PURE__ */ _(j, { className: "absolute top-10 left-12 z-10" }), /* @__PURE__ */ v("div", {
-			className: e("mx-auto w-full max-w-settings px-24 pt-64 pb-96", a),
-			...s,
-			children: [/* @__PURE__ */ v("header", {
-				className: "flex flex-col gap-8",
-				children: [/* @__PURE__ */ v("div", {
-					className: "flex items-start justify-between gap-16",
-					children: [/* @__PURE__ */ _("h1", {
-						className: "min-w-0 text-title-lg font-semibold text-fg text-balance",
-						children: t
-					}), i && /* @__PURE__ */ _("div", {
-						className: "flex h-34 shrink-0 items-center gap-8",
-						children: i
-					})]
-				}), r && /* @__PURE__ */ _("p", {
-					className: "text-body-lg font-regular text-fg-secondary",
-					children: r
-				})]
-			}), /* @__PURE__ */ _("div", {
-				className: "mt-8",
-				children: /* @__PURE__ */ _(n, { children: o })
-			})]
-		})]
-	});
-});
-process.env.NODE_ENV !== "production" && (F.displayName = "AppFrame.Settings");
-var I = /* @__PURE__ */ Object.assign(T, {
-	MenuButton: j,
-	Body: P,
-	Settings: F
-});
-//#endregion
-export { x as a, w as c, S as i, N as n, O as o, M as r, k as s, I as t };
-
-//# sourceMappingURL=app-frame-BBIMch8X.js.map