banhaten 0.1.2 → 0.1.3

package/registry/components/sheet.tsx

@@ -0,0 +1,305 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type SheetSide = "start" | "end" | "top" | "bottom"
+type SheetSize = "sm" | "default" | "lg"
+
+const sheetContentVariants = cva(
+  [
+    "fixed z-[var(--bh-z-overlay)] flex flex-col overflow-hidden bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)]",
+    "shadow-[var(--shadow-component-default)] outline-none",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  ],
+  {
+    variants: {
+      side: {
+        bottom:
+          "inset-x-0 bottom-0 max-h-[calc(100vh-var(--bh-space-8xl-48))] rounded-t-[var(--bh-radius-2xl-12)] border-t border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
+        end:
+          "inset-y-0 end-0 h-full max-w-[calc(100vw-var(--bh-space-4xl-20))] border-s border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right rtl:data-[state=open]:slide-in-from-left rtl:data-[state=closed]:slide-out-to-left",
+        start:
+          "inset-y-0 start-0 h-full max-w-[calc(100vw-var(--bh-space-4xl-20))] border-e border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left rtl:data-[state=open]:slide-in-from-right rtl:data-[state=closed]:slide-out-to-right",
+        top:
+          "inset-x-0 top-0 max-h-[calc(100vh-var(--bh-space-8xl-48))] rounded-b-[var(--bh-radius-2xl-12)] border-b border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+      },
+      size: {
+        default: "",
+        lg: "",
+        sm: "",
+      },
+    },
+    compoundVariants: [
+      {
+        side: ["start", "end"],
+        size: "sm",
+        className:
+          "w-[min(var(--bh-space-19xl-384),calc(100vw-var(--bh-space-4xl-20)))]",
+      },
+      {
+        side: ["start", "end"],
+        size: "default",
+        className:
+          "w-[min(calc(var(--bh-space-19xl-384)+var(--bh-space-9xl-64)),calc(100vw-var(--bh-space-4xl-20)))]",
+      },
+      {
+        side: ["start", "end"],
+        size: "lg",
+        className:
+          "w-[min(calc(var(--bh-space-19xl-384)+var(--bh-space-12xl-128)),calc(100vw-var(--bh-space-4xl-20)))]",
+      },
+      {
+        side: ["top", "bottom"],
+        size: "sm",
+        className: "min-h-[var(--bh-space-12xl-128)]",
+      },
+      {
+        side: ["top", "bottom"],
+        size: "default",
+        className: "min-h-[var(--bh-space-16xl-256)]",
+      },
+      {
+        side: ["top", "bottom"],
+        size: "lg",
+        className: "min-h-[var(--bh-space-17xl-288)]",
+      },
+    ],
+    defaultVariants: {
+      side: "end",
+      size: "default",
+    },
+  }
+)
+
+type SheetRootProps = React.ComponentProps<typeof DialogPrimitive.Root>
+type SheetTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>
+type SheetCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>
+type SheetPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>
+type SheetOverlayProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Overlay
+>
+type SheetContentProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> &
+  VariantProps<typeof sheetContentVariants> & {
+    overlayClassName?: string
+    showCloseButton?: boolean
+  }
+type SheetHeaderProps = React.ComponentProps<"header">
+type SheetFooterProps = React.ComponentProps<"footer">
+type SheetBodyProps = React.ComponentProps<"div">
+type SheetTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+type SheetDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Description
+>
+type SheetCloseButtonProps = React.ComponentProps<"button"> & {
+  label?: string
+}
+
+const Sheet = DialogPrimitive.Root
+const SheetTrigger = DialogPrimitive.Trigger
+const SheetClose = DialogPrimitive.Close
+const SheetPortal = DialogPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  SheetOverlayProps
+>(function SheetOverlay({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="sheet-overlay"
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-[var(--bh-z-overlay)] bg-[var(--bh-bg-backdrop)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  SheetContentProps
+>(function SheetContent(
+  {
+    children,
+    className,
+    overlayClassName,
+    showCloseButton = true,
+    side = "end",
+    size = "default",
+    ...props
+  },
+  ref
+) {
+  return (
+    <SheetPortal>
+      <SheetOverlay className={overlayClassName} />
+      <DialogPrimitive.Content
+        data-side={side}
+        data-size={size}
+        data-slot="sheet-content"
+        ref={ref}
+        className={cn(sheetContentVariants({ side, size, className }))}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? <SheetCloseButton /> : null}
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  )
+})
+
+const SheetHeader = React.forwardRef<HTMLElement, SheetHeaderProps>(
+  function SheetHeader({ className, ...props }, ref) {
+    return (
+      <header
+        data-slot="sheet-header"
+        ref={ref}
+        className={cn(
+          "grid gap-[var(--bh-space-xs-4)] px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-lg-10)] pe-[var(--bh-space-9xl-64)] pt-[var(--bh-space-4xl-20)] text-start",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const SheetBody = React.forwardRef<HTMLDivElement, SheetBodyProps>(
+  function SheetBody({ className, ...props }, ref) {
+    return (
+      <div
+        data-slot="sheet-body"
+        ref={ref}
+        className={cn(
+          "min-h-0 flex-1 overflow-auto px-[var(--bh-space-4xl-20)] py-[var(--bh-space-lg-10)] text-start",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const SheetFooter = React.forwardRef<HTMLElement, SheetFooterProps>(
+  function SheetFooter({ className, ...props }, ref) {
+    return (
+      <footer
+        data-slot="sheet-footer"
+        ref={ref}
+        className={cn(
+          "flex shrink-0 flex-wrap items-center justify-end gap-[var(--bh-space-md-8)] border-t border-[var(--bh-border-subtle)] px-[var(--bh-space-4xl-20)] py-[var(--bh-space-3xl-16)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  SheetTitleProps
+>(function SheetTitle({ className, dir = "auto", ...props }, ref) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="sheet-title"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "m-0 text-[length:var(--bh-text-heading-sm-semibold-font-size)] font-[var(--bh-text-heading-sm-semibold-font-weight)] leading-[var(--bh-text-heading-sm-semibold-line-height)] tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)] text-[var(--bh-content-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  SheetDescriptionProps
+>(function SheetDescription({ className, dir = "auto", ...props }, ref) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="sheet-description"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "m-0 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 SheetCloseButton = React.forwardRef<
+  HTMLButtonElement,
+  SheetCloseButtonProps
+>(function SheetCloseButton(
+  { children, className, label = "Close sheet", type = "button", ...props },
+  ref
+) {
+  return (
+    <SheetClose asChild>
+      <button
+        aria-label={label}
+        data-slot="sheet-close"
+        ref={ref}
+        type={type}
+        className={cn(
+          "absolute end-[var(--bh-space-3xl-16)] top-[var(--bh-space-3xl-16)] inline-flex size-[var(--bh-space-6xl-32)] items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)]",
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <XIcon
+            aria-hidden="true"
+            className="size-[var(--bh-space-5xl-24)]"
+            strokeWidth={2}
+          />
+        )}
+      </button>
+    </SheetClose>
+  )
+})
+
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetCloseButton,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  sheetContentVariants,
+}
+export type {
+  SheetBodyProps,
+  SheetCloseButtonProps,
+  SheetCloseProps,
+  SheetContentProps,
+  SheetDescriptionProps,
+  SheetFooterProps,
+  SheetHeaderProps,
+  SheetOverlayProps,
+  SheetPortalProps,
+  SheetRootProps,
+  SheetSide,
+  SheetSize,
+  SheetTitleProps,
+  SheetTriggerProps,
+}

package/registry/components/sidebar.tsx

@@ -0,0 +1,352 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { PanelLeftIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type SidebarContextValue = {
+  collapsed: boolean
+  dir?: "ltr" | "rtl"
+  setCollapsed: (collapsed: boolean) => void
+  toggle: () => void
+}
+
+type SidebarProviderProps = React.ComponentProps<"div"> & {
+  collapsed?: boolean
+  defaultCollapsed?: boolean
+  dir?: "ltr" | "rtl"
+  onCollapsedChange?: (collapsed: boolean) => void
+}
+type SidebarProps = React.ComponentProps<"aside"> & {
+  side?: "start" | "end"
+}
+type SidebarSectionProps = React.ComponentProps<"div">
+type SidebarGroupLabelProps = React.ComponentProps<"div">
+type SidebarMenuProps = React.ComponentProps<"ul">
+type SidebarMenuItemProps = React.ComponentProps<"li">
+type SidebarMenuButtonProps = React.ComponentProps<"button"> & {
+  active?: boolean
+  asChild?: boolean
+  icon?: React.ReactNode
+}
+type SidebarToggleProps = React.ComponentProps<"button">
+type SidebarTriggerProps = SidebarToggleProps
+type SidebarRailProps = React.ComponentProps<"button">
+type SidebarInsetProps = React.ComponentProps<"main">
+
+const SidebarContext = React.createContext<SidebarContextValue | null>(null)
+
+function SidebarProvider({
+  children,
+  className,
+  collapsed,
+  defaultCollapsed = false,
+  dir,
+  onCollapsedChange,
+  ...props
+}: SidebarProviderProps) {
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] =
+    React.useState(defaultCollapsed)
+  const isControlled = collapsed !== undefined
+  const resolvedCollapsed = collapsed ?? uncontrolledCollapsed
+
+  const setCollapsed = React.useCallback(
+    (nextCollapsed: boolean) => {
+      if (!isControlled) {
+        setUncontrolledCollapsed(nextCollapsed)
+      }
+      onCollapsedChange?.(nextCollapsed)
+    },
+    [isControlled, onCollapsedChange]
+  )
+
+  const context = React.useMemo<SidebarContextValue>(
+    () => ({
+      collapsed: resolvedCollapsed,
+      dir,
+      setCollapsed,
+      toggle: () => setCollapsed(!resolvedCollapsed),
+    }),
+    [dir, resolvedCollapsed, setCollapsed]
+  )
+
+  return (
+    <SidebarContext.Provider value={context}>
+      <div
+        data-collapsed={resolvedCollapsed ? "true" : undefined}
+        data-slot="sidebar-provider"
+        dir={dir}
+        className={cn("min-w-0", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(function Sidebar(
+  { className, side = "start", ...props },
+  ref
+) {
+  const { collapsed, dir } = useSidebarContext()
+
+  return (
+    <aside
+      data-collapsed={collapsed ? "true" : undefined}
+      data-side={side}
+      data-slot="sidebar"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "group/sidebar flex h-full min-h-[var(--bh-space-19xl-384)] w-[var(--bh-sidebar-width)] max-w-full shrink-0 flex-col overflow-hidden bg-[var(--bh-sidebar-bg)] text-[var(--bh-content-default)] shadow-[var(--shadow-sidebar)] transition-[width,background-color]",
+        "data-[collapsed=true]:w-[var(--bh-sidebar-width-collapsed)] data-[collapsed=true]:bg-[var(--bh-sidebar-bg-collapsed)]",
+        side === "end" && "ms-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+function SidebarHeader({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      className={cn(
+        "flex min-h-[var(--bh-sidebar-item-height)] shrink-0 items-center gap-[var(--bh-sidebar-item-gap)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-xl-12)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarBody({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-body"
+      className={cn(
+        "min-h-0 flex-1 overflow-auto px-[var(--bh-sidebar-padding)] py-[var(--bh-space-xl-12)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      className={cn(
+        "shrink-0 border-t border-[var(--bh-sidebar-border)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-xl-12)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      className={cn("grid gap-[var(--bh-space-md-8)]", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps) {
+  const { collapsed } = useSidebarContext()
+
+  if (collapsed) return null
+
+  return (
+    <div
+      data-slot="sidebar-group-label"
+      dir="auto"
+      className={cn(
+        "px-[var(--bh-sidebar-item-padding-x)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] uppercase 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}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: SidebarMenuProps) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      className={cn("m-0 grid list-none gap-[var(--bh-space-xs-4)] p-0", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      className={cn("min-w-0", className)}
+      {...props}
+    />
+  )
+}
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  SidebarMenuButtonProps
+>(function SidebarMenuButton(
+  { active = false, asChild = false, children, className, icon, ...props },
+  ref
+) {
+  const { collapsed } = useSidebarContext()
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      aria-current={active ? "page" : undefined}
+      data-active={active ? "true" : undefined}
+      data-slot="sidebar-menu-button"
+      ref={ref}
+      className={cn(
+        "flex h-[var(--bh-sidebar-item-height)] w-full min-w-0 items-center gap-[var(--bh-sidebar-item-gap)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-sidebar-item-padding-x)] 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-sidebar-item-content)] outline-none transition-[background-color,box-shadow,color]",
+        "hover:bg-[var(--bh-sidebar-item-bg-hover)] focus-visible:shadow-[var(--shadow-button-focus)] data-[active=true]:bg-[var(--bh-sidebar-item-bg-active)] data-[active=true]:text-[var(--bh-sidebar-item-content-active)]",
+        collapsed && "justify-center px-[var(--bh-space-md-8)]",
+        className
+      )}
+      {...props}
+    >
+      {icon ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-menu-icon"
+          className="inline-flex size-[var(--bh-sidebar-icon-size)] shrink-0 items-center justify-center"
+        >
+          {icon}
+        </span>
+      ) : null}
+      {collapsed ? null : (
+        <span data-slot="sidebar-menu-label" dir="auto" className="min-w-0 flex-1 truncate">
+          {children}
+        </span>
+      )}
+    </Comp>
+  )
+})
+
+const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
+  function SidebarToggle({ children, className, onClick, type = "button", ...props }, ref) {
+    const { collapsed, toggle } = useSidebarContext()
+
+    return (
+      <button
+        aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        aria-pressed={collapsed}
+        data-slot="sidebar-toggle"
+        ref={ref}
+        type={type}
+        className={cn(
+          "inline-flex size-[var(--bh-sidebar-item-height)] items-center justify-center rounded-[var(--bh-radius-lg-8)] text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--shadow-button-focus)]",
+          className
+        )}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) toggle()
+        }}
+        {...props}
+      >
+        {children ?? (
+          <PanelLeftIcon
+            aria-hidden="true"
+            className="size-[var(--bh-space-5xl-24)] rtl:-scale-x-100"
+            strokeWidth={2}
+          />
+        )}
+      </button>
+    )
+  }
+)
+
+const SidebarTrigger = SidebarToggle
+
+const SidebarRail = React.forwardRef<HTMLButtonElement, SidebarRailProps>(
+  function SidebarRail({ className, onClick, type = "button", ...props }, ref) {
+    const { toggle } = useSidebarContext()
+
+    return (
+      <button
+        aria-label="Toggle sidebar"
+        data-slot="sidebar-rail"
+        ref={ref}
+        type={type}
+        className={cn(
+          "absolute inset-y-0 end-[calc(var(--bh-sidebar-rail-width)*-1)] hidden w-[var(--bh-sidebar-rail-width)] cursor-ew-resize bg-transparent outline-none lg:block",
+          className
+        )}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) toggle()
+        }}
+        {...props}
+      />
+    )
+  }
+)
+
+const SidebarInset = React.forwardRef<HTMLElement, SidebarInsetProps>(
+  function SidebarInset({ className, ...props }, ref) {
+    return (
+      <main
+        data-slot="sidebar-inset"
+        ref={ref}
+        className={cn("min-w-0 flex-1", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+function useSidebarContext() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("Sidebar components must be used within SidebarProvider")
+  }
+
+  return context
+}
+
+export {
+  Sidebar,
+  SidebarBody,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  SidebarToggle,
+}
+export type {
+  SidebarGroupLabelProps,
+  SidebarInsetProps,
+  SidebarMenuButtonProps,
+  SidebarMenuItemProps,
+  SidebarMenuProps,
+  SidebarProps,
+  SidebarProviderProps,
+  SidebarRailProps,
+  SidebarTriggerProps,
+  SidebarSectionProps,
+  SidebarToggleProps,
+}