prime-ui-kit 0.15.0 → 0.17.0

package/src/styles/theme-light.css

@@ -39,7 +39,7 @@
   --prime-badge-xs-radius: var(--prime-ref-radius-4);
   --prime-badge-xs-text-size: var(--prime-ref-font-size-12);
   --prime-border-width: 1px;
-  --prime-bottom-nav-blur: 0.875rem;
+  --prime-bottom-nav-blur: var(--prime-glass-blur);
   --prime-bottom-nav-floating-gap: var(--prime-ref-space-2);
   --prime-bottom-nav-floating-height: 2.875rem;
   --prime-bottom-nav-floating-icon-only-height: 2.5rem;
@@ -69,11 +69,12 @@
   --prime-color-accent-soft: var(--prime-ref-color-cobalt-100);
   --prime-color-accent-soft-hover: var(--prime-ref-color-cobalt-200);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-700);
-  --prime-color-bg-edge-shadow: rgba(17, 19, 24, 0.14);
-  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-0) 72%, transparent);
-  --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.85);
+  --prime-color-bg-edge-shadow: color-mix(in srgb, var(--prime-ref-color-gray-925) 14%, transparent);
+  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-white) 72%, transparent);
+  --prime-color-bg-glass-edge: color-mix(in srgb, var(--prime-ref-color-white) 85%, transparent);
+  --prime-color-bg-glass-solid: var(--prime-color-layer-floating-bg);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-925);
-  --prime-color-bg-scrim: rgba(17, 19, 24, 0.44);
+  --prime-color-bg-scrim: color-mix(in srgb, var(--prime-ref-color-gray-925) 44%, transparent);
   --prime-color-border-control: transparent;
   --prime-color-border-default: var(--prime-ref-color-gray-150);
   --prime-color-border-faint: var(--prime-ref-color-gray-75);
@@ -96,6 +97,7 @@
   --prime-color-chart-scale-5: var(--prime-ref-color-cobalt-800);
   --prime-color-chart-scale-fg: var(--prime-ref-color-white);
   --prime-color-control-thumb: var(--prime-ref-color-white);
+  --prime-color-control-thumb-disabled: var(--prime-ref-color-white);
   --prime-color-danger-border: var(--prime-ref-color-red-500);
   --prime-color-danger-default: var(--prime-ref-color-red-600);
   --prime-color-danger-fg: var(--prime-ref-color-white);
@@ -103,16 +105,17 @@
   --prime-color-danger-soft: var(--prime-ref-color-red-100);
   --prime-color-danger-text: var(--prime-ref-color-red-700);
   --prime-color-field-bg-disabled: color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent);
-  --prime-color-fill-faint: rgba(17, 19, 24, 0.04);
+  --prime-color-fill-faint: color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent);
   --prime-color-fill-strong: color-mix(in srgb, var(--prime-ref-color-gray-925) 15%, transparent);
   --prime-color-fill-strong-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 22%, transparent);
-  --prime-color-fill-subtle: rgba(17, 19, 24, 0.04);
-  --prime-color-fill-subtle-active: rgba(17, 19, 24, 0.07);
+  --prime-color-fill-subtle: color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent);
+  --prime-color-fill-subtle-active: color-mix(in srgb, var(--prime-ref-color-gray-925) 7%, transparent);
   --prime-color-focus-ring: var(--prime-ref-color-cobalt-700);
   --prime-color-info-default: var(--prime-ref-color-sky-700);
   --prime-color-info-fg: var(--prime-ref-color-white);
   --prime-color-info-soft: var(--prime-ref-color-sky-100);
   --prime-color-info-text: var(--prime-ref-color-sky-800);
+  --prime-color-ink-on-light: var(--prime-ref-color-gray-925);
   --prime-color-layer-0-bg: #f3f4f6;
   --prime-color-layer-0-fill: #e9eaec;
   --prime-color-layer-0-fill-hover: #dfe0e2;
@@ -145,11 +148,11 @@
   --prime-color-layer-floating2-fill: #f4f5f7;
   --prime-color-layer-floating2-fill-hover: #eaebed;
   --prime-color-layer-floating2-selected: #ffffff;
-  --prime-color-media-disk: rgba(17, 19, 24, 0.48);
-  --prime-color-media-pill: rgba(17, 19, 24, 0.72);
-  --prime-color-media-pill-fg: rgba(255, 255, 255, 0.8);
-  --prime-color-media-shade: rgba(17, 19, 24, 0.56);
-  --prime-color-media-shade-fg: var(--prime-ref-color-gray-0);
+  --prime-color-media-disk: color-mix(in srgb, var(--prime-ref-color-gray-925) 48%, transparent);
+  --prime-color-media-pill: color-mix(in srgb, var(--prime-ref-color-gray-925) 72%, transparent);
+  --prime-color-media-pill-fg: color-mix(in srgb, var(--prime-ref-color-white) 80%, transparent);
+  --prime-color-media-shade: color-mix(in srgb, var(--prime-ref-color-gray-925) 56%, transparent);
+  --prime-color-media-shade-fg: var(--prime-ref-color-white);
   --prime-color-media-stage: var(--prime-ref-color-gray-950);
   --prime-color-message-outgoing-accent: var(--prime-ref-color-cobalt-700);
   --prime-color-message-outgoing-accent-fg: var(--prime-ref-color-white);
@@ -166,7 +169,6 @@
   --prime-color-palette-blue-solid: var(--prime-ref-color-cobalt-700);
   --prime-color-palette-blue-solid-fg: var(--prime-ref-color-white);
   --prime-color-palette-blue-text: var(--prime-ref-color-cobalt-700);
-  --prime-color-palette-gray-soft: color-mix(in srgb, var(--prime-ref-color-gray-925) 10%, transparent);
   --prime-color-palette-gray-solid: var(--prime-ref-color-gray-600);
   --prime-color-palette-gray-solid-fg: var(--prime-ref-color-white);
   --prime-color-palette-gray-text: var(--prime-ref-color-gray-700);
@@ -202,21 +204,22 @@
   --prime-color-palette-yellow-solid: var(--prime-ref-color-yellow-400);
   --prime-color-palette-yellow-solid-fg: var(--prime-ref-color-gray-925);
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-800);
+  --prime-color-skeleton-fill: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
   --prime-color-success-default: var(--prime-ref-color-green-700);
   --prime-color-success-fg: var(--prime-ref-color-white);
   --prime-color-success-hover: var(--prime-ref-color-green-800);
   --prime-color-success-soft: var(--prime-ref-color-green-100);
   --prime-color-success-text: var(--prime-ref-color-green-700);
   --prime-color-text-disabled: var(--prime-ref-color-gray-400);
-  --prime-color-text-inverse: var(--prime-ref-color-gray-0);
+  --prime-color-text-inverse: var(--prime-ref-color-white);
   --prime-color-text-muted: var(--prime-ref-color-gray-600);
   --prime-color-text-placeholder: var(--prime-ref-color-gray-600);
   --prime-color-text-primary: var(--prime-ref-color-gray-925);
   --prime-color-text-secondary: var(--prime-ref-color-gray-700);
   --prime-color-tooltip-bg: var(--prime-ref-color-gray-925);
-  --prime-color-tooltip-fill: rgba(255, 255, 255, 0.14);
+  --prime-color-tooltip-fill: color-mix(in srgb, var(--prime-ref-color-white) 14%, transparent);
   --prime-color-tooltip-muted: var(--prime-ref-color-gray-300);
-  --prime-color-tooltip-text: var(--prime-ref-color-gray-0);
+  --prime-color-tooltip-text: var(--prime-ref-color-white);
   --prime-color-warning-default: var(--prime-ref-color-orange-700);
   --prime-color-warning-fg: var(--prime-ref-color-white);
   --prime-color-warning-soft: var(--prime-ref-color-orange-100);
@@ -317,6 +320,7 @@
   --prime-focus-offset-inset: -2px;
   --prime-focus-space: 4px;
   --prime-focus-width: 2px;
+  --prime-font-family-key: var(--prime-ref-font-family-key);
   --prime-font-family-mono: var(--prime-ref-font-family-mono);
   --prime-font-family-sans: var(--prime-ref-font-family-sans);
   --prime-font-tracking-normal: var(--prime-ref-font-tracking-normal);
@@ -329,29 +333,36 @@
   --prime-gallery-gap: 2px;
   --prime-gallery-max-size: 22.5rem;
   --prime-gallery-min-size: 16rem;
+  --prime-glass-blur: 0.875rem;
+  --prime-glass-saturation: 1.8;
+  --prime-icon-gesture-shift: 4px;
   --prime-icon-l: var(--prime-ref-icon-24);
   --prime-icon-m: var(--prime-ref-icon-20);
   --prime-icon-s: var(--prime-ref-icon-16);
   --prime-icon-xl: var(--prime-ref-icon-32);
   --prime-icon-xs: var(--prime-ref-icon-14);
   --prime-layout-content-max-width: 75rem;
+  --prime-layout-form-width-m: 35rem;
+  --prime-layout-form-width-s: 27.5rem;
   --prime-layout-gutter-l: var(--prime-ref-space-8);
   --prime-layout-gutter-m: var(--prime-ref-space-6);
   --prime-layout-gutter-s: var(--prime-ref-space-4);
+  --prime-layout-min-width: 20rem;
+  --prime-layout-narrow-width: 22.5rem;
   --prime-layout-reading-max-width: 42rem;
   --prime-layout-sidebar-collapsed-width: var(--prime-ref-space-14);
   --prime-layout-sidebar-width: 15.5rem;
+  --prime-layout-tile-min-width: 12rem;
   --prime-media-disk-blur: var(--prime-ref-space-1);
+  --prime-media-shade-blur: var(--prime-ref-space-2);
   --prime-media-viewer-bar-width: 40rem;
   --prime-media-viewer-inset: var(--prime-ref-space-4);
   --prime-media-viewer-page-gap: var(--prime-ref-space-6);
   --prime-message-card-width: 16rem;
-  --prime-message-dim-opacity: 0.42;
   --prime-message-dim-saturation: 0.6;
   --prime-message-gap: var(--prime-ref-space-4);
   --prime-message-group-gap: var(--prime-ref-space-2);
   --prime-message-max-width: 30rem;
-  --prime-message-media-max-height: 22.5rem;
   --prime-message-morph-duration: var(--prime-ref-duration-300);
   --prime-message-padding-x: var(--prime-ref-space-3);
   --prime-message-padding-y: var(--prime-ref-space-2);
@@ -360,6 +371,7 @@
   --prime-message-tail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16' preserveAspectRatio='none'%3E%3Cpath d='M8 0C8 7 6.5 12.5 0.6 15.3C0.2 15.5 0.3 16 0.8 16H8Z'/%3E%3C/svg%3E");
   --prime-message-tail-width: var(--prime-ref-space-2);
   --prime-message-video-note: 14.5rem;
+  --prime-message-video-note-box: 16.75rem;
   --prime-modal-padding: var(--prime-ref-space-6);
   --prime-modal-radius: var(--prime-ref-radius-16);
   --prime-modal-viewport-padding: var(--prime-ref-space-4);
@@ -377,10 +389,31 @@
   --prime-motion-easing-enter: var(--prime-ref-easing-enter);
   --prime-motion-easing-exit: var(--prime-ref-easing-exit);
   --prime-motion-easing-standard: var(--prime-ref-easing-standard);
+  --prime-motion-fade-base: var(--prime-ref-duration-380);
+  --prime-motion-fade-fast: var(--prime-ref-duration-230);
+  --prime-motion-fade-slow: var(--prime-ref-duration-570);
+  --prime-motion-fade-xfast: var(--prime-ref-duration-150);
+  --prime-motion-hold-confirm: var(--prime-ref-duration-1200);
+  --prime-motion-instant: var(--prime-ref-duration-0);
   --prime-motion-loop: var(--prime-ref-duration-570);
+  --prime-motion-never: var(--prime-ref-duration-never);
   --prime-motion-press-scale: 0.98;
   --prime-motion-press-scale-compact: 0.96;
+  --prime-motion-scale-burst: 1.4;
+  --prime-motion-scale-emphasis: 1.2;
+  --prime-motion-scale-enter: 0.96;
+  --prime-motion-scale-grab: 1.25;
+  --prime-motion-scale-hover: 1.1;
+  --prime-motion-scale-lift: 1.02;
+  --prime-motion-scale-mark: 0.6;
+  --prime-motion-scale-pop: 0.8;
+  --prime-motion-scale-pulse: 2;
+  --prime-motion-scale-settle: 0.9;
   --prime-motion-stagger: var(--prime-ref-duration-80);
+  --prime-opacity-busy: 0.6;
+  --prime-opacity-dim: 0.42;
+  --prime-opacity-disabled: 0.5;
+  --prime-opacity-ghost: 0.4;
   --prime-panel-content-padding: var(--prime-ref-space-4);
   --prime-panel-group-label-height: var(--prime-ref-space-7);
   --prime-panel-item-padding-x: var(--prime-ref-space-2);
@@ -396,10 +429,10 @@
   --prime-radius-s: var(--prime-ref-radius-6);
   --prime-radius-xl: var(--prime-ref-radius-16);
   --prime-radius-xs: var(--prime-ref-radius-4);
-  --prime-shadow-modal: 0 0 0 1px rgba(17, 19, 24, 0.04), 0 32px 64px -16px rgba(17, 19, 24, 0.30);
-  --prime-shadow-overlay: 0 0 0 1px rgba(17, 19, 24, 0.04), 0 12px 32px -8px rgba(17, 19, 24, 0.18);
-  --prime-shadow-raised: 0 1px 2px rgba(17, 19, 24, 0.04);
-  --prime-shadow-thumb: 0 0 0 1px rgba(17, 19, 24, 0.08), 0 1px 3px rgba(17, 19, 24, 0.16);
+  --prime-shadow-modal: 0 0 0 1px color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent), 0 32px 64px -16px color-mix(in srgb, var(--prime-ref-color-gray-925) 30%, transparent);
+  --prime-shadow-overlay: 0 0 0 1px color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent), 0 12px 32px -8px color-mix(in srgb, var(--prime-ref-color-gray-925) 18%, transparent);
+  --prime-shadow-raised: 0 1px 2px color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent);
+  --prime-shadow-thumb: 0 0 0 1px color-mix(in srgb, var(--prime-ref-color-gray-925) 8%, transparent), 0 1px 3px color-mix(in srgb, var(--prime-ref-color-gray-925) 16%, transparent);
   --prime-sheet-handle-area: var(--prime-ref-space-5);
   --prime-sheet-handle-height: var(--prime-ref-space-1);
   --prime-sheet-handle-width: 2.25rem;
@@ -509,6 +542,13 @@
   --prime-thumbnail-xl-radius: var(--prime-ref-radius-12);
   --prime-thumbnail-xs-height: var(--prime-ref-space-6);
   --prime-thumbnail-xs-radius: var(--prime-ref-radius-4);
+  --prime-tint-active: 24%;
+  --prime-tint-faint: 8%;
+  --prime-tint-heavy: 72%;
+  --prime-tint-hover: 18%;
+  --prime-tint-line: 32%;
+  --prime-tint-soft: 12%;
+  --prime-tint-strong: 48%;
   --prime-tooltip-arrow-height: 0.3125rem;
   --prime-tooltip-arrow-width: 0.625rem;
   --prime-tooltip-l-line-height: var(--prime-ref-font-line-height-20);
@@ -538,7 +578,14 @@
   --prime-tooltip-xs-padding-y: var(--prime-ref-space-1);
   --prime-tooltip-xs-radius: var(--prime-ref-radius-4);
   --prime-tooltip-xs-text-size: var(--prime-ref-font-size-12);
+  --prime-z-above: var(--prime-ref-z-index-2);
+  --prime-z-base: var(--prime-ref-z-index-0);
+  --prime-z-below: var(--prime-ref-z-index-below);
+  --prime-z-cover: var(--prime-ref-z-index-4);
+  --prime-z-front: var(--prime-ref-z-index-5);
   --prime-z-overlay: var(--prime-ref-z-index-overlay);
+  --prime-z-raised: var(--prime-ref-z-index-1);
   --prime-z-sticky: var(--prime-ref-z-index-sticky);
   --prime-z-toast: var(--prime-ref-z-index-toast);
+  --prime-z-top: var(--prime-ref-z-index-3);
 }

package/src/styles/tokens.css

@@ -1,6 +1,7 @@
 /* AUTO-GENERATED by scripts/build-tokens.ts */
 :root {
-  --prime-ref-color-chart-dark-green: #008300;
+  --prime-ref-color-black: #000000;
+  --prime-ref-color-chart-dark-green: #008a00;
   --prime-ref-color-chart-dark-orange: #d95926;
   --prime-ref-color-chart-dark-pink: #d55181;
   --prime-ref-color-chart-dark-purple: #9085e9;
@@ -24,10 +25,10 @@
   --prime-ref-color-cobalt-800: #2540c8;
   --prime-ref-color-cobalt-900: #283a9a;
   --prime-ref-color-cobalt-950: #1b2249;
-  --prime-ref-color-gray-0: #ffffff;
   --prime-ref-color-gray-100: #e8eaee;
   --prime-ref-color-gray-150: #e0e3e8;
   --prime-ref-color-gray-300: #b9bec8;
+  --prime-ref-color-gray-350: #a1a8b6;
   --prime-ref-color-gray-400: #949bab;
   --prime-ref-color-gray-50: #f3f4f6;
   --prime-ref-color-gray-500: #636a79;
@@ -87,18 +88,22 @@
   --prime-ref-color-yellow-500: #eab308;
   --prime-ref-color-yellow-700: #a16207;
   --prime-ref-color-yellow-800: #854d0e;
+  --prime-ref-duration-0: 0ms;
+  --prime-ref-duration-1200: 1200ms;
   --prime-ref-duration-150: 150ms;
   --prime-ref-duration-230: 230ms;
   --prime-ref-duration-300: 300ms;
   --prime-ref-duration-380: 380ms;
   --prime-ref-duration-570: 570ms;
   --prime-ref-duration-80: 80ms;
+  --prime-ref-duration-never: 600000s;
   --prime-ref-easing-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
   --prime-ref-easing-enter: cubic-bezier(0, 0, 0, 1);
   --prime-ref-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
   --prime-ref-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
-  --prime-ref-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --prime-ref-font-family-sans: "Golos Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --prime-ref-font-family-key: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, system-ui, -apple-system, "Segoe UI Symbol", Menlo, Consolas, monospace;
+  --prime-ref-font-family-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --prime-ref-font-family-sans: "Golos Text", "Golos Text Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --prime-ref-font-line-height-12: 0.75rem;
   --prime-ref-font-line-height-16: 1rem;
   --prime-ref-font-line-height-20: 1.25rem;
@@ -142,7 +147,7 @@
   --prime-ref-radius-6: 6px;
   --prime-ref-radius-8: 8px;
   --prime-ref-radius-full: 9999px;
-  --prime-ref-space-0: 0;
+  --prime-ref-space-0: 0rem;
   --prime-ref-space-1: 0.25rem;
   --prime-ref-space-10: 2.5rem;
   --prime-ref-space-12: 3rem;
@@ -158,6 +163,13 @@
   --prime-ref-space-7: 1.75rem;
   --prime-ref-space-8: 2rem;
   --prime-ref-space-9: 2.25rem;
+  --prime-ref-z-index-0: 0;
+  --prime-ref-z-index-1: 1;
+  --prime-ref-z-index-2: 2;
+  --prime-ref-z-index-3: 3;
+  --prime-ref-z-index-4: 4;
+  --prime-ref-z-index-5: 5;
+  --prime-ref-z-index-below: -1;
   --prime-ref-z-index-overlay: 1000;
   --prime-ref-z-index-sticky: 100;
   --prime-ref-z-index-toast: 10000;

package/dist/components/dnd/useFlipList.d.ts

@@ -1,17 +0,0 @@
-/**
- * WAAPI timing from the motion tokens (`--prime-motion-duration-<token>`,
- * `--prime-motion-easing-<curve>`), read at animation time so theme and app overrides apply;
- * WAAPI cannot take `var()`. Read once per frame: a computed style read of the root forces a style
- * pass, and each list of a board would otherwise force its own after the previous list's glides.
- */
-export declare function motionTiming(duration: "fast" | "base", curve?: "standard" | "enter" | "exit"): KeyframeAnimationOptions;
-/**
- * Animates layout changes of list items (`data-dnd-item`) and of the gap (`data-dnd-gap`) from the position currently on screen. Hit testing still uses
- * `layoutRect`, so visual easing never changes a drop decision.
- */
-export declare function useFlipList(container: HTMLElement | null, layoutKey: string, selector: string, enabled: boolean, 
-/**
- * A new value animates this layout change with no drag in flight: a keyboard move, or a drop the
- * owner refused gliding back.
- */
-settle?: number): void;

package/dist/components/gantt/useEdgeAutoScroll.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-/**
- * Horizontal auto-scroll for a gesture on the time axis (move, resize, draw a bar): while the
- * pointer is near the start edge — the end of the pinned column, not the scroller's own edge, which
- * is why `autoScrollStep` does not fit — or near the end edge, the chart's scroller moves at the
- * kit's edge speed (`edgeSpeed`, `src/internal/edgeAutoScroll`), and `onScrolled` lets the gesture
- * re-read its position.
- */
-export declare function useEdgeAutoScroll(scrollRef: React.RefObject<HTMLElement | null>, startEdge: () => number): {
-    follow: (clientX: number, onScrolled: () => void) => void;
-    stop: () => void;
-};

package/dist/components/modal/ModalDialog.d.ts

@@ -1,46 +0,0 @@
-import * as React from "react";
-import type { ControlSize } from "../../internal/states";
-import { type DialogDiscardLabels } from "./DialogParts";
-export type ModalLabels = DialogDiscardLabels & {
-    /** `aria-label` of the header close button. */
-    close: string;
-};
-export type ModalRootProps = {
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    /** Escape closes the dialog. Default `true`. */
-    closeOnEscape?: boolean;
-    /**
-     * A click on the scrim (or, on a narrow viewport, a swipe down) closes the dialog. Default
-     * `true`; turn it off for destructive confirms.
-     */
-    closeOnOutsideClick?: boolean;
-    /** Enter clicks the action wrapped in `Modal.Confirm`. Default `true`. */
-    confirmOnEnter?: boolean;
-    /** Replaces the default Enter confirm (the `Modal.Confirm` click). */
-    onEnterConfirm?: (event: KeyboardEvent) => void;
-    labels?: Partial<ModalLabels>;
-    children?: React.ReactNode;
-};
-export declare function ModalRoot({ confirmOnEnter, labels, children, ...options }: ModalRootProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ModalRoot {
-    var displayName: string;
-}
-export type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Dialog width: `xs` 360 · `s` 440 · `m` 560 · `l` 720 · `xl` 960. Below 640px of viewport the
-     * dialog is always a full-width bottom sheet with a grab handle.
-     */
-    size?: ControlSize;
-    /** Portal target. Default `document.body`. */
-    container?: HTMLElement | null;
-    /** Class on the full-screen scrim. */
-    overlayClassName?: string;
-    /** The `role="dialog"` panel. */
-    ref?: React.Ref<HTMLDivElement>;
-};
-export declare function ModalContent({ container, children, ...props }: ModalContentProps): import("react/jsx-runtime").JSX.Element | null;
-export declare namespace ModalContent {
-    var displayName: string;
-}

package/dist/components/page-content/PageContent.d.ts

@@ -1,173 +0,0 @@
-import * as React from "react";
-/** Cap of the page column inside `main`. */
-export type PageContentMaxWidth = "full" | "readable" | "wide";
-export type PageContentRootProps = React.HTMLAttributes<HTMLDivElement> & {
-    maxWidth?: PageContentMaxWidth;
-    /**
-     * The page takes the height of the panel (`AppShell.Root fillViewport`): the body gets what the
-     * header leaves, for a full-height table, board, chat or `PageContent.Split`.
-     */
-    fill?: boolean;
-    ref?: React.Ref<HTMLDivElement>;
-};
-declare function PageContentRoot({ maxWidth, fill, className, ...rest }: PageContentRootProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentRoot {
-    var displayName: string;
-}
-export type PageContentPageProps = React.HTMLAttributes<HTMLElement> & {
-    ref?: React.Ref<HTMLElement>;
-};
-/** The whole page as a `<section>` (full panel width): `Header` with the one h1, then `Body`. */
-declare function PageContentPage({ className, ...rest }: PageContentPageProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentPage {
-    var displayName: string;
-}
-type DivProps = React.HTMLAttributes<HTMLDivElement> & {
-    ref?: React.Ref<HTMLDivElement>;
-};
-export type PageContentActionsProps = DivProps;
-/** Page-level actions (buttons) next to the title; wrap below the heading on narrow columns. */
-declare function PageContentActions({ className, ...rest }: PageContentActionsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentActions {
-    var displayName: string;
-}
-export type PageContentHeaderProps = DivProps;
-/** Title and description stack on the left; `PageContent.Actions` children go to the end. */
-declare function PageContentHeader({ className, children, ...rest }: PageContentHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentHeader {
-    var displayName: string;
-}
-export type PageContentTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
-    ref?: React.Ref<HTMLHeadingElement>;
-};
-declare function PageContentTitle({ className, ...rest }: PageContentTitleProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentTitle {
-    var displayName: string;
-}
-export type PageContentDescriptionMeasure = "readable" | "full";
-export type PageContentDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
-    /** `readable` — max ~65ch; `full` — the full width of the parent (e.g. an already padded `main`). */
-    measure?: PageContentDescriptionMeasure;
-    ref?: React.Ref<HTMLParagraphElement>;
-};
-declare function PageContentDescription({ className, measure, ...rest }: PageContentDescriptionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentDescription {
-    var displayName: string;
-}
-export type PageContentBodyProps = DivProps;
-declare function PageContentBody({ className, ...rest }: PageContentBodyProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentBody {
-    var displayName: string;
-}
-/** Where the heading of a section stands: over its content or in a column beside it. */
-export type PageContentSectionLayout = "stack" | "aside";
-export type PageContentSectionProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
-    /** The visible heading of the section (an `h2`). */
-    label: React.ReactNode;
-    /** One line of context under the heading. */
-    description?: React.ReactNode;
-    /**
-     * `stack` — the heading over the content; `aside` — a heading column beside the content (a
-     * settings page), dropping above it once the content would get narrower than 30rem.
-     */
-    layout?: PageContentSectionLayout;
-    ref?: React.Ref<HTMLElement>;
-};
-/**
- * A titled section of the page: an `h2` heading (with an optional description and
- * `PageContent.Actions` at its end) over its content. Sections stand further apart than the plain
- * blocks of the body, so the air shows where a new topic starts.
- */
-declare function PageContentSection({ label, description, layout, className, children, ...rest }: PageContentSectionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentSection {
-    var displayName: string;
-}
-export type PageContentGridProps = DivProps;
-/**
- * The grid of the page's tiles (KPI cards, charts, panels): 12 columns, one gap on both axes.
- * Columns follow the grid's own width, so tiles fold on a narrow panel by themselves.
- */
-declare function PageContentGrid({ className, ...rest }: PageContentGridProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentGrid {
-    var displayName: string;
-}
-/** Columns of 12 a cell spans on a wide grid. */
-export type PageContentCellSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-/** Rows a cell spans. */
-export type PageContentCellRows = 1 | 2 | 3 | 4;
-export type PageContentCellProps = DivProps & {
-    /** Columns of 12 on a wide grid; a medium grid rounds to half or full, a narrow one to full. */
-    span?: PageContentCellSpan;
-    /** Rows the cell spans; its child fills the height. */
-    rows?: PageContentCellRows;
-};
-/** One tile place in `PageContent.Grid`; its child (a Card, a ChartFrame) fills it. */
-declare function PageContentCell({ span, rows, className, ...rest }: PageContentCellProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentCell {
-    var displayName: string;
-}
-export type PageContentLabels = {
-    /** Name of `PageContent.BackButton` (back from the detail to the list on a narrow split). */
-    back: string;
-};
-export type PageContentSplitProps = DivProps & {
-    /**
-     * The detail is open (a record is chosen). On a narrow split it takes the place of the list;
-     * on a wide one both panes stay. Controlled.
-     */
-    open?: boolean;
-    /** Initial open state, uncontrolled. */
-    defaultOpen?: boolean;
-    /** `PageContent.BackButton` closes the detail: `false`. */
-    onOpenChange?: (open: boolean) => void;
-    labels?: Partial<PageContentLabels>;
-};
-/**
- * List + detail (mail, a messenger, a ticket queue): two panes side by side from 48rem of its own
- * width, one at a time below it — the list, or the open detail with a back button. Takes the free
- * height of a filling page; each pane gives its last child the free height.
- */
-declare function PageContentSplit({ open: openProp, defaultOpen, onOpenChange, labels, className, children, ...rest }: PageContentSplitProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentSplit {
-    var displayName: string;
-}
-export type PageContentListProps = DivProps;
-/** The list pane: a fixed column on a wide split, the whole split while the detail is closed. */
-declare function PageContentList({ className, ref, onFocus, onAnimationEnd, ...rest }: PageContentListProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentList {
-    var displayName: string;
-}
-export type PageContentDetailProps = DivProps;
-/** The detail pane: the rest of a wide split; on a narrow one it replaces the list while open. */
-declare function PageContentDetail({ className, ref, onAnimationEnd, ...rest }: PageContentDetailProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentDetail {
-    var displayName: string;
-}
-export type PageContentBackButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
-    ref?: React.Ref<HTMLButtonElement>;
-};
-/**
- * Back from the detail to the list: a soft neutral icon Button named by `labels.back`, shown only
- * while the split shows one pane. Put it at the start of the detail's header.
- */
-declare function PageContentBackButton({ className, onClick, ...rest }: PageContentBackButtonProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentBackButton {
-    var displayName: string;
-}
-export declare const PageContent: {
-    Root: typeof PageContentRoot;
-    Page: typeof PageContentPage;
-    Header: typeof PageContentHeader;
-    Actions: typeof PageContentActions;
-    Title: typeof PageContentTitle;
-    Description: typeof PageContentDescription;
-    Body: typeof PageContentBody;
-    Section: typeof PageContentSection;
-    Grid: typeof PageContentGrid;
-    Cell: typeof PageContentCell;
-    Split: typeof PageContentSplit;
-    List: typeof PageContentList;
-    Detail: typeof PageContentDetail;
-    BackButton: typeof PageContentBackButton;
-};
-export {};

package/dist/components/page-toolbar/PageToolbar.d.ts

@@ -1,54 +0,0 @@
-import * as React from "react";
-type DivProps = React.HTMLAttributes<HTMLDivElement> & {
-    ref?: React.Ref<HTMLDivElement>;
-};
-export type PageToolbarRootProps = DivProps;
-/**
- * The panel at the top of a page: search and filter, sections, view options and the primary
- * action, with the active filters right under the search. It lays itself out from its own width —
- * one row when wide, stacked rows when narrow — so the slots keep fixed places at any width. Parts
- * may be left out; the JSX order is the Tab order.
- */
-declare function PageToolbarRoot({ className, children, ref, ...rest }: PageToolbarRootProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarRoot {
-    var displayName: string;
-}
-export type PageToolbarSectionsProps = DivProps;
-/** Sections of the page — a `fullWidth` SegmentedControl; after the Tools when wide, a full row under the chips when narrow. */
-declare function PageToolbarSections({ className, ...rest }: PageToolbarSectionsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarSections {
-    var displayName: string;
-}
-export type PageToolbarToolsProps = DivProps;
-/** Search and filter button (`SmartFilter.Toolbar`): the first slot and the stretchy one, the Chips sit right under it. */
-declare function PageToolbarTools({ className, ...rest }: PageToolbarToolsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarTools {
-    var displayName: string;
-}
-export type PageToolbarViewProps = DivProps;
-/** How the data is shown: period, table / cards, columns. Sized by content when wide; its own full row when narrow, its controls sharing it. */
-declare function PageToolbarView({ className, ...rest }: PageToolbarViewProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarView {
-    var displayName: string;
-}
-export type PageToolbarActionsProps = DivProps;
-/** The primary action of the page: the top row's end at every width, never wraps down. */
-declare function PageToolbarActions({ className, ...rest }: PageToolbarActionsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarActions {
-    var displayName: string;
-}
-export type PageToolbarChipsProps = DivProps;
-/** Active filters (`SmartFilter.Chips`) in their own row right under the search; the row disappears when empty. */
-declare function PageToolbarChips({ className, ...rest }: PageToolbarChipsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarChips {
-    var displayName: string;
-}
-export declare const PageToolbar: {
-    Root: typeof PageToolbarRoot;
-    Sections: typeof PageToolbarSections;
-    Tools: typeof PageToolbarTools;
-    View: typeof PageToolbarView;
-    Actions: typeof PageToolbarActions;
-    Chips: typeof PageToolbarChips;
-};
-export {};

package/dist/hooks/useStateSwap.d.ts

@@ -1,8 +0,0 @@
-import * as React from "react";
-/**
- * Region state transitions (loading → data → empty → error, foundation §7 rule 8): `true` once
- * `state` has differed from its first value. The content of every later state plays the swap-in
- * fade (`src/internal/swapMotion.module.css`); the first render stays still. Shared by Crossfade
- * and DataTable's body.
- */
-export declare function useStateSwap(state: React.Key): boolean;

package/dist/internal/highlightTsxHtml.d.ts

@@ -1,2 +0,0 @@
-/** Minimal TS/TSX highlighting for the playground: comments, strings, numbers, keywords, JSX tags. */
-export declare function highlightTsxHtml(source: string): string;

package/dist/internal/layoutPxFromPrimitives.d.ts

@@ -1,6 +0,0 @@
-/**
- * The computed root (`html`) `font-size` in px: converts rem primitives to pixels for floating UI
- * and SVG without assuming 16.
- */
-export declare function getRootFontSizePx(): number;
-export declare function remToPx(rem: string, rootPx?: number): number;

package/dist/internal/mergeRefs.d.ts

@@ -1,6 +0,0 @@
-import type * as React from "react";
-/**
- * Composes refs (callback or object) into one callback. Internal helper of `useMergedRefs` and
- * `Slot`; components call `useMergedRefs`, which keeps the callback stable between renders.
- */
-export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T>;