@xsolla/xui-tag 0.222.0 → 0.223.0

package/web/index.d.mts

@@ -14,12 +14,57 @@ interface TagProps extends ThemeOverrideProps {
     iconLeft?: ReactNode;
     /** Icon displayed on the right side of the label */
     iconRight?: ReactNode;
-    /** Callback when the remove (X) icon is clicked */
+    /** Callback when the remove (X) button is pressed */
     onRemove?: () => void;
+    /**
+     * Accessible name of the remove button. Defaults to "Remove {children}" when
+     * `children` is a string or number, otherwise "Remove".
+     */
+    removeLabel?: string;
     testID?: string;
     /** Extra styles merged onto the chip. Used for fills the tone tokens do not cover. */
     style?: React.CSSProperties;
 }
 declare const Tag: React.FC<TagProps>;
 
-export { Tag, type TagProps };
+type TagInputSize = "xl" | "lg" | "md" | "sm" | "xs";
+interface TagInputProps extends ThemeOverrideProps {
+    /** Current list of chip values (controlled). */
+    value: string[];
+    /** Called with the next list whenever a chip is added or removed. */
+    onChange: (value: string[]) => void;
+    /** Placeholder shown in the text field while no draft text is typed. */
+    placeholder?: string;
+    /** Size of the field. Chips are sized to fit inside it. */
+    size?: TagInputSize;
+    /** Disables typing and chip removal. */
+    disabled?: boolean;
+    /** Highlights the field as invalid. */
+    error?: boolean;
+    /** Error message rendered below the field. Also highlights the field as invalid. */
+    errorMessage?: string;
+    /** Visible label rendered above the field. */
+    label?: string;
+    /** Accessible label for the text field when no visible `label` is set. */
+    "aria-label"?: string;
+    /** Id of the text field. Generated when omitted. */
+    id?: string;
+    /** Name of the text field. */
+    name?: string;
+    /** Called when the text field receives focus. */
+    onFocus?: () => void;
+    /** Called when the text field loses focus (after any draft is committed). */
+    onBlur?: () => void;
+    testID?: string;
+}
+/**
+ * Text field that turns typed values into removable chips.
+ *
+ * - Enter adds the typed text as a chip and never submits the surrounding form.
+ * - Leaving the field adds the typed text too.
+ * - Backspace in an empty field removes the last chip.
+ * - Values are kept as typed: no trimming and no de-duplication.
+ */
+declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Tag, TagInput, type TagInputProps, type TagProps };

package/web/index.d.ts

@@ -14,12 +14,57 @@ interface TagProps extends ThemeOverrideProps {
     iconLeft?: ReactNode;
     /** Icon displayed on the right side of the label */
     iconRight?: ReactNode;
-    /** Callback when the remove (X) icon is clicked */
+    /** Callback when the remove (X) button is pressed */
     onRemove?: () => void;
+    /**
+     * Accessible name of the remove button. Defaults to "Remove {children}" when
+     * `children` is a string or number, otherwise "Remove".
+     */
+    removeLabel?: string;
     testID?: string;
     /** Extra styles merged onto the chip. Used for fills the tone tokens do not cover. */
     style?: React.CSSProperties;
 }
 declare const Tag: React.FC<TagProps>;
 
-export { Tag, type TagProps };
+type TagInputSize = "xl" | "lg" | "md" | "sm" | "xs";
+interface TagInputProps extends ThemeOverrideProps {
+    /** Current list of chip values (controlled). */
+    value: string[];
+    /** Called with the next list whenever a chip is added or removed. */
+    onChange: (value: string[]) => void;
+    /** Placeholder shown in the text field while no draft text is typed. */
+    placeholder?: string;
+    /** Size of the field. Chips are sized to fit inside it. */
+    size?: TagInputSize;
+    /** Disables typing and chip removal. */
+    disabled?: boolean;
+    /** Highlights the field as invalid. */
+    error?: boolean;
+    /** Error message rendered below the field. Also highlights the field as invalid. */
+    errorMessage?: string;
+    /** Visible label rendered above the field. */
+    label?: string;
+    /** Accessible label for the text field when no visible `label` is set. */
+    "aria-label"?: string;
+    /** Id of the text field. Generated when omitted. */
+    id?: string;
+    /** Name of the text field. */
+    name?: string;
+    /** Called when the text field receives focus. */
+    onFocus?: () => void;
+    /** Called when the text field loses focus (after any draft is committed). */
+    onBlur?: () => void;
+    testID?: string;
+}
+/**
+ * Text field that turns typed values into removable chips.
+ *
+ * - Enter adds the typed text as a chip and never submits the surrounding form.
+ * - Leaving the field adds the typed text too.
+ * - Backspace in an empty field removes the last chip.
+ * - Values are kept as typed: no trimming and no de-duplication.
+ */
+declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Tag, TagInput, type TagInputProps, type TagProps };

package/web/index.js

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  Tag: () => Tag
+  Tag: () => Tag,
+  TagInput: () => TagInput
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -399,10 +400,141 @@ var Icon = ({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledIcon, { "data-testid": dataTestId || testID, ...props, children });
 };
 
+// ../../foundation/primitives-web/src/Input.tsx
+var import_react3 = require("react");
+var import_styled_components4 = __toESM(require("styled-components"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FilteredInput = createFilteredElement("input");
+var StyledInput = (0, import_styled_components4.default)(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 = (0, import_react3.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__ */ (0, import_jsx_runtime4.jsx)(
+      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
 var import_xui_core = require("@xsolla/xui-core");
 var import_xui_icons = require("@xsolla/xui-icons");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Tag = ({
   size = "md",
   tone = "primary",
@@ -411,6 +543,7 @@ var Tag = ({
   iconLeft,
   iconRight,
   onRemove,
+  removeLabel,
   testID,
   themeMode,
   themeProductContext,
@@ -473,7 +606,8 @@ var Tag = ({
   };
   const { bg, text, border } = resolveColors();
   const isIconOnly = !children && (!!iconLeft || !!iconRight);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const resolvedRemoveLabel = removeLabel ?? (typeof children === "string" || typeof children === "number" ? `Remove ${children}` : "Remove");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Box,
     {
       testID,
@@ -496,8 +630,8 @@ var Tag = ({
         ...style
       },
       children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Text,
           {
             color: text,
@@ -512,14 +646,238 @@ var Tag = ({
             children
           }
         ),
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: text, children: iconRight }),
-        onRemove && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.X, { size: sizeStyles.iconSize, color: text }) })
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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__ */ (0, import_jsx_runtime5.jsx)(
+          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__ */ (0, import_jsx_runtime5.jsx)(import_xui_icons.X, { size: sizeStyles.iconSize, color: text })
+          }
+        )
       ]
     }
   );
 };
+
+// src/TagInput.tsx
+var import_react4 = require("react");
+var import_xui_core2 = require("@xsolla/xui-core");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var chipSizeConfig = {
+  xl: "lg",
+  lg: "md",
+  md: "sm",
+  sm: "xs",
+  xs: "xs"
+};
+var TagInput = (0, import_react4.forwardRef)(
+  ({
+    value,
+    onChange,
+    placeholder,
+    size = "md",
+    disabled = false,
+    error,
+    errorMessage,
+    label,
+    "aria-label": ariaLabel,
+    id: providedId,
+    name,
+    onFocus,
+    onBlur,
+    testID,
+    themeMode,
+    themeProductContext
+  }, ref) => {
+    const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
+    const [draft, setDraft] = (0, import_react4.useState)("");
+    const [isFocus, setIsFocus] = (0, import_react4.useState)(false);
+    const inputRef = (0, import_react4.useRef)(null);
+    const rawId = (0, import_xui_core2.useId)();
+    const safeId = rawId.replace(/:/g, "");
+    const inputId = providedId || `tag-input-${safeId}`;
+    const labelId = `${inputId}-label`;
+    const errorId = `${inputId}-error`;
+    (0, import_react4.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__ */ (0, import_jsx_runtime6.jsxs)(
+      Box,
+      {
+        flexDirection: "column",
+        gap: sizeStyles.fieldGap,
+        width: "100%",
+        testID,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { as: "label", id: labelId, htmlFor: inputId, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Text,
+            {
+              color: theme.colors.content.secondary,
+              fontSize: sizeStyles.fontSize - 2,
+              fontWeight: "500",
+              children: label
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            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__ */ (0, import_jsx_runtime6.jsx)(
+                  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__ */ (0, import_jsx_runtime6.jsx)(Box, { flex: 1, minWidth: 80, height: chipHeight, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  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__ */ (0, import_jsx_runtime6.jsx)(
+            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";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Tag
+  Tag,
+  TagInput
 });
 //# sourceMappingURL=index.js.map