@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.5

package/src/components/dialog.tsx

@@ -1,13 +1,9 @@
-"use client";
-
-import type { VariantProps } from "#/lib/utils";
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
+import { Button } from "#/components/button";
 import { cn } from "#/lib/utils";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-
-import { buttonVariants } from "#/variants/button";
 
 /* -----------------------------------------------------------------------------
  * Component: Dialog
@@ -49,76 +45,38 @@ function DialogTrigger({ ...props }: DialogTriggerProps): JSX.Element {
  * @since 0.3.16-canary.0
  */
 interface DialogContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
-  classNames?: {
-    close?: string;
-    content?: string;
-    overlay?: string;
-    wrapper?: string;
-  };
+  showCloseButton?: boolean;
 }
 
 /**
  * @since 0.3.16-canary.0
  */
-function DialogContent({
-  children,
-  className,
-  classNames,
-  ...props
-}: DialogContentProps): JSX.Element {
+function DialogContent({ children, className, showCloseButton = true, ...props }: DialogContentProps): JSX.Element {
   return (
-    <DialogPrimitive.Portal>
+    <DialogPrimitive.Portal data-slot="dialog-portal">
       <DialogPrimitive.Overlay
-        className={cn(
-          "fixed inset-0 z-50",
-          "bg-black/40 backdrop-blur-sm",
-          "ease-gentle data-open:animate-in data-open:duration-300 data-open:fade-in-0",
-          "data-closed:animate-out data-closed:duration-200 data-closed:fade-out-0",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          classNames?.overlay,
-        )}
+        className={
+          "fixed inset-0 isolate z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0"
+        }
         data-slot="dialog-overlay"
       />
       <DialogPrimitive.Content
         className={cn(
-          "fixed inset-0 z-50 grid grid-rows-[1fr_auto] justify-items-center overflow-auto",
-          "sm:grid-rows-[1fr_auto_3fr] sm:p-4",
-          "ease-gentle data-open:animate-in data-open:duration-300",
-          "max-sm:data-open:animation-duration-380 max-sm:data-open:slide-in-from-bottom",
-          "sm:data-open:fade-in-0 sm:data-open:zoom-in-95",
-          "data-closed:animate-out data-closed:duration-200",
-          "max-sm:data-closed:animation-duration-280 max-sm:data-closed:slide-out-to-bottom",
-          "sm:data-closed:fade-out-0 sm:data-closed:zoom-out-95",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          classNames?.wrapper,
+          "fixed start-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none sm:max-w-md rtl:translate-x-1/2 data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
         )}
-        data-slot="dialog-content-wrapper"
+        data-slot="dialog-content"
         {...props}
       >
-        <div
-          className={cn(
-            "relative row-start-2 flex w-full flex-col",
-            "rounded-t-2xl border",
-            "bg-popover text-popover-foreground shadow-lg",
-            "sm:max-w-lg sm:rounded-2xl",
-            classNames?.content,
-            className,
-          )}
-          data-slot="dialog-content"
-        >
-          {children}
-          <DialogPrimitive.Close
-            className={buttonVariants({
-              className: ["absolute top-2.5 right-2.5 size-7", classNames?.close],
-              size: "icon",
-              variant: "ghost",
-            })}
-            data-slot="dialog-close"
-          >
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
+        {children}
+        {showCloseButton ? (
+          <DialogPrimitive.Close asChild data-slot="dialog-close">
+            <Button className="absolute end-4 top-4" size="icon-sm" variant="ghost">
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
           </DialogPrimitive.Close>
-        </div>
+        ) : null}
       </DialogPrimitive.Content>
     </DialogPrimitive.Portal>
   );
@@ -137,17 +95,7 @@ type DialogHeaderProps = ComponentProps<"div">;
  * @since 0.3.16-canary.0
  */
 function DialogHeader({ className, ...props }: DialogHeaderProps): JSX.Element {
-  return (
-    <header
-      className={cn(
-        "flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-2 text-center",
-        "sm:text-left",
-        className,
-      )}
-      data-slot="dialog-header"
-      {...props}
-    />
-  );
+  return <div className={cn("flex shrink-0 flex-col gap-2", className)} data-slot="dialog-header" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -155,6 +103,11 @@ function DialogHeader({ className, ...props }: DialogHeaderProps): JSX.Element {
  * -------------------------------------------------------------------------- */
 
 /**
+ * Optional scrollable region for long content. When used, the Header and Footer
+ * stay pinned (shrink-0) and only this body scrolls; without it, the whole
+ * Content scrolls via its own max-height. This is a codefast enhancement over
+ * radix-vega, which has no scroll handling for tall dialogs.
+ *
  * @since 0.3.16-canary.0
  */
 type DialogBodyProps = ComponentProps<"div">;
@@ -164,11 +117,7 @@ type DialogBodyProps = ComponentProps<"div">;
  */
 function DialogBody({ className, ...props }: DialogBodyProps): JSX.Element {
   return (
-    <main
-      className={cn("overflow-auto", "px-6 py-2", className)}
-      data-slot="dialog-body"
-      {...props}
-    />
+    <div className={cn("-mx-6 min-h-0 flex-1 overflow-y-auto px-6", className)} data-slot="dialog-body" {...props} />
   );
 }
 
@@ -179,22 +128,27 @@ function DialogBody({ className, ...props }: DialogBodyProps): JSX.Element {
 /**
  * @since 0.3.16-canary.0
  */
-type DialogFooterProps = ComponentProps<"div">;
+interface DialogFooterProps extends ComponentProps<"div"> {
+  showCloseButton?: boolean;
+}
 
 /**
  * @since 0.3.16-canary.0
  */
-function DialogFooter({ className, ...props }: DialogFooterProps): JSX.Element {
+function DialogFooter({ children, className, showCloseButton = false, ...props }: DialogFooterProps): JSX.Element {
   return (
-    <footer
-      className={cn(
-        "flex shrink-0 flex-col-reverse gap-2 px-6 pt-2 pb-6",
-        "sm:flex-row sm:justify-end",
-        className,
-      )}
+    <div
+      className={cn("flex shrink-0 flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
       data-slot="dialog-footer"
       {...props}
-    />
+    >
+      {children}
+      {showCloseButton ? (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      ) : null}
+    </div>
   );
 }
 
@@ -213,7 +167,7 @@ type DialogTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
 function DialogTitle({ className, ...props }: DialogTitleProps): JSX.Element {
   return (
     <DialogPrimitive.Title
-      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
+      className={cn("font-heading leading-none font-medium", className)}
       data-slot="dialog-title"
       {...props}
     />
@@ -235,7 +189,10 @@ type DialogDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>
 function DialogDescription({ className, ...props }: DialogDescriptionProps): JSX.Element {
   return (
     <DialogPrimitive.Description
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
       data-slot="dialog-description"
       {...props}
     />
@@ -249,22 +206,13 @@ function DialogDescription({ className, ...props }: DialogDescriptionProps): JSX
 /**
  * @since 0.3.16-canary.0
  */
-interface DialogCloseProps extends Omit<ComponentProps<typeof DialogPrimitive.Close>, "ref"> {
-  size?: VariantProps<typeof buttonVariants>["size"];
-  variant?: VariantProps<typeof buttonVariants>["variant"];
-}
+type DialogCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
 
 /**
  * @since 0.3.16-canary.0
  */
-function DialogClose({ className, size, variant, ...props }: DialogCloseProps): JSX.Element {
-  return (
-    <DialogPrimitive.Close
-      className={buttonVariants({ className, size, variant })}
-      data-slot="dialog-close"
-      {...props}
-    />
-  );
+function DialogClose({ ...props }: DialogCloseProps): JSX.Element {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------

package/src/components/direction.tsx

@@ -0,0 +1,32 @@
+import { Direction } from "radix-ui";
+import type { ComponentProps } from "react";
+
+/* -----------------------------------------------------------------------------
+ * Component: DirectionProvider
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.4.0-canary.4
+ */
+type DirectionProviderProps = ComponentProps<typeof Direction.DirectionProvider> & {
+  direction?: ComponentProps<typeof Direction.DirectionProvider>["dir"];
+};
+
+/**
+ * @since 0.4.0-canary.4
+ */
+function DirectionProvider({ dir, direction, children }: DirectionProviderProps) {
+  return <Direction.DirectionProvider dir={direction ?? dir}>{children}</Direction.DirectionProvider>;
+}
+
+/**
+ * @since 0.4.0-canary.4
+ */
+const useDirection = Direction.useDirection;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { DirectionProvider, useDirection };
+export type { DirectionProviderProps };

package/src/components/drawer.tsx

@@ -1,11 +1,8 @@
-"use client";
-
-import type { VariantProps } from "#/lib/utils";
 import type { ComponentProps, JSX } from "react";
-
-import { cn } from "#/lib/utils";
 import { Drawer as DrawerPrimitive } from "vaul";
 
+import type { VariantProps } from "#/lib/utils";
+import { cn } from "#/lib/utils";
 import { buttonVariants } from "#/variants/button";
 
 /* -----------------------------------------------------------------------------
@@ -21,13 +18,7 @@ type DrawerProps = ComponentProps<typeof DrawerPrimitive.Root>;
  * @since 0.3.16-canary.0
  */
 function Drawer({ shouldScaleBackground = true, ...props }: DrawerProps): JSX.Element {
-  return (
-    <DrawerPrimitive.Root
-      data-slot="drawer"
-      shouldScaleBackground={shouldScaleBackground}
-      {...props}
-    />
-  );
+  return <DrawerPrimitive.Root data-slot="drawer" shouldScaleBackground={shouldScaleBackground} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -53,55 +44,29 @@ function DrawerTrigger({ ...props }: DrawerTriggerProps): JSX.Element {
 /**
  * @since 0.3.16-canary.0
  */
-interface DrawerContentProps extends ComponentProps<typeof DrawerPrimitive.Content> {
-  classNames?: {
-    content?: string;
-    handle?: string;
-    overlay?: string;
-  };
-}
+type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content>;
 
 /**
  * @since 0.3.16-canary.0
  */
-function DrawerContent({
-  children,
-  className,
-  classNames,
-  ...props
-}: DrawerContentProps): JSX.Element {
+function DrawerContent({ children, className, ...props }: DrawerContentProps): JSX.Element {
   return (
-    <DrawerPrimitive.Portal>
+    <DrawerPrimitive.Portal data-slot="drawer-portal">
       <DrawerPrimitive.Overlay
-        className={cn("fixed inset-0 z-50", "bg-black/50", classNames?.overlay)}
+        className={
+          "fixed inset-0 z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-panel-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-panel-out data-closed:fade-out-0"
+        }
         data-slot="drawer-overlay"
       />
       <DrawerPrimitive.Content
         className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col",
-          "bg-background",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-2xl",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4",
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-2xl",
-          "data-[vaul-drawer-direction=left]:sm:max-w-sm",
-          "data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          classNames?.content,
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
           className,
         )}
         data-slot="drawer-content"
         {...props}
       >
-        <div
-          className={cn(
-            "hidden",
-            "mx-auto mt-4 h-1.5 w-12 shrink-0",
-            "rounded-full",
-            "bg-muted",
-            "group-data-[vaul-drawer-direction=bottom]/drawer-content:block",
-            classNames?.handle,
-          )}
-        />
+        <div className="mx-auto mt-4 hidden h-1.5 w-25 shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPrimitive.Portal>
@@ -123,35 +88,16 @@ type DrawerHeaderProps = ComponentProps<"div">;
 function DrawerHeader({ className, ...props }: DrawerHeaderProps): JSX.Element {
   return (
     <div
-      className={cn("flex flex-col gap-1.5", "p-4", className)}
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-start",
+        className,
+      )}
       data-slot="drawer-header"
       {...props}
     />
   );
 }
 
-/* -----------------------------------------------------------------------------
- * Component: DrawerBody
- * -------------------------------------------------------------------------- */
-
-/**
- * @since 0.3.16-canary.0
- */
-type DrawerBodyProps = ComponentProps<"div">;
-
-/**
- * @since 0.3.16-canary.0
- */
-function DrawerBody({ className, ...props }: DrawerBodyProps): JSX.Element {
-  return (
-    <main
-      className={cn("overflow-auto", "px-6 py-2", className)}
-      data-slot="drawer-body"
-      {...props}
-    />
-  );
-}
-
 /* -----------------------------------------------------------------------------
  * Component: DrawerFooter
  * -------------------------------------------------------------------------- */
@@ -165,13 +111,7 @@ type DrawerFooterProps = ComponentProps<"div">;
  * @since 0.3.16-canary.0
  */
 function DrawerFooter({ className, ...props }: DrawerFooterProps): JSX.Element {
-  return (
-    <div
-      className={cn("flex flex-col gap-2", "mt-auto p-4", className)}
-      data-slot="drawer-footer"
-      {...props}
-    />
-  );
+  return <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} data-slot="drawer-footer" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -189,7 +129,7 @@ type DrawerTitleProps = ComponentProps<typeof DrawerPrimitive.Title>;
 function DrawerTitle({ className, ...props }: DrawerTitleProps): JSX.Element {
   return (
     <DrawerPrimitive.Title
-      className={cn("font-semibold text-foreground", className)}
+      className={cn("font-heading font-medium text-foreground", className)}
       data-slot="drawer-title"
       {...props}
     />
@@ -249,7 +189,6 @@ function DrawerClose({ className, size, variant, ...props }: DrawerCloseProps):
 
 export {
   Drawer,
-  DrawerBody,
   DrawerClose,
   DrawerContent,
   DrawerDescription,
@@ -259,7 +198,6 @@ export {
   DrawerTrigger,
 };
 export type {
-  DrawerBodyProps,
   DrawerCloseProps,
   DrawerContentProps,
   DrawerDescriptionProps,