banhaten 0.5.0 → 0.6.0

package/registry/components/sheet.tsx

@@ -1,305 +1,305 @@
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { XIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-type SheetSide = "start" | "end" | "top" | "bottom"
-type SheetSize = "sm" | "default" | "lg"
-
-const sheetContentVariants = cva(
-  [
-    "fixed z-[var(--bh-z-overlay)] flex flex-col overflow-hidden bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)]",
-    "shadow-[var(--elevation-component-default)] outline-none",
-    "data-[state=open]:animate-in data-[state=closed]:animate-out",
-  ],
-  {
-    variants: {
-      side: {
-        bottom:
-          "inset-x-0 bottom-0 max-h-[calc(100vh-var(--bh-space-8xl-48))] rounded-t-[var(--bh-radius-2xl-12)] border-t border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
-        end:
-          "inset-y-0 end-0 h-full max-w-[calc(100vw-var(--bh-space-4xl-20))] border-s border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right rtl:data-[state=open]:slide-in-from-left rtl:data-[state=closed]:slide-out-to-left",
-        start:
-          "inset-y-0 start-0 h-full max-w-[calc(100vw-var(--bh-space-4xl-20))] border-e border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left rtl:data-[state=open]:slide-in-from-right rtl:data-[state=closed]:slide-out-to-right",
-        top:
-          "inset-x-0 top-0 max-h-[calc(100vh-var(--bh-space-8xl-48))] rounded-b-[var(--bh-radius-2xl-12)] border-b border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
-      },
-      size: {
-        default: "",
-        lg: "",
-        sm: "",
-      },
-    },
-    compoundVariants: [
-      {
-        side: ["start", "end"],
-        size: "sm",
-        className:
-          "w-[min(var(--bh-space-19xl-384),calc(100vw-var(--bh-space-4xl-20)))]",
-      },
-      {
-        side: ["start", "end"],
-        size: "default",
-        className:
-          "w-[min(calc(var(--bh-space-19xl-384)+var(--bh-space-9xl-64)),calc(100vw-var(--bh-space-4xl-20)))]",
-      },
-      {
-        side: ["start", "end"],
-        size: "lg",
-        className:
-          "w-[min(calc(var(--bh-space-19xl-384)+var(--bh-space-12xl-128)),calc(100vw-var(--bh-space-4xl-20)))]",
-      },
-      {
-        side: ["top", "bottom"],
-        size: "sm",
-        className: "min-h-[var(--bh-space-12xl-128)]",
-      },
-      {
-        side: ["top", "bottom"],
-        size: "default",
-        className: "min-h-[var(--bh-space-16xl-256)]",
-      },
-      {
-        side: ["top", "bottom"],
-        size: "lg",
-        className: "min-h-[var(--bh-space-17xl-288)]",
-      },
-    ],
-    defaultVariants: {
-      side: "end",
-      size: "default",
-    },
-  }
-)
-
-type SheetRootProps = React.ComponentProps<typeof DialogPrimitive.Root>
-type SheetTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>
-type SheetCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>
-type SheetPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>
-type SheetOverlayProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Overlay
->
-type SheetContentProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Content
-> &
-  VariantProps<typeof sheetContentVariants> & {
-    overlayClassName?: string
-    showCloseButton?: boolean
-  }
-type SheetHeaderProps = React.ComponentProps<"header">
-type SheetFooterProps = React.ComponentProps<"footer">
-type SheetBodyProps = React.ComponentProps<"div">
-type SheetTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
-type SheetDescriptionProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Description
->
-type SheetCloseButtonProps = React.ComponentProps<"button"> & {
-  label?: string
-}
-
-const Sheet = DialogPrimitive.Root
-const SheetTrigger = DialogPrimitive.Trigger
-const SheetClose = DialogPrimitive.Close
-const SheetPortal = DialogPrimitive.Portal
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  SheetOverlayProps
->(function SheetOverlay({ className, ...props }, ref) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="sheet-overlay"
-      ref={ref}
-      className={cn(
-        "fixed inset-0 z-[var(--bh-z-overlay)] bg-[var(--bh-bg-backdrop)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  SheetContentProps
->(function SheetContent(
-  {
-    children,
-    className,
-    overlayClassName,
-    showCloseButton = true,
-    side = "end",
-    size = "default",
-    ...props
-  },
-  ref
-) {
-  return (
-    <SheetPortal>
-      <SheetOverlay className={overlayClassName} />
-      <DialogPrimitive.Content
-        data-side={side}
-        data-size={size}
-        data-slot="sheet-content"
-        ref={ref}
-        className={cn(sheetContentVariants({ side, size, className }))}
-        {...props}
-      >
-        {children}
-        {showCloseButton ? <SheetCloseButton /> : null}
-      </DialogPrimitive.Content>
-    </SheetPortal>
-  )
-})
-
-const SheetHeader = React.forwardRef<HTMLElement, SheetHeaderProps>(
-  function SheetHeader({ className, ...props }, ref) {
-    return (
-      <header
-        data-slot="sheet-header"
-        ref={ref}
-        className={cn(
-          "grid gap-[var(--bh-space-xs-4)] px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-lg-10)] pe-[var(--bh-space-9xl-64)] pt-[var(--bh-space-4xl-20)] text-start",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const SheetBody = React.forwardRef<HTMLDivElement, SheetBodyProps>(
-  function SheetBody({ className, ...props }, ref) {
-    return (
-      <div
-        data-slot="sheet-body"
-        ref={ref}
-        className={cn(
-          "min-h-0 flex-1 overflow-auto px-[var(--bh-space-4xl-20)] py-[var(--bh-space-lg-10)] text-start",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const SheetFooter = React.forwardRef<HTMLElement, SheetFooterProps>(
-  function SheetFooter({ className, ...props }, ref) {
-    return (
-      <footer
-        data-slot="sheet-footer"
-        ref={ref}
-        className={cn(
-          "flex shrink-0 flex-wrap items-center justify-end gap-[var(--bh-space-md-8)] border-t border-[var(--bh-border-subtle)] px-[var(--bh-space-4xl-20)] py-[var(--bh-space-3xl-16)]",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  SheetTitleProps
->(function SheetTitle({ className, dir = "auto", ...props }, ref) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="sheet-title"
-      dir={dir}
-      ref={ref}
-      className={cn(
-        "m-0 text-[length:var(--bh-text-heading-sm-semibold-font-size)] font-[var(--bh-text-heading-sm-semibold-font-weight)] leading-[var(--bh-text-heading-sm-semibold-line-height)] tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)] text-[var(--bh-content-default)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  SheetDescriptionProps
->(function SheetDescription({ className, dir = "auto", ...props }, ref) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="sheet-description"
-      dir={dir}
-      ref={ref}
-      className={cn(
-        "m-0 text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-const SheetCloseButton = React.forwardRef<
-  HTMLButtonElement,
-  SheetCloseButtonProps
->(function SheetCloseButton(
-  { children, className, label = "Close sheet", type = "button", ...props },
-  ref
-) {
-  return (
-    <SheetClose asChild>
-      <button
-        aria-label={label}
-        data-slot="sheet-close"
-        ref={ref}
-        type={type}
-        className={cn(
-          "absolute end-[var(--bh-space-3xl-16)] top-[var(--bh-space-3xl-16)] inline-flex size-[var(--bh-space-6xl-32)] items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--elevation-button-focus)]",
-          className
-        )}
-        {...props}
-      >
-        {children ?? (
-          <XIcon
-            aria-hidden="true"
-            className="size-[var(--bh-space-5xl-24)]"
-            strokeWidth="var(--bh-icon-stroke-200)"
-          />
-        )}
-      </button>
-    </SheetClose>
-  )
-})
-
-export {
-  Sheet,
-  SheetBody,
-  SheetClose,
-  SheetCloseButton,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-  SheetTrigger,
-  sheetContentVariants,
-}
-export type {
-  SheetBodyProps,
-  SheetCloseButtonProps,
-  SheetCloseProps,
-  SheetContentProps,
-  SheetDescriptionProps,
-  SheetFooterProps,
-  SheetHeaderProps,
-  SheetOverlayProps,
-  SheetPortalProps,
-  SheetRootProps,
-  SheetSide,
-  SheetSize,
-  SheetTitleProps,
-  SheetTriggerProps,
-}
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type SheetSide = "start" | "end" | "top" | "bottom"
+type SheetSize = "sm" | "default" | "lg"
+
+const sheetContentVariants = cva(
+  [
+    "fixed z-[var(--bh-z-overlay)] flex flex-col overflow-hidden bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)]",
+    "shadow-[var(--elevation-component-default)] outline-none",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  ],
+  {
+    variants: {
+      side: {
+        bottom:
+          "inset-x-0 bottom-0 max-h-[calc(100vh-var(--bh-space-8xl-48))] rounded-t-[var(--bh-radius-2xl-12)] border-t border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
+        end:
+          "inset-y-0 end-0 h-full max-w-[calc(100vw-var(--bh-space-4xl-20))] border-s border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right rtl:data-[state=open]:slide-in-from-left rtl:data-[state=closed]:slide-out-to-left",
+        start:
+          "inset-y-0 start-0 h-full max-w-[calc(100vw-var(--bh-space-4xl-20))] border-e border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left rtl:data-[state=open]:slide-in-from-right rtl:data-[state=closed]:slide-out-to-right",
+        top:
+          "inset-x-0 top-0 max-h-[calc(100vh-var(--bh-space-8xl-48))] rounded-b-[var(--bh-radius-2xl-12)] border-b border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+      },
+      size: {
+        default: "",
+        lg: "",
+        sm: "",
+      },
+    },
+    compoundVariants: [
+      {
+        side: ["start", "end"],
+        size: "sm",
+        className:
+          "w-[min(var(--bh-space-19xl-384),calc(100vw-var(--bh-space-4xl-20)))]",
+      },
+      {
+        side: ["start", "end"],
+        size: "default",
+        className:
+          "w-[min(calc(var(--bh-space-19xl-384)+var(--bh-space-9xl-64)),calc(100vw-var(--bh-space-4xl-20)))]",
+      },
+      {
+        side: ["start", "end"],
+        size: "lg",
+        className:
+          "w-[min(calc(var(--bh-space-19xl-384)+var(--bh-space-12xl-128)),calc(100vw-var(--bh-space-4xl-20)))]",
+      },
+      {
+        side: ["top", "bottom"],
+        size: "sm",
+        className: "min-h-[var(--bh-space-12xl-128)]",
+      },
+      {
+        side: ["top", "bottom"],
+        size: "default",
+        className: "min-h-[var(--bh-space-16xl-256)]",
+      },
+      {
+        side: ["top", "bottom"],
+        size: "lg",
+        className: "min-h-[var(--bh-space-17xl-288)]",
+      },
+    ],
+    defaultVariants: {
+      side: "end",
+      size: "default",
+    },
+  }
+)
+
+type SheetRootProps = React.ComponentProps<typeof DialogPrimitive.Root>
+type SheetTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>
+type SheetCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>
+type SheetPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>
+type SheetOverlayProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Overlay
+>
+type SheetContentProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> &
+  VariantProps<typeof sheetContentVariants> & {
+    overlayClassName?: string
+    showCloseButton?: boolean
+  }
+type SheetHeaderProps = React.ComponentProps<"header">
+type SheetFooterProps = React.ComponentProps<"footer">
+type SheetBodyProps = React.ComponentProps<"div">
+type SheetTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+type SheetDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Description
+>
+type SheetCloseButtonProps = React.ComponentProps<"button"> & {
+  label?: string
+}
+
+const Sheet = DialogPrimitive.Root
+const SheetTrigger = DialogPrimitive.Trigger
+const SheetClose = DialogPrimitive.Close
+const SheetPortal = DialogPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  SheetOverlayProps
+>(function SheetOverlay({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="sheet-overlay"
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-[var(--bh-z-overlay)] bg-[var(--bh-bg-backdrop)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  SheetContentProps
+>(function SheetContent(
+  {
+    children,
+    className,
+    overlayClassName,
+    showCloseButton = true,
+    side = "end",
+    size = "default",
+    ...props
+  },
+  ref
+) {
+  return (
+    <SheetPortal>
+      <SheetOverlay className={overlayClassName} />
+      <DialogPrimitive.Content
+        data-side={side}
+        data-size={size}
+        data-slot="sheet-content"
+        ref={ref}
+        className={cn(sheetContentVariants({ side, size, className }))}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? <SheetCloseButton /> : null}
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  )
+})
+
+const SheetHeader = React.forwardRef<HTMLElement, SheetHeaderProps>(
+  function SheetHeader({ className, ...props }, ref) {
+    return (
+      <header
+        data-slot="sheet-header"
+        ref={ref}
+        className={cn(
+          "grid gap-[var(--bh-space-xs-4)] px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-lg-10)] pe-[var(--bh-space-9xl-64)] pt-[var(--bh-space-4xl-20)] text-start",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const SheetBody = React.forwardRef<HTMLDivElement, SheetBodyProps>(
+  function SheetBody({ className, ...props }, ref) {
+    return (
+      <div
+        data-slot="sheet-body"
+        ref={ref}
+        className={cn(
+          "min-h-0 flex-1 overflow-auto px-[var(--bh-space-4xl-20)] py-[var(--bh-space-lg-10)] text-start",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const SheetFooter = React.forwardRef<HTMLElement, SheetFooterProps>(
+  function SheetFooter({ className, ...props }, ref) {
+    return (
+      <footer
+        data-slot="sheet-footer"
+        ref={ref}
+        className={cn(
+          "flex shrink-0 flex-wrap items-center justify-end gap-[var(--bh-space-md-8)] border-t border-[var(--bh-border-subtle)] px-[var(--bh-space-4xl-20)] py-[var(--bh-space-3xl-16)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  SheetTitleProps
+>(function SheetTitle({ className, dir = "auto", ...props }, ref) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="sheet-title"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "m-0 text-[length:var(--bh-text-heading-sm-semibold-font-size)] font-[var(--bh-text-heading-sm-semibold-font-weight)] leading-[var(--bh-text-heading-sm-semibold-line-height)] tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)] text-[var(--bh-content-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  SheetDescriptionProps
+>(function SheetDescription({ className, dir = "auto", ...props }, ref) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="sheet-description"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "m-0 text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const SheetCloseButton = React.forwardRef<
+  HTMLButtonElement,
+  SheetCloseButtonProps
+>(function SheetCloseButton(
+  { children, className, label = "Close sheet", type = "button", ...props },
+  ref
+) {
+  return (
+    <SheetClose asChild>
+      <button
+        aria-label={label}
+        data-slot="sheet-close"
+        ref={ref}
+        type={type}
+        className={cn(
+          "absolute end-[var(--bh-space-3xl-16)] top-[var(--bh-space-3xl-16)] inline-flex size-[var(--bh-space-6xl-32)] items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--elevation-button-focus)]",
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <XIcon
+            aria-hidden="true"
+            className="size-[var(--bh-space-5xl-24)]"
+            strokeWidth="var(--bh-icon-stroke-200)"
+          />
+        )}
+      </button>
+    </SheetClose>
+  )
+})
+
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetCloseButton,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  sheetContentVariants,
+}
+export type {
+  SheetBodyProps,
+  SheetCloseButtonProps,
+  SheetCloseProps,
+  SheetContentProps,
+  SheetDescriptionProps,
+  SheetFooterProps,
+  SheetHeaderProps,
+  SheetOverlayProps,
+  SheetPortalProps,
+  SheetRootProps,
+  SheetSide,
+  SheetSize,
+  SheetTitleProps,
+  SheetTriggerProps,
+}