@szymonpiatek/designsystem 0.0.2

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.
Files changed (7) hide show
  1. package/dist/index.cjs +256 -0
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.d.cts +69 -0
  4. package/dist/index.d.ts +69 -0
  5. package/dist/index.js +244 -0
  6. package/dist/index.js.map +1 -0
  7. package/package.json +103 -0
package/dist/index.cjs ADDED
@@ -0,0 +1,256 @@
1
+ 'use strict';
2
+
3
+ var react$1 = require('react');
4
+ var styles = require('@mui/material/styles');
5
+ var react = require('@emotion/react');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
+ var CssBaseline = require('@mui/material/CssBaseline');
8
+
9
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
+
11
+ var CssBaseline__default = /*#__PURE__*/_interopDefault(CssBaseline);
12
+
13
+ // src/components/atoms/buttons/Button/Button.tsx
14
+ var spin = react.keyframes`
15
+ from { transform: rotate(0deg); }
16
+ to { transform: rotate(360deg); }
17
+ `;
18
+ var sizeMap = {
19
+ sm: { padding: "0.25rem 0.75rem", fontSize: "0.75rem", gap: "0.25rem" },
20
+ md: { padding: "0.5rem 1.25rem", fontSize: "0.875rem", gap: "0.375rem" },
21
+ lg: { padding: "0.75rem 1.75rem", fontSize: "1rem", gap: "0.5rem" }
22
+ };
23
+ var variantStyles = (theme, variant) => {
24
+ switch (variant) {
25
+ case "primary":
26
+ return {
27
+ backgroundColor: theme.palette.primary.main,
28
+ color: theme.palette.primary.contrastText,
29
+ "&:hover:not(:disabled)": { backgroundColor: theme.palette.primary.dark },
30
+ "&:active:not(:disabled)": { filter: "brightness(0.92)" }
31
+ };
32
+ case "secondary":
33
+ return {
34
+ backgroundColor: theme.palette.secondary.main,
35
+ color: theme.palette.secondary.contrastText,
36
+ "&:hover:not(:disabled)": { backgroundColor: theme.palette.secondary.dark },
37
+ "&:active:not(:disabled)": { filter: "brightness(0.92)" }
38
+ };
39
+ case "ghost":
40
+ return {
41
+ backgroundColor: "transparent",
42
+ color: theme.palette.primary.main,
43
+ border: `1px solid ${theme.palette.primary.main}`,
44
+ "&:hover:not(:disabled)": { backgroundColor: styles.alpha(theme.palette.primary.main, 0.08) },
45
+ "&:active:not(:disabled)": { backgroundColor: styles.alpha(theme.palette.primary.main, 0.16) }
46
+ };
47
+ case "danger":
48
+ return {
49
+ backgroundColor: theme.palette.error.main,
50
+ color: theme.palette.error.contrastText,
51
+ "&:hover:not(:disabled)": { backgroundColor: theme.palette.error.dark },
52
+ "&:active:not(:disabled)": { filter: "brightness(0.92)" }
53
+ };
54
+ default:
55
+ return {};
56
+ }
57
+ };
58
+ var StyledButton = styles.styled("button")(
59
+ ({ theme, $variant, $size, $fullWidth }) => ({
60
+ appearance: "none",
61
+ border: "none",
62
+ cursor: "pointer",
63
+ display: "inline-flex",
64
+ alignItems: "center",
65
+ justifyContent: "center",
66
+ position: "relative",
67
+ borderRadius: theme.shape.borderRadius,
68
+ fontFamily: theme.typography.fontFamily,
69
+ fontWeight: 600,
70
+ lineHeight: 1.5,
71
+ textDecoration: "none",
72
+ transition: "background-color 150ms ease, box-shadow 150ms ease, border-color 150ms ease",
73
+ width: $fullWidth ? "100%" : "auto",
74
+ ...sizeMap[$size],
75
+ ...variantStyles(theme, $variant),
76
+ "&:focus-visible": {
77
+ outline: `3px solid ${theme.palette.primary.main}`,
78
+ outlineOffset: "2px"
79
+ },
80
+ "&:disabled": {
81
+ backgroundColor: $variant === "ghost" ? "transparent" : theme.palette.action.disabledBackground,
82
+ borderColor: $variant === "ghost" ? theme.palette.action.disabled : "transparent",
83
+ color: theme.palette.action.disabled,
84
+ cursor: "not-allowed",
85
+ pointerEvents: "none"
86
+ }
87
+ })
88
+ );
89
+ var IconSlot = styles.styled("span")({
90
+ display: "inline-flex",
91
+ alignItems: "center"
92
+ });
93
+ var Spinner = styles.styled("span")({
94
+ display: "inline-flex",
95
+ animation: `${spin} 700ms linear infinite`
96
+ });
97
+ var Button = react$1.forwardRef(
98
+ ({
99
+ variant = "primary",
100
+ size = "md",
101
+ disabled = false,
102
+ loading = false,
103
+ fullWidth = false,
104
+ startIcon,
105
+ endIcon,
106
+ onClick,
107
+ type = "button",
108
+ children
109
+ }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
110
+ StyledButton,
111
+ {
112
+ ref,
113
+ type,
114
+ disabled: disabled || loading,
115
+ onClick,
116
+ $variant: variant,
117
+ $size: size,
118
+ $fullWidth: fullWidth,
119
+ "aria-busy": loading || void 0,
120
+ children: [
121
+ loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsxs(
122
+ "svg",
123
+ {
124
+ width: "1em",
125
+ height: "1em",
126
+ viewBox: "0 0 24 24",
127
+ fill: "none",
128
+ stroke: "currentColor",
129
+ strokeWidth: "2",
130
+ children: [
131
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }),
132
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2a10 10 0 0 1 10 10" })
133
+ ]
134
+ }
135
+ ) }) : startIcon && /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: startIcon }),
136
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
137
+ endIcon && /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: endIcon })
138
+ ]
139
+ }
140
+ )
141
+ );
142
+ Button.displayName = "Button";
143
+ var ss = "sans-serif";
144
+ var typographyOptions = {
145
+ fontFamily: ["'Lato'", ss].join(","),
146
+ h1: {
147
+ fontFamily: ["'Lato'", ss].join(","),
148
+ fontSize: "1.75rem"
149
+ },
150
+ h2: {
151
+ fontFamily: ["'Lato'", ss].join(","),
152
+ fontSize: "1.375rem"
153
+ },
154
+ h3: {
155
+ fontFamily: ["'Lato'", ss].join(","),
156
+ fontSize: "1.125rem"
157
+ },
158
+ h4: {
159
+ fontFamily: ["'Lato'", ss].join(","),
160
+ fontSize: "1rem"
161
+ },
162
+ h5: {
163
+ fontFamily: ["'Lato'", ss].join(","),
164
+ fontSize: "0.875rem"
165
+ },
166
+ h6: {
167
+ fontFamily: ["'Lato'", ss].join(","),
168
+ fontSize: "0.75rem"
169
+ }
170
+ };
171
+ var themeLight = styles.createTheme({
172
+ typography: typographyOptions,
173
+ palette: {
174
+ mode: "light",
175
+ primary: { main: "#1976d2", dark: "#1565c0", light: "#42a5f5", contrastText: "#ffffff" },
176
+ secondary: { main: "#6b7280", dark: "#4b5563", light: "#9ca3af", contrastText: "#ffffff" },
177
+ error: { main: "#d32f2f", dark: "#b71c1c", light: "#ef5350", contrastText: "#ffffff" },
178
+ action: { disabled: "rgba(0,0,0,0.38)", disabledBackground: "rgba(0,0,0,0.12)" },
179
+ background: { default: "#ffffff", paper: "#f5f5f5" }
180
+ }
181
+ });
182
+ var themeDark = styles.createTheme({
183
+ typography: typographyOptions,
184
+ palette: {
185
+ mode: "dark",
186
+ primary: { main: "#90caf9", dark: "#42a5f5", light: "#bbdefb", contrastText: "#0d1b2a" },
187
+ secondary: { main: "#9ca3af", dark: "#6b7280", light: "#d1d5db", contrastText: "#111827" },
188
+ error: { main: "#f48fb1", dark: "#f06292", light: "#fce4ec", contrastText: "#1a0010" },
189
+ action: { disabled: "rgba(255,255,255,0.30)", disabledBackground: "rgba(255,255,255,0.12)" },
190
+ background: { default: "#121212", paper: "#1e1e1e" }
191
+ }
192
+ });
193
+ var themeHighContrast = styles.createTheme({
194
+ typography: typographyOptions,
195
+ palette: {
196
+ mode: "dark",
197
+ primary: { main: "#ffffff", dark: "#e0e0e0", light: "#ffffff", contrastText: "#000000" },
198
+ secondary: { main: "#ffff00", dark: "#cccc00", light: "#ffff66", contrastText: "#000000" },
199
+ error: { main: "#ff6b6b", dark: "#ff3333", light: "#ffaaaa", contrastText: "#000000" },
200
+ action: { disabled: "rgba(255,255,255,0.38)", disabledBackground: "rgba(255,255,255,0.12)" },
201
+ background: { default: "#000000", paper: "#1a1a1a" }
202
+ }
203
+ });
204
+
205
+ // src/theme/myTheme.ts
206
+ var pickBaseTheme = (mode) => {
207
+ switch (mode) {
208
+ case "dark":
209
+ return themeDark;
210
+ case "highContrast":
211
+ return themeHighContrast;
212
+ case "light":
213
+ default:
214
+ return themeLight;
215
+ }
216
+ };
217
+ var createMyTheme = (options = {}) => {
218
+ const { mode = "light", overrides } = options;
219
+ const baseTheme = pickBaseTheme(mode);
220
+ if (!overrides) return baseTheme;
221
+ return styles.createTheme(baseTheme, overrides);
222
+ };
223
+ var myTheme = createMyTheme();
224
+ var MyThemeProvider = ({
225
+ mode = "light",
226
+ theme,
227
+ disableCssBaseline = false,
228
+ children
229
+ }) => {
230
+ const resolvedTheme = react$1.useMemo(() => {
231
+ if (theme) return theme;
232
+ switch (mode) {
233
+ case "dark":
234
+ return themeDark;
235
+ case "highContrast":
236
+ return themeHighContrast;
237
+ case "light":
238
+ default:
239
+ return themeLight;
240
+ }
241
+ }, [theme, mode]);
242
+ return /* @__PURE__ */ jsxRuntime.jsxs(styles.ThemeProvider, { theme: resolvedTheme, children: [
243
+ !disableCssBaseline && /* @__PURE__ */ jsxRuntime.jsx(CssBaseline__default.default, {}),
244
+ children
245
+ ] });
246
+ };
247
+
248
+ exports.Button = Button;
249
+ exports.MyThemeProvider = MyThemeProvider;
250
+ exports.createMyTheme = createMyTheme;
251
+ exports.myTheme = myTheme;
252
+ exports.themeDark = themeDark;
253
+ exports.themeHighContrast = themeHighContrast;
254
+ exports.themeLight = themeLight;
255
+ //# sourceMappingURL=index.cjs.map
256
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/atoms/buttons/Button/Button.tsx","../src/theme/theme.ts","../src/theme/myTheme.ts","../src/theme/MyThemeProvider.tsx"],"names":["keyframes","alpha","styled","forwardRef","jsxs","jsx","createTheme","useMemo","ThemeProvider","CssBaseline"],"mappings":"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","file":"index.cjs","sourcesContent":["import { forwardRef } from 'react';\nimport { styled, alpha, type Theme } from '@mui/material/styles';\nimport { keyframes } from '@emotion/react';\nimport type { ButtonProps } from '@/components';\n\nconst spin = keyframes`\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n`;\n\nconst sizeMap = {\n sm: { padding: '0.25rem 0.75rem', fontSize: '0.75rem', gap: '0.25rem' },\n md: { padding: '0.5rem 1.25rem', fontSize: '0.875rem', gap: '0.375rem' },\n lg: { padding: '0.75rem 1.75rem', fontSize: '1rem', gap: '0.5rem' },\n};\n\nconst variantStyles = (theme: Theme, variant: string) => {\n switch (variant) {\n case 'primary':\n return {\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.primary.contrastText,\n '&:hover:not(:disabled)': { backgroundColor: theme.palette.primary.dark },\n '&:active:not(:disabled)': { filter: 'brightness(0.92)' },\n };\n case 'secondary':\n return {\n backgroundColor: theme.palette.secondary.main,\n color: theme.palette.secondary.contrastText,\n '&:hover:not(:disabled)': { backgroundColor: theme.palette.secondary.dark },\n '&:active:not(:disabled)': { filter: 'brightness(0.92)' },\n };\n case 'ghost':\n return {\n backgroundColor: 'transparent',\n color: theme.palette.primary.main,\n border: `1px solid ${theme.palette.primary.main}`,\n '&:hover:not(:disabled)': { backgroundColor: alpha(theme.palette.primary.main, 0.08) },\n '&:active:not(:disabled)': { backgroundColor: alpha(theme.palette.primary.main, 0.16) },\n };\n case 'danger':\n return {\n backgroundColor: theme.palette.error.main,\n color: theme.palette.error.contrastText,\n '&:hover:not(:disabled)': { backgroundColor: theme.palette.error.dark },\n '&:active:not(:disabled)': { filter: 'brightness(0.92)' },\n };\n default:\n return {};\n }\n};\n\ninterface StyledButtonProps {\n $variant: NonNullable<ButtonProps['variant']>;\n $size: NonNullable<ButtonProps['size']>;\n $fullWidth: boolean;\n}\n\nconst StyledButton = styled('button')<StyledButtonProps>(\n ({ theme, $variant, $size, $fullWidth }) => ({\n appearance: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n borderRadius: theme.shape.borderRadius,\n fontFamily: theme.typography.fontFamily,\n fontWeight: 600,\n lineHeight: 1.5,\n textDecoration: 'none',\n transition: 'background-color 150ms ease, box-shadow 150ms ease, border-color 150ms ease',\n width: $fullWidth ? '100%' : 'auto',\n ...sizeMap[$size],\n ...variantStyles(theme, $variant),\n '&:focus-visible': {\n outline: `3px solid ${theme.palette.primary.main}`,\n outlineOffset: '2px',\n },\n '&:disabled': {\n backgroundColor:\n $variant === 'ghost' ? 'transparent' : theme.palette.action.disabledBackground,\n borderColor: $variant === 'ghost' ? theme.palette.action.disabled : 'transparent',\n color: theme.palette.action.disabled,\n cursor: 'not-allowed',\n pointerEvents: 'none',\n },\n }),\n);\n\nconst IconSlot = styled('span')({\n display: 'inline-flex',\n alignItems: 'center',\n});\n\nconst Spinner = styled('span')({\n display: 'inline-flex',\n animation: `${spin} 700ms linear infinite`,\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'md',\n disabled = false,\n loading = false,\n fullWidth = false,\n startIcon,\n endIcon,\n onClick,\n type = 'button',\n children,\n },\n ref,\n ) => (\n <StyledButton\n ref={ref}\n type={type}\n disabled={disabled || loading}\n onClick={onClick}\n $variant={variant}\n $size={size}\n $fullWidth={fullWidth}\n aria-busy={loading || undefined}\n >\n {loading ? (\n <Spinner aria-hidden=\"true\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" strokeOpacity=\"0.25\" />\n <path d=\"M12 2a10 10 0 0 1 10 10\" />\n </svg>\n </Spinner>\n ) : (\n startIcon && <IconSlot>{startIcon}</IconSlot>\n )}\n <span>{children}</span>\n {endIcon && <IconSlot>{endIcon}</IconSlot>}\n </StyledButton>\n ),\n);\n\nButton.displayName = 'Button';\n","import { createTheme } from '@mui/material/styles';\n\ndeclare module '@mui/material/styles' {\n interface PaletteColor {\n contrast?: string;\n focus?: string;\n }\n interface SimplePaletteColorOptions {\n contrast?: string;\n focus?: string;\n }\n interface TypeBackground {\n [key: string]: unknown;\n }\n interface TypeText {\n [key: string]: unknown;\n }\n interface Palette {\n [key: string]: unknown;\n }\n interface PaletteOptions {\n [key: string]: unknown;\n }\n interface Theme {\n [key: string]: unknown;\n }\n interface ThemeOptions {\n [key: string]: unknown;\n }\n}\n\nconst ss = 'sans-serif';\n\nconst typographyOptions = {\n fontFamily: [\"'Lato'\", ss].join(','),\n h1: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '1.75rem',\n },\n h2: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '1.375rem',\n },\n h3: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '1.125rem',\n },\n h4: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '1rem',\n },\n h5: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '0.875rem',\n },\n h6: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '0.75rem',\n },\n};\n\nexport const themeLight = createTheme({\n typography: typographyOptions,\n palette: {\n mode: 'light',\n primary: { main: '#1976d2', dark: '#1565c0', light: '#42a5f5', contrastText: '#ffffff' },\n secondary: { main: '#6b7280', dark: '#4b5563', light: '#9ca3af', contrastText: '#ffffff' },\n error: { main: '#d32f2f', dark: '#b71c1c', light: '#ef5350', contrastText: '#ffffff' },\n action: { disabled: 'rgba(0,0,0,0.38)', disabledBackground: 'rgba(0,0,0,0.12)' },\n background: { default: '#ffffff', paper: '#f5f5f5' },\n },\n});\n\nexport const themeDark = createTheme({\n typography: typographyOptions,\n palette: {\n mode: 'dark',\n primary: { main: '#90caf9', dark: '#42a5f5', light: '#bbdefb', contrastText: '#0d1b2a' },\n secondary: { main: '#9ca3af', dark: '#6b7280', light: '#d1d5db', contrastText: '#111827' },\n error: { main: '#f48fb1', dark: '#f06292', light: '#fce4ec', contrastText: '#1a0010' },\n action: { disabled: 'rgba(255,255,255,0.30)', disabledBackground: 'rgba(255,255,255,0.12)' },\n background: { default: '#121212', paper: '#1e1e1e' },\n },\n});\n\nexport const themeHighContrast = createTheme({\n typography: typographyOptions,\n palette: {\n mode: 'dark',\n primary: { main: '#ffffff', dark: '#e0e0e0', light: '#ffffff', contrastText: '#000000' },\n secondary: { main: '#ffff00', dark: '#cccc00', light: '#ffff66', contrastText: '#000000' },\n error: { main: '#ff6b6b', dark: '#ff3333', light: '#ffaaaa', contrastText: '#000000' },\n action: { disabled: 'rgba(255,255,255,0.38)', disabledBackground: 'rgba(255,255,255,0.12)' },\n background: { default: '#000000', paper: '#1a1a1a' },\n },\n});\n","import { createTheme, type Theme, type ThemeOptions } from '@mui/material/styles';\nimport { themeLight, themeDark, themeHighContrast } from './theme';\n\nexport interface CreateMyThemeOptions {\n mode?: 'light' | 'dark' | 'highContrast';\n overrides?: ThemeOptions;\n}\n\nconst pickBaseTheme = (mode: 'light' | 'dark' | 'highContrast'): Theme => {\n switch (mode) {\n case 'dark':\n return themeDark;\n case 'highContrast':\n return themeHighContrast;\n case 'light':\n default:\n return themeLight;\n }\n};\n\nexport const createMyTheme = (options: CreateMyThemeOptions = {}): Theme => {\n const { mode = 'light', overrides } = options;\n const baseTheme = pickBaseTheme(mode);\n if (!overrides) return baseTheme;\n return createTheme(baseTheme as ThemeOptions, overrides);\n};\n\nexport const myTheme: Theme = createMyTheme();\n","import { type ReactNode, useMemo } from 'react';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport { ThemeProvider, type Theme } from '@mui/material/styles';\nimport { themeLight, themeDark, themeHighContrast } from '@/theme';\n\nexport type MyThemeMode = 'light' | 'dark' | 'highContrast';\n\nexport interface MyThemeProviderProps {\n mode?: MyThemeMode;\n theme?: Theme;\n disableCssBaseline?: boolean;\n children: ReactNode;\n}\n\nexport const MyThemeProvider = ({\n mode = 'light',\n theme,\n disableCssBaseline = false,\n children,\n}: MyThemeProviderProps): JSX.Element => {\n const resolvedTheme = useMemo(() => {\n if (theme) return theme;\n switch (mode) {\n case 'dark':\n return themeDark;\n case 'highContrast':\n return themeHighContrast;\n case 'light':\n default:\n return themeLight;\n }\n }, [theme, mode]);\n\n return (\n <ThemeProvider theme={resolvedTheme}>\n {!disableCssBaseline && <CssBaseline />}\n {children}\n </ThemeProvider>\n );\n};\n"]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,69 @@
1
+ import * as react from 'react';
2
+ import { ReactNode, MouseEventHandler } from 'react';
3
+ import { ThemeOptions, Theme } from '@mui/material/styles';
4
+ import * as _mui_material from '@mui/material';
5
+
6
+ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
7
+
8
+ interface ButtonProps {
9
+ variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
10
+ size?: 'sm' | 'md' | 'lg';
11
+ disabled?: boolean;
12
+ loading?: boolean;
13
+ fullWidth?: boolean;
14
+ startIcon?: ReactNode;
15
+ endIcon?: ReactNode;
16
+ onClick?: MouseEventHandler<HTMLButtonElement>;
17
+ type?: 'button' | 'submit' | 'reset';
18
+ children: ReactNode;
19
+ }
20
+
21
+ interface CreateMyThemeOptions {
22
+ mode?: 'light' | 'dark' | 'highContrast';
23
+ overrides?: ThemeOptions;
24
+ }
25
+ declare const createMyTheme: (options?: CreateMyThemeOptions) => Theme;
26
+ declare const myTheme: Theme;
27
+
28
+ type MyThemeMode = 'light' | 'dark' | 'highContrast';
29
+ interface MyThemeProviderProps {
30
+ mode?: MyThemeMode;
31
+ theme?: Theme;
32
+ disableCssBaseline?: boolean;
33
+ children: ReactNode;
34
+ }
35
+ declare const MyThemeProvider: ({ mode, theme, disableCssBaseline, children, }: MyThemeProviderProps) => JSX.Element;
36
+
37
+ declare module '@mui/material/styles' {
38
+ interface PaletteColor {
39
+ contrast?: string;
40
+ focus?: string;
41
+ }
42
+ interface SimplePaletteColorOptions {
43
+ contrast?: string;
44
+ focus?: string;
45
+ }
46
+ interface TypeBackground {
47
+ [key: string]: unknown;
48
+ }
49
+ interface TypeText {
50
+ [key: string]: unknown;
51
+ }
52
+ interface Palette {
53
+ [key: string]: unknown;
54
+ }
55
+ interface PaletteOptions {
56
+ [key: string]: unknown;
57
+ }
58
+ interface Theme {
59
+ [key: string]: unknown;
60
+ }
61
+ interface ThemeOptions {
62
+ [key: string]: unknown;
63
+ }
64
+ }
65
+ declare const themeLight: _mui_material.Theme;
66
+ declare const themeDark: _mui_material.Theme;
67
+ declare const themeHighContrast: _mui_material.Theme;
68
+
69
+ export { Button, type ButtonProps, type CreateMyThemeOptions, type MyThemeMode, MyThemeProvider, type MyThemeProviderProps, createMyTheme, myTheme, themeDark, themeHighContrast, themeLight };
package/dist/index.d.ts ADDED
@@ -0,0 +1,69 @@
1
+ import * as react from 'react';
2
+ import { ReactNode, MouseEventHandler } from 'react';
3
+ import { ThemeOptions, Theme } from '@mui/material/styles';
4
+ import * as _mui_material from '@mui/material';
5
+
6
+ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
7
+
8
+ interface ButtonProps {
9
+ variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
10
+ size?: 'sm' | 'md' | 'lg';
11
+ disabled?: boolean;
12
+ loading?: boolean;
13
+ fullWidth?: boolean;
14
+ startIcon?: ReactNode;
15
+ endIcon?: ReactNode;
16
+ onClick?: MouseEventHandler<HTMLButtonElement>;
17
+ type?: 'button' | 'submit' | 'reset';
18
+ children: ReactNode;
19
+ }
20
+
21
+ interface CreateMyThemeOptions {
22
+ mode?: 'light' | 'dark' | 'highContrast';
23
+ overrides?: ThemeOptions;
24
+ }
25
+ declare const createMyTheme: (options?: CreateMyThemeOptions) => Theme;
26
+ declare const myTheme: Theme;
27
+
28
+ type MyThemeMode = 'light' | 'dark' | 'highContrast';
29
+ interface MyThemeProviderProps {
30
+ mode?: MyThemeMode;
31
+ theme?: Theme;
32
+ disableCssBaseline?: boolean;
33
+ children: ReactNode;
34
+ }
35
+ declare const MyThemeProvider: ({ mode, theme, disableCssBaseline, children, }: MyThemeProviderProps) => JSX.Element;
36
+
37
+ declare module '@mui/material/styles' {
38
+ interface PaletteColor {
39
+ contrast?: string;
40
+ focus?: string;
41
+ }
42
+ interface SimplePaletteColorOptions {
43
+ contrast?: string;
44
+ focus?: string;
45
+ }
46
+ interface TypeBackground {
47
+ [key: string]: unknown;
48
+ }
49
+ interface TypeText {
50
+ [key: string]: unknown;
51
+ }
52
+ interface Palette {
53
+ [key: string]: unknown;
54
+ }
55
+ interface PaletteOptions {
56
+ [key: string]: unknown;
57
+ }
58
+ interface Theme {
59
+ [key: string]: unknown;
60
+ }
61
+ interface ThemeOptions {
62
+ [key: string]: unknown;
63
+ }
64
+ }
65
+ declare const themeLight: _mui_material.Theme;
66
+ declare const themeDark: _mui_material.Theme;
67
+ declare const themeHighContrast: _mui_material.Theme;
68
+
69
+ export { Button, type ButtonProps, type CreateMyThemeOptions, type MyThemeMode, MyThemeProvider, type MyThemeProviderProps, createMyTheme, myTheme, themeDark, themeHighContrast, themeLight };
package/dist/index.js ADDED
@@ -0,0 +1,244 @@
1
+ import { forwardRef, useMemo } from 'react';
2
+ import { styled, createTheme, alpha, ThemeProvider } from '@mui/material/styles';
3
+ import { keyframes } from '@emotion/react';
4
+ import { jsxs, jsx } from 'react/jsx-runtime';
5
+ import CssBaseline from '@mui/material/CssBaseline';
6
+
7
+ // src/components/atoms/buttons/Button/Button.tsx
8
+ var spin = keyframes`
9
+ from { transform: rotate(0deg); }
10
+ to { transform: rotate(360deg); }
11
+ `;
12
+ var sizeMap = {
13
+ sm: { padding: "0.25rem 0.75rem", fontSize: "0.75rem", gap: "0.25rem" },
14
+ md: { padding: "0.5rem 1.25rem", fontSize: "0.875rem", gap: "0.375rem" },
15
+ lg: { padding: "0.75rem 1.75rem", fontSize: "1rem", gap: "0.5rem" }
16
+ };
17
+ var variantStyles = (theme, variant) => {
18
+ switch (variant) {
19
+ case "primary":
20
+ return {
21
+ backgroundColor: theme.palette.primary.main,
22
+ color: theme.palette.primary.contrastText,
23
+ "&:hover:not(:disabled)": { backgroundColor: theme.palette.primary.dark },
24
+ "&:active:not(:disabled)": { filter: "brightness(0.92)" }
25
+ };
26
+ case "secondary":
27
+ return {
28
+ backgroundColor: theme.palette.secondary.main,
29
+ color: theme.palette.secondary.contrastText,
30
+ "&:hover:not(:disabled)": { backgroundColor: theme.palette.secondary.dark },
31
+ "&:active:not(:disabled)": { filter: "brightness(0.92)" }
32
+ };
33
+ case "ghost":
34
+ return {
35
+ backgroundColor: "transparent",
36
+ color: theme.palette.primary.main,
37
+ border: `1px solid ${theme.palette.primary.main}`,
38
+ "&:hover:not(:disabled)": { backgroundColor: alpha(theme.palette.primary.main, 0.08) },
39
+ "&:active:not(:disabled)": { backgroundColor: alpha(theme.palette.primary.main, 0.16) }
40
+ };
41
+ case "danger":
42
+ return {
43
+ backgroundColor: theme.palette.error.main,
44
+ color: theme.palette.error.contrastText,
45
+ "&:hover:not(:disabled)": { backgroundColor: theme.palette.error.dark },
46
+ "&:active:not(:disabled)": { filter: "brightness(0.92)" }
47
+ };
48
+ default:
49
+ return {};
50
+ }
51
+ };
52
+ var StyledButton = styled("button")(
53
+ ({ theme, $variant, $size, $fullWidth }) => ({
54
+ appearance: "none",
55
+ border: "none",
56
+ cursor: "pointer",
57
+ display: "inline-flex",
58
+ alignItems: "center",
59
+ justifyContent: "center",
60
+ position: "relative",
61
+ borderRadius: theme.shape.borderRadius,
62
+ fontFamily: theme.typography.fontFamily,
63
+ fontWeight: 600,
64
+ lineHeight: 1.5,
65
+ textDecoration: "none",
66
+ transition: "background-color 150ms ease, box-shadow 150ms ease, border-color 150ms ease",
67
+ width: $fullWidth ? "100%" : "auto",
68
+ ...sizeMap[$size],
69
+ ...variantStyles(theme, $variant),
70
+ "&:focus-visible": {
71
+ outline: `3px solid ${theme.palette.primary.main}`,
72
+ outlineOffset: "2px"
73
+ },
74
+ "&:disabled": {
75
+ backgroundColor: $variant === "ghost" ? "transparent" : theme.palette.action.disabledBackground,
76
+ borderColor: $variant === "ghost" ? theme.palette.action.disabled : "transparent",
77
+ color: theme.palette.action.disabled,
78
+ cursor: "not-allowed",
79
+ pointerEvents: "none"
80
+ }
81
+ })
82
+ );
83
+ var IconSlot = styled("span")({
84
+ display: "inline-flex",
85
+ alignItems: "center"
86
+ });
87
+ var Spinner = styled("span")({
88
+ display: "inline-flex",
89
+ animation: `${spin} 700ms linear infinite`
90
+ });
91
+ var Button = forwardRef(
92
+ ({
93
+ variant = "primary",
94
+ size = "md",
95
+ disabled = false,
96
+ loading = false,
97
+ fullWidth = false,
98
+ startIcon,
99
+ endIcon,
100
+ onClick,
101
+ type = "button",
102
+ children
103
+ }, ref) => /* @__PURE__ */ jsxs(
104
+ StyledButton,
105
+ {
106
+ ref,
107
+ type,
108
+ disabled: disabled || loading,
109
+ onClick,
110
+ $variant: variant,
111
+ $size: size,
112
+ $fullWidth: fullWidth,
113
+ "aria-busy": loading || void 0,
114
+ children: [
115
+ loading ? /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", children: /* @__PURE__ */ jsxs(
116
+ "svg",
117
+ {
118
+ width: "1em",
119
+ height: "1em",
120
+ viewBox: "0 0 24 24",
121
+ fill: "none",
122
+ stroke: "currentColor",
123
+ strokeWidth: "2",
124
+ children: [
125
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }),
126
+ /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 0 1 10 10" })
127
+ ]
128
+ }
129
+ ) }) : startIcon && /* @__PURE__ */ jsx(IconSlot, { children: startIcon }),
130
+ /* @__PURE__ */ jsx("span", { children }),
131
+ endIcon && /* @__PURE__ */ jsx(IconSlot, { children: endIcon })
132
+ ]
133
+ }
134
+ )
135
+ );
136
+ Button.displayName = "Button";
137
+ var ss = "sans-serif";
138
+ var typographyOptions = {
139
+ fontFamily: ["'Lato'", ss].join(","),
140
+ h1: {
141
+ fontFamily: ["'Lato'", ss].join(","),
142
+ fontSize: "1.75rem"
143
+ },
144
+ h2: {
145
+ fontFamily: ["'Lato'", ss].join(","),
146
+ fontSize: "1.375rem"
147
+ },
148
+ h3: {
149
+ fontFamily: ["'Lato'", ss].join(","),
150
+ fontSize: "1.125rem"
151
+ },
152
+ h4: {
153
+ fontFamily: ["'Lato'", ss].join(","),
154
+ fontSize: "1rem"
155
+ },
156
+ h5: {
157
+ fontFamily: ["'Lato'", ss].join(","),
158
+ fontSize: "0.875rem"
159
+ },
160
+ h6: {
161
+ fontFamily: ["'Lato'", ss].join(","),
162
+ fontSize: "0.75rem"
163
+ }
164
+ };
165
+ var themeLight = createTheme({
166
+ typography: typographyOptions,
167
+ palette: {
168
+ mode: "light",
169
+ primary: { main: "#1976d2", dark: "#1565c0", light: "#42a5f5", contrastText: "#ffffff" },
170
+ secondary: { main: "#6b7280", dark: "#4b5563", light: "#9ca3af", contrastText: "#ffffff" },
171
+ error: { main: "#d32f2f", dark: "#b71c1c", light: "#ef5350", contrastText: "#ffffff" },
172
+ action: { disabled: "rgba(0,0,0,0.38)", disabledBackground: "rgba(0,0,0,0.12)" },
173
+ background: { default: "#ffffff", paper: "#f5f5f5" }
174
+ }
175
+ });
176
+ var themeDark = createTheme({
177
+ typography: typographyOptions,
178
+ palette: {
179
+ mode: "dark",
180
+ primary: { main: "#90caf9", dark: "#42a5f5", light: "#bbdefb", contrastText: "#0d1b2a" },
181
+ secondary: { main: "#9ca3af", dark: "#6b7280", light: "#d1d5db", contrastText: "#111827" },
182
+ error: { main: "#f48fb1", dark: "#f06292", light: "#fce4ec", contrastText: "#1a0010" },
183
+ action: { disabled: "rgba(255,255,255,0.30)", disabledBackground: "rgba(255,255,255,0.12)" },
184
+ background: { default: "#121212", paper: "#1e1e1e" }
185
+ }
186
+ });
187
+ var themeHighContrast = createTheme({
188
+ typography: typographyOptions,
189
+ palette: {
190
+ mode: "dark",
191
+ primary: { main: "#ffffff", dark: "#e0e0e0", light: "#ffffff", contrastText: "#000000" },
192
+ secondary: { main: "#ffff00", dark: "#cccc00", light: "#ffff66", contrastText: "#000000" },
193
+ error: { main: "#ff6b6b", dark: "#ff3333", light: "#ffaaaa", contrastText: "#000000" },
194
+ action: { disabled: "rgba(255,255,255,0.38)", disabledBackground: "rgba(255,255,255,0.12)" },
195
+ background: { default: "#000000", paper: "#1a1a1a" }
196
+ }
197
+ });
198
+
199
+ // src/theme/myTheme.ts
200
+ var pickBaseTheme = (mode) => {
201
+ switch (mode) {
202
+ case "dark":
203
+ return themeDark;
204
+ case "highContrast":
205
+ return themeHighContrast;
206
+ case "light":
207
+ default:
208
+ return themeLight;
209
+ }
210
+ };
211
+ var createMyTheme = (options = {}) => {
212
+ const { mode = "light", overrides } = options;
213
+ const baseTheme = pickBaseTheme(mode);
214
+ if (!overrides) return baseTheme;
215
+ return createTheme(baseTheme, overrides);
216
+ };
217
+ var myTheme = createMyTheme();
218
+ var MyThemeProvider = ({
219
+ mode = "light",
220
+ theme,
221
+ disableCssBaseline = false,
222
+ children
223
+ }) => {
224
+ const resolvedTheme = useMemo(() => {
225
+ if (theme) return theme;
226
+ switch (mode) {
227
+ case "dark":
228
+ return themeDark;
229
+ case "highContrast":
230
+ return themeHighContrast;
231
+ case "light":
232
+ default:
233
+ return themeLight;
234
+ }
235
+ }, [theme, mode]);
236
+ return /* @__PURE__ */ jsxs(ThemeProvider, { theme: resolvedTheme, children: [
237
+ !disableCssBaseline && /* @__PURE__ */ jsx(CssBaseline, {}),
238
+ children
239
+ ] });
240
+ };
241
+
242
+ export { Button, MyThemeProvider, createMyTheme, myTheme, themeDark, themeHighContrast, themeLight };
243
+ //# sourceMappingURL=index.js.map
244
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/atoms/buttons/Button/Button.tsx","../src/theme/theme.ts","../src/theme/myTheme.ts","../src/theme/MyThemeProvider.tsx"],"names":["createTheme","jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { forwardRef } from 'react';\nimport { styled, alpha, type Theme } from '@mui/material/styles';\nimport { keyframes } from '@emotion/react';\nimport type { ButtonProps } from '@/components';\n\nconst spin = keyframes`\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n`;\n\nconst sizeMap = {\n sm: { padding: '0.25rem 0.75rem', fontSize: '0.75rem', gap: '0.25rem' },\n md: { padding: '0.5rem 1.25rem', fontSize: '0.875rem', gap: '0.375rem' },\n lg: { padding: '0.75rem 1.75rem', fontSize: '1rem', gap: '0.5rem' },\n};\n\nconst variantStyles = (theme: Theme, variant: string) => {\n switch (variant) {\n case 'primary':\n return {\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.primary.contrastText,\n '&:hover:not(:disabled)': { backgroundColor: theme.palette.primary.dark },\n '&:active:not(:disabled)': { filter: 'brightness(0.92)' },\n };\n case 'secondary':\n return {\n backgroundColor: theme.palette.secondary.main,\n color: theme.palette.secondary.contrastText,\n '&:hover:not(:disabled)': { backgroundColor: theme.palette.secondary.dark },\n '&:active:not(:disabled)': { filter: 'brightness(0.92)' },\n };\n case 'ghost':\n return {\n backgroundColor: 'transparent',\n color: theme.palette.primary.main,\n border: `1px solid ${theme.palette.primary.main}`,\n '&:hover:not(:disabled)': { backgroundColor: alpha(theme.palette.primary.main, 0.08) },\n '&:active:not(:disabled)': { backgroundColor: alpha(theme.palette.primary.main, 0.16) },\n };\n case 'danger':\n return {\n backgroundColor: theme.palette.error.main,\n color: theme.palette.error.contrastText,\n '&:hover:not(:disabled)': { backgroundColor: theme.palette.error.dark },\n '&:active:not(:disabled)': { filter: 'brightness(0.92)' },\n };\n default:\n return {};\n }\n};\n\ninterface StyledButtonProps {\n $variant: NonNullable<ButtonProps['variant']>;\n $size: NonNullable<ButtonProps['size']>;\n $fullWidth: boolean;\n}\n\nconst StyledButton = styled('button')<StyledButtonProps>(\n ({ theme, $variant, $size, $fullWidth }) => ({\n appearance: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n borderRadius: theme.shape.borderRadius,\n fontFamily: theme.typography.fontFamily,\n fontWeight: 600,\n lineHeight: 1.5,\n textDecoration: 'none',\n transition: 'background-color 150ms ease, box-shadow 150ms ease, border-color 150ms ease',\n width: $fullWidth ? '100%' : 'auto',\n ...sizeMap[$size],\n ...variantStyles(theme, $variant),\n '&:focus-visible': {\n outline: `3px solid ${theme.palette.primary.main}`,\n outlineOffset: '2px',\n },\n '&:disabled': {\n backgroundColor:\n $variant === 'ghost' ? 'transparent' : theme.palette.action.disabledBackground,\n borderColor: $variant === 'ghost' ? theme.palette.action.disabled : 'transparent',\n color: theme.palette.action.disabled,\n cursor: 'not-allowed',\n pointerEvents: 'none',\n },\n }),\n);\n\nconst IconSlot = styled('span')({\n display: 'inline-flex',\n alignItems: 'center',\n});\n\nconst Spinner = styled('span')({\n display: 'inline-flex',\n animation: `${spin} 700ms linear infinite`,\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'md',\n disabled = false,\n loading = false,\n fullWidth = false,\n startIcon,\n endIcon,\n onClick,\n type = 'button',\n children,\n },\n ref,\n ) => (\n <StyledButton\n ref={ref}\n type={type}\n disabled={disabled || loading}\n onClick={onClick}\n $variant={variant}\n $size={size}\n $fullWidth={fullWidth}\n aria-busy={loading || undefined}\n >\n {loading ? (\n <Spinner aria-hidden=\"true\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" strokeOpacity=\"0.25\" />\n <path d=\"M12 2a10 10 0 0 1 10 10\" />\n </svg>\n </Spinner>\n ) : (\n startIcon && <IconSlot>{startIcon}</IconSlot>\n )}\n <span>{children}</span>\n {endIcon && <IconSlot>{endIcon}</IconSlot>}\n </StyledButton>\n ),\n);\n\nButton.displayName = 'Button';\n","import { createTheme } from '@mui/material/styles';\n\ndeclare module '@mui/material/styles' {\n interface PaletteColor {\n contrast?: string;\n focus?: string;\n }\n interface SimplePaletteColorOptions {\n contrast?: string;\n focus?: string;\n }\n interface TypeBackground {\n [key: string]: unknown;\n }\n interface TypeText {\n [key: string]: unknown;\n }\n interface Palette {\n [key: string]: unknown;\n }\n interface PaletteOptions {\n [key: string]: unknown;\n }\n interface Theme {\n [key: string]: unknown;\n }\n interface ThemeOptions {\n [key: string]: unknown;\n }\n}\n\nconst ss = 'sans-serif';\n\nconst typographyOptions = {\n fontFamily: [\"'Lato'\", ss].join(','),\n h1: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '1.75rem',\n },\n h2: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '1.375rem',\n },\n h3: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '1.125rem',\n },\n h4: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '1rem',\n },\n h5: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '0.875rem',\n },\n h6: {\n fontFamily: [\"'Lato'\", ss].join(','),\n fontSize: '0.75rem',\n },\n};\n\nexport const themeLight = createTheme({\n typography: typographyOptions,\n palette: {\n mode: 'light',\n primary: { main: '#1976d2', dark: '#1565c0', light: '#42a5f5', contrastText: '#ffffff' },\n secondary: { main: '#6b7280', dark: '#4b5563', light: '#9ca3af', contrastText: '#ffffff' },\n error: { main: '#d32f2f', dark: '#b71c1c', light: '#ef5350', contrastText: '#ffffff' },\n action: { disabled: 'rgba(0,0,0,0.38)', disabledBackground: 'rgba(0,0,0,0.12)' },\n background: { default: '#ffffff', paper: '#f5f5f5' },\n },\n});\n\nexport const themeDark = createTheme({\n typography: typographyOptions,\n palette: {\n mode: 'dark',\n primary: { main: '#90caf9', dark: '#42a5f5', light: '#bbdefb', contrastText: '#0d1b2a' },\n secondary: { main: '#9ca3af', dark: '#6b7280', light: '#d1d5db', contrastText: '#111827' },\n error: { main: '#f48fb1', dark: '#f06292', light: '#fce4ec', contrastText: '#1a0010' },\n action: { disabled: 'rgba(255,255,255,0.30)', disabledBackground: 'rgba(255,255,255,0.12)' },\n background: { default: '#121212', paper: '#1e1e1e' },\n },\n});\n\nexport const themeHighContrast = createTheme({\n typography: typographyOptions,\n palette: {\n mode: 'dark',\n primary: { main: '#ffffff', dark: '#e0e0e0', light: '#ffffff', contrastText: '#000000' },\n secondary: { main: '#ffff00', dark: '#cccc00', light: '#ffff66', contrastText: '#000000' },\n error: { main: '#ff6b6b', dark: '#ff3333', light: '#ffaaaa', contrastText: '#000000' },\n action: { disabled: 'rgba(255,255,255,0.38)', disabledBackground: 'rgba(255,255,255,0.12)' },\n background: { default: '#000000', paper: '#1a1a1a' },\n },\n});\n","import { createTheme, type Theme, type ThemeOptions } from '@mui/material/styles';\nimport { themeLight, themeDark, themeHighContrast } from './theme';\n\nexport interface CreateMyThemeOptions {\n mode?: 'light' | 'dark' | 'highContrast';\n overrides?: ThemeOptions;\n}\n\nconst pickBaseTheme = (mode: 'light' | 'dark' | 'highContrast'): Theme => {\n switch (mode) {\n case 'dark':\n return themeDark;\n case 'highContrast':\n return themeHighContrast;\n case 'light':\n default:\n return themeLight;\n }\n};\n\nexport const createMyTheme = (options: CreateMyThemeOptions = {}): Theme => {\n const { mode = 'light', overrides } = options;\n const baseTheme = pickBaseTheme(mode);\n if (!overrides) return baseTheme;\n return createTheme(baseTheme as ThemeOptions, overrides);\n};\n\nexport const myTheme: Theme = createMyTheme();\n","import { type ReactNode, useMemo } from 'react';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport { ThemeProvider, type Theme } from '@mui/material/styles';\nimport { themeLight, themeDark, themeHighContrast } from '@/theme';\n\nexport type MyThemeMode = 'light' | 'dark' | 'highContrast';\n\nexport interface MyThemeProviderProps {\n mode?: MyThemeMode;\n theme?: Theme;\n disableCssBaseline?: boolean;\n children: ReactNode;\n}\n\nexport const MyThemeProvider = ({\n mode = 'light',\n theme,\n disableCssBaseline = false,\n children,\n}: MyThemeProviderProps): JSX.Element => {\n const resolvedTheme = useMemo(() => {\n if (theme) return theme;\n switch (mode) {\n case 'dark':\n return themeDark;\n case 'highContrast':\n return themeHighContrast;\n case 'light':\n default:\n return themeLight;\n }\n }, [theme, mode]);\n\n return (\n <ThemeProvider theme={resolvedTheme}>\n {!disableCssBaseline && <CssBaseline />}\n {children}\n </ThemeProvider>\n );\n};\n"]}
package/package.json ADDED
@@ -0,0 +1,103 @@
1
+ {
2
+ "name": "@szymonpiatek/designsystem",
3
+ "version": "0.0.2",
4
+ "description": "Sztmon Piątek - Design System",
5
+ "license": "UNLICENSED",
6
+ "private": false,
7
+ "type": "module",
8
+ "main": "./dist/index.cjs",
9
+ "module": "./dist/index.js",
10
+ "types": "./dist/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "types": "./dist/index.d.ts",
14
+ "import": "./dist/index.js",
15
+ "require": "./dist/index.cjs"
16
+ }
17
+ },
18
+ "files": [
19
+ "dist"
20
+ ],
21
+ "sideEffects": false,
22
+ "scripts": {
23
+ "dev": "storybook dev -p 6006",
24
+ "build": "tsup",
25
+ "build:watch": "tsup --watch",
26
+ "clean": "rimraf dist storybook-static coverage",
27
+ "storybook": "storybook dev -p 6006",
28
+ "build-storybook": "storybook build",
29
+ "test": "jest",
30
+ "test:watch": "jest --watch",
31
+ "test:coverage": "jest --coverage",
32
+ "lint": "eslint \"src/**/*.{ts,sx}\"",
33
+ "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
34
+ "format": "prettier --write \"src/**/*.{ts,tsx,md,json}\"",
35
+ "typecheck": "tsc --noEmit",
36
+ "prepublishOnly": "npm run lint && npm run test && npm run clean && npm run build"
37
+ },
38
+ "peerDependencies": {
39
+ "@emotion/react": "^11.11.0",
40
+ "@emotion/styled": "^11.11.0",
41
+ "@mui/material": "^5.15.0 || ^6.0.0",
42
+ "react": "^18.0.0 || ^19.0.0",
43
+ "react-dom": "^18.0.0 || ^19.0.0"
44
+ },
45
+ "devDependencies": {
46
+ "@emotion/react": "^11.13.3",
47
+ "@emotion/styled": "^11.13.0",
48
+ "@eslint/js": "^9.15.0",
49
+ "@mui/material": "^5.16.7",
50
+ "@storybook/addon-a11y": "^10.4.1",
51
+ "@storybook/addon-docs": "^10.4.1",
52
+ "@storybook/addon-links": "^10.4.1",
53
+ "@storybook/react": "^10.4.1",
54
+ "@storybook/react-vite": "^10.4.1",
55
+ "@testing-library/jest-dom": "^6.6.3",
56
+ "@testing-library/react": "^16.0.1",
57
+ "@testing-library/user-event": "^14.5.2",
58
+ "@types/jest": "^29.5.14",
59
+ "@types/react": "^18.3.12",
60
+ "@types/react-dom": "^18.3.1",
61
+ "eslint": "^9.15.0",
62
+ "eslint-config-prettier": "^9.1.0",
63
+ "eslint-plugin-jsx-a11y": "^6.10.2",
64
+ "eslint-plugin-react": "^7.37.2",
65
+ "eslint-plugin-react-hooks": "^5.0.0",
66
+ "eslint-plugin-storybook": "^10.4.1",
67
+ "globals": "^15.12.0",
68
+ "identity-obj-proxy": "^3.0.0",
69
+ "jest": "^29.7.0",
70
+ "jest-environment-jsdom": "^29.7.0",
71
+ "prettier": "^3.3.3",
72
+ "react": "^18.3.1",
73
+ "react-dom": "^18.3.1",
74
+ "rimraf": "^6.0.1",
75
+ "storybook": "^10.4.1",
76
+ "ts-jest": "^29.2.5",
77
+ "tsup": "^8.3.5",
78
+ "typescript": "^5.6.3",
79
+ "typescript-eslint": "^8.15.0",
80
+ "vite": "^8.0.5",
81
+ "yaml": "^2.9.0"
82
+ },
83
+ "dependencies": {
84
+ "tsup": "^8.5.1"
85
+ },
86
+ "repository": {
87
+ "type": "git",
88
+ "url": "https://github.com/SzymonPiatek/DesignSystem.git"
89
+ },
90
+ "publishConfig": {
91
+ "access": "public"
92
+ },
93
+ "engines": {
94
+ "node": ">=18.0.0"
95
+ },
96
+ "keywords": [
97
+ "react",
98
+ "ui",
99
+ "design-system",
100
+ "components",
101
+ "ui-library"
102
+ ]
103
+ }