banhaten 0.3.0 → 0.5.0

package/registry/components/alert.tsx

@@ -1,293 +1,293 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import {
-  CircleAlertIcon,
-  CircleCheckIcon,
-  InfoIcon,
-  StarIcon,
-  TriangleAlertIcon,
-  XIcon,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { useResolvedDirection } from "@/hooks/use-direction"
-import { Button } from "@/components/ui/button"
-
-const alertVariants = cva(
-  [
-    "ds-alert relative flex min-w-0 max-w-full overflow-hidden",
-    "bg-[var(--alert-bg)] text-[var(--alert-title)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--alert-border)]",
-    "font-[var(--bh-font-family)] tracking-[var(--bh-text-base-letter-spacing)]",
-  ],
-  {
-    variants: {
-      status: {
-        danger:
-          "[--alert-bg:var(--bh-bg-danger-subtle)] [--alert-border:var(--bh-border-danger-subtle)] [--alert-title:var(--bh-content-danger-strong)] [--alert-description:var(--bh-content-danger-strong)] [--alert-icon:var(--bh-content-danger-default)]",
-        success:
-          "[--alert-bg:var(--bh-bg-success-subtle)] [--alert-border:var(--bh-border-success-subtle)] [--alert-title:var(--bh-content-success-strong)] [--alert-description:var(--bh-content-success-strong)] [--alert-icon:var(--bh-content-success-default)]",
-        warning:
-          "[--alert-bg:var(--bh-bg-warning-subtle)] [--alert-border:var(--bh-border-warning-subtle)] [--alert-title:var(--bh-content-warning-strong)] [--alert-description:var(--bh-content-warning-strong)] [--alert-icon:var(--bh-content-warning-default)]",
-        info:
-          "[--alert-bg:var(--bh-bg-info-subtle)] [--alert-border:var(--bh-border-info-subtle)] [--alert-title:var(--bh-content-brand-strong)] [--alert-description:var(--bh-content-brand-strong)] [--alert-icon:var(--bh-content-brand-default)]",
-        neutral:
-          "[--alert-bg:var(--bh-bg-neutral-subtle)] [--alert-border:var(--bh-border-subtle)] [--alert-title:var(--bh-content-default)] [--alert-description:var(--bh-content-default)] [--alert-icon:var(--bh-content-default)]",
-      },
-      isExpandable: {
-        false:
-          "h-[var(--bh-alert-compact-height)] w-[var(--bh-alert-compact-width)] items-center gap-[var(--bh-space-xl-12)] rounded-[var(--bh-alert-compact-radius)] p-[var(--bh-alert-compact-padding)]",
-        true:
-          "w-[var(--bh-alert-expanded-width)] items-start gap-[var(--bh-space-xl-12)] rounded-[var(--bh-alert-expanded-radius)] px-[var(--bh-alert-expanded-padding-x)] py-[var(--bh-alert-expanded-padding-y)]",
-      },
-    },
-    defaultVariants: {
-      status: "neutral",
-      isExpandable: false,
-    },
-  }
-)
-
-type AlertStatus = "danger" | "success" | "warning" | "info" | "neutral"
-type AlertDirection = "ltr" | "rtl"
-
-type AlertMessages = {
-  close: string
-}
-
-const defaultAlertMessages: AlertMessages = {
-  close: "Close alert",
-}
-
-const arabicAlertMessages: AlertMessages = {
-  close: "\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u062a\u0646\u0628\u064a\u0647",
-}
-
-type AlertAction = {
-  label: React.ReactNode
-  onClick: () => void
-}
-
-type AlertProps = Omit<
-  React.ComponentPropsWithoutRef<"section">,
-  "dir" | "title"
-> &
-  Omit<VariantProps<typeof alertVariants>, "status"> & {
-    actions?: AlertAction[]
-    closeLabel?: string
-    description?: React.ReactNode
-    dir?: AlertDirection
-    messages?: Partial<AlertMessages>
-    onClose?: () => void
-    showActions?: boolean
-    showCloseButton?: boolean
-    status?: AlertStatus
-    title?: React.ReactNode
-  }
-
-const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
-  {
-    actions,
-    children,
-    className,
-    closeLabel,
-    description,
-    dir,
-    isExpandable = false,
-    messages: messageOverrides,
-    onClose,
-    role,
-    showActions,
-    showCloseButton,
-    status = "neutral",
-    title,
-    ...props
-  },
-  ref
-) {
-  const rootRef = React.useRef<HTMLElement | null>(null)
-  const resolvedDirection = useResolvedDirection(dir, rootRef)
-  const setRootRef = React.useCallback(
-    (node: HTMLElement | null) => {
-      rootRef.current = node
-      if (typeof ref === "function") ref(node)
-      else if (ref) ref.current = node
-    },
-    [ref]
-  )
-  const resolvedStatus = status ?? "neutral"
-  const renderedTitle = title ?? children
-  const requestedActions = (showActions ?? Boolean(actions?.length))
-    ? (actions ?? [])
-    : []
-  const expanded = Boolean(isExpandable && requestedActions.length > 0)
-  const visibleActions = requestedActions.slice(0, expanded ? 2 : 1)
-  const visibleCloseButton = showCloseButton ?? Boolean(onClose)
-  const resolvedCloseLabel =
-    closeLabel ?? messageOverrides?.close ?? defaultAlertMessages.close
-  const resolvedRole =
-    role ??
-    (resolvedStatus === "danger" || resolvedStatus === "warning"
-      ? "alert"
-      : "status")
-
-  return (
-    <section
-      data-slot="alert"
-      data-status={resolvedStatus}
-      data-expandable={expanded ? "true" : "false"}
-      dir={resolvedDirection}
-      ref={setRootRef}
-      role={resolvedRole}
-      className={cn(
-        alertVariants({ status: resolvedStatus, isExpandable: expanded }),
-        expanded &&
-          resolvedDirection === "ltr" &&
-          resolvedStatus === "neutral" &&
-          "[--alert-border:var(--bh-border-default)]",
-        className
-      )}
-      {...props}
-    >
-      <div
-        data-slot="alert-main"
-        className={cn(
-          "flex flex-[1_0_0] min-w-0",
-          expanded
-            ? "items-start gap-[var(--bh-space-xl-12)]"
-            : "items-center gap-[var(--bh-space-md-8)]"
-        )}
-      >
-        <span
-          data-slot="alert-icon"
-          className="inline-flex size-[var(--bh-alert-icon-size)] shrink-0 items-center justify-center text-[var(--alert-icon)]"
-        >
-          <AlertStatusIcon status={resolvedStatus} />
-        </span>
-        <div
-          data-slot="alert-copy"
-          className={cn(
-            "flex flex-[1_0_0] min-w-0 text-start",
-            expanded && "flex-col gap-[var(--bh-space-xl-12)]",
-            resolvedDirection === "rtl" && "text-right"
-          )}
-        >
-          <div
-            data-slot="alert-info"
-            className={cn(
-              "flex w-full min-w-0 flex-[1_0_0] flex-col justify-center gap-[var(--bh-space-xs-4)]",
-              expanded && "flex-none",
-              resolvedDirection === "rtl" && "items-end text-right"
-            )}
-          >
-            {renderedTitle !== undefined ? (
-              <p
-                data-slot="alert-title"
-                dir="auto"
-                className={cn(
-                  "m-0 min-w-0 w-full break-words text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-font-weight-medium)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--alert-title)]",
-                  resolvedDirection === "rtl" && "[direction:rtl] text-right leading-[var(--bh-text-body-sm-regular-line-height)]"
-                )}
-              >
-                {renderedTitle}
-              </p>
-            ) : null}
-            {expanded && description !== undefined ? (
-              <p
-                data-slot="alert-description"
-                dir="auto"
-                className="m-0 w-full break-words text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-font-weight-regular)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--alert-description)]"
-              >
-                {description}
-              </p>
-            ) : null}
-          </div>
-
-          {expanded && visibleActions.length > 0 && (
-            <AlertActions actions={visibleActions} />
-          )}
-        </div>
-      </div>
-
-      {!expanded && visibleActions.length > 0 && (
-        <AlertActions actions={visibleActions} />
-      )}
-
-      {visibleCloseButton && (
-        <Button
-          data-slot="alert-close"
-          aria-label={resolvedCloseLabel}
-          className="size-[var(--bh-alert-icon-size)] shrink-0 rounded-[var(--bh-radius-full)] p-0 text-[var(--bh-content-subtle)]"
-          onClick={onClose}
-          size="icon-xs"
-          type="button"
-          variant="ghost"
-        >
-          <CloseIcon />
-        </Button>
-      )}
-    </section>
-  )
-})
-
-function AlertActions({
-  actions,
-}: {
-  actions: AlertAction[]
-}) {
-  return (
-    <div
-      data-slot="alert-actions"
-      className="flex shrink-0 items-center gap-[var(--bh-space-3xl-16)]"
-    >
-      {actions.map((action, index) => (
-        <Button
-          data-slot="alert-action"
-          className="h-auto shrink-0 gap-[var(--bh-space-xxs-2)] p-0 text-start text-[length:var(--bh-text-body-md-underline-font-size)] font-[var(--bh-text-body-md-underline-font-weight)] leading-[var(--bh-text-body-md-underline-line-height)] tracking-[var(--bh-text-body-md-underline-letter-spacing)] text-[var(--bh-content-default)] underline [text-underline-position:from-font]"
-          key={index}
-          onClick={action.onClick}
-          type="button"
-          variant="ghost"
-        >
-          {action.label}
-        </Button>
-      ))}
-    </div>
-  )
-}
-
-function AlertStatusIcon({ status }: { status: AlertStatus }) {
-  if (status === "success") {
-    return <CircleCheckIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
-  }
-
-  if (status === "warning") {
-    return <TriangleAlertIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
-  }
-
-  if (status === "info") {
-    return <InfoIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
-  }
-
-  if (status === "neutral") {
-    return <StarIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
-  }
-
-  return <CircleAlertIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
-}
-
-function CloseIcon() {
-  return (
-    <XIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
-  )
-}
-
-export {
-  arabicAlertMessages,
-  Alert,
-  alertVariants,
-  type AlertAction,
-  type AlertDirection,
-  type AlertMessages,
-  type AlertProps,
-  type AlertStatus,
-}
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import {
+  CircleAlertIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  StarIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
+import { Button } from "@/components/ui/button"
+
+const alertVariants = cva(
+  [
+    "ds-alert relative flex min-w-0 max-w-full overflow-hidden",
+    "bg-[var(--alert-bg)] text-[var(--alert-title)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--alert-border)]",
+    "font-[var(--bh-font-family)] tracking-[var(--bh-text-base-letter-spacing)]",
+  ],
+  {
+    variants: {
+      status: {
+        danger:
+          "[--alert-bg:var(--bh-bg-danger-subtle)] [--alert-border:var(--bh-border-danger-subtle)] [--alert-title:var(--bh-content-danger-strong)] [--alert-description:var(--bh-content-danger-strong)] [--alert-icon:var(--bh-content-danger-default)]",
+        success:
+          "[--alert-bg:var(--bh-bg-success-subtle)] [--alert-border:var(--bh-border-success-subtle)] [--alert-title:var(--bh-content-success-strong)] [--alert-description:var(--bh-content-success-strong)] [--alert-icon:var(--bh-content-success-default)]",
+        warning:
+          "[--alert-bg:var(--bh-bg-warning-subtle)] [--alert-border:var(--bh-border-warning-subtle)] [--alert-title:var(--bh-content-warning-strong)] [--alert-description:var(--bh-content-warning-strong)] [--alert-icon:var(--bh-content-warning-default)]",
+        info:
+          "[--alert-bg:var(--bh-bg-info-subtle)] [--alert-border:var(--bh-border-info-subtle)] [--alert-title:var(--bh-content-brand-strong)] [--alert-description:var(--bh-content-brand-strong)] [--alert-icon:var(--bh-content-brand-default)]",
+        neutral:
+          "[--alert-bg:var(--bh-bg-neutral-subtle)] [--alert-border:var(--bh-border-subtle)] [--alert-title:var(--bh-content-default)] [--alert-description:var(--bh-content-default)] [--alert-icon:var(--bh-content-default)]",
+      },
+      isExpandable: {
+        false:
+          "h-[var(--bh-alert-compact-height)] w-[var(--bh-alert-compact-width)] items-center gap-[var(--bh-space-xl-12)] rounded-[var(--bh-alert-compact-radius)] p-[var(--bh-alert-compact-padding)]",
+        true:
+          "w-[var(--bh-alert-expanded-width)] items-start gap-[var(--bh-space-xl-12)] rounded-[var(--bh-alert-expanded-radius)] px-[var(--bh-alert-expanded-padding-x)] py-[var(--bh-alert-expanded-padding-y)]",
+      },
+    },
+    defaultVariants: {
+      status: "neutral",
+      isExpandable: false,
+    },
+  }
+)
+
+type AlertStatus = "danger" | "success" | "warning" | "info" | "neutral"
+type AlertDirection = "ltr" | "rtl"
+
+type AlertMessages = {
+  close: string
+}
+
+const defaultAlertMessages: AlertMessages = {
+  close: "Close alert",
+}
+
+const arabicAlertMessages: AlertMessages = {
+  close: "\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u062a\u0646\u0628\u064a\u0647",
+}
+
+type AlertAction = {
+  label: React.ReactNode
+  onClick: () => void
+}
+
+type AlertProps = Omit<
+  React.ComponentPropsWithoutRef<"section">,
+  "dir" | "title"
+> &
+  Omit<VariantProps<typeof alertVariants>, "status"> & {
+    actions?: AlertAction[]
+    closeLabel?: string
+    description?: React.ReactNode
+    dir?: AlertDirection
+    messages?: Partial<AlertMessages>
+    onClose?: () => void
+    showActions?: boolean
+    showCloseButton?: boolean
+    status?: AlertStatus
+    title?: React.ReactNode
+  }
+
+const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
+  {
+    actions,
+    children,
+    className,
+    closeLabel,
+    description,
+    dir,
+    isExpandable = false,
+    messages: messageOverrides,
+    onClose,
+    role,
+    showActions,
+    showCloseButton,
+    status = "neutral",
+    title,
+    ...props
+  },
+  ref
+) {
+  const rootRef = React.useRef<HTMLElement | null>(null)
+  const resolvedDirection = useResolvedDirection(dir, rootRef)
+  const setRootRef = React.useCallback(
+    (node: HTMLElement | null) => {
+      rootRef.current = node
+      if (typeof ref === "function") ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref]
+  )
+  const resolvedStatus = status ?? "neutral"
+  const renderedTitle = title ?? children
+  const requestedActions = (showActions ?? Boolean(actions?.length))
+    ? (actions ?? [])
+    : []
+  const expanded = Boolean(isExpandable && requestedActions.length > 0)
+  const visibleActions = requestedActions.slice(0, expanded ? 2 : 1)
+  const visibleCloseButton = showCloseButton ?? Boolean(onClose)
+  const resolvedCloseLabel =
+    closeLabel ?? messageOverrides?.close ?? defaultAlertMessages.close
+  const resolvedRole =
+    role ??
+    (resolvedStatus === "danger" || resolvedStatus === "warning"
+      ? "alert"
+      : "status")
+
+  return (
+    <section
+      data-slot="alert"
+      data-status={resolvedStatus}
+      data-expandable={expanded ? "true" : "false"}
+      dir={resolvedDirection}
+      ref={setRootRef}
+      role={resolvedRole}
+      className={cn(
+        alertVariants({ status: resolvedStatus, isExpandable: expanded }),
+        expanded &&
+          resolvedDirection === "ltr" &&
+          resolvedStatus === "neutral" &&
+          "[--alert-border:var(--bh-border-default)]",
+        className
+      )}
+      {...props}
+    >
+      <div
+        data-slot="alert-main"
+        className={cn(
+          "flex flex-[1_0_0] min-w-0",
+          expanded
+            ? "items-start gap-[var(--bh-space-xl-12)]"
+            : "items-center gap-[var(--bh-space-md-8)]"
+        )}
+      >
+        <span
+          data-slot="alert-icon"
+          className="inline-flex size-[var(--bh-alert-icon-slot-size)] shrink-0 items-center justify-center text-[var(--alert-icon)]"
+        >
+          <AlertStatusIcon status={resolvedStatus} />
+        </span>
+        <div
+          data-slot="alert-copy"
+          className={cn(
+            "flex flex-[1_0_0] min-w-0 text-start",
+            expanded && "flex-col gap-[var(--bh-space-xl-12)]",
+            resolvedDirection === "rtl" && "text-right"
+          )}
+        >
+          <div
+            data-slot="alert-info"
+            className={cn(
+              "flex w-full min-w-0 flex-[1_0_0] flex-col justify-center gap-[var(--bh-space-xs-4)]",
+              expanded && "flex-none",
+              resolvedDirection === "rtl" && "items-end text-right"
+            )}
+          >
+            {renderedTitle !== undefined ? (
+              <p
+                data-slot="alert-title"
+                dir="auto"
+                className={cn(
+                  "m-0 min-w-0 w-full break-words text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-font-weight-medium)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--alert-title)]",
+                  resolvedDirection === "rtl" && "[direction:rtl] text-right leading-[var(--bh-text-body-sm-regular-line-height)]"
+                )}
+              >
+                {renderedTitle}
+              </p>
+            ) : null}
+            {expanded && description !== undefined ? (
+              <p
+                data-slot="alert-description"
+                dir="auto"
+                className="m-0 w-full break-words text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-font-weight-regular)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--alert-description)]"
+              >
+                {description}
+              </p>
+            ) : null}
+          </div>
+
+          {expanded && visibleActions.length > 0 && (
+            <AlertActions actions={visibleActions} />
+          )}
+        </div>
+      </div>
+
+      {!expanded && visibleActions.length > 0 && (
+        <AlertActions actions={visibleActions} />
+      )}
+
+      {visibleCloseButton && (
+        <Button
+          data-slot="alert-close"
+          aria-label={resolvedCloseLabel}
+          className="size-[var(--bh-alert-icon-slot-size)] shrink-0 rounded-[var(--bh-radius-full)] p-0 text-[var(--bh-content-subtle)]"
+          onClick={onClose}
+          size="icon-xs"
+          type="button"
+          variant="ghost"
+        >
+          <CloseIcon />
+        </Button>
+      )}
+    </section>
+  )
+})
+
+function AlertActions({
+  actions,
+}: {
+  actions: AlertAction[]
+}) {
+  return (
+    <div
+      data-slot="alert-actions"
+      className="flex shrink-0 items-center gap-[var(--bh-space-3xl-16)]"
+    >
+      {actions.map((action, index) => (
+        <Button
+          data-slot="alert-action"
+          className="h-auto shrink-0 gap-[var(--bh-space-xxs-2)] p-0 text-start text-[length:var(--bh-text-body-md-underline-font-size)] font-[var(--bh-text-body-md-underline-font-weight)] leading-[var(--bh-text-body-md-underline-line-height)] tracking-[var(--bh-text-body-md-underline-letter-spacing)] text-[var(--bh-content-default)] underline [text-underline-position:from-font]"
+          key={index}
+          onClick={action.onClick}
+          type="button"
+          variant="ghost"
+        >
+          {action.label}
+        </Button>
+      ))}
+    </div>
+  )
+}
+
+function AlertStatusIcon({ status }: { status: AlertStatus }) {
+  if (status === "success") {
+    return <CircleCheckIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
+  }
+
+  if (status === "warning") {
+    return <TriangleAlertIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
+  }
+
+  if (status === "info") {
+    return <InfoIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
+  }
+
+  if (status === "neutral") {
+    return <StarIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
+  }
+
+  return <CircleAlertIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth="var(--bh-icon-stroke-225)" />
+}
+
+function CloseIcon() {
+  return (
+    <XIcon aria-hidden="true" className="size-[var(--bh-space-3xl-16)]" strokeWidth="var(--bh-icon-stroke-225)" />
+  )
+}
+
+export {
+  arabicAlertMessages,
+  Alert,
+  alertVariants,
+  type AlertAction,
+  type AlertDirection,
+  type AlertMessages,
+  type AlertProps,
+  type AlertStatus,
+}