@dailyautomations/ui 1.4.0 → 1.5.0

package/src/native/components/ui/alert.tsx

@@ -0,0 +1,94 @@
+/**
+ * Native Alert component
+ * View-based alert matching web Alert API
+ */
+
+import * as React from 'react';
+import { View, Text, type ViewStyle } from 'react-native';
+import { cn } from '../../utils/cn';
+
+type AlertVariant = 'default' | 'destructive' | 'success' | 'warning';
+
+export interface AlertProps {
+  children?: React.ReactNode;
+  variant?: AlertVariant;
+  className?: string;
+  style?: ViewStyle;
+}
+
+const variantClasses: Record<AlertVariant, { container: string; text: string }> = {
+  default: {
+    container: 'bg-card border-border',
+    text: 'text-foreground',
+  },
+  destructive: {
+    container: 'border-red-500/50 bg-red-500/10',
+    text: 'text-red-400',
+  },
+  success: {
+    container: 'border-green-500/50 bg-green-500/10',
+    text: 'text-green-400',
+  },
+  warning: {
+    container: 'border-amber-500/50 bg-amber-500/10',
+    text: 'text-amber-400',
+  },
+};
+
+export function Alert({
+  children,
+  variant = 'default',
+  className,
+  style,
+}: AlertProps) {
+  const variantStyle = variantClasses[variant];
+
+  return (
+    <View
+      data-slot="alert"
+      data-variant={variant}
+      className={cn(
+        'rounded-lg border p-4',
+        variantStyle.container,
+        className
+      )}
+      style={style}
+    >
+      {children}
+    </View>
+  );
+}
+
+export interface AlertTitleProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function AlertTitle({ children, className }: AlertTitleProps) {
+  return (
+    <Text
+      data-slot="alert-title"
+      className={cn('text-base font-semibold mb-1', className)}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export interface AlertDescriptionProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function AlertDescription({ children, className }: AlertDescriptionProps) {
+  return (
+    <Text
+      data-slot="alert-description"
+      className={cn('text-sm opacity-80', className)}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export type { AlertVariant };

package/src/native/components/ui/avatar.tsx

@@ -0,0 +1,73 @@
+/**
+ * Native Avatar components
+ * Image + fallback matching web Avatar API
+ */
+
+import * as React from 'react';
+import { View, Image, Text, type ImageStyle, type ViewStyle } from 'react-native';
+import { cn } from '../../utils/cn';
+
+export interface AvatarProps {
+  children?: React.ReactNode;
+  className?: string;
+  style?: ViewStyle;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeClasses = {
+  sm: 'h-8 w-8',
+  md: 'h-10 w-10',
+  lg: 'h-12 w-12',
+};
+
+export function Avatar({ children, className, style, size = 'md' }: AvatarProps) {
+  return (
+    <View
+      data-slot="avatar"
+      className={cn(
+        'rounded-full overflow-hidden items-center justify-center bg-muted',
+        sizeClasses[size],
+        className
+      )}
+      style={style}
+    >
+      {children}
+    </View>
+  );
+}
+
+export interface AvatarImageProps {
+  source: { uri: string };
+  className?: string;
+  style?: ImageStyle;
+}
+
+export function AvatarImage({ source, className, style }: AvatarImageProps) {
+  return (
+    <Image
+      data-slot="avatar-image"
+      source={source}
+      className={cn('h-full w-full', className)}
+      style={style}
+      resizeMode="cover"
+    />
+  );
+}
+
+export interface AvatarFallbackProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function AvatarFallback({ children, className }: AvatarFallbackProps) {
+  return (
+    <View
+      data-slot="avatar-fallback"
+      className={cn('h-full w-full items-center justify-center bg-muted', className)}
+    >
+      <Text className="text-sm font-semibold text-muted-foreground">
+        {children}
+      </Text>
+    </View>
+  );
+}

package/src/native/components/ui/empty-state.tsx

@@ -0,0 +1,76 @@
+/**
+ * Native EmptyState component
+ * View + Text based empty state matching web EmptyState API
+ */
+
+import * as React from 'react';
+import { View, Text, type ViewStyle } from 'react-native';
+import { cn } from '../../utils/cn';
+
+type EmptyStateVariant = 'default' | 'compact';
+
+export interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title?: string;
+  description?: string;
+  action?: React.ReactNode;
+  variant?: EmptyStateVariant;
+  className?: string;
+  style?: ViewStyle;
+}
+
+export function EmptyState({
+  icon,
+  title = 'No results',
+  description,
+  action,
+  variant = 'default',
+  className,
+  style,
+}: EmptyStateProps) {
+  const isCompact = variant === 'compact';
+
+  return (
+    <View
+      data-slot="empty-state"
+      data-variant={variant}
+      className={cn(
+        'items-center justify-center py-8 px-4',
+        isCompact ? 'py-4' : 'py-8',
+        className
+      )}
+      style={style}
+    >
+      {icon && (
+        <View className={cn('mb-4', isCompact && 'mb-2')}>
+          {icon}
+        </View>
+      )}
+      <Text
+        className={cn(
+          'text-center font-semibold text-muted-foreground',
+          isCompact ? 'text-sm' : 'text-lg'
+        )}
+      >
+        {title}
+      </Text>
+      {description && (
+        <Text
+          className={cn(
+            'text-center text-muted-foreground mt-1',
+            isCompact ? 'text-xs' : 'text-sm'
+          )}
+        >
+          {description}
+        </Text>
+      )}
+      {action && (
+        <View className="mt-4">
+          {action}
+        </View>
+      )}
+    </View>
+  );
+}
+
+export type { EmptyStateVariant };

package/src/native/components/ui/loading-spinner.tsx

@@ -0,0 +1,108 @@
+/**
+ * Native LoadingSpinner components
+ * Animated spinner matching web LoadingSpinner API
+ */
+
+import * as React from 'react';
+import { View, Animated, type ViewStyle } from 'react-native';
+import { cn } from '../../utils/cn';
+import { colors } from '../../../shared/tokens';
+
+type SpinnerSize = 'sm' | 'md' | 'lg';
+
+export interface LoadingSpinnerProps {
+  size?: SpinnerSize;
+  color?: string;
+  className?: string;
+  style?: ViewStyle;
+}
+
+const sizeMap: Record<SpinnerSize, number> = {
+  sm: 16,
+  md: 24,
+  lg: 32,
+};
+
+export function LoadingSpinner({
+  size = 'md',
+  color,
+  className,
+  style,
+}: LoadingSpinnerProps) {
+  const rotation = React.useRef(new Animated.Value(0)).current;
+  const spinnerSize = sizeMap[size];
+  const spinnerColor = color || colors.primary.hex;
+
+  React.useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(rotation, {
+        toValue: 1,
+        duration: 1000,
+        useNativeDriver: true,
+      })
+    );
+
+    animation.start();
+    return () => animation.stop();
+  }, [rotation]);
+
+  const spin = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View
+      data-slot="loading-spinner"
+      data-size={size}
+      className={cn('items-center justify-center', className)}
+      style={[
+        {
+          width: spinnerSize,
+          height: spinnerSize,
+          transform: [{ rotate: spin }],
+        },
+        style,
+      ]}
+    >
+      <View
+        style={{
+          width: spinnerSize,
+          height: spinnerSize,
+          borderRadius: spinnerSize / 2,
+          borderWidth: 2,
+          borderColor: spinnerColor,
+          borderTopColor: 'transparent',
+        }}
+      />
+    </Animated.View>
+  );
+}
+
+export interface LoadingOverlayProps {
+  visible: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function LoadingOverlay({
+  visible,
+  children,
+  className,
+}: LoadingOverlayProps) {
+  if (!visible) return null;
+
+  return (
+    <View
+      data-slot="loading-overlay"
+      className={cn(
+        'absolute inset-0 bg-background/80 items-center justify-center',
+        className
+      )}
+    >
+      {children || <LoadingSpinner size="lg" />}
+    </View>
+  );
+}
+
+export type { SpinnerSize };

package/src/native/components/ui/progress.tsx

@@ -0,0 +1,56 @@
+/**
+ * Native Progress component
+ * Animated width progress bar matching web Progress API
+ */
+
+import * as React from 'react';
+import { View, Animated, type ViewStyle } from 'react-native';
+import { cn } from '../../utils/cn';
+
+export interface ProgressProps {
+  value?: number;
+  max?: number;
+  className?: string;
+  style?: ViewStyle;
+}
+
+export function Progress({
+  value = 0,
+  max = 100,
+  className,
+  style,
+}: ProgressProps) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+  const animatedWidth = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    Animated.timing(animatedWidth, {
+      toValue: percentage,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  }, [percentage, animatedWidth]);
+
+  return (
+    <View
+      data-slot="progress"
+      className={cn(
+        'h-2 w-full rounded-full bg-muted overflow-hidden',
+        className
+      )}
+      style={style}
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max, now: value }}
+    >
+      <Animated.View
+        className="h-full bg-primary rounded-full"
+        style={{
+          width: animatedWidth.interpolate({
+            inputRange: [0, 100],
+            outputRange: ['0%', '100%'],
+          }),
+        }}
+      />
+    </View>
+  );
+}

package/src/native/components/ui/separator.tsx

@@ -0,0 +1,43 @@
+/**
+ * Native Separator component
+ * View-based separator matching web Separator API
+ */
+
+import { View, type ViewStyle } from 'react-native';
+import { cn } from '../../utils/cn';
+
+type SeparatorOrientation = 'horizontal' | 'vertical';
+
+export interface SeparatorProps {
+  orientation?: SeparatorOrientation;
+  decorative?: boolean;
+  className?: string;
+  style?: ViewStyle;
+}
+
+export function Separator({
+  orientation = 'horizontal',
+  decorative = true,
+  className,
+  style,
+}: SeparatorProps) {
+  const isHorizontal = orientation === 'horizontal';
+
+  const containerClasses = cn(
+    'bg-border shrink-0',
+    isHorizontal ? 'h-px w-full' : 'h-full w-px',
+    className
+  );
+
+  return (
+    <View
+      data-slot="separator"
+      data-orientation={orientation}
+      className={containerClasses}
+      style={style}
+      accessibilityRole={decorative ? undefined : 'separator'}
+    />
+  );
+}
+
+export type { SeparatorOrientation };

package/src/native/components/ui/skeleton.tsx

@@ -0,0 +1,68 @@
+/**
+ * Native Skeleton component
+ * Animated placeholder for loading states
+ */
+
+import * as React from 'react';
+import { Animated, type ViewStyle } from 'react-native';
+import { cn } from '../../utils/cn';
+
+export interface SkeletonProps {
+  className?: string;
+  style?: ViewStyle;
+  width?: number | string;
+  height?: number;
+  rounded?: boolean;
+}
+
+export function Skeleton({
+  className,
+  style,
+  width,
+  height = 20,
+  rounded = false,
+}: SkeletonProps) {
+  const animatedValue = React.useRef(new Animated.Value(0.4)).current;
+
+  React.useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0.4,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [animatedValue]);
+
+  const containerClasses = cn(
+    'bg-muted',
+    rounded ? 'rounded-full' : 'rounded-md',
+    className
+  );
+
+  return (
+    <Animated.View
+      data-slot="skeleton"
+      className={containerClasses}
+      style={[
+        {
+          width: width ?? '100%',
+          height,
+          opacity: animatedValue,
+        },
+        style,
+      ]}
+    />
+  );
+}

package/src/native/components/ui/switch.tsx

@@ -0,0 +1,40 @@
+/**
+ * Native Switch component
+ * React Native Switch wrapper matching web Switch API
+ */
+
+import {
+  Switch as RNSwitch,
+  type SwitchProps as RNSwitchProps,
+} from 'react-native';
+import { colors } from '../../../shared/tokens';
+
+export interface SwitchProps extends Omit<RNSwitchProps, 'value' | 'onValueChange'> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export function Switch({
+  checked = false,
+  onCheckedChange,
+  disabled = false,
+  ...props
+}: SwitchProps) {
+  return (
+    <RNSwitch
+      data-slot="switch"
+      data-checked={checked}
+      value={checked}
+      onValueChange={onCheckedChange}
+      disabled={disabled}
+      trackColor={{
+        false: colors.muted.hex,
+        true: colors.primary.hex,
+      }}
+      thumbColor={colors.foreground.hex}
+      ios_backgroundColor={colors.muted.hex}
+      {...props}
+    />
+  );
+}

package/src/native/index.ts

@@ -0,0 +1,74 @@
+/**
+ * @dailyautomations/ui/native
+ * React Native components for Daily X platform
+ *
+ * Usage:
+ * import { Button, Card } from '@dailyautomations/ui/native';
+ */
+
+// Utilities
+export { cn, createVariant } from './utils/cn';
+
+// Animations
+export * from './lib/animations';
+
+// Common Components
+export { Button } from './components/common/button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './components/common/button';
+
+export { Input } from './components/common/input';
+export type { InputProps } from './components/common/input';
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from './components/common/card';
+export type {
+  CardProps,
+  CardHeaderProps,
+  CardTitleProps,
+  CardDescriptionProps,
+  CardContentProps,
+  CardFooterProps,
+} from './components/common/card';
+
+export { Badge } from './components/common/badge';
+export type { BadgeProps, BadgeVariant } from './components/common/badge';
+
+export { Label } from './components/common/label';
+export type { LabelProps } from './components/common/label';
+
+export { Textarea } from './components/common/textarea';
+export type { TextareaProps } from './components/common/textarea';
+
+export { Checkbox } from './components/common/checkbox';
+export type { CheckboxProps } from './components/common/checkbox';
+
+// UI Components
+export { Alert, AlertTitle, AlertDescription } from './components/ui/alert';
+export type { AlertProps, AlertTitleProps, AlertDescriptionProps, AlertVariant } from './components/ui/alert';
+
+export { Skeleton } from './components/ui/skeleton';
+export type { SkeletonProps } from './components/ui/skeleton';
+
+export { Switch } from './components/ui/switch';
+export type { SwitchProps } from './components/ui/switch';
+
+export { Separator } from './components/ui/separator';
+export type { SeparatorProps, SeparatorOrientation } from './components/ui/separator';
+
+export { Avatar, AvatarImage, AvatarFallback } from './components/ui/avatar';
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './components/ui/avatar';
+
+export { Progress } from './components/ui/progress';
+export type { ProgressProps } from './components/ui/progress';
+
+export { LoadingSpinner, LoadingOverlay } from './components/ui/loading-spinner';
+export type { LoadingSpinnerProps, LoadingOverlayProps, SpinnerSize } from './components/ui/loading-spinner';
+
+export { EmptyState } from './components/ui/empty-state';
+export type { EmptyStateProps, EmptyStateVariant } from './components/ui/empty-state';