npm - @popgrids/ui - Versions diffs - 0.0.33 → 0.0.34 - Mend

@popgrids/ui 0.0.33 → 0.0.34

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 (11) hide show

package/dist/avatar.cjs CHANGED Viewed

@@ -110,6 +110,12 @@ function AvatarFallback({ className = "", ...props }) {
       "data-slot": "avatar-fallback",
       className: cn(
         "mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
+        "group-data-[size=xs]/avatar:text-xs",
+        "group-data-[size=sm]/avatar:text-sm",
+        "group-data-[size=md]/avatar:text-lg",
+        "group-data-[size=lg]/avatar:text-2xl",
+        "group-data-[size=xl]/avatar:text-4xl",
+        "group-data-[size=xxl]/avatar:text-5xl",
         className
       ),
       ...props

package/dist/avatar.cjs.map CHANGED Viewed

	@@ -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","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"]}

package/dist/avatar.js CHANGED Viewed

@@ -108,6 +108,12 @@ function AvatarFallback({ className = "", ...props }) {
       "data-slot": "avatar-fallback",
       className: cn(
         "mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
+        "group-data-[size=xs]/avatar:text-xs",
+        "group-data-[size=sm]/avatar:text-sm",
+        "group-data-[size=md]/avatar:text-lg",
+        "group-data-[size=lg]/avatar:text-2xl",
+        "group-data-[size=xl]/avatar:text-4xl",
+        "group-data-[size=xxl]/avatar:text-5xl",
         className
       ),
       ...props

package/dist/avatar.js.map CHANGED Viewed

	@@ -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\";\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"]}

package/dist/index.cjs CHANGED Viewed

@@ -118,6 +118,12 @@ function AvatarFallback({ className = "", ...props }) {
       "data-slot": "avatar-fallback",
       className: cn(
         "mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
+        "group-data-[size=xs]/avatar:text-xs",
+        "group-data-[size=sm]/avatar:text-sm",
+        "group-data-[size=md]/avatar:text-lg",
+        "group-data-[size=lg]/avatar:text-2xl",
+        "group-data-[size=xl]/avatar:text-4xl",
+        "group-data-[size=xxl]/avatar:text-5xl",
         className
       ),
       ...props