banhaten 0.1.0 → 0.1.2

package/registry/components/skeleton.tsx

@@ -0,0 +1,482 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+import "./skeleton.css"
+
+const skeletonVariants = cva(
+  "relative block min-w-0 shrink-0 overflow-hidden bg-[var(--bh-skeleton-bg)] h-[var(--bh-skeleton-height)] w-[var(--bh-skeleton-width)]",
+  {
+    variants: {
+      shape: {
+        block:
+          "rounded-[var(--bh-skeleton-radius)] [--bh-skeleton-radius:var(--bh-radius-md-6)]",
+        text:
+          "rounded-[var(--bh-radius-full)] [--bh-skeleton-height:var(--bh-text-body-md-regular-line-height)]",
+        circle:
+          "aspect-square rounded-[var(--bh-radius-full)] [--bh-skeleton-height:var(--bh-skeleton-width)]",
+      },
+      size: {
+        xs: "[--bh-skeleton-height:var(--bh-space-md-8)]",
+        sm: "[--bh-skeleton-height:var(--bh-space-xl-12)]",
+        md: "[--bh-skeleton-height:var(--bh-space-3xl-16)]",
+        lg: "[--bh-skeleton-height:var(--bh-space-5xl-24)]",
+        xl: "[--bh-skeleton-height:var(--bh-space-7xl-40)]",
+      },
+      tone: {
+        default:
+          "[--bh-skeleton-bg:var(--bh-bg-muted)] [--bh-skeleton-highlight:var(--bh-bg-raised-subtle)]",
+        subtle:
+          "[--bh-skeleton-bg:var(--bh-bg-subtle)] [--bh-skeleton-highlight:var(--bh-bg-default-hover)]",
+        surface:
+          "[--bh-skeleton-bg:var(--bh-bg-raised-subtle)] [--bh-skeleton-highlight:var(--bh-bg-default)]",
+        brand:
+          "[--bh-skeleton-bg:var(--bh-bg-brand-subtle)] [--bh-skeleton-highlight:var(--bh-bg-brand-soft)]",
+      },
+    },
+    defaultVariants: {
+      shape: "block",
+      size: "md",
+      tone: "default",
+    },
+  }
+)
+
+type SkeletonCssProperties = React.CSSProperties & {
+  "--bh-skeleton-height"?: React.CSSProperties["height"]
+  "--bh-skeleton-width"?: React.CSSProperties["width"]
+}
+
+type SkeletonProps = React.ComponentProps<"span"> &
+  VariantProps<typeof skeletonVariants> & {
+    animated?: boolean
+  }
+
+const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(function Skeleton(
+  {
+    animated = true,
+    "aria-hidden": ariaHidden = true,
+    className,
+    shape,
+    size,
+    tone,
+    ...props
+  },
+  ref
+) {
+  return (
+    <span
+      aria-hidden={ariaHidden}
+      data-animated={animated ? "true" : "false"}
+      data-slot="skeleton"
+      ref={ref}
+      className={cn(skeletonVariants({ shape, size, tone, className }))}
+      {...props}
+    />
+  )
+})
+
+type SkeletonTextProps = Omit<React.ComponentProps<"div">, "children"> & {
+  animated?: boolean
+  lineCount?: number
+  lineSize?: SkeletonProps["size"]
+  tone?: SkeletonProps["tone"]
+  widths?: Array<React.CSSProperties["width"]>
+}
+
+function SkeletonText({
+  animated,
+  className,
+  lineCount = 3,
+  lineSize = "md",
+  tone,
+  widths,
+  ...props
+}: SkeletonTextProps) {
+  const count = Math.max(1, lineCount)
+
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="skeleton-text"
+      className={cn("grid gap-[var(--bh-space-xs-4)]", className)}
+      {...props}
+    >
+      {Array.from({ length: count }, (_, index) => {
+        const width =
+          widths?.[index] ?? (index === count - 1 && count > 1 ? "66%" : "100%")
+
+        return (
+          <Skeleton
+            animated={animated}
+            key={index}
+            shape="text"
+            size={lineSize}
+            tone={tone}
+            style={{ "--bh-skeleton-width": width } as SkeletonCssProperties}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+const skeletonAvatarSizes = {
+  xs: "size-[var(--bh-space-5xl-24)]",
+  sm: "size-[var(--bh-space-6xl-32)]",
+  md: "size-[var(--bh-space-7xl-40)]",
+  lg: "size-[var(--bh-space-8xl-48)]",
+  xl: "size-[var(--bh-space-9xl-64)]",
+} as const
+
+type SkeletonAvatarProps = Omit<SkeletonProps, "shape" | "size"> & {
+  size?: keyof typeof skeletonAvatarSizes
+}
+
+function SkeletonAvatar({
+  className,
+  size = "md",
+  ...props
+}: SkeletonAvatarProps) {
+  return (
+    <Skeleton
+      shape="circle"
+      className={cn(skeletonAvatarSizes[size], className)}
+      {...props}
+    />
+  )
+}
+
+const skeletonButtonSizes = {
+  sm: "h-[var(--bh-button-sm-height)] w-[var(--bh-space-11xl-96)]",
+  default: "h-[var(--bh-button-md-height)] w-[var(--bh-space-12xl-128)]",
+  lg: "h-[var(--bh-button-lg-height)] w-[var(--bh-space-13xl-160)]",
+  xl: "h-[var(--bh-button-xl-height)] w-[var(--bh-space-14xl-192)]",
+  icon: "size-[var(--bh-button-md-height)]",
+} as const
+
+type SkeletonButtonProps = Omit<SkeletonProps, "shape" | "size"> & {
+  size?: keyof typeof skeletonButtonSizes
+}
+
+function SkeletonButton({
+  className,
+  size = "default",
+  ...props
+}: SkeletonButtonProps) {
+  return (
+    <Skeleton
+      shape="block"
+      className={cn(
+        "rounded-[var(--bh-control-default)]",
+        skeletonButtonSizes[size],
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+type SkeletonInputProps = Omit<React.ComponentProps<"div">, "children"> & {
+  animated?: boolean
+  helper?: boolean
+  label?: boolean
+  tone?: SkeletonProps["tone"]
+}
+
+function SkeletonInput({
+  animated,
+  className,
+  helper = true,
+  label = true,
+  tone,
+  ...props
+}: SkeletonInputProps) {
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="skeleton-input"
+      className={cn("grid gap-[var(--bh-space-sm-6)]", className)}
+      {...props}
+    >
+      {label && (
+        <Skeleton
+          animated={animated}
+          shape="text"
+          size="sm"
+          tone={tone}
+          style={{ "--bh-skeleton-width": "42%" } as SkeletonCssProperties}
+        />
+      )}
+      <Skeleton
+        animated={animated}
+        className="rounded-[var(--bh-control-default)]"
+        size="xl"
+        tone={tone}
+      />
+      {helper && (
+        <Skeleton
+          animated={animated}
+          shape="text"
+          size="xs"
+          tone={tone}
+          style={{ "--bh-skeleton-width": "58%" } as SkeletonCssProperties}
+        />
+      )}
+    </div>
+  )
+}
+
+type SkeletonCardProps = Omit<React.ComponentProps<"div">, "children"> & {
+  actions?: boolean
+  animated?: boolean
+  avatar?: boolean
+  lines?: number
+  media?: boolean
+  tone?: SkeletonProps["tone"]
+}
+
+function SkeletonCard({
+  actions = true,
+  animated,
+  avatar = true,
+  className,
+  lines = 3,
+  media = true,
+  tone,
+  ...props
+}: SkeletonCardProps) {
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="skeleton-card"
+      className={cn(
+        "grid gap-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-xl-10)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)] p-[var(--bh-card-desktop-content-padding)] shadow-[var(--shadow-component-default)]",
+        className
+      )}
+      {...props}
+    >
+      {media && (
+        <Skeleton
+          animated={animated}
+          className="aspect-[16/9] rounded-[var(--bh-radius-lg-8)]"
+          size="xl"
+          tone={tone}
+        />
+      )}
+      <div className="grid grid-cols-[auto_minmax(0,1fr)] gap-[var(--bh-space-xl-12)]">
+        {avatar && <SkeletonAvatar animated={animated} tone={tone} />}
+        <SkeletonText animated={animated} lineCount={lines} tone={tone} />
+      </div>
+      {actions && (
+        <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+          <SkeletonButton animated={animated} size="sm" tone={tone} />
+          <SkeletonButton animated={animated} size="sm" tone={tone} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+type SkeletonListProps = Omit<React.ComponentProps<"div">, "children"> & {
+  animated?: boolean
+  rows?: number
+  tone?: SkeletonProps["tone"]
+  withAvatar?: boolean
+  withMeta?: boolean
+}
+
+function SkeletonList({
+  animated,
+  className,
+  rows = 4,
+  tone,
+  withAvatar = true,
+  withMeta = true,
+  ...props
+}: SkeletonListProps) {
+  const rowCount = Math.max(1, rows)
+
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="skeleton-list"
+      className={cn(
+        "overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)]",
+        className
+      )}
+      {...props}
+    >
+      {Array.from({ length: rowCount }, (_, index) => (
+        <div
+          className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-[var(--bh-space-xl-12)] border-b border-[var(--bh-border-subtle)] p-[var(--bh-space-3xl-16)] last:border-b-0"
+          key={index}
+        >
+          {withAvatar && <SkeletonAvatar animated={animated} size="sm" tone={tone} />}
+          <SkeletonText
+            animated={animated}
+            lineCount={2}
+            lineSize="sm"
+            tone={tone}
+            widths={["74%", "46%"]}
+          />
+          {withMeta && (
+            <Skeleton
+              animated={animated}
+              shape="text"
+              size="sm"
+              tone={tone}
+              style={{ "--bh-skeleton-width": "64%" } as SkeletonCssProperties}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+type SkeletonTableProps = Omit<React.ComponentProps<"div">, "children"> & {
+  animated?: boolean
+  columns?: number
+  rows?: number
+  showHeader?: boolean
+  tone?: SkeletonProps["tone"]
+}
+
+function SkeletonTable({
+  animated,
+  className,
+  columns = 4,
+  rows = 5,
+  showHeader = true,
+  tone,
+  ...props
+}: SkeletonTableProps) {
+  const columnCount = Math.max(1, columns)
+  const rowCount = Math.max(1, rows)
+  const gridStyle = {
+    "--bh-skeleton-table-columns": `repeat(${columnCount}, minmax(0, 1fr))`,
+  } as React.CSSProperties
+
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="skeleton-table"
+      className={cn(
+        "overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)]",
+        className
+      )}
+      {...props}
+    >
+      {showHeader && (
+        <div
+          className="grid grid-cols-[var(--bh-skeleton-table-columns)] gap-[var(--bh-space-3xl-16)] border-b border-[var(--bh-border-default)] bg-[var(--bh-bg-muted)] p-[var(--bh-space-xl-12)]"
+          style={gridStyle}
+        >
+          {Array.from({ length: columnCount }, (_, index) => (
+            <Skeleton
+              animated={animated}
+              key={index}
+              shape="text"
+              size="sm"
+              tone={tone}
+            />
+          ))}
+        </div>
+      )}
+      {Array.from({ length: rowCount }, (_, rowIndex) => (
+        <div
+          className="grid grid-cols-[var(--bh-skeleton-table-columns)] items-center gap-[var(--bh-space-3xl-16)] border-b border-[var(--bh-border-subtle)] p-[var(--bh-space-xl-12)] last:border-b-0"
+          key={rowIndex}
+          style={gridStyle}
+        >
+          {Array.from({ length: columnCount }, (_, columnIndex) => (
+            <Skeleton
+              animated={animated}
+              key={columnIndex}
+              shape="text"
+              size="sm"
+              tone={tone}
+              style={
+                {
+                  "--bh-skeleton-width":
+                    columnIndex === columnCount - 1 ? "58%" : "100%",
+                } as SkeletonCssProperties
+              }
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+type SkeletonFormProps = Omit<React.ComponentProps<"div">, "children"> & {
+  actions?: boolean
+  animated?: boolean
+  fields?: number
+  tone?: SkeletonProps["tone"]
+}
+
+function SkeletonForm({
+  actions = true,
+  animated,
+  className,
+  fields = 3,
+  tone,
+  ...props
+}: SkeletonFormProps) {
+  const fieldCount = Math.max(1, fields)
+
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="skeleton-form"
+      className={cn(
+        "grid gap-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-5xl-24)]",
+        className
+      )}
+      {...props}
+    >
+      {Array.from({ length: fieldCount }, (_, index) => (
+        <SkeletonInput
+          animated={animated}
+          helper={index === fieldCount - 1}
+          key={index}
+          tone={tone}
+        />
+      ))}
+      {actions && (
+        <div className="flex flex-wrap justify-end gap-[var(--bh-space-md-8)]">
+          <SkeletonButton animated={animated} size="sm" tone={tone} />
+          <SkeletonButton animated={animated} tone={tone} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonCard,
+  SkeletonForm,
+  SkeletonInput,
+  SkeletonList,
+  SkeletonTable,
+  SkeletonText,
+  skeletonVariants,
+}
+export type {
+  SkeletonAvatarProps,
+  SkeletonButtonProps,
+  SkeletonCardProps,
+  SkeletonFormProps,
+  SkeletonInputProps,
+  SkeletonListProps,
+  SkeletonProps,
+  SkeletonTableProps,
+  SkeletonTextProps,
+}

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 }