prime-ui-kit 0.7.13 → 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

@@ -1,89 +1,27 @@
-export declare const interactionStates: readonly ["default", "hover", "active", "focus", "focus-visible", "disabled"];
-export declare const selectionStates: readonly ["selected", "checked", "indeterminate"];
-export declare const validationStates: readonly ["valid", "invalid", "readonly", "required"];
-export declare const asyncStates: readonly ["idle", "loading", "success", "error"];
-export declare const disclosureStates: readonly ["open", "closed"];
-export declare const componentVariants: {
-    readonly button: readonly ["primary", "neutral", "error"];
-    readonly input: readonly ["default", "error"];
-    readonly textarea: readonly ["default", "error"];
-    readonly checkbox: readonly ["default", "error"];
-    readonly radio: readonly ["default", "error"];
-    readonly switch: readonly ["default", "error"];
-    readonly select: readonly ["default", "error"];
-    readonly modal: readonly ["default"];
-};
-export declare const componentSizes: {
-    readonly buttonGroup: readonly ["s", "m", "l", "xl"];
-    readonly button: readonly ["s", "m", "l", "xl"];
-    readonly input: readonly ["s", "m", "l", "xl"];
-    readonly textarea: readonly ["s", "m", "l", "xl"];
-    readonly checkbox: readonly ["s", "m", "l", "xl"];
-    readonly radio: readonly ["s", "m", "l", "xl"];
-    readonly switch: readonly ["s", "m", "l", "xl"];
-    readonly select: readonly ["s", "m", "l", "xl"];
-    readonly fileUpload: readonly ["s", "m", "l", "xl"];
-    readonly linkButton: readonly ["s", "m", "l", "xl"];
-    readonly breadcrumb: readonly ["s", "m", "l", "xl"];
-    readonly divider: readonly ["s", "m", "l", "xl"];
-    readonly label: readonly ["s", "m", "l", "xl"];
-    readonly hint: readonly ["s", "m", "l", "xl"];
-    readonly banner: readonly ["s", "m", "l", "xl"];
-    readonly digitInput: readonly ["s", "m", "l", "xl"];
-    readonly kbd: readonly ["s", "m", "l", "xl"];
-    readonly slider: readonly ["s", "m", "l", "xl"];
-    readonly tabs: readonly ["s", "m", "l", "xl"];
-    readonly pagination: readonly ["s", "m", "l", "xl"];
-    readonly stepper: readonly ["s", "m", "l", "xl"];
-    readonly accordion: readonly ["s", "m", "l", "xl"];
-    readonly dropdown: readonly ["s", "m", "l", "xl"];
-    readonly progressBar: readonly ["s", "m", "l", "xl"];
-    readonly sidebar: readonly ["s", "m", "l", "xl"];
-    readonly drawer: readonly ["s", "m", "l", "xl"];
-    readonly dataTable: readonly ["s", "m", "l", "xl"];
-    readonly emptyPage: readonly ["s", "m", "l", "xl"];
-};
-export declare const buttonModes: readonly ["filled", "stroke", "lighter", "ghost", "fancy"];
-export type InteractionState = (typeof interactionStates)[number];
-export type SelectionState = (typeof selectionStates)[number];
-export type ValidationState = (typeof validationStates)[number];
-export type AsyncState = (typeof asyncStates)[number];
-export type DisclosureState = (typeof disclosureStates)[number];
-export type ButtonVariant = (typeof componentVariants.button)[number];
-export type InputVariant = (typeof componentVariants.input)[number];
-export type TextareaVariant = (typeof componentVariants.textarea)[number];
-export type CheckboxVariant = (typeof componentVariants.checkbox)[number];
-export type RadioVariant = (typeof componentVariants.radio)[number];
-export type SwitchVariant = (typeof componentVariants.switch)[number];
-export type SelectVariant = (typeof componentVariants.select)[number];
-export type ModalVariant = (typeof componentVariants.modal)[number];
-export type ButtonGroupSize = (typeof componentSizes.buttonGroup)[number];
-export type ButtonSize = (typeof componentSizes.button)[number];
-export type InputSize = (typeof componentSizes.input)[number];
-export type TextareaSize = (typeof componentSizes.textarea)[number];
-export type CheckboxSize = (typeof componentSizes.checkbox)[number];
-export type RadioSize = (typeof componentSizes.radio)[number];
-export type SwitchSize = (typeof componentSizes.switch)[number];
-export type SelectSize = (typeof componentSizes.select)[number];
-export type FileUploadSize = (typeof componentSizes.fileUpload)[number];
-export type LinkButtonSize = (typeof componentSizes.linkButton)[number];
-export type BreadcrumbSize = (typeof componentSizes.breadcrumb)[number];
-export type DividerSize = (typeof componentSizes.divider)[number];
-export type LabelSize = (typeof componentSizes.label)[number];
-export type HintSize = (typeof componentSizes.hint)[number];
-export type BannerSize = (typeof componentSizes.banner)[number];
-export type DigitInputSize = (typeof componentSizes.digitInput)[number];
-export type KbdSize = (typeof componentSizes.kbd)[number];
-export type SliderSize = (typeof componentSizes.slider)[number];
-export type TabsSize = (typeof componentSizes.tabs)[number];
-export type PaginationSize = (typeof componentSizes.pagination)[number];
-export type StepperSize = (typeof componentSizes.stepper)[number];
-export type AccordionSize = (typeof componentSizes.accordion)[number];
-export type DropdownSize = (typeof componentSizes.dropdown)[number];
-export type ProgressBarSize = (typeof componentSizes.progressBar)[number];
-export type SidebarSize = (typeof componentSizes.sidebar)[number];
-export type DrawerSize = (typeof componentSizes.drawer)[number];
-export type DataTableSize = (typeof componentSizes.dataTable)[number];
-export type EmptyPageSize = (typeof componentSizes.emptyPage)[number];
-export type ButtonMode = (typeof buttonModes)[number];
-//# sourceMappingURL=states.d.ts.map
+/**
+ * Shared API vocabulary (docs/foundation.md §10). One name per concept; components import
+ * these types instead of declaring their own aliases.
+ */
+/** 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, 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`. */
+export declare const dataStates: readonly ["open", "closed", "checked", "unchecked", "indeterminate", "active", "inactive"];
+export type DataState = (typeof dataStates)[number];
+/**
+ * Text color (Typography, Icon). `default` is primary text, `secondary` and `muted` are the
+ * two quieter steps; the rest map to the semantic `*-text` colors.
+ */
+export declare const textTones: readonly ["default", "secondary", "muted", "accent", "success", "warning", "danger"];
+export type TextTone = (typeof textTones)[number];

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,50 +1,66 @@
 import * as React from "react";
-export type AppShellRootProps = {
+export type AppShellRootProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+    /** Viewport-high shell: only `AppShell.Main` scrolls. Otherwise the document scrolls. */
     fillViewport?: boolean;
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-export type AppShellNavProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-declare function AppShellNav({ className, children, ...rest }: AppShellNavProps): import("react/jsx-runtime").JSX.Element;
+};
+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 AppShellMainProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLElement>;
-export type AppShellTemplateProps = {
-    fillViewport?: boolean;
-    className?: string;
-    /** Навигация: `Sidebar.Root` или `nav`. */
-    nav: React.ReactNode;
+/**
+ * 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;
+};
+/** `<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;
-    navProps?: Omit<AppShellNavProps, "children">;
-    mainProps?: Omit<AppShellMainProps, "children">;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "ref">;
+    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<{
-        fillViewport?: boolean;
-        className?: string;
-        children?: React.ReactNode;
-    } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Root: typeof AppShellRoot;
     Nav: typeof AppShellNav;
-    Main: React.ForwardRefExoticComponent<{
-        className?: string;
-        children?: React.ReactNode;
-    } & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-    Template: React.ForwardRefExoticComponent<{
-        fillViewport?: boolean;
-        className?: string;
-        /** Навигация: `Sidebar.Root` или `nav`. */
-        nav: React.ReactNode;
-        children?: React.ReactNode;
-        navProps?: Omit<AppShellNavProps, "children">;
-        mainProps?: Omit<AppShellMainProps, "children">;
-    } & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "ref"> & 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,8 +1,4 @@
-export type { AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
+export type { AppShellContentWidth, AppShellHeaderProps, AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
 export { AppShell } from "./app-shell/AppShell";
-export type { SidebarContentProps, SidebarFooterProps, SidebarGroupLabelProps, SidebarGroupProps, SidebarHeaderMainProps, SidebarHeaderProps, SidebarHeaderRowProps, SidebarIdentityButtonProps, SidebarMenuActionProps, SidebarMenuButtonProps, SidebarMenuIconProps, SidebarMenuItemProps, SidebarMenuLabelProps, SidebarMenuLinkProps, SidebarMenuProps, SidebarMenuRouterLinkProps, SidebarMenuTrailingProps, SidebarNavCategoryCountProps, SidebarNavCategoryLabelProps, SidebarNavCategoryPanelProps, SidebarNavCategoryProps, SidebarNavCategoryTriggerProps, SidebarNavDocTreeProps, SidebarNavPanelBodyProps, SidebarNavPanelHeadingProps, SidebarNavPanelProps, SidebarResponsive, SidebarRootProps, SidebarSize, SidebarTextProps, SidebarToggleButtonProps, } from "./sidebar/Sidebar";
-export { Sidebar, useSidebarContext } from "./sidebar/Sidebar";
-export type { StoredSidebarDesktopMode } from "./sidebar/sidebarDesktopStorage";
-export type { SidebarLayoutMode } from "./sidebar/sidebarLayout";
-export { SIDEBAR_LAYOUT_BREAKPOINT_MAX, SIDEBAR_MEDIA_QUERY_INLINE, SIDEBAR_MEDIA_QUERY_NARROW, SIDEBAR_MEDIA_QUERY_XS_HIDDEN, } from "./sidebar/sidebarLayout";
-//# sourceMappingURL=index.d.ts.map
+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";