pixelize-design-library 2.3.1-beta.17 → 2.3.1-beta.19
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/.claude/settings.local.json +3 -1
- package/dist/Components/Dropdown/DropDown.js +84 -28
- package/dist/Components/Dropdown/DropdownProps.d.ts +4 -1
- package/dist/Components/OrganizationDetails/CreateOrgModal.js +3 -3
- package/dist/Components/UpgradeButton/UpgradeButton.js +21 -6
- package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts +14 -1
- package/package.json +1 -1
|
@@ -39,7 +39,9 @@
|
|
|
39
39
|
"Bash(./node_modules/.bin/tsc --noEmit --skipLibCheck)",
|
|
40
40
|
"Bash(./node_modules/.bin/tsc --noEmit)",
|
|
41
41
|
"Bash(echo \"tsc exit: $?\")",
|
|
42
|
-
"Bash(echo \"local tsc exit: $?\")"
|
|
42
|
+
"Bash(echo \"local tsc exit: $?\")",
|
|
43
|
+
"Bash(ls -la src/pages/Tasks/TaskComponent/)",
|
|
44
|
+
"Bash(wc -l src/pages/Tasks/TaskComponent/*.tsx)"
|
|
43
45
|
],
|
|
44
46
|
"additionalDirectories": [
|
|
45
47
|
"/private/tmp",
|
|
@@ -50,58 +50,114 @@ var framer_motion_1 = require("framer-motion");
|
|
|
50
50
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
51
51
|
var lucide_react_1 = require("lucide-react");
|
|
52
52
|
var MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
|
|
53
|
+
// Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
|
|
54
|
+
var SIZE_MAP = {
|
|
55
|
+
xs: { btn: "xs", fontSize: "0.75rem", py: 1, px: 2.5, img: "1rem", chevron: 13, minW: "8rem", gap: 1.5 },
|
|
56
|
+
sm: { btn: "sm", fontSize: "0.8125rem", py: 1.5, px: 3, img: "1.05rem", chevron: 14, minW: "9rem", gap: 2 },
|
|
57
|
+
md: { btn: "md", fontSize: "0.875rem", py: 2, px: 3, img: "1.15rem", chevron: 16, minW: "11rem", gap: 2 },
|
|
58
|
+
lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
|
|
59
|
+
xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
|
|
60
|
+
};
|
|
53
61
|
var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
|
|
54
|
-
var
|
|
62
|
+
var _b, _c;
|
|
63
|
+
var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _d = _a.dropdownType, dropdownType = _d === void 0 ? "button" : _d, text = _a.text, DropdownIcon = _a.DropdownIcon, _e = _a.isVisibleIconShow, isVisibleIconShow = _e === void 0 ? true : _e, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, size = _a.size, optionsSize = _a.optionsSize, _f = _a.divider, divider = _f === void 0 ? false : _f;
|
|
55
64
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
56
|
-
var
|
|
65
|
+
var _g = (0, react_2.useDisclosure)(), isOpen = _g.isOpen, onToggle = _g.onToggle, onClose = _g.onClose;
|
|
57
66
|
var dropdownRef = (0, react_1.useRef)(null);
|
|
67
|
+
var menuRef = (0, react_1.useRef)(null);
|
|
68
|
+
var _h = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), menuPos = _h[0], setMenuPos = _h[1];
|
|
69
|
+
var s = (_c = SIZE_MAP[(_b = size !== null && size !== void 0 ? size : optionsSize) !== null && _b !== void 0 ? _b : "md"]) !== null && _c !== void 0 ? _c : SIZE_MAP.md;
|
|
58
70
|
var handleListItemClick = function (optionId, optionLabel) {
|
|
59
71
|
onClose();
|
|
60
72
|
handleOptionSelect(optionId, optionLabel);
|
|
61
73
|
};
|
|
74
|
+
// The menu is portaled to <body> (so it sits above everything). Anchor it to
|
|
75
|
+
// the trigger and keep it anchored while the page/ancestors scroll or resize.
|
|
76
|
+
var updateMenuPos = (0, react_1.useCallback)(function () {
|
|
77
|
+
if (!dropdownRef.current)
|
|
78
|
+
return;
|
|
79
|
+
var r = dropdownRef.current.getBoundingClientRect();
|
|
80
|
+
setMenuPos({ top: r.bottom, left: r.left, width: r.width });
|
|
81
|
+
}, []);
|
|
82
|
+
(0, react_1.useEffect)(function () {
|
|
83
|
+
if (!isOpen)
|
|
84
|
+
return;
|
|
85
|
+
updateMenuPos();
|
|
86
|
+
window.addEventListener("scroll", updateMenuPos, true);
|
|
87
|
+
window.addEventListener("resize", updateMenuPos);
|
|
88
|
+
return function () {
|
|
89
|
+
window.removeEventListener("scroll", updateMenuPos, true);
|
|
90
|
+
window.removeEventListener("resize", updateMenuPos);
|
|
91
|
+
};
|
|
92
|
+
}, [isOpen, updateMenuPos]);
|
|
62
93
|
(0, react_1.useEffect)(function () {
|
|
63
94
|
var handleClickOutside = function (event) {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
95
|
+
var _a, _b;
|
|
96
|
+
var target = event.target;
|
|
97
|
+
// Ignore clicks on the trigger or inside the (portaled) menu.
|
|
98
|
+
if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
|
|
99
|
+
return;
|
|
100
|
+
if ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
|
|
101
|
+
return;
|
|
102
|
+
onClose();
|
|
68
103
|
};
|
|
69
104
|
document.addEventListener("mousedown", handleClickOutside);
|
|
70
105
|
return function () {
|
|
71
106
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
72
107
|
};
|
|
73
|
-
}, [
|
|
108
|
+
}, [onClose]);
|
|
109
|
+
var setMenuRef = function (node) {
|
|
110
|
+
menuRef.current = node;
|
|
111
|
+
if (typeof ref === "function")
|
|
112
|
+
ref(node);
|
|
113
|
+
else if (ref)
|
|
114
|
+
ref.current = node;
|
|
115
|
+
};
|
|
116
|
+
var Chevron = isVisibleIconShow ? (react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" },
|
|
117
|
+
react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevron }))) : undefined;
|
|
74
118
|
var dropDownToggleOption = function () {
|
|
75
|
-
var
|
|
76
|
-
|
|
77
|
-
"
|
|
78
|
-
|
|
79
|
-
|
|
119
|
+
var _a, _b, _c, _d;
|
|
120
|
+
var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, size: s.btn, colorScheme: "primary", borderRadius: "0.5rem", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, rightIcon: Chevron, sx: __assign({ transition: "all 0.15s ease" }, dropDownButtonStyle) }, buttonProps),
|
|
121
|
+
react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0 },
|
|
122
|
+
DropdownIcon,
|
|
123
|
+
ButtonText)));
|
|
124
|
+
var TextToggle = (react_1.default.createElement(react_2.Flex, { onClick: onToggle, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700], transition: "color 0.15s ease", _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[600] }, style: dropDownButtonStyle, role: "button", "aria-haspopup": "menu", "aria-expanded": isOpen },
|
|
80
125
|
DropdownIcon,
|
|
81
|
-
" ",
|
|
82
126
|
text,
|
|
83
|
-
|
|
127
|
+
Chevron));
|
|
84
128
|
return dropdownType === "button" ? ButtonToggle : TextToggle;
|
|
85
129
|
};
|
|
86
130
|
var DropdownContentRender = function () {
|
|
87
|
-
var _a, _b, _c;
|
|
88
|
-
return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
"
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
131
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
132
|
+
return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_e = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]), borderRadius: "0.625rem", boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
|
|
133
|
+
scrollbarWidth: "thin",
|
|
134
|
+
scrollbarColor: "".concat((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.gray) === null || _j === void 0 ? void 0 : _j[300], " transparent"),
|
|
135
|
+
"&::-webkit-scrollbar": { width: "6px" },
|
|
136
|
+
"&::-webkit-scrollbar-thumb": {
|
|
137
|
+
background: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[300],
|
|
138
|
+
borderRadius: "3px",
|
|
139
|
+
},
|
|
140
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
|
141
|
+
background: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[400],
|
|
142
|
+
},
|
|
143
|
+
}, style: ListStyle }, options.map(function (option) {
|
|
144
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
145
|
+
return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, mx: 1.5, px: s.px, py: s.py, borderRadius: "0.375rem", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
|
|
146
|
+
bg: (_j = (_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray[100],
|
|
147
|
+
color: (_o = (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.primary) === null || _m === void 0 ? void 0 : _m[700]) !== null && _o !== void 0 ? _o : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[600],
|
|
148
|
+
}, borderBottom: divider
|
|
149
|
+
? "0.063rem solid ".concat((_t = (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.boxborder) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray[200])
|
|
150
|
+
: undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500 },
|
|
151
|
+
(option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray) === null || _w === void 0 ? void 0 : _w[500], style: ImageStyle })),
|
|
152
|
+
react_1.default.createElement(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true,
|
|
153
|
+
// fontWeight={400}
|
|
154
|
+
style: LabelStyle }, option.label)));
|
|
100
155
|
})));
|
|
101
156
|
};
|
|
102
157
|
return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block" },
|
|
103
158
|
dropDownToggleOption(),
|
|
104
|
-
isOpen && (react_1.default.createElement(
|
|
159
|
+
isOpen && (react_1.default.createElement(react_2.Portal, null,
|
|
160
|
+
react_1.default.createElement(MotionBox, { ref: setMenuRef, position: "fixed", top: "".concat(menuPos.top, "px"), left: "".concat(menuPos.left, "px"), minW: "".concat(menuPos.width, "px"), zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle }, DropdownContentRender())))));
|
|
105
161
|
});
|
|
106
162
|
Dropdown.displayName = "Dropdown";
|
|
107
163
|
exports.default = Dropdown;
|
|
@@ -14,7 +14,10 @@ export type DropdownProps = {
|
|
|
14
14
|
ItemStyle?: React.CSSProperties;
|
|
15
15
|
LabelStyle?: React.CSSProperties;
|
|
16
16
|
ImageStyle?: React.CSSProperties;
|
|
17
|
-
|
|
17
|
+
/** Overall size of the trigger + options (like Button sizes). */
|
|
18
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
19
|
+
/** @deprecated Use `size` instead. Kept for backward compatibility. */
|
|
20
|
+
optionsSize?: "sm" | "md" | "lg";
|
|
18
21
|
divider?: boolean;
|
|
19
22
|
};
|
|
20
23
|
type Option = {
|
|
@@ -112,9 +112,9 @@ var CreateOrgModal = function (_a) {
|
|
|
112
112
|
react_1.default.createElement(react_2.ModalCloseButton, null),
|
|
113
113
|
react_1.default.createElement(react_2.ModalBody, { py: 6 },
|
|
114
114
|
react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
|
|
115
|
-
react_1.default.createElement(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: function (e) { return setField("company_name", e.target.value); }, isRequired: true, width: "100%", error: !!errors.company_name, errorMessage: errors.company_name }),
|
|
116
|
-
react_1.default.createElement(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: function (e) { return setField("company_address", e.target.value); }, isRequired: true, width: "100%", error: !!errors.company_address, errorMessage: errors.company_address }),
|
|
117
|
-
react_1.default.createElement(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: function (e) { return setField("phone", e.target.value); }, isRequired: true, width: "100%", error: !!errors.phone, errorMessage: errors.phone })),
|
|
115
|
+
react_1.default.createElement(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: function (e) { return setField("company_name", e.target.value); }, isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }),
|
|
116
|
+
react_1.default.createElement(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: function (e) { return setField("company_address", e.target.value); }, isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }),
|
|
117
|
+
react_1.default.createElement(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: function (e) { return setField("phone", e.target.value); }, isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })),
|
|
118
118
|
react_1.default.createElement(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6 },
|
|
119
119
|
react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }),
|
|
120
120
|
react_1.default.createElement(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading }))))));
|
|
@@ -17,23 +17,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
var react_1 = __importDefault(require("react"));
|
|
18
18
|
var react_2 = require("@chakra-ui/react");
|
|
19
19
|
var lucide_react_1 = require("lucide-react");
|
|
20
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
20
21
|
var sizeMap = {
|
|
21
22
|
sm: { px: "12px", py: "4px", font: "12px", sub: "8px", icon: 11, radius: "40px" },
|
|
22
23
|
md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "50px" },
|
|
23
24
|
lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "60px" },
|
|
24
25
|
};
|
|
25
|
-
var
|
|
26
|
+
var FALLBACK_GRADIENT = { from: "#667eea", to: "#764ba2" };
|
|
26
27
|
var UpgradeButton = function (_a) {
|
|
27
|
-
var
|
|
28
|
+
var _b, _c;
|
|
29
|
+
var label = _a.label, mobileLabel = _a.mobileLabel, subtitle = _a.subtitle, _d = _a.icon, icon = _d === void 0 ? lucide_react_1.Sparkles : _d, _e = _a.iconColor, iconColor = _e === void 0 ? "#FFD66B" : _e, _f = _a.variant, variant = _f === void 0 ? "brand" : _f, gradient = _a.gradient, _g = _a.size, size = _g === void 0 ? "md" : _g, _h = _a.shimmer, shimmer = _h === void 0 ? true : _h, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, _k = _a.isDisabled, isDisabled = _k === void 0 ? false : _k, _l = _a.maxLabelWidth, maxLabelWidth = _l === void 0 ? "160px" : _l, ariaLabel = _a.ariaLabel, onClick = _a.onClick;
|
|
30
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
31
|
+
var c = theme.colors;
|
|
32
|
+
var themeGradient = (_b = c.gradient) !== null && _b !== void 0 ? _b : FALLBACK_GRADIENT;
|
|
33
|
+
var variantGradient = {
|
|
34
|
+
brand: themeGradient,
|
|
35
|
+
primary: { from: c.primary[500], to: c.primary[700] },
|
|
36
|
+
secondary: { from: c.secondary[400], to: c.secondary[600] },
|
|
37
|
+
success: { from: c.semantic.success[400], to: c.semantic.success[600] },
|
|
38
|
+
warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
|
|
39
|
+
danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
|
|
40
|
+
info: { from: c.semantic.info[400], to: c.semantic.info[600] },
|
|
41
|
+
};
|
|
42
|
+
var resolved = (_c = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _c !== void 0 ? _c : themeGradient;
|
|
28
43
|
var s = sizeMap[size];
|
|
29
44
|
var Icon = icon;
|
|
30
45
|
var blocked = isLoading || isDisabled;
|
|
31
|
-
var g = "linear-gradient(135deg, ".concat(
|
|
32
|
-
var gReversed = "linear-gradient(135deg, ".concat(
|
|
46
|
+
var g = "linear-gradient(135deg, ".concat(resolved.from, " 0%, ").concat(resolved.to, " 100%)");
|
|
47
|
+
var gReversed = "linear-gradient(135deg, ".concat(resolved.to, " 0%, ").concat(resolved.from, " 100%)");
|
|
33
48
|
var hasMobile = !!mobileLabel && mobileLabel !== label;
|
|
34
|
-
return (react_1.default.createElement(react_2.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: "white", borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: "0 0 0 3px ".concat(
|
|
49
|
+
return (react_1.default.createElement(react_2.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: "white", borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: "0 0 0 3px ".concat(resolved.from, "55") }, _hover: blocked
|
|
35
50
|
? undefined
|
|
36
|
-
: __assign({ transform: "translateY(-2px)", bgImage: gReversed, boxShadow: "0 10px 30px ".concat(
|
|
51
|
+
: __assign({ transform: "translateY(-2px)", bgImage: gReversed, boxShadow: "0 10px 30px ".concat(resolved.from, "66") }, (shimmer ? { _before: { left: "130%" } } : {})), sx: shimmer
|
|
37
52
|
? {
|
|
38
53
|
_before: {
|
|
39
54
|
content: '""',
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { ElementType } from "react";
|
|
2
2
|
export type UpgradeButtonSize = "sm" | "md" | "lg";
|
|
3
|
+
/**
|
|
4
|
+
* Theme-aware color variants. Each resolves to a gradient built from the
|
|
5
|
+
* active theme's tokens, so the button blends with whichever theme is active.
|
|
6
|
+
*/
|
|
7
|
+
export type UpgradeButtonVariant = "brand" | "primary" | "secondary" | "success" | "warning" | "danger" | "info";
|
|
3
8
|
export interface UpgradeButtonProps {
|
|
4
9
|
/** Primary label (shown on md+ screens). */
|
|
5
10
|
label: string;
|
|
@@ -11,7 +16,15 @@ export interface UpgradeButtonProps {
|
|
|
11
16
|
icon?: ElementType | null;
|
|
12
17
|
/** Icon color. Defaults to a gold tone. */
|
|
13
18
|
iconColor?: string;
|
|
14
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* Theme-aware color variant. Defaults to `brand` (the active theme's
|
|
21
|
+
* gradient). Ignored when an explicit `gradient` is provided.
|
|
22
|
+
*/
|
|
23
|
+
variant?: UpgradeButtonVariant;
|
|
24
|
+
/**
|
|
25
|
+
* Explicit gradient stops. Overrides `variant` and the theme gradient when
|
|
26
|
+
* provided.
|
|
27
|
+
*/
|
|
15
28
|
gradient?: {
|
|
16
29
|
from: string;
|
|
17
30
|
to: string;
|