@dss-kit/ui-kit 0.3.0 → 0.3.2

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

@@ -0,0 +1,171 @@
+import { css as e } from "@emotion/css";
+import { typography as i } from "../../../styles/utils/typography.js";
+import { theme as a } from "../../../utils/theme/index.js";
+const { color: o, cornerRadius: r } = a, n = e({
+  borderColor: o.border.negativePrimary
+}), t = e({
+  cursor: "not-allowed",
+  opacity: 0.5
+}), l = e({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none",
+  color: "#9ca3af",
+  "& svg": {
+    width: 20,
+    height: 20,
+    transition: "transform 0.2s ease-in"
+  }
+}), s = e({
+  [`& .${l} svg`]: {
+    transform: "rotateX(180deg)"
+  }
+}), b = {
+  "select-container": e({
+    position: "relative",
+    display: "inline-block",
+    minWidth: 120,
+    "&.full-width": {
+      width: "100%"
+    }
+  }),
+  "full-width": e({
+    width: "100%"
+  }),
+  "select-input": e({
+    border: `1px solid ${o.border.neutralAlphaBasic}`,
+    borderRadius: r.md,
+    cursor: "pointer",
+    transition: "all 0.2s ease-in-out",
+    boxSizing: "border-box",
+    [`&:hover:not(.${t})`]: {
+      borderColor: o.border.neutralAlphaHigh,
+      backgroundColor: o.fill.neutralPrimaryHover
+    },
+    [`&:focus:not(.${t})`]: {
+      outline: "none",
+      borderColor: o.border.accentPrimary
+    },
+    [`&.${n}:focus`]: {
+      boxShadow: `0 0 0 3px ${o.effect.shadowS}`
+    }
+  }),
+  // Size variants
+  "size-xs": e({
+    minHeight: 32,
+    padding: "8px 8px 8px 12px",
+    borderRadius: r.sm
+  }),
+  "size-sm": e({
+    minHeight: 40,
+    padding: "10px 12px 10px 16px",
+    borderRadius: r.sm
+  }),
+  "size-md": e({
+    minHeight: 48,
+    padding: "14px 12px 14px 16px",
+    borderRadius: r.md
+  }),
+  // Background variants
+  "background-primary": e({
+    backgroundColor: o.fill.bgPrimary
+  }),
+  "background-secondary": e({
+    backgroundColor: o.fill.bgSecondary
+  }),
+  error: n,
+  disabled: t,
+  open: s,
+  "select-value": e({
+    flex: 1,
+    color: o.text.primary,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    alignSelf: "center",
+    ...i.common,
+    ...i.body2
+  }),
+  "select-value_xs": e({
+    ...i.common,
+    ...i.caption1
+  }),
+  hidden: e({ visibility: "hidden" }),
+  visible: e({ visibility: "visible" }),
+  "select-arrow": l,
+  "select-dropdown": e({
+    marginTop: 4,
+    backgroundColor: o.fill.bgPrimary,
+    borderRadius: r.md,
+    boxShadow: `0 4px 20px 0 ${o.effect.shadowS}`,
+    maxHeight: 224,
+    overflow: "hidden"
+  }),
+  "select-menu": e({
+    maxHeight: 224,
+    overflowY: "auto",
+    padding: "4px 0",
+    "&::-webkit-scrollbar": { width: 3 },
+    "&::-webkit-scrollbar-track": { background: "#f1f1f1" },
+    "&::-webkit-scrollbar-thumb": {
+      background: "#c1c1c1",
+      borderRadius: 3,
+      "&:hover": { background: o.fill.neutralSecondary }
+    }
+  }),
+  "select-menu-item": e({
+    cursor: "pointer",
+    transition: "background-color 0.15s ease-in-out",
+    color: o.text.primary,
+    padding: 10,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    "&:hover": {
+      backgroundColor: o.fill.neutralSecondaryHover
+    }
+  }),
+  "select-menu-item-first": e({
+    "&:hover": {
+      cursor: "auto",
+      backgroundColor: "inherit"
+    }
+  }),
+  selected: e({
+    backgroundColor: o.fill.neutralSecondary
+  }),
+  "overflow-tooltip-container": e({
+    width: "100%",
+    position: "relative"
+  }),
+  "overflow-tooltip-text": e({
+    width: "100%",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis"
+  }),
+  "empty-block": e({
+    textAlign: "center",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 14
+  })
+}, u = {
+  xs: e({
+    width: 16,
+    height: 16,
+    "& svg": {
+      width: 16,
+      height: 16,
+      transition: "transform 0.2s ease-in"
+    }
+  }),
+  sm: e({}),
+  md: e({})
+};
+export {
+  u as selectArrowSizesStyles,
+  b as styles
+};

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

@@ -103,4 +103,3 @@ interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
 }
 declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<SwitchRef>>;
 export { Switch };
-//# sourceMappingURL=Switch.d.ts.map

package/dist/components/controls/Switch/Switch.js

@@ -0,0 +1,140 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { cx as u } from "@emotion/css";
+import { forwardRef as B, useRef as D, useImperativeHandle as H, useCallback as T, useMemo as k } from "react";
+import q from "../../../assets/svg/switch/fire.svg.js";
+import A from "../../../assets/svg/switch/moon.svg.js";
+import { styles as r } from "./styles.js";
+import { useControlled as G } from "../../../utils/hooks/useControlled.js";
+import { Text as v } from "../../builders/Text/Text.js";
+import { Box as f } from "../../builders/Box/Box.js";
+import { theme as J } from "../../../utils/theme/index.js";
+const { spacing: b } = J, K = B(
+  ({
+    title: a,
+    text: i,
+    icon: w,
+    disabled: m,
+    onChange: c,
+    checked: x,
+    defaultValue: d,
+    className: S,
+    wrapperClassName: R,
+    switchContainerClassName: V,
+    trackClassName: j,
+    thumbClassName: C,
+    inputClassName: E,
+    labelsContainerClassName: F,
+    titleClassName: h,
+    textClassName: p,
+    size: I = "md",
+    variant: g = "accent",
+    reverse: M = !1,
+    w: W = "auto",
+    ..._
+  }, $) => {
+    const [o, n] = G(x, d), s = D(null);
+    H(
+      $,
+      () => ({
+        focus: () => {
+          s.current?.focus();
+        },
+        blur: () => {
+          s.current?.blur();
+        },
+        get checked() {
+          return o ?? !1;
+        },
+        setChecked: (e) => {
+          n(e), c?.(e);
+        },
+        toggle: () => {
+          const e = !o;
+          n(e), c?.(e);
+        },
+        isFocused: () => document.activeElement === s.current,
+        isDisabled: () => m ?? !1,
+        getInputElement: () => s.current,
+        checkValidity: () => s.current?.checkValidity() ?? !0,
+        reset: () => {
+          const e = d ?? !1;
+          n(e), c?.(e);
+        }
+      }),
+      [o, n, c, m, d]
+    );
+    const z = T(
+      (e) => {
+        n(e.target.checked), c?.(e.target.checked);
+      },
+      [c]
+    ), N = k(() => typeof a == "string" ? /* @__PURE__ */ t(
+      v,
+      {
+        variant: "body-1",
+        colorName: "primary",
+        fontWeight: "medium",
+        className: h,
+        children: a
+      }
+    ) : a, [a, h]), y = k(() => typeof i == "string" ? /* @__PURE__ */ t(
+      v,
+      {
+        variant: "body-2",
+        colorName: "secondary",
+        fontWeight: "regular",
+        className: p,
+        children: i
+      }
+    ) : i, [i, p]);
+    return /* @__PURE__ */ l(f, { row: !0, w: W, gap: b.sm, className: R, children: [
+      /* @__PURE__ */ l(
+        "label",
+        {
+          className: u(r.container, S, {
+            [r.disabled]: m,
+            [r.reverse]: M
+          }),
+          children: [
+            /* @__PURE__ */ l(
+              f,
+              {
+                className: u(
+                  r.switchContainer,
+                  r[`size_${I}`],
+                  r[`variant_${g}`],
+                  V
+                ),
+                children: [
+                  /* @__PURE__ */ t(
+                    "input",
+                    {
+                      ref: s,
+                      type: "checkbox",
+                      checked: o,
+                      hidden: !0,
+                      onChange: z,
+                      disabled: m,
+                      className: E,
+                      ..._
+                    }
+                  ),
+                  /* @__PURE__ */ t("div", { className: u(r.switch, j), children: /* @__PURE__ */ t("div", { className: u(r.thumb, C), children: g === "theme" && (o ? /* @__PURE__ */ t(A, { className: r.moon }) : /* @__PURE__ */ t(q, { className: r.fire })) }) })
+                ]
+              }
+            ),
+            (N || y) && /* @__PURE__ */ l(f, { gap: b.xs, className: F, children: [
+              N,
+              y
+            ] })
+          ]
+        }
+      ),
+      w
+    ] });
+  }
+);
+K.displayName = "Switch";
+export {
+  K as Switch
+};

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

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

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

@@ -14,4 +14,3 @@ export declare const styles: {
     moon: string;
     fire: string;
 };
-//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1,122 @@
+import { css as t } from "@emotion/css";
+import { theme as s } from "../../../utils/theme/index.js";
+const { color: i, cornerRadius: e, height: h, spacing: c, transition: r } = s, l = {
+  container: t({
+    width: "100%",
+    cursor: "pointer",
+    outline: "none",
+    userSelect: "none",
+    display: "flex",
+    justifyContent: "space-between",
+    gap: c.md,
+    "&.disabled": {
+      cursor: "not-allowed",
+      opacity: 0.5
+    },
+    "&.reverse": {
+      flexDirection: "row-reverse"
+    }
+  }),
+  disabled: t({
+    cursor: "not-allowed",
+    opacity: 0.5
+  }),
+  reverse: t({
+    flexDirection: "row-reverse"
+  }),
+  switchContainer: t({
+    "--width-switch-sm": "34px",
+    "--width-switch-md": "40px",
+    "--width-switch-lg": "52px",
+    "--size-thumb-sm": "18px",
+    "--size-thumb-md": "20px",
+    "--size-thumb-lg": "28px",
+    "--thumb-translate": "0px",
+    "&:has(input:checked)": {
+      "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - 4px)"
+    }
+  }),
+  // Variant classes — each handles both checked and unchecked states
+  variant_accent: t({
+    "&:has(input:not(:checked))": {
+      "--switch-bg-color": i.fill.bgTertiary,
+      "--thumb-bg-color": i.fill.bgPrimary
+    },
+    "&:has(input:checked)": {
+      "--switch-bg-color": i.fill.accentPrimary,
+      "--thumb-bg-color": i.fill.bgPrimary
+    }
+  }),
+  variant_secondary: t({
+    "&:has(input:not(:checked))": {
+      "--switch-bg-color": i.fill.bgTertiary,
+      "--thumb-bg-color": i.fill.bgPrimary
+    },
+    "&:has(input:checked)": {
+      "--switch-bg-color": i.fill.accentSecondary,
+      "--thumb-bg-color": i.fill.accentPrimary
+    }
+  }),
+  variant_theme: t({
+    "&:has(input:not(:checked))": {
+      "--switch-bg-color": i.fill.bgTertiary,
+      "--thumb-bg-color": i.fill.bgPrimary
+    },
+    "&:has(input:checked)": {
+      "--switch-bg-color": i.fill.bgSecondary,
+      "--thumb-bg-color": i.fill.bgTertiary
+    }
+  }),
+  // Size classes
+  size_sm: t({
+    "--switch-width": "var(--width-switch-sm)",
+    "--switch-height": h.switch.sm,
+    "--thumb-width": "var(--size-thumb-sm)",
+    "--thumb-height": "var(--size-thumb-sm)"
+  }),
+  size_md: t({
+    "--switch-width": "var(--width-switch-md)",
+    "--switch-height": h.switch.md,
+    "--thumb-width": "var(--size-thumb-md)",
+    "--thumb-height": "var(--size-thumb-md)"
+  }),
+  size_lg: t({
+    "--switch-width": "var(--width-switch-lg)",
+    "--switch-height": h.switch.lg,
+    "--thumb-width": "var(--size-thumb-lg)",
+    "--thumb-height": "var(--size-thumb-lg)"
+  }),
+  switch: t({
+    width: "var(--switch-width)",
+    height: "var(--switch-height)",
+    transition: r.general,
+    display: "flex",
+    alignItems: "center",
+    padding: 2,
+    backgroundColor: "var(--switch-bg-color)",
+    borderRadius: e.xl
+  }),
+  thumb: t({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 4,
+    transition: r.general,
+    transform: "translateX(var(--thumb-translate, 0))",
+    width: "var(--thumb-width)",
+    height: "var(--thumb-height)",
+    backgroundColor: "var(--thumb-bg-color)",
+    borderRadius: e.fullRound
+  }),
+  moon: t({
+    width: "100%",
+    height: "100%"
+  }),
+  fire: t({
+    width: "100%",
+    height: "100%"
+  })
+};
+export {
+  l as styles
+};

package/dist/components/controls/Tabs/TabItem/TabItem.d.ts

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

package/dist/components/controls/Tabs/TabItem/TabItem.js

@@ -0,0 +1,58 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cx as e, css as t } from "@emotion/css";
+import { forwardRef as d } from "react";
+import { Box as y } from "../../../builders/Box/Box.js";
+import { theme as x } from "../../../../utils/theme/index.js";
+import { Text as u } from "../../../builders/Text/Text.js";
+const { spacing: s } = x, h = t({
+  cursor: "pointer",
+  userSelect: "none"
+}), S = t({
+  cursor: "not-allowed",
+  opacity: 0.5
+}), b = t({
+  transition: "color 0.2s ease"
+}), T = d(
+  ({
+    label: i,
+    selected: o,
+    disabled: m,
+    fullWidth: n,
+    onClick: c,
+    className: a,
+    activeClassName: l,
+    textClassName: p
+  }, f) => /* @__PURE__ */ r(
+    y,
+    {
+      w: n ? "full" : void 0,
+      justifyContent: "center",
+      alignItems: "center",
+      ref: f,
+      py: s.md,
+      px: s.xl,
+      onClick: c,
+      className: e(
+        h,
+        {
+          [S]: m
+        },
+        a,
+        o && l
+      ),
+      children: /* @__PURE__ */ r(
+        u,
+        {
+          className: e(b, p),
+          colorName: o ? "primary" : "tertiary",
+          fontWeight: "medium",
+          variant: "body-2",
+          children: i
+        }
+      )
+    }
+  )
+);
+export {
+  T as TabItem
+};

package/dist/components/controls/Tabs/TabItem/index.d.ts

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

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

@@ -45,4 +45,3 @@ declare const Tabs: {
     displayName: string;
 };
 export { Tabs };
-//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/controls/Tabs/Tabs.js

@@ -0,0 +1,81 @@
+import { jsxs as C, jsx as c } from "react/jsx-runtime";
+import { cx as f, css as i } from "@emotion/css";
+import { useState as p, useRef as I, useEffect as S } from "react";
+import { TabItem as k } from "./TabItem/TabItem.js";
+import { Box as d } from "../../builders/Box/Box.js";
+import { theme as B } from "../../../utils/theme/index.js";
+const { color: m } = B, R = i({
+  borderBottom: `1px solid ${m.border.neutralAlphaBasic}`
+}), g = ({
+  value: a,
+  onChange: n,
+  options: s,
+  fullWidth: r = !1,
+  className: b,
+  tabClassName: u,
+  activeTabClassName: h,
+  tabTextClassName: x,
+  indicatorClassName: w
+}) => {
+  const [l, v] = p({
+    left: 0,
+    width: 0
+  }), o = I([]), N = (e) => (t) => {
+    o.current[e] = t;
+  };
+  S(() => {
+    const e = s.findIndex((y) => y.value === a), t = o.current[e];
+    t && v({
+      left: t.offsetLeft,
+      width: t.offsetWidth
+    });
+  }, [a, s]);
+  const T = (e, t = !1) => () => !t && n(e);
+  return /* @__PURE__ */ C(
+    d,
+    {
+      row: !0,
+      w: r ? "full" : "auto",
+      relative: !0,
+      className: f(R, b),
+      children: [
+        s.map((e, t) => /* @__PURE__ */ c(
+          k,
+          {
+            selected: a === e.value,
+            onClick: T(e.value, e.disabled),
+            ref: N(t),
+            label: e.label,
+            disabled: e.disabled,
+            fullWidth: r,
+            className: u,
+            activeClassName: h,
+            textClassName: x
+          },
+          e.value
+        )),
+        /* @__PURE__ */ c(
+          d,
+          {
+            h: 2,
+            w: l.width,
+            absolute: !0,
+            bottom: -1,
+            left: l.left,
+            backgroundColor: m.border.accentPrimary,
+            className: f(
+              i({
+                transition: "left 0.2s ease, width 0.2s ease"
+              }),
+              w
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+g.displayName = "Tabs";
+export {
+  g as Tabs
+};

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

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

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

@@ -9,4 +9,3 @@ export * from './SegmentControl';
 export * from './Select';
 export * from './Switch';
 export * from './Tabs';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts

@@ -3,4 +3,3 @@ export * from './charts';
 export * from './controls';
 export * from './navigation';
 export * from './shared';
-//# sourceMappingURL=index.d.ts.map

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

@@ -70,4 +70,3 @@ export declare const Breadcrumbs: React.FC<BreadcrumbsRootProps> & {
     Item: React.FC<BreadcrumbsItemProps>;
 };
 export {};
-//# sourceMappingURL=Breadcrumbs.d.ts.map

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

@@ -0,0 +1,45 @@
+import { jsx as n, jsxs as b } from "react/jsx-runtime";
+import { cx as a } from "@emotion/css";
+import p from "react";
+import g from "../../../assets/svg/shared/chevron-right.svg.js";
+import { styles as o } from "./styles.js";
+import { Text as v } from "../../builders/Text/Text.js";
+const d = ({ children: t, separator: i, className: c, itemClassName: e, separatorClassName: l }) => {
+  const r = p.Children.toArray(t).filter(
+    (m) => p.isValidElement(m)
+  ), s = i ?? /* @__PURE__ */ n(g, { className: a(o.separator, l) });
+  return /* @__PURE__ */ n("nav", { "aria-label": "breadcrumb", className: a(o.nav, c), children: r.map((m, u) => {
+    const f = u === r.length - 1;
+    return /* @__PURE__ */ b(v, { tag: "span", className: a(o.navItem, e), children: [
+      p.cloneElement(m, {
+        active: m.props.active ?? f
+      }),
+      !f && s
+    ] }, u);
+  }) });
+}, N = ({
+  children: t,
+  href: i,
+  active: c,
+  className: e,
+  activeClassName: l,
+  activeElement: r,
+  onClick: s
+}) => c ? r || /* @__PURE__ */ n(
+  v,
+  {
+    tag: "span",
+    variant: "body-2",
+    fontWeight: "medium",
+    colorName: "primary",
+    className: a(e, l),
+    onClick: s,
+    children: t
+  }
+) : /* @__PURE__ */ n("a", { href: i, className: a(o.link, e), onClick: s, children: t });
+d.Item = N;
+d.displayName = "Breadcrumbs";
+const j = d;
+export {
+  j as Breadcrumbs
+};

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

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

package/dist/components/navigation/Breadcrumbs/styles.d.ts

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