@dafaz-ui/react 2.0.1 → 2.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.
- package/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +6 -0
- package/dist/index.d.mts +214 -15
- package/dist/index.d.ts +214 -15
- package/dist/index.js +48 -6
- package/dist/index.mjs +47 -6
- package/package.json +1 -1
- package/src/components/Button.tsx +23 -2
- package/src/components/Text.tsx +31 -0
- package/src/index.tsx +1 -0
package/.turbo/turbo-build.log
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
|
2
|
-
> @dafaz-ui/react@2.0
|
2
|
+
> @dafaz-ui/react@2.1.0 build
|
3
3
|
> tsup src/index.tsx --format esm,cjs --dts --external react
|
4
4
|
|
5
5
|
[34mCLI[39m Building entry: src/index.tsx
|
@@ -8,11 +8,11 @@
|
|
8
8
|
[34mCLI[39m Target: es6
|
9
9
|
[34mESM[39m Build start
|
10
10
|
[34mCJS[39m Build start
|
11
|
-
[
|
12
|
-
[
|
13
|
-
[
|
14
|
-
[
|
11
|
+
[32mESM[39m [1mdist/index.mjs [22m[32m4.68 KB[39m
|
12
|
+
[32mESM[39m ⚡️ Build success in 25ms
|
13
|
+
[32mCJS[39m [1mdist/index.js [22m[32m5.82 KB[39m
|
14
|
+
[32mCJS[39m ⚡️ Build success in 26ms
|
15
15
|
[34mDTS[39m Build start
|
16
|
-
[32mDTS[39m ⚡️ Build success in
|
17
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[
|
18
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[
|
16
|
+
[32mDTS[39m ⚡️ Build success in 2097ms
|
17
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m64.29 KB[39m
|
18
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m64.29 KB[39m
|
package/CHANGELOG.md
CHANGED
package/dist/index.d.mts
CHANGED
@@ -2,7 +2,7 @@ import * as _stitches_react_types_styled_component from '@stitches/react/types/s
|
|
2
2
|
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
3
3
|
import { ComponentProps } from '@stitches/react';
|
4
4
|
import * as react from 'react';
|
5
|
-
import { ElementType } from 'react';
|
5
|
+
import { ElementType, ComponentProps as ComponentProps$1 } from 'react';
|
6
6
|
import * as _stitches_react_types_theme from '@stitches/react/types/theme';
|
7
7
|
import * as _stitches_react_types_css from '@stitches/react/types/css';
|
8
8
|
import * as _stitches_react_types_stitches from '@stitches/react/types/stitches';
|
@@ -11,7 +11,8 @@ import * as _stitches_react_types_util from '@stitches/react/types/util';
|
|
11
11
|
/** Primary UI component for user interaction */
|
12
12
|
declare const Button: _stitches_react_types_styled_component.StyledComponent<"button", {
|
13
13
|
variant?: "primary" | "secondary" | "tertiary" | undefined;
|
14
|
-
size?: "sm" | "md" | undefined;
|
14
|
+
size?: "sm" | "md" | "lg" | undefined;
|
15
|
+
flat?: boolean | "true" | "false" | undefined;
|
15
16
|
}, {}, _stitches_react_types_css_util.CSS<{}, {
|
16
17
|
colors: {
|
17
18
|
white: string;
|
@@ -25,7 +26,6 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
|
|
25
26
|
dafaz400: string;
|
26
27
|
dafaz600: string;
|
27
28
|
dafaz800: string;
|
28
|
-
teste: string;
|
29
29
|
};
|
30
30
|
fontSizes: {
|
31
31
|
xxs: string;
|
@@ -216,7 +216,7 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
|
|
216
216
|
interface ButtonProps extends ComponentProps<typeof Button> {
|
217
217
|
as?: ElementType;
|
218
218
|
/** How large should the button be? */
|
219
|
-
size?: 'sm' | 'md';
|
219
|
+
size?: 'sm' | 'md' | 'lg';
|
220
220
|
/** Optional click handler */
|
221
221
|
onClick?: () => void;
|
222
222
|
/** Button contents */
|
@@ -224,6 +224,215 @@ interface ButtonProps extends ComponentProps<typeof Button> {
|
|
224
224
|
/** Button is disable? */
|
225
225
|
disabled?: boolean;
|
226
226
|
variant?: 'primary' | 'secondary' | 'tertiary';
|
227
|
+
flat?: boolean;
|
228
|
+
}
|
229
|
+
|
230
|
+
declare const Text: _stitches_react_types_styled_component.StyledComponent<"p", {
|
231
|
+
size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
|
232
|
+
}, {}, _stitches_react_types_css_util.CSS<{}, {
|
233
|
+
colors: {
|
234
|
+
white: string;
|
235
|
+
black: string;
|
236
|
+
gray100: string;
|
237
|
+
gray200: string;
|
238
|
+
gray400: string;
|
239
|
+
gray800: string;
|
240
|
+
dafaz100: string;
|
241
|
+
dafaz200: string;
|
242
|
+
dafaz400: string;
|
243
|
+
dafaz600: string;
|
244
|
+
dafaz800: string;
|
245
|
+
};
|
246
|
+
fontSizes: {
|
247
|
+
xxs: string;
|
248
|
+
xs: string;
|
249
|
+
sm: string;
|
250
|
+
md: string;
|
251
|
+
lg: string;
|
252
|
+
xl: string;
|
253
|
+
'2xl': string;
|
254
|
+
};
|
255
|
+
fontWeights: {
|
256
|
+
regular: string;
|
257
|
+
medium: string;
|
258
|
+
bold: string;
|
259
|
+
};
|
260
|
+
fonts: {
|
261
|
+
default: string;
|
262
|
+
app: string;
|
263
|
+
web: string;
|
264
|
+
offer: string;
|
265
|
+
code: string;
|
266
|
+
};
|
267
|
+
lineHeights: {
|
268
|
+
shorter: string;
|
269
|
+
short: string;
|
270
|
+
base: string;
|
271
|
+
tall: string;
|
272
|
+
};
|
273
|
+
radii: {
|
274
|
+
px: string;
|
275
|
+
sm: string;
|
276
|
+
md: string;
|
277
|
+
full: string;
|
278
|
+
};
|
279
|
+
space: {
|
280
|
+
1: string;
|
281
|
+
2: string;
|
282
|
+
3: string;
|
283
|
+
4: string;
|
284
|
+
5: string;
|
285
|
+
6: string;
|
286
|
+
7: string;
|
287
|
+
8: string;
|
288
|
+
10: string;
|
289
|
+
12: string;
|
290
|
+
16: string;
|
291
|
+
20: string;
|
292
|
+
40: string;
|
293
|
+
64: string;
|
294
|
+
80: string;
|
295
|
+
};
|
296
|
+
opacities: {
|
297
|
+
opacity400: string;
|
298
|
+
opacity600: string;
|
299
|
+
opacity800: string;
|
300
|
+
opacity900: string;
|
301
|
+
};
|
302
|
+
}, {
|
303
|
+
height: "space";
|
304
|
+
width: "space";
|
305
|
+
gap: "space";
|
306
|
+
gridGap: "space";
|
307
|
+
columnGap: "space";
|
308
|
+
gridColumnGap: "space";
|
309
|
+
rowGap: "space";
|
310
|
+
gridRowGap: "space";
|
311
|
+
inset: "space";
|
312
|
+
insetBlock: "space";
|
313
|
+
insetBlockEnd: "space";
|
314
|
+
insetBlockStart: "space";
|
315
|
+
insetInline: "space";
|
316
|
+
insetInlineEnd: "space";
|
317
|
+
insetInlineStart: "space";
|
318
|
+
margin: "space";
|
319
|
+
marginTop: "space";
|
320
|
+
marginRight: "space";
|
321
|
+
marginBottom: "space";
|
322
|
+
marginLeft: "space";
|
323
|
+
marginBlock: "space";
|
324
|
+
marginBlockEnd: "space";
|
325
|
+
marginBlockStart: "space";
|
326
|
+
marginInline: "space";
|
327
|
+
marginInlineEnd: "space";
|
328
|
+
marginInlineStart: "space";
|
329
|
+
padding: "space";
|
330
|
+
paddingTop: "space";
|
331
|
+
paddingRight: "space";
|
332
|
+
paddingBottom: "space";
|
333
|
+
paddingLeft: "space";
|
334
|
+
paddingBlock: "space";
|
335
|
+
paddingBlockEnd: "space";
|
336
|
+
paddingBlockStart: "space";
|
337
|
+
paddingInline: "space";
|
338
|
+
paddingInlineEnd: "space";
|
339
|
+
paddingInlineStart: "space";
|
340
|
+
scrollMargin: "space";
|
341
|
+
scrollMarginTop: "space";
|
342
|
+
scrollMarginRight: "space";
|
343
|
+
scrollMarginBottom: "space";
|
344
|
+
scrollMarginLeft: "space";
|
345
|
+
scrollMarginBlock: "space";
|
346
|
+
scrollMarginBlockEnd: "space";
|
347
|
+
scrollMarginBlockStart: "space";
|
348
|
+
scrollMarginInline: "space";
|
349
|
+
scrollMarginInlineEnd: "space";
|
350
|
+
scrollMarginInlineStart: "space";
|
351
|
+
scrollPadding: "space";
|
352
|
+
scrollPaddingTop: "space";
|
353
|
+
scrollPaddingRight: "space";
|
354
|
+
scrollPaddingBottom: "space";
|
355
|
+
scrollPaddingLeft: "space";
|
356
|
+
scrollPaddingBlock: "space";
|
357
|
+
scrollPaddingBlockEnd: "space";
|
358
|
+
scrollPaddingBlockStart: "space";
|
359
|
+
scrollPaddingInline: "space";
|
360
|
+
scrollPaddingInlineEnd: "space";
|
361
|
+
scrollPaddingInlineStart: "space";
|
362
|
+
top: "space";
|
363
|
+
right: "space";
|
364
|
+
bottom: "space";
|
365
|
+
left: "space";
|
366
|
+
fontSize: "fontSizes";
|
367
|
+
background: "colors";
|
368
|
+
backgroundColor: "colors";
|
369
|
+
backgroundImage: "colors";
|
370
|
+
borderImage: "colors";
|
371
|
+
border: "colors";
|
372
|
+
borderBlock: "colors";
|
373
|
+
borderBlockEnd: "colors";
|
374
|
+
borderBlockStart: "colors";
|
375
|
+
borderBottom: "colors";
|
376
|
+
borderBottomColor: "colors";
|
377
|
+
borderColor: "colors";
|
378
|
+
borderInline: "colors";
|
379
|
+
borderInlineEnd: "colors";
|
380
|
+
borderInlineStart: "colors";
|
381
|
+
borderLeft: "colors";
|
382
|
+
borderLeftColor: "colors";
|
383
|
+
borderRight: "colors";
|
384
|
+
borderRightColor: "colors";
|
385
|
+
borderTop: "colors";
|
386
|
+
borderTopColor: "colors";
|
387
|
+
caretColor: "colors";
|
388
|
+
color: "colors";
|
389
|
+
columnRuleColor: "colors";
|
390
|
+
outline: "colors";
|
391
|
+
outlineColor: "colors";
|
392
|
+
fill: "colors";
|
393
|
+
stroke: "colors";
|
394
|
+
textDecorationColor: "colors";
|
395
|
+
fontFamily: "fonts";
|
396
|
+
fontWeight: "fontWeights";
|
397
|
+
lineHeight: "lineHeights";
|
398
|
+
letterSpacing: "letterSpacings";
|
399
|
+
blockSize: "sizes";
|
400
|
+
minBlockSize: "sizes";
|
401
|
+
maxBlockSize: "sizes";
|
402
|
+
inlineSize: "sizes";
|
403
|
+
minInlineSize: "sizes";
|
404
|
+
maxInlineSize: "sizes";
|
405
|
+
minWidth: "sizes";
|
406
|
+
maxWidth: "sizes";
|
407
|
+
minHeight: "sizes";
|
408
|
+
maxHeight: "sizes";
|
409
|
+
flexBasis: "sizes";
|
410
|
+
gridTemplateColumns: "sizes";
|
411
|
+
gridTemplateRows: "sizes";
|
412
|
+
borderWidth: "borderWidths";
|
413
|
+
borderTopWidth: "borderWidths";
|
414
|
+
borderLeftWidth: "borderWidths";
|
415
|
+
borderRightWidth: "borderWidths";
|
416
|
+
borderBottomWidth: "borderWidths";
|
417
|
+
borderStyle: "borderStyles";
|
418
|
+
borderTopStyle: "borderStyles";
|
419
|
+
borderLeftStyle: "borderStyles";
|
420
|
+
borderRightStyle: "borderStyles";
|
421
|
+
borderBottomStyle: "borderStyles";
|
422
|
+
borderRadius: "radii";
|
423
|
+
borderTopLeftRadius: "radii";
|
424
|
+
borderTopRightRadius: "radii";
|
425
|
+
borderBottomRightRadius: "radii";
|
426
|
+
borderBottomLeftRadius: "radii";
|
427
|
+
boxShadow: "shadows";
|
428
|
+
textShadow: "shadows";
|
429
|
+
transition: "transitions";
|
430
|
+
zIndex: "zIndices";
|
431
|
+
}, {}>>;
|
432
|
+
interface TextProps extends ComponentProps$1<typeof Text> {
|
433
|
+
as?: ElementType;
|
434
|
+
content: string;
|
435
|
+
size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
227
436
|
}
|
228
437
|
|
229
438
|
declare const styled: <Type extends keyof JSX.IntrinsicElements | React.ComponentType<any> | _stitches_react_types_util.Function, Composers extends (string | React.ComponentType<any> | _stitches_react_types_util.Function | {
|
@@ -241,7 +450,6 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
|
|
241
450
|
dafaz400: string;
|
242
451
|
dafaz600: string;
|
243
452
|
dafaz800: string;
|
244
|
-
teste: string;
|
245
453
|
};
|
246
454
|
fontSizes: {
|
247
455
|
xxs: string;
|
@@ -452,7 +660,6 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
|
|
452
660
|
dafaz400: string;
|
453
661
|
dafaz600: string;
|
454
662
|
dafaz800: string;
|
455
|
-
teste: string;
|
456
663
|
};
|
457
664
|
fontSizes: {
|
458
665
|
xxs: string;
|
@@ -655,7 +862,6 @@ declare const css: <Composers extends (string | React.ExoticComponent<any> | Rea
|
|
655
862
|
dafaz400: string;
|
656
863
|
dafaz600: string;
|
657
864
|
dafaz800: string;
|
658
|
-
teste: string;
|
659
865
|
};
|
660
866
|
fontSizes: {
|
661
867
|
xxs: string;
|
@@ -873,7 +1079,6 @@ declare const globalCss: <Styles extends {
|
|
873
1079
|
dafaz400: string;
|
874
1080
|
dafaz600: string;
|
875
1081
|
dafaz800: string;
|
876
|
-
teste: string;
|
877
1082
|
};
|
878
1083
|
fontSizes: {
|
879
1084
|
xxs: string;
|
@@ -1074,7 +1279,6 @@ declare const globalCss: <Styles extends {
|
|
1074
1279
|
dafaz400: string;
|
1075
1280
|
dafaz600: string;
|
1076
1281
|
dafaz800: string;
|
1077
|
-
teste: string;
|
1078
1282
|
};
|
1079
1283
|
fontSizes: {
|
1080
1284
|
xxs: string;
|
@@ -1278,7 +1482,6 @@ declare const keyframes: (style: {
|
|
1278
1482
|
dafaz400: string;
|
1279
1483
|
dafaz600: string;
|
1280
1484
|
dafaz800: string;
|
1281
|
-
teste: string;
|
1282
1485
|
};
|
1283
1486
|
fontSizes: {
|
1284
1487
|
xxs: string;
|
@@ -1487,7 +1690,6 @@ declare const theme: string & {
|
|
1487
1690
|
dafaz400: _stitches_react_types_theme.Token<"dafaz400", string, "colors", "">;
|
1488
1691
|
dafaz600: _stitches_react_types_theme.Token<"dafaz600", string, "colors", "">;
|
1489
1692
|
dafaz800: _stitches_react_types_theme.Token<"dafaz800", string, "colors", "">;
|
1490
|
-
teste: _stitches_react_types_theme.Token<"teste", string, "colors", "">;
|
1491
1693
|
};
|
1492
1694
|
fontSizes: {
|
1493
1695
|
xxs: _stitches_react_types_theme.Token<"xxs", string, "fontSizes", "">;
|
@@ -1559,7 +1761,6 @@ declare const createTheme: <Argument0 extends string | ({
|
|
1559
1761
|
dafaz400?: string | number | boolean | undefined;
|
1560
1762
|
dafaz600?: string | number | boolean | undefined;
|
1561
1763
|
dafaz800?: string | number | boolean | undefined;
|
1562
|
-
teste?: string | number | boolean | undefined;
|
1563
1764
|
} | undefined;
|
1564
1765
|
fontSizes?: {
|
1565
1766
|
xxs?: string | number | boolean | undefined;
|
@@ -1635,7 +1836,6 @@ declare const createTheme: <Argument0 extends string | ({
|
|
1635
1836
|
dafaz400?: string | number | boolean | undefined;
|
1636
1837
|
dafaz600?: string | number | boolean | undefined;
|
1637
1838
|
dafaz800?: string | number | boolean | undefined;
|
1638
|
-
teste?: string | number | boolean | undefined;
|
1639
1839
|
} | undefined;
|
1640
1840
|
fontSizes?: {
|
1641
1841
|
xxs?: string | number | boolean | undefined;
|
@@ -1718,7 +1918,6 @@ declare const config: {
|
|
1718
1918
|
dafaz400: string;
|
1719
1919
|
dafaz600: string;
|
1720
1920
|
dafaz800: string;
|
1721
|
-
teste: string;
|
1722
1921
|
};
|
1723
1922
|
fontSizes: {
|
1724
1923
|
xxs: string;
|
@@ -1910,4 +2109,4 @@ declare const config: {
|
|
1910
2109
|
utils: {};
|
1911
2110
|
};
|
1912
2111
|
|
1913
|
-
export { Button, type ButtonProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };
|
2112
|
+
export { Button, type ButtonProps, Text, type TextProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };
|
package/dist/index.d.ts
CHANGED
@@ -2,7 +2,7 @@ import * as _stitches_react_types_styled_component from '@stitches/react/types/s
|
|
2
2
|
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
3
3
|
import { ComponentProps } from '@stitches/react';
|
4
4
|
import * as react from 'react';
|
5
|
-
import { ElementType } from 'react';
|
5
|
+
import { ElementType, ComponentProps as ComponentProps$1 } from 'react';
|
6
6
|
import * as _stitches_react_types_theme from '@stitches/react/types/theme';
|
7
7
|
import * as _stitches_react_types_css from '@stitches/react/types/css';
|
8
8
|
import * as _stitches_react_types_stitches from '@stitches/react/types/stitches';
|
@@ -11,7 +11,8 @@ import * as _stitches_react_types_util from '@stitches/react/types/util';
|
|
11
11
|
/** Primary UI component for user interaction */
|
12
12
|
declare const Button: _stitches_react_types_styled_component.StyledComponent<"button", {
|
13
13
|
variant?: "primary" | "secondary" | "tertiary" | undefined;
|
14
|
-
size?: "sm" | "md" | undefined;
|
14
|
+
size?: "sm" | "md" | "lg" | undefined;
|
15
|
+
flat?: boolean | "true" | "false" | undefined;
|
15
16
|
}, {}, _stitches_react_types_css_util.CSS<{}, {
|
16
17
|
colors: {
|
17
18
|
white: string;
|
@@ -25,7 +26,6 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
|
|
25
26
|
dafaz400: string;
|
26
27
|
dafaz600: string;
|
27
28
|
dafaz800: string;
|
28
|
-
teste: string;
|
29
29
|
};
|
30
30
|
fontSizes: {
|
31
31
|
xxs: string;
|
@@ -216,7 +216,7 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
|
|
216
216
|
interface ButtonProps extends ComponentProps<typeof Button> {
|
217
217
|
as?: ElementType;
|
218
218
|
/** How large should the button be? */
|
219
|
-
size?: 'sm' | 'md';
|
219
|
+
size?: 'sm' | 'md' | 'lg';
|
220
220
|
/** Optional click handler */
|
221
221
|
onClick?: () => void;
|
222
222
|
/** Button contents */
|
@@ -224,6 +224,215 @@ interface ButtonProps extends ComponentProps<typeof Button> {
|
|
224
224
|
/** Button is disable? */
|
225
225
|
disabled?: boolean;
|
226
226
|
variant?: 'primary' | 'secondary' | 'tertiary';
|
227
|
+
flat?: boolean;
|
228
|
+
}
|
229
|
+
|
230
|
+
declare const Text: _stitches_react_types_styled_component.StyledComponent<"p", {
|
231
|
+
size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
|
232
|
+
}, {}, _stitches_react_types_css_util.CSS<{}, {
|
233
|
+
colors: {
|
234
|
+
white: string;
|
235
|
+
black: string;
|
236
|
+
gray100: string;
|
237
|
+
gray200: string;
|
238
|
+
gray400: string;
|
239
|
+
gray800: string;
|
240
|
+
dafaz100: string;
|
241
|
+
dafaz200: string;
|
242
|
+
dafaz400: string;
|
243
|
+
dafaz600: string;
|
244
|
+
dafaz800: string;
|
245
|
+
};
|
246
|
+
fontSizes: {
|
247
|
+
xxs: string;
|
248
|
+
xs: string;
|
249
|
+
sm: string;
|
250
|
+
md: string;
|
251
|
+
lg: string;
|
252
|
+
xl: string;
|
253
|
+
'2xl': string;
|
254
|
+
};
|
255
|
+
fontWeights: {
|
256
|
+
regular: string;
|
257
|
+
medium: string;
|
258
|
+
bold: string;
|
259
|
+
};
|
260
|
+
fonts: {
|
261
|
+
default: string;
|
262
|
+
app: string;
|
263
|
+
web: string;
|
264
|
+
offer: string;
|
265
|
+
code: string;
|
266
|
+
};
|
267
|
+
lineHeights: {
|
268
|
+
shorter: string;
|
269
|
+
short: string;
|
270
|
+
base: string;
|
271
|
+
tall: string;
|
272
|
+
};
|
273
|
+
radii: {
|
274
|
+
px: string;
|
275
|
+
sm: string;
|
276
|
+
md: string;
|
277
|
+
full: string;
|
278
|
+
};
|
279
|
+
space: {
|
280
|
+
1: string;
|
281
|
+
2: string;
|
282
|
+
3: string;
|
283
|
+
4: string;
|
284
|
+
5: string;
|
285
|
+
6: string;
|
286
|
+
7: string;
|
287
|
+
8: string;
|
288
|
+
10: string;
|
289
|
+
12: string;
|
290
|
+
16: string;
|
291
|
+
20: string;
|
292
|
+
40: string;
|
293
|
+
64: string;
|
294
|
+
80: string;
|
295
|
+
};
|
296
|
+
opacities: {
|
297
|
+
opacity400: string;
|
298
|
+
opacity600: string;
|
299
|
+
opacity800: string;
|
300
|
+
opacity900: string;
|
301
|
+
};
|
302
|
+
}, {
|
303
|
+
height: "space";
|
304
|
+
width: "space";
|
305
|
+
gap: "space";
|
306
|
+
gridGap: "space";
|
307
|
+
columnGap: "space";
|
308
|
+
gridColumnGap: "space";
|
309
|
+
rowGap: "space";
|
310
|
+
gridRowGap: "space";
|
311
|
+
inset: "space";
|
312
|
+
insetBlock: "space";
|
313
|
+
insetBlockEnd: "space";
|
314
|
+
insetBlockStart: "space";
|
315
|
+
insetInline: "space";
|
316
|
+
insetInlineEnd: "space";
|
317
|
+
insetInlineStart: "space";
|
318
|
+
margin: "space";
|
319
|
+
marginTop: "space";
|
320
|
+
marginRight: "space";
|
321
|
+
marginBottom: "space";
|
322
|
+
marginLeft: "space";
|
323
|
+
marginBlock: "space";
|
324
|
+
marginBlockEnd: "space";
|
325
|
+
marginBlockStart: "space";
|
326
|
+
marginInline: "space";
|
327
|
+
marginInlineEnd: "space";
|
328
|
+
marginInlineStart: "space";
|
329
|
+
padding: "space";
|
330
|
+
paddingTop: "space";
|
331
|
+
paddingRight: "space";
|
332
|
+
paddingBottom: "space";
|
333
|
+
paddingLeft: "space";
|
334
|
+
paddingBlock: "space";
|
335
|
+
paddingBlockEnd: "space";
|
336
|
+
paddingBlockStart: "space";
|
337
|
+
paddingInline: "space";
|
338
|
+
paddingInlineEnd: "space";
|
339
|
+
paddingInlineStart: "space";
|
340
|
+
scrollMargin: "space";
|
341
|
+
scrollMarginTop: "space";
|
342
|
+
scrollMarginRight: "space";
|
343
|
+
scrollMarginBottom: "space";
|
344
|
+
scrollMarginLeft: "space";
|
345
|
+
scrollMarginBlock: "space";
|
346
|
+
scrollMarginBlockEnd: "space";
|
347
|
+
scrollMarginBlockStart: "space";
|
348
|
+
scrollMarginInline: "space";
|
349
|
+
scrollMarginInlineEnd: "space";
|
350
|
+
scrollMarginInlineStart: "space";
|
351
|
+
scrollPadding: "space";
|
352
|
+
scrollPaddingTop: "space";
|
353
|
+
scrollPaddingRight: "space";
|
354
|
+
scrollPaddingBottom: "space";
|
355
|
+
scrollPaddingLeft: "space";
|
356
|
+
scrollPaddingBlock: "space";
|
357
|
+
scrollPaddingBlockEnd: "space";
|
358
|
+
scrollPaddingBlockStart: "space";
|
359
|
+
scrollPaddingInline: "space";
|
360
|
+
scrollPaddingInlineEnd: "space";
|
361
|
+
scrollPaddingInlineStart: "space";
|
362
|
+
top: "space";
|
363
|
+
right: "space";
|
364
|
+
bottom: "space";
|
365
|
+
left: "space";
|
366
|
+
fontSize: "fontSizes";
|
367
|
+
background: "colors";
|
368
|
+
backgroundColor: "colors";
|
369
|
+
backgroundImage: "colors";
|
370
|
+
borderImage: "colors";
|
371
|
+
border: "colors";
|
372
|
+
borderBlock: "colors";
|
373
|
+
borderBlockEnd: "colors";
|
374
|
+
borderBlockStart: "colors";
|
375
|
+
borderBottom: "colors";
|
376
|
+
borderBottomColor: "colors";
|
377
|
+
borderColor: "colors";
|
378
|
+
borderInline: "colors";
|
379
|
+
borderInlineEnd: "colors";
|
380
|
+
borderInlineStart: "colors";
|
381
|
+
borderLeft: "colors";
|
382
|
+
borderLeftColor: "colors";
|
383
|
+
borderRight: "colors";
|
384
|
+
borderRightColor: "colors";
|
385
|
+
borderTop: "colors";
|
386
|
+
borderTopColor: "colors";
|
387
|
+
caretColor: "colors";
|
388
|
+
color: "colors";
|
389
|
+
columnRuleColor: "colors";
|
390
|
+
outline: "colors";
|
391
|
+
outlineColor: "colors";
|
392
|
+
fill: "colors";
|
393
|
+
stroke: "colors";
|
394
|
+
textDecorationColor: "colors";
|
395
|
+
fontFamily: "fonts";
|
396
|
+
fontWeight: "fontWeights";
|
397
|
+
lineHeight: "lineHeights";
|
398
|
+
letterSpacing: "letterSpacings";
|
399
|
+
blockSize: "sizes";
|
400
|
+
minBlockSize: "sizes";
|
401
|
+
maxBlockSize: "sizes";
|
402
|
+
inlineSize: "sizes";
|
403
|
+
minInlineSize: "sizes";
|
404
|
+
maxInlineSize: "sizes";
|
405
|
+
minWidth: "sizes";
|
406
|
+
maxWidth: "sizes";
|
407
|
+
minHeight: "sizes";
|
408
|
+
maxHeight: "sizes";
|
409
|
+
flexBasis: "sizes";
|
410
|
+
gridTemplateColumns: "sizes";
|
411
|
+
gridTemplateRows: "sizes";
|
412
|
+
borderWidth: "borderWidths";
|
413
|
+
borderTopWidth: "borderWidths";
|
414
|
+
borderLeftWidth: "borderWidths";
|
415
|
+
borderRightWidth: "borderWidths";
|
416
|
+
borderBottomWidth: "borderWidths";
|
417
|
+
borderStyle: "borderStyles";
|
418
|
+
borderTopStyle: "borderStyles";
|
419
|
+
borderLeftStyle: "borderStyles";
|
420
|
+
borderRightStyle: "borderStyles";
|
421
|
+
borderBottomStyle: "borderStyles";
|
422
|
+
borderRadius: "radii";
|
423
|
+
borderTopLeftRadius: "radii";
|
424
|
+
borderTopRightRadius: "radii";
|
425
|
+
borderBottomRightRadius: "radii";
|
426
|
+
borderBottomLeftRadius: "radii";
|
427
|
+
boxShadow: "shadows";
|
428
|
+
textShadow: "shadows";
|
429
|
+
transition: "transitions";
|
430
|
+
zIndex: "zIndices";
|
431
|
+
}, {}>>;
|
432
|
+
interface TextProps extends ComponentProps$1<typeof Text> {
|
433
|
+
as?: ElementType;
|
434
|
+
content: string;
|
435
|
+
size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
227
436
|
}
|
228
437
|
|
229
438
|
declare const styled: <Type extends keyof JSX.IntrinsicElements | React.ComponentType<any> | _stitches_react_types_util.Function, Composers extends (string | React.ComponentType<any> | _stitches_react_types_util.Function | {
|
@@ -241,7 +450,6 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
|
|
241
450
|
dafaz400: string;
|
242
451
|
dafaz600: string;
|
243
452
|
dafaz800: string;
|
244
|
-
teste: string;
|
245
453
|
};
|
246
454
|
fontSizes: {
|
247
455
|
xxs: string;
|
@@ -452,7 +660,6 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
|
|
452
660
|
dafaz400: string;
|
453
661
|
dafaz600: string;
|
454
662
|
dafaz800: string;
|
455
|
-
teste: string;
|
456
663
|
};
|
457
664
|
fontSizes: {
|
458
665
|
xxs: string;
|
@@ -655,7 +862,6 @@ declare const css: <Composers extends (string | React.ExoticComponent<any> | Rea
|
|
655
862
|
dafaz400: string;
|
656
863
|
dafaz600: string;
|
657
864
|
dafaz800: string;
|
658
|
-
teste: string;
|
659
865
|
};
|
660
866
|
fontSizes: {
|
661
867
|
xxs: string;
|
@@ -873,7 +1079,6 @@ declare const globalCss: <Styles extends {
|
|
873
1079
|
dafaz400: string;
|
874
1080
|
dafaz600: string;
|
875
1081
|
dafaz800: string;
|
876
|
-
teste: string;
|
877
1082
|
};
|
878
1083
|
fontSizes: {
|
879
1084
|
xxs: string;
|
@@ -1074,7 +1279,6 @@ declare const globalCss: <Styles extends {
|
|
1074
1279
|
dafaz400: string;
|
1075
1280
|
dafaz600: string;
|
1076
1281
|
dafaz800: string;
|
1077
|
-
teste: string;
|
1078
1282
|
};
|
1079
1283
|
fontSizes: {
|
1080
1284
|
xxs: string;
|
@@ -1278,7 +1482,6 @@ declare const keyframes: (style: {
|
|
1278
1482
|
dafaz400: string;
|
1279
1483
|
dafaz600: string;
|
1280
1484
|
dafaz800: string;
|
1281
|
-
teste: string;
|
1282
1485
|
};
|
1283
1486
|
fontSizes: {
|
1284
1487
|
xxs: string;
|
@@ -1487,7 +1690,6 @@ declare const theme: string & {
|
|
1487
1690
|
dafaz400: _stitches_react_types_theme.Token<"dafaz400", string, "colors", "">;
|
1488
1691
|
dafaz600: _stitches_react_types_theme.Token<"dafaz600", string, "colors", "">;
|
1489
1692
|
dafaz800: _stitches_react_types_theme.Token<"dafaz800", string, "colors", "">;
|
1490
|
-
teste: _stitches_react_types_theme.Token<"teste", string, "colors", "">;
|
1491
1693
|
};
|
1492
1694
|
fontSizes: {
|
1493
1695
|
xxs: _stitches_react_types_theme.Token<"xxs", string, "fontSizes", "">;
|
@@ -1559,7 +1761,6 @@ declare const createTheme: <Argument0 extends string | ({
|
|
1559
1761
|
dafaz400?: string | number | boolean | undefined;
|
1560
1762
|
dafaz600?: string | number | boolean | undefined;
|
1561
1763
|
dafaz800?: string | number | boolean | undefined;
|
1562
|
-
teste?: string | number | boolean | undefined;
|
1563
1764
|
} | undefined;
|
1564
1765
|
fontSizes?: {
|
1565
1766
|
xxs?: string | number | boolean | undefined;
|
@@ -1635,7 +1836,6 @@ declare const createTheme: <Argument0 extends string | ({
|
|
1635
1836
|
dafaz400?: string | number | boolean | undefined;
|
1636
1837
|
dafaz600?: string | number | boolean | undefined;
|
1637
1838
|
dafaz800?: string | number | boolean | undefined;
|
1638
|
-
teste?: string | number | boolean | undefined;
|
1639
1839
|
} | undefined;
|
1640
1840
|
fontSizes?: {
|
1641
1841
|
xxs?: string | number | boolean | undefined;
|
@@ -1718,7 +1918,6 @@ declare const config: {
|
|
1718
1918
|
dafaz400: string;
|
1719
1919
|
dafaz600: string;
|
1720
1920
|
dafaz800: string;
|
1721
|
-
teste: string;
|
1722
1921
|
};
|
1723
1922
|
fontSizes: {
|
1724
1923
|
xxs: string;
|
@@ -1910,4 +2109,4 @@ declare const config: {
|
|
1910
2109
|
utils: {};
|
1911
2110
|
};
|
1912
2111
|
|
1913
|
-
export { Button, type ButtonProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };
|
2112
|
+
export { Button, type ButtonProps, Text, type TextProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };
|
package/dist/index.js
CHANGED
@@ -38,6 +38,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
38
38
|
var src_exports = {};
|
39
39
|
__export(src_exports, {
|
40
40
|
Button: () => Button,
|
41
|
+
Text: () => Text,
|
41
42
|
config: () => config,
|
42
43
|
createTheme: () => createTheme,
|
43
44
|
css: () => css,
|
@@ -61,8 +62,7 @@ var colors = {
|
|
61
62
|
dafaz200: "#52D058",
|
62
63
|
dafaz400: "#2FC136",
|
63
64
|
dafaz600: "#229E45",
|
64
|
-
dafaz800: "#2A6A2D"
|
65
|
-
teste: "#FFF"
|
65
|
+
dafaz800: "#2A6A2D"
|
66
66
|
};
|
67
67
|
var opacities = {
|
68
68
|
opacity400: "0.4",
|
@@ -104,8 +104,8 @@ var fontSizes = {
|
|
104
104
|
xxs: "0.5rem",
|
105
105
|
xs: "0.625rem",
|
106
106
|
sm: "0.75rem",
|
107
|
-
md: "0.
|
108
|
-
lg: "
|
107
|
+
md: "0.875rem",
|
108
|
+
lg: "1.0rem",
|
109
109
|
xl: "1.25rem",
|
110
110
|
"2xl": "2rem"
|
111
111
|
};
|
@@ -211,21 +211,63 @@ var Button = styled("button", {
|
|
211
211
|
},
|
212
212
|
size: {
|
213
213
|
sm: {
|
214
|
-
height: 38
|
214
|
+
height: 38,
|
215
|
+
fontSize: "$sm"
|
215
216
|
},
|
216
217
|
md: {
|
217
|
-
height: 46
|
218
|
+
height: 46,
|
219
|
+
fontSize: "$lg"
|
220
|
+
},
|
221
|
+
lg: {
|
222
|
+
height: 54,
|
223
|
+
fontSize: "$xl"
|
218
224
|
}
|
225
|
+
},
|
226
|
+
flat: {
|
227
|
+
true: {
|
228
|
+
border: 0,
|
229
|
+
background: "transparent",
|
230
|
+
"&:disabled": {
|
231
|
+
color: "$gray200",
|
232
|
+
background: "transparent",
|
233
|
+
border: "none"
|
234
|
+
}
|
235
|
+
},
|
236
|
+
false: {}
|
219
237
|
}
|
220
238
|
},
|
221
239
|
defaultVariants: {
|
222
240
|
variant: "primary",
|
241
|
+
size: "md",
|
242
|
+
flat: false
|
243
|
+
}
|
244
|
+
});
|
245
|
+
|
246
|
+
// src/components/Text.tsx
|
247
|
+
var Text = styled("p", {
|
248
|
+
fontFamily: "$web",
|
249
|
+
lineHeight: "$base",
|
250
|
+
margin: 0,
|
251
|
+
color: "$white",
|
252
|
+
variants: {
|
253
|
+
size: {
|
254
|
+
xxs: { fontSize: "$xxs" },
|
255
|
+
xs: { fontSize: "$xs" },
|
256
|
+
sm: { fontSize: "$sm" },
|
257
|
+
md: { fontSize: "$md" },
|
258
|
+
lg: { fontSize: "$lg" },
|
259
|
+
xl: { fontSize: "$xl" },
|
260
|
+
"2xl": { fontSize: "$2xl" }
|
261
|
+
}
|
262
|
+
},
|
263
|
+
defaultVariants: {
|
223
264
|
size: "md"
|
224
265
|
}
|
225
266
|
});
|
226
267
|
// Annotate the CommonJS export names for ESM import in node:
|
227
268
|
0 && (module.exports = {
|
228
269
|
Button,
|
270
|
+
Text,
|
229
271
|
config,
|
230
272
|
createTheme,
|
231
273
|
css,
|
package/dist/index.mjs
CHANGED
@@ -30,8 +30,7 @@ var colors = {
|
|
30
30
|
dafaz200: "#52D058",
|
31
31
|
dafaz400: "#2FC136",
|
32
32
|
dafaz600: "#229E45",
|
33
|
-
dafaz800: "#2A6A2D"
|
34
|
-
teste: "#FFF"
|
33
|
+
dafaz800: "#2A6A2D"
|
35
34
|
};
|
36
35
|
var opacities = {
|
37
36
|
opacity400: "0.4",
|
@@ -73,8 +72,8 @@ var fontSizes = {
|
|
73
72
|
xxs: "0.5rem",
|
74
73
|
xs: "0.625rem",
|
75
74
|
sm: "0.75rem",
|
76
|
-
md: "0.
|
77
|
-
lg: "
|
75
|
+
md: "0.875rem",
|
76
|
+
lg: "1.0rem",
|
78
77
|
xl: "1.25rem",
|
79
78
|
"2xl": "2rem"
|
80
79
|
};
|
@@ -180,20 +179,62 @@ var Button = styled("button", {
|
|
180
179
|
},
|
181
180
|
size: {
|
182
181
|
sm: {
|
183
|
-
height: 38
|
182
|
+
height: 38,
|
183
|
+
fontSize: "$sm"
|
184
184
|
},
|
185
185
|
md: {
|
186
|
-
height: 46
|
186
|
+
height: 46,
|
187
|
+
fontSize: "$lg"
|
188
|
+
},
|
189
|
+
lg: {
|
190
|
+
height: 54,
|
191
|
+
fontSize: "$xl"
|
187
192
|
}
|
193
|
+
},
|
194
|
+
flat: {
|
195
|
+
true: {
|
196
|
+
border: 0,
|
197
|
+
background: "transparent",
|
198
|
+
"&:disabled": {
|
199
|
+
color: "$gray200",
|
200
|
+
background: "transparent",
|
201
|
+
border: "none"
|
202
|
+
}
|
203
|
+
},
|
204
|
+
false: {}
|
188
205
|
}
|
189
206
|
},
|
190
207
|
defaultVariants: {
|
191
208
|
variant: "primary",
|
209
|
+
size: "md",
|
210
|
+
flat: false
|
211
|
+
}
|
212
|
+
});
|
213
|
+
|
214
|
+
// src/components/Text.tsx
|
215
|
+
var Text = styled("p", {
|
216
|
+
fontFamily: "$web",
|
217
|
+
lineHeight: "$base",
|
218
|
+
margin: 0,
|
219
|
+
color: "$white",
|
220
|
+
variants: {
|
221
|
+
size: {
|
222
|
+
xxs: { fontSize: "$xxs" },
|
223
|
+
xs: { fontSize: "$xs" },
|
224
|
+
sm: { fontSize: "$sm" },
|
225
|
+
md: { fontSize: "$md" },
|
226
|
+
lg: { fontSize: "$lg" },
|
227
|
+
xl: { fontSize: "$xl" },
|
228
|
+
"2xl": { fontSize: "$2xl" }
|
229
|
+
}
|
230
|
+
},
|
231
|
+
defaultVariants: {
|
192
232
|
size: "md"
|
193
233
|
}
|
194
234
|
});
|
195
235
|
export {
|
196
236
|
Button,
|
237
|
+
Text,
|
197
238
|
config,
|
198
239
|
createTheme,
|
199
240
|
css,
|
package/package.json
CHANGED
@@ -76,23 +76,42 @@ export const Button = styled('button', {
|
|
76
76
|
size: {
|
77
77
|
sm: {
|
78
78
|
height: 38,
|
79
|
+
fontSize: '$sm',
|
79
80
|
},
|
80
81
|
md: {
|
81
82
|
height: 46,
|
83
|
+
fontSize: '$lg',
|
84
|
+
},
|
85
|
+
lg: {
|
86
|
+
height: 54,
|
87
|
+
fontSize: '$xl',
|
82
88
|
},
|
83
89
|
},
|
84
|
-
|
90
|
+
flat: {
|
91
|
+
true: {
|
92
|
+
border: 0,
|
93
|
+
background: 'transparent',
|
85
94
|
|
95
|
+
'&:disabled': {
|
96
|
+
color: '$gray200',
|
97
|
+
background: 'transparent',
|
98
|
+
border: 'none',
|
99
|
+
},
|
100
|
+
},
|
101
|
+
false: {},
|
102
|
+
},
|
103
|
+
},
|
86
104
|
defaultVariants: {
|
87
105
|
variant: 'primary',
|
88
106
|
size: 'md',
|
107
|
+
flat: false,
|
89
108
|
},
|
90
109
|
})
|
91
110
|
|
92
111
|
export interface ButtonProps extends ComponentProps<typeof Button> {
|
93
112
|
as?: ElementType
|
94
113
|
/** How large should the button be? */
|
95
|
-
size?: 'sm' | 'md'
|
114
|
+
size?: 'sm' | 'md' | 'lg'
|
96
115
|
/** Optional click handler */
|
97
116
|
onClick?: () => void
|
98
117
|
/** Button contents */
|
@@ -101,4 +120,6 @@ export interface ButtonProps extends ComponentProps<typeof Button> {
|
|
101
120
|
disabled?: boolean
|
102
121
|
//** Button UI mode */
|
103
122
|
variant?: 'primary' | 'secondary' | 'tertiary'
|
123
|
+
//** Flat mode */
|
124
|
+
flat?: boolean
|
104
125
|
}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import type { ComponentProps, ElementType } from 'react'
|
2
|
+
import { styled } from '../styles'
|
3
|
+
|
4
|
+
export const Text = styled('p', {
|
5
|
+
fontFamily: '$web',
|
6
|
+
lineHeight: '$base',
|
7
|
+
margin: 0,
|
8
|
+
color: '$white',
|
9
|
+
|
10
|
+
variants: {
|
11
|
+
size: {
|
12
|
+
xxs: { fontSize: '$xxs' },
|
13
|
+
xs: { fontSize: '$xs' },
|
14
|
+
sm: { fontSize: '$sm' },
|
15
|
+
md: { fontSize: '$md' },
|
16
|
+
lg: { fontSize: '$lg' },
|
17
|
+
xl: { fontSize: '$xl' },
|
18
|
+
'2xl': { fontSize: '$2xl' },
|
19
|
+
},
|
20
|
+
},
|
21
|
+
|
22
|
+
defaultVariants: {
|
23
|
+
size: 'md',
|
24
|
+
},
|
25
|
+
})
|
26
|
+
|
27
|
+
export interface TextProps extends ComponentProps<typeof Text> {
|
28
|
+
as?: ElementType
|
29
|
+
content: string
|
30
|
+
size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
|
31
|
+
}
|
package/src/index.tsx
CHANGED