@photon-ai/pho-ui 4.10.0 → 4.12.0

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

@@ -8,12 +8,12 @@ import { CodeBlock } from '../../components/code-block';
  * card's own: Stack used to force `gap-3` onto a bare Card and open 12px
  * bands between `divide-y` rows. The marker below lets Stack skip it.
  */
-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 gap-0";
+export declare const BASIC_PAGE_CARD = "rounded-base border border-pho-secondary bg-pho-primary [--choice-card-inset:0.75rem] divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0 gap-0";
 /**
  * Standalone callout surface — featured block (invite form, notice, etc.).
  * Don't wrap in `Card`; this is the outer chrome.
  */
-export declare const BASIC_PAGE_CALLOUT = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5";
+export declare const BASIC_PAGE_CALLOUT = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5 [--choice-card-inset:0.75rem]";
 /**
  * One row — label (+ optional description) left, control right.
  * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter
@@ -227,6 +227,25 @@ export interface BasicPageTitleProps extends ComponentProps<"h1"> {
     trailing?: ReactNode;
     ref?: Ref<HTMLHeadingElement>;
 }
+export interface BasicPageTitleAccessoryProps {
+    /**
+     * Whether it goes with the words into the condensed bar once the title
+     * has scrolled away. A status the name can't be read without does (a
+     * badge); an action on the page doesn't (a Rename pencil): the bar is a
+     * way back and a name, not a toolbar.
+     * @default true
+     */
+    inBar?: boolean;
+    children?: ReactNode;
+}
+/**
+ * A part of the title beside its words — a badge, a status, an action on
+ * the page itself — that says whether it follows the words into the
+ * condensed bar (`Root condense`). Put it inside `Title` after the words.
+ * Everything in a title's children goes into the bar unless it says
+ * otherwise; `Title`'s `trailing` never does.
+ */
+declare function TitleAccessory({ inBar, children, }: BasicPageTitleAccessoryProps): import("react").JSX.Element | null;
 /**
  * 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.
@@ -308,11 +327,12 @@ export interface BasicPageHeaderProps extends Omit<ComponentProps<"div">, Reveal
 declare function Header({ enter: enterProp, className, ...props }: BasicPageHeaderProps): import("react").JSX.Element;
 /**
  * An action at the header row's end — a small button (or two) seated in
- * the `Header` grid the way `Search` is: top-right of the block, its top
- * edge on the header's top, its right edge on the title / card-content
- * inset (`mr-5` matching `SectionTitle`'s `px-5`). A callout already
- * carries `p-5` and its title has no `px-5`, so the inset drops there.
- * Text shorter than the seat centers against it. Put it inside `Header`
+ * the `Header` grid the way `Search` is, its right edge on the title /
+ * card-content inset (`mr-5` matching `SectionTitle`'s `px-5`). A callout
+ * already carries `p-5` and its title has no `px-5`, so the inset drops
+ * there. It centers on the text block whichever is taller: beside a
+ * description that wraps to a third line it stays on the block's middle,
+ * and text shorter than it centers against it. Put it inside `Header`
  * after the text; with a `Search` present it stands to the search's right.
  */
 declare function HeaderAction({ className, ...props }: ComponentProps<"div"> & {
@@ -425,6 +445,16 @@ declare function CalloutDescription({ className, ...props }: ComponentProps<"p">
     ref?: Ref<HTMLParagraphElement>;
 }): import("react").JSX.Element;
 export interface BasicPageOnboardProps extends ComponentProps<"ol"> {
+    /**
+     * One page per step, the steps in a row above it, instead of the card
+     * with the step at hand folded open — for a setup whose steps are
+     * pages of their own: a registration that asks who is registering,
+     * then for the brand, then for the campaign. Each `Step`'s children are
+     * its page (a `Stack`, or a `Form` around one), and the paged `Onboard`
+     * stands where the page's `Stack` would, under the `Title`. The rest of
+     * the props go to the row, the ordered list of steps.
+     */
+    paged?: boolean;
     ref?: Ref<HTMLOListElement>;
 }
 /**
@@ -438,30 +468,40 @@ export interface BasicPageOnboardProps extends ComponentProps<"ol"> {
  * with a check and what they came to, the waiting ones muted. A step
  * finishing folds closed as the next opens, on the Accordion's spring.
  * When the last step is done the service is on — render the page in its
- * place.
+ * place. `paged` turns the card into a row of steps over the page at
+ * hand (see `PagedOnboard`).
  */
-declare function Onboard({ className, children, ...props }: BasicPageOnboardProps): import("react").JSX.Element;
+declare function Onboard({ paged, className, children, ...props }: BasicPageOnboardProps): import("react").JSX.Element;
 export interface BasicPageStepProps extends Omit<ComponentProps<"li">, "title"> {
     /**
      * Decorative glyph for the step at hand, top-right of its body the way a
      * `Callout`'s is — typically a Tabler outline icon at stroke 1.25. It is
      * aria-hidden (keep the meaning in the title) and folds away with the
-     * body: a done or waiting step shows none.
+     * body: a done or waiting step shows none. In a paged list it is what a
+     * done step came to, drawn in its ring in place of the check — the
+     * choice a step made, say — and a step without one keeps the check.
      */
     icon?: ReactNode;
     /**
      * Something to look at beside the step at hand — a code to scan, with
      * its caption — in the corner where the `icon` would be, its top on the
      * title's, holding still as the fold opens beside it. It takes the
-     * icon's place when both are given, and folds away with the body.
+     * icon's place when both are given, and folds away with the body. Not
+     * shown in a paged list.
      */
     aside?: ReactNode;
-    /** The title: a verb and its object — "Choose a number". */
+    /**
+     * The title: a verb and its object — "Choose a number". In a paged
+     * list, the step's name in the row, a word or two — "Brand" — which a
+     * done step may trade for what it came to ("Business"); the row
+     * crossfades it.
+     */
     title: ReactNode;
     /**
      * The line under the title while the step is at hand: what it involves,
      * or, while it waits, how long. Folded away with the rest once the step
-     * is done or before its turn.
+     * is done or before its turn. Not shown in a paged list; the page says
+     * it in its own `Header`.
      */
     description?: ReactNode;
     /**
@@ -486,11 +526,95 @@ export interface BasicPageStepProps extends Omit<ComponentProps<"li">, "title">
     /**
      * At hand: the step's action — a small `Button` or `ButtonLink` — under
      * its line. Done: what it came to — a `Value` — at the title's end.
-     * Waiting its turn: not shown.
+     * Waiting its turn: not shown. In a paged list, the step's page — a
+     * `Stack`, or a `Form` around one — shown under the row while the step
+     * is at hand.
+     */
+    children?: ReactNode;
+    ref?: Ref<HTMLLIElement>;
+}
+/**
+ * Where a check stands. As `Step`'s: `done` draws the check, `working`
+ * spins while Photon is at it, `pending` is dashed while it waits on
+ * someone else (a carrier, a DNS host, the visitor), `upcoming` is faint
+ * while it waits its turn. `failed` trades the ring for an X and says so.
+ */
+export type BasicPageCheckState = "done" | "working" | "pending" | "upcoming" | "failed";
+/**
+ * A list of checks Photon reports on, one line each: DNS records found, a
+ * registration's stages. Not steps someone takes (that is `Onboard`), and
+ * not a percentage (that is `Progress`). It speaks the `Onboard` ring's
+ * language at the line's size. The check where the list stands, whatever
+ * came of it, is its current step: its label one weight up, and
+ * `aria-current` for assistive tech. Put it in a `Card`'s `Item`, and say
+ * when it was last checked, if that matters, in a `SectionFooter`.
+ */
+declare function Checklist({ className, children, ...props }: ComponentProps<"ul"> & {
+    ref?: Ref<HTMLUListElement>;
+}): import("react").JSX.Element;
+export interface BasicPageCheckProps extends Omit<ComponentProps<"li">, "value"> {
+    /** @default "upcoming" */
+    state?: BasicPageCheckState;
+    /**
+     * What the check came to, at the line's end in description ink: the
+     * date it passed, a count.
+     */
+    value?: ReactNode;
+    /**
+     * A line (or a few) right under the label, on its start edge, at
+     * `text-xs`: why a failed check failed, in error ink with no surface of
+     * its own (the X already marks it); otherwise what the check waits on,
+     * in description ink. Several reasons are several block children.
+     */
+    description?: ReactNode;
+    /**
+     * What a failed check's failure is called, beside its label in error
+     * ink: "Rejected", "Suspended". Read only when `state` is `failed`.
+     * @default "Failed"
+     */
+    failure?: ReactNode;
+    ref?: Ref<HTMLLIElement>;
+}
+/**
+ * One check: its ring, its label, its `value` at the line's end, and its
+ * `description` under the label. The ring is `Step`'s at the text's size;
+ * a check that turns done draws its mark on, one that loads done shows it
+ * drawn. The list says which check is current; its label and a failed
+ * one's "Failed" go one weight up.
+ */
+declare function Check({ state, value, description, failure, className, children, ...props }: BasicPageCheckProps): import("react").JSX.Element;
+/**
+ * What happened, in order: a registration's reviews, a domain's checks
+ * over time, a key's uses. One event per `TimelineItem`, newest first
+ * unless the page says otherwise, each on the checklist's mark with a
+ * faint line down to the next. Where `Checklist` is where things stand
+ * now, a timeline is how they got there. Put it in a `Card`'s `Item`.
+ */
+declare function Timeline({ className, ...props }: ComponentProps<"ol"> & {
+    ref?: Ref<HTMLOListElement>;
+}): import("react").JSX.Element;
+export interface BasicPageTimelineItemProps extends Omit<ComponentProps<"li">, "title"> {
+    /** What came of the event, on the checklist's mark. @default "done" */
+    state?: BasicPageCheckState;
+    /** The event, in words: "Carrier review failed". */
+    title: ReactNode;
+    /** When it happened, under the title in description ink. */
+    time?: ReactNode;
+    /**
+     * What there is to say about it, under the time at `text-xs` in
+     * description ink: a reviewer's reasons, a note. A record, not an alarm:
+     * a failure's mark says it failed, and the page's current state says
+     * what to do about it.
      */
     children?: ReactNode;
     ref?: Ref<HTMLLIElement>;
 }
+/**
+ * One event: its mark on the rail, a line from it down to the next
+ * event's, and beside it the title, the time and the details. The mark
+ * sits on the title's line; the last event draws no line.
+ */
+declare function TimelineItem({ state, title, time, className, children, ...props }: BasicPageTimelineItemProps): import("react").JSX.Element;
 /**
  * One step of an `Onboard`, left to right: the ring, the words, the
  * corner. The ring and the title share one row and center on each
@@ -503,7 +627,8 @@ export interface BasicPageStepProps extends Omit<ComponentProps<"li">, "title">
  * does; the others stay on the card's white. The title and the line wear the
  * section's type — `SectionTitle` over `Description`, both
  * `text-display-xs`. Its standing comes from the list; on its own it is
- * the step at hand.
+ * the step at hand. In a paged list it is its place in the row instead
+ * (`StepInRow`), and the list shows its children as the page.
  */
 declare function Step({ icon, aside, title, description, done, working, pending, className, children, ...props }: BasicPageStepProps): import("react").JSX.Element;
 export interface BasicPageRowProps extends Omit<ComponentProps<"div">, "title" | RevealMotionConflicts> {
@@ -533,6 +658,87 @@ declare function Row({ label, description, htmlFor, stacked, className, children
 declare function Value({ className, ...props }: ComponentProps<"p"> & {
     ref?: Ref<HTMLParagraphElement>;
 }): import("react").JSX.Element;
+export interface BasicPageReceiptProps extends ComponentProps<"ul"> {
+    /**
+     * What the receipt says with nothing on it, in the card's place for the
+     * lines: "No usage yet this period." Shown when no line, group, or total
+     * is given.
+     */
+    empty?: ReactNode;
+    ref?: Ref<HTMLUListElement>;
+}
+/**
+ * Charges that add up: the usage a billing period has run to so far, an
+ * order before it is paid, an invoice's lines. A card of its own, one line
+ * per charge in three columns (the name, how much of it, what it came to),
+ * with the figures right-aligned in tabular digits so a column of amounts
+ * reads down its decimal points. `ReceiptGroup` gathers lines under a
+ * name; `ReceiptTotal` closes the receipt under a hairline.
+ *
+ * ```tsx
+ * <BasicPage.Receipt>
+ *   <BasicPage.ReceiptGroup label="Messaging">
+ *     <BasicPage.ReceiptLine label="SMS" quantity="1,204 messages" amount="$9.51" />
+ *     <BasicPage.ReceiptLine label="MMS" quantity="86 messages" amount="$1.72" />
+ *   </BasicPage.ReceiptGroup>
+ *   <BasicPage.ReceiptTotal label="Total so far" amount="$11.23" />
+ * </BasicPage.Receipt>
+ * ```
+ */
+declare function Receipt({ empty, className, children, ...props }: BasicPageReceiptProps): import("react").JSX.Element;
+export interface BasicPageReceiptGroupProps extends Omit<ComponentProps<"li">, "title" | RevealMotionConflicts> {
+    /**
+     * What the group's lines have in common: a category, a plan, a project.
+     * Left out, the group is a block of lines under a hairline, the way to
+     * set a subtotal and its tax apart from the items above them.
+     */
+    label?: ReactNode;
+    ref?: Ref<HTMLLIElement>;
+}
+/**
+ * Lines that belong together, as one block of the receipt: its name in
+ * the ink of a total over the lines, a hairline between it and whatever
+ * came before. The lines ride in with the group when the page's data
+ * arrives.
+ */
+declare function ReceiptGroup({ label, className, children, ...props }: BasicPageReceiptGroupProps): import("react").JSX.Element;
+export interface BasicPageReceiptLineProps extends Omit<ComponentProps<"li">, "title" | "children" | RevealMotionConflicts> {
+    /** What was charged: "SMS", "Dedicated line", "Business plan". */
+    label: ReactNode;
+    /**
+     * How much of it, with its unit: "1,204 messages", "312 minutes", "× 2".
+     * Left out, the name takes the column too.
+     */
+    quantity?: ReactNode;
+    /**
+     * What it came to, formatted by the host: "$9.51". Left out (a charge
+     * not priced yet), the line shows no figure there and the name reaches
+     * into the columns left free.
+     */
+    amount?: ReactNode;
+    ref?: Ref<HTMLLIElement>;
+}
+/**
+ * One charge: its name, how much of it, and what it came to, in the
+ * receipt's columns. Name and amount in the rows' secondary ink, the
+ * quantity a step quieter, so the total below is the one figure at full
+ * ink.
+ */
+declare function ReceiptLine({ label, quantity, amount, className, ...props }: BasicPageReceiptLineProps): import("react").JSX.Element;
+export interface BasicPageReceiptTotalProps extends Omit<ComponentProps<"li">, "title" | "children" | RevealMotionConflicts> {
+    /** What the lines add up to: "Total", "Total so far", "Due Oct 1". */
+    label: ReactNode;
+    /** The sum, formatted by the host: "$11.23". */
+    amount: ReactNode;
+    ref?: Ref<HTMLLIElement>;
+}
+/**
+ * What the lines come to, under a hairline: name and amount at full ink
+ * and medium weight, the amount on the lines' amount column. Totals in a
+ * row share one block, one per currency when the lines carry more than
+ * one.
+ */
+declare function ReceiptTotal({ label, amount, className, ...props }: BasicPageReceiptTotalProps): 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;
@@ -1058,6 +1264,7 @@ export declare const BasicPage: {
     Crumb: typeof Crumb;
     Back: typeof Back;
     Title: typeof Title;
+    TitleAccessory: typeof TitleAccessory;
     Stack: typeof Stack;
     Columns: typeof Columns;
     Header: typeof Header;
@@ -1074,11 +1281,19 @@ export declare const BasicPage: {
     CalloutDescription: typeof CalloutDescription;
     Onboard: typeof Onboard;
     Step: typeof Step;
+    Checklist: typeof Checklist;
+    Check: typeof Check;
+    Timeline: typeof Timeline;
+    TimelineItem: typeof TimelineItem;
     Row: typeof Row;
     RowLink: typeof RowLink;
     Value: typeof Value;
     Meta: ({ layout, columns, className, ...props }: import('.').BasicPageMetaProps) => import("react").JSX.Element;
     MetaItem: ({ label, value, children, mono, copy, optional, empty, className, ...props }: import('.').BasicPageMetaItemProps) => import("react").JSX.Element;
+    Receipt: typeof Receipt;
+    ReceiptGroup: typeof ReceiptGroup;
+    ReceiptLine: typeof ReceiptLine;
+    ReceiptTotal: typeof ReceiptTotal;
     Alert: typeof Alert;
     Footer: typeof Footer;
     Form: typeof Form;

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

@@ -1,3 +1,3 @@
-export { BasicPage, formToasts, AUTO_SAVE_DELAY_MS, useCondense, useAutoSave, type BasicPageCondense, BASIC_PAGE_CARD, CONDENSE_BAR_ENTER, CONDENSE_BAR_TRAVEL, CONDENSE_BAR_RISE_PX, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRootProps, type BasicPageColumnsProps, type BasicPageAsideProps, type BasicPageAsideWidth, type BasicPageAsidePresentation, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageBreadcrumbsProps, type BasicPageCrumbProps, type BasicPageFooterProps, type BasicPageFormProps, type BasicPageFormErrors, type BasicPageItemPanelProps, type BasicPageOnboardProps, type BasicPageStepProps, } from './basic-page';
+export { BasicPage, formToasts, AUTO_SAVE_DELAY_MS, useCondense, useAutoSave, type BasicPageCondense, BASIC_PAGE_CARD, CONDENSE_BAR_ENTER, CONDENSE_BAR_TRAVEL, CONDENSE_BAR_RISE_PX, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRootProps, type BasicPageColumnsProps, type BasicPageAsideProps, type BasicPageAsideWidth, type BasicPageAsidePresentation, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageBreadcrumbsProps, type BasicPageCrumbProps, type BasicPageFooterProps, type BasicPageFormProps, type BasicPageFormErrors, type BasicPageItemPanelProps, type BasicPageOnboardProps, type BasicPageStepProps, type BasicPageTitleAccessoryProps, type BasicPageCheckProps, type BasicPageCheckState, type BasicPageTimelineItemProps, type BasicPageReceiptProps, type BasicPageReceiptGroupProps, type BasicPageReceiptLineProps, type BasicPageReceiptTotalProps, } from './basic-page';
 export { createColumns, type DataTableColumn, type DataTableColumnMeta, type DataTableProps, type SortingState, } from '../../components/data-table';
 export { type DescriptionListRootProps as BasicPageMetaProps, type DescriptionListItemProps as BasicPageMetaItemProps, type DescriptionListLayout as BasicPageMetaLayout, } from '../../components/description-list';

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

@@ -1,15 +1,24 @@
-import { ReactNode } from 'react';
-import { ValueAnimationTransition } from 'motion/react';
+import { ReactNode, RefObject } from 'react';
+import { MotionValue, 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.
+ * Keeps a container's size on one axis following the measured size of its
+ * content on a spring — the core of `AnimatedHeight`, and of any part whose
+ * box should glide as its content changes (a paged `Onboard`'s step titles
+ * follow their words' width this way). Returns the motion value to put on
+ * the container's `style`. Reduced motion snaps it.
  *
  * The container clips only while the spring is in flight. ResizeObserver
  * callbacks run after layout but before paint, so the clip lands before the
  * swap frame can show; once the spring settles it is lifted again, so a focus
- * ring, an effect button's rim, or any other overhang on the last row paints
- * normally at rest instead of being cut off at the container's edge.
+ * ring, an effect button's rim, or any other overhang paints normally at
+ * rest instead of being cut off at the container's edge.
+ */
+export declare function useSizeFollow(axis: "height" | "width", containerRef: RefObject<HTMLElement | null>, contentRef: RefObject<HTMLElement | null>, transition: ValueAnimationTransition<number | "auto">): MotionValue<number | "auto">;
+/**
+ * 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. Clips
+ * only while the spring is in flight (see `useSizeFollow`).
  */
 export declare function AnimatedHeight({ className, transition, children, }: {
     className?: string;

package/dist/src/utils/choice-card.d.ts

@@ -4,8 +4,15 @@ import { Transition } from 'motion/react';
  * tile. Applied to the radio/checkbox root itself so the whole tile is the
  * hit target. Hover fills (`bg-pho-ghost-hover`); selected uses the brand
  * ring. Press feedback lives on this surface (see `usePressPulse`).
+ *
+ * The side padding is `--choice-card-inset`, 12px unless the page says
+ * otherwise, and the padding above and below is three quarters of it: a
+ * `BasicPage.Stack` sets it to the page's text edge (20px), so tiles
+ * standing on the page as its surfaces reach the column's edge as a card
+ * does and start their words on the headings' line; a card, sheet or
+ * callout sets it back, so tiles inside one stay compact.
  */
-export declare const CHOICE_CARD_BASE = "group outline-pho-brand flex flex-1 cursor-pointer items-start gap-2.5 rounded-base p-3 text-base text-pho-secondary ring-1 ring-pho-primary ring-inset transition-[box-shadow,background-color] duration-150 ease-out select-none hover:bg-pho-ghost-hover data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[checked]:ring-2 data-[checked]:ring-pho-brand has-[[data-checked]]:ring-2 has-[[data-checked]]:ring-pho-brand focus-visible:outline-2 focus-visible:outline-offset-2 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2";
+export declare const CHOICE_CARD_BASE = "group outline-pho-brand flex flex-1 cursor-pointer items-start gap-2.5 rounded-base px-[var(--choice-card-inset,0.75rem)] py-[calc(var(--choice-card-inset,0.75rem)*0.75)] text-base text-pho-secondary ring-1 ring-pho-primary ring-inset transition-[box-shadow,background-color] duration-150 ease-out select-none hover:bg-pho-ghost-hover data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[checked]:ring-2 data-[checked]:ring-pho-brand has-[[data-checked]]:ring-2 has-[[data-checked]]:ring-pho-brand focus-visible:outline-2 focus-visible:outline-offset-2 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2";
 /** Stacked icon above the copy — tighter than the checkbox/radio row gap. */
 export declare const CHOICE_CARD_WITH_ICON = "flex-col gap-1.5";
 /** Same press as Select's default trigger — field-sized, not Button's whileTap. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "4.10.0",
+  "version": "4.12.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {

package/dist/chunks/animated-height-I44sUq0n.js

@@ -1,48 +0,0 @@
-"use client";
-import { SPRING_SETTLE as b } from "../motion.js";
-import { useEffect as R, useRef as m } from "react";
-import { jsx as d } from "react/jsx-runtime";
-import { animate as x, motion as S, useMotionValue as g, useReducedMotion as w } from "motion/react";
-var y = b;
-function G({ className: p, transition: s, children: v }) {
-  const i = m(null), c = m(null), t = g("auto"), l = w();
-  return R(() => {
-    const o = i.current, n = c.current;
-    if (!o || !n) return;
-    let e = null;
-    const u = new ResizeObserver((h) => {
-      const f = h[0]?.borderBoxSize?.[0], r = f ? f.blockSize : n.offsetHeight, a = t.get();
-      if (a === "auto" || l) {
-        e?.stop(), e = null, o.style.overflow = "", t.set(r);
-        return;
-      }
-      !e && Math.abs(a - r) < 0.5 || (o.style.overflow = "hidden", e?.stop(), e = x(t, r, {
-        ...s ?? y,
-        onComplete: () => {
-          e = null, o.style.overflow = "";
-        }
-      }));
-    });
-    return u.observe(n), () => {
-      u.disconnect(), e?.stop();
-    };
-  }, [
-    t,
-    l,
-    s
-  ]), /* @__PURE__ */ d(S.div, {
-    ref: i,
-    className: "min-h-0",
-    style: { height: t },
-    children: /* @__PURE__ */ d("div", {
-      ref: c,
-      className: p,
-      children: v
-    })
-  });
-}
-export {
-  G as t
-};
-
-//# sourceMappingURL=animated-height-I44sUq0n.js.map

package/dist/chunks/animated-height-I44sUq0n.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"animated-height-I44sUq0n.js","names":[],"sources":["../../src/utils/animated-height.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from \"react\";\nimport { SPRING_SETTLE } from \"../motion\";\nimport {\n  animate,\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  type ValueAnimationTransition,\n} from \"motion/react\";\n\n/**\n * Height spring for container-size transitions — same feel as the onboarding /\n * invite card and BasicPage footer reveal: quick, critically damped (no\n * overshoot that would flash clipped content).\n */\nconst HEIGHT_SPRING = SPRING_SETTLE;\n\n/**\n * Animates its own height to follow the measured height of `children`, so\n * content swaps (search filtering, skeleton → data) glide instead of jumping.\n * Honors `prefers-reduced-motion` by snapping height with no spring.\n *\n * The container clips only while the spring is in flight. ResizeObserver\n * callbacks run after layout but before paint, so the clip lands before the\n * swap frame can show; once the spring settles it is lifted again, so a focus\n * ring, an effect button's rim, or any other overhang on the last row paints\n * normally at rest instead of being cut off at the container's edge.\n */\nexport function AnimatedHeight({\n  className,\n  transition,\n  children,\n}: {\n  className?: string;\n  /** Spring override for the height follow. @default the Command spring */\n  transition?: ValueAnimationTransition<number | \"auto\">;\n  children: ReactNode;\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const height = useMotionValue<number | \"auto\">(\"auto\");\n  const reduceMotion = useReducedMotion();\n\n  useEffect(() => {\n    const container = containerRef.current;\n    const content = contentRef.current;\n    if (!container || !content) return;\n\n    let animation: ReturnType<typeof animate> | null = null;\n\n    const observer = new ResizeObserver((entries) => {\n      const box = entries[0]?.borderBoxSize?.[0];\n      const next = box ? box.blockSize : content.offsetHeight;\n      const current = height.get();\n      if (current === \"auto\" || reduceMotion) {\n        animation?.stop();\n        animation = null;\n        container.style.overflow = \"\";\n        height.set(next);\n        return;\n      }\n      if (!animation && Math.abs(current - next) < 0.5) return;\n      container.style.overflow = \"hidden\";\n      animation?.stop();\n      animation = animate(height, next, {\n        ...(transition ?? HEIGHT_SPRING),\n        // Not fired on stop(), so a retarget can't lift the clip early.\n        onComplete: () => {\n          animation = null;\n          container.style.overflow = \"\";\n        },\n      });\n    });\n    observer.observe(content);\n\n    return () => {\n      observer.disconnect();\n      animation?.stop();\n    };\n  }, [height, reduceMotion, transition]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      // Stack (and other flex parents) set `min-height: auto` on children,\n      // which sizes to content and swallows the height spring. Allow\n      // shrinking so the measured height can actually animate; the clip is\n      // applied imperatively for the spring's duration only (see above).\n      className=\"min-h-0\"\n      style={{ height }}\n    >\n      <div ref={contentRef} className={className}>\n        {children}\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":";;;;;AAeA,IAAM,IAAgB;AAatB,SAAgB,EAAe,EAC7B,WAAA,GACA,YAAA,GACA,UAAA,EAAA,GAMC;AACD,QAAM,IAAe,EAAuB,IAAI,GAC1C,IAAa,EAAuB,IAAI,GACxC,IAAS,EAAgC,MAAM,GAC/C,IAAe,EAAiB;AAEtC,SAAA,EAAA,MAAgB;AACd,UAAM,IAAY,EAAa,SACzB,IAAU,EAAW;AAC3B,QAAI,CAAC,KAAa,CAAC,EAAS;AAE5B,QAAI,IAA+C;AAEnD,UAAM,IAAW,IAAI,eAAA,CAAgB,MAAY;AAC/C,YAAM,IAAM,EAAQ,CAAA,GAAI,gBAAgB,CAAA,GAClC,IAAO,IAAM,EAAI,YAAY,EAAQ,cACrC,IAAU,EAAO,IAAI;AAC3B,UAAI,MAAY,UAAU,GAAc;AACtC,QAAA,GAAW,KAAK,GAChB,IAAY,MACZ,EAAU,MAAM,WAAW,IAC3B,EAAO,IAAI,CAAI;AACf;AAAA,MACF;AACA,MAAI,CAAC,KAAa,KAAK,IAAI,IAAU,CAAI,IAAI,QAC7C,EAAU,MAAM,WAAW,UAC3B,GAAW,KAAK,GAChB,IAAY,EAAQ,GAAQ,GAAM;AAAA,QAChC,GAAI,KAAc;AAAA,QAElB,YAAA,MAAkB;AAChB,UAAA,IAAY,MACZ,EAAU,MAAM,WAAW;AAAA,QAC7B;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,WAAA,EAAS,QAAQ,CAAO,GAExB,MAAa;AACX,MAAA,EAAS,WAAW,GACpB,GAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAc;AAAA,EAAU,CAAC,GAGnC,gBAAA,EAAC,EAAO,KAAR;AAAA,IACE,KAAK;AAAA,IAKL,WAAU;AAAA,IACV,OAAO,EAAE,QAAA,EAAO;AAAA,IAEhB,UAAA,gBAAA,EAAC,OAAD;AAAA,MAAK,KAAK;AAAA,MAAuB,WAAA;AAAA,MAC9B,UAAA;AAAA,IACE,CAAA;AAAA,EACK,CAAA;AAEhB"}