{"id":28394813,"url":"https://github.com/nemanjavlahovic/floekit","last_synced_at":"2026-03-09T00:31:54.741Z","repository":{"id":294684798,"uuid":"987746487","full_name":"nemanjavlahovic/FloeKit","owner":"nemanjavlahovic","description":"Elegant, modular UI building blocks for SwiftUI — design system, components, and utilities with built-in theming and accessibility","archived":false,"fork":false,"pushed_at":"2025-05-31T22:05:48.000Z","size":10288,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-07T18:54:49.512Z","etag":null,"topics":["design-system","ios","macos","modular-components","swift","swiftui","swiftui-example"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nemanjavlahovic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-21T14:21:29.000Z","updated_at":"2025-06-02T22:16:32.000Z","dependencies_parsed_at":"2025-05-21T16:02:21.631Z","dependency_job_id":null,"html_url":"https://github.com/nemanjavlahovic/FloeKit","commit_stats":null,"previous_names":["nemanjavlahovic/floekit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nemanjavlahovic/FloeKit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjavlahovic%2FFloeKit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjavlahovic%2FFloeKit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjavlahovic%2FFloeKit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjavlahovic%2FFloeKit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nemanjavlahovic","download_url":"https://codeload.github.com/nemanjavlahovic/FloeKit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjavlahovic%2FFloeKit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262166137,"owners_count":23268989,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-system","ios","macos","modular-components","swift","swiftui","swiftui-example"],"created_at":"2025-05-31T19:00:36.201Z","updated_at":"2026-03-09T00:31:54.707Z","avatar_url":"https://github.com/nemanjavlahovic.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FloeKit\n![7a368114-cc08-48e8-99fa-a7b060ece85c](https://github.com/user-attachments/assets/f810b190-6d9c-45f0-8dc9-3642ec033c04)\n\n\u003e **Elegant, modular UI building blocks for SwiftUI**\n\nInspired by floating ice sheets, **FloeKit** provides calm, elegant, and modular UI components designed for composability, design clarity, and reuse. It positions itself as a thoughtful layer *on top of SwiftUI*, offering a consistent design system with built-in theming, spacing, and typography.\n\n![Swift](https://img.shields.io/badge/Swift-5.9+-orange.svg)\n![Platform](https://img.shields.io/badge/Platform-iOS%2015%2B%20%7C%20macOS%2012%2B-blue.svg)\n![SPM](https://img.shields.io/badge/Swift%20Package%20Manager-compatible-brightgreen.svg)\n\n\u003cdetails\u003e\n\u003csummary\u003e📋 Table of Contents\u003c/summary\u003e\n\n- [✨ Features](#-features)\n- [🚀 Installation](#-installation)\n- [🧱 Components](#-components)\n  - [FloeButton](#floebutton)\n  - [FloeTextField](#floetextfield)\n  - [FloeCard](#floecard)\n  - [FloeAvatar](#floeavatar)\n  - [FloeToast](#floetoast-new)\n  - [FloeTabBar](#floetabbar-new)\n  - [FloeSlider](#floeslider-new)\n  - [FloeTextView](#floetextview-new)\n  - [FloeProgressIndicator](#floeprogressindicator-new)\n- [🏗️ Comprehensive Example](#️-comprehensive-example)\n- [🛠️ Utilities](#️-utilities)\n  - [FloeColors](#floecolors)\n  - [FloeFont](#floefont)\n  - [FloeSpacing](#floespacing)\n  - [FloeShadow](#floeshadow)\n- [🗺️ Roadmap](#️-roadmap)\n- [🎨 Theming](#-theming)\n- [📄 License](#-license)\n- [🙏 Acknowledgments](#-acknowledgments)\n\n\u003c/details\u003e\n\n---\n\n## ✨ Features\n\n- **🎨 Consistent Design System** - Unified colors, typography, spacing, and shadows\n- **📱 Cross-Platform** - Works seamlessly on iOS and macOS\n- **🌗 Perfect Dark Mode** - ✅ **Complete** - All components tested and beautiful in both light and dark modes\n- **♿ Accessibility First** - Built-in VoiceOver, Dynamic Type, and comprehensive accessibility support\n- **🏗️ Advanced Architecture** - Result builders, preference keys, haptic feedback, and sophisticated animations\n- **🔧 Highly Customizable** - Override any aspect while maintaining design consistency\n- **⚡ Performance Optimized** - Efficient SwiftUI implementation with smooth 60fps animations\n- **📦 Zero Dependencies** - Pure SwiftUI implementation with no external dependencies\n- **🎯 Production Ready** - Battle-tested components with proper error handling and edge cases\n\n---\n\n## 🚀 Installation\n\n### Swift Package Manager\n\nAdd FloeKit to your project through Xcode:\n\n1. File → Add Package Dependencies\n2. Enter package URL: `https://github.com/nemanjavlahovic/FloeKit`\n3. Select version and add to target\n\nOr add to your `Package.swift`:\n\n```swift\ndependencies: [\n    .package(url: \"https://github.com/nemanjavlahovic/FloeKit\", from: \"0.3.0\")\n]\n```\n\n---\n\n## 🧱 Components\n\n### FloeButton\nSoft, elevated buttons with multiple sizes, loading states, and icon support.\n\n![FloeButton Examples](Documentation/Screenshots/floe_button_ss.png)\n\n```swift\nimport FloeKit\n\n// Basic button\nFloeButton(\"Get Started\") {\n    // Action\n}\n\n// Button with icon and custom styling\n// Note: Parameters can be specified in any order using named parameters\nFloeButton(\"Save\", \n          size: .large,\n          backgroundColor: .blue,\n          textColor: .white,\n          icon: Image(systemName: \"checkmark\")) {\n    // Save action\n}\n\n// Loading state\nFloeButton(\"Processing...\", isLoading: true) {\n    // Action\n}\n```\n\n**Sizes:** `.small`, `.medium`, `.large`  \n**Features:** Loading states, icons, custom colors, accessibility support\n\n---\n\n### FloeTextField\nElegant text input with focus states, icons, validation, and character limits.\n\n![FloeTextField Examples](Documentation/Screenshots/floe_textfield_ss.png)\n\n```swift\n@State private var email = \"\"\n@State private var password = \"\"\n@State private var bio = \"\"\n\n// Basic text field\nFloeTextField(text: $email, placeholder: \"Email address\")\n\n// With icons and validation\nFloeTextField(\n    text: $email,\n    placeholder: \"Enter email\",\n    leadingIcon: Image(systemName: \"envelope\"),\n    errorMessage: \"Invalid email format\"\n)\n\n// Secure field\nFloeTextField(\n    text: $password,\n    placeholder: \"Password\",\n    leadingIcon: Image(systemName: \"lock\"),\n    isSecure: true\n)\n\n// With character limit\nFloeTextField(\n    text: $bio,\n    placeholder: \"Bio\",\n    characterLimit: 150\n)\n```\n\n**Features:** Icons, secure input, validation, character limits, focus states\n\n---\n\n### FloeCard\nClean, elevated containers with consistent shadows and padding.\n\n![FloeCard Examples](Documentation/Screenshots/floe_card_ss.png)\n\n```swift\nFloeCard {\n    VStack {\n        Text(\"Card Title\")\n            .floeFont(.headline)\n        Text(\"Card content goes here\")\n            .floeFont(.body)\n    }\n}\n\n// Custom styling\nFloeCard(backgroundColor: .blue.opacity(0.1),\n         shadowStyle: .elevated,\n         padding: .spacious) {\n    // Content\n}\n```\n\n**Features:** Customizable shadows, padding presets, border support\n\n---\n\n### FloeAvatar\nElegant, customizable avatar components with status indicators and grouping support.\n\n![FloeAvatar Examples](Documentation/Screenshots/floe_avatar_ss.png)\n\n```swift\n// Basic avatars\nFloeAvatar.initials(\"JD\")\nFloeAvatar.icon(\"person.fill\")\nFloeAvatar.placeholder()\n\n// With image\nFloeAvatar(image: Image(\"user-photo\"))\n\n// Different sizes\nFloeAvatar.initials(\"SM\", size: .small)\nFloeAvatar.initials(\"LG\", size: .large)\nFloeAvatar.initials(\"XL\", size: .extraLarge)\n\n// With status indicators\nFloeAvatar.online(initials: \"ON\")\nFloeAvatar(initials: \"AW\", statusIndicator: .away)\nFloeAvatar(initials: \"BY\", statusIndicator: .busy)\nFloeAvatar(initials: \"CT\", statusIndicator: .custom(.purple))\n\n// Custom styling\nFloeAvatar(\n    initials: \"VIP\",\n    backgroundColor: .black,\n    foregroundColor: .yellow,\n    borderColor: .yellow,\n    borderWidth: 2,\n    shadowStyle: .elevated\n)\n\n// Interactive avatars\nFloeAvatar.initials(\"TAP\") {\n    print(\"Avatar tapped!\")\n}\n```\n\n**Grouped Avatars:**\n```swift\n// Stacked avatars with overlap\nFloeAvatarGroup(\n    avatars: [avatar1, avatar2, avatar3],\n    style: .stacked,\n    maxVisible: 3\n)\n\n// Grid layout\nFloeAvatarGroup(\n    avatars: avatarArray,\n    style: .grid(columns: 2)\n)\n```\n\n**Sizes:** `.small`, `.medium`, `.large`, `.extraLarge`  \n**Status:** Online, offline, away, busy, custom colors  \n**Features:** Images, initials, SF Symbols, borders, shadows, tap actions, grouping\n\n---\n\n### FloeToast *(New)*\nLightweight, animated toast notifications with swipe-to-dismiss and customizable styles.\n\n```swift\n@StateObject private var toastManager = FloeToastManager()\n\n// Basic usage with convenience methods\n.floeToast(FloeToast.success(\"Success!\", message: \"Operation completed\"))\n.floeToast(FloeToast.error(\"Error!\", message: \"Something went wrong\"))\n.floeToast(FloeToast.warning(\"Warning!\", message: \"Please check your input\"))\n.floeToast(FloeToast.info(\"Info\", message: \"New update available\"))\n\n// Custom toast with action\nFloeToast(\"Custom Toast\",\n          message: \"With action button\",\n          style: .custom(backgroundColor: .purple, \n                        foregroundColor: .white, \n                        icon: Image(systemName: \"star.fill\")),\n          actionTitle: \"Action\") {\n    // Action handler\n}\n\n// Using Toast Manager\ntoastManager.show(FloeToast.success(\"Saved successfully!\"))\n\n// Advanced configuration\nFloeToast(\"Upload Complete\",\n          message: \"Your file has been uploaded\",\n          style: .success,\n          position: .bottom,\n          duration: 5.0,\n          actionTitle: \"View\") {\n    // View file action\n} onDismiss: {\n    print(\"Toast dismissed\")\n}\n```\n\n**Styles:** Success, warning, error, info, custom  \n**Positions:** Top, bottom  \n**Features:** Auto-dismiss, swipe gestures, action buttons, custom styling, animations\n\n---\n\n### FloeTabBar *(New)*\nModern floating tab bar with smooth animations and flexible configuration.\n\n![FloeTabBar Result Builder](Documentation/Screenshots/floe_tabbar_result_builder_ss.png)\n![FloeTabBar Enhanced Badges](Documentation/Screenshots/floe_tabbar_enhanced_badges_ss.png)\n\n```swift\n// Define tabs\nlet tabs = [\n    FloeTabBar.Tab.systemIcon(id: \"home\", title: \"Home\", \n                             systemName: \"house\", selectedSystemName: \"house.fill\"),\n    FloeTabBar.Tab.systemIcon(id: \"search\", title: \"Search\", \n                             systemName: \"magnifyingglass\", badge: \"3\"),\n    FloeTabBar.Tab.systemIcon(id: \"favorites\", title: \"Favorites\", \n                             systemName: \"heart\", selectedSystemName: \"heart.fill\"),\n    FloeTabBar.Tab.systemIcon(id: \"profile\", title: \"Profile\", \n                             systemName: \"person\", selectedSystemName: \"person.fill\")\n]\n\n// Basic tab bar\n@State private var selectedTab = \"home\"\n\nFloeTabBar(\n    tabs: tabs,\n    selectedTabId: selectedTab,\n    onTabSelected: { selectedTab = $0 }\n)\n\n// Floating style with central action\nFloeTabBar(\n    tabs: tabs,\n    selectedTabId: selectedTab,\n    onTabSelected: { selectedTab = $0 },\n    style: .floating,\n    indicatorStyle: .pill,\n    centralAction: { print(\"Add new item\") },\n    centralActionIcon: Image(systemName: \"plus.circle.fill\")\n)\n\n// Scrollable for many tabs\nFloeTabBar(\n    tabs: manyTabs,\n    selectedTabId: selectedTab,\n    onTabSelected: { selectedTab = $0 },\n    isScrollable: true\n)\n\n// Complete tab bar controller\nFloeTabBarController(\n    tabs: tabs,\n    initialSelection: \"home\",\n    style: .floating\n) { selectedTab in\n    // Content for each tab\n    switch selectedTab {\n    case \"home\": HomeView()\n    case \"search\": SearchView()\n    case \"favorites\": FavoritesView()\n    case \"profile\": ProfileView()\n    default: EmptyView()\n    }\n}\n```\n\n**Styles:** Floating, attached, minimal  \n**Indicators:** Pill, underline, background, none  \n**Features:** Badges, central action button, scrollable tabs, animations, custom icons\n\n**Result Builder Syntax:**\n```swift\n// Declarative tab creation with @TabBuilder\nFloeTabBar(\n    selectedTabId: selectedTab,\n    onTabSelected: { selectedTab = $0 },\n    style: .floating,\n    indicatorStyle: .pill\n) {\n    FloeTabBar.Tab.systemIcon(id: \"home\", title: \"Home\", systemName: \"house\")\n    FloeTabBar.Tab.systemIcon(id: \"search\", title: \"Search\", systemName: \"magnifyingglass\")\n    FloeTabBar.Tab.systemIcon(id: \"favorites\", title: \"Favorites\", systemName: \"heart\")\n    FloeTabBar.Tab.systemIcon(id: \"profile\", title: \"Profile\", systemName: \"person\")\n}\n```\n\n---\n\n### FloeSlider *(New)*\nCustomizable slider with haptic feedback, value labels, and both horizontal/vertical orientations.\n\n```swift\n@State private var volume: Double = 50\n@State private var brightness: Double = 0.7\n\n// Basic slider\nFloeSlider(value: $volume, in: 0...100, showLabels: .value)\n\n// Percentage slider with convenience method\nFloeSlider.percentage(value: $volume, showLabels: true)\n\n// Volume-style slider (0-1)\nFloeSlider.volume(value: $brightness)\n\n// Custom range with steps\nFloeSlider(\n    value: $rating,\n    in: 0...5,\n    step: 0.5,\n    showLabels: .value,\n    showMinMax: true\n)\n\n// Vertical slider\nFloeSlider(\n    value: $volume,\n    in: 0...100,\n    orientation: .vertical,\n    showLabels: .percentage\n)\n.frame(height: 200)\n\n// Custom styling\nFloeSlider(\n    value: $temperature,\n    in: 16...30,\n    showLabels: .custom({ \"\\(Int($0))°C\" }),\n    fillColor: .orange,\n    thumbColor: .red,\n    enableHaptics: true\n)\n```\n\n**Orientations:** Horizontal, vertical  \n**Label Styles:** None, value, percentage, custom formatter  \n**Features:** Haptic feedback, range indicators, step values, custom styling, accessibility\n\n---\n\n### FloeTextView *(New)*\nRich text display and editing component with expansion controls and character limits.\n\n![FloeTextView Examples](Documentation/Screenshots/floe_textview_ss.png)\n\n```swift\n@State private var editableText = \"\"\n@State private var limitedText = \"\"\n\n// Basic editable text view\nFloeTextView(\n    text: $editableText,\n    placeholder: \"Enter your thoughts...\",\n    size: .medium\n)\n\n// Read-only with expansion\nFloeTextView.readOnly(\n    text: \"Long text content that can be expanded...\",\n    expansionStyle: .readMore(previewLines: 2)\n)\n\n// With character limit\nFloeTextView.withCharacterLimit(\n    text: $limitedText,\n    placeholder: \"Bio (max 100 characters)\",\n    characterLimit: 100,\n    size: .small\n)\n\n// Attributed text with rich formatting\nFloeTextView.attributedText(\n    attributedString,\n    size: .medium,\n    expansionStyle: .readMore(previewLines: 3)\n)\n```\n\n**Sizes:** `.small`, `.medium`, `.large`  \n**Expansion Styles:** Read more/less, character limits, custom  \n**Features:** Rich text support, smooth animations, character counting, accessibility\n\n---\n\n### FloeProgressIndicator *(New)*\nVersatile progress indicators with linear and circular styles, supporting both determinate and indeterminate states.\n\n![FloeProgressIndicator Demo](Documentation/Screenshots/floe_progress_indicator_rec.mov)\n\n```swift\n@State private var progress: Double = 0.65\n\n// Linear progress indicators\nFloeProgressIndicator(\n    progress: progress,\n    style: .linear,\n    size: .medium,\n    showPercentage: true\n)\n\n// Circular progress indicators\nFloeProgressIndicator(\n    progress: 0.75,\n    style: .circular,\n    size: .large,\n    showPercentage: true\n)\n\n// Indeterminate loading\nFloeProgressIndicator.indeterminate(\n    style: .circular,\n    size: .medium,\n    color: .blue\n)\n\n// State-based indicators\nFloeProgressIndicator.loading(style: .circular, size: .medium)\nFloeProgressIndicator.success(style: .circular, size: .medium)\nFloeProgressIndicator.error(style: .circular, size: .medium)\n\n// Custom styling\nFloeProgressIndicator(\n    progress: progress,\n    style: .linear,\n    size: .large,\n    color: .purple,\n    backgroundColor: .gray.opacity(0.2),\n    showPercentage: true\n)\n```\n\n**Styles:** Linear, circular  \n**States:** Determinate, indeterminate, loading, success, error  \n**Sizes:** `.small`, `.medium`, `.large`  \n**Features:** Smooth animations, custom colors, percentage display, accessibility\n\n---\n\n## 🏗️ Comprehensive Example\n\nHere's how FloeKit components work together in a real application:\n\n```swift\nimport SwiftUI\nimport FloeKit\n\nstruct ProfileView: View {\n    @State private var name = \"\"\n    @State private var bio = \"\"\n    @State private var selectedTab = \"profile\"\n    @State private var showSuccessToast = false\n    \n    var body: some View {\n        FloeTabBarController(\n            initialSelection: \"profile\",\n            style: .floating\n        ) {\n            FloeTabBar.Tab.systemIcon(id: \"profile\", title: \"Profile\", systemName: \"person\")\n            FloeTabBar.Tab.systemIcon(id: \"settings\", title: \"Settings\", systemName: \"gear\")\n        } content: { selectedTab in\n            ScrollView {\n                VStack(spacing: FloeSpacing.Size.lg.value) {\n                    // Avatar Section\n                    FloeCard {\n                        VStack(spacing: FloeSpacing.Size.md.value) {\n                            FloeAvatar.initials(\"JD\", size: .extraLarge)\n                            Text(\"John Doe\")\n                                .floeFont(.headline)\n                        }\n                        .frame(maxWidth: .infinity)\n                    }\n                    \n                    // Form Section\n                    FloeCard(padding: .comfortable) {\n                        VStack(spacing: FloeSpacing.Size.md.value) {\n                            FloeTextField(\n                                text: $name,\n                                placeholder: \"Full Name\",\n                                leadingIcon: Image(systemName: \"person.fill\")\n                            )\n                            \n                            FloeTextView.withCharacterLimit(\n                                text: $bio,\n                                placeholder: \"Tell us about yourself...\",\n                                characterLimit: 150,\n                                size: .medium\n                            )\n                            \n                            FloeButton(\"Save Profile\",\n                                      size: .large,\n                                      backgroundColor: FloeColors.primary,\n                                      textColor: .white) {\n                                showSuccessToast = true\n                            }\n                        }\n                    }\n                    \n                    // Progress Section\n                    FloeCard {\n                        VStack(alignment: .leading, spacing: FloeSpacing.Size.sm.value) {\n                            Text(\"Profile Completion\")\n                                .floeFont(.headline)\n                            \n                            FloeProgressIndicator(\n                                progress: 0.75,\n                                style: .linear,\n                                size: .medium,\n                                showPercentage: true\n                            )\n                        }\n                    }\n                }\n                .floePadding(.comfortable)\n            }\n            .floeToast(showSuccessToast ? \n                FloeToast.success(\"Profile Updated!\", \n                                 message: \"Your changes have been saved\") {\n                    showSuccessToast = false\n                } : nil\n            )\n        }\n    }\n}\n```\n\n**This example demonstrates:**\n- **FloeTabBarController** with multiple screens\n- **FloeCard** for clean content organization  \n- **FloeAvatar** for user representation\n- **FloeTextField** with icons for form input\n- **FloeTextView** with character limits for longer text\n- **FloeButton** for primary actions\n- **FloeProgressIndicator** for status display\n- **FloeToast** for user feedback\n- **FloeSpacing** and **FloeFont** for consistent styling\n\n---\n\n## 🛠️ Utilities\n\n### FloeColors\nAdaptive color palette with seamless light/dark mode support.\n\n```swift\n// Primary semantic colors\n.foregroundColor(FloeColors.primary)     // Main brand color\n.backgroundColor(FloeColors.secondary)   // Secondary brand color\n.foregroundColor(FloeColors.accent)      // Accent highlights\n.foregroundColor(FloeColors.error)       // Error states\n\n// Surface colors\n.backgroundColor(FloeColors.background)  // Main background\n.backgroundColor(FloeColors.surface)     // Card/component backgrounds\n\n// Neutral scale for subtle elements\n.foregroundColor(FloeColors.neutral0)    // Pure contrast\n.foregroundColor(FloeColors.neutral10)   // High contrast text\n.foregroundColor(FloeColors.neutral20)   // Medium contrast borders\n.foregroundColor(FloeColors.neutral30)   // Low contrast dividers\n.foregroundColor(FloeColors.neutral40)   // Subtle text\n.foregroundColor(FloeColors.neutral90)   // Very subtle backgrounds\n\n// State colors\n.foregroundColor(FloeColors.success)     // Success feedback\n.foregroundColor(FloeColors.warning)     // Warning states\n```\n\n**✅ All colors automatically adapt to light/dark mode**  \n**✅ Consistent contrast ratios for accessibility**  \n**✅ Can be overridden via color assets for custom theming**\n\n---\n\n### FloeFont\nTypography system with semantic font styles.\n\n```swift\nText(\"Headline\")\n    .floeFont(.headline)\n\nText(\"Body text\")\n    .floeFont(.body)\n\n// Or with custom size and weight\nText(\"Custom\")\n    .floeFont(size: .xl, weight: .bold)\n\n// Available styles: .body, .caption, .button, .title, .headline, .subheadline\n// Available sizes: .xs, .sm, .base, .lg, .xl, .xl2, .xl3, .xl4\n```\n\n---\n\n### FloeSpacing\nConsistent spacing and padding system.\n\n```swift\n// Use spacing tokens\nVStack(spacing: FloeSpacing.Size.lg.value) {\n    // Content\n}\n\n// Apply semantic padding\nSomeView()\n    .floePadding(.card)        // Standard card padding\n    .floePadding(.section)     // Section container padding\n    .floePadding(.comfortable) // Comfortable all-around padding\n    .floePadding(.spacious)    // Spacious padding\n    .floePadding(.generous)    // Generous padding\n\n// Custom spacing\nSomeView()\n    .floePadding(.vertical, .lg)\n    .floePadding(.horizontal, .xl)\n```\n\n---\n\n### FloeShadow\nConsistent shadow system with automatic dark mode adaptation.\n\n```swift\n// Apply semantic shadows\nRoundedRectangle(cornerRadius: 12)\n    .floeShadow(.soft)      // Subtle shadow\n    .floeShadow(.medium)    // Standard shadow\n    .floeShadow(.elevated)  // Strong shadow\n\n// Available styles: .none, .subtle, .soft, .medium, .elevated\n```\n\n---\n\n## 🗺️ Roadmap\n\n### 🎛️ FloeStepper *(Next Phase)*\nCustom stepper component with enhanced visual feedback.\n- Smooth animations and haptic feedback\n- Custom styling and button designs\n- Long press for rapid changes\n- Custom step values and ranges\n\n### 📅 FloeDatePicker \u0026 FloeTimePicker *(Next Phase)*\nModern date and time selection components.\n- Inline and compact picker styles\n- Custom styling with FloeKit design language\n- Range selection support\n- Localization and timezone support\n\n### 🔍 FloeSearchBar *(Next Phase)*\nEnhanced search bar with modern styling and functionality.\n- Animated search icon and clear button\n- Search suggestions and recent searches\n- Voice input support\n- Custom filtering and debouncing\n\n### 📋 FloeList \u0026 FloeGrid *(Planned)*\nEnhanced list and grid components with built-in styling.\n- Pull-to-refresh and infinite scrolling\n- Swipe actions and reordering\n- Section headers with sticky behavior\n- Loading states and empty state views\n\n### 🎨 FloeColorPicker *(Planned)*\nModern color selection component.\n- Multiple picker styles (wheel, palette, sliders)\n- Custom color palettes and recent colors\n- Hex, RGB, HSL input support\n- Eyedropper functionality\n\n### 📊 FloeChart *(Planned)*\nSimple charting components for basic data visualization.\n- Line, bar, and pie chart support\n- Animated data updates\n- Interactive tooltips and legends\n- Customizable colors and styling\n\n---\n\n## 🎨 Theming\n\nFloeKit supports comprehensive theming through color asset overrides:\n\n1. Add a `Colors.xcassets` to your app\n2. Create color sets with FloeKit's color names:\n   - `FloePrimary`, `FloeSecondary`, `FloeAccent`\n   - `FloeBackground`, `FloeSurface`\n   - `FloeNeutral0`, `FloeNeutral10`, `FloeNeutral20`, `FloeNeutral30`, `FloeNeutral40`, `FloeNeutral90`\n3. FloeKit will automatically use your custom colors\n\n---\n\n## 📄 License\n\nFloeKit is available under the MIT license. See [LICENSE](LICENSE) for details.\n\n---\n\n## 🙏 Acknowledgments\n\nInspired by modern design systems and the SwiftUI community's best practices.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnemanjavlahovic%2Ffloekit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnemanjavlahovic%2Ffloekit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnemanjavlahovic%2Ffloekit/lists"}