prime-ui-kit 0.15.0 → 0.16.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);
@@ -103,16 +104,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 +147,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 +168,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);
@@ -208,15 +209,15 @@
   --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);
@@ -329,29 +330,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 +368,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 +386,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 +426,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 +539,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 +575,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,7 +25,6 @@
   --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;
@@ -87,18 +87,21 @@
   --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-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;
@@ -158,6 +161,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/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>;

package/dist/skill/reference/components/drawer/examples/examples.module.css

@@ -1,8 +0,0 @@
-/* Layout of the Drawer scenarios: semantic tokens only. */
-
-/* in-form.tsx: field groups get 20 between them, a step above plain body blocks. */
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-5);
-}

package/dist/skill/reference/components/popover/examples/match-trigger-width.tsx

@@ -1,23 +0,0 @@
-/** In a narrow column the panel takes the exact width of a full-width trigger and its text wraps — `matchTriggerWidth`. */
-import { Button, Popover, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function PopoverMatchTriggerWidthExample() {
-  return (
-    <div className={styles.narrowColumn}>
-      <Popover.Root>
-        <Popover.Trigger>
-          <Button.Root variant="soft" tone="neutral" fullWidth>
-            Условия тарифа
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content matchTriggerWidth>
-          <Typography variant="body-s" tone="secondary">
-            До 10 пользователей, 50 ГБ хранилища и приоритетная поддержка.
-          </Typography>
-        </Popover.Content>
-      </Popover.Root>
-    </div>
-  );
-}

package/dist/skill/reference/components/scroll-container/examples/chat.tsx

@@ -1,101 +0,0 @@
-/** A support chat pinned to its last message: a sent message keeps it at the end, scrolling up loads older ones without moving what is on screen — `anchor`, `onReachStart`. */
-import { Button, Card, Icon, Input, ScrollContainer, Skeleton, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-type Message = { id: number; author: string; text: string };
-
-const HISTORY: Message[] = [
-  "Добрый день! Счёт № 4821 пришёл без НДС.",
-  "Здравствуйте, проверю реквизиты и вернусь.",
-  "Спасибо, ждём — нужно провести до пятницы.",
-  "Нашла: в карточке клиента стояла ставка 0 %.",
-  "Исправили ставку, выставляю счёт заново.",
-  "Новый счёт № 4830 отправлен на почту бухгалтерии.",
-  "Получили, всё верно. Оплатим сегодня.",
-  "Отлично! Закрывающие документы пришлём после оплаты.",
-  "Оплата прошла, платёжка во вложении.",
-  "Вижу поступление, спасибо. Акт отправим завтра.",
-  "Подскажите, можно ли подключить ЭДО?",
-  "Да, пришлите идентификатор в Диадоке.",
-].map((text, index) => ({ id: index + 1, author: index % 2 === 0 ? "Клиент" : "Поддержка", text }));
-
-const PAGE = 4;
-
-export default function ScrollContainerChatExample() {
-  // The newest messages first; older pages arrive when the reader scrolls up.
-  const [shown, setShown] = React.useState(PAGE);
-  const [loading, setLoading] = React.useState(false);
-  const [sent, setSent] = React.useState<Message[]>([]);
-  const [draft, setDraft] = React.useState("");
-  const messages = [...HISTORY.slice(-shown), ...sent];
-
-  const loadOlder = () => {
-    if (shown >= HISTORY.length) return;
-    setLoading(true);
-    // The promise keeps the region `aria-busy` and stops repeat calls until it settles.
-    return new Promise<void>((resolve) => {
-      window.setTimeout(() => {
-        setShown((count) => Math.min(count + PAGE, HISTORY.length));
-        setLoading(false);
-        resolve();
-      }, 800);
-    });
-  };
-
-  const send = (event: React.FormEvent) => {
-    event.preventDefault();
-    const text = draft.trim();
-    if (!text) return;
-    setSent((list) => [
-      ...list,
-      { id: HISTORY.length + list.length + 1, author: "Поддержка", text },
-    ]);
-    setDraft("");
-  };
-
-  return (
-    <Card.Root className={styles.chat}>
-      <Card.Header>
-        <Card.Title>ООО «Гранит» · счёт № 4821</Card.Title>
-      </Card.Header>
-      <ScrollContainer
-        anchor="end"
-        onReachStart={loadOlder}
-        tabIndex={0}
-        aria-label="Сообщения"
-        className={styles.messages}
-      >
-        {loading ? <Skeleton lines={2} className={styles.older} /> : null}
-        <ul className={styles.list}>
-          {messages.map((message) => (
-            <li key={message.id}>
-              <Typography as="span" variant="caption" tone="muted">
-                {message.author}
-              </Typography>
-              <Typography variant="body-m">{message.text}</Typography>
-            </li>
-          ))}
-        </ul>
-      </ScrollContainer>
-      <form className={styles.composer} onSubmit={send}>
-        <Input.Root className={styles.composerField}>
-          <Input.Wrapper>
-            <Input.Field
-              aria-label="Сообщение"
-              placeholder="Ответить клиенту"
-              value={draft}
-              onValueChange={setDraft}
-            />
-          </Input.Wrapper>
-        </Input.Root>
-        <Button.Root type="submit" aria-label="Отправить">
-          <Button.Icon>
-            <Icon name="action.send" />
-          </Button.Icon>
-        </Button.Root>
-      </form>
-    </Card.Root>
-  );
-}

package/dist/skill/reference/components/spinner/examples/loading-region.tsx

@@ -1,22 +0,0 @@
-/** A card that loads its content: the region says it is busy and the spinner stays hidden from screen readers — `aria-hidden`. */
-import { Card, Spinner, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function SpinnerLoadingRegionExample() {
-  return (
-    <Card.Root
-      role="region"
-      aria-busy="true"
-      aria-label="Выручка за неделю"
-      className={styles.region}
-    >
-      <Card.Body className={styles.loading}>
-        <Spinner size="l" tone="muted" aria-hidden="true" />
-        <Typography as="p" variant="body-s" tone="secondary">
-          Считаем выручку за неделю
-        </Typography>
-      </Card.Body>
-    </Card.Root>
-  );
-}

package/src/components/drawer/examples/examples.module.css

@@ -1,8 +0,0 @@
-/* Layout of the Drawer scenarios: semantic tokens only. */
-
-/* in-form.tsx: field groups get 20 between them, a step above plain body blocks. */
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-5);
-}

package/src/components/popover/examples/match-trigger-width.tsx

@@ -1,23 +0,0 @@
-/** In a narrow column the panel takes the exact width of a full-width trigger and its text wraps — `matchTriggerWidth`. */
-import { Button, Popover, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function PopoverMatchTriggerWidthExample() {
-  return (
-    <div className={styles.narrowColumn}>
-      <Popover.Root>
-        <Popover.Trigger>
-          <Button.Root variant="soft" tone="neutral" fullWidth>
-            Условия тарифа
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content matchTriggerWidth>
-          <Typography variant="body-s" tone="secondary">
-            До 10 пользователей, 50 ГБ хранилища и приоритетная поддержка.
-          </Typography>
-        </Popover.Content>
-      </Popover.Root>
-    </div>
-  );
-}