beacon-ui 3.5.0 → 3.5.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/components/Avatar.d.ts +11 -2
  3. package/dist/components/Avatar.d.ts.map +1 -1
  4. package/dist/components/Avatar.js +3 -2
  5. package/package.json +1 -1
  6. package/tokens/generated/brand-dark.css +5 -0
  7. package/tokens/generated/brand-light.css +5 -0
  8. package/tokens/generated/index.css +10 -0
package/CHANGELOG.md CHANGED
@@ -28,6 +28,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
28
28
  - Select component dropdown items now correctly match design specifications for each size variant
29
29
  - Input component iconOnly mode now properly sizes to square dimensions matching component guidelines
30
30
 
31
+ ## [3.5.2] - 2026-01-09
32
+
33
+ ### Added
34
+ - Avatar component now supports custom icon swapping via `icon` prop when `type="icon"`
35
+ - Added `IconProps` and `IconSize` type exports for icon component compatibility
36
+
37
+ ### Changed
38
+ - Avatar component icon rendering now accepts any icon component that matches the `IconProps` interface
39
+ - Default icon remains `UserPersonIcon` when no custom icon is provided (backward compatible)
40
+
41
+ ## [3.5.1] - 2026-01-09
42
+
43
+ ### Changed
44
+ - Updated design token variables across the system
45
+
31
46
  ## [3.4.8] - 2026-01-08
32
47
 
33
48
  ### Added
package/dist/components/Avatar.d.ts CHANGED
@@ -1,8 +1,14 @@
1
- import { ComponentPropsWithRef } from "react";
1
+ import { ComponentPropsWithRef, ComponentType } from "react";
2
2
  export type AvatarSize = "sm" | "md" | "lg" | "xl";
3
3
  export type AvatarType = "icon" | "text" | "image";
4
4
  export type AvatarColor = "primary" | "neutral" | "success" | "critical" | "warning";
5
5
  export type AvatarVariant = "solid" | "faded";
6
+ export type IconSize = "xs" | "sm" | "rg" | "rm" | "md" | "lg" | "xl" | "2xl";
7
+ export interface IconProps {
8
+ size?: number | IconSize;
9
+ className?: string;
10
+ color?: string;
11
+ }
6
12
  export interface AvatarProps extends ComponentPropsWithRef<"div"> {
7
13
  size?: AvatarSize;
8
14
  type?: AvatarType;
@@ -12,6 +18,9 @@ export interface AvatarProps extends ComponentPropsWithRef<"div"> {
12
18
  hasStroke?: boolean;
13
19
  initials?: string;
14
20
  imageUrl?: string;
21
+ icon?: ComponentType<Partial<IconProps> & {
22
+ size?: number | string | IconSize;
23
+ }>;
15
24
  }
16
- export declare function Avatar({ size, type, color, variant, isRound, hasStroke, initials, imageUrl, className, style, ref, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
25
+ export declare function Avatar({ size, type, color, variant, isRound, hasStroke, initials, imageUrl, icon: IconComponent, className, style, ref, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
17
26
  //# sourceMappingURL=Avatar.d.ts.map
package/dist/components/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAIjE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AACrF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC/D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAwBD,wBAAgB,MAAM,CAAC,EACrB,IAAW,EACX,IAAa,EACb,KAAiB,EACjB,OAAiB,EACjB,OAAe,EACf,SAAiB,EACjB,QAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAyLb"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,qBAAqB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAIhF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AACrF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE9E,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC/D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;KAAE,CAAC,CAAC;CAClF;AAwBD,wBAAgB,MAAM,CAAC,EACrB,IAAW,EACX,IAAa,EACb,KAAiB,EACjB,OAAiB,EACjB,OAAe,EACf,SAAiB,EACjB,QAAe,EACf,QAAQ,EACR,IAAI,EAAE,aAAa,EACnB,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CA0Lb"}
package/dist/components/Avatar.js CHANGED
@@ -22,7 +22,7 @@ const TEXT_SIZE_CONFIG = {
22
22
  md: { fontSize: "var(--body-regular-text-size)" },
23
23
  lg: { fontSize: "var(--heading-h5-text-size)" },
24
24
  };
25
- export function Avatar({ size = "md", type = "icon", color = "primary", variant = "solid", isRound = false, hasStroke = false, initials = "JD", imageUrl, className, style, ref, ...rest }) {
25
+ export function Avatar({ size = "md", type = "icon", color = "primary", variant = "solid", isRound = false, hasStroke = false, initials = "JD", imageUrl, icon: IconComponent, className, style, ref, ...rest }) {
26
26
  useThemeSafe(); // Ensure theme context is available
27
27
  const [imageError, setImageError] = useState(false);
28
28
  const containerSize = CONTAINER_SIZE_CONFIG[size];
@@ -166,11 +166,12 @@ export function Avatar({ size = "md", type = "icon", color = "primary", variant
166
166
  // Icon type: no xl size
167
167
  const iconSize = size === "xl" ? "lg" : size;
168
168
  const iconConfig = ICON_SIZE_CONFIG[iconSize];
169
+ const Icon = IconComponent || UserPersonIcon;
169
170
  return (_jsx("div", { style: {
170
171
  display: "flex",
171
172
  alignItems: "center",
172
173
  justifyContent: "center",
173
- }, children: _jsx(UserPersonIcon, { size: iconConfig.size }) }));
174
+ }, children: _jsx(Icon, { size: iconConfig.size }) }));
174
175
  };
175
176
  return (_jsx("div", { ref: ref, className: className, style: avatarStyles, ...rest, children: renderContent() }));
176
177
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beacon-ui",
3
- "version": "3.5.0",
3
+ "version": "3.5.2",
4
4
  "description": "Beacon Design System - Components and tokens",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/tokens/generated/brand-dark.css CHANGED
@@ -82,6 +82,11 @@
82
82
  --util-overlay-light: var(--color-alpha-neutral-black-300);
83
83
  --util-overlay-medium: var(--color-alpha-neutral-black-500);
84
84
  --util-overlay-strong: var(--color-alpha-neutral-black-700);
85
+ --util-bright-alpha-100: var(--color-alpha-neutral-white-100);
86
+ --util-bright-alpha-200: var(--color-alpha-neutral-white-200);
87
+ --util-bright-alpha-300: var(--color-alpha-neutral-white-300);
88
+ --util-bright-alpha-400: var(--color-alpha-neutral-white-400);
89
+ --util-brigh-alpha-500: var(--color-alpha-neutral-white-500);
85
90
  --shadow-none: var(--color-alpha-neutral-black-0);
86
91
  --shadow-subtle: var(--color-alpha-neutral-black-100);
87
92
  --shadow-normal: var(--color-alpha-neutral-black-200);
package/tokens/generated/brand-light.css CHANGED
@@ -82,6 +82,11 @@
82
82
  --util-overlay-light: var(--color-alpha-neutral-black-300);
83
83
  --util-overlay-medium: var(--color-alpha-neutral-black-500);
84
84
  --util-overlay-strong: var(--color-alpha-neutral-black-700);
85
+ --util-bright-alpha-100: var(--color-alpha-neutral-black-100);
86
+ --util-bright-alpha-200: var(--color-alpha-neutral-black-200);
87
+ --util-bright-alpha-300: var(--color-alpha-neutral-black-300);
88
+ --util-bright-alpha-400: var(--color-alpha-neutral-black-400);
89
+ --util-brigh-alpha-500: var(--color-alpha-neutral-black-500);
85
90
  --shadow-none: var(--color-alpha-neutral-black-0);
86
91
  --shadow-subtle: var(--color-alpha-neutral-black-100);
87
92
  --shadow-normal: var(--color-alpha-neutral-black-200);
package/tokens/generated/index.css CHANGED
@@ -404,6 +404,11 @@
404
404
  --util-overlay-light: var(--color-alpha-neutral-black-300);
405
405
  --util-overlay-medium: var(--color-alpha-neutral-black-500);
406
406
  --util-overlay-strong: var(--color-alpha-neutral-black-700);
407
+ --util-bright-alpha-100: var(--color-alpha-neutral-black-100);
408
+ --util-bright-alpha-200: var(--color-alpha-neutral-black-200);
409
+ --util-bright-alpha-300: var(--color-alpha-neutral-black-300);
410
+ --util-bright-alpha-400: var(--color-alpha-neutral-black-400);
411
+ --util-brigh-alpha-500: var(--color-alpha-neutral-black-500);
407
412
  --shadow-none: var(--color-alpha-neutral-black-0);
408
413
  --shadow-subtle: var(--color-alpha-neutral-black-100);
409
414
  --shadow-normal: var(--color-alpha-neutral-black-200);
@@ -495,6 +500,11 @@
495
500
  --util-overlay-light: var(--color-alpha-neutral-black-300);
496
501
  --util-overlay-medium: var(--color-alpha-neutral-black-500);
497
502
  --util-overlay-strong: var(--color-alpha-neutral-black-700);
503
+ --util-bright-alpha-100: var(--color-alpha-neutral-white-100);
504
+ --util-bright-alpha-200: var(--color-alpha-neutral-white-200);
505
+ --util-bright-alpha-300: var(--color-alpha-neutral-white-300);
506
+ --util-bright-alpha-400: var(--color-alpha-neutral-white-400);
507
+ --util-brigh-alpha-500: var(--color-alpha-neutral-white-500);
498
508
  --shadow-none: var(--color-alpha-neutral-black-0);
499
509
  --shadow-subtle: var(--color-alpha-neutral-black-100);
500
510
  --shadow-normal: var(--color-alpha-neutral-black-200);