@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

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

@@ -0,0 +1,47 @@
+export declare const heightMenu: `var(--${string})`;
+export declare const heightAvailableSpace: `var(--${string})`;
+export declare const menu: import("@vanilla-extract/recipes").RuntimeFn<{
+    arrow: {
+        true: {
+            selectors: {
+                '&::after': {
+                    borderColor: `var(--${string}) transparent transparent transparent`;
+                };
+            };
+        };
+    };
+    searchable: {
+        true: {
+            minWidth: "20rem";
+        };
+    };
+}>;
+export declare const menuContent: string;
+export declare const menuFooter: string;
+export declare const menuList: string;
+export declare const menuSearchInput: string;
+export declare const menuGroup: string;
+export declare const menuItemContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+    borderless: {
+        false: {
+            borderBottom: `1px solid var(--${string})`;
+            padding: `var(--${string}) var(--${string})`;
+        };
+        true: {
+            padding: `var(--${string}) var(--${string})`;
+        };
+    };
+}>;
+export declare const menuItem: import("@vanilla-extract/recipes").RuntimeFn<{
+    borderless: {
+        true: {};
+    };
+    disabled: {
+        true: {
+            cursor: "not-allowed";
+        };
+    };
+    sentiment: {
+        [k: string]: {};
+    };
+}>;

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

@@ -0,0 +1,24 @@
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var heightMenu = "var(--uv_gky3yh0)";
+var heightAvailableSpace = "var(--uv_gky3yh1)";
+var menu = createRuntimeFn({ defaultClassName: "uv_gky3yh2", variantClassNames: { arrow: { true: "uv_gky3yh3" }, searchable: { true: "uv_gky3yh4" } }, defaultVariants: { arrow: false, searchable: false }, compoundVariants: [] });
+var menuContent = "uv_gky3yh5";
+var menuFooter = "uv_gky3yh6";
+var menuList = "uv_gky3yh7";
+var menuSearchInput = "uv_gky3yh8";
+var menuGroup = "uv_gky3yh9";
+var menuItemContainer = createRuntimeFn({ defaultClassName: "uv_gky3yha", variantClassNames: { borderless: { false: "uv_gky3yhb", true: "uv_gky3yhc" } }, defaultVariants: { borderless: false }, compoundVariants: [] });
+var menuItem = createRuntimeFn({ defaultClassName: "uv_gky3yhd", variantClassNames: { borderless: { true: "uv_gky3yhe" }, disabled: { true: "uv_gky3yhf" }, sentiment: { neutral: "uv_gky3yhg", danger: "uv_gky3yhh", primary: "uv_gky3yhi" } }, defaultVariants: { borderless: false, disabled: false, sentiment: "neutral" }, compoundVariants: [[{ sentiment: "neutral", disabled: false }, "uv_gky3yhj"], [{ sentiment: "danger", disabled: false }, "uv_gky3yhk"], [{ sentiment: "primary", disabled: false }, "uv_gky3yhl"], [{ sentiment: "neutral", disabled: true }, "uv_gky3yhm"], [{ sentiment: "danger", disabled: true }, "uv_gky3yhn"], [{ sentiment: "primary", disabled: true }, "uv_gky3yho"]] });
+export {
+  heightAvailableSpace,
+  heightMenu,
+  menu,
+  menuContent,
+  menuFooter,
+  menuGroup,
+  menuItem,
+  menuItemContainer,
+  menuList,
+  menuSearchInput
+};

package/dist/components/Menu/types.d.ts

@@ -41,8 +41,8 @@ export type MenuProps = {
     footer?: ReactNode;
     placement?: Exclude<ComponentProps<typeof Popup>['placement'], 'nested-menu'>;
     /**
-     * When set to true, the menu does not shrink (height) to avoid overflow on the page
+     * When set to true, the menu shrinks (height) to avoid overflow on the page
      */
-    noShrink?: boolean;
-} & Pick<ComponentProps<typeof Popup>, 'dynamicDomRendering' | 'align'>;
+    shrink?: boolean;
+} & Pick<ComponentProps<typeof Popup>, 'dynamicDomRendering' | 'align' | 'style'>;
 export {};

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

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 type Strength = {
     /**
      * Color to display
@@ -18,9 +19,10 @@ type PasswordStrengthMeterProps = {
     className?: string;
     'data-testid'?: string;
     id?: string;
+    style?: CSSProperties;
 };
 /**
  * Show strength of a password based on different criteria.
  */
-export declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, id, }: PasswordStrengthMeterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, style, id, }: PasswordStrengthMeterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Meter/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 { Text } from "../Text/index.js";
 import { strengthMeter, colorMeter, wrapperMeter, meter } from "./styles.css.js";
@@ -9,24 +9,56 @@ const Meter = ({
   value,
   className,
   "data-testid": dataTestId,
+  style,
   id
 }) => {
   const toValue = (value + 1) / strength.length * 100;
   const width = `${toValue}%`;
   const backgroundColor = strength[value]?.color ?? strength[0].color;
   const text = strength[value]?.text ?? strength[0].text;
-  return /* @__PURE__ */ jsxs("div", { "aria-labelledby": "meter-label", "aria-live": "polite", "aria-valuemax": strength.length ?? 0, "aria-valuemin": 0, "aria-valuenow": value, className, "data-testid": dataTestId, id, role: "meter", title, children: [
-    /* @__PURE__ */ jsxs(Text, { as: "p", id: "meter-label", variant: "bodySmallStrong", children: [
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-labelledby": "meter-label",
+      "aria-live": "polite",
+      "aria-valuemax": strength.length ?? 0,
+      "aria-valuemin": 0,
+      "aria-valuenow": value,
+      className,
+      "data-testid": dataTestId,
+      id,
+      role: "meter",
+      style,
       title,
-      /* @__PURE__ */ jsx(Text, { as: "span", className: strengthMeter, style: assignInlineVars({
-        [colorMeter]: strength[value].color
-      }), variant: "bodySmallStrong", children: text })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: wrapperMeter, children: /* @__PURE__ */ jsx("div", { className: meter, style: {
-      backgroundColor,
-      width
-    } }) })
-  ] });
+      children: [
+        /* @__PURE__ */ jsxs(Text, { as: "p", id: "meter-label", variant: "bodySmallStrong", children: [
+          title,
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "span",
+              className: strengthMeter,
+              style: assignInlineVars({
+                [colorMeter]: strength[value].color
+              }),
+              variant: "bodySmallStrong",
+              children: text
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: wrapperMeter, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: meter,
+            style: {
+              backgroundColor,
+              width
+            }
+          }
+        ) })
+      ]
+    }
+  );
 };
 export {
   Meter

package/dist/components/Modal/ModalContent.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, CSSProperties } from 'react';
 import type { Modal } from '.';
 import type { ModalPlacement, ModalSize } from './types';
 type ModalContentProps = ComponentProps<typeof Modal> & {
@@ -12,6 +12,7 @@ type ModalContentProps = ComponentProps<typeof Modal> & {
     handleClose: () => void;
     dataTestId?: string;
     image?: string;
+    style?: CSSProperties;
 };
-export declare const ModalContent: ({ visible, open, placement, finalSize, ariaLabel, hideOnClickOutside, hideOnEsc, preventBodyScroll, handleClose, className, backdropClassName, dataTestId, isClosable, children, handleOpen, handleToggle, finalId, image, }: ModalContentProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const ModalContent: ({ visible, open, placement, finalSize, ariaLabel, hideOnClickOutside, hideOnEsc, preventBodyScroll, handleClose, className, backdropClassName, dataTestId, isClosable, children, handleOpen, handleToggle, finalId, image, style, }: ModalContentProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Modal/ModalContent.js

@@ -1,19 +1,9 @@
 "use client";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons";
 import { Button } from "../Button/index.js";
 import { Dialog } from "./components/Dialog.js";
-const StyledContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e14rmpyf0"
-} : {
-  target: "e14rmpyf0",
-  label: "StyledContainer"
-})("position:absolute;top:", ({
-  theme
-}) => theme.space["2"], ";right:", ({
-  theme
-}) => theme.space["2"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL01vZGFsL01vZGFsQ29udGVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVWtDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL01vZGFsL01vZGFsQ29udGVudC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBDbG9zZUljb24gfSBmcm9tICdAdWx0cmF2aW9sZXQvaWNvbnMnXG5pbXBvcnQgdHlwZSB7IENvbXBvbmVudFByb3BzIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBCdXR0b24gfSBmcm9tICcuLi9CdXR0b24nXG5pbXBvcnQgdHlwZSB7IE1vZGFsIH0gZnJvbSAnLidcbmltcG9ydCB7IERpYWxvZyB9IGZyb20gJy4vY29tcG9uZW50cy9EaWFsb2cnXG5pbXBvcnQgdHlwZSB7IE1vZGFsUGxhY2VtZW50LCBNb2RhbFNpemUgfSBmcm9tICcuL3R5cGVzJ1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbiAgcmlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG5gXG5cbnR5cGUgTW9kYWxDb250ZW50UHJvcHMgPSBDb21wb25lbnRQcm9wczx0eXBlb2YgTW9kYWw+ICYge1xuICB2aXNpYmxlOiBib29sZWFuXG4gIG9wZW46IGJvb2xlYW5cbiAgcGxhY2VtZW50OiBNb2RhbFBsYWNlbWVudFxuICBmaW5hbFNpemU6IE1vZGFsU2l6ZVxuICBmaW5hbElkOiBzdHJpbmdcbiAgaGFuZGxlT3BlbjogKCkgPT4gdm9pZFxuICBoYW5kbGVUb2dnbGU6ICgpID0+IHZvaWRcbiAgaGFuZGxlQ2xvc2U6ICgpID0+IHZvaWRcbiAgZGF0YVRlc3RJZD86IHN0cmluZ1xuICBpbWFnZT86IHN0cmluZ1xufVxuXG5leHBvcnQgY29uc3QgTW9kYWxDb250ZW50ID0gKHtcbiAgdmlzaWJsZSxcbiAgb3BlbixcbiAgcGxhY2VtZW50LFxuICBmaW5hbFNpemUsXG4gIGFyaWFMYWJlbCxcbiAgaGlkZU9uQ2xpY2tPdXRzaWRlLFxuICBoaWRlT25Fc2MsXG4gIHByZXZlbnRCb2R5U2Nyb2xsLFxuICBoYW5kbGVDbG9zZSxcbiAgY2xhc3NOYW1lLFxuICBiYWNrZHJvcENsYXNzTmFtZSxcbiAgZGF0YVRlc3RJZCxcbiAgaXNDbG9zYWJsZSxcbiAgY2hpbGRyZW4sXG4gIGhhbmRsZU9wZW4sXG4gIGhhbmRsZVRvZ2dsZSxcbiAgZmluYWxJZCxcbiAgaW1hZ2UsXG59OiBNb2RhbENvbnRlbnRQcm9wcykgPT5cbiAgdmlzaWJsZSB8fCBvcGVuID8gKFxuICAgIDxEaWFsb2dcbiAgICAgIGFyaWFMYWJlbD17YXJpYUxhYmVsfVxuICAgICAgYmFja2Ryb3BDbGFzc05hbWU9e2JhY2tkcm9wQ2xhc3NOYW1lfVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgIGhpZGVPbkNsaWNrT3V0c2lkZT17aGlkZU9uQ2xpY2tPdXRzaWRlfVxuICAgICAgaGlkZU9uRXNjPXtoaWRlT25Fc2N9XG4gICAgICBpZD17ZmluYWxJZH1cbiAgICAgIGltYWdlPXtpbWFnZX1cbiAgICAgIG9uQ2xvc2U9e2hhbmRsZUNsb3NlfVxuICAgICAgb3Blbj17dmlzaWJsZSB8fCBvcGVufVxuICAgICAgcGxhY2VtZW50PXtwbGFjZW1lbnR9XG4gICAgICBwcmV2ZW50Qm9keVNjcm9sbD17cHJldmVudEJvZHlTY3JvbGx9XG4gICAgICBzaXplPXtmaW5hbFNpemV9XG4gICAgPlxuICAgICAgPD5cbiAgICAgICAge3R5cGVvZiBjaGlsZHJlbiA9PT0gJ2Z1bmN0aW9uJ1xuICAgICAgICAgID8gY2hpbGRyZW4oe1xuICAgICAgICAgICAgICBjbG9zZTogaGFuZGxlQ2xvc2UsXG4gICAgICAgICAgICAgIG1vZGFsSWQ6IGZpbmFsSWQsXG4gICAgICAgICAgICAgIHNob3c6IGhhbmRsZU9wZW4sXG4gICAgICAgICAgICAgIHRvZ2dsZTogaGFuZGxlVG9nZ2xlLFxuICAgICAgICAgICAgICB2aXNpYmxlLFxuICAgICAgICAgICAgfSlcbiAgICAgICAgICA6IGNoaWxkcmVufVxuICAgICAgICA8U3R5bGVkQ29udGFpbmVyPlxuICAgICAgICAgIHtpc0Nsb3NhYmxlID8gKFxuICAgICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgICBhcmlhLWxhYmVsPVwiY2xvc2VcIlxuICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17XG4gICAgICAgICAgICAgICAgZGF0YVRlc3RJZCA/IGAke2RhdGFUZXN0SWR9LWNsb3NlLWJ1dHRvbmAgOiB1bmRlZmluZWRcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbG9zZX1cbiAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICAgIHZhcmlhbnQ9XCJnaG9zdFwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxDbG9zZUljb24gLz5cbiAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICAgICkgOiBudWxsfVxuICAgICAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgICAgIDwvPlxuICAgIDwvRGlhbG9nPlxuICApIDogbnVsbFxuIl19 */"));
+import { modalContainer } from "./styles.css.js";
 const ModalContent = ({
   visible,
   open,
@@ -32,17 +22,48 @@ const ModalContent = ({
   handleOpen,
   handleToggle,
   finalId,
-  image
-}) => visible || open ? /* @__PURE__ */ jsx(Dialog, { ariaLabel, backdropClassName, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id: finalId, image, onClose: handleClose, open: visible || open, placement, preventBodyScroll, size: finalSize, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-  typeof children === "function" ? children({
-    close: handleClose,
-    modalId: finalId,
-    show: handleOpen,
-    toggle: handleToggle,
-    visible
-  }) : children,
-  /* @__PURE__ */ jsx(StyledContainer, { children: isClosable ? /* @__PURE__ */ jsx(Button, { "aria-label": "close", "data-testid": dataTestId ? `${dataTestId}-close-button` : void 0, onClick: handleClose, sentiment: "neutral", size: "small", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null })
-] }) }) : null;
+  image,
+  style
+}) => visible || open ? /* @__PURE__ */ jsx(
+  Dialog,
+  {
+    ariaLabel,
+    backdropClassName,
+    className,
+    "data-testid": dataTestId,
+    hideOnClickOutside,
+    hideOnEsc,
+    id: finalId,
+    image,
+    onClose: handleClose,
+    open: visible || open,
+    placement,
+    preventBodyScroll,
+    size: finalSize,
+    style,
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      typeof children === "function" ? children({
+        close: handleClose,
+        modalId: finalId,
+        show: handleOpen,
+        toggle: handleToggle,
+        visible
+      }) : children,
+      /* @__PURE__ */ jsx("div", { className: modalContainer, children: isClosable ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": "close",
+          "data-testid": dataTestId ? `${dataTestId}-close-button` : void 0,
+          onClick: handleClose,
+          sentiment: "neutral",
+          size: "small",
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx(CloseIcon, {})
+        }
+      ) : null })
+    ] })
+  }
+) : null;
 export {
   ModalContent
 };

package/dist/components/Modal/ModalProvider.d.ts

@@ -14,5 +14,5 @@ export declare const useModal: () => ModalContextValues;
 type ModalProviderProps = {
     children: ReactNode;
 };
-export declare const ModalProvider: ({ children }: ModalProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ModalProvider: ({ children }: ModalProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Modal/ModalProvider.js

@@ -1,7 +1,9 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useState, useCallback, useMemo, useContext } from "react";
-const ModalContext = createContext(void 0);
+const ModalContext = createContext(
+  void 0
+);
 const useModal = () => {
   const context = useContext(ModalContext);
   if (!context) {
@@ -9,9 +11,7 @@ const useModal = () => {
   }
   return context;
 };
-const ModalProvider = ({
-  children
-}) => {
+const ModalProvider = ({ children }) => {
   const [openedModals, setOpenedModals] = useState([]);
   const [previsousOpenedModales, setPreviousOpenedModales] = useState([]);
   const registerModal = useCallback((object) => {
@@ -26,12 +26,15 @@ const ModalProvider = ({
       return prev.filter((modalId) => modalId.id !== id);
     });
   }, []);
-  const value = useMemo(() => ({
-    openedModals,
-    previsousOpenedModales,
-    registerModal,
-    unregisterModal
-  }), [openedModals, registerModal, unregisterModal, previsousOpenedModales]);
+  const value = useMemo(
+    () => ({
+      openedModals,
+      previsousOpenedModales,
+      registerModal,
+      unregisterModal
+    }),
+    [openedModals, registerModal, unregisterModal, previsousOpenedModales]
+  );
   return /* @__PURE__ */ jsx(ModalContext.Provider, { value, children });
 };
 export {

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

@@ -1,14 +1,2 @@
-import type { DialogProps, ModalPlacement, ModalSize } from '../types';
-type StyledDialogProps = {
-    'data-size': ModalSize;
-    'data-placement': ModalPlacement;
-    position: number;
-    size: ModalSize;
-    top?: number;
-};
-export declare const StyledDialog: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & StyledDialogProps, import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, {}>;
-export declare const Dialog: ({ children, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, "data-testid": dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, image, }: DialogProps) => import("react").ReactPortal;
-export {};
+import type { DialogProps } from '../types';
+export declare const Dialog: ({ children, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, "data-testid": dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, image, style, }: DialogProps) => import("react").ReactPortal;