@xsolla/xui-b2b-itemer-group 0.178.0

package/native/index.mjs

@@ -0,0 +1,329 @@
+// src/ItemerGroup.tsx
+import React, { useMemo } 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
+    }
+  );
+};
+
+// src/ItemerGroup.tsx
+import { useResolvedTheme } from "@xsolla/xui-core";
+import { Button } from "@xsolla/xui-button";
+import { Typography } from "@xsolla/xui-typography";
+import { Plus } from "@xsolla/xui-icons-base";
+
+// src/ItemerGroupContext.tsx
+import { createContext, useContext } from "react";
+var ItemerGroupContext = createContext({
+  draggable: false,
+  rowCount: 0
+});
+var useItemerGroupContext = () => useContext(ItemerGroupContext);
+
+// src/ItemerGroup.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var REMOVE_BUTTON_SIZE = 40;
+var ItemerGroup = ({
+  label,
+  children,
+  draggable = false,
+  onAdd,
+  addButtonLabel = "Add line",
+  showAddButton,
+  className,
+  testID,
+  themeMode,
+  themeProductContext
+}) => {
+  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+  const shouldShowAddButton = showAddButton ?? Boolean(onAdd);
+  const rowCount = React.Children.toArray(children).length;
+  const contextValue = useMemo(
+    () => ({ draggable, rowCount }),
+    [draggable, rowCount]
+  );
+  const showDragSpacer = draggable && rowCount > 1;
+  const renderLabel = () => {
+    if (!label) return null;
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
+      showDragSpacer && /* @__PURE__ */ jsx2(Box, { width: 28, flexShrink: 0 }),
+      Array.isArray(label) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(Box, { flex: 1, flexDirection: "row", alignItems: "flex-start", gap: 4, children: label.map((l, i) => /* @__PURE__ */ jsx2(Box, { flex: 1, children: /* @__PURE__ */ jsx2(
+          Typography,
+          {
+            variant: "bodyXs",
+            color: theme.colors.content.secondary,
+            children: l
+          }
+        ) }, i)) }),
+        /* @__PURE__ */ jsx2(Box, { width: REMOVE_BUTTON_SIZE, flexShrink: 0 })
+      ] }) : /* @__PURE__ */ jsx2(Typography, { variant: "bodyXs", color: theme.colors.content.secondary, children: label })
+    ] });
+  };
+  return /* @__PURE__ */ jsx2(ItemerGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 8, testID, className, children: [
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 4, children: [
+      renderLabel(),
+      children
+    ] }),
+    shouldShowAddButton && /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
+      showDragSpacer && /* @__PURE__ */ jsx2(Box, { width: 28, flexShrink: 0 }),
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          variant: "secondary",
+          tone: "brand",
+          size: "sm",
+          iconRight: /* @__PURE__ */ jsx2(Plus, { size: 16 }),
+          onPress: onAdd,
+          children: addButtonLabel
+        }
+      )
+    ] })
+  ] }) });
+};
+ItemerGroup.displayName = "ItemerGroup";
+
+// src/ItemerGroupRow.tsx
+import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
+import { IconButton } from "@xsolla/xui-button";
+import { Drag, Plus as Plus2, Remove } from "@xsolla/xui-icons-base";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ItemerGroupRow = ({
+  children,
+  onRemove,
+  onAdd,
+  className
+}) => {
+  const { theme } = useResolvedTheme2({});
+  const { draggable, rowCount } = useItemerGroupContext();
+  return /* @__PURE__ */ jsxs2(Box, { flexDirection: "row", alignItems: "center", gap: 8, className, children: [
+    draggable && rowCount > 1 && /* @__PURE__ */ jsx3(
+      Box,
+      {
+        "data-drag-handle": "true",
+        width: 28,
+        height: 28,
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        style: { cursor: "grab" },
+        children: /* @__PURE__ */ jsx3(Drag, { size: 20, color: theme.colors.content.tertiary })
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      Box,
+      {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 4,
+        minWidth: 0,
+        children: [
+          children,
+          onAdd && /* @__PURE__ */ jsx3(
+            IconButton,
+            {
+              "aria-label": "Add row",
+              variant: "secondary",
+              tone: "mono",
+              size: "sm",
+              onPress: onAdd,
+              icon: /* @__PURE__ */ jsx3(Plus2, { size: 20 })
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsx3(
+            IconButton,
+            {
+              "aria-label": "Remove row",
+              variant: "secondary",
+              tone: "mono",
+              size: "sm",
+              onPress: onRemove,
+              icon: /* @__PURE__ */ jsx3(Remove, { size: 20 })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+ItemerGroupRow.displayName = "ItemerGroupRow";
+export {
+  ItemerGroup,
+  ItemerGroupContext,
+  ItemerGroupRow
+};
+//# sourceMappingURL=index.mjs.map

package/native/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ItemerGroup.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../src/ItemerGroupContext.tsx","../../src/ItemerGroupRow.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport { Button } from \"@xsolla/xui-button\";\nimport { Typography } from \"@xsolla/xui-typography\";\nimport { Plus } from \"@xsolla/xui-icons-base\";\nimport { ItemerGroupContext } from \"./ItemerGroupContext\";\nimport type { ItemerGroupProps } from \"./types\";\n\n// Size of the IconButton size=\"sm\" — used to reserve matching space in the label row\nconst REMOVE_BUTTON_SIZE = 40;\n\nexport const ItemerGroup: React.FC<ItemerGroupProps> = ({\n  label,\n  children,\n  draggable = false,\n  onAdd,\n  addButtonLabel = \"Add line\",\n  showAddButton,\n  className,\n  testID,\n  themeMode,\n  themeProductContext,\n}) => {\n  const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n  const shouldShowAddButton = showAddButton ?? Boolean(onAdd);\n  const rowCount = React.Children.toArray(children).length;\n  const contextValue = useMemo(\n    () => ({ draggable, rowCount }),\n    [draggable, rowCount]\n  );\n\n  const showDragSpacer = draggable && rowCount > 1;\n\n  const renderLabel = () => {\n    if (!label) return null;\n\n    return (\n      <Box flexDirection=\"row\" alignItems=\"center\" gap={8}>\n        {showDragSpacer && <Box width={28} flexShrink={0} />}\n        {Array.isArray(label) ? (\n          <>\n            <Box flex={1} flexDirection=\"row\" alignItems=\"flex-start\" gap={4}>\n              {label.map((l, i) => (\n                <Box flex={1} key={i}>\n                  <Typography\n                    variant=\"bodyXs\"\n                    color={theme.colors.content.secondary}\n                  >\n                    {l}\n                  </Typography>\n                </Box>\n              ))}\n            </Box>\n            <Box width={REMOVE_BUTTON_SIZE} flexShrink={0} />\n          </>\n        ) : (\n          <Typography variant=\"bodyXs\" color={theme.colors.content.secondary}>\n            {label}\n          </Typography>\n        )}\n      </Box>\n    );\n  };\n\n  return (\n    <ItemerGroupContext.Provider value={contextValue}>\n      <Box flexDirection=\"column\" gap={8} testID={testID} className={className}>\n        <Box flexDirection=\"column\" gap={4}>\n          {renderLabel()}\n          {children}\n        </Box>\n        {shouldShowAddButton && (\n          <Box flexDirection=\"row\" alignItems=\"center\" gap={8}>\n            {showDragSpacer && <Box width={28} flexShrink={0} />}\n            <Button\n              variant=\"secondary\"\n              tone=\"brand\"\n              size=\"sm\"\n              iconRight={<Plus size={16} />}\n              onPress={onAdd}\n            >\n              {addButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\n    </ItemerGroupContext.Provider>\n  );\n};\n\nItemerGroup.displayName = \"ItemerGroup\";\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 { createContext, useContext } from \"react\";\n\ninterface ItemerGroupContextValue {\n  draggable: boolean;\n  rowCount: number;\n}\n\nexport const ItemerGroupContext = createContext<ItemerGroupContextValue>({\n  draggable: false,\n  rowCount: 0,\n});\n\nexport const useItemerGroupContext = () => useContext(ItemerGroupContext);\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport { IconButton } from \"@xsolla/xui-button\";\nimport { Drag, Plus, Remove } from \"@xsolla/xui-icons-base\";\nimport { useItemerGroupContext } from \"./ItemerGroupContext\";\nimport type { ItemerGroupRowProps } from \"./types\";\n\nexport const ItemerGroupRow: React.FC<ItemerGroupRowProps> = ({\n  children,\n  onRemove,\n  onAdd,\n  className,\n}) => {\n  const { theme } = useResolvedTheme({});\n  const { draggable, rowCount } = useItemerGroupContext();\n\n  return (\n    <Box flexDirection=\"row\" alignItems=\"center\" gap={8} className={className}>\n      {draggable && rowCount > 1 && (\n        <Box\n          data-drag-handle=\"true\"\n          width={28}\n          height={28}\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          flexShrink={0}\n          style={{ cursor: \"grab\" }}\n        >\n          <Drag size={20} color={theme.colors.content.tertiary} />\n        </Box>\n      )}\n      <Box\n        flex={1}\n        flexDirection=\"row\"\n        alignItems=\"flex-start\"\n        gap={4}\n        minWidth={0}\n      >\n        {children}\n        {onAdd && (\n          <IconButton\n            aria-label=\"Add row\"\n            variant=\"secondary\"\n            tone=\"mono\"\n            size=\"sm\"\n            onPress={onAdd}\n            icon={<Plus size={20} />}\n          />\n        )}\n        {onRemove && (\n          <IconButton\n            aria-label=\"Remove row\"\n            variant=\"secondary\"\n            tone=\"mono\"\n            size=\"sm\"\n            onPress={onRemove}\n            icon={<Remove size={20} />}\n          />\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nItemerGroupRow.displayName = \"ItemerGroupRow\";\n"],"mappings":"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","names":["jsx","useResolvedTheme","Plus","jsx","jsxs","useResolvedTheme","Plus"]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@xsolla/xui-b2b-itemer-group",
+  "version": "0.178.0",
+  "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-button": "0.178.0",
+    "@xsolla/xui-core": "0.178.0",
+    "@xsolla/xui-icons-base": "0.178.0",
+    "@xsolla/xui-primitives-core": "0.178.0",
+    "@xsolla/xui-typography": "0.178.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16",
+    "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 React__default, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+interface ItemerGroupProps extends ThemeOverrideProps {
+    label?: string | string[];
+    children?: ReactNode;
+    draggable?: boolean;
+    onAdd?: () => void;
+    addButtonLabel?: string;
+    showAddButton?: boolean;
+    className?: string;
+    testID?: string;
+}
+interface ItemerGroupRowProps {
+    children: ReactNode;
+    onRemove?: () => void;
+    onAdd?: () => void;
+    className?: string;
+}
+
+declare const ItemerGroup: React__default.FC<ItemerGroupProps>;
+
+declare const ItemerGroupRow: React__default.FC<ItemerGroupRowProps>;
+
+interface ItemerGroupContextValue {
+    draggable: boolean;
+    rowCount: number;
+}
+declare const ItemerGroupContext: React.Context<ItemerGroupContextValue>;
+
+export { ItemerGroup, ItemerGroupContext, type ItemerGroupProps, ItemerGroupRow, type ItemerGroupRowProps };

package/web/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+interface ItemerGroupProps extends ThemeOverrideProps {
+    label?: string | string[];
+    children?: ReactNode;
+    draggable?: boolean;
+    onAdd?: () => void;
+    addButtonLabel?: string;
+    showAddButton?: boolean;
+    className?: string;
+    testID?: string;
+}
+interface ItemerGroupRowProps {
+    children: ReactNode;
+    onRemove?: () => void;
+    onAdd?: () => void;
+    className?: string;
+}
+
+declare const ItemerGroup: React__default.FC<ItemerGroupProps>;
+
+declare const ItemerGroupRow: React__default.FC<ItemerGroupRowProps>;
+
+interface ItemerGroupContextValue {
+    draggable: boolean;
+    rowCount: number;
+}
+declare const ItemerGroupContext: React.Context<ItemerGroupContextValue>;
+
+export { ItemerGroup, ItemerGroupContext, type ItemerGroupProps, ItemerGroupRow, type ItemerGroupRowProps };