@xsolla/xui-tag 0.128.0 → 0.129.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/native/index.d.mts +16 -6
  2. package/native/index.d.ts +16 -6
  3. package/native/index.js +45 -87
  4. package/native/index.js.map +1 -1
  5. package/native/index.mjs +46 -88
  6. package/native/index.mjs.map +1 -1
  7. package/package.json +4 -4
  8. package/web/index.d.mts +16 -6
  9. package/web/index.d.ts +16 -6
  10. package/web/index.js +38 -86
  11. package/web/index.js.map +1 -1
  12. package/web/index.mjs +39 -87
  13. package/web/index.mjs.map +1 -1
package/native/index.d.mts CHANGED
@@ -1,16 +1,26 @@
1
- import React from 'react';
1
+ import React, { ReactNode } from 'react';
2
+ import { ThemeOverrideProps } from '@xsolla/xui-core';
2
3
 
3
- interface TagProps {
4
+ interface TagProps extends ThemeOverrideProps {
5
+ /** Size of the tag */
4
6
  size?: "xl" | "lg" | "md" | "sm" | "xs";
7
+ /** Colour tone of the tag */
5
8
  tone?: "primary" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral";
9
+ /** Visual style: solid (filled background) or outlined (border only) */
6
10
  type?: "solid" | "outlined";
11
+ /** Interaction variant: default (display only) or selectable (interactive toggle) */
7
12
  variant?: "default" | "selectable";
13
+ /** Whether the tag is selected. Only applies to the selectable variant. */
8
14
  selected?: boolean;
15
+ /** Click handler for selectable tags */
9
16
  onPress?: () => void;
10
- children?: React.ReactNode;
11
- icon?: React.ReactNode;
12
- iconLeft?: React.ReactNode;
13
- iconRight?: React.ReactNode;
17
+ /** Label text. When omitted with an icon, the tag collapses to a square. */
18
+ children?: ReactNode;
19
+ /** Icon displayed on the left side of the label */
20
+ iconLeft?: ReactNode;
21
+ /** Icon displayed on the right side of the label */
22
+ iconRight?: ReactNode;
23
+ /** Callback when the remove (X) icon is clicked */
14
24
  onRemove?: () => void;
15
25
  }
16
26
  declare const Tag: React.FC<TagProps>;
package/native/index.d.ts CHANGED
@@ -1,16 +1,26 @@
1
- import React from 'react';
1
+ import React, { ReactNode } from 'react';
2
+ import { ThemeOverrideProps } from '@xsolla/xui-core';
2
3
 
3
- interface TagProps {
4
+ interface TagProps extends ThemeOverrideProps {
5
+ /** Size of the tag */
4
6
  size?: "xl" | "lg" | "md" | "sm" | "xs";
7
+ /** Colour tone of the tag */
5
8
  tone?: "primary" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral";
9
+ /** Visual style: solid (filled background) or outlined (border only) */
6
10
  type?: "solid" | "outlined";
11
+ /** Interaction variant: default (display only) or selectable (interactive toggle) */
7
12
  variant?: "default" | "selectable";
13
+ /** Whether the tag is selected. Only applies to the selectable variant. */
8
14
  selected?: boolean;
15
+ /** Click handler for selectable tags */
9
16
  onPress?: () => void;
10
- children?: React.ReactNode;
11
- icon?: React.ReactNode;
12
- iconLeft?: React.ReactNode;
13
- iconRight?: React.ReactNode;
17
+ /** Label text. When omitted with an icon, the tag collapses to a square. */
18
+ children?: ReactNode;
19
+ /** Icon displayed on the left side of the label */
20
+ iconLeft?: ReactNode;
21
+ /** Icon displayed on the right side of the label */
22
+ iconRight?: ReactNode;
23
+ /** Callback when the remove (X) icon is clicked */
14
24
  onRemove?: () => void;
15
25
  }
16
26
  declare const Tag: React.FC<TagProps>;
package/native/index.js CHANGED
@@ -77,6 +77,10 @@ var Box = ({
77
77
  left,
78
78
  right,
79
79
  width,
80
+ minWidth,
81
+ minHeight,
82
+ maxWidth,
83
+ maxHeight,
80
84
  flex,
81
85
  overflow,
82
86
  zIndex,
@@ -108,6 +112,10 @@ var Box = ({
108
112
  zIndex,
109
113
  height,
110
114
  width,
115
+ minWidth,
116
+ minHeight,
117
+ maxWidth,
118
+ maxHeight,
111
119
  padding,
112
120
  paddingHorizontal,
113
121
  paddingVertical,
@@ -236,7 +244,7 @@ var Text = ({
236
244
  }
237
245
  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
238
246
  const baseStyle = {
239
- color,
247
+ color: color ?? incomingStyle?.color,
240
248
  fontSize: typeof fontSize === "number" ? fontSize : void 0,
241
249
  fontWeight,
242
250
  fontFamily: resolvedFontFamily,
@@ -300,12 +308,13 @@ var Tag = ({
300
308
  selected = false,
301
309
  onPress,
302
310
  children,
303
- icon,
304
311
  iconLeft,
305
312
  iconRight,
306
- onRemove
313
+ onRemove,
314
+ themeMode,
315
+ themeProductContext
307
316
  }) => {
308
- const { theme } = (0, import_xui_core.useDesignSystem)();
317
+ const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
309
318
  const sizeStyles = theme.sizing.tag(size);
310
319
  const resolveColors = () => {
311
320
  if (variant === "selectable") {
@@ -322,115 +331,62 @@ var Tag = ({
322
331
  border: theme.colors.border.secondary
323
332
  };
324
333
  }
325
- if (type === "outlined") {
326
- switch (tone) {
327
- case "primary":
328
- return {
329
- bg: theme.colors.background.primary,
330
- text: theme.colors.content.primary,
331
- border: theme.colors.border.secondary
332
- };
333
- case "brand":
334
- return {
335
- bg: theme.colors.background.brand.secondary,
336
- text: theme.colors.content.brand.primary,
337
- border: theme.colors.border.brand
338
- };
339
- case "brandExtra":
340
- return {
341
- bg: theme.colors.background.brandExtra.secondary,
342
- text: theme.colors.content.brandExtra.primary,
343
- border: theme.colors.border.brandExtra
344
- };
345
- case "success":
346
- return {
347
- bg: theme.colors.background.success.secondary,
348
- text: theme.colors.content.success.primary,
349
- border: theme.colors.border.success
350
- };
351
- case "warning":
352
- return {
353
- bg: theme.colors.background.warning.secondary,
354
- text: theme.colors.content.warning.primary,
355
- border: theme.colors.border.warning
356
- };
357
- case "alert":
358
- return {
359
- bg: theme.colors.background.alert.secondary,
360
- text: theme.colors.content.alert.primary,
361
- border: theme.colors.border.alert
362
- };
363
- case "neutral":
364
- return {
365
- bg: theme.colors.background.neutral.secondary,
366
- text: theme.colors.content.neutral.primary,
367
- border: theme.colors.border.neutral
368
- };
369
- default:
370
- return {
371
- bg: theme.colors.background.primary,
372
- text: theme.colors.content.primary,
373
- border: theme.colors.border.secondary
374
- };
375
- }
376
- }
334
+ const isOutlined = type === "outlined";
377
335
  switch (tone) {
378
336
  case "primary":
379
337
  return {
380
- bg: theme.colors.background.primary,
338
+ bg: isOutlined ? "transparent" : theme.colors.background.primary,
381
339
  text: theme.colors.content.primary,
382
- border: void 0
340
+ border: theme.colors.border.secondary
383
341
  };
384
342
  case "brand":
385
343
  return {
386
- bg: theme.colors.background.brand.primary,
387
- text: theme.colors.content.on.brand,
388
- border: void 0
344
+ bg: isOutlined ? "transparent" : theme.colors.background.brand.primary,
345
+ text: isOutlined ? theme.colors.content.brand.primary : theme.colors.content.on.brand,
346
+ border: theme.colors.border.brand
389
347
  };
390
348
  case "brandExtra":
391
349
  return {
392
- bg: theme.colors.background.brandExtra.primary,
393
- text: theme.colors.content.on.brandExtra,
394
- border: void 0
350
+ bg: isOutlined ? "transparent" : theme.colors.background.brandExtra.primary,
351
+ text: isOutlined ? theme.colors.content.brandExtra.primary : theme.colors.content.on.brandExtra,
352
+ border: theme.colors.border.brandExtra
395
353
  };
396
354
  case "success":
397
355
  return {
398
- bg: theme.colors.background.success.primary,
399
- text: theme.colors.content.on.success,
400
- border: void 0
356
+ bg: isOutlined ? "transparent" : theme.colors.background.success.primary,
357
+ text: isOutlined ? theme.colors.content.success.primary : theme.colors.content.on.success,
358
+ border: theme.colors.border.success
401
359
  };
402
360
  case "warning":
403
361
  return {
404
- bg: theme.colors.background.warning.primary,
405
- text: theme.colors.content.on.warning,
406
- border: void 0
362
+ bg: isOutlined ? "transparent" : theme.colors.background.warning.primary,
363
+ text: isOutlined ? theme.colors.content.warning.primary : theme.colors.content.on.warning,
364
+ border: theme.colors.border.warning
407
365
  };
408
366
  case "alert":
409
367
  return {
410
- bg: theme.colors.background.alert.primary,
411
- text: theme.colors.content.on.alert,
412
- border: void 0
368
+ bg: isOutlined ? "transparent" : theme.colors.background.alert.primary,
369
+ text: isOutlined ? theme.colors.content.alert.primary : theme.colors.content.on.alert,
370
+ border: theme.colors.border.alert
413
371
  };
414
372
  case "neutral":
415
373
  return {
416
- bg: theme.colors.background.neutral.primary,
417
- text: theme.colors.content.on.neutral,
418
- border: void 0
374
+ bg: isOutlined ? "transparent" : theme.colors.background.neutral.primary,
375
+ text: isOutlined ? theme.colors.content.neutral.primary : theme.colors.content.on.neutral,
376
+ border: theme.colors.border.neutral
419
377
  };
420
378
  default:
421
379
  return {
422
- bg: theme.colors.background.primary,
380
+ bg: isOutlined ? "transparent" : theme.colors.background.primary,
423
381
  text: theme.colors.content.primary,
424
- border: void 0
382
+ border: theme.colors.border.secondary
425
383
  };
426
384
  }
427
385
  };
428
386
  const { bg, text, border } = resolveColors();
429
387
  const isSelectable = variant === "selectable";
430
- const isOutlined = type === "outlined";
431
- const hasBorder = isSelectable || isOutlined;
432
388
  const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
433
- const resolvedIconLeft = icon || iconLeft;
389
+ const isIconOnly = !children && (!!iconLeft || !!iconRight);
434
390
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
435
391
  Box,
436
392
  {
@@ -439,15 +395,16 @@ var Tag = ({
439
395
  backgroundColor: bg,
440
396
  borderRadius,
441
397
  height: sizeStyles.height,
442
- paddingHorizontal: sizeStyles.padding,
398
+ width: isIconOnly ? sizeStyles.height : void 0,
399
+ paddingHorizontal: isIconOnly ? 0 : sizeStyles.padding,
443
400
  flexDirection: "row",
444
401
  alignItems: "center",
445
402
  justifyContent: "center",
446
403
  gap: sizeStyles.gap,
447
- borderWidth: hasBorder ? 1 : 0,
404
+ borderWidth: sizeStyles.borderWidth,
448
405
  borderColor: border,
449
- borderStyle: hasBorder ? "solid" : void 0,
450
- cursor: isSelectable ? "pointer" : void 0,
406
+ borderStyle: "solid",
407
+ cursor: isSelectable ? "pointer" : "default",
451
408
  hoverStyle: isSelectable && !selected ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover } : void 0,
452
409
  style: {
453
410
  overflow: "hidden",
@@ -455,7 +412,7 @@ var Tag = ({
455
412
  whiteSpace: "nowrap"
456
413
  },
457
414
  children: [
458
- resolvedIconLeft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: text, children: resolvedIconLeft }),
415
+ iconLeft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
459
416
  children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
460
417
  Text,
461
418
  {
@@ -470,7 +427,8 @@ var Tag = ({
470
427
  children
471
428
  }
472
429
  ),
473
- onRemove ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.X, { size: sizeStyles.iconSize, color: text }) }) : iconRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: text, children: iconRight })
430
+ iconRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: text, children: iconRight }),
431
+ onRemove && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.X, { size: sizeStyles.iconSize, color: text }) })
474
432
  ]
475
433
  }
476
434
  );
package/native/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/Tag.tsx"],"sourcesContent":["export * from \"./Tag\";\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 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 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,\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","import React 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 { X } from \"@xsolla/xui-icons\";\n\nexport interface TagProps {\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n tone?:\n | \"primary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n type?: \"solid\" | \"outlined\";\n variant?: \"default\" | \"selectable\";\n selected?: boolean;\n onPress?: () => void;\n children?: React.ReactNode;\n icon?: React.ReactNode;\n iconLeft?: React.ReactNode;\n iconRight?: React.ReactNode;\n onRemove?: () => void;\n}\n\nconst SELECTABLE_BORDER_RADIUS = 8;\n\nexport const Tag: React.FC<TagProps> = ({\n size = \"md\",\n tone = \"primary\",\n type = \"solid\",\n variant = \"default\",\n selected = false,\n onPress,\n children,\n icon,\n iconLeft,\n iconRight,\n onRemove,\n}) => {\n const { theme } = useDesignSystem();\n const sizeStyles = theme.sizing.tag(size);\n\n const resolveColors = () => {\n if (variant === \"selectable\") {\n if (selected) {\n return {\n bg: theme.colors.control.brand.secondary.bg,\n text: theme.colors.content.brand.primary,\n border: theme.colors.border.secondary,\n };\n }\n return {\n bg: theme.colors.overlay.mono,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n }\n\n if (type === \"outlined\") {\n switch (tone) {\n case \"primary\":\n return {\n bg: theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n case \"brand\":\n return {\n bg: theme.colors.background.brand.secondary,\n text: theme.colors.content.brand.primary,\n border: theme.colors.border.brand,\n };\n case \"brandExtra\":\n return {\n bg: theme.colors.background.brandExtra.secondary,\n text: theme.colors.content.brandExtra.primary,\n border: theme.colors.border.brandExtra,\n };\n case \"success\":\n return {\n bg: theme.colors.background.success.secondary,\n text: theme.colors.content.success.primary,\n border: theme.colors.border.success,\n };\n case \"warning\":\n return {\n bg: theme.colors.background.warning.secondary,\n text: theme.colors.content.warning.primary,\n border: theme.colors.border.warning,\n };\n case \"alert\":\n return {\n bg: theme.colors.background.alert.secondary,\n text: theme.colors.content.alert.primary,\n border: theme.colors.border.alert,\n };\n case \"neutral\":\n return {\n bg: theme.colors.background.neutral.secondary,\n text: theme.colors.content.neutral.primary,\n border: theme.colors.border.neutral,\n };\n default:\n return {\n bg: theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n }\n }\n\n switch (tone) {\n case \"primary\":\n return {\n bg: theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: undefined,\n };\n case \"brand\":\n return {\n bg: theme.colors.background.brand.primary,\n text: theme.colors.content.on.brand,\n border: undefined,\n };\n case \"brandExtra\":\n return {\n bg: theme.colors.background.brandExtra.primary,\n text: theme.colors.content.on.brandExtra,\n border: undefined,\n };\n case \"success\":\n return {\n bg: theme.colors.background.success.primary,\n text: theme.colors.content.on.success,\n border: undefined,\n };\n case \"warning\":\n return {\n bg: theme.colors.background.warning.primary,\n text: theme.colors.content.on.warning,\n border: undefined,\n };\n case \"alert\":\n return {\n bg: theme.colors.background.alert.primary,\n text: theme.colors.content.on.alert,\n border: undefined,\n };\n case \"neutral\":\n return {\n bg: theme.colors.background.neutral.primary,\n text: theme.colors.content.on.neutral,\n border: undefined,\n };\n default:\n return {\n bg: theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: undefined,\n };\n }\n };\n\n const { bg, text, border } = resolveColors();\n const isSelectable = variant === \"selectable\";\n const isOutlined = type === \"outlined\";\n const hasBorder = isSelectable || isOutlined;\n const borderRadius = isSelectable\n ? SELECTABLE_BORDER_RADIUS\n : sizeStyles.radius;\n const resolvedIconLeft = icon || iconLeft;\n\n return (\n <Box\n as={isSelectable ? \"button\" : undefined}\n onPress={isSelectable ? onPress : undefined}\n backgroundColor={bg}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n paddingHorizontal={sizeStyles.padding}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gap={sizeStyles.gap}\n borderWidth={hasBorder ? 1 : 0}\n borderColor={border}\n borderStyle={hasBorder ? \"solid\" : undefined}\n cursor={isSelectable ? \"pointer\" : undefined}\n hoverStyle={\n isSelectable && !selected\n ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover }\n : undefined\n }\n style={{\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {resolvedIconLeft && (\n <Icon size={sizeStyles.iconSize} color={text}>\n {resolvedIconLeft}\n </Icon>\n )}\n\n {children && (\n <Text\n color={text}\n fontSize={sizeStyles.fontSize}\n fontWeight=\"500\"\n whiteSpace=\"nowrap\"\n style={{\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {children}\n </Text>\n )}\n\n {onRemove ? (\n <Box onPress={onRemove}>\n <X size={sizeStyles.iconSize} color={text} />\n </Box>\n ) : (\n iconRight && (\n <Icon size={sizeStyles.iconSize} color={text}>\n {iconRight}\n </Icon>\n )\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/Tag.tsx"],"sourcesContent":["export * from \"./Tag\";\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","import React, { type ReactNode } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport { X } from \"@xsolla/xui-icons\";\n\nexport interface TagProps extends ThemeOverrideProps {\n /** Size of the tag */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /** Colour tone of the tag */\n tone?:\n | \"primary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n /** Visual style: solid (filled background) or outlined (border only) */\n type?: \"solid\" | \"outlined\";\n /** Interaction variant: default (display only) or selectable (interactive toggle) */\n variant?: \"default\" | \"selectable\";\n /** Whether the tag is selected. Only applies to the selectable variant. */\n selected?: boolean;\n /** Click handler for selectable tags */\n onPress?: () => void;\n /** Label text. When omitted with an icon, the tag collapses to a square. */\n children?: ReactNode;\n /** Icon displayed on the left side of the label */\n iconLeft?: ReactNode;\n /** Icon displayed on the right side of the label */\n iconRight?: ReactNode;\n /** Callback when the remove (X) icon is clicked */\n onRemove?: () => void;\n}\n\nconst SELECTABLE_BORDER_RADIUS = 8;\n\nexport const Tag: React.FC<TagProps> = ({\n size = \"md\",\n tone = \"primary\",\n type = \"solid\",\n variant = \"default\",\n selected = false,\n onPress,\n children,\n iconLeft,\n iconRight,\n onRemove,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizeStyles = theme.sizing.tag(size);\n\n const resolveColors = () => {\n if (variant === \"selectable\") {\n if (selected) {\n return {\n bg: theme.colors.control.brand.secondary.bg,\n text: theme.colors.content.brand.primary,\n border: theme.colors.border.secondary,\n };\n }\n return {\n bg: theme.colors.overlay.mono,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n }\n\n const isOutlined = type === \"outlined\";\n\n switch (tone) {\n case \"primary\":\n return {\n bg: isOutlined ? \"transparent\" : theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n case \"brand\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.brand.primary,\n text: isOutlined\n ? theme.colors.content.brand.primary\n : theme.colors.content.on.brand,\n border: theme.colors.border.brand,\n };\n case \"brandExtra\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.brandExtra.primary,\n text: isOutlined\n ? theme.colors.content.brandExtra.primary\n : theme.colors.content.on.brandExtra,\n border: theme.colors.border.brandExtra,\n };\n case \"success\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.success.primary,\n text: isOutlined\n ? theme.colors.content.success.primary\n : theme.colors.content.on.success,\n border: theme.colors.border.success,\n };\n case \"warning\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.warning.primary,\n text: isOutlined\n ? theme.colors.content.warning.primary\n : theme.colors.content.on.warning,\n border: theme.colors.border.warning,\n };\n case \"alert\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.alert.primary,\n text: isOutlined\n ? theme.colors.content.alert.primary\n : theme.colors.content.on.alert,\n border: theme.colors.border.alert,\n };\n case \"neutral\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.neutral.primary,\n text: isOutlined\n ? theme.colors.content.neutral.primary\n : theme.colors.content.on.neutral,\n border: theme.colors.border.neutral,\n };\n default:\n return {\n bg: isOutlined ? \"transparent\" : theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n }\n };\n\n const { bg, text, border } = resolveColors();\n const isSelectable = variant === \"selectable\";\n const borderRadius = isSelectable\n ? SELECTABLE_BORDER_RADIUS\n : sizeStyles.radius;\n const isIconOnly = !children && (!!iconLeft || !!iconRight);\n\n return (\n <Box\n as={isSelectable ? \"button\" : undefined}\n onPress={isSelectable ? onPress : undefined}\n backgroundColor={bg}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n width={isIconOnly ? sizeStyles.height : undefined}\n paddingHorizontal={isIconOnly ? 0 : sizeStyles.padding}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gap={sizeStyles.gap}\n borderWidth={sizeStyles.borderWidth}\n borderColor={border}\n borderStyle=\"solid\"\n cursor={isSelectable ? \"pointer\" : \"default\"}\n hoverStyle={\n isSelectable && !selected\n ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover }\n : undefined\n }\n style={{\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {iconLeft && (\n <Icon size={sizeStyles.iconSize} color={text}>\n {iconLeft}\n </Icon>\n )}\n\n {children && (\n <Text\n color={text}\n fontSize={sizeStyles.fontSize}\n fontWeight=\"500\"\n whiteSpace=\"nowrap\"\n style={{\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {children}\n </Text>\n )}\n\n {iconRight && (\n <Icon size={sizeStyles.iconSize} color={text}>\n {iconRight}\n </Icon>\n )}\n\n {onRemove && (\n <Box onPress={onRemove}>\n <X size={sizeStyles.iconSize} color={text} />\n </Box>\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime"]}
package/native/index.mjs CHANGED
@@ -45,6 +45,10 @@ var Box = ({
45
45
  left,
46
46
  right,
47
47
  width,
48
+ minWidth,
49
+ minHeight,
50
+ maxWidth,
51
+ maxHeight,
48
52
  flex,
49
53
  overflow,
50
54
  zIndex,
@@ -76,6 +80,10 @@ var Box = ({
76
80
  zIndex,
77
81
  height,
78
82
  width,
83
+ minWidth,
84
+ minHeight,
85
+ maxWidth,
86
+ maxHeight,
79
87
  padding,
80
88
  paddingHorizontal,
81
89
  paddingVertical,
@@ -207,7 +215,7 @@ var Text = ({
207
215
  }
208
216
  const incomingStyle = StyleSheet.flatten(styleProp);
209
217
  const baseStyle = {
210
- color,
218
+ color: color ?? incomingStyle?.color,
211
219
  fontSize: typeof fontSize === "number" ? fontSize : void 0,
212
220
  fontWeight,
213
221
  fontFamily: resolvedFontFamily,
@@ -259,7 +267,7 @@ var Icon = ({ children, color, size }) => {
259
267
  };
260
268
 
261
269
  // src/Tag.tsx
262
- import { useDesignSystem } from "@xsolla/xui-core";
270
+ import { useResolvedTheme } from "@xsolla/xui-core";
263
271
  import { X } from "@xsolla/xui-icons";
264
272
  import { jsx as jsx4, jsxs } from "react/jsx-runtime";
265
273
  var SELECTABLE_BORDER_RADIUS = 8;
@@ -271,12 +279,13 @@ var Tag = ({
271
279
  selected = false,
272
280
  onPress,
273
281
  children,
274
- icon,
275
282
  iconLeft,
276
283
  iconRight,
277
- onRemove
284
+ onRemove,
285
+ themeMode,
286
+ themeProductContext
278
287
  }) => {
279
- const { theme } = useDesignSystem();
288
+ const { theme } = useResolvedTheme({ themeMode, themeProductContext });
280
289
  const sizeStyles = theme.sizing.tag(size);
281
290
  const resolveColors = () => {
282
291
  if (variant === "selectable") {
@@ -293,115 +302,62 @@ var Tag = ({
293
302
  border: theme.colors.border.secondary
294
303
  };
295
304
  }
296
- if (type === "outlined") {
297
- switch (tone) {
298
- case "primary":
299
- return {
300
- bg: theme.colors.background.primary,
301
- text: theme.colors.content.primary,
302
- border: theme.colors.border.secondary
303
- };
304
- case "brand":
305
- return {
306
- bg: theme.colors.background.brand.secondary,
307
- text: theme.colors.content.brand.primary,
308
- border: theme.colors.border.brand
309
- };
310
- case "brandExtra":
311
- return {
312
- bg: theme.colors.background.brandExtra.secondary,
313
- text: theme.colors.content.brandExtra.primary,
314
- border: theme.colors.border.brandExtra
315
- };
316
- case "success":
317
- return {
318
- bg: theme.colors.background.success.secondary,
319
- text: theme.colors.content.success.primary,
320
- border: theme.colors.border.success
321
- };
322
- case "warning":
323
- return {
324
- bg: theme.colors.background.warning.secondary,
325
- text: theme.colors.content.warning.primary,
326
- border: theme.colors.border.warning
327
- };
328
- case "alert":
329
- return {
330
- bg: theme.colors.background.alert.secondary,
331
- text: theme.colors.content.alert.primary,
332
- border: theme.colors.border.alert
333
- };
334
- case "neutral":
335
- return {
336
- bg: theme.colors.background.neutral.secondary,
337
- text: theme.colors.content.neutral.primary,
338
- border: theme.colors.border.neutral
339
- };
340
- default:
341
- return {
342
- bg: theme.colors.background.primary,
343
- text: theme.colors.content.primary,
344
- border: theme.colors.border.secondary
345
- };
346
- }
347
- }
305
+ const isOutlined = type === "outlined";
348
306
  switch (tone) {
349
307
  case "primary":
350
308
  return {
351
- bg: theme.colors.background.primary,
309
+ bg: isOutlined ? "transparent" : theme.colors.background.primary,
352
310
  text: theme.colors.content.primary,
353
- border: void 0
311
+ border: theme.colors.border.secondary
354
312
  };
355
313
  case "brand":
356
314
  return {
357
- bg: theme.colors.background.brand.primary,
358
- text: theme.colors.content.on.brand,
359
- border: void 0
315
+ bg: isOutlined ? "transparent" : theme.colors.background.brand.primary,
316
+ text: isOutlined ? theme.colors.content.brand.primary : theme.colors.content.on.brand,
317
+ border: theme.colors.border.brand
360
318
  };
361
319
  case "brandExtra":
362
320
  return {
363
- bg: theme.colors.background.brandExtra.primary,
364
- text: theme.colors.content.on.brandExtra,
365
- border: void 0
321
+ bg: isOutlined ? "transparent" : theme.colors.background.brandExtra.primary,
322
+ text: isOutlined ? theme.colors.content.brandExtra.primary : theme.colors.content.on.brandExtra,
323
+ border: theme.colors.border.brandExtra
366
324
  };
367
325
  case "success":
368
326
  return {
369
- bg: theme.colors.background.success.primary,
370
- text: theme.colors.content.on.success,
371
- border: void 0
327
+ bg: isOutlined ? "transparent" : theme.colors.background.success.primary,
328
+ text: isOutlined ? theme.colors.content.success.primary : theme.colors.content.on.success,
329
+ border: theme.colors.border.success
372
330
  };
373
331
  case "warning":
374
332
  return {
375
- bg: theme.colors.background.warning.primary,
376
- text: theme.colors.content.on.warning,
377
- border: void 0
333
+ bg: isOutlined ? "transparent" : theme.colors.background.warning.primary,
334
+ text: isOutlined ? theme.colors.content.warning.primary : theme.colors.content.on.warning,
335
+ border: theme.colors.border.warning
378
336
  };
379
337
  case "alert":
380
338
  return {
381
- bg: theme.colors.background.alert.primary,
382
- text: theme.colors.content.on.alert,
383
- border: void 0
339
+ bg: isOutlined ? "transparent" : theme.colors.background.alert.primary,
340
+ text: isOutlined ? theme.colors.content.alert.primary : theme.colors.content.on.alert,
341
+ border: theme.colors.border.alert
384
342
  };
385
343
  case "neutral":
386
344
  return {
387
- bg: theme.colors.background.neutral.primary,
388
- text: theme.colors.content.on.neutral,
389
- border: void 0
345
+ bg: isOutlined ? "transparent" : theme.colors.background.neutral.primary,
346
+ text: isOutlined ? theme.colors.content.neutral.primary : theme.colors.content.on.neutral,
347
+ border: theme.colors.border.neutral
390
348
  };
391
349
  default:
392
350
  return {
393
- bg: theme.colors.background.primary,
351
+ bg: isOutlined ? "transparent" : theme.colors.background.primary,
394
352
  text: theme.colors.content.primary,
395
- border: void 0
353
+ border: theme.colors.border.secondary
396
354
  };
397
355
  }
398
356
  };
399
357
  const { bg, text, border } = resolveColors();
400
358
  const isSelectable = variant === "selectable";
401
- const isOutlined = type === "outlined";
402
- const hasBorder = isSelectable || isOutlined;
403
359
  const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
404
- const resolvedIconLeft = icon || iconLeft;
360
+ const isIconOnly = !children && (!!iconLeft || !!iconRight);
405
361
  return /* @__PURE__ */ jsxs(
406
362
  Box,
407
363
  {
@@ -410,15 +366,16 @@ var Tag = ({
410
366
  backgroundColor: bg,
411
367
  borderRadius,
412
368
  height: sizeStyles.height,
413
- paddingHorizontal: sizeStyles.padding,
369
+ width: isIconOnly ? sizeStyles.height : void 0,
370
+ paddingHorizontal: isIconOnly ? 0 : sizeStyles.padding,
414
371
  flexDirection: "row",
415
372
  alignItems: "center",
416
373
  justifyContent: "center",
417
374
  gap: sizeStyles.gap,
418
- borderWidth: hasBorder ? 1 : 0,
375
+ borderWidth: sizeStyles.borderWidth,
419
376
  borderColor: border,
420
- borderStyle: hasBorder ? "solid" : void 0,
421
- cursor: isSelectable ? "pointer" : void 0,
377
+ borderStyle: "solid",
378
+ cursor: isSelectable ? "pointer" : "default",
422
379
  hoverStyle: isSelectable && !selected ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover } : void 0,
423
380
  style: {
424
381
  overflow: "hidden",
@@ -426,7 +383,7 @@ var Tag = ({
426
383
  whiteSpace: "nowrap"
427
384
  },
428
385
  children: [
429
- resolvedIconLeft && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: resolvedIconLeft }),
386
+ iconLeft && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
430
387
  children && /* @__PURE__ */ jsx4(
431
388
  Text,
432
389
  {
@@ -441,7 +398,8 @@ var Tag = ({
441
398
  children
442
399
  }
443
400
  ),
444
- onRemove ? /* @__PURE__ */ jsx4(Box, { onPress: onRemove, children: /* @__PURE__ */ jsx4(X, { size: sizeStyles.iconSize, color: text }) }) : iconRight && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: iconRight })
401
+ iconRight && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: iconRight }),
402
+ onRemove && /* @__PURE__ */ jsx4(Box, { onPress: onRemove, children: /* @__PURE__ */ jsx4(X, { size: sizeStyles.iconSize, color: text }) })
445
403
  ]
446
404
  }
447
405
  );