banhaten 0.3.0 → 0.5.0

package/registry/components/resizable.tsx

@@ -1,108 +1,108 @@
-"use client"
-
-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import {
-  Group,
-  Panel,
-  Separator,
-  type GroupProps,
-  type Orientation,
-  type PanelProps,
-  type SeparatorProps,
-} from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-type ResizablePanelGroupProps = Omit<GroupProps, "orientation"> & {
-  direction?: Orientation
-}
-type ResizablePanelProps = PanelProps & {
-  contentTabIndex?: number
-}
-type ResizableHandleProps = SeparatorProps & {
-  withHandle?: boolean
-}
-
-function ResizablePanelGroup({
-  className,
-  direction = "horizontal",
-  ...props
-}: ResizablePanelGroupProps) {
-  return (
-    <Group
-      data-panel-group-direction={direction}
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
-      orientation={direction}
-      {...props}
-    />
-  )
-}
-
-function ResizablePanel({
-  className,
-  contentTabIndex = 0,
-  elementRef,
-  ...props
-}: ResizablePanelProps) {
-  const setElementRef = React.useCallback(
-    (node: HTMLDivElement | null) => {
-      const content = node?.firstElementChild
-      if (content instanceof HTMLElement) {
-        content.tabIndex = contentTabIndex
-        content.setAttribute("data-slot", "resizable-panel-content")
-      }
-
-      if (typeof elementRef === "function") elementRef(node)
-      else if (elementRef) {
-        ;(elementRef as React.MutableRefObject<HTMLDivElement | null>).current = node
-      }
-    },
-    [contentTabIndex, elementRef]
-  )
-
-  return (
-    <Panel
-      className={cn(
-        "outline-none focus-visible:shadow-[var(--shadow-component-focus-ring)]",
-        className
-      )}
-      elementRef={setElementRef}
-      {...props}
-    />
-  )
-}
-
-function ResizableHandle({
-  className,
-  withHandle = false,
-  ...props
-}: ResizableHandleProps) {
-  return (
-    <Separator
-      data-slot="resizable-handle"
-      className={cn(
-        "relative flex w-[var(--bh-border-width-default)] items-center justify-center bg-[var(--bh-border-subtle)] outline-none transition-[background-color,box-shadow] after:absolute after:inset-y-0 after:start-1/2 after:w-[var(--bh-space-5xl-24)] after:-translate-x-1/2 focus-visible:shadow-[var(--shadow-button-focus)] aria-[orientation=horizontal]:h-[var(--bh-border-width-default)] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-[var(--bh-space-5xl-24)] aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0",
-        className
-      )}
-      {...props}
-    >
-      {withHandle ? (
-        <div className="z-[var(--bh-z-raised)] flex h-[var(--bh-space-6xl-32)] w-[var(--bh-space-4xl-20)] items-center justify-center rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
-          <GripVerticalIcon className="size-[var(--bh-space-3xl-16)] text-[var(--bh-content-muted)]" />
-        </div>
-      ) : null}
-    </Separator>
-  )
-}
-
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
-export type {
-  ResizableHandleProps,
-  ResizablePanelGroupProps,
-  ResizablePanelProps,
-}
+"use client"
+
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import {
+  Group,
+  Panel,
+  Separator,
+  type GroupProps,
+  type Orientation,
+  type PanelProps,
+  type SeparatorProps,
+} from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+type ResizablePanelGroupProps = Omit<GroupProps, "orientation"> & {
+  direction?: Orientation
+}
+type ResizablePanelProps = PanelProps & {
+  contentTabIndex?: number
+}
+type ResizableHandleProps = SeparatorProps & {
+  withHandle?: boolean
+}
+
+function ResizablePanelGroup({
+  className,
+  direction = "horizontal",
+  ...props
+}: ResizablePanelGroupProps) {
+  return (
+    <Group
+      data-panel-group-direction={direction}
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      orientation={direction}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  className,
+  contentTabIndex = 0,
+  elementRef,
+  ...props
+}: ResizablePanelProps) {
+  const setElementRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      const content = node?.firstElementChild
+      if (content instanceof HTMLElement) {
+        content.tabIndex = contentTabIndex
+        content.setAttribute("data-slot", "resizable-panel-content")
+      }
+
+      if (typeof elementRef === "function") elementRef(node)
+      else if (elementRef) {
+        ;(elementRef as React.MutableRefObject<HTMLDivElement | null>).current = node
+      }
+    },
+    [contentTabIndex, elementRef]
+  )
+
+  return (
+    <Panel
+      className={cn(
+        "outline-none focus-visible:shadow-[var(--elevation-component-focus-ring)]",
+        className
+      )}
+      elementRef={setElementRef}
+      {...props}
+    />
+  )
+}
+
+function ResizableHandle({
+  className,
+  withHandle = false,
+  ...props
+}: ResizableHandleProps) {
+  return (
+    <Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-[var(--bh-border-width-default)] items-center justify-center bg-[var(--bh-border-subtle)] outline-none transition-[background-color,box-shadow] after:absolute after:inset-y-0 after:start-1/2 after:w-[var(--bh-space-5xl-24)] after:-translate-x-1/2 focus-visible:shadow-[var(--elevation-button-focus)] aria-[orientation=horizontal]:h-[var(--bh-border-width-default)] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-[var(--bh-space-5xl-24)] aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0",
+        className
+      )}
+      {...props}
+    >
+      {withHandle ? (
+        <div className="z-[var(--bh-z-raised)] flex h-[var(--bh-space-6xl-32)] w-[var(--bh-space-4xl-20)] items-center justify-center rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
+          <GripVerticalIcon className="size-[var(--bh-space-3xl-16)] text-[var(--bh-content-muted)]" />
+        </div>
+      ) : null}
+    </Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
+export type {
+  ResizableHandleProps,
+  ResizablePanelGroupProps,
+  ResizablePanelProps,
+}

package/registry/components/rolling-count.css

@@ -0,0 +1,37 @@
+/* Rolling digits: the old glyph slides out as the new one slides in. */
+[data-slot="rolling-count"] {
+  font-variant-numeric: tabular-nums;
+  unicode-bidi: isolate;
+}
+
+[data-slot="rolling-count-digits"] {
+  display: inline-flex;
+  align-items: baseline;
+}
+
+[data-slot="rolling-digit"] {
+  block-size: 1em;
+  display: inline-block;
+  line-height: 1em;
+  overflow: hidden;
+}
+
+[data-slot="rolling-digit-track"] {
+  display: flex;
+  flex-direction: column;
+  transition: transform var(--bh-duration-slow) var(--bh-easing-standard);
+}
+
+[data-slot="rolling-digit-track"] > span {
+  block-size: 1em;
+  line-height: 1em;
+}
+
+[data-slot="rolling-digit-track"][data-direction="up"][data-shifted="true"],
+[data-slot="rolling-digit-track"][data-direction="down"][data-shifted="false"] {
+  transform: translateY(-1em);
+}
+
+[data-slot="rolling-digit-track"][data-direction="down"][data-shifted="true"] {
+  transform: translateY(0);
+}

package/registry/components/rolling-count.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { useMotionEnd } from "@/hooks/use-motion-end"
+
+import "./rolling-count.css"
+
+/** One character slot that rolls the old glyph out and the new one in. */
+function RollingDigit({ char }: { char: string }) {
+  const previous = React.useRef(char)
+  const [roll, setRoll] = React.useState<{
+    direction: "up" | "down"
+    from: string
+    to: string
+  } | null>(null)
+  const [shifted, setShifted] = React.useState(false)
+  const trackRef = React.useRef<HTMLSpanElement>(null)
+
+  // Swap back to the plain glyph once the roll transition has finished.
+  useMotionEnd(trackRef, roll !== null && shifted, () => setRoll(null))
+
+  React.useEffect(() => {
+    if (char === previous.current) return
+    const from = previous.current
+    previous.current = char
+    const fromNumber = Number.parseInt(from, 10)
+    const toNumber = Number.parseInt(char, 10)
+    // Digits roll like an odometer: 9 → 0 keeps rolling up, 0 → 9 rolls down.
+    const numeric = Number.isFinite(fromNumber) && Number.isFinite(toNumber)
+    const wrapsUp = numeric && fromNumber === 9 && toNumber === 0
+    const wrapsDown = numeric && fromNumber === 0 && toNumber === 9
+    const direction =
+      wrapsDown || (numeric && !wrapsUp && toNumber < fromNumber)
+        ? "down"
+        : "up"
+    setRoll({ direction, from, to: char })
+    setShifted(false)
+    let second = 0
+    const first = window.requestAnimationFrame(() => {
+      second = window.requestAnimationFrame(() => setShifted(true))
+    })
+    return () => {
+      window.cancelAnimationFrame(first)
+      window.cancelAnimationFrame(second)
+    }
+  }, [char])
+
+  if (!roll) {
+    return <span data-slot="rolling-digit">{char}</span>
+  }
+
+  const top = roll.direction === "down" ? roll.to : roll.from
+  const bottom = roll.direction === "down" ? roll.from : roll.to
+
+  return (
+    <span data-slot="rolling-digit">
+      <span
+        data-direction={roll.direction}
+        data-shifted={shifted ? "true" : "false"}
+        data-slot="rolling-digit-track"
+        ref={trackRef}
+      >
+        <span>{top}</span>
+        <span>{bottom}</span>
+      </span>
+    </span>
+  )
+}
+
+type RollingCountProps = Omit<React.ComponentProps<"span">, "children"> & {
+  value: string
+}
+
+/**
+ * Tabular figures where each changed character rolls into place. Assistive
+ * technology reads the plain value; the rolling glyphs are presentational.
+ */
+const RollingCount = React.forwardRef<HTMLSpanElement, RollingCountProps>(
+  function RollingCount(
+    { "aria-label": ariaLabel, className, dir = "ltr", value, ...props },
+    ref
+  ) {
+    // Digits stay in reading order for numbers even inside RTL copy; each
+    // glyph is its own box, so without an explicit direction bidi reorders
+    // them around the separator.
+    return (
+      <span
+        data-slot="rolling-count"
+        dir={dir}
+        ref={ref}
+        className={cn("inline-flex items-baseline", className)}
+        {...props}
+      >
+        <span className="sr-only">{ariaLabel ?? value}</span>
+        <span aria-hidden="true" data-slot="rolling-count-digits">
+          {/* Keyed from the end so a value that grows a digit (9/11 → 10/11)
+              rolls the existing glyphs in place instead of shifting them. */}
+          {Array.from(value).map((char, index, chars) => (
+            <RollingDigit char={char} key={chars.length - 1 - index} />
+          ))}
+        </span>
+      </span>
+    )
+  }
+)
+
+export { RollingCount }
+export type { RollingCountProps }

package/registry/components/scroll-area.tsx

@@ -1,91 +1,91 @@
-"use client"
-
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-
-import { cn } from "@/lib/utils"
-
-type ScrollAreaOrientation = "vertical" | "horizontal" | "both"
-type ScrollAreaProps = React.ComponentPropsWithoutRef<
-  typeof ScrollAreaPrimitive.Root
-> & {
-  orientation?: ScrollAreaOrientation
-  viewportProps?: React.ComponentPropsWithoutRef<
-    typeof ScrollAreaPrimitive.Viewport
-  >
-}
-type ScrollBarProps = React.ComponentPropsWithoutRef<
-  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
->
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  ScrollAreaProps
->(function ScrollArea(
-  {
-    children,
-    className,
-    orientation = "vertical",
-    viewportProps,
-    ...props
-  },
-  ref
-) {
-  const hasVerticalScrollbar =
-    orientation === "vertical" || orientation === "both"
-  const hasHorizontalScrollbar =
-    orientation === "horizontal" || orientation === "both"
-
-  return (
-    <ScrollAreaPrimitive.Root
-      data-orientation={orientation}
-      data-slot="scroll-area"
-      ref={ref}
-      className={cn("relative overflow-hidden", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        {...viewportProps}
-        tabIndex={viewportProps?.tabIndex ?? 0}
-        className={cn("size-full rounded-[inherit] outline-none focus-visible:shadow-[var(--shadow-component-focus-ring)]", viewportProps?.className)}
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      {hasVerticalScrollbar ? <ScrollBar orientation="vertical" /> : null}
-      {hasHorizontalScrollbar ? <ScrollBar orientation="horizontal" /> : null}
-      {orientation === "both" ? <ScrollAreaPrimitive.Corner /> : null}
-    </ScrollAreaPrimitive.Root>
-  )
-})
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  ScrollBarProps
->(function ScrollBar({ className, orientation = "vertical", ...props }, ref) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-orientation={orientation}
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      ref={ref}
-      className={cn(
-        "flex touch-none select-none bg-transparent p-[var(--bh-space-xxs-2)] transition-colors",
-        orientation === "vertical" &&
-          "h-full w-[var(--bh-space-lg-10)] border-s border-s-transparent",
-        orientation === "horizontal" &&
-          "h-[var(--bh-space-lg-10)] flex-col border-t border-t-transparent",
-        className
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="relative flex-1 rounded-[var(--bh-radius-full)] bg-[var(--bh-border-default)]"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
-})
-
-export { ScrollArea, ScrollBar }
-export type { ScrollAreaOrientation, ScrollAreaProps, ScrollBarProps }
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+type ScrollAreaOrientation = "vertical" | "horizontal" | "both"
+type ScrollAreaProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.Root
+> & {
+  orientation?: ScrollAreaOrientation
+  viewportProps?: React.ComponentPropsWithoutRef<
+    typeof ScrollAreaPrimitive.Viewport
+  >
+}
+type ScrollBarProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+>
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ScrollAreaProps
+>(function ScrollArea(
+  {
+    children,
+    className,
+    orientation = "vertical",
+    viewportProps,
+    ...props
+  },
+  ref
+) {
+  const hasVerticalScrollbar =
+    orientation === "vertical" || orientation === "both"
+  const hasHorizontalScrollbar =
+    orientation === "horizontal" || orientation === "both"
+
+  return (
+    <ScrollAreaPrimitive.Root
+      data-orientation={orientation}
+      data-slot="scroll-area"
+      ref={ref}
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        {...viewportProps}
+        tabIndex={viewportProps?.tabIndex ?? 0}
+        className={cn("size-full rounded-[inherit] outline-none focus-visible:shadow-[var(--elevation-component-focus-ring)]", viewportProps?.className)}
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      {hasVerticalScrollbar ? <ScrollBar orientation="vertical" /> : null}
+      {hasHorizontalScrollbar ? <ScrollBar orientation="horizontal" /> : null}
+      {orientation === "both" ? <ScrollAreaPrimitive.Corner /> : null}
+    </ScrollAreaPrimitive.Root>
+  )
+})
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  ScrollBarProps
+>(function ScrollBar({ className, orientation = "vertical", ...props }, ref) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-orientation={orientation}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      ref={ref}
+      className={cn(
+        "flex touch-none select-none bg-transparent p-[var(--bh-space-xxs-2)] transition-colors",
+        orientation === "vertical" &&
+          "h-full w-[var(--bh-space-lg-10)] border-s border-s-transparent",
+        orientation === "horizontal" &&
+          "h-[var(--bh-space-lg-10)] flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-[var(--bh-radius-full)] bg-[var(--bh-border-default)]"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+})
+
+export { ScrollArea, ScrollBar }
+export type { ScrollAreaOrientation, ScrollAreaProps, ScrollBarProps }