prime-ui-kit 0.9.1 → 0.9.3

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./components";
 export * from "./icons";
 export * from "./internal/states";
+export * from "./motion/celebrate";
 export * from "./theme/applyTheme";

package/dist/index.js

@@ -1,9 +1,11 @@
 import {
   Accordion,
+  AppHeader,
   AppShell,
   Avatar,
   Badge,
   Banner,
+  BottomNav,
   Breadcrumb,
   ButtonGroup,
   Card,
@@ -20,6 +22,7 @@ import {
   Dropdown,
   ExampleFrame,
   FileUpload,
+  Kanban,
   Kbd,
   LinkButton,
   LoginForm,
@@ -28,9 +31,9 @@ import {
   NotificationCard,
   NotificationProvider,
   PageContent,
+  PageToolbar,
   Pagination,
   Popover,
-  ProgressBar,
   ProgressCircle,
   Radio,
   SegmentedControl,
@@ -38,6 +41,7 @@ import {
   Skeleton,
   Slider,
   SmartFilter,
+  Sparkline,
   Stepper,
   Switch,
   THEME_SWITCHING_ATTRIBUTE,
@@ -49,6 +53,7 @@ import {
   Typography,
   YEARLESS_YEAR,
   applyTheme,
+  celebrate,
   datepickerPresets,
   formatDatepickerValue,
   matchesSmartFilter,
@@ -57,7 +62,7 @@ import {
   suspendTransitions,
   useNotifications,
   useSidebar
-} from "./chunks/chunk-DB2Y3XXA.js";
+} from "./chunks/chunk-OAE4IQX2.js";
 import {
   Button,
   COLOR_PRESETS,
@@ -70,6 +75,7 @@ import {
   Icon,
   Input,
   Label,
+  ProgressBar,
   ScrollContainer,
   Select,
   Spinner,
@@ -77,19 +83,22 @@ import {
   controlSizes,
   createIcon,
   dataStates,
+  getPasswordStrength,
   paletteColors,
   stepDown,
   textTones,
   tones,
   useOptionalControlSize,
   variants
-} from "./chunks/chunk-NHOWNIAR.js";
+} from "./chunks/chunk-6JTZOA5I.js";
 export {
   Accordion,
+  AppHeader,
   AppShell,
   Avatar,
   Badge,
   Banner,
+  BottomNav,
   Breadcrumb,
   Button,
   ButtonGroup,
@@ -116,6 +125,7 @@ export {
   Hint,
   Icon,
   Input,
+  Kanban,
   Kbd,
   Label,
   LinkButton,
@@ -125,6 +135,7 @@ export {
   NotificationCard,
   NotificationProvider,
   PageContent,
+  PageToolbar,
   Pagination,
   Popover,
   ProgressBar,
@@ -137,6 +148,7 @@ export {
   Skeleton,
   Slider,
   SmartFilter,
+  Sparkline,
   Spinner,
   Stepper,
   Switch,
@@ -150,11 +162,13 @@ export {
   Typography,
   YEARLESS_YEAR,
   applyTheme,
+  celebrate,
   controlSizes,
   createIcon,
   dataStates,
   datepickerPresets,
   formatDatepickerValue,
+  getPasswordStrength,
   matchesSmartFilter,
   moveBefore,
   paletteColors,

package/dist/internal/CheckMark.d.ts

@@ -0,0 +1,12 @@
+export type CheckMarkState = "checked" | "unchecked" | "indeterminate";
+/**
+ * The kit's check and indeterminate bar, drawn in with a stroke reveal (foundation §7 rule 8: a
+ * check draws in, it does not pop). Both paths stay in the DOM so the mark animates both ways;
+ * `state` picks the one that shows. Color is `currentColor`; size comes from the host box.
+ * Shared by Checkbox and the color swatches. Own SVG instead of `Icon`: the motion needs
+ * `pathLength` on the paths.
+ */
+export declare function CheckMark({ state, className }: {
+    state: CheckMarkState;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/internal/MorphText.d.ts

@@ -0,0 +1,12 @@
+export type MorphTextProps = {
+    children: string;
+    className?: string;
+};
+/**
+ * A label that changes in place (foundation §7 rule 8): the old letters leave upward, the new ones
+ * come from below one short step apart, and the box glides between the two widths. At rest it is
+ * one plain text span; the letter layers exist only while a change plays. Still on the first
+ * render, under reduced motion, and when only digits change (a counter or a percentage in a label
+ * updates in place).
+ */
+export declare function MorphText({ children: text, className }: MorphTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/internal/RollingNumber.d.ts

@@ -0,0 +1,14 @@
+export type RollingNumberProps = {
+    /** The formatted value («4 812 350 ₽», «12», «−3,4%»); digits roll, other characters stay put. */
+    children: string | number;
+    className?: string;
+};
+/**
+ * A number whose digits roll to their new values column by column, like an odometer (foundation §7
+ * rule 8: counters ease, they do not flip). The DOM holds the real digits (text, copy, assistive
+ * tech and a page without CSS read the value); each digit column draws the 0–9 strip in a
+ * pseudo-element. Columns are keyed from the right, so an unchanged digit stays still and a new
+ * leading digit appears without rolling. A value that changes by itself every frame (a running
+ * percentage) stays plain tabular text: rolling there is noise.
+ */
+export declare function RollingNumber({ children, className }: RollingNumberProps): import("react/jsx-runtime").JSX.Element;

package/dist/internal/overlay/FloatingPanel.d.ts

@@ -15,7 +15,9 @@ export type FloatingPanelProps = Omit<React.HTMLAttributes<HTMLElement>, "onAnim
  * The panel of a floating layer: portaled to `<body>` when it opens (so it stacks above every
  * layer opened before it, on the one overlay z-index), positioned, animated from `data-state` /
  * `data-side` (foundation §8), a size context for the controls inside, and a layer context so
- * layers opened inside stack above it in the layer stack. Renders nothing while closed.
+ * layers opened inside stack above it in the layer stack. Renders nothing while closed. A layer in
+ * sheet mode (`floating.sheet`) renders a scrim and a bottom sheet with a grab handle around the
+ * same panel element; the consumer ref stays on the panel.
  */
 export declare function FloatingPanel({ floating, size, scroll, surface, className, onKeyDown, children, ref, ...rest }: FloatingPanelProps): import("react/jsx-runtime").JSX.Element | null;
 export type FloatingTriggerProps = {

package/dist/internal/overlay/useFloatingLayer.d.ts

@@ -30,6 +30,12 @@ export type UseFloatingLayerOptions = PositionOptions & {
     exitDuration?: MotionDurationToken;
     /** Unmount at once on close, skipping the exit animation (a Tooltip replaced by its neighbour). */
     skipExit?: boolean;
+    /**
+     * Below 640px of viewport the panel is a bottom sheet instead of an anchored panel: a scrim,
+     * a grab handle, swipe down to close, page scroll locked. For panels the user works in (menus,
+     * listboxes, pickers); not for a panel driven by typing in its anchor.
+     */
+    sheet?: boolean;
 };
 export type FloatingLayer = {
     open: boolean;
@@ -38,6 +44,10 @@ export type FloatingLayer = {
     mounted: boolean;
     /** The side after flipping. */
     side: PositionSide;
+    /** Rendered as a bottom sheet (`sheet` on a narrow viewport). */
+    sheet: boolean;
+    /** Swipe-to-close of the sheet; part of the sheet's `onPointerDown`. */
+    onSheetPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
     /** Attach to the panel element (merged with a consumer ref). */
     panelRef: React.RefCallback<HTMLElement>;
     /** The panel element while mounted. */
@@ -57,4 +67,4 @@ export type FloatingLayer = {
  * policy (foundation §8): focus returns to the trigger after Escape, a pick, Tab or a close — not
  * after a press outside, where focus follows the pointer. Render the panel with `FloatingPanel`.
  */
-export declare function useFloatingLayer({ open, onOpenChange, triggerRef, closeOnEscape, closeOnOutsideClick, dismiss, focusOnOpen, trap, tabExit, exitDuration, skipExit, ...positionOptions }: UseFloatingLayerOptions): FloatingLayer;
+export declare function useFloatingLayer({ open, onOpenChange, triggerRef, closeOnEscape, closeOnOutsideClick, dismiss, focusOnOpen, trap, tabExit, exitDuration, skipExit, sheet: sheetOption, ...positionOptions }: UseFloatingLayerOptions): FloatingLayer;

package/dist/internal/surfaceDepth.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+/**
+ * Depth of a surface on the ladder (foundation §4): `0` the page … `4` the deepest nested layer,
+ * `floating` for menus, popovers, modals and drawers, `floating-1`/`floating-2` for layers nested in
+ * one, `tinted` for a host off the ladder (a tinted banner, an accent wash). A surface renders
+ * `data-depth` with it; `globals.css` maps each depth to the context variables
+ * (`--prime-color-layer-current`, `--prime-color-field-bg`…).
+ */
+export type SurfaceDepth = 0 | 1 | 2 | 3 | 4 | "floating" | "floating-1" | "floating-2" | "tinted";
+/**
+ * The depth of a surface nested in `depth`; the deepest layer and `floating-2` repeat, a card on a
+ * tinted host is a card on the page.
+ */
+export declare function nextSurfaceDepth(depth: SurfaceDepth): SurfaceDepth;
+/** Depth of the surface the caller renders: one above the nearest surface around it. */
+export declare function useNestedSurfaceDepth(): SurfaceDepth;
+/** Surfaces inside `children` count their depth from `value`. */
+export declare const SurfaceDepthProvider: React.Provider<SurfaceDepth>;
+/**
+ * The layer an ExampleFrame stage stands for (the docs' "preview background"). The stage element
+ * itself takes it as `data-depth`: no wrapper may sit between the stage and the example, because
+ * the stage lays out its children with child selectors (`> *`).
+ */
+export declare const StageDepthProvider: React.Provider<SurfaceDepth>;
+export declare function useStageDepth(): SurfaceDepth;

package/dist/internal/swatch.d.ts

@@ -31,7 +31,10 @@ export declare const swatchTierClass: string;
 export declare function SwatchFill({ value }: {
     value: string | null;
 }): import("react/jsx-runtime").JSX.Element;
-/** Inside a selectable swatch: the color layer and, when selected, the contrasting check. */
+/**
+ * Inside a selectable swatch: the color layer and the contrasting check, which draws in when the
+ * swatch is selected and retracts when it is not (`CheckMark`, the same mark as Checkbox).
+ */
 export declare function SwatchContent({ value, selected }: {
     value: string | null;
     selected: boolean;

package/dist/internal/touchTarget.d.ts

@@ -0,0 +1,4 @@
+/** A 44px hit area on coarse pointers, both axes, the visual size unchanged (`touchTarget.module.css`). */
+export declare const touchTargetClass: string;
+/** The same hit area grown in height only: a segment beside other content of its host. */
+export declare const touchTargetBlockClass: string;

package/dist/layout/app-header/AppHeader.d.ts

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { type DividerProps } from "@/components/divider/Divider";
+export type AppHeaderLabels = {
+    /** Name of the menu button that opens the off-canvas Sidebar. */
+    menu: string;
+};
+type HeaderProps = React.HTMLAttributes<HTMLElement> & {
+    ref?: React.Ref<HTMLElement>;
+};
+type DivProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+export type AppHeaderRootProps = HeaderProps & {
+    labels?: Partial<AppHeaderLabels>;
+};
+/**
+ * The bar at the very top of the content panel: where you are, global search, a few actions.
+ * One row as high as the Sidebar brand row, so the two read as one line; sticky; lays itself out
+ * from its own width (narrow: the search folds into an icon, the title truncates).
+ */
+declare function AppHeaderRoot({ labels, className, children, ...rest }: AppHeaderRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderRoot {
+    var displayName: string;
+}
+export type AppHeaderStartProps = DivProps;
+/** The leading zone: the menu button, a back button, the title or breadcrumbs. Takes the free width. */
+declare function AppHeaderStart({ className, ...rest }: AppHeaderStartProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderStart {
+    var displayName: string;
+}
+export type AppHeaderTitleProps = DivProps;
+/**
+ * Where you are: an optional `AppHeader.Icon`, the name and an optional `AppHeader.Description`
+ * under it — the same anatomy as the Sidebar brand. The name truncates.
+ */
+declare function AppHeaderTitle({ className, children, ...rest }: AppHeaderTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderTitle {
+    var displayName: string;
+}
+export type AppHeaderIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * Decorative glyph before the title on a tile shaped like the bar's soft buttons (control m).
+ * Not a Thumbnail: its tiers (32 · 40) miss the control height the buttons beside it have.
+ */
+declare function AppHeaderIcon({ className, ...rest }: AppHeaderIconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderIcon {
+    var displayName: string;
+}
+export type AppHeaderDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Muted second line under the title (a workspace, a period); hidden on a narrow header. */
+declare function AppHeaderDescription({ className, ...rest }: AppHeaderDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderDescription {
+    var displayName: string;
+}
+export type AppHeaderSeparatorProps = Omit<DividerProps, "orientation" | "children">;
+/** A short vertical line between groups in a zone (a back button | the path), with air on both sides. */
+declare function AppHeaderSeparator({ className, ...rest }: AppHeaderSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderSeparator {
+    var displayName: string;
+}
+export type AppHeaderSearchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
+    /** Placeholder text; also the button's name when the header is narrow and the field folds. */
+    children: React.ReactNode;
+    /** Key hint at the end. Default `⌘K`; `null` hides it. */
+    shortcut?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * Global search entry: looks like a field, works as a button that opens your CommandMenu (wire
+ * `onClick` and the shortcut). On a narrow header it folds into a square search button.
+ */
+declare function AppHeaderSearch({ children, shortcut, className, ...rest }: AppHeaderSearchProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderSearch {
+    var displayName: string;
+}
+export type AppHeaderActionsProps = DivProps;
+/** Buttons at the end: one primary action, notifications, the account. Never wraps. */
+declare function AppHeaderActions({ className, ...rest }: AppHeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderActions {
+    var displayName: string;
+}
+export type AppHeaderMenuButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
+    /**
+     * `narrow` (default): shown below 768px, where an `offCanvas="auto"` Sidebar leaves the layout;
+     * `always`: on every width (`offCanvas="always"`).
+     */
+    show?: "narrow" | "always";
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/** Opens the off-canvas Sidebar: an icon button named by `labels.menu`; wire `onClick` and `aria-expanded`. */
+declare function AppHeaderMenuButton({ show, className, ...rest }: AppHeaderMenuButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderMenuButton {
+    var displayName: string;
+}
+export declare const AppHeader: {
+    Root: typeof AppHeaderRoot;
+    Start: typeof AppHeaderStart;
+    Title: typeof AppHeaderTitle;
+    Icon: typeof AppHeaderIcon;
+    Description: typeof AppHeaderDescription;
+    Separator: typeof AppHeaderSeparator;
+    Search: typeof AppHeaderSearch;
+    Actions: typeof AppHeaderActions;
+    MenuButton: typeof AppHeaderMenuButton;
+};
+export {};

package/dist/layout/app-shell/AppShell.d.ts

@@ -7,25 +7,25 @@ export type AppShellRootProps = React.HTMLAttributes<HTMLDivElement> & {
 export type AppShellNavProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
-/** Navigation column (usually `Sidebar.Root`); sits on the canvas. */
+/** Navigation column (usually `Sidebar.Root`, a surface one layer above the page). */
 declare function AppShellNav({ className, ...rest }: AppShellNavProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellNav {
     var displayName: string;
 }
 /**
  * Grid: navigation column | content panel. Everything that is not `AppShell.Nav` goes into the
- * content panel (`bg-surface`, inset from the window on wide screens).
+ * content panel, which is the page itself (the layer around the shell): cards on it are the next layer.
  */
 declare function AppShellRoot({ fillViewport, className, children, ...rest }: AppShellRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellRoot {
     var displayName: string;
 }
-export type AppShellHeaderProps = React.HTMLAttributes<HTMLElement> & {
-    ref?: React.Ref<HTMLElement>;
+export type AppShellFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
 };
-/** Top bar of the content panel (breadcrumbs, page actions, mobile menu button). Sticky. */
-declare function AppShellHeader({ className, ...rest }: AppShellHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppShellHeader {
+/** Bottom bar of the content panel (`BottomNav` on a narrow shell). Sticky. */
+declare function AppShellFooter({ className, ...rest }: AppShellFooterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppShellFooter {
     var displayName: string;
 }
 /** `full` (default): the whole panel with responsive gutters; `contained`: centered, up to `--prime-layout-content-max-width` (long-read pages). */
@@ -44,23 +44,28 @@ export type AppShellTemplateProps = Omit<AppShellRootProps, "children" | "ref">
     ref?: React.Ref<HTMLElement>;
     /** Navigation column content, usually `Sidebar.Root`. */
     nav?: React.ReactNode;
-    /** `AppShell.Header` content; no header row when omitted. */
+    /** The top bar of the content panel, an `AppHeader.Root`; no header when omitted. */
     header?: React.ReactNode;
+    /** `AppShell.Footer` content (`BottomNav`); no footer when omitted. */
+    footer?: React.ReactNode;
     children?: React.ReactNode;
     mainProps?: Omit<AppShellMainProps, "children" | "ref">;
     /** Main scrolls back to the top whenever this value changes (pass the router pathname). */
     scrollResetKey?: unknown;
 };
-/** Root + Nav + Header + Main in one; main scrolls to the top when `scrollResetKey` changes. */
-declare function AppShellTemplate({ ref, nav, header, children, mainProps, scrollResetKey, ...rootProps }: AppShellTemplateProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Root + Nav + the header + Main + Footer in one; main scrolls to the top when `scrollResetKey`
+ * changes.
+ */
+declare function AppShellTemplate({ ref, nav, header, footer, children, mainProps, scrollResetKey, ...rootProps }: AppShellTemplateProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellTemplate {
     var displayName: string;
 }
 export declare const AppShell: {
     Root: typeof AppShellRoot;
     Nav: typeof AppShellNav;
-    Header: typeof AppShellHeader;
     Main: typeof AppShellMain;
+    Footer: typeof AppShellFooter;
     Template: typeof AppShellTemplate;
 };
 export {};

package/dist/layout/bottom-nav/BottomNav.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+import type { PaletteColor, Variant } from "@/internal/states";
+export type BottomNavLabels = {
+    /** `aria-label` of the `<nav>` landmark. */
+    nav: string;
+};
+export type BottomNavRootProps = React.HTMLAttributes<HTMLElement> & {
+    /** Icons without visible labels; the labels still name the items for screen readers. */
+    iconOnly?: boolean;
+    /**
+     * A glass capsule floating over the content (backdrop blur, inset from the edges) instead of
+     * a flat bar at the edge. It places itself at the bottom of its positioned container
+     * (`AppShell.Footer`), so the page scrolls under it.
+     */
+    floating?: boolean;
+    labels?: Partial<BottomNavLabels>;
+    /** The `<nav>` bar. */
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * Phone navigation: a bar of 3–5 sections at the bottom of the screen. Inside `AppShell.Footer`
+ * it shows only while the content panel is narrower than 640px; wider, Sidebar navigates.
+ */
+declare function BottomNavRoot({ iconOnly, floating, labels, className, ...rest }: BottomNavRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BottomNavRoot {
+    var displayName: string;
+}
+export type BottomNavItemIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** The item glyph above the label. */
+declare function BottomNavItemIcon({ className, ...rest }: BottomNavItemIconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BottomNavItemIcon {
+    var displayName: string;
+}
+export type BottomNavItemCountProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
+    /** The number (or a short status). */
+    children: React.ReactNode;
+    /** Badge hue. Default `red`: a count on a section asks for attention. */
+    color?: PaletteColor;
+    /** Badge treatment. Default `solid`. */
+    variant?: Exclude<Variant, "ghost">;
+    /** The Badge `<span>`. */
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** A count on the corner of the icon: a small Badge, read after the label. */
+declare function BottomNavItemCount({ color, variant, className, ...rest }: BottomNavItemCountProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BottomNavItemCount {
+    var displayName: string;
+}
+type BottomNavItemOwnProps = {
+    /** Current section: `aria-current="page"`. Links rendered by a router may set it themselves. */
+    current?: boolean;
+    disabled?: boolean;
+    /** Render the single child element (a router link) as the item; its children are the content. */
+    asChild?: boolean;
+    /** `BottomNav.ItemIcon`, an optional `BottomNav.ItemCount` and the label. */
+    children?: React.ReactNode;
+};
+export type BottomNavItemProps = BottomNavItemOwnProps & Omit<React.ComponentPropsWithoutRef<"button">, keyof BottomNavItemOwnProps> & {
+    /** Renders an `<a>` instead of a `<button>`. */
+    href?: string;
+    target?: string;
+    rel?: string;
+    /** The `<a>`, `<button>` or the `asChild` element. */
+    ref?: React.Ref<HTMLElement>;
+};
+/** A section of the bar: the icon above a short label, both in the primary color while current. */
+declare function BottomNavItem({ current, disabled, asChild, href, className, children, onClick, type, ref, ...rest }: BottomNavItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BottomNavItem {
+    var displayName: string;
+}
+export declare const BottomNav: {
+    Root: typeof BottomNavRoot;
+    Item: typeof BottomNavItem;
+    ItemIcon: typeof BottomNavItemIcon;
+    ItemCount: typeof BottomNavItemCount;
+};
+export {};

package/dist/layout/index.d.ts

@@ -1,4 +1,8 @@
-export type { AppShellContentWidth, AppShellHeaderProps, AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
+export type { AppHeaderActionsProps, AppHeaderDescriptionProps, AppHeaderIconProps, AppHeaderLabels, AppHeaderMenuButtonProps, AppHeaderRootProps, AppHeaderSearchProps, AppHeaderSeparatorProps, AppHeaderStartProps, AppHeaderTitleProps, } from "./app-header/AppHeader";
+export { AppHeader } from "./app-header/AppHeader";
+export type { AppShellContentWidth, AppShellFooterProps, AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
 export { AppShell } from "./app-shell/AppShell";
+export type { BottomNavItemCountProps, BottomNavItemIconProps, BottomNavItemProps, BottomNavLabels, BottomNavRootProps, } from "./bottom-nav/BottomNav";
+export { BottomNav } from "./bottom-nav/BottomNav";
 export type { SidebarAccountProps, SidebarBrandLogoProps, SidebarBrandProps, SidebarContentProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemActionProps, SidebarItemCountProps, SidebarItemIconProps, SidebarItemProps, SidebarItemShortcutProps, SidebarLabels, SidebarMode, SidebarRootProps, SidebarSubContentProps, SidebarSubProps, SidebarSubTriggerProps, SidebarToggleProps, } from "./sidebar/Sidebar";
 export { Sidebar, useSidebar } from "./sidebar/Sidebar";

package/dist/motion/celebrate.d.ts

@@ -0,0 +1,18 @@
+export type CelebrateOptions = {
+    /**
+     * Where the burst starts: an element (from its center) or a point in the viewport. Default: the
+     * middle of the screen, a third from the top.
+     */
+    origin?: Element | {
+        x: number;
+        y: number;
+    };
+};
+/**
+ * A short confetti burst for a rare milestone: a quarter closed, the first invoice paid, an
+ * onboarding finished (foundation §7 rule 1 — only rare moments carry delight; never for routine
+ * success, that is a Notification). Draws on a canvas above every layer, ignores the pointer and
+ * assistive tech, and removes itself after 1.4 s. Under reduced motion it draws nothing. Say the
+ * achievement in words too: the burst is decoration. Resolves when the canvas is gone.
+ */
+export declare function celebrate(options?: CelebrateOptions): Promise<void>;

package/dist/tokens/layers.d.ts

@@ -0,0 +1,37 @@
+/** ΔL in OKLab between neighbouring layers. */
+export declare const LAYER_STEP = 0.03;
+/** Layers 0…4: the page and four nested surfaces. */
+export declare const LAYER_DEPTH = 4;
+export type LayerTheme = {
+    /** The page color (layer 0). */
+    page: string;
+    /** Lightness window: no color goes outside it. */
+    lo: number;
+    hi: number;
+    /** Direction of control fills from their host: −1 darker, +1 lighter. */
+    control: 1 | -1;
+};
+export declare const LIGHT_LAYERS: LayerTheme;
+export declare const DARK_LAYERS: LayerTheme;
+export declare const lightnessOf: (hex: string) => number;
+/**
+ * `steps` steps from L towards `dir`. Reflects when less than half a step of room is left (unless
+ * `reflect` is off), snaps to the edge when less than half a step would remain after the move.
+ */
+export declare function move(theme: LayerTheme, L: number, dir: 1 | -1, steps?: number, reflect?: boolean): number;
+export type LayerColors = {
+    /** The layer itself. */
+    bg: string;
+    /** Fields, chips, segmented tracks, neutral buttons on this layer. */
+    fill: string;
+    /** Hover of that fill. */
+    fillHover: string;
+    /** The selected segment (thumb) on a track of this layer. */
+    selected: string;
+};
+/** Layers 0…LAYER_DEPTH of a theme, each one step from its parent. */
+export declare function layerLadder(theme: LayerTheme): LayerColors[];
+/** Floating layers (popovers, menus, modals, drawers) sit one step above a card and never reflect. */
+export declare function floatingLayer(theme: LayerTheme): LayerColors;
+/** Token tree for `color.layer`: `0`…`4` plus `floating` and the two layers nested in it. */
+export declare function layerTokens(theme: LayerTheme): Record<string, LayerColors>;

package/dist/tokens/naming.d.ts

@@ -2,5 +2,5 @@
 export declare const REF_PREFIX = "--prime-ref";
 /** Semantic variables: `--prime-*`. */
 export declare const SYS_PREFIX = "--prime";
-/** Token path → CSS variable: `color.bg.canvas` → `--prime-color-bg-canvas`, camelCase → kebab-case. */
+/** Token path → CSS variable: `color.text.primary` → `--prime-color-text-primary`, camelCase → kebab-case. */
 export declare function toVarName(path: string, prefix?: string): string;

package/dist/tokens/primitives.d.ts

@@ -134,6 +134,8 @@ export declare const primitiveTokens: {
         };
         /** Modular scale, ~1.2 in the body range, ~1.25 for headings. */
         readonly size: {
+            /** Only for tab-bar labels under an icon (BottomNav, iOS tab bar 10pt); text roles start at 12. */
+            readonly 10: "0.625rem";
             readonly 12: "0.75rem";
             readonly 13: "0.8125rem";
             readonly 14: "0.875rem";
@@ -147,6 +149,8 @@ export declare const primitiveTokens: {
             readonly 60: "3.75rem";
         };
         readonly lineHeight: {
+            /** Only for tab-bar labels (BottomNav). */
+            readonly 12: "0.75rem";
             readonly 16: "1rem";
             readonly 20: "1.25rem";
             readonly 24: "1.5rem";