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

package/dist/components/Tabs/TabMenuItem.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Menu } from "../Menu/index.js";
 import { tabsTextSelected } from "./styles.css.js";
@@ -10,17 +10,26 @@ const TabMenuItem = ({
   onClick,
   ...props
 }) => {
-  const {
-    selected,
-    onChange
-  } = useTabsContext();
-  const isSelected = useMemo(() => value !== void 0 && selected === value, [value, selected]);
-  return /* @__PURE__ */ jsx(Menu.Item, { "aria-selected": isSelected, className: tabsTextSelected[isSelected ? "selected" : "default"], onClick: (event) => {
-    if (value !== void 0) {
-      onChange(value);
+  const { selected, onChange } = useTabsContext();
+  const isSelected = useMemo(
+    () => value !== void 0 && selected === value,
+    [value, selected]
+  );
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      "aria-selected": isSelected,
+      className: tabsTextSelected[isSelected ? "selected" : "default"],
+      onClick: (event) => {
+        if (value !== void 0) {
+          onChange(value);
+        }
+        onClick?.(event);
+      },
+      ...props,
+      children
     }
-    onClick?.(event);
-  }, ...props, children });
+  );
 };
 export {
   TabMenuItem

package/dist/components/Tabs/TabsContext.js

@@ -1,5 +1,7 @@
 import { createContext, useContext } from "react";
-const TabsContext = createContext({});
+const TabsContext = createContext(
+  {}
+);
 const useTabsContext = () => useContext(TabsContext);
 export {
   TabsContext,

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

@@ -10,7 +10,7 @@ type TabsProps = {
  * Tabs component is used to display a set of tabs with a single tab selected at a time.
  */
 export declare const Tabs: {
-    ({ children, onChange, moreDisclosure, selected, className, "data-testid": dataTestId, ...props }: TabsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, onChange, moreDisclosure, selected, className, "data-testid": dataTestId, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
     Tab: import("react").ForwardRefExoticComponent<Omit<{
         as?: import("react").ElementType | undefined;
         badge?: ReactNode;
@@ -24,7 +24,7 @@ export declare const Tabs: {
         tooltip?: string;
         value?: string | number;
         style?: import("react").CSSProperties;
-    } & Omit<any, "tooltip" | "disabled" | "as" | "className" | "children" | "role" | "value" | "badge" | "counter">, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    } & Omit<any, "tooltip" | "disabled" | "as" | "className" | "children" | "value" | "role" | "badge" | "counter">, "ref"> & import("react").RefAttributes<HTMLElement>>;
     Menu: import("react").ForwardRefExoticComponent<{
         children: ReactNode;
         disclosure: ReactNode;
@@ -48,6 +48,6 @@ export declare const Tabs: {
         'data-testid'?: string;
         searchText?: string;
         style?: import("react").CSSProperties;
-    } & import("react").RefAttributes<HTMLElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    } & import("react").RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/Tabs/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useEffect, Children, isValidElement, cloneElement } from "react";
 import { tabsContainer, tabsMenu, tabsMenuContainer } from "./styles.css.js";
 import { Tab } from "./Tab.js";
@@ -19,20 +19,22 @@ const Tabs = ({
   const tabsRef = useRef({});
   const moreStaticRef = useRef(null);
   const [displayMore, setDisplayMore] = useState(false);
-  const value = useMemo(() => ({
-    onChange,
-    selected
-  }), [selected, onChange]);
+  const value = useMemo(
+    () => ({
+      onChange,
+      selected
+    }),
+    [selected, onChange]
+  );
   useEffect(() => {
     setDisplayMore(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
   }, [children]);
   useEffect(() => {
-    const tab = tabsRef.current.querySelector(`[role='tab'][aria-selected='true']`);
+    const tab = tabsRef.current.querySelector(
+      `[role='tab'][aria-selected='true']`
+    );
     if (tab && tabsRef.current.scrollTo) {
-      tabsRef.current.scrollTo({
-        behavior: "smooth",
-        left: tab.offsetLeft
-      });
+      tabsRef.current.scrollTo({ behavior: "smooth", left: tab.offsetLeft });
     }
   }, [selected]);
   useEffect(() => {
@@ -61,10 +63,28 @@ const Tabs = ({
     }
     return null;
   });
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${tabsContainer}`, "data-testid": dataTestId, ref: tabsRef, role: "tablist", ...props, children: [
-    children,
-    displayMore ? /* @__PURE__ */ jsx(TabMenu, { className: tabsMenu, disclosure: moreDisclosure, ref: moreStaticRef, children: /* @__PURE__ */ jsx("div", { className: tabsMenuContainer, children: menuItemChildren }) }) : null
-  ] }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${tabsContainer}`,
+      "data-testid": dataTestId,
+      ref: tabsRef,
+      role: "tablist",
+      ...props,
+      children: [
+        children,
+        displayMore ? /* @__PURE__ */ jsx(
+          TabMenu,
+          {
+            className: tabsMenu,
+            disclosure: moreDisclosure,
+            ref: moreStaticRef,
+            children: /* @__PURE__ */ jsx("div", { className: tabsMenuContainer, children: menuItemChildren })
+          }
+        ) : null
+      ]
+    }
+  ) });
 };
 Tabs.Tab = Tab;
 Tabs.Menu = TabMenu;

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

@@ -17,5 +17,5 @@ type TagProps = {
  * Tag component is used to display a short text description of an item. It can be used to display a category
  * or any other metadata.
  */
-export declare const Tag: ({ children, isLoading, onClose, copiable, copyText, copiedText, disabled, sentiment, className, style, "data-testid": dataTestId, }: TagProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ children, isLoading, onClose, copiable, copyText, copiedText, disabled, sentiment, className, style, "data-testid": dataTestId, }: TagProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tag/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 { CloseIcon } from "@ultraviolet/icons";
 import { useMemo } from "react";
 import useClipboard from "react-use-clipboard";
@@ -15,8 +15,31 @@ const TagInner = ({
   onClose,
   disabled = false
 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Text, { "aria-disabled": disabled, as: "span", className: textTag, oneLine: true, variant: "caption", children }),
-  onClose && !isLoading ? /* @__PURE__ */ jsx(Button, { "aria-label": "Close tag", className: closeButtonTag, "data-testid": "close-tag", disabled, onClick: onClose, sentiment: "neutral", size: "small", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }) : null,
+  /* @__PURE__ */ jsx(
+    Text,
+    {
+      "aria-disabled": disabled,
+      as: "span",
+      className: textTag,
+      oneLine: true,
+      variant: "caption",
+      children
+    }
+  ),
+  onClose && !isLoading ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Close tag",
+      className: closeButtonTag,
+      "data-testid": "close-tag",
+      disabled,
+      onClick: onClose,
+      sentiment: "neutral",
+      size: "small",
+      variant: "ghost",
+      children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" })
+    }
+  ) : null,
   isLoading ? /* @__PURE__ */ jsx(Loader, { active: true, size: "small" }) : null
 ] });
 const Tag = ({
@@ -45,16 +68,26 @@ const Tag = ({
     successDuration: COPY_DURATION
   });
   if (copiable && !disabled) {
-    return /* @__PURE__ */ jsx(Tooltip, { text: isCopied ? copiedText : copyText, children: /* @__PURE__ */ jsx("button", { className: `${className ? `${className} ` : ""}${containerTag({
-      copiable,
-      disabled,
-      sentiment
-    })}`, "data-testid": dataTestId, disabled, onClick: setCopied, children: /* @__PURE__ */ jsx(TagInner, { disabled, isLoading, onClose, children }) }) });
+    return /* @__PURE__ */ jsx(Tooltip, { text: isCopied ? copiedText : copyText, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `${className ? `${className} ` : ""}${containerTag({ copiable, disabled, sentiment })}`,
+        "data-testid": dataTestId,
+        disabled,
+        onClick: setCopied,
+        children: /* @__PURE__ */ jsx(TagInner, { disabled, isLoading, onClose, children })
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx("span", { className: `${className ? `${className} ` : ""}${containerTag({
-    disabled,
-    sentiment
-  })}`, "data-testid": dataTestId, style, children: /* @__PURE__ */ jsx(TagInner, { disabled, isLoading, onClose, children }) });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `${className ? `${className} ` : ""}${containerTag({ disabled, sentiment })}`,
+      "data-testid": dataTestId,
+      style,
+      children: /* @__PURE__ */ jsx(TagInner, { disabled, isLoading, onClose, children })
+    }
+  );
 };
 export {
   Tag

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

@@ -33,5 +33,5 @@ type TagInputProps = {
 /**
  * TagInput is a component that allows users to input tags.
  */
-export declare const TagInput: ({ disabled, id, name, onChange, placeholder, value, className, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, required, size, error, success, helper, readOnly, tooltip, clearable, style, }: TagInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TagInput: ({ disabled, id, name, onChange, placeholder, value, className, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, required, size, error, success, helper, readOnly, tooltip, clearable, style, }: TagInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TagInput/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CloseIcon, CheckCircleOutlineIcon, AlertCircleIcon } from "@ultraviolet/icons";
 import { useState, useId, useEffect, useRef, useMemo } from "react";
 import { Button } from "../Button/index.js";
@@ -14,13 +14,9 @@ const STATUS = {
   IDLE: "idle",
   LOADING: "loading"
 };
-const convertTagArrayToTagStateArray = (tags) => (tags ?? [])?.map((tag, index) => typeof tag === "object" ? {
-  ...tag,
-  index: getUUID(`tag-${index}`)
-} : {
-  index: getUUID(`tag-${index}`),
-  label: tag
-});
+const convertTagArrayToTagStateArray = (tags) => (tags ?? [])?.map(
+  (tag, index) => typeof tag === "object" ? { ...tag, index: getUUID(`tag-${index}`) } : { index: getUUID(`tag-${index}`), label: tag }
+);
 const TagInput = ({
   disabled = false,
   id,
@@ -43,7 +39,9 @@ const TagInput = ({
   clearable = false,
   style
 }) => {
-  const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(value));
+  const [tagInputState, setTagInput] = useState(
+    convertTagArrayToTagStateArray(value)
+  );
   const [input, setInput] = useState("");
   const [status, setStatus] = useState({});
   const uniqueId = useId();
@@ -53,7 +51,9 @@ const TagInput = ({
   }, [value, setTagInput]);
   const inputRef = useRef(null);
   const dispatchOnChange = (newState) => {
-    const changes = newState.map((tag) => typeof tag === "object" ? tag?.label : tag);
+    const changes = newState.map(
+      (tag) => typeof tag === "object" ? tag?.label : tag
+    );
     onChange?.(changes);
   };
   const handleContainerClick = () => {
@@ -65,43 +65,36 @@ const TagInput = ({
     setInput(e.target.value);
   };
   const addTag = () => {
-    const newTagInput = input ? [...tagInputState, {
-      index: getUUID("tag"),
-      label: input
-    }] : tagInputState;
+    const newTagInput = input ? [...tagInputState, { index: getUUID("tag"), label: input }] : tagInputState;
     setInput("");
     setTagInput(newTagInput);
     if (newTagInput.length !== tagInputState.length && newTagInput) {
-      setStatus({
-        [newTagInput[newTagInput.length - 1].index]: STATUS.LOADING
-      });
+      const tag = newTagInput.at(-1);
+      if (tag) {
+        setStatus({
+          [tag.index]: STATUS.LOADING
+        });
+      }
     }
     try {
       dispatchOnChange(newTagInput);
-      if (newTagInput) {
-        setStatus({
-          [newTagInput[newTagInput.length - 1].index]: STATUS.IDLE
-        });
+      const tag = newTagInput.at(-1);
+      if (tag) {
+        setStatus({ [tag.index]: STATUS.IDLE });
       }
     } catch {
       setTagInput(tagInputState);
     }
   };
   const deleteTag = (tagIndex) => {
-    setStatus({
-      [tagIndex]: STATUS.LOADING
-    });
-    const findIndex = tagInputState.findIndex(({
-      index
-    }) => index === tagIndex);
+    setStatus({ [tagIndex]: STATUS.LOADING });
+    const findIndex = tagInputState.findIndex(({ index }) => index === tagIndex);
     const newTagInput = [...tagInputState];
     newTagInput.splice(findIndex, 1);
     try {
       dispatchOnChange(newTagInput);
       setTagInput(newTagInput);
-      setStatus({
-        [tagIndex]: STATUS.IDLE
-      });
+      setStatus({ [tagIndex]: STATUS.IDLE });
     } catch {
       setTagInput(tagInputState);
     }
@@ -114,7 +107,10 @@ const TagInput = ({
     if (event.key === "Backspace" && inputRef?.current?.selectionStart === 0 && tagInputState.length > 0) {
       event.preventDefault();
       if (tagInputState) {
-        deleteTag(tagInputState[tagInputState.length - 1].index);
+        const tag = tagInputState.at(-1);
+        if (tag) {
+          deleteTag(tag.index);
+        }
       }
     }
   };
@@ -134,28 +130,111 @@ const TagInput = ({
   }, [error, success]);
   const computedClearable = clearable && tagInputState.length > 0;
   return /* @__PURE__ */ jsxs(Stack, { className, gap: "0.5", children: [
-    label || labelDescription ? /* @__PURE__ */ jsx(Label, { htmlFor: id ?? localId, labelDescription, required, size, children: label }) : null,
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${tagInputContainer({
-      size
-    })}`, "data-disabled": disabled, "data-error": !!error, "data-readonly": readOnly, "data-success": !!success, "data-testid": dataTestId, onClick: handleContainerClick, onKeyDown: (event) => {
-      if ([" ", "Enter"].includes(event.key)) {
-        handleContainerClick();
+    label || labelDescription ? /* @__PURE__ */ jsx(
+      Label,
+      {
+        htmlFor: id ?? localId,
+        labelDescription,
+        required,
+        size,
+        children: label
       }
-    }, children: [
-      /* @__PURE__ */ jsxs("div", { className: tagInputDataContainer, children: [
-        tagInputState.map((tag) => /* @__PURE__ */ jsx(Tag, { disabled, isLoading: status[tag.index] === STATUS.LOADING, onClose: !readOnly ? (e) => {
-          e.stopPropagation();
-          deleteTag(tag.index);
-        } : void 0, sentiment: "neutral", children: tag.label }, tag.index)),
-        !disabled ? /* @__PURE__ */ jsx("input", { "aria-label": ariaLabel, className: tagInput, "data-size": size, id: localId, name, onBlur: addTag, onChange: onInputChange, onKeyDown: handleInputKeydown, placeholder: tagInputState.length === 0 ? placeholder : "", readOnly, ref: inputRef, style, type: "text", value: input }) : null
-      ] }),
-      computedClearable || success || error ? /* @__PURE__ */ jsxs("div", { className: tagInputStateContainer, children: [
-        computedClearable ? /* @__PURE__ */ jsx(Button, { "aria-label": "clear value", disabled, onClick: clearAll, sentiment: "neutral", size: "xsmall", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null,
-        success ? /* @__PURE__ */ jsx(CheckCircleOutlineIcon, { disabled, sentiment: "success", size: "small" }) : null,
-        error ? /* @__PURE__ */ jsx(AlertCircleIcon, { disabled, sentiment: "danger", size: "small" }) : null
-      ] }) : null
-    ] }) }) }),
-    error || typeof success === "string" || helper ? /* @__PURE__ */ jsx(Text, { as: "span", disabled: disabled || readOnly, prominence: !error && !success ? "weak" : void 0, sentiment: helperSentiment, variant: "caption", children: error || success || helper }) : null
+    ) : null,
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${className ? `${className} ` : ""}${tagInputContainer({ size })}`,
+        "data-disabled": disabled,
+        "data-error": !!error,
+        "data-readonly": readOnly,
+        "data-success": !!success,
+        "data-testid": dataTestId,
+        onClick: handleContainerClick,
+        onKeyDown: (event) => {
+          if ([" ", "Enter"].includes(event.key)) {
+            handleContainerClick();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: tagInputDataContainer, children: [
+            tagInputState.map((tag) => /* @__PURE__ */ jsx(
+              Tag,
+              {
+                disabled,
+                isLoading: status[tag.index] === STATUS.LOADING,
+                onClose: !readOnly ? (e) => {
+                  e.stopPropagation();
+                  deleteTag(tag.index);
+                } : void 0,
+                sentiment: "neutral",
+                children: tag.label
+              },
+              tag.index
+            )),
+            !disabled ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                "aria-label": ariaLabel,
+                className: tagInput,
+                "data-size": size,
+                id: localId,
+                name,
+                onBlur: addTag,
+                onChange: onInputChange,
+                onKeyDown: handleInputKeydown,
+                placeholder: tagInputState.length === 0 ? placeholder : "",
+                readOnly,
+                ref: inputRef,
+                style,
+                type: "text",
+                value: input
+              }
+            ) : null
+          ] }),
+          computedClearable || success || error ? /* @__PURE__ */ jsxs("div", { className: tagInputStateContainer, children: [
+            computedClearable ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "clear value",
+                disabled,
+                onClick: clearAll,
+                sentiment: "neutral",
+                size: "xsmall",
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx(CloseIcon, {})
+              }
+            ) : null,
+            success ? /* @__PURE__ */ jsx(
+              CheckCircleOutlineIcon,
+              {
+                disabled,
+                sentiment: "success",
+                size: "small"
+              }
+            ) : null,
+            error ? /* @__PURE__ */ jsx(
+              AlertCircleIcon,
+              {
+                disabled,
+                sentiment: "danger",
+                size: "small"
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    ) }) }),
+    error || typeof success === "string" || helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        disabled: disabled || readOnly,
+        prominence: !error && !success ? "weak" : void 0,
+        sentiment: helperSentiment,
+        variant: "caption",
+        children: error || success || helper
+      }
+    ) : null
   ] });
 };
 export {

package/dist/components/TagInput/styles.css.d.ts

@@ -7,12 +7,15 @@ export declare const tagInputContainer: import("@vanilla-extract/recipes").Runti
     size: {
         large: {
             padding: `calc(var(--${string}) - 1px) var(--${string})`;
+            height: `var(--${string})`;
         };
         small: {
             padding: `calc(var(--${string}) - 1px) var(--${string})`;
+            height: `var(--${string})`;
         };
         medium: {
             padding: `calc(var(--${string}) - 1px) var(--${string})`;
+            height: `var(--${string})`;
         };
     };
 }>;

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

@@ -40,5 +40,5 @@ type TagListProps = {
 /**
  * This component is used to display a list of tags with a threshold and a popover when there are too many tags.
  */
-export declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, popoverPlacement, popoverMaxHeight, copiable, copyText, copiedText, className, "data-testid": dataTestId, style, }: TagListProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, popoverPlacement, popoverMaxHeight, copiable, copyText, copiedText, className, "data-testid": dataTestId, style, }: TagListProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};