@urbint/cl 1.0.1

package/src/components/Input/Input.tsx

@@ -0,0 +1,274 @@
+/**
+ * Input Component
+ * Text input with variants and states
+ */
+
+import React, { forwardRef, useState } from 'react';
+import {
+  View,
+  TextInput,
+  TextInputProps,
+  Pressable,
+  Text,
+  StyleSheet,
+} from 'react-native';
+import { colors, spacing, typography, borderRadius } from '../../styles/tokens';
+
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+  /** Input variant */
+  variant?: 'outline' | 'filled' | 'flushed';
+  /** Input size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Label text */
+  label?: string;
+  /** Helper text */
+  helperText?: string;
+  /** Error message */
+  errorMessage?: string;
+  /** Is invalid */
+  isInvalid?: boolean;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Is read only */
+  isReadOnly?: boolean;
+  /** Is required */
+  isRequired?: boolean;
+  /** Left element */
+  leftElement?: React.ReactNode;
+  /** Right element */
+  rightElement?: React.ReactNode;
+  /** Password visibility toggle */
+  isPassword?: boolean;
+  /** Custom border color */
+  borderColor?: string;
+  /** Custom focus border color */
+  focusBorderColor?: string;
+  /** Custom error border color */
+  errorBorderColor?: string;
+  /** Custom background color */
+  backgroundColor?: string;
+  /** Custom border radius */
+  borderRadius?: number;
+  /** Custom border width */
+  borderWidth?: number;
+  /** Custom input wrapper style */
+  inputWrapperStyle?: object;
+  /** Custom input text style */
+  inputStyle?: object;
+  /** Show focus border highlight (default: false) */
+  showFocusBorder?: boolean;
+}
+
+export const Input = forwardRef<TextInput, InputProps>(
+  (
+    {
+      variant = 'outline',
+      size = 'md',
+      label,
+      helperText,
+      errorMessage,
+      isInvalid = false,
+      isDisabled = false,
+      isReadOnly = false,
+      isRequired = false,
+      leftElement,
+      rightElement,
+      isPassword = false,
+      secureTextEntry,
+      onFocus,
+      onBlur,
+      borderColor: customBorderColor,
+      focusBorderColor,
+      errorBorderColor,
+      backgroundColor: customBackgroundColor,
+      borderRadius: customBorderRadius,
+      borderWidth: customBorderWidth,
+      inputWrapperStyle,
+      inputStyle,
+      showFocusBorder = false,
+      ...props
+    },
+    ref
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleFocus = (e: any) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: any) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+
+    const hasError = isInvalid || !!errorMessage;
+
+    // Determine border color based on state
+    const getBorderColor = () => {
+      if (hasError) return errorBorderColor || colors.border.danger;
+      if (isFocused && showFocusBorder) return focusBorderColor || colors.border.active;
+      return customBorderColor || colors.border.default;
+    };
+
+    // Build custom style overrides
+    const customStyles = {
+      ...(customBorderColor && { borderColor: getBorderColor() }),
+      ...(customBackgroundColor && { backgroundColor: customBackgroundColor }),
+      ...(customBorderRadius !== undefined && { borderRadius: customBorderRadius }),
+      ...(customBorderWidth !== undefined && { borderWidth: customBorderWidth }),
+    };
+
+    return (
+      <View style={styles.container}>
+        {label && (
+          <Text style={[styles.label, isDisabled && styles.labelDisabled]}>
+            {label}
+            {isRequired && <Text style={styles.required}> *</Text>}
+          </Text>
+        )}
+        <View
+          style={[
+            styles.inputWrapper,
+            styles[variant],
+            styles[size],
+            isFocused && showFocusBorder && !customBorderColor && styles.focused,
+            hasError && !customBorderColor && styles.error,
+            isDisabled && styles.disabled,
+            customStyles,
+            isFocused && showFocusBorder && customBorderColor && { borderColor: focusBorderColor || customBorderColor },
+            hasError && customBorderColor && { borderColor: errorBorderColor || colors.border.danger },
+            inputWrapperStyle,
+          ]}
+        >
+          {leftElement && <View style={styles.leftElement}>{leftElement}</View>}
+          <TextInput
+            ref={ref}
+            style={[
+              styles.input,
+              styles[`${size}Input` as keyof typeof styles],
+              isDisabled && styles.disabledText,
+              inputStyle,
+            ]}
+            editable={!isDisabled && !isReadOnly}
+            placeholderTextColor={colors.text.disabled}
+            secureTextEntry={isPassword ? !showPassword : secureTextEntry}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            {...props}
+          />
+          {isPassword && (
+            <Pressable onPress={() => setShowPassword(!showPassword)} style={styles.rightElement}>
+              <Text style={styles.toggleText}>{showPassword ? '👁' : '👁‍🗨'}</Text>
+            </Pressable>
+          )}
+          {rightElement && !isPassword && (
+            <View style={styles.rightElement}>{rightElement}</View>
+          )}
+        </View>
+        {(helperText || errorMessage) && (
+          <Text style={[styles.helperText, hasError && styles.errorText]}>
+            {errorMessage || helperText}
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  label: {
+    fontSize: typography.fontSize.componentLabel,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+    marginBottom: spacing.base,
+  },
+  labelDisabled: {
+    color: colors.text.disabled,
+  },
+  required: {
+    color: colors.feedback.error.content,
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: borderRadius.md,
+  },
+  outline: {
+    borderWidth: 1,
+    borderColor: colors.border.default,
+    backgroundColor: colors.background.default,
+  },
+  filled: {
+    backgroundColor: colors.background.secondary,
+  },
+  flushed: {
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.default,
+    borderRadius: 0,
+  },
+  sm: {
+    height: 32,
+    paddingHorizontal: spacing['2x'],
+  },
+  md: {
+    height: 40,
+    paddingHorizontal: spacing['3x'],
+  },
+  lg: {
+    height: 48,
+    paddingHorizontal: spacing['4x'],
+  },
+  focused: {
+    borderColor: colors.border.active,
+  },
+  error: {
+    borderColor: colors.border.danger,
+  },
+  disabled: {
+    backgroundColor: colors.background.secondary,
+    borderColor: colors.border.disabled,
+  },
+  input: {
+    flex: 1,
+    color: colors.text.default,
+    // Remove browser focus outline on web
+    outlineStyle: 'none',
+  } as any,
+  smInput: {
+    fontSize: typography.fontSize.small,
+  },
+  mdInput: {
+    fontSize: typography.fontSize.body,
+  },
+  lgInput: {
+    fontSize: typography.fontSize.body,
+  },
+  disabledText: {
+    color: colors.text.disabled,
+  },
+  leftElement: {
+    marginRight: spacing['2x'],
+  },
+  rightElement: {
+    marginLeft: spacing['2x'],
+  },
+  toggleText: {
+    fontSize: 16,
+  },
+  helperText: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+    marginTop: spacing.base,
+  },
+  errorText: {
+    color: colors.feedback.error.content,
+  },
+});
+

package/src/components/Input/index.ts

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

package/src/components/Link/Link.stories.tsx

@@ -0,0 +1,187 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Link } from './Link';
+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 Link> = {
+  title: 'Typography/Link',
+  component: Link,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    underline: {
+      control: 'select',
+      options: ['always', 'hover', 'none'],
+    },
+    color: { control: 'color' },
+    isExternal: { control: 'boolean' },
+  },
+  args: {
+    children: 'Click me',
+    size: 'md',
+    underline: 'always',
+    isExternal: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Link>;
+
+export const Default: Story = {
+  render: (args) => <Link {...args} />,
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Link Sizes</Text>
+      <VStack space={spacing.md}>
+        <HStack space={spacing.sm} alignItems="center">
+          <Box w={60}><Text size="sm" color={colors.text.secondary}>Small:</Text></Box>
+          <Link size="sm">Small link</Link>
+        </HStack>
+        <HStack space={spacing.sm} alignItems="center">
+          <Box w={60}><Text size="sm" color={colors.text.secondary}>Medium:</Text></Box>
+          <Link size="md">Medium link</Link>
+        </HStack>
+        <HStack space={spacing.sm} alignItems="center">
+          <Box w={60}><Text size="sm" color={colors.text.secondary}>Large:</Text></Box>
+          <Link size="lg">Large link</Link>
+        </HStack>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const UnderlineStyles: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Underline Styles</Text>
+      <VStack space={spacing.md}>
+        <HStack space={spacing.sm} alignItems="center">
+          <Box w={80}><Text size="sm" color={colors.text.secondary}>Always:</Text></Box>
+          <Link underline="always">Always underlined</Link>
+        </HStack>
+        <HStack space={spacing.sm} alignItems="center">
+          <Box w={80}><Text size="sm" color={colors.text.secondary}>On Hover:</Text></Box>
+          <Link underline="hover">Underline on hover</Link>
+        </HStack>
+        <HStack space={spacing.sm} alignItems="center">
+          <Box w={80}><Text size="sm" color={colors.text.secondary}>None:</Text></Box>
+          <Link underline="none">No underline</Link>
+        </HStack>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Custom Colors</Text>
+      <VStack space={spacing.md}>
+        <Link color={colors.brand.blue}>Blue link</Link>
+        <Link color={colors.feedback.success.content}>Green link</Link>
+        <Link color={colors.feedback.error.content}>Red link</Link>
+        <Link color={colors.badge.purple}>Purple link</Link>
+        <Link color={colors.feedback.warning.content}>Orange link</Link>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const External: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">External Links</Text>
+      <VStack space={spacing.md}>
+        <Link href="https://example.com">Internal link</Link>
+        <Link href="https://example.com" isExternal>
+          External link (opens in new tab)
+        </Link>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const InlineWithText: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Inline Links</Text>
+      <Box p={spacing.lg} bg={colors.background.secondary} rounded="md">
+        <Text>
+          Please read our{' '}
+          <Link onPress={() => console.log('Terms clicked')}>Terms of Service</Link>
+          {' '}and{' '}
+          <Link onPress={() => console.log('Privacy clicked')}>Privacy Policy</Link>
+          {' '}before continuing.
+        </Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.background.secondary} rounded="md">
+        <Text size="sm" color={colors.text.secondary}>
+          For more information, visit our{' '}
+          <Link size="sm" href="https://help.example.com" isExternal>
+            Help Center
+          </Link>
+          {' '}or{' '}
+          <Link size="sm" onPress={() => console.log('Contact clicked')}>
+            contact support
+          </Link>.
+        </Text>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const WithCustomPress: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Custom Press Handler</Text>
+      <Link onPress={() => alert('Link clicked!')}>
+        Click to trigger alert
+      </Link>
+    </VStack>
+  ),
+};
+
+export const Navigation: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Navigation Links</Text>
+      <Box p={spacing.lg} bg={colors.white} rounded="lg" shadow="10">
+        <HStack space={spacing.xl}>
+          <Link underline="none" onPress={() => console.log('Home')}>Home</Link>
+          <Link underline="none" onPress={() => console.log('About')}>About</Link>
+          <Link underline="none" onPress={() => console.log('Services')}>Services</Link>
+          <Link underline="none" onPress={() => console.log('Contact')}>Contact</Link>
+        </HStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const Footer: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Footer Links</Text>
+      <Box p={spacing.lg} bg={colors.background.tertiary} rounded="lg">
+        <VStack space={spacing.sm}>
+          <Link color={colors.text.disabled} size="sm" underline="hover">About Us</Link>
+          <Link color={colors.text.disabled} size="sm" underline="hover">Careers</Link>
+          <Link color={colors.text.disabled} size="sm" underline="hover">Press</Link>
+          <Link color={colors.text.disabled} size="sm" underline="hover">Blog</Link>
+          <Link color={colors.text.disabled} size="sm" underline="hover" isExternal>
+            Twitter
+          </Link>
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+

package/src/components/Link/Link.tsx

@@ -0,0 +1,104 @@
+/**
+ * Link Component
+ * Styled text that acts as a link
+ */
+
+import React, { forwardRef, useState } from 'react';
+import { Text as RNText, TextProps as RNTextProps, Pressable, Linking, StyleSheet } from 'react-native';
+import { colors, typography } from '../../styles/tokens';
+
+export interface LinkProps extends Omit<RNTextProps, 'onPress'> {
+  /** URL to open */
+  href?: string;
+  /** Open in external browser */
+  isExternal?: boolean;
+  /** Custom press handler */
+  onPress?: () => void;
+  /** Link color */
+  color?: string;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Underline style */
+  underline?: 'always' | 'hover' | 'none';
+}
+
+export const Link = forwardRef<RNText, LinkProps>(
+  (
+    {
+      style,
+      href,
+      isExternal = false,
+      onPress,
+      color,
+      size = 'md',
+      underline = 'always',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [isPressed, setIsPressed] = useState(false);
+
+    const handlePress = async () => {
+      if (onPress) {
+        onPress();
+      } else if (href) {
+        const canOpen = await Linking.canOpenURL(href);
+        if (canOpen) {
+          await Linking.openURL(href);
+        }
+      }
+    };
+
+    const linkColor = color || colors.brand.blue;
+    const showUnderline = underline === 'always' || (underline === 'hover' && isPressed);
+
+    return (
+      <Pressable
+        onPress={handlePress}
+        onPressIn={() => setIsPressed(true)}
+        onPressOut={() => setIsPressed(false)}
+        accessibilityRole="link"
+      >
+        <RNText
+          ref={ref}
+          style={[
+            styles.base,
+            styles[size],
+            { color: linkColor },
+            showUnderline && styles.underline,
+            isPressed && styles.pressed,
+            style,
+          ]}
+          {...props}
+        >
+          {children}
+          {isExternal && ' ↗'}
+        </RNText>
+      </Pressable>
+    );
+  }
+);
+
+Link.displayName = 'Link';
+
+const styles = StyleSheet.create({
+  base: {
+    fontWeight: typography.fontWeight.medium,
+  },
+  sm: {
+    fontSize: typography.fontSize.small,
+  },
+  md: {
+    fontSize: typography.fontSize.body,
+  },
+  lg: {
+    fontSize: typography.fontSize.h4,
+  },
+  underline: {
+    textDecorationLine: 'underline',
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+});

package/src/components/Link/index.ts

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