@urbint/cl 1.0.1

package/src/components/Center/Center.stories.tsx

@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Center } from './Center';
+import { VStack } from '../VStack';
+import { Box } from '../Box';
+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 Center> = {
+  title: 'Layout/Center',
+  component: Center,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Center>;
+
+export const Default: Story = {
+  render: () => (
+    <Center style={styles.infoBox}>
+      <Text>Centered Content</Text>
+    </Center>
+  ),
+};
+
+export const WithBox: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Center with Various Content</Text>
+      <Center style={[styles.infoBox, { height: 150 }]}>
+        <Box p={spacing.lg} bg={colors.brand.blue} rounded="lg">
+          <Text color={colors.white}>Centered Box</Text>
+        </Box>
+      </Center>
+    </VStack>
+  ),
+};
+
+export const SquareContent: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Centered Square Elements</Text>
+      <Center style={styles.warningBox}>
+        <Box
+          w={80}
+          h={80}
+          bg={colors.feedback.warning.content}
+          rounded="lg"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Text color={colors.white} style={styles.largeText}>A</Text>
+        </Box>
+      </Center>
+    </VStack>
+  ),
+};
+
+export const CircularContent: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Centered Circular Element</Text>
+      <Center style={styles.successBox}>
+        <Box
+          w={100}
+          h={100}
+          bg={colors.feedback.success.content}
+          rounded="full"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Text color={colors.white} style={styles.xlText}>✓</Text>
+        </Box>
+      </Center>
+    </VStack>
+  ),
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Centered Stack of Elements</Text>
+      <Center style={styles.errorBox}>
+        <VStack space={spacing.md} alignItems="center">
+          <Box
+            w={60}
+            h={60}
+            bg={colors.danger.default}
+            rounded="full"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text color={colors.white} style={styles.largeText}>👤</Text>
+          </Box>
+          <Text weight="semiBold">Welcome Back!</Text>
+          <Text variant="small" color={colors.text.secondary}>
+            Please sign in to continue
+          </Text>
+        </VStack>
+      </Center>
+    </VStack>
+  ),
+};
+
+export const NestedCenters: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Nested Centers</Text>
+      <Center style={styles.nestedOuter}>
+        <Center style={styles.nestedMiddle}>
+          <Center style={styles.nestedInner}>
+            <Text color={colors.white}>Deep</Text>
+          </Center>
+        </Center>
+      </Center>
+    </VStack>
+  ),
+};
+
+export const LoadingState: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Loading State Example</Text>
+      <Center style={styles.loadingBox}>
+        <VStack space={spacing.sm} alignItems="center">
+          <Box
+            w={40}
+            h={40}
+            bg={colors.brand.blue}
+            rounded="full"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text color={colors.white}>⏳</Text>
+          </Box>
+          <Text color={colors.text.secondary}>Loading...</Text>
+        </VStack>
+      </Center>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+  infoBox: {
+    height: 200,
+    backgroundColor: colors.feedback.info.background,
+    borderRadius: borderRadius.lg,
+  },
+  warningBox: {
+    height: 200,
+    backgroundColor: colors.feedback.warning.background,
+    borderRadius: borderRadius.lg,
+  },
+  successBox: {
+    height: 200,
+    backgroundColor: colors.feedback.success.background,
+    borderRadius: borderRadius.lg,
+  },
+  errorBox: {
+    height: 250,
+    backgroundColor: colors.feedback.error.background,
+    borderRadius: borderRadius.lg,
+  },
+  loadingBox: {
+    height: 200,
+    backgroundColor: colors.background.tertiary,
+    borderRadius: borderRadius.lg,
+  },
+  nestedOuter: {
+    height: 300,
+    backgroundColor: colors.feedback.info.background,
+    borderRadius: borderRadius.lg,
+  },
+  nestedMiddle: {
+    width: 200,
+    height: 200,
+    backgroundColor: colors.feedback.info.border,
+    borderRadius: borderRadius.lg,
+  },
+  nestedInner: {
+    width: 100,
+    height: 100,
+    backgroundColor: colors.brand.blue,
+    borderRadius: borderRadius.lg,
+  },
+  largeText: {
+    fontSize: 24,
+  },
+  xlText: {
+    fontSize: 32,
+  },
+});
+

package/src/components/Center/Center.tsx

@@ -0,0 +1,29 @@
+/**
+ * Center Component
+ * Centers its children both horizontally and vertically
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, StyleSheet } from 'react-native';
+
+export interface CenterProps extends ViewProps {}
+
+export const Center = forwardRef<View, CenterProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.center, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+Center.displayName = 'Center';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+

package/src/components/Center/index.ts

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

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Checkbox, CheckboxGroup } from './Checkbox';
+import { VStack } from '../VStack';
+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 Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  args: {
+    label: 'Accept terms and conditions',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Checkbox label="Small checkbox" size="sm" />
+      <Checkbox label="Medium checkbox" size="md" />
+      <Checkbox label="Large checkbox" size="lg" />
+    </VStack>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Checkbox label="Unchecked" />
+      <Checkbox label="Checked" defaultChecked />
+      <Checkbox label="Disabled" isDisabled />
+      <Checkbox label="Disabled Checked" isDisabled defaultChecked />
+      <Checkbox label="Invalid" isInvalid />
+      <Checkbox label="Indeterminate" isIndeterminate />
+    </VStack>
+  ),
+};
+
+export const ColorSchemes: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Checkbox label="Primary" colorScheme="primary" defaultChecked />
+      <Checkbox label="Success" colorScheme="success" defaultChecked />
+      <Checkbox label="Danger" colorScheme="danger" defaultChecked />
+    </VStack>
+  ),
+};
+
+export const Group: Story = {
+  render: () => (
+    <CheckboxGroup
+      label="Select your interests"
+      defaultValue={['design']}
+      direction="column"
+    >
+      <Checkbox value="design" label="Design" />
+      <Checkbox value="development" label="Development" />
+      <Checkbox value="marketing" label="Marketing" />
+      <Checkbox value="sales" label="Sales" />
+    </CheckboxGroup>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,242 @@
+/**
+ * Checkbox Component
+ * Selectable checkbox with label
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, Pressable, Text, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius, typography } from '../../styles/tokens';
+
+export interface CheckboxProps extends Omit<ViewProps, 'children'> {
+  /** Checkbox label */
+  label?: string;
+  /** Is checked */
+  isChecked?: boolean;
+  /** Default checked state (uncontrolled) */
+  defaultChecked?: boolean;
+  /** On change handler */
+  onChange?: (isChecked: boolean) => void;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Is invalid */
+  isInvalid?: boolean;
+  /** Checkbox size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Checkbox color */
+  colorScheme?: 'primary' | 'success' | 'danger';
+  /** Is indeterminate */
+  isIndeterminate?: boolean;
+}
+
+const sizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+} as const;
+
+const colorMap = {
+  primary: colors.brand.blue,
+  success: colors.feedback.success.content,
+  danger: colors.feedback.error.content,
+};
+
+export const Checkbox = forwardRef<View, CheckboxProps>(
+  (
+    {
+      style,
+      label,
+      isChecked: controlledChecked,
+      defaultChecked = false,
+      onChange,
+      isDisabled = false,
+      isInvalid = false,
+      size = 'md',
+      colorScheme = 'primary',
+      isIndeterminate = false,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+    const isControlled = controlledChecked !== undefined;
+    const isChecked = isControlled ? controlledChecked : internalChecked;
+
+    const boxSize = sizeMap[size];
+    const checkColor = colorMap[colorScheme];
+
+    const handlePress = () => {
+      if (isDisabled) return;
+      const newValue = !isChecked;
+      if (!isControlled) {
+        setInternalChecked(newValue);
+      }
+      onChange?.(newValue);
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={isDisabled}
+        style={[styles.container, style]}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: isIndeterminate ? 'mixed' : isChecked, disabled: isDisabled }}
+        {...props}
+      >
+        <View
+          style={[
+            styles.checkbox,
+            { width: boxSize, height: boxSize },
+            (isChecked || isIndeterminate) && { backgroundColor: checkColor, borderColor: checkColor },
+            isInvalid && styles.invalid,
+            isDisabled && styles.disabled,
+          ]}
+        >
+          {isChecked && !isIndeterminate && (
+            <Svg width={boxSize - 4} height={boxSize - 4} viewBox="0 0 24 24" fill="none">
+              <Path
+                d="M20 6L9 17l-5-5"
+                stroke={colors.white}
+                strokeWidth={3}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </Svg>
+          )}
+          {isIndeterminate && (
+            <View style={[styles.indeterminate, { width: boxSize - 8, height: 2 }]} />
+          )}
+        </View>
+        {label && (
+          <Text style={[styles.label, styles[`${size}Label` as keyof typeof styles], isDisabled && styles.labelDisabled]}>
+            {label}
+          </Text>
+        )}
+      </Pressable>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';
+
+export interface CheckboxGroupProps extends ViewProps {
+  /** Group label */
+  label?: string;
+  /** Selected values */
+  value?: string[];
+  /** Default selected values */
+  defaultValue?: string[];
+  /** On change handler */
+  onChange?: (values: string[]) => void;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Direction */
+  direction?: 'row' | 'column';
+}
+
+export const CheckboxGroup = forwardRef<View, CheckboxGroupProps>(
+  (
+    {
+      style,
+      label,
+      value: controlledValue,
+      defaultValue = [],
+      onChange,
+      isDisabled = false,
+      direction = 'column',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const values = isControlled ? controlledValue : internalValue;
+
+    const handleChange = (itemValue: string, isChecked: boolean) => {
+      const newValues = isChecked
+        ? [...values, itemValue]
+        : values.filter((v) => v !== itemValue);
+
+      if (!isControlled) {
+        setInternalValue(newValues);
+      }
+      onChange?.(newValues);
+    };
+
+    return (
+      <View ref={ref} style={[styles.group, style]} {...props}>
+        {label && <Text style={styles.groupLabel}>{label}</Text>}
+        <View style={[styles.groupContent, { flexDirection: direction }]}>
+          {React.Children.map(children, (child) => {
+            if (React.isValidElement<CheckboxProps & { value?: string }>(child)) {
+              const itemValue = (child.props as any).value;
+              return React.cloneElement(child, {
+                isChecked: itemValue ? values.includes(itemValue) : child.props.isChecked,
+                onChange: itemValue
+                  ? (checked: boolean) => handleChange(itemValue, checked)
+                  : child.props.onChange,
+                isDisabled: isDisabled || child.props.isDisabled,
+              });
+            }
+            return child;
+          })}
+        </View>
+      </View>
+    );
+  }
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkbox: {
+    borderWidth: 2,
+    borderColor: colors.border.default,
+    borderRadius: borderRadius.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  invalid: {
+    borderColor: colors.border.danger,
+  },
+  disabled: {
+    backgroundColor: colors.background.secondary,
+    borderColor: colors.border.disabled,
+  },
+  indeterminate: {
+    backgroundColor: colors.white,
+    borderRadius: 1,
+  },
+  label: {
+    marginLeft: spacing['2x'],
+    color: colors.text.default,
+  },
+  smLabel: {
+    fontSize: typography.fontSize.small,
+  },
+  mdLabel: {
+    fontSize: typography.fontSize.body,
+  },
+  lgLabel: {
+    fontSize: typography.fontSize.body,
+  },
+  labelDisabled: {
+    color: colors.text.disabled,
+  },
+  group: {},
+  groupLabel: {
+    fontSize: typography.fontSize.componentLabel,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+    marginBottom: spacing['2x'],
+  },
+  groupContent: {
+    gap: spacing['3x'],
+  },
+});

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps } from './Checkbox';
+