banhaten 0.1.1 → 0.1.3

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/tabs-demo.tsx

@@ -1,4 +1,4 @@
-import { Tabs } from "@/components/ui/expanded/Tabs"
+import { Tabs } from "@/components/ui/tabs"
 
 const tabItems = ["Overview", "Details", "Settings", "Activity", "Files"]
 

package/registry/examples/field-demo.tsx

@@ -0,0 +1,51 @@
+import { Button } from "@/components/ui/button"
+import {
+  Field,
+  FieldContent,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+export function FieldDemo() {
+  return (
+    <FieldSet>
+      <FieldLegend>Account details</FieldLegend>
+      <FieldGroup>
+        <Field>
+          <FieldLabel>Email</FieldLabel>
+          <FieldControl>
+            <Input placeholder="name@example.com" />
+          </FieldControl>
+          <FieldDescription>Use your work email for team access.</FieldDescription>
+        </Field>
+
+        <Field invalid>
+          <FieldLabel>Workspace</FieldLabel>
+          <FieldControl>
+            <Input state="error" valueText="Banhaten" />
+          </FieldControl>
+          <FieldError>Workspace name is already taken.</FieldError>
+        </Field>
+
+        <Field orientation="responsive">
+          <FieldContent>
+            <FieldLabel>Notes</FieldLabel>
+            <FieldDescription>Visible to workspace administrators.</FieldDescription>
+          </FieldContent>
+          <FieldControl>
+            <Textarea placeholder="Add setup notes..." />
+          </FieldControl>
+        </Field>
+
+        <Button size="sm">Save details</Button>
+      </FieldGroup>
+    </FieldSet>
+  )
+}

package/registry/examples/hover-card-demo.tsx

@@ -0,0 +1,23 @@
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
+
+export function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger className="underline underline-offset-4">
+        Workspace profile
+      </HoverCardTrigger>
+      <HoverCardContent>
+        <div className="grid gap-1">
+          <strong>Design System</strong>
+          <span className="text-sm text-[var(--bh-content-subtle)]">
+            Tokens, components, and RTL-ready examples.
+          </span>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}

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",

package/registry/examples/input-group-demo.tsx

@@ -0,0 +1,16 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+
+export function InputGroupDemo() {
+  return (
+    <InputGroup>
+      <InputGroupAddon>https://</InputGroupAddon>
+      <InputGroupInput aria-label="Workspace URL" defaultValue="banhaten.design" />
+      <InputGroupButton>Save</InputGroupButton>
+    </InputGroup>
+  )
+}

package/registry/examples/input-otp-demo.tsx

@@ -0,0 +1,72 @@
+import { InputOTP } from "@/components/ui/input-otp"
+
+export function InputOTPDemo() {
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-start gap-6">
+        <InputOTP
+          label="Verification code"
+          message="Enter the code from your authenticator."
+          name="verification-code"
+        />
+        <InputOTP
+          defaultValue="482159"
+          label="Filled code"
+          state="filled"
+        />
+        <InputOTP
+          defaultValue="482"
+          errorMessage="The code is incomplete."
+          label="Recovery code"
+          state="error"
+        />
+        <InputOTP
+          defaultValue="482159"
+          label="Disabled code"
+          state="disabled"
+        />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-6">
+        <InputOTP
+          defaultValue="482159"
+          label="Masked code"
+          mask
+          state="filled"
+        />
+        <InputOTP
+          defaultValue="4821"
+          groupSize={2}
+          label="Four digit code"
+          length={4}
+          size="md"
+          state="filled"
+          variant="soft"
+        />
+        <InputOTP
+          defaultValue="48215983"
+          groupSize={4}
+          label="Backup code"
+          length={8}
+          state="filled"
+        />
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-start gap-6">
+        <InputOTP
+          defaultValue="482159"
+          dir="rtl"
+          label="رمز التحقق"
+          message="أدخل الرمز المرسل إليك."
+          state="filled"
+        />
+        <InputOTP
+          dir="rtl"
+          errorMessage="الرمز غير مكتمل."
+          label="رمز الأمان"
+          state="error"
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/kbd-demo.tsx

@@ -0,0 +1,11 @@
+import { Kbd } from "@/components/ui/kbd"
+
+export function KbdDemo() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+      <Kbd size="md">Shift</Kbd>
+    </div>
+  )
+}

package/registry/examples/label-demo.tsx

@@ -0,0 +1,20 @@
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+
+export function LabelDemo() {
+  return (
+    <div className="grid gap-4">
+      <div className="flex items-center gap-[var(--bh-space-md-8)]">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+      <Label optionalText="(Optional)">Project name</Label>
+      <div dir="rtl" className="flex items-center gap-[var(--bh-space-md-8)]">
+        <Checkbox id="terms-rtl" />
+        <Label htmlFor="terms-rtl" required>
+          قبول الشروط والأحكام
+        </Label>
+      </div>
+    </div>
+  )
+}