@rojaostudio/ds 1.0.0 → 1.0.2

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

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown } from "lucide-react-native";
 import { useState } from "react";
 import { Pressable, ScrollView } from "react-native";
@@ -16,70 +17,77 @@ function Select({
   const t = useTheme();
   const [open, setOpen] = useState(false);
   const selected = (_a = options.find((o) => o.value === value)) != null ? _a : null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      onPress: () => {
-        if (disabled) return;
-        setOpen(true);
-      },
-      disabled,
-      accessibilityRole: "button",
-      accessibilityState: { expanded: open, disabled },
-      accessibilityLabel: selected ? selected.label : placeholder,
-      style: {
-        height: 48,
-        borderRadius: 12,
-        borderWidth: 1,
-        borderColor: t["--border-default"],
-        backgroundColor: t["--surface-default"],
-        paddingHorizontal: 16,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        opacity: disabled ? 0.5 : 1
-      }
-    },
-    /* @__PURE__ */ React.createElement(Text, { variant: "body", color: selected ? "primary" : "muted" }, selected ? selected.label : placeholder),
-    /* @__PURE__ */ React.createElement(ChevronDown, { size: 20, color: t["--text-muted"] })
-  ), /* @__PURE__ */ React.createElement(Sheet, { visible: open, onClose: () => setOpen(false) }, /* @__PURE__ */ React.createElement(
-    ScrollView,
-    {
-      contentContainerStyle: { paddingHorizontal: 16, paddingBottom: 8, gap: 4 },
-      keyboardShouldPersistTaps: "handled"
-    },
-    options.map((o) => {
-      var _a2;
-      const sel = o.value === value;
-      const optDisabled = (_a2 = o.disabled) != null ? _a2 : false;
-      return /* @__PURE__ */ React.createElement(
-        Pressable,
-        {
-          key: o.value,
-          onPress: () => {
-            if (optDisabled) return;
-            onChange(o.value);
-            setOpen(false);
-          },
-          disabled: optDisabled,
-          accessibilityRole: "menuitem",
-          accessibilityState: { selected: sel, disabled: optDisabled },
-          style: {
-            minHeight: 48,
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            paddingHorizontal: 12,
-            borderRadius: 10,
-            backgroundColor: sel ? t["--surface-raised"] : "transparent",
-            opacity: optDisabled ? 0.5 : 1
-          }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        onPress: () => {
+          if (disabled) return;
+          setOpen(true);
+        },
+        disabled,
+        accessibilityRole: "button",
+        accessibilityState: { expanded: open, disabled },
+        accessibilityLabel: selected ? selected.label : placeholder,
+        style: {
+          height: 48,
+          borderRadius: 12,
+          borderWidth: 1,
+          borderColor: t["--border-default"],
+          backgroundColor: t["--surface-default"],
+          paddingHorizontal: 16,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          opacity: disabled ? 0.5 : 1
         },
-        /* @__PURE__ */ React.createElement(Text, { variant: "body" }, o.label),
-        sel ? /* @__PURE__ */ React.createElement(Check, { size: 18, color: t["--brand-primary"] }) : null
-      );
-    })
-  )));
+        children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", color: selected ? "primary" : "muted", children: selected ? selected.label : placeholder }),
+          /* @__PURE__ */ jsx(ChevronDown, { size: 20, color: t["--text-muted"] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Sheet, { visible: open, onClose: () => setOpen(false), children: /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        contentContainerStyle: { paddingHorizontal: 16, paddingBottom: 8, gap: 4 },
+        keyboardShouldPersistTaps: "handled",
+        children: options.map((o) => {
+          var _a2;
+          const sel = o.value === value;
+          const optDisabled = (_a2 = o.disabled) != null ? _a2 : false;
+          return /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              onPress: () => {
+                if (optDisabled) return;
+                onChange(o.value);
+                setOpen(false);
+              },
+              disabled: optDisabled,
+              accessibilityRole: "menuitem",
+              accessibilityState: { selected: sel, disabled: optDisabled },
+              style: {
+                minHeight: 48,
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                paddingHorizontal: 12,
+                borderRadius: 10,
+                backgroundColor: sel ? t["--surface-raised"] : "transparent",
+                opacity: optDisabled ? 0.5 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(Text, { variant: "body", children: o.label }),
+                sel ? /* @__PURE__ */ jsx(Check, { size: 18, color: t["--brand-primary"] }) : null
+              ]
+            },
+            o.value
+          );
+        })
+      }
+    ) })
+  ] });
 }
 export {
   Select

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

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { Animated, Modal, Pressable, View } from "react-native";
 import { useTheme } from "./theme.js";
@@ -12,39 +13,44 @@ function Sheet({ visible, onClose, children }) {
       translateY.setValue(800);
     }
   }, [visible, translateY]);
-  return /* @__PURE__ */ React.createElement(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose }, /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      style: { flex: 1, backgroundColor: "rgba(0, 0, 0, 0.45)" },
-      onPress: onClose,
-      accessibilityRole: "button",
-      accessibilityLabel: "Fechar"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Animated.View,
-    {
-      accessibilityViewIsModal: true,
-      style: {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        bottom: 0,
-        maxHeight: "88%",
-        transform: [{ translateY }],
-        backgroundColor: t["--surface-default"],
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-        paddingBottom: 28
+  return /* @__PURE__ */ jsxs(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: { flex: 1, backgroundColor: "rgba(0, 0, 0, 0.45)" },
+        onPress: onClose,
+        accessibilityRole: "button",
+        accessibilityLabel: "Fechar"
       }
-    },
-    /* @__PURE__ */ React.createElement(View, { style: { alignItems: "center", paddingVertical: 10 } }, /* @__PURE__ */ React.createElement(
-      View,
+    ),
+    /* @__PURE__ */ jsxs(
+      Animated.View,
       {
-        style: { width: 40, height: 4, borderRadius: 2, backgroundColor: t["--border-strong"] }
+        accessibilityViewIsModal: true,
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          maxHeight: "88%",
+          transform: [{ translateY }],
+          backgroundColor: t["--surface-default"],
+          borderTopLeftRadius: 20,
+          borderTopRightRadius: 20,
+          paddingBottom: 28
+        },
+        children: [
+          /* @__PURE__ */ jsx(View, { style: { alignItems: "center", paddingVertical: 10 }, children: /* @__PURE__ */ jsx(
+            View,
+            {
+              style: { width: 40, height: 4, borderRadius: 2, backgroundColor: t["--border-strong"] }
+            }
+          ) }),
+          children
+        ]
       }
-    )),
-    children
-  ));
+    )
+  ] });
 }
 export {
   Sheet

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

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 import { useTheme } from "./theme.js";
@@ -16,7 +17,7 @@ function Skeleton({ width = "100%", height = 16, radius = 8, circle = false }) {
     return () => loop.stop();
   }, [pulse]);
   const size = circle ? typeof height === "number" ? height : 40 : void 0;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Animated.View,
     {
       accessibilityElementsHidden: true,
@@ -32,14 +33,14 @@ function Skeleton({ width = "100%", height = 16, radius = 8, circle = false }) {
   );
 }
 function SkeletonText({ lines = 3, gap = 8, lineHeight = 12 }) {
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.stack, { gap }] }, Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(View, { style: [styles.stack, { gap }], children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
     Skeleton,
     {
-      key: i,
       height: lineHeight,
       width: i === lines - 1 ? "70%" : "100%"
-    }
-  )));
+    },
+    i
+  )) });
 }
 const styles = StyleSheet.create({
   stack: {

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

@@ -1,6 +1,8 @@
 import {
+  __spreadProps,
   __spreadValues
 } from "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import {
   PanResponder,
@@ -68,52 +70,58 @@ function Slider({
     else if (name === "decrement") onChange(snap(value - step, min, max, step));
   }
   const thumbLeft = Math.max(0, pct * trackWidth - THUMB_SIZE / 2);
-  return /* @__PURE__ */ React.createElement(View, { style: styles.row }, /* @__PURE__ */ React.createElement(
-    View,
-    __spreadValues({
-      accessible: true,
-      accessibilityRole: "adjustable",
-      accessibilityLabel,
-      accessibilityState: { disabled },
-      accessibilityValue: { min, max, now: value },
-      accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
-      onAccessibilityAction,
-      onLayout,
-      hitSlop: { top: 12, bottom: 12, left: 4, right: 4 },
-      style: [styles.trackArea, { opacity: disabled ? 0.5 : 1 }]
-    }, responder.panHandlers),
-    /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+    /* @__PURE__ */ jsxs(
       View,
-      {
-        pointerEvents: "none",
-        style: [styles.track, { backgroundColor: t["--border-strong"] }]
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      View,
-      {
-        pointerEvents: "none",
-        style: [
-          styles.fill,
-          { width: pct * trackWidth, backgroundColor: t["--brand-primary"] }
+      __spreadProps(__spreadValues({
+        accessible: true,
+        accessibilityRole: "adjustable",
+        accessibilityLabel,
+        accessibilityState: { disabled },
+        accessibilityValue: { min, max, now: value },
+        accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+        onAccessibilityAction,
+        onLayout,
+        hitSlop: { top: 12, bottom: 12, left: 4, right: 4 },
+        style: [styles.trackArea, { opacity: disabled ? 0.5 : 1 }]
+      }, responder.panHandlers), {
+        children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              pointerEvents: "none",
+              style: [styles.track, { backgroundColor: t["--border-strong"] }]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              pointerEvents: "none",
+              style: [
+                styles.fill,
+                { width: pct * trackWidth, backgroundColor: t["--brand-primary"] }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              pointerEvents: "none",
+              style: [
+                styles.thumb,
+                {
+                  left: thumbLeft,
+                  backgroundColor: t["--brand-primary"],
+                  borderColor: t["--surface-default"]
+                }
+              ]
+            }
+          )
         ]
-      }
+      })
     ),
-    /* @__PURE__ */ React.createElement(
-      View,
-      {
-        pointerEvents: "none",
-        style: [
-          styles.thumb,
-          {
-            left: thumbLeft,
-            backgroundColor: t["--brand-primary"],
-            borderColor: t["--surface-default"]
-          }
-        ]
-      }
-    )
-  ), showValue && /* @__PURE__ */ React.createElement(Text, { variant: "label", style: [styles.value, { color: t["--text-primary"] }] }, fmt(value)));
+    showValue && /* @__PURE__ */ jsx(Text, { variant: "label", style: [styles.value, { color: t["--text-primary"] }], children: fmt(value) })
+  ] });
 }
 const styles = StyleSheet.create({
   row: {

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

@@ -1,9 +1,10 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import { ActivityIndicator, View } from "react-native";
 import { useTheme } from "./theme.js";
 function Spinner({ size = "large" }) {
   const t = useTheme();
-  return /* @__PURE__ */ React.createElement(View, { style: { flex: 1, alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React.createElement(ActivityIndicator, { size, color: t["--brand-primary"] }));
+  return /* @__PURE__ */ jsx(View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(ActivityIndicator, { size, color: t["--brand-primary"] }) });
 }
 export {
   Spinner

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

@@ -1,4 +1,5 @@
 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";
@@ -18,15 +19,19 @@ function Stepper({
     alignItems: "center",
     justifyContent: "center"
   };
-  return /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(Pressable, { onPress: () => onChange(Math.max(min, value - 1)), hitSlop: 8, style: btn }, /* @__PURE__ */ React.createElement(Text, { variant: "label" }, "\u2212")), /* @__PURE__ */ React.createElement(Text, { variant: "label", style: { minWidth: 24, textAlign: "center" } }, value), /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      onPress: () => onChange(max != null ? Math.min(max, value + 1) : value + 1),
-      hitSlop: 8,
-      style: btn
-    },
-    /* @__PURE__ */ React.createElement(Text, { variant: "label" }, "+")
-  ));
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(Pressable, { onPress: () => onChange(Math.max(min, value - 1)), hitSlop: 8, style: btn, children: /* @__PURE__ */ jsx(Text, { variant: "label", children: "\u2212" }) }),
+    /* @__PURE__ */ jsx(Text, { variant: "label", style: { minWidth: 24, textAlign: "center" }, children: value }),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: () => onChange(max != null ? Math.min(max, value + 1) : value + 1),
+        hitSlop: 8,
+        style: btn,
+        children: /* @__PURE__ */ jsx(Text, { variant: "label", children: "+" })
+      }
+    )
+  ] });
 }
 export {
   Stepper

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

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import { Pressable, Switch as RNSwitch, View } from "react-native";
 import { Text } from "./text.js";
 import { useTheme } from "./theme.js";
@@ -9,7 +10,7 @@ function Switch({
   accessibilityLabel
 }) {
   const t = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     RNSwitch,
     {
       value,
@@ -28,12 +29,11 @@ function SegmentedControl({
   disabled
 }) {
   const t = useTheme();
-  return /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", gap: 6, opacity: disabled ? 0.5 : 1 } }, segments.map((s) => {
+  return /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", gap: 6, opacity: disabled ? 0.5 : 1 }, children: segments.map((s) => {
     const sel = s.value === value;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Pressable,
       {
-        key: s.value,
         onPress: () => onChange(s.value),
         disabled,
         hitSlop: 8,
@@ -49,18 +49,19 @@ function SegmentedControl({
           justifyContent: "center",
           borderColor: sel ? t["--brand-primary"] : t["--border-default"],
           backgroundColor: sel ? t["--brand-primary"] : t["--surface-default"]
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          variant: "label",
-          style: { color: sel ? t["--brand-on-primary"] : t["--text-primary"] }
         },
-        s.label
-      )
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "label",
+            style: { color: sel ? t["--brand-on-primary"] : t["--text-primary"] },
+            children: s.label
+          }
+        )
+      },
+      s.value
     );
-  }));
+  }) });
 }
 export {
   SegmentedControl,

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

@@ -2,6 +2,7 @@ import {
   __objRest,
   __spreadValues
 } from "../../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import { Text as RNText } from "react-native";
 import { fonts } from "../fonts.js";
 import { useTheme } from "./theme.js";
@@ -24,7 +25,7 @@ const COLOR_TOKEN = {
 function Text(_a) {
   var _b = _a, { variant = "body", color = "primary", style } = _b, rest = __objRest(_b, ["variant", "color", "style"]);
   const t = useTheme();
-  return /* @__PURE__ */ React.createElement(RNText, __spreadValues({ style: [VARIANT[variant], { color: t[COLOR_TOKEN[color]] }, style] }, rest));
+  return /* @__PURE__ */ jsx(RNText, __spreadValues({ style: [VARIANT[variant], { color: t[COLOR_TOKEN[color]] }, style] }, rest));
 }
 export {
   Text

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

@@ -2,6 +2,7 @@ import {
   __objRest,
   __spreadValues
 } from "../../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import {
   StyleSheet,
@@ -56,7 +57,7 @@ function TextArea(_a) {
   }
   const maxHeight = maxRows * LINE_HEIGHT + VERTICAL_PADDING;
   const autoGrowStyle = autoGrow ? { height: Math.min(contentHeight != null ? contentHeight : 0, maxHeight) || void 0, maxHeight } : null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     TextInput,
     __spreadValues({
       multiline: true,

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

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { useColorScheme } from "react-native";
 import { dsTheme } from "../theme.js";
@@ -9,7 +10,7 @@ function DSThemeProvider({ children, scheme, theme }) {
   const isDark = ((_a = scheme != null ? scheme : system) != null ? _a : "light") === "dark";
   const mapa = theme != null ? theme : dsTheme;
   const resolved = isDark ? mapa.dark : mapa.light;
-  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: resolved }, children);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: resolved, children });
 }
 function useTheme() {
   return useContext(ThemeContext);

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

@@ -1,6 +1,7 @@
 import {
   __spreadValues
 } from "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { CheckCircle, AlertCircle, AlertTriangle, Info } from "lucide-react-native";
 import { Animated, Platform, StyleSheet, View } from "react-native";
@@ -94,30 +95,32 @@ function Toaster({ position = "bottom" } = {}) {
   const Icon = spec.icon;
   const isError = current.variant === "error";
   const edgePadding = isTop ? { paddingTop: (insets.top > 0 ? insets.top : 0) + 12 } : { paddingBottom: (insets.bottom > 0 ? insets.bottom : 0) + 12 };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     View,
     {
       pointerEvents: "box-none",
-      style: [styles.overlay, isTop ? styles.overlayTop : styles.overlayBottom, edgePadding]
-    },
-    /* @__PURE__ */ React.createElement(
-      Animated.View,
-      {
-        accessibilityLiveRegion: isError ? "assertive" : "polite",
-        accessibilityRole: isError ? "alert" : "summary",
-        style: [
-          styles.toast,
-          {
-            backgroundColor: bg,
-            borderColor: border,
-            opacity,
-            transform: [{ translateY }]
-          }
-        ]
-      },
-      /* @__PURE__ */ React.createElement(Icon, { size: 18, color: fg, style: styles.icon }),
-      /* @__PURE__ */ React.createElement(Text, { variant: "label", style: [styles.message, { color: fg }], numberOfLines: 3 }, current.message)
-    )
+      style: [styles.overlay, isTop ? styles.overlayTop : styles.overlayBottom, edgePadding],
+      children: /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          accessibilityLiveRegion: isError ? "assertive" : "polite",
+          accessibilityRole: isError ? "alert" : "summary",
+          style: [
+            styles.toast,
+            {
+              backgroundColor: bg,
+              borderColor: border,
+              opacity,
+              transform: [{ translateY }]
+            }
+          ],
+          children: [
+            /* @__PURE__ */ jsx(Icon, { size: 18, color: fg, style: styles.icon }),
+            /* @__PURE__ */ jsx(Text, { variant: "label", style: [styles.message, { color: fg }], numberOfLines: 3, children: current.message })
+          ]
+        }
+      )
+    }
   );
 }
 const styles = StyleSheet.create({

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

@@ -1,3 +1,3 @@
 export { primitives } from '@rojaostudio/ds-core/tokens';
-export { ThemeMap, dsTheme, dsTheme as taiqTheme } from './theme.js';
+export { ThemeMap, dsTheme } from './theme.js';
 export { DsFonts, fonts } from './fonts.js';

package/dist/targets/native/index.js

@@ -1,11 +1,9 @@
 import "../../chunk-ORMEWXMH.js";
 import { primitives } from "@rojaostudio/ds-core/tokens";
 import { dsTheme } from "./theme.js";
-import { dsTheme as dsTheme2 } from "./theme.js";
 import { fonts } from "./fonts.js";
 export {
   dsTheme,
   fonts,
-  primitives,
-  dsTheme2 as taiqTheme
+  primitives
 };