@cytario/design 2.1.0 → 2.1.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/dist/index.js +10 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -177,6 +177,7 @@ function Button({
|
|
|
177
177
|
...props
|
|
178
178
|
}) {
|
|
179
179
|
const { inGroup, position } = useInputGroup();
|
|
180
|
+
const groupGhost = inGroup && variant === "ghost" ? "bg-[var(--color-surface-default)] text-[var(--color-text-secondary)] border border-[var(--color-border-default)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] pressed:bg-[var(--color-surface-pressed)] pressed:text-[var(--color-text-primary)]" : "";
|
|
180
181
|
const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-[var(--border-radius-md)]";
|
|
181
182
|
const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
|
|
182
183
|
const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
|
|
@@ -194,7 +195,7 @@ function Button({
|
|
|
194
195
|
focusRing,
|
|
195
196
|
"disabled:opacity-50 disabled:pointer-events-none",
|
|
196
197
|
isLoading ? "pointer-events-none" : "",
|
|
197
|
-
variantStyles[variant],
|
|
198
|
+
groupGhost || variantStyles[variant],
|
|
198
199
|
sizeStyles[size],
|
|
199
200
|
marginClass,
|
|
200
201
|
className
|
|
@@ -258,6 +259,11 @@ var squareSizeStyles = {
|
|
|
258
259
|
md: "h-10 w-10",
|
|
259
260
|
lg: "h-12 w-12"
|
|
260
261
|
};
|
|
262
|
+
var squareWidthOnly = {
|
|
263
|
+
sm: "w-8",
|
|
264
|
+
md: "w-10",
|
|
265
|
+
lg: "w-12"
|
|
266
|
+
};
|
|
261
267
|
var iconSizeMap2 = {
|
|
262
268
|
sm: "sm",
|
|
263
269
|
md: "sm",
|
|
@@ -288,6 +294,7 @@ function IconButton({
|
|
|
288
294
|
...props
|
|
289
295
|
}) {
|
|
290
296
|
const { inGroup, position } = useInputGroup();
|
|
297
|
+
const groupGhost = inGroup && variant === "ghost" ? "bg-[var(--color-surface-default)] text-[var(--color-text-secondary)] border border-[var(--color-border-default)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] pressed:bg-[var(--color-surface-pressed)] pressed:text-[var(--color-text-primary)]" : "";
|
|
291
298
|
const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-[var(--border-radius-md)]";
|
|
292
299
|
const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
|
|
293
300
|
const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
|
|
@@ -304,8 +311,8 @@ function IconButton({
|
|
|
304
311
|
focusRing,
|
|
305
312
|
"disabled:opacity-50 disabled:pointer-events-none",
|
|
306
313
|
isLoading ? "pointer-events-none" : "",
|
|
307
|
-
variantStyles[variant],
|
|
308
|
-
squareSizeStyles[size],
|
|
314
|
+
groupGhost || variantStyles[variant],
|
|
315
|
+
inGroup ? squareWidthOnly[size] : squareSizeStyles[size],
|
|
309
316
|
marginClass,
|
|
310
317
|
className
|
|
311
318
|
].filter(Boolean).join(" "),
|