Improve FDialog with touch/desktop styles and image support (#948)

* Refine tab swipe implementation

* Improve FDialog with touch/desktop styles, image support, and expanded test coverage

- Add image parameter to FDialog constructors
- Introduce FDialogContentStyles extension type with touch/desktop differentiation
- Rework spacing model with titlePadding, bodyPadding, imageSpacing, expandActions
- Left-align VerticalContent (was center)
- Add comprehensive golden tests for touch and desktop variants
- Update docs_snippets usages and changelog

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Prepare Forui for review

* Update goldens

* Update changelog

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Pante <Pante@users.noreply.github.com>

Author: Pante

docs/content/docs/navigation/tabs.mdx

@@ -4,11 +4,13 @@ description: A set of layered sections of content—known as tab entries—that
 apiReference: https://pub.dev/documentation/forui/latest/forui.widgets.tabs/
 ---
 
+import { Callout } from 'fumadocs-ui/components/callout';
 import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
 import { Widget } from '@/components/demo/widget';
 import { CodeSnippet } from '@/components/code-snippet/code-snippet';
 import { UsageSnippet } from '@/components/usage-snippet/usage-snippet';
 import defaultSnippet from '@/snippets/examples/tabs/default.json';
+import swipeableSnippet from '@/snippets/examples/tabs/swipeable.json';
 import tabsUsage from '@/snippets/usages/widgets/tabs/tabs.json';
 import tabEntryUsage from '@/snippets/usages/widgets/tabs/tabEntry.json';
 
@@ -43,11 +45,18 @@ To generate a specific style for customization:
 
 ## Examples
 
-### Behavior
+### Swipeable
 
-#### Swipe Navigation
+<Callout type="info">
+  Hold `Shift` while scrolling to swipe between tabs on desktop and web.
+</Callout>
 
-The tab content area supports horizontal swipe navigation when `expands` is true and `swipeablePhysics` resolves to an enabled value.
+<Tabs items={['Preview', 'Code']}>
+  <Tab value="Preview">
+    <Widget name='tabs' variant='swipeable' height={500}/>
+  </Tab>
+  <Tab value="Code">
+    <CodeSnippet snippet={swipeableSnippet} />
+  </Tab>
+</Tabs>
 
-- **Defaults:** On non-desktop platforms (mobile and web), `swipeablePhysics` defaults to an enabled value, so swipe navigation is on when `expands` is true. On desktop it defaults to disabled. Use `swipeablePhysics` to override.
-- **Physics:** When swipe navigation is enabled, the scroll physics default to `BouncingScrollPhysics`.

docs_snippets/lib/examples/widgets/tabs.dart

@@ -55,3 +55,55 @@ class TabsPage extends Example {
     ],
   );
 }
+
+@RoutePage()
+class SwipeableTabsPage extends Example {
+  SwipeableTabsPage({@queryParam super.theme});
+
+  @override
+  Widget example(BuildContext _) => Padding(
+    padding: const .all(16),
+    child: SizedBox(
+      height: 350,
+      child: FTabs(
+        // {@highlight}
+        expands: true,
+        // {@endhighlight}
+        children: [
+          .entry(
+            label: const Text('Account'),
+            child: FCard(
+              title: const Text('Account'),
+              subtitle: const Text('Make changes to your account here. Click save when you are done.'),
+              child: Column(
+                children: [
+                  const FTextField(label: Text('Name'), hint: 'John Renalo'),
+                  const SizedBox(height: 10),
+                  const FTextField(label: Text('Email'), hint: 'john@doe.com'),
+                  const SizedBox(height: 16),
+                  FButton(child: const Text('Save'), onPress: () {}),
+                ],
+              ),
+            ),
+          ),
+          .entry(
+            label: const Text('Password'),
+            child: FCard(
+              title: const Text('Password'),
+              subtitle: const Text('Change your password here. After saving, you will be logged out.'),
+              child: Column(
+                children: [
+                  const FTextField(label: Text('Current password')),
+                  const SizedBox(height: 10),
+                  const FTextField(label: Text('New password')),
+                  const SizedBox(height: 16),
+                  FButton(child: const Text('Save'), onPress: () {}),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    ),
+  );
+}

docs_snippets/lib/main.dart

@@ -231,6 +231,7 @@ class _AppRouter extends RootStackRouter {
     AutoRoute(path: '/switch/disabled', page: DisabledSwitchRoute.page),
     AutoRoute(path: '/switch/form', page: FormSwitchRoute.page),
     AutoRoute(path: '/tabs/default', page: TabsRoute.page),
+    AutoRoute(path: '/tabs/swipeable', page: SwipeableTabsRoute.page),
     AutoRoute(path: '/tappable/default', page: TappableRoute.page),
     AutoRoute(path: '/tappable/bounce', page: TappableBounceRoute.page),
     AutoRoute(path: '/tappable-group/default', page: TappableGroupRoute.page),

docs_snippets/lib/usages/widgets/dialog.dart

@@ -17,6 +17,7 @@ final dialog = FDialog(
   // {@endcategory}
   // {@category "Core"}
   style: const .delta(insetPadding: .value(.zero)),
+  image: null,
   title: const Text('Title'),
   body: const Text('Body'),
   actions: [FButton(onPress: () {}, child: const Text('Action'))],
@@ -35,6 +36,7 @@ final adaptive = FDialog.adaptive(
   // {@endcategory}
   // {@category "Core"}
   style: const .delta(insetPadding: .value(.zero)),
+  image: null,
   title: const Text('Title'),
   body: const Text('Body'),
   actions: [FButton(onPress: () {}, child: const Text('Action'))],

docs_snippets/lib/usages/widgets/tabs.dart

@@ -8,12 +8,10 @@ final tabs = FTabs(
   // {@category "Control"}
   control: const .managed(),
   // {@endcategory}
-  // {@category "Tab Bar"}
-  scrollable: false,
-  // {@endcategory}
   // {@category "Core"}
-  swipeablePhysics: null,
+  scrollable: false,
   physics: null,
+  contentPhysics: const BouncingScrollPhysics(),
   style: const .delta(spacing: 10),
   mouseCursor: .defer,
   onPress: (index) {},

forui/CHANGELOG.md

@@ -9,6 +9,21 @@
 * Fix default text styles created by `FTypography` to include a `fontFamily`.
 
 
+### `FDialog`
+We've adjusted `FDialog`'s styling to be more visually pleasing on touch devices.
+
+* Add `FDialog.image` parameter.
+* Add `FDialogContentStyle.titlePadding`.
+* Add `FDialogContentStyle.bodyPadding`.
+* Add `FDialogContentStyle.imageSpacing`.
+* Add `FDialogContentStyle.expandActions`.
+* Add `FDialogContentStyles` extension type.
+
+* **Breaking** Change `FDialogContentStyle` fields to have defaults instead of being required.
+* **Breaking** Change `VerticalContent` alignment from center to start.
+* **Breaking** Remove `FDialogContentStyle.bodySpacing`. Use `FDialogContentStyle.titleSpacing` instead.
+
+
 ### `FItem`
 * Add `FInheritedItemCallbacks`.
 * Add `FItemMixin.submenu(...)` shorthand for `FSubmenuItem`.
@@ -28,9 +43,10 @@
 
 
 ### `FTabs`
-* Add swipe navigation when `expands` is true. When swipe navigation is enabled (i.e. `expands` is true and `swipeablePhysics` resolves to true), the content area's `physics` defaults to `BouncingScrollPhysics`.
-* Add `FTabs.swipeablePhysics` to toggle swipe navigation independently from `scrollable`.
-* Add assertion to catch `FTabs(expands: true)` in containers with unbounded height.
+* Add swipe/scroll navigation when `expands` is true, with `BouncingScrollPhysics` by default.
+* Add `FTabs.contentPhysics` to customize the content area's scroll physics.
+
+* **Breaking** Remove `FTabs.swipeablePhysics`. Use `FTabs.contentPhysics` instead.
 
 
 ### `FTile`

forui/README.md

@@ -91,6 +91,7 @@ Forui provides the following widgets:
   - Picker
   - Radio
   - Multi-select
+  - OTP Field
   - Select
   - Select Group
   - Slider

forui/bin/commands/style/style.dart

@@ -31,6 +31,7 @@ dependencies:
   flutter_hooks: ^0.21.0
   forui:
   intl: any
+  lottie: ^3.3.2
   sugar: ^4.0.0
   wakelock_plus: ^1.2.8
 
@@ -49,6 +50,8 @@ flutter:
   # assets:
   #   - images/a_dot_burr.jpeg
   #   - images/a_dot_ham.jpeg
+  assets:
+    - assets/profile.json
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware