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

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@xsolla/xui-toggle-button-group",
+  "version": "0.101.0-pr166.1772004027",
+  "main": "./web/index.js",
+  "module": "./web/index.mjs",
+  "types": "./web/index.d.ts",
+  "scripts": {
+    "build": "yarn build:web && yarn build:native",
+    "build:web": "PLATFORM=web tsup",
+    "build:native": "PLATFORM=native tsup"
+  },
+  "dependencies": {
+    "@xsolla/xui-core": "0.101.0-pr166.1772004027",
+    "@xsolla/xui-primitives-core": "0.101.0-pr166.1772004027"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "styled-components": ">=4"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.0.18",
+    "tsup": "^8.0.0",
+    "vitest": "^4.0.18"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "react-native": "./native/index.js",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./native/index.d.ts",
+        "import": "./native/index.mjs",
+        "require": "./native/index.js"
+      },
+      "import": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.mjs"
+      },
+      "require": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.js"
+      },
+      "default": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.js"
+      }
+    }
+  }
+}

package/web/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/web/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/web/index.js

@@ -0,0 +1,480 @@
+"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-web/src/Box.tsx
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var StyledBox = import_styled_components.default.div`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  overflow: ${(props) => props.overflow || "visible"};
+  overflow-x: ${(props) => props.overflowX || "visible"};
+  overflow-y: ${(props) => props.overflowY || "visible"};
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  &:hover {
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = import_react.default.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    type,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledBox,
+      {
+        ref,
+        as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// ../primitives-web/src/Text.tsx
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var StyledText = import_styled_components2.default.span`
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-weight: ${(props) => props.fontWeight || "normal"};
+  font-family: ${(props) => props.fontFamily || '"Pilat Wide Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important'};
+  line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
+  white-space: ${(props) => props.whiteSpace || "normal"};
+  text-align: ${(props) => props.textAlign || "inherit"};
+  text-decoration: ${(props) => props.textDecoration || "none"};
+`;
+var Text = ({
+  style,
+  className,
+  id,
+  role,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role
+    }
+  );
+};
+
+// ../primitives-web/src/Icon.tsx
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var StyledIcon = import_styled_components3.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  color: ${(props) => props.color || "currentColor"};
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: currentColor;
+  }
+`;
+var Icon = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledIcon, { ...props, children });
+};
+
+// 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