fix: input otp alignment (#216)

nank1ro · Dec 31, 2024 · d3b96db · d3b96db
1 parent 17722c5
commit d3b96db
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 0.17.1
+
+- **FIX**: `ShadInputOTP` text alignment and padding
+- **FEAT**: Add `textInputAction` to `ShadInputOTPSlot`
+
 ## 0.17.0
 
 - **FEAT**: Add `ShadInputOTP` and `ShadInputOTPFormField` components.

diff --git a/lib/src/components/input_otp.dart b/lib/src/components/input_otp.dart
@@ -263,6 +263,7 @@ class ShadInputOTPSlot extends StatefulWidget {
     this.singleRadius,
     this.middleRadius,
     this.initialValue,
+    this.textInputAction,
   });
 
   /// {@template ShadInputOTPSlot.focusNode}
@@ -339,8 +340,16 @@ class ShadInputOTPSlot extends StatefulWidget {
   /// {@endtemplate}
   final BorderRadius? middleRadius;
 
+  /// {@template ShadInputOTPSlot.initialValue}
+  /// The initial value of the slot.
+  /// {@endtemplate}
   final String? initialValue;
 
+  /// {@template ShadInputOTPSlot.textInputAction}
+  /// The text input action for the slot, defaults to null
+  /// {@endtemplate}
+  final TextInputAction? textInputAction;
+
   @override
   State<ShadInputOTPSlot> createState() => _ShadInputOTPSlotState();
 }
@@ -457,7 +466,7 @@ class _ShadInputOTPSlotState extends State<ShadInputOTPSlot> {
 
     final effectivePadding = widget.padding ??
         theme.inputOTPTheme.padding ??
-        const EdgeInsets.symmetric(horizontal: 12, vertical: 4);
+        const EdgeInsets.symmetric(vertical: 4);
 
     final effectiveWidth = widget.width ?? theme.inputOTPTheme.width ?? 40.0;
     final effectiveHeight = widget.height ?? theme.inputOTPTheme.height ?? 40.0;
@@ -497,6 +506,8 @@ class _ShadInputOTPSlotState extends State<ShadInputOTPSlot> {
         focusNode: focusNode,
         controller: controller,
         decoration: effectiveDecoration,
+        textAlign: TextAlign.center,
+        textInputAction: widget.textInputAction,
         onChanged: (v) {
           // sanitize the text and format it
           var sanitizedV = v.replaceAll(kInvisibleCharCode, '');

diff --git a/lib/src/theme/themes/default_theme_no_secondary_border_variant.dart b/lib/src/theme/themes/default_theme_no_secondary_border_variant.dart
@@ -953,7 +953,7 @@ class ShadDefaultThemeNoSecondaryBorderVariant extends ShadThemeVariant {
       ),
       singleRadius: radius,
       middleRadius: BorderRadius.zero,
-      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+      padding: const EdgeInsets.symmetric(vertical: 4),
       decoration: ShadDecoration(
         disableSecondaryBorder: true,
         focusedBorder: ShadBorder.all(

diff --git a/lib/src/theme/themes/default_theme_variant.dart b/lib/src/theme/themes/default_theme_variant.dart
@@ -919,7 +919,7 @@ class ShadDefaultThemeVariant extends ShadThemeVariant {
       ),
       singleRadius: radius,
       middleRadius: BorderRadius.zero,
-      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+      padding: const EdgeInsets.symmetric(vertical: 4),
       decoration: ShadDecoration(
         disableSecondaryBorder: true,
         focusedBorder: ShadBorder.all(

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: shadcn_ui
 description: shadcn-ui ported in Flutter. Awesome UI components for Flutter, fully customizable.
-version: 0.17.0
+version: 0.17.1
 homepage: https://flutter-shadcn-ui.mariuti.com
 repository: https://github.com/nank1ro/flutter-shadcn-ui
 documentation: https://flutter-shadcn-ui.mariuti.com