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

package/web/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ToggleButtonGroup.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ToggleButtonGroupProps } from \"./types\";\n\n/**\n * ToggleButtonGroup - A control for picking one or several options from a set\n *\n * Used to pick one or several options from a linear set of closely related options.\n * Can be used to filter or to sort elements.\n *\n * ## Accessibility Features\n *\n * - **Role**: Uses `role=\"radiogroup\"` for single selection, `role=\"group\"` for multiple\n * - **Keyboard Navigation**: Arrow keys to navigate, Enter/Space to select\n * - **ARIA**: Proper aria-checked and aria-disabled states\n */\nexport const ToggleButtonGroup: React.FC<ToggleButtonGroupProps> = ({\n  items,\n  value,\n  defaultValue,\n  onChange,\n  size = \"md\",\n  appearance = \"separated\",\n  multiple = false,\n  id,\n  testID,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n}) => {\n  const { theme } = useDesignSystem();\n  const sizeStyles = theme.sizing.toggleButtonGroup(size);\n  const itemRefs = useRef<(HTMLElement | null)[]>([]);\n\n  // Internal state for uncontrolled mode\n  const [internalValue, setInternalValue] = useState<string[]>(() => {\n    if (defaultValue !== undefined) {\n      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];\n    }\n    return [];\n  });\n\n  // Determine current value (controlled vs uncontrolled)\n  const currentValue =\n    value !== undefined\n      ? Array.isArray(value)\n        ? value\n        : [value]\n      : internalValue;\n\n  const isItemActive = (itemId: string) => currentValue.includes(itemId);\n\n  const enabledIndices = items\n    .map((item, index) => (!item.disabled ? index : -1))\n    .filter((i) => i !== -1);\n\n  const focusItem = useCallback((index: number) => {\n    const element = itemRefs.current[index];\n    if (element) {\n      element.focus();\n    }\n  }, []);\n\n  const handleSelect = useCallback(\n    (itemId: string) => {\n      let newValue: string[];\n\n      if (multiple) {\n        // Multiple selection mode\n        if (currentValue.includes(itemId)) {\n          newValue = currentValue.filter((v) => v !== itemId);\n        } else {\n          newValue = [...currentValue, itemId];\n        }\n      } else {\n        // Single selection mode\n        newValue = [itemId];\n      }\n\n      // Update internal state for uncontrolled mode\n      if (value === undefined) {\n        setInternalValue(newValue);\n      }\n\n      // Call onChange with appropriate type\n      if (onChange) {\n        if (multiple) {\n          onChange(newValue);\n        } else {\n          onChange(newValue[0] || \"\");\n        }\n      }\n    },\n    [currentValue, multiple, value, onChange]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent, currentIndex: number) => {\n      const currentEnabledIndex = enabledIndices.indexOf(currentIndex);\n\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowDown\":\n          e.preventDefault();\n          {\n            const nextEnabledIndex =\n              currentEnabledIndex < enabledIndices.length - 1\n                ? enabledIndices[currentEnabledIndex + 1]\n                : enabledIndices[0];\n            focusItem(nextEnabledIndex);\n          }\n          break;\n\n        case \"ArrowLeft\":\n        case \"ArrowUp\":\n          e.preventDefault();\n          {\n            const prevEnabledIndex =\n              currentEnabledIndex > 0\n                ? enabledIndices[currentEnabledIndex - 1]\n                : enabledIndices[enabledIndices.length - 1];\n            focusItem(prevEnabledIndex);\n          }\n          break;\n\n        case \"Enter\":\n        case \" \":\n          e.preventDefault();\n          if (!items[currentIndex].disabled) {\n            handleSelect(items[currentIndex].id);\n          }\n          break;\n\n        default:\n          break;\n      }\n    },\n    [enabledIndices, focusItem, handleSelect, items]\n  );\n\n  const isSeparated = appearance === \"separated\";\n  const containerGap = isSeparated ? sizeStyles.itemGap : 0;\n\n  // Determine first active item for tabindex in single selection mode\n  const firstActiveIndex = items.findIndex((item) =>\n    currentValue.includes(item.id)\n  );\n  const firstEnabledIndex = enabledIndices[0] ?? 0;\n\n  return (\n    <Box\n      id={id}\n      role={multiple ? \"group\" : \"radiogroup\"}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      testID={testID}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      flexWrap=\"wrap\"\n      gap={containerGap}\n      {...(!isSeparated && {\n        borderWidth: 1,\n        borderColor: theme.colors.control.toggleButton.border,\n        borderStyle: \"solid\",\n        borderRadius: sizeStyles.borderRadius,\n        width: \"fit-content\",\n      })}\n    >\n      {items.map((item, index) => {\n        const isActive = isItemActive(item.id);\n        const isDisabled = item.disabled;\n        const itemId = id ? `${id}-item-${item.id}` : undefined;\n\n        // Determine tab index\n        let tabIndex: number;\n        if (isDisabled) {\n          tabIndex = -1;\n        } else if (multiple) {\n          // In multiple mode, all enabled items are tabbable\n          tabIndex = 0;\n        } else {\n          // In single mode, only the active item (or first enabled if none active) is tabbable\n          tabIndex =\n            isActive || (firstActiveIndex === -1 && index === firstEnabledIndex)\n              ? 0\n              : -1;\n        }\n\n        const handlePress = () => {\n          if (!isDisabled) {\n            handleSelect(item.id);\n          }\n        };\n\n        // Colors based on state - using toggle button specific colors\n        const toggleColors = theme.colors.control.toggleButton;\n\n        const bgColor = isDisabled\n          ? toggleColors.bgDisable\n          : isActive\n            ? toggleColors.bgPress\n            : toggleColors.bg;\n\n        const textColor = isDisabled\n          ? toggleColors.textDisable\n          : toggleColors.text;\n\n        const borderColor = isDisabled\n          ? toggleColors.borderDisable\n          : isActive\n            ? toggleColors.borderPress\n            : toggleColors.border;\n\n        return (\n          <Box\n            key={item.id}\n            as=\"button\"\n            role={multiple ? \"checkbox\" : \"radio\"}\n            id={itemId}\n            aria-checked={isActive}\n            aria-disabled={isDisabled}\n            aria-label={item[\"aria-label\"] || item.label}\n            tabIndex={tabIndex}\n            disabled={isDisabled}\n            ref={(el: HTMLElement | null) => {\n              itemRefs.current[index] = el;\n            }}\n            onPress={handlePress}\n            onKeyDown={(e: React.KeyboardEvent) => handleKeyDown(e, index)}\n            height={sizeStyles.height}\n            paddingHorizontal={sizeStyles.paddingHorizontal}\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            gap={sizeStyles.gap}\n            backgroundColor={bgColor}\n            {...(isSeparated && {\n              borderWidth: 1,\n              borderColor: borderColor,\n              borderStyle: \"solid\",\n              borderRadius: sizeStyles.borderRadius,\n            })}\n            cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n            hoverStyle={\n              !isDisabled && !isActive\n                ? {\n                    backgroundColor: toggleColors.bgHover,\n                    borderColor: toggleColors.borderHover,\n                  }\n                : undefined\n            }\n            {...(!isSeparated && {\n              borderLeftWidth: index > 0 ? 1 : 0,\n              borderLeftColor: theme.colors.control.toggleButton.border,\n              borderLeftStyle: \"solid\",\n            })}\n            style={{\n              flexShrink: 0,\n              ...(!isSeparated &&\n                index === 0 && {\n                  borderTopLeftRadius: sizeStyles.borderRadius - 1,\n                  borderBottomLeftRadius: sizeStyles.borderRadius - 1,\n                }),\n              ...(!isSeparated &&\n                index === items.length - 1 && {\n                  borderTopRightRadius: sizeStyles.borderRadius - 1,\n                  borderBottomRightRadius: sizeStyles.borderRadius - 1,\n                }),\n            }}\n          >\n            {item.iconLeft && (\n              <Icon size={sizeStyles.iconSize} color={textColor} aria-hidden>\n                {item.iconLeft}\n              </Icon>\n            )}\n            <Text\n              color={textColor}\n              fontSize={sizeStyles.fontSize}\n              fontWeight=\"400\"\n              textAlign=\"center\"\n              style={{\n                lineHeight: `${sizeStyles.lineHeight}px`,\n              }}\n            >\n              {item.label}\n            </Text>\n            {item.iconRight && (\n              <Icon size={sizeStyles.iconSize} color={textColor} aria-hidden>\n                {item.iconRight}\n              </Icon>\n            )}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n};\n\nToggleButtonGroup.displayName = \"ToggleButtonGroup\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n  display: flex;\n  box-sizing: border-box;\n  background-color: ${(props) => props.backgroundColor || \"transparent\"};\n  border-color: ${(props) => props.borderColor || \"transparent\"};\n  border-width: ${(props) =>\n    typeof props.borderWidth === \"number\"\n      ? `${props.borderWidth}px`\n      : props.borderWidth || 0};\n\n  ${(props) =>\n    props.borderBottomWidth !== undefined &&\n    `\n    border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n    border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n    border-bottom-style: solid;\n  `}\n  ${(props) =>\n    props.borderTopWidth !== undefined &&\n    `\n    border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n    border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n    border-top-style: solid;\n  `}\n  ${(props) =>\n    props.borderLeftWidth !== undefined &&\n    `\n    border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n    border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n    border-left-style: solid;\n  `}\n  ${(props) =>\n    props.borderRightWidth !== undefined &&\n    `\n    border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n    border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n    border-right-style: solid;\n  `}\n\n  border-style: ${(props) =>\n    props.borderStyle ||\n    (props.borderWidth ||\n    props.borderBottomWidth ||\n    props.borderTopWidth ||\n    props.borderLeftWidth ||\n    props.borderRightWidth\n      ? \"solid\"\n      : \"none\")};\n  border-radius: ${(props) =>\n    typeof props.borderRadius === \"number\"\n      ? `${props.borderRadius}px`\n      : props.borderRadius || 0};\n  height: ${(props) =>\n    typeof props.height === \"number\"\n      ? `${props.height}px`\n      : props.height || \"auto\"};\n  width: ${(props) =>\n    typeof props.width === \"number\"\n      ? `${props.width}px`\n      : props.width || \"auto\"};\n  min-width: ${(props) =>\n    typeof props.minWidth === \"number\"\n      ? `${props.minWidth}px`\n      : props.minWidth || \"auto\"};\n  min-height: ${(props) =>\n    typeof props.minHeight === \"number\"\n      ? `${props.minHeight}px`\n      : props.minHeight || \"auto\"};\n\n  padding: ${(props) =>\n    typeof props.padding === \"number\"\n      ? `${props.padding}px`\n      : props.padding || 0};\n  ${(props) =>\n    props.paddingHorizontal &&\n    `\n    padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n    padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n  `}\n  ${(props) =>\n    props.paddingVertical &&\n    `\n    padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n    padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n  `}\n  ${(props) =>\n    props.paddingTop !== undefined &&\n    `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n  ${(props) =>\n    props.paddingBottom !== undefined &&\n    `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n  ${(props) =>\n    props.paddingLeft !== undefined &&\n    `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n  ${(props) =>\n    props.paddingRight !== undefined &&\n    `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n  margin: ${(props) =>\n    typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n  ${(props) =>\n    props.marginTop !== undefined &&\n    `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n  ${(props) =>\n    props.marginBottom !== undefined &&\n    `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n  ${(props) =>\n    props.marginLeft !== undefined &&\n    `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n  ${(props) =>\n    props.marginRight !== undefined &&\n    `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n  flex-direction: ${(props) => props.flexDirection || \"column\"};\n  flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n  align-items: ${(props) => props.alignItems || \"stretch\"};\n  justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n  cursor: ${(props) =>\n    props.cursor\n      ? props.cursor\n      : props.onClick || props.onPress\n        ? \"pointer\"\n        : \"inherit\"};\n  position: ${(props) => props.position || \"static\"};\n  top: ${(props) =>\n    typeof props.top === \"number\" ? `${props.top}px` : props.top};\n  bottom: ${(props) =>\n    typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n  left: ${(props) =>\n    typeof props.left === \"number\" ? `${props.left}px` : props.left};\n  right: ${(props) =>\n    typeof props.right === \"number\" ? `${props.right}px` : props.right};\n  flex: ${(props) => props.flex};\n  flex-shrink: ${(props) => props.flexShrink ?? 1};\n  gap: ${(props) =>\n    typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n  align-self: ${(props) => props.alignSelf || \"auto\"};\n  overflow: ${(props) => props.overflow || \"visible\"};\n  overflow-x: ${(props) => props.overflowX || \"visible\"};\n  overflow-y: ${(props) => props.overflowY || \"visible\"};\n  z-index: ${(props) => props.zIndex};\n  opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n  pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n  &:hover {\n    ${(props) =>\n      props.hoverStyle?.backgroundColor &&\n      `background-color: ${props.hoverStyle.backgroundColor};`}\n    ${(props) =>\n      props.hoverStyle?.borderColor &&\n      `border-color: ${props.hoverStyle.borderColor};`}\n  }\n\n  &:active {\n    ${(props) =>\n      props.pressStyle?.backgroundColor &&\n      `background-color: ${props.pressStyle.backgroundColor};`}\n  }\n`;\n\nexport const Box = React.forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  BoxProps\n>(\n  (\n    {\n      children,\n      onPress,\n      onKeyDown,\n      onKeyUp,\n      role,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-current\": ariaCurrent,\n      \"aria-disabled\": ariaDisabled,\n      \"aria-live\": ariaLive,\n      \"aria-busy\": ariaBusy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-pressed\": ariaPressed,\n      \"aria-controls\": ariaControls,\n      tabIndex,\n      as,\n      src,\n      alt,\n      type,\n      disabled,\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    // Handle as=\"img\" for rendering images with proper border-radius\n    if (as === \"img\" && src) {\n      return (\n        <img\n          src={src}\n          alt={alt || \"\"}\n          style={{\n            display: \"block\",\n            objectFit: \"cover\",\n            width:\n              typeof props.width === \"number\"\n                ? `${props.width}px`\n                : props.width,\n            height:\n              typeof props.height === \"number\"\n                ? `${props.height}px`\n                : props.height,\n            borderRadius:\n              typeof props.borderRadius === \"number\"\n                ? `${props.borderRadius}px`\n                : props.borderRadius,\n            position: props.position,\n            top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n            left:\n              typeof props.left === \"number\" ? `${props.left}px` : props.left,\n            right:\n              typeof props.right === \"number\"\n                ? `${props.right}px`\n                : props.right,\n            bottom:\n              typeof props.bottom === \"number\"\n                ? `${props.bottom}px`\n                : props.bottom,\n          }}\n        />\n      );\n    }\n\n    return (\n      <StyledBox\n        ref={ref}\n        as={as}\n        id={id}\n        type={as === \"button\" ? type || \"button\" : undefined}\n        disabled={as === \"button\" ? disabled : undefined}\n        onClick={onPress}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        role={role}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-current={ariaCurrent}\n        aria-disabled={ariaDisabled}\n        aria-busy={ariaBusy}\n        aria-describedby={ariaDescribedBy}\n        aria-expanded={ariaExpanded}\n        aria-haspopup={ariaHasPopup}\n        aria-pressed={ariaPressed}\n        aria-controls={ariaControls}\n        aria-live={ariaLive}\n        tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n        {...props}\n      >\n        {children}\n      </StyledBox>\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n  color: ${(props) => props.color || \"inherit\"};\n  font-size: ${(props) =>\n    typeof props.fontSize === \"number\"\n      ? `${props.fontSize}px`\n      : props.fontSize || \"inherit\"};\n  font-weight: ${(props) => props.fontWeight || \"normal\"};\n  font-family: ${(props) =>\n    props.fontFamily ||\n    '\"Pilat Wide Bold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important'};\n  line-height: ${(props) =>\n    typeof props.lineHeight === \"number\"\n      ? `${props.lineHeight}px`\n      : props.lineHeight || \"inherit\"};\n  white-space: ${(props) => props.whiteSpace || \"normal\"};\n  text-align: ${(props) => props.textAlign || \"inherit\"};\n  text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n  style,\n  className,\n  id,\n  role,\n  ...props\n}) => {\n  return (\n    <StyledText\n      {...props}\n      style={style}\n      className={className}\n      id={id}\n      role={role}\n    />\n  );\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${(props) =>\n    typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n  height: ${(props) =>\n    typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n  color: ${(props) => props.color || \"currentColor\"};\n\n  svg {\n    width: 100%;\n    height: 100%;\n    fill: none;\n    stroke: currentColor;\n  }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n  return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n"],"mappings":"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","names":["styled","jsx","styled","jsx","jsx"]}