@ttoss/ui 1.31.3 → 1.31.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +45 -23
- package/dist/index.d.ts +8 -3
- package/dist/index.js +45 -23
- package/package.json +3 -3
- package/src/components/Badge.tsx +24 -1
- package/src/components/Button.tsx +3 -2
package/dist/esm/index.js
CHANGED
|
@@ -33,14 +33,7 @@ import { useThemeUI } from "theme-ui";
|
|
|
33
33
|
var useTheme = useThemeUI;
|
|
34
34
|
|
|
35
35
|
// src/components/Badge.tsx
|
|
36
|
-
import { Badge } from "theme-ui";
|
|
37
|
-
|
|
38
|
-
// src/components/Box.tsx
|
|
39
|
-
import { Box } from "theme-ui";
|
|
40
|
-
|
|
41
|
-
// src/components/Button.tsx
|
|
42
|
-
import * as React3 from "react";
|
|
43
|
-
import { Button as ButtonUi } from "theme-ui";
|
|
36
|
+
import { Badge as BadgeUi } from "theme-ui";
|
|
44
37
|
|
|
45
38
|
// src/components/Icon.tsx
|
|
46
39
|
import * as React2 from "react";
|
|
@@ -55,8 +48,36 @@ var Icon = /*#__PURE__*/React2.forwardRef((props, ref) => {
|
|
|
55
48
|
});
|
|
56
49
|
Icon.displayName = "Icon";
|
|
57
50
|
|
|
58
|
-
// src/components/
|
|
51
|
+
// src/components/Badge.tsx
|
|
59
52
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
53
|
+
var Badge = ({
|
|
54
|
+
icon,
|
|
55
|
+
children,
|
|
56
|
+
sx,
|
|
57
|
+
...props
|
|
58
|
+
}) => {
|
|
59
|
+
return /* @__PURE__ */jsxs2(BadgeUi, {
|
|
60
|
+
sx: {
|
|
61
|
+
display: "flex",
|
|
62
|
+
alignItems: "center",
|
|
63
|
+
gap: "xs",
|
|
64
|
+
...sx
|
|
65
|
+
},
|
|
66
|
+
...props,
|
|
67
|
+
children: [icon && /* @__PURE__ */jsx3(Icon, {
|
|
68
|
+
inline: true,
|
|
69
|
+
icon
|
|
70
|
+
}), children]
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
// src/components/Box.tsx
|
|
75
|
+
import { Box } from "theme-ui";
|
|
76
|
+
|
|
77
|
+
// src/components/Button.tsx
|
|
78
|
+
import * as React3 from "react";
|
|
79
|
+
import { Button as ButtonUi } from "theme-ui";
|
|
80
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
60
81
|
var Button = /*#__PURE__*/React3.forwardRef((props, ref) => {
|
|
61
82
|
const {
|
|
62
83
|
children,
|
|
@@ -64,23 +85,24 @@ var Button = /*#__PURE__*/React3.forwardRef((props, ref) => {
|
|
|
64
85
|
rightIcon,
|
|
65
86
|
...restProps
|
|
66
87
|
} = props;
|
|
67
|
-
return /* @__PURE__ */
|
|
88
|
+
return /* @__PURE__ */jsxs3(ButtonUi, {
|
|
68
89
|
ref,
|
|
69
90
|
type: "button",
|
|
70
91
|
...restProps,
|
|
71
92
|
sx: {
|
|
72
93
|
cursor: "pointer",
|
|
73
|
-
paddingX: "
|
|
74
|
-
paddingY: "
|
|
94
|
+
paddingX: "xl",
|
|
95
|
+
paddingY: "lg",
|
|
96
|
+
fontFamily: "body",
|
|
75
97
|
display: "inline-flex",
|
|
76
98
|
alignItems: "center",
|
|
77
99
|
gap: "lg",
|
|
78
100
|
...restProps.sx
|
|
79
101
|
},
|
|
80
|
-
children: [leftIcon && /* @__PURE__ */
|
|
102
|
+
children: [leftIcon && /* @__PURE__ */jsx4(Icon, {
|
|
81
103
|
inline: true,
|
|
82
104
|
icon: leftIcon
|
|
83
|
-
}), children, rightIcon && /* @__PURE__ */
|
|
105
|
+
}), children, rightIcon && /* @__PURE__ */jsx4(Icon, {
|
|
84
106
|
inline: true,
|
|
85
107
|
icon: rightIcon
|
|
86
108
|
})]
|
|
@@ -109,18 +131,18 @@ import { Image } from "theme-ui";
|
|
|
109
131
|
// src/components/Input.tsx
|
|
110
132
|
import React4 from "react";
|
|
111
133
|
import { Input as InputUI } from "theme-ui";
|
|
112
|
-
import { jsx as
|
|
134
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
113
135
|
var Input = /*#__PURE__*/React4.forwardRef(({
|
|
114
136
|
leadingIcon,
|
|
115
137
|
trailingIcon,
|
|
116
138
|
sx,
|
|
117
139
|
...inputProps
|
|
118
140
|
}, ref) => {
|
|
119
|
-
return /* @__PURE__ */
|
|
141
|
+
return /* @__PURE__ */jsxs4(Flex, {
|
|
120
142
|
sx: {
|
|
121
143
|
position: "relative"
|
|
122
144
|
},
|
|
123
|
-
children: [leadingIcon && /* @__PURE__ */
|
|
145
|
+
children: [leadingIcon && /* @__PURE__ */jsx5(Text, {
|
|
124
146
|
sx: {
|
|
125
147
|
position: "absolute",
|
|
126
148
|
alignSelf: "center",
|
|
@@ -129,10 +151,10 @@ var Input = /*#__PURE__*/React4.forwardRef(({
|
|
|
129
151
|
lineHeight: 0
|
|
130
152
|
},
|
|
131
153
|
variant: "leading-icon",
|
|
132
|
-
children: /* @__PURE__ */
|
|
154
|
+
children: /* @__PURE__ */jsx5(Icon, {
|
|
133
155
|
icon: leadingIcon
|
|
134
156
|
})
|
|
135
|
-
}), /* @__PURE__ */
|
|
157
|
+
}), /* @__PURE__ */jsx5(InputUI, {
|
|
136
158
|
ref,
|
|
137
159
|
sx: {
|
|
138
160
|
paddingLeft: leadingIcon ? "3xl" : void 0,
|
|
@@ -140,7 +162,7 @@ var Input = /*#__PURE__*/React4.forwardRef(({
|
|
|
140
162
|
...sx
|
|
141
163
|
},
|
|
142
164
|
...inputProps
|
|
143
|
-
}), trailingIcon && /* @__PURE__ */
|
|
165
|
+
}), trailingIcon && /* @__PURE__ */jsx5(Text, {
|
|
144
166
|
sx: {
|
|
145
167
|
position: "absolute",
|
|
146
168
|
right: "1rem",
|
|
@@ -149,7 +171,7 @@ var Input = /*#__PURE__*/React4.forwardRef(({
|
|
|
149
171
|
lineHeight: 0
|
|
150
172
|
},
|
|
151
173
|
variant: "trailing-icon",
|
|
152
|
-
children: /* @__PURE__ */
|
|
174
|
+
children: /* @__PURE__ */jsx5(Icon, {
|
|
153
175
|
icon: trailingIcon
|
|
154
176
|
})
|
|
155
177
|
})]
|
|
@@ -189,7 +211,7 @@ import { Checkbox } from "theme-ui";
|
|
|
189
211
|
|
|
190
212
|
// src/components/InfiniteLinearProgress.tsx
|
|
191
213
|
import * as React5 from "react";
|
|
192
|
-
import { jsx as
|
|
214
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
193
215
|
var MAX_PROGRESS = 100;
|
|
194
216
|
var InfiniteLinearProgress = () => {
|
|
195
217
|
const [progress, setProgress] = React5.useState(0);
|
|
@@ -214,7 +236,7 @@ var InfiniteLinearProgress = () => {
|
|
|
214
236
|
clearInterval(timer);
|
|
215
237
|
};
|
|
216
238
|
}, []);
|
|
217
|
-
return /* @__PURE__ */
|
|
239
|
+
return /* @__PURE__ */jsx6(Progress, {
|
|
218
240
|
max: MAX_PROGRESS,
|
|
219
241
|
value: progress,
|
|
220
242
|
role: "progressbar"
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as theme_ui from 'theme-ui';
|
|
2
|
-
import { Theme, ButtonProps as ButtonProps$1, InputProps as InputProps$1 } from 'theme-ui';
|
|
3
|
-
export {
|
|
2
|
+
import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1 } from 'theme-ui';
|
|
3
|
+
export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, Label, LabelProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
|
|
4
4
|
export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import React__default from 'react';
|
|
@@ -23,6 +23,11 @@ type IconType = string | IconifyIcon;
|
|
|
23
23
|
type IconProps = Omit<IconifyIconProps, 'ref'>;
|
|
24
24
|
declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconifyIconHTMLElement | null>>;
|
|
25
25
|
|
|
26
|
+
type BadgeProps = BadgeProps$1 & {
|
|
27
|
+
icon: IconType;
|
|
28
|
+
};
|
|
29
|
+
declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => JSX.Element;
|
|
30
|
+
|
|
26
31
|
type ButtonProps = ButtonProps$1 & {
|
|
27
32
|
leftIcon?: IconType;
|
|
28
33
|
rightIcon?: IconType;
|
|
@@ -37,4 +42,4 @@ declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "
|
|
|
37
42
|
|
|
38
43
|
declare const InfiniteLinearProgress: () => JSX.Element;
|
|
39
44
|
|
|
40
|
-
export { Button, ButtonProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, ThemeProvider, ThemeProviderProps, useTheme };
|
|
45
|
+
export { Badge, BadgeProps, Button, ButtonProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, ThemeProvider, ThemeProviderProps, useTheme };
|
package/dist/index.js
CHANGED
|
@@ -38,7 +38,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
|
38
38
|
// src/index.ts
|
|
39
39
|
var src_exports = {};
|
|
40
40
|
__export(src_exports, {
|
|
41
|
-
Badge: () =>
|
|
41
|
+
Badge: () => Badge,
|
|
42
42
|
BaseStyles: () => import_theme_ui25.BaseStyles,
|
|
43
43
|
Box: () => import_theme_ui4.Box,
|
|
44
44
|
Button: () => Button,
|
|
@@ -103,13 +103,6 @@ var useTheme = import_theme_ui2.useThemeUI;
|
|
|
103
103
|
// src/components/Badge.tsx
|
|
104
104
|
var import_theme_ui3 = require("theme-ui");
|
|
105
105
|
|
|
106
|
-
// src/components/Box.tsx
|
|
107
|
-
var import_theme_ui4 = require("theme-ui");
|
|
108
|
-
|
|
109
|
-
// src/components/Button.tsx
|
|
110
|
-
var React3 = __toESM(require("react"));
|
|
111
|
-
var import_theme_ui5 = require("theme-ui");
|
|
112
|
-
|
|
113
106
|
// src/components/Icon.tsx
|
|
114
107
|
var React2 = __toESM(require("react"));
|
|
115
108
|
var import_react2 = require("@iconify-icon/react");
|
|
@@ -123,8 +116,36 @@ var Icon = React2.forwardRef((props, ref) => {
|
|
|
123
116
|
});
|
|
124
117
|
Icon.displayName = "Icon";
|
|
125
118
|
|
|
126
|
-
// src/components/
|
|
119
|
+
// src/components/Badge.tsx
|
|
127
120
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
121
|
+
var Badge = ({
|
|
122
|
+
icon,
|
|
123
|
+
children,
|
|
124
|
+
sx,
|
|
125
|
+
...props
|
|
126
|
+
}) => {
|
|
127
|
+
return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui3.Badge, {
|
|
128
|
+
sx: {
|
|
129
|
+
display: "flex",
|
|
130
|
+
alignItems: "center",
|
|
131
|
+
gap: "xs",
|
|
132
|
+
...sx
|
|
133
|
+
},
|
|
134
|
+
...props,
|
|
135
|
+
children: [icon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(Icon, {
|
|
136
|
+
inline: true,
|
|
137
|
+
icon
|
|
138
|
+
}), children]
|
|
139
|
+
});
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
// src/components/Box.tsx
|
|
143
|
+
var import_theme_ui4 = require("theme-ui");
|
|
144
|
+
|
|
145
|
+
// src/components/Button.tsx
|
|
146
|
+
var React3 = __toESM(require("react"));
|
|
147
|
+
var import_theme_ui5 = require("theme-ui");
|
|
148
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
128
149
|
var Button = React3.forwardRef((props, ref) => {
|
|
129
150
|
const {
|
|
130
151
|
children,
|
|
@@ -132,23 +153,24 @@ var Button = React3.forwardRef((props, ref) => {
|
|
|
132
153
|
rightIcon,
|
|
133
154
|
...restProps
|
|
134
155
|
} = props;
|
|
135
|
-
return /* @__PURE__ */(0,
|
|
156
|
+
return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui5.Button, {
|
|
136
157
|
ref,
|
|
137
158
|
type: "button",
|
|
138
159
|
...restProps,
|
|
139
160
|
sx: {
|
|
140
161
|
cursor: "pointer",
|
|
141
|
-
paddingX: "
|
|
142
|
-
paddingY: "
|
|
162
|
+
paddingX: "xl",
|
|
163
|
+
paddingY: "lg",
|
|
164
|
+
fontFamily: "body",
|
|
143
165
|
display: "inline-flex",
|
|
144
166
|
alignItems: "center",
|
|
145
167
|
gap: "lg",
|
|
146
168
|
...restProps.sx
|
|
147
169
|
},
|
|
148
|
-
children: [leftIcon && /* @__PURE__ */(0,
|
|
170
|
+
children: [leftIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
|
|
149
171
|
inline: true,
|
|
150
172
|
icon: leftIcon
|
|
151
|
-
}), children, rightIcon && /* @__PURE__ */(0,
|
|
173
|
+
}), children, rightIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
|
|
152
174
|
inline: true,
|
|
153
175
|
icon: rightIcon
|
|
154
176
|
})]
|
|
@@ -177,18 +199,18 @@ var import_theme_ui11 = require("theme-ui");
|
|
|
177
199
|
// src/components/Input.tsx
|
|
178
200
|
var import_react3 = __toESM(require("react"));
|
|
179
201
|
var import_theme_ui12 = require("theme-ui");
|
|
180
|
-
var
|
|
202
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
181
203
|
var Input = import_react3.default.forwardRef(({
|
|
182
204
|
leadingIcon,
|
|
183
205
|
trailingIcon,
|
|
184
206
|
sx,
|
|
185
207
|
...inputProps
|
|
186
208
|
}, ref) => {
|
|
187
|
-
return /* @__PURE__ */(0,
|
|
209
|
+
return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_theme_ui8.Flex, {
|
|
188
210
|
sx: {
|
|
189
211
|
position: "relative"
|
|
190
212
|
},
|
|
191
|
-
children: [leadingIcon && /* @__PURE__ */(0,
|
|
213
|
+
children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
|
|
192
214
|
sx: {
|
|
193
215
|
position: "absolute",
|
|
194
216
|
alignSelf: "center",
|
|
@@ -197,10 +219,10 @@ var Input = import_react3.default.forwardRef(({
|
|
|
197
219
|
lineHeight: 0
|
|
198
220
|
},
|
|
199
221
|
variant: "leading-icon",
|
|
200
|
-
children: /* @__PURE__ */(0,
|
|
222
|
+
children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(Icon, {
|
|
201
223
|
icon: leadingIcon
|
|
202
224
|
})
|
|
203
|
-
}), /* @__PURE__ */(0,
|
|
225
|
+
}), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui12.Input, {
|
|
204
226
|
ref,
|
|
205
227
|
sx: {
|
|
206
228
|
paddingLeft: leadingIcon ? "3xl" : void 0,
|
|
@@ -208,7 +230,7 @@ var Input = import_react3.default.forwardRef(({
|
|
|
208
230
|
...sx
|
|
209
231
|
},
|
|
210
232
|
...inputProps
|
|
211
|
-
}), trailingIcon && /* @__PURE__ */(0,
|
|
233
|
+
}), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
|
|
212
234
|
sx: {
|
|
213
235
|
position: "absolute",
|
|
214
236
|
right: "1rem",
|
|
@@ -217,7 +239,7 @@ var Input = import_react3.default.forwardRef(({
|
|
|
217
239
|
lineHeight: 0
|
|
218
240
|
},
|
|
219
241
|
variant: "trailing-icon",
|
|
220
|
-
children: /* @__PURE__ */(0,
|
|
242
|
+
children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(Icon, {
|
|
221
243
|
icon: trailingIcon
|
|
222
244
|
})
|
|
223
245
|
})]
|
|
@@ -257,7 +279,7 @@ var import_theme_ui22 = require("theme-ui");
|
|
|
257
279
|
|
|
258
280
|
// src/components/InfiniteLinearProgress.tsx
|
|
259
281
|
var React5 = __toESM(require("react"));
|
|
260
|
-
var
|
|
282
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
261
283
|
var MAX_PROGRESS = 100;
|
|
262
284
|
var InfiniteLinearProgress = () => {
|
|
263
285
|
const [progress, setProgress] = React5.useState(0);
|
|
@@ -282,7 +304,7 @@ var InfiniteLinearProgress = () => {
|
|
|
282
304
|
clearInterval(timer);
|
|
283
305
|
};
|
|
284
306
|
}, []);
|
|
285
|
-
return /* @__PURE__ */(0,
|
|
307
|
+
return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui15.Progress, {
|
|
286
308
|
max: MAX_PROGRESS,
|
|
287
309
|
value: progress,
|
|
288
310
|
role: "progressbar"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/ui",
|
|
3
|
-
"version": "1.31.
|
|
3
|
+
"version": "1.31.5",
|
|
4
4
|
"description": "Primitive layout, typographic, and other components for styling applications.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"author": "ttoss",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"@emotion/react": "^11.10.6",
|
|
25
25
|
"@iconify-icon/react": "^1.0.7",
|
|
26
26
|
"@theme-ui/match-media": "^0.15.5",
|
|
27
|
-
"@ttoss/theme": "^1.4.
|
|
27
|
+
"@ttoss/theme": "^1.4.5",
|
|
28
28
|
"theme-ui": "^0.15.5"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "77d124d6e4c2ccd61058c8852789dcd9bc2f527a"
|
|
50
50
|
}
|
package/src/components/Badge.tsx
CHANGED
|
@@ -1 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
import { type BadgeProps as BadgePropsUi, Badge as BadgeUi } from 'theme-ui';
|
|
2
|
+
|
|
3
|
+
import { Icon, IconType } from './Icon';
|
|
4
|
+
|
|
5
|
+
export type BadgeProps = BadgePropsUi & {
|
|
6
|
+
icon: IconType;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export const Badge = ({ icon, children, sx, ...props }: BadgeProps) => {
|
|
10
|
+
return (
|
|
11
|
+
<BadgeUi
|
|
12
|
+
sx={{
|
|
13
|
+
display: 'flex',
|
|
14
|
+
alignItems: 'center',
|
|
15
|
+
gap: 'xs',
|
|
16
|
+
...sx,
|
|
17
|
+
}}
|
|
18
|
+
{...props}
|
|
19
|
+
>
|
|
20
|
+
{icon && <Icon inline icon={icon} />}
|
|
21
|
+
{children}
|
|
22
|
+
</BadgeUi>
|
|
23
|
+
);
|
|
24
|
+
};
|
|
@@ -21,8 +21,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
21
21
|
{...restProps}
|
|
22
22
|
sx={{
|
|
23
23
|
cursor: 'pointer',
|
|
24
|
-
paddingX: '
|
|
25
|
-
paddingY: '
|
|
24
|
+
paddingX: 'xl',
|
|
25
|
+
paddingY: 'lg',
|
|
26
|
+
fontFamily: 'body',
|
|
26
27
|
display: 'inline-flex',
|
|
27
28
|
alignItems: 'center',
|
|
28
29
|
gap: 'lg',
|