banhaten 0.3.0 → 0.5.0

package/registry/components/toast.tsx

@@ -1,136 +1,136 @@
-"use client"
-
-import * as React from "react"
-import {
-  Toaster as SonnerToaster,
-  toast as sonnerToast,
-  type ExternalToast,
-  type ToasterProps as SonnerToasterProps,
-} from "sonner"
-
-import { cn } from "@/lib/utils"
-import { useResolvedDirection } from "@/hooks/use-direction"
-
-type ToastIntent = "default" | "success" | "danger" | "warning" | "info"
-type ToastSide = "start" | "end"
-type ToastOptions = ExternalToast & {
-  intent?: ToastIntent
-}
-type ToasterProps = Omit<SonnerToasterProps, "position"> & {
-  dir?: "ltr" | "rtl"
-  position?: SonnerToasterProps["position"]
-  side?: ToastSide
-}
-
-const intentClassNames: Record<ToastIntent, string> = {
-  danger:
-    "[--bh-toast-accent:var(--bh-content-danger-default)] [--bh-toast-accent-bg:var(--bh-bg-danger-subtle)]",
-  default:
-    "[--bh-toast-accent:var(--bh-content-brand-default)] [--bh-toast-accent-bg:var(--bh-bg-brand-subtle)]",
-  info:
-    "[--bh-toast-accent:var(--bh-content-brand-default)] [--bh-toast-accent-bg:var(--bh-bg-info-subtle)]",
-  success:
-    "[--bh-toast-accent:var(--bh-content-success-default)] [--bh-toast-accent-bg:var(--bh-bg-success-subtle)]",
-  warning:
-    "[--bh-toast-accent:var(--bh-content-warning-default)] [--bh-toast-accent-bg:var(--bh-bg-warning-subtle)]",
-}
-
-const toastClassName = [
-  "border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-component-default)]",
-  "rounded-[var(--bh-radius-xl-10)] font-[var(--bh-font-family)]",
-  "[--normal-bg:var(--bh-bg-raised)] [--normal-border:var(--bh-border-subtle)] [--normal-text:var(--bh-content-default)]",
-  "[--success-bg:var(--bh-bg-raised)] [--success-border:var(--bh-border-success-subtle)] [--success-text:var(--bh-content-default)]",
-  "[--error-bg:var(--bh-bg-raised)] [--error-border:var(--bh-border-danger-subtle)] [--error-text:var(--bh-content-default)]",
-  "[--warning-bg:var(--bh-bg-raised)] [--warning-border:var(--bh-border-warning-subtle)] [--warning-text:var(--bh-content-default)]",
-  "[--info-bg:var(--bh-bg-raised)] [--info-border:var(--bh-border-info-subtle)] [--info-text:var(--bh-content-default)]",
-].join(" ")
-
-function Toaster({
-  className,
-  closeButton = true,
-  dir,
-  position,
-  richColors = false,
-  side = "end",
-  toastOptions,
-  ...props
-}: ToasterProps) {
-  const directionBoundaryRef = React.useRef<HTMLSpanElement | null>(null)
-  const resolvedDirection = useResolvedDirection(dir, directionBoundaryRef)
-  const resolvedPosition = position ?? getToastPosition(resolvedDirection, side)
-  const mergedToastOptions: ToasterProps["toastOptions"] = {
-    ...toastOptions,
-    classNames: {
-      ...toastOptions?.classNames,
-      toast: cn(toastClassName, toastOptions?.classNames?.toast),
-      title: cn(
-        "text-[length:var(--bh-text-body-sm-semibold-font-size)] font-[var(--bh-text-body-sm-semibold-font-weight)] leading-[var(--bh-text-body-sm-semibold-line-height)] tracking-[var(--bh-text-body-sm-semibold-letter-spacing)]",
-        toastOptions?.classNames?.title
-      ),
-      description: cn(
-        "text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
-        toastOptions?.classNames?.description
-      ),
-      actionButton: cn(
-        "rounded-[var(--bh-control-default)] bg-[var(--bh-interactive-brand-default)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-on-brand)]",
-        toastOptions?.classNames?.actionButton
-      ),
-      cancelButton: cn(
-        "rounded-[var(--bh-control-default)] bg-[var(--bh-bg-neutral-soft)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-default)]",
-        toastOptions?.classNames?.cancelButton
-      ),
-    },
-  }
-
-  return (
-    <span className="contents" data-slot="toaster-direction-boundary" ref={directionBoundaryRef}>
-      <SonnerToaster
-        className={cn("toaster group", className)}
-        closeButton={closeButton}
-        dir={resolvedDirection}
-        position={resolvedPosition}
-        richColors={richColors}
-        toastOptions={mergedToastOptions}
-        {...props}
-      />
-    </span>
-  )
-}
-
-function showToast(message: React.ReactNode, options: ToastOptions = {}) {
-  const { intent = "default", className, ...rest } = options
-  return sonnerToast(message, {
-    className: cn(intentClassNames[intent], className),
-    ...rest,
-  })
-}
-
-const toast = Object.assign(showToast, {
-  danger: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
-    showToast(message, { ...options, intent: "danger" }),
-  dismiss: sonnerToast.dismiss,
-  error: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
-    showToast(message, { ...options, intent: "danger" }),
-  info: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
-    showToast(message, { ...options, intent: "info" }),
-  loading: sonnerToast.loading,
-  promise: sonnerToast.promise,
-  success: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
-    showToast(message, { ...options, intent: "success" }),
-  warning: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
-    showToast(message, { ...options, intent: "warning" }),
-})
-
-function getToastPosition(
-  dir: ToasterProps["dir"],
-  side: ToastSide
-): SonnerToasterProps["position"] {
-  if (side === "start") {
-    return dir === "rtl" ? "top-right" : "top-left"
-  }
-
-  return dir === "rtl" ? "top-left" : "top-right"
-}
-
-export { Toaster, toast }
-export type { ToastIntent, ToastOptions, ToasterProps }
+"use client"
+
+import * as React from "react"
+import {
+  Toaster as SonnerToaster,
+  toast as sonnerToast,
+  type ExternalToast,
+  type ToasterProps as SonnerToasterProps,
+} from "sonner"
+
+import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
+
+type ToastIntent = "default" | "success" | "danger" | "warning" | "info"
+type ToastSide = "start" | "end"
+type ToastOptions = ExternalToast & {
+  intent?: ToastIntent
+}
+type ToasterProps = Omit<SonnerToasterProps, "position"> & {
+  dir?: "ltr" | "rtl"
+  position?: SonnerToasterProps["position"]
+  side?: ToastSide
+}
+
+const intentClassNames: Record<ToastIntent, string> = {
+  danger:
+    "[--bh-toast-accent:var(--bh-content-danger-default)] [--bh-toast-accent-bg:var(--bh-bg-danger-subtle)]",
+  default:
+    "[--bh-toast-accent:var(--bh-content-brand-default)] [--bh-toast-accent-bg:var(--bh-bg-brand-subtle)]",
+  info:
+    "[--bh-toast-accent:var(--bh-content-brand-default)] [--bh-toast-accent-bg:var(--bh-bg-info-subtle)]",
+  success:
+    "[--bh-toast-accent:var(--bh-content-success-default)] [--bh-toast-accent-bg:var(--bh-bg-success-subtle)]",
+  warning:
+    "[--bh-toast-accent:var(--bh-content-warning-default)] [--bh-toast-accent-bg:var(--bh-bg-warning-subtle)]",
+}
+
+const toastClassName = [
+  "border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--elevation-component-default)]",
+  "rounded-[var(--bh-radius-xl-10)] font-[var(--bh-font-family)]",
+  "[--normal-bg:var(--bh-bg-raised)] [--normal-border:var(--bh-border-subtle)] [--normal-text:var(--bh-content-default)]",
+  "[--success-bg:var(--bh-bg-raised)] [--success-border:var(--bh-border-success-subtle)] [--success-text:var(--bh-content-default)]",
+  "[--error-bg:var(--bh-bg-raised)] [--error-border:var(--bh-border-danger-subtle)] [--error-text:var(--bh-content-default)]",
+  "[--warning-bg:var(--bh-bg-raised)] [--warning-border:var(--bh-border-warning-subtle)] [--warning-text:var(--bh-content-default)]",
+  "[--info-bg:var(--bh-bg-raised)] [--info-border:var(--bh-border-info-subtle)] [--info-text:var(--bh-content-default)]",
+].join(" ")
+
+function Toaster({
+  className,
+  closeButton = true,
+  dir,
+  position,
+  richColors = false,
+  side = "end",
+  toastOptions,
+  ...props
+}: ToasterProps) {
+  const directionBoundaryRef = React.useRef<HTMLSpanElement | null>(null)
+  const resolvedDirection = useResolvedDirection(dir, directionBoundaryRef)
+  const resolvedPosition = position ?? getToastPosition(resolvedDirection, side)
+  const mergedToastOptions: ToasterProps["toastOptions"] = {
+    ...toastOptions,
+    classNames: {
+      ...toastOptions?.classNames,
+      toast: cn(toastClassName, toastOptions?.classNames?.toast),
+      title: cn(
+        "text-[length:var(--bh-text-body-sm-semibold-font-size)] font-[var(--bh-text-body-sm-semibold-font-weight)] leading-[var(--bh-text-body-sm-semibold-line-height)] tracking-[var(--bh-text-body-sm-semibold-letter-spacing)]",
+        toastOptions?.classNames?.title
+      ),
+      description: cn(
+        "text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        toastOptions?.classNames?.description
+      ),
+      actionButton: cn(
+        "rounded-[var(--bh-control-default)] bg-[var(--bh-interactive-brand-default)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-on-brand)]",
+        toastOptions?.classNames?.actionButton
+      ),
+      cancelButton: cn(
+        "rounded-[var(--bh-control-default)] bg-[var(--bh-bg-neutral-soft)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-default)]",
+        toastOptions?.classNames?.cancelButton
+      ),
+    },
+  }
+
+  return (
+    <span className="contents" data-slot="toaster-direction-boundary" ref={directionBoundaryRef}>
+      <SonnerToaster
+        className={cn("toaster group", className)}
+        closeButton={closeButton}
+        dir={resolvedDirection}
+        position={resolvedPosition}
+        richColors={richColors}
+        toastOptions={mergedToastOptions}
+        {...props}
+      />
+    </span>
+  )
+}
+
+function showToast(message: React.ReactNode, options: ToastOptions = {}) {
+  const { intent = "default", className, ...rest } = options
+  return sonnerToast(message, {
+    className: cn(intentClassNames[intent], className),
+    ...rest,
+  })
+}
+
+const toast = Object.assign(showToast, {
+  danger: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "danger" }),
+  dismiss: sonnerToast.dismiss,
+  error: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "danger" }),
+  info: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "info" }),
+  loading: sonnerToast.loading,
+  promise: sonnerToast.promise,
+  success: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "success" }),
+  warning: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "warning" }),
+})
+
+function getToastPosition(
+  dir: ToasterProps["dir"],
+  side: ToastSide
+): SonnerToasterProps["position"] {
+  if (side === "start") {
+    return dir === "rtl" ? "top-right" : "top-left"
+  }
+
+  return dir === "rtl" ? "top-left" : "top-right"
+}
+
+export { Toaster, toast }
+export type { ToastIntent, ToastOptions, ToasterProps }