beacon-ui 3.3.0 → 3.4.0
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/CHANGELOG.md +20 -0
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +31 -12
- package/dist/components/ButtonIcon.d.ts +14 -0
- package/dist/components/ButtonIcon.d.ts.map +1 -0
- package/dist/components/ButtonIcon.js +232 -0
- package/dist/components/Card.js +1 -1
- package/dist/icons/index.d.ts +1 -1
- package/dist/icons/index.d.ts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/package.json +1 -1
- package/tokens/generated/index.css +1 -3
- package/tokens/generated/semantic.css +1 -3
- package/assets/preview/16x9_1024x576_preview.png +0 -0
- package/assets/preview/3x2_1024x683_preview.png +0 -0
- package/assets/preview/4x3_1024x768_preview.png +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [3.4.0] - 2026-01-15
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
- Button Icon component for icon-only button interactions with support for all button variants, sizes, and states
|
|
12
|
+
- Motion animations system with comprehensive animation library including:
|
|
13
|
+
- Professional animations (lift, shadow depth, border glow, smooth scale)
|
|
14
|
+
- Playful animations (bounce, elastic, jelly, pop)
|
|
15
|
+
- Minimal animations (fade, shift, soft glow, border fade)
|
|
16
|
+
- 3D-focused animations (tilt, flip, parallax, depth glow)
|
|
17
|
+
- Motion guide documentation with usage guidelines, best practices, and implementation examples
|
|
18
|
+
- Icons are now available for search in design system website
|
|
19
|
+
|
|
20
|
+
## [3.3.1] - 2026-01-01
|
|
21
|
+
|
|
22
|
+
### Fixed
|
|
23
|
+
- Fixed Card component default background color from `bg-page-tertiary` to `bg-page-secondary`
|
|
24
|
+
- Fixed card preview elements in documentation to use `bg-page-secondary` instead of `bg-page-tertiary`
|
|
25
|
+
- Corrected API documentation to reflect correct default background color (`page-secondary` instead of `page-tertiary`)
|
|
26
|
+
- Fixed incorrect default values in API reference table (`showBgPattern` and `showOverlay` now correctly show `false`)
|
|
27
|
+
|
|
8
28
|
## [3.3.0] - 2025-01-02
|
|
9
29
|
|
|
10
30
|
### Added
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAgC,MAAM,OAAO,CAAC;AAI5G,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,eAAe,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkED,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,IAAW,EACX,YAAgB,EAChB,SAAS,EACT,OAAO,EACP,aAAqB,EACrB,cAAyB,EACzB,OAAe,EACf,QAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAsSb"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx,
|
|
3
|
-
import { useMemo, useState, useCallback } from "react";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo, useState, useCallback, cloneElement, isValidElement } from "react";
|
|
4
4
|
import { useThemeSafe } from "../providers/ThemeProvider";
|
|
5
5
|
import { LoaderIcon } from "../icons";
|
|
6
6
|
const CORNER_RADIUS_MAP = {
|
|
@@ -31,21 +31,21 @@ const SIZE_CONFIG = {
|
|
|
31
31
|
paddingX: "var(--spacing-400)",
|
|
32
32
|
paddingY: "var(--spacing-200)",
|
|
33
33
|
fontSize: "var(--body-regular-text-size)",
|
|
34
|
-
iconSize: "
|
|
34
|
+
iconSize: "sm",
|
|
35
35
|
},
|
|
36
36
|
lg: {
|
|
37
37
|
height: "56px",
|
|
38
38
|
paddingX: "var(--spacing-500)",
|
|
39
39
|
paddingY: "var(--spacing-300)",
|
|
40
40
|
fontSize: "var(--body-medium-text-size)",
|
|
41
|
-
iconSize: "
|
|
41
|
+
iconSize: "rg",
|
|
42
42
|
},
|
|
43
43
|
xl: {
|
|
44
44
|
height: "68px",
|
|
45
45
|
paddingX: "var(--spacing-600)",
|
|
46
46
|
paddingY: "var(--spacing-400)",
|
|
47
47
|
fontSize: "var(--body-medium-text-size)",
|
|
48
|
-
iconSize: "
|
|
48
|
+
iconSize: "rm",
|
|
49
49
|
},
|
|
50
50
|
};
|
|
51
51
|
const LOADER_ICON_SIZE_MAP = {
|
|
@@ -102,10 +102,11 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
|
|
|
102
102
|
const currentState = isDisabled ? "default" : state;
|
|
103
103
|
const buttonStyles = useMemo(() => {
|
|
104
104
|
const baseStyles = {
|
|
105
|
-
display: "inline-flex",
|
|
105
|
+
display: justifyContent === "space-between" ? "flex" : "inline-flex", // Use flex (block-level) for space-between to ensure full width
|
|
106
106
|
alignItems: "center",
|
|
107
|
-
justifyContent: justifyContent,
|
|
108
|
-
gap: "var(--spacing-100)",
|
|
107
|
+
justifyContent: justifyContent === "space-between" ? "flex-start" : justifyContent, // Use flex-start for space-between, let contentLayout handle distribution
|
|
108
|
+
gap: justifyContent === "space-between" ? "0" : "var(--spacing-100)", // Remove gap for space-between, use spacing-100 for center layout
|
|
109
|
+
textAlign: justifyContent === "space-between" ? "left" : undefined, // Align text to left when space-between is used
|
|
109
110
|
fontFamily: "var(--font-secondary)",
|
|
110
111
|
fontSize: sizeConfig.fontSize,
|
|
111
112
|
lineHeight: "1",
|
|
@@ -121,7 +122,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
|
|
|
121
122
|
paddingRight: sizeConfig.paddingX,
|
|
122
123
|
paddingTop: sizeConfig.paddingY,
|
|
123
124
|
paddingBottom: sizeConfig.paddingY,
|
|
124
|
-
width: fillContainer ? "100%" : "auto",
|
|
125
|
+
width: fillContainer || justifyContent === "space-between" ? "100%" : "auto", // Full width when space-between is used
|
|
125
126
|
opacity: isDisabled ? 0.6 : 1,
|
|
126
127
|
};
|
|
127
128
|
// Get color token prefixes based on color prop
|
|
@@ -234,8 +235,16 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
|
|
|
234
235
|
}
|
|
235
236
|
return { ...baseStyles, ...variantStyles, ...stateStyles, ...style };
|
|
236
237
|
}, [variant, sizeConfig, borderRadius, fillContainer, justifyContent, currentState, isDisabled, isLoading, color, style]);
|
|
237
|
-
|
|
238
|
-
const
|
|
238
|
+
// Clone icons with the correct size based on button size
|
|
239
|
+
const iconSize = sizeConfig.iconSize;
|
|
240
|
+
const clonedStartIcon = startIcon && isValidElement(startIcon)
|
|
241
|
+
? cloneElement(startIcon, { size: iconSize })
|
|
242
|
+
: startIcon;
|
|
243
|
+
const clonedEndIcon = endIcon && isValidElement(endIcon)
|
|
244
|
+
? cloneElement(endIcon, { size: iconSize })
|
|
245
|
+
: endIcon;
|
|
246
|
+
const showStartIcon = !loading && clonedStartIcon;
|
|
247
|
+
const showEndIcon = !loading && clonedEndIcon;
|
|
239
248
|
const handleClick = useCallback((e) => {
|
|
240
249
|
if (isDisabled || isLoading) {
|
|
241
250
|
e.preventDefault();
|
|
@@ -243,5 +252,15 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
|
|
|
243
252
|
}
|
|
244
253
|
onClick?.(e);
|
|
245
254
|
}, [isDisabled, isLoading, onClick]);
|
|
246
|
-
|
|
255
|
+
// For space-between layout, group start icon and text together on the left,
|
|
256
|
+
// with end icon on the right. The wrapper spans full width to ensure proper distribution.
|
|
257
|
+
// The left group uses flex: 1 to take up available space, ensuring text aligns left.
|
|
258
|
+
// For center layout, all items are centered together.
|
|
259
|
+
// Note: To swap text and icons (e.g., text before startIcon), simply reorder
|
|
260
|
+
// the JSX elements in the contentLayout below.
|
|
261
|
+
const contentLayout = justifyContent === "space-between" ? (_jsxs("span", { style: { display: "flex", alignItems: "center", width: "100%", justifyContent: "space-between" }, children: [_jsxs("span", { style: { display: "flex", alignItems: "center", justifyContent: "flex-start", gap: "var(--spacing-100)", flex: "1 1 0%", minWidth: 0, width: 0 }, children: [showStartIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center", flexShrink: 0 }, children: clonedStartIcon }), _jsx("span", { style: { flex: "1 1 0%", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", paddingLeft: showStartIcon ? "0" : undefined }, children: children })] }), showEndIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center", flexShrink: 0, marginLeft: "var(--spacing-100)" }, children: clonedEndIcon })] })) : (_jsxs(_Fragment, { children: [showStartIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: clonedStartIcon }), children, showEndIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: clonedEndIcon })] }));
|
|
262
|
+
// Create invisible content that matches the actual layout structure to preserve width when loading
|
|
263
|
+
// This ensures the button maintains its original size when transitioning to loading state
|
|
264
|
+
const invisibleContent = justifyContent === "space-between" ? (_jsxs("span", { style: { display: "flex", alignItems: "center", width: "100%", justifyContent: "space-between", visibility: "hidden" }, children: [_jsxs("span", { style: { display: "flex", alignItems: "center", justifyContent: "flex-start", gap: "var(--spacing-100)", flex: "1 1 0%", minWidth: 0, width: 0 }, children: [startIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center", flexShrink: 0 }, children: clonedStartIcon }), _jsx("span", { style: { flex: "1 1 0%", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", paddingLeft: startIcon ? "0" : undefined }, children: children })] }), endIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center", flexShrink: 0, marginLeft: "var(--spacing-100)" }, children: clonedEndIcon })] })) : (_jsxs("span", { style: { visibility: "hidden", whiteSpace: "nowrap", display: "inline-flex", alignItems: "center", gap: "var(--spacing-100)" }, children: [startIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: clonedStartIcon }), children, endIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: clonedEndIcon })] }));
|
|
265
|
+
return (_jsx("button", { ref: ref, type: type, className: className, style: { ...buttonStyles, position: loading ? "relative" : undefined }, disabled: isDisabled, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...rest, children: loading ? (_jsxs(_Fragment, { children: [invisibleContent, _jsx("span", { style: { position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)" }, children: _jsx(LoaderIcon, { size: LOADER_ICON_SIZE_MAP[size], className: "ds-button-loading-spinner" }) })] })) : (contentLayout) }));
|
|
247
266
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ComponentPropsWithRef } from "react";
|
|
2
|
+
import type { ButtonVariant, ButtonSize, CornerRadiusStep, ButtonState, ButtonColor } from "./Button";
|
|
3
|
+
export interface ButtonIconProps extends Omit<ComponentPropsWithRef<"button">, "type"> {
|
|
4
|
+
variant?: ButtonVariant;
|
|
5
|
+
size?: ButtonSize;
|
|
6
|
+
cornerRadius?: CornerRadiusStep;
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
loading?: boolean;
|
|
9
|
+
state?: ButtonState;
|
|
10
|
+
color?: ButtonColor;
|
|
11
|
+
type?: "button" | "submit" | "reset";
|
|
12
|
+
}
|
|
13
|
+
export declare function ButtonIcon({ variant, size, cornerRadius, icon, loading, disabled, state: stateProp, color, type, className, style, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ref, ...rest }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
//# sourceMappingURL=ButtonIcon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/components/ButtonIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAgC,MAAM,OAAO,CAAC;AAG5G,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEtG,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IACpF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC;AAsDD,wBAAgB,UAAU,CAAC,EACzB,OAAkB,EAClB,IAAW,EACX,YAAgB,EAChB,IAAI,EACJ,OAAe,EACf,QAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,KAAiB,EACjB,IAAe,EACf,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,2CAwPjB"}
|
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo, useState, useCallback, cloneElement, isValidElement } from "react";
|
|
4
|
+
import { useThemeSafe } from "../providers/ThemeProvider";
|
|
5
|
+
import { LoaderIcon } from "../icons";
|
|
6
|
+
const CORNER_RADIUS_MAP = {
|
|
7
|
+
0: "var(--corner-radius-none)",
|
|
8
|
+
1: "var(--corner-radius-100)",
|
|
9
|
+
2: "var(--corner-radius-200)",
|
|
10
|
+
3: "var(--corner-radius-300)",
|
|
11
|
+
4: "var(--corner-radius-400)",
|
|
12
|
+
5: "var(--corner-radius-full)",
|
|
13
|
+
};
|
|
14
|
+
const SIZE_CONFIG = {
|
|
15
|
+
xs: {
|
|
16
|
+
height: "24px",
|
|
17
|
+
padding: "var(--spacing-200)",
|
|
18
|
+
iconSize: "xs",
|
|
19
|
+
},
|
|
20
|
+
sm: {
|
|
21
|
+
height: "32px",
|
|
22
|
+
padding: "var(--spacing-300)",
|
|
23
|
+
iconSize: "xs",
|
|
24
|
+
},
|
|
25
|
+
md: {
|
|
26
|
+
height: "44px",
|
|
27
|
+
padding: "var(--spacing-400)",
|
|
28
|
+
iconSize: "sm",
|
|
29
|
+
},
|
|
30
|
+
lg: {
|
|
31
|
+
height: "56px",
|
|
32
|
+
padding: "var(--spacing-500)",
|
|
33
|
+
iconSize: "rg",
|
|
34
|
+
},
|
|
35
|
+
xl: {
|
|
36
|
+
height: "68px",
|
|
37
|
+
padding: "var(--spacing-600)",
|
|
38
|
+
iconSize: "rm",
|
|
39
|
+
},
|
|
40
|
+
};
|
|
41
|
+
const LOADER_ICON_SIZE_MAP = {
|
|
42
|
+
xs: 20,
|
|
43
|
+
sm: 24,
|
|
44
|
+
md: 24,
|
|
45
|
+
lg: 32,
|
|
46
|
+
xl: 40,
|
|
47
|
+
};
|
|
48
|
+
export function ButtonIcon({ variant = "filled", size = "md", cornerRadius = 2, icon, loading = false, disabled = false, state: stateProp, color = "primary", type = "button", className, style, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ref, ...rest }) {
|
|
49
|
+
const themeContext = useThemeSafe();
|
|
50
|
+
const sizeConfig = SIZE_CONFIG[size];
|
|
51
|
+
const borderRadius = CORNER_RADIUS_MAP[cornerRadius];
|
|
52
|
+
const [internalState, setInternalState] = useState("default");
|
|
53
|
+
const state = stateProp ?? internalState;
|
|
54
|
+
const handleMouseEnter = useCallback((e) => {
|
|
55
|
+
if (!disabled && !loading && !stateProp) {
|
|
56
|
+
setInternalState("hovered");
|
|
57
|
+
}
|
|
58
|
+
onMouseEnter?.(e);
|
|
59
|
+
}, [disabled, loading, stateProp, onMouseEnter]);
|
|
60
|
+
const handleMouseLeave = useCallback((e) => {
|
|
61
|
+
if (!disabled && !loading && !stateProp) {
|
|
62
|
+
setInternalState("default");
|
|
63
|
+
}
|
|
64
|
+
onMouseLeave?.(e);
|
|
65
|
+
}, [disabled, loading, stateProp, onMouseLeave]);
|
|
66
|
+
const handleFocus = useCallback((e) => {
|
|
67
|
+
if (!disabled && !loading && !stateProp) {
|
|
68
|
+
setInternalState("focused");
|
|
69
|
+
}
|
|
70
|
+
onFocus?.(e);
|
|
71
|
+
}, [disabled, loading, stateProp, onFocus]);
|
|
72
|
+
const handleBlur = useCallback((e) => {
|
|
73
|
+
if (!disabled && !loading && !stateProp) {
|
|
74
|
+
setInternalState("default");
|
|
75
|
+
}
|
|
76
|
+
onBlur?.(e);
|
|
77
|
+
}, [disabled, loading, stateProp, onBlur]);
|
|
78
|
+
const handleMouseDown = useCallback((e) => {
|
|
79
|
+
if (!disabled && !loading && !stateProp) {
|
|
80
|
+
setInternalState("pressed");
|
|
81
|
+
}
|
|
82
|
+
onMouseDown?.(e);
|
|
83
|
+
}, [disabled, loading, stateProp, onMouseDown]);
|
|
84
|
+
const handleMouseUp = useCallback((e) => {
|
|
85
|
+
if (!disabled && !loading && !stateProp) {
|
|
86
|
+
setInternalState("hovered");
|
|
87
|
+
}
|
|
88
|
+
onMouseUp?.(e);
|
|
89
|
+
}, [disabled, loading, stateProp, onMouseUp]);
|
|
90
|
+
const isDisabled = disabled;
|
|
91
|
+
const isLoading = loading;
|
|
92
|
+
const currentState = isDisabled ? "default" : state;
|
|
93
|
+
const buttonStyles = useMemo(() => {
|
|
94
|
+
const baseStyles = {
|
|
95
|
+
display: "inline-flex",
|
|
96
|
+
alignItems: "center",
|
|
97
|
+
justifyContent: "center",
|
|
98
|
+
fontFamily: "var(--font-secondary)",
|
|
99
|
+
borderWidth: "var(--border-width-25)",
|
|
100
|
+
borderStyle: "solid",
|
|
101
|
+
borderColor: "transparent",
|
|
102
|
+
borderRadius,
|
|
103
|
+
cursor: (isDisabled || isLoading) ? "not-allowed" : "pointer",
|
|
104
|
+
transition: "background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease",
|
|
105
|
+
width: sizeConfig.height,
|
|
106
|
+
height: sizeConfig.height,
|
|
107
|
+
minWidth: sizeConfig.height,
|
|
108
|
+
minHeight: sizeConfig.height,
|
|
109
|
+
padding: sizeConfig.padding,
|
|
110
|
+
opacity: isDisabled ? 0.6 : 1,
|
|
111
|
+
};
|
|
112
|
+
// Get color token prefixes based on color prop
|
|
113
|
+
const colorPrefix = color === "primary" ? "primary" : color;
|
|
114
|
+
const bgToken = `--bg-${colorPrefix}`;
|
|
115
|
+
const bgTonalToken = `--bg-${colorPrefix}-tonal`;
|
|
116
|
+
const bgHoverToken = `--bg-${colorPrefix}-on-hover`;
|
|
117
|
+
const bgPressedToken = color === "primary" ? `--bg-${colorPrefix}-pressed` : `--bg-${colorPrefix}-on-hover`;
|
|
118
|
+
const bgFocusedToken = color === "primary" ? `--bg-${colorPrefix}-on-focused` : `--bg-${colorPrefix}-on-hover`;
|
|
119
|
+
const bgTonalHoverToken = color === "primary" ? `--bg-${colorPrefix}-tonal-on-hover` : `--bg-${colorPrefix}-tonal`;
|
|
120
|
+
const fgToken = `--fg-${colorPrefix}`;
|
|
121
|
+
const fgTonalToken = `--fg-${colorPrefix}-on-tonal`;
|
|
122
|
+
const fgHoverToken = color === "primary" ? `--fg-${colorPrefix}-on-hover` : `--fg-${colorPrefix}`;
|
|
123
|
+
const borderToken = `--border-${colorPrefix}`;
|
|
124
|
+
const borderTonalToken = `--border-${colorPrefix}-tonal`;
|
|
125
|
+
const borderHoverToken = color === "primary" ? `--border-${colorPrefix}-on-hover` : `--border-${colorPrefix}`;
|
|
126
|
+
// Get base variant styles
|
|
127
|
+
let variantStyles = {};
|
|
128
|
+
switch (variant) {
|
|
129
|
+
case "filled":
|
|
130
|
+
variantStyles = {
|
|
131
|
+
backgroundColor: `var(${bgToken})`,
|
|
132
|
+
color: "var(--fg-on-action)",
|
|
133
|
+
borderColor: `var(${bgToken})`,
|
|
134
|
+
};
|
|
135
|
+
break;
|
|
136
|
+
case "tonal":
|
|
137
|
+
variantStyles = {
|
|
138
|
+
backgroundColor: `var(${bgTonalToken})`,
|
|
139
|
+
color: `var(${fgTonalToken})`,
|
|
140
|
+
borderColor: `var(${borderTonalToken})`,
|
|
141
|
+
};
|
|
142
|
+
break;
|
|
143
|
+
case "outline":
|
|
144
|
+
variantStyles = {
|
|
145
|
+
backgroundColor: "transparent",
|
|
146
|
+
color: `var(${fgToken})`,
|
|
147
|
+
borderColor: `var(${borderToken})`,
|
|
148
|
+
};
|
|
149
|
+
break;
|
|
150
|
+
case "link":
|
|
151
|
+
variantStyles = {
|
|
152
|
+
backgroundColor: "transparent",
|
|
153
|
+
color: `var(${fgToken})`,
|
|
154
|
+
borderWidth: 0,
|
|
155
|
+
borderStyle: "none",
|
|
156
|
+
borderColor: "transparent",
|
|
157
|
+
};
|
|
158
|
+
break;
|
|
159
|
+
}
|
|
160
|
+
// Apply state-specific overrides
|
|
161
|
+
const stateStyles = {};
|
|
162
|
+
if (isDisabled) {
|
|
163
|
+
if (variant === "filled") {
|
|
164
|
+
stateStyles.backgroundColor = "var(--bg-disabled)";
|
|
165
|
+
stateStyles.color = "var(--fg-on-disabled)";
|
|
166
|
+
stateStyles.borderColor = "var(--border-disabled)";
|
|
167
|
+
}
|
|
168
|
+
else if (variant === "tonal") {
|
|
169
|
+
stateStyles.backgroundColor = "var(--bg-disabled)";
|
|
170
|
+
stateStyles.color = "var(--fg-disabled)";
|
|
171
|
+
stateStyles.borderColor = "var(--border-disabled)";
|
|
172
|
+
}
|
|
173
|
+
else if (variant === "outline") {
|
|
174
|
+
stateStyles.color = "var(--fg-disabled)";
|
|
175
|
+
stateStyles.borderColor = "var(--border-disabled)";
|
|
176
|
+
}
|
|
177
|
+
else if (variant === "link") {
|
|
178
|
+
stateStyles.color = "var(--fg-disabled)";
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
else if (!isLoading && currentState === "hovered") {
|
|
182
|
+
if (variant === "filled") {
|
|
183
|
+
stateStyles.backgroundColor = `var(${bgHoverToken})`;
|
|
184
|
+
stateStyles.borderColor = `var(${bgHoverToken})`;
|
|
185
|
+
}
|
|
186
|
+
else if (variant === "tonal") {
|
|
187
|
+
stateStyles.backgroundColor = `var(${bgTonalHoverToken})`;
|
|
188
|
+
}
|
|
189
|
+
else if (variant === "outline") {
|
|
190
|
+
stateStyles.borderColor = `var(${borderHoverToken})`;
|
|
191
|
+
}
|
|
192
|
+
else if (variant === "link") {
|
|
193
|
+
stateStyles.color = `var(${fgHoverToken})`;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
else if (!isLoading && currentState === "pressed") {
|
|
197
|
+
if (variant === "filled") {
|
|
198
|
+
stateStyles.backgroundColor = `var(${bgPressedToken})`;
|
|
199
|
+
stateStyles.borderColor = `var(${bgPressedToken})`;
|
|
200
|
+
}
|
|
201
|
+
else if (variant === "tonal") {
|
|
202
|
+
stateStyles.backgroundColor = `var(${bgTonalHoverToken})`;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
else if (!isLoading && currentState === "focused") {
|
|
206
|
+
if (variant === "filled") {
|
|
207
|
+
stateStyles.backgroundColor = `var(${bgFocusedToken})`;
|
|
208
|
+
stateStyles.borderColor = `var(${bgFocusedToken})`;
|
|
209
|
+
}
|
|
210
|
+
else if (variant === "outline") {
|
|
211
|
+
stateStyles.borderColor = `var(${borderToken})`;
|
|
212
|
+
}
|
|
213
|
+
stateStyles.outline = `2px solid var(${borderToken})`;
|
|
214
|
+
stateStyles.outlineOffset = "2px";
|
|
215
|
+
}
|
|
216
|
+
return { ...baseStyles, ...variantStyles, ...stateStyles, ...style };
|
|
217
|
+
}, [variant, sizeConfig, borderRadius, currentState, isDisabled, isLoading, color, style]);
|
|
218
|
+
// Clone icon with the correct size based on button size
|
|
219
|
+
const iconSize = sizeConfig.iconSize;
|
|
220
|
+
const clonedIcon = icon && isValidElement(icon)
|
|
221
|
+
? cloneElement(icon, { size: iconSize })
|
|
222
|
+
: icon;
|
|
223
|
+
const showIcon = !loading && clonedIcon;
|
|
224
|
+
const handleClick = useCallback((e) => {
|
|
225
|
+
if (isDisabled || isLoading) {
|
|
226
|
+
e.preventDefault();
|
|
227
|
+
return;
|
|
228
|
+
}
|
|
229
|
+
onClick?.(e);
|
|
230
|
+
}, [isDisabled, isLoading, onClick]);
|
|
231
|
+
return (_jsx("button", { ref: ref, type: type, className: className, style: { ...buttonStyles, position: loading ? "relative" : undefined }, disabled: isDisabled, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...rest, children: loading ? (_jsxs(_Fragment, { children: [icon && (_jsx("span", { style: { visibility: "hidden", display: "inline-flex", alignItems: "center" }, children: clonedIcon })), _jsx("span", { style: { position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)" }, children: _jsx(LoaderIcon, { size: LOADER_ICON_SIZE_MAP[size], className: "ds-button-loading-spinner" }) })] })) : (showIcon && (_jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: clonedIcon }))) }));
|
|
232
|
+
}
|
package/dist/components/Card.js
CHANGED
|
@@ -45,7 +45,7 @@ export function Card({ padding = 400, height, status = "default", shadow, corner
|
|
|
45
45
|
padding: getSpacingToken(padding),
|
|
46
46
|
borderRadius: CORNER_RADIUS_MAP[cornerRadius],
|
|
47
47
|
position: "relative",
|
|
48
|
-
backgroundColor: isDefault ? "var(--bg-page-
|
|
48
|
+
backgroundColor: isDefault ? "var(--bg-page-secondary)" : "var(--bg-page-primary)",
|
|
49
49
|
...(heightValue && { height: heightValue }),
|
|
50
50
|
...(shadow && { boxShadow: getShadowToken(shadow) }),
|
|
51
51
|
...style,
|
package/dist/icons/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ interface IconProps {
|
|
|
2
2
|
size?: number | IconSize;
|
|
3
3
|
className?: string;
|
|
4
4
|
}
|
|
5
|
-
type IconSize = "xs" | "sm" | "rg" | "md" | "lg" | "xl" | "2xl";
|
|
5
|
+
type IconSize = "xs" | "sm" | "rg" | "rm" | "md" | "lg" | "xl" | "2xl";
|
|
6
6
|
export declare function BeaconIcon({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export declare function SearchIcon({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export declare function SearchFilledIcon({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.tsx"],"names":[],"mappings":"AAGA,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { Button } from "./components/Button";
|
|
2
|
+
export { ButtonIcon } from "./components/ButtonIcon";
|
|
2
3
|
export { Card } from "./components/Card";
|
|
3
4
|
export { Checkbox } from "./components/Checkbox";
|
|
4
5
|
export { Switch } from "./components/Switch";
|
|
@@ -9,6 +10,7 @@ export { Menu, type MenuItem as MenuItemData } from "./components/Menu";
|
|
|
9
10
|
export { MenuItem, type MenuItemProps, type MenuItemState } from "./components/MenuItem";
|
|
10
11
|
export { RadioButton } from "./components/RadioButton";
|
|
11
12
|
export type { ButtonProps, ButtonVariant, ButtonSize, CornerRadiusStep, JustifyContent, ButtonState, ButtonColor } from "./components/Button";
|
|
13
|
+
export type { ButtonIconProps } from "./components/ButtonIcon";
|
|
12
14
|
export type { CardProps, CardStatus, CardShadow } from "./components/Card";
|
|
13
15
|
export type { CheckboxProps, CheckboxStatus } from "./components/Checkbox";
|
|
14
16
|
export type { SwitchProps, SwitchStatus } from "./components/Switch";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9I,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9I,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -131,7 +131,6 @@
|
|
|
131
131
|
--color-primary-700: var(--color-chromatic-700);
|
|
132
132
|
--color-primary-800: var(--color-chromatic-800);
|
|
133
133
|
--color-primary-900: var(--color-chromatic-900);
|
|
134
|
-
--icon-size-rm: var(--scale-500);
|
|
135
134
|
}
|
|
136
135
|
|
|
137
136
|
/* hue-sky */
|
|
@@ -145,7 +144,6 @@
|
|
|
145
144
|
--color-primary-700: var(--color-blue-700);
|
|
146
145
|
--color-primary-800: var(--color-blue-800);
|
|
147
146
|
--color-primary-900: var(--color-blue-900);
|
|
148
|
-
--icon-size-rm: var(--scale-550);
|
|
149
147
|
}
|
|
150
148
|
|
|
151
149
|
/* hue-indigo */
|
|
@@ -159,7 +157,6 @@
|
|
|
159
157
|
--color-primary-700: var(--color-purple-700);
|
|
160
158
|
--color-primary-800: var(--color-purple-800);
|
|
161
159
|
--color-primary-900: var(--color-purple-900);
|
|
162
|
-
--icon-size-rm: var(--scale-550);
|
|
163
160
|
}
|
|
164
161
|
|
|
165
162
|
/* Shared semantic tokens (same across all hues) */
|
|
@@ -236,6 +233,7 @@
|
|
|
236
233
|
--icon-size-xs: var(--scale-400);
|
|
237
234
|
--icon-size-sm: var(--scale-450);
|
|
238
235
|
--icon-size-rg: var(--scale-500);
|
|
236
|
+
--icon-size-rm: var(--scale-550);
|
|
239
237
|
--icon-size-md: var(--scale-600);
|
|
240
238
|
--icon-size-lg: var(--scale-650);
|
|
241
239
|
--icon-size-xl: var(--scale-700);
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
--color-primary-700: var(--color-chromatic-700);
|
|
12
12
|
--color-primary-800: var(--color-chromatic-800);
|
|
13
13
|
--color-primary-900: var(--color-chromatic-900);
|
|
14
|
-
--icon-size-rm: var(--scale-500);
|
|
15
14
|
}
|
|
16
15
|
|
|
17
16
|
/* hue-sky */
|
|
@@ -25,7 +24,6 @@
|
|
|
25
24
|
--color-primary-700: var(--color-blue-700);
|
|
26
25
|
--color-primary-800: var(--color-blue-800);
|
|
27
26
|
--color-primary-900: var(--color-blue-900);
|
|
28
|
-
--icon-size-rm: var(--scale-550);
|
|
29
27
|
}
|
|
30
28
|
|
|
31
29
|
/* hue-indigo */
|
|
@@ -39,7 +37,6 @@
|
|
|
39
37
|
--color-primary-700: var(--color-purple-700);
|
|
40
38
|
--color-primary-800: var(--color-purple-800);
|
|
41
39
|
--color-primary-900: var(--color-purple-900);
|
|
42
|
-
--icon-size-rm: var(--scale-550);
|
|
43
40
|
}
|
|
44
41
|
|
|
45
42
|
/* Shared semantic tokens (same across all hues) */
|
|
@@ -116,6 +113,7 @@
|
|
|
116
113
|
--icon-size-xs: var(--scale-400);
|
|
117
114
|
--icon-size-sm: var(--scale-450);
|
|
118
115
|
--icon-size-rg: var(--scale-500);
|
|
116
|
+
--icon-size-rm: var(--scale-550);
|
|
119
117
|
--icon-size-md: var(--scale-600);
|
|
120
118
|
--icon-size-lg: var(--scale-650);
|
|
121
119
|
--icon-size-xl: var(--scale-700);
|
|
Binary file
|
|
Binary file
|
|
Binary file
|