@codefast/ui 0.3.16-canary.2 → 0.3.16-canary.3

package/src/components/dialog.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+import type { VariantProps } from "#/lib/utils";
+import type { ComponentProps, JSX } from "react";
+
+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
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogProps = ComponentProps<typeof DialogPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Dialog({ ...props }: DialogProps): JSX.Element {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogTrigger({ ...props }: DialogTriggerProps): JSX.Element {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface DialogContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
+  classNames?: {
+    close?: string;
+    content?: string;
+    overlay?: string;
+    wrapper?: string;
+  };
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogContent({
+  children,
+  className,
+  classNames,
+  ...props
+}: DialogContentProps): JSX.Element {
+  return (
+    <DialogPrimitive.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,
+        )}
+        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,
+        )}
+        data-slot="dialog-content-wrapper"
+        {...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>
+          </DialogPrimitive.Close>
+        </div>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogHeader
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogBody
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogBodyProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogBody({ className, ...props }: DialogBodyProps): JSX.Element {
+  return (
+    <main
+      className={cn("overflow-auto", "px-6 py-2", className)}
+      data-slot="dialog-body"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogFooter
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogFooterProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogFooter({ className, ...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,
+      )}
+      data-slot="dialog-footer"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogTitle({ className, ...props }: DialogTitleProps): JSX.Element {
+  return (
+    <DialogPrimitive.Title
+      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
+      data-slot="dialog-title"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogDescription({ className, ...props }: DialogDescriptionProps): JSX.Element {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="dialog-description"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogClose
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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"];
+}
+
+/**
+ * @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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+};
+export type {
+  DialogBodyProps,
+  DialogCloseProps,
+  DialogContentProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogProps,
+  DialogTitleProps,
+  DialogTriggerProps,
+};

package/src/components/drawer.tsx

@@ -0,0 +1,271 @@
+"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 { buttonVariants } from "#/variants/button";
+
+/* -----------------------------------------------------------------------------
+ * Component: Drawer
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DrawerTriggerProps = ComponentProps<typeof DrawerPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DrawerTrigger({ ...props }: DrawerTriggerProps): JSX.Element {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface DrawerContentProps extends ComponentProps<typeof DrawerPrimitive.Content> {
+  classNames?: {
+    content?: string;
+    handle?: string;
+    overlay?: string;
+  };
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DrawerContent({
+  children,
+  className,
+  classNames,
+  ...props
+}: DrawerContentProps): JSX.Element {
+  return (
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Overlay
+        className={cn("fixed inset-0 z-50", "bg-black/50", classNames?.overlay)}
+        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,
+          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,
+          )}
+        />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPrimitive.Portal>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerHeader
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DrawerHeaderProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DrawerHeader({ className, ...props }: DrawerHeaderProps): JSX.Element {
+  return (
+    <div
+      className={cn("flex flex-col gap-1.5", "p-4", 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
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DrawerTitleProps = ComponentProps<typeof DrawerPrimitive.Title>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DrawerTitle({ className, ...props }: DrawerTitleProps): JSX.Element {
+  return (
+    <DrawerPrimitive.Title
+      className={cn("font-semibold text-foreground", className)}
+      data-slot="drawer-title"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DrawerDescriptionProps = ComponentProps<typeof DrawerPrimitive.Description>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DrawerDescription({ className, ...props }: DrawerDescriptionProps): JSX.Element {
+  return (
+    <DrawerPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="drawer-description"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerClose
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface DrawerCloseProps extends ComponentProps<typeof DrawerPrimitive.Close> {
+  size?: VariantProps<typeof buttonVariants>["size"];
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DrawerClose({ className, size, variant, ...props }: DrawerCloseProps): JSX.Element {
+  return (
+    <DrawerPrimitive.Close
+      className={buttonVariants({ className, size, variant })}
+      data-slot="drawer-close"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+};
+export type {
+  DrawerBodyProps,
+  DrawerCloseProps,
+  DrawerContentProps,
+  DrawerDescriptionProps,
+  DrawerFooterProps,
+  DrawerHeaderProps,
+  DrawerProps,
+  DrawerTitleProps,
+  DrawerTriggerProps,
+};