beacon-ui 3.1.4 → 3.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dist/components/Menu.d.ts +2 -1
- package/dist/components/Menu.d.ts.map +1 -1
- package/dist/components/Menu.js +12 -8
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,16 @@ 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.1.5] - 2025-12-29
|
|
9
|
+
|
|
10
|
+
### Fixed
|
|
11
|
+
- Menu component now uses public `Switch` component API instead of internal `SwitchPreview`
|
|
12
|
+
- Menu component accepts optional `avatarImageUrl` prop instead of hardcoded image path
|
|
13
|
+
- Menu component properly uses theme context for theme and hue values
|
|
14
|
+
|
|
15
|
+
### Changed
|
|
16
|
+
- Menu component falls back to `UserPersonIcon` when `avatarImageUrl` is not provided
|
|
17
|
+
|
|
8
18
|
## [3.1.4] - 2025-12-29
|
|
9
19
|
|
|
10
20
|
### Added
|
|
@@ -12,9 +12,10 @@ interface MenuProps {
|
|
|
12
12
|
headerTitle?: string;
|
|
13
13
|
headerSubtitle?: string;
|
|
14
14
|
showChevrons?: boolean;
|
|
15
|
+
avatarImageUrl?: string;
|
|
15
16
|
theme?: Theme;
|
|
16
17
|
hue?: HueVariant;
|
|
17
18
|
}
|
|
18
|
-
export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, theme, hue, }: MenuProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, avatarImageUrl, theme: themeProp, hue: hueProp, }: MenuProps): import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
export {};
|
|
20
21
|
//# sourceMappingURL=Menu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,CAAC;AAEhH,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB;AAUD,wBAAgB,IAAI,CAAC,EACnB,OAAmB,EACnB,QAAe,EACf,UAAiB,EACjB,SAA8B,EAC9B,WAAqB,EACrB,cAA2B,EAC3B,YAAmB,EACnB,cAAc,EACd,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,OAAO,GACb,EAAE,SAAS,2CAiZX"}
|
package/dist/components/Menu.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo } from "react";
|
|
4
4
|
import { UserPersonIcon, ChevronRightIcon, CloseIcon, MenuIcon, DownloadIcon } from "../icons";
|
|
5
|
-
import {
|
|
5
|
+
import { Switch } from "./Switch";
|
|
6
|
+
import { useThemeSafe } from "../providers/ThemeProvider";
|
|
6
7
|
const DEFAULT_MENU_ITEMS = [
|
|
7
8
|
{ id: "1", label: "Menu Item #1" },
|
|
8
9
|
{ id: "2", label: "Menu Item #2" },
|
|
@@ -10,7 +11,10 @@ const DEFAULT_MENU_ITEMS = [
|
|
|
10
11
|
{ id: "4", label: "Menu Item #4" },
|
|
11
12
|
{ id: "5", label: "Menu Item #5" },
|
|
12
13
|
];
|
|
13
|
-
export function Menu({ variant = "desktop", showMenu = true, showButton = true, menuItems = DEFAULT_MENU_ITEMS, headerTitle = "Title", headerSubtitle = "Subtitle", showChevrons = true, theme, hue, }) {
|
|
14
|
+
export function Menu({ variant = "desktop", showMenu = true, showButton = true, menuItems = DEFAULT_MENU_ITEMS, headerTitle = "Title", headerSubtitle = "Subtitle", showChevrons = true, avatarImageUrl, theme: themeProp, hue: hueProp, }) {
|
|
15
|
+
const themeContext = useThemeSafe();
|
|
16
|
+
const theme = themeProp ?? themeContext?.theme ?? "light";
|
|
17
|
+
const hue = hueProp ?? themeContext?.hue ?? "chromatic-prime";
|
|
14
18
|
const containerStyles = useMemo(() => {
|
|
15
19
|
const baseStyles = {
|
|
16
20
|
display: "flex",
|
|
@@ -193,12 +197,12 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
|
|
|
193
197
|
const isMobileClosed = variant === "mobile-closed";
|
|
194
198
|
const showMenuItems = (isDesktop || isTabletOpen || isMobileOpen) && showMenu;
|
|
195
199
|
const showHeaderContent = isDesktop || isTabletOpen || isTabletClosed;
|
|
196
|
-
return (_jsxs("div", { style: containerStyles, children: [isDesktop ? (_jsx(_Fragment, { children: _jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: _jsx("img", { src:
|
|
200
|
+
return (_jsxs("div", { style: containerStyles, children: [isDesktop ? (_jsx(_Fragment, { children: _jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: avatarImageUrl ? (_jsx("img", { src: avatarImageUrl, alt: "User avatar", style: {
|
|
197
201
|
width: "100%",
|
|
198
202
|
height: "100%",
|
|
199
203
|
objectFit: "cover",
|
|
200
204
|
objectPosition: "center",
|
|
201
|
-
} }) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
|
|
205
|
+
} })) : (_jsx(UserPersonIcon, { size: 24 })) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
|
|
202
206
|
fontFamily: "var(--font-secondary)",
|
|
203
207
|
fontSize: "var(--body-small-text-size)",
|
|
204
208
|
lineHeight: "var(--body-small-line-height)",
|
|
@@ -214,12 +218,12 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
|
|
|
214
218
|
margin: 0,
|
|
215
219
|
}, children: headerSubtitle })] }))] }) })) : (
|
|
216
220
|
/* Tablet/Mobile: Header and Footer in single row */
|
|
217
|
-
_jsxs("div", { style: mainRowStyles, children: [_jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: _jsx("img", { src:
|
|
221
|
+
_jsxs("div", { style: mainRowStyles, children: [_jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: avatarImageUrl ? (_jsx("img", { src: avatarImageUrl, alt: "User avatar", style: {
|
|
218
222
|
width: "100%",
|
|
219
223
|
height: "100%",
|
|
220
224
|
objectFit: "cover",
|
|
221
225
|
objectPosition: "center",
|
|
222
|
-
} }) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
|
|
226
|
+
} })) : (_jsx(UserPersonIcon, { size: 24 })) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
|
|
223
227
|
fontFamily: "var(--font-secondary)",
|
|
224
228
|
fontSize: "var(--body-small-text-size)",
|
|
225
229
|
lineHeight: "var(--body-small-line-height)",
|
|
@@ -233,7 +237,7 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
|
|
|
233
237
|
fontWeight: "var(--font-weight-secondary-medium)",
|
|
234
238
|
color: "var(--fg-neutral)",
|
|
235
239
|
margin: 0,
|
|
236
|
-
}, children: headerSubtitle })] }))] }), _jsxs("div", { style: footerStyles, children: [showButton && (_jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] })), _jsx(
|
|
240
|
+
}, children: headerSubtitle })] }))] }), _jsxs("div", { style: footerStyles, children: [showButton && (_jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] })), _jsx(Switch, { checked: theme === "dark", showIcons: true }), _jsx("button", { style: iconButtonStyles, children: _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "32px", height: "32px" }, children: [(isTabletOpen || isMobileOpen) && _jsx(CloseIcon, { size: 32 }), (isTabletClosed || isMobileClosed) && _jsx(MenuIcon, { size: 32 })] }) })] })] })), showMenuItems && (_jsx("div", { style: {
|
|
237
241
|
display: "flex",
|
|
238
242
|
flexDirection: "column",
|
|
239
243
|
gap: "var(--spacing-200)",
|
|
@@ -248,5 +252,5 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
|
|
|
248
252
|
color: "var(--fg-neutral-secondary)",
|
|
249
253
|
margin: 0,
|
|
250
254
|
flex: 1,
|
|
251
|
-
}, children: item.label }), showChevrons && (_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px", flexShrink: 0, color: "var(--fg-neutral)" }, children: _jsx(ChevronRightIcon, { size: 16 }) }))] }, item.id))) })), isDesktop && (_jsxs(_Fragment, { children: [showButton && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-400)", padding: "var(--spacing-400)", width: "100%" }, children: _jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] }) })), _jsx("div", { style: footerStyles, children: _jsx(
|
|
255
|
+
}, children: item.label }), showChevrons && (_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px", flexShrink: 0, color: "var(--fg-neutral)" }, children: _jsx(ChevronRightIcon, { size: 16 }) }))] }, item.id))) })), isDesktop && (_jsxs(_Fragment, { children: [showButton && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-400)", padding: "var(--spacing-400)", width: "100%" }, children: _jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] }) })), _jsx("div", { style: footerStyles, children: _jsx(Switch, { checked: theme === "dark", showIcons: true }) })] }))] }));
|
|
252
256
|
}
|