@dust-tt/sparkle 0.2.529 → 0.2.530-rc-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.
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/Button.d.ts.map +1 -1
- package/dist/esm/components/Button.js +45 -31
- package/dist/esm/components/Button.js.map +1 -1
- package/dist/esm/components/LinkWrapper.d.ts +5 -0
- package/dist/esm/components/LinkWrapper.d.ts.map +1 -1
- package/dist/esm/components/LinkWrapper.js +3 -2
- package/dist/esm/components/LinkWrapper.js.map +1 -1
- package/dist/esm/context.d.ts +2 -2
- package/dist/esm/context.d.ts.map +1 -1
- package/dist/esm/context.js +2 -2
- package/dist/esm/context.js.map +1 -1
- package/dist/esm/stories/Button.stories.d.ts.map +1 -1
- package/dist/esm/stories/Button.stories.js +15 -5
- package/dist/esm/stories/Button.stories.js.map +1 -1
- package/dist/esm/stories/Chip.stories.d.ts +5 -0
- package/dist/esm/stories/Chip.stories.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Button.tsx +91 -52
- package/src/components/LinkWrapper.tsx +47 -19
- package/src/context.tsx +14 -2
- package/src/stories/Button.stories.tsx +30 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAIL,gBAAgB,EAOjB,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,eAAe,qFAOlB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjE,eAAO,MAAM,YAAY,8CAA+C,CAAC;AACzE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAiB3D,QAAA,MAAM,cAAc;;;mFA2EnB,CAAC;AA6CF,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,UAAU,2FAaf,CAAC;AAGF,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAGvC,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,cAAc,EAAE,YAAY,CAM9D,CAAC;AAUF,KAAK,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACxD,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuBF,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAE/D,QAAA,MAAM,MAAM,uFAoJX,CAAC;AAIF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -2,7 +2,6 @@ import { __assign, __rest } from "tslib";
|
|
|
2
2
|
import { Slot } from "@radix-ui/react-slot";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import * as React from "react";
|
|
5
|
-
import { useMemo } from "react";
|
|
6
5
|
import { Counter, Icon, LinkWrapper, Spinner, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, } from "../components";
|
|
7
6
|
import { ChevronDownIcon } from "../icons/app";
|
|
8
7
|
import { cn } from "../lib/utils";
|
|
@@ -15,16 +14,24 @@ export var BUTTON_VARIANTS = [
|
|
|
15
14
|
"ghost-secondary",
|
|
16
15
|
];
|
|
17
16
|
export var BUTTON_SIZES = ["xmini", "mini", "xs", "sm", "md"];
|
|
17
|
+
var disabledStyles = {
|
|
18
|
+
primary: "disabled:s-bg-primary-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-primary-muted-night",
|
|
19
|
+
highlight: "disabled:s-bg-highlight-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-highlight-muted-night",
|
|
20
|
+
warning: "disabled:s-bg-warning-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-warning-muted-night",
|
|
21
|
+
outline: "disabled:s-text-primary-muted dark:disabled:s-text-primary-muted-night disabled:s-border-primary-100 dark:disabled:s-border-primary-100-night",
|
|
22
|
+
ghost: "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night",
|
|
23
|
+
"ghost-secondary": "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night",
|
|
24
|
+
};
|
|
18
25
|
// Define button styling with cva
|
|
19
26
|
var buttonVariants = cva(cn("s-inline-flex s-items-center s-justify-center s-whitespace-nowrap s-ring-offset-background s-transition-colors s-ring-inset", "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring focus-visible:s-ring-offset-0", "dark:focus-visible:s-ring-0 dark:focus-visible:s-ring-offset-1"), {
|
|
20
27
|
variants: {
|
|
21
28
|
variant: {
|
|
22
|
-
primary: cn("s-bg-primary-800 dark:s-bg-primary-800-night", "s-text-primary-50 dark:s-text-primary-50-night", "hover:s-bg-primary-light dark:hover:s-bg-primary-dark-night", "active:s-bg-primary-dark dark:active:s-bg-primary-light-night",
|
|
23
|
-
highlight: cn("s-bg-highlight", "s-text-highlight-50", "hover:s-bg-highlight-light", "active:s-bg-highlight-dark",
|
|
24
|
-
warning: cn("s-bg-warning", "s-text-warning-50", "hover:s-bg-warning-light", "active:s-bg-warning-dark",
|
|
25
|
-
outline: cn("s-border", "s-border-border dark:s-border-border-night", "s-text-primary dark:s-text-primary-night", "s-bg-background dark:s-bg-background-night", "hover:s-text-primary dark:hover:s-text-primary-night", "hover:s-bg-primary-100 dark:hover:s-bg-primary-900", "hover:s-border-primary-150 dark:hover:s-border-border-night", "active:s-bg-primary-300 dark:active:s-bg-primary-900",
|
|
26
|
-
ghost: cn("s-border", "s-border-border/0 dark:s-border-border-night/0", "s-text-foreground dark:s-text-white", "hover:s-bg-primary-100 dark:hover:s-bg-primary-900", "hover:s-text-primary-900 dark:hover:s-text-white", "hover:s-border-border-dark dark:hover:s-border-border-night", "active:s-bg-primary-300 dark:active:s-bg-primary-900",
|
|
27
|
-
"ghost-secondary": cn("s-border", "s-border-border/0 dark:s-border-border-night/0", "s-text-muted-foreground dark:s-text-muted-foreground-night", "hover:s-bg-primary-100 dark:hover:s-bg-primary-900", "hover:s-text-primary-900 dark:hover:s-text-primary-900-night", "hover:s-border-border-dark dark:hover:s-border-border-night", "active:s-bg-primary-300 dark:active:s-bg-primary-900", "
|
|
29
|
+
primary: cn("s-bg-primary-800 dark:s-bg-primary-800-night", "s-text-primary-50 dark:s-text-primary-50-night", "hover:s-bg-primary-light dark:hover:s-bg-primary-dark-night", "active:s-bg-primary-dark dark:active:s-bg-primary-light-night", disabledStyles.primary),
|
|
30
|
+
highlight: cn("s-bg-highlight", "s-text-highlight-50", "hover:s-bg-highlight-light", "active:s-bg-highlight-dark", disabledStyles.highlight),
|
|
31
|
+
warning: cn("s-bg-warning", "s-text-warning-50", "hover:s-bg-warning-light", "active:s-bg-warning-dark", disabledStyles.warning),
|
|
32
|
+
outline: cn("s-border", "s-border-border dark:s-border-border-night", "s-text-primary dark:s-text-primary-night", "s-bg-background dark:s-bg-background-night", "hover:s-text-primary dark:hover:s-text-primary-night", "hover:s-bg-primary-100 dark:hover:s-bg-primary-900", "hover:s-border-primary-150 dark:hover:s-border-border-night", "active:s-bg-primary-300 dark:active:s-bg-primary-900", disabledStyles.outline),
|
|
33
|
+
ghost: cn("s-border", "s-border-border/0 dark:s-border-border-night/0", "s-text-foreground dark:s-text-white", "hover:s-bg-primary-100 dark:hover:s-bg-primary-900", "hover:s-text-primary-900 dark:hover:s-text-white", "hover:s-border-border-dark dark:hover:s-border-border-night", "active:s-bg-primary-300 dark:active:s-bg-primary-900", disabledStyles.ghost),
|
|
34
|
+
"ghost-secondary": cn("s-border", "s-border-border/0 dark:s-border-border-night/0", "s-text-muted-foreground dark:s-text-muted-foreground-night", "hover:s-bg-primary-100 dark:hover:s-bg-primary-900", "hover:s-text-primary-900 dark:hover:s-text-primary-900-night", "hover:s-border-border-dark dark:hover:s-border-border-night", "active:s-bg-primary-300 dark:active:s-bg-primary-900", disabledStyles["ghost-secondary"]),
|
|
28
35
|
},
|
|
29
36
|
size: {
|
|
30
37
|
xmini: "s-h-6 s-w-6 s-rounded-lg s-label-xs s-gap-1 s-shrink-0",
|
|
@@ -39,6 +46,13 @@ var buttonVariants = cva(cn("s-inline-flex s-items-center s-justify-center s-whi
|
|
|
39
46
|
size: "sm",
|
|
40
47
|
},
|
|
41
48
|
});
|
|
49
|
+
var getDisabledClasses = function (variant) {
|
|
50
|
+
var disabledStyle = disabledStyles[variant] || "";
|
|
51
|
+
// Remove the "disabled:" prefix since this will be used for <a> tag and not <button>.
|
|
52
|
+
return disabledStyle
|
|
53
|
+
.replace(/disabled:/g, "")
|
|
54
|
+
.replace(/dark:disabled:/g, "dark:");
|
|
55
|
+
};
|
|
42
56
|
var labelVariants = cva("", {
|
|
43
57
|
variants: {
|
|
44
58
|
size: {
|
|
@@ -89,8 +103,16 @@ var COUNTER_SIZE_MAP = {
|
|
|
89
103
|
sm: "sm",
|
|
90
104
|
md: "md",
|
|
91
105
|
};
|
|
106
|
+
var ContentWithTooltip = function (_a) {
|
|
107
|
+
var children = _a.children, tooltip = _a.tooltip;
|
|
108
|
+
return (React.createElement(TooltipProvider, null,
|
|
109
|
+
React.createElement(TooltipRoot, null,
|
|
110
|
+
React.createElement(TooltipTrigger, { asChild: typeof children === "string" ? false : true }, children),
|
|
111
|
+
React.createElement(TooltipPortal, null,
|
|
112
|
+
React.createElement(TooltipContent, null, tooltip)))));
|
|
113
|
+
};
|
|
92
114
|
var Button = React.forwardRef(function (_a, ref) {
|
|
93
|
-
var label = _a.label, icon = _a.icon, className = _a.className, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? "primary" : _c, tooltip = _a.tooltip, _d = _a.isSelect, isSelect = _d === void 0 ? false : _d, _e = _a.isPulsing, isPulsing = _e === void 0 ? false : _e, _f = _a.isCounter, isCounter = _f === void 0 ? false : _f, counterValue = _a.counterValue, _g = _a.size, size = _g === void 0 ? "sm" : _g, href = _a.href, target = _a.target, rel = _a.rel, replace = _a.replace, shallow = _a.shallow, ariaLabel = _a["aria-label"], props = __rest(_a, ["label", "icon", "className", "isLoading", "variant", "tooltip", "isSelect", "isPulsing", "isCounter", "counterValue", "size", "href", "target", "rel", "replace", "shallow", "aria-label"]);
|
|
115
|
+
var label = _a.label, icon = _a.icon, className = _a.className, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? "primary" : _c, tooltip = _a.tooltip, _d = _a.isSelect, isSelect = _d === void 0 ? false : _d, _e = _a.isPulsing, isPulsing = _e === void 0 ? false : _e, _f = _a.isCounter, isCounter = _f === void 0 ? false : _f, counterValue = _a.counterValue, _g = _a.size, size = _g === void 0 ? "sm" : _g, href = _a.href, target = _a.target, rel = _a.rel, replace = _a.replace, shallow = _a.shallow, prefetch = _a.prefetch, ariaLabel = _a["aria-label"], props = __rest(_a, ["label", "icon", "className", "isLoading", "variant", "tooltip", "isSelect", "isPulsing", "isCounter", "counterValue", "size", "href", "target", "rel", "replace", "shallow", "prefetch", "aria-label"]);
|
|
94
116
|
var iconSize = ICON_SIZE_MAP[size];
|
|
95
117
|
var counterSize = COUNTER_SIZE_MAP[size];
|
|
96
118
|
var renderIcon = function (visual, extraClass) {
|
|
@@ -110,32 +132,24 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
110
132
|
label,
|
|
111
133
|
showCounter && (React.createElement(Counter, { value: Number(counterValue), variant: variant || "primary", size: counterSize, isInButton: true })))),
|
|
112
134
|
isSelect && renderChevron(ChevronDownIcon, isLoading ? "" : "-s-mr-1")));
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
// and disable pointer events.
|
|
127
|
-
var shouldUseSlot = !!href && !props.disabled;
|
|
128
|
-
var innerContent = shouldUseSlot ? React.createElement("span", null, content) : content;
|
|
135
|
+
// TODO (yuka: 2025-06-20): I don't know what to do when there are both href and onClick.
|
|
136
|
+
if (href && !props.onClick) {
|
|
137
|
+
return (React.createElement(LinkWrapper, { ref: ref, href: href, target: target, rel: rel, replace: replace, shallow: shallow, prefetch: prefetch, className: cn(
|
|
138
|
+
// This cannot apply disabled styles for links, since it's using :disabled pseudo-class to apply styles.
|
|
139
|
+
// We will manually add disabled styles for links (getDisabledClasses).
|
|
140
|
+
buttonVariants({ variant: variant, size: size, className: className }), "s-inline-block", isPulsing && "s-animate-pulse", (isLoading || props.disabled) && [
|
|
141
|
+
getDisabledClasses(variant || "primary"),
|
|
142
|
+
"s-pointer-events-none",
|
|
143
|
+
]), style: {
|
|
144
|
+
"--pulse-color": "#93C5FD",
|
|
145
|
+
"--duration": "1.5s",
|
|
146
|
+
}, disabled: props.disabled }, tooltip ? (React.createElement(ContentWithTooltip, { tooltip: tooltip }, label)) : (label)));
|
|
147
|
+
}
|
|
129
148
|
var innerButton = (React.createElement(MetaButton, __assign({ ref: ref, size: size, variant: variant, disabled: isLoading || props.disabled, className: cn(isPulsing && "s-animate-pulse", className), "aria-label": ariaLabel || tooltip || label, style: {
|
|
130
149
|
"--pulse-color": "#93C5FD",
|
|
131
150
|
"--duration": "1.5s",
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
React.createElement(TooltipRoot, null,
|
|
135
|
-
React.createElement(TooltipTrigger, { asChild: true }, innerButton),
|
|
136
|
-
React.createElement(TooltipPortal, null,
|
|
137
|
-
React.createElement(TooltipContent, null, tooltip))))) : (innerButton);
|
|
138
|
-
return href ? (React.createElement(LinkWrapper, { href: href, target: target, rel: rel, replace: replace, shallow: shallow }, wrappedContent)) : (wrappedContent);
|
|
151
|
+
} }, props), content));
|
|
152
|
+
return tooltip ? (React.createElement(ContentWithTooltip, { tooltip: tooltip }, innerButton)) : (innerButton);
|
|
139
153
|
});
|
|
140
154
|
Button.displayName = "Button";
|
|
141
155
|
export { Button, buttonVariants, MetaButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,6 +7,11 @@ export interface LinkWrapperProps {
|
|
|
7
7
|
shallow?: boolean;
|
|
8
8
|
target?: string;
|
|
9
9
|
prefetch?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
ariaLabel?: string;
|
|
12
|
+
ariaCurrent?: string;
|
|
13
|
+
className?: string;
|
|
14
|
+
style?: React.CSSProperties;
|
|
10
15
|
}
|
|
11
16
|
export declare const LinkWrapper: React.ForwardRefExoticComponent<LinkWrapperProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
12
17
|
//# sourceMappingURL=LinkWrapper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/LinkWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"LinkWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/LinkWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,4FA6CvB,CAAC"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { SparkleContext } from "../context";
|
|
3
|
+
import { cn } from "../lib";
|
|
3
4
|
export var LinkWrapper = React.forwardRef(function (_a, ref) {
|
|
4
|
-
var children = _a.children, href = _a.href, rel = _a.rel, replace = _a.replace, shallow = _a.shallow, target = _a.target, prefetch = _a.prefetch;
|
|
5
|
+
var children = _a.children, href = _a.href, rel = _a.rel, replace = _a.replace, shallow = _a.shallow, target = _a.target, prefetch = _a.prefetch, disabled = _a.disabled, ariaLabel = _a.ariaLabel, ariaCurrent = _a.ariaCurrent, className = _a.className, style = _a.style;
|
|
5
6
|
var components = React.useContext(SparkleContext).components;
|
|
6
7
|
if (href) {
|
|
7
|
-
return (React.createElement(components.link, { ref: ref, href: href, target: target, rel: rel, replace: replace, shallow: shallow, prefetch: prefetch }, children));
|
|
8
|
+
return (React.createElement(components.link, { ref: ref, href: href, target: target, rel: rel, replace: replace, shallow: shallow, prefetch: prefetch, className: cn(className, disabled && "s-pointer-events-none"), "aria-label": ariaLabel, "aria-current": ariaCurrent, style: style }, children));
|
|
8
9
|
}
|
|
9
10
|
return children;
|
|
10
11
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkWrapper.js","sourceRoot":"","sources":["../../../src/components/LinkWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"LinkWrapper.js","sourceRoot":"","sources":["../../../src/components/LinkWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAiBlC,MAAM,CAAC,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAIzC,UACE,EAaC,EACD,GAAG;QAbD,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,GAAG,SAAA,EACH,OAAO,aAAA,EACP,OAAO,aAAA,EACP,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,KAAK,WAAA;IAIC,IAAA,UAAU,GAAK,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,WAArC,CAAsC;IAExD,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,oBAAC,UAAU,CAAC,IAAI,IACd,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,QAAQ,IAAI,uBAAuB,CAAC,gBACjD,SAAS,kBACP,WAAW,EACzB,KAAK,EAAE,KAAK,IAEX,QAAQ,CACO,CACnB,CAAC;IACJ,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CACF,CAAC"}
|
package/dist/esm/context.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="node" />
|
|
2
2
|
import React, { ComponentType, MouseEvent, ReactNode } from "react";
|
|
3
3
|
import type { UrlObject } from "url";
|
|
4
|
-
type SparkleLinkProps = {
|
|
4
|
+
export type SparkleLinkProps = {
|
|
5
5
|
href: string | UrlObject;
|
|
6
6
|
className?: string;
|
|
7
7
|
children: ReactNode;
|
|
@@ -13,6 +13,7 @@ type SparkleLinkProps = {
|
|
|
13
13
|
target?: string;
|
|
14
14
|
rel?: string;
|
|
15
15
|
prefetch?: boolean;
|
|
16
|
+
style?: React.CSSProperties;
|
|
16
17
|
};
|
|
17
18
|
export type SparkleContextLinkType = ComponentType<SparkleLinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
18
19
|
export type SparkleContextType = {
|
|
@@ -23,5 +24,4 @@ export type SparkleContextType = {
|
|
|
23
24
|
export declare const aLink: SparkleContextLinkType;
|
|
24
25
|
export declare const noHrefLink: SparkleContextLinkType;
|
|
25
26
|
export declare const SparkleContext: React.Context<SparkleContextType>;
|
|
26
|
-
export {};
|
|
27
27
|
//# sourceMappingURL=context.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/context.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGrC,
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/context.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGrC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EACR,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,UAAU,GACV,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,aAAa,CAChD,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAC1D,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE;QACV,IAAI,EAAE,sBAAsB,CAAC;KAC9B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,sBAoCnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,sBAavB,CAAC;AAEH,eAAO,MAAM,cAAc,mCAIzB,CAAC"}
|
package/dist/esm/context.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import url from "url";
|
|
3
3
|
export var aLink = React.forwardRef(function (_a, ref) {
|
|
4
|
-
var href = _a.href, className = _a.className, ariaCurrent = _a.ariaCurrent, ariaLabel = _a.ariaLabel, onClick = _a.onClick, children = _a.children, target = _a.target, rel = _a.rel;
|
|
4
|
+
var href = _a.href, className = _a.className, ariaCurrent = _a.ariaCurrent, ariaLabel = _a.ariaLabel, onClick = _a.onClick, children = _a.children, target = _a.target, rel = _a.rel, style = _a.style;
|
|
5
5
|
var hrefAsString = typeof href !== "string" ? url.format(href) : href;
|
|
6
|
-
return (React.createElement("a", { ref: ref, href: hrefAsString, className: className, "aria-current": ariaCurrent, "aria-label": ariaLabel, onClick: onClick, target: target, rel: rel }, children));
|
|
6
|
+
return (React.createElement("a", { ref: ref, href: hrefAsString, className: className, "aria-current": ariaCurrent, "aria-label": ariaLabel, onClick: onClick, target: target, rel: rel, style: style }, children));
|
|
7
7
|
});
|
|
8
8
|
export var noHrefLink = React.forwardRef(function (_a, ref) {
|
|
9
9
|
var className = _a.className, ariaCurrent = _a.ariaCurrent, ariaLabel = _a.ariaLabel, onClick = _a.onClick, children = _a.children;
|
package/dist/esm/context.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,GAAG,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,GAAG,MAAM,KAAK,CAAC;AAmCtB,MAAM,CAAC,IAAM,KAAK,GAA2B,KAAK,CAAC,UAAU,CAI3D,UACE,EAUC,EACD,GAAG;QAVD,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,GAAG,SAAA,EACH,KAAK,WAAA;IAIP,IAAM,YAAY,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAExE,OAAO,CACL,2BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,YAAY,EAClB,SAAS,EAAE,SAAS,kBACN,WAAW,gBACb,SAAS,EACrB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IAEX,QAAQ,CACP,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAA2B,KAAK,CAAC,UAAU,CAGhE,UAAC,EAAwD,EAAE,GAAG;QAA3D,SAAS,eAAA,EAAE,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA;IAAY,OAAA,CACnE,2BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,kBACN,WAAW,gBACb,SAAS,EACrB,OAAO,EAAE,OAAO,IAEf,QAAQ,CACP,CACL;AAVoE,CAUpE,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAqB;IACpE,UAAU,EAAE;QACV,IAAI,EAAE,KAAK;KACZ;CACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAiDF,eAAO,MAAM,OAAO,EAAE,KA2BrB,CAAC"}
|
|
@@ -99,7 +99,8 @@ var ButtonBySize = function (_a) {
|
|
|
99
99
|
React.createElement(Button, { size: size, variant: "highlight", label: "Button" }),
|
|
100
100
|
React.createElement(Button, { size: size, variant: "warning", label: "Button" }),
|
|
101
101
|
React.createElement(Button, { size: size, variant: "ghost", label: "Button" }),
|
|
102
|
-
React.createElement(Button, { size: size, variant: "primary", label: "Button with href", href: "hello" })
|
|
102
|
+
React.createElement(Button, { size: size, variant: "primary", label: "Button with href", href: "hello" }),
|
|
103
|
+
React.createElement(Button, { size: size, variant: "primary", label: "Disabled button with href", href: "hello", disabled: true })),
|
|
103
104
|
React.createElement("div", { className: "s-flex s-items-center s-gap-4" },
|
|
104
105
|
React.createElement(Button, { size: size, label: "Button", isLoading: true }),
|
|
105
106
|
React.createElement(Button, { size: size, variant: "outline", label: "Button", isLoading: true }),
|
|
@@ -114,9 +115,18 @@ var ButtonBySize = function (_a) {
|
|
|
114
115
|
React.createElement(Button, { size: size, variant: "ghost", icon: PlusIcon, label: "Button" }))));
|
|
115
116
|
};
|
|
116
117
|
export var Gallery = {
|
|
117
|
-
render: function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-
|
|
118
|
-
React.createElement(
|
|
119
|
-
|
|
120
|
-
|
|
118
|
+
render: function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-6" },
|
|
119
|
+
React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
|
|
120
|
+
React.createElement(ButtonBySize, { size: "xs" }),
|
|
121
|
+
React.createElement(ButtonBySize, { size: "sm" }),
|
|
122
|
+
React.createElement(ButtonBySize, { size: "md" })),
|
|
123
|
+
React.createElement(Separator, null),
|
|
124
|
+
React.createElement("div", null,
|
|
125
|
+
React.createElement("h3", { className: "mb-3 s-text-primary dark:s-text-primary-50" }, "With tooltip"),
|
|
126
|
+
React.createElement("div", { className: "s-flex s-gap-4" },
|
|
127
|
+
React.createElement(Button, { label: "Button", tooltip: "Hello" }),
|
|
128
|
+
React.createElement(Button, { label: "Disabled button", tooltip: "Hello", disabled: true }),
|
|
129
|
+
React.createElement(Button, { label: "Button with href", tooltip: "Hello", href: "hello" }),
|
|
130
|
+
React.createElement(Button, { label: "Disabled button with href (won't work)", tooltip: "Hello", href: "hello", disabled: true }))))); },
|
|
121
131
|
};
|
|
122
132
|
//# sourceMappingURL=Button.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/stories/Button.stories.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/stories/Button.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -14,12 +14,17 @@ declare const meta: {
|
|
|
14
14
|
} & {
|
|
15
15
|
onClick?: (() => void) | undefined;
|
|
16
16
|
} & {
|
|
17
|
+
className?: undefined;
|
|
17
18
|
replace?: undefined;
|
|
19
|
+
style?: undefined;
|
|
20
|
+
disabled?: undefined;
|
|
18
21
|
href?: undefined;
|
|
19
22
|
target?: undefined;
|
|
20
23
|
rel?: undefined;
|
|
21
24
|
shallow?: undefined;
|
|
22
25
|
prefetch?: undefined;
|
|
26
|
+
ariaLabel?: undefined;
|
|
27
|
+
ariaCurrent?: undefined;
|
|
23
28
|
}) | ({
|
|
24
29
|
size?: "xs" | "sm" | undefined;
|
|
25
30
|
color?: "primary" | "highlight" | "success" | "warning" | "info" | "green" | "blue" | "rose" | "golden" | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Chip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,QAAA,MAAM,IAAI
|
|
1
|
+
{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Chip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAOxB,CAAC;AAEF,eAAO,MAAM,aAAa,yBAezB,CAAC;AAEF,eAAO,MAAM,SAAS,yBA+ErB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Slot } from "@radix-ui/react-slot";
|
|
2
2
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import { useMemo } from "react";
|
|
5
4
|
|
|
6
5
|
import {
|
|
7
6
|
Counter,
|
|
@@ -33,6 +32,20 @@ export type ButtonVariantType = (typeof BUTTON_VARIANTS)[number];
|
|
|
33
32
|
export const BUTTON_SIZES = ["xmini", "mini", "xs", "sm", "md"] as const;
|
|
34
33
|
export type ButtonSizeType = (typeof BUTTON_SIZES)[number];
|
|
35
34
|
|
|
35
|
+
const disabledStyles = {
|
|
36
|
+
primary:
|
|
37
|
+
"disabled:s-bg-primary-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-primary-muted-night",
|
|
38
|
+
highlight:
|
|
39
|
+
"disabled:s-bg-highlight-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-highlight-muted-night",
|
|
40
|
+
warning:
|
|
41
|
+
"disabled:s-bg-warning-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-warning-muted-night",
|
|
42
|
+
outline:
|
|
43
|
+
"disabled:s-text-primary-muted dark:disabled:s-text-primary-muted-night disabled:s-border-primary-100 dark:disabled:s-border-primary-100-night",
|
|
44
|
+
ghost: "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night",
|
|
45
|
+
"ghost-secondary":
|
|
46
|
+
"disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night",
|
|
47
|
+
} as const;
|
|
48
|
+
|
|
36
49
|
// Define button styling with cva
|
|
37
50
|
const buttonVariants = cva(
|
|
38
51
|
cn(
|
|
@@ -48,21 +61,21 @@ const buttonVariants = cva(
|
|
|
48
61
|
"s-text-primary-50 dark:s-text-primary-50-night",
|
|
49
62
|
"hover:s-bg-primary-light dark:hover:s-bg-primary-dark-night",
|
|
50
63
|
"active:s-bg-primary-dark dark:active:s-bg-primary-light-night",
|
|
51
|
-
|
|
64
|
+
disabledStyles.primary
|
|
52
65
|
),
|
|
53
66
|
highlight: cn(
|
|
54
67
|
"s-bg-highlight",
|
|
55
68
|
"s-text-highlight-50",
|
|
56
69
|
"hover:s-bg-highlight-light",
|
|
57
70
|
"active:s-bg-highlight-dark",
|
|
58
|
-
|
|
71
|
+
disabledStyles.highlight
|
|
59
72
|
),
|
|
60
73
|
warning: cn(
|
|
61
74
|
"s-bg-warning",
|
|
62
75
|
"s-text-warning-50",
|
|
63
76
|
"hover:s-bg-warning-light",
|
|
64
77
|
"active:s-bg-warning-dark",
|
|
65
|
-
|
|
78
|
+
disabledStyles.warning
|
|
66
79
|
),
|
|
67
80
|
outline: cn(
|
|
68
81
|
"s-border",
|
|
@@ -73,8 +86,7 @@ const buttonVariants = cva(
|
|
|
73
86
|
"hover:s-bg-primary-100 dark:hover:s-bg-primary-900",
|
|
74
87
|
"hover:s-border-primary-150 dark:hover:s-border-border-night",
|
|
75
88
|
"active:s-bg-primary-300 dark:active:s-bg-primary-900",
|
|
76
|
-
|
|
77
|
-
"disabled:s-border-primary-100 dark:disabled:s-border-primary-100-night"
|
|
89
|
+
disabledStyles.outline
|
|
78
90
|
),
|
|
79
91
|
ghost: cn(
|
|
80
92
|
"s-border",
|
|
@@ -84,7 +96,7 @@ const buttonVariants = cva(
|
|
|
84
96
|
"hover:s-text-primary-900 dark:hover:s-text-white",
|
|
85
97
|
"hover:s-border-border-dark dark:hover:s-border-border-night",
|
|
86
98
|
"active:s-bg-primary-300 dark:active:s-bg-primary-900",
|
|
87
|
-
|
|
99
|
+
disabledStyles.ghost
|
|
88
100
|
),
|
|
89
101
|
"ghost-secondary": cn(
|
|
90
102
|
"s-border",
|
|
@@ -94,7 +106,7 @@ const buttonVariants = cva(
|
|
|
94
106
|
"hover:s-text-primary-900 dark:hover:s-text-primary-900-night",
|
|
95
107
|
"hover:s-border-border-dark dark:hover:s-border-border-night",
|
|
96
108
|
"active:s-bg-primary-300 dark:active:s-bg-primary-900",
|
|
97
|
-
"
|
|
109
|
+
disabledStyles["ghost-secondary"]
|
|
98
110
|
),
|
|
99
111
|
},
|
|
100
112
|
size: {
|
|
@@ -112,6 +124,14 @@ const buttonVariants = cva(
|
|
|
112
124
|
}
|
|
113
125
|
);
|
|
114
126
|
|
|
127
|
+
const getDisabledClasses = (variant: ButtonVariantType) => {
|
|
128
|
+
const disabledStyle = disabledStyles[variant] || "";
|
|
129
|
+
// Remove the "disabled:" prefix since this will be used for <a> tag and not <button>.
|
|
130
|
+
return disabledStyle
|
|
131
|
+
.replace(/disabled:/g, "")
|
|
132
|
+
.replace(/dark:disabled:/g, "dark:");
|
|
133
|
+
};
|
|
134
|
+
|
|
115
135
|
const labelVariants = cva("", {
|
|
116
136
|
variants: {
|
|
117
137
|
size: {
|
|
@@ -210,6 +230,27 @@ export type RegularButtonProps = CommonButtonProps & {
|
|
|
210
230
|
label?: string;
|
|
211
231
|
};
|
|
212
232
|
|
|
233
|
+
const ContentWithTooltip = ({
|
|
234
|
+
children,
|
|
235
|
+
tooltip,
|
|
236
|
+
}: {
|
|
237
|
+
children: React.ReactNode;
|
|
238
|
+
tooltip: string;
|
|
239
|
+
}) => {
|
|
240
|
+
return (
|
|
241
|
+
<TooltipProvider>
|
|
242
|
+
<TooltipRoot>
|
|
243
|
+
<TooltipTrigger asChild={typeof children === "string" ? false : true}>
|
|
244
|
+
{children}
|
|
245
|
+
</TooltipTrigger>
|
|
246
|
+
<TooltipPortal>
|
|
247
|
+
<TooltipContent>{tooltip}</TooltipContent>
|
|
248
|
+
</TooltipPortal>
|
|
249
|
+
</TooltipRoot>
|
|
250
|
+
</TooltipProvider>
|
|
251
|
+
);
|
|
252
|
+
};
|
|
253
|
+
|
|
213
254
|
export type ButtonProps = MiniButtonProps | RegularButtonProps;
|
|
214
255
|
|
|
215
256
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
@@ -231,6 +272,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
231
272
|
rel,
|
|
232
273
|
replace,
|
|
233
274
|
shallow,
|
|
275
|
+
prefetch,
|
|
234
276
|
"aria-label": ariaLabel,
|
|
235
277
|
...props
|
|
236
278
|
},
|
|
@@ -294,24 +336,44 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
294
336
|
</>
|
|
295
337
|
);
|
|
296
338
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
339
|
+
// TODO (yuka: 2025-06-20): I don't know what to do when there are both href and onClick.
|
|
340
|
+
if (href && !props.onClick) {
|
|
341
|
+
return (
|
|
342
|
+
<LinkWrapper
|
|
343
|
+
ref={ref as React.Ref<HTMLAnchorElement>}
|
|
344
|
+
href={href}
|
|
345
|
+
target={target}
|
|
346
|
+
rel={rel}
|
|
347
|
+
replace={replace}
|
|
348
|
+
shallow={shallow}
|
|
349
|
+
prefetch={prefetch}
|
|
350
|
+
className={cn(
|
|
351
|
+
// This cannot apply disabled styles for links, since it's using :disabled pseudo-class to apply styles.
|
|
352
|
+
// We will manually add disabled styles for links (getDisabledClasses).
|
|
353
|
+
buttonVariants({ variant, size, className }),
|
|
354
|
+
"s-inline-block",
|
|
355
|
+
isPulsing && "s-animate-pulse",
|
|
356
|
+
(isLoading || props.disabled) && [
|
|
357
|
+
getDisabledClasses(variant || "primary"),
|
|
358
|
+
"s-pointer-events-none",
|
|
359
|
+
]
|
|
360
|
+
)}
|
|
361
|
+
style={
|
|
362
|
+
{
|
|
363
|
+
"--pulse-color": "#93C5FD",
|
|
364
|
+
"--duration": "1.5s",
|
|
365
|
+
} as React.CSSProperties
|
|
366
|
+
}
|
|
367
|
+
disabled={props.disabled}
|
|
368
|
+
>
|
|
369
|
+
{tooltip ? (
|
|
370
|
+
<ContentWithTooltip tooltip={tooltip}>{label}</ContentWithTooltip>
|
|
371
|
+
) : (
|
|
372
|
+
label
|
|
373
|
+
)}
|
|
374
|
+
</LinkWrapper>
|
|
375
|
+
);
|
|
376
|
+
}
|
|
315
377
|
|
|
316
378
|
const innerButton = (
|
|
317
379
|
<MetaButton
|
|
@@ -327,40 +389,17 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
327
389
|
"--duration": "1.5s",
|
|
328
390
|
} as React.CSSProperties
|
|
329
391
|
}
|
|
330
|
-
asChild={shouldUseSlot}
|
|
331
392
|
{...props}
|
|
332
|
-
{...pointerEventProps}
|
|
333
393
|
>
|
|
334
|
-
{
|
|
394
|
+
{content}
|
|
335
395
|
</MetaButton>
|
|
336
396
|
);
|
|
337
397
|
|
|
338
|
-
|
|
339
|
-
<
|
|
340
|
-
<TooltipRoot>
|
|
341
|
-
<TooltipTrigger asChild>{innerButton}</TooltipTrigger>
|
|
342
|
-
<TooltipPortal>
|
|
343
|
-
<TooltipContent>{tooltip}</TooltipContent>
|
|
344
|
-
</TooltipPortal>
|
|
345
|
-
</TooltipRoot>
|
|
346
|
-
</TooltipProvider>
|
|
398
|
+
return tooltip ? (
|
|
399
|
+
<ContentWithTooltip tooltip={tooltip}>{innerButton}</ContentWithTooltip>
|
|
347
400
|
) : (
|
|
348
401
|
innerButton
|
|
349
402
|
);
|
|
350
|
-
|
|
351
|
-
return href ? (
|
|
352
|
-
<LinkWrapper
|
|
353
|
-
href={href}
|
|
354
|
-
target={target}
|
|
355
|
-
rel={rel}
|
|
356
|
-
replace={replace}
|
|
357
|
-
shallow={shallow}
|
|
358
|
-
>
|
|
359
|
-
{wrappedContent}
|
|
360
|
-
</LinkWrapper>
|
|
361
|
-
) : (
|
|
362
|
-
wrappedContent
|
|
363
|
-
);
|
|
364
403
|
}
|
|
365
404
|
);
|
|
366
405
|
|