banhaten 0.3.0 → 0.5.0

package/registry/components/alert-dialog.tsx

@@ -1,297 +1,297 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { TriangleAlertIcon } from "lucide-react"
-
-import { Button, type ButtonProps } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-type AlertDialogIntent = "default" | "warning" | "danger"
-type AlertDialogSize = "sm" | "default" | "lg"
-
-const alertDialogContentVariants = cva(
-  [
-    "fixed left-1/2 top-1/2 z-[var(--bh-z-overlay)] flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-alert-dialog-width)]",
-    "max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden",
-    "rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-modal)] outline-none",
-    "[--bh-alert-dialog-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-alert-dialog-border),var(--shadow-lg)]",
-  ],
-  {
-    variants: {
-      size: {
-        default:
-          "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-12xl-128)+var(--bh-space-8xl-48))]",
-        lg: "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-16xl-256)+var(--bh-space-9xl-64)-var(--bh-space-xs-4))]",
-        sm: "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-8xl-48)+var(--bh-space-md-8))]",
-      },
-    },
-    defaultVariants: {
-      size: "sm",
-    },
-  }
-)
-
-const intentClassNames: Record<AlertDialogIntent, string> = {
-  danger:
-    "bg-[var(--bh-bg-danger-subtle)] text-[var(--bh-content-danger-default)]",
-  default:
-    "bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
-  warning:
-    "bg-[var(--bh-bg-warning-subtle)] text-[var(--bh-content-warning-default)]",
-}
-
-type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>
-type AlertDialogTriggerProps = React.ComponentProps<
-  typeof AlertDialogPrimitive.Trigger
->
-type AlertDialogPortalProps = React.ComponentProps<
-  typeof AlertDialogPrimitive.Portal
->
-type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Overlay
->
-type AlertDialogContentProps = React.ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Content
-> &
-  VariantProps<typeof alertDialogContentVariants> & {
-    overlayClassName?: string
-  }
-type AlertDialogHeaderProps = React.ComponentProps<"header">
-type AlertDialogBodyProps = React.ComponentProps<"div">
-type AlertDialogFooterProps = React.ComponentProps<"footer">
-type AlertDialogTitleProps = React.ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Title
->
-type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Description
->
-type AlertDialogIconProps = React.ComponentProps<"span"> & {
-  intent?: AlertDialogIntent
-}
-type AlertDialogActionProps = ButtonProps
-type AlertDialogCancelProps = ButtonProps
-
-const AlertDialog = AlertDialogPrimitive.Root
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  AlertDialogOverlayProps
->(function AlertDialogOverlay({ className, ...props }, ref) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      ref={ref}
-      className={cn(
-        "fixed inset-0 z-[var(--bh-z-overlay)] bg-[var(--bh-bg-backdrop)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  AlertDialogContentProps
->(function AlertDialogContent(
-  { children, className, overlayClassName, size, ...props },
-  ref
-) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay className={overlayClassName} />
-      <AlertDialogPrimitive.Content
-        data-size={size ?? "sm"}
-        data-slot="alert-dialog-content"
-        ref={ref}
-        className={cn(alertDialogContentVariants({ size, className }))}
-        {...props}
-      >
-        {children}
-      </AlertDialogPrimitive.Content>
-    </AlertDialogPortal>
-  )
-})
-
-const AlertDialogHeader = React.forwardRef<HTMLElement, AlertDialogHeaderProps>(
-  function AlertDialogHeader({ className, ...props }, ref) {
-    return (
-      <header
-        data-slot="alert-dialog-header"
-        ref={ref}
-        className={cn(
-          "flex w-full shrink-0 items-start gap-[var(--bh-space-sm-6)] px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-md-8)] pt-[var(--bh-space-4xl-20)] text-start",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const AlertDialogBody = React.forwardRef<HTMLDivElement, AlertDialogBodyProps>(
-  function AlertDialogBody({ className, ...props }, ref) {
-    return (
-      <div
-        data-slot="alert-dialog-body"
-        ref={ref}
-        className={cn(
-          "flex w-full shrink-0 items-start px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-4xl-20)] pt-[var(--bh-space-lg-10)]",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const AlertDialogFooter = React.forwardRef<
-  HTMLElement,
-  AlertDialogFooterProps
->(function AlertDialogFooter({ className, ...props }, ref) {
-  return (
-    <footer
-      data-slot="alert-dialog-footer"
-      ref={ref}
-      className={cn(
-        "flex w-full shrink-0 items-center justify-end gap-[var(--bh-space-lg-10)] border-t border-[var(--bh-border-subtle)] px-[var(--bh-space-4xl-20)] py-[var(--bh-space-3xl-16)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  AlertDialogTitleProps
->(function AlertDialogTitle({ className, dir = "auto", ...props }, ref) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      dir={dir}
-      ref={ref}
-      className={cn(
-        "min-w-0 flex-1 text-start 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 AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  AlertDialogDescriptionProps
->(function AlertDialogDescription({ className, dir = "auto", ...props }, ref) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      dir={dir}
-      ref={ref}
-      className={cn(
-        "min-w-0 flex-1 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-function AlertDialogIcon({
-  children,
-  className,
-  intent = "danger",
-  ...props
-}: AlertDialogIconProps) {
-  return (
-    <span
-      aria-hidden="true"
-      data-intent={intent}
-      data-slot="alert-dialog-icon"
-      className={cn(
-        "inline-flex size-[var(--bh-space-5xl-24)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)]",
-        intentClassNames[intent],
-        className
-      )}
-      {...props}
-    >
-      {children ?? (
-        <TriangleAlertIcon
-          className="size-[var(--bh-space-3xl-16)]"
-          strokeWidth="var(--bh-icon-stroke-200)"
-        />
-      )}
-    </span>
-  )
-}
-
-const AlertDialogAction = React.forwardRef<
-  HTMLButtonElement,
-  AlertDialogActionProps
->(function AlertDialogAction(
-  { asChild = false, children = "Confirm", size = "sm", variant = "danger", ...props },
-  ref
-) {
-  return (
-    <AlertDialogPrimitive.Action asChild>
-      <Button asChild={asChild} ref={ref} size={size} variant={variant} {...props}>
-        {children}
-      </Button>
-    </AlertDialogPrimitive.Action>
-  )
-})
-
-const AlertDialogCancel = React.forwardRef<
-  HTMLButtonElement,
-  AlertDialogCancelProps
->(function AlertDialogCancel(
-  { asChild = false, children = "Cancel", size = "sm", variant = "soft", ...props },
-  ref
-) {
-  return (
-    <AlertDialogPrimitive.Cancel asChild>
-      <Button asChild={asChild} ref={ref} size={size} variant={variant} {...props}>
-        {children}
-      </Button>
-    </AlertDialogPrimitive.Cancel>
-  )
-})
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogBody,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogIcon,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-  alertDialogContentVariants,
-}
-export type {
-  AlertDialogActionProps,
-  AlertDialogBodyProps,
-  AlertDialogCancelProps,
-  AlertDialogContentProps,
-  AlertDialogDescriptionProps,
-  AlertDialogFooterProps,
-  AlertDialogHeaderProps,
-  AlertDialogIconProps,
-  AlertDialogIntent,
-  AlertDialogOverlayProps,
-  AlertDialogPortalProps,
-  AlertDialogProps,
-  AlertDialogSize,
-  AlertDialogTitleProps,
-  AlertDialogTriggerProps,
-}
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { TriangleAlertIcon } from "lucide-react"
+
+import { Button, type ButtonProps } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+type AlertDialogIntent = "default" | "warning" | "danger"
+type AlertDialogSize = "sm" | "default" | "lg"
+
+const alertDialogContentVariants = cva(
+  [
+    "fixed left-1/2 top-1/2 z-[var(--bh-z-overlay)] flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-alert-dialog-width)]",
+    "max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden",
+    "rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--elevation-modal)] outline-none",
+    "[--bh-alert-dialog-border:var(--bh-border-subtle)] [--elevation-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-alert-dialog-border),var(--elevation-06)]",
+  ],
+  {
+    variants: {
+      size: {
+        default:
+          "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-12xl-128)+var(--bh-space-8xl-48))]",
+        lg: "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-16xl-256)+var(--bh-space-9xl-64)-var(--bh-space-xs-4))]",
+        sm: "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-8xl-48)+var(--bh-space-md-8))]",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+)
+
+const intentClassNames: Record<AlertDialogIntent, string> = {
+  danger:
+    "bg-[var(--bh-bg-danger-subtle)] text-[var(--bh-content-danger-default)]",
+  default:
+    "bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
+  warning:
+    "bg-[var(--bh-bg-warning-subtle)] text-[var(--bh-content-warning-default)]",
+}
+
+type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>
+type AlertDialogTriggerProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Trigger
+>
+type AlertDialogPortalProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Portal
+>
+type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Overlay
+>
+type AlertDialogContentProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Content
+> &
+  VariantProps<typeof alertDialogContentVariants> & {
+    overlayClassName?: string
+  }
+type AlertDialogHeaderProps = React.ComponentProps<"header">
+type AlertDialogBodyProps = React.ComponentProps<"div">
+type AlertDialogFooterProps = React.ComponentProps<"footer">
+type AlertDialogTitleProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Title
+>
+type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Description
+>
+type AlertDialogIconProps = React.ComponentProps<"span"> & {
+  intent?: AlertDialogIntent
+}
+type AlertDialogActionProps = ButtonProps
+type AlertDialogCancelProps = ButtonProps
+
+const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  AlertDialogOverlayProps
+>(function AlertDialogOverlay({ className, ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-[var(--bh-z-overlay)] bg-[var(--bh-bg-backdrop)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  AlertDialogContentProps
+>(function AlertDialogContent(
+  { children, className, overlayClassName, size, ...props },
+  ref
+) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay className={overlayClassName} />
+      <AlertDialogPrimitive.Content
+        data-size={size ?? "sm"}
+        data-slot="alert-dialog-content"
+        ref={ref}
+        className={cn(alertDialogContentVariants({ size, className }))}
+        {...props}
+      >
+        {children}
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPortal>
+  )
+})
+
+const AlertDialogHeader = React.forwardRef<HTMLElement, AlertDialogHeaderProps>(
+  function AlertDialogHeader({ className, ...props }, ref) {
+    return (
+      <header
+        data-slot="alert-dialog-header"
+        ref={ref}
+        className={cn(
+          "flex w-full shrink-0 items-start gap-[var(--bh-space-sm-6)] px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-md-8)] pt-[var(--bh-space-4xl-20)] text-start",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const AlertDialogBody = React.forwardRef<HTMLDivElement, AlertDialogBodyProps>(
+  function AlertDialogBody({ className, ...props }, ref) {
+    return (
+      <div
+        data-slot="alert-dialog-body"
+        ref={ref}
+        className={cn(
+          "flex w-full shrink-0 items-start px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-4xl-20)] pt-[var(--bh-space-lg-10)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const AlertDialogFooter = React.forwardRef<
+  HTMLElement,
+  AlertDialogFooterProps
+>(function AlertDialogFooter({ className, ...props }, ref) {
+  return (
+    <footer
+      data-slot="alert-dialog-footer"
+      ref={ref}
+      className={cn(
+        "flex w-full shrink-0 items-center justify-end gap-[var(--bh-space-lg-10)] border-t border-[var(--bh-border-subtle)] px-[var(--bh-space-4xl-20)] py-[var(--bh-space-3xl-16)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  AlertDialogTitleProps
+>(function AlertDialogTitle({ className, dir = "auto", ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "min-w-0 flex-1 text-start 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 AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  AlertDialogDescriptionProps
+>(function AlertDialogDescription({ className, dir = "auto", ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "min-w-0 flex-1 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+function AlertDialogIcon({
+  children,
+  className,
+  intent = "danger",
+  ...props
+}: AlertDialogIconProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-intent={intent}
+      data-slot="alert-dialog-icon"
+      className={cn(
+        "inline-flex size-[var(--bh-space-5xl-24)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)]",
+        intentClassNames[intent],
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <TriangleAlertIcon
+          className="size-[var(--bh-space-3xl-16)]"
+          strokeWidth="var(--bh-icon-stroke-200)"
+        />
+      )}
+    </span>
+  )
+}
+
+const AlertDialogAction = React.forwardRef<
+  HTMLButtonElement,
+  AlertDialogActionProps
+>(function AlertDialogAction(
+  { asChild = false, children = "Confirm", size = "sm", variant = "danger", ...props },
+  ref
+) {
+  return (
+    <AlertDialogPrimitive.Action asChild>
+      <Button asChild={asChild} ref={ref} size={size} variant={variant} {...props}>
+        {children}
+      </Button>
+    </AlertDialogPrimitive.Action>
+  )
+})
+
+const AlertDialogCancel = React.forwardRef<
+  HTMLButtonElement,
+  AlertDialogCancelProps
+>(function AlertDialogCancel(
+  { asChild = false, children = "Cancel", size = "sm", variant = "soft", ...props },
+  ref
+) {
+  return (
+    <AlertDialogPrimitive.Cancel asChild>
+      <Button asChild={asChild} ref={ref} size={size} variant={variant} {...props}>
+        {children}
+      </Button>
+    </AlertDialogPrimitive.Cancel>
+  )
+})
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  alertDialogContentVariants,
+}
+export type {
+  AlertDialogActionProps,
+  AlertDialogBodyProps,
+  AlertDialogCancelProps,
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogIconProps,
+  AlertDialogIntent,
+  AlertDialogOverlayProps,
+  AlertDialogPortalProps,
+  AlertDialogProps,
+  AlertDialogSize,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+}