banhaten 0.1.1 → 0.1.3

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

@@ -3,12 +3,7 @@ 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"
@@ -23,6 +18,11 @@ type SocialPlatform =
 
 type SocialButtonVariant = "solid" | "outline"
 type SocialButtonSize = "default" | "icon"
+type SocialButtonIconComponent = React.ComponentType<
+  React.SVGProps<SVGSVGElement> & {
+    strokeWidth?: number
+  }
+>
 
 type SocialPlatformConfig = {
   label: string
@@ -276,12 +276,76 @@ function SocialButtonIcon({
   )
 }
 
-const socialButtonIcons: Record<SocialPlatform, LucideIcon> = {
+function FacebookBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M13.5 21v-7h2.35l.45-3h-2.8V9.06c0-.82.4-1.62 1.68-1.62h1.27V4.89S15.3 4.7 14.2 4.7c-2.3 0-3.8 1.39-3.8 3.9V11H7.84v3h2.56v7h3.1Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function GoogleBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M12 4.75a7.25 7.25 0 1 0 5.13 12.37 6.85 6.85 0 0 0 1.87-4.72H12v2.6h4.09a3.96 3.96 0 1 1-1.08-4.1l1.84-1.84A7.2 7.2 0 0 0 12 4.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function LinkedinBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M6.7 8.9H3.9V20h2.8V8.9ZM5.3 4A1.65 1.65 0 1 0 5.3 7.3 1.65 1.65 0 0 0 5.3 4Zm14.8 9.85c0-3.05-1.63-4.47-3.8-4.47a3.28 3.28 0 0 0-2.98 1.64h-.04V8.9h-2.69V20h2.8v-5.5c0-1.45.28-2.85 2.07-2.85 1.76 0 1.78 1.65 1.78 2.94V20h2.86v-6.15Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function TwitterBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="m15.3 10.9 5.1-5.9h-1.2l-4.43 5.14L11.23 5H7.15l5.35 7.79L7.15 19h1.2l4.68-5.43L16.77 19h4.08l-5.55-8.1Zm-1.66 1.92-.54-.78-4.31-6.15h1.86l3.49 4.98.54.78 4.52 6.46h-1.86l-3.7-5.29Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+const socialButtonIcons: Record<SocialPlatform, SocialButtonIconComponent> = {
   apple: AppleIcon,
-  facebook: FacebookIcon,
-  google: ChromeIcon,
-  linkedin: LinkedinIcon,
-  twitter: TwitterIcon,
+  facebook: FacebookBrandIcon,
+  google: GoogleBrandIcon,
+  linkedin: LinkedinBrandIcon,
+  twitter: TwitterBrandIcon,
   whatsapp: MessageCircleIcon,
 }
 

package/registry/components/spinner.tsx

@@ -2,16 +2,39 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+type SpinnerMotion = "dynamic" | "steady"
+
+type SpinnerProps = React.ComponentProps<"svg">
+
+type DynamicSpinnerProps = SpinnerProps
+
+type SpinnerBaseProps = SpinnerProps & {
+  motion: SpinnerMotion
+}
+
+function Spinner(props: SpinnerProps) {
+  return <SpinnerBase {...props} motion="steady" />
+}
+
+function DynamicSpinner(props: DynamicSpinnerProps) {
+  return <SpinnerBase {...props} motion="dynamic" />
+}
+
+function SpinnerBase({ className, motion, ...props }: SpinnerBaseProps) {
   return (
     <svg
       aria-hidden="true"
+      data-motion={motion}
       data-slot="spinner"
       viewBox="0 0 24 24"
-      className={cn("size-[var(--bh-spinner-size)] shrink-0 text-current", className)}
+      className={cn(
+        "size-[var(--bh-spinner-size)] shrink-0 text-current",
+        className
+      )}
       {...props}
     >
       <circle
+        data-slot="spinner-track"
         cx="12"
         cy="12"
         r="10"
@@ -21,6 +44,7 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
         opacity="var(--bh-opacity-25)"
       />
       <circle
+        data-slot="spinner-arc"
         cx="12"
         cy="12"
         r="10"
@@ -31,17 +55,61 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
         pathLength="100"
         strokeDasharray="30 70"
       >
-        <animateTransform
-          attributeName="transform"
-          dur="1s"
-          from="0 12 12"
-          repeatCount="indefinite"
-          to="360 12 12"
-          type="rotate"
-        />
+        {motion === "dynamic" ? (
+          <DynamicSpinnerMotion />
+        ) : (
+          <SteadySpinnerMotion />
+        )}
       </circle>
     </svg>
   )
 }
 
-export { Spinner }
+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"
+      />
+      <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"
+    />
+  )
+}
+
+export { DynamicSpinner, Spinner }
+export type { DynamicSpinnerProps, SpinnerProps }