@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/TextArea/index.js

@@ -0,0 +1,226 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { forwardRef, useId, useMemo } from "react";
+import { SIZE_HEIGHT, Button } from "../Button/index.js";
+import { Row } from "../Row/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const STATE_ICON_SIZE = 16;
+const StyledTextAreaWrapper = styled.div`
+  position: relative;
+  display: flex;
+`;
+const StyledTextAreaAbsoluteStack = styled(Stack)`
+  position: absolute;
+  top: ${({ theme }) => theme.space["1.5"]};
+  right: ${({ theme }) => theme.space["1"]};
+`;
+const StyledTextArea = styled("textarea", {
+  shouldForwardProp: (prop) => !["hasSentimentIcon", "isClearable"].includes(prop)
+})`
+  width: 100%;
+  resize: vertical;
+  background: ${({ theme }) => theme.colors.neutral.background};
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  color: ${({ theme }) => theme.colors.neutral.text};
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral.textWeak};
+  }
+  border-radius: ${({ theme }) => theme.radii.default};
+  padding: ${({ theme }) => `${theme.space["1.5"]} ${theme.space["1"]} ${theme.space["1.5"]} ${theme.space["2"]}`};
+  padding-right: ${({ theme, isClearable, hasSentimentIcon }) => (
+  /* including 1 optional if both element is visible + 1 because content is absolute 1space unit from right */
+  `calc(${theme.space[isClearable && hasSentimentIcon ? "4" : "3"]} + ${isClearable ? `${SIZE_HEIGHT.xsmall}px` : "0px"} + ${hasSentimentIcon ? `${STATE_ICON_SIZE}px` : "0px"})`
+)};
+
+  &[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};
+
+    &::placeholder {
+      color: ${({ theme }) => theme.colors.neutral.textWeakDisabled};
+    }
+  }
+
+  &:not([data-disabled='true']):hover {
+    &:hover {
+      border-color: ${({ theme }) => theme.colors.primary.border};
+    }
+
+    &:focus {
+      outline: none;
+      border-color: ${({ theme }) => theme.colors.primary.border};
+      box-shadow: ${({ theme }) => theme.shadows.focusPrimary};
+    }
+  }
+`;
+const TextArea = forwardRef(
+  ({
+    id,
+    className,
+    tabIndex,
+    value,
+    onChange,
+    placeholder,
+    rows = 3,
+    disabled = false,
+    readOnly = false,
+    success,
+    error,
+    helper,
+    minLength,
+    maxLength,
+    tooltip,
+    label,
+    autoFocus,
+    required = false,
+    "data-testid": dataTestId,
+    name,
+    onFocus,
+    onBlur,
+    clearable = false,
+    labelDescription
+  }, ref) => {
+    const localId = useId();
+    const sentiment = useMemo(() => {
+      if (error) {
+        return "danger";
+      }
+      if (success) {
+        return "success";
+      }
+      return "neutral";
+    }, [error, success]);
+    const notice = success || error || helper;
+    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(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(StyledTextAreaWrapper, { children: [
+        /* @__PURE__ */ jsx(
+          StyledTextArea,
+          {
+            "aria-invalid": !!error,
+            id: id ?? localId,
+            tabIndex,
+            autoFocus,
+            disabled,
+            rows,
+            ref,
+            value,
+            onChange: (event) => {
+              onChange(event.currentTarget.value);
+            },
+            hasSentimentIcon: !!success || !!error,
+            "data-disabled": disabled,
+            "data-readOnly": readOnly,
+            "data-success": !!success,
+            "data-error": !!error,
+            isClearable: !!computedClearable,
+            minLength,
+            maxLength,
+            placeholder,
+            "data-testid": dataTestId,
+            name,
+            onFocus,
+            onBlur
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          StyledTextAreaAbsoluteStack,
+          {
+            direction: "row",
+            alignItems: "center",
+            gap: "1",
+            children: [
+              computedClearable ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": "clear value",
+                  variant: "ghost",
+                  size: "xsmall",
+                  icon: "close",
+                  onClick: () => {
+                    onChange("");
+                  },
+                  sentiment: "neutral"
+                }
+              ) : null,
+              success ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "checkbox-circle-outline",
+                  color: "success",
+                  size: STATE_ICON_SIZE
+                }
+              ) : null,
+              error ? /* @__PURE__ */ jsx(Icon, { name: "alert", color: "danger", variant: "outlined" }) : null
+            ]
+          }
+        )
+      ] }) }),
+      notice || maxLength ? /* @__PURE__ */ jsxs(Row, { templateColumns: "minmax(0, 1fr) min-content", gap: "1", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          error || success || 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
+        ] }),
+        maxLength ? /* @__PURE__ */ jsxs(
+          Text,
+          {
+            as: "div",
+            sentiment: "neutral",
+            prominence: "weak",
+            variant: "caption",
+            children: [
+              value?.length ?? 0,
+              "/",
+              maxLength
+            ]
+          }
+        ) : null
+      ] }) : null
+    ] });
+  }
+);
+export {
+  TextArea
+};

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

@@ -0,0 +1,75 @@
+import type { FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, TextareaHTMLAttributes } from 'react';
+declare const inputSizes: {
+    medium: {
+        default: string;
+        full: string;
+    };
+    small: {
+        default: string;
+        full: string;
+    };
+};
+type TextInputSizes = keyof typeof inputSizes;
+export declare const textInputSizes: ("small" | "medium")[];
+type StyledInputProps = {
+    disabled?: boolean;
+    error?: boolean;
+    fillAvailable?: boolean;
+    hasLabel?: boolean;
+    paddingRightFactor: number;
+    isPlaceholderVisible?: boolean;
+    multiline?: boolean;
+    resizable?: boolean;
+    inputSize: TextInputSizes;
+    unit?: string;
+    rightComponentLength: number;
+} & (InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>);
+type InputProps = Omit<Exclude<StyledInputProps, TextareaHTMLAttributes<HTMLTextAreaElement>>, 'inputSize'>;
+type TextInputProps = {
+    'data-testid'?: string;
+    ariaControls?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    className?: string;
+    cols?: number;
+    defaultValue?: string;
+    disabled?: boolean;
+    edit?: boolean;
+    error?: string;
+    fillAvailable?: boolean;
+    generated?: boolean;
+    height?: string | number;
+    id?: string;
+    label?: string;
+    multiline?: boolean;
+    name?: string;
+    notice?: string;
+    noTopLabel?: boolean;
+    onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onChange?: (value: string) => void;
+    onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyUp?: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    placeholder?: string;
+    random?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    resizable?: boolean;
+    rows?: number;
+    size?: TextInputSizes;
+    tabIndex?: number;
+    type?: string;
+    unit?: string;
+    valid?: boolean;
+    value?: string | number;
+    wrap?: string;
+    inputProps?: InputProps;
+    max?: InputHTMLAttributes<HTMLInputElement>['max'];
+    min?: InputHTMLAttributes<HTMLInputElement>['min'];
+} & (Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> | Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>);
+/**
+ * TextInput component allows users to input text, with options for customization and validation.
+ * It supports various input types and should be appropriately sized with clear labeling.
+ */
+export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
+export {};