@fabio.caffarello/react-design-system 1.6.0 → 1.7.0

package/src/ui/molecules/SidebarGroup/SidebarGroup.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import type { HTMLAttributes, ReactNode } from "react";
+import { ChevronRight } from "lucide-react";
 import { Text } from "../../atoms";
 import Collapsible from "../../atoms/Collapsible/Collapsible";
 import { SIDEBAR_TOKENS } from "../../tokens/sidebar";
 
 export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
   title?: string;
+  titleIcon?: ReactNode; // Optional icon for the title
   children: ReactNode;
   collapsible?: boolean;
   defaultCollapsed?: boolean;
@@ -32,6 +34,7 @@ export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
  */
 export default function SidebarGroup({
   title,
+  titleIcon,
   children,
   collapsible = false,
   defaultCollapsed = false,
@@ -45,38 +48,13 @@ export default function SidebarGroup({
   const baseClasses = ["space-y-1"];
   const classes = [...baseClasses, className].filter(Boolean).join(" ");
 
-  // Chevron icon component
+  // Chevron icon component using lucide-react
   const ChevronIcon = ({ isOpen }: { isOpen: boolean }) => (
-    <svg
-      className={`h-4 w-4 transition-transform duration-200 ${
+    <ChevronRight
+      className={`${SIDEBAR_TOKENS.chevron.size} ${SIDEBAR_TOKENS.chevron.color} transition-transform duration-200 ${
         isOpen ? 'rotate-90' : ''
       }`}
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M9 5l7 7-7 7"
-      />
-    </svg>
-  );
-
-  // Title content with optional chevron
-  const titleContent = (
-    <>
-      <Text
-        as="h3"
-        className={`${SIDEBAR_TOKENS.text.xs} font-semibold ${SIDEBAR_TOKENS.colors.groupTitle} uppercase tracking-wider`}
-      >
-        {title}
-      </Text>
-      {collapsible && showChevron && (
-        <ChevronIcon isOpen={collapsed !== undefined ? !collapsed : !defaultCollapsed} />
-      )}
-    </>
+    />
   );
 
   // If collapsible and has title, use Collapsible component
@@ -88,15 +66,24 @@ export default function SidebarGroup({
         onOpenChange={(open) => onCollapseChange?.(!open)}
         storageKey={storageKey}
         trigger={
-          <div className={`${SIDEBAR_TOKENS.spacing.groupTitlePadding} flex items-center justify-between w-full`}>
-            <Text
-              as="h3"
-              className={`${SIDEBAR_TOKENS.text.xs} font-semibold ${SIDEBAR_TOKENS.colors.groupTitle} uppercase tracking-wider`}
-            >
-              {title}
-            </Text>
+          <div className={`${SIDEBAR_TOKENS.spacing.groupTitlePadding} flex items-center justify-between w-full hover:bg-gray-50 rounded-md transition-colors cursor-pointer`}>
+            <div className="flex items-center gap-2">
+              {titleIcon && (
+                <span className={`${SIDEBAR_TOKENS.icon.md} ${SIDEBAR_TOKENS.colors.groupTitle}`}>
+                  {titleIcon}
+                </span>
+              )}
+              <Text
+                as="h3"
+                className={`${SIDEBAR_TOKENS.text.xs} font-semibold ${SIDEBAR_TOKENS.colors.groupTitle} uppercase tracking-wider`}
+              >
+                {title}
+              </Text>
+            </div>
             {showChevron && (
-              <ChevronIcon isOpen={collapsed !== undefined ? !collapsed : !defaultCollapsed} />
+              <span className="ml-2">
+                <ChevronIcon isOpen={collapsed !== undefined ? !collapsed : !defaultCollapsed} />
+              </span>
             )}
           </div>
         }
@@ -112,7 +99,12 @@ export default function SidebarGroup({
   return (
     <div className={classes} {...props}>
       {title && (
-        <div className={SIDEBAR_TOKENS.spacing.groupTitlePadding}>
+        <div className={`${SIDEBAR_TOKENS.spacing.groupTitlePadding} flex items-center gap-2`}>
+          {titleIcon && (
+            <span className={`${SIDEBAR_TOKENS.icon.md} ${SIDEBAR_TOKENS.colors.groupTitle}`}>
+              {titleIcon}
+            </span>
+          )}
           <Text
             as="h3"
             className={`${SIDEBAR_TOKENS.text.xs} font-semibold ${SIDEBAR_TOKENS.colors.groupTitle} uppercase tracking-wider`}

package/src/ui/providers/ThemeProvider.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import { COLOR_TOKENS_LIGHT, COLOR_TOKENS_DARK, type ColorRole, type SemanticColor } from '../tokens/colors';
+import type { ThemeMode } from '../tokens/tokens.factory';
+
+export interface ThemeContextValue {
+  theme: ThemeMode;
+  toggleTheme: () => void;
+  setTheme: (theme: ThemeMode) => void;
+  colors: Record<ColorRole, SemanticColor>;
+  isDark: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: ThemeMode;
+  storageKey?: string;
+}
+
+/**
+ * ThemeProvider Component
+ * 
+ * Provides theme context to the application.
+ * Uses Strategy Pattern for different theme strategies (light, dark).
+ * Uses Observer Pattern to notify components about theme changes.
+ * 
+ * @example
+ * ```tsx
+ * <ThemeProvider defaultTheme="light">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export function ThemeProvider({
+  children,
+  defaultTheme = 'light',
+  storageKey = 'theme',
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<ThemeMode>(() => {
+    if (typeof window === 'undefined') {
+      return defaultTheme;
+    }
+
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === 'light' || stored === 'dark') {
+        return stored;
+      }
+    } catch (error) {
+      console.warn('Failed to read theme from localStorage:', error);
+    }
+
+    return defaultTheme;
+  });
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(storageKey, theme);
+    } catch (error) {
+      console.warn('Failed to save theme to localStorage:', error);
+    }
+
+    // Apply theme class to document root
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(theme);
+  }, [theme, storageKey]);
+
+  const toggleTheme = () => {
+    setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));
+  };
+
+  const setTheme = (newTheme: ThemeMode) => {
+    setThemeState(newTheme);
+  };
+
+  const colors = theme === 'light' ? COLOR_TOKENS_LIGHT : COLOR_TOKENS_DARK;
+
+  const value: ThemeContextValue = {
+    theme,
+    toggleTheme,
+    setTheme,
+    colors,
+    isDark: theme === 'dark',
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+/**
+ * Hook to use theme context
+ */
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}

package/src/ui/tokens/breakpoints.ts

@@ -0,0 +1,71 @@
+/**
+ * Breakpoint Tokens
+ * 
+ * Responsive breakpoints for consistent media queries.
+ * Uses Factory Pattern for type-safe breakpoint creation.
+ */
+
+export type BreakpointName = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export interface BreakpointToken {
+  name: BreakpointName;
+  minWidth: number;
+  px: string;
+  rem: string;
+  tailwind: string;
+}
+
+/**
+ * Breakpoint Token Factory
+ * Creates breakpoint tokens with consistent values
+ */
+export class BreakpointTokenFactory {
+  /**
+   * Create breakpoint token
+   */
+  static create(name: BreakpointName): BreakpointToken {
+    const breakpointMap: Record<BreakpointName, { minWidth: number; tailwind: string }> = {
+      sm: { minWidth: 640, tailwind: 'sm' },
+      md: { minWidth: 768, tailwind: 'md' },
+      lg: { minWidth: 1024, tailwind: 'lg' },
+      xl: { minWidth: 1280, tailwind: 'xl' },
+      '2xl': { minWidth: 1536, tailwind: '2xl' },
+    };
+
+    const config = breakpointMap[name];
+    return {
+      name,
+      minWidth: config.minWidth,
+      px: `${config.minWidth}px`,
+      rem: `${config.minWidth / 16}rem`,
+      tailwind: config.tailwind,
+    };
+  }
+}
+
+/**
+ * Pre-defined breakpoint tokens
+ */
+export const BREAKPOINT_TOKENS: Record<BreakpointName, BreakpointToken> = {
+  sm: BreakpointTokenFactory.create('sm'),
+  md: BreakpointTokenFactory.create('md'),
+  lg: BreakpointTokenFactory.create('lg'),
+  xl: BreakpointTokenFactory.create('xl'),
+  '2xl': BreakpointTokenFactory.create('2xl'),
+} as const;
+
+/**
+ * Helper function to get breakpoint token
+ */
+export function getBreakpoint(name: BreakpointName): BreakpointToken {
+  return BREAKPOINT_TOKENS[name];
+}
+
+/**
+ * Helper function to create media query string
+ */
+export function getMediaQuery(name: BreakpointName, direction: 'min' | 'max' = 'min'): string {
+  const breakpoint = BREAKPOINT_TOKENS[name];
+  const operator = direction === 'min' ? 'min-width' : 'max-width';
+  return `@media (${operator}: ${breakpoint.px})`;
+}

package/src/ui/tokens/colors.ts

@@ -0,0 +1,250 @@
+/**
+ * Color Tokens
+ * 
+ * Semantic color system for consistent theming.
+ * Uses Strategy Pattern for different color strategies (light, dark, custom).
+ */
+
+export type ColorRole = 
+  | 'primary' 
+  | 'secondary' 
+  | 'success' 
+  | 'warning' 
+  | 'error' 
+  | 'info'
+  | 'neutral';
+
+export type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+
+export interface ColorToken {
+  hex: string;
+  rgb: string;
+  tailwind: string;
+}
+
+export interface SemanticColor {
+  light: ColorToken;
+  DEFAULT: ColorToken;
+  dark: ColorToken;
+  contrast: ColorToken;
+}
+
+export interface ColorPalette {
+  [key: number]: ColorToken;
+}
+
+/**
+ * Color Strategy Interface
+ * Strategy Pattern for different color generation strategies
+ */
+export interface ColorStrategy {
+  generatePrimary(): SemanticColor;
+  generateSecondary(): SemanticColor;
+  generateSuccess(): SemanticColor;
+  generateWarning(): SemanticColor;
+  generateError(): SemanticColor;
+  generateInfo(): SemanticColor;
+  generateNeutral(): SemanticColor;
+}
+
+/**
+ * Light Theme Color Strategy
+ */
+export class LightColorStrategy implements ColorStrategy {
+  generatePrimary(): SemanticColor {
+    return {
+      light: { hex: '#818cf8', rgb: '129, 140, 248', tailwind: 'indigo-400' },
+      DEFAULT: { hex: '#6366f1', rgb: '99, 102, 241', tailwind: 'indigo-500' },
+      dark: { hex: '#4f46e5', rgb: '79, 70, 229', tailwind: 'indigo-600' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+
+  generateSecondary(): SemanticColor {
+    return {
+      light: { hex: '#a78bfa', rgb: '167, 139, 250', tailwind: 'violet-400' },
+      DEFAULT: { hex: '#8b5cf6', rgb: '139, 92, 246', tailwind: 'violet-500' },
+      dark: { hex: '#7c3aed', rgb: '124, 58, 237', tailwind: 'violet-600' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+
+  generateSuccess(): SemanticColor {
+    return {
+      light: { hex: '#86efac', rgb: '134, 239, 172', tailwind: 'green-300' },
+      DEFAULT: { hex: '#22c55e', rgb: '34, 197, 94', tailwind: 'green-500' },
+      dark: { hex: '#16a34a', rgb: '22, 163, 74', tailwind: 'green-600' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+
+  generateWarning(): SemanticColor {
+    return {
+      light: { hex: '#fde047', rgb: '253, 224, 71', tailwind: 'yellow-300' },
+      DEFAULT: { hex: '#eab308', rgb: '234, 179, 8', tailwind: 'yellow-500' },
+      dark: { hex: '#ca8a04', rgb: '202, 138, 4', tailwind: 'yellow-600' },
+      contrast: { hex: '#000000', rgb: '0, 0, 0', tailwind: 'black' },
+    };
+  }
+
+  generateError(): SemanticColor {
+    return {
+      light: { hex: '#fca5a5', rgb: '252, 165, 165', tailwind: 'red-300' },
+      DEFAULT: { hex: '#ef4444', rgb: '239, 68, 68', tailwind: 'red-500' },
+      dark: { hex: '#dc2626', rgb: '220, 38, 38', tailwind: 'red-600' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+
+  generateInfo(): SemanticColor {
+    return {
+      light: { hex: '#93c5fd', rgb: '147, 197, 253', tailwind: 'blue-300' },
+      DEFAULT: { hex: '#3b82f6', rgb: '59, 130, 246', tailwind: 'blue-500' },
+      dark: { hex: '#2563eb', rgb: '37, 99, 235', tailwind: 'blue-600' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+
+  generateNeutral(): SemanticColor {
+    return {
+      light: { hex: '#f3f4f6', rgb: '243, 244, 246', tailwind: 'gray-100' },
+      DEFAULT: { hex: '#6b7280', rgb: '107, 114, 128', tailwind: 'gray-500' },
+      dark: { hex: '#374151', rgb: '55, 65, 81', tailwind: 'gray-700' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+}
+
+/**
+ * Dark Theme Color Strategy
+ */
+export class DarkColorStrategy implements ColorStrategy {
+  generatePrimary(): SemanticColor {
+    return {
+      light: { hex: '#6366f1', rgb: '99, 102, 241', tailwind: 'indigo-500' },
+      DEFAULT: { hex: '#818cf8', rgb: '129, 140, 248', tailwind: 'indigo-400' },
+      dark: { hex: '#a5b4fc', rgb: '165, 180, 252', tailwind: 'indigo-300' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+
+  generateSecondary(): SemanticColor {
+    return {
+      light: { hex: '#8b5cf6', rgb: '139, 92, 246', tailwind: 'violet-500' },
+      DEFAULT: { hex: '#a78bfa', rgb: '167, 139, 250', tailwind: 'violet-400' },
+      dark: { hex: '#c4b5fd', rgb: '196, 181, 253', tailwind: 'violet-300' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+
+  generateSuccess(): SemanticColor {
+    return {
+      light: { hex: '#22c55e', rgb: '34, 197, 94', tailwind: 'green-500' },
+      DEFAULT: { hex: '#4ade80', rgb: '74, 222, 128', tailwind: 'green-400' },
+      dark: { hex: '#86efac', rgb: '134, 239, 172', tailwind: 'green-300' },
+      contrast: { hex: '#000000', rgb: '0, 0, 0', tailwind: 'black' },
+    };
+  }
+
+  generateWarning(): SemanticColor {
+    return {
+      light: { hex: '#eab308', rgb: '234, 179, 8', tailwind: 'yellow-500' },
+      DEFAULT: { hex: '#facc15', rgb: '250, 204, 21', tailwind: 'yellow-400' },
+      dark: { hex: '#fde047', rgb: '253, 224, 71', tailwind: 'yellow-300' },
+      contrast: { hex: '#000000', rgb: '0, 0, 0', tailwind: 'black' },
+    };
+  }
+
+  generateError(): SemanticColor {
+    return {
+      light: { hex: '#ef4444', rgb: '239, 68, 68', tailwind: 'red-500' },
+      DEFAULT: { hex: '#f87171', rgb: '248, 113, 113', tailwind: 'red-400' },
+      dark: { hex: '#fca5a5', rgb: '252, 165, 165', tailwind: 'red-300' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+
+  generateInfo(): SemanticColor {
+    return {
+      light: { hex: '#3b82f6', rgb: '59, 130, 246', tailwind: 'blue-500' },
+      DEFAULT: { hex: '#60a5fa', rgb: '96, 165, 250', tailwind: 'blue-400' },
+      dark: { hex: '#93c5fd', rgb: '147, 197, 253', tailwind: 'blue-300' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+
+  generateNeutral(): SemanticColor {
+    return {
+      light: { hex: '#374151', rgb: '55, 65, 81', tailwind: 'gray-700' },
+      DEFAULT: { hex: '#9ca3af', rgb: '156, 163, 175', tailwind: 'gray-400' },
+      dark: { hex: '#d1d5db', rgb: '209, 213, 219', tailwind: 'gray-300' },
+      contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
+    };
+  }
+}
+
+/**
+ * Color Token Factory
+ * Uses Strategy Pattern to generate colors based on theme
+ */
+export class ColorTokenFactory {
+  private strategy: ColorStrategy;
+
+  constructor(strategy: ColorStrategy) {
+    this.strategy = strategy;
+  }
+
+  /**
+   * Set color strategy
+   */
+  setStrategy(strategy: ColorStrategy): void {
+    this.strategy = strategy;
+  }
+
+  /**
+   * Generate semantic color palette
+   */
+  generatePalette(): Record<ColorRole, SemanticColor> {
+    return {
+      primary: this.strategy.generatePrimary(),
+      secondary: this.strategy.generateSecondary(),
+      success: this.strategy.generateSuccess(),
+      warning: this.strategy.generateWarning(),
+      error: this.strategy.generateError(),
+      info: this.strategy.generateInfo(),
+      neutral: this.strategy.generateNeutral(),
+    };
+  }
+}
+
+/**
+ * Light theme colors (default)
+ */
+const lightFactory = new ColorTokenFactory(new LightColorStrategy());
+export const COLOR_TOKENS_LIGHT = lightFactory.generatePalette();
+
+/**
+ * Dark theme colors
+ */
+const darkFactory = new ColorTokenFactory(new DarkColorStrategy());
+export const COLOR_TOKENS_DARK = darkFactory.generatePalette();
+
+/**
+ * Default color tokens (light theme)
+ */
+export const COLOR_TOKENS = COLOR_TOKENS_LIGHT;
+
+/**
+ * Helper function to get color token
+ */
+export function getColor(role: ColorRole, shade: 'light' | 'DEFAULT' | 'dark' = 'DEFAULT'): ColorToken {
+  return COLOR_TOKENS[role][shade];
+}
+
+/**
+ * Helper function to get color as Tailwind class
+ */
+export function getColorClass(role: ColorRole, shade: 'light' | 'DEFAULT' | 'dark' = 'DEFAULT', type: 'text' | 'bg' | 'border' = 'text'): string {
+  const token = COLOR_TOKENS[role][shade];
+  return `${type}-${token.tailwind}`;
+}

package/src/ui/tokens/sidebar.ts

@@ -25,9 +25,9 @@ export const SIDEBAR_TOKENS = {
   spacing: {
     itemPaddingX: 'px-4',           // 16px horizontal padding for items
     itemPaddingY: 'py-2',          // 8px vertical padding for items
-    nestedIndent: 'pl-8',          // 32px for nested items (level 1)
-    nestedIndentLevel2: 'pl-12',   // 48px for nested items (level 2)
-    nestedIndentLevel3: 'pl-16',    // 64px for nested items (level 3)
+    nestedIndent: 'pl-6',          // 24px for nested items (level 1)
+    nestedIndentLevel2: 'pl-10',   // 40px for nested items (level 2)
+    nestedIndentLevel3: 'pl-14',    // 56px for nested items (level 3)
     groupTitlePadding: 'px-4 py-2', // Padding for group titles
     iconMargin: 'mr-3',            // 12px margin between icon and text
   },
@@ -45,6 +45,12 @@ export const SIDEBAR_TOKENS = {
     },
     groupTitle: 'text-gray-500',
   },
+  
+  // Chevron (for collapsible groups)
+  chevron: {
+    size: 'h-3 w-3',      // 12px (reduced from h-4 w-4)
+    color: 'text-gray-400', // Subtle gray color
+  },
 } as const;
 
 /**

package/src/ui/tokens/spacing.ts

@@ -0,0 +1,127 @@
+/**
+ * Spacing Tokens
+ * 
+ * Centralized spacing scale based on 4px base unit.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+
+export type SpacingScale = 
+  | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 64 | 80 | 96;
+
+export interface SpacingToken {
+  value: number;
+  rem: string;
+  px: string;
+  tailwind: string;
+}
+
+/**
+ * Spacing Token Factory
+ * Creates spacing tokens with consistent naming and values
+ */
+export class SpacingTokenFactory {
+  private static readonly BASE_UNIT = 4; // 4px base
+
+  /**
+   * Create a spacing token from scale value
+   */
+  static create(scale: SpacingScale): SpacingToken {
+    const px = scale * this.BASE_UNIT;
+    const rem = px / 16; // 16px = 1rem
+
+    return {
+      value: px,
+      rem: `${rem}rem`,
+      px: `${px}px`,
+      tailwind: this.getTailwindClass(scale),
+    };
+  }
+
+  /**
+   * Get Tailwind class for spacing value
+   */
+  private static getTailwindClass(scale: SpacingScale): string {
+    const tailwindMap: Record<SpacingScale, string> = {
+      0: '0',
+      1: '1',   // 4px
+      2: '2',   // 8px
+      3: '3',   // 12px
+      4: '4',   // 16px
+      5: '5',   // 20px
+      6: '6',   // 24px
+      8: '8',   // 32px
+      10: '10', // 40px
+      12: '12', // 48px
+      16: '16', // 64px
+      20: '20', // 80px
+      24: '24', // 96px
+      32: '32', // 128px
+      40: '40', // 160px
+      48: '48', // 192px
+      64: '64', // 256px
+      80: '80', // 320px
+      96: '96', // 384px
+    };
+
+    return tailwindMap[scale] || String(scale);
+  }
+}
+
+/**
+ * Pre-defined spacing tokens
+ */
+export const SPACING_TOKENS = {
+  // Micro spacing (0-12px)
+  none: SpacingTokenFactory.create(0),
+  xs: SpacingTokenFactory.create(1),   // 4px
+  sm: SpacingTokenFactory.create(2),   // 8px
+  md: SpacingTokenFactory.create(3),   // 12px
+  
+  // Standard spacing (16-32px)
+  base: SpacingTokenFactory.create(4), // 16px
+  lg: SpacingTokenFactory.create(6),   // 24px
+  xl: SpacingTokenFactory.create(8),    // 32px
+  
+  // Large spacing (40-64px)
+  '2xl': SpacingTokenFactory.create(10), // 40px
+  '3xl': SpacingTokenFactory.create(12),   // 48px
+  '4xl': SpacingTokenFactory.create(16),  // 64px
+  
+  // Extra large spacing (80px+)
+  '5xl': SpacingTokenFactory.create(20), // 80px
+  '6xl': SpacingTokenFactory.create(24),  // 96px
+} as const;
+
+/**
+ * Helper function to get spacing value
+ */
+export function getSpacing(scale: keyof typeof SPACING_TOKENS): SpacingToken {
+  return SPACING_TOKENS[scale];
+}
+
+/**
+ * Helper function to get spacing as Tailwind class
+ */
+export function getSpacingClass(scale: keyof typeof SPACING_TOKENS, direction: 'p' | 'm' | 'px' | 'mx' | 'py' | 'my' | 'pt' | 'mt' | 'pr' | 'mr' | 'pb' | 'mb' | 'pl' | 'ml' = 'p'): string {
+  const token = SPACING_TOKENS[scale];
+  const value = token.tailwind;
+  
+  const prefixMap: Record<typeof direction, string> = {
+    p: 'p',
+    m: 'm',
+    px: 'px',
+    mx: 'mx',
+    py: 'py',
+    my: 'my',
+    pt: 'pt',
+    mt: 'mt',
+    pr: 'pr',
+    mr: 'mr',
+    pb: 'pb',
+    mb: 'mb',
+    pl: 'pl',
+    ml: 'ml',
+  };
+
+  return `${prefixMap[direction]}-${value}`;
+}