banhaten 0.1.3 → 0.3.0

package/registry/components/select.tsx

@@ -16,7 +16,8 @@ import {
   type SelectStatusTone,
 } from "./select-content"
 
-type SelectSize = "lg" | "md"
+type ControlDensity = "compact" | "default" | "comfortable"
+type SelectSize = "lg" | "md" | "comfortable"
 type SelectVisualState = "default" | "filled" | "error" | "disabled"
 type SelectVariant = "default" | "soft"
 type SelectSelectionType = "default" | "checkbox"
@@ -39,6 +40,7 @@ const selectTrigger = cva(
   {
     variants: {
       size: {
+        comfortable: "py-[var(--bh-select-trigger-padding-y-comfortable)]",
         lg: "py-[var(--bh-select-trigger-padding-y-lg)]",
         md: "py-[var(--bh-select-trigger-padding-y-md)]",
       },
@@ -120,6 +122,7 @@ const SelectRadixItemContext = React.createContext(false)
 type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
   children?: React.ReactNode
   defaultSelectValue?: string
+  density?: ControlDensity
   dir?: "ltr" | "rtl" | "auto"
   errorMessage?: React.ReactNode
   expandIcon?: React.ReactNode | false
@@ -133,7 +136,7 @@ type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
   isOptional?: boolean
   isRequired?: boolean
   label?: React.ReactNode
-  leadingIcon?: React.ReactNode
+  leadingIcon?: React.ReactNode | false
   onOpenChange?: (open: boolean) => void
   onTriggerClick?: React.MouseEventHandler<HTMLButtonElement>
   onValueChange?: (value: string) => void
@@ -158,7 +161,7 @@ type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
     | "value"
     | "variant"
   >
-  trailingIcon?: React.ReactNode
+  trailingIcon?: React.ReactNode | false
   value?: React.ReactNode
   variant?: SelectVariant
 }
@@ -167,6 +170,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   children,
   className,
   defaultSelectValue,
+  density,
   dir,
   errorMessage,
   expandIcon,
@@ -174,8 +178,8 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   hasHelperText,
   hasInformationIcon = false,
   hasLabel,
-  hasLeadingIcon = true,
-  hasTrailingIcon = true,
+  hasLeadingIcon,
+  hasTrailingIcon,
   helperText,
   isOptional = false,
   isRequired = false,
@@ -188,7 +192,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   optionalText,
   placeholder,
   selectValue,
-  size = "lg",
+  size,
   state = "default",
   triggerClassName,
   triggerId,
@@ -199,6 +203,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   ...props
 }, ref) {
   const generatedId = React.useId()
+  const resolvedSize = resolveSelectSize(density, size)
   const resolvedDir = dir
   const triggerVisualState = triggerProps?.disabled ? "disabled" : state
   const isError = triggerVisualState === "error"
@@ -210,9 +215,18 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   const shouldRenderLabel = hasLabel ?? hasRenderableContent(selectedLabel)
   const shouldRenderHelperText =
     hasHelperText ?? hasRenderableContent(selectedHelper)
+  const shouldShowLeadingIcon =
+    leadingIcon !== false &&
+    (hasLeadingIcon ?? hasRenderableContent(leadingIcon))
+  const shouldShowTrailingIcon =
+    trailingIcon !== false &&
+    (hasTrailingIcon ?? hasRenderableContent(trailingIcon))
   const shouldRenderMenu = React.Children.count(children) > 0
   const selectId = triggerId || generatedId
   const helperId = `${selectId}-helper`
+  const triggerAccessibleLabel = shouldRenderLabel
+    ? undefined
+    : getAccessibleText(selectedValue) ?? getAccessibleText(selectedPlaceholder)
   const rootOpenProps =
     open === undefined ? { onOpenChange } : { open, onOpenChange }
 
@@ -226,6 +240,8 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
       {...rootOpenProps}
     >
       <SelectRoot
+        data-density={density}
+        data-size={resolvedSize}
         data-state={triggerVisualState}
         data-variant={variant}
         dir={resolvedDir}
@@ -248,18 +264,26 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
         <div data-slot="select-control" className="relative w-full">
           <SelectPrimitive.Trigger asChild>
             <SelectTrigger
+              aria-label={triggerAccessibleLabel}
               aria-describedby={shouldRenderHelperText ? helperId : undefined}
-              aria-expanded={open || undefined}
               aria-haspopup="listbox"
               aria-invalid={isError || undefined}
               expandIcon={expandIcon}
               id={selectId}
-              leadingIcon={hasLeadingIcon ? leadingIcon : false}
+              leadingIcon={
+                shouldShowLeadingIcon
+                  ? (leadingIcon ?? <SelectIcon name="user" />)
+                  : false
+              }
               onClick={onTriggerClick}
               placeholder={selectedPlaceholder}
-              size={size}
+              size={resolvedSize}
               state={triggerVisualState}
-              trailingIcon={hasTrailingIcon ? trailingIcon : false}
+              trailingIcon={
+                shouldShowTrailingIcon
+                  ? (trailingIcon ?? <SelectIcon name="info" />)
+                  : false
+              }
               value={selectedValue}
               variant={variant}
               className={triggerClassName}
@@ -415,6 +439,12 @@ function hasRenderableContent(content: React.ReactNode) {
   )
 }
 
+function getAccessibleText(content: React.ReactNode) {
+  return typeof content === "string" || typeof content === "number"
+    ? String(content)
+    : undefined
+}
+
 type SelectHelperTextProps = React.ComponentProps<"p"> & {
   hasIcon?: boolean
   type?: "default" | "error"
@@ -464,6 +494,7 @@ type SelectTriggerProps = Omit<
   "children" | "value"
 > &
   VariantProps<typeof selectTrigger> & {
+    density?: ControlDensity
     expandIcon?: React.ReactNode | false
     leadingIcon?: React.ReactNode | false
     placeholder?: React.ReactNode
@@ -475,11 +506,12 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
   (
     {
       className,
+      density,
       disabled,
       expandIcon,
       leadingIcon,
       placeholder,
-      size = "lg",
+      size,
       state,
       trailingIcon,
       type = "button",
@@ -489,13 +521,15 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
     },
     ref
   ) => {
+    const resolvedSize = resolveSelectSize(density, size)
     const hasValue = value !== undefined && value !== null && value !== ""
     const visualState = disabled ? "disabled" : state ?? (hasValue ? "filled" : "default")
     const isDisabled = visualState === "disabled"
 
     return (
       <button
-        data-size={size}
+        data-density={density}
+        data-size={resolvedSize}
         data-slot="select-trigger"
         data-state={visualState}
         data-variant={variant}
@@ -503,7 +537,7 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
         ref={ref}
         type={type}
         className={cn(
-          selectTrigger({ size, state: visualState, variant }),
+          selectTrigger({ size: resolvedSize, state: visualState, variant }),
           className
         )}
         {...props}
@@ -512,12 +546,12 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
           data-slot="select-trigger-main"
           className="flex min-w-0 flex-1 items-center gap-[var(--bh-select-content-gap)]"
         >
-          {leadingIcon !== false ? (
+          {hasRenderableContent(leadingIcon) ? (
             <span
               data-slot="select-leading-icon"
               className="flex size-[var(--bh-select-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-select-trigger-icon-color)] group-data-[state=disabled]/select-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-size)]"
             >
-              {leadingIcon ?? <SelectIcon name="user" />}
+              {leadingIcon}
             </span>
           ) : null}
 
@@ -541,12 +575,12 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
           </span>
         </span>
 
-        {trailingIcon !== false ? (
+        {hasRenderableContent(trailingIcon) ? (
           <span
             data-slot="select-trailing-icon"
             className="flex size-[var(--bh-select-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-select-trigger-icon-color)] group-data-[state=disabled]/select-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-size)]"
           >
-            {trailingIcon ?? <SelectIcon name="info" />}
+            {trailingIcon}
           </span>
         ) : null}
 
@@ -567,7 +601,14 @@ SelectTrigger.displayName = "SelectTrigger"
 type SelectMenuProps = React.ComponentProps<"div">
 
 const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuProps>(function SelectMenu(
-  { children, className, onKeyDown, role, ...props },
+  {
+    "aria-label": ariaLabel = "Options",
+    children,
+    className,
+    onKeyDown,
+    role,
+    ...props
+  },
   ref
 ) {
   const handleKeyDown = React.useCallback(
@@ -613,6 +654,7 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuProps>(function Se
 
   return (
     <div
+      aria-label={ariaLabel}
       data-slot="select-menu"
       onKeyDown={handleKeyDown}
       ref={ref}
@@ -620,7 +662,11 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuProps>(function Se
       className={cn(selectMenu(), className)}
       {...props}
     >
-      <div data-slot="select-menu-list" className={selectMenuList()}>
+      <div
+        data-slot="select-menu-list"
+        role="presentation"
+        className={selectMenuList()}
+      >
         {children}
       </div>
     </div>
@@ -664,6 +710,8 @@ type SelectMenuItemProps = SelectMenuItemBaseProps &
 
 const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(function SelectMenuItem({
   addonText,
+  "aria-checked": ariaChecked,
+  "aria-selected": ariaSelected,
   children,
   className,
   disabled,
@@ -681,8 +729,12 @@ const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(
   const generatedValue = React.useId()
   const isDisabled = disabled
   const selectedWithEndCheck = selected && selectionType === "default"
-  const resolvedRole =
-    role || (selectionType === "checkbox" ? "menuitemcheckbox" : "option")
+  const resolvedRole = role || "option"
+  const usesCheckedState =
+    resolvedRole === "checkbox" ||
+    resolvedRole === "menuitemcheckbox" ||
+    resolvedRole === "radio" ||
+    resolvedRole === "menuitemradio"
   const selectedMedia =
     media === false ? null : media ?? getDefaultSelectItemMedia(itemType)
   const content = label ?? children
@@ -698,13 +750,9 @@ const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(
 
   const item = (
     <button
-      aria-checked={
-        selectionType === "checkbox" ? Boolean(selected) : undefined
-      }
+      aria-checked={usesCheckedState ? (ariaChecked ?? Boolean(selected)) : undefined}
       aria-disabled={isDisabled || undefined}
-      aria-selected={
-        selectionType === "default" ? Boolean(selected) : undefined
-      }
+      aria-selected={resolvedRole === "option" ? (ariaSelected ?? Boolean(selected)) : undefined}
       data-disabled={isDisabled ? "true" : undefined}
       data-item-type={itemType}
       data-selected={selected ? "true" : "false"}
@@ -799,6 +847,16 @@ function getFocusableSelectItems(root: HTMLElement) {
   ).filter((item) => !item.hasAttribute("disabled"))
 }
 
+function resolveSelectSize(
+  density: ControlDensity | undefined,
+  size: SelectSize | null | undefined
+): SelectSize {
+  if (density === "compact") return "md"
+  if (density === "default") return "lg"
+  if (density === "comfortable") return "comfortable"
+  return size ?? "lg"
+}
+
 type SelectCheckboxIndicatorProps = {
   checked?: boolean
   className?: string
@@ -860,6 +918,7 @@ export {
   selectTrigger,
 }
 export type {
+  ControlDensity,
   SelectItemType,
   SelectMenuItemProps,
   SelectProps,

package/registry/components/sheet.tsx

@@ -264,7 +264,7 @@ const SheetCloseButton = React.forwardRef<
           <XIcon
             aria-hidden="true"
             className="size-[var(--bh-space-5xl-24)]"
-            strokeWidth={2}
+            strokeWidth="var(--bh-icon-stroke-200)"
           />
         )}
       </button>

package/registry/components/sidebar.tsx

@@ -34,7 +34,9 @@ type SidebarMenuButtonProps = React.ComponentProps<"button"> & {
 type SidebarToggleProps = React.ComponentProps<"button">
 type SidebarTriggerProps = SidebarToggleProps
 type SidebarRailProps = React.ComponentProps<"button">
-type SidebarInsetProps = React.ComponentProps<"main">
+type SidebarInsetProps = React.ComponentProps<"div"> & {
+  asChild?: boolean
+}
 
 const SidebarContext = React.createContext<SidebarContextValue | null>(null)
 
@@ -91,7 +93,9 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(function Sidebar(
   { className, side = "start", ...props },
   ref
 ) {
-  const { collapsed, dir } = useSidebarContext()
+  const context = React.useContext(SidebarContext)
+  const collapsed = context?.collapsed ?? false
+  const dir = context?.dir
 
   return (
     <aside
@@ -265,7 +269,7 @@ const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
           <PanelLeftIcon
             aria-hidden="true"
             className="size-[var(--bh-space-5xl-24)] rtl:-scale-x-100"
-            strokeWidth={2}
+            strokeWidth="var(--bh-icon-stroke-200)"
           />
         )}
       </button>
@@ -299,10 +303,12 @@ const SidebarRail = React.forwardRef<HTMLButtonElement, SidebarRailProps>(
   }
 )
 
-const SidebarInset = React.forwardRef<HTMLElement, SidebarInsetProps>(
-  function SidebarInset({ className, ...props }, ref) {
+const SidebarInset = React.forwardRef<HTMLDivElement, SidebarInsetProps>(
+  function SidebarInset({ asChild = false, className, ...props }, ref) {
+    const Comp = asChild ? Slot : "div"
+
     return (
-      <main
+      <Comp
         data-slot="sidebar-inset"
         ref={ref}
         className={cn("min-w-0 flex-1", className)}

package/registry/components/skeleton.css

@@ -1,10 +1,7 @@
 [data-slot="skeleton"] {
   --bh-skeleton-bg: var(--bh-bg-muted);
   --bh-skeleton-highlight: var(--bh-bg-raised-subtle);
-  --bh-skeleton-duration: 1.4s;
   --bh-skeleton-radius: var(--bh-radius-md-6);
-  --bh-skeleton-shimmer-width: 62%;
-  --bh-skeleton-width: 100%;
   --bh-skeleton-height: var(--bh-space-4xl-20);
 }
 

package/registry/components/social-button.tsx

@@ -7,6 +7,7 @@ import {
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 type SocialPlatform =
   | "apple"
@@ -18,15 +19,15 @@ type SocialPlatform =
 
 type SocialButtonVariant = "solid" | "outline"
 type SocialButtonSize = "default" | "icon"
+type SocialButtonMessages = Record<SocialPlatform, string>
 type SocialButtonIconComponent = React.ComponentType<
   React.SVGProps<SVGSVGElement> & {
-    strokeWidth?: number
+    strokeWidth?: number | string
   }
 >
 
 type SocialPlatformConfig = {
   label: string
-  labelAr: string
   solidBg: string
   solidHover: string
   solidBorder: string
@@ -43,7 +44,6 @@ type SocialPlatformConfig = {
 const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   apple: {
     label: "Sign in with Apple",
-    labelAr: "تسجيل الدخول بأبل",
     solidBg: "var(--bh-social-apple-bg)",
     solidHover: "var(--bh-social-apple-hover)",
     solidBorder: "var(--bh-social-apple-border)",
@@ -55,7 +55,6 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   facebook: {
     label: "Sign in with Facebook",
-    labelAr: "تسجيل الدخول بفيسبوك",
     solidBg: "var(--bh-social-facebook-bg)",
     solidHover: "var(--bh-social-facebook-hover)",
     solidBorder: "transparent",
@@ -66,7 +65,6 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   google: {
     label: "Sign in with Google",
-    labelAr: "تسجيل الدخول بجوجل",
     solidBg: "var(--bh-social-google-bg)",
     solidHover: "var(--bh-social-google-hover)",
     solidBorder: "var(--bh-social-google-border)",
@@ -77,7 +75,6 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   linkedin: {
     label: "Sign in with LinkedIn",
-    labelAr: "تسجيل الدخول باستخدام لينكد إن",
     solidBg: "var(--bh-social-linkedin-bg)",
     solidHover: "var(--bh-social-linkedin-hover)",
     solidBorder: "transparent",
@@ -88,7 +85,6 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   twitter: {
     label: "Sign in with Twitter",
-    labelAr: "تسجيل الدخول باستخدام تويتر",
     solidBg: "var(--bh-social-twitter-bg)",
     solidHover: "var(--bh-social-twitter-hover)",
     solidBorder: "var(--bh-social-twitter-border)",
@@ -100,7 +96,6 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   whatsapp: {
     label: "Sign in with WhatsApp",
-    labelAr: "تسجيل الدخول باستخدام واتساب",
     solidBg: "var(--bh-social-whatsapp-bg)",
     solidHover: "var(--bh-social-whatsapp-hover)",
     solidBorder: "transparent",
@@ -111,8 +106,17 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
 }
 
+const arabicSocialButtonMessages: SocialButtonMessages = {
+  apple: "تسجيل الدخول بأبل",
+  facebook: "تسجيل الدخول بفيسبوك",
+  google: "تسجيل الدخول بجوجل",
+  linkedin: "تسجيل الدخول باستخدام لينكد إن",
+  twitter: "تسجيل الدخول باستخدام تويتر",
+  whatsapp: "تسجيل الدخول باستخدام واتساب",
+}
+
 const socialButtonVariants = cva(
-  "group/social-button relative inline-flex items-center justify-center whitespace-nowrap rounded-[var(--bh-social-button-radius)] bg-[var(--bh-social-button-bg)] text-[var(--bh-social-button-fg)] shadow-[var(--shadow-social-button)] outline-none transition-[background-color,box-shadow,color] [--bh-social-button-current-border:var(--bh-social-button-border)] [--shadow-social-button:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-social-button-current-border,var(--bh-social-button-border,transparent)),var(--shadow-component-default)] rtl:[--bh-social-button-width:var(--bh-social-button-width-rtl)] hover:bg-[var(--bh-social-button-bg-hover)] focus-visible:[--bh-social-button-current-border:var(--bh-social-button-focus-border)] focus-visible:shadow-[var(--shadow-social-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "group/social-button relative inline-flex max-w-full min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-social-button-radius)] bg-[var(--bh-social-button-bg)] text-[var(--bh-social-button-fg)] shadow-[var(--shadow-social-button)] outline-none transition-[background-color,box-shadow,color] [--bh-social-button-current-border:var(--bh-social-button-border)] [--shadow-social-button:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-social-button-current-border,var(--bh-social-button-border,transparent)),var(--shadow-component-default)] hover:bg-[var(--bh-social-button-bg-hover)] focus-visible:[--bh-social-button-current-border:var(--bh-social-button-focus-border)] focus-visible:shadow-[var(--shadow-social-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -138,6 +142,7 @@ type SocialButtonProps = Omit<React.ComponentProps<"button">, "children"> &
     asChild?: boolean
     children?: React.ReactNode
     label?: string
+    messages?: Partial<SocialButtonMessages>
   }
 
 const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(function SocialButton({
@@ -146,6 +151,7 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
   variant = "solid",
   size = "default",
   label,
+  messages,
   asChild = false,
   children,
   dir,
@@ -154,18 +160,36 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
   "aria-label": ariaLabel,
   ...props
 }, ref) {
+  const rootRef = React.useRef<HTMLButtonElement | null>(null)
+  const resolvedDirection = useResolvedDirection(
+    dir === "ltr" || dir === "rtl" ? dir : undefined,
+    rootRef
+  )
+  const setRootRef = React.useCallback(
+    (node: HTMLButtonElement | null) => {
+      rootRef.current = node
+      if (typeof ref === "function") ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref]
+  )
   const config = socialPlatformConfig[platform]
   const selectedVariant = variant || "solid"
   const selectedSize = size || "default"
   const isIcon = selectedSize === "icon"
-  const defaultLabel = getDefaultLabel(config, dir)
-  const visibleLabel = label || (isSimpleLabel(children) ? children : defaultLabel)
+  const defaultLabel = messages?.[platform] ?? config.label
+  const visibleLabel = label ?? (isSimpleLabel(children) ? children : defaultLabel)
   const accessibleLabel =
     typeof visibleLabel === "string" || typeof visibleLabel === "number"
       ? String(visibleLabel)
       : defaultLabel
   const Comp = asChild ? Slot : "button"
-  const cssVars = getSocialButtonVars(config, selectedVariant, isIcon)
+  const cssVars = getSocialButtonVars(
+    config,
+    selectedVariant,
+    isIcon,
+    resolvedDirection
+  )
   const content = (
     <>
       <SocialButtonIcon platform={platform} />
@@ -173,7 +197,8 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
         <span
           data-slot="social-button-label"
           dir="auto"
-          className="min-w-0 pe-[var(--bh-social-button-label-padding-inline-end)]"
+          title={typeof visibleLabel === "string" ? visibleLabel : undefined}
+          className="min-w-0 overflow-hidden text-ellipsis pe-[var(--bh-social-button-label-padding-inline-end)]"
         >
           {visibleLabel}
         </span>
@@ -192,8 +217,8 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
       data-size={selectedSize}
       data-slot="social-button"
       data-variant={selectedVariant}
-      dir={dir}
-      ref={ref}
+      dir={resolvedDirection}
+      ref={setRootRef}
       className={cn(
         socialButtonVariants({
           variant: selectedVariant,
@@ -216,17 +241,11 @@ function isSimpleLabel(
   return typeof value === "string" || typeof value === "number"
 }
 
-function getDefaultLabel(
-  config: SocialPlatformConfig,
-  dir: React.HTMLAttributes<HTMLElement>["dir"]
-) {
-  return dir === "rtl" ? config.labelAr : config.label
-}
-
 function getSocialButtonVars(
   config: SocialPlatformConfig,
   variant: SocialButtonVariant,
-  isIcon: boolean
+  isIcon: boolean,
+  direction: "ltr" | "rtl"
 ) {
   const isSolid = variant === "solid"
   const border = isSolid
@@ -250,7 +269,7 @@ function getSocialButtonVars(
     "--bh-social-button-icon": isSolid ? config.solidIcon : config.outlineIcon,
     "--bh-social-button-width": isIcon
       ? "var(--bh-social-button-height)"
-      : config.width.ltr,
+      : config.width[direction],
     "--bh-social-button-width-rtl": isIcon
       ? "var(--bh-social-button-height)"
       : config.width.rtl,
@@ -270,7 +289,11 @@ function SocialButtonIcon({
       className="size-[var(--bh-social-button-icon-size)]"
       data-slot="social-button-icon"
       focusable="false"
-      strokeWidth={platform === "apple" ? 2 : 2.25}
+      strokeWidth={
+        platform === "apple"
+          ? "var(--bh-icon-stroke-200)"
+          : "var(--bh-icon-stroke-225)"
+      }
       style={{ color: "var(--bh-social-button-icon)" }}
     />
   )
@@ -280,7 +303,7 @@ function FacebookBrandIcon({
   strokeWidth: _strokeWidth,
   ...props
 }: React.SVGProps<SVGSVGElement> & {
-  strokeWidth?: number
+  strokeWidth?: number | string
 }) {
   return (
     <svg viewBox="0 0 24 24" fill="none" {...props}>
@@ -296,7 +319,7 @@ function GoogleBrandIcon({
   strokeWidth: _strokeWidth,
   ...props
 }: React.SVGProps<SVGSVGElement> & {
-  strokeWidth?: number
+  strokeWidth?: number | string
 }) {
   return (
     <svg viewBox="0 0 24 24" fill="none" {...props}>
@@ -312,7 +335,7 @@ function LinkedinBrandIcon({
   strokeWidth: _strokeWidth,
   ...props
 }: React.SVGProps<SVGSVGElement> & {
-  strokeWidth?: number
+  strokeWidth?: number | string
 }) {
   return (
     <svg viewBox="0 0 24 24" fill="none" {...props}>
@@ -328,7 +351,7 @@ function TwitterBrandIcon({
   strokeWidth: _strokeWidth,
   ...props
 }: React.SVGProps<SVGSVGElement> & {
-  strokeWidth?: number
+  strokeWidth?: number | string
 }) {
   return (
     <svg viewBox="0 0 24 24" fill="none" {...props}>
@@ -349,8 +372,14 @@ const socialButtonIcons: Record<SocialPlatform, SocialButtonIconComponent> = {
   whatsapp: MessageCircleIcon,
 }
 
-export { SocialButton, socialButtonVariants, socialPlatformConfig }
+export {
+  arabicSocialButtonMessages,
+  SocialButton,
+  socialButtonVariants,
+  socialPlatformConfig,
+}
 export type {
+  SocialButtonMessages,
   SocialButtonProps,
   SocialButtonSize,
   SocialButtonVariant,