@dss-kit/ui-kit 0.3.0 → 0.3.1

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

@@ -0,0 +1,106 @@
+import { css as o } from "@emotion/css";
+import { theme as d } from "../../../utils/theme/index.js";
+const { color: t, cornerRadius: r, height: n, transition: i } = d, v = o({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  borderRadius: 16,
+  height: 48,
+  padding: "0 16px",
+  cursor: "pointer",
+  fontSize: 16,
+  fontWeight: 600,
+  overflow: "hidden",
+  transition: "all 0.2s ease",
+  gap: 8
+}), x = {
+  zero: r.zero,
+  xs: r.xs,
+  sm: r.sm,
+  md: r.md,
+  lg: r.lg,
+  xl: r.xl,
+  "2xl": r["2xl"],
+  "3xl": r["3xl"],
+  "4xl": r["4xl"],
+  "5xl": r["5xl"],
+  "6xl": r["6xl"],
+  "full-round": r.fullRound
+}, f = {
+  xs: n.button.xs,
+  sm: n.button.sm,
+  md: n.button.md,
+  lg: n.button.lg
+}, b = {
+  clear: o({
+    backgroundColor: "transparent",
+    border: "none"
+  }),
+  filled: o({
+    backgroundColor: t.fill.accentPrimary,
+    color: "white",
+    border: "none"
+  }),
+  outline: o({
+    backgroundColor: "transparent",
+    border: `1px solid ${t.border.accentPrimary}`
+  })
+}, h = (s, e, l, c) => {
+  if (c)
+    return o({
+      cursor: "not-allowed",
+      opacity: 0.7
+    });
+  const a = {
+    transition: i.general,
+    borderRadius: r.lg,
+    border: "none",
+    color: s === "filled" ? t.text.inverse : `var(--text-${e})`
+  };
+  switch (s) {
+    case "filled":
+      return o({
+        ...a,
+        backgroundColor: `var(--fill-${e}-${l})`,
+        ":hover": {
+          backgroundColor: `var(--fill-${e}-${l}-hover)`
+        },
+        ":active": {
+          backgroundColor: `var(--fill-${e}-${l}-hover)`
+        }
+      });
+    case "outline":
+      return o({
+        ...a,
+        backgroundColor: "transparent",
+        border: `1px solid var(--border-${e}-${l})`,
+        ":hover": {
+          backgroundColor: `var(--fill-${e}-secondary-hover)`
+        },
+        ":active": {
+          backgroundColor: `var(--fill-${e}-secondary-hover)`
+        }
+      });
+    case "clear":
+      return o({
+        ...a,
+        backgroundColor: "transparent",
+        ":hover": {
+          backgroundColor: `var(--fill-${e}-secondary-hover)`
+        },
+        ":active": {
+          backgroundColor: `var(--fill-${e}-secondary-hover)`
+        }
+      });
+    default:
+      return o(a);
+  }
+};
+export {
+  v as baseButton,
+  x as cornerRadiusValues,
+  h as getVariantStyles,
+  f as sizeValues,
+  b as typeStyles
+};

package/dist/components/controls/Button/types.d.ts

@@ -16,4 +16,3 @@ export type ButtonType = "clear" | "filled" | "outline";
  * - `warning`  — предупреждение
  */
 export type ButtonColor = AccentType | NeutralType | NegativeType | PositiveType | WarningType | TransferType;
-//# sourceMappingURL=types.d.ts.map

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

@@ -41,4 +41,3 @@ interface CheckboxProps {
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export {};
-//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/controls/Checkbox/Checkbox.js

@@ -0,0 +1,126 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { cx as h, css as y } from "@emotion/css";
+import { forwardRef as q, useState as A } from "react";
+import D from "../../../assets/svg/shared/check.svg.js";
+import E from "../../../assets/svg/shared/minus.svg.js";
+import { styles as e, checkboxVariantsStyles as F } from "./styles.js";
+import { Text as b } from "../../builders/Text/Text.js";
+import { Box as g } from "../../builders/Box/Box.js";
+const G = { sm: 20, md: 24 }, H = q(
+  ({
+    checked: m,
+    onChange: C,
+    disabled: o,
+    error: v,
+    indeterminate: l,
+    size: d = "md",
+    title: a,
+    titleColor: N,
+    subtitle: t,
+    subtitleColor: u = "secondary",
+    name: S,
+    required: w,
+    variant: _ = "primary",
+    flex: z,
+    readOnly: j,
+    className: M,
+    inputClassName: O,
+    boxClassName: R,
+    titleClassName: $,
+    subtitleClassName: B
+  }, I) => {
+    const [P, T] = A(!1), p = m !== void 0, x = p ? m : P, V = (s) => {
+      p || T(s.target.checked), C?.(s);
+    }, c = G[d], k = x || l, n = !!j && !o, f = o ? "not-allowed" : n ? "auto" : "pointer";
+    return /* @__PURE__ */ i(
+      "label",
+      {
+        className: h(
+          e.checkbox,
+          y({ flex: z, cursor: f }),
+          {
+            [e.disabled]: o
+          },
+          M
+        ),
+        children: [
+          /* @__PURE__ */ i(
+            g,
+            {
+              relative: !0,
+              display: "inline-flex",
+              style: {
+                "--checkbox-size": `${c}px`,
+                "--checkbox-size-double": `${c * 2}px`
+              },
+              children: [
+                /* @__PURE__ */ r(
+                  "input",
+                  {
+                    ref: I,
+                    type: "checkbox",
+                    checked: x,
+                    onChange: n ? void 0 : V,
+                    onClick: (s) => s.stopPropagation(),
+                    disabled: o,
+                    readOnly: n,
+                    name: S,
+                    required: w,
+                    className: h(
+                      e.checkbox__input,
+                      {
+                        [e.disabled]: o
+                      },
+                      y({ cursor: f }),
+                      O
+                    )
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: h(
+                      e.checkbox__box,
+                      F[_],
+                      {
+                        [e.disabled]: o,
+                        [e.error]: v,
+                        [e.checked]: k
+                      },
+                      R
+                    ),
+                    children: k && (l ? /* @__PURE__ */ r(E, { width: c * 0.75, height: c * 0.75 }) : /* @__PURE__ */ r(D, { width: c * 0.75, height: c * 0.75 }))
+                  }
+                )
+              ]
+            }
+          ),
+          (a || t) && /* @__PURE__ */ i(g, { gap: 4, children: [
+            a && /* @__PURE__ */ r(
+              b,
+              {
+                colorName: N,
+                variant: d === "sm" ? "body-2" : "body-1",
+                className: $,
+                children: a
+              }
+            ),
+            t && /* @__PURE__ */ r(
+              b,
+              {
+                variant: "body-2",
+                colorName: u,
+                className: B,
+                children: t
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+H.displayName = "Checkbox";
+export {
+  H as Checkbox
+};

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

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

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

@@ -10,4 +10,3 @@ export declare const checkboxVariantsStyles: {
     primary: string;
     secondary: string;
 };
-//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1,53 @@
+import { css as o } from "@emotion/css";
+import { theme as e } from "../../../utils/theme/index.js";
+const { color: r } = e, t = {
+  checkbox: o({
+    display: "inline-flex",
+    alignItems: "flex-start",
+    gap: 8,
+    userSelect: "none"
+  }),
+  disabled: o({
+    cursor: "not-allowed",
+    opacity: 0.5
+  }),
+  checkbox__input: o({
+    position: "absolute",
+    opacity: 0,
+    width: "var(--checkbox-size)",
+    height: "var(--checkbox-size)"
+  }),
+  checkbox__box: o({
+    width: "var(--checkbox-size)",
+    height: "var(--checkbox-size)",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 4,
+    border: `1px solid ${r.border.neutralAlphaHigh}`,
+    backgroundColor: r.fill.bgSecondary,
+    opacity: 1,
+    transition: "all 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    "& svg": {
+      color: r.border.accentPrimary
+    }
+  }),
+  checked: o({
+    borderColor: `${r.border.accentPrimary} !important`,
+    backgroundColor: `${r.fill.accentSecondary} !important`
+  }),
+  error: o({
+    borderColor: r.border.negativePrimary,
+    backgroundColor: r.fill.negativeSecondary
+  })
+}, a = {
+  primary: o({}),
+  secondary: o({
+    backgroundColor: "transparent"
+  })
+};
+export {
+  a as checkboxVariantsStyles,
+  t as styles
+};

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

@@ -1,3 +1,2 @@
 import { IIconButtonProps } from './IconButton.types';
 export declare function IconButton({ attr, children, className, type, color, size, ...props }: IIconButtonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=IconButton.d.ts.map

package/dist/components/controls/IconButton/IconButton.js

@@ -0,0 +1,35 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import p from "classnames";
+import { Ripple as c } from "../../builders/Ripple/Ripple.js";
+import { styles as a, sizeStyles as f, colorStyles as u } from "./styles.js";
+function j({
+  attr: o,
+  children: t,
+  className: r,
+  type: s = "button",
+  color: m = "primary",
+  size: e = "md",
+  ...i
+}) {
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      ...o,
+      ...i,
+      type: s,
+      className: p(
+        a,
+        f[e],
+        u[m],
+        r
+      ),
+      children: [
+        /* @__PURE__ */ n(c, {}),
+        t
+      ]
+    }
+  );
+}
+export {
+  j as IconButton
+};

package/dist/components/controls/IconButton/IconButton.types.d.ts

@@ -9,4 +9,3 @@ export interface IIconButtonProps extends IconButtonAttributes {
     color?: IconButtonColor;
     attr?: IconButtonRestAttributes;
 }
-//# sourceMappingURL=IconButton.types.d.ts.map

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

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

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

@@ -17,4 +17,3 @@ export declare const colorStyles: {
     "no-bg": string;
     custom: string;
 };
-//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1,124 @@
+import { css as r } from "@emotion/css";
+import { theme as o } from "../../../utils/theme/index.js";
+const c = r({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: o.transition.general,
+  position: "relative",
+  overflow: "hidden",
+  "& svg": {
+    transition: o.transition.general
+  },
+  "&:disabled": {
+    opacity: 0.5
+  }
+}), l = {
+  md: r({
+    minHeight: o.height.button.md,
+    minWidth: o.height.button.md,
+    borderRadius: o.cornerRadius.md,
+    "& svg, & img": {
+      width: o.height.icon.md,
+      height: o.height.icon.md
+    }
+  }),
+  sm: r({
+    minHeight: o.height.button.sm,
+    minWidth: o.height.button.sm,
+    borderRadius: o.cornerRadius.md,
+    "& svg, & img": {
+      width: o.height.icon.sm,
+      height: o.height.icon.sm
+    }
+  }),
+  xs: r({
+    minHeight: o.height.button.xs,
+    minWidth: o.height.button.xs,
+    borderRadius: o.cornerRadius.sm,
+    "& svg, & img": {
+      width: o.height.icon.sm,
+      height: o.height.icon.sm
+    }
+  }),
+  custom: r({})
+}, n = {
+  primary: r({
+    backgroundColor: o.color.fill.accentPrimary,
+    ":where(&) svg": { color: o.color.icon.primaryInverse },
+    "&:hover:not(:disabled), &:active:not(:disabled)": {
+      backgroundColor: o.color.fill.accentPrimaryHover,
+      ":where(&) svg": { color: o.color.icon.primaryInverse }
+    }
+  }),
+  secondary: r({
+    backgroundColor: o.color.fill.accentSecondary,
+    ":where(&) svg": { color: o.color.icon.primary },
+    "&:hover:not(:disabled), &:active:not(:disabled)": {
+      backgroundColor: o.color.fill.accentSecondaryHover,
+      ":where(&) svg": { color: o.color.icon.primaryHover }
+    }
+  }),
+  negative: r({
+    backgroundColor: o.color.fill.negativeSecondary,
+    ":where(&) svg": { color: o.color.icon.primary },
+    "&:hover:not(:disabled), &:active:not(:disabled)": {
+      backgroundColor: o.color.fill.negativeSecondaryHover,
+      ":where(&) svg": { color: o.color.icon.primaryHover }
+    }
+  }),
+  positive: r({
+    backgroundColor: o.color.fill.positiveSecondary,
+    ":where(&) svg": { color: o.color.icon.primary },
+    "&:hover:not(:disabled), &:active:not(:disabled)": {
+      backgroundColor: o.color.fill.positiveSecondaryHover,
+      ":where(&) svg": { color: o.color.icon.primaryHover }
+    }
+  }),
+  warning: r({
+    backgroundColor: o.color.fill.warningSecondary,
+    ":where(&) svg": { color: o.color.icon.primary },
+    "&:hover:not(:disabled), &:active:not(:disabled)": {
+      backgroundColor: o.color.fill.warningSecondaryHover,
+      ":where(&) svg": { color: o.color.icon.primaryHover }
+    }
+  }),
+  neutral: r({
+    backgroundColor: o.color.fill.neutralSecondary,
+    ":where(&) svg": { color: o.color.icon.primary },
+    "&:hover:not(:disabled), &:active:not(:disabled)": {
+      backgroundColor: o.color.fill.neutralSecondaryHover,
+      ":where(&) svg": { color: o.color.icon.primaryHover }
+    }
+  }),
+  transfer: r({
+    backgroundColor: o.color.fill.transferSecondary,
+    ":where(&) svg": { color: o.color.icon.primary },
+    "&:hover:not(:disabled), &:active:not(:disabled)": {
+      backgroundColor: o.color.fill.transferSecondaryHover,
+      ":where(&) svg": { color: o.color.icon.primaryHover }
+    }
+  }),
+  "neutral-white": r({
+    backgroundColor: o.color.fill.bgPrimary,
+    ":where(&) svg": { color: o.color.icon.primary },
+    "&:hover:not(:disabled), &:active:not(:disabled)": {
+      backgroundColor: o.color.fill.bgSecondary,
+      ":where(&) svg": { color: o.color.icon.primaryHover }
+    }
+  }),
+  "no-bg": r({
+    backgroundColor: "transparent",
+    ":where(&) svg": { color: o.color.icon.primary },
+    "&:hover:not(:disabled), &:active:not(:disabled)": {
+      backgroundColor: o.color.fill.bgSecondary,
+      ":where(&) svg": { color: o.color.icon.primaryHover }
+    }
+  }),
+  custom: r({})
+};
+export {
+  n as colorStyles,
+  l as sizeStyles,
+  c as styles
+};

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

@@ -100,4 +100,3 @@ export type InputProps = InputElementProps | TextareaElementProps;
  */
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export {};
-//# sourceMappingURL=Input.d.ts.map

package/dist/components/controls/Input/Input.js

@@ -0,0 +1,204 @@
+import { jsxs as v, jsx as n } from "react/jsx-runtime";
+import { cx as y } from "@emotion/css";
+import { useMergeRefs as L } from "@floating-ui/react";
+import { forwardRef as Q, useRef as N, useEffect as U, useMemo as X } from "react";
+import Y from "../../../assets/svg/shared/close-circle.svg.js";
+import { styles as t } from "./styles.js";
+import { useControlled as Z } from "../../../utils/hooks/useControlled.js";
+import { Box as o } from "../../builders/Box/Box.js";
+import { theme as ee } from "../../../utils/theme/index.js";
+import { Text as p } from "../../builders/Text/Text.js";
+const { spacing: k } = ee;
+function M(e) {
+  return {
+    ...new Event("input", { bubbles: !0 }),
+    target: e,
+    currentTarget: e
+  };
+}
+const te = Q((e, C) => {
+  const {
+    label: f,
+    prompt: g,
+    error: b,
+    errorText: w,
+    size: R = "md",
+    prefix: E,
+    suffix: _,
+    background: h = "primary",
+    showClearButton: j,
+    disabled: i,
+    value: d,
+    defaultValue: u,
+    className: I,
+    wrapperClassName: W,
+    labelClassName: A,
+    fieldContainerClassName: F,
+    promptClassName: H,
+    errorClassName: P,
+    textAlign: x = "left",
+    ...T
+  } = e, a = e.multiline === !0, $ = N(null), s = N(null), q = L([
+    $,
+    C
+  ]), D = L([
+    s,
+    C
+  ]), { current: z } = N(d !== void 0), [c, B] = Z(
+    typeof d == "string" || typeof d == "number" ? String(d) : void 0,
+    typeof u == "string" || typeof u == "number" ? String(u) : ""
+  ), S = (l) => {
+    if (B(l.target.value), a) {
+      const r = e.onChange;
+      r?.(l);
+    } else {
+      const r = e.onChange;
+      r?.(l);
+    }
+  };
+  U(() => {
+    a && e.autoResize && s.current && (s.current.style.height = "auto", s.current.style.height = `${s.current.scrollHeight}px`);
+  }, [c, a, e.autoResize]);
+  const G = () => {
+    if (B(""), !a) {
+      const r = $.current;
+      if (r) {
+        r.value = "";
+        const m = M(r), V = e.onChange;
+        V?.(m);
+      }
+      return;
+    }
+    const l = s.current;
+    if (l) {
+      l.value = "";
+      const r = M(l), m = e.onChange;
+      m?.(r);
+    }
+  }, J = () => {
+    if (a) {
+      const {
+        rows: V,
+        autoResize: ne,
+        onChange: re,
+        multiline: ae,
+        ...O
+      } = T;
+      return /* @__PURE__ */ n(
+        "textarea",
+        {
+          ref: D,
+          rows: e.rows ?? 3,
+          className: y(t.input, I, {
+            [t.disabled]: i,
+            [t[`input-text-align_${x}`]]: !!x
+          }),
+          disabled: i,
+          maxLength: e.maxLength,
+          ...O,
+          ...z ? { value: c } : { defaultValue: String(u ?? "") },
+          onChange: S
+        }
+      );
+    }
+    const {
+      onChange: l,
+      multiline: r,
+      ...m
+    } = T;
+    return /* @__PURE__ */ n(
+      "input",
+      {
+        ...m,
+        ref: q,
+        className: y(
+          t.input,
+          t[`input-text-size_${R}`],
+          I,
+          {
+            [t.disabled]: i,
+            [t[`input-text-align_${x}`]]: !!x
+          }
+        ),
+        disabled: i,
+        type: e.type ?? "text",
+        ...z ? { value: c } : { defaultValue: String(u ?? "") },
+        onChange: S
+      }
+    );
+  }, K = X(() => h === "white" ? t.primary : h === "gray" ? t.secondary : t[h], [h]);
+  return /* @__PURE__ */ v(o, { w: "full", gap: k.sm, className: W, children: [
+    typeof f == "string" ? /* @__PURE__ */ n(
+      p,
+      {
+        variant: "body-2",
+        fontWeight: "regular",
+        colorName: "tertiary",
+        className: A,
+        children: f
+      }
+    ) : f,
+    /* @__PURE__ */ v(
+      o,
+      {
+        row: !0,
+        alignItems: a ? "flex-start" : "center",
+        w: "full",
+        gap: k.md,
+        className: y(
+          t["input-container"],
+          K,
+          t[R],
+          {
+            [t.error]: b,
+            [t.disabled]: i,
+            [t.multiline]: a
+          },
+          F
+        ),
+        children: [
+          E && /* @__PURE__ */ n(o, { flex: "none", children: E }),
+          /* @__PURE__ */ n(o, { flex: "1", children: J() }),
+          j && c && !i && /* @__PURE__ */ n(o, { flex: "none", children: /* @__PURE__ */ n("span", { className: t["clear-button"], onClick: G, children: /* @__PURE__ */ n(Y, {}) }) }),
+          _ && /* @__PURE__ */ n(o, { flex: "none", children: _ })
+        ]
+      }
+    ),
+    (g || a) && /* @__PURE__ */ v(o, { row: !0, gap: 10, w: "full", children: [
+      typeof g == "string" ? /* @__PURE__ */ n(
+        p,
+        {
+          variant: "caption-1",
+          colorName: "tertiary",
+          className: H,
+          children: g
+        }
+      ) : g,
+      a && e.maxLength && /* @__PURE__ */ n(
+        p,
+        {
+          right: !0,
+          ml: "auto",
+          flex: "none",
+          variant: "caption-1",
+          colorName: "tertiary",
+          children: `${c.length}/${e.maxLength}`
+        }
+      )
+    ] }),
+    w && b && /* @__PURE__ */ n(
+      p,
+      {
+        variant: "body-2",
+        colorName: "negative",
+        fontWeight: "regular",
+        className: P,
+        children: w
+      }
+    )
+  ] });
+});
+te.displayName = "Input";
+export {
+  te as Input
+};