@dss-kit/ui-kit 0.3.0 → 0.3.2

package/dist/components/controls/MarkdownTextEditor/themes/styles.d.ts

@@ -6,4 +6,3 @@ export declare const styles: {
     h3: string;
     h4: string;
 };
-//# sourceMappingURL=styles.d.ts.map

package/dist/components/controls/MarkdownTextEditor/themes/styles.js

@@ -0,0 +1,25 @@
+import { css as e } from "@emotion/css";
+import { typography as o } from "../../../../styles/utils/typography.js";
+const a = {
+  text: e({
+    fontFamily: "Inter, sans-serif"
+  }),
+  paragraph: e({
+    ...o.body2
+  }),
+  h1: e({
+    ...o.headline1
+  }),
+  h2: e({
+    ...o.headline2
+  }),
+  h3: e({
+    ...o.headline3
+  }),
+  h4: e({
+    ...o.body2
+  })
+};
+export {
+  a as styles
+};

package/dist/components/controls/MarkdownTextEditor/transformers/index.d.ts

@@ -1,2 +1 @@
 export declare const EDITOR_TRANSFORMERS: import('@lexical/markdown').Transformer[];
-//# sourceMappingURL=index.d.ts.map

package/dist/components/controls/MarkdownTextEditor/transformers/index.js

@@ -0,0 +1,13 @@
+import { TRANSFORMERS as R } from "@lexical/markdown";
+import { TABLE_MARKDOWN_TRANSFORMER as O } from "./table.transformer.js";
+import { IMAGE_ROW_MARKDOWN_TRANSFORMER as o } from "../nodes/ImageRowNode/ImageRowNode.transformer.js";
+import { CUSTOM_LINK_NODE_TRANSFORMER as r } from "../nodes/CustomLinkNode/CustomLinkNode.transformer.js";
+const _ = [
+  O,
+  o,
+  r,
+  ...R
+];
+export {
+  _ as EDITOR_TRANSFORMERS
+};

package/dist/components/controls/MarkdownTextEditor/transformers/table.transformer.d.ts

@@ -1,3 +1,2 @@
 import { MultilineElementTransformer } from '@lexical/markdown';
 export declare const TABLE_MARKDOWN_TRANSFORMER: MultilineElementTransformer;
-//# sourceMappingURL=table.transformer.d.ts.map

package/dist/components/controls/MarkdownTextEditor/transformers/table.transformer.js

@@ -0,0 +1,51 @@
+import { TableNode as p, TableRowNode as T, TableCellNode as N, $createTableNode as u, $createTableRowNode as f, $createTableCellNode as b, TableCellHeaderStates as R } from "@lexical/table";
+import { $createTextNode as m } from "lexical";
+const h = /^\|(.+)\|$/, E = /^\|\s*:?-+:?\s*(\|\s*:?-+:?\s*)+\|$/, A = /^\|(.+)\|$/, g = {
+  type: "multiline-element",
+  dependencies: [p, T, N],
+  // from markdown
+  regExpStart: h,
+  handleImportAfterStartMatch({ lines: t, rootNode: i, startLineIndex: o }) {
+    const n = t[o + 1];
+    if (!E.test(n ?? ""))
+      return null;
+    const r = u();
+    let e = o;
+    for (; e < t.length && A.test(t[e]); ) {
+      if (e === o + 1) {
+        e++;
+        continue;
+      }
+      const c = f(), l = t[e].slice(1, -1).split("|").map((s) => s.trim()), a = e === o;
+      l.forEach((s) => {
+        const d = b(
+          a ? R.ROW : void 0
+        );
+        d.append(m(s)), c.append(d);
+      }), r.append(c), e++;
+    }
+    return i.append(r), [!0, e - 1];
+  },
+  replace() {
+    return !0;
+  },
+  // to markdown
+  export(t) {
+    if (!(t instanceof p))
+      return null;
+    const o = t.getChildren();
+    if (!o.length)
+      return "";
+    const n = [];
+    return o.forEach((r, e) => {
+      if (!(r instanceof T))
+        return;
+      const l = r.getChildren().map((a) => a instanceof N ? a.getTextContent().replace(/\n/g, " ").trim() : "");
+      n.push(`| ${l.join(" | ")} |`), e || n.push(`| ${l.map(() => "---").join(" | ")} |`);
+    }), n.join(`
+`);
+  }
+};
+export {
+  g as TABLE_MARKDOWN_TRANSFORMER
+};

package/dist/components/controls/OtpInput/OtpInput.d.ts

@@ -85,4 +85,3 @@ export declare const OtpInput: React.ForwardRefExoticComponent<BaseProps & {
     onComplete?: (value: string) => void;
 } & React.RefAttributes<OtpInputRef>>;
 export {};
-//# sourceMappingURL=OtpInput.d.ts.map

package/dist/components/controls/OtpInput/OtpInput.js

@@ -0,0 +1,251 @@
+import { jsxs as W, jsx as p } from "react/jsx-runtime";
+import { cx as F, css as sr } from "@emotion/css";
+import { motion as cr } from "framer-motion";
+import { forwardRef as nr, useState as ur, useRef as H, useEffect as ir, useCallback as C, useImperativeHandle as fr } from "react";
+import { styles as y } from "./styles.js";
+import { usePrevious as lr } from "./usePrevious.js";
+import { useControlled as mr } from "../../../utils/hooks/useControlled.js";
+import { Box as j } from "../../builders/Box/Box.js";
+import { theme as pr } from "../../../utils/theme/index.js";
+import { Text as V } from "../../builders/Text/Text.js";
+const { spacing: q } = pr, yr = nr(
+  ({
+    length: a = 6,
+    label: d,
+    prompt: k,
+    error: b,
+    errorText: _,
+    success: G,
+    disabled: i,
+    autoFocus: J,
+    center: M,
+    secure: Q,
+    loading: R,
+    background: T = "gray",
+    numeric: w = !0,
+    className: U,
+    inputsContainerClassName: X,
+    inputClassName: Y,
+    labelClassName: Z,
+    promptClassName: $,
+    errorClassName: P,
+    value: m,
+    defaultValue: x,
+    onChange: E,
+    onComplete: L
+  }, rr) => {
+    const A = typeof m == "string", z = A ? m : x, B = typeof z == "string" ? z.slice(0, a) : "", [K, O] = mr(
+      A ? m : void 0,
+      B
+    ), [s, f] = ur(() => {
+      const r = B.slice(0, a);
+      return Array.from({ length: a }, (e, t) => r[t] ?? "");
+    }), D = H(void 0), S = lr(m), c = H([]);
+    ir(() => {
+      if (!A) return;
+      const r = m ?? "";
+      if (r === S) return;
+      if (r === D.current) {
+        D.current = void 0;
+        return;
+      }
+      const e = r.slice(0, a);
+      f(Array.from({ length: a }, (t, o) => e[o] ?? ""));
+    }, [A, m, a, S]);
+    const n = C(
+      (r, e) => {
+        const t = r.slice(0, a);
+        e?.fromInternal && (D.current = t), O(t), E?.(t), t.length === a && L?.(t);
+      },
+      [a, E, L, O]
+    );
+    fr(
+      rr,
+      () => ({
+        focus: () => {
+          c.current[0]?.focus();
+        },
+        blur: () => {
+          c.current.forEach((r) => r?.blur());
+        },
+        get value() {
+          return K || "";
+        },
+        setValue: (r) => {
+          const e = r.slice(0, a);
+          f(Array.from({ length: a }, (t, o) => e[o] ?? "")), n(e, { fromInternal: !0 });
+        },
+        clear: () => {
+          f(Array.from({ length: a }, () => "")), n("", { fromInternal: !0 });
+        }
+      }),
+      [a, n, K]
+    );
+    const tr = C(
+      (r, e) => {
+        if (i) return;
+        let t = e;
+        if (w && (t = t.replace(/\D/g, "")), t.length > 1) {
+          const u = s.slice(0, r).join("") + t + s.slice(r + 1).join(""), g = Array.from({ length: a }, (I, or) => u[or] ?? "");
+          f(g), n(u, { fromInternal: !0 });
+          const h = Math.min(r + t.length, a - 1), v = c.current[h];
+          v?.focus(), v?.select();
+          return;
+        }
+        const o = s[r], l = [...s];
+        l[r] = t, f(l);
+        const N = l.join("");
+        if (n(N, { fromInternal: !0 }), !o && t && r < a - 1) {
+          const u = c.current[r + 1];
+          u?.focus(), u?.select();
+        }
+      },
+      [s, i, a, w, n]
+    ), er = C(
+      (r, e) => {
+        if (!i) {
+          if (e.key === "Backspace") {
+            e.preventDefault();
+            const t = c.current[r];
+            if (s[r]) {
+              const o = [...s];
+              o[r] = "", f(o), n(o.join(""), { fromInternal: !0 }), t?.focus();
+              return;
+            }
+            if (r > 0) {
+              const o = c.current[r - 1];
+              o?.focus(), o?.select();
+            }
+            return;
+          }
+          e.key === "ArrowLeft" && r > 0 && (e.preventDefault(), c.current[r - 1]?.focus()), e.key === "ArrowRight" && r < a - 1 && (e.preventDefault(), c.current[r + 1]?.focus());
+        }
+      },
+      [s, i, a, n]
+    ), ar = C(
+      (r, e) => {
+        if (i) return;
+        e.preventDefault();
+        let t = e.clipboardData.getData("text");
+        if (w && (t = t.replace(/\D/g, "")), !t) return;
+        const o = a - r, l = Math.min(t.length, o), N = t.slice(0, l), u = [...s];
+        for (let I = 0; I < l; I++)
+          u[r + I] = N[I] ?? "";
+        f(u);
+        const g = u.join("");
+        n(g, { fromInternal: !0 });
+        const h = Math.min(r + l - 1, a - 1), v = c.current[h];
+        v?.focus(), v?.select();
+      },
+      [s, i, a, w, n]
+    );
+    return /* @__PURE__ */ W(j, { w: "full", gap: q.sm, className: U, center: M, children: [
+      d && /* @__PURE__ */ p(
+        V,
+        {
+          variant: "body-2",
+          fontWeight: "regular",
+          colorName: "tertiary",
+          className: Z,
+          children: d
+        }
+      ),
+      /* @__PURE__ */ p(
+        j,
+        {
+          row: !0,
+          w: "full",
+          gap: q.sm,
+          center: M,
+          className: F(
+            {
+              [y.disabled]: i
+            },
+            X
+          ),
+          children: Array.from({ length: a }).map((r, e) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            /* @__PURE__ */ W(j, { relative: !0, display: "inline-block", children: [
+              /* @__PURE__ */ p(
+                "input",
+                {
+                  ref: (t) => {
+                    c.current[e] = t;
+                  },
+                  className: F(
+                    y.input,
+                    y[T],
+                    b && y.error,
+                    G && y.success,
+                    s[e] && sr({ caretColor: "transparent" }),
+                    Y
+                  ),
+                  inputMode: w ? "numeric" : "text",
+                  type: Q ? "password" : "text",
+                  maxLength: 1,
+                  autoFocus: J && e === 0,
+                  disabled: i || R,
+                  value: s[e],
+                  onChange: (t) => tr(e, t.target.value),
+                  onKeyDown: (t) => er(e, t),
+                  onPaste: (t) => ar(e, t)
+                }
+              ),
+              /* @__PURE__ */ p(
+                cr.span,
+                {
+                  className: y.glow,
+                  variants: wr,
+                  custom: e,
+                  initial: "idle",
+                  animate: R ? "wave" : "idle"
+                }
+              )
+            ] }, e)
+          ))
+        }
+      ),
+      k && /* @__PURE__ */ p(
+        V,
+        {
+          variant: "caption-1",
+          colorName: "tertiary",
+          className: $,
+          children: k
+        }
+      ),
+      _ && b && /* @__PURE__ */ p(
+        V,
+        {
+          variant: "body-2",
+          colorName: "negative",
+          fontWeight: "regular",
+          className: P,
+          children: _
+        }
+      )
+    ] });
+  }
+), wr = {
+  idle: {
+    opacity: 0,
+    scale: 1,
+    // без delay — мгновенное скрытие при переходе в idle
+    transition: { duration: 0.18 }
+  },
+  wave: (a = 0) => ({
+    // keyframes: вспышка opacity + небольшой scale для эффекта «волны»
+    opacity: [0, 0.2, 0],
+    scale: [1, 1.03, 1],
+    transition: {
+      duration: 1.5,
+      delay: a * 0.15,
+      repeat: 1 / 0,
+      ease: [0.42, 0, 0.58, 1]
+    }
+  })
+};
+yr.displayName = "OtpInput";
+export {
+  yr as OtpInput
+};

package/dist/components/controls/OtpInput/index.d.ts

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

package/dist/components/controls/OtpInput/styles.d.ts

@@ -7,4 +7,3 @@ export declare const styles: {
     gray: string;
     glow: string;
 };
-//# sourceMappingURL=styles.d.ts.map

package/dist/components/controls/OtpInput/styles.js

@@ -0,0 +1,59 @@
+import { css as o } from "@emotion/css";
+import { typography as e } from "../../../styles/utils/typography.js";
+import { theme as i } from "../../../utils/theme/index.js";
+const { color: r } = i, l = {
+  input: o({
+    ...e.common,
+    ...e.body1,
+    width: 48,
+    height: 48,
+    textAlign: "center",
+    borderRadius: 12,
+    border: `1px solid ${r.border.neutralAlphaBasic}`,
+    color: r.text.primary,
+    outline: "none",
+    transition: "border-color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease",
+    "&::placeholder": {
+      color: r.text.tertiary
+    },
+    "&:focus-visible": {
+      borderColor: r.border.accentPrimary,
+      boxShadow: `0 0 0 1px ${r.border.accentPrimary}`
+    },
+    "&:not(.disabled):hover": {
+      backgroundColor: r.fill.neutralPrimaryHover
+    },
+    "&:disabled": {
+      opacity: 0.6,
+      cursor: "not-allowed"
+    }
+  }),
+  error: o({
+    borderColor: r.border.negativePrimary
+  }),
+  success: o({
+    borderColor: r.border.positivePrimary
+  }),
+  disabled: o({
+    pointerEvents: "none",
+    opacity: 0.5
+  }),
+  white: o({
+    background: r.fill.bgPrimary
+  }),
+  gray: o({
+    background: r.fill.bgSecondary
+  }),
+  glow: o({
+    position: "absolute",
+    inset: 0,
+    borderRadius: 12,
+    pointerEvents: "none",
+    opacity: 0,
+    transformOrigin: "center",
+    background: r.fill.accentPrimary
+  })
+};
+export {
+  l as styles
+};

package/dist/components/controls/OtpInput/usePrevious.d.ts

@@ -1,2 +1 @@
 export declare function usePrevious<T>(value: T): T | undefined;
-//# sourceMappingURL=usePrevious.d.ts.map

package/dist/components/controls/OtpInput/usePrevious.js

@@ -0,0 +1,10 @@
+import { useRef as t, useEffect as o } from "react";
+function f(r) {
+  const e = t(void 0);
+  return o(() => {
+    e.current = r;
+  }, [r]), e.current;
+}
+export {
+  f as usePrevious
+};

package/dist/components/controls/RadioGroup/Radio.d.ts

@@ -100,4 +100,3 @@ export type RadioProps = {
  */
 declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLButtonElement>>;
 export { Radio };
-//# sourceMappingURL=Radio.d.ts.map

package/dist/components/controls/RadioGroup/Radio.js

@@ -0,0 +1,123 @@
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { cx as E } from "@emotion/css";
+import { forwardRef as F } from "react";
+import { useRadioGroupContext as H } from "./context.js";
+import { styles as t } from "./styles.js";
+import { useControlled as J } from "../../../utils/hooks/useControlled.js";
+import { theme as K } from "../../../utils/theme/index.js";
+import { Box as c } from "../../builders/Box/Box.js";
+import { Text as g } from "../../builders/Text/Text.js";
+const { color: o, cornerRadius: x } = K, R = {
+  sm: {
+    inner: 12,
+    outer: 20
+  },
+  md: {
+    inner: 16,
+    outer: 24
+  }
+}, Q = F(
+  ({
+    value: i,
+    children: v,
+    checked: s,
+    defaultChecked: C,
+    onChange: N,
+    disabled: k,
+    className: S,
+    description: m,
+    size: w,
+    side: z,
+    readOnly: B,
+    error: O,
+    outerCircleClassName: T,
+    innerCircleClassName: V,
+    labelContainerClassName: j,
+    labelClassName: G,
+    descriptionClassName: I
+  }, P) => {
+    const r = H(), u = !!r, f = s !== void 0, [A, D] = J(
+      s,
+      C
+    ), e = u ? r.value === i : f ? s : A, d = r?.disabled || k, l = w ?? r?.size ?? "md", L = z ?? r?.side ?? "left", b = B ?? r?.readOnly ?? !1, a = O ?? r?.error ?? !1, p = R[l].outer, y = R[l].inner, M = () => {
+      d || b || (u ? r.setValue?.(i) : (f || D(!e), N?.(!e)));
+    }, U = e && a ? o.fill.negativeTint : e ? o.fill.accentTint : o.fill.bgSecondary, W = e && a ? o.fill.negativePrimary : e ? o.fill.accentPrimary : void 0, q = e && a || a && !e ? o.border.negativeSecondary : o.border.neutralAlphaLow;
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: <нарочное допущение тк с button проще работать чем с input>
+      /* @__PURE__ */ h(
+        "button",
+        {
+          ref: P,
+          role: "radio",
+          type: "button",
+          "data-value": i,
+          "aria-checked": e,
+          "aria-disabled": d || void 0,
+          tabIndex: e ? 0 : -1,
+          className: E([
+            t.radio,
+            e && t.checked,
+            d && t.disabled,
+            L === "right" && t.sideRight,
+            b && t.readOnly,
+            S
+          ]),
+          onClick: M,
+          children: [
+            /* @__PURE__ */ n(
+              c,
+              {
+                w: p,
+                h: p,
+                backgroundColor: U,
+                borderWidth: e ? 0 : 1,
+                borderColor: q,
+                borderStyle: "solid",
+                center: !0,
+                borderRadius: x.fullRound,
+                className: T,
+                children: /* @__PURE__ */ n(
+                  c,
+                  {
+                    w: y,
+                    h: y,
+                    backgroundColor: W,
+                    borderRadius: x.fullRound,
+                    "aria-hidden": !0,
+                    className: V
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ h(c, { alignItems: "flex-start", className: j, children: [
+              /* @__PURE__ */ n(
+                g,
+                {
+                  variant: l === "sm" ? "body-2" : "body-1",
+                  tag: "span",
+                  left: !0,
+                  className: G,
+                  children: v
+                }
+              ),
+              m && /* @__PURE__ */ n(
+                g,
+                {
+                  tag: "span",
+                  variant: "body-2",
+                  colorName: "secondary",
+                  className: I,
+                  children: m
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    );
+  }
+);
+Q.displayName = "Radio";
+export {
+  Q as Radio
+};

package/dist/components/controls/RadioGroup/RadioGroup.d.ts

@@ -117,4 +117,3 @@ export type RadioGroupProps = {
 };
 declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 export { RadioGroup };
-//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/controls/RadioGroup/RadioGroup.js

@@ -0,0 +1,61 @@
+import { jsx as a, jsxs as _ } from "react/jsx-runtime";
+import o from "react";
+import { RadioGroupContext as k } from "./context.js";
+import { useControlled as w } from "../../../utils/hooks/useControlled.js";
+import { Box as c } from "../../builders/Box/Box.js";
+import { theme as B } from "../../../utils/theme/index.js";
+import { Text as H } from "../../builders/Text/Text.js";
+const { spacing: d } = B, I = o.forwardRef(
+  ({
+    label: e,
+    value: r,
+    defaultValue: f,
+    onChange: s,
+    children: p,
+    className: u,
+    error: i = !1,
+    disabled: v = !1,
+    readOnly: R = !1,
+    side: x = "left",
+    size: g = "md",
+    labelClassName: N,
+    optionsContainerClassName: h
+  }, y) => {
+    const [C, l] = w(
+      r,
+      f
+    ), t = r !== void 0, G = t ? r : C, j = o.useCallback(
+      (m) => {
+        t || l(m), s?.(m);
+      },
+      [t, s, l]
+    ), n = o.useRef(null);
+    return o.useImperativeHandle(
+      y,
+      () => n.current
+    ), /* @__PURE__ */ a(
+      k.Provider,
+      {
+        value: { value: G, readOnly: R, disabled: v, setValue: j, size: g, side: x, error: i },
+        children: /* @__PURE__ */ _(
+          c,
+          {
+            gap: d.sm,
+            ref: n,
+            role: "radiogroup",
+            "aria-invalid": i || void 0,
+            className: u,
+            children: [
+              typeof e == "string" ? /* @__PURE__ */ a(H, { colorName: "secondary", className: N, children: e }) : e,
+              /* @__PURE__ */ a(c, { gap: d.lg, className: h, children: p })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+I.displayName = "RadioGroup";
+export {
+  I as RadioGroup
+};

package/dist/components/controls/RadioGroup/context.d.ts

@@ -84,4 +84,3 @@ export declare const useRadioGroupContext: () => RadioGroupContextValue | null;
  *     если дизайнер не просит иного.
  * - Не добавляйте лишней логики в контекст — держите его максимально легковесным.
  */
-//# sourceMappingURL=context.d.ts.map

package/dist/components/controls/RadioGroup/context.js

@@ -0,0 +1,6 @@
+import t, { useContext as o } from "react";
+const e = t.createContext(null), r = () => o(e);
+export {
+  e as RadioGroupContext,
+  r as useRadioGroupContext
+};

package/dist/components/controls/RadioGroup/index.d.ts

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

package/dist/components/controls/RadioGroup/styles.d.ts

@@ -5,4 +5,3 @@ export declare const styles: {
     readOnly: string;
     checked: string;
 };
-//# sourceMappingURL=styles.d.ts.map