banhaten 0.1.2 → 0.2.0

package/registry/components/chart.tsx

@@ -0,0 +1,203 @@
+"use client"
+
+import * as React from "react"
+import {
+  Legend as RechartsLegend,
+  ResponsiveContainer,
+  Tooltip as RechartsTooltip,
+} from "recharts"
+
+import { cn } from "@/lib/utils"
+
+type ChartConfig = Record<
+  string,
+  {
+    color?: string
+    label?: React.ReactNode
+  }
+>
+type ChartContainerProps = React.ComponentProps<"div"> & {
+  config?: ChartConfig
+}
+type ChartTooltipProps = React.ComponentProps<typeof RechartsTooltip>
+type ChartLegendProps = React.ComponentProps<typeof RechartsLegend>
+type ChartPayloadItem = {
+  color?: string
+  dataKey?: string | number
+  name?: React.ReactNode
+  value?: React.ReactNode
+}
+type ChartTooltipContentProps = React.ComponentProps<"div"> & {
+  active?: boolean
+  hideLabel?: boolean
+  label?: React.ReactNode
+  payload?: ChartPayloadItem[]
+}
+type ChartLegendContentProps = React.ComponentProps<"div"> & {
+  payload?: ChartPayloadItem[]
+}
+
+const chartCategoricalTokens = [
+  "--bh-chart-categorical-brand",
+  "--bh-chart-categorical-success",
+  "--bh-chart-categorical-warning",
+  "--bh-chart-categorical-danger",
+  "--bh-chart-categorical-information",
+  "--bh-chart-categorical-purple",
+  "--bh-chart-categorical-aqua",
+  "--bh-chart-categorical-fuchsia",
+] as const
+
+function ChartContainer({
+  children,
+  className,
+  config,
+  style,
+  ...props
+}: ChartContainerProps) {
+  return (
+    <div
+      data-slot="chart"
+      style={{ ...getChartStyle(config), ...style }}
+      className={cn(
+        "h-[var(--bh-space-19xl-384)] w-full text-[length:var(--bh-text-body-xs-regular-font-size)] text-[var(--bh-content-subtle)] [&_.recharts-cartesian-axis-tick_text]:fill-[var(--bh-content-muted)] [&_.recharts-cartesian-grid_line]:stroke-[var(--bh-border-subtle)] [&_.recharts-tooltip-cursor]:fill-[var(--bh-bg-neutral-subtle)]",
+        className
+      )}
+      {...props}
+    >
+      <ResponsiveContainer>{children}</ResponsiveContainer>
+    </div>
+  )
+}
+
+const ChartTooltip = RechartsTooltip
+const ChartLegend = RechartsLegend
+
+/**
+ * Recharts clones the element passed as `content` and injects its own internal
+ * props (`iconSize`, `verticalAlign`, `chartWidth`, `itemSorter`, …). Those are
+ * not valid DOM attributes, so forward only what a presentational element can
+ * legitimately receive.
+ */
+function forwardableDomProps(props: Record<string, unknown>) {
+  return Object.fromEntries(
+    Object.entries(props).filter(
+      ([key]) =>
+        key === "id" ||
+        key === "role" ||
+        key === "style" ||
+        key === "tabIndex" ||
+        key.startsWith("aria-") ||
+        key.startsWith("data-")
+    )
+  )
+}
+
+function ChartTooltipContent({
+  active,
+  className,
+  hideLabel = false,
+  label,
+  payload,
+  ...props
+}: ChartTooltipContentProps) {
+  if (!active || !payload?.length) return null
+
+  return (
+    <div
+      data-slot="chart-tooltip"
+      className={cn(
+        "grid min-w-[var(--bh-space-17xl-288)] gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xl-12)] 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-default)] shadow-[var(--shadow-popover)]",
+        className
+      )}
+      {...forwardableDomProps(props)}
+    >
+      {!hideLabel && label ? (
+        <div className="font-[var(--bh-text-body-xs-medium-font-weight)]">
+          {label}
+        </div>
+      ) : null}
+      <div className="grid gap-[var(--bh-space-xs-4)]">
+        {payload.map((item, index) => (
+          <div
+            key={`${String(item.dataKey ?? item.name)}-${index}`}
+            className="flex items-center gap-[var(--bh-space-md-8)]"
+          >
+            <span
+              aria-hidden="true"
+              className="size-[var(--bh-space-md-8)] shrink-0 rounded-[var(--bh-radius-full)]"
+              style={{ backgroundColor: item.color }}
+            />
+            <span className="min-w-0 flex-1 text-[var(--bh-content-subtle)]">
+              {item.name}
+            </span>
+            <span className="font-[var(--bh-text-body-xs-medium-font-weight)]">
+              {item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ChartLegendContent({
+  className,
+  payload,
+  ...props
+}: ChartLegendContentProps) {
+  if (!payload?.length) return null
+
+  return (
+    <div
+      data-slot="chart-legend"
+      className={cn("flex flex-wrap items-center justify-center gap-[var(--bh-space-3xl-16)]", className)}
+      {...forwardableDomProps(props)}
+    >
+      {payload.map((item, index) => (
+        <div
+          key={`${String(item.dataKey ?? item.name)}-${index}`}
+          className="inline-flex items-center gap-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-subtle)]"
+        >
+          <span
+            aria-hidden="true"
+            className="size-[var(--bh-space-md-8)] rounded-[var(--bh-radius-full)]"
+            style={{ backgroundColor: item.color }}
+          />
+          {item.value ?? item.name}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function getChartStyle(config?: ChartConfig): React.CSSProperties {
+  if (!config) return {}
+
+  return Object.entries(config).reduce<React.CSSProperties>(
+    (style, [key, value], index) => ({
+      ...style,
+      [`--color-${key}`]:
+        value.color ??
+        `var(${chartCategoricalTokens[index % chartCategoricalTokens.length]})`,
+    }),
+    {}
+  )
+}
+
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+}
+export type {
+  ChartConfig,
+  ChartContainerProps,
+  ChartLegendContentProps,
+  ChartLegendProps,
+  ChartPayloadItem,
+  ChartTooltipContentProps,
+  ChartTooltipProps,
+}

package/registry/components/checkbox.tsx

@@ -63,13 +63,13 @@ const Checkbox = React.forwardRef<
           aria-hidden="true"
           className="size-[var(--bh-checkbox-icon-size)] group-data-[state=indeterminate]/checkbox:hidden"
           focusable="false"
-          strokeWidth={3}
+          strokeWidth="var(--bh-icon-stroke-300)"
         />
         <MinusIcon
           aria-hidden="true"
           className="hidden size-[var(--bh-checkbox-icon-size)] group-data-[state=indeterminate]/checkbox:block"
           focusable="false"
-          strokeWidth={3}
+          strokeWidth="var(--bh-icon-stroke-300)"
         />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
@@ -231,7 +231,7 @@ function CheckboxCardIndicator({
           aria-hidden="true"
           className="absolute top-1/2 left-1/2 size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 text-[var(--bh-content-on-color)]"
           focusable="false"
-          strokeWidth={3}
+          strokeWidth="var(--bh-icon-stroke-300)"
         />
       ) : null}
     </span>

package/registry/components/collapsible.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type CollapsibleProps = React.ComponentProps<typeof CollapsiblePrimitive.Root>
+type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<
+  typeof CollapsiblePrimitive.Trigger
+>
+type CollapsibleContentProps = React.ComponentPropsWithoutRef<
+  typeof CollapsiblePrimitive.Content
+>
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Trigger>,
+  CollapsibleTriggerProps
+>(function CollapsibleTrigger({ children, className, ...props }, ref) {
+  return (
+    <CollapsiblePrimitive.Trigger
+      data-slot="collapsible-trigger"
+      ref={ref}
+      className={cn(
+        "group/collapsible-trigger flex w-full items-center justify-between gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-xl-12)] py-[var(--bh-space-lg-10)] text-start",
+        "text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)]",
+        "outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--shadow-button-focus)]",
+        className
+      )}
+      {...props}
+    >
+      <span className="min-w-0 flex-1" dir="auto">
+        {children}
+      </span>
+      <ChevronDownIcon
+        aria-hidden="true"
+        className="size-[var(--bh-space-3xl-16)] shrink-0 text-[var(--bh-content-subtle)] transition-transform group-data-[state=open]/collapsible-trigger:rotate-180"
+        strokeWidth="var(--bh-icon-stroke-200)"
+      />
+    </CollapsiblePrimitive.Trigger>
+  )
+})
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Content>,
+  CollapsibleContentProps
+>(function CollapsibleContent({ className, ...props }, ref) {
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="collapsible-content"
+      ref={ref}
+      className={cn(
+        "overflow-hidden px-[var(--bh-space-xl-12)] pb-[var(--bh-space-xl-12)] 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-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger }
+export type {
+  CollapsibleContentProps,
+  CollapsibleProps,
+  CollapsibleTriggerProps,
+}

package/registry/components/command.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type CommandProps = React.ComponentProps<typeof CommandPrimitive>
+type CommandInputProps = React.ComponentProps<typeof CommandPrimitive.Input>
+type CommandListProps = React.ComponentProps<typeof CommandPrimitive.List>
+type CommandEmptyProps = React.ComponentProps<typeof CommandPrimitive.Empty>
+type CommandGroupProps = React.ComponentProps<typeof CommandPrimitive.Group>
+type CommandItemProps = React.ComponentProps<typeof CommandPrimitive.Item>
+type CommandSeparatorProps = React.ComponentProps<
+  typeof CommandPrimitive.Separator
+>
+type CommandShortcutProps = React.ComponentProps<"span">
+
+const Command = React.forwardRef<HTMLDivElement, CommandProps>(function Command(
+  { className, ...props },
+  ref
+) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      ref={ref}
+      className={cn(
+        "flex w-full max-w-[var(--bh-space-19xl-384)] flex-col overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-menu)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
+  function CommandInput({ className, placeholder = "Search or type a command", ...props }, ref) {
+    return (
+      <div
+        data-slot="command-input-wrapper"
+        className="flex h-[var(--bh-space-8xl-48)] items-center gap-[var(--bh-space-md-8)] border-b border-[var(--bh-border-subtle)] px-[var(--bh-space-3xl-16)]"
+      >
+        <SearchIcon
+          aria-hidden="true"
+          className="size-[var(--bh-space-5xl-24)] shrink-0 text-[var(--bh-content-muted)]"
+          strokeWidth="var(--bh-icon-stroke-200)"
+        />
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          ref={ref}
+          placeholder={placeholder}
+          className={cn(
+            "h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none placeholder:text-[var(--bh-content-muted)] disabled:cursor-not-allowed disabled:text-[var(--bh-content-disabled)]",
+            className
+          )}
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+
+const CommandList = React.forwardRef<HTMLDivElement, CommandListProps>(
+  function CommandList({ className, ...props }, ref) {
+    return (
+      <CommandPrimitive.List
+        data-slot="command-list"
+        ref={ref}
+        className={cn(
+          "max-h-[calc(var(--bh-space-19xl-384)+var(--bh-space-8xl-48))] overflow-y-auto overflow-x-hidden p-[var(--bh-space-md-8)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CommandEmpty = React.forwardRef<HTMLDivElement, CommandEmptyProps>(
+  function CommandEmpty({ className, ...props }, ref) {
+    return (
+      <CommandPrimitive.Empty
+        data-slot="command-empty"
+        ref={ref}
+        className={cn(
+          "py-[var(--bh-space-8xl-48)] text-center 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-subtle)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
+  function CommandGroup({ className, ...props }, ref) {
+    return (
+      <CommandPrimitive.Group
+        data-slot="command-group"
+        ref={ref}
+        className={cn(
+          "overflow-hidden p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] [&_[cmdk-group-heading]]:px-[var(--bh-space-md-8)] [&_[cmdk-group-heading]]:py-[var(--bh-space-sm-6)] [&_[cmdk-group-heading]]:text-[length:var(--bh-text-body-xs-medium-font-size)] [&_[cmdk-group-heading]]:font-[var(--bh-text-body-xs-medium-font-weight)] [&_[cmdk-group-heading]]:leading-[var(--bh-text-body-xs-medium-line-height)] [&_[cmdk-group-heading]]:tracking-[var(--bh-text-body-xs-medium-letter-spacing)] [&_[cmdk-group-heading]]:text-[var(--bh-content-muted)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
+  function CommandItem({ className, ...props }, ref) {
+    return (
+      <CommandPrimitive.Item
+        data-slot="command-item"
+        ref={ref}
+        className={cn(
+          "relative flex min-h-[var(--bh-space-8xl-48)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:text-[var(--bh-content-disabled)] data-[selected=true]:bg-[var(--bh-interactive-ghost-hover)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CommandSeparator = React.forwardRef<
+  HTMLDivElement,
+  CommandSeparatorProps
+>(function CommandSeparator({ className, ...props }, ref) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      ref={ref}
+      className={cn("-mx-[var(--bh-space-md-8)] my-[var(--bh-space-md-8)] h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
+      {...props}
+    />
+  )
+})
+
+function CommandShortcut({ className, ...props }: CommandShortcutProps) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ms-auto 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)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+}
+export type {
+  CommandEmptyProps,
+  CommandGroupProps,
+  CommandInputProps,
+  CommandItemProps,
+  CommandListProps,
+  CommandProps,
+  CommandSeparatorProps,
+  CommandShortcutProps,
+}