@urbint/cl 1.0.1

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Avatar, AvatarGroup } from './Avatar';
+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 Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+    },
+    showBadge: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    name: 'John Doe',
+    size: 'md',
+    showBadge: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Avatar Sizes</Text>
+      <HStack space={spacing.sm} alignItems="center">
+        <Avatar name="XS" size="xs" />
+        <Avatar name="SM" size="sm" />
+        <Avatar name="MD" size="md" />
+        <Avatar name="LG" size="lg" />
+        <Avatar name="XL" size="xl" />
+        <Avatar name="2XL" size="2xl" />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const WithInitials: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Avatars with Initials</Text>
+      <HStack space={spacing.sm}>
+        <Avatar name="John Doe" size="lg" />
+        <Avatar name="Jane Smith" size="lg" />
+        <Avatar name="Bob" size="lg" />
+        <Avatar name="Alice Williams" size="lg" />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const WithImage: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Avatars with Images</Text>
+      <HStack space={spacing.sm}>
+        <Avatar
+          src="https://i.pravatar.cc/150?img=1"
+          name="User 1"
+          size="lg"
+        />
+        <Avatar
+          src="https://i.pravatar.cc/150?img=2"
+          name="User 2"
+          size="lg"
+        />
+        <Avatar
+          src="https://i.pravatar.cc/150?img=3"
+          name="User 3"
+          size="lg"
+        />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const WithBadge: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Avatars with Status Badge</Text>
+      <HStack space={spacing.md}>
+        <Avatar name="Online User" size="lg" showBadge badgeColor={colors.feedback.success.content} />
+        <Avatar name="Away User" size="lg" showBadge badgeColor={colors.feedback.warning.content} />
+        <Avatar name="Offline User" size="lg" showBadge badgeColor={colors.feedback.error.content} />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const Group: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Avatar Group</Text>
+      <AvatarGroup max={3} size="md">
+        <Avatar name="John Doe" />
+        <Avatar name="Jane Smith" />
+        <Avatar name="Bob Wilson" />
+        <Avatar name="Alice Brown" />
+        <Avatar name="Charlie Davis" />
+      </AvatarGroup>
+    </VStack>
+  ),
+};
+
+export const Placeholder: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Avatar Placeholder</Text>
+      <HStack space={spacing.sm}>
+        <Avatar size="lg" />
+        <Avatar size="md" />
+        <Avatar size="sm" />
+      </HStack>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,219 @@
+/**
+ * Avatar Component
+ * User profile picture or initials display
+ */
+
+import React, { forwardRef, useState } from 'react';
+import { View, ViewProps, Image, Text, StyleSheet } from 'react-native';
+import { colors, typography } from '../../styles/tokens';
+
+export interface AvatarProps extends ViewProps {
+  /** Image source */
+  src?: string;
+  /** Alt text / name for initials */
+  name?: string;
+  /** Avatar size */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Show status badge */
+  showBadge?: boolean;
+  /** Badge color */
+  badgeColor?: string;
+  /** Badge position */
+  badgePosition?: 'top-right' | 'bottom-right';
+}
+
+const sizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64,
+  '2xl': 96,
+} as const;
+
+const getInitials = (name: string): string => {
+  const parts = name.trim().split(' ');
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase();
+};
+
+export const Avatar = forwardRef<View, AvatarProps>(
+  (
+    {
+      style,
+      src,
+      name,
+      size = 'md',
+      showBadge = false,
+      badgeColor,
+      badgePosition = 'bottom-right',
+      ...props
+    },
+    ref
+  ) => {
+    const [imageError, setImageError] = useState(false);
+
+    const avatarSize = sizeMap[size];
+    const badgeSize = Math.max(avatarSize * 0.25, 8);
+
+    const showImage = src && !imageError;
+    const showInitials = !showImage && name;
+
+    return (
+      <View
+        ref={ref}
+        style={[
+          styles.container,
+          { width: avatarSize, height: avatarSize, borderRadius: avatarSize / 2 },
+          style,
+        ]}
+        {...props}
+      >
+        {showImage ? (
+          <Image
+            source={{ uri: src }}
+            style={[styles.image, { width: avatarSize, height: avatarSize, borderRadius: avatarSize / 2 }]}
+            onError={() => setImageError(true)}
+          />
+        ) : showInitials ? (
+          <View style={[styles.initialsContainer, { width: avatarSize, height: avatarSize, borderRadius: avatarSize / 2 }]}>
+            <Text style={[styles.initials, styles[`${size}Text` as keyof typeof styles]]}>{getInitials(name)}</Text>
+          </View>
+        ) : (
+          <View style={[styles.placeholder, { width: avatarSize, height: avatarSize, borderRadius: avatarSize / 2 }]}>
+            <Text style={[styles.placeholderIcon, styles[`${size}Text` as keyof typeof styles]]}>👤</Text>
+          </View>
+        )}
+        {showBadge && (
+          <View
+            style={[
+              styles.badge,
+              {
+                width: badgeSize,
+                height: badgeSize,
+                borderRadius: badgeSize / 2,
+                backgroundColor: badgeColor || colors.feedback.success.content,
+              },
+              badgePosition === 'top-right' ? styles.badgeTopRight : styles.badgeBottomRight,
+            ]}
+          />
+        )}
+      </View>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';
+
+export const AvatarGroup = forwardRef<View, ViewProps & { max?: number; size?: AvatarProps['size'] }>(
+  ({ children, max = 3, size = 'md', style, ...props }, ref) => {
+    const childArray = React.Children.toArray(children);
+    const visibleCount = Math.min(childArray.length, max);
+    const remainingCount = childArray.length - visibleCount;
+
+    return (
+      <View ref={ref} style={[styles.group, style]} {...props}>
+        {childArray.slice(0, visibleCount).map((child, index) => (
+          <View key={index} style={[styles.groupItem, { marginLeft: index > 0 ? -sizeMap[size] / 4 : 0 }]}>
+            {React.isValidElement(child)
+              ? React.cloneElement(child, { size } as any)
+              : child}
+          </View>
+        ))}
+        {remainingCount > 0 && (
+          <View style={[styles.groupItem, { marginLeft: -sizeMap[size] / 4 }]}>
+            <View
+              style={[
+                styles.remainingBadge,
+                { width: sizeMap[size], height: sizeMap[size], borderRadius: sizeMap[size] / 2 },
+              ]}
+            >
+              <Text style={styles.remainingText}>+{remainingCount}</Text>
+            </View>
+          </View>
+        )}
+      </View>
+    );
+  }
+);
+
+AvatarGroup.displayName = 'AvatarGroup';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  image: {
+    backgroundColor: colors.background.secondary,
+  },
+  initialsContainer: {
+    backgroundColor: colors.brand.blue,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  initials: {
+    color: colors.white,
+    fontWeight: typography.fontWeight.semiBold,
+  },
+  placeholder: {
+    backgroundColor: colors.background.tertiary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  placeholderIcon: {
+    opacity: 0.5,
+  },
+  badge: {
+    position: 'absolute',
+    borderWidth: 2,
+    borderColor: colors.background.default,
+  },
+  badgeTopRight: {
+    top: 0,
+    right: 0,
+  },
+  badgeBottomRight: {
+    bottom: 0,
+    right: 0,
+  },
+  xsText: {
+    fontSize: 8,
+  },
+  smText: {
+    fontSize: 10,
+  },
+  mdText: {
+    fontSize: 12,
+  },
+  lgText: {
+    fontSize: 14,
+  },
+  xlText: {
+    fontSize: 18,
+  },
+  '2xlText': {
+    fontSize: 28,
+  },
+  group: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  groupItem: {
+    borderWidth: 2,
+    borderColor: colors.background.default,
+    borderRadius: 9999,
+  },
+  remainingBadge: {
+    backgroundColor: colors.background.tertiary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  remainingText: {
+    fontSize: typography.fontSize.small,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.secondary,
+  },
+});

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar, AvatarGroup, type AvatarProps } from './Avatar';
+

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Badge } from './Badge';
+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 Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['gray', 'red', 'orange', 'yellow', 'blue', 'green', 'darkGray', 'neonGreen', 'purple'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    dot: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    children: 'Badge',
+    variant: 'gray',
+    size: 'md',
+    dot: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {};
+
+export const AllVariants: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Badge Variants</Text>
+      <HStack space={spacing.sm} wrap>
+        <Badge variant="gray">Gray</Badge>
+        <Badge variant="red">Red</Badge>
+        <Badge variant="orange">Orange</Badge>
+        <Badge variant="yellow">Yellow</Badge>
+        <Badge variant="blue">Blue</Badge>
+        <Badge variant="green">Green</Badge>
+        <Badge variant="darkGray">Dark Gray</Badge>
+        <Badge variant="neonGreen">Neon Green</Badge>
+        <Badge variant="purple">Purple</Badge>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Badge Sizes</Text>
+      <HStack space={spacing.sm} alignItems="center">
+        <Badge size="sm" variant="blue">Small</Badge>
+        <Badge size="md" variant="blue">Medium</Badge>
+        <Badge size="lg" variant="blue">Large</Badge>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const StatusBadges: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Status Badges</Text>
+      <HStack space={spacing.sm}>
+        <Badge variant="green">Active</Badge>
+        <Badge variant="yellow">Pending</Badge>
+        <Badge variant="red">Inactive</Badge>
+        <Badge variant="gray">Draft</Badge>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const RiskLevels: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Risk Levels</Text>
+      <HStack space={spacing.sm}>
+        <Badge variant="red">Very High</Badge>
+        <Badge variant="orange">High</Badge>
+        <Badge variant="yellow">Medium</Badge>
+        <Badge variant="blue">Low</Badge>
+        <Badge variant="green">Minimal</Badge>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const DotBadges: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Dot Badges</Text>
+      <HStack space={spacing.lg} alignItems="center">
+        <HStack space={spacing.sm} alignItems="center">
+          <Badge dot variant="green" size="sm" />
+          <Text variant="caption">Online</Text>
+        </HStack>
+        <HStack space={spacing.sm} alignItems="center">
+          <Badge dot variant="yellow" size="sm" />
+          <Text variant="caption">Away</Text>
+        </HStack>
+        <HStack space={spacing.sm} alignItems="center">
+          <Badge dot variant="red" size="sm" />
+          <Text variant="caption">Offline</Text>
+        </HStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,125 @@
+/**
+ * Badge Component
+ * Status indicator and label component
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, Text, StyleSheet } from 'react-native';
+import { colors, spacing, typography, borderRadius } from '../../styles/tokens';
+
+export interface BadgeProps extends ViewProps {
+  /** Badge variant/color */
+  variant?: 'gray' | 'red' | 'orange' | 'yellow' | 'blue' | 'green' | 'darkGray' | 'neonGreen' | 'purple';
+  /** Badge size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Badge content */
+  children: React.ReactNode;
+  /** Show as dot only */
+  dot?: boolean;
+}
+
+const bgColors: Record<string, string> = {
+  gray: colors.badge.gray,
+  red: colors.badge.red,
+  orange: colors.badge.orange,
+  yellow: colors.badge.yellow,
+  blue: colors.badge.blue,
+  green: colors.badge.green,
+  darkGray: colors.badge.darkGray,
+  neonGreen: colors.badge.neonGreen,
+  purple: colors.badge.purple,
+};
+
+const textColors: Record<string, string> = {
+  gray: colors.text.default,
+  red: colors.white,
+  orange: colors.white,
+  yellow: colors.text.default,
+  blue: colors.white,
+  green: colors.white,
+  darkGray: colors.white,
+  neonGreen: colors.white,
+  purple: colors.white,
+};
+
+export const Badge = forwardRef<View, BadgeProps>(
+  ({ style, variant = 'gray', size = 'md', dot = false, children, ...props }, ref) => {
+    if (dot) {
+      return (
+        <View
+          ref={ref}
+          style={[
+            styles.dot,
+            styles[`dot${size.charAt(0).toUpperCase() + size.slice(1)}` as keyof typeof styles],
+            { backgroundColor: bgColors[variant] },
+            style,
+          ]}
+          {...props}
+        />
+      );
+    }
+
+    return (
+      <View
+        ref={ref}
+        style={[styles.badge, styles[size], { backgroundColor: bgColors[variant] }, style]}
+        {...props}
+      >
+        <Text style={[styles.text, styles[`${size}Text` as keyof typeof styles], { color: textColors[variant] }]}>
+          {children}
+        </Text>
+      </View>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
+
+const styles = StyleSheet.create({
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: borderRadius.full,
+  },
+  sm: {
+    paddingHorizontal: spacing['2x'],
+    paddingVertical: spacing['0.5x'],
+  },
+  md: {
+    paddingHorizontal: spacing['3x'],
+    paddingVertical: spacing.base,
+  },
+  lg: {
+    paddingHorizontal: spacing['4x'],
+    paddingVertical: spacing['2x'],
+  },
+  dot: {
+    borderRadius: borderRadius.full,
+  },
+  dotSm: {
+    width: 6,
+    height: 6,
+  },
+  dotMd: {
+    width: 8,
+    height: 8,
+  },
+  dotLg: {
+    width: 10,
+    height: 10,
+  },
+  text: {
+    fontWeight: typography.fontWeight.semiBold,
+  },
+  smText: {
+    fontSize: 10,
+  },
+  mdText: {
+    fontSize: typography.fontSize.small,
+  },
+  lgText: {
+    fontSize: typography.fontSize.componentLabel,
+  },
+});
+

package/src/components/Badge/index.ts

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