@popgrids/ui 0.0.32 → 0.0.33
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 +17 -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 +17 -7
- package/dist/avatar.js.map +1 -1
- package/dist/index.cjs +17 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +17 -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
|
{
|
|
@@ -117,9 +124,12 @@ function AvatarBadge({ className = "", ...props }) {
|
|
|
117
124
|
className: cn(
|
|
118
125
|
"absolute h-[18px] min-w-[18px] z-10 select-none",
|
|
119
126
|
"leading-none",
|
|
127
|
+
"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
|
|
120
128
|
"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-[-
|
|
129
|
+
"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]",
|
|
130
|
+
"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]",
|
|
131
|
+
"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]",
|
|
132
|
+
"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px",
|
|
123
133
|
className
|
|
124
134
|
),
|
|
125
135
|
...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":";;;;;;;;;;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,EAAA,EAAI,QAAA;AAAA;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA;AAAA,QACJ,EAAA,EAAI,cAAA;AAAA,QACJ,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAEA,SAAS,MAAA,CAAO,EAAE,SAAA,GAAY,EAAA,EAAI,OAAO,IAAA,EAAM,GAAG,OAAM,EAAgB;AACtE,EAAA,uBACEC,cAAAA;AAAA,IAACG,aAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,WAAW,EAAA,CAAG,cAAA,CAAe,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MAChD,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,YAAY,EAAE,SAAA,GAAY,EAAA,EAAI,GAAG,OAAM,EAAqB;AACnE,EAAA,uBACEH,cAAAA;AAAA,IAACG,aAAA,CAAgB,KAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yDAAA,EAA2D,SAAS,CAAA;AAAA,MACjF,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,eAAe,EAAE,SAAA,GAAY,EAAA,EAAI,GAAG,OAAM,EAAwB;AACzE,EAAA,uBACEH,cAAAA;AAAA,IAACG,aAAA,CAAgB,QAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,0IAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,YAAY,EAAE,SAAA,GAAY,EAAA,EAAI,GAAG,OAAM,EAAqB;AACnE,EAAA,uBACEH,cAAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,iDAAA;AAAA,QACA,cAAA;AAAA,QACA,oFAAA;AAAA,QACA,oFAAA;AAAA,QACA,oFAAA;AAAA,QACA,oFAAA;AAAA,QACA,kFAAA;AAAA,QACA,kFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,YAAY,EAAE,SAAA,GAAY,EAAA,EAAI,GAAG,OAAM,EAAqB;AACnE,EAAA,uBACEA,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,qGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,iBAAiB,EAAE,SAAA,GAAY,EAAA,EAAI,GAAG,OAAM,EAA0B;AAC7E,EAAA,uBACEA,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,0VAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"avatar.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { NotificationBadgeProps } from \"./types\";\n\nconst notificationBadgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full box-border shrink-0 whitespace-nowrap text-xs font-medium leading-[18px] min-w-[18px] h-[18px] px-[5px] py-0 transition-[color,background-color,border-color]\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground\",\n reversed: \"bg-background text-foreground\",\n disabled:\n \"bg-tint-950-reversed border border-black-alpha-600 text-black-alpha-600 backdrop-blur-lg\",\n white: \"bg-white text-black\",\n black: \"bg-brand-midnight-900 text-white\",\n },\n pulse: {\n true: \"relative\",\n false: \"\",\n },\n },\n compoundVariants: [\n {\n pulse: true,\n class:\n \"before:content-[''] before:absolute before:inset-[-4px] before:rounded-full before:border-4 before:border-solid before:border-(--notification-badge-pulse-color,var(--color-surface-alpha-alpha-brand-light-30)) before:pointer-events-none before:animate-notification-badge-ping motion-reduce:before:animate-none\",\n },\n ],\n defaultVariants: {\n variant: \"default\",\n pulse: false,\n },\n },\n);\n\nfunction NotificationBadge({\n className,\n variant,\n pulse = false,\n count,\n children,\n render,\n ...props\n}: NotificationBadgeProps & VariantProps<typeof notificationBadgeVariants>) {\n const displayContent = count !== undefined ? String(count) : children;\n\n const defaultProps: Record<string, unknown> = {\n \"data-slot\": \"notification-badge\",\n className: cn(notificationBadgeVariants({ variant, pulse }), className),\n children: <span className=\"text-center\">{displayContent}</span>,\n };\n\n return useRender({\n defaultTagName: \"div\",\n render,\n props: mergeProps<\"div\">(defaultProps, props),\n });\n}\n\nexport { NotificationBadge };\n","\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport { NotificationBadge } from \"../notification-badge\";\nimport type {\n AvatarBadgeProps,\n AvatarFallbackProps,\n AvatarGroupCountProps,\n AvatarGroupProps,\n AvatarImageProps,\n AvatarProps,\n} from \"./types\";\n\nconst avatarVariants = cva(\n \"group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:mix-blend-darken dark:after:mix-blend-lighten\",\n {\n variants: {\n size: {\n xs: \"size-6\", // 24px\n sm: \"size-8\", // 32px\n md: \"size-14\", // 56px\n lg: \"size-20\", // 80px\n xl: \"size-[120px]\",\n xxl: \"size-[140px]\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n },\n);\n\nfunction Avatar({ className = \"\", size = \"md\", ...props }: AvatarProps) {\n return (\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n data-size={size}\n className={cn(avatarVariants({ size }), className)}\n {...props}\n />\n );\n}\n\nfunction AvatarImage({ className = \"\", ...props }: AvatarImageProps) {\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\"aspect-square size-full mask mask-squircle object-cover\", className)}\n {...props}\n />\n );\n}\n\nfunction AvatarFallback({ className = \"\", ...props }: AvatarFallbackProps) {\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarBadge({ className = \"\", ...props }: AvatarBadgeProps) {\n return (\n <NotificationBadge\n data-slot=\"avatar-badge\"\n className={cn(\n \"absolute h-[18px] min-w-[18px] z-10 select-none\",\n \"leading-none\",\n \"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]\",\n \"group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]\",\n \"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]\",\n \"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]\",\n \"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]\",\n \"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroup({ className = \"\", ...props }: AvatarGroupProps) {\n return (\n <div\n data-slot=\"avatar-group\"\n className={cn(\n \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroupCount({ className = \"\", ...props }: AvatarGroupCountProps) {\n return (\n <div\n data-slot=\"avatar-group-count\"\n className={cn(\n \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };\n"]}
|
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
|
{
|
|
@@ -115,9 +122,12 @@ function AvatarBadge({ className = "", ...props }) {
|
|
|
115
122
|
className: cn(
|
|
116
123
|
"absolute h-[18px] min-w-[18px] z-10 select-none",
|
|
117
124
|
"leading-none",
|
|
125
|
+
"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
|
|
118
126
|
"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-[-
|
|
127
|
+
"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]",
|
|
128
|
+
"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]",
|
|
129
|
+
"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]",
|
|
130
|
+
"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px",
|
|
121
131
|
className
|
|
122
132
|
),
|
|
123
133
|
...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 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
|
{
|
|
@@ -125,9 +132,12 @@ function AvatarBadge({ className = "", ...props }) {
|
|
|
125
132
|
className: cn(
|
|
126
133
|
"absolute h-[18px] min-w-[18px] z-10 select-none",
|
|
127
134
|
"leading-none",
|
|
135
|
+
"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
|
|
128
136
|
"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-[-
|
|
137
|
+
"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]",
|
|
138
|
+
"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]",
|
|
139
|
+
"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]",
|
|
140
|
+
"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px",
|
|
131
141
|
className
|
|
132
142
|
),
|
|
133
143
|
...props
|