Update stepper components with liquid glass styling and native fonts

- Add liquid glass button style to WideStepperButton
- Update ControlView, WideStepper, WideSlider with accessibility labels
- Remove custom font extensions, use native SwiftUI fonts
- Add color and step parameters for flexibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: rudrankriyam

Sources/BlocKit/Button/GradientButton.swift

@@ -26,7 +26,7 @@ public struct GradientButton: View {
     Button(action: action) {
       Text(title)
         .kerning(1.0)
-        .font(type: .poppins, weight: .light, style: .callout)
+        .font(.callout.weight(.light))
     }
     .padding(.bottom)
     .buttonStyle(GradientButtonStyle())

Sources/BlocKit/Button/WideStepperButton.swift

@@ -7,28 +7,47 @@
 
 import SwiftUI
 
-enum StepperButtonImage: String {
+public enum StepperButtonImage: String, Sendable {
     case plus
     case minus
 }
 
-struct WideStepperButton: View {
-    var condition: Bool
-    var systemName: StepperButtonImage
-    var action: () -> ()
-    
-    var body: some View {
+public struct WideStepperButton: View {
+    public var condition: Bool
+    public var color: Color
+    public var systemName: StepperButtonImage
+    public var accessibilityLabel: LocalizedStringKey
+    public var action: () -> ()
+
+    public init(
+        condition: Bool,
+        color: Color = .accentColor,
+        systemName: StepperButtonImage,
+        accessibilityLabel: LocalizedStringKey = "Value",
+        action: @escaping () -> ()
+    ) {
+        self.condition = condition
+        self.color = color
+        self.systemName = systemName
+        self.accessibilityLabel = accessibilityLabel
+        self.action = action
+    }
+
+    public var body: some View {
         Button(action: action) {
             Image(systemName: systemName.rawValue)
-                .foregroundColor(condition ? .accentColor : .secondaryBackground)
-                .padding(2)
+                .foregroundColor(condition ? color : .secondary.opacity(0.5))
+                .frame(width: 32, height: 32)
         }
-       .buttonStyle(StepperButtonStyle())
+        .buttonStyle(.glass)
+        .buttonBorderShape(.circle)
+        .disabled(!condition)
+        .opacity(condition ? 1.0 : 0.3)
+        .accessibilityLabel((systemName == .plus ? Text("Increase") : Text("Decrease")) + Text(" ") + Text(accessibilityLabel))
+        .accessibilityHint(Text("Double tap to ") + (systemName == .plus ? Text("increase") : Text("decrease")) + Text(" ") + Text(accessibilityLabel) + Text(" by one"))
     }
 }
 
-struct WideStepperButton_Previews: PreviewProvider {
-    static var previews: some View {
-        WideStepperButton(condition: true, systemName: .minus, action: {})
-    }
+#Preview {
+    WideStepperButton(condition: true, color: .red, systemName: .minus, action: {})
 }

Sources/BlocKit/Extensions/Text.swift

@@ -10,32 +10,32 @@ import SwiftUI
 extension Text {
     public func customTitleText(size: CGFloat) -> some View {
         self
-            .font(type: .poppins, weight: .black, style: .largeTitle)
+            .font(.largeTitle.weight(.black))
             .multilineTextAlignment(.center)
     }
-    
+
     public func titleText() -> some View {
         self
-            .font(type: .poppins, weight: .bold, style: .title1)
+            .font(.title.weight(.bold))
     }
-    
-    public func largeTitleText(type: FontType, topPadding: CGFloat = 37) -> some View {
+
+    public func largeTitleText(topPadding: CGFloat = 37) -> some View {
         self
-            .font(type: type, weight: .bold, style: .largeTitle)
+            .font(.largeTitle.weight(.bold))
             .foregroundColor(.primary)
             .frame(maxWidth: .infinity, alignment: .leading)
             .padding(.top, topPadding)
     }
-    
+
     public func buttonText() -> some View {
         self
-            .font(type: .poppins, weight: .bold, style: .headline)
+            .font(.headline.weight(.bold))
             .kerning(1.0)
     }
-    
+
     public func blurredBackgroundText() -> some View {
         self
-            .font(type: .poppins, weight: .regular, style: .caption1)
+            .font(.caption)
             .baselineOffset(1)
             .foregroundColor(.primary)
             .accessibility(addTraits: .isHeader)
@@ -45,33 +45,3 @@ extension Text {
             .background(RoundedRectangle(cornerRadius: Constants.cornerRadius / 1.5).fill(Color.white.opacity(0.25)))
     }
 }
-
-struct OffsetText<S>: View where S: StringProtocol {
-    private var content: S
-    private var font: CustomFont
-    
-    @ScaledMetric(relativeTo: .body) var baselineOffset = 1
-
-    init(_ content: S, font: CustomFont) {
-        self.content = content
-        self.font = font
-    }
-    
-    var body: some View {
-        Text(content)
-            .font(font)
-            .baselineOffset(baselineOffset)
-            .padding(.top, 1)
-    }
-}
-
-struct CustomFont: Sendable {
-    var type: FontType
-    var weight: FontWeight
-    var style: UIFont.TextStyle
-}
-
-extension CustomFont {
-    static let appButton = CustomFont(type: .poppins, weight: .light, style: .caption1)
-}
-

Sources/BlocKit/Extensions/View+CustomFont.swift

@@ -7,36 +7,34 @@
 
 import SwiftUI
 
-struct WideSlider: View {
+public struct WideSlider: View {
     @Binding var value: Double
-    
-    init(_ value: Binding<Double>) {
+    public var color: Color
+    public var step: Double
+    public var accessibilityLabel: LocalizedStringKey
+
+    public init(
+        _ value: Binding<Double>,
+        color: Color = .accentColor,
+        step: Double = 255,
+        accessibilityLabel: LocalizedStringKey = "Value"
+    ) {
         self._value = value
+        self.color = color
+        self.step = step
+        self.accessibilityLabel = accessibilityLabel
     }
-    
-    var colors: [Color] {
-        [.accentColor.opacity(0.8), .accentColor]
-    }
-    
-    var body: some View {
-        CustomSlider(value: $value, range: (0, 1)) { modifiers in
-            ZStack(alignment: .center) {
-                
-                LinearGradient(gradient: Gradient(colors: [.traitsBackground]), startPoint: .leading, endPoint: .trailing)
-                    .modifier(modifiers.barRight)
-                    .overlay(RoundedRectangle(cornerRadius: Constants.cornerRadius)
-                                .stroke(Color.stroke))
-                
-                LinearGradient(gradient: Gradient(colors: colors), startPoint: .leading, endPoint: .trailing)
-                    .modifier(modifiers.barLeft)
-                
-                Circle()
-                    .fill(Color.accentColor)
-                    .overlay(Circle().fill(Color.white.opacity(0.15)))
-                    .modifier(modifiers.knob)
-            }
-            .cornerRadius(Constants.cornerRadius)
-        }
-        .frame(height: 25)
+
+    public var body: some View {
+        Slider(value: $value, in: 0...1)
+            .tint(color)
+            .accentColor(color)
+            .accessibilityLabel(accessibilityLabel)
+            .accessibilityValue(Text("\(Int(round(value * step))) out of \(Int(step))"))
+            .accessibilityHint(Text("Swipe up or down to adjust") + Text(" ") + Text(accessibilityLabel) + Text(" from 0 to \(Int(step))"))
     }
 }
+
+#Preview {
+    WideSlider(.constant(0.5), color: .red, step: 255, accessibilityLabel: "Red")
+}

Sources/BlocKit/Slider/WideSlider.swift

@@ -1,34 +1,59 @@
 //
-//  CustomStepper.swift
+//  WideStepper.swift
 //  BlocKit
 //
 //  Created by Rudrank Riyam on 29/03/21.
 //
 
 import SwiftUI
-import AVFoundation
 
-struct WideStepper<Content: View>: View {
+public struct WideStepper<Content: View>: View {
     @Binding var value: Double
-    
+    public var color: Color
+    public var accessibilityLabel: LocalizedStringKey
+    public var step: Double
+
     let onIncrement: () -> ()
     let onDecrement: () -> ()
     let content: Content
-    
-    init(_ value: Binding<Double>, onIncrement: @escaping () -> (), onDecrement: @escaping () -> (), @ViewBuilder content: () -> Content) {
+
+    public init(
+        _ value: Binding<Double>,
+        color: Color = .accentColor,
+        accessibilityLabel: LocalizedStringKey = "Value",
+        step: Double = 255,
+        onIncrement: @escaping () -> (),
+        onDecrement: @escaping () -> (),
+        @ViewBuilder content: () -> Content
+    ) {
         self._value = value
         self.onIncrement = onIncrement
         self.onDecrement = onDecrement
+        self.color = color
+        self.accessibilityLabel = accessibilityLabel
+        self.step = step
         self.content = content()
     }
-    
-    var body: some View {
+
+    public var body: some View {
         HStack {
-            WideStepperButton(condition: value > 0, systemName: .minus, action: onDecrement)
-            
+            WideStepperButton(
+                condition: value > 0,
+                color: color,
+                systemName: .minus,
+                accessibilityLabel: accessibilityLabel,
+                action: onDecrement
+            )
+
             content
-            
-            WideStepperButton(condition: value < 1, systemName: .plus, action: onIncrement)
+
+            WideStepperButton(
+                condition: value < 1,
+                color: color,
+                systemName: .plus,
+                accessibilityLabel: accessibilityLabel,
+                action: onIncrement
+            )
         }
     }
 }