@ttoss/ui 6.5.1 → 6.7.0
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/README.md +56 -1
- package/dist/esm/index.js +299 -102
- package/dist/index.d.ts +83 -4
- package/package.json +9 -8
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ React component library built on [Theme UI](https://theme-ui.com/) for building
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```shell
|
|
8
|
-
pnpm add @ttoss/ui @ttoss/react-icons @emotion/react
|
|
8
|
+
pnpm add @ttoss/ui @ttoss/react-icons @emotion/react @chakra-ui/react
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
**ESM Only**: This package requires ES modules support.
|
|
@@ -61,6 +61,61 @@ export const customTheme: Theme = {
|
|
|
61
61
|
|
|
62
62
|
**Note**: No custom JSX pragma needed when using `sx` prop directly on library components.
|
|
63
63
|
|
|
64
|
+
## Chakra UI Integration
|
|
65
|
+
|
|
66
|
+
This package integrates seamlessly with [Chakra UI](https://chakra-ui.com/). You can import and use any Chakra UI component directly, and it will automatically be styled according to your theme configuration.
|
|
67
|
+
|
|
68
|
+
### Using Chakra UI Components
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
import { Button } from '@chakra-ui/react';
|
|
72
|
+
import { ThemeProvider } from '@ttoss/ui';
|
|
73
|
+
import { BruttalTheme } from '@ttoss/theme/Bruttal';
|
|
74
|
+
|
|
75
|
+
export const App = () => (
|
|
76
|
+
<ThemeProvider theme={BruttalTheme}>
|
|
77
|
+
{/* Chakra Button automatically styled with BruttalTheme */}
|
|
78
|
+
<Button colorScheme="blue">Chakra Button</Button>
|
|
79
|
+
</ThemeProvider>
|
|
80
|
+
);
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Customizing Chakra Components via Theme
|
|
84
|
+
|
|
85
|
+
You can customize how Chakra UI components render by adding component specifications to your theme:
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
import type { Theme } from '@ttoss/ui';
|
|
89
|
+
|
|
90
|
+
export const customTheme: Theme = {
|
|
91
|
+
colors: {
|
|
92
|
+
primary: '#007acc',
|
|
93
|
+
},
|
|
94
|
+
// Customize Chakra UI Button component
|
|
95
|
+
components: {
|
|
96
|
+
Button: {
|
|
97
|
+
defaultProps: {
|
|
98
|
+
size: 'lg',
|
|
99
|
+
variant: 'solid',
|
|
100
|
+
},
|
|
101
|
+
variants: {
|
|
102
|
+
solid: {
|
|
103
|
+
bg: 'primary',
|
|
104
|
+
color: 'white',
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
};
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
**Key Points:**
|
|
113
|
+
|
|
114
|
+
- All Chakra UI components work out of the box with `ThemeProvider`
|
|
115
|
+
- Component styles are controlled through theme configuration
|
|
116
|
+
- No need for additional setup or wrappers
|
|
117
|
+
- Full access to Chakra's [component theming API](https://chakra-ui.com/docs/styled-system/component-style)
|
|
118
|
+
|
|
64
119
|
## Available Components
|
|
65
120
|
|
|
66
121
|
**Browse all components**: [Storybook Documentation](https://storybook.ttoss.dev/?path=/story/ui)
|
package/dist/esm/index.js
CHANGED
|
@@ -5,12 +5,213 @@ var __name = (target, value) => __defProp(target, "name", {
|
|
|
5
5
|
value,
|
|
6
6
|
configurable: true
|
|
7
7
|
});
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all) __defProp(target, name, {
|
|
10
|
+
get: all[name],
|
|
11
|
+
enumerable: true
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
// src/chakra/ChakraThemeProvider.tsx
|
|
16
|
+
import { ChakraProvider as ChakraProviderBase, createSystem, defaultConfig } from "@chakra-ui/react";
|
|
17
|
+
import * as React2 from "react";
|
|
18
|
+
|
|
19
|
+
// src/theme/useTheme.ts
|
|
20
|
+
import { useThemeUI } from "theme-ui";
|
|
21
|
+
var useTheme = useThemeUI;
|
|
22
|
+
|
|
23
|
+
// src/chakra/recipes/index.ts
|
|
24
|
+
var recipes_exports = {};
|
|
25
|
+
__export(recipes_exports, {
|
|
26
|
+
button: () => button
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
// src/chakra/recipes/button.ts
|
|
30
|
+
import { defineRecipe } from "@chakra-ui/react";
|
|
31
|
+
var button = defineRecipe({
|
|
32
|
+
className: "button",
|
|
33
|
+
base: {
|
|
34
|
+
color: "action.text.primary.default",
|
|
35
|
+
backgroundColor: "navigation.text.accent.default",
|
|
36
|
+
borderColor: "action.border.primary.default",
|
|
37
|
+
_hover: {
|
|
38
|
+
backgroundColor: "action.background.primary.active",
|
|
39
|
+
_disabled: {
|
|
40
|
+
backgroundColor: "action.background.primary.disabled"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
_active: {
|
|
44
|
+
backgroundColor: "action.background.primary.active"
|
|
45
|
+
},
|
|
46
|
+
_disabled: {
|
|
47
|
+
backgroundColor: "action.background.primary.disabled",
|
|
48
|
+
color: "action.text.muted.default",
|
|
49
|
+
opacity: 1
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
variants: {
|
|
53
|
+
variant: {
|
|
54
|
+
solid: {
|
|
55
|
+
color: "action.text.primary.default",
|
|
56
|
+
backgroundColor: "navigation.text.accent.default",
|
|
57
|
+
_hover: {
|
|
58
|
+
backgroundColor: "action.background.primary.active"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
outline: {
|
|
62
|
+
color: "action.text.primary.default",
|
|
63
|
+
backgroundColor: "navigation.text.accent.default",
|
|
64
|
+
borderColor: "action.border.primary.default",
|
|
65
|
+
_hover: {
|
|
66
|
+
backgroundColor: "action.background.primary.default"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
ghost: {
|
|
70
|
+
color: "action.text.primary.default",
|
|
71
|
+
backgroundColor: "transparent",
|
|
72
|
+
_hover: {
|
|
73
|
+
backgroundColor: "action.background.secondary.default"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
plain: {
|
|
77
|
+
color: "action.text.accent.default",
|
|
78
|
+
backgroundColor: "transparent",
|
|
79
|
+
_hover: {
|
|
80
|
+
color: "action.text.accent.default"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
defaultVariants: {
|
|
86
|
+
variant: "solid"
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
// src/chakra/slotRecipes/index.ts
|
|
91
|
+
var slotRecipes_exports = {};
|
|
92
|
+
__export(slotRecipes_exports, {
|
|
93
|
+
steps: () => steps
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
// src/chakra/slotRecipes/steps.ts
|
|
97
|
+
import { defineSlotRecipe } from "@chakra-ui/react";
|
|
98
|
+
var steps = defineSlotRecipe({
|
|
99
|
+
className: "steps",
|
|
100
|
+
slots: ["root", "list", "item", "trigger", "indicator", "separator", "title", "description", "number"],
|
|
101
|
+
base: {
|
|
102
|
+
indicator: {
|
|
103
|
+
// Map to ttoss semantic colors
|
|
104
|
+
borderColor: "display.border.muted.default",
|
|
105
|
+
color: "display.text.muted.default",
|
|
106
|
+
backgroundColor: "display.background.secondary.default",
|
|
107
|
+
// Active/completed state
|
|
108
|
+
_complete: {
|
|
109
|
+
backgroundColor: "action.background.accent.default",
|
|
110
|
+
borderColor: "action.background.accent.default",
|
|
111
|
+
color: "action.text.accent.default"
|
|
112
|
+
},
|
|
113
|
+
// Current/active step
|
|
114
|
+
_current: {
|
|
115
|
+
borderColor: "display.border.accent.default",
|
|
116
|
+
color: "display.text.accent"
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
separator: {
|
|
120
|
+
// Map to ttoss semantic colors
|
|
121
|
+
backgroundColor: "display.border.muted.default",
|
|
122
|
+
_complete: {
|
|
123
|
+
backgroundColor: "action.background.accent.default"
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
title: {
|
|
127
|
+
// Map to ttoss semantic colors
|
|
128
|
+
color: "navigation.text.primary.default",
|
|
129
|
+
_current: {
|
|
130
|
+
color: "display.text.accent"
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
description: {
|
|
134
|
+
// Map to ttoss semantic colors
|
|
135
|
+
color: "navigation.text.muted.default"
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
// src/chakra/ChakraThemeProvider.tsx
|
|
141
|
+
var wrapTokenValues = /* @__PURE__ */__name(tokens => {
|
|
142
|
+
if (!tokens) {
|
|
143
|
+
return void 0;
|
|
144
|
+
}
|
|
145
|
+
const wrapped = {};
|
|
146
|
+
for (const [key, value] of Object.entries(tokens)) {
|
|
147
|
+
if (typeof value === "object" && value !== null && !Array.isArray(value)) {
|
|
148
|
+
wrapped[key] = wrapTokenValues(value);
|
|
149
|
+
} else {
|
|
150
|
+
wrapped[key] = {
|
|
151
|
+
value
|
|
152
|
+
};
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
return wrapped;
|
|
156
|
+
}, "wrapTokenValues");
|
|
157
|
+
var toChakraTheme = /* @__PURE__ */__name((themeUITheme, overrides = {}) => {
|
|
158
|
+
const config = {
|
|
159
|
+
theme: {
|
|
160
|
+
tokens: {
|
|
161
|
+
borders: wrapTokenValues(themeUITheme.borders),
|
|
162
|
+
fonts: wrapTokenValues(themeUITheme.fonts),
|
|
163
|
+
fontSizes: wrapTokenValues(themeUITheme.fontSizes),
|
|
164
|
+
fontWeights: wrapTokenValues(themeUITheme.fontWeights),
|
|
165
|
+
letterSpacings: wrapTokenValues(themeUITheme.letterSpacings),
|
|
166
|
+
lineHeights: wrapTokenValues(themeUITheme.lineHeights),
|
|
167
|
+
radii: wrapTokenValues(themeUITheme.radii),
|
|
168
|
+
sizes: wrapTokenValues(themeUITheme.sizes),
|
|
169
|
+
spacing: wrapTokenValues(themeUITheme.space),
|
|
170
|
+
zIndex: wrapTokenValues(themeUITheme.zIndices)
|
|
171
|
+
},
|
|
172
|
+
semanticTokens: {
|
|
173
|
+
colors: wrapTokenValues(themeUITheme.rawColors)
|
|
174
|
+
},
|
|
175
|
+
breakpoints: themeUITheme.breakpoints && Array.isArray(themeUITheme.breakpoints) ? {
|
|
176
|
+
sm: themeUITheme.breakpoints[0],
|
|
177
|
+
md: themeUITheme.breakpoints[1],
|
|
178
|
+
lg: themeUITheme.breakpoints[2],
|
|
179
|
+
xl: themeUITheme.breakpoints[3],
|
|
180
|
+
"2xl": themeUITheme.breakpoints[4]
|
|
181
|
+
} : void 0,
|
|
182
|
+
recipes: {
|
|
183
|
+
...recipes_exports,
|
|
184
|
+
...overrides.theme?.recipes
|
|
185
|
+
},
|
|
186
|
+
slotRecipes: {
|
|
187
|
+
...slotRecipes_exports,
|
|
188
|
+
...overrides.theme?.slotRecipes
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
...overrides
|
|
192
|
+
};
|
|
193
|
+
return createSystem(defaultConfig, config);
|
|
194
|
+
}, "toChakraTheme");
|
|
195
|
+
var ChakraProvider = /* @__PURE__ */__name(({
|
|
196
|
+
children,
|
|
197
|
+
themeUITheme: themeUIThemeProp,
|
|
198
|
+
overrides
|
|
199
|
+
}) => {
|
|
200
|
+
const themeUIThemeContext = useTheme();
|
|
201
|
+
const themeUITheme = themeUIThemeProp ?? themeUIThemeContext.theme;
|
|
202
|
+
const chakraSystem = React2.useMemo(() => {
|
|
203
|
+
return toChakraTheme(themeUITheme, overrides);
|
|
204
|
+
}, [themeUITheme, overrides]);
|
|
205
|
+
return /* @__PURE__ */React2.createElement(ChakraProviderBase, {
|
|
206
|
+
value: chakraSystem
|
|
207
|
+
}, children);
|
|
208
|
+
}, "ChakraProvider");
|
|
8
209
|
|
|
9
210
|
// src/components/Button.tsx
|
|
10
211
|
import { Icon } from "@ttoss/react-icons";
|
|
11
|
-
import * as
|
|
212
|
+
import * as React3 from "react";
|
|
12
213
|
import { Button as ButtonUi } from "theme-ui";
|
|
13
|
-
var Button = /* @__PURE__ */
|
|
214
|
+
var Button = /* @__PURE__ */React3.forwardRef((props, ref) => {
|
|
14
215
|
const {
|
|
15
216
|
children,
|
|
16
217
|
leftIcon,
|
|
@@ -18,7 +219,7 @@ var Button = /* @__PURE__ */React2.forwardRef((props, ref) => {
|
|
|
18
219
|
loading,
|
|
19
220
|
...restProps
|
|
20
221
|
} = props;
|
|
21
|
-
return /* @__PURE__ */
|
|
222
|
+
return /* @__PURE__ */React3.createElement(ButtonUi, {
|
|
22
223
|
type: "button",
|
|
23
224
|
...restProps,
|
|
24
225
|
ref,
|
|
@@ -35,13 +236,13 @@ var Button = /* @__PURE__ */React2.forwardRef((props, ref) => {
|
|
|
35
236
|
},
|
|
36
237
|
...restProps.sx
|
|
37
238
|
}
|
|
38
|
-
}, loading && /* @__PURE__ */
|
|
239
|
+
}, loading && /* @__PURE__ */React3.createElement(Icon, {
|
|
39
240
|
inline: true,
|
|
40
241
|
icon: "three-dots-loading"
|
|
41
|
-
}), !loading && leftIcon && /* @__PURE__ */
|
|
242
|
+
}), !loading && leftIcon && /* @__PURE__ */React3.createElement(Icon, {
|
|
42
243
|
inline: true,
|
|
43
244
|
icon: leftIcon
|
|
44
|
-
}), children, rightIcon && /* @__PURE__ */
|
|
245
|
+
}), children, rightIcon && /* @__PURE__ */React3.createElement(Icon, {
|
|
45
246
|
inline: true,
|
|
46
247
|
icon: rightIcon
|
|
47
248
|
}));
|
|
@@ -161,10 +362,10 @@ var Badge = /* @__PURE__ */__name(({
|
|
|
161
362
|
import { Box } from "theme-ui";
|
|
162
363
|
|
|
163
364
|
// src/components/Card.tsx
|
|
164
|
-
import * as
|
|
365
|
+
import * as React4 from "react";
|
|
165
366
|
import { Box as Box2, Card as CardUi } from "theme-ui";
|
|
166
367
|
var Card = /* @__PURE__ */__name(props => {
|
|
167
|
-
return /* @__PURE__ */
|
|
368
|
+
return /* @__PURE__ */React4.createElement(CardUi, {
|
|
168
369
|
...props,
|
|
169
370
|
sx: {
|
|
170
371
|
backgroundColor: "display.background.secondary.default",
|
|
@@ -184,7 +385,7 @@ var CardTitle = /* @__PURE__ */__name(({
|
|
|
184
385
|
children,
|
|
185
386
|
...props
|
|
186
387
|
}) => {
|
|
187
|
-
return /* @__PURE__ */
|
|
388
|
+
return /* @__PURE__ */React4.createElement(Box2, {
|
|
188
389
|
...props,
|
|
189
390
|
sx: {
|
|
190
391
|
paddingY: "4",
|
|
@@ -200,7 +401,7 @@ var CardBody = /* @__PURE__ */__name(({
|
|
|
200
401
|
children,
|
|
201
402
|
...props
|
|
202
403
|
}) => {
|
|
203
|
-
return /* @__PURE__ */
|
|
404
|
+
return /* @__PURE__ */React4.createElement(Box2, {
|
|
204
405
|
...props,
|
|
205
406
|
sx: {
|
|
206
407
|
paddingY: "4",
|
|
@@ -215,7 +416,7 @@ var CardFooter = /* @__PURE__ */__name(({
|
|
|
215
416
|
children,
|
|
216
417
|
...props
|
|
217
418
|
}) => {
|
|
218
|
-
return /* @__PURE__ */
|
|
419
|
+
return /* @__PURE__ */React4.createElement(Box2, {
|
|
219
420
|
...props,
|
|
220
421
|
sx: {
|
|
221
422
|
paddingY: "2",
|
|
@@ -230,14 +431,14 @@ Card.Body = CardBody;
|
|
|
230
431
|
Card.Footer = CardFooter;
|
|
231
432
|
|
|
232
433
|
// src/components/Checkbox.tsx
|
|
233
|
-
import * as
|
|
434
|
+
import * as React5 from "react";
|
|
234
435
|
import { Checkbox as CheckBoxUi } from "theme-ui";
|
|
235
|
-
var Checkbox = /* @__PURE__ */
|
|
436
|
+
var Checkbox = /* @__PURE__ */React5.forwardRef(({
|
|
236
437
|
indeterminate = false,
|
|
237
438
|
...rest
|
|
238
439
|
}, ref) => {
|
|
239
|
-
const innerRef =
|
|
240
|
-
const setRefs =
|
|
440
|
+
const innerRef = React5.useRef(null);
|
|
441
|
+
const setRefs = React5.useCallback(element => {
|
|
241
442
|
innerRef.current = element;
|
|
242
443
|
if (typeof ref === "function") {
|
|
243
444
|
ref(element);
|
|
@@ -245,19 +446,19 @@ var Checkbox = /* @__PURE__ */React4.forwardRef(({
|
|
|
245
446
|
ref.current = element;
|
|
246
447
|
}
|
|
247
448
|
}, [ref]);
|
|
248
|
-
|
|
449
|
+
React5.useEffect(() => {
|
|
249
450
|
if (innerRef.current) {
|
|
250
451
|
innerRef.current.indeterminate = indeterminate;
|
|
251
452
|
}
|
|
252
453
|
}, [indeterminate]);
|
|
253
454
|
if (indeterminate) {
|
|
254
|
-
return /* @__PURE__ */
|
|
455
|
+
return /* @__PURE__ */React5.createElement("input", {
|
|
255
456
|
type: "checkbox",
|
|
256
457
|
ref: setRefs,
|
|
257
458
|
...rest
|
|
258
459
|
});
|
|
259
460
|
}
|
|
260
|
-
return /* @__PURE__ */
|
|
461
|
+
return /* @__PURE__ */React5.createElement(CheckBoxUi, {
|
|
261
462
|
ref: setRefs,
|
|
262
463
|
...rest
|
|
263
464
|
});
|
|
@@ -278,10 +479,10 @@ var CloseButton = /* @__PURE__ */__name(props => {
|
|
|
278
479
|
}, "CloseButton");
|
|
279
480
|
|
|
280
481
|
// src/components/Container.tsx
|
|
281
|
-
import * as
|
|
482
|
+
import * as React6 from "react";
|
|
282
483
|
import { Container as ContainerUi } from "theme-ui";
|
|
283
|
-
var Container = /* @__PURE__ */
|
|
284
|
-
return /* @__PURE__ */
|
|
484
|
+
var Container = /* @__PURE__ */React6.forwardRef((props, ref) => {
|
|
485
|
+
return /* @__PURE__ */React6.createElement(ContainerUi, {
|
|
285
486
|
ref,
|
|
286
487
|
...props
|
|
287
488
|
});
|
|
@@ -351,7 +552,7 @@ var IconButton = /* @__PURE__ */__name(props => {
|
|
|
351
552
|
import { Image } from "theme-ui";
|
|
352
553
|
|
|
353
554
|
// src/components/InfiniteLinearProgress.tsx
|
|
354
|
-
import * as
|
|
555
|
+
import * as React7 from "react";
|
|
355
556
|
|
|
356
557
|
// src/components/LinearProgress.tsx
|
|
357
558
|
import { Progress } from "theme-ui";
|
|
@@ -359,8 +560,8 @@ import { Progress } from "theme-ui";
|
|
|
359
560
|
// src/components/InfiniteLinearProgress.tsx
|
|
360
561
|
var MAX_PROGRESS = 100;
|
|
361
562
|
var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
|
|
362
|
-
const [progress, setProgress] =
|
|
363
|
-
|
|
563
|
+
const [progress, setProgress] = React7.useState(0);
|
|
564
|
+
React7.useEffect(() => {
|
|
364
565
|
const timer = setInterval(() => {
|
|
365
566
|
setProgress(oldProgress => {
|
|
366
567
|
if (oldProgress === MAX_PROGRESS) {
|
|
@@ -381,7 +582,7 @@ var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
|
|
|
381
582
|
clearInterval(timer);
|
|
382
583
|
};
|
|
383
584
|
}, []);
|
|
384
|
-
return /* @__PURE__ */
|
|
585
|
+
return /* @__PURE__ */React7.createElement(Progress, {
|
|
385
586
|
max: MAX_PROGRESS,
|
|
386
587
|
value: progress,
|
|
387
588
|
role: "progressbar"
|
|
@@ -468,9 +669,9 @@ var Input = /* @__PURE__ */__name(({
|
|
|
468
669
|
|
|
469
670
|
// src/components/InputNumber.tsx
|
|
470
671
|
import { Icon as Icon4 } from "@ttoss/react-icons";
|
|
471
|
-
import * as
|
|
672
|
+
import * as React8 from "react";
|
|
472
673
|
import { Input as Input2 } from "theme-ui";
|
|
473
|
-
var InputNumber = /* @__PURE__ */
|
|
674
|
+
var InputNumber = /* @__PURE__ */React8.forwardRef(({
|
|
474
675
|
sx,
|
|
475
676
|
value,
|
|
476
677
|
infoIcon,
|
|
@@ -478,7 +679,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
|
|
|
478
679
|
onClickInfoIcon,
|
|
479
680
|
...inputProps
|
|
480
681
|
}, ref) => {
|
|
481
|
-
const sxProps =
|
|
682
|
+
const sxProps = React8.useMemo(() => {
|
|
482
683
|
const size = String(typeof value === "undefined" ? 0 : value).length;
|
|
483
684
|
if (inputProps["aria-invalid"] === "true") {
|
|
484
685
|
return {
|
|
@@ -530,7 +731,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
|
|
|
530
731
|
}
|
|
531
732
|
onChange(value + 1);
|
|
532
733
|
}, "handleChangeDown");
|
|
533
|
-
return /* @__PURE__ */
|
|
734
|
+
return /* @__PURE__ */React8.createElement(Flex, {
|
|
534
735
|
sx: {
|
|
535
736
|
width: "fit-content",
|
|
536
737
|
...sx,
|
|
@@ -540,7 +741,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
|
|
|
540
741
|
},
|
|
541
742
|
ref,
|
|
542
743
|
"aria-invalid": inputProps["aria-invalid"]
|
|
543
|
-
}, /* @__PURE__ */
|
|
744
|
+
}, /* @__PURE__ */React8.createElement(Input2, {
|
|
544
745
|
ref,
|
|
545
746
|
variant: "forms.inputNumber",
|
|
546
747
|
sx: sxProps,
|
|
@@ -550,7 +751,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
|
|
|
550
751
|
}, "onChange"),
|
|
551
752
|
value,
|
|
552
753
|
...inputProps
|
|
553
|
-
}), /* @__PURE__ */
|
|
754
|
+
}), /* @__PURE__ */React8.createElement(Text, {
|
|
554
755
|
sx: {
|
|
555
756
|
position: "absolute",
|
|
556
757
|
alignSelf: "center",
|
|
@@ -559,9 +760,9 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
|
|
|
559
760
|
cursor: "pointer"
|
|
560
761
|
},
|
|
561
762
|
onClick: handleChangeUp
|
|
562
|
-
}, /* @__PURE__ */
|
|
763
|
+
}, /* @__PURE__ */React8.createElement(Icon4, {
|
|
563
764
|
icon: "picker-down"
|
|
564
|
-
})), infoIcon && /* @__PURE__ */
|
|
765
|
+
})), infoIcon && /* @__PURE__ */React8.createElement(Text, {
|
|
565
766
|
sx: {
|
|
566
767
|
position: "absolute",
|
|
567
768
|
alignSelf: "center",
|
|
@@ -570,9 +771,9 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
|
|
|
570
771
|
cursor: onClickInfoIcon ? "pointer" : "default"
|
|
571
772
|
},
|
|
572
773
|
onClick: onClickInfoIcon
|
|
573
|
-
}, /* @__PURE__ */
|
|
774
|
+
}, /* @__PURE__ */React8.createElement(Icon4, {
|
|
574
775
|
icon: "info"
|
|
575
|
-
})), /* @__PURE__ */
|
|
776
|
+
})), /* @__PURE__ */React8.createElement(Text, {
|
|
576
777
|
sx: {
|
|
577
778
|
position: "absolute",
|
|
578
779
|
alignSelf: "center",
|
|
@@ -581,23 +782,23 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
|
|
|
581
782
|
cursor: "pointer"
|
|
582
783
|
},
|
|
583
784
|
onClick: handleChangeDown
|
|
584
|
-
}, /* @__PURE__ */
|
|
785
|
+
}, /* @__PURE__ */React8.createElement(Icon4, {
|
|
585
786
|
icon: "picker-up"
|
|
586
787
|
})));
|
|
587
788
|
});
|
|
588
789
|
InputNumber.displayName = "InputNumber";
|
|
589
790
|
|
|
590
791
|
// src/components/InputPassword.tsx
|
|
591
|
-
import * as
|
|
792
|
+
import * as React9 from "react";
|
|
592
793
|
var InputPassword = /* @__PURE__ */__name(({
|
|
593
794
|
showPasswordByDefault = false,
|
|
594
795
|
...inputPasswordProps
|
|
595
796
|
}) => {
|
|
596
|
-
const [hidePass, setHidePass] =
|
|
797
|
+
const [hidePass, setHidePass] = React9.useState(Boolean(!showPasswordByDefault));
|
|
597
798
|
const {
|
|
598
799
|
icon,
|
|
599
800
|
inputType
|
|
600
|
-
} =
|
|
801
|
+
} = React9.useMemo(() => {
|
|
601
802
|
return {
|
|
602
803
|
icon: hidePass ? "view-off" : "view-on",
|
|
603
804
|
inputType: hidePass ? "password" : "text"
|
|
@@ -608,7 +809,7 @@ var InputPassword = /* @__PURE__ */__name(({
|
|
|
608
809
|
return !prev;
|
|
609
810
|
});
|
|
610
811
|
}, "handleClick");
|
|
611
|
-
return /* @__PURE__ */
|
|
812
|
+
return /* @__PURE__ */React9.createElement(Input, {
|
|
612
813
|
...inputPasswordProps,
|
|
613
814
|
trailingIcon: {
|
|
614
815
|
icon,
|
|
@@ -620,7 +821,7 @@ var InputPassword = /* @__PURE__ */__name(({
|
|
|
620
821
|
|
|
621
822
|
// src/components/Label.tsx
|
|
622
823
|
import { Icon as Icon5 } from "@ttoss/react-icons";
|
|
623
|
-
import * as
|
|
824
|
+
import * as React10 from "react";
|
|
624
825
|
import { Label as LabelUi } from "theme-ui";
|
|
625
826
|
|
|
626
827
|
// src/components/Tooltip.tsx
|
|
@@ -702,9 +903,9 @@ var Label = /* @__PURE__ */__name(({
|
|
|
702
903
|
sx,
|
|
703
904
|
...props
|
|
704
905
|
}) => {
|
|
705
|
-
const id =
|
|
906
|
+
const id = React10.useId();
|
|
706
907
|
const tooltipId = `${id}-tooltip`;
|
|
707
|
-
return /* @__PURE__ */
|
|
908
|
+
return /* @__PURE__ */React10.createElement(LabelUi, {
|
|
708
909
|
sx: {
|
|
709
910
|
alignItems: "center",
|
|
710
911
|
fontSize: "sm",
|
|
@@ -714,7 +915,7 @@ var Label = /* @__PURE__ */__name(({
|
|
|
714
915
|
...sx
|
|
715
916
|
},
|
|
716
917
|
...props
|
|
717
|
-
}, children, tooltip && /* @__PURE__ */
|
|
918
|
+
}, children, tooltip && /* @__PURE__ */React10.createElement(Text, {
|
|
718
919
|
"data-tooltip-id": tooltipId,
|
|
719
920
|
sx: {
|
|
720
921
|
color: "currentcolor",
|
|
@@ -722,23 +923,23 @@ var Label = /* @__PURE__ */__name(({
|
|
|
722
923
|
marginLeft: "1"
|
|
723
924
|
},
|
|
724
925
|
"aria-label": TOOLTIP_LABEL
|
|
725
|
-
}, /* @__PURE__ */
|
|
926
|
+
}, /* @__PURE__ */React10.createElement(Icon5, {
|
|
726
927
|
icon: "info"
|
|
727
|
-
}), /* @__PURE__ */
|
|
928
|
+
}), /* @__PURE__ */React10.createElement(Tooltip, {
|
|
728
929
|
id: tooltipId,
|
|
729
930
|
...tooltip
|
|
730
931
|
})));
|
|
731
932
|
}, "Label");
|
|
732
933
|
|
|
733
934
|
// src/components/Link.tsx
|
|
734
|
-
import * as
|
|
935
|
+
import * as React11 from "react";
|
|
735
936
|
import { Link as LinkUi } from "theme-ui";
|
|
736
|
-
var Link = /* @__PURE__ */
|
|
937
|
+
var Link = /* @__PURE__ */React11.forwardRef(({
|
|
737
938
|
quiet,
|
|
738
939
|
className,
|
|
739
940
|
...props
|
|
740
941
|
}, ref) => {
|
|
741
|
-
return /* @__PURE__ */
|
|
942
|
+
return /* @__PURE__ */React11.createElement(LinkUi, {
|
|
742
943
|
className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
|
|
743
944
|
...props,
|
|
744
945
|
ref
|
|
@@ -753,7 +954,7 @@ import { Paragraph } from "theme-ui";
|
|
|
753
954
|
import { Radio } from "theme-ui";
|
|
754
955
|
|
|
755
956
|
// src/components/SegmentedControl.tsx
|
|
756
|
-
import * as
|
|
957
|
+
import * as React12 from "react";
|
|
757
958
|
import { Box as Box3, Flex as Flex2 } from "theme-ui";
|
|
758
959
|
var variantTokens = {
|
|
759
960
|
primary: {
|
|
@@ -813,8 +1014,8 @@ var SegmentedControl = /* @__PURE__ */__name(({
|
|
|
813
1014
|
sx,
|
|
814
1015
|
...rest
|
|
815
1016
|
}) => {
|
|
816
|
-
const [internalValue, setInternalValue] =
|
|
817
|
-
|
|
1017
|
+
const [internalValue, setInternalValue] = React12.useState(propValue || defaultValue);
|
|
1018
|
+
React12.useEffect(() => {
|
|
818
1019
|
if (propValue !== void 0) {
|
|
819
1020
|
setInternalValue(propValue);
|
|
820
1021
|
}
|
|
@@ -834,7 +1035,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
|
|
|
834
1035
|
const currentValue = propValue !== void 0 ? propValue : internalValue;
|
|
835
1036
|
const tokens = variantTokens[variant];
|
|
836
1037
|
const sizeStyles = sizeTokens[size];
|
|
837
|
-
return /* @__PURE__ */
|
|
1038
|
+
return /* @__PURE__ */React12.createElement(Flex2, {
|
|
838
1039
|
className,
|
|
839
1040
|
"data-variant": variant,
|
|
840
1041
|
"data-size": size,
|
|
@@ -919,18 +1120,18 @@ var SegmentedControl = /* @__PURE__ */__name(({
|
|
|
919
1120
|
...sx
|
|
920
1121
|
},
|
|
921
1122
|
...rest
|
|
922
|
-
}, /* @__PURE__ */
|
|
1123
|
+
}, /* @__PURE__ */React12.createElement("div", {
|
|
923
1124
|
className: "rc-segmented"
|
|
924
|
-
}, /* @__PURE__ */
|
|
1125
|
+
}, /* @__PURE__ */React12.createElement(Flex2, {
|
|
925
1126
|
className: "rc-segmented-group custom-segmented-group"
|
|
926
1127
|
}, normalizedOptions.map((option, index) => {
|
|
927
1128
|
const isSelected = option.value === currentValue;
|
|
928
1129
|
const isLastItem = index === normalizedOptions.length - 1;
|
|
929
1130
|
const isItemDisabled = disabled || option.disabled;
|
|
930
1131
|
const showDivider = !isLastItem && option.value !== currentValue && normalizedOptions[index + 1].value !== currentValue;
|
|
931
|
-
return /* @__PURE__ */
|
|
1132
|
+
return /* @__PURE__ */React12.createElement(React12.Fragment, {
|
|
932
1133
|
key: `${index}-${option.value}`
|
|
933
|
-
}, /* @__PURE__ */
|
|
1134
|
+
}, /* @__PURE__ */React12.createElement(Box3, {
|
|
934
1135
|
as: "label",
|
|
935
1136
|
className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
|
|
936
1137
|
onClick: /* @__PURE__ */__name(() => {
|
|
@@ -938,7 +1139,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
|
|
|
938
1139
|
handleChange(option.value);
|
|
939
1140
|
}
|
|
940
1141
|
}, "onClick")
|
|
941
|
-
}, /* @__PURE__ */
|
|
1142
|
+
}, /* @__PURE__ */React12.createElement("input", {
|
|
942
1143
|
type: "radio",
|
|
943
1144
|
value: option.value,
|
|
944
1145
|
checked: isSelected,
|
|
@@ -948,9 +1149,9 @@ var SegmentedControl = /* @__PURE__ */__name(({
|
|
|
948
1149
|
handleChange(option.value);
|
|
949
1150
|
}
|
|
950
1151
|
}, "onChange")
|
|
951
|
-
}), /* @__PURE__ */
|
|
1152
|
+
}), /* @__PURE__ */React12.createElement("div", {
|
|
952
1153
|
className: "rc-segmented-item-label"
|
|
953
|
-
}, option.label)), showDivider && /* @__PURE__ */
|
|
1154
|
+
}, option.label)), showDivider && /* @__PURE__ */React12.createElement(Box3, {
|
|
954
1155
|
className: "segmented-divider",
|
|
955
1156
|
sx: {
|
|
956
1157
|
height: "60%",
|
|
@@ -961,7 +1162,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
|
|
|
961
1162
|
zIndex: 3
|
|
962
1163
|
}
|
|
963
1164
|
}));
|
|
964
|
-
}), currentValue !== void 0 && /* @__PURE__ */
|
|
1165
|
+
}), currentValue !== void 0 && /* @__PURE__ */React12.createElement("div", {
|
|
965
1166
|
className: "rc-segmented-thumb",
|
|
966
1167
|
style: {
|
|
967
1168
|
width: `${100 / normalizedOptions.length}%`,
|
|
@@ -974,7 +1175,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
|
|
|
974
1175
|
|
|
975
1176
|
// src/components/Select.tsx
|
|
976
1177
|
import { Icon as Icon6 } from "@ttoss/react-icons";
|
|
977
|
-
import * as
|
|
1178
|
+
import * as React13 from "react";
|
|
978
1179
|
import ReactSelect, { components } from "react-select";
|
|
979
1180
|
var Control = /* @__PURE__ */__name(props => {
|
|
980
1181
|
const isDisabled = props.selectProps.isDisabled;
|
|
@@ -994,7 +1195,7 @@ var Control = /* @__PURE__ */__name(props => {
|
|
|
994
1195
|
}
|
|
995
1196
|
return "display.background.secondary.default";
|
|
996
1197
|
})();
|
|
997
|
-
return /* @__PURE__ */
|
|
1198
|
+
return /* @__PURE__ */React13.createElement(Box, {
|
|
998
1199
|
sx: {
|
|
999
1200
|
".react-select__control": {
|
|
1000
1201
|
borderColor,
|
|
@@ -1003,7 +1204,7 @@ var Control = /* @__PURE__ */__name(props => {
|
|
|
1003
1204
|
paddingY: "3"
|
|
1004
1205
|
}
|
|
1005
1206
|
}
|
|
1006
|
-
}, /* @__PURE__ */
|
|
1207
|
+
}, /* @__PURE__ */React13.createElement(components.Control, props));
|
|
1007
1208
|
}, "Control");
|
|
1008
1209
|
var DropdownIndicator = /* @__PURE__ */__name(props => {
|
|
1009
1210
|
const isDisabled = props.selectProps.isDisabled;
|
|
@@ -1013,7 +1214,7 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
|
|
|
1013
1214
|
}
|
|
1014
1215
|
return "text";
|
|
1015
1216
|
})();
|
|
1016
|
-
return /* @__PURE__ */
|
|
1217
|
+
return /* @__PURE__ */React13.createElement(Text, {
|
|
1017
1218
|
sx: {
|
|
1018
1219
|
fontSize: "md",
|
|
1019
1220
|
color,
|
|
@@ -1021,14 +1222,14 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
|
|
|
1021
1222
|
display: "flex",
|
|
1022
1223
|
alignItems: "center"
|
|
1023
1224
|
}
|
|
1024
|
-
}, /* @__PURE__ */
|
|
1225
|
+
}, /* @__PURE__ */React13.createElement(Icon6, {
|
|
1025
1226
|
icon: "picker-down"
|
|
1026
1227
|
}));
|
|
1027
1228
|
}, "DropdownIndicator");
|
|
1028
1229
|
var IndicatorsContainer = /* @__PURE__ */__name(({
|
|
1029
1230
|
children
|
|
1030
1231
|
}) => {
|
|
1031
|
-
return /* @__PURE__ */
|
|
1232
|
+
return /* @__PURE__ */React13.createElement(Box, {
|
|
1032
1233
|
sx: {
|
|
1033
1234
|
marginLeft: "4",
|
|
1034
1235
|
border: "none"
|
|
@@ -1038,7 +1239,7 @@ var IndicatorsContainer = /* @__PURE__ */__name(({
|
|
|
1038
1239
|
var Placeholder = /* @__PURE__ */__name(({
|
|
1039
1240
|
children
|
|
1040
1241
|
}) => {
|
|
1041
|
-
return /* @__PURE__ */
|
|
1242
|
+
return /* @__PURE__ */React13.createElement(Text, {
|
|
1042
1243
|
sx: {
|
|
1043
1244
|
color: "onMuted",
|
|
1044
1245
|
alignSelf: "center"
|
|
@@ -1056,10 +1257,10 @@ var SelectContainer = /* @__PURE__ */__name(({
|
|
|
1056
1257
|
return (
|
|
1057
1258
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1058
1259
|
/* @__PURE__ */
|
|
1059
|
-
|
|
1260
|
+
React13.createElement(Box, {
|
|
1060
1261
|
sx,
|
|
1061
1262
|
css: css2
|
|
1062
|
-
}, /* @__PURE__ */
|
|
1263
|
+
}, /* @__PURE__ */React13.createElement(components.SelectContainer, props, children))
|
|
1063
1264
|
);
|
|
1064
1265
|
}, "SelectContainer");
|
|
1065
1266
|
var ValueContainer = /* @__PURE__ */__name(({
|
|
@@ -1085,26 +1286,26 @@ var ValueContainer = /* @__PURE__ */__name(({
|
|
|
1085
1286
|
}
|
|
1086
1287
|
return leadingIcon || "search";
|
|
1087
1288
|
})();
|
|
1088
|
-
return /* @__PURE__ */
|
|
1289
|
+
return /* @__PURE__ */React13.createElement(Flex, {
|
|
1089
1290
|
sx: {
|
|
1090
1291
|
gap: "4",
|
|
1091
1292
|
flex: 1
|
|
1092
1293
|
}
|
|
1093
|
-
}, finalLeadingIcon && /* @__PURE__ */
|
|
1294
|
+
}, finalLeadingIcon && /* @__PURE__ */React13.createElement(Text, {
|
|
1094
1295
|
sx: {
|
|
1095
1296
|
alignSelf: "center",
|
|
1096
1297
|
pointerEvents: "none",
|
|
1097
1298
|
lineHeight: 0,
|
|
1098
1299
|
fontSize: "md"
|
|
1099
1300
|
}
|
|
1100
|
-
}, /* @__PURE__ */
|
|
1301
|
+
}, /* @__PURE__ */React13.createElement(Icon6, {
|
|
1101
1302
|
icon: finalLeadingIcon
|
|
1102
|
-
})), /* @__PURE__ */
|
|
1303
|
+
})), /* @__PURE__ */React13.createElement(Flex, {
|
|
1103
1304
|
sx: {
|
|
1104
1305
|
flex: 1,
|
|
1105
1306
|
alignItems: "center"
|
|
1106
1307
|
}
|
|
1107
|
-
}, children), (trailingIcon || hasError) && /* @__PURE__ */
|
|
1308
|
+
}, children), (trailingIcon || hasError) && /* @__PURE__ */React13.createElement(Text, {
|
|
1108
1309
|
className: hasError ? "error-icon" : "",
|
|
1109
1310
|
sx: {
|
|
1110
1311
|
alignSelf: "center",
|
|
@@ -1113,11 +1314,11 @@ var ValueContainer = /* @__PURE__ */__name(({
|
|
|
1113
1314
|
fontSize: "md",
|
|
1114
1315
|
color: trailingIconColor
|
|
1115
1316
|
}
|
|
1116
|
-
}, /* @__PURE__ */
|
|
1317
|
+
}, /* @__PURE__ */React13.createElement(Icon6, {
|
|
1117
1318
|
icon: hasError ? "warning-alt" : trailingIcon
|
|
1118
1319
|
})));
|
|
1119
1320
|
}, "ValueContainer");
|
|
1120
|
-
var Select = /* @__PURE__ */
|
|
1321
|
+
var Select = /* @__PURE__ */React13.forwardRef(({
|
|
1121
1322
|
...props
|
|
1122
1323
|
}, ref) => {
|
|
1123
1324
|
const value = props.options?.find(option => {
|
|
@@ -1126,7 +1327,7 @@ var Select = /* @__PURE__ */React12.forwardRef(({
|
|
|
1126
1327
|
}
|
|
1127
1328
|
return false;
|
|
1128
1329
|
});
|
|
1129
|
-
return /* @__PURE__ */
|
|
1330
|
+
return /* @__PURE__ */React13.createElement(ReactSelect, {
|
|
1130
1331
|
ref,
|
|
1131
1332
|
/**
|
|
1132
1333
|
* https://react-select.com/components
|
|
@@ -1208,7 +1409,7 @@ var Switch = /* @__PURE__ */__name(props => {
|
|
|
1208
1409
|
}, "Switch");
|
|
1209
1410
|
|
|
1210
1411
|
// src/components/Tag.tsx
|
|
1211
|
-
import * as
|
|
1412
|
+
import * as React14 from "react";
|
|
1212
1413
|
var tagVariantMap = {
|
|
1213
1414
|
positive: {
|
|
1214
1415
|
bg: "feedback.background.positive.default",
|
|
@@ -1265,7 +1466,7 @@ var Tag = /* @__PURE__ */__name(({
|
|
|
1265
1466
|
alignItems: "center"
|
|
1266
1467
|
};
|
|
1267
1468
|
if (Array.isArray(children)) {
|
|
1268
|
-
return /* @__PURE__ */
|
|
1469
|
+
return /* @__PURE__ */React14.createElement(Box, {
|
|
1269
1470
|
as: "span",
|
|
1270
1471
|
sx: {
|
|
1271
1472
|
ml: 2,
|
|
@@ -1275,7 +1476,7 @@ var Tag = /* @__PURE__ */__name(({
|
|
|
1275
1476
|
...sx
|
|
1276
1477
|
}
|
|
1277
1478
|
}, children.map((child, i) => {
|
|
1278
|
-
return /* @__PURE__ */
|
|
1479
|
+
return /* @__PURE__ */React14.createElement(Box, {
|
|
1279
1480
|
key: i,
|
|
1280
1481
|
as: "span",
|
|
1281
1482
|
sx: {
|
|
@@ -1289,7 +1490,7 @@ var Tag = /* @__PURE__ */__name(({
|
|
|
1289
1490
|
}, child);
|
|
1290
1491
|
}));
|
|
1291
1492
|
}
|
|
1292
|
-
return /* @__PURE__ */
|
|
1493
|
+
return /* @__PURE__ */React14.createElement(Box, {
|
|
1293
1494
|
as: "span",
|
|
1294
1495
|
sx: {
|
|
1295
1496
|
...baseStyles,
|
|
@@ -1300,15 +1501,15 @@ var Tag = /* @__PURE__ */__name(({
|
|
|
1300
1501
|
|
|
1301
1502
|
// src/components/Textarea.tsx
|
|
1302
1503
|
import { Icon as Icon7 } from "@ttoss/react-icons";
|
|
1303
|
-
import * as
|
|
1504
|
+
import * as React15 from "react";
|
|
1304
1505
|
import { Textarea as TextareaUI } from "theme-ui";
|
|
1305
|
-
var Textarea = /* @__PURE__ */
|
|
1506
|
+
var Textarea = /* @__PURE__ */React15.forwardRef(({
|
|
1306
1507
|
trailingIcon,
|
|
1307
1508
|
className,
|
|
1308
1509
|
sx,
|
|
1309
1510
|
...textareaProps
|
|
1310
1511
|
}, ref) => {
|
|
1311
|
-
return /* @__PURE__ */
|
|
1512
|
+
return /* @__PURE__ */React15.createElement(Flex, {
|
|
1312
1513
|
className,
|
|
1313
1514
|
sx: {
|
|
1314
1515
|
...sx,
|
|
@@ -1316,7 +1517,7 @@ var Textarea = /* @__PURE__ */React14.forwardRef(({
|
|
|
1316
1517
|
padding: 0,
|
|
1317
1518
|
border: "none"
|
|
1318
1519
|
}
|
|
1319
|
-
}, /* @__PURE__ */
|
|
1520
|
+
}, /* @__PURE__ */React15.createElement(TextareaUI, {
|
|
1320
1521
|
ref,
|
|
1321
1522
|
sx: {
|
|
1322
1523
|
fontFamily: "body",
|
|
@@ -1328,13 +1529,13 @@ var Textarea = /* @__PURE__ */React14.forwardRef(({
|
|
|
1328
1529
|
},
|
|
1329
1530
|
className,
|
|
1330
1531
|
...textareaProps
|
|
1331
|
-
}), trailingIcon && /* @__PURE__ */
|
|
1532
|
+
}), trailingIcon && /* @__PURE__ */React15.createElement(Text, {
|
|
1332
1533
|
sx: {
|
|
1333
1534
|
position: "absolute",
|
|
1334
1535
|
right: "1.25rem",
|
|
1335
1536
|
top: "0.75rem"
|
|
1336
1537
|
}
|
|
1337
|
-
}, /* @__PURE__ */
|
|
1538
|
+
}, /* @__PURE__ */React15.createElement(Icon7, {
|
|
1338
1539
|
inline: true,
|
|
1339
1540
|
icon: trailingIcon
|
|
1340
1541
|
})));
|
|
@@ -1343,7 +1544,7 @@ Textarea.displayName = "Textarea";
|
|
|
1343
1544
|
|
|
1344
1545
|
// src/components/TooltipIcon.tsx
|
|
1345
1546
|
import { Icon as Icon8 } from "@ttoss/react-icons";
|
|
1346
|
-
import * as
|
|
1547
|
+
import * as React16 from "react";
|
|
1347
1548
|
var TooltipIcon = /* @__PURE__ */__name(({
|
|
1348
1549
|
icon,
|
|
1349
1550
|
onClick,
|
|
@@ -1352,9 +1553,9 @@ var TooltipIcon = /* @__PURE__ */__name(({
|
|
|
1352
1553
|
variant,
|
|
1353
1554
|
sx
|
|
1354
1555
|
}) => {
|
|
1355
|
-
const id =
|
|
1556
|
+
const id = React16.useId();
|
|
1356
1557
|
const tooltipId = `${id}-tooltip`;
|
|
1357
|
-
return /* @__PURE__ */
|
|
1558
|
+
return /* @__PURE__ */React16.createElement(React16.Fragment, null, /* @__PURE__ */React16.createElement(Text, {
|
|
1358
1559
|
"data-testid": dataTestId,
|
|
1359
1560
|
"data-tooltip-id": tooltip ? tooltipId : void 0,
|
|
1360
1561
|
sx: {
|
|
@@ -1363,10 +1564,10 @@ var TooltipIcon = /* @__PURE__ */__name(({
|
|
|
1363
1564
|
},
|
|
1364
1565
|
onClick,
|
|
1365
1566
|
variant
|
|
1366
|
-
}, /* @__PURE__ */
|
|
1567
|
+
}, /* @__PURE__ */React16.createElement(Icon8, {
|
|
1367
1568
|
inline: true,
|
|
1368
1569
|
icon
|
|
1369
|
-
})), tooltip && /* @__PURE__ */
|
|
1570
|
+
})), tooltip && /* @__PURE__ */React16.createElement(Tooltip, {
|
|
1370
1571
|
id: tooltipId,
|
|
1371
1572
|
...tooltip,
|
|
1372
1573
|
variant
|
|
@@ -1384,21 +1585,17 @@ var ThemeProvider = /* @__PURE__ */__name(({
|
|
|
1384
1585
|
}) => {
|
|
1385
1586
|
return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(ThemeUIProvider, {
|
|
1386
1587
|
theme
|
|
1387
|
-
}, /* @__PURE__ */React.createElement(Global, {
|
|
1588
|
+
}, /* @__PURE__ */React.createElement(ChakraProvider, null, /* @__PURE__ */React.createElement(Global, {
|
|
1388
1589
|
styles: css`
|
|
1389
|
-
|
|
1590
|
+
${fonts.map(url => {
|
|
1390
1591
|
return `@import url('${url}');`;
|
|
1391
1592
|
}).join("\n")}
|
|
1392
|
-
|
|
1393
|
-
}), children));
|
|
1593
|
+
`
|
|
1594
|
+
}), children)));
|
|
1394
1595
|
}, "ThemeProvider");
|
|
1395
1596
|
|
|
1396
|
-
// src/theme/useTheme.ts
|
|
1397
|
-
import { useThemeUI } from "theme-ui";
|
|
1398
|
-
var useTheme = useThemeUI;
|
|
1399
|
-
|
|
1400
1597
|
// src/index.ts
|
|
1401
1598
|
import { keyframes } from "@emotion/react";
|
|
1402
1599
|
import { useBreakpointIndex, useResponsiveValue } from "@theme-ui/match-media";
|
|
1403
1600
|
import { BaseStyles, Global as Global2 } from "theme-ui";
|
|
1404
|
-
export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, SegmentedControl, Select, Slider, Spinner, Stack, Switch, Tag, Text, Textarea, ThemeProvider, Tooltip, TooltipIcon, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
|
|
1601
|
+
export { ActionButton, Badge, BaseStyles, Box, Button, Card, ChakraProvider, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, SegmentedControl, Select, Slider, Spinner, Stack, Switch, Tag, Text, Textarea, ThemeProvider, Tooltip, TooltipIcon, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,93 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { createSystem } from '@chakra-ui/react';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import * as theme_ui from 'theme-ui';
|
|
5
|
-
import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, CloseProps, TextProps, IconButtonProps as IconButtonProps$1, SxProp, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, FlexProps, SwitchProps, ThemeUIStyleObject, TextareaProps as TextareaProps$1
|
|
5
|
+
import { Theme, ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, CloseProps, TextProps, IconButtonProps as IconButtonProps$1, SxProp, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, FlexProps, SwitchProps, ThemeUIStyleObject, TextareaProps as TextareaProps$1 } from 'theme-ui';
|
|
6
6
|
export { BaseStyles, Box, BoxProps, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SwitchProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
|
|
7
|
+
import { IconType } from '@ttoss/react-icons';
|
|
7
8
|
import { ITooltip } from 'react-tooltip';
|
|
8
9
|
import { Props } from 'react-select';
|
|
9
10
|
export { Keyframes, keyframes } from '@emotion/react';
|
|
10
11
|
export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
|
|
11
12
|
|
|
13
|
+
type ChakraThemeProviderProps = {
|
|
14
|
+
children?: React.ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Optional Theme UI theme to use instead of reading from context.
|
|
17
|
+
* Useful when you need to pass a specific theme directly.
|
|
18
|
+
*/
|
|
19
|
+
themeUITheme?: Theme;
|
|
20
|
+
/**
|
|
21
|
+
* Optional Chakra-specific config overrides.
|
|
22
|
+
* Use this to add recipes, slot recipes, or customize tokens.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* <ChakraProvider
|
|
27
|
+
* overrides={{
|
|
28
|
+
* theme: {
|
|
29
|
+
* slotRecipes: {
|
|
30
|
+
* steps: stepsSlotRecipe,
|
|
31
|
+
* },
|
|
32
|
+
* },
|
|
33
|
+
* }}
|
|
34
|
+
* >
|
|
35
|
+
* ...
|
|
36
|
+
* </ChakraProvider>
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
overrides?: Parameters<typeof createSystem>[1];
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* Opt-in Chakra UI provider that inherits design tokens from the parent
|
|
43
|
+
* theme-ui `ThemeProvider`.
|
|
44
|
+
*
|
|
45
|
+
* **Must be rendered as a child of `ThemeProvider`** so that `useThemeUI()`
|
|
46
|
+
* can read the active theme (unless `themeUITheme` prop is provided).
|
|
47
|
+
*
|
|
48
|
+
* This component automatically converts theme-ui tokens to Chakra UI v3
|
|
49
|
+
* system format, allowing seamless integration between both systems.
|
|
50
|
+
*
|
|
51
|
+
* @example Basic usage (inherits from ThemeProvider context)
|
|
52
|
+
* ```tsx
|
|
53
|
+
* import { ThemeProvider } from '@ttoss/ui';
|
|
54
|
+
* import { ChakraProvider } from '@ttoss/ui/chakra';
|
|
55
|
+
*
|
|
56
|
+
* function App() {
|
|
57
|
+
* return (
|
|
58
|
+
* <ThemeProvider>
|
|
59
|
+
* <ChakraProvider>
|
|
60
|
+
* <Button colorScheme="blue">Click me</Button>
|
|
61
|
+
* </ChakraProvider>
|
|
62
|
+
* </ThemeProvider>
|
|
63
|
+
* );
|
|
64
|
+
* }
|
|
65
|
+
* ```
|
|
66
|
+
*
|
|
67
|
+
* @example With custom theme
|
|
68
|
+
* ```tsx
|
|
69
|
+
* <ChakraProvider themeUITheme={customTheme}>
|
|
70
|
+
* <Button>Click me</Button>
|
|
71
|
+
* </ChakraProvider>
|
|
72
|
+
* ```
|
|
73
|
+
*
|
|
74
|
+
* @example With recipe overrides
|
|
75
|
+
* ```tsx
|
|
76
|
+
* <ChakraProvider
|
|
77
|
+
* overrides={{
|
|
78
|
+
* theme: {
|
|
79
|
+
* slotRecipes: {
|
|
80
|
+
* steps: customStepsRecipe,
|
|
81
|
+
* },
|
|
82
|
+
* },
|
|
83
|
+
* }}
|
|
84
|
+
* >
|
|
85
|
+
* <Steps.Root>...</Steps.Root>
|
|
86
|
+
* </ChakraProvider>
|
|
87
|
+
* ```
|
|
88
|
+
*/
|
|
89
|
+
declare const ChakraProvider: ({ children, themeUITheme: themeUIThemeProp, overrides, }: ChakraThemeProviderProps) => react_jsx_runtime.JSX.Element;
|
|
90
|
+
|
|
12
91
|
type ButtonProps = ButtonProps$1 & {
|
|
13
92
|
leftIcon?: IconType;
|
|
14
93
|
rightIcon?: IconType;
|
|
@@ -204,7 +283,7 @@ type SelectProps = Omit<Props<SelectOption, IsMulti>, 'styles' | 'value' | 'onCh
|
|
|
204
283
|
/**
|
|
205
284
|
* https://react-select.com/home
|
|
206
285
|
*/
|
|
207
|
-
declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "value" | "
|
|
286
|
+
declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "value" | "styles" | "onChange" | "components"> & SxProp & {
|
|
208
287
|
value?: SelectOptionValue;
|
|
209
288
|
onChange?: (value: SelectOptionValue | undefined) => void;
|
|
210
289
|
disabled?: boolean;
|
|
@@ -245,4 +324,4 @@ declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) =
|
|
|
245
324
|
|
|
246
325
|
declare const useTheme: () => theme_ui.ThemeUIContextValue;
|
|
247
326
|
|
|
248
|
-
export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipIcon, type TooltipIconProps, type TooltipProps, useTheme };
|
|
327
|
+
export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, ChakraProvider, type ChakraThemeProviderProps, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipIcon, type TooltipIconProps, type TooltipProps, useTheme };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/ui",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.7.0",
|
|
4
4
|
"description": "Primitive layout, typographic, and other components for styling applications.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "ttoss",
|
|
@@ -24,29 +24,30 @@
|
|
|
24
24
|
],
|
|
25
25
|
"sideEffects": false,
|
|
26
26
|
"dependencies": {
|
|
27
|
+
"@chakra-ui/react": "^3.33.0",
|
|
27
28
|
"@theme-ui/match-media": "^0.17.2",
|
|
28
29
|
"rc-segmented": "^2.7.0",
|
|
29
30
|
"react-select": "^5.10.2",
|
|
30
31
|
"react-tooltip": "^5.30.0",
|
|
31
32
|
"theme-ui": "^0.17.2",
|
|
32
|
-
"@ttoss/theme": "^2.9.
|
|
33
|
+
"@ttoss/theme": "^2.9.2"
|
|
33
34
|
},
|
|
34
35
|
"peerDependencies": {
|
|
35
36
|
"@emotion/react": "^11",
|
|
36
37
|
"react": ">=16.8.0",
|
|
37
|
-
"@ttoss/react-icons": "^0.
|
|
38
|
+
"@ttoss/react-icons": "^0.6.0"
|
|
38
39
|
},
|
|
39
40
|
"devDependencies": {
|
|
40
41
|
"@emotion/react": "^11.14.0",
|
|
41
42
|
"@iconify-icons/mdi-light": "^1.2.5",
|
|
42
43
|
"@types/jest": "^30.0.0",
|
|
43
|
-
"@types/react": "^19.2.
|
|
44
|
+
"@types/react": "^19.2.14",
|
|
44
45
|
"jest": "^30.2.0",
|
|
45
|
-
"react": "^19.2.
|
|
46
|
+
"react": "^19.2.4",
|
|
46
47
|
"tsup": "^8.5.1",
|
|
47
|
-
"@ttoss/
|
|
48
|
-
"@ttoss/
|
|
49
|
-
"@ttoss/
|
|
48
|
+
"@ttoss/config": "^1.36.0",
|
|
49
|
+
"@ttoss/test-utils": "^4.1.0",
|
|
50
|
+
"@ttoss/react-icons": "^0.6.0"
|
|
50
51
|
},
|
|
51
52
|
"keywords": [
|
|
52
53
|
"React",
|