2026-02-10 15:31:53 +00:00
1 changed files with 77 additions and 0 deletions
@@ -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)
+}