@rojaostudio/ds 1.0.0

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

@@ -0,0 +1,58 @@
+import "../../../chunk-ORMEWXMH.js";
+import { CheckCircle, AlertCircle, AlertTriangle, Info, X } from "lucide-react-native";
+import { Pressable, StyleSheet, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+const VARIANTS = {
+  success: { soft: "--success-soft", border: "--success-border", text: "--success-text", icon: CheckCircle },
+  danger: { soft: "--danger-soft", border: "--danger-border", text: "--danger-text", icon: AlertCircle },
+  warning: { soft: "--warning-soft", border: "--warning-border", text: "--warning-text", icon: AlertTriangle },
+  info: { soft: "--info-soft", border: "--info-border", text: "--info-text", icon: Info }
+};
+function Alert({ variant = "info", title, children, onClose, hideIcon = false }) {
+  var _a, _b, _c;
+  const t = useTheme();
+  const spec = VARIANTS[variant];
+  const bg = (_a = t[spec.soft]) != null ? _a : t["--surface-raised"];
+  const border = (_b = t[spec.border]) != null ? _b : t["--border-default"];
+  const fg = (_c = t[spec.text]) != null ? _c : t["--text-primary"];
+  const Icon = spec.icon;
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      accessibilityRole: variant === "danger" ? "alert" : "summary",
+      style: [styles.container, { backgroundColor: bg, borderColor: border }]
+    },
+    !hideIcon && /* @__PURE__ */ React.createElement(Icon, { size: 18, color: fg, style: styles.icon }),
+    /* @__PURE__ */ React.createElement(View, { style: styles.body }, title != null && /* @__PURE__ */ React.createElement(Text, { variant: "label", style: { color: fg } }, title), children != null && (typeof children === "string" ? /* @__PURE__ */ React.createElement(Text, { variant: "body-sm", style: [{ color: fg }, title != null && styles.childrenSpacing] }, children) : /* @__PURE__ */ React.createElement(View, { style: title != null ? styles.childrenSpacing : void 0 }, children))),
+    onClose != null && /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Fechar",
+        hitSlop: 12,
+        onPress: onClose,
+        style: ({ pressed }) => [styles.close, { opacity: pressed ? 0.6 : 1 }]
+      },
+      /* @__PURE__ */ React.createElement(X, { size: 16, color: fg })
+    )
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 12,
+    borderWidth: 1
+  },
+  icon: { marginTop: 1 },
+  body: { flex: 1, minWidth: 0 },
+  childrenSpacing: { marginTop: 2 },
+  close: { padding: 2 }
+});
+export {
+  Alert
+};

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

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarStatus = 'active' | 'inactive' | 'pending' | 'error';
+interface AvatarProps {
+    /** Nome completo — gera iniciais (até 2 letras) quando não há `src`. */
+    name?: string;
+    src?: string;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    /** Cor de fundo. default = brand. */
+    variant?: 'brand' | 'neutral';
+}
+declare function initials(name: string): string;
+declare function Avatar({ name, src, size, status, variant }: AvatarProps): react.JSX.Element;
+interface AvatarGroupProps {
+    /** Máximo de avatares visíveis; o resto vira `+N`. default = 3. */
+    max?: number;
+    size?: AvatarSize;
+    children: ReactNode;
+}
+declare function AvatarGroup({ max, size, children }: AvatarGroupProps): react.JSX.Element;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, initials };

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

@@ -0,0 +1,88 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+import { Children, isValidElement } from "react";
+import { Image, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "./theme.js";
+const DIMENSION = {
+  xs: { box: 24, font: 10 },
+  sm: { box: 32, font: 12 },
+  md: { box: 40, font: 14 },
+  lg: { box: 48, font: 16 },
+  xl: { box: 64, font: 20 }
+};
+const DOT_SIZE = {
+  xs: 6,
+  sm: 8,
+  md: 10,
+  lg: 12,
+  xl: 14
+};
+const STATUS_TOKEN = {
+  active: "--success",
+  inactive: "--text-muted",
+  pending: "--warning",
+  error: "--danger"
+};
+function initials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function Avatar({ name, src, size = "md", status, variant = "brand" }) {
+  var _a, _b;
+  const t = useTheme();
+  const { box, font } = DIMENSION[size];
+  const label = name != null ? name : "Avatar";
+  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);
+}
+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);
+}
+const styles = StyleSheet.create({
+  wrap: { position: "relative", alignSelf: "flex-start" },
+  circle: { alignItems: "center", justifyContent: "center", overflow: "hidden" },
+  dot: { position: "absolute", bottom: 0, right: 0, borderWidth: 2 },
+  group: { flexDirection: "row", alignItems: "center", alignSelf: "flex-start" }
+});
+export {
+  Avatar,
+  AvatarGroup,
+  initials
+};

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

@@ -0,0 +1,27 @@
+import * as react from 'react';
+
+type BadgeTone = 'neutral' | 'brand' | 'danger' | 'success' | 'warning' | 'info';
+type CommonProps = {
+    tone?: BadgeTone;
+};
+type LabelProps = CommonProps & {
+    dot?: false;
+    count?: undefined;
+    children: string;
+};
+type DotProps = CommonProps & {
+    dot: true;
+    count?: undefined;
+    children?: undefined;
+};
+type CountProps = CommonProps & {
+    dot?: false;
+    count: number;
+    /** Limite pra count overflow. default = 99. */
+    max?: number;
+    children?: undefined;
+};
+type BadgeProps = LabelProps | DotProps | CountProps;
+declare function Badge(props: BadgeProps): react.JSX.Element | null;
+
+export { Badge, type BadgeProps, type BadgeTone };

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

@@ -0,0 +1,59 @@
+import "../../../chunk-ORMEWXMH.js";
+import { StyleSheet, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+const BG = {
+  neutral: "--neutral-soft",
+  brand: "--brand-secondary",
+  danger: "--danger-soft",
+  success: "--success-soft",
+  warning: "--warning-soft",
+  info: "--info-soft"
+};
+const FG = {
+  neutral: "--neutral-text",
+  brand: "--brand-on-secondary",
+  danger: "--danger-text",
+  success: "--success-text",
+  warning: "--warning-text",
+  info: "--info-text"
+};
+const DOT_BG = {
+  neutral: "--neutral",
+  brand: "--brand-primary",
+  danger: "--danger",
+  success: "--success",
+  warning: "--warning",
+  info: "--info"
+};
+function Badge(props) {
+  var _a, _b;
+  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" });
+  }
+  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__ */ 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));
+}
+const styles = StyleSheet.create({
+  badge: { alignSelf: "flex-start", borderRadius: 999, paddingHorizontal: 10, paddingVertical: 4 },
+  dot: { alignSelf: "flex-start", width: 10, height: 10, borderRadius: 999 },
+  count: {
+    alignSelf: "flex-start",
+    minWidth: 20,
+    height: 20,
+    borderRadius: 999,
+    paddingHorizontal: 6,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export {
+  Badge
+};

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

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { PressableProps } from 'react-native';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type Props = Omit<PressableProps, 'children' | 'style'> & {
+    label: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    fullWidth?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+};
+declare function Button({ label, variant, size, loading, disabled, fullWidth, leftIcon, rightIcon, ...rest }: Props): react.JSX.Element;
+
+export { Button, type ButtonSize, type ButtonVariant };

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

@@ -0,0 +1,84 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+import { cloneElement, isValidElement } from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text
+} from "react-native";
+import { useTheme } from "./theme.js";
+function tintIcon(icon, color) {
+  var _a, _b;
+  if (!isValidElement(icon)) return icon != null ? icon : null;
+  const el = icon;
+  return cloneElement(el, { color: (_a = el.props.color) != null ? _a : color, size: (_b = el.props.size) != null ? _b : 18 });
+}
+const HEIGHT = { sm: 40, md: 48, lg: 56 };
+function Button(_a) {
+  var _b = _a, {
+    label,
+    variant = "primary",
+    size = "md",
+    loading = false,
+    disabled,
+    fullWidth,
+    leftIcon,
+    rightIcon
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "variant",
+    "size",
+    "loading",
+    "disabled",
+    "fullWidth",
+    "leftIcon",
+    "rightIcon"
+  ]);
+  const t = useTheme();
+  const isDisabled = disabled || loading;
+  const skin = {
+    primary: { bg: t["--brand-primary"], fg: t["--brand-on-primary"], border: void 0 },
+    secondary: { bg: t["--brand-secondary"], fg: t["--brand-on-secondary"], border: void 0 },
+    outline: { bg: t["--surface-default"], fg: t["--text-primary"], border: t["--border-default"] },
+    ghost: { bg: "transparent", fg: t["--text-primary"], border: void 0 },
+    danger: { bg: t["--danger"], fg: "#ffffff", border: void 0 }
+  }[variant];
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    __spreadValues({
+      accessibilityRole: "button",
+      accessibilityState: { disabled: !!isDisabled, busy: loading },
+      disabled: isDisabled,
+      hitSlop: 8,
+      style: ({ pressed }) => [
+        styles.base,
+        {
+          height: HEIGHT[size],
+          backgroundColor: skin.bg,
+          borderColor: skin.border,
+          borderWidth: skin.border ? 1 : 0,
+          opacity: isDisabled ? 0.5 : pressed ? 0.8 : 1,
+          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))
+  );
+}
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    borderRadius: 12,
+    paddingHorizontal: 20
+  },
+  label: { fontSize: 16, fontWeight: "600" }
+});
+export {
+  Button
+};

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

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { ViewProps } from 'react-native';
+
+declare function Card({ style, ...rest }: ViewProps): react.JSX.Element;
+
+export { Card };

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

@@ -0,0 +1,36 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+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(
+    View,
+    __spreadValues({
+      style: [
+        styles.card,
+        { backgroundColor: t["--surface-default"], borderColor: t["--border-subtle"] },
+        style
+      ]
+    }, rest)
+  );
+}
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 16,
+    // elevação sutil (iOS shadow* + Android elevation)
+    shadowColor: "#000000",
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 1
+  }
+});
+export {
+  Card
+};

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

@@ -0,0 +1,12 @@
+import * as react from 'react';
+
+type Props = {
+    label?: string;
+    checked: boolean;
+    onChange: (next: boolean) => void;
+    disabled?: boolean;
+    indeterminate?: boolean;
+};
+declare function Checkbox({ label, checked, onChange, disabled, indeterminate }: Props): react.JSX.Element;
+
+export { Checkbox };

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

@@ -0,0 +1,59 @@
+import "../../../chunk-ORMEWXMH.js";
+import { Check } from "lucide-react-native";
+import { Pressable, StyleSheet, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+function Checkbox({ label, checked, onChange, disabled, indeterminate }) {
+  const t = useTheme();
+  const active = checked || indeterminate;
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      accessibilityRole: "checkbox",
+      accessibilityState: { checked: indeterminate ? "mixed" : checked, disabled: !!disabled },
+      accessibilityLabel: label,
+      disabled,
+      hitSlop: 8,
+      onPress: () => onChange(!checked),
+      style: [styles.row, { opacity: disabled ? 0.5 : 1 }]
+    },
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          styles.box,
+          {
+            borderColor: active ? t["--brand-primary"] : t["--border-strong"],
+            backgroundColor: active ? t["--brand-primary"] : "transparent"
+          }
+        ]
+      },
+      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
+  );
+}
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    minHeight: 44
+  },
+  box: {
+    width: 20,
+    height: 20,
+    borderRadius: 6,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dash: {
+    width: 10,
+    height: 2,
+    borderRadius: 1
+  }
+});
+export {
+  Checkbox
+};

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

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type Props = {
+    label: string;
+    onPress?: () => void;
+    selected?: boolean;
+    onRemove?: () => void;
+    /** Leading slot — ícone (lucide-react-native) ou qualquer nó. */
+    leadingIcon?: ReactNode;
+    /** Sem borda, fundo discreto (surface-raised). */
+    subtle?: boolean;
+    disabled?: boolean;
+};
+declare function Chip({ label, onPress, selected, onRemove, leadingIcon, subtle, disabled, }: Props): react.JSX.Element;
+
+export { Chip };

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

@@ -0,0 +1,77 @@
+import "../../../chunk-ORMEWXMH.js";
+import { Pressable, StyleSheet, View } from "react-native";
+import { X } from "lucide-react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+function Chip({
+  label,
+  onPress,
+  selected = false,
+  onRemove,
+  leadingIcon,
+  subtle = false,
+  disabled = false
+}) {
+  const t = useTheme();
+  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(
+    Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled: disabled || !onPress,
+      hitSlop: 8,
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { selected, disabled: !!disabled },
+      style: ({ pressed }) => [
+        styles.chip,
+        {
+          backgroundColor: bg,
+          borderColor: border,
+          opacity: disabled ? 0.5 : pressed && onPress ? 0.85 : 1
+        }
+      ]
+    },
+    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({
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    minHeight: 32,
+    paddingHorizontal: 12,
+    borderRadius: 999,
+    borderWidth: 1,
+    alignSelf: "flex-start"
+  },
+  leading: {
+    marginLeft: -2
+  },
+  label: {
+    fontWeight: "500"
+  },
+  remove: {
+    marginRight: -4,
+    marginLeft: 2
+  }
+});
+export {
+  Chip
+};

package/dist/targets/native/components/choice-card.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+
+type Props = {
+    label: string;
+    description?: string;
+    selected: boolean;
+    onSelect: () => void;
+};
+declare function ChoiceCard({ label, description, selected, onSelect }: Props): react.JSX.Element;
+
+export { ChoiceCard };

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

@@ -0,0 +1,52 @@
+import "../../../chunk-ORMEWXMH.js";
+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(
+    Pressable,
+    {
+      onPress: onSelect,
+      accessibilityRole: "radio",
+      accessibilityState: { selected },
+      style: {
+        minHeight: 56,
+        borderRadius: 12,
+        borderWidth: 1.5,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        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
+    )
+  );
+}
+export {
+  ChoiceCard
+};

package/dist/targets/native/components/context-menu.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+import { MenuItem } from './menu.js';
+
+type Props = {
+    items: MenuItem[];
+    children: ReactElement;
+};
+declare function ContextMenu({ items, children }: Props): react.JSX.Element;
+
+export { ContextMenu };

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

@@ -0,0 +1,19 @@
+import "../../../chunk-ORMEWXMH.js";
+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 }));
+}
+export {
+  ContextMenu
+};