prime-ui-kit 0.9.0 → 0.9.1

package/dist/internal/slot.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 type AnyProps = Record<string, unknown>;
 export type SlotProps = {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
 } & AnyProps;
 /**
  * Merges its own props onto the single React child element.
@@ -10,10 +11,15 @@ export type SlotProps = {
  * Merge rules:
  * - `className` — space-joined (slot first, child second)
  * - `style`     — shallow-merged; child keys win
- * - `on*` handlers — both fire; child handler runs first
- * - All other props — child overrides slot
- * - `ref` — merged via `mergeRefs`
+ * - `aria-describedby` — both ids, child first
+ * - `on*` handlers — both fire, child first; a child `preventDefault()` skips the slot handler
+ * - All other props — a defined child prop overrides the slot prop
+ * - `ref` — merged with the child's ref
+ * - `aria-disabled` on the slot — clicks (pointer and keyboard-activated) are stopped in the capture
+ *   phase, so the child's own `onClick` never runs and a link does not navigate
  */
-export declare const Slot: React.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare function Slot({ children, ref, ...slotProps }: SlotProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Slot {
+    var displayName: string;
+}
 export {};
-//# sourceMappingURL=slot.d.ts.map

package/dist/internal/states.d.ts

@@ -5,13 +5,15 @@
 /** Control size tiers: xs 28 · s 32 · m 36 · l 40 · xl 48. Default is always `m`. */
 export declare const controlSizes: readonly ["xs", "s", "m", "l", "xl"];
 export type ControlSize = (typeof controlSizes)[number];
+/** The tier `n` steps smaller, never below `xs`: a control nested in another (foundation §6 pairing). */
+export declare function stepDown(size: ControlSize, n?: number): ControlSize;
 /** Visual treatment. */
 export declare const variants: readonly ["solid", "soft", "outline", "ghost"];
 export type Variant = (typeof variants)[number];
 /** Semantic color. Destructive is `danger`. */
 export declare const tones: readonly ["neutral", "accent", "success", "warning", "danger", "info"];
 export type Tone = (typeof tones)[number];
-/** Decorative palette color (Badge, Tag, Avatar). */
+/** Decorative palette color (Badge, Avatar). */
 export declare const paletteColors: readonly ["gray", "blue", "green", "orange", "red", "yellow", "purple", "sky", "pink", "teal"];
 export type PaletteColor = (typeof paletteColors)[number];
 /** Values of `data-state`. */
@@ -23,4 +25,3 @@ export type DataState = (typeof dataStates)[number];
  */
 export declare const textTones: readonly ["default", "secondary", "muted", "accent", "success", "warning", "danger"];
 export type TextTone = (typeof textTones)[number];
-//# sourceMappingURL=states.d.ts.map

package/dist/internal/swatch.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+export type ColorPreset = {
+    /** CSS color stored as the value (`onValueChange` returns it as is). */
+    value: string;
+    /** Human-readable name: the option's accessible name and the trigger's `aria-label` suffix. */
+    label: string;
+};
+/**
+ * Default quick colors: the kit palette primitives (`tokens/primitives.ts`).
+ * Row 1 — step 500 of eight hues, row 2 — step 700 of the same hues.
+ * Take `COLOR_PRESETS.slice(0, 8)` for a single row of eight.
+ */
+export declare const COLOR_PRESETS: readonly ColorPreset[];
+/** One selectable swatch: `null` is «no color». */
+export type SwatchOption = {
+    value: string | null;
+    label: string;
+    contrast: "light" | "dark";
+};
+/** The presets as swatch options, plus the «no color» option at the end when `allowEmpty`. */
+export declare function useSwatchOptions(presets: readonly ColorPreset[], allowEmpty: boolean, emptyLabel: string): SwatchOption[];
+/** Class of a selectable swatch (button or option) sized by `--swatch-size` / `--swatch-radius`. */
+export declare const swatchClass: string;
+/**
+ * Tier of a swatch grid, from `data-size` on the same element: `--swatch-radius`, `--swatch-gap`
+ * and `--swatch-size` = `--swatch-base` − 8. The host picks the base: `--swatch-base-control`
+ * (control height) or `--swatch-base-item` (menu item height).
+ */
+export declare const swatchTierClass: string;
+/** Color layer of a swatch; `null` draws the "no color" checkerboard. */
+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. */
+export declare function SwatchContent({ value, selected }: {
+    value: string | null;
+    selected: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export type SwatchChipProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    value: string | null;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * The current color as a small square for a trigger (e.g. inside `Button.Root`): sized from the
+ * host's `--prime-icon-size`, with the faint inner edge; `aria-hidden` — the trigger is named.
+ */
+export declare function SwatchChip({ value, className, ...rest }: SwatchChipProps): import("react/jsx-runtime").JSX.Element;
+/** Case- and space-insensitive color comparison; `null` means "no color". */
+export declare function sameColor(a: string | null, b: string | null): boolean;
+/**
+ * sRGB channels (0–255) of a hex, `rgb()` or `hsl()` color; `null` for anything else (named colors,
+ * other spaces). Kept dependency-free so the swatches stay out of the ColorPicker entry.
+ */
+export declare function colorToRgb(value: string): [number, number, number] | null;
+/** `dark` when a dark mark contrasts better with the color than a light one (WCAG luminance). */
+export declare function markContrast(value: string): "light" | "dark";

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

@@ -1,46 +1,66 @@
 import * as React from "react";
 export type AppShellRootProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
     /** Viewport-high shell: only `AppShell.Main` scrolls. Otherwise the document scrolls. */
     fillViewport?: boolean;
 };
-export type AppShellNavProps = React.HTMLAttributes<HTMLDivElement>;
+export type AppShellNavProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
 /** Navigation column (usually `Sidebar.Root`); sits on the canvas. */
 declare function AppShellNav({ className, ...rest }: AppShellNavProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellNav {
     var displayName: string;
 }
-export type AppShellHeaderProps = React.HTMLAttributes<HTMLElement>;
+/**
+ * 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).
+ */
+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>;
+};
+/** 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 {
+    var displayName: string;
+}
 /** `full` (default): the whole panel with responsive gutters; `contained`: centered, up to `--prime-layout-content-max-width` (long-read pages). */
 export type AppShellContentWidth = "contained" | "full";
 export type AppShellMainProps = React.HTMLAttributes<HTMLElement> & {
+    ref?: React.Ref<HTMLElement>;
     contentWidth?: AppShellContentWidth;
 };
-export type AppShellTemplateProps = Omit<AppShellRootProps, "children"> & {
+/** `<main>` with the canonical gutters; scrolls inside the panel when `fillViewport` is set. */
+declare function AppShellMain({ contentWidth, className, children, ...rest }: AppShellMainProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppShellMain {
+    var displayName: string;
+}
+export type AppShellTemplateProps = Omit<AppShellRootProps, "children" | "ref"> & {
+    /** Forwarded to the `<main>`. */
+    ref?: React.Ref<HTMLElement>;
     /** Navigation column content, usually `Sidebar.Root`. */
     nav?: React.ReactNode;
     /** `AppShell.Header` content; no header row when omitted. */
     header?: React.ReactNode;
     children?: React.ReactNode;
-    mainProps?: Omit<AppShellMainProps, "children">;
+    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;
+declare namespace AppShellTemplate {
+    var displayName: string;
+}
 export declare const AppShell: {
-    Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-        /** Viewport-high shell: only `AppShell.Main` scrolls. Otherwise the document scrolls. */
-        fillViewport?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
+    Root: typeof AppShellRoot;
     Nav: typeof AppShellNav;
-    Header: React.ForwardRefExoticComponent<AppShellHeaderProps & React.RefAttributes<HTMLElement>>;
-    Main: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
-        contentWidth?: AppShellContentWidth;
-    } & React.RefAttributes<HTMLElement>>;
-    Template: React.ForwardRefExoticComponent<Omit<AppShellRootProps, "children"> & {
-        /** Navigation column content, usually `Sidebar.Root`. */
-        nav?: React.ReactNode;
-        /** `AppShell.Header` content; no header row when omitted. */
-        header?: React.ReactNode;
-        children?: React.ReactNode;
-        mainProps?: Omit<AppShellMainProps, "children">;
-    } & React.RefAttributes<HTMLElement>>;
+    Header: typeof AppShellHeader;
+    Main: typeof AppShellMain;
+    Template: typeof AppShellTemplate;
 };
 export {};
-//# sourceMappingURL=AppShell.d.ts.map

package/dist/layout/index.d.ts

@@ -1,5 +1,4 @@
 export type { AppShellContentWidth, AppShellHeaderProps, AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
 export { AppShell } from "./app-shell/AppShell";
-export type { SidebarContentProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarLabels, SidebarMode, SidebarRootProps, SidebarToggleProps, } from "./sidebar/Sidebar";
+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";
-//# sourceMappingURL=index.d.ts.map

package/dist/layout/sidebar/Sidebar.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import { type ControlSize, type PaletteColor, type Variant } from "@/internal/states";
 /** Desktop rail mode: full width, icon rail, or collapsed to zero width. */
 export type SidebarMode = "expanded" | "compact" | "hidden";
 export type SidebarLabels = {
@@ -13,70 +13,144 @@ export type SidebarLabels = {
     close: string;
 };
 type SidebarContextValue = {
+    /** Stored open state of groups and sub-lists (`persistKey`), or `null`. */
+    persist: SidebarPersist | null;
     mode: SidebarMode;
     setMode: (mode: SidebarMode) => void;
-    /** Off-canvas panel state (narrow viewports only). */
+    /** Off-canvas panel state (only while `offCanvas`). */
     open: boolean;
     setOpen: (open: boolean) => void;
     /** expanded ↔ compact on desktop (hidden → expanded); open ↔ closed off-canvas. */
     toggle: () => void;
-    /** True while the sidebar is off-canvas (responsive and the viewport is narrower than 768px). */
-    isMobile: boolean;
+    /** True while the sidebar is an off-canvas panel (`offCanvas="always"`, or `"auto"` below 768px). */
+    offCanvas: boolean;
     size: ControlSize;
     navId: string;
     labels: SidebarLabels;
 };
 declare const useSidebar: () => SidebarContextValue;
+type SidebarPersist = {
+    read: (id: string) => boolean | undefined;
+    write: (id: string, open: boolean) => void;
+};
 export { useSidebar };
-export type SidebarRootProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
-    children?: React.ReactNode;
+export type SidebarRootProps = React.ComponentPropsWithoutRef<"div"> & {
     /** Item tier: height, icon and text of `--prime-control-<size>-*`. */
     size?: ControlSize;
     mode?: SidebarMode;
     defaultMode?: SidebarMode;
     onModeChange?: (mode: SidebarMode) => void;
-    /** Off-canvas panel on narrow viewports (responsive only). */
+    /** The off-canvas panel (while the sidebar is off-canvas, see `offCanvas`). */
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** Below 768px the rail becomes an off-canvas panel with a scrim and a focus trap. */
-    responsive?: boolean;
+    /**
+     * When the rail becomes an off-canvas panel with a scrim and a focus trap, opened by `open`:
+     * `auto` below 768px, `always` at any width (navigation behind a menu button), `never`.
+     */
+    offCanvas?: "auto" | "always" | "never";
+    /**
+     * Remembers the state across reloads in `localStorage` under this key: the mode and which
+     * collapsible groups and sub-lists are open (by their `id`, else their label text). Controlled
+     * `mode` / `open` are not stored.
+     */
+    persistKey?: string;
     labels?: Partial<SidebarLabels>;
 };
-export type SidebarHeaderProps = React.ComponentPropsWithoutRef<"div">;
+export type SidebarHeaderProps = React.ComponentProps<"div">;
 declare function SidebarHeader({ className, ...rest }: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SidebarHeader {
     var displayName: string;
 }
-export type SidebarContentProps = React.ComponentPropsWithoutRef<"div">;
-export type SidebarFooterProps = React.ComponentPropsWithoutRef<"div">;
+export type SidebarContentProps = React.HTMLAttributes<HTMLElement>;
+export type SidebarFooterProps = React.ComponentProps<"div">;
 declare function SidebarFooter({ className, ...rest }: SidebarFooterProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SidebarFooter {
     var displayName: string;
 }
-export type SidebarGroupProps = Omit<React.ComponentPropsWithoutRef<"div">, "role"> & {
-    /** Group heading. In compact mode it fades out and leaves its spacing. */
+export type SidebarGroupProps = Omit<React.ComponentProps<"div">, "role"> & {
+    /** Group heading. In compact mode it folds away. */
     label?: React.ReactNode;
+    /** The heading becomes a disclosure button that shows and hides the items. Needs `label`. */
+    collapsible?: boolean;
+    /** Items shown (controlled; `collapsible` only). */
+    open?: boolean;
+    /** Initial open state (uncontrolled). */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };
-declare function SidebarGroup({ className, label, children, ...rest }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroup({ className, label, collapsible, open: openProp, defaultOpen, onOpenChange, children, ...rest }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SidebarGroup {
     var displayName: string;
 }
+export type SidebarItemIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * An item icon. Before the label it leads and stays in place in every mode; after the label it is
+ * a quiet trailing glyph (an external link) that hides in compact mode.
+ */
+declare function SidebarItemIcon({ className, ...rest }: SidebarItemIconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarItemIcon {
+    var displayName: string;
+}
+export type SidebarItemCountProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
+    /** The number (or a short status). */
+    children: React.ReactNode;
+    /** Badge hue: the count needs attention. Without `color` and `variant` it is a plain number. */
+    color?: PaletteColor;
+    /** Badge treatment (default `soft` once `color` is set). */
+    variant?: Exclude<Variant, "ghost">;
+    /** The number `<span>` (the Badge when it has a hue). */
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * A count after the label: a plain muted number, or a `Badge` when it needs attention (`color`,
+ * `variant`). In compact mode the number leaves the row (still read by screen readers) and a badge
+ * leaves a dot of its hue on the icon.
+ */
+declare function SidebarItemCount({ children, color, variant, className, ...rest }: SidebarItemCountProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarItemCount {
+    var displayName: string;
+}
+export type SidebarItemShortcutProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** A key hint, e.g. `<Kbd>⌘K</Kbd>`. */
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Keyboard hint at the end of an item; hidden in compact mode. */
+declare function SidebarItemShortcut({ children, className, ...rest }: SidebarItemShortcutProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarItemShortcut {
+    var displayName: string;
+}
+export type SidebarItemActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick" | "aria-label"> & {
+    /** Accessible name and tooltip of the action («Создать задачу»). */
+    label: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    /** The glyph; a plus by default. */
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * A small action at the end of the row (create, add): a ghost icon Button one tier down, shown on
+ * hover and focus of the row. It sits next to the item element, never inside it.
+ */
+declare function SidebarItemAction({ label, onClick, disabled, children, className, ...rest }: SidebarItemActionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarItemAction {
+    var displayName: string;
+}
 type SidebarItemOwnProps = {
-    /** Leading icon; stays in place in every mode. */
-    icon?: React.ReactNode;
-    /** Counter or status; in compact mode it becomes a dot on the icon. */
-    badge?: React.ReactNode;
-    /** Keyboard hint (e.g. `<Kbd>`); hidden in compact mode. */
-    shortcut?: React.ReactNode;
-    /** Current page. Links rendered by a router may set `aria-current="page"` instead. */
-    active?: boolean;
+    /** Current page: `aria-current="page"`. Links rendered by a router may set it themselves. */
+    current?: boolean;
     disabled?: boolean;
+    /** Render the single child element (e.g. a router link) as the item; its children are the content. */
+    asChild?: boolean;
     /**
-     * Render the single child element (e.g. a router link) as the item; its children become the
-     * label.
+     * Label and parts: `Sidebar.ItemIcon` (leading, or trailing after the label),
+     * `Sidebar.ItemCount`, `Sidebar.ItemShortcut`, `Sidebar.ItemAction`.
      */
-    asChild?: boolean;
     children?: React.ReactNode;
 };
 export type SidebarItemProps = SidebarItemOwnProps & Omit<React.ComponentPropsWithoutRef<"button">, keyof SidebarItemOwnProps> & {
@@ -85,25 +159,101 @@ export type SidebarItemProps = SidebarItemOwnProps & Omit<React.ComponentPropsWi
     target?: string;
     rel?: string;
 };
-export type SidebarToggleProps = Omit<React.ComponentPropsWithoutRef<"button">, "children" | "aria-label" | "aria-expanded" | "aria-controls">;
+export type SidebarSubProps = React.ComponentProps<"div"> & {
+    /** Children shown (controlled). */
+    open?: boolean;
+    /** Initial open state (uncontrolled). A sub-list also opens by itself when a child becomes current. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * A parent item with child items: `Sidebar.SubTrigger` + `Sidebar.SubContent`. Expanded, the
+ * children unfold under the parent on a guide line; on the compact rail they open in a flyout.
+ */
+declare function SidebarSub({ open: openProp, defaultOpen, onOpenChange, className, children, ...rest }: SidebarSubProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarSub {
+    var displayName: string;
+}
+export type SidebarSubTriggerProps = Omit<React.ComponentPropsWithoutRef<"button">, "aria-expanded" | "aria-controls"> & {
+    /** Label and parts, as in `Sidebar.Item`: `Sidebar.ItemIcon`, `Sidebar.ItemCount`. */
+    children?: React.ReactNode;
+};
+export type SidebarSubContentProps = Omit<React.ComponentProps<"div">, "role">;
+/** The children of a `Sidebar.Sub`: `Sidebar.Item`s on a faint guide line under the parent icon. */
+declare function SidebarSubContent({ className, children, ref, ...rest }: SidebarSubContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarSubContent {
+    var displayName: string;
+}
+export type SidebarBrandLogoProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** The product mark (`<img>`, `<svg>`); it fills a square on the icon axis. */
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** The product mark: stays on the icon axis in every mode. */
+declare function SidebarBrandLogo({ className, ...rest }: SidebarBrandLogoProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarBrandLogo {
+    var displayName: string;
+}
+export type SidebarBrandProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    /** Muted second line under the name (workspace, plan). */
+    description?: React.ReactNode;
+    /** Renders an `<a>` (usually home). */
+    href?: string;
+    /** Render the single child element (e.g. a router link) as the brand; its children are the content. */
+    asChild?: boolean;
+    /** `Sidebar.BrandLogo` and the product name. */
+    children?: React.ReactNode;
+};
+export type SidebarAccountProps = Omit<React.ComponentPropsWithoutRef<"button">, "children"> & {
+    /** Muted second line under the name (email, role). */
+    description?: React.ReactNode;
+    /** An `Avatar.Root` (sized to the tier by the slot) and the person's name. */
+    children?: React.ReactNode;
+};
+export type SidebarToggleProps = Omit<React.ComponentPropsWithoutRef<"button">, "children" | "aria-label" | "aria-expanded" | "aria-controls"> & {
+    /**
+     * `item` — a row in the rail. `header` — a small icon button at the end of `Sidebar.Header`
+     * while expanded that moves onto the rail's outer edge as a round button in compact mode.
+     */
+    variant?: "item" | "header";
+};
 export declare const Sidebar: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
-        children?: React.ReactNode;
+    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         /** Item tier: height, icon and text of `--prime-control-<size>-*`. */
         size?: ControlSize;
         mode?: SidebarMode;
         defaultMode?: SidebarMode;
         onModeChange?: (mode: SidebarMode) => void;
-        /** Off-canvas panel on narrow viewports (responsive only). */
+        /** The off-canvas panel (while the sidebar is off-canvas, see `offCanvas`). */
         open?: boolean;
         defaultOpen?: boolean;
         onOpenChange?: (open: boolean) => void;
-        /** Below 768px the rail becomes an off-canvas panel with a scrim and a focus trap. */
-        responsive?: boolean;
+        /**
+         * When the rail becomes an off-canvas panel with a scrim and a focus trap, opened by `open`:
+         * `auto` below 768px, `always` at any width (navigation behind a menu button), `never`.
+         */
+        offCanvas?: "auto" | "always" | "never";
+        /**
+         * Remembers the state across reloads in `localStorage` under this key: the mode and which
+         * collapsible groups and sub-lists are open (by their `id`, else their label text). Controlled
+         * `mode` / `open` are not stored.
+         */
+        persistKey?: string;
         labels?: Partial<SidebarLabels>;
     } & React.RefAttributes<HTMLDivElement>>;
     Header: typeof SidebarHeader;
-    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Brand: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+        /** Muted second line under the name (workspace, plan). */
+        description?: React.ReactNode;
+        /** Renders an `<a>` (usually home). */
+        href?: string;
+        /** Render the single child element (e.g. a router link) as the brand; its children are the content. */
+        asChild?: boolean;
+        /** `Sidebar.BrandLogo` and the product name. */
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLElement>>;
+    BrandLogo: typeof SidebarBrandLogo;
+    Content: React.ForwardRefExoticComponent<SidebarContentProps & React.RefAttributes<HTMLElement>>;
     Footer: typeof SidebarFooter;
     Group: typeof SidebarGroup;
     Item: React.ForwardRefExoticComponent<SidebarItemOwnProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, keyof SidebarItemOwnProps> & {
@@ -112,6 +262,27 @@ export declare const Sidebar: {
         target?: string;
         rel?: string;
     } & React.RefAttributes<HTMLElement>>;
-    Toggle: React.ForwardRefExoticComponent<SidebarToggleProps & React.RefAttributes<HTMLButtonElement>>;
+    ItemIcon: typeof SidebarItemIcon;
+    ItemCount: typeof SidebarItemCount;
+    ItemShortcut: typeof SidebarItemShortcut;
+    ItemAction: typeof SidebarItemAction;
+    Sub: typeof SidebarSub;
+    SubTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "aria-controls" | "aria-expanded"> & {
+        /** Label and parts, as in `Sidebar.Item`: `Sidebar.ItemIcon`, `Sidebar.ItemCount`. */
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    SubContent: typeof SidebarSubContent;
+    Account: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+        /** Muted second line under the name (email, role). */
+        description?: React.ReactNode;
+        /** An `Avatar.Root` (sized to the tier by the slot) and the person's name. */
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    Toggle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children" | "aria-controls" | "aria-expanded" | "aria-label"> & {
+        /**
+         * `item` — a row in the rail. `header` — a small icon button at the end of `Sidebar.Header`
+         * while expanded that moves onto the rail's outer edge as a round button in compact mode.
+         */
+        variant?: "item" | "header";
+    } & React.RefAttributes<HTMLButtonElement>>;
 };
-//# sourceMappingURL=Sidebar.d.ts.map

package/dist/theme/applyTheme.d.ts

@@ -12,4 +12,3 @@ export declare function suspendTransitions(element: HTMLElement): void;
  * suspended for that frame. Use it instead of setting the attribute by hand.
  */
 export declare function applyTheme(scheme: ThemeScheme, element?: HTMLElement): void;
-//# sourceMappingURL=applyTheme.d.ts.map

package/dist/tokens/naming.d.ts

@@ -0,0 +1,6 @@
+/** Primitive variables: `--prime-ref-*`. */
+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. */
+export declare function toVarName(path: string, prefix?: string): string;