@innovui/react-native 0.1.0 → 0.3.0

package/dist/components/gallery/gallery.d.ts

@@ -0,0 +1,21 @@
+import { LightboxItem } from "../lightbox/lightbox.js";
+import { ViewProps } from "react-native";
+//#region src/components/gallery/gallery.d.ts
+export type GalleryItem = LightboxItem & {
+  /** Imagem menor para a grade; sem ela, a grade usa `src`. */
+  thumbSrc?: string;
+};
+export type GalleryProps = Omit<ViewProps, 'children' | 'style'> & {
+  className?: string;
+  items: GalleryItem[];
+  /** Colunas da grade. Padrão: 2 no celular e 3 a partir de 768px de tela. */
+  columns?: number;
+  /** Nome acessível do botão de cada miniatura. Padrão: "Ampliar foto N: descrição". */
+  openLabel?: (item: GalleryItem, index: number) => string;
+  /** Nome acessível do visualizador ampliado. */
+  lightboxLabel?: string;
+};
+/** Grade de miniaturas que abre a foto ampliada no `Lightbox`. */
+export declare function Gallery({ className, items, columns, openLabel, lightboxLabel, ...props }: GalleryProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=gallery.d.ts.map

package/dist/components/gallery/gallery.js

@@ -0,0 +1,54 @@
+import { cn } from "../../utils/cn.js";
+import { useToken } from "../_shared/use-token.js";
+import { ExpandIcon } from "../_shared/media-icons.js";
+import { Lightbox } from "../lightbox/lightbox.js";
+import { useState } from "react";
+import { Image, Pressable, View, useWindowDimensions } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/gallery/gallery.tsx
+const GAP = 8;
+const TABLET = 768;
+/** Grade de miniaturas que abre a foto ampliada no `Lightbox`. */
+function Gallery({ className, items, columns, openLabel = (item, i) => `Ampliar foto ${i + 1}: ${item.alt}`, lightboxLabel, ...props }) {
+	const { width: screen } = useWindowDimensions();
+	const [width, setWidth] = useState(0);
+	const [opened, setOpened] = useState(null);
+	const overlayColor = useToken("--color-media-on-surface");
+	const cols = columns ?? (screen >= TABLET ? 3 : 2);
+	const size = (width - GAP * (cols - 1)) / cols;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(View, {
+		className: cn("flex-row flex-wrap gap-2", className),
+		onLayout: (event) => setWidth(event.nativeEvent.layout.width),
+		...props,
+		children: items.map((item, i) => /* @__PURE__ */ jsx(Pressable, {
+			accessibilityRole: "imagebutton",
+			accessibilityLabel: openLabel(item, i),
+			onPress: () => setOpened(i),
+			className: "overflow-hidden rounded-md bg-bg-skeleton",
+			style: {
+				width: size,
+				aspectRatio: 4 / 3
+			},
+			children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Image, {
+				source: { uri: item.thumbSrc ?? item.src },
+				className: "size-full",
+				resizeMode: "cover"
+			}), pressed && /* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				className: "absolute inset-0 items-center justify-center bg-media-surface/50",
+				children: /* @__PURE__ */ jsx(ExpandIcon, { color: overlayColor })
+			})] })
+		}, item.src))
+	}), /* @__PURE__ */ jsx(Lightbox, {
+		items,
+		label: lightboxLabel,
+		open: opened !== null,
+		onOpenChange: (open) => !open && setOpened(null),
+		index: opened ?? 0,
+		onIndexChange: setOpened
+	})] });
+}
+//#endregion
+export { Gallery };
+
+//# sourceMappingURL=gallery.js.map

package/dist/components/gallery/gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.js","names":[],"sources":["../../../src/components/gallery/gallery.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { useState } from 'react'\nimport {\n  Image,\n  type LayoutChangeEvent,\n  Pressable,\n  useWindowDimensions,\n  View,\n  type ViewProps,\n} from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { ExpandIcon } from '../_shared/media-icons'\nimport { useToken } from '../_shared/use-token'\nimport { Lightbox, type LightboxItem } from '../lightbox'\n\nconst GAP = 8\nconst TABLET = 768\n\nexport type GalleryItem = LightboxItem & {\n  /** Imagem menor para a grade; sem ela, a grade usa `src`. */\n  thumbSrc?: string\n}\n\nexport type GalleryProps = Omit<ViewProps, 'children' | 'style'> & {\n  className?: string\n  items: GalleryItem[]\n  /** Colunas da grade. Padrão: 2 no celular e 3 a partir de 768px de tela. */\n  columns?: number\n  /** Nome acessível do botão de cada miniatura. Padrão: \"Ampliar foto N: descrição\". */\n  openLabel?: (item: GalleryItem, index: number) => string\n  /** Nome acessível do visualizador ampliado. */\n  lightboxLabel?: string\n}\n\n/** Grade de miniaturas que abre a foto ampliada no `Lightbox`. */\nexport function Gallery({\n  className,\n  items,\n  columns,\n  openLabel = (item, i) => `Ampliar foto ${i + 1}: ${item.alt}`,\n  lightboxLabel,\n  ...props\n}: GalleryProps) {\n  const { width: screen } = useWindowDimensions()\n  const [width, setWidth] = useState(0)\n  const [opened, setOpened] = useState<number | null>(null)\n  const overlayColor = useToken('--color-media-on-surface')\n  const cols = columns ?? (screen >= TABLET ? 3 : 2)\n  const size = (width - GAP * (cols - 1)) / cols\n\n  return (\n    <>\n      <View\n        className={cn('flex-row flex-wrap gap-2', className)}\n        onLayout={(event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width)}\n        {...props}\n      >\n        {items.map((item, i) => (\n          <Pressable\n            key={item.src}\n            accessibilityRole=\"imagebutton\"\n            accessibilityLabel={openLabel(item, i)}\n            onPress={() => setOpened(i)}\n            className=\"overflow-hidden rounded-md bg-bg-skeleton\"\n            style={{ width: size, aspectRatio: 4 / 3 }}\n          >\n            {({ pressed }) => (\n              <>\n                <Image\n                  source={{ uri: item.thumbSrc ?? item.src }}\n                  className=\"size-full\"\n                  resizeMode=\"cover\"\n                />\n                {pressed && (\n                  <View\n                    pointerEvents=\"none\"\n                    className=\"absolute inset-0 items-center justify-center bg-media-surface/50\"\n                  >\n                    <ExpandIcon color={overlayColor} />\n                  </View>\n                )}\n              </>\n            )}\n          </Pressable>\n        ))}\n      </View>\n      <Lightbox\n        items={items}\n        label={lightboxLabel}\n        open={opened !== null}\n        onOpenChange={(open) => !open && setOpened(null)}\n        index={opened ?? 0}\n        onIndexChange={setOpened}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAgBA,MAAM,MAAM;AACZ,MAAM,SAAS;;AAmBf,SAAgB,QAAQ,EACtB,WACA,OACA,SACA,aAAa,MAAM,MAAM,gBAAgB,IAAI,EAAE,IAAI,KAAK,OACxD,eACA,GAAG,SACY;CACf,MAAM,EAAE,OAAO,WAAW,oBAAoB;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,CAAC,QAAQ,aAAa,SAAwB,IAAI;CACxD,MAAM,eAAe,SAAS,0BAA0B;CACxD,MAAM,OAAO,YAAY,UAAU,SAAS,IAAI;CAChD,MAAM,QAAQ,QAAQ,OAAO,OAAO,MAAM;CAE1C,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EACE,WAAW,GAAG,4BAA4B,SAAS;EACnD,WAAW,UAA6B,SAAS,MAAM,YAAY,OAAO,KAAK;EAC/E,GAAI;EAEH,UAAA,MAAM,KAAK,MAAM,MAChB,oBAAC,WAAD;GAEE,mBAAkB;GAClB,oBAAoB,UAAU,MAAM,CAAC;GACrC,eAAe,UAAU,CAAC;GAC1B,WAAU;GACV,OAAO;IAAE,OAAO;IAAM,aAAa,IAAI;GAAE;GAEvC,WAAA,EAAE,cACF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,OAAD;IACE,QAAQ,EAAE,KAAK,KAAK,YAAY,KAAK,IAAI;IACzC,WAAU;IACV,YAAW;GACZ,CAAA,GACA,WACC,oBAAC,MAAD;IACE,eAAc;IACd,WAAU;IAEV,UAAA,oBAAC,YAAD,EAAY,OAAO,aAAe,CAAA;GAC9B,CAAA,CAER,EAAA,CAAA;EAEK,GAxBJ,KAAK,GAwBD,CACZ;CACG,CAAA,GACN,oBAAC,UAAD;EACS;EACP,OAAO;EACP,MAAM,WAAW;EACjB,eAAe,SAAS,CAAC,QAAQ,UAAU,IAAI;EAC/C,OAAO,UAAU;EACjB,eAAe;CAChB,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/components/gallery/index.d.ts

@@ -0,0 +1,2 @@
+import { Gallery, GalleryItem, GalleryProps } from "./gallery.js";
+export { Gallery, type GalleryItem, type GalleryProps };

package/dist/components/input/input.d.ts

@@ -12,9 +12,15 @@ export type InputProps = Omit<TextInputProps, 'style' | 'editable'> & Omit<Varia
   /** Borda e foco em vermelho. */
   error?: boolean;
   disabled?: boolean;
-  /** Ícone antes do texto (o consumidor define a cor; o slot tem 24px). */
+  /**
+   * Ícone antes do texto (o consumidor define a cor; o slot tem 24px). Pode ser interativo
+   * (um `Pressable` recebe o próprio toque); se não tratar o toque, ele foca o campo.
+   */
   leadingIcon?: ReactNode;
-  /** Ícone depois do texto (o consumidor define a cor; o slot tem 24px). */
+  /**
+   * Ícone depois do texto (o consumidor define a cor; o slot tem 24px). Pode ser interativo
+   * (ex.: um `Pressable` que mostra/oculta a senha); se não tratar o toque, ele foca o campo.
+   */
   trailingIcon?: ReactNode;
 };
 export declare function Input({ className, size, error, disabled, readOnly, leadingIcon, trailingIcon, accessibilityState, ...props }: InputProps): import("react").JSX.Element;

package/dist/components/input/input.js

@@ -1,5 +1,6 @@
 import { cn } from "../../utils/cn.js";
 import { useToken } from "../_shared/use-token.js";
+import { useRef } from "react";
 import { TextInput, View } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
@@ -48,7 +49,14 @@ const iconSlot = {
 function Input({ className, size, error = false, disabled = false, readOnly = false, leadingIcon, trailingIcon, accessibilityState, ...props }) {
 	const placeholderColor = useToken("--color-field-text-placeholder");
 	const slot = iconSlot[size ?? "md"];
+	const ref = useRef(null);
+	const iconTouch = {
+		pointerEvents: "box-none",
+		onStartShouldSetResponder: () => !disabled,
+		onResponderRelease: () => ref.current?.focus()
+	};
 	const input = /* @__PURE__ */ jsx(TextInput, {
+		ref,
 		editable: !disabled && !readOnly,
 		readOnly,
 		placeholderTextColor: placeholderColor,
@@ -67,13 +75,13 @@ function Input({ className, size, error = false, disabled = false, readOnly = fa
 		className: "justify-center",
 		children: [
 			leadingIcon ? /* @__PURE__ */ jsx(View, {
-				pointerEvents: "none",
+				...iconTouch,
 				className: cn("absolute inset-y-0 z-10 items-center justify-center", slot.icon, slot.left),
 				children: leadingIcon
 			}) : null,
 			input,
 			trailingIcon ? /* @__PURE__ */ jsx(View, {
-				pointerEvents: "none",
+				...iconTouch,
 				className: cn("absolute inset-y-0 z-10 items-center justify-center", slot.icon, slot.right),
 				children: trailingIcon
 			}) : null

package/dist/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { TextInput, type TextInputProps, View } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { useToken } from '../_shared/use-token'\n\n/** Estilo do campo, compartilhado com o Textarea (não faz parte da API pública). */\nexport const inputVariants = cva(\n  'w-full rounded-md border border-field-border bg-field-bg py-0 text-field-text focus:border-field-focus-ring',\n  {\n    variants: {\n      size: {\n        lg: 'h-14 px-4 text-base',\n        md: 'h-12 px-3 text-base',\n        sm: 'h-10 px-2 text-sm',\n      },\n      error: {\n        true: 'border-field-border-error focus:border-field-border-error',\n        false: '',\n      },\n    },\n    defaultVariants: { size: 'md', error: false },\n  },\n)\n\n// Posição do ícone e recuo do texto por tamanho (Figma: padding + ícone 24/20/24 + gap 8/8/4).\nconst iconSlot = {\n  lg: { icon: 'w-5', left: 'left-4', right: 'right-4', padL: 'pl-11', padR: 'pr-11' },\n  md: { icon: 'w-6', left: 'left-3', right: 'right-3', padL: 'pl-11', padR: 'pr-11' },\n  sm: { icon: 'w-6', left: 'left-2', right: 'right-2', padL: 'pl-9', padR: 'pr-9' },\n}\n\nexport type InputProps = Omit<TextInputProps, 'style' | 'editable'> &\n  Omit<VariantProps<typeof inputVariants>, 'error'> & {\n    className?: string\n    /** Borda e foco em vermelho. */\n    error?: boolean\n    disabled?: boolean\n    /** Ícone antes do texto (o consumidor define a cor; o slot tem 24px). */\n    leadingIcon?: ReactNode\n    /** Ícone depois do texto (o consumidor define a cor; o slot tem 24px). */\n    trailingIcon?: ReactNode\n  }\n\nexport function Input({\n  className,\n  size,\n  error = false,\n  disabled = false,\n  readOnly = false,\n  leadingIcon,\n  trailingIcon,\n  accessibilityState,\n  ...props\n}: InputProps) {\n  const placeholderColor = useToken('--color-field-text-placeholder')\n  const slot = iconSlot[size ?? 'md']\n\n  const input = (\n    <TextInput\n      editable={!disabled && !readOnly}\n      readOnly={readOnly}\n      placeholderTextColor={placeholderColor}\n      accessibilityState={{ ...accessibilityState, disabled }}\n      className={cn(\n        inputVariants({ size, error }),\n        disabled &&\n          'border-field-border-disabled bg-field-bg-disabled text-field-text-disabled focus:border-field-border-disabled',\n        readOnly && !disabled && 'border-transparent bg-field-bg-disabled focus:border-transparent',\n        leadingIcon && slot.padL,\n        trailingIcon && slot.padR,\n        className,\n      )}\n      {...props}\n    />\n  )\n\n  if (!leadingIcon && !trailingIcon) return input\n\n  return (\n    <View className=\"justify-center\">\n      {leadingIcon ? (\n        <View\n          pointerEvents=\"none\"\n          className={cn(\n            'absolute inset-y-0 z-10 items-center justify-center',\n            slot.icon,\n            slot.left,\n          )}\n        >\n          {leadingIcon}\n        </View>\n      ) : null}\n      {input}\n      {trailingIcon ? (\n        <View\n          pointerEvents=\"none\"\n          className={cn(\n            'absolute inset-y-0 z-10 items-center justify-center',\n            slot.icon,\n            slot.right,\n          )}\n        >\n          {trailingIcon}\n        </View>\n      ) : null}\n    </View>\n  )\n}\n"],"mappings":";;;;;;;AASA,MAAa,gBAAgB,IAC3B,+GACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAM;AAC9C,CACF;AAGA,MAAM,WAAW;CACf,IAAI;EAAE,MAAM;EAAO,MAAM;EAAU,OAAO;EAAW,MAAM;EAAS,MAAM;CAAQ;CAClF,IAAI;EAAE,MAAM;EAAO,MAAM;EAAU,OAAO;EAAW,MAAM;EAAS,MAAM;CAAQ;CAClF,IAAI;EAAE,MAAM;EAAO,MAAM;EAAU,OAAO;EAAW,MAAM;EAAQ,MAAM;CAAO;AAClF;AAcA,SAAgB,MAAM,EACpB,WACA,MACA,QAAQ,OACR,WAAW,OACX,WAAW,OACX,aACA,cACA,oBACA,GAAG,SACU;CACb,MAAM,mBAAmB,SAAS,gCAAgC;CAClE,MAAM,OAAO,SAAS,QAAQ;CAE9B,MAAM,QACJ,oBAAC,WAAD;EACE,UAAU,CAAC,YAAY,CAAC;EACd;EACV,sBAAsB;EACtB,oBAAoB;GAAE,GAAG;GAAoB;EAAS;EACtD,WAAW,GACT,cAAc;GAAE;GAAM;EAAM,CAAC,GAC7B,YACE,iHACF,YAAY,CAAC,YAAY,oEACzB,eAAe,KAAK,MACpB,gBAAgB,KAAK,MACrB,SACF;EACA,GAAI;CACL,CAAA;CAGH,IAAI,CAAC,eAAe,CAAC,cAAc,OAAO;CAE1C,OACE,qBAAC,MAAD;EAAM,WAAU;EAAhB,UAAA;GACG,cACC,oBAAC,MAAD;IACE,eAAc;IACd,WAAW,GACT,uDACA,KAAK,MACL,KAAK,IACP;IAEC,UAAA;GACG,CAAA,IACJ;GACH;GACA,eACC,oBAAC,MAAD;IACE,eAAc;IACd,WAAW,GACT,uDACA,KAAK,MACL,KAAK,KACP;IAEC,UAAA;GACG,CAAA,IACJ;EACA;;AAEV"}
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ReactNode, useRef } from 'react'\nimport { TextInput, type TextInputProps, View } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { useToken } from '../_shared/use-token'\n\n/** Estilo do campo, compartilhado com o Textarea (não faz parte da API pública). */\nexport const inputVariants = cva(\n  'w-full rounded-md border border-field-border bg-field-bg py-0 text-field-text focus:border-field-focus-ring',\n  {\n    variants: {\n      size: {\n        lg: 'h-14 px-4 text-base',\n        md: 'h-12 px-3 text-base',\n        sm: 'h-10 px-2 text-sm',\n      },\n      error: {\n        true: 'border-field-border-error focus:border-field-border-error',\n        false: '',\n      },\n    },\n    defaultVariants: { size: 'md', error: false },\n  },\n)\n\n// Posição do ícone e recuo do texto por tamanho (Figma: padding + ícone 24/20/24 + gap 8/8/4).\nconst iconSlot = {\n  lg: { icon: 'w-5', left: 'left-4', right: 'right-4', padL: 'pl-11', padR: 'pr-11' },\n  md: { icon: 'w-6', left: 'left-3', right: 'right-3', padL: 'pl-11', padR: 'pr-11' },\n  sm: { icon: 'w-6', left: 'left-2', right: 'right-2', padL: 'pl-9', padR: 'pr-9' },\n}\n\nexport type InputProps = Omit<TextInputProps, 'style' | 'editable'> &\n  Omit<VariantProps<typeof inputVariants>, 'error'> & {\n    className?: string\n    /** Borda e foco em vermelho. */\n    error?: boolean\n    disabled?: boolean\n    /**\n     * Ícone antes do texto (o consumidor define a cor; o slot tem 24px). Pode ser interativo\n     * (um `Pressable` recebe o próprio toque); se não tratar o toque, ele foca o campo.\n     */\n    leadingIcon?: ReactNode\n    /**\n     * Ícone depois do texto (o consumidor define a cor; o slot tem 24px). Pode ser interativo\n     * (ex.: um `Pressable` que mostra/oculta a senha); se não tratar o toque, ele foca o campo.\n     */\n    trailingIcon?: ReactNode\n  }\n\nexport function Input({\n  className,\n  size,\n  error = false,\n  disabled = false,\n  readOnly = false,\n  leadingIcon,\n  trailingIcon,\n  accessibilityState,\n  ...props\n}: InputProps) {\n  const placeholderColor = useToken('--color-field-text-placeholder')\n  const slot = iconSlot[size ?? 'md']\n  const ref = useRef<TextInput>(null)\n  // `box-none`: o slot não intercepta o toque (a área vazia cai no campo) mas os filhos recebem o\n  // deles, então um `Pressable` no ícone funciona. Um ícone que não trata o toque sobe para o slot,\n  // que foca o campo (o `pointerEvents=\"none\"` de antes dava isso, mas bloqueava o `Pressable`).\n  const iconTouch = {\n    pointerEvents: 'box-none' as const,\n    onStartShouldSetResponder: () => !disabled,\n    onResponderRelease: () => ref.current?.focus(),\n  }\n\n  const input = (\n    <TextInput\n      ref={ref}\n      editable={!disabled && !readOnly}\n      readOnly={readOnly}\n      placeholderTextColor={placeholderColor}\n      accessibilityState={{ ...accessibilityState, disabled }}\n      className={cn(\n        inputVariants({ size, error }),\n        disabled &&\n          'border-field-border-disabled bg-field-bg-disabled text-field-text-disabled focus:border-field-border-disabled',\n        readOnly && !disabled && 'border-transparent bg-field-bg-disabled focus:border-transparent',\n        leadingIcon && slot.padL,\n        trailingIcon && slot.padR,\n        className,\n      )}\n      {...props}\n    />\n  )\n\n  if (!leadingIcon && !trailingIcon) return input\n\n  return (\n    <View className=\"justify-center\">\n      {leadingIcon ? (\n        <View\n          {...iconTouch}\n          className={cn(\n            'absolute inset-y-0 z-10 items-center justify-center',\n            slot.icon,\n            slot.left,\n          )}\n        >\n          {leadingIcon}\n        </View>\n      ) : null}\n      {input}\n      {trailingIcon ? (\n        <View\n          {...iconTouch}\n          className={cn(\n            'absolute inset-y-0 z-10 items-center justify-center',\n            slot.icon,\n            slot.right,\n          )}\n        >\n          {trailingIcon}\n        </View>\n      ) : null}\n    </View>\n  )\n}\n"],"mappings":";;;;;;;;AASA,MAAa,gBAAgB,IAC3B,+GACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAM;AAC9C,CACF;AAGA,MAAM,WAAW;CACf,IAAI;EAAE,MAAM;EAAO,MAAM;EAAU,OAAO;EAAW,MAAM;EAAS,MAAM;CAAQ;CAClF,IAAI;EAAE,MAAM;EAAO,MAAM;EAAU,OAAO;EAAW,MAAM;EAAS,MAAM;CAAQ;CAClF,IAAI;EAAE,MAAM;EAAO,MAAM;EAAU,OAAO;EAAW,MAAM;EAAQ,MAAM;CAAO;AAClF;AAoBA,SAAgB,MAAM,EACpB,WACA,MACA,QAAQ,OACR,WAAW,OACX,WAAW,OACX,aACA,cACA,oBACA,GAAG,SACU;CACb,MAAM,mBAAmB,SAAS,gCAAgC;CAClE,MAAM,OAAO,SAAS,QAAQ;CAC9B,MAAM,MAAM,OAAkB,IAAI;CAIlC,MAAM,YAAY;EAChB,eAAe;EACf,iCAAiC,CAAC;EAClC,0BAA0B,IAAI,SAAS,MAAM;CAC/C;CAEA,MAAM,QACJ,oBAAC,WAAD;EACO;EACL,UAAU,CAAC,YAAY,CAAC;EACd;EACV,sBAAsB;EACtB,oBAAoB;GAAE,GAAG;GAAoB;EAAS;EACtD,WAAW,GACT,cAAc;GAAE;GAAM;EAAM,CAAC,GAC7B,YACE,iHACF,YAAY,CAAC,YAAY,oEACzB,eAAe,KAAK,MACpB,gBAAgB,KAAK,MACrB,SACF;EACA,GAAI;CACL,CAAA;CAGH,IAAI,CAAC,eAAe,CAAC,cAAc,OAAO;CAE1C,OACE,qBAAC,MAAD;EAAM,WAAU;EAAhB,UAAA;GACG,cACC,oBAAC,MAAD;IACE,GAAI;IACJ,WAAW,GACT,uDACA,KAAK,MACL,KAAK,IACP;IAEC,UAAA;GACG,CAAA,IACJ;GACH;GACA,eACC,oBAAC,MAAD;IACE,GAAI;IACJ,WAAW,GACT,uDACA,KAAK,MACL,KAAK,KACP;IAEC,UAAA;GACG,CAAA,IACJ;EACA;;AAEV"}

package/dist/components/lightbox/lightbox.d.ts

@@ -0,0 +1,30 @@
+//#region src/components/lightbox/lightbox.d.ts
+export type LightboxItem = {
+  /** Endereço da imagem ampliada. */
+  src: string;
+  /** Descrição da imagem para leitores de tela. */
+  alt: string;
+};
+export type LightboxProps = {
+  items: LightboxItem[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Índice da imagem exibida (modo controlado). */
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Nome acessível do visualizador. */
+  label?: string;
+  closeLabel?: string;
+  previousLabel?: string;
+  nextLabel?: string;
+  testID?: string;
+};
+/**
+ * Imagem ampliada sobre um fundo escurecido, com contador (`1 / 6`), setas e fechar. Deslize para
+ * os lados para trocar de foto; as setas dão a volta (da última vai para a primeira).
+ */
+export declare function Lightbox({ items, open, defaultOpen, onOpenChange, index, defaultIndex, onIndexChange, label, closeLabel, previousLabel, nextLabel, testID }: LightboxProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=lightbox.d.ts.map

package/dist/components/lightbox/lightbox.js

@@ -0,0 +1,147 @@
+import { CloseIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { NextIcon, PreviousIcon } from "../_shared/media-icons.js";
+import { useTransition } from "../_shared/use-transition.js";
+import { Backdrop } from "../_shared/backdrop.js";
+import { useOpenState } from "../_shared/overlay-state.js";
+import { useEffect, useRef, useState } from "react";
+import { Animated, FlatList, Image, Modal, StyleSheet, Text, View, useWindowDimensions } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/lightbox/lightbox.tsx
+const roundButton = "rounded-full border-border-default bg-surface-elevated active:bg-bg-secondary";
+/**
+* Imagem ampliada sobre um fundo escurecido, com contador (`1 / 6`), setas e fechar. Deslize para
+* os lados para trocar de foto; as setas dão a volta (da última vai para a primeira).
+*/
+function Lightbox({ items, open, defaultOpen, onOpenChange, index, defaultIndex = 0, onIndexChange, label = "Visualizador de imagens", closeLabel = "Fechar", previousLabel = "Foto anterior", nextLabel = "Próxima foto", testID }) {
+	const [isOpen, setOpen] = useOpenState({
+		open,
+		defaultOpen,
+		onOpenChange
+	});
+	const { mounted, progress } = useTransition(isOpen);
+	const { width, height } = useWindowDimensions();
+	const iconColor = useToken("--color-text-primary");
+	const list = useRef(null);
+	const [inner, setInner] = useState(defaultIndex);
+	const count = items.length;
+	const current = Math.min(Math.max(index ?? inner, 0), Math.max(count - 1, 0));
+	const shown = useRef(current);
+	function show(next) {
+		shown.current = next;
+		if (index === void 0) setInner(next);
+		onIndexChange?.(next);
+	}
+	function go(next) {
+		const wrapped = (next + count) % count;
+		list.current?.scrollToIndex({
+			index: wrapped,
+			animated: true
+		});
+		show(wrapped);
+	}
+	useEffect(() => {
+		if (!mounted || shown.current === current) return;
+		shown.current = current;
+		list.current?.scrollToIndex({
+			index: current,
+			animated: false
+		});
+	}, [current, mounted]);
+	function onMomentumScrollEnd(event) {
+		const next = Math.round(event.nativeEvent.contentOffset.x / width);
+		if (next !== shown.current && next >= 0 && next < count) show(next);
+	}
+	return /* @__PURE__ */ jsx(Modal, {
+		transparent: true,
+		statusBarTranslucent: true,
+		animationType: "none",
+		visible: mounted,
+		onRequestClose: () => setOpen(false),
+		children: /* @__PURE__ */ jsxs(View, {
+			className: "flex-1",
+			accessibilityViewIsModal: true,
+			accessibilityLabel: label,
+			testID,
+			children: [/* @__PURE__ */ jsx(Animated.View, {
+				pointerEvents: "box-none",
+				style: [StyleSheet.absoluteFill, { opacity: progress }],
+				children: /* @__PURE__ */ jsx(Backdrop, { onPress: () => setOpen(false) })
+			}), /* @__PURE__ */ jsxs(Animated.View, {
+				pointerEvents: "box-none",
+				style: [StyleSheet.absoluteFill, {
+					opacity: progress,
+					justifyContent: "center"
+				}],
+				children: [
+					/* @__PURE__ */ jsx(FlatList, {
+						ref: list,
+						data: items,
+						horizontal: true,
+						pagingEnabled: true,
+						showsHorizontalScrollIndicator: false,
+						keyExtractor: (item) => item.src,
+						initialScrollIndex: current,
+						getItemLayout: (_, i) => ({
+							length: width,
+							offset: width * i,
+							index: i
+						}),
+						onMomentumScrollEnd,
+						renderItem: ({ item }) => /* @__PURE__ */ jsx(View, {
+							style: {
+								width,
+								height: height * .7,
+								paddingHorizontal: 16
+							},
+							children: /* @__PURE__ */ jsx(Image, {
+								source: { uri: item.src },
+								accessibilityLabel: item.alt,
+								resizeMode: "contain",
+								className: "size-full"
+							})
+						})
+					}),
+					count > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(View, {
+						pointerEvents: "box-none",
+						className: "absolute inset-x-3 flex-row justify-between",
+						style: { top: height / 2 - 22 },
+						children: [/* @__PURE__ */ jsx(IconButton, {
+							accessibilityLabel: previousLabel,
+							variant: "tertiary",
+							className: roundButton,
+							onPress: () => go(shown.current - 1),
+							children: /* @__PURE__ */ jsx(PreviousIcon, { color: iconColor })
+						}), /* @__PURE__ */ jsx(IconButton, {
+							accessibilityLabel: nextLabel,
+							variant: "tertiary",
+							className: roundButton,
+							onPress: () => go(shown.current + 1),
+							children: /* @__PURE__ */ jsx(NextIcon, { color: iconColor })
+						})]
+					}), /* @__PURE__ */ jsxs(Text, {
+						accessibilityLiveRegion: "polite",
+						className: "absolute bottom-12 self-center text-sm font-medium leading-5 text-media-on-surface",
+						children: [
+							current + 1,
+							" / ",
+							count
+						]
+					})] }),
+					/* @__PURE__ */ jsx(IconButton, {
+						accessibilityLabel: closeLabel,
+						variant: "tertiary",
+						className: `absolute right-4 top-12 ${roundButton}`,
+						onPress: () => setOpen(false),
+						children: /* @__PURE__ */ jsx(CloseIcon, { color: iconColor })
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { Lightbox };
+
+//# sourceMappingURL=lightbox.js.map

package/dist/components/lightbox/lightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightbox.js","names":["RNModal"],"sources":["../../../src/components/lightbox/lightbox.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { useEffect, useRef, useState } from 'react'\nimport {\n  Animated,\n  FlatList,\n  Image,\n  type NativeScrollEvent,\n  type NativeSyntheticEvent,\n  Modal as RNModal,\n  StyleSheet,\n  Text,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport { Backdrop } from '../_shared/backdrop'\nimport { NextIcon, PreviousIcon } from '../_shared/media-icons'\nimport { useOpenState } from '../_shared/overlay-state'\nimport { CloseIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\nimport { useTransition } from '../_shared/use-transition'\nimport { IconButton } from '../icon-button'\n\nexport type LightboxItem = {\n  /** Endereço da imagem ampliada. */\n  src: string\n  /** Descrição da imagem para leitores de tela. */\n  alt: string\n}\n\nexport type LightboxProps = {\n  items: LightboxItem[]\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Índice da imagem exibida (modo controlado). */\n  index?: number\n  defaultIndex?: number\n  onIndexChange?: (index: number) => void\n  /** Nome acessível do visualizador. */\n  label?: string\n  closeLabel?: string\n  previousLabel?: string\n  nextLabel?: string\n  testID?: string\n}\n\nconst roundButton = 'rounded-full border-border-default bg-surface-elevated active:bg-bg-secondary'\n\n/**\n * Imagem ampliada sobre um fundo escurecido, com contador (`1 / 6`), setas e fechar. Deslize para\n * os lados para trocar de foto; as setas dão a volta (da última vai para a primeira).\n */\nexport function Lightbox({\n  items,\n  open,\n  defaultOpen,\n  onOpenChange,\n  index,\n  defaultIndex = 0,\n  onIndexChange,\n  label = 'Visualizador de imagens',\n  closeLabel = 'Fechar',\n  previousLabel = 'Foto anterior',\n  nextLabel = 'Próxima foto',\n  testID,\n}: LightboxProps) {\n  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange })\n  const { mounted, progress } = useTransition(isOpen)\n  const { width, height } = useWindowDimensions()\n  const iconColor = useToken('--color-text-primary')\n  const list = useRef<FlatList<LightboxItem>>(null)\n  const [inner, setInner] = useState(defaultIndex)\n  const count = items.length\n  const current = Math.min(Math.max(index ?? inner, 0), Math.max(count - 1, 0))\n  // índice em que a lista está de fato, para só rolar quando o pai troca `index` por fora\n  const shown = useRef(current)\n\n  function show(next: number) {\n    shown.current = next\n    if (index === undefined) setInner(next)\n    onIndexChange?.(next)\n  }\n\n  function go(next: number) {\n    const wrapped = (next + count) % count\n    list.current?.scrollToIndex({ index: wrapped, animated: true })\n    show(wrapped)\n  }\n\n  useEffect(() => {\n    if (!mounted || shown.current === current) return\n    shown.current = current\n    list.current?.scrollToIndex({ index: current, animated: false })\n  }, [current, mounted])\n\n  function onMomentumScrollEnd(event: NativeSyntheticEvent<NativeScrollEvent>) {\n    const next = Math.round(event.nativeEvent.contentOffset.x / width)\n    if (next !== shown.current && next >= 0 && next < count) show(next)\n  }\n\n  return (\n    <RNModal\n      transparent\n      statusBarTranslucent\n      animationType=\"none\"\n      visible={mounted}\n      onRequestClose={() => setOpen(false)}\n    >\n      <View className=\"flex-1\" accessibilityViewIsModal accessibilityLabel={label} testID={testID}>\n        <Animated.View\n          pointerEvents=\"box-none\"\n          style={[StyleSheet.absoluteFill, { opacity: progress }]}\n        >\n          <Backdrop onPress={() => setOpen(false)} />\n        </Animated.View>\n        <Animated.View\n          pointerEvents=\"box-none\"\n          style={[StyleSheet.absoluteFill, { opacity: progress, justifyContent: 'center' }]}\n        >\n          <FlatList\n            ref={list}\n            data={items}\n            horizontal\n            pagingEnabled\n            showsHorizontalScrollIndicator={false}\n            keyExtractor={(item) => item.src}\n            initialScrollIndex={current}\n            getItemLayout={(_, i) => ({ length: width, offset: width * i, index: i })}\n            onMomentumScrollEnd={onMomentumScrollEnd}\n            renderItem={({ item }) => (\n              <View style={{ width, height: height * 0.7, paddingHorizontal: 16 }}>\n                <Image\n                  source={{ uri: item.src }}\n                  accessibilityLabel={item.alt}\n                  resizeMode=\"contain\"\n                  className=\"size-full\"\n                />\n              </View>\n            )}\n          />\n          {count > 1 && (\n            <>\n              <View\n                pointerEvents=\"box-none\"\n                className=\"absolute inset-x-3 flex-row justify-between\"\n                style={{ top: height / 2 - 22 }}\n              >\n                <IconButton\n                  accessibilityLabel={previousLabel}\n                  variant=\"tertiary\"\n                  className={roundButton}\n                  onPress={() => go(shown.current - 1)}\n                >\n                  <PreviousIcon color={iconColor} />\n                </IconButton>\n                <IconButton\n                  accessibilityLabel={nextLabel}\n                  variant=\"tertiary\"\n                  className={roundButton}\n                  onPress={() => go(shown.current + 1)}\n                >\n                  <NextIcon color={iconColor} />\n                </IconButton>\n              </View>\n              <Text\n                accessibilityLiveRegion=\"polite\"\n                className=\"absolute bottom-12 self-center text-sm font-medium leading-5 text-media-on-surface\"\n              >\n                {current + 1} / {count}\n              </Text>\n            </>\n          )}\n          <IconButton\n            accessibilityLabel={closeLabel}\n            variant=\"tertiary\"\n            className={`absolute right-4 top-12 ${roundButton}`}\n            onPress={() => setOpen(false)}\n          >\n            <CloseIcon color={iconColor} />\n          </IconButton>\n        </Animated.View>\n      </View>\n    </RNModal>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA+CA,MAAM,cAAc;;;;;AAMpB,SAAgB,SAAS,EACvB,OACA,MACA,aACA,cACA,OACA,eAAe,GACf,eACA,QAAQ,2BACR,aAAa,UACb,gBAAgB,iBAChB,YAAY,gBACZ,UACgB;CAChB,MAAM,CAAC,QAAQ,WAAW,aAAa;EAAE;EAAM;EAAa;CAAa,CAAC;CAC1E,MAAM,EAAE,SAAS,aAAa,cAAc,MAAM;CAClD,MAAM,EAAE,OAAO,WAAW,oBAAoB;CAC9C,MAAM,YAAY,SAAS,sBAAsB;CACjD,MAAM,OAAO,OAA+B,IAAI;CAChD,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,QAAQ,MAAM;CACpB,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,SAAS,OAAO,CAAC,GAAG,KAAK,IAAI,QAAQ,GAAG,CAAC,CAAC;CAE5E,MAAM,QAAQ,OAAO,OAAO;CAE5B,SAAS,KAAK,MAAc;EAC1B,MAAM,UAAU;EAChB,IAAI,UAAU,KAAA,GAAW,SAAS,IAAI;EACtC,gBAAgB,IAAI;CACtB;CAEA,SAAS,GAAG,MAAc;EACxB,MAAM,WAAW,OAAO,SAAS;EACjC,KAAK,SAAS,cAAc;GAAE,OAAO;GAAS,UAAU;EAAK,CAAC;EAC9D,KAAK,OAAO;CACd;CAEA,gBAAgB;EACd,IAAI,CAAC,WAAW,MAAM,YAAY,SAAS;EAC3C,MAAM,UAAU;EAChB,KAAK,SAAS,cAAc;GAAE,OAAO;GAAS,UAAU;EAAM,CAAC;CACjE,GAAG,CAAC,SAAS,OAAO,CAAC;CAErB,SAAS,oBAAoB,OAAgD;EAC3E,MAAM,OAAO,KAAK,MAAM,MAAM,YAAY,cAAc,IAAI,KAAK;EACjE,IAAI,SAAS,MAAM,WAAW,QAAQ,KAAK,OAAO,OAAO,KAAK,IAAI;CACpE;CAEA,OACE,oBAACA,OAAD;EACE,aAAA;EACA,sBAAA;EACA,eAAc;EACd,SAAS;EACT,sBAAsB,QAAQ,KAAK;EAEnC,UAAA,qBAAC,MAAD;GAAM,WAAU;GAAS,0BAAA;GAAyB,oBAAoB;GAAe;GAArF,UAAA,CACE,oBAAC,SAAS,MAAV;IACE,eAAc;IACd,OAAO,CAAC,WAAW,cAAc,EAAE,SAAS,SAAS,CAAC;IAEtD,UAAA,oBAAC,UAAD,EAAU,eAAe,QAAQ,KAAK,EAAI,CAAA;GAC7B,CAAA,GACf,qBAAC,SAAS,MAAV;IACE,eAAc;IACd,OAAO,CAAC,WAAW,cAAc;KAAE,SAAS;KAAU,gBAAgB;IAAS,CAAC;IAFlF,UAAA;KAIE,oBAAC,UAAD;MACE,KAAK;MACL,MAAM;MACN,YAAA;MACA,eAAA;MACA,gCAAgC;MAChC,eAAe,SAAS,KAAK;MAC7B,oBAAoB;MACpB,gBAAgB,GAAG,OAAO;OAAE,QAAQ;OAAO,QAAQ,QAAQ;OAAG,OAAO;MAAE;MAClD;MACrB,aAAa,EAAE,WACb,oBAAC,MAAD;OAAM,OAAO;QAAE;QAAO,QAAQ,SAAS;QAAK,mBAAmB;OAAG;OAChE,UAAA,oBAAC,OAAD;QACE,QAAQ,EAAE,KAAK,KAAK,IAAI;QACxB,oBAAoB,KAAK;QACzB,YAAW;QACX,WAAU;OACX,CAAA;MACG,CAAA;KAET,CAAA;KACA,QAAQ,KACP,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAD;MACE,eAAc;MACd,WAAU;MACV,OAAO,EAAE,KAAK,SAAS,IAAI,GAAG;MAHhC,UAAA,CAKE,oBAAC,YAAD;OACE,oBAAoB;OACpB,SAAQ;OACR,WAAW;OACX,eAAe,GAAG,MAAM,UAAU,CAAC;OAEnC,UAAA,oBAAC,cAAD,EAAc,OAAO,UAAY,CAAA;MACvB,CAAA,GACZ,oBAAC,YAAD;OACE,oBAAoB;OACpB,SAAQ;OACR,WAAW;OACX,eAAe,GAAG,MAAM,UAAU,CAAC;OAEnC,UAAA,oBAAC,UAAD,EAAU,OAAO,UAAY,CAAA;MACnB,CAAA,CACR;KACN,CAAA,GAAA,qBAAC,MAAD;MACE,yBAAwB;MACxB,WAAU;MAFZ,UAAA;OAIG,UAAU;OAAE;OAAI;MACb;KACN,CAAA,CAAA,EAAA,CAAA;KAEJ,oBAAC,YAAD;MACE,oBAAoB;MACpB,SAAQ;MACR,WAAW,2BAA2B;MACtC,eAAe,QAAQ,KAAK;MAE5B,UAAA,oBAAC,WAAD,EAAW,OAAO,UAAY,CAAA;KACpB,CAAA;IACC;GACX,CAAA,CAAA;;CACC,CAAA;AAEb"}

package/dist/components/modal/modal.js

@@ -1,10 +1,11 @@
 import { cn } from "../../utils/cn.js";
 import { CloseIcon } from "../_shared/status.js";
 import { useToken } from "../_shared/use-token.js";
+import { useTransition } from "../_shared/use-transition.js";
 import { Backdrop } from "../_shared/backdrop.js";
 import { injectHandler, useOpenState } from "../_shared/overlay-state.js";
 import { createContext, useContext } from "react";
-import { Modal, Pressable, ScrollView, Text, View } from "react-native";
+import { Animated, Modal, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/modal/modal.tsx
@@ -30,52 +31,71 @@ function Modal$1({ open, defaultOpen, onOpenChange, title, children, footer, tri
 	});
 	const close = () => setOpen(false);
 	const iconColor = useToken("--color-text-primary");
+	const { mounted, progress } = useTransition(isOpen);
+	const scale = progress.interpolate({
+		inputRange: [0, 1],
+		outputRange: [.95, 1]
+	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [injectHandler(trigger, "onPress", () => setOpen(true)), /* @__PURE__ */ jsx(Modal, {
 		transparent: true,
 		statusBarTranslucent: true,
-		animationType: "fade",
-		visible: isOpen,
+		animationType: "none",
+		visible: mounted,
 		onRequestClose: close,
 		children: /* @__PURE__ */ jsx(CloseContext.Provider, {
 			value: close,
 			children: /* @__PURE__ */ jsxs(View, {
-				className: "flex-1 items-center justify-center p-4",
+				className: "flex-1",
 				accessibilityViewIsModal: true,
-				children: [/* @__PURE__ */ jsx(Backdrop, {
-					onPress: close,
-					testID: testID ? `${testID}-backdrop` : void 0
-				}), /* @__PURE__ */ jsxs(View, {
-					testID,
-					className: cn(modalVariants({ size }), className),
-					children: [
-						/* @__PURE__ */ jsxs(View, {
-							className: cn("flex-row items-center gap-4 px-6 py-4", showHeaderDivider && "border-b border-border-default"),
-							children: [/* @__PURE__ */ jsx(Text, {
-								accessibilityRole: "header",
-								className: "flex-1 text-lg font-semibold leading-6 text-text-primary",
-								children: title
-							}), showClose && /* @__PURE__ */ jsx(Pressable, {
-								accessibilityRole: "button",
-								accessibilityLabel: closeLabel,
-								hitSlop: 8,
-								onPress: close,
-								className: "size-8 items-center justify-center rounded-full active:bg-button-secondary-bg-hover",
-								children: /* @__PURE__ */ jsx(CloseIcon, { color: iconColor })
-							})]
-						}),
-						/* @__PURE__ */ jsx(ScrollView, {
-							className: "shrink",
-							contentContainerClassName: "gap-4 p-6",
-							children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
-								className: "text-sm leading-5 text-text-secondary",
-								children
-							}) : children
-						}),
-						footer && /* @__PURE__ */ jsx(View, {
-							className: cn("flex-row items-center justify-end gap-2 px-6 py-4", showFooterDivider && "border-t border-border-default"),
-							children: footer
-						})
-					]
+				children: [/* @__PURE__ */ jsx(Animated.View, {
+					pointerEvents: "box-none",
+					style: [StyleSheet.absoluteFill, { opacity: progress }],
+					children: /* @__PURE__ */ jsx(Backdrop, {
+						onPress: close,
+						testID: testID ? `${testID}-backdrop` : void 0
+					})
+				}), /* @__PURE__ */ jsx(Animated.View, {
+					pointerEvents: "box-none",
+					style: [StyleSheet.absoluteFill, {
+						alignItems: "center",
+						justifyContent: "center",
+						padding: 16,
+						opacity: progress,
+						transform: [{ scale }]
+					}],
+					children: /* @__PURE__ */ jsxs(View, {
+						testID,
+						className: cn(modalVariants({ size }), className),
+						children: [
+							/* @__PURE__ */ jsxs(View, {
+								className: cn("flex-row items-center gap-4 px-6 py-4", showHeaderDivider && "border-b border-border-default"),
+								children: [/* @__PURE__ */ jsx(Text, {
+									accessibilityRole: "header",
+									className: "flex-1 text-lg font-semibold leading-6 text-text-primary",
+									children: title
+								}), showClose && /* @__PURE__ */ jsx(Pressable, {
+									accessibilityRole: "button",
+									accessibilityLabel: closeLabel,
+									hitSlop: 8,
+									onPress: close,
+									className: "size-8 items-center justify-center rounded-full active:bg-button-secondary-bg-hover",
+									children: /* @__PURE__ */ jsx(CloseIcon, { color: iconColor })
+								})]
+							}),
+							/* @__PURE__ */ jsx(ScrollView, {
+								className: "shrink",
+								contentContainerClassName: "gap-4 p-6",
+								children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+									className: "text-sm leading-5 text-text-secondary",
+									children
+								}) : children
+							}),
+							footer && /* @__PURE__ */ jsx(View, {
+								className: cn("flex-row items-center justify-end gap-2 px-6 py-4", showFooterDivider && "border-t border-border-default"),
+								children: footer
+							})
+						]
+					})
 				})]
 			})
 		})

package/dist/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":["Modal","RNModal"],"sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { createContext, type ReactNode, useContext } from 'react'\nimport { Pressable, Modal as RNModal, ScrollView, Text, View } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { Backdrop } from '../_shared/backdrop'\nimport { injectHandler, useOpenState } from '../_shared/overlay-state'\nimport { CloseIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\n\nconst modalVariants = cva(\n  'max-h-full w-full overflow-hidden rounded-lg border border-border-default bg-surface-elevated shadow-2xl',\n  {\n    variants: {\n      size: { sm: 'max-w-[480px]', md: 'max-w-[640px]', lg: 'max-w-[800px]' },\n    },\n    defaultVariants: { size: 'sm' },\n  },\n)\n\nconst CloseContext = createContext<(() => void) | null>(null)\n\nexport type ModalProps = VariantProps<typeof modalVariants> & {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Título do diálogo; também é o nome acessível dele. */\n  title: ReactNode\n  /** O corpo do diálogo. */\n  children: ReactNode\n  /** Ações do rodapé (primária à direita). Use `ModalClose` para fechar. Sem ele, não há rodapé. */\n  footer?: ReactNode\n  /** Elemento que abre o modal (ex.: um `<Button>`); recebe `onPress`. Dispensável no modo controlado. */\n  trigger?: ReactNode\n  /** Mostra o botão de fechar (×) no cabeçalho. */\n  showClose?: boolean\n  /** Linha entre o cabeçalho e o corpo. Padrão: `true`. */\n  showHeaderDivider?: boolean\n  /** Linha entre o corpo e o rodapé (só aparece com `footer`). Padrão: `true`. */\n  showFooterDivider?: boolean\n  /** Nome acessível do botão de fechar. */\n  closeLabel?: string\n  className?: string\n  testID?: string\n}\n\n/**\n * Diálogo que bloqueia o conteúdo de trás, com backdrop. Usa o `Modal` nativo: o botão voltar do\n * Android e o toque no fundo fecham. Não há foco preso nem `Esc`; `accessibilityViewIsModal`\n * mantém o leitor de tela dentro do diálogo.\n */\nexport function Modal({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  children,\n  footer,\n  trigger,\n  showClose = true,\n  showHeaderDivider = true,\n  showFooterDivider = true,\n  closeLabel = 'Fechar',\n  size,\n  className,\n  testID,\n}: ModalProps) {\n  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange })\n  const close = () => setOpen(false)\n  const iconColor = useToken('--color-text-primary')\n\n  return (\n    <>\n      {injectHandler(trigger, 'onPress', () => setOpen(true))}\n      <RNModal\n        transparent\n        statusBarTranslucent\n        animationType=\"fade\"\n        visible={isOpen}\n        onRequestClose={close}\n      >\n        <CloseContext.Provider value={close}>\n          <View className=\"flex-1 items-center justify-center p-4\" accessibilityViewIsModal>\n            <Backdrop onPress={close} testID={testID ? `${testID}-backdrop` : undefined} />\n            <View testID={testID} className={cn(modalVariants({ size }), className)}>\n              <View\n                className={cn(\n                  'flex-row items-center gap-4 px-6 py-4',\n                  showHeaderDivider && 'border-b border-border-default',\n                )}\n              >\n                <Text\n                  accessibilityRole=\"header\"\n                  className=\"flex-1 text-lg font-semibold leading-6 text-text-primary\"\n                >\n                  {title}\n                </Text>\n                {showClose && (\n                  <Pressable\n                    accessibilityRole=\"button\"\n                    accessibilityLabel={closeLabel}\n                    hitSlop={8}\n                    onPress={close}\n                    className=\"size-8 items-center justify-center rounded-full active:bg-button-secondary-bg-hover\"\n                  >\n                    <CloseIcon color={iconColor} />\n                  </Pressable>\n                )}\n              </View>\n              <ScrollView className=\"shrink\" contentContainerClassName=\"gap-4 p-6\">\n                {typeof children === 'string' ? (\n                  <Text className=\"text-sm leading-5 text-text-secondary\">{children}</Text>\n                ) : (\n                  children\n                )}\n              </ScrollView>\n              {footer && (\n                <View\n                  className={cn(\n                    'flex-row items-center justify-end gap-2 px-6 py-4',\n                    showFooterDivider && 'border-t border-border-default',\n                  )}\n                >\n                  {footer}\n                </View>\n              )}\n            </View>\n          </View>\n        </CloseContext.Provider>\n      </RNModal>\n    </>\n  )\n}\n\n/** Fecha o modal ao pressionar. Envolva um `<Button>` do rodapé (injeta `onPress`, como o `asChild`). */\nexport function ModalClose({ children }: { children: ReactNode }) {\n  const close = useContext(CloseContext)\n  return <>{injectHandler(children, 'onPress', () => close?.())}</>\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAM,gBAAgB,IACpB,4GACA;CACE,UAAU,EACR,MAAM;EAAE,IAAI;EAAiB,IAAI;EAAiB,IAAI;CAAgB,EACxE;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAEA,MAAM,eAAe,cAAmC,IAAI;;;;;;AA+B5D,SAAgBA,QAAM,EACpB,MACA,aACA,cACA,OACA,UACA,QACA,SACA,YAAY,MACZ,oBAAoB,MACpB,oBAAoB,MACpB,aAAa,UACb,MACA,WACA,UACa;CACb,MAAM,CAAC,QAAQ,WAAW,aAAa;EAAE;EAAM;EAAa;CAAa,CAAC;CAC1E,MAAM,cAAc,QAAQ,KAAK;CACjC,MAAM,YAAY,SAAS,sBAAsB;CAEjD,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,cAAc,SAAS,iBAAiB,QAAQ,IAAI,CAAC,GACtD,oBAACC,OAAD;EACE,aAAA;EACA,sBAAA;EACA,eAAc;EACd,SAAS;EACT,gBAAgB;EAEhB,UAAA,oBAAC,aAAa,UAAd;GAAuB,OAAO;GAC5B,UAAA,qBAAC,MAAD;IAAM,WAAU;IAAyC,0BAAA;IAAzD,UAAA,CACE,oBAAC,UAAD;KAAU,SAAS;KAAO,QAAQ,SAAS,GAAG,OAAO,aAAa,KAAA;IAAY,CAAA,GAC9E,qBAAC,MAAD;KAAc;KAAQ,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;KAAtE,UAAA;MACE,qBAAC,MAAD;OACE,WAAW,GACT,yCACA,qBAAqB,gCACvB;OAJF,UAAA,CAME,oBAAC,MAAD;QACE,mBAAkB;QAClB,WAAU;QAET,UAAA;OACG,CAAA,GACL,aACC,oBAAC,WAAD;QACE,mBAAkB;QAClB,oBAAoB;QACpB,SAAS;QACT,SAAS;QACT,WAAU;QAEV,UAAA,oBAAC,WAAD,EAAW,OAAO,UAAY,CAAA;OACrB,CAAA,CAET;;MACN,oBAAC,YAAD;OAAY,WAAU;OAAS,2BAA0B;OACtD,UAAA,OAAO,aAAa,WACnB,oBAAC,MAAD;QAAM,WAAU;QAAyC;OAAe,CAAA,IAExE;MAEQ,CAAA;MACX,UACC,oBAAC,MAAD;OACE,WAAW,GACT,qDACA,qBAAqB,gCACvB;OAEC,UAAA;MACG,CAAA;KAEJ;IACF,CAAA,CAAA;;EACe,CAAA;CAChB,CAAA,CACT,EAAA,CAAA;AAEN;;AAGA,SAAgB,WAAW,EAAE,YAAqC;CAChE,MAAM,QAAQ,WAAW,YAAY;CACrC,OAAO,oBAAA,YAAA,EAAA,UAAG,cAAc,UAAU,iBAAiB,QAAQ,CAAC,EAAI,CAAA;AAClE"}
+{"version":3,"file":"modal.js","names":["Modal","RNModal"],"sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { createContext, type ReactNode, useContext } from 'react'\nimport {\n  Animated,\n  Pressable,\n  Modal as RNModal,\n  ScrollView,\n  StyleSheet,\n  Text,\n  View,\n} from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { Backdrop } from '../_shared/backdrop'\nimport { injectHandler, useOpenState } from '../_shared/overlay-state'\nimport { CloseIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\nimport { useTransition } from '../_shared/use-transition'\n\nconst modalVariants = cva(\n  'max-h-full w-full overflow-hidden rounded-lg border border-border-default bg-surface-elevated shadow-2xl',\n  {\n    variants: {\n      size: { sm: 'max-w-[480px]', md: 'max-w-[640px]', lg: 'max-w-[800px]' },\n    },\n    defaultVariants: { size: 'sm' },\n  },\n)\n\nconst CloseContext = createContext<(() => void) | null>(null)\n\nexport type ModalProps = VariantProps<typeof modalVariants> & {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Título do diálogo; também é o nome acessível dele. */\n  title: ReactNode\n  /** O corpo do diálogo. */\n  children: ReactNode\n  /** Ações do rodapé (primária à direita). Use `ModalClose` para fechar. Sem ele, não há rodapé. */\n  footer?: ReactNode\n  /** Elemento que abre o modal (ex.: um `<Button>`); recebe `onPress`. Dispensável no modo controlado. */\n  trigger?: ReactNode\n  /** Mostra o botão de fechar (×) no cabeçalho. */\n  showClose?: boolean\n  /** Linha entre o cabeçalho e o corpo. Padrão: `true`. */\n  showHeaderDivider?: boolean\n  /** Linha entre o corpo e o rodapé (só aparece com `footer`). Padrão: `true`. */\n  showFooterDivider?: boolean\n  /** Nome acessível do botão de fechar. */\n  closeLabel?: string\n  className?: string\n  testID?: string\n}\n\n/**\n * Diálogo que bloqueia o conteúdo de trás, com backdrop. Usa o `Modal` nativo: o botão voltar do\n * Android e o toque no fundo fecham. Não há foco preso nem `Esc`; `accessibilityViewIsModal`\n * mantém o leitor de tela dentro do diálogo.\n */\nexport function Modal({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  children,\n  footer,\n  trigger,\n  showClose = true,\n  showHeaderDivider = true,\n  showFooterDivider = true,\n  closeLabel = 'Fechar',\n  size,\n  className,\n  testID,\n}: ModalProps) {\n  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange })\n  const close = () => setOpen(false)\n  const iconColor = useToken('--color-text-primary')\n  // Como no web: o fundo faz fade e o diálogo faz fade com zoom de 95%. O `Modal` nativo só fecha\n  // depois da saída, então a animação é nossa (`animationType=\"none\"`).\n  const { mounted, progress } = useTransition(isOpen)\n  const scale = progress.interpolate({ inputRange: [0, 1], outputRange: [0.95, 1] })\n\n  return (\n    <>\n      {injectHandler(trigger, 'onPress', () => setOpen(true))}\n      <RNModal\n        transparent\n        statusBarTranslucent\n        animationType=\"none\"\n        visible={mounted}\n        onRequestClose={close}\n      >\n        <CloseContext.Provider value={close}>\n          <View className=\"flex-1\" accessibilityViewIsModal>\n            <Animated.View\n              pointerEvents=\"box-none\"\n              style={[StyleSheet.absoluteFill, { opacity: progress }]}\n            >\n              <Backdrop onPress={close} testID={testID ? `${testID}-backdrop` : undefined} />\n            </Animated.View>\n            <Animated.View\n              pointerEvents=\"box-none\"\n              style={[\n                StyleSheet.absoluteFill,\n                {\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  padding: 16,\n                  opacity: progress,\n                  transform: [{ scale }],\n                },\n              ]}\n            >\n              <View testID={testID} className={cn(modalVariants({ size }), className)}>\n                <View\n                  className={cn(\n                    'flex-row items-center gap-4 px-6 py-4',\n                    showHeaderDivider && 'border-b border-border-default',\n                  )}\n                >\n                  <Text\n                    accessibilityRole=\"header\"\n                    className=\"flex-1 text-lg font-semibold leading-6 text-text-primary\"\n                  >\n                    {title}\n                  </Text>\n                  {showClose && (\n                    <Pressable\n                      accessibilityRole=\"button\"\n                      accessibilityLabel={closeLabel}\n                      hitSlop={8}\n                      onPress={close}\n                      className=\"size-8 items-center justify-center rounded-full active:bg-button-secondary-bg-hover\"\n                    >\n                      <CloseIcon color={iconColor} />\n                    </Pressable>\n                  )}\n                </View>\n                <ScrollView className=\"shrink\" contentContainerClassName=\"gap-4 p-6\">\n                  {typeof children === 'string' ? (\n                    <Text className=\"text-sm leading-5 text-text-secondary\">{children}</Text>\n                  ) : (\n                    children\n                  )}\n                </ScrollView>\n                {footer && (\n                  <View\n                    className={cn(\n                      'flex-row items-center justify-end gap-2 px-6 py-4',\n                      showFooterDivider && 'border-t border-border-default',\n                    )}\n                  >\n                    {footer}\n                  </View>\n                )}\n              </View>\n            </Animated.View>\n          </View>\n        </CloseContext.Provider>\n      </RNModal>\n    </>\n  )\n}\n\n/** Fecha o modal ao pressionar. Envolva um `<Button>` do rodapé (injeta `onPress`, como o `asChild`). */\nexport function ModalClose({ children }: { children: ReactNode }) {\n  const close = useContext(CloseContext)\n  return <>{injectHandler(children, 'onPress', () => close?.())}</>\n}\n"],"mappings":";;;;;;;;;;;AAoBA,MAAM,gBAAgB,IACpB,4GACA;CACE,UAAU,EACR,MAAM;EAAE,IAAI;EAAiB,IAAI;EAAiB,IAAI;CAAgB,EACxE;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAEA,MAAM,eAAe,cAAmC,IAAI;;;;;;AA+B5D,SAAgBA,QAAM,EACpB,MACA,aACA,cACA,OACA,UACA,QACA,SACA,YAAY,MACZ,oBAAoB,MACpB,oBAAoB,MACpB,aAAa,UACb,MACA,WACA,UACa;CACb,MAAM,CAAC,QAAQ,WAAW,aAAa;EAAE;EAAM;EAAa;CAAa,CAAC;CAC1E,MAAM,cAAc,QAAQ,KAAK;CACjC,MAAM,YAAY,SAAS,sBAAsB;CAGjD,MAAM,EAAE,SAAS,aAAa,cAAc,MAAM;CAClD,MAAM,QAAQ,SAAS,YAAY;EAAE,YAAY,CAAC,GAAG,CAAC;EAAG,aAAa,CAAC,KAAM,CAAC;CAAE,CAAC;CAEjF,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,cAAc,SAAS,iBAAiB,QAAQ,IAAI,CAAC,GACtD,oBAACC,OAAD;EACE,aAAA;EACA,sBAAA;EACA,eAAc;EACd,SAAS;EACT,gBAAgB;EAEhB,UAAA,oBAAC,aAAa,UAAd;GAAuB,OAAO;GAC5B,UAAA,qBAAC,MAAD;IAAM,WAAU;IAAS,0BAAA;IAAzB,UAAA,CACE,oBAAC,SAAS,MAAV;KACE,eAAc;KACd,OAAO,CAAC,WAAW,cAAc,EAAE,SAAS,SAAS,CAAC;KAEtD,UAAA,oBAAC,UAAD;MAAU,SAAS;MAAO,QAAQ,SAAS,GAAG,OAAO,aAAa,KAAA;KAAY,CAAA;IACjE,CAAA,GACf,oBAAC,SAAS,MAAV;KACE,eAAc;KACd,OAAO,CACL,WAAW,cACX;MACE,YAAY;MACZ,gBAAgB;MAChB,SAAS;MACT,SAAS;MACT,WAAW,CAAC,EAAE,MAAM,CAAC;KACvB,CACF;KAEA,UAAA,qBAAC,MAAD;MAAc;MAAQ,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;MAAtE,UAAA;OACE,qBAAC,MAAD;QACE,WAAW,GACT,yCACA,qBAAqB,gCACvB;QAJF,UAAA,CAME,oBAAC,MAAD;SACE,mBAAkB;SAClB,WAAU;SAET,UAAA;QACG,CAAA,GACL,aACC,oBAAC,WAAD;SACE,mBAAkB;SAClB,oBAAoB;SACpB,SAAS;SACT,SAAS;SACT,WAAU;SAEV,UAAA,oBAAC,WAAD,EAAW,OAAO,UAAY,CAAA;QACrB,CAAA,CAET;;OACN,oBAAC,YAAD;QAAY,WAAU;QAAS,2BAA0B;QACtD,UAAA,OAAO,aAAa,WACnB,oBAAC,MAAD;SAAM,WAAU;SAAyC;QAAe,CAAA,IAExE;OAEQ,CAAA;OACX,UACC,oBAAC,MAAD;QACE,WAAW,GACT,qDACA,qBAAqB,gCACvB;QAEC,UAAA;OACG,CAAA;MAEJ;;IACO,CAAA,CACX;;EACe,CAAA;CAChB,CAAA,CACT,EAAA,CAAA;AAEN;;AAGA,SAAgB,WAAW,EAAE,YAAqC;CAChE,MAAM,QAAQ,WAAW,YAAY;CACrC,OAAO,oBAAA,YAAA,EAAA,UAAG,cAAc,UAAU,iBAAiB,QAAQ,CAAC,EAAI,CAAA;AAClE"}

package/dist/components/segmented-control/segmented-control.d.ts

@@ -12,12 +12,12 @@ export type SegmentedControlProps = Omit<ViewProps, 'style'> & {
   children: ReactNode;
 };
 /** Escolha única entre 2–5 views do mesmo conteúdo. Para navegar entre seções, use Tabs. */
-export declare function SegmentedControl({ className, value, defaultValue, onValueChange, ...props }: SegmentedControlProps): import("react").JSX.Element;
+export declare function SegmentedControl({ className, value, defaultValue, onValueChange, children, ...props }: SegmentedControlProps): import("react").JSX.Element;
 export type SegmentedItemProps = Omit<PressableProps, 'style' | 'children' | 'onPress'> & {
   className?: string;
   value: string;
   children: ReactNode;
 };
-export declare function SegmentedItem({ className, value, children, disabled, accessibilityState, ...props }: SegmentedItemProps): import("react").JSX.Element;
+export declare function SegmentedItem({ className, value, children, disabled, accessibilityState, onLayout, ...props }: SegmentedItemProps): import("react").JSX.Element;
 //#endregion
 //# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/segmented-control/segmented-control.js

@@ -1,13 +1,16 @@
 import { cn } from "../../utils/cn.js";
+import { SlidingIndicator, useItemLayouts } from "../_shared/sliding-indicator.js";
 import { createContext, useContext, useState } from "react";
 import { Pressable, Text, View } from "react-native";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/segmented-control/segmented-control.tsx
 const Context = createContext(null);
 /** Escolha única entre 2–5 views do mesmo conteúdo. Para navegar entre seções, use Tabs. */
-function SegmentedControl({ className, value, defaultValue, onValueChange, ...props }) {
+function SegmentedControl({ className, value, defaultValue, onValueChange, children, ...props }) {
 	const [uncontrolled, setUncontrolled] = useState(defaultValue);
 	const current = value ?? uncontrolled;
+	const { layouts, setLayout } = useItemLayouts();
+	const active = current === void 0 ? void 0 : layouts[current];
 	const select = (next) => {
 		if (next === current) return;
 		setUncontrolled(next);
@@ -16,16 +19,22 @@ function SegmentedControl({ className, value, defaultValue, onValueChange, ...pr
 	return /* @__PURE__ */ jsx(Context.Provider, {
 		value: {
 			value: current,
-			select
+			select,
+			slid: active !== void 0,
+			setLayout
 		},
-		children: /* @__PURE__ */ jsx(View, {
+		children: /* @__PURE__ */ jsxs(View, {
 			accessibilityRole: "radiogroup",
 			className: cn("flex-row items-start gap-1 self-start rounded-md bg-bg-tertiary p-1", className),
-			...props
+			...props,
+			children: [/* @__PURE__ */ jsx(SlidingIndicator, {
+				target: active,
+				className: "rounded-md bg-surface-primary shadow-sm"
+			}), children]
 		})
 	});
 }
-function SegmentedItem({ className, value, children, disabled, accessibilityState, ...props }) {
+function SegmentedItem({ className, value, children, disabled, accessibilityState, onLayout, ...props }) {
 	const group = useContext(Context);
 	if (!group) throw new Error("SegmentedItem deve ser usado dentro de SegmentedControl");
 	const checked = group.value === value;
@@ -39,7 +48,11 @@ function SegmentedItem({ className, value, children, disabled, accessibilityStat
 		},
 		disabled: isDisabled,
 		onPress: () => group.select(value),
-		className: cn("items-center justify-center rounded-md px-4 py-2", checked ? "bg-surface-primary shadow-sm" : "active:bg-bg-secondary", className),
+		onLayout: (event) => {
+			group.setLayout(value, event.nativeEvent.layout);
+			onLayout?.(event);
+		},
+		className: cn("items-center justify-center rounded-md px-4 py-2", checked ? !group.slid && "bg-surface-primary shadow-sm" : "active:bg-bg-secondary", className),
 		...props,
 		children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
 			className: cn("text-sm leading-5 text-text-secondary", checked && "font-medium text-text-primary", isDisabled && "text-text-disabled"),