@spark-ui/components 17.2.3-beta.1 → 17.2.4-beta.0

package/dist/avatar/index.mjs

@@ -1,229 +1,192 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cx as p } from "class-variance-authority";
-import * as g from "react";
-import { useState as k, useEffect as B } from "react";
-import { S as b } from "../Slot-DLY1rJrG.mjs";
-import { PenOutline as O } from "@spark-ui/icons/PenOutline";
-import { I as R } from "../Icon-BO327oHU.mjs";
-import { I as S } from "../IconButton-DdB3Pq13.mjs";
-const z = g.createContext(void 0), f = () => {
-  const t = g.useContext(z);
-  if (!t)
-    throw new Error("useAvatarContext must be used within an Avatar component");
-  return t;
-}, N = {
-  xs: 24,
-  sm: 32,
-  md: 40,
-  lg: 56,
-  xl: 64,
-  // default
-  "2xl": 96
-}, C = g.forwardRef(
-  ({
-    className: t,
-    size: a = "xl",
-    isOnline: n = !1,
-    onlineText: e,
-    username: s,
-    asChild: l,
-    children: i,
-    shape: c = "circle",
-    ...o
-  }, u) => {
-    const d = l ? b : "div", r = g.useMemo(
-      () => ({
-        size: a,
-        isOnline: n,
-        onlineText: e,
-        username: s,
-        shape: c,
-        pixelSize: N[a]
-      }),
-      [a, n, s, c, e]
-    );
-    return /* @__PURE__ */ m(z.Provider, { value: r, children: /* @__PURE__ */ m(
-      d,
-      {
-        ref: u,
-        style: {
-          width: N[a],
-          height: N[a]
-        },
-        "data-spark-component": "avatar",
-        className: p("relative inline-flex items-center justify-center", t),
-        ...o,
-        children: i
-      }
-    ) });
-  }
-);
-C.displayName = "Avatar";
-const I = ({
-  className: t,
-  asChild: a,
-  src: n,
-  onLoad: e,
-  onError: s,
-  ...l
-}) => {
-  const { username: i, isOnline: c, onlineText: o } = f(), u = a ? b : "img", [d, r] = k(!1), y = c && o ? `${i} (${o})` : i;
-  if (B(() => {
-    r(!1);
-  }, [n]), !n)
-    return null;
-  const h = (A) => {
-    r(!0), e?.(A);
-  }, x = (A) => {
-    r(!1), s?.(A);
-  };
-  return /* @__PURE__ */ m(
-    u,
-    {
-      "aria-hidden": !0,
-      className: p(
-        "absolute inset-0 size-full",
-        "object-cover",
-        { "transition-all duration-300 group-hover:scale-120": l.onClick },
-        "focus-visible:u-outline",
-        d ? "block" : "hidden",
-        t
-      ),
-      alt: y,
-      src: n,
-      onLoad: h,
-      onError: x,
-      ...l
-    }
-  );
+import { Slot as e } from "../slot/index.mjs";
+import { t } from "../icon-D05Uqh8_.mjs";
+import { t as n } from "../icon-button-6p3O7NIm.mjs";
+import { cx as r } from "class-variance-authority";
+import * as i from "react";
+import { useEffect as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { PenOutline as c } from "@spark-ui/icons/PenOutline";
+//#region src/avatar/context.ts
+var l = i.createContext(void 0), u = () => {
+	let e = i.useContext(l);
+	if (!e) throw Error("useAvatarContext must be used within an Avatar component");
+	return e;
+}, d = {
+	xs: 24,
+	sm: 32,
+	md: 40,
+	lg: 56,
+	xl: 64,
+	"2xl": 96
+}, f = i.forwardRef(({ className: t, size: n = "xl", isOnline: a = !1, onlineText: o, username: c, asChild: u, children: f, shape: p = "circle", ...m }, h) => {
+	let g = u ? e : "div", _ = i.useMemo(() => ({
+		size: n,
+		isOnline: a,
+		onlineText: o,
+		username: c,
+		shape: p,
+		pixelSize: d[n]
+	}), [
+		n,
+		a,
+		c,
+		p,
+		o
+	]);
+	return /* @__PURE__ */ s(l.Provider, {
+		value: _,
+		children: /* @__PURE__ */ s(g, {
+			ref: h,
+			style: {
+				width: d[n],
+				height: d[n]
+			},
+			"data-spark-component": "avatar",
+			className: r("relative inline-flex items-center justify-center", t),
+			...m,
+			children: f
+		})
+	});
+});
+f.displayName = "Avatar";
+//#endregion
+//#region src/avatar/AvatarAction.tsx
+var p = ({ className: i, children: a, asChild: o, angle: l = 135, ariaLabel: d, ...f }) => {
+	let p = o ? e : n, { pixelSize: m, shape: h } = u();
+	function g(e) {
+		let t = (90 - l) * Math.PI / 180, n = e / 2;
+		return {
+			x: n + n * Math.cos(t),
+			y: n - n * Math.sin(t)
+		};
+	}
+	let _ = g(m), v = o;
+	return /* @__PURE__ */ s(p, {
+		"data-spark-component": "avatar-action",
+		style: {
+			position: "absolute",
+			...h === "circle" ? {
+				left: `${_.x}px`,
+				top: `${_.y}px`
+			} : {},
+			...h === "square" ? {
+				right: "0px",
+				bottom: "0px"
+			} : {}
+		},
+		className: r("z-raised", h === "circle" ? "-translate-x-1/2 -translate-y-1/2" : "translate-x-1/4 translate-y-1/4", { "shadow-sm": !v }, i),
+		"aria-label": d,
+		title: d,
+		...v ? {} : {
+			size: "sm",
+			intent: "support",
+			design: "contrast"
+		},
+		...f,
+		children: a || /* @__PURE__ */ s(t, {
+			size: "sm",
+			children: /* @__PURE__ */ s(c, {})
+		})
+	});
 };
-I.displayName = "AvatarImage";
-const P = ({
-  className: t,
-  children: a,
-  asChild: n,
-  angle: e = 135,
-  ariaLabel: s,
-  ...l
-}) => {
-  const i = n ? b : S, { pixelSize: c, shape: o } = f();
-  function u(y) {
-    const h = (90 - e) * Math.PI / 180, x = y / 2;
-    return {
-      x: x + x * Math.cos(h),
-      y: x - x * Math.sin(h)
-    };
-  }
-  const d = u(c), r = n;
-  return /* @__PURE__ */ m(
-    i,
-    {
-      "data-spark-component": "avatar-action",
-      style: {
-        position: "absolute",
-        ...o === "circle" ? { left: `${d.x}px`, top: `${d.y}px` } : {},
-        ...o === "square" ? { right: "0px", bottom: "0px" } : {}
-      },
-      className: p(
-        "z-raised",
-        o === "circle" ? "-translate-x-1/2 -translate-y-1/2" : "translate-x-1/4 translate-y-1/4",
-        { "shadow-sm": !r },
-        t
-      ),
-      "aria-label": s,
-      title: s,
-      ...r ? {} : { size: "sm", intent: "support", design: "contrast" },
-      ...l,
-      children: a || /* @__PURE__ */ m(R, { size: "sm", children: /* @__PURE__ */ m(O, {}) })
-    }
-  );
+p.displayName = "AvatarAction";
+//#endregion
+//#region src/avatar/AvatarImage.tsx
+var m = ({ className: t, asChild: n, src: i, onLoad: c, onError: l, ...d }) => {
+	let { username: f, isOnline: p, onlineText: m } = u(), h = n ? e : "img", [g, _] = o(!1), v = p && m ? `${f} (${m})` : f;
+	if (a(() => {
+		_(!1);
+	}, [i]), !i) return null;
+	let y = (e) => {
+		_(!0), c?.(e);
+	}, b = (e) => {
+		_(!1), l?.(e);
+	};
+	return /* @__PURE__ */ s(h, {
+		"aria-hidden": !0,
+		className: r("absolute inset-0 size-full", "object-cover", { "transition-all duration-300 group-hover:scale-120": d.onClick }, "focus-visible:u-outline", g ? "block" : "hidden", t),
+		alt: v,
+		src: i,
+		onLoad: y,
+		onError: b,
+		...d
+	});
 };
-P.displayName = "AvatarAction";
-const M = ({ angle: t = 135, ...a }) => {
-  const { isOnline: n, pixelSize: e, shape: s, onlineText: l, size: i } = f();
-  if (!n) return null;
-  function c(u) {
-    const d = (90 - t) * Math.PI / 180, r = u / 2;
-    return {
-      x: r + r * Math.cos(d),
-      y: r - r * Math.sin(d)
-    };
-  }
-  const o = c(e);
-  return /* @__PURE__ */ m(
-    "div",
-    {
-      "data-spark-component": "avatar-online-badge",
-      role: "status",
-      "aria-label": l,
-      style: {
-        ...s === "circle" ? { left: `${o.x}px`, top: `${o.y}px` } : { right: "0px", bottom: "0px" }
-      },
-      className: p(
-        "bg-success outline-surface absolute rounded-full",
-        s === "circle" ? "-translate-x-1/2 -translate-y-1/2" : "translate-x-1/4 translate-y-1/4",
-        ["lg", "xl", "2xl"].includes(i) ? p("size-sz-12 outline-4") : p("size-sz-8 outline-2")
-      ),
-      ...a
-    }
-  );
+m.displayName = "AvatarImage";
+//#endregion
+//#region src/avatar/AvatarOnlineBadge.tsx
+var h = ({ angle: e = 135, ...t }) => {
+	let { isOnline: n, pixelSize: i, shape: a, onlineText: o, size: c } = u();
+	if (!n) return null;
+	function l(t) {
+		let n = (90 - e) * Math.PI / 180, r = t / 2;
+		return {
+			x: r + r * Math.cos(n),
+			y: r - r * Math.sin(n)
+		};
+	}
+	let d = l(i);
+	return /* @__PURE__ */ s("div", {
+		"data-spark-component": "avatar-online-badge",
+		role: "status",
+		"aria-label": o,
+		style: { ...a === "circle" ? {
+			left: `${d.x}px`,
+			top: `${d.y}px`
+		} : {
+			right: "0px",
+			bottom: "0px"
+		} },
+		className: r("bg-success outline-surface absolute rounded-full", a === "circle" ? "-translate-x-1/2 -translate-y-1/2" : "translate-x-1/4 translate-y-1/4", [
+			"lg",
+			"xl",
+			"2xl"
+		].includes(c) ? r("size-sz-12 outline-4") : r("size-sz-8 outline-2")),
+		...t
+	});
 };
-M.displayName = "AvatarOnlineBadge";
-const $ = ({ asChild: t, children: a, className: n, ...e }) => {
-  const { shape: s, isOnline: l, onlineText: i, username: c } = f(), o = t ? b : "div", u = l && i ? `${c} (${i})` : c;
-  return /* @__PURE__ */ m(
-    o,
-    {
-      ...!t && { role: "img" },
-      "aria-label": u,
-      title: u,
-      className: p(
-        "group default:border-outline relative size-full overflow-hidden",
-        "focus-visible:u-outline",
-        {
-          "default:rounded-full": s === "circle",
-          "default:rounded-md": s === "square",
-          "hover:opacity-dim-1 cursor-pointer": t || e.onClick
-        },
-        n
-      ),
-      ...e,
-      children: a
-    }
-  );
+h.displayName = "AvatarOnlineBadge";
+//#endregion
+//#region src/avatar/AvatarPlaceholder.tsx
+var g = ({ className: e, children: t, ...n }) => {
+	let { size: i, username: a } = u(), o = a?.charAt(0);
+	return /* @__PURE__ */ s("div", {
+		"aria-hidden": !0,
+		className: r("absolute inset-0 flex size-full items-center justify-center", "default:bg-neutral default:text-on-neutral", {
+			"text-display-1": i === "2xl",
+			"text-display-2": ["xl", "lg"].includes(i),
+			"text-display-3": i === "md",
+			"text-headline-2": i === "sm",
+			"text-body-2 font-bold": i === "xs"
+		}, e),
+		...n,
+		children: t || o
+	});
 };
-$.displayName = "AvatarUser";
-const w = ({ className: t, children: a, ...n }) => {
-  const { size: e, username: s } = f(), l = s?.charAt(0);
-  return /* @__PURE__ */ m(
-    "div",
-    {
-      "aria-hidden": !0,
-      className: p(
-        "absolute inset-0 flex size-full items-center justify-center",
-        "default:bg-neutral default:text-on-neutral",
-        {
-          "text-display-1": e === "2xl",
-          "text-display-2": ["xl", "lg"].includes(e),
-          "text-display-3": e === "md",
-          "text-headline-2": e === "sm",
-          "text-body-2 font-bold": e === "xs"
-        },
-        t
-      ),
-      ...n,
-      children: a || l
-    }
-  );
+g.displayName = "AvatarPlaceholder";
+//#endregion
+//#region src/avatar/AvatarUser.tsx
+var _ = ({ asChild: t, children: n, className: i, ...a }) => {
+	let { shape: o, isOnline: c, onlineText: l, username: d } = u(), f = t ? e : "div", p = c && l ? `${d} (${l})` : d;
+	return /* @__PURE__ */ s(f, {
+		...!t && { role: "img" },
+		"aria-label": p,
+		title: p,
+		className: r("group default:border-outline relative size-full overflow-hidden", "focus-visible:u-outline", {
+			"default:rounded-full": o === "circle",
+			"default:rounded-md": o === "square",
+			"hover:opacity-dim-1 cursor-pointer": t || a.onClick
+		}, i),
+		...a,
+		children: n
+	});
 };
-w.displayName = "AvatarPlaceholder";
-const v = C;
-v.Image = I;
-v.Action = P;
-v.OnlineBadge = M;
-v.User = $;
-v.Placeholder = w;
-export {
-  v as Avatar
-};
-//# sourceMappingURL=index.mjs.map
+_.displayName = "AvatarUser";
+//#endregion
+//#region src/avatar/index.ts
+var v = f;
+v.Image = m, v.Action = p, v.OnlineBadge = h, v.User = _, v.Placeholder = g;
+//#endregion
+export { v as Avatar };
+
+//# sourceMappingURL=index.mjs.map

package/dist/avatar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n  const context = React.useContext(AvatarContext)\n  if (!context) {\n    throw new Error('useAvatarContext must be used within an Avatar component')\n  }\n  return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64, // default\n  '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      className,\n      size = 'xl',\n      isOnline = false,\n      onlineText,\n      username,\n      asChild,\n      children,\n      shape = 'circle',\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'div'\n    const contextValue = React.useMemo(\n      () => ({\n        size,\n        isOnline,\n        onlineText,\n        username,\n        shape,\n        pixelSize: sizeMap[size],\n      }),\n      [size, isOnline, username, shape, onlineText]\n    )\n\n    return (\n      <AvatarContext.Provider value={contextValue}>\n        <Comp\n          ref={ref}\n          style={{\n            width: sizeMap[size],\n            height: sizeMap[size],\n          }}\n          data-spark-component=\"avatar\"\n          className={cx('relative inline-flex items-center justify-center', className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </AvatarContext.Provider>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean\n}\n\nexport const AvatarImage = ({\n  className,\n  asChild,\n  src,\n  onLoad,\n  onError,\n  ...props\n}: AvatarImageProps) => {\n  const { username, isOnline, onlineText } = useAvatarContext()\n  const Comp = asChild ? Slot : 'img'\n\n  const [isVisible, setIsVisible] = useState(false)\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  // Reset visibility when src changes\n  useEffect(() => {\n    setIsVisible(false)\n  }, [src])\n\n  // Don't render the image if src is undefined or null\n  if (!src) {\n    return null\n  }\n\n  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(true)\n    onLoad?.(event)\n  }\n\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(false)\n    onError?.(event)\n  }\n\n  return (\n    <Comp\n      aria-hidden\n      className={cx(\n        'absolute inset-0 size-full',\n        'object-cover',\n        { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n        'focus-visible:u-outline',\n        isVisible ? 'block' : 'hidden',\n        className\n      )}\n      alt={accessibleName}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n  angle?: number\n  ariaLabel: string\n}\n\nexport const AvatarAction = ({\n  className,\n  children,\n  asChild,\n  angle = 135,\n  ariaLabel,\n  ...props\n}: AvatarActionProps) => {\n  const Comp = asChild ? Slot : IconButton\n  const { pixelSize, shape } = useAvatarContext()\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const position = getBadgePosition(pixelSize)\n\n  const isCustomElement = asChild\n\n  return (\n    <Comp\n      data-spark-component=\"avatar-action\"\n      style={{\n        position: 'absolute',\n        ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n        ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n      }}\n      className={cx(\n        'z-raised',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        { 'shadow-sm': !isCustomElement },\n        className\n      )}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n      {...props}\n    >\n      {children || (\n        <Icon size=\"sm\">\n          <PenOutline />\n        </Icon>\n      )}\n    </Comp>\n  )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\n\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n  const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n  if (!isOnline) return null\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const badgePosition = getBadgePosition(pixelSize)\n\n  return (\n    <div\n      data-spark-component=\"avatar-online-badge\"\n      role=\"status\"\n      aria-label={onlineText}\n      style={{\n        ...(shape === 'circle'\n          ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n          : { right: '0px', bottom: '0px' }),\n      }}\n      className={cx(\n        'bg-success outline-surface absolute rounded-full',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n  const { shape, isOnline, onlineText, username } = useAvatarContext()\n  const Comp = asChild ? Slot : 'div'\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  return (\n    <Comp\n      {...(!asChild && { role: 'img' })}\n      aria-label={accessibleName}\n      title={accessibleName}\n      className={cx(\n        'group default:border-outline relative size-full overflow-hidden',\n        'focus-visible:u-outline',\n        {\n          'default:rounded-full': shape === 'circle',\n          'default:rounded-md': shape === 'square',\n          'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n        },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n}\n\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n  const { size, username } = useAvatarContext()\n\n  const firstLetter = username?.charAt(0)\n\n  return (\n    <div\n      aria-hidden\n      className={cx(\n        'absolute inset-0 flex size-full items-center justify-center',\n        'default:bg-neutral default:text-on-neutral',\n        {\n          'text-display-1': size === '2xl',\n          'text-display-2': ['xl', 'lg'].includes(size),\n          'text-display-3': size === 'md',\n          'text-headline-2': size === 'sm',\n          'text-body-2 font-bold': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { Avatar } from './Avatar'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarUser } from './AvatarUser'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport type { AvatarProps } from './types'\n\nexport interface AvatarComponent\n  extends React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>> {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n}\n\nconst AvatarComponent = Avatar as AvatarComponent\n\nAvatarComponent.Image = AvatarImage\nAvatarComponent.Action = AvatarAction\nAvatarComponent.OnlineBadge = AvatarOnlineBadge\nAvatarComponent.User = AvatarUser\nAvatarComponent.Placeholder = AvatarPlaceholder\nexport { AvatarComponent as Avatar }\n"],"names":["AvatarContext","React","useAvatarContext","context","sizeMap","Avatar","className","size","isOnline","onlineText","username","asChild","children","shape","props","ref","Comp","Slot","contextValue","jsx","cx","AvatarImage","src","onLoad","onError","isVisible","setIsVisible","useState","accessibleName","useEffect","handleLoad","event","handleError","AvatarAction","angle","ariaLabel","IconButton","pixelSize","getBadgePosition","circleSize","angleRad","circleRadius","position","isCustomElement","Icon","PenOutline","AvatarOnlineBadge","badgePosition","AvatarUser","AvatarPlaceholder","firstLetter","AvatarComponent"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n  const context = React.useContext(AvatarContext)\n  if (!context) {\n    throw new Error('useAvatarContext must be used within an Avatar component')\n  }\n  return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64, // default\n  '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      className,\n      size = 'xl',\n      isOnline = false,\n      onlineText,\n      username,\n      asChild,\n      children,\n      shape = 'circle',\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'div'\n    const contextValue = React.useMemo(\n      () => ({\n        size,\n        isOnline,\n        onlineText,\n        username,\n        shape,\n        pixelSize: sizeMap[size],\n      }),\n      [size, isOnline, username, shape, onlineText]\n    )\n\n    return (\n      <AvatarContext.Provider value={contextValue}>\n        <Comp\n          ref={ref}\n          style={{\n            width: sizeMap[size],\n            height: sizeMap[size],\n          }}\n          data-spark-component=\"avatar\"\n          className={cx('relative inline-flex items-center justify-center', className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </AvatarContext.Provider>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n  angle?: number\n  ariaLabel: string\n}\n\nexport const AvatarAction = ({\n  className,\n  children,\n  asChild,\n  angle = 135,\n  ariaLabel,\n  ...props\n}: AvatarActionProps) => {\n  const Comp = asChild ? Slot : IconButton\n  const { pixelSize, shape } = useAvatarContext()\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const position = getBadgePosition(pixelSize)\n\n  const isCustomElement = asChild\n\n  return (\n    <Comp\n      data-spark-component=\"avatar-action\"\n      style={{\n        position: 'absolute',\n        ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n        ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n      }}\n      className={cx(\n        'z-raised',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        { 'shadow-sm': !isCustomElement },\n        className\n      )}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n      {...props}\n    >\n      {children || (\n        <Icon size=\"sm\">\n          <PenOutline />\n        </Icon>\n      )}\n    </Comp>\n  )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean\n}\n\nexport const AvatarImage = ({\n  className,\n  asChild,\n  src,\n  onLoad,\n  onError,\n  ...props\n}: AvatarImageProps) => {\n  const { username, isOnline, onlineText } = useAvatarContext()\n  const Comp = asChild ? Slot : 'img'\n\n  const [isVisible, setIsVisible] = useState(false)\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  // Reset visibility when src changes\n  useEffect(() => {\n    setIsVisible(false)\n  }, [src])\n\n  // Don't render the image if src is undefined or null\n  if (!src) {\n    return null\n  }\n\n  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(true)\n    onLoad?.(event)\n  }\n\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(false)\n    onError?.(event)\n  }\n\n  return (\n    <Comp\n      aria-hidden\n      className={cx(\n        'absolute inset-0 size-full',\n        'object-cover',\n        { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n        'focus-visible:u-outline',\n        isVisible ? 'block' : 'hidden',\n        className\n      )}\n      alt={accessibleName}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\n\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n  const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n  if (!isOnline) return null\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const badgePosition = getBadgePosition(pixelSize)\n\n  return (\n    <div\n      data-spark-component=\"avatar-online-badge\"\n      role=\"status\"\n      aria-label={onlineText}\n      style={{\n        ...(shape === 'circle'\n          ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n          : { right: '0px', bottom: '0px' }),\n      }}\n      className={cx(\n        'bg-success outline-surface absolute rounded-full',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n}\n\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n  const { size, username } = useAvatarContext()\n\n  const firstLetter = username?.charAt(0)\n\n  return (\n    <div\n      aria-hidden\n      className={cx(\n        'absolute inset-0 flex size-full items-center justify-center',\n        'default:bg-neutral default:text-on-neutral',\n        {\n          'text-display-1': size === '2xl',\n          'text-display-2': ['xl', 'lg'].includes(size),\n          'text-display-3': size === 'md',\n          'text-headline-2': size === 'sm',\n          'text-body-2 font-bold': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n  const { shape, isOnline, onlineText, username } = useAvatarContext()\n  const Comp = asChild ? Slot : 'div'\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  return (\n    <Comp\n      {...(!asChild && { role: 'img' })}\n      aria-label={accessibleName}\n      title={accessibleName}\n      className={cx(\n        'group default:border-outline relative size-full overflow-hidden',\n        'focus-visible:u-outline',\n        {\n          'default:rounded-full': shape === 'circle',\n          'default:rounded-md': shape === 'square',\n          'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n        },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { Avatar } from './Avatar'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport { AvatarUser } from './AvatarUser'\nimport type { AvatarProps } from './types'\n\nexport interface AvatarComponent extends React.ForwardRefExoticComponent<\n  AvatarProps & React.RefAttributes<HTMLDivElement>\n> {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n}\n\nconst AvatarComponent = Avatar as AvatarComponent\n\nAvatarComponent.Image = AvatarImage\nAvatarComponent.Action = AvatarAction\nAvatarComponent.OnlineBadge = AvatarOnlineBadge\nAvatarComponent.User = AvatarUser\nAvatarComponent.Placeholder = AvatarPlaceholder\nexport { AvatarComponent as Avatar }\n"],"mappings":"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"}

package/dist/badge/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("@spark-ui/internal-utils"),f=require("class-variance-authority"),g=f.cva(["inline-flex h-fit","empty:p-0","text-center font-bold","rounded-full box-content"],{variants:{intent:c.makeVariants({main:["bg-main","text-on-main","border-surface"],support:["bg-support","text-on-support","border-surface"],accent:["bg-accent","text-on-accent","border-surface"],success:["bg-success","text-on-success","border-surface"],alert:["bg-alert","text-on-alert","border-surface"],danger:["bg-error","text-on-error","border-surface"],info:["bg-info","text-on-info","border-surface"],neutral:["bg-neutral","text-on-neutral","border-surface"],surface:["bg-surface","text-on-surface","border-surface"]}),size:c.makeVariants({sm:["text-small","px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]","empty:size-sz-8"],md:["text-caption","px-md py-sm","empty:size-sz-16"]}),type:{relative:["absolute right-0 border-md","translate-x-1/2 -translate-y-1/2"],standalone:[]}},defaultVariants:{intent:"danger",size:"md",type:"relative"}}),i=({intent:e="danger",size:t="md",type:o="relative",count:a,overflowCount:s=99,"aria-label":n,className:d,...u})=>{const p=a&&a>s,b=typeof n=="function"?n({count:a,overflowCount:s}):n,m={...u,"aria-label":b};return r.jsx("span",{"data-spark-component":"badge",role:"status",className:g({intent:e,size:t,type:o,className:d}),...m,children:p?`${s}+`:a})};i.displayName="BadgeItem";const l=({children:e,...t})=>!e?r.jsx(i,{type:"standalone",...t}):r.jsxs("div",{className:"relative inline-flex",children:[e,r.jsx(i,{...t})]});l.displayName="Badge";exports.Badge=l;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react/jsx-runtime`),n=require(`@spark-ui/internal-utils`);var r=(0,e.cva)([`inline-flex h-fit`,`empty:p-0`,`text-center font-bold`,`rounded-full box-content`],{variants:{intent:(0,n.makeVariants)({main:[`bg-main`,`text-on-main`,`border-surface`],support:[`bg-support`,`text-on-support`,`border-surface`],accent:[`bg-accent`,`text-on-accent`,`border-surface`],success:[`bg-success`,`text-on-success`,`border-surface`],alert:[`bg-alert`,`text-on-alert`,`border-surface`],danger:[`bg-error`,`text-on-error`,`border-surface`],info:[`bg-info`,`text-on-info`,`border-surface`],neutral:[`bg-neutral`,`text-on-neutral`,`border-surface`],surface:[`bg-surface`,`text-on-surface`,`border-surface`]}),size:(0,n.makeVariants)({sm:[`text-small`,`px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]`,`empty:size-sz-8`],md:[`text-caption`,`px-md py-sm`,`empty:size-sz-16`]}),type:{relative:[`absolute right-0 border-md`,`translate-x-1/2 -translate-y-1/2`],standalone:[]}},defaultVariants:{intent:`danger`,size:`md`,type:`relative`}}),i=({intent:e=`danger`,size:n=`md`,type:i=`relative`,count:a,overflowCount:o=99,"aria-label":s,className:c,...l})=>{let u=a&&a>o,d=typeof s==`function`?s({count:a,overflowCount:o}):s,f={...l,"aria-label":d};return(0,t.jsx)(`span`,{"data-spark-component":`badge`,role:`status`,className:r({intent:e,size:n,type:i,className:c}),...f,children:u?`${o}+`:a})};i.displayName=`BadgeItem`;var a=({children:e,...n})=>e?(0,t.jsxs)(`div`,{className:`relative inline-flex`,children:[e,(0,t.jsx)(i,{...n})]}):(0,t.jsx)(i,{type:`standalone`,...n});a.displayName=`Badge`,exports.Badge=a;
+//# sourceMappingURL=index.js.map

package/dist/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n        md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>,\n    StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"names":["styles","cva","makeVariants","BadgeItem","intent","size","type","count","overflowCount","label","className","others","hasOverflow","ariaLabel","props","jsx","Badge","children","jsxs"],"mappings":"iMAGaA,EAASC,EAAAA,IACpB,CAAC,oBAAqB,YAAa,wBAAyB,0BAA0B,EACtF,CACE,SAAU,CAKR,OAAQC,EAAAA,aAGN,CACA,KAAM,CAAC,UAAW,eAAgB,gBAAgB,EAClD,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,EAC3D,OAAQ,CAAC,YAAa,iBAAkB,gBAAgB,EACxD,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,EAC3D,MAAO,CAAC,WAAY,gBAAiB,gBAAgB,EACrD,OAAQ,CAAC,WAAY,gBAAiB,gBAAgB,EACtD,KAAM,CAAC,UAAW,eAAgB,gBAAgB,EAClD,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,EAC3D,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,CAAA,CAC5D,EAKD,KAAMA,EAAAA,aAAmC,CACvC,GAAI,CAAC,aAAc,oDAAqD,iBAAiB,EACzF,GAAI,CAAC,eAAgB,cAAe,kBAAkB,CAAA,CACvD,EAKD,KAAM,CACJ,SAAU,CAAC,6BAA8B,kCAAkC,EAC3E,WAAY,CAAA,CAAC,CACf,EAEF,gBAAiB,CACf,OAAQ,SACR,KAAM,KACN,KAAM,UAAA,CACR,CAEJ,ECjBaC,EAAY,CAAC,CACxB,OAAAC,EAAS,SACT,KAAAC,EAAO,KACP,KAAAC,EAAO,WACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,aAAcC,EACd,UAAAC,EACA,GAAGC,CACL,IAAsB,CACpB,MAAMC,EAAcL,GAASA,EAAQC,EAC/BK,EAAY,OAAOJ,GAAU,WAAaA,EAAM,CAAE,MAAAF,EAAO,cAAAC,CAAA,CAAe,EAAIC,EAC5EK,EAAQ,CAAE,GAAGH,EAAQ,aAAcE,CAAA,EAEzC,OACEE,EAAAA,IAAC,OAAA,CACC,uBAAqB,QACrB,KAAK,SACL,UAAWf,EAAO,CAChB,OAAAI,EACA,KAAAC,EACA,KAAAC,EACA,UAAAI,CAAA,CACD,EACA,GAAGI,EAEH,SAAAF,EAAc,GAAGJ,CAAa,IAAMD,CAAA,CAAA,CAG3C,EAEAJ,EAAU,YAAc,YCtDjB,MAAMa,EAAQ,CAAC,CAAE,SAAAC,EAAU,GAAGH,KACd,CAACG,EAGpBF,EAAAA,IAACZ,EAAA,CAAU,KAAK,aAAc,GAAGW,CAAA,CAAO,EAExCI,EAAAA,KAAC,MAAA,CAAI,UAAU,uBACZ,SAAA,CAAAD,EACDF,MAACZ,EAAA,CAAW,GAAGW,CAAA,CAAO,CAAA,EACxB,EAIJE,EAAM,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n        md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":"kNAGA,IAAa,GAAA,EAAA,EAAA,KACX,CAAC,oBAAqB,YAAa,wBAAyB,2BAA2B,CACvF,CACE,SAAU,CAKR,QAAA,EAAA,EAAA,cAGE,CACA,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,OAAQ,CAAC,YAAa,iBAAkB,iBAAiB,CACzD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,MAAO,CAAC,WAAY,gBAAiB,iBAAiB,CACtD,OAAQ,CAAC,WAAY,gBAAiB,iBAAiB,CACvD,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC7D,CAAC,CAKF,MAAA,EAAA,EAAA,cAAyC,CACvC,GAAI,CAAC,aAAc,oDAAqD,kBAAkB,CAC1F,GAAI,CAAC,eAAgB,cAAe,mBAAmB,CACxD,CAAC,CAKF,KAAM,CACJ,SAAU,CAAC,6BAA8B,mCAAmC,CAC5E,WAAY,EAAE,CACf,CACF,CACD,gBAAiB,CACf,OAAQ,SACR,KAAM,KACN,KAAM,WACP,CACF,CACF,CClBY,GAAa,CACxB,SAAS,SACT,OAAO,KACP,OAAO,WACP,QACA,gBAAgB,GAChB,aAAc,EACd,YACA,GAAG,KACiB,CACpB,IAAM,EAAc,GAAS,EAAQ,EAC/B,EAAY,OAAO,GAAU,WAAa,EAAM,CAAE,QAAO,gBAAe,CAAC,CAAG,EAC5E,EAAQ,CAAE,GAAG,EAAQ,aAAc,EAAW,CAEpD,OACE,EAAA,EAAA,KAAC,OAAD,CACE,uBAAqB,QACrB,KAAK,SACL,UAAW,EAAO,CAChB,SACA,OACA,OACA,YACD,CAAC,CACF,GAAI,WAEH,EAAc,GAAG,EAAc,GAAK,EAChC,CAAA,EAIX,EAAU,YAAc,YCrDxB,IAAa,GAAS,CAAE,WAAU,GAAG,KACb,GAKpB,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,gCAAf,CACG,GACD,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CACpB,IALN,EAAA,EAAA,KAAC,EAAD,CAAW,KAAK,aAAa,GAAI,EAAS,CAAA,CAS9C,EAAM,YAAc"}