@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/whatsapp-template.js

@@ -0,0 +1,69 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLinkIcon, MoreVerticalIcon, PhoneIcon, ReplyIcon } from "./internal/icons.js";
+import { useWhatsAppPlatform } from "./internal/whatsapp.js";
+function WhatsAppTemplate(_a) {
+  var _b = _a, {
+    children,
+    header = "none",
+    headerText,
+    image,
+    body,
+    footer,
+    time = "11:59",
+    platform,
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "header",
+    "headerText",
+    "image",
+    "body",
+    "footer",
+    "time",
+    "platform",
+    "className"
+  ]);
+  const finalPlatform = useWhatsAppPlatform(platform);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-whatsapp-template", `rds-whatsapp--${finalPlatform}`, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: ["rds-whatsapp-template__content", header === "image" && "rds-whatsapp-template__content--image"].filter(Boolean).join(" "), children: [
+      header === "image" && /* @__PURE__ */ jsx("div", { className: "rds-whatsapp-template__image", children: image }),
+      header === "text" && headerText && /* @__PURE__ */ jsx("p", { className: "rds-whatsapp-template__header", children: headerText }),
+      /* @__PURE__ */ jsxs("div", { className: "rds-whatsapp-template__text", children: [
+        /* @__PURE__ */ jsx("p", { className: "rds-whatsapp-template__body", children: body }),
+        footer && /* @__PURE__ */ jsx("p", { className: "rds-whatsapp-template__footer", children: footer }),
+        /* @__PURE__ */ jsx("p", { className: "rds-whatsapp-template__time", children: time })
+      ] })
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: "rds-whatsapp-template__buttons", children })
+  ] }));
+}
+const BUTTON_ICONS = {
+  "quick-reply": ReplyIcon,
+  url: ExternalLinkIcon,
+  phone: PhoneIcon,
+  "all-options": MoreVerticalIcon
+};
+function WhatsAppTemplateButton(_c) {
+  var _d = _c, { children, type = "quick-reply", status = "default", className } = _d, rest = __objRest(_d, ["children", "type", "status", "className"]);
+  const Icon = BUTTON_ICONS[type];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-whatsapp-template__button", status === "used" && "rds-whatsapp-template__button--used", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-template__button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+        /* @__PURE__ */ jsx("span", { children: children != null ? children : type === "all-options" ? "Ver todas as op\xE7\xF5es" : null })
+      ]
+    })
+  );
+}
+export {
+  WhatsAppTemplate,
+  WhatsAppTemplateButton
+};

package/dist/icons/index.d.ts

@@ -1 +1,3 @@
 export { AlertCircle, AlertTriangle, BarChart2, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, DollarSign, ExternalLink, FileText, GripVertical, House, Kanban, Layers, LayoutGrid, LayoutList, Loader2, LogOut, LucideIcon, LucideProps, Megaphone, Menu, MessagesSquare, Moon, Package, PanelLeftClose, PanelLeftOpen, Pencil, Plug, Plus, RefreshCw, Search, Settings, Star, Store, Sun, ThumbsUp, Trash2, Upload, Users, Wallet, X, Zap } from 'lucide-react';
+export { PixIcon, PixIconProps } from './pix.js';
+import 'react';

package/dist/icons/index.js

@@ -43,6 +43,7 @@ import {
   X,
   Zap
 } from "lucide-react";
+import { PixIcon } from "./pix.js";
 export {
   AlertCircle,
   AlertTriangle,
@@ -71,6 +72,7 @@ export {
   PanelLeftClose,
   PanelLeftOpen,
   Pencil,
+  PixIcon,
   Plug,
   Plus,
   RefreshCw,

package/dist/icons/pix.d.ts

@@ -0,0 +1,16 @@
+import 'lucide-react';
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+interface PixIconProps extends SVGProps<SVGSVGElement> {
+    /** Width and height in px. Default 16. */
+    size?: number;
+}
+/**
+ * The Pix symbol (Banco Central do Brasil), monochrome: it takes the text colour (currentColor), so it sits with
+ * the other payment-method icons. Decorative by default (aria-hidden); name it with aria-label and role="img" when
+ * it stands alone. The coloured version belongs to brand contexts, not to UI.
+ */
+declare function PixIcon({ size, ...props }: PixIconProps): react.JSX.Element;
+
+export { PixIcon, type PixIconProps };

package/dist/icons/pix.js

@@ -0,0 +1,29 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PixIcon(_a) {
+  var _b = _a, { size = 16 } = _b, props = __objRest(_b, ["size"]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: size,
+      height: size,
+      viewBox: "0 0 512 512",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M242.4 292.5c5.4-5.4 14.7-5.4 20.1 0l77 77c14.2 14.2 33.1 22 53.1 22h15.1l-97.1 97.1c-30.3 30.3-79.5 30.3-109.8 0L103.3 391.2h9.3c20 0 38.9-7.8 53.1-22l76.7-76.7z" }),
+        /* @__PURE__ */ jsx("path", { d: "M262.5 218.9c-5.4 5.4-14.7 5.4-20.1 0l-76.7-76.7c-14.2-14.2-33.1-22-53.1-22h-9.3l97.4-97.4c30.3-30.3 79.5-30.3 109.8 0l97.1 97.1h-15.1c-20 0-38.9 7.8-53.1 22l-77 77z" }),
+        /* @__PURE__ */ jsx("path", { d: "M112.6 142.7c13.8 0 27.4 5.6 37.2 15.4l76.7 76.7c7.3 7.3 17 10.9 26.6 10.9s19.3-3.6 26.6-10.9l77-77c9.8-9.8 23.4-15.4 37.2-15.4h37.2l58.4 58.4c30.3 30.3 30.3 79.5 0 109.8l-58.4 58.4h-37.2c-13.8 0-27.4-5.6-37.2-15.4l-77-77c-14.2-14.2-39-14.2-53.2 0l-76.7 76.7c-9.8 9.8-23.4 15.4-37.2 15.4H75.4L17 310.7c-30.3-30.3-30.3-79.5 0-109.8l58.4-58.4h37.2z" })
+      ]
+    })
+  );
+}
+export {
+  PixIcon
+};

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

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react-native";
 import {
   createContext,
@@ -33,16 +34,16 @@ function Accordion({ children, allowMultiple = false }) {
     },
     [allowMultiple]
   );
-  return /* @__PURE__ */ React.createElement(AccordionContext.Provider, { value: { notifyOpen, register, allowMultiple } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { notifyOpen, register, allowMultiple }, children: /* @__PURE__ */ jsx(
     View,
     {
       style: [
         styles.group,
         { borderColor: t["--border-default"], backgroundColor: t["--surface-default"] }
-      ]
-    },
-    children
-  ));
+      ],
+      children
+    }
+  ) });
 }
 let nextId = 0;
 function AccordionItem({ title, children, defaultOpen = false, disabled = false }) {
@@ -72,26 +73,31 @@ function AccordionItem({ title, children, defaultOpen = false, disabled = false
     });
   }, [ctx]);
   const spin = rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] });
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.item, { borderBottomColor: t["--border-default"] }] }, /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityState: { expanded: open, disabled },
-      accessibilityLabel: title,
-      disabled,
-      hitSlop: 4,
-      onPress: toggle,
-      style: ({ pressed }) => [
-        styles.header,
-        {
-          backgroundColor: pressed && !disabled ? t["--surface-raised"] : "transparent",
-          opacity: disabled ? 0.5 : 1
-        }
-      ]
-    },
-    /* @__PURE__ */ React.createElement(Text, { variant: "label", style: styles.title, numberOfLines: 1 }, title),
-    /* @__PURE__ */ React.createElement(Animated.View, { style: { transform: [{ rotate: spin }] } }, /* @__PURE__ */ React.createElement(ChevronDown, { size: 20, color: t["--text-muted"] }))
-  ), open ? /* @__PURE__ */ React.createElement(View, { style: styles.body }, typeof children === "string" ? /* @__PURE__ */ React.createElement(Text, { variant: "body-sm", color: "secondary" }, children) : children) : null);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.item, { borderBottomColor: t["--border-default"] }], children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityState: { expanded: open, disabled },
+        accessibilityLabel: title,
+        disabled,
+        hitSlop: 4,
+        onPress: toggle,
+        style: ({ pressed }) => [
+          styles.header,
+          {
+            backgroundColor: pressed && !disabled ? t["--surface-raised"] : "transparent",
+            opacity: disabled ? 0.5 : 1
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Text, { variant: "label", style: styles.title, numberOfLines: 1, children: title }),
+          /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ rotate: spin }] }, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20, color: t["--text-muted"] }) })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(View, { style: styles.body, children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { variant: "body-sm", color: "secondary", children }) : children }) : null
+  ] });
 }
 const styles = StyleSheet.create({
   group: {

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

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircle, AlertCircle, AlertTriangle, Info, X } from "lucide-react-native";
 import { Pressable, StyleSheet, View } from "react-native";
 import { Text } from "./text.js";
@@ -17,25 +18,30 @@ function Alert({ variant = "info", title, children, onClose, hideIcon = false })
   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(
+  return /* @__PURE__ */ jsxs(
     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 })
-    )
+      style: [styles.container, { backgroundColor: bg, borderColor: border }],
+      children: [
+        !hideIcon && /* @__PURE__ */ jsx(Icon, { size: 18, color: fg, style: styles.icon }),
+        /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+          title != null && /* @__PURE__ */ jsx(Text, { variant: "label", style: { color: fg }, children: title }),
+          children != null && (typeof children === "string" ? /* @__PURE__ */ jsx(Text, { variant: "body-sm", style: [{ color: fg }, title != null && styles.childrenSpacing], children }) : /* @__PURE__ */ jsx(View, { style: title != null ? styles.childrenSpacing : void 0, children }))
+        ] }),
+        onClose != null && /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Fechar",
+            hitSlop: 12,
+            onPress: onClose,
+            style: ({ pressed }) => [styles.close, { opacity: pressed ? 0.6 : 1 }],
+            children: /* @__PURE__ */ jsx(X, { size: 16, color: fg })
+          }
+        )
+      ]
+    }
   );
 }
 const styles = StyleSheet.create({

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 {