@pindoba/core-avatar 0.0.0-alpha-20260426220647

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright 2025 Eduardo Lopes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { _ as AvatarShape, a as AvatarBorder, b as ConnectAvatarOptions, c as AvatarFallbackProps, d as AvatarPadding, g as AvatarShadow, h as AvatarRootProps, i as AvatarBaseProps, l as AvatarFeedback, m as AvatarRadius, n as AvatarBackground, o as AvatarClasses, p as AvatarPassThrough, s as AvatarEmphasis, t as AvatarApi, u as AvatarImageProps, v as AvatarSize, x as ElementAttributes, y as AvatarSlotPassThrough } from "./types-CyUSJ_FB.js";
+import { avatarDefaults, connectAvatar, getAvatarInitials } from "./src/connect-avatar.js";
+export { type AvatarApi, type AvatarBackground, type AvatarBaseProps, type AvatarBorder, type AvatarClasses, type AvatarEmphasis, type AvatarFallbackProps, type AvatarFeedback, type AvatarImageProps, type AvatarPadding, type AvatarPassThrough, type AvatarRadius, type AvatarRootProps, type AvatarShadow, type AvatarShape, type AvatarSize, type AvatarSlotPassThrough, type ConnectAvatarOptions, type ElementAttributes, avatarDefaults, connectAvatar, getAvatarInitials };

package/dist/index.js

@@ -0,0 +1,2 @@
+import { avatarDefaults, connectAvatar, getAvatarInitials } from "./src/connect-avatar.js";
+export { avatarDefaults, connectAvatar, getAvatarInitials };

package/dist/src/connect-avatar.d.ts

@@ -0,0 +1,18 @@
+import { b as ConnectAvatarOptions, t as AvatarApi } from "../types-CyUSJ_FB.js";
+
+//#region src/connect-avatar.d.ts
+declare const avatarDefaults: {
+  readonly emphasis: "secondary";
+  readonly size: "md";
+  readonly shape: "circle";
+  readonly feedback: "neutral";
+};
+/**
+ * Derive up to two uppercase initials from a name. Empty / undefined input
+ * returns an empty string so the consumer can render an icon fallback.
+ */
+declare function getAvatarInitials(name?: string): string;
+declare function connectAvatar(options: ConnectAvatarOptions): AvatarApi;
+//#endregion
+export { avatarDefaults, connectAvatar, getAvatarInitials };
+//# sourceMappingURL=connect-avatar.d.ts.map

package/dist/src/connect-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connect-avatar.d.ts","names":[],"sources":["../../src/connect-avatar.ts"],"mappings":";;;cAgBa,cAAA;EAAA;;;;;;;;;iBAsBG,iBAAA,CAAkB,IAAA;AAAA,iBAclB,aAAA,CAAc,OAAA,EAAS,oBAAA,GAAuB,SAAA"}

package/dist/src/connect-avatar.js

@@ -0,0 +1,103 @@
+import { css } from "@pindoba/styled-system/css";
+import { avatarStyles } from "@pindoba/styles-avatar";
+import { connectPanel } from "@pindoba/core-panel";
+//#region src/connect-avatar.ts
+const avatarDefaults = {
+	emphasis: "secondary",
+	size: "md",
+	shape: "circle",
+	feedback: "neutral"
+};
+const sizeToRadius = {
+	xs: "xs",
+	sm: "xs",
+	md: "sm",
+	lg: "md"
+};
+/**
+* Derive up to two uppercase initials from a name. Empty / undefined input
+* returns an empty string so the consumer can render an icon fallback.
+*/
+function getAvatarInitials(name) {
+	if (!name) return "";
+	const trimmed = name.trim();
+	if (/^\+\d+$/u.test(trimmed)) return trimmed.slice(0, 4);
+	const parts = trimmed.split(/\s+/u).filter(Boolean);
+	if (parts.length === 0) return "";
+	if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+	return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function connectAvatar(options) {
+	const { emphasis = avatarDefaults.emphasis, size = avatarDefaults.size, shape = avatarDefaults.shape, feedback: feedbackProp, src, alt, name, background: backgroundProp, border: borderProp, radius: radiusProp, padding: paddingProp, accent: accentProp, translucent, radiusTop, radiusBottom, radiusLeft, radiusRight, shadow, interactive, passThrough, class: className, ...restProps } = options;
+	const feedback = feedbackProp ?? (emphasis === "primary" ? "primary" : "neutral");
+	const resolvedAccent = accentProp ?? emphasis === "primary";
+	const background = backgroundProp ?? (emphasis === "ghost" ? "transparent" : "surface.soft");
+	const border = borderProp ?? (emphasis === "ghost" ? "none" : emphasis === "muted" ? "muted" : "accent");
+	const radius = radiusProp ?? (shape === "circle" ? "full" : sizeToRadius[size]);
+	const padding = paddingProp ?? "none";
+	const panelEmphasis = emphasis === "ghost" ? "secondary" : void 0;
+	const classes = avatarStyles.raw({
+		emphasis,
+		size,
+		shape,
+		feedback
+	});
+	const panelApi = connectPanel({
+		dataComponent: "avatar",
+		dataAttrs: {
+			shape,
+			emphasis,
+			size,
+			feedback
+		},
+		as: "span",
+		background,
+		accent: resolvedAccent,
+		emphasis: panelEmphasis,
+		feedback,
+		border,
+		translucent: translucent ?? false,
+		radius,
+		radiusTop,
+		radiusBottom,
+		radiusLeft,
+		radiusRight,
+		padding,
+		shadow,
+		interactive,
+		passThrough: { root: {
+			style: css.raw(classes.root, passThrough?.root?.style),
+			props: passThrough?.root?.props
+		} },
+		class: className,
+		...restProps
+	});
+	const initials = getAvatarInitials(name);
+	const showImage = Boolean(src);
+	const imageProps = showImage ? {
+		class: css(classes.image, passThrough?.image?.style),
+		src,
+		alt: alt ?? name ?? "",
+		"data-slot": "image"
+	} : void 0;
+	const fallbackProps = {
+		class: css(classes.fallback, passThrough?.fallback?.style),
+		"aria-hidden": showImage ? "true" : void 0,
+		"data-slot": "fallback"
+	};
+	return {
+		rootProps: panelApi.rootProps,
+		classes: {
+			image: css(classes.image, passThrough?.image?.style),
+			fallback: css(classes.fallback, passThrough?.fallback?.style)
+		},
+		initials,
+		showImage,
+		imageProps,
+		fallbackProps
+	};
+}
+//#endregion
+export { avatarDefaults, connectAvatar, getAvatarInitials };
+
+//# sourceMappingURL=connect-avatar.js.map

package/dist/src/connect-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connect-avatar.js","names":[],"sources":["../../src/connect-avatar.ts"],"sourcesContent":["import { css } from \"@pindoba/styled-system/css\";\nimport { avatarStyles } from \"@pindoba/styles-avatar\";\nimport { connectPanel } from \"@pindoba/core-panel\";\nimport type {\n  PanelBackground,\n  PanelBorder,\n  PanelStyleProps,\n} from \"@pindoba/core-panel\";\nimport type {\n  AvatarApi,\n  AvatarBaseProps,\n  AvatarRadius,\n  AvatarSize,\n  ConnectAvatarOptions,\n} from \"./types.js\";\n\nexport const avatarDefaults = {\n  emphasis: \"secondary\",\n  size: \"md\",\n  shape: \"circle\",\n  feedback: \"neutral\",\n} as const satisfies Partial<AvatarBaseProps>;\n\ntype PanelEmphasis = NonNullable<PanelStyleProps[\"emphasis\"]>;\n\n// Avatar size → panel radius. Matches button's sizing.raw radii so square\n// avatars align with same-size buttons.\nconst sizeToRadius: Record<AvatarSize, AvatarRadius> = {\n  xs: \"xs\",\n  sm: \"xs\",\n  md: \"sm\",\n  lg: \"md\",\n};\n\n/**\n * Derive up to two uppercase initials from a name. Empty / undefined input\n * returns an empty string so the consumer can render an icon fallback.\n */\nexport function getAvatarInitials(name?: string): string {\n  if (!name) return \"\";\n  const trimmed = name.trim();\n  // Pass overflow-chip strings (\"+3\", \"+12\", …) through verbatim so the\n  // avatar renders the full count instead of truncating to initials.\n  if (/^\\+\\d+$/u.test(trimmed)) return trimmed.slice(0, 4);\n  const parts = trimmed.split(/\\s+/u).filter(Boolean);\n  if (parts.length === 0) return \"\";\n  if (parts.length === 1) {\n    return parts[0].slice(0, 2).toUpperCase();\n  }\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\nexport function connectAvatar(options: ConnectAvatarOptions): AvatarApi {\n  const {\n    emphasis = avatarDefaults.emphasis,\n    size = avatarDefaults.size,\n    shape = avatarDefaults.shape,\n    feedback: feedbackProp,\n    src,\n    alt,\n    name,\n    background: backgroundProp,\n    border: borderProp,\n    radius: radiusProp,\n    padding: paddingProp,\n    accent: accentProp,\n    translucent,\n    radiusTop,\n    radiusBottom,\n    radiusLeft,\n    radiusRight,\n    shadow,\n    interactive,\n    passThrough,\n    class: className,\n    ...restProps\n  } = options;\n\n  // Resolve feedback based on emphasis when not explicitly set.\n  const feedback =\n    feedbackProp ?? (emphasis === \"primary\" ? \"primary\" : \"neutral\");\n\n  // Emphasis-driven panel defaults (user props always win).\n  const resolvedAccent = accentProp ?? emphasis === \"primary\";\n  const defaultBackground: PanelBackground =\n    emphasis === \"ghost\" ? \"transparent\" : \"surface.soft\";\n  const background: PanelBackground = backgroundProp ?? defaultBackground;\n\n  const defaultBorder: PanelBorder =\n    emphasis === \"ghost\" ? \"none\" : emphasis === \"muted\" ? \"muted\" : \"accent\";\n  const border: PanelBorder = borderProp ?? defaultBorder;\n\n  // Shape drives radius fallback (circle → full, square → size-scaled to\n  // match button radii) unless user overrides.\n  const radius: AvatarRadius =\n    radiusProp ?? (shape === \"circle\" ? \"full\" : sizeToRadius[size]);\n\n  // Panel owns padding; avatar never pads at the root — inner slots own spacing.\n  const padding = paddingProp ?? \"none\";\n\n  // Avatar \"ghost\" emphasis has no panel analogue; map to secondary so panel\n  // suppresses primary colouring and avatar's own rule (color:inherit) wins.\n  const panelEmphasis: PanelEmphasis | undefined =\n    emphasis === \"ghost\" ? \"secondary\" : undefined;\n\n  const classes = avatarStyles.raw({ emphasis, size, shape, feedback });\n\n  const panelApi = connectPanel({\n    dataComponent: \"avatar\",\n    dataAttrs: { shape, emphasis, size, feedback },\n    as: \"span\",\n    background,\n    accent: resolvedAccent,\n    emphasis: panelEmphasis,\n    feedback,\n    border,\n    translucent: translucent ?? false,\n    radius,\n    radiusTop,\n    radiusBottom,\n    radiusLeft,\n    radiusRight,\n    padding,\n    shadow,\n    interactive,\n    passThrough: {\n      root: {\n        style: css.raw(classes.root, passThrough?.root?.style),\n        props: passThrough?.root?.props,\n      },\n    },\n    class: className,\n    ...restProps,\n  });\n\n  const initials = getAvatarInitials(name);\n  const showImage = Boolean(src);\n\n  const imageProps = showImage\n    ? {\n        class: css(classes.image, passThrough?.image?.style),\n        src: src!,\n        alt: alt ?? name ?? \"\",\n        \"data-slot\": \"image\" as const,\n      }\n    : undefined;\n\n  const fallbackProps = {\n    class: css(classes.fallback, passThrough?.fallback?.style),\n    \"aria-hidden\": showImage ? (\"true\" as const) : undefined,\n    \"data-slot\": \"fallback\" as const,\n  };\n\n  return {\n    rootProps: panelApi.rootProps as AvatarApi[\"rootProps\"],\n    classes: {\n      image: css(classes.image, passThrough?.image?.style),\n      fallback: css(classes.fallback, passThrough?.fallback?.style),\n    },\n    initials,\n    showImage,\n    imageProps,\n    fallbackProps,\n  };\n}\n"],"mappings":";;;;AAgBA,MAAa,iBAAiB;CAC5B,UAAU;CACV,MAAM;CACN,OAAO;CACP,UAAU;CACX;AAMD,MAAM,eAAiD;CACrD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;;;;;AAMD,SAAgB,kBAAkB,MAAuB;AACvD,KAAI,CAAC,KAAM,QAAO;CAClB,MAAM,UAAU,KAAK,MAAM;AAG3B,KAAI,WAAW,KAAK,QAAQ,CAAE,QAAO,QAAQ,MAAM,GAAG,EAAE;CACxD,MAAM,QAAQ,QAAQ,MAAM,OAAO,CAAC,OAAO,QAAQ;AACnD,KAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,KAAI,MAAM,WAAW,EACnB,QAAO,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,aAAa;AAE3C,SAAQ,MAAM,GAAG,KAAK,MAAM,MAAM,SAAS,GAAG,IAAI,aAAa;;AAGjE,SAAgB,cAAc,SAA0C;CACtE,MAAM,EACJ,WAAW,eAAe,UAC1B,OAAO,eAAe,MACtB,QAAQ,eAAe,OACvB,UAAU,cACV,KACA,KACA,MACA,YAAY,gBACZ,QAAQ,YACR,QAAQ,YACR,SAAS,aACT,QAAQ,YACR,aACA,WACA,cACA,YACA,aACA,QACA,aACA,aACA,OAAO,WACP,GAAG,cACD;CAGJ,MAAM,WACJ,iBAAiB,aAAa,YAAY,YAAY;CAGxD,MAAM,iBAAiB,cAAc,aAAa;CAGlD,MAAM,aAA8B,mBADlC,aAAa,UAAU,gBAAgB;CAKzC,MAAM,SAAsB,eAD1B,aAAa,UAAU,SAAS,aAAa,UAAU,UAAU;CAKnE,MAAM,SACJ,eAAe,UAAU,WAAW,SAAS,aAAa;CAG5D,MAAM,UAAU,eAAe;CAI/B,MAAM,gBACJ,aAAa,UAAU,cAAc,KAAA;CAEvC,MAAM,UAAU,aAAa,IAAI;EAAE;EAAU;EAAM;EAAO;EAAU,CAAC;CAErE,MAAM,WAAW,aAAa;EAC5B,eAAe;EACf,WAAW;GAAE;GAAO;GAAU;GAAM;GAAU;EAC9C,IAAI;EACJ;EACA,QAAQ;EACR,UAAU;EACV;EACA;EACA,aAAa,eAAe;EAC5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aAAa,EACX,MAAM;GACJ,OAAO,IAAI,IAAI,QAAQ,MAAM,aAAa,MAAM,MAAM;GACtD,OAAO,aAAa,MAAM;GAC3B,EACF;EACD,OAAO;EACP,GAAG;EACJ,CAAC;CAEF,MAAM,WAAW,kBAAkB,KAAK;CACxC,MAAM,YAAY,QAAQ,IAAI;CAE9B,MAAM,aAAa,YACf;EACE,OAAO,IAAI,QAAQ,OAAO,aAAa,OAAO,MAAM;EAC/C;EACL,KAAK,OAAO,QAAQ;EACpB,aAAa;EACd,GACD,KAAA;CAEJ,MAAM,gBAAgB;EACpB,OAAO,IAAI,QAAQ,UAAU,aAAa,UAAU,MAAM;EAC1D,eAAe,YAAa,SAAmB,KAAA;EAC/C,aAAa;EACd;AAED,QAAO;EACL,WAAW,SAAS;EACpB,SAAS;GACP,OAAO,IAAI,QAAQ,OAAO,aAAa,OAAO,MAAM;GACpD,UAAU,IAAI,QAAQ,UAAU,aAAa,UAAU,MAAM;GAC9D;EACD;EACA;EACA;EACA;EACD"}

package/dist/src/types.d.ts

@@ -0,0 +1,2 @@
+import { _ as AvatarShape, a as AvatarBorder, b as ConnectAvatarOptions, c as AvatarFallbackProps, d as AvatarPadding, f as AvatarPanelProps, g as AvatarShadow, h as AvatarRootProps, i as AvatarBaseProps, l as AvatarFeedback, m as AvatarRadius, n as AvatarBackground, o as AvatarClasses, p as AvatarPassThrough, r as AvatarBaseCommon, s as AvatarEmphasis, t as AvatarApi, u as AvatarImageProps, v as AvatarSize, x as ElementAttributes, y as AvatarSlotPassThrough } from "../types-CyUSJ_FB.js";
+export { AvatarApi, AvatarBackground, AvatarBaseCommon, AvatarBaseProps, AvatarBorder, AvatarClasses, AvatarEmphasis, AvatarFallbackProps, AvatarFeedback, AvatarImageProps, AvatarPadding, AvatarPanelProps, AvatarPassThrough, AvatarRadius, AvatarRootProps, AvatarShadow, AvatarShape, AvatarSize, AvatarSlotPassThrough, ConnectAvatarOptions, ElementAttributes };

package/dist/src/types.js

@@ -0,0 +1 @@
+export {};