prime-ui-kit 0.9.1 → 0.9.3

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

@@ -0,0 +1,53 @@
+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: sections, tools, view options and the primary action. It lays
+ * itself out from its own width — one row when wide, exactly two 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; top row, stretches when narrow. */
+declare function PageToolbarSections({ className, ...rest }: PageToolbarSectionsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageToolbarSections {
+    var displayName: string;
+}
+export type PageToolbarToolsProps = DivProps;
+/** Filter button and search (`SmartFilter.Toolbar`): takes the free space of its row. */
+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; alone in a row, its controls share the row. */
+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 under the panel; 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/components/progress-bar/ProgressBar.d.ts

@@ -13,9 +13,24 @@ export type ProgressBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "child
     /** Shows the rounded filled percentage at the end of the label row. */
     showValue?: boolean;
     ref?: React.Ref<HTMLDivElement>;
-} & ProgressModeProps;
+} & ProgressBarModeProps;
+/** Value mode may draw its scale as steps; segments already are parts. */
+type ProgressBarModeProps = (Extract<ProgressModeProps, {
+    value: number;
+}> & {
+    /**
+     * Draws the scale as `max` equal cells (2–12), each filled whole: a level out of a few
+     * (password strength, a step of onboarding). `value` rounds to a whole cell.
+     */
+    steps?: boolean;
+}) | (Extract<ProgressModeProps, {
+    segments: unknown;
+}> & {
+    steps?: never;
+});
 /**
  * A linear progress line: a single `value` (native `<progress>` for assistive tech) or
  * `segments` — parts of a whole in one bar (`role="group"` named by the distribution).
  */
 export declare function ProgressBar(props: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -6,7 +6,10 @@ export type SegmentedControlRootProps = Omit<React.HTMLAttributes<HTMLDivElement
     onValueChange?: (value: string) => void;
     disabled?: boolean;
     size?: ControlSize;
-    /** Stretch to the container width; segments share it equally and truncate their labels. */
+    /**
+     * Stretch to the container width. Single-line segments tend to equal widths but never get narrower
+     * than their label; when they do not fit, the row scrolls.
+     */
     fullWidth?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
@@ -49,7 +52,7 @@ export type SegmentedControlLabelProps = {
     className?: string;
     ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
-/** Segment title; truncates with an ellipsis. Plain text children are wrapped automatically. */
+/** Segment title on one line; never truncated. Plain text children are wrapped automatically. */
 declare function SegmentedControlLabel({ children, className, ...rest }: SegmentedControlLabelProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SegmentedControlLabel {
     var displayName: string;

package/dist/components/sparkline/Sparkline.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type SparklinePoint = {
+    /** Name of the point on the axis: a date, a week, a month («8 окт»). */
+    label: string;
+    value: number;
+};
+export type SparklineLabels = {
+    /** Spoken value of the chosen point; `{label}` and `{value}` are replaced. */
+    point: string;
+};
+export type SparklineProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Points in order, oldest first; at least two draw a line. */
+    data: SparklinePoint[];
+    /** Visible title above the value and the accessible name of the chart. */
+    label: string;
+    /** Display of a value («312 400 ₽»). Default: the number with Russian digit groups. */
+    formatValue?: (value: number) => string;
+    labels?: Partial<SparklineLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * A small line chart with its headline: the latest value, its change against the point before and
+ * its date. Scrubbing (pointer, touch, or the arrow keys on the chart) shows any point; the header
+ * follows instantly, the trend arrow turns, and leaving glides the cursor back to the latest point.
+ */
+export declare function Sparkline({ data, label, formatValue, labels: labelsProp, className, ref, ...rest }: SparklineProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tabs/Tabs.d.ts

@@ -14,9 +14,12 @@ export type TabsRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultV
     size?: ControlSize;
     /** Text and icon colour of the active tab. Default `neutral`: primary text, accent icon. */
     tone?: "neutral" | "accent";
-    /** Horizontal tabs share the list width. Default `true`; `false` sizes each tab to its content. */
+    /**
+     * Horizontal tabs fill the list and tend to equal widths, never narrower than their content.
+     * Default `true`; `false` sizes each tab to its content.
+     */
     fullWidth?: boolean;
-    /** Narrowest a horizontal tab with a label gets before the list scrolls (px or a CSS length). */
+    /** Narrowest a horizontal tab with a label gets (px or a CSS length); never below its content. */
     minItemWidth?: number | string;
     /** Widest a horizontal tab gets (px or a CSS length); a longer label ends with an ellipsis. */
     maxItemWidth?: number | string;

package/dist/hooks/useEdgeOverflow.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export type EdgeOverflow = {
+    start: boolean;
+    end: boolean;
+};
+/**
+ * Tracks whether a scroll region hides content before / after its visible part along one axis
+ * (`ScrollContainer` `fade`, the DataTable edge cue). Measured at most once per frame on scroll,
+ * on resize of the region or any child, and when children are added. RTL-aware: the start is the
+ * inline start of the region.
+ *
+ * It also writes how far the hidden content reaches on each side to the region itself
+ * (`--edge-start` / `--edge-end`, px), so a fade can be as deep as that distance at most: it grows
+ * as the region scrolls away from an edge and melts as it comes back, instead of switching.
+ */
+export declare function useEdgeOverflow(ref: React.RefObject<HTMLElement | null>, enabled: boolean, horizontal: boolean): EdgeOverflow;

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,7 @@
+/** Viewport below the first breakpoint (foundation §9): overlays become bottom sheets. */
+export declare const COMPACT_QUERY = "(max-width: 639px)";
+/**
+ * Whether a media query matches, kept in sync with the viewport. `false` on the server, while
+ * `enabled` is off, and where `matchMedia` is missing.
+ */
+export declare function useMediaQuery(query: string, enabled?: boolean): boolean;

package/dist/hooks/useSwipeDismiss.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+/** The direction a panel leaves in: toward the screen edge it came from. */
+export type SwipeDirection = "down" | "left" | "right";
+export type UseSwipeDismissOptions = {
+    enabled: boolean;
+    direction: SwipeDirection;
+    onDismiss: () => void;
+    /** Selector of the zones a drag starts from by any pointer: the grab handle, the header. */
+    handle: string;
+    /**
+     * A touch drag may also start anywhere else in the panel (side drawers, whose content scrolls
+     * across the swipe axis). Mouse and pen drags start from `handle` only, so text stays selectable.
+     */
+    touchAnywhere?: boolean;
+    /**
+     * How far out the panel is, 0 (at rest) … 1 (off its edge), on every move and on release (0 back,
+     * 1 out) — for parts that follow the drag, such as the scrim's opacity.
+     */
+    onProgress?: (progress: number) => void;
+};
+/** The custom property the panel CSS maps onto its own axis (`transform`). */
+export declare const SWIPE_OFFSET_VAR = "--swipe-offset";
+/**
+ * Swipe-to-close for a panel at a screen edge (Drawer, a bottom sheet). Attach `onPointerDown` to
+ * the panel: a drag from `handle` (or, with `touchAnywhere`, any touch) along the closing axis moves
+ * the panel with the pointer through `--swipe-offset` and `data-swiping`, which its CSS maps onto
+ * `transform`. On release the panel closes past 30% of its size or on a flick — gliding the rest of
+ * the way out from the release point (`data-swipe-dismissed`) — otherwise it glides back;
+ * `onProgress` follows along. A drag across the axis is left to scrolling. The gesture is an extra
+ * way out: the panel keeps its close button and Escape (WCAG 2.5.7).
+ */
+export declare function useSwipeDismiss({ enabled, direction, onDismiss, handle, touchAnywhere, onProgress, }: UseSwipeDismissOptions): {
+    onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+};

package/dist/icons/registry.d.ts

@@ -73,6 +73,8 @@ export declare const iconRegistry: {
     readonly "status.locked": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly "status.offline": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly "status.success": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    /** A rising trend; a falling one is the same arrow turned half a turn (it rotates between them). */
+    readonly "status.trendUp": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly "status.warning": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly "theme.dark": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly "theme.light": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;