@dafaz-ui/react 2.0.0 → 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/dist/index.js CHANGED
@@ -37,7 +37,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
37
37
  // src/index.tsx
38
38
  var src_exports = {};
39
39
  __export(src_exports, {
40
- Button: () => Button
40
+ Button: () => Button,
41
+ Text: () => Text,
42
+ config: () => config,
43
+ createTheme: () => createTheme,
44
+ css: () => css,
45
+ getCssText: () => getCssText,
46
+ globalCss: () => globalCss,
47
+ keyframes: () => keyframes,
48
+ styled: () => styled,
49
+ theme: () => theme
41
50
  });
42
51
  module.exports = __toCommonJS(src_exports);
43
52
 
@@ -95,8 +104,8 @@ var fontSizes = {
95
104
  xxs: "0.5rem",
96
105
  xs: "0.625rem",
97
106
  sm: "0.75rem",
98
- md: "0.875",
99
- lg: "1rem",
107
+ md: "0.875rem",
108
+ lg: "1.0rem",
100
109
  xl: "1.25rem",
101
110
  "2xl": "2rem"
102
111
  };
@@ -202,19 +211,69 @@ var Button = styled("button", {
202
211
  },
203
212
  size: {
204
213
  sm: {
205
- height: 38
214
+ height: 38,
215
+ fontSize: "$sm"
206
216
  },
207
217
  md: {
208
- height: 46
218
+ height: 46,
219
+ fontSize: "$lg"
220
+ },
221
+ lg: {
222
+ height: 54,
223
+ fontSize: "$xl"
209
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: {}
210
237
  }
211
238
  },
212
239
  defaultVariants: {
213
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: {
214
264
  size: "md"
215
265
  }
216
266
  });
217
267
  // Annotate the CommonJS export names for ESM import in node:
218
268
  0 && (module.exports = {
219
- Button
269
+ Button,
270
+ Text,
271
+ config,
272
+ createTheme,
273
+ css,
274
+ getCssText,
275
+ globalCss,
276
+ keyframes,
277
+ styled,
278
+ theme
220
279
  });
package/dist/index.mjs CHANGED
@@ -72,8 +72,8 @@ var fontSizes = {
72
72
  xxs: "0.5rem",
73
73
  xs: "0.625rem",
74
74
  sm: "0.75rem",
75
- md: "0.875",
76
- lg: "1rem",
75
+ md: "0.875rem",
76
+ lg: "1.0rem",
77
77
  xl: "1.25rem",
78
78
  "2xl": "2rem"
79
79
  };
@@ -179,18 +179,68 @@ var Button = styled("button", {
179
179
  },
180
180
  size: {
181
181
  sm: {
182
- height: 38
182
+ height: 38,
183
+ fontSize: "$sm"
183
184
  },
184
185
  md: {
185
- height: 46
186
+ height: 46,
187
+ fontSize: "$lg"
188
+ },
189
+ lg: {
190
+ height: 54,
191
+ fontSize: "$xl"
186
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: {}
187
205
  }
188
206
  },
189
207
  defaultVariants: {
190
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: {
191
232
  size: "md"
192
233
  }
193
234
  });
194
235
  export {
195
- Button
236
+ Button,
237
+ Text,
238
+ config,
239
+ createTheme,
240
+ css,
241
+ getCssText,
242
+ globalCss,
243
+ keyframes,
244
+ styled,
245
+ theme
196
246
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dafaz-ui/react",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -1,104 +1,125 @@
1
- import type { ComponentProps } from '@stitches/react'
2
- import { styled } from '../styles'
3
- import type { ElementType } from 'react'
4
-
5
- /** Primary UI component for user interaction */
6
- export const Button = styled('button', {
7
- all: 'unset',
8
- borderRadius: '$md',
9
- fontSize: '$md',
10
- fontWeight: '$regular',
11
- fontFamily: '$app',
12
- textAlign: 'center',
13
- minWidth: 120,
14
- boxSizing: 'border-box',
15
-
16
- display: 'flex',
17
- alignItems: 'center',
18
- justifyContent: 'center',
19
- gap: '$2',
20
- padding: '$2 $5',
21
-
22
- cursor: 'pointer',
23
-
24
- '&:disabled': {
25
- cursor: 'not-allowed',
26
- },
27
-
28
- svg: {
29
- width: '$4',
30
- height: '$4',
31
- },
32
-
33
- variants: {
34
- variant: {
35
- primary: {
36
- color: '$white',
37
- background: '$dafaz600',
38
- opacity: 0.8,
39
-
40
- '&:not(:disabled):hover': {
41
- opacity: 1,
42
- },
43
-
44
- '&:disabled': {
45
- background: '$gray200',
46
- },
47
- },
48
- secondary: {
49
- fontWeight: '$medium',
50
- color: '$dafaz600',
51
- border: '2px solid $dafaz600',
52
- opacity: 0.8,
53
-
54
- '&:not(:disabled):hover': {
55
- opacity: 1,
56
- },
57
-
58
- '&:disabled': {
59
- color: '$gray200',
60
- border: '2px solid $gray200',
61
- },
62
- },
63
- tertiary: {
64
- fontWeight: '$medium',
65
- color: '$gray400',
66
-
67
- '&:not(:disabled):hover': {
68
- color: '$gray800',
69
- },
70
-
71
- '&:disabled': {
72
- color: '$gray200',
73
- },
74
- },
75
- },
76
- size: {
77
- sm: {
78
- height: 38,
79
- },
80
- md: {
81
- height: 46,
82
- },
83
- },
84
- },
85
-
86
- defaultVariants: {
87
- variant: 'primary',
88
- size: 'md',
89
- },
90
- })
91
-
92
- export interface ButtonProps extends ComponentProps<typeof Button> {
93
- as?: ElementType
94
- /** How large should the button be? */
95
- size?: 'sm' | 'md'
96
- /** Optional click handler */
97
- onClick?: () => void
98
- /** Button contents */
99
- label: string
100
- /** Button is disable? */
101
- disabled?: boolean
102
- //** Button UI mode */
103
- variant?: 'primary' | 'secondary' | 'tertiary'
104
- }
1
+ import type { ComponentProps } from '@stitches/react'
2
+ import { styled } from '../styles'
3
+ import type { ElementType } from 'react'
4
+
5
+ /** Primary UI component for user interaction */
6
+ export const Button = styled('button', {
7
+ all: 'unset',
8
+ borderRadius: '$md',
9
+ fontSize: '$md',
10
+ fontWeight: '$regular',
11
+ fontFamily: '$app',
12
+ textAlign: 'center',
13
+ minWidth: 120,
14
+ boxSizing: 'border-box',
15
+
16
+ display: 'flex',
17
+ alignItems: 'center',
18
+ justifyContent: 'center',
19
+ gap: '$2',
20
+ padding: '$2 $5',
21
+
22
+ cursor: 'pointer',
23
+
24
+ '&:disabled': {
25
+ cursor: 'not-allowed',
26
+ },
27
+
28
+ svg: {
29
+ width: '$4',
30
+ height: '$4',
31
+ },
32
+
33
+ variants: {
34
+ variant: {
35
+ primary: {
36
+ color: '$white',
37
+ background: '$dafaz600',
38
+ opacity: 0.8,
39
+
40
+ '&:not(:disabled):hover': {
41
+ opacity: 1,
42
+ },
43
+
44
+ '&:disabled': {
45
+ background: '$gray200',
46
+ },
47
+ },
48
+ secondary: {
49
+ fontWeight: '$medium',
50
+ color: '$dafaz600',
51
+ border: '2px solid $dafaz600',
52
+ opacity: 0.8,
53
+
54
+ '&:not(:disabled):hover': {
55
+ opacity: 1,
56
+ },
57
+
58
+ '&:disabled': {
59
+ color: '$gray200',
60
+ border: '2px solid $gray200',
61
+ },
62
+ },
63
+ tertiary: {
64
+ fontWeight: '$medium',
65
+ color: '$gray400',
66
+
67
+ '&:not(:disabled):hover': {
68
+ color: '$gray800',
69
+ },
70
+
71
+ '&:disabled': {
72
+ color: '$gray200',
73
+ },
74
+ },
75
+ },
76
+ size: {
77
+ sm: {
78
+ height: 38,
79
+ fontSize: '$sm',
80
+ },
81
+ md: {
82
+ height: 46,
83
+ fontSize: '$lg',
84
+ },
85
+ lg: {
86
+ height: 54,
87
+ fontSize: '$xl',
88
+ },
89
+ },
90
+ flat: {
91
+ true: {
92
+ border: 0,
93
+ background: 'transparent',
94
+
95
+ '&:disabled': {
96
+ color: '$gray200',
97
+ background: 'transparent',
98
+ border: 'none',
99
+ },
100
+ },
101
+ false: {},
102
+ },
103
+ },
104
+ defaultVariants: {
105
+ variant: 'primary',
106
+ size: 'md',
107
+ flat: false,
108
+ },
109
+ })
110
+
111
+ export interface ButtonProps extends ComponentProps<typeof Button> {
112
+ as?: ElementType
113
+ /** How large should the button be? */
114
+ size?: 'sm' | 'md' | 'lg'
115
+ /** Optional click handler */
116
+ onClick?: () => void
117
+ /** Button contents */
118
+ label: string
119
+ /** Button is disable? */
120
+ disabled?: boolean
121
+ //** Button UI mode */
122
+ variant?: 'primary' | 'secondary' | 'tertiary'
123
+ //** Flat mode */
124
+ flat?: boolean
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
@@ -1 +1,4 @@
1
- export * from './components/Button'
1
+ export * from './components/Button'
2
+ export * from './components/Text'
3
+
4
+ export * from './styles'
@@ -1,38 +1,38 @@
1
- import {
2
- colors,
3
- fontSizes,
4
- fontWeights,
5
- fonts,
6
- lineHeights,
7
- opacities,
8
- radii,
9
- space,
10
- } from '@dafaz-ui/tokens'
11
- import { createStitches, defaultThemeMap } from '@stitches/react'
12
-
13
- export const {
14
- styled,
15
- css,
16
- globalCss,
17
- keyframes,
18
- getCssText,
19
- theme,
20
- createTheme,
21
- config,
22
- } = createStitches({
23
- themeMap: {
24
- ...defaultThemeMap,
25
- height: 'space',
26
- width: 'space',
27
- },
28
- theme: {
29
- colors: colors,
30
- fontSizes: fontSizes,
31
- fontWeights: fontWeights,
32
- fonts: fonts,
33
- lineHeights: lineHeights,
34
- radii: radii,
35
- space: space,
36
- opacities: opacities,
37
- },
38
- })
1
+ import {
2
+ colors,
3
+ fontSizes,
4
+ fontWeights,
5
+ fonts,
6
+ lineHeights,
7
+ opacities,
8
+ radii,
9
+ space,
10
+ } from '@dafaz-ui/tokens'
11
+ import { createStitches, defaultThemeMap } from '@stitches/react'
12
+
13
+ export const {
14
+ styled,
15
+ css,
16
+ globalCss,
17
+ keyframes,
18
+ getCssText,
19
+ theme,
20
+ createTheme,
21
+ config,
22
+ } = createStitches({
23
+ themeMap: {
24
+ ...defaultThemeMap,
25
+ height: 'space',
26
+ width: 'space',
27
+ },
28
+ theme: {
29
+ colors: colors,
30
+ fontSizes: fontSizes,
31
+ fontWeights: fontWeights,
32
+ fonts: fonts,
33
+ lineHeights: lineHeights,
34
+ radii: radii,
35
+ space: space,
36
+ opacities: opacities,
37
+ },
38
+ })
package/tsconfig.json CHANGED
@@ -1,4 +1,4 @@
1
- {
2
- "extends": "@dafaz-ui/ts-config/react.json",
3
- "include": ["src"],
4
- }
1
+ {
2
+ "extends": "@dafaz-ui/ts-config/react.json",
3
+ "include": ["src"],
4
+ }