banhaten 0.1.0 → 0.1.2

package/registry/components/badge.tsx

@@ -71,7 +71,7 @@ const badgeVariants = cva(
     "transition-[background-color,border-color,color,box-shadow]",
     "focus-visible:border-[var(--bh-border-focus)] focus-visible:ring-[length:var(--bh-badge-focus-ring-width)] focus-visible:ring-[var(--ring)]",
     "aria-invalid:border-[var(--bh-border-focus-danger)] aria-invalid:ring-[var(--danger-ring)]",
-    "[&_svg]:pointer-events-none [&_svg]:size-[var(--bh-space-3xl-16)] [&_svg]:shrink-0",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
     "rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
   ],
   {
@@ -134,6 +134,11 @@ const badgeVariants = cva(
         true: "gap-[var(--bh-space-none)] px-[var(--bh-space-xs-4)] text-center",
         false: "",
       },
+      splitAction: {
+        true:
+          "overflow-hidden border-[var(--badge-split-border-color,currentColor)] pe-[var(--bh-space-none)]",
+        false: "[&_svg]:size-[var(--bh-space-3xl-16)]",
+      },
     },
     compoundVariants: [
       {
@@ -151,8 +156,15 @@ const badgeVariants = cva(
       {
         type: ["leading-icon", "trailing-icon", "dot"],
         showNumber: false,
+        splitAction: false,
         class: "px-[var(--bh-space-md-8)]",
       },
+      {
+        type: "trailing-icon",
+        showNumber: false,
+        splitAction: true,
+        class: "ps-[var(--bh-space-md-8)]",
+      },
       {
         type: "flag",
         showNumber: false,
@@ -174,181 +186,181 @@ const badgeVariants = cva(
         badgeStyle: "light",
         color: "neutral",
         class:
-          "bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-default)] [--badge-dot-color:var(--bh-content-muted)]",
+          "bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-default)] [--badge-dot-color:var(--bh-content-muted)] [--badge-split-border-color:var(--bh-border-default)]",
       },
       {
         badgeStyle: "outline",
         color: "neutral",
         class:
-          "border-[var(--bh-border-strong)] text-[var(--bh-content-subtle)] [--badge-dot-color:var(--bh-content-subtle)]",
+          "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)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         badgeStyle: "light",
         color: "blue",
         class:
-          "bg-[var(--bh-bg-accent-blue-subtle)] text-[var(--bh-content-accent-blue-strong)] [--badge-dot-color:var(--bh-content-accent-blue-default)]",
+          "bg-[var(--bh-bg-accent-blue-subtle)] text-[var(--bh-content-accent-blue-strong)] [--badge-dot-color:var(--bh-content-accent-blue-default)] [--badge-split-border-color:var(--bh-border-accent-blue-subtle)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         badgeStyle: "light",
         color: "green",
         class:
-          "bg-[var(--bh-bg-accent-green-subtle)] text-[var(--bh-content-accent-green-strong)] [--badge-dot-color:var(--bh-content-accent-green-default)]",
+          "bg-[var(--bh-bg-accent-green-subtle)] text-[var(--bh-content-accent-green-strong)] [--badge-dot-color:var(--bh-content-accent-green-default)] [--badge-split-border-color:var(--bh-border-accent-green-subtle)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         badgeStyle: "light",
         color: "amber",
         class:
-          "bg-[var(--bh-bg-accent-amber-subtle)] text-[var(--bh-content-accent-amber-strong)] [--badge-dot-color:var(--bh-content-accent-amber-default)]",
+          "bg-[var(--bh-bg-accent-amber-subtle)] text-[var(--bh-content-accent-amber-strong)] [--badge-dot-color:var(--bh-content-accent-amber-default)] [--badge-split-border-color:var(--bh-border-accent-amber-subtle)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         badgeStyle: "light",
         color: "danger",
         class:
-          "bg-[var(--bh-bg-accent-red-subtle)] text-[var(--bh-content-accent-red-strong)] [--badge-dot-color:var(--bh-content-accent-red-default)]",
+          "bg-[var(--bh-bg-accent-red-subtle)] text-[var(--bh-content-accent-red-strong)] [--badge-dot-color:var(--bh-content-accent-red-default)] [--badge-split-border-color:var(--bh-border-accent-red-subtle)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         badgeStyle: "solid",
         color: "danger",
         class:
-          "bg-[var(--bh-bg-accent-red-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)]",
+          "bg-[var(--bh-bg-accent-red-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-red-subtle)]",
       },
       {
         badgeStyle: "light",
         color: "purple",
         class:
-          "bg-[var(--bh-bg-accent-purple-subtle)] text-[var(--bh-content-accent-purple-strong)] [--badge-dot-color:var(--bh-content-accent-purple-default)]",
+          "bg-[var(--bh-bg-accent-purple-subtle)] text-[var(--bh-content-accent-purple-strong)] [--badge-dot-color:var(--bh-content-accent-purple-default)] [--badge-split-border-color:var(--bh-border-accent-purple-subtle)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         badgeStyle: "solid",
         color: "purple",
         class:
-          "bg-[var(--bh-bg-accent-purple-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)]",
+          "bg-[var(--bh-bg-accent-purple-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-purple-subtle)]",
       },
       {
         badgeStyle: "light",
         color: "fuchsia",
         class:
-          "bg-[var(--bh-bg-accent-fuchsia-subtle)] text-[var(--bh-content-accent-fuchsia-strong)] [--badge-dot-color:var(--bh-content-accent-fuchsia-default)]",
+          "bg-[var(--bh-bg-accent-fuchsia-subtle)] text-[var(--bh-content-accent-fuchsia-strong)] [--badge-dot-color:var(--bh-content-accent-fuchsia-default)] [--badge-split-border-color:var(--bh-border-accent-fuchsia-subtle)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         badgeStyle: "light",
         color: "rose",
         class:
-          "bg-[var(--bh-bg-accent-rose-subtle)] text-[var(--bh-content-accent-rose-strong)] [--badge-dot-color:var(--bh-content-accent-rose-default)]",
+          "bg-[var(--bh-bg-accent-rose-subtle)] text-[var(--bh-content-accent-rose-strong)] [--badge-dot-color:var(--bh-content-accent-rose-default)] [--badge-split-border-color:var(--bh-border-accent-rose-subtle)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         badgeStyle: "light",
         color: "sky",
         class:
-          "bg-[var(--bh-bg-accent-sky-subtle)] text-[var(--bh-content-accent-sky-strong)] [--badge-dot-color:var(--bh-content-accent-sky-default)]",
+          "bg-[var(--bh-bg-accent-sky-subtle)] text-[var(--bh-content-accent-sky-strong)] [--badge-dot-color:var(--bh-content-accent-sky-default)] [--badge-split-border-color:var(--bh-border-accent-sky-subtle)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         badgeStyle: "light",
         color: "golden",
         class:
-          "bg-[var(--bh-bg-accent-golden-subtle)] text-[var(--bh-content-accent-golden-strong)] [--badge-dot-color:var(--bh-content-accent-golden-default)]",
+          "bg-[var(--bh-bg-accent-golden-subtle)] text-[var(--bh-content-accent-golden-strong)] [--badge-dot-color:var(--bh-content-accent-golden-default)] [--badge-split-border-color:var(--bh-border-accent-golden-subtle)]",
       },
       {
         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)]",
+          "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)]",
       },
       {
         badgeStyle: "solid",
         color: "golden",
         class:
-          "bg-[var(--bh-bg-accent-golden-default)] text-[var(--bh-content-on-light)] [--badge-dot-color:var(--bh-content-on-light)]",
+          "bg-[var(--bh-bg-accent-golden-default)] text-[var(--bh-content-on-light)] [--badge-dot-color:var(--bh-content-on-light)] [--badge-split-border-color:var(--bh-border-accent-golden-subtle)]",
       },
     ],
     defaultVariants: {
@@ -357,6 +369,7 @@ const badgeVariants = cva(
       type: "default",
       size: "sm",
       showNumber: false,
+      splitAction: false,
     },
   }
 )
@@ -373,7 +386,9 @@ type BadgeContentProps = {
   children: React.ReactNode
   flag?: React.ReactNode
   number?: React.ReactNode
+  size: BadgeSize
   showNumber: boolean
+  splitAction: boolean
   type: BadgeType
 }
 
@@ -385,6 +400,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge({
   type,
   size,
   showNumber = false,
+  splitAction = false,
   number,
   flag,
   asChild = false,
@@ -398,11 +414,15 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge({
   const resolvedBadgeStyle = badgeStyle ?? legacyVariant?.badgeStyle ?? "light"
   const resolvedColor = color ?? legacyVariant?.color ?? "neutral"
   const resolvedType = isNumber ? "default" : type ?? "default"
-  const resolvedSize = size ?? "sm"
+  const resolvedSize = (size ?? "sm") as BadgeSize
+  const resolvedSplitAction =
+    !isNumber && resolvedType === "trailing-icon" && Boolean(splitAction)
   const contentProps = {
     flag,
     number,
+    size: resolvedSize,
     showNumber: isNumber,
+    splitAction: resolvedSplitAction,
     type: resolvedType,
   }
 
@@ -417,6 +437,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge({
       data-type={resolvedType}
       data-size={resolvedSize}
       data-show-number={isNumber ? "true" : "false"}
+      data-split-action={resolvedSplitAction ? "true" : "false"}
       dir={dir}
       ref={ref}
       className={cn(
@@ -426,6 +447,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge({
           type: resolvedType,
           size: resolvedSize,
           showNumber: isNumber,
+          splitAction: resolvedSplitAction,
         }),
         legacyVariant?.className,
         className
@@ -462,7 +484,9 @@ function BadgeContent({
   children,
   flag,
   number,
+  size,
   showNumber,
+  splitAction,
   type,
 }: BadgeContentProps) {
   const content = showNumber ? number ?? children : children
@@ -471,7 +495,7 @@ function BadgeContent({
     <>
       {!showNumber && type === "dot" ? <BadgeDot /> : null}
       {!showNumber && type === "flag" ? <BadgeFlag>{flag}</BadgeFlag> : null}
-      {renderBadgeChildren(content, type)}
+      {renderBadgeChildren(content, type, splitAction, size)}
     </>
   )
 }
@@ -479,12 +503,17 @@ function BadgeContent({
 function renderBadgeChildren(
   children: React.ReactNode,
   type: BadgeType,
+  splitAction: boolean,
+  size: BadgeSize,
   keyPrefix = "badge-label"
 ): React.ReactNode[] {
+  const hasSplitTrailingAction = splitAction && type === "trailing-icon"
   const labelClassName = cn(
     "min-w-0",
     (type === "leading-icon" || type === "trailing-icon") &&
-      "px-[var(--bh-space-xs-4)]"
+      "px-[var(--bh-space-xs-4)]",
+    hasSplitTrailingAction &&
+      "ps-[var(--bh-space-xs-4)] pe-[var(--bh-space-md-8)]"
   )
   const renderedChildren: React.ReactNode[] = []
 
@@ -516,6 +545,8 @@ function renderBadgeChildren(
         ...renderBadgeChildren(
           child.props.children,
           type,
+          false,
+          size,
           `${keyPrefix}-${index}`
         )
       )
@@ -526,7 +557,38 @@ function renderBadgeChildren(
     renderedChildren.push(child)
   })
 
-  return renderedChildren
+  if (!hasSplitTrailingAction || renderedChildren.length < 2) {
+    return renderedChildren
+  }
+
+  return [
+    ...renderedChildren.slice(0, -1),
+    <BadgeSplitAction key={`${keyPrefix}-split-action`} size={size}>
+      {renderedChildren.at(-1)}
+    </BadgeSplitAction>,
+  ]
+}
+
+function BadgeSplitAction({
+  children,
+  size,
+}: {
+  children: React.ReactNode
+  size: BadgeSize
+}) {
+  return (
+    <span
+      data-slot="badge-split-action"
+      className={cn(
+        "flex h-full shrink-0 items-center justify-center border-s border-[var(--badge-split-border-color,currentColor)] text-current",
+        size === "lg"
+          ? "w-[calc(var(--bh-space-5xl-24)+var(--bh-space-xs-4))] [&_svg]:size-[var(--bh-space-2xl-14)]"
+          : "w-[var(--bh-space-5xl-24)] [&_svg]:size-[var(--bh-space-xl-12)]"
+      )}
+    >
+      {children}
+    </span>
+  )
 }
 
 function BadgeDot() {

package/registry/components/button-group.tsx

@@ -18,7 +18,7 @@ const buttonGroupContext = React.createContext<ButtonGroupContextValue>({
 })
 
 const buttonGroupVariants = cva(
-  "inline-flex items-center overflow-hidden rounded-[var(--bh-button-group-radius)] bg-[var(--bh-button-group-bg)] text-[var(--bh-button-group-content)] shadow-[var(--shadow-button-group)] [--shadow-button-group:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-button-group-border),var(--shadow-component-default)]",
+  "inline-flex w-fit items-center overflow-hidden rounded-[var(--bh-button-group-radius)] bg-[var(--bh-button-group-bg)] text-[var(--bh-button-group-content)] shadow-[var(--shadow-button-group)] [--shadow-button-group:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-button-group-border),var(--shadow-component-default)]",
   {
     variants: {
       size: {

package/registry/components/card.tsx

@@ -393,7 +393,7 @@ function CardBody({
       </div>
 
       {showFooter ? (
-        <CardFooter>
+        <CardFooter className={horizontal ? "mt-auto" : undefined}>
           {footer ??
             actions ?? (
               <CardActions

package/registry/components/checkbox.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { cva, type VariantProps } from "class-variance-authority"
+import { CheckIcon, MinusIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -58,8 +59,18 @@ const Checkbox = React.forwardRef<
         data-slot="checkbox-indicator"
         className="pointer-events-none absolute top-1/2 left-1/2 flex size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--bh-content-on-color)] group-data-[disabled]/checkbox:text-[var(--bh-content-disabled)]"
       >
-        <CheckFillIcon className="size-[var(--bh-checkbox-icon-size)] fill-current group-data-[state=indeterminate]/checkbox:hidden" />
-        <span className="hidden h-[var(--bh-checkbox-indeterminate-height)] w-[var(--bh-checkbox-indeterminate-width)] rounded-full bg-current group-data-[state=indeterminate]/checkbox:block" />
+        <CheckIcon
+          aria-hidden="true"
+          className="size-[var(--bh-checkbox-icon-size)] group-data-[state=indeterminate]/checkbox:hidden"
+          focusable="false"
+          strokeWidth={3}
+        />
+        <MinusIcon
+          aria-hidden="true"
+          className="hidden size-[var(--bh-checkbox-icon-size)] group-data-[state=indeterminate]/checkbox:block"
+          focusable="false"
+          strokeWidth={3}
+        />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )
@@ -216,25 +227,17 @@ function CheckboxCardIndicator({
         className="pointer-events-none absolute top-1/2 left-1/2 size-[var(--bh-checkbox-control-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-checkbox-control-radius)] bg-[var(--bh-bg-default)] shadow-[var(--shadow-checkbox-control)] [--bh-checkbox-control-border:var(--bh-border-input)] [--shadow-checkbox-control:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-checkbox-control-border,var(--bh-border-input)),var(--shadow-component-default)] data-[state=checked]:[--bh-checkbox-control-border:transparent] data-[state=checked]:bg-[var(--bh-interactive-checkbox-default)] data-[disabled=true]:bg-[var(--bh-bg-disabled)] data-[disabled=true]:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]"
       />
       {checked ? (
-        <CheckFillIcon className="absolute top-1/2 left-1/2 size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 fill-current text-[var(--bh-content-on-color)]" />
+        <CheckIcon
+          aria-hidden="true"
+          className="absolute top-1/2 left-1/2 size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 text-[var(--bh-content-on-color)]"
+          focusable="false"
+          strokeWidth={3}
+        />
       ) : null}
     </span>
   )
 }
 
-function CheckFillIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={className}
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z" />
-    </svg>
-  )
-}
-
 export { Checkbox, CheckboxCard, checkboxCardVariants, checkboxVariants }
 export type {
   CheckboxCardControlPosition,