design-zystem 1.0.400 → 1.0.401

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 (5) hide show
  1. package/dist/ui/index.d.mts +4 -0
  2. package/dist/ui/index.d.ts +4 -0
  3. package/dist/ui/index.js +48 -18
  4. package/dist/ui/index.mjs +48 -18
  5. package/package.json +1 -1
package/dist/ui/index.d.mts CHANGED
@@ -805,6 +805,8 @@ interface AvatarProps extends Omit<ComponentPropsWithoutRef<typeof RadixAvatar.R
805
805
  name?: string;
806
806
  src?: string | null;
807
807
  color?: ColorToken;
808
+ backgroundColor?: HexColor;
809
+ textColor?: HexColor;
808
810
  badge?: AvatarBadgeConfig;
809
811
  }
810
812
  /** Sans `children` : mode raccourci, auto-compose Image/Fallback/Badge à partir de `name`/`src`/`color`/`badge`. Avec `children` : composition manuelle (`AvatarImage`, `AvatarFallback`, `AvatarBadge`) pour un contrôle total. */
@@ -813,6 +815,8 @@ type AvatarImageProps = ComponentPropsWithoutRef<typeof RadixAvatar.Image>;
813
815
  declare const AvatarImage: react.ForwardRefExoticComponent<Omit<RadixAvatar.AvatarImageProps & react.RefAttributes<HTMLImageElement>, "ref"> & react.RefAttributes<HTMLImageElement>>;
814
816
  interface AvatarFallbackProps extends ComponentPropsWithoutRef<typeof RadixAvatar.Fallback> {
815
817
  color?: ColorToken;
818
+ backgroundColor?: HexColor;
819
+ textColor?: HexColor;
816
820
  }
817
821
  declare const AvatarFallback: react.ForwardRefExoticComponent<AvatarFallbackProps & react.RefAttributes<HTMLSpanElement>>;
818
822
  interface AvatarBadgeProps extends HTMLAttributes<HTMLDivElement> {
package/dist/ui/index.d.ts CHANGED
@@ -805,6 +805,8 @@ interface AvatarProps extends Omit<ComponentPropsWithoutRef<typeof RadixAvatar.R
805
805
  name?: string;
806
806
  src?: string | null;
807
807
  color?: ColorToken;
808
+ backgroundColor?: HexColor;
809
+ textColor?: HexColor;
808
810
  badge?: AvatarBadgeConfig;
809
811
  }
810
812
  /** Sans `children` : mode raccourci, auto-compose Image/Fallback/Badge à partir de `name`/`src`/`color`/`badge`. Avec `children` : composition manuelle (`AvatarImage`, `AvatarFallback`, `AvatarBadge`) pour un contrôle total. */
@@ -813,6 +815,8 @@ type AvatarImageProps = ComponentPropsWithoutRef<typeof RadixAvatar.Image>;
813
815
  declare const AvatarImage: react.ForwardRefExoticComponent<Omit<RadixAvatar.AvatarImageProps & react.RefAttributes<HTMLImageElement>, "ref"> & react.RefAttributes<HTMLImageElement>>;
814
816
  interface AvatarFallbackProps extends ComponentPropsWithoutRef<typeof RadixAvatar.Fallback> {
815
817
  color?: ColorToken;
818
+ backgroundColor?: HexColor;
819
+ textColor?: HexColor;
816
820
  }
817
821
  declare const AvatarFallback: react.ForwardRefExoticComponent<AvatarFallbackProps & react.RefAttributes<HTMLSpanElement>>;
818
822
  interface AvatarBadgeProps extends HTMLAttributes<HTMLDivElement> {
package/dist/ui/index.js CHANGED
@@ -3740,6 +3740,8 @@ var Avatar = (0, import_react27.forwardRef)(
3740
3740
  name,
3741
3741
  src,
3742
3742
  color,
3743
+ backgroundColor,
3744
+ textColor,
3743
3745
  badge,
3744
3746
  className,
3745
3747
  style,
@@ -3750,6 +3752,8 @@ var Avatar = (0, import_react27.forwardRef)(
3750
3752
  "name",
3751
3753
  "src",
3752
3754
  "color",
3755
+ "backgroundColor",
3756
+ "textColor",
3753
3757
  "badge",
3754
3758
  "className",
3755
3759
  "style",
@@ -3765,11 +3769,19 @@ var Avatar = (0, import_react27.forwardRef)(
3765
3769
  shape === "circle" ? "rounded-full" : "rounded-[4px]",
3766
3770
  className
3767
3771
  ),
3768
- style: __spreadValues({ width: size, height: size }, style)
3772
+ style: __spreadValues({ width: size, height: size, backgroundColor }, style)
3769
3773
  }, props), {
3770
3774
  children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
3771
3775
  src && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AvatarImage, { src, alt: name }),
3772
- /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AvatarFallback, { color, children: getInitials({ name }) }),
3776
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
3777
+ AvatarFallback,
3778
+ {
3779
+ color,
3780
+ backgroundColor,
3781
+ textColor,
3782
+ children: getInitials({ name })
3783
+ }
3784
+ ),
3773
3785
  badge && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AvatarBadge, { className: BADGE_BG_CLASS[badge.backgroundColor], children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
3774
3786
  FaIcon,
3775
3787
  {
@@ -3811,22 +3823,40 @@ var FALLBACK_COLOR_CLASS = {
3811
3823
  "orange-600": "bg-orange-600 text-white",
3812
3824
  "purple-700": "bg-purple-700 text-white"
3813
3825
  };
3814
- var AvatarFallback = (0, import_react27.forwardRef)((_a, ref) => {
3815
- var _b = _a, { color = "grey-600", className, style } = _b, props = __objRest(_b, ["color", "className", "style"]);
3816
- const size = useAvatarSize();
3817
- return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
3818
- RadixAvatar.Fallback,
3819
- __spreadValues({
3820
- ref,
3821
- className: cn(
3822
- "flex h-full w-full select-none items-center justify-center rounded-[inherit] font-semibold",
3823
- FALLBACK_COLOR_CLASS[color],
3824
- className
3825
- ),
3826
- style: __spreadValues({ fontSize: Math.round(size * 0.4) }, style)
3827
- }, props)
3828
- );
3829
- });
3826
+ var AvatarFallback = (0, import_react27.forwardRef)(
3827
+ (_a, ref) => {
3828
+ var _b = _a, {
3829
+ color = "grey-600",
3830
+ backgroundColor,
3831
+ textColor,
3832
+ className,
3833
+ style
3834
+ } = _b, props = __objRest(_b, [
3835
+ "color",
3836
+ "backgroundColor",
3837
+ "textColor",
3838
+ "className",
3839
+ "style"
3840
+ ]);
3841
+ const size = useAvatarSize();
3842
+ return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
3843
+ RadixAvatar.Fallback,
3844
+ __spreadValues({
3845
+ ref,
3846
+ className: cn(
3847
+ "flex h-full w-full select-none items-center justify-center rounded-[inherit] font-semibold",
3848
+ FALLBACK_COLOR_CLASS[color],
3849
+ className
3850
+ ),
3851
+ style: __spreadValues({
3852
+ fontSize: Math.round(size * 0.4),
3853
+ backgroundColor,
3854
+ color: textColor
3855
+ }, style)
3856
+ }, props)
3857
+ );
3858
+ }
3859
+ );
3830
3860
  AvatarFallback.displayName = "AvatarFallback";
3831
3861
  var AvatarBadge = (0, import_react27.forwardRef)(
3832
3862
  (_a, ref) => {
package/dist/ui/index.mjs CHANGED
@@ -3560,6 +3560,8 @@ var Avatar = forwardRef18(
3560
3560
  name,
3561
3561
  src,
3562
3562
  color,
3563
+ backgroundColor,
3564
+ textColor,
3563
3565
  badge,
3564
3566
  className,
3565
3567
  style,
@@ -3570,6 +3572,8 @@ var Avatar = forwardRef18(
3570
3572
  "name",
3571
3573
  "src",
3572
3574
  "color",
3575
+ "backgroundColor",
3576
+ "textColor",
3573
3577
  "badge",
3574
3578
  "className",
3575
3579
  "style",
@@ -3585,11 +3589,19 @@ var Avatar = forwardRef18(
3585
3589
  shape === "circle" ? "rounded-full" : "rounded-[4px]",
3586
3590
  className
3587
3591
  ),
3588
- style: __spreadValues({ width: size, height: size }, style)
3592
+ style: __spreadValues({ width: size, height: size, backgroundColor }, style)
3589
3593
  }, props), {
3590
3594
  children: children != null ? children : /* @__PURE__ */ jsxs21(Fragment3, { children: [
3591
3595
  src && /* @__PURE__ */ jsx44(AvatarImage, { src, alt: name }),
3592
- /* @__PURE__ */ jsx44(AvatarFallback, { color, children: getInitials({ name }) }),
3596
+ /* @__PURE__ */ jsx44(
3597
+ AvatarFallback,
3598
+ {
3599
+ color,
3600
+ backgroundColor,
3601
+ textColor,
3602
+ children: getInitials({ name })
3603
+ }
3604
+ ),
3593
3605
  badge && /* @__PURE__ */ jsx44(AvatarBadge, { className: BADGE_BG_CLASS[badge.backgroundColor], children: /* @__PURE__ */ jsx44(
3594
3606
  FaIcon,
3595
3607
  {
@@ -3631,22 +3643,40 @@ var FALLBACK_COLOR_CLASS = {
3631
3643
  "orange-600": "bg-orange-600 text-white",
3632
3644
  "purple-700": "bg-purple-700 text-white"
3633
3645
  };
3634
- var AvatarFallback = forwardRef18((_a, ref) => {
3635
- var _b = _a, { color = "grey-600", className, style } = _b, props = __objRest(_b, ["color", "className", "style"]);
3636
- const size = useAvatarSize();
3637
- return /* @__PURE__ */ jsx44(
3638
- RadixAvatar.Fallback,
3639
- __spreadValues({
3640
- ref,
3641
- className: cn(
3642
- "flex h-full w-full select-none items-center justify-center rounded-[inherit] font-semibold",
3643
- FALLBACK_COLOR_CLASS[color],
3644
- className
3645
- ),
3646
- style: __spreadValues({ fontSize: Math.round(size * 0.4) }, style)
3647
- }, props)
3648
- );
3649
- });
3646
+ var AvatarFallback = forwardRef18(
3647
+ (_a, ref) => {
3648
+ var _b = _a, {
3649
+ color = "grey-600",
3650
+ backgroundColor,
3651
+ textColor,
3652
+ className,
3653
+ style
3654
+ } = _b, props = __objRest(_b, [
3655
+ "color",
3656
+ "backgroundColor",
3657
+ "textColor",
3658
+ "className",
3659
+ "style"
3660
+ ]);
3661
+ const size = useAvatarSize();
3662
+ return /* @__PURE__ */ jsx44(
3663
+ RadixAvatar.Fallback,
3664
+ __spreadValues({
3665
+ ref,
3666
+ className: cn(
3667
+ "flex h-full w-full select-none items-center justify-center rounded-[inherit] font-semibold",
3668
+ FALLBACK_COLOR_CLASS[color],
3669
+ className
3670
+ ),
3671
+ style: __spreadValues({
3672
+ fontSize: Math.round(size * 0.4),
3673
+ backgroundColor,
3674
+ color: textColor
3675
+ }, style)
3676
+ }, props)
3677
+ );
3678
+ }
3679
+ );
3650
3680
  AvatarFallback.displayName = "AvatarFallback";
3651
3681
  var AvatarBadge = forwardRef18(
3652
3682
  (_a, ref) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "design-zystem",
3
- "version": "1.0.400",
3
+ "version": "1.0.401",
4
4
  "description": "A React design system of importable components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",