@hexdspace/react 0.1.1 → 0.1.3
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 +3 -24
- package/dist/css/base-theme.css +2 -0
- package/dist/css/component.css +0 -51
- package/dist/index.js +83 -69
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,34 +17,21 @@ pnpm add react react-dom react-router-dom radix-ui lucide-react react-toastify @
|
|
|
17
17
|
Tailwind requirements (for the theme + utilities):
|
|
18
18
|
|
|
19
19
|
```sh
|
|
20
|
-
pnpm add -D tailwindcss @tailwindcss/postcss
|
|
20
|
+
pnpm add -D tailwindcss @tailwindcss/postcss tailwind-scrollbar
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
|
24
24
|
|
|
25
|
-
Import the theme into your Tailwind entry stylesheet
|
|
25
|
+
Import the theme into your Tailwind entry stylesheet and specify tailwind config:
|
|
26
26
|
|
|
27
27
|
```css
|
|
28
28
|
/* src/index.css */
|
|
29
|
-
@import "tailwindcss";
|
|
30
29
|
@import "@hexdspace/react/css";
|
|
31
30
|
@config "../tailwind.config.ts"; /* adjust path if needed */
|
|
32
31
|
|
|
33
32
|
/* Your app styles */
|
|
34
33
|
```
|
|
35
34
|
|
|
36
|
-
Make sure PostCSS inlines imports before Tailwind:
|
|
37
|
-
|
|
38
|
-
```js
|
|
39
|
-
// postcss.config.js
|
|
40
|
-
export default {
|
|
41
|
-
plugins: {
|
|
42
|
-
"postcss-import": {},
|
|
43
|
-
"@tailwindcss/postcss": {},
|
|
44
|
-
},
|
|
45
|
-
};
|
|
46
|
-
```
|
|
47
|
-
|
|
48
35
|
### Tailwind config
|
|
49
36
|
|
|
50
37
|
Point Tailwind at this package so it can generate utilities used by the components.
|
|
@@ -65,7 +52,7 @@ export default {
|
|
|
65
52
|
};
|
|
66
53
|
```
|
|
67
54
|
|
|
68
|
-
For a monorepo/workspace
|
|
55
|
+
For a monorepo/workspace:
|
|
69
56
|
|
|
70
57
|
```js
|
|
71
58
|
// tailwind.config.js (app)
|
|
@@ -91,11 +78,3 @@ export function Example() {
|
|
|
91
78
|
);
|
|
92
79
|
}
|
|
93
80
|
```
|
|
94
|
-
|
|
95
|
-
## Troubleshooting
|
|
96
|
-
|
|
97
|
-
- Theme styles apply but component utilities are missing:
|
|
98
|
-
- Ensure your Tailwind entry includes `@config` so Tailwind loads `tailwind.config.*`.
|
|
99
|
-
- Ensure the `content` array includes this package (dist or source).
|
|
100
|
-
- `tailwind-scrollbar` styles are missing:
|
|
101
|
-
- Install `tailwind-scrollbar` (the theme registers it via `@plugin`).
|
package/dist/css/base-theme.css
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700&display=swap');
|
|
3
3
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
|
4
4
|
|
|
5
|
+
@import 'tailwindcss';
|
|
6
|
+
|
|
5
7
|
@import './primitive.css';
|
|
6
8
|
@import './semantic.css';
|
|
7
9
|
@import './component.css';
|
package/dist/css/component.css
CHANGED
|
@@ -120,57 +120,6 @@
|
|
|
120
120
|
-webkit-text-fill-color: transparent;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
.btn {
|
|
124
|
-
@apply inline-flex items-center justify-center gap-2 leading-none
|
|
125
|
-
state-layer text-sm font-medium select-none cursor-pointer;
|
|
126
|
-
position: relative;
|
|
127
|
-
border-radius: var(--radius-btn);
|
|
128
|
-
box-shadow: var(--shadow-10);
|
|
129
|
-
transition-property: background-color, color, box-shadow, transform;
|
|
130
|
-
transition-duration: 150ms;
|
|
131
|
-
transition-timing-function: ease;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.btn.shadow-none {
|
|
135
|
-
box-shadow: none;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.btn:disabled, .btn.disabled {
|
|
139
|
-
opacity: 0.5;
|
|
140
|
-
pointer-events: none;
|
|
141
|
-
cursor: not-allowed;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.btn-primary {
|
|
145
|
-
background: var(--brand);
|
|
146
|
-
color: var(--text-inverted);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.btn-secondary {
|
|
150
|
-
border: 1px solid var(--border);
|
|
151
|
-
background: var(--surface-2);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.btn-success {
|
|
155
|
-
background: var(--success);
|
|
156
|
-
color: var(--on-success);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.btn-info {
|
|
160
|
-
background: var(--info);
|
|
161
|
-
color: var(--on-info);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.btn-warning {
|
|
165
|
-
background: var(--warning);
|
|
166
|
-
color: var(--on-warning);
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.btn-danger {
|
|
170
|
-
background: var(--danger);
|
|
171
|
-
color: var(--on-danger);
|
|
172
|
-
}
|
|
173
|
-
|
|
174
123
|
:root .prose code {
|
|
175
124
|
background: rgba(0, 0, 0, 0.08);
|
|
176
125
|
padding: 3px 3px 0;
|
package/dist/index.js
CHANGED
|
@@ -1065,60 +1065,70 @@ function cn(...inputs) {
|
|
|
1065
1065
|
|
|
1066
1066
|
// src/ui/components/Button.tsx
|
|
1067
1067
|
import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1068
|
+
var buttonBase = cn(
|
|
1069
|
+
"relative isolate inline-flex items-center justify-center gap-2 leading-none text-sm font-medium select-none cursor-pointer",
|
|
1070
|
+
"rounded-[var(--radius-btn)]",
|
|
1071
|
+
"transition-[background-color,color,box-shadow,transform] duration-150 ease",
|
|
1072
|
+
"[--state-hover:color-mix(in_oklab,currentColor,transparent_92%)]",
|
|
1073
|
+
"[--state-active:color-mix(in_oklab,currentColor,transparent_86%)]",
|
|
1074
|
+
"after:content-[''] after:absolute after:inset-0 after:rounded-[inherit] after:bg-[var(--state-hover)] after:opacity-0 after:pointer-events-none after:transition-opacity after:duration-100 after:ease",
|
|
1075
|
+
"hover:after:opacity-100 active:after:bg-[var(--state-active)] active:after:opacity-100",
|
|
1076
|
+
"disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
|
|
1077
|
+
);
|
|
1068
1078
|
var pushChrome = cn(
|
|
1069
|
-
"
|
|
1070
|
-
"
|
|
1071
|
-
"
|
|
1079
|
+
"border-b-[4px]",
|
|
1080
|
+
"transition-all",
|
|
1081
|
+
"duration-100",
|
|
1072
1082
|
"ease-out",
|
|
1073
|
-
"
|
|
1074
|
-
"hover
|
|
1083
|
+
"shadow-[0_2px_4px_rgba(0,0,0,0.28),0_8px_16px_rgba(0,0,0,0.14)]",
|
|
1084
|
+
"hover:shadow-[0_3px_6px_rgba(0,0,0,0.30),0_12px_22px_rgba(0,0,0,0.18)]",
|
|
1075
1085
|
"hover:-translate-y-[2px]",
|
|
1076
1086
|
"active:translate-y-[1px]"
|
|
1077
1087
|
);
|
|
1078
1088
|
var softChrome = cn(
|
|
1079
1089
|
"border",
|
|
1080
|
-
"
|
|
1081
|
-
"
|
|
1090
|
+
"border-[color:color-mix(in_oklab,var(--border),transparent_20%)]",
|
|
1091
|
+
"shadow-[0_1px_0_rgba(255,255,255,0.65)_inset,0_3px_8px_rgba(0,0,0,0.14)]"
|
|
1082
1092
|
);
|
|
1083
1093
|
var insetChrome = cn(
|
|
1084
1094
|
"border",
|
|
1085
|
-
"
|
|
1086
|
-
"
|
|
1095
|
+
"border-[color:color-mix(in_oklab,var(--border),transparent_35%)]",
|
|
1096
|
+
"shadow-[inset_0_2px_6px_rgba(0,0,0,0.18)]"
|
|
1087
1097
|
);
|
|
1088
1098
|
var glassChrome = cn(
|
|
1089
|
-
"
|
|
1090
|
-
"
|
|
1091
|
-
"
|
|
1099
|
+
"backdrop-blur-[6px]",
|
|
1100
|
+
"border",
|
|
1101
|
+
"shadow-[0_8px_18px_rgba(0,0,0,0.12)]"
|
|
1092
1102
|
);
|
|
1093
1103
|
var glowChrome = cn(
|
|
1094
|
-
"
|
|
1095
|
-
"
|
|
1096
|
-
"hover
|
|
1104
|
+
"border",
|
|
1105
|
+
"shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_40%),0_6px_16px_color-mix(in_oklab,var(--border),transparent_70%)]",
|
|
1106
|
+
"hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_25%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]"
|
|
1097
1107
|
);
|
|
1098
1108
|
var hairlineChrome = cn(
|
|
1099
|
-
"
|
|
1100
|
-
"
|
|
1101
|
-
"
|
|
1102
|
-
"
|
|
1103
|
-
"
|
|
1109
|
+
"border",
|
|
1110
|
+
"border-[color:color-mix(in_oklab,var(--border),transparent_60%)]",
|
|
1111
|
+
"bg-transparent",
|
|
1112
|
+
"font-thin",
|
|
1113
|
+
"shadow-none"
|
|
1104
1114
|
);
|
|
1105
|
-
var buttonVariants = cva(
|
|
1115
|
+
var buttonVariants = cva(buttonBase, {
|
|
1106
1116
|
variants: {
|
|
1107
1117
|
variant: {
|
|
1108
|
-
primary: "
|
|
1109
|
-
secondary: "
|
|
1118
|
+
primary: "bg-[var(--brand)] text-[var(--text-inverted)]",
|
|
1119
|
+
secondary: "border border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-1)]",
|
|
1110
1120
|
outline: "bg-transparent text-[var(--text-1)] border border-[var(--border)] shadow-none",
|
|
1111
1121
|
ghost: "bg-transparent text-[var(--text-1)] shadow-none",
|
|
1112
|
-
success: "
|
|
1113
|
-
info: "
|
|
1114
|
-
warning: "
|
|
1115
|
-
danger: "
|
|
1122
|
+
success: "bg-[var(--success)] text-[var(--on-success)]",
|
|
1123
|
+
info: "bg-[var(--info)] text-[var(--on-info)]",
|
|
1124
|
+
warning: "bg-[var(--warning)] text-[var(--on-warning)]",
|
|
1125
|
+
danger: "bg-[var(--danger)] text-[var(--on-danger)]",
|
|
1116
1126
|
link: "bg-transparent p-0 h-auto shadow-none text-[var(--link)] hover:underline hover:text-[var(--link-hover)]"
|
|
1117
1127
|
},
|
|
1118
1128
|
size: {
|
|
1119
1129
|
sm: "px-3 py-1.5",
|
|
1120
1130
|
md: "px-3.5 py-2.5",
|
|
1121
|
-
lg: "px-4.5 py-3
|
|
1131
|
+
lg: "px-4.5 py-3 text-base",
|
|
1122
1132
|
icon: "h-10 w-10 p-0"
|
|
1123
1133
|
},
|
|
1124
1134
|
chrome: {
|
|
@@ -1133,55 +1143,55 @@ var buttonVariants = cva("btn", {
|
|
|
1133
1143
|
fullWidth: { true: "w-full", false: "" }
|
|
1134
1144
|
},
|
|
1135
1145
|
compoundVariants: [
|
|
1136
|
-
{ variant: "ghost", className: "
|
|
1137
|
-
{ variant: "link", className: "
|
|
1138
|
-
{ chrome: "soft", className: "
|
|
1139
|
-
{ chrome: "glass", className: "
|
|
1146
|
+
{ variant: "ghost", className: "border-0" },
|
|
1147
|
+
{ variant: "link", className: "border-0" },
|
|
1148
|
+
{ chrome: "soft", className: "text-[var(--text-1)]" },
|
|
1149
|
+
{ chrome: "glass", className: "text-[var(--text-1)]" },
|
|
1140
1150
|
{ chrome: "push", variant: "primary", className: "border-b-[color:var(--brand-90)]" },
|
|
1141
1151
|
{ chrome: "push", variant: "secondary", className: "border-b-[color:color-mix(in oklab, var(--border), transparent 50%)]" },
|
|
1142
1152
|
{ chrome: "push", variant: "outline", className: "border-b-[color:color-mix(in oklab, var(--border), transparent 50%)]" },
|
|
1143
|
-
{ chrome: "push", variant: "ghost", className: "border-b-transparent
|
|
1153
|
+
{ chrome: "push", variant: "ghost", className: "border-b-transparent shadow-none" },
|
|
1144
1154
|
{ chrome: "push", variant: "success", className: "border-b-[color:var(--success-80)]" },
|
|
1145
1155
|
{ chrome: "push", variant: "info", className: "border-b-[color:var(--info-80)]" },
|
|
1146
1156
|
{ chrome: "push", variant: "warning", className: "border-b-[color:var(--warning-80)]" },
|
|
1147
1157
|
{ chrome: "push", variant: "danger", className: "border-b-[color:var(--danger-80)]" },
|
|
1148
|
-
{ chrome: "push", variant: "link", className: "border-b-0
|
|
1149
|
-
{ chrome: "soft", variant: "primary", className: cn("
|
|
1150
|
-
{ chrome: "soft", variant: "secondary", className: cn("
|
|
1151
|
-
{ chrome: "soft", variant: "outline", className: cn("
|
|
1152
|
-
{ chrome: "soft", variant: "ghost", className: "
|
|
1153
|
-
{ chrome: "soft", variant: "success", className: cn("
|
|
1154
|
-
{ chrome: "soft", variant: "info", className: cn("
|
|
1155
|
-
{ chrome: "soft", variant: "warning", className: cn("
|
|
1156
|
-
{ chrome: "soft", variant: "danger", className: cn("
|
|
1157
|
-
{ chrome: "soft", variant: "link", className: cn("
|
|
1158
|
-
{ chrome: "glass", variant: "primary", className: cn("
|
|
1159
|
-
{ chrome: "glass", variant: "secondary", className: cn("
|
|
1158
|
+
{ chrome: "push", variant: "link", className: "border-b-0 shadow-none" },
|
|
1159
|
+
{ chrome: "soft", variant: "primary", className: cn("bg-[color:color-mix(in_oklab,var(--brand),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--brand),transparent_55%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--brand),transparent_70%)]") },
|
|
1160
|
+
{ chrome: "soft", variant: "secondary", className: cn("bg-[color:color-mix(in_oklab,var(--surface-2),transparent_25%)]", "border-[color:color-mix(in_oklab,var(--border),transparent_15%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--border),transparent_70%)]") },
|
|
1161
|
+
{ chrome: "soft", variant: "outline", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_15%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--border),transparent_70%)]") },
|
|
1162
|
+
{ chrome: "soft", variant: "ghost", className: "shadow-[0_3px_8px_color-mix(in_oklab,var(--border),transparent_75%)]" },
|
|
1163
|
+
{ chrome: "soft", variant: "success", className: cn("bg-[color:color-mix(in_oklab,var(--success),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--success),transparent_55%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--success),transparent_70%)]") },
|
|
1164
|
+
{ chrome: "soft", variant: "info", className: cn("bg-[color:color-mix(in_oklab,var(--info),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--info),transparent_55%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--info),transparent_70%)]") },
|
|
1165
|
+
{ chrome: "soft", variant: "warning", className: cn("bg-[color:color-mix(in_oklab,var(--warning),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--warning),transparent_55%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--warning),transparent_70%)]") },
|
|
1166
|
+
{ chrome: "soft", variant: "danger", className: cn("bg-[color:color-mix(in_oklab,var(--danger),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--danger),transparent_55%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--danger),transparent_70%)]") },
|
|
1167
|
+
{ chrome: "soft", variant: "link", className: cn("text-[var(--link)]", "shadow-[0_3px_8px_color-mix(in_oklab,var(--link),transparent_75%)]") },
|
|
1168
|
+
{ chrome: "glass", variant: "primary", className: cn("bg-[color:color-mix(in_oklab,var(--brand),transparent_65%)]", "border-[var(--brand)]") },
|
|
1169
|
+
{ chrome: "glass", variant: "secondary", className: cn("bg-[color:color-mix(in_oklab,var(--surface-2),transparent_35%)]", "border-[color:color-mix(in_oklab,var(--border),transparent_70%)]") },
|
|
1160
1170
|
{ chrome: "glass", variant: "outline", className: "" },
|
|
1161
1171
|
{ chrome: "glass", variant: "ghost", className: "" },
|
|
1162
|
-
{ chrome: "glass", variant: "success", className: cn("
|
|
1163
|
-
{ chrome: "glass", variant: "info", className: cn("
|
|
1164
|
-
{ chrome: "glass", variant: "warning", className: cn("
|
|
1165
|
-
{ chrome: "glass", variant: "danger", className: cn("
|
|
1166
|
-
{ chrome: "glass", variant: "link", className: "
|
|
1167
|
-
{ chrome: "glow", variant: "primary", className: cn("
|
|
1168
|
-
{ chrome: "glow", variant: "secondary", className: cn("
|
|
1169
|
-
{ chrome: "glow", variant: "outline", className: cn("
|
|
1170
|
-
{ chrome: "glow", variant: "ghost", className: "
|
|
1171
|
-
{ chrome: "glow", variant: "success", className: cn("
|
|
1172
|
-
{ chrome: "glow", variant: "info", className: cn("
|
|
1173
|
-
{ chrome: "glow", variant: "warning", className: cn("
|
|
1174
|
-
{ chrome: "glow", variant: "danger", className: cn("
|
|
1175
|
-
{ chrome: "glow", variant: "link", className: "
|
|
1176
|
-
{ chrome: "hairline", variant: "primary", className: "
|
|
1177
|
-
{ chrome: "hairline", variant: "secondary", className: "
|
|
1178
|
-
{ chrome: "hairline", variant: "outline", className: "
|
|
1179
|
-
{ chrome: "hairline", variant: "ghost", className: "
|
|
1180
|
-
{ chrome: "hairline", variant: "success", className: "
|
|
1181
|
-
{ chrome: "hairline", variant: "info", className: "
|
|
1182
|
-
{ chrome: "hairline", variant: "warning", className: "
|
|
1183
|
-
{ chrome: "hairline", variant: "danger", className: "
|
|
1184
|
-
{ chrome: "hairline", variant: "link", className: "
|
|
1172
|
+
{ chrome: "glass", variant: "success", className: cn("bg-[color:color-mix(in_oklab,var(--success),transparent_65%)]", "border-[var(--success)]") },
|
|
1173
|
+
{ chrome: "glass", variant: "info", className: cn("bg-[color:color-mix(in_oklab,var(--info),transparent_65%)]", "border-[var(--info)]") },
|
|
1174
|
+
{ chrome: "glass", variant: "warning", className: cn("bg-[color:color-mix(in_oklab,var(--warning),transparent_65%)]", "border-[var(--warning)]") },
|
|
1175
|
+
{ chrome: "glass", variant: "danger", className: cn("bg-[color:color-mix(in_oklab,var(--danger),transparent_65%)]", "border-[var(--danger)]") },
|
|
1176
|
+
{ chrome: "glass", variant: "link", className: "text-[var(--link)]" },
|
|
1177
|
+
{ chrome: "glow", variant: "primary", className: cn("border-[var(--brand)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--brand),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--brand),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--brand),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--brand),transparent_55%)]") },
|
|
1178
|
+
{ chrome: "glow", variant: "secondary", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_20%)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_15%),0_14px_34px_color-mix(in_oklab,var(--border),transparent_45%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--border),transparent_75%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_12px_30px_color-mix(in_oklab,var(--border),transparent_60%)]") },
|
|
1179
|
+
{ chrome: "glow", variant: "outline", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_20%)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_15%),0_14px_34px_color-mix(in_oklab,var(--border),transparent_45%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--border),transparent_75%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_12px_30px_color-mix(in_oklab,var(--border),transparent_60%)]") },
|
|
1180
|
+
{ chrome: "glow", variant: "ghost", className: "shadow-none border-transparent" },
|
|
1181
|
+
{ chrome: "glow", variant: "success", className: cn("border-[var(--success)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--success),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--success),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--success),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--success),transparent_55%)]") },
|
|
1182
|
+
{ chrome: "glow", variant: "info", className: cn("border-[var(--info)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--info),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--info),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--info),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--info),transparent_55%)]") },
|
|
1183
|
+
{ chrome: "glow", variant: "warning", className: cn("border-[var(--warning)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--warning),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--warning),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--warning),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--warning),transparent_55%)]") },
|
|
1184
|
+
{ chrome: "glow", variant: "danger", className: cn("border-[var(--danger)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--danger),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--danger),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--danger),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--danger),transparent_55%)]") },
|
|
1185
|
+
{ chrome: "glow", variant: "link", className: "text-[var(--link)] shadow-none border-transparent" },
|
|
1186
|
+
{ chrome: "hairline", variant: "primary", className: "border-[color:color-mix(in_oklab,var(--brand),transparent_20%)] text-[var(--brand)]" },
|
|
1187
|
+
{ chrome: "hairline", variant: "secondary", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[var(--text-1)]" },
|
|
1188
|
+
{ chrome: "hairline", variant: "outline", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[var(--text-1)]" },
|
|
1189
|
+
{ chrome: "hairline", variant: "ghost", className: "border-transparent text-[var(--text-1)]" },
|
|
1190
|
+
{ chrome: "hairline", variant: "success", className: "border-[color:color-mix(in_oklab,var(--success),transparent_20%)] text-[var(--success)]" },
|
|
1191
|
+
{ chrome: "hairline", variant: "info", className: "border-[color:color-mix(in_oklab,var(--info),transparent_20%)] text-[var(--info)]" },
|
|
1192
|
+
{ chrome: "hairline", variant: "warning", className: "border-[color:color-mix(in_oklab,var(--warning),transparent_20%)] text-[var(--warning)]" },
|
|
1193
|
+
{ chrome: "hairline", variant: "danger", className: "border-[color:color-mix(in_oklab,var(--danger),transparent_20%)] text-[var(--danger)]" },
|
|
1194
|
+
{ chrome: "hairline", variant: "link", className: "text-[var(--link)] border-transparent" }
|
|
1185
1195
|
],
|
|
1186
1196
|
defaultVariants: { variant: "primary", size: "md", chrome: "flat", fullWidth: false }
|
|
1187
1197
|
});
|
|
@@ -1203,7 +1213,11 @@ var Button = React3.forwardRef(
|
|
|
1203
1213
|
...props
|
|
1204
1214
|
}, ref) => {
|
|
1205
1215
|
const isDisabled = disabled || loading;
|
|
1206
|
-
const classes = cn(
|
|
1216
|
+
const classes = cn(
|
|
1217
|
+
buttonVariants({ variant, size, chrome, fullWidth }),
|
|
1218
|
+
isDisabled && "opacity-50 pointer-events-none cursor-not-allowed",
|
|
1219
|
+
className
|
|
1220
|
+
);
|
|
1207
1221
|
const hasText = React3.Children.count(children) > 0;
|
|
1208
1222
|
const content = /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1209
1223
|
loading ? /* @__PURE__ */ jsx7(
|