@praxiis/ui 0.0.1

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@praxiis/ui",
+  "version": "0.0.1",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.tsx",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/__tests__",
+    "!src/**/*.test.*",
+    "!src/**/*.a11y.*",
+    "!src/**/*.md",
+    "!dist/*.map"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "check-types": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "peerDependencies": {
+    "@expo/vector-icons": "^15.1.1",
+    "@shopify/restyle": "^2.4.5",
+    "react": "19.2.0",
+    "react-native": "0.83.4",
+    "react-native-safe-area-context": "~5.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-flow": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@expo/vector-icons": "^15.1.1",
+    "@react-native/babel-preset": "0.83.2",
+    "@shopify/restyle": "^2.4.5",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^25.4.0",
+    "@types/react": "~19.2.2",
+    "babel-jest": "^30.3.0",
+    "jest": "^30.3.0",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-test-renderer": "19.2.0",
+    "tsup": "^8.4.0",
+    "typescript": "~5.9.2"
+  }
+}

package/src/__test-utils__/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { DesignSystemProvider } from "../provider";
+import { restyleLightTheme } from "../core/restyle/restyleTheme";
+
+/**
+ * Standard test wrapper providing the DesignSystemProvider with default theme.
+ */
+export const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <DesignSystemProvider>{children}</DesignSystemProvider>
+);
+
+/**
+ * Extended theme with sample app-specific color tokens for testing AppThemeColors support.
+ */
+export const extendedTheme = {
+  ...restyleLightTheme,
+  colors: {
+    ...restyleLightTheme.colors,
+    pokemonFire: "#F08030",
+    pokemonWater: "#6890F0",
+    pokemonGrass: "#78C850",
+    pokemonElectric: "#F8D030",
+  },
+} as typeof restyleLightTheme;
+
+/**
+ * Test wrapper providing the DesignSystemProvider with extended theme colors.
+ * Used to verify components work with AppThemeColors augmentation.
+ */
+export const ExtendedThemeWrapper = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => (
+  <DesignSystemProvider lightTheme={extendedTheme}>
+    {children}
+  </DesignSystemProvider>
+);

package/src/components/CalendarStrip/CalendarStrip.helpers.ts

@@ -0,0 +1,106 @@
+/**
+ * CalendarStrip Component Helpers
+ *
+ * Pure functions for date arithmetic and size configuration.
+ * DayCard-specific helpers (key lookups) live in DayCard/DayCard.helpers.ts.
+ *
+ * ## Size Configurations
+ *
+ * | Size | Container Gap | Day Padding V | Day Number    | Label       |
+ * |------|---------------|---------------|---------------|-------------|
+ * | sm   | xs            | xs            | labelSmall    | captionSmall|
+ * | md   | md            | md            | labelMedium   | captionSmall|
+ * | lg   | lg            | lg            | labelLarge    | caption     |
+ */
+
+import {
+  CalendarStripSize,
+  CalendarStripSizeConfig,
+  CalendarStripSizeConfigMap,
+} from "./CalendarStrip.types";
+
+// =============================================================================
+// DATE UTILITIES
+// =============================================================================
+
+/**
+ * Returns true when two dates fall on the same calendar day.
+ */
+export function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getDate() === b.getDate() &&
+    a.getMonth() === b.getMonth() &&
+    a.getFullYear() === b.getFullYear()
+  );
+}
+
+/**
+ * Returns a new Date that is `days` days after `date`.
+ * Does not mutate the input.
+ */
+export function addDays(date: Date, days: number): Date {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+}
+
+/**
+ * Generates an inclusive array of Date objects from `start` to `end`.
+ * Time components are stripped so comparisons are day-level.
+ */
+export function generateDateRange(start: Date, end: Date): Date[] {
+  const dates: Date[] = [];
+  const current = new Date(
+    start.getFullYear(),
+    start.getMonth(),
+    start.getDate(),
+  );
+  const last = new Date(
+    end.getFullYear(),
+    end.getMonth(),
+    end.getDate(),
+  ).getTime();
+  while (current.getTime() <= last) {
+    dates.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+  return dates;
+}
+
+// =============================================================================
+// SIZE CONFIGURATION
+// =============================================================================
+
+/**
+ * Size configuration map.
+ * Values mirror the calendarStripSizes entries in restyleTheme.ts.
+ */
+export const CALENDAR_STRIP_SIZE_CONFIG: CalendarStripSizeConfigMap = {
+  sm: {
+    containerGap: "xs",
+    dayPaddingVertical: "xs",
+    dayNumberVariant: "labelSmall",
+    labelVariant: "captionSmall",
+  },
+  md: {
+    containerGap: "md",
+    dayPaddingVertical: "md",
+    dayNumberVariant: "labelMedium",
+    labelVariant: "captionSmall",
+  },
+  lg: {
+    containerGap: "lg",
+    dayPaddingVertical: "lg",
+    dayNumberVariant: "labelLarge",
+    labelVariant: "caption",
+  },
+} as const;
+
+/**
+ * Returns the resolved styling configuration for a given size.
+ */
+export function getCalendarStripSizeConfig(
+  size: CalendarStripSize,
+): CalendarStripSizeConfig {
+  return CALENDAR_STRIP_SIZE_CONFIG[size];
+}

package/src/components/CalendarStrip/CalendarStrip.tsx

@@ -0,0 +1,83 @@
+import { RestyleTheme } from "../../core/restyle";
+import { Box } from "../../primitives";
+import {
+  createRestyleComponent,
+  layout,
+  spacing,
+  spacingShorthand,
+} from "@shopify/restyle";
+import React, { memo, useCallback } from "react";
+import { isSameDay } from "./CalendarStrip.helpers";
+import {
+  BaseCalendarStripProps,
+  CalendarStripProps,
+} from "./CalendarStrip.types";
+import { DayCard } from "./DayCard";
+import { useCalendarStripLogic } from "./useCalendarStripLogic";
+
+/**
+ * Base CalendarStrip container with Restyle support.
+ * @internal
+ */
+const BaseCalendarStripContainer = createRestyleComponent<
+  BaseCalendarStripProps,
+  RestyleTheme
+>([layout, spacing, spacingShorthand], Box);
+
+function CalendarStripComponent({
+  selectedDate,
+  onDateSelected,
+  startDate,
+  endDate,
+  showDayName = true,
+  showMonthName = true,
+  size = "md",
+  testID,
+  ...restyleProps
+}: CalendarStripProps) {
+  const { dates, today, resolvedSize, containerGap, a11yProps } = useCalendarStripLogic({
+    size,
+    selectedDate,
+    startDate,
+    endDate,
+  });
+
+  const renderDay = useCallback(
+    (date: Date) => (
+      <Box key={date.toISOString()} flex={1}>
+        <DayCard
+          date={date}
+          isSelected={isSameDay(date, selectedDate)}
+          isToday={isSameDay(date, today)}
+          onPress={onDateSelected}
+          showDayName={showDayName}
+          showMonthName={showMonthName}
+          size={resolvedSize}
+        />
+      </Box>
+    ),
+    [
+      selectedDate,
+      today,
+      onDateSelected,
+      showDayName,
+      showMonthName,
+      resolvedSize,
+    ],
+  );
+
+  return (
+    <BaseCalendarStripContainer
+      testID={testID}
+      flexDirection="row"
+      gap={containerGap}
+      {...a11yProps}
+      {...restyleProps}
+    >
+      {dates.map(renderDay)}
+    </BaseCalendarStripContainer>
+  );
+}
+
+export const CalendarStrip = memo(CalendarStripComponent);
+CalendarStrip.displayName = "CalendarStrip";

package/src/components/CalendarStrip/CalendarStrip.types.ts

@@ -0,0 +1,133 @@
+/**
+ * CalendarStrip Component Types
+ *
+ * Type definitions for the CalendarStrip component and its logic hook.
+ * DayCard-specific types live in DayCard/DayCard.types.ts.
+ *
+ * @see CalendarStrip.tsx - Component implementation
+ */
+
+import { BoxProps, ResponsiveValue } from "@shopify/restyle";
+import { ViewProps } from "react-native";
+import { RestyleTheme } from "../../core/restyle";
+
+// =============================================================================
+// SIZE TYPES
+// =============================================================================
+
+/**
+ * Size variants for the CalendarStrip component.
+ *
+ * - `sm`: Compact strip — tight spacing, small text; ideal for modals or sidebars
+ * - `md`: Standard strip — default spacing and text sizes
+ * - `lg`: Prominent strip — generous spacing, large text; ideal for full-page views
+ */
+export type CalendarStripSize = "sm" | "md" | "lg";
+
+// =============================================================================
+// CONFIG TYPES
+// =============================================================================
+
+/** Resolved styling parameters for a given size. */
+export interface CalendarStripSizeConfig {
+  /** Gap token between day cards in the container. */
+  containerGap: keyof RestyleTheme["spacing"];
+  /** Vertical padding token inside each day card. */
+  dayPaddingVertical: keyof RestyleTheme["spacing"];
+  /** Text variant for the day number (e.g. "19"). */
+  dayNumberVariant: "labelSmall" | "labelMedium" | "labelLarge";
+  /** Text variant for the day/month labels (e.g. "Mon", "Feb"). */
+  labelVariant: "captionSmall" | "caption";
+}
+
+/** Map of size configurations. */
+export type CalendarStripSizeConfigMap = Record<
+  CalendarStripSize,
+  CalendarStripSizeConfig
+>;
+
+// =============================================================================
+// COMPONENT PROPS
+// =============================================================================
+
+/** Base props combining Restyle Box props with ViewProps. */
+export type BaseCalendarStripProps = BoxProps<RestyleTheme> & ViewProps;
+
+/**
+ * Props for the CalendarStrip component.
+ *
+ * @example
+ * // Basic usage — 7-day strip starting today
+ * <CalendarStrip selectedDate={date} onDateSelected={setDate} />
+ *
+ * @example
+ * // Custom range with compact size
+ * <CalendarStrip
+ *   selectedDate={date}
+ *   onDateSelected={setDate}
+ *   startDate={rangeStart}
+ *   endDate={rangeEnd}
+ *   size="sm"
+ * />
+ */
+export interface CalendarStripProps
+  extends Omit<BaseCalendarStripProps, "style"> {
+  /** Currently selected date. */
+  selectedDate: Date;
+
+  /** Called when the user taps a day. */
+  onDateSelected: (date: Date) => void;
+
+  /** First visible date. Defaults to today. */
+  startDate?: Date;
+
+  /** Last visible date. Defaults to startDate + 6 days. */
+  endDate?: Date;
+
+  /** Whether to display the day name (e.g. "Mon"). Defaults to true. */
+  showDayName?: boolean;
+
+  /** Whether to display the month name (e.g. "Feb"). Defaults to true. */
+  showMonthName?: boolean;
+
+  /**
+   * Size variant controlling spacing and text scale.
+   * @default "md"
+   */
+  size?: ResponsiveValue<CalendarStripSize, RestyleTheme["breakpoints"]>;
+
+  /** Test ID for testing frameworks. */
+  testID?: string;
+}
+
+// =============================================================================
+// HOOK TYPES
+// =============================================================================
+
+/** Parameters for the useCalendarStripLogic hook. */
+export interface UseCalendarStripLogicParams {
+  size: ResponsiveValue<CalendarStripSize, RestyleTheme["breakpoints"]>;
+  selectedDate: Date;
+  startDate?: Date;
+  endDate?: Date;
+}
+
+/** Return value from the useCalendarStripLogic hook. */
+export interface UseCalendarStripLogicReturn {
+  /** Ordered list of dates to display. */
+  dates: Date[];
+  /** Today's date (memoized). */
+  today: Date;
+  /** Resolved (non-responsive) size. */
+  resolvedSize: CalendarStripSize;
+  /** Gap token between day cards. */
+  containerGap: keyof RestyleTheme["spacing"];
+  /** Accessibility props for the container. */
+  a11yProps: {
+    accessible: boolean;
+    accessibilityRole: "list";
+    accessibilityLabel: string;
+  };
+}
+
+

package/src/components/CalendarStrip/DayCard/DayCard.helpers.ts

@@ -0,0 +1,44 @@
+/**
+ * DayCard Component Helpers
+ *
+ * Pure functions for deriving i18n keys from a Date.
+ *
+ * @see DayCard.tsx - Component implementation
+ * @see CalendarStrip.helpers.ts - Date arithmetic and size configuration
+ */
+
+import { DayKey, MonthKey } from "./DayCard.types";
+
+// =============================================================================
+// KEY LOOKUP TABLES
+// =============================================================================
+
+const DAY_KEYS: DayKey[] = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+const MONTH_KEYS: MonthKey[] = [
+  "jan", "feb", "mar", "apr", "may", "jun",
+  "jul", "aug", "sep", "oct", "nov", "dec",
+];
+
+// =============================================================================
+// KEY HELPERS
+// =============================================================================
+
+/**
+ * Returns the i18n day key for a given date.
+ *
+ * @example
+ * getDayKey(new Date(2026, 1, 19)) // "thu"
+ */
+export function getDayKey(date: Date): DayKey {
+  return DAY_KEYS[date.getDay()];
+}
+
+/**
+ * Returns the i18n month key for a given date.
+ *
+ * @example
+ * getMonthKey(new Date(2026, 1, 19)) // "feb"
+ */
+export function getMonthKey(date: Date): MonthKey {
+  return MONTH_KEYS[date.getMonth()];
+}

package/src/components/CalendarStrip/DayCard/DayCard.tsx

@@ -0,0 +1,71 @@
+import type { BoxRestyleProps } from "../../../primitives";
+import { Box, Pressable, Text } from "../../../primitives";
+import React, { memo } from "react";
+import { DayCardProps } from "./DayCard.types";
+import { useDayCardLogic } from "./useDayCardLogic";
+
+export const DayCard = memo(function DayCard({
+  date,
+  isSelected,
+  isToday,
+  onPress,
+  showDayName = true,
+  showMonthName = true,
+  size = "md",
+  ...restyleProps
+}: DayCardProps) {
+  const {
+    dayLabel,
+    monthLabel,
+    dayNumberVariant,
+    labelVariant,
+    dayPaddingVertical,
+    handlePress,
+    a11yProps,
+  } = useDayCardLogic({ date, isSelected, isToday, onPress, size });
+
+  return (
+    <Pressable onPress={handlePress} {...a11yProps}>
+      <Box
+        alignItems="center"
+        justifyContent="center"
+        paddingVertical={dayPaddingVertical}
+        borderRadius="lg"
+        backgroundColor={isSelected ? "accentPrimary" : "backgroundSecondary"}
+        {...(restyleProps as BoxRestyleProps)}
+      >
+        {showDayName && (
+          <Text
+            variant={labelVariant}
+            color={isSelected ? "textInverse" : "textTertiary"}
+          >
+            {dayLabel}
+          </Text>
+        )}
+
+        <Box
+          borderBottomWidth={2}
+          borderColor={isToday && !isSelected ? "accentPrimary" : "transparent"}
+          paddingHorizontal="2xs"
+        >
+          <Text
+            variant={dayNumberVariant}
+            color={isSelected ? "textInverse" : "textPrimary"}
+          >
+            {date.getDate()}
+          </Text>
+        </Box>
+
+        {showMonthName && (
+          <Text
+            variant={labelVariant}
+            color={isSelected ? "textInverse" : "textTertiary"}
+          >
+            {monthLabel}
+          </Text>
+        )}
+      </Box>
+    </Pressable>
+  );
+});
+DayCard.displayName = "DayCard";

package/src/components/CalendarStrip/DayCard/DayCard.types.ts

@@ -0,0 +1,134 @@
+/**
+ * DayCard Component Types
+ *
+ * Type definitions for the DayCard sub-component and its logic hook.
+ * All types are explicitly exported for external consumption.
+ *
+ * @see DayCard.tsx - Component implementation
+ */
+
+import { BoxProps } from "@shopify/restyle";
+import { ViewProps } from "react-native";
+import {
+  CalendarStripSize,
+  CalendarStripSizeConfig,
+} from "../CalendarStrip.types";
+import { RestyleTheme } from "../../../core/restyle";
+
+// Re-export shared types used by consumers of DayCard
+export type { CalendarStripSize, CalendarStripSizeConfig };
+
+// =============================================================================
+// KEY TYPES
+// =============================================================================
+
+export type DayKey = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+export type MonthKey =
+  | "jan"
+  | "feb"
+  | "mar"
+  | "apr"
+  | "may"
+  | "jun"
+  | "jul"
+  | "aug"
+  | "sep"
+  | "oct"
+  | "nov"
+  | "dec";
+
+// =============================================================================
+// COMPONENT PROPS
+// =============================================================================
+
+/** Base props combining Restyle Box props with ViewProps. */
+export type BaseDayCardProps = BoxProps<RestyleTheme> & ViewProps;
+
+/**
+ * Props for the DayCard sub-component.
+ *
+ * @example
+ * <DayCard
+ *   date={new Date()}
+ *   isSelected={true}
+ *   isToday={true}
+ *   onPress={handlePress}
+ *   size="md"
+ * />
+ */
+export interface DayCardProps extends Omit<BaseDayCardProps, "style"> {
+  /** The date this card represents. */
+  date: Date;
+
+  /** Whether this day is currently selected. */
+  isSelected: boolean;
+
+  /** Whether this day is today. */
+  isToday: boolean;
+
+  /** Called when the card is pressed. */
+  onPress: (date: Date) => void;
+
+  /** Whether to display the day name (e.g. "Mon"). Defaults to true. */
+  showDayName?: boolean;
+
+  /** Whether to display the month name (e.g. "Feb"). Defaults to true. */
+  showMonthName?: boolean;
+
+  /** Size inherited from the parent CalendarStrip. Defaults to "md". */
+  size?: CalendarStripSize;
+}
+
+// =============================================================================
+// HOOK TYPES
+// =============================================================================
+
+/** Parameters for the useDayCardLogic hook. */
+export interface UseDayCardLogicParams {
+  date: Date;
+  isSelected: boolean;
+  isToday: boolean;
+  onPress: (date: Date) => void;
+  size: CalendarStripSize;
+}
+
+/** Return value from the useDayCardLogic hook. */
+export interface UseDayCardLogicReturn {
+  /** Text variant for the day number. */
+  dayNumberVariant: "labelSmall" | "labelMedium" | "labelLarge";
+  /** Text variant for day/month labels. */
+  labelVariant: "captionSmall" | "caption";
+  /** Vertical padding token for the day card container. */
+  dayPaddingVertical: keyof RestyleTheme["spacing"];
+  /** Stable press handler. */
+  handlePress: () => void;
+  /** Translated day label (e.g. "Mon"). */
+  dayLabel: string;
+  /** Translated month label (e.g. "Feb"). */
+  monthLabel: string;
+  /** Accessibility props for the pressable. */
+  a11yProps: DayCardA11yProps;
+}
+
+// =============================================================================
+// ACCESSIBILITY TYPES
+// =============================================================================
+
+/** Parameters for generating DayCard accessibility props. */
+export interface DayCardA11yParams {
+  date: Date;
+  isSelected: boolean;
+  isToday: boolean;
+  dayLabel: string;
+  monthLabel: string;
+  todayLabel: string;
+  selectedLabel: string;
+}
+
+/** Accessibility props for the DayCard pressable. */
+export interface DayCardA11yProps {
+  accessible: boolean;
+  accessibilityRole: "button";
+  accessibilityLabel: string;
+  accessibilityState: { selected: boolean };
+}

package/src/components/CalendarStrip/DayCard/index.ts

@@ -0,0 +1,2 @@
+export { DayCard } from "./DayCard";
+export type { DayCardProps, DayCardA11yParams, DayCardA11yProps } from "./DayCard.types";