Accordion

docs/pages/docs/accordion.mdx

@@ -0,0 +1,142 @@
+import { Tabs } from 'nextra/components';
+import { Widget } from "../../components/widget";
+import LinkBadge from "../../components/link-badge/link-badge";
+import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+
+# Accordion
+A vertically stacked set of interactive headings that each reveal a section of content.
+
+<LinkBadgeGroup>
+    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.accordion/forui.widgets.accordion-library.html"/>
+</LinkBadgeGroup>
+
+<Tabs items={['Preview', 'Code']}>
+    <Tabs.Tab>
+        <Widget name='accordion' query={{controller: 'default-max'}} height={500}/>
+    </Tabs.Tab>
+    <Tabs.Tab>
+        ```dart
+        const Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            FAccordion(
+              controller: FAccordionController(max: 2),
+              items: [
+                FAccordionItem(
+                  title: const Text('Is it accessible?'),
+                  child: const Text('Yes. It adheres to the WAI-ARIA design pattern.'),
+                ),
+                FAccordionItem(
+                  initiallyExpanded: true,
+                  title: const Text('Is it Styled?'),
+                  child: const Text(
+                    "Yes. It comes with default styles that matches the other components' aesthetics",
+                  ),
+                ),
+                FAccordionItem(
+                  title: const Text('Is it Animated?'),
+                  child: const Text(
+                    'Yes. It is animated by default, but you can disable it if you prefer',
+                  ),
+                ),
+              ],
+            ),
+          ],
+        );
+        ```
+    </Tabs.Tab>
+</Tabs>
+
+## Usage
+
+### `FAccordion(...)`
+
+```dart
+FAccordion(
+  controller: FAccordionController(min: 1, max: 2), // or FAccordionController.radio()
+  items: [
+    FAccordionItem(
+      title: const Text('Is it accessible?'),
+      child: const Text('Yes. It adheres to the WAI-ARIA design pattern.'),
+    ),
+  ],
+),
+```
+
+## Examples
+
+### With Radio Behaviour
+<Tabs items={['Preview', 'Code']}>
+    <Tabs.Tab>
+        <Widget name='accordion' query={{controller: 'radio'}} height={500}/>
+    </Tabs.Tab>
+    <Tabs.Tab>
+        ```dart {5}
+        const Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            FAccordion(
+              controller: FAccordionController.radio(),
+              items: [
+                FAccordionItem(
+                  title: const Text('Is it accessible?'),
+                  child: const Text('Yes. It adheres to the WAI-ARIA design pattern.'),
+                ),
+                FAccordionItem(
+                  title: const Text('Is it Styled?'),
+                  initiallyExpanded: true,
+                  child: const Text(
+                    "Yes. It comes with default styles that matches the other components' aesthetics",
+                  ),
+                ),
+                FAccordionItem(
+                  title: const Text('Is it Animated?'),
+                  child: const Text(
+                    'Yes. It is animated by default, but you can disable it if you prefer',
+                  ),
+                ),
+              ],
+            ),
+          ],
+        );
+        ```
+    </Tabs.Tab>
+</Tabs>
+
+### With Multi-select Behaviour
+<Tabs items={['Preview', 'Code']}>
+    <Tabs.Tab>
+        <Widget name='accordion' query={{controller: 'default'}} height={500}/>
+    </Tabs.Tab>
+    <Tabs.Tab>
+        ```dart {5}
+        const Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            FAccordion(
+              controller: FAccordionController(),
+              items: [
+                FAccordionItem(
+                  title: const Text('Is it accessible?'),
+                  child: const Text('Yes. It adheres to the WAI-ARIA design pattern.'),
+                ),
+                FAccordionItem(
+                  initiallyExpanded: true,
+                  title: const Text('Is it Styled?'),
+                  child: const Text(
+                    "Yes. It comes with default styles that matches the other components' aesthetics",
+                  ),
+                ),
+                FAccordionItem(
+                  title: const Text('Is it Animated?'),
+                  child: const Text(
+                    'Yes. It is animated by default, but you can disable it if you prefer',
+                  ),
+                ),
+              ],
+            ),
+          ],
+        );
+        ```
+    </Tabs.Tab>
+</Tabs>

forui/example/lib/sandbox.dart

@@ -19,7 +19,56 @@ class _SandboxState extends State<Sandbox> {
   }
 
   @override
-  Widget build(BuildContext context) => FSlider(
-        controller: FContinuousSliderController.range(selection: FSliderSelection(min: 0.30, max: 0.35)),
+  Widget build(BuildContext context) => Column(
+        children: [
+          FAccordion(
+            controller: FAccordionController(max: 2),
+            children: [
+              const FAccordionItem(
+                title: Text('Title 1'),
+                initiallyExpanded: true,
+                child: Text(
+                  'Yes. It adheres to the WAI-ARIA design pattern, wfihwe fdhfiwf dfhwiodf dfwhoif',
+                ),
+              ),
+              FAccordionItem(
+                title: const Text('Title 2'),
+                child: Container(
+                  width: 100,
+                  color: Colors.yellow,
+                  child: const Text(
+                    'Yes. It adheres to the WAI-ARIA design pattern geg wjfiweo dfjiowjf dfjio',
+                    textAlign: TextAlign.center,
+                  ),
+                ),
+              ),
+              const FAccordionItem(
+                title: Text('Title 3'),
+                child: Text(
+                  'Yes. It adheres to the WAI-ARIA design pattern',
+                  textAlign: TextAlign.left,
+                ),
+              ),
+              const FAccordionItem(
+                title: Text('Title 4'),
+                child: Text(
+                  'Yes. It adheres to the WAI-ARIA design pattern',
+                  textAlign: TextAlign.left,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 20),
+          FSelectGroup(
+            label: const Text('Select Group'),
+            description: const Text('Select Group Description'),
+            controller: FMultiSelectGroupController(min: 1, max: 2, values: {1}),
+            items: [
+              FSelectGroupItem.checkbox(value: 1, label: const Text('Checkbox 1'), semanticLabel: 'Checkbox 1'),
+              FSelectGroupItem.checkbox(value: 2, label: const Text('Checkbox 2'), semanticLabel: 'Checkbox 2'),
+              FSelectGroupItem.checkbox(value: 3, label: const Text('Checkbox 3'), semanticLabel: 'Checkbox 3'),
+            ],
+          ),
+        ],
       );
 }

forui/lib/forui.dart

@@ -5,6 +5,7 @@ export 'assets.dart';
 export 'foundation.dart';
 export 'theme.dart';
 
+export 'widgets/accordion.dart';
 export 'widgets/alert.dart';
 export 'widgets/avatar.dart';
 export 'widgets/badge.dart';

forui/lib/src/theme/theme_data.dart

@@ -25,6 +25,9 @@ final class FThemeData with Diagnosticable {
   /// The style. It is used to configure the miscellaneous properties, such as border radii, of Forui widgets.
   final FStyle style;
 
+  /// The accordion style.
+  final FAccordionStyle accordionStyle;
+
   /// The alert styles.
   final FAlertStyles alertStyles;
 
@@ -103,6 +106,7 @@ final class FThemeData with Diagnosticable {
   FThemeData({
     required this.colorScheme,
     required this.style,
+    required this.accordionStyle,
     required this.alertStyles,
     required this.avatarStyle,
     required this.badgeStyles,
@@ -141,6 +145,7 @@ final class FThemeData with Diagnosticable {
       colorScheme: colorScheme,
       typography: typography,
       style: style,
+      accordionStyle: FAccordionStyle.inherit(colorScheme: colorScheme, typography: typography),
       alertStyles: FAlertStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
       avatarStyle: FAvatarStyle.inherit(colorScheme: colorScheme, typography: typography),
       badgeStyles: FBadgeStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
@@ -214,6 +219,7 @@ final class FThemeData with Diagnosticable {
   ///```
   @useResult
   FThemeData copyWith({
+    FAccordionStyle? accordionStyle,
     FAlertStyles? alertStyles,
     FAvatarStyle? avatarStyle,
     FBadgeStyles? badgeStyles,
@@ -242,6 +248,7 @@ final class FThemeData with Diagnosticable {
         colorScheme: colorScheme,
         typography: typography,
         style: style,
+        accordionStyle: accordionStyle ?? this.accordionStyle,
         alertStyles: alertStyles ?? this.alertStyles,
         avatarStyle: avatarStyle ?? this.avatarStyle,
         badgeStyles: badgeStyles ?? this.badgeStyles,
@@ -274,6 +281,7 @@ final class FThemeData with Diagnosticable {
       ..add(DiagnosticsProperty('colorScheme', colorScheme, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('typography', typography, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('style', style, level: DiagnosticLevel.debug))
+      ..add(DiagnosticsProperty('accordionStyle', accordionStyle))
       ..add(DiagnosticsProperty('alertStyles', alertStyles, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('avatarStyle', avatarStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('badgeStyles', badgeStyles, level: DiagnosticLevel.debug))
@@ -307,6 +315,7 @@ final class FThemeData with Diagnosticable {
           colorScheme == other.colorScheme &&
           typography == other.typography &&
           style == other.style &&
+          accordionStyle == other.accordionStyle &&
           alertStyles == other.alertStyles &&
           avatarStyle == other.avatarStyle &&
           badgeStyles == other.badgeStyles &&
@@ -336,6 +345,7 @@ final class FThemeData with Diagnosticable {
       colorScheme.hashCode ^
       typography.hashCode ^
       style.hashCode ^
+      accordionStyle.hashCode ^
       alertStyles.hashCode ^
       avatarStyle.hashCode ^
       badgeStyles.hashCode ^