@dss-kit/ui-kit 0.3.0 → 0.3.1

package/dist/components/shared/MarkdownText/MarkdownText.styles.js

@@ -0,0 +1,90 @@
+import { css as i } from "@emotion/css";
+import { typography as e } from "../../../styles/utils/typography.js";
+import { theme as l } from "../../../utils/theme/index.js";
+const { color: o, cornerRadius: n, spacing: t } = l, h = i({
+  width: "100%",
+  cursor: "default",
+  userSelect: "text",
+  outline: "none",
+  ...e.body2,
+  color: o.text.primary,
+  overflowWrap: "anywhere",
+  "p, ul, ol, pre, blockquote, table": {
+    margin: `${t.sm} 0`
+  },
+  "h1, h2, h3, h4, h5, h6": {
+    margin: `${t.md} 0 ${t.sm}`,
+    fontWeight: 600
+  },
+  h1: {
+    fontSize: e.title1.fontSize,
+    lineHeight: e.title1.lineHeight
+  },
+  h2: {
+    fontSize: e.title2.fontSize,
+    lineHeight: e.title2.lineHeight
+  },
+  h3: {
+    fontSize: e.title3.fontSize,
+    lineHeight: e.title3.lineHeight
+  },
+  h4: {
+    fontSize: e.headline2.fontSize,
+    lineHeight: e.headline2.lineHeight
+  },
+  h5: {
+    fontSize: e.headline3.fontSize,
+    lineHeight: e.headline3.lineHeight
+  },
+  h6: {
+    fontSize: e.body1.fontSize,
+    lineHeight: e.body1.lineHeight
+  },
+  ul: {
+    paddingLeft: t.xl,
+    listStyleType: "disc"
+  },
+  ol: {
+    paddingLeft: t.xl,
+    listStyleType: "decimal"
+  },
+  li: {
+    margin: `${t.xs} 0`
+  },
+  a: {
+    color: o.text.accent,
+    textDecoration: "underline"
+  },
+  code: {
+    padding: `0 ${t.xs}`,
+    borderRadius: n.xs,
+    backgroundColor: o.fill.neutralSecondary,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+  },
+  "pre code": {
+    display: "block",
+    padding: t.md,
+    overflowX: "auto"
+  },
+  blockquote: {
+    marginLeft: 0,
+    paddingLeft: t.md,
+    borderLeft: `3px solid ${o.border.neutralAlphaBasic}`,
+    color: o.text.secondary
+  },
+  table: {
+    width: "100%",
+    borderCollapse: "collapse"
+  },
+  "th, td": {
+    border: `1px solid ${o.border.neutralAlphaBasic}`,
+    padding: t.sm,
+    textAlign: "left"
+  },
+  th: {
+    backgroundColor: o.fill.neutralSecondary
+  }
+});
+export {
+  h as markdownTextStyle
+};

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

@@ -1,2 +1 @@
 export * from './MarkdownText';
-//# sourceMappingURL=index.d.ts.map

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

@@ -72,4 +72,3 @@ export interface PopoverProps {
  * ```
  */
 export declare const Popover: React.FC<PopoverProps>;
-//# sourceMappingURL=Popover.d.ts.map

package/dist/components/shared/Popover/Popover.js

@@ -0,0 +1,97 @@
+import { jsxs as f, Fragment as K, jsx as i } from "react/jsx-runtime";
+import { useFloating as q, offset as B, flip as G, shift as I, autoUpdate as J, useClick as L, useHover as Q, useDismiss as T, useRole as V, useInteractions as W, useMergeRefs as X } from "@floating-ui/react";
+import { useState as Y, useCallback as Z, cloneElement as _ } from "react";
+import { PopoverContent as z } from "./PopoverContent/PopoverContent.js";
+import { Portal as $ } from "../../builders/Portal/Portal.js";
+import { Box as m } from "../../builders/Box/Box.js";
+const le = ({
+  children: o,
+  content: u,
+  initialOpen: g = !1,
+  open: h,
+  onChange: b,
+  placement: t = "bottom",
+  trigger: s = "click",
+  offset: n = 12,
+  closeOnBackdropClick: r = !0,
+  closeOnEsc: C = !0,
+  className: k,
+  contentClassName: v,
+  backdropClassName: x,
+  style: P,
+  openDelay: y = 200,
+  closeDelay: R = 200,
+  zIndex: c = 1,
+  popoverContentComponent: F = z
+}) => {
+  const [E, S] = Y(g), a = h ?? E, l = b ?? S, j = Z(() => {
+    r && l(!1);
+  }, [r, l]), { context: e, refs: p, floatingStyles: w } = q({
+    placement: t,
+    open: a,
+    onOpenChange: l,
+    whileElementsMounted: J,
+    middleware: [
+      B(n),
+      G({
+        crossAxis: t.includes("-"),
+        fallbackAxisSideDirection: t.includes("start") ? "start" : "end",
+        padding: n
+      }),
+      I({ padding: n })
+    ]
+  }), A = L(e, {
+    enabled: s === "click"
+  }), D = Q(e, {
+    enabled: s === "hover",
+    delay: {
+      open: y,
+      close: R
+    }
+  }), M = T(e, {
+    escapeKey: C,
+    outsidePress: !1
+  }), N = V(e), d = W([A, D, M, N]), O = o.ref, U = X([p.setReference, O]), H = _(
+    o,
+    d.getReferenceProps({
+      ...o.props,
+      ref: U,
+      "data-state": e.open ? "open" : "closed"
+    })
+  );
+  return /* @__PURE__ */ f(K, { children: [
+    H,
+    a && /* @__PURE__ */ f($, { children: [
+      s !== "hover" && r && /* @__PURE__ */ i(
+        m,
+        {
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          display: "block",
+          backgroundColor: "transparent",
+          onClick: j,
+          zIndex: c,
+          className: x
+        }
+      ),
+      /* @__PURE__ */ i(
+        m,
+        {
+          absolute: !0,
+          zIndex: c,
+          className: k,
+          ref: p.setFloating,
+          style: { ...w, ...P },
+          ...d.getFloatingProps(),
+          children: /* @__PURE__ */ i(F, { className: v, children: u })
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  le as Popover
+};

package/dist/components/shared/Popover/PopoverContent/PopoverContent.d.ts

@@ -2,4 +2,3 @@ import { FC } from 'react';
 import { BoxProps } from '../../../builders/Box';
 export type PopoverContentProps = BoxProps;
 export declare const PopoverContent: FC<PopoverContentProps>;
-//# sourceMappingURL=PopoverContent.d.ts.map

package/dist/components/shared/Popover/PopoverContent/PopoverContent.js

@@ -0,0 +1,32 @@
+import { jsx as s } from "react/jsx-runtime";
+import { cx as a, css as c, keyframes as m } from "@emotion/css";
+import { Box as n } from "../../../builders/Box/Box.js";
+import { theme as i } from "../../../../utils/theme/index.js";
+const { color: o, cornerRadius: p } = i, f = m`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`, d = c({
+  animation: `${f} 0.2s ease-out`,
+  boxShadow: `0 4px 20px 0 ${o.effect.shadowS}`
+}), b = ({
+  children: r,
+  className: t,
+  ...e
+}) => /* @__PURE__ */ s(
+  n,
+  {
+    relative: !0,
+    backgroundColor: o.fill.bgPrimary,
+    borderRadius: p.md,
+    className: a(d, t),
+    ...e,
+    children: r
+  }
+);
+export {
+  b as PopoverContent
+};

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

@@ -1,2 +1 @@
 export { PopoverContent, type PopoverContentProps } from './PopoverContent';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,2 +1 @@
 export { Popover, type PopoverPlacement, type PopoverProps, type PopoverTrigger, } from './Popover';
-//# sourceMappingURL=index.d.ts.map

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

@@ -298,4 +298,3 @@ export interface SkeletonProps {
  * @see {@link SkeletonAnimation} для типов анимации
  */
 export declare const Skeleton: FC<SkeletonProps>;
-//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/shared/Skeleton/Skeleton.js

@@ -0,0 +1,144 @@
+import { jsx as o, Fragment as v } from "react/jsx-runtime";
+import { cx as x, css as t } from "@emotion/css";
+import { Box as l } from "../../builders/Box/Box.js";
+import { theme as S } from "../../../utils/theme/index.js";
+const { color: A, cornerRadius: e, spacing: X } = S, k = {
+  xs: { width: 16, height: 16 },
+  sm: { width: 24, height: 24 },
+  md: { width: 32, height: 32 },
+  lg: { width: 40, height: 40 },
+  xl: { width: 48, height: 48 }
+}, T = {
+  zero: e.zero,
+  xs: e.xs,
+  sm: e.sm,
+  md: e.md,
+  lg: e.lg,
+  xl: e.xl,
+  "2xl": e["2xl"],
+  "3xl": e["3xl"],
+  "4xl": e["4xl"],
+  "5xl": e["5xl"],
+  "6xl": e["6xl"],
+  "full-round": e.fullRound,
+  circular: "50%"
+}, w = t({
+  backgroundColor: A.status.neutralTint,
+  borderRadius: e.sm,
+  position: "relative",
+  overflow: "hidden",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)",
+    transform: "translateX(-100%)"
+  }
+}), z = t({
+  animation: "skeleton-pulse 1.5s ease-in-out infinite",
+  "@keyframes skeleton-pulse": {
+    "0%": {
+      opacity: 1
+    },
+    "50%": {
+      opacity: 0.4
+    },
+    "100%": {
+      opacity: 1
+    }
+  }
+}), M = t({
+  "&::before": {
+    animation: "skeleton-wave 1.6s linear infinite"
+  },
+  "@keyframes skeleton-wave": {
+    "0%": {
+      transform: "translateX(-100%)"
+    },
+    "50%": {
+      transform: "translateX(100%)"
+    },
+    "100%": {
+      transform: "translateX(100%)"
+    }
+  }
+}), b = (r, n) => {
+  if (n !== void 0)
+    return t({
+      borderRadius: T[n]
+    });
+  switch (r) {
+    case "circular":
+      return t({
+        borderRadius: "50%"
+      });
+    case "text":
+      return t({
+        borderRadius: e.xs
+      });
+    default:
+      return t({
+        borderRadius: e.sm
+      });
+  }
+}, y = (r) => {
+  switch (r) {
+    case "pulse":
+      return z;
+    case "wave":
+      return M;
+    default:
+      return "";
+  }
+}, N = ({
+  width: r,
+  height: n,
+  variant: s = "rectangular",
+  size: i = "md",
+  animation: c = "wave",
+  lines: a = 1,
+  className: u,
+  lineClassName: R,
+  children: m,
+  loading: d = !0,
+  borderRadius: f
+}) => {
+  if (!d && m)
+    return /* @__PURE__ */ o(v, { children: m });
+  if (!d)
+    return null;
+  const h = r || k[i].width, g = n || k[i].height;
+  return s === "text" && a > 1 ? /* @__PURE__ */ o(l, { gap: X.sm, className: u, children: Array.from({ length: a }, (j, p) => /* @__PURE__ */ o(
+    l,
+    {
+      className: x(
+        w,
+        b(s, f),
+        y(c),
+        R
+      ),
+      w: p === a - 1 ? "70%" : h,
+      h: g
+    },
+    p
+  )) }) : /* @__PURE__ */ o(
+    l,
+    {
+      className: x(
+        w,
+        b(s, f),
+        y(c),
+        u
+      ),
+      w: h,
+      h: g
+    }
+  );
+};
+N.displayName = "Skeleton";
+export {
+  N as Skeleton
+};

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

@@ -1,3 +1,2 @@
 export type { SkeletonProps } from './Skeleton';
 export { Skeleton } from './Skeleton';
-//# sourceMappingURL=index.d.ts.map

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

@@ -54,4 +54,3 @@ export interface TagProps {
  * <Tag label="Тег пользователя" size="lg" avatar={<img src="avatar.jpg" alt="Аватар" />} />
  */
 export declare const Tag: import('react').ForwardRefExoticComponent<TagProps & import('react').RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Tag.d.ts.map

package/dist/components/shared/Tag/Tag.js

@@ -0,0 +1,156 @@
+import { jsxs as $, jsx as o } from "react/jsx-runtime";
+import { css as x, cx as w } from "@emotion/css";
+import { forwardRef as j, useRef as k, useMemo as B } from "react";
+import M from "../../../assets/svg/shared/close-outline.svg.js";
+import { theme as O } from "../../../utils/theme/index.js";
+import { Box as m } from "../../builders/Box/Box.js";
+import { Ripple as S } from "../../builders/Ripple/Ripple.js";
+import { Text as h } from "../../builders/Text/Text.js";
+const { color: t, cornerRadius: I, spacing: e } = O, u = {
+  sm: {
+    h: 28,
+    p: `${e.xs} ${e.sm}`,
+    text: "body-2"
+  },
+  md: {
+    h: 32,
+    p: `6px ${e.md}`,
+    text: "body-2"
+  },
+  lg: {
+    h: 40,
+    p: `${e.sm} ${e.lg}`,
+    text: "body-1"
+  }
+}, P = j(
+  ({
+    label: i,
+    color: s = "primary",
+    size: c = "md",
+    onClick: l,
+    onDelete: g,
+    avatar: f,
+    icon: d,
+    disabled: n,
+    className: v,
+    labelClassName: y,
+    avatarClassName: b,
+    iconClassName: T,
+    deleteButtonClassName: N
+  }, a) => {
+    const R = k(null), p = B(() => {
+      switch (s) {
+        case "primary":
+          return {
+            bg: t.status.neutralTintLow,
+            color: t.text.primary
+          };
+        case "accent":
+          return {
+            bg: t.status.accentTintLow,
+            color: t.text.accent
+          };
+        case "warning":
+          return {
+            bg: t.status.warningTintLow,
+            color: t.text.warning
+          };
+        case "positive":
+          return {
+            bg: t.status.positiveTintLow,
+            color: t.text.positive
+          };
+        case "negative":
+          return {
+            bg: t.status.negativeTintLow,
+            color: t.text.negative
+          };
+        case "transfer":
+          return {
+            bg: "var(--status-transfer-tint-low)",
+            color: "var(--text-transfer)"
+          };
+        default:
+          return {
+            bg: t.status.neutralTintLow,
+            color: t.text.primary
+          };
+      }
+    }, [s]), L = x({
+      cursor: n ? "not-allowed" : l ? "pointer" : "default",
+      opacity: n ? 0.5 : 1,
+      userSelect: "none",
+      position: "relative",
+      transition: "background-color 0.2s, opacity 0.2s",
+      "&:hover": n ? void 0 : {
+        backgroundColor: p.bg
+      }
+    }), C = x({
+      display: "inline-flex",
+      cursor: "pointer",
+      opacity: 0.6,
+      "&:hover": { opacity: 1 }
+    });
+    return /* @__PURE__ */ $(
+      m,
+      {
+        ref: (r) => {
+          R.current = r, typeof a == "function" ? a(r) : a && (a.current = r);
+        },
+        row: !0,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: e.sm,
+        h: u[c].h,
+        p: u[c].p,
+        overflow: "hidden",
+        borderRadius: I.sm,
+        backgroundColor: p.bg,
+        color: p.color,
+        onClick: l,
+        className: w(L, v),
+        children: [
+          l && /* @__PURE__ */ o(S, {}),
+          f && /* @__PURE__ */ o(
+            m,
+            {
+              w: 20,
+              h: 20,
+              borderRadius: "50%",
+              overflow: "hidden",
+              className: b,
+              children: f
+            }
+          ),
+          d && /* @__PURE__ */ o(m, { className: T, children: d }),
+          typeof i == "string" ? /* @__PURE__ */ o(
+            h,
+            {
+              variant: u[c].text,
+              colorName: s,
+              textOverflow: "ellipsis",
+              overflow: "hidden",
+              className: y,
+              children: i
+            }
+          ) : i,
+          g && !n && /* @__PURE__ */ o(
+            h,
+            {
+              className: w(C, N),
+              colorName: s,
+              onClick: (r) => {
+                r.stopPropagation(), g(r);
+              },
+              children: /* @__PURE__ */ o(M, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+P.displayName = "Tag";
+export {
+  P as Tag
+};

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

@@ -1,3 +1,2 @@
 export type { TagColor, TagProps, TagSize } from './Tag';
 export { Tag } from './Tag';
-//# sourceMappingURL=index.d.ts.map

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

@@ -19,4 +19,3 @@ interface ToastProps {
 }
 export declare const Toast: import('react').ForwardRefExoticComponent<ToastProps & import('react').RefAttributes<HTMLDivElement>>;
 export {};
-//# sourceMappingURL=Toast.d.ts.map

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

@@ -36,4 +36,3 @@ export declare function useToast(): {
     dismiss: (id: string) => void;
     dismissAll: () => void;
 };
-//# sourceMappingURL=Toast.hooks.d.ts.map

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

@@ -0,0 +1,22 @@
+import { useSyncExternalStore as t } from "react";
+import { toastStore as o } from "./Toast.store.js";
+import { toast as s } from "./Toast.utils.js";
+function a() {
+  return {
+    toasts: t(
+      o.subscribe,
+      o.getSnapshot,
+      o.getSnapshot
+    ),
+    show: s.show,
+    success: s.success,
+    error: s.error,
+    warning: s.warning,
+    info: s.info,
+    dismiss: s.dismiss,
+    dismissAll: s.dismissAll
+  };
+}
+export {
+  a as useToast
+};