@photon-ai/pho-ui 1.5.0 → 2.0.0

package/dist/src/sections/basic-page/basic-page.d.ts

@@ -1,24 +1,7 @@
 import { AnchorHTMLAttributes, ComponentProps, ReactNode, Ref } from 'react';
 import { ButtonLinkProps } from '../../components/button';
-/**
- * BasicPage — Pho's standard content page: a page title, section titles, and
- * bordered cards of label/control rows. Settings, billing, members — any
- * single-column management surface.
- *
- * Spacing: wrap the page in `Root` (a 42rem column with `px-5` gutters,
- * vertical padding). `Stack` separates blocks (`gap-10`). Inside a block,
- * children share `gap-3`. Wrap a section title + description in `Header`
- * (`gap-0.5`) so that pair stays tight — don't put them as loose siblings.
- * Parts already carry `px-5`.
- *
- * Navigation: pages may drill into subpages. `RowLink` is a whole-row link
- * (trailing chevron) and `Back` returns to the parent — both render through
- * the host's `LinkProvider`; the URL itself stays the router's job. `Back`
- * floats in `Root`'s top padding, so `Title` never moves between pages that
- * have a back link and pages that don't.
- */
 /** Bordered card that stacks rows with hairline dividers. */
-export declare const BASIC_PAGE_CARD = "divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary";
+export declare const BASIC_PAGE_CARD = "rounded-base border border-pho-secondary bg-pho-primary divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0";
 /**
  * Standalone callout surface — featured block (invite form, notice, etc.).
  * Don't wrap in `Card`; this is the outer chrome.
@@ -62,33 +45,84 @@ export declare const BASIC_PAGE_ITEM_PANEL_DIVIDED = "-mx-2 -mt-1.5 flex items-c
  * so wide viewports render exactly as before while narrow ones keep a 20px
  * breathing edge instead of running content into the viewport.
  *
- * `relative` anchors `Back`, which floats in the top padding — the reserved
- * zone that keeps `Title` at the same position on every page.
+ * `relative` anchors `Back`, which floats in the top padding. The top zone
+ * is conditional (`:has()`): pages carrying a `Back` reserve 64px for it;
+ * pages without one keep the tighter 48px so the title doesn't sit low.
+ *
+ * The column is also a `min-h-full` flex stack: when the host gives it a
+ * height context (an app shell's scroll pane), a full-page state can claim
+ * the leftover viewport with `flex-1` — `ErrorView className="flex-1"`
+ * centers itself vertically below the title. Hosts without a height context
+ * see a normal column; regular pages are unaffected.
+ *
+ * Root itself never animates — the page entrance lives on `Stack`, so
+ * `Title` and `Back` (the page chrome) stay put while the body below rises
+ * in.
  */
 declare function Root({ className, ...props }: ComponentProps<"div"> & {
     ref?: Ref<HTMLDivElement>;
 }): import("react").JSX.Element;
+export interface BasicPageTitleProps extends ComponentProps<"h1"> {
+    /**
+     * Shared-element key. Pair with the same `morphId` on the subpage's
+     * `Back` and the word morphs between title and back link across the
+     * navigation. Skipped under reduced motion.
+     */
+    morphId?: string;
+    /**
+     * Rise this title into its line on mount — for a subpage title whose line
+     * an inbound Title ↔ Back morph departs from. The moment the word lifts
+     * off, this title floats up from just below it (the Stack physics), so
+     * the two form one upward stream and never overlap. Skipped under
+     * reduced motion.
+     */
+    enter?: boolean;
+    ref?: Ref<HTMLHeadingElement>;
+}
 /**
  * Page title — largest heading on the surface. Plain-text children get a slug
  * `id` for hash targets (`#profile`); the heading itself is not a link.
  */
-declare function Title({ id, className, children, ...props }: ComponentProps<"h1"> & {
-    ref?: Ref<HTMLHeadingElement>;
-}): import("react").JSX.Element;
+declare function Title({ id, morphId, enter, className, children, ...props }: BasicPageTitleProps): import("react").JSX.Element;
+export interface BasicPageStackProps extends Omit<ComponentProps<"div">, RevealMotionConflicts> {
+    ref?: Ref<HTMLDivElement>;
+}
 /**
  * Vertical stack under the page title. Blocks (forms / sections) use `gap-10`;
  * each block lays out its children with `gap-3`.
+ *
+ * Mounting plays the page entrance: the stack rises 12px and fades in on the
+ * Card-shell / Command spring while `Title` / `Back` above stay put. What
+ * that means per state:
+ *
+ * - **Entering the page** — whatever the page first shows (skeleton
+ *   included) rides in with its stack.
+ * - **Skeleton in a separate component** — swapping it for the loaded
+ *   return mounts a fresh stack, so the entrance replays as the
+ *   data-arrival animation. That's the right feel for shapes the skeleton
+ *   couldn't predict (lists of unknown length).
+ * - **1:1 skeleton** — keep ONE stack mounted and branch its children
+ *   (`{pending ? bones : content}`): values then fill in place with no
+ *   motion.
+ *
+ * Static under reduced motion.
  */
-declare function Stack({ className, ...props }: ComponentProps<"div"> & {
-    ref?: Ref<HTMLDivElement>;
-}): import("react").JSX.Element;
+declare function Stack({ className, ...props }: BasicPageStackProps): import("react").JSX.Element;
 /**
- * Title + optional description pair. Keeps that couple tight (`gap-0.5`) so
- * the block's `gap-3` only applies between this header and the card.
+ * Title + optional description pair. No gap between them — the block's
+ * `gap-3` only applies between this header and the card.
  */
-declare function Header({ className, ...props }: ComponentProps<"div"> & {
+export interface BasicPageHeaderProps extends Omit<ComponentProps<"div">, RevealMotionConflicts> {
+    /**
+     * Rise this header into place on mount — the Header flavor of `Title`'s
+     * `enter`, for a subpage title that carries a description: the pair
+     * floats up from below the departing morph word as one block. Put `enter`
+     * here and NOT on the `Title` inside. Skipped under reduced motion.
+     */
+    enter?: boolean;
     ref?: Ref<HTMLDivElement>;
-}): import("react").JSX.Element;
+}
+declare function Header({ enter, className, ...props }: BasicPageHeaderProps): import("react").JSX.Element;
 /**
  * Section heading — same padding as the page title, smaller type. Hashable via
  * slug `id` (not a link).
@@ -111,10 +145,18 @@ declare function Description({ className, ...props }: ComponentProps<"p"> & {
 declare function SectionFooter({ className, ...props }: ComponentProps<"p"> & {
     ref?: Ref<HTMLParagraphElement>;
 }): import("react").JSX.Element;
-/** Bordered card that stacks rows with hairline dividers. */
-declare function Card({ className, ...props }: ComponentProps<"div"> & {
+export interface BasicPageCardProps extends ComponentProps<"div"> {
+    /**
+     * Glide the card's height when its content swaps — bones becoming a
+     * different number of rows, a row created or revoked, an inline state
+     * change. The height follows the content on the page spring instead of
+     * jumping. Reserve it for cards whose contents change while mounted.
+     */
+    animateHeight?: boolean;
     ref?: Ref<HTMLDivElement>;
-}): import("react").JSX.Element;
+}
+/** Bordered card that stacks rows with hairline dividers. */
+declare function Card({ animateHeight, className, children, ...props }: BasicPageCardProps): import("react").JSX.Element;
 /**
  * One card row that can host subviews. Padding matches a plain row, so use it
  * for any row that may grow an `ItemPanel` — primary content goes straight in
@@ -181,25 +223,50 @@ export interface BasicPageRowProps extends Omit<ComponentProps<"div">, "title">
     description?: ReactNode;
     /** Associates the label with a control id. When omitted, the label is not a `<label>`. */
     htmlFor?: string;
+    /**
+     * Stack the label above a full-width control instead of the default
+     * label-left / control-right layout at `sm+`. Keeps the compact `gap-3`
+     * rhythm — the default row's `justify-between` would otherwise stretch
+     * label and control apart under `min-h-[4.25rem]`.
+     */
+    stacked?: boolean;
     ref?: Ref<HTMLDivElement>;
 }
 /**
  * One row: label (+ optional description) left, control right.
  * Pass `htmlFor` when the row wraps a labelled input; omit it for display/
- * action rows (avatar, danger-zone delete).
+ * action rows (avatar, danger-zone delete). Pass `stacked` for full-width
+ * controls that sit under the label.
  */
-declare function Row({ label, description, htmlFor, className, children, ...props }: BasicPageRowProps): import("react").JSX.Element;
+declare function Row({ label, description, htmlFor, stacked, className, children, ...props }: BasicPageRowProps): import("react").JSX.Element;
 /** Read-only value on the right side of a row (email, etc.). */
 declare function Value({ className, ...props }: ComponentProps<"p"> & {
     ref?: Ref<HTMLParagraphElement>;
 }): import("react").JSX.Element;
+export interface BasicPageAlertProps extends Omit<ComponentProps<"div">, "children"> {
+    /** The caught value — a problem body, an `Error` wrapping one, or unknown. */
+    error?: unknown;
+    /** Override the derived message. */
+    children?: ReactNode;
+    /**
+     * Explicit presence override — defaults to whether there is anything to
+     * show, so the reveal plays as the mutation's error comes and goes.
+     */
+    show?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
 /**
- * Inline error under a row (still inside the card). Matches card horizontal
- * padding so hosts don't re-apply `px-5`.
+ * Server error under a row, still inside the card — the partial failure
+ * ("Couldn't update your name"), rendered by `Error` from the problem body.
+ * Keep it mounted and pass the mutation's error: the line reveals and
+ * collapses on `Footer`'s height spring + fade. The card drops its divider
+ * above the line so it reads as part of the row it belongs to. Matches card
+ * horizontal padding — don't re-apply `px-5`.
+ *
+ * For a page that failed to load outright, swap the stack for an `ErrorView`
+ * instead.
  */
-declare function Alert({ className, ...props }: ComponentProps<"p"> & {
-    ref?: Ref<HTMLParagraphElement>;
-}): import("react").JSX.Element;
+declare function Alert({ error, show, className, children, ...props }: BasicPageAlertProps): import("react").JSX.Element;
 export interface BasicPageFooterProps extends ComponentProps<"div"> {
     /**
      * Animated presence for dirty-state bars: the card glides open/closed on a
@@ -216,11 +283,56 @@ export interface BasicPageFooterProps extends ComponentProps<"div"> {
  * out following the onboarding card's motion language.
  */
 declare function Footer({ show, className, ...props }: BasicPageFooterProps): import("react").JSX.Element;
+/**
+ * DOM handlers whose React signatures clash with Motion's gesture props of
+ * the same name on `motion.*` elements — excluded from `Reveal`'s public API
+ * (same policy as Button).
+ */
+type RevealMotionConflicts = "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop";
+export interface BasicPageRevealProps extends Omit<ComponentProps<"div">, RevealMotionConflicts> {
+    /**
+     * Animated presence for a `Stack` block that comes and goes: keep the
+     * block mounted and drive it with `show` — it glides open and closed
+     * (height + fade) on the page spring, with the Stack's `gap-10`
+     * compensated so nothing jumps when it fully collapses. Omit `show` for
+     * the one-shot data-arrival entrance.
+     */
+    show?: boolean;
+    /**
+     * Which gap the presence variant compensates while collapsing —
+     * `"stack"` for a Stack block (`gap-10`), `"block"` for an element
+     * inside a block (`gap-3`). @default "stack"
+     */
+    gap?: "stack" | "block";
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Data-arrival entrance for regions whose shape the skeleton couldn't
+ * predict — a list of unknown length, a region that depends on the data.
+ * Wrap that region (keeping `Title` and 1:1 chrome outside): once the shape
+ * is known it rises 12px and fades in on the Card-shell / Command spring,
+ * the same physics as the `Footer` / `Alert` reveals. When the skeleton
+ * mirrors the loaded layout element for element, skip the reveal — values
+ * fill into a shape that never moves. The page *entrance* is separate and
+ * already built into `Stack`: whatever the page first shows (including the
+ * skeleton) rides that. Static under reduced motion.
+ *
+ * With `show`, Reveal becomes an animated-presence block instead (the
+ * `Footer` grammar): a whole section of the Stack that appears or leaves at
+ * runtime glides open/closed while its neighbours follow.
+ */
+declare function Reveal({ show, gap, className, ...props }: BasicPageRevealProps): import("react").JSX.Element;
 export interface BasicPageBackProps extends Omit<ButtonLinkProps, "variant" | "size" | "shape" | "prefix" | "suffix" | "svgOnly" | "href"> {
     /** Parent destination — rendered through the host's `LinkProvider`. */
     href: string;
     /** Label — name the parent page. @default "Back" */
     children?: ReactNode;
+    /**
+     * Shared-element key. Pair with the same `morphId` on the parent page's
+     * `Title` and the word morphs between title and back link across the
+     * navigation. Skipped under reduced motion.
+     */
+    morphId?: string;
 }
 /**
  * Back link for a subpage — a small ghost `ButtonLink`; place inside `Root`,
@@ -232,11 +344,11 @@ export interface BasicPageBackProps extends Omit<ButtonLinkProps, "variant" | "s
  * 40px in (`px-5` root gutter + `px-5` title pad); inside a `sm` ghost button
  * the label sits 29.75px in (8px icon-side pad + 15.75px chevron, 1.125em at
  * the 14px `text-base`, + 4px gap + 2px label-span `px-0.5`) — so `left` is
- * the 10.25px difference. `top-2` centers the 32px button in the 48px
+ * the 10.25px difference. `top-4` centers the 32px button in the 64px
  * reserved zone. The chevron and the ghost hover pill hang in the padding —
  * the usual optical alignment for borderless controls.
  */
-declare function Back({ href, className, children, ...props }: BasicPageBackProps): import("react").JSX.Element;
+declare function Back({ href, className, morphId, children, ...props }: BasicPageBackProps): import("react").JSX.Element;
 export interface BasicPageRowLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "title"> {
     /** Left-side field name — plain text, or compose with a trailing badge. */
     label: ReactNode;
@@ -252,7 +364,8 @@ export interface BasicPageRowLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnc
 }
 /**
  * A row that navigates — the whole row is one link into a subpage, with a
- * trailing chevron cue. Same geometry as `Row`; hover lifts the row, and
+ * trailing chevron cue. Always horizontal: a column stack would park the
+ * chevron under the label on narrow viewports. Hover lifts the row, and
  * first/last rows follow the card's corner radius.
  */
 declare function RowLink({ label, description, leading, href, className, children, ...props }: BasicPageRowLinkProps): import("react").JSX.Element;
@@ -334,5 +447,6 @@ export declare const BasicPage: {
     Value: typeof Value;
     Alert: typeof Alert;
     Footer: typeof Footer;
+    Reveal: typeof Reveal;
 };
 export {};

package/dist/src/utils/animated-height.d.ts

@@ -1,10 +1,13 @@
 import { ReactNode } from 'react';
+import { ValueAnimationTransition } from 'motion/react';
 /**
  * Animates its own height to follow the measured height of `children`, so
  * content swaps (search filtering, skeleton → data) glide instead of jumping.
  * Honors `prefers-reduced-motion` by snapping height with no spring.
  */
-export declare function AnimatedHeight({ className, children, }: {
+export declare function AnimatedHeight({ className, transition, children, }: {
     className?: string;
+    /** Spring override for the height follow. @default the Command spring */
+    transition?: ValueAnimationTransition<number | "auto">;
     children: ReactNode;
 }): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -141,10 +141,6 @@
       "types": "./dist/src/components/preview-card/index.d.ts",
       "import": "./dist/components/preview-card.js"
     },
-    "./components/alert-dialog": {
-      "types": "./dist/src/components/alert-dialog/index.d.ts",
-      "import": "./dist/components/alert-dialog.js"
-    },
     "./components/drawer": {
       "types": "./dist/src/components/drawer/index.d.ts",
       "import": "./dist/components/drawer.js"
@@ -217,6 +213,10 @@
       "types": "./dist/src/components/notification/index.d.ts",
       "import": "./dist/components/notification.js"
     },
+    "./components/error": {
+      "types": "./dist/src/components/error/index.d.ts",
+      "import": "./dist/components/error.js"
+    },
     "./sections/sidebar": {
       "types": "./dist/src/sections/sidebar/index.d.ts",
       "import": "./dist/sections/sidebar.js"

package/src/styles/theme.css

@@ -62,6 +62,33 @@
      Display: xs/sm/base/md/lg/xl/2xl = 18/20/24/32/40/48/60.
      NOTE: the reset wipes the whole --text-* prefix; every --text-color-pho-*
      token is declared AFTER this point in the file, so it survives. */
+  /* The iOS-measured page spring (stiffness 400, damping 40, ~330ms),
+     pre-sampled as a CSS linear() easing so plain transitions (Menu,
+     Popover popups) ride the same glide as the Motion springs. */
+  --ease-pho-spring: linear(
+    0,
+    0.04429 5%,
+    0.1435 10%,
+    0.2633 15%,
+    0.3842 20%,
+    0.4962 25%,
+    0.5947 30%,
+    0.6785 35%,
+    0.748 40%,
+    0.8046 45%,
+    0.8502 50%,
+    0.8864 55%,
+    0.9149 60%,
+    0.9372 65%,
+    0.9545 70%,
+    0.9679 75%,
+    0.9781 80%,
+    0.986 85%,
+    0.992 90%,
+    0.9965 95%,
+    1
+  );
+
   --text-*: initial;
   --text-xs: 0.8125rem;
   --text-xs--line-height: 1.125rem;

package/dist/chunks/basic-page-awtvmT-6.js

@@ -1,270 +0,0 @@
-"use client";
-import { t as n } from "./cn-DTiB6ek_.js";
-import { n as d } from "./link-provider-9TFNyDqO.js";
-import { s as f } from "./close-button-B8gF5UNk.js";
-import { t as x } from "./createReactComponent-BqCmnqfX.js";
-import { t as h } from "./IconChevronLeft-CSWMKQ4C.js";
-import { Children as v } from "react";
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { AnimatePresence as g, motion as y, useReducedMotion as N } from "motion/react";
-var b = [["path", {
-  d: "M9 6l6 6l-6 6",
-  key: "svg-0"
-}]], A = x("outline", "chevron-right", "ChevronRight", b), C = "divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary", p = "flex flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", m = "flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6", _ = "flex flex-col gap-3 px-5 py-4", w = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5", I = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5";
-function E({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", {
-    className: n("relative mx-auto w-full max-w-[44.5rem] px-5 py-12", e),
-    ...t
-  });
-}
-function P(e) {
-  return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-}
-function R(e) {
-  if (!(typeof e != "string" && typeof e != "number"))
-    return P(String(e)) || void 0;
-}
-function c(e, t) {
-  if (e !== "")
-    return e ?? R(t);
-}
-function L({ id: e, className: t, children: a, ...i }) {
-  return /* @__PURE__ */ r("h1", {
-    id: c(e, a),
-    className: n("text-display-base text-pho-primary scroll-mt-12 px-5 font-medium", t),
-    ...i,
-    children: a
-  });
-}
-function S({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", {
-    className: n("mt-6 flex flex-col gap-10", "*:flex *:flex-col *:gap-3", e),
-    ...t
-  });
-}
-function B({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", {
-    className: n("flex flex-col gap-0.5", e),
-    ...t
-  });
-}
-function k({ id: e, className: t, children: a, ...i }) {
-  return /* @__PURE__ */ r("h2", {
-    id: c(e, a),
-    className: n("text-display-xs text-pho-primary scroll-mt-12 px-5 font-medium", t),
-    ...i,
-    children: a
-  });
-}
-function D({ className: e, ...t }) {
-  return /* @__PURE__ */ r("p", {
-    className: n("text-display-xs text-pho-description px-5 font-normal", e),
-    ...t
-  });
-}
-function G({ className: e, ...t }) {
-  return /* @__PURE__ */ r("p", {
-    className: n("text-pho-description px-5 text-xs font-normal", e),
-    ...t
-  });
-}
-function T({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", {
-    className: n(C, e),
-    ...t
-  });
-}
-function z({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", {
-    className: n(_, e),
-    ...t
-  });
-}
-function M({ divided: e = !1, className: t, ...a }) {
-  return /* @__PURE__ */ r("div", {
-    className: n(e ? I : w, t),
-    ...a
-  });
-}
-function H({ className: e, icon: t, children: a, ...i }) {
-  if (t == null || t === !1 || t === !0) return /* @__PURE__ */ r("div", {
-    className: n(p, e),
-    ...i,
-    children: a
-  });
-  const [o, ...l] = v.toArray(a);
-  return /* @__PURE__ */ s("div", {
-    className: n(p, e),
-    ...i,
-    children: [/* @__PURE__ */ s("div", {
-      className: "relative",
-      children: [/* @__PURE__ */ r("div", {
-        className: "min-w-0 pr-16",
-        children: o
-      }), /* @__PURE__ */ r("div", {
-        "aria-hidden": !0,
-        className: "text-pho-description pointer-events-none absolute top-1/2 right-0 size-14 -translate-y-1/2 opacity-50 [&>svg]:size-full",
-        children: t
-      })]
-    }), l]
-  });
-}
-function j({ id: e, className: t, children: a, ...i }) {
-  return /* @__PURE__ */ r("h2", {
-    id: c(e, a),
-    className: n("text-display-xs text-pho-primary scroll-mt-12 font-medium", t),
-    ...i,
-    children: a
-  });
-}
-function F({ className: e, ...t }) {
-  return /* @__PURE__ */ r("p", {
-    className: n("text-display-xs text-pho-description font-normal", e),
-    ...t
-  });
-}
-function V({ label: e, description: t, htmlFor: a, className: i, children: o, ...l }) {
-  return /* @__PURE__ */ s("div", {
-    className: n(m, i),
-    ...l,
-    children: [/* @__PURE__ */ s("div", {
-      className: "min-w-0",
-      children: [a ? /* @__PURE__ */ r("label", {
-        htmlFor: a,
-        className: "text-pho-primary block text-base font-normal",
-        children: e
-      }) : /* @__PURE__ */ r("p", {
-        className: "text-pho-primary text-base font-normal",
-        children: e
-      }), t ? /* @__PURE__ */ r("p", {
-        className: "text-pho-description mt-0.5 text-xs",
-        children: t
-      }) : null]
-    }), /* @__PURE__ */ r("div", {
-      className: "flex w-full min-w-0 items-center gap-2 sm:w-auto",
-      children: o
-    })]
-  });
-}
-function O({ className: e, ...t }) {
-  return /* @__PURE__ */ r("p", {
-    className: n("text-pho-description truncate text-base", e),
-    ...t
-  });
-}
-function K({ className: e, ...t }) {
-  return /* @__PURE__ */ r("p", {
-    role: "alert",
-    className: n("text-pho-error px-5 pb-3 text-xs", e),
-    ...t
-  });
-}
-var U = {
-  type: "spring",
-  stiffness: 640,
-  damping: 50
-}, W = {
-  duration: 0.18,
-  ease: "easeOut"
-};
-function $({ show: e, className: t, ...a }) {
-  const i = N(), o = /* @__PURE__ */ r("div", {
-    className: n("flex items-center justify-between gap-6 px-5 py-4", t),
-    ...a
-  });
-  return e === void 0 ? o : /* @__PURE__ */ r(g, {
-    initial: !1,
-    children: e ? /* @__PURE__ */ r(y.div, {
-      className: "overflow-hidden",
-      initial: {
-        height: 0,
-        opacity: 0
-      },
-      animate: {
-        height: "auto",
-        opacity: 1
-      },
-      exit: {
-        height: 0,
-        opacity: 0
-      },
-      transition: i ? { duration: 0 } : {
-        height: U,
-        opacity: W
-      },
-      children: o
-    }) : null
-  });
-}
-function q({ href: e, className: t, children: a = "Back", ...i }) {
-  return /* @__PURE__ */ r(f, {
-    variant: "ghost",
-    size: "sm",
-    href: e,
-    prefix: /* @__PURE__ */ r(h, {}),
-    className: n("absolute top-2 left-[10.25px]", t),
-    ...i,
-    children: a
-  });
-}
-function J({ label: e, description: t, leading: a, href: i, className: o, children: l, ...u }) {
-  return /* @__PURE__ */ s(d(), {
-    href: i,
-    ...u,
-    className: n(m, "group outline-pho-brand hover:bg-pho-primary-hover cursor-pointer transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2", "first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]", o),
-    children: [/* @__PURE__ */ s("div", {
-      className: n("flex min-w-0 items-center", a != null && "gap-3"),
-      children: [a, /* @__PURE__ */ s("div", {
-        className: "min-w-0",
-        children: [/* @__PURE__ */ r("div", {
-          className: "flex min-w-0 items-center gap-1",
-          children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ r("p", {
-            className: "text-pho-primary truncate text-base font-medium",
-            children: e
-          }) : e
-        }), t ? /* @__PURE__ */ r("div", {
-          className: "text-pho-description text-xs",
-          children: t
-        }) : null]
-      })]
-    }), /* @__PURE__ */ s("div", {
-      className: "flex w-full min-w-0 items-center gap-2 sm:w-auto",
-      children: [l, /* @__PURE__ */ r(A, {
-        "aria-hidden": !0,
-        className: "text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors"
-      })]
-    })]
-  });
-}
-var ne = {
-  Root: E,
-  Back: q,
-  Title: L,
-  Stack: S,
-  Header: B,
-  SectionTitle: k,
-  Description: D,
-  SectionFooter: G,
-  Card: T,
-  Item: z,
-  ItemPanel: M,
-  Callout: H,
-  CalloutTitle: j,
-  CalloutDescription: F,
-  Row: V,
-  RowLink: J,
-  Value: O,
-  Alert: K,
-  Footer: $
-};
-export {
-  I as a,
-  w as i,
-  C as n,
-  m as o,
-  _ as r,
-  ne as s,
-  p as t
-};
-
-//# sourceMappingURL=basic-page-awtvmT-6.js.map