@streamplace/components 0.7.13 → 0.7.15

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 (122) hide show
  1. package/package.json +13 -16
  2. package/src/components/mobile-player/fullscreen.native.tsx +15 -20
  3. package/src/components/mobile-player/fullscreen.tsx +10 -2
  4. package/src/components/mobile-player/player.tsx +7 -1
  5. package/src/components/mobile-player/props.tsx +2 -0
  6. package/src/components/mobile-player/video.native.tsx +28 -11
  7. package/src/components/mobile-player/video.tsx +14 -3
  8. package/src/hooks/useLivestreamInfo.ts +6 -2
  9. package/src/lib/browser.ts +27 -0
  10. package/src/livestream-store/stream-key.tsx +1 -28
  11. package/src/streamplace-store/stream.tsx +51 -13
  12. package/dist/assets/emoji-data.json +0 -19371
  13. package/dist/components/chat/chat-box.js +0 -314
  14. package/dist/components/chat/chat-message.js +0 -87
  15. package/dist/components/chat/chat.js +0 -149
  16. package/dist/components/chat/emoji-suggestions.js +0 -35
  17. package/dist/components/chat/mention-suggestions.js +0 -42
  18. package/dist/components/chat/mod-view.js +0 -94
  19. package/dist/components/chat/system-message.js +0 -19
  20. package/dist/components/dashboard/chat-panel.js +0 -38
  21. package/dist/components/dashboard/header.js +0 -80
  22. package/dist/components/dashboard/index.js +0 -14
  23. package/dist/components/dashboard/information-widget.js +0 -234
  24. package/dist/components/dashboard/mod-actions.js +0 -71
  25. package/dist/components/dashboard/problems.js +0 -74
  26. package/dist/components/icons/bluesky-icon.js +0 -9
  27. package/dist/components/keep-awake.js +0 -7
  28. package/dist/components/keep-awake.native.js +0 -16
  29. package/dist/components/mobile-player/fullscreen.js +0 -74
  30. package/dist/components/mobile-player/fullscreen.native.js +0 -155
  31. package/dist/components/mobile-player/player.js +0 -94
  32. package/dist/components/mobile-player/props.js +0 -2
  33. package/dist/components/mobile-player/shared.js +0 -54
  34. package/dist/components/mobile-player/ui/countdown.js +0 -83
  35. package/dist/components/mobile-player/ui/index.js +0 -11
  36. package/dist/components/mobile-player/ui/input.js +0 -42
  37. package/dist/components/mobile-player/ui/metrics.js +0 -44
  38. package/dist/components/mobile-player/ui/report-modal.js +0 -90
  39. package/dist/components/mobile-player/ui/streamer-context-menu.js +0 -7
  40. package/dist/components/mobile-player/ui/streamer-loading-overlay.js +0 -104
  41. package/dist/components/mobile-player/ui/viewer-context-menu.js +0 -51
  42. package/dist/components/mobile-player/ui/viewer-loading-overlay.js +0 -49
  43. package/dist/components/mobile-player/ui/viewers.js +0 -23
  44. package/dist/components/mobile-player/use-webrtc.js +0 -243
  45. package/dist/components/mobile-player/video-retry.js +0 -29
  46. package/dist/components/mobile-player/video.js +0 -460
  47. package/dist/components/mobile-player/video.native.js +0 -276
  48. package/dist/components/mobile-player/webrtc-diagnostics.js +0 -110
  49. package/dist/components/mobile-player/webrtc-primitives.js +0 -27
  50. package/dist/components/mobile-player/webrtc-primitives.native.js +0 -8
  51. package/dist/components/share/sharesheet.js +0 -91
  52. package/dist/components/ui/button.js +0 -223
  53. package/dist/components/ui/dialog.js +0 -206
  54. package/dist/components/ui/dropdown.js +0 -172
  55. package/dist/components/ui/icons.js +0 -25
  56. package/dist/components/ui/index.js +0 -34
  57. package/dist/components/ui/info-box.js +0 -31
  58. package/dist/components/ui/info-row.js +0 -23
  59. package/dist/components/ui/input.js +0 -205
  60. package/dist/components/ui/loader.js +0 -10
  61. package/dist/components/ui/primitives/button.js +0 -125
  62. package/dist/components/ui/primitives/input.js +0 -206
  63. package/dist/components/ui/primitives/modal.js +0 -206
  64. package/dist/components/ui/primitives/text.js +0 -292
  65. package/dist/components/ui/resizeable.js +0 -121
  66. package/dist/components/ui/slider.js +0 -5
  67. package/dist/components/ui/text.js +0 -177
  68. package/dist/components/ui/textarea.js +0 -19
  69. package/dist/components/ui/toast.js +0 -175
  70. package/dist/components/ui/view.js +0 -252
  71. package/dist/hooks/index.js +0 -14
  72. package/dist/hooks/useAvatars.js +0 -35
  73. package/dist/hooks/useCameraToggle.js +0 -12
  74. package/dist/hooks/useKeyboard.js +0 -36
  75. package/dist/hooks/useKeyboardSlide.js +0 -14
  76. package/dist/hooks/useLivestreamInfo.js +0 -65
  77. package/dist/hooks/useOuterAndInnerDimensions.js +0 -30
  78. package/dist/hooks/usePlayerDimensions.js +0 -22
  79. package/dist/hooks/usePointerDevice.js +0 -71
  80. package/dist/hooks/useSegmentDimensions.js +0 -17
  81. package/dist/hooks/useSegmentTiming.js +0 -65
  82. package/dist/index.js +0 -34
  83. package/dist/lib/facet.js +0 -92
  84. package/dist/lib/system-messages.js +0 -101
  85. package/dist/lib/theme/atoms.js +0 -646
  86. package/dist/lib/theme/atoms.types.js +0 -6
  87. package/dist/lib/theme/index.js +0 -35
  88. package/dist/lib/theme/theme.js +0 -256
  89. package/dist/lib/theme/tokens.js +0 -659
  90. package/dist/lib/utils.js +0 -105
  91. package/dist/livestream-provider/index.js +0 -30
  92. package/dist/livestream-provider/websocket.js +0 -45
  93. package/dist/livestream-store/chat.js +0 -286
  94. package/dist/livestream-store/context.js +0 -5
  95. package/dist/livestream-store/index.js +0 -7
  96. package/dist/livestream-store/livestream-state.js +0 -2
  97. package/dist/livestream-store/livestream-store.js +0 -58
  98. package/dist/livestream-store/problems.js +0 -76
  99. package/dist/livestream-store/stream-key.js +0 -119
  100. package/dist/livestream-store/websocket-consumer.js +0 -94
  101. package/dist/player-store/context.js +0 -5
  102. package/dist/player-store/index.js +0 -9
  103. package/dist/player-store/player-provider.js +0 -57
  104. package/dist/player-store/player-state.js +0 -25
  105. package/dist/player-store/player-store.js +0 -199
  106. package/dist/player-store/single-player-provider.js +0 -121
  107. package/dist/streamplace-provider/context.js +0 -5
  108. package/dist/streamplace-provider/index.js +0 -20
  109. package/dist/streamplace-provider/poller.js +0 -49
  110. package/dist/streamplace-provider/xrpc.js +0 -0
  111. package/dist/streamplace-store/block.js +0 -65
  112. package/dist/streamplace-store/index.js +0 -6
  113. package/dist/streamplace-store/stream.js +0 -218
  114. package/dist/streamplace-store/streamplace-store.js +0 -47
  115. package/dist/streamplace-store/user.js +0 -52
  116. package/dist/streamplace-store/xrpc.js +0 -15
  117. package/dist/ui/index.js +0 -79
  118. package/node-compile-cache/v22.15.0-x64-efe9a9df-0/37be0eec +0 -0
  119. package/node-compile-cache/v22.15.0-x64-efe9a9df-0/56540125 +0 -0
  120. package/node-compile-cache/v22.15.0-x64-efe9a9df-0/67b1eb60 +0 -0
  121. package/node-compile-cache/v22.15.0-x64-efe9a9df-0/7c275f90 +0 -0
  122. package/tsconfig.tsbuildinfo +0 -1
@@ -1,646 +0,0 @@
1
- "use strict";
2
- /**
3
- * Theme atoms - Enhanced exports with pairify function for array-style syntax
4
- * These provide direct access to static design tokens and support composition
5
- */
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.px = exports.pl = exports.pb = exports.pr = exports.pt = exports.p = exports.my = exports.mx = exports.ml = exports.mb = exports.mr = exports.mt = exports.m = exports.text = exports.bg = exports.a = exports.atoms = exports.layouts = exports.gap = exports.aspectRatio = exports.position = exports.transforms = exports.textAlignVertical = exports.textDecoration = exports.textTransform = exports.letterSpacing = exports.lineHeight = exports.fontSize = exports.fontWeight = exports.textAlign = exports.overflow = exports.zIndex = exports.opacity = exports.flex = exports.sizes = exports.textColors = exports.backgrounds = exports.radiusAtoms = exports.spacingAtoms = exports.borders = exports.layout = exports.iconSizes = exports.typographyAtoms = exports.getPlatformTypography = exports.colors = exports.touchTargets = exports.spacing = exports.shadows = exports.borderRadius = exports.animations = void 0;
8
- exports.translateY = exports.translateX = exports.scale = exports.rotate = exports.left = exports.bottom = exports.right = exports.top = exports.r = exports.h = exports.w = exports.py = void 0;
9
- const react_native_1 = require("react-native");
10
- const tokens_1 = require("./tokens");
11
- Object.defineProperty(exports, "animations", { enumerable: true, get: function () { return tokens_1.animations; } });
12
- Object.defineProperty(exports, "borderRadius", { enumerable: true, get: function () { return tokens_1.borderRadius; } });
13
- Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return tokens_1.shadows; } });
14
- Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return tokens_1.spacing; } });
15
- Object.defineProperty(exports, "touchTargets", { enumerable: true, get: function () { return tokens_1.touchTargets; } });
16
- /**
17
- * Pairify function - converts nested objects into key-value pairs that return style objects
18
- * This allows for array-style syntax like style={[a.borders.green[300], a.shadows.xl]}
19
- */
20
- function pairify(obj, styleKeyPrefix) {
21
- const result = {};
22
- for (const [key, value] of Object.entries(obj)) {
23
- if (typeof value === "object" && value !== null && !Array.isArray(value)) {
24
- // For nested objects (like color scales), create another level
25
- result[key] = {};
26
- for (const [nestedKey, nestedValue] of Object.entries(value)) {
27
- result[key][nestedKey] = { [styleKeyPrefix]: nestedValue };
28
- }
29
- }
30
- else {
31
- // For simple values, create the style object directly
32
- result[key] = { [styleKeyPrefix]: value };
33
- }
34
- }
35
- return result;
36
- }
37
- // Export raw color tokens for advanced use cases
38
- exports.colors = tokens_1.colors;
39
- // Platform-aware typography helper
40
- const getPlatformTypography = () => {
41
- if (react_native_1.Platform.OS === "ios") {
42
- return tokens_1.typography.ios;
43
- }
44
- else if (react_native_1.Platform.OS === "android") {
45
- return tokens_1.typography.android;
46
- }
47
- return tokens_1.typography.universal;
48
- };
49
- exports.getPlatformTypography = getPlatformTypography;
50
- // Export all typography scales
51
- exports.typographyAtoms = {
52
- platform: (0, exports.getPlatformTypography)(),
53
- universal: tokens_1.typography.universal,
54
- ios: tokens_1.typography.ios,
55
- android: tokens_1.typography.android,
56
- };
57
- // Static icon sizes (colors are handled by theme)
58
- exports.iconSizes = {
59
- sm: 16,
60
- md: 20,
61
- lg: 24,
62
- xl: 32,
63
- };
64
- // Common layout utilities
65
- exports.layout = {
66
- flex: {
67
- center: {
68
- justifyContent: "center",
69
- alignItems: "center",
70
- },
71
- alignCenter: {
72
- alignItems: "center",
73
- },
74
- justifyCenter: {
75
- justifyContent: "center",
76
- },
77
- row: {
78
- flexDirection: "row",
79
- },
80
- column: {
81
- flexDirection: "column",
82
- },
83
- spaceBetween: {
84
- justifyContent: "space-between",
85
- },
86
- spaceAround: {
87
- justifyContent: "space-around",
88
- },
89
- spaceEvenly: {
90
- justifyContent: "space-evenly",
91
- },
92
- direction: pairify({
93
- row: "row",
94
- column: "column",
95
- "row-reverse": "row-reverse",
96
- "column-reverse": "column-reverse",
97
- }, "flexDirection"),
98
- justify: pairify({
99
- start: "flex-start",
100
- end: "flex-end",
101
- center: "center",
102
- between: "space-between",
103
- around: "space-around",
104
- evenly: "space-evenly",
105
- }, "justifyContent"),
106
- align: pairify({
107
- start: "flex-start",
108
- end: "flex-end",
109
- center: "center",
110
- stretch: "stretch",
111
- baseline: "baseline",
112
- }, "alignItems"),
113
- wrap: pairify({
114
- wrap: "wrap",
115
- nowrap: "nowrap",
116
- reverse: "wrap-reverse",
117
- }, "flexWrap"),
118
- },
119
- position: pairify({
120
- absolute: "absolute",
121
- relative: "relative",
122
- static: "static",
123
- }, "position"),
124
- };
125
- // Enhanced border utilities with pairified colors and widths
126
- exports.borders = {
127
- width: pairify({
128
- thin: 1,
129
- medium: 2,
130
- thick: 4,
131
- }, "borderWidth"),
132
- style: pairify({
133
- solid: "solid",
134
- dashed: "dashed",
135
- dotted: "dotted",
136
- }, "borderStyle"),
137
- // Pairified color borders
138
- color: pairify(tokens_1.colors, "borderColor"),
139
- // Top border utilities
140
- top: {
141
- width: pairify({
142
- thin: 1,
143
- medium: 2,
144
- thick: 4,
145
- }, "borderTopWidth"),
146
- color: pairify(tokens_1.colors, "borderTopColor"),
147
- },
148
- // Bottom border utilities
149
- bottom: {
150
- width: pairify({
151
- thin: 1,
152
- medium: 2,
153
- thick: 4,
154
- }, "borderBottomWidth"),
155
- color: pairify(tokens_1.colors, "borderBottomColor"),
156
- },
157
- // Left border utilities
158
- left: {
159
- width: pairify({
160
- thin: 1,
161
- medium: 2,
162
- thick: 4,
163
- }, "borderLeftWidth"),
164
- color: pairify(tokens_1.colors, "borderLeftColor"),
165
- },
166
- // Right border utilities
167
- right: {
168
- width: pairify({
169
- thin: 1,
170
- medium: 2,
171
- thick: 4,
172
- }, "borderRightWidth"),
173
- color: pairify(tokens_1.colors, "borderRightColor"),
174
- },
175
- };
176
- // Pairified spacing utilities
177
- exports.spacingAtoms = {
178
- margin: pairify(tokens_1.spacing, "margin"),
179
- marginTop: pairify(tokens_1.spacing, "marginTop"),
180
- marginRight: pairify(tokens_1.spacing, "marginRight"),
181
- marginBottom: pairify(tokens_1.spacing, "marginBottom"),
182
- marginLeft: pairify(tokens_1.spacing, "marginLeft"),
183
- marginHorizontal: pairify(tokens_1.spacing, "marginHorizontal"),
184
- marginVertical: pairify(tokens_1.spacing, "marginVertical"),
185
- padding: pairify(tokens_1.spacing, "padding"),
186
- paddingTop: pairify(tokens_1.spacing, "paddingTop"),
187
- paddingRight: pairify(tokens_1.spacing, "paddingRight"),
188
- paddingBottom: pairify(tokens_1.spacing, "paddingBottom"),
189
- paddingLeft: pairify(tokens_1.spacing, "paddingLeft"),
190
- paddingHorizontal: pairify(tokens_1.spacing, "paddingHorizontal"),
191
- paddingVertical: pairify(tokens_1.spacing, "paddingVertical"),
192
- };
193
- // Pairified border radius utilities
194
- exports.radiusAtoms = {
195
- all: pairify(tokens_1.borderRadius, "borderRadius"),
196
- top: pairify(tokens_1.borderRadius, "borderTopLeftRadius"),
197
- topRight: pairify(tokens_1.borderRadius, "borderTopRightRadius"),
198
- bottom: pairify(tokens_1.borderRadius, "borderBottomLeftRadius"),
199
- bottomRight: pairify(tokens_1.borderRadius, "borderBottomRightRadius"),
200
- left: pairify(tokens_1.borderRadius, "borderTopLeftRadius"),
201
- right: pairify(tokens_1.borderRadius, "borderTopRightRadius"),
202
- };
203
- // Background color utilities
204
- exports.backgrounds = pairify(tokens_1.colors, "backgroundColor");
205
- // Text color utilities
206
- exports.textColors = pairify(tokens_1.colors, "color");
207
- // Percentage-based sizes
208
- const percentageSizes = {
209
- "10": "10%",
210
- "20": "20%",
211
- "25": "25%",
212
- "30": "30%",
213
- "33": "33.333333%",
214
- "40": "40%",
215
- "50": "50%",
216
- "60": "60%",
217
- "66": "66.666667%",
218
- "70": "70%",
219
- "75": "75%",
220
- "80": "80%",
221
- "90": "90%",
222
- "100": "100%",
223
- };
224
- // Size utilities (width and height)
225
- exports.sizes = {
226
- width: {
227
- ...pairify(tokens_1.spacing, "width"),
228
- percent: pairify(percentageSizes, "width"),
229
- },
230
- height: {
231
- ...pairify(tokens_1.spacing, "height"),
232
- percent: pairify(percentageSizes, "height"),
233
- },
234
- minWidth: {
235
- ...pairify(tokens_1.spacing, "minWidth"),
236
- percent: pairify(percentageSizes, "minWidth"),
237
- },
238
- minHeight: {
239
- ...pairify(tokens_1.spacing, "minHeight"),
240
- percent: pairify(percentageSizes, "minHeight"),
241
- },
242
- maxWidth: {
243
- ...pairify(tokens_1.spacing, "maxWidth"),
244
- percent: pairify(percentageSizes, "maxWidth"),
245
- },
246
- maxHeight: {
247
- ...pairify(tokens_1.spacing, "maxHeight"),
248
- percent: pairify(percentageSizes, "maxHeight"),
249
- },
250
- };
251
- // Flex utilities
252
- exports.flex = {
253
- values: pairify({
254
- 0: 0,
255
- 1: 1,
256
- 2: 2,
257
- 3: 3,
258
- 4: 4,
259
- 5: 5,
260
- }, "flex"),
261
- grow: pairify({
262
- 0: 0,
263
- 1: 1,
264
- }, "flexGrow"),
265
- shrink: pairify({
266
- 0: 0,
267
- 1: 1,
268
- }, "flexShrink"),
269
- basis: {
270
- ...pairify(tokens_1.spacing, "flexBasis"),
271
- ...pairify(percentageSizes, "flexBasis"),
272
- auto: { flexBasis: "auto" },
273
- },
274
- };
275
- // Opacity utilities
276
- exports.opacity = pairify({
277
- 0: 0,
278
- 5: 0.05,
279
- 10: 0.1,
280
- 20: 0.2,
281
- 25: 0.25,
282
- 30: 0.3,
283
- 40: 0.4,
284
- 50: 0.5,
285
- 60: 0.6,
286
- 70: 0.7,
287
- 75: 0.75,
288
- 80: 0.8,
289
- 90: 0.9,
290
- 95: 0.95,
291
- 100: 1,
292
- }, "opacity");
293
- // Z-index utilities
294
- exports.zIndex = pairify({
295
- 0: 0,
296
- 10: 10,
297
- 20: 20,
298
- 30: 30,
299
- 40: 40,
300
- 50: 50,
301
- auto: "auto",
302
- }, "zIndex");
303
- // Overflow utilities
304
- exports.overflow = pairify({
305
- visible: "visible",
306
- hidden: "hidden",
307
- scroll: "scroll",
308
- }, "overflow");
309
- // Text alignment utilities
310
- exports.textAlign = pairify({
311
- left: "left",
312
- center: "center",
313
- right: "right",
314
- justify: "justify",
315
- auto: "auto",
316
- }, "textAlign");
317
- // Font weight utilities
318
- exports.fontWeight = pairify({
319
- thin: "100",
320
- extralight: "200",
321
- light: "300",
322
- normal: "400",
323
- medium: "500",
324
- semibold: "600",
325
- bold: "700",
326
- extrabold: "800",
327
- black: "900",
328
- }, "fontWeight");
329
- // Font size utilities (separate from typography for quick access)
330
- exports.fontSize = pairify({
331
- xs: 12,
332
- sm: 14,
333
- base: 16,
334
- lg: 18,
335
- xl: 20,
336
- "2xl": 24,
337
- "3xl": 30,
338
- "4xl": 36,
339
- "5xl": 48,
340
- "6xl": 60,
341
- "7xl": 72,
342
- "8xl": 96,
343
- "9xl": 128,
344
- }, "fontSize");
345
- // Line height utilities
346
- exports.lineHeight = pairify({
347
- none: 1,
348
- tight: 1.25,
349
- snug: 1.375,
350
- normal: 1.5,
351
- relaxed: 1.625,
352
- loose: 2,
353
- 3: 12,
354
- 4: 16,
355
- 5: 20,
356
- 6: 24,
357
- 7: 28,
358
- 8: 32,
359
- 9: 36,
360
- 10: 40,
361
- }, "lineHeight");
362
- // Letter spacing utilities
363
- exports.letterSpacing = pairify({
364
- tighter: -0.5,
365
- tight: -0.25,
366
- normal: 0,
367
- wide: 0.25,
368
- wider: 0.5,
369
- widest: 1,
370
- }, "letterSpacing");
371
- // Text transform utilities
372
- exports.textTransform = pairify({
373
- uppercase: "uppercase",
374
- lowercase: "lowercase",
375
- capitalize: "capitalize",
376
- none: "none",
377
- }, "textTransform");
378
- // Text decoration utilities
379
- exports.textDecoration = pairify({
380
- none: "none",
381
- underline: "underline",
382
- lineThrough: "line-through",
383
- underlineLineThrough: "underline line-through",
384
- }, "textDecorationLine");
385
- // Text align vertical utilities (React Native specific)
386
- exports.textAlignVertical = pairify({
387
- auto: "auto",
388
- top: "top",
389
- bottom: "bottom",
390
- center: "center",
391
- }, "textAlignVertical");
392
- // Transform utilities
393
- exports.transforms = {
394
- rotate: pairify({
395
- 0: 0,
396
- 1: 1,
397
- 2: 2,
398
- 3: 3,
399
- 6: 6,
400
- 12: 12,
401
- 45: 45,
402
- 90: 90,
403
- 180: 180,
404
- 270: 270,
405
- }, "rotate"),
406
- scale: pairify({
407
- 0: 0,
408
- 50: 0.5,
409
- 75: 0.75,
410
- 90: 0.9,
411
- 95: 0.95,
412
- 100: 1,
413
- 105: 1.05,
414
- 110: 1.1,
415
- 125: 1.25,
416
- 150: 1.5,
417
- 200: 2,
418
- }, "scale"),
419
- scaleX: pairify({
420
- 0: 0,
421
- 50: 0.5,
422
- 75: 0.75,
423
- 90: 0.9,
424
- 95: 0.95,
425
- 100: 1,
426
- 105: 1.05,
427
- 110: 1.1,
428
- 125: 1.25,
429
- 150: 1.5,
430
- 200: 2,
431
- }, "scaleX"),
432
- scaleY: pairify({
433
- 0: 0,
434
- 50: 0.5,
435
- 75: 0.75,
436
- 90: 0.9,
437
- 95: 0.95,
438
- 100: 1,
439
- 105: 1.05,
440
- 110: 1.1,
441
- 125: 1.25,
442
- 150: 1.5,
443
- 200: 2,
444
- }, "scaleY"),
445
- translateX: pairify(tokens_1.spacing, "translateX"),
446
- translateY: pairify(tokens_1.spacing, "translateY"),
447
- };
448
- // Absolute positioning utilities
449
- exports.position = {
450
- top: pairify(tokens_1.spacing, "top"),
451
- right: pairify(tokens_1.spacing, "right"),
452
- bottom: pairify(tokens_1.spacing, "bottom"),
453
- left: pairify(tokens_1.spacing, "left"),
454
- // Common position combinations
455
- topLeft: (top, left) => ({
456
- position: "absolute",
457
- top,
458
- left,
459
- }),
460
- topRight: (top, right) => ({
461
- position: "absolute",
462
- top,
463
- right,
464
- }),
465
- bottomLeft: (bottom, left) => ({
466
- position: "absolute",
467
- bottom,
468
- left,
469
- }),
470
- bottomRight: (bottom, right) => ({
471
- position: "absolute",
472
- bottom,
473
- right,
474
- }),
475
- // Percentage-based positioning
476
- percent: {
477
- top: pairify({
478
- 0: "0%",
479
- 25: "25%",
480
- 50: "50%",
481
- 75: "75%",
482
- 100: "100%",
483
- }, "top"),
484
- right: pairify({
485
- 0: "0%",
486
- 25: "25%",
487
- 50: "50%",
488
- 75: "75%",
489
- 100: "100%",
490
- }, "right"),
491
- bottom: pairify({
492
- 0: "0%",
493
- 25: "25%",
494
- 50: "50%",
495
- 75: "75%",
496
- 100: "100%",
497
- }, "bottom"),
498
- left: pairify({
499
- 0: "0%",
500
- 25: "25%",
501
- 50: "50%",
502
- 75: "75%",
503
- 100: "100%",
504
- }, "left"),
505
- },
506
- };
507
- // Aspect ratio utilities (React Native 0.71+)
508
- exports.aspectRatio = pairify({
509
- square: 1,
510
- video: 16 / 9,
511
- photo: 4 / 3,
512
- portrait: 3 / 4,
513
- wide: 21 / 9,
514
- ultrawide: 32 / 9,
515
- "1/1": 1,
516
- "3/2": 3 / 2,
517
- "4/3": 4 / 3,
518
- "16/9": 16 / 9,
519
- "21/9": 21 / 9,
520
- }, "aspectRatio");
521
- // Gap utilities (React Native 0.71+)
522
- exports.gap = {
523
- row: pairify(tokens_1.spacing, "rowGap"),
524
- column: pairify(tokens_1.spacing, "columnGap"),
525
- all: pairify(tokens_1.spacing, "gap"),
526
- };
527
- // Common layout patterns
528
- exports.layouts = {
529
- // Full screen
530
- fullScreen: {
531
- position: "absolute",
532
- top: 0,
533
- left: 0,
534
- right: 0,
535
- bottom: 0,
536
- },
537
- // Centered content
538
- centered: {
539
- flex: 1,
540
- justifyContent: "center",
541
- alignItems: "center",
542
- },
543
- // Centered modal/overlay
544
- overlay: {
545
- position: "absolute",
546
- top: 0,
547
- left: 0,
548
- right: 0,
549
- bottom: 0,
550
- justifyContent: "center",
551
- alignItems: "center",
552
- backgroundColor: "rgba(0, 0, 0, 0.5)",
553
- },
554
- // Safe area friendly
555
- safeContainer: {
556
- flex: 1,
557
- paddingTop: react_native_1.Platform.OS === "ios" ? 44 : 0, // Status bar height
558
- },
559
- // Row with space between
560
- spaceBetweenRow: {
561
- flexDirection: "row",
562
- justifyContent: "space-between",
563
- alignItems: "center",
564
- },
565
- // Sticky header
566
- stickyHeader: {
567
- position: "absolute",
568
- top: 0,
569
- left: 0,
570
- right: 0,
571
- zIndex: 10,
572
- },
573
- // Bottom sheet style
574
- bottomSheet: {
575
- position: "absolute",
576
- bottom: 0,
577
- left: 0,
578
- right: 0,
579
- borderTopLeftRadius: 16,
580
- borderTopRightRadius: 16,
581
- },
582
- };
583
- // Export everything as a combined atoms object for convenience
584
- exports.atoms = {
585
- colors: tokens_1.colors,
586
- spacing: tokens_1.spacing,
587
- borderRadius: tokens_1.borderRadius,
588
- radius: exports.radiusAtoms,
589
- typography: exports.typographyAtoms,
590
- shadows: tokens_1.shadows,
591
- touchTargets: tokens_1.touchTargets,
592
- animations: tokens_1.animations,
593
- iconSizes: exports.iconSizes,
594
- layout: exports.layout,
595
- borders: exports.borders,
596
- backgrounds: exports.backgrounds,
597
- textColors: exports.textColors,
598
- spacingAtoms: exports.spacingAtoms,
599
- sizes: exports.sizes,
600
- flex: exports.flex,
601
- opacity: exports.opacity,
602
- zIndex: exports.zIndex,
603
- overflow: exports.overflow,
604
- textAlign: exports.textAlign,
605
- fontWeight: exports.fontWeight,
606
- fontSize: exports.fontSize,
607
- lineHeight: exports.lineHeight,
608
- letterSpacing: exports.letterSpacing,
609
- textTransform: exports.textTransform,
610
- textDecoration: exports.textDecoration,
611
- textAlignVertical: exports.textAlignVertical,
612
- transforms: exports.transforms,
613
- position: exports.position,
614
- aspectRatio: exports.aspectRatio,
615
- gap: exports.gap,
616
- layouts: exports.layouts,
617
- };
618
- // Convenient shorthand aliases
619
- exports.a = exports.atoms;
620
- exports.bg = exports.backgrounds;
621
- exports.text = exports.textColors;
622
- exports.m = exports.spacingAtoms.margin;
623
- exports.mt = exports.spacingAtoms.marginTop;
624
- exports.mr = exports.spacingAtoms.marginRight;
625
- exports.mb = exports.spacingAtoms.marginBottom;
626
- exports.ml = exports.spacingAtoms.marginLeft;
627
- exports.mx = exports.spacingAtoms.marginHorizontal;
628
- exports.my = exports.spacingAtoms.marginVertical;
629
- exports.p = exports.spacingAtoms.padding;
630
- exports.pt = exports.spacingAtoms.paddingTop;
631
- exports.pr = exports.spacingAtoms.paddingRight;
632
- exports.pb = exports.spacingAtoms.paddingBottom;
633
- exports.pl = exports.spacingAtoms.paddingLeft;
634
- exports.px = exports.spacingAtoms.paddingHorizontal;
635
- exports.py = exports.spacingAtoms.paddingVertical;
636
- exports.w = exports.sizes.width;
637
- exports.h = exports.sizes.height;
638
- exports.r = exports.radiusAtoms.all;
639
- exports.top = exports.position.top;
640
- exports.right = exports.position.right;
641
- exports.bottom = exports.position.bottom;
642
- exports.left = exports.position.left;
643
- exports.rotate = exports.transforms.rotate;
644
- exports.scale = exports.transforms.scale;
645
- exports.translateX = exports.transforms.translateX;
646
- exports.translateY = exports.transforms.translateY;
@@ -1,6 +0,0 @@
1
- "use strict";
2
- /**
3
- * Type definitions for enhanced atoms with pairify function
4
- * Provides comprehensive type safety for array-style syntax
5
- */
6
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,35 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.tokens = exports.atoms = exports.typographyAtoms = exports.layout = exports.iconSizes = exports.getPlatformTypography = exports.borders = exports.typography = exports.touchTargets = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.animations = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = void 0;
4
- const tslib_1 = require("tslib");
5
- // Main theme system exports
6
- var theme_1 = require("./theme");
7
- Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_1.ThemeProvider; } });
8
- Object.defineProperty(exports, "createThemeColors", { enumerable: true, get: function () { return theme_1.createThemeColors; } });
9
- Object.defineProperty(exports, "createThemeIcons", { enumerable: true, get: function () { return theme_1.createThemeIcons; } });
10
- Object.defineProperty(exports, "createThemeStyles", { enumerable: true, get: function () { return theme_1.createThemeStyles; } });
11
- Object.defineProperty(exports, "createThemedStyles", { enumerable: true, get: function () { return theme_1.createThemedStyles; } });
12
- Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });
13
- Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return theme_1.lightTheme; } });
14
- Object.defineProperty(exports, "usePlatformTypography", { enumerable: true, get: function () { return theme_1.usePlatformTypography; } });
15
- Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_1.useTheme; } });
16
- // Design tokens
17
- var tokens_1 = require("./tokens");
18
- Object.defineProperty(exports, "animations", { enumerable: true, get: function () { return tokens_1.animations; } });
19
- Object.defineProperty(exports, "borderRadius", { enumerable: true, get: function () { return tokens_1.borderRadius; } });
20
- Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return tokens_1.breakpoints; } });
21
- Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return tokens_1.colors; } });
22
- Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return tokens_1.shadows; } });
23
- Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return tokens_1.spacing; } });
24
- Object.defineProperty(exports, "touchTargets", { enumerable: true, get: function () { return tokens_1.touchTargets; } });
25
- Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return tokens_1.typography; } });
26
- // Utility atoms
27
- var atoms_1 = require("./atoms");
28
- Object.defineProperty(exports, "borders", { enumerable: true, get: function () { return atoms_1.borders; } });
29
- Object.defineProperty(exports, "getPlatformTypography", { enumerable: true, get: function () { return atoms_1.getPlatformTypography; } });
30
- Object.defineProperty(exports, "iconSizes", { enumerable: true, get: function () { return atoms_1.iconSizes; } });
31
- Object.defineProperty(exports, "layout", { enumerable: true, get: function () { return atoms_1.layout; } });
32
- Object.defineProperty(exports, "typographyAtoms", { enumerable: true, get: function () { return atoms_1.typographyAtoms; } });
33
- // Convenience re-exports
34
- exports.atoms = tslib_1.__importStar(require("./atoms"));
35
- exports.tokens = tslib_1.__importStar(require("./tokens"));