@praxiis/ui 0.0.1

package/src/primitives/layout/Divider/Divider.helpers.ts

@@ -0,0 +1,115 @@
+/**
+ * Divider Component Helpers
+ *
+ * Pure functions for computing divider values, colors, and styles.
+ *
+ * ## Thickness Mapping
+ * | Thickness | Value |
+ * |-----------|-------|
+ * | thin      | 1px   |
+ * | medium    | 2px   |
+ * | thick     | 4px   |
+ *
+ * ## Color Mapping
+ * | Color   | Token        |
+ * |---------|--------------|
+ * | subtle  | borderSubtle |
+ * | default | borderDefault|
+ */
+
+import { RestyleTheme } from "../../../core/restyle";
+import {
+  DividerColor,
+  DividerSpacing,
+  DividerThickness,
+} from "./Divider.types";
+
+// =============================================================================
+// THICKNESS CONSTANTS
+// =============================================================================
+
+/**
+ * Thickness value mapping in pixels.
+ */
+export const DIVIDER_THICKNESS: Record<DividerThickness, number> = {
+  thin: 1,
+  medium: 2,
+  thick: 4,
+} as const;
+
+/**
+ * Get thickness value for a thickness variant.
+ *
+ * @param thickness - Divider thickness variant
+ * @returns Thickness in pixels
+ *
+ * @example
+ * getThicknessValue("thin") // 1
+ * getThicknessValue("thick") // 4
+ */
+export function getThicknessValue(thickness: DividerThickness): number {
+  return DIVIDER_THICKNESS[thickness];
+}
+
+// =============================================================================
+// COLOR RESOLUTION
+// =============================================================================
+
+/**
+ * Color token mapping by variant.
+ */
+const DIVIDER_COLOR_MAP: Record<DividerColor, keyof RestyleTheme["colors"]> = {
+  subtle: "borderSubtle",
+  default: "borderDefault",
+  strong: "borderStrong",
+} as const;
+
+/**
+ * Get color token for a color variant.
+ *
+ * @param color - Divider color variant
+ * @returns Color token key
+ *
+ * @example
+ * getColorToken("subtle") // "borderSubtle"
+ * getColorToken("default") // "borderDefault"
+ */
+export function getColorToken(
+  color: DividerColor
+): keyof RestyleTheme["colors"] {
+  return DIVIDER_COLOR_MAP[color];
+}
+
+// =============================================================================
+// SPACING RESOLUTION
+// =============================================================================
+
+/**
+ * Spacing token mapping.
+ */
+const DIVIDER_SPACING_MAP: Record<
+  DividerSpacing,
+  keyof RestyleTheme["spacing"]
+> = {
+  none: "none",
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+} as const;
+
+/**
+ * Get spacing token for a spacing variant.
+ *
+ * @param spacing - Divider spacing variant
+ * @returns Spacing token key
+ *
+ * @example
+ * getSpacingToken("md") // "md"
+ */
+export function getSpacingToken(
+  spacing: DividerSpacing
+): keyof RestyleTheme["spacing"] {
+  return DIVIDER_SPACING_MAP[spacing];
+}

package/src/primitives/layout/Divider/Divider.tsx

@@ -0,0 +1,139 @@
+/**
+ * Divider Component
+ *
+ * @description Visual separator for content sections - Atom
+ *
+ * Dividers separate content into distinct sections with a thin line.
+ * Supports horizontal and vertical orientations, multiple thicknesses,
+ * and optional labels for semantic separation (e.g., "OR" dividers).
+ *
+ * ## Thickness Scale
+ * | Thickness | Value | Use Case |
+ * |-----------|-------|----------|
+ * | thin      | 1px   | Subtle separation (default) |
+ * | medium    | 2px   | Standard separation |
+ * | thick     | 4px   | Prominent separation |
+ *
+ * ## Color Variants
+ * - `subtle`: borderSubtle - light separator (default)
+ * - `default`: borderDefault - standard separator
+ *
+ * ## Features
+ * - Horizontal and vertical orientation
+ * - Three thickness options
+ * - Theme-aware colors
+ * - Spacing props using theme tokens
+ * - Optional label support for "OR" style dividers
+ * - Full accessibility support
+ * - Memoized for performance
+ *
+ * @see Divider.types.ts - Type definitions
+ * @see Divider.helpers.ts - Pure calculation functions
+ * @see Divider.a11y.ts - Accessibility prop generation
+ *
+ * @example
+ * // Basic horizontal divider
+ * <Divider />
+ *
+ * @example
+ * // Vertical divider in a row
+ * <Box flexDirection="row">
+ *   <Text>Left</Text>
+ *   <Divider orientation="vertical" spacing="sm" />
+ *   <Text>Right</Text>
+ * </Box>
+ *
+ * @example
+ * // "OR" divider between sign-in options
+ * <Divider label="OR" spacing="lg" />
+ */
+
+import React, { memo } from "react";
+import { Text } from "../../typography";
+import { Box } from "../Box";
+import { DividerProps } from "./Divider.types";
+import { useDividerLogic } from "./useDividerLogic";
+
+// =============================================================================
+// DIVIDER COMPONENT
+// =============================================================================
+
+function DividerComponent({
+  orientation = "horizontal",
+  thickness = "thin",
+  color = "subtle",
+  spacing = "none",
+  label,
+  accessibilityLabel,
+  testID,
+  style,
+  ...rest
+}: DividerProps) {
+  const { thicknessValue, colorToken, spacingToken, hasLabel, a11yProps } =
+    useDividerLogic({
+      orientation,
+      thickness,
+      color,
+      spacing,
+      label,
+      accessibilityLabel,
+    });
+
+  const isHorizontal = orientation === "horizontal";
+
+  // Horizontal divider with optional label
+  if (isHorizontal) {
+    if (hasLabel) {
+      return (
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          marginVertical={spacingToken}
+          testID={testID}
+          style={style}
+          {...a11yProps}
+          {...rest}
+        >
+          <Box flex={1} height={thicknessValue} backgroundColor={colorToken} />
+          <Text
+            variant="labelSmall"
+            color="textSecondary"
+            paddingHorizontal="md"
+          >
+            {label}
+          </Text>
+          <Box flex={1} height={thicknessValue} backgroundColor={colorToken} />
+        </Box>
+      );
+    }
+
+    return (
+      <Box
+        height={thicknessValue}
+        backgroundColor={colorToken}
+        marginVertical={spacingToken}
+        testID={testID}
+        style={style}
+        {...a11yProps}
+        {...rest}
+      />
+    );
+  }
+
+  // Vertical divider
+  return (
+    <Box
+      width={thicknessValue}
+      alignSelf="stretch"
+      backgroundColor={colorToken}
+      marginHorizontal={spacingToken}
+      testID={testID}
+      style={style}
+      {...a11yProps}
+      {...rest}
+    />
+  );
+}
+
+export const Divider = memo(DividerComponent);
+Divider.displayName = "Divider";

package/src/primitives/layout/Divider/Divider.types.ts

@@ -0,0 +1,178 @@
+/**
+ * Divider Component Types
+ *
+ * Type definitions for the Divider component and its related hooks/helpers.
+ *
+ * @see Divider.tsx - Component implementation
+ */
+
+import { BoxProps } from "@shopify/restyle";
+import { ViewProps, ViewStyle } from "react-native";
+import { RestyleTheme } from "../../../core/restyle";
+
+// =============================================================================
+// VARIANT TYPES
+// =============================================================================
+
+/**
+ * Orientation of the Divider.
+ *
+ * - `horizontal`: Horizontal line (default) - separates content vertically
+ * - `vertical`: Vertical line - separates content horizontally
+ */
+export type DividerOrientation = "horizontal" | "vertical";
+
+/**
+ * Thickness variant for the Divider.
+ * Derived from the restyle theme's `dividerSizes` keys.
+ *
+ * - `thin`: 1px - subtle separator
+ * - `medium`: 2px - standard separator (default)
+ * - `thick`: 4px - prominent separator
+ */
+export type DividerThickness = Exclude<keyof RestyleTheme["dividerSizes"], "defaults">;
+
+/**
+ * Color variant for the Divider.
+ * Derived from the restyle theme's `dividerVariants` keys.
+ */
+export type DividerColor = Exclude<
+  keyof RestyleTheme["dividerVariants"],
+  "defaults"
+>;
+
+/**
+ * Spacing around the Divider using theme spacing tokens.
+ *
+ * - `none`: 0 - no spacing
+ * - `xs`: 4px - tight spacing
+ * - `sm`: 8px - compact spacing
+ * - `md`: 12px - comfortable spacing
+ * - `lg`: 16px - standard spacing
+ * - `xl`: 20px - comfortable spacing
+ */
+export type DividerSpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+// =============================================================================
+// COMPONENT PROPS
+// =============================================================================
+
+/**
+ * Props for the Divider component.
+ *
+ * @example
+ * // Basic horizontal divider
+ * <Divider />
+ *
+ * @example
+ * // Vertical divider with custom thickness
+ * <Divider orientation="vertical" thickness="thick" />
+ *
+ * @example
+ * // Divider with label
+ * <Divider label="OR" spacing="lg" />
+ */
+export interface DividerProps
+  extends Omit<BoxProps<RestyleTheme>, "style">,
+    ViewProps {
+  /**
+   * Orientation of the divider.
+   * @default "horizontal"
+   */
+  orientation?: DividerOrientation;
+
+  /**
+   * Thickness of the divider line.
+   * @default "thin"
+   */
+  thickness?: DividerThickness;
+
+  /**
+   * Color variant of the divider.
+   * @default "subtle"
+   */
+  color?: DividerColor;
+
+  /**
+   * Spacing around the divider using theme spacing tokens.
+   * For horizontal: vertical margin (marginVertical)
+   * For vertical: horizontal margin (marginHorizontal)
+   * @default "none"
+   */
+  spacing?: DividerSpacing;
+
+  /**
+   * Optional label to display in the middle of the divider.
+   * Common use case: "OR" between sign-in options.
+   */
+  label?: string;
+
+  /**
+   * Custom style overrides for the container.
+   */
+  style?: ViewStyle;
+
+  /** Test ID for testing frameworks */
+  testID?: string;
+
+  /**
+   * Accessibility label for screen readers.
+   * @example "Section divider"
+   */
+  accessibilityLabel?: string;
+}
+
+// =============================================================================
+// HOOK TYPES
+// =============================================================================
+
+/**
+ * Parameters for the useDividerLogic hook.
+ */
+export interface UseDividerLogicParams {
+  orientation: DividerOrientation;
+  thickness: DividerThickness;
+  color: DividerColor;
+  spacing: DividerSpacing;
+  label?: string;
+  accessibilityLabel?: string;
+}
+
+/**
+ * Return value from the useDividerLogic hook.
+ */
+export interface UseDividerLogicReturn {
+  /** Resolved thickness value in pixels */
+  thicknessValue: number;
+  /** Color token key for the divider line */
+  colorToken: keyof RestyleTheme["colors"];
+  /** Spacing token key for margin */
+  spacingToken: keyof RestyleTheme["spacing"];
+  /** Whether the divider has a label */
+  hasLabel: boolean;
+  /** Accessibility props */
+  a11yProps: DividerA11yProps;
+}
+
+// =============================================================================
+// ACCESSIBILITY TYPES
+// =============================================================================
+
+/**
+ * Parameters for getDividerA11y function.
+ */
+export interface DividerA11yParams {
+  orientation: DividerOrientation;
+  label?: string;
+  accessibilityLabel?: string;
+}
+
+/**
+ * Accessibility props returned by getDividerA11y.
+ * Implements WCAG 4.1.2 Name, Role, Value for separator elements.
+ */
+export interface DividerA11yProps {
+  accessibilityRole: "none";
+  accessible: boolean;
+  accessibilityLabel?: string;
+}

package/src/primitives/layout/Divider/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Divider Module
+ *
+ * Atom component for visually separating content sections with theme integration.
+ *
+ * @example
+ * import { Divider } from "@/design-system/primitives/layout/Divider";
+ *
+ * // Basic divider
+ * <Divider />
+ *
+ * // "OR" divider
+ * <Divider label="OR" spacing="lg" />
+ */
+
+export { Divider } from "./Divider";
+export type {
+  DividerColor,
+  DividerOrientation,
+  DividerProps,
+  DividerSpacing,
+  DividerThickness,
+} from "./Divider.types";
+export * from "./Divider.a11y";

package/src/primitives/layout/Divider/useDividerLogic.ts

@@ -0,0 +1,109 @@
+/**
+ * Divider Logic Hook
+ *
+ * Extracts all computational logic from the Divider component.
+ * Returns memoized values for optimal render performance.
+ *
+ * Responsibilities:
+ * - Resolve thickness value
+ * - Resolve color token
+ * - Resolve spacing token
+ * - Generate accessibility props
+ *
+ * @see Divider.tsx - Component consuming this hook
+ * @see Divider.helpers.ts - Pure calculation functions
+ * @see Divider.a11y.ts - Accessibility prop generation
+ */
+
+import { useMemo } from "react";
+import { getDividerA11y } from "./Divider.a11y";
+import {
+  getColorToken,
+  getSpacingToken,
+  getThicknessValue,
+} from "./Divider.helpers";
+import {
+  UseDividerLogicParams,
+  UseDividerLogicReturn,
+} from "./Divider.types";
+
+/**
+ * Orchestrates Divider rendering logic and state management.
+ * 
+ * Handles:
+ * - Thickness value resolution ('thin' | 'medium' | 'thick')
+ * - Color token resolution ('default' | 'subtle' | 'strong')
+ * - Spacing token resolution for margins
+ * - Label presence detection
+ * - Accessibility props generation
+ * 
+ * @param params - Configuration object for divider behavior
+ * @param params.orientation - Orientation ('horizontal' | 'vertical')
+ * @param params.thickness - Thickness variant ('thin' | 'medium' | 'thick')
+ * @param params.color - Color variant ('default' | 'subtle' | 'strong')
+ * @param params.spacing - Spacing variant ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl')
+ * @param params.label - Optional label text
+ * @param params.accessibilityLabel - Custom a11y label
+ * 
+ * @returns Computed values for rendering Divider
+ * @returns {number} thicknessValue - Thickness in pixels (1-3px)
+ * @returns {string} colorToken - Color token for divider line
+ * @returns {string} spacingToken - Spacing token for margins
+ * @returns {boolean} hasLabel - Whether label is present
+ * @returns {object} a11yProps - Accessibility props
+ * 
+ * @performance This hook uses useMemo() for token resolution
+ * 
+ * @example
+ * const {
+ *   thicknessValue,
+ *   colorToken,
+ *   spacingToken,
+ *   hasLabel,
+ *   a11yProps,
+ * } = useDividerLogic({
+ *   orientation: "horizontal",
+ *   thickness: "thin",
+ *   color: "subtle",
+ *   spacing: "md",
+ * });
+ */
+export function useDividerLogic({
+  orientation,
+  thickness,
+  color,
+  spacing,
+  label,
+  accessibilityLabel,
+}: UseDividerLogicParams): UseDividerLogicReturn {
+  // Memoized thickness value
+  const thicknessValue = getThicknessValue(thickness);
+
+  // Memoized color token
+  const colorToken = getColorToken(color);
+
+  // Memoized spacing token
+  const spacingToken = getSpacingToken(spacing);
+
+  // Check if label exists
+  const hasLabel = Boolean(label);
+
+  // Accessibility props
+  const a11yProps = useMemo(
+    () =>
+      getDividerA11y({
+        orientation,
+        label,
+        accessibilityLabel,
+      }),
+    [orientation, label, accessibilityLabel]
+  );
+
+  return {
+    thicknessValue,
+    colorToken,
+    spacingToken,
+    hasLabel,
+    a11yProps,
+  };
+}

package/src/primitives/layout/FlatList.tsx

@@ -0,0 +1,66 @@
+import React, { forwardRef } from "react";
+import {
+  FlatList as RNFlatList,
+  FlatListProps as RNFlatListProps,
+} from "react-native";
+import {
+  backgroundColor,
+  BackgroundColorProps,
+  composeRestyleFunctions,
+  layout,
+  LayoutProps,
+  spacing,
+  SpacingProps,
+  useRestyle,
+} from "@shopify/restyle";
+import { RestyleTheme } from "../../core/restyle";
+
+/**
+ * Restyle props that can be applied to FlatList
+ */
+export type FlatListRestyleProps = SpacingProps<RestyleTheme> &
+  LayoutProps<RestyleTheme> &
+  BackgroundColorProps<RestyleTheme>;
+
+export type FlatListProps<T = any> = FlatListRestyleProps & RNFlatListProps<T>;
+
+/** Ref type for the FlatList component — the underlying React Native FlatList instance. */
+export type FlatListRef<T = any> = RNFlatList<T>;
+
+const restyleFunctions = composeRestyleFunctions<
+  RestyleTheme,
+  FlatListRestyleProps
+>([spacing, layout, backgroundColor]);
+
+/**
+ * FlatList — Restyled FlatList component
+ *
+ * A FlatList wrapper that accepts Restyle props (padding, margin, flex, backgroundColor)
+ * while preserving all native FlatList functionality and supporting ref forwarding.
+ *
+ * @example
+ * ```tsx
+ * <FlatList
+ *   ref={listRef}
+ *   data={items}
+ *   renderItem={({ item }) => <Text>{item.name}</Text>}
+ *   keyExtractor={(item) => item.id}
+ *   padding="md"
+ *   flex={1}
+ *   backgroundColor="backgroundPrimary"
+ * />
+ * ```
+ */
+function FlatListInner<T = any>(
+  props: FlatListProps<T>,
+  ref: React.ForwardedRef<RNFlatList<T>>,
+) {
+  const { style, ...rest } = useRestyle(restyleFunctions, props as any);
+  return <RNFlatList<T> ref={ref} style={style} {...(rest as any)} />;
+}
+
+export const FlatList = forwardRef(FlatListInner) as <T = any>(
+  props: FlatListProps<T> & { ref?: React.Ref<RNFlatList<T>> },
+) => React.ReactElement;
+
+(FlatList as any).displayName = "FlatList";

package/src/primitives/layout/Pressable.tsx

@@ -0,0 +1,74 @@
+import {
+  backgroundColor,
+  BackgroundColorProps,
+  border,
+  BorderProps,
+  createRestyleComponent,
+  layout,
+  LayoutProps,
+  opacity,
+  OpacityProps,
+  spacing,
+  SpacingProps,
+} from "@shopify/restyle";
+import {
+  Pressable as RNPressable,
+  PressableProps as RNPressableProps,
+} from "react-native";
+
+import { RestyleTheme } from "../../core/restyle";
+
+/**
+ * Restyle props that can be applied to Pressable
+ */
+export type PressableRestyleProps = SpacingProps<RestyleTheme> &
+  LayoutProps<RestyleTheme> &
+  BackgroundColorProps<RestyleTheme> &
+  BorderProps<RestyleTheme> &
+  OpacityProps<RestyleTheme>;
+
+/**
+ * Pressable — Restyled Pressable component
+ *
+ * A Pressable wrapper that accepts Restyle props (padding, margin, flex, backgroundColor, borderRadius, opacity)
+ * while preserving all native Pressable functionality.
+ *
+ * @example
+ * ```tsx
+ * <Pressable
+ *   onPress={() => console.log('Pressed')}
+ *   padding="md"
+ *   backgroundColor="accentPrimary"
+ *   borderRadius="md"
+ *   opacity={0.8}
+ * >
+ *   <Text>Press me</Text>
+ * </Pressable>
+ * ```
+ *
+ * @example
+ * // With press state styling
+ * ```tsx
+ * <Pressable
+ *   onPress={handlePress}
+ *   padding="lg"
+ *   backgroundColor="surfacePrimary"
+ *   borderRadius="lg"
+ *   style={({ pressed }) => ({
+ *     opacity: pressed ? 0.7 : 1,
+ *   })}
+ * >
+ *   <Text>Interactive Card</Text>
+ * </Pressable>
+ * ```
+ */
+const BaseRestylePressable = createRestyleComponent<
+  PressableRestyleProps & RNPressableProps,
+  RestyleTheme
+>([spacing, layout, backgroundColor, border, opacity], RNPressable);
+
+export const Pressable = BaseRestylePressable as (
+  props: PressableRestyleProps & RNPressableProps,
+) => React.ReactElement;
+
+export type PressableProps = PressableRestyleProps & RNPressableProps;