@urbint/cl 1.0.1

package/src/components/Image/Image.stories.tsx

@@ -0,0 +1,357 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Image } from './Image';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import { Grid, GridItem } from '../Grid';
+import { colors, spacing, borderRadius, elevation } from '../../styles/tokens';
+
+const meta: Meta<typeof Image> = {
+  title: 'Data Display/Image',
+  component: Image,
+  argTypes: {
+    objectFit: {
+      control: 'select',
+      options: ['cover', 'contain', 'fill', 'none', 'scale-down'],
+    },
+    isCircular: { control: 'boolean' },
+    showLoading: { control: 'boolean' },
+  },
+  args: {
+    src: 'https://picsum.photos/300/200',
+    width: 300,
+    height: 200,
+    objectFit: 'cover',
+    showLoading: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Image>;
+
+export const Default: Story = {
+  render: (args) => <Image {...args} />,
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Different Sizes</Text>
+      <HStack space={spacing.lg} alignItems="flex-start">
+        <VStack space={spacing.xs}>
+          <Image src="https://picsum.photos/100/100" width={100} height={100} />
+          <Text size="sm" color={colors.text.secondary}>100×100</Text>
+        </VStack>
+        <VStack space={spacing.xs}>
+          <Image src="https://picsum.photos/150/100" width={150} height={100} />
+          <Text size="sm" color={colors.text.secondary}>150×100</Text>
+        </VStack>
+        <VStack space={spacing.xs}>
+          <Image src="https://picsum.photos/200/150" width={200} height={150} />
+          <Text size="sm" color={colors.text.secondary}>200×150</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const ObjectFit: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Object Fit Options</Text>
+      <Grid columns={3} gap={spacing.lg}>
+        {(['cover', 'contain', 'fill'] as const).map((fit) => (
+          <GridItem key={fit}>
+            <VStack space={spacing.xs}>
+              <Image
+                src="https://picsum.photos/400/200"
+                width={150}
+                height={100}
+                objectFit={fit}
+                borderRadius={borderRadius.md}
+              />
+              <Text size="sm" color={colors.text.secondary}>{fit}</Text>
+            </VStack>
+          </GridItem>
+        ))}
+      </Grid>
+    </VStack>
+  ),
+};
+
+export const BorderRadius: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Border Radius</Text>
+      <HStack space={16} alignItems="flex-start">
+        <VStack space={4}>
+          <Image
+            src="https://picsum.photos/100/100?1"
+            width={100}
+            height={100}
+            borderRadius={0}
+          />
+          <Text size="sm" color="#64748b">None</Text>
+        </VStack>
+        <VStack space={4}>
+          <Image
+            src="https://picsum.photos/100/100?2"
+            width={100}
+            height={100}
+            borderRadius={8}
+          />
+          <Text size="sm" color="#64748b">Rounded</Text>
+        </VStack>
+        <VStack space={4}>
+          <Image
+            src="https://picsum.photos/100/100?3"
+            width={100}
+            height={100}
+            borderRadius={16}
+          />
+          <Text size="sm" color="#64748b">More Rounded</Text>
+        </VStack>
+        <VStack space={4}>
+          <Image
+            src="https://picsum.photos/100/100?4"
+            width={100}
+            height={100}
+            isCircular
+          />
+          <Text size="sm" color="#64748b">Circular</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const Circular: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Circular Images (Avatars)</Text>
+      <HStack space={12}>
+        <Image
+          src="https://picsum.photos/50/50?5"
+          width={50}
+          height={50}
+          isCircular
+          alt="User 1"
+        />
+        <Image
+          src="https://picsum.photos/60/60?6"
+          width={60}
+          height={60}
+          isCircular
+          alt="User 2"
+        />
+        <Image
+          src="https://picsum.photos/70/70?7"
+          width={70}
+          height={70}
+          isCircular
+          alt="User 3"
+        />
+        <Image
+          src="https://picsum.photos/80/80?8"
+          width={80}
+          height={80}
+          isCircular
+          alt="User 4"
+        />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const Fallback: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Fallback States</Text>
+      <HStack space={16} alignItems="flex-start">
+        <VStack space={4}>
+          <Image
+            src="https://invalid-url-that-will-fail.com/image.jpg"
+            width={150}
+            height={100}
+            borderRadius={8}
+            fallbackText="Image"
+          />
+          <Text size="sm" color="#64748b">Default Fallback</Text>
+        </VStack>
+        <VStack space={4}>
+          <Image
+            src="https://invalid-url-that-will-fail.com/image.jpg"
+            width={150}
+            height={100}
+            borderRadius={8}
+            alt="Product Image"
+          />
+          <Text size="sm" color="#64748b">With Alt Text</Text>
+        </VStack>
+        <VStack space={4}>
+          <Image
+            src="https://invalid-url-that-will-fail.com/image.jpg"
+            width={150}
+            height={100}
+            borderRadius={8}
+            fallback={
+              <Box
+                flex={1}
+                alignItems="center"
+                justifyContent="center"
+                bg="#fee2e2"
+                style={{ width: 150, height: 100, borderRadius: 8 }}
+              >
+                <Text color="#ef4444">Failed</Text>
+              </Box>
+            }
+          />
+          <Text size="sm" color="#64748b">Custom Fallback</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const Gallery: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Image Gallery</Text>
+      <Grid columns={3} gap={8}>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
+          <GridItem key={i}>
+            <Image
+              src={`https://picsum.photos/200/200?random=${i}`}
+              width="100%"
+              height={120}
+              borderRadius={8}
+              objectFit="cover"
+            />
+          </GridItem>
+        ))}
+      </Grid>
+    </VStack>
+  ),
+};
+
+export const ProductCard: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Product Card</Text>
+      <Box w={250} bg={colors.white} rounded="lg" shadow="10" overflow="hidden">
+        <Image
+          src="https://picsum.photos/250/180"
+          width="100%"
+          height={180}
+          objectFit="cover"
+        />
+        <Box p={spacing.lg}>
+          <VStack space={spacing.sm}>
+            <Text weight="semiBold">Product Name</Text>
+            <Text size="sm" color={colors.text.secondary}>
+              Short product description goes here
+            </Text>
+            <HStack justifyContent="space-between" alignItems="center">
+              <Text weight="bold" color={colors.brand.blue}>$99.99</Text>
+              <Box px={spacing.md} py={6} bg={colors.brand.blue} rounded="md">
+                <Text size="sm" style={{ color: 'white' }}>Add to Cart</Text>
+              </Box>
+            </HStack>
+          </VStack>
+        </Box>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const UserProfile: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">User Profile</Text>
+      <Box p={20} bg={colors.white} rounded="lg" shadow="10" alignItems="center">
+        <Image
+          src="https://picsum.photos/120/120?random=profile"
+          width={120}
+          height={120}
+          isCircular
+        />
+        <VStack space={spacing.xs} alignItems="center" style={{ marginTop: spacing.lg }}>
+          <Text weight="semiBold" size="lg">John Doe</Text>
+          <Text color={colors.text.secondary}>Senior Developer</Text>
+          <Text size="sm" color={colors.text.secondary}>San Francisco, CA</Text>
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const HeroImage: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Hero Image with Overlay</Text>
+      <Box w="100%" h={300} rounded="lg" overflow="hidden" position="relative">
+        <Image
+          src="https://picsum.photos/800/300?random=hero"
+          width="100%"
+          height="100%"
+          objectFit="cover"
+        />
+        <Box
+          position="absolute"
+          style={{ top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.4)' }}
+          alignItems="center"
+          justifyContent="center"
+        >
+          <VStack space={8} alignItems="center">
+            <Text weight="bold" size="lg" style={{ color: 'white' }}>
+              Welcome to Our Platform
+            </Text>
+            <Text style={{ color: 'white' }}>
+              Discover amazing content
+            </Text>
+          </VStack>
+        </Box>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const AspectRatios: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Common Aspect Ratios</Text>
+      <HStack space={16} alignItems="flex-start">
+        <VStack space={4}>
+          <Image
+            src="https://picsum.photos/100/100?aspect1"
+            width={100}
+            height={100}
+            borderRadius={8}
+          />
+          <Text size="sm" color="#64748b">1:1</Text>
+        </VStack>
+        <VStack space={4}>
+          <Image
+            src="https://picsum.photos/160/90?aspect2"
+            width={160}
+            height={90}
+            borderRadius={8}
+          />
+          <Text size="sm" color="#64748b">16:9</Text>
+        </VStack>
+        <VStack space={4}>
+          <Image
+            src="https://picsum.photos/120/160?aspect3"
+            width={120}
+            height={160}
+            borderRadius={8}
+          />
+          <Text size="sm" color="#64748b">3:4</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+

package/src/components/Image/Image.tsx

@@ -0,0 +1,168 @@
+/**
+ * Image Component
+ * Enhanced image with loading states and fallback
+ */
+
+import React, { forwardRef, useState } from 'react';
+import {
+  Image as RNImage,
+  ImageProps as RNImageProps,
+  View,
+  ActivityIndicator,
+  Text,
+  StyleSheet,
+} from 'react-native';
+import { colors, typography } from '../../styles/tokens';
+
+export interface ImageProps extends Omit<RNImageProps, 'source'> {
+  /** Image source URL */
+  src?: string;
+  /** Image source (for local images) */
+  source?: RNImageProps['source'];
+  /** Alt text */
+  alt?: string;
+  /** Fallback element */
+  fallback?: React.ReactNode;
+  /** Fallback text */
+  fallbackText?: string;
+  /** Object fit */
+  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+  /** Border radius */
+  borderRadius?: number;
+  /** Is circular */
+  isCircular?: boolean;
+  /** Width */
+  width?: number | string;
+  /** Height */
+  height?: number | string;
+  /** Show loading indicator */
+  showLoading?: boolean;
+}
+
+export const Image = forwardRef<RNImage, ImageProps>(
+  (
+    {
+      style,
+      src,
+      source,
+      alt,
+      fallback,
+      fallbackText,
+      objectFit = 'cover',
+      borderRadius,
+      isCircular = false,
+      width,
+      height,
+      showLoading = true,
+      onLoadStart,
+      onLoadEnd,
+      onError,
+      ...props
+    },
+    ref
+  ) => {
+    const [isLoading, setIsLoading] = useState(true);
+    const [hasError, setHasError] = useState(false);
+
+    const imageSource = src ? { uri: src } : source;
+
+    const handleLoadStart = (e: any) => {
+      setIsLoading(true);
+      onLoadStart?.(e);
+    };
+
+    const handleLoadEnd = (e: any) => {
+      setIsLoading(false);
+      onLoadEnd?.(e);
+    };
+
+    const handleError = (e: any) => {
+      setIsLoading(false);
+      setHasError(true);
+      onError?.(e);
+    };
+
+    const resizeModeMap = {
+      cover: 'cover' as const,
+      contain: 'contain' as const,
+      fill: 'stretch' as const,
+      none: 'center' as const,
+      'scale-down': 'contain' as const,
+    };
+
+    const containerStyle = [
+      styles.container,
+      width !== undefined && { width },
+      height !== undefined && { height },
+      borderRadius !== undefined && { borderRadius },
+      isCircular && { borderRadius: 9999 },
+      style,
+    ];
+
+    if (hasError) {
+      if (fallback) {
+        return <View style={containerStyle}>{fallback}</View>;
+      }
+      return (
+        <View style={[containerStyle, styles.fallback]}>
+          <Text style={styles.fallbackText}>{fallbackText || alt || '🖼'}</Text>
+        </View>
+      );
+    }
+
+    return (
+      <View style={containerStyle}>
+        <RNImage
+          ref={ref}
+          source={imageSource}
+          style={[
+            styles.image,
+            width !== undefined && { width },
+            height !== undefined && { height },
+            borderRadius !== undefined && { borderRadius },
+            isCircular && { borderRadius: 9999 },
+          ]}
+          resizeMode={resizeModeMap[objectFit]}
+          onLoadStart={handleLoadStart}
+          onLoadEnd={handleLoadEnd}
+          onError={handleError}
+          accessibilityLabel={alt}
+          {...props}
+        />
+        {isLoading && showLoading && (
+          <View style={styles.loadingOverlay}>
+            <ActivityIndicator size="small" color={colors.brand.blue} />
+          </View>
+        )}
+      </View>
+    );
+  }
+);
+
+Image.displayName = 'Image';
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    backgroundColor: colors.background.secondary,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.background.secondary,
+  },
+  fallback: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.background.tertiary,
+  },
+  fallbackText: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+  },
+});

package/src/components/Image/index.ts

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

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Input } from './Input';
+import { VStack } from '../VStack';
+import { Text } from '../Text';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+/**
+ * Story container with design system tokens
+ */
+const StoryContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <View style={styles.container}>{children}</View>
+);
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['outline', 'filled', 'flushed'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    isInvalid: {
+      control: 'boolean',
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    placeholder: 'Enter text...',
+    variant: 'outline',
+    size: 'md',
+    isInvalid: false,
+    isDisabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Input Variants</Text>
+      <Input variant="outline" label="Outline" placeholder="Outline input" />
+      <Input variant="filled" label="Filled" placeholder="Filled input" />
+      <Input variant="flushed" label="Flushed" placeholder="Flushed input" />
+    </VStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Input Sizes</Text>
+      <Input size="sm" placeholder="Small input" />
+      <Input size="md" placeholder="Medium input" />
+      <Input size="lg" placeholder="Large input" />
+    </VStack>
+  ),
+};
+
+export const WithLabels: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Input with Labels</Text>
+      <Input
+        label="Email"
+        placeholder="Enter your email"
+        helperText="We'll never share your email"
+      />
+      <Input
+        label="Username"
+        placeholder="Enter username"
+        isRequired
+      />
+    </VStack>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Input States</Text>
+      <Input label="Normal" placeholder="Normal input" />
+      <Input
+        label="Invalid"
+        placeholder="Invalid input"
+        isInvalid
+        errorMessage="This field is required"
+      />
+      <Input
+        label="Disabled"
+        placeholder="Disabled input"
+        isDisabled
+      />
+    </VStack>
+  ),
+};
+
+export const Password: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Password Input</Text>
+      <Input
+        label="Password"
+        placeholder="Enter password"
+        isPassword
+      />
+    </VStack>
+  ),
+};
+
+export const WithElements: Story = {
+  render: () => {
+    const SearchIcon = (
+      <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          stroke={colors.text.disabled}
+          strokeWidth={2}
+          strokeLinecap="round"
+        />
+      </Svg>
+    );
+    return (
+      <VStack space={spacing.lg}>
+        <Text weight="semiBold">Input with Elements</Text>
+        <Input
+          placeholder="Search..."
+          leftElement={SearchIcon}
+        />
+      </VStack>
+    );
+  },
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+