@entropix/react-native 1.0.0 → 1.0.1

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 (93) hide show
  1. package/dist/accordion.cjs +26 -0
  2. package/dist/accordion.d.cts +34 -0
  3. package/dist/accordion.d.ts +34 -0
  4. package/dist/accordion.js +5 -0
  5. package/dist/button.cjs +14 -0
  6. package/dist/button.d.cts +35 -0
  7. package/dist/button.d.ts +35 -0
  8. package/dist/button.js +5 -0
  9. package/dist/checkbox.cjs +14 -0
  10. package/dist/checkbox.d.cts +41 -0
  11. package/dist/checkbox.d.ts +41 -0
  12. package/dist/checkbox.js +5 -0
  13. package/dist/chunk-2SQB7RNT.cjs +110 -0
  14. package/dist/chunk-3MHE2C74.js +143 -0
  15. package/dist/chunk-45KMMZUT.js +131 -0
  16. package/dist/chunk-64DK6YFL.js +164 -0
  17. package/dist/chunk-73BDGPZT.js +89 -0
  18. package/dist/chunk-B5YFEA66.cjs +243 -0
  19. package/dist/chunk-BOUIB4OY.cjs +56 -0
  20. package/dist/chunk-C6HF6QXK.js +154 -0
  21. package/dist/chunk-CXQNNEPC.js +249 -0
  22. package/dist/chunk-EFRYMWJB.js +86 -0
  23. package/dist/chunk-FQUZIDVS.cjs +174 -0
  24. package/dist/chunk-G7WPUTB6.cjs +258 -0
  25. package/dist/chunk-HH3CEDSH.js +122 -0
  26. package/dist/chunk-IRQWSFCZ.cjs +156 -0
  27. package/dist/chunk-KU24A5PQ.js +92 -0
  28. package/dist/chunk-OMKUPSHJ.cjs +95 -0
  29. package/dist/chunk-P5NAXMSC.cjs +91 -0
  30. package/dist/chunk-PKDXWKLO.cjs +245 -0
  31. package/dist/chunk-PVTPOJRU.js +155 -0
  32. package/dist/chunk-Q7TEJ62Q.cjs +160 -0
  33. package/dist/chunk-THX22NZW.cjs +146 -0
  34. package/dist/chunk-UHVTF2Y4.js +172 -0
  35. package/dist/chunk-UYXJHKYK.cjs +166 -0
  36. package/dist/chunk-VP567WZL.js +237 -0
  37. package/dist/chunk-XBNX4SLA.js +105 -0
  38. package/dist/chunk-XND7AIKO.cjs +133 -0
  39. package/dist/chunk-XSOLJOBG.js +238 -0
  40. package/dist/chunk-Z2MBHXUQ.cjs +127 -0
  41. package/dist/chunk-ZPAOLIIG.cjs +88 -0
  42. package/dist/chunk-ZYOTKLBG.js +52 -0
  43. package/dist/dialog.cjs +38 -0
  44. package/dist/dialog.d.cts +83 -0
  45. package/dist/dialog.d.ts +83 -0
  46. package/dist/dialog.js +5 -0
  47. package/dist/index.cjs +187 -2084
  48. package/dist/index.d.cts +21 -672
  49. package/dist/index.d.ts +21 -672
  50. package/dist/index.js +15 -2045
  51. package/dist/input.cjs +14 -0
  52. package/dist/input.d.cts +57 -0
  53. package/dist/input.d.ts +57 -0
  54. package/dist/input.js +5 -0
  55. package/dist/layout.cjs +25 -0
  56. package/dist/layout.d.cts +108 -0
  57. package/dist/layout.d.ts +108 -0
  58. package/dist/layout.js +4 -0
  59. package/dist/menu.cjs +26 -0
  60. package/dist/menu.d.cts +34 -0
  61. package/dist/menu.d.ts +34 -0
  62. package/dist/menu.js +5 -0
  63. package/dist/radio.cjs +18 -0
  64. package/dist/radio.d.cts +55 -0
  65. package/dist/radio.d.ts +55 -0
  66. package/dist/radio.js +5 -0
  67. package/dist/select.cjs +26 -0
  68. package/dist/select.d.cts +86 -0
  69. package/dist/select.d.ts +86 -0
  70. package/dist/select.js +5 -0
  71. package/dist/switch.cjs +14 -0
  72. package/dist/switch.d.cts +27 -0
  73. package/dist/switch.d.ts +27 -0
  74. package/dist/switch.js +5 -0
  75. package/dist/tabs.cjs +26 -0
  76. package/dist/tabs.d.cts +33 -0
  77. package/dist/tabs.d.ts +33 -0
  78. package/dist/tabs.js +5 -0
  79. package/dist/textarea.cjs +14 -0
  80. package/dist/textarea.d.cts +55 -0
  81. package/dist/textarea.d.ts +55 -0
  82. package/dist/textarea.js +5 -0
  83. package/dist/theme.cjs +20 -0
  84. package/dist/theme.d.cts +59 -0
  85. package/dist/theme.d.ts +59 -0
  86. package/dist/theme.js +3 -0
  87. package/dist/toggle.cjs +18 -0
  88. package/dist/toggle.d.cts +41 -0
  89. package/dist/toggle.d.ts +41 -0
  90. package/dist/toggle.js +5 -0
  91. package/package.json +146 -4
  92. package/dist/index.cjs.map +0 -1
  93. package/dist/index.js.map +0 -1
package/dist/index.cjs CHANGED
@@ -1,2091 +1,194 @@
1
1
  'use strict';
2
2
 
3
- var react = require('react');
4
- var native = require('@entropix/tokens/native');
5
- var light = require('@entropix/tokens/native/light');
6
- var dark = require('@entropix/tokens/native/dark');
7
- var jsxRuntime = require('react/jsx-runtime');
8
- var reactNative = require('react-native');
9
- var core = require('@entropix/core');
3
+ var chunkFQUZIDVS_cjs = require('./chunk-FQUZIDVS.cjs');
4
+ var chunkUYXJHKYK_cjs = require('./chunk-UYXJHKYK.cjs');
5
+ var chunkIRQWSFCZ_cjs = require('./chunk-IRQWSFCZ.cjs');
6
+ var chunkTHX22NZW_cjs = require('./chunk-THX22NZW.cjs');
7
+ var chunkB5YFEA66_cjs = require('./chunk-B5YFEA66.cjs');
8
+ var chunkG7WPUTB6_cjs = require('./chunk-G7WPUTB6.cjs');
9
+ var chunkXND7AIKO_cjs = require('./chunk-XND7AIKO.cjs');
10
+ var chunkOMKUPSHJ_cjs = require('./chunk-OMKUPSHJ.cjs');
11
+ var chunkZPAOLIIG_cjs = require('./chunk-ZPAOLIIG.cjs');
12
+ var chunkPKDXWKLO_cjs = require('./chunk-PKDXWKLO.cjs');
13
+ var chunk2SQB7RNT_cjs = require('./chunk-2SQB7RNT.cjs');
14
+ var chunkQ7TEJ62Q_cjs = require('./chunk-Q7TEJ62Q.cjs');
15
+ var chunkZ2MBHXUQ_cjs = require('./chunk-Z2MBHXUQ.cjs');
16
+ var chunkP5NAXMSC_cjs = require('./chunk-P5NAXMSC.cjs');
17
+ var chunkBOUIB4OY_cjs = require('./chunk-BOUIB4OY.cjs');
10
18
 
11
- // src/theme/theme-context.tsx
12
- var ThemeContext = react.createContext({
13
- mode: "light",
14
- brand: "default",
15
- tokens: light.tokens,
16
- baseTokens: native.tokens
17
- });
18
- var brandRegistry = {
19
- default: {
20
- light: light.tokens,
21
- dark: dark.tokens
22
- }
23
- };
24
- function registerBrand(name, themes) {
25
- brandRegistry[name] = themes;
26
- }
27
- function EntropixProvider({
28
- mode = "light",
29
- brand = "default",
30
- tokens: tokenOverride,
31
- children
32
- }) {
33
- const value = react.useMemo(() => {
34
- let resolvedTokens;
35
- if (tokenOverride) {
36
- resolvedTokens = tokenOverride;
37
- } else {
38
- const brandThemes = brandRegistry[brand] ?? brandRegistry.default;
39
- resolvedTokens = brandThemes[mode] ?? brandThemes.light;
40
- }
41
- return {
42
- mode,
43
- brand,
44
- tokens: resolvedTokens,
45
- baseTokens: native.tokens
46
- };
47
- }, [mode, brand, tokenOverride]);
48
- return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
49
- }
50
- function useTheme() {
51
- return react.useContext(ThemeContext);
52
- }
53
19
 
54
- // src/utils/map-accessibility-to-rn.ts
55
- var RN_ROLE_MAP = {
56
- button: "button",
57
- checkbox: "checkbox",
58
- switch: "switch",
59
- dialog: "none",
60
- // Modal component handles dialog semantics
61
- alertdialog: "alert",
62
- link: "link",
63
- tab: "tab",
64
- tablist: "tablist",
65
- menu: "menu",
66
- menuitem: "menuitem",
67
- radio: "radio",
68
- radiogroup: "radiogroup",
69
- slider: "adjustable",
70
- spinbutton: "spinbutton",
71
- textbox: "text",
72
- combobox: "combobox",
73
- progressbar: "progressbar",
74
- alert: "alert",
75
- status: "text",
76
- tooltip: "text",
77
- none: "none",
78
- presentation: "none"
79
- };
80
- function mapAccessibilityToRN(props) {
81
- const result = { accessible: true };
82
- if (props.role) {
83
- result.accessibilityRole = RN_ROLE_MAP[props.role] ?? props.role;
84
- }
85
- if (props.label) {
86
- result.accessibilityLabel = props.label;
87
- }
88
- if (props.describedBy) {
89
- result.accessibilityHint = props.describedBy;
90
- }
91
- if (props.labelledBy) {
92
- result.accessibilityLabelledBy = props.labelledBy;
93
- }
94
- const state = {};
95
- let hasState = false;
96
- if (props.disabled !== void 0) {
97
- state.disabled = props.disabled;
98
- hasState = true;
99
- }
100
- if (props.expanded !== void 0) {
101
- state.expanded = props.expanded;
102
- hasState = true;
103
- }
104
- if (props.selected !== void 0) {
105
- state.selected = props.selected;
106
- hasState = true;
107
- }
108
- if (props.checked !== void 0) {
109
- state.checked = props.checked;
110
- hasState = true;
111
- }
112
- if (props.busy !== void 0) {
113
- state.busy = props.busy;
114
- hasState = true;
115
- }
116
- if (hasState) {
117
- result.accessibilityState = state;
118
- }
119
- if (props.valueNow !== void 0 || props.valueMin !== void 0 || props.valueMax !== void 0 || props.valueText !== void 0) {
120
- result.accessibilityValue = {};
121
- if (props.valueNow !== void 0)
122
- result.accessibilityValue.now = props.valueNow;
123
- if (props.valueMin !== void 0)
124
- result.accessibilityValue.min = props.valueMin;
125
- if (props.valueMax !== void 0)
126
- result.accessibilityValue.max = props.valueMax;
127
- if (props.valueText !== void 0)
128
- result.accessibilityValue.text = props.valueText;
129
- }
130
- if (props.live) {
131
- result.accessibilityLiveRegion = props.live === "off" ? "none" : props.live;
132
- }
133
- if (props.hidden) {
134
- result.accessibilityElementsHidden = true;
135
- result.importantForAccessibility = "no-hide-descendants";
136
- }
137
- return result;
138
- }
139
- function Button({
140
- onPress,
141
- disabled,
142
- loading,
143
- variant = "primary",
144
- size = "md",
145
- style,
146
- textStyle,
147
- children,
148
- ...rest
149
- }) {
150
- const { tokens: t, baseTokens: bt } = useTheme();
151
- const { isDisabled, isLoading, getButtonProps } = core.useButton({
152
- disabled,
153
- loading,
154
- onPress,
155
- elementType: "div"
156
- });
157
- const propGetterReturn = getButtonProps();
158
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
159
- const handlePress = react.useCallback(() => {
160
- propGetterReturn.onAction?.();
161
- }, [propGetterReturn.onAction]);
162
- const sizeStyles = getSizeStyle(size, bt);
163
- const variantStyles = getVariantStyle(variant, t);
164
- const labelColor = getVariantTextColor(variant, t);
165
- const isInactive = isDisabled || isLoading;
166
- return /* @__PURE__ */ jsxRuntime.jsx(
167
- reactNative.Pressable,
168
- {
169
- ...rnAccessibility,
170
- ...rest,
171
- disabled: isInactive,
172
- onPress: isInactive ? void 0 : handlePress,
173
- style: [
174
- baseStyle,
175
- sizeStyles.container,
176
- variantStyles,
177
- isInactive && { opacity: 0.5 },
178
- style
179
- ],
180
- children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
181
- reactNative.Text,
182
- {
183
- style: [
184
- { color: labelColor, fontSize: sizeStyles.fontSize, fontWeight: "500" },
185
- textStyle
186
- ],
187
- children
188
- }
189
- ) : children
190
- }
191
- );
192
- }
193
- var baseStyle = {
194
- flexDirection: "row",
195
- alignItems: "center",
196
- justifyContent: "center"
197
- };
198
- function getSizeStyle(size, bt) {
199
- switch (size) {
200
- case "sm":
201
- return {
202
- container: {
203
- paddingVertical: bt.entropixSpacing1,
204
- paddingHorizontal: bt.entropixSpacing3,
205
- borderRadius: bt.entropixRadiusSm,
206
- gap: bt.entropixButtonGap
207
- },
208
- fontSize: bt.entropixFontSizeXs
209
- };
210
- case "lg":
211
- return {
212
- container: {
213
- paddingVertical: bt.entropixSpacing3,
214
- paddingHorizontal: bt.entropixSpacing6,
215
- borderRadius: bt.entropixRadiusLg,
216
- gap: bt.entropixButtonGap
217
- },
218
- fontSize: bt.entropixFontSizeBase
219
- };
220
- default:
221
- return {
222
- container: {
223
- paddingVertical: bt.entropixButtonPaddingY,
224
- paddingHorizontal: bt.entropixButtonPaddingX,
225
- borderRadius: bt.entropixButtonBorderRadius,
226
- gap: bt.entropixButtonGap
227
- },
228
- fontSize: bt.entropixButtonFontSize
229
- };
230
- }
231
- }
232
- function getVariantStyle(variant, t) {
233
- switch (variant) {
234
- case "primary":
235
- return { backgroundColor: t.entropixButtonPrimaryBg, borderWidth: 1, borderColor: t.entropixButtonPrimaryBorder };
236
- case "secondary":
237
- return { backgroundColor: t.entropixButtonSecondaryBg, borderWidth: 1, borderColor: t.entropixButtonSecondaryBorder };
238
- case "outline":
239
- return { backgroundColor: "transparent", borderWidth: 1, borderColor: t.entropixColorBorderDefault };
240
- case "ghost":
241
- return { backgroundColor: "transparent", borderWidth: 1, borderColor: "transparent" };
242
- case "danger":
243
- return { backgroundColor: t.entropixButtonDangerBg, borderWidth: 1, borderColor: t.entropixButtonDangerBorder };
244
- }
245
- }
246
- function getVariantTextColor(variant, t) {
247
- switch (variant) {
248
- case "primary":
249
- return t.entropixButtonPrimaryText;
250
- case "secondary":
251
- return t.entropixButtonSecondaryText;
252
- case "outline":
253
- case "ghost":
254
- return t.entropixColorTextPrimary;
255
- case "danger":
256
- return t.entropixButtonDangerText;
257
- }
258
- }
259
- function Toggle(props) {
260
- return /* @__PURE__ */ jsxRuntime.jsx(ToggleInner, { ...props, role: "checkbox" });
261
- }
262
- function ToggleInner({
263
- checked,
264
- defaultChecked,
265
- onChange,
266
- disabled,
267
- label,
268
- role = "checkbox",
269
- style,
270
- textStyle,
271
- children,
272
- ...rest
273
- }) {
274
- const { tokens: t, baseTokens: bt } = useTheme();
275
- const { isDisabled, getToggleProps } = core.useToggle({
276
- checked,
277
- defaultChecked,
278
- onChange,
279
- disabled,
280
- role
281
- });
282
- const propGetterReturn = getToggleProps();
283
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
284
- const isChecked = propGetterReturn.accessibility.checked === true;
285
- if (label) {
286
- rnAccessibility.accessibilityLabel = label;
287
- }
288
- const handlePress = react.useCallback(() => {
289
- propGetterReturn.onAction?.();
290
- }, [propGetterReturn.onAction]);
291
- return /* @__PURE__ */ jsxRuntime.jsx(
292
- reactNative.Pressable,
293
- {
294
- ...rnAccessibility,
295
- ...rest,
296
- disabled: isDisabled,
297
- onPress: isDisabled ? void 0 : handlePress,
298
- style: [
299
- {
300
- flexDirection: "row",
301
- alignItems: "center",
302
- justifyContent: "center",
303
- paddingVertical: bt.entropixSpacing2,
304
- paddingHorizontal: bt.entropixSpacing3,
305
- borderWidth: 1,
306
- borderColor: isChecked ? "transparent" : t.entropixColorBorderDefault,
307
- borderRadius: bt.entropixRadiusMd,
308
- backgroundColor: isChecked ? t.entropixColorActionPrimaryDefault : t.entropixColorBgPrimary
309
- },
310
- isDisabled && { opacity: 0.5 },
311
- style
312
- ],
313
- children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
314
- reactNative.Text,
315
- {
316
- style: [
317
- {
318
- fontSize: bt.entropixFontSizeSm,
319
- fontWeight: "500",
320
- color: isChecked ? t.entropixColorTextInverse : t.entropixColorTextPrimary
321
- },
322
- textStyle
323
- ],
324
- children
325
- }
326
- ) : children != null ? children : /* @__PURE__ */ jsxRuntime.jsx(
327
- reactNative.Text,
328
- {
329
- style: {
330
- fontSize: bt.entropixFontSizeSm,
331
- fontWeight: "500",
332
- color: isChecked ? t.entropixColorTextInverse : t.entropixColorTextPrimary
333
- },
334
- children: isChecked ? "On" : "Off"
335
- }
336
- )
337
- }
338
- );
339
- }
340
- var TRACK_WIDTH = 44;
341
- var TRACK_HEIGHT = 24;
342
- var TRACK_PADDING = 2;
343
- var THUMB_SIZE = TRACK_HEIGHT - TRACK_PADDING * 2;
344
- var THUMB_TRAVEL = TRACK_WIDTH - TRACK_PADDING * 2 - THUMB_SIZE;
345
- function Switch({
346
- checked,
347
- defaultChecked,
348
- onChange,
349
- disabled,
350
- label,
351
- style,
352
- ...rest
353
- }) {
354
- const { tokens: t, baseTokens: bt } = useTheme();
355
- const { isDisabled, getToggleProps } = core.useToggle({
356
- checked,
357
- defaultChecked,
358
- onChange,
359
- disabled,
360
- role: "switch"
361
- });
362
- const propGetterReturn = getToggleProps();
363
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
364
- const isChecked = propGetterReturn.accessibility.checked === true;
365
- if (label) {
366
- rnAccessibility.accessibilityLabel = label;
367
- }
368
- const handlePress = react.useCallback(() => {
369
- propGetterReturn.onAction?.();
370
- }, [propGetterReturn.onAction]);
371
- const thumbAnim = react.useRef(
372
- new reactNative.Animated.Value(defaultChecked || checked ? THUMB_TRAVEL : 0)
373
- ).current;
374
- react.useEffect(() => {
375
- reactNative.Animated.timing(thumbAnim, {
376
- toValue: isChecked ? THUMB_TRAVEL : 0,
377
- duration: 150,
378
- useNativeDriver: false
379
- }).start();
380
- }, [isChecked, thumbAnim]);
381
- return /* @__PURE__ */ jsxRuntime.jsx(
382
- reactNative.Pressable,
383
- {
384
- ...rnAccessibility,
385
- ...rest,
386
- disabled: isDisabled,
387
- onPress: isDisabled ? void 0 : handlePress,
388
- style: [
389
- {
390
- width: TRACK_WIDTH,
391
- height: TRACK_HEIGHT,
392
- borderRadius: bt.entropixRadiusFull,
393
- backgroundColor: isChecked ? t.entropixColorActionPrimaryDefault : t.entropixColorGray300,
394
- padding: TRACK_PADDING,
395
- justifyContent: "center"
396
- },
397
- isDisabled && { opacity: 0.5 },
398
- style
399
- ],
400
- children: /* @__PURE__ */ jsxRuntime.jsx(
401
- reactNative.Animated.View,
402
- {
403
- style: {
404
- width: THUMB_SIZE,
405
- height: THUMB_SIZE,
406
- borderRadius: bt.entropixRadiusFull,
407
- backgroundColor: t.entropixColorWhite,
408
- transform: [{ translateX: thumbAnim }]
409
- }
410
- }
411
- )
412
- }
413
- );
414
- }
415
- var DialogContext = react.createContext(null);
416
- function useDialogContext() {
417
- const context = react.useContext(DialogContext);
418
- if (!context) {
419
- throw new Error(
420
- "Dialog compound components must be used within a <Dialog> provider."
421
- );
422
- }
423
- return context;
424
- }
425
- function Dialog({
426
- children,
427
- isOpen,
428
- defaultOpen,
429
- onOpenChange,
430
- closeOnOverlayPress,
431
- closeOnEscape,
432
- modal,
433
- role
434
- }) {
435
- const dialog = core.useDialog({
436
- isOpen,
437
- defaultOpen,
438
- onOpenChange,
439
- closeOnOverlayPress,
440
- closeOnEscape,
441
- modal,
442
- role
443
- });
444
- return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: dialog, children });
445
- }
446
- function DialogTrigger({
447
- children,
448
- style,
449
- ...rest
450
- }) {
451
- const { getTriggerProps } = useDialogContext();
452
- const propGetterReturn = getTriggerProps();
453
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
454
- const handlePress = react.useCallback(() => {
455
- propGetterReturn.onAction?.();
456
- }, [propGetterReturn.onAction]);
457
- return /* @__PURE__ */ jsxRuntime.jsx(
458
- reactNative.Pressable,
459
- {
460
- ...rnAccessibility,
461
- ...rest,
462
- onPress: handlePress,
463
- style,
464
- children
465
- }
466
- );
467
- }
468
- function DialogContent({
469
- children,
470
- style,
471
- cardStyle,
472
- animationType = "fade",
473
- transparent = true,
474
- ...rest
475
- }) {
476
- const { tokens: t, baseTokens: bt } = useTheme();
477
- const { isOpen, close, ids, getContentProps } = useDialogContext();
478
- const propGetterReturn = getContentProps();
479
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
480
- return /* @__PURE__ */ jsxRuntime.jsx(
481
- reactNative.Modal,
482
- {
483
- visible: isOpen,
484
- transparent,
485
- animationType,
486
- onRequestClose: close,
487
- supportedOrientations: ["portrait", "landscape"],
488
- children: /* @__PURE__ */ jsxRuntime.jsx(
489
- reactNative.View,
490
- {
491
- ...rest,
492
- style: [
493
- {
494
- flex: 1,
495
- justifyContent: "center",
496
- alignItems: "center",
497
- backgroundColor: "rgba(0, 0, 0, 0.5)"
498
- },
499
- style
500
- ],
501
- children: /* @__PURE__ */ jsxRuntime.jsx(
502
- reactNative.View,
503
- {
504
- ...rnAccessibility,
505
- nativeID: ids.content,
506
- style: [
507
- {
508
- backgroundColor: t.entropixColorBgPrimary,
509
- borderRadius: bt.entropixRadiusLg,
510
- padding: bt.entropixSpacing6,
511
- width: "90%",
512
- maxWidth: 480,
513
- shadowColor: "#000",
514
- shadowOffset: { width: 0, height: 4 },
515
- shadowOpacity: 0.15,
516
- shadowRadius: 12,
517
- elevation: 8
518
- },
519
- cardStyle
520
- ],
521
- children
522
- }
523
- )
524
- }
525
- )
526
- }
527
- );
528
- }
529
- function DialogTitle({ children, style, ...rest }) {
530
- const { tokens: t, baseTokens: bt } = useTheme();
531
- const { ids } = useDialogContext();
532
- return /* @__PURE__ */ jsxRuntime.jsx(
533
- reactNative.Text,
534
- {
535
- ...rest,
536
- nativeID: ids.title,
537
- style: [
538
- {
539
- fontSize: 18,
540
- fontWeight: "600",
541
- color: t.entropixColorTextPrimary,
542
- marginBottom: bt.entropixSpacing2
543
- },
544
- style
545
- ],
546
- accessibilityRole: "header",
547
- children
548
- }
549
- );
550
- }
551
- function DialogDescription({
552
- children,
553
- style,
554
- ...rest
555
- }) {
556
- const { tokens: t, baseTokens: bt } = useTheme();
557
- const { ids } = useDialogContext();
558
- return /* @__PURE__ */ jsxRuntime.jsx(
559
- reactNative.Text,
560
- {
561
- ...rest,
562
- nativeID: ids.description,
563
- style: [
564
- {
565
- fontSize: bt.entropixFontSizeSm,
566
- color: t.entropixColorTextSecondary,
567
- lineHeight: 20,
568
- marginBottom: bt.entropixSpacing4
569
- },
570
- style
571
- ],
572
- children
573
- }
574
- );
575
- }
576
- function DialogClose({ children, style, ...rest }) {
577
- const { tokens: t, baseTokens: bt } = useTheme();
578
- const { getCloseProps } = useDialogContext();
579
- const propGetterReturn = getCloseProps();
580
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
581
- const handlePress = react.useCallback(() => {
582
- propGetterReturn.onAction?.();
583
- }, [propGetterReturn.onAction]);
584
- return /* @__PURE__ */ jsxRuntime.jsx(
585
- reactNative.Pressable,
586
- {
587
- ...rnAccessibility,
588
- ...rest,
589
- onPress: handlePress,
590
- style: [
591
- {
592
- position: "absolute",
593
- top: bt.entropixSpacing3,
594
- right: bt.entropixSpacing3,
595
- width: 32,
596
- height: 32,
597
- alignItems: "center",
598
- justifyContent: "center",
599
- borderRadius: bt.entropixRadiusSm
600
- },
601
- style
602
- ],
603
- accessibilityRole: "button",
604
- children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
605
- reactNative.Text,
606
- {
607
- style: {
608
- fontSize: 16,
609
- color: t.entropixColorTextSecondary
610
- },
611
- children: "\u2715"
612
- }
613
- )
614
- }
615
- );
616
- }
617
- function DialogOverlay({ style, testID }) {
618
- const { isOpen, getOverlayProps } = useDialogContext();
619
- const propGetterReturn = getOverlayProps();
620
- const handlePress = react.useCallback(() => {
621
- propGetterReturn.onAction?.();
622
- }, [propGetterReturn.onAction]);
623
- if (!isOpen) return null;
624
- return /* @__PURE__ */ jsxRuntime.jsx(
625
- reactNative.Pressable,
626
- {
627
- testID,
628
- accessible: false,
629
- importantForAccessibility: "no",
630
- onPress: propGetterReturn.onAction ? handlePress : void 0,
631
- style: [
632
- {
633
- ...reactNative.StyleSheet.absoluteFillObject,
634
- backgroundColor: "rgba(0, 0, 0, 0.5)"
635
- },
636
- style
637
- ]
638
- }
639
- );
640
- }
641
- var TabsContext = react.createContext(null);
642
- function useTabsContext() {
643
- const context = react.useContext(TabsContext);
644
- if (!context) {
645
- throw new Error(
646
- "Tabs compound components must be used within a <Tabs> provider."
647
- );
648
- }
649
- return context;
650
- }
651
- function Tabs({ children, style, ...options }) {
652
- const tabs = core.useTabs(options);
653
- return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: tabs, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, children }) });
654
- }
655
- function TabList({ children, style }) {
656
- const { tokens: t, baseTokens: bt } = useTheme();
657
- const { getTabListProps } = useTabsContext();
658
- const propGetterReturn = getTabListProps();
659
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
660
- return /* @__PURE__ */ jsxRuntime.jsx(
661
- reactNative.View,
662
- {
663
- ...rnAccessibility,
664
- style: [
665
- {
666
- flexDirection: "row",
667
- gap: bt.entropixSpacing1,
668
- borderBottomWidth: 1,
669
- borderBottomColor: t.entropixColorBorderDefault
670
- },
671
- style
672
- ],
673
- children
674
- }
675
- );
676
- }
677
- function Tab({ value, children, style, textStyle, ...rest }) {
678
- const { tokens: t, baseTokens: bt } = useTheme();
679
- const { getTabProps, selectedKey } = useTabsContext();
680
- const propGetterReturn = getTabProps(value);
681
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
682
- const isActive = selectedKey === value;
683
- const isDisabled = propGetterReturn.accessibility.disabled === true;
684
- const handlePress = react.useCallback(() => {
685
- propGetterReturn.onAction?.();
686
- }, [propGetterReturn.onAction]);
687
- return /* @__PURE__ */ jsxRuntime.jsx(
688
- reactNative.Pressable,
689
- {
690
- ...rnAccessibility,
691
- ...rest,
692
- onPress: propGetterReturn.onAction ? handlePress : void 0,
693
- style: [
694
- {
695
- paddingVertical: bt.entropixSpacing2,
696
- paddingHorizontal: bt.entropixSpacing4,
697
- borderBottomWidth: 2,
698
- borderBottomColor: isActive ? t.entropixColorActionPrimaryDefault : "transparent"
699
- },
700
- isDisabled && { opacity: 0.5 },
701
- style
702
- ],
703
- children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
704
- reactNative.Text,
705
- {
706
- style: [
707
- {
708
- fontSize: bt.entropixFontSizeSm,
709
- fontWeight: "500",
710
- color: isActive ? t.entropixColorActionPrimaryDefault : t.entropixColorTextSecondary
711
- },
712
- textStyle
713
- ],
714
- children
715
- }
716
- ) : children
717
- }
718
- );
719
- }
720
- function TabPanel({ value, children, style }) {
721
- const { baseTokens: bt } = useTheme();
722
- const { getTabPanelProps, selectedKey } = useTabsContext();
723
- const propGetterReturn = getTabPanelProps(value);
724
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
725
- if (selectedKey !== value) return null;
726
- return /* @__PURE__ */ jsxRuntime.jsx(
727
- reactNative.View,
728
- {
729
- ...rnAccessibility,
730
- style: [{ padding: bt.entropixSpacing4 }, style],
731
- children
732
- }
733
- );
734
- }
735
- var AccordionContext = react.createContext(null);
736
- function useAccordionContext() {
737
- const context = react.useContext(AccordionContext);
738
- if (!context) {
739
- throw new Error(
740
- "Accordion compound components must be used within an <Accordion> provider."
741
- );
742
- }
743
- return context;
744
- }
745
- var AccordionItemContext = react.createContext(null);
746
- function useAccordionItemContext() {
747
- const context = react.useContext(AccordionItemContext);
748
- if (context === null) {
749
- throw new Error(
750
- "AccordionTrigger and AccordionPanel must be used within an <AccordionItem>."
751
- );
752
- }
753
- return context;
754
- }
755
- function Accordion({ children, style, ...options }) {
756
- const { tokens: t, baseTokens: bt } = useTheme();
757
- const accordion = core.useAccordion(options);
758
- return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: accordion, children: /* @__PURE__ */ jsxRuntime.jsx(
759
- reactNative.View,
760
- {
761
- style: [
762
- {
763
- borderWidth: 1,
764
- borderColor: t.entropixColorBorderDefault,
765
- borderRadius: bt.entropixRadiusLg,
766
- overflow: "hidden"
767
- },
768
- style
769
- ],
770
- children
771
- }
772
- ) });
773
- }
774
- function AccordionItem({
775
- value,
776
- isLast = false,
777
- children,
778
- style
779
- }) {
780
- const { tokens: t } = useTheme();
781
- return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
782
- reactNative.View,
783
- {
784
- style: [
785
- {
786
- borderBottomWidth: isLast ? 0 : 1,
787
- borderBottomColor: t.entropixColorBorderDefault
788
- },
789
- style
790
- ],
791
- children
792
- }
793
- ) });
794
- }
795
- function AccordionTrigger({
796
- children,
797
- style,
798
- textStyle,
799
- ...rest
800
- }) {
801
- const { tokens: t, baseTokens: bt } = useTheme();
802
- const itemKey = useAccordionItemContext();
803
- const { getItemTriggerProps, isExpanded } = useAccordionContext();
804
- const propGetterReturn = getItemTriggerProps(itemKey);
805
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
806
- const expanded = isExpanded(itemKey);
807
- const handlePress = react.useCallback(() => {
808
- propGetterReturn.onAction?.();
809
- }, [propGetterReturn.onAction]);
810
- return /* @__PURE__ */ jsxRuntime.jsxs(
811
- reactNative.Pressable,
812
- {
813
- ...rnAccessibility,
814
- ...rest,
815
- onPress: propGetterReturn.onAction ? handlePress : void 0,
816
- style: [
817
- {
818
- flexDirection: "row",
819
- alignItems: "center",
820
- justifyContent: "space-between",
821
- paddingVertical: bt.entropixSpacing4,
822
- paddingHorizontal: bt.entropixSpacing4
823
- },
824
- style
825
- ],
826
- children: [
827
- typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
828
- reactNative.Text,
829
- {
830
- style: [
831
- {
832
- fontSize: bt.entropixFontSizeSm,
833
- fontWeight: "500",
834
- color: t.entropixColorTextPrimary,
835
- flex: 1
836
- },
837
- textStyle
838
- ],
839
- children
840
- }
841
- ) : children,
842
- /* @__PURE__ */ jsxRuntime.jsx(
843
- reactNative.Text,
844
- {
845
- style: {
846
- fontSize: 12,
847
- color: t.entropixColorTextSecondary,
848
- marginLeft: bt.entropixSpacing2
849
- },
850
- children: expanded ? "\u2212" : "+"
851
- }
852
- )
853
- ]
854
- }
855
- );
856
- }
857
- function AccordionPanel({ children, style }) {
858
- const { baseTokens: bt } = useTheme();
859
- const itemKey = useAccordionItemContext();
860
- const { getItemPanelProps, isExpanded } = useAccordionContext();
861
- const propGetterReturn = getItemPanelProps(itemKey);
862
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
863
- if (!isExpanded(itemKey)) return null;
864
- return /* @__PURE__ */ jsxRuntime.jsx(
865
- reactNative.View,
866
- {
867
- ...rnAccessibility,
868
- style: [
869
- {
870
- paddingHorizontal: bt.entropixSpacing4,
871
- paddingBottom: bt.entropixSpacing4
872
- },
873
- style
874
- ],
875
- children
876
- }
877
- );
878
- }
879
- var MenuContext = react.createContext(null);
880
- function useMenuContext() {
881
- const context = react.useContext(MenuContext);
882
- if (!context) {
883
- throw new Error(
884
- "Menu compound components must be used within a <Menu> provider."
885
- );
886
- }
887
- return context;
888
- }
889
- function Menu({ children, ...options }) {
890
- const menu = core.useMenu(options);
891
- return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: menu, children });
892
- }
893
- function MenuTrigger({ children, style, ...rest }) {
894
- const { getTriggerProps } = useMenuContext();
895
- const propGetterReturn = getTriggerProps();
896
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
897
- const handlePress = react.useCallback(() => {
898
- propGetterReturn.onAction?.();
899
- }, [propGetterReturn.onAction]);
900
- return /* @__PURE__ */ jsxRuntime.jsx(
901
- reactNative.Pressable,
902
- {
903
- ...rnAccessibility,
904
- ...rest,
905
- onPress: handlePress,
906
- style,
907
- children
908
- }
909
- );
910
- }
911
- function MenuContent({ children, style, testID }) {
912
- const { tokens: t, baseTokens: bt } = useTheme();
913
- const { isOpen, getMenuProps } = useMenuContext();
914
- const propGetterReturn = getMenuProps();
915
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
916
- if (!isOpen) return null;
917
- return /* @__PURE__ */ jsxRuntime.jsx(
918
- reactNative.View,
919
- {
920
- ...rnAccessibility,
921
- testID,
922
- style: [
923
- {
924
- minWidth: 160,
925
- padding: bt.entropixSpacing1,
926
- backgroundColor: t.entropixColorBgPrimary,
927
- borderWidth: 1,
928
- borderColor: t.entropixColorBorderDefault,
929
- borderRadius: bt.entropixRadiusMd,
930
- shadowColor: "#000",
931
- shadowOffset: { width: 0, height: 2 },
932
- shadowOpacity: 0.1,
933
- shadowRadius: 8,
934
- elevation: 4
935
- },
936
- style
937
- ],
938
- children
939
- }
940
- );
941
- }
942
- function wrapStringChildren(children, style) {
943
- if (typeof children === "string" || typeof children === "number") {
944
- return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style, children });
945
- }
946
- return children;
947
- }
948
- function MenuItem({
949
- index,
950
- onSelect,
951
- disabled,
952
- children,
953
- style,
954
- textStyle,
955
- ...rest
956
- }) {
957
- const { tokens: t, baseTokens: bt } = useTheme();
958
- const { getItemProps } = useMenuContext();
959
- const propGetterReturn = getItemProps(index, { onSelect, disabled });
960
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
961
- const handlePress = react.useCallback(() => {
962
- propGetterReturn.onAction?.();
963
- }, [propGetterReturn.onAction]);
964
- return /* @__PURE__ */ jsxRuntime.jsx(
965
- reactNative.Pressable,
966
- {
967
- ...rnAccessibility,
968
- ...rest,
969
- disabled,
970
- onPress: propGetterReturn.onAction ? handlePress : void 0,
971
- style: [
972
- {
973
- flexDirection: "row",
974
- alignItems: "center",
975
- paddingVertical: bt.entropixSpacing2,
976
- paddingHorizontal: bt.entropixSpacing3,
977
- borderRadius: bt.entropixRadiusSm,
978
- opacity: disabled ? 0.5 : 1
979
- },
980
- style
981
- ],
982
- children: wrapStringChildren(children, {
983
- fontSize: bt.entropixFontSizeSm,
984
- color: t.entropixColorTextPrimary,
985
- ...textStyle
986
- })
987
- }
988
- );
989
- }
990
- var KEYBOARD_TYPE_MAP = {
991
- text: "default",
992
- email: "email-address",
993
- password: "default",
994
- number: "numeric",
995
- tel: "phone-pad",
996
- url: "url",
997
- search: "default"
998
- };
999
- function Input({
1000
- value,
1001
- defaultValue,
1002
- onChange,
1003
- disabled,
1004
- readOnly,
1005
- required,
1006
- invalid,
1007
- label,
1008
- helperText,
1009
- errorMessage,
1010
- placeholder,
1011
- type = "text",
1012
- size = "md",
1013
- style,
1014
- inputStyle,
1015
- textStyle,
1016
- testID,
1017
- variant: _variant
1018
- }) {
1019
- const { tokens: t, baseTokens: bt } = useTheme();
1020
- const {
1021
- value: inputValue,
1022
- isDisabled,
1023
- isReadOnly,
1024
- isInvalid,
1025
- setValue,
1026
- getInputProps
1027
- } = core.useInput({
1028
- value,
1029
- defaultValue,
1030
- onChange,
1031
- disabled,
1032
- readOnly,
1033
- required,
1034
- invalid,
1035
- type,
1036
- placeholder
1037
- });
1038
- const propGetterReturn = getInputProps();
1039
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1040
- const handleChangeText = react.useCallback(
1041
- (text) => {
1042
- setValue(text);
1043
- },
1044
- [setValue]
1045
- );
1046
- const sizeStyles = getSizeStyles(size, bt);
1047
- const showError = isInvalid && errorMessage;
1048
- return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [{ gap: bt.entropixSpacing1 }, style], children: [
1049
- label ? /* @__PURE__ */ jsxRuntime.jsxs(
1050
- reactNative.Text,
1051
- {
1052
- style: [
1053
- {
1054
- fontSize: sizeStyles.labelFontSize,
1055
- fontWeight: "500",
1056
- color: t.entropixColorTextPrimary
1057
- },
1058
- textStyle
1059
- ],
1060
- children: [
1061
- label,
1062
- required ? " *" : ""
1063
- ]
1064
- }
1065
- ) : null,
1066
- /* @__PURE__ */ jsxRuntime.jsx(
1067
- reactNative.TextInput,
1068
- {
1069
- ...rnAccessibility,
1070
- testID,
1071
- value: inputValue,
1072
- onChangeText: handleChangeText,
1073
- placeholder,
1074
- placeholderTextColor: t.entropixColorTextTertiary,
1075
- editable: !isDisabled && !isReadOnly,
1076
- secureTextEntry: type === "password",
1077
- keyboardType: KEYBOARD_TYPE_MAP[type] ?? "default",
1078
- style: [
1079
- {
1080
- paddingVertical: sizeStyles.paddingVertical,
1081
- paddingHorizontal: sizeStyles.paddingHorizontal,
1082
- fontSize: sizeStyles.fontSize,
1083
- borderWidth: 1,
1084
- borderColor: showError ? t.entropixColorBorderDanger : t.entropixColorBorderDefault,
1085
- borderRadius: bt.entropixRadiusMd,
1086
- backgroundColor: t.entropixColorBgPrimary,
1087
- color: t.entropixColorTextPrimary
1088
- },
1089
- isDisabled && { opacity: 0.5 },
1090
- inputStyle
1091
- ]
1092
- }
1093
- ),
1094
- showError ? /* @__PURE__ */ jsxRuntime.jsx(
1095
- reactNative.Text,
1096
- {
1097
- style: [
1098
- {
1099
- fontSize: sizeStyles.helperFontSize,
1100
- color: t.entropixColorTextDanger
1101
- },
1102
- textStyle
1103
- ],
1104
- accessibilityRole: "alert",
1105
- accessibilityLiveRegion: "polite",
1106
- children: errorMessage
1107
- }
1108
- ) : helperText ? /* @__PURE__ */ jsxRuntime.jsx(
1109
- reactNative.Text,
1110
- {
1111
- style: [
1112
- {
1113
- fontSize: sizeStyles.helperFontSize,
1114
- color: t.entropixColorTextSecondary
1115
- },
1116
- textStyle
1117
- ],
1118
- children: helperText
1119
- }
1120
- ) : null
1121
- ] });
1122
- }
1123
- function getSizeStyles(size, bt) {
1124
- switch (size) {
1125
- case "sm":
1126
- return {
1127
- paddingVertical: bt.entropixSpacing1,
1128
- paddingHorizontal: bt.entropixSpacing2,
1129
- fontSize: bt.entropixFontSizeXs,
1130
- labelFontSize: bt.entropixFontSizeXs,
1131
- helperFontSize: bt.entropixFontSizeXs - 1
1132
- };
1133
- case "lg":
1134
- return {
1135
- paddingVertical: bt.entropixSpacing3,
1136
- paddingHorizontal: bt.entropixSpacing4,
1137
- fontSize: bt.entropixFontSizeBase,
1138
- labelFontSize: bt.entropixFontSizeBase,
1139
- helperFontSize: bt.entropixFontSizeSm
1140
- };
1141
- default:
1142
- return {
1143
- paddingVertical: bt.entropixSpacing2,
1144
- paddingHorizontal: bt.entropixSpacing3,
1145
- fontSize: bt.entropixFontSizeSm,
1146
- labelFontSize: bt.entropixFontSizeSm,
1147
- helperFontSize: bt.entropixFontSizeXs
1148
- };
1149
- }
1150
- }
1151
- function Textarea({
1152
- value,
1153
- defaultValue,
1154
- onChange,
1155
- disabled,
1156
- readOnly,
1157
- required,
1158
- invalid,
1159
- label,
1160
- helperText,
1161
- errorMessage,
1162
- placeholder,
1163
- numberOfLines = 4,
1164
- size = "md",
1165
- style,
1166
- inputStyle,
1167
- textStyle,
1168
- testID
1169
- }) {
1170
- const { tokens: t, baseTokens: bt } = useTheme();
1171
- const {
1172
- value: inputValue,
1173
- isDisabled,
1174
- isReadOnly,
1175
- isInvalid,
1176
- setValue,
1177
- getInputProps
1178
- } = core.useInput({
1179
- value,
1180
- defaultValue,
1181
- onChange,
1182
- disabled,
1183
- readOnly,
1184
- required,
1185
- invalid,
1186
- type: "text",
1187
- placeholder
1188
- });
1189
- const propGetterReturn = getInputProps();
1190
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1191
- const handleChangeText = react.useCallback(
1192
- (text) => {
1193
- setValue(text);
1194
- },
1195
- [setValue]
1196
- );
1197
- const sizeStyles = getSizeStyles2(size, bt);
1198
- const showError = isInvalid && errorMessage;
1199
- return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [{ gap: bt.entropixSpacing1 }, style], children: [
1200
- label ? /* @__PURE__ */ jsxRuntime.jsxs(
1201
- reactNative.Text,
1202
- {
1203
- style: [
1204
- {
1205
- fontSize: sizeStyles.labelFontSize,
1206
- fontWeight: "500",
1207
- color: t.entropixColorTextPrimary
1208
- },
1209
- textStyle
1210
- ],
1211
- children: [
1212
- label,
1213
- required ? " *" : ""
1214
- ]
1215
- }
1216
- ) : null,
1217
- /* @__PURE__ */ jsxRuntime.jsx(
1218
- reactNative.TextInput,
1219
- {
1220
- ...rnAccessibility,
1221
- testID,
1222
- value: inputValue,
1223
- onChangeText: handleChangeText,
1224
- placeholder,
1225
- placeholderTextColor: t.entropixColorTextTertiary,
1226
- editable: !isDisabled && !isReadOnly,
1227
- multiline: true,
1228
- numberOfLines,
1229
- textAlignVertical: "top",
1230
- style: [
1231
- {
1232
- paddingVertical: sizeStyles.paddingVertical,
1233
- paddingHorizontal: sizeStyles.paddingHorizontal,
1234
- fontSize: sizeStyles.fontSize,
1235
- borderWidth: 1,
1236
- borderColor: showError ? t.entropixColorBorderDanger : t.entropixColorBorderDefault,
1237
- borderRadius: bt.entropixRadiusMd,
1238
- backgroundColor: t.entropixColorBgPrimary,
1239
- color: t.entropixColorTextPrimary,
1240
- minHeight: numberOfLines * (sizeStyles.fontSize + 8)
1241
- },
1242
- isDisabled && { opacity: 0.5 },
1243
- inputStyle
1244
- ]
1245
- }
1246
- ),
1247
- showError ? /* @__PURE__ */ jsxRuntime.jsx(
1248
- reactNative.Text,
1249
- {
1250
- style: [
1251
- {
1252
- fontSize: sizeStyles.helperFontSize,
1253
- color: t.entropixColorTextDanger
1254
- },
1255
- textStyle
1256
- ],
1257
- accessibilityRole: "alert",
1258
- accessibilityLiveRegion: "polite",
1259
- children: errorMessage
1260
- }
1261
- ) : helperText ? /* @__PURE__ */ jsxRuntime.jsx(
1262
- reactNative.Text,
1263
- {
1264
- style: [
1265
- {
1266
- fontSize: sizeStyles.helperFontSize,
1267
- color: t.entropixColorTextSecondary
1268
- },
1269
- textStyle
1270
- ],
1271
- children: helperText
1272
- }
1273
- ) : null
1274
- ] });
1275
- }
1276
- function getSizeStyles2(size, bt) {
1277
- switch (size) {
1278
- case "sm":
1279
- return {
1280
- paddingVertical: bt.entropixSpacing1,
1281
- paddingHorizontal: bt.entropixSpacing2,
1282
- fontSize: bt.entropixFontSizeXs,
1283
- labelFontSize: bt.entropixFontSizeXs,
1284
- helperFontSize: bt.entropixFontSizeXs - 1
1285
- };
1286
- case "lg":
1287
- return {
1288
- paddingVertical: bt.entropixSpacing3,
1289
- paddingHorizontal: bt.entropixSpacing4,
1290
- fontSize: bt.entropixFontSizeBase,
1291
- labelFontSize: bt.entropixFontSizeBase,
1292
- helperFontSize: bt.entropixFontSizeSm
1293
- };
1294
- default:
1295
- return {
1296
- paddingVertical: bt.entropixSpacing2,
1297
- paddingHorizontal: bt.entropixSpacing3,
1298
- fontSize: bt.entropixFontSizeSm,
1299
- labelFontSize: bt.entropixFontSizeSm,
1300
- helperFontSize: bt.entropixFontSizeXs
1301
- };
1302
- }
1303
- }
1304
- function Checkbox({
1305
- checked,
1306
- defaultChecked,
1307
- onChange,
1308
- disabled,
1309
- indeterminate,
1310
- label,
1311
- size = "md",
1312
- style,
1313
- textStyle,
1314
- children,
1315
- ...rest
1316
- }) {
1317
- const { tokens: t, baseTokens: bt } = useTheme();
1318
- const { isChecked, isDisabled, getToggleProps } = core.useToggle({
1319
- checked,
1320
- defaultChecked,
1321
- onChange,
1322
- disabled,
1323
- role: "checkbox"
1324
- });
1325
- const propGetterReturn = getToggleProps();
1326
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1327
- if (indeterminate) {
1328
- rnAccessibility.accessibilityState = {
1329
- ...rnAccessibility.accessibilityState,
1330
- checked: "mixed"
1331
- };
1332
- }
1333
- if (label) {
1334
- rnAccessibility.accessibilityLabel = label;
1335
- }
1336
- const handlePress = react.useCallback(() => {
1337
- propGetterReturn.onAction?.();
1338
- }, [propGetterReturn.onAction]);
1339
- const sizeStyles = getSizeStyles3(size, bt);
1340
- const isActive = indeterminate || isChecked;
1341
- return /* @__PURE__ */ jsxRuntime.jsxs(
1342
- reactNative.Pressable,
1343
- {
1344
- ...rnAccessibility,
1345
- ...rest,
1346
- disabled: isDisabled,
1347
- onPress: isDisabled ? void 0 : handlePress,
1348
- style: [
1349
- {
1350
- flexDirection: "row",
1351
- alignItems: "center",
1352
- gap: bt.entropixSpacing2
1353
- },
1354
- isDisabled && { opacity: 0.5 },
1355
- style
1356
- ],
1357
- children: [
1358
- /* @__PURE__ */ jsxRuntime.jsx(
1359
- reactNative.View,
1360
- {
1361
- style: {
1362
- width: sizeStyles.boxSize,
1363
- height: sizeStyles.boxSize,
1364
- borderWidth: 2,
1365
- borderColor: isActive ? t.entropixColorActionPrimaryDefault : t.entropixColorBorderDefault,
1366
- borderRadius: bt.entropixRadiusSm,
1367
- backgroundColor: isActive ? t.entropixColorActionPrimaryDefault : "transparent",
1368
- alignItems: "center",
1369
- justifyContent: "center"
1370
- },
1371
- children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
1372
- reactNative.Text,
1373
- {
1374
- style: {
1375
- fontSize: sizeStyles.indicatorFontSize,
1376
- fontWeight: "700",
1377
- color: t.entropixColorTextInverse,
1378
- lineHeight: sizeStyles.boxSize - 2
1379
- },
1380
- children: "\u2013"
1381
- }
1382
- ) : isChecked ? /* @__PURE__ */ jsxRuntime.jsx(
1383
- reactNative.Text,
1384
- {
1385
- style: {
1386
- fontSize: sizeStyles.indicatorFontSize,
1387
- fontWeight: "700",
1388
- color: t.entropixColorTextInverse,
1389
- lineHeight: sizeStyles.boxSize - 2
1390
- },
1391
- children: "\u2713"
1392
- }
1393
- ) : null
1394
- }
1395
- ),
1396
- typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1397
- reactNative.Text,
1398
- {
1399
- style: [
1400
- {
1401
- fontSize: sizeStyles.fontSize,
1402
- color: t.entropixColorTextPrimary
1403
- },
1404
- textStyle
1405
- ],
1406
- children
1407
- }
1408
- ) : children != null ? children : label ? /* @__PURE__ */ jsxRuntime.jsx(
1409
- reactNative.Text,
1410
- {
1411
- style: [
1412
- {
1413
- fontSize: sizeStyles.fontSize,
1414
- color: t.entropixColorTextPrimary
1415
- },
1416
- textStyle
1417
- ],
1418
- children: label
1419
- }
1420
- ) : null
1421
- ]
1422
- }
1423
- );
1424
- }
1425
- function getSizeStyles3(size, bt) {
1426
- switch (size) {
1427
- case "sm":
1428
- return {
1429
- boxSize: 16,
1430
- indicatorFontSize: 10,
1431
- fontSize: bt.entropixFontSizeXs
1432
- };
1433
- case "lg":
1434
- return {
1435
- boxSize: 24,
1436
- indicatorFontSize: 16,
1437
- fontSize: bt.entropixFontSizeBase
1438
- };
1439
- default:
1440
- return {
1441
- boxSize: 20,
1442
- indicatorFontSize: 13,
1443
- fontSize: bt.entropixFontSizeSm
1444
- };
1445
- }
1446
- }
1447
- var RadioGroupContext = react.createContext(null);
1448
- function useRadioGroupContext() {
1449
- const context = react.useContext(RadioGroupContext);
1450
- if (!context) {
1451
- throw new Error(
1452
- "Radio compound components must be used within a <RadioGroup> provider."
1453
- );
1454
- }
1455
- return context;
1456
- }
1457
- function RadioGroup({
1458
- label,
1459
- style,
1460
- textStyle,
1461
- children,
1462
- testID,
1463
- ...options
1464
- }) {
1465
- const { tokens: t, baseTokens: bt } = useTheme();
1466
- const radioGroup = core.useRadioGroup(options);
1467
- const propGetterReturn = radioGroup.getRadioGroupProps();
1468
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1469
- if (label) {
1470
- rnAccessibility.accessibilityLabel = label;
1471
- }
1472
- return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: radioGroup, children: /* @__PURE__ */ jsxRuntime.jsxs(
1473
- reactNative.View,
1474
- {
1475
- ...rnAccessibility,
1476
- testID,
1477
- style: [
1478
- {
1479
- gap: bt.entropixSpacing2
1480
- },
1481
- style
1482
- ],
1483
- children: [
1484
- label ? /* @__PURE__ */ jsxRuntime.jsx(
1485
- reactNative.Text,
1486
- {
1487
- style: [
1488
- {
1489
- fontSize: bt.entropixFontSizeSm,
1490
- fontWeight: "500",
1491
- color: t.entropixColorTextPrimary
1492
- },
1493
- textStyle
1494
- ],
1495
- children: label
1496
- }
1497
- ) : null,
1498
- children
1499
- ]
1500
- }
1501
- ) });
1502
- }
1503
- function RadioItem({
1504
- value,
1505
- disabled,
1506
- style,
1507
- textStyle,
1508
- children,
1509
- ...rest
1510
- }) {
1511
- const { tokens: t, baseTokens: bt } = useTheme();
1512
- const { getRadioProps } = useRadioGroupContext();
1513
- const propGetterReturn = getRadioProps(value, { disabled });
1514
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1515
- const isChecked = propGetterReturn.accessibility.checked === true;
1516
- const isDisabled = propGetterReturn.accessibility.disabled === true;
1517
- const handlePress = react.useCallback(() => {
1518
- propGetterReturn.onAction?.();
1519
- }, [propGetterReturn.onAction]);
1520
- return /* @__PURE__ */ jsxRuntime.jsxs(
1521
- reactNative.Pressable,
1522
- {
1523
- ...rnAccessibility,
1524
- ...rest,
1525
- disabled: isDisabled,
1526
- onPress: isDisabled ? void 0 : handlePress,
1527
- style: [
1528
- {
1529
- flexDirection: "row",
1530
- alignItems: "center",
1531
- gap: bt.entropixSpacing2
1532
- },
1533
- isDisabled && { opacity: 0.5 },
1534
- style
1535
- ],
1536
- children: [
1537
- /* @__PURE__ */ jsxRuntime.jsx(
1538
- reactNative.View,
1539
- {
1540
- style: {
1541
- width: 20,
1542
- height: 20,
1543
- borderRadius: 10,
1544
- borderWidth: 2,
1545
- borderColor: isChecked ? t.entropixColorActionPrimaryDefault : t.entropixColorBorderDefault,
1546
- alignItems: "center",
1547
- justifyContent: "center"
1548
- },
1549
- children: isChecked ? /* @__PURE__ */ jsxRuntime.jsx(
1550
- reactNative.View,
1551
- {
1552
- style: {
1553
- width: 10,
1554
- height: 10,
1555
- borderRadius: 5,
1556
- backgroundColor: t.entropixColorActionPrimaryDefault
1557
- }
1558
- }
1559
- ) : null
1560
- }
1561
- ),
1562
- typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1563
- reactNative.Text,
1564
- {
1565
- style: [
1566
- {
1567
- fontSize: bt.entropixFontSizeSm,
1568
- color: t.entropixColorTextPrimary
1569
- },
1570
- textStyle
1571
- ],
1572
- children
1573
- }
1574
- ) : children
1575
- ]
1576
- }
1577
- );
1578
- }
1579
- var SelectContext = react.createContext(null);
1580
- function useSelectContext() {
1581
- const context = react.useContext(SelectContext);
1582
- if (!context) {
1583
- throw new Error(
1584
- "Select compound components must be used within a <Select> provider."
1585
- );
1586
- }
1587
- return context;
1588
- }
1589
- function Select({
1590
- label,
1591
- style,
1592
- textStyle,
1593
- children,
1594
- testID,
1595
- ...options
1596
- }) {
1597
- const { tokens: t, baseTokens: bt } = useTheme();
1598
- const select = core.useSelect(options);
1599
- return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: select, children: /* @__PURE__ */ jsxRuntime.jsxs(
1600
- reactNative.View,
1601
- {
1602
- testID,
1603
- style: [{ gap: bt.entropixSpacing1 }, style],
1604
- children: [
1605
- label ? /* @__PURE__ */ jsxRuntime.jsx(
1606
- reactNative.Text,
1607
- {
1608
- style: [
1609
- {
1610
- fontSize: bt.entropixFontSizeSm,
1611
- fontWeight: "500",
1612
- color: t.entropixColorTextPrimary
1613
- },
1614
- textStyle
1615
- ],
1616
- children: label
1617
- }
1618
- ) : null,
1619
- children
1620
- ]
1621
- }
1622
- ) });
1623
- }
1624
- function SelectTrigger({
1625
- placeholder = "Select...",
1626
- displayValue,
1627
- style,
1628
- textStyle,
1629
- ...rest
1630
- }) {
1631
- const { tokens: t, baseTokens: bt } = useTheme();
1632
- const { selectedValue, isDisabled, isOpen, getTriggerProps } = useSelectContext();
1633
- const propGetterReturn = getTriggerProps();
1634
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1635
- const handlePress = react.useCallback(() => {
1636
- propGetterReturn.onAction?.();
1637
- }, [propGetterReturn.onAction]);
1638
- const hasValue = selectedValue !== "";
1639
- const label = displayValue ?? (hasValue ? selectedValue : placeholder);
1640
- return /* @__PURE__ */ jsxRuntime.jsxs(
1641
- reactNative.Pressable,
1642
- {
1643
- ...rnAccessibility,
1644
- ...rest,
1645
- disabled: isDisabled,
1646
- onPress: isDisabled ? void 0 : handlePress,
1647
- style: [
1648
- {
1649
- flexDirection: "row",
1650
- alignItems: "center",
1651
- justifyContent: "space-between",
1652
- paddingVertical: bt.entropixSpacing2,
1653
- paddingHorizontal: bt.entropixSpacing3,
1654
- borderWidth: 1,
1655
- borderColor: isOpen ? t.entropixColorActionPrimaryDefault : t.entropixColorBorderDefault,
1656
- borderRadius: bt.entropixRadiusMd,
1657
- backgroundColor: t.entropixColorBgPrimary
1658
- },
1659
- isDisabled && { opacity: 0.5 },
1660
- style
1661
- ],
1662
- children: [
1663
- /* @__PURE__ */ jsxRuntime.jsx(
1664
- reactNative.Text,
1665
- {
1666
- style: [
1667
- {
1668
- fontSize: bt.entropixFontSizeSm,
1669
- color: hasValue ? t.entropixColorTextPrimary : t.entropixColorTextTertiary,
1670
- flex: 1
1671
- },
1672
- textStyle
1673
- ],
1674
- numberOfLines: 1,
1675
- children: label
1676
- }
1677
- ),
1678
- /* @__PURE__ */ jsxRuntime.jsx(
1679
- reactNative.Text,
1680
- {
1681
- style: {
1682
- fontSize: bt.entropixFontSizeXs,
1683
- color: t.entropixColorTextSecondary,
1684
- marginLeft: bt.entropixSpacing2
1685
- },
1686
- children: "\u25BC"
1687
- }
1688
- )
1689
- ]
1690
- }
1691
- );
1692
- }
1693
- function SelectContent({ children, style, testID }) {
1694
- const { tokens: t, baseTokens: bt } = useTheme();
1695
- const { isOpen, close, getListboxProps } = useSelectContext();
1696
- const propGetterReturn = getListboxProps();
1697
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1698
- if (!isOpen) return null;
1699
- return /* @__PURE__ */ jsxRuntime.jsx(
1700
- reactNative.Modal,
1701
- {
1702
- visible: isOpen,
1703
- transparent: true,
1704
- animationType: "fade",
1705
- onRequestClose: close,
1706
- children: /* @__PURE__ */ jsxRuntime.jsx(
1707
- reactNative.Pressable,
1708
- {
1709
- style: {
1710
- flex: 1,
1711
- justifyContent: "center",
1712
- alignItems: "center",
1713
- backgroundColor: "rgba(0,0,0,0.3)"
1714
- },
1715
- onPress: close,
1716
- children: /* @__PURE__ */ jsxRuntime.jsx(
1717
- reactNative.Pressable,
1718
- {
1719
- onPress: () => {
1720
- },
1721
- children: /* @__PURE__ */ jsxRuntime.jsx(
1722
- reactNative.View,
1723
- {
1724
- ...rnAccessibility,
1725
- testID,
1726
- style: [
1727
- {
1728
- minWidth: 240,
1729
- maxHeight: 300,
1730
- padding: bt.entropixSpacing1,
1731
- backgroundColor: t.entropixColorBgPrimary,
1732
- borderWidth: 1,
1733
- borderColor: t.entropixColorBorderDefault,
1734
- borderRadius: bt.entropixRadiusMd,
1735
- shadowColor: "#000",
1736
- shadowOffset: { width: 0, height: 4 },
1737
- shadowOpacity: 0.15,
1738
- shadowRadius: 12,
1739
- elevation: 8
1740
- },
1741
- style
1742
- ],
1743
- children
1744
- }
1745
- )
1746
- }
1747
- )
1748
- }
1749
- )
1750
- }
1751
- );
1752
- }
1753
- function SelectOption({
1754
- value,
1755
- index,
1756
- disabled,
1757
- style,
1758
- textStyle,
1759
- children,
1760
- ...rest
1761
- }) {
1762
- const { tokens: t, baseTokens: bt } = useTheme();
1763
- const { getOptionProps } = useSelectContext();
1764
- const propGetterReturn = getOptionProps(value, index ?? 0, { disabled });
1765
- const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1766
- const isSelected = propGetterReturn.accessibility.selected === true;
1767
- const handlePress = react.useCallback(() => {
1768
- propGetterReturn.onAction?.();
1769
- }, [propGetterReturn.onAction]);
1770
- return /* @__PURE__ */ jsxRuntime.jsx(
1771
- reactNative.Pressable,
1772
- {
1773
- ...rnAccessibility,
1774
- ...rest,
1775
- disabled,
1776
- onPress: propGetterReturn.onAction ? handlePress : void 0,
1777
- style: [
1778
- {
1779
- flexDirection: "row",
1780
- alignItems: "center",
1781
- paddingVertical: bt.entropixSpacing2,
1782
- paddingHorizontal: bt.entropixSpacing3,
1783
- borderRadius: bt.entropixRadiusSm,
1784
- backgroundColor: isSelected ? t.entropixColorBgSecondary : "transparent"
1785
- },
1786
- disabled && { opacity: 0.5 },
1787
- style
1788
- ],
1789
- children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1790
- reactNative.Text,
1791
- {
1792
- style: [
1793
- {
1794
- fontSize: bt.entropixFontSizeSm,
1795
- fontWeight: isSelected ? "600" : "400",
1796
- color: t.entropixColorTextPrimary
1797
- },
1798
- textStyle
1799
- ],
1800
- children
1801
- }
1802
- ) : children
1803
- }
1804
- );
1805
- }
1806
- var BREAKPOINTS = {
1807
- sm: 640,
1808
- md: 768,
1809
- lg: 1024,
1810
- xl: 1280,
1811
- "2xl": 1536
1812
- };
1813
- var BREAKPOINT_ORDER = ["base", "sm", "md", "lg", "xl", "2xl"];
1814
- function useBreakpoint() {
1815
- const getBreakpoint = react.useCallback(() => {
1816
- const { width } = reactNative.Dimensions.get("window");
1817
- if (width >= BREAKPOINTS["2xl"]) return "2xl";
1818
- if (width >= BREAKPOINTS.xl) return "xl";
1819
- if (width >= BREAKPOINTS.lg) return "lg";
1820
- if (width >= BREAKPOINTS.md) return "md";
1821
- if (width >= BREAKPOINTS.sm) return "sm";
1822
- return "base";
1823
- }, []);
1824
- const [breakpoint, setBreakpoint] = react.useState(getBreakpoint);
1825
- react.useEffect(() => {
1826
- const subscription = reactNative.Dimensions.addEventListener("change", ({ window }) => {
1827
- const width = window.width;
1828
- let next = "base";
1829
- if (width >= BREAKPOINTS["2xl"]) next = "2xl";
1830
- else if (width >= BREAKPOINTS.xl) next = "xl";
1831
- else if (width >= BREAKPOINTS.lg) next = "lg";
1832
- else if (width >= BREAKPOINTS.md) next = "md";
1833
- else if (width >= BREAKPOINTS.sm) next = "sm";
1834
- setBreakpoint((prev) => prev !== next ? next : prev);
1835
- });
1836
- return () => subscription.remove();
1837
- }, []);
1838
- return breakpoint;
1839
- }
1840
- function useBreakpointValue(breakpoint) {
1841
- const current = useBreakpoint();
1842
- const currentIndex = BREAKPOINT_ORDER.indexOf(current);
1843
- const targetIndex = BREAKPOINT_ORDER.indexOf(breakpoint);
1844
- return currentIndex >= targetIndex;
1845
- }
1846
- function useScreenDimensions() {
1847
- const [dimensions, setDimensions] = react.useState(() => reactNative.Dimensions.get("window"));
1848
- react.useEffect(() => {
1849
- const subscription = reactNative.Dimensions.addEventListener("change", ({ window }) => {
1850
- setDimensions(window);
1851
- });
1852
- return () => subscription.remove();
1853
- }, []);
1854
- return { width: dimensions.width, height: dimensions.height };
1855
- }
1856
- function Stack({
1857
- gap,
1858
- align,
1859
- fullWidth,
1860
- style,
1861
- children,
1862
- ...rest
1863
- }) {
1864
- const { baseTokens: bt } = useTheme();
1865
- const gapValue = getGapValue(gap, bt);
1866
- const alignMap = {
1867
- start: "flex-start",
1868
- center: "center",
1869
- end: "flex-end",
1870
- stretch: "stretch"
1871
- };
1872
- return /* @__PURE__ */ jsxRuntime.jsx(
1873
- reactNative.View,
1874
- {
1875
- style: [
1876
- { flexDirection: "column" },
1877
- gapValue !== void 0 && { gap: gapValue },
1878
- gapValue === void 0 && { gap: bt.entropixSpaceLayoutStack },
1879
- align && { alignItems: alignMap[align] },
1880
- fullWidth && { width: "100%" },
1881
- style
1882
- ],
1883
- ...rest,
1884
- children
1885
- }
1886
- );
1887
- }
1888
- function getGapValue(gap, bt) {
1889
- if (!gap) return void 0;
1890
- switch (gap) {
1891
- case "none":
1892
- return 0;
1893
- case "xs":
1894
- return bt.entropixSpacing1;
1895
- case "sm":
1896
- return bt.entropixSpacing2;
1897
- case "md":
1898
- return bt.entropixSpacing4;
1899
- case "lg":
1900
- return bt.entropixSpacing6;
1901
- case "xl":
1902
- return bt.entropixSpacing8;
1903
- case "2xl":
1904
- return bt.entropixSpacing12;
1905
- }
1906
- }
1907
- function Inline({
1908
- gap,
1909
- align,
1910
- justify,
1911
- wrap,
1912
- style,
1913
- children,
1914
- ...rest
1915
- }) {
1916
- const { baseTokens: bt } = useTheme();
1917
- const gapValue = getGapValue2(gap, bt);
1918
- const alignMap = {
1919
- start: "flex-start",
1920
- center: "center",
1921
- end: "flex-end",
1922
- stretch: "stretch",
1923
- baseline: "baseline"
1924
- };
1925
- const justifyMap = {
1926
- start: "flex-start",
1927
- center: "center",
1928
- end: "flex-end",
1929
- between: "space-between",
1930
- around: "space-around"
1931
- };
1932
- return /* @__PURE__ */ jsxRuntime.jsx(
1933
- reactNative.View,
1934
- {
1935
- style: [
1936
- {
1937
- flexDirection: "row",
1938
- alignItems: "center"
1939
- },
1940
- gapValue !== void 0 && { gap: gapValue },
1941
- gapValue === void 0 && { gap: bt.entropixSpaceLayoutInline },
1942
- align && { alignItems: alignMap[align] },
1943
- justify && { justifyContent: justifyMap[justify] },
1944
- wrap && { flexWrap: "wrap" },
1945
- style
1946
- ],
1947
- ...rest,
1948
- children
1949
- }
1950
- );
1951
- }
1952
- function getGapValue2(gap, bt) {
1953
- if (!gap) return void 0;
1954
- switch (gap) {
1955
- case "none":
1956
- return 0;
1957
- case "xs":
1958
- return bt.entropixSpacing1;
1959
- case "sm":
1960
- return bt.entropixSpacing2;
1961
- case "md":
1962
- return bt.entropixSpacing4;
1963
- case "lg":
1964
- return bt.entropixSpacing6;
1965
- case "xl":
1966
- return bt.entropixSpacing8;
1967
- case "2xl":
1968
- return bt.entropixSpacing12;
1969
- }
1970
- }
1971
- var maxWidthMap = {
1972
- xs: 480,
1973
- sm: 640,
1974
- md: 768,
1975
- lg: 1024,
1976
- xl: 1280,
1977
- full: void 0
1978
- };
1979
- function Container({
1980
- maxWidth = "lg",
1981
- center,
1982
- style,
1983
- children,
1984
- ...rest
1985
- }) {
1986
- const { baseTokens: bt } = useTheme();
1987
- const breakpoint = useBreakpoint();
1988
- const maxW = maxWidthMap[maxWidth];
1989
- let pageMargin = bt.entropixSpaceLayoutPageMargin;
1990
- if (breakpoint === "lg" || breakpoint === "xl" || breakpoint === "2xl") {
1991
- pageMargin = bt.entropixSpaceLayoutPageMarginLg;
1992
- } else if (breakpoint === "md") {
1993
- pageMargin = bt.entropixSpaceLayoutPageMarginMd;
1994
- }
1995
- return /* @__PURE__ */ jsxRuntime.jsx(
1996
- reactNative.View,
1997
- {
1998
- style: [
1999
- {
2000
- width: "100%",
2001
- paddingHorizontal: pageMargin
2002
- },
2003
- maxW !== void 0 && { maxWidth: maxW, alignSelf: "center" },
2004
- center && { alignItems: "center" },
2005
- style
2006
- ],
2007
- ...rest,
2008
- children
2009
- }
2010
- );
2011
- }
2012
- function Divider({
2013
- orientation = "horizontal",
2014
- spacing,
2015
- style,
2016
- ...rest
2017
- }) {
2018
- const { tokens: t, baseTokens: bt } = useTheme();
2019
- const spacingMap = {
2020
- sm: bt.entropixSpacing2,
2021
- md: bt.entropixSpacing4,
2022
- lg: bt.entropixSpacing6
2023
- };
2024
- const spacingValue = spacing ? spacingMap[spacing] : 0;
2025
- const isVertical = orientation === "vertical";
2026
- const dividerStyle = isVertical ? {
2027
- width: 1,
2028
- alignSelf: "stretch",
2029
- backgroundColor: t.entropixColorBorderDefault,
2030
- marginHorizontal: spacingValue
2031
- } : {
2032
- height: 1,
2033
- width: "100%",
2034
- backgroundColor: t.entropixColorBorderDefault,
2035
- marginVertical: spacingValue
2036
- };
2037
- return /* @__PURE__ */ jsxRuntime.jsx(
2038
- reactNative.View,
2039
- {
2040
- accessibilityRole: isVertical ? "none" : void 0,
2041
- style: [dividerStyle, style],
2042
- ...rest
2043
- }
2044
- );
2045
- }
2046
20
 
2047
- exports.Accordion = Accordion;
2048
- exports.AccordionItem = AccordionItem;
2049
- exports.AccordionPanel = AccordionPanel;
2050
- exports.AccordionTrigger = AccordionTrigger;
2051
- exports.BREAKPOINTS = BREAKPOINTS;
2052
- exports.Button = Button;
2053
- exports.Checkbox = Checkbox;
2054
- exports.Container = Container;
2055
- exports.Dialog = Dialog;
2056
- exports.DialogClose = DialogClose;
2057
- exports.DialogContent = DialogContent;
2058
- exports.DialogDescription = DialogDescription;
2059
- exports.DialogOverlay = DialogOverlay;
2060
- exports.DialogTitle = DialogTitle;
2061
- exports.DialogTrigger = DialogTrigger;
2062
- exports.Divider = Divider;
2063
- exports.EntropixProvider = EntropixProvider;
2064
- exports.Inline = Inline;
2065
- exports.Input = Input;
2066
- exports.Menu = Menu;
2067
- exports.MenuContent = MenuContent;
2068
- exports.MenuItem = MenuItem;
2069
- exports.MenuTrigger = MenuTrigger;
2070
- exports.RadioGroup = RadioGroup;
2071
- exports.RadioItem = RadioItem;
2072
- exports.Select = Select;
2073
- exports.SelectContent = SelectContent;
2074
- exports.SelectOption = SelectOption;
2075
- exports.SelectTrigger = SelectTrigger;
2076
- exports.Stack = Stack;
2077
- exports.Switch = Switch;
2078
- exports.Tab = Tab;
2079
- exports.TabList = TabList;
2080
- exports.TabPanel = TabPanel;
2081
- exports.Tabs = Tabs;
2082
- exports.Textarea = Textarea;
2083
- exports.Toggle = Toggle;
2084
- exports.mapAccessibilityToRN = mapAccessibilityToRN;
2085
- exports.registerBrand = registerBrand;
2086
- exports.useBreakpoint = useBreakpoint;
2087
- exports.useBreakpointValue = useBreakpointValue;
2088
- exports.useScreenDimensions = useScreenDimensions;
2089
- exports.useTheme = useTheme;
21
+ Object.defineProperty(exports, "Input", {
22
+ enumerable: true,
23
+ get: function () { return chunkFQUZIDVS_cjs.Input; }
24
+ });
25
+ Object.defineProperty(exports, "Textarea", {
26
+ enumerable: true,
27
+ get: function () { return chunkUYXJHKYK_cjs.Textarea; }
28
+ });
29
+ Object.defineProperty(exports, "Checkbox", {
30
+ enumerable: true,
31
+ get: function () { return chunkIRQWSFCZ_cjs.Checkbox; }
32
+ });
33
+ Object.defineProperty(exports, "RadioGroup", {
34
+ enumerable: true,
35
+ get: function () { return chunkTHX22NZW_cjs.RadioGroup; }
36
+ });
37
+ Object.defineProperty(exports, "RadioItem", {
38
+ enumerable: true,
39
+ get: function () { return chunkTHX22NZW_cjs.RadioItem; }
40
+ });
41
+ Object.defineProperty(exports, "Select", {
42
+ enumerable: true,
43
+ get: function () { return chunkB5YFEA66_cjs.Select; }
44
+ });
45
+ Object.defineProperty(exports, "SelectContent", {
46
+ enumerable: true,
47
+ get: function () { return chunkB5YFEA66_cjs.SelectContent; }
48
+ });
49
+ Object.defineProperty(exports, "SelectOption", {
50
+ enumerable: true,
51
+ get: function () { return chunkB5YFEA66_cjs.SelectOption; }
52
+ });
53
+ Object.defineProperty(exports, "SelectTrigger", {
54
+ enumerable: true,
55
+ get: function () { return chunkB5YFEA66_cjs.SelectTrigger; }
56
+ });
57
+ Object.defineProperty(exports, "BREAKPOINTS", {
58
+ enumerable: true,
59
+ get: function () { return chunkG7WPUTB6_cjs.BREAKPOINTS; }
60
+ });
61
+ Object.defineProperty(exports, "Container", {
62
+ enumerable: true,
63
+ get: function () { return chunkG7WPUTB6_cjs.Container; }
64
+ });
65
+ Object.defineProperty(exports, "Divider", {
66
+ enumerable: true,
67
+ get: function () { return chunkG7WPUTB6_cjs.Divider; }
68
+ });
69
+ Object.defineProperty(exports, "Inline", {
70
+ enumerable: true,
71
+ get: function () { return chunkG7WPUTB6_cjs.Inline; }
72
+ });
73
+ Object.defineProperty(exports, "Stack", {
74
+ enumerable: true,
75
+ get: function () { return chunkG7WPUTB6_cjs.Stack; }
76
+ });
77
+ Object.defineProperty(exports, "useBreakpoint", {
78
+ enumerable: true,
79
+ get: function () { return chunkG7WPUTB6_cjs.useBreakpoint; }
80
+ });
81
+ Object.defineProperty(exports, "useBreakpointValue", {
82
+ enumerable: true,
83
+ get: function () { return chunkG7WPUTB6_cjs.useBreakpointValue; }
84
+ });
85
+ Object.defineProperty(exports, "useScreenDimensions", {
86
+ enumerable: true,
87
+ get: function () { return chunkG7WPUTB6_cjs.useScreenDimensions; }
88
+ });
89
+ Object.defineProperty(exports, "Button", {
90
+ enumerable: true,
91
+ get: function () { return chunkXND7AIKO_cjs.Button; }
92
+ });
93
+ Object.defineProperty(exports, "Toggle", {
94
+ enumerable: true,
95
+ get: function () { return chunkOMKUPSHJ_cjs.Toggle; }
96
+ });
97
+ Object.defineProperty(exports, "Switch", {
98
+ enumerable: true,
99
+ get: function () { return chunkZPAOLIIG_cjs.Switch; }
100
+ });
101
+ Object.defineProperty(exports, "Dialog", {
102
+ enumerable: true,
103
+ get: function () { return chunkPKDXWKLO_cjs.Dialog; }
104
+ });
105
+ Object.defineProperty(exports, "DialogClose", {
106
+ enumerable: true,
107
+ get: function () { return chunkPKDXWKLO_cjs.DialogClose; }
108
+ });
109
+ Object.defineProperty(exports, "DialogContent", {
110
+ enumerable: true,
111
+ get: function () { return chunkPKDXWKLO_cjs.DialogContent; }
112
+ });
113
+ Object.defineProperty(exports, "DialogDescription", {
114
+ enumerable: true,
115
+ get: function () { return chunkPKDXWKLO_cjs.DialogDescription; }
116
+ });
117
+ Object.defineProperty(exports, "DialogOverlay", {
118
+ enumerable: true,
119
+ get: function () { return chunkPKDXWKLO_cjs.DialogOverlay; }
120
+ });
121
+ Object.defineProperty(exports, "DialogTitle", {
122
+ enumerable: true,
123
+ get: function () { return chunkPKDXWKLO_cjs.DialogTitle; }
124
+ });
125
+ Object.defineProperty(exports, "DialogTrigger", {
126
+ enumerable: true,
127
+ get: function () { return chunkPKDXWKLO_cjs.DialogTrigger; }
128
+ });
129
+ Object.defineProperty(exports, "Tab", {
130
+ enumerable: true,
131
+ get: function () { return chunk2SQB7RNT_cjs.Tab; }
132
+ });
133
+ Object.defineProperty(exports, "TabList", {
134
+ enumerable: true,
135
+ get: function () { return chunk2SQB7RNT_cjs.TabList; }
136
+ });
137
+ Object.defineProperty(exports, "TabPanel", {
138
+ enumerable: true,
139
+ get: function () { return chunk2SQB7RNT_cjs.TabPanel; }
140
+ });
141
+ Object.defineProperty(exports, "Tabs", {
142
+ enumerable: true,
143
+ get: function () { return chunk2SQB7RNT_cjs.Tabs; }
144
+ });
145
+ Object.defineProperty(exports, "Accordion", {
146
+ enumerable: true,
147
+ get: function () { return chunkQ7TEJ62Q_cjs.Accordion; }
148
+ });
149
+ Object.defineProperty(exports, "AccordionItem", {
150
+ enumerable: true,
151
+ get: function () { return chunkQ7TEJ62Q_cjs.AccordionItem; }
152
+ });
153
+ Object.defineProperty(exports, "AccordionPanel", {
154
+ enumerable: true,
155
+ get: function () { return chunkQ7TEJ62Q_cjs.AccordionPanel; }
156
+ });
157
+ Object.defineProperty(exports, "AccordionTrigger", {
158
+ enumerable: true,
159
+ get: function () { return chunkQ7TEJ62Q_cjs.AccordionTrigger; }
160
+ });
161
+ Object.defineProperty(exports, "Menu", {
162
+ enumerable: true,
163
+ get: function () { return chunkZ2MBHXUQ_cjs.Menu; }
164
+ });
165
+ Object.defineProperty(exports, "MenuContent", {
166
+ enumerable: true,
167
+ get: function () { return chunkZ2MBHXUQ_cjs.MenuContent; }
168
+ });
169
+ Object.defineProperty(exports, "MenuItem", {
170
+ enumerable: true,
171
+ get: function () { return chunkZ2MBHXUQ_cjs.MenuItem; }
172
+ });
173
+ Object.defineProperty(exports, "MenuTrigger", {
174
+ enumerable: true,
175
+ get: function () { return chunkZ2MBHXUQ_cjs.MenuTrigger; }
176
+ });
177
+ Object.defineProperty(exports, "mapAccessibilityToRN", {
178
+ enumerable: true,
179
+ get: function () { return chunkP5NAXMSC_cjs.mapAccessibilityToRN; }
180
+ });
181
+ Object.defineProperty(exports, "EntropixProvider", {
182
+ enumerable: true,
183
+ get: function () { return chunkBOUIB4OY_cjs.EntropixProvider; }
184
+ });
185
+ Object.defineProperty(exports, "registerBrand", {
186
+ enumerable: true,
187
+ get: function () { return chunkBOUIB4OY_cjs.registerBrand; }
188
+ });
189
+ Object.defineProperty(exports, "useTheme", {
190
+ enumerable: true,
191
+ get: function () { return chunkBOUIB4OY_cjs.useTheme; }
192
+ });
2090
193
  //# sourceMappingURL=index.cjs.map
2091
194
  //# sourceMappingURL=index.cjs.map