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

package/dist/components/TimeInput/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { AlertCircleIcon, CloseIcon } from "@ultraviolet/icons";
 import { useId, useMemo, useState, useRef, useEffect } from "react";
 import { Button } from "../Button/index.js";
@@ -41,15 +41,9 @@ const TimeInput = ({
   }, [value]);
   const [time, setTime] = useState(value);
   const [period, setPeriod] = useState(defaultPeriod);
-  const [filled, setFilled] = useState(value ? {
-    h: true,
-    m: true,
-    s: true
-  } : {
-    h: false,
-    m: false,
-    s: false
-  });
+  const [filled, setFilled] = useState(
+    value ? { h: true, m: true, s: true } : { h: false, m: false, s: false }
+  );
   const refHours = useRef(null);
   const refSeconds = useRef(null);
   const refMinutes = useRef(null);
@@ -58,11 +52,7 @@ const TimeInput = ({
     if (value) {
       setTime(value);
       if (value.getTime() !== time?.getTime()) {
-        setFilled({
-          h: true,
-          m: true,
-          s: true
-        });
+        setFilled({ h: true, m: true, s: true });
       }
     }
   }, [value]);
@@ -105,9 +95,7 @@ const TimeInput = ({
     if (type === "h" && isCompleteHour(timeFormat, newValue)) {
       refMinutes.current?.focus();
     }
-    const newFilled = {
-      ...filled
-    };
+    const newFilled = { ...filled };
     newFilled[type] = true;
     setTime(newTime);
     onChange?.(newTime);
@@ -123,9 +111,7 @@ const TimeInput = ({
     } else {
       setValueByType(type, newTime, currentValue === 59 ? 0 : currentValue + 1);
     }
-    const newFilled = {
-      ...filled
-    };
+    const newFilled = { ...filled };
     newFilled[type] = true;
     setTime(newTime);
     onChange?.(newTime);
@@ -141,9 +127,7 @@ const TimeInput = ({
     } else {
       setValueByType(type, newTime, currentValue === 0 ? 59 : currentValue - 1);
     }
-    const newFilled = {
-      ...filled
-    };
+    const newFilled = { ...filled };
     newFilled[type] = true;
     setTime(newTime);
     onChange?.(newTime);
@@ -169,103 +153,208 @@ const TimeInput = ({
     }
   };
   return /* @__PURE__ */ jsxs(Stack, { className, gap: 0.5, style, children: [
-    label || labelDescription ? /* @__PURE__ */ jsx(Label, { htmlFor: id ?? localId, labelDescription, required, size, children: label }) : null,
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "center", "aria-label": ariaLabel, "aria-required": required, className: timeinputWrapper({
-      disabled,
-      error: !!error,
-      readOnly,
-      size
-    }), "data-testid": dataTestId, direction: "row", id, justifyContent: "space-between", onBlur, onClick: () => refHours.current?.focus(), onFocus, children: [
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
-        TIME_KEYS.map((type) => {
-          const computedRef = () => {
-            if (type === "h") {
-              return refHours;
-            }
-            if (type === "m") {
-              return refMinutes;
-            }
-            return refSeconds;
-          };
-          const fullName = () => {
-            if (type === "h") {
-              return "hours";
-            }
-            if (type === "m") {
-              return "minutes";
-            }
-            return "seconds";
-          };
-          const computeMaxValue = () => {
-            if (type === "h" && timeFormat === 12) {
-              return 12;
-            }
-            if (type === "h" && timeFormat === 24) {
-              return 23;
-            }
-            return 59;
-          };
-          return /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
-            /* @__PURE__ */ jsx("input", { "aria-label": ariaLabel, "aria-valuemax": computeMaxValue(), "aria-valuemin": type === "h" && timeFormat === 12 ? 1 : 0, "aria-valuenow": filled[type] ? Number.parseInt(format(getValueByType(type, time), type, timeFormat), 10) : void 0, autoComplete: "off", autoFocus: autoFocus && type === "h", className: timeinput(), "data-size": size, "data-testid": `${fullName()}-input`, disabled, onChange: (event) => {
-              if (!readOnly && !disabled) {
-                const key = getLastTypedChar(event.target.value, getValueByType(type, time));
-                if (isNumber(key)) {
-                  handleChange(type, Number.parseInt(key, 10));
+    label || labelDescription ? /* @__PURE__ */ jsx(
+      Label,
+      {
+        htmlFor: id ?? localId,
+        labelDescription,
+        required,
+        size,
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        alignItems: "center",
+        "aria-label": ariaLabel,
+        "aria-required": required,
+        className: timeinputWrapper({
+          disabled,
+          error: !!error,
+          readOnly,
+          size
+        }),
+        "data-testid": dataTestId,
+        direction: "row",
+        id,
+        justifyContent: "space-between",
+        onBlur,
+        onClick: () => refHours.current?.focus(),
+        onFocus,
+        children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+            TIME_KEYS.map((type) => {
+              const computedRef = () => {
+                if (type === "h") {
+                  return refHours;
                 }
-              }
-            }, onClick: (event) => {
-              event.stopPropagation();
-            }, onKeyDown: (event) => {
-              if (!readOnly && !disabled) {
-                if (event.key === "ArrowUp") {
-                  event.preventDefault();
-                  handleIncrease(type);
-                } else if (event.key === "ArrowDown") {
-                  event.preventDefault();
-                  handleDecrease(type);
-                } else if (event.key === "ArrowLeft") {
-                  event.preventDefault();
-                  handlePrevious(type);
-                } else if (event.key === "ArrowRight") {
-                  event.preventDefault();
-                  handleNext(type);
+                if (type === "m") {
+                  return refMinutes;
+                }
+                return refSeconds;
+              };
+              const fullName = () => {
+                if (type === "h") {
+                  return "hours";
+                }
+                if (type === "m") {
+                  return "minutes";
+                }
+                return "seconds";
+              };
+              const computeMaxValue = () => {
+                if (type === "h" && timeFormat === 12) {
+                  return 12;
                 }
+                if (type === "h" && timeFormat === 24) {
+                  return 23;
+                }
+                return 59;
+              };
+              return /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    "aria-label": ariaLabel,
+                    "aria-valuemax": computeMaxValue(),
+                    "aria-valuemin": type === "h" && timeFormat === 12 ? 1 : 0,
+                    "aria-valuenow": filled[type] ? Number.parseInt(
+                      format(getValueByType(type, time), type, timeFormat),
+                      10
+                    ) : void 0,
+                    autoComplete: "off",
+                    autoFocus: autoFocus && type === "h",
+                    className: timeinput(),
+                    "data-size": size,
+                    "data-testid": `${fullName()}-input`,
+                    disabled,
+                    onChange: (event) => {
+                      if (!readOnly && !disabled) {
+                        const key = getLastTypedChar(
+                          event.target.value,
+                          getValueByType(type, time)
+                        );
+                        if (isNumber(key)) {
+                          handleChange(type, Number.parseInt(key, 10));
+                        }
+                      }
+                    },
+                    onClick: (event) => {
+                      event.stopPropagation();
+                    },
+                    onKeyDown: (event) => {
+                      if (!readOnly && !disabled) {
+                        if (event.key === "ArrowUp") {
+                          event.preventDefault();
+                          handleIncrease(type);
+                        } else if (event.key === "ArrowDown") {
+                          event.preventDefault();
+                          handleDecrease(type);
+                        } else if (event.key === "ArrowLeft") {
+                          event.preventDefault();
+                          handlePrevious(type);
+                        } else if (event.key === "ArrowRight") {
+                          event.preventDefault();
+                          handleNext(type);
+                        }
+                      }
+                    },
+                    placeholder: placeholder[type],
+                    readOnly,
+                    ref: computedRef(),
+                    role: "spinbutton",
+                    value: filled[type] ? format(getValueByType(type, time), type, timeFormat) : ""
+                  }
+                ),
+                type === "s" ? null : /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    className: timeSeparator,
+                    prominence: "default",
+                    sentiment: "neutral",
+                    variant: "body",
+                    children: ":"
+                  }
+                )
+              ] }, type);
+            }),
+            timeFormat === 12 ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                "aria-label": ariaLabel,
+                "aria-valuemax": 12,
+                "aria-valuemin": 0,
+                "aria-valuenow": period === "am" ? 0 : 12,
+                "aria-valuetext": period,
+                autoComplete: "off",
+                className: timeinput({ period: true }),
+                "data-size": size,
+                "data-testid": "am-pm-input",
+                disabled,
+                onChange: (event) => {
+                  if (!readOnly && !disabled) {
+                    const key = event.target.value.slice(-1);
+                    if (isAOrP(key)) {
+                      handleChangePeriod(key);
+                    }
+                  }
+                },
+                onClick: (event) => event.stopPropagation(),
+                onKeyDown: (event) => {
+                  if (!readOnly && !disabled) {
+                    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                      event.preventDefault();
+                      handleChangePeriod(period === "am" ? "p" : "a");
+                    } else if (event.key === "ArrowLeft") {
+                      event.preventDefault();
+                      refSeconds.current?.focus();
+                    }
+                  }
+                },
+                placeholder: placeholder.period ?? "AM",
+                readOnly,
+                ref: refPeriod,
+                role: "spinbutton",
+                value: period?.toUpperCase()
               }
-            }, placeholder: placeholder[type], readOnly, ref: computedRef(), role: "spinbutton", value: filled[type] ? format(getValueByType(type, time), type, timeFormat) : "" }),
-            type === "s" ? null : /* @__PURE__ */ jsx(Text, { as: "span", className: timeSeparator, prominence: "default", sentiment: "neutral", variant: "body", children: ":" })
-          ] }, type);
-        }),
-        timeFormat === 12 ? /* @__PURE__ */ jsx("input", { "aria-label": ariaLabel, "aria-valuemax": 12, "aria-valuemin": 0, "aria-valuenow": period === "am" ? 0 : 12, "aria-valuetext": period, autoComplete: "off", className: timeinput({
-          period: true
-        }), "data-size": size, "data-testid": "am-pm-input", disabled, onChange: (event) => {
-          if (!readOnly && !disabled) {
-            const key = event.target.value.slice(-1);
-            if (isAOrP(key)) {
-              handleChangePeriod(key);
-            }
-          }
-        }, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
-          if (!readOnly && !disabled) {
-            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-              event.preventDefault();
-              handleChangePeriod(period === "am" ? "p" : "a");
-            } else if (event.key === "ArrowLeft") {
-              event.preventDefault();
-              refSeconds.current?.focus();
-            }
-          }
-        }, placeholder: placeholder.period ?? "AM", readOnly, ref: refPeriod, role: "spinbutton", value: period?.toUpperCase() }) : null
-      ] }),
-      error || clearable ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
-        error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
-        clearable ? /* @__PURE__ */ jsx(Button, { "aria-label": "clear value", "data-testid": "clear", disabled: disabled || readOnly, onClick: (event) => {
-          event.stopPropagation();
-          setTime(void 0);
-          onChange?.(void 0);
-        }, sentiment: "neutral", size: "small", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
-      ] }) : null
-    ] }),
-    helper || error ? /* @__PURE__ */ jsx(Text, { as: "p", disabled, prominence: error ? "default" : "weak", sentiment: error ? "danger" : "neutral", variant: "caption", children: error || helper }) : null
+            ) : null
+          ] }),
+          error || clearable ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
+            error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
+            clearable ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "clear value",
+                "data-testid": "clear",
+                disabled: disabled || readOnly,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setTime(void 0);
+                  onChange?.(void 0);
+                },
+                sentiment: "neutral",
+                size: "small",
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx(CloseIcon, {})
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    ),
+    helper || error ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "p",
+        disabled,
+        prominence: error ? "default" : "weak",
+        sentiment: error ? "danger" : "neutral",
+        variant: "caption",
+        children: error || helper
+      }
+    ) : null
   ] });
 };
 export {

package/dist/components/Toaster/Toaster.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { toast as toast$1 } from "react-toastify";
 import { CloseButton } from "./components/CloseButton.js";
 import { Content } from "./components/Content.js";

package/dist/components/Toaster/ToasterContainer.d.ts

@@ -34,5 +34,5 @@ type ToastContainerProps = {
  * Toaster is separated in two parts, first the `ToastContainer` which is where the div of the toast will be rendered,
  * and second the `toast()` function which is used to display the toast.
  */
-export declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, containerId, style, }: ToastContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, containerId, style, }: ToastContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Toaster/ToasterContainer.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ToastContainer as ToastContainer$1, Slide } from "react-toastify";
 import { AUTOCLOSE_DELAY } from "./constants.js";
 import { toaster } from "./styles.css.js";
@@ -12,7 +12,26 @@ const ToastContainer = ({
   autoClose,
   containerId = "toaster",
   style
-}) => /* @__PURE__ */ jsx(ToastContainer$1, { autoClose: autoClose ?? AUTOCLOSE_DELAY, className: `${className ? `${className} ` : ""}${toaster}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, pauseOnFocusLoss: false, pauseOnHover: false, position, stacked: true, style, transition: Slide });
+}) => /* @__PURE__ */ jsx(
+  ToastContainer$1,
+  {
+    autoClose: autoClose ?? AUTOCLOSE_DELAY,
+    className: `${className ? `${className} ` : ""}${toaster}`,
+    containerId,
+    "data-testid": dataTestId,
+    draggable: false,
+    hideProgressBar: true,
+    icon: false,
+    limit,
+    newestOnTop,
+    pauseOnFocusLoss: false,
+    pauseOnHover: false,
+    position,
+    stacked: true,
+    style,
+    transition: Slide
+  }
+);
 export {
   ToastContainer
 };

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

@@ -1,3 +1,3 @@
 import type { ComponentProps } from 'react';
 import { Button } from '../../Button';
-export declare const ToastButton: ({ variant, className, ...props }: ComponentProps<typeof Button>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToastButton: ({ variant, className, ...props }: ComponentProps<typeof Button>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toaster/components/CloseButton.d.ts

@@ -4,5 +4,5 @@ type CloseButtonProps = {
     closeToast?: () => void;
     sentiment: SENTIMENT;
 };
-export declare const CloseButton: ({ closeToast, sentiment, }: CloseButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CloseButton: ({ closeToast, sentiment, }: CloseButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Toaster/components/CloseButton.js

@@ -1,12 +1,22 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons";
 import { Button } from "../../Button/index.js";
 import { closeButtonToaster } from "../styles.css.js";
 const CloseButton = ({
   closeToast,
   sentiment = "success"
-}) => /* @__PURE__ */ jsx(Button, { "aria-label": "close", className: closeButtonToaster, onClick: closeToast, sentiment, size: "xsmall", children: /* @__PURE__ */ jsx(CloseIcon, {}) });
+}) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    "aria-label": "close",
+    className: closeButtonToaster,
+    onClick: closeToast,
+    sentiment,
+    size: "xsmall",
+    children: /* @__PURE__ */ jsx(CloseIcon, {})
+  }
+);
 export {
   CloseButton
 };

package/dist/components/Toaster/components/Content.d.ts

@@ -2,5 +2,5 @@ import type { ReactNode } from 'react';
 type ContentProps = {
     children?: ReactNode;
 };
-export declare const Content: ({ children }: ContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Content: ({ children }: ContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Toaster/components/Content.js

@@ -1,10 +1,8 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Stack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
-const Content = ({
-  children
-}) => /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 2, width: "100%", children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "bodySmallStrong", children }) : children });
+const Content = ({ children }) => /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 2, width: "100%", children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "bodySmallStrong", children }) : children });
 export {
   Content
 };

package/dist/components/Toaster/components/Link.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentProps } from 'react';
 import { Link } from '../../Link';
-export declare const ToastLink: ({ ...props }: ComponentProps<typeof Link>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToastLink: ({ ...props }: ComponentProps<typeof Link>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 export declare const Toast: {
-    Button: ({ variant, className, ...props }: import("react").ComponentProps<typeof import("..").Button>) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Link: ({ ...props }: import("react").ComponentProps<typeof import("..").Link>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Button: ({ variant, className, ...props }: import("react").ComponentProps<typeof import("..").Button>) => import("react/jsx-runtime").JSX.Element;
+    Link: ({ ...props }: import("react").ComponentProps<typeof import("..").Link>) => import("react/jsx-runtime").JSX.Element;
 };
 export { toast } from './Toaster';
 export { ToastContainer } from './ToasterContainer';