banhaten 0.1.1 → 0.1.2

package/registry/components/select.tsx

@@ -293,10 +293,13 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
 type RadixSelectMenuContentProps = React.ComponentProps<typeof SelectPrimitive.Content>
 // Radix sideOffset requires a number; this mirrors --bh-select-menu-offset.
 const SELECT_MENU_SIDE_OFFSET_PX = 4
+// Radix collisionPadding requires a number; this mirrors --bh-space-md-8.
+const SELECT_MENU_COLLISION_PADDING_PX = 8
 
 function RadixSelectMenuContent({
   children,
   className,
+  collisionPadding = SELECT_MENU_COLLISION_PADDING_PX,
   position = "popper",
   sideOffset = SELECT_MENU_SIDE_OFFSET_PX,
   ...props
@@ -304,6 +307,7 @@ function RadixSelectMenuContent({
   return (
     <SelectPrimitive.Content
       asChild
+      collisionPadding={collisionPadding}
       position={position}
       sideOffset={sideOffset}
       {...props}

package/registry/components/skeleton.css

@@ -0,0 +1,57 @@
+[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);
+}
+
+[data-slot="skeleton"][data-animated="true"]::after {
+  animation: bh-skeleton-shimmer var(--bh-skeleton-duration) ease-in-out infinite;
+  background: linear-gradient(
+    90deg,
+    var(--bh-alpha-alpha-transparent),
+    var(--bh-skeleton-highlight),
+    var(--bh-alpha-alpha-transparent)
+  );
+  content: "";
+  inset-block: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+  position: absolute;
+  transform: translateX(-100%);
+  width: var(--bh-skeleton-shimmer-width);
+}
+
+[dir="rtl"] [data-slot="skeleton"][data-animated="true"]::after,
+[data-slot="skeleton"][dir="rtl"][data-animated="true"]::after {
+  animation-name: bh-skeleton-shimmer-rtl;
+}
+
+@keyframes bh-skeleton-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(200%);
+  }
+}
+
+@keyframes bh-skeleton-shimmer-rtl {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(-200%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="skeleton"][data-animated="true"]::after {
+    animation: none;
+  }
+}

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/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 }

package/registry/components/textarea.tsx

@@ -100,7 +100,7 @@ const textareaControl = cva(
     variants: {
       type: {
         default:
-          "min-h-[calc(var(--bh-textarea-min-height)_-_var(--bh-textarea-padding)_-_var(--bh-textarea-padding))]",
+          "min-h-[calc(var(--bh-textarea-min-height)_-_var(--bh-textarea-padding)_-_var(--bh-textarea-padding))] overflow-y-auto [scrollbar-gutter:stable]",
         tags:
           "h-[var(--bh-text-body-md-regular-line-height)] min-h-[var(--bh-text-body-md-regular-line-height)] overflow-hidden",
       },