@rojaostudio/ds 1.0.0

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

@@ -0,0 +1,92 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+import { Pressable, StyleSheet, TextInput, View } from "react-native";
+import { Search as SearchIcon, X } from "lucide-react-native";
+import { useTheme } from "./theme.js";
+function Search(_a) {
+  var _b = _a, {
+    value,
+    onChangeText,
+    placeholder = "Search",
+    onClear,
+    onSubmit,
+    action,
+    accessibilityLabel
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "onChangeText",
+    "placeholder",
+    "onClear",
+    "onSubmit",
+    "action",
+    "accessibilityLabel"
+  ]);
+  const t = useTheme();
+  const hasValue = !!value;
+  function handleClear() {
+    onChangeText("");
+    onClear == null ? void 0 : onClear();
+  }
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.wrap,
+        { backgroundColor: t["--surface-raised"], borderColor: t["--border-default"] }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(SearchIcon, { size: 18, color: t["--icon-default"] }),
+    /* @__PURE__ */ React.createElement(
+      TextInput,
+      __spreadValues({
+        value,
+        onChangeText,
+        placeholder,
+        placeholderTextColor: t["--text-muted"],
+        accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : placeholder,
+        returnKeyType: "search",
+        onSubmitEditing: (e) => onSubmit == null ? void 0 : onSubmit(e.nativeEvent.text),
+        style: [styles.input, { color: t["--text-primary"] }]
+      }, rest)
+    ),
+    action ? /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: action.accessibilityLabel,
+        hitSlop: 8,
+        onPress: action.onPress,
+        style: ({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })
+      },
+      action.icon
+    ) : null,
+    hasValue ? /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Clear search",
+        hitSlop: 8,
+        onPress: handleClear,
+        style: ({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })
+      },
+      /* @__PURE__ */ React.createElement(X, { size: 18, color: t["--icon-default"] })
+    ) : null
+  );
+}
+const styles = StyleSheet.create({
+  wrap: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 48,
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    gap: 8
+  },
+  input: { flex: 1, fontSize: 16, padding: 0 }
+});
+export {
+  Search
+};

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

@@ -0,0 +1,17 @@
+import * as react from 'react';
+
+type SelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+type Props = {
+    options: SelectOption[];
+    value: string | null;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+};
+declare function Select({ options, value, onChange, placeholder, disabled, }: Props): react.JSX.Element;
+
+export { Select, type SelectOption };

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

@@ -0,0 +1,86 @@
+import "../../../chunk-ORMEWXMH.js";
+import { Check, ChevronDown } from "lucide-react-native";
+import { useState } from "react";
+import { Pressable, ScrollView } from "react-native";
+import { Sheet } from "./sheet.js";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+function Select({
+  options,
+  value,
+  onChange,
+  placeholder = "Selecionar",
+  disabled = false
+}) {
+  var _a;
+  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
+          }
+        },
+        /* @__PURE__ */ React.createElement(Text, { variant: "body" }, o.label),
+        sel ? /* @__PURE__ */ React.createElement(Check, { size: 18, color: t["--brand-primary"] }) : null
+      );
+    })
+  )));
+}
+export {
+  Select
+};

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

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type Props = {
+    visible: boolean;
+    onClose: () => void;
+    children: ReactNode;
+};
+declare function Sheet({ visible, onClose, children }: Props): react.JSX.Element;
+
+export { Sheet };

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

@@ -0,0 +1,51 @@
+import "../../../chunk-ORMEWXMH.js";
+import { useEffect, useRef } from "react";
+import { Animated, Modal, Pressable, View } from "react-native";
+import { useTheme } from "./theme.js";
+function Sheet({ visible, onClose, children }) {
+  const t = useTheme();
+  const translateY = useRef(new Animated.Value(800)).current;
+  useEffect(() => {
+    if (visible) {
+      Animated.timing(translateY, { toValue: 0, duration: 220, useNativeDriver: true }).start();
+    } else {
+      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
+      }
+    },
+    /* @__PURE__ */ React.createElement(View, { style: { alignItems: "center", paddingVertical: 10 } }, /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: { width: 40, height: 4, borderRadius: 2, backgroundColor: t["--border-strong"] }
+      }
+    )),
+    children
+  ));
+}
+export {
+  Sheet
+};

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

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { DimensionValue } from 'react-native';
+
+type Props = {
+    width?: DimensionValue;
+    height?: DimensionValue;
+    radius?: number;
+    circle?: boolean;
+};
+declare function Skeleton({ width, height, radius, circle }: Props): react.JSX.Element;
+type SkeletonTextProps = {
+    lines?: number;
+    gap?: number;
+    lineHeight?: number;
+};
+declare function SkeletonText({ lines, gap, lineHeight }: SkeletonTextProps): react.JSX.Element;
+
+export { Skeleton, SkeletonText };

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

@@ -0,0 +1,52 @@
+import "../../../chunk-ORMEWXMH.js";
+import { useEffect, useRef } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+import { useTheme } from "./theme.js";
+function Skeleton({ width = "100%", height = 16, radius = 8, circle = false }) {
+  const t = useTheme();
+  const pulse = useRef(new Animated.Value(0.4)).current;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 1, duration: 700, useNativeDriver: true }),
+        Animated.timing(pulse, { toValue: 0.4, duration: 700, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse]);
+  const size = circle ? typeof height === "number" ? height : 40 : void 0;
+  return /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: {
+        width: circle ? size : width,
+        height: circle ? size : height,
+        borderRadius: circle ? (size != null ? size : 40) / 2 : radius,
+        backgroundColor: t["--surface-raised"],
+        opacity: pulse
+      }
+    }
+  );
+}
+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(
+    Skeleton,
+    {
+      key: i,
+      height: lineHeight,
+      width: i === lines - 1 ? "70%" : "100%"
+    }
+  )));
+}
+const styles = StyleSheet.create({
+  stack: {
+    flexDirection: "column"
+  }
+});
+export {
+  Skeleton,
+  SkeletonText
+};

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

@@ -0,0 +1,18 @@
+import * as react from 'react';
+
+type Props = {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Mostra o valor atual à direita do trilho. */
+    showValue?: boolean;
+    /** Formata o valor exibido (ex: `v => `${v}%``). */
+    formatValue?: (value: number) => string;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+};
+declare function Slider({ value, onChange, min, max, step, showValue, formatValue, disabled, accessibilityLabel, }: Props): react.JSX.Element;
+
+export { Slider };

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

@@ -0,0 +1,153 @@
+import {
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+import { useRef, useState } from "react";
+import {
+  PanResponder,
+  StyleSheet,
+  View
+} from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+const TRACK_HEIGHT = 6;
+const THUMB_SIZE = 24;
+function clamp(n, lo, hi) {
+  return Math.min(hi, Math.max(lo, n));
+}
+function snap(raw, min, max, step) {
+  const stepped = Math.round((raw - min) / step) * step + min;
+  return clamp(stepped, min, max);
+}
+function Slider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  showValue = false,
+  formatValue,
+  disabled = false,
+  accessibilityLabel
+}) {
+  const t = useTheme();
+  const [trackWidth, setTrackWidth] = useState(0);
+  const widthRef = useRef(0);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const fmt = formatValue != null ? formatValue : ((v) => String(v));
+  const range = max - min || 1;
+  const pct = clamp((value - min) / range, 0, 1);
+  function commitFromX(x) {
+    const w = widthRef.current;
+    if (w <= 0) return;
+    const ratio = clamp(x / w, 0, 1);
+    const next = snap(min + ratio * range, min, max, step);
+    if (next !== valueRef.current) onChange(next);
+  }
+  const responder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: (e) => {
+        commitFromX(e.nativeEvent.locationX);
+      },
+      onPanResponderMove: (e) => {
+        commitFromX(e.nativeEvent.locationX);
+      }
+    })
+  ).current;
+  function onLayout(e) {
+    const w = e.nativeEvent.layout.width;
+    widthRef.current = w;
+    setTrackWidth(w);
+  }
+  function onAccessibilityAction(e) {
+    if (disabled) return;
+    const name = e.nativeEvent.actionName;
+    if (name === "increment") onChange(snap(value + step, min, max, step));
+    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(
+      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"] }
+        ]
+      }
+    ),
+    /* @__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)));
+}
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  trackArea: {
+    flex: 1,
+    height: THUMB_SIZE,
+    justifyContent: "center"
+  },
+  track: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2
+  },
+  fill: {
+    position: "absolute",
+    left: 0,
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2
+  },
+  thumb: {
+    position: "absolute",
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    borderWidth: 2
+  },
+  value: {
+    minWidth: 40,
+    textAlign: "right"
+  }
+});
+export {
+  Slider
+};

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

@@ -0,0 +1,7 @@
+import * as react from 'react';
+
+declare function Spinner({ size }: {
+    size?: 'small' | 'large';
+}): react.JSX.Element;
+
+export { Spinner };

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

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

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

@@ -0,0 +1,10 @@
+import * as react from 'react';
+
+declare function Stepper({ value, onChange, min, max, }: {
+    value: number;
+    onChange: (v: number) => void;
+    min?: number;
+    max?: number;
+}): react.JSX.Element;
+
+export { Stepper };

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

@@ -0,0 +1,33 @@
+import "../../../chunk-ORMEWXMH.js";
+import { Pressable, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+function Stepper({
+  value,
+  onChange,
+  min = 0,
+  max
+}) {
+  const t = useTheme();
+  const btn = {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: t["--border-default"],
+    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" }, "+")
+  ));
+}
+export {
+  Stepper
+};

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

@@ -0,0 +1,20 @@
+import * as react from 'react';
+
+declare function Switch({ value, onValueChange, disabled, accessibilityLabel, }: {
+    value: boolean;
+    onValueChange: (v: boolean) => void;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+}): react.JSX.Element;
+type Segment<T extends string> = {
+    label: string;
+    value: T;
+};
+declare function SegmentedControl<T extends string>({ segments, value, onChange, disabled, }: {
+    segments: Segment<T>[];
+    value: T;
+    onChange: (v: T) => void;
+    disabled?: boolean;
+}): react.JSX.Element;
+
+export { SegmentedControl, Switch };

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

@@ -0,0 +1,68 @@
+import "../../../chunk-ORMEWXMH.js";
+import { Pressable, Switch as RNSwitch, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+function Switch({
+  value,
+  onValueChange,
+  disabled,
+  accessibilityLabel
+}) {
+  const t = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    RNSwitch,
+    {
+      value,
+      onValueChange,
+      disabled,
+      accessibilityLabel,
+      trackColor: { false: t["--border-strong"], true: t["--brand-primary"] },
+      thumbColor: t["--surface-default"]
+    }
+  );
+}
+function SegmentedControl({
+  segments,
+  value,
+  onChange,
+  disabled
+}) {
+  const t = useTheme();
+  return /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", gap: 6, opacity: disabled ? 0.5 : 1 } }, segments.map((s) => {
+    const sel = s.value === value;
+    return /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        key: s.value,
+        onPress: () => onChange(s.value),
+        disabled,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: s.label,
+        accessibilityState: { selected: sel, disabled: !!disabled },
+        style: {
+          flex: 1,
+          minHeight: 48,
+          borderRadius: 8,
+          borderWidth: 1,
+          alignItems: "center",
+          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
+      )
+    );
+  }));
+}
+export {
+  SegmentedControl,
+  Switch
+};

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

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { TextProps } from 'react-native';
+
+type TextVariant = 'heading' | 'title' | 'label' | 'body' | 'body-sm' | 'caption';
+type TextColor = 'primary' | 'secondary' | 'muted' | 'inverse' | 'danger' | 'brand';
+type Props = TextProps & {
+    variant?: TextVariant;
+    color?: TextColor;
+};
+declare function Text({ variant, color, style, ...rest }: Props): react.JSX.Element;
+
+export { Text, type TextColor, type TextVariant };