banhaten 0.4.0 → 0.5.0

package/registry/components/skeleton.tsx

@@ -1,482 +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,
-}
+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(--elevation-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,
+}