@lucasbernardosn/react-ui 0.4.0 → 0.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"tag-root-variants.js","names":[],"sources":["../../../../src/components/display/tag/tag-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeFull } from '#types';\n\nexport type TagRootVariants = {\n  /**\n   * Cor do texto, do fundo e da borda, como no `Badge`.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeFull;\n  /**\n   * Altura, padding, tamanho do texto e do botão de remover: `sm` = `h-5`, `md` = `h-6`,\n   * `lg` = `h-7`.\n   *\n   * @default 'sm'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Fundo e borda: `subtle` só com fundo, `surface` com fundo e borda, `outline` só com borda e\n   * `solid` com o fundo cheio (passo 9) e o texto em contraste.\n   *\n   * @default 'subtle'\n   */\n  variant?: 'subtle' | 'surface' | 'outline' | 'solid';\n};\n\nexport const tagRootDefaultVariants: Required<TagRootVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'subtle',\n};\n\n/**\n * Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão\n * explicadas (tabela no README de `display`). As diferenças:\n * - variáveis com o prefixo `--tag-`;\n * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.\n */\nexport const tagRootVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'shrink-0',\n    'align-middle',\n\n    'max-w-full',\n    'min-w-0',\n\n    'border',\n    'rounded-sm',\n    'corner-squircle',\n\n    'font-medium',\n    'leading-none',\n    'whitespace-nowrap',\n    'tabular-nums',\n\n    '[&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--tag-fg:var(--color-gray-11)]',\n          '[--tag-subtle-bg:var(--color-gray-alpha-3)]',\n          '[--tag-surface-bg:var(--color-gray-alpha-2)]',\n          '[--tag-surface-border:var(--color-gray-alpha-6)]',\n          '[--tag-outline-border:var(--color-gray-alpha-8)]',\n          '[--tag-solid-bg:var(--color-black)]',\n          'dark:[--tag-solid-bg:var(--color-white)]',\n          '[--tag-solid-fg:var(--color-white)]',\n          'dark:[--tag-solid-fg:var(--color-black)]',\n        ],\n        brand: [\n          '[--tag-fg:var(--color-brand-11)]',\n          '[--tag-subtle-bg:var(--color-brand-alpha-3)]',\n          '[--tag-surface-bg:var(--color-brand-alpha-2)]',\n          '[--tag-surface-border:var(--color-brand-alpha-6)]',\n          '[--tag-outline-border:var(--color-brand-alpha-8)]',\n          '[--tag-solid-bg:var(--color-brand-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        red: [\n          '[--tag-fg:var(--color-red-11)]',\n          '[--tag-subtle-bg:var(--color-red-alpha-3)]',\n          '[--tag-surface-bg:var(--color-red-alpha-2)]',\n          '[--tag-surface-border:var(--color-red-alpha-6)]',\n          '[--tag-outline-border:var(--color-red-alpha-8)]',\n          '[--tag-solid-bg:var(--color-red-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        green: [\n          '[--tag-fg:var(--color-green-11)]',\n          '[--tag-subtle-bg:var(--color-green-alpha-3)]',\n          '[--tag-surface-bg:var(--color-green-alpha-2)]',\n          '[--tag-surface-border:var(--color-green-alpha-6)]',\n          '[--tag-outline-border:var(--color-green-alpha-8)]',\n          '[--tag-solid-bg:var(--color-green-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        blue: [\n          '[--tag-fg:var(--color-blue-11)]',\n          '[--tag-subtle-bg:var(--color-blue-alpha-3)]',\n          '[--tag-surface-bg:var(--color-blue-alpha-2)]',\n          '[--tag-surface-border:var(--color-blue-alpha-6)]',\n          '[--tag-outline-border:var(--color-blue-alpha-8)]',\n          '[--tag-solid-bg:var(--color-blue-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        amber: [\n          '[--tag-fg:var(--color-amber-11)]',\n          '[--tag-subtle-bg:var(--color-amber-alpha-3)]',\n          '[--tag-surface-bg:var(--color-amber-alpha-2)]',\n          '[--tag-surface-border:var(--color-amber-alpha-6)]',\n          '[--tag-outline-border:var(--color-amber-alpha-8)]',\n          '[--tag-solid-bg:var(--color-amber-9)]',\n          '[--tag-solid-fg:var(--color-black)]',\n        ],\n        purple: [\n          '[--tag-fg:var(--color-purple-11)]',\n          '[--tag-subtle-bg:var(--color-purple-alpha-3)]',\n          '[--tag-surface-bg:var(--color-purple-alpha-2)]',\n          '[--tag-surface-border:var(--color-purple-alpha-6)]',\n          '[--tag-outline-border:var(--color-purple-alpha-8)]',\n          '[--tag-solid-bg:var(--color-purple-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        pink: [\n          '[--tag-fg:var(--color-pink-11)]',\n          '[--tag-subtle-bg:var(--color-pink-alpha-3)]',\n          '[--tag-surface-bg:var(--color-pink-alpha-2)]',\n          '[--tag-surface-border:var(--color-pink-alpha-6)]',\n          '[--tag-outline-border:var(--color-pink-alpha-8)]',\n          '[--tag-solid-bg:var(--color-pink-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        cyan: [\n          '[--tag-fg:var(--color-cyan-11)]',\n          '[--tag-subtle-bg:var(--color-cyan-alpha-3)]',\n          '[--tag-surface-bg:var(--color-cyan-alpha-2)]',\n          '[--tag-surface-border:var(--color-cyan-alpha-6)]',\n          '[--tag-outline-border:var(--color-cyan-alpha-8)]',\n          '[--tag-solid-bg:var(--color-cyan-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        teal: [\n          '[--tag-fg:var(--color-teal-11)]',\n          '[--tag-subtle-bg:var(--color-teal-alpha-3)]',\n          '[--tag-surface-bg:var(--color-teal-alpha-2)]',\n          '[--tag-surface-border:var(--color-teal-alpha-6)]',\n          '[--tag-outline-border:var(--color-teal-alpha-8)]',\n          '[--tag-solid-bg:var(--color-teal-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        orange: [\n          '[--tag-fg:var(--color-orange-11)]',\n          '[--tag-subtle-bg:var(--color-orange-alpha-3)]',\n          '[--tag-surface-bg:var(--color-orange-alpha-2)]',\n          '[--tag-surface-border:var(--color-orange-alpha-6)]',\n          '[--tag-outline-border:var(--color-orange-alpha-8)]',\n          '[--tag-solid-bg:var(--color-orange-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        brown: [\n          '[--tag-fg:var(--color-brown-11)]',\n          '[--tag-subtle-bg:var(--color-brown-alpha-3)]',\n          '[--tag-surface-bg:var(--color-brown-alpha-2)]',\n          '[--tag-surface-border:var(--color-brown-alpha-6)]',\n          '[--tag-outline-border:var(--color-brown-alpha-8)]',\n          '[--tag-solid-bg:var(--color-brown-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        yellow: [\n          '[--tag-fg:var(--color-yellow-11)]',\n          '[--tag-subtle-bg:var(--color-yellow-alpha-3)]',\n          '[--tag-surface-bg:var(--color-yellow-alpha-2)]',\n          '[--tag-surface-border:var(--color-yellow-alpha-6)]',\n          '[--tag-outline-border:var(--color-yellow-alpha-8)]',\n          '[--tag-solid-bg:var(--color-yellow-9)]',\n          '[--tag-solid-fg:var(--color-black)]',\n        ],\n        bronze: [\n          '[--tag-fg:var(--color-bronze-11)]',\n          '[--tag-subtle-bg:var(--color-bronze-alpha-3)]',\n          '[--tag-surface-bg:var(--color-bronze-alpha-2)]',\n          '[--tag-surface-border:var(--color-bronze-alpha-6)]',\n          '[--tag-outline-border:var(--color-bronze-alpha-8)]',\n          '[--tag-solid-bg:var(--color-bronze-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        gold: [\n          '[--tag-fg:var(--color-gold-11)]',\n          '[--tag-subtle-bg:var(--color-gold-alpha-3)]',\n          '[--tag-surface-bg:var(--color-gold-alpha-2)]',\n          '[--tag-surface-border:var(--color-gold-alpha-6)]',\n          '[--tag-outline-border:var(--color-gold-alpha-8)]',\n          '[--tag-solid-bg:var(--color-gold-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        tomato: [\n          '[--tag-fg:var(--color-tomato-11)]',\n          '[--tag-subtle-bg:var(--color-tomato-alpha-3)]',\n          '[--tag-surface-bg:var(--color-tomato-alpha-2)]',\n          '[--tag-surface-border:var(--color-tomato-alpha-6)]',\n          '[--tag-outline-border:var(--color-tomato-alpha-8)]',\n          '[--tag-solid-bg:var(--color-tomato-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        ruby: [\n          '[--tag-fg:var(--color-ruby-11)]',\n          '[--tag-subtle-bg:var(--color-ruby-alpha-3)]',\n          '[--tag-surface-bg:var(--color-ruby-alpha-2)]',\n          '[--tag-surface-border:var(--color-ruby-alpha-6)]',\n          '[--tag-outline-border:var(--color-ruby-alpha-8)]',\n          '[--tag-solid-bg:var(--color-ruby-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        crimson: [\n          '[--tag-fg:var(--color-crimson-11)]',\n          '[--tag-subtle-bg:var(--color-crimson-alpha-3)]',\n          '[--tag-surface-bg:var(--color-crimson-alpha-2)]',\n          '[--tag-surface-border:var(--color-crimson-alpha-6)]',\n          '[--tag-outline-border:var(--color-crimson-alpha-8)]',\n          '[--tag-solid-bg:var(--color-crimson-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        plum: [\n          '[--tag-fg:var(--color-plum-11)]',\n          '[--tag-subtle-bg:var(--color-plum-alpha-3)]',\n          '[--tag-surface-bg:var(--color-plum-alpha-2)]',\n          '[--tag-surface-border:var(--color-plum-alpha-6)]',\n          '[--tag-outline-border:var(--color-plum-alpha-8)]',\n          '[--tag-solid-bg:var(--color-plum-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        violet: [\n          '[--tag-fg:var(--color-violet-11)]',\n          '[--tag-subtle-bg:var(--color-violet-alpha-3)]',\n          '[--tag-surface-bg:var(--color-violet-alpha-2)]',\n          '[--tag-surface-border:var(--color-violet-alpha-6)]',\n          '[--tag-outline-border:var(--color-violet-alpha-8)]',\n          '[--tag-solid-bg:var(--color-violet-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        iris: [\n          '[--tag-fg:var(--color-iris-11)]',\n          '[--tag-subtle-bg:var(--color-iris-alpha-3)]',\n          '[--tag-surface-bg:var(--color-iris-alpha-2)]',\n          '[--tag-surface-border:var(--color-iris-alpha-6)]',\n          '[--tag-outline-border:var(--color-iris-alpha-8)]',\n          '[--tag-solid-bg:var(--color-iris-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        indigo: [\n          '[--tag-fg:var(--color-indigo-11)]',\n          '[--tag-subtle-bg:var(--color-indigo-alpha-3)]',\n          '[--tag-surface-bg:var(--color-indigo-alpha-2)]',\n          '[--tag-surface-border:var(--color-indigo-alpha-6)]',\n          '[--tag-outline-border:var(--color-indigo-alpha-8)]',\n          '[--tag-solid-bg:var(--color-indigo-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        sky: [\n          '[--tag-fg:var(--color-sky-11)]',\n          '[--tag-subtle-bg:var(--color-sky-alpha-3)]',\n          '[--tag-surface-bg:var(--color-sky-alpha-2)]',\n          '[--tag-surface-border:var(--color-sky-alpha-6)]',\n          '[--tag-outline-border:var(--color-sky-alpha-8)]',\n          '[--tag-solid-bg:var(--color-sky-9)]',\n          '[--tag-solid-fg:var(--color-black)]',\n        ],\n        mint: [\n          '[--tag-fg:var(--color-mint-11)]',\n          '[--tag-subtle-bg:var(--color-mint-alpha-3)]',\n          '[--tag-surface-bg:var(--color-mint-alpha-2)]',\n          '[--tag-surface-border:var(--color-mint-alpha-6)]',\n          '[--tag-outline-border:var(--color-mint-alpha-8)]',\n          '[--tag-solid-bg:var(--color-mint-9)]',\n          '[--tag-solid-fg:var(--color-black)]',\n        ],\n        lime: [\n          '[--tag-fg:var(--color-lime-11)]',\n          '[--tag-subtle-bg:var(--color-lime-alpha-3)]',\n          '[--tag-surface-bg:var(--color-lime-alpha-2)]',\n          '[--tag-surface-border:var(--color-lime-alpha-6)]',\n          '[--tag-outline-border:var(--color-lime-alpha-8)]',\n          '[--tag-solid-bg:var(--color-lime-9)]',\n          '[--tag-solid-fg:var(--color-black)]',\n        ],\n        jade: [\n          '[--tag-fg:var(--color-jade-11)]',\n          '[--tag-subtle-bg:var(--color-jade-alpha-3)]',\n          '[--tag-surface-bg:var(--color-jade-alpha-2)]',\n          '[--tag-surface-border:var(--color-jade-alpha-6)]',\n          '[--tag-outline-border:var(--color-jade-alpha-8)]',\n          '[--tag-solid-bg:var(--color-jade-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        grass: [\n          '[--tag-fg:var(--color-grass-11)]',\n          '[--tag-subtle-bg:var(--color-grass-alpha-3)]',\n          '[--tag-surface-bg:var(--color-grass-alpha-2)]',\n          '[--tag-surface-border:var(--color-grass-alpha-6)]',\n          '[--tag-outline-border:var(--color-grass-alpha-8)]',\n          '[--tag-solid-bg:var(--color-grass-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n      },\n      size: {\n        sm: [\n          '[--tag-close-size:--spacing(4)]',\n          'h-5',\n          'px-1.5',\n          'gap-1',\n          'text-xs',\n          '[&_svg]:size-3',\n        ],\n        md: [\n          '[--tag-close-size:--spacing(5)]',\n          'h-6',\n          'px-2',\n          'gap-1',\n          'text-xs',\n          '[&_svg]:size-3.5',\n        ],\n        lg: [\n          '[--tag-close-size:--spacing(5)]',\n          'h-7',\n          'px-2.5',\n          'gap-1.5',\n          'text-sm',\n          '[&_svg]:size-4',\n        ],\n      },\n      variant: {\n        // A borda transparente fica para as variantes terem a mesma medida.\n        subtle: [\n          'border-transparent',\n          'bg-(--tag-subtle-bg)',\n          'text-(--tag-fg)',\n        ],\n        surface: [\n          'border-(--tag-surface-border)',\n          'bg-(--tag-surface-bg)',\n          'text-(--tag-fg)',\n        ],\n        outline: ['border-(--tag-outline-border)', 'text-(--tag-fg)'],\n        solid: [\n          'border-transparent',\n          'bg-(--tag-solid-bg)',\n          'text-(--tag-solid-fg)',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: tagRootDefaultVariants.colorScheme,\n      size: tagRootDefaultVariants.size,\n      variant: tagRootDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AA0BA,MAAa,yBAAoD;CAC/D,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;AAQA,MAAa,kBAAkB,IAC7B;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;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,KAAK;IACH;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,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,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,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,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,SAAS;IACP;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,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,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;EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GAEP,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS,CAAC,iCAAiC,iBAAiB;GAC5D,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,uBAAuB;EACpC,MAAM,uBAAuB;EAC7B,SAAS,uBAAuB;CAClC;AACF,CACF"}
+{"version":3,"file":"tag-root-variants.js","names":[],"sources":["../../../../src/components/display/tag/tag-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeFull } from '#types';\n\nexport type TagRootVariants = {\n  /**\n   * Cor do texto, do fundo e da borda, como no `Badge`.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeFull;\n  /**\n   * Altura, padding, tamanho do texto e do botão de remover: `sm` = `h-5`, `md` = `h-6`,\n   * `lg` = `h-7`.\n   *\n   * @default 'sm'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Fundo e borda: `subtle` só com fundo, `surface` com fundo e borda, `outline` só com borda e\n   * `solid` com o fundo cheio (passo 9) e o texto em contraste.\n   *\n   * @default 'subtle'\n   */\n  variant?: 'subtle' | 'surface' | 'outline' | 'solid';\n};\n\nexport const tagRootDefaultVariants: Required<TagRootVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'subtle',\n};\n\n/**\n * Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão\n * explicadas. As diferenças:\n * - variáveis com o prefixo `--tag-`;\n * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.\n */\nexport const tagRootVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'shrink-0',\n    'align-middle',\n\n    'max-w-full',\n    'min-w-0',\n\n    'border',\n    'rounded-sm',\n    'corner-squircle',\n\n    'font-medium',\n    'leading-none',\n    'whitespace-nowrap',\n    'tabular-nums',\n\n    '[&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--tag-fg:var(--gray-11)]',\n          '[--tag-subtle-bg:var(--gray-a3)]',\n          '[--tag-surface-bg:var(--gray-a2)]',\n          '[--tag-surface-border:var(--gray-6)]',\n          '[--tag-outline-border:var(--gray-8)]',\n          '[--tag-solid-bg:var(--color-black)]',\n          'dark:[--tag-solid-bg:var(--color-white)]',\n          '[--tag-solid-fg:var(--color-white)]',\n          'dark:[--tag-solid-fg:var(--color-black)]',\n        ],\n        accent: [\n          '[--tag-fg:var(--accent-11)]',\n          '[--tag-subtle-bg:var(--accent-a3)]',\n          '[--tag-surface-bg:var(--accent-a2)]',\n          '[--tag-surface-border:var(--accent-6)]',\n          '[--tag-outline-border:var(--accent-8)]',\n          '[--tag-solid-bg:var(--accent-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        red: [\n          '[--tag-fg:var(--red-11)]',\n          '[--tag-subtle-bg:var(--red-a3)]',\n          '[--tag-surface-bg:var(--red-a2)]',\n          '[--tag-surface-border:var(--red-6)]',\n          '[--tag-outline-border:var(--red-8)]',\n          '[--tag-solid-bg:var(--red-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        green: [\n          '[--tag-fg:var(--green-11)]',\n          '[--tag-subtle-bg:var(--green-a3)]',\n          '[--tag-surface-bg:var(--green-a2)]',\n          '[--tag-surface-border:var(--green-6)]',\n          '[--tag-outline-border:var(--green-8)]',\n          '[--tag-solid-bg:var(--green-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        blue: [\n          '[--tag-fg:var(--blue-11)]',\n          '[--tag-subtle-bg:var(--blue-a3)]',\n          '[--tag-surface-bg:var(--blue-a2)]',\n          '[--tag-surface-border:var(--blue-6)]',\n          '[--tag-outline-border:var(--blue-8)]',\n          '[--tag-solid-bg:var(--blue-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        amber: [\n          '[--tag-fg:var(--amber-11)]',\n          '[--tag-subtle-bg:var(--amber-a3)]',\n          '[--tag-surface-bg:var(--amber-a2)]',\n          '[--tag-surface-border:var(--amber-6)]',\n          '[--tag-outline-border:var(--amber-8)]',\n          '[--tag-solid-bg:var(--amber-9)]',\n          '[--tag-solid-fg:var(--color-black)]',\n        ],\n        purple: [\n          '[--tag-fg:var(--purple-11)]',\n          '[--tag-subtle-bg:var(--purple-a3)]',\n          '[--tag-surface-bg:var(--purple-a2)]',\n          '[--tag-surface-border:var(--purple-6)]',\n          '[--tag-outline-border:var(--purple-8)]',\n          '[--tag-solid-bg:var(--purple-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        pink: [\n          '[--tag-fg:var(--pink-11)]',\n          '[--tag-subtle-bg:var(--pink-a3)]',\n          '[--tag-surface-bg:var(--pink-a2)]',\n          '[--tag-surface-border:var(--pink-6)]',\n          '[--tag-outline-border:var(--pink-8)]',\n          '[--tag-solid-bg:var(--pink-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        cyan: [\n          '[--tag-fg:var(--cyan-11)]',\n          '[--tag-subtle-bg:var(--cyan-a3)]',\n          '[--tag-surface-bg:var(--cyan-a2)]',\n          '[--tag-surface-border:var(--cyan-6)]',\n          '[--tag-outline-border:var(--cyan-8)]',\n          '[--tag-solid-bg:var(--cyan-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        teal: [\n          '[--tag-fg:var(--teal-11)]',\n          '[--tag-subtle-bg:var(--teal-a3)]',\n          '[--tag-surface-bg:var(--teal-a2)]',\n          '[--tag-surface-border:var(--teal-6)]',\n          '[--tag-outline-border:var(--teal-8)]',\n          '[--tag-solid-bg:var(--teal-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        orange: [\n          '[--tag-fg:var(--orange-11)]',\n          '[--tag-subtle-bg:var(--orange-a3)]',\n          '[--tag-surface-bg:var(--orange-a2)]',\n          '[--tag-surface-border:var(--orange-6)]',\n          '[--tag-outline-border:var(--orange-8)]',\n          '[--tag-solid-bg:var(--orange-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        brown: [\n          '[--tag-fg:var(--brown-11)]',\n          '[--tag-subtle-bg:var(--brown-a3)]',\n          '[--tag-surface-bg:var(--brown-a2)]',\n          '[--tag-surface-border:var(--brown-6)]',\n          '[--tag-outline-border:var(--brown-8)]',\n          '[--tag-solid-bg:var(--brown-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        yellow: [\n          '[--tag-fg:var(--yellow-11)]',\n          '[--tag-subtle-bg:var(--yellow-a3)]',\n          '[--tag-surface-bg:var(--yellow-a2)]',\n          '[--tag-surface-border:var(--yellow-6)]',\n          '[--tag-outline-border:var(--yellow-8)]',\n          '[--tag-solid-bg:var(--yellow-9)]',\n          '[--tag-solid-fg:var(--color-black)]',\n        ],\n        bronze: [\n          '[--tag-fg:var(--bronze-11)]',\n          '[--tag-subtle-bg:var(--bronze-a3)]',\n          '[--tag-surface-bg:var(--bronze-a2)]',\n          '[--tag-surface-border:var(--bronze-6)]',\n          '[--tag-outline-border:var(--bronze-8)]',\n          '[--tag-solid-bg:var(--bronze-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        gold: [\n          '[--tag-fg:var(--gold-11)]',\n          '[--tag-subtle-bg:var(--gold-a3)]',\n          '[--tag-surface-bg:var(--gold-a2)]',\n          '[--tag-surface-border:var(--gold-6)]',\n          '[--tag-outline-border:var(--gold-8)]',\n          '[--tag-solid-bg:var(--gold-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        tomato: [\n          '[--tag-fg:var(--tomato-11)]',\n          '[--tag-subtle-bg:var(--tomato-a3)]',\n          '[--tag-surface-bg:var(--tomato-a2)]',\n          '[--tag-surface-border:var(--tomato-6)]',\n          '[--tag-outline-border:var(--tomato-8)]',\n          '[--tag-solid-bg:var(--tomato-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        ruby: [\n          '[--tag-fg:var(--ruby-11)]',\n          '[--tag-subtle-bg:var(--ruby-a3)]',\n          '[--tag-surface-bg:var(--ruby-a2)]',\n          '[--tag-surface-border:var(--ruby-6)]',\n          '[--tag-outline-border:var(--ruby-8)]',\n          '[--tag-solid-bg:var(--ruby-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        crimson: [\n          '[--tag-fg:var(--crimson-11)]',\n          '[--tag-subtle-bg:var(--crimson-a3)]',\n          '[--tag-surface-bg:var(--crimson-a2)]',\n          '[--tag-surface-border:var(--crimson-6)]',\n          '[--tag-outline-border:var(--crimson-8)]',\n          '[--tag-solid-bg:var(--crimson-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        plum: [\n          '[--tag-fg:var(--plum-11)]',\n          '[--tag-subtle-bg:var(--plum-a3)]',\n          '[--tag-surface-bg:var(--plum-a2)]',\n          '[--tag-surface-border:var(--plum-6)]',\n          '[--tag-outline-border:var(--plum-8)]',\n          '[--tag-solid-bg:var(--plum-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        violet: [\n          '[--tag-fg:var(--violet-11)]',\n          '[--tag-subtle-bg:var(--violet-a3)]',\n          '[--tag-surface-bg:var(--violet-a2)]',\n          '[--tag-surface-border:var(--violet-6)]',\n          '[--tag-outline-border:var(--violet-8)]',\n          '[--tag-solid-bg:var(--violet-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        iris: [\n          '[--tag-fg:var(--iris-11)]',\n          '[--tag-subtle-bg:var(--iris-a3)]',\n          '[--tag-surface-bg:var(--iris-a2)]',\n          '[--tag-surface-border:var(--iris-6)]',\n          '[--tag-outline-border:var(--iris-8)]',\n          '[--tag-solid-bg:var(--iris-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        indigo: [\n          '[--tag-fg:var(--indigo-11)]',\n          '[--tag-subtle-bg:var(--indigo-a3)]',\n          '[--tag-surface-bg:var(--indigo-a2)]',\n          '[--tag-surface-border:var(--indigo-6)]',\n          '[--tag-outline-border:var(--indigo-8)]',\n          '[--tag-solid-bg:var(--indigo-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        sky: [\n          '[--tag-fg:var(--sky-11)]',\n          '[--tag-subtle-bg:var(--sky-a3)]',\n          '[--tag-surface-bg:var(--sky-a2)]',\n          '[--tag-surface-border:var(--sky-6)]',\n          '[--tag-outline-border:var(--sky-8)]',\n          '[--tag-solid-bg:var(--sky-9)]',\n          '[--tag-solid-fg:var(--color-black)]',\n        ],\n        mint: [\n          '[--tag-fg:var(--mint-11)]',\n          '[--tag-subtle-bg:var(--mint-a3)]',\n          '[--tag-surface-bg:var(--mint-a2)]',\n          '[--tag-surface-border:var(--mint-6)]',\n          '[--tag-outline-border:var(--mint-8)]',\n          '[--tag-solid-bg:var(--mint-9)]',\n          '[--tag-solid-fg:var(--color-black)]',\n        ],\n        lime: [\n          '[--tag-fg:var(--lime-11)]',\n          '[--tag-subtle-bg:var(--lime-a3)]',\n          '[--tag-surface-bg:var(--lime-a2)]',\n          '[--tag-surface-border:var(--lime-6)]',\n          '[--tag-outline-border:var(--lime-8)]',\n          '[--tag-solid-bg:var(--lime-9)]',\n          '[--tag-solid-fg:var(--color-black)]',\n        ],\n        jade: [\n          '[--tag-fg:var(--jade-11)]',\n          '[--tag-subtle-bg:var(--jade-a3)]',\n          '[--tag-surface-bg:var(--jade-a2)]',\n          '[--tag-surface-border:var(--jade-6)]',\n          '[--tag-outline-border:var(--jade-8)]',\n          '[--tag-solid-bg:var(--jade-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n        grass: [\n          '[--tag-fg:var(--grass-11)]',\n          '[--tag-subtle-bg:var(--grass-a3)]',\n          '[--tag-surface-bg:var(--grass-a2)]',\n          '[--tag-surface-border:var(--grass-6)]',\n          '[--tag-outline-border:var(--grass-8)]',\n          '[--tag-solid-bg:var(--grass-9)]',\n          '[--tag-solid-fg:var(--color-white)]',\n        ],\n      },\n      size: {\n        sm: [\n          '[--tag-close-size:--spacing(4)]',\n          'h-5',\n          'px-1.5',\n          'gap-1',\n          'text-xs',\n          '[&_svg]:size-3',\n        ],\n        md: [\n          '[--tag-close-size:--spacing(5)]',\n          'h-6',\n          'px-2',\n          'gap-1',\n          'text-xs',\n          '[&_svg]:size-3.5',\n        ],\n        lg: [\n          '[--tag-close-size:--spacing(5)]',\n          'h-7',\n          'px-2.5',\n          'gap-1.5',\n          'text-sm',\n          '[&_svg]:size-4',\n        ],\n      },\n      variant: {\n        // A borda transparente fica para as variantes terem a mesma medida.\n        subtle: [\n          'border-transparent',\n          'bg-(--tag-subtle-bg)',\n          'text-(--tag-fg)',\n        ],\n        surface: [\n          'border-(--tag-surface-border)',\n          'bg-(--tag-surface-bg)',\n          'text-(--tag-fg)',\n        ],\n        outline: ['border-(--tag-outline-border)', 'text-(--tag-fg)'],\n        solid: [\n          'border-transparent',\n          'bg-(--tag-solid-bg)',\n          'text-(--tag-solid-fg)',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: tagRootDefaultVariants.colorScheme,\n      size: tagRootDefaultVariants.size,\n      variant: tagRootDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AA0BA,MAAa,yBAAoD;CAC/D,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;AAQA,MAAa,kBAAkB,IAC7B;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;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,OAAO;IACL;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,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,QAAQ;IACN;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,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,SAAS;IACP;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,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,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;EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GAEP,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS,CAAC,iCAAiC,iBAAiB;GAC5D,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,uBAAuB;EACpC,MAAM,uBAAuB;EAC7B,SAAS,uBAAuB;CAClC;AACF,CACF"}

package/dist/components/feedback/alert/alert-description.d.ts

@@ -6,8 +6,7 @@ export type AlertDescriptionProps = useRender.ComponentProps<'div'>;
  * `status`): a diferença entre os dois fica no peso. Fora de um `Root`, cai no gray 11 das
  * descrições. É um `div`, para aceitar parágrafos e listas dentro.
  *
- * Origem do `Toast.Description`, que o copia (tabela no README de `feedback`). Uma mudança aqui
- * vale para a cópia na mesma rodada.
+ * Origem do `Toast.Description`, que o copia. Uma mudança aqui vale para a cópia na mesma rodada.
  */
 export declare const AlertDescription: {
   (props: AlertDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/feedback/alert/alert-description.js

@@ -6,8 +6,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 * `status`): a diferença entre os dois fica no peso. Fora de um `Root`, cai no gray 11 das
 * descrições. É um `div`, para aceitar parágrafos e listas dentro.
 *
-* Origem do `Toast.Description`, que o copia (tabela no README de `feedback`). Uma mudança aqui
-* vale para a cópia na mesma rodada.
+* Origem do `Toast.Description`, que o copia. Uma mudança aqui vale para a cópia na mesma rodada.
 */
 const AlertDescription = (props) => {
 	const { render, className, ...rest } = props;
@@ -16,7 +15,7 @@ const AlertDescription = (props) => {
 		className: mergeTwClassNames([
 			"text-sm",
 			"leading-5",
-			"text-(--alert-fg,var(--color-gray-11))",
+			"text-(--alert-fg,var(--gray-11))",
 			"text-pretty"
 		], className)
 	};

package/dist/components/feedback/alert/alert-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-description.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-description.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDescriptionProps = useRender.ComponentProps<'div'>;\n\n/**\n * Texto de apoio do alerta, com a tipografia fixa das descrições, na cor do título (passo 12 do\n * `status`): a diferença entre os dois fica no peso. Fora de um `Root`, cai no gray 11 das\n * descrições. É um `div`, para aceitar parágrafos e listas dentro.\n *\n * Origem do `Toast.Description`, que o copia (tabela no README de `feedback`). Uma mudança aqui\n * vale para a cópia na mesma rodada.\n */\nexport const AlertDescription = (props: AlertDescriptionProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Alert.Description',\n    className: mergeTwClassNames(\n      [\n        'text-sm',\n        'leading-5',\n        'text-(--alert-fg,var(--color-gray-11))',\n        'text-pretty',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDescription.displayName = 'Alert.Description';\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"alert-description.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-description.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDescriptionProps = useRender.ComponentProps<'div'>;\n\n/**\n * Texto de apoio do alerta, com a tipografia fixa das descrições, na cor do título (passo 12 do\n * `status`): a diferença entre os dois fica no peso. Fora de um `Root`, cai no gray 11 das\n * descrições. É um `div`, para aceitar parágrafos e listas dentro.\n *\n * Origem do `Toast.Description`, que o copia. Uma mudança aqui vale para a cópia na mesma rodada.\n */\nexport const AlertDescription = (props: AlertDescriptionProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Alert.Description',\n    className: mergeTwClassNames(\n      [\n        'text-sm',\n        'leading-5',\n        'text-(--alert-fg,var(--gray-11))',\n        'text-pretty',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDescription.displayName = 'Alert.Description';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,iBAAiB,cAAc"}

package/dist/components/feedback/alert/alert-indicator.d.ts

@@ -10,8 +10,8 @@ export type AlertIndicatorProps = useRender.ComponentProps<'div'>;
  *
  * Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.
  *
- * Origem do `Toast.Indicator` e do `AlertDialog.Indicator`, que o copiam (tabela no README de
- * `feedback`). Uma mudança aqui vale para as cópias na mesma rodada.
+ * Origem do `Toast.Indicator` e do `AlertDialog.Indicator`, que o copiam. Uma mudança aqui vale
+ * para as cópias na mesma rodada.
  */
 export declare const AlertIndicator: {
   (props: AlertIndicatorProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/components/feedback/alert/alert-indicator.js

@@ -13,8 +13,8 @@ import { CheckCircleIcon, InfoIcon, WarningCircleIcon, WarningIcon } from "@phos
 *
 * Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.
 *
-* Origem do `Toast.Indicator` e do `AlertDialog.Indicator`, que o copiam (tabela no README de
-* `feedback`). Uma mudança aqui vale para as cópias na mesma rodada.
+* Origem do `Toast.Indicator` e do `AlertDialog.Indicator`, que o copiam. Uma mudança aqui vale
+* para as cópias na mesma rodada.
 */
 const AlertIndicator = (props) => {
 	const { render, className, children, ...rest } = props;

package/dist/components/feedback/alert/alert-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-indicator.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  WarningIcon,\n} from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport {\n  type AlertVariants,\n  alertDefaultVariants,\n  useAlertContext,\n} from './use-alert-context';\n\nexport type AlertIndicatorProps = useRender.ComponentProps<'div'>;\n\n/**\n * Ícone do alerta, na cor do `status`. Sem filhos, mostra o ícone do `status`, pelo `Icon` da lib;\n * com filhos (outro ícone, um `Spinner`), usa os filhos, e um ícone próprio entra pelo `Icon` para\n * ter o mesmo traço. O `svg` mede `1em` (20px), numa caixa da altura da linha do título, para ficar\n * alinhado à primeira linha.\n *\n * Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.\n *\n * Origem do `Toast.Indicator` e do `AlertDialog.Indicator`, que o copiam (tabela no README de\n * `feedback`). Uma mudança aqui vale para as cópias na mesma rodada.\n */\nexport const AlertIndicator = (props: AlertIndicatorProps) => {\n  const { render, className, children, ...rest } = props;\n\n  const { status = alertDefaultVariants.status } = useAlertContext();\n\n  const StatusIcon = statusIcons[status];\n\n  const baseProps = {\n    'data-component': 'Alert.Indicator',\n    'aria-hidden': true,\n    children: children ?? <Icon render={<StatusIcon />} />,\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n\n        'h-5',\n\n        'text-(--alert-fg)',\n        'text-xl',\n        // Sem entrelinha, um emoji ocuparia mais altura que o ícone.\n        'leading-none',\n\n        '[&_svg]:size-[1em]',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertIndicator.displayName = 'Alert.Indicator';\n\nconst statusIcons: Record<\n  Required<AlertVariants>['status'],\n  React.ComponentType\n> = {\n  neutral: InfoIcon,\n  info: InfoIcon,\n  success: CheckCircleIcon,\n  warning: WarningIcon,\n  error: WarningCircleIcon,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,EAAE,SAAS,qBAAqB,WAAW,gBAAgB;CAEjE,MAAM,aAAa,YAAY;CAE/B,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,UAAU,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,YAAD,CAAa,CAAA,EAAI,CAAA;EACrD,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc;AAE7B,MAAM,cAGF;CACF,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT"}
+{"version":3,"file":"alert-indicator.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  WarningIcon,\n} from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport {\n  type AlertVariants,\n  alertDefaultVariants,\n  useAlertContext,\n} from './use-alert-context';\n\nexport type AlertIndicatorProps = useRender.ComponentProps<'div'>;\n\n/**\n * Ícone do alerta, na cor do `status`. Sem filhos, mostra o ícone do `status`, pelo `Icon` da lib;\n * com filhos (outro ícone, um `Spinner`), usa os filhos, e um ícone próprio entra pelo `Icon` para\n * ter o mesmo traço. O `svg` mede `1em` (20px), numa caixa da altura da linha do título, para ficar\n * alinhado à primeira linha.\n *\n * Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.\n *\n * Origem do `Toast.Indicator` e do `AlertDialog.Indicator`, que o copiam. Uma mudança aqui vale\n * para as cópias na mesma rodada.\n */\nexport const AlertIndicator = (props: AlertIndicatorProps) => {\n  const { render, className, children, ...rest } = props;\n\n  const { status = alertDefaultVariants.status } = useAlertContext();\n\n  const StatusIcon = statusIcons[status];\n\n  const baseProps = {\n    'data-component': 'Alert.Indicator',\n    'aria-hidden': true,\n    children: children ?? <Icon render={<StatusIcon />} />,\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n\n        'h-5',\n\n        'text-(--alert-fg)',\n        'text-xl',\n        // Sem entrelinha, um emoji ocuparia mais altura que o ícone.\n        'leading-none',\n\n        '[&_svg]:size-[1em]',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertIndicator.displayName = 'Alert.Indicator';\n\nconst statusIcons: Record<\n  Required<AlertVariants>['status'],\n  React.ComponentType\n> = {\n  neutral: InfoIcon,\n  info: InfoIcon,\n  success: CheckCircleIcon,\n  warning: WarningIcon,\n  error: WarningCircleIcon,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,EAAE,SAAS,qBAAqB,WAAW,gBAAgB;CAEjE,MAAM,aAAa,YAAY;CAE/B,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,UAAU,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,YAAD,CAAa,CAAA,EAAI,CAAA;EACrD,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc;AAE7B,MAAM,cAGF;CACF,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT"}

package/dist/components/feedback/alert/alert-root-variants.d.ts

@@ -1,9 +1,9 @@
 //#region src/components/feedback/alert/alert-root-variants.d.ts
 /**
  * O `status` só declara as variáveis `--alert-*`, e a `variant` decide onde cada uma entra. Assim
- * não há um bloco por combinação de `status` e `variant`. O fundo e a borda usam a escala alpha,
- * para o alerta funcionar sobre qualquer fundo. O `Alert.Indicator`, o `Alert.Title` e o
- * `Alert.Description` leem a mesma cor, no passo 12, em `--alert-fg`.
+ * não há um bloco por combinação de `status` e `variant`. O fundo usa a escala alpha, para o
+ * alerta funcionar sobre qualquer fundo, e a borda o passo sólido. O `Alert.Indicator`, o
+ * `Alert.Title` e o `Alert.Description` leem a mesma cor, no passo 12, em `--alert-fg`.
  */
 export declare const alertRootVariants: (props?: ({
   status?: "neutral" | "info" | "success" | "warning" | "error" | null | undefined;

package/dist/components/feedback/alert/alert-root-variants.js

@@ -3,9 +3,9 @@ import { cva } from "class-variance-authority";
 //#region src/components/feedback/alert/alert-root-variants.ts
 /**
 * O `status` só declara as variáveis `--alert-*`, e a `variant` decide onde cada uma entra. Assim
-* não há um bloco por combinação de `status` e `variant`. O fundo e a borda usam a escala alpha,
-* para o alerta funcionar sobre qualquer fundo. O `Alert.Indicator`, o `Alert.Title` e o
-* `Alert.Description` leem a mesma cor, no passo 12, em `--alert-fg`.
+* não há um bloco por combinação de `status` e `variant`. O fundo usa a escala alpha, para o
+* alerta funcionar sobre qualquer fundo, e a borda o passo sólido. O `Alert.Indicator`, o
+* `Alert.Title` e o `Alert.Description` leem a mesma cor, no passo 12, em `--alert-fg`.
 */
 const alertRootVariants = cva([
 	"flex",
@@ -23,39 +23,39 @@ const alertRootVariants = cva([
 	variants: {
 		status: {
 			neutral: [
-				"[--alert-subtle-bg:var(--color-gray-alpha-3)]",
-				"[--alert-surface-bg:var(--color-gray-alpha-2)]",
-				"[--alert-surface-border:var(--color-gray-alpha-6)]",
-				"[--alert-outline-border:var(--color-gray-alpha-7)]",
-				"[--alert-fg:var(--color-gray-12)]"
+				"[--alert-subtle-bg:var(--gray-a3)]",
+				"[--alert-surface-bg:var(--gray-a2)]",
+				"[--alert-surface-border:var(--gray-6)]",
+				"[--alert-outline-border:var(--gray-7)]",
+				"[--alert-fg:var(--gray-12)]"
 			],
 			info: [
-				"[--alert-subtle-bg:var(--color-blue-alpha-3)]",
-				"[--alert-surface-bg:var(--color-blue-alpha-2)]",
-				"[--alert-surface-border:var(--color-blue-alpha-6)]",
-				"[--alert-outline-border:var(--color-blue-alpha-7)]",
-				"[--alert-fg:var(--color-blue-12)]"
+				"[--alert-subtle-bg:var(--blue-a3)]",
+				"[--alert-surface-bg:var(--blue-a2)]",
+				"[--alert-surface-border:var(--blue-6)]",
+				"[--alert-outline-border:var(--blue-7)]",
+				"[--alert-fg:var(--blue-12)]"
 			],
 			success: [
-				"[--alert-subtle-bg:var(--color-green-alpha-3)]",
-				"[--alert-surface-bg:var(--color-green-alpha-2)]",
-				"[--alert-surface-border:var(--color-green-alpha-6)]",
-				"[--alert-outline-border:var(--color-green-alpha-7)]",
-				"[--alert-fg:var(--color-green-12)]"
+				"[--alert-subtle-bg:var(--green-a3)]",
+				"[--alert-surface-bg:var(--green-a2)]",
+				"[--alert-surface-border:var(--green-6)]",
+				"[--alert-outline-border:var(--green-7)]",
+				"[--alert-fg:var(--green-12)]"
 			],
 			warning: [
-				"[--alert-subtle-bg:var(--color-amber-alpha-3)]",
-				"[--alert-surface-bg:var(--color-amber-alpha-2)]",
-				"[--alert-surface-border:var(--color-amber-alpha-6)]",
-				"[--alert-outline-border:var(--color-amber-alpha-7)]",
-				"[--alert-fg:var(--color-amber-12)]"
+				"[--alert-subtle-bg:var(--amber-a3)]",
+				"[--alert-surface-bg:var(--amber-a2)]",
+				"[--alert-surface-border:var(--amber-6)]",
+				"[--alert-outline-border:var(--amber-7)]",
+				"[--alert-fg:var(--amber-12)]"
 			],
 			error: [
-				"[--alert-subtle-bg:var(--color-red-alpha-3)]",
-				"[--alert-surface-bg:var(--color-red-alpha-2)]",
-				"[--alert-surface-border:var(--color-red-alpha-6)]",
-				"[--alert-outline-border:var(--color-red-alpha-7)]",
-				"[--alert-fg:var(--color-red-12)]"
+				"[--alert-subtle-bg:var(--red-a3)]",
+				"[--alert-surface-bg:var(--red-a2)]",
+				"[--alert-surface-border:var(--red-6)]",
+				"[--alert-outline-border:var(--red-7)]",
+				"[--alert-fg:var(--red-12)]"
 			]
 		},
 		variant: {

package/dist/components/feedback/alert/alert-root-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-root-variants.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { alertDefaultVariants } from './use-alert-context';\n\n/**\n * O `status` só declara as variáveis `--alert-*`, e a `variant` decide onde cada uma entra. Assim\n * não há um bloco por combinação de `status` e `variant`. O fundo e a borda usam a escala alpha,\n * para o alerta funcionar sobre qualquer fundo. O `Alert.Indicator`, o `Alert.Title` e o\n * `Alert.Description` leem a mesma cor, no passo 12, em `--alert-fg`.\n */\nexport const alertRootVariants = cva(\n  [\n    'flex',\n    'items-start',\n    'gap-2',\n\n    'w-full',\n    'min-w-0',\n\n    'p-4',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    'text-start',\n    'wrap-break-word',\n  ],\n  {\n    variants: {\n      status: {\n        neutral: [\n          '[--alert-subtle-bg:var(--color-gray-alpha-3)]',\n          '[--alert-surface-bg:var(--color-gray-alpha-2)]',\n          '[--alert-surface-border:var(--color-gray-alpha-6)]',\n          '[--alert-outline-border:var(--color-gray-alpha-7)]',\n          '[--alert-fg:var(--color-gray-12)]',\n        ],\n        info: [\n          '[--alert-subtle-bg:var(--color-blue-alpha-3)]',\n          '[--alert-surface-bg:var(--color-blue-alpha-2)]',\n          '[--alert-surface-border:var(--color-blue-alpha-6)]',\n          '[--alert-outline-border:var(--color-blue-alpha-7)]',\n          '[--alert-fg:var(--color-blue-12)]',\n        ],\n        success: [\n          '[--alert-subtle-bg:var(--color-green-alpha-3)]',\n          '[--alert-surface-bg:var(--color-green-alpha-2)]',\n          '[--alert-surface-border:var(--color-green-alpha-6)]',\n          '[--alert-outline-border:var(--color-green-alpha-7)]',\n          '[--alert-fg:var(--color-green-12)]',\n        ],\n        warning: [\n          '[--alert-subtle-bg:var(--color-amber-alpha-3)]',\n          '[--alert-surface-bg:var(--color-amber-alpha-2)]',\n          '[--alert-surface-border:var(--color-amber-alpha-6)]',\n          '[--alert-outline-border:var(--color-amber-alpha-7)]',\n          '[--alert-fg:var(--color-amber-12)]',\n        ],\n        error: [\n          '[--alert-subtle-bg:var(--color-red-alpha-3)]',\n          '[--alert-surface-bg:var(--color-red-alpha-2)]',\n          '[--alert-surface-border:var(--color-red-alpha-6)]',\n          '[--alert-outline-border:var(--color-red-alpha-7)]',\n          '[--alert-fg:var(--color-red-12)]',\n        ],\n      },\n      variant: {\n        surface: ['border-(--alert-surface-border)', 'bg-(--alert-surface-bg)'],\n        // A borda transparente fica para as três variantes terem a mesma medida.\n        subtle: ['border-transparent', 'bg-(--alert-subtle-bg)'],\n        outline: ['border-(--alert-outline-border)'],\n      },\n    },\n    defaultVariants: {\n      status: alertDefaultVariants.status,\n      variant: alertDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;AASA,MAAa,oBAAoB,IAC/B;CACE;CACA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,QAAQ;GACN,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,SAAS,CAAC,mCAAmC,yBAAyB;GAEtE,QAAQ,CAAC,sBAAsB,wBAAwB;GACvD,SAAS,CAAC,iCAAiC;EAC7C;CACF;CACA,iBAAiB;EACf,QAAQ,qBAAqB;EAC7B,SAAS,qBAAqB;CAChC;AACF,CACF"}
+{"version":3,"file":"alert-root-variants.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { alertDefaultVariants } from './use-alert-context';\n\n/**\n * O `status` só declara as variáveis `--alert-*`, e a `variant` decide onde cada uma entra. Assim\n * não há um bloco por combinação de `status` e `variant`. O fundo usa a escala alpha, para o\n * alerta funcionar sobre qualquer fundo, e a borda o passo sólido. O `Alert.Indicator`, o\n * `Alert.Title` e o `Alert.Description` leem a mesma cor, no passo 12, em `--alert-fg`.\n */\nexport const alertRootVariants = cva(\n  [\n    'flex',\n    'items-start',\n    'gap-2',\n\n    'w-full',\n    'min-w-0',\n\n    'p-4',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    'text-start',\n    'wrap-break-word',\n  ],\n  {\n    variants: {\n      status: {\n        neutral: [\n          '[--alert-subtle-bg:var(--gray-a3)]',\n          '[--alert-surface-bg:var(--gray-a2)]',\n          '[--alert-surface-border:var(--gray-6)]',\n          '[--alert-outline-border:var(--gray-7)]',\n          '[--alert-fg:var(--gray-12)]',\n        ],\n        info: [\n          '[--alert-subtle-bg:var(--blue-a3)]',\n          '[--alert-surface-bg:var(--blue-a2)]',\n          '[--alert-surface-border:var(--blue-6)]',\n          '[--alert-outline-border:var(--blue-7)]',\n          '[--alert-fg:var(--blue-12)]',\n        ],\n        success: [\n          '[--alert-subtle-bg:var(--green-a3)]',\n          '[--alert-surface-bg:var(--green-a2)]',\n          '[--alert-surface-border:var(--green-6)]',\n          '[--alert-outline-border:var(--green-7)]',\n          '[--alert-fg:var(--green-12)]',\n        ],\n        warning: [\n          '[--alert-subtle-bg:var(--amber-a3)]',\n          '[--alert-surface-bg:var(--amber-a2)]',\n          '[--alert-surface-border:var(--amber-6)]',\n          '[--alert-outline-border:var(--amber-7)]',\n          '[--alert-fg:var(--amber-12)]',\n        ],\n        error: [\n          '[--alert-subtle-bg:var(--red-a3)]',\n          '[--alert-surface-bg:var(--red-a2)]',\n          '[--alert-surface-border:var(--red-6)]',\n          '[--alert-outline-border:var(--red-7)]',\n          '[--alert-fg:var(--red-12)]',\n        ],\n      },\n      variant: {\n        surface: ['border-(--alert-surface-border)', 'bg-(--alert-surface-bg)'],\n        // A borda transparente fica para as três variantes terem a mesma medida.\n        subtle: ['border-transparent', 'bg-(--alert-subtle-bg)'],\n        outline: ['border-(--alert-outline-border)'],\n      },\n    },\n    defaultVariants: {\n      status: alertDefaultVariants.status,\n      variant: alertDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;AASA,MAAa,oBAAoB,IAC/B;CACE;CACA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,QAAQ;GACN,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,SAAS,CAAC,mCAAmC,yBAAyB;GAEtE,QAAQ,CAAC,sBAAsB,wBAAwB;GACvD,SAAS,CAAC,iCAAiC;EAC7C;CACF;CACA,iBAAiB;EACf,QAAQ,qBAAqB;EAC7B,SAAS,qBAAqB;CAChC;AACF,CACF"}

package/dist/components/feedback/alert/alert-title.d.ts

@@ -11,8 +11,7 @@ export type AlertTitleProps = useRender.ComponentProps<'div'>;
  * da página atrapalharia a navegação por títulos. Para um alerta que é uma seção, troque pelo
  * `render`.
  *
- * Origem do `Toast.Title`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale para
- * a cópia na mesma rodada.
+ * Origem do `Toast.Title`, que o copia. Uma mudança aqui vale para a cópia na mesma rodada.
  */
 export declare const AlertTitle: {
   (props: AlertTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/feedback/alert/alert-title.js

@@ -11,8 +11,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 * da página atrapalharia a navegação por títulos. Para um alerta que é uma seção, troque pelo
 * `render`.
 *
-* Origem do `Toast.Title`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale para
-* a cópia na mesma rodada.
+* Origem do `Toast.Title`, que o copia. Uma mudança aqui vale para a cópia na mesma rodada.
 */
 const AlertTitle = (props) => {
 	const { render, className, ...rest } = props;
@@ -22,7 +21,7 @@ const AlertTitle = (props) => {
 			"text-sm",
 			"leading-5",
 			"font-medium",
-			"text-(--alert-fg,var(--color-gray-12))",
+			"text-(--alert-fg,var(--gray-12))",
 			"text-pretty"
 		], className)
 	};

package/dist/components/feedback/alert/alert-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-title.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertTitleProps = useRender.ComponentProps<'div'>;\n\n/**\n * Título do alerta, no passo 12 da cor do `status`. Foge da tabela de tipografia: fica no tamanho\n * da descrição (`text-sm/5`), diferenciado só pelo peso, para o alerta ficar compacto e não\n * competir com os títulos da página. Quebra como a descrição (`text-pretty`): o `text-balance` dos\n * títulos quebrava cedo num alerta estreito.\n *\n * É um `div`, não um `h*`: o alerta não abre uma seção, e um título de alerta na lista de títulos\n * da página atrapalharia a navegação por títulos. Para um alerta que é uma seção, troque pelo\n * `render`.\n *\n * Origem do `Toast.Title`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale para\n * a cópia na mesma rodada.\n */\nexport const AlertTitle = (props: AlertTitleProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Alert.Title',\n    className: mergeTwClassNames(\n      [\n        'text-sm',\n        'leading-5',\n        'font-medium',\n        'text-(--alert-fg,var(--color-gray-12))',\n        'text-pretty',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertTitle.displayName = 'Alert.Title';\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,WAAW,cAAc"}
+{"version":3,"file":"alert-title.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertTitleProps = useRender.ComponentProps<'div'>;\n\n/**\n * Título do alerta, no passo 12 da cor do `status`. Foge da tabela de tipografia: fica no tamanho\n * da descrição (`text-sm/5`), diferenciado só pelo peso, para o alerta ficar compacto e não\n * competir com os títulos da página. Quebra como a descrição (`text-pretty`): o `text-balance` dos\n * títulos quebrava cedo num alerta estreito.\n *\n * É um `div`, não um `h*`: o alerta não abre uma seção, e um título de alerta na lista de títulos\n * da página atrapalharia a navegação por títulos. Para um alerta que é uma seção, troque pelo\n * `render`.\n *\n * Origem do `Toast.Title`, que o copia. Uma mudança aqui vale para a cópia na mesma rodada.\n */\nexport const AlertTitle = (props: AlertTitleProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Alert.Title',\n    className: mergeTwClassNames(\n      [\n        'text-sm',\n        'leading-5',\n        'font-medium',\n        'text-(--alert-fg,var(--gray-12))',\n        'text-pretty',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertTitle.displayName = 'Alert.Title';\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,WAAW,cAAc"}

package/dist/components/feedback/meter/index.d.ts

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

package/dist/components/feedback/meter/index.js

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

package/dist/components/feedback/meter/index.parts.d.ts

@@ -0,0 +1,12 @@
+import { MeterIndicator, MeterIndicatorProps, MeterIndicatorState } from "./meter-indicator.js";
+import { MeterLabel, MeterLabelProps, MeterLabelState } from "./meter-label.js";
+import { MeterVariants } from "./use-meter-context.js";
+import { MeterRoot, MeterRootProps, MeterRootState } from "./meter-root.js";
+import { MeterTrack, MeterTrackProps, MeterTrackState } from "./meter-track.js";
+import { MeterValue, MeterValueProps, MeterValueState } from "./meter-value.js";
+declare namespace index_parts_d_exports {
+  export { MeterIndicator as Indicator, MeterIndicatorProps as IndicatorProps, MeterIndicatorState as IndicatorState, MeterLabel as Label, MeterLabelProps as LabelProps, MeterLabelState as LabelState, MeterRoot as Root, MeterRootProps as RootProps, MeterRootState as RootState, MeterTrack as Track, MeterTrackProps as TrackProps, MeterTrackState as TrackState, MeterValue as Value, MeterValueProps as ValueProps, MeterValueState as ValueState, MeterVariants as Variants };
+}
+//#endregion
+export { MeterIndicator as Indicator, type MeterIndicatorProps as IndicatorProps, type MeterIndicatorState as IndicatorState, MeterLabel as Label, type MeterLabelProps as LabelProps, type MeterLabelState as LabelState, MeterRoot as Root, type MeterRootProps as RootProps, type MeterRootState as RootState, MeterTrack as Track, type MeterTrackProps as TrackProps, type MeterTrackState as TrackState, MeterValue as Value, type MeterValueProps as ValueProps, type MeterValueState as ValueState, type MeterVariants as Variants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/feedback/meter/index.parts.js

@@ -0,0 +1,18 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { MeterIndicator } from "./meter-indicator.js";
+import { MeterLabel } from "./meter-label.js";
+import { MeterRoot } from "./meter-root.js";
+import { MeterTrack } from "./meter-track.js";
+import { MeterValue } from "./meter-value.js";
+//#region src/components/feedback/meter/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Indicator: () => MeterIndicator,
+	Label: () => MeterLabel,
+	Root: () => MeterRoot,
+	Track: () => MeterTrack,
+	Value: () => MeterValue
+});
+//#endregion
+export { MeterIndicator as Indicator, MeterLabel as Label, MeterRoot as Root, MeterTrack as Track, MeterValue as Value, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/feedback/meter/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/feedback/meter/index.parts.ts"],"sourcesContent":["export { MeterIndicator as Indicator } from './meter-indicator';\nexport { MeterLabel as Label } from './meter-label';\nexport { MeterRoot as Root } from './meter-root';\nexport { MeterTrack as Track } from './meter-track';\nexport { MeterValue as Value } from './meter-value';\n\n/* types */\n\nexport type {\n  MeterIndicatorProps as IndicatorProps,\n  MeterIndicatorState as IndicatorState,\n} from './meter-indicator';\nexport type {\n  MeterLabelProps as LabelProps,\n  MeterLabelState as LabelState,\n} from './meter-label';\nexport type {\n  MeterRootProps as RootProps,\n  MeterRootState as RootState,\n} from './meter-root';\nexport type {\n  MeterTrackProps as TrackProps,\n  MeterTrackState as TrackState,\n} from './meter-track';\nexport type {\n  MeterValueProps as ValueProps,\n  MeterValueState as ValueState,\n} from './meter-value';\nexport type { MeterVariants as Variants } from './use-meter-context';\n"],"mappings":""}

package/dist/components/feedback/meter/meter-indicator.d.ts

@@ -0,0 +1,17 @@
+import { Meter } from "@base-ui/react/meter";
+//#region src/components/feedback/meter/meter-indicator.d.ts
+export type MeterIndicatorProps = Meter.Indicator.Props;
+export type MeterIndicatorState = Meter.Indicator.State;
+/**
+ * Parte preenchida da barra, na cor do `colorScheme` do `Root`. A largura vem do `style` que o Base
+ * UI escreve inline e anima por transição.
+ *
+ * Cópia do `Progress.Indicator` (origem). Diferença: sem o estado indeterminado, que o `Meter` não
+ * tem.
+ */
+export declare const MeterIndicator: {
+  (props: MeterIndicatorProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=meter-indicator.d.ts.map

package/dist/components/feedback/meter/meter-indicator.js

@@ -0,0 +1,31 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+//#region src/components/feedback/meter/meter-indicator.tsx
+/**
+* Parte preenchida da barra, na cor do `colorScheme` do `Root`. A largura vem do `style` que o Base
+* UI escreve inline e anima por transição.
+*
+* Cópia do `Progress.Indicator` (origem). Diferença: sem o estado indeterminado, que o `Meter` não
+* tem.
+*/
+const MeterIndicator = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Meter.Indicator, {
+		"data-component": "Meter.Indicator",
+		className: mergeStateClassNames([
+			"h-full",
+			"rounded-full",
+			"bg-(--meter-indicator-bg)",
+			"not-motion-reduced:transition-[width]",
+			"not-motion-reduced:duration-500",
+			"not-motion-reduced:ease-move"
+		], className),
+		...rest
+	});
+};
+MeterIndicator.displayName = "Meter.Indicator";
+//#endregion
+export { MeterIndicator };
+
+//# sourceMappingURL=meter-indicator.js.map

package/dist/components/feedback/meter/meter-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-indicator.js","names":["BaseMeter"],"sources":["../../../../src/components/feedback/meter/meter-indicator.tsx"],"sourcesContent":["import { Meter as BaseMeter } from '@base-ui/react/meter';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MeterIndicatorProps = BaseMeter.Indicator.Props;\n\nexport type MeterIndicatorState = BaseMeter.Indicator.State;\n\n/**\n * Parte preenchida da barra, na cor do `colorScheme` do `Root`. A largura vem do `style` que o Base\n * UI escreve inline e anima por transição.\n *\n * Cópia do `Progress.Indicator` (origem). Diferença: sem o estado indeterminado, que o `Meter` não\n * tem.\n */\nexport const MeterIndicator = (props: MeterIndicatorProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseMeter.Indicator\n      data-component=\"Meter.Indicator\"\n      className={mergeStateClassNames(\n        [\n          'h-full',\n          'rounded-full',\n          'bg-(--meter-indicator-bg)',\n\n          'not-motion-reduced:transition-[width]',\n          'not-motion-reduced:duration-500',\n          'not-motion-reduced:ease-move',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nMeterIndicator.displayName = 'Meter.Indicator';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,WAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/feedback/meter/meter-label.d.ts

@@ -0,0 +1,13 @@
+import { Meter } from "@base-ui/react/meter";
+//#region src/components/feedback/meter/meter-label.d.ts
+export type MeterLabelProps = Meter.Label.Props;
+export type MeterLabelState = Meter.Label.State;
+/**
+ * Rótulo da barra: o Base UI o liga ao `Root` por `aria-labelledby`, e ele vira o nome acessível.
+ */
+export declare const MeterLabel: {
+  (props: MeterLabelProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=meter-label.d.ts.map

package/dist/components/feedback/meter/meter-label.js

@@ -0,0 +1,20 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+//#region src/components/feedback/meter/meter-label.tsx
+/**
+* Rótulo da barra: o Base UI o liga ao `Root` por `aria-labelledby`, e ele vira o nome acessível.
+*/
+const MeterLabel = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Meter.Label, {
+		"data-component": "Meter.Label",
+		className: mergeStateClassNames(["font-medium", "text-gray-12"], className),
+		...rest
+	});
+};
+MeterLabel.displayName = "Meter.Label";
+//#endregion
+export { MeterLabel };
+
+//# sourceMappingURL=meter-label.js.map

package/dist/components/feedback/meter/meter-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-label.js","names":["BaseMeter"],"sources":["../../../../src/components/feedback/meter/meter-label.tsx"],"sourcesContent":["import { Meter as BaseMeter } from '@base-ui/react/meter';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MeterLabelProps = BaseMeter.Label.Props;\n\nexport type MeterLabelState = BaseMeter.Label.State;\n\n/**\n * Rótulo da barra: o Base UI o liga ao `Root` por `aria-labelledby`, e ele vira o nome acessível.\n */\nexport const MeterLabel = (props: MeterLabelProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseMeter.Label\n      data-component=\"Meter.Label\"\n      className={mergeStateClassNames(\n        ['font-medium', 'text-gray-12'],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nMeterLabel.displayName = 'Meter.Label';\n"],"mappings":";;;;;;;AAUA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,OAAX;EACE,kBAAe;EACf,WAAW,qBACT,CAAC,eAAe,cAAc,GAC9B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/components/feedback/meter/meter-root-variants.d.ts

@@ -0,0 +1,14 @@
+//#region src/components/feedback/meter/meter-root-variants.d.ts
+/**
+ * Cada `colorScheme` só declara a variável `--meter-indicator-bg`, que o `Meter.Indicator`
+ * consome. O `size` decide o texto do rótulo e do valor, que herdam o tamanho do `Root`; a altura
+ * da trilha vem do contexto, no `Meter.Track`.
+ *
+ * Cópia de `progress-root-variants.ts` (origem). Diferenças: o prefixo `--meter-*` das variáveis.
+ */
+export declare const meterRootVariants: (props?: ({
+  colorScheme?: "gray" | "accent" | "red" | "green" | "blue" | "amber" | null | undefined;
+  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=meter-root-variants.d.ts.map

package/dist/components/feedback/meter/meter-root-variants.js

@@ -0,0 +1,42 @@
+import { meterDefaultVariants } from "./use-meter-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/feedback/meter/meter-root-variants.ts
+/**
+* Cada `colorScheme` só declara a variável `--meter-indicator-bg`, que o `Meter.Indicator`
+* consome. O `size` decide o texto do rótulo e do valor, que herdam o tamanho do `Root`; a altura
+* da trilha vem do contexto, no `Meter.Track`.
+*
+* Cópia de `progress-root-variants.ts` (origem). Diferenças: o prefixo `--meter-*` das variáveis.
+*/
+const meterRootVariants = cva([
+	"grid",
+	"grid-cols-[1fr_auto]",
+	"gap-x-4",
+	"gap-y-2",
+	"w-full"
+], {
+	variants: {
+		colorScheme: {
+			gray: ["[--meter-indicator-bg:var(--color-black)]", "dark:[--meter-indicator-bg:var(--color-white)]"],
+			accent: ["[--meter-indicator-bg:var(--accent-9)]"],
+			red: ["[--meter-indicator-bg:var(--red-9)]"],
+			green: ["[--meter-indicator-bg:var(--green-9)]"],
+			amber: ["[--meter-indicator-bg:var(--amber-9)]"],
+			blue: ["[--meter-indicator-bg:var(--blue-9)]"]
+		},
+		size: {
+			xs: ["text-xs", "leading-4"],
+			sm: ["text-sm", "leading-5"],
+			md: ["text-sm", "leading-5"],
+			lg: ["text-base", "leading-6"]
+		}
+	},
+	defaultVariants: {
+		colorScheme: meterDefaultVariants.colorScheme,
+		size: meterDefaultVariants.size
+	}
+});
+//#endregion
+export { meterRootVariants };
+
+//# sourceMappingURL=meter-root-variants.js.map

package/dist/components/feedback/meter/meter-root-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-root-variants.js","names":[],"sources":["../../../../src/components/feedback/meter/meter-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { meterDefaultVariants } from './use-meter-context';\n\n/**\n * Cada `colorScheme` só declara a variável `--meter-indicator-bg`, que o `Meter.Indicator`\n * consome. O `size` decide o texto do rótulo e do valor, que herdam o tamanho do `Root`; a altura\n * da trilha vem do contexto, no `Meter.Track`.\n *\n * Cópia de `progress-root-variants.ts` (origem). Diferenças: o prefixo `--meter-*` das variáveis.\n */\nexport const meterRootVariants = cva(\n  ['grid', 'grid-cols-[1fr_auto]', 'gap-x-4', 'gap-y-2', 'w-full'],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--meter-indicator-bg:var(--color-black)]',\n          'dark:[--meter-indicator-bg:var(--color-white)]',\n        ],\n        accent: ['[--meter-indicator-bg:var(--accent-9)]'],\n        red: ['[--meter-indicator-bg:var(--red-9)]'],\n        green: ['[--meter-indicator-bg:var(--green-9)]'],\n        amber: ['[--meter-indicator-bg:var(--amber-9)]'],\n        blue: ['[--meter-indicator-bg:var(--blue-9)]'],\n      },\n      size: {\n        xs: ['text-xs', 'leading-4'],\n        sm: ['text-sm', 'leading-5'],\n        md: ['text-sm', 'leading-5'],\n        lg: ['text-base', 'leading-6'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: meterDefaultVariants.colorScheme,\n      size: meterDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;AAUA,MAAa,oBAAoB,IAC/B;CAAC;CAAQ;CAAwB;CAAW;CAAW;AAAQ,GAC/D;CACE,UAAU;EACR,aAAa;GACX,MAAM,CACJ,6CACA,gDACF;GACA,QAAQ,CAAC,wCAAwC;GACjD,KAAK,CAAC,qCAAqC;GAC3C,OAAO,CAAC,uCAAuC;GAC/C,OAAO,CAAC,uCAAuC;GAC/C,MAAM,CAAC,sCAAsC;EAC/C;EACA,MAAM;GACJ,IAAI,CAAC,WAAW,WAAW;GAC3B,IAAI,CAAC,WAAW,WAAW;GAC3B,IAAI,CAAC,WAAW,WAAW;GAC3B,IAAI,CAAC,aAAa,WAAW;EAC/B;CACF;CACA,iBAAiB;EACf,aAAa,qBAAqB;EAClC,MAAM,qBAAqB;CAC7B;AACF,CACF"}

package/dist/components/feedback/meter/meter-root.d.ts

@@ -0,0 +1,37 @@
+import { MeterVariants } from "./use-meter-context.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { Meter } from "@base-ui/react/meter";
+//#region src/components/feedback/meter/meter-root.d.ts
+export type MeterRootProps = MergeOverride<Meter.Root.Props, MeterVariants>;
+export type MeterRootState = Meter.Root.State;
+/**
+ * Medida contra um limite: armazenamento usado, cota de notas emitidas, estoque. Tem `role="meter"`
+ * e o `aria-valuenow` do `value`, entre `min` (0) e `max` (100). Não é andamento de tarefa: para
+ * isso, use o `Progress`.
+ *
+ * O layout é uma grade: o `Label` à esquerda e o `Value` à direita na primeira linha, e o `Track`
+ * na largura toda abaixo. O `Label` é o nome acessível da barra.
+ *
+ * O `locale` padrão é `'pt-BR'` (o Base UI usaria o do navegador), então o `Value` sai com vírgula
+ * decimal. Um `locale` passado por quem usa vence.
+ *
+ * A cor por faixa (perto do limite, acima dele) fica com o app: o `Meter` não tem faixas, e o app
+ * troca o `colorScheme` conforme o valor.
+ *
+ * @example
+ * ```tsx
+ * <Meter.Root value={usedGigabytes} max={50} colorScheme={usedGigabytes > 45 ? 'red' : 'green'}>
+ *   <Meter.Label>Armazenamento</Meter.Label>
+ *   <Meter.Value />
+ *   <Meter.Track>
+ *     <Meter.Indicator />
+ *   </Meter.Track>
+ * </Meter.Root>
+ * ```
+ */
+export declare const MeterRoot: {
+  (props: MeterRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=meter-root.d.ts.map