@buoy-gg/floating-tools-core 7.0.16 → 7.0.18
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.
- package/lib/commonjs/icons/generated/icon-data.g.js +1718 -429
- package/lib/commonjs/icons/icon-primitives.js +121 -77
- package/lib/commonjs/icons/icon-primitives.native.js +51 -1
- package/lib/commonjs/icons/icon-renderer.js +23 -3
- package/lib/commonjs/icons/riverpod-icon.js +26 -0
- package/lib/commonjs/icons/time-machine-icon.js +26 -0
- package/lib/commonjs/index.js +26 -0
- package/lib/module/icons/generated/icon-data.g.js +1716 -427
- package/lib/module/icons/icon-primitives.js +118 -75
- package/lib/module/icons/icon-primitives.native.js +50 -1
- package/lib/module/icons/icon-renderer.js +24 -4
- package/lib/module/icons/riverpod-icon.js +17 -0
- package/lib/module/icons/time-machine-icon.js +17 -0
- package/lib/module/index.js +2 -0
- package/lib/typescript/commonjs/icons/generated/icon-data.g.d.ts +6 -1
- package/lib/typescript/commonjs/icons/generated/icon-data.g.d.ts.map +1 -1
- package/lib/typescript/commonjs/icons/icon-primitives.d.ts +15 -0
- package/lib/typescript/commonjs/icons/icon-primitives.d.ts.map +1 -1
- package/lib/typescript/commonjs/icons/icon-primitives.native.d.ts +15 -0
- package/lib/typescript/commonjs/icons/icon-primitives.native.d.ts.map +1 -1
- package/lib/typescript/commonjs/icons/icon-renderer.d.ts +22 -1
- package/lib/typescript/commonjs/icons/icon-renderer.d.ts.map +1 -1
- package/lib/typescript/commonjs/icons/riverpod-icon.d.ts +14 -0
- package/lib/typescript/commonjs/icons/riverpod-icon.d.ts.map +1 -0
- package/lib/typescript/commonjs/icons/time-machine-icon.d.ts +14 -0
- package/lib/typescript/commonjs/icons/time-machine-icon.d.ts.map +1 -0
- package/lib/typescript/commonjs/index.d.ts +2 -0
- package/lib/typescript/commonjs/index.d.ts.map +1 -1
- package/lib/typescript/module/icons/generated/icon-data.g.d.ts +6 -1
- package/lib/typescript/module/icons/generated/icon-data.g.d.ts.map +1 -1
- package/lib/typescript/module/icons/icon-primitives.d.ts +15 -0
- package/lib/typescript/module/icons/icon-primitives.d.ts.map +1 -1
- package/lib/typescript/module/icons/icon-primitives.native.d.ts +15 -0
- package/lib/typescript/module/icons/icon-primitives.native.d.ts.map +1 -1
- package/lib/typescript/module/icons/icon-renderer.d.ts +22 -1
- package/lib/typescript/module/icons/icon-renderer.d.ts.map +1 -1
- package/lib/typescript/module/icons/riverpod-icon.d.ts +14 -0
- package/lib/typescript/module/icons/riverpod-icon.d.ts.map +1 -0
- package/lib/typescript/module/icons/time-machine-icon.d.ts +14 -0
- package/lib/typescript/module/icons/time-machine-icon.d.ts.map +1 -0
- package/lib/typescript/module/index.d.ts +2 -0
- package/lib/typescript/module/index.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.IconTriangle = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
|
|
6
|
+
exports.IconTriangle = exports.IconText = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
|
|
7
7
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
8
|
/**
|
|
9
9
|
* Icon Primitives - WEB
|
|
@@ -12,6 +12,16 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
12
12
|
* Mobile bundlers (Metro) pick icon-primitives.native.tsx instead.
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* Round to 2 decimals. Computed geometry must not carry full float precision
|
|
17
|
+
* into inline styles: the browser's CSSOM re-serializes numbers to ~6
|
|
18
|
+
* significant digits (e.g. rotate(117.64597536373869deg) -> "117.646deg"), so
|
|
19
|
+
* on server-rendered pages (buoy.gg docs) every full-precision value becomes a
|
|
20
|
+
* React hydration mismatch. Two decimals round-trip exactly and are far below
|
|
21
|
+
* visual tolerance at icon sizes.
|
|
22
|
+
*/
|
|
23
|
+
const r2 = n => Math.round(n * 100) / 100;
|
|
24
|
+
|
|
15
25
|
// ===========================================
|
|
16
26
|
// Types
|
|
17
27
|
// ===========================================
|
|
@@ -26,8 +36,8 @@ const IconContainer = ({
|
|
|
26
36
|
}) => {
|
|
27
37
|
const style = {
|
|
28
38
|
position: 'relative',
|
|
29
|
-
width: size,
|
|
30
|
-
height: size
|
|
39
|
+
width: r2(size),
|
|
40
|
+
height: r2(size)
|
|
31
41
|
};
|
|
32
42
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
33
43
|
style: style,
|
|
@@ -45,15 +55,15 @@ function createNeonGlow(color, radius) {
|
|
|
45
55
|
// Layer 2: Medium spread
|
|
46
56
|
// Layer 3: Wide soft outer glow
|
|
47
57
|
// Layer 4: Very wide ambient glow
|
|
48
|
-
return [`0 0 ${radius * 0.15}px ${color}`,
|
|
58
|
+
return [`0 0 ${r2(radius * 0.15)}px ${color}`,
|
|
49
59
|
// Bright core
|
|
50
|
-
`0 0 ${radius * 0.3}px ${color}`,
|
|
60
|
+
`0 0 ${r2(radius * 0.3)}px ${color}`,
|
|
51
61
|
// Inner glow
|
|
52
|
-
`0 0 ${radius * 0.6}px ${color}cc`,
|
|
62
|
+
`0 0 ${r2(radius * 0.6)}px ${color}cc`,
|
|
53
63
|
// Medium glow (80% opacity)
|
|
54
|
-
`0 0 ${radius}px ${color}80`,
|
|
64
|
+
`0 0 ${r2(radius)}px ${color}80`,
|
|
55
65
|
// Outer glow (50% opacity)
|
|
56
|
-
`0 0 ${radius * 1.5}px ${color}40` // Ambient glow (25% opacity)
|
|
66
|
+
`0 0 ${r2(radius * 1.5)}px ${color}40` // Ambient glow (25% opacity)
|
|
57
67
|
].join(', ');
|
|
58
68
|
}
|
|
59
69
|
const IconCircle = ({
|
|
@@ -72,18 +82,18 @@ const IconCircle = ({
|
|
|
72
82
|
}) => {
|
|
73
83
|
const diameter = r * 2;
|
|
74
84
|
const transforms = [];
|
|
75
|
-
if (scaleX !== 1) transforms.push(`scaleX(${scaleX})`);
|
|
76
|
-
if (scaleY !== 1) transforms.push(`scaleY(${scaleY})`);
|
|
77
|
-
if (rotation !== 0) transforms.push(`rotate(${rotation}deg)`);
|
|
85
|
+
if (scaleX !== 1) transforms.push(`scaleX(${r2(scaleX)})`);
|
|
86
|
+
if (scaleY !== 1) transforms.push(`scaleY(${r2(scaleY)})`);
|
|
87
|
+
if (rotation !== 0) transforms.push(`rotate(${r2(rotation)}deg)`);
|
|
78
88
|
const style = {
|
|
79
89
|
position: 'absolute',
|
|
80
|
-
left: cx - r,
|
|
81
|
-
top: cy - r,
|
|
82
|
-
width: diameter,
|
|
83
|
-
height: diameter,
|
|
84
|
-
borderRadius: r,
|
|
90
|
+
left: r2(cx - r),
|
|
91
|
+
top: r2(cy - r),
|
|
92
|
+
width: r2(diameter),
|
|
93
|
+
height: r2(diameter),
|
|
94
|
+
borderRadius: r2(r),
|
|
85
95
|
backgroundColor: fill,
|
|
86
|
-
border: borderColor ? `${borderWidth}px solid ${borderColor}` : undefined,
|
|
96
|
+
border: borderColor ? `${r2(borderWidth)}px solid ${borderColor}` : undefined,
|
|
87
97
|
opacity,
|
|
88
98
|
transform: transforms.length > 0 ? transforms.join(' ') : undefined,
|
|
89
99
|
transformOrigin: '50% 50%',
|
|
@@ -113,29 +123,63 @@ const IconRect = ({
|
|
|
113
123
|
}) => {
|
|
114
124
|
const style = {
|
|
115
125
|
position: 'absolute',
|
|
116
|
-
left: x,
|
|
117
|
-
top: y,
|
|
118
|
-
width,
|
|
119
|
-
height,
|
|
120
|
-
borderRadius,
|
|
126
|
+
left: r2(x),
|
|
127
|
+
top: r2(y),
|
|
128
|
+
width: r2(width),
|
|
129
|
+
height: r2(height),
|
|
130
|
+
borderRadius: r2(borderRadius),
|
|
121
131
|
backgroundColor: fill,
|
|
122
|
-
border: borderColor ? `${borderWidth}px solid ${borderColor}` : undefined,
|
|
132
|
+
border: borderColor ? `${r2(borderWidth)}px solid ${borderColor}` : undefined,
|
|
123
133
|
opacity,
|
|
124
134
|
boxShadow: glowColor && glowRadius > 0 ? createNeonGlow(glowColor, glowRadius) : undefined,
|
|
125
135
|
boxSizing: 'border-box',
|
|
126
|
-
transform: rotation !== undefined ? `rotate(${rotation}deg)` : undefined,
|
|
127
|
-
transformOrigin: rotation !== undefined ? `${originX * 100}% ${originY * 100}%` : undefined
|
|
136
|
+
transform: rotation !== undefined ? `rotate(${r2(rotation)}deg)` : undefined,
|
|
137
|
+
transformOrigin: rotation !== undefined ? `${r2(originX * 100)}% ${r2(originY * 100)}%` : undefined
|
|
128
138
|
};
|
|
129
139
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
130
140
|
style: style
|
|
131
141
|
});
|
|
132
142
|
};
|
|
143
|
+
exports.IconRect = IconRect;
|
|
144
|
+
const IconText = ({
|
|
145
|
+
x,
|
|
146
|
+
y,
|
|
147
|
+
text,
|
|
148
|
+
fontSize,
|
|
149
|
+
fontWeight = 700,
|
|
150
|
+
align = 'center',
|
|
151
|
+
fill,
|
|
152
|
+
opacity = 1,
|
|
153
|
+
rotation,
|
|
154
|
+
letterSpacing = 0
|
|
155
|
+
}) => {
|
|
156
|
+
const translateX = align === 'left' ? '0%' : align === 'right' ? '-100%' : '-50%';
|
|
157
|
+
const style = {
|
|
158
|
+
position: 'absolute',
|
|
159
|
+
left: r2(x),
|
|
160
|
+
top: r2(y),
|
|
161
|
+
transform: `translate(${translateX}, -50%)${rotation !== undefined ? ` rotate(${r2(rotation)}deg)` : ''}`,
|
|
162
|
+
color: fill,
|
|
163
|
+
fontSize: r2(fontSize),
|
|
164
|
+
fontWeight,
|
|
165
|
+
lineHeight: 1,
|
|
166
|
+
whiteSpace: 'nowrap',
|
|
167
|
+
fontFamily: "'Helvetica Neue', Arial, sans-serif",
|
|
168
|
+
letterSpacing,
|
|
169
|
+
opacity,
|
|
170
|
+
userSelect: 'none'
|
|
171
|
+
};
|
|
172
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
173
|
+
style: style,
|
|
174
|
+
children: text
|
|
175
|
+
});
|
|
176
|
+
};
|
|
133
177
|
|
|
134
178
|
/**
|
|
135
179
|
* Calculates a point on a quadratic Bezier curve (1 control point)
|
|
136
180
|
* B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2
|
|
137
181
|
*/
|
|
138
|
-
exports.
|
|
182
|
+
exports.IconText = IconText;
|
|
139
183
|
function getQuadraticBezierPoint(t, p0x, p0y, p1x, p1y, p2x, p2y) {
|
|
140
184
|
const mt = 1 - t;
|
|
141
185
|
return {
|
|
@@ -221,10 +265,10 @@ const IconLine = ({
|
|
|
221
265
|
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);
|
|
222
266
|
const circleStyle = {
|
|
223
267
|
position: 'absolute',
|
|
224
|
-
left: pt.x - strokeWidth / 2,
|
|
225
|
-
top: pt.y - strokeWidth / 2,
|
|
226
|
-
width: strokeWidth,
|
|
227
|
-
height: strokeWidth,
|
|
268
|
+
left: r2(pt.x - strokeWidth / 2),
|
|
269
|
+
top: r2(pt.y - strokeWidth / 2),
|
|
270
|
+
width: r2(strokeWidth),
|
|
271
|
+
height: r2(strokeWidth),
|
|
228
272
|
borderRadius: '50%',
|
|
229
273
|
backgroundColor: stroke,
|
|
230
274
|
opacity,
|
|
@@ -253,15 +297,15 @@ const IconLine = ({
|
|
|
253
297
|
const totalRotation = angle + rotation;
|
|
254
298
|
const style = {
|
|
255
299
|
position: 'absolute',
|
|
256
|
-
left: centerX - length / 2,
|
|
257
|
-
top: centerY - strokeWidth / 2,
|
|
258
|
-
width: length,
|
|
259
|
-
height: strokeWidth,
|
|
300
|
+
left: r2(centerX - length / 2),
|
|
301
|
+
top: r2(centerY - strokeWidth / 2),
|
|
302
|
+
width: r2(length),
|
|
303
|
+
height: r2(strokeWidth),
|
|
260
304
|
backgroundColor: stroke,
|
|
261
305
|
opacity,
|
|
262
|
-
transform: `rotate(${totalRotation}deg)`,
|
|
306
|
+
transform: `rotate(${r2(totalRotation)}deg)`,
|
|
263
307
|
transformOrigin: '50% 50%',
|
|
264
|
-
borderRadius: strokeWidth / 2,
|
|
308
|
+
borderRadius: r2(strokeWidth / 2),
|
|
265
309
|
boxShadow: glowColor && glowRadius > 0 ? createNeonGlow(glowColor, glowRadius) : undefined
|
|
266
310
|
};
|
|
267
311
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -285,7 +329,7 @@ const IconTriangle = ({
|
|
|
285
329
|
}) => {
|
|
286
330
|
// CSS border trick: use transparent borders to create triangle
|
|
287
331
|
// The size is the height of the triangle, width is size * 2 / sqrt(3) for equilateral
|
|
288
|
-
const halfWidth = size * 0.577; // size / sqrt(3) for equilateral-ish triangle
|
|
332
|
+
const halfWidth = r2(size * 0.577); // size / sqrt(3) for equilateral-ish triangle
|
|
289
333
|
|
|
290
334
|
// Build border styles based on direction
|
|
291
335
|
let borderStyles = {};
|
|
@@ -296,7 +340,7 @@ const IconTriangle = ({
|
|
|
296
340
|
borderStyles = {
|
|
297
341
|
borderLeft: `${halfWidth}px solid transparent`,
|
|
298
342
|
borderRight: `${halfWidth}px solid transparent`,
|
|
299
|
-
borderTop: `${size}px solid ${fill}`
|
|
343
|
+
borderTop: `${r2(size)}px solid ${fill}`
|
|
300
344
|
};
|
|
301
345
|
offsetX = -halfWidth;
|
|
302
346
|
offsetY = 0;
|
|
@@ -305,7 +349,7 @@ const IconTriangle = ({
|
|
|
305
349
|
borderStyles = {
|
|
306
350
|
borderLeft: `${halfWidth}px solid transparent`,
|
|
307
351
|
borderRight: `${halfWidth}px solid transparent`,
|
|
308
|
-
borderBottom: `${size}px solid ${fill}`
|
|
352
|
+
borderBottom: `${r2(size)}px solid ${fill}`
|
|
309
353
|
};
|
|
310
354
|
offsetX = -halfWidth;
|
|
311
355
|
offsetY = -size;
|
|
@@ -314,7 +358,7 @@ const IconTriangle = ({
|
|
|
314
358
|
borderStyles = {
|
|
315
359
|
borderTop: `${halfWidth}px solid transparent`,
|
|
316
360
|
borderBottom: `${halfWidth}px solid transparent`,
|
|
317
|
-
borderRight: `${size}px solid ${fill}`
|
|
361
|
+
borderRight: `${r2(size)}px solid ${fill}`
|
|
318
362
|
};
|
|
319
363
|
offsetX = -size;
|
|
320
364
|
offsetY = -halfWidth;
|
|
@@ -323,7 +367,7 @@ const IconTriangle = ({
|
|
|
323
367
|
borderStyles = {
|
|
324
368
|
borderTop: `${halfWidth}px solid transparent`,
|
|
325
369
|
borderBottom: `${halfWidth}px solid transparent`,
|
|
326
|
-
borderLeft: `${size}px solid ${fill}`
|
|
370
|
+
borderLeft: `${r2(size)}px solid ${fill}`
|
|
327
371
|
};
|
|
328
372
|
offsetX = 0;
|
|
329
373
|
offsetY = -halfWidth;
|
|
@@ -331,12 +375,12 @@ const IconTriangle = ({
|
|
|
331
375
|
}
|
|
332
376
|
const transforms = [];
|
|
333
377
|
if (rotation !== undefined) {
|
|
334
|
-
transforms.push(`rotate(${rotation}deg)`);
|
|
378
|
+
transforms.push(`rotate(${r2(rotation)}deg)`);
|
|
335
379
|
}
|
|
336
380
|
const style = {
|
|
337
381
|
position: 'absolute',
|
|
338
|
-
left: x + offsetX,
|
|
339
|
-
top: y + offsetY,
|
|
382
|
+
left: r2(x + offsetX),
|
|
383
|
+
top: r2(y + offsetY),
|
|
340
384
|
width: 0,
|
|
341
385
|
height: 0,
|
|
342
386
|
opacity,
|
|
@@ -396,15 +440,15 @@ const IconArc = ({
|
|
|
396
440
|
const midY = (y1 + y2) / 2;
|
|
397
441
|
const style = {
|
|
398
442
|
position: 'absolute',
|
|
399
|
-
left: midX - length / 2,
|
|
400
|
-
top: midY - strokeWidth / 2,
|
|
401
|
-
width: length,
|
|
402
|
-
height: strokeWidth,
|
|
443
|
+
left: r2(midX - length / 2),
|
|
444
|
+
top: r2(midY - strokeWidth / 2),
|
|
445
|
+
width: r2(length),
|
|
446
|
+
height: r2(strokeWidth),
|
|
403
447
|
backgroundColor: stroke,
|
|
404
448
|
opacity,
|
|
405
|
-
transform: `rotate(${angle}deg)`,
|
|
449
|
+
transform: `rotate(${r2(angle)}deg)`,
|
|
406
450
|
transformOrigin: '50% 50%',
|
|
407
|
-
borderRadius: strokeWidth / 2
|
|
451
|
+
borderRadius: r2(strokeWidth / 2)
|
|
408
452
|
};
|
|
409
453
|
lines.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
410
454
|
style: style
|
|
@@ -442,32 +486,32 @@ const IconSemicircle = ({
|
|
|
442
486
|
let borderRadius;
|
|
443
487
|
switch (half) {
|
|
444
488
|
case 'top':
|
|
445
|
-
left = cx - r;
|
|
446
|
-
top = cy - r;
|
|
447
|
-
width = diameter;
|
|
448
|
-
height = r;
|
|
449
|
-
borderRadius = `${r}px ${r}px 0 0`;
|
|
489
|
+
left = r2(cx - r);
|
|
490
|
+
top = r2(cy - r);
|
|
491
|
+
width = r2(diameter);
|
|
492
|
+
height = r2(r);
|
|
493
|
+
borderRadius = `${r2(r)}px ${r2(r)}px 0 0`;
|
|
450
494
|
break;
|
|
451
495
|
case 'bottom':
|
|
452
|
-
left = cx - r;
|
|
453
|
-
top = cy;
|
|
454
|
-
width = diameter;
|
|
455
|
-
height = r;
|
|
456
|
-
borderRadius = `0 0 ${r}px ${r}px`;
|
|
496
|
+
left = r2(cx - r);
|
|
497
|
+
top = r2(cy);
|
|
498
|
+
width = r2(diameter);
|
|
499
|
+
height = r2(r);
|
|
500
|
+
borderRadius = `0 0 ${r2(r)}px ${r2(r)}px`;
|
|
457
501
|
break;
|
|
458
502
|
case 'left':
|
|
459
|
-
left = cx - r;
|
|
460
|
-
top = cy - r;
|
|
461
|
-
width = r;
|
|
462
|
-
height = diameter;
|
|
463
|
-
borderRadius = `${r}px 0 0 ${r}px`;
|
|
503
|
+
left = r2(cx - r);
|
|
504
|
+
top = r2(cy - r);
|
|
505
|
+
width = r2(r);
|
|
506
|
+
height = r2(diameter);
|
|
507
|
+
borderRadius = `${r2(r)}px 0 0 ${r2(r)}px`;
|
|
464
508
|
break;
|
|
465
509
|
case 'right':
|
|
466
|
-
left = cx;
|
|
467
|
-
top = cy - r;
|
|
468
|
-
width = r;
|
|
469
|
-
height = diameter;
|
|
470
|
-
borderRadius = `0 ${r}px ${r}px 0`;
|
|
510
|
+
left = r2(cx);
|
|
511
|
+
top = r2(cy - r);
|
|
512
|
+
width = r2(r);
|
|
513
|
+
height = r2(diameter);
|
|
514
|
+
borderRadius = `0 ${r2(r)}px ${r2(r)}px 0`;
|
|
471
515
|
break;
|
|
472
516
|
}
|
|
473
517
|
const style = {
|
|
@@ -478,7 +522,7 @@ const IconSemicircle = ({
|
|
|
478
522
|
height,
|
|
479
523
|
borderRadius,
|
|
480
524
|
backgroundColor: fill,
|
|
481
|
-
border: borderColor ? `${borderWidth}px solid ${borderColor}` : undefined,
|
|
525
|
+
border: borderColor ? `${r2(borderWidth)}px solid ${borderColor}` : undefined,
|
|
482
526
|
opacity,
|
|
483
527
|
boxShadow: glowColor && glowRadius > 0 ? createNeonGlow(glowColor, glowRadius) : undefined,
|
|
484
528
|
boxSizing: 'border-box'
|
|
@@ -538,12 +582,12 @@ const IconSmoothArc = ({
|
|
|
538
582
|
}
|
|
539
583
|
const style = {
|
|
540
584
|
position: 'absolute',
|
|
541
|
-
left: cx - r,
|
|
542
|
-
top: cy - r,
|
|
543
|
-
width: diameter,
|
|
544
|
-
height: diameter,
|
|
545
|
-
borderRadius: r,
|
|
546
|
-
borderWidth: strokeWidth,
|
|
585
|
+
left: r2(cx - r),
|
|
586
|
+
top: r2(cy - r),
|
|
587
|
+
width: r2(diameter),
|
|
588
|
+
height: r2(diameter),
|
|
589
|
+
borderRadius: r2(r),
|
|
590
|
+
borderWidth: r2(strokeWidth),
|
|
547
591
|
borderStyle: 'solid',
|
|
548
592
|
borderTopColor,
|
|
549
593
|
borderBottomColor,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.IconTriangle = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
|
|
6
|
+
exports.IconTriangle = exports.IconText = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
|
|
7
7
|
var _reactNative = require("react-native");
|
|
8
8
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
9
|
/**
|
|
@@ -271,12 +271,62 @@ function getCubicBezierPoint(t, p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
|
|
|
271
271
|
y: mt3 * p0y + 3 * mt2 * t * p1y + 3 * mt * t2 * p2y + t3 * p3y
|
|
272
272
|
};
|
|
273
273
|
}
|
|
274
|
+
const IconText = ({
|
|
275
|
+
x,
|
|
276
|
+
y,
|
|
277
|
+
text,
|
|
278
|
+
fontSize,
|
|
279
|
+
fontWeight = 700,
|
|
280
|
+
align = 'center',
|
|
281
|
+
fill,
|
|
282
|
+
opacity = 1,
|
|
283
|
+
rotation,
|
|
284
|
+
letterSpacing = 0
|
|
285
|
+
}) => {
|
|
286
|
+
// RN has no translate(-50%), so anchor via an estimated-width container with
|
|
287
|
+
// matching textAlign. The estimate only pads the container; alignment inside
|
|
288
|
+
// it is exact for left/right and near-exact for center.
|
|
289
|
+
const estWidth = text.length * fontSize * 0.75 + Math.max(0, text.length - 1) * letterSpacing + fontSize;
|
|
290
|
+
const height = fontSize * 1.5;
|
|
291
|
+
const left = align === 'left' ? x : align === 'right' ? x - estWidth : x - estWidth / 2;
|
|
292
|
+
const containerStyle = {
|
|
293
|
+
position: 'absolute',
|
|
294
|
+
left,
|
|
295
|
+
top: y - height / 2,
|
|
296
|
+
width: estWidth,
|
|
297
|
+
height,
|
|
298
|
+
justifyContent: 'center',
|
|
299
|
+
transform: rotation !== undefined ? [{
|
|
300
|
+
rotate: `${rotation}deg`
|
|
301
|
+
}] : undefined
|
|
302
|
+
};
|
|
303
|
+
const textStyle = {
|
|
304
|
+
color: fill,
|
|
305
|
+
fontSize,
|
|
306
|
+
fontWeight: String(fontWeight),
|
|
307
|
+
textAlign: align,
|
|
308
|
+
letterSpacing,
|
|
309
|
+
opacity,
|
|
310
|
+
includeFontPadding: false
|
|
311
|
+
};
|
|
312
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
313
|
+
style: containerStyle,
|
|
314
|
+
pointerEvents: "none",
|
|
315
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
316
|
+
style: textStyle,
|
|
317
|
+
numberOfLines: 1,
|
|
318
|
+
allowFontScaling: false,
|
|
319
|
+
children: text
|
|
320
|
+
})
|
|
321
|
+
});
|
|
322
|
+
};
|
|
274
323
|
|
|
275
324
|
/**
|
|
276
325
|
* IconLine - draws a line between two points
|
|
277
326
|
* Auto-calculates length and rotation from coordinates!
|
|
278
327
|
* Supports curved lines via cubic Bezier (2 control points) or quadratic (1 control point).
|
|
279
328
|
*/
|
|
329
|
+
exports.IconText = IconText;
|
|
280
330
|
const IconLine = ({
|
|
281
331
|
x1,
|
|
282
332
|
y1,
|
|
@@ -44,6 +44,12 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
44
44
|
* This is the "clever trick" for WiFi-style arcs.
|
|
45
45
|
*/
|
|
46
46
|
|
|
47
|
+
/**
|
|
48
|
+
* Text element - a short label (sign lettering, badges).
|
|
49
|
+
* Currently TS targets only: icons containing text are excluded from the
|
|
50
|
+
* Flutter/NativeScript generators until those renderers support it.
|
|
51
|
+
*/
|
|
52
|
+
|
|
47
53
|
// ===========================================
|
|
48
54
|
// Color Utilities
|
|
49
55
|
// ===========================================
|
|
@@ -139,7 +145,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
|
|
|
139
145
|
cy: center + el.cy * scale,
|
|
140
146
|
r: el.r * scale,
|
|
141
147
|
fill: resolveColor(el.fill, color, bgColor),
|
|
142
|
-
borderColor: el.border ? color : undefined,
|
|
148
|
+
borderColor: el.border ? resolveColor(el.borderColor, color, bgColor) ?? color : undefined,
|
|
143
149
|
borderWidth: el.border ? (el.borderWidth ?? 2) * scale : 0,
|
|
144
150
|
opacity: el.opacity,
|
|
145
151
|
scaleX: el.scaleX,
|
|
@@ -160,7 +166,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
|
|
|
160
166
|
width: el.width * scale,
|
|
161
167
|
height: el.height * scale,
|
|
162
168
|
fill: resolveColor(el.fill, color, bgColor),
|
|
163
|
-
borderColor: el.border ? color : undefined,
|
|
169
|
+
borderColor: el.border ? resolveColor(el.borderColor, color, bgColor) ?? color : undefined,
|
|
164
170
|
borderWidth: el.border ? (el.borderWidth ?? 1) * scale : 0,
|
|
165
171
|
borderRadius: (el.borderRadius ?? 0) * scale,
|
|
166
172
|
opacity: el.opacity,
|
|
@@ -220,13 +226,27 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
|
|
|
220
226
|
r: el.r * scale,
|
|
221
227
|
half: el.half,
|
|
222
228
|
fill: resolveColor(el.fill, color, bgColor),
|
|
223
|
-
borderColor: el.border ? color : undefined,
|
|
229
|
+
borderColor: el.border ? resolveColor(el.borderColor, color, bgColor) ?? color : undefined,
|
|
224
230
|
borderWidth: el.border ? (el.borderWidth ?? 2) * scale : 0,
|
|
225
231
|
opacity: el.opacity,
|
|
226
232
|
glowColor: el.glow ? color : undefined,
|
|
227
233
|
glowRadius: el.glow ? (el.glowRadius ?? 4) * scale : 0
|
|
228
234
|
}, i);
|
|
229
235
|
}
|
|
236
|
+
if (el.type === 'text') {
|
|
237
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPrimitives.IconText, {
|
|
238
|
+
x: center + el.x * scale,
|
|
239
|
+
y: center + el.y * scale,
|
|
240
|
+
text: el.text,
|
|
241
|
+
fontSize: (el.size ?? 2) * scale,
|
|
242
|
+
fontWeight: el.weight,
|
|
243
|
+
align: el.align,
|
|
244
|
+
letterSpacing: el.letterSpacing !== undefined ? el.letterSpacing * scale : undefined,
|
|
245
|
+
fill: resolveColor(el.fill ?? 'color', color, bgColor),
|
|
246
|
+
opacity: el.opacity,
|
|
247
|
+
rotation: el.rotation
|
|
248
|
+
}, i);
|
|
249
|
+
}
|
|
230
250
|
if (el.type === 'smootharc') {
|
|
231
251
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPrimitives.IconSmoothArc, {
|
|
232
252
|
cx: center + el.cx * scale,
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "RIVERPOD_ICON_COLOR", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _iconDataG.RIVERPOD_ICON_COLOR;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
exports.RiverpodIcon = void 0;
|
|
13
|
+
var _iconRenderer = require("./icon-renderer.js");
|
|
14
|
+
var _iconDataG = require("./generated/icon-data.g.js");
|
|
15
|
+
/**
|
|
16
|
+
* RiverpodIcon - Data-driven icon
|
|
17
|
+
*
|
|
18
|
+
* Water-drop mark for the Flutter Riverpod inspector (paired color with Jotai).
|
|
19
|
+
*
|
|
20
|
+
* Defined as pure data in shared/icons/riverpod.json (Buoy Icon Format), so this
|
|
21
|
+
* is the same artwork the Flutter build renders.
|
|
22
|
+
*
|
|
23
|
+
* To change: edit that JSON, then run `node scripts/gen-icons.mjs`.
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
const RiverpodIcon = exports.RiverpodIcon = (0, _iconRenderer.createIcon)(_iconDataG.riverpodIconData);
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "TIME_MACHINE_ICON_COLOR", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _iconDataG.TIME_MACHINE_ICON_COLOR;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
exports.TimeMachineIcon = void 0;
|
|
13
|
+
var _iconRenderer = require("./icon-renderer.js");
|
|
14
|
+
var _iconDataG = require("./generated/icon-data.g.js");
|
|
15
|
+
/**
|
|
16
|
+
* TimeMachineIcon - Data-driven icon
|
|
17
|
+
*
|
|
18
|
+
* Police box (a very specific time machine) — snapshot & restore app state.
|
|
19
|
+
*
|
|
20
|
+
* Defined as pure data in shared/icons/time-machine.json (Buoy Icon Format),
|
|
21
|
+
* so this is the same artwork the Flutter build renders.
|
|
22
|
+
*
|
|
23
|
+
* To change: edit that JSON, then run `node scripts/gen-icons.mjs`.
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
const TimeMachineIcon = exports.TimeMachineIcon = (0, _iconRenderer.createIcon)(_iconDataG.timeMachineIconData);
|
package/lib/commonjs/index.js
CHANGED
|
@@ -345,6 +345,12 @@ Object.defineProperty(exports, "RENDERS_ICON_COLOR", {
|
|
|
345
345
|
return _rendersIcon.RENDERS_ICON_COLOR;
|
|
346
346
|
}
|
|
347
347
|
});
|
|
348
|
+
Object.defineProperty(exports, "RIVERPOD_ICON_COLOR", {
|
|
349
|
+
enumerable: true,
|
|
350
|
+
get: function () {
|
|
351
|
+
return _riverpodIcon.RIVERPOD_ICON_COLOR;
|
|
352
|
+
}
|
|
353
|
+
});
|
|
348
354
|
Object.defineProperty(exports, "ROUTES_ICON_COLOR", {
|
|
349
355
|
enumerable: true,
|
|
350
356
|
get: function () {
|
|
@@ -363,6 +369,12 @@ Object.defineProperty(exports, "RendersIcon", {
|
|
|
363
369
|
return _rendersIcon.RendersIcon;
|
|
364
370
|
}
|
|
365
371
|
});
|
|
372
|
+
Object.defineProperty(exports, "RiverpodIcon", {
|
|
373
|
+
enumerable: true,
|
|
374
|
+
get: function () {
|
|
375
|
+
return _riverpodIcon.RiverpodIcon;
|
|
376
|
+
}
|
|
377
|
+
});
|
|
366
378
|
Object.defineProperty(exports, "RouteDotIcon", {
|
|
367
379
|
enumerable: true,
|
|
368
380
|
get: function () {
|
|
@@ -441,6 +453,18 @@ Object.defineProperty(exports, "StorageIcon", {
|
|
|
441
453
|
return _storageIcon.StorageIcon;
|
|
442
454
|
}
|
|
443
455
|
});
|
|
456
|
+
Object.defineProperty(exports, "TIME_MACHINE_ICON_COLOR", {
|
|
457
|
+
enumerable: true,
|
|
458
|
+
get: function () {
|
|
459
|
+
return _timeMachineIcon.TIME_MACHINE_ICON_COLOR;
|
|
460
|
+
}
|
|
461
|
+
});
|
|
462
|
+
Object.defineProperty(exports, "TimeMachineIcon", {
|
|
463
|
+
enumerable: true,
|
|
464
|
+
get: function () {
|
|
465
|
+
return _timeMachineIcon.TimeMachineIcon;
|
|
466
|
+
}
|
|
467
|
+
});
|
|
444
468
|
Object.defineProperty(exports, "USAGE_HALF_LIFE_MS", {
|
|
445
469
|
enumerable: true,
|
|
446
470
|
get: function () {
|
|
@@ -847,11 +871,13 @@ var _highlightIcon = require("./icons/highlight-icon.js");
|
|
|
847
871
|
var _reduxIcon = require("./icons/redux-icon.js");
|
|
848
872
|
var _eventsIcon = require("./icons/events-icon.js");
|
|
849
873
|
var _consoleIcon = require("./icons/console-icon.js");
|
|
874
|
+
var _timeMachineIcon = require("./icons/time-machine-icon.js");
|
|
850
875
|
var _imagesIcon = require("./icons/images-icon.js");
|
|
851
876
|
var _assetsIcon = require("./icons/assets-icon.js");
|
|
852
877
|
var _impersonateIcon = require("./icons/impersonate-icon.js");
|
|
853
878
|
var _imageOverlayIcon = require("./icons/image-overlay-icon.js");
|
|
854
879
|
var _zustandIcon = require("./icons/zustand-icon.js");
|
|
855
880
|
var _jotaiIcon = require("./icons/jotai-icon.js");
|
|
881
|
+
var _riverpodIcon = require("./icons/riverpod-icon.js");
|
|
856
882
|
var _iconFactories = require("./icons/icon-factories.js");
|
|
857
883
|
var _iconRenderer = require("./icons/icon-renderer.js");
|