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

package/dist/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { Toast } from './toast';
+export type { ToastProps } from './types/index';

package/dist/toast/toast.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'react';
+import { ToastProps } from './types/index';
+/** Управляемый тост без портала: расположение и очередь задаёт приложение. */
+export declare function Toast({ open, duration, onClose, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: ToastProps): JSX.Element | null;
+export type { ToastProps } from './types/index';

package/dist/toast/types/index.d.ts

@@ -0,0 +1 @@
+export type { ToastProps } from './toast.types';

package/dist/toast/types/toast.types.d.ts

@@ -0,0 +1,10 @@
+import { AlertProps } from '../../alert/index';
+/** Toast наследует все слоты и responsive style props Alert. */
+export type ToastProps = AlertProps & {
+    /** Видимость, по умолчанию true. Закрытие управляется родителем через onClose. */
+    open?: boolean;
+    /** Автозакрытие в мс; 0 (по умолчанию) отключает таймер.
+     * Наведение и фокус приостанавливают отсчёт с сохранением остатка.
+     */
+    duration?: number;
+};

package/dist/toast-CH8VqvLC.cjs

@@ -0,0 +1 @@
+"use client";"use strict";const q=require("react/jsx-runtime"),t=require("react"),x=require("./alert-DTc0Usg-.cjs");function M({open:u=!0,duration:s=0,onClose:r,onMouseEnter:l,onMouseLeave:m,onFocus:T,onBlur:E,...R}){const[n,a]=t.useState(!1),[f,i]=t.useState(!1),c=t.useRef(s),o=t.useRef(r);return t.useEffect(()=>{o.current=r},[r]),t.useEffect(()=>{c.current=s},[s,u]),t.useEffect(()=>{if(!u||s<=0||!r||n||f)return;const e=Date.now(),g=setTimeout(()=>o.current?.(),c.current);return()=>{clearTimeout(g),c.current=Math.max(0,c.current-(Date.now()-e))}},[u,s,r,n,f]),u?q.jsx(x.Alert,{variant:"soft",...R,onClose:r,onMouseEnter:e=>{a(!0),l?.(e)},onMouseLeave:e=>{a(!1),m?.(e)},onFocus:e=>{i(!0),T?.(e)},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||i(!1),E?.(e)}}):null}exports.Toast=M;

package/dist/toast-DpjugQ8H.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as v } from "react/jsx-runtime";
+import { useState as m, useRef as l, useEffect as c } from "react";
+import { A as w } from "./alert-CTIWpkmD.js";
+function F({
+  open: s = !0,
+  duration: r = 0,
+  onClose: t,
+  onMouseEnter: T,
+  onMouseLeave: g,
+  onFocus: x,
+  onBlur: M,
+  ...d
+}) {
+  const [n, a] = m(!1), [f, o] = m(!1), u = l(r), i = l(t);
+  return c(() => {
+    i.current = t;
+  }, [t]), c(() => {
+    u.current = r;
+  }, [r, s]), c(() => {
+    if (!s || r <= 0 || !t || n || f) return;
+    const e = Date.now(), h = setTimeout(() => i.current?.(), u.current);
+    return () => {
+      clearTimeout(h), u.current = Math.max(0, u.current - (Date.now() - e));
+    };
+  }, [s, r, t, n, f]), s ? /* @__PURE__ */ v(
+    w,
+    {
+      variant: "soft",
+      ...d,
+      onClose: t,
+      onMouseEnter: (e) => {
+        a(!0), T?.(e);
+      },
+      onMouseLeave: (e) => {
+        a(!1), g?.(e);
+      },
+      onFocus: (e) => {
+        o(!0), x?.(e);
+      },
+      onBlur: (e) => {
+        e.currentTarget.contains(e.relatedTarget) || o(!1), M?.(e);
+      }
+    }
+  ) : null;
+}
+export {
+  F as T
+};

package/dist/toast.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./toast-CH8VqvLC.cjs");exports.Toast=t.Toast;

package/dist/toast.js

@@ -0,0 +1,4 @@
+import { T as r } from "./toast-DpjugQ8H.js";
+export {
+  r as Toast
+};

package/dist/typography/index.d.ts

@@ -0,0 +1 @@
+export * from './typography';

package/dist/typography/typography.helpers.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { UiKitTypographyToken } from '../design-tokens/typography.tokens';
 import { CssVariableMap, ResponsiveStyleBreakpoint, ResponsiveUiKitStyleProps } from '../shared/responsive-style/responsive-style.types';
-import { UiKitTypographyProps } from '../types';
+import { UiKitTypographyProps } from '../types/index';
 /**
  * Токены размера шрифта, которые Typography может подключить к внутренним CSS-переменным.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shmidko61/lc-ui-kit",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "files": [
     "dist"
@@ -69,6 +69,15 @@
       ],
       "ui-kit-provider": [
         "dist/ui-kit-provider/ui-kit-provider.d.ts"
+      ],
+      "alert": [
+        "dist/alert/index.d.ts"
+      ],
+      "toast": [
+        "dist/toast/index.d.ts"
+      ],
+      "notification-provider": [
+        "dist/notification-provider/index.d.ts"
       ]
     }
   },
@@ -173,6 +182,21 @@
       "types": "./dist/ui-kit-provider/ui-kit-provider.d.ts",
       "import": "./dist/ui-kit-provider.js",
       "require": "./dist/ui-kit-provider.cjs"
+    },
+    "./alert": {
+      "types": "./dist/alert/index.d.ts",
+      "import": "./dist/alert.js",
+      "require": "./dist/alert.cjs"
+    },
+    "./toast": {
+      "types": "./dist/toast/index.d.ts",
+      "import": "./dist/toast.js",
+      "require": "./dist/toast.cjs"
+    },
+    "./notification-provider": {
+      "types": "./dist/notification-provider/index.d.ts",
+      "import": "./dist/notification-provider.js",
+      "require": "./dist/notification-provider.cjs"
     }
   },
   "sideEffects": [
@@ -221,6 +245,8 @@
     "test:package": "node scripts/check-package.mjs",
     "test:checks": "node --test scripts/package-checks.test.mjs",
     "pack:check": "node scripts/check-tarball.mjs",
-    "typecheck:package": "tsc -p tsconfig.package-test.json"
+    "typecheck:package": "tsc -p tsconfig.package-test.json",
+    "test:notifications": "node scripts/check-notifications-browser.mjs",
+    "test:compatibility": "node scripts/check-compatibility.mjs"
   }
 }