@szum-tech/design-system 1.3.0 → 1.5.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.d.ts +74 -6
- package/dist/index.js +197 -12
- package/dist/index.mjs +177 -11
- package/package.json +3 -1
- package/tailwindcss/main-preset.js +18 -0
- package/tailwindcss/plugins/components/typography.js +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,20 +1,88 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import React__default from 'react';
|
|
2
5
|
|
|
3
|
-
declare
|
|
6
|
+
declare const avatarCva: (props?: ({
|
|
7
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
8
|
+
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
9
|
+
|
|
10
|
+
declare type AvatarCvaProps = VariantProps<typeof avatarCva>;
|
|
11
|
+
declare type AvatarSizeType = NonNullable<AvatarCvaProps["size"]>;
|
|
12
|
+
|
|
13
|
+
declare type AvatarProps = React.ComponentPropsWithoutRef<"div"> & {
|
|
14
|
+
/**
|
|
15
|
+
* Defines avatar image alt
|
|
16
|
+
*/
|
|
17
|
+
alt?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Defines background color
|
|
20
|
+
*/
|
|
21
|
+
bg?: `bg-${string}` | `bg-${string}-${number}`;
|
|
22
|
+
/**
|
|
23
|
+
* Defines avatar size
|
|
24
|
+
* @default 'md'
|
|
25
|
+
*/
|
|
26
|
+
size?: AvatarSizeType;
|
|
27
|
+
/**
|
|
28
|
+
* Defines avatar image src
|
|
29
|
+
*/
|
|
30
|
+
src?: string;
|
|
31
|
+
};
|
|
32
|
+
declare function Avatar({ alt, bg, children, size, src, ...props }: AvatarProps): JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare const buttonCva: (props?: ({
|
|
35
|
+
color?: "neutral" | "primary" | "success" | "warning" | "error" | null | undefined;
|
|
36
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
37
|
+
variant?: "text" | "outlined" | "contained" | null | undefined;
|
|
38
|
+
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
39
|
+
|
|
40
|
+
declare type ButtonCvaProps = VariantProps<typeof buttonCva>;
|
|
41
|
+
declare type ButtonSizeType = NonNullable<ButtonCvaProps["size"]>;
|
|
42
|
+
declare type ButtonVariantType = NonNullable<ButtonCvaProps["variant"]>;
|
|
43
|
+
declare type ButtonColorType = NonNullable<ButtonCvaProps["color"]>;
|
|
44
|
+
|
|
45
|
+
declare type AsProp<C extends React.ElementType> = {
|
|
46
|
+
/**
|
|
47
|
+
* Defines HTML tag to be used for component
|
|
48
|
+
*/
|
|
49
|
+
as?: C;
|
|
50
|
+
};
|
|
51
|
+
declare type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
|
|
52
|
+
declare type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
|
|
53
|
+
|
|
54
|
+
declare type ButtonProp = {
|
|
55
|
+
/**
|
|
56
|
+
* Defines button color
|
|
57
|
+
* @default 'primary'
|
|
58
|
+
*/
|
|
59
|
+
color?: ButtonColorType;
|
|
60
|
+
/**
|
|
61
|
+
* Defines button variant
|
|
62
|
+
* @default 'text'
|
|
63
|
+
*/
|
|
64
|
+
variant?: ButtonVariantType;
|
|
65
|
+
/**
|
|
66
|
+
* Defines button size
|
|
67
|
+
* @default 'md'
|
|
68
|
+
*/
|
|
69
|
+
size?: ButtonSizeType;
|
|
70
|
+
};
|
|
71
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, string | number | symbol> & React.RefAttributes<unknown>>;
|
|
4
72
|
|
|
5
73
|
declare type ThemeType = "light" | "dark";
|
|
6
74
|
interface ThemeContextType {
|
|
7
75
|
theme: ThemeType;
|
|
8
|
-
setTheme:
|
|
76
|
+
setTheme: React__default.Dispatch<React__default.SetStateAction<ThemeType>>;
|
|
9
77
|
}
|
|
10
78
|
|
|
11
|
-
declare const ThemeContext:
|
|
79
|
+
declare const ThemeContext: React__default.Context<ThemeContextType>;
|
|
12
80
|
|
|
13
81
|
interface ThemeProviderProps {
|
|
14
82
|
/**
|
|
15
83
|
* Children Components using theming.
|
|
16
84
|
*/
|
|
17
|
-
children?:
|
|
85
|
+
children?: React__default.ReactNode;
|
|
18
86
|
/**
|
|
19
87
|
* Define the default theme which is set at the beginning if neither local storage nor media is defined.
|
|
20
88
|
*/
|
|
@@ -28,4 +96,4 @@ declare function ThemeProvider({ children, defaultTheme, theme }: ThemeProviderP
|
|
|
28
96
|
|
|
29
97
|
declare const useTheme: () => ThemeContextType;
|
|
30
98
|
|
|
31
|
-
export { Button, ThemeContext, ThemeContextType, ThemeProvider, ThemeProviderProps, ThemeType, useTheme };
|
|
99
|
+
export { Avatar, AvatarProps, AvatarSizeType, _default as Button, ThemeContext, ThemeContextType, ThemeProvider, ThemeProviderProps, ThemeType, useTheme };
|
package/dist/index.js
CHANGED
|
@@ -2,21 +2,205 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
5
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var
|
|
7
|
+
var React3 = require('react');
|
|
7
8
|
|
|
8
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
function _interopNamespace(e) {
|
|
12
|
+
if (e && e.__esModule) return e;
|
|
13
|
+
var n = Object.create(null);
|
|
14
|
+
if (e) {
|
|
15
|
+
Object.keys(e).forEach(function (k) {
|
|
16
|
+
if (k !== 'default') {
|
|
17
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
18
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () { return e[k]; }
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
n["default"] = e;
|
|
26
|
+
return Object.freeze(n);
|
|
27
|
+
}
|
|
11
28
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
29
|
+
var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
|
|
30
|
+
var React3__default = /*#__PURE__*/_interopDefaultLegacy(React3);
|
|
31
|
+
|
|
32
|
+
// src/components/Avatar/Avatar.styles.ts
|
|
33
|
+
var avatarCva = classVarianceAuthority.cva(
|
|
34
|
+
"select-none rounded font-semibold leading-none justify-center flex items-center bg-gray-500 text-white dark:text-black",
|
|
35
|
+
{
|
|
36
|
+
variants: {
|
|
37
|
+
size: {
|
|
38
|
+
sm: "h-6 w-6 text-lg",
|
|
39
|
+
md: "h-10 w-10 text-xl",
|
|
40
|
+
lg: "h-14 w-14 text-2xl"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
defaultVariants: {
|
|
44
|
+
size: "md"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
function Avatar({ alt, bg, children, size = "md", src, ...props }) {
|
|
49
|
+
const avatarStyles = avatarCva({ size, className: bg });
|
|
50
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
51
|
+
className: avatarStyles,
|
|
52
|
+
...props,
|
|
53
|
+
children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", {
|
|
54
|
+
className: "h-full w-full rounded object-cover object-center",
|
|
55
|
+
alt,
|
|
56
|
+
src
|
|
57
|
+
}) : children
|
|
17
58
|
});
|
|
18
59
|
}
|
|
19
|
-
var
|
|
60
|
+
var buttonCva = classVarianceAuthority.cva(
|
|
61
|
+
"border rounded font-sans font-medium leading-[1.75] tracking-[.02857em]",
|
|
62
|
+
{
|
|
63
|
+
variants: {
|
|
64
|
+
color: {
|
|
65
|
+
neutral: "",
|
|
66
|
+
primary: "",
|
|
67
|
+
success: "",
|
|
68
|
+
warning: "",
|
|
69
|
+
error: ""
|
|
70
|
+
},
|
|
71
|
+
size: {
|
|
72
|
+
sm: "py-1 px-2.5 text-[.8125rem]",
|
|
73
|
+
md: "px-4 py-1.5 text-sm",
|
|
74
|
+
lg: "px-5 py-2 text-[.9375rem]"
|
|
75
|
+
},
|
|
76
|
+
variant: {
|
|
77
|
+
text: "border-transparent bg-transparent hover:text-white",
|
|
78
|
+
outlined: "",
|
|
79
|
+
contained: ""
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
compoundVariants: [
|
|
83
|
+
{
|
|
84
|
+
variant: "text",
|
|
85
|
+
color: "neutral",
|
|
86
|
+
class: [
|
|
87
|
+
"text-gray-400",
|
|
88
|
+
"hover:border-gray-400 hover:bg-gray-400",
|
|
89
|
+
"active:text-white active:border-gray-300 active:bg-gray-300",
|
|
90
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-gray-400"
|
|
91
|
+
]
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
variant: "text",
|
|
95
|
+
color: "primary",
|
|
96
|
+
class: [
|
|
97
|
+
"text-primary-500",
|
|
98
|
+
"hover:border-primary-400 hover:bg-primary-400",
|
|
99
|
+
"active:text-white active:border-primary-600 active:bg-primary-600",
|
|
100
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-primary-500"
|
|
101
|
+
]
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
variant: "text",
|
|
105
|
+
color: "success",
|
|
106
|
+
class: [
|
|
107
|
+
"text-success-500",
|
|
108
|
+
"hover:border-success-400 hover:bg-success-400",
|
|
109
|
+
"active:text-white active:border-success-600 active:bg-success-600",
|
|
110
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-success-500"
|
|
111
|
+
]
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
variant: "text",
|
|
115
|
+
color: "warning",
|
|
116
|
+
class: [
|
|
117
|
+
"text-warning-500",
|
|
118
|
+
"hover:border-warning-400 hover:bg-warning-400",
|
|
119
|
+
"active:text-white active:border-warning-600 active:bg-warning-600",
|
|
120
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-warning-500"
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
variant: "text",
|
|
125
|
+
color: "error",
|
|
126
|
+
class: [
|
|
127
|
+
"text-error-500",
|
|
128
|
+
"hover:border-error-400 hover:bg-error-400",
|
|
129
|
+
"active:text-white active:border-error-600 active:bg-error-600",
|
|
130
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-error-500"
|
|
131
|
+
]
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
variant: "outlined",
|
|
135
|
+
color: "neutral",
|
|
136
|
+
class: [
|
|
137
|
+
"text-gray-400 border-gray-400 bg-transparent",
|
|
138
|
+
"hover:bg-gray-500 hover:text-white",
|
|
139
|
+
"active:text-white active:bg-gray-300",
|
|
140
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-gray-400"
|
|
141
|
+
]
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
variant: "outlined",
|
|
145
|
+
color: "primary",
|
|
146
|
+
class: [
|
|
147
|
+
"text-primary-500 border-primary-500 bg-transparent",
|
|
148
|
+
"hover:bg-primary-400 hover:text-white",
|
|
149
|
+
"active:text-white active:bg-primary-600",
|
|
150
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-primary-500"
|
|
151
|
+
]
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
variant: "outlined",
|
|
155
|
+
color: "success",
|
|
156
|
+
class: [
|
|
157
|
+
"text-success-500 border-success-500 bg-transparent",
|
|
158
|
+
"hover:bg-success-400 hover:text-white",
|
|
159
|
+
"active:text-white active:bg-success-600",
|
|
160
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-success-500"
|
|
161
|
+
]
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
variant: "outlined",
|
|
165
|
+
color: "warning",
|
|
166
|
+
class: [
|
|
167
|
+
"text-warning-500 border-warning-500 bg-transparent",
|
|
168
|
+
"hover:bg-warning-400 hover:text-white",
|
|
169
|
+
"active:text-white active:bg-warning-600",
|
|
170
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-warning-500"
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
variant: "outlined",
|
|
175
|
+
color: "error",
|
|
176
|
+
class: [
|
|
177
|
+
"text-error-500 border-error-500 bg-transparent",
|
|
178
|
+
"hover:bg-error-400 hover:text-white",
|
|
179
|
+
"active:text-white active:bg-error-600",
|
|
180
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-error-500"
|
|
181
|
+
]
|
|
182
|
+
}
|
|
183
|
+
]
|
|
184
|
+
}
|
|
185
|
+
);
|
|
186
|
+
var Button_default = React3__namespace.forwardRef(function({
|
|
187
|
+
as,
|
|
188
|
+
color = "primary",
|
|
189
|
+
children,
|
|
190
|
+
size = "md",
|
|
191
|
+
variant = "text",
|
|
192
|
+
...restProps
|
|
193
|
+
}, ref) {
|
|
194
|
+
const Component = as || "button";
|
|
195
|
+
const buttonRootStyles = buttonCva({ size, variant, color });
|
|
196
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Component, {
|
|
197
|
+
className: buttonRootStyles,
|
|
198
|
+
ref,
|
|
199
|
+
...restProps,
|
|
200
|
+
children
|
|
201
|
+
});
|
|
202
|
+
});
|
|
203
|
+
var ThemeContext = React3__default["default"].createContext({});
|
|
20
204
|
function getInitialTheme(defaultTheme) {
|
|
21
205
|
if (typeof window !== "undefined" && window.localStorage) {
|
|
22
206
|
const storageTheme = window.localStorage.getItem("theme");
|
|
@@ -27,7 +211,7 @@ function getInitialTheme(defaultTheme) {
|
|
|
27
211
|
return defaultTheme ?? "light";
|
|
28
212
|
}
|
|
29
213
|
function ThemeProvider({ children, defaultTheme, theme }) {
|
|
30
|
-
const [themeState, setThemeState] =
|
|
214
|
+
const [themeState, setThemeState] = React3__default["default"].useState(
|
|
31
215
|
theme ? theme : getInitialTheme(defaultTheme)
|
|
32
216
|
);
|
|
33
217
|
function rawSetTheme(rawTheme) {
|
|
@@ -40,7 +224,7 @@ function ThemeProvider({ children, defaultTheme, theme }) {
|
|
|
40
224
|
localStorage.setItem("theme", rawTheme);
|
|
41
225
|
}
|
|
42
226
|
}
|
|
43
|
-
|
|
227
|
+
React3__default["default"].useEffect(() => {
|
|
44
228
|
rawSetTheme(themeState);
|
|
45
229
|
}, [themeState]);
|
|
46
230
|
return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, {
|
|
@@ -50,9 +234,10 @@ function ThemeProvider({ children, defaultTheme, theme }) {
|
|
|
50
234
|
}
|
|
51
235
|
|
|
52
236
|
// src/hooks/useTheme/useTheme.tsx
|
|
53
|
-
var useTheme = () =>
|
|
237
|
+
var useTheme = () => React3__default["default"].useContext(ThemeContext);
|
|
54
238
|
|
|
55
|
-
exports.
|
|
239
|
+
exports.Avatar = Avatar;
|
|
240
|
+
exports.Button = Button_default;
|
|
56
241
|
exports.ThemeContext = ThemeContext;
|
|
57
242
|
exports.ThemeProvider = ThemeProvider;
|
|
58
243
|
exports.useTheme = useTheme;
|
package/dist/index.mjs
CHANGED
|
@@ -1,14 +1,180 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
1
2
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
+
import * as React3 from 'react';
|
|
4
|
+
import React3__default from 'react';
|
|
3
5
|
|
|
4
|
-
// src/components/
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
// src/components/Avatar/Avatar.styles.ts
|
|
7
|
+
var avatarCva = cva(
|
|
8
|
+
"select-none rounded font-semibold leading-none justify-center flex items-center bg-gray-500 text-white dark:text-black",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
size: {
|
|
12
|
+
sm: "h-6 w-6 text-lg",
|
|
13
|
+
md: "h-10 w-10 text-xl",
|
|
14
|
+
lg: "h-14 w-14 text-2xl"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
size: "md"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
);
|
|
22
|
+
function Avatar({ alt, bg, children, size = "md", src, ...props }) {
|
|
23
|
+
const avatarStyles = avatarCva({ size, className: bg });
|
|
24
|
+
return /* @__PURE__ */ jsx("div", {
|
|
25
|
+
className: avatarStyles,
|
|
26
|
+
...props,
|
|
27
|
+
children: src ? /* @__PURE__ */ jsx("img", {
|
|
28
|
+
className: "h-full w-full rounded object-cover object-center",
|
|
29
|
+
alt,
|
|
30
|
+
src
|
|
31
|
+
}) : children
|
|
9
32
|
});
|
|
10
33
|
}
|
|
11
|
-
var
|
|
34
|
+
var buttonCva = cva(
|
|
35
|
+
"border rounded font-sans font-medium leading-[1.75] tracking-[.02857em]",
|
|
36
|
+
{
|
|
37
|
+
variants: {
|
|
38
|
+
color: {
|
|
39
|
+
neutral: "",
|
|
40
|
+
primary: "",
|
|
41
|
+
success: "",
|
|
42
|
+
warning: "",
|
|
43
|
+
error: ""
|
|
44
|
+
},
|
|
45
|
+
size: {
|
|
46
|
+
sm: "py-1 px-2.5 text-[.8125rem]",
|
|
47
|
+
md: "px-4 py-1.5 text-sm",
|
|
48
|
+
lg: "px-5 py-2 text-[.9375rem]"
|
|
49
|
+
},
|
|
50
|
+
variant: {
|
|
51
|
+
text: "border-transparent bg-transparent hover:text-white",
|
|
52
|
+
outlined: "",
|
|
53
|
+
contained: ""
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
compoundVariants: [
|
|
57
|
+
{
|
|
58
|
+
variant: "text",
|
|
59
|
+
color: "neutral",
|
|
60
|
+
class: [
|
|
61
|
+
"text-gray-400",
|
|
62
|
+
"hover:border-gray-400 hover:bg-gray-400",
|
|
63
|
+
"active:text-white active:border-gray-300 active:bg-gray-300",
|
|
64
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-gray-400"
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
variant: "text",
|
|
69
|
+
color: "primary",
|
|
70
|
+
class: [
|
|
71
|
+
"text-primary-500",
|
|
72
|
+
"hover:border-primary-400 hover:bg-primary-400",
|
|
73
|
+
"active:text-white active:border-primary-600 active:bg-primary-600",
|
|
74
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-primary-500"
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
variant: "text",
|
|
79
|
+
color: "success",
|
|
80
|
+
class: [
|
|
81
|
+
"text-success-500",
|
|
82
|
+
"hover:border-success-400 hover:bg-success-400",
|
|
83
|
+
"active:text-white active:border-success-600 active:bg-success-600",
|
|
84
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-success-500"
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
variant: "text",
|
|
89
|
+
color: "warning",
|
|
90
|
+
class: [
|
|
91
|
+
"text-warning-500",
|
|
92
|
+
"hover:border-warning-400 hover:bg-warning-400",
|
|
93
|
+
"active:text-white active:border-warning-600 active:bg-warning-600",
|
|
94
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-warning-500"
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
variant: "text",
|
|
99
|
+
color: "error",
|
|
100
|
+
class: [
|
|
101
|
+
"text-error-500",
|
|
102
|
+
"hover:border-error-400 hover:bg-error-400",
|
|
103
|
+
"active:text-white active:border-error-600 active:bg-error-600",
|
|
104
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-error-500"
|
|
105
|
+
]
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
variant: "outlined",
|
|
109
|
+
color: "neutral",
|
|
110
|
+
class: [
|
|
111
|
+
"text-gray-400 border-gray-400 bg-transparent",
|
|
112
|
+
"hover:bg-gray-500 hover:text-white",
|
|
113
|
+
"active:text-white active:bg-gray-300",
|
|
114
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-gray-400"
|
|
115
|
+
]
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
variant: "outlined",
|
|
119
|
+
color: "primary",
|
|
120
|
+
class: [
|
|
121
|
+
"text-primary-500 border-primary-500 bg-transparent",
|
|
122
|
+
"hover:bg-primary-400 hover:text-white",
|
|
123
|
+
"active:text-white active:bg-primary-600",
|
|
124
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-primary-500"
|
|
125
|
+
]
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
variant: "outlined",
|
|
129
|
+
color: "success",
|
|
130
|
+
class: [
|
|
131
|
+
"text-success-500 border-success-500 bg-transparent",
|
|
132
|
+
"hover:bg-success-400 hover:text-white",
|
|
133
|
+
"active:text-white active:bg-success-600",
|
|
134
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-success-500"
|
|
135
|
+
]
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
variant: "outlined",
|
|
139
|
+
color: "warning",
|
|
140
|
+
class: [
|
|
141
|
+
"text-warning-500 border-warning-500 bg-transparent",
|
|
142
|
+
"hover:bg-warning-400 hover:text-white",
|
|
143
|
+
"active:text-white active:bg-warning-600",
|
|
144
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-warning-500"
|
|
145
|
+
]
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
variant: "outlined",
|
|
149
|
+
color: "error",
|
|
150
|
+
class: [
|
|
151
|
+
"text-error-500 border-error-500 bg-transparent",
|
|
152
|
+
"hover:bg-error-400 hover:text-white",
|
|
153
|
+
"active:text-white active:bg-error-600",
|
|
154
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-error-500"
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
);
|
|
160
|
+
var Button_default = React3.forwardRef(function({
|
|
161
|
+
as,
|
|
162
|
+
color = "primary",
|
|
163
|
+
children,
|
|
164
|
+
size = "md",
|
|
165
|
+
variant = "text",
|
|
166
|
+
...restProps
|
|
167
|
+
}, ref) {
|
|
168
|
+
const Component = as || "button";
|
|
169
|
+
const buttonRootStyles = buttonCva({ size, variant, color });
|
|
170
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
171
|
+
className: buttonRootStyles,
|
|
172
|
+
ref,
|
|
173
|
+
...restProps,
|
|
174
|
+
children
|
|
175
|
+
});
|
|
176
|
+
});
|
|
177
|
+
var ThemeContext = React3__default.createContext({});
|
|
12
178
|
function getInitialTheme(defaultTheme) {
|
|
13
179
|
if (typeof window !== "undefined" && window.localStorage) {
|
|
14
180
|
const storageTheme = window.localStorage.getItem("theme");
|
|
@@ -19,7 +185,7 @@ function getInitialTheme(defaultTheme) {
|
|
|
19
185
|
return defaultTheme ?? "light";
|
|
20
186
|
}
|
|
21
187
|
function ThemeProvider({ children, defaultTheme, theme }) {
|
|
22
|
-
const [themeState, setThemeState] =
|
|
188
|
+
const [themeState, setThemeState] = React3__default.useState(
|
|
23
189
|
theme ? theme : getInitialTheme(defaultTheme)
|
|
24
190
|
);
|
|
25
191
|
function rawSetTheme(rawTheme) {
|
|
@@ -32,7 +198,7 @@ function ThemeProvider({ children, defaultTheme, theme }) {
|
|
|
32
198
|
localStorage.setItem("theme", rawTheme);
|
|
33
199
|
}
|
|
34
200
|
}
|
|
35
|
-
|
|
201
|
+
React3__default.useEffect(() => {
|
|
36
202
|
rawSetTheme(themeState);
|
|
37
203
|
}, [themeState]);
|
|
38
204
|
return /* @__PURE__ */ jsx(ThemeContext.Provider, {
|
|
@@ -42,6 +208,6 @@ function ThemeProvider({ children, defaultTheme, theme }) {
|
|
|
42
208
|
}
|
|
43
209
|
|
|
44
210
|
// src/hooks/useTheme/useTheme.tsx
|
|
45
|
-
var useTheme = () =>
|
|
211
|
+
var useTheme = () => React3__default.useContext(ThemeContext);
|
|
46
212
|
|
|
47
|
-
export { Button, ThemeContext, ThemeProvider, useTheme };
|
|
213
|
+
export { Avatar, Button_default as Button, ThemeContext, ThemeProvider, useTheme };
|
package/package.json
CHANGED
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
},
|
|
6
6
|
"description": "Szum-Tech design system with tailwindcss support",
|
|
7
7
|
"dependencies": {
|
|
8
|
+
"@heroicons/react": "^2.0.15",
|
|
9
|
+
"class-variance-authority": "^0.4.0",
|
|
8
10
|
"tailwindcss": "^3.2.4"
|
|
9
11
|
},
|
|
10
12
|
"devDependencies": {
|
|
@@ -95,7 +97,7 @@
|
|
|
95
97
|
},
|
|
96
98
|
"sideEffects": false,
|
|
97
99
|
"types": "./dist/index.d.ts",
|
|
98
|
-
"version": "1.
|
|
100
|
+
"version": "1.5.0",
|
|
99
101
|
"peerDependencies": {
|
|
100
102
|
"@tailwindcss/container-queries": "^0.1.0",
|
|
101
103
|
"react": "^18.2.0",
|
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
const screens = {
|
|
2
|
+
sm: "640px",
|
|
3
|
+
// => @media (min-width: 640px) { ... }
|
|
4
|
+
|
|
5
|
+
md: "768px",
|
|
6
|
+
// => @media (min-width: 768px) { ... }
|
|
7
|
+
|
|
8
|
+
lg: "1024px",
|
|
9
|
+
// => @media (min-width: 1024px) { ... }
|
|
10
|
+
|
|
11
|
+
xl: "1280px",
|
|
12
|
+
// => @media (min-width: 1280px) { ... }
|
|
13
|
+
|
|
14
|
+
"2xl": "1536px"
|
|
15
|
+
// => @media (min-width: 1536px) { ... }
|
|
16
|
+
};
|
|
17
|
+
|
|
1
18
|
/** @type {import('tailwindcss').Config} */
|
|
2
19
|
module.exports = {
|
|
3
20
|
darkMode: "class",
|
|
@@ -83,6 +100,7 @@ module.exports = {
|
|
|
83
100
|
"5xl": "3.75rem",
|
|
84
101
|
"6xl": "6rem"
|
|
85
102
|
},
|
|
103
|
+
screens,
|
|
86
104
|
extend: {
|
|
87
105
|
borderRadius: {
|
|
88
106
|
"1/2": "50%"
|
|
@@ -33,7 +33,7 @@ module.exports = plugin(function ({ addComponents }) {
|
|
|
33
33
|
"@apply font-sans text-sm font-normal leading-[1.43] tracking-[.01071em]": {}
|
|
34
34
|
},
|
|
35
35
|
".typography-button": {
|
|
36
|
-
"@apply font-sans text-sm font-medium leading-
|
|
36
|
+
"@apply font-sans text-sm font-medium leading-[1.75] tracking-[.02857em]": {}
|
|
37
37
|
},
|
|
38
38
|
".typography-caption": {
|
|
39
39
|
"@apply font-sans text-xs font-normal leading-[1.66] tracking-[.03333em]": {}
|