@neoptocom/neopto-ui 1.6.9 → 1.6.10
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/index.cjs +3 -2
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -2
- package/package.json +1 -1
- package/src/components/Avatar.tsx +9 -3
package/dist/index.cjs
CHANGED
|
@@ -560,7 +560,8 @@ function getAvatarClasses(size = "md", className) {
|
|
|
560
560
|
const base = "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none";
|
|
561
561
|
const sizes = {
|
|
562
562
|
sm: "w-[28px] h-[28px]",
|
|
563
|
-
md: "w-[60px] h-[60px]"
|
|
563
|
+
md: "w-[60px] h-[60px]",
|
|
564
|
+
bg: "w-[90px] h-[90px]"
|
|
564
565
|
};
|
|
565
566
|
return [base, sizes[size], className].filter(Boolean).join(" ");
|
|
566
567
|
}
|
|
@@ -587,7 +588,7 @@ function Avatar({
|
|
|
587
588
|
if (color) s.backgroundColor = color;
|
|
588
589
|
return s;
|
|
589
590
|
}, [color, style]);
|
|
590
|
-
const textVariant = size === "sm" ? "label-md" : "headline-md";
|
|
591
|
+
const textVariant = size === "sm" ? "label-md" : size === "bg" ? "headline-lg" : "headline-md";
|
|
591
592
|
const showImage = !!src && !imgError;
|
|
592
593
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
593
594
|
"div",
|
package/dist/index.d.cts
CHANGED
|
@@ -143,7 +143,7 @@ type AvatarProps = {
|
|
|
143
143
|
/** Accessible alt text; defaults to the person's name */
|
|
144
144
|
alt?: string;
|
|
145
145
|
/** Avatar size */
|
|
146
|
-
size?: "sm" | "md";
|
|
146
|
+
size?: "sm" | "md" | "bg";
|
|
147
147
|
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
|
|
148
148
|
declare function Avatar({ name, src, color, size, alt, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
149
149
|
|
package/dist/index.d.ts
CHANGED
|
@@ -143,7 +143,7 @@ type AvatarProps = {
|
|
|
143
143
|
/** Accessible alt text; defaults to the person's name */
|
|
144
144
|
alt?: string;
|
|
145
145
|
/** Avatar size */
|
|
146
|
-
size?: "sm" | "md";
|
|
146
|
+
size?: "sm" | "md" | "bg";
|
|
147
147
|
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
|
|
148
148
|
declare function Avatar({ name, src, color, size, alt, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
149
149
|
|
package/dist/index.js
CHANGED
|
@@ -539,7 +539,8 @@ function getAvatarClasses(size = "md", className) {
|
|
|
539
539
|
const base = "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none";
|
|
540
540
|
const sizes = {
|
|
541
541
|
sm: "w-[28px] h-[28px]",
|
|
542
|
-
md: "w-[60px] h-[60px]"
|
|
542
|
+
md: "w-[60px] h-[60px]",
|
|
543
|
+
bg: "w-[90px] h-[90px]"
|
|
543
544
|
};
|
|
544
545
|
return [base, sizes[size], className].filter(Boolean).join(" ");
|
|
545
546
|
}
|
|
@@ -566,7 +567,7 @@ function Avatar({
|
|
|
566
567
|
if (color) s.backgroundColor = color;
|
|
567
568
|
return s;
|
|
568
569
|
}, [color, style]);
|
|
569
|
-
const textVariant = size === "sm" ? "label-md" : "headline-md";
|
|
570
|
+
const textVariant = size === "sm" ? "label-md" : size === "bg" ? "headline-lg" : "headline-md";
|
|
570
571
|
const showImage = !!src && !imgError;
|
|
571
572
|
return /* @__PURE__ */ jsx(
|
|
572
573
|
"div",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neoptocom/neopto-ui",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.10",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive documentation. Requires Tailwind v4+.",
|
|
6
6
|
"keywords": [
|
|
@@ -12,7 +12,7 @@ export type AvatarProps = {
|
|
|
12
12
|
/** Accessible alt text; defaults to the person's name */
|
|
13
13
|
alt?: string;
|
|
14
14
|
/** Avatar size */
|
|
15
|
-
size?: "sm" | "md";
|
|
15
|
+
size?: "sm" | "md" | "bg";
|
|
16
16
|
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
|
|
17
17
|
|
|
18
18
|
function getAvatarClasses(size: AvatarProps["size"] = "md", className?: string): string {
|
|
@@ -22,7 +22,8 @@ function getAvatarClasses(size: AvatarProps["size"] = "md", className?: string):
|
|
|
22
22
|
|
|
23
23
|
const sizes = {
|
|
24
24
|
sm: "w-[28px] h-[28px]",
|
|
25
|
-
md: "w-[60px] h-[60px]"
|
|
25
|
+
md: "w-[60px] h-[60px]",
|
|
26
|
+
bg: "w-[90px] h-[90px]"
|
|
26
27
|
};
|
|
27
28
|
|
|
28
29
|
return [base, sizes[size], className].filter(Boolean).join(" ");
|
|
@@ -53,7 +54,12 @@ export default function Avatar({
|
|
|
53
54
|
return s;
|
|
54
55
|
}, [color, style]);
|
|
55
56
|
|
|
56
|
-
const textVariant =
|
|
57
|
+
const textVariant =
|
|
58
|
+
size === "sm"
|
|
59
|
+
? ("label-md" as const)
|
|
60
|
+
: size === "bg"
|
|
61
|
+
? ("headline-lg" as const)
|
|
62
|
+
: ("headline-md" as const);
|
|
57
63
|
|
|
58
64
|
const showImage = !!src && !imgError;
|
|
59
65
|
|