banhaten 0.1.1 → 0.1.2

package/registry/components/tooltip.tsx

@@ -24,6 +24,8 @@ const defaultTooltipSupportText =
 // Radix sideOffset requires numbers; these mirror the tooltip spacing aliases.
 const TOOLTIP_POINTER_SIDE_OFFSET_PX = 7
 const TOOLTIP_POINTERLESS_SIDE_OFFSET_PX = 6
+// Radix collisionPadding requires a number; this mirrors --bh-space-md-8.
+const TOOLTIP_COLLISION_PADDING_PX = 8
 
 const tooltipContentVariants = cva(
   [
@@ -87,6 +89,7 @@ const TooltipContent = React.forwardRef<
     children,
     className,
     closeLabel,
+    collisionPadding = TOOLTIP_COLLISION_PADDING_PX,
     onCloseClick,
     pointerPosition = "top-left",
     shortcut,
@@ -127,6 +130,7 @@ const TooltipContent = React.forwardRef<
         ref={ref}
         side={side ?? placement.side}
         align={align ?? placement.align}
+        collisionPadding={collisionPadding}
         sideOffset={
           sideOffset ??
           (shouldShowPointer

package/registry/examples/autocomplete-demo.tsx

@@ -0,0 +1,109 @@
+import { Autocomplete } from "@/components/ui/autocomplete"
+
+const peopleOptions = [
+  {
+    value: "ahmed",
+    label: "Ahmed Galal",
+    addonText: "Design system",
+    itemType: "avatar" as const,
+    keywords: ["foundations", "tokens"],
+  },
+  {
+    value: "nora",
+    label: "Nora Ali",
+    addonText: "Product",
+    itemType: "avatar" as const,
+    keywords: ["roadmap", "research"],
+  },
+  {
+    value: "layla",
+    label: "Layla Hassan",
+    addonText: "Engineering",
+    itemType: "avatar" as const,
+    keywords: ["frontend", "platform"],
+  },
+  {
+    value: "omar",
+    label: "Omar Saleh",
+    addonText: "Unavailable",
+    itemType: "avatar" as const,
+    disabled: true,
+  },
+]
+
+const projectOptions = [
+  { value: "tokens", label: "Token audit", addonText: "In review", itemType: "dot" as const },
+  { value: "inputs", label: "Input system", addonText: "Ready", itemType: "dot" as const },
+  { value: "tables", label: "Table promotion", addonText: "Planned", itemType: "dot" as const },
+  { value: "forms", label: "Form patterns", addonText: "Discovery", itemType: "dot" as const },
+]
+
+const rtlOptions = [
+  {
+    value: "ahmed",
+    label: "أحمد جلال",
+    addonText: "النظام",
+    itemType: "avatar" as const,
+  },
+  {
+    value: "nora",
+    label: "نورا علي",
+    addonText: "المنتج",
+    itemType: "avatar" as const,
+  },
+  {
+    value: "layla",
+    label: "ليلى حسن",
+    addonText: "الهندسة",
+    itemType: "avatar" as const,
+  },
+]
+
+export function AutocompleteDemo() {
+  return (
+    <div className="grid w-full gap-5 lg:grid-cols-2">
+      <div className="grid min-w-0 content-start gap-5">
+        <Autocomplete
+          className="mb-[var(--bh-space-13xl-160)]"
+          defaultOpen
+          defaultValue="ahmed"
+          helperText="Search by name, team, or keyword."
+          label="Owner"
+          options={peopleOptions}
+          placeholder="Search people"
+        />
+
+        <Autocomplete
+          defaultValue={["tokens", "inputs"]}
+          helperText="Selected values render with the Tag component."
+          label="Related work"
+          options={projectOptions}
+          placeholder="Add projects"
+          selectionMode="multiple"
+        />
+      </div>
+
+      <div className="grid min-w-0 content-start gap-5">
+        <Autocomplete
+          label="Project"
+          options={projectOptions}
+          placeholder="Search projects"
+          variant="soft"
+        />
+
+        <div dir="rtl" className="min-w-0">
+          <Autocomplete
+            className="pb-[var(--bh-space-13xl-160)] lg:pb-0"
+            defaultOpen
+            defaultValue="nora"
+            dir="rtl"
+            helperText="ابحث بالاسم أو الفريق."
+            label="المالك"
+            options={rtlOptions}
+            placeholder="ابحث عن شخص"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/examples/avatar-demo.tsx

@@ -1,73 +1,128 @@
-import { PlusIcon } from "lucide-react"
-
 import {
   Avatar,
-  AvatarBadge,
+  AvatarAction,
   AvatarFallback,
   AvatarGroup,
   AvatarGroupCount,
+  AvatarIcon,
   AvatarImage,
+  AvatarStatus,
 } from "@/components/ui/avatar"
+import { PlusIcon } from "lucide-react"
 
 const avatarUrl = new URL("../assets/avatars/avatar-01.jpg", import.meta.url).href
 
+const statusColumns = [
+  "available",
+  "available",
+  "busy",
+  "away",
+  "blocked",
+] as const
+
+const secondaryStatusColumns = [
+  "offline",
+  "available",
+  "busy",
+  "away",
+  "blocked",
+] as const
+
 export function AvatarDemo() {
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-wrap items-center gap-4">
-        <Avatar>
+    <div className="flex flex-col gap-7">
+      <div className="grid w-fit grid-cols-5 gap-x-4 gap-y-4">
+        {statusColumns.map((status, index) => (
+          <Avatar key={`icon-${status}-${index}`} size="2xl">
+            <AvatarIcon />
+            {index === 0 ? <AvatarAction type="edit" size="medium" /> : null}
+            <AvatarStatus status={status} size="small" />
+          </Avatar>
+        ))}
+
+        {secondaryStatusColumns.map((status) => (
+          <Avatar key={`initials-${status}`} size="2xl">
+            <AvatarFallback>AG</AvatarFallback>
+            <AvatarStatus status={status} size="small" />
+          </Avatar>
+        ))}
+
+        {secondaryStatusColumns.map((status) => (
+          <Avatar key={`image-${status}`} size="2xl">
+            <AvatarImage src={avatarUrl} alt="Profile portrait" />
+            <AvatarFallback>AG</AvatarFallback>
+            <AvatarStatus status={status} size="small" />
+          </Avatar>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-5 ps-7">
+        <Avatar size="2xl">
           <AvatarImage src={avatarUrl} alt="Profile portrait" />
-          <AvatarFallback>CN</AvatarFallback>
+          <AvatarFallback>AG</AvatarFallback>
+          <AvatarAction type="edit" size="medium" />
         </Avatar>
-        <Avatar>
-          <AvatarFallback>ER</AvatarFallback>
+        <Avatar size="2xl">
+          <AvatarImage src={avatarUrl} alt="Profile portrait" />
+          <AvatarFallback>AG</AvatarFallback>
+          <AvatarAction type="remove" size="medium" />
         </Avatar>
-        <Avatar>
-          <AvatarImage src="/missing-avatar.png" alt="Missing image" />
-          <AvatarFallback>LR</AvatarFallback>
+        <Avatar size="2xl">
+          <AvatarImage src={avatarUrl} alt="Profile portrait" />
+          <AvatarFallback>AG</AvatarFallback>
+          <AvatarAction type="verified" size="medium" />
         </Avatar>
       </div>
 
-      <div className="flex flex-wrap items-center gap-4">
-        <Avatar>
-          <AvatarImage src={avatarUrl} alt="Profile portrait" />
-          <AvatarFallback>CN</AvatarFallback>
-          <AvatarBadge />
-        </Avatar>
-        <Avatar>
-          <AvatarFallback>PP</AvatarFallback>
-          <AvatarBadge className="size-5 bg-success">
-            <PlusIcon className="size-3" />
-          </AvatarBadge>
+      <div className="flex items-center gap-3">
+        <AvatarGroup>
+          {Array.from({ length: 7 }).map((_, index) => (
+            <Avatar key={index} size="md">
+              <AvatarImage src={avatarUrl} alt="" />
+              <AvatarFallback>AG</AvatarFallback>
+            </Avatar>
+          ))}
+          <AvatarGroupCount size="md">+10</AvatarGroupCount>
+        </AvatarGroup>
+        <Avatar
+          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"
+        >
+          <PlusIcon aria-hidden="true" className="size-4" />
         </Avatar>
       </div>
 
-      <AvatarGroup>
-        <Avatar>
-          <AvatarFallback>CN</AvatarFallback>
+      <div className="flex items-center gap-3">
+        <Avatar size="xl">
+          <AvatarImage src={avatarUrl} alt="John Doe" />
+          <AvatarFallback>JD</AvatarFallback>
+          <AvatarStatus status="available" size="small" />
         </Avatar>
-        <Avatar>
-          <AvatarFallback>LR</AvatarFallback>
-        </Avatar>
-        <Avatar>
-          <AvatarFallback>ER</AvatarFallback>
-        </Avatar>
-        <AvatarGroupCount>+3</AvatarGroupCount>
-      </AvatarGroup>
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-[var(--bh-content-default)]">
+            John Doe
+          </p>
+          <p className="text-sm text-[var(--bh-content-subtle)]">
+            johndoe@example.com
+          </p>
+        </div>
+      </div>
 
-      <div dir="rtl">
-        <AvatarGroup>
-          <Avatar>
-            <AvatarFallback>ح</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>ن</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>م</AvatarFallback>
-          </Avatar>
-          <AvatarGroupCount>+٣</AvatarGroupCount>
-        </AvatarGroup>
+      <div className="flex items-center gap-3">
+        <Avatar size="md">
+          <AvatarImage src={avatarUrl} alt="John Doe" />
+          <AvatarFallback>JD</AvatarFallback>
+          <AvatarStatus status="available" size="tiny" />
+        </Avatar>
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-[var(--bh-content-default)]">
+            John Doe
+          </p>
+          <p className="text-xs text-[var(--bh-content-subtle)]">
+            johndoe@example.com
+          </p>
+        </div>
       </div>
     </div>
   )

package/registry/examples/badge-demo.tsx

@@ -2,6 +2,7 @@ import {
   ArrowUpRightIcon,
   BadgeCheckIcon,
   BookmarkIcon,
+  ChevronRightIcon,
 } from "lucide-react"
 
 import { Badge } from "@/components/ui/badge"
@@ -48,6 +49,21 @@ export function BadgeDemo() {
           <ArrowUpRightIcon data-icon="inline-end" data-rtl-flip="true" />
         </a>
       </Badge>
+      <Badge
+        asChild
+        color="blue"
+        splitAction
+        type="trailing-icon"
+      >
+        <a href="#badge">
+          In progress
+          <ChevronRightIcon
+            aria-hidden="true"
+            data-icon="inline-end"
+            data-rtl-flip="true"
+          />
+        </a>
+      </Badge>
     </div>
   )
 }

package/registry/examples/expanded/command-bar-demo.tsx

@@ -1,5 +1,101 @@
+import * as React from "react"
+import {
+  BoxIcon,
+  CheckIcon,
+  CloudIcon,
+  EyeIcon,
+  FileTextIcon,
+  GitPullRequestIcon,
+  LayoutGridIcon,
+  MessageSquareIcon,
+  PencilIcon,
+  RefreshCcwIcon,
+  SearchIcon,
+  Settings2Icon,
+  ShieldCheckIcon,
+  WorkflowIcon,
+  XIcon,
+} from "lucide-react"
+
+import { Avatar, AvatarIcon, AvatarStatus } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Menu,
+  MenuItem,
+  MenuItemDescription,
+  MenuItemText,
+  MenuItemTitle,
+} from "@/components/ui/menu"
+import { ModalBody, ModalHeader, ModalSurface } from "@/components/ui/modal"
+import {
+  Toolbar,
+  ToolbarButton,
+  ToolbarSearch,
+  ToolbarSection,
+} from "@/components/ui/toolbar"
 import { CommandBar } from "@/components/ui/expanded/CommandBar"
 
+type ToolTone = "neutral" | "blue" | "green" | "amber" | "purple" | "sky"
+type ToolIcon = React.ComponentType<React.SVGProps<SVGSVGElement>>
+
+type ToolItem = {
+  added?: boolean
+  description?: string
+  icon: ToolIcon
+  title: string
+  tone?: ToolTone
+}
+
+const popularTools: ToolItem[] = [
+  {
+    added: true,
+    icon: EyeIcon,
+    title: "View repositories & issues",
+    tone: "green",
+  },
+  {
+    description: "Create, comment, update issues",
+    icon: PencilIcon,
+    title: "Create & update issues",
+  },
+  {
+    description: "Use commit and repo activity",
+    icon: RefreshCcwIcon,
+    title: "Sync commits and activity",
+  },
+  {
+    description: "Review and update pull requests",
+    icon: GitPullRequestIcon,
+    title: "Manage pull requests",
+  },
+  {
+    description: "Run GitHub workflows",
+    icon: WorkflowIcon,
+    title: "Trigger workflows & automations",
+  },
+]
+
+const serverTools: ToolItem[] = [
+  { icon: BoxIcon, title: "Box", tone: "blue" },
+  { icon: CloudIcon, title: "Google Drive", tone: "green" },
+  { icon: Settings2Icon, title: "Hubspot", tone: "amber" },
+  { icon: MessageSquareIcon, title: "Intercom", tone: "sky" },
+  { icon: WorkflowIcon, title: "Jira", tone: "blue" },
+  { icon: FileTextIcon, title: "Notion" },
+  { icon: ShieldCheckIcon, title: "Okta" },
+  { icon: CloudIcon, title: "Salesforce", tone: "sky" },
+]
+
+const toolToneClassNames: Record<ToolTone, string> = {
+  amber: "text-[var(--bh-content-accent-amber-default)]",
+  blue: "text-[var(--bh-content-accent-blue-default)]",
+  green: "text-[var(--bh-content-accent-green-default)]",
+  neutral: "text-[var(--bh-content-subtle)]",
+  purple: "text-[var(--bh-content-accent-purple-default)]",
+  sky: "text-[var(--bh-content-accent-sky-default)]",
+}
+
 export function CommandBarDemo() {
   return (
     <div className="grid gap-6">
@@ -8,3 +104,143 @@ export function CommandBarDemo() {
     </div>
   )
 }
+
+export function AddToolPickerExample() {
+  return (
+    <ModalSurface
+      aria-label="Add tool command example"
+      className={[
+        "[--bh-modal-width:calc(var(--bh-space-19xl-384)+var(--bh-space-18xl-320)+var(--bh-space-8xl-48))]",
+        "rounded-[var(--bh-radius-6xl-28)]",
+      ].join(" ")}
+      size="lg"
+    >
+      <ModalHeader className="items-start justify-between px-[var(--bh-space-5xl-24)] pb-[var(--bh-space-lg-10)] pe-[var(--bh-space-5xl-24)] pt-[var(--bh-space-5xl-24)]">
+        <h2 className="min-w-0 flex-1 text-start 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)]">
+          Add tool
+        </h2>
+        <Button aria-label="Close add tool" size="icon" type="button" variant="ghost">
+          <XIcon aria-hidden="true" />
+        </Button>
+      </ModalHeader>
+
+      <ModalBody className="grid w-full gap-[var(--bh-space-4xl-20)] px-[var(--bh-space-5xl-24)] pb-[var(--bh-space-6xl-32)] pt-0">
+        <ToolbarSearch
+          aria-label="Search tools"
+          icon={<SearchIcon aria-hidden="true" />}
+          placeholder="Search..."
+          width="full"
+        />
+
+        <Toolbar aria-label="Tool source filters" className="overflow-x-auto" wrap>
+          <ToolbarSection wrap>
+            <ToolCategory icon={Settings2Icon}>All</ToolCategory>
+            <ToolCategory icon={LayoutGridIcon}>Apps</ToolCategory>
+            <ToolCategory active icon={LayoutGridIcon}>
+              MCP
+            </ToolCategory>
+          </ToolbarSection>
+        </Toolbar>
+
+        <ToolSection items={popularTools} title="Popular" />
+        <ToolSection items={serverTools} title="Servers" />
+      </ModalBody>
+    </ModalSurface>
+  )
+}
+
+function ToolCategory({
+  active = false,
+  children,
+  icon: Icon,
+}: {
+  active?: boolean
+  children: React.ReactNode
+  icon: ToolIcon
+}) {
+  return (
+    <ToolbarButton
+      aria-pressed={active}
+      className={[
+        "rounded-[var(--bh-radius-none)] border-b-[length:var(--bh-border-width-strong)] px-[var(--bh-space-xs-4)]",
+        active
+          ? "border-b-[var(--bh-border-accent-purple-strong)] text-[var(--bh-content-accent-purple-default)]"
+          : "border-b-transparent text-[var(--bh-content-subtle)]",
+      ].join(" ")}
+      size="sm"
+      type="button"
+      variant="ghost"
+    >
+      <Icon aria-hidden="true" data-icon="inline-start" />
+      {children}
+    </ToolbarButton>
+  )
+}
+
+function ToolSection({ items, title }: { items: ToolItem[]; title: string }) {
+  return (
+    <section className="grid gap-[var(--bh-space-xl-12)]" aria-label={title}>
+      <h3 className="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-subtle)]">
+        {title}
+      </h3>
+      <div className="grid gap-[var(--bh-space-md-8)] sm:grid-cols-2">
+        {items.map((item) => (
+          <ToolRow item={item} key={item.title} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function ToolRow({ item }: { item: ToolItem }) {
+  const Icon = item.icon
+  const tone = item.tone ?? "neutral"
+
+  return (
+    <Menu
+      aria-label={`${item.title} tool action`}
+      className="w-full bg-transparent p-0 shadow-none"
+      width="auto"
+    >
+      <MenuItem
+        aria-label={item.title}
+        className="min-h-[var(--bh-space-8xl-48)] px-[var(--bh-space-xs-4)] py-[var(--bh-space-xxs-2)]"
+        kind="multiline"
+        role="menuitem"
+      >
+        <Avatar shape="rounded" size="lg">
+          <AvatarIcon
+            className={[
+              "border border-[var(--bh-border-subtle)]",
+              "[&_svg]:size-[var(--bh-space-4xl-20)]",
+              toolToneClassNames[tone],
+            ].join(" ")}
+            size="lg"
+          >
+            <Icon aria-hidden="true" strokeWidth={2} />
+          </AvatarIcon>
+          {item.added ? <AvatarStatus size="small" status="available" /> : null}
+        </Avatar>
+        <MenuItemText>
+          <MenuItemTitle className="font-[var(--bh-text-body-md-medium-font-weight)]">
+            {item.title}
+          </MenuItemTitle>
+          {item.added ? (
+            <Badge
+              badgeStyle="light"
+              className="self-start"
+              color="green"
+              size="sm"
+              type="leading-icon"
+            >
+              <CheckIcon aria-hidden="true" />
+              Added
+            </Badge>
+          ) : item.description ? (
+            <MenuItemDescription>{item.description}</MenuItemDescription>
+          ) : null}
+        </MenuItemText>
+      </MenuItem>
+    </Menu>
+  )
+}

package/registry/examples/expanded/empty-state-demo.tsx

@@ -0,0 +1,39 @@
+import { InboxIcon, PlusIcon, SearchIcon } from "lucide-react"
+
+import {
+  EmptyState,
+  type EmptyStateAction,
+} from "@/components/ui/expanded/EmptyState"
+
+const searchActions: EmptyStateAction[] = [
+  { label: "Reset filters", variant: "secondary" },
+  { label: "Create item" },
+]
+
+const inboxActions: EmptyStateAction[] = [
+  {
+    icon: <PlusIcon data-icon="inline-start" />,
+    label: "Add record",
+  },
+]
+
+export function EmptyStateDemo() {
+  return (
+    <div className="grid gap-6">
+      <EmptyState
+        actions={searchActions}
+        description="Try adjusting your search or filters"
+        icon={<SearchIcon />}
+        title="No results found"
+      />
+      <EmptyState
+        actions={inboxActions}
+        align="start"
+        description="Create a record to start tracking this workflow."
+        icon={<InboxIcon />}
+        size="compact"
+        title="Nothing here yet"
+      />
+    </div>
+  )
+}

package/registry/examples/input-demo.tsx

@@ -26,7 +26,7 @@ const demoRtlInputProps = {
   ...demoInputProps,
   errorMessage: "\u0631\u0633\u0627\u0644\u0629 \u062e\u0637\u0623",
   label: "\u0645\u0644\u0635\u0642",
-  message: "\u0647\u0630\u0627 \u0646\u0635 \u062a\u0644\u0645\u064a\u062d.",
+  message: "\u0646\u0635 \u062a\u0648\u0636\u064a\u062d\u064a",
   optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
   placeholder: "\u0627\u0644\u0646\u0635",
   valueText: "\u0646\u0635 \u0647\u0646\u0627",