banhaten 0.1.2 → 0.1.3

package/registry/components/carousel.tsx

@@ -0,0 +1,234 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+type CarouselOrientation = "horizontal" | "vertical"
+
+type CarouselProps = React.ComponentProps<"div"> & {
+  opts?: CarouselOptions
+  orientation?: CarouselOrientation
+  plugins?: CarouselPlugin
+  setApi?: (api: CarouselApi) => void
+}
+type CarouselContentProps = React.ComponentProps<"div">
+type CarouselItemProps = React.ComponentProps<"div">
+type CarouselButtonProps = React.ComponentProps<typeof Button>
+
+type CarouselContextValue = {
+  api: CarouselApi
+  canScrollNext: boolean
+  canScrollPrev: boolean
+  orientation: CarouselOrientation
+  scrollNext: () => void
+  scrollPrev: () => void
+}
+
+const CarouselContext = React.createContext<CarouselContextValue | null>(null)
+
+const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
+  function Carousel(
+    {
+      children,
+      className,
+      opts,
+      orientation = "horizontal",
+      plugins,
+      setApi,
+      ...props
+    },
+    ref
+  ) {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((nextApi: CarouselApi) => {
+      if (!nextApi) return
+      setCanScrollPrev(nextApi.canScrollPrev())
+      setCanScrollNext(nextApi.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api])
+    const scrollNext = React.useCallback(() => api?.scrollNext(), [api])
+
+    React.useEffect(() => {
+      if (!api) return
+      setApi?.(api)
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api.off("select", onSelect)
+      }
+    }, [api, onSelect, setApi])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          api,
+          canScrollNext,
+          canScrollPrev,
+          orientation,
+          scrollNext,
+          scrollPrev,
+        }}
+      >
+        <div
+          data-orientation={orientation}
+          data-slot="carousel"
+          ref={ref}
+          role="region"
+          className={cn("relative", className)}
+          {...props}
+        >
+          <div ref={carouselRef} className="overflow-hidden">
+            {children}
+          </div>
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+
+const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(
+  function CarouselContent({ className, ...props }, ref) {
+    const { orientation } = useCarousel()
+
+    return (
+      <div
+        data-slot="carousel-content"
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal"
+            ? "-ms-[var(--bh-space-3xl-16)]"
+            : "-mt-[var(--bh-space-3xl-16)] flex-col",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
+  function CarouselItem({ className, ...props }, ref) {
+    const { orientation } = useCarousel()
+
+    return (
+      <div
+        data-slot="carousel-item"
+        ref={ref}
+        role="group"
+        className={cn(
+          "min-w-0 shrink-0 grow-0 basis-full",
+          orientation === "horizontal"
+            ? "ps-[var(--bh-space-3xl-16)]"
+            : "pt-[var(--bh-space-3xl-16)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, CarouselButtonProps>(
+  function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }, ref) {
+    const { canScrollPrev, orientation, scrollPrev } = useCarousel()
+
+    return (
+      <Button
+        aria-label="Previous slide"
+        className={cn(
+          "absolute size-[var(--bh-space-7xl-40)] rounded-[var(--bh-radius-full)]",
+          orientation === "horizontal"
+            ? "start-[calc(var(--bh-space-8xl-48)*-1)] top-1/2 -translate-y-1/2"
+            : "start-1/2 top-[calc(var(--bh-space-8xl-48)*-1)] -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        ref={ref}
+        size={size}
+        type="button"
+        variant={variant}
+        {...props}
+      >
+        <ArrowLeftIcon className="size-[var(--bh-space-3xl-16)] rtl:-scale-x-100" />
+      </Button>
+    )
+  }
+)
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, CarouselButtonProps>(
+  function CarouselNext({ className, variant = "outline", size = "icon", ...props }, ref) {
+    const { canScrollNext, orientation, scrollNext } = useCarousel()
+
+    return (
+      <Button
+        aria-label="Next slide"
+        className={cn(
+          "absolute size-[var(--bh-space-7xl-40)] rounded-[var(--bh-radius-full)]",
+          orientation === "horizontal"
+            ? "end-[calc(var(--bh-space-8xl-48)*-1)] top-1/2 -translate-y-1/2"
+            : "bottom-[calc(var(--bh-space-8xl-48)*-1)] start-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        ref={ref}
+        size={size}
+        type="button"
+        variant={variant}
+        {...props}
+      >
+        <ArrowRightIcon className="size-[var(--bh-space-3xl-16)] rtl:-scale-x-100" />
+      </Button>
+    )
+  }
+)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+  if (!context) {
+    throw new Error("Carousel parts must be used within Carousel")
+  }
+  return context
+}
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+}
+export type {
+  CarouselApi,
+  CarouselButtonProps,
+  CarouselContentProps,
+  CarouselItemProps,
+  CarouselOptions,
+  CarouselOrientation,
+  CarouselPlugin,
+  CarouselProps,
+}

package/registry/components/chart.tsx

@@ -0,0 +1,170 @@
+"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[]
+}
+
+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
+
+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
+      )}
+      {...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)}
+      {...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(--bh-chart-${(index % 5) + 1})`,
+    }),
+    {}
+  )
+}
+
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+}
+export type {
+  ChartConfig,
+  ChartContainerProps,
+  ChartLegendContentProps,
+  ChartLegendProps,
+  ChartPayloadItem,
+  ChartTooltipContentProps,
+  ChartTooltipProps,
+}

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={2}
+      />
+    </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={2}
+        />
+        <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,
+}