@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/components/BarChart/Tooltip.js

@@ -1,5 +1,5 @@
 "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 { barTooltipContainer, barColorSquare, colorBar } from "./styles.css.js";
@@ -9,15 +9,28 @@ const BarChartTooltip = ({
   color,
   className,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${barTooltipContainer}`, "data-testid": dataTestId, children: [
-  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", { className: barColorSquare, style: assignInlineVars({
-    [colorBar]: color
-  }) }) }),
-  /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: formattedValue }),
-    /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", children: indexValue })
-  ] })
-] });
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `${className ? `${className} ` : ""}${barTooltipContainer}`,
+    "data-testid": dataTestId,
+    children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: barColorSquare,
+          style: assignInlineVars({
+            [colorBar]: color
+          })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: formattedValue }),
+        /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", children: indexValue })
+      ] })
+    ]
+  }
+);
 export {
   BarChartTooltip
 };

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

@@ -24,5 +24,5 @@ type BarChartProps = {
  * See https://nivo.rocks/bar/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, style, }: BarChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, style, }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BarChart/index.js

@@ -1,17 +1,12 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ResponsiveBar } from "@nivo/bar";
 import { useTheme } from "@ultraviolet/themes";
 import { useCallback } from "react";
 import { getLegendColor } from "../../helpers/legend.js";
 import { getNivoTheme } from "../../helpers/nivoTheme.js";
 import { BarChartTooltip } 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_DATA = [];
 const DEFAULT_AXISFORMATTER = {};
 const DEFAULT_KEYS = ["value"];
@@ -30,30 +25,55 @@ const BarChart = ({
   style
 }) => {
   const theme = useTheme();
-  const tooltip = useCallback((props) => {
-    const {
-      indexValue,
-      formattedValue,
-      color
-    } = tooltipFunction ? tooltipFunction(props) : props;
-    return /* @__PURE__ */ jsx(BarChartTooltip, { color, formattedValue, indexValue: indexValue.toString() });
-  }, [tooltipFunction]);
-  return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: {
-    height,
-    ...style
-  }, children: /* @__PURE__ */ jsx(ResponsiveBar, { 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: getLegendColor(theme), data, enableLabel: false, keys, margin, theme: getNivoTheme(theme), tooltip, ...chartProps }) });
+  const tooltip = useCallback(
+    (props) => {
+      const { indexValue, formattedValue, color } = tooltipFunction ? tooltipFunction(props) : props;
+      return /* @__PURE__ */ jsx(
+        BarChartTooltip,
+        {
+          color,
+          formattedValue,
+          indexValue: indexValue.toString()
+        }
+      );
+    },
+    [tooltipFunction]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "data-testid": dataTestId,
+      style: { height, ...style },
+      children: /* @__PURE__ */ jsx(
+        ResponsiveBar,
+        {
+          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: getLegendColor(theme),
+          data,
+          enableLabel: false,
+          keys,
+          margin,
+          theme: getNivoTheme(theme),
+          tooltip,
+          ...chartProps
+        }
+      )
+    }
+  );
 };
 export {
   BarChart

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

@@ -34,5 +34,5 @@ type BarStackProps = {
 /**
  * BarStack is a graphic component that is used to show data in one dimension.
  */
-export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, style, }: BarStackProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, style, }: BarStackProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BarStack/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useMemo } from "react";
 import { Tooltip } from "../Tooltip/index.js";
@@ -11,24 +11,69 @@ const BarStack = ({
   "data-testid": dataTestId,
   style
 }) => {
-  const computedTotal = useMemo(() => total ?? data.reduce((acc, {
-    value
-  }) => acc + value, 0), [total, data]);
-  return /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${containerBarStack}`, "data-testid": dataTestId, style, children: data.map(({
-    id,
-    value,
-    text,
-    onClick,
-    onDoubleClick,
-    onKeyDown,
-    onMouseEnter,
-    onMouseLeave,
-    onMouseDown,
-    onMouseUp,
-    tooltip
-  }) => /* @__PURE__ */ jsx("div", { className: wrapperBarStack, style: assignInlineVars({
-    [wrapperWidth]: `${value / computedTotal * 100}%`
-  }), children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { id: `tooltip-${id}`, text: tooltip, children: /* @__PURE__ */ jsx("div", { className: barStack, onClick, onDoubleClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseUp, children: text }) }) : /* @__PURE__ */ jsx("div", { className: barStack, onClick, onDoubleClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseUp, children: text }) }, id)) });
+  const computedTotal = useMemo(
+    () => total ?? data.reduce((acc, { value }) => acc + value, 0),
+    [total, data]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${containerBarStack}`,
+      "data-testid": dataTestId,
+      style,
+      children: data.map(
+        ({
+          id,
+          value,
+          text,
+          onClick,
+          onDoubleClick,
+          onKeyDown,
+          onMouseEnter,
+          onMouseLeave,
+          onMouseDown,
+          onMouseUp,
+          tooltip
+        }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: wrapperBarStack,
+            style: assignInlineVars({
+              [wrapperWidth]: `${value / computedTotal * 100}%`
+            }),
+            children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { id: `tooltip-${id}`, text: tooltip, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: barStack,
+                onClick,
+                onDoubleClick,
+                onKeyDown,
+                onMouseDown,
+                onMouseEnter,
+                onMouseLeave,
+                onMouseUp,
+                children: text
+              }
+            ) }) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: barStack,
+                onClick,
+                onDoubleClick,
+                onKeyDown,
+                onMouseDown,
+                onMouseEnter,
+                onMouseLeave,
+                onMouseUp,
+                children: text
+              }
+            )
+          },
+          id
+        )
+      )
+    }
+  );
 };
 export {
   BarStack

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

@@ -13,5 +13,5 @@ type ItemProps = {
     maxWidth?: string;
     minWidth?: string;
 };
-export declare const Item: ({ to, children, disabled, "aria-current": ariaCurrent, onClick, onKeyDown, className, maxWidth, minWidth, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Item: ({ to, children, disabled, "aria-current": ariaCurrent, onClick, onKeyDown, className, maxWidth, minWidth, }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Breadcrumbs/components/Item.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useMemo } from "react";
 import { Button } from "../../Button/index.js";
@@ -19,22 +19,58 @@ const Item = ({
 }) => {
   const renderedChildren = useMemo(() => {
     if (to) {
-      return /* @__PURE__ */ jsx(Link, { className: linkBreadcrumbs, href: to, prominence: "stronger", size: "small", children });
+      return /* @__PURE__ */ jsx(
+        Link,
+        {
+          className: linkBreadcrumbs,
+          href: to,
+          prominence: "stronger",
+          size: "small",
+          children
+        }
+      );
     }
     if (onClick) {
-      return /* @__PURE__ */ jsx(Button, { className: contentBreadcrumbs, disabled, sentiment: "neutral", size: "small", style: assignInlineVars({
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: contentBreadcrumbs,
+          disabled,
+          sentiment: "neutral",
+          size: "small",
+          style: assignInlineVars({
+            [minWidthVar]: minWidth?.toString(),
+            [maxWidthVar]: maxWidth?.toString()
+          }),
+          variant: "ghost",
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "div",
+        className: `${contentBreadcrumbs} ${contentBreadcrumbsText}`,
+        variant: "bodySmallStrong",
+        children
+      }
+    );
+  }, [children, disabled, maxWidth, minWidth, onClick, to]);
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "aria-current": ariaCurrent,
+      className: `${className ? `${className} ` : ""}${itemContainerBreadcrumbs({ clickable: !!onClick })} ${breadcrumbsItem}`,
+      onClick,
+      onKeyDown,
+      style: assignInlineVars({
         [minWidthVar]: minWidth?.toString(),
         [maxWidthVar]: maxWidth?.toString()
-      }), variant: "ghost", children });
+      }),
+      children: renderedChildren
     }
-    return /* @__PURE__ */ jsx(Text, { as: "div", className: `${contentBreadcrumbs} ${contentBreadcrumbsText}`, variant: "bodySmallStrong", children });
-  }, [children, disabled, maxWidth, minWidth, onClick, to]);
-  return /* @__PURE__ */ jsx("li", { "aria-current": ariaCurrent, className: `${className ? `${className} ` : ""}${itemContainerBreadcrumbs({
-    clickable: !!onClick
-  })} ${breadcrumbsItem}`, onClick, onKeyDown, style: assignInlineVars({
-    [minWidthVar]: minWidth?.toString(),
-    [maxWidthVar]: maxWidth?.toString()
-  }), children: renderedChildren });
+  );
 };
 export {
   Item

package/dist/components/Breadcrumbs/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Item } from "./components/Item.js";
 import { breadcrumbs } from "./styles.css.js";
 const Breadcrumbs = ({
@@ -7,7 +7,16 @@ const Breadcrumbs = ({
   className,
   "data-testid": dataTestId,
   style
-}) => /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, "data-testid": dataTestId, style, children: /* @__PURE__ */ jsx("ol", { className: breadcrumbs, children }) });
+}) => /* @__PURE__ */ jsx(
+  "nav",
+  {
+    "aria-label": "breadcrumb",
+    className,
+    "data-testid": dataTestId,
+    style,
+    children: /* @__PURE__ */ jsx("ol", { className: breadcrumbs, children })
+  }
+);
 Breadcrumbs.Item = Item;
 export {
   Breadcrumbs

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

@@ -17,5 +17,5 @@ type BulletProps = {
 /**
  * Bullet component is used to display a small icon or text with a colored background in a circle.
  */
-export declare const Bullet: ({ className, sentiment, size, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, children, disabled, style, }: BulletProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Bullet: ({ className, sentiment, size, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, children, disabled, style, }: BulletProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Bullet/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Tooltip } from "../Tooltip/index.js";
 import { bullet } from "./styles.css.js";
 const Bullet = ({
@@ -13,12 +13,15 @@ const Bullet = ({
   children,
   disabled,
   style
-}) => /* @__PURE__ */ jsx(Tooltip, { id: tooltipBaseId, text: tooltip, children: /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${bullet({
-  disabled,
-  prominence,
-  sentiment,
-  size
-})}`, "data-testid": dataTestId, style, children }) });
+}) => /* @__PURE__ */ jsx(Tooltip, { id: tooltipBaseId, text: tooltip, children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: `${className ? `${className} ` : ""}${bullet({ disabled, prominence, sentiment, size })}`,
+    "data-testid": dataTestId,
+    style,
+    children
+  }
+) });
 export {
   Bullet
 };

package/dist/components/Button/index.js

@@ -1,84 +1,134 @@
 "use client";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
 import { forwardRef, useMemo } from "react";
 import { Loader } from "../Loader/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { button } from "./styles.css.js";
-const Button = forwardRef(({
-  type = "button",
-  className,
-  "data-testid": dataTestId,
-  sentiment = "primary",
-  variant = "filled",
-  size = "large",
-  disabled = false,
-  fullWidth = false,
-  isLoading = false,
-  children,
-  onClick,
-  onMouseDown,
-  onMouseUp,
-  onMouseOut,
-  onBlur,
-  onMouseEnter,
-  onMouseLeave,
-  onPointerDown,
-  onKeyDown,
-  name,
-  "aria-label": ariaLabel,
-  "aria-current": ariaCurrent,
-  "aria-controls": ariaControls,
-  "aria-expanded": ariaExpanded,
-  "aria-haspopup": ariaHaspopup,
-  "aria-describedby": ariaDescribedby,
-  "aria-disabled": ariaDisabled,
-  "aria-pressed": ariaPressed,
-  "aria-roledescription": ariaRoledescription,
-  "aria-keyshortcuts": ariaKeyshortcuts,
-  href,
-  download,
-  target,
-  role,
-  tooltip,
-  tabIndex,
-  autoFocus,
-  style
-}, ref) => {
-  const computeIsDisabled = disabled || isLoading;
-  const {
-    theme
-  } = useTheme();
-  const computedSentimentLoader = useMemo(() => {
-    if (variant === "filled" && !["black", "white"].includes(sentiment)) {
-      if (theme === "light") {
-        return "white";
+const Button = forwardRef(
+  ({
+    type = "button",
+    className,
+    "data-testid": dataTestId,
+    sentiment = "primary",
+    variant = "filled",
+    size = "large",
+    disabled = false,
+    fullWidth = false,
+    isLoading = false,
+    children,
+    onClick,
+    onMouseDown,
+    onMouseUp,
+    onMouseOut,
+    onBlur,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerDown,
+    onKeyDown,
+    name,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHaspopup,
+    "aria-describedby": ariaDescribedby,
+    "aria-disabled": ariaDisabled,
+    "aria-pressed": ariaPressed,
+    "aria-roledescription": ariaRoledescription,
+    "aria-keyshortcuts": ariaKeyshortcuts,
+    href,
+    download,
+    target,
+    role,
+    tooltip,
+    tabIndex,
+    autoFocus,
+    style
+  }, ref) => {
+    const computeIsDisabled = disabled || isLoading;
+    const { theme } = useTheme();
+    const computedSentimentLoader = useMemo(() => {
+      if (variant === "filled" && !["black", "white"].includes(sentiment)) {
+        if (theme === "light") {
+          return "white";
+        }
+        return "black";
       }
-      return "black";
+      return sentiment;
+    }, [sentiment, theme, variant]);
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      isLoading ? /* @__PURE__ */ jsx(Loader, { active: true, sentiment: computedSentimentLoader, size: "small" }) : null,
+      children
+    ] });
+    if (href && !computeIsDisabled) {
+      return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          "aria-controls": ariaControls,
+          "aria-current": ariaCurrent,
+          "aria-describedby": ariaDescribedby,
+          "aria-disabled": ariaDisabled ?? disabled,
+          "aria-expanded": ariaExpanded,
+          "aria-haspopup": ariaHaspopup,
+          "aria-keyshortcuts": ariaKeyshortcuts,
+          "aria-label": ariaLabel,
+          "aria-pressed": ariaPressed,
+          "aria-roledescription": ariaRoledescription,
+          autoFocus,
+          className: `${className ? `${className} ` : ""}${button({ disabled, fullWidth, sentiment, size, variant })}`,
+          "data-testid": dataTestId,
+          download,
+          href,
+          onBlur,
+          onClick,
+          onMouseDown,
+          onMouseEnter,
+          onMouseLeave,
+          onMouseOut,
+          onMouseUp,
+          ref,
+          role,
+          style,
+          tabIndex,
+          target,
+          type,
+          children: content
+        }
+      ) });
     }
-    return sentiment;
-  }, [sentiment, theme, variant]);
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    isLoading ? /* @__PURE__ */ jsx(Loader, { active: true, sentiment: computedSentimentLoader, size: "small" }) : null,
-    children
-  ] });
-  if (href && !computeIsDisabled) {
-    return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx("a", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-describedby": ariaDescribedby, "aria-disabled": ariaDisabled ?? disabled, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-keyshortcuts": ariaKeyshortcuts, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-roledescription": ariaRoledescription, autoFocus, className: `${className ? `${className} ` : ""}${button({
-      disabled,
-      fullWidth,
-      sentiment,
-      size,
-      variant
-    })}`, "data-testid": dataTestId, download, href, onBlur, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, ref, role, style, tabIndex, target, type, children: content }) });
+    return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-controls": ariaControls,
+        "aria-current": ariaCurrent,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup,
+        "aria-label": ariaLabel,
+        autoFocus,
+        className: `${className ? `${className} ` : ""}${button({ disabled, fullWidth, sentiment, size, variant })}`,
+        "data-testid": dataTestId,
+        disabled: computeIsDisabled,
+        name,
+        onBlur,
+        onClick,
+        onKeyDown,
+        onMouseDown,
+        onMouseEnter,
+        onMouseLeave,
+        onMouseOut,
+        onMouseUp,
+        onPointerDown,
+        ref,
+        role,
+        style,
+        tabIndex,
+        type,
+        children: content
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ? `${className} ` : ""}${button({
-    disabled,
-    fullWidth,
-    sentiment,
-    size,
-    variant
-  })}`, "data-testid": dataTestId, disabled: computeIsDisabled, name, onBlur, onClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, onPointerDown, ref, role, style, tabIndex, type, children: content }) });
-});
+);
 export {
   Button
 };