@it-holding-ui/atomic 9.21.0 → 9.23.0

package/build/atomic/src/ITHCardCarousel/ITHCardCarousel.d.ts

@@ -0,0 +1,25 @@
+import { ITHCardCarouselProps } from './ITHCardCarousel.types';
+/**
+ * A horizontal strip of cards: one per screen, swiped through, snapped.
+ *
+ * <p>Lifted from the Riteo garage, where the cars are the slides, and kept to
+ * its numbers on purpose — the thumb already knows this carousel, and a
+ * second set would be a second feel for the same gesture: 10px between
+ * cards, mandatory snap, the strip's own scroll contained so the page's
+ * vertical scroll does not fight it at every diagonal swipe, and room above
+ * and below for a card's shadow, which a scroll container would otherwise
+ * cut off square.
+ *
+ * <p>The strip is a native scroll container, not a transform track: momentum,
+ * rubber-banding and the snap are the platform's, and a keyboard reaches it
+ * as a focusable region — the arrow keys, Home and End move a slide at a
+ * time. The dots are buttons, and each says which slide it opens.
+ *
+ * <p>Which slide is in front is reported once the strip settles on it, not on
+ * every frame of the swipe, so a screen that redraws on it does not redraw
+ * sixty times a second. Controlled or not: pass `index` to steer it.
+ */
+export declare function ITHCardCarousel<T>(props: ITHCardCarouselProps<T>): JSX.Element;
+export declare namespace ITHCardCarousel {
+    var displayName: string;
+}

package/build/atomic/src/ITHCardCarousel/ITHCardCarousel.types.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+/** The one-time «this scrolls» hint: the cards slide toward the next one and back. */
+export type ITHCardCarouselNudge = {
+    /**
+     * Remember in localStorage under this key that the hint was shown, so it
+     * plays once per device. Without a key it plays once per mount.
+     */
+    storageKey?: string;
+    /** Wait after mount, so the hint is not lost in the page's own entrance. 900 by default. */
+    delayMs?: number;
+    /** How far the cards travel, px. 40 by default. */
+    distancePx?: number;
+};
+type ITHCardCarouselCommonProps = {
+    /** The carousel's name for assistive technology: «Проекты», «Your cars». Required — a region needs one. */
+    ariaLabel: string;
+    /**
+     * The slide under the thumb, for a controlled carousel. Changing it
+     * scrolls there; the carousel reports every settled change through
+     * `onIndexChange`.
+     */
+    index?: number;
+    /** Where an uncontrolled carousel starts. 0 by default. */
+    defaultIndex?: number;
+    /** Called with the slide's index once the strip settles on a new one, from a swipe, a dot or a key. */
+    onIndexChange?: (index: number) => void;
+    /**
+     * Show a slice of the next card (slides at 90 %, snapped to the start),
+     * so the strip says it scrolls. Off: every slide is the full width.
+     * Any width can be set through `--ith-card-carousel-slide`.
+     */
+    peek?: boolean;
+    /** Page dots under the strip, on by default. Drawn only when there are two slides or more. */
+    dots?: boolean;
+    /** The accessible name of a dot and a slide: «2 of 5» by default. */
+    slideLabel?: (index: number, count: number) => string;
+    /** The «this scrolls» hint. Never for anyone who asked for less motion, never after a touch. */
+    nudge?: boolean | ITHCardCarouselNudge;
+    /**
+     * Let the strip run out to the screen edge through the page's side
+     * padding: pass that padding, px (16 on a phone). The first card still
+     * lines up with the content above it. Never larger than the padding,
+     * or the strip widens the page.
+     */
+    bleed?: number;
+    className?: string;
+    slideClassName?: string;
+};
+type ITHCardCarouselChildrenProps = {
+    /** Each child is a slide. */
+    children: React.ReactNode;
+    items?: never;
+    renderItem?: never;
+    getKey?: never;
+};
+type ITHCardCarouselItemsProps<T> = {
+    children?: never;
+    items: readonly T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** A stable key per item; the index by default. */
+    getKey?: (item: T, index: number) => React.Key;
+};
+export type ITHCardCarouselProps<T = unknown> = ITHCardCarouselCommonProps & (ITHCardCarouselChildrenProps | ITHCardCarouselItemsProps<T>);
+export {};

package/build/atomic/src/ITHCardCarousel/index.d.ts

@@ -0,0 +1,2 @@
+export { ITHCardCarousel } from './ITHCardCarousel';
+export type { ITHCardCarouselNudge, ITHCardCarouselProps } from './ITHCardCarousel.types';

package/build/atomic/src/ITHCardCarousel/useCardCarouselNudge.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+import { ITHCardCarouselNudge } from './ITHCardCarousel.types';
+export declare const useCardCarouselNudge: (stripRef: RefObject<HTMLElement>, nudge: boolean | ITHCardCarouselNudge | undefined) => void;

package/build/atomic/src/ITHProgressBar/ITHProgressBar.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { ITHProgressBarProps } from './ITHProgressBar.types';
+/**
+ * A straight line that fills from the start: works done, steps passed,
+ * anything that is a share of a whole and is read left to right.
+ *
+ * <p>The ring (`ITHRingGauge`) holds one figure in its middle and wants a
+ * square of its own; this one sits under a heading inside a card and keeps
+ * the text on one line above it — what is measured on the left, how much on
+ * the right. The look is the add-a-car steps: a `--base-20` track and a
+ * `-40` fill with round ends.
+ *
+ * <p>The fill is a percentage width, not a pixel one, so the bar is as wide
+ * as whatever holds it and never pushes a phone screen sideways.
+ */
+export declare const ITHProgressBar: React.NamedExoticComponent<ITHProgressBarProps>;

package/build/atomic/src/ITHProgressBar/ITHProgressBar.types.d.ts

@@ -0,0 +1,35 @@
+export declare enum ITHProgressBarTone {
+    PRIMARY = "primary",
+    SUCCESS = "success",
+    WARNING = "warning",
+    DANGER = "danger",
+    BASE = "base"
+}
+export declare enum ITHProgressBarSize {
+    /** 4px — the add-a-car steps, a line under a card. */
+    SMALL = "small",
+    /** 8px — a figure someone reads: «Работы выполнены · 62 %». */
+    MEDIUM = "medium",
+    /** 12px — the one number of a screen. */
+    LARGE = "large"
+}
+export type ITHProgressBarProps = {
+    /** How far along, out of `max`. Clamped to 0…max. */
+    value: number;
+    /** The whole. 100 by default, so a percentage goes in as is; 9 for «6 of 9 jobs». */
+    max?: number;
+    tone?: ITHProgressBarTone;
+    size?: ITHProgressBarSize;
+    /** What is measured, above the bar on the left: «Работы выполнены». Also the bar's accessible name. */
+    label?: string;
+    /**
+     * The figure above the bar on the right: «62 %», «6 из 9». Read out as
+     * the value too. Without it the bar draws no figure unless `showValue`.
+     */
+    valueText?: string;
+    /** Draw the rounded percentage on the right when no `valueText` is given. */
+    showValue?: boolean;
+    /** The accessible name when there is no visible `label`. */
+    ariaLabel?: string;
+    className?: string;
+};

package/build/atomic/src/ITHProgressBar/index.d.ts

@@ -0,0 +1,3 @@
+export { ITHProgressBar } from './ITHProgressBar';
+export type { ITHProgressBarProps } from './ITHProgressBar.types';
+export { ITHProgressBarSize, ITHProgressBarTone } from './ITHProgressBar.types';

package/build/atomic/src/ITHTimeline/ITHTimeline.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { ITHTimelineProps } from './ITHTimeline.types';
+/**
+ * Stages on a vertical line, with a marker for where the reader is.
+ *
+ * <p>The line is schematic. Distances between nodes follow the height of
+ * what each node holds, not the kilometres or days between them: a scale
+ * drawn to proportion would put the two stages that matter a screen apart
+ * and crowd the rest into a row of dots.
+ *
+ * <p>The marker sits between nodes, never on the line by itself. A car at
+ * 148 200 km belongs after the 120 000 stage and before the 150 000 one, and
+ * that is where the eye finds it; an exact match — the odometer standing on
+ * a stage — is drawn on that stage, because a second dot for the same place
+ * would read as two events.
+ *
+ * <p>Disclosure is a real button with `aria-expanded`, so a keyboard and a
+ * screen reader open a stage the same way a thumb does. Which stages are
+ * open is the caller's state: the list is drawn from it, not the other way
+ * round, so a screen can keep it per car and restore it on return.
+ */
+export declare const ITHTimeline: React.NamedExoticComponent<ITHTimelineProps>;

package/build/atomic/src/ITHTimeline/ITHTimeline.types.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+export declare enum ITHTimelineNodeStatus {
+    /** Nothing recorded against this stage — a neutral point. */
+    NONE = "none",
+    /** Some of the stage's work has a record, the rest has none. */
+    PARTIAL = "partial",
+    /** Every piece of the stage's work has a record. */
+    DONE = "done",
+    /** The stage coming up — the one the reader is most likely looking for. */
+    NEXT = "next"
+}
+/** One stage on the line: a service visit, a milestone, a step. */
+export type ITHTimelineNode = {
+    id: string;
+    /** «150 000 km», «Step 3», «Dispatched». */
+    title: string;
+    /** The second line: «in 1 800 km · 6 jobs», «No records». */
+    summary?: string;
+    status?: ITHTimelineNodeStatus;
+    /** A short count beside the title: «4 of 6». */
+    badge?: string;
+    /**
+     * What the stage contains, shown when expanded. A node without children
+     * draws no disclosure at all — a chevron that opens nothing is a promise
+     * the component cannot keep.
+     */
+    children?: React.ReactNode;
+    expanded?: boolean;
+};
+/** Where the reader is on the line — the odometer today, the current step. */
+export type ITHTimelineMarker = {
+    /** «You are here · 148 200 km». */
+    label: string;
+    /**
+     * The node the marker follows, by index. −1 puts it before the first
+     * node, `nodes.length − 1` after the last.
+     */
+    afterIndex: number;
+    /**
+     * Draw the marker on the node at `afterIndex` instead of after it — the
+     * exact-match case, where a second dot for the same place would read as
+     * two events.
+     */
+    onNode?: boolean;
+};
+export type ITHTimelineProps = {
+    nodes: ITHTimelineNode[];
+    marker?: ITHTimelineMarker | null;
+    /** Called with the node's id when its disclosure is pressed. */
+    onToggle?: (id: string) => void;
+    /** The line after the last node: «Further schedule not available yet». */
+    tail?: string;
+    ariaLabel?: string;
+    className?: string;
+};

package/build/atomic/src/ITHTimeline/index.d.ts

@@ -0,0 +1,3 @@
+export { ITHTimeline } from './ITHTimeline';
+export type { ITHTimelineMarker, ITHTimelineNode, ITHTimelineProps } from './ITHTimeline.types';
+export { ITHTimelineNodeStatus } from './ITHTimeline.types';

package/build/atomic/src/index.d.ts

@@ -19,6 +19,8 @@ export * from './ITHButton';
 export type { ITHCameraFrameProps } from './ITHCameraFrame';
 export { ITHCameraFrame, ITHCameraFrameFailure, ITHCameraFrameShape } from './ITHCameraFrame';
 export { ITHCard } from './ITHCard';
+export type { ITHCardCarouselNudge, ITHCardCarouselProps } from './ITHCardCarousel';
+export { ITHCardCarousel } from './ITHCardCarousel';
 export type { ITHCheckboxProps } from './ITHCheckbox';
 export { ITHCheckbox } from './ITHCheckbox';
 export type { ITHCheckboxItemProps } from './ITHCheckboxItem';
@@ -64,6 +66,8 @@ export { AVAILABLE_PHOTO_MIME_TYPES_ARRAY, DEFAULT_PHOTO_QUALITY, ITHPhotoInput,
 export type { ITHPopoverProps } from './ITHPopover';
 export { ITHPopover } from './ITHPopover';
 export { ITHProfilePhotoInput } from './ITHProfilePhotoInput';
+export type { ITHProgressBarProps } from './ITHProgressBar';
+export { ITHProgressBar, ITHProgressBarSize, ITHProgressBarTone } from './ITHProgressBar';
 export { ITHProvider } from './ITHProvider';
 export { ITHRadioItem } from './ITHRadioItem';
 export type { ITHRangeProps } from './ITHRange';
@@ -86,6 +90,8 @@ export { ITHText, ITHTextType } from './ITHText';
 export { ITHTextEditor } from './ITHTextEditor';
 export type { ITHTile, ITHTileSelectProps } from './ITHTileSelect';
 export { ITHTileSelect, ITHTileSelectSize } from './ITHTileSelect';
+export type { ITHTimelineMarker, ITHTimelineNode, ITHTimelineProps } from './ITHTimeline';
+export { ITHTimeline, ITHTimelineNodeStatus } from './ITHTimeline';
 export { ITHToggle } from './ITHToggle';
 export type { ITHTrendChartProps, ITHTrendPoint } from './ITHTrendChart';
 export { ITHTrendChart, ITHTrendChartTone } from './ITHTrendChart';