@urbint/cl 1.0.1

package/src/components/Fab/Fab.tsx

@@ -0,0 +1,185 @@
+/**
+ * Fab Component
+ * Floating Action Button
+ */
+
+import React, { forwardRef, useState } from 'react';
+import { View, Pressable, PressableProps, Text, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, typography, elevation } from '../../styles/tokens';
+
+export interface FabProps extends Omit<PressableProps, 'style'> {
+  /** Icon element */
+  icon?: React.ReactNode;
+  /** Label (for extended FAB) */
+  label?: string;
+  /** FAB size */
+  size?: 'sm' | 'md' | 'lg';
+  /** FAB placement */
+  placement?: 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left';
+  /** Color scheme */
+  colorScheme?: 'primary' | 'secondary' | 'danger';
+  /** Is extended */
+  isExtended?: boolean;
+  /** Is loading */
+  isLoading?: boolean;
+  /** Is disabled */
+  isDisabled?: boolean;
+}
+
+const sizeConfig = {
+  sm: { size: 40, iconSize: 18 },
+  md: { size: 56, iconSize: 24 },
+  lg: { size: 72, iconSize: 28 },
+} as const;
+
+export const Fab = forwardRef<View, FabProps>(
+  (
+    {
+      icon,
+      label,
+      size = 'md',
+      placement = 'bottom-right',
+      colorScheme = 'primary',
+      isExtended = false,
+      isLoading = false,
+      isDisabled = false,
+      onPressIn,
+      onPressOut,
+      ...props
+    },
+    ref
+  ) => {
+    const [isPressed, setIsPressed] = useState(false);
+    const config = sizeConfig[size];
+
+    const handlePressIn = (e: any) => {
+      setIsPressed(true);
+      onPressIn?.(e);
+    };
+
+    const handlePressOut = (e: any) => {
+      setIsPressed(false);
+      onPressOut?.(e);
+    };
+
+    const getColorSchemeStyles = () => {
+      switch (colorScheme) {
+        case 'secondary':
+          return {
+            backgroundColor: isPressed
+              ? colors.secondary.active
+              : colors.secondary.default,
+            iconColor: colors.text.default,
+          };
+        case 'danger':
+          return {
+            backgroundColor: isPressed
+              ? colors.danger.active
+              : colors.danger.default,
+            iconColor: colors.white,
+          };
+        default:
+          return {
+            backgroundColor: isPressed
+              ? colors.brand.navy
+              : colors.brand.blue,
+            iconColor: colors.white,
+          };
+      }
+    };
+
+    const colorStyles = getColorSchemeStyles();
+
+    const getPlacementStyle = () => {
+      const base = { position: 'absolute' as const };
+      const offset = spacing['4x'];
+
+      switch (placement) {
+        case 'bottom-right':
+          return { ...base, bottom: offset, right: offset };
+        case 'bottom-left':
+          return { ...base, bottom: offset, left: offset };
+        case 'bottom-center':
+          return { ...base, bottom: offset, alignSelf: 'center' as const };
+        case 'top-right':
+          return { ...base, top: offset, right: offset };
+        case 'top-left':
+          return { ...base, top: offset, left: offset };
+        default:
+          return base;
+      }
+    };
+
+    const defaultIcon = (
+      <Svg width={config.iconSize} height={config.iconSize} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M12 5v14M5 12h14"
+          stroke={colorStyles.iconColor}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    );
+
+    return (
+      <Pressable
+        ref={ref}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={isDisabled || isLoading}
+        style={[
+          styles.fab,
+          getPlacementStyle(),
+          {
+            backgroundColor: colorStyles.backgroundColor,
+            width: isExtended ? 'auto' : config.size,
+            height: config.size,
+            borderRadius: config.size / 2,
+            paddingHorizontal: isExtended ? spacing['4x'] : 0,
+          },
+          isDisabled && styles.disabled,
+        ]}
+        accessibilityRole="button"
+        {...props}
+      >
+        {isLoading ? (
+          <Text style={{ color: colorStyles.iconColor }}>...</Text>
+        ) : (
+          <>
+            {icon || defaultIcon}
+            {isExtended && label && (
+              <Text
+                style={[
+                  styles.label,
+                  { color: colorStyles.iconColor, marginLeft: spacing['2x'] },
+                ]}
+              >
+                {label}
+              </Text>
+            )}
+          </>
+        )}
+      </Pressable>
+    );
+  }
+);
+
+Fab.displayName = 'Fab';
+
+const styles = StyleSheet.create({
+  fab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...elevation['20'],
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  label: {
+    fontSize: typography.fontSize.componentLabel,
+    fontWeight: typography.fontWeight.semiBold,
+  },
+});

package/src/components/Fab/index.ts

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

package/src/components/FormControl/FormControl.stories.tsx

@@ -0,0 +1,276 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormControl, FormLabel, FormHelperText, FormErrorMessage } from './FormControl';
+import { Input } from '../Input';
+import { Textarea } from '../Textarea';
+import { Select } from '../Select';
+import { Checkbox } from '../Checkbox';
+import { VStack } from '../VStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import { colors, spacing, borderRadius, elevation } from '../../styles/tokens';
+
+const meta: Meta<typeof FormControl> = {
+  title: 'Forms/FormControl',
+  component: FormControl,
+  argTypes: {
+    isInvalid: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    isRequired: { control: 'boolean' },
+    isReadOnly: { control: 'boolean' },
+  },
+  args: {
+    isInvalid: false,
+    isDisabled: false,
+    isRequired: false,
+    isReadOnly: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormControl>;
+
+export const Default: Story = {
+  render: (args) => (
+    <FormControl {...args}>
+      <FormLabel>Email Address</FormLabel>
+      <Input placeholder="Enter your email" />
+      <FormHelperText>We'll never share your email.</FormHelperText>
+    </FormControl>
+  ),
+};
+
+export const Required: Story = {
+  render: () => (
+    <FormControl isRequired>
+      <FormLabel>Full Name</FormLabel>
+      <Input placeholder="Enter your full name" />
+      <FormHelperText>Required field</FormHelperText>
+    </FormControl>
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <FormControl isInvalid>
+      <FormLabel>Password</FormLabel>
+      <Input placeholder="Enter password" secureTextEntry />
+      <FormErrorMessage>Password must be at least 8 characters</FormErrorMessage>
+    </FormControl>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <FormControl isDisabled>
+      <FormLabel>Username</FormLabel>
+      <Input placeholder="Username" value="john_doe" />
+      <FormHelperText>You cannot change your username</FormHelperText>
+    </FormControl>
+  ),
+};
+
+export const WithTextarea: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">FormControl with Textarea</Text>
+      <FormControl>
+        <FormLabel>Bio</FormLabel>
+        <Textarea placeholder="Tell us about yourself" rows={4} />
+        <FormHelperText>Maximum 500 characters</FormHelperText>
+      </FormControl>
+      <FormControl isRequired isInvalid>
+        <FormLabel>Description</FormLabel>
+        <Textarea placeholder="Describe the issue" rows={3} />
+        <FormErrorMessage>Description is required</FormErrorMessage>
+      </FormControl>
+    </VStack>
+  ),
+};
+
+export const WithSelect: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">FormControl with Select</Text>
+      <FormControl isRequired>
+        <FormLabel>Country</FormLabel>
+        <Select
+          placeholder="Select country"
+          options={[
+            { label: 'United States', value: 'us' },
+            { label: 'Canada', value: 'ca' },
+            { label: 'United Kingdom', value: 'uk' },
+          ]}
+        />
+        <FormHelperText>Select your country of residence</FormHelperText>
+      </FormControl>
+    </VStack>
+  ),
+};
+
+export const WithCheckbox: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">FormControl with Checkbox</Text>
+      <FormControl isRequired>
+        <Checkbox>I agree to the Terms of Service</Checkbox>
+        <FormHelperText>You must agree to continue</FormHelperText>
+      </FormControl>
+      <FormControl isRequired isInvalid>
+        <Checkbox>I accept the Privacy Policy</Checkbox>
+        <FormErrorMessage>You must accept the privacy policy</FormErrorMessage>
+      </FormControl>
+    </VStack>
+  ),
+};
+
+export const CompleteForm: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Registration Form</Text>
+      <Box p={20} bg={colors.white} rounded="lg" shadow="10">
+        <VStack space={0}>
+          <FormControl isRequired>
+            <FormLabel>Full Name</FormLabel>
+            <Input placeholder="John Doe" />
+          </FormControl>
+
+          <FormControl isRequired>
+            <FormLabel>Email Address</FormLabel>
+            <Input placeholder="john@example.com" keyboardType="email-address" />
+            <FormHelperText>We'll send a confirmation email</FormHelperText>
+          </FormControl>
+
+          <FormControl isRequired isInvalid>
+            <FormLabel>Password</FormLabel>
+            <Input placeholder="Create a password" secureTextEntry />
+            <FormErrorMessage>Password must contain at least one number</FormErrorMessage>
+          </FormControl>
+
+          <FormControl>
+            <FormLabel>Phone Number</FormLabel>
+            <Input placeholder="+1 (555) 000-0000" keyboardType="phone-pad" />
+            <FormHelperText>Optional</FormHelperText>
+          </FormControl>
+
+          <FormControl isRequired>
+            <FormLabel>Country</FormLabel>
+            <Select
+              placeholder="Select country"
+              options={[
+                { label: 'United States', value: 'us' },
+                { label: 'Canada', value: 'ca' },
+                { label: 'United Kingdom', value: 'uk' },
+              ]}
+            />
+          </FormControl>
+
+          <FormControl isRequired>
+            <Checkbox>I agree to the Terms of Service and Privacy Policy</Checkbox>
+          </FormControl>
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const ContactForm: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Contact Form</Text>
+      <Box p={20} bg={colors.background.secondary} rounded="lg">
+        <VStack space={0}>
+          <FormControl isRequired>
+            <FormLabel>Your Name</FormLabel>
+            <Input placeholder="Enter your name" />
+          </FormControl>
+
+          <FormControl isRequired>
+            <FormLabel>Email</FormLabel>
+            <Input placeholder="your@email.com" keyboardType="email-address" />
+          </FormControl>
+
+          <FormControl isRequired>
+            <FormLabel>Subject</FormLabel>
+            <Select
+              placeholder="Select a subject"
+              options={[
+                { label: 'General Inquiry', value: 'general' },
+                { label: 'Technical Support', value: 'support' },
+                { label: 'Sales', value: 'sales' },
+                { label: 'Feedback', value: 'feedback' },
+              ]}
+            />
+          </FormControl>
+
+          <FormControl isRequired>
+            <FormLabel>Message</FormLabel>
+            <Textarea 
+              placeholder="How can we help you?" 
+              rows={5}
+            />
+            <FormHelperText>Please be as detailed as possible</FormHelperText>
+          </FormControl>
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Read Only Form</Text>
+      <Box p={20} bg={colors.background.secondary} rounded="lg">
+        <VStack space={0}>
+          <FormControl isReadOnly>
+            <FormLabel>Account ID</FormLabel>
+            <Input value="ACC-123456" />
+          </FormControl>
+
+          <FormControl isReadOnly>
+            <FormLabel>Created Date</FormLabel>
+            <Input value="January 15, 2024" />
+          </FormControl>
+
+          <FormControl isReadOnly>
+            <FormLabel>Status</FormLabel>
+            <Input value="Active" />
+          </FormControl>
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const ValidationStates: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Various Validation States</Text>
+      <FormControl>
+        <FormLabel>Normal State</FormLabel>
+        <Input placeholder="Enter value" />
+        <FormHelperText>This is a normal field</FormHelperText>
+      </FormControl>
+
+      <FormControl isInvalid>
+        <FormLabel>Error State</FormLabel>
+        <Input placeholder="Enter value" />
+        <FormErrorMessage>This field has an error</FormErrorMessage>
+      </FormControl>
+
+      <FormControl isDisabled>
+        <FormLabel>Disabled State</FormLabel>
+        <Input placeholder="Enter value" value="Disabled value" />
+        <FormHelperText>This field is disabled</FormHelperText>
+      </FormControl>
+
+      <FormControl isRequired>
+        <FormLabel>Required State</FormLabel>
+        <Input placeholder="Enter value" />
+        <FormHelperText>This field is required</FormHelperText>
+      </FormControl>
+    </VStack>
+  ),
+};
+

package/src/components/FormControl/FormControl.tsx

@@ -0,0 +1,185 @@
+/**
+ * FormControl Component
+ * Wrapper for form fields with label, helper, and error states
+ */
+
+import React, { forwardRef, createContext, useContext } from 'react';
+import { View, ViewProps, Text, StyleSheet } from 'react-native';
+import { colors, spacing, typography } from '../../styles/tokens';
+
+interface FormControlContextValue {
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+  isRequired?: boolean;
+  isReadOnly?: boolean;
+}
+
+const FormControlContext = createContext<FormControlContextValue>({});
+
+export const useFormControl = () => useContext(FormControlContext);
+
+export interface FormControlProps extends ViewProps {
+  /** Label text */
+  label?: string;
+  /** Helper text shown below the input */
+  helperText?: string;
+  /** Error message shown when invalid */
+  errorMessage?: string;
+  /** Is invalid */
+  isInvalid?: boolean;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Is required */
+  isRequired?: boolean;
+  /** Is read only */
+  isReadOnly?: boolean;
+}
+
+export const FormControl = forwardRef<View, FormControlProps>(
+  (
+    {
+      style,
+      label,
+      helperText,
+      errorMessage,
+      isInvalid = false,
+      isDisabled = false,
+      isRequired = false,
+      isReadOnly = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const hasError = isInvalid || !!errorMessage;
+
+    return (
+      <FormControlContext.Provider
+        value={{ isInvalid: hasError, isDisabled, isRequired, isReadOnly }}
+      >
+        <View ref={ref} style={[styles.formControl, style]} {...props}>
+          {label && (
+            <View style={styles.labelContainer}>
+              <Text style={[styles.label, isDisabled && styles.labelDisabled]}>
+                {label}
+                {isRequired && <Text style={styles.required}> *</Text>}
+              </Text>
+            </View>
+          )}
+          {children}
+          {helperText && !hasError && (
+            <View style={styles.helperContainer}>
+              <Text style={styles.helperText}>{helperText}</Text>
+            </View>
+          )}
+          {hasError && errorMessage && (
+            <View style={styles.errorContainer}>
+              <Text style={styles.errorText}>{errorMessage}</Text>
+            </View>
+          )}
+        </View>
+      </FormControlContext.Provider>
+    );
+  }
+);
+
+FormControl.displayName = 'FormControl';
+
+export interface FormLabelProps extends ViewProps {
+  /** Label text */
+  children: React.ReactNode;
+}
+
+export const FormLabel = forwardRef<View, FormLabelProps>(
+  ({ style, children, ...props }, ref) => {
+    const { isRequired, isDisabled } = useFormControl();
+
+    return (
+      <View ref={ref} style={[styles.labelContainer, style]} {...props}>
+        <Text style={[styles.label, isDisabled && styles.labelDisabled]}>
+          {children}
+          {isRequired && <Text style={styles.required}> *</Text>}
+        </Text>
+      </View>
+    );
+  }
+);
+
+FormLabel.displayName = 'FormLabel';
+
+export interface FormHelperTextProps extends ViewProps {
+  /** Helper text */
+  children: React.ReactNode;
+}
+
+export const FormHelperText = forwardRef<View, FormHelperTextProps>(
+  ({ style, children, ...props }, ref) => {
+    const { isInvalid } = useFormControl();
+
+    if (isInvalid) return null;
+
+    return (
+      <View ref={ref} style={[styles.helperContainer, style]} {...props}>
+        <Text style={styles.helperText}>{children}</Text>
+      </View>
+    );
+  }
+);
+
+FormHelperText.displayName = 'FormHelperText';
+
+export interface FormErrorMessageProps extends ViewProps {
+  /** Error message */
+  children: React.ReactNode;
+}
+
+export const FormErrorMessage = forwardRef<View, FormErrorMessageProps>(
+  ({ style, children, ...props }, ref) => {
+    const { isInvalid } = useFormControl();
+
+    if (!isInvalid) return null;
+
+    return (
+      <View ref={ref} style={[styles.errorContainer, style]} {...props}>
+        <Text style={styles.errorText}>{children}</Text>
+      </View>
+    );
+  }
+);
+
+FormErrorMessage.displayName = 'FormErrorMessage';
+
+const styles = StyleSheet.create({
+  formControl: {
+    width: '100%',
+    marginBottom: spacing['4x'],
+  },
+  labelContainer: {
+    marginBottom: spacing.base,
+  },
+  label: {
+    fontSize: typography.fontSize.componentLabel,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+  },
+  labelDisabled: {
+    color: colors.text.disabled,
+  },
+  required: {
+    color: colors.feedback.error.content,
+  },
+  helperContainer: {
+    marginTop: spacing.base,
+  },
+  helperText: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+  },
+  errorContainer: {
+    marginTop: spacing.base,
+  },
+  errorText: {
+    fontSize: typography.fontSize.caption,
+    color: colors.feedback.error.content,
+  },
+});

package/src/components/FormControl/index.ts

@@ -0,0 +1,12 @@
+export {
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormErrorMessage,
+  useFormControl,
+  type FormControlProps,
+  type FormLabelProps,
+  type FormHelperTextProps,
+  type FormErrorMessageProps,
+} from './FormControl';
+