@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/index.js
CHANGED
|
@@ -71,17 +71,24 @@ var avatarVariants = cva(
|
|
|
71
71
|
{
|
|
72
72
|
variants: {
|
|
73
73
|
size: {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
xs: "size-6",
|
|
75
|
+
// 24px
|
|
76
|
+
sm: "size-8",
|
|
77
|
+
// 32px
|
|
78
|
+
md: "size-14",
|
|
79
|
+
// 56px
|
|
80
|
+
lg: "size-20",
|
|
81
|
+
// 80px
|
|
82
|
+
xl: "size-[120px]",
|
|
83
|
+
xxl: "size-[140px]"
|
|
77
84
|
}
|
|
78
85
|
},
|
|
79
86
|
defaultVariants: {
|
|
80
|
-
size: "
|
|
87
|
+
size: "md"
|
|
81
88
|
}
|
|
82
89
|
}
|
|
83
90
|
);
|
|
84
|
-
function Avatar({ className = "", size = "
|
|
91
|
+
function Avatar({ className = "", size = "md", ...props }) {
|
|
85
92
|
return /* @__PURE__ */ jsx(
|
|
86
93
|
Avatar$1.Root,
|
|
87
94
|
{
|
|
@@ -109,6 +116,12 @@ function AvatarFallback({ className = "", ...props }) {
|
|
|
109
116
|
"data-slot": "avatar-fallback",
|
|
110
117
|
className: cn(
|
|
111
118
|
"mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
|
|
119
|
+
"group-data-[size=xs]/avatar:text-xs",
|
|
120
|
+
"group-data-[size=sm]/avatar:text-sm",
|
|
121
|
+
"group-data-[size=md]/avatar:text-lg",
|
|
122
|
+
"group-data-[size=lg]/avatar:text-2xl",
|
|
123
|
+
"group-data-[size=xl]/avatar:text-4xl",
|
|
124
|
+
"group-data-[size=xxl]/avatar:text-5xl",
|
|
112
125
|
className
|
|
113
126
|
),
|
|
114
127
|
...props
|
|
@@ -123,9 +136,12 @@ function AvatarBadge({ className = "", ...props }) {
|
|
|
123
136
|
className: cn(
|
|
124
137
|
"absolute h-[18px] min-w-[18px] z-10 select-none",
|
|
125
138
|
"leading-none",
|
|
139
|
+
"group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
|
|
126
140
|
"group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
|
|
127
|
-
"group-data-[size=
|
|
128
|
-
"group-data-[size=lg]/avatar:right-[-
|
|
141
|
+
"group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]",
|
|
142
|
+
"group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]",
|
|
143
|
+
"group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]",
|
|
144
|
+
"group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px",
|
|
129
145
|
className
|
|
130
146
|
),
|
|
131
147
|
...props
|