diff --git a/App/Sources/Styles/CompletionToggleStyle.swift b/App/Sources/Styles/CompletionToggleStyle.swift new file mode 100644 index 0000000..998be3a --- /dev/null +++ b/App/Sources/Styles/CompletionToggleStyle.swift @@ -0,0 +1,77 @@ +import SwiftUI + +/// A custom toggle style designed for task completion indication. +/// +/// This style renders a circular checkbox that visually represents completion state: +/// - **Off state**: An empty circle with a secondary-colored stroke border +/// - **On state**: A circle with a primary-colored stroke border containing a filled inner circle +/// +/// ## Usage +/// +/// Apply this style to any `Toggle` view using the `.completion` static accessor: +/// +/// ```swift +/// Toggle("Complete task", isOn: $isCompleted) +/// .toggleStyle(.completion) +/// ``` +struct CompletionToggleStyle: ToggleStyle { + + // MARK: Functions + + func makeBody(configuration: Configuration) -> some View { + Button { + configuration.isOn.toggle() + } label: { + HStack(alignment: .top, spacing: 12) { + ZStack { + Circle() + .strokeBorder( + configuration.isOn ? .primary : .secondary, + lineWidth: 2 + ) + .frame(width: 24, height: 24) + + if configuration.isOn { + Circle() + .fill(.primary) + .frame(width: 16, height: 16) + } + } + } + } + .animation( + .easeInOut, + value: configuration.isOn + ) + .buttonStyle(.plain) + } + +} + +// MARK: - Toggle Style Extension + +extension ToggleStyle where Self == CompletionToggleStyle { + + /// A toggle style for task completion with a circular checkbox design. + /// + /// This convenience accessor provides easy access to the ``CompletionToggleStyle`` + /// for use with SwiftUI's toggle style modifier. + static var completion: CompletionToggleStyle { + CompletionToggleStyle() + } + +} + +// MARK: - Previews + +#Preview("Completion toggle style") { + @Previewable + @State + var isOn = false + + Toggle( + "Unchecked task", + isOn: $isOn + ) + .toggleStyle(.completion) +}