Feat/sheet

Makefile

@@ -0,0 +1,7 @@
+compile:
+	cd playground && flutter build web --web-renderer canvaskit
+
+deploy:
+	cd playground && firebase deploy
+
+compile_and_deploy: compile deploy

README.md

@@ -38,7 +38,7 @@ Current progress:
 - [x] <strike>Scroll Area</strike> Use SingleScrollView, ListView etc. instead
 - [x] [Select](https://mariuti.com/shadcn-ui/components/select/)
 - [x] <strike>Separator</strike> Use Divider instead
-- [ ] Sheet
+- [x] [Sheet](https://mariuti.com/shadcn-ui/components/sheet/)
 - [ ] Skeleton
 - [x] [Slider](https://mariuti.com/shadcn-ui/components/slider/)
 - [ ] Sonner (?)

example/lib/main.dart

@@ -15,6 +15,7 @@ import 'package:example/pages/radio_group.dart';
 import 'package:example/pages/radio_group_form_field.dart';
 import 'package:example/pages/select.dart';
 import 'package:example/pages/select_form_field.dart';
+import 'package:example/pages/sheet.dart';
 import 'package:example/pages/slider.dart';
 import 'package:example/pages/switch.dart';
 import 'package:example/pages/switch_form_field.dart';
@@ -48,6 +49,7 @@ final routes = <String, WidgetBuilder>{
   '/radio-group-form-field': (_) => const RadioGroupFormFieldPage(),
   '/select': (_) => const SelectPage(),
   '/select-form-field': (_) => const SelectFormFieldPage(),
+  '/sheet': (_) => const SheetPage(),
   '/slider': (_) => const SliderPage(),
   '/switch': (_) => const SwitchPage(),
   '/switch-form-field': (_) => const SwitchFormFieldPage(),

example/lib/pages/dialog.dart

@@ -19,9 +19,8 @@ class DialogPage extends StatelessWidget {
         ShadButton.outline(
           text: const Text('Edit Profile'),
           onPressed: () {
-            showDialog(
+            showShadDialog(
               context: context,
-              barrierColor: Colors.black.withOpacity(.8),
               builder: (context) => ShadDialog(
                 title: const Text('Edit Profile'),
                 description: const Text(
@@ -62,9 +61,8 @@ class DialogPage extends StatelessWidget {
         ShadButton.outline(
           text: const Text('Show Dialog'),
           onPressed: () {
-            showDialog(
+            showShadDialog(
               context: context,
-              barrierColor: Colors.black.withOpacity(.8),
               builder: (context) => ShadDialog.alert(
                 title: const Text('Are you absolutely sure?'),
                 description: const Padding(

example/lib/pages/sheet.dart

@@ -0,0 +1,88 @@
+import 'package:example/common/base_scaffold.dart';
+import 'package:example/common/properties/enum_property.dart';
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+final profile = [
+  (title: 'Name', value: 'Alexandru'),
+  (title: 'Username', value: 'nank1ro'),
+];
+
+class SheetPage extends StatefulWidget {
+  const SheetPage({super.key});
+
+  @override
+  State<SheetPage> createState() => _SheetPageState();
+}
+
+class _SheetPageState extends State<SheetPage> {
+  var side = ShadSheetSide.bottom;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    return BaseScaffold(
+      appBarTitle: 'Sheet',
+      editable: [
+        MyEnumProperty(
+          label: 'Side',
+          value: side,
+          values: ShadSheetSide.values,
+          onChanged: (value) => setState(() => side = value),
+        ),
+      ],
+      children: [
+        ShadButton.outline(
+          text: const Text('Open'),
+          onPressed: () {
+            showShadSheet(
+              context: context,
+              side: side,
+              builder: (context) {
+                return ShadSheet(
+                  title: const Text('Edit Profile'),
+                  description: const Text(
+                      "Make changes to your profile here. Click save when you're done"),
+                  content: SizedBox(
+                    width: side == ShadSheetSide.bottom ||
+                            side == ShadSheetSide.top
+                        ? MediaQuery.sizeOf(context).width
+                        : null,
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(vertical: 20),
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        crossAxisAlignment: CrossAxisAlignment.end,
+                        children: profile
+                            .map(
+                              (p) => Row(
+                                children: [
+                                  Expanded(
+                                    child: Text(
+                                      p.title,
+                                      textAlign: TextAlign.end,
+                                      style: theme.textTheme.small,
+                                    ),
+                                  ),
+                                  const SizedBox(width: 16),
+                                  Expanded(
+                                    flex: 3,
+                                    child: ShadInput(initialValue: p.value),
+                                  ),
+                                ],
+                              ),
+                            )
+                            .toList(),
+                      ),
+                    ),
+                  ),
+                  actions: const [ShadButton(text: Text('Save changes'))],
+                );
+              },
+            );
+          },
+        ),
+      ],
+    );
+  }
+}

lib/shadcn_ui.dart

@@ -27,6 +27,7 @@ export 'src/components/slider.dart';
 export 'src/components/switch.dart';
 export 'src/components/toast.dart';
 export 'src/components/tooltip.dart';
+export 'src/components/sheet.dart';
 
 // Assets
 export 'src/assets.dart';
@@ -60,6 +61,7 @@ export 'src/theme/components/slider.dart';
 export 'src/theme/components/switch.dart';
 export 'src/theme/components/toast.dart';
 export 'src/theme/components/tooltip.dart';
+export 'src/theme/components/sheet.dart';
 
 // Utils
 export 'src/utils/position.dart';