@ttoss/ui 4.1.0 → 4.1.2

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 (7) hide show
  1. package/dist/esm/index.js +32 -14
  2. package/dist/index.d.mts +4 -2
  3. package/dist/index.d.ts +4 -2
  4. package/dist/index.js +79 -61
  5. package/package.json +19 -14
  6. package/src/components/Badge.tsx +25 -1
  7. package/src/components/Select.tsx +2 -3
package/dist/esm/index.js CHANGED
@@ -36,11 +36,18 @@ var useTheme = useThemeUI;
36
36
  // src/components/Badge.tsx
37
37
  import { Badge as BadgeUi } from "theme-ui";
38
38
  import { Icon } from "@ttoss/react-icons";
39
+
40
+ // src/components/Text.tsx
41
+ import { Text } from "theme-ui";
42
+
43
+ // src/components/Badge.tsx
39
44
  import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
40
45
  var Badge = ({
41
46
  icon,
42
47
  children,
43
48
  sx,
49
+ chip,
50
+ onDelete,
44
51
  ...props
45
52
  }) => {
46
53
  return /* @__PURE__ */jsxs2(BadgeUi, {
@@ -61,7 +68,19 @@ var Badge = ({
61
68
  children: [icon && /* @__PURE__ */jsx2(Icon, {
62
69
  inline: true,
63
70
  icon
64
- }), children]
71
+ }), children, chip && /* @__PURE__ */jsx2(Text, {
72
+ sx: {
73
+ cursor: "pointer",
74
+ lineHeight: 0,
75
+ color: "currentcolor",
76
+ alignSelf: "center"
77
+ },
78
+ children: /* @__PURE__ */jsx2(Icon, {
79
+ onClick: onDelete,
80
+ inline: true,
81
+ icon: "close"
82
+ })
83
+ })]
65
84
  });
66
85
  };
67
86
 
@@ -250,9 +269,6 @@ Link.displayName = "Link";
250
269
  // src/components/LinearProgress.tsx
251
270
  import { Progress } from "theme-ui";
252
271
 
253
- // src/components/Text.tsx
254
- import { Text } from "theme-ui";
255
-
256
272
  // src/components/Select.tsx
257
273
  import * as React4 from "react";
258
274
  import { Icon as Icon5 } from "@ttoss/react-icons";
@@ -313,9 +329,7 @@ var DropdownIndicator = props => {
313
329
  });
314
330
  };
315
331
  var IndicatorsContainer = ({
316
- children,
317
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
318
- ...props
332
+ children
319
333
  }) => {
320
334
  return /* @__PURE__ */jsx7(Box, {
321
335
  sx: {
@@ -344,14 +358,18 @@ var SelectContainer = ({
344
358
  sx,
345
359
  css: css2
346
360
  } = props.selectProps;
347
- return /* @__PURE__ */jsx7(Box, {
348
- sx,
349
- css: css2,
350
- children: /* @__PURE__ */jsx7(components.SelectContainer, {
351
- ...props,
352
- children
361
+ return (
362
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
363
+ /* @__PURE__ */
364
+ jsx7(Box, {
365
+ sx,
366
+ css: css2,
367
+ children: /* @__PURE__ */jsx7(components.SelectContainer, {
368
+ ...props,
369
+ children
370
+ })
353
371
  })
354
- });
372
+ );
355
373
  };
356
374
  var ValueContainer = ({
357
375
  children,
package/dist/index.d.mts CHANGED
@@ -22,8 +22,10 @@ declare const useTheme: () => theme_ui.ThemeUIContextValue;
22
22
 
23
23
  type BadgeProps = BadgeProps$1 & {
24
24
  icon?: IconType;
25
+ chip?: boolean;
26
+ onDelete?: () => void;
25
27
  };
26
- declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
28
+ declare const Badge: ({ icon, children, sx, chip, onDelete, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
27
29
 
28
30
  type ButtonProps = ButtonProps$1 & {
29
31
  leftIcon?: IconType;
@@ -77,7 +79,7 @@ type SelectProps = Omit<Props<SelectOption, IsMulti>, 'styles' | 'value' | 'onCh
77
79
  /**
78
80
  * https://react-select.com/home
79
81
  */
80
- declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "styles" | "onChange" | "value" | "components"> & SxProp & {
82
+ declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "value" | "onChange" | "styles" | "components"> & SxProp & {
81
83
  value?: SelectOptionValue | undefined;
82
84
  onChange?: ((value: SelectOptionValue | undefined) => void) | undefined;
83
85
  disabled?: boolean | undefined;
package/dist/index.d.ts CHANGED
@@ -22,8 +22,10 @@ declare const useTheme: () => theme_ui.ThemeUIContextValue;
22
22
 
23
23
  type BadgeProps = BadgeProps$1 & {
24
24
  icon?: IconType;
25
+ chip?: boolean;
26
+ onDelete?: () => void;
25
27
  };
26
- declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
28
+ declare const Badge: ({ icon, children, sx, chip, onDelete, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
27
29
 
28
30
  type ButtonProps = ButtonProps$1 & {
29
31
  leftIcon?: IconType;
@@ -77,7 +79,7 @@ type SelectProps = Omit<Props<SelectOption, IsMulti>, 'styles' | 'value' | 'onCh
77
79
  /**
78
80
  * https://react-select.com/home
79
81
  */
80
- declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "styles" | "onChange" | "value" | "components"> & SxProp & {
82
+ declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "value" | "onChange" | "styles" | "components"> & SxProp & {
81
83
  value?: SelectOptionValue | undefined;
82
84
  onChange?: ((value: SelectOptionValue | undefined) => void) | undefined;
83
85
  disabled?: boolean | undefined;
package/dist/index.js CHANGED
@@ -41,26 +41,26 @@ __export(src_exports, {
41
41
  ActionButton: () => ActionButton,
42
42
  Badge: () => Badge,
43
43
  BaseStyles: () => import_theme_ui26.BaseStyles,
44
- Box: () => import_theme_ui4.Box,
44
+ Box: () => import_theme_ui5.Box,
45
45
  Button: () => Button,
46
- Card: () => import_theme_ui6.Card,
46
+ Card: () => import_theme_ui7.Card,
47
47
  Checkbox: () => import_theme_ui21.Checkbox,
48
48
  CloseButton: () => CloseButton,
49
49
  Container: () => Container,
50
- Divider: () => import_theme_ui7.Divider,
51
- Flex: () => import_theme_ui8.Flex,
50
+ Divider: () => import_theme_ui8.Divider,
51
+ Flex: () => import_theme_ui9.Flex,
52
52
  Global: () => import_theme_ui26.Global,
53
- Grid: () => import_theme_ui9.Grid,
54
- Heading: () => import_theme_ui10.Heading,
53
+ Grid: () => import_theme_ui10.Grid,
54
+ Heading: () => import_theme_ui11.Heading,
55
55
  HelpText: () => HelpText,
56
56
  IconButton: () => IconButton,
57
- Image: () => import_theme_ui11.Image,
57
+ Image: () => import_theme_ui12.Image,
58
58
  InfiniteLinearProgress: () => InfiniteLinearProgress,
59
59
  Input: () => Input,
60
60
  InputNumber: () => InputNumber,
61
61
  InputPassword: () => InputPassword,
62
62
  Label: () => Label,
63
- LinearProgress: () => import_theme_ui15.Progress,
63
+ LinearProgress: () => import_theme_ui16.Progress,
64
64
  Link: () => Link,
65
65
  Paragraph: () => import_theme_ui25.Paragraph,
66
66
  Radio: () => import_theme_ui18.Radio,
@@ -68,7 +68,7 @@ __export(src_exports, {
68
68
  Slider: () => import_theme_ui20.Slider,
69
69
  Spinner: () => import_theme_ui17.Spinner,
70
70
  Stack: () => Stack,
71
- Text: () => import_theme_ui16.Text,
71
+ Text: () => import_theme_ui3.Text,
72
72
  Textarea: () => Textarea,
73
73
  ThemeProvider: () => ThemeProvider,
74
74
  keyframes: () => import_react2.keyframes,
@@ -110,16 +110,23 @@ var import_theme_ui2 = require("theme-ui");
110
110
  var useTheme = import_theme_ui2.useThemeUI;
111
111
 
112
112
  // src/components/Badge.tsx
113
- var import_theme_ui3 = require("theme-ui");
113
+ var import_theme_ui4 = require("theme-ui");
114
114
  var import_react_icons = require("@ttoss/react-icons");
115
+
116
+ // src/components/Text.tsx
117
+ var import_theme_ui3 = require("theme-ui");
118
+
119
+ // src/components/Badge.tsx
115
120
  var import_jsx_runtime2 = require("react/jsx-runtime");
116
121
  var Badge = ({
117
122
  icon,
118
123
  children,
119
124
  sx,
125
+ chip,
126
+ onDelete,
120
127
  ...props
121
128
  }) => {
122
- return /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_theme_ui3.Badge, {
129
+ return /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_theme_ui4.Badge, {
123
130
  sx: {
124
131
  display: "flex",
125
132
  alignItems: "center",
@@ -137,16 +144,28 @@ var Badge = ({
137
144
  children: [icon && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_icons.Icon, {
138
145
  inline: true,
139
146
  icon
140
- }), children]
147
+ }), children, chip && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_theme_ui3.Text, {
148
+ sx: {
149
+ cursor: "pointer",
150
+ lineHeight: 0,
151
+ color: "currentcolor",
152
+ alignSelf: "center"
153
+ },
154
+ children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_icons.Icon, {
155
+ onClick: onDelete,
156
+ inline: true,
157
+ icon: "close"
158
+ })
159
+ })]
141
160
  });
142
161
  };
143
162
 
144
163
  // src/components/Box.tsx
145
- var import_theme_ui4 = require("theme-ui");
164
+ var import_theme_ui5 = require("theme-ui");
146
165
 
147
166
  // src/components/Button.tsx
148
167
  var React = __toESM(require("react"));
149
- var import_theme_ui5 = require("theme-ui");
168
+ var import_theme_ui6 = require("theme-ui");
150
169
  var import_react_icons2 = require("@ttoss/react-icons");
151
170
  var import_jsx_runtime3 = require("react/jsx-runtime");
152
171
  var Button = React.forwardRef((props, ref) => {
@@ -157,7 +176,7 @@ var Button = React.forwardRef((props, ref) => {
157
176
  loading,
158
177
  ...restProps
159
178
  } = props;
160
- return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui5.Button, {
179
+ return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui6.Button, {
161
180
  type: "button",
162
181
  ...restProps,
163
182
  ref,
@@ -186,27 +205,27 @@ var Button = React.forwardRef((props, ref) => {
186
205
  Button.displayName = "Button";
187
206
 
188
207
  // src/components/Card.tsx
189
- var import_theme_ui6 = require("theme-ui");
208
+ var import_theme_ui7 = require("theme-ui");
190
209
 
191
210
  // src/components/Divider.tsx
192
- var import_theme_ui7 = require("theme-ui");
211
+ var import_theme_ui8 = require("theme-ui");
193
212
 
194
213
  // src/components/Flex.tsx
195
- var import_theme_ui8 = require("theme-ui");
214
+ var import_theme_ui9 = require("theme-ui");
196
215
 
197
216
  // src/components/Grid.tsx
198
- var import_theme_ui9 = require("theme-ui");
217
+ var import_theme_ui10 = require("theme-ui");
199
218
 
200
219
  // src/components/Heading.tsx
201
- var import_theme_ui10 = require("theme-ui");
220
+ var import_theme_ui11 = require("theme-ui");
202
221
 
203
222
  // src/components/Image.tsx
204
- var import_theme_ui11 = require("theme-ui");
223
+ var import_theme_ui12 = require("theme-ui");
205
224
 
206
225
  // src/components/Input.tsx
207
226
  var React2 = __toESM(require("react"));
208
227
  var import_react_icons3 = require("@ttoss/react-icons");
209
- var import_theme_ui12 = require("theme-ui");
228
+ var import_theme_ui13 = require("theme-ui");
210
229
  var import_jsx_runtime4 = require("react/jsx-runtime");
211
230
  var Input = React2.forwardRef(({
212
231
  leadingIcon,
@@ -218,7 +237,7 @@ var Input = React2.forwardRef(({
218
237
  ...inputProps
219
238
  }, ref) => {
220
239
  const trailingIcon = inputProps["aria-invalid"] ? "warning-alt" : trailingIconProp;
221
- return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui8.Flex, {
240
+ return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui9.Flex, {
222
241
  className,
223
242
  sx: {
224
243
  ...sx,
@@ -226,7 +245,7 @@ var Input = React2.forwardRef(({
226
245
  padding: 0,
227
246
  border: "none"
228
247
  },
229
- children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui16.Text, {
248
+ children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui3.Text, {
230
249
  sx: {
231
250
  position: "absolute",
232
251
  alignSelf: "center",
@@ -239,7 +258,7 @@ var Input = React2.forwardRef(({
239
258
  inline: true,
240
259
  icon: leadingIcon
241
260
  })
242
- }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui12.Input, {
261
+ }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui13.Input, {
243
262
  ref,
244
263
  sx: {
245
264
  fontFamily: "body",
@@ -252,7 +271,7 @@ var Input = React2.forwardRef(({
252
271
  },
253
272
  className,
254
273
  ...inputProps
255
- }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui16.Text, {
274
+ }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui3.Text, {
256
275
  sx: {
257
276
  position: "absolute",
258
277
  right: "1rem",
@@ -272,7 +291,7 @@ Input.displayName = "Input";
272
291
 
273
292
  // src/components/Label.tsx
274
293
  var import_react_icons4 = require("@ttoss/react-icons");
275
- var import_theme_ui13 = require("theme-ui");
294
+ var import_theme_ui14 = require("theme-ui");
276
295
  var import_jsx_runtime5 = require("react/jsx-runtime");
277
296
  var TOOLTIP_LABEL = "tooltip";
278
297
  var Label = ({
@@ -282,7 +301,7 @@ var Label = ({
282
301
  sx,
283
302
  ...props
284
303
  }) => {
285
- return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_theme_ui13.Label, {
304
+ return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_theme_ui14.Label, {
286
305
  sx: {
287
306
  fontFamily: "caption",
288
307
  alignItems: "center",
@@ -291,7 +310,7 @@ var Label = ({
291
310
  ...sx
292
311
  },
293
312
  ...props,
294
- children: [children, tooltip && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
313
+ children: [children, tooltip && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui3.Text, {
295
314
  sx: {
296
315
  color: "currentcolor",
297
316
  cursor: onTooltipClick ? "pointer" : void 0
@@ -308,14 +327,14 @@ var Label = ({
308
327
 
309
328
  // src/components/Link.tsx
310
329
  var React3 = __toESM(require("react"));
311
- var import_theme_ui14 = require("theme-ui");
330
+ var import_theme_ui15 = require("theme-ui");
312
331
  var import_jsx_runtime6 = require("react/jsx-runtime");
313
332
  var Link = React3.forwardRef(({
314
333
  quiet,
315
334
  className,
316
335
  ...props
317
336
  }, ref) => {
318
- return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui14.Link, {
337
+ return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui15.Link, {
319
338
  className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
320
339
  ...props,
321
340
  ref
@@ -324,9 +343,6 @@ var Link = React3.forwardRef(({
324
343
  Link.displayName = "Link";
325
344
 
326
345
  // src/components/LinearProgress.tsx
327
- var import_theme_ui15 = require("theme-ui");
328
-
329
- // src/components/Text.tsx
330
346
  var import_theme_ui16 = require("theme-ui");
331
347
 
332
348
  // src/components/Select.tsx
@@ -352,7 +368,7 @@ var Control = props => {
352
368
  }
353
369
  return "surface";
354
370
  })();
355
- return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui4.Box, {
371
+ return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui5.Box, {
356
372
  sx: {
357
373
  ".react-select__control": {
358
374
  border,
@@ -375,7 +391,7 @@ var DropdownIndicator = props => {
375
391
  }
376
392
  return "text";
377
393
  })();
378
- return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
394
+ return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
379
395
  sx: {
380
396
  fontSize: "base",
381
397
  color,
@@ -389,11 +405,9 @@ var DropdownIndicator = props => {
389
405
  });
390
406
  };
391
407
  var IndicatorsContainer = ({
392
- children,
393
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
394
- ...props
408
+ children
395
409
  }) => {
396
- return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui4.Box, {
410
+ return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui5.Box, {
397
411
  sx: {
398
412
  marginLeft: "lg",
399
413
  border: "none"
@@ -404,7 +418,7 @@ var IndicatorsContainer = ({
404
418
  var Placeholder = ({
405
419
  children
406
420
  }) => {
407
- return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
421
+ return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
408
422
  sx: {
409
423
  color: "onMuted",
410
424
  alignSelf: "center"
@@ -420,14 +434,18 @@ var SelectContainer = ({
420
434
  sx,
421
435
  css: css2
422
436
  } = props.selectProps;
423
- return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui4.Box, {
424
- sx,
425
- css: css2,
426
- children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_select.components.SelectContainer, {
427
- ...props,
428
- children
437
+ return (
438
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
439
+ /* @__PURE__ */
440
+ (0, import_jsx_runtime7.jsx)(import_theme_ui5.Box, {
441
+ sx,
442
+ css: css2,
443
+ children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_select.components.SelectContainer, {
444
+ ...props,
445
+ children
446
+ })
429
447
  })
430
- });
448
+ );
431
449
  };
432
450
  var ValueContainer = ({
433
451
  children,
@@ -452,12 +470,12 @@ var ValueContainer = ({
452
470
  }
453
471
  return leadingIcon || "search";
454
472
  })();
455
- return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_theme_ui8.Flex, {
473
+ return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_theme_ui9.Flex, {
456
474
  sx: {
457
475
  gap: "lg",
458
476
  flex: 1
459
477
  },
460
- children: [finalLeadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
478
+ children: [finalLeadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
461
479
  sx: {
462
480
  alignSelf: "center",
463
481
  pointerEvents: "none",
@@ -467,13 +485,13 @@ var ValueContainer = ({
467
485
  children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
468
486
  icon: finalLeadingIcon
469
487
  })
470
- }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui8.Flex, {
488
+ }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui9.Flex, {
471
489
  sx: {
472
490
  flex: 1,
473
491
  alignItems: "center"
474
492
  },
475
493
  children
476
- }), (trailingIcon || hasError) && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
494
+ }), (trailingIcon || hasError) && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
477
495
  className: hasError ? "error-icon" : "",
478
496
  sx: {
479
497
  alignSelf: "center",
@@ -578,7 +596,7 @@ var InfiniteLinearProgress = () => {
578
596
  clearInterval(timer);
579
597
  };
580
598
  }, []);
581
- return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui15.Progress, {
599
+ return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui16.Progress, {
582
600
  max: MAX_PROGRESS,
583
601
  value: progress,
584
602
  role: "progressbar"
@@ -596,7 +614,7 @@ var Textarea = React7.forwardRef(({
596
614
  sx,
597
615
  ...textareaProps
598
616
  }, ref) => {
599
- return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_theme_ui8.Flex, {
617
+ return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_theme_ui9.Flex, {
600
618
  className,
601
619
  sx: {
602
620
  ...sx,
@@ -616,7 +634,7 @@ var Textarea = React7.forwardRef(({
616
634
  },
617
635
  className,
618
636
  ...textareaProps
619
- }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui16.Text, {
637
+ }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui3.Text, {
620
638
  sx: {
621
639
  position: "absolute",
622
640
  right: "1.25rem",
@@ -652,7 +670,7 @@ var HelpText = ({
652
670
  ...props
653
671
  }) => {
654
672
  const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
655
- return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui16.Text, {
673
+ return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui3.Text, {
656
674
  variant,
657
675
  sx: {
658
676
  fontSize: "sm",
@@ -772,7 +790,7 @@ var InputNumber = React10.forwardRef(({
772
790
  }
773
791
  onChange(value + 1);
774
792
  };
775
- return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_theme_ui8.Flex, {
793
+ return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_theme_ui9.Flex, {
776
794
  sx: {
777
795
  width: "fit-content",
778
796
  ...sx,
@@ -792,7 +810,7 @@ var InputNumber = React10.forwardRef(({
792
810
  },
793
811
  value,
794
812
  ...inputProps
795
- }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
813
+ }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui3.Text, {
796
814
  sx: {
797
815
  position: "absolute",
798
816
  alignSelf: "center",
@@ -804,7 +822,7 @@ var InputNumber = React10.forwardRef(({
804
822
  children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons8.Icon, {
805
823
  icon: "picker-down"
806
824
  })
807
- }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
825
+ }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui3.Text, {
808
826
  sx: {
809
827
  position: "absolute",
810
828
  alignSelf: "center",
@@ -816,7 +834,7 @@ var InputNumber = React10.forwardRef(({
816
834
  children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons8.Icon, {
817
835
  icon: "info"
818
836
  })
819
- }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
837
+ }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui3.Text, {
820
838
  sx: {
821
839
  position: "absolute",
822
840
  alignSelf: "center",
@@ -837,7 +855,7 @@ InputNumber.displayName = "InputNumber";
837
855
  var React11 = __toESM(require("react"));
838
856
  var import_jsx_runtime15 = require("react/jsx-runtime");
839
857
  var Stack = React11.forwardRef((props, ref) => {
840
- return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui8.Flex, {
858
+ return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui9.Flex, {
841
859
  ref,
842
860
  ...props,
843
861
  sx: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/ui",
3
- "version": "4.1.0",
3
+ "version": "4.1.2",
4
4
  "description": "Primitive layout, typographic, and other components for styling applications.",
5
5
  "author": "ttoss",
6
6
  "contributors": [
@@ -11,36 +11,40 @@
11
11
  "url": "https://github.com/ttoss/ttoss.git",
12
12
  "directory": "packages/ui"
13
13
  },
14
- "main": "dist/index.js",
15
- "module": "dist/esm/index.js",
14
+ "exports": {
15
+ ".": {
16
+ "import": "./dist/esm/index.js",
17
+ "require": "./dist/index.js",
18
+ "types": "./dist/index.d.ts"
19
+ }
20
+ },
16
21
  "files": [
17
22
  "dist",
18
23
  "src"
19
24
  ],
20
25
  "sideEffects": false,
21
- "typings": "dist/index.d.ts",
22
26
  "dependencies": {
23
- "@theme-ui/match-media": "^0.16.1",
27
+ "@theme-ui/match-media": "^0.16.2",
24
28
  "react-select": "^5.8.0",
25
- "theme-ui": "^0.16.1",
26
- "@ttoss/theme": "^1.7.0"
29
+ "theme-ui": "^0.16.2",
30
+ "@ttoss/theme": "^1.7.1"
27
31
  },
28
32
  "peerDependencies": {
29
33
  "@emotion/react": "^11",
30
34
  "react": ">=16.8.0",
31
- "@ttoss/react-icons": "^0.3.0"
35
+ "@ttoss/react-icons": "^0.3.1"
32
36
  },
33
37
  "devDependencies": {
34
38
  "@emotion/react": "^11.11.3",
35
39
  "@iconify-icons/mdi-light": "^1.2.5",
36
- "@types/jest": "^29.5.11",
37
- "@types/react": "^18.2.48",
40
+ "@types/jest": "^29.5.12",
41
+ "@types/react": "^18.2.58",
38
42
  "jest": "^29.7.0",
39
43
  "react": "^18.2.0",
40
- "tsup": "^8.0.1",
41
- "@ttoss/config": "^1.31.4",
42
- "@ttoss/react-icons": "^0.3.0",
43
- "@ttoss/test-utils": "^2.1.0"
44
+ "tsup": "^8.0.2",
45
+ "@ttoss/config": "^1.31.5",
46
+ "@ttoss/react-icons": "^0.3.1",
47
+ "@ttoss/test-utils": "^2.1.1"
44
48
  },
45
49
  "keywords": [
46
50
  "React",
@@ -55,6 +59,7 @@
55
59
  "gitHead": "e2b509ee8717f07f7365191b651dcbb5f080e05a",
56
60
  "scripts": {
57
61
  "build": "tsup",
62
+ "dev": "pnpm --filter @docs/storybook run dev",
58
63
  "test": "jest"
59
64
  }
60
65
  }
package/src/components/Badge.tsx CHANGED
@@ -1,11 +1,21 @@
1
1
  import { type BadgeProps as BadgePropsUi, Badge as BadgeUi } from 'theme-ui';
2
2
  import { Icon, IconType } from '@ttoss/react-icons';
3
+ import { Text } from '../components/Text';
3
4
 
4
5
  export type BadgeProps = BadgePropsUi & {
5
6
  icon?: IconType;
7
+ chip?: boolean;
8
+ onDelete?: () => void;
6
9
  };
7
10
 
8
- export const Badge = ({ icon, children, sx, ...props }: BadgeProps) => {
11
+ export const Badge = ({
12
+ icon,
13
+ children,
14
+ sx,
15
+ chip,
16
+ onDelete,
17
+ ...props
18
+ }: BadgeProps) => {
9
19
  return (
10
20
  <BadgeUi
11
21
  sx={{
@@ -24,7 +34,21 @@ export const Badge = ({ icon, children, sx, ...props }: BadgeProps) => {
24
34
  {...props}
25
35
  >
26
36
  {icon && <Icon inline icon={icon} />}
37
+
27
38
  {children}
39
+
40
+ {chip && (
41
+ <Text
42
+ sx={{
43
+ cursor: 'pointer',
44
+ lineHeight: 0,
45
+ color: 'currentcolor',
46
+ alignSelf: 'center',
47
+ }}
48
+ >
49
+ <Icon onClick={onDelete} inline icon="close" />
50
+ </Text>
51
+ )}
28
52
  </BadgeUi>
29
53
  );
30
54
  };
package/src/components/Select.tsx CHANGED
@@ -117,8 +117,6 @@ const DropdownIndicator = (
117
117
 
118
118
  const IndicatorsContainer = ({
119
119
  children,
120
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
121
- ...props
122
120
  }: IndicatorsContainerProps<SelectOption, IsMulti>) => {
123
121
  return (
124
122
  <Box
@@ -152,7 +150,8 @@ const SelectContainer = ({
152
150
  const { sx, css } = props.selectProps as unknown as SelectProps;
153
151
 
154
152
  return (
155
- <Box sx={sx} css={css}>
153
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
154
+ <Box sx={sx as any} css={css}>
156
155
  <components.SelectContainer {...props}>
157
156
  {children}
158
157
  </components.SelectContainer>