ComponentLibrary

A comprehensive Swift UI Component Library designed for iOS 17+, iPadOS, macOS 14+, and visionOS. Features modern liquid glass morphism effects, adaptive layouts, and production-ready components.

✨ Features

• 🪟 Glass Effects - iOS 26+ liquid glass morphism with adjustable intensity
• 🎛️ Adaptive Components - Responsive design for iPhone, iPad, Mac, and Vision Pro
• 🎨 Design System - Consistent theming with color, spacing, and typography tokens
• ⚡ Haptic Feedback - Native haptic feedback on iOS
• ♿ Accessibility - Full VoiceOver, Dynamic Type, and reduced motion support
• 🎬 Animations - Rich animation presets and micro-interactions
• 📚 Documentation - Complete DocC documentation

📦 Components

Buttons

• GlassButton - Liquid glass effect button with haptic feedback
• GlassIconButton - Circular icon-only button
• GlassPillButton - Capsule-shaped button for tags/filters

Input

• GlassTextField - Single-line text input
• GlassTextEditor - Multi-line text editor
• GlassSearchField - Animated search input
• GlassSlider / GlassRangeSlider - Custom sliders
• GlassToggle / GlassCheckbox / GlassRadioButton - Selection controls
• GlassDatePicker / GlassTimePicker - Date/time selection

Display

• GlassCard - Glass-styled container
• GlassChip / GlassStatusChip - Tags and status indicators
• GlassAvatar / GlassAvatarGroup - User avatars with status
• GlassEmptyState - Empty state placeholders
• GlassBadge - Notification badges

Navigation

• GlassSidebar - Collapsible sidebar navigation
• GlassTabBar - Custom tab bar
• GlassSegmentedControl - Segmented control
• AdaptiveHeader - Responsive navigation header

Overlays

• GlassModal - Centered modal with backdrop blur
• GlassAlert - Alert dialog
• GlassActionSheet - Bottom action sheet
• GlassPopover - Floating popover with arrow
• GlassTooltip - Simple tooltips
• GlassContextMenu - Context menu

Feedback

• GlassToast - Toast notifications
• GlassLoadingIndicator - Loading spinner
• GlassProgressBar - Progress indicator
• SuccessCheckmark - Animated success indicator

Layout

• AdaptiveStack - Responsive H/V stack
• FlexibleGrid - Auto-adjusting grid
• ResponsiveContainer - Max-width container
• DesktopLayout - Sidebar + content + inspector
• FloatingPanel - Draggable floating panel
• MasonryLayout - Pinterest-style layout

Media

• SwipeGallery - Swipeable gallery
• ImageGallery - Full-featured image gallery with zoom
• Carousel - 3D carousel with perspective

🚀 Installation

Swift Package Manager

Add to your Package.swift:

dependencies: [
    .package(url: "https://github.com/ownerCTI/ComponentLibrary_Web_Swift.git", from: "1.0.0")
]

Or in Xcode: File → Add Package Dependencies → Enter repository URL

📖 Usage

import SwiftUI
import ComponentLibrary

struct ContentView: View {
    @State private var searchText = ""
    @State private var sliderValue = 0.5
    
    var body: some View {
        ZStack {
            // Background gradient
            LinearGradient(
                colors: [.indigo, .purple],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()
            
            VStack(spacing: 20) {
                GlassSearchField(text: $searchText)
                
                GlassButton("Get Started", icon: "arrow.right", style: .primary) {
                    // Action
                }
                
                GlassSlider(value: $sliderValue, showValue: true)
                
                GlassCard {
                    Text("Glass Card Content")
                        .foregroundColor(.white)
                }
            }
            .padding()
        }
    }
}

🎨 Theming

Built-in Themes

ContentView()
    .componentTheme(DarkTheme())  // or LightTheme(), DefaultTheme()

Custom Theme

let brandTheme = CustomThemeBuilder()
    .primaryColor(Color(hex: "FF6B6B"))
    .secondaryColor(Color(hex: "4ECDC4"))
    .accentColor(Color(hex: "FFE66D"))
    .glassTint(Color(hex: "FF6B6B"))
    .cornerRadius(small: 8, medium: 16, large: 24)
    .build()

ContentView()
    .componentTheme(brandTheme)

Design Tokens

// Colors
ColorTokens.accentPrimary
ColorTokens.success
ColorTokens.glassBackground

// Spacing (4pt grid)
SpacingTokens.sm   // 12pt
SpacingTokens.md   // 16pt
SpacingTokens.lg   // 24pt

// Typography
TypographyTokens.headline
TypographyTokens.body

// Radius
RadiusTokens.lg    // 12pt
RadiusTokens.xl    // 16pt

♿ Accessibility

All components include:

• VoiceOver labels and hints
• Dynamic Type support
• Reduced motion support
• High contrast mode
• Minimum 44x44pt touch targets

// Accessibility modifiers
myView.accessible(label: "Submit button", hint: "Double tap to submit form")
myView.minimumTouchTarget()
myView.accessibleAnimation(.spring())

🎬 Animations

// Animation presets
AnimationPresets.snappy
AnimationPresets.bouncy
AnimationPresets.gentle

// Transitions
TransitionPresets.modal
TransitionPresets.toast
TransitionPresets.slideUp

// Effects
myView.shimmer()
myView.pulse()
myView.rippleEffect()
myView.staggeredAnimation(index: 0)

📋 Requirements

• iOS 17.0+ / macOS 14.0+ / visionOS 1.0+
• Xcode 15.0+
• Swift 5.9+

🧪 Testing

swift test

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

---

Made with ❤️ for the Swift community