@innovui/react-native 0.0.0-stage → 0.1.0

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/modal/modal.d.ts
+declare const modalVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ModalProps = VariantProps<typeof modalVariants> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Título do diálogo; também é o nome acessível dele. */
+  title: ReactNode;
+  /** O corpo do diálogo. */
+  children: ReactNode;
+  /** Ações do rodapé (primária à direita). Use `ModalClose` para fechar. Sem ele, não há rodapé. */
+  footer?: ReactNode;
+  /** Elemento que abre o modal (ex.: um `<Button>`); recebe `onPress`. Dispensável no modo controlado. */
+  trigger?: ReactNode;
+  /** Mostra o botão de fechar (×) no cabeçalho. */
+  showClose?: boolean;
+  /** Linha entre o cabeçalho e o corpo. Padrão: `true`. */
+  showHeaderDivider?: boolean;
+  /** Linha entre o corpo e o rodapé (só aparece com `footer`). Padrão: `true`. */
+  showFooterDivider?: boolean;
+  /** Nome acessível do botão de fechar. */
+  closeLabel?: string;
+  className?: string;
+  testID?: string;
+};
+/**
+ * Diálogo que bloqueia o conteúdo de trás, com backdrop. Usa o `Modal` nativo: o botão voltar do
+ * Android e o toque no fundo fecham. Não há foco preso nem `Esc`; `accessibilityViewIsModal`
+ * mantém o leitor de tela dentro do diálogo.
+ */
+export declare function Modal({ open, defaultOpen, onOpenChange, title, children, footer, trigger, showClose, showHeaderDivider, showFooterDivider, closeLabel, size, className, testID }: ModalProps): import("react").JSX.Element;
+/** Fecha o modal ao pressionar. Envolva um `<Button>` do rodapé (injeta `onPress`, como o `asChild`). */
+export declare function ModalClose({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/modal/modal.js

@@ -0,0 +1,92 @@
+import { cn } from "../../utils/cn.js";
+import { CloseIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/modal/modal.tsx
+const modalVariants = cva("max-h-full w-full overflow-hidden rounded-lg border border-border-default bg-surface-elevated shadow-2xl", {
+	variants: { size: {
+		sm: "max-w-[480px]",
+		md: "max-w-[640px]",
+		lg: "max-w-[800px]"
+	} },
+	defaultVariants: { size: "sm" }
+});
+const CloseContext = createContext(null);
+/**
+* Diálogo que bloqueia o conteúdo de trás, com backdrop. Usa o `Modal` nativo: o botão voltar do
+* Android e o toque no fundo fecham. Não há foco preso nem `Esc`; `accessibilityViewIsModal`
+* mantém o leitor de tela dentro do diálogo.
+*/
+function Modal$1({ open, defaultOpen, onOpenChange, title, children, footer, trigger, showClose = true, showHeaderDivider = true, showFooterDivider = true, closeLabel = "Fechar", size, className, testID }) {
+	const [isOpen, setOpen] = useOpenState({
+		open,
+		defaultOpen,
+		onOpenChange
+	});
+	const close = () => setOpen(false);
+	const iconColor = useToken("--color-text-primary");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [injectHandler(trigger, "onPress", () => setOpen(true)), /* @__PURE__ */ jsx(Modal, {
+		transparent: true,
+		statusBarTranslucent: true,
+		animationType: "fade",
+		visible: isOpen,
+		onRequestClose: close,
+		children: /* @__PURE__ */ jsx(CloseContext.Provider, {
+			value: close,
+			children: /* @__PURE__ */ jsxs(View, {
+				className: "flex-1 items-center justify-center p-4",
+				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
+						})
+					]
+				})]
+			})
+		})
+	})] });
+}
+/** Fecha o modal ao pressionar. Envolva um `<Button>` do rodapé (injeta `onPress`, como o `asChild`). */
+function ModalClose({ children }) {
+	const close = useContext(CloseContext);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: injectHandler(children, "onPress", () => close?.()) });
+}
+//#endregion
+export { Modal$1 as Modal, ModalClose };
+
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+import { Pagination, PaginationProps } from "./pagination.js";
+export { Pagination, type PaginationProps };

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,21 @@
+import { ViewProps } from "react-native";
+//#region src/components/pagination/pagination.d.ts
+export type PaginationProps = ViewProps & {
+  className?: string;
+  /** Página atual, começando em 1. */
+  page: number;
+  /** Total de páginas. */
+  pageCount: number;
+  /** Chamado com o número da página escolhida. */
+  onPageChange: (page: number) => void;
+  /** Quantas páginas vizinhas da atual mostrar de cada lado. */
+  siblingCount?: number;
+  /** Nome acessível do botão de página anterior. */
+  previousLabel?: string;
+  /** Nome acessível do botão de próxima página. */
+  nextLabel?: string;
+};
+/** Navegação entre páginas de uma lista ou tabela. Controlado: você guarda o estado de `page`. */
+export declare function Pagination({ className, page, pageCount, onPageChange, siblingCount, previousLabel, nextLabel, accessibilityLabel, ...props }: PaginationProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination/pagination.js

@@ -0,0 +1,99 @@
+import { cn } from "../../utils/cn.js";
+import { ChevronRightIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { Pressable, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pagination/pagination.tsx
+/**
+* Páginas a mostrar: a primeira, a última, a atual e `siblingCount` vizinhas de cada lado, com
+* reticências no que sobra. Mantém sempre o mesmo número de itens, para a barra não pular.
+*/
+function getPages(page, pageCount, siblingCount = 1) {
+	if (pageCount <= siblingCount * 2 + 5) return Array.from({ length: pageCount }, (_, i) => i + 1);
+	const range = (from, to) => Array.from({ length: to - from + 1 }, (_, i) => from + i);
+	const left = Math.max(page - siblingCount, 1);
+	const right = Math.min(page + siblingCount, pageCount);
+	const dotsLeft = left > 2;
+	const dotsRight = right < pageCount - 1;
+	const edge = 3 + siblingCount * 2;
+	if (!dotsLeft) return [
+		...range(1, edge),
+		"ellipsis-right",
+		pageCount
+	];
+	if (!dotsRight) return [
+		1,
+		"ellipsis-left",
+		...range(pageCount - edge + 1, pageCount)
+	];
+	return [
+		1,
+		"ellipsis-left",
+		...range(left, right),
+		"ellipsis-right",
+		pageCount
+	];
+}
+function ArrowButton({ label, disabled, reversed, onPress }) {
+	const color = useToken(disabled ? "--color-text-disabled" : "--color-text-primary");
+	return /* @__PURE__ */ jsx(Pressable, {
+		accessibilityRole: "button",
+		accessibilityLabel: label,
+		accessibilityState: { disabled },
+		disabled,
+		onPress,
+		className: "size-9 items-center justify-center rounded-full bg-transparent active:bg-button-secondary-bg-hover",
+		children: /* @__PURE__ */ jsx(View, {
+			style: reversed ? { transform: [{ rotate: "180deg" }] } : void 0,
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, { color })
+		})
+	});
+}
+/** Navegação entre páginas de uma lista ou tabela. Controlado: você guarda o estado de `page`. */
+function Pagination({ className, page, pageCount, onPageChange, siblingCount = 1, previousLabel = "Página anterior", nextLabel = "Próxima página", accessibilityLabel = "Paginação", ...props }) {
+	return /* @__PURE__ */ jsxs(View, {
+		accessibilityLabel,
+		className: cn("flex-row items-center gap-1", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ArrowButton, {
+				label: previousLabel,
+				reversed: true,
+				disabled: page <= 1,
+				onPress: () => onPageChange(page - 1)
+			}),
+			getPages(page, pageCount, siblingCount).map((item) => {
+				if (typeof item === "string") return /* @__PURE__ */ jsx(View, {
+					accessible: false,
+					importantForAccessibility: "no-hide-descendants",
+					className: "size-9 items-center justify-center",
+					children: /* @__PURE__ */ jsx(Text, {
+						className: "text-sm text-text-secondary",
+						children: "…"
+					})
+				}, item);
+				const current = item === page;
+				return /* @__PURE__ */ jsx(Pressable, {
+					accessibilityRole: "button",
+					accessibilityLabel: `Página ${item}`,
+					accessibilityState: { selected: current },
+					onPress: () => onPageChange(item),
+					className: cn("size-9 items-center justify-center rounded-full", current ? "bg-button-primary-bg active:bg-button-primary-bg-active" : "bg-transparent active:bg-button-secondary-bg-hover"),
+					children: /* @__PURE__ */ jsx(Text, {
+						className: cn("text-sm font-medium", current ? "text-button-primary-text" : "text-button-ghost-text"),
+						children: item
+					})
+				}, item);
+			}),
+			/* @__PURE__ */ jsx(ArrowButton, {
+				label: nextLabel,
+				disabled: page >= pageCount,
+				onPress: () => onPageChange(page + 1)
+			})
+		]
+	});
+}
+//#endregion
+export { Pagination, getPages };
+
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { Pressable, Text, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { ChevronRightIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\n\n/**\n * Páginas a mostrar: a primeira, a última, a atual e `siblingCount` vizinhas de cada lado, com\n * reticências no que sobra. Mantém sempre o mesmo número de itens, para a barra não pular.\n */\nexport function getPages(page: number, pageCount: number, siblingCount = 1) {\n  const slots = siblingCount * 2 + 5\n  if (pageCount <= slots) return Array.from({ length: pageCount }, (_, i) => i + 1)\n\n  const range = (from: number, to: number) =>\n    Array.from({ length: to - from + 1 }, (_, i) => from + i)\n  const left = Math.max(page - siblingCount, 1)\n  const right = Math.min(page + siblingCount, pageCount)\n  const dotsLeft = left > 2\n  const dotsRight = right < pageCount - 1\n  const edge = 3 + siblingCount * 2\n\n  if (!dotsLeft) return [...range(1, edge), 'ellipsis-right' as const, pageCount]\n  if (!dotsRight) return [1, 'ellipsis-left' as const, ...range(pageCount - edge + 1, pageCount)]\n  return [1, 'ellipsis-left' as const, ...range(left, right), 'ellipsis-right' as const, pageCount]\n}\n\nexport type PaginationProps = ViewProps & {\n  className?: string\n  /** Página atual, começando em 1. */\n  page: number\n  /** Total de páginas. */\n  pageCount: number\n  /** Chamado com o número da página escolhida. */\n  onPageChange: (page: number) => void\n  /** Quantas páginas vizinhas da atual mostrar de cada lado. */\n  siblingCount?: number\n  /** Nome acessível do botão de página anterior. */\n  previousLabel?: string\n  /** Nome acessível do botão de próxima página. */\n  nextLabel?: string\n}\n\nfunction ArrowButton({\n  label,\n  disabled,\n  reversed,\n  onPress,\n}: {\n  label: string\n  disabled: boolean\n  reversed?: boolean\n  onPress: () => void\n}) {\n  const color = useToken(disabled ? '--color-text-disabled' : '--color-text-primary')\n\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      accessibilityState={{ disabled }}\n      disabled={disabled}\n      onPress={onPress}\n      className=\"size-9 items-center justify-center rounded-full bg-transparent active:bg-button-secondary-bg-hover\"\n    >\n      {/* Valor dinâmico: a seta anterior é a próxima girada em 180°. */}\n      <View style={reversed ? { transform: [{ rotate: '180deg' }] } : undefined}>\n        <ChevronRightIcon color={color} />\n      </View>\n    </Pressable>\n  )\n}\n\n/** Navegação entre páginas de uma lista ou tabela. Controlado: você guarda o estado de `page`. */\nexport function Pagination({\n  className,\n  page,\n  pageCount,\n  onPageChange,\n  siblingCount = 1,\n  previousLabel = 'Página anterior',\n  nextLabel = 'Próxima página',\n  accessibilityLabel = 'Paginação',\n  ...props\n}: PaginationProps) {\n  return (\n    // RN não tem role \"navigation\": o nome acessível fica no accessibilityLabel.\n    <View\n      accessibilityLabel={accessibilityLabel}\n      className={cn('flex-row items-center gap-1', className)}\n      {...props}\n    >\n      <ArrowButton\n        label={previousLabel}\n        reversed\n        disabled={page <= 1}\n        onPress={() => onPageChange(page - 1)}\n      />\n      {getPages(page, pageCount, siblingCount).map((item) => {\n        if (typeof item === 'string') {\n          return (\n            <View\n              key={item}\n              accessible={false}\n              importantForAccessibility=\"no-hide-descendants\"\n              className=\"size-9 items-center justify-center\"\n            >\n              <Text className=\"text-sm text-text-secondary\">…</Text>\n            </View>\n          )\n        }\n        const current = item === page\n        return (\n          <Pressable\n            key={item}\n            accessibilityRole=\"button\"\n            accessibilityLabel={`Página ${item}`}\n            // RN não tem aria-current: a página atual vai como `selected`.\n            accessibilityState={{ selected: current }}\n            onPress={() => onPageChange(item)}\n            className={cn(\n              'size-9 items-center justify-center rounded-full',\n              current\n                ? 'bg-button-primary-bg active:bg-button-primary-bg-active'\n                : 'bg-transparent active:bg-button-secondary-bg-hover',\n            )}\n          >\n            <Text\n              className={cn(\n                'text-sm font-medium',\n                current ? 'text-button-primary-text' : 'text-button-ghost-text',\n              )}\n            >\n              {item}\n            </Text>\n          </Pressable>\n        )\n      })}\n      <ArrowButton\n        label={nextLabel}\n        disabled={page >= pageCount}\n        onPress={() => onPageChange(page + 1)}\n      />\n    </View>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,SAAS,MAAc,WAAmB,eAAe,GAAG;CAE1E,IAAI,aADU,eAAe,IAAI,GACT,OAAO,MAAM,KAAK,EAAE,QAAQ,UAAU,IAAI,GAAG,MAAM,IAAI,CAAC;CAEhF,MAAM,SAAS,MAAc,OAC3B,MAAM,KAAK,EAAE,QAAQ,KAAK,OAAO,EAAE,IAAI,GAAG,MAAM,OAAO,CAAC;CAC1D,MAAM,OAAO,KAAK,IAAI,OAAO,cAAc,CAAC;CAC5C,MAAM,QAAQ,KAAK,IAAI,OAAO,cAAc,SAAS;CACrD,MAAM,WAAW,OAAO;CACxB,MAAM,YAAY,QAAQ,YAAY;CACtC,MAAM,OAAO,IAAI,eAAe;CAEhC,IAAI,CAAC,UAAU,OAAO;EAAC,GAAG,MAAM,GAAG,IAAI;EAAG;EAA2B;CAAS;CAC9E,IAAI,CAAC,WAAW,OAAO;EAAC;EAAG;EAA0B,GAAG,MAAM,YAAY,OAAO,GAAG,SAAS;CAAC;CAC9F,OAAO;EAAC;EAAG;EAA0B,GAAG,MAAM,MAAM,KAAK;EAAG;EAA2B;CAAS;AAClG;AAkBA,SAAS,YAAY,EACnB,OACA,UACA,UACA,WAMC;CACD,MAAM,QAAQ,SAAS,WAAW,0BAA0B,sBAAsB;CAElF,OACE,oBAAC,WAAD;EACE,mBAAkB;EAClB,oBAAoB;EACpB,oBAAoB,EAAE,SAAS;EACrB;EACD;EACT,WAAU;EAGV,UAAA,oBAAC,MAAD;GAAM,OAAO,WAAW,EAAE,WAAW,CAAC,EAAE,QAAQ,SAAS,CAAC,EAAE,IAAI,KAAA;GAC9D,UAAA,oBAAC,kBAAD,EAAyB,MAAQ,CAAA;EAC7B,CAAA;CACG,CAAA;AAEf;;AAGA,SAAgB,WAAW,EACzB,WACA,MACA,WACA,cACA,eAAe,GACf,gBAAgB,mBAChB,YAAY,kBACZ,qBAAqB,aACrB,GAAG,SACe;CAClB,OAEE,qBAAC,MAAD;EACsB;EACpB,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;EAHN,UAAA;GAKE,oBAAC,aAAD;IACE,OAAO;IACP,UAAA;IACA,UAAU,QAAQ;IAClB,eAAe,aAAa,OAAO,CAAC;GACrC,CAAA;GACA,SAAS,MAAM,WAAW,YAAY,CAAC,CAAC,KAAK,SAAS;IACrD,IAAI,OAAO,SAAS,UAClB,OACE,oBAAC,MAAD;KAEE,YAAY;KACZ,2BAA0B;KAC1B,WAAU;KAEV,UAAA,oBAAC,MAAD;MAAM,WAAU;MAA8B,UAAA;KAAO,CAAA;IACjD,GANC,IAMD;IAGV,MAAM,UAAU,SAAS;IACzB,OACE,oBAAC,WAAD;KAEE,mBAAkB;KAClB,oBAAoB,UAAU;KAE9B,oBAAoB,EAAE,UAAU,QAAQ;KACxC,eAAe,aAAa,IAAI;KAChC,WAAW,GACT,mDACA,UACI,4DACA,oDACN;KAEA,UAAA,oBAAC,MAAD;MACE,WAAW,GACT,uBACA,UAAU,6BAA6B,wBACzC;MAEC,UAAA;KACG,CAAA;IACG,GArBJ,IAqBI;GAEf,CAAC;GACD,oBAAC,aAAD;IACE,OAAO;IACP,UAAU,QAAQ;IAClB,eAAe,aAAa,OAAO,CAAC;GACrC,CAAA;EACG;;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Popover, PopoverClose, PopoverProps } from "./popover.js";
+export { Popover, PopoverClose, type PopoverProps };

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+//#region src/components/popover/popover.d.ts
+export type PopoverProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Lado do gatilho em que o painel abre; inverte se não couber. Padrão: `bottom`. */
+  side?: 'top' | 'bottom';
+  /** Elemento que abre o popover (ex.: um `<Button>`); recebe `onPress`. */
+  trigger: ReactNode;
+  /** Nome acessível do painel: descreve o que há nele, ex.: "Filtros". */
+  label: string;
+  /** O conteúdo do popover. Pode ter elementos interativos. */
+  children: ReactNode;
+  className?: string;
+  testID?: string;
+};
+/**
+ * Painel flutuante ancorado ao gatilho, aberto por toque. O conteúdo pode ser interativo; tocar
+ * fora ou o botão voltar do Android fecha. Diferenças do web: sem `align` (o painel alinha à
+ * esquerda do gatilho), sem lados `left`/`right` e sem devolução de foco.
+ */
+export declare function Popover({ open, defaultOpen, onOpenChange, side, trigger, label, children, className, testID }: PopoverProps): import("react").JSX.Element;
+/** Fecha o popover ao pressionar. Envolva um `<Button>` dentro do conteúdo (injeta `onPress`). */
+export declare function PopoverClose({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/popover/popover.js

@@ -0,0 +1,54 @@
+import { cn } from "../../utils/cn.js";
+import { AnchoredOverlay } from "../_shared/anchored-overlay.js";
+import { injectHandler, useOpenState } from "../_shared/overlay-state.js";
+import { AnchorTrigger, useControlledAnchor } from "../_shared/overlay-anchor.js";
+import { createContext, useContext } from "react";
+import { View } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/popover/popover.tsx
+const CloseContext = createContext(null);
+/**
+* Painel flutuante ancorado ao gatilho, aberto por toque. O conteúdo pode ser interativo; tocar
+* fora ou o botão voltar do Android fecha. Diferenças do web: sem `align` (o painel alinha à
+* esquerda do gatilho), sem lados `left`/`right` e sem devolução de foco.
+*/
+function Popover({ open, defaultOpen, onOpenChange, side = "bottom", trigger, label, children, className, testID }) {
+	const [isOpen, setOpen] = useOpenState({
+		open,
+		defaultOpen,
+		onOpenChange
+	});
+	const { ref, rect } = useControlledAnchor(isOpen);
+	const close = () => setOpen(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AnchorTrigger, {
+		anchorRef: ref,
+		event: "onPress",
+		onTrigger: () => setOpen(!isOpen),
+		children: trigger
+	}), /* @__PURE__ */ jsx(AnchoredOverlay, {
+		visible: isOpen,
+		rect,
+		onRequestClose: close,
+		placement: side,
+		offset: 8,
+		testID,
+		className: cn("max-w-xs rounded-md border border-border-default bg-surface-elevated p-4 shadow-md", className),
+		children: /* @__PURE__ */ jsx(CloseContext.Provider, {
+			value: close,
+			children: /* @__PURE__ */ jsx(View, {
+				accessibilityLabel: label,
+				accessibilityViewIsModal: true,
+				children
+			})
+		})
+	})] });
+}
+/** Fecha o popover ao pressionar. Envolva um `<Button>` dentro do conteúdo (injeta `onPress`). */
+function PopoverClose({ children }) {
+	const close = useContext(CloseContext);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: injectHandler(children, "onPress", () => close?.()) });
+}
+//#endregion
+export { Popover, PopoverClose };
+
+//# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { createContext, type ReactNode, useContext } from 'react'\nimport { View } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { AnchoredOverlay } from '../_shared/anchored-overlay'\nimport { AnchorTrigger, useControlledAnchor } from '../_shared/overlay-anchor'\nimport { injectHandler, useOpenState } from '../_shared/overlay-state'\n\nconst CloseContext = createContext<(() => void) | null>(null)\n\nexport type PopoverProps = {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Lado do gatilho em que o painel abre; inverte se não couber. Padrão: `bottom`. */\n  side?: 'top' | 'bottom'\n  /** Elemento que abre o popover (ex.: um `<Button>`); recebe `onPress`. */\n  trigger: ReactNode\n  /** Nome acessível do painel: descreve o que há nele, ex.: \"Filtros\". */\n  label: string\n  /** O conteúdo do popover. Pode ter elementos interativos. */\n  children: ReactNode\n  className?: string\n  testID?: string\n}\n\n/**\n * Painel flutuante ancorado ao gatilho, aberto por toque. O conteúdo pode ser interativo; tocar\n * fora ou o botão voltar do Android fecha. Diferenças do web: sem `align` (o painel alinha à\n * esquerda do gatilho), sem lados `left`/`right` e sem devolução de foco.\n */\nexport function Popover({\n  open,\n  defaultOpen,\n  onOpenChange,\n  side = 'bottom',\n  trigger,\n  label,\n  children,\n  className,\n  testID,\n}: PopoverProps) {\n  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange })\n  const { ref, rect } = useControlledAnchor(isOpen)\n  const close = () => setOpen(false)\n\n  return (\n    <>\n      <AnchorTrigger anchorRef={ref} event=\"onPress\" onTrigger={() => setOpen(!isOpen)}>\n        {trigger}\n      </AnchorTrigger>\n      <AnchoredOverlay\n        visible={isOpen}\n        rect={rect}\n        onRequestClose={close}\n        placement={side}\n        offset={8}\n        testID={testID}\n        className={cn(\n          'max-w-xs rounded-md border border-border-default bg-surface-elevated p-4 shadow-md',\n          className,\n        )}\n      >\n        <CloseContext.Provider value={close}>\n          <View accessibilityLabel={label} accessibilityViewIsModal>\n            {children}\n          </View>\n        </CloseContext.Provider>\n      </AnchoredOverlay>\n    </>\n  )\n}\n\n/** Fecha o popover ao pressionar. Envolva um `<Button>` dentro do conteúdo (injeta `onPress`). */\nexport function PopoverClose({ children }: { children: ReactNode }) {\n  const close = useContext(CloseContext)\n  return <>{injectHandler(children, 'onPress', () => close?.())}</>\n}\n"],"mappings":";;;;;;;;AASA,MAAM,eAAe,cAAmC,IAAI;;;;;;AAuB5D,SAAgB,QAAQ,EACtB,MACA,aACA,cACA,OAAO,UACP,SACA,OACA,UACA,WACA,UACe;CACf,MAAM,CAAC,QAAQ,WAAW,aAAa;EAAE;EAAM;EAAa;CAAa,CAAC;CAC1E,MAAM,EAAE,KAAK,SAAS,oBAAoB,MAAM;CAChD,MAAM,cAAc,QAAQ,KAAK;CAEjC,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD;EAAe,WAAW;EAAK,OAAM;EAAU,iBAAiB,QAAQ,CAAC,MAAM;EAC5E,UAAA;CACY,CAAA,GACf,oBAAC,iBAAD;EACE,SAAS;EACH;EACN,gBAAgB;EAChB,WAAW;EACX,QAAQ;EACA;EACR,WAAW,GACT,sFACA,SACF;EAEA,UAAA,oBAAC,aAAa,UAAd;GAAuB,OAAO;GAC5B,UAAA,oBAAC,MAAD;IAAM,oBAAoB;IAAO,0BAAA;IAC9B;GACG,CAAA;EACe,CAAA;CACR,CAAA,CACjB,EAAA,CAAA;AAEN;;AAGA,SAAgB,aAAa,EAAE,YAAqC;CAClE,MAAM,QAAQ,WAAW,YAAY;CACrC,OAAO,oBAAA,YAAA,EAAA,UAAG,cAAc,UAAU,iBAAiB,QAAQ,CAAC,EAAI,CAAA;AAClE"}

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

@@ -0,0 +1,2 @@
+import { Radio, RadioProps } from "./radio.js";
+export { Radio, type RadioProps };

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { PressableProps } from "react-native";
+//#region src/components/radio/radio.d.ts
+export type RadioProps = Omit<PressableProps, 'children' | 'style' | 'onPress'> & {
+  className?: string;
+  label?: ReactNode;
+  /** Controlado. No native não há `name`: para formar um grupo, controle `checked` de cada opção. */
+  checked?: boolean;
+  defaultChecked?: boolean;
+  /** Chamado com `true` ao selecionar; tocar numa opção já marcada não faz nada. */
+  onCheckedChange?: (checked: boolean) => void;
+  error?: boolean;
+};
+export declare function Radio({ label, checked, defaultChecked, onCheckedChange, error, disabled, className, accessibilityState, ...props }: RadioProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=radio.d.ts.map

package/dist/components/radio/radio.js

@@ -0,0 +1,37 @@
+import { cn } from "../../utils/cn.js";
+import { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/radio/radio.tsx
+function Radio({ label, checked, defaultChecked = false, onCheckedChange, error, disabled, className, accessibilityState, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+	const isChecked = checked ?? uncontrolled;
+	const isDisabled = Boolean(disabled);
+	return /* @__PURE__ */ jsxs(Pressable, {
+		accessibilityRole: "radio",
+		accessibilityState: {
+			...accessibilityState,
+			checked: isChecked,
+			disabled: isDisabled
+		},
+		disabled: isDisabled,
+		onPress: () => {
+			if (isChecked) return;
+			setUncontrolled(true);
+			onCheckedChange?.(true);
+		},
+		className: cn("min-h-11 flex-row items-center gap-3 self-start", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(View, {
+			className: cn("size-5 items-center justify-center rounded-full border-2 border-selection-border-unselected bg-selection-bg-unselected", isChecked && "border-selection-border-selected bg-selection-bg-selected", isDisabled && "border-selection-border-disabled bg-selection-bg-disabled", error && "border-status-error-border"),
+			children: isChecked ? /* @__PURE__ */ jsx(View, { className: cn("size-2.5 rounded-full bg-selection-indicator-selected", isDisabled && "bg-selection-text-disabled") }) : null
+		}), typeof label === "string" ? /* @__PURE__ */ jsx(Text, {
+			className: cn("text-sm font-medium text-selection-text-label", isDisabled && "text-selection-text-disabled"),
+			children: label
+		}) : label]
+	});
+}
+//#endregion
+export { Radio };
+
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { type ReactNode, useState } from 'react'\nimport { Pressable, type PressableProps, Text, View } from 'react-native'\nimport { cn } from '../../utils/cn'\n\nexport type RadioProps = Omit<PressableProps, 'children' | 'style' | 'onPress'> & {\n  className?: string\n  label?: ReactNode\n  /** Controlado. No native não há `name`: para formar um grupo, controle `checked` de cada opção. */\n  checked?: boolean\n  defaultChecked?: boolean\n  /** Chamado com `true` ao selecionar; tocar numa opção já marcada não faz nada. */\n  onCheckedChange?: (checked: boolean) => void\n  error?: boolean\n}\n\nexport function Radio({\n  label,\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  error,\n  disabled,\n  className,\n  accessibilityState,\n  ...props\n}: RadioProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultChecked)\n  const isChecked = checked ?? uncontrolled\n  const isDisabled = Boolean(disabled)\n\n  return (\n    <Pressable\n      accessibilityRole=\"radio\"\n      accessibilityState={{ ...accessibilityState, checked: isChecked, disabled: isDisabled }}\n      disabled={isDisabled}\n      onPress={() => {\n        if (isChecked) return\n        setUncontrolled(true)\n        onCheckedChange?.(true)\n      }}\n      className={cn('min-h-11 flex-row items-center gap-3 self-start', className)}\n      {...props}\n    >\n      <View\n        className={cn(\n          'size-5 items-center justify-center rounded-full border-2 border-selection-border-unselected bg-selection-bg-unselected',\n          isChecked && 'border-selection-border-selected bg-selection-bg-selected',\n          isDisabled && 'border-selection-border-disabled bg-selection-bg-disabled',\n          error && 'border-status-error-border',\n        )}\n      >\n        {isChecked ? (\n          <View\n            className={cn(\n              'size-2.5 rounded-full bg-selection-indicator-selected',\n              isDisabled && 'bg-selection-text-disabled',\n            )}\n          />\n        ) : null}\n      </View>\n      {typeof label === 'string' ? (\n        <Text\n          className={cn(\n            'text-sm font-medium text-selection-text-label',\n            isDisabled && 'text-selection-text-disabled',\n          )}\n        >\n          {label}\n        </Text>\n      ) : (\n        label\n      )}\n    </Pressable>\n  )\n}\n"],"mappings":";;;;;AAiBA,SAAgB,MAAM,EACpB,OACA,SACA,iBAAiB,OACjB,iBACA,OACA,UACA,WACA,oBACA,GAAG,SACU;CACb,MAAM,CAAC,cAAc,mBAAmB,SAAS,cAAc;CAC/D,MAAM,YAAY,WAAW;CAC7B,MAAM,aAAa,QAAQ,QAAQ;CAEnC,OACE,qBAAC,WAAD;EACE,mBAAkB;EAClB,oBAAoB;GAAE,GAAG;GAAoB,SAAS;GAAW,UAAU;EAAW;EACtF,UAAU;EACV,eAAe;GACb,IAAI,WAAW;GACf,gBAAgB,IAAI;GACpB,kBAAkB,IAAI;EACxB;EACA,WAAW,GAAG,mDAAmD,SAAS;EAC1E,GAAI;EAVN,UAAA,CAYE,oBAAC,MAAD;GACE,WAAW,GACT,0HACA,aAAa,6DACb,cAAc,6DACd,SAAS,4BACX;GAEC,UAAA,YACC,oBAAC,MAAD,EACE,WAAW,GACT,yDACA,cAAc,4BAChB,EACD,CAAA,IACC;EACA,CAAA,GACL,OAAO,UAAU,WAChB,oBAAC,MAAD;GACE,WAAW,GACT,iDACA,cAAc,8BAChB;GAEC,UAAA;EACG,CAAA,IAEN,KAEO;;AAEf"}

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

@@ -0,0 +1,2 @@
+import { SegmentedControl, SegmentedControlProps, SegmentedItem, SegmentedItemProps } from "./segmented-control.js";
+export { SegmentedControl, type SegmentedControlProps, SegmentedItem, type SegmentedItemProps };

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

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { PressableProps, ViewProps } from "react-native";
+//#region src/components/segmented-control/segmented-control.d.ts
+export type SegmentedControlProps = Omit<ViewProps, 'style'> & {
+  className?: string;
+  /** Obrigatório: descreve o que o controle escolhe (ex.: "Modo de exibição"). */
+  accessibilityLabel: string;
+  /** Controlado. Sem ele, o componente guarda o próprio estado (começa em `defaultValue`). */
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  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 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;
+//#endregion
+//# sourceMappingURL=segmented-control.d.ts.map

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

@@ -0,0 +1,53 @@
+import { cn } from "../../utils/cn.js";
+import { createContext, useContext, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { jsx } 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 }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const current = value ?? uncontrolled;
+	const select = (next) => {
+		if (next === current) return;
+		setUncontrolled(next);
+		onValueChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: {
+			value: current,
+			select
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			accessibilityRole: "radiogroup",
+			className: cn("flex-row items-start gap-1 self-start rounded-md bg-bg-tertiary p-1", className),
+			...props
+		})
+	});
+}
+function SegmentedItem({ className, value, children, disabled, accessibilityState, ...props }) {
+	const group = useContext(Context);
+	if (!group) throw new Error("SegmentedItem deve ser usado dentro de SegmentedControl");
+	const checked = group.value === value;
+	const isDisabled = Boolean(disabled);
+	return /* @__PURE__ */ jsx(Pressable, {
+		accessibilityRole: "radio",
+		accessibilityState: {
+			...accessibilityState,
+			checked,
+			disabled: isDisabled
+		},
+		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),
+		...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"),
+			children
+		}) : children
+	});
+}
+//#endregion
+export { SegmentedControl, SegmentedItem };
+
+//# sourceMappingURL=segmented-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { createContext, type ReactNode, useContext, useState } from 'react'\nimport { Pressable, type PressableProps, Text, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\n\ntype SegmentedContext = { value: string | undefined; select: (value: string) => void }\n\nconst Context = createContext<SegmentedContext | null>(null)\n\nexport type SegmentedControlProps = Omit<ViewProps, 'style'> & {\n  className?: string\n  /** Obrigatório: descreve o que o controle escolhe (ex.: \"Modo de exibição\"). */\n  accessibilityLabel: string\n  /** Controlado. Sem ele, o componente guarda o próprio estado (começa em `defaultValue`). */\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  children: ReactNode\n}\n\n/** Escolha única entre 2–5 views do mesmo conteúdo. Para navegar entre seções, use Tabs. */\nexport function SegmentedControl({\n  className,\n  value,\n  defaultValue,\n  onValueChange,\n  ...props\n}: SegmentedControlProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue)\n  const current = value ?? uncontrolled\n\n  const select = (next: string) => {\n    if (next === current) return\n    setUncontrolled(next)\n    onValueChange?.(next)\n  }\n\n  return (\n    <Context.Provider value={{ value: current, select }}>\n      <View\n        accessibilityRole=\"radiogroup\"\n        className={cn(\n          'flex-row items-start gap-1 self-start rounded-md bg-bg-tertiary p-1',\n          className,\n        )}\n        {...props}\n      />\n    </Context.Provider>\n  )\n}\n\nexport type SegmentedItemProps = Omit<PressableProps, 'style' | 'children' | 'onPress'> & {\n  className?: string\n  value: string\n  children: ReactNode\n}\n\nexport function SegmentedItem({\n  className,\n  value,\n  children,\n  disabled,\n  accessibilityState,\n  ...props\n}: SegmentedItemProps) {\n  const group = useContext(Context)\n  if (!group) throw new Error('SegmentedItem deve ser usado dentro de SegmentedControl')\n\n  const checked = group.value === value\n  const isDisabled = Boolean(disabled)\n\n  return (\n    <Pressable\n      accessibilityRole=\"radio\"\n      accessibilityState={{ ...accessibilityState, checked, disabled: isDisabled }}\n      disabled={isDisabled}\n      onPress={() => group.select(value)}\n      className={cn(\n        'items-center justify-center rounded-md px-4 py-2',\n        checked ? 'bg-surface-primary shadow-sm' : 'active:bg-bg-secondary',\n        className,\n      )}\n      {...props}\n    >\n      {typeof children === 'string' ? (\n        <Text\n          className={cn(\n            'text-sm leading-5 text-text-secondary',\n            checked && 'font-medium text-text-primary',\n            isDisabled && 'text-text-disabled',\n          )}\n        >\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n    </Pressable>\n  )\n}\n"],"mappings":";;;;;AAQA,MAAM,UAAU,cAAuC,IAAI;;AAc3D,SAAgB,iBAAiB,EAC/B,WACA,OACA,cACA,eACA,GAAG,SACqB;CACxB,MAAM,CAAC,cAAc,mBAAmB,SAAS,YAAY;CAC7D,MAAM,UAAU,SAAS;CAEzB,MAAM,UAAU,SAAiB;EAC/B,IAAI,SAAS,SAAS;EACtB,gBAAgB,IAAI;EACpB,gBAAgB,IAAI;CACtB;CAEA,OACE,oBAAC,QAAQ,UAAT;EAAkB,OAAO;GAAE,OAAO;GAAS;EAAO;EAChD,UAAA,oBAAC,MAAD;GACE,mBAAkB;GAClB,WAAW,GACT,uEACA,SACF;GACA,GAAI;EACL,CAAA;CACe,CAAA;AAEtB;AAQA,SAAgB,cAAc,EAC5B,WACA,OACA,UACA,UACA,oBACA,GAAG,SACkB;CACrB,MAAM,QAAQ,WAAW,OAAO;CAChC,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,yDAAyD;CAErF,MAAM,UAAU,MAAM,UAAU;CAChC,MAAM,aAAa,QAAQ,QAAQ;CAEnC,OACE,oBAAC,WAAD;EACE,mBAAkB;EAClB,oBAAoB;GAAE,GAAG;GAAoB;GAAS,UAAU;EAAW;EAC3E,UAAU;EACV,eAAe,MAAM,OAAO,KAAK;EACjC,WAAW,GACT,oDACA,UAAU,iCAAiC,0BAC3C,SACF;EACA,GAAI;EAEH,UAAA,OAAO,aAAa,WACnB,oBAAC,MAAD;GACE,WAAW,GACT,yCACA,WAAW,iCACX,cAAc,oBAChB;GAEC;EACG,CAAA,IAEN;CAEO,CAAA;AAEf"}

package/dist/components/select/field-trigger.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { View } from "react-native";
+//#region src/components/select/field-trigger.d.ts
+export type FieldSize = 'sm' | 'md' | 'lg';
+//#endregion
+//# sourceMappingURL=field-trigger.d.ts.map