@urbint/cl 1.0.1

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,255 @@
+/**
+ * Accordion Component
+ * Expandable content sections
+ */
+
+import React, { forwardRef, createContext, useContext, useState, useRef } from 'react';
+import { View, ViewProps, Pressable, Text, Animated, LayoutAnimation, Platform, UIManager, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, typography } from '../../styles/tokens';
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+/** Position of the expand/collapse icon */
+export type IconPosition = 'left' | 'right';
+
+interface AccordionContextValue {
+  expandedItems: string[];
+  toggleItem: (value: string) => void;
+  allowMultiple: boolean;
+  iconPosition: IconPosition;
+}
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+export interface AccordionProps extends ViewProps {
+  /** Allow multiple items to be expanded */
+  allowMultiple?: boolean;
+  /** Allow toggling items */
+  allowToggle?: boolean;
+  /** Default expanded items */
+  defaultIndex?: string[];
+  /** Controlled expanded items */
+  index?: string[];
+  /** On change handler */
+  onChange?: (expandedItems: string[]) => void;
+  /** Position of expand/collapse icon for all items */
+  iconPosition?: IconPosition;
+}
+
+export const Accordion = forwardRef<View, AccordionProps>(
+  (
+    {
+      style,
+      allowMultiple = false,
+      allowToggle = true,
+      defaultIndex = [],
+      index: controlledIndex,
+      onChange,
+      iconPosition = 'right',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalIndex, setInternalIndex] = useState<string[]>(defaultIndex);
+    const isControlled = controlledIndex !== undefined;
+    const expandedItems = isControlled ? controlledIndex : internalIndex;
+
+    const toggleItem = (value: string) => {
+      let newExpanded: string[];
+
+      if (expandedItems.includes(value)) {
+        if (!allowToggle && expandedItems.length === 1) return;
+        newExpanded = expandedItems.filter((v) => v !== value);
+      } else {
+        newExpanded = allowMultiple ? [...expandedItems, value] : [value];
+      }
+
+      if (!isControlled) {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setInternalIndex(newExpanded);
+      }
+      onChange?.(newExpanded);
+    };
+
+    return (
+      <AccordionContext.Provider value={{ expandedItems, toggleItem, allowMultiple, iconPosition }}>
+        <View ref={ref} style={[styles.accordion, style]} {...props}>
+          {children}
+        </View>
+      </AccordionContext.Provider>
+    );
+  }
+);
+
+Accordion.displayName = 'Accordion';
+
+export interface AccordionItemProps extends ViewProps {
+  /** Item value for tracking expanded state */
+  value: string;
+  /** Is disabled */
+  isDisabled?: boolean;
+}
+
+export const AccordionItem = forwardRef<View, AccordionItemProps>(
+  ({ style, value, isDisabled = false, children, ...props }, ref) => {
+    const context = useContext(AccordionContext);
+    const isExpanded = context?.expandedItems.includes(value) ?? false;
+
+    return (
+      <View
+        ref={ref}
+        style={[styles.item, isDisabled && styles.itemDisabled, style]}
+        {...props}
+      >
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child as React.ReactElement<any>, {
+              _value: value,
+              _isExpanded: isExpanded,
+              _isDisabled: isDisabled,
+            });
+          }
+          return child;
+        })}
+      </View>
+    );
+  }
+);
+
+AccordionItem.displayName = 'AccordionItem';
+
+export interface AccordionButtonProps extends ViewProps {
+  _value?: string;
+  _isExpanded?: boolean;
+  _isDisabled?: boolean;
+  /** Override icon position for this button */
+  iconPosition?: IconPosition;
+}
+
+export const AccordionButton = forwardRef<View, AccordionButtonProps>(
+  ({ style, _value, _isExpanded, _isDisabled, iconPosition, children, ...props }, ref) => {
+    const context = useContext(AccordionContext);
+    const rotateAnim = useRef(new Animated.Value(_isExpanded ? 1 : 0)).current;
+
+    // Use prop override, fall back to context, then default to 'right'
+    const iconPos = iconPosition ?? context?.iconPosition ?? 'right';
+
+    React.useEffect(() => {
+      Animated.timing(rotateAnim, {
+        toValue: _isExpanded ? 1 : 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start();
+    }, [_isExpanded]);
+
+    const rotation = rotateAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '180deg'],
+    });
+
+    const handlePress = () => {
+      if (_isDisabled || !_value) return;
+      context?.toggleItem(_value);
+    };
+
+    const ChevronIcon = (
+      <Animated.View style={[{ transform: [{ rotate: rotation }] }, iconPos === 'left' && styles.iconLeft]}>
+        <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+          <Path
+            d="M6 9l6 6 6-6"
+            stroke={_isDisabled ? colors.text.disabled : colors.text.secondary}
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </Svg>
+      </Animated.View>
+    );
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={_isDisabled}
+        style={[styles.button, style]}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: _isExpanded, disabled: _isDisabled }}
+        {...props}
+      >
+        {iconPos === 'left' && ChevronIcon}
+        <View style={styles.buttonContent}>
+          {typeof children === 'string' ? (
+            <Text style={[styles.buttonText, _isDisabled && styles.buttonTextDisabled]}>
+              {children}
+            </Text>
+          ) : (
+            children
+          )}
+        </View>
+        {iconPos === 'right' && ChevronIcon}
+      </Pressable>
+    );
+  }
+);
+
+AccordionButton.displayName = 'AccordionButton';
+
+export interface AccordionPanelProps extends ViewProps {
+  _isExpanded?: boolean;
+}
+
+export const AccordionPanel = forwardRef<View, AccordionPanelProps>(
+  ({ style, _isExpanded, children, ...props }, ref) => {
+    if (!_isExpanded) return null;
+
+    return (
+      <View ref={ref} style={[styles.panel, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+AccordionPanel.displayName = 'AccordionPanel';
+
+const styles = StyleSheet.create({
+  accordion: {
+    width: '100%',
+  },
+  item: {
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+  },
+  itemDisabled: {
+    opacity: 0.5,
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: spacing['4x'],
+    paddingHorizontal: spacing['2x'],
+  },
+  buttonContent: {
+    flex: 1,
+  },
+  buttonText: {
+    fontSize: typography.fontSize.body,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.text.default,
+  },
+  buttonTextDisabled: {
+    color: colors.text.disabled,
+  },
+  iconLeft: {
+    marginRight: spacing['2x'],
+  },
+  panel: {
+    paddingHorizontal: spacing['2x'],
+    paddingBottom: spacing['4x'],
+  },
+});

package/src/components/Accordion/index.ts

@@ -0,0 +1,12 @@
+export {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  type AccordionProps,
+  type AccordionItemProps,
+  type AccordionButtonProps,
+  type AccordionPanelProps,
+  type IconPosition,
+} from './Accordion';
+

package/src/components/ActionSheet/ActionSheet.stories.tsx

@@ -0,0 +1,393 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { ActionSheet } from './ActionSheet';
+import { Button } from '../Button';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+const meta: Meta<typeof ActionSheet> = {
+  title: 'Overlay/ActionSheet',
+  component: ActionSheet,
+  argTypes: {
+    showCancel: { control: 'boolean' },
+  },
+  args: {
+    showCancel: true,
+    cancelText: 'Cancel',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ActionSheet>;
+
+const ActionSheetDemo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Button onPress={() => setIsOpen(true)}>Open Action Sheet</Button>
+      <ActionSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Actions"
+        items={[
+          { label: 'Edit', value: 'edit' },
+          { label: 'Duplicate', value: 'duplicate' },
+          { label: 'Share', value: 'share' },
+          { label: 'Delete', value: 'delete', isDestructive: true },
+        ]}
+        onItemPress={(value) => console.log('Selected:', value)}
+      />
+    </VStack>
+  );
+};
+
+export const Default: Story = {
+  render: () => <ActionSheetDemo />,
+};
+
+const WithTitleAndDescription = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">With Title and Description</Text>
+      <Button onPress={() => setIsOpen(true)}>Choose Action</Button>
+      <ActionSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="What would you like to do?"
+        description="Select an action from the list below"
+        items={[
+          { label: 'View Details', value: 'view' },
+          { label: 'Edit Item', value: 'edit' },
+          { label: 'Move to Folder', value: 'move' },
+        ]}
+        onItemPress={(value) => {
+          console.log('Selected:', value);
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const WithDescription: Story = {
+  render: () => <WithTitleAndDescription />,
+};
+
+const DestructiveActions = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">With Destructive Action</Text>
+      <Button variant="danger" onPress={() => setIsOpen(true)}>
+        Delete Item
+      </Button>
+      <ActionSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Delete this item?"
+        description="This action cannot be undone"
+        items={[
+          { label: 'Delete Permanently', value: 'delete', isDestructive: true },
+          { label: 'Move to Trash', value: 'trash' },
+        ]}
+        onItemPress={(value) => {
+          console.log('Selected:', value);
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const Destructive: Story = {
+  render: () => <DestructiveActions />,
+};
+
+const DisabledOptions = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">With Disabled Options</Text>
+      <Button onPress={() => setIsOpen(true)}>Export Options</Button>
+      <ActionSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Export As"
+        items={[
+          { label: 'PDF', value: 'pdf' },
+          { label: 'Word Document', value: 'docx' },
+          { label: 'Excel (Pro only)', value: 'xlsx', isDisabled: true },
+          { label: 'CSV (Pro only)', value: 'csv', isDisabled: true },
+        ]}
+        onItemPress={(value) => {
+          console.log('Selected:', value);
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const Disabled: Story = {
+  render: () => <DisabledOptions />,
+};
+
+const WithIcons = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const EditIcon = (
+    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+        stroke={colors.brand.blue}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+
+  const ShareIcon = (
+    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+        stroke={colors.brand.blue}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+
+  const CopyIcon = (
+    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+        stroke={colors.brand.blue}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+
+  const TrashIcon = (
+    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+        stroke={colors.feedback.error.content}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">With Icons</Text>
+      <Button onPress={() => setIsOpen(true)}>More Options</Button>
+      <ActionSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Options"
+        items={[
+          { label: 'Edit', value: 'edit', icon: EditIcon },
+          { label: 'Share', value: 'share', icon: ShareIcon },
+          { label: 'Copy Link', value: 'copy', icon: CopyIcon },
+          { label: 'Delete', value: 'delete', icon: TrashIcon, isDestructive: true },
+        ]}
+        onItemPress={(value) => {
+          console.log('Selected:', value);
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const Icons: Story = {
+  render: () => <WithIcons />,
+};
+
+const PhotoPicker = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Photo Picker</Text>
+      <Box
+        w={100}
+        h={100}
+        bg={colors.brand.blue + '20'}
+        rounded="full"
+        alignItems="center"
+        justifyContent="center"
+        style={{ alignSelf: 'center' }}
+      >
+        <Text size="lg">📷</Text>
+      </Box>
+      <Button variant="secondary" onPress={() => setIsOpen(true)}>
+        Change Photo
+      </Button>
+      <ActionSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Change Profile Photo"
+        items={[
+          { label: 'Take Photo', value: 'camera' },
+          { label: 'Choose from Library', value: 'library' },
+          { label: 'Choose from Files', value: 'files' },
+          { label: 'Remove Photo', value: 'remove', isDestructive: true },
+        ]}
+        onItemPress={(value) => {
+          console.log('Selected:', value);
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const PhotoPickerExample: Story = {
+  render: () => <PhotoPicker />,
+};
+
+const SortOptions = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [sortBy, setSortBy] = useState('date');
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Sort Options</Text>
+      <HStack justifyContent="space-between" alignItems="center">
+        <Text>Current sort: {sortBy}</Text>
+        <Button size="sm" variant="outline" onPress={() => setIsOpen(true)}>
+          Sort By
+        </Button>
+      </HStack>
+      <ActionSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Sort By"
+        items={[
+          { label: 'Date (Newest First)', value: 'date' },
+          { label: 'Name (A-Z)', value: 'name_asc' },
+          { label: 'Name (Z-A)', value: 'name_desc' },
+          { label: 'Size (Largest)', value: 'size_desc' },
+          { label: 'Size (Smallest)', value: 'size_asc' },
+        ]}
+        onItemPress={(value) => {
+          setSortBy(value);
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const Sort: Story = {
+  render: () => <SortOptions />,
+};
+
+const ShareSheet = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Share Sheet</Text>
+      <Button onPress={() => setIsOpen(true)}>Share</Button>
+      <ActionSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Share via"
+        items={[
+          { label: 'Messages', value: 'messages' },
+          { label: 'Email', value: 'email' },
+          { label: 'Copy Link', value: 'copy' },
+          { label: 'Twitter', value: 'twitter' },
+          { label: 'Facebook', value: 'facebook' },
+          { label: 'WhatsApp', value: 'whatsapp' },
+        ]}
+        onItemPress={(value) => {
+          console.log('Share via:', value);
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const Share: Story = {
+  render: () => <ShareSheet />,
+};
+
+const FileOptions = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState('');
+
+  const files = [
+    { name: 'Report.pdf', size: '2.4 MB' },
+    { name: 'Photo.jpg', size: '1.2 MB' },
+    { name: 'Presentation.pptx', size: '5.8 MB' },
+  ];
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">File Actions</Text>
+      <Box p={spacing.lg} bg={colors.background.secondary} rounded="lg">
+        <VStack space={spacing.sm}>
+          {files.map((file) => (
+            <HStack key={file.name} justifyContent="space-between" alignItems="center">
+              <VStack space={spacing.xs}>
+                <Text>{file.name}</Text>
+                <Text size="sm" color={colors.text.secondary}>{file.size}</Text>
+              </VStack>
+              <Button
+                size="sm"
+                variant="ghost"
+                onPress={() => {
+                  setSelectedFile(file.name);
+                  setIsOpen(true);
+                }}
+              >
+                ⋮
+              </Button>
+            </HStack>
+          ))}
+        </VStack>
+      </Box>
+      <ActionSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title={selectedFile}
+        items={[
+          { label: 'Open', value: 'open' },
+          { label: 'Rename', value: 'rename' },
+          { label: 'Move', value: 'move' },
+          { label: 'Download', value: 'download' },
+          { label: 'Delete', value: 'delete', isDestructive: true },
+        ]}
+        onItemPress={(value) => {
+          console.log(`${value} ${selectedFile}`);
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const FileActions: Story = {
+  render: () => <FileOptions />,
+};
+