@rojaostudio/ds 1.0.0

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

@@ -0,0 +1,31 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+import { Text as RNText } from "react-native";
+import { fonts } from "../fonts.js";
+import { useTheme } from "./theme.js";
+const VARIANT = {
+  heading: { fontSize: 24, lineHeight: 30, fontWeight: "700", fontFamily: fonts.display.bold },
+  title: { fontSize: 18, lineHeight: 24, fontWeight: "600", fontFamily: fonts.display.semibold },
+  label: { fontSize: 14, lineHeight: 18, fontWeight: "600" },
+  body: { fontSize: 16, lineHeight: 22, fontWeight: "400" },
+  "body-sm": { fontSize: 14, lineHeight: 20, fontWeight: "400" },
+  caption: { fontSize: 12, lineHeight: 16, fontWeight: "400" }
+};
+const COLOR_TOKEN = {
+  primary: "--text-primary",
+  secondary: "--text-secondary",
+  muted: "--text-muted",
+  inverse: "--text-inverse",
+  danger: "--danger-text",
+  brand: "--brand-primary"
+};
+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));
+}
+export {
+  Text
+};

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

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { TextInputProps } from 'react-native';
+
+type Props = TextInputProps & {
+    error?: boolean;
+    disabled?: boolean;
+    label?: string;
+    autoGrow?: boolean;
+    maxRows?: number;
+};
+declare function TextArea({ style, onFocus, onBlur, onContentSizeChange, numberOfLines, error, disabled, label, accessibilityLabel, autoGrow, maxRows, ...rest }: Props): react.JSX.Element;
+
+export { TextArea };

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

@@ -0,0 +1,92 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+import { useState } from "react";
+import {
+  StyleSheet,
+  TextInput
+} from "react-native";
+import { useTheme } from "./theme.js";
+const LINE_HEIGHT = 22;
+const VERTICAL_PADDING = 28;
+function TextArea(_a) {
+  var _b = _a, {
+    style,
+    onFocus,
+    onBlur,
+    onContentSizeChange,
+    numberOfLines = 4,
+    error,
+    disabled,
+    label,
+    accessibilityLabel,
+    autoGrow,
+    maxRows = 10
+  } = _b, rest = __objRest(_b, [
+    "style",
+    "onFocus",
+    "onBlur",
+    "onContentSizeChange",
+    "numberOfLines",
+    "error",
+    "disabled",
+    "label",
+    "accessibilityLabel",
+    "autoGrow",
+    "maxRows"
+  ]);
+  const t = useTheme();
+  const [focused, setFocused] = useState(false);
+  const [contentHeight, setContentHeight] = useState(null);
+  const borderColor = error ? t["--danger"] : focused ? t["--border-focus"] : t["--border-default"];
+  function handleFocus(e) {
+    setFocused(true);
+    onFocus == null ? void 0 : onFocus(e);
+  }
+  function handleBlur(e) {
+    setFocused(false);
+    onBlur == null ? void 0 : onBlur(e);
+  }
+  function handleContentSizeChange(e) {
+    if (autoGrow) {
+      setContentHeight(e.nativeEvent.contentSize.height);
+    }
+    onContentSizeChange == null ? void 0 : onContentSizeChange(e);
+  }
+  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(
+    TextInput,
+    __spreadValues({
+      multiline: true,
+      numberOfLines: autoGrow ? void 0 : numberOfLines,
+      textAlignVertical: "top",
+      placeholderTextColor: t["--text-placeholder"],
+      editable: !disabled,
+      accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : label,
+      accessibilityState: { disabled: !!disabled },
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onContentSizeChange: handleContentSizeChange,
+      style: [
+        styles.area,
+        {
+          borderColor,
+          backgroundColor: t["--surface-default"],
+          color: disabled ? t["--text-disabled"] : t["--text-primary"]
+        },
+        disabled && styles.disabled,
+        autoGrowStyle,
+        style
+      ]
+    }, rest)
+  );
+}
+const styles = StyleSheet.create({
+  area: { minHeight: 96, borderRadius: 12, borderWidth: 1, padding: 14, fontSize: 16 },
+  disabled: { opacity: 0.5 }
+});
+export {
+  TextArea
+};

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

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type ThemeTokens = Record<string, string>;
+/** Mapa de marca: o mesmo formato que `dsTheme`. Gere o seu com `pnpm build:brands`. */
+type ThemeMaps = {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+};
+type Props = {
+    children: ReactNode;
+    scheme?: 'light' | 'dark';
+    theme?: ThemeMaps;
+};
+declare function DSThemeProvider({ children, scheme, theme }: Props): react.JSX.Element;
+declare function useTheme(): ThemeTokens;
+
+export { DSThemeProvider, type ThemeMaps, type ThemeTokens, useTheme };

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

@@ -0,0 +1,20 @@
+import "../../../chunk-ORMEWXMH.js";
+import { createContext, useContext } from "react";
+import { useColorScheme } from "react-native";
+import { dsTheme } from "../theme.js";
+const ThemeContext = createContext(dsTheme.light);
+function DSThemeProvider({ children, scheme, theme }) {
+  var _a;
+  const system = useColorScheme();
+  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);
+}
+function useTheme() {
+  return useContext(ThemeContext);
+}
+export {
+  DSThemeProvider,
+  useTheme
+};

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

@@ -0,0 +1,35 @@
+import * as react from 'react';
+
+/**
+ * Toaster (RN) — host único + API imperativa via store-em-módulo.
+ *
+ * Uso:
+ *   // monte uma vez, no topo da árvore (dentro do DSThemeProvider):
+ *   <Toaster />
+ *   // dispare de qualquer lugar:
+ *   toast.success('Salvo');
+ *   toast.error('Falhou'); toast.warning('...'); toast.info('...');
+ *
+ * Comportamento: um por vez (novo substitui o anterior), auto-dismiss por
+ * timeout, animação de entrada/saída (fade + slide) via Animated.
+ */
+type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+type ToastPosition = 'top' | 'bottom';
+interface ToastOptions {
+    /** ms até auto-dismiss. Omitido → fallback do Material (2750, LENGTH_LONG). <=0 mantém persistente. */
+    duration?: number;
+}
+interface ToastFn {
+    success: (message: string, options?: ToastOptions) => number;
+    error: (message: string, options?: ToastOptions) => number;
+    warning: (message: string, options?: ToastOptions) => number;
+    info: (message: string, options?: ToastOptions) => number;
+}
+declare const toast: ToastFn;
+interface ToasterProps {
+    /** Posição na tela. default = 'bottom'. */
+    position?: ToastPosition;
+}
+declare function Toaster({ position }?: ToasterProps): react.JSX.Element | null;
+
+export { type ToastFn, type ToastOptions, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, toast };

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

@@ -0,0 +1,159 @@
+import {
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+import { useEffect, useRef, useState } from "react";
+import { CheckCircle, AlertCircle, AlertTriangle, Info } from "lucide-react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+const listeners = /* @__PURE__ */ new Set();
+let counter = 0;
+function show(message, variant, options = {}) {
+  var _a;
+  counter += 1;
+  const item = {
+    id: counter,
+    message,
+    variant,
+    duration: (_a = options.duration) != null ? _a : 2750
+    // Material LENGTH_LONG (mobile: default único, sem hover-to-pause)
+  };
+  for (const l of listeners) l(item);
+  return item.id;
+}
+const toast = {
+  success: (m, o) => show(m, "success", o),
+  error: (m, o) => show(m, "error", o),
+  warning: (m, o) => show(m, "warning", o),
+  info: (m, o) => show(m, "info", o)
+};
+const VARIANT = {
+  success: { soft: "--success-soft", border: "--success-border", text: "--success-text", icon: CheckCircle },
+  error: { soft: "--danger-soft", border: "--danger-border", text: "--danger-text", icon: AlertCircle },
+  warning: { soft: "--warning-soft", border: "--warning-border", text: "--warning-text", icon: AlertTriangle },
+  info: { soft: "--info-soft", border: "--info-border", text: "--info-text", icon: Info }
+};
+const ENTER_MS = 200;
+const EXIT_MS = 150;
+function Toaster({ position = "bottom" } = {}) {
+  var _a, _b, _c;
+  const t = useTheme();
+  const insets = useSafeAreaInsets();
+  const [current, setCurrent] = useState(null);
+  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(0)).current;
+  const timerRef = useRef(null);
+  const currentRef = useRef(null);
+  currentRef.current = current;
+  const isTop = position === "top";
+  const offscreen = isTop ? -16 : 16;
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+  useEffect(() => {
+    const animateIn = (item) => {
+      opacity.setValue(0);
+      translateY.setValue(offscreen);
+      Animated.parallel([
+        Animated.timing(opacity, { toValue: 1, duration: ENTER_MS, useNativeDriver: true }),
+        Animated.timing(translateY, { toValue: 0, duration: ENTER_MS, useNativeDriver: true })
+      ]).start();
+      clearTimer();
+      if (item.duration > 0) {
+        timerRef.current = setTimeout(() => animateOut(item.id), item.duration);
+      }
+    };
+    const animateOut = (id) => {
+      clearTimer();
+      Animated.parallel([
+        Animated.timing(opacity, { toValue: 0, duration: EXIT_MS, useNativeDriver: true }),
+        Animated.timing(translateY, { toValue: offscreen, duration: EXIT_MS, useNativeDriver: true })
+      ]).start(() => {
+        setCurrent((prev) => prev && prev.id === id ? null : prev);
+      });
+    };
+    const listener = (item) => {
+      setCurrent(item);
+      animateIn(item);
+    };
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+      clearTimer();
+    };
+  }, [offscreen]);
+  if (!current) return null;
+  const spec = VARIANT[current.variant];
+  const bg = (_a = t[spec.soft]) != null ? _a : t["--surface-raised"];
+  const border = (_b = t[spec.border]) != null ? _b : t["--border-default"];
+  const fg = (_c = t[spec.text]) != null ? _c : t["--text-primary"];
+  const Icon = spec.icon;
+  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(
+    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)
+    )
+  );
+}
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    alignItems: "center",
+    paddingHorizontal: 16
+  },
+  overlayTop: { top: 0 },
+  overlayBottom: { bottom: 0 },
+  toast: __spreadValues({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minHeight: 56,
+    maxWidth: 560,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 12,
+    borderWidth: 1
+  }, Platform.select({
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.18,
+      shadowRadius: 12
+    },
+    android: { elevation: 6 },
+    default: {}
+  })),
+  icon: { marginTop: 0 },
+  message: { flex: 1, minWidth: 0 }
+});
+export {
+  Toaster,
+  toast
+};

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

@@ -0,0 +1,9 @@
+declare const fonts: {
+    readonly display: {
+        readonly bold: "BricolageGrotesque_700Bold";
+        readonly semibold: "BricolageGrotesque_600SemiBold";
+    };
+};
+type DsFonts = typeof fonts;
+
+export { type DsFonts, fonts };

package/dist/targets/native/fonts.js

@@ -0,0 +1,10 @@
+import "../../chunk-ORMEWXMH.js";
+const fonts = {
+  display: {
+    bold: "BricolageGrotesque_700Bold",
+    semibold: "BricolageGrotesque_600SemiBold"
+  }
+};
+export {
+  fonts
+};

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

@@ -0,0 +1 @@
+export * from 'lucide-react-native';

package/dist/targets/native/icons.js

@@ -0,0 +1 @@
+export * from "lucide-react-native";

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

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

package/dist/targets/native/index.js

@@ -0,0 +1,11 @@
+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
+};

package/dist/targets/native/preset.cjs

@@ -0,0 +1,69 @@
+// AUTO-GERADO por scripts/build-native.ts — não editar à mão.
+// Preset NativeWind do tema padrão do DS. As cores apontam pras vars de theme.css.
+// Uso no app: presets: [require("nativewind/preset"), require("@rojaostudio/ds/native/preset")]
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+              "surface": {
+                      "DEFAULT": "var(--ds-surface-default)",
+                      "page": "var(--ds-surface-page)",
+                      "raised": "var(--ds-surface-raised)",
+                      "overlay": "var(--ds-surface-overlay)",
+                      "invert": "var(--ds-surface-invert)"
+              },
+              "fg": {
+                      "DEFAULT": "var(--ds-text-primary)",
+                      "secondary": "var(--ds-text-secondary)",
+                      "muted": "var(--ds-text-muted)",
+                      "disabled": "var(--ds-text-disabled)",
+                      "inverse": "var(--ds-text-inverse)",
+                      "placeholder": "var(--ds-text-placeholder)"
+              },
+              "icon": {
+                      "DEFAULT": "var(--ds-icon-default)"
+              },
+              "line": {
+                      "DEFAULT": "var(--ds-border-default)",
+                      "subtle": "var(--ds-border-subtle)",
+                      "strong": "var(--ds-border-strong)",
+                      "focus": "var(--ds-border-focus)"
+              },
+              "brand": {
+                      "DEFAULT": "var(--ds-brand-primary)",
+                      "hover": "var(--ds-brand-hover)",
+                      "secondary": "var(--ds-brand-secondary)",
+                      "accent": "var(--ds-brand-accent)",
+                      "accent-light": "var(--ds-brand-accent-light)",
+                      "on-primary": "var(--ds-brand-on-primary)",
+                      "on-secondary": "var(--ds-brand-on-secondary)",
+                      "on-accent": "var(--ds-brand-on-accent)"
+              },
+              "danger": {
+                      "DEFAULT": "var(--ds-danger)",
+                      "soft": "var(--ds-danger-soft)",
+                      "border": "var(--ds-danger-border)",
+                      "text": "var(--ds-danger-text)"
+              },
+              "success": {
+                      "DEFAULT": "var(--ds-success)",
+                      "soft": "var(--ds-success-soft)",
+                      "border": "var(--ds-success-border)",
+                      "text": "var(--ds-success-text)"
+              },
+              "warning": {
+                      "DEFAULT": "var(--ds-warning)",
+                      "soft": "var(--ds-warning-soft)",
+                      "border": "var(--ds-warning-border)",
+                      "text": "var(--ds-warning-text)"
+              },
+              "info": {
+                      "DEFAULT": "var(--ds-info)",
+                      "soft": "var(--ds-info-soft)",
+                      "border": "var(--ds-info-border)",
+                      "text": "var(--ds-info-text)"
+              }
+      },
+    },
+  },
+};

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

@@ -0,0 +1,22 @@
+/**
+ * resolve.ts — resolve a saída do gerador (generateTheme) para cores utilizáveis no
+ * React Native. RN não tem CSS vars nem color-mix, então:
+ *   var(--color-coal-900)                          → '#1a1a1a'
+ *   color-mix(in srgb, var(--color-red-500) 8%, transparent) → 'rgba(244,67,54,0.08)'
+ *
+ * Puro e determinístico (testável). Não conhece o gerador nem o RN — só strings de cor.
+ */
+type Rgba = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+/** primitives.color (nested) → mapa plano keyed pelo nome do ref: 'coal-900', 'white', 'whiteAlpha-100'. */
+declare function flattenPrimitives(color: Record<string, unknown>): Record<string, string>;
+/** Resolve um valor de token para cor RN (hex ou rgba()). Valores não-cor passam direto. */
+declare function resolveValue(value: string, prims: Record<string, string>): string;
+/** Resolve um TokenMap inteiro, descartando tokens de fonte (não são cor). */
+declare function resolveTokenMap(map: Record<string, string>, prims: Record<string, string>): Record<string, string>;
+
+export { type Rgba, flattenPrimitives, resolveTokenMap, resolveValue };

package/dist/targets/native/resolve.js

@@ -0,0 +1,85 @@
+import "../../chunk-ORMEWXMH.js";
+function flattenPrimitives(color) {
+  const out = {};
+  for (const [name, val] of Object.entries(color)) {
+    if (typeof val === "string") {
+      out[name] = val;
+    } else if (val && typeof val === "object") {
+      for (const [step, hex] of Object.entries(val)) {
+        out[`${name}-${step}`] = hex;
+      }
+    }
+  }
+  return out;
+}
+function hexToRgba(hex) {
+  let h = hex.replace("#", "").trim();
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  const a = h.length >= 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
+  return { r, g, b, a };
+}
+function toCss({ r, g, b, a }) {
+  if (a >= 1) {
+    const hx = (n) => n.toString(16).padStart(2, "0");
+    return `#${hx(r)}${hx(g)}${hx(b)}`;
+  }
+  return `rgba(${r}, ${g}, ${b}, ${Number(a.toFixed(4))})`;
+}
+function resolveColor(token, prims) {
+  const t = token.trim();
+  if (t === "transparent") return { r: 0, g: 0, b: 0, a: 0 };
+  const varMatch = t.match(/^var\(--color-([a-zA-Z]+(?:-\d+)?)\)$/);
+  if (varMatch) {
+    const hex = prims[varMatch[1]];
+    if (!hex) throw new Error(`Primitiva n\xE3o encontrada: --color-${varMatch[1]}`);
+    return hexToRgba(hex);
+  }
+  if (t.startsWith("#")) return hexToRgba(t);
+  const rgb = t.match(/^rgba?\(([^)]+)\)$/);
+  if (rgb) {
+    const p = rgb[1].split(",").map((s) => s.trim());
+    return { r: +p[0], g: +p[1], b: +p[2], a: p[3] !== void 0 ? +p[3] : 1 };
+  }
+  throw new Error(`Cor n\xE3o reconhecida: "${token}"`);
+}
+function resolveColorMix(expr, prims) {
+  const inner = expr.replace(/^color-mix\(in srgb,\s*/, "").replace(/\)\s*$/, "");
+  const comma = inner.indexOf(",");
+  const [aTok, aPct] = splitPct(inner.slice(0, comma));
+  const [bTok, bPct] = splitPct(inner.slice(comma + 1));
+  const A = resolveColor(aTok, prims);
+  const B = resolveColor(bTok, prims);
+  const wa = (aPct != null ? aPct : bPct !== void 0 ? 100 - bPct : 50) / 100;
+  const a = wa * A.a + (1 - wa) * B.a;
+  if (a === 0) return { r: 0, g: 0, b: 0, a: 0 };
+  const mix = (ca, cb) => Math.round((wa * A.a * ca + (1 - wa) * B.a * cb) / a);
+  return { r: mix(A.r, B.r), g: mix(A.g, B.g), b: mix(A.b, B.b), a: Number(a.toFixed(4)) };
+}
+function splitPct(s) {
+  const m = s.trim().match(/^(.*?)\s+(\d+(?:\.\d+)?)%$/);
+  return m ? [m[1].trim(), +m[2]] : [s.trim(), void 0];
+}
+function resolveValue(value, prims) {
+  const v = value.trim();
+  if (v.startsWith("color-mix(")) return toCss(resolveColorMix(v, prims));
+  if (v.startsWith("var(--color-")) return toCss(resolveColor(v, prims));
+  if (v.startsWith("#")) return toCss(hexToRgba(v));
+  return v;
+}
+function resolveTokenMap(map, prims) {
+  const out = {};
+  for (const [key, val] of Object.entries(map)) {
+    if (key.startsWith("--font")) continue;
+    if (key.startsWith("--brand-secondary-texture")) continue;
+    out[key] = resolveValue(val, prims);
+  }
+  return out;
+}
+export {
+  flattenPrimitives,
+  resolveTokenMap,
+  resolveValue
+};