banhaten 0.1.1 → 0.1.3

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,
+}

package/registry/components/skeleton.css

@@ -0,0 +1,57 @@
+[data-slot="skeleton"] {
+  --bh-skeleton-bg: var(--bh-bg-muted);
+  --bh-skeleton-highlight: var(--bh-bg-raised-subtle);
+  --bh-skeleton-duration: 1.4s;
+  --bh-skeleton-radius: var(--bh-radius-md-6);
+  --bh-skeleton-shimmer-width: 62%;
+  --bh-skeleton-width: 100%;
+  --bh-skeleton-height: var(--bh-space-4xl-20);
+}
+
+[data-slot="skeleton"][data-animated="true"]::after {
+  animation: bh-skeleton-shimmer var(--bh-skeleton-duration) ease-in-out infinite;
+  background: linear-gradient(
+    90deg,
+    var(--bh-alpha-alpha-transparent),
+    var(--bh-skeleton-highlight),
+    var(--bh-alpha-alpha-transparent)
+  );
+  content: "";
+  inset-block: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+  position: absolute;
+  transform: translateX(-100%);
+  width: var(--bh-skeleton-shimmer-width);
+}
+
+[dir="rtl"] [data-slot="skeleton"][data-animated="true"]::after,
+[data-slot="skeleton"][dir="rtl"][data-animated="true"]::after {
+  animation-name: bh-skeleton-shimmer-rtl;
+}
+
+@keyframes bh-skeleton-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(200%);
+  }
+}
+
+@keyframes bh-skeleton-shimmer-rtl {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(-200%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="skeleton"][data-animated="true"]::after {
+    animation: none;
+  }
+}