@ttoss/ui 5.0.14 → 5.1.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.
Files changed (3) hide show
  1. package/dist/esm/index.js +517 -487
  2. package/dist/index.d.ts +65 -63
  3. package/package.json +5 -5
package/dist/esm/index.js CHANGED
@@ -1,47 +1,85 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
2
 
3
- // src/index.ts
4
- import { BaseStyles, Global as Global2 } from "theme-ui";
5
- import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
6
- import { keyframes } from "@emotion/react";
3
+ // src/components/Button.tsx
4
+ import * as React from "react";
5
+ import { Button as ButtonUi } from "theme-ui";
6
+ import { Icon } from "@ttoss/react-icons";
7
+ import { jsx, jsxs } from "react/jsx-runtime";
8
+ var Button = React.forwardRef((props, ref) => {
9
+ const {
10
+ children,
11
+ leftIcon,
12
+ rightIcon,
13
+ loading,
14
+ ...restProps
15
+ } = props;
16
+ return /* @__PURE__ */jsxs(ButtonUi, {
17
+ type: "button",
18
+ ...restProps,
19
+ ref,
20
+ sx: {
21
+ cursor: "pointer",
22
+ paddingX: "xl",
23
+ paddingY: "lg",
24
+ fontFamily: "body",
25
+ display: "inline-flex",
26
+ alignItems: "center",
27
+ gap: "lg",
28
+ ...restProps.sx
29
+ },
30
+ children: [loading && /* @__PURE__ */jsx(Icon, {
31
+ inline: true,
32
+ icon: "three-dots-loading"
33
+ }), !loading && leftIcon && /* @__PURE__ */jsx(Icon, {
34
+ inline: true,
35
+ icon: leftIcon
36
+ }), children, rightIcon && /* @__PURE__ */jsx(Icon, {
37
+ inline: true,
38
+ icon: rightIcon
39
+ })]
40
+ });
41
+ });
42
+ Button.displayName = "Button";
7
43
 
8
- // src/theme/ThemeProvider.tsx
9
- import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
10
- import { Global, css } from "@emotion/react";
11
- import { ThemeUIProvider } from "theme-ui";
12
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
13
- var ThemeProvider = ({
14
- children,
15
- theme = BruttalTheme,
16
- fonts = BruttalFonts
44
+ // src/components/ActionButton.tsx
45
+ import { jsx as jsx2 } from "react/jsx-runtime";
46
+ var ActionButton = ({
47
+ icon,
48
+ variant = "default",
49
+ sx,
50
+ ...props
17
51
  }) => {
18
- return /* @__PURE__ */jsx(Fragment, {
19
- children: /* @__PURE__ */jsxs(ThemeUIProvider, {
20
- theme,
21
- children: [/* @__PURE__ */jsx(Global, {
22
- styles: css`
23
- ${fonts.map(url => {
24
- return `@import url('${url}');`;
25
- }).join("\n")}
26
- `
27
- }), children]
28
- })
52
+ return /* @__PURE__ */jsx2(Button, {
53
+ variant: `buttons.actionButton.${variant}`,
54
+ leftIcon: icon,
55
+ sx: {
56
+ padding: "sm",
57
+ gap: "xs",
58
+ fontFamily: "caption",
59
+ borderRadius: "action",
60
+ outlineColor: "transparent",
61
+ ":disabled": props.disabled ? {
62
+ backgroundColor: "muted",
63
+ color: "onMuted",
64
+ cursor: "not-allowed",
65
+ border: "muted",
66
+ borderColor: "onMuted"
67
+ } : void 0,
68
+ ...sx
69
+ },
70
+ ...props
29
71
  });
30
72
  };
31
73
 
32
- // src/theme/useTheme.ts
33
- import { useThemeUI } from "theme-ui";
34
- var useTheme = useThemeUI;
35
-
36
74
  // src/components/Badge.tsx
37
75
  import { Badge as BadgeUi } from "theme-ui";
38
- import { Icon } from "@ttoss/react-icons";
76
+ import { Icon as Icon2 } from "@ttoss/react-icons";
39
77
 
40
78
  // src/components/Text.tsx
41
79
  import { Text } from "theme-ui";
42
80
 
43
81
  // src/components/Badge.tsx
44
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
82
+ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
45
83
  var Badge = ({
46
84
  icon,
47
85
  children,
@@ -65,17 +103,17 @@ var Badge = ({
65
103
  ...sx
66
104
  },
67
105
  ...props,
68
- children: [icon && /* @__PURE__ */jsx2(Icon, {
106
+ children: [icon && /* @__PURE__ */jsx3(Icon2, {
69
107
  inline: true,
70
108
  icon
71
- }), children, chip && /* @__PURE__ */jsx2(Text, {
109
+ }), children, chip && /* @__PURE__ */jsx3(Text, {
72
110
  sx: {
73
111
  cursor: "pointer",
74
112
  lineHeight: 0,
75
113
  color: "currentcolor",
76
114
  alignSelf: "center"
77
115
  },
78
- children: /* @__PURE__ */jsx2(Icon, {
116
+ children: /* @__PURE__ */jsx3(Icon2, {
79
117
  onClick: onDelete,
80
118
  inline: true,
81
119
  icon: "close"
@@ -87,49 +125,93 @@ var Badge = ({
87
125
  // src/components/Box.tsx
88
126
  import { Box } from "theme-ui";
89
127
 
90
- // src/components/Button.tsx
91
- import * as React from "react";
92
- import { Button as ButtonUi } from "theme-ui";
93
- import { Icon as Icon2 } from "@ttoss/react-icons";
94
- import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
95
- var Button = React.forwardRef((props, ref) => {
96
- const {
97
- children,
98
- leftIcon,
99
- rightIcon,
100
- loading,
101
- ...restProps
102
- } = props;
103
- return /* @__PURE__ */jsxs3(ButtonUi, {
128
+ // src/components/Card.tsx
129
+ import { Card } from "theme-ui";
130
+
131
+ // src/components/Checkbox.tsx
132
+ import * as React2 from "react";
133
+ import { Checkbox as CheckBoxUi } from "theme-ui";
134
+ import { jsx as jsx4 } from "react/jsx-runtime";
135
+ var Checkbox = React2.forwardRef(({
136
+ indeterminate = false,
137
+ ...rest
138
+ }, ref) => {
139
+ const innerRef = React2.useRef(null);
140
+ React2.useImperativeHandle(ref, () => {
141
+ return innerRef.current;
142
+ });
143
+ React2.useEffect(() => {
144
+ if (innerRef.current) {
145
+ innerRef.current.indeterminate = indeterminate;
146
+ }
147
+ }, [indeterminate]);
148
+ if (indeterminate) {
149
+ return /* @__PURE__ */jsx4("input", {
150
+ type: "checkbox",
151
+ ref: innerRef,
152
+ ...rest
153
+ });
154
+ }
155
+ return /* @__PURE__ */jsx4(CheckBoxUi, {
156
+ ref: innerRef,
157
+ ...rest
158
+ });
159
+ });
160
+ Checkbox.displayName = "Checkbox";
161
+
162
+ // src/components/CloseButton.tsx
163
+ import * as React3 from "react";
164
+ import { Icon as Icon3 } from "@ttoss/react-icons";
165
+ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
166
+ var CloseButton = React3.forwardRef(({
167
+ label,
168
+ sx,
169
+ onlyText,
170
+ ...props
171
+ }, ref) => {
172
+ if (onlyText && !label) {
173
+ return null;
174
+ }
175
+ return /* @__PURE__ */jsxs3(Button, {
176
+ variant: "buttons.closeButton",
104
177
  type: "button",
105
- ...restProps,
106
- ref,
178
+ "aria-label": label,
107
179
  sx: {
108
- cursor: "pointer",
109
- paddingX: "xl",
110
- paddingY: "lg",
111
- fontFamily: "body",
180
+ fontFamily: "caption",
181
+ fontSize: "xs",
112
182
  display: "inline-flex",
113
183
  alignItems: "center",
114
- gap: "lg",
115
- ...restProps.sx
184
+ cursor: "pointer",
185
+ lineHeight: "normal",
186
+ gap: "sm",
187
+ padding: "sm",
188
+ width: "fit-content",
189
+ transition: "all 0.2s",
190
+ "& > iconify-icon": {
191
+ fontSize: "base"
192
+ },
193
+ ...sx
116
194
  },
117
- children: [loading && /* @__PURE__ */jsx3(Icon2, {
118
- inline: true,
119
- icon: "three-dots-loading"
120
- }), !loading && leftIcon && /* @__PURE__ */jsx3(Icon2, {
121
- inline: true,
122
- icon: leftIcon
123
- }), children, rightIcon && /* @__PURE__ */jsx3(Icon2, {
124
- inline: true,
125
- icon: rightIcon
195
+ ...props,
196
+ ref,
197
+ children: [label, !onlyText && /* @__PURE__ */jsx5(Icon3, {
198
+ icon: "close"
126
199
  })]
127
200
  });
128
201
  });
129
- Button.displayName = "Button";
202
+ CloseButton.displayName = "CloseButton";
130
203
 
131
- // src/components/Card.tsx
132
- import { Card } from "theme-ui";
204
+ // src/components/Container.tsx
205
+ import * as React4 from "react";
206
+ import { Container as ContainerUi } from "theme-ui";
207
+ import { jsx as jsx6 } from "react/jsx-runtime";
208
+ var Container = React4.forwardRef((props, ref) => {
209
+ return /* @__PURE__ */jsx6(ContainerUi, {
210
+ ref,
211
+ ...props
212
+ });
213
+ });
214
+ Container.displayName = "Container";
133
215
 
134
216
  // src/components/Divider.tsx
135
217
  import { Divider } from "theme-ui";
@@ -143,15 +225,89 @@ import { Grid } from "theme-ui";
143
225
  // src/components/Heading.tsx
144
226
  import { Heading } from "theme-ui";
145
227
 
228
+ // src/components/HelpText.tsx
229
+ import { jsx as jsx7 } from "react/jsx-runtime";
230
+ var HelpText = ({
231
+ sx,
232
+ disabled,
233
+ negative,
234
+ ...props
235
+ }) => {
236
+ const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
237
+ return /* @__PURE__ */jsx7(Text, {
238
+ variant,
239
+ sx: {
240
+ fontSize: "sm",
241
+ fontFamily: "caption",
242
+ lineHeight: "base",
243
+ ...sx
244
+ },
245
+ "aria-disabled": disabled ? "true" : void 0,
246
+ ...props
247
+ });
248
+ };
249
+
250
+ // src/components/IconButton.tsx
251
+ import * as React5 from "react";
252
+ import { IconButton as IconButtonUi } from "theme-ui";
253
+ import { jsx as jsx8 } from "react/jsx-runtime";
254
+ var IconButton = React5.forwardRef((props, ref) => {
255
+ return /* @__PURE__ */jsx8(IconButtonUi, {
256
+ type: "button",
257
+ ...props,
258
+ ref
259
+ });
260
+ });
261
+ IconButton.displayName = "IconButton";
262
+
146
263
  // src/components/Image.tsx
147
264
  import { Image } from "theme-ui";
148
265
 
266
+ // src/components/InfiniteLinearProgress.tsx
267
+ import * as React6 from "react";
268
+
269
+ // src/components/LinearProgress.tsx
270
+ import { Progress } from "theme-ui";
271
+
272
+ // src/components/InfiniteLinearProgress.tsx
273
+ import { jsx as jsx9 } from "react/jsx-runtime";
274
+ var MAX_PROGRESS = 100;
275
+ var InfiniteLinearProgress = () => {
276
+ const [progress, setProgress] = React6.useState(0);
277
+ React6.useEffect(() => {
278
+ const timer = setInterval(() => {
279
+ setProgress(oldProgress => {
280
+ if (oldProgress === MAX_PROGRESS) {
281
+ return 0;
282
+ }
283
+ let diff = 0;
284
+ if (oldProgress > 0.97 * MAX_PROGRESS) {
285
+ diff -= 0.75 * MAX_PROGRESS;
286
+ } else if (oldProgress > 0.6 * MAX_PROGRESS) {
287
+ diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
288
+ } else {
289
+ diff = Math.random() * (MAX_PROGRESS * 0.02);
290
+ }
291
+ return Math.min(oldProgress + diff, MAX_PROGRESS);
292
+ });
293
+ }, 100);
294
+ return () => {
295
+ clearInterval(timer);
296
+ };
297
+ }, []);
298
+ return /* @__PURE__ */jsx9(Progress, {
299
+ max: MAX_PROGRESS,
300
+ value: progress,
301
+ role: "progressbar"
302
+ });
303
+ };
304
+
149
305
  // src/components/Input.tsx
150
- import * as React2 from "react";
151
- import { Icon as Icon3 } from "@ttoss/react-icons";
306
+ import * as React7 from "react";
307
+ import { Icon as Icon4 } from "@ttoss/react-icons";
152
308
  import { Input as InputUI } from "theme-ui";
153
- import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
154
- var Input = React2.forwardRef(({
309
+ import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
310
+ var Input = React7.forwardRef(({
155
311
  leadingIcon,
156
312
  trailingIcon: trailingIconProp,
157
313
  onLeadingIconClick,
@@ -169,7 +325,7 @@ var Input = React2.forwardRef(({
169
325
  padding: 0,
170
326
  border: "none"
171
327
  },
172
- children: [leadingIcon && /* @__PURE__ */jsx4(Text, {
328
+ children: [leadingIcon && /* @__PURE__ */jsx10(Text, {
173
329
  sx: {
174
330
  position: "absolute",
175
331
  alignSelf: "center",
@@ -178,11 +334,11 @@ var Input = React2.forwardRef(({
178
334
  },
179
335
  onClick: onLeadingIconClick,
180
336
  variant: "leading-icon",
181
- children: /* @__PURE__ */jsx4(Icon3, {
337
+ children: /* @__PURE__ */jsx10(Icon4, {
182
338
  inline: true,
183
339
  icon: leadingIcon
184
340
  })
185
- }), /* @__PURE__ */jsx4(InputUI, {
341
+ }), /* @__PURE__ */jsx10(InputUI, {
186
342
  ref,
187
343
  sx: {
188
344
  fontFamily: "body",
@@ -195,7 +351,7 @@ var Input = React2.forwardRef(({
195
351
  },
196
352
  className,
197
353
  ...inputProps
198
- }), trailingIcon && /* @__PURE__ */jsx4(Text, {
354
+ }), trailingIcon && /* @__PURE__ */jsx10(Text, {
199
355
  sx: {
200
356
  position: "absolute",
201
357
  right: "1rem",
@@ -204,7 +360,7 @@ var Input = React2.forwardRef(({
204
360
  },
205
361
  variant: "trailing-icon",
206
362
  onClick: onTrailingIconClick,
207
- children: /* @__PURE__ */jsx4(Icon3, {
363
+ children: /* @__PURE__ */jsx10(Icon4, {
208
364
  inline: true,
209
365
  icon: trailingIcon
210
366
  })
@@ -213,10 +369,185 @@ var Input = React2.forwardRef(({
213
369
  });
214
370
  Input.displayName = "Input";
215
371
 
216
- // src/components/Label.tsx
217
- import { Icon as Icon4 } from "@ttoss/react-icons";
218
- import { Label as LabelUi } from "theme-ui";
219
- import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
372
+ // src/components/InputNumber.tsx
373
+ import * as React8 from "react";
374
+ import { Icon as Icon5 } from "@ttoss/react-icons";
375
+ import { Input as Input2 } from "theme-ui";
376
+ import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
377
+ var InputNumber = React8.forwardRef(({
378
+ sx,
379
+ value,
380
+ infoIcon,
381
+ onChange,
382
+ onClickInfoIcon,
383
+ ...inputProps
384
+ }, ref) => {
385
+ const sxProps = React8.useMemo(() => {
386
+ const size = String(typeof value === "undefined" ? 0 : value).length;
387
+ if (inputProps["aria-invalid"] === "true") {
388
+ return {
389
+ width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
390
+ textAlign: "left",
391
+ "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
392
+ WebkitAppearance: "none",
393
+ margin: 0
394
+ },
395
+ ...sx,
396
+ paddingLeft: "3xl",
397
+ paddingRight: "2xl",
398
+ margin: 0
399
+ };
400
+ }
401
+ return {
402
+ width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
403
+ textAlign: "center",
404
+ "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
405
+ WebkitAppearance: "none",
406
+ margin: 0
407
+ },
408
+ fontFamily: "body",
409
+ paddingY: "lg",
410
+ paddingX: "xl",
411
+ ...sx,
412
+ paddingLeft: "2xl",
413
+ paddingRight: "2xl",
414
+ margin: 0
415
+ };
416
+ }, [inputProps, value, sx]);
417
+ const handleChangeUp = () => {
418
+ if (inputProps.disabled) {
419
+ return;
420
+ }
421
+ if (typeof value !== "number") {
422
+ onChange(-1);
423
+ return;
424
+ }
425
+ onChange(value - 1);
426
+ };
427
+ const handleChangeDown = () => {
428
+ if (inputProps.disabled) {
429
+ return;
430
+ }
431
+ if (typeof value !== "number") {
432
+ onChange(1);
433
+ return;
434
+ }
435
+ onChange(value + 1);
436
+ };
437
+ return /* @__PURE__ */jsxs5(Flex, {
438
+ sx: {
439
+ width: "fit-content",
440
+ ...sx,
441
+ position: "relative",
442
+ padding: 0,
443
+ border: "none"
444
+ },
445
+ ref,
446
+ "aria-invalid": inputProps["aria-invalid"],
447
+ children: [/* @__PURE__ */jsx11(Input2, {
448
+ ref,
449
+ variant: "forms.inputNumber",
450
+ sx: sxProps,
451
+ type: "number",
452
+ onChange: e => {
453
+ onChange(Number(e.target.value));
454
+ },
455
+ value,
456
+ ...inputProps
457
+ }), /* @__PURE__ */jsx11(Text, {
458
+ sx: {
459
+ position: "absolute",
460
+ alignSelf: "center",
461
+ left: "1rem",
462
+ zIndex: 1,
463
+ cursor: "pointer"
464
+ },
465
+ onClick: handleChangeUp,
466
+ children: /* @__PURE__ */jsx11(Icon5, {
467
+ icon: "picker-down"
468
+ })
469
+ }), infoIcon && /* @__PURE__ */jsx11(Text, {
470
+ sx: {
471
+ position: "absolute",
472
+ alignSelf: "center",
473
+ right: "2.5rem",
474
+ zIndex: 1,
475
+ cursor: onClickInfoIcon ? "pointer" : "default"
476
+ },
477
+ onClick: onClickInfoIcon,
478
+ children: /* @__PURE__ */jsx11(Icon5, {
479
+ icon: "info"
480
+ })
481
+ }), /* @__PURE__ */jsx11(Text, {
482
+ sx: {
483
+ position: "absolute",
484
+ alignSelf: "center",
485
+ right: "1rem",
486
+ zIndex: 1,
487
+ cursor: "pointer"
488
+ },
489
+ onClick: handleChangeDown,
490
+ children: /* @__PURE__ */jsx11(Icon5, {
491
+ icon: "picker-up"
492
+ })
493
+ })]
494
+ });
495
+ });
496
+ InputNumber.displayName = "InputNumber";
497
+
498
+ // src/components/InputPassword/InputPassword.tsx
499
+ import * as React10 from "react";
500
+
501
+ // src/components/InputPassword/useHidePassInput.ts
502
+ import * as React9 from "react";
503
+ var useHidePassInput = (defaultValue = true) => {
504
+ const [hidePass, setHidePass] = React9.useState(Boolean(defaultValue));
505
+ const {
506
+ icon,
507
+ inputType
508
+ } = React9.useMemo(() => {
509
+ return {
510
+ icon: hidePass ? "view-off" : "view-on",
511
+ inputType: hidePass ? "password" : "text"
512
+ };
513
+ }, [hidePass]);
514
+ const handleClick = () => {
515
+ setHidePass(prev => {
516
+ return !prev;
517
+ });
518
+ };
519
+ return {
520
+ handleClick,
521
+ icon,
522
+ inputType
523
+ };
524
+ };
525
+
526
+ // src/components/InputPassword/InputPassword.tsx
527
+ import { jsx as jsx12 } from "react/jsx-runtime";
528
+ var InputPassword = React10.forwardRef(({
529
+ showPasswordByDefault,
530
+ ...inputPasswordProps
531
+ }, ref) => {
532
+ const {
533
+ handleClick,
534
+ icon,
535
+ inputType
536
+ } = useHidePassInput(!showPasswordByDefault);
537
+ return /* @__PURE__ */jsx12(Input, {
538
+ ref,
539
+ ...inputPasswordProps,
540
+ trailingIcon: icon,
541
+ onTrailingIconClick: handleClick,
542
+ type: inputType
543
+ });
544
+ });
545
+ InputPassword.displayName = "InputPassword";
546
+
547
+ // src/components/Label.tsx
548
+ import { Icon as Icon6 } from "@ttoss/react-icons";
549
+ import { Label as LabelUi } from "theme-ui";
550
+ import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
220
551
  var TOOLTIP_LABEL = "tooltip";
221
552
  var Label = ({
222
553
  children,
@@ -225,7 +556,7 @@ var Label = ({
225
556
  sx,
226
557
  ...props
227
558
  }) => {
228
- return /* @__PURE__ */jsxs5(LabelUi, {
559
+ return /* @__PURE__ */jsxs6(LabelUi, {
229
560
  sx: {
230
561
  fontFamily: "caption",
231
562
  alignItems: "center",
@@ -234,14 +565,14 @@ var Label = ({
234
565
  ...sx
235
566
  },
236
567
  ...props,
237
- children: [children, tooltip && /* @__PURE__ */jsx5(Text, {
568
+ children: [children, tooltip && /* @__PURE__ */jsx13(Text, {
238
569
  sx: {
239
570
  color: "currentcolor",
240
571
  cursor: onTooltipClick ? "pointer" : void 0
241
572
  },
242
573
  onClick: onTooltipClick,
243
574
  "aria-label": TOOLTIP_LABEL,
244
- children: /* @__PURE__ */jsx5(Icon4, {
575
+ children: /* @__PURE__ */jsx13(Icon6, {
245
576
  inline: true,
246
577
  icon: "info"
247
578
  })
@@ -250,15 +581,15 @@ var Label = ({
250
581
  };
251
582
 
252
583
  // src/components/Link.tsx
253
- import * as React3 from "react";
584
+ import * as React11 from "react";
254
585
  import { Link as LinkUi } from "theme-ui";
255
- import { jsx as jsx6 } from "react/jsx-runtime";
256
- var Link = React3.forwardRef(({
586
+ import { jsx as jsx14 } from "react/jsx-runtime";
587
+ var Link = React11.forwardRef(({
257
588
  quiet,
258
589
  className,
259
590
  ...props
260
591
  }, ref) => {
261
- return /* @__PURE__ */jsx6(LinkUi, {
592
+ return /* @__PURE__ */jsx14(LinkUi, {
262
593
  className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
263
594
  ...props,
264
595
  ref
@@ -266,14 +597,17 @@ var Link = React3.forwardRef(({
266
597
  });
267
598
  Link.displayName = "Link";
268
599
 
269
- // src/components/LinearProgress.tsx
270
- import { Progress } from "theme-ui";
600
+ // src/components/Paragraph.tsx
601
+ import { Paragraph } from "theme-ui";
602
+
603
+ // src/components/Radio.tsx
604
+ import { Radio } from "theme-ui";
271
605
 
272
606
  // src/components/Select.tsx
273
- import * as React4 from "react";
274
- import { Icon as Icon5 } from "@ttoss/react-icons";
607
+ import * as React12 from "react";
608
+ import { Icon as Icon7 } from "@ttoss/react-icons";
275
609
  import ReactSelect, { components } from "react-select";
276
- import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
610
+ import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
277
611
  var Control = props => {
278
612
  const isDisabled = props.selectProps.isDisabled;
279
613
  const hasError = props.selectProps["aria-invalid"] === "true";
@@ -292,7 +626,7 @@ var Control = props => {
292
626
  }
293
627
  return "surface";
294
628
  })();
295
- return /* @__PURE__ */jsx7(Box, {
629
+ return /* @__PURE__ */jsx15(Box, {
296
630
  sx: {
297
631
  ".react-select__control": {
298
632
  border,
@@ -302,7 +636,7 @@ var Control = props => {
302
636
  borderRadius: "action"
303
637
  }
304
638
  },
305
- children: /* @__PURE__ */jsx7(components.Control, {
639
+ children: /* @__PURE__ */jsx15(components.Control, {
306
640
  ...props
307
641
  })
308
642
  });
@@ -315,7 +649,7 @@ var DropdownIndicator = props => {
315
649
  }
316
650
  return "text";
317
651
  })();
318
- return /* @__PURE__ */jsx7(Text, {
652
+ return /* @__PURE__ */jsx15(Text, {
319
653
  sx: {
320
654
  fontSize: "base",
321
655
  color,
@@ -323,7 +657,7 @@ var DropdownIndicator = props => {
323
657
  display: "flex",
324
658
  alignItems: "center"
325
659
  },
326
- children: /* @__PURE__ */jsx7(Icon5, {
660
+ children: /* @__PURE__ */jsx15(Icon7, {
327
661
  icon: "picker-down"
328
662
  })
329
663
  });
@@ -331,7 +665,7 @@ var DropdownIndicator = props => {
331
665
  var IndicatorsContainer = ({
332
666
  children
333
667
  }) => {
334
- return /* @__PURE__ */jsx7(Box, {
668
+ return /* @__PURE__ */jsx15(Box, {
335
669
  sx: {
336
670
  marginLeft: "lg",
337
671
  border: "none"
@@ -342,7 +676,7 @@ var IndicatorsContainer = ({
342
676
  var Placeholder = ({
343
677
  children
344
678
  }) => {
345
- return /* @__PURE__ */jsx7(Text, {
679
+ return /* @__PURE__ */jsx15(Text, {
346
680
  sx: {
347
681
  color: "onMuted",
348
682
  alignSelf: "center"
@@ -361,10 +695,10 @@ var SelectContainer = ({
361
695
  return (
362
696
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
363
697
  /* @__PURE__ */
364
- jsx7(Box, {
698
+ jsx15(Box, {
365
699
  sx,
366
700
  css: css2,
367
- children: /* @__PURE__ */jsx7(components.SelectContainer, {
701
+ children: /* @__PURE__ */jsx15(components.SelectContainer, {
368
702
  ...props,
369
703
  children
370
704
  })
@@ -394,28 +728,28 @@ var ValueContainer = ({
394
728
  }
395
729
  return leadingIcon || "search";
396
730
  })();
397
- return /* @__PURE__ */jsxs6(Flex, {
731
+ return /* @__PURE__ */jsxs7(Flex, {
398
732
  sx: {
399
733
  gap: "lg",
400
734
  flex: 1
401
735
  },
402
- children: [finalLeadingIcon && /* @__PURE__ */jsx7(Text, {
736
+ children: [finalLeadingIcon && /* @__PURE__ */jsx15(Text, {
403
737
  sx: {
404
738
  alignSelf: "center",
405
739
  pointerEvents: "none",
406
740
  lineHeight: 0,
407
741
  fontSize: "base"
408
742
  },
409
- children: /* @__PURE__ */jsx7(Icon5, {
743
+ children: /* @__PURE__ */jsx15(Icon7, {
410
744
  icon: finalLeadingIcon
411
745
  })
412
- }), /* @__PURE__ */jsx7(Flex, {
746
+ }), /* @__PURE__ */jsx15(Flex, {
413
747
  sx: {
414
748
  flex: 1,
415
749
  alignItems: "center"
416
750
  },
417
751
  children
418
- }), (trailingIcon || hasError) && /* @__PURE__ */jsx7(Text, {
752
+ }), (trailingIcon || hasError) && /* @__PURE__ */jsx15(Text, {
419
753
  className: hasError ? "error-icon" : "",
420
754
  sx: {
421
755
  alignSelf: "center",
@@ -424,13 +758,13 @@ var ValueContainer = ({
424
758
  fontSize: "base",
425
759
  color: trailingIconColor
426
760
  },
427
- children: /* @__PURE__ */jsx7(Icon5, {
761
+ children: /* @__PURE__ */jsx15(Icon7, {
428
762
  icon: hasError ? "warning-alt" : trailingIcon
429
763
  })
430
764
  })]
431
765
  });
432
766
  };
433
- var Select = React4.forwardRef(({
767
+ var Select = React12.forwardRef(({
434
768
  ...props
435
769
  }, ref) => {
436
770
  const value = props.options?.find(option => {
@@ -439,7 +773,7 @@ var Select = React4.forwardRef(({
439
773
  }
440
774
  return false;
441
775
  });
442
- return /* @__PURE__ */jsx7(ReactSelect, {
776
+ return /* @__PURE__ */jsx15(ReactSelect, {
443
777
  ref,
444
778
  components: {
445
779
  Control,
@@ -468,105 +802,67 @@ var Select = React4.forwardRef(({
468
802
  });
469
803
  Select.displayName = "Select";
470
804
 
805
+ // src/components/Slider.tsx
806
+ import { Slider } from "theme-ui";
807
+
471
808
  // src/components/Spinner.tsx
472
809
  import { Spinner } from "theme-ui";
473
810
 
474
- // src/components/Radio.tsx
475
- import { Radio } from "theme-ui";
476
-
477
- // src/components/IconButton.tsx
478
- import * as React5 from "react";
479
- import { IconButton as IconButtonUi } from "theme-ui";
480
- import { jsx as jsx8 } from "react/jsx-runtime";
481
- var IconButton = React5.forwardRef((props, ref) => {
482
- return /* @__PURE__ */jsx8(IconButtonUi, {
483
- type: "button",
811
+ // src/components/Stack.tsx
812
+ import * as React13 from "react";
813
+ import { jsx as jsx16 } from "react/jsx-runtime";
814
+ var Stack = React13.forwardRef((props, ref) => {
815
+ return /* @__PURE__ */jsx16(Flex, {
816
+ ref,
484
817
  ...props,
485
- ref
818
+ sx: {
819
+ flexDirection: "column",
820
+ ...props.sx
821
+ }
486
822
  });
487
823
  });
488
- IconButton.displayName = "IconButton";
489
-
490
- // src/components/Slider.tsx
491
- import { Slider } from "theme-ui";
824
+ Stack.displayName = "Stack";
492
825
 
493
- // src/components/Checkbox.tsx
494
- import * as React6 from "react";
495
- import { Checkbox as CheckBoxUi } from "theme-ui";
496
- import { jsx as jsx9 } from "react/jsx-runtime";
497
- var Checkbox = React6.forwardRef(({
498
- indeterminate = false,
499
- ...rest
500
- }, ref) => {
501
- const innerRef = React6.useRef(null);
502
- React6.useImperativeHandle(ref, () => {
503
- return innerRef.current;
504
- });
505
- React6.useEffect(() => {
506
- if (innerRef.current) {
507
- innerRef.current.indeterminate = indeterminate;
826
+ // src/components/Switch.tsx
827
+ import { Switch as SwitchUi } from "theme-ui";
828
+ import { jsx as jsx17 } from "react/jsx-runtime";
829
+ var Switch = props => {
830
+ return /* @__PURE__ */jsx17(SwitchUi, {
831
+ ...props,
832
+ role: "switch",
833
+ "aria-checked": props.checked || false,
834
+ sx: {
835
+ backgroundColor: "input.background.muted.default",
836
+ "input:checked ~ &": {
837
+ backgroundColor: "input.background.secondary.default"
838
+ },
839
+ "input ~ & > div": {
840
+ backgroundColor: "input.background.primary.default"
841
+ },
842
+ "input:checked ~ & > div": {
843
+ backgroundColor: "input.background.accent.default"
844
+ },
845
+ "input:focus ~ &": {
846
+ outline: "md",
847
+ outlineColor: "input.border.accent.default",
848
+ outlineOffset: "0px"
849
+ }
508
850
  }
509
- }, [indeterminate]);
510
- if (indeterminate) {
511
- return /* @__PURE__ */jsx9("input", {
512
- type: "checkbox",
513
- ref: innerRef,
514
- ...rest
515
- });
516
- }
517
- return /* @__PURE__ */jsx9(CheckBoxUi, {
518
- ref: innerRef,
519
- ...rest
520
851
  });
521
- });
522
- Checkbox.displayName = "Checkbox";
523
-
524
- // src/components/InfiniteLinearProgress.tsx
525
- import * as React7 from "react";
526
- import { jsx as jsx10 } from "react/jsx-runtime";
527
- var MAX_PROGRESS = 100;
528
- var InfiniteLinearProgress = () => {
529
- const [progress, setProgress] = React7.useState(0);
530
- React7.useEffect(() => {
531
- const timer = setInterval(() => {
532
- setProgress(oldProgress => {
533
- if (oldProgress === MAX_PROGRESS) {
534
- return 0;
535
- }
536
- let diff = 0;
537
- if (oldProgress > 0.97 * MAX_PROGRESS) {
538
- diff -= 0.75 * MAX_PROGRESS;
539
- } else if (oldProgress > 0.6 * MAX_PROGRESS) {
540
- diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
541
- } else {
542
- diff = Math.random() * (MAX_PROGRESS * 0.02);
543
- }
544
- return Math.min(oldProgress + diff, MAX_PROGRESS);
545
- });
546
- }, 100);
547
- return () => {
548
- clearInterval(timer);
549
- };
550
- }, []);
551
- return /* @__PURE__ */jsx10(Progress, {
552
- max: MAX_PROGRESS,
553
- value: progress,
554
- role: "progressbar"
555
- });
556
- };
852
+ };
557
853
 
558
854
  // src/components/Textarea.tsx
559
- import * as React8 from "react";
560
- import { Icon as Icon6 } from "@ttoss/react-icons";
855
+ import * as React14 from "react";
856
+ import { Icon as Icon8 } from "@ttoss/react-icons";
561
857
  import { Textarea as TextareaUI } from "theme-ui";
562
- import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
563
- var Textarea = React8.forwardRef(({
858
+ import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
859
+ var Textarea = React14.forwardRef(({
564
860
  trailingIcon,
565
861
  className,
566
862
  sx,
567
863
  ...textareaProps
568
864
  }, ref) => {
569
- return /* @__PURE__ */jsxs7(Flex, {
865
+ return /* @__PURE__ */jsxs8(Flex, {
570
866
  className,
571
867
  sx: {
572
868
  ...sx,
@@ -574,7 +870,7 @@ var Textarea = React8.forwardRef(({
574
870
  padding: 0,
575
871
  border: "none"
576
872
  },
577
- children: [/* @__PURE__ */jsx11(TextareaUI, {
873
+ children: [/* @__PURE__ */jsx18(TextareaUI, {
578
874
  ref,
579
875
  sx: {
580
876
  fontFamily: "body",
@@ -586,13 +882,13 @@ var Textarea = React8.forwardRef(({
586
882
  },
587
883
  className,
588
884
  ...textareaProps
589
- }), trailingIcon && /* @__PURE__ */jsx11(Text, {
885
+ }), trailingIcon && /* @__PURE__ */jsx18(Text, {
590
886
  sx: {
591
887
  position: "absolute",
592
888
  right: "1.25rem",
593
889
  top: "0.75rem"
594
890
  },
595
- children: /* @__PURE__ */jsx11(Icon6, {
891
+ children: /* @__PURE__ */jsx18(Icon8, {
596
892
  inline: true,
597
893
  icon: trailingIcon
598
894
  })
@@ -601,302 +897,36 @@ var Textarea = React8.forwardRef(({
601
897
  });
602
898
  Textarea.displayName = "Textarea";
603
899
 
604
- // src/components/Container.tsx
605
- import * as React9 from "react";
606
- import { Container as ContainerUi } from "theme-ui";
607
- import { jsx as jsx12 } from "react/jsx-runtime";
608
- var Container = React9.forwardRef((props, ref) => {
609
- return /* @__PURE__ */jsx12(ContainerUi, {
610
- ref,
611
- ...props
612
- });
613
- });
614
- Container.displayName = "Container";
615
-
616
- // src/components/HelpText.tsx
617
- import { jsx as jsx13 } from "react/jsx-runtime";
618
- var HelpText = ({
619
- sx,
620
- disabled,
621
- negative,
622
- ...props
900
+ // src/theme/ThemeProvider.tsx
901
+ import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
902
+ import { Global, css } from "@emotion/react";
903
+ import { ThemeUIProvider } from "theme-ui";
904
+ import { Fragment, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
905
+ var ThemeProvider = ({
906
+ children,
907
+ theme = BruttalTheme,
908
+ fonts = BruttalFonts
623
909
  }) => {
624
- const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
625
- return /* @__PURE__ */jsx13(Text, {
626
- variant,
627
- sx: {
628
- fontSize: "sm",
629
- fontFamily: "caption",
630
- lineHeight: "base",
631
- ...sx
632
- },
633
- "aria-disabled": disabled ? "true" : void 0,
634
- ...props
635
- });
636
- };
637
-
638
- // src/components/CloseButton.tsx
639
- import * as React10 from "react";
640
- import { Icon as Icon7 } from "@ttoss/react-icons";
641
- import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
642
- var CloseButton = React10.forwardRef(({
643
- label,
644
- sx,
645
- onlyText,
646
- ...props
647
- }, ref) => {
648
- if (onlyText && !label) {
649
- return null;
650
- }
651
- return /* @__PURE__ */jsxs8(Button, {
652
- variant: "buttons.closeButton",
653
- type: "button",
654
- "aria-label": label,
655
- sx: {
656
- fontFamily: "caption",
657
- fontSize: "xs",
658
- display: "inline-flex",
659
- alignItems: "center",
660
- cursor: "pointer",
661
- lineHeight: "normal",
662
- gap: "sm",
663
- padding: "sm",
664
- width: "fit-content",
665
- transition: "all 0.2s",
666
- "& > iconify-icon": {
667
- fontSize: "base"
668
- },
669
- ...sx
670
- },
671
- ...props,
672
- ref,
673
- children: [label, !onlyText && /* @__PURE__ */jsx14(Icon7, {
674
- icon: "close"
675
- })]
676
- });
677
- });
678
- CloseButton.displayName = "CloseButton";
679
-
680
- // src/components/InputNumber.tsx
681
- import * as React11 from "react";
682
- import { Icon as Icon8 } from "@ttoss/react-icons";
683
- import { Input as Input2 } from "theme-ui";
684
- import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
685
- var InputNumber = React11.forwardRef(({
686
- sx,
687
- value,
688
- infoIcon,
689
- onChange,
690
- onClickInfoIcon,
691
- ...inputProps
692
- }, ref) => {
693
- const sxProps = React11.useMemo(() => {
694
- const size = String(typeof value === "undefined" ? 0 : value).length;
695
- if (inputProps["aria-invalid"] === "true") {
696
- return {
697
- width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
698
- textAlign: "left",
699
- "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
700
- WebkitAppearance: "none",
701
- margin: 0
702
- },
703
- ...sx,
704
- paddingLeft: "3xl",
705
- paddingRight: "2xl",
706
- margin: 0
707
- };
708
- }
709
- return {
710
- width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
711
- textAlign: "center",
712
- "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
713
- WebkitAppearance: "none",
714
- margin: 0
715
- },
716
- fontFamily: "body",
717
- paddingY: "lg",
718
- paddingX: "xl",
719
- ...sx,
720
- paddingLeft: "2xl",
721
- paddingRight: "2xl",
722
- margin: 0
723
- };
724
- }, [inputProps, value, sx]);
725
- const handleChangeUp = () => {
726
- if (inputProps.disabled) {
727
- return;
728
- }
729
- if (typeof value !== "number") {
730
- onChange(-1);
731
- return;
732
- }
733
- onChange(value - 1);
734
- };
735
- const handleChangeDown = () => {
736
- if (inputProps.disabled) {
737
- return;
738
- }
739
- if (typeof value !== "number") {
740
- onChange(1);
741
- return;
742
- }
743
- onChange(value + 1);
744
- };
745
- return /* @__PURE__ */jsxs9(Flex, {
746
- sx: {
747
- width: "fit-content",
748
- ...sx,
749
- position: "relative",
750
- padding: 0,
751
- border: "none"
752
- },
753
- ref,
754
- "aria-invalid": inputProps["aria-invalid"],
755
- children: [/* @__PURE__ */jsx15(Input2, {
756
- ref,
757
- variant: "forms.inputNumber",
758
- sx: sxProps,
759
- type: "number",
760
- onChange: e => {
761
- onChange(Number(e.target.value));
762
- },
763
- value,
764
- ...inputProps
765
- }), /* @__PURE__ */jsx15(Text, {
766
- sx: {
767
- position: "absolute",
768
- alignSelf: "center",
769
- left: "1rem",
770
- zIndex: 1,
771
- cursor: "pointer"
772
- },
773
- onClick: handleChangeUp,
774
- children: /* @__PURE__ */jsx15(Icon8, {
775
- icon: "picker-down"
776
- })
777
- }), infoIcon && /* @__PURE__ */jsx15(Text, {
778
- sx: {
779
- position: "absolute",
780
- alignSelf: "center",
781
- right: "2.5rem",
782
- zIndex: 1,
783
- cursor: onClickInfoIcon ? "pointer" : "default"
784
- },
785
- onClick: onClickInfoIcon,
786
- children: /* @__PURE__ */jsx15(Icon8, {
787
- icon: "info"
788
- })
789
- }), /* @__PURE__ */jsx15(Text, {
790
- sx: {
791
- position: "absolute",
792
- alignSelf: "center",
793
- right: "1rem",
794
- zIndex: 1,
795
- cursor: "pointer"
796
- },
797
- onClick: handleChangeDown,
798
- children: /* @__PURE__ */jsx15(Icon8, {
799
- icon: "picker-up"
800
- })
801
- })]
802
- });
803
- });
804
- InputNumber.displayName = "InputNumber";
805
-
806
- // src/components/Stack.tsx
807
- import * as React12 from "react";
808
- import { jsx as jsx16 } from "react/jsx-runtime";
809
- var Stack = React12.forwardRef((props, ref) => {
810
- return /* @__PURE__ */jsx16(Flex, {
811
- ref,
812
- ...props,
813
- sx: {
814
- flexDirection: "column",
815
- ...props.sx
816
- }
910
+ return /* @__PURE__ */jsx19(Fragment, {
911
+ children: /* @__PURE__ */jsxs9(ThemeUIProvider, {
912
+ theme,
913
+ children: [/* @__PURE__ */jsx19(Global, {
914
+ styles: css`
915
+ ${fonts.map(url => {
916
+ return `@import url('${url}');`;
917
+ }).join("\n")}
918
+ `
919
+ }), children]
920
+ })
817
921
  });
818
- });
819
- Stack.displayName = "Stack";
820
-
821
- // src/components/Paragraph.tsx
822
- import { Paragraph } from "theme-ui";
823
-
824
- // src/components/InputPassword/InputPassword.tsx
825
- import * as React14 from "react";
826
-
827
- // src/components/InputPassword/useHidePassInput.ts
828
- import * as React13 from "react";
829
- var useHidePassInput = (defaultValue = true) => {
830
- const [hidePass, setHidePass] = React13.useState(Boolean(defaultValue));
831
- const {
832
- icon,
833
- inputType
834
- } = React13.useMemo(() => {
835
- return {
836
- icon: hidePass ? "view-off" : "view-on",
837
- inputType: hidePass ? "password" : "text"
838
- };
839
- }, [hidePass]);
840
- const handleClick = () => {
841
- setHidePass(prev => {
842
- return !prev;
843
- });
844
- };
845
- return {
846
- handleClick,
847
- icon,
848
- inputType
849
- };
850
922
  };
851
923
 
852
- // src/components/InputPassword/InputPassword.tsx
853
- import { jsx as jsx17 } from "react/jsx-runtime";
854
- var InputPassword = React14.forwardRef(({
855
- showPasswordByDefault,
856
- ...inputPasswordProps
857
- }, ref) => {
858
- const {
859
- handleClick,
860
- icon,
861
- inputType
862
- } = useHidePassInput(!showPasswordByDefault);
863
- return /* @__PURE__ */jsx17(Input, {
864
- ref,
865
- ...inputPasswordProps,
866
- trailingIcon: icon,
867
- onTrailingIconClick: handleClick,
868
- type: inputType
869
- });
870
- });
871
- InputPassword.displayName = "InputPassword";
924
+ // src/theme/useTheme.ts
925
+ import { useThemeUI } from "theme-ui";
926
+ var useTheme = useThemeUI;
872
927
 
873
- // src/components/ActionButton.tsx
874
- import { jsx as jsx18 } from "react/jsx-runtime";
875
- var ActionButton = ({
876
- icon,
877
- variant = "default",
878
- sx,
879
- ...props
880
- }) => {
881
- return /* @__PURE__ */jsx18(Button, {
882
- variant: `buttons.actionButton.${variant}`,
883
- leftIcon: icon,
884
- sx: {
885
- padding: "sm",
886
- gap: "xs",
887
- fontFamily: "caption",
888
- borderRadius: "action",
889
- outlineColor: "transparent",
890
- ":disabled": props.disabled ? {
891
- backgroundColor: "muted",
892
- color: "onMuted",
893
- cursor: "not-allowed",
894
- border: "muted",
895
- borderColor: "onMuted"
896
- } : void 0,
897
- ...sx
898
- },
899
- ...props
900
- });
901
- };
902
- 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, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
928
+ // src/index.ts
929
+ import { keyframes } from "@emotion/react";
930
+ import { useBreakpointIndex, useResponsiveValue } from "@theme-ui/match-media";
931
+ import { BaseStyles, Global as Global2 } from "theme-ui";
932
+ 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, Select, Slider, Spinner, Stack, Switch, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };