@urbint/cl 1.0.1

package/src/stories/assets/tutorials.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32"><g clip-path="url(#clip0_10031_177597)"><path fill="#B7F0EF" fill-rule="evenodd" d="M17 7.87059C17 6.48214 17.9812 5.28722 19.3431 5.01709L29.5249 2.99755C31.3238 2.64076 33 4.01717 33 5.85105V22.1344C33 23.5229 32.0188 24.7178 30.6569 24.9879L20.4751 27.0074C18.6762 27.3642 17 25.9878 17 24.1539L17 7.87059Z" clip-rule="evenodd" opacity=".7"/><path fill="#87E6E5" fill-rule="evenodd" d="M1 5.85245C1 4.01857 2.67623 2.64215 4.47507 2.99895L14.6569 5.01848C16.0188 5.28861 17 6.48354 17 7.87198V24.1553C17 25.9892 15.3238 27.3656 13.5249 27.0088L3.34311 24.9893C1.98119 24.7192 1 23.5242 1 22.1358V5.85245Z" clip-rule="evenodd"/><path fill="#61C1FD" fill-rule="evenodd" d="M15.543 5.71289C15.543 5.71289 16.8157 5.96289 17.4002 6.57653C17.9847 7.19016 18.4521 9.03107 18.4521 9.03107C18.4521 9.03107 18.4521 25.1106 18.4521 26.9629C18.4521 28.8152 19.3775 31.4174 19.3775 31.4174L17.4002 28.8947L16.2575 31.4174C16.2575 31.4174 15.543 29.0765 15.543 27.122C15.543 25.1674 15.543 5.71289 15.543 5.71289Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_10031_177597"><rect width="32" height="32" fill="#fff" transform="translate(0.5)"/></clipPath></defs></svg>

package/src/stories/assets/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#ED1D24" d="M31.3313 8.44657C30.9633 7.08998 29.8791 6.02172 28.5022 5.65916C26.0067 5.00026 16 5.00026 16 5.00026C16 5.00026 5.99333 5.00026 3.4978 5.65916C2.12102 6.02172 1.03665 7.08998 0.668678 8.44657C0 10.9053 0 16.0353 0 16.0353C0 16.0353 0 21.1652 0.668678 23.6242C1.03665 24.9806 2.12102 26.0489 3.4978 26.4116C5.99333 27.0703 16 27.0703 16 27.0703C16 27.0703 26.0067 27.0703 28.5022 26.4116C29.8791 26.0489 30.9633 24.9806 31.3313 23.6242C32 21.1652 32 16.0353 32 16.0353C32 16.0353 32 10.9053 31.3313 8.44657Z"/><path fill="#fff" d="M12.7266 20.6934L21.0902 16.036L12.7266 11.3781V20.6934Z"/></svg>

package/src/styles/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Urbint Component Library - Styles Export
+ */
+
+export * from './tokens';
+export * from './unistyles';
+

package/src/styles/tokens.ts

@@ -0,0 +1,318 @@
+/**
+ * Urbint Design System Tokens
+ * Based on the Urbint Design System specifications
+ */
+
+// =============================================================================
+// COLORS
+// =============================================================================
+
+export const colors = {
+  // Brand Colors
+  brand: {
+    navy: '#003F53',
+    blue: '#00A0CC',
+  },
+
+  // Text Colors
+  text: {
+    default: '#1A1A1A',
+    secondary: '#6B7280',
+    disabled: '#9CA3AF',
+    onDark: '#FFFFFF',
+    inverse: '#FFFFFF',
+  },
+
+  // Background Colors
+  background: {
+    default: '#FFFFFF',
+    secondary: '#F9FAFB',
+    tertiary: '#F3F4F6',
+    inverse: '#1A1A1A',
+    hover: '#F5F6F7',
+  },
+
+  // Border Colors
+  border: {
+    disabled: '#E9E9E9',
+    default: '#BDC1C3',
+    hover: '#ABB2B4',
+    active: '#00A0CC',
+    danger: '#E7183E',
+  },
+
+  // Badge Colors
+  badge: {
+    gray: '#F8F8F8',
+    red: '#CF3D3D',
+    orange: '#B75E0B',
+    yellow: '#E8BA30',
+    blue: '#3E70D4',
+    green: '#238914',
+    darkGray: '#3C4F55',
+    neonGreen: '#088574',
+    purple: '#9747FF',
+  },
+
+  // Primary Button Colors
+  primary: {
+    default: '#00A0CC',
+    hover: '#008BB3',
+    active: '#007799',
+    disabled: '#99D4E6',
+  },
+
+  // Secondary Button Colors
+  secondary: {
+    default: '#F3F4F6',
+    hover: '#E5E7EB',
+    active: '#E9E9E9',
+    disabled: '#ECECEC',
+  },
+
+  // Ghost Button Colors
+  ghost: {
+    default: 'transparent',
+    hover: 'rgba(4, 30, 37, 0.03)',
+    active: 'rgba(4, 30, 37, 0.07)',
+    disabled: 'transparent',
+    disabledOpacity: 0.38,
+  },
+
+  // Danger Button Colors
+  danger: {
+    default: '#E7183E',
+    hover: '#EB3D5D',
+    active: '#D7183C',
+    disabled: '#E697A6',
+  },
+
+  // Feedback Colors - Content
+  feedback: {
+    info: {
+      content: '#3C87DD',
+      background: '#F2F7FD',
+      border: '#67A2E4',
+    },
+    success: {
+      content: '#2BA329',
+      background: '#F4FBF4',
+      border: '#74CA72',
+    },
+    warning: {
+      content: '#D69600',
+      background: '#FFF8E5',
+      border: '#E8BA30',
+    },
+    error: {
+      content: '#E7183E',
+      background: '#FEF6F7',
+      border: '#ED506C',
+    },
+  },
+
+  // Utility Colors
+  white: '#FFFFFF',
+  black: '#000000',
+  transparent: 'transparent',
+} as const;
+
+// =============================================================================
+// SPACING
+// =============================================================================
+
+export const spacing = {
+  // Semantic names (recommended)
+  none: 0,
+  xs: 4,        // 0.25rem
+  sm: 8,        // 0.5rem
+  md: 12,       // 0.75rem
+  lg: 16,       // 1rem
+  xl: 24,       // 1.5rem
+  '2xl': 32,    // 2rem
+  '3xl': 48,    // 3rem
+  '4xl': 64,    // 4rem
+  '5xl': 72,    // 4.5rem
+  
+  // Multiplier names (legacy)
+  '0.5x': 2,    // 0.125rem
+  base: 4,      // 0.25rem
+  '2x': 8,      // 0.5rem
+  '3x': 12,     // 0.75rem
+  '4x': 16,     // 1rem
+  '6x': 24,     // 1.5rem
+  '8x': 32,     // 2rem
+  '12x': 48,    // 3rem
+  '18x': 72,    // 4.5rem
+} as const;
+
+export type SpacingToken = keyof typeof spacing;
+
+// Gap function for theme
+export const gap = (multiplier: number): number => multiplier * 4;
+
+// =============================================================================
+// TYPOGRAPHY
+// =============================================================================
+
+export const typography = {
+  fontFamily: {
+    primary: 'Inter',
+    mono: 'monospace',
+  },
+
+  fontSize: {
+    h1: 26,           // 1.625rem - PageHeading
+    h2: 22,           // 1.375rem - SectionHeading
+    h3: 20,           // 1.25rem - SectionSubheading
+    h4: 18,           // 1.125rem - Subheading
+    actionLabel: 16,  // 1rem - ActionLabel
+    body: 16,         // 1rem - BodyText
+    componentLabel: 14, // 0.875rem - ComponentLabels
+    caption: 13,      // 0.813rem - CaptionText
+    small: 12,        // 0.75rem - Small
+  },
+
+  fontWeight: {
+    regular: '400' as const,
+    medium: '500' as const,
+    semiBold: '600' as const,
+    bold: '700' as const,
+  },
+
+  lineHeight: {
+    tight: 1.3,       // 130%
+    normal: 1.5,      // 150%
+    relaxed: 1.6,     // 160%
+  },
+} as const;
+
+// =============================================================================
+// ELEVATION / SHADOWS
+// =============================================================================
+
+export const elevation = {
+  '-10': {
+    // Inner shadow - used for mouse-down states
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 0,
+  },
+  '-5': {
+    // No shadow - base for animating elements with shadows
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  '5': {
+    // Slight hint of shadow (instead of border)
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  '10': {
+    // Small elements like buttons and tooltips
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  '20': {
+    // Medium-sized elements like nav-bars and cards
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  '30': {
+    // Overlay panels and toasts
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  '40': {
+    // Modals
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.2,
+    shadowRadius: 24,
+    elevation: 16,
+  },
+} as const;
+
+// =============================================================================
+// BORDER RADIUS
+// =============================================================================
+
+export const borderRadius = {
+  none: 0,
+  sm: 2,
+  md: 4,
+  lg: 8,
+  xl: 12,
+  '2xl': 16,
+  '3xl': 24,
+  full: 9999,
+} as const;
+
+// =============================================================================
+// BREAKPOINTS
+// =============================================================================
+
+export const breakpoints = {
+  xs: 0,
+  sm: 480,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+} as const;
+
+// =============================================================================
+// Z-INDEX
+// =============================================================================
+
+export const zIndex = {
+  hide: -1,
+  auto: 'auto' as const,
+  base: 0,
+  docked: 10,
+  dropdown: 1000,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800,
+} as const;
+
+// =============================================================================
+// ANIMATION
+// =============================================================================
+
+export const animation = {
+  duration: {
+    fast: 150,
+    normal: 250,
+    slow: 350,
+  },
+  easing: {
+    easeIn: 'ease-in',
+    easeOut: 'ease-out',
+    easeInOut: 'ease-in-out',
+    linear: 'linear',
+  },
+} as const;
+

package/src/styles/unistyles.ts

@@ -0,0 +1,254 @@
+/**
+ * Urbint Component Library - Unistyles Configuration
+ * Enterprise-ready design system with light and dark themes
+ */
+
+import { StyleSheet } from 'react-native-unistyles';
+import {
+  colors,
+  spacing,
+  gap,
+  typography,
+  elevation,
+  borderRadius,
+  zIndex,
+  animation,
+  breakpoints,
+} from './tokens';
+
+// =============================================================================
+// LIGHT THEME
+// =============================================================================
+
+const lightTheme = {
+  colors: {
+    // Brand
+    brand: colors.brand,
+
+    // Text
+    text: {
+      primary: colors.text.default,
+      secondary: colors.text.secondary,
+      disabled: colors.text.disabled,
+      inverse: colors.text.onDark,
+    },
+
+    // Background
+    background: {
+      primary: colors.background.default,
+      secondary: colors.background.secondary,
+      tertiary: colors.background.tertiary,
+      inverse: colors.background.inverse,
+    },
+
+    // Border
+    border: colors.border,
+
+    // Badge
+    badge: colors.badge,
+
+    // Button variants
+    button: {
+      primary: colors.primary,
+      secondary: colors.secondary,
+      ghost: colors.ghost,
+      danger: colors.danger,
+    },
+
+    // Feedback
+    feedback: colors.feedback,
+
+    // Utility
+    white: colors.white,
+    black: colors.black,
+    transparent: colors.transparent,
+  },
+
+  spacing,
+  gap,
+  typography,
+  elevation,
+  borderRadius,
+  zIndex,
+  animation,
+} as const;
+
+// =============================================================================
+// DARK THEME
+// =============================================================================
+
+const darkTheme = {
+  colors: {
+    // Brand (same in dark mode)
+    brand: colors.brand,
+
+    // Text (inverted for dark mode)
+    text: {
+      primary: '#F9FAFB',
+      secondary: '#9CA3AF',
+      disabled: '#6B7280',
+      inverse: colors.text.default,
+    },
+
+    // Background (inverted for dark mode)
+    background: {
+      primary: '#111827',
+      secondary: '#1F2937',
+      tertiary: '#374151',
+      inverse: colors.background.default,
+    },
+
+    // Border (adjusted for dark mode)
+    border: {
+      disabled: '#374151',
+      default: '#4B5563',
+      hover: '#6B7280',
+      active: '#00A0CC',
+      danger: '#EF4444',
+    },
+
+    // Badge (slightly adjusted for dark mode visibility)
+    badge: {
+      gray: '#374151',
+      red: '#DC2626',
+      orange: '#EA580C',
+      yellow: '#CA8A04',
+      blue: '#2563EB',
+      green: '#16A34A',
+      darkGray: '#1F2937',
+      neonGreen: '#10B981',
+      purple: '#7C3AED',
+    },
+
+    // Button variants (adjusted for dark mode)
+    button: {
+      primary: {
+        default: '#00A0CC',
+        hover: '#0CB8E8',
+        active: '#00D4FF',
+        disabled: '#1E5F73',
+      },
+      secondary: {
+        default: '#374151',
+        hover: '#4B5563',
+        active: '#6B7280',
+        disabled: '#1F2937',
+      },
+      ghost: {
+        default: 'transparent',
+        hover: 'rgba(255, 255, 255, 0.05)',
+        active: 'rgba(255, 255, 255, 0.1)',
+        disabled: 'transparent',
+        disabledOpacity: 0.38,
+      },
+      danger: {
+        default: '#DC2626',
+        hover: '#EF4444',
+        active: '#B91C1C',
+        disabled: '#7F1D1D',
+      },
+    },
+
+    // Feedback (adjusted for dark mode)
+    feedback: {
+      info: {
+        content: '#60A5FA',
+        background: '#1E3A5F',
+        border: '#3B82F6',
+      },
+      success: {
+        content: '#4ADE80',
+        background: '#14532D',
+        border: '#22C55E',
+      },
+      warning: {
+        content: '#FBBF24',
+        background: '#713F12',
+        border: '#F59E0B',
+      },
+      error: {
+        content: '#F87171',
+        background: '#7F1D1D',
+        border: '#EF4444',
+      },
+    },
+
+    // Utility
+    white: colors.white,
+    black: colors.black,
+    transparent: colors.transparent,
+  },
+
+  spacing,
+  gap,
+  typography,
+  elevation: {
+    ...elevation,
+    // Adjust shadows for dark mode
+    '5': {
+      ...elevation['5'],
+      shadowColor: '#000000',
+      shadowOpacity: 0.3,
+    },
+    '10': {
+      ...elevation['10'],
+      shadowColor: '#000000',
+      shadowOpacity: 0.4,
+    },
+    '20': {
+      ...elevation['20'],
+      shadowColor: '#000000',
+      shadowOpacity: 0.5,
+    },
+    '30': {
+      ...elevation['30'],
+      shadowColor: '#000000',
+      shadowOpacity: 0.6,
+    },
+    '40': {
+      ...elevation['40'],
+      shadowColor: '#000000',
+      shadowOpacity: 0.7,
+    },
+  },
+  borderRadius,
+  zIndex,
+  animation,
+} as const;
+
+// =============================================================================
+// THEME CONFIGURATION
+// =============================================================================
+
+const appThemes = {
+  light: lightTheme,
+  dark: darkTheme,
+} as const;
+
+// =============================================================================
+// TYPESCRIPT TYPES
+// =============================================================================
+
+type AppThemes = typeof appThemes;
+type AppBreakpoints = typeof breakpoints;
+
+declare module 'react-native-unistyles' {
+  export interface UnistylesThemes extends AppThemes {}
+  export interface UnistylesBreakpoints extends AppBreakpoints {}
+}
+
+// =============================================================================
+// CONFIGURE UNISTYLES
+// =============================================================================
+
+StyleSheet.configure({
+  themes: appThemes,
+  breakpoints,
+  settings: {
+    adaptiveThemes: false,
+    initialTheme: 'light',
+  },
+});
+
+export { lightTheme, darkTheme, appThemes };
+

package/src/utils/createContext.tsx

@@ -0,0 +1,25 @@
+/**
+ * Create Context Utility
+ * Type-safe context creation with error handling
+ */
+
+import React, { createContext, useContext } from 'react';
+
+export function createContextScope<T>(
+  name: string,
+  defaultValue?: T
+): [React.Context<T | undefined>, () => T, React.Provider<T | undefined>] {
+  const Context = createContext<T | undefined>(defaultValue);
+  Context.displayName = name;
+
+  function useContextScope(): T {
+    const context = useContext(Context);
+    if (context === undefined) {
+      throw new Error(`use${name} must be used within a ${name}Provider`);
+    }
+    return context;
+  }
+
+  return [Context, useContextScope, Context.Provider];
+}
+

package/src/utils/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Utilities Export
+ */
+
+export * from './createContext';
+export * from './mergeRefs';
+

package/src/utils/mergeRefs.ts

@@ -0,0 +1,21 @@
+/**
+ * Merge Refs Utility
+ * Combines multiple refs into one
+ */
+
+import type { MutableRefObject, RefCallback, Ref } from 'react';
+
+export function mergeRefs<T>(
+  ...refs: (Ref<T> | undefined)[]
+): RefCallback<T> {
+  return (value: T) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        (ref as MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}
+

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "jsx": "react-native",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist"
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}