@retray-dev/ui-kit 1.7.0 → 1.8.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import React23, { createContext, useMemo, useContext, useRef, useState, useEffect, useCallback } from 'react';
-import { StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Easing, PanResponder } from 'react-native';
+import { Platform, StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Easing, PanResponder, Modal } from 'react-native';
 import * as Haptics11 from 'expo-haptics';
 import { LinearGradient } from 'expo-linear-gradient';
 import ReanimatedAnimated, { useSharedValue, useAnimatedStyle, withTiming, Easing as Easing$1, withSpring } from 'react-native-reanimated';
@@ -73,6 +73,7 @@ function ThemeProvider({ children, theme, colorScheme = "system" }) {
 function useTheme() {
   return useContext(ThemeContext);
 }
+var nativeDriver = Platform.OS !== "web";
 var containerSizeStyles = {
   sm: { paddingHorizontal: 20, paddingVertical: 12 },
   md: { paddingHorizontal: 24, paddingVertical: 16 },
@@ -103,13 +104,13 @@ function Button({
     if (isDisabled) return;
     Animated.spring(scale, {
       toValue: 0.95,
-      useNativeDriver: true,
+      useNativeDriver: nativeDriver,
       speed: 40,
       bounciness: 0
     }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start();
   };
   const handlePress = (e) => {
     Haptics11.impactAsync(Haptics11.ImpactFeedbackStyle.Light);
@@ -119,15 +120,17 @@ function Button({
     primary: { backgroundColor: colors.primary },
     secondary: { backgroundColor: colors.secondary },
     outline: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.border },
-    ghost: { backgroundColor: "transparent" }
+    ghost: { backgroundColor: "transparent" },
+    destructive: { backgroundColor: colors.destructive }
   }[variant];
   const labelVariantStyle = {
     primary: { color: colors.primaryForeground },
     secondary: { color: colors.secondaryForeground },
     outline: { color: colors.foreground },
-    ghost: { color: colors.foreground }
+    ghost: { color: colors.foreground },
+    destructive: { color: colors.destructiveForeground }
   }[variant];
-  const spinnerColor = variant === "primary" || variant === "secondary" ? colors.primaryForeground : colors.foreground;
+  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" || variant === "secondary" ? colors.primaryForeground : colors.foreground;
   return /* @__PURE__ */ React23.createElement(Animated.View, { style: [fullWidth && styles.fullWidth, { transform: [{ scale }] }] }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
@@ -455,12 +458,13 @@ var styles7 = StyleSheet.create({
     fontWeight: "500"
   }
 });
-function Alert({ title, description, variant = "default", icon, style }) {
+function AlertBanner({ title, description, variant = "default", icon, style }) {
   const { colors } = useTheme();
-  const borderColor = variant === "destructive" ? colors.destructive : colors.border;
-  const titleColor = variant === "destructive" ? colors.destructive : colors.foreground;
-  const descColor = variant === "destructive" ? colors.destructive : colors.mutedForeground;
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles8.container, { backgroundColor: colors.card, borderColor }, style] }, icon ? /* @__PURE__ */ React23.createElement(View, { style: styles8.icon }, icon) : /* @__PURE__ */ React23.createElement(View, { style: styles8.icon }, /* @__PURE__ */ React23.createElement(Text, { style: [styles8.defaultIcon, { color: titleColor }] }, variant === "destructive" ? "\u26A0" : "\u2139")), /* @__PURE__ */ React23.createElement(View, { style: styles8.content }, title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.title, { color: titleColor }] }, title) : null, description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.description, { color: descColor }] }, description) : null));
+  const borderColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.border;
+  const titleColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.foreground;
+  const descColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.mutedForeground;
+  const defaultIcon = variant === "destructive" ? "\u26A0" : variant === "success" ? "\u2713" : "\u2139";
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles8.container, { backgroundColor: colors.card, borderColor }, style] }, icon ? /* @__PURE__ */ React23.createElement(View, { style: styles8.icon }, icon) : /* @__PURE__ */ React23.createElement(View, { style: styles8.icon }, /* @__PURE__ */ React23.createElement(Text, { style: [styles8.defaultIcon, { color: titleColor }] }, defaultIcon)), /* @__PURE__ */ React23.createElement(View, { style: styles8.content }, title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.title, { color: titleColor }] }, title) : null, description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.description, { color: descColor }] }, description) : null));
 }
 var styles8 = StyleSheet.create({
   container: {
@@ -531,9 +535,39 @@ var styles9 = StyleSheet.create({
     borderRadius: 999
   }
 });
-function EmptyState({ icon, title, description, action, style }) {
+function EmptyState({ icon, title, description, action, size = "default", style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles10.container, { borderColor: colors.border }, style] }, icon ? /* @__PURE__ */ React23.createElement(View, { style: [styles10.iconWrapper, { backgroundColor: colors.muted }] }, icon) : null, /* @__PURE__ */ React23.createElement(View, { style: styles10.textWrapper }, /* @__PURE__ */ React23.createElement(Text, { style: [styles10.title, { color: colors.foreground }] }, title), description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles10.description, { color: colors.mutedForeground }] }, description) : null), action ? /* @__PURE__ */ React23.createElement(View, { style: styles10.action }, action) : null);
+  const isCompact = size === "compact";
+  return /* @__PURE__ */ React23.createElement(
+    View,
+    {
+      style: [
+        styles10.container,
+        isCompact && styles10.containerCompact,
+        { borderColor: colors.border },
+        style
+      ]
+    },
+    icon ? /* @__PURE__ */ React23.createElement(
+      View,
+      {
+        style: [
+          styles10.iconWrapper,
+          isCompact && styles10.iconWrapperCompact,
+          { backgroundColor: colors.muted }
+        ]
+      },
+      icon
+    ) : null,
+    /* @__PURE__ */ React23.createElement(View, { style: styles10.textWrapper }, /* @__PURE__ */ React23.createElement(
+      Text,
+      {
+        style: [styles10.title, isCompact && styles10.titleCompact, { color: colors.foreground }]
+      },
+      title
+    ), description && !isCompact ? /* @__PURE__ */ React23.createElement(Text, { style: [styles10.description, { color: colors.mutedForeground }] }, description) : null),
+    action && !isCompact ? /* @__PURE__ */ React23.createElement(View, { style: styles10.action }, action) : null
+  );
 }
 var styles10 = StyleSheet.create({
   container: {
@@ -545,6 +579,10 @@ var styles10 = StyleSheet.create({
     padding: 32,
     gap: 16
   },
+  containerCompact: {
+    padding: 20,
+    gap: 10
+  },
   iconWrapper: {
     width: 48,
     height: 48,
@@ -552,6 +590,11 @@ var styles10 = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  iconWrapperCompact: {
+    width: 36,
+    height: 36,
+    borderRadius: 8
+  },
   textWrapper: {
     alignItems: "center",
     gap: 8,
@@ -562,6 +605,9 @@ var styles10 = StyleSheet.create({
     fontWeight: "500",
     textAlign: "center"
   },
+  titleCompact: {
+    fontSize: 15
+  },
   description: {
     fontSize: 14,
     lineHeight: 20,
@@ -713,6 +759,7 @@ var styles12 = StyleSheet.create({
     lineHeight: 22
   }
 });
+var nativeDriver2 = Platform.OS !== "web";
 var TRACK_WIDTH = 60;
 var TRACK_HEIGHT = 36;
 var THUMB_SIZE = 28;
@@ -726,7 +773,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
     Animated.parallel([
       Animated.spring(translateX, {
         toValue: checked ? THUMB_TRAVEL : 0,
-        useNativeDriver: true,
+        useNativeDriver: nativeDriver2,
         bounciness: 4
       }),
       Animated.timing(trackOpacity, {
@@ -1828,10 +1875,10 @@ function formatValue(value, prefix, showDecimals) {
   }
   return `${sign}${prefix}${intPart}`;
 }
-function CurrencyDisplay({ value, prefix = "$", showDecimals = false, style }) {
+function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor, style }) {
   const { colors } = useTheme();
   const formatted = formatValue(value, prefix, showDecimals);
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles22.container, style] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles22.amount, { color: colors.foreground }], allowFontScaling: true }, formatted));
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles22.container, style] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles22.amount, { color: textColor ?? colors.foreground }], allowFontScaling: true }, formatted));
 }
 var styles22 = StyleSheet.create({
   container: {},
@@ -1883,5 +1930,321 @@ function CurrencyInputLarge({
     }
   );
 }
+var nativeDriver3 = Platform.OS !== "web";
+function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style }) {
+  const { colors } = useTheme();
+  const scale = useRef(new Animated.Value(1)).current;
+  const handlePressIn = () => {
+    if (!onPress || disabled) return;
+    Animated.spring(scale, {
+      toValue: 0.97,
+      useNativeDriver: nativeDriver3,
+      speed: 40,
+      bounciness: 0
+    }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver3,
+      speed: 40,
+      bounciness: 4
+    }).start();
+  };
+  const handlePress = () => {
+    Haptics11.selectionAsync();
+    onPress?.();
+  };
+  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
+    {
+      style: [styles23.container, style],
+      onPress: onPress ? handlePress : void 0,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled,
+      activeOpacity: 1,
+      touchSoundDisabled: true
+    },
+    icon ? /* @__PURE__ */ React23.createElement(View, { style: styles23.iconWrapper }, icon) : null,
+    /* @__PURE__ */ React23.createElement(View, { style: styles23.content }, /* @__PURE__ */ React23.createElement(Text, { style: [styles23.title, { color: colors.foreground }], allowFontScaling: true }, title), subtitle ? /* @__PURE__ */ React23.createElement(Text, { style: [styles23.subtitle, { color: colors.mutedForeground }], allowFontScaling: true }, subtitle) : null),
+    trailing !== void 0 ? typeof trailing === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles23.trailing, { color: colors.mutedForeground }], allowFontScaling: true }, trailing) : trailing : null
+  ));
+}
+var styles23 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    gap: 12
+  },
+  iconWrapper: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    flex: 1,
+    gap: 3
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "500",
+    lineHeight: 22
+  },
+  subtitle: {
+    fontSize: 13,
+    lineHeight: 18
+  },
+  trailing: {
+    fontSize: 15
+  },
+  disabled: {
+    opacity: 0.45
+  }
+});
+var nativeDriver4 = Platform.OS !== "web";
+function Chip({ label, selected = false, onPress, style }) {
+  const { colors } = useTheme();
+  const scale = useRef(new Animated.Value(1)).current;
+  const pressAnim = useRef(new Animated.Value(selected ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(pressAnim, {
+      toValue: selected ? 1 : 0,
+      duration: 150,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    }).start();
+  }, [selected, pressAnim]);
+  const handlePressIn = () => {
+    Animated.spring(scale, {
+      toValue: 0.95,
+      useNativeDriver: nativeDriver4,
+      speed: 40,
+      bounciness: 0
+    }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver4,
+      speed: 40,
+      bounciness: 4
+    }).start();
+  };
+  const handlePress = () => {
+    Haptics11.selectionAsync();
+    onPress?.();
+  };
+  const backgroundColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.secondary, colors.primary]
+  });
+  const textColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.foreground, colors.primaryForeground]
+  });
+  const borderColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.border, colors.primary]
+  });
+  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [styles24.wrapper, { transform: [{ scale }] }, style] }, /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
+    {
+      onPress: handlePress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      activeOpacity: 1,
+      touchSoundDisabled: true
+    },
+    /* @__PURE__ */ React23.createElement(Animated.View, { style: [styles24.chip, { backgroundColor, borderColor }] }, /* @__PURE__ */ React23.createElement(Animated.Text, { style: [styles24.label, { color: textColor }], allowFontScaling: true }, label))
+  ));
+}
+function ChipGroup({ options, value, onValueChange, style }) {
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles24.group, style] }, options.map((opt) => /* @__PURE__ */ React23.createElement(
+    Chip,
+    {
+      key: opt.value,
+      label: opt.label,
+      selected: opt.value === value,
+      onPress: () => onValueChange?.(opt.value)
+    }
+  )));
+}
+var styles24 = StyleSheet.create({
+  wrapper: {},
+  chip: {
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 20
+  },
+  group: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  }
+});
+function ConfirmDialog({
+  visible,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmVariant = "primary",
+  onConfirm,
+  onCancel
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React23.createElement(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onCancel }, /* @__PURE__ */ React23.createElement(TouchableOpacity, { style: styles25.overlay, activeOpacity: 1, onPress: onCancel }, /* @__PURE__ */ React23.createElement(
+    View,
+    {
+      style: [styles25.dialog, { backgroundColor: colors.card }],
+      onStartShouldSetResponder: () => true
+    },
+    /* @__PURE__ */ React23.createElement(Text, { style: [styles25.title, { color: colors.cardForeground }], allowFontScaling: true }, title),
+    description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles25.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null,
+    /* @__PURE__ */ React23.createElement(View, { style: styles25.actions }, /* @__PURE__ */ React23.createElement(Button, { label: cancelLabel, variant: "outline", fullWidth: true, onPress: onCancel }), /* @__PURE__ */ React23.createElement(Button, { label: confirmLabel, variant: confirmVariant, fullWidth: true, onPress: onConfirm }))
+  )));
+}
+var styles25 = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 24
+  },
+  dialog: {
+    width: "100%",
+    maxWidth: 400,
+    borderRadius: 16,
+    padding: 24,
+    gap: 12,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 16,
+    elevation: 8
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    lineHeight: 26
+  },
+  description: {
+    fontSize: 15,
+    lineHeight: 22
+  },
+  actions: {
+    gap: 10,
+    marginTop: 8
+  }
+});
+function LabelValue({ label, value, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles26.container, style] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles26.label, { color: colors.mutedForeground }], allowFontScaling: true }, label), typeof value === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles26.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
+}
+var styles26 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 12
+  },
+  label: {
+    fontSize: 13,
+    lineHeight: 18
+  },
+  value: {
+    fontSize: 15,
+    fontWeight: "500",
+    lineHeight: 22,
+    textAlign: "right"
+  }
+});
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function MonthPicker({ value, onChange, style }) {
+  const { colors } = useTheme();
+  const handlePrev = () => {
+    Haptics11.selectionAsync();
+    if (value.month === 1) {
+      onChange({ month: 12, year: value.year - 1 });
+    } else {
+      onChange({ month: value.month - 1, year: value.year });
+    }
+  };
+  const handleNext = () => {
+    Haptics11.selectionAsync();
+    if (value.month === 12) {
+      onChange({ month: 1, year: value.year + 1 });
+    } else {
+      onChange({ month: value.month + 1, year: value.year });
+    }
+  };
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles27.container, style] }, /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
+    {
+      style: styles27.arrow,
+      onPress: handlePrev,
+      activeOpacity: 0.6,
+      touchSoundDisabled: true
+    },
+    /* @__PURE__ */ React23.createElement(Text, { style: [styles27.arrowText, { color: colors.foreground }] }, "\u2039")
+  ), /* @__PURE__ */ React23.createElement(Text, { style: [styles27.label, { color: colors.foreground }], allowFontScaling: true }, MONTH_NAMES[value.month - 1], " ", value.year), /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
+    {
+      style: styles27.arrow,
+      onPress: handleNext,
+      activeOpacity: 0.6,
+      touchSoundDisabled: true
+    },
+    /* @__PURE__ */ React23.createElement(Text, { style: [styles27.arrowText, { color: colors.foreground }] }, "\u203A")
+  ));
+}
+var styles27 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  arrow: {
+    width: 44,
+    height: 44,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  arrowText: {
+    fontSize: 24,
+    lineHeight: 30
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: "500",
+    lineHeight: 24,
+    textAlign: "center",
+    minWidth: 160
+  }
+});
 
-export { Accordion, Alert, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CurrencyDisplay, CurrencyInput, CurrencyInputLarge, EmptyState, Input, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, useTheme, useToast };
+export { Accordion, AlertBanner, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, ChipGroup, ConfirmDialog, CurrencyDisplay, CurrencyInput, CurrencyInputLarge, EmptyState, Input, LabelValue, ListItem, MonthPicker, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Alert/Alert.tsx

@@ -2,22 +2,36 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 
-export type AlertVariant = 'default' | 'destructive'
+export type AlertBannerVariant = 'default' | 'destructive' | 'success'
 
-export interface AlertProps {
+export interface AlertBannerProps {
   title?: string
   description?: string
-  variant?: AlertVariant
+  variant?: AlertBannerVariant
   icon?: React.ReactNode
   style?: ViewStyle
 }
 
-export function Alert({ title, description, variant = 'default', icon, style }: AlertProps) {
+export function AlertBanner({ title, description, variant = 'default', icon, style }: AlertBannerProps) {
   const { colors } = useTheme()
 
-  const borderColor = variant === 'destructive' ? colors.destructive : colors.border
-  const titleColor = variant === 'destructive' ? colors.destructive : colors.foreground
-  const descColor = variant === 'destructive' ? colors.destructive : colors.mutedForeground
+  const borderColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.border
+
+  const titleColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.foreground
+
+  const descColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.mutedForeground
+
+  const defaultIcon =
+    variant === 'destructive' ? '⚠' : variant === 'success' ? '✓' : 'ℹ'
 
   return (
     <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
@@ -25,9 +39,7 @@ export function Alert({ title, description, variant = 'default', icon, style }:
         <View style={styles.icon}>{icon}</View>
       ) : (
         <View style={styles.icon}>
-          <Text style={[styles.defaultIcon, { color: titleColor }]}>
-            {variant === 'destructive' ? '⚠' : 'ℹ'}
-          </Text>
+          <Text style={[styles.defaultIcon, { color: titleColor }]}>{defaultIcon}</Text>
         </View>
       )}
       <View style={styles.content}>

package/src/components/Alert/index.ts

@@ -1,2 +1,2 @@
-export { Alert } from './Alert'
-export type { AlertProps, AlertVariant } from './Alert'
+export { AlertBanner } from './Alert'
+export type { AlertBannerProps, AlertBannerVariant } from './Alert'

package/src/components/Button/Button.tsx

@@ -8,11 +8,14 @@ import {
   TouchableOpacityProps,
   ViewStyle,
   TextStyle,
+  Platform,
 } from 'react-native'
+
+const nativeDriver = Platform.OS !== 'web'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost'
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
 export type ButtonSize = 'sm' | 'md' | 'lg'
 
 export interface ButtonProps extends TouchableOpacityProps {
@@ -67,14 +70,14 @@ export function Button({
     if (isDisabled) return
     Animated.spring(scale, {
       toValue: 0.95,
-      useNativeDriver: true,
+      useNativeDriver: nativeDriver,
       speed: 40,
       bounciness: 0,
     }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
@@ -87,6 +90,7 @@ export function Button({
     secondary: { backgroundColor: colors.secondary },
     outline: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
     ghost: { backgroundColor: 'transparent' },
+    destructive: { backgroundColor: colors.destructive },
   }[variant]
 
   const labelVariantStyle: TextStyle = {
@@ -94,10 +98,13 @@ export function Button({
     secondary: { color: colors.secondaryForeground },
     outline: { color: colors.foreground },
     ghost: { color: colors.foreground },
+    destructive: { color: colors.destructiveForeground },
   }[variant]
 
   const spinnerColor =
-    variant === 'primary' || variant === 'secondary' ? colors.primaryForeground : colors.foreground
+    variant === 'destructive' ? colors.destructiveForeground
+    : variant === 'primary' || variant === 'secondary' ? colors.primaryForeground
+    : colors.foreground
 
   return (
     <Animated.View style={[fullWidth && styles.fullWidth, { transform: [{ scale }] }]}>