@urbint/cl 1.0.1

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,209 @@
+/**
+ * Slider Component
+ * Range slider for numeric value selection
+ */
+
+import React, { forwardRef, useRef, useState } from 'react';
+import { View, ViewProps, Text, PanResponder, LayoutChangeEvent, StyleSheet } from 'react-native';
+import { colors, spacing, borderRadius, typography, elevation } from '../../styles/tokens';
+
+export interface SliderProps extends Omit<ViewProps, 'children'> {
+  /** Current value */
+  value?: number;
+  /** Default value */
+  defaultValue?: number;
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** On change handler */
+  onChange?: (value: number) => void;
+  /** On change end handler */
+  onChangeEnd?: (value: number) => void;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Show value label */
+  showValue?: boolean;
+  /** Slider size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Color scheme */
+  colorScheme?: 'primary' | 'success' | 'danger';
+  /** Label */
+  label?: string;
+}
+
+const sizeConfig = {
+  sm: { track: 4, thumb: 16 },
+  md: { track: 6, thumb: 20 },
+  lg: { track: 8, thumb: 24 },
+} as const;
+
+const colorMap = {
+  primary: colors.brand.blue,
+  success: colors.feedback.success.content,
+  danger: colors.feedback.error.content,
+};
+
+export const Slider = forwardRef<View, SliderProps>(
+  (
+    {
+      style,
+      value: controlledValue,
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      step = 1,
+      onChange,
+      onChangeEnd,
+      isDisabled = false,
+      showValue = false,
+      size = 'md',
+      colorScheme = 'primary',
+      label,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [sliderWidth, setSliderWidth] = useState(0);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+
+    const config = sizeConfig[size];
+    const percentage = ((value - min) / (max - min)) * 100;
+    const activeColor = colorMap[colorScheme];
+
+    const updateValue = (locationX: number) => {
+      if (isDisabled) return;
+
+      const newPercentage = Math.max(0, Math.min(1, locationX / sliderWidth));
+      let newValue = min + newPercentage * (max - min);
+
+      newValue = Math.round(newValue / step) * step;
+      newValue = Math.max(min, Math.min(max, newValue));
+
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    };
+
+    const panResponder = useRef(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => !isDisabled,
+        onMoveShouldSetPanResponder: () => !isDisabled,
+        onPanResponderGrant: (e) => {
+          updateValue(e.nativeEvent.locationX);
+        },
+        onPanResponderMove: (e) => {
+          updateValue(e.nativeEvent.locationX);
+        },
+        onPanResponderRelease: () => {
+          onChangeEnd?.(value);
+        },
+      })
+    ).current;
+
+    const handleLayout = (e: LayoutChangeEvent) => {
+      setSliderWidth(e.nativeEvent.layout.width);
+    };
+
+    return (
+      <View ref={ref} style={[styles.container, style]} {...props}>
+        {(label || showValue) && (
+          <View style={styles.header}>
+            {label && <Text style={styles.label}>{label}</Text>}
+            {showValue && <Text style={styles.valueLabel}>{value}</Text>}
+          </View>
+        )}
+        <View
+          style={[styles.track, { height: config.track }]}
+          onLayout={handleLayout}
+          {...panResponder.panHandlers}
+        >
+          <View
+            style={[
+              styles.filledTrack,
+              {
+                width: `${percentage}%`,
+                height: config.track,
+                backgroundColor: isDisabled ? colors.border.disabled : activeColor,
+              },
+            ]}
+          />
+          <View
+            style={[
+              styles.thumb,
+              {
+                width: config.thumb,
+                height: config.thumb,
+                left: `${percentage}%`,
+                marginLeft: -(config.thumb / 2),
+                backgroundColor: isDisabled ? colors.border.default : activeColor,
+              },
+              isDisabled && styles.thumbDisabled,
+            ]}
+          />
+        </View>
+        <View style={styles.footer}>
+          <Text style={styles.rangeLabel}>{min}</Text>
+          <Text style={styles.rangeLabel}>{max}</Text>
+        </View>
+      </View>
+    );
+  }
+);
+
+Slider.displayName = 'Slider';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: spacing['2x'],
+  },
+  label: {
+    fontSize: typography.fontSize.componentLabel,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+  },
+  valueLabel: {
+    fontSize: typography.fontSize.body,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.brand.blue,
+  },
+  track: {
+    width: '100%',
+    backgroundColor: colors.border.disabled,
+    borderRadius: borderRadius.full,
+    justifyContent: 'center',
+  },
+  filledTrack: {
+    position: 'absolute',
+    left: 0,
+    borderRadius: borderRadius.full,
+  },
+  thumb: {
+    position: 'absolute',
+    borderRadius: borderRadius.full,
+    ...elevation['10'],
+  },
+  thumbDisabled: {
+    shadowOpacity: 0,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: spacing.base,
+  },
+  rangeLabel: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+  },
+});

package/src/components/Slider/index.ts

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

package/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Spinner } from './Spinner';
+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 Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  args: {
+    size: 'md',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Spinner Sizes</Text>
+      <HStack space={spacing.lg} alignItems="center">
+        <Spinner size="xs" />
+        <Spinner size="sm" />
+        <Spinner size="md" />
+        <Spinner size="lg" />
+        <Spinner size="xl" />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Custom Colors</Text>
+      <HStack space={spacing.lg}>
+        <Spinner color={colors.brand.blue} />
+        <Spinner color={colors.feedback.success.content} />
+        <Spinner color={colors.feedback.error.content} />
+        <Spinner color={colors.feedback.warning.content} />
+        <Spinner color={colors.badge.purple} />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">With Label</Text>
+      <Spinner size="md" label="Loading..." />
+    </VStack>
+  ),
+};
+
+export const CustomTrack: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Custom Track Color</Text>
+      <HStack space={spacing.lg}>
+        <Spinner color={colors.brand.blue} trackColor={colors.border.disabled} />
+        <Spinner color={colors.feedback.success.content} trackColor={colors.background.tertiary} />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const LoadingState: Story = {
+  render: () => (
+    <VStack space={spacing.lg} alignItems="center" style={{ padding: spacing.xl }}>
+      <Spinner size="lg" color={colors.brand.blue} />
+      <Text>Loading your data...</Text>
+      <Text variant="caption" color={colors.text.secondary}>This may take a few moments</Text>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,121 @@
+/**
+ * Spinner Component
+ * Loading spinner indicator
+ */
+
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { View, ViewProps, Animated, Easing, StyleSheet } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { colors, spacing, typography } from '../../styles/tokens';
+
+export interface SpinnerProps extends ViewProps {
+  /** Spinner size */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Spinner color */
+  color?: string;
+  /** Track color */
+  trackColor?: string;
+  /** Stroke width */
+  strokeWidth?: number;
+  /** Label */
+  label?: string;
+}
+
+const sizeMap = {
+  xs: 16,
+  sm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64,
+} as const;
+
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+
+export const Spinner = forwardRef<View, SpinnerProps>(
+  (
+    {
+      style,
+      size = 'md',
+      color,
+      trackColor,
+      strokeWidth,
+      label,
+      ...props
+    },
+    ref
+  ) => {
+    const spinnerSize = typeof size === 'string' ? sizeMap[size] : size;
+    const defaultStrokeWidth = strokeWidth ?? Math.max(2, spinnerSize / 10);
+    const spinnerColor = color || colors.brand.blue;
+    const spinnerTrackColor = trackColor || colors.border.disabled;
+
+    const rotateAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      Animated.loop(
+        Animated.timing(rotateAnim, {
+          toValue: 1,
+          duration: 1000,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        })
+      ).start();
+    }, []);
+
+    const rotation = rotateAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '360deg'],
+    });
+
+    const circumference = 2 * Math.PI * ((spinnerSize - defaultStrokeWidth) / 2);
+
+    return (
+      <View ref={ref} style={[styles.container, style]} {...props}>
+        <AnimatedSvg
+          width={spinnerSize}
+          height={spinnerSize}
+          style={{ transform: [{ rotate: rotation }] }}
+        >
+          {/* Track */}
+          <Circle
+            cx={spinnerSize / 2}
+            cy={spinnerSize / 2}
+            r={(spinnerSize - defaultStrokeWidth) / 2}
+            stroke={spinnerTrackColor}
+            strokeWidth={defaultStrokeWidth}
+            fill="none"
+          />
+          {/* Spinner */}
+          <Circle
+            cx={spinnerSize / 2}
+            cy={spinnerSize / 2}
+            r={(spinnerSize - defaultStrokeWidth) / 2}
+            stroke={spinnerColor}
+            strokeWidth={defaultStrokeWidth}
+            fill="none"
+            strokeDasharray={`${circumference * 0.75} ${circumference * 0.25}`}
+            strokeLinecap="round"
+          />
+        </AnimatedSvg>
+        {label && <View style={styles.labelContainer}><Animated.Text style={styles.label}>{label}</Animated.Text></View>}
+      </View>
+    );
+  }
+);
+
+Spinner.displayName = 'Spinner';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  labelContainer: {
+    marginTop: spacing['2x'],
+  },
+  label: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+  },
+});
+

package/src/components/Spinner/index.ts

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

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Switch } from './Switch';
+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 Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  args: {
+    label: 'Enable notifications',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Switch label="Small" size="sm" />
+      <Switch label="Medium" size="md" />
+      <Switch label="Large" size="lg" />
+    </VStack>
+  ),
+};
+
+export const ColorSchemes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Switch label="Primary" colorScheme="primary" defaultChecked />
+      <Switch label="Success" colorScheme="success" defaultChecked />
+      <Switch label="Danger" colorScheme="danger" defaultChecked />
+    </VStack>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Switch label="Unchecked" />
+      <Switch label="Checked" defaultChecked />
+      <Switch label="Disabled" isDisabled />
+      <Switch label="Disabled Checked" isDisabled defaultChecked />
+    </VStack>
+  ),
+};
+
+export const LabelPositions: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Switch label="Label on right" labelPosition="right" />
+      <Switch label="Label on left" labelPosition="left" />
+    </VStack>
+  ),
+};
+
+export const SettingsExample: Story = {
+  render: () => (
+    <VStack space={spacing.xs}>
+      <Text weight="semiBold" style={{ marginBottom: spacing.sm }}>Notification Settings</Text>
+      <HStack justifyContent="space-between" style={{ paddingVertical: spacing.md }}>
+        <VStack>
+          <Text>Email notifications</Text>
+          <Text variant="caption" color={colors.text.secondary}>Receive email updates</Text>
+        </VStack>
+        <Switch defaultChecked />
+      </HStack>
+      <HStack justifyContent="space-between" style={{ paddingVertical: spacing.md }}>
+        <VStack>
+          <Text>Push notifications</Text>
+          <Text variant="caption" color={colors.text.secondary}>Receive push alerts</Text>
+        </VStack>
+        <Switch defaultChecked />
+      </HStack>
+      <HStack justifyContent="space-between" style={{ paddingVertical: spacing.md }}>
+        <VStack>
+          <Text>SMS notifications</Text>
+          <Text variant="caption" color={colors.text.secondary}>Receive text messages</Text>
+        </VStack>
+        <Switch />
+      </HStack>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+