banhaten 0.1.3 → 0.3.0

package/registry/components/alert.tsx

@@ -10,6 +10,8 @@ import {
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
+import { Button } from "@/components/ui/button"
 
 const alertVariants = cva(
   [
@@ -21,13 +23,13 @@ const alertVariants = cva(
     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-default)] [--alert-icon:var(--bh-content-danger-default)]",
+          "[--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-default)] [--alert-icon:var(--bh-content-success-default)]",
+          "[--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-default)] [--alert-icon:var(--bh-content-warning-default)]",
+          "[--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-default)] [--alert-icon:var(--bh-content-brand-default)]",
+          "[--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)]",
       },
@@ -35,11 +37,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 +50,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 +76,7 @@ type AlertProps = Omit<
     closeLabel?: string
     description?: React.ReactNode
     dir?: AlertDirection
+    messages?: Partial<AlertMessages>
     onClose?: () => void
     showActions?: boolean
     showCloseButton?: boolean
@@ -69,28 +84,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 +91,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 +167,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)]"
+                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)]"
               >
-                {renderedDescription}
+                {description}
               </p>
-            )}
+            ) : null}
           </div>
 
           {expanded && visibleActions.length > 0 && (
@@ -196,37 +212,44 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
         <AlertActions actions={visibleActions} />
       )}
 
-      {showCloseButton && (
-        <button
+      {visibleCloseButton && (
+        <Button
           data-slot="alert-close"
-          aria-label={closeLabel}
-          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)]"
+          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>
+        </Button>
       )}
     </section>
   )
 })
 
-function AlertActions({ actions }: { actions: AlertAction[] }) {
+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
+        <Button
           data-slot="alert-action"
-          className="inline-flex shrink-0 cursor-pointer items-center justify-center gap-[var(--bh-space-xxs-2)] border-0 bg-transparent 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 outline-none [text-underline-position:from-font] focus-visible:shadow-[var(--shadow-button-focus)]"
+          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>
+        </Button>
       ))}
     </div>
   )
@@ -234,35 +257,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/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

@@ -50,7 +50,7 @@ const avatarVariants = cva(
 )
 
 const avatarFallbackVariants = cva(
-  "flex size-full items-center justify-center rounded-[var(--bh-avatar-radius,var(--bh-radius-full))] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-avatar-fallback-size,var(--bh-text-body-sm-medium-font-size))] font-[var(--bh-font-weight-semibold)] leading-none text-[var(--bh-content-subtle)] whitespace-nowrap",
+  "flex size-full items-center justify-center rounded-[var(--bh-avatar-radius,var(--bh-radius-full))] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-avatar-fallback-size,var(--bh-text-body-sm-medium-font-size))] font-[var(--bh-font-weight-semibold)] leading-none text-[var(--bh-content-default)] whitespace-nowrap",
   {
     variants: {
       size: avatarSizeVariants,
@@ -62,7 +62,7 @@ const avatarFallbackVariants = cva(
 )
 
 const avatarIconVariants = cva(
-  "flex size-full items-center justify-center rounded-[var(--bh-avatar-radius,var(--bh-radius-full))] bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
+  "flex size-full items-center justify-center rounded-[var(--bh-avatar-radius,var(--bh-radius-full))] bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-default)]",
   {
     variants: {
       size: avatarSizeVariants,
@@ -147,7 +147,9 @@ const avatarActionVariants = cva(
 )
 
 function Avatar({
+  "aria-label": ariaLabel,
   className,
+  role,
   size,
   shape,
   ...props
@@ -155,9 +157,11 @@ function Avatar({
   VariantProps<typeof avatarVariants>) {
   return (
     <AvatarPrimitive.Root
+      aria-label={ariaLabel}
       data-slot="avatar"
       data-size={size ?? "default"}
       data-shape={shape ?? "circular"}
+      role={role ?? (ariaLabel ? "img" : undefined)}
       className={cn(avatarVariants({ size, shape, className }))}
       {...props}
     />
@@ -212,7 +216,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 +257,7 @@ function AvatarStatus({
         <BanIcon
           aria-hidden="true"
           className="size-full"
-          strokeWidth={2.4}
+          strokeWidth="var(--bh-icon-stroke-240)"
         />
       ) : null}
     </span>
@@ -298,7 +302,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
 function AvatarGroupCount({
   className,
   children,
-  dir = "ltr",
+  dir,
   size,
   ...props
 }: React.ComponentProps<"span"> & VariantProps<typeof avatarVariants>) {
@@ -307,7 +311,7 @@ function AvatarGroupCount({
       data-slot="avatar-group-count"
       className={cn(
         avatarVariants({ size }),
-        "-ms-[var(--bh-space-md-8)] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-avatar-fallback-size,var(--bh-text-body-sm-medium-font-size))] font-[var(--bh-font-weight-semibold)] leading-none text-[var(--bh-content-subtle)] ring-[var(--bh-space-xxs-2)] ring-[var(--bh-bg-default)]",
+        "-ms-[var(--bh-space-md-8)] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-avatar-fallback-size,var(--bh-text-body-sm-medium-font-size))] font-[var(--bh-font-weight-semibold)] leading-none text-[var(--bh-content-default)] ring-[var(--bh-space-xxs-2)] ring-[var(--bh-bg-default)]",
         className
       )}
       {...props}
@@ -327,7 +331,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 +341,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 +351,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 +360,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",
   },
 }
 
@@ -192,13 +192,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "neutral",
         class:
-          "border-[var(--bh-border-strong)] text-[var(--bh-content-subtle)] [--badge-dot-color:var(--bh-content-subtle)] [--badge-split-border-color:var(--bh-border-default)]",
+          "border-[var(--bh-border-strong)] text-[var(--bh-content-default)] [--badge-dot-color:var(--bh-content-default)] [--badge-split-border-color:var(--bh-border-default)]",
       },
       {
         badgeStyle: "solid",
         color: "neutral",
         class:
-          "bg-[var(--bh-bg-neutral-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-subtle)]",
+          "bg-[var(--bh-bg-neutral-bold)] text-[var(--bh-content-on-neutral)] [--badge-dot-color:var(--bh-content-on-neutral)] [--badge-split-border-color:var(--bh-border-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -210,13 +210,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "blue",
         class:
-          "border-[var(--bh-border-accent-blue-strong)] text-[var(--bh-content-accent-blue-default)] [--badge-dot-color:var(--bh-content-accent-blue-default)] [--badge-split-border-color:var(--bh-border-accent-blue-subtle)]",
+          "border-[var(--bh-border-accent-blue-strong)] text-[var(--bh-content-accent-blue-strong)] [--badge-dot-color:var(--bh-content-accent-blue-strong)] [--badge-split-border-color:var(--bh-border-accent-blue-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "blue",
         class:
-          "bg-[var(--bh-bg-accent-blue-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-blue-subtle)]",
+          "bg-[var(--bh-bg-accent-blue-bold)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-blue-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -228,13 +228,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "green",
         class:
-          "border-[var(--bh-border-accent-green-strong)] text-[var(--bh-content-accent-green-default)] [--badge-dot-color:var(--bh-content-accent-green-default)] [--badge-split-border-color:var(--bh-border-accent-green-subtle)]",
+          "border-[var(--bh-border-accent-green-strong)] text-[var(--bh-content-accent-green-strong)] [--badge-dot-color:var(--bh-content-accent-green-strong)] [--badge-split-border-color:var(--bh-border-accent-green-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "green",
         class:
-          "bg-[var(--bh-bg-accent-green-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-green-subtle)]",
+          "bg-[var(--bh-bg-accent-green-default)] text-[var(--bh-content-on-light)] [--badge-dot-color:var(--bh-content-on-light)] [--badge-split-border-color:var(--bh-border-accent-green-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -246,13 +246,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "amber",
         class:
-          "border-[var(--bh-border-accent-amber-strong)] text-[var(--bh-content-accent-amber-default)] [--badge-dot-color:var(--bh-content-accent-amber-default)] [--badge-split-border-color:var(--bh-border-accent-amber-subtle)]",
+          "border-[var(--bh-border-accent-amber-strong)] text-[var(--bh-content-accent-amber-strong)] [--badge-dot-color:var(--bh-content-accent-amber-strong)] [--badge-split-border-color:var(--bh-border-accent-amber-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "amber",
         class:
-          "bg-[var(--bh-bg-accent-amber-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-amber-subtle)]",
+          "bg-[var(--bh-bg-accent-amber-default)] text-[var(--bh-content-on-light)] [--badge-dot-color:var(--bh-content-on-light)] [--badge-split-border-color:var(--bh-border-accent-amber-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -264,7 +264,7 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "danger",
         class:
-          "border-[var(--bh-border-accent-red-strong)] text-[var(--bh-content-accent-red-default)] [--badge-dot-color:var(--bh-content-accent-red-default)] [--badge-split-border-color:var(--bh-border-accent-red-subtle)]",
+          "border-[var(--bh-border-accent-red-strong)] text-[var(--bh-content-accent-red-strong)] [--badge-dot-color:var(--bh-content-accent-red-strong)] [--badge-split-border-color:var(--bh-border-accent-red-subtle)]",
       },
       {
         badgeStyle: "solid",
@@ -282,7 +282,7 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "purple",
         class:
-          "border-[var(--bh-border-accent-purple-strong)] text-[var(--bh-content-accent-purple-default)] [--badge-dot-color:var(--bh-content-accent-purple-default)] [--badge-split-border-color:var(--bh-border-accent-purple-subtle)]",
+          "border-[var(--bh-border-accent-purple-strong)] text-[var(--bh-content-accent-purple-strong)] [--badge-dot-color:var(--bh-content-accent-purple-strong)] [--badge-split-border-color:var(--bh-border-accent-purple-subtle)]",
       },
       {
         badgeStyle: "solid",
@@ -300,13 +300,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "fuchsia",
         class:
-          "border-[var(--bh-border-accent-fuchsia-strong)] text-[var(--bh-content-accent-fuchsia-default)] [--badge-dot-color:var(--bh-content-accent-fuchsia-default)] [--badge-split-border-color:var(--bh-border-accent-fuchsia-subtle)]",
+          "border-[var(--bh-border-accent-fuchsia-strong)] text-[var(--bh-content-accent-fuchsia-strong)] [--badge-dot-color:var(--bh-content-accent-fuchsia-strong)] [--badge-split-border-color:var(--bh-border-accent-fuchsia-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "fuchsia",
         class:
-          "bg-[var(--bh-bg-accent-fuchsia-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-fuchsia-subtle)]",
+          "bg-[var(--bh-bg-accent-fuchsia-default)] text-[var(--bh-content-on-light)] [--badge-dot-color:var(--bh-content-on-light)] [--badge-split-border-color:var(--bh-border-accent-fuchsia-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -318,13 +318,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "rose",
         class:
-          "border-[var(--bh-border-accent-rose-strong)] text-[var(--bh-content-accent-rose-default)] [--badge-dot-color:var(--bh-content-accent-rose-default)] [--badge-split-border-color:var(--bh-border-accent-rose-subtle)]",
+          "border-[var(--bh-border-accent-rose-strong)] text-[var(--bh-content-accent-rose-strong)] [--badge-dot-color:var(--bh-content-accent-rose-strong)] [--badge-split-border-color:var(--bh-border-accent-rose-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "rose",
         class:
-          "bg-[var(--bh-bg-accent-rose-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-rose-subtle)]",
+          "bg-[var(--bh-bg-accent-rose-bold)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-rose-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -336,13 +336,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "sky",
         class:
-          "border-[var(--bh-border-accent-sky-strong)] text-[var(--bh-content-accent-sky-default)] [--badge-dot-color:var(--bh-content-accent-sky-default)] [--badge-split-border-color:var(--bh-border-accent-sky-subtle)]",
+          "border-[var(--bh-border-accent-sky-strong)] text-[var(--bh-content-accent-sky-strong)] [--badge-dot-color:var(--bh-content-accent-sky-strong)] [--badge-split-border-color:var(--bh-border-accent-sky-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "sky",
         class:
-          "bg-[var(--bh-bg-accent-sky-base)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-sky-subtle)]",
+          "bg-[var(--bh-bg-accent-sky-base)] text-[var(--bh-content-on-light)] [--badge-dot-color:var(--bh-content-on-light)] [--badge-split-border-color:var(--bh-border-accent-sky-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -354,7 +354,7 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "golden",
         class:
-          "border-[var(--bh-border-accent-golden-strong)] text-[var(--bh-content-accent-golden-default)] [--badge-dot-color:var(--bh-content-accent-golden-default)] [--badge-split-border-color:var(--bh-border-accent-golden-subtle)]",
+          "border-[var(--bh-border-accent-golden-strong)] text-[var(--bh-content-accent-golden-strong)] [--badge-dot-color:var(--bh-content-accent-golden-strong)] [--badge-split-border-color:var(--bh-border-accent-golden-subtle)]",
       },
       {
         badgeStyle: "solid",