fix: use compound variants & export VisuallyHidden (#162)

magicbell · Nov 21, 2024 · 6d94104 · 6d94104
1 parent 9009ed8
commit 6d94104
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/.changeset/beige-bikes-peel.md 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
@@ -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
@@ -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
@@ -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';