@dss-kit/ui-kit 0.3.0 → 0.3.2

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

@@ -0,0 +1,26 @@
+import { css as e } from "@emotion/css";
+import { theme as t } from "../../../utils/theme/index.js";
+const { spacing: o } = t, i = {
+  radio: e({
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    gap: o.md,
+    cursor: "pointer"
+  }),
+  disabled: e({
+    opacity: 0.5,
+    cursor: "not-allowed"
+  }),
+  sideRight: e({
+    flexDirection: "row-reverse",
+    justifyContent: "space-between"
+  }),
+  readOnly: e({
+    cursor: "auto"
+  }),
+  checked: e({})
+};
+export {
+  i as styles
+};

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

@@ -66,4 +66,3 @@ export interface SegmentControlProps<V extends string | number> {
  * ```
  */
 export declare function SegmentControl<V extends string | number>({ value, onChange, options, variant, fullWidth, className, buttonClassName, activeButtonClassName, disabledButtonClassName, iconContainerClassName, textClassName, separatorClassName, }: SegmentControlProps<V>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SegmentControl.d.ts.map

package/dist/components/controls/SegmentControl/SegmentControl.js

@@ -0,0 +1,90 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { cx as l } from "@emotion/css";
+import C from "react";
+import { styles as e } from "./styles.js";
+import { Box as i } from "../../builders/Box/Box.js";
+import { theme as R } from "../../../utils/theme/index.js";
+import { Text as j } from "../../builders/Text/Text.js";
+import { Ripple as k } from "../../builders/Ripple/Ripple.js";
+const { color: m, cornerRadius: T, spacing: d } = R;
+function P({
+  value: u,
+  onChange: f,
+  options: b,
+  variant: n = "primary",
+  fullWidth: s = !1,
+  className: p,
+  buttonClassName: g,
+  activeButtonClassName: h,
+  disabledButtonClassName: y,
+  iconContainerClassName: x,
+  textClassName: N,
+  separatorClassName: v
+}) {
+  return /* @__PURE__ */ t(
+    i,
+    {
+      row: !0,
+      alignItems: "center",
+      borderRadius: T.md,
+      p: d.xs,
+      gap: d.md,
+      className: l(e[n], s && e["full-width"], p),
+      children: b.map((r) => {
+        const a = r.value === u, o = r.disabled, w = r.separatorAfter ?? !1;
+        return /* @__PURE__ */ c(C.Fragment, { children: [
+          /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              disabled: o,
+              className: l(
+                e.button,
+                s && e["full-width"],
+                a && e["button-active"],
+                a && e[`button-${n}`],
+                o && e["button-disabled"],
+                g,
+                a && h,
+                o && y
+              ),
+              onClick: () => !o && f(r.value),
+              children: [
+                r.icon && /* @__PURE__ */ t(
+                  i,
+                  {
+                    alignItems: "center",
+                    justifyContent: "center",
+                    className: l(e["icon-container"], x),
+                    children: r.icon
+                  }
+                ),
+                r.label && /* @__PURE__ */ t(
+                  j,
+                  {
+                    colorName: a ? "primary" : "tertiary",
+                    className: N,
+                    children: r.label
+                  }
+                ),
+                !o && /* @__PURE__ */ t(k, { color: m.fill.bgOverlayPrimary })
+              ]
+            }
+          ),
+          w && /* @__PURE__ */ t(
+            i,
+            {
+              w: 1,
+              h: 24,
+              backgroundColor: m.fill.bgTertiary,
+              className: v
+            }
+          )
+        ] }, r.value);
+      })
+    }
+  );
+}
+export {
+  P as SegmentControl
+};

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

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

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

@@ -9,4 +9,3 @@ export declare const styles: {
     "full-width": string;
     "icon-container": string;
 };
-//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1,60 @@
+import { css as o } from "@emotion/css";
+import { theme as e } from "../../../utils/theme/index.js";
+const { color: r } = e, t = o({
+  border: `1px solid ${r.border.neutralAlphaBasic}`
+}), n = o({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}), l = {
+  primary: o({
+    background: r.fill.bgPrimary,
+    border: `1px solid ${r.border.neutralAlphaBasic}`
+  }),
+  secondary: o({
+    background: r.fill.bgSecondary,
+    border: `1px solid ${r.border.neutralAlphaBasic}`
+  }),
+  button: o({
+    cursor: "pointer",
+    border: "1px solid transparent",
+    borderRadius: 8,
+    padding: "8px 12px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    transition: "all 0.15s ease",
+    position: "relative",
+    overflow: "hidden",
+    background: "none",
+    [`&:hover:not(.${t})`]: {
+      background: r.fill.neutralPrimaryHover
+    },
+    [`& .${n} svg`]: {
+      color: r.icon.tertiary
+    },
+    "&:disabled": {
+      cursor: "not-allowed",
+      opacity: 0.5
+    }
+  }),
+  "button-active": t,
+  "button-primary": o({
+    background: r.fill.bgSecondary
+  }),
+  "button-secondary": o({
+    background: r.fill.bgPrimary
+  }),
+  "button-disabled": o({
+    opacity: 0.5,
+    cursor: "not-allowed"
+  }),
+  "full-width": o({
+    width: "100%"
+  }),
+  "icon-container": n
+};
+export {
+  l as styles
+};

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

@@ -213,4 +213,3 @@ export type SelectProps<I, V> = {
  */
 export declare function Select<I, V extends string | number>({ value, onChange, multiple, returnedValue, renderItem, renderInputItem, renderSingleInputItem, renderMultipleInputItem, renderDropdownItem, placeholder, items, fullWidth, size, showDefaultItem, disabled, label, firstItem, lastItem, observer, emptyText, onBlur, prompt, error, errorText, dropdownMaxWidth, dropdownMinWidth, minWidth, width, background, dropdownClassName, className, triggerClassName, menuClassName, itemClassName, labelClassName, promptClassName, errorClassName, }: SelectProps<I, V>): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=Select.d.ts.map

package/dist/components/controls/Select/Select.js

@@ -0,0 +1,382 @@
+import { jsx as t, jsxs as h, Fragment as ye } from "react/jsx-runtime";
+import { cx as f } from "@emotion/css";
+import { useFloating as xe, autoUpdate as we, offset as be, flip as ve, shift as ke, size as Ne } from "@floating-ui/react";
+import { motion as Se, AnimatePresence as Ce } from "framer-motion";
+import { useState as Pe, useMemo as W, useCallback as H, useEffect as Ee } from "react";
+import Me from "../../../assets/svg/shared/chevron-down.svg.js";
+import Oe from "../../../assets/svg/shared/empty-box.svg.js";
+import { styles as n, selectArrowSizesStyles as Ve } from "./styles.js";
+import { useControlled as Ae } from "../../../utils/hooks/useControlled.js";
+import { Checkbox as De } from "../Checkbox/Checkbox.js";
+import { Tag as We } from "../../shared/Tag/Tag.js";
+import { Portal as ze } from "../../builders/Portal/Portal.js";
+import { Box as i } from "../../builders/Box/Box.js";
+import { Text as d } from "../../builders/Text/Text.js";
+import { Ripple as Be } from "../../builders/Ripple/Ripple.js";
+function Ye({
+  value: J,
+  onChange: g,
+  multiple: a = !1,
+  returnedValue: C,
+  renderItem: l,
+  renderInputItem: y,
+  renderSingleInputItem: z,
+  renderMultipleInputItem: B,
+  renderDropdownItem: u,
+  placeholder: x,
+  items: w = [],
+  fullWidth: K,
+  size: m = "md",
+  showDefaultItem: L,
+  disabled: P,
+  label: E,
+  firstItem: R,
+  lastItem: j,
+  observer: Q,
+  emptyText: X,
+  onBlur: Y,
+  prompt: M,
+  error: O,
+  errorText: F,
+  dropdownMaxWidth: T = 400,
+  dropdownMinWidth: Z = 120,
+  minWidth: I = 120,
+  width: _,
+  background: ee = "secondary",
+  dropdownClassName: te,
+  className: oe,
+  triggerClassName: ne,
+  menuClassName: re,
+  itemClassName: b,
+  labelClassName: ie,
+  promptClassName: se,
+  errorClassName: ae
+}) {
+  const [v, k] = Ae(
+    J,
+    a ? [] : null
+  ), [V, U] = Pe(!1), { refs: $, floatingStyles: ce } = xe({
+    open: V,
+    // fixed-стратегия не зависит от скролла предков и проще контролируется.
+    strategy: "fixed",
+    middleware: [
+      // Лёгкий отступ, чтобы поповер не прилипал к контролу.
+      be(4),
+      // flip и shift удерживают поповер в зоне видимости, подстраивая оси.
+      ve({ crossAxis: !0, fallbackAxisSideDirection: "start" }),
+      ke({ crossAxis: !0, padding: 8 }),
+      // sizeMiddleware синхронизирует ширину и высоту с reference/viewport.
+      Ne({
+        apply({
+          availableHeight: e,
+          availableWidth: o,
+          elements: r,
+          rects: c
+        }) {
+          const p = Math.min(
+            typeof o == "number" ? o - 64 : T,
+            // 32px отступ от краев
+            T
+            // настраиваемая максимальная ширина
+          ), D = c.reference.width, ge = Math.max(D, Z);
+          Object.assign(r.floating.style, {
+            maxHeight: typeof e == "number" ? `${e}px` : "auto",
+            maxWidth: `${p}px`,
+            minWidth: `${ge}px`,
+            width: "max-content"
+            // Позволяет расширяться под содержимое
+          });
+        }
+      })
+    ],
+    // autoUpdate следит за изменениями размера/позиции и пересчитывает геометрию.
+    whileElementsMounted: we
+  }), s = W(
+    () => a ? v || [] : v != null ? [v] : [],
+    [v, a]
+  ), N = H(
+    (e) => C ? C(e) : e,
+    [C]
+  ), S = W(() => {
+    const e = /* @__PURE__ */ new Map();
+    return w.forEach((o) => {
+      e.set(N(o), o);
+    }), e;
+  }, [w, N]), le = !w.length && !O, q = W(
+    () => s.map((e) => S.get(e)).filter((e) => !!e),
+    [S, s]
+  );
+  Ee(() => {
+    process.env.NODE_ENV !== "production" && l && !u && console.warn(
+      "[Select] `renderItem` deprecated, use `renderDropdownItem` instead."
+    );
+  }, [u, l]);
+  const fe = H(
+    (e, o) => u ? u(e, o) : l ? l(e) : String(e),
+    [u, l]
+  ), A = () => {
+    U(!1), Y?.();
+  }, de = (e) => {
+    const o = N(e);
+    if (a) {
+      const r = s.includes(o) ? s.filter((c) => c !== o) : [...s, o];
+      k(r), g?.(r);
+    } else
+      k(o), g?.(o), A();
+  }, pe = (e) => {
+    if (!a) return;
+    const o = s.filter((r) => r !== e);
+    k(o), g?.(o);
+  }, ue = () => {
+    const e = a ? [] : null;
+    k(e), g?.(e), a || A();
+  }, G = () => typeof x == "string" ? /* @__PURE__ */ t(
+    d,
+    {
+      variant: m === "xs" ? "caption-1" : "body-2",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      colorName: "tertiary",
+      children: x ?? "Select..."
+    }
+  ) : x, me = () => {
+    if (!s.length)
+      return G();
+    if (a)
+      return B ? B(q) : y ? y({
+        mode: "multiple",
+        selectedItems: q
+      }) : /* @__PURE__ */ t(i, { flexWrap: "wrap", row: !0, gap: 10, children: s.map((r) => {
+        const c = S.get(r);
+        return c ? /* @__PURE__ */ t(
+          We,
+          {
+            size: "sm",
+            label: l ? l(c) : String(r),
+            onDelete: (p) => {
+              p.stopPropagation(), pe(r);
+            }
+          },
+          r
+        ) : null;
+      }) });
+    const e = S.get(s[0]) ?? null;
+    if (!e) return G();
+    if (z)
+      return z(e);
+    if (y)
+      return y({
+        mode: "single",
+        selectedItem: e
+      });
+    const o = l ? l(e) : String(s[0]);
+    return typeof o == "string" ? /* @__PURE__ */ t(
+      d,
+      {
+        variant: m === "xs" ? "caption-1" : "body-2",
+        tag: "p",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        children: o
+      }
+    ) : /* @__PURE__ */ t(ye, { children: o });
+  }, he = V && /* @__PURE__ */ t(ze, { children: /* @__PURE__ */ t(
+    i,
+    {
+      row: !0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      position: "fixed",
+      center: !0,
+      flex: 1,
+      onClick: A,
+      display: "block",
+      backgroundColor: "transparent",
+      zIndex: 1,
+      children: /* @__PURE__ */ t(
+        Se.div,
+        {
+          ref: $.setFloating,
+          className: f(n["select-dropdown"], te),
+          initial: { height: 0, opacity: 0 },
+          animate: { height: "auto", opacity: 1 },
+          exit: { height: 0, opacity: 0 },
+          transition: { duration: 0.25, ease: "easeInOut" },
+          style: {
+            ...ce,
+            zIndex: 1
+          },
+          onMouseDown: (e) => e.stopPropagation(),
+          onClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ h("ul", { className: f(n["select-menu"], re), children: [
+            L && !a && /* @__PURE__ */ t(
+              i,
+              {
+                className: f(n["select-menu-item"], b),
+                role: "option",
+                onClick: ue,
+                children: /* @__PURE__ */ t(d, { variant: "body-2", colorName: "tertiary", children: x })
+              }
+            ),
+            R && /* @__PURE__ */ t(
+              i,
+              {
+                className: f(
+                  n["select-menu-item"],
+                  n["select-menu-item-first"],
+                  b
+                ),
+                children: R
+              }
+            ),
+            le && /* @__PURE__ */ h(i, { className: n["empty-block"], children: [
+              /* @__PURE__ */ t(i, { w: 20, h: 20, children: /* @__PURE__ */ t(Oe, {}) }),
+              /* @__PURE__ */ t(d, { variant: "body-2", children: X ?? "There is nothing yet" })
+            ] }),
+            w.map((e, o) => {
+              const r = N(e), c = s.includes(r), p = fe(e, {
+                item: e,
+                selected: c,
+                index: o
+              }), D = typeof p == "string";
+              return /* @__PURE__ */ h(
+                i,
+                {
+                  row: !0,
+                  gap: 10,
+                  alignItems: "center",
+                  className: f(
+                    n["select-menu-item"],
+                    {
+                      [n.selected]: c
+                    },
+                    b
+                  ),
+                  role: "option",
+                  relative: !0,
+                  onClick: () => de(e),
+                  children: [
+                    a && /* @__PURE__ */ t(De, { size: "sm", checked: c }),
+                    D ? /* @__PURE__ */ t(
+                      d,
+                      {
+                        variant: "body-2",
+                        tag: "p",
+                        wordBreak: "break-all",
+                        whiteSpace: "break-spaces",
+                        children: p
+                      }
+                    ) : p,
+                    /* @__PURE__ */ t(Be, {})
+                  ]
+                },
+                r
+              );
+            }),
+            Q,
+            j && /* @__PURE__ */ t(
+              i,
+              {
+                className: f(
+                  n["select-menu-item"],
+                  n["select-menu-item-first"],
+                  b
+                ),
+                children: j
+              }
+            )
+          ] })
+        },
+        "dropdown"
+      )
+    }
+  ) });
+  return /* @__PURE__ */ h(
+    i,
+    {
+      relative: !0,
+      display: "inline-block",
+      minWidth: I,
+      w: _ || (K ? "full" : "auto"),
+      onMouseDown: (e) => e.stopPropagation(),
+      onClick: (e) => e.stopPropagation(),
+      className: oe,
+      children: [
+        typeof E == "string" ? /* @__PURE__ */ t(
+          d,
+          {
+            variant: "body-2",
+            colorName: "tertiary",
+            fontWeight: "regular",
+            mb: m === "sm" ? 4 : 8,
+            className: ie,
+            children: E
+          }
+        ) : E,
+        /* @__PURE__ */ h(
+          i,
+          {
+            ref: $.setReference,
+            row: !0,
+            gap: 10,
+            tabIndex: P ? -1 : 0,
+            role: "button",
+            alignItems: "flex-start",
+            "aria-haspopup": "listbox",
+            relative: !0,
+            w: "100%",
+            className: f(
+              n["select-input"],
+              n[`size-${m}`],
+              n[`background-${ee}`],
+              {
+                [n.error]: O,
+                [n.disabled]: P,
+                [n.open]: V
+              },
+              ne
+            ),
+            onClick: () => !P && U((e) => !e),
+            children: [
+              /* @__PURE__ */ t(i, { className: f(n["select-value"]), children: me() }),
+              /* @__PURE__ */ t(
+                i,
+                {
+                  className: f(n["select-arrow"], Ve[m]),
+                  children: /* @__PURE__ */ t(Me, {})
+                }
+              )
+            ]
+          }
+        ),
+        typeof M == "string" ? /* @__PURE__ */ t(
+          d,
+          {
+            variant: "caption-1",
+            colorName: "tertiary",
+            mt: 4,
+            className: se,
+            children: M
+          }
+        ) : M,
+        O && F && /* @__PURE__ */ t(
+          d,
+          {
+            tag: "p",
+            colorName: "negative",
+            variant: "body-2",
+            mt: 5,
+            className: ae,
+            children: F
+          }
+        ),
+        /* @__PURE__ */ t(Ce, { children: he })
+      ]
+    }
+  );
+}
+export {
+  Ye as Select
+};

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

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

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

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