banhaten 0.2.0 → 0.4.0

package/registry/components/social-button.tsx

@@ -116,7 +116,7 @@ const arabicSocialButtonMessages: SocialButtonMessages = {
 }
 
 const socialButtonVariants = cva(
-  "group/social-button relative inline-flex items-center justify-center whitespace-nowrap rounded-[var(--bh-social-button-radius)] bg-[var(--bh-social-button-bg)] text-[var(--bh-social-button-fg)] shadow-[var(--shadow-social-button)] outline-none transition-[background-color,box-shadow,color] [--bh-social-button-current-border:var(--bh-social-button-border)] [--shadow-social-button:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-social-button-current-border,var(--bh-social-button-border,transparent)),var(--shadow-component-default)] rtl:[--bh-social-button-width:var(--bh-social-button-width-rtl)] hover:bg-[var(--bh-social-button-bg-hover)] focus-visible:[--bh-social-button-current-border:var(--bh-social-button-focus-border)] focus-visible:shadow-[var(--shadow-social-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "group/social-button relative inline-flex max-w-full min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-social-button-radius)] bg-[var(--bh-social-button-bg)] text-[var(--bh-social-button-fg)] shadow-[var(--shadow-social-button)] outline-none transition-[background-color,box-shadow,color] [--bh-social-button-current-border:var(--bh-social-button-border)] [--shadow-social-button:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-social-button-current-border,var(--bh-social-button-border,transparent)),var(--shadow-component-default)] hover:bg-[var(--bh-social-button-bg-hover)] focus-visible:[--bh-social-button-current-border:var(--bh-social-button-focus-border)] focus-visible:shadow-[var(--shadow-social-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -184,7 +184,12 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
       ? String(visibleLabel)
       : defaultLabel
   const Comp = asChild ? Slot : "button"
-  const cssVars = getSocialButtonVars(config, selectedVariant, isIcon)
+  const cssVars = getSocialButtonVars(
+    config,
+    selectedVariant,
+    isIcon,
+    resolvedDirection
+  )
   const content = (
     <>
       <SocialButtonIcon platform={platform} />
@@ -192,7 +197,8 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
         <span
           data-slot="social-button-label"
           dir="auto"
-          className="min-w-0 pe-[var(--bh-social-button-label-padding-inline-end)]"
+          title={typeof visibleLabel === "string" ? visibleLabel : undefined}
+          className="min-w-0 overflow-hidden text-ellipsis pe-[var(--bh-social-button-label-padding-inline-end)]"
         >
           {visibleLabel}
         </span>
@@ -238,7 +244,8 @@ function isSimpleLabel(
 function getSocialButtonVars(
   config: SocialPlatformConfig,
   variant: SocialButtonVariant,
-  isIcon: boolean
+  isIcon: boolean,
+  direction: "ltr" | "rtl"
 ) {
   const isSolid = variant === "solid"
   const border = isSolid
@@ -262,7 +269,7 @@ function getSocialButtonVars(
     "--bh-social-button-icon": isSolid ? config.solidIcon : config.outlineIcon,
     "--bh-social-button-width": isIcon
       ? "var(--bh-social-button-height)"
-      : config.width.ltr,
+      : config.width[direction],
     "--bh-social-button-width-rtl": isIcon
       ? "var(--bh-social-button-height)"
       : config.width.rtl,

package/registry/components/table-elements.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type TableRootProps = React.ComponentPropsWithoutRef<"table">
+type TableSectionProps = React.ComponentPropsWithoutRef<"thead">
+type TableBodyProps = React.ComponentPropsWithoutRef<"tbody">
+type TableRowElementProps = React.ComponentPropsWithoutRef<"tr">
+type TableHeadProps = React.ComponentPropsWithoutRef<"th">
+type TableCellProps = React.ComponentPropsWithoutRef<"td">
+type DataTableSurfaceProps = React.ComponentPropsWithoutRef<"div">
+
+const DataTableSurface = React.forwardRef<
+  HTMLDivElement,
+  DataTableSurfaceProps
+>(function DataTableSurface({ className, role = "table", ...props }, ref) {
+  return (
+    <div
+      data-slot="data-table-surface"
+      ref={ref}
+      role={role}
+      className={cn("min-w-0", className)}
+      {...props}
+    />
+  )
+})
+
+const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(
+  function TableRoot({ className, ...props }, ref) {
+    return (
+      <table
+        data-slot="table-root"
+        ref={ref}
+        className={cn("w-full border-collapse text-start", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  TableSectionProps
+>(function TableHeader({ className, ...props }, ref) {
+  return (
+    <thead
+      data-slot="table-header"
+      ref={ref}
+      className={cn("text-start", className)}
+      {...props}
+    />
+  )
+})
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  function TableBody({ className, ...props }, ref) {
+    return (
+      <tbody
+        data-slot="table-body"
+        ref={ref}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableRowElement = React.forwardRef<
+  HTMLTableRowElement,
+  TableRowElementProps
+>(function TableRowElement({ className, ...props }, ref) {
+  return (
+    <tr
+      data-slot="table-row"
+      ref={ref}
+      className={className}
+      {...props}
+    />
+  )
+})
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  function TableHead({ className, scope = "col", ...props }, ref) {
+    return (
+      <th
+        data-slot="table-head"
+        ref={ref}
+        className={cn("text-start", className)}
+        scope={scope}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  function TableCell({ className, ...props }, ref) {
+    return (
+      <td
+        data-slot="table-cell"
+        ref={ref}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+
+export {
+  DataTableSurface,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRowElement,
+}
+export type {
+  DataTableSurfaceProps,
+  TableBodyProps,
+  TableCellProps,
+  TableHeadProps,
+  TableRootProps,
+  TableRowElementProps,
+  TableSectionProps,
+}

package/registry/components/tabs.tsx

@@ -154,7 +154,6 @@ function Tabs({
     defaultValue ??
     normalizedItems[defaultActiveIndex]?.value ??
     normalizedItems[0]?.value
-  const hasPanels = normalizedItems.some((item) => item.content !== undefined)
 
   function handleValueChange(nextValue: string) {
     onValueChange?.(nextValue)
@@ -194,15 +193,11 @@ function Tabs({
           </TabsTrigger>
         ))}
       </TabsList>
-      {hasPanels
-        ? normalizedItems.map((item) =>
-            item.content === undefined ? null : (
-              <TabsContent key={`${item.value}-panel`} value={item.value}>
-                {item.content}
-              </TabsContent>
-            )
-          )
-        : null}
+      {normalizedItems.map((item) => (
+        <TabsContent key={`${item.value}-panel`} value={item.value}>
+          {item.content ?? null}
+        </TabsContent>
+      ))}
       {children}
     </TabsRoot>
   )

package/registry/components/tag.tsx

@@ -348,7 +348,7 @@ function TagAvatar({
     <span
       data-slot="tag-avatar"
       className={cn(
-        "flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-neutral-default)] text-[length:var(--bh-text-body-3xs-semibold-font-size)] font-[var(--bh-text-body-3xs-semibold-font-weight)] leading-[var(--bh-text-body-3xs-semibold-line-height)] text-[var(--bh-content-on-color)]",
+        "flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-neutral-bold)] text-[length:var(--bh-text-body-3xs-semibold-font-size)] font-[var(--bh-text-body-3xs-semibold-font-weight)] leading-[var(--bh-text-body-3xs-semibold-line-height)] text-[var(--bh-content-on-neutral)]",
         className
       )}
       {...props}
@@ -367,7 +367,7 @@ function TagIcon({
     <span
       data-slot="tag-icon"
       className={cn(
-        "flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center text-current [&_svg]:size-[var(--bh-space-4xl-20)] [&_svg]:shrink-0",
+        "flex size-[var(--bh-icon-slot-size-default)] shrink-0 items-center justify-center text-current [&_svg]:size-[var(--bh-icon-size-default)] [&_svg]:shrink-0",
         className
       )}
       {...props}

package/registry/components/toggle.tsx

@@ -78,7 +78,7 @@ const Toggle = React.forwardRef<
     >
       <SwitchPrimitive.Thumb
         data-slot="toggle-thumb"
-        className="pointer-events-none flex size-[var(--bh-toggle-handle-size)] translate-x-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-handle)] text-[var(--bh-content-on-light)] shadow-[var(--shadow-component-default)] transition-[background-color,transform] group-data-[disabled]/toggle:bg-[var(--bh-interactive-switch-handle-disabled)] group-data-[state=checked]/toggle:translate-x-[var(--bh-toggle-offset)] rtl:group-data-[state=checked]/toggle:-translate-x-[var(--bh-toggle-offset)]"
+        className="pointer-events-none flex size-[var(--bh-toggle-handle-size)] translate-x-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-handle)] text-[var(--bh-content-on-light)] shadow-[var(--shadow-md)] transition-[background-color,transform] group-data-[disabled]/toggle:bg-[var(--bh-interactive-switch-handle-disabled)] group-data-[state=checked]/toggle:translate-x-[var(--bh-toggle-offset)] rtl:group-data-[state=checked]/toggle:-translate-x-[var(--bh-toggle-offset)]"
       >
         {showIcon ? (
           <span
@@ -190,7 +190,7 @@ const ToggleField = React.forwardRef<HTMLDivElement, ToggleFieldProps>(
             data-slot="toggle-field-description"
             dir="auto"
             id={descriptionId}
-            className="w-full min-w-0 break-words 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-subtle)] group-data-[disabled=true]/toggle-field:text-[var(--bh-content-disabled)]"
+            className="w-full min-w-0 break-words 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-subtle)]"
           >
             {description}
           </span>

package/registry/components/toolbar.tsx

@@ -39,7 +39,7 @@ const toolbarVariants = cva(
 )
 
 const toolbarSectionVariants = cva(
-  "flex min-w-0 items-center gap-[var(--bh-space-xl-12)]",
+  "flex max-w-full min-w-0 items-center gap-[var(--bh-space-xl-12)]",
   {
     variants: {
       align: {
@@ -49,8 +49,8 @@ const toolbarSectionVariants = cva(
         between: "justify-between",
       },
       grow: {
-        true: "flex-1",
-        false: "shrink-0",
+        true: "flex-[1_1_var(--bh-space-19xl-384)]",
+        false: "flex-[0_1_auto]",
       },
       stack: {
         true: "flex-col items-stretch",
@@ -58,20 +58,20 @@ const toolbarSectionVariants = cva(
       },
       wrap: {
         true: "flex-wrap",
-        false: "",
+        false: "overflow-x-auto",
       },
     },
     defaultVariants: {
       align: "start",
       grow: false,
       stack: false,
-      wrap: false,
+      wrap: true,
     },
   }
 )
 
 const toolbarButtonVariants = cva(
-  "group/toolbar-button inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-control-default)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)] outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:shadow-none aria-invalid:border-[length:var(--bh-border-width-default)] aria-invalid:border-[var(--bh-border-danger-strong)] aria-invalid:shadow-[var(--shadow-button-danger-focus)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[var(--bh-button-icon-size)] [&_svg[data-icon='inline-start']]:ms-[var(--bh-button-icon-offset)] [&_svg[data-icon='inline-end']]:me-[var(--bh-button-icon-offset)] rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
+  "group/toolbar-button inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-control-default)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)] outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:shadow-none aria-invalid:border-[length:var(--bh-border-width-default)] aria-invalid:border-[var(--bh-border-danger-strong)] aria-invalid:shadow-[var(--shadow-button-danger-focus)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[var(--bh-button-icon-size)] [&_svg:not([class*='size-'])]:m-[calc((var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] [&_svg[data-icon='inline-start']]:ms-[calc(var(--bh-button-icon-offset)+(var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] [&_svg[data-icon='inline-end']]:me-[calc(var(--bh-button-icon-offset)+(var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
   {
     variants: {
       variant: {

package/registry/components/tooltip.tsx

@@ -38,7 +38,7 @@ const tooltipContentVariants = cva(
         dark:
           "[--bh-tooltip-bg:var(--bh-bg-always-dark)] [--bh-tooltip-border:transparent] [--bh-tooltip-close-fg:var(--bh-content-on-color)] [--bh-tooltip-fg:var(--bh-content-on-color)] [--bh-tooltip-shadow:none] [--bh-tooltip-shortcut-bg:var(--bh-bg-neutral-soft)] [--bh-tooltip-shortcut-border:var(--bh-border-inverse-subtle)]",
         default:
-          "[--bh-tooltip-bg:var(--bh-bg-raised)] [--bh-tooltip-border:var(--bh-border-subtle)] [--bh-tooltip-close-fg:var(--bh-content-subtle)] [--bh-tooltip-fg:var(--bh-content-default)] [--bh-tooltip-shadow:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-tooltip-border),var(--shadow-component-default)] [--bh-tooltip-shortcut-bg:var(--bh-bg-neutral-subtle)] [--bh-tooltip-shortcut-border:var(--bh-border-subtle)]",
+          "[--bh-tooltip-bg:var(--bh-bg-raised)] [--bh-tooltip-border:var(--bh-border-subtle)] [--bh-tooltip-close-fg:var(--bh-content-subtle)] [--bh-tooltip-fg:var(--bh-content-default)] [--bh-tooltip-shadow:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-tooltip-border),var(--shadow-lg)] [--bh-tooltip-shortcut-bg:var(--bh-bg-neutral-subtle)] [--bh-tooltip-shortcut-border:var(--bh-border-subtle)]",
       },
       size: {
         sm:

package/registry/examples/attribute-demo.tsx

@@ -54,7 +54,7 @@ export function AttributeDemo() {
           </AttributeItem>
           <AttributeItem label="Invoice">
             <span className="inline-flex min-w-0 items-center gap-[var(--bh-space-md-8)]">
-              <PaperclipIcon className="size-[var(--bh-space-4xl-20)] shrink-0 text-[var(--bh-content-muted)]" />
+              <PaperclipIcon className="m-[var(--bh-icon-slot-inset-default)] size-[var(--bh-icon-size-default)] shrink-0 text-[var(--bh-content-muted)]" />
               INV-2024-00123.pdf
             </span>
           </AttributeItem>

package/registry/examples/avatar-demo.tsx

@@ -8,6 +8,7 @@ import {
   AvatarImage,
   AvatarStatus,
 } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
 import { PlusIcon } from "lucide-react"
 
 const avatarUrl = new URL("../assets/avatars/avatar-01.jpg", import.meta.url).href
@@ -84,13 +85,15 @@ export function AvatarDemo() {
           ))}
           <AvatarGroupCount size="md">+10</AvatarGroupCount>
         </AvatarGroup>
-        <Avatar
+        <Button
           aria-label="Add member"
-          className="border border-dashed border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] text-[var(--bh-content-subtle)]"
-          size="md"
+          className="size-[var(--bh-avatar-size-md)] rounded-[var(--bh-radius-full)] border-dashed"
+          size="icon-sm"
+          type="button"
+          variant="outline"
         >
           <PlusIcon aria-hidden="true" className="size-[var(--bh-space-3xl-16)]" />
-        </Avatar>
+        </Button>
       </div>
 
       <div className="flex items-center gap-[var(--bh-space-xl-12)]">

package/registry/examples/command-palette-demo.tsx

@@ -202,7 +202,6 @@ function ToolRow({ item }: { item: ToolItem }) {
           <AvatarIcon
             className={[
               "border border-[var(--bh-border-subtle)]",
-              "[&_svg]:size-[var(--bh-space-4xl-20)]",
               toolToneClassNames[tone],
             ].join(" ")}
             size="lg"

package/registry/examples/expanded/activity-heatmap-demo.tsx

@@ -0,0 +1,29 @@
+import {
+  ActivityHeatmap,
+  type ActivityHeatmapItem,
+  type ActivityHeatmapLevel,
+} from "@/components/ui/expanded/ActivityHeatmap"
+
+const activityItems: ActivityHeatmapItem[] = Array.from(
+  { length: 39 * 7 },
+  (_, index) => {
+    const column = Math.floor(index / 7)
+    const row = index % 7
+    const level = ((column * 11 + row * 7 + column * row * 3) % 5) as ActivityHeatmapLevel
+
+    return {
+      id: `activity-${index}`,
+      label: `Activity level ${level} of 4`,
+      level,
+    }
+  }
+)
+
+export function ActivityHeatmapDemo() {
+  return (
+    <ActivityHeatmap
+      ariaLabel="Weekly activity over the last 39 weeks"
+      items={activityItems}
+    />
+  )
+}

package/registry/examples/expanded/breadcrumbs-demo.tsx

@@ -30,16 +30,16 @@ const rtlBreadcrumbItems: BreadcrumbItem[] = [
 export function BreadcrumbsDemo() {
   return (
     <div className="grid gap-[var(--bh-space-3xl-16)]">
-      <Breadcrumbs aria-label="Breadcrumb" items={breadcrumbItems} overflowLabel="More" />
+      <Breadcrumbs aria-label="Default breadcrumb" items={breadcrumbItems} overflowLabel="More" />
       <Breadcrumbs
-        aria-label="Breadcrumb"
+        aria-label="Raised breadcrumb"
         items={breadcrumbItems}
         overflowLabel="More"
         separator="chevron"
         style="raised"
       />
       <Breadcrumbs
-        aria-label="Breadcrumb"
+        aria-label="Collapsed breadcrumb"
         items={longBreadcrumbItems}
         maxItems={4}
         overflowLabel="More"

package/registry/examples/kbd-demo.tsx

@@ -1,4 +1,4 @@
-import { Kbd } from "@/components/ui/kbd"
+import { Kbd, Shortcut } from "@/components/ui/kbd"
 
 export function KbdDemo() {
   return (
@@ -6,6 +6,7 @@ export function KbdDemo() {
       <Kbd>⌘</Kbd>
       <Kbd>K</Kbd>
       <Kbd size="md">Shift</Kbd>
+      <Shortcut keys={["Mod", "K"]} />
     </div>
   )
 }

package/registry/examples/pagination-demo.tsx

@@ -6,14 +6,14 @@ import {
 export function PaginationDemo() {
   return (
     <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <Pagination />
-      <Pagination variant="ghost" />
+      <Pagination aria-label="Soft numeric pagination" />
+      <Pagination aria-label="Ghost numeric pagination" variant="ghost" />
 
-      <Pagination type="simple" />
-      <Pagination type="summary" />
+      <Pagination aria-label="Simple pagination" type="simple" />
+      <Pagination aria-label="Summary pagination" type="summary" />
 
       <div dir="rtl">
-        <Pagination dir="rtl" messages={arabicPaginationMessages} />
+        <Pagination aria-label="ترقيم الصفحات العربية" dir="rtl" messages={arabicPaginationMessages} />
       </div>
     </div>
   )

package/registry/examples/sidebar-demo.tsx

@@ -1,41 +1,79 @@
-import { HomeIcon, SettingsIcon, UsersIcon } from "lucide-react"
+import {
+  CreditCardIcon,
+  InboxIcon,
+  LayoutGridIcon,
+  SettingsIcon,
+  UsersIcon,
+} from "lucide-react"
 
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import {
   Sidebar,
   SidebarBody,
   SidebarFooter,
+  SidebarFooterUser,
   SidebarGroup,
-  SidebarGroupLabel,
   SidebarHeader,
+  SidebarHeaderWorkspaceSwitch,
   SidebarInset,
   SidebarMenu,
+  SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
   SidebarProvider,
-  SidebarTrigger,
 } from "@/components/ui/sidebar"
 
 export function SidebarDemo() {
   return (
-    <SidebarProvider className="flex h-[var(--bh-space-18xl-320)]" defaultCollapsed={false}>
+    <SidebarProvider className="flex h-[var(--bh-space-19xl-384)]">
       <Sidebar>
         <SidebarHeader>
-          <div className="min-w-0 flex-1 text-sm font-semibold group-data-[collapsed=true]/sidebar:hidden">
-            Banhaten
-          </div>
-          <SidebarTrigger />
+          <SidebarHeaderWorkspaceSwitch
+            image={
+              <span className="grid size-full place-items-center bg-[var(--bh-bg-brand-default)] text-xs font-semibold text-[var(--bh-content-on-brand)]">
+                AC
+              </span>
+            }
+            label="Acme Inc"
+          />
         </SidebarHeader>
         <SidebarBody>
           <SidebarGroup>
-            <SidebarGroupLabel>Workspace</SidebarGroupLabel>
             <SidebarMenu>
               <SidebarMenuItem>
-                <SidebarMenuButton active icon={<HomeIcon />}>
+                <SidebarMenuButton icon={<LayoutGridIcon />}>
                   Overview
                 </SidebarMenuButton>
               </SidebarMenuItem>
               <SidebarMenuItem>
-                <SidebarMenuButton icon={<UsersIcon />}>Members</SidebarMenuButton>
+                <SidebarMenuButton icon={<CreditCardIcon />}>
+                  Transactions
+                </SidebarMenuButton>
+                <SidebarMenuSub>
+                  <SidebarMenuItem>
+                    <SidebarMenuSubButton showLine>
+                      Payments
+                    </SidebarMenuSubButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuSubButton active showLine>
+                      Refunds
+                    </SidebarMenuSubButton>
+                  </SidebarMenuItem>
+                </SidebarMenuSub>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  badge={<SidebarMenuBadge>12</SidebarMenuBadge>}
+                  icon={<InboxIcon />}
+                >
+                  Inbox
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton icon={<UsersIcon />}>Customers</SidebarMenuButton>
               </SidebarMenuItem>
               <SidebarMenuItem>
                 <SidebarMenuButton icon={<SettingsIcon />}>Settings</SidebarMenuButton>
@@ -44,10 +82,18 @@ export function SidebarDemo() {
           </SidebarGroup>
         </SidebarBody>
         <SidebarFooter>
-          <SidebarMenuButton icon={<SettingsIcon />}>Admin</SidebarMenuButton>
+          <SidebarFooterUser
+            avatar={
+              <Avatar aria-label="Olivia Rhye" className="size-full" size="sm">
+                <AvatarFallback size="sm">OR</AvatarFallback>
+              </Avatar>
+            }
+            name="Olivia Rhye"
+            supportText="olivia@acme.com"
+          />
         </SidebarFooter>
       </Sidebar>
-      <SidebarInset className="grid place-items-center bg-[var(--bh-bg-subtle)] p-[var(--bh-space-4xl-20)] text-sm text-[var(--bh-content-subtle)]">
+      <SidebarInset className="grid min-w-0 place-items-center bg-[var(--bh-bg-subtle)] p-[var(--bh-space-4xl-20)] text-sm text-[var(--bh-content-subtle)]">
         App content
       </SidebarInset>
     </SidebarProvider>

package/registry/guidance/USAGE.md

@@ -15,7 +15,7 @@ This project uses the Banhaten design system. Treat the installed component API
 - Do not align Banhaten controls with raw height, padding, radius, or font-size utilities. Width and responsive layout utilities are allowed.
 - Use `DatePicker` or `DateRangePicker` for dates. Do not simulate calendar fields with `Input` or native date inputs.
 - Pass explicit `leadingIcon` and `trailingIcon` nodes. Use `showAtSign` or `showInfo` only for those exact semantic affordances. The legacy `hasLeadingIcon` and `hasInformationIcon` flags are deprecated.
-- Use `shortcutKeys={["Mod", "K"]}` or `KbdShortcut` for shortcuts. Never hard-code a single Command glyph for every platform.
+- Use `shortcutKeys={["Mod", "K"]}` on search inputs, `Shortcut` for one compact combined hint, or `KbdShortcut` when each physical key needs its own keycap. Never hard-code a single Command glyph for every platform.
 - Use `SegmentedControl` for small mutually exclusive view, density, period, or numeric choices. Do not rebuild joined numeric buttons locally.
 - Use functional `Select` for option menus. `ToolbarSelect` is only a trigger-shaped toolbar primitive.
 - Preserve inherited `dir`; use logical spacing and alignment utilities for RTL-safe composition.