@aurea-uds/native 0.12.2 → 0.12.3

package/dist/index.d.ts

@@ -24,8 +24,8 @@ export type { AureaStrings, AureaUniversalState } from "./strings.js";
 export { useReduceMotion } from "./movimento.js";
 export { BottomNav, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
 export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaBottomNavWidth, AureaTopbarVariant, AureaTopbarInset, TabsProps, AureaTabItem, } from "./navigation.js";
-export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
-export type { FieldProps, LabelProps, InputProps, TextareaProps, SelectProps, SwitchProps, CheckboxProps, RadioProps, SegmentedControlProps, FormProps, KeyboardAvoidingProps, AureaFieldSize, } from "./inputs.js";
+export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, RadioGroup, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
+export type { FieldProps, LabelProps, InputProps, TextareaProps, SelectProps, SwitchProps, CheckboxProps, RadioProps, RadioGroupProps, RadioGroupItemProps, AureaRadioIndicatorPlacement, SegmentedControlProps, FormProps, KeyboardAvoidingProps, AureaFieldSize, } from "./inputs.js";
 export { InputGroup, InputGroupAddon, PasswordField, useGrupoDeCampo } from "./inputs.js";
 export type { InputGroupProps, InputGroupAddonProps, PasswordFieldProps } from "./inputs.js";
 export { Dialog, ConfirmDialog, Drawer, BottomSheet } from "./overlays.js";

package/dist/index.js

@@ -59,7 +59,7 @@ export { BottomNav, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
 // ⚠ O `Field` NÃO nomeia o controle por referência, como o `<label for>` da web: ele empurra o
 // nome, a dica e o estado de inválido para o controle por CONTEXTO. É a tradução que decidiu o
 // lote — o RN não tem `id` nem `htmlFor`.
-export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
+export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, RadioGroup, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
 // ⚠ O GRUPO e o campo de SENHA entraram depois do Lote 4, medidos pelo app na tela de entrar
 // (15/09/2026): o campo não tinha onde encaixar glifo, e `secureTextEntry` esconde a senha sem
 // dar botão para mostrá-la. **Os dois já existiam na web desde 29/08/2026** — a falta era só

package/dist/inputs.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { TextInput, type KeyboardTypeOptions, type StyleProp, type TextInputProps, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
+import { TextInput, type KeyboardTypeOptions, type PressableProps, type StyleProp, type TextInputProps, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
 import { type AureaFilaJustify } from "./rolagem.js";
 import { type AureaIconRegistry, type IconName } from "./icon.js";
 export type AureaFieldSize = "sm" | "md" | "lg";
@@ -249,6 +249,59 @@ export declare function Checkbox(p: CheckboxProps): React.JSX.Element;
  * estado do app — quem sabe qual está escolhido é o `useState` da tela, e `checked` sai dele.
  */
 export declare function Radio(p: RadioProps): React.JSX.Element;
+/** De que lado da linha a marca fica: `end` (padrão, como o exemplo do HeroUI) ou `start`. */
+export type AureaRadioIndicatorPlacement = "start" | "end";
+export interface RadioGroupProps extends ViewProps {
+    /** O valor do item escolhido. Controlado: quem guarda é a tela. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Desliga o grupo inteiro. */
+    disabled?: boolean;
+    /** Pinta o grupo de erro (marca e rótulo na cor de perigo), como o `isInvalid` do HeroUI. */
+    invalid?: boolean;
+    /** O nome do grupo para quem usa leitor de tela ("Forma de entrega"). */
+    label?: string;
+    /** `vertical` (padrão) ou `horizontal`, como o HeroUI. */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * De que lado fica a marca, em todos os itens: `end` (padrão) ou `start`. O HeroUI decide isso
+     * pela ORDEM dos filhos do item (`<Radio />` antes ou depois do texto); aqui o texto é prop, então
+     * o lado vira uma lista fechada de duas opções, com o nome que o HeroUI usa para posição.
+     */
+    indicatorPlacement?: AureaRadioIndicatorPlacement;
+    children?: React.ReactNode;
+}
+export interface RadioGroupItemProps extends Omit<PressableProps, "children" | "style" | "disabled"> {
+    /** O valor que este item escreve no grupo quando é tocado. */
+    value: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Desliga só este item. */
+    disabled?: boolean;
+    /** Erro só neste item. */
+    invalid?: boolean;
+    /** O lado da marca só neste item; sem ele, vale o do grupo. */
+    indicatorPlacement?: AureaRadioIndicatorPlacement;
+    style?: StyleProp<ViewStyle>;
+}
+declare function RaizDoGrupoDeRadio({ value, onValueChange, disabled, invalid, label, orientation, indicatorPlacement, style, children, ...rest }: RadioGroupProps): React.JSX.Element;
+declare function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, style, accessibilityLabel, ...rest }: RadioGroupItemProps): React.JSX.Element;
+/**
+ * Um conjunto de opções em que só uma fica escolhida — o `RadioGroup` do HeroUI Native.
+ *
+ *     <RadioGroup label="Forma de entrega" value={entrega} onValueChange={setEntrega}>
+ *       <RadioGroup.Item value="normal" label="Normal" description="Em 5 a 7 dias úteis" />
+ *       <Separator />
+ *       <RadioGroup.Item value="expressa" label="Expressa" description="Em 2 a 3 dias úteis" />
+ *     </RadioGroup>
+ *
+ * Os filhos são livres: entre os itens cabe um `Separator`, e o grupo inteiro cabe num `Card`,
+ * como no exemplo do HeroUI. Tocar no item já escolhido não muda nada. Com
+ * `indicatorPlacement="start"` a marca vai para o início da linha.
+ */
+export declare const RadioGroup: typeof RaizDoGrupoDeRadio & {
+    Item: typeof ItemDoGrupoDeRadio;
+};
 /**
  * ⚠ **Ele TIRAVA a `description`, e passou a aceitá-la em 17/09/2026** — pedido do consumidor
  * (uma linha de explicação embaixo de "Desbloqueio por digital", no Perfil).

package/dist/inputs.js

@@ -382,6 +382,56 @@ export function Checkbox(p) { return _jsx(ControleMarcado, { ...p, papel: "check
  * estado do app — quem sabe qual está escolhido é o `useState` da tela, e `checked` sai dele.
  */
 export function Radio(p) { return _jsx(ControleMarcado, { ...p, papel: "radio" }); }
+const GrupoDeRadio = React.createContext(null);
+function RaizDoGrupoDeRadio({ value, onValueChange, disabled, invalid, label, orientation = "vertical", indicatorPlacement, style, children, ...rest }) {
+    const t = useAureaTokens();
+    const contexto = React.useMemo(() => ({ value, onValueChange, disabled, invalid, indicatorPlacement }), [value, onValueChange, disabled, invalid, indicatorPlacement]);
+    return (_jsx(GrupoDeRadio.Provider, { value: contexto, children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label, accessibilityState: { disabled: !!disabled }, style: [{ gap: t.size.space3, flexDirection: orientation === "horizontal" ? "row" : "column" }, style], ...rest, children: children }) }));
+}
+function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, style, accessibilityLabel, ...rest }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const grupo = React.useContext(GrupoDeRadio);
+    if (__DEV__ && !grupo)
+        console.warn("Aurea: RadioGroup.Item fora de um RadioGroup não escolhe nada.");
+    const escolhido = grupo?.value === value;
+    const inativo = disabled ?? grupo?.disabled;
+    const erro = invalid ?? grupo?.invalid;
+    const perigo = t.color.danger400 ?? t.color.destructive;
+    const marca = t.size.space6;
+    const ponto = t.size.space2 + t.size.space05;
+    const noInicio = (indicatorPlacement ?? grupo?.indicatorPlacement ?? "end") === "start";
+    const texto = (label != null || description != null) && (_jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [typeof label === "string"
+                ? _jsx(Text, { size: "base", weight: 500, tone: erro ? "danger" : "default", children: label }) : label, description != null && (typeof description === "string"
+                ? _jsx(Text, { size: "sm", tone: "muted", children: description }) : description)] }, "texto"));
+    const marcaDesenhada = (_jsx(View, { style: [
+            s.marcaBase,
+            { width: marca, height: marca, borderRadius: t.size.radiusFull },
+            erro && { borderColor: perigo, backgroundColor: "transparent" },
+            escolhido && { backgroundColor: erro ? perigo : t.color.controlSelected,
+                borderColor: erro ? perigo : t.color.controlSelected },
+        ], children: escolhido && _jsx(View, { style: { width: ponto, height: ponto, borderRadius: t.size.radiusFull,
+                backgroundColor: t.color.controlSelectedForeground } }) }, "marca"));
+    return (_jsx(Pressable, { onPress: inativo || escolhido ? undefined : () => grupo?.onValueChange?.(value), disabled: inativo, accessibilityRole: "radio", accessibilityState: { checked: escolhido, disabled: !!inativo }, accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : undefined), accessibilityHint: typeof description === "string" ? description : undefined, style: [
+            { flexDirection: "row", alignItems: "center", justifyContent: "space-between",
+                gap: t.size.space3, minHeight: t.size.targetMin },
+            inativo && s.desabilitado, style,
+        ], ...rest, children: noInicio ? [marcaDesenhada, texto] : [texto, marcaDesenhada] }));
+}
+/**
+ * Um conjunto de opções em que só uma fica escolhida — o `RadioGroup` do HeroUI Native.
+ *
+ *     <RadioGroup label="Forma de entrega" value={entrega} onValueChange={setEntrega}>
+ *       <RadioGroup.Item value="normal" label="Normal" description="Em 5 a 7 dias úteis" />
+ *       <Separator />
+ *       <RadioGroup.Item value="expressa" label="Expressa" description="Em 2 a 3 dias úteis" />
+ *     </RadioGroup>
+ *
+ * Os filhos são livres: entre os itens cabe um `Separator`, e o grupo inteiro cabe num `Card`,
+ * como no exemplo do HeroUI. Tocar no item já escolhido não muda nada. Com
+ * `indicatorPlacement="start"` a marca vai para o início da linha.
+ */
+export const RadioGroup = Object.assign(RaizDoGrupoDeRadio, { Item: ItemDoGrupoDeRadio });
 /**
  * O interruptor.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "A Aurea UDS para React Native: o provider de tema e densidade, os componentes e os ícones do Carbon sobre react-native-svg.",
   "keywords": [
     "aurea",
@@ -51,7 +51,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.12.2"
+    "@aurea-uds/tokens": "^0.12.3"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",