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

package/dist/components/ProgressBar/index.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 { Label } from "../Label/index.js";
 import { Stack } from "../Stack/index.js";
@@ -22,25 +22,79 @@ const ProgressBar = ({
   "aria-labelledby": ariaLabelledBy,
   "aria-label": ariaLabel,
   style
-}) => /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction, gap: direction === "column" ? 1 : 2, children: [
-  direction === "column" && (label || showProgress) ? /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: !label && showProgress ? "right" : "space-between", width: "100%", children: [
-    /* @__PURE__ */ jsx(Label, { labelDescription, size: "medium", children: label }),
-    showProgress ? /* @__PURE__ */ jsxs(Text, { as: "label", placement: "right", sentiment: "neutral", variant: "bodySmall", children: [
-      prefix,
-      suffix === "%" ? 100 * value / max : value,
-      suffix
-    ] }) : null
-  ] }) : null,
-  direction === "row" && label ? /* @__PURE__ */ jsx(Label, { labelDescription, size: "medium", children: label }) : null,
-  /* @__PURE__ */ jsx("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuemax": max, "aria-valuemin": 0, "aria-valuenow": value, className: `${className ? `${className} ` : ""}${progressContainer}`, "data-testid": dataTestId, role: "progressbar", style, children: progress ? /* @__PURE__ */ jsx("div", { className: progressBar }) : /* @__PURE__ */ jsx("div", { className: filledBarSentiments[sentiment], style: assignInlineVars({
-    [percentageValue]: `${100 * Math.max(0, Math.min(max, value)) / max}%`
-  }) }) }),
-  showProgress && direction === "row" ? /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 1, width: "fit-content", children: /* @__PURE__ */ jsxs(Text, { as: "label", className: customText, sentiment: "neutral", variant: "bodySmall", children: [
-    prefix,
-    suffix === "%" ? 100 * value / max : value,
-    suffix
-  ] }) }) : null
-] });
+}) => /* @__PURE__ */ jsxs(
+  Stack,
+  {
+    alignItems: "center",
+    direction,
+    gap: direction === "column" ? 1 : 2,
+    children: [
+      direction === "column" && (label || showProgress) ? /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          justifyContent: !label && showProgress ? "right" : "space-between",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ jsx(Label, { labelDescription, size: "medium", children: label }),
+            showProgress ? /* @__PURE__ */ jsxs(
+              Text,
+              {
+                as: "label",
+                placement: "right",
+                sentiment: "neutral",
+                variant: "bodySmall",
+                children: [
+                  prefix,
+                  suffix === "%" ? 100 * value / max : value,
+                  suffix
+                ]
+              }
+            ) : null
+          ]
+        }
+      ) : null,
+      direction === "row" && label ? /* @__PURE__ */ jsx(Label, { labelDescription, size: "medium", children: label }) : null,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-valuemax": max,
+          "aria-valuemin": 0,
+          "aria-valuenow": value,
+          className: `${className ? `${className} ` : ""}${progressContainer}`,
+          "data-testid": dataTestId,
+          role: "progressbar",
+          style,
+          children: progress ? /* @__PURE__ */ jsx("div", { className: progressBar }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: filledBarSentiments[sentiment],
+              style: assignInlineVars({
+                [percentageValue]: `${100 * Math.max(0, Math.min(max, value)) / max}%`
+              })
+            }
+          )
+        }
+      ),
+      showProgress && direction === "row" ? /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 1, width: "fit-content", children: /* @__PURE__ */ jsxs(
+        Text,
+        {
+          as: "label",
+          className: customText,
+          sentiment: "neutral",
+          variant: "bodySmall",
+          children: [
+            prefix,
+            suffix === "%" ? 100 * value / max : value,
+            suffix
+          ]
+        }
+      ) }) : null
+    ]
+  }
+);
 export {
   ProgressBar
 };

package/dist/components/ProgressBar/styles.css.js

@@ -1,3 +1,4 @@
+/* empty css                             */
 /* empty css                          */
 var progressContainer = "uv_1pgcd801";
 var customText = "uv_1pgcd802";

package/dist/components/ProgressBar/variables.css.js

@@ -1,4 +1,3 @@
-/* empty css                             */
 var percentageValue = "var(--uv_1taqqht0)";
 export {
   percentageValue

package/dist/components/Radio/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -10,60 +10,92 @@ const RadioMarkedIcon = () => /* @__PURE__ */ jsxs("g", { children: [
   /* @__PURE__ */ jsx("circle", { className: innerCircleRing, cx: "12", cy: "12", r: "8" }),
   /* @__PURE__ */ jsx("circle", { className: radioMark, cx: "12", cy: "12", r: "5" })
 ] });
-const Radio = forwardRef(({
-  checked = false,
-  onChange,
-  onFocus,
-  onBlur,
-  disabled = false,
-  error,
-  name,
-  value,
-  label,
-  helper,
-  className,
-  autoFocus,
-  onKeyDown,
-  tooltip,
-  "aria-label": ariaLabel,
-  "data-testid": dataTestId,
-  tabIndex,
-  id,
-  style
-}, forwadedRef) => {
-  const generatedId = useId();
-  const localId = id || generatedId;
-  return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(Stack, { className: radioStack, gap: 0.5, children: [
-    /* @__PURE__ */ jsxs("div", { "aria-disabled": disabled, className: `${className ? `${className} ` : ""}${container}`, "data-checked": checked, "data-error": error, "data-testid": dataTestId, children: [
-      /* @__PURE__ */ jsx(
-        "input",
+const Radio = forwardRef(
+  ({
+    checked = false,
+    onChange,
+    onFocus,
+    onBlur,
+    disabled = false,
+    error,
+    name,
+    value,
+    label,
+    helper,
+    className,
+    autoFocus,
+    onKeyDown,
+    tooltip,
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId,
+    tabIndex,
+    id,
+    style
+  }, forwadedRef) => {
+    const generatedId = useId();
+    const localId = id || generatedId;
+    return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(Stack, { className: radioStack, gap: 0.5, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
         {
           "aria-disabled": disabled,
-          "aria-invalid": !!error,
-          "aria-label": ariaLabel,
-          autoFocus,
-          checked,
-          className: radio,
-          disabled,
-          id: localId,
-          name,
-          onBlur,
-          onChange,
-          onFocus,
-          onKeyDown,
-          ref: forwadedRef,
-          style,
-          tabIndex,
-          type: "radio",
-          value
+          className: `${className ? `${className} ` : ""}${container}`,
+          "data-checked": checked,
+          "data-error": error,
+          "data-testid": dataTestId,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                "aria-disabled": disabled,
+                "aria-invalid": !!error,
+                "aria-label": ariaLabel,
+                autoFocus,
+                checked,
+                className: radio,
+                disabled,
+                id: localId,
+                name,
+                onBlur,
+                onChange,
+                onFocus,
+                onKeyDown,
+                ref: forwadedRef,
+                style,
+                tabIndex,
+                type: "radio",
+                value
+              }
+            ),
+            /* @__PURE__ */ jsx("svg", { className: ring, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(RadioMarkedIcon, {}) }),
+            label ? /* @__PURE__ */ jsx(Fragment, { children: typeof label === "string" ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "label",
+                className: textLabel,
+                htmlFor: localId,
+                prominence: "default",
+                variant: "body",
+                children: label
+              }
+            ) : /* @__PURE__ */ jsx("label", { className: labelStyle, htmlFor: localId, children: label }) }) : null
+          ]
         }
       ),
-      /* @__PURE__ */ jsx("svg", { className: ring, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(RadioMarkedIcon, {}) }),
-      label ? /* @__PURE__ */ jsx(Fragment, { children: typeof label === "string" ? /* @__PURE__ */ jsx(Text, { as: "label", className: textLabel, htmlFor: localId, prominence: "default", variant: "body", children: label }) : /* @__PURE__ */ jsx("label", { className: labelStyle, htmlFor: localId, children: label }) }) : null
-    ] }),
-    helper ? /* @__PURE__ */ jsx(Text, { as: "span", className: margedText, prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null
-  ] }) });
-});
+      helper ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          className: margedText,
+          prominence: "weak",
+          sentiment: "neutral",
+          variant: "caption",
+          children: helper
+        }
+      ) : null
+    ] }) });
+  }
+);
 export {
   Radio
 };

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

@@ -16,7 +16,7 @@ type RadioGroupProps = {
  * RadioGroup is a component that allows users to select one option from a list of options using radio.
  */
 export declare const RadioGroup: {
-    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Radio: ({ onFocus, onBlur, disabled, error, value, label, helper, className, autoFocus, onKeyDown, tooltip, "data-testid": dataTestId, style, }: RadioGroupRadioProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+    Radio: ({ onFocus, onBlur, disabled, error, value, label, helper, className, autoFocus, onKeyDown, tooltip, "data-testid": dataTestId, style, }: RadioGroupRadioProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/RadioGroup/index.js

@@ -1,12 +1,14 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, createContext, useContext } from "react";
 import { Label } from "../Label/index.js";
 import { Radio } from "../Radio/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { fieldset } from "./styles.css.js";
-const RadioGroupContext = createContext(void 0);
+const RadioGroupContext = createContext(
+  void 0
+);
 const RadioGroupRadio = ({
   onFocus,
   onBlur,
@@ -26,13 +28,28 @@ const RadioGroupRadio = ({
   if (!context) {
     throw new Error("RadioGroup.Radio can only be used inside a RadioGroup");
   }
-  const {
-    groupName,
-    onChange,
-    groupValue,
-    error: errorContext
-  } = context;
-  return /* @__PURE__ */ jsx(Radio, { autoFocus, checked: groupValue === value, className, "data-testid": dataTestId, disabled, error: error || errorContext, helper, label, name: groupName, onBlur, onChange, onFocus, onKeyDown, style, tooltip, value });
+  const { groupName, onChange, groupValue, error: errorContext } = context;
+  return /* @__PURE__ */ jsx(
+    Radio,
+    {
+      autoFocus,
+      checked: groupValue === value,
+      className,
+      "data-testid": dataTestId,
+      disabled,
+      error: error || errorContext,
+      helper,
+      label,
+      name: groupName,
+      onBlur,
+      onChange,
+      onFocus,
+      onKeyDown,
+      style,
+      tooltip,
+      value
+    }
+  );
 };
 const RadioGroup = ({
   legend,
@@ -48,22 +65,59 @@ const RadioGroup = ({
   description,
   required = false
 }) => {
-  const contextValue = useMemo(() => ({
-    error: !!error,
-    groupName: name,
-    groupValue: value,
-    onChange,
-    required
-  }), [name, value, onChange, required, error]);
+  const contextValue = useMemo(
+    () => ({
+      error: !!error,
+      groupName: name,
+      groupValue: value,
+      onChange,
+      required
+    }),
+    [name, value, onChange, required, error]
+  );
   return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
     /* @__PURE__ */ jsx("fieldset", { className: `${className ? `${className} ` : ""}${fieldset}`, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
       legend || description ? /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
-        legend ? /* @__PURE__ */ jsx(Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
-        description ? /* @__PURE__ */ jsx(Text, { as: typeof description === "string" ? "p" : "div", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: description }) : null
+        legend ? /* @__PURE__ */ jsx(
+          Label,
+          {
+            as: "legend",
+            labelDescription: legendDescription,
+            required,
+            children: legend
+          }
+        ) : null,
+        description ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: typeof description === "string" ? "p" : "div",
+            prominence: "weak",
+            sentiment: "neutral",
+            variant: "bodySmall",
+            children: description
+          }
+        ) : null
       ] }) : null,
-      /* @__PURE__ */ jsx(Stack, { alignItems: "start", direction, gap: direction === "column" ? 1 : 2, children })
+      /* @__PURE__ */ jsx(
+        Stack,
+        {
+          alignItems: "start",
+          direction,
+          gap: direction === "column" ? 1 : 2,
+          children
+        }
+      )
     ] }) }),
-    helper ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null,
+    helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        prominence: "weak",
+        sentiment: "neutral",
+        variant: "caption",
+        children: helper
+      }
+    ) : null,
     error ? /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "danger", variant: "caption", children: error }) : null
   ] }) });
 };

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

@@ -17,5 +17,5 @@ type RowProps = {
 /**
  * Row component is a wrapper for grid layout.
  */
-export declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, padding, style, }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, padding, style, }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Row/index.js

@@ -1,13 +1,16 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { consoleLightTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { row, sprinkles } from "./styles.css.js";
 import { paddings, templateColumn } from "./variables.css.js";
-const mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce((acc, key) => ({
-  ...acc,
-  [key]: consoleLightTheme.space[object[key]]
-}), {}) : {};
+const mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce(
+  (acc, key) => ({
+    ...acc,
+    [key]: consoleLightTheme.space[object[key]]
+  }),
+  {}
+) : {};
 const Row = ({
   className,
   "data-testid": dataTestId,
@@ -18,29 +21,37 @@ const Row = ({
   gap,
   padding,
   style
-}) => /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${row} ${sprinkles({
-  alignItems: typeof alignItems === "object" ? alignItems : {
-    xxsmall: alignItems
-  },
-  gap: typeof gap === "object" ? mapRepsonsiveGap(gap) : {
-    xxsmall: gap ? consoleLightTheme.space[gap] : void 0
-  },
-  justifyContent: typeof justifyContent === "object" ? justifyContent : {
-    xxsmall: justifyContent
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: `${className ? `${className} ` : ""}${row} ${sprinkles({
+      alignItems: typeof alignItems === "object" ? alignItems : { xxsmall: alignItems },
+      gap: typeof gap === "object" ? mapRepsonsiveGap(gap) : { xxsmall: gap ? consoleLightTheme.space[gap] : void 0 },
+      justifyContent: typeof justifyContent === "object" ? justifyContent : { xxsmall: justifyContent }
+    })}`,
+    "data-testid": dataTestId,
+    style: {
+      ...assignInlineVars({
+        ...Object.keys(templateColumn).reduce(
+          (acc, column) => ({
+            ...acc,
+            [templateColumn[column]]: typeof templateColumns === "object" ? templateColumns[column] || "" : templateColumns
+          }),
+          {}
+        ),
+        ...Object.keys(paddings).reduce(
+          (acc, localPadding) => ({
+            ...acc,
+            [paddings[localPadding]]: typeof padding === "object" ? padding[localPadding] || "" : padding
+          }),
+          {}
+        )
+      }),
+      ...style
+    },
+    children
   }
-})}`, "data-testid": dataTestId, style: {
-  ...assignInlineVars({
-    ...Object.keys(templateColumn).reduce((acc, column) => ({
-      ...acc,
-      [templateColumn[column]]: typeof templateColumns === "object" ? templateColumns[column] || "" : templateColumns
-    }), {}),
-    ...Object.keys(paddings).reduce((acc, localPadding) => ({
-      ...acc,
-      [paddings[localPadding]]: typeof padding === "object" ? padding[localPadding] || "" : padding
-    }), {})
-  }),
-  ...style
-}, children });
+);
 export {
   Row
 };

package/dist/components/SearchInput/KeyGroup.d.ts

@@ -5,5 +5,5 @@ type KeyGroupProps = {
     disabled: ComponentProps<typeof Key>['disabled'];
     onClick?: () => void;
 };
-export declare const KeyGroup: ({ keys, disabled, onClick }: KeyGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const KeyGroup: ({ keys, disabled, onClick }: KeyGroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SearchInput/KeyGroup.js

@@ -1,13 +1,9 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Key } from "../Key/index.js";
 import { Stack } from "../Stack/index.js";
 import { clickableStack } from "./styles.css.js";
-const KeyGroup = ({
-  keys,
-  disabled,
-  onClick
-}) => /* @__PURE__ */ jsx(Stack, { className: clickableStack, direction: "row", gap: 0.5, onClick, children: keys.map((key) => /* @__PURE__ */ jsx(Key, { "data-testid": `key-${key}`, disabled, children: key }, key)) });
+const KeyGroup = ({ keys, disabled, onClick }) => /* @__PURE__ */ jsx(Stack, { className: clickableStack, direction: "row", gap: 0.5, onClick, children: keys.map((key) => /* @__PURE__ */ jsx(Key, { "data-testid": `key-${key}`, disabled, children: key }, key)) });
 export {
   KeyGroup
 };