@popgrids/ui 0.0.33 → 0.0.35

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 (13) hide show
  1. package/dist/avatar.cjs +77 -12
  2. package/dist/avatar.cjs.map +1 -1
  3. package/dist/avatar.d.cts +5 -3
  4. package/dist/avatar.d.ts +5 -3
  5. package/dist/avatar.js +77 -12
  6. package/dist/avatar.js.map +1 -1
  7. package/dist/index.cjs +77 -12
  8. package/dist/index.cjs.map +1 -1
  9. package/dist/index.js +77 -12
  10. package/dist/index.js.map +1 -1
  11. package/dist/metafile-cjs.json +1 -1
  12. package/dist/metafile-esm.json +1 -1
  13. package/package.json +1 -1
package/dist/avatar.cjs CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  var avatar = require('@base-ui/react/avatar');
4
4
  var classVarianceAuthority = require('class-variance-authority');
5
+ var react = require('react');
5
6
  var clsx = require('clsx');
6
7
  var tailwindMerge = require('tailwind-merge');
7
8
  var mergeProps = require('@base-ui/react/merge-props');
@@ -82,8 +83,59 @@ var avatarVariants = classVarianceAuthority.cva(
82
83
  }
83
84
  }
84
85
  );
85
- function Avatar({ className = "", size = "md", ...props }) {
86
- return /* @__PURE__ */ jsxRuntime.jsx(
86
+ function fnv1a32(data) {
87
+ const bytes = new TextEncoder().encode(data);
88
+ let h = 2166136261;
89
+ for (let i = 0; i < bytes.length; i++) {
90
+ h ^= bytes[i];
91
+ h = Math.imul(h, 16777619);
92
+ }
93
+ return h >>> 0;
94
+ }
95
+ var BACKGROUND_COLORS = [
96
+ "#DDD0BE",
97
+ "#E9DCBB",
98
+ "#E9DCBB",
99
+ "#C7D1B0",
100
+ "#C6D0CB",
101
+ "#E9DCBB",
102
+ "#C7D1B0",
103
+ "#E9DCBB",
104
+ "#DFC2C0",
105
+ "#CFD4C6",
106
+ "#D7E3E8",
107
+ "#CFD4C6",
108
+ "#D6B3B3",
109
+ "#E9DCBB",
110
+ "#CFCBDC",
111
+ "#BFD6D7",
112
+ "#E3D2C6",
113
+ "#D1E2E7",
114
+ "#D6B3B3",
115
+ "#BFD6D7",
116
+ "#E9DCBB",
117
+ "#C7D1B0",
118
+ "#DFC2C0",
119
+ "#D1E2E7",
120
+ "#CFD4C6",
121
+ "#E9DCBB",
122
+ "#D7E3E8",
123
+ "#CFD4C6",
124
+ "#C6D0CB",
125
+ "#E9DCBB",
126
+ "#C7D1B0",
127
+ "#E9DCBB",
128
+ "#CFCBDC",
129
+ "#E3D2C6",
130
+ "#E9DCBB"
131
+ ];
132
+ function backgroundColor(id) {
133
+ return BACKGROUND_COLORS[fnv1a32(id) % BACKGROUND_COLORS.length];
134
+ }
135
+ var AvatarColorContext = react.createContext(void 0);
136
+ function Avatar({ className = "", size = "md", colorKey, ...props }) {
137
+ const resolvedColor = colorKey ? backgroundColor(colorKey) : void 0;
138
+ return /* @__PURE__ */ jsxRuntime.jsx(AvatarColorContext.Provider, { value: resolvedColor, children: /* @__PURE__ */ jsxRuntime.jsx(
87
139
  avatar.Avatar.Root,
88
140
  {
89
141
  "data-slot": "avatar",
@@ -91,28 +143,41 @@ function Avatar({ className = "", size = "md", ...props }) {
91
143
  className: cn(avatarVariants({ size }), className),
92
144
  ...props
93
145
  }
94
- );
146
+ ) });
95
147
  }
96
- function AvatarImage({ className = "", ...props }) {
148
+ function AvatarImage({ className = "", style, ...props }) {
149
+ const resolvedColor = react.useContext(AvatarColorContext);
150
+ const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
97
151
  return /* @__PURE__ */ jsxRuntime.jsx(
98
152
  avatar.Avatar.Image,
99
153
  {
100
154
  "data-slot": "avatar-image",
101
- className: cn("aspect-square size-full mask mask-squircle object-cover", className),
102
- ...props
155
+ className: cn("mask mask-squircle aspect-square size-full object-cover", className),
156
+ ...props,
157
+ style: mergedStyle
103
158
  }
104
159
  );
105
160
  }
106
- function AvatarFallback({ className = "", ...props }) {
161
+ function AvatarFallback({ className = "", style, ...props }) {
162
+ const resolvedColor = react.useContext(AvatarColorContext);
163
+ const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
107
164
  return /* @__PURE__ */ jsxRuntime.jsx(
108
165
  avatar.Avatar.Fallback,
109
166
  {
110
167
  "data-slot": "avatar-fallback",
111
168
  className: cn(
112
- "mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
169
+ "mask mask-squircle text-muted-foreground flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
170
+ resolvedColor ? void 0 : "bg-muted",
171
+ "group-data-[size=xs]/avatar:text-xs",
172
+ "group-data-[size=sm]/avatar:text-sm",
173
+ "group-data-[size=md]/avatar:text-lg",
174
+ "group-data-[size=lg]/avatar:text-2xl",
175
+ "group-data-[size=xl]/avatar:text-4xl",
176
+ "group-data-[size=xxl]/avatar:text-5xl",
113
177
  className
114
178
  ),
115
- ...props
179
+ ...props,
180
+ style: mergedStyle
116
181
  }
117
182
  );
118
183
  }
@@ -122,7 +187,7 @@ function AvatarBadge({ className = "", ...props }) {
122
187
  {
123
188
  "data-slot": "avatar-badge",
124
189
  className: cn(
125
- "absolute h-[18px] min-w-[18px] z-10 select-none",
190
+ "absolute z-10 h-[18px] min-w-[18px] select-none",
126
191
  "leading-none",
127
192
  "group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
128
193
  "group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
@@ -142,7 +207,7 @@ function AvatarGroup({ className = "", ...props }) {
142
207
  {
143
208
  "data-slot": "avatar-group",
144
209
  className: cn(
145
- "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
210
+ "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
146
211
  className
147
212
  ),
148
213
  ...props
@@ -155,7 +220,7 @@ function AvatarGroupCount({ className = "", ...props }) {
155
220
  {
156
221
  "data-slot": "avatar-group-count",
157
222
  className: cn(
158
- "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
223
+ "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
159
224
  className
160
225
  ),
161
226
  ...props
package/dist/avatar.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/lib/utils.ts","../src/components/notification-badge/notification-badge.tsx","../src/components/avatar/avatar.tsx"],"names":["twMerge","clsx","cva","jsx","useRender","mergeProps","AvatarPrimitive"],"mappings":"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","file":"avatar.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { NotificationBadgeProps } from \"./types\";\n\nconst notificationBadgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full box-border shrink-0 whitespace-nowrap text-xs font-medium leading-[18px] min-w-[18px] h-[18px] px-[5px] py-0 transition-[color,background-color,border-color]\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground\",\n reversed: \"bg-background text-foreground\",\n disabled:\n \"bg-tint-950-reversed border border-black-alpha-600 text-black-alpha-600 backdrop-blur-lg\",\n white: \"bg-white text-black\",\n black: \"bg-brand-midnight-900 text-white\",\n },\n pulse: {\n true: \"relative\",\n false: \"\",\n },\n },\n compoundVariants: [\n {\n pulse: true,\n class:\n \"before:content-[''] before:absolute before:inset-[-4px] before:rounded-full before:border-4 before:border-solid before:border-(--notification-badge-pulse-color,var(--color-surface-alpha-alpha-brand-light-30)) before:pointer-events-none before:animate-notification-badge-ping motion-reduce:before:animate-none\",\n },\n ],\n defaultVariants: {\n variant: \"default\",\n pulse: false,\n },\n },\n);\n\nfunction NotificationBadge({\n className,\n variant,\n pulse = false,\n count,\n children,\n render,\n ...props\n}: NotificationBadgeProps & VariantProps<typeof notificationBadgeVariants>) {\n const displayContent = count !== undefined ? String(count) : children;\n\n const defaultProps: Record<string, unknown> = {\n \"data-slot\": \"notification-badge\",\n className: cn(notificationBadgeVariants({ variant, pulse }), className),\n children: <span className=\"text-center\">{displayContent}</span>,\n };\n\n return useRender({\n defaultTagName: \"div\",\n render,\n props: mergeProps<\"div\">(defaultProps, props),\n });\n}\n\nexport { NotificationBadge };\n","\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport { NotificationBadge } from \"../notification-badge\";\nimport type {\n AvatarBadgeProps,\n AvatarFallbackProps,\n AvatarGroupCountProps,\n AvatarGroupProps,\n AvatarImageProps,\n AvatarProps,\n} from \"./types\";\n\nconst avatarVariants = cva(\n \"group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:mix-blend-darken dark:after:mix-blend-lighten\",\n {\n variants: {\n size: {\n xs: \"size-6\", // 24px\n sm: \"size-8\", // 32px\n md: \"size-14\", // 56px\n lg: \"size-20\", // 80px\n xl: \"size-[120px]\",\n xxl: \"size-[140px]\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n },\n);\n\nfunction Avatar({ className = \"\", size = \"md\", ...props }: AvatarProps) {\n return (\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n data-size={size}\n className={cn(avatarVariants({ size }), className)}\n {...props}\n />\n );\n}\n\nfunction AvatarImage({ className = \"\", ...props }: AvatarImageProps) {\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\"aspect-square size-full mask mask-squircle object-cover\", className)}\n {...props}\n />\n );\n}\n\nfunction AvatarFallback({ className = \"\", ...props }: AvatarFallbackProps) {\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarBadge({ className = \"\", ...props }: AvatarBadgeProps) {\n return (\n <NotificationBadge\n data-slot=\"avatar-badge\"\n className={cn(\n \"absolute h-[18px] min-w-[18px] z-10 select-none\",\n \"leading-none\",\n \"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]\",\n \"group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]\",\n \"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]\",\n \"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]\",\n \"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]\",\n \"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroup({ className = \"\", ...props }: AvatarGroupProps) {\n return (\n <div\n data-slot=\"avatar-group\"\n className={cn(\n \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroupCount({ className = \"\", ...props }: AvatarGroupCountProps) {\n return (\n <div\n data-slot=\"avatar-group-count\"\n className={cn(\n \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };\n"]}
1
+ {"version":3,"sources":["../src/lib/utils.ts","../src/components/notification-badge/notification-badge.tsx","../src/components/avatar/avatar.tsx"],"names":["twMerge","clsx","cva","jsx","useRender","mergeProps","createContext","AvatarPrimitive","useContext"],"mappings":"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","file":"avatar.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { NotificationBadgeProps } from \"./types\";\n\nconst notificationBadgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full box-border shrink-0 whitespace-nowrap text-xs font-medium leading-[18px] min-w-[18px] h-[18px] px-[5px] py-0 transition-[color,background-color,border-color]\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground\",\n reversed: \"bg-background text-foreground\",\n disabled:\n \"bg-tint-950-reversed border border-black-alpha-600 text-black-alpha-600 backdrop-blur-lg\",\n white: \"bg-white text-black\",\n black: \"bg-brand-midnight-900 text-white\",\n },\n pulse: {\n true: \"relative\",\n false: \"\",\n },\n },\n compoundVariants: [\n {\n pulse: true,\n class:\n \"before:content-[''] before:absolute before:inset-[-4px] before:rounded-full before:border-4 before:border-solid before:border-(--notification-badge-pulse-color,var(--color-surface-alpha-alpha-brand-light-30)) before:pointer-events-none before:animate-notification-badge-ping motion-reduce:before:animate-none\",\n },\n ],\n defaultVariants: {\n variant: \"default\",\n pulse: false,\n },\n },\n);\n\nfunction NotificationBadge({\n className,\n variant,\n pulse = false,\n count,\n children,\n render,\n ...props\n}: NotificationBadgeProps & VariantProps<typeof notificationBadgeVariants>) {\n const displayContent = count !== undefined ? String(count) : children;\n\n const defaultProps: Record<string, unknown> = {\n \"data-slot\": \"notification-badge\",\n className: cn(notificationBadgeVariants({ variant, pulse }), className),\n children: <span className=\"text-center\">{displayContent}</span>,\n };\n\n return useRender({\n defaultTagName: \"div\",\n render,\n props: mergeProps<\"div\">(defaultProps, props),\n });\n}\n\nexport { NotificationBadge };\n","\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cva } from \"class-variance-authority\";\nimport { createContext, useContext } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\nimport { NotificationBadge } from \"../notification-badge\";\nimport type {\n AvatarBadgeProps,\n AvatarFallbackProps,\n AvatarGroupCountProps,\n AvatarGroupProps,\n AvatarImageProps,\n AvatarProps,\n} from \"./types\";\n\nconst avatarVariants = cva(\n \"group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:mix-blend-darken dark:after:mix-blend-lighten\",\n {\n variants: {\n size: {\n xs: \"size-6\", // 24px\n sm: \"size-8\", // 32px\n md: \"size-14\", // 56px\n lg: \"size-20\", // 80px\n xl: \"size-[120px]\",\n xxl: \"size-[140px]\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n },\n);\n\n/** 32-bit FNV-1a over UTF-8 bytes — deterministic, no lookup table. */\nfunction fnv1a32(data: string): number {\n const bytes = new TextEncoder().encode(data);\n let h = 0x811c9dc5;\n for (let i = 0; i < bytes.length; i++) {\n h ^= bytes[i];\n h = Math.imul(h, 0x01000193);\n }\n return h >>> 0;\n}\n\nconst BACKGROUND_COLORS = [\n \"#DDD0BE\",\n \"#E9DCBB\",\n \"#E9DCBB\",\n \"#C7D1B0\",\n \"#C6D0CB\",\n \"#E9DCBB\",\n \"#C7D1B0\",\n \"#E9DCBB\",\n \"#DFC2C0\",\n \"#CFD4C6\",\n \"#D7E3E8\",\n \"#CFD4C6\",\n \"#D6B3B3\",\n \"#E9DCBB\",\n \"#CFCBDC\",\n \"#BFD6D7\",\n \"#E3D2C6\",\n \"#D1E2E7\",\n \"#D6B3B3\",\n \"#BFD6D7\",\n \"#E9DCBB\",\n \"#C7D1B0\",\n \"#DFC2C0\",\n \"#D1E2E7\",\n \"#CFD4C6\",\n \"#E9DCBB\",\n \"#D7E3E8\",\n \"#CFD4C6\",\n \"#C6D0CB\",\n \"#E9DCBB\",\n \"#C7D1B0\",\n \"#E9DCBB\",\n \"#CFCBDC\",\n \"#E3D2C6\",\n \"#E9DCBB\",\n] as const;\n\n/** Deterministic background color from a stable string (e.g. user id, org id, slug). */\nfunction backgroundColor(id: string): (typeof BACKGROUND_COLORS)[number] {\n return BACKGROUND_COLORS[fnv1a32(id) % BACKGROUND_COLORS.length];\n}\n\nconst AvatarColorContext = createContext<string | undefined>(undefined);\n\nfunction Avatar({ className = \"\", size = \"md\", colorKey, ...props }: AvatarProps) {\n const resolvedColor = colorKey ? backgroundColor(colorKey) : undefined;\n\n return (\n <AvatarColorContext.Provider value={resolvedColor}>\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n data-size={size}\n className={cn(avatarVariants({ size }), className)}\n {...props}\n />\n </AvatarColorContext.Provider>\n );\n}\n\nfunction AvatarImage({ className = \"\", style, ...props }: AvatarImageProps) {\n const resolvedColor = useContext(AvatarColorContext);\n const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;\n\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\"mask mask-squircle aspect-square size-full object-cover\", className)}\n {...props}\n style={mergedStyle}\n />\n );\n}\n\nfunction AvatarFallback({ className = \"\", style, ...props }: AvatarFallbackProps) {\n const resolvedColor = useContext(AvatarColorContext);\n const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;\n\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"mask mask-squircle text-muted-foreground flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs\",\n resolvedColor ? undefined : \"bg-muted\",\n \"group-data-[size=xs]/avatar:text-xs\",\n \"group-data-[size=sm]/avatar:text-sm\",\n \"group-data-[size=md]/avatar:text-lg\",\n \"group-data-[size=lg]/avatar:text-2xl\",\n \"group-data-[size=xl]/avatar:text-4xl\",\n \"group-data-[size=xxl]/avatar:text-5xl\",\n className,\n )}\n {...props}\n style={mergedStyle}\n />\n );\n}\n\nfunction AvatarBadge({ className = \"\", ...props }: AvatarBadgeProps) {\n return (\n <NotificationBadge\n data-slot=\"avatar-badge\"\n className={cn(\n \"absolute z-10 h-[18px] min-w-[18px] select-none\",\n \"leading-none\",\n \"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]\",\n \"group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]\",\n \"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]\",\n \"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]\",\n \"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]\",\n \"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroup({ className = \"\", ...props }: AvatarGroupProps) {\n return (\n <div\n data-slot=\"avatar-group\"\n className={cn(\n \"group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroupCount({ className = \"\", ...props }: AvatarGroupCountProps) {\n return (\n <div\n data-slot=\"avatar-group-count\"\n className={cn(\n \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };\n"]}
package/dist/avatar.d.cts CHANGED
@@ -9,6 +9,8 @@ type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
9
9
  interface AvatarProps extends Avatar$1.Root.Props {
10
10
  size?: AvatarSize;
11
11
  className?: string;
12
+ /** Stable string (user id, slug, etc.) used to pick a deterministic background on image and fallback. */
13
+ colorKey?: string;
12
14
  }
13
15
 
14
16
  interface AvatarImageProps extends Avatar$1.Image.Props {
@@ -31,9 +33,9 @@ interface AvatarGroupCountProps extends React.ComponentProps<"div"> {
31
33
  className?: string;
32
34
  }
33
35
 
34
- declare function Avatar({ className, size, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
35
- declare function AvatarImage({ className, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
36
- declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
36
+ declare function Avatar({ className, size, colorKey, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
37
+ declare function AvatarImage({ className, style, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
38
+ declare function AvatarFallback({ className, style, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
37
39
  declare function AvatarBadge({ className, ...props }: AvatarBadgeProps): react_jsx_runtime.JSX.Element;
38
40
  declare function AvatarGroup({ className, ...props }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
39
41
  declare function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps): react_jsx_runtime.JSX.Element;
package/dist/avatar.d.ts CHANGED
@@ -9,6 +9,8 @@ type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
9
9
  interface AvatarProps extends Avatar$1.Root.Props {
10
10
  size?: AvatarSize;
11
11
  className?: string;
12
+ /** Stable string (user id, slug, etc.) used to pick a deterministic background on image and fallback. */
13
+ colorKey?: string;
12
14
  }
13
15
 
14
16
  interface AvatarImageProps extends Avatar$1.Image.Props {
@@ -31,9 +33,9 @@ interface AvatarGroupCountProps extends React.ComponentProps<"div"> {
31
33
  className?: string;
32
34
  }
33
35
 
34
- declare function Avatar({ className, size, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
35
- declare function AvatarImage({ className, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
36
- declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
36
+ declare function Avatar({ className, size, colorKey, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
37
+ declare function AvatarImage({ className, style, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
38
+ declare function AvatarFallback({ className, style, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
37
39
  declare function AvatarBadge({ className, ...props }: AvatarBadgeProps): react_jsx_runtime.JSX.Element;
38
40
  declare function AvatarGroup({ className, ...props }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
39
41
  declare function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps): react_jsx_runtime.JSX.Element;
package/dist/avatar.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
2
2
  import { cva } from 'class-variance-authority';
3
+ import { createContext, useContext } from 'react';
3
4
  import { clsx } from 'clsx';
4
5
  import { twMerge } from 'tailwind-merge';
5
6
  import { mergeProps } from '@base-ui/react/merge-props';
@@ -80,8 +81,59 @@ var avatarVariants = cva(
80
81
  }
81
82
  }
82
83
  );
83
- function Avatar({ className = "", size = "md", ...props }) {
84
- return /* @__PURE__ */ jsx(
84
+ function fnv1a32(data) {
85
+ const bytes = new TextEncoder().encode(data);
86
+ let h = 2166136261;
87
+ for (let i = 0; i < bytes.length; i++) {
88
+ h ^= bytes[i];
89
+ h = Math.imul(h, 16777619);
90
+ }
91
+ return h >>> 0;
92
+ }
93
+ var BACKGROUND_COLORS = [
94
+ "#DDD0BE",
95
+ "#E9DCBB",
96
+ "#E9DCBB",
97
+ "#C7D1B0",
98
+ "#C6D0CB",
99
+ "#E9DCBB",
100
+ "#C7D1B0",
101
+ "#E9DCBB",
102
+ "#DFC2C0",
103
+ "#CFD4C6",
104
+ "#D7E3E8",
105
+ "#CFD4C6",
106
+ "#D6B3B3",
107
+ "#E9DCBB",
108
+ "#CFCBDC",
109
+ "#BFD6D7",
110
+ "#E3D2C6",
111
+ "#D1E2E7",
112
+ "#D6B3B3",
113
+ "#BFD6D7",
114
+ "#E9DCBB",
115
+ "#C7D1B0",
116
+ "#DFC2C0",
117
+ "#D1E2E7",
118
+ "#CFD4C6",
119
+ "#E9DCBB",
120
+ "#D7E3E8",
121
+ "#CFD4C6",
122
+ "#C6D0CB",
123
+ "#E9DCBB",
124
+ "#C7D1B0",
125
+ "#E9DCBB",
126
+ "#CFCBDC",
127
+ "#E3D2C6",
128
+ "#E9DCBB"
129
+ ];
130
+ function backgroundColor(id) {
131
+ return BACKGROUND_COLORS[fnv1a32(id) % BACKGROUND_COLORS.length];
132
+ }
133
+ var AvatarColorContext = createContext(void 0);
134
+ function Avatar({ className = "", size = "md", colorKey, ...props }) {
135
+ const resolvedColor = colorKey ? backgroundColor(colorKey) : void 0;
136
+ return /* @__PURE__ */ jsx(AvatarColorContext.Provider, { value: resolvedColor, children: /* @__PURE__ */ jsx(
85
137
  Avatar$1.Root,
86
138
  {
87
139
  "data-slot": "avatar",
@@ -89,28 +141,41 @@ function Avatar({ className = "", size = "md", ...props }) {
89
141
  className: cn(avatarVariants({ size }), className),
90
142
  ...props
91
143
  }
92
- );
144
+ ) });
93
145
  }
94
- function AvatarImage({ className = "", ...props }) {
146
+ function AvatarImage({ className = "", style, ...props }) {
147
+ const resolvedColor = useContext(AvatarColorContext);
148
+ const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
95
149
  return /* @__PURE__ */ jsx(
96
150
  Avatar$1.Image,
97
151
  {
98
152
  "data-slot": "avatar-image",
99
- className: cn("aspect-square size-full mask mask-squircle object-cover", className),
100
- ...props
153
+ className: cn("mask mask-squircle aspect-square size-full object-cover", className),
154
+ ...props,
155
+ style: mergedStyle
101
156
  }
102
157
  );
103
158
  }
104
- function AvatarFallback({ className = "", ...props }) {
159
+ function AvatarFallback({ className = "", style, ...props }) {
160
+ const resolvedColor = useContext(AvatarColorContext);
161
+ const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
105
162
  return /* @__PURE__ */ jsx(
106
163
  Avatar$1.Fallback,
107
164
  {
108
165
  "data-slot": "avatar-fallback",
109
166
  className: cn(
110
- "mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
167
+ "mask mask-squircle text-muted-foreground flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
168
+ resolvedColor ? void 0 : "bg-muted",
169
+ "group-data-[size=xs]/avatar:text-xs",
170
+ "group-data-[size=sm]/avatar:text-sm",
171
+ "group-data-[size=md]/avatar:text-lg",
172
+ "group-data-[size=lg]/avatar:text-2xl",
173
+ "group-data-[size=xl]/avatar:text-4xl",
174
+ "group-data-[size=xxl]/avatar:text-5xl",
111
175
  className
112
176
  ),
113
- ...props
177
+ ...props,
178
+ style: mergedStyle
114
179
  }
115
180
  );
116
181
  }
@@ -120,7 +185,7 @@ function AvatarBadge({ className = "", ...props }) {
120
185
  {
121
186
  "data-slot": "avatar-badge",
122
187
  className: cn(
123
- "absolute h-[18px] min-w-[18px] z-10 select-none",
188
+ "absolute z-10 h-[18px] min-w-[18px] select-none",
124
189
  "leading-none",
125
190
  "group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
126
191
  "group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
@@ -140,7 +205,7 @@ function AvatarGroup({ className = "", ...props }) {
140
205
  {
141
206
  "data-slot": "avatar-group",
142
207
  className: cn(
143
- "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
208
+ "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
144
209
  className
145
210
  ),
146
211
  ...props
@@ -153,7 +218,7 @@ function AvatarGroupCount({ className = "", ...props }) {
153
218
  {
154
219
  "data-slot": "avatar-group-count",
155
220
  className: cn(
156
- "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
221
+ "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
157
222
  className
158
223
  ),
159
224
  ...props
package/dist/avatar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/lib/utils.ts","../src/components/notification-badge/notification-badge.tsx","../src/components/avatar/avatar.tsx"],"names":["cva","jsx","AvatarPrimitive"],"mappings":"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","file":"avatar.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { NotificationBadgeProps } from \"./types\";\n\nconst notificationBadgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full box-border shrink-0 whitespace-nowrap text-xs font-medium leading-[18px] min-w-[18px] h-[18px] px-[5px] py-0 transition-[color,background-color,border-color]\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground\",\n reversed: \"bg-background text-foreground\",\n disabled:\n \"bg-tint-950-reversed border border-black-alpha-600 text-black-alpha-600 backdrop-blur-lg\",\n white: \"bg-white text-black\",\n black: \"bg-brand-midnight-900 text-white\",\n },\n pulse: {\n true: \"relative\",\n false: \"\",\n },\n },\n compoundVariants: [\n {\n pulse: true,\n class:\n \"before:content-[''] before:absolute before:inset-[-4px] before:rounded-full before:border-4 before:border-solid before:border-(--notification-badge-pulse-color,var(--color-surface-alpha-alpha-brand-light-30)) before:pointer-events-none before:animate-notification-badge-ping motion-reduce:before:animate-none\",\n },\n ],\n defaultVariants: {\n variant: \"default\",\n pulse: false,\n },\n },\n);\n\nfunction NotificationBadge({\n className,\n variant,\n pulse = false,\n count,\n children,\n render,\n ...props\n}: NotificationBadgeProps & VariantProps<typeof notificationBadgeVariants>) {\n const displayContent = count !== undefined ? String(count) : children;\n\n const defaultProps: Record<string, unknown> = {\n \"data-slot\": \"notification-badge\",\n className: cn(notificationBadgeVariants({ variant, pulse }), className),\n children: <span className=\"text-center\">{displayContent}</span>,\n };\n\n return useRender({\n defaultTagName: \"div\",\n render,\n props: mergeProps<\"div\">(defaultProps, props),\n });\n}\n\nexport { NotificationBadge };\n","\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport { NotificationBadge } from \"../notification-badge\";\nimport type {\n AvatarBadgeProps,\n AvatarFallbackProps,\n AvatarGroupCountProps,\n AvatarGroupProps,\n AvatarImageProps,\n AvatarProps,\n} from \"./types\";\n\nconst avatarVariants = cva(\n \"group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:mix-blend-darken dark:after:mix-blend-lighten\",\n {\n variants: {\n size: {\n xs: \"size-6\", // 24px\n sm: \"size-8\", // 32px\n md: \"size-14\", // 56px\n lg: \"size-20\", // 80px\n xl: \"size-[120px]\",\n xxl: \"size-[140px]\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n },\n);\n\nfunction Avatar({ className = \"\", size = \"md\", ...props }: AvatarProps) {\n return (\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n data-size={size}\n className={cn(avatarVariants({ size }), className)}\n {...props}\n />\n );\n}\n\nfunction AvatarImage({ className = \"\", ...props }: AvatarImageProps) {\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\"aspect-square size-full mask mask-squircle object-cover\", className)}\n {...props}\n />\n );\n}\n\nfunction AvatarFallback({ className = \"\", ...props }: AvatarFallbackProps) {\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarBadge({ className = \"\", ...props }: AvatarBadgeProps) {\n return (\n <NotificationBadge\n data-slot=\"avatar-badge\"\n className={cn(\n \"absolute h-[18px] min-w-[18px] z-10 select-none\",\n \"leading-none\",\n \"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]\",\n \"group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]\",\n \"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]\",\n \"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]\",\n \"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]\",\n \"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroup({ className = \"\", ...props }: AvatarGroupProps) {\n return (\n <div\n data-slot=\"avatar-group\"\n className={cn(\n \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroupCount({ className = \"\", ...props }: AvatarGroupCountProps) {\n return (\n <div\n data-slot=\"avatar-group-count\"\n className={cn(\n \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };\n"]}
1
+ {"version":3,"sources":["../src/lib/utils.ts","../src/components/notification-badge/notification-badge.tsx","../src/components/avatar/avatar.tsx"],"names":["cva","jsx","AvatarPrimitive"],"mappings":"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","file":"avatar.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { NotificationBadgeProps } from \"./types\";\n\nconst notificationBadgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full box-border shrink-0 whitespace-nowrap text-xs font-medium leading-[18px] min-w-[18px] h-[18px] px-[5px] py-0 transition-[color,background-color,border-color]\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground\",\n reversed: \"bg-background text-foreground\",\n disabled:\n \"bg-tint-950-reversed border border-black-alpha-600 text-black-alpha-600 backdrop-blur-lg\",\n white: \"bg-white text-black\",\n black: \"bg-brand-midnight-900 text-white\",\n },\n pulse: {\n true: \"relative\",\n false: \"\",\n },\n },\n compoundVariants: [\n {\n pulse: true,\n class:\n \"before:content-[''] before:absolute before:inset-[-4px] before:rounded-full before:border-4 before:border-solid before:border-(--notification-badge-pulse-color,var(--color-surface-alpha-alpha-brand-light-30)) before:pointer-events-none before:animate-notification-badge-ping motion-reduce:before:animate-none\",\n },\n ],\n defaultVariants: {\n variant: \"default\",\n pulse: false,\n },\n },\n);\n\nfunction NotificationBadge({\n className,\n variant,\n pulse = false,\n count,\n children,\n render,\n ...props\n}: NotificationBadgeProps & VariantProps<typeof notificationBadgeVariants>) {\n const displayContent = count !== undefined ? String(count) : children;\n\n const defaultProps: Record<string, unknown> = {\n \"data-slot\": \"notification-badge\",\n className: cn(notificationBadgeVariants({ variant, pulse }), className),\n children: <span className=\"text-center\">{displayContent}</span>,\n };\n\n return useRender({\n defaultTagName: \"div\",\n render,\n props: mergeProps<\"div\">(defaultProps, props),\n });\n}\n\nexport { NotificationBadge };\n","\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cva } from \"class-variance-authority\";\nimport { createContext, useContext } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\nimport { NotificationBadge } from \"../notification-badge\";\nimport type {\n AvatarBadgeProps,\n AvatarFallbackProps,\n AvatarGroupCountProps,\n AvatarGroupProps,\n AvatarImageProps,\n AvatarProps,\n} from \"./types\";\n\nconst avatarVariants = cva(\n \"group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:mix-blend-darken dark:after:mix-blend-lighten\",\n {\n variants: {\n size: {\n xs: \"size-6\", // 24px\n sm: \"size-8\", // 32px\n md: \"size-14\", // 56px\n lg: \"size-20\", // 80px\n xl: \"size-[120px]\",\n xxl: \"size-[140px]\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n },\n);\n\n/** 32-bit FNV-1a over UTF-8 bytes — deterministic, no lookup table. */\nfunction fnv1a32(data: string): number {\n const bytes = new TextEncoder().encode(data);\n let h = 0x811c9dc5;\n for (let i = 0; i < bytes.length; i++) {\n h ^= bytes[i];\n h = Math.imul(h, 0x01000193);\n }\n return h >>> 0;\n}\n\nconst BACKGROUND_COLORS = [\n \"#DDD0BE\",\n \"#E9DCBB\",\n \"#E9DCBB\",\n \"#C7D1B0\",\n \"#C6D0CB\",\n \"#E9DCBB\",\n \"#C7D1B0\",\n \"#E9DCBB\",\n \"#DFC2C0\",\n \"#CFD4C6\",\n \"#D7E3E8\",\n \"#CFD4C6\",\n \"#D6B3B3\",\n \"#E9DCBB\",\n \"#CFCBDC\",\n \"#BFD6D7\",\n \"#E3D2C6\",\n \"#D1E2E7\",\n \"#D6B3B3\",\n \"#BFD6D7\",\n \"#E9DCBB\",\n \"#C7D1B0\",\n \"#DFC2C0\",\n \"#D1E2E7\",\n \"#CFD4C6\",\n \"#E9DCBB\",\n \"#D7E3E8\",\n \"#CFD4C6\",\n \"#C6D0CB\",\n \"#E9DCBB\",\n \"#C7D1B0\",\n \"#E9DCBB\",\n \"#CFCBDC\",\n \"#E3D2C6\",\n \"#E9DCBB\",\n] as const;\n\n/** Deterministic background color from a stable string (e.g. user id, org id, slug). */\nfunction backgroundColor(id: string): (typeof BACKGROUND_COLORS)[number] {\n return BACKGROUND_COLORS[fnv1a32(id) % BACKGROUND_COLORS.length];\n}\n\nconst AvatarColorContext = createContext<string | undefined>(undefined);\n\nfunction Avatar({ className = \"\", size = \"md\", colorKey, ...props }: AvatarProps) {\n const resolvedColor = colorKey ? backgroundColor(colorKey) : undefined;\n\n return (\n <AvatarColorContext.Provider value={resolvedColor}>\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n data-size={size}\n className={cn(avatarVariants({ size }), className)}\n {...props}\n />\n </AvatarColorContext.Provider>\n );\n}\n\nfunction AvatarImage({ className = \"\", style, ...props }: AvatarImageProps) {\n const resolvedColor = useContext(AvatarColorContext);\n const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;\n\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\"mask mask-squircle aspect-square size-full object-cover\", className)}\n {...props}\n style={mergedStyle}\n />\n );\n}\n\nfunction AvatarFallback({ className = \"\", style, ...props }: AvatarFallbackProps) {\n const resolvedColor = useContext(AvatarColorContext);\n const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;\n\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"mask mask-squircle text-muted-foreground flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs\",\n resolvedColor ? undefined : \"bg-muted\",\n \"group-data-[size=xs]/avatar:text-xs\",\n \"group-data-[size=sm]/avatar:text-sm\",\n \"group-data-[size=md]/avatar:text-lg\",\n \"group-data-[size=lg]/avatar:text-2xl\",\n \"group-data-[size=xl]/avatar:text-4xl\",\n \"group-data-[size=xxl]/avatar:text-5xl\",\n className,\n )}\n {...props}\n style={mergedStyle}\n />\n );\n}\n\nfunction AvatarBadge({ className = \"\", ...props }: AvatarBadgeProps) {\n return (\n <NotificationBadge\n data-slot=\"avatar-badge\"\n className={cn(\n \"absolute z-10 h-[18px] min-w-[18px] select-none\",\n \"leading-none\",\n \"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]\",\n \"group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]\",\n \"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]\",\n \"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]\",\n \"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]\",\n \"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroup({ className = \"\", ...props }: AvatarGroupProps) {\n return (\n <div\n data-slot=\"avatar-group\"\n className={cn(\n \"group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroupCount({ className = \"\", ...props }: AvatarGroupCountProps) {\n return (\n <div\n data-slot=\"avatar-group-count\"\n className={cn(\n \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };\n"]}
package/dist/index.cjs CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  var avatar = require('@base-ui/react/avatar');
4
4
  var classVarianceAuthority = require('class-variance-authority');
5
+ var react = require('react');
5
6
  var clsx = require('clsx');
6
7
  var tailwindMerge = require('tailwind-merge');
7
8
  var mergeProps = require('@base-ui/react/merge-props');
@@ -90,8 +91,59 @@ var avatarVariants = classVarianceAuthority.cva(
90
91
  }
91
92
  }
92
93
  );
93
- function Avatar({ className = "", size = "md", ...props }) {
94
- return /* @__PURE__ */ jsxRuntime.jsx(
94
+ function fnv1a32(data) {
95
+ const bytes = new TextEncoder().encode(data);
96
+ let h = 2166136261;
97
+ for (let i = 0; i < bytes.length; i++) {
98
+ h ^= bytes[i];
99
+ h = Math.imul(h, 16777619);
100
+ }
101
+ return h >>> 0;
102
+ }
103
+ var BACKGROUND_COLORS = [
104
+ "#DDD0BE",
105
+ "#E9DCBB",
106
+ "#E9DCBB",
107
+ "#C7D1B0",
108
+ "#C6D0CB",
109
+ "#E9DCBB",
110
+ "#C7D1B0",
111
+ "#E9DCBB",
112
+ "#DFC2C0",
113
+ "#CFD4C6",
114
+ "#D7E3E8",
115
+ "#CFD4C6",
116
+ "#D6B3B3",
117
+ "#E9DCBB",
118
+ "#CFCBDC",
119
+ "#BFD6D7",
120
+ "#E3D2C6",
121
+ "#D1E2E7",
122
+ "#D6B3B3",
123
+ "#BFD6D7",
124
+ "#E9DCBB",
125
+ "#C7D1B0",
126
+ "#DFC2C0",
127
+ "#D1E2E7",
128
+ "#CFD4C6",
129
+ "#E9DCBB",
130
+ "#D7E3E8",
131
+ "#CFD4C6",
132
+ "#C6D0CB",
133
+ "#E9DCBB",
134
+ "#C7D1B0",
135
+ "#E9DCBB",
136
+ "#CFCBDC",
137
+ "#E3D2C6",
138
+ "#E9DCBB"
139
+ ];
140
+ function backgroundColor(id) {
141
+ return BACKGROUND_COLORS[fnv1a32(id) % BACKGROUND_COLORS.length];
142
+ }
143
+ var AvatarColorContext = react.createContext(void 0);
144
+ function Avatar({ className = "", size = "md", colorKey, ...props }) {
145
+ const resolvedColor = colorKey ? backgroundColor(colorKey) : void 0;
146
+ return /* @__PURE__ */ jsxRuntime.jsx(AvatarColorContext.Provider, { value: resolvedColor, children: /* @__PURE__ */ jsxRuntime.jsx(
95
147
  avatar.Avatar.Root,
96
148
  {
97
149
  "data-slot": "avatar",
@@ -99,28 +151,41 @@ function Avatar({ className = "", size = "md", ...props }) {
99
151
  className: cn(avatarVariants({ size }), className),
100
152
  ...props
101
153
  }
102
- );
154
+ ) });
103
155
  }
104
- function AvatarImage({ className = "", ...props }) {
156
+ function AvatarImage({ className = "", style, ...props }) {
157
+ const resolvedColor = react.useContext(AvatarColorContext);
158
+ const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
105
159
  return /* @__PURE__ */ jsxRuntime.jsx(
106
160
  avatar.Avatar.Image,
107
161
  {
108
162
  "data-slot": "avatar-image",
109
- className: cn("aspect-square size-full mask mask-squircle object-cover", className),
110
- ...props
163
+ className: cn("mask mask-squircle aspect-square size-full object-cover", className),
164
+ ...props,
165
+ style: mergedStyle
111
166
  }
112
167
  );
113
168
  }
114
- function AvatarFallback({ className = "", ...props }) {
169
+ function AvatarFallback({ className = "", style, ...props }) {
170
+ const resolvedColor = react.useContext(AvatarColorContext);
171
+ const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
115
172
  return /* @__PURE__ */ jsxRuntime.jsx(
116
173
  avatar.Avatar.Fallback,
117
174
  {
118
175
  "data-slot": "avatar-fallback",
119
176
  className: cn(
120
- "mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
177
+ "mask mask-squircle text-muted-foreground flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
178
+ resolvedColor ? void 0 : "bg-muted",
179
+ "group-data-[size=xs]/avatar:text-xs",
180
+ "group-data-[size=sm]/avatar:text-sm",
181
+ "group-data-[size=md]/avatar:text-lg",
182
+ "group-data-[size=lg]/avatar:text-2xl",
183
+ "group-data-[size=xl]/avatar:text-4xl",
184
+ "group-data-[size=xxl]/avatar:text-5xl",
121
185
  className
122
186
  ),
123
- ...props
187
+ ...props,
188
+ style: mergedStyle
124
189
  }
125
190
  );
126
191
  }
@@ -130,7 +195,7 @@ function AvatarBadge({ className = "", ...props }) {
130
195
  {
131
196
  "data-slot": "avatar-badge",
132
197
  className: cn(
133
- "absolute h-[18px] min-w-[18px] z-10 select-none",
198
+ "absolute z-10 h-[18px] min-w-[18px] select-none",
134
199
  "leading-none",
135
200
  "group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
136
201
  "group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
@@ -150,7 +215,7 @@ function AvatarGroup({ className = "", ...props }) {
150
215
  {
151
216
  "data-slot": "avatar-group",
152
217
  className: cn(
153
- "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
218
+ "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
154
219
  className
155
220
  ),
156
221
  ...props
@@ -163,7 +228,7 @@ function AvatarGroupCount({ className = "", ...props }) {
163
228
  {
164
229
  "data-slot": "avatar-group-count",
165
230
  className: cn(
166
- "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
231
+ "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
167
232
  className
168
233
  ),
169
234
  ...props