@urbint/cl 1.0.1

package/src/components/Button/Button.tsx

@@ -0,0 +1,180 @@
+/**
+ * Button Component
+ * Primary action component with multiple variants
+ */
+
+import React from 'react';
+import {
+  Pressable,
+  PressableProps,
+  View,
+  ActivityIndicator,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { colors, spacing, typography, borderRadius } from '../../styles/tokens';
+
+export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+  /** Button variant */
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+  /** Button size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Full width button */
+  fullWidth?: boolean;
+  /** Loading state */
+  isLoading?: boolean;
+  /** Disabled state */
+  isDisabled?: boolean;
+  /** Left icon */
+  leftIcon?: React.ReactNode;
+  /** Right icon */
+  rightIcon?: React.ReactNode;
+  /** Button label */
+  children: React.ReactNode;
+  /** Custom style */
+  style?: ViewStyle;
+}
+
+// Variant background colors
+const variantColors = {
+  primary: {
+    default: colors.primary.default,
+    pressed: colors.primary.active,
+    disabled: colors.primary.disabled,
+  },
+  secondary: {
+    default: colors.secondary.default,
+    pressed: colors.secondary.active,
+    disabled: colors.secondary.disabled,
+  },
+  ghost: {
+    default: 'transparent',
+    pressed: colors.ghost.active,
+    disabled: 'transparent',
+  },
+  danger: {
+    default: colors.danger.default,
+    pressed: colors.danger.active,
+    disabled: colors.danger.disabled,
+  },
+  outline: {
+    default: 'transparent',
+    pressed: 'rgba(0, 160, 204, 0.1)',
+    disabled: 'transparent',
+  },
+};
+
+// Size configurations
+const sizeConfig = {
+  sm: { height: 32, paddingHorizontal: 12, fontSize: 12 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: 14 },
+  lg: { height: 48, paddingHorizontal: 24, fontSize: 16 },
+};
+
+export const Button = ({
+  variant = 'primary',
+  size = 'md',
+  fullWidth = false,
+  isLoading = false,
+  isDisabled = false,
+  leftIcon,
+  rightIcon,
+  children,
+  style,
+  ...props
+}: ButtonProps) => {
+  const disabled = isDisabled || isLoading;
+  const variantColor = variantColors[variant];
+  const sizeStyles = sizeConfig[size];
+
+  // Text color based on variant
+  const getTextColor = () => {
+    if (variant === 'primary' || variant === 'danger') {
+      return colors.white;
+    }
+    if (variant === 'outline') {
+      return colors.brand.blue;
+    }
+    return colors.text.default;
+  };
+
+  return (
+    <Pressable
+      disabled={disabled}
+      style={({ pressed }) => {
+        const baseStyle: ViewStyle = {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: borderRadius.md,
+          height: sizeStyles.height,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          opacity: disabled ? 0.6 : 1,
+        };
+
+        // Background color based on state
+        if (disabled) {
+          baseStyle.backgroundColor = variantColor.disabled;
+        } else if (pressed) {
+          baseStyle.backgroundColor = variantColor.pressed;
+        } else {
+          baseStyle.backgroundColor = variantColor.default;
+        }
+
+        // Outline variant border
+        if (variant === 'outline') {
+          baseStyle.borderWidth = 1;
+          baseStyle.borderColor = disabled ? colors.border.disabled : colors.brand.blue;
+        }
+
+        // Full width
+        if (fullWidth) {
+          baseStyle.width = '100%';
+        }
+
+        return [baseStyle, style];
+      }}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      {...props}
+    >
+      {isLoading ? (
+        <ActivityIndicator
+          size="small"
+          color={variant === 'primary' || variant === 'danger' ? colors.white : colors.brand.blue}
+        />
+      ) : (
+        <View style={styles.content}>
+          {leftIcon && <View style={styles.leftIcon}>{leftIcon}</View>}
+          <Text
+            style={{
+              color: getTextColor(),
+              fontSize: sizeStyles.fontSize,
+              fontWeight: '600',
+            }}
+          >
+            {children}
+          </Text>
+          {rightIcon && <View style={styles.rightIcon}>{rightIcon}</View>}
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+Button.displayName = 'Button';
+
+const styles = StyleSheet.create({
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  leftIcon: {
+    marginRight: 8,
+  },
+  rightIcon: {
+    marginLeft: 8,
+  },
+});

package/src/components/Button/index.ts

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

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Card, CardHeader, CardBody, CardFooter } from './Card';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Heading } from '../Heading';
+import { Button } from '../Button';
+import { Avatar } from '../Avatar';
+import { Badge } from '../Badge';
+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 Card> = {
+  title: 'Components/Card',
+  component: Card,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['elevated', 'outline', 'filled'],
+    },
+    padding: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg'],
+    },
+  },
+  args: {
+    variant: 'elevated',
+    padding: 'md',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Card {...args}>
+      <Heading as="h4">Card Title</Heading>
+      <Text variant="caption" color={colors.text.secondary} style={{ marginTop: spacing.xs }}>
+        This is a basic card with some content inside.
+      </Text>
+    </Card>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Card Variants</Text>
+      <Card variant="elevated">
+        <Text weight="medium">Elevated Card</Text>
+        <Text variant="caption" color={colors.text.secondary}>With shadow elevation</Text>
+      </Card>
+      <Card variant="outline">
+        <Text weight="medium">Outline Card</Text>
+        <Text variant="caption" color={colors.text.secondary}>With border outline</Text>
+      </Card>
+      <Card variant="filled">
+        <Text weight="medium">Filled Card</Text>
+        <Text variant="caption" color={colors.text.secondary}>With filled background</Text>
+      </Card>
+    </VStack>
+  ),
+};
+
+export const WithSections: Story = {
+  render: () => (
+    <Card variant="elevated" padding="none">
+      <CardHeader>
+        <Heading as="h4">Project Update</Heading>
+      </CardHeader>
+      <CardBody>
+        <Text>
+          The latest deployment has been completed successfully. All services are
+          running normally and metrics are within expected ranges.
+        </Text>
+      </CardBody>
+      <CardFooter>
+        <Button variant="ghost" size="sm">Dismiss</Button>
+        <Button size="sm">View Details</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const UserCard: Story = {
+  render: () => (
+    <Card variant="elevated">
+      <HStack space={spacing.md}>
+        <Avatar name="John Doe" size="lg" />
+        <VStack space={spacing.xs} style={{ flex: 1 }}>
+          <HStack justifyContent="space-between" alignItems="center">
+            <Text weight="semiBold">John Doe</Text>
+            <Badge variant="green" size="sm">Active</Badge>
+          </HStack>
+          <Text variant="caption" color={colors.text.secondary}>Senior Engineer</Text>
+          <Text variant="caption" color={colors.text.secondary}>john.doe@company.com</Text>
+        </VStack>
+      </HStack>
+    </Card>
+  ),
+};
+
+export const PressableCard: Story = {
+  render: () => (
+    <Card variant="elevated" isPressable onPress={() => console.log('Card pressed')}>
+      <VStack space={spacing.sm}>
+        <HStack justifyContent="space-between" alignItems="center">
+          <Text weight="semiBold">Pressable Card</Text>
+          <Text variant="caption" color={colors.brand.blue}>→</Text>
+        </HStack>
+        <Text variant="caption" color={colors.text.secondary}>
+          Tap this card to trigger an action
+        </Text>
+      </VStack>
+    </Card>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.secondary,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Card/Card.tsx

@@ -0,0 +1,169 @@
+/**
+ * Card Component
+ * Container component with elevation and styling
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, Pressable, StyleSheet } from 'react-native';
+import { colors, spacing, borderRadius, elevation } from '../../styles/tokens';
+
+export interface CardProps extends ViewProps {
+  /** Card variant */
+  variant?: 'elevated' | 'outline' | 'filled';
+  /** Padding size */
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  /** Shadow elevation level (only applies to 'elevated' variant or can override any variant) */
+  shadow?: '5' | '10' | '20' | '30' | '40';
+  /** Make card pressable */
+  isPressable?: boolean;
+  /** Press handler */
+  onPress?: () => void;
+}
+
+const elevationMap = {
+  '5': elevation['5'],
+  '10': elevation['10'],
+  '20': elevation['20'],
+  '30': elevation['30'],
+  '40': elevation['40'],
+} as const;
+
+export const Card = forwardRef<View, CardProps>(
+  (
+    {
+      style,
+      variant = 'elevated',
+      padding = 'md',
+      shadow,
+      isPressable = false,
+      onPress,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Determine shadow styles
+    const shadowStyle = shadow 
+      ? elevationMap[shadow] 
+      : variant === 'elevated' 
+        ? elevationMap['20'] 
+        : undefined;
+
+    const cardContent = (
+      <View
+        ref={ref}
+        style={[
+          styles.card,
+          styles[variant],
+          styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}` as keyof typeof styles],
+          shadowStyle,
+          style,
+        ]}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+
+    if (isPressable && onPress) {
+      return (
+        <Pressable onPress={onPress} style={({ pressed }) => [pressed && styles.pressed]}>
+          {cardContent}
+        </Pressable>
+      );
+    }
+
+    return cardContent;
+  }
+);
+
+Card.displayName = 'Card';
+
+export interface CardHeaderProps extends ViewProps {}
+export interface CardBodyProps extends ViewProps {}
+export interface CardFooterProps extends ViewProps {}
+
+export const CardHeader = forwardRef<View, CardHeaderProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.header, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+CardHeader.displayName = 'CardHeader';
+
+export const CardBody = forwardRef<View, CardBodyProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.body, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+CardBody.displayName = 'CardBody';
+
+export const CardFooter = forwardRef<View, CardFooterProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.footer, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+CardFooter.displayName = 'CardFooter';
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: borderRadius.lg,
+    backgroundColor: colors.background.default,
+  },
+  elevated: {
+    // Shadow is applied dynamically via shadowStyle
+  },
+  outline: {
+    borderWidth: 1,
+    borderColor: colors.border.default,
+  },
+  filled: {
+    backgroundColor: colors.background.secondary,
+  },
+  paddingNone: {
+    padding: 0,
+  },
+  paddingSm: {
+    padding: spacing['3x'],
+  },
+  paddingMd: {
+    padding: spacing['4x'],
+  },
+  paddingLg: {
+    padding: spacing['6x'],
+  },
+  pressed: {
+    opacity: 0.9,
+    transform: [{ scale: 0.98 }],
+  },
+  header: {
+    paddingBottom: spacing['3x'],
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+  },
+  body: {
+    paddingVertical: spacing['3x'],
+  },
+  footer: {
+    paddingTop: spacing['3x'],
+    borderTopWidth: 1,
+    borderTopColor: colors.border.disabled,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: spacing['2x'],
+  },
+});

package/src/components/Card/index.ts

@@ -0,0 +1,11 @@
+export {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  type CardProps,
+  type CardHeaderProps,
+  type CardBodyProps,
+  type CardFooterProps,
+} from './Card';
+