@dss-kit/ui-kit 0.3.0 → 0.3.2

package/dist/components/shared/Toast/Toast.js

@@ -0,0 +1,104 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { cx as t, css as u } from "@emotion/css";
+import { forwardRef as T, useMemo as c } from "react";
+import s from "../../../assets/svg/toast/alert-triangle.svg.js";
+import f from "../../../assets/svg/toast/check-circle.svg.js";
+import j from "../../../assets/svg/toast/info-circle.svg.js";
+import v from "../../../assets/svg/toast/x.svg.js";
+import { theme as r } from "../../../utils/theme/index.js";
+import { Box as i } from "../../builders/Box/Box.js";
+import { Text as m } from "../../builders/Text/Text.js";
+const M = {
+  positive: /* @__PURE__ */ e(f, {}),
+  negative: /* @__PURE__ */ e(s, {}),
+  warning: /* @__PURE__ */ e(s, {}),
+  info: /* @__PURE__ */ e(j, {}),
+  neutral: /* @__PURE__ */ e(f, {})
+}, W = u({
+  boxShadow: `0 4px 20px 0 ${r.color.effect.shadowM}`
+}), A = u({
+  cursor: "pointer",
+  "&:hover": {
+    opacity: 0.8
+  }
+}), K = T(
+  ({
+    title: g,
+    subtitle: l,
+    icon: a,
+    variant: o = "neutral",
+    w: d = "full",
+    onClose: p,
+    className: y,
+    iconBoxClassName: h,
+    titleClassName: x,
+    subtitleClassName: C,
+    closeIconClassName: b,
+    ...w
+  }, S) => {
+    const I = c(() => o === "neutral" ? r.color.icon.accent : o === "info" ? r.color.icon.accent : o === "positive" ? r.color.icon.positive : o === "negative" ? r.color.icon.negative : o === "warning" ? r.color.icon.warning : r.color.icon.inverse, [o]), P = c(() => o === "neutral" ? r.color.icon.tertiary : r.color.icon.inverse, [o]), N = c(() => o === "neutral" ? r.color.fill.accentSecondary : r.color.fill.bgPrimary, [o]), R = c(() => o === "neutral" ? r.color.fill.bgPrimary : o === "info" ? r.color.fill.accentPrimary : o === "positive" ? r.color.fill.positivePrimary : o === "negative" ? r.color.fill.negativePrimary : o === "warning" ? r.color.fill.warningPrimary : r.color.fill.accentPrimary, [o]), k = c(() => o === "neutral" ? r.color.text.primary : r.color.text.primaryInverse, [o]), B = c(() => o === "neutral" ? r.color.text.tertiaryInverse : r.color.text.primaryInverse, [o]);
+    return /* @__PURE__ */ n(
+      i,
+      {
+        row: !0,
+        w: d,
+        ref: S,
+        p: r.spacing.md,
+        gap: r.spacing.md,
+        backgroundColor: R,
+        borderRadius: r.cornerRadius.lg,
+        className: t(W, y),
+        ...w,
+        children: [
+          /* @__PURE__ */ e(
+            i,
+            {
+              w: 48,
+              h: 48,
+              center: !0,
+              backgroundColor: N,
+              borderRadius: r.cornerRadius.md,
+              style: { color: I },
+              className: h,
+              children: a || M[o]
+            }
+          ),
+          /* @__PURE__ */ n(i, { flex: 1, children: [
+            /* @__PURE__ */ e(
+              m,
+              {
+                variant: "body-1",
+                fontWeight: "semibold",
+                color: k,
+                className: x,
+                children: g
+              }
+            ),
+            l && /* @__PURE__ */ e(
+              m,
+              {
+                variant: "body-2",
+                fontWeight: "medium",
+                color: B,
+                className: C,
+                children: l
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(i, { onClick: p, children: /* @__PURE__ */ e(
+            v,
+            {
+              width: 24,
+              height: 24,
+              color: P,
+              className: t(A, b)
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+export {
+  K as Toast
+};

package/dist/components/shared/Toast/Toast.store.d.ts

@@ -21,4 +21,3 @@ export declare const toastStore: {
     removeAll(): void;
 };
 export {};
-//# sourceMappingURL=Toast.store.d.ts.map

package/dist/components/shared/Toast/Toast.store.js

@@ -0,0 +1,37 @@
+let o = [];
+const i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Map();
+function s() {
+  for (const t of i)
+    t();
+}
+function a() {
+  return Math.random().toString(36).slice(2, 9);
+}
+const u = {
+  getSnapshot() {
+    return o;
+  },
+  subscribe(t) {
+    return i.add(t), () => i.delete(t);
+  },
+  add(t) {
+    const e = t.id ?? a(), r = t.duration ?? 5e3;
+    if (o = [...o, { ...t, id: e, duration: r }], s(), r > 0) {
+      const c = setTimeout(() => u.remove(e), r);
+      n.set(e, c);
+    }
+    return e;
+  },
+  remove(t) {
+    const e = n.get(t);
+    e && (clearTimeout(e), n.delete(t)), o = o.filter((r) => r.id !== t), s();
+  },
+  removeAll() {
+    for (const [, t] of n)
+      clearTimeout(t);
+    n.clear(), o = [], s();
+  }
+};
+export {
+  u as toastStore
+};

package/dist/components/shared/Toast/Toast.utils.d.ts

@@ -27,4 +27,3 @@ declare class Toast {
  */
 export declare const toast: Toast;
 export {};
-//# sourceMappingURL=Toast.utils.d.ts.map

package/dist/components/shared/Toast/Toast.utils.js

@@ -0,0 +1,28 @@
+import { toastStore as t } from "./Toast.store.js";
+class i {
+  show(r) {
+    return t.add(r);
+  }
+  dismiss(r) {
+    t.remove(r);
+  }
+  dismissAll() {
+    t.removeAll();
+  }
+  success(r, s) {
+    return this.show({ ...s, title: r, variant: "positive" });
+  }
+  error(r, s) {
+    return this.show({ ...s, title: r, variant: "negative" });
+  }
+  warning(r, s) {
+    return this.show({ ...s, title: r, variant: "warning" });
+  }
+  info(r, s) {
+    return this.show({ ...s, title: r, variant: "info" });
+  }
+}
+const e = new i();
+export {
+  e as toast
+};

package/dist/components/shared/Toast/ToastContainer.d.ts

@@ -10,4 +10,3 @@ interface ToastContainerProps {
 }
 export declare function ToastContainer({ position, className, itemClassName, toastClassName, }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=ToastContainer.d.ts.map

package/dist/components/shared/Toast/ToastContainer.js

@@ -0,0 +1,89 @@
+import { jsx as n } from "react/jsx-runtime";
+import { cx as m, css as c } from "@emotion/css";
+import { AnimatePresence as p, motion as f } from "framer-motion";
+import { useSyncExternalStore as d } from "react";
+import { Toast as h } from "./Toast.js";
+import { toastStore as o } from "./Toast.store.js";
+import { Portal as g } from "../../builders/Portal/Portal.js";
+const x = {
+  "top-left": { top: 16, left: 16, alignItems: "flex-start" },
+  "top-center": {
+    top: 16,
+    left: "50%",
+    transform: "translateX(-50%)",
+    alignItems: "center"
+  },
+  "top-right": { top: 16, right: 16, alignItems: "flex-end" },
+  "bottom-left": { bottom: 16, left: 16, alignItems: "flex-start" },
+  "bottom-center": {
+    bottom: 16,
+    left: "50%",
+    transform: "translateX(-50%)",
+    alignItems: "center"
+  },
+  "bottom-right": { bottom: 16, right: 16, alignItems: "flex-end" }
+}, u = (t) => {
+  const s = t.startsWith("top"), r = t.endsWith("left"), a = t.endsWith("right"), l = t.endsWith("center"), i = r ? -40 : a ? 40 : 0;
+  return {
+    initial: { opacity: 0, x: i, y: s ? -16 : 16, scale: 0.95 },
+    animate: { opacity: 1, x: 0, y: 0, scale: 1 },
+    exit: { opacity: 0, x: i, scale: 0.95, transition: { duration: 0.15 } }
+  };
+}, y = c({
+  position: "fixed",
+  zIndex: 2,
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  pointerEvents: "none",
+  maxWidth: 325,
+  width: "100%"
+}), b = c({
+  pointerEvents: "auto",
+  width: "100%"
+});
+function N({
+  position: t = "top-right",
+  className: s,
+  itemClassName: r,
+  toastClassName: a
+}) {
+  const l = d(
+    o.subscribe,
+    o.getSnapshot,
+    o.getSnapshot
+  ), i = u(t);
+  return /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n(
+    "div",
+    {
+      className: m(y, s),
+      style: x[t],
+      children: /* @__PURE__ */ n(p, { initial: !1, children: l.map((e) => /* @__PURE__ */ n(
+        f.div,
+        {
+          className: m(b, r),
+          layout: !0,
+          initial: i.initial,
+          animate: i.animate,
+          exit: i.exit,
+          transition: { type: "spring", stiffness: 400, damping: 30 },
+          children: /* @__PURE__ */ n(
+            h,
+            {
+              title: e.title,
+              subtitle: e.subtitle,
+              icon: e.icon,
+              variant: e.variant,
+              onClose: () => o.remove(e.id),
+              className: a
+            }
+          )
+        },
+        e.id
+      )) })
+    }
+  ) });
+}
+export {
+  N as ToastContainer
+};

package/dist/components/shared/Toast/index.d.ts

@@ -3,4 +3,3 @@ export { useToast } from './Toast.hooks';
 export type { ToastPosition } from './Toast.store';
 export { toast } from './Toast.utils';
 export { ToastContainer } from './ToastContainer';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/shared/Tooltip/Tooltip.d.ts

@@ -140,4 +140,3 @@ export interface TooltipProps {
  */
 declare const Tooltip: React.FC<TooltipProps>;
 export { Tooltip };
-//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/shared/Tooltip/Tooltip.js

@@ -0,0 +1,195 @@
+import { jsxs as R, Fragment as uo, jsx as l } from "react/jsx-runtime";
+import { css as c, cx as T, keyframes as ho } from "@emotion/css";
+import { useFloating as go, offset as wo, flip as yo, shift as So, arrow as xo, autoUpdate as vo, useHover as bo, useFocus as Ao, useDismiss as Oo, useRole as Ro, useInteractions as To, useMergeRefs as Do } from "@floating-ui/react";
+import { useState as D, useId as Po, useCallback as ko, useMemo as Eo, cloneElement as Fo } from "react";
+import { tooltipStyles as P, tooltipArrowShapes as Co, tooltipArrowOverlap as p, tooltipArrowHeight as Io, tooltipArrowSize as No } from "./constants.js";
+import { getTooltipArrowPosition as Mo, getTooltipRadiusOverrides as Ho, getTooltipArrowDimensions as Ko, getTooltipArrowShapeKey as $o } from "./utils.js";
+import { Portal as jo } from "../../builders/Portal/Portal.js";
+import { Box as w } from "../../builders/Box/Box.js";
+import { theme as zo } from "../../../utils/theme/index.js";
+import { Text as Bo } from "../../builders/Text/Text.js";
+const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
+  from { opacity: 0; transform: translateY(2px); }
+  to { opacity: 1; transform: translateY(0); }
+`, Go = c({
+  boxShadow: `0 4px 20px 0 ${Uo.effect.shadowM}`,
+  animation: `${qo} 0.16s ease-out`,
+  fontSize: "12px",
+  lineHeight: "16px",
+  fontWeight: "500",
+  wordBreak: "break-word"
+}), Jo = c({
+  position: "absolute",
+  // Треугольник через clip-path
+  clipPath: "var(--tooltip-arrow-shape)"
+}), Lo = ({
+  color: d = "primary",
+  children: n,
+  content: s,
+  disabled: k = !1,
+  initialOpen: E = !1,
+  open: F,
+  onChange: C,
+  placement: m = "top",
+  trigger: y = "hover",
+  offset: I = 5,
+  showArrow: a = !0,
+  openDelay: N = 400,
+  closeDelay: M = 0,
+  closeOnEsc: H = !0,
+  zIndex: K = 1,
+  maxWidth: $,
+  className: j,
+  contentClassName: z,
+  arrowClassName: B,
+  textClassName: U,
+  style: W,
+  id: Y,
+  p: q = Yo.md,
+  borderRadius: G = Wo.sm
+}) => {
+  const [J, L] = D(E), [S, Q] = D(null), x = F ?? J, v = C ?? L, V = Po(), f = Y ?? `tooltip-${V}`, X = s == null || s === "", t = !k && !X, Z = ko(
+    (fo) => {
+      t && v(fo);
+    },
+    [t, v]
+  ), u = I + (a ? Io : 0), {
+    context: e,
+    refs: b,
+    floatingStyles: _,
+    middlewareData: oo,
+    placement: h
+  } = go({
+    placement: m,
+    open: t ? x : !1,
+    onOpenChange: Z,
+    whileElementsMounted: vo,
+    middleware: [
+      wo(u),
+      yo({
+        crossAxis: m.includes("-"),
+        fallbackAxisSideDirection: m.includes("start") ? "start" : "end",
+        padding: u
+      }),
+      So({ padding: u }),
+      ...a && S ? [xo({ element: S, padding: 0 })] : []
+    ]
+  }), to = oo.arrow, o = h.split("-")[0], i = h.includes("-") ? h.split("-")[1] : null, A = Mo(to, o, i), eo = $o(o, i), so = Ho(
+    o,
+    i,
+    a
+  ), r = Ko(
+    o,
+    i,
+    No
+  ), ro = c({
+    ...so,
+    ...P[d]
+  }), io = c({
+    left: A.x ?? void 0,
+    top: A.y ?? void 0,
+    width: r.width,
+    height: r.height,
+    // CSS переменная для clip-path
+    "--tooltip-arrow-shape": Co[eo],
+    // Динамическая позиция для стороны (bottom/top/left/right)
+    ...o === "top" && {
+      bottom: -r.height + p
+    },
+    ...o === "bottom" && {
+      top: -r.height + p
+    },
+    ...o === "left" && {
+      right: -r.width + p
+    },
+    ...o === "right" && {
+      left: -r.width + p
+    },
+    // Для end alignment в top/bottom позиционируем стрелку справа
+    ...i === "end" && (o === "top" || o === "bottom") && {
+      left: "auto",
+      right: 0
+    },
+    ...P[d]
+  }), no = bo(e, {
+    enabled: y === "hover" && t,
+    delay: {
+      open: N,
+      close: M
+    },
+    move: !1
+  }), ao = Ao(e, {
+    enabled: y === "hover" && t
+  }), lo = Oo(e, {
+    enabled: H && t,
+    escapeKey: !0
+  }), po = Ro(e, { role: "tooltip" }), g = To([no, ao, lo, po]), co = n.ref, O = Do([b.setReference, co]), mo = Eo(
+    () => Fo(
+      n,
+      g.getReferenceProps({
+        ...n.props,
+        ref: O,
+        "data-state": e.open ? "open" : "closed",
+        ...e.open ? { "aria-describedby": f } : {}
+      })
+    ),
+    [n, g, e.open, f, O]
+  );
+  return /* @__PURE__ */ R(uo, { children: [
+    mo,
+    t && x && /* @__PURE__ */ l(jo, { children: /* @__PURE__ */ l(
+      w,
+      {
+        absolute: !0,
+        zIndex: K,
+        className: j,
+        ref: b.setFloating,
+        style: { ..._, ...W },
+        ...g.getFloatingProps({
+          id: f
+        }),
+        children: /* @__PURE__ */ R(
+          w,
+          {
+            relative: !0,
+            maxWidth: $,
+            p: q,
+            borderRadius: G,
+            className: T(
+              Go,
+              ro,
+              z
+            ),
+            children: [
+              a && /* @__PURE__ */ l(
+                w,
+                {
+                  ref: Q,
+                  className: T(
+                    Jo,
+                    io,
+                    B
+                  )
+                }
+              ),
+              typeof s == "string" ? /* @__PURE__ */ l(
+                Bo,
+                {
+                  colorName: d,
+                  variant: "caption-1",
+                  fontWeight: "medium",
+                  className: U,
+                  children: s
+                }
+              ) : s
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+};
+Lo.displayName = "Tooltip";
+export {
+  Lo as Tooltip
+};

package/dist/components/shared/Tooltip/constants.d.ts

@@ -21,4 +21,3 @@ export declare const tooltipStyles: {
         readonly color: "var(--text-primary-inverse)";
     };
 };
-//# sourceMappingURL=constants.d.ts.map

package/dist/components/shared/Tooltip/constants.js

@@ -0,0 +1,38 @@
+import { theme as t } from "../../../utils/theme/index.js";
+const { color: o } = t, l = {
+  // Центрированные стрелки (10x6)
+  top: "polygon(100% 0%, 50% 100%, 0% 0%)",
+  // ▼
+  bottom: "polygon(0% 100%, 50% 0%, 100% 100%)",
+  // ▲
+  // Угловые стрелки (8x6)
+  "top-start": "polygon(0% 0%, 0% 100%, 100% 0%)",
+  // └
+  "top-end": "polygon(100% 0%, 100% 100%, 0% 0%)",
+  // ┘
+  "bottom-start": "polygon(0% 100%, 0% 0%, 100% 100%)",
+  // ┌
+  "bottom-end": "polygon(100% 100%, 100% 0%, 0% 100%)",
+  // ┐
+  // Боковые стрелки (6x10)
+  left: "polygon(0% 100%, 100% 50%, 0% 0%)",
+  // ► (tooltip слева, стрелка вправо)
+  right: "polygon(100% 100%, 0% 50%, 100% 0%)"
+  // ◄ (tooltip справа, стрелка влево)
+}, p = 10, n = 6, e = 1, i = {
+  primary: {
+    backgroundColor: o.fill.bgPrimary,
+    color: o.text.primary
+  },
+  inverse: {
+    backgroundColor: o.fill.bgPrimaryInverse,
+    color: o.text.primaryInverse
+  }
+};
+export {
+  n as tooltipArrowHeight,
+  e as tooltipArrowOverlap,
+  l as tooltipArrowShapes,
+  p as tooltipArrowSize,
+  i as tooltipStyles
+};

package/dist/components/shared/Tooltip/index.d.ts

@@ -1,3 +1,2 @@
 export { Tooltip, type TooltipProps, } from './Tooltip';
 export type { TooltipPlacement, TooltipTrigger, } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/shared/Tooltip/types.d.ts

@@ -13,4 +13,3 @@ export type TooltipSide = "top" | "bottom" | "left" | "right";
  * - `manual`: управление только через `open`/`onChange`
  */
 export type TooltipTrigger = "hover" | "manual";
-//# sourceMappingURL=types.d.ts.map

package/dist/components/shared/Tooltip/utils.d.ts

@@ -11,4 +11,3 @@ export declare const getTooltipArrowPosition: (arrowCoords: Partial<Coords> | un
     x: number | undefined;
     y: number | undefined;
 };
-//# sourceMappingURL=utils.d.ts.map

package/dist/components/shared/Tooltip/utils.js

@@ -0,0 +1,13 @@
+const i = (t, r) => (t === "top" || t === "bottom") && r ? `${t}-${r}` : t, u = (t, r, o) => o ? (t === "top" || t === "bottom") && r ? { [t === "top" ? r === "start" ? "borderBottomLeftRadius" : "borderBottomRightRadius" : r === "start" ? "borderTopLeftRadius" : "borderTopRightRadius"]: 0 } : {} : {}, h = (t, r, o) => t === "left" || t === "right" ? { width: 6, height: o } : r ? { width: 8, height: 6 } : { width: o, height: 6 }, n = (t, r, o) => t ? (r === "top" || r === "bottom") && o ? {
+  x: o === "start" ? 0 : void 0,
+  y: t.y
+} : {
+  x: t.x,
+  y: t.y
+} : { x: void 0, y: void 0 };
+export {
+  h as getTooltipArrowDimensions,
+  n as getTooltipArrowPosition,
+  i as getTooltipArrowShapeKey,
+  u as getTooltipRadiusOverrides
+};

package/dist/components/shared/index.d.ts

@@ -7,4 +7,3 @@ export * from './Skeleton';
 export * from './Tag';
 export * from './Toast';
 export * from './Tooltip';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts

@@ -4,4 +4,3 @@ export { UiKitLocaleProvider } from './locale';
 export * from './providers';
 export * from './types';
 export * from './utils';
-//# sourceMappingURL=index.d.ts.map