@shmidko61/lc-ui-kit 0.12.0 → 0.15.0

package/dist/notification-provider/types/notification-provider.types.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { AlertProps } from '../../alert/index';
+import { FlexBreakpointProps, FlexProps } from '../../flex/index';
+import { ToastProps } from '../../toast/index';
+/** Позиции стека. top/bottom — синонимы top-middle/bottom-middle; center — центр экрана. */
+export type NotificationPlacement = 'top-left' | 'top' | 'top-middle' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-middle' | 'bottom-right' | 'center';
+/** Настройки положения на одном брейкпоинте; null сбрасывает placement к top-right.
+ * position/transform из Flex имеют приоритет над пресетом и допускают auto/none для сброса.
+ */
+export type NotificationViewportBreakpoint = Pick<FlexBreakpointProps, 'position' | 'transform' | 'width' | 'maxWidth' | 'maxHeight' | 'gap' | 'p' | 'align'> & {
+    /** Пресет положения; пропущенный наследуется, null возвращает top-right. */
+    placement?: NotificationPlacement | null;
+};
+/** Стек на base/md/lg/xl: пропущенные значения наследуются от меньшего экрана.
+ * Явный style приоритетнее пресетов и responsive props; className передаётся в Flex.
+ */
+export type NotificationViewportProps = NotificationViewportBreakpoint & Pick<FlexProps, 'style' | 'className'> & {
+    /** Переопределения от 768 px. */
+    md?: NotificationViewportBreakpoint;
+    /** Переопределения от 1024 px. */
+    lg?: NotificationViewportBreakpoint;
+    /** Переопределения от 1440 px. */
+    xl?: NotificationViewportBreakpoint;
+};
+/** Дополнительные параметры вызова уведомления. */
+export type NotificationOptions = {
+    /** Необязательный стабильный ID; повторный вызов заменяет уведомление с тем же ID. */
+    id?: string;
+    /** Локальное положение стека поверх настроек провайдера, со слиянием md/lg/xl. */
+    viewport?: NotificationViewportProps;
+};
+/** Все ReactNode-слоты и style props Alert доступны при вызове. */
+export type ShowAlertOptions = AlertProps & NotificationOptions;
+/** Все ReactNode-слоты и style props Toast доступны при вызове; duration по умолчанию 0. */
+export type ShowToastOptions = Omit<ToastProps, 'open'> & NotificationOptions;
+/** API ближайшего провайдера; методы стабильны между рендерами. */
+export type NotificationsApi = {
+    /** Показывает Alert и возвращает ID для закрытия или обновления. */
+    showAlert: (options: ShowAlertOptions) => string;
+    /** Показывает Toast и возвращает ID; duration включает автозакрытие. */
+    showToast: (options: ShowToastOptions) => string;
+    /** Закрывает уведомление; неизвестный ID игнорируется. */
+    dismiss: (id: string) => void;
+    /** Закрывает все уведомления текущего провайдера. */
+    dismissAll: () => void;
+    /** Обновляет props и положение существующего уведомления без изменения его вида. */
+    update: (id: string, options: Omit<ShowToastOptions, 'id'>) => void;
+};
+/** Провайдер вызовов и стеков; без портала, сохраняет CSS-токены окружающей темы. */
+export type NotificationProviderProps = {
+    /** Приложение, использующее useNotifications. */
+    children?: ReactNode;
+    /** Общие настройки стеков; по умолчанию top-right, отступ 16 px, gap 12 px, z-index 1000. */
+    viewport?: NotificationViewportProps;
+};
+/** Внутренняя запись уведомления; kind определяет компонент при рендере. */
+export type NotificationEntry = {
+    id: string;
+    kind: 'alert' | 'toast';
+    options: ShowToastOptions;
+};

package/dist/notification-provider-C2ypXy2W.cjs

@@ -0,0 +1 @@
+"use client";"use strict";const l=require("react/jsx-runtime"),u=require("react"),j=require("./alert-DTc0Usg-.cjs"),y=require("./toast-CH8VqvLC.cjs"),k=require("./responsive-style.config-B2m9jVlX.cjs"),N=require("./flex.cjs"),P=u.createContext(null);function C(){const t=u.useContext(P);if(!t)throw new Error("useNotifications requires NotificationProvider");return t}function w(t){const e=t==="top"||t==="top-middle"||t==="bottom"||t==="bottom-middle"||t==="center",p=t.startsWith("bottom");return{position:{type:"fixed",zIndex:1e3,top:t==="center"?"50%":p?"auto":16,bottom:p?16:"auto",left:t==="center"||e?"50%":t.endsWith("left")?16:"auto",right:e||t.endsWith("left")?"auto":16},transform:t==="center"?"translate(-50%, -50%)":e?"translateX(-50%)":"none",align:e?"center":t.endsWith("left")?"start":"end"}}function q(t={},e={}){const p={...t,...e,style:{...t.style,...e.style},position:{...t.position,...e.position}};for(const r of k.responsiveBreakpoints)p[r]={...t[r],...e[r],position:{...t[r]?.position,...e[r]?.position}};return p}function W(t){const{placement:e,md:p,lg:r,xl:v,...x}=t,a={flexDirection:"column",gap:12,width:"fit-content",maxWidth:"calc(100vw - 32px)",maxHeight:"calc(100dvh - 32px)",overflowY:"auto",pointerEvents:"none",...w(e??"top-right"),...x,position:{...w(e??"top-right").position,...x.position}},f={md:p,lg:r,xl:v};for(const c of k.responsiveBreakpoints){const o=f[c];if(!o)continue;const{placement:i,...s}=o,n=i!==void 0?w(i??"top-right"):{};a[c]={...n,...s,position:{...n.position,...s.position}}}return a}function b({children:t,viewport:e}){const[p,r]=u.useState([]),v=u.useId(),x=u.useRef(0),a=u.useMemo(()=>{const c=(o,i)=>{const s=i.id??v+"-"+String(++x.current);return r(n=>{const h={id:s,kind:o,options:i};return n.some(d=>d.id===s)?n.map(d=>d.id===s?h:d):[...n,h]}),s};return{showAlert:o=>c("alert",o),showToast:o=>c("toast",o),dismiss:o=>r(i=>i.filter(s=>s.id!==o)),dismissAll:()=>r([]),update:(o,i)=>r(s=>s.map(n=>n.id===o?{...n,options:{...n.options,...i,viewport:q(n.options.viewport,i.viewport)}}:n))}},[v]),f=new Map;for(const c of p){const o=q(e,c.options.viewport),i=JSON.stringify(o),s=f.get(i);s?s.entries.push(c):f.set(i,{viewport:o,entries:[c]})}return l.jsxs(P.Provider,{value:a,children:[t,[...f.entries()].map(([c,o])=>l.jsx(N.Flex,{...W(o.viewport),children:o.entries.map(i=>{const{id:s,viewport:n,duration:h,onClose:d,...g}=i.options,m=()=>{a.dismiss(i.id),d?.()};return l.jsx(N.Flex,{pointerEvents:"auto",shrink:0,maxWidth:"100%",children:i.kind==="toast"?l.jsx(y.Toast,{...g,duration:h,onClose:m}):l.jsx(j.Alert,{...g,onClose:m})},i.id)})},c))]})}exports.NotificationProvider=b;exports.useNotifications=C;

package/dist/notification-provider-WLUaZyMB.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsxs as P, jsx as h } from "react/jsx-runtime";
+import { useContext as W, createContext as b, useState as y, useId as A, useRef as E, useMemo as S } from "react";
+import { A as T } from "./alert-CTIWpkmD.js";
+import { T as j } from "./toast-DpjugQ8H.js";
+import { a as k } from "./responsive-style.config-DFuATrIM.js";
+import { Flex as g } from "./flex.js";
+const C = b(null);
+function D() {
+  const t = W(C);
+  if (!t) throw new Error("useNotifications requires NotificationProvider");
+  return t;
+}
+function v(t) {
+  const e = t === "top" || t === "top-middle" || t === "bottom" || t === "bottom-middle" || t === "center", c = t.startsWith("bottom");
+  return {
+    position: {
+      type: "fixed",
+      zIndex: 1e3,
+      top: t === "center" ? "50%" : c ? "auto" : 16,
+      bottom: c ? 16 : "auto",
+      left: t === "center" || e ? "50%" : t.endsWith("left") ? 16 : "auto",
+      right: e || t.endsWith("left") ? "auto" : 16
+    },
+    transform: t === "center" ? "translate(-50%, -50%)" : e ? "translateX(-50%)" : "none",
+    align: e ? "center" : t.endsWith("left") ? "start" : "end"
+  };
+}
+function N(t = {}, e = {}) {
+  const c = {
+    ...t,
+    ...e,
+    style: { ...t.style, ...e.style },
+    position: { ...t.position, ...e.position }
+  };
+  for (const r of k)
+    c[r] = {
+      ...t[r],
+      ...e[r],
+      position: { ...t[r]?.position, ...e[r]?.position }
+    };
+  return c;
+}
+function q(t) {
+  const { placement: e, md: c, lg: r, xl: a, ...m } = t, f = {
+    flexDirection: "column",
+    gap: 12,
+    width: "fit-content",
+    maxWidth: "calc(100vw - 32px)",
+    maxHeight: "calc(100dvh - 32px)",
+    overflowY: "auto",
+    pointerEvents: "none",
+    ...v(e ?? "top-right"),
+    ...m,
+    position: { ...v(e ?? "top-right").position, ...m.position }
+  }, u = { md: c, lg: r, xl: a };
+  for (const p of k) {
+    const o = u[p];
+    if (!o) continue;
+    const { placement: i, ...n } = o, s = i !== void 0 ? v(i ?? "top-right") : {};
+    f[p] = { ...s, ...n, position: { ...s.position, ...n.position } };
+  }
+  return f;
+}
+function F({
+  children: t,
+  viewport: e
+}) {
+  const [c, r] = y([]), a = A(), m = E(0), f = S(() => {
+    const p = (o, i) => {
+      const n = i.id ?? a + "-" + String(++m.current);
+      return r((s) => {
+        const l = { id: n, kind: o, options: i };
+        return s.some((d) => d.id === n) ? s.map((d) => d.id === n ? l : d) : [...s, l];
+      }), n;
+    };
+    return {
+      showAlert: (o) => p("alert", o),
+      showToast: (o) => p("toast", o),
+      dismiss: (o) => r((i) => i.filter((n) => n.id !== o)),
+      dismissAll: () => r([]),
+      update: (o, i) => r(
+        (n) => n.map(
+          (s) => s.id === o ? {
+            ...s,
+            options: {
+              ...s.options,
+              ...i,
+              viewport: N(s.options.viewport, i.viewport)
+            }
+          } : s
+        )
+      )
+    };
+  }, [a]), u = /* @__PURE__ */ new Map();
+  for (const p of c) {
+    const o = N(e, p.options.viewport), i = JSON.stringify(o), n = u.get(i);
+    n ? n.entries.push(p) : u.set(i, { viewport: o, entries: [p] });
+  }
+  return /* @__PURE__ */ P(C.Provider, { value: f, children: [
+    t,
+    [...u.entries()].map(([p, o]) => /* @__PURE__ */ h(g, { ...q(o.viewport), children: o.entries.map((i) => {
+      const { id: n, viewport: s, duration: l, onClose: d, ...w } = i.options, x = () => {
+        f.dismiss(i.id), d?.();
+      };
+      return /* @__PURE__ */ h(g, { pointerEvents: "auto", shrink: 0, maxWidth: "100%", children: i.kind === "toast" ? /* @__PURE__ */ h(j, { ...w, duration: l, onClose: x }) : /* @__PURE__ */ h(T, { ...w, onClose: x }) }, i.id);
+    }) }, p))
+  ] });
+}
+export {
+  F as N,
+  D as u
+};

package/dist/notification-provider.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./notification-provider-C2ypXy2W.cjs");exports.NotificationProvider=i.NotificationProvider;exports.useNotifications=i.useNotifications;

package/dist/notification-provider.js

@@ -0,0 +1,6 @@
+"use client";
+import { N as t, u as e } from "./notification-provider-WLUaZyMB.js";
+export {
+  t as NotificationProvider,
+  e as useNotifications
+};

package/dist/progress-bar/helpers/index.d.ts

@@ -0,0 +1 @@
+export { normalizeProgressBarRange, renderProgressBarView } from './progress-bar.helpers';

package/dist/progress-bar/helpers/progress-bar.helpers.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { ProgressBarRange, ProgressBarViewProps } from '../types/index';
+/** Нормализует диапазон и конечное значение; процент всегда лежит в 0..100. */
+export declare function normalizeProgressBarRange(value: number, min?: number, max?: number): ProgressBarRange;
+/** Единая отрисовка дорожки, подписей и информационных отметок для готовых вариантов. */
+export declare function renderProgressBarView({ range, variant, valuePlacement, marks, valueLabel, trackProps, fillProps, markerProps, renderMark, }: ProgressBarViewProps): JSX.Element;

package/dist/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './progress-bar';
+export type { ProgressBarBreakpointProps, ProgressBarMark, ProgressBarMarkContext, ProgressBarOwnStyleProps, ProgressBarPartProps, ProgressBarProps, ProgressBarValuePlacement, ProgressBarVariant, } from './types/index';

package/dist/progress-bar/progress-bar.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'react';
+import { ProgressBarProps } from './types/index';
+/** Линейный прогресс с четырьмя вариантами; адаптивные представления переключаются CSS без определения ширины в JS. */
+export declare function ProgressBar({ value, min, max, variant, valuePlacement, label, ariaLabel, marks, valueLabel, trackProps, fillProps, markerProps, renderMark, md, lg, xl, ...props }: ProgressBarProps): JSX.Element;
+export type { ProgressBarBreakpointProps, ProgressBarMark, ProgressBarMarkContext, ProgressBarOwnStyleProps, ProgressBarPartProps, ProgressBarProps, ProgressBarValuePlacement, ProgressBarVariant, } from './types/index';

package/dist/progress-bar/types/index.d.ts

@@ -0,0 +1 @@
+export type { ProgressBarBreakpointProps, ProgressBarMark, ProgressBarMarkContext, ProgressBarOwnStyleProps, ProgressBarPartProps, ProgressBarProps, ProgressBarRange, ProgressBarValuePlacement, ProgressBarVariant, ProgressBarViewProps, } from './progress-bar.types';

package/dist/progress-bar/types/progress-bar.types.d.ts

@@ -0,0 +1,80 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '../../box/index';
+import { FlexBreakpointProps, FlexProps } from '../../flex/index';
+/** Готовое оформление: полоса, шаги, текущее значение на полосе или крупные контрольные точки. */
+export type ProgressBarVariant = 'line' | 'steps' | 'marker' | 'checkpoints';
+/** Место подписи значения; none явно скрывает её, в том числе на следующем breakpoint. */
+export type ProgressBarValuePlacement = 'start' | 'end' | 'marker' | 'none';
+/** Информационная отметка в диапазоне min–max; не является интерактивной кнопкой. */
+export type ProgressBarMark = {
+    /** Числовое положение отметки; ограничивается диапазоном. */
+    value: number;
+    /** Произвольная подпись над отметкой. */
+    label?: ReactNode;
+    /** Содержимое точки; по умолчанию число для checkpoints и пустой круг для steps. */
+    content?: ReactNode;
+};
+/** Контекст renderMark: состояния рассчитываются по положению относительно текущего значения. */
+export type ProgressBarMarkContext = {
+    /** Исходная отметка. */
+    mark: ProgressBarMark;
+    /** Индекс в переданном массиве. */
+    index: number;
+    /** completed — позади текущего значения, current — совпадает, pending — впереди. */
+    state: 'completed' | 'current' | 'pending';
+};
+/** Стандартные props Box для части компонента; style имеет итоговый приоритет. */
+export type ProgressBarPartProps = Omit<BoxProps, 'as' | 'children'>;
+/** Визуальные настройки, доступные в base и responsive overrides. */
+export type ProgressBarOwnStyleProps = {
+    /** Вариант оформления, по умолчанию line. */
+    variant?: ProgressBarVariant;
+    /** Положение значения; line по умолчанию start, marker — marker, steps/checkpoints — none. */
+    valuePlacement?: ProgressBarValuePlacement;
+};
+/** Переопределения от одного breakpoint: стандартные Flex props и настройки варианта. */
+export type ProgressBarBreakpointProps = FlexBreakpointProps & ProgressBarOwnStyleProps;
+/** Прогресс на базе Flex; md/lg/xl наследуются, явный style приоритетнее style props. */
+export type ProgressBarProps = Omit<FlexProps, 'children' | 'md' | 'lg' | 'xl'> & ProgressBarOwnStyleProps & {
+    /** Текущее значение, ограничивается диапазоном; нечисловое конечное значение трактуется как min. */
+    value: number;
+    /** Начало диапазона, по умолчанию 0; нечисловое значение заменяется на 0. */
+    min?: number;
+    /** Конец диапазона, по умолчанию 100. Некорректный диапазон заменяется на min..min+100, а если он непредставим — на 0..100. */
+    max?: number;
+    /** Общая подпись над компонентом, принимает ReactNode. */
+    label?: ReactNode;
+    /** Доступное имя, по умолчанию «Прогресс». */
+    ariaLabel?: string;
+    /** Отметки; для steps/checkpoints по умолчанию min, середина и max. */
+    marks?: ReadonlyArray<ProgressBarMark>;
+    /** Собственная подпись вместо процента; null явно скрывает текст. */
+    valueLabel?: ReactNode;
+    /** Props дорожки, включая responsive размеры, className, style. */
+    trackProps?: ProgressBarPartProps;
+    /** Props заполнения; фон по умолчанию currentColor, ширина следует value. */
+    fillProps?: ProgressBarPartProps;
+    /** Props текущего маркера и точек, включая responsive размеры и style. */
+    markerProps?: ProgressBarPartProps;
+    /** Содержимое отдельной точки; не заменяет её позиционирующую обёртку. */
+    renderMark?: (context: ProgressBarMarkContext) => ReactNode;
+    /** Overrides от 768 px. */
+    md?: ProgressBarBreakpointProps;
+    /** Overrides от 1024 px; пропущенные значения наследуются от md. */
+    lg?: ProgressBarBreakpointProps;
+    /** Overrides от 1440 px; пропущенные значения наследуются от lg. */
+    xl?: ProgressBarBreakpointProps;
+};
+/** Внутренние нормализованные числовые параметры. */
+export type ProgressBarRange = {
+    min: number;
+    max: number;
+    value: number;
+    percent: number;
+};
+/** Внутренний контекст отрисовки одного из адаптивных представлений. */
+export type ProgressBarViewProps = Pick<ProgressBarProps, 'marks' | 'valueLabel' | 'trackProps' | 'fillProps' | 'markerProps' | 'renderMark'> & {
+    range: ProgressBarRange;
+    variant: ProgressBarVariant;
+    valuePlacement: ProgressBarValuePlacement;
+};

package/dist/progress-bar-D4CL9r42.js

@@ -0,0 +1,236 @@
+import { jsxs as F, jsx as o } from "react/jsx-runtime";
+import { a as O } from "./responsive-style.config-DFuATrIM.js";
+import { Flex as p } from "./flex.js";
+import { Box as c } from "./box.js";
+function z(e, i = 0, l = 100) {
+  let r = Number.isFinite(i) ? i : 0, t = Number.isFinite(l) && l > r ? l : r + 100;
+  (!Number.isFinite(t) || t <= r) && (r = 0, t = 100);
+  const d = Number.isFinite(e) ? Math.min(t, Math.max(r, e)) : r;
+  return {
+    min: r,
+    max: t,
+    value: d,
+    percent: (Number.isFinite(t - r) ? (d - r) / (t - r) : (d / 2 - r / 2) / (t / 2 - r / 2)) * 100
+  };
+}
+function W({
+  range: e,
+  variant: i,
+  valuePlacement: l,
+  marks: r,
+  valueLabel: t,
+  trackProps: d,
+  fillProps: P,
+  markerProps: f,
+  renderMark: x
+}) {
+  const v = i === "steps", n = i === "checkpoints", g = v || n, h = t === void 0 ? Math.round(e.percent) + "%" : t, k = r ?? [
+    { value: e.min },
+    { value: e.min / 2 + e.max / 2 },
+    { value: e.max }
+  ], N = i === "marker" && t === void 0 ? e.value : h;
+  return /* @__PURE__ */ F(p, { gap: 12, align: "center", width: "100%", children: [
+    i === "marker" && /* @__PURE__ */ o(c, { color: "--color-text-secondary", children: e.min }),
+    l === "start" && /* @__PURE__ */ o(p, { shrink: 0, children: h }),
+    /* @__PURE__ */ o(
+      p,
+      {
+        flexDirection: "column",
+        position: { type: "relative" },
+        grow: 1,
+        minWidth: 0,
+        p: g ? {
+          px: n ? 20 : 10,
+          pt: v || k.some((a) => a.label != null) ? 40 : n ? 14 : 0,
+          pb: n ? 14 : 4
+        } : l === "marker" ? { py: 6 } : 0,
+        children: /* @__PURE__ */ F(
+          c,
+          {
+            position: { type: "relative" },
+            height: 12,
+            bg: "--color-background-subtle",
+            border: { radius: "999px" },
+            ...d,
+            children: [
+              /* @__PURE__ */ o(
+                c,
+                {
+                  height: "100%",
+                  width: e.percent + "%",
+                  bg: "currentColor",
+                  border: { radius: "inherit" },
+                  ...P
+                }
+              ),
+              l === "marker" && /* @__PURE__ */ o(
+                p,
+                {
+                  position: { type: "absolute", top: "50%", left: e.percent + "%" },
+                  transform: "translate(-50%, -50%)",
+                  align: "center",
+                  justify: "center",
+                  minWidth: 40,
+                  height: 24,
+                  p: { px: 8 },
+                  bg: "currentColor",
+                  border: { radius: "999px", width: "2px", color: "--color-background-default" },
+                  ...f,
+                  children: /* @__PURE__ */ o(c, { color: "--color-background-default", children: N })
+                }
+              ),
+              g && k.map((a, y) => {
+                const u = z(a.value, e.min, e.max), b = u.value === e.value ? "current" : u.value < e.value ? "completed" : "pending";
+                return /* @__PURE__ */ F(
+                  p,
+                  {
+                    position: { type: "absolute", top: "50%", left: u.percent + "%" },
+                    transform: "translate(-50%, -50%)",
+                    align: "center",
+                    justify: "center",
+                    children: [
+                      a.label != null && /* @__PURE__ */ o(
+                        c,
+                        {
+                          position: { type: "absolute", bottom: "calc(100% + 10px)", left: "50%" },
+                          transform: "translateX(-50%)",
+                          bg: "--color-background-default",
+                          color: "--color-text-primary",
+                          p: { px: 8, py: 4 },
+                          border: { radius: "4px" },
+                          style: { whiteSpace: "nowrap", fontSize: 14 },
+                          children: a.label
+                        }
+                      ),
+                      /* @__PURE__ */ o(
+                        p,
+                        {
+                          align: "center",
+                          justify: "center",
+                          width: n ? 40 : 20,
+                          height: n ? 40 : 20,
+                          bg: b === "pending" && n ? "--color-background-subtle" : "currentColor",
+                          border: { radius: "50%", width: "2px", color: "--color-background-default" },
+                          ...f,
+                          children: /* @__PURE__ */ o(
+                            c,
+                            {
+                              color: b === "pending" && n ? "--color-text-secondary" : "--color-background-default",
+                              children: x ? x({ mark: a, index: y, state: b }) : a.content ?? (n ? a.value : /* @__PURE__ */ o(
+                                c,
+                                {
+                                  width: 12,
+                                  height: 12,
+                                  border: {
+                                    radius: "50%",
+                                    width: "1px",
+                                    color: "--color-background-default"
+                                  }
+                                }
+                              ))
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  y
+                );
+              })
+            ]
+          }
+        )
+      }
+    ),
+    l === "end" && /* @__PURE__ */ o(p, { shrink: 0, children: h }),
+    i === "marker" && /* @__PURE__ */ o(c, { color: "--color-text-secondary", children: e.max })
+  ] });
+}
+function q({
+  value: e,
+  min: i,
+  max: l,
+  variant: r = "line",
+  valuePlacement: t,
+  label: d,
+  ariaLabel: P = "Прогресс",
+  marks: f,
+  valueLabel: x,
+  trackProps: v,
+  fillProps: n,
+  markerProps: g,
+  renderMark: h,
+  md: k,
+  lg: N,
+  xl: a,
+  ...y
+}) {
+  const u = z(e, i, l), b = ["line", "steps", "marker", "checkpoints"], D = ["start", "end", "marker", "none"], C = { md: k, lg: N, xl: a }, w = [{ variant: r, valuePlacement: t }];
+  for (const s of O)
+    w.push({
+      variant: C[s]?.variant ?? w.at(-1)?.variant ?? r,
+      valuePlacement: C[s]?.valuePlacement ?? w.at(-1)?.valuePlacement
+    });
+  const E = Object.fromEntries(
+    O.map((s) => {
+      const { variant: j, valuePlacement: B, ...M } = C[s] ?? {};
+      return [s, M];
+    })
+  );
+  return /* @__PURE__ */ F(
+    p,
+    {
+      flexDirection: "column",
+      gap: 12,
+      width: "100%",
+      color: "--color-primary-accent",
+      role: "progressbar",
+      "aria-label": P,
+      "aria-valuemin": u.min,
+      "aria-valuemax": u.max,
+      "aria-valuenow": u.value,
+      ...E,
+      ...y,
+      children: [
+        d != null && /* @__PURE__ */ o(c, { children: d }),
+        b.flatMap(
+          (s) => D.map((j) => {
+            const B = w.map(
+              (m) => m.variant === s && (m.valuePlacement ?? (m.variant === "line" ? "start" : m.variant === "marker" ? "marker" : "none")) === j
+            );
+            if (!B.some(Boolean)) return null;
+            const M = Object.fromEntries(
+              O.map((m, S) => [
+                m,
+                { display: B[S + 1] ? "flex" : "hidden" }
+              ])
+            );
+            return /* @__PURE__ */ o(
+              c,
+              {
+                width: "100%",
+                display: B[0] ? "flex" : "hidden",
+                ...M,
+                children: W({
+                  range: u,
+                  variant: s,
+                  valuePlacement: j,
+                  marks: f,
+                  valueLabel: x,
+                  trackProps: v,
+                  fillProps: n,
+                  markerProps: g,
+                  renderMark: h
+                })
+              },
+              s + j
+            );
+          })
+        )
+      ]
+    }
+  );
+}
+export {
+  q as P
+};

package/dist/progress-bar-XIJDb_UM.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("react/jsx-runtime"),C=require("./responsive-style.config-B2m9jVlX.cjs"),p=require("./flex.cjs"),c=require("./box.cjs");function M(e,i=0,s=100){let t=Number.isFinite(i)?i:0,o=Number.isFinite(s)&&s>t?s:t+100;(!Number.isFinite(o)||o<=t)&&(t=0,o=100);const u=Number.isFinite(e)?Math.min(o,Math.max(t,e)):t;return{min:t,max:o,value:u,percent:(Number.isFinite(o-t)?(u-t)/(o-t):(u/2-t/2)/(o/2-t/2))*100}}function z({range:e,variant:i,valuePlacement:s,marks:t,valueLabel:o,trackProps:u,fillProps:w,markerProps:b,renderMark:f}){const v=i==="steps",n=i==="checkpoints",j=v||n,h=o===void 0?Math.round(e.percent)+"%":o,g=t??[{value:e.min},{value:e.min/2+e.max/2},{value:e.max}],P=i==="marker"&&o===void 0?e.value:h;return r.jsxs(p.Flex,{gap:12,align:"center",width:"100%",children:[i==="marker"&&r.jsx(c.Box,{color:"--color-text-secondary",children:e.min}),s==="start"&&r.jsx(p.Flex,{shrink:0,children:h}),r.jsx(p.Flex,{flexDirection:"column",position:{type:"relative"},grow:1,minWidth:0,p:j?{px:n?20:10,pt:v||g.some(l=>l.label!=null)?40:n?14:0,pb:n?14:4}:s==="marker"?{py:6}:0,children:r.jsxs(c.Box,{position:{type:"relative"},height:12,bg:"--color-background-subtle",border:{radius:"999px"},...u,children:[r.jsx(c.Box,{height:"100%",width:e.percent+"%",bg:"currentColor",border:{radius:"inherit"},...w}),s==="marker"&&r.jsx(p.Flex,{position:{type:"absolute",top:"50%",left:e.percent+"%"},transform:"translate(-50%, -50%)",align:"center",justify:"center",minWidth:40,height:24,p:{px:8},bg:"currentColor",border:{radius:"999px",width:"2px",color:"--color-background-default"},...b,children:r.jsx(c.Box,{color:"--color-background-default",children:P})}),j&&g.map((l,k)=>{const d=M(l.value,e.min,e.max),m=d.value===e.value?"current":d.value<e.value?"completed":"pending";return r.jsxs(p.Flex,{position:{type:"absolute",top:"50%",left:d.percent+"%"},transform:"translate(-50%, -50%)",align:"center",justify:"center",children:[l.label!=null&&r.jsx(c.Box,{position:{type:"absolute",bottom:"calc(100% + 10px)",left:"50%"},transform:"translateX(-50%)",bg:"--color-background-default",color:"--color-text-primary",p:{px:8,py:4},border:{radius:"4px"},style:{whiteSpace:"nowrap",fontSize:14},children:l.label}),r.jsx(p.Flex,{align:"center",justify:"center",width:n?40:20,height:n?40:20,bg:m==="pending"&&n?"--color-background-subtle":"currentColor",border:{radius:"50%",width:"2px",color:"--color-background-default"},...b,children:r.jsx(c.Box,{color:m==="pending"&&n?"--color-text-secondary":"--color-background-default",children:f?f({mark:l,index:k,state:m}):l.content??(n?l.value:r.jsx(c.Box,{width:12,height:12,border:{radius:"50%",width:"1px",color:"--color-background-default"}}))})})]},k)})]})}),s==="end"&&r.jsx(p.Flex,{shrink:0,children:h}),i==="marker"&&r.jsx(c.Box,{color:"--color-text-secondary",children:e.max})]})}function D({value:e,min:i,max:s,variant:t="line",valuePlacement:o,label:u,ariaLabel:w="Прогресс",marks:b,valueLabel:f,trackProps:v,fillProps:n,markerProps:j,renderMark:h,md:g,lg:P,xl:l,...k}){const d=M(e,i,s),m=["line","steps","marker","checkpoints"],O=["start","end","marker","none"],N={md:g,lg:P,xl:l},B=[{variant:t,valuePlacement:o}];for(const a of C.responsiveBreakpoints)B.push({variant:N[a]?.variant??B.at(-1)?.variant??t,valuePlacement:N[a]?.valuePlacement??B.at(-1)?.valuePlacement});const S=Object.fromEntries(C.responsiveBreakpoints.map(a=>{const{variant:y,valuePlacement:F,...q}=N[a]??{};return[a,q]}));return r.jsxs(p.Flex,{flexDirection:"column",gap:12,width:"100%",color:"--color-primary-accent",role:"progressbar","aria-label":w,"aria-valuemin":d.min,"aria-valuemax":d.max,"aria-valuenow":d.value,...S,...k,children:[u!=null&&r.jsx(c.Box,{children:u}),m.flatMap(a=>O.map(y=>{const F=B.map(x=>x.variant===a&&(x.valuePlacement??(x.variant==="line"?"start":x.variant==="marker"?"marker":"none"))===y);if(!F.some(Boolean))return null;const q=Object.fromEntries(C.responsiveBreakpoints.map((x,_)=>[x,{display:F[_+1]?"flex":"hidden"}]));return r.jsx(c.Box,{width:"100%",display:F[0]?"flex":"hidden",...q,children:z({range:d,variant:a,valuePlacement:y,marks:b,valueLabel:f,trackProps:v,fillProps:n,markerProps:j,renderMark:h})},a+y)}))]})}exports.ProgressBar=D;

package/dist/progress-bar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./progress-bar-XIJDb_UM.cjs");exports.ProgressBar=r.ProgressBar;

package/dist/progress-bar.js

@@ -0,0 +1,4 @@
+import { P as s } from "./progress-bar-D4CL9r42.js";
+export {
+  s as ProgressBar
+};

package/dist/shared/responsive-style/index.d.ts

@@ -0,0 +1 @@
+export { responsiveBreakpointMinWidth, responsiveBreakpoints } from './responsive-style.config';

package/dist/shared/responsive-style/responsive-style.types.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import { UiKitTypography } from '../../design-tokens/typography.tokens';
-import { UiKitColors } from '../../types';
+import { UiKitColors } from '../../types/index';
 /**
  * Поддерживаемые responsive breakpoints.
  *