@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/targets/native/components/google-icon.js

@@ -1,31 +1,37 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import Svg, { Path } from "react-native-svg";
 function GoogleIcon({ size = 18 }) {
-  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ React.createElement(
-    Path,
-    {
-      fill: "#FFC107",
-      d: "M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Path,
-    {
-      fill: "#FF3D00",
-      d: "M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Path,
-    {
-      fill: "#4CAF50",
-      d: "M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Path,
-    {
-      fill: "#1976D2",
-      d: "M43.611 20.083H42V20H24v8h11.303c-0.792 2.237-2.231 4.166-4.087 5.571l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Svg, { width: size, height: size, viewBox: "0 0 48 48", children: [
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        fill: "#FFC107",
+        d: "M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        fill: "#FF3D00",
+        d: "M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        fill: "#4CAF50",
+        d: "M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        fill: "#1976D2",
+        d: "M43.611 20.083H42V20H24v8h11.303c-0.792 2.237-2.231 4.166-4.087 5.571l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"
+      }
+    )
+  ] });
 }
 export {
   GoogleIcon

package/dist/targets/native/components/icon-button.js

@@ -3,6 +3,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import {
   ActivityIndicator,
   Pressable,
@@ -48,9 +49,9 @@ function IconButton(_a) {
   }[variant];
   const box = BOX[size];
   const hit = Math.max(0, Math.round((44 - box) / 2)) + 4;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Pressable,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       accessibilityRole: "button",
       accessibilityLabel,
       accessibilityState: { disabled: !!isDisabled, busy: loading },
@@ -64,8 +65,9 @@ function IconButton(_a) {
         borderWidth: skin.border ? 1 : 0,
         opacity: isDisabled ? 0.5 : pressed ? 0.8 : 1
       })
-    }, rest),
-    loading ? /* @__PURE__ */ React.createElement(ActivityIndicator, { color: skin.fg }) : /* @__PURE__ */ React.createElement(View, null, icon)
+    }, rest), {
+      children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: skin.fg }) : /* @__PURE__ */ jsx(View, { children: icon })
+    })
   );
 }
 const styles = StyleSheet.create({

package/dist/targets/native/components/icon.js

@@ -1,8 +1,9 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import { useTheme } from "./theme.js";
 function Icon({ icon: Glyph, size = 24, color }) {
   const t = useTheme();
-  return /* @__PURE__ */ React.createElement(Glyph, { size, color: color != null ? color : t["--icon-default"] });
+  return /* @__PURE__ */ jsx(Glyph, { size, color: color != null ? color : t["--icon-default"] });
 }
 export {
   Icon

package/dist/targets/native/components/image-upload.js

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Image } from "expo-image";
 import * as ImagePicker from "expo-image-picker";
 import { ImagePlus, X } from "lucide-react-native";
@@ -32,63 +33,71 @@ function ImageUpload({ value, onChange, onUpload, max = 10, onError }) {
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8 } }, value.map((url) => /* @__PURE__ */ React.createElement(
-    View,
-    {
-      key: url,
-      style: {
-        width: TILE,
-        height: TILE,
-        borderRadius: 12,
-        overflow: "hidden",
-        backgroundColor: t["--surface-raised"]
-      }
-    },
-    /* @__PURE__ */ React.createElement(Image, { source: { uri: url }, style: { width: "100%", height: "100%" }, contentFit: "cover" }),
-    /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8 }, children: [
+    value.map((url) => /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: {
+          width: TILE,
+          height: TILE,
+          borderRadius: 12,
+          overflow: "hidden",
+          backgroundColor: t["--surface-raised"]
+        },
+        children: [
+          /* @__PURE__ */ jsx(Image, { source: { uri: url }, style: { width: "100%", height: "100%" }, contentFit: "cover" }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              onPress: () => onChange(value.filter((u) => u !== url)),
+              hitSlop: 11,
+              accessibilityRole: "button",
+              accessibilityLabel: "Remover foto",
+              style: {
+                position: "absolute",
+                top: 4,
+                right: 4,
+                width: 22,
+                height: 22,
+                borderRadius: 11,
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "rgba(0, 0, 0, 0.55)"
+              },
+              children: /* @__PURE__ */ jsx(X, { size: 14, color: "#ffffff" })
+            }
+          )
+        ]
+      },
+      url
+    )),
+    value.length < max ? /* @__PURE__ */ jsx(
       Pressable,
       {
-        onPress: () => onChange(value.filter((u) => u !== url)),
-        hitSlop: 11,
+        onPress: pick,
+        disabled: busy,
         accessibilityRole: "button",
-        accessibilityLabel: "Remover foto",
+        accessibilityLabel: busy ? "Enviando foto" : "Adicionar foto",
+        accessibilityState: { busy, disabled: busy },
         style: {
-          position: "absolute",
-          top: 4,
-          right: 4,
-          width: 22,
-          height: 22,
-          borderRadius: 11,
+          width: TILE,
+          height: TILE,
+          borderRadius: 12,
+          borderWidth: 1,
+          borderStyle: "dashed",
+          borderColor: t["--border-default"],
           alignItems: "center",
           justifyContent: "center",
-          backgroundColor: "rgba(0, 0, 0, 0.55)"
-        }
-      },
-      /* @__PURE__ */ React.createElement(X, { size: 14, color: "#ffffff" })
-    )
-  )), value.length < max ? /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      onPress: pick,
-      disabled: busy,
-      accessibilityRole: "button",
-      accessibilityLabel: busy ? "Enviando foto" : "Adicionar foto",
-      accessibilityState: { busy, disabled: busy },
-      style: {
-        width: TILE,
-        height: TILE,
-        borderRadius: 12,
-        borderWidth: 1,
-        borderStyle: "dashed",
-        borderColor: t["--border-default"],
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 4,
-        backgroundColor: t["--surface-default"]
+          gap: 4,
+          backgroundColor: t["--surface-default"]
+        },
+        children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: t["--brand-primary"] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ImagePlus, { size: 22, color: t["--text-muted"] }),
+          /* @__PURE__ */ jsx(Text, { variant: "caption", color: "muted", children: "Foto" })
+        ] })
       }
-    },
-    busy ? /* @__PURE__ */ React.createElement(ActivityIndicator, { color: t["--brand-primary"] }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ImagePlus, { size: 22, color: t["--text-muted"] }), /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "muted" }, "Foto"))
-  ) : null);
+    ) : null
+  ] });
 }
 export {
   ImageUpload

package/dist/targets/native/components/index.d.ts

@@ -33,8 +33,6 @@ export { IconButton, IconButtonColor, IconButtonSize, IconButtonVariant } from '
 export { Search } from './search.js';
 export { FAB, FABProps, FABProvider, useFAB } from './fab.js';
 export { Accordion, AccordionItem, AccordionItemProps, AccordionProps } from './accordion.js';
-export { PaywallBanner, PaywallBannerProps } from './paywall-banner.js';
-export { PaywallContent, PaywallContentProps, PaywallIcon, PaywallReason } from './paywall.js';
 export { Menu, MenuItem } from './menu.js';
 export { ContextMenu } from './context-menu.js';
 export { Slider } from './slider.js';

package/dist/targets/native/components/index.js

@@ -34,8 +34,6 @@ import { IconButton } from "./icon-button.js";
 import { Search } from "./search.js";
 import { FAB, FABProvider, useFAB } from "./fab.js";
 import { Accordion, AccordionItem } from "./accordion.js";
-import { PaywallBanner } from "./paywall-banner.js";
-import { PaywallContent } from "./paywall.js";
 import { Menu, MenuItem } from "./menu.js";
 import { ContextMenu } from "./context-menu.js";
 import { Slider } from "./slider.js";
@@ -75,8 +73,6 @@ export {
   Menu,
   MenuItem,
   Modal,
-  PaywallBanner,
-  PaywallContent,
   Radio,
   RadioGroup,
   SavingBar,

package/dist/targets/native/components/input.js

@@ -2,6 +2,7 @@ import {
   __objRest,
   __spreadValues
 } from "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Pressable, StyleSheet, TextInput, View } from "react-native";
 import { X } from "lucide-react-native";
@@ -44,44 +45,50 @@ function Input(_a) {
   }
   const hasValue = typeof rest.value === "string" ? rest.value.length > 0 : false;
   const showClear = !!clearable && hasValue && rest.editable !== false;
-  return /* @__PURE__ */ React.createElement(View, { style: { gap: 6 } }, label ? /* @__PURE__ */ React.createElement(Text, { variant: "label" }, label) : null, /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.field,
-        { borderColor, backgroundColor: t["--surface-default"] }
-      ]
-    },
-    prefix ? /* @__PURE__ */ React.createElement(View, { style: styles.affix }, renderAffix(prefix, t)) : null,
-    /* @__PURE__ */ React.createElement(
-      TextInput,
-      __spreadValues({
-        placeholderTextColor: t["--text-placeholder"],
-        accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : label,
-        accessibilityState: { disabled: rest.editable === false },
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onChangeText,
-        style: [styles.input, { color: t["--text-primary"] }, style]
-      }, rest)
-    ),
-    showClear ? /* @__PURE__ */ React.createElement(
-      Pressable,
+  return /* @__PURE__ */ jsxs(View, { style: { gap: 6 }, children: [
+    label ? /* @__PURE__ */ jsx(Text, { variant: "label", children: label }) : null,
+    /* @__PURE__ */ jsxs(
+      View,
       {
-        onPress: () => onChangeText == null ? void 0 : onChangeText(""),
-        accessibilityRole: "button",
-        accessibilityLabel: "Clear",
-        hitSlop: 8,
-        style: styles.affix
-      },
-      /* @__PURE__ */ React.createElement(X, { size: 16, color: t["--text-muted"] })
-    ) : null,
-    suffix ? /* @__PURE__ */ React.createElement(View, { style: styles.affix }, renderAffix(suffix, t)) : null
-  ), typeof error === "string" && error ? /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "danger" }, error) : null);
+        style: [
+          styles.field,
+          { borderColor, backgroundColor: t["--surface-default"] }
+        ],
+        children: [
+          prefix ? /* @__PURE__ */ jsx(View, { style: styles.affix, children: renderAffix(prefix, t) }) : null,
+          /* @__PURE__ */ jsx(
+            TextInput,
+            __spreadValues({
+              placeholderTextColor: t["--text-placeholder"],
+              accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : label,
+              accessibilityState: { disabled: rest.editable === false },
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onChangeText,
+              style: [styles.input, { color: t["--text-primary"] }, style]
+            }, rest)
+          ),
+          showClear ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              onPress: () => onChangeText == null ? void 0 : onChangeText(""),
+              accessibilityRole: "button",
+              accessibilityLabel: "Clear",
+              hitSlop: 8,
+              style: styles.affix,
+              children: /* @__PURE__ */ jsx(X, { size: 16, color: t["--text-muted"] })
+            }
+          ) : null,
+          suffix ? /* @__PURE__ */ jsx(View, { style: styles.affix, children: renderAffix(suffix, t) }) : null
+        ]
+      }
+    ),
+    typeof error === "string" && error ? /* @__PURE__ */ jsx(Text, { variant: "caption", color: "danger", children: error }) : null
+  ] });
 }
 function renderAffix(node, t) {
   if (typeof node === "string") {
-    return /* @__PURE__ */ React.createElement(Text, { variant: "body", style: { color: t["--text-muted"] } }, node);
+    return /* @__PURE__ */ jsx(Text, { variant: "body", style: { color: t["--text-muted"] }, children: node });
   }
   return node;
 }

package/dist/targets/native/components/list-item.js

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react-native";
 import { Pressable, View } from "react-native";
 import { Text } from "./text.js";
@@ -14,7 +15,7 @@ function ListItem({
   disabled
 }) {
   const t = useTheme();
-  const body = /* @__PURE__ */ React.createElement(
+  const body = /* @__PURE__ */ jsxs(
     View,
     {
       style: {
@@ -29,27 +30,32 @@ function ListItem({
         borderColor: t["--border-subtle"],
         backgroundColor: t["--surface-default"],
         opacity: disabled ? 0.5 : 1
-      }
-    },
-    leading ? leading : Icon ? /* @__PURE__ */ React.createElement(
-      View,
-      {
-        style: {
-          width: 40,
-          height: 40,
-          borderRadius: 10,
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: t["--surface-raised"]
-        }
       },
-      /* @__PURE__ */ React.createElement(Icon, { color: t["--icon-default"], size: 22 })
-    ) : null,
-    /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { variant: "label", numberOfLines: 1 }, title), subtitle ? /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "muted" }, subtitle) : null),
-    trailing,
-    showChevron && onPress ? /* @__PURE__ */ React.createElement(View, { importantForAccessibility: "no" }, /* @__PURE__ */ React.createElement(ChevronRight, { color: t["--text-muted"], size: 20 })) : null
+      children: [
+        leading ? leading : Icon ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: 40,
+              height: 40,
+              borderRadius: 10,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: t["--surface-raised"]
+            },
+            children: /* @__PURE__ */ jsx(Icon, { color: t["--icon-default"], size: 22 })
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { variant: "label", numberOfLines: 1, children: title }),
+          subtitle ? /* @__PURE__ */ jsx(Text, { variant: "caption", color: "muted", children: subtitle }) : null
+        ] }),
+        trailing,
+        showChevron && onPress ? /* @__PURE__ */ jsx(View, { importantForAccessibility: "no", children: /* @__PURE__ */ jsx(ChevronRight, { color: t["--text-muted"], size: 20 }) }) : null
+      ]
+    }
   );
-  return onPress ? /* @__PURE__ */ React.createElement(
+  return onPress ? /* @__PURE__ */ jsx(
     Pressable,
     {
       onPress: disabled ? void 0 : onPress,
@@ -61,9 +67,9 @@ function ListItem({
       android_ripple: { color: t["--surface-raised"] },
       style: ({ pressed }) => [
         pressed && !disabled ? { backgroundColor: t["--surface-raised"], borderRadius: 12 } : null
-      ]
-    },
-    body
+      ],
+      children: body
+    }
   ) : body;
 }
 export {

package/dist/targets/native/components/menu.js

@@ -2,27 +2,27 @@ import {
   __spreadProps,
   __spreadValues
 } from "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable, StyleSheet, View } from "react-native";
 import { Sheet } from "./sheet.js";
 import { Text } from "./text.js";
 import { useTheme } from "./theme.js";
 function Menu({ visible, onClose, items, children }) {
-  return /* @__PURE__ */ React.createElement(Sheet, { visible, onClose }, /* @__PURE__ */ React.createElement(View, { accessibilityRole: "menu", style: styles.list }, items ? items.map((item, i) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(Sheet, { visible, onClose, children: /* @__PURE__ */ jsx(View, { accessibilityRole: "menu", style: styles.list, children: items ? items.map((item, i) => /* @__PURE__ */ jsx(
     MenuItem,
-    __spreadProps(__spreadValues({
-      key: `${item.label}-${i}`
-    }, item), {
+    __spreadProps(__spreadValues({}, item), {
       onPress: () => {
         onClose();
         item.onPress();
       }
-    })
-  )) : children));
+    }),
+    `${item.label}-${i}`
+  )) : children }) });
 }
 function MenuItem({ label, icon: Icon, destructive, onPress, disabled }) {
   const t = useTheme();
   const fg = destructive ? t["--danger-text"] : t["--text-primary"];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "menuitem",
@@ -38,10 +38,12 @@ function MenuItem({ label, icon: Icon, destructive, onPress, disabled }) {
           backgroundColor: pressed && !disabled ? t["--surface-raised"] : t["--surface-default"],
           opacity: disabled ? 0.5 : 1
         }
+      ],
+      children: [
+        Icon ? /* @__PURE__ */ jsx(View, { style: styles.icon, importantForAccessibility: "no", children: /* @__PURE__ */ jsx(Icon, { color: fg, size: 22 }) }) : null,
+        /* @__PURE__ */ jsx(Text, { variant: "label", numberOfLines: 1, style: { flex: 1, color: fg }, children: label })
       ]
-    },
-    Icon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon, importantForAccessibility: "no" }, /* @__PURE__ */ React.createElement(Icon, { color: fg, size: 22 })) : null,
-    /* @__PURE__ */ React.createElement(Text, { variant: "label", numberOfLines: 1, style: { flex: 1, color: fg } }, label)
+    }
   );
 }
 const styles = StyleSheet.create({

package/dist/targets/native/components/modal.js

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { Animated, Modal as RNModal, Pressable, StyleSheet, Text, View } from "react-native";
 import { Button } from "./button.js";
@@ -27,40 +28,48 @@ function Modal({
       opacity.setValue(0);
     }
   }, [visible, scale, opacity]);
-  return /* @__PURE__ */ React.createElement(RNModal, { visible, transparent: true, animationType: "fade", onRequestClose: onCancel }, /* @__PURE__ */ React.createElement(View, { style: styles.root }, /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      style: styles.backdrop,
-      onPress: onCancel,
-      accessibilityRole: "button",
-      accessibilityLabel: "Fechar"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Animated.View,
-    {
-      accessibilityViewIsModal: true,
-      accessibilityRole: "alert",
-      style: [
-        styles.card,
-        {
-          backgroundColor: t["--surface-default"],
-          borderColor: t["--border-default"],
-          opacity,
-          transform: [{ scale }]
-        }
-      ]
-    },
-    /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: t["--text-primary"] }] }, title),
-    description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: t["--text-secondary"] }] }, description) : null,
-    /* @__PURE__ */ React.createElement(View, { style: styles.footer }, /* @__PURE__ */ React.createElement(Button, { label: cancelLabel, variant: "ghost", onPress: onCancel }), /* @__PURE__ */ React.createElement(
-      Button,
+  return /* @__PURE__ */ jsx(RNModal, { visible, transparent: true, animationType: "fade", onRequestClose: onCancel, children: /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: styles.backdrop,
+        onPress: onCancel,
+        accessibilityRole: "button",
+        accessibilityLabel: "Fechar"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Animated.View,
       {
-        label: confirmLabel,
-        variant: destructive ? "danger" : "primary",
-        onPress: onConfirm
+        accessibilityViewIsModal: true,
+        accessibilityRole: "alert",
+        style: [
+          styles.card,
+          {
+            backgroundColor: t["--surface-default"],
+            borderColor: t["--border-default"],
+            opacity,
+            transform: [{ scale }]
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.title, { color: t["--text-primary"] }], children: title }),
+          description ? /* @__PURE__ */ jsx(Text, { style: [styles.description, { color: t["--text-secondary"] }], children: description }) : null,
+          /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+            /* @__PURE__ */ jsx(Button, { label: cancelLabel, variant: "ghost", onPress: onCancel }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                label: confirmLabel,
+                variant: destructive ? "danger" : "primary",
+                onPress: onConfirm
+              }
+            )
+          ] })
+        ]
       }
-    ))
-  )));
+    )
+  ] }) });
 }
 const styles = StyleSheet.create({
   root: {

package/dist/targets/native/components/radio.js

@@ -1,11 +1,12 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, isValidElement, cloneElement } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { Text } from "./text.js";
 import { useTheme } from "./theme.js";
 function Radio({ label, value, selected = false, onSelect, disabled }) {
   const t = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "radio",
@@ -14,23 +15,25 @@ function Radio({ label, value, selected = false, onSelect, disabled }) {
       disabled,
       hitSlop: 8,
       onPress: () => onSelect == null ? void 0 : onSelect(value),
-      style: [styles.row, { opacity: disabled ? 0.5 : 1 }]
-    },
-    /* @__PURE__ */ React.createElement(
-      View,
-      {
-        style: [
-          styles.ring,
-          { borderColor: selected ? t["--brand-primary"] : t["--border-strong"] }
-        ]
-      },
-      selected ? /* @__PURE__ */ React.createElement(View, { style: [styles.dot, { backgroundColor: t["--brand-primary"] }] }) : null
-    ),
-    label ? /* @__PURE__ */ React.createElement(Text, { variant: "body", style: { color: t["--text-primary"] } }, label) : null
+      style: [styles.row, { opacity: disabled ? 0.5 : 1 }],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.ring,
+              { borderColor: selected ? t["--brand-primary"] : t["--border-strong"] }
+            ],
+            children: selected ? /* @__PURE__ */ jsx(View, { style: [styles.dot, { backgroundColor: t["--brand-primary"] }] }) : null
+          }
+        ),
+        label ? /* @__PURE__ */ jsx(Text, { variant: "body", style: { color: t["--text-primary"] }, children: label }) : null
+      ]
+    }
   );
 }
 function RadioGroup({ value, onChange, children, disabled }) {
-  return /* @__PURE__ */ React.createElement(View, { accessibilityRole: "radiogroup", style: styles.group }, Children.map(children, (child) => {
+  return /* @__PURE__ */ jsx(View, { accessibilityRole: "radiogroup", style: styles.group, children: Children.map(children, (child) => {
     var _a;
     if (!isValidElement(child)) return child;
     const el = child;
@@ -39,7 +42,7 @@ function RadioGroup({ value, onChange, children, disabled }) {
       onSelect: onChange,
       disabled: (_a = el.props.disabled) != null ? _a : disabled
     });
-  }));
+  }) });
 }
 const styles = StyleSheet.create({
   group: {