banhaten 0.3.0 → 0.5.0

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

@@ -1,236 +1,235 @@
-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 {
-  MenuPreview,
-  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"
-
-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 CommandPaletteDemo() {
-  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 (
-    <MenuPreview
-      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="var(--bh-icon-stroke-200)" />
-          </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>
-    </MenuPreview>
-  )
-}
+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 {
+  MenuPreview,
+  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"
+
+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 CommandPaletteDemo() {
+  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 (
+    <MenuPreview
+      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)]",
+              toolToneClassNames[tone],
+            ].join(" ")}
+            size="lg"
+          >
+            <Icon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-200)" />
+          </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>
+    </MenuPreview>
+  )
+}

package/registry/examples/context-menu-demo.tsx

@@ -1,29 +1,29 @@
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu"
-
-export function ContextMenuDemo() {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="flex h-[var(--bh-space-12xl-128)] w-[var(--bh-space-16xl-256)] items-center justify-center rounded-xl border border-dashed border-[var(--bh-border-default)] text-sm">
-        Right click
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuLabel>Project</ContextMenuLabel>
-        <ContextMenuItem>
-          Open
-          <ContextMenuShortcut>⌘O</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem>Duplicate</ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem>Archive</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  )
-}
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
+
+export function ContextMenuDemo() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[var(--bh-space-12xl-128)] w-[var(--bh-space-16xl-256)] items-center justify-center rounded-xl border border-dashed border-[var(--bh-border-default)] text-sm">
+        Right click
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuLabel>Project</ContextMenuLabel>
+        <ContextMenuItem>
+          Open
+          <ContextMenuShortcut>⌘O</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>Duplicate</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>Archive</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}

package/registry/examples/control-density-contract-demo.tsx

@@ -1,61 +1,65 @@
-import { Button } from "@/components/ui/button"
-import { DatePicker } from "@/components/ui/date-picker"
-import { Input } from "@/components/ui/input"
-import {
-  SegmentedControl,
-  SegmentedControlItem,
-} from "@/components/ui/segmented-control"
-import { Select } from "@/components/ui/select"
-import { ToolbarSearch } from "@/components/ui/toolbar"
-
-const densities = ["compact", "default", "comfortable"] as const
-
-export function ControlDensityContractDemo() {
-  return (
-    <div
-      id="control-density-contract"
-      className="grid w-full min-w-0 gap-[var(--bh-space-3xl-16)]"
-    >
-      {densities.map((density) => (
-        <section
-          key={density}
-          data-control-density-row={density}
-          className="grid min-w-0 gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-default)] p-[var(--bh-space-xl-12)]"
-        >
-          <p className="font-mono text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] uppercase text-[var(--bh-content-subtle)]">
-            {density}
-          </p>
-          <div className="flex min-w-0 flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-            <Input
-              density={density}
-              hasHelperText={false}
-              hasLabel={false}
-              placeholder="Input"
-            />
-            <Select density={density} value="Select" />
-            <DatePicker
-              density={density}
-              placeholder="Date"
-              triggerProps={{ "aria-label": `${density} date` }}
-            />
-            <Button density={density}>Button</Button>
-            <SegmentedControl
-              aria-label={`${density} view`}
-              defaultValue="grid"
-              density={density}
-            >
-              <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
-              <SegmentedControlItem value="list">List</SegmentedControlItem>
-            </SegmentedControl>
-            <ToolbarSearch
-              aria-label={`${density} search`}
-              density={density}
-              placeholder="Search"
-              width="compact"
-            />
-          </div>
-        </section>
-      ))}
-    </div>
-  )
-}
+import { Button } from "@/components/ui/button"
+import { DatePicker } from "@/components/ui/date-picker"
+import { Input } from "@/components/ui/input"
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from "@/components/ui/segmented-control"
+import { Select } from "@/components/ui/select"
+import { ToolbarSearch } from "@/components/ui/toolbar"
+
+const densities = ["compact", "default", "comfortable"] as const
+
+export function ControlDensityContractDemo() {
+  return (
+    <div
+      id="control-density-contract"
+      className="grid w-full min-w-0 gap-[var(--bh-space-3xl-16)]"
+    >
+      {densities.map((density) => (
+        <section
+          key={density}
+          data-control-density-row={density}
+          className="grid min-w-0 gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-default)] p-[var(--bh-space-xl-12)]"
+        >
+          <p className="font-mono text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] uppercase text-[var(--bh-content-subtle)]">
+            {density}
+          </p>
+          <div className="flex min-w-0 flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+            <Input
+              density={density}
+              hasHelperText={false}
+              hasLabel={false}
+              placeholder="Input"
+            />
+            <Select
+              aria-label={`${density} density select`}
+              density={density}
+              value="Select"
+            />
+            <DatePicker
+              density={density}
+              placeholder="Date"
+              triggerProps={{ "aria-label": `${density} date` }}
+            />
+            <Button density={density}>Button</Button>
+            <SegmentedControl
+              aria-label={`${density} view`}
+              defaultValue="grid"
+              density={density}
+            >
+              <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
+              <SegmentedControlItem value="list">List</SegmentedControlItem>
+            </SegmentedControl>
+            <ToolbarSearch
+              aria-label={`${density} search`}
+              density={density}
+              placeholder="Search"
+              width="compact"
+            />
+          </div>
+        </section>
+      ))}
+    </div>
+  )
+}