banhaten 0.3.0 → 0.4.0

package/registry/components/tag.tsx

@@ -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/toolbar.tsx

@@ -71,7 +71,7 @@ const toolbarSectionVariants = cva(
 )
 
 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/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/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/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/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,13 +82,19 @@ 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 asChild>
-        <div className="grid min-w-0 flex-1 place-items-center bg-[var(--bh-bg-subtle)] p-[var(--bh-space-4xl-20)] text-sm text-[var(--bh-content-subtle)]">
-          App content
-        </div>
+      <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.