@skylab-kulubu/skylcn-ui 0.1.4 → 0.1.5
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.
|
@@ -18,7 +18,7 @@ export type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVari
|
|
|
18
18
|
*/
|
|
19
19
|
hoverIcon?: LucideIcon;
|
|
20
20
|
};
|
|
21
|
-
export declare function Button({ className, variant, size, pending, disabled, children, render, nativeButton, hoverIcon: HoverIcon, ...props }: ButtonProps): import("react").JSX.Element;
|
|
21
|
+
export declare function Button({ className, variant, size, pending, disabled, children, render, nativeButton, focusableWhenDisabled, hoverIcon: HoverIcon, ...props }: ButtonProps): import("react").JSX.Element;
|
|
22
22
|
export type IconButtonProps = Omit<ButtonProps, 'children'> & {
|
|
23
23
|
icon: LucideIcon;
|
|
24
24
|
/** Read by screen readers and shown as the native tooltip. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,cAAc;;;8EAkCnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,GAC7C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,cAAc;;;8EAkCnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,GAC7C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAQJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,qBAAqB,EACrB,SAAS,EAAE,SAAS,EACpB,GAAG,KAAK,EACT,EAAE,WAAW,+BAmFb;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IAC5D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,2EAA2E;AAC3E,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EACL,IAAa,EACb,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,+BAMjB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Button as ButtonPrimitive } from '@base-ui/react/button';
|
|
4
4
|
import { cva } from 'class-variance-authority';
|
|
5
|
-
import { isValidElement } from 'react';
|
|
5
|
+
import { cloneElement, isValidElement } from 'react';
|
|
6
6
|
import { cn } from '../lib/cn.js';
|
|
7
7
|
import { usePendingIndicator } from '../lib/use-pending-indicator.js';
|
|
8
8
|
import { SkylabLoader } from './skylab-loader.js';
|
|
@@ -34,14 +34,35 @@ const buttonVariants = cva([
|
|
|
34
34
|
},
|
|
35
35
|
defaultVariants: { variant: 'outline', size: 'md' },
|
|
36
36
|
});
|
|
37
|
-
export function Button({ className, variant, size, pending = false, disabled, children, render, nativeButton, hoverIcon: HoverIcon, ...props }) {
|
|
37
|
+
export function Button({ className, variant, size, pending = false, disabled, children, render, nativeButton, focusableWhenDisabled, hoverIcon: HoverIcon, ...props }) {
|
|
38
38
|
const busy = usePendingIndicator(pending);
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
const content = (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "button-content", className: cn('inline-flex items-center justify-center gap-[inherit] transition-opacity duration-(--motion-duration-fast)', busy && 'opacity-0', HoverIcon && 'relative'), children: HoverIcon ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "inline-flex items-center gap-[inherit] transition-[translate,opacity] duration-(--motion-duration-base) ease-enter group-hover/button:translate-y-full group-hover/button:opacity-0 group-focus-visible/button:translate-y-full group-focus-visible/button:opacity-0 motion-reduce:translate-y-0!", children: children }), _jsx("span", { "aria-hidden": true, className: "absolute inset-0 grid -translate-y-full place-items-center opacity-0 transition-[translate,opacity] duration-(--motion-duration-base) ease-enter group-hover/button:translate-y-0 group-hover/button:opacity-100 group-focus-visible/button:translate-y-0 group-focus-visible/button:opacity-100 motion-reduce:translate-y-0!", children: _jsx(HoverIcon, {}) })] })) : (children) }), busy ? (_jsx(SkylabLoader, { size: 16, className: "absolute inset-0 m-auto enter-fade text-current" })) : null] }));
|
|
40
|
+
// Rendered as a link (render={<a href />} or a router Link) it stays a link: Base UI's
|
|
41
|
+
// Button would give it role="button", so the link itself takes the button's look.
|
|
42
|
+
if (nativeButton === undefined && isValidElement(render) && render.type !== 'button') {
|
|
43
|
+
const link = render;
|
|
44
|
+
const blocked = Boolean(disabled || pending);
|
|
45
|
+
const linkProps = props;
|
|
46
|
+
return cloneElement(link, {
|
|
47
|
+
...linkProps,
|
|
48
|
+
'data-slot': 'button',
|
|
49
|
+
className: cn(buttonVariants({ variant, size }), 'aria-disabled:pointer-events-none aria-disabled:opacity-60', HoverIcon && 'overflow-hidden', link.props.className, typeof className === 'string' ? className : undefined),
|
|
50
|
+
'aria-disabled': blocked || undefined,
|
|
51
|
+
tabIndex: blocked ? -1 : linkProps.tabIndex,
|
|
52
|
+
onClick: (event) => {
|
|
53
|
+
if (blocked) {
|
|
54
|
+
event.preventDefault();
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
link.props.onClick?.(event);
|
|
58
|
+
linkProps.onClick?.(event);
|
|
59
|
+
},
|
|
60
|
+
}, content);
|
|
61
|
+
}
|
|
62
|
+
return (_jsx(ButtonPrimitive, { "data-slot": "button",
|
|
42
63
|
// Clipping at the button's own edge keeps the sliding icon whole; the
|
|
43
64
|
// 16px content box would shave its strokes
|
|
44
|
-
className: cn(buttonVariants({ variant, size }), HoverIcon && 'overflow-hidden', className), disabled: disabled || pending || busy, "aria-busy": busy || undefined, render: render, nativeButton:
|
|
65
|
+
className: cn(buttonVariants({ variant, size }), HoverIcon && 'overflow-hidden', className), disabled: disabled || pending || busy, "aria-busy": busy || undefined, render: render, nativeButton: nativeButton ?? true, focusableWhenDisabled: focusableWhenDisabled, ...props, children: content }));
|
|
45
66
|
}
|
|
46
67
|
/** A square button holding one icon; the admin toolbars' action button. */
|
|
47
68
|
export function IconButton({ icon: Icon, label, size = 'icon', pending, title, ...props }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"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"}
|