@urbint/cl 1.0.1

package/src/components/VStack/VStack.stories.tsx

@@ -0,0 +1,183 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+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 VStack> = {
+  title: 'Layout/VStack',
+  component: VStack,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    space: { control: 'number' },
+    alignItems: {
+      control: 'select',
+      options: ['flex-start', 'center', 'flex-end', 'stretch'],
+    },
+    justifyContent: {
+      control: 'select',
+      options: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around'],
+    },
+    reversed: { control: 'boolean' },
+  },
+  args: {
+    space: spacing.md,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof VStack>;
+
+export const Default: Story = {
+  render: (args) => (
+    <VStack {...args}>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text>Item 1</Text>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text>Item 2</Text>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text>Item 3</Text>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const Spacing: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Different Spacing Values</Text>
+      <VStack space={spacing.xs} style={styles.infoSection}>
+        <Text variant="small" color={colors.text.secondary}>space={spacing.xs}</Text>
+        <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>A</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>B</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>C</Text></Box>
+      </VStack>
+      <VStack space={spacing.md} style={styles.infoSection}>
+        <Text variant="small" color={colors.text.secondary}>space={spacing.md}</Text>
+        <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>A</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>B</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>C</Text></Box>
+      </VStack>
+      <VStack space={spacing.xl} style={styles.infoSection}>
+        <Text variant="small" color={colors.text.secondary}>space={spacing.xl}</Text>
+        <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>A</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>B</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>C</Text></Box>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const Alignment: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Alignment Options</Text>
+      <VStack space={spacing.sm} alignItems="flex-start" style={styles.warningSection}>
+        <Text variant="small">alignItems="flex-start"</Text>
+        <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>Short</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>Medium Text</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>Longer Text Here</Text></Box>
+      </VStack>
+      <VStack space={spacing.sm} alignItems="center" style={styles.warningSection}>
+        <Text variant="small">alignItems="center"</Text>
+        <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>Short</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>Medium Text</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>Longer Text Here</Text></Box>
+      </VStack>
+      <VStack space={spacing.sm} alignItems="flex-end" style={styles.warningSection}>
+        <Text variant="small">alignItems="flex-end"</Text>
+        <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>Short</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>Medium Text</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>Longer Text Here</Text></Box>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const Reversed: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Normal vs Reversed</Text>
+      <VStack space={spacing.sm} style={styles.successSection}>
+        <Text variant="small">Normal (reversed=false)</Text>
+        <Box p={spacing.sm} bg={colors.feedback.success.border} rounded="sm"><Text>First</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.success.border} rounded="sm"><Text>Second</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.success.border} rounded="sm"><Text>Third</Text></Box>
+      </VStack>
+      <VStack space={spacing.sm} reversed style={styles.successSection}>
+        <Text variant="small">Reversed (reversed=true)</Text>
+        <Box p={spacing.sm} bg={colors.feedback.success.border} rounded="sm"><Text>First</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.success.border} rounded="sm"><Text>Second</Text></Box>
+        <Box p={spacing.sm} bg={colors.feedback.success.border} rounded="sm"><Text>Third</Text></Box>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const NestedStacks: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">Nested VStacks</Text>
+      <Box p={spacing.lg} bg={colors.background.tertiary} rounded="lg">
+        <VStack space={spacing.lg}>
+          <VStack space={spacing.xs}>
+            <Text weight="semiBold">Section 1</Text>
+            <Text variant="small" color={colors.text.secondary}>Description for section 1</Text>
+          </VStack>
+          <VStack space={spacing.xs}>
+            <Text weight="semiBold">Section 2</Text>
+            <Text variant="small" color={colors.text.secondary}>Description for section 2</Text>
+          </VStack>
+          <VStack space={spacing.xs}>
+            <Text weight="semiBold">Section 3</Text>
+            <Text variant="small" color={colors.text.secondary}>Description for section 3</Text>
+          </VStack>
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+  infoSection: {
+    backgroundColor: colors.feedback.info.background,
+    padding: spacing.md,
+    borderRadius: borderRadius.lg,
+  },
+  warningSection: {
+    backgroundColor: colors.feedback.warning.background,
+    padding: spacing.md,
+    borderRadius: borderRadius.lg,
+  },
+  successSection: {
+    backgroundColor: colors.feedback.success.background,
+    padding: spacing.md,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/VStack/VStack.tsx

@@ -0,0 +1,76 @@
+/**
+ * VStack Component
+ * Vertical stack - arranges children in a column
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { spacing, SpacingToken } from '../../styles/tokens';
+
+/** Spacing value can be a token name or raw number */
+type SpacingValue = SpacingToken | number;
+
+/** Resolve spacing value to pixels */
+const resolveSpacing = (value: SpacingValue): number => {
+  if (typeof value === 'number') return value;
+  return spacing[value];
+};
+
+export interface VStackProps extends ViewProps {
+  /** Space between children - accepts token ('sm', 'md', 'lg') or number */
+  space?: SpacingValue;
+  /** Padding on all sides - accepts token ('sm', 'md', 'lg') or number */
+  p?: SpacingValue;
+  /** Horizontal padding - accepts token ('sm', 'md', 'lg') or number */
+  px?: SpacingValue;
+  /** Vertical padding - accepts token ('sm', 'md', 'lg') or number */
+  py?: SpacingValue;
+  /** Align items */
+  alignItems?: ViewStyle['alignItems'];
+  /** Justify content */
+  justifyContent?: ViewStyle['justifyContent'];
+  /** Reverse direction */
+  reversed?: boolean;
+}
+
+export const VStack = forwardRef<View, VStackProps>(
+  (
+    {
+      style,
+      space = 'none',
+      p,
+      px,
+      py,
+      alignItems,
+      justifyContent,
+      reversed = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <View
+        ref={ref}
+        style={[
+          {
+            flexDirection: reversed ? 'column-reverse' : 'column',
+            gap: resolveSpacing(space),
+            alignItems,
+            justifyContent,
+            ...(p !== undefined && { padding: resolveSpacing(p) }),
+            ...(px !== undefined && { paddingHorizontal: resolveSpacing(px) }),
+            ...(py !== undefined && { paddingVertical: resolveSpacing(py) }),
+          },
+          style,
+        ]}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+VStack.displayName = 'VStack';
+

package/src/components/VStack/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,62 @@
+/**
+ * Urbint Component Library
+ * Enterprise-ready React Native component library
+ */
+
+// Layout Components
+export * from './Box';
+export * from './Center';
+export * from './HStack';
+export * from './VStack';
+export * from './Grid';
+export * from './Divider';
+
+// Typography Components
+export * from './Text';
+export * from './Heading';
+export * from './Link';
+
+// Form Components
+export * from './Input';
+export * from './Textarea';
+export * from './Checkbox';
+export * from './Radio';
+export * from './Select';
+export * from './Switch';
+export * from './Slider';
+export * from './FormControl';
+export * from './DatePicker';
+
+// Feedback Components
+export * from './Alert';
+export * from './Toast';
+export * from './Progress';
+export * from './Spinner';
+export * from './Skeleton';
+
+// Overlay Components
+export * from './Modal';
+export * from './Drawer';
+export * from './AlertDialog';
+export * from './ActionSheet';
+export * from './Popover';
+export * from './Menu';
+export * from './Tooltip';
+
+// Data Display Components
+export * from './Avatar';
+export * from './Badge';
+export * from './Card';
+export * from './Table';
+export * from './Image';
+export * from './Icon';
+
+// Action Components
+export * from './Button';
+export * from './Pressable';
+export * from './Fab';
+export * from './Accordion';
+
+// Utility Components
+export * from './Portal';
+

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Hooks Export
+ */
+
+export * from './useControllableState';
+export * from './useDisclosure';
+

package/src/hooks/useControllableState.ts

@@ -0,0 +1,41 @@
+/**
+ * useControllableState Hook
+ * Manages controlled and uncontrolled state
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+interface UseControllableStateProps<T> {
+  value?: T;
+  defaultValue?: T;
+  onChange?: (value: T) => void;
+}
+
+export function useControllableState<T>({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+}: UseControllableStateProps<T>) {
+  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  const setValue = useCallback((nextValue: T | ((prev: T | undefined) => T)) => {
+    const resolvedValue = typeof nextValue === 'function'
+      ? (nextValue as (prev: T | undefined) => T)(value)
+      : nextValue;
+
+    if (!isControlled) {
+      setUncontrolledValue(resolvedValue);
+    }
+    onChangeRef.current?.(resolvedValue);
+  }, [isControlled, value]);
+
+  return [value, setValue] as const;
+}
+

package/src/hooks/useDisclosure.ts

@@ -0,0 +1,51 @@
+/**
+ * useDisclosure Hook
+ * Manages open/close state for modals, drawers, etc.
+ */
+
+import { useState, useCallback } from 'react';
+
+interface UseDisclosureProps {
+  defaultIsOpen?: boolean;
+  isOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+
+export function useDisclosure(props: UseDisclosureProps = {}) {
+  const { defaultIsOpen = false, isOpen: controlledIsOpen, onOpen: onOpenProp, onClose: onCloseProp } = props;
+
+  const [isOpenState, setIsOpenState] = useState(defaultIsOpen);
+  const isControlled = controlledIsOpen !== undefined;
+  const isOpen = isControlled ? controlledIsOpen : isOpenState;
+
+  const onOpen = useCallback(() => {
+    if (!isControlled) {
+      setIsOpenState(true);
+    }
+    onOpenProp?.();
+  }, [isControlled, onOpenProp]);
+
+  const onClose = useCallback(() => {
+    if (!isControlled) {
+      setIsOpenState(false);
+    }
+    onCloseProp?.();
+  }, [isControlled, onCloseProp]);
+
+  const onToggle = useCallback(() => {
+    if (isOpen) {
+      onClose();
+    } else {
+      onOpen();
+    }
+  }, [isOpen, onOpen, onClose]);
+
+  return {
+    isOpen,
+    onOpen,
+    onClose,
+    onToggle,
+  };
+}
+

package/src/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Urbint Component Library
+ * Enterprise-ready React Native component library built with Unistyles
+ * 
+ * @packageDocumentation
+ */
+
+// Import styles configuration (must be imported before any components)
+import './styles/unistyles';
+
+// Export all components
+export * from './components';
+
+// Export styles and tokens
+export * from './styles';
+
+// Export hooks
+export * from './hooks';
+
+// Export utilities
+export * from './utils';
+

package/src/stories/Button.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { View } from 'react-native';
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, alignItems: 'flex-start' }}>
+        <Story />
+      </View>
+    ),
+  ],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onPress: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,101 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  style,
+  onPress,
+}: ButtonProps) => {
+  const modeStyle = primary ? styles.primary : styles.secondary;
+  const textModeStyle = primary ? styles.primaryText : styles.secondaryText;
+
+  const sizeStyle = styles[size];
+  const textSizeStyle = textSizeStyles[size];
+
+  return (
+    <TouchableOpacity accessibilityRole="button" activeOpacity={0.6} onPress={onPress}>
+      <View
+        style={[
+          styles.button,
+          modeStyle,
+          sizeStyle,
+          style,
+          !!backgroundColor && { backgroundColor },
+          { borderColor: 'black' },
+        ]}
+      >
+        <Text style={[textModeStyle, textSizeStyle]}>{label}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderWidth: 0,
+    borderRadius: 48,
+  },
+  buttonText: {
+    fontWeight: '700',
+    lineHeight: 1,
+  },
+  primary: {
+    backgroundColor: '#1ea7fd',
+  },
+  primaryText: {
+    color: 'white',
+  },
+  secondary: {
+    backgroundColor: 'transparent',
+    borderColor: 'rgba(0, 0, 0, 0.15)',
+    borderWidth: 1,
+  },
+  secondaryText: {
+    color: '#333',
+  },
+  small: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+  smallText: {
+    fontSize: 12,
+  },
+  medium: {
+    paddingVertical: 11,
+    paddingHorizontal: 20,
+  },
+  mediumText: {
+    fontSize: 14,
+  },
+  large: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+  },
+  largeText: {
+    fontSize: 16,
+  },
+});
+
+const textSizeStyles = {
+  small: styles.smallText,
+  medium: styles.mediumText,
+  large: styles.largeText,
+};