fix: input hint alignment

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.19.0
+
+- **BREAKING CHANGE**: `ShadInput` placeholder alignment. Removed `placeholder` in favor of `hintText` which is now of type `String`. This applies also to `ShadInputFormField`.
+- **BREAKING CHANGE**: Rename `searchPlaceholder` into `searchHintText` in `ShadSelect` and `ShadSelectTheme`.
+- **BREAKING CHANGE**: Rename `hourPlaceholder` into `hourHintText`, `minutePlaceholder` into `minuteHintText`, `secondPlaceholder` into `secondHintText` in `ShadTimePicker` and `ShadTimePickerTheme`.
+- **FIX**: Add `assert` to prevent `selected` date of `ShadCalendar` to be outside the `fromMonth:toMonth` range.
+
 ## 0.18.1
 
 - **FIX**: Set `ShadCard` clipBehavior to `Clip.antialias`, add `clipBehavior` to `ShadCard` and `ShadCardTheme`.

docs/src/content/docs/Components/card.mdx

@@ -48,7 +48,7 @@ class CardProject extends StatelessWidget {
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
             const Text('Name'),
-            const ShadInput(placeholder: Text('Name of your project')),
+            const ShadInput(hintText: 'Name of your project'),
             const SizedBox(height: 6),
             const Text('Framework'),
             ShadSelect<String>(

docs/src/content/docs/Components/form.mdx

@@ -38,7 +38,7 @@ class _FormPageState extends State<FormPage> {
                 ShadInputFormField(
                   id: 'username',
                   label: const Text('Username'),
-                  placeholder: const Text('Enter your username'),
+                  hintText: 'Enter your username',
                   description: const Text('This is your public display name.'),
                   validator: (v) {
                     if (v.length < 2) {

docs/src/content/docs/Components/input.mdx

@@ -14,7 +14,7 @@ Displays a form input field or a component that looks like an input field.
 ConstrainedBox(
   constraints: const BoxConstraints(maxWidth: 320),
   child: const ShadInput(
-    placeholder: Text('Email'),
+    hintText: 'Email',
     keyboardType: TextInputType.emailAddress,
   ),
 ),
@@ -40,7 +40,7 @@ class _PasswordInputState extends State<PasswordInput> {
   @override
   Widget build(BuildContext context) {
     return ShadInput(
-      placeholder: const Text('Password'),
+      hintText: 'Password',
       obscureText: obscure,
       prefix: const Padding(
         padding: EdgeInsets.all(4.0),

docs/src/content/docs/Components/select.mdx

@@ -222,7 +222,7 @@ class _SelectWithSearchState extends State<SelectWithSearch> {
       maxWidth: 300,
       placeholder: const Text('Select framework...'),
       onSearchChanged: (value) => setState(() => searchValue = value),
-      searchPlaceholder: const Text('Search framework'),
+      searchHintText: 'Search framework',
       options: [
         if (filteredFrameworks.isEmpty)
           const Padding(

example/lib/common/properties/string_property.dart

@@ -8,12 +8,12 @@ class MyStringProperty extends StatelessWidget {
     required this.label,
     required this.initialValue,
     required this.onChanged,
-    this.placeholder,
+    this.hintText,
     this.inputFormatters,
   });
 
   final String label;
-  final Widget? placeholder;
+  final String? hintText;
   final String? initialValue;
   final ValueChanged<String>? onChanged;
   final List<TextInputFormatter>? inputFormatters;
@@ -30,7 +30,7 @@ class MyStringProperty extends StatelessWidget {
         ShadInput(
           initialValue: initialValue,
           onChanged: onChanged,
-          placeholder: placeholder,
+          hintText: hintText,
           inputFormatters: inputFormatters,
         )
       ],

example/lib/main.dart

@@ -158,7 +158,7 @@ class _MainPageState extends State<MainPage> {
     return Scaffold(
       appBar: MyAppBar(
         titleWidget: ShadInput(
-          placeholder: const Text('Search ShadcnUI component'),
+          hintText: 'Search ShadcnUI component',
           onChanged: search.set,
         ),
       ),

example/lib/pages/calendar.dart

@@ -12,6 +12,7 @@ class CalendarPage extends StatefulWidget {
 }
 
 class _CalendarPageState extends State<CalendarPage> {
+  final today = DateTime.now();
   DateTime? selected = DateTime.now();
   bool reverseMonths = false;
   ShadCalendarCaptionLayout captionLayout = ShadCalendarCaptionLayout.label;
@@ -110,8 +111,8 @@ class _CalendarPageState extends State<CalendarPage> {
         Text('Single', style: theme.textTheme.h4),
         ShadCalendar(
           selected: selected,
-          fromMonth: DateTime(2023),
-          toMonth: DateTime(2024, 12),
+          fromMonth: DateTime(today.year),
+          toMonth: DateTime(today.year, 12),
           hideNavigation: hideNavigation,
           captionLayout: captionLayout,
           onMonthChanged: (date) {
@@ -127,8 +128,8 @@ class _CalendarPageState extends State<CalendarPage> {
         Text('Multiple', style: theme.textTheme.h4),
         ShadCalendar.multiple(
           numberOfMonths: 2,
-          fromMonth: DateTime(2024),
-          toMonth: DateTime(2024, 12),
+          fromMonth: DateTime(today.year),
+          toMonth: DateTime(today.year, 12),
           onChanged: (dates) {},
           min: 5,
           max: 10,

example/lib/pages/card.dart

@@ -71,7 +71,7 @@ class _CardPageState extends State<CardPage> {
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
                 const Text('Name'),
-                const ShadInput(placeholder: Text('Name of your project')),
+                const ShadInput(hintText: 'Name of your project'),
                 const SizedBox(height: 6),
                 const Text('Framework'),
                 ShadSelect<String>(

example/lib/pages/input.dart

@@ -31,13 +31,25 @@ class _InputPageState extends State<InputPage> {
         ),
       ],
       children: [
+        SizedBox(
+          width: 40,
+          child: ShadInput(
+            padding: const EdgeInsets.symmetric(vertical: 8),
+            textAlign: TextAlign.center,
+            hintText: '0',
+            style: const TextStyle(fontSize: 12),
+            hintStyle: const TextStyle(fontSize: 12),
+            enabled: enabled,
+            keyboardType: TextInputType.emailAddress,
+          ),
+        ),
         ShadInput(
-          placeholder: const Text('Email'),
+          hintText: 'Email',
           enabled: enabled,
           keyboardType: TextInputType.emailAddress,
         ),
         ShadInput(
-          placeholder: const Text('Password'),
+          hintText: 'Password',
           enabled: enabled,
           obscureText: obscure,
           prefix: const Padding(

example/lib/pages/input_form_field.dart

@@ -52,7 +52,7 @@ class _InputFormFieldPageState extends State<InputFormFieldPage> {
           MyStringProperty(
             label: 'Form Initial Value',
             initialValue: initialValue,
-            placeholder: const Text('Name'),
+            hintText: 'Name',
             onChanged: (value) {
               setState(() {
                 value.isEmpty ? initialValue = null : initialValue = value;
@@ -74,7 +74,7 @@ class _InputFormFieldPageState extends State<InputFormFieldPage> {
                   id: 'username',
                   prefix: const Icon(LucideIcons.user),
                   label: const Text('Username'),
-                  placeholder: const Text('Enter your username'),
+                  hintText: 'Enter your username',
                   description: const Text('This is your public display name.'),
                   validator: (v) {
                     if (v.length < 2) {

example/lib/pages/input_otp_form_field.dart

@@ -52,7 +52,7 @@ class _InputOTPFormFieldPageState extends State<InputOTPFormFieldPage> {
           MyStringProperty(
             label: 'Form Initial Value',
             initialValue: initialValue,
-            placeholder: const Text('OTP initial value'),
+            hintText: 'OTP initial value',
             onChanged: (value) {
               setState(() {
                 value.isEmpty ? initialValue = null : initialValue = value;

example/lib/pages/select.dart

@@ -201,7 +201,7 @@ class _SelectPageState extends State<SelectPage> {
           maxWidth: 300,
           placeholder: const Text('Select framework...'),
           onSearchChanged: (value) => setState(() => searchValue = value),
-          searchPlaceholder: const Text('Search framework'),
+          searchHintText: 'Search framework',
           options: [
             if (filteredFrameworks.isEmpty)
               const Padding(

example/lib/pages/time_picker.dart

@@ -17,6 +17,11 @@ class TimePickerPage extends StatelessWidget {
               padding: EdgeInsets.only(left: 8, top: 14),
               child: Icon(LucideIcons.clock4),
             ),
+            // fieldWidth: 40,
+            // spacing: 8,
+            // style: TextStyle(fontSize: 12),
+            // placeholderStyle: TextStyle(fontSize: 12),
+            // fieldPadding: EdgeInsets.zero,
             onChanged: (time) {
               print('time: $time');
             },

lib/src/components/avatar.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:shadcn_ui/shadcn_ui.dart';
+import 'package:shadcn_ui/src/theme/data.dart';
+import 'package:shadcn_ui/src/theme/theme.dart';
 import 'package:shadcn_ui/src/utils/debug_check.dart';
 import 'package:universal_image/universal_image.dart';
 

lib/src/components/calendar.dart

@@ -1081,6 +1081,20 @@ class _ShadCalendarState extends State<ShadCalendar> {
       'When fixedWeeks is true, showOutsideDays must be true',
     );
 
+    assert(
+      widget.selected == null ||
+          (widget.fromMonth == null ||
+              widget.selected!.isSameDayOrGreatier(widget.fromMonth!)),
+      'The selected date cannot be before fromMonth',
+    );
+
+    assert(
+      widget.selected == null ||
+          (widget.toMonth == null ||
+              widget.selected!.isSameDayOrLower(widget.toMonth!)),
+      'The selected date cannot be greater than toMonth',
+    );
+
     final theme = ShadTheme.of(context);
 
     final effectiveCaptionLayout =

lib/src/components/form/fields/input.dart

@@ -26,7 +26,7 @@ class ShadInputFormField extends ShadFormBuilderField<String> {
     super.valueTransformer,
     super.onReset,
     ShadDecoration? decoration,
-    Widget? placeholder,
+    String? hintText,
     TextMagnifierConfiguration magnifierConfiguration =
         TextMagnifierConfiguration.disabled,
     TextInputType? keyboardType,
@@ -87,7 +87,6 @@ class ShadInputFormField extends ShadFormBuilderField<String> {
     MainAxisAlignment? mainAxisAlignment,
     CrossAxisAlignment? crossAxisAlignment,
     TextStyle? placeholderStyle,
-    Alignment? placeholderAlignment,
     EdgeInsets? inputPadding,
     double? gap,
   }) : super(
@@ -148,7 +147,7 @@ class ShadInputFormField extends ShadFormBuilderField<String> {
               enableInteractiveSelection: enableInteractiveSelection,
               undoController: undoController,
               spellCheckConfiguration: spellCheckConfiguration,
-              placeholder: placeholder,
+              hintText: hintText,
               onPressed: onPressed,
               onPressedAlwaysCalled: onPressedAlwaysCalled,
               onPressedOutside: onPressedOutside,
@@ -167,8 +166,7 @@ class ShadInputFormField extends ShadFormBuilderField<String> {
               suffix: suffix,
               mainAxisAlignment: mainAxisAlignment,
               crossAxisAlignment: crossAxisAlignment,
-              placeholderStyle: placeholderStyle,
-              placeholderAlignment: placeholderAlignment,
+              hintStyle: placeholderStyle,
               inputPadding: inputPadding,
               gap: gap,
             );

lib/src/components/form/fields/select.dart

@@ -142,7 +142,7 @@ class ShadSelectFormField<T> extends ShadFormBuilderField<T> {
     ImageFilter? filter,
     Widget? searchDivider,
     Widget? searchInputPrefix,
-    Widget? searchPlaceholder,
+    String? searchHintText,
     EdgeInsets? searchPadding,
     Widget? search,
     bool? clearSearchOnClose,
@@ -198,7 +198,7 @@ class ShadSelectFormField<T> extends ShadFormBuilderField<T> {
               onSearchChanged: onSearchChanged,
               searchDivider: searchDivider,
               searchInputPrefix: searchInputPrefix,
-              searchPlaceholder: searchPlaceholder,
+              searchHintText: searchHintText,
               searchPadding: searchPadding,
               search: search,
               clearSearchOnClose: clearSearchOnClose,
@@ -248,7 +248,7 @@ class ShadSelectFormField<T> extends ShadFormBuilderField<T> {
     ImageFilter? filter,
     Widget? searchDivider,
     Widget? searchInputPrefix,
-    Widget? searchPlaceholder,
+    String? searchHintText,
     EdgeInsets? searchPadding,
     Widget? search,
     bool? clearSearchOnClose,
@@ -311,7 +311,7 @@ class ShadSelectFormField<T> extends ShadFormBuilderField<T> {
               onSearchChanged: onSearchChanged,
               searchDivider: searchDivider,
               searchInputPrefix: searchInputPrefix,
-              searchPlaceholder: searchPlaceholder,
+              searchHintText: searchHintText,
               searchPadding: searchPadding,
               search: search,
               clearSearchOnClose: clearSearchOnClose,
@@ -459,7 +459,7 @@ class ShadSelectMultipleFormField<T> extends ShadFormBuilderField<List<T>> {
     ImageFilter? filter,
     Widget? searchDivider,
     Widget? searchInputPrefix,
-    Widget? searchPlaceholder,
+    String? searchHintText,
     EdgeInsets? searchPadding,
     Widget? search,
     bool? clearSearchOnClose,
@@ -507,7 +507,7 @@ class ShadSelectMultipleFormField<T> extends ShadFormBuilderField<List<T>> {
               onSearchChanged: onSearchChanged,
               searchDivider: searchDivider,
               searchInputPrefix: searchInputPrefix,
-              searchPlaceholder: searchPlaceholder,
+              searchHintText: searchHintText,
               searchPadding: searchPadding,
               search: search,
               clearSearchOnClose: clearSearchOnClose,
@@ -555,7 +555,7 @@ class ShadSelectMultipleFormField<T> extends ShadFormBuilderField<List<T>> {
     ImageFilter? filter,
     Widget? searchDivider,
     Widget? searchInputPrefix,
-    Widget? searchPlaceholder,
+    String? searchHintText,
     EdgeInsets? searchPadding,
     Widget? search,
     bool? clearSearchOnClose,
@@ -605,7 +605,7 @@ class ShadSelectMultipleFormField<T> extends ShadFormBuilderField<List<T>> {
               onSearchChanged: onSearchChanged,
               searchDivider: searchDivider,
               searchInputPrefix: searchInputPrefix,
-              searchPlaceholder: searchPlaceholder,
+              searchHintText: searchHintText,
               searchPadding: searchPadding,
               search: search,
               clearSearchOnClose: clearSearchOnClose,