banhaten 0.3.0 → 0.5.0

package/registry/components/context-menu.tsx

@@ -1,236 +1,236 @@
-"use client"
-
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-type ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>
-type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.Trigger
->
-type ContextMenuContentProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.Content
->
-type ContextMenuItemProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.Item
-> & {
-  inset?: boolean
-}
-type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.CheckboxItem
->
-type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.RadioItem
->
-type ContextMenuLabelProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.Label
-> & {
-  inset?: boolean
-}
-type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.Separator
->
-type ContextMenuSubTriggerProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.SubTrigger
-> & {
-  inset?: boolean
-}
-type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.SubContent
->
-type ContextMenuShortcutProps = React.ComponentProps<"span">
-
-const ContextMenu = ContextMenuPrimitive.Root
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-const ContextMenuGroup = ContextMenuPrimitive.Group
-const ContextMenuPortal = ContextMenuPrimitive.Portal
-const ContextMenuSub = ContextMenuPrimitive.Sub
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
-
-const menuContentClassName =
-  "z-[var(--bh-z-popover)] min-w-[var(--bh-menu-width)] overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] shadow-[var(--shadow-menu)]"
-
-const menuItemClassName =
-  "relative flex min-h-[var(--bh-menu-item-default-height)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[disabled]:pointer-events-none data-[disabled]:text-[var(--bh-content-disabled)] data-[highlighted]:bg-[var(--bh-menu-item-hover-bg)]"
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  ContextMenuContentProps
->(function ContextMenuContent({ className, ...props }, ref) {
-  return (
-    <ContextMenuPortal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-content"
-        ref={ref}
-        className={cn(menuContentClassName, className)}
-        {...props}
-      />
-    </ContextMenuPortal>
-  )
-})
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  ContextMenuItemProps
->(function ContextMenuItem({ className, inset, ...props }, ref) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-inset={inset ? "true" : undefined}
-      data-slot="context-menu-item"
-      ref={ref}
-      className={cn(menuItemClassName, inset && "ps-[var(--bh-space-8xl-48)]", className)}
-      {...props}
-    />
-  )
-})
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  ContextMenuCheckboxItemProps
->(function ContextMenuCheckboxItem({ children, className, checked, ...props }, ref) {
-  return (
-    <ContextMenuPrimitive.CheckboxItem
-      checked={checked}
-      data-slot="context-menu-checkbox-item"
-      ref={ref}
-      className={cn(menuItemClassName, "ps-[var(--bh-space-8xl-48)]", className)}
-      {...props}
-    >
-      <span className="absolute start-[var(--bh-space-md-8)] inline-flex size-[var(--bh-space-5xl-24)] items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-[var(--bh-space-3xl-16)]" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  )
-})
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  ContextMenuRadioItemProps
->(function ContextMenuRadioItem({ children, className, ...props }, ref) {
-  return (
-    <ContextMenuPrimitive.RadioItem
-      data-slot="context-menu-radio-item"
-      ref={ref}
-      className={cn(menuItemClassName, "ps-[var(--bh-space-8xl-48)]", className)}
-      {...props}
-    >
-      <span className="absolute start-[var(--bh-space-md-8)] inline-flex size-[var(--bh-space-5xl-24)] items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-[var(--bh-space-md-8)] fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  )
-})
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  ContextMenuLabelProps
->(function ContextMenuLabel({ className, inset, ...props }, ref) {
-  return (
-    <ContextMenuPrimitive.Label
-      data-inset={inset ? "true" : undefined}
-      data-slot="context-menu-label"
-      ref={ref}
-      className={cn(
-        "px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-muted)]",
-        inset && "ps-[var(--bh-space-8xl-48)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  ContextMenuSeparatorProps
->(function ContextMenuSeparator({ className, ...props }, ref) {
-  return (
-    <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
-      ref={ref}
-      className={cn("my-[var(--bh-space-xs-4)] h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
-      {...props}
-    />
-  )
-})
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  ContextMenuSubTriggerProps
->(function ContextMenuSubTrigger({ children, className, inset, ...props }, ref) {
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      data-inset={inset ? "true" : undefined}
-      data-slot="context-menu-sub-trigger"
-      ref={ref}
-      className={cn(menuItemClassName, inset && "ps-[var(--bh-space-8xl-48)]", className)}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ms-auto size-[var(--bh-space-3xl-16)] rtl:-scale-x-100" />
-    </ContextMenuPrimitive.SubTrigger>
-  )
-})
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  ContextMenuSubContentProps
->(function ContextMenuSubContent({ className, ...props }, ref) {
-  return (
-    <ContextMenuPrimitive.SubContent
-      data-slot="context-menu-sub-content"
-      ref={ref}
-      className={cn(menuContentClassName, className)}
-      {...props}
-    />
-  )
-})
-
-function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) {
-  return (
-    <span
-      data-slot="context-menu-shortcut"
-      className={cn("ms-auto text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-muted)]", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuPortal,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-}
-export type {
-  ContextMenuCheckboxItemProps,
-  ContextMenuContentProps,
-  ContextMenuItemProps,
-  ContextMenuLabelProps,
-  ContextMenuProps,
-  ContextMenuRadioItemProps,
-  ContextMenuSeparatorProps,
-  ContextMenuShortcutProps,
-  ContextMenuSubContentProps,
-  ContextMenuSubTriggerProps,
-  ContextMenuTriggerProps,
-}
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>
+type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Trigger
+>
+type ContextMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Content
+>
+type ContextMenuItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Item
+> & {
+  inset?: boolean
+}
+type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.CheckboxItem
+>
+type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.RadioItem
+>
+type ContextMenuLabelProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Label
+> & {
+  inset?: boolean
+}
+type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Separator
+>
+type ContextMenuSubTriggerProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubTrigger
+> & {
+  inset?: boolean
+}
+type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubContent
+>
+type ContextMenuShortcutProps = React.ComponentProps<"span">
+
+const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const menuContentClassName =
+  "z-[var(--bh-z-popover)] min-w-[var(--bh-menu-width)] overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] shadow-[var(--elevation-menu)]"
+
+const menuItemClassName =
+  "relative flex min-h-[var(--bh-menu-item-default-height)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[disabled]:pointer-events-none data-[disabled]:text-[var(--bh-content-disabled)] data-[highlighted]:bg-[var(--bh-menu-item-hover-bg)]"
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  ContextMenuContentProps
+>(function ContextMenuContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPortal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        ref={ref}
+        className={cn(menuContentClassName, className)}
+        {...props}
+      />
+    </ContextMenuPortal>
+  )
+})
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  ContextMenuItemProps
+>(function ContextMenuItem({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-inset={inset ? "true" : undefined}
+      data-slot="context-menu-item"
+      ref={ref}
+      className={cn(menuItemClassName, inset && "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    />
+  )
+})
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  ContextMenuCheckboxItemProps
+>(function ContextMenuCheckboxItem({ children, className, checked, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      checked={checked}
+      data-slot="context-menu-checkbox-item"
+      ref={ref}
+      className={cn(menuItemClassName, "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      <span className="absolute start-[var(--bh-space-md-8)] inline-flex size-[var(--bh-space-5xl-24)] items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-[var(--bh-space-3xl-16)]" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+})
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  ContextMenuRadioItemProps
+>(function ContextMenuRadioItem({ children, className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      ref={ref}
+      className={cn(menuItemClassName, "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      <span className="absolute start-[var(--bh-space-md-8)] inline-flex size-[var(--bh-space-5xl-24)] items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-[var(--bh-space-md-8)] fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+})
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  ContextMenuLabelProps
+>(function ContextMenuLabel({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-inset={inset ? "true" : undefined}
+      data-slot="context-menu-label"
+      ref={ref}
+      className={cn(
+        "px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-muted)]",
+        inset && "ps-[var(--bh-space-8xl-48)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  ContextMenuSeparatorProps
+>(function ContextMenuSeparator({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      ref={ref}
+      className={cn("my-[var(--bh-space-xs-4)] h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
+      {...props}
+    />
+  )
+})
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  ContextMenuSubTriggerProps
+>(function ContextMenuSubTrigger({ children, className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-inset={inset ? "true" : undefined}
+      data-slot="context-menu-sub-trigger"
+      ref={ref}
+      className={cn(menuItemClassName, inset && "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ms-auto size-[var(--bh-space-3xl-16)] rtl:-scale-x-100" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+})
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  ContextMenuSubContentProps
+>(function ContextMenuSubContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      ref={ref}
+      className={cn(menuContentClassName, className)}
+      {...props}
+    />
+  )
+})
+
+function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn("ms-auto text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-muted)]", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+}
+export type {
+  ContextMenuCheckboxItemProps,
+  ContextMenuContentProps,
+  ContextMenuItemProps,
+  ContextMenuLabelProps,
+  ContextMenuProps,
+  ContextMenuRadioItemProps,
+  ContextMenuSeparatorProps,
+  ContextMenuShortcutProps,
+  ContextMenuSubContentProps,
+  ContextMenuSubTriggerProps,
+  ContextMenuTriggerProps,
+}

package/registry/components/data-chart.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { EChart, type EChartProps, type EChartTheme } from "./echart"
+import { createChartOption, type ChartSpec } from "./chart-options"
+import { attachChartInteractions } from "./chart-interactions"
+import { cn } from "@/lib/utils"
+
+export type DataChartProps = Omit<EChartProps, "option"> & {
+  spec: ChartSpec
+  loading?: boolean
+  loadingLabel?: string
+  emptyLabel?: string
+}
+
+/** The ready-to-use Banhaten chart surface, including the source interactions. */
+export function DataChart({ spec, label, description, loading = false, loadingLabel = "Loading chart…", emptyLabel = "No data available", onReady, className, ...props }: DataChartProps) {
+  const option = React.useCallback((theme: EChartTheme) => createChartOption(theme, spec), [spec])
+  const setup = React.useCallback<NonNullable<EChartProps["onReady"]>>((chart, theme) => {
+    const cleanup = attachChartInteractions(chart, theme, spec)
+    const cleanupConsumer = onReady?.(chart, theme)
+    return () => { cleanup(); cleanupConsumer?.() }
+  }, [spec, onReady])
+  const empty = spec.family === "sankey" ? !((spec.nodes?.length ?? spec.data.length) && spec.links?.length) : spec.data.length === 0
+  if (loading || empty) {
+    return (
+      <div
+        {...props}
+        role="status"
+        aria-label={label}
+        aria-busy={loading}
+        data-slot="data-chart-state"
+        className={cn("flex h-[var(--bh-space-19xl-384)] w-full items-center justify-center rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-muted)]", className)}
+      >
+        {loading ? loadingLabel : emptyLabel}
+      </div>
+    )
+  }
+  return <EChart {...props} label={label} description={description} className={className} option={option} onReady={setup} />
+}