feat(dialog): add size variant (#84)

giantnodes · May 7, 2024 · e602926 · e602926
1 parent f3b79c6
commit e602926
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/react/src/components/dialog/Dialog.tsx b/packages/react/src/components/dialog/Dialog.tsx
@@ -24,11 +24,11 @@ type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE
 const Component: ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
   props: ComponentProps<TElement>
 ) => {
-  const { as, children, className, blur, placement, ...rest } = props
+  const { as, children, className, size, blur, placement, ...rest } = props
 
   const Element = as ?? DialogTrigger
 
-  const context = useDialog({ blur, placement })
+  const context = useDialog({ size, blur, placement })
 
   const component = React.useMemo<Omit<DialogTriggerProps, 'children'>>(
     () => ({

diff --git a/packages/react/src/components/dialog/use-dialog.hook.ts b/packages/react/src/components/dialog/use-dialog.hook.ts
@@ -10,9 +10,9 @@ export type UseDialogProps = DialogVariantProps
 export type UseDialogReturn = ReturnType<typeof useDialog>
 
 export const useDialog = (props: UseDialogProps) => {
-  const { blur, placement } = props
+  const { size, blur, placement } = props
 
-  const slots = React.useMemo(() => dialog({ blur, placement }), [blur, placement])
+  const slots = React.useMemo(() => dialog({ size, blur, placement }), [size, blur, placement])
 
   return {
     slots,

diff --git a/packages/theme/src/components/dialog.ts b/packages/theme/src/components/dialog.ts
@@ -6,10 +6,21 @@ export const dialog = tv({
   slots: {
     dialog: [],
     overlay: ['flex', 'fixed inset-0 z-50', 'bg-black/50', 'min-h-full', 'overflow-y-auto', 'p-3'],
-    modal: ['w-full max-w-2xl', 'overflow-hidden'],
+    modal: ['w-full', 'overflow-hidden'],
     content: ['relative', 'outline-none'],
   },
   variants: {
+    size: {
+      sm: {
+        modal: ['max-w-2xl'],
+      },
+      md: {
+        modal: ['max-w-4xl'],
+      },
+      lg: {
+        modal: ['max-w-6xl'],
+      },
+    },
     blur: {
       true: {
         overlay: ['backdrop-blur-sm'],
@@ -26,6 +37,7 @@ export const dialog = tv({
     },
   },
   defaultVariants: {
+    size: 'md',
     blur: false,
     placement: 'center',
   },