@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/TextInputV2/index.js

@@ -0,0 +1,314 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { forwardRef, useId, useState, useMemo } from "react";
+import { Button } from "../Button/index.js";
+import { Loader } from "../Loader/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const TEXTINPUT_SIZE_HEIGHT = {
+  large: 48,
+  medium: 40,
+  small: 32
+};
+const BasicPrefixStack = styled(Stack)`
+  padding: ${({ theme }) => theme.space["2"]};
+  border-right: 1px solid;
+  border-color: inherit;
+`;
+const StateStack = styled(Stack)`
+  padding: ${({ theme }) => `0 ${theme.space["2"]}`};
+`;
+const BasicSuffixStack = styled(Stack)`
+  padding: ${({ theme }) => `0 ${theme.space["2"]}`};
+  border-left: 1px solid;
+  border-color: inherit;
+`;
+const CTASuffixStack = styled(Stack)`
+  padding: ${({ theme }) => `0 ${theme.space["1"]}`};
+  border-left: 1px solid;
+  border-color: inherit;
+`;
+const StyledInput = styled("input", {
+  shouldForwardProp: (prop) => !["isSuccess", "isError", "isClearable"].includes(prop)
+})`
+  flex: 1;
+  border: none;
+  outline: none;
+  height: 100%;
+  padding-left: ${({ theme }) => theme.space["2"]};
+  background: transparent;
+`;
+const StyledInputWrapper = styled("div", {
+  shouldForwardProp: (prop) => !["hasFocus", "size"].includes(prop)
+})`
+  display: flex;
+  flex-direction: row;
+  height: ${({ size }) => TEXTINPUT_SIZE_HEIGHT[size]}px;
+
+  background: ${({ theme }) => theme.colors.neutral.background};
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  border-radius: ${({ theme }) => theme.radii.default};
+
+  & > ${StyledInput} {
+    color: ${({ theme }) => theme.colors.neutral.text};
+
+    &::placeholder {
+      color: ${({ theme }) => theme.colors.neutral.textWeak};
+    }
+  }
+
+  &[data-success='true'] {
+    border-color: ${({ theme }) => theme.colors.success.border};
+  }
+
+  &[data-error='true'] {
+    border-color: ${({ theme }) => theme.colors.danger.border};
+  }
+
+  &[data-readonly='true'] {
+    background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+    border-color: ${({ theme }) => theme.colors.neutral.border};
+  }
+
+  &[data-disabled='true'] {
+    background: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+    border-color: ${({ theme }) => theme.colors.neutral.borderDisabled};
+
+    & > ${StyledInput} {
+      color: ${({ theme }) => theme.colors.neutral.textDisabled};
+
+      &::placeholder {
+        color: ${({ theme }) => theme.colors.neutral.textWeakDisabled};
+      }
+    }
+  }
+
+  &:not([data-disabled='true']):not([data-readonly]):hover {
+    border-color: ${({ theme }) => theme.colors.primary.border};
+  }
+
+  ${({ theme, hasFocus }) => hasFocus ? `
+  box-shadow: ${theme.shadows.focusPrimary};
+  border: 1px solid ${theme.colors.primary.border};
+` : null};
+`;
+const TextInputV2 = forwardRef(
+  ({
+    id,
+    className,
+    tabIndex,
+    value,
+    onChange,
+    placeholder,
+    disabled = false,
+    readOnly = false,
+    success,
+    error,
+    helper,
+    tooltip,
+    label,
+    autoFocus,
+    required = false,
+    "data-testid": dataTestId,
+    name,
+    onFocus,
+    onBlur,
+    clearable = false,
+    labelDescription,
+    type = "text",
+    prefix,
+    suffix,
+    size = "large",
+    loading,
+    onRandomize,
+    minLength,
+    maxLength,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    autoComplete,
+    onKeyDown
+  }, ref) => {
+    const localId = useId();
+    const [hasFocus, setHasFocus] = useState(false);
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const computedType = type === "password" && isPasswordVisible ? "text" : type;
+    const sentiment = useMemo(() => {
+      if (error) {
+        return "danger";
+      }
+      if (success) {
+        return "success";
+      }
+      return "neutral";
+    }, [error, success]);
+    const computedClearable = clearable && !!value;
+    return /* @__PURE__ */ jsxs(Stack, { gap: 0.5, className, children: [
+      label || labelDescription ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "1", alignItems: "center", children: [
+        label ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "0.5", alignItems: "start", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "label",
+              variant: "bodyStrong",
+              sentiment: "neutral",
+              htmlFor: id ?? localId,
+              children: label
+            }
+          ),
+          required ? /* @__PURE__ */ jsx(Icon, { name: "asterisk", color: "danger", size: 8 }) : null
+        ] }) : null,
+        labelDescription ?? null
+      ] }) : null,
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
+        StyledInputWrapper,
+        {
+          hasFocus,
+          "data-disabled": disabled,
+          "data-readonly": readOnly,
+          "data-success": !!success,
+          "data-error": !!error,
+          size,
+          children: [
+            prefix ? /* @__PURE__ */ jsx(BasicPrefixStack, { direction: "row", alignItems: "center", children: typeof prefix === "string" ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "span",
+                sentiment: "neutral",
+                variant: "bodySmall",
+                disabled,
+                children: prefix
+              }
+            ) : prefix }) : null,
+            /* @__PURE__ */ jsx(
+              StyledInput,
+              {
+                type: computedType,
+                "aria-invalid": !!error,
+                id: id ?? localId,
+                tabIndex,
+                autoFocus,
+                disabled,
+                ref,
+                value: value === null || value === void 0 ? "" : value,
+                onChange: (event) => {
+                  onChange?.(event.currentTarget.value);
+                },
+                isSuccess: !!success,
+                isError: !!error,
+                isClearable: !!computedClearable,
+                placeholder,
+                "data-testid": dataTestId,
+                name,
+                onFocus: (event) => {
+                  setHasFocus(true);
+                  onFocus?.(event);
+                },
+                onBlur: (event) => {
+                  setHasFocus(false);
+                  onBlur?.(event);
+                },
+                readOnly,
+                minLength,
+                maxLength,
+                "aria-labelledby": ariaLabelledBy,
+                "aria-label": ariaLabel,
+                autoComplete,
+                required,
+                onKeyDown
+              }
+            ),
+            success || error || loading || computedClearable ? /* @__PURE__ */ jsxs(StateStack, { direction: "row", gap: 1, alignItems: "center", children: [
+              computedClearable ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": "clear value",
+                  disabled: disabled || !value,
+                  variant: "ghost",
+                  size: size === "small" ? "xsmall" : "small",
+                  icon: "close",
+                  onClick: () => {
+                    onChange?.("");
+                  },
+                  sentiment: "neutral"
+                }
+              ) : null,
+              success ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "checkbox-circle-outline",
+                  color: "success",
+                  size: 16,
+                  disabled
+                }
+              ) : null,
+              error ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "alert",
+                  color: "danger",
+                  size: 16,
+                  disabled
+                }
+              ) : null,
+              loading && !disabled ? /* @__PURE__ */ jsx(Loader, { active: true, size: 16 }) : null
+            ] }) : null,
+            suffix ? /* @__PURE__ */ jsx(BasicSuffixStack, { direction: "row", alignItems: "center", children: typeof suffix === "string" ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "span",
+                sentiment: "neutral",
+                variant: "bodySmall",
+                disabled,
+                children: suffix
+              }
+            ) : suffix }) : null,
+            type === "password" ? /* @__PURE__ */ jsx(CTASuffixStack, { direction: "row", alignItems: "center", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled,
+                "data-testid": dataTestId ? `${dataTestId}-visibility-button` : void 0,
+                "aria-label": isPasswordVisible ? "hide" : "show",
+                onClick: () => {
+                  setIsPasswordVisible(!isPasswordVisible);
+                },
+                variant: "ghost",
+                sentiment: "neutral",
+                icon: isPasswordVisible ? "eye-off" : "eye",
+                size: size === "small" ? "xsmall" : "small"
+              }
+            ) }) : null,
+            onRandomize ? /* @__PURE__ */ jsx(CTASuffixStack, { direction: "row", alignItems: "center", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled,
+                icon: "auto-fix",
+                size: size === "small" ? "xsmall" : "small",
+                variant: "ghost",
+                sentiment: "neutral",
+                onClick: onRandomize
+              }
+            ) }) : null
+          ]
+        }
+      ) }) }),
+      error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "p",
+          variant: "caption",
+          sentiment,
+          prominence: !error && !success ? "weak" : "default",
+          disabled,
+          children: error || success || helper
+        }
+      ) : null,
+      !error && !success && typeof helper !== "string" && helper ? helper : null
+    ] });
+  }
+);
+export {
+  TEXTINPUT_SIZE_HEIGHT,
+  TextInputV2
+};

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

@@ -0,0 +1,25 @@
+import type { ComponentProps, JSX } from 'react';
+import { SelectInput } from '../SelectInput';
+export declare const schedules: {
+    half: readonly ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30", "05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"];
+    hours: readonly ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"];
+    quarter: readonly ["00:00", "00:15", "00:30", "00:45", "01:00", "01:15", "01:30", "01:45", "02:00", "02:15", "02:30", "02:45", "03:00", "03:15", "03:30", "03:45", "04:00", "04:15", "04:30", "04:45", "05:00", "05:15", "05:30", "05:45", "06:00", "06:15", "06:30", "06:45", "07:00", "07:15", "07:30", "07:45", "08:00", "08:15", "08:30", "08:45", "09:00", "09:15", "09:30", "09:45", "10:00", "10:15", "10:30", "10:45", "11:00", "11:15", "11:30", "11:45", "12:00", "12:15", "12:30", "12:45", "13:00", "13:15", "13:30", "13:45", "14:00", "14:15", "14:30", "14:45", "15:00", "15:15", "15:30", "15:45", "16:00", "16:15", "16:30", "16:45", "17:00", "17:15", "17:30", "17:45", "18:00", "18:15", "18:30", "18:45", "19:00", "19:15", "19:30", "19:45", "20:00", "20:15", "20:30", "20:45", "21:00", "21:15", "21:30", "21:45", "22:00", "22:15", "22:30", "22:45", "23:00", "23:15", "23:30", "23:45"];
+};
+type ScheduleType = keyof typeof schedules;
+declare const options: (schedule: ScheduleType) => {
+    label: "00:00" | "01:00" | "02:00" | "03:00" | "04:00" | "05:00" | "06:00" | "07:00" | "08:00" | "09:00" | "10:00" | "11:00" | "12:00" | "13:00" | "14:00" | "15:00" | "16:00" | "17:00" | "18:00" | "19:00" | "20:00" | "21:00" | "22:00" | "23:00" | "00:30" | "01:30" | "02:30" | "03:30" | "04:30" | "05:30" | "06:30" | "07:30" | "08:30" | "09:30" | "10:30" | "11:30" | "12:30" | "13:30" | "14:30" | "15:30" | "16:30" | "17:30" | "18:30" | "19:30" | "20:30" | "21:30" | "22:30" | "23:30" | "00:15" | "00:45" | "01:15" | "01:45" | "02:15" | "02:45" | "03:15" | "03:45" | "04:15" | "04:45" | "05:15" | "05:45" | "06:15" | "06:45" | "07:15" | "07:45" | "08:15" | "08:45" | "09:15" | "09:45" | "10:15" | "10:45" | "11:15" | "11:45" | "12:15" | "12:45" | "13:15" | "13:45" | "14:15" | "14:45" | "15:15" | "15:45" | "16:15" | "16:45" | "17:15" | "17:45" | "18:15" | "18:45" | "19:15" | "19:45" | "20:15" | "20:45" | "21:15" | "21:45" | "22:15" | "22:45" | "23:15" | "23:45";
+    value: "00:00" | "01:00" | "02:00" | "03:00" | "04:00" | "05:00" | "06:00" | "07:00" | "08:00" | "09:00" | "10:00" | "11:00" | "12:00" | "13:00" | "14:00" | "15:00" | "16:00" | "17:00" | "18:00" | "19:00" | "20:00" | "21:00" | "22:00" | "23:00" | "00:30" | "01:30" | "02:30" | "03:30" | "04:30" | "05:30" | "06:30" | "07:30" | "08:30" | "09:30" | "10:30" | "11:30" | "12:30" | "13:30" | "14:30" | "15:30" | "16:30" | "17:30" | "18:30" | "19:30" | "20:30" | "21:30" | "22:30" | "23:30" | "00:15" | "00:45" | "01:15" | "01:45" | "02:15" | "02:45" | "03:15" | "03:45" | "04:15" | "04:45" | "05:15" | "05:45" | "06:15" | "06:45" | "07:15" | "07:45" | "08:15" | "08:45" | "09:15" | "09:45" | "10:15" | "10:45" | "11:15" | "11:45" | "12:15" | "12:45" | "13:15" | "13:45" | "14:15" | "14:45" | "15:15" | "15:45" | "16:15" | "16:45" | "17:15" | "17:45" | "18:15" | "18:45" | "19:15" | "19:45" | "20:15" | "20:45" | "21:15" | "21:45" | "22:15" | "22:45" | "23:15" | "23:45";
+}[];
+type TimeInputProps = Partial<ComponentProps<typeof SelectInput>> & {
+    schedule?: ScheduleType;
+};
+type TimeInputType = ((props: TimeInputProps) => JSX.Element) & {
+    options: typeof options;
+};
+/**
+ * A time input component that allows users to select a time from a dropdown. The component is built on top of the
+ * `SelectInput` component.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+export declare const TimeInput: TimeInputType;
+export {};

package/dist/components/TimeInput/index.js

@@ -0,0 +1,199 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { SelectInput } from "../SelectInput/index.js";
+const hours = [
+  "00:00",
+  "01:00",
+  "02:00",
+  "03:00",
+  "04:00",
+  "05:00",
+  "06:00",
+  "07:00",
+  "08:00",
+  "09:00",
+  "10:00",
+  "11:00",
+  "12:00",
+  "13:00",
+  "14:00",
+  "15:00",
+  "16:00",
+  "17:00",
+  "18:00",
+  "19:00",
+  "20:00",
+  "21:00",
+  "22:00",
+  "23:00"
+];
+const half = [
+  "00:00",
+  "00:30",
+  "01:00",
+  "01:30",
+  "02:00",
+  "02:30",
+  "03:00",
+  "03:30",
+  "04:00",
+  "04:30",
+  "05:00",
+  "05:30",
+  "06:00",
+  "06:30",
+  "07:00",
+  "07:30",
+  "08:00",
+  "08:30",
+  "09:00",
+  "09:30",
+  "10:00",
+  "10:30",
+  "11:00",
+  "11:30",
+  "12:00",
+  "12:30",
+  "13:00",
+  "13:30",
+  "14:00",
+  "14:30",
+  "15:00",
+  "15:30",
+  "16:00",
+  "16:30",
+  "17:00",
+  "17:30",
+  "18:00",
+  "18:30",
+  "19:00",
+  "19:30",
+  "20:00",
+  "20:30",
+  "21:00",
+  "21:30",
+  "22:00",
+  "22:30",
+  "23:00",
+  "23:30"
+];
+const quarter = [
+  "00:00",
+  "00:15",
+  "00:30",
+  "00:45",
+  "01:00",
+  "01:15",
+  "01:30",
+  "01:45",
+  "02:00",
+  "02:15",
+  "02:30",
+  "02:45",
+  "03:00",
+  "03:15",
+  "03:30",
+  "03:45",
+  "04:00",
+  "04:15",
+  "04:30",
+  "04:45",
+  "05:00",
+  "05:15",
+  "05:30",
+  "05:45",
+  "06:00",
+  "06:15",
+  "06:30",
+  "06:45",
+  "07:00",
+  "07:15",
+  "07:30",
+  "07:45",
+  "08:00",
+  "08:15",
+  "08:30",
+  "08:45",
+  "09:00",
+  "09:15",
+  "09:30",
+  "09:45",
+  "10:00",
+  "10:15",
+  "10:30",
+  "10:45",
+  "11:00",
+  "11:15",
+  "11:30",
+  "11:45",
+  "12:00",
+  "12:15",
+  "12:30",
+  "12:45",
+  "13:00",
+  "13:15",
+  "13:30",
+  "13:45",
+  "14:00",
+  "14:15",
+  "14:30",
+  "14:45",
+  "15:00",
+  "15:15",
+  "15:30",
+  "15:45",
+  "16:00",
+  "16:15",
+  "16:30",
+  "16:45",
+  "17:00",
+  "17:15",
+  "17:30",
+  "17:45",
+  "18:00",
+  "18:15",
+  "18:30",
+  "18:45",
+  "19:00",
+  "19:15",
+  "19:30",
+  "19:45",
+  "20:00",
+  "20:15",
+  "20:30",
+  "20:45",
+  "21:00",
+  "21:15",
+  "21:30",
+  "21:45",
+  "22:00",
+  "22:15",
+  "22:30",
+  "22:45",
+  "23:00",
+  "23:15",
+  "23:30",
+  "23:45"
+];
+const schedules = {
+  half,
+  hours,
+  quarter
+};
+const options = (schedule) => schedules[schedule].map((hour) => ({
+  label: hour,
+  value: hour
+}));
+const defaultValue = {
+  label: "00:00",
+  value: "00:00"
+};
+const TimeInput = ({
+  value = defaultValue,
+  schedule = "hours",
+  ...props
+} = {}) => /* @__PURE__ */ jsx(SelectInput, { ...props, time: true, value, options: options(schedule) });
+TimeInput.options = options;
+export {
+  TimeInput,
+  schedules
+};

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

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import type { ToastOptions } from 'react-toastify';
+export declare const toast: {
+    error: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
+    /**
+     * @deprecated "Deprecated, please use another variant instead"
+     */
+    info: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
+    success: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
+    warning: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
+};
+type ToastContainerProps = {
+    /**
+     * 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 of the toast container
+     */
+    position?: ToastOptions['position'];
+    'data-testid'?: string;
+    className?: string;
+    /**
+     * Delay before the toast is automatically closed, if not set the default value is 6000ms
+     */
+    autoClose?: number;
+    /**
+     * Set a custom containerId to be able to define multiple ToastContainers
+     */
+    containerId?: string;
+};
+/**
+ * Display short information about an event that happen in the interface in a floating alert.
+ * Toaster is based on **react-tostify**, you can find a complete documentation
+ * [here](https://fkhadra.github.io/react-toastify/introduction/).
+ *
+ * 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, }: ToastContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};