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

package/dist/components/TextInput/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CloseIcon, CheckCircleIcon, AlertCircleIcon, EyeOffIcon, EyeIcon, AutoFixIcon } from "@ultraviolet/icons";
 import { forwardRef, useId, useState, useRef, useImperativeHandle, useMemo, useCallback } from "react";
 import { Button } from "../Button/index.js";
@@ -9,111 +9,291 @@ import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { inputWrapper, inputWrapperSizes, basicPrefix, inputClass, stateStack, basicSuffix, ctaSuffix } from "./styles.css.js";
-const TextInput = forwardRef(({
-  id,
-  className,
-  tabIndex,
-  value,
-  onChange,
-  onChangeValue,
-  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,
-  onKeyUp,
-  role,
-  "aria-live": ariaLive,
-  "aria-atomic": ariaAtomic,
-  defaultValue,
-  style
-}, ref) => {
-  const localId = useId();
-  const [hasFocus, setHasFocus] = useState(false);
-  const [localValue, setLocalValue] = useState(defaultValue);
-  const inputRef = useRef(null);
-  useImperativeHandle(ref, () => inputRef.current);
-  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 onChangeCallback = useCallback((event) => {
-    onChange?.(event);
-    onChangeValue?.(event.target.value);
-    setLocalValue(event.target.value);
-  }, [onChange, onChangeValue]);
-  const computedValue = value !== void 0 ? value : localValue;
-  const computedClearable = clearable && !!computedValue;
-  return /* @__PURE__ */ jsxs(Stack, { "aria-atomic": ariaAtomic, "aria-live": ariaLive, className, gap: 0.5, role, children: [
-    label || labelDescription ? /* @__PURE__ */ jsx(Label, { htmlFor: id ?? localId, id: ariaLabelledBy, labelDescription, required, size, children: label }) : null,
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("div", { className: `${inputWrapper} ${inputWrapperSizes[size]}`, "data-disabled": disabled, "data-error": !!error, "data-has-focus": hasFocus, "data-readonly": readOnly, "data-success": !!success, children: [
-      prefix ? /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: basicPrefix, "data-size": size, direction: "row", children: typeof prefix === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", disabled, sentiment: "neutral", variant: "bodySmall", children: prefix }) : prefix }) : null,
-      /* @__PURE__ */ jsx("input", { "aria-invalid": !!error, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete, autoFocus, className: inputClass, "data-size": size, "data-testid": dataTestId, defaultValue, disabled, id: id ?? localId, maxLength, minLength, name, onBlur: (event) => {
-        setHasFocus(false);
-        onBlur?.(event);
-      }, onChange: onChangeCallback, onFocus: (event) => {
-        setHasFocus(true);
-        onFocus?.(event);
-      }, onKeyDown, onKeyUp, placeholder, readOnly, ref: inputRef, required, style, tabIndex, type: computedType, value }),
-      success || error || loading || computedClearable ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: stateStack, direction: "row", gap: 1, children: [
-        computedClearable ? /* @__PURE__ */ jsx(Button, { "aria-label": "clear value", disabled: disabled || !computedValue, onClick: () => {
-          if (inputRef?.current) {
-            inputRef.current.value = "";
-            setLocalValue("");
-            onChangeCallback({
-              currentTarget: {
-                value: ""
-              },
-              target: {
-                value: ""
-              }
-            });
-          }
-        }, sentiment: "neutral", size: size === "small" ? "xsmall" : "small", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }) : null,
-        success ? /* @__PURE__ */ jsx(CheckCircleIcon, { disabled, sentiment: "success", size: "small" }) : null,
-        error ? /* @__PURE__ */ jsx(AlertCircleIcon, { disabled, sentiment: "danger", size: "small" }) : null,
-        loading && !disabled ? /* @__PURE__ */ jsx(Loader, { active: true, size: "small" }) : null
-      ] }) : null,
-      suffix ? /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: basicSuffix, direction: "row", children: typeof suffix === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", disabled, sentiment: "neutral", variant: "bodySmall", children: suffix }) : suffix }) : null,
-      type === "password" ? /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: ctaSuffix, direction: "row", children: /* @__PURE__ */ jsx(Button, { "aria-label": isPasswordVisible ? "hide" : "show", "data-testid": dataTestId ? `${dataTestId}-visibility-button` : void 0, disabled, onClick: () => {
-        setIsPasswordVisible(!isPasswordVisible);
-      }, sentiment: "neutral", size: size === "small" ? "xsmall" : "small", variant: "ghost", children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}) }) }) : null,
-      onRandomize ? /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: ctaSuffix, direction: "row", children: /* @__PURE__ */ jsx(Button, { disabled, onClick: onRandomize, sentiment: "neutral", size: size === "small" ? "xsmall" : "small", variant: "ghost", children: /* @__PURE__ */ jsx(AutoFixIcon, {}) }) }) : null
-    ] }) }) }),
-    error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", disabled, prominence: !error && !success ? "weak" : "default", sentiment, variant: "caption", children: error || success || helper }) : null,
-    !error && !success && typeof helper !== "string" && helper ? helper : null
-  ] });
-});
+const TextInput = forwardRef(
+  ({
+    id,
+    className,
+    tabIndex,
+    value,
+    onChange,
+    onChangeValue,
+    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,
+    onKeyUp,
+    role,
+    "aria-live": ariaLive,
+    "aria-atomic": ariaAtomic,
+    defaultValue,
+    style
+  }, ref) => {
+    const localId = useId();
+    const [hasFocus, setHasFocus] = useState(false);
+    const [localValue, setLocalValue] = useState(defaultValue);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    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 onChangeCallback = useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeValue?.(event.target.value);
+        setLocalValue(event.target.value);
+      },
+      [onChange, onChangeValue]
+    );
+    const computedValue = value !== void 0 ? value : localValue;
+    const computedClearable = clearable && !!computedValue;
+    return /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        "aria-atomic": ariaAtomic,
+        "aria-live": ariaLive,
+        className,
+        gap: 0.5,
+        role,
+        children: [
+          label || labelDescription ? /* @__PURE__ */ jsx(
+            Label,
+            {
+              htmlFor: id ?? localId,
+              id: ariaLabelledBy,
+              labelDescription,
+              required,
+              size,
+              children: label
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${inputWrapper} ${inputWrapperSizes[size]}`,
+              "data-disabled": disabled,
+              "data-error": !!error,
+              "data-has-focus": hasFocus,
+              "data-readonly": readOnly,
+              "data-success": !!success,
+              children: [
+                prefix ? /* @__PURE__ */ jsx(
+                  Stack,
+                  {
+                    alignItems: "center",
+                    className: basicPrefix,
+                    "data-size": size,
+                    direction: "row",
+                    children: typeof prefix === "string" ? /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        as: "span",
+                        disabled,
+                        sentiment: "neutral",
+                        variant: "bodySmall",
+                        children: prefix
+                      }
+                    ) : prefix
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    "aria-invalid": !!error,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
+                    autoComplete,
+                    autoFocus,
+                    className: inputClass,
+                    "data-size": size,
+                    "data-testid": dataTestId,
+                    defaultValue,
+                    disabled,
+                    id: id ?? localId,
+                    maxLength,
+                    minLength,
+                    name,
+                    onBlur: (event) => {
+                      setHasFocus(false);
+                      onBlur?.(event);
+                    },
+                    onChange: onChangeCallback,
+                    onFocus: (event) => {
+                      setHasFocus(true);
+                      onFocus?.(event);
+                    },
+                    onKeyDown,
+                    onKeyUp,
+                    placeholder,
+                    readOnly,
+                    ref: inputRef,
+                    required,
+                    style,
+                    tabIndex,
+                    type: computedType,
+                    value
+                  }
+                ),
+                success || error || loading || computedClearable ? /* @__PURE__ */ jsxs(
+                  Stack,
+                  {
+                    alignItems: "center",
+                    className: stateStack,
+                    direction: "row",
+                    gap: 1,
+                    children: [
+                      computedClearable ? /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          "aria-label": "clear value",
+                          disabled: disabled || !computedValue,
+                          onClick: () => {
+                            if (inputRef?.current) {
+                              inputRef.current.value = "";
+                              setLocalValue("");
+                              onChangeCallback({
+                                currentTarget: { value: "" },
+                                target: { value: "" }
+                              });
+                            }
+                          },
+                          sentiment: "neutral",
+                          size: size === "small" ? "xsmall" : "small",
+                          variant: "ghost",
+                          children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" })
+                        }
+                      ) : null,
+                      success ? /* @__PURE__ */ jsx(
+                        CheckCircleIcon,
+                        {
+                          disabled,
+                          sentiment: "success",
+                          size: "small"
+                        }
+                      ) : null,
+                      error ? /* @__PURE__ */ jsx(
+                        AlertCircleIcon,
+                        {
+                          disabled,
+                          sentiment: "danger",
+                          size: "small"
+                        }
+                      ) : null,
+                      loading && !disabled ? /* @__PURE__ */ jsx(Loader, { active: true, size: "small" }) : null
+                    ]
+                  }
+                ) : null,
+                suffix ? /* @__PURE__ */ jsx(
+                  Stack,
+                  {
+                    alignItems: "center",
+                    className: basicSuffix,
+                    direction: "row",
+                    children: typeof suffix === "string" ? /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        as: "span",
+                        disabled,
+                        sentiment: "neutral",
+                        variant: "bodySmall",
+                        children: suffix
+                      }
+                    ) : suffix
+                  }
+                ) : null,
+                type === "password" ? /* @__PURE__ */ jsx(
+                  Stack,
+                  {
+                    alignItems: "center",
+                    className: ctaSuffix,
+                    direction: "row",
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        "aria-label": isPasswordVisible ? "hide" : "show",
+                        "data-testid": dataTestId ? `${dataTestId}-visibility-button` : void 0,
+                        disabled,
+                        onClick: () => {
+                          setIsPasswordVisible(!isPasswordVisible);
+                        },
+                        sentiment: "neutral",
+                        size: size === "small" ? "xsmall" : "small",
+                        variant: "ghost",
+                        children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+                      }
+                    )
+                  }
+                ) : null,
+                onRandomize ? /* @__PURE__ */ jsx(
+                  Stack,
+                  {
+                    alignItems: "center",
+                    className: ctaSuffix,
+                    direction: "row",
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        disabled,
+                        onClick: onRandomize,
+                        sentiment: "neutral",
+                        size: size === "small" ? "xsmall" : "small",
+                        variant: "ghost",
+                        children: /* @__PURE__ */ jsx(AutoFixIcon, {})
+                      }
+                    )
+                  }
+                ) : null
+              ]
+            }
+          ) }) }),
+          error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              disabled,
+              prominence: !error && !success ? "weak" : "default",
+              sentiment,
+              variant: "caption",
+              children: error || success || helper
+            }
+          ) : null,
+          !error && !success && typeof helper !== "string" && helper ? helper : null
+        ]
+      }
+    );
+  }
+);
 export {
   TextInput
 };

package/dist/components/TimeInput/constants.js

@@ -1,8 +1,4 @@
-const DEFAULT_PLACEHOLDER = {
-  h: "00",
-  m: "00",
-  s: "00"
-};
+const DEFAULT_PLACEHOLDER = { h: "00", m: "00", s: "00" };
 const TIME_KEYS = ["h", "m", "s"];
 const DEFAULT_DATE = /* @__PURE__ */ new Date();
 DEFAULT_DATE.setHours(0, 0, 0);

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

@@ -39,5 +39,5 @@ type TimeInputProps = {
  * A time input component that allows users to type a time in a 24 or 12-hour format.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const TimeInput: ({ label, timeFormat, value, clearable, required, labelDescription, helper, size, disabled, readOnly, error, onChange, onBlur, onFocus, className, id, autoFocus, style, "data-testid": dataTestId, placeholder, "aria-label": ariaLabel, }: TimeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TimeInput: ({ label, timeFormat, value, clearable, required, labelDescription, helper, size, disabled, readOnly, error, onChange, onBlur, onFocus, className, id, autoFocus, style, "data-testid": dataTestId, placeholder, "aria-label": ariaLabel, }: TimeInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};