@lucasbernardosn/react-ui 0.3.0 → 0.5.0

package/dist/components/feedback/progress/progress-value.d.ts

@@ -0,0 +1,14 @@
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/feedback/progress/progress-value.d.ts
+export type ProgressValueProps = Progress.Value.Props;
+export type ProgressValueState = Progress.Value.State;
+/**
+ * Valor formatado pelo `Intl.NumberFormat` do `Root` (`format` e `locale`). Sem `value`
+ * (indeterminado), fica vazio. Um `children` em função troca o texto.
+ */
+export declare const ProgressValue: {
+  (props: ProgressValueProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=progress-value.d.ts.map

package/dist/components/feedback/progress/progress-value.js

@@ -0,0 +1,25 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/feedback/progress/progress-value.tsx
+/**
+* Valor formatado pelo `Intl.NumberFormat` do `Root` (`format` e `locale`). Sem `value`
+* (indeterminado), fica vazio. Um `children` em função troca o texto.
+*/
+const ProgressValue = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Progress.Value, {
+		"data-component": "Progress.Value",
+		className: mergeStateClassNames([
+			"text-right",
+			"tabular-nums",
+			"text-gray-11"
+		], className),
+		...rest
+	});
+};
+ProgressValue.displayName = "Progress.Value";
+//#endregion
+export { ProgressValue };
+
+//# sourceMappingURL=progress-value.js.map

package/dist/components/feedback/progress/progress-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-value.js","names":["BaseProgress"],"sources":["../../../../src/components/feedback/progress/progress-value.tsx"],"sourcesContent":["import { Progress as BaseProgress } from '@base-ui/react/progress';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ProgressValueProps = BaseProgress.Value.Props;\n\nexport type ProgressValueState = BaseProgress.Value.State;\n\n/**\n * Valor formatado pelo `Intl.NumberFormat` do `Root` (`format` e `locale`). Sem `value`\n * (indeterminado), fica vazio. Um `children` em função troca o texto.\n */\nexport const ProgressValue = (props: ProgressValueProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseProgress.Value\n      data-component=\"Progress.Value\"\n      className={mergeStateClassNames(\n        ['text-right', 'tabular-nums', 'text-gray-11'],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nProgressValue.displayName = 'Progress.Value';\n"],"mappings":";;;;;;;;AAWA,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAa,OAAd;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAc;GAAgB;EAAc,GAC7C,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc"}

package/dist/components/feedback/progress/use-progress-context.d.ts

@@ -0,0 +1,23 @@
+import { ColorSchemeSemantic } from "../../../types/color-scheme.js";
+//#region src/components/feedback/progress/use-progress-context.d.ts
+/**
+ * Variantes do Progress. Informadas no `Progress.Root` e repassadas às partes por contexto.
+ */
+export type ProgressVariants = {
+  /**
+   * Cor da barra preenchida (`Progress.Indicator`).
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeSemantic;
+  /**
+   * Altura da trilha e tamanho do texto do rótulo e do valor.
+   *
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+export declare const progressDefaultVariants: Required<ProgressVariants>;
+export declare const ProgressContextProvider: import("react").Provider<ProgressVariants>, useProgressContext: () => ProgressVariants;
+//#endregion
+//# sourceMappingURL=use-progress-context.d.ts.map

package/dist/components/feedback/progress/use-progress-context.js

@@ -0,0 +1,14 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/feedback/progress/use-progress-context.ts
+const progressDefaultVariants = {
+	colorScheme: "gray",
+	size: "sm"
+};
+const [ProgressContextProvider, useProgressContext] = createContext({
+	name: "ProgressContext",
+	providers: ["Progress.Root"]
+});
+//#endregion
+export { ProgressContextProvider, progressDefaultVariants, useProgressContext };
+
+//# sourceMappingURL=use-progress-context.js.map

package/dist/components/feedback/progress/use-progress-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-progress-context.js","names":[],"sources":["../../../../src/components/feedback/progress/use-progress-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\nimport type { ColorSchemeSemantic } from '#types';\n\n/**\n * Variantes do Progress. Informadas no `Progress.Root` e repassadas às partes por contexto.\n */\nexport type ProgressVariants = {\n  /**\n   * Cor da barra preenchida (`Progress.Indicator`).\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Altura da trilha e tamanho do texto do rótulo e do valor.\n   *\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n};\n\nexport const progressDefaultVariants: Required<ProgressVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n};\n\nexport const [ProgressContextProvider, useProgressContext] =\n  createContext<ProgressVariants>({\n    name: 'ProgressContext',\n    providers: ['Progress.Root'],\n  });\n"],"mappings":";;AAqBA,MAAa,0BAAsD;CACjE,aAAa;CACb,MAAM;AACR;AAEA,MAAa,CAAC,yBAAyB,sBACrC,cAAgC;CAC9B,MAAM;CACN,WAAW,CAAC,eAAe;AAC7B,CAAC"}

package/dist/components/feedback/spinner/spinner-variants.d.ts

@@ -11,7 +11,7 @@ export type SpinnerVariants = {
 };
 export declare const spinnerDefaultVariants: Required<SpinnerVariants>;
 export declare const spinnerVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | null | undefined;
+  colorScheme?: "gray" | "accent" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=spinner-variants.d.ts.map

package/dist/components/feedback/spinner/spinner-variants.js

@@ -16,7 +16,7 @@ const spinnerVariants = cva([
 ], {
 	variants: { colorScheme: {
 		gray: ["border-r-gray-9", "border-b-gray-9"],
-		brand: ["border-r-brand-9", "border-b-brand-9"]
+		accent: ["border-r-accent-9", "border-b-accent-9"]
 	} },
 	defaultVariants: { colorScheme: spinnerDefaultVariants.colorScheme }
 });

package/dist/components/feedback/spinner/spinner-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner-variants.js","names":[],"sources":["../../../../src/components/feedback/spinner/spinner-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type SpinnerVariants = {\n  /**\n   * Cor do arco. Para herdar a cor do texto (sobre um fundo colorido, por exemplo), passe\n   * `border-r-current border-b-current` na `className`.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n};\n\nexport const spinnerDefaultVariants: Required<SpinnerVariants> = {\n  colorScheme: 'gray',\n};\n\nexport const spinnerVariants = cva(\n  [\n    'inline-block',\n    'shrink-0',\n\n    // Acompanha o `font-size` de onde está: texto, botão, célula.\n    'size-[1em]',\n\n    'rounded-full',\n    'border-2',\n    'border-solid',\n    'border-current',\n    'border-t-transparent',\n    'border-l-transparent',\n\n    'animate-[spin_350ms_linear_infinite]',\n    // Com movimento reduzido, desacelera em vez de parar: parado, o spinner\n    // passaria por um ícone.\n    'motion-reduced:animate-[spin_600ms_linear_infinite]',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: ['border-r-gray-9', 'border-b-gray-9'],\n        brand: ['border-r-brand-9', 'border-b-brand-9'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: spinnerDefaultVariants.colorScheme,\n    },\n  },\n);\n"],"mappings":";;AAaA,MAAa,yBAAoD,EAC/D,aAAa,OACf;AAEA,MAAa,kBAAkB,IAC7B;CACE;CACA;CAGA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CAGA;AACF,GACA;CACE,UAAU,EACR,aAAa;EACX,MAAM,CAAC,mBAAmB,iBAAiB;EAC3C,OAAO,CAAC,oBAAoB,kBAAkB;CAChD,EACF;CACA,iBAAiB,EACf,aAAa,uBAAuB,YACtC;AACF,CACF"}
+{"version":3,"file":"spinner-variants.js","names":[],"sources":["../../../../src/components/feedback/spinner/spinner-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type SpinnerVariants = {\n  /**\n   * Cor do arco. Para herdar a cor do texto (sobre um fundo colorido, por exemplo), passe\n   * `border-r-current border-b-current` na `className`.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n};\n\nexport const spinnerDefaultVariants: Required<SpinnerVariants> = {\n  colorScheme: 'gray',\n};\n\nexport const spinnerVariants = cva(\n  [\n    'inline-block',\n    'shrink-0',\n\n    // Acompanha o `font-size` de onde está: texto, botão, célula.\n    'size-[1em]',\n\n    'rounded-full',\n    'border-2',\n    'border-solid',\n    'border-current',\n    'border-t-transparent',\n    'border-l-transparent',\n\n    'animate-[spin_350ms_linear_infinite]',\n    // Com movimento reduzido, desacelera em vez de parar: parado, o spinner\n    // passaria por um ícone.\n    'motion-reduced:animate-[spin_600ms_linear_infinite]',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: ['border-r-gray-9', 'border-b-gray-9'],\n        accent: ['border-r-accent-9', 'border-b-accent-9'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: spinnerDefaultVariants.colorScheme,\n    },\n  },\n);\n"],"mappings":";;AAaA,MAAa,yBAAoD,EAC/D,aAAa,OACf;AAEA,MAAa,kBAAkB,IAC7B;CACE;CACA;CAGA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CAGA;AACF,GACA;CACE,UAAU,EACR,aAAa;EACX,MAAM,CAAC,mBAAmB,iBAAiB;EAC3C,QAAQ,CAAC,qBAAqB,mBAAmB;CACnD,EACF;CACA,iBAAiB,EACf,aAAa,uBAAuB,YACtC;AACF,CACF"}

package/dist/components/feedback/spinner/spinner.d.ts

@@ -26,7 +26,7 @@ export type SpinnerProps = MergeOverride<useRender.ComponentProps<'span'>, Spinn
  * <Spinner />
  *
  * <Spinner
- *   colorScheme="brand"
+ *   colorScheme="accent"
  *   label="Emitindo a nota fiscal"
  *   className="size-8"
  * />

package/dist/components/feedback/spinner/spinner.js

@@ -21,7 +21,7 @@ const splitVariantProps = createSplitProps();
 * <Spinner />
 *
 * <Spinner
-*   colorScheme="brand"
+*   colorScheme="accent"
 *   label="Emitindo a nota fiscal"
 *   className="size-8"
 * />

package/dist/components/feedback/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../../../src/components/feedback/spinner/spinner.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type SpinnerVariants, spinnerVariants } from './spinner-variants';\n\nexport type SpinnerProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  SpinnerVariants & {\n    /**\n     * Texto lido pelo leitor de tela, escondido da tela. Diga o que está carregando.\n     *\n     * @default 'Carregando'\n     */\n    label?: string;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<SpinnerVariants>();\n\n/**\n * Indicador circular de carregamento.\n *\n * Mede `1em`, então acompanha o tamanho do texto ao redor; para um tamanho fixo, passe `size-*`\n * na `className`, e para outra espessura, `border-*`.\n *\n * Vem com `role=\"status\"` e o `label` como texto `sr-only`, para o leitor de tela anunciar a\n * espera. O anúncio mais confiável é o do contêiner que está carregando, com `aria-busy`. Dentro\n * de um controle que já comunica o próprio estado (um botão com `loading`), passe `aria-hidden`\n * para não anunciar duas vezes.\n *\n * @example\n * ```tsx\n * <Spinner />\n *\n * <Spinner\n *   colorScheme=\"brand\"\n *   label=\"Emitindo a nota fiscal\"\n *   className=\"size-8\"\n * />\n * ```\n */\nexport const Spinner = (props: SpinnerProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n  ]);\n\n  const { label = 'Carregando', render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Spinner',\n    role: 'status',\n    className: mergeTwClassNames(spinnerVariants(variantProps), className),\n    children: <span className={mergeTwClassNames(['sr-only'])}>{label}</span>,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nSpinner.displayName = 'Spinner';\n"],"mappings":";;;;;;AAoBA,MAAM,oBAAoB,iBAAkC;;;;;;;;;;;;;;;;;;;;;;;AAwB5D,MAAa,WAAW,UAAwB;CAC9C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,aACF,CAAC;CAED,MAAM,EAAE,QAAQ,cAAc,QAAQ,WAAW,GAAG,SAAS;CAE7D,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBAAkB,gBAAgB,YAAY,GAAG,SAAS;EACrE,UAAU,oBAAC,QAAD;GAAM,WAAW,kBAAkB,CAAC,SAAS,CAAC;GAAI,UAAA;EAAY,CAAA;CAC1E;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../../src/components/feedback/spinner/spinner.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type SpinnerVariants, spinnerVariants } from './spinner-variants';\n\nexport type SpinnerProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  SpinnerVariants & {\n    /**\n     * Texto lido pelo leitor de tela, escondido da tela. Diga o que está carregando.\n     *\n     * @default 'Carregando'\n     */\n    label?: string;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<SpinnerVariants>();\n\n/**\n * Indicador circular de carregamento.\n *\n * Mede `1em`, então acompanha o tamanho do texto ao redor; para um tamanho fixo, passe `size-*`\n * na `className`, e para outra espessura, `border-*`.\n *\n * Vem com `role=\"status\"` e o `label` como texto `sr-only`, para o leitor de tela anunciar a\n * espera. O anúncio mais confiável é o do contêiner que está carregando, com `aria-busy`. Dentro\n * de um controle que já comunica o próprio estado (um botão com `loading`), passe `aria-hidden`\n * para não anunciar duas vezes.\n *\n * @example\n * ```tsx\n * <Spinner />\n *\n * <Spinner\n *   colorScheme=\"accent\"\n *   label=\"Emitindo a nota fiscal\"\n *   className=\"size-8\"\n * />\n * ```\n */\nexport const Spinner = (props: SpinnerProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n  ]);\n\n  const { label = 'Carregando', render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Spinner',\n    role: 'status',\n    className: mergeTwClassNames(spinnerVariants(variantProps), className),\n    children: <span className={mergeTwClassNames(['sr-only'])}>{label}</span>,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nSpinner.displayName = 'Spinner';\n"],"mappings":";;;;;;AAoBA,MAAM,oBAAoB,iBAAkC;;;;;;;;;;;;;;;;;;;;;;;AAwB5D,MAAa,WAAW,UAAwB;CAC9C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,aACF,CAAC;CAED,MAAM,EAAE,QAAQ,cAAc,QAAQ,WAAW,GAAG,SAAS;CAE7D,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBAAkB,gBAAgB,YAAY,GAAG,SAAS;EACrE,UAAU,oBAAC,QAAD;GAAM,WAAW,kBAAkB,CAAC,SAAS,CAAC;GAAI,UAAA;EAAY,CAAA;CAC1E;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,QAAQ,cAAc"}

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

@@ -6,8 +6,8 @@ export type ToastDescriptionState = Toast.Description.State;
  * Texto de apoio do toast: sem filhos, mostra a `description` do toast, e some quando ele não tem
  * uma. Sem título, ela é a mensagem do toast.
  *
- * Cópia do `Alert.Description`, a origem (tabela no README de `feedback`). A diferença: é o `p` do
- * Base UI, e a cor vem de `--toast-fg`, que o `type` declara.
+ * Cópia do `Alert.Description`, a origem. A diferença: é o `p` do Base UI, e a cor vem de
+ * `--toast-fg`, que o `type` declara.
  */
 export declare const ToastDescription: {
   (props: ToastDescriptionProps): import("react").JSX.Element;

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

@@ -6,8 +6,8 @@ import { Toast } from "@base-ui/react/toast";
 * Texto de apoio do toast: sem filhos, mostra a `description` do toast, e some quando ele não tem
 * uma. Sem título, ela é a mensagem do toast.
 *
-* Cópia do `Alert.Description`, a origem (tabela no README de `feedback`). A diferença: é o `p` do
-* Base UI, e a cor vem de `--toast-fg`, que o `type` declara.
+* Cópia do `Alert.Description`, a origem. A diferença: é o `p` do Base UI, e a cor vem de
+* `--toast-fg`, que o `type` declara.
 */
 const ToastDescription = (props) => {
 	const { className, ...rest } = props;
@@ -16,7 +16,7 @@ const ToastDescription = (props) => {
 		className: mergeStateClassNames([
 			"text-sm",
 			"leading-5",
-			"text-(--toast-fg,var(--color-gray-11))",
+			"text-(--toast-fg,var(--gray-11))",
 			"text-pretty"
 		], className),
 		...rest

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

@@ -1 +1 @@
-{"version":3,"file":"toast-description.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/toast-description.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ToastDescriptionProps = BaseToast.Description.Props;\n\nexport type ToastDescriptionState = BaseToast.Description.State;\n\n/**\n * Texto de apoio do toast: sem filhos, mostra a `description` do toast, e some quando ele não tem\n * uma. Sem título, ela é a mensagem do toast.\n *\n * Cópia do `Alert.Description`, a origem (tabela no README de `feedback`). A diferença: é o `p` do\n * Base UI, e a cor vem de `--toast-fg`, que o `type` declara.\n */\nexport const ToastDescription = (props: ToastDescriptionProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseToast.Description\n      data-component=\"Toast.Description\"\n      className={mergeStateClassNames(\n        [\n          'text-sm',\n          'leading-5',\n          'text-(--toast-fg,var(--color-gray-11))',\n          'text-pretty',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nToastDescription.displayName = 'Toast.Description';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,aAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"toast-description.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/toast-description.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ToastDescriptionProps = BaseToast.Description.Props;\n\nexport type ToastDescriptionState = BaseToast.Description.State;\n\n/**\n * Texto de apoio do toast: sem filhos, mostra a `description` do toast, e some quando ele não tem\n * uma. Sem título, ela é a mensagem do toast.\n *\n * Cópia do `Alert.Description`, a origem. A diferença: é o `p` do Base UI, e a cor vem de\n * `--toast-fg`, que o `type` declara.\n */\nexport const ToastDescription = (props: ToastDescriptionProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseToast.Description\n      data-component=\"Toast.Description\"\n      className={mergeStateClassNames(\n        [\n          'text-sm',\n          'leading-5',\n          'text-(--toast-fg,var(--gray-11))',\n          'text-pretty',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nToastDescription.displayName = 'Toast.Description';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,aAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

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

@@ -3,10 +3,10 @@ import { useRender } from "@base-ui/react";
 //#region src/components/feedback/toast/toast-indicator.d.ts
 export type ToastIndicatorProps = useRender.ComponentProps<'div'>;
 /**
- * Ícone do toast, na cor do tipo. Cópia do `Alert.Indicator`, a origem (tabela no README de
- * `feedback`), com os mesmos ícones; as diferenças: a cor vem do `type` e o `loading` mostra um
- * `Spinner`. Com filhos, usa os filhos. O `svg` mede `1em` (20px), numa caixa da altura da linha
- * do título, para ficar alinhado à primeira linha.
+ * Ícone do toast, na cor do tipo. Cópia do `Alert.Indicator`, a origem, com os mesmos ícones; as
+ * diferenças: a cor vem do `type` e o `loading` mostra um `Spinner`. Com filhos, usa os filhos. O
+ * `svg` mede `1em` (20px), numa caixa da altura da linha do título, para ficar alinhado à primeira
+ * linha.
  *
  * Fica com `aria-hidden`: o ícone repete o que o texto diz.
  */

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

@@ -8,10 +8,10 @@ import { jsx } from "react/jsx-runtime";
 import { CheckCircleIcon, InfoIcon, WarningCircleIcon, WarningIcon } from "@phosphor-icons/react";
 //#region src/components/feedback/toast/toast-indicator.tsx
 /**
-* Ícone do toast, na cor do tipo. Cópia do `Alert.Indicator`, a origem (tabela no README de
-* `feedback`), com os mesmos ícones; as diferenças: a cor vem do `type` e o `loading` mostra um
-* `Spinner`. Com filhos, usa os filhos. O `svg` mede `1em` (20px), numa caixa da altura da linha
-* do título, para ficar alinhado à primeira linha.
+* Ícone do toast, na cor do tipo. Cópia do `Alert.Indicator`, a origem, com os mesmos ícones; as
+* diferenças: a cor vem do `type` e o `loading` mostra um `Spinner`. Com filhos, usa os filhos. O
+* `svg` mede `1em` (20px), numa caixa da altura da linha do título, para ficar alinhado à primeira
+* linha.
 *
 * Fica com `aria-hidden`: o ícone repete o que o texto diz.
 */

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

@@ -1 +1 @@
-{"version":3,"file":"toast-indicator.js","names":[],"sources":["../../../../src/components/feedback/toast/toast-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 { Spinner } from '#components/feedback/spinner';\nimport { mergeTwClassNames } from '#utils';\nimport { toastIndicatorVariants } from './toast-indicator-variants';\nimport type { ToastType } from './toast-manager';\nimport { useToastRootContext } from './use-toast-root-context';\n\nexport type ToastIndicatorProps = useRender.ComponentProps<'div'>;\n\n/**\n * Ícone do toast, na cor do tipo. Cópia do `Alert.Indicator`, a origem (tabela no README de\n * `feedback`), com os mesmos ícones; as diferenças: a cor vem do `type` e o `loading` mostra um\n * `Spinner`. Com filhos, usa os filhos. O `svg` mede `1em` (20px), numa caixa da altura da linha\n * do título, para ficar alinhado à primeira linha.\n *\n * Fica com `aria-hidden`: o ícone repete o que o texto diz.\n */\nexport const ToastIndicator = (props: ToastIndicatorProps) => {\n  const { render, className, children, ...rest } = props;\n\n  const { type } = useToastRootContext();\n\n  const baseProps = {\n    'data-component': 'Toast.Indicator',\n    'aria-hidden': true,\n    children: children ?? typeIndicators[type],\n    className: mergeTwClassNames(toastIndicatorVariants({ type }), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nToastIndicator.displayName = 'Toast.Indicator';\n\nconst typeIndicators: Record<ToastType, React.ReactNode> = {\n  neutral: <Icon render={<InfoIcon />} />,\n  info: <Icon render={<InfoIcon />} />,\n  success: <Icon render={<CheckCircleIcon />} />,\n  warning: <Icon render={<WarningIcon />} />,\n  error: <Icon render={<WarningCircleIcon />} />,\n  loading: <Spinner />,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,EAAE,SAAS,oBAAoB;CAErC,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,UAAU,YAAY,eAAe;EACrC,WAAW,kBAAkB,uBAAuB,EAAE,KAAK,CAAC,GAAG,SAAS;CAC1E;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc;AAE7B,MAAM,iBAAqD;CACzD,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,UAAD,CAAW,CAAA,EAAI,CAAA;CACtC,MAAM,oBAAC,MAAD,EAAM,QAAQ,oBAAC,UAAD,CAAW,CAAA,EAAI,CAAA;CACnC,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,iBAAD,CAAkB,CAAA,EAAI,CAAA;CAC7C,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;CACzC,OAAO,oBAAC,MAAD,EAAM,QAAQ,oBAAC,mBAAD,CAAoB,CAAA,EAAI,CAAA;CAC7C,SAAS,oBAAC,SAAD,CAAU,CAAA;AACrB"}
+{"version":3,"file":"toast-indicator.js","names":[],"sources":["../../../../src/components/feedback/toast/toast-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 { Spinner } from '#components/feedback/spinner';\nimport { mergeTwClassNames } from '#utils';\nimport { toastIndicatorVariants } from './toast-indicator-variants';\nimport type { ToastType } from './toast-manager';\nimport { useToastRootContext } from './use-toast-root-context';\n\nexport type ToastIndicatorProps = useRender.ComponentProps<'div'>;\n\n/**\n * Ícone do toast, na cor do tipo. Cópia do `Alert.Indicator`, a origem, com os mesmos ícones; as\n * diferenças: a cor vem do `type` e o `loading` mostra um `Spinner`. Com filhos, usa os filhos. O\n * `svg` mede `1em` (20px), numa caixa da altura da linha do título, para ficar alinhado à primeira\n * linha.\n *\n * Fica com `aria-hidden`: o ícone repete o que o texto diz.\n */\nexport const ToastIndicator = (props: ToastIndicatorProps) => {\n  const { render, className, children, ...rest } = props;\n\n  const { type } = useToastRootContext();\n\n  const baseProps = {\n    'data-component': 'Toast.Indicator',\n    'aria-hidden': true,\n    children: children ?? typeIndicators[type],\n    className: mergeTwClassNames(toastIndicatorVariants({ type }), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nToastIndicator.displayName = 'Toast.Indicator';\n\nconst typeIndicators: Record<ToastType, React.ReactNode> = {\n  neutral: <Icon render={<InfoIcon />} />,\n  info: <Icon render={<InfoIcon />} />,\n  success: <Icon render={<CheckCircleIcon />} />,\n  warning: <Icon render={<WarningIcon />} />,\n  error: <Icon render={<WarningCircleIcon />} />,\n  loading: <Spinner />,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,EAAE,SAAS,oBAAoB;CAErC,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,UAAU,YAAY,eAAe;EACrC,WAAW,kBAAkB,uBAAuB,EAAE,KAAK,CAAC,GAAG,SAAS;CAC1E;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc;AAE7B,MAAM,iBAAqD;CACzD,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,UAAD,CAAW,CAAA,EAAI,CAAA;CACtC,MAAM,oBAAC,MAAD,EAAM,QAAQ,oBAAC,UAAD,CAAW,CAAA,EAAI,CAAA;CACnC,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,iBAAD,CAAkB,CAAA,EAAI,CAAA;CAC7C,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;CACzC,OAAO,oBAAC,MAAD,EAAM,QAAQ,oBAAC,mBAAD,CAAoB,CAAA,EAAI,CAAA;CAC7C,SAAS,oBAAC,SAAD,CAAU,CAAA;AACrB"}

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

@@ -1,7 +1,7 @@
 //#region src/components/feedback/toast/toast-root-variants.d.ts
 /**
  * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra
- * e cor do texto estão explicados (tabela no README de `overlays`). As diferenças:
+ * e cor do texto estão explicados. As diferenças:
  * - posição e animação próprias, da pilha, abaixo;
  * - `shadow-lg`, como o Dialog, e anel de foco: o toast entra no Tab;
  * - o `type` colore a superfície, como o `status` do Alert: declara `--toast-bg` (passo 3, opaco,

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

@@ -3,12 +3,12 @@ import { cva } from "class-variance-authority";
 /** O `type` declara estas variáveis, e o `toastRootVariants` as consome (explicado nele). */
 const neutralSurface = [
 	"[--toast-bg:var(--color-white)]",
-	"dark:[--toast-bg:var(--color-gray-2)]",
-	"[--toast-border:var(--color-gray-6)]"
+	"dark:[--toast-bg:var(--gray-2)]",
+	"[--toast-border:var(--gray-6)]"
 ];
 /**
 * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra
-* e cor do texto estão explicados (tabela no README de `overlays`). As diferenças:
+* e cor do texto estão explicados. As diferenças:
 * - posição e animação próprias, da pilha, abaixo;
 * - `shadow-lg`, como o Dialog, e anel de foco: o toast entra no Tab;
 * - o `type` colore a superfície, como o `status` do Alert: declara `--toast-bg` (passo 3, opaco,
@@ -103,24 +103,24 @@ const toastRootVariants = cva([
 		neutral: neutralSurface,
 		loading: neutralSurface,
 		info: [
-			"[--toast-bg:var(--color-blue-3)]",
-			"[--toast-border:var(--color-blue-7)]",
-			"[--toast-fg:var(--color-blue-12)]"
+			"[--toast-bg:var(--blue-3)]",
+			"[--toast-border:var(--blue-7)]",
+			"[--toast-fg:var(--blue-12)]"
 		],
 		success: [
-			"[--toast-bg:var(--color-green-3)]",
-			"[--toast-border:var(--color-green-7)]",
-			"[--toast-fg:var(--color-green-12)]"
+			"[--toast-bg:var(--green-3)]",
+			"[--toast-border:var(--green-7)]",
+			"[--toast-fg:var(--green-12)]"
 		],
 		warning: [
-			"[--toast-bg:var(--color-amber-3)]",
-			"[--toast-border:var(--color-amber-7)]",
-			"[--toast-fg:var(--color-amber-12)]"
+			"[--toast-bg:var(--amber-3)]",
+			"[--toast-border:var(--amber-7)]",
+			"[--toast-fg:var(--amber-12)]"
 		],
 		error: [
-			"[--toast-bg:var(--color-red-3)]",
-			"[--toast-border:var(--color-red-7)]",
-			"[--toast-fg:var(--color-red-12)]"
+			"[--toast-bg:var(--red-3)]",
+			"[--toast-border:var(--red-7)]",
+			"[--toast-fg:var(--red-12)]"
 		]
 	},
 	edge: {

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

@@ -1 +1 @@
-{"version":3,"file":"toast-root-variants.js","names":[],"sources":["../../../../src/components/feedback/toast/toast-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/** O `type` declara estas variáveis, e o `toastRootVariants` as consome (explicado nele). */\nconst neutralSurface = [\n  '[--toast-bg:var(--color-white)]',\n  'dark:[--toast-bg:var(--color-gray-2)]',\n  '[--toast-border:var(--color-gray-6)]',\n];\n\nconst infoSurface = [\n  '[--toast-bg:var(--color-blue-3)]',\n  '[--toast-border:var(--color-blue-7)]',\n  '[--toast-fg:var(--color-blue-12)]',\n];\n\nconst successSurface = [\n  '[--toast-bg:var(--color-green-3)]',\n  '[--toast-border:var(--color-green-7)]',\n  '[--toast-fg:var(--color-green-12)]',\n];\n\nconst warningSurface = [\n  '[--toast-bg:var(--color-amber-3)]',\n  '[--toast-border:var(--color-amber-7)]',\n  '[--toast-fg:var(--color-amber-12)]',\n];\n\nconst errorSurface = [\n  '[--toast-bg:var(--color-red-3)]',\n  '[--toast-border:var(--color-red-7)]',\n  '[--toast-fg:var(--color-red-12)]',\n];\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra\n * e cor do texto estão explicados (tabela no README de `overlays`). As diferenças:\n * - posição e animação próprias, da pilha, abaixo;\n * - `shadow-lg`, como o Dialog, e anel de foco: o toast entra no Tab;\n * - o `type` colore a superfície, como o `status` do Alert: declara `--toast-bg` (passo 3, opaco,\n *   para os toasts de trás não aparecerem através dele), `--toast-border` (passo 7) e, nos tipos\n *   com cor, `--toast-fg` (passo 12), que o `Toast.Title` e o `Toast.Description` leem. O\n *   `neutral` e o `loading` ficam na superfície neutra, com o texto em gray;\n * - sem `--popover-padding`: o respiro fica no `Toast.Content`.\n *\n * **Pilha.** O Base UI escreve no toast o índice (`--toast-index`, 0 na frente), a soma das alturas\n * dos que estão à frente (`--toast-offset-y`), a altura dele (`--toast-height`) e o arrasto\n * (`--toast-swipe-movement-*`); o viewport escreve a altura do da frente\n * (`--toast-frontmost-height`). Todos positivos, contados a partir da borda: o\n * `--toast-stack-sign` do `Toast.Viewport` dá o sentido. Recolhida, a pilha deixa cada toast de\n * trás aparecer 12px além do da frente, encolhido em 5% por nível e com a altura do da frente,\n * com o conteúdo apagado pelo `Toast.Content`; expandida, cada um fica na própria altura, 12px\n * depois do anterior. Entre os dois estados só muda `--toast-y` e `--toast-scale`.\n *\n * Antes da primeira medição, o toast que entra não tem `--toast-height`, nem o viewport\n * `--toast-frontmost-height`. Por isso a altura recolhida entra no `--toast-y` com reserva de\n * `0px`: uma variável inválida invalida o `transform` inteiro, que vira `none`, e a entrada perde o\n * deslize, ficando só a opacidade.\n *\n * **`transform` em vez de `translate-*` e `scale-*`.** Durante o arrasto, o Base UI escreve um\n * `transform` inline (`translateX() translateY() scale()`) para prender o toast ao dedo. As\n * propriedades `translate` e `scale`, que as utilities do Tailwind escrevem, se somam ao\n * `transform` em vez de serem trocadas por ele: o toast andaria o dobro. O `transform` daqui usa\n * as mesmas funções, na mesma ordem: ao soltar, a transição parte do inline e só interpola função\n * por função quando as listas batem. Com listas diferentes, o navegador interpola por matriz, e a\n * saída pelo arrasto volta para o meio ou vai para o lado errado.\n *\n * **Entrada e saída.** O toast entra pela borda e sai por ela, ou para o lado do arrasto que o\n * fechou, por `--toast-hidden-*`. Com movimento reduzido, só esmaece. A curva de entrada também\n * serve à pilha que expande e recolhe: o elemento tem uma transição só fora da saída.\n *\n * O `::after` cobre o espaço até o toast seguinte, do lado da borda, para a pilha expandida não\n * recolher quando o mouse passa entre dois toasts.\n */\nexport const toastRootVariants = cva(\n  [\n    '[--toast-gap:--spacing(3)]',\n    '[--toast-peek:--spacing(3)]',\n    '[--toast-scale:max(0,1-var(--toast-index)*0.05)]',\n    '[--toast-collapsed-height:var(--toast-frontmost-height,var(--toast-height))]',\n    '[--toast-y:calc(var(--toast-stack-sign)*(var(--toast-index)*var(--toast-peek)+(1-var(--toast-scale))*var(--toast-collapsed-height,0px)))]',\n    '[--toast-hidden-x:0px]',\n    '[--toast-hidden-y:0px]',\n\n    'data-expanded:[--toast-scale:1]',\n    'data-expanded:[--toast-y:calc(var(--toast-stack-sign)*(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)))]',\n\n    'absolute',\n    'inset-x-0',\n    // Ordena só os toasts da fila entre si: o da frente por cima.\n    'z-[calc(1000-var(--toast-index))]',\n\n    'h-(--toast-collapsed-height)',\n    'data-expanded:h-(--toast-height)',\n\n    'rounded-md',\n    'corner-squircle',\n    'outline-1',\n    'outline-(--toast-border)',\n\n    'bg-(--toast-bg)',\n\n    'shadow-lg',\n    'shadow-black/12',\n    'dark:shadow-none',\n\n    // A fila vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n    'text-sm',\n    'text-gray-12',\n\n    // Arrastar com o mouse selecionaria o texto junto.\n    'select-none',\n    'ring-gray-9',\n    'focus-ring-outside',\n\n    \"after:content-['']\",\n    'after:absolute',\n    'after:inset-x-0',\n    'after:h-[calc(var(--toast-gap)+1px)]',\n\n    '[transform:translateX(calc(var(--toast-swipe-movement-x)+var(--toast-hidden-x)))_translateY(calc(var(--toast-y)+var(--toast-swipe-movement-y)+var(--toast-hidden-y)))_scale(var(--toast-scale))]',\n\n    'transition-opacity',\n    'not-motion-reduced:transition-[transform,opacity,height]',\n    'duration-400',\n    'ease-enter-emphasized',\n    'data-ending-style:duration-250',\n    'data-ending-style:ease-exit',\n    // A saída pelo arrasto continua um movimento que já tem velocidade: acelerar a partir do\n    // repouso pareceria um tranco ao soltar.\n    'data-ending-style:data-swipe-direction:ease-enter',\n\n    'not-motion-reduced:data-starting-style:[--toast-hidden-y:calc(var(--toast-stack-sign)*-150%)]',\n    'not-motion-reduced:data-ending-style:[--toast-hidden-y:calc(var(--toast-stack-sign)*-150%)]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=up]:[--toast-hidden-y:-150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=down]:[--toast-hidden-y:150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=left]:[--toast-hidden-x:-150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=left]:[--toast-hidden-y:0px]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=right]:[--toast-hidden-x:150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=right]:[--toast-hidden-y:0px]',\n    'data-starting-style:opacity-0',\n    'data-ending-style:opacity-0',\n\n    // Acima do `limit`, o toast fica montado (e `inert`) até sair: some sem se mover.\n    'data-limited:opacity-0',\n    'data-limited:data-ending-style:[--toast-hidden-y:0px]',\n  ],\n  {\n    variants: {\n      type: {\n        neutral: neutralSurface,\n        loading: neutralSurface,\n        info: infoSurface,\n        success: successSurface,\n        warning: warningSurface,\n        error: errorSurface,\n      },\n      edge: {\n        top: ['top-0', 'origin-top', 'after:bottom-full'],\n        bottom: ['bottom-0', 'origin-bottom', 'after:top-full'],\n      },\n    },\n  },\n);\n"],"mappings":";;;AAGA,MAAM,iBAAiB;CACrB;CACA;CACA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAa,oBAAoB,IAC/B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;CAGA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA,EACE,UAAU;CACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,MAAM;GA7IZ;GACA;GACA;EA2IY;EACN,SAAS;GAxIf;GACA;GACA;EAsIe;EACT,SAAS;GAnIf;GACA;GACA;EAiIe;EACT,OAAO;GA9Hb;GACA;GACA;EA4Ha;CACT;CACA,MAAM;EACJ,KAAK;GAAC;GAAS;GAAc;EAAmB;EAChD,QAAQ;GAAC;GAAY;GAAiB;EAAgB;CACxD;AACF,EACF,CACF"}
+{"version":3,"file":"toast-root-variants.js","names":[],"sources":["../../../../src/components/feedback/toast/toast-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/** O `type` declara estas variáveis, e o `toastRootVariants` as consome (explicado nele). */\nconst neutralSurface = [\n  '[--toast-bg:var(--color-white)]',\n  'dark:[--toast-bg:var(--gray-2)]',\n  '[--toast-border:var(--gray-6)]',\n];\n\nconst infoSurface = [\n  '[--toast-bg:var(--blue-3)]',\n  '[--toast-border:var(--blue-7)]',\n  '[--toast-fg:var(--blue-12)]',\n];\n\nconst successSurface = [\n  '[--toast-bg:var(--green-3)]',\n  '[--toast-border:var(--green-7)]',\n  '[--toast-fg:var(--green-12)]',\n];\n\nconst warningSurface = [\n  '[--toast-bg:var(--amber-3)]',\n  '[--toast-border:var(--amber-7)]',\n  '[--toast-fg:var(--amber-12)]',\n];\n\nconst errorSurface = [\n  '[--toast-bg:var(--red-3)]',\n  '[--toast-border:var(--red-7)]',\n  '[--toast-fg:var(--red-12)]',\n];\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra\n * e cor do texto estão explicados. As diferenças:\n * - posição e animação próprias, da pilha, abaixo;\n * - `shadow-lg`, como o Dialog, e anel de foco: o toast entra no Tab;\n * - o `type` colore a superfície, como o `status` do Alert: declara `--toast-bg` (passo 3, opaco,\n *   para os toasts de trás não aparecerem através dele), `--toast-border` (passo 7) e, nos tipos\n *   com cor, `--toast-fg` (passo 12), que o `Toast.Title` e o `Toast.Description` leem. O\n *   `neutral` e o `loading` ficam na superfície neutra, com o texto em gray;\n * - sem `--popover-padding`: o respiro fica no `Toast.Content`.\n *\n * **Pilha.** O Base UI escreve no toast o índice (`--toast-index`, 0 na frente), a soma das alturas\n * dos que estão à frente (`--toast-offset-y`), a altura dele (`--toast-height`) e o arrasto\n * (`--toast-swipe-movement-*`); o viewport escreve a altura do da frente\n * (`--toast-frontmost-height`). Todos positivos, contados a partir da borda: o\n * `--toast-stack-sign` do `Toast.Viewport` dá o sentido. Recolhida, a pilha deixa cada toast de\n * trás aparecer 12px além do da frente, encolhido em 5% por nível e com a altura do da frente,\n * com o conteúdo apagado pelo `Toast.Content`; expandida, cada um fica na própria altura, 12px\n * depois do anterior. Entre os dois estados só muda `--toast-y` e `--toast-scale`.\n *\n * Antes da primeira medição, o toast que entra não tem `--toast-height`, nem o viewport\n * `--toast-frontmost-height`. Por isso a altura recolhida entra no `--toast-y` com reserva de\n * `0px`: uma variável inválida invalida o `transform` inteiro, que vira `none`, e a entrada perde o\n * deslize, ficando só a opacidade.\n *\n * **`transform` em vez de `translate-*` e `scale-*`.** Durante o arrasto, o Base UI escreve um\n * `transform` inline (`translateX() translateY() scale()`) para prender o toast ao dedo. As\n * propriedades `translate` e `scale`, que as utilities do Tailwind escrevem, se somam ao\n * `transform` em vez de serem trocadas por ele: o toast andaria o dobro. O `transform` daqui usa\n * as mesmas funções, na mesma ordem: ao soltar, a transição parte do inline e só interpola função\n * por função quando as listas batem. Com listas diferentes, o navegador interpola por matriz, e a\n * saída pelo arrasto volta para o meio ou vai para o lado errado.\n *\n * **Entrada e saída.** O toast entra pela borda e sai por ela, ou para o lado do arrasto que o\n * fechou, por `--toast-hidden-*`. Com movimento reduzido, só esmaece. A curva de entrada também\n * serve à pilha que expande e recolhe: o elemento tem uma transição só fora da saída.\n *\n * O `::after` cobre o espaço até o toast seguinte, do lado da borda, para a pilha expandida não\n * recolher quando o mouse passa entre dois toasts.\n */\nexport const toastRootVariants = cva(\n  [\n    '[--toast-gap:--spacing(3)]',\n    '[--toast-peek:--spacing(3)]',\n    '[--toast-scale:max(0,1-var(--toast-index)*0.05)]',\n    '[--toast-collapsed-height:var(--toast-frontmost-height,var(--toast-height))]',\n    '[--toast-y:calc(var(--toast-stack-sign)*(var(--toast-index)*var(--toast-peek)+(1-var(--toast-scale))*var(--toast-collapsed-height,0px)))]',\n    '[--toast-hidden-x:0px]',\n    '[--toast-hidden-y:0px]',\n\n    'data-expanded:[--toast-scale:1]',\n    'data-expanded:[--toast-y:calc(var(--toast-stack-sign)*(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)))]',\n\n    'absolute',\n    'inset-x-0',\n    // Ordena só os toasts da fila entre si: o da frente por cima.\n    'z-[calc(1000-var(--toast-index))]',\n\n    'h-(--toast-collapsed-height)',\n    'data-expanded:h-(--toast-height)',\n\n    'rounded-md',\n    'corner-squircle',\n    'outline-1',\n    'outline-(--toast-border)',\n\n    'bg-(--toast-bg)',\n\n    'shadow-lg',\n    'shadow-black/12',\n    'dark:shadow-none',\n\n    // A fila vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n    'text-sm',\n    'text-gray-12',\n\n    // Arrastar com o mouse selecionaria o texto junto.\n    'select-none',\n    'ring-gray-9',\n    'focus-ring-outside',\n\n    \"after:content-['']\",\n    'after:absolute',\n    'after:inset-x-0',\n    'after:h-[calc(var(--toast-gap)+1px)]',\n\n    '[transform:translateX(calc(var(--toast-swipe-movement-x)+var(--toast-hidden-x)))_translateY(calc(var(--toast-y)+var(--toast-swipe-movement-y)+var(--toast-hidden-y)))_scale(var(--toast-scale))]',\n\n    'transition-opacity',\n    'not-motion-reduced:transition-[transform,opacity,height]',\n    'duration-400',\n    'ease-enter-emphasized',\n    'data-ending-style:duration-250',\n    'data-ending-style:ease-exit',\n    // A saída pelo arrasto continua um movimento que já tem velocidade: acelerar a partir do\n    // repouso pareceria um tranco ao soltar.\n    'data-ending-style:data-swipe-direction:ease-enter',\n\n    'not-motion-reduced:data-starting-style:[--toast-hidden-y:calc(var(--toast-stack-sign)*-150%)]',\n    'not-motion-reduced:data-ending-style:[--toast-hidden-y:calc(var(--toast-stack-sign)*-150%)]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=up]:[--toast-hidden-y:-150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=down]:[--toast-hidden-y:150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=left]:[--toast-hidden-x:-150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=left]:[--toast-hidden-y:0px]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=right]:[--toast-hidden-x:150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=right]:[--toast-hidden-y:0px]',\n    'data-starting-style:opacity-0',\n    'data-ending-style:opacity-0',\n\n    // Acima do `limit`, o toast fica montado (e `inert`) até sair: some sem se mover.\n    'data-limited:opacity-0',\n    'data-limited:data-ending-style:[--toast-hidden-y:0px]',\n  ],\n  {\n    variants: {\n      type: {\n        neutral: neutralSurface,\n        loading: neutralSurface,\n        info: infoSurface,\n        success: successSurface,\n        warning: warningSurface,\n        error: errorSurface,\n      },\n      edge: {\n        top: ['top-0', 'origin-top', 'after:bottom-full'],\n        bottom: ['bottom-0', 'origin-bottom', 'after:top-full'],\n      },\n    },\n  },\n);\n"],"mappings":";;;AAGA,MAAM,iBAAiB;CACrB;CACA;CACA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAa,oBAAoB,IAC/B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;CAGA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA,EACE,UAAU;CACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,MAAM;GA7IZ;GACA;GACA;EA2IY;EACN,SAAS;GAxIf;GACA;GACA;EAsIe;EACT,SAAS;GAnIf;GACA;GACA;EAiIe;EACT,OAAO;GA9Hb;GACA;GACA;EA4Ha;CACT;CACA,MAAM;EACJ,KAAK;GAAC;GAAS;GAAc;EAAmB;EAChD,QAAQ;GAAC;GAAY;GAAiB;EAAgB;CACxD;AACF,EACF,CACF"}

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

@@ -6,9 +6,9 @@ export type ToastTitleState = Toast.Title.State;
  * Título do toast: sem filhos, mostra o `title` do toast, e some quando ele não tem um. Dá o nome
  * do toast para o leitor de tela.
  *
- * Cópia do `Alert.Title`, a origem (tabela no README de `feedback`): foge da tabela de tipografia,
- * no tamanho da descrição (`text-sm/5`), diferenciado pelo peso, para o toast ficar compacto. A
- * diferença: é o `h2` do Base UI, e a cor vem de `--toast-fg`, que o `type` declara.
+ * Cópia do `Alert.Title`, a origem: foge da tabela de tipografia, no tamanho da descrição
+ * (`text-sm/5`), diferenciado pelo peso, para o toast ficar compacto. A diferença: é o `h2` do Base
+ * UI, e a cor vem de `--toast-fg`, que o `type` declara.
  */
 export declare const ToastTitle: {
   (props: ToastTitleProps): import("react").JSX.Element;

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

@@ -6,9 +6,9 @@ import { Toast } from "@base-ui/react/toast";
 * Título do toast: sem filhos, mostra o `title` do toast, e some quando ele não tem um. Dá o nome
 * do toast para o leitor de tela.
 *
-* Cópia do `Alert.Title`, a origem (tabela no README de `feedback`): foge da tabela de tipografia,
-* no tamanho da descrição (`text-sm/5`), diferenciado pelo peso, para o toast ficar compacto. A
-* diferença: é o `h2` do Base UI, e a cor vem de `--toast-fg`, que o `type` declara.
+* Cópia do `Alert.Title`, a origem: foge da tabela de tipografia, no tamanho da descrição
+* (`text-sm/5`), diferenciado pelo peso, para o toast ficar compacto. A diferença: é o `h2` do Base
+* UI, e a cor vem de `--toast-fg`, que o `type` declara.
 */
 const ToastTitle = (props) => {
 	const { className, ...rest } = props;
@@ -18,7 +18,7 @@ const ToastTitle = (props) => {
 			"text-sm",
 			"leading-5",
 			"font-medium",
-			"text-(--toast-fg,var(--color-gray-12))",
+			"text-(--toast-fg,var(--gray-12))",
 			"text-pretty"
 		], className),
 		...rest

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

@@ -1 +1 @@
-{"version":3,"file":"toast-title.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/toast-title.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ToastTitleProps = BaseToast.Title.Props;\n\nexport type ToastTitleState = BaseToast.Title.State;\n\n/**\n * Título do toast: sem filhos, mostra o `title` do toast, e some quando ele não tem um. Dá o nome\n * do toast para o leitor de tela.\n *\n * Cópia do `Alert.Title`, a origem (tabela no README de `feedback`): foge da tabela de tipografia,\n * no tamanho da descrição (`text-sm/5`), diferenciado pelo peso, para o toast ficar compacto. A\n * diferença: é o `h2` do Base UI, e a cor vem de `--toast-fg`, que o `type` declara.\n */\nexport const ToastTitle = (props: ToastTitleProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseToast.Title\n      data-component=\"Toast.Title\"\n      className={mergeStateClassNames(\n        [\n          'text-sm',\n          'leading-5',\n          'font-medium',\n          'text-(--toast-fg,var(--color-gray-12))',\n          'text-pretty',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nToastTitle.displayName = 'Toast.Title';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,OAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}
+{"version":3,"file":"toast-title.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/toast-title.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ToastTitleProps = BaseToast.Title.Props;\n\nexport type ToastTitleState = BaseToast.Title.State;\n\n/**\n * Título do toast: sem filhos, mostra o `title` do toast, e some quando ele não tem um. Dá o nome\n * do toast para o leitor de tela.\n *\n * Cópia do `Alert.Title`, a origem: foge da tabela de tipografia, no tamanho da descrição\n * (`text-sm/5`), diferenciado pelo peso, para o toast ficar compacto. A diferença: é o `h2` do Base\n * UI, e a cor vem de `--toast-fg`, que o `type` declara.\n */\nexport const ToastTitle = (props: ToastTitleProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseToast.Title\n      data-component=\"Toast.Title\"\n      className={mergeStateClassNames(\n        [\n          'text-sm',\n          'leading-5',\n          'font-medium',\n          'text-(--toast-fg,var(--gray-12))',\n          'text-pretty',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nToastTitle.displayName = 'Toast.Title';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,OAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/components/feedback/toast/toast-viewport-variants.d.ts

@@ -11,7 +11,7 @@
  */
 export declare const toastViewportVariants: (props?: ({
   edge?: "bottom" | "top" | null | undefined;
-  align?: "center" | "right" | "left" | null | undefined;
+  align?: "center" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=toast-viewport-variants.d.ts.map

package/dist/components/fields/checkbox/checkbox-root-variants.d.ts

@@ -22,6 +22,8 @@ export type CheckboxRootVariants = {
 };
 export declare const checkboxRootDefaultVariants: Required<CheckboxRootVariants>;
 /**
+ * O `Radio.Root` copia estas classes (ver o `radioRootVariants`).
+ *
  * Cada `colorScheme` só declara as variáveis `--checkbox-*`, e a `variant` decide onde elas
  * entram. Assim não há um bloco por combinação de cor e `variant`.
  *
@@ -29,7 +31,7 @@ export declare const checkboxRootDefaultVariants: Required<CheckboxRootVariants>
  * `data-checked`, então cada regra vem nos dois.
  */
 export declare const checkboxRootVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | null | undefined;
+  colorScheme?: "gray" | "accent" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | null | undefined;
   variant?: "solid" | "subtle" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/fields/checkbox/checkbox-root-variants.js

@@ -6,6 +6,8 @@ const checkboxRootDefaultVariants = {
 	variant: "solid"
 };
 /**
+* O `Radio.Root` copia estas classes (ver o `radioRootVariants`).
+*
 * Cada `colorScheme` só declara as variáveis `--checkbox-*`, e a `variant` decide onde elas
 * entram. Assim não há um bloco por combinação de cor e `variant`.
 *
@@ -37,15 +39,15 @@ const checkboxRootVariants = cva([
 			gray: [
 				"[--checkbox-solid-bg:var(--color-black)]",
 				"dark:[--checkbox-solid-bg:var(--color-white)]",
-				"[--checkbox-subtle-bg:var(--color-gray-4)]",
-				"[--checkbox-fg:var(--color-gray-12)]",
+				"[--checkbox-subtle-bg:var(--gray-4)]",
+				"[--checkbox-fg:var(--gray-12)]",
 				"ring-gray-9"
 			],
-			brand: [
-				"[--checkbox-solid-bg:var(--color-brand-9)]",
-				"[--checkbox-subtle-bg:var(--color-brand-4)]",
-				"[--checkbox-fg:var(--color-brand-11)]",
-				"ring-brand-9"
+			accent: [
+				"[--checkbox-solid-bg:var(--accent-9)]",
+				"[--checkbox-subtle-bg:var(--accent-4)]",
+				"[--checkbox-fg:var(--accent-11)]",
+				"ring-accent-9"
 			]
 		},
 		size: {
@@ -56,7 +58,7 @@ const checkboxRootVariants = cva([
 		},
 		variant: {
 			solid: [
-				"border-gray-alpha-7",
+				"border-gray-7",
 				"data-checked:border-(--checkbox-solid-bg)",
 				"data-checked:bg-(--checkbox-solid-bg)",
 				"data-indeterminate:border-(--checkbox-solid-bg)",
@@ -64,7 +66,7 @@ const checkboxRootVariants = cva([
 				"text-white"
 			],
 			outline: [
-				"border-gray-alpha-7",
+				"border-gray-7",
 				"data-checked:border-(--checkbox-solid-bg)",
 				"data-indeterminate:border-(--checkbox-solid-bg)",
 				"text-(--checkbox-fg)"

package/dist/components/fields/checkbox/checkbox-root-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-root-variants.js","names":[],"sources":["../../../../src/components/fields/checkbox/checkbox-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type CheckboxRootVariants = {\n  /**\n   * Cor da caixa marcada, do ícone e do anel de foco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Tamanho da caixa. O ícone do `Checkbox.Indicator` acompanha.\n   *\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /**\n   * Desenho da caixa marcada.\n   *\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'outline' | 'subtle';\n};\n\nexport const checkboxRootDefaultVariants: Required<CheckboxRootVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'solid',\n};\n\n/**\n * Cada `colorScheme` só declara as variáveis `--checkbox-*`, e a `variant` decide onde elas\n * entram. Assim não há um bloco por combinação de cor e `variant`.\n *\n * Marcado e `indeterminate` pintam igual: o Base UI marca o segundo com `data-indeterminate`, sem\n * `data-checked`, então cada regra vem nos dois.\n */\nexport const checkboxRootVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'shrink-0',\n    'align-middle',\n\n    'border',\n    'rounded-sm',\n    'corner-squircle',\n\n    'cursor-pointer',\n    'select-none',\n\n    'focus-ring-outside',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-readonly:cursor-default',\n\n    // Só a caixa desmarcada muda: o erro de um checkbox quase sempre é \"não marcado\".\n    'data-invalid:not-data-checked:not-data-indeterminate:border-red-9',\n    'aria-invalid:not-data-checked:not-data-indeterminate:border-red-9',\n    'data-invalid:ring-red-9',\n    'aria-invalid:ring-red-9',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--checkbox-solid-bg:var(--color-black)]',\n          'dark:[--checkbox-solid-bg:var(--color-white)]',\n          '[--checkbox-subtle-bg:var(--color-gray-4)]',\n          '[--checkbox-fg:var(--color-gray-12)]',\n          'ring-gray-9',\n        ],\n        brand: [\n          '[--checkbox-solid-bg:var(--color-brand-9)]',\n          '[--checkbox-subtle-bg:var(--color-brand-4)]',\n          '[--checkbox-fg:var(--color-brand-11)]',\n          'ring-brand-9',\n        ],\n      },\n      size: {\n        xs: ['size-3', '[&_svg]:size-2'],\n        sm: ['size-4', '[&_svg]:size-2.5'],\n        md: ['size-5', '[&_svg]:size-3.5'],\n        lg: ['size-6', '[&_svg]:size-4.5'],\n      },\n      variant: {\n        // Borda neutra desmarcado; marcado, a caixa inteira na cor.\n        solid: [\n          'border-gray-alpha-7',\n\n          'data-checked:border-(--checkbox-solid-bg)',\n          'data-checked:bg-(--checkbox-solid-bg)',\n          'data-indeterminate:border-(--checkbox-solid-bg)',\n          'data-indeterminate:bg-(--checkbox-solid-bg)',\n\n          'text-white',\n        ],\n        // Borda neutra desmarcado; marcado, só a borda e o ícone na cor.\n        outline: [\n          'border-gray-alpha-7',\n\n          'data-checked:border-(--checkbox-solid-bg)',\n          'data-indeterminate:border-(--checkbox-solid-bg)',\n\n          'text-(--checkbox-fg)',\n        ],\n        // Fundo claro da cor nos dois estados; marcado, o ícone na cor.\n        subtle: [\n          'border-(--checkbox-subtle-bg)',\n          'bg-(--checkbox-subtle-bg)',\n\n          'text-(--checkbox-fg)',\n        ],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'solid',\n        colorScheme: 'gray',\n        className: ['text-white', 'dark:text-black'],\n      },\n    ],\n    defaultVariants: {\n      colorScheme: checkboxRootDefaultVariants.colorScheme,\n      size: checkboxRootDefaultVariants.size,\n      variant: checkboxRootDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAwBA,MAAa,8BAA8D;CACzE,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,uBAAuB,IAClC;CACE;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CAGA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,UAAU,gBAAgB;GAC/B,IAAI,CAAC,UAAU,kBAAkB;GACjC,IAAI,CAAC,UAAU,kBAAkB;GACjC,IAAI,CAAC,UAAU,kBAAkB;EACnC;EACA,SAAS;GAEP,OAAO;IACL;IAEA;IACA;IACA;IACA;IAEA;GACF;GAEA,SAAS;IACP;IAEA;IACA;IAEA;GACF;GAEA,QAAQ;IACN;IACA;IAEA;GACF;EACF;CACF;CACA,kBAAkB,CAChB;EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,cAAc,iBAAiB;CAC7C,CACF;CACA,iBAAiB;EACf,aAAa,4BAA4B;EACzC,MAAM,4BAA4B;EAClC,SAAS,4BAA4B;CACvC;AACF,CACF"}
+{"version":3,"file":"checkbox-root-variants.js","names":[],"sources":["../../../../src/components/fields/checkbox/checkbox-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type CheckboxRootVariants = {\n  /**\n   * Cor da caixa marcada, do ícone e do anel de foco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Tamanho da caixa. O ícone do `Checkbox.Indicator` acompanha.\n   *\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /**\n   * Desenho da caixa marcada.\n   *\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'outline' | 'subtle';\n};\n\nexport const checkboxRootDefaultVariants: Required<CheckboxRootVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'solid',\n};\n\n/**\n * O `Radio.Root` copia estas classes (ver o `radioRootVariants`).\n *\n * Cada `colorScheme` só declara as variáveis `--checkbox-*`, e a `variant` decide onde elas\n * entram. Assim não há um bloco por combinação de cor e `variant`.\n *\n * Marcado e `indeterminate` pintam igual: o Base UI marca o segundo com `data-indeterminate`, sem\n * `data-checked`, então cada regra vem nos dois.\n */\nexport const checkboxRootVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'shrink-0',\n    'align-middle',\n\n    'border',\n    'rounded-sm',\n    'corner-squircle',\n\n    'cursor-pointer',\n    'select-none',\n\n    'focus-ring-outside',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-readonly:cursor-default',\n\n    // Só a caixa desmarcada muda: o erro de um checkbox quase sempre é \"não marcado\".\n    'data-invalid:not-data-checked:not-data-indeterminate:border-red-9',\n    'aria-invalid:not-data-checked:not-data-indeterminate:border-red-9',\n    'data-invalid:ring-red-9',\n    'aria-invalid:ring-red-9',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--checkbox-solid-bg:var(--color-black)]',\n          'dark:[--checkbox-solid-bg:var(--color-white)]',\n          '[--checkbox-subtle-bg:var(--gray-4)]',\n          '[--checkbox-fg:var(--gray-12)]',\n          'ring-gray-9',\n        ],\n        accent: [\n          '[--checkbox-solid-bg:var(--accent-9)]',\n          '[--checkbox-subtle-bg:var(--accent-4)]',\n          '[--checkbox-fg:var(--accent-11)]',\n          'ring-accent-9',\n        ],\n      },\n      size: {\n        xs: ['size-3', '[&_svg]:size-2'],\n        sm: ['size-4', '[&_svg]:size-2.5'],\n        md: ['size-5', '[&_svg]:size-3.5'],\n        lg: ['size-6', '[&_svg]:size-4.5'],\n      },\n      variant: {\n        // Borda neutra desmarcado; marcado, a caixa inteira na cor.\n        solid: [\n          'border-gray-7',\n\n          'data-checked:border-(--checkbox-solid-bg)',\n          'data-checked:bg-(--checkbox-solid-bg)',\n          'data-indeterminate:border-(--checkbox-solid-bg)',\n          'data-indeterminate:bg-(--checkbox-solid-bg)',\n\n          'text-white',\n        ],\n        // Borda neutra desmarcado; marcado, só a borda e o ícone na cor.\n        outline: [\n          'border-gray-7',\n\n          'data-checked:border-(--checkbox-solid-bg)',\n          'data-indeterminate:border-(--checkbox-solid-bg)',\n\n          'text-(--checkbox-fg)',\n        ],\n        // Fundo claro da cor nos dois estados; marcado, o ícone na cor.\n        subtle: [\n          'border-(--checkbox-subtle-bg)',\n          'bg-(--checkbox-subtle-bg)',\n\n          'text-(--checkbox-fg)',\n        ],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'solid',\n        colorScheme: 'gray',\n        className: ['text-white', 'dark:text-black'],\n      },\n    ],\n    defaultVariants: {\n      colorScheme: checkboxRootDefaultVariants.colorScheme,\n      size: checkboxRootDefaultVariants.size,\n      variant: checkboxRootDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAwBA,MAAa,8BAA8D;CACzE,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;;;;AAWA,MAAa,uBAAuB,IAClC;CACE;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CAGA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,UAAU,gBAAgB;GAC/B,IAAI,CAAC,UAAU,kBAAkB;GACjC,IAAI,CAAC,UAAU,kBAAkB;GACjC,IAAI,CAAC,UAAU,kBAAkB;EACnC;EACA,SAAS;GAEP,OAAO;IACL;IAEA;IACA;IACA;IACA;IAEA;GACF;GAEA,SAAS;IACP;IAEA;IACA;IAEA;GACF;GAEA,QAAQ;IACN;IACA;IAEA;GACF;EACF;CACF;CACA,kBAAkB,CAChB;EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,cAAc,iBAAiB;CAC7C,CACF;CACA,iBAAiB;EACf,aAAa,4BAA4B;EACzC,MAAM,4BAA4B;EAClC,SAAS,4BAA4B;CACvC;AACF,CACF"}

package/dist/components/fields/currency-brl-input/currency-brl-input-variants.js

@@ -41,16 +41,16 @@ const currencyBrlInputVariants = cva([
 	"data-disabled:opacity-50",
 	"data-disabled:cursor-not-allowed",
 	"data-invalid:border-red-9",
-	"data-invalid:[--currency-brl-input-focus-color:var(--color-red-9)]",
+	"data-invalid:[--currency-brl-input-focus-color:var(--red-9)]",
 	"aria-invalid:border-red-9",
-	"aria-invalid:[--currency-brl-input-focus-color:var(--color-red-9)]"
+	"aria-invalid:[--currency-brl-input-focus-color:var(--red-9)]"
 ], {
 	variants: {
 		variant: {
 			outline: [
 				"bg-white/90",
 				"dark:bg-black/90",
-				"border-gray-alpha-7"
+				"border-gray-7"
 			],
 			subtle: ["bg-gray-4", "border-transparent"]
 		},

package/dist/components/fields/currency-brl-input/currency-brl-input-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"currency-brl-input-variants.js","names":[],"sources":["../../../../src/components/fields/currency-brl-input/currency-brl-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type CurrencyBrlInputVariants = {\n  /**\n   * Altura, padding e tamanho do texto, os mesmos do `Input`. Substitui o atributo nativo `size`:\n   * a largura vem do CSS. Em tela de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone\n   * não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const currencyBrlInputDefaultVariants: Required<CurrencyBrlInputVariants> =\n  {\n    size: 'sm',\n    variant: 'outline',\n  };\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do\n * mesmo jeito, explicados lá. As diferenças:\n * - sem `data-placeholder`;\n * - `tabular-nums`, que dá a mesma largura a todos os dígitos: o valor não muda de largura a cada\n *   tecla nem quando o separador de milhar entra.\n */\nexport const currencyBrlInputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'tabular-nums',\n\n    'placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--currency-brl-input-focus-color:var(--color-black)]',\n    'dark:[--currency-brl-input-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--currency-brl-input-focus-color)',\n    'focus-visible:border-(--currency-brl-input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--currency-brl-input-focus-color)',\n    'data-focused:border-(--currency-brl-input-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--currency-brl-input-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--currency-brl-input-focus-color:var(--color-red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-alpha-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n\n          'text-xs',\n          // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n          'any-pointer-coarse:text-base',\n        ],\n        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: currencyBrlInputDefaultVariants.size,\n      variant: currencyBrlInputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,kCACX;CACE,MAAM;CACN,SAAS;AACX;;;;;;;;AASF,MAAa,2BAA2B,IACtC;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,gCAAgC;EACtC,SAAS,gCAAgC;CAC3C;AACF,CACF"}
+{"version":3,"file":"currency-brl-input-variants.js","names":[],"sources":["../../../../src/components/fields/currency-brl-input/currency-brl-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type CurrencyBrlInputVariants = {\n  /**\n   * Altura, padding e tamanho do texto, os mesmos do `Input`. Substitui o atributo nativo `size`:\n   * a largura vem do CSS. Em tela de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone\n   * não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const currencyBrlInputDefaultVariants: Required<CurrencyBrlInputVariants> =\n  {\n    size: 'sm',\n    variant: 'outline',\n  };\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do\n * mesmo jeito, explicados lá. As diferenças:\n * - sem `data-placeholder`;\n * - `tabular-nums`, que dá a mesma largura a todos os dígitos: o valor não muda de largura a cada\n *   tecla nem quando o separador de milhar entra.\n */\nexport const currencyBrlInputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'tabular-nums',\n\n    'placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--currency-brl-input-focus-color:var(--color-black)]',\n    'dark:[--currency-brl-input-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--currency-brl-input-focus-color)',\n    'focus-visible:border-(--currency-brl-input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--currency-brl-input-focus-color)',\n    'data-focused:border-(--currency-brl-input-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--currency-brl-input-focus-color:var(--red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--currency-brl-input-focus-color:var(--red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n\n          'text-xs',\n          // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n          'any-pointer-coarse:text-base',\n        ],\n        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: currencyBrlInputDefaultVariants.size,\n      variant: currencyBrlInputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,kCACX;CACE,MAAM;CACN,SAAS;AACX;;;;;;;;AASF,MAAa,2BAA2B,IACtC;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,gCAAgC;EACtC,SAAS,gCAAgC;CAC3C;AACF,CACF"}

package/dist/components/fields/field/field-root.d.ts

@@ -8,7 +8,8 @@ export type FieldRootActions = Field.Root.Actions;
 /**
  * Agrupa rótulo, controle, descrição e erro de um campo. Repassa ao controle dentro dele o
  * `name`, o `disabled` (inclusive o que vem de um `Fieldset` em volta) e a validação, e liga o
- * rótulo e a descrição ao controle por `id`.
+ * rótulo e a descrição ao controle por `id`. Não há `Field.Control`: o `Input` e os demais campos
+ * da lib já se ligam ao `Field` sozinhos.
  *
  * O `size` vale só para os textos do campo: o controle recebe o próprio `size`, com o mesmo
  * valor.

package/dist/components/fields/field/field-root.js

@@ -8,7 +8,8 @@ const splitVariantProps = createSplitProps();
 /**
 * Agrupa rótulo, controle, descrição e erro de um campo. Repassa ao controle dentro dele o
 * `name`, o `disabled` (inclusive o que vem de um `Fieldset` em volta) e a validação, e liga o
-* rótulo e a descrição ao controle por `id`.
+* rótulo e a descrição ao controle por `id`. Não há `Field.Control`: o `Input` e os demais campos
+* da lib já se ligam ao `Field` sozinhos.
 *
 * O `size` vale só para os textos do campo: o controle recebe o próprio `size`, com o mesmo
 * valor.