@xsolla/xui-b2b-collapsible 0.147.1

package/native/index.mjs

@@ -0,0 +1,501 @@
+// src/Collapsible.tsx
+import { forwardRef, useState, useCallback, useRef } from "react";
+
+// ../../foundation/primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "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,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  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,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    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__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+import {
+  Text as RNText,
+  StyleSheet
+} from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ jsx2(
+    RNText,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Icon.tsx
+import React from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx3 } from "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 = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.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__ */ jsx3(View2, { style, children: childrenWithProps });
+};
+
+// src/Collapsible.tsx
+import { useResolvedTheme } from "@xsolla/xui-core";
+import { ChevronDown } from "@xsolla/xui-icons-base";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var PANEL_TRANSITION = "grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1)";
+var CHEVRON_TRANSITION = "transform 280ms cubic-bezier(0.4, 0, 0.2, 1)";
+var Collapsible = forwardRef(
+  ({
+    title,
+    caption: captionProp,
+    icon,
+    trailing: trailingProp,
+    view = "without-surface",
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    className,
+    "aria-label": ariaLabel,
+    themeMode,
+    themeProductContext,
+    // deprecated aliases
+    onChange,
+    statusIcon,
+    description,
+    ...rest
+  }, ref) => {
+    const caption = captionProp ?? description;
+    const trailing = trailingProp ?? statusIcon;
+    const resolvedOnOpenChange = onOpenChange ?? onChange;
+    const panelIdRef = useRef();
+    if (!panelIdRef.current) {
+      panelIdRef.current = `collapsible-panel-${Math.random().toString(36).slice(2, 10)}`;
+    }
+    const panelId = panelIdRef.current;
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const sizing = theme.sizing.collapsibleB2b();
+    const isControlled = openProp !== void 0;
+    const [openState, setOpenState] = useState(defaultOpen);
+    const open = isControlled ? openProp : openState;
+    const handleToggle = useCallback(() => {
+      const next = !open;
+      if (!isControlled) setOpenState(next);
+      resolvedOnOpenChange?.(next);
+    }, [open, isControlled, resolvedOnOpenChange]);
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleToggle();
+        } else if (e.key === " ") {
+          e.preventDefault();
+        }
+      },
+      [handleToggle]
+    );
+    const handleKeyUp = useCallback(
+      (e) => {
+        if (e.key === " ") {
+          e.preventDefault();
+          handleToggle();
+        }
+      },
+      [handleToggle]
+    );
+    const isWhite = view === "white-surface";
+    const isGrey = view === "grey-surface";
+    const isWithout = view === "without-surface";
+    const rootStyle = {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      backgroundColor: isWhite ? theme.colors.background.primary : isGrey ? theme.colors.overlay.mono : void 0,
+      borderRadius: !isWithout ? sizing.surfaceRadius : void 0,
+      borderBottom: isWithout ? `1px solid ${theme.colors.border.secondary}` : void 0
+    };
+    const cellStyle = {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: sizing.triggerGap,
+      width: "100%",
+      minHeight: isWithout ? sizing.triggerMinHeight : void 0,
+      padding: !isWithout ? sizing.triggerPadding : 0,
+      backgroundColor: isWhite ? theme.colors.background.primary : isGrey ? theme.colors.overlay.mono : void 0,
+      borderRadius: !isWithout ? open ? `${sizing.cellRadius}px ${sizing.cellRadius}px 0 0` : sizing.cellRadius : void 0,
+      borderBottom: open ? `1px solid ${theme.colors.border.secondary}` : void 0
+    };
+    const panelGridStyle = {
+      display: "grid",
+      gridTemplateRows: open ? "1fr" : "0fr",
+      transition: PANEL_TRANSITION,
+      width: "100%"
+    };
+    const panelInnerStyle = {
+      overflow: "hidden"
+    };
+    const panelContentStyle = {
+      boxSizing: "border-box",
+      width: "100%",
+      padding: sizing.panelPadding
+    };
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        "data-testid": "collapsible",
+        "data-open": open,
+        className,
+        width: "100%",
+        style: rootStyle,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              "aria-expanded": open,
+              "aria-controls": panelId,
+              "aria-label": ariaLabel ?? (typeof title === "string" ? title : void 0),
+              onClick: handleToggle,
+              onKeyDown: handleKeyDown,
+              onKeyUp: handleKeyUp,
+              style: { boxSizing: "border-box", width: "100%", cursor: "pointer" },
+              children: /* @__PURE__ */ jsxs("div", { style: cellStyle, children: [
+                icon && /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    onClick: (e) => e.stopPropagation(),
+                    onKeyDown: (e) => e.stopPropagation(),
+                    onKeyUp: (e) => e.stopPropagation(),
+                    style: { flexShrink: 0, display: "flex", alignItems: "center" },
+                    children: icon
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "flex-start",
+                      gap: sizing.textGap,
+                      minWidth: 0
+                    },
+                    children: [
+                      typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ jsx4(
+                        Text,
+                        {
+                          color: theme.colors.content.primary,
+                          fontSize: sizing.titleFontSize,
+                          lineHeight: sizing.titleLineHeight,
+                          fontWeight: "500",
+                          children: title
+                        }
+                      ) : title,
+                      caption !== void 0 && (typeof caption === "string" || typeof caption === "number" ? /* @__PURE__ */ jsx4(
+                        Text,
+                        {
+                          color: theme.colors.content.tertiary,
+                          fontSize: sizing.captionFontSize,
+                          lineHeight: sizing.captionLineHeight,
+                          fontWeight: "400",
+                          children: caption
+                        }
+                      ) : caption)
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center",
+                      gap: sizing.trailingGap,
+                      flexShrink: 0
+                    },
+                    children: [
+                      trailing && /* @__PURE__ */ jsx4(
+                        "div",
+                        {
+                          onClick: (e) => e.stopPropagation(),
+                          onKeyDown: (e) => e.stopPropagation(),
+                          onKeyUp: (e) => e.stopPropagation(),
+                          style: { display: "flex", alignItems: "center" },
+                          children: trailing
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        "div",
+                        {
+                          style: {
+                            transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                            transition: CHEVRON_TRANSITION,
+                            display: "flex",
+                            alignItems: "center"
+                          },
+                          children: /* @__PURE__ */ jsx4(
+                            Icon,
+                            {
+                              color: theme.colors.content.primary,
+                              size: sizing.chevronSize,
+                              children: /* @__PURE__ */ jsx4(ChevronDown, {})
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx4("div", { id: panelId, style: panelGridStyle, children: /* @__PURE__ */ jsx4("div", { style: panelInnerStyle, children: /* @__PURE__ */ jsx4("div", { style: panelContentStyle, children }) }) })
+        ]
+      }
+    );
+  }
+);
+Collapsible.displayName = "Collapsible";
+export {
+  Collapsible
+};
+//# sourceMappingURL=index.mjs.map

package/native/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Collapsible.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx"],"sourcesContent":["import { forwardRef, useState, useCallback, useRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport { ChevronDown, ChevronUp } from \"@xsolla/xui-icons-base\";\nimport type { CollapsibleProps } from \"./types\";\n\nconst PANEL_TRANSITION =\n  \"grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1)\";\nconst CHEVRON_TRANSITION = \"transform 280ms cubic-bezier(0.4, 0, 0.2, 1)\";\n\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n  (\n    {\n      title,\n      caption: captionProp,\n      icon,\n      trailing: trailingProp,\n      view = \"without-surface\",\n      open: openProp,\n      defaultOpen = false,\n      onOpenChange,\n      children,\n      className,\n      \"aria-label\": ariaLabel,\n      themeMode,\n      themeProductContext,\n      // deprecated aliases\n      onChange,\n      statusIcon,\n      description,\n      ...rest\n    },\n    ref\n  ) => {\n    const caption = captionProp ?? description;\n    const trailing = trailingProp ?? statusIcon;\n    const resolvedOnOpenChange = onOpenChange ?? onChange;\n\n    // Stable panel ID — React 16 compatible (no useId)\n    const panelIdRef = useRef<string>();\n    if (!panelIdRef.current) {\n      panelIdRef.current = `collapsible-panel-${Math.random().toString(36).slice(2, 10)}`;\n    }\n    const panelId = panelIdRef.current;\n\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n    const sizing = theme.sizing.collapsibleB2b();\n\n    const isControlled = openProp !== undefined;\n    const [openState, setOpenState] = useState(defaultOpen);\n    const open = isControlled ? openProp! : openState;\n\n    const handleToggle = useCallback(() => {\n      const next = !open;\n      if (!isControlled) setOpenState(next);\n      resolvedOnOpenChange?.(next);\n    }, [open, isControlled, resolvedOnOpenChange]);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          e.preventDefault();\n          handleToggle();\n        } else if (e.key === \" \") {\n          e.preventDefault();\n        }\n      },\n      [handleToggle]\n    );\n\n    const handleKeyUp = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (e.key === \" \") {\n          e.preventDefault();\n          handleToggle();\n        }\n      },\n      [handleToggle]\n    );\n\n    const isWhite = view === \"white-surface\";\n    const isGrey = view === \"grey-surface\";\n    const isWithout = view === \"without-surface\";\n\n    // Root is always column — avoids flex-direction flip that breaks width\n    const rootStyle: React.CSSProperties = {\n      boxSizing: \"border-box\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      overflow: \"hidden\",\n      backgroundColor: isWhite\n        ? theme.colors.background.primary\n        : isGrey\n          ? theme.colors.overlay.mono\n          : undefined,\n      borderRadius: !isWithout ? sizing.surfaceRadius : undefined,\n      borderBottom: isWithout\n        ? `1px solid ${theme.colors.border.secondary}`\n        : undefined,\n    };\n\n    const cellStyle: React.CSSProperties = {\n      boxSizing: \"border-box\",\n      display: \"flex\",\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      gap: sizing.triggerGap,\n      width: \"100%\",\n      minHeight: isWithout ? sizing.triggerMinHeight : undefined,\n      padding: !isWithout ? sizing.triggerPadding : 0,\n      backgroundColor: isWhite\n        ? theme.colors.background.primary\n        : isGrey\n          ? theme.colors.overlay.mono\n          : undefined,\n      borderRadius: !isWithout\n        ? open\n          ? `${sizing.cellRadius}px ${sizing.cellRadius}px 0 0`\n          : sizing.cellRadius\n        : undefined,\n      borderBottom: open\n        ? `1px solid ${theme.colors.border.secondary}`\n        : undefined,\n    };\n\n    // grid-template-rows trick: 0fr (collapsed) ↔ 1fr (expanded)\n    // The inner div has overflow:hidden so content is clipped during transition\n    const panelGridStyle: React.CSSProperties = {\n      display: \"grid\",\n      gridTemplateRows: open ? \"1fr\" : \"0fr\",\n      transition: PANEL_TRANSITION,\n      width: \"100%\",\n    };\n\n    const panelInnerStyle: React.CSSProperties = {\n      overflow: \"hidden\",\n    };\n\n    const panelContentStyle: React.CSSProperties = {\n      boxSizing: \"border-box\",\n      width: \"100%\",\n      padding: sizing.panelPadding,\n    };\n\n    return (\n      <Box\n        ref={ref}\n        data-testid=\"collapsible\"\n        data-open={open}\n        className={className}\n        width=\"100%\"\n        style={rootStyle}\n        {...rest}\n      >\n        {/* Trigger */}\n        <div\n          role=\"button\"\n          tabIndex={0}\n          aria-expanded={open}\n          aria-controls={panelId}\n          aria-label={\n            ariaLabel ?? (typeof title === \"string\" ? title : undefined)\n          }\n          onClick={handleToggle}\n          onKeyDown={handleKeyDown}\n          onKeyUp={handleKeyUp}\n          style={{ boxSizing: \"border-box\", width: \"100%\", cursor: \"pointer\" }}\n        >\n          <div style={cellStyle}>\n            {/* Left icon slot — consumer is responsible for icon/checkbox styling */}\n            {icon && (\n              <div\n                onClick={(e) => e.stopPropagation()}\n                onKeyDown={(e) => e.stopPropagation()}\n                onKeyUp={(e) => e.stopPropagation()}\n                style={{ flexShrink: 0, display: \"flex\", alignItems: \"center\" }}\n              >\n                {icon}\n              </div>\n            )}\n\n            {/* Title + caption */}\n            <div\n              style={{\n                flex: 1,\n                display: \"flex\",\n                flexDirection: \"column\",\n                alignItems: \"flex-start\",\n                gap: sizing.textGap,\n                minWidth: 0,\n              }}\n            >\n              {typeof title === \"string\" || typeof title === \"number\" ? (\n                <Text\n                  color={theme.colors.content.primary}\n                  fontSize={sizing.titleFontSize}\n                  lineHeight={sizing.titleLineHeight}\n                  fontWeight=\"500\"\n                >\n                  {title}\n                </Text>\n              ) : (\n                title\n              )}\n              {caption !== undefined &&\n                (typeof caption === \"string\" || typeof caption === \"number\" ? (\n                  <Text\n                    color={theme.colors.content.tertiary}\n                    fontSize={sizing.captionFontSize}\n                    lineHeight={sizing.captionLineHeight}\n                    fontWeight=\"400\"\n                  >\n                    {caption}\n                  </Text>\n                ) : (\n                  caption\n                ))}\n            </div>\n\n            {/* Trailing slot + animated chevron */}\n            <div\n              style={{\n                display: \"flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                gap: sizing.trailingGap,\n                flexShrink: 0,\n              }}\n            >\n              {trailing && (\n                <div\n                  onClick={(e) => e.stopPropagation()}\n                  onKeyDown={(e) => e.stopPropagation()}\n                  onKeyUp={(e) => e.stopPropagation()}\n                  style={{ display: \"flex\", alignItems: \"center\" }}\n                >\n                  {trailing}\n                </div>\n              )}\n              <div\n                style={{\n                  transform: open ? \"rotate(180deg)\" : \"rotate(0deg)\",\n                  transition: CHEVRON_TRANSITION,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                }}\n              >\n                <Icon\n                  color={theme.colors.content.primary}\n                  size={sizing.chevronSize}\n                >\n                  <ChevronDown />\n                </Icon>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Animated panel using grid-template-rows trick */}\n        <div id={panelId} style={panelGridStyle}>\n          <div style={panelInnerStyle}>\n            <div style={panelContentStyle}>{children}</div>\n          </div>\n        </div>\n      </Box>\n    );\n  }\n);\n\nCollapsible.displayName = \"Collapsible\";\n","import React from \"react\";\nimport {\n  View,\n  Pressable,\n  Image,\n  ViewStyle,\n  ImageStyle,\n  DimensionValue,\n  AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n  children,\n  onPress,\n  onLayout,\n  onMoveShouldSetResponder,\n  onResponderGrant,\n  onResponderMove,\n  onResponderRelease,\n  onResponderTerminate,\n  backgroundColor,\n  borderColor,\n  borderWidth,\n  borderBottomWidth,\n  borderBottomColor,\n  borderTopWidth,\n  borderTopColor,\n  borderLeftWidth,\n  borderLeftColor,\n  borderRightWidth,\n  borderRightColor,\n  borderRadius,\n  borderStyle,\n  height,\n  padding,\n  paddingHorizontal,\n  paddingVertical,\n  margin,\n  marginTop,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  flexDirection,\n  alignItems,\n  justifyContent,\n  position,\n  top,\n  bottom,\n  left,\n  right,\n  width,\n  minWidth,\n  minHeight,\n  maxWidth,\n  maxHeight,\n  flex,\n  overflow,\n  zIndex,\n  hoverStyle,\n  pressStyle,\n  style,\n  \"data-testid\": dataTestId,\n  testID,\n  as,\n  src,\n  alt,\n  ...rest\n}) => {\n  const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n    backgroundColor:\n      pressed && pressStyle?.backgroundColor\n        ? pressStyle.backgroundColor\n        : backgroundColor,\n    borderColor,\n    borderWidth,\n    borderBottomWidth,\n    borderBottomColor,\n    borderTopWidth,\n    borderTopColor,\n    borderLeftWidth,\n    borderLeftColor,\n    borderRightWidth,\n    borderRightColor,\n    borderRadius: borderRadius as AnimatableNumericValue,\n    borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n    overflow,\n    zIndex,\n    height: height as DimensionValue,\n    width: width as DimensionValue,\n    minWidth: minWidth as DimensionValue,\n    minHeight: minHeight as DimensionValue,\n    maxWidth: maxWidth as DimensionValue,\n    maxHeight: maxHeight as DimensionValue,\n    padding: padding as DimensionValue,\n    paddingHorizontal: paddingHorizontal as DimensionValue,\n    paddingVertical: paddingVertical as DimensionValue,\n    margin: margin as DimensionValue,\n    marginTop: marginTop as DimensionValue,\n    marginBottom: marginBottom as DimensionValue,\n    marginLeft: marginLeft as DimensionValue,\n    marginRight: marginRight as DimensionValue,\n    flexDirection,\n    alignItems,\n    justifyContent,\n    position: position as ViewStyle[\"position\"],\n    top: top as DimensionValue,\n    bottom: bottom as DimensionValue,\n    left: left as DimensionValue,\n    right: right as DimensionValue,\n    flex,\n    ...(style as ViewStyle),\n  });\n\n  const finalTestID = dataTestId || testID;\n\n  // Destructure and drop web-only props from rest before passing to RN components\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const {\n    role,\n    tabIndex,\n    onKeyDown,\n    onKeyUp,\n    \"aria-label\": _ariaLabel,\n    \"aria-labelledby\": _ariaLabelledBy,\n    \"aria-current\": _ariaCurrent,\n    \"aria-disabled\": _ariaDisabled,\n    \"aria-live\": _ariaLive,\n    className,\n    \"data-testid\": _dataTestId,\n    ...nativeRest\n  } = rest as Record<string, unknown>;\n\n  // Handle as=\"img\" for React Native\n  if (as === \"img\" && src) {\n    const imageStyle: ImageStyle = {\n      width: width as DimensionValue,\n      height: height as DimensionValue,\n      borderRadius: borderRadius as number,\n      position: position as ImageStyle[\"position\"],\n      top: top as DimensionValue,\n      bottom: bottom as DimensionValue,\n      left: left as DimensionValue,\n      right: right as DimensionValue,\n      ...(style as ImageStyle),\n    };\n\n    return (\n      <Image\n        source={{ uri: src }}\n        style={imageStyle}\n        testID={finalTestID}\n        resizeMode=\"cover\"\n        {...nativeRest}\n      />\n    );\n  }\n\n  if (onPress) {\n    return (\n      <Pressable\n        onPress={onPress}\n        onLayout={onLayout}\n        onMoveShouldSetResponder={onMoveShouldSetResponder}\n        onResponderGrant={onResponderGrant}\n        onResponderMove={onResponderMove}\n        onResponderRelease={onResponderRelease}\n        onResponderTerminate={onResponderTerminate}\n        style={({ pressed }) => getContainerStyle(pressed)}\n        testID={finalTestID}\n        {...nativeRest}\n      >\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <View\n      style={getContainerStyle()}\n      testID={finalTestID}\n      onLayout={onLayout}\n      onMoveShouldSetResponder={onMoveShouldSetResponder}\n      onResponderGrant={onResponderGrant}\n      onResponderMove={onResponderMove}\n      onResponderRelease={onResponderRelease}\n      onResponderTerminate={onResponderTerminate}\n      {...nativeRest}\n    >\n      {children}\n    </View>\n  );\n};\n","import React from \"react\";\nimport {\n  Text as RNText,\n  TextStyle,\n  AccessibilityRole,\n  StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n  alert: \"alert\",\n  heading: \"header\",\n  button: \"button\",\n  link: \"link\",\n  text: \"text\",\n};\n\nconst parseNumericValue = (\n  value: string | number | undefined\n): number | undefined => {\n  if (value === undefined) return undefined;\n  if (typeof value === \"number\") return value;\n  const parsed = parseFloat(value);\n  return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n  children,\n  color,\n  fontSize,\n  fontWeight,\n  fontFamily,\n  textAlign,\n  lineHeight,\n  numberOfLines,\n  id,\n  role,\n  style: styleProp,\n  ...props\n}) => {\n  let resolvedFontFamily = fontFamily\n    ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n    : undefined;\n\n  if (\n    resolvedFontFamily === \"Pilat Wide\" ||\n    resolvedFontFamily === \"Pilat Wide Bold\" ||\n    resolvedFontFamily === \"Aktiv Grotesk\"\n  ) {\n    resolvedFontFamily = undefined;\n  }\n\n  const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n  const baseStyle: TextStyle = {\n    color: color ?? incomingStyle?.color,\n    fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n    fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n    fontFamily: resolvedFontFamily,\n    textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n    textAlign: textAlign ?? incomingStyle?.textAlign,\n    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n    marginTop: parseNumericValue(\n      incomingStyle?.marginTop as number | string | undefined\n    ),\n    marginBottom: parseNumericValue(\n      incomingStyle?.marginBottom as number | string | undefined\n    ),\n  };\n\n  const accessibilityRole = role ? roleMap[role] : undefined;\n\n  return (\n    <RNText\n      style={baseStyle}\n      numberOfLines={numberOfLines}\n      testID={id}\n      accessibilityRole={accessibilityRole}\n    >\n      {children}\n    </RNText>\n  );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n  const style: ViewStyle = {\n    width: typeof size === \"number\" ? size : undefined,\n    height: typeof size === \"number\" ? size : undefined,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  };\n\n  // On native, we try to pass the color down to children (like Text primitives)\n  // to mimic the CSS inheritance behavior of the web version.\n  const childrenWithProps = React.Children.map(children, (child) => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child, {\n        color: child.props.color || color,\n        // Also pass size if child seems to be an icon that needs it\n        size: child.props.size || size,\n      });\n    }\n    return child;\n  });\n\n  return <View style={style}>{childrenWithProps}</View>;\n};\n"],"mappings":"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","names":["jsx","View","jsx","jsx"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@xsolla/xui-b2b-collapsible",
+  "version": "0.147.1",
+  "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",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@xsolla/xui-core": "0.147.1",
+    "@xsolla/xui-icons-base": "0.147.1",
+    "@xsolla/xui-primitives-core": "0.147.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "styled-components": ">=4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.1.2",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^24.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "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,32 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type CollapsibleView = "without-surface" | "white-surface" | "grey-surface";
+interface CollapsibleProps extends ThemeOverrideProps {
+    title: ReactNode;
+    caption?: ReactNode;
+    /** Optional icon shown in a 32×32 slot at the left of the trigger. */
+    icon?: ReactNode;
+    /** Optional content shown to the right of the text, before the chevron. */
+    trailing?: ReactNode;
+    view?: CollapsibleView;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+    className?: string;
+    "aria-label"?: string;
+    /** @deprecated Use `onOpenChange` instead. */
+    onChange?: (isOpen: boolean) => void;
+    /** @deprecated Use `trailing` instead. */
+    statusIcon?: ReactNode;
+    /** @deprecated Use `caption` instead. */
+    description?: string;
+}
+
+declare const Collapsible: react.ForwardRefExoticComponent<CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Collapsible, type CollapsibleProps, type CollapsibleView };

package/web/index.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type CollapsibleView = "without-surface" | "white-surface" | "grey-surface";
+interface CollapsibleProps extends ThemeOverrideProps {
+    title: ReactNode;
+    caption?: ReactNode;
+    /** Optional icon shown in a 32×32 slot at the left of the trigger. */
+    icon?: ReactNode;
+    /** Optional content shown to the right of the text, before the chevron. */
+    trailing?: ReactNode;
+    view?: CollapsibleView;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+    className?: string;
+    "aria-label"?: string;
+    /** @deprecated Use `onOpenChange` instead. */
+    onChange?: (isOpen: boolean) => void;
+    /** @deprecated Use `trailing` instead. */
+    statusIcon?: ReactNode;
+    /** @deprecated Use `caption` instead. */
+    description?: string;
+}
+
+declare const Collapsible: react.ForwardRefExoticComponent<CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Collapsible, type CollapsibleProps, type CollapsibleView };