@rendra-ui/web 2.1.0

package/dist/tooltip-DyeuGPCc.js

@@ -0,0 +1,105 @@
+/*! Rendra Design System v2.1.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-DVPheE99.js";
+import { Check, ChevronRight } from "lucide-react";
+import { DropdownMenu, Tooltip } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/dropdown-menu.tsx
+var DropdownMenu$1 = DropdownMenu.Root;
+var DropdownMenuTrigger = DropdownMenu.Trigger;
+var DropdownMenuGroup = DropdownMenu.Group;
+var DropdownMenuSub = DropdownMenu.Sub;
+var DropdownMenuRadioGroup = DropdownMenu.RadioGroup;
+var panel = "z-50 w-max min-w-3xs max-w-popover overflow-hidden rounded-surface border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95";
+var item = "relative flex min-h-touch cursor-pointer items-center gap-2 rounded-item px-3 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground md:min-h-0 md:py-2 [&_svg]:size-icon-sm [&_svg]:shrink-0 [&_svg]:text-muted-foreground";
+function DropdownMenuContent({ className, sideOffset = 8, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
+		sideOffset,
+		collisionPadding: 16,
+		"data-rendra": "DDM-001",
+		className: cn(panel, className),
+		...props
+	}) });
+}
+function DropdownMenuItem({ className, destructive, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Item, {
+		className: cn(item, destructive && "text-destructive data-highlighted:bg-destructive-soft data-highlighted:text-destructive-soft-foreground [&_svg]:text-current", className),
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu.CheckboxItem, {
+		className: cn(item, "pl-8", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute left-2 flex size-icon-sm items-center justify-center",
+			children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "text-primary-text" }) })
+		}), children]
+	});
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu.RadioItem, {
+		className: cn(item, "pl-8", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute left-2 flex size-icon-sm items-center justify-center",
+			children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "text-primary-text" }) })
+		}), children]
+	});
+}
+function DropdownMenuLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Label, {
+		className: cn("px-2 py-2 text-xs font-medium text-muted-foreground", className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Separator, {
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, {
+		className: cn(item, "data-[state=open]:bg-accent", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })]
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.SubContent, {
+		collisionPadding: 16,
+		className: cn(panel, className),
+		...props
+	}) });
+}
+//#endregion
+//#region src/components/ui/tooltip.tsx
+/**
+* Tooltip: só para informação complementar, nunca essencial (não existe hover no toque).
+* Informação essencial vai em texto de ajuda visível ou em Popover acionado por toque.
+*/
+function TooltipProvider({ children }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		delayDuration: 300,
+		skipDelayDuration: 150,
+		children
+	});
+}
+function Tooltip$1({ content, children, side = "top", disabled }) {
+	if (disabled) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		asChild: true,
+		children
+	}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Content, {
+		side,
+		sideOffset: 8,
+		collisionPadding: 16,
+		"data-rendra": "TIP-001",
+		className: cn("z-50 max-w-xs rounded-control bg-foreground px-3 py-2 text-xs font-medium text-background", "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0"),
+		children: content
+	}) })] });
+}
+//#endregion
+export { DropdownMenuContent as a, DropdownMenuLabel as c, DropdownMenuSeparator as d, DropdownMenuSub as f, DropdownMenuTrigger as h, DropdownMenuCheckboxItem as i, DropdownMenuRadioGroup as l, DropdownMenuSubTrigger as m, TooltipProvider as n, DropdownMenuGroup as o, DropdownMenuSubContent as p, DropdownMenu$1 as r, DropdownMenuItem as s, Tooltip$1 as t, DropdownMenuRadioItem as u };
+
+//# sourceMappingURL=tooltip-DyeuGPCc.js.map

package/dist/tooltip-DyeuGPCc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-DyeuGPCc.js","names":[],"sources":["../src/components/ui/dropdown-menu.tsx","../src/components/ui/tooltip.tsx"],"sourcesContent":["import { Check, ChevronRight } from 'lucide-react'\nimport { DropdownMenu as D } from 'radix-ui'\nimport type { ComponentProps } from 'react'\nimport { cn } from '@/lib/cn'\n\nexport const DropdownMenu = D.Root\nexport const DropdownMenuTrigger = D.Trigger\nexport const DropdownMenuGroup = D.Group\nexport const DropdownMenuSub = D.Sub\nexport const DropdownMenuRadioGroup = D.RadioGroup\n\nconst panel =\n  'z-50 w-max min-w-3xs max-w-popover overflow-hidden rounded-surface border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95'\n\n// Itens com 44px no mobile (toque) e compactos a partir de md.\nconst item =\n  'relative flex min-h-touch cursor-pointer items-center gap-2 rounded-item px-3 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground md:min-h-0 md:py-2 [&_svg]:size-icon-sm [&_svg]:shrink-0 [&_svg]:text-muted-foreground'\n\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 8,\n  ...props\n}: ComponentProps<typeof D.Content>) {\n  return (\n    <D.Portal>\n      <D.Content\n        sideOffset={sideOffset}\n        collisionPadding={16}\n        data-rendra=\"DDM-001\"\n        className={cn(panel, className)}\n        {...props}\n      />\n    </D.Portal>\n  )\n}\n\ninterface ItemProps extends ComponentProps<typeof D.Item> {\n  /** Item destrutivo (excluir, sair): texto na cor destrutiva. */\n  destructive?: boolean\n}\n\nexport function DropdownMenuItem({ className, destructive, ...props }: ItemProps) {\n  return (\n    <D.Item\n      className={cn(\n        item,\n        destructive &&\n          'text-destructive data-highlighted:bg-destructive-soft data-highlighted:text-destructive-soft-foreground [&_svg]:text-current',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function DropdownMenuCheckboxItem({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof D.CheckboxItem>) {\n  return (\n    <D.CheckboxItem className={cn(item, 'pl-8', className)} {...props}>\n      <span className=\"absolute left-2 flex size-icon-sm items-center justify-center\">\n        <D.ItemIndicator>\n          <Check className=\"text-primary-text\" />\n        </D.ItemIndicator>\n      </span>\n      {children}\n    </D.CheckboxItem>\n  )\n}\n\nexport function DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof D.RadioItem>) {\n  return (\n    <D.RadioItem className={cn(item, 'pl-8', className)} {...props}>\n      <span className=\"absolute left-2 flex size-icon-sm items-center justify-center\">\n        <D.ItemIndicator>\n          <Check className=\"text-primary-text\" />\n        </D.ItemIndicator>\n      </span>\n      {children}\n    </D.RadioItem>\n  )\n}\n\nexport function DropdownMenuLabel({ className, ...props }: ComponentProps<typeof D.Label>) {\n  return (\n    <D.Label\n      className={cn('px-2 py-2 text-xs font-medium text-muted-foreground', className)}\n      {...props}\n    />\n  )\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof D.Separator>) {\n  return <D.Separator className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />\n}\n\nexport function DropdownMenuSubTrigger({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof D.SubTrigger>) {\n  return (\n    <D.SubTrigger className={cn(item, 'data-[state=open]:bg-accent', className)} {...props}>\n      {children}\n      <ChevronRight className=\"ml-auto\" />\n    </D.SubTrigger>\n  )\n}\n\nexport function DropdownMenuSubContent({\n  className,\n  ...props\n}: ComponentProps<typeof D.SubContent>) {\n  return (\n    <D.Portal>\n      <D.SubContent collisionPadding={16} className={cn(panel, className)} {...props} />\n    </D.Portal>\n  )\n}\n","import { Tooltip as T } from 'radix-ui'\nimport type { ReactNode } from 'react'\nimport { cn } from '@/lib/cn'\n\n/**\n * Tooltip: só para informação complementar, nunca essencial (não existe hover no toque).\n * Informação essencial vai em texto de ajuda visível ou em Popover acionado por toque.\n */\nexport function TooltipProvider({ children }: { children: ReactNode }) {\n  return (\n    <T.Provider delayDuration={300} skipDelayDuration={150}>\n      {children}\n    </T.Provider>\n  )\n}\n\ninterface TooltipProps {\n  content: ReactNode\n  children: ReactNode\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Desliga o tooltip sem mudar a árvore (ex.: sidebar expandida já mostra o rótulo). */\n  disabled?: boolean\n}\n\nexport function Tooltip({ content, children, side = 'top', disabled }: TooltipProps) {\n  if (disabled) return <>{children}</>\n  return (\n    <T.Root>\n      <T.Trigger asChild>{children}</T.Trigger>\n      <T.Portal>\n        <T.Content\n          side={side}\n          sideOffset={8}\n          collisionPadding={16}\n          data-rendra=\"TIP-001\"\n          className={cn(\n            'z-50 max-w-xs rounded-control bg-foreground px-3 py-2 text-xs font-medium text-background',\n            'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0',\n          )}\n        >\n          {content}\n        </T.Content>\n      </T.Portal>\n    </T.Root>\n  )\n}\n"],"mappings":"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"}

package/dist/types/brand/apply-theme.d.ts

@@ -0,0 +1,9 @@
+import type { ThemeResult } from './theme';
+export interface ApplyThemeOptions {
+    /** Default: document.documentElement (o próprio <html>, como applyPalette hoje). */
+    target?: HTMLElement;
+    /** Seletor do claro; o escuro é `${selector}.dark`. Default: deriva de target/id. */
+    selector?: string;
+}
+/** Aplica no DOM o resultado de createTheme. Sem opções, reproduz applyPalette(seed) de hoje. */
+export declare function applyTheme(theme: ThemeResult, options?: ApplyThemeOptions, doc?: Document): void;

package/dist/types/brand/brand-context.d.ts

@@ -0,0 +1,21 @@
+import type { Shape } from '../lib/shape';
+import type { BrandConfig, PaletteConfig } from './types';
+export type ColorMode = 'light' | 'dark' | 'system';
+export interface BrandContextValue {
+    brand: BrandConfig;
+    brands: BrandConfig[];
+    setBrandId: (id: string) => void;
+    mode: ColorMode;
+    resolvedMode: 'light' | 'dark';
+    setMode: (mode: ColorMode) => void;
+    /** Formato do template ativo (fixo por template). */
+    shape: Shape;
+    /** Paleta de cores em uso (por padrão, a do próprio modelo). */
+    palette: PaletteConfig;
+    palettes: PaletteConfig[];
+    /** Usa a paleta de outro template; null volta às cores do próprio modelo. */
+    setPaletteId: (id: string | null) => void;
+    /** Logotipo adequado para a sidebar com a paleta atual. */
+    sidebarLogoVariant: 'light' | 'dark';
+}
+export declare const BrandContext: import("react").Context<BrandContextValue | null>;

package/dist/types/brand/brand-provider.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+import { type ColorMode } from './brand-context';
+import type { ThemeResult } from './theme';
+import type { BrandConfig, PaletteConfig } from './types';
+/**
+ * Armazenamento plugável: get/set simples, para trocar o localStorage padrão por outra fonte
+ * (cookie, backend...), ou desligar com `false`.
+ * `remove` é opcional: quando ausente (armazenamento customizado antigo, sem essa peça),
+ * `clearKey` cai de volta em `set(key, '')`, para não quebrar quem já implementou só get/set.
+ */
+export interface BrandStorage {
+    get(key: string): string | null;
+    set(key: string, value: string): void;
+    remove?(key: string): void;
+}
+interface BrandProviderProps {
+    brands: BrandConfig[];
+    /** Paletas disponíveis. Padrão: uma por modelo. */
+    palettes?: PaletteConfig[];
+    defaultBrand: BrandConfig;
+    children: ReactNode;
+    /**
+     * Tema aplicado em tempo de execução (resultado de createTheme, C5). Aplica sem exigir um id
+     * cadastrado em palettes.ts: o data-palette (ou data-rendra-root, com `target`) recebe o id
+     * do próprio tema.
+     */
+    theme?: ThemeResult;
+    /** Força um modo (útil no Storybook e nos testes). */
+    forcedMode?: 'light' | 'dark';
+    /** Força uma marca pelo id (útil no Storybook e nos testes). */
+    forcedBrandId?: string;
+    /** Força uma paleta pelo id (útil no Storybook). */
+    forcedPaletteId?: string;
+    /** Modo controlado; sem esta prop, o provider guarda o próprio estado (comportamento de hoje). */
+    mode?: ColorMode;
+    onModeChange?(mode: ColorMode): void;
+    /** Marca controlada; sem esta prop, o provider guarda o próprio estado. */
+    brandId?: string;
+    onBrandIdChange?(id: string): void;
+    /** Paleta controlada (null volta às cores do próprio modelo); sem esta prop, estado próprio. */
+    paletteId?: string | null;
+    onPaletteIdChange?(id: string | null): void;
+    /** Armazenamento da preferência; false desliga a persistência. Padrão: localStorage. */
+    storage?: BrandStorage | false;
+    /** Contêiner onde a marca é aplicada (data-*, tema). Padrão: document.documentElement. */
+    target?: HTMLElement;
+}
+export declare function BrandProvider({ brands, palettes: palettesProp, defaultBrand, children, theme, forcedMode, forcedBrandId, forcedPaletteId, mode: modeProp, onModeChange, brandId: brandIdProp, onBrandIdChange, paletteId: paletteIdProp, onPaletteIdChange, storage: storageProp, target, }: BrandProviderProps): import("react").JSX.Element;
+export {};

package/dist/types/brand/palette.d.ts

@@ -0,0 +1,63 @@
+export interface PaletteSeeds {
+    /** Identificador usado em data-palette no <html> (ex.: "safira", "cliente-42"). */
+    id: string;
+    /** Nome curto exibido nos seletores. */
+    name: string;
+    primary: string;
+    primaryHover: string;
+    secondary: string;
+    secondaryHover: string;
+    /** Degradê da marca (sidebar, painel do login, destaque): luz, meio e fundo. */
+    gradient: [string, string, string];
+    /**
+     * Texto sobre a primária e a secundária. 'auto' (padrão) escolhe o que passa AA (branco
+     * ou escuro); 'light' força texto branco e escurece a cor até passar; 'dark', o contrário.
+     */
+    onPrimary?: TextOn;
+    onSecondary?: TextOn;
+}
+export type TextOn = 'auto' | 'light' | 'dark';
+export type PaletteVars = Record<string, string>;
+export interface Palette {
+    seeds: PaletteSeeds;
+    light: PaletteVars;
+    dark: PaletteVars;
+    /** Logotipo adequado sobre a sidebar desta paleta. */
+    sidebarLogo: 'light' | 'dark';
+    /** Ajustes feitos para passar AA (ex.: "secundária escurecida de #EA600D para #C94F0A"). */
+    adjustments: string[];
+}
+/**
+ * Branco e tinta escura de referência. Exportados para o ColorPicker (A1) escolher, por
+ * contraste, a cor do check sobre uma amostra livre do usuário (que não é do tema, então
+ * não tem um par claro/escuro pronto): nenhum componente de fora de src/brand pode ter um
+ * hexadecimal literal, então a comparação usa estas constantes em vez de repetir a cor.
+ * O mesmo par vive em CSS como --rendra-swatch-check-light e --rendra-swatch-check-dark
+ * (src/styles/globals.css); mude os dois lados juntos.
+ */
+export declare const WHITE = "#ffffff";
+/** Texto escuro padrão (o mesmo --foreground do theme.css). */
+export declare const INK = "#0b1d37";
+/** Mistura em sRGB, como color-mix(in srgb): t = quanto de b entra (0 a 1). */
+export declare function mix(a: string, b: string, t: number): string;
+/**
+ * Amostras padrão do ColorPicker (A1): um ponto de partida variado, sem relação com a
+ * paleta da marca. Hexadecimal fixo só pode existir aqui dentro (src/brand); o componente
+ * (fora daqui) sempre recebe a lista por import, nunca com a cor escrita nele.
+ */
+export declare const COLOR_PICKER_SWATCHES: string[];
+/** Contraste WCAG entre duas cores #RRGGBB. */
+export declare function contrast(a: string, b: string): number;
+/** Gera as duas versões (claro e escuro) da paleta a partir das sementes. */
+export declare function createPalette(seeds: PaletteSeeds): Palette;
+/**
+ * CSS da paleta. `isDefault` também aplica a paleta quando o <html> ainda não tem
+ * data-palette (primeira pintura).
+ */
+export declare function paletteCss(palette: Palette, isDefault?: boolean): string;
+/**
+ * White label em tempo de execução: gera a paleta de um cliente e a injeta na página
+ * (um <style> por paleta), sem build. Depois é só usar data-palette com o id dela.
+ * Devolve a paleta gerada, com os ajustes de contraste feitos.
+ */
+export declare function applyPalette(seeds: PaletteSeeds, doc?: Document): Palette;

package/dist/types/brand/public.d.ts

@@ -0,0 +1,6 @@
+export type { BrandConfig, FeedbackType, PaletteConfig, SvgComponent } from './types';
+export { applyPalette, contrast, createPalette, type PaletteSeeds } from './palette';
+export { BrandProvider, type BrandStorage } from './brand-provider';
+export { useBrand } from './use-brand';
+export { createTheme, TOKEN_KEYS, type ThemeMode, type ThemeSeedInput, type ThemeSemanticTokens, type ThemeExplicitInput, type ThemeInput, type ThemeContrastCheck, type ThemeAdjustment, type ThemeResult, } from './theme';
+export { applyTheme, type ApplyThemeOptions } from './apply-theme';

package/dist/types/brand/theme.d.ts

@@ -0,0 +1,80 @@
+export type ThemeMode = 'gerado' | 'explicito' | 'misto';
+export interface ThemeSeedInput {
+    /** Hex, rgb(), hsl() ou tripleta HSL solta ("210 95% 34%"). */
+    primary: string;
+    primaryHover?: string;
+    secondary: string;
+    secondaryHover?: string;
+    /** Degradê da marca (sidebar, painel do login, destaque): luz, meio e fundo. */
+    gradient: [string, string, string];
+    onPrimary?: 'auto' | 'light' | 'dark';
+    onSecondary?: 'auto' | 'light' | 'dark';
+}
+/** Tokens semânticos por nome, sem o prefixo --rendra- (ex.: "primary", "primaryForeground"). */
+export type ThemeSemanticTokens = Partial<Record<(typeof TOKEN_KEYS)[number], string>>;
+export interface ThemeExplicitInput {
+    light: ThemeSemanticTokens;
+    /** Ausente = derivado do claro; presente = respeitado como está. */
+    dark?: ThemeSemanticTokens;
+    /** Default false: só relata o contraste. true: ajusta os pares que falham AA. */
+    enforceContrast?: boolean;
+}
+export interface ThemeInput {
+    /** Usado em data-palette (ou data-rendra-root) e no BrandProvider. */
+    id: string;
+    /** Nome curto exibido nos seletores. */
+    name: string;
+    mode: ThemeMode;
+    /** Obrigatório em 'gerado' e 'misto'. */
+    seed?: ThemeSeedInput;
+    /** Obrigatório em 'explicito' e 'misto' (ao menos `light`). */
+    explicit?: Partial<ThemeExplicitInput>;
+}
+export interface ThemeContrastCheck {
+    /** Nome da variável --rendra-* verificada (o papel de preenchimento do par). */
+    token: string;
+    background: string;
+    foreground: string;
+    ratio: number;
+    passesAA: boolean;
+    mode: 'light' | 'dark';
+}
+export interface ThemeAdjustment {
+    token: string;
+    mode: 'light' | 'dark';
+    requested: string;
+    applied: string;
+    ratio: number;
+}
+export interface ThemeResult {
+    id: string;
+    name: string;
+    /** Logotipo adequado sobre a sidebar deste tema. */
+    sidebarLogo: 'light' | 'dark';
+    vars: {
+        light: Record<string, string>;
+        dark: Record<string, string>;
+    };
+    /** Um item por par de contraste conferido. */
+    report: ThemeContrastCheck[];
+    /** Ajustes aplicados (enforceContrast, ou os já feitos por createPalette no modo gerado). */
+    adjustments: ThemeAdjustment[];
+}
+/**
+ * Todo nome de token que createPalette emite (light ∪ dark), sem prefixo, em camelCase.
+ * É a lista que o modo explícito aceita; qualquer chave fora daqui é ignorada (não é
+ * vocabulário de createPalette, não faz parte deste contrato).
+ */
+export declare const TOKEN_KEYS: readonly ["primary", "primaryForeground", "primaryHover", "primaryHoverForeground", "secondary", "secondaryForeground", "secondaryHover", "secondaryHoverForeground", "primarySoft", "primarySoftForeground", "primaryText", "ring", "accent", "accentForeground", "sidebar", "sidebarImage", "sidebarForeground", "sidebarMutedForeground", "sidebarBorder", "sidebarAccent", "sidebarActive", "sidebarActiveForeground", "sidebarIndicator", "gradientBrand", "gradientBrandForeground", "gradientAccent", "gradientSoft", "chart1", "chart2", "chart3", "chart4", "chart5", "shadowColor", "background", "backgroundImage", "foreground", "card", "cardForeground", "popover", "popoverForeground", "muted", "mutedForeground", "border", "input", "field", "overlay"];
+/**
+ * Tenta reconhecer `value` como cor (hex, rgb(), hsl() ou tripleta HSL solta, "210 95% 34%") e
+ * devolve o hex normalizado em minúsculas. Devolve null quando não é um formato de cor
+ * reconhecido (gradiente, palavra-chave, "none"...), para o chamador decidir o que fazer.
+ */
+export declare function tryParseColorToHex(value: string): string | null;
+/**
+ * Função pura, sem DOM, compatível com SSR. As chaves de vars.light/vars.dark já nascem
+ * prefixadas (--rendra-primary, --rendra-shadow-color...), no mesmo formato que
+ * applyTheme/BrandProvider esperam para injetar no DOM sem reprocessar nada.
+ */
+export declare function createTheme(input: ThemeInput): ThemeResult;

package/dist/types/brand/types.d.ts

@@ -0,0 +1,54 @@
+import type { ComponentType, SVGProps } from 'react';
+import type { Shape } from '../lib/shape';
+export type SvgComponent = ComponentType<SVGProps<SVGSVGElement>>;
+export type FeedbackType = 'success' | 'error' | 'warning' | 'info';
+/** Estilo do rótulo dos campos. */
+export type LabelStyle = 'discreto' | 'normal';
+/** Paleta de cores combinável com qualquer modelo (atributo data-palette no <html>). */
+export interface PaletteConfig {
+    id: string;
+    /** Nome curto exibido nos seletores (ex.: "Safira", "Ardósia"). */
+    name: string;
+    /** Logotipo adequado sobre a sidebar desta paleta. */
+    sidebarLogo: 'light' | 'dark' | 'auto';
+}
+export interface BrandConfig {
+    /** Identificador usado no atributo data-brand do <html>. */
+    id: string;
+    /** Nome do produto exibido na interface e no título da aba. */
+    productName: string;
+    /** Nome da empresa, usado em rodapés e textos legais. */
+    companyName: string;
+    /** Frase curta usada na tela de login. */
+    tagline: string;
+    logo: {
+        /** Logotipo para fundos claros. */
+        light: SvgComponent;
+        /** Logotipo para fundos escuros (sidebar navy, modo escuro). */
+        dark: SvgComponent;
+    };
+    /** Símbolo da marca. Precisa usar fill="currentColor" para ser tingido. */
+    symbol: SvgComponent;
+    /** URL do favicon. */
+    favicon: string;
+    /**
+     * Ícones de feedback. Por padrão o BrandFeedbackIcon usa o símbolo com um selo de status.
+     * Informe um SVG (em currentColor) para substituir o ícone de um tipo específico.
+     */
+    feedbackIcons?: Partial<Record<FeedbackType, SvgComponent>>;
+    /** Formato padrão de todos os componentes: square, rounded ou pill. */
+    shape: Shape;
+    /**
+     * Estilo do rótulo dos campos (atributo data-label no <html>): discreto (padrão; 11px,
+     * maiúsculo, cinza delicado) ou normal (14px, cor do texto).
+     */
+    labelStyle?: LabelStyle;
+    /**
+     * themed (padrão): o logotipo é montado com o símbolo e as cores da paleta ativa,
+     * e acompanha o tema. image: usa os SVGs de logo como estão (arte oficial que não
+     * pode ser recolorida).
+     */
+    logoMode?: 'themed' | 'image';
+    /** Qual logotipo usar sobre a sidebar. Sidebar escura pede o logo 'dark'. */
+    sidebarLogo: 'light' | 'dark' | 'auto';
+}

package/dist/types/brand/use-brand.d.ts

@@ -0,0 +1 @@
+export declare function useBrand(): import("./brand-context").BrandContextValue;

package/dist/types/catalog/components.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Catálogo de códigos de componente (etapa 1.2.0-alpha.1 do plano da v2).
+ *
+ * Cada componente de `src/components/ui` (menos os internos `overlay-shell` e
+ * `picker-panel`, e menos os arquivos de teste) tem ao menos um código aqui. Uma variante
+ * visual relevante (a prop que muda o formato do componente, não tom nem tamanho) ganha o
+ * seu próprio código, numerado 001, 002... na ordem em que aparece neste arquivo.
+ *
+ * O código é o que o cliente escolhe no `docs/BRIEFING_MODELO.md` ("Componentes e
+ * variantes") e o que aparece na vitrine (`/componentes`), no `data-rendra` do elemento
+ * raiz de cada componente e no `registry.json` (`meta.codes`).
+ *
+ * Formato: `^[A-Z]{3,4}-\d{3}$` (ex.: "ABA-001", "BTN-006"). Nunca editar um código depois
+ * de publicado: ele é o identificador estável de uma variante.
+ */
+export interface ComponentCatalogEntry {
+    /** Formato ^[A-Z]{3,4}-\d{3}$, ex.: "ABA-001". Único no catálogo inteiro. */
+    code: string;
+    /** Nome em português do Brasil, ex.: "Abas em linha". */
+    name: string;
+    /** Nome do componente React, ex.: "Tabs". */
+    component: string;
+    /** Caminho relativo a partir de src/, ex.: "components/ui/tabs.tsx". */
+    file: string;
+    /** Props (nome: valor) que definem esta variante especificamente. */
+    variantProps: Record<string, string | number | boolean>;
+    /** Frase curta de quando usar esta variante, para o BRIEFING_MODELO. */
+    whenToUse: string;
+    /**
+     * Esta é a variante que o componente usa quando a prop não é passada (o valor padrão de
+     * `variantProps` no próprio componente React, ex.: `variant = 'line'` em `tabs.tsx`)? No
+     * máximo uma por componente (nenhuma, para o componente sem variante ou sem um padrão real,
+     * como `Chart`, cuja prop `type` é obrigatória); um componente com mais de uma variante tem
+     * exatamente uma marcada `true` (teste de integridade, `assertCatalogIntegrity`). Usada por
+     * `rendra trocar`: um elemento sem a prop conta como esta variante, e trocar para uma
+     * variante `isDefault` remove a prop em vez de escrever o valor por extenso.
+     */
+    isDefault?: true;
+}
+/** Formato do código: de 3 a 4 letras maiúsculas, hífen, três dígitos. */
+export declare const COMPONENT_CODE_PATTERN: RegExp;
+/**
+ * Arquivos de `src/components/ui` que não entram no catálogo: são peças internas, sem uso
+ * direto em tela (nunca aparecem sozinhos numa tela, só dentro de outro componente).
+ */
+export declare const CATALOG_EXCLUDED_FILES: string[];
+export declare const CATALOG: ComponentCatalogEntry[];
+/** Um código específico do catálogo (ex.: para montar a vitrine ou o registry). */
+export declare function getCatalogEntry(code: string): ComponentCatalogEntry | undefined;
+/** Todos os códigos de um componente (ex.: as duas variantes do Tabs), na ordem cadastrada. */
+export declare function catalogByComponent(component: string): ComponentCatalogEntry[];
+/**
+ * Resolve o código de catálogo de um componente a partir das props que definem a variante.
+ * Sem variante (um código só, ou nenhuma prop bate), devolve o primeiro código cadastrado
+ * para o componente. Usado pelos próprios componentes para calcular o `data-rendra`, sem
+ * duplicar a tabela de variantes.
+ */
+export declare function resolveCatalogCode(component: string, props?: Record<string, unknown>): string;
+/** Código que aparece mais de uma vez na lista. */
+export declare function findDuplicateCodes(entries: ComponentCatalogEntry[]): string[];
+/** Código fora do formato ^[A-Z]{3,4}-\d{3}$. */
+export declare function findInvalidFormatCodes(entries: ComponentCatalogEntry[]): string[];
+/**
+ * Código que colidiria com um código de modelo (T1, C4, M5...) de src/config/presets.ts,
+ * cujo padrão é /[TCM]\d+/ (uma letra T, C ou M seguida direto de dígitos, sem hífen).
+ */
+export declare function findPresetCollisions(entries: ComponentCatalogEntry[]): string[];
+/** Arquivo (caminho relativo a src/) que não tem nenhuma entrada no catálogo. */
+export declare function filesMissingCatalogEntry(files: string[], entries: ComponentCatalogEntry[]): string[];
+/**
+ * Componente com mais de uma variante que não tem nenhuma marcada `isDefault` (fase 3, Lote
+ * B: `rendra trocar` precisa saber qual variante um elemento sem a prop representa).
+ */
+export declare function findComponentsWithoutDefault(entries: ComponentCatalogEntry[]): string[];
+/** Componente com mais de uma variante marcada `isDefault` ao mesmo tempo (só pode uma). */
+export declare function findComponentsWithMultipleDefaults(entries: ComponentCatalogEntry[]): string[];
+/**
+ * Lança se houver código duplicado, fora do formato, colidindo com um código de modelo, ou
+ * componente com mais de uma variante sem exatamente uma marcada `isDefault`.
+ */
+export declare function assertCatalogIntegrity(): void;

package/dist/types/chart.d.ts

@@ -0,0 +1 @@
+export * from './components/ui/chart';

package/dist/types/components/app-shell/app-shell.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+import { type ShellLayout } from './layout';
+import type { NavGroup, ShellMenuItem, ShellNotificationsConfig, ShellUser } from './types';
+export interface AppShellProps {
+    /** Menu do sistema: sidebar, barra inferior e busca global. Único obrigatório. */
+    navigation: NavGroup[];
+    /** Sobrescreve o padrão interno (defaultShellLayout), chave a chave. */
+    layout?: Partial<ShellLayout>;
+    /** Usuário exibido no menu do avatar e no rodapé da sidebar. */
+    user?: ShellUser;
+    /** Itens do menu do avatar (ex.: "Meu perfil", "Configurações"). Padrão: nenhum. */
+    userMenuItems?: ShellMenuItem[];
+    /** Chamado ao selecionar "Sair", na sidebar e no menu do avatar. */
+    onLogout?: () => void;
+    /** Rótulo do destino inicial na trilha do header. */
+    homeLabel?: string;
+    /** Ações rápidas da busca global (Ctrl+K), além do atalho de tema. Padrão: nenhuma. */
+    quickActions?: ShellMenuItem[];
+    /** Notificações do sino do header. Sem esta prop, o sino não aparece. */
+    notifications?: ShellNotificationsConfig;
+    /**
+     * Permite que o usuário troque o layout pelo menu do avatar (guardado no navegador).
+     * Desligue em produção se o layout do projeto for fixo.
+     */
+    userConfigurable?: boolean;
+    /** Tela atual. O boilerplate passa o <Outlet /> do react-router. */
+    children?: ReactNode;
+}
+/**
+ * Estrutura da aplicação. Uma única área de rolagem: o <main>.
+ * Nunca importa @/config nem um roteador: recebe o menu, o layout, o usuário e as
+ * notificações por prop; quem navega é o RendraProvider (useCurrentPath/useRendraLink).
+ * Título da aba e meta description (SEO) não são responsabilidade do AppShell: o
+ * boilerplate (src/app/app-layout.tsx) aplica isso com useRouteMeta, que lê @/config/seo.
+ */
+export declare function AppShell({ navigation, layout: layoutProp, user, userMenuItems, onLogout, homeLabel, quickActions, notifications, userConfigurable, children, }: AppShellProps): import("react").JSX.Element;

package/dist/types/components/app-shell/command-search.d.ts

@@ -0,0 +1 @@
+export declare function CommandSearch(): import("react").JSX.Element;

package/dist/types/components/app-shell/header.d.ts

@@ -0,0 +1 @@
+export declare function Header(): import("react").JSX.Element;

package/dist/types/components/app-shell/layout.d.ts

@@ -0,0 +1,53 @@
+export interface ShellLayout {
+    /** Menu lateral (sidebar) ou superior (topbar, no header). */
+    navigation: 'sidebar' | 'topbar';
+    /** Sidebar recolhida (só ícones) ou expandida (ícones e rótulos). */
+    sidebar: 'collapsed' | 'expanded';
+    /** Com a sidebar recolhida, abre por cima do conteúdo ao passar o mouse ou focar pelo teclado. */
+    expandOnHover: boolean;
+    /**
+     * Como abrir itens com submenu:
+     *   panel   abre uma segunda barra lateral com os subitens
+     *   inline  expande os subitens dentro da própria sidebar
+     */
+    submenu: 'panel' | 'inline';
+    /**
+     * Submenu do menu superior:
+     *   dropdown  lista suspensa navegável por item
+     *   mega      mega menu com seções (grupos do navigation.ts) e menus com descrição
+     */
+    topbarSubmenu: 'dropdown' | 'mega';
+    /** Barra de navegação inferior no mobile (até 4 itens marcados em navigation.ts). */
+    bottomNav: boolean;
+}
+export declare const defaultShellLayout: ShellLayout;
+export declare const layoutOptions: {
+    readonly navigation: readonly [{
+        readonly value: "sidebar";
+        readonly label: "Menu lateral";
+    }, {
+        readonly value: "topbar";
+        readonly label: "Menu superior";
+    }];
+    readonly sidebar: readonly [{
+        readonly value: "collapsed";
+        readonly label: "Recolhida (só ícones)";
+    }, {
+        readonly value: "expanded";
+        readonly label: "Expandida";
+    }];
+    readonly submenu: readonly [{
+        readonly value: "panel";
+        readonly label: "Submenu em segunda barra";
+    }, {
+        readonly value: "inline";
+        readonly label: "Submenu dentro da sidebar";
+    }];
+    readonly topbarSubmenu: readonly [{
+        readonly value: "dropdown";
+        readonly label: "Submenu navegável";
+    }, {
+        readonly value: "mega";
+        readonly label: "Mega menu";
+    }];
+};

package/dist/types/components/app-shell/mega-menu.d.ts

@@ -0,0 +1 @@
+export declare function MegaMenu(): import("react").JSX.Element;

package/dist/types/components/app-shell/navigation-utils.d.ts

@@ -0,0 +1,18 @@
+import type { LucideIcon } from 'lucide-react';
+import type { NavGroup, NavItem } from './types';
+/** Destino plano da busca global e do cálculo do item ativo. */
+export interface NavigationTarget {
+    title: string;
+    to: string;
+    group: string;
+    icon: LucideIcon;
+}
+/** Itens marcados `bottomNav`, na ordem do menu. Limite de 4. */
+export declare function getBottomNavItems(navigation: NavGroup[]): NavItem[];
+/** Lista plana de destinos (itens de primeiro nível com rota e filhos de itens com submenu). */
+export declare function getNavigationTargets(navigation: NavGroup[]): NavigationTarget[];
+/**
+ * Destino ativo: o mais específico que combina com o endereço.
+ * Ex.: em /clientes/novo fica ativo "Novo cliente" (e o grupo Cadastros), não "Clientes".
+ */
+export declare function resolveActiveTo(targets: NavigationTarget[], pathname: string): string | null;

package/dist/types/components/app-shell/notifications.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Sino de notificações. Renderizado só quando o AppShell recebe a prop `notifications`;
+ * os itens e os dois retornos de chamada (marcar todas como lidas, marcar uma como lida)
+ * vêm dessa prop, nunca de um mock interno.
+ */
+export declare function Notifications(): import("react").JSX.Element | null;