banhaten 0.1.0 → 0.1.1

package/registry/components/select-content.tsx

@@ -1,5 +1,14 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import {
+  AlertCircleIcon,
+  ChartNoAxesCombinedIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  InfoIcon,
+  PlusIcon,
+  UserIcon,
+} from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -7,7 +16,6 @@ type SelectItemType =
   | "default"
   | "icon"
   | "avatar"
-  | "flag"
   | "company"
   | "payment"
   | "dot"
@@ -77,40 +85,6 @@ function SelectItemAvatar({
   )
 }
 
-type SelectItemFlagProps = React.ComponentProps<"span"> & {
-  alt?: string
-  src?: string
-}
-
-function SelectItemFlag({
-  alt = "",
-  className,
-  src,
-  ...props
-}: SelectItemFlagProps) {
-  return (
-    <span
-      data-slot="select-item-flag"
-      className={cn(
-        "relative size-[var(--bh-select-icon-slot-size)] shrink-0 overflow-hidden rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-always-white)]",
-        className
-      )}
-      {...props}
-    >
-      {src ? (
-        <img alt={alt} className="size-full object-cover" src={src} />
-      ) : (
-        <>
-          <span className="absolute inset-x-0 top-0 h-1/3 bg-[var(--bh-bg-accent-red-default)]" />
-          <span className="absolute inset-x-0 top-1/3 h-1/3 bg-[var(--bh-bg-always-white)]" />
-          <span className="absolute inset-x-0 bottom-0 h-1/3 bg-[var(--bh-bg-always-dark)]" />
-          <span className="absolute start-1/2 top-1/2 size-[var(--bh-space-xs-4)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-accent-golden-default)]" />
-        </>
-      )}
-    </span>
-  )
-}
-
 type SelectItemCompanyLogoProps = React.ComponentProps<"span">
 
 function SelectItemCompanyLogo({
@@ -126,27 +100,12 @@ function SelectItemCompanyLogo({
       )}
       {...props}
     >
-      <svg
+      <ChartNoAxesCombinedIcon
         aria-hidden="true"
         className="size-[var(--bh-select-company-icon-size)]"
-        fill="none"
         focusable="false"
-        viewBox="0 0 18 18"
-      >
-        <path
-          d="M3 10.25C5.4 6.75 7.5 6.75 10 9.4C11.6 11.1 13 11 15 8.75"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeWidth="2.4"
-        />
-        <path
-          d="M3 7.7C5.3 4.5 7.4 4.5 9.8 7.05C11.4 8.75 13 8.65 15 6.4"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeWidth="2.4"
-          opacity="var(--bh-opacity-70)"
-        />
-      </svg>
+        strokeWidth={2.2}
+      />
     </span>
   )
 }
@@ -198,7 +157,6 @@ const defaultSelectItemMedia: Partial<Record<SelectItemType, () => React.ReactNo
   avatar: () => <SelectItemAvatar />,
   company: () => <SelectItemCompanyLogo />,
   dot: () => <SelectItemStatusDot />,
-  flag: () => <SelectItemFlag />,
   icon: () => <SelectIcon name="plus" />,
   payment: () => <SelectItemPaymentIcon />,
 }
@@ -215,87 +173,35 @@ function SelectIcon({
   name: SelectIconName
 }) {
   const iconClassName = cn("size-[var(--bh-select-icon-size)]", className)
+  const iconProps = {
+    "aria-hidden": true,
+    className: iconClassName,
+    focusable: false,
+    strokeWidth: 2,
+  } as const
 
   if (name === "user") {
-    return (
-      <svg
-        aria-hidden="true"
-        className={iconClassName}
-        fill="none"
-        focusable="false"
-        viewBox="0 0 16 16"
-      >
-        <path
-          d="M8 8C5.79 8 4 6.21 4 4S5.79 0 8 0s4 1.79 4 4s-1.79 4-4 4Zm0 1.5c3.31 0 6 1.79 6 4v1H2v-1c0-2.21 2.69-4 6-4Zm0-3A2.5 2.5 0 1 0 8 1a2.5 2.5 0 0 0 0 5.5Zm-4.36 7h8.72C11.8 12.08 10.05 11 8 11s-3.8 1.08-4.36 2.5Z"
-          fill="currentColor"
-        />
-      </svg>
-    )
+    return <UserIcon {...iconProps} />
   }
 
-  if (name === "info" || name === "error") {
-    return (
-      <svg
-        aria-hidden="true"
-        className={iconClassName}
-        fill="none"
-        focusable="false"
-        viewBox="0 0 16 16"
-      >
-        <path
-          d="M8 14.667A6.667 6.667 0 1 1 8 1.333a6.667 6.667 0 0 1 0 13.334ZM7.333 9.333v1.334h1.334V9.333H7.333Zm0-4v2.834h1.334V5.333H7.333Z"
-          fill="currentColor"
-        />
-      </svg>
-    )
+  if (name === "info") {
+    return <InfoIcon {...iconProps} />
+  }
+
+  if (name === "error") {
+    return <AlertCircleIcon {...iconProps} />
   }
 
   if (name === "chevron-down") {
-    return (
-      <svg
-        aria-hidden="true"
-        className={iconClassName}
-        fill="none"
-        focusable="false"
-        viewBox="0 0 16 16"
-      >
-        <path
-          d="M8 10.667 3.333 6l.934-.933L8 8.8l3.733-3.733.934.933L8 10.667Z"
-          fill="currentColor"
-        />
-      </svg>
-    )
+    return <ChevronDownIcon {...iconProps} />
   }
 
   if (name === "plus") {
-    return (
-      <svg
-        aria-hidden="true"
-        className={iconClassName}
-        fill="none"
-        focusable="false"
-        viewBox="0 0 20 20"
-      >
-        <path d="M9.167 9.167V4.5h1.666v4.667H15.5v1.666h-4.667V15.5H9.167v-4.667H4.5V9.167h4.667Z" fill="currentColor" />
-      </svg>
-    )
+    return <PlusIcon {...iconProps} />
   }
 
   if (name === "check-fill" || name === "check-line") {
-    return (
-      <svg
-        aria-hidden="true"
-        className={iconClassName}
-        fill="none"
-        focusable="false"
-        viewBox="0 0 20 20"
-      >
-        <path
-          d="m8.333 12.643 7.66-7.66 1.179 1.178-8.839 8.839-5.303-5.303 1.178-1.179 4.125 4.125Z"
-          fill="currentColor"
-        />
-      </svg>
-    )
+    return <CheckIcon {...iconProps} />
   }
 
   return null
@@ -306,7 +212,6 @@ export {
   SelectIcon,
   SelectItemAvatar,
   SelectItemCompanyLogo,
-  SelectItemFlag,
   SelectItemPaymentIcon,
   SelectItemStatusDot,
 }

package/registry/components/select.tsx

@@ -10,7 +10,6 @@ import {
   SelectIcon,
   SelectItemAvatar,
   SelectItemCompanyLogo,
-  SelectItemFlag,
   SelectItemPaymentIcon,
   SelectItemStatusDot,
   type SelectItemType,
@@ -29,10 +28,12 @@ const selectRoot = cva(
 const selectTrigger = cva(
   [
     "group/select-trigger relative flex w-full items-center gap-[var(--bh-select-trigger-gap)] rounded-[var(--bh-select-trigger-radius)]",
-    "px-[var(--bh-select-trigger-padding-x)] text-start outline-none",
+    "select-none px-[var(--bh-select-trigger-padding-x)] text-start outline-none",
     "transition-[background-color,box-shadow]",
     "[--bh-select-trigger-border-current:var(--bh-select-trigger-border)] [--shadow-select-trigger:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border)),var(--shadow-component-default)]",
-    "focus-visible:shadow-[var(--shadow-select-focus-ring)]",
+    "[--bh-select-focus-ring-color:color-mix(in_srgb,var(--bh-border-focus)_30%,transparent)] [--shadow-select-focus-border:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border))]",
+    "after:pointer-events-none after:absolute after:inset-[calc(var(--bh-focus-ring-width)*-1)] after:rounded-[calc(var(--bh-select-trigger-radius)+var(--bh-focus-ring-width))] after:border-[length:var(--bh-focus-ring-width)] after:border-solid after:border-transparent after:content-['']",
+    "focus-visible:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-visible:[box-shadow:var(--shadow-select-focus-border)] focus-visible:after:border-[var(--bh-select-focus-ring-color)]",
     "aria-invalid:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)]",
     "disabled:pointer-events-none disabled:bg-[var(--bh-select-trigger-bg-disabled)] disabled:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0",
@@ -53,7 +54,7 @@ const selectTrigger = cva(
         default: "",
         filled: "",
         error:
-          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--shadow-select-trigger)] focus-visible:shadow-[var(--shadow-select-danger-focus-ring)]",
+          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] [--bh-select-focus-ring-color:color-mix(in_srgb,var(--bh-border-focus-danger)_30%,transparent)] shadow-[var(--shadow-select-trigger)] focus-visible:[box-shadow:var(--shadow-select-focus-border)]",
         disabled:
           "pointer-events-none bg-[var(--bh-select-trigger-bg-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
       },
@@ -69,7 +70,7 @@ const selectTrigger = cva(
 const selectMenu = cva(
   [
     "w-[var(--radix-popper-anchor-width,var(--bh-select-menu-width))] max-w-[var(--radix-popper-available-width,100vw)] overflow-hidden rounded-[var(--bh-select-menu-radius)]",
-    "bg-[var(--bh-select-menu-bg)] py-[var(--bh-select-menu-padding-y)]",
+    "select-none bg-[var(--bh-select-menu-bg)] py-[var(--bh-select-menu-padding-y)]",
     "shadow-[var(--shadow-select-menu)]",
   ].join(" ")
 )
@@ -81,7 +82,7 @@ const selectMenuList = cva(
 const selectMenuItem = cva(
   [
     "group/select-menu-item relative flex min-h-[var(--bh-select-item-min-height)] w-full items-center bg-transparent",
-    "px-[var(--bh-select-item-padding-x)] text-start outline-none",
+    "select-none px-[var(--bh-select-item-padding-x)] text-start outline-none",
     "disabled:pointer-events-none data-[disabled=true]:pointer-events-none",
     "focus-visible:[&>[data-slot=select-menu-item-content]]:bg-[var(--bh-select-item-hover-bg)]",
   ],
@@ -821,7 +822,7 @@ function SelectCheckboxIndicator({
       <span
         data-slot="select-checkbox-control"
         className={cn(
-          "pointer-events-none absolute start-1/2 top-1/2 size-[var(--bh-select-checkbox-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-select-checkbox-radius)] shadow-[var(--shadow-select-checkbox)] [--bh-select-checkbox-border:var(--bh-border-input)] [--shadow-select-checkbox:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-checkbox-border,var(--bh-border-input)),var(--shadow-component-default)]",
+          "pointer-events-none absolute left-1/2 top-1/2 size-[var(--bh-select-checkbox-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-select-checkbox-radius)] shadow-[var(--shadow-select-checkbox)] [--bh-select-checkbox-border:var(--bh-border-input)] [--shadow-select-checkbox:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-checkbox-border,var(--bh-border-input)),var(--shadow-component-default)]",
           checked
             ? "bg-[var(--bh-interactive-checkbox-default)] [--bh-select-checkbox-border:transparent]"
             : "bg-[var(--bh-bg-default)]",
@@ -830,7 +831,7 @@ function SelectCheckboxIndicator({
         )}
       />
       {checked ? (
-        <span className="absolute start-1/2 top-1/2 flex size-[var(--bh-select-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--bh-content-on-color)]">
+        <span className="absolute left-1/2 top-1/2 flex size-[var(--bh-select-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--bh-content-on-color)]">
           <SelectIcon name="check-fill" />
         </span>
       ) : null}
@@ -844,7 +845,6 @@ export {
   SelectHelperText,
   SelectItemAvatar,
   SelectItemCompanyLogo,
-  SelectItemFlag,
   SelectItemPaymentIcon,
   SelectItemStatusDot,
   SelectLabel,

package/registry/components/social-button.tsx

@@ -1,6 +1,15 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import {
+  AppleIcon,
+  ChromeIcon,
+  FacebookIcon,
+  LinkedinIcon,
+  MessageCircleIcon,
+  TwitterIcon,
+  type LucideIcon,
+} from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -34,7 +43,7 @@ type SocialPlatformConfig = {
 const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   apple: {
     label: "Sign in with Apple",
-    labelAr: "تسجيل الدخول باستخدام آبل",
+    labelAr: "تسجيل الدخول بأبل",
     solidBg: "var(--bh-social-apple-bg)",
     solidHover: "var(--bh-social-apple-hover)",
     solidBorder: "var(--bh-social-apple-border)",
@@ -46,7 +55,7 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   facebook: {
     label: "Sign in with Facebook",
-    labelAr: "تسجيل الدخول باستخدام فيسبوك",
+    labelAr: "تسجيل الدخول بفيسبوك",
     solidBg: "var(--bh-social-facebook-bg)",
     solidHover: "var(--bh-social-facebook-hover)",
     solidBorder: "transparent",
@@ -57,7 +66,7 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   google: {
     label: "Sign in with Google",
-    labelAr: "تسجيل الدخول باستخدام جوجل",
+    labelAr: "تسجيل الدخول بجوجل",
     solidBg: "var(--bh-social-google-bg)",
     solidHover: "var(--bh-social-google-hover)",
     solidBorder: "var(--bh-social-google-border)",
@@ -159,7 +168,7 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
   const cssVars = getSocialButtonVars(config, selectedVariant, isIcon)
   const content = (
     <>
-      <SocialButtonIcon platform={platform} variant={selectedVariant} />
+      <SocialButtonIcon platform={platform} />
       {!isIcon && (
         <span
           data-slot="social-button-label"
@@ -250,105 +259,30 @@ function getSocialButtonVars(
 
 function SocialButtonIcon({
   platform,
-  variant,
 }: {
   platform: SocialPlatform
-  variant: SocialButtonVariant
 }) {
-  const color =
-    platform === "google" ? undefined : "var(--bh-social-button-icon)"
+  const Icon = socialButtonIcons[platform]
 
   return (
-    <svg
+    <Icon
       aria-hidden="true"
       className="size-[var(--bh-social-button-icon-size)]"
       data-slot="social-button-icon"
-      fill="none"
       focusable="false"
-      viewBox="0 0 18 18"
-    >
-      {platform === "apple" && <AppleIcon color={color} />}
-      {platform === "facebook" && <FacebookIcon color={color} />}
-      {platform === "google" && <GoogleIcon />}
-      {platform === "linkedin" && <LinkedInIcon color={color} />}
-      {platform === "twitter" && <TwitterIcon color={color} />}
-      {platform === "whatsapp" && <WhatsAppIcon color={color} />}
-    </svg>
-  )
-}
-
-function AppleIcon({ color }: { color?: string }) {
-  return (
-    <path
-      d="M13.54 9.55c-.02-1.86 1.52-2.75 1.59-2.79-.87-1.27-2.22-1.44-2.7-1.46-1.15-.12-2.24.68-2.82.68-.59 0-1.49-.66-2.45-.64-1.26.02-2.42.73-3.07 1.86-1.31 2.27-.34 5.63.94 7.47.62.9 1.37 1.91 2.35 1.87.94-.04 1.3-.61 2.44-.61 1.13 0 1.46.61 2.45.59 1.01-.02 1.66-.92 2.28-1.82.72-1.05 1.02-2.07 1.03-2.12-.02-.01-1.99-.76-2.03-3.03ZM11.68 4.1c.52-.63.87-1.5.77-2.37-.74.03-1.64.49-2.17 1.12-.48.55-.9 1.44-.79 2.29.83.06 1.67-.42 2.19-1.04Z"
-      fill={color}
-    />
-  )
-}
-
-function FacebookIcon({ color }: { color?: string }) {
-  return (
-    <path
-      d="M18 9A9 9 0 1 0 7.59 17.9v-6.3H5.3V9h2.29V6.98c0-2.27 1.35-3.52 3.42-3.52.99 0 2.02.18 2.02.18v2.22h-1.14c-1.12 0-1.47.7-1.47 1.41V9h2.51l-.4 2.6h-2.11v6.3A9 9 0 0 0 18 9Z"
-      fill={color}
-    />
-  )
-}
-
-function GoogleIcon() {
-  return (
-    <>
-      <path
-        d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z"
-        fill="var(--bh-social-google-blue)"
-      />
-      <path
-        d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.35 0-4.34-1.59-5.05-3.72H.93v2.33A9 9 0 0 0 9 18Z"
-        fill="var(--bh-social-google-green)"
-      />
-      <path
-        d="M3.95 10.7A5.41 5.41 0 0 1 3.66 9c0-.59.1-1.16.29-1.7V4.97H.93A9 9 0 0 0 0 9c0 1.45.34 2.82.93 4.03l3.02-2.33Z"
-        fill="var(--bh-social-google-yellow)"
-      />
-      <path
-        d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.47.9 11.43 0 9 0A9 9 0 0 0 .93 4.97L3.95 7.3C4.66 5.17 6.65 3.58 9 3.58Z"
-        fill="var(--bh-social-google-red)"
-      />
-    </>
-  )
-}
-
-function LinkedInIcon({ color }: { color?: string }) {
-  return (
-    <>
-      <path
-        d="M3.23 7.2h2.43V15H3.23V7.2Zm1.22-3.88a1.41 1.41 0 1 1 0 2.82 1.41 1.41 0 0 1 0-2.82Z"
-        fill={color}
-      />
-      <path
-        d="M7.18 7.2h2.33v1.07h.03c.32-.61 1.12-1.26 2.3-1.26 2.47 0 2.93 1.63 2.93 3.74V15h-2.43v-3.77c0-.9-.02-2.06-1.26-2.06-1.26 0-1.45.98-1.45 1.99V15H7.18V7.2Z"
-        fill={color}
-      />
-    </>
-  )
-}
-
-function TwitterIcon({ color }: { color?: string }) {
-  return (
-    <path
-      d="M10.65 7.72 16.16 1.5h-1.31l-4.78 5.4-3.82-5.4H1.83l5.78 8.17-5.78 6.83h1.31l5.05-5.97 4.04 5.97h4.42l-6-8.78Zm-1.79 2.08-.58-.82-4.66-6.4h1.72l3.76 5.17.58.82 4.89 6.72h-1.72L8.86 9.8Z"
-      fill={color}
+      strokeWidth={platform === "apple" ? 2 : 2.25}
+      style={{ color: "var(--bh-social-button-icon)" }}
     />
   )
 }
 
-function WhatsAppIcon({ color }: { color?: string }) {
-  return (
-    <path
-      d="M9.03 1.5A7.42 7.42 0 0 0 2.6 12.62L1.5 16.5l3.98-1.05A7.43 7.43 0 1 0 9.03 1.5Zm0 13.56c-1.22 0-2.35-.36-3.3-.98l-.24-.15-2.36.62.63-2.3-.16-.24a6.1 6.1 0 1 1 5.43 3.05Zm3.34-4.57c-.18-.09-1.08-.53-1.25-.59-.17-.06-.29-.09-.42.09-.12.18-.48.59-.59.71-.11.12-.22.13-.4.04-.18-.09-.77-.28-1.47-.9-.54-.48-.91-1.08-1.02-1.26-.11-.18-.01-.28.08-.37.08-.08.18-.22.27-.33.09-.11.12-.18.18-.3.06-.12.03-.23-.01-.33-.05-.09-.42-1-.57-1.37-.15-.36-.3-.31-.42-.32h-.36c-.12 0-.33.05-.5.23-.17.18-.65.64-.65 1.56 0 .92.67 1.81.76 1.94.09.12 1.32 2.02 3.2 2.83.45.19.8.31 1.07.4.45.14.86.12 1.18.07.36-.05 1.08-.44 1.23-.86.15-.42.15-.79.11-.86-.05-.08-.17-.13-.35-.22Z"
-      fill={color}
-    />
-  )
+const socialButtonIcons: Record<SocialPlatform, LucideIcon> = {
+  apple: AppleIcon,
+  facebook: FacebookIcon,
+  google: ChromeIcon,
+  linkedin: LinkedinIcon,
+  twitter: TwitterIcon,
+  whatsapp: MessageCircleIcon,
 }
 
 export { SocialButton, socialButtonVariants, socialPlatformConfig }

package/registry/components/spinner.tsx

@@ -8,7 +8,7 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
       aria-hidden="true"
       data-slot="spinner"
       viewBox="0 0 24 24"
-      className={cn("size-[var(--bh-spinner-size)] animate-spin text-current", className)}
+      className={cn("size-[var(--bh-spinner-size)] shrink-0 text-current", className)}
       {...props}
     >
       <circle
@@ -20,10 +20,26 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
         strokeWidth="4"
         opacity="var(--bh-opacity-25)"
       />
-      <path
-        fill="currentColor"
-        d="M22 12a10 10 0 0 1-10 10v-4a6 6 0 0 0 6-6z"
-      />
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeLinecap="round"
+        pathLength="100"
+        strokeDasharray="30 70"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="1s"
+          from="0 12 12"
+          repeatCount="indefinite"
+          to="360 12 12"
+          type="rotate"
+        />
+      </circle>
     </svg>
   )
 }

package/registry/components/textarea.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { cva } from "class-variance-authority"
+import { CircleAlertIcon, InfoIcon, XIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -533,53 +534,37 @@ function TextareaIcon({
         className
       )}
       >
-      <svg
-        className="size-[var(--bh-textarea-helper-icon-size)]"
-        fill="none"
-        focusable="false"
-        viewBox="0 0 13.3333 13.3333"
-      >
-        {type === "error" ? <ErrorIconPath /> : <InfoIconPath />}
-      </svg>
+      {type === "error" ? (
+        <CircleAlertIcon
+          aria-hidden="true"
+          className="size-[var(--bh-textarea-helper-icon-size)]"
+          focusable="false"
+          strokeWidth={2.25}
+        />
+      ) : (
+        <InfoIcon
+          aria-hidden="true"
+          className="size-[var(--bh-textarea-helper-icon-size)]"
+          focusable="false"
+          strokeWidth={2.25}
+        />
+      )}
     </span>
   )
 }
 
-function ErrorIconPath() {
-  return (
-    <path
-      d="M6.66667 13.3333C2.98477 13.3333 0 10.3485 0 6.66667C0 2.98477 2.98477 0 6.66667 0C10.3485 0 13.3333 2.98477 13.3333 6.66667C13.3333 10.3485 10.3485 13.3333 6.66667 13.3333ZM6 8.66667V10H7.33333V8.66667H6ZM6 3.33333V7.33333H7.33333V3.33333H6Z"
-      fill="currentColor"
-    />
-  )
-}
-
-function InfoIconPath() {
-  return (
-    <path
-      d="M6.66667 13.3333C2.98477 13.3333 0 10.3485 0 6.66667C0 2.98477 2.98477 0 6.66667 0C10.3485 0 13.3333 2.98477 13.3333 6.66667C13.3333 10.3485 10.3485 13.3333 6.66667 13.3333ZM6.66667 5C7.21893 5 7.66667 4.55229 7.66667 4C7.66667 3.44771 7.21893 3 6.66667 3C6.1144 3 5.66667 3.44771 5.66667 4C5.66667 4.55229 6.1144 5 6.66667 5ZM8 8.66667H7.33333V5.66667H5.33333V7H6V8.66667H5.33333V10H8V8.66667Z"
-      fill="currentColor"
-    />
-  )
-}
-
 function CloseIcon() {
   return (
     <span
       aria-hidden="true"
       className="flex size-[var(--bh-textarea-close-button-size)] items-center justify-center"
     >
-      <svg
+      <XIcon
+        aria-hidden="true"
         className="size-[var(--bh-textarea-close-icon-size)]"
-        fill="none"
         focusable="false"
-        viewBox="0 0 6.36398 6.36394"
-      >
-        <path
-          d="M3.18198 2.47489L5.65688 0L6.36398 0.707105L3.88908 3.18199L6.36398 5.65684L5.65688 6.36394L3.18198 3.88909L0.70711 6.36394L0 5.65684L2.47488 3.18199L0 0.707105L0.70711 0L3.18198 2.47489Z"
-          fill="currentColor"
-        />
-      </svg>
+        strokeWidth={2.5}
+      />
     </span>
   )
 }

package/registry/components/toggle.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import * as SwitchPrimitive from "@radix-ui/react-switch"
 import { cva, type VariantProps } from "class-variance-authority"
+import { CheckIcon, XIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -226,40 +227,23 @@ const ToggleField = React.forwardRef<HTMLDivElement, ToggleFieldProps>(
 
 function ToggleCheckIcon({ className }: { className?: string }) {
   return (
-    <svg
+    <CheckIcon
       aria-hidden="true"
       className={className}
-      fill="none"
       focusable="false"
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M4 8.2 6.55 10.75 12 5.25"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.75"
-      />
-    </svg>
+      strokeWidth={2.5}
+    />
   )
 }
 
 function ToggleCloseIcon({ className }: { className?: string }) {
   return (
-    <svg
+    <XIcon
       aria-hidden="true"
       className={className}
-      fill="none"
       focusable="false"
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="m5 5 6 6m0-6-6 6"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeWidth="1.75"
-      />
-    </svg>
+      strokeWidth={2.5}
+    />
   )
 }
 

package/registry/components/tooltip.tsx

@@ -386,13 +386,13 @@ const pointerPlacement: Record<Exclude<TooltipPointerPosition, "none">, string>
 
 const pointerFillShape = {
   top:
-    "left-0 top-0 border-x-[length:var(--bh-tooltip-pointer-half-width)] border-b-[length:var(--bh-tooltip-pointer-depth)] border-x-[color:transparent] border-b-[color:var(--bh-tooltip-bg)]",
+    "left-0 top-[var(--bh-space-xxxs-1)] border-x-[length:var(--bh-tooltip-pointer-half-width)] border-b-[length:var(--bh-tooltip-pointer-depth)] border-x-[color:transparent] border-b-[color:var(--bh-tooltip-bg)]",
   bottom:
-    "bottom-0 left-0 border-x-[length:var(--bh-tooltip-pointer-half-width)] border-t-[length:var(--bh-tooltip-pointer-depth)] border-x-[color:transparent] border-t-[color:var(--bh-tooltip-bg)]",
+    "bottom-[var(--bh-space-xxxs-1)] left-0 border-x-[length:var(--bh-tooltip-pointer-half-width)] border-t-[length:var(--bh-tooltip-pointer-depth)] border-x-[color:transparent] border-t-[color:var(--bh-tooltip-bg)]",
   right:
-    "left-0 top-0 border-y-[length:var(--bh-tooltip-pointer-half-width)] border-l-[length:var(--bh-tooltip-pointer-depth)] border-y-[color:transparent] border-l-[color:var(--bh-tooltip-bg)]",
+    "left-[calc(var(--bh-space-xxxs-1)*-1)] top-0 border-y-[length:var(--bh-tooltip-pointer-half-width)] border-l-[length:var(--bh-tooltip-pointer-depth)] border-y-[color:transparent] border-l-[color:var(--bh-tooltip-bg)]",
   left:
-    "right-0 top-0 border-y-[length:var(--bh-tooltip-pointer-half-width)] border-r-[length:var(--bh-tooltip-pointer-depth)] border-y-[color:transparent] border-r-[color:var(--bh-tooltip-bg)]",
+    "right-[calc(var(--bh-space-xxxs-1)*-1)] top-0 border-y-[length:var(--bh-tooltip-pointer-half-width)] border-r-[length:var(--bh-tooltip-pointer-depth)] border-y-[color:transparent] border-r-[color:var(--bh-tooltip-bg)]",
 } as const
 
 const pointerBorderShape = {

package/registry/examples/attribute-demo.tsx

@@ -38,9 +38,9 @@ export function AttributeDemo() {
       <AttributeCard>
         <AttributeHeader
           title="Order details"
-          description="End-aligned values, copy actions, files, and status chips."
+          description="Rich values with copy actions, files, and status chips."
         />
-        <AttributeList layout="end" dividers>
+        <AttributeList dividers>
           <AttributeItem label="Subscription">
             <Badge color="green" type="dot">
               Active