@urbint/cl 1.0.1

package/src/components/DatePicker/index.ts

@@ -0,0 +1,8 @@
+export { DatePicker } from './DatePicker';
+export type {
+  DatePickerProps,
+  DatePickerMode,
+  DatePickerSize,
+  DatePickerVariant,
+} from './DatePicker';
+

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,224 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Divider } from './Divider';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { colors, spacing, borderRadius, elevation } from '../../styles/tokens';
+
+const meta: Meta<typeof Divider> = {
+  title: 'Layout/Divider',
+  component: Divider,
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    variant: {
+      control: 'select',
+      options: ['solid', 'dashed', 'dotted'],
+    },
+    thickness: { control: 'number' },
+    color: { control: 'color' },
+  },
+  args: {
+    orientation: 'horizontal',
+    variant: 'solid',
+    thickness: 1,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Divider>;
+
+export const Default: Story = {
+  render: (args) => (
+    <VStack space={spacing.lg}>
+      <Text>Content Above</Text>
+      <Divider {...args} />
+      <Text>Content Below</Text>
+    </VStack>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Horizontal Dividers</Text>
+      <Box p={spacing.lg} bg={colors.background.secondary} rounded="md">
+        <VStack space={spacing.md}>
+          <Text>Section 1</Text>
+          <Divider />
+          <Text>Section 2</Text>
+          <Divider />
+          <Text>Section 3</Text>
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Vertical Dividers</Text>
+      <Box p={spacing.lg} bg={colors.background.secondary} rounded="md">
+        <HStack space={spacing.md} style={{ height: 60 }} alignItems="center">
+          <Text>Item 1</Text>
+          <Divider orientation="vertical" />
+          <Text>Item 2</Text>
+          <Divider orientation="vertical" />
+          <Text>Item 3</Text>
+        </HStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <Text weight="semiBold">Divider Variants</Text>
+      <VStack space={spacing.lg}>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>Solid</Text>
+          <Divider variant="solid" />
+        </VStack>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>Dashed</Text>
+          <Divider variant="dashed" />
+        </VStack>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>Dotted</Text>
+          <Divider variant="dotted" />
+        </VStack>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const Thickness: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <Text weight="semiBold">Divider Thickness</Text>
+      <VStack space={spacing.lg}>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>thickness=1</Text>
+          <Divider thickness={1} />
+        </VStack>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>thickness=2</Text>
+          <Divider thickness={2} />
+        </VStack>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>thickness=3</Text>
+          <Divider thickness={3} />
+        </VStack>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>thickness=4</Text>
+          <Divider thickness={4} />
+        </VStack>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <Text weight="semiBold">Colored Dividers</Text>
+      <VStack space={spacing.lg}>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>Blue</Text>
+          <Divider color={colors.brand.blue} thickness={2} />
+        </VStack>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>Green</Text>
+          <Divider color={colors.feedback.success.content} thickness={2} />
+        </VStack>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>Red</Text>
+          <Divider color={colors.feedback.error.content} thickness={2} />
+        </VStack>
+        <VStack space={spacing.sm}>
+          <Text size="sm" color={colors.text.secondary}>Purple</Text>
+          <Divider color={colors.badge.purple} thickness={2} />
+        </VStack>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const InCard: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Divider in Card</Text>
+      <Box p={0} bg={colors.white} rounded="lg" shadow="10" overflow="hidden">
+        <Box p={spacing.lg}>
+          <Text weight="semiBold">Card Title</Text>
+          <Text size="sm" color={colors.text.secondary}>Card subtitle or description</Text>
+        </Box>
+        <Divider />
+        <Box p={spacing.lg}>
+          <Text size="sm">
+            This is the main content area of the card. It contains important information
+            that users need to see.
+          </Text>
+        </Box>
+        <Divider />
+        <Box p={spacing.md}>
+          <HStack justifyContent="flex-end" space={spacing.sm}>
+            <Text size="sm" color={colors.brand.blue}>Cancel</Text>
+            <Text size="sm" color={colors.brand.blue}>Save</Text>
+          </HStack>
+        </Box>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const InList: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Divider in List</Text>
+      <Box bg={colors.white} rounded="lg" shadow="10" overflow="hidden">
+        {['John Doe', 'Jane Smith', 'Bob Johnson', 'Alice Brown'].map((name, index, arr) => (
+          <Box key={name}>
+            <Box p={spacing.lg}>
+              <HStack space={spacing.md} alignItems="center">
+                <Box w={40} h={40} bg={colors.brand.blue + '20'} rounded="full" alignItems="center" justifyContent="center">
+                  <Text weight="semiBold">{name.charAt(0)}</Text>
+                </Box>
+                <VStack space={spacing.xs}>
+                  <Text weight="medium">{name}</Text>
+                  <Text size="sm" color={colors.text.secondary}>user@email.com</Text>
+                </VStack>
+              </HStack>
+            </Box>
+            {index < arr.length - 1 && <Divider />}
+          </Box>
+        ))}
+      </Box>
+    </VStack>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Divider with Text (Custom)</Text>
+      <HStack alignItems="center" space={spacing.md}>
+        <Box flex={1}><Divider /></Box>
+        <Text size="sm" color={colors.text.secondary}>OR</Text>
+        <Box flex={1}><Divider /></Box>
+      </HStack>
+      <HStack alignItems="center" space={spacing.md}>
+        <Box flex={1}><Divider /></Box>
+        <Text size="sm" color={colors.text.secondary}>Continue with</Text>
+        <Box flex={1}><Divider /></Box>
+      </HStack>
+    </VStack>
+  ),
+};
+

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,73 @@
+/**
+ * Divider Component
+ * Visual separator between content sections
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, StyleSheet } from 'react-native';
+import { colors } from '../../styles/tokens';
+
+export interface DividerProps extends ViewProps {
+  /** Orientation */
+  orientation?: 'horizontal' | 'vertical';
+  /** Thickness */
+  thickness?: number;
+  /** Color */
+  color?: string;
+  /** Variant */
+  variant?: 'solid' | 'dashed' | 'dotted';
+}
+
+export const Divider = forwardRef<View, DividerProps>(
+  (
+    {
+      style,
+      orientation = 'horizontal',
+      thickness = 1,
+      color,
+      variant = 'solid',
+      ...props
+    },
+    ref
+  ) => {
+    const dividerColor = color || colors.border.default;
+
+    const orientationStyle =
+      orientation === 'horizontal'
+        ? { height: thickness, width: '100%' as const }
+        : { width: thickness, height: '100%' as const };
+
+    const variantStyle =
+      variant === 'dashed'
+        ? { borderStyle: 'dashed' as const }
+        : variant === 'dotted'
+        ? { borderStyle: 'dotted' as const }
+        : { borderStyle: 'solid' as const };
+
+    return (
+      <View
+        ref={ref}
+        style={[
+          styles.divider,
+          orientationStyle,
+          { backgroundColor: variant === 'solid' ? dividerColor : 'transparent' },
+          variant !== 'solid' && {
+            borderColor: dividerColor,
+            borderWidth: thickness,
+            ...variantStyle,
+          },
+          style,
+        ]}
+        {...props}
+      />
+    );
+  }
+);
+
+Divider.displayName = 'Divider';
+
+const styles = StyleSheet.create({
+  divider: {
+    backgroundColor: colors.border.default,
+  },
+});

package/src/components/Divider/index.ts

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