@lucasbernardosn/react-ui 0.1.0 → 0.3.0

package/dist/components/display/avatar/avatar-fallback.js

@@ -0,0 +1,44 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { Icon } from "../icon/icon.js";
+import { useAvatarContext } from "./use-avatar-context.js";
+import { getInitials } from "@lucasbernardosn/ts-utils";
+import { jsx } from "react/jsx-runtime";
+import { UserIcon } from "@phosphor-icons/react";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/display/avatar/avatar-fallback.tsx
+/**
+* O que aparece sem a foto: as iniciais do `name` do `Avatar.Root` (primeiro e último nome) ou,
+* sem `name`, um ícone de pessoa. Com filhos, usa os filhos. A cor vem do `colorScheme` e da `variant` do `Root`.
+*
+* Fica com `aria-hidden`: o nome acessível é o `name` inteiro, no `Root`, e as iniciais lidas
+* sozinhas não dizem nada.
+*/
+const AvatarFallback = (props) => {
+	const { className, children, ...rest } = props;
+	const { name } = useAvatarContext();
+	const initials = getInitials(name ?? "");
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		"data-component": "Avatar.Fallback",
+		"aria-hidden": true,
+		className: mergeStateClassNames([
+			"absolute",
+			"inset-0",
+			"flex",
+			"items-center",
+			"justify-center",
+			"border",
+			"border-(--avatar-fallback-border)",
+			"rounded-full",
+			"bg-(--avatar-fallback-bg)",
+			"text-(--avatar-fallback-fg)",
+			"[&_svg]:size-[1.25em]"
+		], className),
+		...rest,
+		children: children ?? (initials === "" ? /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(UserIcon, {}) }) : initials)
+	});
+};
+AvatarFallback.displayName = "Avatar.Fallback";
+//#endregion
+export { AvatarFallback };
+
+//# sourceMappingURL=avatar-fallback.js.map

package/dist/components/display/avatar/avatar-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-fallback.js","names":["BaseAvatar"],"sources":["../../../../src/components/display/avatar/avatar-fallback.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { getInitials } from '@lucasbernardosn/ts-utils';\nimport { UserIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeStateClassNames } from '#utils';\nimport { useAvatarContext } from './use-avatar-context';\n\nexport type AvatarFallbackProps = BaseAvatar.Fallback.Props;\n\nexport type AvatarFallbackState = BaseAvatar.Fallback.State;\n\n/**\n * O que aparece sem a foto: as iniciais do `name` do `Avatar.Root` (primeiro e último nome) ou,\n * sem `name`, um ícone de pessoa. Com filhos, usa os filhos. A cor vem do `colorScheme` e da `variant` do `Root`.\n *\n * Fica com `aria-hidden`: o nome acessível é o `name` inteiro, no `Root`, e as iniciais lidas\n * sozinhas não dizem nada.\n */\nexport const AvatarFallback = (props: AvatarFallbackProps) => {\n  const { className, children, ...rest } = props;\n\n  const { name } = useAvatarContext();\n\n  const initials = getInitials(name ?? '');\n\n  return (\n    <BaseAvatar.Fallback\n      data-component=\"Avatar.Fallback\"\n      aria-hidden={true}\n      className={mergeStateClassNames(\n        [\n          'absolute',\n          'inset-0',\n\n          'flex',\n          'items-center',\n          'justify-center',\n\n          // A borda fica no fallback, e não no `Root`, para a foto não ganhar contorno.\n          'border',\n          'border-(--avatar-fallback-border)',\n          'rounded-full',\n\n          'bg-(--avatar-fallback-bg)',\n          'text-(--avatar-fallback-fg)',\n\n          '[&_svg]:size-[1.25em]',\n        ],\n        className,\n      )}\n      {...rest}\n    >\n      {children ??\n        (initials === '' ? <Icon render={<UserIcon />} /> : initials)}\n    </BaseAvatar.Fallback>\n  );\n};\n\nAvatarFallback.displayName = 'Avatar.Fallback';\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;CAEzC,MAAM,EAAE,SAAS,iBAAiB;CAElC,MAAM,WAAW,YAAY,QAAQ,EAAE;CAEvC,OACE,oBAACA,OAAW,UAAZ;EACE,kBAAe;EACf,eAAa;EACb,WAAW,qBACT;GACE;GACA;GAEA;GACA;GACA;GAGA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;EAEH,UAAA,aACE,aAAa,KAAK,oBAAC,MAAD,EAAM,QAAQ,oBAAC,UAAD,CAAW,CAAA,EAAI,CAAA,IAAI;CACnC,CAAA;AAEzB;AAEA,eAAe,cAAc"}

package/dist/components/display/avatar/avatar-image.d.ts

@@ -0,0 +1,18 @@
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/display/avatar/avatar-image.d.ts
+export type AvatarImageProps = Avatar.Image.Props;
+export type AvatarImageState = Avatar.Image.State;
+/**
+ * Foto do avatar, por cima do `Avatar.Fallback`, cortada no círculo. O Base UI só a mostra depois
+ * de carregar; com `keepMounted` (para `loading="lazy"` ou um otimizador de imagem), ela fica
+ * invisível enquanto carrega e se falhar, e o fallback aparece por baixo.
+ *
+ * Com `name` no `Avatar.Root`, o nome já vem dele: o `alt` fica vazio. Sem `name`, o `alt` diz quem
+ * é.
+ */
+export declare const AvatarImage: {
+  (props: AvatarImageProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=avatar-image.d.ts.map

package/dist/components/display/avatar/avatar-image.js

@@ -0,0 +1,33 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/display/avatar/avatar-image.tsx
+/**
+* Foto do avatar, por cima do `Avatar.Fallback`, cortada no círculo. O Base UI só a mostra depois
+* de carregar; com `keepMounted` (para `loading="lazy"` ou um otimizador de imagem), ela fica
+* invisível enquanto carrega e se falhar, e o fallback aparece por baixo.
+*
+* Com `name` no `Avatar.Root`, o nome já vem dele: o `alt` fica vazio. Sem `name`, o `alt` diz quem
+* é.
+*/
+const AvatarImage = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		"data-component": "Avatar.Image",
+		className: mergeStateClassNames([
+			"absolute",
+			"inset-0",
+			"z-1",
+			"size-full",
+			"object-cover",
+			"data-loading:invisible",
+			"data-error:invisible"
+		], className),
+		...rest
+	});
+};
+AvatarImage.displayName = "Avatar.Image";
+//#endregion
+export { AvatarImage };
+
+//# sourceMappingURL=avatar-image.js.map

package/dist/components/display/avatar/avatar-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-image.js","names":["BaseAvatar"],"sources":["../../../../src/components/display/avatar/avatar-image.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AvatarImageProps = BaseAvatar.Image.Props;\n\nexport type AvatarImageState = BaseAvatar.Image.State;\n\n/**\n * Foto do avatar, por cima do `Avatar.Fallback`, cortada no círculo. O Base UI só a mostra depois\n * de carregar; com `keepMounted` (para `loading=\"lazy\"` ou um otimizador de imagem), ela fica\n * invisível enquanto carrega e se falhar, e o fallback aparece por baixo.\n *\n * Com `name` no `Avatar.Root`, o nome já vem dele: o `alt` fica vazio. Sem `name`, o `alt` diz quem\n * é.\n */\nexport const AvatarImage = (props: AvatarImageProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAvatar.Image\n      data-component=\"Avatar.Image\"\n      className={mergeStateClassNames(\n        [\n          'absolute',\n          'inset-0',\n          // Por cima do fallback, seja qual for a ordem das partes.\n          'z-1',\n\n          'size-full',\n          'object-cover',\n\n          'data-loading:invisible',\n          'data-error:invisible',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAvatarImage.displayName = 'Avatar.Image';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,OAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GAEA;GAEA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}

package/dist/components/display/avatar/avatar-root-variants.d.ts

@@ -0,0 +1,39 @@
+import { ColorSchemeFull } from "../../../types/color-scheme.js";
+//#region src/components/display/avatar/avatar-root-variants.d.ts
+export type AvatarRootVariants = {
+  /**
+   * Cor do fallback. Sem ela, a cor vem do `name`: o mesmo nome sempre dá a mesma cor, entre as
+   * escalas do tema menos o gray; sem `name`, gray.
+   */
+  colorScheme?: ColorSchemeFull;
+  /**
+   * Diâmetro e tamanho das iniciais: `2xs` = 20px, `xs` = 24px, `sm` = 32px, `md` = 40px (a altura
+   * do `Button` `md`), `lg` = 48px e `xl` = 56px.
+   *
+   * @default 'md'
+   */
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   * Fundo e borda do fallback, como no `Badge`: `subtle` com fundo suave, `surface` com fundo suave
+   * e borda, `outline` só com borda e `solid` com o fundo cheio (passo 9) e o texto em contraste. A
+   * foto não muda.
+   *
+   * @default 'subtle'
+   */
+  variant?: 'subtle' | 'surface' | 'outline' | 'solid';
+};
+export declare const avatarRootDefaultVariants: Pick<Required<AvatarRootVariants>, 'size' | 'variant'>;
+/**
+ * O `colorScheme` só declara as cores (`--avatar-*`), e a `variant` escolhe quais delas o
+ * `Avatar.Fallback` usa, em `--avatar-fallback-bg`, `--avatar-fallback-fg` e
+ * `--avatar-fallback-border`. Assim o fallback não precisa de contexto, e uma cor nova é um bloco
+ * de variáveis. No `solid`, o texto é branco, menos nas escalas claras demais para ele (amber,
+ * yellow, sky, mint e lime), que levam preto; o gray é preto no tema claro e branco no escuro.
+ */
+export declare const avatarRootVariants: (props?: ({
+  colorScheme?: "ruby" | "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+  variant?: "solid" | "subtle" | "surface" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=avatar-root-variants.d.ts.map

package/dist/components/display/avatar/avatar-root-variants.js

@@ -0,0 +1,315 @@
+import { cva } from "class-variance-authority";
+//#region src/components/display/avatar/avatar-root-variants.ts
+const avatarRootDefaultVariants = {
+	size: "md",
+	variant: "subtle"
+};
+/**
+* O `colorScheme` só declara as cores (`--avatar-*`), e a `variant` escolhe quais delas o
+* `Avatar.Fallback` usa, em `--avatar-fallback-bg`, `--avatar-fallback-fg` e
+* `--avatar-fallback-border`. Assim o fallback não precisa de contexto, e uma cor nova é um bloco
+* de variáveis. No `solid`, o texto é branco, menos nas escalas claras demais para ele (amber,
+* yellow, sky, mint e lime), que levam preto; o gray é preto no tema claro e branco no escuro.
+*/
+const avatarRootVariants = cva([
+	"relative",
+	"isolate",
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	"align-middle",
+	"overflow-hidden",
+	"rounded-full",
+	"font-medium",
+	"leading-none",
+	"select-none"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--avatar-solid-bg:var(--color-black)]",
+				"dark:[--avatar-solid-bg:var(--color-white)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"dark:[--avatar-solid-fg:var(--color-black)]",
+				"[--avatar-fg:var(--color-gray-11)]",
+				"[--avatar-subtle-bg:var(--color-gray-4)]",
+				"[--avatar-surface-bg:var(--color-gray-3)]",
+				"[--avatar-surface-border:var(--color-gray-6)]",
+				"[--avatar-outline-border:var(--color-gray-7)]"
+			],
+			brand: [
+				"[--avatar-solid-bg:var(--color-brand-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-brand-11)]",
+				"[--avatar-subtle-bg:var(--color-brand-4)]",
+				"[--avatar-surface-bg:var(--color-brand-3)]",
+				"[--avatar-surface-border:var(--color-brand-6)]",
+				"[--avatar-outline-border:var(--color-brand-7)]"
+			],
+			bronze: [
+				"[--avatar-solid-bg:var(--color-bronze-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-bronze-11)]",
+				"[--avatar-subtle-bg:var(--color-bronze-4)]",
+				"[--avatar-surface-bg:var(--color-bronze-3)]",
+				"[--avatar-surface-border:var(--color-bronze-6)]",
+				"[--avatar-outline-border:var(--color-bronze-7)]"
+			],
+			gold: [
+				"[--avatar-solid-bg:var(--color-gold-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-gold-11)]",
+				"[--avatar-subtle-bg:var(--color-gold-4)]",
+				"[--avatar-surface-bg:var(--color-gold-3)]",
+				"[--avatar-surface-border:var(--color-gold-6)]",
+				"[--avatar-outline-border:var(--color-gold-7)]"
+			],
+			brown: [
+				"[--avatar-solid-bg:var(--color-brown-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-brown-11)]",
+				"[--avatar-subtle-bg:var(--color-brown-4)]",
+				"[--avatar-surface-bg:var(--color-brown-3)]",
+				"[--avatar-surface-border:var(--color-brown-6)]",
+				"[--avatar-outline-border:var(--color-brown-7)]"
+			],
+			orange: [
+				"[--avatar-solid-bg:var(--color-orange-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-orange-11)]",
+				"[--avatar-subtle-bg:var(--color-orange-4)]",
+				"[--avatar-surface-bg:var(--color-orange-3)]",
+				"[--avatar-surface-border:var(--color-orange-6)]",
+				"[--avatar-outline-border:var(--color-orange-7)]"
+			],
+			tomato: [
+				"[--avatar-solid-bg:var(--color-tomato-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-tomato-11)]",
+				"[--avatar-subtle-bg:var(--color-tomato-4)]",
+				"[--avatar-surface-bg:var(--color-tomato-3)]",
+				"[--avatar-surface-border:var(--color-tomato-6)]",
+				"[--avatar-outline-border:var(--color-tomato-7)]"
+			],
+			red: [
+				"[--avatar-solid-bg:var(--color-red-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-red-11)]",
+				"[--avatar-subtle-bg:var(--color-red-4)]",
+				"[--avatar-surface-bg:var(--color-red-3)]",
+				"[--avatar-surface-border:var(--color-red-6)]",
+				"[--avatar-outline-border:var(--color-red-7)]"
+			],
+			ruby: [
+				"[--avatar-solid-bg:var(--color-ruby-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-ruby-11)]",
+				"[--avatar-subtle-bg:var(--color-ruby-4)]",
+				"[--avatar-surface-bg:var(--color-ruby-3)]",
+				"[--avatar-surface-border:var(--color-ruby-6)]",
+				"[--avatar-outline-border:var(--color-ruby-7)]"
+			],
+			crimson: [
+				"[--avatar-solid-bg:var(--color-crimson-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-crimson-11)]",
+				"[--avatar-subtle-bg:var(--color-crimson-4)]",
+				"[--avatar-surface-bg:var(--color-crimson-3)]",
+				"[--avatar-surface-border:var(--color-crimson-6)]",
+				"[--avatar-outline-border:var(--color-crimson-7)]"
+			],
+			pink: [
+				"[--avatar-solid-bg:var(--color-pink-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-pink-11)]",
+				"[--avatar-subtle-bg:var(--color-pink-4)]",
+				"[--avatar-surface-bg:var(--color-pink-3)]",
+				"[--avatar-surface-border:var(--color-pink-6)]",
+				"[--avatar-outline-border:var(--color-pink-7)]"
+			],
+			plum: [
+				"[--avatar-solid-bg:var(--color-plum-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-plum-11)]",
+				"[--avatar-subtle-bg:var(--color-plum-4)]",
+				"[--avatar-surface-bg:var(--color-plum-3)]",
+				"[--avatar-surface-border:var(--color-plum-6)]",
+				"[--avatar-outline-border:var(--color-plum-7)]"
+			],
+			purple: [
+				"[--avatar-solid-bg:var(--color-purple-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-purple-11)]",
+				"[--avatar-subtle-bg:var(--color-purple-4)]",
+				"[--avatar-surface-bg:var(--color-purple-3)]",
+				"[--avatar-surface-border:var(--color-purple-6)]",
+				"[--avatar-outline-border:var(--color-purple-7)]"
+			],
+			violet: [
+				"[--avatar-solid-bg:var(--color-violet-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-violet-11)]",
+				"[--avatar-subtle-bg:var(--color-violet-4)]",
+				"[--avatar-surface-bg:var(--color-violet-3)]",
+				"[--avatar-surface-border:var(--color-violet-6)]",
+				"[--avatar-outline-border:var(--color-violet-7)]"
+			],
+			iris: [
+				"[--avatar-solid-bg:var(--color-iris-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-iris-11)]",
+				"[--avatar-subtle-bg:var(--color-iris-4)]",
+				"[--avatar-surface-bg:var(--color-iris-3)]",
+				"[--avatar-surface-border:var(--color-iris-6)]",
+				"[--avatar-outline-border:var(--color-iris-7)]"
+			],
+			indigo: [
+				"[--avatar-solid-bg:var(--color-indigo-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-indigo-11)]",
+				"[--avatar-subtle-bg:var(--color-indigo-4)]",
+				"[--avatar-surface-bg:var(--color-indigo-3)]",
+				"[--avatar-surface-border:var(--color-indigo-6)]",
+				"[--avatar-outline-border:var(--color-indigo-7)]"
+			],
+			blue: [
+				"[--avatar-solid-bg:var(--color-blue-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-blue-11)]",
+				"[--avatar-subtle-bg:var(--color-blue-4)]",
+				"[--avatar-surface-bg:var(--color-blue-3)]",
+				"[--avatar-surface-border:var(--color-blue-6)]",
+				"[--avatar-outline-border:var(--color-blue-7)]"
+			],
+			cyan: [
+				"[--avatar-solid-bg:var(--color-cyan-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-cyan-11)]",
+				"[--avatar-subtle-bg:var(--color-cyan-4)]",
+				"[--avatar-surface-bg:var(--color-cyan-3)]",
+				"[--avatar-surface-border:var(--color-cyan-6)]",
+				"[--avatar-outline-border:var(--color-cyan-7)]"
+			],
+			teal: [
+				"[--avatar-solid-bg:var(--color-teal-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-teal-11)]",
+				"[--avatar-subtle-bg:var(--color-teal-4)]",
+				"[--avatar-surface-bg:var(--color-teal-3)]",
+				"[--avatar-surface-border:var(--color-teal-6)]",
+				"[--avatar-outline-border:var(--color-teal-7)]"
+			],
+			jade: [
+				"[--avatar-solid-bg:var(--color-jade-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-jade-11)]",
+				"[--avatar-subtle-bg:var(--color-jade-4)]",
+				"[--avatar-surface-bg:var(--color-jade-3)]",
+				"[--avatar-surface-border:var(--color-jade-6)]",
+				"[--avatar-outline-border:var(--color-jade-7)]"
+			],
+			green: [
+				"[--avatar-solid-bg:var(--color-green-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-green-11)]",
+				"[--avatar-subtle-bg:var(--color-green-4)]",
+				"[--avatar-surface-bg:var(--color-green-3)]",
+				"[--avatar-surface-border:var(--color-green-6)]",
+				"[--avatar-outline-border:var(--color-green-7)]"
+			],
+			grass: [
+				"[--avatar-solid-bg:var(--color-grass-9)]",
+				"[--avatar-solid-fg:var(--color-white)]",
+				"[--avatar-fg:var(--color-grass-11)]",
+				"[--avatar-subtle-bg:var(--color-grass-4)]",
+				"[--avatar-surface-bg:var(--color-grass-3)]",
+				"[--avatar-surface-border:var(--color-grass-6)]",
+				"[--avatar-outline-border:var(--color-grass-7)]"
+			],
+			lime: [
+				"[--avatar-solid-bg:var(--color-lime-9)]",
+				"[--avatar-solid-fg:var(--color-black)]",
+				"[--avatar-fg:var(--color-lime-11)]",
+				"[--avatar-subtle-bg:var(--color-lime-4)]",
+				"[--avatar-surface-bg:var(--color-lime-3)]",
+				"[--avatar-surface-border:var(--color-lime-6)]",
+				"[--avatar-outline-border:var(--color-lime-7)]"
+			],
+			mint: [
+				"[--avatar-solid-bg:var(--color-mint-9)]",
+				"[--avatar-solid-fg:var(--color-black)]",
+				"[--avatar-fg:var(--color-mint-11)]",
+				"[--avatar-subtle-bg:var(--color-mint-4)]",
+				"[--avatar-surface-bg:var(--color-mint-3)]",
+				"[--avatar-surface-border:var(--color-mint-6)]",
+				"[--avatar-outline-border:var(--color-mint-7)]"
+			],
+			sky: [
+				"[--avatar-solid-bg:var(--color-sky-9)]",
+				"[--avatar-solid-fg:var(--color-black)]",
+				"[--avatar-fg:var(--color-sky-11)]",
+				"[--avatar-subtle-bg:var(--color-sky-4)]",
+				"[--avatar-surface-bg:var(--color-sky-3)]",
+				"[--avatar-surface-border:var(--color-sky-6)]",
+				"[--avatar-outline-border:var(--color-sky-7)]"
+			],
+			yellow: [
+				"[--avatar-solid-bg:var(--color-yellow-9)]",
+				"[--avatar-solid-fg:var(--color-black)]",
+				"[--avatar-fg:var(--color-yellow-11)]",
+				"[--avatar-subtle-bg:var(--color-yellow-4)]",
+				"[--avatar-surface-bg:var(--color-yellow-3)]",
+				"[--avatar-surface-border:var(--color-yellow-6)]",
+				"[--avatar-outline-border:var(--color-yellow-7)]"
+			],
+			amber: [
+				"[--avatar-solid-bg:var(--color-amber-9)]",
+				"[--avatar-solid-fg:var(--color-black)]",
+				"[--avatar-fg:var(--color-amber-11)]",
+				"[--avatar-subtle-bg:var(--color-amber-4)]",
+				"[--avatar-surface-bg:var(--color-amber-3)]",
+				"[--avatar-surface-border:var(--color-amber-6)]",
+				"[--avatar-outline-border:var(--color-amber-7)]"
+			]
+		},
+		size: {
+			"2xs": ["size-5", "text-2xs"],
+			xs: ["size-6", "text-xs"],
+			sm: ["size-8", "text-sm"],
+			md: ["size-10", "text-base"],
+			lg: ["size-12", "text-xl"],
+			xl: ["size-14", "text-2xl"]
+		},
+		variant: {
+			subtle: [
+				"[--avatar-fallback-bg:var(--avatar-subtle-bg)]",
+				"[--avatar-fallback-fg:var(--avatar-fg)]",
+				"[--avatar-fallback-border:transparent]"
+			],
+			surface: [
+				"[--avatar-fallback-bg:var(--avatar-surface-bg)]",
+				"[--avatar-fallback-fg:var(--avatar-fg)]",
+				"[--avatar-fallback-border:var(--avatar-surface-border)]"
+			],
+			outline: [
+				"[--avatar-fallback-bg:transparent]",
+				"[--avatar-fallback-fg:var(--avatar-fg)]",
+				"[--avatar-fallback-border:var(--avatar-outline-border)]"
+			],
+			solid: [
+				"[--avatar-fallback-bg:var(--avatar-solid-bg)]",
+				"[--avatar-fallback-fg:var(--avatar-solid-fg)]",
+				"[--avatar-fallback-border:transparent]"
+			]
+		}
+	},
+	defaultVariants: {
+		size: avatarRootDefaultVariants.size,
+		variant: avatarRootDefaultVariants.variant
+	}
+});
+//#endregion
+export { avatarRootDefaultVariants, avatarRootVariants };
+
+//# sourceMappingURL=avatar-root-variants.js.map

package/dist/components/display/avatar/avatar-root-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-root-variants.js","names":[],"sources":["../../../../src/components/display/avatar/avatar-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeFull } from '#types';\n\nexport type AvatarRootVariants = {\n  /**\n   * Cor do fallback. Sem ela, a cor vem do `name`: o mesmo nome sempre dá a mesma cor, entre as\n   * escalas do tema menos o gray; sem `name`, gray.\n   */\n  colorScheme?: ColorSchemeFull;\n  /**\n   * Diâmetro e tamanho das iniciais: `2xs` = 20px, `xs` = 24px, `sm` = 32px, `md` = 40px (a altura\n   * do `Button` `md`), `lg` = 48px e `xl` = 56px.\n   *\n   * @default 'md'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /**\n   * Fundo e borda do fallback, como no `Badge`: `subtle` com fundo suave, `surface` com fundo suave\n   * e borda, `outline` só com borda e `solid` com o fundo cheio (passo 9) e o texto em contraste. A\n   * foto não muda.\n   *\n   * @default 'subtle'\n   */\n  variant?: 'subtle' | 'surface' | 'outline' | 'solid';\n};\n\nexport const avatarRootDefaultVariants: Pick<\n  Required<AvatarRootVariants>,\n  'size' | 'variant'\n> = {\n  size: 'md',\n  variant: 'subtle',\n};\n\n/**\n * O `colorScheme` só declara as cores (`--avatar-*`), e a `variant` escolhe quais delas o\n * `Avatar.Fallback` usa, em `--avatar-fallback-bg`, `--avatar-fallback-fg` e\n * `--avatar-fallback-border`. Assim o fallback não precisa de contexto, e uma cor nova é um bloco\n * de variáveis. No `solid`, o texto é branco, menos nas escalas claras demais para ele (amber,\n * yellow, sky, mint e lime), que levam preto; o gray é preto no tema claro e branco no escuro.\n */\nexport const avatarRootVariants = cva(\n  [\n    'relative',\n    'isolate',\n\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'shrink-0',\n    'align-middle',\n\n    'overflow-hidden',\n    'rounded-full',\n\n    'font-medium',\n    'leading-none',\n    'select-none',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--avatar-solid-bg:var(--color-black)]',\n          'dark:[--avatar-solid-bg:var(--color-white)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          'dark:[--avatar-solid-fg:var(--color-black)]',\n          '[--avatar-fg:var(--color-gray-11)]',\n          '[--avatar-subtle-bg:var(--color-gray-4)]',\n          '[--avatar-surface-bg:var(--color-gray-3)]',\n          '[--avatar-surface-border:var(--color-gray-6)]',\n          '[--avatar-outline-border:var(--color-gray-7)]',\n        ],\n        brand: [\n          '[--avatar-solid-bg:var(--color-brand-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-brand-11)]',\n          '[--avatar-subtle-bg:var(--color-brand-4)]',\n          '[--avatar-surface-bg:var(--color-brand-3)]',\n          '[--avatar-surface-border:var(--color-brand-6)]',\n          '[--avatar-outline-border:var(--color-brand-7)]',\n        ],\n        bronze: [\n          '[--avatar-solid-bg:var(--color-bronze-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-bronze-11)]',\n          '[--avatar-subtle-bg:var(--color-bronze-4)]',\n          '[--avatar-surface-bg:var(--color-bronze-3)]',\n          '[--avatar-surface-border:var(--color-bronze-6)]',\n          '[--avatar-outline-border:var(--color-bronze-7)]',\n        ],\n        gold: [\n          '[--avatar-solid-bg:var(--color-gold-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-gold-11)]',\n          '[--avatar-subtle-bg:var(--color-gold-4)]',\n          '[--avatar-surface-bg:var(--color-gold-3)]',\n          '[--avatar-surface-border:var(--color-gold-6)]',\n          '[--avatar-outline-border:var(--color-gold-7)]',\n        ],\n        brown: [\n          '[--avatar-solid-bg:var(--color-brown-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-brown-11)]',\n          '[--avatar-subtle-bg:var(--color-brown-4)]',\n          '[--avatar-surface-bg:var(--color-brown-3)]',\n          '[--avatar-surface-border:var(--color-brown-6)]',\n          '[--avatar-outline-border:var(--color-brown-7)]',\n        ],\n        orange: [\n          '[--avatar-solid-bg:var(--color-orange-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-orange-11)]',\n          '[--avatar-subtle-bg:var(--color-orange-4)]',\n          '[--avatar-surface-bg:var(--color-orange-3)]',\n          '[--avatar-surface-border:var(--color-orange-6)]',\n          '[--avatar-outline-border:var(--color-orange-7)]',\n        ],\n        tomato: [\n          '[--avatar-solid-bg:var(--color-tomato-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-tomato-11)]',\n          '[--avatar-subtle-bg:var(--color-tomato-4)]',\n          '[--avatar-surface-bg:var(--color-tomato-3)]',\n          '[--avatar-surface-border:var(--color-tomato-6)]',\n          '[--avatar-outline-border:var(--color-tomato-7)]',\n        ],\n        red: [\n          '[--avatar-solid-bg:var(--color-red-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-red-11)]',\n          '[--avatar-subtle-bg:var(--color-red-4)]',\n          '[--avatar-surface-bg:var(--color-red-3)]',\n          '[--avatar-surface-border:var(--color-red-6)]',\n          '[--avatar-outline-border:var(--color-red-7)]',\n        ],\n        ruby: [\n          '[--avatar-solid-bg:var(--color-ruby-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-ruby-11)]',\n          '[--avatar-subtle-bg:var(--color-ruby-4)]',\n          '[--avatar-surface-bg:var(--color-ruby-3)]',\n          '[--avatar-surface-border:var(--color-ruby-6)]',\n          '[--avatar-outline-border:var(--color-ruby-7)]',\n        ],\n        crimson: [\n          '[--avatar-solid-bg:var(--color-crimson-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-crimson-11)]',\n          '[--avatar-subtle-bg:var(--color-crimson-4)]',\n          '[--avatar-surface-bg:var(--color-crimson-3)]',\n          '[--avatar-surface-border:var(--color-crimson-6)]',\n          '[--avatar-outline-border:var(--color-crimson-7)]',\n        ],\n        pink: [\n          '[--avatar-solid-bg:var(--color-pink-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-pink-11)]',\n          '[--avatar-subtle-bg:var(--color-pink-4)]',\n          '[--avatar-surface-bg:var(--color-pink-3)]',\n          '[--avatar-surface-border:var(--color-pink-6)]',\n          '[--avatar-outline-border:var(--color-pink-7)]',\n        ],\n        plum: [\n          '[--avatar-solid-bg:var(--color-plum-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-plum-11)]',\n          '[--avatar-subtle-bg:var(--color-plum-4)]',\n          '[--avatar-surface-bg:var(--color-plum-3)]',\n          '[--avatar-surface-border:var(--color-plum-6)]',\n          '[--avatar-outline-border:var(--color-plum-7)]',\n        ],\n        purple: [\n          '[--avatar-solid-bg:var(--color-purple-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-purple-11)]',\n          '[--avatar-subtle-bg:var(--color-purple-4)]',\n          '[--avatar-surface-bg:var(--color-purple-3)]',\n          '[--avatar-surface-border:var(--color-purple-6)]',\n          '[--avatar-outline-border:var(--color-purple-7)]',\n        ],\n        violet: [\n          '[--avatar-solid-bg:var(--color-violet-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-violet-11)]',\n          '[--avatar-subtle-bg:var(--color-violet-4)]',\n          '[--avatar-surface-bg:var(--color-violet-3)]',\n          '[--avatar-surface-border:var(--color-violet-6)]',\n          '[--avatar-outline-border:var(--color-violet-7)]',\n        ],\n        iris: [\n          '[--avatar-solid-bg:var(--color-iris-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-iris-11)]',\n          '[--avatar-subtle-bg:var(--color-iris-4)]',\n          '[--avatar-surface-bg:var(--color-iris-3)]',\n          '[--avatar-surface-border:var(--color-iris-6)]',\n          '[--avatar-outline-border:var(--color-iris-7)]',\n        ],\n        indigo: [\n          '[--avatar-solid-bg:var(--color-indigo-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-indigo-11)]',\n          '[--avatar-subtle-bg:var(--color-indigo-4)]',\n          '[--avatar-surface-bg:var(--color-indigo-3)]',\n          '[--avatar-surface-border:var(--color-indigo-6)]',\n          '[--avatar-outline-border:var(--color-indigo-7)]',\n        ],\n        blue: [\n          '[--avatar-solid-bg:var(--color-blue-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-blue-11)]',\n          '[--avatar-subtle-bg:var(--color-blue-4)]',\n          '[--avatar-surface-bg:var(--color-blue-3)]',\n          '[--avatar-surface-border:var(--color-blue-6)]',\n          '[--avatar-outline-border:var(--color-blue-7)]',\n        ],\n        cyan: [\n          '[--avatar-solid-bg:var(--color-cyan-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-cyan-11)]',\n          '[--avatar-subtle-bg:var(--color-cyan-4)]',\n          '[--avatar-surface-bg:var(--color-cyan-3)]',\n          '[--avatar-surface-border:var(--color-cyan-6)]',\n          '[--avatar-outline-border:var(--color-cyan-7)]',\n        ],\n        teal: [\n          '[--avatar-solid-bg:var(--color-teal-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-teal-11)]',\n          '[--avatar-subtle-bg:var(--color-teal-4)]',\n          '[--avatar-surface-bg:var(--color-teal-3)]',\n          '[--avatar-surface-border:var(--color-teal-6)]',\n          '[--avatar-outline-border:var(--color-teal-7)]',\n        ],\n        jade: [\n          '[--avatar-solid-bg:var(--color-jade-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-jade-11)]',\n          '[--avatar-subtle-bg:var(--color-jade-4)]',\n          '[--avatar-surface-bg:var(--color-jade-3)]',\n          '[--avatar-surface-border:var(--color-jade-6)]',\n          '[--avatar-outline-border:var(--color-jade-7)]',\n        ],\n        green: [\n          '[--avatar-solid-bg:var(--color-green-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-green-11)]',\n          '[--avatar-subtle-bg:var(--color-green-4)]',\n          '[--avatar-surface-bg:var(--color-green-3)]',\n          '[--avatar-surface-border:var(--color-green-6)]',\n          '[--avatar-outline-border:var(--color-green-7)]',\n        ],\n        grass: [\n          '[--avatar-solid-bg:var(--color-grass-9)]',\n          '[--avatar-solid-fg:var(--color-white)]',\n          '[--avatar-fg:var(--color-grass-11)]',\n          '[--avatar-subtle-bg:var(--color-grass-4)]',\n          '[--avatar-surface-bg:var(--color-grass-3)]',\n          '[--avatar-surface-border:var(--color-grass-6)]',\n          '[--avatar-outline-border:var(--color-grass-7)]',\n        ],\n        lime: [\n          '[--avatar-solid-bg:var(--color-lime-9)]',\n          '[--avatar-solid-fg:var(--color-black)]',\n          '[--avatar-fg:var(--color-lime-11)]',\n          '[--avatar-subtle-bg:var(--color-lime-4)]',\n          '[--avatar-surface-bg:var(--color-lime-3)]',\n          '[--avatar-surface-border:var(--color-lime-6)]',\n          '[--avatar-outline-border:var(--color-lime-7)]',\n        ],\n        mint: [\n          '[--avatar-solid-bg:var(--color-mint-9)]',\n          '[--avatar-solid-fg:var(--color-black)]',\n          '[--avatar-fg:var(--color-mint-11)]',\n          '[--avatar-subtle-bg:var(--color-mint-4)]',\n          '[--avatar-surface-bg:var(--color-mint-3)]',\n          '[--avatar-surface-border:var(--color-mint-6)]',\n          '[--avatar-outline-border:var(--color-mint-7)]',\n        ],\n        sky: [\n          '[--avatar-solid-bg:var(--color-sky-9)]',\n          '[--avatar-solid-fg:var(--color-black)]',\n          '[--avatar-fg:var(--color-sky-11)]',\n          '[--avatar-subtle-bg:var(--color-sky-4)]',\n          '[--avatar-surface-bg:var(--color-sky-3)]',\n          '[--avatar-surface-border:var(--color-sky-6)]',\n          '[--avatar-outline-border:var(--color-sky-7)]',\n        ],\n        yellow: [\n          '[--avatar-solid-bg:var(--color-yellow-9)]',\n          '[--avatar-solid-fg:var(--color-black)]',\n          '[--avatar-fg:var(--color-yellow-11)]',\n          '[--avatar-subtle-bg:var(--color-yellow-4)]',\n          '[--avatar-surface-bg:var(--color-yellow-3)]',\n          '[--avatar-surface-border:var(--color-yellow-6)]',\n          '[--avatar-outline-border:var(--color-yellow-7)]',\n        ],\n        amber: [\n          '[--avatar-solid-bg:var(--color-amber-9)]',\n          '[--avatar-solid-fg:var(--color-black)]',\n          '[--avatar-fg:var(--color-amber-11)]',\n          '[--avatar-subtle-bg:var(--color-amber-4)]',\n          '[--avatar-surface-bg:var(--color-amber-3)]',\n          '[--avatar-surface-border:var(--color-amber-6)]',\n          '[--avatar-outline-border:var(--color-amber-7)]',\n        ],\n      },\n      // As iniciais ficam perto de 40% do diâmetro; nos dois menores, em 50%, porque abaixo disso\n      // não se leem.\n      size: {\n        '2xs': ['size-5', 'text-2xs'],\n        xs: ['size-6', 'text-xs'],\n        sm: ['size-8', 'text-sm'],\n        md: ['size-10', 'text-base'],\n        lg: ['size-12', 'text-xl'],\n        xl: ['size-14', 'text-2xl'],\n      },\n      variant: {\n        subtle: [\n          '[--avatar-fallback-bg:var(--avatar-subtle-bg)]',\n          '[--avatar-fallback-fg:var(--avatar-fg)]',\n          '[--avatar-fallback-border:transparent]',\n        ],\n        surface: [\n          '[--avatar-fallback-bg:var(--avatar-surface-bg)]',\n          '[--avatar-fallback-fg:var(--avatar-fg)]',\n          '[--avatar-fallback-border:var(--avatar-surface-border)]',\n        ],\n        outline: [\n          '[--avatar-fallback-bg:transparent]',\n          '[--avatar-fallback-fg:var(--avatar-fg)]',\n          '[--avatar-fallback-border:var(--avatar-outline-border)]',\n        ],\n        solid: [\n          '[--avatar-fallback-bg:var(--avatar-solid-bg)]',\n          '[--avatar-fallback-fg:var(--avatar-solid-fg)]',\n          '[--avatar-fallback-border:transparent]',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: avatarRootDefaultVariants.size,\n      variant: avatarRootDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AA0BA,MAAa,4BAGT;CACF,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,qBAAqB,IAChC;CACE;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EAGA,MAAM;GACJ,OAAO,CAAC,UAAU,UAAU;GAC5B,IAAI,CAAC,UAAU,SAAS;GACxB,IAAI,CAAC,UAAU,SAAS;GACxB,IAAI,CAAC,WAAW,WAAW;GAC3B,IAAI,CAAC,WAAW,SAAS;GACzB,IAAI,CAAC,WAAW,UAAU;EAC5B;EACA,SAAS;GACP,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,0BAA0B;EAChC,SAAS,0BAA0B;CACrC;AACF,CACF"}

package/dist/components/display/avatar/avatar-root.d.ts

@@ -0,0 +1,31 @@
+import { AvatarRootVariants } from "./avatar-root-variants.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/display/avatar/avatar-root.d.ts
+export type AvatarRootProps = MergeOverride<Avatar.Root.Props, AvatarRootVariants & {
+  /**
+   * Nome de quem o avatar representa. Vira o nome acessível (`role="img"` e `aria-label`), as
+   * iniciais do `Avatar.Fallback` e a cor automática. Sem ele, o avatar é decorativo, e o nome
+   * fica com o texto ao lado ou com o `alt` do `Avatar.Image`.
+   */
+  name?: string;
+}>;
+export type AvatarRootState = Avatar.Root.State;
+/**
+ * Círculo com a foto de uma pessoa ou, sem ela, as iniciais do `name`. A foto do `Avatar.Image`
+ * cobre o `Avatar.Fallback` quando carrega; enquanto carrega, ou se falhar, aparece o fallback.
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root name="Lucas Bernardo">
+ *   <Avatar.Fallback />
+ *   <Avatar.Image src={user.photoUrl} />
+ * </Avatar.Root>
+ * ```
+ */
+export declare const AvatarRoot: {
+  (props: AvatarRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=avatar-root.d.ts.map

package/dist/components/display/avatar/avatar-root.js

@@ -0,0 +1,52 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { AvatarContextProvider } from "./use-avatar-context.js";
+import { avatarRootVariants } from "./avatar-root-variants.js";
+import { getAvatarColorScheme } from "./get-avatar-color-scheme.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/display/avatar/avatar-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Círculo com a foto de uma pessoa ou, sem ela, as iniciais do `name`. A foto do `Avatar.Image`
+* cobre o `Avatar.Fallback` quando carrega; enquanto carrega, ou se falhar, aparece o fallback.
+*
+* @example
+* ```tsx
+* <Avatar.Root name="Lucas Bernardo">
+*   <Avatar.Fallback />
+*   <Avatar.Image src={user.photoUrl} />
+* </Avatar.Root>
+* ```
+*/
+const AvatarRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	const { name, className, ...rest } = elementProps;
+	const { colorScheme = getAvatarColorScheme(name), size, variant } = variantProps;
+	const accessibleProps = name === void 0 ? {} : {
+		role: "img",
+		"aria-label": name
+	};
+	return /* @__PURE__ */ jsx(AvatarContextProvider, {
+		value: { name },
+		children: /* @__PURE__ */ jsx(Avatar.Root, {
+			"data-component": "Avatar.Root",
+			className: mergeStateClassNames(avatarRootVariants({
+				colorScheme,
+				size,
+				variant
+			}), className),
+			...accessibleProps,
+			...rest
+		})
+	});
+};
+AvatarRoot.displayName = "Avatar.Root";
+//#endregion
+export { AvatarRoot };
+
+//# sourceMappingURL=avatar-root.js.map

package/dist/components/display/avatar/avatar-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-root.js","names":["BaseAvatar"],"sources":["../../../../src/components/display/avatar/avatar-root.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type AvatarRootVariants,\n  avatarRootVariants,\n} from './avatar-root-variants';\nimport { getAvatarColorScheme } from './get-avatar-color-scheme';\nimport { AvatarContextProvider } from './use-avatar-context';\n\nexport type AvatarRootProps = MergeOverride<\n  BaseAvatar.Root.Props,\n  AvatarRootVariants & {\n    /**\n     * Nome de quem o avatar representa. Vira o nome acessível (`role=\"img\"` e `aria-label`), as\n     * iniciais do `Avatar.Fallback` e a cor automática. Sem ele, o avatar é decorativo, e o nome\n     * fica com o texto ao lado ou com o `alt` do `Avatar.Image`.\n     */\n    name?: string;\n  }\n>;\n\nexport type AvatarRootState = BaseAvatar.Root.State;\n\nconst splitVariantProps = createSplitProps<AvatarRootVariants>();\n\n/**\n * Círculo com a foto de uma pessoa ou, sem ela, as iniciais do `name`. A foto do `Avatar.Image`\n * cobre o `Avatar.Fallback` quando carrega; enquanto carrega, ou se falhar, aparece o fallback.\n *\n * @example\n * ```tsx\n * <Avatar.Root name=\"Lucas Bernardo\">\n *   <Avatar.Fallback />\n *   <Avatar.Image src={user.photoUrl} />\n * </Avatar.Root>\n * ```\n */\nexport const AvatarRoot = (props: AvatarRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { name, className, ...rest } = elementProps;\n\n  const {\n    colorScheme = getAvatarColorScheme(name),\n    size,\n    variant,\n  } = variantProps;\n\n  const accessibleProps =\n    name === undefined ? {} : { role: 'img', 'aria-label': name };\n\n  return (\n    <AvatarContextProvider value={{ name }}>\n      <BaseAvatar.Root\n        data-component=\"Avatar.Root\"\n        className={mergeStateClassNames(\n          avatarRootVariants({ colorScheme, size, variant }),\n          className,\n        )}\n        {...accessibleProps}\n        {...rest}\n      />\n    </AvatarContextProvider>\n  );\n};\n\nAvatarRoot.displayName = 'Avatar.Root';\n"],"mappings":";;;;;;;;AA2BA,MAAM,oBAAoB,iBAAqC;;;;;;;;;;;;;AAc/D,MAAa,cAAc,UAA2B;CACpD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,MAAM,WAAW,GAAG,SAAS;CAErC,MAAM,EACJ,cAAc,qBAAqB,IAAI,GACvC,MACA,YACE;CAEJ,MAAM,kBACJ,SAAS,KAAA,IAAY,CAAC,IAAI;EAAE,MAAM;EAAO,cAAc;CAAK;CAE9D,OACE,oBAAC,uBAAD;EAAuB,OAAO,EAAE,KAAK;EACnC,UAAA,oBAACA,OAAW,MAAZ;GACE,kBAAe;GACf,WAAW,qBACT,mBAAmB;IAAE;IAAa;IAAM;GAAQ,CAAC,GACjD,SACF;GACA,GAAI;GACJ,GAAI;EACL,CAAA;CACoB,CAAA;AAE3B;AAEA,WAAW,cAAc"}

package/dist/components/display/avatar/get-avatar-color-scheme.d.ts

@@ -0,0 +1,10 @@
+import { ColorSchemeFull } from "../../../types/color-scheme.js";
+//#region src/components/display/avatar/get-avatar-color-scheme.d.ts
+/**
+ * Cor do avatar a partir do nome, sempre a mesma para o mesmo nome. O nome é normalizado
+ * (espaços e maiúsculas) antes do hash, para "Ana Souza" e "ana  souza" caírem na mesma cor; sem
+ * nome, gray.
+ */
+export declare const getAvatarColorScheme: (name: string | undefined) => ColorSchemeFull;
+//#endregion
+//# sourceMappingURL=get-avatar-color-scheme.d.ts.map