@praxiis/ui 0.0.1

package/src/components/Header/useHeaderLogic.ts

@@ -0,0 +1,146 @@
+/**
+ * Header Logic Hook
+ *
+ * Extracts all computational logic from the Header component.
+ * Returns memoized values for optimal render performance.
+ *
+ * Responsibilities:
+ * - Resolve responsive size prop to current breakpoint value
+ * - Calculate header dimensions with safe area insets
+ * - Determine back button visibility
+ * - Generate container and back button accessibility props
+ * - Create back button press handler
+ *
+ * External Dependencies:
+ * - react-native-safe-area-context: Safe area insets
+ * - i18n: Translated accessibility labels
+ *
+ * @see Header.tsx - Component consuming this hook
+ * @see Header.helpers.ts - Pure calculation functions
+ */
+
+import { useDesignSystem } from "../../provider";
+import { useResponsiveProp } from "@shopify/restyle";
+import { useCallback, useMemo } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useRestyleTheme } from "../../core/restyle";
+import { getHeaderA11y, getHeaderBackButtonA11y } from "./Header.a11y";
+import {
+  resolveContainerStyle,
+  resolveHeaderDimensions,
+  SIZE_TO_TEXT_VARIANT,
+} from "./Header.helpers";
+import { HeaderSize, UseHeaderLogicParams, UseHeaderLogicReturn } from "./Header.types";
+
+/**
+ * Orchestrates Header rendering logic and state management.
+ *
+ * Handles:
+ * - Responsive size resolution
+ * - Header dimension calculation with safe area insets
+ * - Back button visibility determination (shown when `onBackPress` is provided)
+ * - Back button press handling
+ * - Text variant selection based on size
+ * - Container style computation with top padding
+ * - Accessibility props for header and back button
+ * - Internationalization for back button labels
+ *
+ * @param params - Configuration object for header behavior
+ * @param params.accessibilityLabel - Custom a11y label for header
+ * @param params.accessibilityHint - Describes header purpose
+ * @param params.size - Size variant ('sm' | 'md' | 'lg')
+ * @param params.showBackButton - Whether to show back button
+ * @param params.safeAreaTop - Whether to add safe area top padding
+ * @param params.onBackPress - Optional custom back handler
+ *
+ * @returns Computed values for rendering Header
+ * @returns {function} handleBack - Back button press handler
+ * @returns {boolean} showBack - Whether to display back button
+ * @returns {object} dimensions - Height and padding dimensions
+ * @returns {ViewStyle} containerStyle - Dynamic container styles
+ * @returns {object} a11yContainerProps - Container accessibility props
+ * @returns {string} textVariant - Text variant for title
+ * @returns {object} backButtonA11yProps - Back button accessibility props
+ *
+ * @performance This hook uses useMemo() for expensive calculations
+ *
+ * @example
+ * const {
+ *   showBack,
+ *   textVariant,
+ *   dimensions,
+ *   handleBack,
+ *   a11yContainerProps
+ * } = useHeaderLogic({
+ *   size: "md",
+ *   showBackButton: true,
+ *   safeAreaTop: true,
+ *   accessibilityLabel: "Profile header",
+ * });
+ */
+export function useHeaderLogic(
+  params: UseHeaderLogicParams,
+): UseHeaderLogicReturn {
+  const {
+    accessibilityLabel,
+    accessibilityHint,
+    size,
+    showBackButton,
+    safeAreaTop,
+    onBackPress,
+  } = params;
+
+  const insets = useSafeAreaInsets();
+  const theme = useRestyleTheme();
+  const { labels: t } = useDesignSystem();
+
+  const resolvedSize = (useResponsiveProp(size) ?? "md") as HeaderSize;
+  const showBack = !!showBackButton && onBackPress !== undefined;
+
+  const dimensions = useMemo(
+    () =>
+      resolveHeaderDimensions({
+        resolvedSize,
+        safeAreaTop,
+        topInset: insets.top,
+        theme,
+      }),
+    [resolvedSize, safeAreaTop, insets.top, theme],
+  );
+
+  const containerStyle = resolveContainerStyle(dimensions.topPadding);
+
+  const handleBack = useCallback(() => {
+    onBackPress?.();
+  }, [onBackPress]);
+
+  const a11yContainerProps = useMemo(
+    () =>
+      getHeaderA11y({
+        accessibilityLabel,
+        accessibilityHint,
+      }),
+    [accessibilityLabel, accessibilityHint],
+  );
+
+  const textVariant = SIZE_TO_TEXT_VARIANT[resolvedSize];
+
+  const backButtonA11yProps = useMemo(
+    () =>
+      getHeaderBackButtonA11y({
+        accessibilityLabel: t.header.backButton.label,
+        accessibilityHint: t.header.backButton.hint,
+      }),
+    [t],
+  );
+
+  return {
+    handleBack,
+    showBack,
+    dimensions,
+    containerStyle,
+    a11yContainerProps,
+    textVariant,
+    backButtonA11yProps,
+  };
+}

package/src/components/ScheduleItem/ScheduleItem/ScheduleItem.helpers.ts

@@ -0,0 +1,50 @@
+import type {
+  ScheduleItemSize,
+  ScheduleItemSizeConfig,
+  ScheduleItemSizeConfigMap,
+} from "./ScheduleItem.types";
+
+// ─── Time Formatting ─────────────────────────────────────────────────────────
+
+export function formatTimeRange(startTime: Date, endTime: Date): string {
+  const startStr = startTime.toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+  const endStr = endTime.toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+  return `${startStr} – ${endStr}`;
+}
+
+// ─── Size Config ─────────────────────────────────────────────────────────────
+
+const SCHEDULE_ITEM_SIZE_CONFIG: ScheduleItemSizeConfigMap = {
+  sm: {
+    indicatorHeight: 32,
+    contentGap: "2xs",
+    titleVariant: "labelSmall",
+    timeVariant: "captionSmall",
+  },
+  md: {
+    indicatorHeight: 48,
+    contentGap: "2xs",
+    titleVariant: "labelSmall",
+    timeVariant: "captionSmall",
+  },
+  lg: {
+    indicatorHeight: 64,
+    contentGap: "xs",
+    titleVariant: "labelMedium",
+    timeVariant: "bodySmall",
+  },
+};
+
+export function getScheduleItemSizeConfig(
+  size: ScheduleItemSize,
+): ScheduleItemSizeConfig {
+  return SCHEDULE_ITEM_SIZE_CONFIG[size];
+}

package/src/components/ScheduleItem/ScheduleItem/ScheduleItem.tsx

@@ -0,0 +1,78 @@
+import { RestyleTheme } from "../../../core/restyle";
+import { Box, Text } from "../../../primitives";
+import {
+  createRestyleComponent,
+  createVariant,
+  layout,
+  spacing,
+  spacingShorthand,
+} from "@shopify/restyle";
+import React, { memo } from "react";
+import { Pressable as RNPressable } from "react-native";
+import { BaseScheduleItemProps, ScheduleItemProps } from "./ScheduleItem.types";
+import { useScheduleItemLogic } from "./useScheduleItemLogic";
+
+/**
+ * Base ScheduleItem container with Restyle variant support.
+ *
+ * Built on RNPressable so press handling and variant styling live in one element.
+ * @internal
+ */
+const BaseScheduleItemContainer = createRestyleComponent<
+  BaseScheduleItemProps,
+  RestyleTheme
+>(
+  [
+    layout,
+    spacing,
+    spacingShorthand,
+    createVariant({ themeKey: "scheduleItemSizes", property: "size" }),
+  ],
+  RNPressable,
+);
+
+function ScheduleItemComponent({
+  task,
+  onPress,
+  size = "md",
+  testID,
+  ...rest
+}: ScheduleItemProps) {
+  const { timeRange, sizeConfig, a11yProps } = useScheduleItemLogic({
+    task,
+    size,
+    onPress,
+  });
+
+  return (
+    <BaseScheduleItemContainer
+      size={size}
+      onPress={onPress}
+      disabled={!onPress}
+      testID={testID}
+      {...a11yProps}
+      {...rest}
+    >
+      {/* Left indicator bar */}
+      <Box
+        width={4}
+        height={sizeConfig.indicatorHeight}
+        borderRadius="full"
+        backgroundColor={task.indicatorColor}
+      />
+
+      {/* Content */}
+      <Box flex={1} gap={sizeConfig.contentGap}>
+        <Text variant={sizeConfig.titleVariant} color="textPrimary">
+          {task.title}
+        </Text>
+        <Text variant={sizeConfig.timeVariant} color="textSecondary">
+          {timeRange}
+        </Text>
+      </Box>
+    </BaseScheduleItemContainer>
+  );
+}
+
+export const ScheduleItem = memo(ScheduleItemComponent);
+ScheduleItem.displayName = "ScheduleItem";

package/src/components/ScheduleItem/ScheduleItem/ScheduleItem.types.ts

@@ -0,0 +1,99 @@
+import { ResponsiveValue, SpacingShorthandProps, VariantProps } from "@shopify/restyle";
+import { PressableProps as RNPressableProps } from "react-native";
+import type { RestyleTheme } from "../../..";
+import type { PressableRestyleProps } from "../../../primitives/layout/Pressable";
+
+// ─── Size (derived from theme so it stays in sync) ───────────────────────────
+
+export type ScheduleItemSize = Exclude<
+  keyof RestyleTheme["scheduleItemSizes"],
+  "defaults"
+>;
+
+// ─── Base component props (Restyle variant + Pressable) ──────────────────────
+
+type ScheduleItemSizeVariantProps = VariantProps<
+  RestyleTheme,
+  "scheduleItemSizes",
+  "size"
+>;
+
+/** Base props for the Restyle container — used with createRestyleComponent. */
+export type BaseScheduleItemProps = ScheduleItemSizeVariantProps &
+  PressableRestyleProps &
+  SpacingShorthandProps<RestyleTheme> &
+  RNPressableProps;
+
+// ─── Size config (only values that cannot be expressed as theme tokens) ───────
+
+export interface ScheduleItemSizeConfig {
+  indicatorHeight: number;
+  contentGap: keyof RestyleTheme["spacing"];
+  titleVariant: "labelSmall" | "labelMedium";
+  timeVariant: "captionSmall" | "bodySmall";
+}
+
+export type ScheduleItemSizeConfigMap = Record<
+  ScheduleItemSize,
+  ScheduleItemSizeConfig
+>;
+
+// ─── Data ────────────────────────────────────────────────────────────────────
+
+/**
+ * Data for a single scheduled task or event
+ */
+export interface ScheduleItemData {
+  /** Unique identifier */
+  id: string;
+  /** Task title (e.g., "Team Standup") */
+  title: string;
+  /** Task start time */
+  startTime: Date;
+  /** Task end time */
+  endTime: Date;
+  /** Theme color token for the left indicator bar */
+  indicatorColor: keyof RestyleTheme["colors"];
+}
+
+// ─── Component Props ─────────────────────────────────────────────────────────
+
+export interface ScheduleItemProps extends Omit<BaseScheduleItemProps, "style"> {
+  task: ScheduleItemData;
+  onPress?: () => void;
+  /**
+   * Size variant — drives container padding via the `scheduleItemSizes` theme
+   * variant and sub-element config (indicator height, text variants).
+   * `VariantProps` already types this as `ResponsiveValue<ScheduleItemSize, ...>`.
+   * @default "md"
+   */
+  testID?: string;
+}
+
+// ─── Hook ────────────────────────────────────────────────────────────────────
+
+export interface UseScheduleItemLogicParams {
+  task: ScheduleItemData;
+  size: ResponsiveValue<ScheduleItemSize, RestyleTheme["breakpoints"]>;
+  onPress?: () => void;
+}
+
+export interface UseScheduleItemLogicReturn {
+  timeRange: string;
+  sizeConfig: ScheduleItemSizeConfig;
+  a11yProps: ScheduleItemA11yProps;
+}
+
+// ─── Accessibility ───────────────────────────────────────────────────────────
+
+export interface ScheduleItemA11yParams {
+  title: string;
+  timeRange: string;
+  onPress?: () => void;
+}
+
+export interface ScheduleItemA11yProps {
+  accessible: boolean;
+  accessibilityRole: "button" | "text";
+  accessibilityLabel: string;
+}

package/src/components/ScheduleItem/ScheduleItem/index.ts

@@ -0,0 +1,16 @@
+export { ScheduleItem } from "./ScheduleItem";
+export type {
+  BaseScheduleItemProps,
+  ScheduleItemA11yParams,
+  ScheduleItemA11yProps,
+  ScheduleItemData,
+  ScheduleItemProps,
+  ScheduleItemSize,
+  ScheduleItemSizeConfig,
+  ScheduleItemSizeConfigMap,
+  UseScheduleItemLogicParams,
+  UseScheduleItemLogicReturn,
+} from "./ScheduleItem.types";
+export { formatTimeRange, getScheduleItemSizeConfig } from "./ScheduleItem.helpers";
+export { getScheduleItemA11y } from "./ScheduleItem.a11y";
+export { useScheduleItemLogic } from "./useScheduleItemLogic";

package/src/components/ScheduleItem/ScheduleItem/useScheduleItemLogic.ts

@@ -0,0 +1,31 @@
+import { useResponsiveProp } from "@shopify/restyle";
+import { useMemo } from "react";
+import { getScheduleItemA11y } from "./ScheduleItem.a11y";
+import {
+  formatTimeRange,
+  getScheduleItemSizeConfig,
+} from "./ScheduleItem.helpers";
+import type {
+  ScheduleItemSize,
+  UseScheduleItemLogicParams,
+  UseScheduleItemLogicReturn,
+} from "./ScheduleItem.types";
+
+export function useScheduleItemLogic({
+  task,
+  size,
+  onPress,
+}: UseScheduleItemLogicParams): UseScheduleItemLogicReturn {
+  const resolvedSize = (useResponsiveProp(size) ?? "md") as ScheduleItemSize;
+
+  const timeRange = formatTimeRange(task.startTime, task.endTime);
+
+  const sizeConfig = getScheduleItemSizeConfig(resolvedSize);
+
+  const a11yProps = useMemo(
+    () => getScheduleItemA11y({ title: task.title, timeRange, onPress }),
+    [task.title, timeRange, onPress],
+  );
+
+  return { timeRange, sizeConfig, a11yProps };
+}

package/src/components/ScheduleItem/index.ts

@@ -0,0 +1,15 @@
+// ScheduleItem sub-component
+export { ScheduleItem } from "./ScheduleItem/ScheduleItem";
+export { getScheduleItemA11y } from "./ScheduleItem/ScheduleItem.a11y";
+export {
+  formatTimeRange,
+  getScheduleItemSizeConfig,
+} from "./ScheduleItem/ScheduleItem.helpers";
+export type {
+  ScheduleItemData,
+  ScheduleItemProps,
+  ScheduleItemSize,
+  ScheduleItemSizeConfig,
+  ScheduleItemSizeConfigMap,
+} from "./ScheduleItem/ScheduleItem.types";
+export { useScheduleItemLogic } from "./ScheduleItem/useScheduleItemLogic";

package/src/components/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Design System Components
+ *
+ * Composite components that are built from primitives but are not
+ * considered atomic/primitive themselves.
+ */
+
+// ─── CalendarStrip ───────────────────────────────────────────────────────────
+export {
+  CalendarStrip,
+  DayCard,
+  type CalendarStripProps,
+  type CalendarStripSize,
+  type DayCardProps,
+} from "./CalendarStrip";
+
+// ─── EmptyState ─────────────────────────────────────────────────────────────
+export {
+  EmptyState,
+  type EmptyStateProps,
+  type EmptyStateVariant,
+} from "./EmptyState";
+
+// ─── Header ──────────────────────────────────────────────────────────────────
+export {
+  Header,
+  HeaderRightItems,
+  type HeaderProps,
+  type HeaderRightItemsProps,
+  type HeaderSize,
+  type HeaderVariant,
+} from "./Header";
+
+// ─── ScheduleItem ────────────────────────────────────────────────────────────
+export {
+  ScheduleItem,
+  type ScheduleItemData,
+  type ScheduleItemProps,
+  type ScheduleItemSize,
+} from "./ScheduleItem";

package/src/core/index.ts

@@ -0,0 +1,34 @@
+/**
+ * Core Primitives Module
+ *
+ * Fundamental, low-level primitives that serve as the foundation
+ * for all design system components.
+ *
+ * ## Restyle Integration
+ * - **RestyleTheme**: Type-safe theme definition
+ * - **useRestyleTheme**: Hook for accessing the current Restyle theme
+ *
+ * @example
+ * import { Box, Text, AnimatedBox } from "@/design-system/core";
+ *
+ * <Box padding="lg" backgroundColor="surfacePrimary">
+ *   <Text variant="headingLarge">Hello World</Text>
+ * </Box>
+ */
+
+// Restyle Integration
+export {
+  restyleDarkTheme,
+  restyleLightTheme,
+  restyleTheme,
+  ThemeProvider,
+  useRestyleTheme,
+  buildPair,
+  buildRestyleTheme,
+  buildRestyleThemeFromThemeColors,
+  restylePresetThemes,
+  type RestyleTheme,
+  type AppThemeColors,
+  type RestyleThemePair,
+  type SemanticColorsInput,
+} from "./restyle";

package/src/core/restyle/RestyleThemeProviderWrapper.tsx

@@ -0,0 +1,31 @@
+/**
+ * El Sendero Design System - Restyle Theme Provider Wrapper
+ *
+ * Provides the correct Restyle theme (light/dark) based on the
+ * current design system mode.
+ *
+ * @example
+ * <RestyleThemeProviderWrapper>
+ *   <YourApp />
+ * </RestyleThemeProviderWrapper>
+ */
+
+import { ThemeProvider } from "@shopify/restyle";
+import React, { ReactNode } from "react";
+import { useColorScheme } from "react-native";
+import { restyleDarkTheme, restyleLightTheme } from "./restyleTheme";
+
+export interface RestyleThemeProviderWrapperProps {
+  children: ReactNode;
+}
+
+export function RestyleThemeProviderWrapper({
+  children,
+}: RestyleThemeProviderWrapperProps) {
+  const isDark = useColorScheme() === "dark";
+  return (
+    <ThemeProvider theme={isDark ? restyleDarkTheme : restyleLightTheme}>
+      {children}
+    </ThemeProvider>
+  );
+}

package/src/core/restyle/index.ts

@@ -0,0 +1,38 @@
+/**
+ * El Sendero Design System - Restyle Exports
+ *
+ * Restyle provides type-safe, prop-based styling for React Native.
+ * This module exports Restyle components and utilities configured with our design system.
+ *
+ * @example
+ * // Basic usage
+ * import { RestyleTheme, ThemeProvider, restyleTheme } from '@/design-system/core/restyle';
+ *
+ * <ThemeProvider theme={restyleTheme}>
+ *   <Box padding="lg" backgroundColor="surfacePrimary" borderRadius="md">
+ *     <Text variant="headingLarge" color="textPrimary">
+ *       Hello World
+ *     </Text>
+ *   </Box>
+ * </ThemeProvider>
+ */
+
+export { ThemeProvider } from "@shopify/restyle";
+export {
+  restyleDarkTheme,
+  restyleLightTheme,
+  restyleTheme,
+  buildRestyleTheme,
+  buildRestyleThemeFromThemeColors,
+  type RestyleTheme,
+  type AppThemeColors,
+  type SemanticColorsInput,
+} from "./restyleTheme";
+
+export { useRestyleTheme } from "./useRestyleTheme";
+
+export {
+  buildPair,
+  restylePresetThemes,
+  type RestyleThemePair,
+} from "./restylePresetRegistry";