Spark iOS

https://github.com/leboncoin/spark-ios
Admin
Spark is the Leboncoin iOS design system for SwiftUI and UIKit: theming (colors, typography,...
Tokens:25,859
Snippets:349
Trust Score:9.8
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
================
LIBRARY RULES
================
- Add the `Spark` product of the `https://github.com/leboncoin/spark-ios.git` package and use `import Spark` to access every component, the theming and the icons. The minimum platform is iOS 17.
- Always provide a theme with `.sparkTheme(theme)` on the SwiftUI view hierarchy (use `SparkTheme.shared` for the default Spark theme). Spark SwiftUI components require it.
- Prefer the SwiftUI components (`SparkXXX`). New components are SwiftUI only; UIKit components (`SparkUIXXX`) only exist for the legacy components.
- Configure SwiftUI components with their environment view modifiers prefixed by `spark` (e.g. `.sparkButtonIntent(.main)`, `.sparkInputOTPDigits(.four)`) instead of init parameters.
- Use the theme values (`theme.colors`, `theme.typography`, `theme.layout.spacing`, `theme.border`, `theme.dims`) instead of hardcoded colors, fonts or sizes.
- To build a custom view with the look of a component, use its token from `theme.component.xxx` (e.g. `theme.component.inputOTP.colors`).
- Use the Spark icons with `Image(spark: \.iconName)` or `UIImage(spark: \.iconName)`.
- Never use the code marked `@_spi(SI_SPI)`: it is internal to the Spark team.

================
CODE SNIPPETS
================
### Example Package.swift with SparkResources dependency

Source: https://github.com/leboncoin/spark-ios/blob/main/Resources/README.md

A complete example Package.swift file that declares SparkResources as a dependency for a target. It specifies the package URL and version, and includes the product dependency in the target's dependencies array.

```swift
// swift-tools-version:5.9
import PackageDescription

let package = Package(
    name: "MyPackage",
    platforms: [
        .iOS(.v17)
    ],
    products: [
        .library(
            name: "MyPackage",
            targets: ["MyPackage"]),
    ],
    dependencies: [
        .package(
            url: "https://github.com/leboncoin/spark-ios.git",
            .upToNextMajor(from: "2.0.0")
        )
    ],
    targets: [
        .target(
            name: "MyPackage",
            dependencies: [
                .product(
                    name: "SparkResources",
                    package: "Spark"
                )
            ]
        )
    ]
)
```

--------------------------------

### Example Package.swift with Spark dependency

Source: https://github.com/leboncoin/spark-ios/blob/main/Spark/README.md

A complete example Package.swift file that declares the Spark package as a dependency and includes the Spark product in a target. The comment indicates that Spark includes all components, common code, theming, and resources.

```swift
// swift-tools-version:5.9
import PackageDescription

let package = Package(
    name: "MyPackage",
    platforms: [
        .iOS(.v17)
    ],
    products: [
        .library(
            name: "MyPackage",
            targets: ["MyPackage"]),
    ],
    dependencies: [
        .package(
            url: "https://github.com/leboncoin/spark-ios.git",
            .upToNextMajor(from: "2.0.0")
        )
    ],
    targets: [
        .target(
            name: "MyPackage",
            dependencies: [
                .product(
                    name: "Spark", // All components, common code, theming and resources
                    package: "Spark"
                )
            ]
        ),
    ]
)
```

--------------------------------

### Example Package.swift with Spark dependency

Source: https://github.com/leboncoin/spark-ios/blob/main/README.md

A complete Package.swift manifest that declares the Spark package as a dependency and links the Spark product to a target.

```swift
// swift-tools-version:5.9
import PackageDescription

let package = Package(
    name: "MyPackage",
    platforms: [
        .iOS(.v17)
    ],
    products: [
        .library(
            name: "MyPackage",
            targets: ["MyPackage"]),
    ],
    dependencies: [
        .package(
            url: "https://github.com/leboncoin/spark-ios.git",
            .upToNextMajor(from: "2.0.0")
        )
    ],
    targets: [
        .target(
            name: "MyPackage",
            dependencies: [
                .product(
                    name: "Spark",
                    package: "spark-ios"
                )
            ]
        )
    ]
)
```

--------------------------------

### Custom Status Usage of SparkFileUploadPreview

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

Shows how to set a custom status (e.g., .uploading) on the preview component. The removeAction closure is provided but left empty in this example.

```swift
SparkFileUploadPreview(
    file: file,
    status: .uploading,
    removeAction: {
        // Handle removal
    }
)
```

--------------------------------

### Add Spark dependency to Package.swift

Source: https://github.com/leboncoin/spark-ios/blob/main/README.md

Adds the Spark iOS package as a dependency using Swift Package Manager, specifying a major version range starting from 2.0.0.

```swift
.package(url: "https://github.com/leboncoin/spark-ios.git", .upToNextMajor(from: "2.0.0"))
```

--------------------------------

### Import Spark

Source: https://github.com/leboncoin/spark-ios/blob/main/Spark/Sources/Core/Documentation.docc/Documentation.md

Import the Spark umbrella library to access all Spark components with a single import.

```swift
import Spark
```

--------------------------------

### Theme to component token hierarchy

Source: https://github.com/leboncoin/spark-ios/blob/main/docs/ARCHITECTURE.md

ASCII diagram showing the layering from Theme down to the SwiftUI view, including the component token, environment theme, and view modifiers.

```text
Theme
 └─ theme.component.xxx               ComponentToken+XXX.swift        (public, ComponentToken is defined in SparkTheming)
     └─ XXXToken + categories         Token/XXXToken(+Category).swift (public)
         └─ EnvironmentTheme.category EnvironmentTheme+XXXToken.swift (internal: self.theme.colors, self.theme.border, ...)
             └─ ViewModifiers         ViewModifier/XXXYyyViewModifier.swift
                 └─ SparkXXX          SwiftUI view
```

--------------------------------

### UIKit usage of Spark icon initializers

Source: https://github.com/leboncoin/spark-ios/blob/main/Resources/Sources/Core/Documentation.docc/Documentation.md

Use the UIImage(spark:) and UIImage(sparkCriteria:) initializers in UIKit to create icons from the Spark iconography. Requires importing UIKit and SparkResources.

```swift
import UIKit
import SparkResources

let image = UIImage(spark: \.actionsFill)
let image = UIImage(sparkCriteria: \.accessories)
```

--------------------------------

### SwiftUI usage of Spark icon initializers

Source: https://github.com/leboncoin/spark-ios/blob/main/Resources/Sources/Core/Documentation.docc/Documentation.md

Use the Image(spark:) and Image(sparkCriteria:) initializers in SwiftUI to create icons from the Spark iconography. Requires importing SwiftUI and SparkResources.

```swift
import SwiftUI
import SparkResources

struct MyView: View {
    var body: some View {
        Image(spark: \.actionsFill)
        Image(sparkCriteria: \.accessories)
    }
}
```

--------------------------------

### Generate Xcode project with xcodegen

Source: https://github.com/leboncoin/spark-ios/blob/main/README.md

Command to generate the Xcode project file for the demo app using xcodegen.

```bash
$ xcodegen
```

--------------------------------

### InputOTPToken structure and extension

Source: https://github.com/leboncoin/spark-ios/blob/main/docs/ARCHITECTURE.md

Shows how a component token derives values from the theme and defines its own categories. The Border category uses theme values for radius and width, with a custom equality check.

```swift
public struct InputOTPToken: Equatable {
    public let border: Border          // derived from theme.border
    public let colors: Colors          // derived from theme.colors
    public let size = Size()           // fixed constant, no theme needed

    public init(theme: any Theme) {
        self.border = .init(theme: theme)
        self.colors = .init(theme: theme)
    }
}

public extension InputOTPToken {
    struct Border: Equatable {
        let theme: any Theme

        public var slotRadius: CGFloat { self.theme.border.radius.medium }

        public func slotWidth(onError: Bool, isFocus: Bool) -> CGFloat {
            onError || isFocus ? self.theme.border.width.medium : self.theme.border.width.small
        }

        public static func == (lhs: Border, rhs: Border) -> Bool {
            lhs.theme.equals(rhs.theme)
        }
    }
}
```

--------------------------------

### Package.swift with Spark and SparkThemingTesting

Source: https://github.com/leboncoin/spark-ios/blob/main/docs/SPM_INTEGRATION.md

Use this Package.swift when you want to mock the Spark Theme in your unit/UI tests. It adds a test target that depends on the SparkThemingTesting product.

```swift
// swift-tools-version:5.9
import PackageDescription

let package = Package(
    name: "MyPackage",
    platforms: [
        .iOS(.v17)
    ],
    products: [
        .library(
            name: "MyPackage",
            targets: ["MyPackage"]),
    ],
    dependencies: [
        .package(
            url: "https://github.com/leboncoin/spark-ios.git",
            .upToNextMajor(from: "2.0.0")
        )
    ],
    targets: [
        .target(
            name: "MyPackage",
            dependencies: [
                .product(
                    name: "Spark",
                    package: "spark-ios"
                )
            ]
        ),
        .testTarget(
            name: "MyPackageTests",
            dependencies: [
                .target(name: "MyPackage"),
                .product(
                    name: "SparkThemingTesting",
                    package: "spark-ios"
                )
            ]
        )
    ]
)
```

--------------------------------

### Package.swift with Spark and SparkTheme

Source: https://github.com/leboncoin/spark-ios/blob/main/docs/SPM_INTEGRATION.md

Use this Package.swift when you want to use the default Spark theme implementation directly. It adds the SparkTheme product to the target's dependencies.

```swift
// swift-tools-version:5.9
import PackageDescription

let package = Package(
    name: "MyPackage",
    platforms: [
        .iOS(.v17)
    ],
    products: [
        .library(
            name: "MyPackage",
            targets: ["MyPackage"]),
    ],
    dependencies: [
        .package(
            url: "https://github.com/leboncoin/spark-ios.git",
            .upToNextMajor(from: "2.0.0")
        )
    ],
    targets: [
        .target(
            name: "MyPackage",
            dependencies: [
                .product(
                    name: "Spark",
                    package: "spark-ios"
                ),
                .product(
                    name: "SparkTheme",
                    package: "spark-ios"
                )
            ]
        )
    ]
)
```

--------------------------------

### Package.swift with SparkDemo

Source: https://github.com/leboncoin/spark-ios/blob/main/docs/SPM_INTEGRATION.md

Use this Package.swift when you want to implement the Spark demo app content inside another app. It adds the SparkDemo product to the target's dependencies.

```swift
// swift-tools-version:5.9
import PackageDescription

let package = Package(
    name: "MyPackage",
    platforms: [
        .iOS(.v17)
    ],
    products: [
        .library(
            name: "MyPackage",
            targets: ["MyPackage"]),
    ],
    dependencies: [
        .package(
            url: "https://github.com/leboncoin/spark-ios.git",
            .upToNextMajor(from: "2.0.0")
        )
    ],
    targets: [
        .target(
            name: "MyPackage",
            dependencies: [
                .product(
                    name: "SparkDemo",
                    package: "spark-ios"
                )
            ]
        )
    ]
)
```

--------------------------------

### Theme protocol definition

Source: https://github.com/leboncoin/spark-ios/blob/main/docs/ARCHITECTURE.md

Defines the core Theme protocol as a bag of six category protocols: border, colors, elevation, layout, typography, and dims. Conforms to Hashable and Equatable.

```swift
public protocol Theme: Hashable, Equatable {
    var border: any Border { get }
    var colors: any Colors { get }
    var elevation: any Elevation { get }
    var layout: any Layout { get }
    var typography: any Typography { get }
    var dims: any Dims { get }
}
```

--------------------------------

### MIT License text

Source: https://github.com/leboncoin/spark-ios/blob/main/README.md

The MIT License text included in the repository's README.

```text
MIT License

Copyright (c) 2026 Leboncoin

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

--------------------------------

### With Dropzone - SparkFileUploadPreviewGroup

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

Creates a complete upload interface using SparkFileUploadDropzone, SparkFileUploadButton, and SparkFileUploadPreviewGroup. The dropzone accepts an icon, description text, additional text, and a binding to files.

```swift
@State private var files: [FileUpload] = []

VStack(spacing: 24) {
    SparkFileUploadDropzone(
        icon: Image(systemName: "arrow.up.doc"),
        descriptionText: "Drag and drop files or",
        additionalText: "PNG, JPG, PDF up to 10MB",
        files: $files
    ) {
        SparkFileUploadButton(
            "Browse Files",
            files: $files
        )
    }

    if !files.isEmpty {
        SparkFileUploadPreviewGroup(
            files: files,
            removeAction: { file in
                files.removeAll { $0.id == file.id }
            }
        )
    }
}
.sparkTheme(theme)
```

--------------------------------

### Basic Usage of SparkFileUploadPreviewGroup

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

Displays a collection of file previews using SparkFileUploadPreviewGroup. Requires an array of FileUpload objects and a remove action closure. Apply .sparkTheme(theme) for theming.

```swift
@State private var files: [FileUpload] = [
    // Array of FileUpload objects
]

SparkFileUploadPreviewGroup(
    files: files,
    removeAction: { file in
        files.removeAll { $0.id == file.id }
    }
)
.sparkTheme(theme)
```

--------------------------------

### Error State Usage of SparkFileUploadPreview

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

Creates a FileUpload with a failure result (e.g., .photoResourceNotFound) and passes it to the preview. Demonstrates how to display an error state.

```swift
let failedFile = FileUpload(
    id: "error-id",
    name: "failed.jpg",
    source: .camera,
    result: .failure(.photoResourceNotFound)
)

SparkFileUploadPreview(
    file: failedFile,
    removeAction: {
        // Handle removal
    }
)
```

--------------------------------

### SparkFileUploadPreviewGroup(files:removeAction:)

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

Initializes a preview group with an array of FileUpload objects and a remove action closure. The view automatically arranges previews in a responsive grid layout.

```APIDOC
## SparkFileUploadPreviewGroup(files:removeAction:)

### Description
Creates a preview group that displays a collection of file previews in a responsive grid layout. The component requires an array of `FileUpload` objects and a remove action closure.

### Method
Initializer

### Endpoint
`SparkFileUploadPreviewGroup(files:removeAction:)`

### Parameters
#### Parameters
- **files** (Array<FileUpload>) - Required - Array of `FileUpload` objects to display.
- **removeAction** (Closure) - Required - Closure called with the file to remove when user taps remove button on any preview.

### Request Example
```swift
@State private var files: [FileUpload] = [
    // Array of FileUpload objects
]

SparkFileUploadPreviewGroup(
    files: files,
    removeAction: { file in
        files.removeAll { $0.id == file.id }
    }
)
.sparkTheme(theme)
```

### Response
#### Success Response
- **View** - A SwiftUI view that displays the preview group.

#### Response Example
```swift
// The view is rendered as part of the SwiftUI hierarchy.
```
```

--------------------------------

### SparkFileUploadDropzone

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

A SwiftUI component that provides a designated area for drag-and-drop or click-to-browse file selection. It offers visual feedback and supports customizable content and file type filtering.

```APIDOC
## SparkFileUploadDropzone

### Description
A SwiftUI component that provides a designated area for drag-and-drop or click-to-browse file selection. It offers visual feedback and supports customizable content and file type filtering.

### Properties
- **icon** (Image?) - Optional - Image displayed at the top of the dropzone
- **descriptionText/descriptionLabel** (String/View) - Required - Primary text or custom view shown above the button
- **uploadButton** (View) - Required - The button view for file selection (typically `SparkFileUploadButton`)
- **additionalText/additionalLabel** (String/View) - Optional - Secondary text or custom view shown below the button (e.g., file format, size limits)
- **files** (Binding<[FileUpload]>) - Required - Binding to array of `FileUpload` objects
- **fileTypes** ([UTType]) - Optional - Array of `UTType` for accepted file types (defaults to `.sparkDefaults`)

### Usage Example
```swift
SparkFileUploadDropzone(
    files: $files
)
```

### Permissions
Ensure appropriate permissions are configured in Info.plist:
- `NSPhotoLibraryUsageDescription` for photo library access
- `NSCameraUsageDescription` for camera access
- `NSDocumentsFolderUsageDescription` for file access (if needed)
```

--------------------------------

### With Upload Button - SparkFileUploadPreviewGroup

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

Combines SparkFileUploadButton with SparkFileUploadPreviewGroup to create a complete file management interface. The preview group is shown only when files are not empty.

```swift
@State private var files: [FileUpload] = []

VStack(spacing: 16) {
    SparkFileUploadButton(
        "Add Files",
        files: $files
    )

    if !files.isEmpty {
        SparkFileUploadPreviewGroup(
            files: files,
            removeAction: { file in
                files.removeAll { $0.id == file.id }
            }
        )
    }
}
.sparkTheme(theme)
```

--------------------------------

### Apply .fileUpload button style to SparkButton

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

Use the built-in `.fileUpload` style on a `SparkButton` to match the FileUpload component's appearance. The button action is a placeholder for your upload logic.

```swift
SparkButton("Upload", image: .sparkExport) {
    // Action
}
.sparkButtonStyle(.fileUpload)
```

--------------------------------

### SparkFileUploadPreview

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

A SwiftUI view that displays a visual representation of an uploaded file with metadata, status indicators, and interactive controls. It supports multiple file types and provides a remove action.

```APIDOC
## SparkFileUploadPreview

### Description
A SwiftUI view that displays a visual representation of an uploaded file with metadata, status indicators, and interactive controls. It supports multiple file types and provides a remove action.

### Initializer
```swift
SparkFileUploadPreview(
    file: FileUpload,
    status: FileUploadPreviewStatus? = nil,
    removeAction: () -> Void
)
```

### Parameters
- **file** (FileUpload) - Required - The `FileUpload` object containing file metadata and upload result.
- **status** (FileUploadPreviewStatus?) - Optional - The status of the preview (`.default`, `.uploading`). Defaults to `.default` if not provided.
- **removeAction** (() -> Void) - Required - Closure called when user taps remove button.

### Usage Examples

#### Basic Usage
```swift
let file = FileUpload(
    id: "unique-id",
    name: "document.pdf",
    source: .files,
    result: .success(.init(
        url: fileURL,
        fileExtension: "pdf",
        size: 1024000
    ))
)

SparkFileUploadPreview(
    file: file,
    removeAction: {
        // Handle file removal
        files.removeAll { $0.id == file.id }
    }
)
.sparkTheme(theme)
```

#### With Custom Status
```swift
SparkFileUploadPreview(
    file: file,
    status: .uploading,
    removeAction: {
        // Handle removal
    }
)
```

#### Error State
```swift
let failedFile = FileUpload(
    id: "error-id",
    name: "failed.jpg",
    source: .camera,
    result: .failure(.photoResourceNotFound)
)

SparkFileUploadPreview(
    file: failedFile,
    removeAction: {
        // Handle removal
    }
)
```

### File Types Supported
The preview automatically adapts based on file extension:
- **Images**: `.jpg`, `.jpeg`, `.png`, `.gif`, `.heic`, `.heif`, `.tiff`, etc.
- **Videos**: `.mp4`, `.mov`, `.m4v`, `.avi`, `.mkv`, etc.
- **PDFs**: `.pdf`
- **Documents**: All other file types show a generic file icon

### Preview Types
- **Image Viewer**: Displays the actual image with metadata
- **Video Viewer**: Shows video thumbnail with play indicator
- **PDF Viewer**: Renders first page of PDF
- **File Viewer**: Generic icon for other document types

### Status Types
- **Default**: Normal state after successful upload
- **Uploading**: Shows progress indicator
- **Error**: Displays error message from `FileUploadError`

### Properties
- **file**: The `FileUpload` object containing file metadata and upload result
- **status**: Optional `FileUploadPreviewStatus` (`.default`, `.uploading`)
- **removeAction**: Closure called when user taps remove button

### Accessibility
The preview component is fully accessible:
- File name is used as accessibility label
- Remove button has descriptive label
- Status indicators are announced to screen readers
- Error messages are accessible
```

--------------------------------

### SparkFileUploadButton

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

A SwiftUI component that allows users to select and upload files from their device. It supports multiple sources (photo library, file browser, camera), batch selection, and customizable styling.

```APIDOC
## SparkFileUploadButton

### Description
A SwiftUI component that allows users to select and upload files from their device. It supports multiple sources (photo library, file browser, camera), batch selection, and customizable styling.

### Properties
- **title** (String) - Required - Button text label
- **image** (Image?) - Optional - Icon displayed in the button
- **files** (Binding<[FileUpload]>) - Required - Binding to array of `FileUpload` objects
- **photoSelectionBehavior** (PhotoSelectionBehavior) - Required - How new selections interact with existing files (`.replace` or `.append`)
- **photoFilter** (PhotoFilter) - Required - Filter for photo library (`.images`, `.videos`, or `.any`)
- **fileTypes** ([UTType]) - Required - Array of `UTType` for file picker
- **showCamera** (Bool) - Required - Whether to show camera option (requires camera permission)

### Usage Example
```swift
SparkFileUploadButton(
    "Upload Files",
    files: $files
)
.accessibilityLabel("Upload files button")
```

### Button Style
Apply the FileUpload style to any `SparkButton`:
```swift
SparkButton("Upload", image: .sparkExport) {
    // Action
}
.sparkButtonStyle(.fileUpload)
```

### Permissions
Ensure appropriate permissions are configured in Info.plist:
- `NSPhotoLibraryUsageDescription` for photo library access
- `NSCameraUsageDescription` for camera access
- `NSDocumentsFolderUsageDescription` for file access (if needed)
```

--------------------------------

### ColorToken protocol definition

Source: https://github.com/leboncoin/spark-ios/blob/main/docs/ARCHITECTURE.md

Defines the ColorToken protocol that wraps both UIKit and SwiftUI color representations behind a single semantic type. Conforms to Hashable and Equatable.

```swift
public protocol ColorToken: Hashable, Equatable {
    var uiColor: UIColor { get }
    var color: Color { get }
}
```

--------------------------------

### Enable snapshot testing with sparkIsSnapshot(true)

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/SegmentedControl/Sources/Core/Documentation.docc/Documentation.md

Add .sparkIsSnapshot(true) to a view containing SparkSegmentedControl when writing snapshot tests. Requires importing SparkCommon. The modifier ensures consistent rendering in snapshots.

```swift
import SparkCommon // Needed

let view = MyViewWithSegmentedControl()
    .sparkIsSnapshot(true) // Magic is here

self.assertSnapshot(matching: view)
```

--------------------------------

### Basic Usage of SparkFileUploadPreview

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

Creates a FileUpload instance and passes it to SparkFileUploadPreview with a remove action closure. The removeAction removes the file from the files array by matching its id.

```swift
let file = FileUpload(
    id: "unique-id",
    name: "document.pdf",
    source: .files,
    result: .success(.init(
        url: fileURL,
        fileExtension: "pdf",
        size: 1024000
    ))
)

SparkFileUploadPreview(
    file: file,
    removeAction: {
        // Handle file removal
        files.removeAll { $0.id == file.id }
    }
)
.sparkTheme(theme)
```

--------------------------------

### Filter by Status - SparkFileUploadPreviewGroup

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

Shows only successful uploads or only errors by filtering the files array using isSucceed. Displays separate sections for failed and successful files with headers.

```swift
let successfulFiles = files.filter { $0.isSucceed }
let failedFiles = files.filter { !$0.isSucceed }

VStack {
    if !failedFiles.isEmpty {
        Text("Failed Uploads")
            .font(.headline)
        SparkFileUploadPreviewGroup(
            files: failedFiles,
            removeAction: removeFile
        )
    }

    if !successfulFiles.isEmpty {
        Text("Uploaded Files")
            .font(.headline)
        SparkFileUploadPreviewGroup(
            files: successfulFiles,
            removeAction: removeFile
        )
    }
}
```

--------------------------------

### Set accessibility label on SparkFileUploadButton

Source: https://github.com/leboncoin/spark-ios/blob/main/Modules/Components/FileUpload/Sources/Core/Documentation.docc/Documentation.md

Add a descriptive accessibility label to the `SparkFileUploadButton` for screen readers. The button requires a binding to an array of `FileUpload` objects.

```swift
SparkFileUploadButton(
    "Upload Files",
    files: $files
)
.accessibilityLabel("Upload files button")
```
Tokens:
Raw