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

@popgrids/ui 0.0.34 → 0.0.36

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

package/dist/avatar.cjs CHANGED Viewed

@@ -82,34 +82,88 @@ var avatarVariants = classVarianceAuthority.cva(
     }
   }
 );
-function Avatar({ className = "", size = "md", ...props }) {
+function fnv1a32(data) {
+  const bytes = new TextEncoder().encode(data);
+  let h = 2166136261;
+  for (let i = 0; i < bytes.length; i++) {
+    h ^= bytes[i];
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+var BACKGROUND_COLORS = [
+  "#DDD0BE",
+  "#E9DCBB",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#C6D0CB",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#E9DCBB",
+  "#DFC2C0",
+  "#CFD4C6",
+  "#D7E3E8",
+  "#CFD4C6",
+  "#D6B3B3",
+  "#E9DCBB",
+  "#CFCBDC",
+  "#BFD6D7",
+  "#E3D2C6",
+  "#D1E2E7",
+  "#D6B3B3",
+  "#BFD6D7",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#DFC2C0",
+  "#D1E2E7",
+  "#CFD4C6",
+  "#E9DCBB",
+  "#D7E3E8",
+  "#CFD4C6",
+  "#C6D0CB",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#E9DCBB",
+  "#CFCBDC",
+  "#E3D2C6",
+  "#E9DCBB"
+];
+function backgroundColor(id) {
+  return BACKGROUND_COLORS[fnv1a32(id) % BACKGROUND_COLORS.length];
+}
+var AVATAR_BG_VAR = "--avatar-background";
+function Avatar({ className = "", size = "md", colorKey, style, ...props }) {
+  const resolved = colorKey ? backgroundColor(colorKey) : void 0;
+  const rootStyle = resolved !== void 0 ? { ...style, [AVATAR_BG_VAR]: resolved } : style;
   return /* @__PURE__ */ jsxRuntime.jsx(
     avatar.Avatar.Root,
     {
       "data-slot": "avatar",
       "data-size": size,
       className: cn(avatarVariants({ size }), className),
-      ...props
+      ...props,
+      style: rootStyle
     }
   );
 }
-function AvatarImage({ className = "", ...props }) {
+function AvatarImage({ className = "", style, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     avatar.Avatar.Image,
     {
       "data-slot": "avatar-image",
-      className: cn("aspect-square size-full mask mask-squircle object-cover", className),
-      ...props
+      className: cn("mask mask-squircle aspect-square size-full object-cover", className),
+      ...props,
+      style: { backgroundColor: `var(${AVATAR_BG_VAR})`, ...style }
     }
   );
 }
-function AvatarFallback({ className = "", ...props }) {
+function AvatarFallback({ className = "", style, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     avatar.Avatar.Fallback,
     {
       "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",
+        "mask mask-squircle text-muted-foreground flex size-full items-center justify-center 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",
@@ -118,7 +172,11 @@ function AvatarFallback({ className = "", ...props }) {
         "group-data-[size=xxl]/avatar:text-5xl",
         className
       ),
-      ...props
+      ...props,
+      style: {
+        backgroundColor: `var(${AVATAR_BG_VAR}, var(--color-muted))`,
+        ...style
+      }
     }
   );
 }
@@ -128,7 +186,7 @@ function AvatarBadge({ className = "", ...props }) {
     {
       "data-slot": "avatar-badge",
       className: cn(
-        "absolute h-[18px] min-w-[18px] z-10 select-none",
+        "absolute z-10 h-[18px] min-w-[18px] select-none",
         "leading-none",
         "group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
         "group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
@@ -148,7 +206,7 @@ function AvatarGroup({ className = "", ...props }) {
     {
       "data-slot": "avatar-group",
       className: cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
         className
       ),
       ...props
@@ -161,7 +219,7 @@ function AvatarGroupCount({ className = "", ...props }) {
     {
       "data-slot": "avatar-group-count",
       className: cn(
-        "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",
+        "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",
         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 \"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","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\";\nimport type * as React 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\n/* Set on the root when `colorKey` is set; image/fallback read via `var()`. /\nconst AVATAR_BG_VAR = \"--avatar-background\";\n\nfunction Avatar({ className = \"\", size = \"md\", colorKey, style, ...props }: AvatarProps) {\n const resolved = colorKey ? backgroundColor(colorKey) : undefined;\n const rootStyle =\n resolved !== undefined\n ? ({ ...style, [AVATAR_BG_VAR]: resolved } as unknown as React.CSSProperties)\n : style;\n\n return (\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n data-size={size}\n className={cn(avatarVariants({ size }), className)}\n {...props}\n style={rootStyle}\n />\n );\n}\n\nfunction AvatarImage({ className = \"\", style, ...props }: AvatarImageProps) {\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={{ backgroundColor: `var(${AVATAR_BG_VAR})`, ...style }}\n />\n );\n}\n\nfunction AvatarFallback({ className = \"\", style, ...props }: AvatarFallbackProps) {\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 \"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={{\n backgroundColor: `var(${AVATAR_BG_VAR}, var(--color-muted))`,\n ...style,\n }}\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 Viewed

@@ -9,6 +9,8 @@ type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 interface AvatarProps extends Avatar$1.Root.Props {
   size?: AvatarSize;
   className?: string;
+  /** Stable string (user id, slug, etc.) used to pick a deterministic background on image and fallback. */
+  colorKey?: string;
 }
 interface AvatarImageProps extends Avatar$1.Image.Props {
@@ -31,9 +33,9 @@ interface AvatarGroupCountProps extends React.ComponentProps<"div"> {
   className?: string;
 }
-declare function Avatar({ className, size, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
-declare function AvatarImage({ className, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
-declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
+declare function Avatar({ className, size, colorKey, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, style, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, style, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
 declare function AvatarBadge({ className, ...props }: AvatarBadgeProps): react_jsx_runtime.JSX.Element;
 declare function AvatarGroup({ className, ...props }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps): react_jsx_runtime.JSX.Element;

package/dist/avatar.d.ts CHANGED Viewed

@@ -9,6 +9,8 @@ type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 interface AvatarProps extends Avatar$1.Root.Props {
   size?: AvatarSize;
   className?: string;
+  /** Stable string (user id, slug, etc.) used to pick a deterministic background on image and fallback. */
+  colorKey?: string;
 }
 interface AvatarImageProps extends Avatar$1.Image.Props {
@@ -31,9 +33,9 @@ interface AvatarGroupCountProps extends React.ComponentProps<"div"> {
   className?: string;
 }
-declare function Avatar({ className, size, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
-declare function AvatarImage({ className, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
-declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
+declare function Avatar({ className, size, colorKey, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, style, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, style, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
 declare function AvatarBadge({ className, ...props }: AvatarBadgeProps): react_jsx_runtime.JSX.Element;
 declare function AvatarGroup({ className, ...props }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps): react_jsx_runtime.JSX.Element;

package/dist/avatar.js CHANGED Viewed

@@ -80,34 +80,88 @@ var avatarVariants = cva(
     }
   }
 );
-function Avatar({ className = "", size = "md", ...props }) {
+function fnv1a32(data) {
+  const bytes = new TextEncoder().encode(data);
+  let h = 2166136261;
+  for (let i = 0; i < bytes.length; i++) {
+    h ^= bytes[i];
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+var BACKGROUND_COLORS = [
+  "#DDD0BE",
+  "#E9DCBB",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#C6D0CB",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#E9DCBB",
+  "#DFC2C0",
+  "#CFD4C6",
+  "#D7E3E8",
+  "#CFD4C6",
+  "#D6B3B3",
+  "#E9DCBB",
+  "#CFCBDC",
+  "#BFD6D7",
+  "#E3D2C6",
+  "#D1E2E7",
+  "#D6B3B3",
+  "#BFD6D7",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#DFC2C0",
+  "#D1E2E7",
+  "#CFD4C6",
+  "#E9DCBB",
+  "#D7E3E8",
+  "#CFD4C6",
+  "#C6D0CB",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#E9DCBB",
+  "#CFCBDC",
+  "#E3D2C6",
+  "#E9DCBB"
+];
+function backgroundColor(id) {
+  return BACKGROUND_COLORS[fnv1a32(id) % BACKGROUND_COLORS.length];
+}
+var AVATAR_BG_VAR = "--avatar-background";
+function Avatar({ className = "", size = "md", colorKey, style, ...props }) {
+  const resolved = colorKey ? backgroundColor(colorKey) : void 0;
+  const rootStyle = resolved !== void 0 ? { ...style, [AVATAR_BG_VAR]: resolved } : style;
   return /* @__PURE__ */ jsx(
     Avatar$1.Root,
     {
       "data-slot": "avatar",
       "data-size": size,
       className: cn(avatarVariants({ size }), className),
-      ...props
+      ...props,
+      style: rootStyle
     }
   );
 }
-function AvatarImage({ className = "", ...props }) {
+function AvatarImage({ className = "", style, ...props }) {
   return /* @__PURE__ */ jsx(
     Avatar$1.Image,
     {
       "data-slot": "avatar-image",
-      className: cn("aspect-square size-full mask mask-squircle object-cover", className),
-      ...props
+      className: cn("mask mask-squircle aspect-square size-full object-cover", className),
+      ...props,
+      style: { backgroundColor: `var(${AVATAR_BG_VAR})`, ...style }
     }
   );
 }
-function AvatarFallback({ className = "", ...props }) {
+function AvatarFallback({ className = "", style, ...props }) {
   return /* @__PURE__ */ jsx(
     Avatar$1.Fallback,
     {
       "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",
+        "mask mask-squircle text-muted-foreground flex size-full items-center justify-center 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",
@@ -116,7 +170,11 @@ function AvatarFallback({ className = "", ...props }) {
         "group-data-[size=xxl]/avatar:text-5xl",
         className
       ),
-      ...props
+      ...props,
+      style: {
+        backgroundColor: `var(${AVATAR_BG_VAR}, var(--color-muted))`,
+        ...style
+      }
     }
   );
 }
@@ -126,7 +184,7 @@ function AvatarBadge({ className = "", ...props }) {
     {
       "data-slot": "avatar-badge",
       className: cn(
-        "absolute h-[18px] min-w-[18px] z-10 select-none",
+        "absolute z-10 h-[18px] min-w-[18px] select-none",
         "leading-none",
         "group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
         "group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
@@ -146,7 +204,7 @@ function AvatarGroup({ className = "", ...props }) {
     {
       "data-slot": "avatar-group",
       className: cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
         className
       ),
       ...props
@@ -159,7 +217,7 @@ function AvatarGroupCount({ className = "", ...props }) {
     {
       "data-slot": "avatar-group-count",
       className: cn(
-        "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",
+        "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",
         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 \"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 type * as React 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\n/* Set on the root when `colorKey` is set; image/fallback read via `var()`. /\nconst AVATAR_BG_VAR = \"--avatar-background\";\n\nfunction Avatar({ className = \"\", size = \"md\", colorKey, style, ...props }: AvatarProps) {\n const resolved = colorKey ? backgroundColor(colorKey) : undefined;\n const rootStyle =\n resolved !== undefined\n ? ({ ...style, [AVATAR_BG_VAR]: resolved } as unknown as React.CSSProperties)\n : style;\n\n return (\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n data-size={size}\n className={cn(avatarVariants({ size }), className)}\n {...props}\n style={rootStyle}\n />\n );\n}\n\nfunction AvatarImage({ className = \"\", style, ...props }: AvatarImageProps) {\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={{ backgroundColor: `var(${AVATAR_BG_VAR})`, ...style }}\n />\n );\n}\n\nfunction AvatarFallback({ className = \"\", style, ...props }: AvatarFallbackProps) {\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 \"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={{\n backgroundColor: `var(${AVATAR_BG_VAR}, var(--color-muted))`,\n ...style,\n }}\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/button.cjs CHANGED Viewed

@@ -231,7 +231,7 @@ var buttonVariants = classVarianceAuthority.cva(
         variant: "primary",
         outline: false,
         theme: "base",
-        class: "bg-foreground text-background hover:ring-2 active:ring active:bg-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background"
+        class: "bg-foreground text-background hover:ring-2 active:bg-foreground active:text-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background"
       },
       {
         variant: "primary",
@@ -400,7 +400,8 @@ function Button({
       {
         className: cn("transition-opacity group-aria-busy/button:opacity-0", {
           "opacity-0": loading,
-          "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed
+          "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed,
+          "ml-auto": !collapsed
         }),
         children: trailing
       }

package/dist/button.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/lib/utils.ts","../src/components/loader/loader.tsx","../src/components/button/button.tsx"],"names":["twMerge","clsx","cva","jsx","jsxs","loaderVariants","Fragment","ButtonPrimitive"],"mappings":"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","file":"button.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 { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { LoaderProps } from \"./types\";\n\nconst loaderVariants = cva(\"flex shrink-0 items-center justify-center\", {\n variants: {\n theme: {\n default: \"[--loader-foreground:var(--foreground)] [--loader-background:var(--foreground)]\",\n reversed: \"[--loader-foreground:var(--background)] [--loader-background:var(--foreground)]\",\n black:\n \"[--loader-foreground:var(--color-brand-midnight-900)] [--loader-background:var(--color-grayscale-300)]\",\n white:\n \"[--loader-foreground:var(--color-grayscale-300)] [--loader-background:var(--color-brand-midnight-900)]\",\n },\n variant: {\n spinner: \"size-5 motion-reduce:animate-none\",\n loader: \"relative flex h-[13px] w-[23px] motion-reduce:animate-none\",\n },\n },\n defaultVariants: {\n theme: \"default\",\n variant: \"spinner\",\n },\n});\n\nconst spinnerFgVariants = cva(\"\", {\n variants: {\n theme: {\n default: \"fill-foreground opacity-[0.06]\",\n reversed: \"fill-white opacity-10\",\n black: \"fill-black opacity-[0.04]\",\n white: \"fill-white opacity-[0.04]\",\n },\n },\n});\n\nconst spinnerBgVariants = cva(\"\", {\n variants: {\n theme: {\n default: \"fill-foreground\",\n reversed: \"fill-background\",\n black: \"fill-black opacity-[0.98]\",\n white: \"fill-white opacity-[0.98]\",\n },\n },\n});\n\nfunction Loader({\n theme = \"default\",\n variant = \"spinner\",\n className,\n style,\n ...props\n}: LoaderProps) {\n const dotCount = 21;\n\n return (\n <div\n data-slot=\"loader\"\n className={cn(\n loaderVariants({ theme, variant }),\n variant === \"spinner\" && \"animate-spin\",\n className,\n )}\n {...props}\n >\n {variant === \"spinner\" ? (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Loading spinner</title>\n <g clipPath=\"url(#pop_loader_clip_path)\">\n <path\n className={spinnerFgVariants({ theme })}\n d=\"M20 10C20 15.5137 15.5137 20 10 20C4.48628 20 6.78126e-07 15.5137 4.37114e-07 10C1.96101e-07 4.48627 4.48627 3.50301e-07 10 1.09288e-07C15.5137 -1.31724e-07 20 4.48627 20 10ZM2.35294 10C2.35294 14.2196 5.78039 17.6471 10 17.6471C14.2196 17.6471 17.6471 14.2196 17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294C5.78039 2.35294 2.35294 5.78039 2.35294 10Z\"\n />\n <path\n className={spinnerBgVariants({ theme })}\n d=\"M20 10L17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294L10 7.10315e-07C15.5137 4.69302e-07 20 4.48627 20 10Z\"\n />\n </g>\n <defs>\n <clipPath id=\"pop_loader_clip_path\">\n <rect\n width=\"20\"\n height=\"20\"\n fill=\"white\"\n transform=\"translate(8.74228e-07 20) rotate(-90)\"\n />\n </clipPath>\n </defs>\n </svg>\n ) : (\n Array.from({ length: dotCount }, (_, index) => {\n const delaySeconds = index * 0.035;\n return (\n <div\n // biome-ignore lint/suspicious/noArrayIndexKey: static ordered list\n key={index}\n className=\"absolute top-0 size-[3px] animate-loader-wave rounded-full bg-grayscale-200 motion-reduce:animate-none dark:bg-grayscale-700\"\n style={{\n left: `${index}px`,\n animationDelay: `${delaySeconds}s`,\n }}\n />\n );\n })\n )}\n </div>\n );\n}\n\nexport { Loader };\n","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Loader, type LoaderProps } from \"../loader\";\nimport type { ButtonProps } from \"./types\";\n\nconst buttonVariants = cva(\n \"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none focus-visible:border-ring-3 focus-visible:ring-ring/60 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n align: {\n left: \"justify-start\",\n center: \"justify-center\",\n right: \"justify-end\",\n },\n collapsed: {\n false: null,\n true: \"min-w-10 max-w-10 justify-center\",\n },\n outline: {\n false: null,\n true: \"\",\n },\n hasLeading: {\n false: null,\n },\n theme: {\n base: \"bg-foreground text-background\",\n brand: \"bg-primary text-primary-foreground\",\n error: \"\",\n },\n hasTrailing: {\n false: null,\n },\n variant: {\n default: \"hover:bg-background/90\",\n outline: \"backdrop-blur-lg \",\n primary: \"bg-primary/0 backdrop-blur-lg text-primary-foreground\",\n secondary: \"bg-secondary-foreground/0 backdrop-blur-lg text-secondary\",\n tertiary: \"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]\",\n },\n pill: {\n false: \"rounded-xs\",\n true: \"rounded-full\",\n },\n size: {\n default: \"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class='size-'])]:size-[18px]\",\n lg: \"h-12 min-h-12 text-base [&_svg:not([class='size-'])]:size-[20px]\",\n },\n },\n defaultVariants: {\n align: \"center\",\n outline: false,\n pill: false,\n size: \"default\",\n theme: \"brand\",\n variant: \"default\",\n },\n compoundVariants: [\n {\n pill: true,\n size: \"default\",\n class: \"min-w-10 min-h-10 px-4\",\n },\n {\n pill: true,\n collapsed: true,\n class: \"max-w-10\",\n },\n {\n pill: true,\n size: \"lg\",\n class: \"min-w-12 min-h-12 px-4\",\n },\n {\n pill: true,\n size: \"lg\",\n collapsed: true,\n class: \"max-w-[54px] max-h-12\",\n },\n {\n collapsed: false,\n size: \"default\",\n align: \"left\",\n pill: false,\n class: \"pr-3 pl-2\",\n },\n {\n align: \"center\",\n collapsed: false,\n size: \"default\",\n pill: false,\n class: \"px-3\",\n },\n {\n hasLeading: true,\n pill: false,\n align: \"left\",\n size: \"default\",\n class: \"pr-3 pl-2\",\n },\n {\n collapsed: false,\n size: \"default\",\n pill: true,\n class: \"px-4\",\n },\n {\n size: \"lg\",\n pill: true,\n collapsed: false,\n class: \"px-4\",\n },\n {\n variant: \"primary\",\n outline: false,\n theme: \"base\",\n class:\n \"bg-foreground text-background hover:ring-2 active:ring active:bg-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background\",\n },\n {\n variant: \"primary\",\n outline: true,\n theme: \"base\",\n class:\n \"ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1\",\n },\n {\n variant: \"primary\",\n outline: true,\n theme: \"brand\",\n class:\n \"ring ring-primary-foreground bg-background/0 text-primary-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1\",\n },\n {\n variant: \"primary\",\n theme: \"brand\",\n outline: false,\n class:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground active:bg-primary active:text-primary-foreground focus-visible:bg-primary focus-visible:text-primary-foreground\",\n },\n {\n variant: \"primary\",\n theme: \"error\",\n class: \"bg-destructive text-white\",\n },\n {\n variant: \"secondary\",\n outline: false,\n theme: \"base\",\n class: \"bg-background/0 text-foreground backdrop-blur-lg focus-visible:backdrop-blur-md\",\n },\n {\n variant: \"secondary\",\n outline: true,\n theme: \"base\",\n class:\n \"bg-background/0 text-foreground ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md\",\n },\n {\n variant: \"tertiary\",\n outline: false,\n theme: \"base\",\n class:\n \"bg-background/0 text-foreground backdrop-blur-lg focus-visible:backdrop-blur-md dark:text-white\",\n },\n {\n variant: \"tertiary\",\n theme: \"error\",\n class: \"bg-transparent backdrop-blur-lg text-error-600\",\n },\n ],\n },\n);\n\nconst tintVariants = cva(\n \"before:content-[''] before:absolute before:inset-0 before:transition-all before:rounded-[inherit] before:pointer-events-none\",\n {\n variants: {\n outline: {\n false: null,\n },\n variant: {\n default: \"\",\n outline: \"\",\n primary:\n \"before:bg-tint-700-reversed/0 hover:before:bg-tint-700-reversed active:before:bg-tint-700-reversed/0 disabled:before:bg-tint-900-default focus-visible:before:bg-tint-700-reversed/0\",\n secondary:\n \"before:bg-tint-900-default hover:before:bg-tint-800-default active:before:bg-tint-900-default disabled:before:bg-tint-900-default focus-visible:before:bg-tint-800-default\",\n tertiary:\n \"before:bg-tint-950-reversed hover:before:bg-tint-900-default active:before:bg-tint-950-reversed disabled:before:bg-tint-950-reversed focus-visible:before:bg-tint-950-reversed\",\n },\n },\n defaultVariants: {\n outline: false,\n variant: \"default\",\n },\n compoundVariants: [\n {\n outline: true,\n variant: \"primary\",\n class:\n \"before:bg-tint-950-reversed hover:before:bg-tint-950-reversed active:before:bg-tint-950-reversed disabled:before:bg-tint-900-default focus-visible:before:bg-tint-950-reversed\",\n },\n {\n outline: true,\n variant: \"secondary\",\n class:\n \"before:bg-tint-950-reversed hover:before:bg-tint-950-reversed active:before:bg-tint-950-reversed disabled:before:bg-tint-900-default focus-visible:before:bg-tint-950-reversed\",\n },\n ],\n },\n);\n\nconst loaderCompoundVariants: Array<{\n theme: \"base\" \| \"brand\" \| \"error\";\n variant: string;\n loaderTheme: LoaderProps[\"theme\"];\n}> = [\n { theme: \"base\", variant: \"default\", loaderTheme: \"reversed\" },\n { theme: \"base\", variant: \"primary\", loaderTheme: \"reversed\" },\n { theme: \"base\", variant: \"tertiary\", loaderTheme: \"black\" },\n { theme: \"base\", variant: \"outline\", loaderTheme: \"white\" },\n { theme: \"brand\", variant: \"secondary\", loaderTheme: \"default\" },\n { theme: \"brand\", variant: \"default\", loaderTheme: \"reversed\" },\n { theme: \"brand\", variant: \"primary\", loaderTheme: \"reversed\" },\n { theme: \"brand\", variant: \"tertiary\", loaderTheme: \"black\" },\n { theme: \"brand\", variant: \"outline\", loaderTheme: \"reversed\" },\n];\n\nfunction loaderVariants({\n theme,\n variant,\n}: {\n theme: \"base\" \| \"brand\" \| \"error\";\n variant: string;\n}): LoaderProps[\"theme\"] {\n const match = loaderCompoundVariants.find((c) => c.theme === theme && c.variant === variant);\n return match?.loaderTheme ?? \"default\";\n}\n\nfunction Button({\n align = \"center\",\n children,\n className,\n collapsed = false,\n focusableWhenDisabled,\n leading,\n outline = false,\n pill = false,\n loading = false,\n loadingElement,\n nativeButton,\n render,\n size = \"default\",\n theme = \"brand\",\n trailing,\n variant = \"default\",\n href,\n ...props\n}: ButtonProps) {\n const sharedClassName = cn(\n buttonVariants({\n variant,\n size,\n align,\n outline,\n collapsed,\n pill,\n hasLeading: !!leading,\n theme,\n hasTrailing: !!trailing,\n }),\n tintVariants({ variant, outline }),\n className,\n );\n\n const content = (\n <>\n {loading &&\n (loadingElement \|\| (\n <Loader\n className=\"absolute inset-0 m-auto\"\n variant=\"spinner\"\n theme={loaderVariants({ theme, variant })}\n />\n ))}\n {leading && (\n <div\n className={cn(\"transition-opacity group-aria-busy/button:opacity-0\", {\n \"opacity-0\": loading,\n })}\n >\n {leading}\n </div>\n )}\n {children && (\n <span\n className={cn(\"relative min-w-[18px] truncate transition-opacity\", {\n \"opacity-0\": loading,\n })}\n >\n {children}\n </span>\n )}\n {trailing && (\n <div\n className={cn(\"transition-opacity group-aria-busy/button:opacity-0\", {\n \"opacity-0\": loading,\n \"absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2\": collapsed,\n })}\n >\n {trailing}\n </div>\n )}\n </>\n );\n\n if (href != null) {\n return (\n <a\n data-slot=\"button\"\n className={sharedClassName}\n href={href}\n {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n >\n {content}\n </a>\n );\n }\n\n const buttonProps = props as React.ComponentProps<typeof ButtonPrimitive>;\n\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={sharedClassName}\n nativeButton={nativeButton}\n focusableWhenDisabled={focusableWhenDisabled}\n render={render}\n {...buttonProps}\n >\n {content}\n </ButtonPrimitive>\n );\n}\n\nexport { Button };\n"]}
1	+ {"version":3,"sources":["../src/lib/utils.ts","../src/components/loader/loader.tsx","../src/components/button/button.tsx"],"names":["twMerge","clsx","cva","jsx","jsxs","loaderVariants","Fragment","ButtonPrimitive"],"mappings":"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","file":"button.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 { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { LoaderProps } from \"./types\";\n\nconst loaderVariants = cva(\"flex shrink-0 items-center justify-center\", {\n variants: {\n theme: {\n default: \"[--loader-foreground:var(--foreground)] [--loader-background:var(--foreground)]\",\n reversed: \"[--loader-foreground:var(--background)] [--loader-background:var(--foreground)]\",\n black:\n \"[--loader-foreground:var(--color-brand-midnight-900)] [--loader-background:var(--color-grayscale-300)]\",\n white:\n \"[--loader-foreground:var(--color-grayscale-300)] [--loader-background:var(--color-brand-midnight-900)]\",\n },\n variant: {\n spinner: \"size-5 motion-reduce:animate-none\",\n loader: \"relative flex h-[13px] w-[23px] motion-reduce:animate-none\",\n },\n },\n defaultVariants: {\n theme: \"default\",\n variant: \"spinner\",\n },\n});\n\nconst spinnerFgVariants = cva(\"\", {\n variants: {\n theme: {\n default: \"fill-foreground opacity-[0.06]\",\n reversed: \"fill-white opacity-10\",\n black: \"fill-black opacity-[0.04]\",\n white: \"fill-white opacity-[0.04]\",\n },\n },\n});\n\nconst spinnerBgVariants = cva(\"\", {\n variants: {\n theme: {\n default: \"fill-foreground\",\n reversed: \"fill-background\",\n black: \"fill-black opacity-[0.98]\",\n white: \"fill-white opacity-[0.98]\",\n },\n },\n});\n\nfunction Loader({\n theme = \"default\",\n variant = \"spinner\",\n className,\n style,\n ...props\n}: LoaderProps) {\n const dotCount = 21;\n\n return (\n <div\n data-slot=\"loader\"\n className={cn(\n loaderVariants({ theme, variant }),\n variant === \"spinner\" && \"animate-spin\",\n className,\n )}\n {...props}\n >\n {variant === \"spinner\" ? (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Loading spinner</title>\n <g clipPath=\"url(#pop_loader_clip_path)\">\n <path\n className={spinnerFgVariants({ theme })}\n d=\"M20 10C20 15.5137 15.5137 20 10 20C4.48628 20 6.78126e-07 15.5137 4.37114e-07 10C1.96101e-07 4.48627 4.48627 3.50301e-07 10 1.09288e-07C15.5137 -1.31724e-07 20 4.48627 20 10ZM2.35294 10C2.35294 14.2196 5.78039 17.6471 10 17.6471C14.2196 17.6471 17.6471 14.2196 17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294C5.78039 2.35294 2.35294 5.78039 2.35294 10Z\"\n />\n <path\n className={spinnerBgVariants({ theme })}\n d=\"M20 10L17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294L10 7.10315e-07C15.5137 4.69302e-07 20 4.48627 20 10Z\"\n />\n </g>\n <defs>\n <clipPath id=\"pop_loader_clip_path\">\n <rect\n width=\"20\"\n height=\"20\"\n fill=\"white\"\n transform=\"translate(8.74228e-07 20) rotate(-90)\"\n />\n </clipPath>\n </defs>\n </svg>\n ) : (\n Array.from({ length: dotCount }, (_, index) => {\n const delaySeconds = index * 0.035;\n return (\n <div\n // biome-ignore lint/suspicious/noArrayIndexKey: static ordered list\n key={index}\n className=\"absolute top-0 size-[3px] animate-loader-wave rounded-full bg-grayscale-200 motion-reduce:animate-none dark:bg-grayscale-700\"\n style={{\n left: `${index}px`,\n animationDelay: `${delaySeconds}s`,\n }}\n />\n );\n })\n )}\n </div>\n );\n}\n\nexport { Loader };\n","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Loader, type LoaderProps } from \"../loader\";\nimport type { ButtonProps } from \"./types\";\n\nconst buttonVariants = cva(\n \"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none focus-visible:border-ring-3 focus-visible:ring-ring/60 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n align: {\n left: \"justify-start\",\n center: \"justify-center\",\n right: \"justify-end\",\n },\n collapsed: {\n false: null,\n true: \"min-w-10 max-w-10 justify-center\",\n },\n outline: {\n false: null,\n true: \"\",\n },\n hasLeading: {\n false: null,\n },\n theme: {\n base: \"bg-foreground text-background\",\n brand: \"bg-primary text-primary-foreground\",\n error: \"\",\n },\n hasTrailing: {\n false: null,\n },\n variant: {\n default: \"hover:bg-background/90\",\n outline: \"backdrop-blur-lg \",\n primary: \"bg-primary/0 backdrop-blur-lg text-primary-foreground\",\n secondary: \"bg-secondary-foreground/0 backdrop-blur-lg text-secondary\",\n tertiary: \"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]\",\n },\n pill: {\n false: \"rounded-xs\",\n true: \"rounded-full\",\n },\n size: {\n default: \"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class='size-'])]:size-[18px]\",\n lg: \"h-12 min-h-12 text-base [&_svg:not([class='size-'])]:size-[20px]\",\n },\n },\n defaultVariants: {\n align: \"center\",\n outline: false,\n pill: false,\n size: \"default\",\n theme: \"brand\",\n variant: \"default\",\n },\n compoundVariants: [\n {\n pill: true,\n size: \"default\",\n class: \"min-w-10 min-h-10 px-4\",\n },\n {\n pill: true,\n collapsed: true,\n class: \"max-w-10\",\n },\n {\n pill: true,\n size: \"lg\",\n class: \"min-w-12 min-h-12 px-4\",\n },\n {\n pill: true,\n size: \"lg\",\n collapsed: true,\n class: \"max-w-[54px] max-h-12\",\n },\n {\n collapsed: false,\n size: \"default\",\n align: \"left\",\n pill: false,\n class: \"pr-3 pl-2\",\n },\n {\n align: \"center\",\n collapsed: false,\n size: \"default\",\n pill: false,\n class: \"px-3\",\n },\n {\n hasLeading: true,\n pill: false,\n align: \"left\",\n size: \"default\",\n class: \"pr-3 pl-2\",\n },\n {\n collapsed: false,\n size: \"default\",\n pill: true,\n class: \"px-4\",\n },\n {\n size: \"lg\",\n pill: true,\n collapsed: false,\n class: \"px-4\",\n },\n {\n variant: \"primary\",\n outline: false,\n theme: \"base\",\n class:\n \"bg-foreground text-background hover:ring-2 active:bg-foreground active:text-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background\",\n },\n {\n variant: \"primary\",\n outline: true,\n theme: \"base\",\n class:\n \"ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1\",\n },\n {\n variant: \"primary\",\n outline: true,\n theme: \"brand\",\n class:\n \"ring ring-primary-foreground bg-background/0 text-primary-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1\",\n },\n {\n variant: \"primary\",\n theme: \"brand\",\n outline: false,\n class:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground active:bg-primary active:text-primary-foreground focus-visible:bg-primary focus-visible:text-primary-foreground\",\n },\n {\n variant: \"primary\",\n theme: \"error\",\n class: \"bg-destructive text-white\",\n },\n {\n variant: \"secondary\",\n outline: false,\n theme: \"base\",\n class: \"bg-background/0 text-foreground backdrop-blur-lg focus-visible:backdrop-blur-md\",\n },\n {\n variant: \"secondary\",\n outline: true,\n theme: \"base\",\n class:\n \"bg-background/0 text-foreground ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md\",\n },\n {\n variant: \"tertiary\",\n outline: false,\n theme: \"base\",\n class:\n \"bg-background/0 text-foreground backdrop-blur-lg focus-visible:backdrop-blur-md dark:text-white\",\n },\n {\n variant: \"tertiary\",\n theme: \"error\",\n class: \"bg-transparent backdrop-blur-lg text-error-600\",\n },\n ],\n },\n);\n\nconst tintVariants = cva(\n \"before:content-[''] before:absolute before:inset-0 before:transition-all before:rounded-[inherit] before:pointer-events-none\",\n {\n variants: {\n outline: {\n false: null,\n },\n variant: {\n default: \"\",\n outline: \"\",\n primary:\n \"before:bg-tint-700-reversed/0 hover:before:bg-tint-700-reversed active:before:bg-tint-700-reversed/0 disabled:before:bg-tint-900-default focus-visible:before:bg-tint-700-reversed/0\",\n secondary:\n \"before:bg-tint-900-default hover:before:bg-tint-800-default active:before:bg-tint-900-default disabled:before:bg-tint-900-default focus-visible:before:bg-tint-800-default\",\n tertiary:\n \"before:bg-tint-950-reversed hover:before:bg-tint-900-default active:before:bg-tint-950-reversed disabled:before:bg-tint-950-reversed focus-visible:before:bg-tint-950-reversed\",\n },\n },\n defaultVariants: {\n outline: false,\n variant: \"default\",\n },\n compoundVariants: [\n {\n outline: true,\n variant: \"primary\",\n class:\n \"before:bg-tint-950-reversed hover:before:bg-tint-950-reversed active:before:bg-tint-950-reversed disabled:before:bg-tint-900-default focus-visible:before:bg-tint-950-reversed\",\n },\n {\n outline: true,\n variant: \"secondary\",\n class:\n \"before:bg-tint-950-reversed hover:before:bg-tint-950-reversed active:before:bg-tint-950-reversed disabled:before:bg-tint-900-default focus-visible:before:bg-tint-950-reversed\",\n },\n ],\n },\n);\n\nconst loaderCompoundVariants: Array<{\n theme: \"base\" \| \"brand\" \| \"error\";\n variant: string;\n loaderTheme: LoaderProps[\"theme\"];\n}> = [\n { theme: \"base\", variant: \"default\", loaderTheme: \"reversed\" },\n { theme: \"base\", variant: \"primary\", loaderTheme: \"reversed\" },\n { theme: \"base\", variant: \"tertiary\", loaderTheme: \"black\" },\n { theme: \"base\", variant: \"outline\", loaderTheme: \"white\" },\n { theme: \"brand\", variant: \"secondary\", loaderTheme: \"default\" },\n { theme: \"brand\", variant: \"default\", loaderTheme: \"reversed\" },\n { theme: \"brand\", variant: \"primary\", loaderTheme: \"reversed\" },\n { theme: \"brand\", variant: \"tertiary\", loaderTheme: \"black\" },\n { theme: \"brand\", variant: \"outline\", loaderTheme: \"reversed\" },\n];\n\nfunction loaderVariants({\n theme,\n variant,\n}: {\n theme: \"base\" \| \"brand\" \| \"error\";\n variant: string;\n}): LoaderProps[\"theme\"] {\n const match = loaderCompoundVariants.find((c) => c.theme === theme && c.variant === variant);\n return match?.loaderTheme ?? \"default\";\n}\n\nfunction Button({\n align = \"center\",\n children,\n className,\n collapsed = false,\n focusableWhenDisabled,\n leading,\n outline = false,\n pill = false,\n loading = false,\n loadingElement,\n nativeButton,\n render,\n size = \"default\",\n theme = \"brand\",\n trailing,\n variant = \"default\",\n href,\n ...props\n}: ButtonProps) {\n const sharedClassName = cn(\n buttonVariants({\n variant,\n size,\n align,\n outline,\n collapsed,\n pill,\n hasLeading: !!leading,\n theme,\n hasTrailing: !!trailing,\n }),\n tintVariants({ variant, outline }),\n className,\n );\n\n const content = (\n <>\n {loading &&\n (loadingElement \|\| (\n <Loader\n className=\"absolute inset-0 m-auto\"\n variant=\"spinner\"\n theme={loaderVariants({ theme, variant })}\n />\n ))}\n {leading && (\n <div\n className={cn(\"transition-opacity group-aria-busy/button:opacity-0\", {\n \"opacity-0\": loading,\n })}\n >\n {leading}\n </div>\n )}\n {children && (\n <span\n className={cn(\"relative min-w-[18px] truncate transition-opacity\", {\n \"opacity-0\": loading,\n })}\n >\n {children}\n </span>\n )}\n {trailing && (\n <div\n className={cn(\"transition-opacity group-aria-busy/button:opacity-0\", {\n \"opacity-0\": loading,\n \"absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2\": collapsed,\n \"ml-auto\": !collapsed,\n })}\n >\n {trailing}\n </div>\n )}\n </>\n );\n\n if (href != null) {\n return (\n <a\n data-slot=\"button\"\n className={sharedClassName}\n href={href}\n {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n >\n {content}\n </a>\n );\n }\n\n const buttonProps = props as React.ComponentProps<typeof ButtonPrimitive>;\n\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={sharedClassName}\n nativeButton={nativeButton}\n focusableWhenDisabled={focusableWhenDisabled}\n render={render}\n {...buttonProps}\n >\n {content}\n </ButtonPrimitive>\n );\n}\n\nexport { Button };\n"]}

package/dist/button.js CHANGED Viewed

@@ -229,7 +229,7 @@ var buttonVariants = cva(
         variant: "primary",
         outline: false,
         theme: "base",
-        class: "bg-foreground text-background hover:ring-2 active:ring active:bg-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background"
+        class: "bg-foreground text-background hover:ring-2 active:bg-foreground active:text-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background"
       },
       {
         variant: "primary",
@@ -398,7 +398,8 @@ function Button({
       {
         className: cn("transition-opacity group-aria-busy/button:opacity-0", {
           "opacity-0": loading,
-          "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed
+          "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed,
+          "ml-auto": !collapsed
         }),
         children: trailing
       }