From 6d941042872f5739c8aad53e6191d8308dc51def Mon Sep 17 00:00:00 2001
From: Stephan Meijer <stephan.meijer@gmail.com>
Date: Thu, 21 Nov 2024 12:05:56 +0100
Subject: [PATCH] fix: use compound variants & export VisuallyHidden (#162)

---
 .changeset/beige-bikes-peel.md                |  5 +++
 .../react/src/components/drawer.stories.tsx   | 13 ++++++--
 packages/react/src/components/drawer.tsx      | 31 +++++++++++++------
 packages/react/src/index.ts                   |  1 +
 4 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/beige-bikes-peel.md

diff --git a/.changeset/beige-bikes-peel.md b/.changeset/beige-bikes-peel.md
new file mode 100644
index 00000000..c8495fbe
--- /dev/null
+++ b/.changeset/beige-bikes-peel.md
@@ -0,0 +1,5 @@
+---
+'@darkmagic/react': minor
+---
+
+export VisuallyHidden
diff --git a/packages/react/src/components/drawer.stories.tsx b/packages/react/src/components/drawer.stories.tsx
index e25ce2a1..d0694287 100644
--- a/packages/react/src/components/drawer.stories.tsx
+++ b/packages/react/src/components/drawer.stories.tsx
@@ -44,6 +44,7 @@ Basic.args = {
   title: 'Drawer Title',
   description: 'Drawer Description',
   content: 'Drawer Content',
+  variant: 'inline',
 };
 
 export const Overlay: ComponentStoryFn<any> = (args) => (
@@ -95,7 +96,12 @@ ControlledOpen.args = {
 
 export const WithActions: ComponentStoryFn<any> = (args) => (
   <Tabs defaultValue="2">
-    <Drawer variant={args.variant} onRequestClose={action('onRequestClose')}>
+    <Drawer
+      align={args.align}
+      variant={args.variant}
+      onClickOutside={action('onClickOutside')}
+      onRequestClose={action('onRequestClose')}
+    >
       <Drawer.Title>{args.title}</Drawer.Title>
       <Drawer.Description>{args.description}</Drawer.Description>
 
@@ -136,7 +142,8 @@ WithActions.args = {
   title: 'Drawer Title',
   description: 'some description',
   content: 'Content',
-  variant: 'inline',
+  variant: 'overlay',
+  align: 'right',
 };
 
 export const WithTabs: ComponentStoryFn<any> = (args) => (
@@ -202,7 +209,7 @@ WithCode.args = {
 };
 
 export const EmptyShell: ComponentStoryFn<any> = (args) => (
-  <Drawer variant={args.variant}>
+  <Drawer variant={args.variant} open onClickOutside={action('click outside')}>
     <div>custom child content</div>
   </Drawer>
 );
diff --git a/packages/react/src/components/drawer.tsx b/packages/react/src/components/drawer.tsx
index bab9ef09..d958e465 100644
--- a/packages/react/src/components/drawer.tsx
+++ b/packages/react/src/components/drawer.tsx
@@ -41,20 +41,14 @@ const StyledDialogContent = styled(DialogPrimitive.Content, {
 
   variants: {
     align: {
-      right: {
-        right: '0',
-        animationName: `${slideLeftAndFade}`,
-      },
-      left: {
-        left: '0',
-        animationName: `${slideRightAndFade}`,
-      },
+      left: {},
+      right: {},
     },
+
     variant: {
       overlay: {
         position: 'fixed',
         top: '0',
-        right: '0',
         zIndex: 1,
         animationDuration: '400ms',
         animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
@@ -64,6 +58,25 @@ const StyledDialogContent = styled(DialogPrimitive.Content, {
       },
     },
   },
+
+  compoundVariants: [
+    {
+      align: 'left',
+      variant: 'overlay',
+      css: {
+        left: '0',
+        animationName: `${slideRightAndFade}`,
+      },
+    },
+    {
+      align: 'right',
+      variant: 'overlay',
+      css: {
+        right: '0',
+        animationName: `${slideLeftAndFade}`,
+      },
+    },
+  ],
 });
 
 type StyledDialogContentProps = ComponentProps<typeof StyledDialogContent>;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 1ce57f3b..8cfaa169 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -46,3 +46,4 @@ export * from './hooks/use-mousetrap.js';
 export * from './hooks/use-resize-observer.js';
 export * from './lib/dom.js';
 export * from './lib/stitches.js';
+export { VisuallyHidden } from '@radix-ui/react-visually-hidden';