@rojaostudio/ds 1.0.0 → 1.0.2

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

@@ -2,6 +2,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, isValidElement } from "react";
 import { Image, StyleSheet, Text, View } from "react-native";
 import { useTheme } from "./theme.js";
@@ -39,41 +40,47 @@ function Avatar({ name, src, size = "md", status, variant = "brand" }) {
   const showImage = !!src;
   const bg = variant === "brand" ? t["--brand-primary"] : t["--surface-raised"];
   const fg = variant === "brand" ? t["--brand-on-primary"] : t["--text-muted"];
-  return /* @__PURE__ */ React.createElement(View, { style: styles.wrap, accessibilityRole: "image", accessibilityLabel: label }, /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.circle,
-        { width: box, height: box, borderRadius: box / 2, backgroundColor: showImage ? void 0 : bg }
-      ]
-    },
-    showImage ? /* @__PURE__ */ React.createElement(Image, { source: { uri: src }, style: { width: box, height: box }, resizeMode: "cover" }) : /* @__PURE__ */ React.createElement(Text, { style: { color: fg, fontSize: font, fontWeight: "600" }, numberOfLines: 1 }, initials(name != null ? name : "?"))
-  ), status ? /* @__PURE__ */ React.createElement(
-    View,
-    {
-      accessibilityLabel: `status: ${status}`,
-      style: [
-        styles.dot,
-        {
-          width: DOT_SIZE[size],
-          height: DOT_SIZE[size],
-          borderRadius: DOT_SIZE[size] / 2,
-          backgroundColor: (_b = (_a = t[STATUS_TOKEN[status]]) != null ? _a : t["--brand-accent"]) != null ? _b : t["--icon-default"],
-          borderColor: t["--surface-default"]
-        }
-      ]
-    }
-  ) : null);
+  return /* @__PURE__ */ jsxs(View, { style: styles.wrap, accessibilityRole: "image", accessibilityLabel: label, children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.circle,
+          { width: box, height: box, borderRadius: box / 2, backgroundColor: showImage ? void 0 : bg }
+        ],
+        children: showImage ? /* @__PURE__ */ jsx(Image, { source: { uri: src }, style: { width: box, height: box }, resizeMode: "cover" }) : /* @__PURE__ */ jsx(Text, { style: { color: fg, fontSize: font, fontWeight: "600" }, numberOfLines: 1, children: initials(name != null ? name : "?") })
+      }
+    ),
+    status ? /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityLabel: `status: ${status}`,
+        style: [
+          styles.dot,
+          {
+            width: DOT_SIZE[size],
+            height: DOT_SIZE[size],
+            borderRadius: DOT_SIZE[size] / 2,
+            backgroundColor: (_b = (_a = t[STATUS_TOKEN[status]]) != null ? _a : t["--brand-accent"]) != null ? _b : t["--icon-default"],
+            borderColor: t["--surface-default"]
+          }
+        ]
+      }
+    ) : null
+  ] });
 }
 function AvatarGroup({ max = 3, size = "md", children }) {
   const items = Children.toArray(children).filter(isValidElement);
   const visible = items.slice(0, max);
   const overflow = items.length - visible.length;
   const overlap = -Math.round(DIMENSION[size].box * 0.3);
-  return /* @__PURE__ */ React.createElement(View, { style: styles.group, accessibilityRole: "none" }, visible.map((child, idx) => {
-    var _a;
-    return /* @__PURE__ */ React.createElement(View, { key: idx, style: idx === 0 ? void 0 : { marginLeft: overlap } }, /* @__PURE__ */ React.createElement(Avatar, __spreadProps(__spreadValues({}, child.props), { size: (_a = child.props.size) != null ? _a : size })));
-  }), overflow > 0 ? /* @__PURE__ */ React.createElement(View, { style: { marginLeft: overlap } }, /* @__PURE__ */ React.createElement(Avatar, { name: `+${overflow}`, variant: "neutral", size })) : null);
+  return /* @__PURE__ */ jsxs(View, { style: styles.group, accessibilityRole: "none", children: [
+    visible.map((child, idx) => {
+      var _a;
+      return /* @__PURE__ */ jsx(View, { style: idx === 0 ? void 0 : { marginLeft: overlap }, children: /* @__PURE__ */ jsx(Avatar, __spreadProps(__spreadValues({}, child.props), { size: (_a = child.props.size) != null ? _a : size })) }, idx);
+    }),
+    overflow > 0 ? /* @__PURE__ */ jsx(View, { style: { marginLeft: overlap }, children: /* @__PURE__ */ jsx(Avatar, { name: `+${overflow}`, variant: "neutral", size }) }) : null
+  ] });
 }
 const styles = StyleSheet.create({
   wrap: { position: "relative", alignSelf: "flex-start" },

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

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
 import { Text } from "./text.js";
 import { useTheme } from "./theme.js";
@@ -31,15 +32,15 @@ function Badge(props) {
   const t = useTheme();
   const tone = (_a = props.tone) != null ? _a : "neutral";
   if (props.dot) {
-    return /* @__PURE__ */ React.createElement(View, { style: [styles.dot, { backgroundColor: t[DOT_BG[tone]] }], accessibilityRole: "image" });
+    return /* @__PURE__ */ jsx(View, { style: [styles.dot, { backgroundColor: t[DOT_BG[tone]] }], accessibilityRole: "image" });
   }
   if (props.count !== void 0) {
     if (props.count <= 0) return null;
     const max = (_b = props.max) != null ? _b : 99;
     const display = props.count > max ? `${max}+` : String(props.count);
-    return /* @__PURE__ */ React.createElement(View, { style: [styles.count, { backgroundColor: t["--brand-primary"] }] }, /* @__PURE__ */ React.createElement(Text, { variant: "caption", style: { color: t["--brand-on-primary"], fontWeight: "500" } }, display));
+    return /* @__PURE__ */ jsx(View, { style: [styles.count, { backgroundColor: t["--brand-primary"] }], children: /* @__PURE__ */ jsx(Text, { variant: "caption", style: { color: t["--brand-on-primary"], fontWeight: "500" }, children: display }) });
   }
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.badge, { backgroundColor: t[BG[tone]] }] }, /* @__PURE__ */ React.createElement(Text, { variant: "caption", style: { color: t[FG[tone]], fontWeight: "500" } }, props.children));
+  return /* @__PURE__ */ jsx(View, { style: [styles.badge, { backgroundColor: t[BG[tone]] }], children: /* @__PURE__ */ jsx(Text, { variant: "caption", style: { color: t[FG[tone]], fontWeight: "500" }, children: props.children }) });
 }
 const styles = StyleSheet.create({
   badge: { alignSelf: "flex-start", borderRadius: 999, paddingHorizontal: 10, paddingVertical: 4 },

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

@@ -1,7 +1,9 @@
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../../../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement } from "react";
 import {
   ActivityIndicator,
@@ -46,9 +48,9 @@ function Button(_a) {
     ghost: { bg: "transparent", fg: t["--text-primary"], border: void 0 },
     danger: { bg: t["--danger"], fg: "#ffffff", border: void 0 }
   }[variant];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Pressable,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       accessibilityRole: "button",
       accessibilityState: { disabled: !!isDisabled, busy: loading },
       disabled: isDisabled,
@@ -64,8 +66,13 @@ function Button(_a) {
           alignSelf: fullWidth ? "stretch" : "flex-start"
         }
       ]
-    }, rest),
-    loading ? /* @__PURE__ */ React.createElement(ActivityIndicator, { color: skin.fg }) : /* @__PURE__ */ React.createElement(React.Fragment, null, tintIcon(leftIcon, skin.fg), /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: skin.fg }] }, label), tintIcon(rightIcon, skin.fg))
+    }, rest), {
+      children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: skin.fg }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        tintIcon(leftIcon, skin.fg),
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: skin.fg }], children: label }),
+        tintIcon(rightIcon, skin.fg)
+      ] })
+    })
   );
 }
 const styles = StyleSheet.create({

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

@@ -2,12 +2,13 @@ import {
   __objRest,
   __spreadValues
 } from "../../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
 import { useTheme } from "./theme.js";
 function Card(_a) {
   var _b = _a, { style } = _b, rest = __objRest(_b, ["style"]);
   const t = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     View,
     __spreadValues({
       style: [

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

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react-native";
 import { Pressable, StyleSheet, View } from "react-native";
 import { Text } from "./text.js";
@@ -6,7 +7,7 @@ import { useTheme } from "./theme.js";
 function Checkbox({ label, checked, onChange, disabled, indeterminate }) {
   const t = useTheme();
   const active = checked || indeterminate;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "checkbox",
@@ -15,22 +16,24 @@ function Checkbox({ label, checked, onChange, disabled, indeterminate }) {
       disabled,
       hitSlop: 8,
       onPress: () => onChange(!checked),
-      style: [styles.row, { opacity: disabled ? 0.5 : 1 }]
-    },
-    /* @__PURE__ */ React.createElement(
-      View,
-      {
-        style: [
-          styles.box,
+      style: [styles.row, { opacity: disabled ? 0.5 : 1 }],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
           {
-            borderColor: active ? t["--brand-primary"] : t["--border-strong"],
-            backgroundColor: active ? t["--brand-primary"] : "transparent"
+            style: [
+              styles.box,
+              {
+                borderColor: active ? t["--brand-primary"] : t["--border-strong"],
+                backgroundColor: active ? t["--brand-primary"] : "transparent"
+              }
+            ],
+            children: indeterminate ? /* @__PURE__ */ jsx(View, { style: [styles.dash, { backgroundColor: t["--brand-on-primary"] }] }) : checked ? /* @__PURE__ */ jsx(Check, { size: 14, color: t["--brand-on-primary"], strokeWidth: 3 }) : null
           }
-        ]
-      },
-      indeterminate ? /* @__PURE__ */ React.createElement(View, { style: [styles.dash, { backgroundColor: t["--brand-on-primary"] }] }) : checked ? /* @__PURE__ */ React.createElement(Check, { size: 14, color: t["--brand-on-primary"], strokeWidth: 3 }) : null
-    ),
-    label ? /* @__PURE__ */ React.createElement(Text, { variant: "body", style: { color: t["--text-primary"] } }, label) : null
+        ),
+        label ? /* @__PURE__ */ jsx(Text, { variant: "body", style: { color: t["--text-primary"] }, children: label }) : null
+      ]
+    }
   );
 }
 const styles = StyleSheet.create({

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

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable, StyleSheet, View } from "react-native";
 import { X } from "lucide-react-native";
 import { Text } from "./text.js";
@@ -16,7 +17,7 @@ function Chip({
   const bg = selected ? t["--brand-primary"] : subtle ? t["--surface-raised"] : t["--surface-default"];
   const fg = selected ? t["--brand-on-primary"] : t["--text-primary"];
   const border = selected ? t["--brand-primary"] : subtle ? "transparent" : t["--border-default"];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Pressable,
     {
       onPress: disabled ? void 0 : onPress,
@@ -32,22 +33,24 @@ function Chip({
           borderColor: border,
           opacity: disabled ? 0.5 : pressed && onPress ? 0.85 : 1
         }
+      ],
+      children: [
+        leadingIcon != null && /* @__PURE__ */ jsx(View, { style: styles.leading, children: leadingIcon }),
+        /* @__PURE__ */ jsx(Text, { variant: "caption", style: [styles.label, { color: fg }], children: label }),
+        onRemove && /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            onPress: disabled ? void 0 : onRemove,
+            disabled,
+            hitSlop: 8,
+            accessibilityRole: "button",
+            accessibilityLabel: "Remove",
+            style: styles.remove,
+            children: /* @__PURE__ */ jsx(X, { size: 14, color: fg })
+          }
+        )
       ]
-    },
-    leadingIcon != null && /* @__PURE__ */ React.createElement(View, { style: styles.leading }, leadingIcon),
-    /* @__PURE__ */ React.createElement(Text, { variant: "caption", style: [styles.label, { color: fg }] }, label),
-    onRemove && /* @__PURE__ */ React.createElement(
-      Pressable,
-      {
-        onPress: disabled ? void 0 : onRemove,
-        disabled,
-        hitSlop: 8,
-        accessibilityRole: "button",
-        accessibilityLabel: "Remove",
-        style: styles.remove
-      },
-      /* @__PURE__ */ React.createElement(X, { size: 14, color: fg })
-    )
+    }
   );
 }
 const styles = StyleSheet.create({

package/dist/targets/native/components/choice-card.js

@@ -1,10 +1,11 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable, View } from "react-native";
 import { Text } from "./text.js";
 import { useTheme } from "./theme.js";
 function ChoiceCard({ label, description, selected, onSelect }) {
   const t = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Pressable,
     {
       onPress: onSelect,
@@ -22,29 +23,34 @@ function ChoiceCard({ label, description, selected, onSelect }) {
         gap: 12,
         borderColor: selected ? t["--brand-primary"] : t["--border-default"],
         backgroundColor: selected ? t["--surface-raised"] : t["--surface-default"]
-      }
-    },
-    /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { variant: "label" }, label), description ? /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "muted" }, description) : null),
-    /* @__PURE__ */ React.createElement(
-      View,
-      {
-        style: {
-          width: 20,
-          height: 20,
-          borderRadius: 10,
-          borderWidth: 2,
-          alignItems: "center",
-          justifyContent: "center",
-          borderColor: selected ? t["--brand-primary"] : t["--border-strong"]
-        }
       },
-      selected ? /* @__PURE__ */ React.createElement(
-        View,
-        {
-          style: { width: 10, height: 10, borderRadius: 5, backgroundColor: t["--brand-primary"] }
-        }
-      ) : null
-    )
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { variant: "label", children: label }),
+          description ? /* @__PURE__ */ jsx(Text, { variant: "caption", color: "muted", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: 10,
+              borderWidth: 2,
+              alignItems: "center",
+              justifyContent: "center",
+              borderColor: selected ? t["--brand-primary"] : t["--border-strong"]
+            },
+            children: selected ? /* @__PURE__ */ jsx(
+              View,
+              {
+                style: { width: 10, height: 10, borderRadius: 5, backgroundColor: t["--brand-primary"] }
+              }
+            ) : null
+          }
+        )
+      ]
+    }
   );
 }
 export {

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

@@ -1,18 +1,22 @@
 import "../../../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Pressable } from "react-native";
 import { Menu } from "./menu.js";
 function ContextMenu({ items, children }) {
   const [visible, setVisible] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      onLongPress: () => setVisible(true),
-      accessibilityHint: "Mantenha pressionado para abrir as a\xE7\xF5es",
-      delayLongPress: 350
-    },
-    children
-  ), /* @__PURE__ */ React.createElement(Menu, { visible, onClose: () => setVisible(false), items }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onLongPress: () => setVisible(true),
+        accessibilityHint: "Mantenha pressionado para abrir as a\xE7\xF5es",
+        delayLongPress: 350,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu, { visible, onClose: () => setVisible(false), items })
+  ] });
 }
 export {
   ContextMenu

package/dist/targets/native/components/currency-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 { StyleSheet, TextInput, View } from "react-native";
 import { Text } from "./text.js";
@@ -51,7 +52,7 @@ function CurrencyInput(_a) {
     const digits = text.replace(/\D/g, "").slice(0, 12);
     onChangeValueCents(digits ? parseInt(digits, 10) : 0);
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     View,
     {
       style: [
@@ -62,31 +63,33 @@ function CurrencyInput(_a) {
           opacity: disabled ? 0.5 : 1
         },
         style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Text, { variant: "body", color: "muted", style: { marginRight: 6 }, children: currency }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          __spreadValues({
+            value: display,
+            onChangeText: handle,
+            keyboardType: "number-pad",
+            editable: !disabled,
+            accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : label,
+            accessibilityState: { disabled: !!disabled },
+            selectTextOnFocus: true,
+            placeholderTextColor: t["--text-placeholder"],
+            onFocus: (e) => {
+              setFocused(true);
+              onFocus == null ? void 0 : onFocus(e);
+            },
+            onBlur: (e) => {
+              setFocused(false);
+              onBlur == null ? void 0 : onBlur(e);
+            },
+            style: [styles.input, { color: disabled ? t["--text-disabled"] : t["--text-primary"] }]
+          }, rest)
+        )
       ]
-    },
-    /* @__PURE__ */ React.createElement(Text, { variant: "body", color: "muted", style: { marginRight: 6 } }, currency),
-    /* @__PURE__ */ React.createElement(
-      TextInput,
-      __spreadValues({
-        value: display,
-        onChangeText: handle,
-        keyboardType: "number-pad",
-        editable: !disabled,
-        accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : label,
-        accessibilityState: { disabled: !!disabled },
-        selectTextOnFocus: true,
-        placeholderTextColor: t["--text-placeholder"],
-        onFocus: (e) => {
-          setFocused(true);
-          onFocus == null ? void 0 : onFocus(e);
-        },
-        onBlur: (e) => {
-          setFocused(false);
-          onBlur == null ? void 0 : onBlur(e);
-        },
-        style: [styles.input, { color: disabled ? t["--text-disabled"] : t["--text-primary"] }]
-      }, rest)
-    )
+    }
   );
 }
 const styles = StyleSheet.create({

package/dist/targets/native/components/danger-zone.js

@@ -1,20 +1,26 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
 import { Text } from "./text.js";
 import { useTheme } from "./theme.js";
 function DangerZone({ title, description, children, style }) {
   const t = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     View,
     {
       style: [
         styles.box,
         { backgroundColor: t["--danger-soft"], borderColor: t["--danger-border"] },
         style
+      ],
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          title ? /* @__PURE__ */ jsx(Text, { variant: "label", color: "danger", children: title }) : null,
+          description ? /* @__PURE__ */ jsx(Text, { variant: "caption", color: "danger", style: styles.description, children: description }) : null
+        ] }),
+        children
       ]
-    },
-    (title || description) && /* @__PURE__ */ React.createElement(View, { style: styles.header }, title ? /* @__PURE__ */ React.createElement(Text, { variant: "label", color: "danger" }, title) : null, description ? /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "danger", style: styles.description }, description) : null),
-    children
+    }
   );
 }
 const styles = StyleSheet.create({

package/dist/targets/native/components/date-picker.js

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Calendar, ChevronLeft, ChevronRight } from "lucide-react-native";
 import { useState } from "react";
 import { Modal, Pressable, StyleSheet, View } from "react-native";
@@ -76,79 +77,94 @@ function DatePicker({ value, onChange, min, max, placeholder, disabled }) {
     setOpen(false);
   }
   const cells = monthGrid(viewYear, viewMonth);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      onPress: openPicker,
-      disabled,
-      accessibilityRole: "button",
-      accessibilityLabel: value ? `Data: ${formatLong(value)}` : placeholder != null ? placeholder : "Selecione uma data",
-      accessibilityState: { disabled: !!disabled },
-      style: [
-        styles.field,
-        {
-          borderColor: t["--border-default"],
-          backgroundColor: t["--surface-default"],
-          opacity: disabled ? 0.5 : 1
-        }
-      ]
-    },
-    /* @__PURE__ */ React.createElement(Text, { variant: "body", color: value ? "primary" : "muted", style: { flex: 1 } }, value ? formatDate(value) : placeholder != null ? placeholder : "Selecione uma data"),
-    /* @__PURE__ */ React.createElement(Calendar, { size: 20, color: t["--text-muted"] })
-  ), /* @__PURE__ */ React.createElement(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: () => setOpen(false) }, /* @__PURE__ */ React.createElement(Pressable, { style: styles.backdrop, onPress: () => setOpen(false) }, /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      style: [styles.card, { backgroundColor: t["--surface-default"] }],
-      onPress: (e) => e.stopPropagation(),
-      accessibilityViewIsModal: true
-    },
-    /* @__PURE__ */ React.createElement(View, { style: styles.header }, /* @__PURE__ */ React.createElement(Pressable, { onPress: () => shiftMonth(-1), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "M\xEAs anterior", style: styles.navBtn }, /* @__PURE__ */ React.createElement(ChevronLeft, { size: 22, color: t["--text-primary"] })), /* @__PURE__ */ React.createElement(Text, { variant: "label" }, MONTHS[viewMonth], " ", viewYear), /* @__PURE__ */ React.createElement(Pressable, { onPress: () => shiftMonth(1), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Pr\xF3ximo m\xEAs", style: styles.navBtn }, /* @__PURE__ */ React.createElement(ChevronRight, { size: 22, color: t["--text-primary"] }))),
-    /* @__PURE__ */ React.createElement(View, { style: styles.week }, WEEKDAYS.map((w, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: styles.cell }, /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "muted" }, w)))),
-    /* @__PURE__ */ React.createElement(View, { style: styles.grid }, cells.map((d, i) => {
-      if (!d) return /* @__PURE__ */ React.createElement(View, { key: i, style: styles.cell });
-      const selected = value ? sameDay(d, value) : false;
-      const off = isDisabled(d);
-      return /* @__PURE__ */ React.createElement(
-        Pressable,
-        {
-          key: i,
-          onPress: () => pick(d),
-          disabled: off,
-          accessibilityRole: "button",
-          accessibilityLabel: formatLong(d),
-          accessibilityState: { selected, disabled: off },
-          style: [
-            styles.cell,
-            styles.day,
-            selected ? { backgroundColor: t["--brand-primary"] } : null
-          ]
-        },
-        /* @__PURE__ */ React.createElement(
-          Text,
-          {
-            variant: "body-sm",
-            style: {
-              color: selected ? t["--brand-on-primary"] : off ? t["--text-placeholder"] : t["--text-primary"]
-            }
-          },
-          d.getDate()
-        )
-      );
-    })),
-    value && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
       Pressable,
       {
-        onPress: () => {
-          onChange(null);
-          setOpen(false);
-        },
+        onPress: openPicker,
+        disabled,
         accessibilityRole: "button",
-        accessibilityLabel: "Limpar data",
-        style: styles.clear
-      },
-      /* @__PURE__ */ React.createElement(Text, { variant: "body-sm", color: "muted" }, "Limpar")
-    )
-  ))));
+        accessibilityLabel: value ? `Data: ${formatLong(value)}` : placeholder != null ? placeholder : "Selecione uma data",
+        accessibilityState: { disabled: !!disabled },
+        style: [
+          styles.field,
+          {
+            borderColor: t["--border-default"],
+            backgroundColor: t["--surface-default"],
+            opacity: disabled ? 0.5 : 1
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", color: value ? "primary" : "muted", style: { flex: 1 }, children: value ? formatDate(value) : placeholder != null ? placeholder : "Selecione uma data" }),
+          /* @__PURE__ */ jsx(Calendar, { size: 20, color: t["--text-muted"] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: () => setOpen(false), children: /* @__PURE__ */ jsx(Pressable, { style: styles.backdrop, onPress: () => setOpen(false), children: /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        style: [styles.card, { backgroundColor: t["--surface-default"] }],
+        onPress: (e) => e.stopPropagation(),
+        accessibilityViewIsModal: true,
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => shiftMonth(-1), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "M\xEAs anterior", style: styles.navBtn, children: /* @__PURE__ */ jsx(ChevronLeft, { size: 22, color: t["--text-primary"] }) }),
+            /* @__PURE__ */ jsxs(Text, { variant: "label", children: [
+              MONTHS[viewMonth],
+              " ",
+              viewYear
+            ] }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => shiftMonth(1), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Pr\xF3ximo m\xEAs", style: styles.navBtn, children: /* @__PURE__ */ jsx(ChevronRight, { size: 22, color: t["--text-primary"] }) })
+          ] }),
+          /* @__PURE__ */ jsx(View, { style: styles.week, children: WEEKDAYS.map((w, i) => /* @__PURE__ */ jsx(View, { style: styles.cell, children: /* @__PURE__ */ jsx(Text, { variant: "caption", color: "muted", children: w }) }, i)) }),
+          /* @__PURE__ */ jsx(View, { style: styles.grid, children: cells.map((d, i) => {
+            if (!d) return /* @__PURE__ */ jsx(View, { style: styles.cell }, i);
+            const selected = value ? sameDay(d, value) : false;
+            const off = isDisabled(d);
+            return /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: () => pick(d),
+                disabled: off,
+                accessibilityRole: "button",
+                accessibilityLabel: formatLong(d),
+                accessibilityState: { selected, disabled: off },
+                style: [
+                  styles.cell,
+                  styles.day,
+                  selected ? { backgroundColor: t["--brand-primary"] } : null
+                ],
+                children: /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    variant: "body-sm",
+                    style: {
+                      color: selected ? t["--brand-on-primary"] : off ? t["--text-placeholder"] : t["--text-primary"]
+                    },
+                    children: d.getDate()
+                  }
+                )
+              },
+              i
+            );
+          }) }),
+          value && /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              onPress: () => {
+                onChange(null);
+                setOpen(false);
+              },
+              accessibilityRole: "button",
+              accessibilityLabel: "Limpar data",
+              style: styles.clear,
+              children: /* @__PURE__ */ jsx(Text, { variant: "body-sm", color: "muted", children: "Limpar" })
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
 }
 const styles = StyleSheet.create({
   field: {