@ngrok/mantle 0.81.1 → 0.82.1

package/dist/app-layout.d.ts

@@ -0,0 +1,566 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { ComponentProps } from "react";
+//#region src/components/app-layout/app-layout.d.ts
+/**
+ * The outer frame of an application shell. Renders a `<div>` with
+ * `relative isolate flex h-full w-full flex-col overflow-clip`, so
+ * it fills its nearest sized ancestor — which makes it embeddable in docs
+ * demos and tests. Real app shells pin it to the viewport by merging
+ * `className="fixed inset-0"` (mantle `cx` is tailwind-merge-backed, so the
+ * override is deterministic); the shell itself never scrolls — only
+ * `AppLayout.Body` does.
+ *
+ * It clips with `overflow-clip` rather than `overflow-hidden` for the same
+ * reason `AppLayout.Content` does: `hidden` **is** a scroll container that
+ * paints no scrollbar, so anything wider than the frame lets focus scroll the
+ * entire shell sideways — translating the notice, the rail, and the card out of
+ * view with no scrollbar and no gesture to bring them back. On a frame pinned
+ * with `fixed inset-0` that is the whole window. `clip` is not a scroll
+ * container at all.
+ *
+ * When the shell owns the document, render a `SkipToMainLink` as its first
+ * child and compose the `Main` landmark into `AppLayout.Body` via `asChild` so
+ * keyboard users can jump past the sidebar and toolbar straight into the
+ * scrolling page region.
+ *
+ * @see https://mantle.ngrok.com/layouts/app-layout#applayoutroot
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <AppLayout.Root className="fixed inset-0">
+ *     <SkipToMainLink />
+ *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+ *     <AppLayout.Workspace>
+ *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+ *       <AppLayout.Content>
+ *         <AppLayout.Header>
+ *           <Sidebar.Trigger />
+ *           <Breadcrumbs />
+ *         </AppLayout.Header>
+ *         <AppLayout.Body asChild>
+ *           <Main>
+ *             <Outlet />
+ *           </Main>
+ *         </AppLayout.Body>
+ *       </AppLayout.Content>
+ *     </AppLayout.Workspace>
+ *   </AppLayout.Root>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Root: ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"div"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
+/**
+ * A full-window-width strip pinned above everything else in the shell —
+ * including any sidebar — for maintenance notices, environment warnings,
+ * and similar app-wide messaging. It is a vertical composition slot: place a
+ * maintenance banner and an `AlertCenter.Bar` here, and each contributes its
+ * own row while the slot pushes the shell down. Renders an unstyled `<div>`
+ * (`flex w-full shrink-0 flex-col`): its children bring their own colors and
+ * layout, and the part collapses to nothing when empty. Deliberately not named
+ * `Banner` so it never reads as the ARIA `banner` landmark — it claims no
+ * landmark at all.
+ *
+ * @see https://mantle.ngrok.com/layouts/app-layout#applayoutnotice
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <AppLayout.Root className="fixed inset-0">
+ *     <SkipToMainLink />
+ *     <AppLayout.Notice>
+ *       {isUnderMaintenance && (
+ *         <div className="bg-red-500 text-on-filled flex items-center gap-2 px-4 py-1 text-xs">
+ *           The dashboard is read-only until {maintenanceEndsAt}.
+ *         </div>
+ *       )}
+ *     </AppLayout.Notice>
+ *     <AppLayout.Workspace>
+ *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+ *       <AppLayout.Content>
+ *         <AppLayout.Header>
+ *           <Sidebar.Trigger />
+ *           <Breadcrumbs />
+ *         </AppLayout.Header>
+ *         <AppLayout.Body asChild>
+ *           <Main>
+ *             <Outlet />
+ *           </Main>
+ *         </AppLayout.Body>
+ *       </AppLayout.Content>
+ *     </AppLayout.Workspace>
+ *   </AppLayout.Root>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Notice: ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"div"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
+/**
+ * The region where the user actually works: everything below
+ * `AppLayout.Notice`, laid out as a row of columns. Place a `Sidebar.Nav` (or
+ * any other rail, on either side) beside an `AppLayout.Content` card. A flex row
+ * (`flex min-h-0 flex-1`) whose `min-h-0` is what lets `AppLayout.Body` scroll
+ * instead of the page.
+ *
+ * It owns no gutter, deliberately: the card insets itself with its own margin,
+ * so a rail stays flush against the window edge and a collapsed icon rail keeps
+ * its flush geometry.
+ *
+ * @see https://mantle.ngrok.com/layouts/app-layout#applayoutworkspace
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <AppLayout.Root className="fixed inset-0">
+ *     <SkipToMainLink />
+ *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+ *     <AppLayout.Workspace>
+ *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+ *       <AppLayout.Content>
+ *         <AppLayout.Header>
+ *           <Sidebar.Trigger />
+ *           <Breadcrumbs />
+ *         </AppLayout.Header>
+ *         <AppLayout.Body asChild>
+ *           <Main>
+ *             <Outlet />
+ *           </Main>
+ *         </AppLayout.Body>
+ *       </AppLayout.Content>
+ *     </AppLayout.Workspace>
+ *   </AppLayout.Root>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Workspace: ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"div"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
+/**
+ * The content card of the shell: a rounded, bordered `bg-card` surface beside
+ * the sidebar, holding `AppLayout.Header` and `AppLayout.Body`. A flex column
+ * that fills the remaining width of
+ * `AppLayout.Workspace` and insets itself from the window edge and the rail with
+ * its own margin (`--app-layout-card-gutter`, default `0.5rem`) — the gutter
+ * belongs to the card so a rail stays flush against the window edge.
+ *
+ * The card does **not** scroll: `AppLayout.Body` does. `Content` is
+ * `overflow-clip`, which does two jobs — it keeps a full-bleed page background
+ * from painting square corners over the card's `rounded-xl`, and it is
+ * deliberately `clip` rather than `hidden` because `hidden` is a scroll
+ * container with no scrollbar: a long toolbar would let focus scroll the card
+ * sideways, dragging the header and the page with it, and nothing could scroll
+ * it back.
+ *
+ * It is also `relative`, so page content positioned with `absolute` resolves
+ * against the card instead of escaping to `AppLayout.Root` and painting across
+ * the sidebar rail.
+ *
+ * **CSS variables (public API):**
+ *
+ * | CSS Variable | Default | Description |
+ * | --- | --- | --- |
+ * | `--app-layout-card-gutter` | `0.5rem` | The gap between the card and the window edge, the notice above it, and the rail beside it (8px). `AppLayout.Header` subtracts twice this value when deriving its height, so overriding it keeps the toolbar aligned with the sidebar header. |
+ *
+ * @see https://mantle.ngrok.com/layouts/app-layout#applayoutcontent
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <AppLayout.Root className="fixed inset-0">
+ *     <SkipToMainLink />
+ *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+ *     <AppLayout.Workspace>
+ *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+ *       <AppLayout.Content>
+ *         <AppLayout.Header>
+ *           <Sidebar.Trigger />
+ *           <Breadcrumbs />
+ *         </AppLayout.Header>
+ *         <AppLayout.Body asChild>
+ *           <Main>
+ *             <Outlet />
+ *           </Main>
+ *         </AppLayout.Body>
+ *       </AppLayout.Content>
+ *     </AppLayout.Workspace>
+ *   </AppLayout.Root>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Content: ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"div"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
+/**
+ * The toolbar row at the top of the content card — render it as the **first
+ * child of `AppLayout.Content`**. The natural home for a `Sidebar.Trigger` in
+ * its top-left, followed by `Breadcrumb` navigation, search, or page-level
+ * actions.
+ *
+ * It is pinned by construction, not by `sticky`: as a `shrink-0` flex sibling
+ * *outside* the scrolling `AppLayout.Body`, it cannot scroll away, cannot be
+ * overlapped by a page's own `sticky top-0`, and does not translate sideways
+ * when the page scrolls horizontally. It also no longer steals height from a
+ * page that asks for `h-full`.
+ *
+ * Renders a `<div>`, not a `<header>`: the `Main` landmark is composed onto
+ * `AppLayout.Body`, so a `<header>` here would have no sectioning ancestor and
+ * would therefore *become* the ARIA `banner` landmark — which a card toolbar is
+ * not. Compose your own element with `asChild` if you need one.
+ *
+ * **Sidebar alignment is an invariant, not a coincidence:** standalone, the
+ * toolbar is `h-14`. When the shell contains a `Sidebar.Header` (detected via
+ * `:has()` from `AppLayout.Root`), the toolbar instead derives its height from
+ * the sidebar's public `--sidebar-header-height` token, subtracting twice the
+ * card gutter and twice the card's hairline border — which keeps the two rows'
+ * vertical centers on the same band by construction, for any header height.
+ * Override `--sidebar-header-height` on a common ancestor (e.g.
+ * `AppLayout.Root`'s `className`) and both rows move together.
+ *
+ * **CSS variables (public API):**
+ *
+ * | CSS Variable | Default | Description |
+ * | --- | --- | --- |
+ * | `--sidebar-header-height` | `4.5rem` | Read, not owned: `Sidebar.Header` owns this token and `AppLayout.Header` derives its own height from it whenever a sidebar header is present in the shell. Set it on a common ancestor of both rows (e.g. `AppLayout.Root`), never on one of them, since custom properties only inherit downward. |
+ * | `--app-layout-card-gutter` | `0.5rem` | Read, not owned: `AppLayout.Content` owns this token. The derived height subtracts twice its value, so changing the card gutter keeps the two rows aligned instead of drifting. |
+ *
+ * @see https://mantle.ngrok.com/layouts/app-layout#applayoutheader
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <AppLayout.Root className="fixed inset-0">
+ *     <SkipToMainLink />
+ *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+ *     <AppLayout.Workspace>
+ *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+ *       <AppLayout.Content>
+ *         <AppLayout.Header>
+ *           <Sidebar.Trigger />
+ *           <Breadcrumbs />
+ *         </AppLayout.Header>
+ *         <AppLayout.Body asChild>
+ *           <Main>
+ *             <Outlet />
+ *           </Main>
+ *         </AppLayout.Body>
+ *       </AppLayout.Content>
+ *     </AppLayout.Workspace>
+ *   </AppLayout.Root>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Header: ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"div"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
+/**
+ * The page region of the content card, and the shell's **only** scroll
+ * container (`overflow-y-auto overscroll-none`) — the page body never scrolls
+ * and scroll never bounces the shell. Render it after `AppLayout.Header` inside
+ * `AppLayout.Content`.
+ *
+ * In a real app shell this should almost always be mantle's `Main` landmark,
+ * composed via `asChild`, and paired with a `SkipToMainLink` as the first child
+ * of `AppLayout.Root` (`SkipToMainLink`'s default `targetId` matches `Main`'s
+ * `id="main"`). Composing `Main` here rather than onto the card is what makes
+ * the skip link actually useful: the focused landmark **is** the scroll
+ * container, so arrows, `Space`, and `PageDown` scroll the page immediately, and
+ * the skip really does jump past the sidebar *and* the toolbar. The plain
+ * `<div>` default exists for embedded usage (docs demos, tests) where the
+ * surrounding document already owns the Main landmark.
+ *
+ * It is a flex **item** that is **block inside**, and both halves are
+ * load-bearing:
+ *
+ * - `min-h-0 flex-1` gives it a definite height, so a page that asks for
+ *   `h-full` fills exactly the card interior instead of overflowing it by the
+ *   toolbar's height.
+ * - block layout inside — not flex — is why `mx-auto max-w-7xl` still centers a
+ *   page at its max width. As a *flex child*, auto margins beat
+ *   `align-items: stretch` and the same container shrink-to-fits, getting
+ *   *narrower* as the viewport gets wider.
+ * - `w-full` states the width outright instead of leaning on the flex
+ *   container's cross-axis `stretch`, so an `mx-auto` merged onto `Body` still
+ *   leaves it full width — auto cross-axis margins would otherwise turn a
+ *   stretched item into a shrink-to-fit one. It is no floor, though: `cx` is
+ *   tailwind-merge-backed and the consumer's `className` wins, so a merged
+ *   `w-*` replaces it outright, while a merged `max-w-*` — a separate conflict
+ *   group — survives beside it and clamps the scrollport. Constrain the *page*
+ *   inside `Body`, not `Body` itself.
+ *
+ * It is `relative` too, so page content positioned with `absolute` is contained
+ * by the scrollport the route author is already reasoning about.
+ *
+ * @see https://mantle.ngrok.com/layouts/app-layout#applayoutbody
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <AppLayout.Root className="fixed inset-0">
+ *     <SkipToMainLink />
+ *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+ *     <AppLayout.Workspace>
+ *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+ *       <AppLayout.Content>
+ *         <AppLayout.Header>
+ *           <Sidebar.Trigger />
+ *           <Breadcrumbs />
+ *         </AppLayout.Header>
+ *         <AppLayout.Body asChild>
+ *           <Main>
+ *             <Outlet />
+ *           </Main>
+ *         </AppLayout.Body>
+ *       </AppLayout.Content>
+ *     </AppLayout.Workspace>
+ *   </AppLayout.Root>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Body: ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"div"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
+/**
+ * A viewport-locked application shell: an optional full-width
+ * `AppLayout.Notice` strip on top, then an `AppLayout.Workspace` row holding the
+ * app's columns — typically a `Sidebar.Nav` beside an `AppLayout.Content` card
+ * whose `AppLayout.Body` is the only thing that scrolls. It owns structure only
+ * and is deliberately unaware of any sidebar: compose `Sidebar.Root` around it
+ * and place `Sidebar.Trigger` in `AppLayout.Header` to connect the two.
+ *
+ * Reach for it when a signed-in application needs navigation chrome that
+ * persists across routes. When the page is a single centered task surface with
+ * no rail — sign in, sign up, onboarding, a standalone flow, a 404 — compose
+ * [`CenteredLayout`](https://mantle.ngrok.com/layouts/centered-layout) instead.
+ *
+ * The card reads exactly like the column beside it and like every other mantle
+ * surface — `Content > Header + Body`, the same shape as `Sidebar.Nav`,
+ * `Dialog.Content`, `Sheet.Content`, and `Card.Root`.
+ *
+ * There is deliberately no `Footer` part: a route rendering through an
+ * `<Outlet />` inside `AppLayout.Body` could never reach one, and a page-owned
+ * bottom bar is exactly what most consumers want. Make the page's root a flex
+ * column instead — see the docs' "Sizing a page to the card".
+ *
+ * @see https://mantle.ngrok.com/layouts/app-layout
+ *
+ * @example
+ * Composition:
+ * ```
+ * AppLayout.Root
+ * ├── AppLayout.Notice
+ * └── AppLayout.Workspace
+ *     └── AppLayout.Content
+ *         ├── AppLayout.Header
+ *         └── AppLayout.Body
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <AppLayout.Root className="fixed inset-0">
+ *     <SkipToMainLink />
+ *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+ *     <AppLayout.Workspace>
+ *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+ *       <AppLayout.Content>
+ *         <AppLayout.Header>
+ *           <Sidebar.Trigger />
+ *           <Breadcrumbs />
+ *         </AppLayout.Header>
+ *         <AppLayout.Body asChild>
+ *           <Main>
+ *             <Outlet />
+ *           </Main>
+ *         </AppLayout.Body>
+ *       </AppLayout.Content>
+ *     </AppLayout.Workspace>
+ *   </AppLayout.Root>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const AppLayout: {
+  /**
+   * The outer frame. Fills its nearest sized ancestor; merge
+   * `className="fixed inset-0"` to pin a real app shell to the viewport.
+   *
+   * @see https://mantle.ngrok.com/layouts/app-layout#applayoutroot
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <AppLayout.Root className="fixed inset-0">
+   *     <SkipToMainLink />
+   *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+   *     <AppLayout.Workspace>
+   *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+   *       <AppLayout.Content>
+   *         <AppLayout.Header>
+   *           <Sidebar.Trigger />
+   *           <Breadcrumbs />
+   *         </AppLayout.Header>
+   *         <AppLayout.Body asChild>
+   *           <Main>
+   *             <Outlet />
+   *           </Main>
+   *         </AppLayout.Body>
+   *       </AppLayout.Content>
+   *     </AppLayout.Workspace>
+   *   </AppLayout.Root>
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * A full-window-width strip above everything (maintenance notices,
+   * environment warnings). Unstyled; collapses when empty.
+   *
+   * @see https://mantle.ngrok.com/layouts/app-layout#applayoutnotice
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <AppLayout.Root className="fixed inset-0">
+   *     <SkipToMainLink />
+   *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+   *     <AppLayout.Workspace>
+   *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+   *       <AppLayout.Content>
+   *         <AppLayout.Header>
+   *           <Sidebar.Trigger />
+   *           <Breadcrumbs />
+   *         </AppLayout.Header>
+   *         <AppLayout.Body asChild>
+   *           <Main>
+   *             <Outlet />
+   *           </Main>
+   *         </AppLayout.Body>
+   *       </AppLayout.Content>
+   *     </AppLayout.Workspace>
+   *   </AppLayout.Root>
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Notice: typeof Notice;
+  /**
+   * The row below the notice where the user works — place a `Sidebar.Nav`
+   * beside an `AppLayout.Content` card here.
+   *
+   * @see https://mantle.ngrok.com/layouts/app-layout#applayoutworkspace
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <AppLayout.Root className="fixed inset-0">
+   *     <SkipToMainLink />
+   *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+   *     <AppLayout.Workspace>
+   *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+   *       <AppLayout.Content>
+   *         <AppLayout.Header>
+   *           <Sidebar.Trigger />
+   *           <Breadcrumbs />
+   *         </AppLayout.Header>
+   *         <AppLayout.Body asChild>
+   *           <Main>
+   *             <Outlet />
+   *           </Main>
+   *         </AppLayout.Body>
+   *       </AppLayout.Content>
+   *     </AppLayout.Workspace>
+   *   </AppLayout.Root>
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Workspace: typeof Workspace;
+  /**
+   * The rounded `bg-card` surface beside the sidebar, holding the toolbar and
+   * the page region. Insets itself with `--app-layout-card-gutter`; does not
+   * scroll — `AppLayout.Body` does.
+   *
+   * @see https://mantle.ngrok.com/layouts/app-layout#applayoutcontent
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <AppLayout.Root className="fixed inset-0">
+   *     <SkipToMainLink />
+   *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+   *     <AppLayout.Workspace>
+   *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+   *       <AppLayout.Content>
+   *         <AppLayout.Header>
+   *           <Sidebar.Trigger />
+   *           <Breadcrumbs />
+   *         </AppLayout.Header>
+   *         <AppLayout.Body asChild>
+   *           <Main>
+   *             <Outlet />
+   *           </Main>
+   *         </AppLayout.Body>
+   *       </AppLayout.Content>
+   *     </AppLayout.Workspace>
+   *   </AppLayout.Root>
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Content: typeof Content;
+  /**
+   * The toolbar row at the top of the content card — `AppLayout.Content`'s
+   * first child, with `Sidebar.Trigger` in its top-left followed by
+   * breadcrumbs. Pinned by `shrink-0`, not `sticky`.
+   *
+   * @see https://mantle.ngrok.com/layouts/app-layout#applayoutheader
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <AppLayout.Root className="fixed inset-0">
+   *     <SkipToMainLink />
+   *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+   *     <AppLayout.Workspace>
+   *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+   *       <AppLayout.Content>
+   *         <AppLayout.Header>
+   *           <Sidebar.Trigger />
+   *           <Breadcrumbs />
+   *         </AppLayout.Header>
+   *         <AppLayout.Body asChild>
+   *           <Main>
+   *             <Outlet />
+   *           </Main>
+   *         </AppLayout.Body>
+   *       </AppLayout.Content>
+   *     </AppLayout.Workspace>
+   *   </AppLayout.Root>
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Header: typeof Header;
+  /**
+   * The page region and the shell's only scroll container. A flex item that is
+   * block inside, so `h-full` pages fit the card and `mx-auto max-w-7xl` pages
+   * still center. Compose `Main` here via `asChild` when the shell owns the
+   * document.
+   *
+   * @see https://mantle.ngrok.com/layouts/app-layout#applayoutbody
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <AppLayout.Root className="fixed inset-0">
+   *     <SkipToMainLink />
+   *     <AppLayout.Notice>{isUnderMaintenance && <MaintenanceBanner />}</AppLayout.Notice>
+   *     <AppLayout.Workspace>
+   *       <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+   *       <AppLayout.Content>
+   *         <AppLayout.Header>
+   *           <Sidebar.Trigger />
+   *           <Breadcrumbs />
+   *         </AppLayout.Header>
+   *         <AppLayout.Body asChild>
+   *           <Main>
+   *             <Outlet />
+   *           </Main>
+   *         </AppLayout.Body>
+   *       </AppLayout.Content>
+   *     </AppLayout.Workspace>
+   *   </AppLayout.Root>
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Body: typeof Body;
+};
+//#endregion
+export { AppLayout };

package/dist/app-layout.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout`),className:e(`group/app-layout bg-base relative isolate flex h-full w-full flex-col`,`overflow-clip`,o),...c,children:a}),Notice:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-notice`),className:e(`flex w-full shrink-0 flex-col`,o),...c,children:a}),Workspace:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-workspace`),className:e(`flex min-h-0 flex-1`,o),...c,children:a}),Content:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-content`),className:e(`bg-card border-card-muted relative flex min-w-0 flex-1 flex-col rounded-xl border shadow-sm`,`m-[var(--app-layout-card-gutter,0.5rem)]`,`overflow-clip`,o),...c,children:a}),Header:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-header`),className:e(`border-card-muted flex h-14 shrink-0 items-center gap-2 border-b px-4`,`group-has-[[data-slot~=sidebar-header]]/app-layout:h-[calc(var(--sidebar-header-height,4.5rem)-2*var(--app-layout-card-gutter,0.5rem)-2px)]`,o),...c,children:a}),Body:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-body`),className:e(`scrollbar relative min-h-0 w-full flex-1 overflow-y-auto overscroll-none`,o),...c,children:a})};export{i as AppLayout};

package/dist/area-chart.js

@@ -1 +1 @@
-import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-Do2qkrxl.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`area`,componentName:`AreaChart`,slotName:`area-chart`,...e}),Area:e=>a(`AreaChart.Area`,`area`,e),Grid:e=>n(`AreaChart.Grid`,e),XAxis:e=>t(`AreaChart.XAxis`,e),YAxis:e=>r(`AreaChart.YAxis`,e),ReferenceLine:t=>e(`AreaChart.ReferenceLine`,t),Tooltip:e=>s(`AreaChart.Tooltip`,e),Legend:e=>l(i,{partName:`AreaChart.Legend`,slotName:`area-chart`,...e}),CopyButton:e=>l(c,{partName:`AreaChart.CopyButton`,slotName:`area-chart`,...e})};export{u as AreaChart};
+import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-B3pAvmkk.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`area`,componentName:`AreaChart`,slotName:`area-chart`,...e}),Area:e=>a(`AreaChart.Area`,`area`,e),Grid:e=>n(`AreaChart.Grid`,e),XAxis:e=>t(`AreaChart.XAxis`,e),YAxis:e=>r(`AreaChart.YAxis`,e),ReferenceLine:t=>e(`AreaChart.ReferenceLine`,t),Tooltip:e=>s(`AreaChart.Tooltip`,e),Legend:e=>l(i,{partName:`AreaChart.Legend`,slotName:`area-chart`,...e}),CopyButton:e=>l(c,{partName:`AreaChart.CopyButton`,slotName:`area-chart`,...e})};export{u as AreaChart};

package/dist/badge.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-CDk0Bb9z.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),p]})},d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-DpNWVci8.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),p]})},d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};

package/dist/bar-chart.js

@@ -1 +1 @@
-import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-Do2qkrxl.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`bar`,componentName:`BarChart`,slotName:`bar-chart`,...e}),Bar:e=>a(`BarChart.Bar`,`bar`,e),Grid:e=>n(`BarChart.Grid`,e),XAxis:e=>t(`BarChart.XAxis`,e),YAxis:e=>r(`BarChart.YAxis`,e),ReferenceLine:t=>e(`BarChart.ReferenceLine`,t),Tooltip:e=>s(`BarChart.Tooltip`,e),Legend:e=>l(i,{partName:`BarChart.Legend`,slotName:`bar-chart`,...e}),CopyButton:e=>l(c,{partName:`BarChart.CopyButton`,slotName:`bar-chart`,...e})};export{u as BarChart};
+import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-B3pAvmkk.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`bar`,componentName:`BarChart`,slotName:`bar-chart`,...e}),Bar:e=>a(`BarChart.Bar`,`bar`,e),Grid:e=>n(`BarChart.Grid`,e),XAxis:e=>t(`BarChart.XAxis`,e),YAxis:e=>r(`BarChart.YAxis`,e),ReferenceLine:t=>e(`BarChart.ReferenceLine`,t),Tooltip:e=>s(`BarChart.Tooltip`,e),Legend:e=>l(i,{partName:`BarChart.Legend`,slotName:`bar-chart`,...e}),CopyButton:e=>l(c,{partName:`BarChart.CopyButton`,slotName:`bar-chart`,...e})};export{u as BarChart};

package/dist/breadcrumb.d.ts

@@ -189,7 +189,7 @@ type BreadcrumbSeparatorProps = Omit<ComponentProps<"li">, "children"> & ({
  * </Breadcrumb.Root>
  * ```
  */
-declare const Separator: ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: BreadcrumbSeparatorProps & WithDataSlot) => import("react").JSX.Element;
+declare const Separator: ({ asChild, children, "data-slot": dataSlot, ref, ...props }: BreadcrumbSeparatorProps & WithDataSlot) => import("react").JSX.Element;
 /**
  * Compound component for WAI-ARIA breadcrumb navigation — the path from a
  * root to the current page as an ordered list of links inside a labeled

package/dist/breadcrumb.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{n,t as r}from"./slot-CDk0Bb9z.js";import{cloneElement as i,isValidElement as a}from"react";import{jsx as o}from"react/jsx-runtime";import{CaretRightIcon as s}from"@phosphor-icons/react/CaretRight";const c={Root:({asChild:e,children:t,"data-slot":i,ref:a,...s})=>o(e?r:`nav`,{ref:a,"data-slot":n(i,`breadcrumb`),"aria-label":`Breadcrumb`,...s,children:t}),List:({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`ol`,{ref:c,"data-slot":n(s,`breadcrumb-list`),className:e(`text-muted flex flex-wrap items-center gap-1.5 text-sm`,a),...l,children:i}),Item:({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`li`,{ref:c,"data-slot":n(s,`breadcrumb-item`),className:e(`inline-flex items-center gap-1.5`,a),...l,children:i}),Link:({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`a`,{ref:c,"data-slot":n(s,`breadcrumb-link`),className:e(`hover:text-strong transition-colors`,a),...l,children:i}),Page:({asChild:t,children:s,className:c,"data-slot":l,ref:u,...d})=>{let f=t?r:`span`,p=t&&a(s)?i(s,{"aria-current":`page`}):s;return o(f,{ref:u,"data-slot":n(l,`breadcrumb-page`),className:e(`text-strong`,c),...d,"aria-current":`page`,children:p})},Separator:({asChild:e,children:c,className:l,"data-slot":u,ref:d,...f})=>{let p=e?r:`li`,m=e&&a(c)?i(c,{role:`presentation`,"aria-hidden":`true`}):c??o(t,{svg:o(s,{}),className:`size-3.5`});return o(p,{ref:d,"data-slot":n(u,`breadcrumb-separator`),className:l,...f,role:`presentation`,"aria-hidden":`true`,children:m})}};export{c as Breadcrumb};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./data-slot-EM6s2WEU.js";import{t as r}from"./slot-DpNWVci8.js";import{cloneElement as i,isValidElement as a}from"react";import{jsx as o}from"react/jsx-runtime";import{CaretRightIcon as s}from"@phosphor-icons/react/CaretRight";const c={Root:({asChild:e,children:t,"data-slot":i,ref:a,...s})=>o(e?r:`nav`,{ref:a,"data-slot":n(i,`breadcrumb`),"aria-label":`Breadcrumb`,...s,children:t}),List:({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`ol`,{ref:c,"data-slot":n(s,`breadcrumb-list`),className:e(`text-muted flex flex-wrap items-center gap-1.5 text-sm`,a),...l,children:i}),Item:({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`li`,{ref:c,"data-slot":n(s,`breadcrumb-item`),className:e(`inline-flex items-center gap-1.5`,a),...l,children:i}),Link:({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`a`,{ref:c,"data-slot":n(s,`breadcrumb-link`),className:e(`hover:text-strong transition-colors`,a),...l,children:i}),Page:({asChild:t,children:s,className:c,"data-slot":l,ref:u,...d})=>{let f=t?r:`span`,p=t&&a(s)?i(s,{"aria-current":`page`}):s;return o(f,{ref:u,"data-slot":n(l,`breadcrumb-page`),className:e(`text-muted`,c),...d,"aria-current":`page`,children:p})},Separator:({asChild:e,children:c,"data-slot":l,ref:u,...d})=>{let f=e?r:`li`,p=e&&a(c)?i(c,{role:`presentation`,"aria-hidden":`true`}):c??o(t,{svg:o(s,{}),className:`size-3.5`});return o(f,{ref:u,"data-slot":n(l,`breadcrumb-separator`),...d,role:`presentation`,"aria-hidden":`true`,children:p})}};export{c as Breadcrumb};

package/dist/browser-only-CmEEzfU3.js

@@ -0,0 +1 @@
+import{t as e}from"./use-is-hydrated-DDCqXmju.js";function t({children:t,fallback:n=null}){return e()?t():n}function n(){return typeof window<`u`&&typeof document<`u`}export{n,t};

package/dist/browser-only.js

@@ -1 +1 @@
-import{n as e,t}from"./browser-only-CPH56Xw_.js";export{t as BrowserOnly,e as canUseDOM};
+import{n as e,t}from"./browser-only-CmEEzfU3.js";export{t as BrowserOnly,e as canUseDOM};

package/dist/{button-DjpEKt2X.js → button-Cnja9Bsr.js}

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./slot-CDk0Bb9z.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{t as i}from"./clsx-DUGZgXfJ.js";import{Children as a,cloneElement as o,isValidElement as s}from"react";import c from"tiny-invariant";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{cva as f}from"class-variance-authority";import{CircleNotchIcon as p}from"@phosphor-icons/react/CircleNotch";const m=f(``,{variants:{appearance:{filled:`bg-filled-accent text-white focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover border border-transparent text-sm font-medium`,ghost:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 border border-transparent text-sm font-medium`,outlined:`border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 border text-sm font-medium`,link:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent`},isLoading:{false:``,true:`opacity-50`},intent:{accent:``,danger:``,neutral:``},size:{xs:``,sm:``,md:``,lg:``,xl:``}},defaultVariants:{isLoading:!1,size:`md`},compoundVariants:[{appearance:[`filled`,`ghost`,`outlined`],size:`xs`,class:`h-6 px-2`},{appearance:[`filled`,`ghost`,`outlined`],size:`sm`,class:`h-7 px-2.5`},{appearance:[`filled`,`ghost`,`outlined`],size:`md`,class:`h-9 px-3`},{appearance:[`filled`,`ghost`,`outlined`],size:`lg`,class:`h-10 px-3.5`},{appearance:[`filled`,`ghost`,`outlined`],size:`xl`,class:`h-12 px-4`},{appearance:`ghost`,intent:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 border-transparent`},{appearance:`outlined`,intent:`danger`,class:`border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700`},{appearance:`filled`,intent:`danger`,class:`bg-filled-danger focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover border-transparent`},{appearance:`link`,intent:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger`},{appearance:`ghost`,intent:`neutral`,class:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`},{appearance:`outlined`,intent:`neutral`,class:`border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600`},{appearance:`filled`,intent:`neutral`,class:`bg-filled-neutral not-disabled:hover:bg-filled-neutral-hover border-transparent focus-visible:border-transparent text-neutral-50`},{appearance:`link`,intent:`neutral`,class:`text-strong focus-visible:ring-focus-accent`}]}),h={xs:`ps-1.5`,sm:`ps-2`,md:`ps-2.5`,lg:`ps-3`,xl:`ps-3.5`},g={xs:`pe-1.5`,sm:`pe-2`,md:`pe-2.5`,lg:`pe-3`,xl:`pe-3.5`},_=({"aria-disabled":f,appearance:_,asChild:v,children:y,className:b,disabled:x,icon:S,iconPlacement:C=`start`,intent:w,isLoading:T=!1,ref:E,size:D=`md`,type:O,...k})=>{let A=r(f??x??T),j=T?u(p,{className:`animate-spin`}):S,M=j&&_!==`link`,N={"aria-disabled":A,"data-slot":`button`,className:e(`inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`,m({appearance:_,intent:w,isLoading:T,size:D}),_!==`link`&&`font-sans`,M&&C===`start`&&h[D],M&&C===`end`&&g[D],b),"data-appearance":_,"data-disabled":A,"data-intent":w,"data-loading":T,"data-size":_===`link`?void 0:D,disabled:A,ref:E,...k};return v?(c(s(y)&&a.only(y),"When using `asChild`, Button must be passed a single child as a JSX tag."),u(n,{...N,children:o(y,{},d(l,{children:[j&&u(t,{svg:j,className:i(C===`end`&&`order-last`)}),y.props.children]}))})):d(`button`,{...N,type:O??`button`,children:[j&&u(t,{svg:j,className:i(C===`end`&&`order-last`)}),y]})};export{_ as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./slot-DpNWVci8.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{t as i}from"./clsx-DUGZgXfJ.js";import{Children as a,cloneElement as o,isValidElement as s}from"react";import c from"tiny-invariant";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{cva as f}from"class-variance-authority";import{CircleNotchIcon as p}from"@phosphor-icons/react/CircleNotch";const m=f(``,{variants:{appearance:{filled:`bg-filled-accent text-white focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover border border-transparent text-sm font-medium`,ghost:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 border border-transparent text-sm font-medium`,outlined:`border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 border text-sm font-medium`,link:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent`},isLoading:{false:``,true:`opacity-50`},intent:{accent:``,danger:``,neutral:``},size:{xs:``,sm:``,md:``,lg:``,xl:``}},defaultVariants:{isLoading:!1,size:`md`},compoundVariants:[{appearance:[`filled`,`ghost`,`outlined`],size:`xs`,class:`h-6 px-2`},{appearance:[`filled`,`ghost`,`outlined`],size:`sm`,class:`h-7 px-2.5`},{appearance:[`filled`,`ghost`,`outlined`],size:`md`,class:`h-9 px-3`},{appearance:[`filled`,`ghost`,`outlined`],size:`lg`,class:`h-10 px-3.5`},{appearance:[`filled`,`ghost`,`outlined`],size:`xl`,class:`h-12 px-4`},{appearance:`ghost`,intent:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 border-transparent`},{appearance:`outlined`,intent:`danger`,class:`border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700`},{appearance:`filled`,intent:`danger`,class:`bg-filled-danger focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover border-transparent`},{appearance:`link`,intent:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger`},{appearance:`ghost`,intent:`neutral`,class:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`},{appearance:`outlined`,intent:`neutral`,class:`border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600`},{appearance:`filled`,intent:`neutral`,class:`bg-filled-neutral not-disabled:hover:bg-filled-neutral-hover border-transparent focus-visible:border-transparent text-neutral-50`},{appearance:`link`,intent:`neutral`,class:`text-strong focus-visible:ring-focus-accent`}]}),h={xs:`ps-1.5`,sm:`ps-2`,md:`ps-2.5`,lg:`ps-3`,xl:`ps-3.5`},g={xs:`pe-1.5`,sm:`pe-2`,md:`pe-2.5`,lg:`pe-3`,xl:`pe-3.5`},_=({"aria-disabled":f,appearance:_,asChild:v,children:y,className:b,disabled:x,icon:S,iconPlacement:C=`start`,intent:w,isLoading:T=!1,ref:E,size:D=`md`,type:O,...k})=>{let A=r(f??x??T),j=T?u(p,{className:`animate-spin`}):S,M=j&&_!==`link`,N={"aria-disabled":A,"data-slot":`button`,className:e(`inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`,m({appearance:_,intent:w,isLoading:T,size:D}),_!==`link`&&`font-sans`,M&&C===`start`&&h[D],M&&C===`end`&&g[D],b),"data-appearance":_,"data-disabled":A,"data-intent":w,"data-loading":T,"data-size":_===`link`?void 0:D,disabled:A,ref:E,...k};return v?(c(s(y)&&a.only(y),"When using `asChild`, Button must be passed a single child as a JSX tag."),u(n,{...N,children:o(y,{},d(l,{children:[j&&u(t,{svg:j,className:i(C===`end`&&`order-last`)}),y.props.children]}))})):d(`button`,{...N,type:O??`button`,children:[j&&u(t,{svg:j,className:i(C===`end`&&`order-last`)}),y]})};export{_ as t};

package/dist/{button-D9n09xUg.js → button-DmJkYfyl.js}

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{jsx as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";const i=r(`border-form inline-flex items-center rounded-md`,{variants:{appearance:{panel:`bg-form gap-0.5 border p-0.75 [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px`,ghost:`gap-0.5`,outlined:``}}}),a=({appearance:r,asChild:a,className:o,children:s,ref:c,...l})=>n(a?t:`div`,{"data-slot":`button-group`,className:e(i({appearance:r}),o),ref:c,...l,children:s});export{a as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DpNWVci8.js";import{jsx as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";const i=r(`border-form inline-flex items-center rounded-md`,{variants:{appearance:{panel:`bg-form gap-0.5 border p-0.75 [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px`,ghost:`gap-0.5`,outlined:``}}}),a=({appearance:r,asChild:a,className:o,children:s,ref:c,...l})=>n(a?t:`div`,{"data-slot":`button-group`,className:e(i({appearance:r}),o),ref:c,...l,children:s});export{a as t};