@urbint/cl 1.0.1

package/src/components/Heading/Heading.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading } from './Heading';
+import { VStack } from '../VStack';
+import { Text } from '../Text';
+import { Divider } from '../Divider';
+import { colors, spacing } from '../../styles/tokens';
+
+const meta: Meta<typeof Heading> = {
+  title: 'Components/Heading',
+  component: Heading,
+  argTypes: {
+    as: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4'],
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+    },
+  },
+  args: {
+    children: 'Heading Text',
+    as: 'h2',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Heading>;
+
+export const Default: Story = {};
+
+export const AllLevels: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <VStack space={spacing.xs}>
+        <Heading as="h1">H1 Page Heading</Heading>
+        <Text variant="caption" color={colors.text.secondary}>
+          26px, Regular (400), Line Height 150%
+        </Text>
+      </VStack>
+      <Divider />
+      <VStack space={spacing.xs}>
+        <Heading as="h2">H2 Section Heading</Heading>
+        <Text variant="caption" color={colors.text.secondary}>
+          22px, Semi-Bold (600), Line Height 150%
+        </Text>
+      </VStack>
+      <Divider />
+      <VStack space={spacing.xs}>
+        <Heading as="h3">H3 Section Subheading</Heading>
+        <Text variant="caption" color={colors.text.secondary}>
+          20px, Semi-Bold (600), Line Height 150%
+        </Text>
+      </VStack>
+      <Divider />
+      <VStack space={spacing.xs}>
+        <Heading as="h4">H4 Subheading</Heading>
+        <Text variant="caption" color={colors.text.secondary}>
+          18px, Semi-Bold (600), Line Height 150%
+        </Text>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const Usage: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <VStack space={spacing.sm}>
+        <Heading as="h1">Dashboard Overview</Heading>
+        <Text color={colors.text.secondary}>
+          Welcome to your personalized dashboard. Here you can view all your
+          important metrics and manage your account settings.
+        </Text>
+      </VStack>
+      
+      <VStack space={spacing.sm}>
+        <Heading as="h2">Recent Activity</Heading>
+        <Text color={colors.text.secondary}>
+          Track your recent actions and view updates from your team members.
+        </Text>
+      </VStack>
+      
+      <VStack space={spacing.sm}>
+        <Heading as="h3">Project Status</Heading>
+        <Text color={colors.text.secondary}>
+          All projects are on track with expected completion dates.
+        </Text>
+      </VStack>
+      
+      <VStack space={spacing.sm}>
+        <Heading as="h4">Quick Actions</Heading>
+        <Text color={colors.text.secondary}>
+          Frequently used actions for quick access.
+        </Text>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const Alignment: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Heading as="h3" align="left">Left Aligned</Heading>
+      <Heading as="h3" align="center">Center Aligned</Heading>
+      <Heading as="h3" align="right">Right Aligned</Heading>
+    </VStack>
+  ),
+};
+

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,85 @@
+/**
+ * Heading Component
+ * Typography component for headings (H1-H4)
+ */
+
+import React, { forwardRef } from 'react';
+import { Text as RNText, TextProps as RNTextProps, TextStyle, StyleSheet } from 'react-native';
+import { colors, typography } from '../../styles/tokens';
+
+export interface HeadingProps extends RNTextProps {
+  /** Heading level */
+  as?: 'h1' | 'h2' | 'h3' | 'h4';
+  /** Text color */
+  color?: string;
+  /** Text alignment */
+  align?: TextStyle['textAlign'];
+  /** Truncate with ellipsis */
+  truncate?: boolean;
+  /** Number of lines before truncating */
+  noOfLines?: number;
+}
+
+export const Heading = forwardRef<RNText, HeadingProps>(
+  (
+    {
+      style,
+      as = 'h2',
+      color,
+      align,
+      truncate,
+      noOfLines,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <RNText
+        ref={ref}
+        numberOfLines={truncate ? 1 : noOfLines}
+        ellipsizeMode={truncate || noOfLines ? 'tail' : undefined}
+        accessibilityRole="header"
+        style={[
+          styles.base,
+          styles[as],
+          color && { color },
+          align && { textAlign: align },
+          style,
+        ]}
+        {...props}
+      >
+        {children}
+      </RNText>
+    );
+  }
+);
+
+Heading.displayName = 'Heading';
+
+const styles = StyleSheet.create({
+  base: {
+    color: colors.text.default,
+  },
+  h1: {
+    fontSize: typography.fontSize.h1,
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: typography.fontSize.h1 * typography.lineHeight.normal,
+  },
+  h2: {
+    fontSize: typography.fontSize.h2,
+    fontWeight: typography.fontWeight.semiBold,
+    lineHeight: typography.fontSize.h2 * typography.lineHeight.normal,
+  },
+  h3: {
+    fontSize: typography.fontSize.h3,
+    fontWeight: typography.fontWeight.semiBold,
+    lineHeight: typography.fontSize.h3 * typography.lineHeight.normal,
+  },
+  h4: {
+    fontSize: typography.fontSize.h4,
+    fontWeight: typography.fontWeight.semiBold,
+    lineHeight: typography.fontSize.h4 * typography.lineHeight.normal,
+  },
+});
+

package/src/components/Heading/index.ts

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

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,320 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon, iconPaths } from './Icon';
+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 } from '../../styles/tokens';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Data Display/Icon',
+  component: Icon,
+  argTypes: {
+    name: {
+      control: 'select',
+      options: Object.keys(iconPaths),
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    color: { control: 'color' },
+  },
+  args: {
+    name: 'check',
+    size: 'md',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {
+  render: (args) => <Icon {...args} />,
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Icon Sizes</Text>
+      <HStack space={spacing.lg} alignItems="center">
+        <VStack space={spacing.xs} alignItems="center">
+          <Icon name="check" size="xs" />
+          <Text size="sm" color={colors.text.secondary}>xs (12)</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Icon name="check" size="sm" />
+          <Text size="sm" color={colors.text.secondary}>sm (16)</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Icon name="check" size="md" />
+          <Text size="sm" color={colors.text.secondary}>md (20)</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Icon name="check" size="lg" />
+          <Text size="sm" color={colors.text.secondary}>lg (24)</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Icon name="check" size="xl" />
+          <Text size="sm" color={colors.text.secondary}>xl (32)</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const CustomSize: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Custom Numeric Sizes</Text>
+      <HStack space={spacing.lg} alignItems="center">
+        <Icon name="star" size={16} />
+        <Icon name="star" size={24} />
+        <Icon name="star" size={32} />
+        <Icon name="star" size={48} />
+        <Icon name="star" size={64} />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Icon Colors</Text>
+      <HStack space={spacing.lg}>
+        <Icon name="heart" size="lg" color={colors.feedback.error.content} />
+        <Icon name="star" size="lg" color={colors.feedback.warning.content} />
+        <Icon name="check" size="lg" color={colors.feedback.success.content} />
+        <Icon name="info" size="lg" color={colors.brand.blue} />
+        <Icon name="warning" size="lg" color={colors.badge.purple} />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const AllIcons: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">All Available Icons</Text>
+      <Grid columns={6} gap={spacing.lg}>
+        {(Object.keys(iconPaths) as Array<keyof typeof iconPaths>).map((name) => (
+          <GridItem key={name}>
+            <VStack space={spacing.sm} alignItems="center">
+              <Box
+                p={spacing.md}
+                bg={colors.background.secondary}
+                rounded="lg"
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Icon name={name} size="lg" />
+              </Box>
+              <Text size="sm" color={colors.text.secondary} style={{ textAlign: 'center' }}>
+                {name}
+              </Text>
+            </VStack>
+          </GridItem>
+        ))}
+      </Grid>
+    </VStack>
+  ),
+};
+
+export const NavigationIcons: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Navigation Icons</Text>
+      <HStack space={16}>
+        <VStack space={4} alignItems="center">
+          <Icon name="chevronLeft" size="lg" />
+          <Text size="sm" color="#64748b">chevronLeft</Text>
+        </VStack>
+        <VStack space={4} alignItems="center">
+          <Icon name="chevronRight" size="lg" />
+          <Text size="sm" color="#64748b">chevronRight</Text>
+        </VStack>
+        <VStack space={4} alignItems="center">
+          <Icon name="chevronUp" size="lg" />
+          <Text size="sm" color="#64748b">chevronUp</Text>
+        </VStack>
+        <VStack space={4} alignItems="center">
+          <Icon name="chevronDown" size="lg" />
+          <Text size="sm" color="#64748b">chevronDown</Text>
+        </VStack>
+        <VStack space={4} alignItems="center">
+          <Icon name="arrowLeft" size="lg" />
+          <Text size="sm" color="#64748b">arrowLeft</Text>
+        </VStack>
+        <VStack space={4} alignItems="center">
+          <Icon name="arrowRight" size="lg" />
+          <Text size="sm" color="#64748b">arrowRight</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const ActionIcons: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Action Icons</Text>
+      <HStack space={16}>
+        <VStack space={4} alignItems="center">
+          <Icon name="plus" size="lg" />
+          <Text size="sm" color="#64748b">plus</Text>
+        </VStack>
+        <VStack space={4} alignItems="center">
+          <Icon name="minus" size="lg" />
+          <Text size="sm" color="#64748b">minus</Text>
+        </VStack>
+        <VStack space={4} alignItems="center">
+          <Icon name="edit" size="lg" />
+          <Text size="sm" color="#64748b">edit</Text>
+        </VStack>
+        <VStack space={4} alignItems="center">
+          <Icon name="trash" size="lg" />
+          <Text size="sm" color="#64748b">trash</Text>
+        </VStack>
+        <VStack space={4} alignItems="center">
+          <Icon name="copy" size="lg" />
+          <Text size="sm" color="#64748b">copy</Text>
+        </VStack>
+        <VStack space={4} alignItems="center">
+          <Icon name="share" size="lg" />
+          <Text size="sm" color="#64748b">share</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const StatusIcons: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Status Icons</Text>
+      <HStack space={spacing.lg}>
+        <VStack space={spacing.xs} alignItems="center">
+          <Box p={spacing.sm} bg={colors.feedback.success.background} rounded="full">
+            <Icon name="success" size="lg" color={colors.feedback.success.content} />
+          </Box>
+          <Text size="sm" color={colors.text.secondary}>success</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Box p={spacing.sm} bg={colors.feedback.warning.background} rounded="full">
+            <Icon name="warning" size="lg" color={colors.feedback.warning.content} />
+          </Box>
+          <Text size="sm" color={colors.text.secondary}>warning</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Box p={spacing.sm} bg={colors.feedback.error.background} rounded="full">
+            <Icon name="error" size="lg" color={colors.feedback.error.content} />
+          </Box>
+          <Text size="sm" color={colors.text.secondary}>error</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Box p={spacing.sm} bg={colors.feedback.info.background} rounded="full">
+            <Icon name="info" size="lg" color={colors.brand.blue} />
+          </Box>
+          <Text size="sm" color={colors.text.secondary}>info</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const InButtons: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Icons in UI Elements</Text>
+      <HStack space={12}>
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          p={12}
+          bg="#3b82f6"
+          rounded="lg"
+        >
+          <Icon name="plus" size="sm" color="white" />
+          <Text style={{ color: 'white', marginLeft: 8 }}>Add Item</Text>
+        </Box>
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          p={12}
+          bg="#f1f5f9"
+          rounded="lg"
+        >
+          <Icon name="search" size="sm" />
+          <Text style={{ marginLeft: 8 }}>Search</Text>
+        </Box>
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          p={12}
+          bg="#fee2e2"
+          rounded="lg"
+        >
+          <Icon name="trash" size="sm" color="#ef4444" />
+          <Text style={{ color: '#ef4444', marginLeft: 8 }}>Delete</Text>
+        </Box>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const IconOnlyButtons: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Icon-Only Buttons</Text>
+      <HStack space={8}>
+        <Box p={10} bg="#f1f5f9" rounded="md">
+          <Icon name="home" size="md" />
+        </Box>
+        <Box p={10} bg="#f1f5f9" rounded="md">
+          <Icon name="settings" size="md" />
+        </Box>
+        <Box p={10} bg="#f1f5f9" rounded="md">
+          <Icon name="bell" size="md" />
+        </Box>
+        <Box p={10} bg="#f1f5f9" rounded="md">
+          <Icon name="user" size="md" />
+        </Box>
+        <Box p={10} bg="#f1f5f9" rounded="full">
+          <Icon name="plus" size="md" />
+        </Box>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const ListWithIcons: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">List with Icons</Text>
+      <Box p={16} bg="#ffffff" rounded="lg" shadow="10">
+        <VStack space={12}>
+          <HStack space={12} alignItems="center">
+            <Icon name="mail" color="#64748b" />
+            <Text>Messages</Text>
+          </HStack>
+          <HStack space={12} alignItems="center">
+            <Icon name="calendar" color="#64748b" />
+            <Text>Calendar</Text>
+          </HStack>
+          <HStack space={12} alignItems="center">
+            <Icon name="phone" color="#64748b" />
+            <Text>Contacts</Text>
+          </HStack>
+          <HStack space={12} alignItems="center">
+            <Icon name="location" color="#64748b" />
+            <Text>Locations</Text>
+          </HStack>
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,117 @@
+/**
+ * Icon Component
+ * Wrapper for vector icons with consistent sizing and colors
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, StyleSheet } from 'react-native';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+import { colors } from '../../styles/tokens';
+
+export interface IconProps extends ViewProps {
+  /** Icon name (maps to built-in icons) */
+  name?: keyof typeof iconPaths;
+  /** Icon size */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+  /** Icon color */
+  color?: string;
+  /** Custom SVG content */
+  as?: React.ComponentType<SvgProps>;
+}
+
+const sizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+} as const;
+
+const iconPaths = {
+  check: 'M20 6L9 17l-5-5',
+  close: 'M18 6L6 18M6 6l12 12',
+  chevronDown: 'M6 9l6 6 6-6',
+  chevronUp: 'M18 15l-6-6-6 6',
+  chevronLeft: 'M15 18l-6-6 6-6',
+  chevronRight: 'M9 18l6-6-6-6',
+  plus: 'M12 5v14M5 12h14',
+  minus: 'M5 12h14',
+  search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
+  menu: 'M4 6h16M4 12h16M4 18h16',
+  user: 'M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z',
+  settings: 'M12 15a3 3 0 100-6 3 3 0 000 6z',
+  info: 'M12 16v-4m0-4h.01M22 12a10 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',
+  success: 'M9 12l2 2 4-4m6 2a10 10 0 11-20 0 10 10 0 0120 0z',
+  eye: 'M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z',
+  eyeOff: 'M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21',
+  arrowLeft: 'M19 12H5M12 19l-7-7 7-7',
+  arrowRight: 'M5 12h14M12 5l7 7-7 7',
+  arrowUp: 'M12 19V5M5 12l7-7 7 7',
+  arrowDown: 'M12 5v14M19 12l-7 7-7-7',
+  calendar: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
+  clock: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
+  filter: 'M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z',
+  sort: 'M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12',
+  download: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4',
+  upload: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12',
+  trash: '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',
+  edit: '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',
+  copy: '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',
+  share: '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',
+  heart: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z',
+  star: 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z',
+  bell: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9',
+  mail: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
+  phone: 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z',
+  location: 'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z',
+  home: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
+} as const;
+
+export const Icon = forwardRef<View, IconProps>(
+  ({ style, name, size = 'md', color, as: CustomIcon, ...props }, ref) => {
+    const iconSize = typeof size === 'number' ? size : sizeMap[size];
+    const iconColor = color || colors.text.default;
+
+    if (CustomIcon) {
+      return (
+        <View ref={ref} style={[styles.container, style]} {...props}>
+          <CustomIcon width={iconSize} height={iconSize} color={iconColor} />
+        </View>
+      );
+    }
+
+    if (!name || !iconPaths[name]) {
+      return null;
+    }
+
+    return (
+      <View ref={ref} style={[styles.container, style]} {...props}>
+        <Svg
+          width={iconSize}
+          height={iconSize}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={iconColor}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <Path d={iconPaths[name]} />
+        </Svg>
+      </View>
+    );
+  }
+);
+
+Icon.displayName = 'Icon';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export { iconPaths };

package/src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon, iconPaths, type IconProps } from './Icon';
+