The application utilizes a customized Material 3 design system to provide interactive input controls. It features standard form elements like search bars and switches, alongside highly specialized components for premium features (glowing buttons) and safety mechanisms (destructive countdowns). The system heavily integrates haptic feedback and fluid animations to enhance user interaction.
The input components rely on the Material 3 color scheme but introduce custom visual effects for high-emphasis elements.
Standard Inputs
Standard inputs (Search, Date/Time pickers) use the Surface and Primary color roles to blend seamlessly with the system theme. They utilize standard Material shapes (Extra Large for search bars).
Premium Actions
“Get Access” style buttons use custom Rainbow Gradients and Blur Effects. These ignore standard theme colors in favor of eye-catching, animated gradients to drive conversion.
What it is: A safety mechanism for irreversible actions. The button remains disabled while a red progress bar fills the background.Behavior Flow:Properties:
Property
Description
totalSeconds
Duration of the lockout (default: 5s).
text
Label shown. Changes to “Wait X…” during countdown.
Safety First: Always use the DestructiveCountdownButton for data deletion or account removal. Never use a standard button for these actions.
Premium Distinction: Use GlowingBorderButton or RainbowButtonexclusively for upgrade paths or subscription features. Do not use them for standard navigation.
Input Modality:
Date/Time pickers should default to “Picker” (visual) mode but allow switching to “Input” (keyboard) mode.
On small screens (landscape), the Time Picker automatically switches to Input mode to save vertical space.
Search Behavior: The AppSearchBar automatically shows a “Clear” (X) icon only when text is present and the field is focused.
