Four PIN entry components for OTP and passcode screens. Single-slot views (TTBaseLinePinView, TTBaseSquarePinView) are composable into multi-slot rows (TTBaseLinePinsView, TTBaseSquarePinsView).

Class	Style	Slots
TTBaseLinePinView	Underline only	Single
TTBaseLinePinsView	Underline only	Multi (row)
TTBaseSquarePinView	Square bordered box	Single
TTBaseSquarePinsView	Square bordered box	Multi (row)

---

📏 Line PIN (underline style)

// Single slot — set/clear text, active/inactive states
let pinSlot = TTBaseLinePinView()
pinSlot.setText(text: "5")  // Shows digit
pinSlot.setActive()          // Active: themed color
pinSlot.setNonActive()       // Inactive: dimmed
pinSlot.setLine()            // Reset to empty line

// Multi-slot row (e.g. 6-digit OTP)
let pinsView = TTBaseLinePinsView(numberOfPins: 6)
view.addSubview(pinsView)

// Handle input
textField.addTarget(self, action: #selector(textChanged), for: .editingChanged)

@objc func textChanged() {
    let text = textField.text ?? ""
    pinsView.updatePins(text: text)
}

---

🔲 Square PIN (box style)

// Single slot — three visual states
let slot = TTBaseSquarePinView()
slot.setText(text: "3")      // Show digit (active, border changes)
slot.setCircle()             // Show filled circle (secure style)
slot.setLine()               // Show small dash (empty)
slot.setShow()               // Show digit, hide circle and dash
slot.setHidden(withCircleColor: .systemBlue) // Show circle with color

// Multi-slot (passcode lock screen style)
let passcodeView = TTBaseSquarePinsView(numberOfPins: 4)
passcodeView.style = .circle  // Use circle dots instead of digits
view.addSubview(passcodeView)

---

📖 Single Slot API

TTBaseLinePinView

Member	Description
setText(text:)	Display digit, unhide label
setActive()	Active color (text + line)
setNonActive()	Dimmed color
setLine()	Reset to empty state
nonActiveColor	Override inactive color
activeColor	Override active color
isBoldPIN	Bold digit font (default: true)

TTBaseSquarePinView

Member	Description
setText(text:)	Show digit, hide circle/dash
setCircle()	Show filled circle dot
setLine()	Show small dash (empty)
setShow()	Show digit, hide others
setHidden(withCircleColor:)	Show circle with specified color