@titan-design/react-ui 0.0.1 → 0.1.0

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { ViewProps, PressableProps, View, TextInputProps, TextInput, ImageSourcePropType, ModalProps as ModalProps$1, TextProps } from 'react-native';
-export { ComponentType, ElevationConfig, ElevationLevel, ShadowIntensity, ShadowSurface, ThemeConfig, ThemeMode, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors } from './theme/index.js';
+import { ElevationLevel, GlowIntensity } from './theme/index.js';
+export { ComponentType, ElevationConfig, ShadowIntensity, ShadowSurface, ThemeConfig, ThemeMode, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors } from './theme/index.js';
 import { ClassValue } from 'clsx';
 
 type AlertStatus = 'success' | 'info' | 'warning' | 'error';
@@ -1815,6 +1816,102 @@ interface FormRowProps extends ViewProps {
  */
 declare function FormRow({ gap, className, children, ...props }: FormRowProps): react_jsx_runtime.JSX.Element;
 
+type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+interface StackProps extends ViewProps {
+    gap?: Gap;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    wrap?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function Stack({ gap, align, justify, wrap, className, children, ...props }: StackProps): react_jsx_runtime.JSX.Element;
+declare function HStack(props: StackProps): react_jsx_runtime.JSX.Element;
+declare function VStack(props: StackProps): react_jsx_runtime.JSX.Element;
+
+interface SectionProps extends ViewProps {
+    className?: string;
+    children: React.ReactNode;
+}
+declare function Section({ className, children, ...props }: SectionProps): react_jsx_runtime.JSX.Element;
+interface SectionHeaderProps {
+    title: string;
+    subtitle?: string;
+    trailing?: React.ReactNode;
+    className?: string;
+}
+declare function SectionHeader({ title, subtitle, trailing, className }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+interface SectionContentProps extends ViewProps {
+    className?: string;
+    children: React.ReactNode;
+}
+declare function SectionContent({ className, children, ...props }: SectionContentProps): react_jsx_runtime.JSX.Element;
+
+interface DataRowProps extends ViewProps {
+    /** Descriptive label shown on the left */
+    label: string;
+    /** Value shown on the right -- string renders as Text, ReactNode renders inside a View */
+    value: React.ReactNode;
+    /** Additional className applied to the value element */
+    valueClassName?: string;
+    /** Additional className applied to the root container */
+    className?: string;
+}
+declare function DataRow({ label, value, valueClassName, className, ...props }: DataRowProps): react_jsx_runtime.JSX.Element;
+
+type IconBoxColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';
+type IconBoxSize = 'sm' | 'md' | 'lg';
+interface IconBoxProps extends ViewProps {
+    icon: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    color?: IconBoxColor;
+    size?: IconBoxSize;
+    className?: string;
+}
+declare function IconBox({ icon: Icon, color, size, className, ...props }: IconBoxProps): react_jsx_runtime.JSX.Element;
+
+interface SurfaceProps extends ViewProps {
+    elevation?: ElevationLevel;
+    glowColor?: string;
+    glowIntensity?: GlowIntensity;
+    theme?: 'light' | 'dark';
+    className?: string;
+    children: React.ReactNode;
+}
+declare function Surface({ elevation, glowColor, glowIntensity, theme, className, style, children, ...props }: SurfaceProps): react_jsx_runtime.JSX.Element;
+
+interface ListItemProps extends PressableProps {
+    className?: string;
+    children: React.ReactNode;
+}
+declare function ListItem({ className, children, onPress, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+interface ListItemIconProps extends ViewProps {
+    icon: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    className?: string;
+}
+declare function ListItemIcon({ icon: Icon, className, ...props }: ListItemIconProps): react_jsx_runtime.JSX.Element;
+interface ListItemContentProps extends ViewProps {
+    title: string;
+    subtitle?: string;
+    className?: string;
+}
+declare function ListItemContent({ title, subtitle, className, ...props }: ListItemContentProps): react_jsx_runtime.JSX.Element;
+interface ListItemTrailingProps extends ViewProps {
+    className?: string;
+    children: React.ReactNode;
+}
+declare function ListItemTrailing({ className, children, ...props }: ListItemTrailingProps): react_jsx_runtime.JSX.Element;
+interface ListItemDividerProps extends ViewProps {
+    inset?: boolean;
+    className?: string;
+}
+declare function ListItemDivider({ inset, className, ...props }: ListItemDividerProps): react_jsx_runtime.JSX.Element;
+
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'subtitle1' | 'subtitle2' | 'caption' | 'overline' | 'button';
 type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
 type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
@@ -2313,6 +2410,22 @@ declare function DateTime({ value, format, customFormat, isUTC, fallback, color,
  */
 declare function formatDateTime(value: number | Date | string | null | undefined, format?: DateTimeFormat, isUTC?: boolean, fallback?: string): string;
 
+type MetricTrend = 'up' | 'down' | 'neutral';
+interface MetricProps extends ViewProps {
+    value: string;
+    label: string;
+    unit?: string;
+    trend?: MetricTrend;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare function Metric({ value, label, unit, trend, size, className, ...props }: MetricProps): react_jsx_runtime.JSX.Element;
+interface MetricGroupProps extends ViewProps {
+    className?: string;
+    children: React.ReactNode;
+}
+declare function MetricGroup({ className, children, ...props }: MetricGroupProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Utility function to merge Tailwind CSS classes with proper conflict resolution.
  * Combines clsx for conditional classes with tailwind-merge for deduplication.
@@ -2481,4 +2594,4 @@ type FormErrors<T extends FormValues> = Partial<Record<keyof T, string>>;
  */
 type FormTouched<T extends FormValues> = Partial<Record<keyof T, boolean>>;
 
-export { Accordion, AccordionButton, type AccordionButtonProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, type AlertVariant, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeProps, type BadgeSize, BadgeText, type BadgeTextProps, type BadgeVariant, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonIcon, type ButtonIconProps, type ButtonProps, type ButtonSize, ButtonSpinner, type ButtonSpinnerProps, ButtonText, type ButtonTextProps, type ButtonVariant, Caption, type CaptionProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, type CardElevation, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardSkeleton, type CardSkeletonProps, CardTitle, type CardTitleProps, type CardVariant, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, CircularProgress, type CircularProgressProps, Collapse, CollapseButton, type CollapseButtonProps, CollapseContent, type CollapseContentProps, type CollapseProps, DateTime, type DateTimeFormat, type DateTimeProps, Divider, type DividerOrientation, type DividerProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, type DrawerProps, type DrawerSize, EmptyState, type EmptyStateProps, type FieldState, type FieldWrapperProps, FormActions, type FormActionsProps, type FormErrors, FormField, type FormFieldProps, FormRow, type FormRowProps, FormSection, type FormSectionProps, type FormTouched, type FormValues, Heading, type HeadingProps, HelpTip, type HelpTipIcon, type HelpTipPlacement, type HelpTipProps, type HelpTipSize, Input, InputGroup, type InputGroupProps, type InputProps, type InputSize, type InputVariant, Label, type LabelProps, LabelWithHelp, type LabelWithHelpProps, Link, type LinkColor, type LinkProps, type LinkUnderline, Menu, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MenuTrigger, type MenuTriggerProps, Modal, ModalBody, type ModalBodyProps, ModalCloseButton, type ModalCloseButtonProps, ModalContent, type ModalContentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, Overline, type OverlineProps, Paragraph, type ParagraphProps, PasswordInput, type PasswordInputProps, Popover, PopoverCloseButton, type PopoverCloseButtonProps, PopoverContent, type PopoverContentProps, type PopoverPlacement, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, ProgressSteps, type ProgressStepsProps, type ProgressVariant, Radio, type RadioColor, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type ResultType, Select, type SelectOption, type SelectProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarDivider, type SidebarDividerProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonAnimation, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonListItem, type SkeletonListItemProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, type StatusType, Step, StepContent, type StepContentProps, StepIndicator, type StepIndicatorProps, StepLabel, type StepLabelProps, type StepProps, type StepStatus, Stepper, type StepperOrientation, type StepperProps, Switch, type SwitchProps, type SwitchSize, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TablePagination, type TablePaginationProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsOrientation, type TabsProps, type TabsVariant, Toast, type ToastConfig, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastStatus, ToolbarButton, ToolbarButtonGroup, type ToolbarButtonGroupProps, type ToolbarButtonProps, type ToolbarButtonSize, type ToolbarButtonVariant, Tooltip, type TooltipPlacement, type TooltipProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type UseTableOptions, type UseTableReturn, alpha, cn, composeValidators, createFieldId, formatDateTime, getContrastText, getFieldAriaProps, getFieldValidationProps, getLuminance, getResultColor, getStatusColor, hasMaxLength, hasMinLength, isEmpty, isValidEmail, useTable, useToast, useToolbarButton, validationRules };
+export { Accordion, AccordionButton, type AccordionButtonProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, type AlertVariant, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeProps, type BadgeSize, BadgeText, type BadgeTextProps, type BadgeVariant, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonIcon, type ButtonIconProps, type ButtonProps, type ButtonSize, ButtonSpinner, type ButtonSpinnerProps, ButtonText, type ButtonTextProps, type ButtonVariant, Caption, type CaptionProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, type CardElevation, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardSkeleton, type CardSkeletonProps, CardTitle, type CardTitleProps, type CardVariant, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, CircularProgress, type CircularProgressProps, Collapse, CollapseButton, type CollapseButtonProps, CollapseContent, type CollapseContentProps, type CollapseProps, DataRow, type DataRowProps, DateTime, type DateTimeFormat, type DateTimeProps, Divider, type DividerOrientation, type DividerProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, type DrawerProps, type DrawerSize, ElevationLevel, EmptyState, type EmptyStateProps, type FieldState, type FieldWrapperProps, FormActions, type FormActionsProps, type FormErrors, FormField, type FormFieldProps, FormRow, type FormRowProps, FormSection, type FormSectionProps, type FormTouched, type FormValues, GlowIntensity, HStack, Heading, type HeadingProps, HelpTip, type HelpTipIcon, type HelpTipPlacement, type HelpTipProps, type HelpTipSize, IconBox, type IconBoxProps, Input, InputGroup, type InputGroupProps, type InputProps, type InputSize, type InputVariant, Label, type LabelProps, LabelWithHelp, type LabelWithHelpProps, Link, type LinkColor, type LinkProps, type LinkUnderline, ListItem, ListItemContent, type ListItemContentProps, ListItemDivider, type ListItemDividerProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemTrailing, type ListItemTrailingProps, Menu, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MenuTrigger, type MenuTriggerProps, Metric, MetricGroup, type MetricGroupProps, type MetricProps, type MetricTrend, Modal, ModalBody, type ModalBodyProps, ModalCloseButton, type ModalCloseButtonProps, ModalContent, type ModalContentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, Overline, type OverlineProps, Paragraph, type ParagraphProps, PasswordInput, type PasswordInputProps, Popover, PopoverCloseButton, type PopoverCloseButtonProps, PopoverContent, type PopoverContentProps, type PopoverPlacement, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, ProgressSteps, type ProgressStepsProps, type ProgressVariant, Radio, type RadioColor, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type ResultType, Section, SectionContent, type SectionContentProps, SectionHeader, type SectionHeaderProps, type SectionProps, Select, type SelectOption, type SelectProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarDivider, type SidebarDividerProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonAnimation, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonListItem, type SkeletonListItemProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Stack, type StackProps, type StatusType, Step, StepContent, type StepContentProps, StepIndicator, type StepIndicatorProps, StepLabel, type StepLabelProps, type StepProps, type StepStatus, Stepper, type StepperOrientation, type StepperProps, Surface, type SurfaceProps, Switch, type SwitchProps, type SwitchSize, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TablePagination, type TablePaginationProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsOrientation, type TabsProps, type TabsVariant, Toast, type ToastConfig, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastStatus, ToolbarButton, ToolbarButtonGroup, type ToolbarButtonGroupProps, type ToolbarButtonProps, type ToolbarButtonSize, type ToolbarButtonVariant, Tooltip, type TooltipPlacement, type TooltipProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type UseTableOptions, type UseTableReturn, VStack, alpha, cn, composeValidators, createFieldId, formatDateTime, getContrastText, getFieldAriaProps, getFieldValidationProps, getLuminance, getResultColor, getStatusColor, hasMaxLength, hasMinLength, isEmpty, isValidEmail, useTable, useToast, useToolbarButton, validationRules };

package/dist/index.js

@@ -1329,7 +1329,7 @@ function hsvToRgb(h, s, v) {
   const c = v * s;
   const x = c * (1 - Math.abs(h / 60 % 2 - 1));
   const m = v - c;
-  let rPrime = 0, gPrime = 0, bPrime = 0;
+  let rPrime, gPrime, bPrime;
   if (h >= 0 && h < 60) {
     rPrime = c;
     gPrime = x;
@@ -1880,6 +1880,28 @@ function getValidatedElevation(component, requested) {
     (prev, curr) => Math.abs(curr - requested) < Math.abs(prev - requested) ? curr : prev
   );
 }
+var glowConfig = {
+  subtle: { blur: 12, spread: 0, opacity: 0.25 },
+  medium: { blur: 20, spread: 2, opacity: 0.4 },
+  strong: { blur: 30, spread: 4, opacity: 0.55 }
+};
+function getGlowShadow(color, intensity = "medium") {
+  const config = glowConfig[intensity];
+  const rgb = hexToRgb(color);
+  if (!rgb) return {};
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: `0 0 ${config.blur}px ${config.spread}px rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${config.opacity})`
+    },
+    default: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: config.opacity,
+      shadowRadius: config.blur / 2,
+      elevation: 0
+    }
+  });
+}
 function getTheme() {
   if (typeof document === "undefined") return "dark";
   return document.documentElement.classList.contains("light") ? "light" : "dark";
@@ -4912,6 +4934,177 @@ function FormRow({
     }
   );
 }
+var gapClasses = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  8: "gap-8",
+  10: "gap-10",
+  12: "gap-12"
+};
+var alignMap = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var justifyMap = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
+};
+function Stack({
+  gap = 0,
+  align,
+  justify,
+  wrap,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn(
+        "flex",
+        gapClasses[gap],
+        align && alignMap[align],
+        justify && justifyMap[justify],
+        wrap && "flex-wrap",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function HStack(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Stack, { ...props, className: cn("flex-row", props.className) });
+}
+function VStack(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Stack, { ...props, className: cn("flex-col", props.className) });
+}
+function Section({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("mb-6", className), ...props, children });
+}
+function SectionHeader({ title, subtitle, trailing, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center justify-between mb-3 px-1", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm font-semibold text-text-secondary uppercase tracking-wider", children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-xs text-text-tertiary mt-0.5", children: subtitle })
+    ] }),
+    trailing && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: trailing })
+  ] });
+}
+function SectionContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn(className), ...props, children });
+}
+function DataRow({ label, value, valueClassName, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center justify-between py-2", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm text-text-secondary", children: label }),
+    typeof value === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-sm font-medium text-text-primary", valueClassName), children: value }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn(valueClassName), children: value })
+  ] });
+}
+var colorClasses = {
+  primary: { bg: "bg-brand-primary/10", icon: "text-brand-primary" },
+  secondary: { bg: "bg-brand-secondary/10", icon: "text-brand-secondary" },
+  success: { bg: "bg-status-success/10", icon: "text-status-success" },
+  error: { bg: "bg-status-error/10", icon: "text-status-error" },
+  warning: { bg: "bg-status-warning/10", icon: "text-status-warning" },
+  info: { bg: "bg-status-info/10", icon: "text-status-info" },
+  neutral: { bg: "bg-surface-elevated", icon: "text-text-secondary" }
+};
+var sizeClasses = {
+  sm: { box: "w-8 h-8 rounded-lg", iconSize: 16 },
+  md: { box: "w-10 h-10 rounded-xl", iconSize: 20 },
+  lg: { box: "w-12 h-12 rounded-xl", iconSize: 24 }
+};
+function IconBox({
+  icon: Icon,
+  color = "neutral",
+  size = "md",
+  className,
+  ...props
+}) {
+  const colors = colorClasses[color];
+  const sizes = sizeClasses[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("items-center justify-center", colors.bg, sizes.box, className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: sizes.iconSize, className: colors.icon })
+    }
+  );
+}
+function Surface({
+  elevation = 0,
+  glowColor,
+  glowIntensity,
+  theme = "dark",
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const baseColor = getBaseSurfaceColor(theme);
+  const surfaceColor = getElevationSurface(baseColor, elevation, theme);
+  const shadowStyle = getElevationShadow(baseColor, elevation, theme);
+  const glowStyle = glowColor ? getGlowShadow(glowColor, glowIntensity) : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("rounded-2xl", className),
+      style: [
+        { backgroundColor: surfaceColor },
+        shadowStyle,
+        glowStyle,
+        style
+      ],
+      ...props,
+      children
+    }
+  );
+}
+function ListItem({ className, children, onPress, ...props }) {
+  const Container = onPress ? reactNative.Pressable : reactNative.View;
+  const containerProps = onPress ? { onPress, ...props } : props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Container,
+    {
+      className: cn("flex-row items-center py-3 px-4 min-h-[48px]", className),
+      ...containerProps,
+      children
+    }
+  );
+}
+function ListItemIcon({ icon: Icon, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("mr-3 items-center justify-center", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 20, className: "text-text-secondary" }) });
+}
+function ListItemContent({ title, subtitle, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-1 justify-center", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm font-medium text-text-primary", children: title }),
+    subtitle && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-xs text-text-secondary mt-0.5", children: subtitle })
+  ] });
+}
+function ListItemTrailing({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("ml-3 items-center justify-center", className), ...props, children });
+}
+function ListItemDivider({ inset = true, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("h-px bg-divider", inset ? "ml-14" : "", className),
+      ...props
+    }
+  );
+}
 var variantStyles4 = {
   h1: "font-heading text-5xl font-bold leading-tight",
   h2: "font-heading text-4xl font-bold leading-tight",
@@ -5740,6 +5933,57 @@ function formatDateTime(value, format = "datetime", isUTC = false, fallback = "-
   }
   return formatDate(value, format, isUTC);
 }
+var sizeConfig2 = {
+  sm: { value: "text-lg font-bold", label: "text-xs", unit: "text-xs" },
+  md: { value: "text-2xl font-bold", label: "text-xs", unit: "text-sm" },
+  lg: { value: "text-4xl font-bold", label: "text-sm", unit: "text-base" }
+};
+var trendColors = {
+  up: "text-result-improve",
+  down: "text-result-degrade",
+  neutral: "text-result-inconclusive"
+};
+var trendArrows = {
+  up: "\u2191",
+  down: "\u2193",
+  neutral: "\u2192"
+};
+function Metric({
+  value,
+  label,
+  unit,
+  trend,
+  size = "md",
+  className,
+  ...props
+}) {
+  const styles2 = sizeConfig2[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("items-center", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-row items-baseline gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(styles2.value, "text-text-primary"), children: value }),
+      unit && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(styles2.unit, "text-text-tertiary"), children: unit }),
+      trend && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(styles2.unit, trendColors[trend]), children: trendArrows[trend] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(styles2.label, "text-text-secondary mt-1"), children: label })
+  ] });
+}
+function MetricGroup({
+  className,
+  children,
+  ...props
+}) {
+  const items = React24__default.default.Children.toArray(children);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("flex-row items-center", className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxRuntime.jsxs(React24__default.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "flex-1 items-center", children: child }),
+    i < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        className: "w-px h-8 bg-divider mx-2",
+        testID: "metric-divider"
+      }
+    )
+  ] }, i)) });
+}
 
 // src/utils/colors.ts
 function getStatusColor(status) {
@@ -5922,6 +6166,7 @@ exports.CircularProgress = CircularProgress;
 exports.Collapse = Collapse;
 exports.CollapseButton = CollapseButton;
 exports.CollapseContent = CollapseContent;
+exports.DataRow = DataRow;
 exports.DateTime = DateTime;
 exports.Divider = Divider;
 exports.Drawer = Drawer;
@@ -5933,19 +6178,28 @@ exports.FormActions = FormActions;
 exports.FormField = FormField;
 exports.FormRow = FormRow;
 exports.FormSection = FormSection;
+exports.HStack = HStack;
 exports.Heading = Heading;
 exports.HelpTip = HelpTip;
+exports.IconBox = IconBox;
 exports.Input = Input;
 exports.InputGroup = InputGroup;
 exports.Label = Label;
 exports.LabelWithHelp = LabelWithHelp;
 exports.Link = Link;
+exports.ListItem = ListItem;
+exports.ListItemContent = ListItemContent;
+exports.ListItemDivider = ListItemDivider;
+exports.ListItemIcon = ListItemIcon;
+exports.ListItemTrailing = ListItemTrailing;
 exports.Menu = Menu;
 exports.MenuDivider = MenuDivider;
 exports.MenuGroup = MenuGroup;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
 exports.MenuTrigger = MenuTrigger;
+exports.Metric = Metric;
+exports.MetricGroup = MetricGroup;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalCloseButton = ModalCloseButton;
@@ -5964,6 +6218,9 @@ exports.Progress = Progress;
 exports.ProgressSteps = ProgressSteps;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
+exports.Section = Section;
+exports.SectionContent = SectionContent;
+exports.SectionHeader = SectionHeader;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.SidebarContent = SidebarContent;
@@ -5978,11 +6235,13 @@ exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonListItem = SkeletonListItem;
 exports.SkeletonText = SkeletonText;
 exports.Spinner = Spinner;
+exports.Stack = Stack;
 exports.Step = Step;
 exports.StepContent = StepContent;
 exports.StepIndicator = StepIndicator;
 exports.StepLabel = StepLabel;
 exports.Stepper = Stepper;
+exports.Surface = Surface;
 exports.Switch = Switch;
 exports.Tab = Tab;
 exports.TabList = TabList;
@@ -6002,6 +6261,7 @@ exports.ToolbarButton = ToolbarButton;
 exports.ToolbarButtonGroup = ToolbarButtonGroup;
 exports.Tooltip = Tooltip;
 exports.Typography = Typography;
+exports.VStack = VStack;
 exports.alpha = alpha;
 exports.buttonSizes = buttonSizes;
 exports.cn = cn;
@@ -6026,6 +6286,7 @@ exports.getElevationShadow = getElevationShadow;
 exports.getElevationSurface = getElevationSurface;
 exports.getFieldAriaProps = getFieldAriaProps;
 exports.getFieldValidationProps = getFieldValidationProps;
+exports.getGlowShadow = getGlowShadow;
 exports.getHoverColors = getHoverColors;
 exports.getLuminance = getLuminance;
 exports.getResultColor = getResultColor;