@ultraviolet/ui 3.0.0-beta.26 → 3.0.0-beta.28

package/dist/components/Key/index.js

@@ -1,16 +1,9 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Text } from "../Text/index.js";
+import { KEYS_MATCH } from "./constants.js";
 import { key } from "./styles.css.js";
-const KEYS_MATCH = {
-  backspace: "⌫",
-  command: "⌘",
-  control: "⌃",
-  enter: "↵",
-  option: "⌥",
-  shift: "⇧"
-};
 const Key = ({
   children,
   prominence = "default",
@@ -22,7 +15,10 @@ const Key = ({
   "data-testid": dataTestId,
   style
 }) => {
-  const specialKey = useMemo(() => Object.keys(KEYS_MATCH).find((key2) => key2 === children.toLowerCase()), [children]);
+  const specialKey = useMemo(
+    () => Object.keys(KEYS_MATCH).find((key2) => key2 === children.toLowerCase()),
+    [children]
+  );
   const textProminence = useMemo(() => {
     if (prominence === "default") {
       return "default";
@@ -32,14 +28,31 @@ const Key = ({
     }
     return "stronger";
   }, [sentiment, prominence]);
-  return /* @__PURE__ */ jsx("kbd", { className: `${className ? `${className} ` : ""}${key({
-    disabled,
-    prominence,
-    sentiment,
-    size
-  })}`, "data-disabled": disabled, "data-prominence": prominence, "data-sentiment": sentiment, "data-size": size, "data-testid": dataTestId, id, style, children: /* @__PURE__ */ jsx(Text, { as: "span", disabled, prominence: textProminence, sentiment, variant: size === "medium" ? "caption" : "captionSmall", children: specialKey ? KEYS_MATCH[specialKey] : children }) });
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: `${className ? `${className} ` : ""}${key({ disabled, prominence, sentiment, size })}`,
+      "data-disabled": disabled,
+      "data-prominence": prominence,
+      "data-sentiment": sentiment,
+      "data-size": size,
+      "data-testid": dataTestId,
+      id,
+      style,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          disabled,
+          prominence: textProminence,
+          sentiment,
+          variant: size === "medium" ? "caption" : "captionSmall",
+          children: specialKey ? KEYS_MATCH[specialKey] : children
+        }
+      )
+    }
+  );
 };
 export {
-  KEYS_MATCH,
   Key
 };

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

@@ -18,5 +18,5 @@ type LabelProps = {
 /**
  * Label is used inside all of our input components, but it can be used outside for design purposes
  */
-export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Label/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -26,11 +26,46 @@ const LabelRequiredOrNot = ({
   }, [disabled, htmlFor]);
   if (required) {
     return /* @__PURE__ */ jsxs(Stack, { alignItems: "start", direction: "row", gap: "0.5", style, children: [
-      /* @__PURE__ */ jsx(Text, { as: as === "label" ? "label" : "legend", className: textPointer[textPointerValue], disabled, htmlFor, id, sentiment, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", children }),
-      /* @__PURE__ */ jsx(Text, { "aria-label": "required", as: "span", disabled, sentiment: "danger", variant: size === "large" ? "bodyStrong" : "bodySmallStrong", children: "*" })
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: as === "label" ? "label" : "legend",
+          className: textPointer[textPointerValue],
+          disabled,
+          htmlFor,
+          id,
+          sentiment,
+          variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          "aria-label": "required",
+          as: "span",
+          disabled,
+          sentiment: "danger",
+          variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
+          children: "*"
+        }
+      )
     ] });
   }
-  return /* @__PURE__ */ jsx(Text, { as: as === "label" ? "label" : "legend", className: textPointer[textPointerValue], disabled, htmlFor, id, sentiment, style, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", children });
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: as === "label" ? "label" : "legend",
+      className: textPointer[textPointerValue],
+      disabled,
+      htmlFor,
+      id,
+      sentiment,
+      style,
+      variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
+      children
+    }
+  );
 };
 const Label = ({
   as = "label",
@@ -44,9 +79,35 @@ const Label = ({
   disabled,
   style
 }) => labelDescription ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
-  /* @__PURE__ */ jsx(LabelRequiredOrNot, { as, disabled, htmlFor, id, required, sentiment, size, style, children }),
+  /* @__PURE__ */ jsx(
+    LabelRequiredOrNot,
+    {
+      as,
+      disabled,
+      htmlFor,
+      id,
+      required,
+      sentiment,
+      size,
+      style,
+      children
+    }
+  ),
   typeof labelDescription === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "bodySmall", children: labelDescription }) : labelDescription
-] }) : /* @__PURE__ */ jsx(LabelRequiredOrNot, { as, disabled, htmlFor, id, required, sentiment, size, style, children });
+] }) : /* @__PURE__ */ jsx(
+  LabelRequiredOrNot,
+  {
+    as,
+    disabled,
+    htmlFor,
+    id,
+    required,
+    sentiment,
+    size,
+    style,
+    children
+  }
+);
 export {
   Label
 };

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

@@ -9,5 +9,5 @@ type CustomLegendProps = {
     className?: string;
     'data-testid'?: string;
 };
-export declare const CustomLegend: ({ axisTransformer, data, selected, setSelected, className, "data-testid": dataTestId, }: CustomLegendProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CustomLegend: ({ axisTransformer, data, selected, setSelected, className, "data-testid": dataTestId, }: CustomLegendProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LineChart/CustomLegend.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { theme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { getLegendColor } from "../../helpers/legend.js";
@@ -7,10 +7,7 @@ import { Checkbox } from "../Checkbox/index.js";
 import { Text } from "../Text/index.js";
 import { getSelected, getMin, getMax, getAverage, getCurrent } from "./helpers.js";
 import { container, lineChartHead, longContainer, lineChartBody, lineChartRow, cellValueContainer, lineChartLegend, backgroundColorLegend, textLegend } from "./styles.css.js";
-const Cell = ({
-  value,
-  variant
-}) => /* @__PURE__ */ jsx(Text, { as: "span", className: textLegend, sentiment: "neutral", variant, children: value });
+const Cell = ({ value, variant }) => /* @__PURE__ */ jsx(Text, { as: "span", className: textLegend, sentiment: "neutral", variant, children: value });
 const noop = (value) => value.toString();
 const CustomLegend = ({
   axisTransformer = noop,
@@ -19,46 +16,73 @@ const CustomLegend = ({
   setSelected,
   className,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${container}`, "data-testid": dataTestId, children: [
-  /* @__PURE__ */ jsxs("div", { className: lineChartHead, children: [
-    /* @__PURE__ */ jsx("div", { className: longContainer, children: "Legend" }),
-    /* @__PURE__ */ jsx(Cell, { value: "Minimum", variant: "body" }),
-    /* @__PURE__ */ jsx(Cell, { value: "Maximum", variant: "body" }),
-    /* @__PURE__ */ jsx(Cell, { value: "Average", variant: "body" }),
-    /* @__PURE__ */ jsx(Cell, { value: "Current", variant: "body" })
-  ] }),
-  /* @__PURE__ */ jsx("div", { className: lineChartBody, children: data?.map((row, index) => {
-    const values = row.data.map((val) => val.y);
-    const labelIndexed = `${row.id}${index}`;
-    const id = row.id.toString();
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: lineChartRow,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: longContainer, children: /* @__PURE__ */ jsx(Checkbox, { checked: selected.includes(labelIndexed), name: id, onChange: () => setSelected([...getSelected(id, index, selected)]), children: /* @__PURE__ */ jsxs("div", { className: cellValueContainer, children: [
-            /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "bodySmall", children: row?.["label"] }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: lineChartLegend,
-                "data-testid": `label-${id}`,
-                style: assignInlineVars({
-                  [backgroundColorLegend]: getLegendColor(theme)[index]
-                })
-              }
-            )
-          ] }) }) }),
-          /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMin(values)), variant: "bodySmall" }),
-          /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMax(values)), variant: "bodySmall" }),
-          /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getAverage(values)), variant: "bodySmall" }),
-          /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getCurrent(values)), variant: "bodySmall" })
-        ]
-      },
-      labelIndexed
-    );
-  }) })
-] });
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `${className ? `${className} ` : ""}${container}`,
+    "data-testid": dataTestId,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: lineChartHead, children: [
+        /* @__PURE__ */ jsx("div", { className: longContainer, children: "Legend" }),
+        /* @__PURE__ */ jsx(Cell, { value: "Minimum", variant: "body" }),
+        /* @__PURE__ */ jsx(Cell, { value: "Maximum", variant: "body" }),
+        /* @__PURE__ */ jsx(Cell, { value: "Average", variant: "body" }),
+        /* @__PURE__ */ jsx(Cell, { value: "Current", variant: "body" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: lineChartBody, children: data?.map((row, index) => {
+        const values = row.data.map((val) => val.y);
+        const labelIndexed = `${row.id}${index}`;
+        const id = row.id.toString();
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: lineChartRow,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: longContainer, children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: selected.includes(labelIndexed),
+                  name: id,
+                  onChange: () => setSelected([...getSelected(id, index, selected)]),
+                  children: /* @__PURE__ */ jsxs("div", { className: cellValueContainer, children: [
+                    /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "bodySmall", children: row?.["label"] }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: lineChartLegend,
+                        "data-testid": `label-${id}`,
+                        style: assignInlineVars({
+                          [backgroundColorLegend]: getLegendColor(theme)[index]
+                        })
+                      }
+                    )
+                  ] })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMin(values)), variant: "bodySmall" }),
+              /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMax(values)), variant: "bodySmall" }),
+              /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  value: axisTransformer(getAverage(values)),
+                  variant: "bodySmall"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  value: axisTransformer(getCurrent(values)),
+                  variant: "bodySmall"
+                }
+              )
+            ]
+          },
+          labelIndexed
+        );
+      }) })
+    ]
+  }
+);
 export {
   CustomLegend
 };

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

@@ -2,5 +2,5 @@ import type { Point } from '@nivo/line';
 type LineChartTooltipProps = {
     point: Point;
 };
-export declare const LineChartTooltip: ({ point }: LineChartTooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LineChartTooltip: ({ point }: LineChartTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LineChart/Tooltip.js

@@ -1,17 +1,39 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Text } from "../Text/index.js";
 import { lineTooltipContainer, lineColorSquare, colorLine } from "./styles.css.js";
-const LineChartTooltip = ({
-  point
-}) => /* @__PURE__ */ jsxs("div", { className: lineTooltipContainer, children: [
-  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", { className: lineColorSquare, style: assignInlineVars({
-    [colorLine]: point.serieColor
-  }) }) }),
+const LineChartTooltip = ({ point }) => /* @__PURE__ */ jsxs("div", { className: lineTooltipContainer, children: [
+  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: lineColorSquare,
+      style: assignInlineVars({
+        [colorLine]: point.serieColor
+      })
+    }
+  ) }),
   /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Text, { as: "div", prominence: "stronger", sentiment: "neutral", variant: "bodyStronger", children: point.data.yFormatted }),
-    /* @__PURE__ */ jsx(Text, { as: "div", prominence: "stronger", sentiment: "neutral", variant: "bodySmall", children: point.data.xFormatted })
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "div",
+        prominence: "stronger",
+        sentiment: "neutral",
+        variant: "bodyStronger",
+        children: point.data.yFormatted
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "div",
+        prominence: "stronger",
+        sentiment: "neutral",
+        variant: "bodySmall",
+        children: point.data.xFormatted
+      }
+    )
   ] })
 ] });
 export {

package/dist/components/LineChart/helpers.js

@@ -10,32 +10,33 @@ const parse = (data) => {
   }
   return 0;
 };
-const getMin = (values = []) => values.length > 0 ? Math.min(...values.map(parse)) : 0;
-const getMax = (values = []) => values.length > 0 ? Math.max(...values.map(parse)) : 0;
-const getAverage = (values = []) => values.length > 0 ? Math.round(values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100) / 100 : 0;
+const getMin = (values = []) => values.length > 0 ? Math.min(...values.map((data) => parse(data))) : 0;
+const getMax = (values = []) => values.length > 0 ? Math.max(...values.map((data) => parse(data))) : 0;
+const getAverage = (values = []) => values.length > 0 ? Math.round(
+  values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100
+) / 100 : 0;
 const getMaxChartValue = (preppedData) => {
   if (!preppedData?.length) {
     return 0;
   }
-  const maximum = Math.max(...preppedData.map(({
-    data
-  }) => getMax(data.map(({
-    y
-  }) => y || 0))));
+  const maximum = Math.max(
+    ...preppedData.map(({ data }) => getMax(data.map(({ y }) => y || 0)))
+  );
   return Math.ceil(maximum + maximum * 0.1);
 };
 const getMinChartValue = (preppedData) => {
   if (!preppedData?.length) {
     return 0;
   }
-  const minimum = Math.min(...preppedData.map(({
-    data
-  }) => getMin(data.map(({
-    y
-  }) => y || 0))));
+  const minimum = Math.min(
+    ...preppedData.map(({ data }) => getMin(data.map(({ y }) => y || 0)))
+  );
   return Math.floor(minimum - minimum * 0.1);
 };
-const getCurrent = (values = []) => values.length > 0 ? values[values.length - 1] : 0;
+const getCurrent = (values = []) => {
+  const val = values.at(-1);
+  return val ? val : 0;
+};
 const getSelected = (label, index, selected = []) => {
   const labelIndexed = label + index.toString();
   const found = selected.indexOf(labelIndexed);

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

@@ -22,5 +22,5 @@ type LineChartProps = {
  * See https://nivo.rocks/line/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, style, "data-testid": dataTestId, }: LineChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, style, "data-testid": dataTestId, }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LineChart/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { ResponsiveLine } from "@nivo/line";
 import { useTheme } from "@ultraviolet/themes";
 import { useState, useEffect } from "react";
@@ -8,12 +8,7 @@ import { getNivoTheme } from "../../helpers/nivoTheme.js";
 import { CustomLegend } from "./CustomLegend.js";
 import { getMinChartValue, getMaxChartValue } from "./helpers.js";
 import { LineChartTooltip } from "./Tooltip.js";
-const DEFAULT_MARGIN = {
-  bottom: 50,
-  left: 60,
-  right: 25,
-  top: 50
-};
+const DEFAULT_MARGIN = { bottom: 50, left: 60, right: 25, top: 50 };
 const DEFAULT_XSCALE = {
   format: "%Y-%m-%dT%H:%M:%S%Z",
   // 2021-08-30T02:56:07Z
@@ -21,9 +16,7 @@ const DEFAULT_XSCALE = {
   type: "time",
   useUTC: false
 };
-const DEFAULT_YSCALE = {
-  type: "linear"
-};
+const DEFAULT_YSCALE = { type: "linear" };
 const DEFAULT_CHARTPROPS = {};
 const LineChart = ({
   height = "537px",
@@ -48,43 +41,66 @@ const LineChart = ({
       label: d?.["label"]
     }))
   };
-  const [selected, setSelected] = useState(dataset.datasets?.map(({
-    id
-  }, index) => `${id}${index}`));
-  const finalData = dataset.datasets?.filter(({
-    id
-  }, index) => selected ? selected.includes(`${id}${index}`) : false);
+  const [selected, setSelected] = useState(
+    dataset.datasets?.map(({ id }, index) => `${id}${index}`)
+  );
+  const finalData = dataset.datasets?.filter(
+    ({ id }, index) => selected ? selected.includes(`${id}${index}`) : false
+  );
   useEffect(() => {
     if (selected !== void 0) {
       return;
     }
-    setSelected(dataset.datasets?.map(({
-      id
-    }, index) => `${id}${index}`));
+    setSelected(dataset.datasets?.map(({ id }, index) => `${id}${index}`));
   }, [dataset.datasets, selected]);
   const localColors = getLegendColor(theme);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { style: {
-      height,
-      ...style
-    }, children: /* @__PURE__ */ jsx(ResponsiveLine, { axisBottom: {
-      format: axisFormatters?.bottom,
-      tickPadding: 5,
-      tickRotation: 0,
-      tickSize: 5,
-      tickValues: tickValues?.bottom
-    }, axisLeft: {
-      format: axisFormatters?.left,
-      tickPadding: 5,
-      tickRotation: 0,
-      tickSize: 5,
-      tickValues: tickValues?.left
-    }, colors: localColors, curve: "monotoneX", data: finalData ?? [], "data-testid": dataTestId, margin, pointSize: 10, theme: getNivoTheme(theme), tooltip: LineChartTooltip, useMesh: true, xFormat: pointFormatters?.x, xScale, yFormat: pointFormatters?.y, yScale: {
-      max: getMaxChartValue(finalData),
-      min: getMinChartValue(finalData),
-      ...yScale
-    }, ...chartProps }) }),
-    withLegend && /* @__PURE__ */ jsx(CustomLegend, { axisTransformer: axisFormatters?.left, data: dataset.datasets, selected: selected ?? [], setSelected })
+    /* @__PURE__ */ jsx("div", { style: { height, ...style }, children: /* @__PURE__ */ jsx(
+      ResponsiveLine,
+      {
+        axisBottom: {
+          format: axisFormatters?.bottom,
+          tickPadding: 5,
+          tickRotation: 0,
+          tickSize: 5,
+          tickValues: tickValues?.bottom
+        },
+        axisLeft: {
+          format: axisFormatters?.left,
+          tickPadding: 5,
+          tickRotation: 0,
+          tickSize: 5,
+          tickValues: tickValues?.left
+        },
+        colors: localColors,
+        curve: "monotoneX",
+        data: finalData ?? [],
+        "data-testid": dataTestId,
+        margin,
+        pointSize: 10,
+        theme: getNivoTheme(theme),
+        tooltip: LineChartTooltip,
+        useMesh: true,
+        xFormat: pointFormatters?.x,
+        xScale,
+        yFormat: pointFormatters?.y,
+        yScale: {
+          max: getMaxChartValue(finalData),
+          min: getMinChartValue(finalData),
+          ...yScale
+        },
+        ...chartProps
+      }
+    ) }),
+    withLegend && /* @__PURE__ */ jsx(
+      CustomLegend,
+      {
+        axisTransformer: axisFormatters?.left,
+        data: dataset.datasets,
+        selected: selected ?? [],
+        setSelected
+      }
+    )
   ] });
 };
 export {