create-project-template-cli 1.0.0 → 1.0.1
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/README.md +5 -5
- package/index.js +133 -133
- package/package.json +2 -2
- package/template/react-shadcn/.gitignore +24 -0
- package/template/react-shadcn/.husky/commit-msg +4 -4
- package/template/react-shadcn/.stylelintignore +19 -19
- package/template/react-shadcn/.stylelintrc.cjs +258 -258
- package/template/react-shadcn/.vscode/extensions.json +7 -7
- package/template/react-shadcn/README.md +75 -75
- package/template/react-shadcn/commitlint.config.cjs +90 -90
- package/template/react-shadcn/components.json +22 -22
- package/template/react-shadcn/eslint.config.js +58 -58
- package/template/react-shadcn/index.html +13 -13
- package/template/react-shadcn/lint-staged.config.cjs +4 -4
- package/template/react-shadcn/package.json +62 -62
- package/template/react-shadcn/pnpm-lock.yaml +4514 -4514
- package/template/react-shadcn/src/App.css +23 -23
- package/template/react-shadcn/src/App.tsx +20 -20
- package/template/react-shadcn/src/assets/css/tailwindcss.css +120 -120
- package/template/react-shadcn/src/components/ui/button.tsx +58 -58
- package/template/react-shadcn/src/components/ui/card.tsx +92 -92
- package/template/react-shadcn/src/components/ui/input.tsx +21 -21
- package/template/react-shadcn/src/components/ui/label.tsx +22 -22
- package/template/react-shadcn/src/components/ui/navigation-menu.tsx +168 -168
- package/template/react-shadcn/src/lib/utils.ts +6 -6
- package/template/react-shadcn/src/main.tsx +11 -11
- package/template/react-shadcn/src/router/index.tsx +71 -71
- package/template/react-shadcn/src/views/404/index.scss +133 -133
- package/template/react-shadcn/src/views/404/index.tsx +26 -26
- package/template/react-shadcn/src/views/Index/index.tsx +7 -7
- package/template/react-shadcn/src/views/index.tsx +58 -58
- package/template/react-shadcn/tsconfig.app.json +33 -33
- package/template/react-shadcn/tsconfig.json +13 -13
- package/template/react-shadcn/tsconfig.node.json +32 -32
- package/template/react-shadcn/vite.config.ts +36 -36
- package/template/vue-tailwindcss/.gitignore +30 -0
- package/utils.js +73 -73
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
html,
|
|
2
|
-
body {
|
|
3
|
-
margin: 0;
|
|
4
|
-
padding: 0;
|
|
5
|
-
width: 100%;
|
|
6
|
-
height: 100%;
|
|
7
|
-
font-family: "Regular";
|
|
8
|
-
}
|
|
9
|
-
#root {
|
|
10
|
-
width: 100%;
|
|
11
|
-
height: 100%;
|
|
12
|
-
background-color: #f9fafb;
|
|
13
|
-
}
|
|
14
|
-
.nav {
|
|
15
|
-
padding-left: 7vw;
|
|
16
|
-
padding-right: 7vw;
|
|
17
|
-
background-color: #fff;
|
|
18
|
-
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
|
19
|
-
}
|
|
20
|
-
.content {
|
|
21
|
-
padding-left: 7vw;
|
|
22
|
-
padding-right: 7vw;
|
|
23
|
-
}
|
|
1
|
+
html,
|
|
2
|
+
body {
|
|
3
|
+
margin: 0;
|
|
4
|
+
padding: 0;
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 100%;
|
|
7
|
+
font-family: "Regular";
|
|
8
|
+
}
|
|
9
|
+
#root {
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
background-color: #f9fafb;
|
|
13
|
+
}
|
|
14
|
+
.nav {
|
|
15
|
+
padding-left: 7vw;
|
|
16
|
+
padding-right: 7vw;
|
|
17
|
+
background-color: #fff;
|
|
18
|
+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
|
19
|
+
}
|
|
20
|
+
.content {
|
|
21
|
+
padding-left: 7vw;
|
|
22
|
+
padding-right: 7vw;
|
|
23
|
+
}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import './App.css';
|
|
3
|
-
import { router } from './router/index.tsx';
|
|
4
|
-
import { RouterProvider } from 'react-router-dom';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
function App() {
|
|
8
|
-
|
|
9
|
-
return (
|
|
10
|
-
<div >
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<React.Suspense fallback={<div>Loading...</div>}>
|
|
14
|
-
<RouterProvider router={router} />
|
|
15
|
-
</React.Suspense>
|
|
16
|
-
</div>
|
|
17
|
-
);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export default App;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './App.css';
|
|
3
|
+
import { router } from './router/index.tsx';
|
|
4
|
+
import { RouterProvider } from 'react-router-dom';
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
function App() {
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<div >
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
<React.Suspense fallback={<div>Loading...</div>}>
|
|
14
|
+
<RouterProvider router={router} />
|
|
15
|
+
</React.Suspense>
|
|
16
|
+
</div>
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export default App;
|
|
@@ -1,120 +1,120 @@
|
|
|
1
|
-
@import "tailwindcss";
|
|
2
|
-
@import "tw-animate-css";
|
|
3
|
-
|
|
4
|
-
@custom-variant dark (&:is(.dark *));
|
|
5
|
-
|
|
6
|
-
@theme inline {
|
|
7
|
-
--radius-sm: calc(var(--radius) - 4px);
|
|
8
|
-
--radius-md: calc(var(--radius) - 2px);
|
|
9
|
-
--radius-lg: var(--radius);
|
|
10
|
-
--radius-xl: calc(var(--radius) + 4px);
|
|
11
|
-
--color-background: var(--background);
|
|
12
|
-
--color-foreground: var(--foreground);
|
|
13
|
-
--color-card: var(--card);
|
|
14
|
-
--color-card-foreground: var(--card-foreground);
|
|
15
|
-
--color-popover: var(--popover);
|
|
16
|
-
--color-popover-foreground: var(--popover-foreground);
|
|
17
|
-
--color-primary: var(--primary);
|
|
18
|
-
--color-primary-foreground: var(--primary-foreground);
|
|
19
|
-
--color-secondary: var(--secondary);
|
|
20
|
-
--color-secondary-foreground: var(--secondary-foreground);
|
|
21
|
-
--color-muted: var(--muted);
|
|
22
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
23
|
-
--color-accent: var(--accent);
|
|
24
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
25
|
-
--color-destructive: var(--destructive);
|
|
26
|
-
--color-border: var(--border);
|
|
27
|
-
--color-input: var(--input);
|
|
28
|
-
--color-ring: var(--ring);
|
|
29
|
-
--color-chart-1: var(--chart-1);
|
|
30
|
-
--color-chart-2: var(--chart-2);
|
|
31
|
-
--color-chart-3: var(--chart-3);
|
|
32
|
-
--color-chart-4: var(--chart-4);
|
|
33
|
-
--color-chart-5: var(--chart-5);
|
|
34
|
-
--color-sidebar: var(--sidebar);
|
|
35
|
-
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
36
|
-
--color-sidebar-primary: var(--sidebar-primary);
|
|
37
|
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
38
|
-
--color-sidebar-accent: var(--sidebar-accent);
|
|
39
|
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
40
|
-
--color-sidebar-border: var(--sidebar-border);
|
|
41
|
-
--color-sidebar-ring: var(--sidebar-ring);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
:root {
|
|
45
|
-
--radius: 0.625rem;
|
|
46
|
-
--background: oklch(1 0 0);
|
|
47
|
-
--foreground: oklch(0.129 0.042 264.695);
|
|
48
|
-
--card: oklch(1 0 0);
|
|
49
|
-
--card-foreground: oklch(0.129 0.042 264.695);
|
|
50
|
-
--popover: oklch(1 0 0);
|
|
51
|
-
--popover-foreground: oklch(0.129 0.042 264.695);
|
|
52
|
-
--primary: oklch(0.208 0.042 265.755);
|
|
53
|
-
--primary-foreground: oklch(0.984 0.003 247.858);
|
|
54
|
-
--secondary: oklch(0.968 0.007 247.896);
|
|
55
|
-
--secondary-foreground: oklch(0.208 0.042 265.755);
|
|
56
|
-
--muted: oklch(0.968 0.007 247.896);
|
|
57
|
-
--muted-foreground: oklch(0.554 0.046 257.417);
|
|
58
|
-
--accent: oklch(0.968 0.007 247.896);
|
|
59
|
-
--accent-foreground: oklch(0.208 0.042 265.755);
|
|
60
|
-
--destructive: oklch(0.577 0.245 27.325);
|
|
61
|
-
--border: oklch(0.929 0.013 255.508);
|
|
62
|
-
--input: oklch(0.929 0.013 255.508);
|
|
63
|
-
--ring: oklch(0.704 0.04 256.788);
|
|
64
|
-
--chart-1: oklch(0.646 0.222 41.116);
|
|
65
|
-
--chart-2: oklch(0.6 0.118 184.704);
|
|
66
|
-
--chart-3: oklch(0.398 0.07 227.392);
|
|
67
|
-
--chart-4: oklch(0.828 0.189 84.429);
|
|
68
|
-
--chart-5: oklch(0.769 0.188 70.08);
|
|
69
|
-
--sidebar: oklch(0.984 0.003 247.858);
|
|
70
|
-
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
|
71
|
-
--sidebar-primary: oklch(0.208 0.042 265.755);
|
|
72
|
-
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
|
73
|
-
--sidebar-accent: oklch(0.968 0.007 247.896);
|
|
74
|
-
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
|
75
|
-
--sidebar-border: oklch(0.929 0.013 255.508);
|
|
76
|
-
--sidebar-ring: oklch(0.704 0.04 256.788);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.dark {
|
|
80
|
-
--background: oklch(0.129 0.042 264.695);
|
|
81
|
-
--foreground: oklch(0.984 0.003 247.858);
|
|
82
|
-
--card: oklch(0.208 0.042 265.755);
|
|
83
|
-
--card-foreground: oklch(0.984 0.003 247.858);
|
|
84
|
-
--popover: oklch(0.208 0.042 265.755);
|
|
85
|
-
--popover-foreground: oklch(0.984 0.003 247.858);
|
|
86
|
-
--primary: oklch(0.929 0.013 255.508);
|
|
87
|
-
--primary-foreground: oklch(0.208 0.042 265.755);
|
|
88
|
-
--secondary: oklch(0.279 0.041 260.031);
|
|
89
|
-
--secondary-foreground: oklch(0.984 0.003 247.858);
|
|
90
|
-
--muted: oklch(0.279 0.041 260.031);
|
|
91
|
-
--muted-foreground: oklch(0.704 0.04 256.788);
|
|
92
|
-
--accent: oklch(0.279 0.041 260.031);
|
|
93
|
-
--accent-foreground: oklch(0.984 0.003 247.858);
|
|
94
|
-
--destructive: oklch(0.704 0.191 22.216);
|
|
95
|
-
--border: oklch(1 0 0 / 10%);
|
|
96
|
-
--input: oklch(1 0 0 / 15%);
|
|
97
|
-
--ring: oklch(0.551 0.027 264.364);
|
|
98
|
-
--chart-1: oklch(0.488 0.243 264.376);
|
|
99
|
-
--chart-2: oklch(0.696 0.17 162.48);
|
|
100
|
-
--chart-3: oklch(0.769 0.188 70.08);
|
|
101
|
-
--chart-4: oklch(0.627 0.265 303.9);
|
|
102
|
-
--chart-5: oklch(0.645 0.246 16.439);
|
|
103
|
-
--sidebar: oklch(0.208 0.042 265.755);
|
|
104
|
-
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
|
105
|
-
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
106
|
-
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
|
107
|
-
--sidebar-accent: oklch(0.279 0.041 260.031);
|
|
108
|
-
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
|
109
|
-
--sidebar-border: oklch(1 0 0 / 10%);
|
|
110
|
-
--sidebar-ring: oklch(0.551 0.027 264.364);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
@layer base {
|
|
114
|
-
* {
|
|
115
|
-
@apply border-border outline-ring/50;
|
|
116
|
-
}
|
|
117
|
-
body {
|
|
118
|
-
@apply bg-background text-foreground;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "tw-animate-css";
|
|
3
|
+
|
|
4
|
+
@custom-variant dark (&:is(.dark *));
|
|
5
|
+
|
|
6
|
+
@theme inline {
|
|
7
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
8
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
9
|
+
--radius-lg: var(--radius);
|
|
10
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
11
|
+
--color-background: var(--background);
|
|
12
|
+
--color-foreground: var(--foreground);
|
|
13
|
+
--color-card: var(--card);
|
|
14
|
+
--color-card-foreground: var(--card-foreground);
|
|
15
|
+
--color-popover: var(--popover);
|
|
16
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
17
|
+
--color-primary: var(--primary);
|
|
18
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
19
|
+
--color-secondary: var(--secondary);
|
|
20
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
21
|
+
--color-muted: var(--muted);
|
|
22
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
23
|
+
--color-accent: var(--accent);
|
|
24
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
25
|
+
--color-destructive: var(--destructive);
|
|
26
|
+
--color-border: var(--border);
|
|
27
|
+
--color-input: var(--input);
|
|
28
|
+
--color-ring: var(--ring);
|
|
29
|
+
--color-chart-1: var(--chart-1);
|
|
30
|
+
--color-chart-2: var(--chart-2);
|
|
31
|
+
--color-chart-3: var(--chart-3);
|
|
32
|
+
--color-chart-4: var(--chart-4);
|
|
33
|
+
--color-chart-5: var(--chart-5);
|
|
34
|
+
--color-sidebar: var(--sidebar);
|
|
35
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
36
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
37
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
38
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
39
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
40
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
41
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:root {
|
|
45
|
+
--radius: 0.625rem;
|
|
46
|
+
--background: oklch(1 0 0);
|
|
47
|
+
--foreground: oklch(0.129 0.042 264.695);
|
|
48
|
+
--card: oklch(1 0 0);
|
|
49
|
+
--card-foreground: oklch(0.129 0.042 264.695);
|
|
50
|
+
--popover: oklch(1 0 0);
|
|
51
|
+
--popover-foreground: oklch(0.129 0.042 264.695);
|
|
52
|
+
--primary: oklch(0.208 0.042 265.755);
|
|
53
|
+
--primary-foreground: oklch(0.984 0.003 247.858);
|
|
54
|
+
--secondary: oklch(0.968 0.007 247.896);
|
|
55
|
+
--secondary-foreground: oklch(0.208 0.042 265.755);
|
|
56
|
+
--muted: oklch(0.968 0.007 247.896);
|
|
57
|
+
--muted-foreground: oklch(0.554 0.046 257.417);
|
|
58
|
+
--accent: oklch(0.968 0.007 247.896);
|
|
59
|
+
--accent-foreground: oklch(0.208 0.042 265.755);
|
|
60
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
61
|
+
--border: oklch(0.929 0.013 255.508);
|
|
62
|
+
--input: oklch(0.929 0.013 255.508);
|
|
63
|
+
--ring: oklch(0.704 0.04 256.788);
|
|
64
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
65
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
66
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
67
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
68
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
69
|
+
--sidebar: oklch(0.984 0.003 247.858);
|
|
70
|
+
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
|
71
|
+
--sidebar-primary: oklch(0.208 0.042 265.755);
|
|
72
|
+
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
|
73
|
+
--sidebar-accent: oklch(0.968 0.007 247.896);
|
|
74
|
+
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
|
75
|
+
--sidebar-border: oklch(0.929 0.013 255.508);
|
|
76
|
+
--sidebar-ring: oklch(0.704 0.04 256.788);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.dark {
|
|
80
|
+
--background: oklch(0.129 0.042 264.695);
|
|
81
|
+
--foreground: oklch(0.984 0.003 247.858);
|
|
82
|
+
--card: oklch(0.208 0.042 265.755);
|
|
83
|
+
--card-foreground: oklch(0.984 0.003 247.858);
|
|
84
|
+
--popover: oklch(0.208 0.042 265.755);
|
|
85
|
+
--popover-foreground: oklch(0.984 0.003 247.858);
|
|
86
|
+
--primary: oklch(0.929 0.013 255.508);
|
|
87
|
+
--primary-foreground: oklch(0.208 0.042 265.755);
|
|
88
|
+
--secondary: oklch(0.279 0.041 260.031);
|
|
89
|
+
--secondary-foreground: oklch(0.984 0.003 247.858);
|
|
90
|
+
--muted: oklch(0.279 0.041 260.031);
|
|
91
|
+
--muted-foreground: oklch(0.704 0.04 256.788);
|
|
92
|
+
--accent: oklch(0.279 0.041 260.031);
|
|
93
|
+
--accent-foreground: oklch(0.984 0.003 247.858);
|
|
94
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
95
|
+
--border: oklch(1 0 0 / 10%);
|
|
96
|
+
--input: oklch(1 0 0 / 15%);
|
|
97
|
+
--ring: oklch(0.551 0.027 264.364);
|
|
98
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
99
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
100
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
101
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
102
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
103
|
+
--sidebar: oklch(0.208 0.042 265.755);
|
|
104
|
+
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
|
105
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
106
|
+
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
|
107
|
+
--sidebar-accent: oklch(0.279 0.041 260.031);
|
|
108
|
+
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
|
109
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
110
|
+
--sidebar-ring: oklch(0.551 0.027 264.364);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@layer base {
|
|
114
|
+
* {
|
|
115
|
+
@apply border-border outline-ring/50;
|
|
116
|
+
}
|
|
117
|
+
body {
|
|
118
|
+
@apply bg-background text-foreground;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
4
|
-
|
|
5
|
-
import { cn } from "@/lib/utils";
|
|
6
|
-
|
|
7
|
-
const buttonVariants = cva(
|
|
8
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
9
|
-
{
|
|
10
|
-
variants: {
|
|
11
|
-
variant: {
|
|
12
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
13
|
-
destructive:
|
|
14
|
-
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
15
|
-
outline:
|
|
16
|
-
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
17
|
-
secondary:
|
|
18
|
-
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
19
|
-
ghost:
|
|
20
|
-
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
21
|
-
link: "text-primary underline-offset-4 hover:underline",
|
|
22
|
-
},
|
|
23
|
-
size: {
|
|
24
|
-
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
25
|
-
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
26
|
-
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
27
|
-
icon: "size-9",
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
defaultVariants: {
|
|
31
|
-
variant: "default",
|
|
32
|
-
size: "default",
|
|
33
|
-
},
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
|
|
37
|
-
function Button({
|
|
38
|
-
className,
|
|
39
|
-
variant,
|
|
40
|
-
size,
|
|
41
|
-
asChild = false,
|
|
42
|
-
...props
|
|
43
|
-
}: React.ComponentProps<"button"> &
|
|
44
|
-
VariantProps<typeof buttonVariants> & {
|
|
45
|
-
asChild?: boolean
|
|
46
|
-
}) {
|
|
47
|
-
const Comp = asChild ? Slot : "button";
|
|
48
|
-
|
|
49
|
-
return (
|
|
50
|
-
<Comp
|
|
51
|
-
data-slot="button"
|
|
52
|
-
className={cn(buttonVariants({ variant, size, className }))}
|
|
53
|
-
{...props}
|
|
54
|
-
/>
|
|
55
|
-
);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
export { Button, buttonVariants };
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
3
|
+
import { cva, type VariantProps } from "class-variance-authority";
|
|
4
|
+
|
|
5
|
+
import { cn } from "@/lib/utils";
|
|
6
|
+
|
|
7
|
+
const buttonVariants = cva(
|
|
8
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
13
|
+
destructive:
|
|
14
|
+
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
15
|
+
outline:
|
|
16
|
+
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
17
|
+
secondary:
|
|
18
|
+
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
19
|
+
ghost:
|
|
20
|
+
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
21
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
22
|
+
},
|
|
23
|
+
size: {
|
|
24
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
25
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
26
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
27
|
+
icon: "size-9",
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
defaultVariants: {
|
|
31
|
+
variant: "default",
|
|
32
|
+
size: "default",
|
|
33
|
+
},
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
function Button({
|
|
38
|
+
className,
|
|
39
|
+
variant,
|
|
40
|
+
size,
|
|
41
|
+
asChild = false,
|
|
42
|
+
...props
|
|
43
|
+
}: React.ComponentProps<"button"> &
|
|
44
|
+
VariantProps<typeof buttonVariants> & {
|
|
45
|
+
asChild?: boolean
|
|
46
|
+
}) {
|
|
47
|
+
const Comp = asChild ? Slot : "button";
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<Comp
|
|
51
|
+
data-slot="button"
|
|
52
|
+
className={cn(buttonVariants({ variant, size, className }))}
|
|
53
|
+
{...props}
|
|
54
|
+
/>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export { Button, buttonVariants };
|
|
@@ -1,92 +1,92 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
import { cn } from "@/lib/utils";
|
|
4
|
-
|
|
5
|
-
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
|
6
|
-
return (
|
|
7
|
-
<div
|
|
8
|
-
data-slot="card"
|
|
9
|
-
className={cn(
|
|
10
|
-
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
|
11
|
-
className
|
|
12
|
-
)}
|
|
13
|
-
{...props}
|
|
14
|
-
/>
|
|
15
|
-
);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
19
|
-
return (
|
|
20
|
-
<div
|
|
21
|
-
data-slot="card-header"
|
|
22
|
-
className={cn(
|
|
23
|
-
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
|
24
|
-
className
|
|
25
|
-
)}
|
|
26
|
-
{...props}
|
|
27
|
-
/>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
32
|
-
return (
|
|
33
|
-
<div
|
|
34
|
-
data-slot="card-title"
|
|
35
|
-
className={cn("leading-none font-semibold", className)}
|
|
36
|
-
{...props}
|
|
37
|
-
/>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
|
42
|
-
return (
|
|
43
|
-
<div
|
|
44
|
-
data-slot="card-description"
|
|
45
|
-
className={cn("text-muted-foreground text-sm", className)}
|
|
46
|
-
{...props}
|
|
47
|
-
/>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
|
52
|
-
return (
|
|
53
|
-
<div
|
|
54
|
-
data-slot="card-action"
|
|
55
|
-
className={cn(
|
|
56
|
-
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
|
57
|
-
className
|
|
58
|
-
)}
|
|
59
|
-
{...props}
|
|
60
|
-
/>
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
65
|
-
return (
|
|
66
|
-
<div
|
|
67
|
-
data-slot="card-content"
|
|
68
|
-
className={cn("px-6", className)}
|
|
69
|
-
{...props}
|
|
70
|
-
/>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
75
|
-
return (
|
|
76
|
-
<div
|
|
77
|
-
data-slot="card-footer"
|
|
78
|
-
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
|
79
|
-
{...props}
|
|
80
|
-
/>
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
export {
|
|
85
|
-
Card,
|
|
86
|
-
CardHeader,
|
|
87
|
-
CardFooter,
|
|
88
|
-
CardTitle,
|
|
89
|
-
CardAction,
|
|
90
|
-
CardDescription,
|
|
91
|
-
CardContent,
|
|
92
|
-
};
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
3
|
+
import { cn } from "@/lib/utils";
|
|
4
|
+
|
|
5
|
+
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
|
6
|
+
return (
|
|
7
|
+
<div
|
|
8
|
+
data-slot="card"
|
|
9
|
+
className={cn(
|
|
10
|
+
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
|
11
|
+
className
|
|
12
|
+
)}
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
19
|
+
return (
|
|
20
|
+
<div
|
|
21
|
+
data-slot="card-header"
|
|
22
|
+
className={cn(
|
|
23
|
+
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
|
24
|
+
className
|
|
25
|
+
)}
|
|
26
|
+
{...props}
|
|
27
|
+
/>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
32
|
+
return (
|
|
33
|
+
<div
|
|
34
|
+
data-slot="card-title"
|
|
35
|
+
className={cn("leading-none font-semibold", className)}
|
|
36
|
+
{...props}
|
|
37
|
+
/>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
|
42
|
+
return (
|
|
43
|
+
<div
|
|
44
|
+
data-slot="card-description"
|
|
45
|
+
className={cn("text-muted-foreground text-sm", className)}
|
|
46
|
+
{...props}
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
|
52
|
+
return (
|
|
53
|
+
<div
|
|
54
|
+
data-slot="card-action"
|
|
55
|
+
className={cn(
|
|
56
|
+
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
|
57
|
+
className
|
|
58
|
+
)}
|
|
59
|
+
{...props}
|
|
60
|
+
/>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
65
|
+
return (
|
|
66
|
+
<div
|
|
67
|
+
data-slot="card-content"
|
|
68
|
+
className={cn("px-6", className)}
|
|
69
|
+
{...props}
|
|
70
|
+
/>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
75
|
+
return (
|
|
76
|
+
<div
|
|
77
|
+
data-slot="card-footer"
|
|
78
|
+
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export {
|
|
85
|
+
Card,
|
|
86
|
+
CardHeader,
|
|
87
|
+
CardFooter,
|
|
88
|
+
CardTitle,
|
|
89
|
+
CardAction,
|
|
90
|
+
CardDescription,
|
|
91
|
+
CardContent,
|
|
92
|
+
};
|