banhaten 0.1.0 → 0.1.2

package/registry/examples/date-picker-demo.tsx

@@ -12,58 +12,111 @@ const selectedRange: CalendarRange = {
   to: new Date(2050, 7, 23),
 }
 
+const staticPopoverClassName =
+  "static left-auto top-auto mt-2 translate-x-0"
+const datePickerClassName =
+  "w-[var(--bh-date-surface-width-picker)] max-w-full"
+const dateRangePickerClassName = "w-max max-w-none"
+
 export function DatePickerDemo() {
   return (
     <div className="grid gap-8">
-      <div className="flex flex-wrap items-start gap-6">
-        <Calendar value={selectedDate} />
-        <Calendar view="month-year" value={selectedDate} />
+      <div className="grid gap-6 lg:grid-cols-[repeat(auto-fit,minmax(260px,max-content))]">
+        <div data-date-demo-item>
+          <Calendar value={selectedDate} />
+        </div>
+        <div data-date-demo-item>
+          <Calendar view="month-year" value={selectedDate} />
+        </div>
       </div>
 
       <div className="grid gap-6 xl:grid-cols-2">
-        <DatePicker defaultValue={selectedDate} />
-        <DatePicker defaultOpen defaultValue={selectedDate} />
-        <div dir="rtl">
+        <div data-date-demo-item>
+          <DatePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={datePickerClassName}
+            defaultValue={selectedDate}
+          />
+        </div>
+        <div data-date-demo-item dir="rtl">
           <DatePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={datePickerClassName}
             dir="rtl"
-            placeholder="\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"
+            placeholder={"\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-2">
+        <div data-date-demo-item>
+          <DatePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={datePickerClassName}
+            defaultOpen
+            defaultValue={selectedDate}
           />
         </div>
-        <div dir="rtl">
+        <div data-date-demo-item dir="rtl">
           <DatePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={datePickerClassName}
             defaultOpen
             defaultValue={selectedDate}
             dir="rtl"
-            placeholder="\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"
+            placeholder={"\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"}
           />
         </div>
       </div>
 
       <div className="grid gap-6 overflow-x-auto">
-        <RangeCalendar value={selectedRange} />
-        <RangeCalendar type="double-with-presets" value={selectedRange} />
-        <RangeCalendar type="single" value={selectedRange} />
+        <div data-date-demo-item>
+          <RangeCalendar value={selectedRange} />
+        </div>
+        <div data-date-demo-item>
+          <RangeCalendar type="double-with-presets" value={selectedRange} />
+        </div>
+        <div data-date-demo-item>
+          <RangeCalendar type="single" value={selectedRange} />
+        </div>
       </div>
 
       <div className="grid gap-6 xl:grid-cols-2">
-        <DateRangePicker value={selectedRange} />
-        <DateRangePicker
-          defaultOpen
-          type="double-with-presets"
-          value={selectedRange}
-        />
-        <div dir="rtl">
+        <div data-date-demo-item className="overflow-x-auto pb-2">
+          <DateRangePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={dateRangePickerClassName}
+            value={selectedRange}
+          />
+        </div>
+        <div data-date-demo-item className="overflow-x-auto pb-2" dir="rtl">
           <DateRangePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={dateRangePickerClassName}
             dir="rtl"
-            placeholder="\u0627\u062e\u062a\u0631 \u0646\u0637\u0627\u0642 \u0627\u0644\u062a\u0627\u0631\u064a\u062e"
+            placeholder={"\u0627\u062e\u062a\u0631 \u0646\u0637\u0627\u0642 \u0627\u0644\u062a\u0627\u0631\u064a\u062e"}
+            value={selectedRange}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-6">
+        <div data-date-demo-item className="overflow-x-auto pb-2">
+          <DateRangePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={dateRangePickerClassName}
+            defaultOpen
+            type="double-with-presets"
             value={selectedRange}
           />
         </div>
-        <div dir="rtl">
+        <div data-date-demo-item className="overflow-x-auto pb-2" dir="rtl">
           <DateRangePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={dateRangePickerClassName}
             defaultOpen
             dir="rtl"
-            placeholder="\u064a\u0648\u0645 / \u0634\u0647\u0631 / \u0633\u0646\u0629"
+            placeholder={"\u064a\u0648\u0645 / \u0634\u0647\u0631 / \u0633\u0646\u0629"}
             type="double-with-presets"
             value={selectedRange}
           />

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

@@ -1,23 +1,48 @@
 import { Banner } from "@/components/ui/expanded/Banner"
-import { BannerBoard as ExpandedBannerBoard } from "@/components/ui/expanded/BannerBoard"
 
 const bannerDemoCopy = {
   actionLabel: "Button",
   ariaLabel: "Announcement banner",
   closeLabel: "Dismiss banner",
   description: "Discover the Latest Updates in Our New Release",
-  inputAriaLabel: "Banner input",
-  inputPlaceholder: "Placeholder",
   linkLabel: "Link button",
   title: "Big news!",
 }
 
+const rtlBannerDemoCopy = {
+  actionLabel: "تطبيق",
+  ariaLabel: "شريط إعلان",
+  closeLabel: "إغلاق",
+  description: "اكتشف آخر التحديثات في إصدارنا الجديد",
+  linkLabel: "الرابط",
+  title: "أخبار مهمة!",
+}
+
 export function BannerDemo() {
   return (
-    <div className="grid gap-6">
+    <div className="grid gap-4">
       <Banner {...bannerDemoCopy} />
-      <Banner {...bannerDemoCopy} type="input" />
-      <ExpandedBannerBoard />
+      <Banner {...bannerDemoCopy} type="single-action-inline" />
+      <Banner {...bannerDemoCopy} size="full-width" type="single-action" />
+      <Banner
+        {...bannerDemoCopy}
+        color="grey"
+        content="title-description"
+        size="full-width"
+        type="single-action"
+      />
+      <Banner
+        {...bannerDemoCopy}
+        color="brand-light"
+        content="title-description"
+        type="single-action-inline"
+      />
+      <Banner
+        {...rtlBannerDemoCopy}
+        content="title-description"
+        dir="rtl"
+        type="single-action-inline"
+      />
     </div>
   )
 }

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

@@ -0,0 +1,59 @@
+import {
+  BreadcrumbFolderIcon,
+  BreadcrumbHomeIcon,
+  Breadcrumbs,
+  type BreadcrumbItem,
+} from "@/components/ui/expanded/Breadcrumbs"
+
+const breadcrumbItems: BreadcrumbItem[] = [
+  { label: "Home", href: "#", icon: <BreadcrumbHomeIcon /> },
+  { label: "Design system", href: "#", icon: <BreadcrumbFolderIcon /> },
+  { label: "Components", href: "#" },
+  { label: "Breadcrumbs", current: true },
+]
+
+const longBreadcrumbItems: BreadcrumbItem[] = [
+  { label: "Home", href: "#", icon: <BreadcrumbHomeIcon /> },
+  { label: "Workspace", href: "#", icon: <BreadcrumbFolderIcon /> },
+  { label: "Design System", href: "#" },
+  { label: "Components", href: "#" },
+  { label: "Navigation", href: "#" },
+  { label: "Breadcrumbs", current: true },
+]
+
+const rtlBreadcrumbItems: BreadcrumbItem[] = [
+  { label: "\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629", href: "#", icon: <BreadcrumbHomeIcon /> },
+  { label: "\u0627\u0644\u0646\u0638\u0627\u0645", href: "#", icon: <BreadcrumbFolderIcon /> },
+  { label: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a", current: true },
+]
+
+export function BreadcrumbsDemo() {
+  return (
+    <div className="grid gap-4">
+      <Breadcrumbs aria-label="Breadcrumb" items={breadcrumbItems} overflowLabel="More" />
+      <Breadcrumbs
+        aria-label="Breadcrumb"
+        items={breadcrumbItems}
+        overflowLabel="More"
+        separator="chevron"
+        style="raised"
+      />
+      <Breadcrumbs
+        aria-label="Breadcrumb"
+        items={longBreadcrumbItems}
+        maxItems={4}
+        overflowLabel="More"
+        separator="chevron"
+        style="raised"
+      />
+      <Breadcrumbs
+        aria-label={"\u0627\u0644\u0645\u0633\u0627\u0631"}
+        dir="rtl"
+        items={rtlBreadcrumbItems}
+        overflowLabel={"\u0627\u0644\u0645\u0632\u064a\u062f"}
+        separator="chevron"
+        style="raised"
+      />
+    </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/expanded/file-upload-demo.tsx

@@ -0,0 +1,60 @@
+import {
+  FileUpload,
+  type FileUploadFile,
+} from "@/components/ui/expanded/FileUpload"
+
+const uploadFiles: FileUploadFile[] = [
+  {
+    id: "uploaded",
+    name: "file-name.pdf",
+    sizeLabel: "32mb",
+    status: "uploaded",
+    versionLabel: "v1.2.2",
+  },
+  {
+    id: "uploading",
+    name: "file-name.pdf",
+    sizeLabel: "32mb",
+    status: "uploading",
+    versionLabel: "v1.2.2",
+  },
+  {
+    id: "progress",
+    name: "file-name.pdf",
+    progress: 40,
+    sizeLabel: "32 KB",
+    status: "uploading-progress",
+  },
+  {
+    errorLabel: "Upload failed",
+    id: "error",
+    name: "file-name.pdf",
+    sizeLabel: "32mb",
+    status: "error",
+    versionLabel: "v1.2.2",
+  },
+]
+
+export function FileUploadDemo() {
+  return (
+    <div className="grid items-start gap-5 xl:grid-cols-2">
+      <FileUpload
+        files={uploadFiles}
+        multiple
+      />
+      <FileUpload
+        files={uploadFiles}
+        size="sm"
+      />
+      <FileUpload
+        dropzoneState="hover"
+        files={uploadFiles.slice(0, 1)}
+        variant="button"
+      />
+      <FileUpload
+        disabled
+        files={[]}
+      />
+    </div>
+  )
+}

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

@@ -1,6 +1,17 @@
+import { Button } from "@/components/ui/button"
 import { Steps, type StepItem } from "@/components/ui/expanded/Steps"
 
 const stepItems: StepItem[] = Array.from({ length: 6 }, (_, index) => ({
+  actions: (
+    <>
+      <Button size="sm" type="button" variant="default">
+        Button
+      </Button>
+      <Button size="sm" type="button" variant="secondary">
+        Button
+      </Button>
+    </>
+  ),
   caption: "Caption",
   label: "Label",
   number: index + 1,