nextuiq/dist/index5.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import { Avatar } from './index4.mjs';

const AvatarText = ({
  src,
  fallback,
  title,
  subtitle,
  size = "md",
  status,
  className = "",
  id = `avatar-text-${Math.random().toString(36).substr(2, 9)}`,
  titleId = `title-${id}`,
  subtitleId = `subtitle-${id}`
}) => {
  const textSizeClasses = {
    sm: "text-sm",
    md: "text-base",
    lg: "text-lg"
  };
  const statusText = status ? `User is ${status}` : void 0;
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "div",
    {
      className: `flex items-center gap-3 ${className}`,
      role: "group",
      "aria-labelledby": titleId,
      "aria-describedby": subtitle ? subtitleId : void 0,
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          Avatar,
          {
            src,
            fallback,
            size,
            status,
            "aria-hidden": "true",
            alt: statusText
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "h4",
            {
              id: titleId,
              className: `font-medium text-[oklch(var(--theme-foreground))] ${textSizeClasses[size]}`,
              children: title
            }
          ),
          subtitle && /* @__PURE__ */ jsxRuntimeExports.jsx(
            "p",
            {
              id: subtitleId,
              className: `text-[oklch(var(--theme-muted-foreground))] ${size === "lg" ? "text-base" : "text-sm"}`,
              children: subtitle
            }
          ),
          status && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: statusText })
        ] })
      ]
    }
  );
};

export { AvatarText };