@praxiis/ui 0.0.1

package/src/primitives/inputs/TextInput/TextInput.types.ts

@@ -0,0 +1,216 @@
+import { BoxProps, ResponsiveValue } from "@shopify/restyle";
+import { StyleProp, TextInput as RNTextInput, TextInputProps as RNTextInputProps, ViewProps, ViewStyle } from "react-native";
+import { RestyleTheme } from "../../../core/restyle";
+import { RestyleColor } from "../../../types";
+import { IconName, IconSize } from "../../content/Icon";
+
+/**
+ * Size variant for the TextInput component.
+ * Derived from the restyle theme's `textInputSizes` keys.
+ *
+ * - `sm`: 40px height - Compact forms, dense UIs
+ * - `md`: 48px height - Default mobile size
+ * - `lg`: 56px height - Tablets, emphasized inputs
+ */
+export type TextInputSize = Exclude<keyof RestyleTheme["textInputSizes"], "defaults">;
+
+/**
+ * Visual variant for the TextInput component.
+ * Derived from the restyle theme's `textInputVariants` keys.
+ *
+ * - `outlined`: Border with transparent background
+ * - `filled`: Filled background with subtle border
+ * - `textarea`: Multi-line text input with configurable height, cursor starts at top
+ */
+export type TextInputVariant = Exclude<keyof RestyleTheme["textInputVariants"], "defaults">;
+
+/**
+ * Text variant type for labels and helper text.
+ */
+export type TextInputTextVariant = Exclude<keyof RestyleTheme["textVariants"], "defaults">;
+
+/** Ref type for the TextInput component — the underlying React Native TextInput instance. */
+export type TextInputRef = RNTextInput;
+
+
+/**
+ * Props for the base TextInput container with Restyle support.
+ * @internal
+ */
+export type BaseTextInputContainerProps = BoxProps<RestyleTheme> & ViewProps;
+
+/**
+ * Base props for the TextInput container component.
+ */
+export interface BaseTextInputProps
+  extends BoxProps<RestyleTheme>,
+    Omit<RNTextInputProps, "style"> {}
+
+/**
+ * Props for the TextInput component.
+ *
+ * @example
+ * // Basic usage
+ * <TextInput label="Email" value={email} onChangeText={setEmail} />
+ *
+ * @example
+ * // With icons and validation
+ * <TextInput
+ *   label="Email"
+ *   value={email}
+ *   onChangeText={setEmail}
+ *   leftIconName="email"
+ *   rightIconName={isValid ? "check-circle" : undefined}
+ *   size={{ phone: "md", tablet: "lg" }}
+ *   variant="outlined"
+ *   error={emailError}
+ *   helperText="Enter your email address"
+ *   required
+ *   showCharCount
+ *   maxLength={100}
+ *   accessibilityLabel="Email address"
+ *   accessibilityHint="Enter a valid email address"
+ * />
+ */
+export interface TextInputProps extends BaseTextInputProps {
+  /** Label text displayed above the input */
+  label?: string;
+  /** Helper text displayed below the input */
+  helperText?: string;
+  /** Error message (displays in red, replaces helperText) */
+  error?: string;
+  /** Size of the input (supports responsive values) */
+  size?: ResponsiveValue<TextInputSize, RestyleTheme["breakpoints"]>;
+  /** Visual variant of the input (supports responsive values) */
+  variant?: ResponsiveValue<TextInputVariant, RestyleTheme["breakpoints"]>;
+  /** Height for textarea variant (default: 120). */
+  textareaHeight?: number;
+  /** Icon name for left icon */
+  leftIconName?: IconName;
+  /** Icon name for right icon */
+  rightIconName?: IconName;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  /** Whether the input is required */
+  required?: boolean;
+  /** Whether to show character count */
+  showCharCount?: boolean;
+  /** Primary color for focus state */
+  color?: RestyleColor;
+  /** Container style overrides */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Input container style overrides */
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  /** Test ID for testing */
+  testID?: string;
+  /** Accessibility label */
+  accessibilityLabel?: string;
+  /** Accessibility hint */
+  accessibilityHint?: string;
+}
+
+/**
+ * Parameters for the useTextInputLogic hook.
+ */
+export interface UseTextInputLogicParams {
+  variant: ResponsiveValue<TextInputVariant, RestyleTheme["breakpoints"]>;
+  size: ResponsiveValue<TextInputSize, RestyleTheme["breakpoints"]>;
+  color: RestyleColor;
+  disabled: boolean;
+  error?: string;
+  isFocused: boolean;
+  leftIconName?: IconName;
+  rightIconName?: IconName;
+  label?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  required?: boolean;
+}
+
+/**
+ * Return value from the useTextInputLogic hook.
+ */
+export interface UseTextInputLogicReturn {
+  /** Whether the input is disabled */
+  isDisabled: boolean;
+  /** Whether the input has an error */
+  hasError: boolean;
+  /** Container opacity */
+  opacity: number;
+  /** Background color key */
+  finalBackgroundColor: RestyleColor | "transparent";
+  /** Border color key */
+  finalBorderColor: RestyleColor;
+  /** Text color key */
+  finalTextColor: RestyleColor;
+  /** Placeholder color key */
+  finalPlaceholderColor: RestyleColor;
+  /** Label color key */
+  finalLabelColor: RestyleColor;
+  /** Border width */
+  borderWidth: number;
+  /** Left icon size */
+  leftIconSize: IconSize | undefined;
+  /** Right icon size */
+  rightIconSize: IconSize | undefined;
+  /** Icon color key */
+  iconColor: RestyleColor;
+  /** Accessibility props */
+  a11yProps: TextInputA11yProps;
+}
+
+/**
+ * Parameters for the getTextInputA11y function.
+ */
+export interface TextInputA11yParams {
+  label?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  disabled: boolean;
+  error?: string;
+  required?: boolean;
+  fallbackLabel: string;
+  requiredLabel: string;
+  errorPrefixLabel: string;
+}
+
+/**
+ * Accessibility props returned by getTextInputA11y.
+ */
+export interface TextInputA11yProps {
+  accessibilityLabel: string;
+  accessibilityHint?: string;
+  accessibilityState: { disabled: boolean };
+}
+
+/**
+ * Parameters for resolveTextInputStyle function.
+ */
+export interface ResolveTextInputStyleParams {
+  variant: TextInputVariant;
+  disabled: boolean;
+  error?: string;
+  isFocused: boolean;
+  color: RestyleColor;
+  theme: RestyleTheme;
+}
+
+/**
+ * Result from resolveTextInputStyle function.
+ */
+export interface TextInputStyleResult {
+  backgroundColor: string;
+  borderColor: string;
+  borderWidth: number;
+  opacity: number;
+}
+
+/**
+ * Size configuration for TextInput.
+ */
+export interface TextInputSizeConfig {
+  height: number;
+  paddingHorizontal: number;
+  fontSize: number;
+  iconSize: number;
+}

package/src/primitives/inputs/TextInput/index.ts

@@ -0,0 +1,37 @@
+/**
+ * TextInput Module
+ *
+ * Molecule component for text entry with labels, icons, and validation.
+ *
+ * Combines Icon, Text, and Box atoms into a complete form field.
+ *
+ * ## Variants
+ * - `outlined`: Border with transparent background (default)
+ * - `filled`: Filled background with subtle border
+ * - `textarea`: Multi-line with configurable height
+ *
+ * @example
+ * import { TextInput } from "@/design-system/primitives/inputs/TextInput";
+ *
+ * <TextInput
+ *   label="Email"
+ *   value={email}
+ *   onChangeText={setEmail}
+ *   leftIconName="email"
+ *   error={emailError}
+ *   required
+ * />
+ */
+
+export { TextInput } from "./TextInput";
+
+export type {
+  TextInputProps,
+  TextInputRef,
+  TextInputSize,
+  TextInputVariant,
+  TextInputA11yParams,
+  TextInputA11yProps,
+} from "./TextInput.types";
+
+export { getTextInputA11y } from "./TextInput.a11y";

package/src/primitives/inputs/TextInput/useTextInputLogic.ts

@@ -0,0 +1,195 @@
+import { useDesignSystem } from "../../../provider";
+import { useResponsiveProp } from "@shopify/restyle";
+import { useMemo } from "react";
+import { RestyleColor } from "../../../types";
+import { getTextInputA11y } from "./TextInput.a11y";
+import {
+  getTextInputIconColor,
+  getTextInputIconSize,
+} from "./TextInput.helpers";
+import {
+  TextInputSize,
+  TextInputVariant,
+  UseTextInputLogicParams,
+  UseTextInputLogicReturn,
+} from "./TextInput.types";
+
+/**
+ * Orchestrates TextInput rendering logic and state management.
+ * 
+ * Handles:
+ * - Responsive size and variant resolution
+ * - State-based color calculations (error, focus, disabled)
+ * - Background and border color computation
+ * - Icon sizing and color coordination
+ * - Label variant selection
+ * - Border width adjustment on focus (1px → 2px)
+ * - Accessibility props generation
+ * 
+ * @param params - Configuration object for text input behavior
+ * @param params.variant - Visual variant ('outlined' | 'filled' | 'textarea')
+ * @param params.size - Size variant ('sm' | 'md' | 'lg')
+ * @param params.color - Theme color token for focus state
+ * @param params.disabled - Whether input is disabled
+ * @param params.error - Error message (presence triggers error state)
+ * @param params.isFocused - Whether input has focus
+ * @param params.leftIconName - Optional left icon
+ * @param params.rightIconName - Optional right icon
+ * @param params.label - Input label text
+ * @param params.accessibilityLabel - Custom a11y label
+ * @param params.accessibilityHint - Describes expected input
+ * @param params.required - Whether field is required
+ * 
+ * @returns Computed values for rendering TextInput
+ * @returns {boolean} isDisabled - Disabled state flag
+ * @returns {boolean} hasError - Error state flag
+ * @returns {number} opacity - Container opacity (0.5 when disabled)
+ * @returns {string} finalBackgroundColor - Background color token
+ * @returns {string} finalBorderColor - Border color token
+ * @returns {string} finalTextColor - Text color token
+ * @returns {string} finalPlaceholderColor - Placeholder color token
+ * @returns {string} finalLabelColor - Label color token
+ * @returns {number} borderWidth - Border width (1 or 2)
+ * @returns {number} leftIconSize - Left icon size in pixels
+ * @returns {number} rightIconSize - Right icon size in pixels
+ * @returns {string} iconColor - Icon color token
+ * @returns {object} a11yProps - Accessibility props
+ * 
+ * @performance This hook uses useMemo() for expensive calculations
+ * 
+ * @example
+ * const {
+ *   finalBackgroundColor,
+ *   finalBorderColor,
+ *   borderWidth,
+ *   leftIconSize,
+ *   a11yProps
+ * } = useTextInputLogic({
+ *   variant: "outlined",
+ *   size: "md",
+ *   color: "accentPrimary",
+ *   isFocused: true,
+ *   leftIconName: "search",
+ *   label: "Search products",
+ * });
+ */
+export function useTextInputLogic(
+  params: UseTextInputLogicParams
+): UseTextInputLogicReturn {
+  const {
+    variant,
+    size,
+    color,
+    disabled,
+    error,
+    isFocused,
+    leftIconName,
+    rightIconName,
+    label,
+    accessibilityLabel,
+    accessibilityHint,
+    required,
+  } = params;
+
+  const { labels: t } = useDesignSystem();
+  const resolvedSize = (useResponsiveProp(size) ?? "md") as TextInputSize;
+  const resolvedVariant = (useResponsiveProp(variant) ?? "outlined") as TextInputVariant;
+
+  const isDisabled = disabled;
+  const hasError = !!error;
+  const opacity = isDisabled ? 0.5 : 1;
+
+  // Icon sizes (only if icons provided)
+  const leftIconSize = leftIconName
+    ? getTextInputIconSize(resolvedSize)
+    : undefined;
+  const rightIconSize = rightIconName
+    ? getTextInputIconSize(resolvedSize)
+    : undefined;
+
+  // Icon color
+  const iconColor = getTextInputIconColor(hasError, isFocused, color);
+
+  // Background color
+  // Use backgroundTertiary for filled variant to ensure distinction in dark mode
+  // Textarea uses same background as outlined
+  const finalBackgroundColor = useMemo(():
+    | RestyleColor
+    | "transparent" => {
+    if (isDisabled) {
+      return "interactiveDisabled";
+    }
+    if (resolvedVariant === "filled") {
+      return "backgroundTertiary";
+    }
+    // Both outlined and textarea use surfacePrimary
+    return "surfacePrimary";
+  }, [resolvedVariant, isDisabled]);
+
+  // Border color
+  const finalBorderColor = useMemo((): RestyleColor => {
+    if (isDisabled) {
+      return "borderSubtle";
+    }
+    if (hasError) {
+      return "feedbackError";
+    }
+    if (isFocused) {
+      return color;
+    }
+    return "borderDefault";
+  }, [isDisabled, hasError, isFocused, color]);
+
+  // Text color
+  const finalTextColor: RestyleColor = isDisabled ? "textDisabled" : "textPrimary";
+
+  // Placeholder color
+  const finalPlaceholderColor: RestyleColor = "textTertiary";
+
+  // Label color
+  const finalLabelColor = useMemo((): RestyleColor => {
+    if (hasError) {
+      return "feedbackError";
+    }
+    if (isFocused) {
+      return color;
+    }
+    return "textPrimary";
+  }, [hasError, isFocused, color]);
+
+  // Border width
+  const borderWidth = isFocused ? 2 : 1;
+
+  // Accessibility props
+  const a11yProps = useMemo(
+    () =>
+      getTextInputA11y({
+        label,
+        accessibilityLabel,
+        accessibilityHint,
+        disabled: isDisabled,
+        error,
+        required,
+        fallbackLabel: t.designSystem.textInput.fallbackLabel,
+        requiredLabel: t.designSystem.textInput.required,
+        errorPrefixLabel: t.designSystem.textInput.errorPrefix,
+      }),
+    [label, accessibilityLabel, accessibilityHint, isDisabled, error, required, t]
+  );
+
+  return {
+    isDisabled,
+    hasError,
+    opacity,
+    finalBackgroundColor,
+    finalBorderColor,
+    finalTextColor,
+    finalPlaceholderColor,
+    finalLabelColor,
+    borderWidth,
+    leftIconSize,
+    rightIconSize,
+    iconColor,
+    a11yProps,
+  };
+}

package/src/primitives/inputs/index.ts

@@ -0,0 +1,52 @@
+/**
+ * Inputs Components Module
+ *
+ * Components that capture user data and selections.
+ */
+
+export {
+  TextInput,
+  type TextInputProps,
+  type TextInputRef,
+  type TextInputSize,
+  type TextInputVariant,
+
+} from "./TextInput";
+
+export {
+  Checkbox,
+  type CheckboxProps,
+  type CheckboxRef,
+  type CheckboxSize,
+} from "./Checkbox";
+
+export {
+  RadioButton,
+  type RadioButtonProps,
+  type RadioButtonRef,
+  type RadioButtonSize,
+} from "./RadioButton";
+
+export {
+  Switch,
+  type SwitchProps,
+  type SwitchRef,
+  type SwitchSize,
+} from "./Switch";
+
+export {
+  SegmentedControl,
+  type SegmentedControlProps,
+  type SegmentedControlSize,
+  type SegmentedControlVariant,
+  type SegmentOption,
+} from "./SegmentedControl";
+
+export {
+  SelectSheet,
+  type SelectSheetProps,
+  type SelectSheetOption,
+  type SelectSheetMode,
+  type SelectSheetPosition,
+  type SelectSheetIndicatorPosition,
+} from "./SelectSheet";

package/src/primitives/layout/AnimatedBox.tsx

@@ -0,0 +1,44 @@
+/**
+ * AnimatedBox Component
+ *
+ * @description Animated version of Box for Animated API integration - Atom
+ *
+ * AnimatedBox wraps Box with React Native's Animated API, enabling
+ * smooth transitions and animations while maintaining Restyle props.
+ *
+ * ## Usage
+ * Use AnimatedBox when you need to animate layout properties using
+ * React Native's Animated API (Animated.Value, Animated.timing, etc.).
+ *
+ * ## Features
+ * - All Box/Restyle props available
+ * - Compatible with Animated.Value for transforms, opacity, etc.
+ * - Use with interpolate() for complex animations
+ *
+ * @see Box.tsx - Base component without animation
+ * @see https://reactnative.dev/docs/animated - Animated API docs
+ *
+ * @example
+ * // Fade animation
+ * const opacity = useRef(new Animated.Value(0)).current;
+ *
+ * <AnimatedBox style={{ opacity }} padding="lg">
+ *   <Text>Fading content</Text>
+ * </AnimatedBox>
+ *
+ * @example
+ * // Transform animation
+ * const translateX = useRef(new Animated.Value(-100)).current;
+ *
+ * <AnimatedBox
+ *   style={{ transform: [{ translateX }] }}
+ *   backgroundColor="surfacePrimary"
+ * >
+ *   <Text>Sliding content</Text>
+ * </AnimatedBox>
+ */
+
+import { Animated } from "react-native";
+import { Box } from "./Box";
+
+export const AnimatedBox = Animated.createAnimatedComponent(Box);

package/src/primitives/layout/Box.tsx

@@ -0,0 +1,71 @@
+/**
+ * Box Component
+ *
+ * @description Fundamental layout primitive with Restyle integration - Atom
+ *
+ * Box is the most basic building block of the design system.
+ * It's a View with all Restyle layout, spacing, and color props.
+ *
+ * ## Usage
+ * Use Box for any layout needs: containers, wrappers, spacers, etc.
+ * It provides type-safe access to all theme tokens.
+ *
+ * ## Available Props (from Restyle)
+ * - **Layout**: width, height, flex, flexDirection, alignItems, justifyContent, etc.
+ * - **Spacing**: margin, padding, gap (with theme tokens: xs, sm, md, lg, xl, etc.)
+ * - **Colors**: backgroundColor, borderColor (with theme color tokens)
+ * - **Borders**: borderWidth, borderRadius (with theme radii tokens)
+ *
+ * @see https://github.com/Shopify/restyle - Restyle documentation
+ *
+ * @example
+ * // Basic container
+ * <Box padding="lg" backgroundColor="surfacePrimary">
+ *   <Text>Content</Text>
+ * </Box>
+ *
+ * @example
+ * // Flex layout
+ * <Box flexDirection="row" alignItems="center" gap="sm">
+ *   <Icon name="check" />
+ *   <Text>Label</Text>
+ * </Box>
+ *
+ * @example
+ * // Responsive padding
+ * <Box padding={{ phone: "md", tablet: "xl" }}>
+ *   <Text>Responsive content</Text>
+ * </Box>
+ */
+
+import { createBox } from "@shopify/restyle";
+import { ComponentProps } from "react";
+import { RestyleTheme } from "../../core";
+
+export const Box = createBox<RestyleTheme>();
+
+/**
+ * BoxRestyleProps — Reusable type for Box Restyle props.
+ *
+ * Use this type when creating components with a root Box
+ * to allow consumers to pass layout/styling props.
+ *
+ * @example
+ * ```tsx
+ * interface MyCardProps extends BoxRestyleProps {
+ *   title: string;
+ * }
+ *
+ * function MyCard({ title, ...boxProps }: MyCardProps) {
+ *   return (
+ *     <Box padding="lg" {...boxProps}>
+ *       <Text>{title}</Text>
+ *     </Box>
+ *   );
+ * }
+ *
+ * // Usage
+ * <MyCard title="Hello" marginTop="md" backgroundColor="surfacePrimary" />
+ * ```
+ */
+export type BoxRestyleProps = ComponentProps<typeof Box>;