@szum-tech/design-system 1.2.0 → 1.4.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
CHANGED
|
@@ -1,20 +1,60 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
|
|
2
5
|
|
|
3
|
-
declare
|
|
6
|
+
declare const buttonCva: (props?: ({
|
|
7
|
+
color?: "neutral" | "primary" | "success" | "warning" | "error" | null | undefined;
|
|
8
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
9
|
+
variant?: "text" | "outlined" | "contained" | null | undefined;
|
|
10
|
+
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
11
|
+
|
|
12
|
+
declare type ButtonCvaProps = VariantProps<typeof buttonCva>;
|
|
13
|
+
declare type ButtonSizeType = NonNullable<ButtonCvaProps["size"]>;
|
|
14
|
+
declare type ButtonVariantType = NonNullable<ButtonCvaProps["variant"]>;
|
|
15
|
+
declare type ButtonColorType = NonNullable<ButtonCvaProps["color"]>;
|
|
16
|
+
|
|
17
|
+
declare type AsProp<C extends React.ElementType> = {
|
|
18
|
+
/**
|
|
19
|
+
* Defines HTML tag to be used for component
|
|
20
|
+
*/
|
|
21
|
+
as?: C;
|
|
22
|
+
};
|
|
23
|
+
declare type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
|
|
24
|
+
declare type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
|
|
25
|
+
|
|
26
|
+
declare type ButtonProp = {
|
|
27
|
+
/**
|
|
28
|
+
* Defines button color
|
|
29
|
+
* @default 'primary'
|
|
30
|
+
*/
|
|
31
|
+
color?: ButtonColorType;
|
|
32
|
+
/**
|
|
33
|
+
* Defines button variant
|
|
34
|
+
* @default 'text'
|
|
35
|
+
*/
|
|
36
|
+
variant?: ButtonVariantType;
|
|
37
|
+
/**
|
|
38
|
+
* Defines button size
|
|
39
|
+
* @default 'md'
|
|
40
|
+
*/
|
|
41
|
+
size?: ButtonSizeType;
|
|
42
|
+
};
|
|
43
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, string | number | symbol> & React.RefAttributes<unknown>>;
|
|
4
44
|
|
|
5
45
|
declare type ThemeType = "light" | "dark";
|
|
6
46
|
interface ThemeContextType {
|
|
7
47
|
theme: ThemeType;
|
|
8
|
-
setTheme:
|
|
48
|
+
setTheme: React__default.Dispatch<React__default.SetStateAction<ThemeType>>;
|
|
9
49
|
}
|
|
10
50
|
|
|
11
|
-
declare const ThemeContext:
|
|
51
|
+
declare const ThemeContext: React__default.Context<ThemeContextType>;
|
|
12
52
|
|
|
13
53
|
interface ThemeProviderProps {
|
|
14
54
|
/**
|
|
15
55
|
* Children Components using theming.
|
|
16
56
|
*/
|
|
17
|
-
children?:
|
|
57
|
+
children?: React__default.ReactNode;
|
|
18
58
|
/**
|
|
19
59
|
* Define the default theme which is set at the beginning if neither local storage nor media is defined.
|
|
20
60
|
*/
|
|
@@ -28,4 +68,4 @@ declare function ThemeProvider({ children, defaultTheme, theme }: ThemeProviderP
|
|
|
28
68
|
|
|
29
69
|
declare const useTheme: () => ThemeContextType;
|
|
30
70
|
|
|
31
|
-
export { Button, ThemeContext, ThemeContextType, ThemeProvider, ThemeProviderProps, ThemeType, useTheme };
|
|
71
|
+
export { _default as Button, ThemeContext, ThemeContextType, ThemeProvider, ThemeProviderProps, ThemeType, useTheme };
|
package/dist/index.js
CHANGED
|
@@ -2,21 +2,178 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var React3 = require('react');
|
|
6
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
5
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React2 = 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/Button/Button.tsx
|
|
33
|
+
var buttonCva = classVarianceAuthority.cva(
|
|
34
|
+
"border rounded font-sans font-medium leading-[1.75] tracking-[.02857em]",
|
|
35
|
+
{
|
|
36
|
+
variants: {
|
|
37
|
+
color: {
|
|
38
|
+
neutral: "",
|
|
39
|
+
primary: "",
|
|
40
|
+
success: "",
|
|
41
|
+
warning: "",
|
|
42
|
+
error: ""
|
|
43
|
+
},
|
|
44
|
+
size: {
|
|
45
|
+
sm: "py-1 px-2.5 text-[.8125rem]",
|
|
46
|
+
md: "px-4 py-1.5 text-sm",
|
|
47
|
+
lg: "px-5 py-2 text-[.9375rem]"
|
|
48
|
+
},
|
|
49
|
+
variant: {
|
|
50
|
+
text: "border-transparent bg-transparent hover:text-white",
|
|
51
|
+
outlined: "",
|
|
52
|
+
contained: ""
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
compoundVariants: [
|
|
56
|
+
{
|
|
57
|
+
variant: "text",
|
|
58
|
+
color: "neutral",
|
|
59
|
+
class: [
|
|
60
|
+
"text-gray-400",
|
|
61
|
+
"hover:border-gray-400 hover:bg-gray-400",
|
|
62
|
+
"active:text-white active:border-gray-300 active:bg-gray-300",
|
|
63
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-gray-400"
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
variant: "text",
|
|
68
|
+
color: "primary",
|
|
69
|
+
class: [
|
|
70
|
+
"text-primary-500",
|
|
71
|
+
"hover:border-primary-400 hover:bg-primary-400",
|
|
72
|
+
"active:text-white active:border-primary-600 active:bg-primary-600",
|
|
73
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-primary-500"
|
|
74
|
+
]
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
variant: "text",
|
|
78
|
+
color: "success",
|
|
79
|
+
class: [
|
|
80
|
+
"text-success-500",
|
|
81
|
+
"hover:border-success-400 hover:bg-success-400",
|
|
82
|
+
"active:text-white active:border-success-600 active:bg-success-600",
|
|
83
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-success-500"
|
|
84
|
+
]
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
variant: "text",
|
|
88
|
+
color: "warning",
|
|
89
|
+
class: [
|
|
90
|
+
"text-warning-500",
|
|
91
|
+
"hover:border-warning-400 hover:bg-warning-400",
|
|
92
|
+
"active:text-white active:border-warning-600 active:bg-warning-600",
|
|
93
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-warning-500"
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
variant: "text",
|
|
98
|
+
color: "error",
|
|
99
|
+
class: [
|
|
100
|
+
"text-error-500",
|
|
101
|
+
"hover:border-error-400 hover:bg-error-400",
|
|
102
|
+
"active:text-white active:border-error-600 active:bg-error-600",
|
|
103
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-error-500"
|
|
104
|
+
]
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
variant: "outlined",
|
|
108
|
+
color: "neutral",
|
|
109
|
+
class: [
|
|
110
|
+
"text-gray-400 border-gray-400 bg-transparent",
|
|
111
|
+
"hover:bg-gray-500 hover:text-white",
|
|
112
|
+
"active:text-white active:bg-gray-300",
|
|
113
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-gray-400"
|
|
114
|
+
]
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
variant: "outlined",
|
|
118
|
+
color: "primary",
|
|
119
|
+
class: [
|
|
120
|
+
"text-primary-500 border-primary-500 bg-transparent",
|
|
121
|
+
"hover:bg-primary-400 hover:text-white",
|
|
122
|
+
"active:text-white active:bg-primary-600",
|
|
123
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-primary-500"
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
variant: "outlined",
|
|
128
|
+
color: "success",
|
|
129
|
+
class: [
|
|
130
|
+
"text-success-500 border-success-500 bg-transparent",
|
|
131
|
+
"hover:bg-success-400 hover:text-white",
|
|
132
|
+
"active:text-white active:bg-success-600",
|
|
133
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-success-500"
|
|
134
|
+
]
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
variant: "outlined",
|
|
138
|
+
color: "warning",
|
|
139
|
+
class: [
|
|
140
|
+
"text-warning-500 border-warning-500 bg-transparent",
|
|
141
|
+
"hover:bg-warning-400 hover:text-white",
|
|
142
|
+
"active:text-white active:bg-warning-600",
|
|
143
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-warning-500"
|
|
144
|
+
]
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
variant: "outlined",
|
|
148
|
+
color: "error",
|
|
149
|
+
class: [
|
|
150
|
+
"text-error-500 border-error-500 bg-transparent",
|
|
151
|
+
"hover:bg-error-400 hover:text-white",
|
|
152
|
+
"active:text-white active:bg-error-600",
|
|
153
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-error-500"
|
|
154
|
+
]
|
|
155
|
+
}
|
|
156
|
+
]
|
|
157
|
+
}
|
|
158
|
+
);
|
|
159
|
+
var Button_default = React3__namespace.forwardRef(function({
|
|
160
|
+
as,
|
|
161
|
+
color = "primary",
|
|
162
|
+
children,
|
|
163
|
+
size = "md",
|
|
164
|
+
variant = "text",
|
|
165
|
+
...restProps
|
|
166
|
+
}, ref) {
|
|
167
|
+
const Component = as || "button";
|
|
168
|
+
const buttonRootStyles = buttonCva({ size, variant, color });
|
|
169
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Component, {
|
|
170
|
+
className: buttonRootStyles + " ",
|
|
171
|
+
ref,
|
|
172
|
+
...restProps,
|
|
173
|
+
children
|
|
17
174
|
});
|
|
18
|
-
}
|
|
19
|
-
var ThemeContext =
|
|
175
|
+
});
|
|
176
|
+
var ThemeContext = React3__default["default"].createContext({});
|
|
20
177
|
function getInitialTheme(defaultTheme) {
|
|
21
178
|
if (typeof window !== "undefined" && window.localStorage) {
|
|
22
179
|
const storageTheme = window.localStorage.getItem("theme");
|
|
@@ -27,7 +184,7 @@ function getInitialTheme(defaultTheme) {
|
|
|
27
184
|
return defaultTheme ?? "light";
|
|
28
185
|
}
|
|
29
186
|
function ThemeProvider({ children, defaultTheme, theme }) {
|
|
30
|
-
const [themeState, setThemeState] =
|
|
187
|
+
const [themeState, setThemeState] = React3__default["default"].useState(
|
|
31
188
|
theme ? theme : getInitialTheme(defaultTheme)
|
|
32
189
|
);
|
|
33
190
|
function rawSetTheme(rawTheme) {
|
|
@@ -40,7 +197,7 @@ function ThemeProvider({ children, defaultTheme, theme }) {
|
|
|
40
197
|
localStorage.setItem("theme", rawTheme);
|
|
41
198
|
}
|
|
42
199
|
}
|
|
43
|
-
|
|
200
|
+
React3__default["default"].useEffect(() => {
|
|
44
201
|
rawSetTheme(themeState);
|
|
45
202
|
}, [themeState]);
|
|
46
203
|
return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, {
|
|
@@ -50,9 +207,9 @@ function ThemeProvider({ children, defaultTheme, theme }) {
|
|
|
50
207
|
}
|
|
51
208
|
|
|
52
209
|
// src/hooks/useTheme/useTheme.tsx
|
|
53
|
-
var useTheme = () =>
|
|
210
|
+
var useTheme = () => React3__default["default"].useContext(ThemeContext);
|
|
54
211
|
|
|
55
|
-
exports.Button =
|
|
212
|
+
exports.Button = Button_default;
|
|
56
213
|
exports.ThemeContext = ThemeContext;
|
|
57
214
|
exports.ThemeProvider = ThemeProvider;
|
|
58
215
|
exports.useTheme = useTheme;
|
package/dist/index.mjs
CHANGED
|
@@ -1,14 +1,153 @@
|
|
|
1
|
+
import * as React3 from 'react';
|
|
2
|
+
import React3__default from 'react';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
1
4
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import React2 from 'react';
|
|
3
5
|
|
|
4
|
-
// src/components/
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
// src/components/Button/Button.tsx
|
|
7
|
+
var buttonCva = cva(
|
|
8
|
+
"border rounded font-sans font-medium leading-[1.75] tracking-[.02857em]",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
color: {
|
|
12
|
+
neutral: "",
|
|
13
|
+
primary: "",
|
|
14
|
+
success: "",
|
|
15
|
+
warning: "",
|
|
16
|
+
error: ""
|
|
17
|
+
},
|
|
18
|
+
size: {
|
|
19
|
+
sm: "py-1 px-2.5 text-[.8125rem]",
|
|
20
|
+
md: "px-4 py-1.5 text-sm",
|
|
21
|
+
lg: "px-5 py-2 text-[.9375rem]"
|
|
22
|
+
},
|
|
23
|
+
variant: {
|
|
24
|
+
text: "border-transparent bg-transparent hover:text-white",
|
|
25
|
+
outlined: "",
|
|
26
|
+
contained: ""
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
compoundVariants: [
|
|
30
|
+
{
|
|
31
|
+
variant: "text",
|
|
32
|
+
color: "neutral",
|
|
33
|
+
class: [
|
|
34
|
+
"text-gray-400",
|
|
35
|
+
"hover:border-gray-400 hover:bg-gray-400",
|
|
36
|
+
"active:text-white active:border-gray-300 active:bg-gray-300",
|
|
37
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-gray-400"
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
variant: "text",
|
|
42
|
+
color: "primary",
|
|
43
|
+
class: [
|
|
44
|
+
"text-primary-500",
|
|
45
|
+
"hover:border-primary-400 hover:bg-primary-400",
|
|
46
|
+
"active:text-white active:border-primary-600 active:bg-primary-600",
|
|
47
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-primary-500"
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
variant: "text",
|
|
52
|
+
color: "success",
|
|
53
|
+
class: [
|
|
54
|
+
"text-success-500",
|
|
55
|
+
"hover:border-success-400 hover:bg-success-400",
|
|
56
|
+
"active:text-white active:border-success-600 active:bg-success-600",
|
|
57
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-success-500"
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
variant: "text",
|
|
62
|
+
color: "warning",
|
|
63
|
+
class: [
|
|
64
|
+
"text-warning-500",
|
|
65
|
+
"hover:border-warning-400 hover:bg-warning-400",
|
|
66
|
+
"active:text-white active:border-warning-600 active:bg-warning-600",
|
|
67
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-warning-500"
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
variant: "text",
|
|
72
|
+
color: "error",
|
|
73
|
+
class: [
|
|
74
|
+
"text-error-500",
|
|
75
|
+
"hover:border-error-400 hover:bg-error-400",
|
|
76
|
+
"active:text-white active:border-error-600 active:bg-error-600",
|
|
77
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-error-500"
|
|
78
|
+
]
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
variant: "outlined",
|
|
82
|
+
color: "neutral",
|
|
83
|
+
class: [
|
|
84
|
+
"text-gray-400 border-gray-400 bg-transparent",
|
|
85
|
+
"hover:bg-gray-500 hover:text-white",
|
|
86
|
+
"active:text-white active:bg-gray-300",
|
|
87
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-gray-400"
|
|
88
|
+
]
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
variant: "outlined",
|
|
92
|
+
color: "primary",
|
|
93
|
+
class: [
|
|
94
|
+
"text-primary-500 border-primary-500 bg-transparent",
|
|
95
|
+
"hover:bg-primary-400 hover:text-white",
|
|
96
|
+
"active:text-white active:bg-primary-600",
|
|
97
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-primary-500"
|
|
98
|
+
]
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
variant: "outlined",
|
|
102
|
+
color: "success",
|
|
103
|
+
class: [
|
|
104
|
+
"text-success-500 border-success-500 bg-transparent",
|
|
105
|
+
"hover:bg-success-400 hover:text-white",
|
|
106
|
+
"active:text-white active:bg-success-600",
|
|
107
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-success-500"
|
|
108
|
+
]
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
variant: "outlined",
|
|
112
|
+
color: "warning",
|
|
113
|
+
class: [
|
|
114
|
+
"text-warning-500 border-warning-500 bg-transparent",
|
|
115
|
+
"hover:bg-warning-400 hover:text-white",
|
|
116
|
+
"active:text-white active:bg-warning-600",
|
|
117
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-warning-500"
|
|
118
|
+
]
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
variant: "outlined",
|
|
122
|
+
color: "error",
|
|
123
|
+
class: [
|
|
124
|
+
"text-error-500 border-error-500 bg-transparent",
|
|
125
|
+
"hover:bg-error-400 hover:text-white",
|
|
126
|
+
"active:text-white active:bg-error-600",
|
|
127
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-error-500"
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
);
|
|
133
|
+
var Button_default = React3.forwardRef(function({
|
|
134
|
+
as,
|
|
135
|
+
color = "primary",
|
|
136
|
+
children,
|
|
137
|
+
size = "md",
|
|
138
|
+
variant = "text",
|
|
139
|
+
...restProps
|
|
140
|
+
}, ref) {
|
|
141
|
+
const Component = as || "button";
|
|
142
|
+
const buttonRootStyles = buttonCva({ size, variant, color });
|
|
143
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
144
|
+
className: buttonRootStyles + " ",
|
|
145
|
+
ref,
|
|
146
|
+
...restProps,
|
|
147
|
+
children
|
|
9
148
|
});
|
|
10
|
-
}
|
|
11
|
-
var ThemeContext =
|
|
149
|
+
});
|
|
150
|
+
var ThemeContext = React3__default.createContext({});
|
|
12
151
|
function getInitialTheme(defaultTheme) {
|
|
13
152
|
if (typeof window !== "undefined" && window.localStorage) {
|
|
14
153
|
const storageTheme = window.localStorage.getItem("theme");
|
|
@@ -19,7 +158,7 @@ function getInitialTheme(defaultTheme) {
|
|
|
19
158
|
return defaultTheme ?? "light";
|
|
20
159
|
}
|
|
21
160
|
function ThemeProvider({ children, defaultTheme, theme }) {
|
|
22
|
-
const [themeState, setThemeState] =
|
|
161
|
+
const [themeState, setThemeState] = React3__default.useState(
|
|
23
162
|
theme ? theme : getInitialTheme(defaultTheme)
|
|
24
163
|
);
|
|
25
164
|
function rawSetTheme(rawTheme) {
|
|
@@ -32,7 +171,7 @@ function ThemeProvider({ children, defaultTheme, theme }) {
|
|
|
32
171
|
localStorage.setItem("theme", rawTheme);
|
|
33
172
|
}
|
|
34
173
|
}
|
|
35
|
-
|
|
174
|
+
React3__default.useEffect(() => {
|
|
36
175
|
rawSetTheme(themeState);
|
|
37
176
|
}, [themeState]);
|
|
38
177
|
return /* @__PURE__ */ jsx(ThemeContext.Provider, {
|
|
@@ -42,6 +181,6 @@ function ThemeProvider({ children, defaultTheme, theme }) {
|
|
|
42
181
|
}
|
|
43
182
|
|
|
44
183
|
// src/hooks/useTheme/useTheme.tsx
|
|
45
|
-
var useTheme = () =>
|
|
184
|
+
var useTheme = () => React3__default.useContext(ThemeContext);
|
|
46
185
|
|
|
47
|
-
export { Button, ThemeContext, ThemeProvider, useTheme };
|
|
186
|
+
export { Button_default as Button, ThemeContext, ThemeProvider, useTheme };
|
package/package.json
CHANGED
|
@@ -4,6 +4,10 @@
|
|
|
4
4
|
"url": "https://github.com/JanSzewczyk/design-system/issues"
|
|
5
5
|
},
|
|
6
6
|
"description": "Szum-Tech design system with tailwindcss support",
|
|
7
|
+
"dependencies": {
|
|
8
|
+
"class-variance-authority": "^0.4.0",
|
|
9
|
+
"tailwindcss": "^3.2.4"
|
|
10
|
+
},
|
|
7
11
|
"devDependencies": {
|
|
8
12
|
"@babel/core": "^7.19.6",
|
|
9
13
|
"@semantic-release/changelog": "^6.0.1",
|
|
@@ -17,6 +21,7 @@
|
|
|
17
21
|
"@storybook/addon-essentials": "^6.5.13",
|
|
18
22
|
"@storybook/addon-interactions": "^6.5.13",
|
|
19
23
|
"@storybook/addon-links": "^6.5.13",
|
|
24
|
+
"@storybook/addon-postcss": "^2.0.0",
|
|
20
25
|
"@storybook/addons": "^6.5.13",
|
|
21
26
|
"@storybook/builder-webpack5": "^6.5.13",
|
|
22
27
|
"@storybook/core-events": "^6.5.13",
|
|
@@ -45,7 +50,6 @@
|
|
|
45
50
|
"semantic-release": "^19.0.5",
|
|
46
51
|
"storybook-dark-mode": "^1.1.2",
|
|
47
52
|
"tailwind-scrollbar": "^2.0.1",
|
|
48
|
-
"tailwindcss": "^3.2.1",
|
|
49
53
|
"tsup": "^6.3.0",
|
|
50
54
|
"typescript": "^4.8.4"
|
|
51
55
|
},
|
|
@@ -79,10 +83,10 @@
|
|
|
79
83
|
"url": "git+https://github.com/JanSzewczyk/design-system.git"
|
|
80
84
|
},
|
|
81
85
|
"scripts": {
|
|
82
|
-
"build": "tsup src/index.tsx --format esm,cjs --dts --treeshake --external react",
|
|
86
|
+
"build": "tsup src/index.tsx --format esm,cjs --dts --treeshake --external react,react-dom",
|
|
83
87
|
"clean": "rm -rf node_modules && rm -rf dist",
|
|
84
88
|
"dev": "concurrently \"npm run dev:css\" \"npm run dev:build\"",
|
|
85
|
-
"dev:build": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
|
|
89
|
+
"dev:build": "tsup src/index.tsx --format esm,cjs --watch --dts --external react,react-dom",
|
|
86
90
|
"dev:css": "tailwindcss -w -i tailwindcss/global.css -o src/styles/default.css",
|
|
87
91
|
"storybook": "start-storybook -p 6006",
|
|
88
92
|
"semantic-release": "semantic-release",
|
|
@@ -92,11 +96,11 @@
|
|
|
92
96
|
},
|
|
93
97
|
"sideEffects": false,
|
|
94
98
|
"types": "./dist/index.d.ts",
|
|
95
|
-
"version": "1.
|
|
99
|
+
"version": "1.4.0",
|
|
96
100
|
"peerDependencies": {
|
|
97
101
|
"@tailwindcss/container-queries": "^0.1.0",
|
|
98
102
|
"react": "^18.2.0",
|
|
99
103
|
"tailwind-scrollbar": "^2.0.1",
|
|
100
|
-
"tailwindcss": "^3.2.
|
|
104
|
+
"tailwindcss": "^3.2.4"
|
|
101
105
|
}
|
|
102
106
|
}
|
|
@@ -1,81 +1,110 @@
|
|
|
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",
|
|
4
21
|
theme: {
|
|
22
|
+
colors: {
|
|
23
|
+
black: "rgb(var(--black) / <alpha-value>)",
|
|
24
|
+
error: {
|
|
25
|
+
100: "rgb(var(--error-100) / <alpha-value>)",
|
|
26
|
+
200: "rgb(var(--error-200) / <alpha-value>)",
|
|
27
|
+
300: "rgb(var(--error-300) / <alpha-value>)",
|
|
28
|
+
400: "rgb(var(--error-400) / <alpha-value>)",
|
|
29
|
+
500: "rgb(var(--error-500) / <alpha-value>)",
|
|
30
|
+
600: "rgb(var(--error-600) / <alpha-value>)",
|
|
31
|
+
700: "rgb(var(--error-700) / <alpha-value>)",
|
|
32
|
+
800: "rgb(var(--error-800) / <alpha-value>)",
|
|
33
|
+
900: "rgb(var(--error-900) / <alpha-value>)"
|
|
34
|
+
},
|
|
35
|
+
gray: {
|
|
36
|
+
100: "rgb(var(--gray-100) / <alpha-value>)",
|
|
37
|
+
200: "rgb(var(--gray-200) / <alpha-value>)",
|
|
38
|
+
300: "rgb(var(--gray-300) / <alpha-value>)",
|
|
39
|
+
400: "rgb(var(--gray-400) / <alpha-value>)",
|
|
40
|
+
500: "rgb(var(--gray-500) / <alpha-value>)",
|
|
41
|
+
600: "rgb(var(--gray-600) / <alpha-value>)",
|
|
42
|
+
700: "rgb(var(--gray-700) / <alpha-value>)",
|
|
43
|
+
800: "rgb(var(--gray-800) / <alpha-value>)",
|
|
44
|
+
900: "rgb(var(--gray-900) / <alpha-value>)"
|
|
45
|
+
},
|
|
46
|
+
primary: {
|
|
47
|
+
100: "rgb(var(--primary-100) / <alpha-value>)",
|
|
48
|
+
200: "rgb(var(--primary-200) / <alpha-value>)",
|
|
49
|
+
300: "rgb(var(--primary-300) / <alpha-value>)",
|
|
50
|
+
400: "rgb(var(--primary-400) / <alpha-value>)",
|
|
51
|
+
500: "rgb(var(--primary-500) / <alpha-value>)",
|
|
52
|
+
600: "rgb(var(--primary-600) / <alpha-value>)",
|
|
53
|
+
700: "rgb(var(--primary-700) / <alpha-value>)",
|
|
54
|
+
800: "rgb(var(--primary-800) / <alpha-value>)",
|
|
55
|
+
900: "rgb(var(--primary-900) / <alpha-value>)"
|
|
56
|
+
},
|
|
57
|
+
success: {
|
|
58
|
+
100: "rgb(var(--success-100) / <alpha-value>)",
|
|
59
|
+
200: "rgb(var(--success-200) / <alpha-value>)",
|
|
60
|
+
300: "rgb(var(--success-300) / <alpha-value>)",
|
|
61
|
+
400: "rgb(var(--success-400) / <alpha-value>)",
|
|
62
|
+
500: "rgb(var(--success-500) / <alpha-value>)",
|
|
63
|
+
600: "rgb(var(--success-600) / <alpha-value>)",
|
|
64
|
+
700: "rgb(var(--success-700) / <alpha-value>)",
|
|
65
|
+
800: "rgb(var(--success-800) / <alpha-value>)",
|
|
66
|
+
900: "rgb(var(--success-900) / <alpha-value>)"
|
|
67
|
+
},
|
|
68
|
+
transparent: "transparent",
|
|
69
|
+
typography: {
|
|
70
|
+
DEFAULT: "rgb(var(--text-color) / <alpha-value>)",
|
|
71
|
+
primary: "rgb(var(--text-color) / 1)",
|
|
72
|
+
secondary: "rgb(var(--text-color) / 0.60)",
|
|
73
|
+
disabled: "rgb(var(--text-color) / 0.43)"
|
|
74
|
+
},
|
|
75
|
+
warning: {
|
|
76
|
+
100: "rgb(var(--warning-100) / <alpha-value>)",
|
|
77
|
+
200: "rgb(var(--warning-200) / <alpha-value>)",
|
|
78
|
+
300: "rgb(var(--warning-300) / <alpha-value>)",
|
|
79
|
+
400: "rgb(var(--warning-400) / <alpha-value>)",
|
|
80
|
+
500: "rgb(var(--warning-500) / <alpha-value>)",
|
|
81
|
+
600: "rgb(var(--warning-600) / <alpha-value>)",
|
|
82
|
+
700: "rgb(var(--warning-700) / <alpha-value>)",
|
|
83
|
+
800: "rgb(var(--warning-800) / <alpha-value>)",
|
|
84
|
+
900: "rgb(var(--warning-900) / <alpha-value>)"
|
|
85
|
+
},
|
|
86
|
+
white: "rgb(var(--white) / <alpha-value>)"
|
|
87
|
+
},
|
|
88
|
+
fontFamily: {
|
|
89
|
+
sans: ["'Open Sans', sans-serif"],
|
|
90
|
+
code: ["'JetBrains Mono', monospace"]
|
|
91
|
+
},
|
|
92
|
+
fontSize: {
|
|
93
|
+
xs: "0.75rem",
|
|
94
|
+
sm: "0.875rem",
|
|
95
|
+
base: "1rem",
|
|
96
|
+
xl: "1.25rem",
|
|
97
|
+
"2xl": "1.5rem",
|
|
98
|
+
"3xl": "2.125rem",
|
|
99
|
+
"4xl": "3rem",
|
|
100
|
+
"5xl": "3.75rem",
|
|
101
|
+
"6xl": "6rem"
|
|
102
|
+
},
|
|
103
|
+
screens,
|
|
5
104
|
extend: {
|
|
6
105
|
borderRadius: {
|
|
7
106
|
"1/2": "50%"
|
|
8
107
|
},
|
|
9
|
-
colors: {
|
|
10
|
-
black: "rgb(var(--black) / <alpha-value>)",
|
|
11
|
-
error: {
|
|
12
|
-
100: "rgb(var(--error-100) / <alpha-value>)",
|
|
13
|
-
200: "rgb(var(--error-200) / <alpha-value>)",
|
|
14
|
-
300: "rgb(var(--error-300) / <alpha-value>)",
|
|
15
|
-
400: "rgb(var(--error-400) / <alpha-value>)",
|
|
16
|
-
500: "rgb(var(--error-500) / <alpha-value>)",
|
|
17
|
-
600: "rgb(var(--error-600) / <alpha-value>)",
|
|
18
|
-
700: "rgb(var(--error-700) / <alpha-value>)",
|
|
19
|
-
800: "rgb(var(--error-800) / <alpha-value>)",
|
|
20
|
-
900: "rgb(var(--error-900) / <alpha-value>)"
|
|
21
|
-
},
|
|
22
|
-
gray: {
|
|
23
|
-
100: "rgb(var(--gray-100) / <alpha-value>)",
|
|
24
|
-
200: "rgb(var(--gray-200) / <alpha-value>)",
|
|
25
|
-
300: "rgb(var(--gray-300) / <alpha-value>)",
|
|
26
|
-
400: "rgb(var(--gray-400) / <alpha-value>)",
|
|
27
|
-
500: "rgb(var(--gray-500) / <alpha-value>)",
|
|
28
|
-
600: "rgb(var(--gray-600) / <alpha-value>)",
|
|
29
|
-
700: "rgb(var(--gray-700) / <alpha-value>)",
|
|
30
|
-
800: "rgb(var(--gray-800) / <alpha-value>)",
|
|
31
|
-
900: "rgb(var(--gray-900) / <alpha-value>)"
|
|
32
|
-
},
|
|
33
|
-
primary: {
|
|
34
|
-
100: "rgb(var(--primary-100) / <alpha-value>)",
|
|
35
|
-
200: "rgb(var(--primary-200) / <alpha-value>)",
|
|
36
|
-
300: "rgb(var(--primary-300) / <alpha-value>)",
|
|
37
|
-
400: "rgb(var(--primary-400) / <alpha-value>)",
|
|
38
|
-
500: "rgb(var(--primary-500) / <alpha-value>)",
|
|
39
|
-
600: "rgb(var(--primary-600) / <alpha-value>)",
|
|
40
|
-
700: "rgb(var(--primary-700) / <alpha-value>)",
|
|
41
|
-
800: "rgb(var(--primary-800) / <alpha-value>)",
|
|
42
|
-
900: "rgb(var(--primary-900) / <alpha-value>)"
|
|
43
|
-
},
|
|
44
|
-
success: {
|
|
45
|
-
100: "rgb(var(--success-100) / <alpha-value>)",
|
|
46
|
-
200: "rgb(var(--success-200) / <alpha-value>)",
|
|
47
|
-
300: "rgb(var(--success-300) / <alpha-value>)",
|
|
48
|
-
400: "rgb(var(--success-400) / <alpha-value>)",
|
|
49
|
-
500: "rgb(var(--success-500) / <alpha-value>)",
|
|
50
|
-
600: "rgb(var(--success-600) / <alpha-value>)",
|
|
51
|
-
700: "rgb(var(--success-700) / <alpha-value>)",
|
|
52
|
-
800: "rgb(var(--success-800) / <alpha-value>)",
|
|
53
|
-
900: "rgb(var(--success-900) / <alpha-value>)"
|
|
54
|
-
},
|
|
55
|
-
transparent: "transparent",
|
|
56
|
-
typography: {
|
|
57
|
-
DEFAULT: "rgb(var(--text-color) / <alpha-value>)",
|
|
58
|
-
primary: "rgb(var(--text-color) / 1)",
|
|
59
|
-
secondary: "rgb(var(--text-color) / 0.60)",
|
|
60
|
-
disabled: "rgb(var(--text-color) / 0.43)"
|
|
61
|
-
},
|
|
62
|
-
warning: {
|
|
63
|
-
100: "rgb(var(--warning-100) / <alpha-value>)",
|
|
64
|
-
200: "rgb(var(--warning-200) / <alpha-value>)",
|
|
65
|
-
300: "rgb(var(--warning-300) / <alpha-value>)",
|
|
66
|
-
400: "rgb(var(--warning-400) / <alpha-value>)",
|
|
67
|
-
500: "rgb(var(--warning-500) / <alpha-value>)",
|
|
68
|
-
600: "rgb(var(--warning-600) / <alpha-value>)",
|
|
69
|
-
700: "rgb(var(--warning-700) / <alpha-value>)",
|
|
70
|
-
800: "rgb(var(--warning-800) / <alpha-value>)",
|
|
71
|
-
900: "rgb(var(--warning-900) / <alpha-value>)"
|
|
72
|
-
},
|
|
73
|
-
white: "rgb(var(--white) / <alpha-value>)"
|
|
74
|
-
},
|
|
75
|
-
fontFamily: {
|
|
76
|
-
sans: ["'Open Sans', sans-serif"],
|
|
77
|
-
code: ["'JetBrains Mono', monospace"]
|
|
78
|
-
},
|
|
79
108
|
letterSpacing: {
|
|
80
109
|
1: "0.25rem",
|
|
81
110
|
2: "0.5rem",
|
|
@@ -90,6 +119,7 @@ module.exports = {
|
|
|
90
119
|
plugins: [
|
|
91
120
|
require("@tailwindcss/container-queries"),
|
|
92
121
|
require("tailwind-scrollbar"),
|
|
93
|
-
require("./plugins/components")
|
|
122
|
+
require("./plugins/components/scroll"),
|
|
123
|
+
require("./plugins/components/typography")
|
|
94
124
|
]
|
|
95
125
|
};
|
|
File without changes
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
const plugin = require("tailwindcss/plugin");
|
|
2
|
+
|
|
3
|
+
module.exports = plugin(function ({ addComponents }) {
|
|
4
|
+
addComponents({
|
|
5
|
+
".typography-heading-1": {
|
|
6
|
+
"@apply font-sans text-6xl font-light leading-relaxed -tracking-[.01562em]": {}
|
|
7
|
+
},
|
|
8
|
+
".typography-heading-2": {
|
|
9
|
+
"@apply leading-[1.2] font-sans text-5xl font-light -tracking-[.00833em]": {}
|
|
10
|
+
},
|
|
11
|
+
".typography-heading-3": {
|
|
12
|
+
"@apply font-sans text-4xl font-normal leading-[1.167] tracking-normal": {}
|
|
13
|
+
},
|
|
14
|
+
".typography-heading-4": {
|
|
15
|
+
"@apply font-sans text-3xl font-normal leading-[1.235] tracking-[.00735em]": {}
|
|
16
|
+
},
|
|
17
|
+
".typography-heading-5": {
|
|
18
|
+
"@apply font-sans text-2xl font-normal leading-[1.334] tracking-normal": {}
|
|
19
|
+
},
|
|
20
|
+
".typography-heading-6": {
|
|
21
|
+
"@apply font-sans text-xl font-normal font-medium leading-[1.6] tracking-[.0075em]": {}
|
|
22
|
+
},
|
|
23
|
+
".typography-subtitle-1": {
|
|
24
|
+
"@apply font-sans text-base leading-7 tracking-[.00938em]": {}
|
|
25
|
+
},
|
|
26
|
+
".typography-subtitle-2": {
|
|
27
|
+
"@apply font-sans text-sm font-medium leading-[1.57] tracking-[.00714em]": {}
|
|
28
|
+
},
|
|
29
|
+
".typography-body-1": {
|
|
30
|
+
"@apply font-sans text-base font-normal leading-normal tracking-[.00938em]": {}
|
|
31
|
+
},
|
|
32
|
+
".typography-body-2": {
|
|
33
|
+
"@apply font-sans text-sm font-normal leading-[1.43] tracking-[.01071em]": {}
|
|
34
|
+
},
|
|
35
|
+
".typography-button": {
|
|
36
|
+
"@apply font-sans text-sm font-medium leading-[1.75] tracking-[.02857em]": {}
|
|
37
|
+
},
|
|
38
|
+
".typography-caption": {
|
|
39
|
+
"@apply font-sans text-xs font-normal leading-[1.66] tracking-[.03333em]": {}
|
|
40
|
+
},
|
|
41
|
+
".typography-overline": {
|
|
42
|
+
"@apply font-sans text-xs font-normal uppercase leading-[2.66] tracking-[.08333em]": {}
|
|
43
|
+
},
|
|
44
|
+
".typography-code": {
|
|
45
|
+
"@apply font-code text-base font-bold leading-5 tracking-wide": {}
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
});
|