@dss-kit/ui-kit 0.3.0 → 0.3.2

package/dist/components/builders/Text/utils/systemToClass.d.ts

@@ -23,4 +23,3 @@ export type SystemStyleProps = {
     overflow?: React.CSSProperties["overflow"];
 };
 export declare const systemToClass: (props: SystemStyleProps) => string;
-//# sourceMappingURL=systemToClass.d.ts.map

package/dist/components/builders/Text/utils/systemToClass.js

@@ -0,0 +1,27 @@
+import { css as l } from "@emotion/css";
+const c = (e) => {
+  let t;
+  e.center ? t = "center" : e.left ? t = "left" : e.right && (t = "right");
+  let i;
+  return e.uppercase ? i = "uppercase" : e.lowercase ? i = "lowercase" : e.capitalize && (i = "capitalize"), l({
+    marginTop: e.mt,
+    marginBottom: e.mb,
+    marginRight: e.mr,
+    marginLeft: e.ml,
+    flex: e.flex,
+    cursor: e.cursor,
+    wordBreak: e.wordBreak,
+    whiteSpace: e.whiteSpace,
+    textOverflow: e.textOverflow,
+    textDecoration: e.decoration,
+    textAlign: t,
+    textTransform: i,
+    /** @deprecated TODO: remove this after deprecation of color prop @use colorName or style.color instead */
+    color: e.color,
+    opacity: e.disabled ? 0.5 : void 0,
+    overflow: e.overflow
+  });
+};
+export {
+  c as systemToClass
+};

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

@@ -5,4 +5,3 @@ export * from './Portal';
 export * from './Ripple';
 export * from './Table';
 export * from './Text';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/charts/LineChart/LineChart.d.ts

@@ -2,4 +2,3 @@ import { FC } from 'react';
 import { LineChartProps } from './types';
 declare const LineChart: FC<LineChartProps>;
 export { LineChart };
-//# sourceMappingURL=LineChart.d.ts.map

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

@@ -0,0 +1,43 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cx as h } from "@emotion/css";
+import { Chart as b, Tooltip as C } from "@highcharts/react";
+import { useRef as T, useEffect as y, useMemo as o } from "react";
+import { buildLineChartOptions as E, buildTooltipProps as L } from "./utils.js";
+const j = ({
+  color: n = "positive",
+  data: s = [],
+  xAxis: i,
+  yAxis: a,
+  containerProps: e,
+  highcharts: p,
+  tooltip: r,
+  className: f,
+  style: l
+}) => {
+  const t = T(null);
+  y(() => () => {
+    typeof t == "object" && t?.current?.chart && t.current.chart.destroy();
+  }, []);
+  const c = o(() => E(n, s, i, a, !!r), [n, s, i, a, r]), u = o(() => r ? L(r) : { enabled: !1 }, [r]), d = o(
+    () => ({
+      ...e,
+      className: h(e?.className, f),
+      style: { ...e?.style, ...l }
+    }),
+    [e, f, l]
+  );
+  return /* @__PURE__ */ m(
+    b,
+    {
+      highcharts: p,
+      ref: t,
+      options: c,
+      containerProps: d,
+      children: /* @__PURE__ */ m(C, { ...u })
+    }
+  );
+};
+j.displayName = "LineChart";
+export {
+  j as LineChart
+};

package/dist/components/charts/LineChart/constants.d.ts

@@ -12,4 +12,3 @@ export declare const lineChartColorPreset: Record<LineChartColorType, {
         stops: [number, string][];
     };
 }>;
-//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1,92 @@
+import { theme as l } from "../../../utils/theme/index.js";
+const { color: i } = l, e = {
+  chart: {
+    type: "areaspline",
+    backgroundColor: "transparent",
+    spacing: [0, 0, 0, 0],
+    margin: [0, 0, 0, 0]
+  },
+  xAxis: {
+    gridLineWidth: 0,
+    lineWidth: 0,
+    tickWidth: 0,
+    labels: {
+      enabled: !1
+    },
+    title: {
+      text: ""
+    }
+  },
+  yAxis: {
+    gridLineWidth: 0,
+    lineWidth: 0,
+    tickWidth: 0,
+    labels: {
+      enabled: !1
+    },
+    title: {
+      text: ""
+    }
+  },
+  legend: {
+    enabled: !1
+  },
+  credits: {
+    enabled: !1
+  }
+}, t = {
+  positive: {
+    color: i.fill.positivePrimary,
+    fillColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, i.fill.positiveTintHigh],
+        [1, i.fill.positiveTransparent]
+      ]
+    }
+  },
+  negative: {
+    color: i.fill.negativePrimary,
+    fillColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, i.fill.negativeTintHigh],
+        [1, i.fill.negativeTransparent]
+      ]
+    }
+  },
+  accent: {
+    color: i.fill.accentPrimary,
+    fillColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, i.fill.accentTintHigh],
+        [1, i.fill.accentTransparent]
+      ]
+    }
+  },
+  warning: {
+    color: i.fill.warningPrimary,
+    fillColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, i.fill.warningTintHigh],
+        [1, i.fill.warningTransparent]
+      ]
+    }
+  },
+  transfer: {
+    color: "var(--fill-transfer-primary)",
+    fillColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, "var(--fill-transfer-tint-high)"],
+        [1, "var(--fill-transfer-transparent)"]
+      ]
+    }
+  }
+};
+export {
+  t as lineChartColorPreset,
+  e as lineChartPreset
+};

package/dist/components/charts/LineChart/index.d.ts

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

package/dist/components/charts/LineChart/types.d.ts

@@ -299,4 +299,3 @@ export interface LineChartProps extends Omit<React.HTMLAttributes<HTMLDivElement
      */
     tooltip?: TooltipProps;
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/components/charts/LineChart/utils.d.ts

@@ -3,4 +3,3 @@ import { TooltipProps } from '@highcharts/react/options/Tooltip';
 import { LineChartColorType, LineChartDataType, LineChartXAxisType, LineChartYAxisType } from './types';
 export declare const buildLineChartOptions: (color: LineChartColorType, data: LineChartDataType, xAxis: LineChartXAxisType, yAxis: LineChartYAxisType, tooltip: boolean) => HighchartsOptionsType;
 export declare const buildTooltipProps: (tooltip?: TooltipProps) => TooltipProps;
-//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1,53 @@
+import { lineChartColorPreset as l, lineChartPreset as o } from "./constants.js";
+import { theme as n } from "../../../utils/theme/index.js";
+const { color: r } = n, f = (e, s, t, a, i) => ({
+  ...o,
+  plotOptions: {
+    areaspline: {
+      marker: {
+        enabled: !1,
+        states: {
+          hover: {
+            enabled: i
+          }
+        }
+      },
+      allowPointSelect: !1
+    }
+  },
+  xAxis: {
+    ...o.xAxis,
+    ...t
+  },
+  yAxis: {
+    ...o.yAxis,
+    ...a
+  },
+  series: [
+    {
+      type: "areaspline",
+      data: s,
+      ...l[e]
+    }
+  ]
+}), u = (e) => ({
+  outside: !0,
+  enabled: !!e,
+  padding: 0,
+  position: {
+    alignByTranslate: !0
+  },
+  shadow: {
+    color: r.effect.shadowM,
+    offsetX: 0,
+    offsetY: 0
+  },
+  borderRadius: 8,
+  backgroundColor: r.fill.bgPrimary,
+  useHTML: !0,
+  ...e
+});
+export {
+  f as buildLineChartOptions,
+  u as buildTooltipProps
+};

package/dist/components/charts/PieProgressChart/PieProgressChart.d.ts

@@ -2,4 +2,3 @@ import { HighchartsReactRefObject } from '@highcharts/react';
 import { PieProgressChartProps } from './types';
 declare const PieProgressChart: import('react').ForwardRefExoticComponent<PieProgressChartProps & import('react').RefAttributes<HighchartsReactRefObject>>;
 export { PieProgressChart };
-//# sourceMappingURL=PieProgressChart.d.ts.map

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

@@ -0,0 +1,43 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cx as p } from "@emotion/css";
+import { Chart as d, Title as C } from "@highcharts/react";
+import { forwardRef as P, useRef as y, useEffect as R, useMemo as n } from "react";
+import { buildPieProgressChartOptions as x } from "./utils.js";
+const b = P(
+  ({
+    highcharts: c,
+    color: s = "positive",
+    percentage: e,
+    label: a = (o) => `${o}%`,
+    containerProps: t,
+    className: i,
+    style: f
+  }, u) => {
+    const o = y(null), r = u || o;
+    R(() => () => {
+      typeof r == "object" && r?.current?.chart && r.current.chart.destroy();
+    }, [r]);
+    const h = n(() => x(e, s), [e, s]), l = n(
+      () => ({
+        ...t,
+        className: p(t?.className, i),
+        style: { ...t?.style, ...f }
+      }),
+      [t, i, f]
+    );
+    return /* @__PURE__ */ m(
+      d,
+      {
+        highcharts: c,
+        ref: r,
+        options: h,
+        containerProps: l,
+        children: /* @__PURE__ */ m(C, { children: a?.(e) })
+      }
+    );
+  }
+);
+b.displayName = "PieProgressChart";
+export {
+  b as PieProgressChart
+};

package/dist/components/charts/PieProgressChart/constants.d.ts

@@ -3,4 +3,3 @@ export declare const pieProgressChartPreset: Partial<Highcharts.Options>;
 export declare const pieProgressChartColorPreset: Record<PieProgressChartColorType, {
     colors: [string, string];
 }>;
-//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1,82 @@
+import { theme as i } from "../../../utils/theme/index.js";
+const { color: e } = i, r = {
+  chart: {
+    type: "pie",
+    backgroundColor: "transparent",
+    spacing: [0, 0, 0, 0],
+    margin: [0, 0, 0, 0],
+    events: {
+      click: void 0
+    }
+  },
+  title: {
+    align: "center",
+    verticalAlign: "middle",
+    floating: !0,
+    style: {
+      fontSize: "24px",
+      fontWeight: "600",
+      color: e.text.primary
+    }
+  },
+  plotOptions: {
+    pie: {
+      allowPointSelect: !0,
+      cursor: "pointer",
+      dataLabels: {
+        enabled: !1
+      },
+      startAngle: 90,
+      endAngle: -90,
+      innerSize: "90%",
+      borderWidth: 0,
+      states: {
+        hover: {
+          enabled: !1
+        },
+        select: {
+          enabled: !1
+        },
+        inactive: {
+          enabled: !1
+        }
+      },
+      enableMouseTracking: !1
+    }
+  },
+  tooltip: {
+    enabled: !1
+  },
+  legend: {
+    enabled: !1
+  },
+  credits: {
+    enabled: !1
+  }
+}, t = {
+  positive: {
+    colors: [
+      e.fill.positivePrimary,
+      e.fill.positiveTintHigh
+    ]
+  },
+  negative: {
+    colors: [
+      e.fill.negativePrimary,
+      e.fill.negativeTintHigh
+    ]
+  },
+  accent: {
+    colors: [e.fill.accentPrimary, e.fill.accentTintHigh]
+  },
+  warning: {
+    colors: [e.fill.warningPrimary, e.fill.warningTintHigh]
+  },
+  transfer: {
+    colors: ["var(--fill-transfer-primary)", "var(--fill-transfer-tint-high)"]
+  }
+};
+export {
+  t as pieProgressChartColorPreset,
+  r as pieProgressChartPreset
+};

package/dist/components/charts/PieProgressChart/index.d.ts

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

package/dist/components/charts/PieProgressChart/types.d.ts

@@ -173,4 +173,3 @@ export interface PieProgressChartProps extends Omit<React.HTMLAttributes<HTMLDiv
      */
     containerProps?: React.HTMLAttributes<HTMLDivElement>;
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/components/charts/PieProgressChart/utils.d.ts

@@ -1,4 +1,3 @@
 import { HighchartsOptionsType } from '@highcharts/react';
 import { PieProgressChartColorType } from './types';
 export declare const buildPieProgressChartOptions: (percentage: number, color: PieProgressChartColorType) => HighchartsOptionsType;
-//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1,17 @@
+import { pieProgressChartColorPreset as t, pieProgressChartPreset as s } from "./constants.js";
+const a = (r, e) => ({
+  ...s,
+  series: [
+    {
+      type: "pie",
+      data: [
+        { name: "", y: Math.min(r, 100) },
+        { name: "", y: Math.max(100 - r, 0) }
+      ],
+      ...t[e]
+    }
+  ]
+});
+export {
+  a as buildPieProgressChartOptions
+};

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

@@ -2,4 +2,3 @@ export type { LineChartProps } from './LineChart';
 export { LineChart } from './LineChart';
 export type { PieProgressChartProps } from './PieProgressChart';
 export { PieProgressChart } from './PieProgressChart';
-//# sourceMappingURL=index.d.ts.map

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

@@ -88,4 +88,3 @@ export interface ButtonProps extends Omit<HTMLMotionProps<"button">, "className"
     opacity?: React.CSSProperties["opacity"];
 }
 export declare const Button: FC<ButtonProps>;
-//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1,143 @@
+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 { 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 { Loader as I } from "../../builders/Loader/Loader.js";
+import { AnimatedText as J } from "../../builders/Text/Text.js";
+import { Ripple as K } from "../../builders/Ripple/Ripple.js";
+import { theme as P } from "../../../utils/theme/index.js";
+import { Box as Q } from "../../builders/Box/Box.js";
+const { color: m } = P, ue = ({
+  disabled: n,
+  loading: l,
+  className: g,
+  wrapperClassName: S,
+  buttonClassName: _,
+  buttonDisabledClassName: $,
+  textClassName: N,
+  children: v,
+  variant: r = "filled",
+  backgroundColor: f,
+  textColor: d,
+  textFontWeight: U,
+  borderColor: c,
+  color: e = "accent",
+  opacity: p,
+  borderRadius: x,
+  width: i = "auto",
+  size: s = "md",
+  iconLeft: B,
+  iconRight: R,
+  intensity: t = "primary",
+  flex: T,
+  type: V = "button",
+  ...j
+}) => {
+  const h = o(() => {
+    switch (i) {
+      case "full":
+        return "100%";
+      case "auto":
+        return "fit-content";
+      default:
+        return i;
+    }
+  }, [i]), F = o(() => f || (r === "filled" ? e === "neutral" ? m.fill.neutralSecondary : `var(--fill-${e}-${t})` : "transparent"), [r, f, e, t]), W = o(() => {
+    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 (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(() => {
+    switch (s) {
+      case "lg":
+        return u.lg;
+      case "md":
+      case "sm":
+        return u.md;
+      case "xs":
+        return u.sm;
+      default:
+        return u.md;
+    }
+  }, [s]), L = y(
+    D,
+    E(r, e, t, n),
+    G[r],
+    n ? $ : void 0,
+    k({
+      borderRadius: x ? u[x] : C,
+      backgroundColor: F,
+      borderColor: A,
+      color: d ?? `var(--text-${b})`,
+      width: h,
+      height: H[s],
+      opacity: p || (n ? 0.7 : 1)
+    }),
+    _
+  ), M = o(() => {
+    switch (s) {
+      case "lg":
+      case "md":
+        return "body-1";
+      case "sm":
+      case "xs":
+        return "body-2";
+      default:
+        return "body-1";
+    }
+  }, [s]);
+  return /* @__PURE__ */ a(
+    Q,
+    {
+      className: y(S, g),
+      w: h,
+      flex: T,
+      relative: !0,
+      overflow: "hidden",
+      children: /* @__PURE__ */ w(
+        q.button,
+        {
+          ...j,
+          whileTap: !n && !l ? {
+            scale: 0.99,
+            boxShadow: "inset 0 0 0 10000px rgba(0,0,0,0.1)",
+            transition: { duration: 0 }
+          } : {},
+          disabled: n || l,
+          className: L,
+          type: V,
+          children: [
+            l ? /* @__PURE__ */ a(I, { color: W }) : /* @__PURE__ */ w(O, { children: [
+              B,
+              /* @__PURE__ */ a(
+                J,
+                {
+                  style: { color: d },
+                  colorName: b,
+                  variant: M,
+                  className: N,
+                  textOverflow: "ellipsis",
+                  overflow: "hidden",
+                  children: v
+                }
+              ),
+              R
+            ] }),
+            /* @__PURE__ */ a(K, {})
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  ue as Button
+};

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

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

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

@@ -5,4 +5,3 @@ export declare const cornerRadiusValues: Record<CornerRadius, string>;
 export declare const sizeValues: Record<Extract<Size, "xs" | "sm" | "md" | "lg">, string>;
 export declare const typeStyles: Record<ButtonType, string>;
 export declare const getVariantStyles: (variant: ButtonType, buttonColor: ButtonColor, intensity: "primary" | "secondary", disabled?: boolean) => string;
-//# sourceMappingURL=styles.d.ts.map