@buoy-gg/floating-tools-core 2.1.4-beta.2 → 2.1.4

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 (107) hide show
  1. package/lib/commonjs/FloatingToolsStore.js +1 -501
  2. package/lib/commonjs/colors.js +1 -54
  3. package/lib/commonjs/constants.js +1 -31
  4. package/lib/commonjs/devToolsState.js +1 -325
  5. package/lib/commonjs/dial.js +1 -617
  6. package/lib/commonjs/easing.js +1 -69
  7. package/lib/commonjs/icons/benchmark-icon.js +1 -24
  8. package/lib/commonjs/icons/env-icon.js +1 -24
  9. package/lib/commonjs/icons/events-icon.js +1 -24
  10. package/lib/commonjs/icons/highlight-icon.js +1 -24
  11. package/lib/commonjs/icons/icon-data.js +1 -2268
  12. package/lib/commonjs/icons/icon-factories.js +1 -173
  13. package/lib/commonjs/icons/icon-primitives.js +1 -559
  14. package/lib/commonjs/icons/icon-primitives.native.js +1 -779
  15. package/lib/commonjs/icons/icon-renderer.js +1 -260
  16. package/lib/commonjs/icons/network-icon.js +1 -24
  17. package/lib/commonjs/icons/query-icon.js +1 -24
  18. package/lib/commonjs/icons/redux-icon.js +1 -85
  19. package/lib/commonjs/icons/renders-icon.js +1 -33
  20. package/lib/commonjs/icons/routes-icon.js +1 -49
  21. package/lib/commonjs/icons/sentry-icon.js +1 -24
  22. package/lib/commonjs/icons/storage-icon.js +1 -24
  23. package/lib/commonjs/icons/wifi-icon.js +1 -24
  24. package/lib/commonjs/index.js +1 -723
  25. package/lib/commonjs/settings.js +1 -588
  26. package/lib/commonjs/utils.js +1 -72
  27. package/lib/module/FloatingToolsStore.js +1 -496
  28. package/lib/module/colors.js +1 -49
  29. package/lib/module/constants.js +1 -27
  30. package/lib/module/devToolsState.js +1 -318
  31. package/lib/module/dial.js +1 -603
  32. package/lib/module/easing.js +1 -62
  33. package/lib/module/icons/benchmark-icon.js +1 -15
  34. package/lib/module/icons/env-icon.js +1 -15
  35. package/lib/module/icons/events-icon.js +1 -15
  36. package/lib/module/icons/highlight-icon.js +1 -15
  37. package/lib/module/icons/icon-data.js +1 -2264
  38. package/lib/module/icons/icon-factories.js +1 -163
  39. package/lib/module/icons/icon-primitives.js +1 -547
  40. package/lib/module/icons/icon-primitives.native.js +1 -767
  41. package/lib/module/icons/icon-renderer.js +1 -255
  42. package/lib/module/icons/network-icon.js +1 -15
  43. package/lib/module/icons/query-icon.js +1 -15
  44. package/lib/module/icons/redux-icon.js +1 -81
  45. package/lib/module/icons/renders-icon.js +1 -17
  46. package/lib/module/icons/routes-icon.js +1 -41
  47. package/lib/module/icons/sentry-icon.js +1 -15
  48. package/lib/module/icons/storage-icon.js +1 -15
  49. package/lib/module/icons/wifi-icon.js +1 -15
  50. package/lib/module/index.js +1 -103
  51. package/lib/module/settings.js +1 -576
  52. package/lib/module/utils.js +1 -66
  53. package/package.json +1 -1
  54. package/lib/typescript/commonjs/FloatingToolsStore.d.ts.map +0 -1
  55. package/lib/typescript/commonjs/colors.d.ts.map +0 -1
  56. package/lib/typescript/commonjs/constants.d.ts.map +0 -1
  57. package/lib/typescript/commonjs/devToolsState.d.ts.map +0 -1
  58. package/lib/typescript/commonjs/dial.d.ts.map +0 -1
  59. package/lib/typescript/commonjs/easing.d.ts.map +0 -1
  60. package/lib/typescript/commonjs/icons/benchmark-icon.d.ts.map +0 -1
  61. package/lib/typescript/commonjs/icons/env-icon.d.ts.map +0 -1
  62. package/lib/typescript/commonjs/icons/events-icon.d.ts.map +0 -1
  63. package/lib/typescript/commonjs/icons/highlight-icon.d.ts.map +0 -1
  64. package/lib/typescript/commonjs/icons/icon-data.d.ts.map +0 -1
  65. package/lib/typescript/commonjs/icons/icon-factories.d.ts.map +0 -1
  66. package/lib/typescript/commonjs/icons/icon-primitives.d.ts.map +0 -1
  67. package/lib/typescript/commonjs/icons/icon-primitives.native.d.ts.map +0 -1
  68. package/lib/typescript/commonjs/icons/icon-renderer.d.ts.map +0 -1
  69. package/lib/typescript/commonjs/icons/network-icon.d.ts.map +0 -1
  70. package/lib/typescript/commonjs/icons/query-icon.d.ts.map +0 -1
  71. package/lib/typescript/commonjs/icons/redux-icon.d.ts.map +0 -1
  72. package/lib/typescript/commonjs/icons/renders-icon.d.ts.map +0 -1
  73. package/lib/typescript/commonjs/icons/routes-icon.d.ts.map +0 -1
  74. package/lib/typescript/commonjs/icons/sentry-icon.d.ts.map +0 -1
  75. package/lib/typescript/commonjs/icons/storage-icon.d.ts.map +0 -1
  76. package/lib/typescript/commonjs/icons/wifi-icon.d.ts.map +0 -1
  77. package/lib/typescript/commonjs/index.d.ts.map +0 -1
  78. package/lib/typescript/commonjs/settings.d.ts.map +0 -1
  79. package/lib/typescript/commonjs/types.d.ts.map +0 -1
  80. package/lib/typescript/commonjs/utils.d.ts.map +0 -1
  81. package/lib/typescript/module/FloatingToolsStore.d.ts.map +0 -1
  82. package/lib/typescript/module/colors.d.ts.map +0 -1
  83. package/lib/typescript/module/constants.d.ts.map +0 -1
  84. package/lib/typescript/module/devToolsState.d.ts.map +0 -1
  85. package/lib/typescript/module/dial.d.ts.map +0 -1
  86. package/lib/typescript/module/easing.d.ts.map +0 -1
  87. package/lib/typescript/module/icons/benchmark-icon.d.ts.map +0 -1
  88. package/lib/typescript/module/icons/env-icon.d.ts.map +0 -1
  89. package/lib/typescript/module/icons/events-icon.d.ts.map +0 -1
  90. package/lib/typescript/module/icons/highlight-icon.d.ts.map +0 -1
  91. package/lib/typescript/module/icons/icon-data.d.ts.map +0 -1
  92. package/lib/typescript/module/icons/icon-factories.d.ts.map +0 -1
  93. package/lib/typescript/module/icons/icon-primitives.d.ts.map +0 -1
  94. package/lib/typescript/module/icons/icon-primitives.native.d.ts.map +0 -1
  95. package/lib/typescript/module/icons/icon-renderer.d.ts.map +0 -1
  96. package/lib/typescript/module/icons/network-icon.d.ts.map +0 -1
  97. package/lib/typescript/module/icons/query-icon.d.ts.map +0 -1
  98. package/lib/typescript/module/icons/redux-icon.d.ts.map +0 -1
  99. package/lib/typescript/module/icons/renders-icon.d.ts.map +0 -1
  100. package/lib/typescript/module/icons/routes-icon.d.ts.map +0 -1
  101. package/lib/typescript/module/icons/sentry-icon.d.ts.map +0 -1
  102. package/lib/typescript/module/icons/storage-icon.d.ts.map +0 -1
  103. package/lib/typescript/module/icons/wifi-icon.d.ts.map +0 -1
  104. package/lib/typescript/module/index.d.ts.map +0 -1
  105. package/lib/typescript/module/settings.d.ts.map +0 -1
  106. package/lib/typescript/module/types.d.ts.map +0 -1
  107. package/lib/typescript/module/utils.d.ts.map +0 -1
@@ -1,779 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.IconTriangle = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
7
- var _reactNative = require("react-native");
8
- var _jsxRuntime = require("react/jsx-runtime");
9
- /**
10
- * Icon Primitives - MOBILE (React Native)
11
- *
12
- * This file is auto-picked by Metro (React Native bundler).
13
- * Web bundlers pick icon-primitives.tsx instead.
14
- */
15
-
16
- // ===========================================
17
- // Types
18
- // ===========================================
19
-
20
- // ===========================================
21
- // Mobile Primitives (React Native Views)
22
- // ===========================================
23
-
24
- const IconContainer = ({
25
- size,
26
- children
27
- }) => {
28
- const style = {
29
- position: 'relative',
30
- width: size,
31
- height: size
32
- };
33
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
34
- style: style,
35
- children: children
36
- });
37
- };
38
- exports.IconContainer = IconContainer;
39
- const IconCircle = ({
40
- cx,
41
- cy,
42
- r,
43
- fill,
44
- borderColor,
45
- borderWidth = 0,
46
- opacity = 1,
47
- scaleX = 1,
48
- scaleY = 1,
49
- glowColor,
50
- glowRadius = 0
51
- }) => {
52
- const diameter = r * 2;
53
-
54
- // Build transforms array
55
- const transforms = [];
56
- if (scaleX !== 1) transforms.push({
57
- scaleX
58
- });
59
- if (scaleY !== 1) transforms.push({
60
- scaleY
61
- });
62
-
63
- // Check if this is a "transparent" element (border-only ring)
64
- // RN shadows require backgroundColor, so we need a separate glow layer
65
- const needsSeparateGlow = glowColor && glowRadius > 0 && (!fill || fill === 'transparent');
66
- const hasFillForShadow = fill && fill !== 'transparent';
67
- const style = {
68
- position: 'absolute',
69
- left: cx - r,
70
- top: cy - r,
71
- width: diameter,
72
- height: diameter,
73
- borderRadius: r,
74
- backgroundColor: fill,
75
- borderColor,
76
- borderWidth,
77
- opacity,
78
- transform: transforms.length > 0 ? transforms : undefined,
79
- // Only apply shadow if we have a fill (RN shadows need backgroundColor)
80
- ...(glowColor && glowRadius > 0 && hasFillForShadow && {
81
- shadowColor: glowColor,
82
- shadowOffset: {
83
- width: 0,
84
- height: 0
85
- },
86
- shadowOpacity: 0.9,
87
- shadowRadius: glowRadius * 0.8
88
- })
89
- };
90
-
91
- // For border-only elements (rings), create glow using a filled circle with shadow
92
- // The trick: use backgroundColor:'#000' (matches icon bg) so shadow renders,
93
- // with glowColor on the border for the visible glow effect
94
- if (needsSeparateGlow) {
95
- const strokeW = borderWidth || 1;
96
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
97
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
98
- style: {
99
- position: 'absolute',
100
- left: cx - r,
101
- top: cy - r,
102
- width: r * 2,
103
- height: r * 2,
104
- borderRadius: r,
105
- backgroundColor: '#000',
106
- // Matches icon bg - enables shadow
107
- borderWidth: strokeW,
108
- borderColor: glowColor,
109
- opacity: 0.5,
110
- transform: transforms.length > 0 ? transforms : undefined,
111
- shadowColor: glowColor,
112
- shadowOffset: {
113
- width: 0,
114
- height: 0
115
- },
116
- shadowOpacity: 0.9,
117
- shadowRadius: 8
118
- }
119
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
120
- style: style
121
- })]
122
- });
123
- }
124
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
125
- style: style
126
- });
127
- };
128
- exports.IconCircle = IconCircle;
129
- const IconRect = ({
130
- x,
131
- y,
132
- width,
133
- height,
134
- fill,
135
- borderColor,
136
- borderWidth = 0,
137
- borderRadius = 0,
138
- opacity = 1,
139
- glowColor,
140
- glowRadius = 0,
141
- rotation,
142
- originX = 0.5,
143
- // default center
144
- originY = 0.5 // default center
145
- }) => {
146
- // Build transform array
147
- // React Native rotates around center by default.
148
- // To rotate around a custom origin, we:
149
- // 1. Translate so the origin point moves to center
150
- // 2. Rotate
151
- // 3. Translate back
152
-
153
- const transforms = [];
154
- if (rotation !== undefined) {
155
- // Calculate offset from center to desired origin
156
- // originX/originY are 0-1 values (0=left/top, 0.5=center, 1=right/bottom)
157
- const offsetX = (0.5 - originX) * width;
158
- const offsetY = (0.5 - originY) * height;
159
-
160
- // Apply transforms: translate to origin, rotate, translate back
161
- if (offsetX !== 0 || offsetY !== 0) {
162
- transforms.push({
163
- translateX: -offsetX
164
- });
165
- transforms.push({
166
- translateY: -offsetY
167
- });
168
- }
169
- transforms.push({
170
- rotate: `${rotation}deg`
171
- });
172
- if (offsetX !== 0 || offsetY !== 0) {
173
- transforms.push({
174
- translateX: offsetX
175
- });
176
- transforms.push({
177
- translateY: offsetY
178
- });
179
- }
180
- }
181
-
182
- // Check if this is a "transparent" element (border-only)
183
- // RN shadows require backgroundColor, so we need a separate glow layer
184
- const hasGlow = glowColor && glowRadius > 0;
185
- const needsSeparateGlow = hasGlow && (!fill || fill === 'transparent');
186
- const hasFillForShadow = fill && fill !== 'transparent';
187
- const style = {
188
- position: 'absolute',
189
- left: x,
190
- top: y,
191
- width,
192
- height,
193
- borderRadius,
194
- backgroundColor: fill,
195
- borderColor,
196
- borderWidth,
197
- opacity,
198
- transform: transforms.length > 0 ? transforms : undefined,
199
- // Only apply shadow if we have a fill (RN shadows need backgroundColor)
200
- ...(hasGlow && hasFillForShadow && {
201
- shadowColor: glowColor,
202
- shadowOffset: {
203
- width: 0,
204
- height: 0
205
- },
206
- shadowOpacity: 0.9,
207
- shadowRadius: glowRadius * 0.8
208
- })
209
- };
210
-
211
- // For border-only elements, render a glow rect with shadow
212
- if (needsSeparateGlow) {
213
- const strokeW = borderWidth || 1;
214
- const glowExpand = strokeW;
215
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
216
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
217
- style: {
218
- position: 'absolute',
219
- left: x - glowExpand,
220
- top: y - glowExpand,
221
- width: width + glowExpand * 2,
222
- height: height + glowExpand * 2,
223
- borderRadius: borderRadius + glowExpand,
224
- borderWidth: strokeW * 2,
225
- borderColor: glowColor,
226
- opacity: 0.4,
227
- transform: transforms.length > 0 ? transforms : undefined,
228
- shadowColor: glowColor,
229
- shadowOffset: {
230
- width: 0,
231
- height: 0
232
- },
233
- shadowOpacity: 0.8,
234
- shadowRadius: strokeW * 4
235
- }
236
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
237
- style: style
238
- })]
239
- });
240
- }
241
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
242
- style: style
243
- });
244
- };
245
-
246
- /**
247
- * Calculates a point on a quadratic Bezier curve (1 control point)
248
- * B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2
249
- */
250
- exports.IconRect = IconRect;
251
- function getQuadraticBezierPoint(t, p0x, p0y, p1x, p1y, p2x, p2y) {
252
- const mt = 1 - t;
253
- return {
254
- x: mt * mt * p0x + 2 * mt * t * p1x + t * t * p2x,
255
- y: mt * mt * p0y + 2 * mt * t * p1y + t * t * p2y
256
- };
257
- }
258
-
259
- /**
260
- * Calculates a point on a cubic Bezier curve (2 control points)
261
- * B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
262
- */
263
- function getCubicBezierPoint(t, p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
264
- const mt = 1 - t;
265
- const mt2 = mt * mt;
266
- const mt3 = mt2 * mt;
267
- const t2 = t * t;
268
- const t3 = t2 * t;
269
- return {
270
- x: mt3 * p0x + 3 * mt2 * t * p1x + 3 * mt * t2 * p2x + t3 * p3x,
271
- y: mt3 * p0y + 3 * mt2 * t * p1y + 3 * mt * t2 * p2y + t3 * p3y
272
- };
273
- }
274
-
275
- /**
276
- * IconLine - draws a line between two points
277
- * Auto-calculates length and rotation from coordinates!
278
- * Supports curved lines via cubic Bezier (2 control points) or quadratic (1 control point).
279
- */
280
- const IconLine = ({
281
- x1,
282
- y1,
283
- x2,
284
- y2,
285
- stroke,
286
- strokeWidth = 1,
287
- opacity = 1,
288
- glowColor,
289
- glowRadius = 0,
290
- rotation = 0,
291
- curveX,
292
- curveY,
293
- curve2X,
294
- curve2Y
295
- }) => {
296
- // Check if this is a curved line (either control point set)
297
- const hasCurve1 = curveX !== undefined && curveX !== 0 || curveY !== undefined && curveY !== 0;
298
- const hasCurve2 = curve2X !== undefined && curve2X !== 0 || curve2Y !== undefined && curve2Y !== 0;
299
- const isCurved = hasCurve1 || hasCurve2;
300
- if (isCurved) {
301
- const midX = (x1 + x2) / 2;
302
- const midY = (y1 + y2) / 2;
303
-
304
- // Control points: offset from line midpoint
305
- const control1X = midX + (curveX ?? 0);
306
- const control1Y = midY + (curveY ?? 0);
307
- const control2X = midX + (curve2X ?? 0);
308
- const control2Y = midY + (curve2Y ?? 0);
309
-
310
- // Determine if cubic (2 distinct control points) or quadratic (1 control point)
311
- const isCubic = hasCurve1 && hasCurve2;
312
-
313
- // Estimate curve length using samples
314
- let approxLength = 0;
315
- const sampleCount = 20;
316
- let prevPt = {
317
- x: x1,
318
- y: y1
319
- };
320
- for (let i = 1; i <= sampleCount; i++) {
321
- const t = i / sampleCount;
322
- const pt = isCubic ? getCubicBezierPoint(t, x1, y1, control1X, control1Y, control2X, control2Y, x2, y2) : getQuadraticBezierPoint(t, x1, y1, hasCurve1 ? control1X : control2X, hasCurve1 ? control1Y : control2Y, x2, y2);
323
- approxLength += Math.sqrt((pt.x - prevPt.x) ** 2 + (pt.y - prevPt.y) ** 2);
324
- prevPt = pt;
325
- }
326
- const elements = [];
327
-
328
- // Dense circles for smooth body
329
- const circleSpacing = Math.max(0.05, strokeWidth * 0.02);
330
- const numCircles = Math.max(100, Math.ceil(approxLength / circleSpacing));
331
- for (let i = 0; i <= numCircles; i++) {
332
- const t = i / numCircles;
333
- const pt = isCubic ? getCubicBezierPoint(t, x1, y1, control1X, control1Y, control2X, control2Y, x2, y2) : getQuadraticBezierPoint(t, x1, y1, hasCurve1 ? control1X : control2X, hasCurve1 ? control1Y : control2Y, x2, y2);
334
- const circleStyle = {
335
- position: 'absolute',
336
- left: pt.x - strokeWidth / 2,
337
- top: pt.y - strokeWidth / 2,
338
- width: strokeWidth,
339
- height: strokeWidth,
340
- borderRadius: strokeWidth / 2,
341
- backgroundColor: stroke,
342
- opacity
343
- };
344
- elements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
345
- style: circleStyle
346
- }, `c${i}`));
347
- }
348
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
349
- children: elements
350
- });
351
- }
352
-
353
- // Straight line (original logic)
354
- const dx = x2 - x1;
355
- const dy = y2 - y1;
356
- const length = Math.sqrt(dx * dx + dy * dy);
357
- const angle = Math.atan2(dy, dx) * (180 / Math.PI);
358
-
359
- // Position at midpoint of line
360
- const centerX = (x1 + x2) / 2;
361
- const centerY = (y1 + y2) / 2;
362
-
363
- // Total rotation = line angle + additional rotation
364
- const totalRotation = angle + rotation;
365
- const hasGlow = glowColor && glowRadius > 0;
366
- const style = {
367
- position: 'absolute',
368
- left: centerX - length / 2,
369
- top: centerY - strokeWidth / 2,
370
- width: length,
371
- height: strokeWidth,
372
- backgroundColor: stroke,
373
- opacity,
374
- transform: [{
375
- rotate: `${totalRotation}deg`
376
- }],
377
- borderRadius: strokeWidth / 2
378
- };
379
-
380
- // For neon glow effect, render a glow line with shadow
381
- if (hasGlow) {
382
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
383
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
384
- style: {
385
- position: 'absolute',
386
- left: centerX - length / 2,
387
- top: centerY - strokeWidth / 2,
388
- width: length,
389
- height: strokeWidth,
390
- backgroundColor: glowColor,
391
- opacity: 0.5,
392
- transform: [{
393
- rotate: `${totalRotation}deg`
394
- }],
395
- borderRadius: strokeWidth / 2,
396
- // Shadow creates the glow
397
- shadowColor: glowColor,
398
- shadowOffset: {
399
- width: 0,
400
- height: 0
401
- },
402
- shadowOpacity: 0.9,
403
- shadowRadius: 8
404
- }
405
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
406
- style: style
407
- })]
408
- });
409
- }
410
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
411
- style: style
412
- });
413
- };
414
-
415
- /**
416
- * IconTriangle - creates triangles using CSS border trick
417
- * Works in pure React Native!
418
- */
419
- exports.IconLine = IconLine;
420
- const IconTriangle = ({
421
- x,
422
- y,
423
- size,
424
- direction,
425
- fill,
426
- opacity = 1,
427
- rotation
428
- }) => {
429
- // CSS border trick: use transparent borders to create triangle
430
- // The size is the height of the triangle
431
- const halfWidth = size * 0.577; // size / sqrt(3) for equilateral-ish triangle
432
-
433
- // Build border styles based on direction
434
- let borderStyles = {};
435
- let offsetX = 0;
436
- let offsetY = 0;
437
- switch (direction) {
438
- case 'down':
439
- borderStyles = {
440
- borderLeftWidth: halfWidth,
441
- borderRightWidth: halfWidth,
442
- borderTopWidth: size,
443
- borderLeftColor: 'transparent',
444
- borderRightColor: 'transparent',
445
- borderTopColor: fill
446
- };
447
- offsetX = -halfWidth;
448
- offsetY = 0;
449
- break;
450
- case 'up':
451
- borderStyles = {
452
- borderLeftWidth: halfWidth,
453
- borderRightWidth: halfWidth,
454
- borderBottomWidth: size,
455
- borderLeftColor: 'transparent',
456
- borderRightColor: 'transparent',
457
- borderBottomColor: fill
458
- };
459
- offsetX = -halfWidth;
460
- offsetY = -size;
461
- break;
462
- case 'left':
463
- borderStyles = {
464
- borderTopWidth: halfWidth,
465
- borderBottomWidth: halfWidth,
466
- borderRightWidth: size,
467
- borderTopColor: 'transparent',
468
- borderBottomColor: 'transparent',
469
- borderRightColor: fill
470
- };
471
- offsetX = -size;
472
- offsetY = -halfWidth;
473
- break;
474
- case 'right':
475
- borderStyles = {
476
- borderTopWidth: halfWidth,
477
- borderBottomWidth: halfWidth,
478
- borderLeftWidth: size,
479
- borderTopColor: 'transparent',
480
- borderBottomColor: 'transparent',
481
- borderLeftColor: fill
482
- };
483
- offsetX = 0;
484
- offsetY = -halfWidth;
485
- break;
486
- }
487
-
488
- // Build transforms
489
- const transforms = [];
490
- if (rotation !== undefined) {
491
- transforms.push({
492
- rotate: `${rotation}deg`
493
- });
494
- }
495
- const style = {
496
- position: 'absolute',
497
- left: x + offsetX,
498
- top: y + offsetY,
499
- width: 0,
500
- height: 0,
501
- opacity,
502
- ...borderStyles,
503
- transform: transforms.length > 0 ? transforms : undefined
504
- };
505
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
506
- style: style
507
- });
508
- };
509
-
510
- /**
511
- * IconArc - draws an arc using multiple line segments
512
- * Creates smooth curves in pure React Native!
513
- */
514
- exports.IconTriangle = IconTriangle;
515
- const IconArc = ({
516
- cx,
517
- cy,
518
- r,
519
- startAngle,
520
- endAngle,
521
- stroke,
522
- strokeWidth = 1.5,
523
- opacity = 1,
524
- segments
525
- }) => {
526
- // Calculate number of segments based on arc length
527
- const arcLength = Math.abs(endAngle - startAngle);
528
- const autoSegments = Math.max(8, Math.ceil(arcLength / 10)); // ~10 degrees per segment
529
- const numSegments = segments ?? autoSegments;
530
-
531
- // Generate line segments
532
- const lines = [];
533
- const angleStep = (endAngle - startAngle) / numSegments;
534
- for (let i = 0; i < numSegments; i++) {
535
- const angle1 = startAngle + i * angleStep;
536
- const angle2 = startAngle + (i + 1) * angleStep;
537
-
538
- // Convert to radians
539
- const rad1 = angle1 * Math.PI / 180;
540
- const rad2 = angle2 * Math.PI / 180;
541
-
542
- // Calculate segment endpoints
543
- const x1 = cx + r * Math.cos(rad1);
544
- const y1 = cy + r * Math.sin(rad1);
545
- const x2 = cx + r * Math.cos(rad2);
546
- const y2 = cy + r * Math.sin(rad2);
547
-
548
- // Calculate segment geometry
549
- const dx = x2 - x1;
550
- const dy = y2 - y1;
551
- const length = Math.sqrt(dx * dx + dy * dy);
552
- const angle = Math.atan2(dy, dx) * (180 / Math.PI);
553
- const midX = (x1 + x2) / 2;
554
- const midY = (y1 + y2) / 2;
555
- const style = {
556
- position: 'absolute',
557
- left: midX - length / 2,
558
- top: midY - strokeWidth / 2,
559
- width: length,
560
- height: strokeWidth,
561
- backgroundColor: stroke,
562
- opacity,
563
- transform: [{
564
- rotate: `${angle}deg`
565
- }],
566
- borderRadius: strokeWidth / 2
567
- };
568
- lines.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
569
- style: style
570
- }, i));
571
- }
572
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
573
- children: lines
574
- });
575
- };
576
-
577
- /**
578
- * IconSemicircle - creates a half circle (filled)
579
- * Perfect for pokeball-style split designs!
580
- */
581
- exports.IconArc = IconArc;
582
- const IconSemicircle = ({
583
- cx,
584
- cy,
585
- r,
586
- half,
587
- fill,
588
- borderColor,
589
- borderWidth = 0,
590
- opacity = 1,
591
- glowColor,
592
- glowRadius = 0
593
- }) => {
594
- const diameter = r * 2;
595
-
596
- // Calculate position and border radii based on which half
597
- let left;
598
- let top;
599
- let width;
600
- let height;
601
- let borderTopLeftRadius = 0;
602
- let borderTopRightRadius = 0;
603
- let borderBottomLeftRadius = 0;
604
- let borderBottomRightRadius = 0;
605
- switch (half) {
606
- case 'top':
607
- left = cx - r;
608
- top = cy - r;
609
- width = diameter;
610
- height = r;
611
- borderTopLeftRadius = r;
612
- borderTopRightRadius = r;
613
- break;
614
- case 'bottom':
615
- left = cx - r;
616
- top = cy;
617
- width = diameter;
618
- height = r;
619
- borderBottomLeftRadius = r;
620
- borderBottomRightRadius = r;
621
- break;
622
- case 'left':
623
- left = cx - r;
624
- top = cy - r;
625
- width = r;
626
- height = diameter;
627
- borderTopLeftRadius = r;
628
- borderBottomLeftRadius = r;
629
- break;
630
- case 'right':
631
- left = cx;
632
- top = cy - r;
633
- width = r;
634
- height = diameter;
635
- borderTopRightRadius = r;
636
- borderBottomRightRadius = r;
637
- break;
638
- }
639
-
640
- // Check if this is a "transparent" element (border-only)
641
- // RN shadows require backgroundColor, so we need a separate glow layer
642
- const hasGlow = glowColor && glowRadius > 0;
643
- const needsSeparateGlow = hasGlow && (!fill || fill === 'transparent');
644
- const hasFillForShadow = fill && fill !== 'transparent';
645
- const style = {
646
- position: 'absolute',
647
- left,
648
- top,
649
- width,
650
- height,
651
- borderTopLeftRadius,
652
- borderTopRightRadius,
653
- borderBottomLeftRadius,
654
- borderBottomRightRadius,
655
- backgroundColor: fill,
656
- borderColor,
657
- borderWidth,
658
- opacity,
659
- // Only apply shadow if we have a fill (RN shadows need backgroundColor)
660
- ...(hasGlow && hasFillForShadow && {
661
- shadowColor: glowColor,
662
- shadowOffset: {
663
- width: 0,
664
- height: 0
665
- },
666
- shadowOpacity: 0.9,
667
- shadowRadius: glowRadius * 0.8
668
- })
669
- };
670
-
671
- // For border-only elements, render a glow semicircle with shadow
672
- if (needsSeparateGlow) {
673
- const strokeW = borderWidth || 1;
674
- const glowExpand = strokeW;
675
- const glowR = r + glowExpand;
676
- const glowWidth = half === 'left' || half === 'right' ? glowR : glowR * 2;
677
- const glowHeight = half === 'top' || half === 'bottom' ? glowR : glowR * 2;
678
- const glowLeft = cx - (half === 'right' ? 0 : glowR);
679
- const glowTop = cy - (half === 'bottom' ? 0 : glowR);
680
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
681
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
682
- style: {
683
- position: 'absolute',
684
- left: glowLeft,
685
- top: glowTop,
686
- width: glowWidth,
687
- height: glowHeight,
688
- borderTopLeftRadius: half === 'top' || half === 'left' ? glowR : 0,
689
- borderTopRightRadius: half === 'top' || half === 'right' ? glowR : 0,
690
- borderBottomLeftRadius: half === 'bottom' || half === 'left' ? glowR : 0,
691
- borderBottomRightRadius: half === 'bottom' || half === 'right' ? glowR : 0,
692
- borderWidth: strokeW * 2,
693
- borderColor: glowColor,
694
- opacity: 0.4,
695
- shadowColor: glowColor,
696
- shadowOffset: {
697
- width: 0,
698
- height: 0
699
- },
700
- shadowOpacity: 0.8,
701
- shadowRadius: strokeW * 4
702
- }
703
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
704
- style: style
705
- })]
706
- });
707
- }
708
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
709
- style: style
710
- });
711
- };
712
-
713
- /**
714
- * IconSmoothArc - creates a smooth arc using the border trick
715
- * Uses bordered circles with partial borders hidden - gives perfect anti-aliased curves!
716
- * This is how the WiFi icon achieves smooth lines without dots.
717
- */
718
- exports.IconSemicircle = IconSemicircle;
719
- const IconSmoothArc = ({
720
- cx,
721
- cy,
722
- r,
723
- stroke,
724
- strokeWidth = 2,
725
- opacity = 1,
726
- portion = 'bottom'
727
- }) => {
728
- const diameter = r * 2;
729
-
730
- // Build border colors based on which portion to show
731
- let borderTopColor = stroke;
732
- let borderBottomColor = stroke;
733
- let borderLeftColor = stroke;
734
- let borderRightColor = stroke;
735
- switch (portion) {
736
- case 'bottom':
737
- // Show bottom arc (hide top, left, right)
738
- borderTopColor = 'transparent';
739
- borderLeftColor = 'transparent';
740
- borderRightColor = 'transparent';
741
- break;
742
- case 'top':
743
- // Show top arc (hide bottom, left, right)
744
- borderBottomColor = 'transparent';
745
- borderLeftColor = 'transparent';
746
- borderRightColor = 'transparent';
747
- break;
748
- case 'left':
749
- // Show left arc (hide top, bottom, right)
750
- borderTopColor = 'transparent';
751
- borderBottomColor = 'transparent';
752
- borderRightColor = 'transparent';
753
- break;
754
- case 'right':
755
- // Show right arc (hide top, bottom, left)
756
- borderTopColor = 'transparent';
757
- borderBottomColor = 'transparent';
758
- borderLeftColor = 'transparent';
759
- break;
760
- }
761
- const style = {
762
- position: 'absolute',
763
- left: cx - r,
764
- top: cy - r,
765
- width: diameter,
766
- height: diameter,
767
- borderRadius: r,
768
- borderWidth: strokeWidth,
769
- borderTopColor,
770
- borderBottomColor,
771
- borderLeftColor,
772
- borderRightColor,
773
- opacity
774
- };
775
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
776
- style: style
777
- });
778
- };
779
- exports.IconSmoothArc = IconSmoothArc;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.IconTriangle=exports.IconSmoothArc=exports.IconSemicircle=exports.IconRect=exports.IconLine=exports.IconContainer=exports.IconCircle=exports.IconArc=void 0;var _reactNative=require("react-native"),_jsxRuntime=require("react/jsx-runtime");const IconContainer=({size:t,children:o})=>{const e={position:"relative",width:t,height:t};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:e,children:o})};exports.IconContainer=IconContainer;const IconCircle=({cx:t,cy:o,r:e,fill:r,borderColor:i,borderWidth:s=0,opacity:a=1,scaleX:n=1,scaleY:d=1,glowColor:c,glowRadius:h=0})=>{const l=2*e,p=[];1!==n&&p.push({scaleX:n}),1!==d&&p.push({scaleY:d});const u=c&&h>0&&(!r||"transparent"===r),b=r&&"transparent"!==r,x={position:"absolute",left:t-e,top:o-e,width:l,height:l,borderRadius:e,backgroundColor:r,borderColor:i,borderWidth:s,opacity:a,transform:p.length>0?p:void 0,...c&&h>0&&b&&{shadowColor:c,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:.8*h}};if(u){const r=s||1;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:t-e,top:o-e,width:2*e,height:2*e,borderRadius:e,backgroundColor:"#000",borderWidth:r,borderColor:c,opacity:.5,transform:p.length>0?p:void 0,shadowColor:c,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:8}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:x})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:x})};exports.IconCircle=IconCircle;const IconRect=({x:t,y:o,width:e,height:r,fill:i,borderColor:s,borderWidth:a=0,borderRadius:n=0,opacity:d=1,glowColor:c,glowRadius:h=0,rotation:l,originX:p=.5,originY:u=.5})=>{const b=[];if(void 0!==l){const t=(.5-p)*e,o=(.5-u)*r;0===t&&0===o||(b.push({translateX:-t}),b.push({translateY:-o})),b.push({rotate:`${l}deg`}),0===t&&0===o||(b.push({translateX:t}),b.push({translateY:o}))}const x=c&&h>0,g=x&&(!i||"transparent"===i),w=i&&"transparent"!==i,m={position:"absolute",left:t,top:o,width:e,height:r,borderRadius:n,backgroundColor:i,borderColor:s,borderWidth:a,opacity:d,transform:b.length>0?b:void 0,...x&&w&&{shadowColor:c,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:.8*h}};if(g){const i=a||1,s=i;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:t-s,top:o-s,width:e+2*s,height:r+2*s,borderRadius:n+s,borderWidth:2*i,borderColor:c,opacity:.4,transform:b.length>0?b:void 0,shadowColor:c,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4*i}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:m})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:m})};function getQuadraticBezierPoint(t,o,e,r,i,s,a){const n=1-t;return{x:n*n*o+2*n*t*r+t*t*s,y:n*n*e+2*n*t*i+t*t*a}}function getCubicBezierPoint(t,o,e,r,i,s,a,n,d){const c=1-t,h=c*c,l=h*c,p=t*t,u=p*t;return{x:l*o+3*h*t*r+3*c*p*s+u*n,y:l*e+3*h*t*i+3*c*p*a+u*d}}exports.IconRect=IconRect;const IconLine=({x1:t,y1:o,x2:e,y2:r,stroke:i,strokeWidth:s=1,opacity:a=1,glowColor:n,glowRadius:d=0,rotation:c=0,curveX:h,curveY:l,curve2X:p,curve2Y:u})=>{const b=void 0!==h&&0!==h||void 0!==l&&0!==l,x=void 0!==p&&0!==p||void 0!==u&&0!==u;if(b||x){const n=(t+e)/2,d=(o+r)/2,c=n+(h??0),g=d+(l??0),w=n+(p??0),m=d+(u??0),R=b&&x;let f=0;const y=20;let j={x:t,y:o};for(let i=1;i<=y;i++){const s=i/y,a=R?getCubicBezierPoint(s,t,o,c,g,w,m,e,r):getQuadraticBezierPoint(s,t,o,b?c:w,b?g:m,e,r);f+=Math.sqrt((a.x-j.x)**2+(a.y-j.y)**2),j=a}const C=[],_=Math.max(.05,.02*s),v=Math.max(100,Math.ceil(f/_));for(let n=0;n<=v;n++){const d=n/v,h=R?getCubicBezierPoint(d,t,o,c,g,w,m,e,r):getQuadraticBezierPoint(d,t,o,b?c:w,b?g:m,e,r),l={position:"absolute",left:h.x-s/2,top:h.y-s/2,width:s,height:s,borderRadius:s/2,backgroundColor:i,opacity:a};C.push((0,_jsxRuntime.jsx)(_reactNative.View,{style:l},`c${n}`))}return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:C})}const g=e-t,w=r-o,m=Math.sqrt(g*g+w*w),R=(t+e)/2,f=(o+r)/2,y=Math.atan2(w,g)*(180/Math.PI)+c,j={position:"absolute",left:R-m/2,top:f-s/2,width:m,height:s,backgroundColor:i,opacity:a,transform:[{rotate:`${y}deg`}],borderRadius:s/2};return n&&d>0?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:R-m/2,top:f-s/2,width:m,height:s,backgroundColor:n,opacity:.5,transform:[{rotate:`${y}deg`}],borderRadius:s/2,shadowColor:n,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:8}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:j})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:j})};exports.IconLine=IconLine;const IconTriangle=({x:t,y:o,size:e,direction:r,fill:i,opacity:s=1,rotation:a})=>{const n=.577*e;let d={},c=0,h=0;switch(r){case"down":d={borderLeftWidth:n,borderRightWidth:n,borderTopWidth:e,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:i},c=-n,h=0;break;case"up":d={borderLeftWidth:n,borderRightWidth:n,borderBottomWidth:e,borderLeftColor:"transparent",borderRightColor:"transparent",borderBottomColor:i},c=-n,h=-e;break;case"left":d={borderTopWidth:n,borderBottomWidth:n,borderRightWidth:e,borderTopColor:"transparent",borderBottomColor:"transparent",borderRightColor:i},c=-e,h=-n;break;case"right":d={borderTopWidth:n,borderBottomWidth:n,borderLeftWidth:e,borderTopColor:"transparent",borderBottomColor:"transparent",borderLeftColor:i},c=0,h=-n}const l=[];void 0!==a&&l.push({rotate:`${a}deg`});const p={position:"absolute",left:t+c,top:o+h,width:0,height:0,opacity:s,...d,transform:l.length>0?l:void 0};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:p})};exports.IconTriangle=IconTriangle;const IconArc=({cx:t,cy:o,r:e,startAngle:r,endAngle:i,stroke:s,strokeWidth:a=1.5,opacity:n=1,segments:d})=>{const c=Math.abs(i-r),h=Math.max(8,Math.ceil(c/10)),l=d??h,p=[],u=(i-r)/l;for(let i=0;i<l;i++){const d=r+(i+1)*u,c=(r+i*u)*Math.PI/180,h=d*Math.PI/180,l=t+e*Math.cos(c),b=o+e*Math.sin(c),x=t+e*Math.cos(h),g=o+e*Math.sin(h),w=x-l,m=g-b,R=Math.sqrt(w*w+m*m),f={position:"absolute",left:(l+x)/2-R/2,top:(b+g)/2-a/2,width:R,height:a,backgroundColor:s,opacity:n,transform:[{rotate:Math.atan2(m,w)*(180/Math.PI)+"deg"}],borderRadius:a/2};p.push((0,_jsxRuntime.jsx)(_reactNative.View,{style:f},i))}return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:p})};exports.IconArc=IconArc;const IconSemicircle=({cx:t,cy:o,r:e,half:r,fill:i,borderColor:s,borderWidth:a=0,opacity:n=1,glowColor:d,glowRadius:c=0})=>{const h=2*e;let l,p,u,b,x=0,g=0,w=0,m=0;switch(r){case"top":l=t-e,p=o-e,u=h,b=e,x=e,g=e;break;case"bottom":l=t-e,p=o,u=h,b=e,w=e,m=e;break;case"left":l=t-e,p=o-e,u=e,b=h,x=e,w=e;break;case"right":l=t,p=o-e,u=e,b=h,g=e,m=e}const R=d&&c>0,f={position:"absolute",left:l,top:p,width:u,height:b,borderTopLeftRadius:x,borderTopRightRadius:g,borderBottomLeftRadius:w,borderBottomRightRadius:m,backgroundColor:i,borderColor:s,borderWidth:a,opacity:n,...R&&i&&"transparent"!==i&&{shadowColor:d,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:.8*c}};if(R&&(!i||"transparent"===i)){const i=a||1,s=e+i,n="left"===r||"right"===r?s:2*s,c="top"===r||"bottom"===r?s:2*s,h=t-("right"===r?0:s),l=o-("bottom"===r?0:s);return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:h,top:l,width:n,height:c,borderTopLeftRadius:"top"===r||"left"===r?s:0,borderTopRightRadius:"top"===r||"right"===r?s:0,borderBottomLeftRadius:"bottom"===r||"left"===r?s:0,borderBottomRightRadius:"bottom"===r||"right"===r?s:0,borderWidth:2*i,borderColor:d,opacity:.4,shadowColor:d,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4*i}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:f})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:f})};exports.IconSemicircle=IconSemicircle;const IconSmoothArc=({cx:t,cy:o,r:e,stroke:r,strokeWidth:i=2,opacity:s=1,portion:a="bottom"})=>{const n=2*e;let d=r,c=r,h=r,l=r;switch(a){case"bottom":d="transparent",h="transparent",l="transparent";break;case"top":c="transparent",h="transparent",l="transparent";break;case"left":d="transparent",c="transparent",l="transparent";break;case"right":d="transparent",c="transparent",h="transparent"}const p={position:"absolute",left:t-e,top:o-e,width:n,height:n,borderRadius:e,borderWidth:i,borderTopColor:d,borderBottomColor:c,borderLeftColor:h,borderRightColor:l,opacity:s};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:p})};exports.IconSmoothArc=IconSmoothArc;