@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

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

@@ -1,11 +1,12 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type NoticeProps = {
     children: ReactNode;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * A Notice is used to display a short message to the user.
  */
-export declare const Notice: ({ children, className, "data-testid": dataTestId, }: NoticeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Notice: ({ children, className, "data-testid": dataTestId, style, }: NoticeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Notice/index.js

@@ -1,16 +1,36 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { InformationOutlineIcon } from "@ultraviolet/icons";
 import { Text } from "../Text/index.js";
 import { notice } from "./styles.css.js";
 const Notice = ({
   children,
   className,
-  "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxs(Text, { as: "span", className: `${className ? `${className} ` : ""}${notice}`, "data-testid": dataTestId, prominence: "weak", sentiment: "neutral", variant: "caption", children: [
-  /* @__PURE__ */ jsx(InformationOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "small" }),
-  children
-] });
+  "data-testid": dataTestId,
+  style
+}) => /* @__PURE__ */ jsxs(
+  Text,
+  {
+    as: "span",
+    className: `${className ? `${className} ` : ""}${notice}`,
+    "data-testid": dataTestId,
+    prominence: "weak",
+    sentiment: "neutral",
+    style,
+    variant: "caption",
+    children: [
+      /* @__PURE__ */ jsx(
+        InformationOutlineIcon,
+        {
+          prominence: "weak",
+          sentiment: "neutral",
+          size: "small"
+        }
+      ),
+      children
+    ]
+  }
+);
 export {
   Notice
 };

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { Theme as ThemeToastify, ToastOptions, TypeOptions } from 'react-toastify';
+type CloseButtonProps = {
+    closeToast: (event: React.MouseEvent<HTMLElement>) => void;
+    type: TypeOptions;
+    ariaLabel?: string;
+    theme: ThemeToastify;
+};
+export declare const notification: (children: ((props: CloseButtonProps) => ReactNode) | ReactNode, title: string, icon?: ReactNode, isClosable?: boolean, containerId?: string, options?: ToastOptions) => import("react-toastify").Id;
+export {};

package/dist/components/Notification/Notification.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CloseIcon } from "@ultraviolet/icons";
+import { toast } from "react-toastify";
+import { Button } from "../Button/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const closeButton = (props) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    "aria-label": "close",
+    onClick: props.closeToast,
+    sentiment: "neutral",
+    size: "xsmall",
+    variant: "ghost",
+    children: /* @__PURE__ */ jsx(CloseIcon, {})
+  }
+);
+const notification = (children, title, icon, isClosable, containerId, options) => toast("", {
+  ...options,
+  closeButton: (props) => /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, children: [
+    /* @__PURE__ */ jsx("div", { children: icon }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
+      /* @__PURE__ */ jsx(Text, { as: "h3", variant: "bodySmallStronger", children: title }),
+      typeof children === "function" ? children(props) : children
+    ] }),
+    isClosable ? closeButton(props) : null
+  ] }),
+  containerId: containerId ?? "notification"
+});
+export {
+  notification
+};

package/dist/components/Notification/NotificationContainer.d.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from 'react';
+import type { ToastOptions } from 'react-toastify';
+type NotificationContainerProps = {
+    /**
+     * Delay (in ms) before the notification autocloses. To disable autoclose, set to false
+     */
+    autoClose?: false | number;
+    /**
+     * Whether to display the newest toast on top.
+     * `Default: false`
+     */
+    newestOnTop?: boolean;
+    /**
+     * Limit the number of toast displayed at the same time
+     */
+    limit?: number;
+    /**
+     * Position on the notification container
+     */
+    position?: ToastOptions['position'];
+    'data-testid'?: string;
+    className?: string;
+    /**
+     * Give a personalized containerId in case there are multiple notifications with different styled to display
+     */
+    containerId?: string;
+    style?: CSSProperties;
+};
+export declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, style, containerId, }: NotificationContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Notification/NotificationContainer.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ToastContainer, Slide } from "react-toastify";
+import { notification } from "./styles.css.js";
+const NotificationContainer = ({
+  newestOnTop,
+  limit,
+  autoClose = false,
+  position = "top-right",
+  "data-testid": dataTestId,
+  className,
+  style,
+  containerId = "notification"
+}) => /* @__PURE__ */ jsx(
+  ToastContainer,
+  {
+    autoClose,
+    className: `${className ? `${className} ` : ""}${notification}`,
+    containerId,
+    "data-testid": dataTestId,
+    draggable: false,
+    hideProgressBar: true,
+    icon: false,
+    limit,
+    newestOnTop,
+    position,
+    style,
+    transition: Slide
+  }
+);
+export {
+  NotificationContainer
+};

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

@@ -1,36 +1,2 @@
-import type { ReactNode } from 'react';
-import type { Theme as ThemeToastify, ToastOptions, TypeOptions } from 'react-toastify';
-type CloseButtonProps = {
-    closeToast: (event: React.MouseEvent<HTMLElement>) => void;
-    type: TypeOptions;
-    ariaLabel?: string;
-    theme: ThemeToastify;
-};
-export declare const notification: (children: ((props: CloseButtonProps) => ReactNode) | ReactNode, title: string, icon?: ReactNode, isClosable?: boolean, containerId?: string, options?: ToastOptions) => import("react-toastify").Id;
-type NotificationContainerProps = {
-    /**
-     * Delay (in ms) before the notification autocloses. To disable autoclose, set to false
-     */
-    autoClose?: false | number;
-    /**
-     * Whether to display the newest toast on top.
-     * `Default: false`
-     */
-    newestOnTop?: boolean;
-    /**
-     * Limit the number of toast displayed at the same time
-     */
-    limit?: number;
-    /**
-     * Position on the notification container
-     */
-    position?: ToastOptions['position'];
-    'data-testid'?: string;
-    className?: string;
-    /**
-     * Give a personalized containerId in case there are multiple notifications with different styled to display
-     */
-    containerId?: string;
-};
-export declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, containerId, }: NotificationContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+export { notification } from './Notification';
+export { NotificationContainer } from './NotificationContainer';

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

@@ -0,0 +1 @@
+export declare const notification: string;

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

@@ -0,0 +1,5 @@
+/* empty css                          */
+var notification = "uv_1h24h1e0";
+export {
+  notification
+};

package/dist/components/NumberInput/constant.d.ts

@@ -0,0 +1,5 @@
+export declare const SIZES: {
+    readonly large: "600";
+    readonly medium: "500";
+    readonly small: "400";
+};

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

@@ -1,9 +1,5 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
-declare const SIZES: {
-    readonly large: "600";
-    readonly medium: "500";
-    readonly small: "400";
-};
+import type { SIZES } from './constant';
 type Sizes = keyof typeof SIZES;
 /**
  * NumberInput component is used to increment / decrement a number value by clicking on + / - buttons or
@@ -34,5 +30,5 @@ export declare const NumberInput: import("react").ForwardRefExoticComponent<{
     onChange?: (newValue: number | null) => void;
     min?: number;
     max?: number;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "disabled" | "autoFocus" | "id" | "aria-label" | "onFocus" | "onBlur" | "step" | "name" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "autoFocus" | "aria-label" | "onFocus" | "onBlur" | "name" | "step" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};