@popgrids/ui 0.0.34 → 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 +71 -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 +71 -12
  6. package/dist/avatar.js.map +1 -1
  7. package/dist/index.cjs +71 -12
  8. package/dist/index.cjs.map +1 -1
  9. package/dist/index.js +71 -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,25 +143,31 @@ 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",
113
171
  "group-data-[size=xs]/avatar:text-xs",
114
172
  "group-data-[size=sm]/avatar:text-sm",
115
173
  "group-data-[size=md]/avatar:text-lg",
@@ -118,7 +176,8 @@ function AvatarFallback({ className = "", ...props }) {
118
176
  "group-data-[size=xxl]/avatar:text-5xl",
119
177
  className
120
178
  ),
121
- ...props
179
+ ...props,
180
+ style: mergedStyle
122
181
  }
123
182
  );
124
183
  }
@@ -128,7 +187,7 @@ function AvatarBadge({ className = "", ...props }) {
128
187
  {
129
188
  "data-slot": "avatar-badge",
130
189
  className: cn(
131
- "absolute h-[18px] min-w-[18px] z-10 select-none",
190
+ "absolute z-10 h-[18px] min-w-[18px] select-none",
132
191
  "leading-none",
133
192
  "group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
134
193
  "group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
@@ -148,7 +207,7 @@ function AvatarGroup({ className = "", ...props }) {
148
207
  {
149
208
  "data-slot": "avatar-group",
150
209
  className: cn(
151
- "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",
152
211
  className
153
212
  ),
154
213
  ...props
@@ -161,7 +220,7 @@ function AvatarGroupCount({ className = "", ...props }) {
161
220
  {
162
221
  "data-slot": "avatar-group-count",
163
222
  className: cn(
164
- "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",
165
224
  className
166
225
  ),
167
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 \"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 />\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,25 +141,31 @@ 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",
111
169
  "group-data-[size=xs]/avatar:text-xs",
112
170
  "group-data-[size=sm]/avatar:text-sm",
113
171
  "group-data-[size=md]/avatar:text-lg",
@@ -116,7 +174,8 @@ function AvatarFallback({ className = "", ...props }) {
116
174
  "group-data-[size=xxl]/avatar:text-5xl",
117
175
  className
118
176
  ),
119
- ...props
177
+ ...props,
178
+ style: mergedStyle
120
179
  }
121
180
  );
122
181
  }
@@ -126,7 +185,7 @@ function AvatarBadge({ className = "", ...props }) {
126
185
  {
127
186
  "data-slot": "avatar-badge",
128
187
  className: cn(
129
- "absolute h-[18px] min-w-[18px] z-10 select-none",
188
+ "absolute z-10 h-[18px] min-w-[18px] select-none",
130
189
  "leading-none",
131
190
  "group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
132
191
  "group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
@@ -146,7 +205,7 @@ function AvatarGroup({ className = "", ...props }) {
146
205
  {
147
206
  "data-slot": "avatar-group",
148
207
  className: cn(
149
- "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",
150
209
  className
151
210
  ),
152
211
  ...props
@@ -159,7 +218,7 @@ function AvatarGroupCount({ className = "", ...props }) {
159
218
  {
160
219
  "data-slot": "avatar-group-count",
161
220
  className: cn(
162
- "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",
163
222
  className
164
223
  ),
165
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 \"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 />\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,25 +151,31 @@ 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",
121
179
  "group-data-[size=xs]/avatar:text-xs",
122
180
  "group-data-[size=sm]/avatar:text-sm",
123
181
  "group-data-[size=md]/avatar:text-lg",
@@ -126,7 +184,8 @@ function AvatarFallback({ className = "", ...props }) {
126
184
  "group-data-[size=xxl]/avatar:text-5xl",
127
185
  className
128
186
  ),
129
- ...props
187
+ ...props,
188
+ style: mergedStyle
130
189
  }
131
190
  );
132
191
  }
@@ -136,7 +195,7 @@ function AvatarBadge({ className = "", ...props }) {
136
195
  {
137
196
  "data-slot": "avatar-badge",
138
197
  className: cn(
139
- "absolute h-[18px] min-w-[18px] z-10 select-none",
198
+ "absolute z-10 h-[18px] min-w-[18px] select-none",
140
199
  "leading-none",
141
200
  "group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
142
201
  "group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
@@ -156,7 +215,7 @@ function AvatarGroup({ className = "", ...props }) {
156
215
  {
157
216
  "data-slot": "avatar-group",
158
217
  className: cn(
159
- "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",
160
219
  className
161
220
  ),
162
221
  ...props
@@ -169,7 +228,7 @@ function AvatarGroupCount({ className = "", ...props }) {
169
228
  {
170
229
  "data-slot": "avatar-group-count",
171
230
  className: cn(
172
- "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",
173
232
  className
174
233
  ),
175
234
  ...props