@urbint/cl 1.0.1

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,219 @@
+/**
+ * Progress Component
+ * Progress bar and circular progress indicators
+ */
+
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { View, ViewProps, Text, Animated, StyleSheet } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { colors, spacing, borderRadius, typography } from '../../styles/tokens';
+
+export interface ProgressProps extends ViewProps {
+  /** Progress value (0-100) */
+  value?: number;
+  /** Indeterminate state */
+  isIndeterminate?: boolean;
+  /** Progress size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Color scheme */
+  colorScheme?: 'primary' | 'success' | 'warning' | 'danger';
+  /** Show label */
+  showLabel?: boolean;
+  /** Label position */
+  labelPosition?: 'inside' | 'outside';
+  /** Progress variant */
+  variant?: 'linear' | 'circular';
+}
+
+const sizeConfig = {
+  sm: { height: 4, circleSize: 32, strokeWidth: 3 },
+  md: { height: 8, circleSize: 48, strokeWidth: 4 },
+  lg: { height: 12, circleSize: 64, strokeWidth: 5 },
+} as const;
+
+const colorMap = {
+  primary: colors.brand.blue,
+  success: colors.feedback.success.content,
+  warning: colors.feedback.warning.content,
+  danger: colors.feedback.error.content,
+};
+
+export const Progress = forwardRef<View, ProgressProps>(
+  (
+    {
+      style,
+      value = 0,
+      isIndeterminate = false,
+      size = 'md',
+      colorScheme = 'primary',
+      showLabel = false,
+      labelPosition = 'outside',
+      variant = 'linear',
+      ...props
+    },
+    ref
+  ) => {
+    const config = sizeConfig[size];
+    const clampedValue = Math.max(0, Math.min(100, value));
+    const progressColor = colorMap[colorScheme];
+
+    const indeterminateAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      if (isIndeterminate) {
+        Animated.loop(
+          Animated.sequence([
+            Animated.timing(indeterminateAnim, {
+              toValue: 1,
+              duration: 1000,
+              useNativeDriver: true,
+            }),
+            Animated.timing(indeterminateAnim, {
+              toValue: 0,
+              duration: 1000,
+              useNativeDriver: true,
+            }),
+          ])
+        ).start();
+      }
+    }, [isIndeterminate]);
+
+    if (variant === 'circular') {
+      const circumference = 2 * Math.PI * ((config.circleSize - config.strokeWidth) / 2);
+      const strokeDashoffset = circumference - (clampedValue / 100) * circumference;
+
+      return (
+        <View ref={ref} style={[styles.circularContainer, style]} {...props}>
+          <Svg width={config.circleSize} height={config.circleSize}>
+            <Circle
+              cx={config.circleSize / 2}
+              cy={config.circleSize / 2}
+              r={(config.circleSize - config.strokeWidth) / 2}
+              stroke={colors.border.disabled}
+              strokeWidth={config.strokeWidth}
+              fill="none"
+            />
+            <Circle
+              cx={config.circleSize / 2}
+              cy={config.circleSize / 2}
+              r={(config.circleSize - config.strokeWidth) / 2}
+              stroke={progressColor}
+              strokeWidth={config.strokeWidth}
+              fill="none"
+              strokeDasharray={`${circumference} ${circumference}`}
+              strokeDashoffset={strokeDashoffset}
+              strokeLinecap="round"
+              transform={`rotate(-90 ${config.circleSize / 2} ${config.circleSize / 2})`}
+            />
+          </Svg>
+          {showLabel && (
+            <Text style={[styles.circularLabel, styles[`${size}Label` as keyof typeof styles]]}>{clampedValue}%</Text>
+          )}
+        </View>
+      );
+    }
+
+    const translateX = isIndeterminate
+      ? indeterminateAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['-100%', '100%'],
+        })
+      : undefined;
+
+    return (
+      <View ref={ref} style={[styles.container, style]} {...props}>
+        {showLabel && labelPosition === 'outside' && (
+          <View style={styles.labelContainer}>
+            <Text style={styles.label}>{clampedValue}%</Text>
+          </View>
+        )}
+        <View style={[styles.track, { height: config.height }]}>
+          {isIndeterminate ? (
+            <Animated.View
+              style={[
+                styles.indeterminateBar,
+                {
+                  height: config.height,
+                  backgroundColor: progressColor,
+                  transform: [{ translateX: translateX as any }],
+                },
+              ]}
+            />
+          ) : (
+            <View
+              style={[
+                styles.filledTrack,
+                {
+                  width: `${clampedValue}%`,
+                  height: config.height,
+                  backgroundColor: progressColor,
+                },
+              ]}
+            >
+              {showLabel && labelPosition === 'inside' && size === 'lg' && (
+                <Text style={styles.insideLabel}>{clampedValue}%</Text>
+              )}
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  }
+);
+
+Progress.displayName = 'Progress';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  track: {
+    width: '100%',
+    backgroundColor: colors.border.disabled,
+    borderRadius: borderRadius.full,
+    overflow: 'hidden',
+  },
+  filledTrack: {
+    borderRadius: borderRadius.full,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  indeterminateBar: {
+    width: '50%',
+    borderRadius: borderRadius.full,
+  },
+  labelContainer: {
+    marginBottom: spacing.base,
+  },
+  label: {
+    fontSize: typography.fontSize.caption,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.text.default,
+    textAlign: 'right',
+  },
+  insideLabel: {
+    fontSize: 10,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.white,
+    paddingRight: spacing.base,
+  },
+  circularContainer: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circularLabel: {
+    position: 'absolute',
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+  },
+  smLabel: {
+    fontSize: 8,
+  },
+  mdLabel: {
+    fontSize: 10,
+  },
+  lgLabel: {
+    fontSize: 12,
+  },
+});

package/src/components/Progress/index.ts

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

package/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Radio, RadioGroup } from './Radio';
+import { VStack } from '../VStack';
+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 Radio> = {
+  title: 'Components/Radio',
+  component: Radio,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option1">
+      <Radio value="option1" label="Option 1" />
+      <Radio value="option2" label="Option 2" />
+      <Radio value="option3" label="Option 3" />
+    </RadioGroup>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <RadioGroup defaultValue="sm" size="sm" label="Small">
+        <Radio value="sm" label="Small option" />
+      </RadioGroup>
+      <RadioGroup defaultValue="md" size="md" label="Medium">
+        <Radio value="md" label="Medium option" />
+      </RadioGroup>
+      <RadioGroup defaultValue="lg" size="lg" label="Large">
+        <Radio value="lg" label="Large option" />
+      </RadioGroup>
+    </VStack>
+  ),
+};
+
+export const ColorSchemes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <RadioGroup defaultValue="primary" colorScheme="primary" label="Primary">
+        <Radio value="primary" label="Primary radio" />
+      </RadioGroup>
+      <RadioGroup defaultValue="success" colorScheme="success" label="Success">
+        <Radio value="success" label="Success radio" />
+      </RadioGroup>
+      <RadioGroup defaultValue="danger" colorScheme="danger" label="Danger">
+        <Radio value="danger" label="Danger radio" />
+      </RadioGroup>
+    </VStack>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <RadioGroup defaultValue="yes" direction="row" label="Subscribe to newsletter?">
+      <Radio value="yes" label="Yes" />
+      <Radio value="no" label="No" />
+      <Radio value="maybe" label="Maybe" />
+    </RadioGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option1" isDisabled label="Disabled group">
+      <Radio value="option1" label="Option 1" />
+      <Radio value="option2" label="Option 2" />
+    </RadioGroup>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,234 @@
+/**
+ * Radio Component
+ * Radio button for single selection
+ */
+
+import React, { forwardRef, createContext, useContext } from 'react';
+import { View, ViewProps, Pressable, Text, StyleSheet } from 'react-native';
+import { colors, spacing, typography } from '../../styles/tokens';
+
+interface RadioGroupContextValue {
+  value?: string;
+  onChange?: (value: string) => void;
+  isDisabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  colorScheme?: 'primary' | 'success' | 'danger';
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue>({});
+
+export interface RadioProps extends Omit<ViewProps, 'children'> {
+  /** Radio value */
+  value: string;
+  /** Radio label */
+  label?: string;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Is invalid */
+  isInvalid?: boolean;
+  /** Radio size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Radio color */
+  colorScheme?: 'primary' | 'success' | 'danger';
+}
+
+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 Radio = forwardRef<View, RadioProps>(
+  (
+    {
+      style,
+      value,
+      label,
+      isDisabled: localDisabled,
+      isInvalid = false,
+      size: localSize,
+      colorScheme: localColorScheme,
+      ...props
+    },
+    ref
+  ) => {
+    const group = useContext(RadioGroupContext);
+
+    const isDisabled = localDisabled ?? group.isDisabled ?? false;
+    const size = localSize ?? group.size ?? 'md';
+    const colorScheme = localColorScheme ?? group.colorScheme ?? 'primary';
+    const isSelected = group.value === value;
+    const radioSize = sizeMap[size];
+    const activeColor = colorMap[colorScheme];
+
+    const handlePress = () => {
+      if (isDisabled) return;
+      group.onChange?.(value);
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={isDisabled}
+        style={[styles.container, style]}
+        accessibilityRole="radio"
+        accessibilityState={{ checked: isSelected, disabled: isDisabled }}
+        {...props}
+      >
+        <View
+          style={[
+            styles.radio,
+            { width: radioSize, height: radioSize },
+            isSelected && { borderColor: activeColor },
+            isInvalid && styles.invalid,
+            isDisabled && styles.disabled,
+          ]}
+        >
+          {isSelected && (
+            <View
+              style={[
+                styles.innerDot,
+                {
+                  width: radioSize / 2,
+                  height: radioSize / 2,
+                  backgroundColor: isDisabled ? colors.text.disabled : activeColor,
+                },
+              ]}
+            />
+          )}
+        </View>
+        {label && (
+          <Text style={[styles.label, styles[`${size}Label` as keyof typeof styles], isDisabled && styles.labelDisabled]}>
+            {label}
+          </Text>
+        )}
+      </Pressable>
+    );
+  }
+);
+
+Radio.displayName = 'Radio';
+
+export interface RadioGroupProps extends ViewProps {
+  /** Group label */
+  label?: string;
+  /** Selected value */
+  value?: string;
+  /** Default selected value */
+  defaultValue?: string;
+  /** On change handler */
+  onChange?: (value: string) => void;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Direction */
+  direction?: 'row' | 'column';
+  /** Radio size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Color scheme */
+  colorScheme?: 'primary' | 'success' | 'danger';
+}
+
+export const RadioGroup = forwardRef<View, RadioGroupProps>(
+  (
+    {
+      style,
+      label,
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      isDisabled = false,
+      direction = 'column',
+      size = 'md',
+      colorScheme = 'primary',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+
+    const handleChange = (newValue: string) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    };
+
+    return (
+      <RadioGroupContext.Provider
+        value={{ value, onChange: handleChange, isDisabled, size, colorScheme }}
+      >
+        <View ref={ref} style={[styles.group, style]} {...props}>
+          {label && <Text style={styles.groupLabel}>{label}</Text>}
+          <View
+            style={[styles.groupContent, { flexDirection: direction }]}
+            accessibilityRole="radiogroup"
+          >
+            {children}
+          </View>
+        </View>
+      </RadioGroupContext.Provider>
+    );
+  }
+);
+
+RadioGroup.displayName = 'RadioGroup';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  radio: {
+    borderWidth: 2,
+    borderColor: colors.border.default,
+    borderRadius: 9999,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  innerDot: {
+    borderRadius: 9999,
+  },
+  invalid: {
+    borderColor: colors.border.danger,
+  },
+  disabled: {
+    backgroundColor: colors.background.secondary,
+    borderColor: colors.border.disabled,
+  },
+  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/Radio/index.ts

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup, type RadioProps, type RadioGroupProps } from './Radio';
+