banhaten 0.1.2 → 0.2.0

package/registry/components/alert.tsx

@@ -10,6 +10,7 @@ import {
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 const alertVariants = cva(
   [
@@ -35,11 +36,11 @@ const alertVariants = cva(
         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:
-          "h-[var(--bh-alert-expanded-height)] 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)]",
+          "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: "danger",
+      status: "neutral",
       isExpandable: false,
     },
   }
@@ -48,9 +49,21 @@ const alertVariants = cva(
 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
+  onClick: () => void
 }
 
 type AlertProps = Omit<
@@ -62,6 +75,7 @@ type AlertProps = Omit<
     closeLabel?: string
     description?: React.ReactNode
     dir?: AlertDirection
+    messages?: Partial<AlertMessages>
     onClose?: () => void
     showActions?: boolean
     showCloseButton?: boolean
@@ -69,28 +83,6 @@ type AlertProps = Omit<
     title?: React.ReactNode
   }
 
-const defaultActions: Record<AlertDirection, AlertAction[]> = {
-  ltr: [{ label: "Action" }, { label: "Action" }],
-  rtl: [
-    { label: "\u0632\u0631 \u0627\u0644\u0631\u0627\u0628\u0637" },
-    { label: "\u0632\u0631 \u0627\u0644\u0631\u0627\u0628\u0637" },
-  ],
-}
-
-const defaultCopy = {
-  ltr: {
-    title: "Alert title",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Libero feugiat velit risus egestas blandit eget curabitur.",
-  },
-  rtl: {
-    title:
-      "\u0623\u062f\u062e\u0644 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u062a\u0646\u0628\u064a\u0647 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643 \u0647\u0646\u0627!",
-    description:
-      "\u0623\u062f\u062e\u0644 \u0648\u0635\u0641 \u0627\u0644\u062a\u0646\u0628\u064a\u0647 \u0647\u0646\u0627\u060c \u0633\u064a\u0628\u062f\u0648 \u0623\u0641\u0636\u0644 \u0643\u0633\u0637\u0631\u064a\u0646 \u0645\u0646 \u0627\u0644\u0646\u0635.",
-  },
-}
-
 const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
   {
     actions,
@@ -98,37 +90,57 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
     className,
     closeLabel,
     description,
-    dir = "ltr",
+    dir,
     isExpandable = false,
+    messages: messageOverrides,
     onClose,
-    showActions = true,
-    showCloseButton = true,
-    status = "danger",
+    role,
+    showActions,
+    showCloseButton,
+    status = "neutral",
     title,
     ...props
   },
   ref
 ) {
-  const expanded = Boolean(isExpandable)
-  const resolvedStatus = status ?? "danger"
-  const copy = defaultCopy[dir]
-  const renderedTitle = title ?? children ?? copy.title
-  const renderedDescription = description ?? copy.description
-  const actionItems = actions ?? defaultActions[dir]
-  const visibleActions = showActions ? actionItems.slice(0, expanded ? 2 : 1) : []
+  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={dir}
-      ref={ref}
+      dir={resolvedDirection}
+      ref={setRootRef}
+      role={resolvedRole}
       className={cn(
         alertVariants({ status: resolvedStatus, isExpandable: expanded }),
-        expanded && dir === "rtl" && "h-[var(--bh-alert-expanded-rtl-height)]",
         expanded &&
-          dir === "ltr" &&
+          resolvedDirection === "ltr" &&
           resolvedStatus === "neutral" &&
           "[--alert-border:var(--bh-border-default)]",
         className
@@ -154,36 +166,39 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
           data-slot="alert-copy"
           className={cn(
             "flex flex-[1_0_0] min-w-0 text-start",
-            expanded && "flex-col justify-center gap-[var(--bh-space-xl-12)]",
-            dir === "rtl" && "text-right"
+            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)]",
-              dir === "rtl" && "items-end text-right"
+              expanded && "flex-none",
+              resolvedDirection === "rtl" && "items-end text-right"
             )}
           >
-            <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)]",
-                dir === "rtl" && "[direction:rtl] text-right leading-[var(--bh-text-body-sm-regular-line-height)]"
-              )}
-            >
-              {renderedTitle}
-            </p>
-            {expanded && (
+            {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)] opacity-[var(--bh-opacity-80)]"
               >
-                {renderedDescription}
+                {description}
               </p>
-            )}
+            ) : null}
           </div>
 
           {expanded && visibleActions.length > 0 && (
@@ -196,10 +211,10 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
         <AlertActions actions={visibleActions} />
       )}
 
-      {showCloseButton && (
+      {visibleCloseButton && (
         <button
           data-slot="alert-close"
-          aria-label={closeLabel}
+          aria-label={resolvedCloseLabel}
           className="inline-flex size-[var(--bh-alert-icon-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none focus-visible:shadow-[var(--shadow-button-focus)]"
           onClick={onClose}
           type="button"
@@ -211,7 +226,11 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
   )
 })
 
-function AlertActions({ actions }: { actions: AlertAction[] }) {
+function AlertActions({
+  actions,
+}: {
+  actions: AlertAction[]
+}) {
   return (
     <div
       data-slot="alert-actions"
@@ -234,35 +253,37 @@ function AlertActions({ actions }: { actions: AlertAction[] }) {
 
 function AlertStatusIcon({ status }: { status: AlertStatus }) {
   if (status === "success") {
-    return <CircleCheckIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
+    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={2.25} />
+    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={2.25} />
+    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={2.25} />
+    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={2.25} />
+  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={2.25} />
+    <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,
 }

package/registry/components/aspect-ratio.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+import { cn } from "@/lib/utils"
+
+type AspectRatioProps = React.ComponentPropsWithoutRef<
+  typeof AspectRatioPrimitive.Root
+>
+
+const AspectRatio = React.forwardRef<
+  React.ElementRef<typeof AspectRatioPrimitive.Root>,
+  AspectRatioProps
+>(function AspectRatio({ className, ...props }, ref) {
+  return (
+    <AspectRatioPrimitive.Root
+      data-slot="aspect-ratio"
+      ref={ref}
+      className={cn(
+        "overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-neutral-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+export { AspectRatio }
+export type { AspectRatioProps }

package/registry/components/autocomplete.tsx

@@ -13,6 +13,7 @@ import {
   type SelectItemType,
 } from "./select"
 import { Tag, type TagSize } from "./tag"
+import { Popover, PopoverAnchor, PopoverContent } from "./popover"
 
 import { cn } from "@/lib/utils"
 
@@ -404,8 +405,13 @@ const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
           </div>
         ) : null}
 
-        <div data-slot="autocomplete-control" className="relative w-full">
-          <Input
+        <Popover
+          className="w-full"
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+        >
+          <PopoverAnchor asChild>
+            <Input
             aria-activedescendant={activeOptionId}
             aria-autocomplete="list"
             aria-controls={menuOpen ? listboxId : undefined}
@@ -424,7 +430,7 @@ const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
                 aria-hidden="true"
                 className="size-[var(--bh-input-icon-size)]"
                 focusable="false"
-                strokeWidth={2.25}
+                strokeWidth="var(--bh-icon-stroke-225)"
               />
             }
             placeholder={placeholder}
@@ -439,14 +445,22 @@ const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
             onClick={handleInputClick}
             onFocus={handleInputFocus}
             onKeyDown={handleInputKeyDown}
-          />
-
-          {menuOpen ? (
+            />
+          </PopoverAnchor>
+
+          <PopoverContent
+            align="start"
+            role="presentation"
+            showArrow={false}
+            size="auto"
+            className="w-[var(--bh-select-menu-width)] bg-transparent p-0 shadow-none"
+            onOpenAutoFocus={(event) => event.preventDefault()}
+          >
             <SelectMenu
               aria-multiselectable={isMultiple || undefined}
               id={listboxId}
               className={cn(
-                "absolute start-0 top-[calc(100%+var(--bh-select-menu-offset))] z-[var(--bh-z-popover)] max-h-[var(--bh-autocomplete-menu-max-height,var(--bh-space-18xl-320))] overflow-y-auto",
+                "max-h-[var(--bh-autocomplete-menu-max-height,var(--bh-space-18xl-320))] overflow-y-auto",
                 menuClassName
               )}
             >
@@ -486,8 +500,8 @@ const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
                 </div>
               )}
             </SelectMenu>
-          ) : null}
-        </div>
+          </PopoverContent>
+        </Popover>
 
         {shouldRenderHelper ? (
           <SelectHelperText

package/registry/components/avatar.tsx

@@ -212,7 +212,7 @@ function AvatarIcon({
         <UserIcon
           aria-hidden="true"
           className="size-[var(--bh-avatar-icon-size)]"
-          strokeWidth={2.1}
+          strokeWidth="var(--bh-icon-stroke-210)"
         />
       )}
     </span>
@@ -253,7 +253,7 @@ function AvatarStatus({
         <BanIcon
           aria-hidden="true"
           className="size-full"
-          strokeWidth={2.4}
+          strokeWidth="var(--bh-icon-stroke-240)"
         />
       ) : null}
     </span>
@@ -298,7 +298,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
 function AvatarGroupCount({
   className,
   children,
-  dir = "ltr",
+  dir,
   size,
   ...props
 }: React.ComponentProps<"span"> & VariantProps<typeof avatarVariants>) {
@@ -327,7 +327,7 @@ function AvatarActionIcon({
       <PencilIcon
         aria-hidden="true"
         className="size-[var(--bh-avatar-action-icon-size)]"
-        strokeWidth={2.6}
+        strokeWidth="var(--bh-icon-stroke-260)"
       />
     )
   }
@@ -337,7 +337,7 @@ function AvatarActionIcon({
       <XIcon
         aria-hidden="true"
         className="size-[var(--bh-avatar-action-icon-size)]"
-        strokeWidth={2.8}
+        strokeWidth="var(--bh-icon-stroke-280)"
       />
     )
   }
@@ -347,7 +347,7 @@ function AvatarActionIcon({
       <BadgeCheckIcon
         aria-hidden="true"
         className="size-[var(--bh-avatar-action-size)] fill-current text-[var(--bh-bg-accent-sky-base)] [stroke:var(--bh-content-on-brand)]"
-        strokeWidth={2.4}
+        strokeWidth="var(--bh-icon-stroke-240)"
       />
     )
   }
@@ -356,7 +356,7 @@ function AvatarActionIcon({
     <PlusIcon
       aria-hidden="true"
       className="size-[var(--bh-avatar-action-icon-size)]"
-      strokeWidth={2.6}
+      strokeWidth="var(--bh-icon-stroke-260)"
     />
   )
 }

package/registry/components/badge.tsx

@@ -60,7 +60,7 @@ const legacyVariantMap: Record<
     badgeStyle: "light",
     color: "blue",
     className:
-      "bg-[var(--bh-interactive-ghost-default)] px-[var(--bh-space-none)] text-[var(--bh-content-link)] underline-offset-4 [a&]:hover:underline",
+      "bg-[var(--bh-interactive-ghost-default)] px-[var(--bh-space-none)] text-[var(--bh-content-link)] underline-offset-[var(--bh-space-xs-4)] [a&]:hover:underline",
   },
 }