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

package/dist/components/DateInput/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarRangeIcon } from "@ultraviolet/icons";
 import { useMemo, useState, useRef, useEffect } from "react";
 import { Card } from "../Card/index.js";
@@ -70,7 +70,9 @@ const DateInput = ({
     }
     return (/* @__PURE__ */ new Date()).getFullYear();
   }, [endDate, selectsRange, startDate, value]);
-  const [computedValue, setValue] = useState(value && !selectsRange ? new Date(value) : null);
+  const [computedValue, setValue] = useState(
+    value && !selectsRange ? new Date(value) : null
+  );
   const [computedRange, setRange] = useState({
     end: endDate ?? null,
     start: startDate ?? null
@@ -78,43 +80,83 @@ const DateInput = ({
   const [isPopupVisible, setVisible] = useState(false);
   const [monthToShow, setMonthToShow] = useState(defaultMonthToShow);
   const [yearToShow, setYearToShow] = useState(defaultYearToShow);
-  const [inputValue, setInputValue] = useState(formatValue(computedValue, computedRange, showMonthYearPicker, selectsRange, format));
+  const [inputValue, setInputValue] = useState(
+    formatValue(
+      computedValue,
+      computedRange,
+      showMonthYearPicker,
+      selectsRange,
+      format
+    )
+  );
   const [hoveredDate, setHoveredDate] = useState(null);
   const refInput = useRef(null);
   const popupRef = useRef(null);
   const MONTHS = getMonths(locale);
   const DAYS = getDays(locale);
   const MONTHS_ARR = getLocalizedMonths(locale);
-  const valueContext = useMemo(() => ({
-    DAYS,
-    disabled,
-    excludeDates,
-    format,
-    hoveredDate,
-    MONTHS,
-    MONTHS_ARR,
-    maxDate,
-    minDate,
-    monthToShow,
-    onChange,
-    range: computedRange,
-    readOnly,
-    selectsRange,
-    setHoveredDate,
-    setInputValue,
-    setMonthToShow,
-    setRange,
-    setValue,
-    setVisible,
-    setYearToShow,
-    showMonthYearPicker,
-    value: computedValue,
-    yearToShow
-  }), [showMonthYearPicker, disabled, readOnly, selectsRange, computedValue, computedRange, monthToShow, yearToShow, excludeDates, maxDate, minDate, MONTHS, MONTHS_ARR, DAYS, onChange, format, setInputValue, setVisible, hoveredDate, setHoveredDate]);
+  const valueContext = useMemo(
+    () => ({
+      DAYS,
+      disabled,
+      excludeDates,
+      format,
+      hoveredDate,
+      MONTHS,
+      MONTHS_ARR,
+      maxDate,
+      minDate,
+      monthToShow,
+      onChange,
+      range: computedRange,
+      readOnly,
+      selectsRange,
+      setHoveredDate,
+      setInputValue,
+      setMonthToShow,
+      setRange,
+      setValue,
+      setVisible,
+      setYearToShow,
+      showMonthYearPicker,
+      value: computedValue,
+      yearToShow
+    }),
+    [
+      showMonthYearPicker,
+      disabled,
+      readOnly,
+      selectsRange,
+      computedValue,
+      computedRange,
+      monthToShow,
+      yearToShow,
+      excludeDates,
+      maxDate,
+      minDate,
+      MONTHS,
+      MONTHS_ARR,
+      DAYS,
+      onChange,
+      format,
+      setInputValue,
+      setVisible,
+      hoveredDate,
+      setHoveredDate
+    ]
+  );
   useEffect(() => {
     if (value && !selectsRange) {
       setValue(new Date(value));
-      setInputValue(formatValue(new Date(value), null, showMonthYearPicker, selectsRange, format));
+      setInputValue(
+        formatValue(
+          new Date(value),
+          null,
+          showMonthYearPicker,
+          selectsRange,
+          format
+        )
+      );
     }
     if (selectsRange) {
       setRange({
@@ -122,18 +164,26 @@ const DateInput = ({
         start: startDate ?? computedRange.start
       });
     }
-  }, [endDate, startDate, value, computedRange.start, computedRange.end, selectsRange, format, showMonthYearPicker]);
+  }, [
+    endDate,
+    startDate,
+    value,
+    computedRange.start,
+    computedRange.end,
+    selectsRange,
+    format,
+    showMonthYearPicker
+  ]);
   const manageOnChange = (event) => {
     const newValue = event.currentTarget.value;
     if (!newValue) {
-      onChange?.(selectsRange ? [null, null] : null);
+      onChange?.(
+        selectsRange ? [null, null] : null
+      );
     }
     if (selectsRange) {
       const computedNewRange = createDateRange(newValue, showMonthYearPicker);
-      setRange({
-        end: computedNewRange[1],
-        start: computedNewRange[0]
-      });
+      setRange({ end: computedNewRange[1], start: computedNewRange[0] });
       setInputValue(newValue);
       if (computedNewRange[0]) {
         setMonthToShow(computedNewRange[0].getMonth() + 1);
@@ -152,7 +202,10 @@ const DateInput = ({
   const onBlurInput = () => {
     if (inputValue) {
       if (selectsRange) {
-        const computedNewRange = createDateRange(inputValue, showMonthYearPicker);
+        const computedNewRange = createDateRange(
+          inputValue,
+          showMonthYearPicker
+        );
         onChange?.(computedNewRange, void 0);
       } else {
         const computedDate = createDate(inputValue, showMonthYearPicker);
@@ -160,32 +213,110 @@ const DateInput = ({
       }
     }
   };
-  return /* @__PURE__ */ jsx(DateInputContext.Provider, { value: valueContext, children: /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${dateinputContainer}`, "data-testid": dataTestId, id, onBlur, onClick: () => {
-    if (!isPopupVisible) {
-      setVisible(true);
-    }
-  }, onFocus, onKeyDown: (event) => {
-    if ([" ", "Enter"].includes(event.key) && !isPopupVisible) {
-      setVisible(true);
-    }
-  }, ref: popupRef, style, children: input === "text" ? /* @__PURE__ */ jsx(CalendarPopup, { content: /* @__PURE__ */ jsx(CalendarContent, {}), refInput, setVisible, visible: isPopupVisible, children: /* @__PURE__ */ jsx(TextInput, { autoComplete: "false", autoFocus, clearable, disabled, error, helper, label, labelDescription, name, onBlur: (event) => {
-    if (!popupRef.current?.contains(event.relatedTarget)) {
-      onBlurInput();
-    }
-  }, onChange: manageOnChange, onKeyDown: (event) => {
-    if (event.key === "Enter") {
-      setVisible(!isPopupVisible);
-      onBlurInput();
+  return /* @__PURE__ */ jsx(DateInputContext.Provider, { value: valueContext, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${dateinputContainer}`,
+      "data-testid": dataTestId,
+      id,
+      onBlur,
+      onClick: () => {
+        if (!isPopupVisible) {
+          setVisible(true);
+        }
+      },
+      onFocus,
+      onKeyDown: (event) => {
+        if ([" ", "Enter"].includes(event.key) && !isPopupVisible) {
+          setVisible(true);
+        }
+      },
+      ref: popupRef,
+      style,
+      children: input === "text" ? /* @__PURE__ */ jsx(
+        CalendarPopup,
+        {
+          content: /* @__PURE__ */ jsx(CalendarContent, {}),
+          refInput,
+          setVisible,
+          visible: isPopupVisible,
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              autoComplete: "false",
+              autoFocus,
+              clearable,
+              disabled,
+              error,
+              helper,
+              label,
+              labelDescription,
+              name,
+              onBlur: (event) => {
+                if (!popupRef.current?.contains(event.relatedTarget)) {
+                  onBlurInput();
+                }
+              },
+              onChange: manageOnChange,
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  setVisible(!isPopupVisible);
+                  onBlurInput();
+                }
+              },
+              placeholder,
+              readOnly,
+              ref: refInput,
+              required,
+              size,
+              success,
+              suffix: /* @__PURE__ */ jsx(
+                CalendarRangeIcon,
+                {
+                  disabled,
+                  sentiment: "neutral",
+                  size: "medium"
+                }
+              ),
+              tooltip,
+              value: inputValue
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
+        labelDescription ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "1", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "label",
+              prominence: "strong",
+              sentiment: "neutral",
+              variant: "bodyStrong",
+              children: label
+            }
+          ),
+          labelDescription
+        ] }) : /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "label",
+            prominence: "strong",
+            sentiment: "neutral",
+            variant: "bodyStrong",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Card,
+          {
+            className: calendarContentWrapper({ disabled }),
+            disabled,
+            children: /* @__PURE__ */ jsx(CalendarContent, {})
+          }
+        )
+      ] })
     }
-  }, placeholder, readOnly, ref: refInput, required, size, success, suffix: /* @__PURE__ */ jsx(CalendarRangeIcon, { disabled, sentiment: "neutral", size: "medium" }), tooltip, value: inputValue }) }) : /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
-    labelDescription ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "1", children: [
-      /* @__PURE__ */ jsx(Text, { as: "label", prominence: "strong", sentiment: "neutral", variant: "bodyStrong", children: label }),
-      labelDescription
-    ] }) : /* @__PURE__ */ jsx(Text, { as: "label", prominence: "strong", sentiment: "neutral", variant: "bodyStrong", children: label }),
-    /* @__PURE__ */ jsx(Card, { className: calendarContentWrapper({
-      disabled
-    }), disabled, children: /* @__PURE__ */ jsx(CalendarContent, {}) })
-  ] }) }) });
+  ) });
 };
 export {
   DateInput

package/dist/components/Dialog/Context.js

@@ -1,6 +1,8 @@
 "use client";
 import { createContext, useContext } from "react";
-const DialogContext = createContext(void 0);
+const DialogContext = createContext(
+  void 0
+);
 const useDialogContext = () => {
   const context = useContext(DialogContext);
   if (!context) {

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

@@ -3,5 +3,5 @@ import { Button } from '../../Button';
 type DialogButtonProps = {
     children: ReactNode;
 } & Pick<ComponentProps<typeof Button>, 'onClick' | 'disabled' | 'tooltip' | 'style'>;
-export declare const DialogButton: ({ children, onClick, disabled, tooltip, style, }: DialogButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogButton: ({ children, onClick, disabled, tooltip, style, }: DialogButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog/components/Button.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Button } from "../../Button/index.js";
 import { useDialogContext } from "../Context.js";
 const DialogButton = ({
@@ -10,7 +10,17 @@ const DialogButton = ({
   style
 }) => {
   const context = useDialogContext();
-  return /* @__PURE__ */ jsx(Button, { disabled, onClick, sentiment: context.sentiment, style, tooltip, children });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      disabled,
+      onClick,
+      sentiment: context.sentiment,
+      style,
+      tooltip,
+      children
+    }
+  );
 };
 export {
   DialogButton

package/dist/components/Dialog/components/Buttons.d.ts

@@ -3,5 +3,5 @@ type DialogButtonsProps = {
     secondaryButton: ReactNode;
     primaryButton: ReactNode;
 };
-export declare const DialogButtons: ({ secondaryButton, primaryButton, }: DialogButtonsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogButtons: ({ secondaryButton, primaryButton, }: DialogButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog/components/Buttons.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs } from "react/jsx-runtime";
 import { Stack } from "../../Stack/index.js";
 const DialogButtons = ({
   secondaryButton,

package/dist/components/Dialog/components/CancelButton.d.ts

@@ -6,5 +6,5 @@ type DialogCancelButtonProps = {
     disabled?: ComponentProps<typeof Button>['disabled'];
     style?: CSSProperties;
 };
-export declare const DialogCancelButton: ({ children, onClick, disabled, style, }: DialogCancelButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogCancelButton: ({ children, onClick, disabled, style, }: DialogCancelButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog/components/CancelButton.js

@@ -1,12 +1,22 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Button } from "../../Button/index.js";
 const DialogCancelButton = ({
   children,
   onClick,
   disabled,
   style
-}) => /* @__PURE__ */ jsx(Button, { disabled, onClick, sentiment: "neutral", style, variant: "outlined", children });
+}) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    disabled,
+    onClick,
+    sentiment: "neutral",
+    style,
+    variant: "outlined",
+    children
+  }
+);
 export {
   DialogCancelButton
 };

package/dist/components/Dialog/components/Stack.d.ts

@@ -3,5 +3,5 @@ type DialogStackProps = {
     children: ReactNode;
     style?: CSSProperties;
 };
-export declare const DialogStack: ({ children, style }: DialogStackProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogStack: ({ children, style }: DialogStackProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog/components/Stack.js

@@ -1,10 +1,7 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Stack } from "../../Stack/index.js";
-const DialogStack = ({
-  children,
-  style
-}) => /* @__PURE__ */ jsx(Stack, { gap: 3, style, children });
+const DialogStack = ({ children, style }) => /* @__PURE__ */ jsx(Stack, { gap: 3, style, children });
 export {
   DialogStack
 };

package/dist/components/Dialog/components/Text.d.ts

@@ -3,5 +3,5 @@ type DialogTextProps = {
     children: React.ReactNode;
     style?: CSSProperties;
 };
-export declare const DialogText: ({ children, style }: DialogTextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogText: ({ children, style }: DialogTextProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog/components/Text.js

@@ -1,10 +1,7 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Text } from "../../Text/index.js";
-const DialogText = ({
-  children,
-  style
-}) => /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "neutral", style, variant: "body", children });
+const DialogText = ({ children, style }) => /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "neutral", style, variant: "body", children });
 export {
   DialogText
 };

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

@@ -6,11 +6,11 @@ type DialogProps = Pick<ComponentProps<typeof Modal>, 'ariaLabel' | 'children' |
     title: string;
     sentiment: DialogSentiment;
 };
-export declare const BaseDialog: ({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, style, }: DialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BaseDialog: ({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, style, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * The Dialog component is used to show content on top of an overlay that requires user interaction.
  */
-export declare const Dialog: (({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, style, }: DialogProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+export declare const Dialog: (({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, style, }: DialogProps) => import("react/jsx-runtime").JSX.Element) & {
     Button: ({ children, onClick, disabled, tooltip, style, }: {
         children: import("react").ReactNode;
     } & Pick<{
@@ -54,25 +54,25 @@ export declare const Dialog: (({ ariaLabel, className, children, "data-testid":
         href?: string;
         target?: string;
         download?: string;
-    } & import("react").RefAttributes<Element>, "tooltip" | "style" | "disabled" | "onClick">) => import("@emotion/react/jsx-runtime").JSX.Element;
+    } & import("react").RefAttributes<Element>, "tooltip" | "style" | "disabled" | "onClick">) => import("react/jsx-runtime").JSX.Element;
     Buttons: ({ secondaryButton, primaryButton, }: {
         secondaryButton: import("react").ReactNode;
         primaryButton: import("react").ReactNode;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     CancelButton: ({ children, onClick, disabled, style, }: {
         children: import("react").ReactNode;
         onClick: ComponentProps<typeof import("..").Button>["onClick"];
         disabled?: ComponentProps<typeof import("..").Button>["disabled"];
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     Stack: ({ children, style }: {
         children: import("react").ReactNode;
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     Text: ({ children, style }: {
         children: React.ReactNode;
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     useDialogContext: () => DialogContextType;
 };
 export {};

package/dist/components/Dialog/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 { AlertCircleIcon, CheckIcon } from "@ultraviolet/icons";
 import { useMemo } from "react";
 import { Bullet } from "../Bullet/index.js";
@@ -33,18 +33,49 @@ const BaseDialog = ({
 }) => {
   const headerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Bullet, { sentiment, children: sentiment === "warning" || sentiment === "danger" ? /* @__PURE__ */ jsx(AlertCircleIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) }),
-    /* @__PURE__ */ jsx(Text, { as: "h2", className: dialogTitle, sentiment: "neutral", variant: "headingSmallStronger", children: title })
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "h2",
+        className: dialogTitle,
+        sentiment: "neutral",
+        variant: "headingSmallStronger",
+        children: title
+      }
+    )
   ] });
-  const contextValue = useMemo(() => ({
-    sentiment
-  }), [sentiment]);
-  return /* @__PURE__ */ jsx(Modal, { ariaLabel, className: `${className ? `${className} ` : ""}${dialogXsmall}`, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, size: DIALOG_SIZE, style, children: (modalProps) => typeof children === "function" ? /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
-    headerContent,
-    children(modalProps)
-  ] }) : /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
-    headerContent,
-    children
-  ] }) });
+  const contextValue = useMemo(
+    () => ({
+      sentiment
+    }),
+    [sentiment]
+  );
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      ariaLabel,
+      className: `${className ? `${className} ` : ""}${dialogXsmall}`,
+      "data-testid": dataTestId,
+      disclosure,
+      hideOnClickOutside,
+      hideOnEsc,
+      id,
+      isClosable,
+      onBeforeClose,
+      onClose,
+      open,
+      placement,
+      size: DIALOG_SIZE,
+      style,
+      children: (modalProps) => typeof children === "function" ? /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
+        headerContent,
+        children(modalProps)
+      ] }) : /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
+        headerContent,
+        children
+      ] })
+    }
+  );
 };
 const Dialog = Object.assign(BaseDialog, {
   Button: DialogButton,

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

@@ -14,11 +14,11 @@ type DrawerProps = Pick<ComponentProps<typeof Modal>, 'ariaLabel' | 'children' |
 };
 export declare const DrawerContent: ({ children }: {
     children: ReactNode;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const BaseDrawer: ({ size, onClose, open, header, footer, disclosure, children, ariaLabel, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id, isClosable, separator, noPadding, style, }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const Drawer: (({ size, onClose, open, header, footer, disclosure, children, ariaLabel, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id, isClosable, separator, noPadding, style, }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseDrawer: ({ size, onClose, open, header, footer, disclosure, children, ariaLabel, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id, isClosable, separator, noPadding, style, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: (({ size, onClose, open, header, footer, disclosure, children, ariaLabel, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id, isClosable, separator, noPadding, style, }: DrawerProps) => import("react/jsx-runtime").JSX.Element) & {
     Content: ({ children }: {
         children: ReactNode;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};