@retray-dev/ui-kit 12.2.0 → 13.0.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 (268) hide show
  1. package/COMPONENTS.md +85 -143
  2. package/CONSUMER.md +2 -2
  3. package/DESIGN.md +2 -2
  4. package/README.md +11 -6
  5. package/dist/Accordion.js +48 -210
  6. package/dist/Accordion.mjs +6 -5
  7. package/dist/AlertBanner.js +29 -153
  8. package/dist/AlertBanner.mjs +3 -3
  9. package/dist/AppHeader.js +37 -235
  10. package/dist/AppHeader.mjs +6 -7
  11. package/dist/Avatar.d.mts +17 -1
  12. package/dist/Avatar.d.ts +17 -1
  13. package/dist/Avatar.js +80 -115
  14. package/dist/Avatar.mjs +2 -2
  15. package/dist/Badge.js +24 -149
  16. package/dist/Badge.mjs +3 -3
  17. package/dist/Button.js +79 -267
  18. package/dist/Button.mjs +6 -6
  19. package/dist/Card.js +15 -200
  20. package/dist/Card.mjs +4 -5
  21. package/dist/CategoryStrip.d.mts +0 -5
  22. package/dist/CategoryStrip.d.ts +0 -5
  23. package/dist/CategoryStrip.js +47 -265
  24. package/dist/CategoryStrip.mjs +6 -6
  25. package/dist/Checkbox.js +15 -200
  26. package/dist/Checkbox.mjs +5 -5
  27. package/dist/Chip.js +44 -236
  28. package/dist/Chip.mjs +7 -6
  29. package/dist/ConfirmDialog.js +84 -286
  30. package/dist/ConfirmDialog.mjs +7 -7
  31. package/dist/CurrencyDisplay.js +1 -114
  32. package/dist/CurrencyDisplay.mjs +2 -2
  33. package/dist/CurrencyInput.js +35 -162
  34. package/dist/CurrencyInput.mjs +5 -5
  35. package/dist/DetailRow.js +25 -150
  36. package/dist/DetailRow.mjs +3 -3
  37. package/dist/EmptyState.js +80 -268
  38. package/dist/EmptyState.mjs +7 -7
  39. package/dist/ErrorBoundary.js +32 -199
  40. package/dist/ErrorBoundary.mjs +4 -4
  41. package/dist/Form.js +1 -114
  42. package/dist/Form.mjs +2 -2
  43. package/dist/HolographicCard.d.mts +0 -28
  44. package/dist/HolographicCard.d.ts +0 -28
  45. package/dist/HolographicCard.js +20 -130
  46. package/dist/HolographicCard.mjs +9 -32
  47. package/dist/IconButton.js +36 -234
  48. package/dist/IconButton.mjs +5 -6
  49. package/dist/IconPicker.js +222 -929
  50. package/dist/IconPicker.mjs +5 -5
  51. package/dist/ImageUpload.d.mts +3 -1
  52. package/dist/ImageUpload.d.ts +3 -1
  53. package/dist/ImageUpload.js +25 -215
  54. package/dist/ImageUpload.mjs +5 -6
  55. package/dist/ImageViewer.js +75 -266
  56. package/dist/ImageViewer.mjs +8 -8
  57. package/dist/Input.d.mts +1 -1
  58. package/dist/Input.d.ts +1 -1
  59. package/dist/Input.js +35 -162
  60. package/dist/Input.mjs +4 -4
  61. package/dist/LabelValue.js +24 -149
  62. package/dist/LabelValue.mjs +3 -3
  63. package/dist/ListGroup.js +1 -114
  64. package/dist/ListGroup.mjs +2 -2
  65. package/dist/ListItem.js +38 -235
  66. package/dist/ListItem.mjs +5 -6
  67. package/dist/MediaCard.d.mts +0 -14
  68. package/dist/MediaCard.d.ts +0 -14
  69. package/dist/MediaCard.js +69 -315
  70. package/dist/MediaCard.mjs +5 -6
  71. package/dist/MenuGroup.js +1 -114
  72. package/dist/MenuGroup.mjs +2 -2
  73. package/dist/MenuItem.js +36 -234
  74. package/dist/MenuItem.mjs +5 -6
  75. package/dist/MonthPicker.js +8 -163
  76. package/dist/MonthPicker.mjs +3 -3
  77. package/dist/NumberStepper.js +40 -238
  78. package/dist/NumberStepper.mjs +5 -6
  79. package/dist/PagerDots.d.mts +1 -1
  80. package/dist/PagerDots.d.ts +1 -1
  81. package/dist/PagerDots.js +69 -224
  82. package/dist/PagerDots.mjs +6 -5
  83. package/dist/Pressable.js +14 -85
  84. package/dist/Pressable.mjs +4 -4
  85. package/dist/PricingCard.js +87 -272
  86. package/dist/PricingCard.mjs +8 -8
  87. package/dist/Progress.js +3 -123
  88. package/dist/Progress.mjs +3 -3
  89. package/dist/RadioGroup.js +52 -265
  90. package/dist/RadioGroup.mjs +5 -5
  91. package/dist/RetrayProvider.js +3 -6
  92. package/dist/RetrayProvider.mjs +3 -3
  93. package/dist/Select.d.mts +2 -1
  94. package/dist/Select.d.ts +2 -1
  95. package/dist/Select.js +24 -232
  96. package/dist/Select.mjs +4 -5
  97. package/dist/SelectableCard.js +33 -209
  98. package/dist/SelectableCard.mjs +5 -5
  99. package/dist/SelectableGrid.d.mts +0 -21
  100. package/dist/SelectableGrid.d.ts +0 -21
  101. package/dist/SelectableGrid.js +49 -271
  102. package/dist/SelectableGrid.mjs +5 -6
  103. package/dist/Separator.js +1 -114
  104. package/dist/Separator.mjs +2 -2
  105. package/dist/Sheet.js +7 -162
  106. package/dist/Sheet.mjs +3 -3
  107. package/dist/SheetSelect.js +39 -236
  108. package/dist/SheetSelect.mjs +6 -6
  109. package/dist/Skeleton.js +4 -124
  110. package/dist/Skeleton.mjs +3 -3
  111. package/dist/Slider.js +6 -161
  112. package/dist/Slider.mjs +3 -3
  113. package/dist/Spinner.js +3 -116
  114. package/dist/Spinner.mjs +2 -2
  115. package/dist/Stats.js +36 -234
  116. package/dist/Stats.mjs +5 -6
  117. package/dist/Switch.js +24 -175
  118. package/dist/Switch.mjs +5 -4
  119. package/dist/TabBar.js +43 -200
  120. package/dist/TabBar.mjs +5 -4
  121. package/dist/Tabs.js +15 -199
  122. package/dist/Tabs.mjs +5 -5
  123. package/dist/Text.js +9 -130
  124. package/dist/Text.mjs +2 -2
  125. package/dist/Textarea.d.mts +2 -1
  126. package/dist/Textarea.d.ts +2 -1
  127. package/dist/Textarea.js +71 -219
  128. package/dist/Textarea.mjs +4 -4
  129. package/dist/Toast.js +1 -114
  130. package/dist/Toast.mjs +2 -2
  131. package/dist/Toggle.js +39 -236
  132. package/dist/Toggle.mjs +6 -6
  133. package/dist/{chunk-M3C7XM2M.mjs → chunk-2QOHHBJC.mjs} +3 -3
  134. package/dist/{chunk-LIS6I5UP.mjs → chunk-2VIDP72N.mjs} +3 -3
  135. package/dist/{chunk-DF7JA72E.mjs → chunk-4NQFTHN3.mjs} +13 -7
  136. package/dist/{chunk-UBUXUMER.mjs → chunk-4ZO5PTKF.mjs} +4 -4
  137. package/dist/{chunk-3XCFYSX4.mjs → chunk-5MYNAAFE.mjs} +13 -17
  138. package/dist/{chunk-E7NEHHXV.mjs → chunk-62BBSSUF.mjs} +3 -3
  139. package/dist/{chunk-MVMGPZN6.mjs → chunk-6CR4S6W2.mjs} +3 -3
  140. package/dist/{chunk-EDLCGYIO.mjs → chunk-6QLBHUEG.mjs} +8 -7
  141. package/dist/chunk-ARONDO7M.mjs +40 -0
  142. package/dist/{chunk-GH67YXG6.mjs → chunk-AZV7KNJI.mjs} +3 -3
  143. package/dist/{chunk-RMRS44MQ.mjs → chunk-BTUW5LSG.mjs} +11 -8
  144. package/dist/{chunk-2P2CB235.mjs → chunk-BULKGOIZ.mjs} +7 -8
  145. package/dist/{chunk-NHDI3VQB.mjs → chunk-CBIZLRYH.mjs} +15 -12
  146. package/dist/chunk-CM2DG4MR.mjs +142 -0
  147. package/dist/{chunk-TS7DGUIR.mjs → chunk-DBHSUUKU.mjs} +2 -2
  148. package/dist/{chunk-57V2LXCK.mjs → chunk-DE25XTVQ.mjs} +3 -3
  149. package/dist/{chunk-UQ4742ET.mjs → chunk-E4EQSCKR.mjs} +5 -5
  150. package/dist/{chunk-GUTDFUNF.mjs → chunk-EHGBHFMH.mjs} +9 -17
  151. package/dist/{chunk-CF27NBXO.mjs → chunk-EROPDCB5.mjs} +16 -24
  152. package/dist/{chunk-ZIMY2QUM.mjs → chunk-ERWJPVX7.mjs} +2 -2
  153. package/dist/{chunk-NLZY4TXU.mjs → chunk-ESQDPO5E.mjs} +7 -7
  154. package/dist/{chunk-VJBUCITV.mjs → chunk-EW2FIDSM.mjs} +1 -1
  155. package/dist/{chunk-HC4VVCWY.mjs → chunk-FTTI6T5Q.mjs} +4 -4
  156. package/dist/{chunk-2HFD4IHU.mjs → chunk-HUSSF6TF.mjs} +1 -1
  157. package/dist/chunk-IFYMBOEN.mjs +14 -0
  158. package/dist/{chunk-QOLWA2PW.mjs → chunk-IGU223UM.mjs} +80 -4
  159. package/dist/chunk-IJCMPVW5.mjs +121 -0
  160. package/dist/{chunk-AENAVIKT.mjs → chunk-ITG4JQM3.mjs} +4 -4
  161. package/dist/{chunk-E5UKLSJZ.mjs → chunk-K3QX2M26.mjs} +11 -8
  162. package/dist/{chunk-4OORJ2DY.mjs → chunk-K7TKID3V.mjs} +8 -7
  163. package/dist/{chunk-2LG326TT.mjs → chunk-KAGADD2O.mjs} +4 -4
  164. package/dist/{chunk-IVSRW4HS.mjs → chunk-KC5QDYGZ.mjs} +4 -4
  165. package/dist/{chunk-7AFZWSCI.mjs → chunk-KPTY7UYQ.mjs} +1 -1
  166. package/dist/{chunk-YTXRIXNZ.mjs → chunk-KSSVIFYR.mjs} +9 -12
  167. package/dist/chunk-L3YKPTJQ.mjs +119 -0
  168. package/dist/chunk-M53LC4Q7.mjs +35 -0
  169. package/dist/{chunk-ZR6HSEAB.mjs → chunk-MP7GLMIR.mjs} +17 -25
  170. package/dist/chunk-MZ6WRTD2.mjs +40 -0
  171. package/dist/chunk-NGEN2EES.mjs +581 -0
  172. package/dist/{chunk-C43HRKXH.mjs → chunk-OBV72JD4.mjs} +1 -1
  173. package/dist/{chunk-LPV4NJJK.mjs → chunk-PGQ6FMXS.mjs} +6 -5
  174. package/dist/{chunk-MEPSKGBO.mjs → chunk-PI6RULJX.mjs} +1 -1
  175. package/dist/{chunk-F3YTWO3T.mjs → chunk-RA6SAAFE.mjs} +9 -8
  176. package/dist/{chunk-UNNRUJTM.mjs → chunk-RRKM4MKB.mjs} +7 -7
  177. package/dist/{chunk-ULGNQPNE.mjs → chunk-S2VGME7X.mjs} +1 -1
  178. package/dist/{chunk-OLVJFKXS.mjs → chunk-S44XWTTC.mjs} +35 -25
  179. package/dist/{chunk-YMYIEVZP.mjs → chunk-SZEKQAOY.mjs} +1 -1
  180. package/dist/{chunk-ELGEOM7I.mjs → chunk-TETMEKZE.mjs} +9 -9
  181. package/dist/{chunk-BXF4AMHY.mjs → chunk-TMH263OK.mjs} +5 -4
  182. package/dist/{chunk-NJG7DHVF.mjs → chunk-U6DEBYU5.mjs} +10 -9
  183. package/dist/{chunk-RJNLAH76.mjs → chunk-UOKFSFNJ.mjs} +2 -2
  184. package/dist/{chunk-HEDQPK4I.mjs → chunk-URIH43IJ.mjs} +13 -21
  185. package/dist/{chunk-QXDGGOLC.mjs → chunk-V2ZB2XNS.mjs} +6 -6
  186. package/dist/{chunk-KSUWPU2F.mjs → chunk-WIPEDNSD.mjs} +7 -7
  187. package/dist/{chunk-QDAZGZUF.mjs → chunk-XCIG6HT2.mjs} +3 -3
  188. package/dist/{chunk-4J2PXL36.mjs → chunk-Y6YS33GM.mjs} +40 -38
  189. package/dist/{chunk-4XOB5TTD.mjs → chunk-ZKDKKQCE.mjs} +5 -5
  190. package/dist/{chunk-LOBLCFMN.mjs → chunk-ZTPYUU5C.mjs} +5 -5
  191. package/dist/index.d.mts +12 -72
  192. package/dist/index.d.ts +12 -72
  193. package/dist/index.js +1051 -1838
  194. package/dist/index.mjs +81 -85
  195. package/package.json +8 -10
  196. package/src/components/Accordion/Accordion.tsx +12 -9
  197. package/src/components/AlertBanner/AlertBanner.tsx +7 -6
  198. package/src/components/AppHeader/AppHeader.tsx +1 -1
  199. package/src/components/Avatar/Avatar.tsx +92 -1
  200. package/src/components/Avatar/index.ts +2 -2
  201. package/src/components/Badge/Badge.tsx +2 -2
  202. package/src/components/Button/Button.tsx +50 -46
  203. package/src/components/Card/Card.tsx +1 -0
  204. package/src/components/CategoryStrip/CategoryStrip.tsx +36 -49
  205. package/src/components/Chip/Chip.tsx +5 -4
  206. package/src/components/ConfirmDialog/ConfirmDialog.tsx +3 -3
  207. package/src/components/DetailRow/DetailRow.tsx +3 -3
  208. package/src/components/EmptyState/EmptyState.tsx +2 -2
  209. package/src/components/ErrorBoundary/ErrorBoundary.tsx +6 -6
  210. package/src/components/HolographicCard/HolographicCard.tsx +14 -95
  211. package/src/components/IconButton/IconButton.tsx +2 -2
  212. package/src/components/IconPicker/IconPicker.tsx +13 -12
  213. package/src/components/ImageUpload/ImageUpload.tsx +14 -25
  214. package/src/components/ImageViewer/ImageViewer.tsx +3 -3
  215. package/src/components/Input/Input.tsx +11 -5
  216. package/src/components/LabelValue/LabelValue.tsx +2 -2
  217. package/src/components/ListItem/ListItem.tsx +4 -4
  218. package/src/components/MediaCard/MediaCard.tsx +21 -59
  219. package/src/components/MenuItem/MenuItem.tsx +2 -2
  220. package/src/components/MonthPicker/MonthPicker.tsx +2 -2
  221. package/src/components/NumberStepper/NumberStepper.tsx +6 -6
  222. package/src/components/PagerDots/PagerDots.tsx +38 -28
  223. package/src/components/PricingCard/PricingCard.tsx +6 -6
  224. package/src/components/RadioGroup/RadioGroup.tsx +18 -31
  225. package/src/components/Select/Select.tsx +32 -39
  226. package/src/components/SelectableCard/SelectableCard.tsx +4 -6
  227. package/src/components/SelectableGrid/SelectableGrid.tsx +38 -72
  228. package/src/components/Sheet/Sheet.tsx +1 -1
  229. package/src/components/SheetSelect/SheetSelect.tsx +3 -3
  230. package/src/components/Skeleton/Skeleton.tsx +1 -1
  231. package/src/components/Spinner/Spinner.tsx +2 -2
  232. package/src/components/Stats/Stats.tsx +2 -2
  233. package/src/components/Switch/Switch.tsx +9 -6
  234. package/src/components/TabBar/TabBar.tsx +9 -8
  235. package/src/components/Text/Text.tsx +12 -1
  236. package/src/components/Textarea/Textarea.tsx +18 -32
  237. package/src/components/Toggle/Toggle.tsx +3 -3
  238. package/src/hooks/useConfirmDialog.ts +31 -42
  239. package/src/index.ts +3 -4
  240. package/src/theme/ThemeProvider.tsx +1 -4
  241. package/src/theme/colorUtils.ts +1 -72
  242. package/src/theme/colors.ts +40 -1
  243. package/src/theme/types.ts +2 -2
  244. package/src/utils/animations.ts +0 -47
  245. package/src/utils/curatedIcons.ts +93 -801
  246. package/src/utils/haptics.ts +13 -208
  247. package/src/utils/icons.ts +27 -91
  248. package/src/utils/pressable.ts +10 -61
  249. package/dist/VirtualList.d.mts +0 -19
  250. package/dist/VirtualList.d.ts +0 -19
  251. package/dist/VirtualList.js +0 -38
  252. package/dist/VirtualList.mjs +0 -2
  253. package/dist/chunk-2BA3JMKK.mjs +0 -136
  254. package/dist/chunk-3DKJ2GIC.mjs +0 -30
  255. package/dist/chunk-7ELGZ66G.mjs +0 -164
  256. package/dist/chunk-DVK4G2GT.mjs +0 -59
  257. package/dist/chunk-EJ7ZPXOH.mjs +0 -163
  258. package/dist/chunk-KA7LTET3.mjs +0 -71
  259. package/dist/chunk-LNPKGWBG.mjs +0 -134
  260. package/dist/chunk-NC5ZTR2Y.mjs +0 -32
  261. package/dist/chunk-SAWUXP3A.mjs +0 -1114
  262. package/dist/chunk-YNROWHQJ.mjs +0 -46
  263. package/src/components/VirtualList/VirtualList.tsx +0 -60
  264. package/src/components/VirtualList/index.ts +0 -1
  265. package/src/utils/fontGuard.ts +0 -35
  266. package/src/utils/hover.ts +0 -25
  267. package/src/utils/useColorTransition.ts +0 -40
  268. package/src/utils/usePressScale.ts +0 -75
@@ -1,11 +1,13 @@
1
- import { PressableButton } from './chunk-3DKJ2GIC.mjs';
2
- import { impactMedium } from './chunk-EJ7ZPXOH.mjs';
1
+ import { COLOR_TRANSITION } from './chunk-M53LC4Q7.mjs';
2
+ import { PressableButton } from './chunk-IFYMBOEN.mjs';
3
+ import { impactMedium } from './chunk-ARONDO7M.mjs';
3
4
  import { TYPOGRAPHY, RADIUS } from './chunk-QY3X2UYR.mjs';
4
- import { renderIcon } from './chunk-KA7LTET3.mjs';
5
- import { useTheme } from './chunk-YTXRIXNZ.mjs';
5
+ import { Icon } from './chunk-MZ6WRTD2.mjs';
6
+ import { useTheme } from './chunk-KSSVIFYR.mjs';
6
7
  import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
7
8
  import React from 'react';
8
9
  import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
10
+ import { EaseView } from 'react-native-ease';
9
11
 
10
12
  var containerSizeStyles = {
11
13
  // AUDIT FIX: sm was 40pt — below Apple HIG 44pt minimum touch target.
@@ -41,17 +43,10 @@ function ButtonBase({
41
43
  impactMedium();
42
44
  onPress?.();
43
45
  };
44
- const containerVariantStyle = isDisabled ? {
45
- primary: { backgroundColor: colors.surface },
46
- secondary: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.border },
47
- text: { backgroundColor: "transparent" },
48
- destructive: { backgroundColor: colors.surface }
49
- }[variant] : {
50
- primary: { backgroundColor: colors.primary },
51
- secondary: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.primary },
52
- text: { backgroundColor: "transparent" },
53
- destructive: { backgroundColor: colors.destructive }
54
- }[variant];
46
+ const isSecondary = variant === "secondary";
47
+ const borderWidth = isSecondary ? 1.5 : 0;
48
+ const animateBgColor = isDisabled ? { primary: colors.surface, secondary: "transparent", text: "transparent", destructive: colors.surface }[variant] : { primary: colors.primary, secondary: "transparent", text: "transparent", destructive: colors.destructive }[variant];
49
+ const animateBorderColor = isDisabled ? isSecondary ? colors.border : "transparent" : isSecondary ? colors.primary : "transparent";
55
50
  const labelColor = isDisabled ? colors.foregroundMuted : {
56
51
  primary: colors.primaryForeground,
57
52
  secondary: colors.primary,
@@ -59,7 +54,7 @@ function ButtonBase({
59
54
  destructive: colors.destructiveForeground
60
55
  }[variant];
61
56
  const textColor = iconColor ?? labelColor;
62
- const effectiveIcon = iconName ? renderIcon(iconName, iconSizeMap[size], textColor) : typeof icon === "function" ? icon({ label, size, variant, color: textColor }) : icon;
57
+ const effectiveIcon = iconName ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: iconSizeMap[size], color: textColor }) : typeof icon === "function" ? icon({ label, size, variant, color: textColor }) : icon;
63
58
  const spinnerColor = isDisabled ? colors.foregroundMuted : variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.accentResolved;
64
59
  const styleArray = Array.isArray(style) ? style : style ? [style] : [];
65
60
  const flatStyle = StyleSheet.flatten(styleArray);
@@ -67,13 +62,6 @@ function ButtonBase({
67
62
  return /* @__PURE__ */ React.createElement(View, { style: [fullWidth && styles.fullWidth, flex !== void 0 && { flex }] }, /* @__PURE__ */ React.createElement(
68
63
  PressableButton,
69
64
  {
70
- style: [
71
- styles.base,
72
- containerVariantStyle,
73
- containerSizeStyles[size],
74
- fullWidth && styles.fullWidth,
75
- restStyle
76
- ],
77
65
  enabled: !isDisabled,
78
66
  onPress: handlePress,
79
67
  rippleColor: "transparent",
@@ -84,23 +72,37 @@ function ButtonBase({
84
72
  accessibilityHint,
85
73
  accessibilityState: { disabled: isDisabled, busy: loading }
86
74
  },
87
- loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "small", color: spinnerColor, style: { marginRight: s(6) } }), /* @__PURE__ */ React.createElement(
88
- Text,
89
- {
90
- style: [styles.label, { color: labelColor }, labelSizeStyles[size], styles.labelLoading],
91
- allowFontScaling: true,
92
- numberOfLines: 1
93
- },
94
- label
95
- )) : /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon), /* @__PURE__ */ React.createElement(
96
- Text,
75
+ /* @__PURE__ */ React.createElement(
76
+ EaseView,
97
77
  {
98
- style: [styles.label, { color: labelColor }, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
99
- allowFontScaling: true,
100
- numberOfLines: 1
78
+ style: [
79
+ styles.base,
80
+ containerSizeStyles[size],
81
+ { borderWidth },
82
+ fullWidth && styles.fullWidth,
83
+ restStyle
84
+ ],
85
+ animate: { backgroundColor: animateBgColor, borderColor: animateBorderColor },
86
+ transition: COLOR_TRANSITION
101
87
  },
102
- label
103
- ), effectiveIcon && iconPosition === "right" && /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon))
88
+ loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "small", color: spinnerColor, style: { marginRight: s(6) } }), /* @__PURE__ */ React.createElement(
89
+ Text,
90
+ {
91
+ style: [styles.label, { color: labelColor }, labelSizeStyles[size], styles.labelLoading],
92
+ allowFontScaling: true,
93
+ numberOfLines: 1
94
+ },
95
+ label
96
+ )) : /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon), /* @__PURE__ */ React.createElement(
97
+ Text,
98
+ {
99
+ style: [styles.label, { color: labelColor }, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
100
+ allowFontScaling: true,
101
+ numberOfLines: 1
102
+ },
103
+ label
104
+ ), effectiveIcon && iconPosition === "right" && /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon))
105
+ )
104
106
  ));
105
107
  }
106
108
  var Button = React.memo(ButtonBase);
@@ -1,8 +1,8 @@
1
- import { PressableCard } from './chunk-3DKJ2GIC.mjs';
2
- import { impactLight } from './chunk-EJ7ZPXOH.mjs';
1
+ import { PressableCard } from './chunk-IFYMBOEN.mjs';
2
+ import { impactLight } from './chunk-ARONDO7M.mjs';
3
3
  import { RADIUS } from './chunk-QY3X2UYR.mjs';
4
- import { renderIcon } from './chunk-KA7LTET3.mjs';
5
- import { useTheme } from './chunk-YTXRIXNZ.mjs';
4
+ import { Icon } from './chunk-MZ6WRTD2.mjs';
5
+ import { useTheme } from './chunk-KSSVIFYR.mjs';
6
6
  import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
7
7
  import React, { useState, useCallback } from 'react';
8
8
  import { StyleSheet, View, Text } from 'react-native';
@@ -80,7 +80,7 @@ function StatsComponent({
80
80
  }
81
81
  }[variant];
82
82
  const iconColorResolved = iconColor ?? colors.primary;
83
- const resolvedIcon = iconName ? renderIcon(iconName, sizeStyles.iconSize, iconColorResolved) : icon;
83
+ const resolvedIcon = iconName ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: sizeStyles.iconSize, color: iconColorResolved }) : icon;
84
84
  const iconElement = resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.iconWrapper }, resolvedIcon) : null;
85
85
  const valueElement = /* @__PURE__ */ React.createElement(Text, { style: [styles.value, { color: colors.foreground, fontFamily: sizeStyles.valueFontFamily, fontSize: sizeStyles.valueFontSize, lineHeight: sizeStyles.valueLineHeight }], allowFontScaling: true }, value);
86
86
  const cardContent = /* @__PURE__ */ React.createElement(View, { style: [styles.card, variantStyle, { padding: sizeStyles.padding }, style], onLayout: handleLayout }, isCompact ? /* @__PURE__ */ React.createElement(React.Fragment, null, iconElement, /* @__PURE__ */ React.createElement(View, { style: styles.compactValue }, valueElement), /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foregroundSubtle, fontSize: sizeStyles.labelFontSize, lineHeight: sizeStyles.labelLineHeight }], allowFontScaling: true }, label), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted, fontSize: sizeStyles.descriptionFontSize, lineHeight: sizeStyles.descriptionLineHeight }], allowFontScaling: true }, description) : null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles.valueRow }, iconElement, valueElement), /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foregroundSubtle, fontSize: sizeStyles.labelFontSize, lineHeight: sizeStyles.labelLineHeight }], allowFontScaling: true }, label), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted, fontSize: sizeStyles.descriptionFontSize, lineHeight: sizeStyles.descriptionLineHeight }], allowFontScaling: true }, description) : null));
@@ -1,7 +1,7 @@
1
- import { PressableButton } from './chunk-3DKJ2GIC.mjs';
2
- import { impactLight } from './chunk-EJ7ZPXOH.mjs';
3
- import { renderIcon } from './chunk-KA7LTET3.mjs';
4
- import { useTheme } from './chunk-YTXRIXNZ.mjs';
1
+ import { PressableButton } from './chunk-IFYMBOEN.mjs';
2
+ import { impactLight } from './chunk-ARONDO7M.mjs';
3
+ import { Icon } from './chunk-MZ6WRTD2.mjs';
4
+ import { useTheme } from './chunk-KSSVIFYR.mjs';
5
5
  import { s, ms } from './chunk-2CE3TQVY.mjs';
6
6
  import React from 'react';
7
7
  import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
@@ -48,7 +48,7 @@ function IconButtonBase({
48
48
  }[variant];
49
49
  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.foreground;
50
50
  const { container: containerSize, icon: iconSize } = sizeMap[size];
51
- const resolvedIcon = iconName ? renderIcon(iconName, iconSize, iconColor ?? defaultIconColor) : icon;
51
+ const resolvedIcon = iconName ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: iconSize, color: iconColor ?? defaultIconColor }) : icon;
52
52
  const showBadge = badge !== void 0 && badge !== false && badge !== 0;
53
53
  const badgeCount = typeof badge === "number" ? Math.min(badge, 99) : null;
54
54
  const showCount = typeof badge === "number" && badge > 0;
package/dist/index.d.mts CHANGED
@@ -11,7 +11,7 @@ export { Card, CardContent, CardContentProps, CardDescription, CardDescriptionPr
11
11
  export { Separator, SeparatorProps } from './Separator.mjs';
12
12
  export { Spinner, SpinnerProps, SpinnerSize } from './Spinner.mjs';
13
13
  export { Skeleton, SkeletonProps } from './Skeleton.mjs';
14
- export { Avatar, AvatarProps, AvatarSize } from './Avatar.mjs';
14
+ export { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AvatarSize } from './Avatar.mjs';
15
15
  export { AlertBanner, AlertBannerProps, AlertBannerVariant } from './AlertBanner.mjs';
16
16
  export { Progress, ProgressProps } from './Progress.mjs';
17
17
  export { EmptyState, EmptyStateProps } from './EmptyState.mjs';
@@ -41,7 +41,6 @@ export { CategoryItem, CategoryStrip, CategoryStripProps } from './CategoryStrip
41
41
  export { Pressable, PressableProps } from './Pressable.mjs';
42
42
  export { DetailRow, DetailRowLabelWeight, DetailRowProps, DetailRowSeparator } from './DetailRow.mjs';
43
43
  export { Form, FormField, FormFieldProps, FormFooter, FormFooterProps, FormProps, FormSection, FormSectionProps } from './Form.mjs';
44
- export { VirtualList, VirtualListItem, VirtualListProps } from './VirtualList.mjs';
45
44
  export { ErrorBoundary, ErrorBoundaryProps, ErrorFallbackProps } from './ErrorBoundary.mjs';
46
45
  export { PagerDots, PagerDotsProps } from './PagerDots.mjs';
47
46
  export { AppHeader, AppHeaderProps } from './AppHeader.mjs';
@@ -83,28 +82,18 @@ declare function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolve
83
82
 
84
83
  type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons';
85
84
  interface IconProps {
86
- /** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
87
85
  name: string;
88
86
  size: number;
89
87
  color: string;
90
- /** Override the resolved family when the same name exists in multiple families. */
91
88
  family?: IconFamily;
92
89
  }
93
- /**
94
- * Restrict which icon families participate in automatic name resolution.
95
- * Narrowing to the families you actually use shrinks the resolution cache and
96
- * speeds up the first `renderIcon` call (no scanning thousands of unused glyphs).
97
- *
98
- * Note: all six families are still statically imported by this module — Metro
99
- * bundles them regardless. This controls *resolution scope*, not bundle size.
100
- *
101
- * @example configureIconFamilies(['Feather', 'MaterialIcons'])
102
- */
103
- declare function configureIconFamilies(families: IconFamily[]): void;
104
- declare function getValidIconNames(families?: IconFamily[]): string[];
105
90
  declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
106
- declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
107
91
 
92
+ declare function hexToRgb(hex: string): {
93
+ r: number;
94
+ g: number;
95
+ b: number;
96
+ } | null;
108
97
  declare function withAlpha(hex: string, alpha: number): string;
109
98
 
110
99
  /**
@@ -120,75 +109,26 @@ declare function getResponsiveFontSize(text: string, maxSize: number, steps?: {
120
109
  subtract: number;
121
110
  }[]): number;
122
111
 
123
- /**
124
- * Light selection feedback — checkboxes, switches, toggles, pickers.
125
- */
126
112
  declare function selectionAsync(): void;
127
- /**
128
- * Light impact — cards, surfaces, light interactions.
129
- */
130
113
  declare function impactLight(): void;
131
- /**
132
- * Medium impact — buttons, primary actions.
133
- */
134
114
  declare function impactMedium(): void;
135
- /**
136
- * Heavy impact — confirmations, important actions.
137
- */
138
115
  declare function impactHeavy(): void;
139
- /**
140
- * Success notification — confirmations, completed actions.
141
- */
142
116
  declare function notificationSuccess(): void;
143
- /**
144
- * Error notification — failed actions, errors.
145
- */
146
117
  declare function notificationError(): void;
147
- /**
148
- * Warning notification — caution states.
149
- */
150
118
  declare function notificationWarning(): void;
151
- /**
152
- * Rich haptic presets from Pulsar — enhanced feedback for special interactions.
153
- * Falls back to basic expo-haptics on Expo Go or unsupported devices.
154
- */
155
- declare const richHaptics: {
156
- /** Hammer strike — strong confirmation feedback. */
157
- hammer: () => void;
158
- /** Pulse — rhythmic feedback for toggles or state changes. */
159
- pulse: () => void;
160
- /** Buzz — continuous vibration for attention. */
161
- buzz: () => void;
162
- /** Flick — crisp click feedback. */
163
- flick: () => void;
164
- /** Soft — gentle, subtle feedback. */
165
- soft: () => void;
166
- /** Rigid — firm, solid feedback. */
167
- rigid: () => void;
168
- };
169
119
 
170
120
  interface UseConfirmDialogOptions {
171
121
  onConfirm: () => void | Promise<void>;
172
122
  onCancel?: () => void;
173
123
  }
174
- interface UseConfirmDialogResult<T> {
175
- /** Pass to ConfirmDialog `visible` prop. */
124
+ interface UseConfirmDialogResult {
176
125
  visible: boolean;
177
- /** The value passed to `open()` — available during the confirmation flow. */
178
- target: T | null;
179
- /** Whether `onConfirm` is currently executing. Pass to ConfirmDialog `loading` prop. */
180
126
  loading: boolean;
181
- /** Open the dialog, optionally with an associated value (e.g. the item to delete). */
182
- open: (target?: T) => void;
183
- /** Handlers to pass directly to ConfirmDialog. */
184
- dialogProps: {
185
- visible: boolean;
186
- loading: boolean;
187
- onConfirm: () => void;
188
- onCancel: () => void;
189
- };
127
+ open: () => void;
128
+ onConfirm: () => void;
129
+ onCancel: () => void;
190
130
  }
191
- declare function useConfirmDialog<T = undefined>(options: UseConfirmDialogOptions): UseConfirmDialogResult<T>;
131
+ declare function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDialogResult;
192
132
 
193
133
  declare const SPACING: {
194
134
  readonly xxs: 2;
@@ -393,4 +333,4 @@ type RadiusKey = keyof Radius;
393
333
  type Typography = typeof TYPOGRAPHY;
394
334
  type TypographyKey = keyof Typography;
395
335
 
396
- export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, getValidIconNames, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme, withAlpha };
336
+ export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, hexToRgb, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, selectionAsync, useConfirmDialog, useTheme, withAlpha };
package/dist/index.d.ts CHANGED
@@ -11,7 +11,7 @@ export { Card, CardContent, CardContentProps, CardDescription, CardDescriptionPr
11
11
  export { Separator, SeparatorProps } from './Separator.js';
12
12
  export { Spinner, SpinnerProps, SpinnerSize } from './Spinner.js';
13
13
  export { Skeleton, SkeletonProps } from './Skeleton.js';
14
- export { Avatar, AvatarProps, AvatarSize } from './Avatar.js';
14
+ export { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AvatarSize } from './Avatar.js';
15
15
  export { AlertBanner, AlertBannerProps, AlertBannerVariant } from './AlertBanner.js';
16
16
  export { Progress, ProgressProps } from './Progress.js';
17
17
  export { EmptyState, EmptyStateProps } from './EmptyState.js';
@@ -41,7 +41,6 @@ export { CategoryItem, CategoryStrip, CategoryStripProps } from './CategoryStrip
41
41
  export { Pressable, PressableProps } from './Pressable.js';
42
42
  export { DetailRow, DetailRowLabelWeight, DetailRowProps, DetailRowSeparator } from './DetailRow.js';
43
43
  export { Form, FormField, FormFieldProps, FormFooter, FormFooterProps, FormProps, FormSection, FormSectionProps } from './Form.js';
44
- export { VirtualList, VirtualListItem, VirtualListProps } from './VirtualList.js';
45
44
  export { ErrorBoundary, ErrorBoundaryProps, ErrorFallbackProps } from './ErrorBoundary.js';
46
45
  export { PagerDots, PagerDotsProps } from './PagerDots.js';
47
46
  export { AppHeader, AppHeaderProps } from './AppHeader.js';
@@ -83,28 +82,18 @@ declare function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolve
83
82
 
84
83
  type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons';
85
84
  interface IconProps {
86
- /** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
87
85
  name: string;
88
86
  size: number;
89
87
  color: string;
90
- /** Override the resolved family when the same name exists in multiple families. */
91
88
  family?: IconFamily;
92
89
  }
93
- /**
94
- * Restrict which icon families participate in automatic name resolution.
95
- * Narrowing to the families you actually use shrinks the resolution cache and
96
- * speeds up the first `renderIcon` call (no scanning thousands of unused glyphs).
97
- *
98
- * Note: all six families are still statically imported by this module — Metro
99
- * bundles them regardless. This controls *resolution scope*, not bundle size.
100
- *
101
- * @example configureIconFamilies(['Feather', 'MaterialIcons'])
102
- */
103
- declare function configureIconFamilies(families: IconFamily[]): void;
104
- declare function getValidIconNames(families?: IconFamily[]): string[];
105
90
  declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
106
- declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
107
91
 
92
+ declare function hexToRgb(hex: string): {
93
+ r: number;
94
+ g: number;
95
+ b: number;
96
+ } | null;
108
97
  declare function withAlpha(hex: string, alpha: number): string;
109
98
 
110
99
  /**
@@ -120,75 +109,26 @@ declare function getResponsiveFontSize(text: string, maxSize: number, steps?: {
120
109
  subtract: number;
121
110
  }[]): number;
122
111
 
123
- /**
124
- * Light selection feedback — checkboxes, switches, toggles, pickers.
125
- */
126
112
  declare function selectionAsync(): void;
127
- /**
128
- * Light impact — cards, surfaces, light interactions.
129
- */
130
113
  declare function impactLight(): void;
131
- /**
132
- * Medium impact — buttons, primary actions.
133
- */
134
114
  declare function impactMedium(): void;
135
- /**
136
- * Heavy impact — confirmations, important actions.
137
- */
138
115
  declare function impactHeavy(): void;
139
- /**
140
- * Success notification — confirmations, completed actions.
141
- */
142
116
  declare function notificationSuccess(): void;
143
- /**
144
- * Error notification — failed actions, errors.
145
- */
146
117
  declare function notificationError(): void;
147
- /**
148
- * Warning notification — caution states.
149
- */
150
118
  declare function notificationWarning(): void;
151
- /**
152
- * Rich haptic presets from Pulsar — enhanced feedback for special interactions.
153
- * Falls back to basic expo-haptics on Expo Go or unsupported devices.
154
- */
155
- declare const richHaptics: {
156
- /** Hammer strike — strong confirmation feedback. */
157
- hammer: () => void;
158
- /** Pulse — rhythmic feedback for toggles or state changes. */
159
- pulse: () => void;
160
- /** Buzz — continuous vibration for attention. */
161
- buzz: () => void;
162
- /** Flick — crisp click feedback. */
163
- flick: () => void;
164
- /** Soft — gentle, subtle feedback. */
165
- soft: () => void;
166
- /** Rigid — firm, solid feedback. */
167
- rigid: () => void;
168
- };
169
119
 
170
120
  interface UseConfirmDialogOptions {
171
121
  onConfirm: () => void | Promise<void>;
172
122
  onCancel?: () => void;
173
123
  }
174
- interface UseConfirmDialogResult<T> {
175
- /** Pass to ConfirmDialog `visible` prop. */
124
+ interface UseConfirmDialogResult {
176
125
  visible: boolean;
177
- /** The value passed to `open()` — available during the confirmation flow. */
178
- target: T | null;
179
- /** Whether `onConfirm` is currently executing. Pass to ConfirmDialog `loading` prop. */
180
126
  loading: boolean;
181
- /** Open the dialog, optionally with an associated value (e.g. the item to delete). */
182
- open: (target?: T) => void;
183
- /** Handlers to pass directly to ConfirmDialog. */
184
- dialogProps: {
185
- visible: boolean;
186
- loading: boolean;
187
- onConfirm: () => void;
188
- onCancel: () => void;
189
- };
127
+ open: () => void;
128
+ onConfirm: () => void;
129
+ onCancel: () => void;
190
130
  }
191
- declare function useConfirmDialog<T = undefined>(options: UseConfirmDialogOptions): UseConfirmDialogResult<T>;
131
+ declare function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDialogResult;
192
132
 
193
133
  declare const SPACING: {
194
134
  readonly xxs: 2;
@@ -393,4 +333,4 @@ type RadiusKey = keyof Radius;
393
333
  type Typography = typeof TYPOGRAPHY;
394
334
  type TypographyKey = keyof Typography;
395
335
 
396
- export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, getValidIconNames, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme, withAlpha };
336
+ export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, hexToRgb, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, selectionAsync, useConfirmDialog, useTheme, withAlpha };