@praxiis/ui 0.0.1

package/src/core/restyle/restyleTypes.ts

@@ -0,0 +1,8 @@
+/**
+ * El Sendero Design System - Restyle Types
+ *
+ * Type exports for Restyle theme and components.
+ */
+
+// Re-export RestyleTheme from restyleTheme for convenience
+export type { RestyleTheme } from "./restyleTheme";

package/src/core/restyle/useRestyleTheme.ts

@@ -0,0 +1,10 @@
+/**
+ * El Sendero Design System - Restyle Theme Hook
+ *
+ * Thin wrapper around Restyle's useTheme to access the active Restyle theme.
+ */
+
+import { useTheme } from "@shopify/restyle";
+import { RestyleTheme } from "./restyleTheme";
+
+export const useRestyleTheme = () => useTheme<RestyleTheme>();

package/src/hooks/animations/index.ts

@@ -0,0 +1,3 @@
+export { useAnimatedValue } from "./useAnimatedValue";
+export { usePulseAnimation, type PulseAnimationConfig } from "./usePulseAnimation";
+export { useEntranceAnimation, type EntranceAnimationConfig, type EntranceAnimationResult } from "./useEntranceAnimation";

package/src/hooks/animations/useAnimatedValue.ts

@@ -0,0 +1,10 @@
+import { useRef } from "react";
+import { Animated } from "react-native";
+
+/**
+ * Creates a stable Animated.Value that persists across re-renders.
+ * Replaces the `useRef(new Animated.Value(x)).current` boilerplate.
+ */
+export function useAnimatedValue(initialValue: number): Animated.Value {
+  return useRef(new Animated.Value(initialValue)).current;
+}

package/src/hooks/animations/useEntranceAnimation.ts

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { Animated } from "react-native";
+import { useReducedMotion } from "../useReducedMotion";
+import { springConfig, duration as durationTokens } from "../../tokens/motion";
+import { useAnimatedValue } from "./useAnimatedValue";
+
+export interface EntranceAnimationConfig {
+  /** Spring config for entrance. Default: springConfig.gentle */
+  spring?: { tension: number; friction: number };
+  /** Exit timing duration in ms. Default: duration.normal (200) */
+  exitDuration?: number;
+  /** TranslateY offset (px). Default: -20 */
+  translateY?: number;
+  /** Initial scale. Default: 0.95 */
+  initialScale?: number;
+}
+
+export interface EntranceAnimationResult {
+  /** The underlying animated value (0 = hidden, 1 = visible) */
+  animatedValue: Animated.Value;
+  /** Pre-built animated style with opacity, translateY, and scale */
+  animatedStyle: {
+    opacity: Animated.Value;
+    transform: (
+      | { translateY: Animated.AnimatedInterpolation<number> }
+      | { scale: Animated.AnimatedInterpolation<number> }
+    )[];
+  };
+  /** Call to animate out, invokes callback when complete */
+  dismiss: (onComplete: () => void) => void;
+}
+
+/**
+ * Entrance/exit animation with opacity, translateY, and scale.
+ * Entrance uses spring physics, exit uses timing.
+ * Respects reduced motion — skips all animations when enabled.
+ * Wired to springConfig.gentle and duration.normal by default.
+ */
+export function useEntranceAnimation(
+  config?: EntranceAnimationConfig,
+): EntranceAnimationResult {
+  const {
+    spring = springConfig.gentle,
+    exitDuration = durationTokens.normal,
+    translateY = -20,
+    initialScale = 0.95,
+  } = config ?? {};
+
+  const prefersReducedMotion = useReducedMotion();
+  const animatedValue = useAnimatedValue(prefersReducedMotion ? 1 : 0);
+
+  // Entrance spring
+  useEffect(() => {
+    if (prefersReducedMotion) {
+      animatedValue.setValue(1);
+      return;
+    }
+
+    Animated.spring(animatedValue, {
+      toValue: 1,
+      useNativeDriver: true,
+      ...spring,
+    }).start();
+  }, [animatedValue, prefersReducedMotion, spring]);
+
+  // Dismiss handler
+  const dismiss = useCallback(
+    (onComplete: () => void) => {
+      if (prefersReducedMotion) {
+        onComplete();
+        return;
+      }
+
+      Animated.timing(animatedValue, {
+        toValue: 0,
+        duration: exitDuration,
+        useNativeDriver: true,
+      }).start(() => onComplete());
+    },
+    [animatedValue, prefersReducedMotion, exitDuration],
+  );
+
+  // Pre-built style
+  const animatedStyle = useMemo(
+    () => ({
+      opacity: animatedValue,
+      transform: [
+        {
+          translateY: animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [translateY, 0],
+          }),
+        },
+        {
+          scale: animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [initialScale, 1],
+          }),
+        },
+      ],
+    }),
+    [animatedValue, translateY, initialScale],
+  );
+
+  return { animatedValue, animatedStyle, dismiss };
+}

package/src/hooks/animations/usePulseAnimation.ts

@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+import { Animated, Easing } from "react-native";
+import { useReducedMotion } from "../useReducedMotion";
+import { semanticMotion } from "../../tokens/motion";
+import { useAnimatedValue } from "./useAnimatedValue";
+
+export interface PulseAnimationConfig {
+  /** Total pulse cycle duration in ms. Default: semanticMotion.skeleton.duration (1500) */
+  duration?: number;
+  /** Minimum opacity. Default: 0.4 */
+  minOpacity?: number;
+  /** Maximum opacity. Default: 1 */
+  maxOpacity?: number;
+  /** Whether the animation is active. Default: true */
+  enabled?: boolean;
+}
+
+/**
+ * Looping opacity pulse animation.
+ * Respects reduced motion — returns static max opacity when disabled.
+ * Wired to semanticMotion.skeleton duration by default.
+ */
+export function usePulseAnimation(config?: PulseAnimationConfig): Animated.Value {
+  const {
+    duration = semanticMotion.skeleton.duration,
+    minOpacity = 0.4,
+    maxOpacity = 1,
+    enabled = true,
+  } = config ?? {};
+
+  const prefersReducedMotion = useReducedMotion();
+  const opacity = useAnimatedValue(maxOpacity);
+  const isActive = enabled && !prefersReducedMotion;
+
+  useEffect(() => {
+    if (!isActive) {
+      opacity.setValue(maxOpacity);
+      return;
+    }
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: minOpacity,
+          duration: duration / 2,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: maxOpacity,
+          duration: duration / 2,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+
+    animation.start();
+    return () => animation.stop();
+  }, [isActive, duration, minOpacity, maxOpacity, opacity]);
+
+  return opacity;
+}

package/src/hooks/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Design System Hooks
+ *
+ * Custom hooks for motion, animation, and accessibility.
+ *
+ * ## Motion Hooks
+ * - **useReducedMotion**: Respect user's reduced motion preference
+ * - **useMotionSafeDuration**: Get 0 duration when reduced motion enabled
+ *
+ * ## Animation Hooks
+ * - **useAnimatedValue**: Stable Animated.Value across re-renders
+ * - **usePulseAnimation**: Looping opacity pulse (skeleton shimmer)
+ * - **useEntranceAnimation**: Spring entrance + timing exit
+ *
+ * @example
+ * import { useReducedMotion, usePulseAnimation } from "@/design-system/hooks";
+ */
+
+// Re-export motion hooks
+export { useReducedMotion, useMotionSafeDuration } from './useReducedMotion';
+
+// Re-export animation hooks
+export {
+  useAnimatedValue,
+  usePulseAnimation,
+  useEntranceAnimation,
+  type PulseAnimationConfig,
+  type EntranceAnimationConfig,
+  type EntranceAnimationResult,
+} from './animations';

package/src/hooks/useReducedMotion.ts

@@ -0,0 +1,60 @@
+/**
+ * StayEasy Design System - Reduced Motion Hook
+ *
+ * Respects user's accessibility preference for reduced motion.
+ *
+ * @example
+ * const prefersReducedMotion = useReducedMotion();
+ * const animationDuration = prefersReducedMotion ? 0 : 200;
+ */
+
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+/**
+ * Hook to detect if the user prefers reduced motion.
+ *
+ * On iOS: Checks "Reduce Motion" setting
+ * On Android: Checks "Remove animations" setting
+ *
+ * @returns true if user prefers reduced motion
+ */
+export function useReducedMotion(): boolean {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+
+  useEffect(() => {
+    // Check initial value
+    AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+      setPrefersReducedMotion(enabled);
+    });
+
+    // Subscribe to changes
+    const subscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      (enabled) => {
+        setPrefersReducedMotion(enabled);
+      }
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return prefersReducedMotion;
+}
+
+/**
+ * Get motion-safe duration.
+ * Returns 0 if reduced motion is preferred, otherwise the provided duration.
+ *
+ * @param duration - The desired animation duration in ms
+ * @returns Safe duration respecting user preference
+ *
+ * @example
+ * const duration = useMotionSafeDuration(200);
+ */
+export function useMotionSafeDuration(duration: number): number {
+  const prefersReducedMotion = useReducedMotion();
+  return prefersReducedMotion ? 0 : duration;
+}

package/src/i18n/index.ts

@@ -0,0 +1,2 @@
+export { en, es } from "./labels";
+export type { DesignSystemLabels, DesignSystemLabelsOverride } from "./labels";

package/src/i18n/labels/en.ts

@@ -0,0 +1,120 @@
+import type { DesignSystemLabels } from "./types";
+
+export const en: DesignSystemLabels = {
+  designSystem: {
+    button: {
+      loadingLabel: "Loading",
+    },
+    iconButton: {
+      loadingLabel: "Loading",
+    },
+    radioButton: {
+      fallbackLabel: "Radio button",
+    },
+    avatar: {
+      fallbackLabel: "User avatar",
+      statusOnline: "online",
+      statusOffline: "offline",
+      statusBusy: "busy",
+      statusAway: "away",
+    },
+    badge: {
+      fallbackLabel: "badge",
+      statusIndicator: "status indicator",
+      colorPrimary: "indicator",
+      colorSuccess: "success",
+      colorWarning: "warning",
+      colorError: "error",
+      colorInfo: "information",
+    },
+    chip: {
+      toggleHint: "Double tap to toggle selection",
+      removeHint: "Double tap to remove",
+    },
+    spinner: {
+      fallbackLabel: "Loading",
+    },
+    progressBar: {
+      fallbackLabel: "Progress",
+    },
+    toast: {
+      prefixSuccess: "Success",
+      prefixError: "Error",
+      prefixWarning: "Warning",
+      prefixInfo: "Info",
+    },
+    textInput: {
+      fallbackLabel: "Text input",
+      required: "required",
+      errorPrefix: "Error",
+    },
+    modal: {
+      fallbackTitle: "Modal",
+      positionBottom: "bottom sheet",
+      positionTop: "top dialog",
+      positionCenter: "dialog",
+      closeLabel: "Close",
+      closeHint: "Closes the modal dialog",
+    },
+    segmentedControl: {
+      containerLabel: "Segmented control",
+      options: "options",
+      selected: "selected",
+      currentlySelected: "Currently selected",
+      doubleTapToSelect: "Double tap to select",
+      of: "of",
+    },
+    selectSheet: {
+      positionBottom: "bottom sheet",
+      positionTop: "top sheet",
+      positionCenter: "dialog",
+      fallbackTitle: "Selection",
+      selected: "selected",
+      disabled: "disabled",
+      of: "of",
+      doneLabel: "Done",
+      itemsSelected: "items selected",
+      doneHint: "Confirms selection and closes the sheet",
+      closeLabel: "Close",
+      closeHint: "Closes the selection sheet without saving",
+      deselected: "deselected",
+    },
+  },
+  calendar: {
+    datePicker: {
+      label: "Date picker",
+      selected: "selected",
+      today: "today",
+      daysShown: "days shown",
+    },
+    days: {
+      sun: "Sun",
+      mon: "Mon",
+      tue: "Tue",
+      wed: "Wed",
+      thu: "Thu",
+      fri: "Fri",
+      sat: "Sat",
+    },
+    months: {
+      jan: "Jan",
+      feb: "Feb",
+      mar: "Mar",
+      apr: "Apr",
+      may: "May",
+      jun: "Jun",
+      jul: "Jul",
+      aug: "Aug",
+      sep: "Sep",
+      oct: "Oct",
+      nov: "Nov",
+      dec: "Dec",
+    },
+  },
+  header: {
+    backButton: {
+      label: "Go back",
+      hint: "Navigates to the previous screen",
+    },
+  },
+};

package/src/i18n/labels/es.ts

@@ -0,0 +1,120 @@
+import type { DesignSystemLabels } from "./types";
+
+export const es: DesignSystemLabels = {
+  designSystem: {
+    button: {
+      loadingLabel: "Cargando",
+    },
+    iconButton: {
+      loadingLabel: "Cargando",
+    },
+    radioButton: {
+      fallbackLabel: "Botón de radio",
+    },
+    avatar: {
+      fallbackLabel: "Avatar de usuario",
+      statusOnline: "en línea",
+      statusOffline: "desconectado",
+      statusBusy: "ocupado",
+      statusAway: "ausente",
+    },
+    badge: {
+      fallbackLabel: "insignia",
+      statusIndicator: "indicador de estado",
+      colorPrimary: "indicador",
+      colorSuccess: "éxito",
+      colorWarning: "advertencia",
+      colorError: "error",
+      colorInfo: "información",
+    },
+    chip: {
+      toggleHint: "Toca dos veces para alternar selección",
+      removeHint: "Toca dos veces para eliminar",
+    },
+    spinner: {
+      fallbackLabel: "Cargando",
+    },
+    progressBar: {
+      fallbackLabel: "Progreso",
+    },
+    toast: {
+      prefixSuccess: "Éxito",
+      prefixError: "Error",
+      prefixWarning: "Advertencia",
+      prefixInfo: "Info",
+    },
+    textInput: {
+      fallbackLabel: "Campo de texto",
+      required: "requerido",
+      errorPrefix: "Error",
+    },
+    modal: {
+      fallbackTitle: "Modal",
+      positionBottom: "hoja inferior",
+      positionTop: "diálogo superior",
+      positionCenter: "diálogo",
+      closeLabel: "Cerrar",
+      closeHint: "Cierra el diálogo modal",
+    },
+    segmentedControl: {
+      containerLabel: "Control segmentado",
+      options: "opciones",
+      selected: "seleccionado",
+      currentlySelected: "Actualmente seleccionado",
+      doubleTapToSelect: "Toca dos veces para seleccionar",
+      of: "de",
+    },
+    selectSheet: {
+      positionBottom: "hoja inferior",
+      positionTop: "hoja superior",
+      positionCenter: "diálogo",
+      fallbackTitle: "Selección",
+      selected: "seleccionado",
+      disabled: "deshabilitado",
+      of: "de",
+      doneLabel: "Listo",
+      itemsSelected: "elementos seleccionados",
+      doneHint: "Confirma la selección y cierra la hoja",
+      closeLabel: "Cerrar",
+      closeHint: "Cierra la hoja de selección sin guardar",
+      deselected: "deseleccionado",
+    },
+  },
+  calendar: {
+    datePicker: {
+      label: "Selector de fecha",
+      selected: "seleccionado",
+      today: "hoy",
+      daysShown: "días mostrados",
+    },
+    days: {
+      sun: "Dom",
+      mon: "Lun",
+      tue: "Mar",
+      wed: "Mié",
+      thu: "Jue",
+      fri: "Vie",
+      sat: "Sáb",
+    },
+    months: {
+      jan: "Ene",
+      feb: "Feb",
+      mar: "Mar",
+      apr: "Abr",
+      may: "May",
+      jun: "Jun",
+      jul: "Jul",
+      aug: "Ago",
+      sep: "Sep",
+      oct: "Oct",
+      nov: "Nov",
+      dec: "Dic",
+    },
+  },
+  header: {
+    backButton: {
+      label: "Volver",
+      hint: "Navega a la pantalla anterior",
+    },
+  },
+};

package/src/i18n/labels/index.ts

@@ -0,0 +1,6 @@
+export { en } from "./en";
+export { es } from "./es";
+export type {
+  DesignSystemLabels,
+  DesignSystemLabelsOverride,
+} from "./types";