'use client';
import { jsxs as z, jsx as s } from "react/jsx-runtime";
import { useTheme as I } from "../../../theme/context.js";
import { getColorVariant as $ } from "../../../theme/styled.js";
import { css as r } from "@emotion/react";
import a from "@emotion/styled";
import h, { useState as S, useEffect as W } from "react";
const D = (t) => {
  const { theme: e, size: o = "md" } = t;
  switch (o) {
    case "xs":
      return r`
        width: ${e.spacing[6]};
        height: ${e.spacing[6]};
        font-size: ${e.fontSizes.xs};
      `;
    case "sm":
      return r`
        width: ${e.spacing[8]};
        height: ${e.spacing[8]};
        font-size: ${e.fontSizes.sm};
      `;
    case "md":
      return r`
        width: ${e.spacing[10]};
        height: ${e.spacing[10]};
        font-size: ${e.fontSizes.base};
      `;
    case "lg":
      return r`
        width: ${e.spacing[12]};
        height: ${e.spacing[12]};
        font-size: ${e.fontSizes.lg};
      `;
    case "xl":
      return r`
        width: ${e.spacing[16]};
        height: ${e.spacing[16]};
        font-size: ${e.fontSizes.xl};
      `;
    default:
      return r``;
  }
}, k = (t) => {
  const { theme: e, radius: o = "full" } = t;
  switch (o) {
    case "none":
      return r`border-radius: ${e.borderRadius.none};`;
    case "sm":
      return r`border-radius: ${e.borderRadius.sm};`;
    case "md":
      return r`border-radius: ${e.borderRadius.md};`;
    case "lg":
      return r`border-radius: ${e.borderRadius.lg};`;
    case "full":
      return r`border-radius: ${e.borderRadius.full};`;
    default:
      return r`border-radius: ${e.borderRadius.full};`;
  }
}, F = (t) => {
  const { theme: e, color: o = "primary", isDisabled: i } = t;
  $(e, o, 500);
  const c = $(e, o, 100), l = $(e, o, 700);
  return i ? r`
      opacity: 0.5;
      cursor: not-allowed;
    ` : r`
    background-color: ${c};
    color: ${l};
  `;
}, E = a.div`
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: ${(t) => t.theme.fontWeights.medium};
  line-height: ${(t) => t.theme.lineHeights.tight};
  user-select: none;
  overflow: hidden;
  flex-shrink: 0;
  transition: all ${(t) => t.theme.transitions.normal};

  ${D}
  ${k}
  ${F}

  ${(t) => t.isBordered && r`
      border: 2px solid ${t.theme.colors.border.primary};
    `}

  /* Custom CSS prop */
  ${(t) => t.css}
`, N = a.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
  ${k}
`, V = a.span`
  font-weight: ${(t) => t.theme.fontWeights.semibold};
  text-transform: uppercase;
`, B = a.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: ${(t) => t.theme.colors.text.tertiary};
`, H = a.div`
  position: absolute;
  border: 2px solid ${(t) => t.theme.colors.background.primary};
  border-radius: ${(t) => t.theme.borderRadius.full};
  background-color: ${(t) => {
  const e = t.statusColor || "success";
  return $(t.theme, e, 500);
}};

  ${(t) => {
  const o = {
    xs: "8px",
    sm: "10px",
    md: "12px",
    lg: "14px",
    xl: "16px"
  }[t.size] || "12px";
  return r`
      width: ${o};
      height: ${o};
    `;
}}

  ${(t) => {
  switch (t.statusPlacement) {
    case "top-right":
      return r`
          top: 0;
          right: 0;
          transform: translate(25%, -25%);
        `;
    case "top-left":
      return r`
          top: 0;
          left: 0;
          transform: translate(-25%, -25%);
        `;
    case "bottom-right":
      return r`
          bottom: 0;
          right: 0;
          transform: translate(25%, 25%);
        `;
    case "bottom-left":
      return r`
          bottom: 0;
          left: 0;
          transform: translate(-25%, 25%);
        `;
    default:
      return r`
          bottom: 0;
          right: 0;
          transform: translate(25%, 25%);
        `;
  }
}}
`, T = () => /* @__PURE__ */ s("svg", { width: "60%", height: "60%", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ s("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }), U = (t) => t.split(" ").map((e) => e.charAt(0)).join("").slice(0, 2).toUpperCase(), q = h.forwardRef(
  ({
    src: t,
    alt: e,
    name: o,
    size: i = "md",
    color: c = "primary",
    radius: l = "full",
    isBordered: b = !1,
    isDisabled: v = !1,
    fallback: x,
    showStatus: y = !1,
    statusColor: m = "success",
    statusPlacement: u = "bottom-right",
    className: f,
    css: g,
    onError: w,
    ...d
  }, p) => {
    const { theme: n } = I(), [j, A] = S(!1), [G, C] = S(!1);
    W(() => {
      A(!1), C(!1);
    }, [t]);
    const L = () => {
      A(!0), w?.();
    }, M = () => {
      C(!0);
    }, P = {
      ...d,
      size: i,
      color: c,
      radius: l,
      isBordered: b,
      isDisabled: v,
      className: f,
      css: g
    };
    return /* @__PURE__ */ z(E, { theme: n, ref: p, ...P, children: [
      t && !j ? /* @__PURE__ */ s(
        N,
        {
          theme: n,
          src: t,
          alt: e || o,
          radius: l,
          onError: L,
          onLoad: M,
          style: {
            opacity: G ? 1 : 0,
            transition: n.transitions.normal
          }
        }
      ) : o ? /* @__PURE__ */ s(V, { theme: n, children: U(o) }) : /* @__PURE__ */ s(B, { theme: n, children: x || /* @__PURE__ */ s(T, {}) }),
      y && /* @__PURE__ */ s(
        H,
        {
          theme: n,
          statusColor: m,
          statusPlacement: u,
          size: i
        }
      )
    ] });
  }
);
q.displayName = "Avatar";
const J = a.div`
  display: flex;
  align-items: center;

  ${(t) => t.css}
`, R = a.div`
  position: relative;
  margin-left: ${(t) => t.index > 0 ? `${t.spacing}px` : "0"};

  &:hover {
    z-index: 1;
  }
`, K = a(E)`
  background-color: ${(t) => t.theme.colors.neutral[200]};
  color: ${(t) => t.theme.colors.text.secondary};
  font-weight: ${(t) => t.theme.fontWeights.semibold};
`, O = h.forwardRef(
  ({
    children: t,
    max: e = 5,
    size: o = "md",
    spacing: i = -8,
    isBordered: c = !1,
    radius: l = "full",
    className: b,
    css: v,
    ...x
  }, y) => {
    const { theme: m } = I(), u = h.Children.toArray(t), f = u.slice(0, e), g = Math.max(0, u.length - e), w = {
      ...x,
      className: b,
      css: v
    };
    return /* @__PURE__ */ z(J, { theme: m, ref: y, ...w, children: [
      f.map((d, p) => {
        if (h.isValidElement(d)) {
          const n = {
            size: o,
            isBordered: c,
            radius: l,
            ...d.props
          };
          return /* @__PURE__ */ s(R, { spacing: i, index: p, children: h.cloneElement(d, n) }, p);
        }
        return d;
      }),
      g > 0 && /* @__PURE__ */ s(R, { spacing: i, index: f.length, children: /* @__PURE__ */ z(
        K,
        {
          theme: m,
          size: o,
          radius: l,
          isBordered: c,
          children: [
            "+",
            g
          ]
        }
      ) })
    ] });
  }
);
O.displayName = "AvatarGroup";
export {
  q as Avatar,
  O as AvatarGroup
};
//# sourceMappingURL=avatar.js.map
