@dss-kit/ui-kit 0.3.9 → 1.0.0

package/dist/components/builders/Table/TablePagination/TablePagination.js

@@ -1,17 +1,17 @@
 import { jsxs as v, jsx as e } from "react/jsx-runtime";
 import { css as R, cx as G } from "@emotion/css";
-import { useRef as J, useState as K, useEffect as Q } from "react";
+import { useRef as H, useState as J, useEffect as K } from "react";
 import z from "../../../../assets/svg/table/chevron-left.svg.js";
-import B from "../../../../assets/svg/table/chevron-right.svg.js";
-import U from "../../../../assets/svg/table/dots.svg.js";
-import { getPageNumbers as X } from "./TablePagination.utils.js";
-import { Button as M } from "../../../controls/Button/Button.js";
-import { IconButton as j } from "../../../controls/IconButton/IconButton.js";
+import M from "../../../../assets/svg/table/chevron-right.svg.js";
+import Q from "../../../../assets/svg/table/dots.svg.js";
+import { getPageNumbers as U } from "./TablePagination.utils.js";
+import { Button as _ } from "../../../controls/Button/Button.js";
+import { IconButton as B } from "../../../controls/IconButton/IconButton.js";
 import { Box as r } from "../../Box/Box.js";
-import { Select as Y } from "../../../controls/Select/Select.js";
-import { theme as Z } from "../../../../utils/theme/index.js";
-import { Text as _ } from "../../Text/Text.js";
-const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
+import { Select as X } from "../../../controls/Select/Select.js";
+import { theme as Y } from "../../../../utils/theme/index.js";
+import { Text as Z } from "../../Text/Text.js";
+const { color: i, cornerRadius: tt, spacing: b } = Y, bt = ({
   pageIndex: o,
   pageSize: n,
   totalCount: a,
@@ -21,20 +21,20 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
   labels: d,
   pageSizeOptions: m = [10, 20, 50, 100],
   showPageSizeSelector: h = !0,
-  renderPageSizeSelectorDropdownItem: T = (u) => u.label,
-  renderPageSizeSelectorInputItem: V,
-  className: D,
+  renderPageSizeSelectorDropdownItem: L = (u) => u.label,
+  renderPageSizeSelectorInputItem: T,
+  className: V,
   itemClassName: x,
-  activeItemClassName: S,
-  pageSizeSelectorClassName: I
+  activeItemClassName: w,
+  pageSizeSelectorClassName: D
 }) => {
-  const { prev: u = "Previous", next: O = "Next" } = d ?? {}, w = J(null), [$, A] = K(0), y = Math.ceil(a / n), f = o > 0, g = o < y - 1;
-  Q(() => {
-    const t = w.current;
+  const { prev: u = "Previous", next: I = "Next" } = d ?? {}, S = H(null), [O, $] = J(0), y = Math.ceil(a / n), f = o > 0, g = o < y - 1;
+  K(() => {
+    const t = S.current;
     if (!t) return;
     const p = new ResizeObserver((W) => {
       for (const C of W)
-        A(C.contentRect.width);
+        $(C.contentRect.width);
     });
     return p.observe(t), () => {
       p.disconnect();
@@ -48,7 +48,7 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
       return 1;
     const F = Math.floor((k + 8) / 48);
     return Math.max(1, Math.min(10, F));
-  })($), H = X({
+  })(O), q = U({
     page: o + 1,
     count: y,
     maxVisiblePages: E
@@ -56,7 +56,7 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
     f && s(o - 1);
   }, P = () => {
     g && s(o + 1);
-  }, q = (t) => {
+  }, A = (t) => {
     c(Number(t));
   };
   return a === 0 ? null : /* @__PURE__ */ v(r, { flex: 1, row: !0, justifyContent: "space-between", children: [
@@ -67,10 +67,10 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
         row: !0,
         gap: b.sm,
         alignItems: "center",
-        className: D,
+        className: V,
         children: [
           /* @__PURE__ */ e(
-            M,
+            _,
             {
               width: "auto",
               size: "sm",
@@ -82,23 +82,23 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
             }
           ),
           /* @__PURE__ */ e(
-            L,
+            j,
             {
               className: x,
-              activeClassName: S,
+              activeClassName: w,
               children: o + 1
             }
           ),
           /* @__PURE__ */ e(
-            M,
+            _,
             {
               width: "auto",
               size: "sm",
               color: "neutral",
-              iconRight: /* @__PURE__ */ e(B, { width: 20, height: 20 }),
+              iconRight: /* @__PURE__ */ e(M, { width: 20, height: 20 }),
               disabled: !g,
               onClick: P,
-              children: O
+              children: I
             }
           )
         ]
@@ -106,14 +106,14 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
     ) : /* @__PURE__ */ v(
       r,
       {
-        ref: w,
+        ref: S,
         flex: 1,
         row: !0,
         overflow: "hidden",
         gap: b.sm,
         children: [
           /* @__PURE__ */ e(
-            j,
+            B,
             {
               onClick: N,
               disabled: !f,
@@ -122,34 +122,34 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
               children: /* @__PURE__ */ e(z, {})
             }
           ),
-          /* @__PURE__ */ e(r, { row: !0, gap: b.sm, children: H.map((t) => /* @__PURE__ */ e(
-            L,
+          /* @__PURE__ */ e(r, { row: !0, gap: b.sm, children: q.map((t) => /* @__PURE__ */ e(
+            j,
             {
               isDots: t === "start-dots" || t === "end-dots",
               isCurrentPage: t === o + 1,
               disabled: t === "start-dots" || t === "end-dots",
               onClick: () => s(t - 1),
               className: x,
-              activeClassName: S,
+              activeClassName: w,
               children: t
             },
             t
           )) }),
           /* @__PURE__ */ e(
-            j,
+            B,
             {
               color: "neutral",
               size: "sm",
               onClick: P,
               disabled: !g,
-              children: /* @__PURE__ */ e(B, {})
+              children: /* @__PURE__ */ e(M, {})
             }
           )
         ]
       }
     ),
-    h && /* @__PURE__ */ e(r, { alignItems: "flex-end", className: I, children: /* @__PURE__ */ e(
-      Y,
+    h && /* @__PURE__ */ e(r, { alignItems: "flex-end", className: D, children: /* @__PURE__ */ e(
+      X,
       {
         width: "fit-content",
         value: n.toString(),
@@ -159,13 +159,13 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
           label: t.toString()
         })),
         returnedValue: (t) => t.value,
-        renderDropdownItem: T,
-        renderSingleInputItem: V,
-        onChange: (t) => q(t)
+        renderDropdownItem: L,
+        renderSingleInputItem: T,
+        onChange: (t) => A(t)
       }
     ) })
   ] });
-}, L = ({
+}, j = ({
   children: o,
   isCurrentPage: n = !1,
   onClick: a,
@@ -182,9 +182,9 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: n ? i.fill.accentSecondary : i.fill.bgSecondary,
+    backgroundColor: n ? i.fill.accent_secondary : i.fill.bg_secondary,
     borderRadius: tt.sm,
-    border: n ? `1px solid ${i.fill.accentSecondaryHover}` : `1px solid ${i.border.neutralAlphaBasic}`
+    border: n ? `1px solid ${i.fill.accent_secondary_hover}` : `1px solid ${i.border.neutral_alpha_basic}`
   }), h = R({
     width: "24px",
     height: "24px",
@@ -199,7 +199,7 @@ const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
         n && d
       ),
       onClick: c ? void 0 : a,
-      children: s ? /* @__PURE__ */ e(U, { className: h }) : /* @__PURE__ */ e(_, { center: !0, variant: "body-2", fontWeight: "medium", children: o })
+      children: s ? /* @__PURE__ */ e(Q, { className: h }) : /* @__PURE__ */ e(Z, { center: !0, variant: "body-2", fontWeight: "medium", children: o })
     }
   );
 };

package/dist/components/builders/Table/TableWrapper/TableWrapper.js

@@ -1,11 +1,11 @@
 import { jsx as c } from "react/jsx-runtime";
 import { css as n, cx as f } from "@emotion/css";
-import { memo as k, useState as d, useRef as x, useCallback as E, useEffect as W } from "react";
-import { theme as $ } from "../../../../utils/theme/index.js";
-import { Box as m } from "../../Box/Box.js";
-const { color: o, cornerRadius: C } = $, P = n({
+import { memo as k, useState as d, useRef as x, useCallback as E, useEffect as L } from "react";
+import { theme as W } from "../../../../utils/theme/index.js";
+import { Box as p } from "../../Box/Box.js";
+const { color: o, cornerRadius: $ } = W, C = n({
   position: "relative",
-  borderRadius: C.md,
+  borderRadius: $.md,
   overflow: "hidden",
   "&::before, &::after": {
     content: '""',
@@ -18,21 +18,21 @@ const { color: o, cornerRadius: C } = $, P = n({
   },
   "&::before": {
     left: 0,
-    background: `linear-gradient(to left, transparent 0%, ${o.fill.bgPrimary} 100%)`
+    background: `linear-gradient(to left, transparent 0%, ${o.fill.bg_primary} 100%)`
   },
   "&::after": {
     right: 0,
-    background: `linear-gradient(to right, transparent 0%, ${o.fill.bgPrimary} 100%)`
+    background: `linear-gradient(to right, transparent 0%, ${o.fill.bg_primary} 100%)`
   }
 }), N = n({
   overflowX: "auto",
   scrollbarWidth: "thin",
-  scrollbarColor: `${o.scrollbar.thumbPrimary} ${o.scrollbar.trackPrimary}`
+  scrollbarColor: `${o.scrollbar.thumb_primary} ${o.scrollbar.track_primary}`
 }), T = k(
   ({
-    data: b,
-    children: h,
-    className: p,
+    data: m,
+    children: b,
+    className: h,
     scrollContainerClassName: u,
     showBorders: w = !1,
     ...y
@@ -45,7 +45,7 @@ const { color: o, cornerRadius: C } = $, P = n({
         i && t < a - l - 1
       );
     }, []);
-    W(() => {
+    L(() => {
       const r = s.current;
       if (!r) return;
       e();
@@ -53,9 +53,9 @@ const { color: o, cornerRadius: C } = $, P = n({
       return t.observe(r), r.addEventListener("scroll", e), () => {
         t.disconnect(), r.removeEventListener("scroll", e);
       };
-    }, [e, b]);
-    const L = n({
-      border: w ? `1px solid ${o.border.neutralAlphaLow}` : "transparent",
+    }, [e, m]);
+    const _ = n({
+      border: w ? `1px solid ${o.border.neutral_alpha_low}` : "transparent",
       "&::before": {
         opacity: S ? 1 : 0
       },
@@ -64,16 +64,16 @@ const { color: o, cornerRadius: C } = $, P = n({
       }
     });
     return /* @__PURE__ */ c(
-      m,
+      p,
       {
-        className: f(P, L, p),
+        className: f(C, _, h),
         ...y,
         children: /* @__PURE__ */ c(
-          m,
+          p,
           {
             ref: s,
             className: f(N, u),
-            children: h
+            children: b
           }
         )
       }

package/dist/components/charts/LineChart/constants.js

@@ -1,5 +1,5 @@
 import { theme as l } from "../../../utils/theme/index.js";
-const { color: i } = l, e = {
+const { color: i } = l, r = {
   chart: {
     type: "areaspline",
     backgroundColor: "transparent",
@@ -34,44 +34,44 @@ const { color: i } = l, e = {
   credits: {
     enabled: !1
   }
-}, t = {
+}, e = {
   positive: {
-    color: i.fill.positivePrimary,
+    color: i.fill.positive_primary,
     fillColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
       stops: [
-        [0, i.fill.positiveTintHigh],
-        [1, i.fill.positiveTransparent]
+        [0, i.fill.positive_tint_high],
+        [1, i.fill.positive_transparent]
       ]
     }
   },
   negative: {
-    color: i.fill.negativePrimary,
+    color: i.fill.negative_primary,
     fillColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
       stops: [
-        [0, i.fill.negativeTintHigh],
-        [1, i.fill.negativeTransparent]
+        [0, i.fill.negative_tint_high],
+        [1, i.fill.negative_transparent]
       ]
     }
   },
   accent: {
-    color: i.fill.accentPrimary,
+    color: i.fill.accent_primary,
     fillColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
       stops: [
-        [0, i.fill.accentTintHigh],
-        [1, i.fill.accentTransparent]
+        [0, i.fill.accent_tint_high],
+        [1, i.fill.accent_transparent]
       ]
     }
   },
   warning: {
-    color: i.fill.warningPrimary,
+    color: i.fill.warning_primary,
     fillColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
       stops: [
-        [0, i.fill.warningTintHigh],
-        [1, i.fill.warningTransparent]
+        [0, i.fill.warning_tint_high],
+        [1, i.fill.warning_transparent]
       ]
     }
   },
@@ -87,6 +87,6 @@ const { color: i } = l, e = {
   }
 };
 export {
-  t as lineChartColorPreset,
-  e as lineChartPreset
+  e as lineChartColorPreset,
+  r as lineChartPreset
 };

package/dist/components/charts/LineChart/utils.js

@@ -38,12 +38,12 @@ const { color: r } = n, f = (e, s, t, a, i) => ({
     alignByTranslate: !0
   },
   shadow: {
-    color: r.effect.shadowM,
+    color: r.effect.shadow_m,
     offsetX: 0,
     offsetY: 0
   },
   borderRadius: 8,
-  backgroundColor: r.fill.bgPrimary,
+  backgroundColor: r.fill.bg_primary,
   useHTML: !0,
   ...e
 });

package/dist/components/charts/PieProgressChart/constants.js

@@ -1,5 +1,5 @@
 import { theme as i } from "../../../utils/theme/index.js";
-const { color: e } = i, r = {
+const { color: e } = i, l = {
   chart: {
     type: "pie",
     backgroundColor: "transparent",
@@ -53,30 +53,36 @@ const { color: e } = i, r = {
   credits: {
     enabled: !1
   }
-}, t = {
+}, r = {
   positive: {
     colors: [
-      e.fill.positivePrimary,
-      e.fill.positiveTintHigh
+      e.fill.positive_primary,
+      e.fill.positive_tint_high
     ]
   },
   negative: {
     colors: [
-      e.fill.negativePrimary,
-      e.fill.negativeTintHigh
+      e.fill.negative_primary,
+      e.fill.negative_tint_high
     ]
   },
   accent: {
-    colors: [e.fill.accentPrimary, e.fill.accentTintHigh]
+    colors: [
+      e.fill.accent_primary,
+      e.fill.accent_tint_high
+    ]
   },
   warning: {
-    colors: [e.fill.warningPrimary, e.fill.warningTintHigh]
+    colors: [
+      e.fill.warning_primary,
+      e.fill.warning_tint_high
+    ]
   },
   transfer: {
     colors: ["var(--fill-transfer-primary)", "var(--fill-transfer-tint-high)"]
   }
 };
 export {
-  t as pieProgressChartColorPreset,
-  r as pieProgressChartPreset
+  r as pieProgressChartColorPreset,
+  l as pieProgressChartPreset
 };

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

@@ -1,31 +1,31 @@
-import { jsx as a, jsxs as w, Fragment as O } from "react/jsx-runtime";
-import { cx as y, css as k } from "@emotion/css";
+import { jsx as o, jsxs as b, Fragment as O } from "react/jsx-runtime";
+import { cx as _, css as k } from "@emotion/css";
 import { motion as q } from "framer-motion";
-import { useMemo as o } from "react";
-import { cornerRadiusValues as u, baseButton as D, getVariantStyles as E, typeStyles as G, sizeValues as H } from "./styles.js";
+import { useMemo as n } from "react";
+import { cornerRadiusValues as m, baseButton as D, getVariantStyles as E, typeStyles as G, sizeValues as H } from "./styles.js";
 import { Loader as I } from "../../builders/Loader/Loader.js";
 import { AnimatedText as J } from "../../builders/Text/Text.js";
 import { theme as K } from "../../../utils/theme/index.js";
 import { Box as P } from "../../builders/Box/Box.js";
 import { Ripple as Q } from "../../builders/Ripple/Ripple.js";
-const { color: m } = K, ue = ({
-  disabled: n,
+const { color: u } = K, sr = ({
+  disabled: a,
   loading: l,
-  className: g,
-  wrapperClassName: S,
-  buttonClassName: _,
-  buttonDisabledClassName: $,
-  textClassName: N,
+  className: w,
+  wrapperClassName: g,
+  buttonClassName: $,
+  buttonDisabledClassName: N,
+  textClassName: S,
   children: v,
-  variant: r = "filled",
+  variant: e = "filled",
   backgroundColor: f,
   textColor: d,
   textFontWeight: U,
-  borderColor: c,
-  color: e = "accent",
+  borderColor: i,
+  color: r = "accent",
   opacity: p,
   borderRadius: x,
-  width: i = "auto",
+  width: c = "auto",
   size: s = "md",
   iconLeft: B,
   iconRight: R,
@@ -34,55 +34,58 @@ const { color: m } = K, ue = ({
   type: V = "button",
   ...j
 }) => {
-  const h = o(() => {
-    switch (i) {
+  const h = n(() => {
+    switch (c) {
       case "full":
         return "100%";
       case "auto":
         return "fit-content";
       default:
-        return i;
+        return c;
     }
-  }, [i]), F = o(() => f || (r === "filled" ? e === "neutral" ? m.fill.neutralSecondary : `var(--fill-${e}-${t})` : "transparent"), [r, f, e, t]), W = o(() => {
+  }, [c]), F = n(() => f || (e === "filled" ? r === "neutral" ? u.fill.neutral_secondary : r === "neutral-primary" ? u.fill.neutral_primary : `var(--fill-${r}-${t})` : "transparent"), [e, f, r, t]), W = n(() => {
     if (t === "primary") {
-      if (e === "neutral") return m.text.secondary;
-      if (r === "filled") return m.text.inverse;
-    } else if (e === "neutral") return m.text.secondary;
-    return `var(--text-${e})`;
-  }, [t, e, r]), b = o(() => {
+      if (r === "neutral" || r === "neutral-primary")
+        return u.text.secondary;
+      if (e === "filled") return u.text.inverse;
+    } else if (r === "neutral") return u.text.secondary;
+    return `var(--text-${r})`;
+  }, [t, r, e]), y = n(() => {
     if (t === "primary") {
-      if (e === "neutral") return "secondary";
-      if (r === "filled") return "inverse";
-    } else if (e === "neutral") return "secondary";
-    return e;
-  }, [r, e, t]), A = o(() => c || (r === "outline" ? `var(--border-${e}-${t})` : "transparent"), [r, c, e, t]), C = o(() => {
+      if (r === "neutral" || r === "neutral-primary")
+        return "secondary";
+      if (e === "filled") return "inverse";
+    } else if (r === "neutral" || r === "neutral-primary")
+      return "secondary";
+    return r;
+  }, [e, r, t]), A = n(() => i || (e === "outline" ? r === "neutral-primary" ? u.border.neutral_alpha_basic : `var(--border-${r}-${t})` : "transparent"), [e, i, r, t]), C = n(() => {
     switch (s) {
       case "lg":
-        return u.lg;
+        return m.lg;
       case "md":
       case "sm":
-        return u.md;
+        return m.md;
       case "xs":
-        return u.sm;
+        return m.sm;
       default:
-        return u.md;
+        return m.md;
     }
-  }, [s]), L = y(
+  }, [s]), L = _(
     D,
-    E(r, e, t, n),
-    G[r],
-    n ? $ : void 0,
+    E(e, r, t, a),
+    G[e],
+    a ? N : void 0,
     k({
-      borderRadius: x ? u[x] : C,
+      borderRadius: x ? m[x] : C,
       backgroundColor: F,
       borderColor: A,
-      color: d ?? `var(--text-${b})`,
+      color: d ?? `var(--text-${y})`,
       width: h,
       height: H[s],
-      opacity: p || (n ? 0.7 : 1)
+      opacity: p || (a ? 0.7 : 1)
     }),
-    _
-  ), M = o(() => {
+    $
+  ), M = n(() => {
     switch (s) {
       case "lg":
       case "md":
@@ -94,36 +97,36 @@ const { color: m } = K, ue = ({
         return "body-1";
     }
   }, [s]);
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     P,
     {
-      className: y(S, g),
+      className: _(g, w),
       w: h,
       flex: T,
       relative: !0,
       overflow: "hidden",
-      children: /* @__PURE__ */ w(
+      children: /* @__PURE__ */ b(
         q.button,
         {
           ...j,
-          whileTap: !n && !l ? {
+          whileTap: !a && !l ? {
             scale: 0.99,
             boxShadow: "inset 0 0 0 10000px rgba(0,0,0,0.1)",
             transition: { duration: 0 }
           } : {},
-          disabled: n || l,
+          disabled: a || l,
           className: L,
           type: V,
           children: [
-            l ? /* @__PURE__ */ a(I, { color: W }) : /* @__PURE__ */ w(O, { children: [
+            l ? /* @__PURE__ */ o(I, { color: W }) : /* @__PURE__ */ b(O, { children: [
               B,
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ o(
                 J,
                 {
                   style: { color: d },
-                  colorName: b,
+                  colorName: y,
                   variant: M,
-                  className: N,
+                  className: S,
                   textOverflow: "ellipsis",
                   overflow: "hidden",
                   children: v
@@ -131,7 +134,7 @@ const { color: m } = K, ue = ({
               ),
               R
             ] }),
-            /* @__PURE__ */ a(Q, {})
+            /* @__PURE__ */ o(Q, {})
           ]
         }
       )
@@ -139,5 +142,5 @@ const { color: m } = K, ue = ({
   );
 };
 export {
-  ue as Button
+  sr as Button
 };

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

@@ -38,15 +38,15 @@ const { color: t, cornerRadius: r, height: n, transition: i } = d, v = o({
     border: "none"
   }),
   filled: o({
-    backgroundColor: t.fill.accentPrimary,
+    backgroundColor: t.fill.accent_primary,
     color: "white",
     border: "none"
   }),
   outline: o({
     backgroundColor: "transparent",
-    border: `1px solid ${t.border.accentPrimary}`
+    border: `1px solid ${t.border.accent_primary}`
   })
-}, h = (s, e, l, c) => {
+}, p = (s, e, l, c) => {
   if (c)
     return o({
       cursor: "not-allowed",
@@ -100,7 +100,7 @@ const { color: t, cornerRadius: r, height: n, transition: i } = d, v = o({
 export {
   v as baseButton,
   x as cornerRadiusValues,
-  h as getVariantStyles,
+  p as getVariantStyles,
   f as sizeValues,
   b as typeStyles
 };