@shmidko61/lc-ui-kit 0.11.0 → 0.13.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/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.
  *