@dss-kit/ui-kit 0.3.0 → 0.3.1

package/dist/components/navigation/Breadcrumbs/styles.js

@@ -0,0 +1,29 @@
+import { css as e } from "@emotion/css";
+import { typography as o } from "../../../styles/utils/typography.js";
+import { theme as r } from "../../../utils/theme/index.js";
+const { color: t } = r, l = {
+  link: e({
+    ...o.body2,
+    color: t.text.tertiary,
+    textDecoration: "none",
+    transition: "color 0.2s ease",
+    "&:hover": {
+      textDecoration: "underline"
+    }
+  }),
+  separator: e({
+    color: t.icon.tertiary
+  }),
+  nav: e({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap"
+  }),
+  navItem: e({
+    display: "inline-flex",
+    alignItems: "center"
+  })
+};
+export {
+  l as styles
+};

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

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

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

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

package/dist/components/shared/Avatar/Avatar.js

@@ -0,0 +1,147 @@
+import { jsx as v } from "react/jsx-runtime";
+import { css as x, cx as z } from "@emotion/css";
+import { forwardRef as u, useMemo as r } from "react";
+import { theme as b } from "../../../utils/theme/index.js";
+import { Box as h } from "../../builders/Box/Box.js";
+const { color: i, cornerRadius: o, height: t, transition: d } = b, S = {
+  primary: {
+    bg: i.fill.accentTint,
+    text: i.text.accent,
+    icon: i.icon.accent
+  },
+  secondary: {
+    bg: i.fill.neutralTint,
+    text: i.text.secondary,
+    icon: i.icon.tertiary
+  },
+  negative: {
+    bg: i.fill.negativeTint,
+    text: i.text.negative,
+    icon: i.icon.negative
+  },
+  positive: {
+    bg: i.fill.positiveTint,
+    text: i.text.positive,
+    icon: i.icon.positive
+  },
+  warning: {
+    bg: i.fill.warningTint,
+    text: i.text.warning,
+    icon: i.icon.warning
+  },
+  neutral: {
+    bg: i.fill.neutralTint,
+    text: i.text.tertiary,
+    icon: i.icon.tertiary
+  },
+  transfer: {
+    bg: "var(--fill-transfer-tint)",
+    text: "var(--text-transfer)",
+    icon: "var(--icon-transfer)"
+  },
+  custom: {
+    bg: i.fill.accentTint,
+    text: i.text.accent,
+    icon: i.icon.accent
+  }
+}, p = {
+  "2xs": {
+    size: t.avatar["2xs"],
+    borderRadius: o.xs,
+    iconSize: t.icon["2xs"],
+    fontSize: 10,
+    fontWeight: "var(--fw-medium)"
+  },
+  xs: {
+    size: t.avatar.xs,
+    borderRadius: o.sm,
+    iconSize: t.icon.xs,
+    fontSize: 12,
+    fontWeight: "var(--fw-medium)"
+  },
+  sm: {
+    size: t.avatar.sm,
+    borderRadius: o.sm,
+    iconSize: t.icon.xs,
+    fontSize: 14,
+    fontWeight: "var(--fw-medium)"
+  },
+  md: {
+    size: t.avatar.md,
+    borderRadius: o.sm,
+    iconSize: t.icon.sm,
+    fontSize: 14,
+    fontWeight: "var(--fw-medium)"
+  },
+  lg: {
+    size: t.avatar.lg,
+    borderRadius: o.md,
+    iconSize: t.icon.md,
+    fontSize: 16,
+    fontWeight: "var(--fw-semibold)"
+  },
+  xl: {
+    size: t.avatar.xl,
+    borderRadius: o.md,
+    iconSize: t.icon.md,
+    fontSize: 16,
+    fontWeight: "var(--fw-semibold)"
+  },
+  "2xl": {
+    size: t.avatar["2xl"],
+    borderRadius: o.md,
+    iconSize: t.icon.md,
+    fontSize: 18,
+    fontWeight: "var(--fw-semibold)"
+  },
+  custom: {
+    size: t.avatar.md,
+    borderRadius: o.sm,
+    iconSize: t.icon.sm,
+    fontSize: 14,
+    fontWeight: "var(--fw-medium)"
+  }
+}, w = u(
+  ({ children: m, color: a = "primary", size: s = "md", fullRound: c = !1, className: f }, l) => {
+    const n = r(() => S[a], [a]), e = r(() => p[s], [s]), g = r(() => x({
+      width: e.size,
+      height: e.size,
+      borderRadius: c ? "var(--corner-full-round)" : e.borderRadius,
+      backgroundColor: n.bg,
+      color: n.text,
+      fontSize: e.fontSize,
+      fontWeight: e.fontWeight,
+      lineHeight: 1,
+      transition: d.general,
+      "& svg": {
+        width: e.iconSize,
+        height: e.iconSize,
+        color: n.icon,
+        transition: d.general
+      },
+      "& img": {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      },
+      "&:has(img)": {
+        backgroundColor: "transparent",
+        border: `1px solid ${i.border.neutralAlphaLow}`
+      }
+    }), [n, e, c]);
+    return /* @__PURE__ */ v(
+      h,
+      {
+        ref: l,
+        center: !0,
+        overflow: "hidden",
+        className: z(g, f),
+        children: m
+      }
+    );
+  }
+);
+w.displayName = "Avatar";
+export {
+  w as Avatar
+};

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

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

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

@@ -21,4 +21,3 @@ export interface BadgeProps {
     deleteButtonClassName?: string;
 }
 export declare const Badge: FC<BadgeProps>;
-//# sourceMappingURL=Badge.d.ts.map

package/dist/components/shared/Badge/Badge.js

@@ -0,0 +1,159 @@
+import { jsxs as C, jsx as a } from "react/jsx-runtime";
+import { cx as v, css as u } from "@emotion/css";
+import k from "../../../assets/svg/shared/close-outline.svg.js";
+import { Box as B } from "../../builders/Box/Box.js";
+import { theme as L } from "../../../utils/theme/index.js";
+import { Ripple as $ } from "../../builders/Ripple/Ripple.js";
+import { Text as w } from "../../builders/Text/Text.js";
+const { color: r, cornerRadius: g, spacing: l } = L, b = {
+  neutral: {
+    border: r.border.neutralAlphaLow,
+    bg: r.status.neutralTint,
+    color: r.text.secondary,
+    colorName: "secondary"
+  },
+  accent: {
+    border: r.border.accentSecondary,
+    bg: r.status.accentTintLow,
+    color: r.text.accent,
+    colorName: "accent"
+  },
+  warning: {
+    border: r.border.warningSecondary,
+    bg: r.status.warningTintLow,
+    color: r.text.warning,
+    colorName: "warning"
+  },
+  positive: {
+    border: r.border.positiveSecondary,
+    bg: r.status.positiveTintLow,
+    color: r.text.positive,
+    colorName: "positive"
+  },
+  negative: {
+    border: r.border.negativeSecondary,
+    bg: r.status.negativeTintLow,
+    color: r.text.negative,
+    colorName: "negative"
+  },
+  transfer: {
+    border: "var(--border-transfer-secondary)",
+    bg: "var(--status-transfer-tint-low)",
+    color: "var(--text-transfer)",
+    colorName: "transfer"
+  }
+}, i = {
+  sm: {
+    h: 24,
+    text: "caption-1",
+    corner: g.xs,
+    p: `6px ${l.sm}`
+  },
+  md: {
+    h: 32,
+    text: "body-2",
+    corner: g.sm,
+    p: `6px ${l.md}`
+  },
+  lg: {
+    h: 40,
+    text: "body-2",
+    corner: g.md,
+    p: `6px ${l.lg}`
+  }
+}, R = (d, n, o, p) => {
+  const t = b[n];
+  let e = t.bg, s = "none";
+  const c = t.color;
+  switch (d) {
+    case "outline":
+      e = "transparent", s = `1px solid ${t.border}`;
+      break;
+    case "clear":
+      e = "transparent";
+      break;
+    default:
+      e = t.bg;
+      break;
+  }
+  return u({
+    cursor: o ? "not-allowed" : p ? "pointer" : "default",
+    opacity: o ? 0.5 : 1,
+    userSelect: "none",
+    position: "relative",
+    transition: "background-color 0.2s, opacity 0.2s",
+    backgroundColor: e,
+    color: c,
+    border: s
+  });
+}, j = u({
+  display: "inline-flex",
+  cursor: "pointer",
+  opacity: 0.6,
+  "&:hover": { opacity: 1 }
+}), y = u({
+  display: "inline-flex",
+  alignItems: "center",
+  color: "inherit"
+}), I = ({
+  label: d,
+  color: n = "neutral",
+  size: o = "md",
+  variant: p = "filled",
+  width: t,
+  leftElement: e,
+  rightElement: s,
+  disabled: c,
+  onClick: m,
+  onDelete: x,
+  className: N,
+  labelClassName: h,
+  deleteButtonClassName: S
+}) => {
+  const T = R(p, n, c, m);
+  return /* @__PURE__ */ C(
+    B,
+    {
+      row: !0,
+      alignItems: "center",
+      gap: l.sm,
+      p: i[o].p,
+      h: i[o].h,
+      w: t,
+      overflow: "hidden",
+      borderRadius: i[o].corner,
+      onClick: m,
+      className: v(T, N),
+      children: [
+        m && /* @__PURE__ */ a($, {}),
+        e && /* @__PURE__ */ a("span", { className: y, children: e }),
+        /* @__PURE__ */ a(
+          w,
+          {
+            variant: i[o].text,
+            colorName: b[n].colorName,
+            textOverflow: "ellipsis",
+            className: h,
+            children: d
+          }
+        ),
+        s && /* @__PURE__ */ a("span", { className: y, children: s }),
+        x && !c && /* @__PURE__ */ a(
+          w,
+          {
+            className: v(j, S),
+            colorName: b[n].colorName,
+            onClick: (f) => {
+              f.stopPropagation(), x(f);
+            },
+            children: /* @__PURE__ */ a(k, {})
+          }
+        )
+      ]
+    }
+  );
+};
+I.displayName = "Badge";
+export {
+  I as Badge
+};

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

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

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

@@ -36,4 +36,3 @@ export interface HintProps {
 }
 export declare const Hint: React.FC<HintProps>;
 export {};
-//# sourceMappingURL=Hint.d.ts.map

package/dist/components/shared/Hint/Hint.js

@@ -0,0 +1,70 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import t from "classnames";
+import y from "../../../assets/svg/hint/check-glass-check-01.svg.js";
+import e from "../../../assets/svg/hint/check-glass-info.svg.js";
+import x from "../../../assets/svg/hint/check-glass-x-02.svg.js";
+import C from "../../../assets/svg/shared/asterisk.svg.js";
+import { styles as a, sizeStyles as b, variantStyles as u } from "./styles.js";
+import { Text as d } from "../../builders/Text/Text.js";
+const G = {
+  negative: /* @__PURE__ */ s(x, {}),
+  positive: /* @__PURE__ */ s(y, {}),
+  accent: /* @__PURE__ */ s(e, {}),
+  warning: /* @__PURE__ */ s(e, {}),
+  transfer: /* @__PURE__ */ s(e, {}),
+  neutral: /* @__PURE__ */ s(C, {})
+}, q = ({
+  title: i,
+  subtitle: n,
+  color: o = "warning",
+  variant: p = "soft",
+  size: r = "md",
+  icon: f,
+  disabled: c = !1,
+  className: v,
+  iconClassName: h,
+  contentClassName: g,
+  titleClassName: N,
+  subtitleClassName: S,
+  style: k
+}) => {
+  const m = f || G[o];
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: t(
+        a.hint,
+        b[r],
+        u[p][o],
+        c && a.disabled,
+        v
+      ),
+      style: k,
+      "aria-disabled": c,
+      children: [
+        m && /* @__PURE__ */ s("span", { className: t(a.icon, h), children: m }),
+        /* @__PURE__ */ l("div", { className: t(a.content, g), children: [
+          i && /* @__PURE__ */ s(
+            d,
+            {
+              className: t(a.title, N),
+              variant: r === "md" ? "body-1" : "caption-2",
+              children: i
+            }
+          ),
+          n && /* @__PURE__ */ s(
+            d,
+            {
+              className: t(a.subtitle, S),
+              variant: r === "md" ? "body-2" : "caption-1",
+              children: n
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  q as Hint
+};

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

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

package/dist/components/shared/Hint/styles.d.ts

@@ -28,4 +28,3 @@ export declare const sizeStyles: {
     md: string;
     sm: string;
 };
-//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1,106 @@
+import { css as e } from "@emotion/css";
+import { theme as i } from "../../../utils/theme/index.js";
+const { color: t, cornerRadius: o, spacing: n } = i, s = {
+  hint: e({
+    display: "flex",
+    alignItems: "flex-start",
+    gap: n.md,
+    padding: n.lg,
+    minHeight: 48,
+    width: "100%",
+    borderRadius: o.md,
+    transition: "background 0.2s, color 0.2s"
+  }),
+  icon: e({
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "& svg": { width: 24, height: 24 }
+  }),
+  content: e({
+    display: "flex",
+    flexDirection: "column",
+    gap: n.xs
+  }),
+  title: e({
+    verticalAlign: "middle",
+    color: "inherit"
+  }),
+  subtitle: e({
+    verticalAlign: "middle",
+    opacity: 0.8,
+    color: "inherit"
+  }),
+  disabled: e({
+    opacity: 0.5,
+    pointerEvents: "none"
+  })
+}, c = {
+  solid: {
+    warning: e({
+      background: t.status.warning,
+      color: t.text.inverse
+    }),
+    negative: e({
+      background: t.status.negative,
+      color: t.text.inverse
+    }),
+    positive: e({
+      background: t.status.positive,
+      color: t.text.inverse
+    }),
+    accent: e({
+      background: t.status.accent,
+      color: t.text.inverse
+    }),
+    neutral: e({
+      background: t.status.neutral,
+      color: t.text.inverse
+    }),
+    transfer: e({
+      background: t.status.transfer,
+      color: t.text.inverse
+    })
+  },
+  soft: {
+    warning: e({
+      background: t.status.warningTintLow,
+      color: t.text.warning
+    }),
+    negative: e({
+      background: t.status.negativeTintLow,
+      color: t.text.negative
+    }),
+    positive: e({
+      background: t.status.positiveTintLow,
+      color: t.text.positive
+    }),
+    accent: e({
+      background: t.status.accentTintLow,
+      color: t.text.accent
+    }),
+    neutral: e({
+      background: t.status.neutralTintLow,
+      color: t.text.tertiary
+    }),
+    transfer: e({
+      background: t.status.transferTintLow,
+      color: t.text.transfer
+    })
+  }
+}, l = {
+  md: e({
+    minHeight: 48,
+    padding: n.lg
+  }),
+  sm: e({
+    minHeight: 32,
+    padding: n.md
+  })
+};
+export {
+  l as sizeStyles,
+  s as styles,
+  c as variantStyles
+};

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

@@ -7,4 +7,3 @@ export interface MarkdownTextProps {
     emptyState?: ReactNode;
 }
 export declare function MarkdownText({ markdown, className, emptyStateClassName, emptyState, }: MarkdownTextProps): number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=MarkdownText.d.ts.map

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

@@ -0,0 +1,70 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cx as m } from "@emotion/css";
+import { $convertFromMarkdownString as l } from "@lexical/markdown";
+import { LexicalComposer as d } from "@lexical/react/LexicalComposer";
+import { ContentEditable as f } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary as c } from "@lexical/react/LexicalErrorBoundary";
+import { RichTextPlugin as p } from "@lexical/react/LexicalRichTextPlugin";
+import { useMemo as s } from "react";
+import { EDITOR_TRANSFORMERS as u } from "../../controls/MarkdownTextEditor/transformers/index.js";
+import { markdownTextStyle as x } from "./MarkdownText.styles.js";
+import { Text as w } from "../../builders/Text/Text.js";
+import { EditorStateContext as E } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
+import { getEditorConfig as k } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
+function F({
+  markdown: t,
+  className: i,
+  emptyStateClassName: n,
+  emptyState: e = null
+}) {
+  const r = t.trim(), a = s(
+    () => ({
+      isEditable: !1,
+      isPreviewMode: !0,
+      setPreviewMode: () => {
+      },
+      markdownText: r
+    }),
+    [r]
+  );
+  return r ? /* @__PURE__ */ o(E.Provider, { value: a, children: /* @__PURE__ */ o(
+    d,
+    {
+      initialConfig: {
+        ...k(),
+        editable: !1,
+        namespace: "ui-kit-markdown-text-viewer",
+        editorState: () => {
+          l(r, u);
+        }
+      },
+      children: /* @__PURE__ */ o(
+        p,
+        {
+          contentEditable: /* @__PURE__ */ o(
+            f,
+            {
+              className: m(x, i),
+              "aria-placeholder": "markdown text",
+              placeholder: () => null
+            }
+          ),
+          placeholder: null,
+          ErrorBoundary: c
+        }
+      )
+    },
+    r
+  ) }) : typeof e == "string" ? /* @__PURE__ */ o(
+    w,
+    {
+      variant: "body-2",
+      colorName: "tertiary",
+      className: n,
+      children: e
+    }
+  ) : e;
+}
+export {
+  F as MarkdownText
+};

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

@@ -1,2 +1 @@
 export declare const markdownTextStyle: string;
-//# sourceMappingURL=MarkdownText.styles.d.ts.map