@lucasbernardosn/react-ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,27 @@
+import { RadioRootVariants } from "./radio-root-variants.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/fields/radio/radio-root.d.ts
+export type RadioRootProps = MergeOverride<Radio.Root.Props, RadioRootVariants>;
+export type RadioRootState = Radio.Root.State;
+/**
+ * O círculo do radio, com um `<input>` escondido ao lado para o formulário. Precisa de um
+ * `value` e fica dentro de um `Radio.Group`. Renderiza um `<span>`, para caber dentro de um
+ * `<label>`: é o jeito mais simples de dar nome acessível. Sem rótulo visível, use `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * <label>
+ *   <Radio.Root value="ssd">
+ *     <Radio.Indicator />
+ *   </Radio.Root>
+ *   SSD
+ * </label>
+ * ```
+ */
+export declare const RadioRoot: {
+  (props: RadioRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=radio-root.d.ts.map

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

@@ -0,0 +1,40 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { radioRootVariants } from "./radio-root-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/fields/radio/radio-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* O círculo do radio, com um `<input>` escondido ao lado para o formulário. Precisa de um
+* `value` e fica dentro de um `Radio.Group`. Renderiza um `<span>`, para caber dentro de um
+* `<label>`: é o jeito mais simples de dar nome acessível. Sem rótulo visível, use `aria-label`.
+*
+* @example
+* ```tsx
+* <label>
+*   <Radio.Root value="ssd">
+*     <Radio.Indicator />
+*   </Radio.Root>
+*   SSD
+* </label>
+* ```
+*/
+const RadioRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	const { className, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-component": "Radio.Root",
+		className: mergeStateClassNames(radioRootVariants(variantProps), className),
+		...rest
+	});
+};
+RadioRoot.displayName = "Radio.Root";
+//#endregion
+export { RadioRoot };
+
+//# sourceMappingURL=radio-root.js.map

package/dist/components/fields/radio/radio-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-root.js","names":["BaseRadio"],"sources":["../../../../src/components/fields/radio/radio-root.tsx"],"sourcesContent":["import { Radio as BaseRadio } from '@base-ui/react/radio';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type RadioRootVariants,\n  radioRootVariants,\n} from './radio-root-variants';\n\nexport type RadioRootProps = MergeOverride<\n  BaseRadio.Root.Props,\n  RadioRootVariants\n>;\n\nexport type RadioRootState = BaseRadio.Root.State;\n\nconst splitVariantProps = createSplitProps<RadioRootVariants>();\n\n/**\n * O círculo do radio, com um `<input>` escondido ao lado para o formulário. Precisa de um\n * `value` e fica dentro de um `Radio.Group`. Renderiza um `<span>`, para caber dentro de um\n * `<label>`: é o jeito mais simples de dar nome acessível. Sem rótulo visível, use `aria-label`.\n *\n * @example\n * ```tsx\n * <label>\n *   <Radio.Root value=\"ssd\">\n *     <Radio.Indicator />\n *   </Radio.Root>\n *   SSD\n * </label>\n * ```\n */\nexport const RadioRoot = (props: RadioRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseRadio.Root\n      data-component=\"Radio.Root\"\n      className={mergeStateClassNames(\n        radioRootVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nRadioRoot.displayName = 'Radio.Root';\n"],"mappings":";;;;;;AAkBA,MAAM,oBAAoB,iBAAoC;;;;;;;;;;;;;;;;AAiB9D,MAAa,aAAa,UAA0B;CAClD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,MAAX;EACE,kBAAe;EACf,WAAW,qBACT,kBAAkB,YAAY,GAC9B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}

package/dist/components/fields/radio-card/index.d.ts

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

package/dist/components/fields/radio-card/index.js

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

package/dist/components/fields/radio-card/index.parts.d.ts

@@ -0,0 +1,12 @@
+import { RadioCardDescription, RadioCardDescriptionProps } from "./radio-card-description.js";
+import { RadioCardVariants } from "./use-radio-card-context.js";
+import { RadioCardGroup, RadioCardGroupChangeEventDetails, RadioCardGroupChangeEventReason, RadioCardGroupProps, RadioCardGroupState } from "./radio-card-group.js";
+import { RadioCardIndicator, RadioCardIndicatorProps } from "./radio-card-indicator.js";
+import { RadioCardItem, RadioCardItemProps, RadioCardItemState } from "./radio-card-item.js";
+import { RadioCardTitle, RadioCardTitleProps } from "./radio-card-title.js";
+declare namespace index_parts_d_exports {
+  export { RadioCardDescription as Description, RadioCardDescriptionProps as DescriptionProps, RadioCardGroup as Group, RadioCardGroupChangeEventDetails as GroupChangeEventDetails, RadioCardGroupChangeEventReason as GroupChangeEventReason, RadioCardGroupProps as GroupProps, RadioCardGroupState as GroupState, RadioCardIndicator as Indicator, RadioCardIndicatorProps as IndicatorProps, RadioCardItem as Item, RadioCardItemProps as ItemProps, RadioCardItemState as ItemState, RadioCardTitle as Title, RadioCardTitleProps as TitleProps, RadioCardVariants as Variants };
+}
+//#endregion
+export { RadioCardDescription as Description, type RadioCardDescriptionProps as DescriptionProps, RadioCardGroup as Group, type RadioCardGroupChangeEventDetails as GroupChangeEventDetails, type RadioCardGroupChangeEventReason as GroupChangeEventReason, type RadioCardGroupProps as GroupProps, type RadioCardGroupState as GroupState, RadioCardIndicator as Indicator, type RadioCardIndicatorProps as IndicatorProps, RadioCardItem as Item, type RadioCardItemProps as ItemProps, type RadioCardItemState as ItemState, RadioCardTitle as Title, type RadioCardTitleProps as TitleProps, type RadioCardVariants as Variants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/fields/radio-card/index.parts.js

@@ -0,0 +1,18 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { RadioCardDescription } from "./radio-card-description.js";
+import { RadioCardGroup } from "./radio-card-group.js";
+import { RadioCardIndicator } from "./radio-card-indicator.js";
+import { RadioCardItem } from "./radio-card-item.js";
+import { RadioCardTitle } from "./radio-card-title.js";
+//#region src/components/fields/radio-card/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Description: () => RadioCardDescription,
+	Group: () => RadioCardGroup,
+	Indicator: () => RadioCardIndicator,
+	Item: () => RadioCardItem,
+	Title: () => RadioCardTitle
+});
+//#endregion
+export { RadioCardDescription as Description, RadioCardGroup as Group, RadioCardIndicator as Indicator, RadioCardItem as Item, RadioCardTitle as Title, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/fields/radio-card/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/fields/radio-card/index.parts.ts"],"sourcesContent":["export { RadioCardDescription as Description } from './radio-card-description';\nexport { RadioCardGroup as Group } from './radio-card-group';\nexport { RadioCardIndicator as Indicator } from './radio-card-indicator';\nexport { RadioCardItem as Item } from './radio-card-item';\nexport { RadioCardTitle as Title } from './radio-card-title';\n\n/* types */\n\nexport type { RadioCardDescriptionProps as DescriptionProps } from './radio-card-description';\nexport type {\n  RadioCardGroupChangeEventDetails as GroupChangeEventDetails,\n  RadioCardGroupChangeEventReason as GroupChangeEventReason,\n  RadioCardGroupProps as GroupProps,\n  RadioCardGroupState as GroupState,\n} from './radio-card-group';\nexport type { RadioCardIndicatorProps as IndicatorProps } from './radio-card-indicator';\nexport type {\n  RadioCardItemProps as ItemProps,\n  RadioCardItemState as ItemState,\n} from './radio-card-item';\nexport type { RadioCardTitleProps as TitleProps } from './radio-card-title';\nexport type { RadioCardVariants as Variants } from './use-radio-card-context';\n"],"mappings":""}

package/dist/components/fields/radio-card/radio-card-description.d.ts

@@ -0,0 +1,14 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/fields/radio-card/radio-card-description.d.ts
+export type RadioCardDescriptionProps = useRender.ComponentProps<'div'>;
+/**
+ * O texto de apoio do cartão, com a tipografia fixa das descrições. O `Item` o liga a si por
+ * `aria-describedby`, usando o `id` que gera. Com um `id` próprio, passe o mesmo id ao
+ * `aria-describedby` do `Item`.
+ */
+export declare const RadioCardDescription: {
+  (props: RadioCardDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=radio-card-description.d.ts.map

package/dist/components/fields/radio-card/radio-card-description.js

@@ -0,0 +1,34 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useRadioCardItemContext } from "./use-radio-card-item-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/fields/radio-card/radio-card-description.tsx
+/**
+* O texto de apoio do cartão, com a tipografia fixa das descrições. O `Item` o liga a si por
+* `aria-describedby`, usando o `id` que gera. Com um `id` próprio, passe o mesmo id ao
+* `aria-describedby` do `Item`.
+*/
+const RadioCardDescription = (props) => {
+	const { render, className, ...rest } = props;
+	const { descriptionId } = useRadioCardItemContext();
+	const baseProps = {
+		"data-component": "RadioCard.Description",
+		id: descriptionId,
+		className: mergeTwClassNames([
+			"mt-1",
+			"text-sm",
+			"leading-5",
+			"text-gray-11",
+			"text-pretty"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+RadioCardDescription.displayName = "RadioCard.Description";
+//#endregion
+export { RadioCardDescription };
+
+//# sourceMappingURL=radio-card-description.js.map

package/dist/components/fields/radio-card/radio-card-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card-description.js","names":[],"sources":["../../../../src/components/fields/radio-card/radio-card-description.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { useRadioCardItemContext } from './use-radio-card-item-context';\n\nexport type RadioCardDescriptionProps = useRender.ComponentProps<'div'>;\n\n/**\n * O texto de apoio do cartão, com a tipografia fixa das descrições. O `Item` o liga a si por\n * `aria-describedby`, usando o `id` que gera. Com um `id` próprio, passe o mesmo id ao\n * `aria-describedby` do `Item`.\n */\nexport const RadioCardDescription = (props: RadioCardDescriptionProps) => {\n  const { render, className, ...rest } = props;\n\n  const { descriptionId } = useRadioCardItemContext();\n\n  const baseProps = {\n    'data-component': 'RadioCard.Description',\n    id: descriptionId,\n    className: mergeTwClassNames(\n      ['mt-1', 'text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nRadioCardDescription.displayName = 'RadioCard.Description';\n"],"mappings":";;;;;;;;;AAWA,MAAa,wBAAwB,UAAqC;CACxE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,kBAAkB,wBAAwB;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,IAAI;EACJ,WAAW,kBACT;GAAC;GAAQ;GAAW;GAAa;GAAgB;EAAa,GAC9D,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,qBAAqB,cAAc"}

package/dist/components/fields/radio-card/radio-card-group.d.ts

@@ -0,0 +1,41 @@
+import { RadioCardVariants } from "./use-radio-card-context.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/fields/radio-card/radio-card-group.d.ts
+export type RadioCardGroupProps = MergeOverride<RadioGroup.Props, RadioCardVariants>;
+export type RadioCardGroupState = RadioGroup.State;
+export type RadioCardGroupChangeEventDetails = RadioGroup.ChangeEventDetails;
+export type RadioCardGroupChangeEventReason = RadioGroup.ChangeEventReason;
+/**
+ * Guarda o `value` do `RadioCard.Item` marcado dentro dele: só um fica marcado por vez, e a
+ * `variant` e o `colorScheme` valem para todos os cartões. Sem estilo de layout: a disposição vem
+ * por `className` (uma grade, uma coluna).
+ *
+ * O Base UI não tem orientação: as setas andam entre os cartões nas duas direções, qualquer que
+ * seja a disposição. Dê o nome ao grupo com `aria-labelledby` ou `aria-label`, ou, num formulário,
+ * pelo `Fieldset.Root` (`<Fieldset.Root render={<RadioCard.Group />}>`, dentro de um `Field.Root`
+ * com `name`).
+ *
+ * @example
+ * ```tsx
+ * <RadioCard.Group
+ *   aria-label="Plano"
+ *   defaultValue="pro"
+ *   className="grid grid-cols-3 gap-4"
+ * >
+ *   <RadioCard.Item value="basic">
+ *     <RadioCard.Indicator />
+ *
+ *     <RadioCard.Title>Básico</RadioCard.Title>
+ *     <RadioCard.Description>Até 5 usuários</RadioCard.Description>
+ *   </RadioCard.Item>
+ *   …
+ * </RadioCard.Group>
+ * ```
+ */
+export declare const RadioCardGroup: {
+  (props: RadioCardGroupProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=radio-card-group.d.ts.map

package/dist/components/fields/radio-card/radio-card-group.js

@@ -0,0 +1,51 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { RadioCardContextProvider } from "./use-radio-card-context.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/fields/radio-card/radio-card-group.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Guarda o `value` do `RadioCard.Item` marcado dentro dele: só um fica marcado por vez, e a
+* `variant` e o `colorScheme` valem para todos os cartões. Sem estilo de layout: a disposição vem
+* por `className` (uma grade, uma coluna).
+*
+* O Base UI não tem orientação: as setas andam entre os cartões nas duas direções, qualquer que
+* seja a disposição. Dê o nome ao grupo com `aria-labelledby` ou `aria-label`, ou, num formulário,
+* pelo `Fieldset.Root` (`<Fieldset.Root render={<RadioCard.Group />}>`, dentro de um `Field.Root`
+* com `name`).
+*
+* @example
+* ```tsx
+* <RadioCard.Group
+*   aria-label="Plano"
+*   defaultValue="pro"
+*   className="grid grid-cols-3 gap-4"
+* >
+*   <RadioCard.Item value="basic">
+*     <RadioCard.Indicator />
+*
+*     <RadioCard.Title>Básico</RadioCard.Title>
+*     <RadioCard.Description>Até 5 usuários</RadioCard.Description>
+*   </RadioCard.Item>
+*   …
+* </RadioCard.Group>
+* ```
+*/
+const RadioCardGroup = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["colorScheme", "variant"]);
+	const { className, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(RadioCardContextProvider, {
+		value: variantProps,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			"data-component": "RadioCard.Group",
+			className: mergeStateClassNames([], className),
+			...rest
+		})
+	});
+};
+RadioCardGroup.displayName = "RadioCard.Group";
+//#endregion
+export { RadioCardGroup };
+
+//# sourceMappingURL=radio-card-group.js.map

package/dist/components/fields/radio-card/radio-card-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card-group.js","names":["BaseRadioGroup"],"sources":["../../../../src/components/fields/radio-card/radio-card-group.tsx"],"sourcesContent":["import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  RadioCardContextProvider,\n  type RadioCardVariants,\n} from './use-radio-card-context';\n\nexport type RadioCardGroupProps = MergeOverride<\n  BaseRadioGroup.Props,\n  RadioCardVariants\n>;\n\nexport type RadioCardGroupState = BaseRadioGroup.State;\n\nexport type RadioCardGroupChangeEventDetails =\n  BaseRadioGroup.ChangeEventDetails;\n\nexport type RadioCardGroupChangeEventReason = BaseRadioGroup.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<RadioCardVariants>();\n\n/**\n * Guarda o `value` do `RadioCard.Item` marcado dentro dele: só um fica marcado por vez, e a\n * `variant` e o `colorScheme` valem para todos os cartões. Sem estilo de layout: a disposição vem\n * por `className` (uma grade, uma coluna).\n *\n * O Base UI não tem orientação: as setas andam entre os cartões nas duas direções, qualquer que\n * seja a disposição. Dê o nome ao grupo com `aria-labelledby` ou `aria-label`, ou, num formulário,\n * pelo `Fieldset.Root` (`<Fieldset.Root render={<RadioCard.Group />}>`, dentro de um `Field.Root`\n * com `name`).\n *\n * @example\n * ```tsx\n * <RadioCard.Group\n *   aria-label=\"Plano\"\n *   defaultValue=\"pro\"\n *   className=\"grid grid-cols-3 gap-4\"\n * >\n *   <RadioCard.Item value=\"basic\">\n *     <RadioCard.Indicator />\n *\n *     <RadioCard.Title>Básico</RadioCard.Title>\n *     <RadioCard.Description>Até 5 usuários</RadioCard.Description>\n *   </RadioCard.Item>\n *   …\n * </RadioCard.Group>\n * ```\n */\nexport const RadioCardGroup = (props: RadioCardGroupProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <RadioCardContextProvider value={variantProps}>\n      <BaseRadioGroup\n        data-component=\"RadioCard.Group\"\n        className={mergeStateClassNames([], className)}\n        {...rest}\n      />\n    </RadioCardContextProvider>\n  );\n};\n\nRadioCardGroup.displayName = 'RadioCard.Group';\n"],"mappings":";;;;;;AAuBA,MAAM,oBAAoB,iBAAoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6B9D,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,SACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAACA,YAAD;GACE,kBAAe;GACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;GAC7C,GAAI;EACL,CAAA;CACuB,CAAA;AAE9B;AAEA,eAAe,cAAc"}

package/dist/components/fields/radio-card/radio-card-indicator.d.ts

@@ -0,0 +1,24 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/fields/radio-card/radio-card-indicator.d.ts
+export type RadioCardIndicatorProps = Omit<useRender.ComponentProps<'span'>, 'children'>;
+/**
+ * O círculo com o ponto, na posição em que for escrito: antes ou depois do `Title` e do
+ * `Description`. Com o `Indicator` como primeiro ou último filho do `Item`, a grade do cartão
+ * reserva uma coluna para ele. Acompanha a `variant` e o `colorScheme` do `Group`, pelas variáveis
+ * `--radio-card-*` do `Item`. Só decora: o nome e o estado ficam no `Item`.
+ *
+ * Visual copiado do `Radio.Root` e do `Radio.Indicator` (`solid`, `size="sm"`). Diferenças:
+ *
+ * - o círculo é um `span` que lê o `data-checked` do `Item` (`group-data-checked/radio-card`), em
+ *   vez de ser o próprio radio; o foco, o desabilitado e o inválido ficam no `Item`;
+ * - o tamanho é fixo em `sm`, com `mt-0.5` para o círculo centralizar na primeira linha do `Title`;
+ * - as variáveis são `--radio-card-*`, declaradas no `Item`;
+ * - o ponto é o `Radio.Indicator` do Base UI dentro do círculo, com as mesmas classes do
+ *   `Radio.Indicator` da lib.
+ */
+export declare const RadioCardIndicator: {
+  (props: RadioCardIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=radio-card-indicator.d.ts.map

package/dist/components/fields/radio-card/radio-card-indicator.js

@@ -0,0 +1,67 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/fields/radio-card/radio-card-indicator.tsx
+/**
+* O círculo com o ponto, na posição em que for escrito: antes ou depois do `Title` e do
+* `Description`. Com o `Indicator` como primeiro ou último filho do `Item`, a grade do cartão
+* reserva uma coluna para ele. Acompanha a `variant` e o `colorScheme` do `Group`, pelas variáveis
+* `--radio-card-*` do `Item`. Só decora: o nome e o estado ficam no `Item`.
+*
+* Visual copiado do `Radio.Root` e do `Radio.Indicator` (`solid`, `size="sm"`). Diferenças:
+*
+* - o círculo é um `span` que lê o `data-checked` do `Item` (`group-data-checked/radio-card`), em
+*   vez de ser o próprio radio; o foco, o desabilitado e o inválido ficam no `Item`;
+* - o tamanho é fixo em `sm`, com `mt-0.5` para o círculo centralizar na primeira linha do `Title`;
+* - as variáveis são `--radio-card-*`, declaradas no `Item`;
+* - o ponto é o `Radio.Indicator` do Base UI dentro do círculo, com as mesmas classes do
+*   `Radio.Indicator` da lib.
+*/
+const RadioCardIndicator = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "RadioCard.Indicator",
+		className: mergeTwClassNames([
+			"row-span-2",
+			"last:not-first:col-start-2",
+			"last:not-first:row-start-1",
+			"inline-flex",
+			"items-center",
+			"justify-center",
+			"shrink-0",
+			"size-4",
+			"mt-0.5",
+			"[--radio-card-dot-size:--spacing(1.5)]",
+			"border",
+			"border-gray-7",
+			"rounded-full",
+			"group-data-checked/radio-card:border-(--radio-card-solid-bg)",
+			"group-data-checked/radio-card:bg-(--radio-card-solid-bg)",
+			"text-(--radio-card-solid-fg)"
+		], className),
+		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: mergeTwClassNames([
+			"block",
+			"size-(--radio-card-dot-size)",
+			"rounded-full",
+			"bg-current",
+			"not-motion-reduced:transition-transform",
+			"not-motion-reduced:ease-enter",
+			"not-motion-reduced:duration-150",
+			"not-motion-reduced:data-starting-style:scale-0",
+			"not-motion-reduced:data-ending-style:scale-0",
+			"not-motion-reduced:data-ending-style:ease-exit",
+			"not-motion-reduced:data-ending-style:duration-100"
+		]) })
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+RadioCardIndicator.displayName = "RadioCard.Indicator";
+//#endregion
+export { RadioCardIndicator };
+
+//# sourceMappingURL=radio-card-indicator.js.map

package/dist/components/fields/radio-card/radio-card-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card-indicator.js","names":["BaseRadio"],"sources":["../../../../src/components/fields/radio-card/radio-card-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { mergeTwClassNames } from '#utils';\n\nexport type RadioCardIndicatorProps = Omit<\n  useRender.ComponentProps<'span'>,\n  'children'\n>;\n\n/**\n * O círculo com o ponto, na posição em que for escrito: antes ou depois do `Title` e do\n * `Description`. Com o `Indicator` como primeiro ou último filho do `Item`, a grade do cartão\n * reserva uma coluna para ele. Acompanha a `variant` e o `colorScheme` do `Group`, pelas variáveis\n * `--radio-card-*` do `Item`. Só decora: o nome e o estado ficam no `Item`.\n *\n * Visual copiado do `Radio.Root` e do `Radio.Indicator` (`solid`, `size=\"sm\"`). Diferenças:\n *\n * - o círculo é um `span` que lê o `data-checked` do `Item` (`group-data-checked/radio-card`), em\n *   vez de ser o próprio radio; o foco, o desabilitado e o inválido ficam no `Item`;\n * - o tamanho é fixo em `sm`, com `mt-0.5` para o círculo centralizar na primeira linha do `Title`;\n * - as variáveis são `--radio-card-*`, declaradas no `Item`;\n * - o ponto é o `Radio.Indicator` do Base UI dentro do círculo, com as mesmas classes do\n *   `Radio.Indicator` da lib.\n */\nexport const RadioCardIndicator = (props: RadioCardIndicatorProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'RadioCard.Indicator',\n    className: mergeTwClassNames(\n      [\n        'row-span-2',\n        'last:not-first:col-start-2',\n        'last:not-first:row-start-1',\n\n        'inline-flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n\n        'size-4',\n        'mt-0.5',\n        '[--radio-card-dot-size:--spacing(1.5)]',\n\n        'border',\n        'border-gray-7',\n        'rounded-full',\n\n        'group-data-checked/radio-card:border-(--radio-card-solid-bg)',\n        'group-data-checked/radio-card:bg-(--radio-card-solid-bg)',\n\n        'text-(--radio-card-solid-fg)',\n      ],\n      className,\n    ),\n    children: (\n      <BaseRadio.Indicator\n        className={mergeTwClassNames([\n          'block',\n          'size-(--radio-card-dot-size)',\n          'rounded-full',\n          'bg-current',\n\n          // O ponto cresce de 0 ao marcar e sai mais curto ao desmarcar.\n          'not-motion-reduced:transition-transform',\n          'not-motion-reduced:ease-enter',\n          'not-motion-reduced:duration-150',\n          'not-motion-reduced:data-starting-style:scale-0',\n          'not-motion-reduced:data-ending-style:scale-0',\n          'not-motion-reduced:data-ending-style:ease-exit',\n          'not-motion-reduced:data-ending-style:duration-100',\n        ])}\n      />\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nRadioCardIndicator.displayName = 'RadioCard.Indicator';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,UACE,oBAACA,MAAU,WAAX,EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GAGA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,EACF,CAAA;CAEL;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,mBAAmB,cAAc"}

package/dist/components/fields/radio-card/radio-card-item-variants.d.ts

@@ -0,0 +1,25 @@
+//#region src/components/fields/radio-card/radio-card-item-variants.d.ts
+/**
+ * Copia as classes de estado do `radioRootVariants` (foco, desabilitado, somente leitura e
+ * inválido), no cartão inteiro. Diferenças:
+ *
+ * - o cartão é uma superfície (`rounded-lg`, `p-3`, fundo do `Card`), com a borda `gray-7` e o
+ *   hover em `gray-8` quando desmarcado;
+ * - o `variant` pinta o cartão marcado, não o círculo: `outline` só troca a cor da borda, como o
+ *   `outline` do `Checkbox` e do `Radio`; `surface` pinta o fundo e a borda;
+ * - o inválido pinta de vermelho só a borda do cartão desmarcado, sem trocar o anel do marcado.
+ *
+ * O `colorScheme` só declara as variáveis `--radio-card-*`, que o `variant` e o
+ * `RadioCard.Indicator` consomem (o círculo herda as variáveis do cartão).
+ *
+ * O layout é uma grade de uma coluna (conteúdo empilhado, para um ícone no topo). Com o
+ * `RadioCard.Indicator` como primeiro ou último filho, a grade passa a duas colunas, e o
+ * Indicator ocupa as duas linhas da sua: o Title e o Description vão para a outra coluna pela
+ * própria ordem de colocação da grade.
+ */
+export declare const radioCardItemVariants: (props?: ({
+  colorScheme?: "gray" | "accent" | null | undefined;
+  variant?: "surface" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=radio-card-item-variants.d.ts.map

package/dist/components/fields/radio-card/radio-card-item-variants.js

@@ -0,0 +1,83 @@
+import { radioCardDefaultVariants } from "./use-radio-card-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/fields/radio-card/radio-card-item-variants.ts
+/**
+* Copia as classes de estado do `radioRootVariants` (foco, desabilitado, somente leitura e
+* inválido), no cartão inteiro. Diferenças:
+*
+* - o cartão é uma superfície (`rounded-lg`, `p-3`, fundo do `Card`), com a borda `gray-7` e o
+*   hover em `gray-8` quando desmarcado;
+* - o `variant` pinta o cartão marcado, não o círculo: `outline` só troca a cor da borda, como o
+*   `outline` do `Checkbox` e do `Radio`; `surface` pinta o fundo e a borda;
+* - o inválido pinta de vermelho só a borda do cartão desmarcado, sem trocar o anel do marcado.
+*
+* O `colorScheme` só declara as variáveis `--radio-card-*`, que o `variant` e o
+* `RadioCard.Indicator` consomem (o círculo herda as variáveis do cartão).
+*
+* O layout é uma grade de uma coluna (conteúdo empilhado, para um ícone no topo). Com o
+* `RadioCard.Indicator` como primeiro ou último filho, a grade passa a duas colunas, e o
+* Indicator ocupa as duas linhas da sua: o Title e o Description vão para a outra coluna pela
+* própria ordem de colocação da grade.
+*/
+const radioCardItemVariants = cva([
+	"group/radio-card",
+	"grid",
+	"grid-cols-1",
+	"gap-x-3",
+	"min-w-0",
+	"has-[>[data-component='RadioCard.Indicator']:first-child]:grid-cols-[auto_1fr]",
+	"has-[>[data-component='RadioCard.Indicator']:last-child]:grid-cols-[1fr_auto]",
+	"p-3",
+	"border",
+	"border-gray-7",
+	"rounded-lg",
+	"corner-squircle",
+	"bg-white",
+	"dark:bg-gray-1",
+	"text-gray-12",
+	"text-start",
+	"cursor-pointer",
+	"select-none",
+	"not-data-checked:not-data-disabled:not-data-invalid:not-aria-invalid:hover:border-gray-8",
+	"focus-ring-outside",
+	"data-disabled:opacity-50",
+	"data-disabled:cursor-not-allowed",
+	"data-readonly:cursor-default",
+	"data-invalid:not-data-checked:border-red-9",
+	"aria-invalid:not-data-checked:border-red-9",
+	"data-invalid:not-data-checked:ring-red-9",
+	"aria-invalid:not-data-checked:ring-red-9"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--radio-card-solid-bg:var(--color-black)]",
+				"dark:[--radio-card-solid-bg:var(--color-white)]",
+				"[--radio-card-solid-fg:var(--color-white)]",
+				"dark:[--radio-card-solid-fg:var(--color-black)]",
+				"[--radio-card-subtle-bg:var(--gray-3)]",
+				"[--radio-card-subtle-border:var(--gray-8)]",
+				"ring-gray-9"
+			],
+			accent: [
+				"[--radio-card-solid-bg:var(--accent-9)]",
+				"[--radio-card-solid-fg:var(--color-white)]",
+				"[--radio-card-subtle-bg:var(--accent-3)]",
+				"[--radio-card-subtle-border:var(--accent-7)]",
+				"ring-accent-9"
+			]
+		},
+		variant: {
+			outline: ["data-checked:border-(--radio-card-solid-bg)"],
+			surface: ["data-checked:border-(--radio-card-subtle-border)", "data-checked:bg-(--radio-card-subtle-bg)"]
+		}
+	},
+	defaultVariants: {
+		colorScheme: radioCardDefaultVariants.colorScheme,
+		variant: radioCardDefaultVariants.variant
+	}
+});
+//#endregion
+export { radioCardItemVariants };
+
+//# sourceMappingURL=radio-card-item-variants.js.map

package/dist/components/fields/radio-card/radio-card-item-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card-item-variants.js","names":[],"sources":["../../../../src/components/fields/radio-card/radio-card-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { radioCardDefaultVariants } from './use-radio-card-context';\n\n/**\n * Copia as classes de estado do `radioRootVariants` (foco, desabilitado, somente leitura e\n * inválido), no cartão inteiro. Diferenças:\n *\n * - o cartão é uma superfície (`rounded-lg`, `p-3`, fundo do `Card`), com a borda `gray-7` e o\n *   hover em `gray-8` quando desmarcado;\n * - o `variant` pinta o cartão marcado, não o círculo: `outline` só troca a cor da borda, como o\n *   `outline` do `Checkbox` e do `Radio`; `surface` pinta o fundo e a borda;\n * - o inválido pinta de vermelho só a borda do cartão desmarcado, sem trocar o anel do marcado.\n *\n * O `colorScheme` só declara as variáveis `--radio-card-*`, que o `variant` e o\n * `RadioCard.Indicator` consomem (o círculo herda as variáveis do cartão).\n *\n * O layout é uma grade de uma coluna (conteúdo empilhado, para um ícone no topo). Com o\n * `RadioCard.Indicator` como primeiro ou último filho, a grade passa a duas colunas, e o\n * Indicator ocupa as duas linhas da sua: o Title e o Description vão para a outra coluna pela\n * própria ordem de colocação da grade.\n */\nexport const radioCardItemVariants = cva(\n  [\n    'group/radio-card',\n\n    'grid',\n    'grid-cols-1',\n    'gap-x-3',\n    'min-w-0',\n\n    \"has-[>[data-component='RadioCard.Indicator']:first-child]:grid-cols-[auto_1fr]\",\n    \"has-[>[data-component='RadioCard.Indicator']:last-child]:grid-cols-[1fr_auto]\",\n\n    'p-3',\n\n    'border',\n    'border-gray-7',\n    'rounded-lg',\n    'corner-squircle',\n\n    'bg-white',\n    'dark:bg-gray-1',\n\n    'text-gray-12',\n    'text-start',\n\n    'cursor-pointer',\n    'select-none',\n\n    'not-data-checked:not-data-disabled:not-data-invalid:not-aria-invalid:hover:border-gray-8',\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ó o cartão desmarcado muda: o erro de um radio quase sempre é \"não marcado\".\n    'data-invalid:not-data-checked:border-red-9',\n    'aria-invalid:not-data-checked:border-red-9',\n    'data-invalid:not-data-checked:ring-red-9',\n    'aria-invalid:not-data-checked:ring-red-9',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--radio-card-solid-bg:var(--color-black)]',\n          'dark:[--radio-card-solid-bg:var(--color-white)]',\n          '[--radio-card-solid-fg:var(--color-white)]',\n          'dark:[--radio-card-solid-fg:var(--color-black)]',\n          '[--radio-card-subtle-bg:var(--gray-3)]',\n          '[--radio-card-subtle-border:var(--gray-8)]',\n          'ring-gray-9',\n        ],\n        accent: [\n          '[--radio-card-solid-bg:var(--accent-9)]',\n          '[--radio-card-solid-fg:var(--color-white)]',\n          '[--radio-card-subtle-bg:var(--accent-3)]',\n          '[--radio-card-subtle-border:var(--accent-7)]',\n          'ring-accent-9',\n        ],\n      },\n      variant: {\n        // Marcado: só a borda troca de cor; um anel a mais pareceria o foco.\n        outline: ['data-checked:border-(--radio-card-solid-bg)'],\n        // Marcado: fundo suave e borda da cor.\n        surface: [\n          'data-checked:border-(--radio-card-subtle-border)',\n          'data-checked:bg-(--radio-card-subtle-bg)',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: radioCardDefaultVariants.colorScheme,\n      variant: radioCardDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,wBAAwB,IACnC;CACE;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CAEA;CACA;CAEA;CAGA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GAEP,SAAS,CAAC,6CAA6C;GAEvD,SAAS,CACP,oDACA,0CACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,yBAAyB;EACtC,SAAS,yBAAyB;CACpC;AACF,CACF"}

package/dist/components/fields/radio-card/radio-card-item.d.ts

@@ -0,0 +1,33 @@
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/fields/radio-card/radio-card-item.d.ts
+export type RadioCardItemProps = Radio.Root.Props;
+export type RadioCardItemState = Radio.Root.State;
+/**
+ * O cartão inteiro é o radio: o clique em qualquer ponto o marca, e as setas andam entre os
+ * cartões. Precisa de um `value` e fica dentro de um `RadioCard.Group`, que dá a `variant` e o
+ * `colorScheme`. Renderiza um `<div>` (o Base UI usaria um `<span>`), para caber parágrafos e
+ * blocos dentro, e deixa um `<input>` escondido ao lado para o formulário.
+ *
+ * O nome acessível vem do `RadioCard.Title` e a descrição, do `RadioCard.Description`, ligados por
+ * `aria-labelledby` e `aria-describedby`. Sem o `Title`, dê um `aria-label`; sem nome e sem
+ * descrição, a ligação aponta para um id inexistente e o leitor a ignora.
+ *
+ * O `RadioCard.Indicator` (o círculo) entra na posição em que for escrito: antes ou depois do
+ * texto. Sem ele, o estado marcado aparece só pelo cartão, como num cartão com ícone.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard.Item value="pro">
+ *   <RadioCard.Indicator />
+ *
+ *   <RadioCard.Title>Pro</RadioCard.Title>
+ *   <RadioCard.Description>Usuários ilimitados</RadioCard.Description>
+ * </RadioCard.Item>
+ * ```
+ */
+export declare const RadioCardItem: {
+  (props: RadioCardItemProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=radio-card-item.d.ts.map

package/dist/components/fields/radio-card/radio-card-item.js

@@ -0,0 +1,60 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { RadioCardItemContextProvider } from "./use-radio-card-item-context.js";
+import { useRadioCardContext } from "./use-radio-card-context.js";
+import { radioCardItemVariants } from "./radio-card-item-variants.js";
+import { useId, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/fields/radio-card/radio-card-item.tsx
+/**
+* O cartão inteiro é o radio: o clique em qualquer ponto o marca, e as setas andam entre os
+* cartões. Precisa de um `value` e fica dentro de um `RadioCard.Group`, que dá a `variant` e o
+* `colorScheme`. Renderiza um `<div>` (o Base UI usaria um `<span>`), para caber parágrafos e
+* blocos dentro, e deixa um `<input>` escondido ao lado para o formulário.
+*
+* O nome acessível vem do `RadioCard.Title` e a descrição, do `RadioCard.Description`, ligados por
+* `aria-labelledby` e `aria-describedby`. Sem o `Title`, dê um `aria-label`; sem nome e sem
+* descrição, a ligação aponta para um id inexistente e o leitor a ignora.
+*
+* O `RadioCard.Indicator` (o círculo) entra na posição em que for escrito: antes ou depois do
+* texto. Sem ele, o estado marcado aparece só pelo cartão, como num cartão com ícone.
+*
+* @example
+* ```tsx
+* <RadioCard.Item value="pro">
+*   <RadioCard.Indicator />
+*
+*   <RadioCard.Title>Pro</RadioCard.Title>
+*   <RadioCard.Description>Usuários ilimitados</RadioCard.Description>
+* </RadioCard.Item>
+* ```
+*/
+const RadioCardItem = (props) => {
+	const { className, ...rest } = props;
+	const { colorScheme, variant } = useRadioCardContext();
+	const titleId = useId();
+	const descriptionId = useId();
+	const ids = useMemo(() => ({
+		descriptionId,
+		titleId
+	}), [descriptionId, titleId]);
+	return /* @__PURE__ */ jsx(RadioCardItemContextProvider, {
+		value: ids,
+		children: /* @__PURE__ */ jsx(Radio.Root, {
+			"data-component": "RadioCard.Item",
+			render: /* @__PURE__ */ jsx("div", {}),
+			"aria-labelledby": titleId,
+			"aria-describedby": descriptionId,
+			className: mergeStateClassNames(radioCardItemVariants({
+				colorScheme,
+				variant
+			}), className),
+			...rest
+		})
+	});
+};
+RadioCardItem.displayName = "RadioCard.Item";
+//#endregion
+export { RadioCardItem };
+
+//# sourceMappingURL=radio-card-item.js.map

package/dist/components/fields/radio-card/radio-card-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card-item.js","names":["BaseRadio"],"sources":["../../../../src/components/fields/radio-card/radio-card-item.tsx"],"sourcesContent":["import { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { useId, useMemo } from 'react';\nimport { mergeStateClassNames } from '#utils';\nimport { radioCardItemVariants } from './radio-card-item-variants';\nimport { useRadioCardContext } from './use-radio-card-context';\nimport { RadioCardItemContextProvider } from './use-radio-card-item-context';\n\nexport type RadioCardItemProps = BaseRadio.Root.Props;\n\nexport type RadioCardItemState = BaseRadio.Root.State;\n\n/**\n * O cartão inteiro é o radio: o clique em qualquer ponto o marca, e as setas andam entre os\n * cartões. Precisa de um `value` e fica dentro de um `RadioCard.Group`, que dá a `variant` e o\n * `colorScheme`. Renderiza um `<div>` (o Base UI usaria um `<span>`), para caber parágrafos e\n * blocos dentro, e deixa um `<input>` escondido ao lado para o formulário.\n *\n * O nome acessível vem do `RadioCard.Title` e a descrição, do `RadioCard.Description`, ligados por\n * `aria-labelledby` e `aria-describedby`. Sem o `Title`, dê um `aria-label`; sem nome e sem\n * descrição, a ligação aponta para um id inexistente e o leitor a ignora.\n *\n * O `RadioCard.Indicator` (o círculo) entra na posição em que for escrito: antes ou depois do\n * texto. Sem ele, o estado marcado aparece só pelo cartão, como num cartão com ícone.\n *\n * @example\n * ```tsx\n * <RadioCard.Item value=\"pro\">\n *   <RadioCard.Indicator />\n *\n *   <RadioCard.Title>Pro</RadioCard.Title>\n *   <RadioCard.Description>Usuários ilimitados</RadioCard.Description>\n * </RadioCard.Item>\n * ```\n */\nexport const RadioCardItem = (props: RadioCardItemProps) => {\n  const { className, ...rest } = props;\n\n  const { colorScheme, variant } = useRadioCardContext();\n\n  const titleId = useId();\n  const descriptionId = useId();\n\n  const ids = useMemo(\n    () => ({ descriptionId, titleId }),\n    [descriptionId, titleId],\n  );\n\n  return (\n    <RadioCardItemContextProvider value={ids}>\n      <BaseRadio.Root\n        data-component=\"RadioCard.Item\"\n        render={<div />}\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        className={mergeStateClassNames(\n          radioCardItemVariants({ colorScheme, variant }),\n          className,\n        )}\n        {...rest}\n      />\n    </RadioCardItemContextProvider>\n  );\n};\n\nRadioCardItem.displayName = 'RadioCard.Item';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,EAAE,aAAa,YAAY,oBAAoB;CAErD,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;CAE5B,MAAM,MAAM,eACH;EAAE;EAAe;CAAQ,IAChC,CAAC,eAAe,OAAO,CACzB;CAEA,OACE,oBAAC,8BAAD;EAA8B,OAAO;EACnC,UAAA,oBAACA,MAAU,MAAX;GACE,kBAAe;GACf,QAAQ,oBAAC,OAAD,CAAM,CAAA;GACd,mBAAiB;GACjB,oBAAkB;GAClB,WAAW,qBACT,sBAAsB;IAAE;IAAa;GAAQ,CAAC,GAC9C,SACF;GACA,GAAI;EACL,CAAA;CAC2B,CAAA;AAElC;AAEA,cAAc,cAAc"}

package/dist/components/fields/radio-card/radio-card-title.d.ts

@@ -0,0 +1,14 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/fields/radio-card/radio-card-title.d.ts
+export type RadioCardTitleProps = useRender.ComponentProps<'span'>;
+/**
+ * O nome do cartão, em tamanho fixo. O `Item` o liga a si por `aria-labelledby`, usando o `id`
+ * que gera: sem esse título, o nome acessível seria o texto inteiro do cartão. Com um `id` próprio,
+ * passe o mesmo id ao `aria-labelledby` do `Item`.
+ */
+export declare const RadioCardTitle: {
+  (props: RadioCardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=radio-card-title.d.ts.map