banhaten 0.1.2 → 0.2.0

package/registry/examples/button-demo.tsx

@@ -5,8 +5,8 @@ import { Spinner } from "@/components/ui/spinner"
 
 export function ButtonDemo() {
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-wrap items-center gap-3">
+    <div className="flex flex-col gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <Button>Primary</Button>
         <Button variant="secondary">Secondary</Button>
         <Button variant="soft">Soft</Button>
@@ -18,7 +18,7 @@ export function ButtonDemo() {
         <Button variant="white">White</Button>
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <Button size="xs">XS</Button>
         <Button size="sm">Small</Button>
         <Button>Medium</Button>
@@ -26,7 +26,7 @@ export function ButtonDemo() {
         <Button size="xl">XL</Button>
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <Button size="icon-xs" aria-label="Add item">
           <PlusIcon />
         </Button>
@@ -44,7 +44,7 @@ export function ButtonDemo() {
         </Button>
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <Button>
           <PlusIcon data-icon="inline-start" />
           New item
@@ -63,7 +63,7 @@ export function ButtonDemo() {
         </Button>
       </div>
 
-      <div dir="rtl" className="flex flex-wrap items-center gap-3">
+      <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <Button>إرسال</Button>
         <Button variant="outline">
           متابعة

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

@@ -1,10 +1,15 @@
 import { PlusIcon } from "lucide-react"
 
-import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group"
+import {
+  ButtonGroup,
+  ButtonGroupItem,
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/components/ui/button-group"
 
 export function ButtonGroupDemo() {
   return (
-    <div className="grid gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
       <ButtonGroup aria-label="Button group">
         {Array.from({ length: 7 }).map((_, index) => (
           <ButtonGroupItem
@@ -37,6 +42,22 @@ export function ButtonGroupDemo() {
           ))}
         </ButtonGroup>
       </div>
+
+      <ToggleGroup aria-label="Text alignment" defaultValue="start">
+        <ToggleGroupItem value="start">Start</ToggleGroupItem>
+        <ToggleGroupItem value="center">Center</ToggleGroupItem>
+        <ToggleGroupItem value="end">End</ToggleGroupItem>
+      </ToggleGroup>
+
+      <ToggleGroup
+        aria-label="Text styles"
+        defaultValue={["bold"]}
+        type="multiple"
+      >
+        <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+        <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+        <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
+      </ToggleGroup>
     </div>
   )
 }

package/registry/examples/card-demo.tsx

@@ -4,28 +4,65 @@ const cardImage = new URL("../assets/images/art-01.jpg", import.meta.url).href
 
 const rtlCardCopy = {
   action: "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627",
+  description:
+    "\u0627\u0646\u0637\u0644\u0642 \u0641\u064a \u0631\u062d\u0644\u0629 \u0639\u0628\u0631 \u0627\u0644\u0632\u0645\u0646 \u0644\u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0623\u0633\u0631\u0627\u0631 \u0627\u0644\u0623\u0647\u0631\u0627\u0645\u0627\u062a \u0627\u0644\u0643\u0628\u0631\u0649.",
   subtitle:
     "\u0639\u0646\u0648\u0627\u0646 \u0641\u0631\u0639\u064a \u0644\u0644\u0628\u0637\u0627\u0642\u0629",
   title:
     "\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0628\u0637\u0627\u0642\u0629",
 }
 
+const ltrCardCopy = {
+  action: "Explore",
+  description:
+    "Journey through time as we explore the mysteries of the Great Pyramids and the Sphinx.",
+  subtitle: "Ancient Egypt",
+  title: "The Great Pyramids",
+}
+
 export function CardDemo() {
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-start gap-4">
-        <Card imageSrc={cardImage} />
-        <Card imageSrc={cardImage} type="full-image" />
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]">
+        <Card
+          description={ltrCardCopy.description}
+          imageSrc={cardImage}
+          primaryActionLabel={ltrCardCopy.action}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+        />
+        <Card
+          imageSrc={cardImage}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+          type="full-image"
+        />
       </div>
 
-      <div className="grid gap-4">
-        <Card imageSrc={cardImage} orientation="horizontal" />
-        <Card imageSrc={cardImage} orientation="horizontal" type="trailing-image" />
+      <div className="grid gap-[var(--bh-space-3xl-16)]">
+        <Card
+          description={ltrCardCopy.description}
+          imageSrc={cardImage}
+          orientation="horizontal"
+          primaryActionLabel={ltrCardCopy.action}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+        />
+        <Card
+          description={ltrCardCopy.description}
+          imageSrc={cardImage}
+          orientation="horizontal"
+          primaryActionLabel={ltrCardCopy.action}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+          type="trailing-image"
+        />
       </div>
 
-      <div dir="rtl" className="flex flex-wrap items-start gap-4">
+      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]">
         <Card
           dir="rtl"
+          description={rtlCardCopy.description}
           primaryActionLabel={rtlCardCopy.action}
           secondaryActionLabel={rtlCardCopy.action}
           imageSrc={cardImage}
@@ -35,6 +72,7 @@ export function CardDemo() {
         <Card
           breakpoint="mobile"
           dir="rtl"
+          description={rtlCardCopy.description}
           orientation="horizontal"
           primaryActionLabel={rtlCardCopy.action}
           secondaryActionLabel={rtlCardCopy.action}

package/registry/examples/carousel-demo.tsx

@@ -0,0 +1,43 @@
+import {
+  arabicCarouselMessages,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel"
+
+export function CarouselDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <Carousel className="w-full max-w-sm">
+        <CarouselSlides />
+      </Carousel>
+      <Carousel
+        className="w-full max-w-sm"
+        dir="rtl"
+        messages={arabicCarouselMessages}
+      >
+        <CarouselSlides />
+      </Carousel>
+    </div>
+  )
+}
+
+function CarouselSlides() {
+  return (
+    <>
+      <CarouselContent>
+        {[1, 2, 3].map((item) => (
+          <CarouselItem key={item}>
+            <div className="flex aspect-video items-center justify-center rounded-xl bg-[var(--bh-bg-neutral-subtle)] text-lg font-semibold">
+              {item}
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </>
+  )
+}

package/registry/examples/chart-demo.tsx

@@ -0,0 +1,33 @@
+import { Line, LineChart, XAxis, YAxis } from "recharts"
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+
+const data = [
+  { month: "Jan", revenue: 120 },
+  { month: "Feb", revenue: 180 },
+  { month: "Mar", revenue: 150 },
+  { month: "Apr", revenue: 220 },
+]
+
+export function ChartDemo() {
+  return (
+    <ChartContainer config={{ revenue: { color: "var(--bh-chart-1)" } }}>
+      <LineChart data={data}>
+        <XAxis dataKey="month" tickLine={false} axisLine={false} />
+        <YAxis tickLine={false} axisLine={false} width={32} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Line
+          dataKey="revenue"
+          type="monotone"
+          stroke="var(--color-revenue)"
+          strokeWidth="var(--bh-icon-stroke-200)"
+          dot={false}
+        />
+      </LineChart>
+    </ChartContainer>
+  )
+}

package/registry/examples/checkbox-demo.tsx

@@ -8,8 +8,8 @@ export function CheckboxDemo() {
   const [checked, setChecked] = React.useState(true)
 
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-center gap-4">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-3xl-16)]">
         <Checkbox
           checked={checked}
           onCheckedChange={(value) => setChecked(value === true)}
@@ -20,7 +20,7 @@ export function CheckboxDemo() {
         <Checkbox disabled aria-label="Disabled option" />
       </div>
 
-      <div className="grid gap-3">
+      <div className="grid gap-[var(--bh-space-xl-12)]">
         <CheckboxCard
           checked
           label="Label"
@@ -40,7 +40,7 @@ export function CheckboxDemo() {
         />
       </div>
 
-      <div dir="rtl" className="grid gap-3">
+      <div dir="rtl" className="grid gap-[var(--bh-space-xl-12)]">
         <CheckboxCard
           checked
           label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
@@ -58,5 +58,5 @@ export function CheckboxDemo() {
 }
 
 function UserLineIcon() {
-  return <UserIcon aria-hidden="true" focusable="false" strokeWidth={2.1} />
+  return <UserIcon aria-hidden="true" focusable="false" strokeWidth="var(--bh-icon-stroke-210)" />
 }

package/registry/examples/collapsible-demo.tsx

@@ -0,0 +1,16 @@
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+
+export function CollapsibleDemo() {
+  return (
+    <Collapsible defaultOpen className="w-full max-w-md rounded-xl border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
+      <CollapsibleTrigger>Workspace details</CollapsibleTrigger>
+      <CollapsibleContent>
+        Billing, members, and audit controls are grouped in this section.
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}

package/registry/examples/collection-filter-bar-demo.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+
+import { DatePicker } from "@/components/ui/date-picker"
+import { Field, FieldLabel } from "@/components/ui/field"
+import {
+  Select,
+  SelectMenuItem,
+} from "@/components/ui/select"
+import {
+  ToolbarButton,
+  ToolbarSearch,
+} from "@/components/ui/toolbar"
+
+const typeLabels = {
+  everything: "Everything",
+  articles: "Articles",
+  videos: "Videos",
+}
+
+const orderLabels = {
+  recent: "Recently bookmarked",
+  oldest: "Oldest bookmarked",
+  title: "Title",
+}
+
+export function CollectionFilterBarDemo() {
+  const [typeFilter, setTypeFilter] = React.useState<keyof typeof typeLabels>(
+    "everything"
+  )
+  const [order, setOrder] = React.useState<keyof typeof orderLabels>("recent")
+  const [dateRevision, setDateRevision] = React.useState(0)
+
+  return (
+    <form
+      aria-label="Collection filters"
+      data-recipe="collection-filter-bar"
+      className="grid w-full min-w-0 gap-[var(--bh-space-xl-12)] rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] shadow-[var(--shadow-component-default)]"
+      onReset={() => {
+        setTypeFilter("everything")
+        setOrder("recent")
+        setDateRevision((revision) => revision + 1)
+      }}
+    >
+      <ToolbarSearch
+        aria-label="Search bookmarks"
+        density="default"
+        placeholder="Search words, people, or folders"
+        shortcutKeys={["Mod", "F"]}
+        width="full"
+      />
+
+      <div className="flex min-w-0 flex-wrap items-end gap-[var(--bh-space-xl-12)]">
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-from"
+        >
+          <FieldLabel tone="subtle">From</FieldLabel>
+          <DatePicker
+            key={`from-${dateRevision}`}
+            className="w-full"
+            density="default"
+            placeholder="dd/mm/yyyy"
+            triggerClassName="w-full"
+            triggerProps={{ id: "collection-filter-from" }}
+          />
+        </Field>
+
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-to"
+        >
+          <FieldLabel tone="subtle">To</FieldLabel>
+          <DatePicker
+            key={`to-${dateRevision}`}
+            className="w-full"
+            density="default"
+            placeholder="dd/mm/yyyy"
+            triggerClassName="w-full"
+            triggerProps={{ id: "collection-filter-to" }}
+          />
+        </Field>
+
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-type"
+        >
+          <FieldLabel tone="subtle">Type</FieldLabel>
+          <Select
+            className="w-full"
+            density="default"
+            onValueChange={(value) =>
+              setTypeFilter(value as keyof typeof typeLabels)
+            }
+            selectValue={typeFilter}
+            triggerId="collection-filter-type"
+            value={typeLabels[typeFilter]}
+          >
+            <SelectMenuItem label="Everything" value="everything" />
+            <SelectMenuItem label="Articles" value="articles" />
+            <SelectMenuItem label="Videos" value="videos" />
+          </Select>
+        </Field>
+
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-order"
+        >
+          <FieldLabel tone="subtle">Order</FieldLabel>
+          <Select
+            className="w-full"
+            density="default"
+            onValueChange={(value) =>
+              setOrder(value as keyof typeof orderLabels)
+            }
+            selectValue={order}
+            triggerId="collection-filter-order"
+            value={orderLabels[order]}
+          >
+            <SelectMenuItem label="Recently bookmarked" value="recent" />
+            <SelectMenuItem label="Oldest bookmarked" value="oldest" />
+            <SelectMenuItem label="Title" value="title" />
+          </Select>
+        </Field>
+
+        <div className="flex items-end">
+          <ToolbarButton density="default" type="reset" variant="link">
+            Reset
+          </ToolbarButton>
+        </div>
+      </div>
+    </form>
+  )
+}

package/registry/examples/command-demo.tsx

@@ -0,0 +1,42 @@
+import { FileTextIcon, SettingsIcon, UserIcon } from "lucide-react"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command"
+
+export function CommandDemo() {
+  return (
+    <Command>
+      <CommandInput />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Pages">
+          <CommandItem value="profile">
+            <UserIcon className="size-[var(--bh-space-3xl-16)]" />
+            Profile
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem value="docs">
+            <FileTextIcon className="size-[var(--bh-space-3xl-16)]" />
+            Docs
+            <CommandShortcut>⌘D</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Actions">
+          <CommandItem value="settings">
+            <SettingsIcon className="size-[var(--bh-space-3xl-16)]" />
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}

package/registry/examples/{expanded/command-bar-demo.tsx → command-palette-demo.tsx}

@@ -21,7 +21,7 @@ import { Avatar, AvatarIcon, AvatarStatus } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
-  Menu,
+  MenuPreview,
   MenuItem,
   MenuItemDescription,
   MenuItemText,
@@ -34,7 +34,6 @@ import {
   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>>
@@ -96,16 +95,7 @@ const toolToneClassNames: Record<ToolTone, string> = {
   sky: "text-[var(--bh-content-accent-sky-default)]",
 }
 
-export function CommandBarDemo() {
-  return (
-    <div className="grid gap-6">
-      <CommandBar />
-      <CommandBar type="results" />
-    </div>
-  )
-}
-
-export function AddToolPickerExample() {
+export function CommandPaletteDemo() {
   return (
     <ModalSurface
       aria-label="Add tool command example"
@@ -197,7 +187,7 @@ function ToolRow({ item }: { item: ToolItem }) {
   const tone = item.tone ?? "neutral"
 
   return (
-    <Menu
+    <MenuPreview
       aria-label={`${item.title} tool action`}
       className="w-full bg-transparent p-0 shadow-none"
       width="auto"
@@ -217,7 +207,7 @@ function ToolRow({ item }: { item: ToolItem }) {
             ].join(" ")}
             size="lg"
           >
-            <Icon aria-hidden="true" strokeWidth={2} />
+            <Icon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-200)" />
           </AvatarIcon>
           {item.added ? <AvatarStatus size="small" status="available" /> : null}
         </Avatar>
@@ -241,6 +231,6 @@ function ToolRow({ item }: { item: ToolItem }) {
           ) : null}
         </MenuItemText>
       </MenuItem>
-    </Menu>
+    </MenuPreview>
   )
 }

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

@@ -0,0 +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>
+  )
+}

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

@@ -0,0 +1,61 @@
+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>
+  )
+}