@xsolla/xui-toggle-button-group 0.101.0-pr166.1772004027

package/README.md

@@ -0,0 +1,78 @@
+# @xsolla/xui-toggle-button-group
+
+A control for picking one or several options from a linear set of closely related options. Can be used to filter or to sort elements.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-toggle-button-group
+# or
+yarn add @xsolla/xui-toggle-button-group
+```
+
+## Usage
+
+```tsx
+import { ToggleButtonGroup } from '@xsolla/xui-toggle-button-group';
+
+// Single selection (default)
+const [value, setValue] = useState('item1');
+
+<ToggleButtonGroup
+  items={[
+    { id: 'item1', label: 'Option 1' },
+    { id: 'item2', label: 'Option 2' },
+    { id: 'item3', label: 'Option 3' },
+  ]}
+  value={value}
+  onChange={(v) => setValue(v as string)}
+/>
+
+// Multiple selection
+const [values, setValues] = useState(['item1', 'item3']);
+
+<ToggleButtonGroup
+  items={[
+    { id: 'item1', label: 'Option 1' },
+    { id: 'item2', label: 'Option 2' },
+    { id: 'item3', label: 'Option 3' },
+  ]}
+  value={values}
+  onChange={(v) => setValues(v as string[])}
+  multiple
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `ToggleButtonGroupItem[]` | required | Array of items to display |
+| `value` | `string \| string[]` | - | Controlled value(s) |
+| `defaultValue` | `string \| string[]` | - | Default value(s) for uncontrolled mode |
+| `onChange` | `(value: string \| string[]) => void` | - | Callback when selection changes |
+| `size` | `'xl' \| 'lg' \| 'md' \| 'sm'` | `'md'` | Size variant |
+| `appearance` | `'separated' \| 'united'` | `'separated'` | Visual style |
+| `multiple` | `boolean` | `false` | Allow multiple selections |
+| `id` | `string` | - | HTML id attribute |
+| `testID` | `string` | - | Test ID for testing frameworks |
+| `aria-label` | `string` | - | Accessible label for the group |
+| `aria-labelledby` | `string` | - | ID of element that labels this group |
+
+### ToggleButtonGroupItem
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `id` | `string` | Unique identifier |
+| `label` | `string` | Display text |
+| `iconLeft` | `ReactNode` | Optional icon on the left |
+| `iconRight` | `ReactNode` | Optional icon on the right |
+| `disabled` | `boolean` | Whether the item is disabled |
+| `aria-label` | `string` | Accessible label for screen readers |
+
+## Accessibility
+
+- Uses `role="radiogroup"` for single selection, `role="group"` for multiple
+- Arrow keys navigate between items
+- Enter/Space selects/toggles items
+- Proper `aria-checked` and `aria-disabled` states

package/native/index.d.mts

@@ -0,0 +1,58 @@
+import React from 'react';
+
+type ToggleButtonGroupSize = "xl" | "lg" | "md" | "sm";
+type ToggleButtonGroupAppearance = "separated" | "united";
+interface ToggleButtonGroupItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display label for the item */
+    label: string;
+    /** Optional icon to display on the left */
+    iconLeft?: React.ReactNode;
+    /** Optional icon to display on the right */
+    iconRight?: React.ReactNode;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Accessible label for screen readers */
+    "aria-label"?: string;
+}
+interface ToggleButtonGroupProps {
+    /** Array of items */
+    items: ToggleButtonGroupItem[];
+    /** ID(s) of the currently active item(s). For single selection, pass a string. For multiple selection, pass an array. */
+    value?: string | string[];
+    /** Default value(s) for uncontrolled mode */
+    defaultValue?: string | string[];
+    /** Callback when selection changes. Returns string for single selection, string[] for multiple. */
+    onChange?: (value: string | string[]) => void;
+    /** Size variant */
+    size?: ToggleButtonGroupSize;
+    /** Visual appearance - separated has gaps, united has connected items */
+    appearance?: ToggleButtonGroupAppearance;
+    /** Whether multiple items can be selected */
+    multiple?: boolean;
+    /** HTML id attribute */
+    id?: string;
+    /** Test ID for testing frameworks */
+    testID?: string;
+    /** Accessible label for the group */
+    "aria-label"?: string;
+    /** ID of element that labels this group */
+    "aria-labelledby"?: string;
+}
+
+/**
+ * ToggleButtonGroup - A control for picking one or several options from a set
+ *
+ * Used to pick one or several options from a linear set of closely related options.
+ * Can be used to filter or to sort elements.
+ *
+ * ## Accessibility Features
+ *
+ * - **Role**: Uses `role="radiogroup"` for single selection, `role="group"` for multiple
+ * - **Keyboard Navigation**: Arrow keys to navigate, Enter/Space to select
+ * - **ARIA**: Proper aria-checked and aria-disabled states
+ */
+declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
+
+export { ToggleButtonGroup, type ToggleButtonGroupAppearance, type ToggleButtonGroupItem, type ToggleButtonGroupProps, type ToggleButtonGroupSize };

package/native/index.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+
+type ToggleButtonGroupSize = "xl" | "lg" | "md" | "sm";
+type ToggleButtonGroupAppearance = "separated" | "united";
+interface ToggleButtonGroupItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display label for the item */
+    label: string;
+    /** Optional icon to display on the left */
+    iconLeft?: React.ReactNode;
+    /** Optional icon to display on the right */
+    iconRight?: React.ReactNode;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Accessible label for screen readers */
+    "aria-label"?: string;
+}
+interface ToggleButtonGroupProps {
+    /** Array of items */
+    items: ToggleButtonGroupItem[];
+    /** ID(s) of the currently active item(s). For single selection, pass a string. For multiple selection, pass an array. */
+    value?: string | string[];
+    /** Default value(s) for uncontrolled mode */
+    defaultValue?: string | string[];
+    /** Callback when selection changes. Returns string for single selection, string[] for multiple. */
+    onChange?: (value: string | string[]) => void;
+    /** Size variant */
+    size?: ToggleButtonGroupSize;
+    /** Visual appearance - separated has gaps, united has connected items */
+    appearance?: ToggleButtonGroupAppearance;
+    /** Whether multiple items can be selected */
+    multiple?: boolean;
+    /** HTML id attribute */
+    id?: string;
+    /** Test ID for testing frameworks */
+    testID?: string;
+    /** Accessible label for the group */
+    "aria-label"?: string;
+    /** ID of element that labels this group */
+    "aria-labelledby"?: string;
+}
+
+/**
+ * ToggleButtonGroup - A control for picking one or several options from a set
+ *
+ * Used to pick one or several options from a linear set of closely related options.
+ * Can be used to filter or to sort elements.
+ *
+ * ## Accessibility Features
+ *
+ * - **Role**: Uses `role="radiogroup"` for single selection, `role="group"` for multiple
+ * - **Keyboard Navigation**: Arrow keys to navigate, Enter/Space to select
+ * - **ARIA**: Proper aria-checked and aria-disabled states
+ */
+declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
+
+export { ToggleButtonGroup, type ToggleButtonGroupAppearance, type ToggleButtonGroupItem, type ToggleButtonGroupProps, type ToggleButtonGroupSize };

package/native/index.js

@@ -0,0 +1,482 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  ToggleButtonGroup: () => ToggleButtonGroup
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ToggleButtonGroup.tsx
+var import_react2 = require("react");
+
+// ../primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  id,
+  role,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide Bold") {
+    resolvedFontFamily = void 0;
+  }
+  const style = {
+    color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style, testID: id, accessibilityRole, children });
+};
+
+// ../primitives-native/src/Icon.tsx
+var import_react = __toESM(require("react"));
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Icon = ({ children, color, size }) => {
+  const style = {
+    width: typeof size === "number" ? size : void 0,
+    height: typeof size === "number" ? size : void 0,
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const childrenWithProps = import_react.default.Children.map(children, (child) => {
+    if (import_react.default.isValidElement(child)) {
+      return import_react.default.cloneElement(child, {
+        color: child.props.color || color,
+        // Also pass size if child seems to be an icon that needs it
+        size: child.props.size || size
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, children: childrenWithProps });
+};
+
+// src/ToggleButtonGroup.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ToggleButtonGroup = ({
+  items,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  appearance = "separated",
+  multiple = false,
+  id,
+  testID,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) => {
+  const { theme } = (0, import_xui_core.useDesignSystem)();
+  const sizeStyles = theme.sizing.toggleButtonGroup(size);
+  const itemRefs = (0, import_react2.useRef)([]);
+  const [internalValue, setInternalValue] = (0, import_react2.useState)(() => {
+    if (defaultValue !== void 0) {
+      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    }
+    return [];
+  });
+  const currentValue = value !== void 0 ? Array.isArray(value) ? value : [value] : internalValue;
+  const isItemActive = (itemId) => currentValue.includes(itemId);
+  const enabledIndices = items.map((item, index) => !item.disabled ? index : -1).filter((i) => i !== -1);
+  const focusItem = (0, import_react2.useCallback)((index) => {
+    const element = itemRefs.current[index];
+    if (element) {
+      element.focus();
+    }
+  }, []);
+  const handleSelect = (0, import_react2.useCallback)(
+    (itemId) => {
+      let newValue;
+      if (multiple) {
+        if (currentValue.includes(itemId)) {
+          newValue = currentValue.filter((v) => v !== itemId);
+        } else {
+          newValue = [...currentValue, itemId];
+        }
+      } else {
+        newValue = [itemId];
+      }
+      if (value === void 0) {
+        setInternalValue(newValue);
+      }
+      if (onChange) {
+        if (multiple) {
+          onChange(newValue);
+        } else {
+          onChange(newValue[0] || "");
+        }
+      }
+    },
+    [currentValue, multiple, value, onChange]
+  );
+  const handleKeyDown = (0, import_react2.useCallback)(
+    (e, currentIndex) => {
+      const currentEnabledIndex = enabledIndices.indexOf(currentIndex);
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault();
+          {
+            const nextEnabledIndex = currentEnabledIndex < enabledIndices.length - 1 ? enabledIndices[currentEnabledIndex + 1] : enabledIndices[0];
+            focusItem(nextEnabledIndex);
+          }
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault();
+          {
+            const prevEnabledIndex = currentEnabledIndex > 0 ? enabledIndices[currentEnabledIndex - 1] : enabledIndices[enabledIndices.length - 1];
+            focusItem(prevEnabledIndex);
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (!items[currentIndex].disabled) {
+            handleSelect(items[currentIndex].id);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [enabledIndices, focusItem, handleSelect, items]
+  );
+  const isSeparated = appearance === "separated";
+  const containerGap = isSeparated ? sizeStyles.itemGap : 0;
+  const firstActiveIndex = items.findIndex(
+    (item) => currentValue.includes(item.id)
+  );
+  const firstEnabledIndex = enabledIndices[0] ?? 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Box,
+    {
+      id,
+      role: multiple ? "group" : "radiogroup",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      testID,
+      flexDirection: "row",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: containerGap,
+      ...!isSeparated && {
+        borderWidth: 1,
+        borderColor: theme.colors.control.toggleButton.border,
+        borderStyle: "solid",
+        borderRadius: sizeStyles.borderRadius,
+        width: "fit-content"
+      },
+      children: items.map((item, index) => {
+        const isActive = isItemActive(item.id);
+        const isDisabled = item.disabled;
+        const itemId = id ? `${id}-item-${item.id}` : void 0;
+        let tabIndex;
+        if (isDisabled) {
+          tabIndex = -1;
+        } else if (multiple) {
+          tabIndex = 0;
+        } else {
+          tabIndex = isActive || firstActiveIndex === -1 && index === firstEnabledIndex ? 0 : -1;
+        }
+        const handlePress = () => {
+          if (!isDisabled) {
+            handleSelect(item.id);
+          }
+        };
+        const toggleColors = theme.colors.control.toggleButton;
+        const bgColor = isDisabled ? toggleColors.bgDisable : isActive ? toggleColors.bgPress : toggleColors.bg;
+        const textColor = isDisabled ? toggleColors.textDisable : toggleColors.text;
+        const borderColor = isDisabled ? toggleColors.borderDisable : isActive ? toggleColors.borderPress : toggleColors.border;
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          Box,
+          {
+            as: "button",
+            role: multiple ? "checkbox" : "radio",
+            id: itemId,
+            "aria-checked": isActive,
+            "aria-disabled": isDisabled,
+            "aria-label": item["aria-label"] || item.label,
+            tabIndex,
+            disabled: isDisabled,
+            ref: (el) => {
+              itemRefs.current[index] = el;
+            },
+            onPress: handlePress,
+            onKeyDown: (e) => handleKeyDown(e, index),
+            height: sizeStyles.height,
+            paddingHorizontal: sizeStyles.paddingHorizontal,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: sizeStyles.gap,
+            backgroundColor: bgColor,
+            ...isSeparated && {
+              borderWidth: 1,
+              borderColor,
+              borderStyle: "solid",
+              borderRadius: sizeStyles.borderRadius
+            },
+            cursor: isDisabled ? "not-allowed" : "pointer",
+            hoverStyle: !isDisabled && !isActive ? {
+              backgroundColor: toggleColors.bgHover,
+              borderColor: toggleColors.borderHover
+            } : void 0,
+            ...!isSeparated && {
+              borderLeftWidth: index > 0 ? 1 : 0,
+              borderLeftColor: theme.colors.control.toggleButton.border,
+              borderLeftStyle: "solid"
+            },
+            style: {
+              flexShrink: 0,
+              ...!isSeparated && index === 0 && {
+                borderTopLeftRadius: sizeStyles.borderRadius - 1,
+                borderBottomLeftRadius: sizeStyles.borderRadius - 1
+              },
+              ...!isSeparated && index === items.length - 1 && {
+                borderTopRightRadius: sizeStyles.borderRadius - 1,
+                borderBottomRightRadius: sizeStyles.borderRadius - 1
+              }
+            },
+            children: [
+              item.iconLeft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: item.iconLeft }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Text,
+                {
+                  color: textColor,
+                  fontSize: sizeStyles.fontSize,
+                  fontWeight: "400",
+                  textAlign: "center",
+                  style: {
+                    lineHeight: `${sizeStyles.lineHeight}px`
+                  },
+                  children: item.label
+                }
+              ),
+              item.iconRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: item.iconRight })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+};
+ToggleButtonGroup.displayName = "ToggleButtonGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleButtonGroup
+});
+//# sourceMappingURL=index.js.map