@luxfi/ui 7.4.12 → 7.4.13
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/dist/avatar.cjs +0 -1
- package/dist/avatar.js +0 -1
- package/dist/index.cjs +320 -208
- package/dist/index.js +320 -208
- package/dist/input-group.cjs +36 -19
- package/dist/input-group.js +37 -19
- package/dist/pin-input.cjs +30 -29
- package/dist/pin-input.js +30 -29
- package/dist/progress-circle.cjs +40 -22
- package/dist/progress-circle.d.cts +5 -5
- package/dist/progress-circle.d.ts +5 -5
- package/dist/progress-circle.js +41 -22
- package/dist/radio.cjs +0 -1
- package/dist/radio.js +0 -1
- package/dist/rating.cjs +15 -17
- package/dist/rating.js +15 -17
- package/dist/slider.cjs +0 -1
- package/dist/slider.js +0 -1
- package/dist/strategy-builder.cjs +194 -115
- package/dist/strategy-builder.js +194 -115
- package/dist/tag.cjs +18 -15
- package/dist/tag.js +18 -15
- package/package.json +1 -1
- package/src/avatar.tsx +1 -2
- package/src/expiration-selector.tsx +6 -6
- package/src/input-group.tsx +2 -2
- package/src/option-position.tsx +9 -2
- package/src/progress-circle.tsx +52 -28
- package/src/radio.tsx +0 -1
- package/src/rating.tsx +22 -20
- package/src/slider.tsx +0 -1
- package/src/strategy-builder.tsx +51 -42
package/dist/input-group.cjs
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var gui = require('@hanzo/gui');
|
|
4
5
|
var esToolkit = require('es-toolkit');
|
|
5
6
|
var React = require('react');
|
|
6
|
-
var clsx = require('clsx');
|
|
7
|
-
var tailwindMerge = require('tailwind-merge');
|
|
8
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
8
|
|
|
10
9
|
function _interopNamespace(e) {
|
|
@@ -28,9 +27,14 @@ function _interopNamespace(e) {
|
|
|
28
27
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
29
28
|
|
|
30
29
|
// src/input-group.tsx
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
var ink = (children, Wrap = gui.Text, props = {}) => {
|
|
31
|
+
let hasText = false;
|
|
32
|
+
React.Children.forEach(children, (child) => {
|
|
33
|
+
if (typeof child === "string" || typeof child === "number") hasText = true;
|
|
34
|
+
});
|
|
35
|
+
if (!hasText) return children;
|
|
36
|
+
return React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React.createElement(Wrap, props, child) : child);
|
|
37
|
+
};
|
|
34
38
|
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
|
|
35
39
|
var InputGroup = React__namespace.forwardRef(
|
|
36
40
|
function InputGroup2(props, ref) {
|
|
@@ -99,22 +103,30 @@ var InputGroup = React__namespace.forwardRef(
|
|
|
99
103
|
const { className: startClassName, ...startRest } = startElementProps ?? {};
|
|
100
104
|
const { className: endClassName, ...endRest } = endElementProps ?? {};
|
|
101
105
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
102
|
-
|
|
106
|
+
gui.XStack,
|
|
103
107
|
{
|
|
104
108
|
ref: combinedRef,
|
|
105
|
-
|
|
109
|
+
position: "relative",
|
|
110
|
+
width: "100%",
|
|
111
|
+
alignItems: "center",
|
|
112
|
+
className,
|
|
106
113
|
...rest,
|
|
107
114
|
children: [
|
|
108
115
|
startElement && /* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
-
|
|
116
|
+
gui.XStack,
|
|
110
117
|
{
|
|
111
118
|
ref: startElementRef,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
119
|
+
position: "absolute",
|
|
120
|
+
top: 0,
|
|
121
|
+
bottom: 0,
|
|
122
|
+
left: 0,
|
|
123
|
+
zIndex: 1,
|
|
124
|
+
alignItems: "center",
|
|
125
|
+
pointerEvents: "none",
|
|
126
|
+
style: { color: "var(--color-icon-secondary)" },
|
|
127
|
+
className: startClassName,
|
|
116
128
|
...startRest,
|
|
117
|
-
children: startElement
|
|
129
|
+
children: ink(startElement)
|
|
118
130
|
}
|
|
119
131
|
),
|
|
120
132
|
React__namespace.Children.map(children, (child) => {
|
|
@@ -133,15 +145,20 @@ var InputGroup = React__namespace.forwardRef(
|
|
|
133
145
|
});
|
|
134
146
|
}),
|
|
135
147
|
endElement && /* @__PURE__ */ jsxRuntime.jsx(
|
|
136
|
-
|
|
148
|
+
gui.XStack,
|
|
137
149
|
{
|
|
138
150
|
ref: endElementRef,
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
151
|
+
position: "absolute",
|
|
152
|
+
top: 0,
|
|
153
|
+
bottom: 0,
|
|
154
|
+
right: 0,
|
|
155
|
+
zIndex: 1,
|
|
156
|
+
alignItems: "center",
|
|
157
|
+
pointerEvents: "none",
|
|
158
|
+
style: { color: "var(--color-icon-secondary)" },
|
|
159
|
+
className: endClassName,
|
|
143
160
|
...endRest,
|
|
144
|
-
children: endElement
|
|
161
|
+
children: ink(endElement)
|
|
145
162
|
}
|
|
146
163
|
)
|
|
147
164
|
]
|
package/dist/input-group.js
CHANGED
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { XStack, Text } from '@hanzo/gui';
|
|
2
3
|
import { debounce } from 'es-toolkit';
|
|
3
4
|
import * as React from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import { twMerge } from 'tailwind-merge';
|
|
5
|
+
import { Children, createElement } from 'react';
|
|
6
6
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
8
|
// src/input-group.tsx
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
var ink = (children, Wrap = Text, props = {}) => {
|
|
10
|
+
let hasText = false;
|
|
11
|
+
Children.forEach(children, (child) => {
|
|
12
|
+
if (typeof child === "string" || typeof child === "number") hasText = true;
|
|
13
|
+
});
|
|
14
|
+
if (!hasText) return children;
|
|
15
|
+
return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
|
|
16
|
+
};
|
|
12
17
|
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
|
|
13
18
|
var InputGroup = React.forwardRef(
|
|
14
19
|
function InputGroup2(props, ref) {
|
|
@@ -77,22 +82,30 @@ var InputGroup = React.forwardRef(
|
|
|
77
82
|
const { className: startClassName, ...startRest } = startElementProps ?? {};
|
|
78
83
|
const { className: endClassName, ...endRest } = endElementProps ?? {};
|
|
79
84
|
return /* @__PURE__ */ jsxs(
|
|
80
|
-
|
|
85
|
+
XStack,
|
|
81
86
|
{
|
|
82
87
|
ref: combinedRef,
|
|
83
|
-
|
|
88
|
+
position: "relative",
|
|
89
|
+
width: "100%",
|
|
90
|
+
alignItems: "center",
|
|
91
|
+
className,
|
|
84
92
|
...rest,
|
|
85
93
|
children: [
|
|
86
94
|
startElement && /* @__PURE__ */ jsx(
|
|
87
|
-
|
|
95
|
+
XStack,
|
|
88
96
|
{
|
|
89
97
|
ref: startElementRef,
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
98
|
+
position: "absolute",
|
|
99
|
+
top: 0,
|
|
100
|
+
bottom: 0,
|
|
101
|
+
left: 0,
|
|
102
|
+
zIndex: 1,
|
|
103
|
+
alignItems: "center",
|
|
104
|
+
pointerEvents: "none",
|
|
105
|
+
style: { color: "var(--color-icon-secondary)" },
|
|
106
|
+
className: startClassName,
|
|
94
107
|
...startRest,
|
|
95
|
-
children: startElement
|
|
108
|
+
children: ink(startElement)
|
|
96
109
|
}
|
|
97
110
|
),
|
|
98
111
|
React.Children.map(children, (child) => {
|
|
@@ -111,15 +124,20 @@ var InputGroup = React.forwardRef(
|
|
|
111
124
|
});
|
|
112
125
|
}),
|
|
113
126
|
endElement && /* @__PURE__ */ jsx(
|
|
114
|
-
|
|
127
|
+
XStack,
|
|
115
128
|
{
|
|
116
129
|
ref: endElementRef,
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
130
|
+
position: "absolute",
|
|
131
|
+
top: 0,
|
|
132
|
+
bottom: 0,
|
|
133
|
+
right: 0,
|
|
134
|
+
zIndex: 1,
|
|
135
|
+
alignItems: "center",
|
|
136
|
+
pointerEvents: "none",
|
|
137
|
+
style: { color: "var(--color-icon-secondary)" },
|
|
138
|
+
className: endClassName,
|
|
121
139
|
...endRest,
|
|
122
|
-
children: endElement
|
|
140
|
+
children: ink(endElement)
|
|
123
141
|
}
|
|
124
142
|
)
|
|
125
143
|
]
|
package/dist/pin-input.cjs
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var gui = require('@hanzo/gui');
|
|
4
5
|
var React = require('react');
|
|
5
|
-
var clsx = require('clsx');
|
|
6
|
-
var tailwindMerge = require('tailwind-merge');
|
|
7
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
7
|
|
|
9
8
|
function _interopNamespace(e) {
|
|
@@ -27,23 +26,26 @@ function _interopNamespace(e) {
|
|
|
27
26
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
28
27
|
|
|
29
28
|
// src/pin-input.tsx
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
29
|
+
var BOX = {
|
|
30
|
+
width: 40,
|
|
31
|
+
height: 40,
|
|
32
|
+
textAlign: "center",
|
|
33
|
+
fontSize: 14,
|
|
34
|
+
fontWeight: 500,
|
|
35
|
+
borderRadius: 6,
|
|
36
|
+
borderWidth: 2,
|
|
37
|
+
borderStyle: "solid",
|
|
38
|
+
outlineWidth: 0,
|
|
39
|
+
backgroundColor: "var(--color-input-bg)",
|
|
40
|
+
color: "var(--color-input-fg)",
|
|
41
|
+
borderColor: "var(--color-input-border)",
|
|
42
|
+
hoverStyle: { borderColor: "var(--color-input-border-hover)" },
|
|
43
|
+
focusStyle: {
|
|
44
|
+
borderColor: "var(--color-input-border-focus)",
|
|
45
|
+
boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
|
|
46
|
+
},
|
|
47
|
+
disabledStyle: { opacity: 0.4 }
|
|
48
|
+
};
|
|
47
49
|
var PinInput = React__namespace.forwardRef(
|
|
48
50
|
function PinInput2(props, ref) {
|
|
49
51
|
const {
|
|
@@ -135,8 +137,8 @@ var PinInput = React__namespace.forwardRef(
|
|
|
135
137
|
const onKeyDownAtIndex = React__namespace.useCallback((index) => (e) => {
|
|
136
138
|
handleKeyDown(index, e);
|
|
137
139
|
}, [handleKeyDown]);
|
|
138
|
-
const
|
|
139
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
140
|
+
const boxBackground = bgColor ? `var(--color-${bgColor.replace(/\./g, "-")})` : BOX.backgroundColor;
|
|
141
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { ref: rootRef, alignItems: "center", gap: attached ? 0 : 8, className, children: [
|
|
140
142
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
141
143
|
"input",
|
|
142
144
|
{
|
|
@@ -148,9 +150,10 @@ var PinInput = React__namespace.forwardRef(
|
|
|
148
150
|
}
|
|
149
151
|
),
|
|
150
152
|
Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
151
|
-
|
|
153
|
+
gui.Input,
|
|
152
154
|
{
|
|
153
155
|
ref: setInputRef(index),
|
|
156
|
+
unstyled: true,
|
|
154
157
|
type: "text",
|
|
155
158
|
inputMode: "numeric",
|
|
156
159
|
autoComplete: otp ? "one-time-code" : "off",
|
|
@@ -159,14 +162,12 @@ var PinInput = React__namespace.forwardRef(
|
|
|
159
162
|
placeholder,
|
|
160
163
|
disabled,
|
|
161
164
|
"aria-invalid": invalid || void 0,
|
|
165
|
+
"data-invalid": invalid || void 0,
|
|
162
166
|
value: values[index] || "",
|
|
163
|
-
className:
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
attached && index > 0 && "-ml-0.5"
|
|
168
|
-
),
|
|
169
|
-
style: bgStyle,
|
|
167
|
+
className: "lux-control",
|
|
168
|
+
...BOX,
|
|
169
|
+
backgroundColor: boxBackground,
|
|
170
|
+
marginLeft: attached && index > 0 ? -2 : void 0,
|
|
170
171
|
onInput: onInputAtIndex(index),
|
|
171
172
|
onKeyDown: onKeyDownAtIndex(index),
|
|
172
173
|
onPaste: handlePaste,
|
package/dist/pin-input.js
CHANGED
|
@@ -1,27 +1,29 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { XStack, Input } from '@hanzo/gui';
|
|
2
3
|
import * as React from 'react';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { twMerge } from 'tailwind-merge';
|
|
5
4
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
5
|
|
|
7
6
|
// src/pin-input.tsx
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
7
|
+
var BOX = {
|
|
8
|
+
width: 40,
|
|
9
|
+
height: 40,
|
|
10
|
+
textAlign: "center",
|
|
11
|
+
fontSize: 14,
|
|
12
|
+
fontWeight: 500,
|
|
13
|
+
borderRadius: 6,
|
|
14
|
+
borderWidth: 2,
|
|
15
|
+
borderStyle: "solid",
|
|
16
|
+
outlineWidth: 0,
|
|
17
|
+
backgroundColor: "var(--color-input-bg)",
|
|
18
|
+
color: "var(--color-input-fg)",
|
|
19
|
+
borderColor: "var(--color-input-border)",
|
|
20
|
+
hoverStyle: { borderColor: "var(--color-input-border-hover)" },
|
|
21
|
+
focusStyle: {
|
|
22
|
+
borderColor: "var(--color-input-border-focus)",
|
|
23
|
+
boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
|
|
24
|
+
},
|
|
25
|
+
disabledStyle: { opacity: 0.4 }
|
|
26
|
+
};
|
|
25
27
|
var PinInput = React.forwardRef(
|
|
26
28
|
function PinInput2(props, ref) {
|
|
27
29
|
const {
|
|
@@ -113,8 +115,8 @@ var PinInput = React.forwardRef(
|
|
|
113
115
|
const onKeyDownAtIndex = React.useCallback((index) => (e) => {
|
|
114
116
|
handleKeyDown(index, e);
|
|
115
117
|
}, [handleKeyDown]);
|
|
116
|
-
const
|
|
117
|
-
return /* @__PURE__ */ jsxs(
|
|
118
|
+
const boxBackground = bgColor ? `var(--color-${bgColor.replace(/\./g, "-")})` : BOX.backgroundColor;
|
|
119
|
+
return /* @__PURE__ */ jsxs(XStack, { ref: rootRef, alignItems: "center", gap: attached ? 0 : 8, className, children: [
|
|
118
120
|
/* @__PURE__ */ jsx(
|
|
119
121
|
"input",
|
|
120
122
|
{
|
|
@@ -126,9 +128,10 @@ var PinInput = React.forwardRef(
|
|
|
126
128
|
}
|
|
127
129
|
),
|
|
128
130
|
Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
|
|
129
|
-
|
|
131
|
+
Input,
|
|
130
132
|
{
|
|
131
133
|
ref: setInputRef(index),
|
|
134
|
+
unstyled: true,
|
|
132
135
|
type: "text",
|
|
133
136
|
inputMode: "numeric",
|
|
134
137
|
autoComplete: otp ? "one-time-code" : "off",
|
|
@@ -137,14 +140,12 @@ var PinInput = React.forwardRef(
|
|
|
137
140
|
placeholder,
|
|
138
141
|
disabled,
|
|
139
142
|
"aria-invalid": invalid || void 0,
|
|
143
|
+
"data-invalid": invalid || void 0,
|
|
140
144
|
value: values[index] || "",
|
|
141
|
-
className:
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
attached && index > 0 && "-ml-0.5"
|
|
146
|
-
),
|
|
147
|
-
style: bgStyle,
|
|
145
|
+
className: "lux-control",
|
|
146
|
+
...BOX,
|
|
147
|
+
backgroundColor: boxBackground,
|
|
148
|
+
marginLeft: attached && index > 0 ? -2 : void 0,
|
|
148
149
|
onInput: onInputAtIndex(index),
|
|
149
150
|
onKeyDown: onKeyDownAtIndex(index),
|
|
150
151
|
onPaste: handlePaste,
|
package/dist/progress-circle.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var gui = require('@hanzo/gui');
|
|
4
5
|
var React = require('react');
|
|
5
6
|
var clsx = require('clsx');
|
|
6
7
|
var tailwindMerge = require('tailwind-merge');
|
|
@@ -27,15 +28,23 @@ function _interopNamespace(e) {
|
|
|
27
28
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
28
29
|
|
|
29
30
|
// src/progress-circle.tsx
|
|
31
|
+
var ink = (children, Wrap = gui.Text, props = {}) => {
|
|
32
|
+
let hasText = false;
|
|
33
|
+
React.Children.forEach(children, (child) => {
|
|
34
|
+
if (typeof child === "string" || typeof child === "number") hasText = true;
|
|
35
|
+
});
|
|
36
|
+
if (!hasText) return children;
|
|
37
|
+
return React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React.createElement(Wrap, props, child) : child);
|
|
38
|
+
};
|
|
30
39
|
function cn(...inputs) {
|
|
31
40
|
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
32
41
|
}
|
|
33
42
|
var SIZE_MAP = {
|
|
34
|
-
xs: { size: 24, thickness: 4,
|
|
35
|
-
sm: { size: 32, thickness: 5,
|
|
36
|
-
md: { size: 40, thickness: 6,
|
|
37
|
-
lg: { size: 48, thickness: 7,
|
|
38
|
-
xl: { size: 64, thickness: 8,
|
|
43
|
+
xs: { size: 24, thickness: 4, fontSize: 10 },
|
|
44
|
+
sm: { size: 32, thickness: 5, fontSize: 10 },
|
|
45
|
+
md: { size: 40, thickness: 6, fontSize: 12 },
|
|
46
|
+
lg: { size: 48, thickness: 7, fontSize: 14 },
|
|
47
|
+
xl: { size: 64, thickness: 8, fontSize: 14 }
|
|
39
48
|
};
|
|
40
49
|
var Ctx = React__namespace.createContext({
|
|
41
50
|
value: 0,
|
|
@@ -56,16 +65,18 @@ var ProgressCircleRoot = React__namespace.forwardRef(function ProgressCircleRoot
|
|
|
56
65
|
[value, size, colorPalette]
|
|
57
66
|
);
|
|
58
67
|
return /* @__PURE__ */ jsxRuntime.jsx(Ctx.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
59
|
-
|
|
68
|
+
gui.View,
|
|
60
69
|
{
|
|
61
70
|
ref,
|
|
62
71
|
role: "progressbar",
|
|
63
72
|
"aria-valuenow": value ?? void 0,
|
|
64
73
|
"aria-valuemin": 0,
|
|
65
74
|
"aria-valuemax": 100,
|
|
66
|
-
|
|
75
|
+
position: "relative",
|
|
76
|
+
style: { display: "inline-flex", fontSize: 14 },
|
|
77
|
+
className,
|
|
67
78
|
...rest,
|
|
68
|
-
children
|
|
79
|
+
children: ink(children)
|
|
69
80
|
}
|
|
70
81
|
) });
|
|
71
82
|
});
|
|
@@ -84,10 +95,7 @@ var ProgressCircleRing = React__namespace.forwardRef(function ProgressCircleRing
|
|
|
84
95
|
width: size,
|
|
85
96
|
height: size,
|
|
86
97
|
viewBox: `0 0 ${size} ${size}`,
|
|
87
|
-
className: cn(
|
|
88
|
-
value === null && "animate-spin",
|
|
89
|
-
className
|
|
90
|
-
),
|
|
98
|
+
className: value === null ? cn("lux-spin", className) : className,
|
|
91
99
|
...rest,
|
|
92
100
|
children: [
|
|
93
101
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -99,7 +107,7 @@ var ProgressCircleRing = React__namespace.forwardRef(function ProgressCircleRing
|
|
|
99
107
|
fill: "transparent",
|
|
100
108
|
strokeWidth: thickness,
|
|
101
109
|
stroke: trackColor ?? "currentColor",
|
|
102
|
-
|
|
110
|
+
opacity: !trackColor ? 0.2 : void 0
|
|
103
111
|
}
|
|
104
112
|
),
|
|
105
113
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -129,20 +137,30 @@ var ProgressCircleRing = React__namespace.forwardRef(function ProgressCircleRing
|
|
|
129
137
|
var ProgressCircleValueText = React__namespace.forwardRef(function ProgressCircleValueText2(props, ref) {
|
|
130
138
|
const { className, children, ...rest } = props;
|
|
131
139
|
const { value, size: sizeKey } = React__namespace.useContext(Ctx);
|
|
132
|
-
const {
|
|
140
|
+
const { fontSize } = SIZE_MAP[sizeKey];
|
|
133
141
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
134
|
-
|
|
142
|
+
gui.View,
|
|
135
143
|
{
|
|
136
144
|
ref,
|
|
137
145
|
"aria-live": "polite",
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
146
|
+
position: "absolute",
|
|
147
|
+
top: 0,
|
|
148
|
+
left: 0,
|
|
149
|
+
right: 0,
|
|
150
|
+
bottom: 0,
|
|
151
|
+
display: "flex",
|
|
152
|
+
alignItems: "center",
|
|
153
|
+
justifyContent: "center",
|
|
154
|
+
style: {
|
|
155
|
+
fontWeight: 500,
|
|
156
|
+
fontSize,
|
|
157
|
+
lineHeight: `${fontSize}px`,
|
|
158
|
+
letterSpacing: fontSize * -0.025,
|
|
159
|
+
fontVariantNumeric: "tabular-nums"
|
|
160
|
+
},
|
|
161
|
+
className,
|
|
144
162
|
...rest,
|
|
145
|
-
children: children ?? `${Math.round(value ?? 0)}%`
|
|
163
|
+
children: ink(children ?? `${Math.round(value ?? 0)}%`)
|
|
146
164
|
}
|
|
147
165
|
);
|
|
148
166
|
});
|
|
@@ -4,27 +4,27 @@ declare const SIZE_MAP: {
|
|
|
4
4
|
readonly xs: {
|
|
5
5
|
readonly size: 24;
|
|
6
6
|
readonly thickness: 4;
|
|
7
|
-
readonly
|
|
7
|
+
readonly fontSize: 10;
|
|
8
8
|
};
|
|
9
9
|
readonly sm: {
|
|
10
10
|
readonly size: 32;
|
|
11
11
|
readonly thickness: 5;
|
|
12
|
-
readonly
|
|
12
|
+
readonly fontSize: 10;
|
|
13
13
|
};
|
|
14
14
|
readonly md: {
|
|
15
15
|
readonly size: 40;
|
|
16
16
|
readonly thickness: 6;
|
|
17
|
-
readonly
|
|
17
|
+
readonly fontSize: 12;
|
|
18
18
|
};
|
|
19
19
|
readonly lg: {
|
|
20
20
|
readonly size: 48;
|
|
21
21
|
readonly thickness: 7;
|
|
22
|
-
readonly
|
|
22
|
+
readonly fontSize: 14;
|
|
23
23
|
};
|
|
24
24
|
readonly xl: {
|
|
25
25
|
readonly size: 64;
|
|
26
26
|
readonly thickness: 8;
|
|
27
|
-
readonly
|
|
27
|
+
readonly fontSize: 14;
|
|
28
28
|
};
|
|
29
29
|
};
|
|
30
30
|
type Size = keyof typeof SIZE_MAP;
|
|
@@ -4,27 +4,27 @@ declare const SIZE_MAP: {
|
|
|
4
4
|
readonly xs: {
|
|
5
5
|
readonly size: 24;
|
|
6
6
|
readonly thickness: 4;
|
|
7
|
-
readonly
|
|
7
|
+
readonly fontSize: 10;
|
|
8
8
|
};
|
|
9
9
|
readonly sm: {
|
|
10
10
|
readonly size: 32;
|
|
11
11
|
readonly thickness: 5;
|
|
12
|
-
readonly
|
|
12
|
+
readonly fontSize: 10;
|
|
13
13
|
};
|
|
14
14
|
readonly md: {
|
|
15
15
|
readonly size: 40;
|
|
16
16
|
readonly thickness: 6;
|
|
17
|
-
readonly
|
|
17
|
+
readonly fontSize: 12;
|
|
18
18
|
};
|
|
19
19
|
readonly lg: {
|
|
20
20
|
readonly size: 48;
|
|
21
21
|
readonly thickness: 7;
|
|
22
|
-
readonly
|
|
22
|
+
readonly fontSize: 14;
|
|
23
23
|
};
|
|
24
24
|
readonly xl: {
|
|
25
25
|
readonly size: 64;
|
|
26
26
|
readonly thickness: 8;
|
|
27
|
-
readonly
|
|
27
|
+
readonly fontSize: 14;
|
|
28
28
|
};
|
|
29
29
|
};
|
|
30
30
|
type Size = keyof typeof SIZE_MAP;
|