@praxiis/ui 0.0.1

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

@@ -0,0 +1,45 @@
+import { useDesignSystem } from "../../../provider";
+import { useCallback } from "react";
+import { getCalendarStripSizeConfig } from "../CalendarStrip.helpers";
+import { getDayCardA11y } from "./DayCard.a11y";
+import { getDayKey, getMonthKey } from "./DayCard.helpers";
+import {
+  UseDayCardLogicParams,
+  UseDayCardLogicReturn,
+} from "./DayCard.types";
+
+export function useDayCardLogic({
+  date,
+  onPress,
+  size,
+  isSelected,
+  isToday,
+}: UseDayCardLogicParams): UseDayCardLogicReturn {
+  const { labels: t } = useDesignSystem();
+  const config = getCalendarStripSizeConfig(size);
+
+  const dayLabel = t.calendar.days[getDayKey(date)];
+  const monthLabel = t.calendar.months[getMonthKey(date)];
+
+  const handlePress = useCallback(() => onPress(date), [date, onPress]);
+
+  const a11yProps = getDayCardA11y({
+    date,
+    isSelected,
+    isToday,
+    dayLabel,
+    monthLabel,
+    todayLabel: t.calendar.datePicker.today,
+    selectedLabel: t.calendar.datePicker.selected,
+  });
+
+  return {
+    dayNumberVariant: config.dayNumberVariant,
+    labelVariant: config.labelVariant,
+    dayPaddingVertical: config.dayPaddingVertical,
+    handlePress,
+    dayLabel,
+    monthLabel,
+    a11yProps,
+  };
+}

package/src/components/CalendarStrip/index.ts

@@ -0,0 +1,9 @@
+export { CalendarStrip } from "./CalendarStrip";
+export { getCalendarStripA11y } from "./CalendarStrip.a11y";
+export type {
+  BaseCalendarStripProps,
+  CalendarStripProps,
+  CalendarStripSize,
+} from "./CalendarStrip.types";
+export { DayCard } from "./DayCard";
+export type { DayCardProps } from "./DayCard";

package/src/components/CalendarStrip/useCalendarStripLogic.ts

@@ -0,0 +1,53 @@
+import { useDesignSystem } from "../../provider";
+import { useResponsiveProp } from "@shopify/restyle";
+import { useMemo } from "react";
+import { getCalendarStripA11y } from "./CalendarStrip.a11y";
+import {
+  addDays,
+  generateDateRange,
+  getCalendarStripSizeConfig,
+} from "./CalendarStrip.helpers";
+import {
+  CalendarStripSize,
+  UseCalendarStripLogicParams,
+  UseCalendarStripLogicReturn,
+} from "./CalendarStrip.types";
+
+export function useCalendarStripLogic({
+  size,
+  selectedDate,
+  startDate,
+  endDate,
+}: UseCalendarStripLogicParams): UseCalendarStripLogicReturn {
+  const { labels: t } = useDesignSystem();
+  const resolvedSize = (useResponsiveProp(size) ?? "md") as CalendarStripSize;
+
+  const config = getCalendarStripSizeConfig(resolvedSize);
+
+  const today = new Date();
+
+  const from = startDate ?? today;
+  const to = endDate ?? addDays(from, 6);
+
+  const dates = generateDateRange(from, to);
+
+  const a11yProps = useMemo(
+    () =>
+      getCalendarStripA11y({
+        label: t.calendar.datePicker.label,
+        selectedLabel: t.calendar.datePicker.selected,
+        daysShownLabel: t.calendar.datePicker.daysShown,
+        selectedDate,
+        dateCount: dates.length,
+      }),
+    [t, selectedDate, dates.length],
+  );
+
+  return {
+    dates,
+    today,
+    resolvedSize,
+    containerGap: config.containerGap,
+    a11yProps,
+  };
+}

package/src/components/EmptyState/EmptyState.helpers.ts

@@ -0,0 +1,104 @@
+/**
+ * EmptyState Component Helpers
+ *
+ * Pure functions for computing styles and configurations.
+ * All values are derived from design tokens for consistency.
+ *
+ * ## Variant Configurations
+ *
+ * | Variant | Icon Size | Title Variant | Description Variant | Padding | Gap |
+ * |---------|-----------|---------------|---------------------|---------|-----|
+ * | default | 2xl (40px)| headingMedium | bodyMedium          | xl      | lg  |
+ * | compact | xl (32px) | headingSmall  | bodySmall           | lg      | md  |
+ */
+
+import {
+  EmptyStateVariant,
+  EmptyStateVariantConfig,
+  EmptyStateVariantConfigMap,
+} from "./EmptyState.types";
+
+/**
+ * Variant configuration map.
+ * Defines styling parameters for each variant.
+ */
+export const EMPTY_STATE_VARIANT_CONFIG: EmptyStateVariantConfigMap = {
+  default: {
+    iconSize: "2xl",
+    titleVariant: "headingMedium",
+    descriptionVariant: "bodyMedium",
+    containerPadding: "xl",
+    contentGap: "lg",
+  },
+  compact: {
+    iconSize: "xl",
+    titleVariant: "headingSmall",
+    descriptionVariant: "bodySmall",
+    containerPadding: "lg",
+    contentGap: "md",
+  },
+} as const;
+
+/**
+ * Get configuration for a specific variant.
+ *
+ * @param variant - The empty state variant
+ * @returns Configuration object with styling parameters
+ *
+ * @example
+ * getEmptyStateConfig("default")
+ * // { iconSize: "2xl", titleVariant: "headingMedium", ... }
+ */
+export function getEmptyStateConfig(variant: EmptyStateVariant): EmptyStateVariantConfig {
+  return EMPTY_STATE_VARIANT_CONFIG[variant];
+}
+
+/**
+ * Get icon size token based on variant.
+ *
+ * @param variant - The empty state variant
+ * @returns Icon size token
+ */
+export function getIconSize(variant: EmptyStateVariant): "2xl" | "xl" {
+  return EMPTY_STATE_VARIANT_CONFIG[variant].iconSize;
+}
+
+/**
+ * Get title text variant based on empty state variant.
+ *
+ * @param variant - The empty state variant
+ * @returns Text variant for the title
+ */
+export function getTitleVariant(variant: EmptyStateVariant): "headingSmall" | "headingMedium" {
+  return EMPTY_STATE_VARIANT_CONFIG[variant].titleVariant;
+}
+
+/**
+ * Get description text variant based on empty state variant.
+ *
+ * @param variant - The empty state variant
+ * @returns Text variant for the description
+ */
+export function getDescriptionVariant(variant: EmptyStateVariant): "bodySmall" | "bodyMedium" {
+  return EMPTY_STATE_VARIANT_CONFIG[variant].descriptionVariant;
+}
+
+/**
+ * Get container padding token based on variant.
+ *
+ * @param variant - The empty state variant
+ * @returns Spacing token for container padding
+ */
+export function getContainerPadding(variant: EmptyStateVariant): string {
+  return EMPTY_STATE_VARIANT_CONFIG[variant].containerPadding;
+}
+
+/**
+ * Get content gap token based on variant.
+ *
+ * @param variant - The empty state variant
+ * @returns Spacing token for gap between elements
+ */
+export function getContentGap(variant: EmptyStateVariant): string {
+  return EMPTY_STATE_VARIANT_CONFIG[variant].contentGap;
+}

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,205 @@
+/**
+ * EmptyState Component
+ *
+ * @description Displays a centered message when content is unavailable - Atom
+ *
+ * EmptyState provides visual feedback when a list, search, or view has no
+ * content to display. It guides users with optional actions to resolve
+ * the empty state.
+ *
+ * ## Variants
+ * | Variant | Use Case |
+ * |---------|----------|
+ * | default | Full-page or section empty states |
+ * | compact | Card or constrained space empty states |
+ *
+ * ## Features
+ * - Optional centered icon
+ * - Required title text
+ * - Optional description text
+ * - Optional primary action button
+ * - Optional secondary action (text link)
+ * - Vertical and horizontal centering
+ * - Responsive variant support
+ * - Full accessibility support
+ *
+ * @performance
+ * - Wrapped with React.memo() to prevent unnecessary re-renders
+ * - Uses useMemo() for configuration lookups and color resolution
+ * - Icon and text variant calculated once per variant change
+ * - Element visibility flags cached to avoid render-time checks
+ *
+ * ## Best Practices
+ * - Use clear, actionable titles
+ * - Provide guidance in the description
+ * - Include an action when users can resolve the state
+ * - Keep text concise and helpful
+ *
+ * @see EmptyState.types.ts - Type definitions
+ * @see EmptyState.helpers.ts - Variant configurations
+ * @see EmptyState.a11y.ts - Accessibility support
+ *
+ * @example
+ * // Basic usage
+ * <EmptyState title="No items found" />
+ *
+ * @example
+ * // With icon and description
+ * <EmptyState
+ *   iconName="inbox"
+ *   title="Your inbox is empty"
+ *   description="Messages you receive will appear here"
+ * />
+ *
+ * @example
+ * // With actions
+ * <EmptyState
+ *   iconName="search"
+ *   title="No results"
+ *   description="Try adjusting your search terms"
+ *   actionLabel="Clear filters"
+ *   onAction={handleClearFilters}
+ *   secondaryActionLabel="Browse all"
+ *   onSecondaryAction={handleBrowseAll}
+ * />
+ *
+ * @example
+ * // Compact variant
+ * <EmptyState
+ *   variant="compact"
+ *   title="No notifications"
+ *   description="You're all caught up!"
+ * />
+ */
+
+import {
+  createRestyleComponent,
+  layout,
+  spacing,
+  spacingShorthand,
+} from "@shopify/restyle";
+import React, { memo } from "react";
+import { RestyleTheme } from "../../core/restyle";
+import { Button } from "../../primitives/actions/Button";
+import { Icon } from "../../primitives/content/Icon";
+import { Box } from "../../primitives/layout";
+import { Text } from "../../primitives/typography";
+import { BaseEmptyStateProps, EmptyStateProps } from "./EmptyState.types";
+import { useEmptyStateLogic } from "./useEmptyStateLogic";
+
+/**
+ * Base EmptyState container with Restyle support.
+ * @internal
+ */
+const BaseEmptyStateContainer = createRestyleComponent<
+  BaseEmptyStateProps,
+  RestyleTheme
+>([layout, spacing, spacingShorthand], Box);
+
+function EmptyStateComponent({
+  type = "empty",
+  iconName,
+  title,
+  description,
+  actionLabel,
+  onAction,
+  secondaryActionLabel,
+  onSecondaryAction,
+  variant = "default",
+  testID,
+  accessibilityLabel,
+  ...rest
+}: EmptyStateProps) {
+  const {
+    iconSize,
+    iconColor,
+    titleColor,
+    titleVariant,
+    descriptionVariant,
+    containerPadding,
+    contentGap,
+    a11yProps,
+    showIcon,
+    showAction,
+    showSecondaryAction,
+    resolvedIconName,
+  } = useEmptyStateLogic({
+    type,
+    variant,
+    iconName,
+    title,
+    description,
+    actionLabel,
+    secondaryActionLabel,
+    accessibilityLabel,
+  });
+
+  return (
+    <BaseEmptyStateContainer
+      testID={testID}
+      flex={1}
+      alignItems="center"
+      justifyContent="center"
+      padding={containerPadding}
+      {...a11yProps}
+      {...rest}
+    >
+      <Box alignItems="center" gap={contentGap}>
+        {showIcon && (
+          <Icon
+            name={resolvedIconName}
+            size={iconSize}
+            color={iconColor}
+            accessibilityLabel={resolvedIconName}
+          />
+        )}
+
+        <Box alignItems="center" gap="sm">
+          <Text variant={titleVariant} color={titleColor} textAlign="center">
+            {title}
+          </Text>
+
+          {description && (
+            <Text
+              variant={descriptionVariant}
+              color="textSecondary"
+              textAlign="center"
+            >
+              {description}
+            </Text>
+          )}
+        </Box>
+
+        {(showAction || showSecondaryAction) && (
+          <Box alignItems="center" gap="md" marginTop="md">
+            {showAction && actionLabel && onAction && (
+              <Button
+                title={actionLabel}
+                onPress={onAction}
+                variant="solid"
+                size="md"
+                accessibilityLabel={actionLabel}
+              />
+            )}
+
+            {showSecondaryAction &&
+              secondaryActionLabel &&
+              onSecondaryAction && (
+                <Button
+                  title={secondaryActionLabel}
+                  onPress={onSecondaryAction}
+                  variant="ghost"
+                  size="md"
+                  color="accentPrimary"
+                  accessibilityLabel={secondaryActionLabel}
+                />
+              )}
+          </Box>
+        )}
+      </Box>
+    </BaseEmptyStateContainer>
+  );
+}
+
+export const EmptyState = memo(EmptyStateComponent);
+EmptyState.displayName = "EmptyState";

package/src/components/EmptyState/EmptyState.types.ts

@@ -0,0 +1,213 @@
+/**
+ * EmptyState Component Types
+ *
+ * Type definitions for the EmptyState component and its related hooks/helpers.
+ * All types are explicitly exported for external consumption.
+ *
+ * @see EmptyState.tsx - Component implementation
+ */
+
+import { BoxProps, ResponsiveValue } from "@shopify/restyle";
+import { ViewProps } from "react-native";
+import { RestyleTheme } from "../../core/restyle";
+import { IconName } from "../../primitives/content/Icon";
+
+// =============================================================================
+// VARIANT TYPES
+// =============================================================================
+
+/**
+ * Visual variant for the EmptyState component.
+ * Derived from the restyle theme's `emptyStateVariants` keys.
+ *
+ * - `default`: Full-size empty state with generous spacing
+ * - `compact`: Reduced padding for constrained spaces
+ */
+export type EmptyStateVariant = Exclude<keyof RestyleTheme["emptyStateVariants"], "defaults">;
+
+/**
+ * State type for the EmptyState component.
+ *
+ * - `empty`: No content available (neutral)
+ * - `error`: Something went wrong (shows error styling)
+ */
+export type EmptyStateType = "empty" | "error";
+
+// =============================================================================
+// COMPONENT PROPS
+// =============================================================================
+
+/** Base props combining Restyle Box props with ViewProps */
+export type BaseEmptyStateProps = BoxProps<RestyleTheme> & ViewProps;
+
+/**
+ * Props for the EmptyState component.
+ *
+ * @example
+ * // Basic usage
+ * <EmptyState title="No items found" />
+ *
+ * @example
+ * // Full featured
+ * <EmptyState
+ *   iconName="inbox"
+ *   title="Your inbox is empty"
+ *   description="Messages you receive will appear here"
+ *   actionLabel="Compose message"
+ *   onAction={handleCompose}
+ *   secondaryActionLabel="Learn more"
+ *   onSecondaryAction={handleLearnMore}
+ * />
+ */
+export interface EmptyStateProps extends Omit<BaseEmptyStateProps, "style"> {
+  /**
+   * Type of empty state to display.
+   * @default "empty"
+   */
+  type?: EmptyStateType;
+
+  /**
+   * Icon name to display above the title.
+   * Uses design system Icon component.
+   * If not provided, defaults based on type (inbox for empty, error for error).
+   */
+  iconName?: IconName;
+
+  /**
+   * Primary title text (required).
+   * Should be concise and descriptive.
+   */
+  title: string;
+
+  /**
+   * Optional description text below the title.
+   * Provides additional context or guidance.
+   */
+  description?: string;
+
+  /**
+   * Label for the primary action button.
+   * When provided with onAction, renders a Button.
+   */
+  actionLabel?: string;
+
+  /**
+   * Handler for the primary action button.
+   * Required if actionLabel is provided.
+   */
+  onAction?: () => void;
+
+  /**
+   * Label for the secondary action (text link style).
+   * When provided with onSecondaryAction, renders a text link.
+   */
+  secondaryActionLabel?: string;
+
+  /**
+   * Handler for the secondary action.
+   * Required if secondaryActionLabel is provided.
+   */
+  onSecondaryAction?: () => void;
+
+  /**
+   * Visual variant controlling spacing and sizing.
+   * @default "default"
+   */
+  variant?: ResponsiveValue<EmptyStateVariant, RestyleTheme["breakpoints"]>;
+
+  /** Test ID for testing frameworks */
+  testID?: string;
+
+  /** Accessibility label for the entire empty state container */
+  accessibilityLabel?: string;
+}
+
+// =============================================================================
+// HOOK TYPES
+// =============================================================================
+
+/**
+ * Parameters for the useEmptyStateLogic hook.
+ */
+export interface UseEmptyStateLogicParams {
+  type: EmptyStateType;
+  variant: ResponsiveValue<EmptyStateVariant, RestyleTheme["breakpoints"]>;
+  iconName?: IconName;
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  secondaryActionLabel?: string;
+  accessibilityLabel?: string;
+}
+
+/**
+ * Return value from the useEmptyStateLogic hook.
+ */
+export interface UseEmptyStateLogicReturn {
+  /** Resolved icon size token */
+  iconSize: "2xl" | "xl";
+  /** Icon color token */
+  iconColor: keyof RestyleTheme["colors"];
+  /** Title color token */
+  titleColor: keyof RestyleTheme["colors"];
+  /** Title text variant */
+  titleVariant: "headingSmall" | "headingMedium";
+  /** Description text variant */
+  descriptionVariant: "bodySmall" | "bodyMedium";
+  /** Container padding token */
+  containerPadding: keyof RestyleTheme["spacing"];
+  /** Gap between elements */
+  contentGap: keyof RestyleTheme["spacing"];
+  /** Accessibility props */
+  a11yProps: EmptyStateA11yProps;
+  /** Whether to show the icon */
+  showIcon: boolean;
+  /** Whether to show the primary action button */
+  showAction: boolean;
+  /** Whether to show the secondary action link */
+  showSecondaryAction: boolean;
+  /** Resolved icon name (with default fallback) */
+  resolvedIconName: IconName;
+}
+
+// =============================================================================
+// HELPER TYPES
+// =============================================================================
+
+/**
+ * Configuration for variant-specific styling.
+ */
+export interface EmptyStateVariantConfig {
+  iconSize: "2xl" | "xl";
+  titleVariant: "headingSmall" | "headingMedium";
+  descriptionVariant: "bodySmall" | "bodyMedium";
+  containerPadding: keyof RestyleTheme["spacing"];
+  contentGap: keyof RestyleTheme["spacing"];
+}
+
+/**
+ * Map of variant configurations.
+ */
+export type EmptyStateVariantConfigMap = Record<EmptyStateVariant, EmptyStateVariantConfig>;
+
+// =============================================================================
+// ACCESSIBILITY TYPES
+// =============================================================================
+
+/**
+ * Parameters for generating empty state accessibility props.
+ */
+export interface EmptyStateA11yParams {
+  title: string;
+  description?: string;
+  accessibilityLabel?: string;
+}
+
+/**
+ * Accessibility props returned by getEmptyStateA11y.
+ */
+export interface EmptyStateA11yProps {
+  accessible: boolean;
+  accessibilityRole: "text";
+  accessibilityLabel: string;
+}

package/src/components/EmptyState/index.ts

@@ -0,0 +1,44 @@
+/**
+ * EmptyState Component
+ *
+ * @description Displays a centered message when content is unavailable
+ *
+ * @example
+ * import { EmptyState } from "@/design-system";
+ *
+ * // Basic usage
+ * <EmptyState title="No items found" />
+ *
+ * // With icon and actions
+ * <EmptyState
+ *   iconName="inbox"
+ *   title="Your inbox is empty"
+ *   description="Messages will appear here"
+ *   actionLabel="Compose"
+ *   onAction={handleCompose}
+ * />
+ */
+
+export { EmptyState } from "./EmptyState";
+export type {
+  BaseEmptyStateProps,
+  EmptyStateA11yParams,
+  EmptyStateA11yProps,
+  EmptyStateProps,
+  EmptyStateVariant,
+  EmptyStateVariantConfig,
+  EmptyStateVariantConfigMap,
+  UseEmptyStateLogicParams,
+  UseEmptyStateLogicReturn,
+} from "./EmptyState.types";
+export {
+  EMPTY_STATE_VARIANT_CONFIG,
+  getContainerPadding,
+  getContentGap,
+  getDescriptionVariant,
+  getEmptyStateConfig,
+  getIconSize,
+  getTitleVariant,
+} from "./EmptyState.helpers";
+export { getEmptyStateA11y } from "./EmptyState.a11y";
+export { useEmptyStateLogic } from "./useEmptyStateLogic";