@xsolla/xui-tag 0.222.0 → 0.223.1

package/web/index.mjs

@@ -363,10 +363,141 @@ var Icon = ({
   return /* @__PURE__ */ jsx3(StyledIcon, { "data-testid": dataTestId || testID, ...props, children });
 };
 
+// ../../foundation/primitives-web/src/Input.tsx
+import { forwardRef } from "react";
+import styled4 from "styled-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FilteredInput = createFilteredElement("input");
+var StyledInput = styled4(FilteredInput)`
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
+  text-align: inherit;
+
+  &::placeholder {
+    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  /*
+   * Hide the native number spin buttons. type="number" is rendered with the
+   * toolkit's own chevron stepper (see Input "Type number" in Figma), so the
+   * OS chrome must not show alongside it. Keyboard ArrowUp / ArrowDown are
+   * unaffected — this only removes the painted control.
+   */
+  &[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  &[type="number"]::-webkit-outer-spin-button,
+  &[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+  }
+
+  /* Override browser autofill background */
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: ${(props) => props.color || "inherit"} !important;
+  }
+`;
+var InputPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    fontFamily,
+    placeholderTextColor,
+    maxLength,
+    name,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId,
+    testID,
+    ...rest
+  }, ref) => {
+    const handleChange = (e) => {
+      if (onChange) {
+        onChange(e);
+      }
+      if (onChangeText) {
+        onChangeText(e.target.value);
+      }
+    };
+    return /* @__PURE__ */ jsx4(
+      StyledInput,
+      {
+        ref,
+        id,
+        value,
+        name,
+        placeholder,
+        onChange: handleChange,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        disabled,
+        type: secureTextEntry ? "password" : type || "text",
+        inputMode,
+        autoComplete,
+        style,
+        color,
+        fontSize,
+        fontFamily,
+        placeholderTextColor,
+        maxLength,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabel,
+        "aria-disabled": ariaDisabled,
+        "data-testid": dataTestId || testID,
+        ...rest
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../../foundation/primitives-web/src/index.tsx
+var isWeb = true;
+
 // src/Tag.tsx
 import { useResolvedTheme } from "@xsolla/xui-core";
 import { X } from "@xsolla/xui-icons";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var Tag = ({
   size = "md",
   tone = "primary",
@@ -375,6 +506,7 @@ var Tag = ({
   iconLeft,
   iconRight,
   onRemove,
+  removeLabel,
   testID,
   themeMode,
   themeProductContext,
@@ -437,6 +569,7 @@ var Tag = ({
   };
   const { bg, text, border } = resolveColors();
   const isIconOnly = !children && (!!iconLeft || !!iconRight);
+  const resolvedRemoveLabel = removeLabel ?? (typeof children === "string" || typeof children === "number" ? `Remove ${children}` : "Remove");
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -460,8 +593,8 @@ var Tag = ({
         ...style
       },
       children: [
-        iconLeft && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
-        children && /* @__PURE__ */ jsx4(
+        iconLeft && /* @__PURE__ */ jsx5(Icon, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
+        children && /* @__PURE__ */ jsx5(
           Text,
           {
             color: text,
@@ -476,13 +609,245 @@ var Tag = ({
             children
           }
         ),
-        iconRight && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: iconRight }),
-        onRemove && /* @__PURE__ */ jsx4(Box, { onPress: onRemove, children: /* @__PURE__ */ jsx4(X, { size: sizeStyles.iconSize, color: text }) })
+        iconRight && /* @__PURE__ */ jsx5(Icon, { size: sizeStyles.iconSize, color: text, children: iconRight }),
+        onRemove && // A real <button>: focusable, activates on Enter / Space, and
+        // announced with its accessible name by screen readers.
+        /* @__PURE__ */ jsx5(
+          Box,
+          {
+            as: "button",
+            type: "button",
+            onPress: onRemove,
+            "aria-label": resolvedRemoveLabel,
+            alignItems: "center",
+            justifyContent: "center",
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+            backgroundColor: "transparent",
+            borderWidth: 0,
+            cursor: "pointer",
+            "data-testid": "tag__remove-button",
+            children: /* @__PURE__ */ jsx5(X, { size: sizeStyles.iconSize, color: text })
+          }
+        )
       ]
     }
   );
 };
+
+// src/TagInput.tsx
+import {
+  useState,
+  useRef,
+  forwardRef as forwardRef2,
+  useImperativeHandle
+} from "react";
+import {
+  useResolvedTheme as useResolvedTheme2,
+  useId
+} from "@xsolla/xui-core";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var chipSizeConfig = {
+  xl: "lg",
+  lg: "md",
+  md: "sm",
+  sm: "xs",
+  xs: "xs"
+};
+var TagInput = forwardRef2(
+  ({
+    value,
+    onChange,
+    placeholder,
+    size = "md",
+    disabled = false,
+    error,
+    errorMessage,
+    label,
+    "aria-label": ariaLabel,
+    id: providedId,
+    name,
+    onFocus,
+    onBlur,
+    testID,
+    themeMode,
+    themeProductContext
+  }, ref) => {
+    const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
+    const [draft, setDraft] = useState("");
+    const [isFocus, setIsFocus] = useState(false);
+    const inputRef = useRef(null);
+    const rawId = useId();
+    const safeId = rawId.replace(/:/g, "");
+    const inputId = providedId || `tag-input-${safeId}`;
+    const labelId = `${inputId}-label`;
+    const errorId = `${inputId}-error`;
+    useImperativeHandle(ref, () => inputRef.current, []);
+    const isError = !!(errorMessage || error);
+    const sizeStyles = theme.sizing.input(size);
+    const inputColors = theme.colors.control.input;
+    const borderRadius = theme.shape.input[size].borderRadius;
+    const chipSize = chipSizeConfig[size];
+    const chipHeight = theme.sizing.tag(chipSize).height;
+    const paddingVertical = Math.max(
+      (sizeStyles.height - chipHeight) / 2 - 1,
+      0
+    );
+    const commitDraft = () => {
+      if (draft.length === 0) return;
+      onChange([...value, draft]);
+      setDraft("");
+    };
+    const removeAt = (index2) => {
+      if (disabled) return;
+      onChange(value.filter((_, i) => i !== index2));
+      inputRef.current?.focus();
+    };
+    const handleKeyDown = (e) => {
+      const nativeEvent = e.nativeEvent;
+      const isComposing = nativeEvent?.isComposing === true || nativeEvent?.keyCode === 229;
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (!isComposing) commitDraft();
+        return;
+      }
+      if (e.key === "Backspace" && draft.length === 0 && value.length > 0) {
+        e.preventDefault();
+        onChange(value.slice(0, -1));
+      }
+    };
+    const handleChange = (e) => {
+      setDraft(e.target.value);
+    };
+    const handleFocus = () => {
+      if (!disabled) setIsFocus(true);
+      onFocus?.();
+    };
+    const handleBlur = () => {
+      setIsFocus(false);
+      commitDraft();
+      onBlur?.();
+    };
+    let backgroundColor = inputColors.bg;
+    let borderColor = inputColors.border;
+    let outlineColor;
+    if (disabled) {
+      backgroundColor = inputColors.bgDisable;
+      borderColor = inputColors.borderDisable;
+    } else if (isError) {
+      outlineColor = theme.colors.border.alert;
+      if (isFocus) backgroundColor = theme.colors.control.focus.bg;
+    } else if (isFocus) {
+      backgroundColor = theme.colors.control.focus.bg;
+      outlineColor = theme.colors.border.brand;
+    }
+    const textColor = disabled ? inputColors.textDisable : inputColors.text;
+    return /* @__PURE__ */ jsxs2(
+      Box,
+      {
+        flexDirection: "column",
+        gap: sizeStyles.fieldGap,
+        width: "100%",
+        testID,
+        children: [
+          label && /* @__PURE__ */ jsx6(Box, { as: "label", id: labelId, htmlFor: inputId, children: /* @__PURE__ */ jsx6(
+            Text,
+            {
+              color: theme.colors.content.secondary,
+              fontSize: sizeStyles.fontSize - 2,
+              fontWeight: "500",
+              children: label
+            }
+          ) }),
+          /* @__PURE__ */ jsxs2(
+            Box,
+            {
+              backgroundColor,
+              borderColor,
+              borderWidth: 1,
+              minHeight: sizeStyles.height,
+              paddingVertical,
+              paddingHorizontal: sizeStyles.paddingHorizontal,
+              flexDirection: "row",
+              flexWrap: "wrap",
+              alignItems: "center",
+              gap: 4,
+              cursor: disabled ? "not-allowed" : "text",
+              onPress: () => {
+                if (!disabled) inputRef.current?.focus();
+              },
+              "data-testid": "tag-input__container",
+              style: {
+                borderRadius,
+                ...outlineColor && isWeb ? { outline: `1px solid ${outlineColor}`, outlineOffset: "-1px" } : outlineColor && !isWeb ? { borderColor: outlineColor } : {}
+              },
+              hoverStyle: !disabled && !isFocus && !isError ? {
+                backgroundColor: inputColors.bgHover,
+                borderColor: inputColors.borderHover
+              } : void 0,
+              children: [
+                value.map((item, index2) => /* @__PURE__ */ jsx6(
+                  Tag,
+                  {
+                    size: chipSize,
+                    type: "outlined",
+                    onRemove: disabled ? void 0 : () => removeAt(index2),
+                    removeLabel: `Remove ${item}`,
+                    testID: "tag-input__chip",
+                    themeMode,
+                    themeProductContext,
+                    children: item
+                  },
+                  `${index2}-${item}`
+                )),
+                /* @__PURE__ */ jsx6(Box, { flex: 1, minWidth: 80, height: chipHeight, justifyContent: "center", children: /* @__PURE__ */ jsx6(
+                  InputPrimitive,
+                  {
+                    ref: inputRef,
+                    id: inputId,
+                    name,
+                    value: draft,
+                    placeholder: value.length === 0 ? placeholder : void 0,
+                    onChange: handleChange,
+                    onKeyDown: handleKeyDown,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur,
+                    disabled,
+                    type: "text",
+                    color: textColor,
+                    fontSize: sizeStyles.fontSize,
+                    fontFamily: theme.fonts.body,
+                    placeholderTextColor: inputColors.placeholder,
+                    "aria-invalid": isError || void 0,
+                    "aria-describedby": errorMessage ? errorId : void 0,
+                    "aria-labelledby": label ? labelId : void 0,
+                    "aria-label": !label ? ariaLabel : void 0,
+                    "aria-disabled": disabled || void 0,
+                    "data-testid": "tag-input__field"
+                  }
+                ) })
+              ]
+            }
+          ),
+          errorMessage && /* @__PURE__ */ jsx6(
+            Text,
+            {
+              id: errorId,
+              role: "alert",
+              color: theme.colors.content.alert.primary,
+              fontSize: sizeStyles.fontSize - 2,
+              style: { lineHeight: sizeStyles.lineHeight + "px" },
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TagInput.displayName = "TagInput";
 export {
-  Tag
+  Tag,
+  TagInput
 };
 //# sourceMappingURL=index.mjs.map