@urbint/cl 1.0.1

package/src/components/Pressable/Pressable.stories.tsx

@@ -0,0 +1,338 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Pressable } from './Pressable';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import { colors, spacing, borderRadius, elevation } from '../../styles/tokens';
+
+const meta: Meta<typeof Pressable> = {
+  title: 'Action/Pressable',
+  component: Pressable,
+  argTypes: {
+    pressedOpacity: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
+    pressedScale: { control: { type: 'range', min: 0.8, max: 1, step: 0.02 } },
+  },
+  args: {
+    pressedOpacity: 0.7,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Pressable>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Pressable {...args} onPress={() => console.log('Pressed')}>
+      <Box p={spacing.lg} bg={colors.brand.blue} rounded="md">
+        <Text style={{ color: 'white' }}>Press Me</Text>
+      </Box>
+    </Pressable>
+  ),
+};
+
+export const OpacityFeedback: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Opacity Feedback</Text>
+      <HStack space={spacing.lg}>
+        <VStack space={spacing.xs} alignItems="center">
+          <Pressable pressedOpacity={0.3} onPress={() => console.log('Pressed')}>
+            <Box p={spacing.lg} bg={colors.brand.blue} rounded="md">
+              <Text style={{ color: 'white' }}>0.3</Text>
+            </Box>
+          </Pressable>
+          <Text size="sm" color={colors.text.secondary}>opacity: 0.3</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Pressable pressedOpacity={0.5} onPress={() => console.log('Pressed')}>
+            <Box p={spacing.lg} bg={colors.brand.blue} rounded="md">
+              <Text style={{ color: 'white' }}>0.5</Text>
+            </Box>
+          </Pressable>
+          <Text size="sm" color={colors.text.secondary}>opacity: 0.5</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Pressable pressedOpacity={0.7} onPress={() => console.log('Pressed')}>
+            <Box p={spacing.lg} bg={colors.brand.blue} rounded="md">
+              <Text style={{ color: 'white' }}>0.7</Text>
+            </Box>
+          </Pressable>
+          <Text size="sm" color={colors.text.secondary}>opacity: 0.7</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Pressable pressedOpacity={1} onPress={() => console.log('Pressed')}>
+            <Box p={spacing.lg} bg={colors.brand.blue} rounded="md">
+              <Text style={{ color: 'white' }}>1.0</Text>
+            </Box>
+          </Pressable>
+          <Text size="sm" color={colors.text.secondary}>opacity: 1.0</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const ScaleFeedback: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Scale Feedback</Text>
+      <HStack space={spacing.lg}>
+        <VStack space={spacing.xs} alignItems="center">
+          <Pressable pressedScale={0.9} pressedOpacity={1} onPress={() => console.log('Pressed')}>
+            <Box p={spacing.lg} bg={colors.feedback.success.content} rounded="md">
+              <Text style={{ color: 'white' }}>0.9</Text>
+            </Box>
+          </Pressable>
+          <Text size="sm" color={colors.text.secondary}>scale: 0.9</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Pressable pressedScale={0.95} pressedOpacity={1} onPress={() => console.log('Pressed')}>
+            <Box p={spacing.lg} bg={colors.feedback.success.content} rounded="md">
+              <Text style={{ color: 'white' }}>0.95</Text>
+            </Box>
+          </Pressable>
+          <Text size="sm" color={colors.text.secondary}>scale: 0.95</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Pressable pressedScale={0.98} pressedOpacity={1} onPress={() => console.log('Pressed')}>
+            <Box p={spacing.lg} bg={colors.feedback.success.content} rounded="md">
+              <Text style={{ color: 'white' }}>0.98</Text>
+            </Box>
+          </Pressable>
+          <Text size="sm" color={colors.text.secondary}>scale: 0.98</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const CombinedFeedback: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Combined Opacity + Scale</Text>
+      <Pressable
+        pressedOpacity={0.8}
+        pressedScale={0.95}
+        onPress={() => console.log('Pressed')}
+      >
+        <Box p={20} bg={colors.badge.purple} rounded="lg">
+          <Text style={{ color: 'white' }}>Press for combined effect</Text>
+        </Box>
+      </Pressable>
+    </VStack>
+  ),
+};
+
+export const CustomPressedStyle: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Custom Pressed Style</Text>
+      <Pressable
+        pressedOpacity={1}
+        pressedStyle={{ backgroundColor: colors.brand.blue }}
+        onPress={() => console.log('Pressed')}
+      >
+        <Box p={spacing.lg} bg={colors.brand.blue} rounded="md">
+          <Text style={{ color: 'white' }}>Background changes on press</Text>
+        </Box>
+      </Pressable>
+    </VStack>
+  ),
+};
+
+export const CardPressable: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Pressable Cards</Text>
+      <VStack space={spacing.md}>
+        <Pressable
+          pressedOpacity={0.9}
+          pressedScale={0.98}
+          onPress={() => console.log('Card 1 pressed')}
+        >
+          <Box p={spacing.lg} bg={colors.white} rounded="lg" shadow="10">
+            <VStack space={spacing.sm}>
+              <Text weight="semiBold">Clickable Card</Text>
+              <Text size="sm" color={colors.text.secondary}>
+                Press this card to navigate somewhere
+              </Text>
+            </VStack>
+          </Box>
+        </Pressable>
+        <Pressable
+          pressedOpacity={0.9}
+          pressedScale={0.98}
+          onPress={() => console.log('Card 2 pressed')}
+        >
+          <Box p={spacing.lg} bg={colors.white} rounded="lg" shadow="10">
+            <VStack space={spacing.sm}>
+              <Text weight="semiBold">Another Card</Text>
+              <Text size="sm" color={colors.text.secondary}>
+                This card also responds to press
+              </Text>
+            </VStack>
+          </Box>
+        </Pressable>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const ListItems: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Pressable List Items</Text>
+      <Box bg={colors.white} rounded="lg" shadow="10" overflow="hidden">
+        {['Notifications', 'Privacy', 'Security', 'Help & Support'].map((item, index, arr) => (
+          <Pressable
+            key={item}
+            pressedOpacity={1}
+            pressedStyle={{ backgroundColor: colors.background.secondary }}
+            onPress={() => console.log(`${item} pressed`)}
+          >
+            <Box p={spacing.lg} borderBottomWidth={index < arr.length - 1 ? 1 : 0} borderColor={colors.border.default}>
+              <HStack justifyContent="space-between" alignItems="center">
+                <Text>{item}</Text>
+                <Text color={colors.text.disabled}>›</Text>
+              </HStack>
+            </Box>
+          </Pressable>
+        ))}
+      </Box>
+    </VStack>
+  ),
+};
+
+export const IconButtons: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Icon Button Style</Text>
+      <HStack space={spacing.sm}>
+        <Pressable
+          pressedOpacity={0.6}
+          pressedScale={0.9}
+          onPress={() => console.log('Like')}
+        >
+          <Box p={spacing.md} bg={colors.feedback.error.background} rounded="full">
+            <Text>❤️</Text>
+          </Box>
+        </Pressable>
+        <Pressable
+          pressedOpacity={0.6}
+          pressedScale={0.9}
+          onPress={() => console.log('Comment')}
+        >
+          <Box p={spacing.md} bg={colors.feedback.info.background} rounded="full">
+            <Text>💬</Text>
+          </Box>
+        </Pressable>
+        <Pressable
+          pressedOpacity={0.6}
+          pressedScale={0.9}
+          onPress={() => console.log('Share')}
+        >
+          <Box p={spacing.md} bg={colors.feedback.success.background} rounded="full">
+            <Text>🔗</Text>
+          </Box>
+        </Pressable>
+        <Pressable
+          pressedOpacity={0.6}
+          pressedScale={0.9}
+          onPress={() => console.log('Bookmark')}
+        >
+          <Box p={spacing.md} bg={colors.feedback.warning.background} rounded="full">
+            <Text>🔖</Text>
+          </Box>
+        </Pressable>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const Tags: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Pressable Tags</Text>
+      <HStack space={spacing.sm} wrap>
+        {['React', 'TypeScript', 'JavaScript', 'Node.js', 'GraphQL'].map((tag) => (
+          <Pressable
+            key={tag}
+            pressedOpacity={0.7}
+            pressedScale={0.95}
+            onPress={() => console.log(`${tag} selected`)}
+          >
+            <Box px={spacing.md} py={6} bg={colors.brand.blue + '20'} rounded="full">
+              <Text size="sm" color={colors.brand.blue}>{tag}</Text>
+            </Box>
+          </Pressable>
+        ))}
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const AvatarPressable: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Pressable Avatars</Text>
+      <HStack space={-8}>
+        {['A', 'B', 'C', 'D', '+2'].map((letter, i) => (
+          <Pressable
+            key={i}
+            pressedScale={1.1}
+            pressedOpacity={1}
+            onPress={() => console.log(`Avatar ${letter} pressed`)}
+          >
+            <Box
+              w={40}
+              h={40}
+              rounded="full"
+              bg={letter === '+2' ? colors.border.default : colors.brand.blue + '30'}
+              alignItems="center"
+              justifyContent="center"
+              borderWidth={2}
+              borderColor="white"
+            >
+              <Text weight="semiBold" size="sm">{letter}</Text>
+            </Box>
+          </Pressable>
+        ))}
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const MediaCard: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Media Card</Text>
+      <Pressable
+        pressedOpacity={0.95}
+        pressedScale={0.98}
+        onPress={() => console.log('Play video')}
+      >
+        <Box w={300} bg="#1e293b" rounded="lg" overflow="hidden">
+          <Box h={170} bg="#0f172a" alignItems="center" justifyContent="center">
+            <Box
+              w={50}
+              h={50}
+              rounded="full"
+              bg="rgba(255,255,255,0.9)"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text size="lg">▶</Text>
+            </Box>
+          </Box>
+          <Box p={12}>
+            <Text style={{ color: 'white' }} weight="semiBold">Video Title</Text>
+            <Text size="sm" style={{ color: '#94a3b8' }}>12.5K views • 2 days ago</Text>
+          </Box>
+        </Box>
+      </Pressable>
+    </VStack>
+  ),
+};
+

package/src/components/Pressable/Pressable.tsx

@@ -0,0 +1,71 @@
+/**
+ * Pressable Component
+ * Enhanced pressable with feedback states
+ */
+
+import React, { forwardRef, useState } from 'react';
+import {
+  Pressable as RNPressable,
+  PressableProps as RNPressableProps,
+  View,
+  ViewStyle,
+  StyleSheet,
+} from 'react-native';
+
+export interface PressableProps extends Omit<RNPressableProps, 'style'> {
+  /** Style */
+  style?: ViewStyle;
+  /** Opacity when pressed */
+  pressedOpacity?: number;
+  /** Scale when pressed */
+  pressedScale?: number;
+  /** Custom pressed style */
+  pressedStyle?: ViewStyle;
+}
+
+export const Pressable = forwardRef<View, PressableProps>(
+  (
+    {
+      style,
+      pressedOpacity = 0.7,
+      pressedScale,
+      pressedStyle,
+      onPressIn,
+      onPressOut,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [isPressed, setIsPressed] = useState(false);
+
+    const handlePressIn = (e: any) => {
+      setIsPressed(true);
+      onPressIn?.(e);
+    };
+
+    const handlePressOut = (e: any) => {
+      setIsPressed(false);
+      onPressOut?.(e);
+    };
+
+    return (
+      <RNPressable
+        ref={ref}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        style={[
+          style,
+          isPressed && { opacity: pressedOpacity },
+          isPressed && pressedScale && { transform: [{ scale: pressedScale }] },
+          isPressed && pressedStyle,
+        ]}
+        {...props}
+      >
+        {children}
+      </RNPressable>
+    );
+  }
+);
+
+Pressable.displayName = 'Pressable';

package/src/components/Pressable/index.ts

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

package/src/components/Progress/Progress.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Progress } from './Progress';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+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 Progress> = {
+  title: 'Components/Progress',
+  component: Progress,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  args: {
+    value: 65,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Progress>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Progress Sizes</Text>
+      <Progress value={50} size="sm" />
+      <Progress value={50} size="md" />
+      <Progress value={50} size="lg" />
+    </VStack>
+  ),
+};
+
+export const ColorSchemes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Color Schemes</Text>
+      <Progress value={75} colorScheme="primary" />
+      <Progress value={75} colorScheme="success" />
+      <Progress value={75} colorScheme="warning" />
+      <Progress value={75} colorScheme="danger" />
+    </VStack>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">With Label</Text>
+      <Progress value={45} showLabel />
+      <Progress value={80} showLabel size="lg" labelPosition="inside" />
+    </VStack>
+  ),
+};
+
+export const Indeterminate: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Indeterminate Progress</Text>
+      <Progress isIndeterminate />
+    </VStack>
+  ),
+};
+
+export const Circular: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Circular Progress</Text>
+      <HStack space={spacing.lg}>
+        <Progress variant="circular" value={25} size="sm" showLabel />
+        <Progress variant="circular" value={50} size="md" showLabel />
+        <Progress variant="circular" value={75} size="lg" showLabel />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const UsageExample: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">File Upload Progress</Text>
+      <VStack space={spacing.xs}>
+        <HStack justifyContent="space-between">
+          <Text variant="caption">document.pdf</Text>
+          <Text variant="caption" color={colors.feedback.success.content}>Complete</Text>
+        </HStack>
+        <Progress value={100} colorScheme="success" size="sm" />
+      </VStack>
+      <VStack space={spacing.xs}>
+        <HStack justifyContent="space-between">
+          <Text variant="caption">image.png</Text>
+          <Text variant="caption">65%</Text>
+        </HStack>
+        <Progress value={65} size="sm" />
+      </VStack>
+      <VStack space={spacing.xs}>
+        <HStack justifyContent="space-between">
+          <Text variant="caption">video.mp4</Text>
+          <Text variant="caption">Starting...</Text>
+        </HStack>
+        <Progress isIndeterminate size="sm" />
+      </VStack>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+