@rojaostudio/ds 1.0.0

package/dist/targets/native/components/form-field.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type Props = {
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    children: ReactNode;
+};
+declare function FormField({ label, hint, error, required, children }: Props): react.JSX.Element;
+
+export { FormField };

package/dist/targets/native/components/form-field.js

@@ -0,0 +1,29 @@
+import "../../../chunk-ORMEWXMH.js";
+import { AlertCircle } from "lucide-react-native";
+import { cloneElement, isValidElement } from "react";
+import { View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+function FormField({ label, hint, error, required, children }) {
+  var _a, _b;
+  const t = useTheme();
+  const a11yLabel = label ? required ? `${label}, obrigat\xF3rio` : label : void 0;
+  const field = isValidElement(children) ? cloneElement(children, {
+    // só injeta se o controle não trouxe o seu próprio
+    error: (_a = children.props.error) != null ? _a : error ? true : void 0,
+    accessibilityLabel: (_b = children.props.accessibilityLabel) != null ? _b : a11yLabel
+  }) : children;
+  return /* @__PURE__ */ React.createElement(View, { style: { gap: 6 } }, label ? /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React.createElement(Text, { variant: "label", style: { flexShrink: 1 } }, label), required ? /* @__PURE__ */ React.createElement(Text, { variant: "label", color: "danger", accessibilityElementsHidden: true, importantForAccessibility: "no" }, "*") : null) : null, field, error ? /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: { flexDirection: "row", alignItems: "flex-start", gap: 4 },
+      accessibilityLiveRegion: "polite",
+      accessibilityRole: "alert"
+    },
+    /* @__PURE__ */ React.createElement(AlertCircle, { size: 14, color: t["--danger-text"], style: { marginTop: 2 } }),
+    /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "danger", style: { flex: 1 } }, error)
+  ) : hint ? /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "muted" }, hint) : null);
+}
+export {
+  FormField
+};

package/dist/targets/native/components/form-screen.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare function SavingBar({ label, onSave, onDiscard, discardLabel, message, loading, disabled, visible, }: {
+    label?: string;
+    onSave: () => void;
+    onDiscard?: () => void;
+    discardLabel?: string;
+    message?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    visible?: boolean;
+}): react.JSX.Element | null;
+declare function FormScreen({ children, saveBar }: {
+    children: ReactNode;
+    saveBar?: ReactNode;
+}): react.JSX.Element;
+
+export { FormScreen, SavingBar };

package/dist/targets/native/components/form-screen.js

@@ -0,0 +1,88 @@
+import "../../../chunk-ORMEWXMH.js";
+import { KeyboardAvoidingView, Platform, ScrollView, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Button } from "./button.js";
+import { useTheme } from "./theme.js";
+function SavingBar({
+  label = "Salvar",
+  onSave,
+  onDiscard,
+  discardLabel = "Descartar",
+  message,
+  loading,
+  disabled,
+  visible = true
+}) {
+  const t = useTheme();
+  const insets = useSafeAreaInsets();
+  if (!visible) return null;
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: {
+        borderTopWidth: 1,
+        borderTopColor: t["--border-subtle"],
+        backgroundColor: t["--surface-default"],
+        paddingTop: 16,
+        paddingHorizontal: 16,
+        // Respeita o home indicator do iPhone; soma 16 de respiro quando não há inset.
+        paddingBottom: insets.bottom > 0 ? insets.bottom : 16,
+        gap: 8
+      }
+    },
+    message ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: {
+          color: t["--text-muted"],
+          fontSize: 13
+        }
+      },
+      message
+    ) : null,
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        label,
+        variant: "primary",
+        fullWidth: true,
+        onPress: onSave,
+        loading,
+        disabled
+      }
+    ),
+    onDiscard ? /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        label: discardLabel,
+        variant: "secondary",
+        fullWidth: true,
+        onPress: onDiscard,
+        disabled: loading
+      }
+    ) : null
+  );
+}
+function FormScreen({ children, saveBar }) {
+  const t = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    KeyboardAvoidingView,
+    {
+      style: { flex: 1, backgroundColor: t["--surface-page"] },
+      behavior: Platform.OS === "ios" ? "padding" : void 0
+    },
+    /* @__PURE__ */ React.createElement(
+      ScrollView,
+      {
+        contentContainerStyle: { padding: 16, gap: 16 },
+        keyboardShouldPersistTaps: "handled"
+      },
+      children
+    ),
+    saveBar
+  );
+}
+export {
+  FormScreen,
+  SavingBar
+};

package/dist/targets/native/components/google-icon.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+
+interface GoogleIconProps {
+    size?: number;
+}
+declare function GoogleIcon({ size }: GoogleIconProps): react.JSX.Element;
+
+export { GoogleIcon, type GoogleIconProps };

package/dist/targets/native/components/google-icon.js

@@ -0,0 +1,32 @@
+import "../../../chunk-ORMEWXMH.js";
+import Svg, { Path } from "react-native-svg";
+function GoogleIcon({ size = 18 }) {
+  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ React.createElement(
+    Path,
+    {
+      fill: "#FFC107",
+      d: "M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Path,
+    {
+      fill: "#FF3D00",
+      d: "M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Path,
+    {
+      fill: "#4CAF50",
+      d: "M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Path,
+    {
+      fill: "#1976D2",
+      d: "M43.611 20.083H42V20H24v8h11.303c-0.792 2.237-2.231 4.166-4.087 5.571l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"
+    }
+  ));
+}
+export {
+  GoogleIcon
+};

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

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { PressableProps } from 'react-native';
+
+type IconButtonVariant = 'filled' | 'outline' | 'ghost';
+type IconButtonColor = 'primary' | 'neutral' | 'danger';
+type IconButtonSize = 'sm' | 'md' | 'lg';
+type Props = Omit<PressableProps, 'children' | 'style'> & {
+    icon: ReactNode;
+    accessibilityLabel: string;
+    variant?: IconButtonVariant;
+    color?: IconButtonColor;
+    size?: IconButtonSize;
+    loading?: boolean;
+};
+declare function IconButton({ icon, accessibilityLabel, variant, color, size, loading, disabled, ...rest }: Props): react.JSX.Element;
+
+export { IconButton, type IconButtonColor, type IconButtonSize, type IconButtonVariant };

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

@@ -0,0 +1,80 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
+import { useTheme } from "./theme.js";
+const BOX = { sm: 36, md: 44, lg: 52 };
+function IconButton(_a) {
+  var _b = _a, {
+    icon,
+    accessibilityLabel,
+    variant = "ghost",
+    color = "neutral",
+    size = "md",
+    loading = false,
+    disabled
+  } = _b, rest = __objRest(_b, [
+    "icon",
+    "accessibilityLabel",
+    "variant",
+    "color",
+    "size",
+    "loading",
+    "disabled"
+  ]);
+  const t = useTheme();
+  const isDisabled = disabled || loading;
+  const ink = {
+    primary: t["--brand-primary"],
+    neutral: t["--icon-default"],
+    danger: t["--danger"]
+  }[color];
+  const onInk = {
+    primary: t["--brand-on-primary"],
+    neutral: t["--text-primary"],
+    danger: t["--brand-on-primary"]
+  }[color];
+  const skin = {
+    filled: { bg: ink, fg: onInk },
+    outline: { bg: t["--surface-default"], border: ink, fg: ink },
+    ghost: { bg: "transparent", fg: ink }
+  }[variant];
+  const box = BOX[size];
+  const hit = Math.max(0, Math.round((44 - box) / 2)) + 4;
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    __spreadValues({
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled: !!isDisabled, busy: loading },
+      disabled: isDisabled,
+      hitSlop: hit,
+      style: ({ pressed }) => __spreadProps(__spreadValues({}, styles.base), {
+        width: box,
+        height: box,
+        backgroundColor: skin.bg,
+        borderColor: skin.border,
+        borderWidth: skin.border ? 1 : 0,
+        opacity: isDisabled ? 0.5 : pressed ? 0.8 : 1
+      })
+    }, rest),
+    loading ? /* @__PURE__ */ React.createElement(ActivityIndicator, { color: skin.fg }) : /* @__PURE__ */ React.createElement(View, null, icon)
+  );
+}
+const styles = StyleSheet.create({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 12
+  }
+});
+export {
+  IconButton
+};

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

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { LucideIcon } from 'lucide-react-native';
+
+type Props = {
+    icon: LucideIcon;
+    size?: number;
+    color?: string;
+};
+declare function Icon({ icon: Glyph, size, color }: Props): react.JSX.Element;
+
+export { Icon };

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

@@ -0,0 +1,9 @@
+import "../../../chunk-ORMEWXMH.js";
+import { useTheme } from "./theme.js";
+function Icon({ icon: Glyph, size = 24, color }) {
+  const t = useTheme();
+  return /* @__PURE__ */ React.createElement(Glyph, { size, color: color != null ? color : t["--icon-default"] });
+}
+export {
+  Icon
+};

package/dist/targets/native/components/image-upload.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+
+type Props = {
+    value: string[];
+    onChange: (urls: string[]) => void;
+    onUpload: (localUri: string) => Promise<string>;
+    max?: number;
+    onError?: (e: unknown) => void;
+};
+declare function ImageUpload({ value, onChange, onUpload, max, onError }: Props): react.JSX.Element;
+
+export { ImageUpload };

package/dist/targets/native/components/image-upload.js

@@ -0,0 +1,95 @@
+import "../../../chunk-ORMEWXMH.js";
+import { Image } from "expo-image";
+import * as ImagePicker from "expo-image-picker";
+import { ImagePlus, X } from "lucide-react-native";
+import { useState } from "react";
+import { ActivityIndicator, Pressable, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+const TILE = 88;
+function ImageUpload({ value, onChange, onUpload, max = 10, onError }) {
+  const t = useTheme();
+  const [busy, setBusy] = useState(false);
+  async function pick() {
+    var _a;
+    try {
+      const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (!perm.granted) {
+        onError == null ? void 0 : onError(new Error("Permiss\xE3o de acesso \xE0s fotos negada."));
+        return;
+      }
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ["images"],
+        quality: 0.7
+      });
+      if (result.canceled || !((_a = result.assets) == null ? void 0 : _a[0])) return;
+      setBusy(true);
+      const url = await onUpload(result.assets[0].uri);
+      onChange([...value, url]);
+    } catch (e) {
+      onError == null ? void 0 : onError(e);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8 } }, value.map((url) => /* @__PURE__ */ React.createElement(
+    View,
+    {
+      key: url,
+      style: {
+        width: TILE,
+        height: TILE,
+        borderRadius: 12,
+        overflow: "hidden",
+        backgroundColor: t["--surface-raised"]
+      }
+    },
+    /* @__PURE__ */ React.createElement(Image, { source: { uri: url }, style: { width: "100%", height: "100%" }, contentFit: "cover" }),
+    /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        onPress: () => onChange(value.filter((u) => u !== url)),
+        hitSlop: 11,
+        accessibilityRole: "button",
+        accessibilityLabel: "Remover foto",
+        style: {
+          position: "absolute",
+          top: 4,
+          right: 4,
+          width: 22,
+          height: 22,
+          borderRadius: 11,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(0, 0, 0, 0.55)"
+        }
+      },
+      /* @__PURE__ */ React.createElement(X, { size: 14, color: "#ffffff" })
+    )
+  )), value.length < max ? /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: pick,
+      disabled: busy,
+      accessibilityRole: "button",
+      accessibilityLabel: busy ? "Enviando foto" : "Adicionar foto",
+      accessibilityState: { busy, disabled: busy },
+      style: {
+        width: TILE,
+        height: TILE,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderStyle: "dashed",
+        borderColor: t["--border-default"],
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 4,
+        backgroundColor: t["--surface-default"]
+      }
+    },
+    busy ? /* @__PURE__ */ React.createElement(ActivityIndicator, { color: t["--brand-primary"] }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ImagePlus, { size: 22, color: t["--text-muted"] }), /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "muted" }, "Foto"))
+  ) : null);
+}
+export {
+  ImageUpload
+};

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

@@ -0,0 +1,45 @@
+export { DSThemeProvider, ThemeTokens, useTheme } from './theme.js';
+export { Text, TextColor, TextVariant } from './text.js';
+export { Button, ButtonSize, ButtonVariant } from './button.js';
+export { Input } from './input.js';
+export { Badge, BadgeTone } from './badge.js';
+export { Card } from './card.js';
+export { EmptyState } from './empty-state.js';
+export { Spinner } from './spinner.js';
+export { Icon } from './icon.js';
+export { GoogleIcon, GoogleIconProps } from './google-icon.js';
+export { DangerZone, DangerZoneProps } from './danger-zone.js';
+export { Sheet } from './sheet.js';
+export { ChoiceCard } from './choice-card.js';
+export { CurrencyInput } from './currency-input.js';
+export { DatePicker, DatePickerProps } from './date-picker.js';
+export { Select, SelectOption } from './select.js';
+export { SegmentedControl, Switch } from './switch.js';
+export { Stepper } from './stepper.js';
+export { TextArea } from './textarea.js';
+export { FormField } from './form-field.js';
+export { ListItem } from './list-item.js';
+export { FormScreen, SavingBar } from './form-screen.js';
+export { ImageUpload } from './image-upload.js';
+export { Alert, AlertProps, AlertVariant } from './alert.js';
+export { ToastFn, ToastOptions, ToastPosition, ToastVariant, Toaster, ToasterProps, toast } from './toaster.js';
+export { Modal } from './modal.js';
+export { Skeleton, SkeletonText } from './skeleton.js';
+export { Checkbox } from './checkbox.js';
+export { Radio, RadioGroup } from './radio.js';
+export { Divider } from './divider.js';
+export { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AvatarSize, AvatarStatus, initials } from './avatar.js';
+export { IconButton, IconButtonColor, IconButtonSize, IconButtonVariant } from './icon-button.js';
+export { Search } from './search.js';
+export { FAB, FABProps, FABProvider, useFAB } from './fab.js';
+export { Accordion, AccordionItem, AccordionItemProps, AccordionProps } from './accordion.js';
+export { PaywallBanner, PaywallBannerProps } from './paywall-banner.js';
+export { PaywallContent, PaywallContentProps, PaywallIcon, PaywallReason } from './paywall.js';
+export { Menu, MenuItem } from './menu.js';
+export { ContextMenu } from './context-menu.js';
+export { Slider } from './slider.js';
+export { Chip } from './chips.js';
+export { FilterChip, FilterChipGroup } from './filter-chip.js';
+import 'react';
+import 'react-native';
+import 'lucide-react-native';

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

@@ -0,0 +1,100 @@
+import "../../../chunk-ORMEWXMH.js";
+import { DSThemeProvider, useTheme } from "./theme.js";
+import { Text } from "./text.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Badge } from "./badge.js";
+import { Card } from "./card.js";
+import { EmptyState } from "./empty-state.js";
+import { Spinner } from "./spinner.js";
+import { Icon } from "./icon.js";
+import { GoogleIcon } from "./google-icon.js";
+import { DangerZone } from "./danger-zone.js";
+import { Sheet } from "./sheet.js";
+import { ChoiceCard } from "./choice-card.js";
+import { CurrencyInput } from "./currency-input.js";
+import { DatePicker } from "./date-picker.js";
+import { Select } from "./select.js";
+import { Switch, SegmentedControl } from "./switch.js";
+import { Stepper } from "./stepper.js";
+import { TextArea } from "./textarea.js";
+import { FormField } from "./form-field.js";
+import { ListItem } from "./list-item.js";
+import { SavingBar, FormScreen } from "./form-screen.js";
+import { ImageUpload } from "./image-upload.js";
+import { Alert } from "./alert.js";
+import { Toaster, toast } from "./toaster.js";
+import { Modal } from "./modal.js";
+import { Skeleton, SkeletonText } from "./skeleton.js";
+import { Checkbox } from "./checkbox.js";
+import { Radio, RadioGroup } from "./radio.js";
+import { Divider } from "./divider.js";
+import { Avatar, AvatarGroup, initials } from "./avatar.js";
+import { IconButton } from "./icon-button.js";
+import { Search } from "./search.js";
+import { FAB, FABProvider, useFAB } from "./fab.js";
+import { Accordion, AccordionItem } from "./accordion.js";
+import { PaywallBanner } from "./paywall-banner.js";
+import { PaywallContent } from "./paywall.js";
+import { Menu, MenuItem } from "./menu.js";
+import { ContextMenu } from "./context-menu.js";
+import { Slider } from "./slider.js";
+import { Chip } from "./chips.js";
+import { FilterChip, FilterChipGroup } from "./filter-chip.js";
+export {
+  Accordion,
+  AccordionItem,
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Chip,
+  ChoiceCard,
+  ContextMenu,
+  CurrencyInput,
+  DSThemeProvider,
+  DangerZone,
+  DatePicker,
+  Divider,
+  EmptyState,
+  FAB,
+  FABProvider,
+  FilterChip,
+  FilterChipGroup,
+  FormField,
+  FormScreen,
+  GoogleIcon,
+  Icon,
+  IconButton,
+  ImageUpload,
+  Input,
+  ListItem,
+  Menu,
+  MenuItem,
+  Modal,
+  PaywallBanner,
+  PaywallContent,
+  Radio,
+  RadioGroup,
+  SavingBar,
+  Search,
+  SegmentedControl,
+  Select,
+  Sheet,
+  Skeleton,
+  SkeletonText,
+  Slider,
+  Spinner,
+  Stepper,
+  Switch,
+  Text,
+  TextArea,
+  Toaster,
+  initials,
+  toast,
+  useFAB,
+  useTheme
+};

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

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { TextInputProps } from 'react-native';
+
+type Props = TextInputProps & {
+    label?: string;
+    error?: string | boolean;
+    /** Conteúdo dentro do campo, à esquerda (ícone ou texto, ex.: "R$"). */
+    prefix?: ReactNode;
+    /** Conteúdo dentro do campo, à direita (ícone ou texto). */
+    suffix?: ReactNode;
+    /** Mostra botão X que limpa o valor (via onChangeText('')) quando há texto. */
+    clearable?: boolean;
+};
+declare function Input({ label, error, prefix, suffix, clearable, style, onFocus, onBlur, onChangeText, accessibilityLabel, ...rest }: Props): react.JSX.Element;
+
+export { Input };