@popgrids/ui 0.0.32 → 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.
- package/dist/avatar.cjs +23 -7
- package/dist/avatar.cjs.map +1 -1
- package/dist/avatar.d.cts +1 -1
- package/dist/avatar.d.ts +1 -1
- package/dist/avatar.js +23 -7
- package/dist/avatar.js.map +1 -1
- package/dist/index.cjs +23 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +23 -7
- package/dist/index.js.map +1 -1
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/package.json +1 -1
package/dist/avatar.cjs
CHANGED
|
@@ -65,17 +65,24 @@ var avatarVariants = classVarianceAuthority.cva(
|
|
|
65
65
|
{
|
|
66
66
|
variants: {
|
|
67
67
|
size: {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
68
|
+
xs: "size-6",
|
|
69
|
+
// 24px
|
|
70
|
+
sm: "size-8",
|
|
71
|
+
// 32px
|
|
72
|
+
md: "size-14",
|
|
73
|
+
// 56px
|
|
74
|
+
lg: "size-20",
|
|
75
|
+
// 80px
|
|
76
|
+
xl: "size-[120px]",
|
|
77
|
+
xxl: "size-[140px]"
|
|
71
78
|
}
|
|
72
79
|
},
|
|
73
80
|
defaultVariants: {
|
|
74
|
-
size: "
|
|
81
|
+
size: "md"
|
|
75
82
|
}
|
|
76
83
|
}
|
|
77
84
|
);
|
|
78
|
-
function Avatar({ className = "", size = "
|
|
85
|
+
function Avatar({ className = "", size = "md", ...props }) {
|
|
79
86
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
80
87
|
avatar.Avatar.Root,
|
|
81
88
|
{
|
|
@@ -103,6 +110,12 @@ function AvatarFallback({ className = "", ...props }) {
|
|
|
103
110
|
"data-slot": "avatar-fallback",
|
|
104
111
|
className: cn(
|
|
105
112
|
"mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
|
|
113
|
+
"group-data-[size=xs]/avatar:text-xs",
|
|
114
|
+
"group-data-[size=sm]/avatar:text-sm",
|
|
115
|
+
"group-data-[size=md]/avatar:text-lg",
|
|
116
|
+
"group-data-[size=lg]/avatar:text-2xl",
|
|
117
|
+
"group-data-[size=xl]/avatar:text-4xl",
|
|
118
|
+
"group-data-[size=xxl]/avatar:text-5xl",
|
|
106
119
|
className
|
|
107
120
|
),
|
|
108
121
|
...props
|
|
@@ -117,9 +130,12 @@ function AvatarBadge({ className = "", ...props }) {
|
|
|
117
130
|
className: cn(
|
|
118
131
|
"absolute h-[18px] min-w-[18px] z-10 select-none",
|
|
119
132
|
"leading-none",
|
|
133
|
+
"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
|
|
120
134
|
"group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
|
|
121
|
-
"group-data-[size=
|
|
122
|
-
"group-data-[size=lg]/avatar:right-[-
|
|
135
|
+
"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]",
|
|
136
|
+
"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]",
|
|
137
|
+
"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]",
|
|
138
|
+
"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px",
|
|
123
139
|
className
|
|
124
140
|
),
|
|
125
141
|
...props
|
package/dist/avatar.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/lib/utils.ts","../src/components/notification-badge/notification-badge.tsx","../src/components/avatar/avatar.tsx"],"names":["twMerge","clsx","cva","jsx","useRender","mergeProps","AvatarPrimitive"],"mappings":";;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACIA,IAAM,yBAAA,GAA4BC,0BAAA;AAAA,EAChC,oNAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,oCAAA;AAAA,QACT,QAAA,EAAU,+BAAA;AAAA,QACV,QAAA,EACE,0FAAA;AAAA,QACF,KAAA,EAAO,qBAAA;AAAA,QACP,KAAA,EAAO;AAAA,OACT;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,UAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB;AAAA,QACE,KAAA,EAAO,IAAA;AAAA,QACP,KAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT;AAEJ,CAAA;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4E;AAC1E,EAAA,MAAM,cAAA,GAAiB,KAAA,KAAU,MAAA,GAAY,MAAA,CAAO,KAAK,CAAA,GAAI,QAAA;AAE7D,EAAA,MAAM,YAAA,GAAwC;AAAA,IAC5C,WAAA,EAAa,oBAAA;AAAA,IACb,SAAA,EAAW,GAAG,yBAAA,CAA0B,EAAE,SAAS,KAAA,EAAO,GAAG,SAAS,CAAA;AAAA,IACtE,QAAA,kBAAUC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,eAAe,QAAA,EAAA,cAAA,EAAe;AAAA,GAC1D;AAEA,EAAA,OAAOC,mBAAA,CAAU;AAAA,IACf,cAAA,EAAgB,KAAA;AAAA,IAChB,MAAA;AAAA,IACA,KAAA,EAAOC,qBAAA,CAAkB,YAAA,EAAc,KAAK;AAAA,GAC7C,CAAA;AACH;AC9CA,IAAM,cAAA,GAAiBH,0BAAAA;AAAA,EACrB,kIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,
|
|
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.d.cts
CHANGED
|
@@ -4,7 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { N as NotificationBadgeProps } from './types.d-DDkXskpi.cjs';
|
|
5
5
|
import '@base-ui/react/use-render';
|
|
6
6
|
|
|
7
|
-
type AvatarSize = "
|
|
7
|
+
type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
|
|
8
8
|
|
|
9
9
|
interface AvatarProps extends Avatar$1.Root.Props {
|
|
10
10
|
size?: AvatarSize;
|
package/dist/avatar.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { N as NotificationBadgeProps } from './types.d-DDkXskpi.js';
|
|
5
5
|
import '@base-ui/react/use-render';
|
|
6
6
|
|
|
7
|
-
type AvatarSize = "
|
|
7
|
+
type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
|
|
8
8
|
|
|
9
9
|
interface AvatarProps extends Avatar$1.Root.Props {
|
|
10
10
|
size?: AvatarSize;
|
package/dist/avatar.js
CHANGED
|
@@ -63,17 +63,24 @@ var avatarVariants = cva(
|
|
|
63
63
|
{
|
|
64
64
|
variants: {
|
|
65
65
|
size: {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
xs: "size-6",
|
|
67
|
+
// 24px
|
|
68
|
+
sm: "size-8",
|
|
69
|
+
// 32px
|
|
70
|
+
md: "size-14",
|
|
71
|
+
// 56px
|
|
72
|
+
lg: "size-20",
|
|
73
|
+
// 80px
|
|
74
|
+
xl: "size-[120px]",
|
|
75
|
+
xxl: "size-[140px]"
|
|
69
76
|
}
|
|
70
77
|
},
|
|
71
78
|
defaultVariants: {
|
|
72
|
-
size: "
|
|
79
|
+
size: "md"
|
|
73
80
|
}
|
|
74
81
|
}
|
|
75
82
|
);
|
|
76
|
-
function Avatar({ className = "", size = "
|
|
83
|
+
function Avatar({ className = "", size = "md", ...props }) {
|
|
77
84
|
return /* @__PURE__ */ jsx(
|
|
78
85
|
Avatar$1.Root,
|
|
79
86
|
{
|
|
@@ -101,6 +108,12 @@ function AvatarFallback({ className = "", ...props }) {
|
|
|
101
108
|
"data-slot": "avatar-fallback",
|
|
102
109
|
className: cn(
|
|
103
110
|
"mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
|
|
111
|
+
"group-data-[size=xs]/avatar:text-xs",
|
|
112
|
+
"group-data-[size=sm]/avatar:text-sm",
|
|
113
|
+
"group-data-[size=md]/avatar:text-lg",
|
|
114
|
+
"group-data-[size=lg]/avatar:text-2xl",
|
|
115
|
+
"group-data-[size=xl]/avatar:text-4xl",
|
|
116
|
+
"group-data-[size=xxl]/avatar:text-5xl",
|
|
104
117
|
className
|
|
105
118
|
),
|
|
106
119
|
...props
|
|
@@ -115,9 +128,12 @@ function AvatarBadge({ className = "", ...props }) {
|
|
|
115
128
|
className: cn(
|
|
116
129
|
"absolute h-[18px] min-w-[18px] z-10 select-none",
|
|
117
130
|
"leading-none",
|
|
131
|
+
"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
|
|
118
132
|
"group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
|
|
119
|
-
"group-data-[size=
|
|
120
|
-
"group-data-[size=lg]/avatar:right-[-
|
|
133
|
+
"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]",
|
|
134
|
+
"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]",
|
|
135
|
+
"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]",
|
|
136
|
+
"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px",
|
|
121
137
|
className
|
|
122
138
|
),
|
|
123
139
|
...props
|
package/dist/avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/lib/utils.ts","../src/components/notification-badge/notification-badge.tsx","../src/components/avatar/avatar.tsx"],"names":["cva","jsx","AvatarPrimitive"],"mappings":";;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACIA,IAAM,yBAAA,GAA4B,GAAA;AAAA,EAChC,oNAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,oCAAA;AAAA,QACT,QAAA,EAAU,+BAAA;AAAA,QACV,QAAA,EACE,0FAAA;AAAA,QACF,KAAA,EAAO,qBAAA;AAAA,QACP,KAAA,EAAO;AAAA,OACT;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,UAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB;AAAA,QACE,KAAA,EAAO,IAAA;AAAA,QACP,KAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT;AAEJ,CAAA;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4E;AAC1E,EAAA,MAAM,cAAA,GAAiB,KAAA,KAAU,MAAA,GAAY,MAAA,CAAO,KAAK,CAAA,GAAI,QAAA;AAE7D,EAAA,MAAM,YAAA,GAAwC;AAAA,IAC5C,WAAA,EAAa,oBAAA;AAAA,IACb,SAAA,EAAW,GAAG,yBAAA,CAA0B,EAAE,SAAS,KAAA,EAAO,GAAG,SAAS,CAAA;AAAA,IACtE,QAAA,kBAAU,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,eAAe,QAAA,EAAA,cAAA,EAAe;AAAA,GAC1D;AAEA,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,cAAA,EAAgB,KAAA;AAAA,IAChB,MAAA;AAAA,IACA,KAAA,EAAO,UAAA,CAAkB,YAAA,EAAc,KAAK;AAAA,GAC7C,CAAA;AACH;AC9CA,IAAM,cAAA,GAAiBA,GAAAA;AAAA,EACrB,kIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,
|
|
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
|
@@ -73,17 +73,24 @@ var avatarVariants = classVarianceAuthority.cva(
|
|
|
73
73
|
{
|
|
74
74
|
variants: {
|
|
75
75
|
size: {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
xs: "size-6",
|
|
77
|
+
// 24px
|
|
78
|
+
sm: "size-8",
|
|
79
|
+
// 32px
|
|
80
|
+
md: "size-14",
|
|
81
|
+
// 56px
|
|
82
|
+
lg: "size-20",
|
|
83
|
+
// 80px
|
|
84
|
+
xl: "size-[120px]",
|
|
85
|
+
xxl: "size-[140px]"
|
|
79
86
|
}
|
|
80
87
|
},
|
|
81
88
|
defaultVariants: {
|
|
82
|
-
size: "
|
|
89
|
+
size: "md"
|
|
83
90
|
}
|
|
84
91
|
}
|
|
85
92
|
);
|
|
86
|
-
function Avatar({ className = "", size = "
|
|
93
|
+
function Avatar({ className = "", size = "md", ...props }) {
|
|
87
94
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
88
95
|
avatar.Avatar.Root,
|
|
89
96
|
{
|
|
@@ -111,6 +118,12 @@ function AvatarFallback({ className = "", ...props }) {
|
|
|
111
118
|
"data-slot": "avatar-fallback",
|
|
112
119
|
className: cn(
|
|
113
120
|
"mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
|
|
121
|
+
"group-data-[size=xs]/avatar:text-xs",
|
|
122
|
+
"group-data-[size=sm]/avatar:text-sm",
|
|
123
|
+
"group-data-[size=md]/avatar:text-lg",
|
|
124
|
+
"group-data-[size=lg]/avatar:text-2xl",
|
|
125
|
+
"group-data-[size=xl]/avatar:text-4xl",
|
|
126
|
+
"group-data-[size=xxl]/avatar:text-5xl",
|
|
114
127
|
className
|
|
115
128
|
),
|
|
116
129
|
...props
|
|
@@ -125,9 +138,12 @@ function AvatarBadge({ className = "", ...props }) {
|
|
|
125
138
|
className: cn(
|
|
126
139
|
"absolute h-[18px] min-w-[18px] z-10 select-none",
|
|
127
140
|
"leading-none",
|
|
141
|
+
"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
|
|
128
142
|
"group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
|
|
129
|
-
"group-data-[size=
|
|
130
|
-
"group-data-[size=lg]/avatar:right-[-
|
|
143
|
+
"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]",
|
|
144
|
+
"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]",
|
|
145
|
+
"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]",
|
|
146
|
+
"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px",
|
|
131
147
|
className
|
|
132
148
|
),
|
|
133
149
|
...props
|