banhaten 0.5.0 → 0.6.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(--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,
-}
+"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/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(--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 }
+"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 }

package/registry/components/segmented-control.tsx

@@ -1,87 +1,87 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  ButtonGroupLabel,
-  ToggleGroup,
-  ToggleGroupItem,
-  type ButtonGroupLabelProps,
-  type ControlDensity,
-  type ToggleGroupItemProps,
-  type ToggleGroupProps,
-} from "@/components/ui/button-group"
-
-type SegmentedControlProps = Omit<
-  ToggleGroupProps,
-  "itemWidth" | "mode"
-> & {
-  "aria-label": string
-  density?: ControlDensity
-}
-
-const SegmentedControl = React.forwardRef<
-  HTMLDivElement,
-  SegmentedControlProps
->(function SegmentedControl(
-  { density = "default", type = "single", ...props },
-  ref
-) {
-  return (
-    <ToggleGroup
-      data-slot="segmented-control"
-      density={density}
-      itemWidth="content"
-      mode="default"
-      ref={ref}
-      type={type}
-      {...props}
-    />
-  )
-})
-
-type SegmentedControlItemProps = ToggleGroupItemProps
-
-const SegmentedControlItem = React.forwardRef<
-  HTMLButtonElement,
-  SegmentedControlItemProps
->(function SegmentedControlItem(props, ref) {
-  return (
-    <ToggleGroupItem
-      data-slot="segmented-control-item"
-      itemWidth="content"
-      ref={ref}
-      {...props}
-    />
-  )
-})
-
-type SegmentedControlLabelProps = Omit<
-  ButtonGroupLabelProps,
-  "itemWidth"
->
-
-const SegmentedControlLabel = React.forwardRef<
-  HTMLSpanElement,
-  SegmentedControlLabelProps
->(function SegmentedControlLabel(props, ref) {
-  return (
-    <ButtonGroupLabel
-      data-slot="segmented-control-label"
-      itemWidth="content"
-      ref={ref}
-      {...props}
-    />
-  )
-})
-
-export {
-  SegmentedControl,
-  SegmentedControlItem,
-  SegmentedControlLabel,
-}
-export type {
-  SegmentedControlItemProps,
-  SegmentedControlLabelProps,
-  SegmentedControlProps,
-}
+"use client"
+
+import * as React from "react"
+
+import {
+  ButtonGroupLabel,
+  ToggleGroup,
+  ToggleGroupItem,
+  type ButtonGroupLabelProps,
+  type ControlDensity,
+  type ToggleGroupItemProps,
+  type ToggleGroupProps,
+} from "@/components/ui/button-group"
+
+type SegmentedControlProps = Omit<
+  ToggleGroupProps,
+  "itemWidth" | "mode"
+> & {
+  "aria-label": string
+  density?: ControlDensity
+}
+
+const SegmentedControl = React.forwardRef<
+  HTMLDivElement,
+  SegmentedControlProps
+>(function SegmentedControl(
+  { density = "default", type = "single", ...props },
+  ref
+) {
+  return (
+    <ToggleGroup
+      data-slot="segmented-control"
+      density={density}
+      itemWidth="content"
+      mode="default"
+      ref={ref}
+      type={type}
+      {...props}
+    />
+  )
+})
+
+type SegmentedControlItemProps = ToggleGroupItemProps
+
+const SegmentedControlItem = React.forwardRef<
+  HTMLButtonElement,
+  SegmentedControlItemProps
+>(function SegmentedControlItem(props, ref) {
+  return (
+    <ToggleGroupItem
+      data-slot="segmented-control-item"
+      itemWidth="content"
+      ref={ref}
+      {...props}
+    />
+  )
+})
+
+type SegmentedControlLabelProps = Omit<
+  ButtonGroupLabelProps,
+  "itemWidth"
+>
+
+const SegmentedControlLabel = React.forwardRef<
+  HTMLSpanElement,
+  SegmentedControlLabelProps
+>(function SegmentedControlLabel(props, ref) {
+  return (
+    <ButtonGroupLabel
+      data-slot="segmented-control-label"
+      itemWidth="content"
+      ref={ref}
+      {...props}
+    />
+  )
+})
+
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  SegmentedControlLabel,
+}
+export type {
+  SegmentedControlItemProps,
+  SegmentedControlLabelProps,
+  SegmentedControlProps,
+}