@urbint/cl 1.0.1

package/src/components/ActionSheet/ActionSheet.tsx

@@ -0,0 +1,258 @@
+/**
+ * ActionSheet Component
+ * Bottom sheet with action options
+ */
+
+import React, { forwardRef, useRef, useEffect } from 'react';
+import { View, ViewProps, Modal, Pressable, Text, Animated, Dimensions, ScrollView, StyleSheet } from 'react-native';
+import { colors, spacing, borderRadius, typography, elevation } from '../../styles/tokens';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export interface ActionSheetItem {
+  label: string;
+  value: string;
+  icon?: React.ReactNode;
+  isDestructive?: boolean;
+  isDisabled?: boolean;
+}
+
+export interface ActionSheetProps extends ViewProps {
+  /** Is open */
+  isOpen: boolean;
+  /** On close handler */
+  onClose: () => void;
+  /** Title */
+  title?: string;
+  /** Description */
+  description?: string;
+  /** Action items */
+  items: ActionSheetItem[];
+  /** On item press handler */
+  onItemPress?: (value: string) => void;
+  /** Cancel text */
+  cancelText?: string;
+  /** Show cancel button */
+  showCancel?: boolean;
+}
+
+export const ActionSheet = forwardRef<View, ActionSheetProps>(
+  (
+    {
+      style,
+      isOpen,
+      onClose,
+      title,
+      description,
+      items,
+      onItemPress,
+      cancelText = 'Cancel',
+      showCancel = true,
+      ...props
+    },
+    ref
+  ) => {
+    const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+    const opacity = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      if (isOpen) {
+        Animated.parallel([
+          Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            tension: 65,
+            friction: 11,
+          }),
+          Animated.timing(opacity, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      } else {
+        Animated.parallel([
+          Animated.timing(translateY, {
+            toValue: SCREEN_HEIGHT,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+          Animated.timing(opacity, {
+            toValue: 0,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      }
+    }, [isOpen]);
+
+    const handleItemPress = (item: ActionSheetItem) => {
+      if (item.isDisabled) return;
+      onItemPress?.(item.value);
+      onClose();
+    };
+
+    return (
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="none"
+        onRequestClose={onClose}
+      >
+        <View style={styles.container}>
+          <Animated.View style={[styles.overlay, { opacity }]}>
+            <Pressable style={styles.overlayPressable} onPress={onClose} />
+          </Animated.View>
+          <Animated.View
+            ref={ref}
+            style={[
+              styles.sheet,
+              { transform: [{ translateY }] },
+              style,
+            ]}
+            {...props}
+          >
+            <View style={styles.handle} />
+            {(title || description) && (
+              <View style={styles.header}>
+                {title && <Text style={styles.title}>{title}</Text>}
+                {description && <Text style={styles.description}>{description}</Text>}
+              </View>
+            )}
+            <ScrollView style={styles.itemsContainer}>
+              {items.map((item, index) => (
+                <Pressable
+                  key={item.value}
+                  onPress={() => handleItemPress(item)}
+                  disabled={item.isDisabled}
+                  style={[
+                    styles.item,
+                    index === items.length - 1 && styles.itemLast,
+                    item.isDisabled && styles.itemDisabled,
+                  ]}
+                >
+                  {item.icon && <View style={styles.itemIcon}>{item.icon}</View>}
+                  <Text
+                    style={[
+                      styles.itemLabel,
+                      item.isDestructive && styles.itemDestructive,
+                      item.isDisabled && styles.itemLabelDisabled,
+                    ]}
+                  >
+                    {item.label}
+                  </Text>
+                </Pressable>
+              ))}
+            </ScrollView>
+            {showCancel && (
+              <View style={styles.cancelContainer}>
+                <Pressable onPress={onClose} style={styles.cancelButton}>
+                  <Text style={styles.cancelText}>{cancelText}</Text>
+                </Pressable>
+              </View>
+            )}
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+
+ActionSheet.displayName = 'ActionSheet';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  overlayPressable: {
+    flex: 1,
+  },
+  sheet: {
+    backgroundColor: colors.background.default,
+    borderTopLeftRadius: borderRadius.xl,
+    borderTopRightRadius: borderRadius.xl,
+    maxHeight: SCREEN_HEIGHT * 0.7,
+    ...elevation['40'],
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    backgroundColor: colors.border.default,
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginTop: spacing['2x'],
+    marginBottom: spacing['3x'],
+  },
+  header: {
+    paddingHorizontal: spacing['4x'],
+    paddingBottom: spacing['3x'],
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+  },
+  title: {
+    fontSize: typography.fontSize.h4,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+    textAlign: 'center',
+    marginTop: spacing.base,
+  },
+  itemsContainer: {
+    maxHeight: SCREEN_HEIGHT * 0.4,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: spacing['4x'],
+    paddingHorizontal: spacing['4x'],
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+  },
+  itemLast: {
+    borderBottomWidth: 0,
+  },
+  itemDisabled: {
+    opacity: 0.5,
+  },
+  itemIcon: {
+    marginRight: spacing['3x'],
+  },
+  itemLabel: {
+    fontSize: typography.fontSize.body,
+    color: colors.brand.blue,
+    fontWeight: typography.fontWeight.medium,
+  },
+  itemDestructive: {
+    color: colors.feedback.error.content,
+  },
+  itemLabelDisabled: {
+    color: colors.text.disabled,
+  },
+  cancelContainer: {
+    paddingHorizontal: spacing['3x'],
+    paddingVertical: spacing['3x'],
+    borderTopWidth: 8,
+    borderTopColor: colors.background.secondary,
+  },
+  cancelButton: {
+    alignItems: 'center',
+    paddingVertical: spacing['3x'],
+    backgroundColor: colors.background.secondary,
+    borderRadius: borderRadius.lg,
+  },
+  cancelText: {
+    fontSize: typography.fontSize.body,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+  },
+});

package/src/components/ActionSheet/index.ts

@@ -0,0 +1,2 @@
+export { ActionSheet, type ActionSheetProps, type ActionSheetItem } from './ActionSheet';
+

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Alert } from './Alert';
+import { VStack } from '../VStack';
+import { Text } from '../Text';
+import { colors, spacing, borderRadius, typography } from '../../styles/tokens';
+
+/**
+ * Themed container wrapper for stories
+ * Uses design tokens from the theme
+ */
+const StoryContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <View style={styles.container}>{children}</View>;
+};
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['info', 'success', 'warning', 'error'],
+    },
+    variant: {
+      control: 'select',
+      options: ['subtle', 'solid', 'left-accent', 'top-accent'],
+    },
+    isClosable: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    title: 'Alert Title',
+    description: 'This is an alert message with a description.',
+    status: 'info',
+    variant: 'subtle',
+    isClosable: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {};
+
+export const Statuses: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold" style={styles.sectionHeader}>Alert Statuses</Text>
+      <Alert
+        status="info"
+        title="Information"
+        description="This is an informational alert."
+      />
+      <Alert
+        status="success"
+        title="Success"
+        description="Your action was completed successfully."
+      />
+      <Alert
+        status="warning"
+        title="Warning"
+        description="Please review before proceeding."
+      />
+      <Alert
+        status="error"
+        title="Error"
+        description="Something went wrong. Please try again."
+      />
+    </VStack>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold" style={styles.sectionHeader}>Alert Variants</Text>
+      <Alert
+        status="info"
+        variant="subtle"
+        title="Subtle"
+        description="Subtle variant with light background"
+      />
+      <Alert
+        status="info"
+        variant="solid"
+        title="Solid"
+        description="Solid variant with filled background"
+      />
+      <Alert
+        status="info"
+        variant="left-accent"
+        title="Left Accent"
+        description="Left accent variant with border"
+      />
+      <Alert
+        status="info"
+        variant="top-accent"
+        title="Top Accent"
+        description="Top accent variant with border"
+      />
+    </VStack>
+  ),
+};
+
+export const Closable: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold" style={styles.sectionHeader}>Closable Alerts</Text>
+      <Alert
+        status="success"
+        title="Changes saved"
+        description="Your changes have been saved successfully."
+        isClosable
+        onClose={() => console.log('Alert closed')}
+      />
+      <Alert
+        status="error"
+        title="Upload failed"
+        description="The file could not be uploaded. Please try again."
+        isClosable
+        onClose={() => console.log('Alert closed')}
+      />
+    </VStack>
+  ),
+};
+
+export const TitleOnly: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold" style={styles.sectionHeader}>Title Only Alerts</Text>
+      <Alert status="info" title="New features are available!" />
+      <Alert status="success" title="Payment successful!" />
+      <Alert status="warning" title="Your session will expire soon" />
+      <Alert status="error" title="Connection lost" />
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ * All values reference centralized tokens for consistency
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+  sectionHeader: {
+    color: colors.text.default,
+    fontSize: typography.fontSize.body,
+    marginBottom: spacing.xs,
+  },
+});
+

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,164 @@
+/**
+ * Alert Component
+ * Feedback messages for user actions
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, Text, Pressable, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius, typography } from '../../styles/tokens';
+
+export interface AlertProps extends ViewProps {
+  /** Alert status */
+  status?: 'info' | 'success' | 'warning' | 'error';
+  /** Alert variant */
+  variant?: 'subtle' | 'solid' | 'left-accent' | 'top-accent';
+  /** Alert title */
+  title?: string;
+  /** Alert description */
+  description?: string;
+  /** Is closable */
+  isClosable?: boolean;
+  /** On close handler */
+  onClose?: () => void;
+  /** Custom icon */
+  icon?: React.ReactNode;
+}
+
+const statusIcons = {
+  info: 'M12 16v-4m0-4h.01M22 12a10 10 0 11-20 0 10 10 0 0120 0z',
+  success: 'M9 12l2 2 4-4m6 2a10 10 0 11-20 0 10 10 0 0120 0z',
+  warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+  error: 'M12 8v4m0 4h.01M22 12a10 10 0 11-20 0 10 10 0 0120 0z',
+};
+
+const statusColors = {
+  info: colors.feedback.info,
+  success: colors.feedback.success,
+  warning: colors.feedback.warning,
+  error: colors.feedback.error,
+};
+
+export const Alert = forwardRef<View, AlertProps>(
+  (
+    {
+      style,
+      status = 'info',
+      variant = 'subtle',
+      title,
+      description,
+      isClosable = false,
+      onClose,
+      icon,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const statusColor = statusColors[status];
+    const isSolid = variant === 'solid';
+
+    return (
+      <View
+        ref={ref}
+        style={[
+          styles.alert,
+          styles[variant],
+          {
+            backgroundColor: isSolid ? statusColor.content : statusColor.background,
+            borderColor: statusColor.border,
+          },
+          style,
+        ]}
+        accessibilityRole="alert"
+        {...props}
+      >
+        <View style={styles.iconContainer}>
+          {icon || (
+            <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+              <Path
+                d={statusIcons[status]}
+                stroke={isSolid ? colors.white : statusColor.content}
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </Svg>
+          )}
+        </View>
+        <View style={styles.content}>
+          {title && (
+            <Text style={[styles.title, isSolid && styles.solidText]}>{title}</Text>
+          )}
+          {description && (
+            <Text style={[styles.description, isSolid && styles.solidText]}>{description}</Text>
+          )}
+          {children}
+        </View>
+        {isClosable && (
+          <Pressable onPress={onClose} style={styles.closeButton}>
+            <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+              <Path
+                d="M18 6L6 18M6 6l12 12"
+                stroke={isSolid ? colors.white : colors.text.secondary}
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </Svg>
+          </Pressable>
+        )}
+      </View>
+    );
+  }
+);
+
+Alert.displayName = 'Alert';
+
+const styles = StyleSheet.create({
+  alert: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    padding: spacing['3x'],
+    borderRadius: borderRadius.md,
+  },
+  subtle: {},
+  solid: {},
+  'left-accent': {
+    borderLeftWidth: 4,
+    borderRadius: 0,
+    borderTopRightRadius: borderRadius.md,
+    borderBottomRightRadius: borderRadius.md,
+  },
+  'top-accent': {
+    borderTopWidth: 4,
+    borderRadius: 0,
+    borderBottomLeftRadius: borderRadius.md,
+    borderBottomRightRadius: borderRadius.md,
+  },
+  iconContainer: {
+    marginRight: spacing['3x'],
+    marginTop: 2,
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: typography.fontSize.body,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+    marginBottom: spacing.base,
+  },
+  description: {
+    fontSize: typography.fontSize.body,
+    color: colors.text.secondary,
+    lineHeight: typography.fontSize.body * typography.lineHeight.normal,
+  },
+  solidText: {
+    color: colors.white,
+  },
+  closeButton: {
+    marginLeft: spacing['2x'],
+    padding: spacing.base,
+  },
+});

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert, type AlertProps } from './Alert';
+