banhaten 0.1.3 → 0.2.0

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,6 +106,15 @@ 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",
   {
@@ -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,12 +160,25 @@ 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)
@@ -192,8 +211,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,13 +235,6 @@ 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,
@@ -270,7 +282,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 +296,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 +312,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 +328,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 +344,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 +365,14 @@ const socialButtonIcons: Record<SocialPlatform, SocialButtonIconComponent> = {
   whatsapp: MessageCircleIcon,
 }
 
-export { SocialButton, socialButtonVariants, socialPlatformConfig }
+export {
+  arabicSocialButtonMessages,
+  SocialButton,
+  socialButtonVariants,
+  socialPlatformConfig,
+}
 export type {
+  SocialButtonMessages,
   SocialButtonProps,
   SocialButtonSize,
   SocialButtonVariant,

package/registry/components/spinner.tsx

@@ -40,7 +40,7 @@ function SpinnerBase({ className, motion, ...props }: SpinnerBaseProps) {
         r="10"
         fill="none"
         stroke="currentColor"
-        strokeWidth="4"
+        strokeWidth="var(--bh-spinner-stroke-width)"
         opacity="var(--bh-opacity-25)"
       />
       <circle
@@ -50,64 +50,27 @@ function SpinnerBase({ className, motion, ...props }: SpinnerBaseProps) {
         r="10"
         fill="none"
         stroke="currentColor"
-        strokeWidth="4"
+        strokeWidth="var(--bh-spinner-stroke-width)"
         strokeLinecap="round"
         pathLength="100"
         strokeDasharray="30 70"
-      >
-        {motion === "dynamic" ? (
-          <DynamicSpinnerMotion />
-        ) : (
-          <SteadySpinnerMotion />
-        )}
-      </circle>
-    </svg>
-  )
-}
-
-function DynamicSpinnerMotion() {
-  return (
-    <>
-      <animate
-        attributeName="stroke-dasharray"
-        calcMode="spline"
-        dur="6s"
-        keySplines="0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1"
-        keyTimes="0; 0.25; 0.5; 0.75; 1"
-        repeatCount="indefinite"
-        values="22 78; 38 62; 30 70; 42 58; 22 78"
-      />
-      <animate
-        attributeName="stroke-dashoffset"
-        calcMode="spline"
-        dur="6s"
-        keySplines="0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1"
-        keyTimes="0; 0.25; 0.5; 0.75; 1"
-        repeatCount="indefinite"
-        values="0; -16; -44; -72; -100"
+        style={{
+          animationDuration:
+            motion === "dynamic"
+              ? "var(--bh-spinner-duration-dynamic)"
+              : "var(--bh-spinner-duration-steady)",
+          animationIterationCount: "infinite",
+          animationName:
+            motion === "dynamic"
+              ? "bh-spinner-dynamic"
+              : "bh-spinner-steady",
+          animationTimingFunction:
+            motion === "dynamic" ? "var(--bh-spinner-easing)" : "linear",
+          transformBox: "fill-box",
+          transformOrigin: "center",
+        }}
       />
-      <animateTransform
-        attributeName="transform"
-        dur="6s"
-        from="0 12 12"
-        repeatCount="indefinite"
-        to="1080 12 12"
-        type="rotate"
-      />
-    </>
-  )
-}
-
-function SteadySpinnerMotion() {
-  return (
-    <animateTransform
-      attributeName="transform"
-      dur="1.5s"
-      from="0 12 12"
-      repeatCount="indefinite"
-      to="360 12 12"
-      type="rotate"
-    />
+    </svg>
   )
 }
 

package/registry/components/tabs.css

@@ -93,7 +93,7 @@
 .ds-tabs__tab:disabled,
 .ds-tabs__tab[data-disabled] {
   cursor: not-allowed;
-  opacity: var(--bh-opacity-disabled);
+  opacity: var(--bh-opacity-60);
 }
 
 .ds-tabs__tab:focus-visible {

package/registry/components/tabs.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 import "./tabs.css"
 
@@ -84,7 +85,7 @@ const TabsList = React.forwardRef<
         `ds-tabs--${variant}`,
         `ds-tabs--${size}`,
         fullWidth ? "ds-tabs--full" : "ds-tabs--hug",
-        isRtl ? "ds-tabs--rtl" : "ds-tabs--ltr",
+        isRtl ? "ds-tabs--rtl" : dir === "ltr" ? "ds-tabs--ltr" : undefined,
         className
       )}
       {...props}
@@ -133,7 +134,7 @@ function Tabs({
   className = "",
   defaultActiveIndex = 0,
   defaultValue,
-  dir = "ltr",
+  dir,
   fullWidth = false,
   items = [],
   onActiveIndexChange,
@@ -144,6 +145,8 @@ function Tabs({
   variant = "underline",
   ...props
 }: TabsProps) {
+  const rootRef = React.useRef<React.ElementRef<typeof TabsPrimitive.Root>>(null)
+  const resolvedDirection = useResolvedDirection(dir, rootRef)
   const normalizedItems = items.map(normalizeTabsItem)
   const activeValue =
     value ?? (activeIndex === undefined ? undefined : normalizedItems[activeIndex]?.value)
@@ -166,7 +169,8 @@ function Tabs({
     <TabsRoot
       data-slot="tabs-root"
       defaultValue={activeValue === undefined ? uncontrolledDefaultValue : undefined}
-      dir={dir}
+      dir={resolvedDirection}
+      ref={rootRef}
       value={activeValue}
       onValueChange={handleValueChange}
       className={rootClassName}
@@ -175,7 +179,7 @@ function Tabs({
       <TabsList
         aria-label={ariaLabel}
         className={className}
-        dir={dir}
+        dir={resolvedDirection}
         fullWidth={fullWidth}
         size={size}
         variant={variant}

package/registry/components/tag.tsx

@@ -372,7 +372,7 @@ function TagIcon({
       )}
       {...props}
     >
-      {children ?? <PlusIcon aria-hidden="true" strokeWidth={2.25} />}
+      {children ?? <PlusIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-225)" />}
     </span>
   )
 }
@@ -405,7 +405,7 @@ function TagCloseButton({
       <XIcon
         aria-hidden="true"
         className="size-[var(--bh-space-xl-12)]"
-        strokeWidth={2}
+        strokeWidth="var(--bh-icon-stroke-200)"
       />
     </button>
   )

package/registry/components/textarea.tsx

@@ -539,14 +539,14 @@ function TextareaIcon({
           aria-hidden="true"
           className="size-[var(--bh-textarea-helper-icon-size)]"
           focusable="false"
-          strokeWidth={2.25}
+          strokeWidth="var(--bh-icon-stroke-225)"
         />
       ) : (
         <InfoIcon
           aria-hidden="true"
           className="size-[var(--bh-textarea-helper-icon-size)]"
           focusable="false"
-          strokeWidth={2.25}
+          strokeWidth="var(--bh-icon-stroke-225)"
         />
       )}
     </span>
@@ -563,7 +563,7 @@ function CloseIcon() {
         aria-hidden="true"
         className="size-[var(--bh-textarea-close-icon-size)]"
         focusable="false"
-        strokeWidth={2.5}
+        strokeWidth="var(--bh-icon-stroke-250)"
       />
     </span>
   )

package/registry/components/toast.tsx

@@ -9,6 +9,7 @@ import {
 } from "sonner"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 type ToastIntent = "default" | "success" | "danger" | "warning" | "info"
 type ToastSide = "start" | "end"
@@ -54,7 +55,9 @@ function Toaster({
   toastOptions,
   ...props
 }: ToasterProps) {
-  const resolvedPosition = position ?? getToastPosition(dir, side)
+  const directionBoundaryRef = React.useRef<HTMLSpanElement | null>(null)
+  const resolvedDirection = useResolvedDirection(dir, directionBoundaryRef)
+  const resolvedPosition = position ?? getToastPosition(resolvedDirection, side)
   const mergedToastOptions: ToasterProps["toastOptions"] = {
     ...toastOptions,
     classNames: {
@@ -69,7 +72,7 @@ function Toaster({
         toastOptions?.classNames?.description
       ),
       actionButton: cn(
-        "rounded-[var(--bh-control-default)] bg-[var(--bh-interactive-primary-default)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-on-color)]",
+        "rounded-[var(--bh-control-default)] bg-[var(--bh-interactive-brand-default)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-on-brand)]",
         toastOptions?.classNames?.actionButton
       ),
       cancelButton: cn(
@@ -80,15 +83,17 @@ function Toaster({
   }
 
   return (
-    <SonnerToaster
-      className={cn("toaster group", className)}
-      closeButton={closeButton}
-      dir={dir}
-      position={resolvedPosition}
-      richColors={richColors}
-      toastOptions={mergedToastOptions}
-      {...props}
-    />
+    <span className="contents" data-slot="toaster-direction-boundary" ref={directionBoundaryRef}>
+      <SonnerToaster
+        className={cn("toaster group", className)}
+        closeButton={closeButton}
+        dir={resolvedDirection}
+        position={resolvedPosition}
+        richColors={richColors}
+        toastOptions={mergedToastOptions}
+        {...props}
+      />
+    </span>
   )
 }
 

package/registry/components/toggle.tsx

@@ -231,7 +231,7 @@ function ToggleCheckIcon({ className }: { className?: string }) {
       aria-hidden="true"
       className={className}
       focusable="false"
-      strokeWidth={2.5}
+      strokeWidth="var(--bh-icon-stroke-250)"
     />
   )
 }
@@ -242,7 +242,7 @@ function ToggleCloseIcon({ className }: { className?: string }) {
       aria-hidden="true"
       className={className}
       focusable="false"
-      strokeWidth={2.5}
+      strokeWidth="var(--bh-icon-stroke-250)"
     />
   )
 }