npm - @lucasbernardosn/react-ui - Versions diffs - 0.2.0 → 0.4.0 - Mend

@lucasbernardosn/react-ui 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (938) hide show

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

@@ -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?: "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "ruby" | "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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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

package/dist/components/display/avatar/get-avatar-color-scheme.js ADDED Viewed

@@ -0,0 +1,45 @@
+//#region src/components/display/avatar/get-avatar-color-scheme.ts
+/** As escalas que a cor automática sorteia: todas as do tema menos o gray, que fica sem nome. */
+const NAME_COLOR_SCHEMES = [
+	"bronze",
+	"gold",
+	"brown",
+	"orange",
+	"tomato",
+	"red",
+	"ruby",
+	"crimson",
+	"pink",
+	"plum",
+	"purple",
+	"violet",
+	"iris",
+	"indigo",
+	"blue",
+	"cyan",
+	"teal",
+	"jade",
+	"green",
+	"grass",
+	"lime",
+	"mint",
+	"sky",
+	"yellow",
+	"amber"
+];
+const WORD_SEPARATOR = /\s+/g;
+/**
+* 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.
+*/
+const getAvatarColorScheme = (name) => {
+	const normalizedName = (name ?? "").trim().replace(WORD_SEPARATOR, " ").toLowerCase();
+	if (normalizedName === "") return "gray";
+	const hash = Array.from(normalizedName).reduce((current, character) => (current * 31 + (character.codePointAt(0) ?? 0)) % 2147483647, 0);
+	return NAME_COLOR_SCHEMES[hash % NAME_COLOR_SCHEMES.length] ?? "gray";
+};
+//#endregion
+export { getAvatarColorScheme };
+//# sourceMappingURL=get-avatar-color-scheme.js.map

package/dist/components/display/avatar/get-avatar-color-scheme.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"get-avatar-color-scheme.js","names":[],"sources":["../../../../src/components/display/avatar/get-avatar-color-scheme.ts"],"sourcesContent":["import type { ColorSchemeFull } from '#types';\n\n/** As escalas que a cor automática sorteia: todas as do tema menos o gray, que fica sem nome. */\nconst NAME_COLOR_SCHEMES: ColorSchemeFull[] = [\n 'bronze',\n 'gold',\n 'brown',\n 'orange',\n 'tomato',\n 'red',\n 'ruby',\n 'crimson',\n 'pink',\n 'plum',\n 'purple',\n 'violet',\n 'iris',\n 'indigo',\n 'blue',\n 'cyan',\n 'teal',\n 'jade',\n 'green',\n 'grass',\n 'lime',\n 'mint',\n 'sky',\n 'yellow',\n 'amber',\n];\n\nconst WORD_SEPARATOR = /\\s+/g;\n\n/**\n * Cor do avatar a partir do nome, sempre a mesma para o mesmo nome. O nome é normalizado\n * (espaços e maiúsculas) antes do hash, para \"Ana Souza\" e \"ana souza\" caírem na mesma cor; sem\n * nome, gray.\n */\nexport const getAvatarColorScheme = (\n name: string | undefined,\n): ColorSchemeFull => {\n const normalizedName = (name ?? '')\n .trim()\n .replace(WORD_SEPARATOR, ' ')\n .toLowerCase();\n\n if (normalizedName === '') {\n return 'gray';\n }\n\n const hash = Array.from(normalizedName).reduce(\n (current, character) =>\n (current * 31 + (character.codePointAt(0) ?? 0)) % 2_147_483_647,\n 0,\n );\n\n return NAME_COLOR_SCHEMES[hash % NAME_COLOR_SCHEMES.length] ?? 'gray';\n};\n"],"mappings":";;AAGA,MAAM,qBAAwC;CAC5C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,iBAAiB;;;;;;AAOvB,MAAa,wBACX,SACoB;CACpB,MAAM,kBAAkB,QAAQ,GAAA,CAC7B,KAAK,CAAC,CACN,QAAQ,gBAAgB,GAAG,CAAC,CAC5B,YAAY;CAEf,IAAI,mBAAmB,IACrB,OAAO;CAGT,MAAM,OAAO,MAAM,KAAK,cAAc,CAAC,CAAC,QACrC,SAAS,eACP,UAAU,MAAM,UAAU,YAAY,CAAC,KAAK,MAAM,YACrD,CACF;CAEA,OAAO,mBAAmB,OAAO,mBAAmB,WAAW;AACjE"}

package/dist/components/display/avatar/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { index_parts_d_exports } from "./index.parts.js";
2	+ export { index_parts_d_exports as Avatar };

package/dist/components/display/avatar/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { index_parts_exports } from "./index.parts.js";
2	+ export { index_parts_exports as Avatar };

package/dist/components/display/avatar/index.parts.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { AvatarFallback, AvatarFallbackProps, AvatarFallbackState } from "./avatar-fallback.js";
+import { AvatarImage, AvatarImageProps, AvatarImageState } from "./avatar-image.js";
+import { AvatarRootVariants } from "./avatar-root-variants.js";
+import { AvatarRoot, AvatarRootProps, AvatarRootState } from "./avatar-root.js";
+declare namespace index_parts_d_exports {
+  export { AvatarFallback as Fallback, AvatarFallbackProps as FallbackProps, AvatarFallbackState as FallbackState, AvatarImage as Image, AvatarImageProps as ImageProps, AvatarImageState as ImageState, AvatarRoot as Root, AvatarRootProps as RootProps, AvatarRootState as RootState, AvatarRootVariants as RootVariants };
+}
+//#endregion
+export { AvatarFallback as Fallback, type AvatarFallbackProps as FallbackProps, type AvatarFallbackState as FallbackState, AvatarImage as Image, type AvatarImageProps as ImageProps, type AvatarImageState as ImageState, AvatarRoot as Root, type AvatarRootProps as RootProps, type AvatarRootState as RootState, type AvatarRootVariants as RootVariants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/display/avatar/index.parts.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { AvatarFallback } from "./avatar-fallback.js";
+import { AvatarImage } from "./avatar-image.js";
+import { AvatarRoot } from "./avatar-root.js";
+//#region src/components/display/avatar/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Fallback: () => AvatarFallback,
+	Image: () => AvatarImage,
+	Root: () => AvatarRoot
+});
+//#endregion
+export { AvatarFallback as Fallback, AvatarImage as Image, AvatarRoot as Root, index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

package/dist/components/display/avatar/index.parts.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/display/avatar/index.parts.ts"],"sourcesContent":["export { AvatarFallback as Fallback } from './avatar-fallback';\nexport { AvatarImage as Image } from './avatar-image';\nexport { AvatarRoot as Root } from './avatar-root';\n\n/* types */\n\nexport type {\n AvatarFallbackProps as FallbackProps,\n AvatarFallbackState as FallbackState,\n} from './avatar-fallback';\nexport type {\n AvatarImageProps as ImageProps,\n AvatarImageState as ImageState,\n} from './avatar-image';\nexport type {\n AvatarRootProps as RootProps,\n AvatarRootState as RootState,\n} from './avatar-root';\nexport type { AvatarRootVariants as RootVariants } from './avatar-root-variants';\n"],"mappings":""}

package/dist/components/display/avatar/use-avatar-context.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+//#region src/components/display/avatar/use-avatar-context.d.ts
+export type AvatarContextValue = {
+  /** O `name` do `Avatar.Root`, de onde o `Avatar.Fallback` tira as iniciais. */
+  name: string | undefined;
+};
+export declare const AvatarContextProvider: import("react").Provider<AvatarContextValue>, useAvatarContext: () => AvatarContextValue;
+//#endregion
+//# sourceMappingURL=use-avatar-context.d.ts.map

package/dist/components/display/avatar/use-avatar-context.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/display/avatar/use-avatar-context.ts
+const [AvatarContextProvider, useAvatarContext] = createContext({
+	name: "AvatarContext",
+	providers: ["Avatar.Root"]
+});
+//#endregion
+export { AvatarContextProvider, useAvatarContext };
+//# sourceMappingURL=use-avatar-context.js.map

package/dist/components/display/avatar/use-avatar-context.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-avatar-context.js","names":[],"sources":["../../../../src/components/display/avatar/use-avatar-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\nexport type AvatarContextValue = {\n /** O `name` do `Avatar.Root`, de onde o `Avatar.Fallback` tira as iniciais. */\n name: string | undefined;\n};\n\nexport const [AvatarContextProvider, useAvatarContext] =\n createContext<AvatarContextValue>({\n name: 'AvatarContext',\n providers: ['Avatar.Root'],\n });\n"],"mappings":";;AAOA,MAAa,CAAC,uBAAuB,oBACnC,cAAkC;CAChC,MAAM;CACN,WAAW,CAAC,aAAa;AAC3B,CAAC"}