banhaten 0.1.0

package/registry/examples/button-demo.tsx

@@ -0,0 +1,83 @@
+import { ArrowRightIcon, PlusIcon, Trash2Icon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+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">
+        <Button>Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="soft">Soft</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="ghost-primary">Ghost Primary</Button>
+        <Button variant="danger">Danger</Button>
+        <Button variant="soft-danger">Soft Danger</Button>
+        <Button variant="white">White</Button>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <Button size="xs">XS</Button>
+        <Button size="sm">Small</Button>
+        <Button>Medium</Button>
+        <Button size="lg">Large</Button>
+        <Button size="xl">XL</Button>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <Button size="icon-xs" aria-label="Add item">
+          <PlusIcon />
+        </Button>
+        <Button size="icon-sm" aria-label="Add item">
+          <PlusIcon />
+        </Button>
+        <Button size="icon" aria-label="Add item">
+          <PlusIcon />
+        </Button>
+        <Button size="icon-lg" aria-label="Add item">
+          <PlusIcon />
+        </Button>
+        <Button size="icon-xl" aria-label="Add item">
+          <PlusIcon />
+        </Button>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <Button>
+          <PlusIcon data-icon="inline-start" />
+          New item
+        </Button>
+        <Button variant="outline">
+          Continue
+          <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
+        </Button>
+        <Button variant="danger">
+          <Trash2Icon data-icon="inline-start" />
+          Delete
+        </Button>
+        <Button disabled aria-busy="true">
+          <Spinner data-icon="inline-start" />
+          Loading
+        </Button>
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-center gap-3">
+        <Button>إرسال</Button>
+        <Button variant="outline">
+          متابعة
+          <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
+        </Button>
+        <Button variant="danger">
+          <Trash2Icon data-icon="inline-start" />
+          حذف
+        </Button>
+        <Button disabled aria-busy="true">
+          <Spinner data-icon="inline-start" />
+          جاري التحميل
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,42 @@
+import { PlusIcon } from "lucide-react"
+
+import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group"
+
+export function ButtonGroupDemo() {
+  return (
+    <div className="grid gap-6">
+      <ButtonGroup aria-label="Button group">
+        {Array.from({ length: 7 }).map((_, index) => (
+          <ButtonGroupItem
+            key={index}
+            aria-pressed={index === 3 || undefined}
+          >
+            <PlusIcon data-icon="inline-start" />
+            Button
+            <PlusIcon data-icon="inline-end" />
+          </ButtonGroupItem>
+        ))}
+      </ButtonGroup>
+
+      <ButtonGroup aria-label="Small icon button group" size="sm" mode="iconOnly">
+        {Array.from({ length: 7 }).map((_, index) => (
+          <ButtonGroupItem key={index} aria-label={`Action ${index + 1}`}>
+            <PlusIcon />
+          </ButtonGroupItem>
+        ))}
+      </ButtonGroup>
+
+      <div dir="rtl">
+        <ButtonGroup aria-label="Arabic button group" size="xs">
+          {Array.from({ length: 7 }).map((_, index) => (
+            <ButtonGroupItem key={index} disabled={index === 4}>
+              <PlusIcon data-icon="inline-start" />
+              {"\u0627\u0646\u0642\u0631 \u0647\u0646\u0627"}
+              <PlusIcon data-icon="inline-end" />
+            </ButtonGroupItem>
+          ))}
+        </ButtonGroup>
+      </div>
+    </div>
+  )
+}

package/registry/examples/card-demo.tsx

@@ -0,0 +1,48 @@
+import { Card } from "@/components/ui/card"
+
+const cardImage = new URL("../assets/images/art-01.jpg", import.meta.url).href
+
+const rtlCardCopy = {
+  action: "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627",
+  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",
+}
+
+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>
+
+      <div className="grid gap-4">
+        <Card imageSrc={cardImage} orientation="horizontal" />
+        <Card imageSrc={cardImage} orientation="horizontal" type="trailing-image" />
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-start gap-4">
+        <Card
+          dir="rtl"
+          primaryActionLabel={rtlCardCopy.action}
+          secondaryActionLabel={rtlCardCopy.action}
+          imageSrc={cardImage}
+          subtitle={rtlCardCopy.subtitle}
+          title={rtlCardCopy.title}
+        />
+        <Card
+          breakpoint="mobile"
+          dir="rtl"
+          orientation="horizontal"
+          primaryActionLabel={rtlCardCopy.action}
+          secondaryActionLabel={rtlCardCopy.action}
+          imageSrc={cardImage}
+          subtitle={rtlCardCopy.subtitle}
+          title={rtlCardCopy.title}
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/checkbox-demo.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+
+import { Checkbox, CheckboxCard } from "@/components/ui/checkbox"
+
+export function CheckboxDemo() {
+  const [checked, setChecked] = React.useState(true)
+
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-center gap-4">
+        <Checkbox
+          checked={checked}
+          onCheckedChange={(value) => setChecked(value === true)}
+          aria-label="Toggle option"
+        />
+        <Checkbox checked aria-label="Selected option" />
+        <Checkbox aria-label="Unselected option" />
+        <Checkbox disabled aria-label="Disabled option" />
+      </div>
+
+      <div className="grid gap-3">
+        <CheckboxCard
+          checked
+          label="Label"
+          description="checkbox card description"
+          media={<UserLineIcon />}
+        />
+        <CheckboxCard
+          controlPosition="start"
+          label="Label"
+          description="checkbox card description"
+        />
+        <CheckboxCard
+          disabled
+          label="Label"
+          description="checkbox card description"
+          media={<UserLineIcon />}
+        />
+      </div>
+
+      <div dir="rtl" className="grid gap-3">
+        <CheckboxCard
+          checked
+          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
+          description={"\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631"}
+          media={<UserLineIcon />}
+        />
+        <CheckboxCard
+          controlPosition="start"
+          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
+          description={"\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631"}
+        />
+      </div>
+    </div>
+  )
+}
+
+function UserLineIcon() {
+  return (
+    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M4 22A8 8 0 0 1 20 22H18A6 6 0 0 0 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,74 @@
+import {
+  Calendar,
+  DatePicker,
+  DateRangePicker,
+  RangeCalendar,
+  type CalendarRange,
+} from "@/components/ui/date-picker"
+
+const selectedDate = new Date(2050, 6, 18)
+const selectedRange: CalendarRange = {
+  from: new Date(2050, 6, 15),
+  to: new Date(2050, 7, 23),
+}
+
+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>
+
+      <div className="grid gap-6 xl:grid-cols-2">
+        <DatePicker defaultValue={selectedDate} />
+        <DatePicker defaultOpen defaultValue={selectedDate} />
+        <div dir="rtl">
+          <DatePicker
+            dir="rtl"
+            placeholder="\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"
+          />
+        </div>
+        <div dir="rtl">
+          <DatePicker
+            defaultOpen
+            defaultValue={selectedDate}
+            dir="rtl"
+            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>
+
+      <div className="grid gap-6 xl:grid-cols-2">
+        <DateRangePicker value={selectedRange} />
+        <DateRangePicker
+          defaultOpen
+          type="double-with-presets"
+          value={selectedRange}
+        />
+        <div dir="rtl">
+          <DateRangePicker
+            dir="rtl"
+            placeholder="\u0627\u062e\u062a\u0631 \u0646\u0637\u0627\u0642 \u0627\u0644\u062a\u0627\u0631\u064a\u062e"
+            value={selectedRange}
+          />
+        </div>
+        <div dir="rtl">
+          <DateRangePicker
+            defaultOpen
+            dir="rtl"
+            placeholder="\u064a\u0648\u0645 / \u0634\u0647\u0631 / \u0633\u0646\u0629"
+            type="double-with-presets"
+            value={selectedRange}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/examples/divider-demo.tsx

@@ -0,0 +1,17 @@
+import { Divider } from "@/components/ui/divider"
+
+export function DividerDemo() {
+  return (
+    <div className="grid gap-6">
+      <div className="grid gap-4">
+        <Divider />
+        <Divider type="dotted" />
+      </div>
+
+      <div className="flex h-[var(--bh-space-15xl-224)] items-start gap-6">
+        <Divider direction="vertical" type="dotted" />
+        <Divider direction="vertical" />
+      </div>
+    </div>
+  )
+}

package/registry/examples/expanded/activity-feed-demo.tsx

@@ -0,0 +1,22 @@
+import {
+  ActivityFeed,
+  type ActivityFeedItemProps,
+} from "@/components/ui/expanded/ActivityFeed"
+
+const activityItems: ActivityFeedItemProps[] = Array.from({ length: 4 }, () => ({
+  actions: [
+    { label: "Button", variant: "primary" },
+    { label: "Button", variant: "secondary" },
+  ],
+  caption: "Caption text",
+  label: "Label",
+  link: "#Link",
+  slotContent: "Slot content",
+  supportText: "Support Text",
+  timestamp: "Mar 15. 2050",
+  type: "caption",
+}))
+
+export function ActivityFeedDemo() {
+  return <ActivityFeed ariaLabel="Activity feed" items={activityItems} />
+}

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

@@ -0,0 +1,23 @@
+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!",
+}
+
+export function BannerDemo() {
+  return (
+    <div className="grid gap-6">
+      <Banner {...bannerDemoCopy} />
+      <Banner {...bannerDemoCopy} type="input" />
+      <ExpandedBannerBoard />
+    </div>
+  )
+}

package/registry/examples/expanded/catalog-components-demo.tsx

@@ -0,0 +1,5 @@
+import { CatalogComponentsShowcase } from "@/components/ui/expanded/CatalogComponentsShowcase"
+
+export function CatalogComponentsDemo() {
+  return <CatalogComponentsShowcase />
+}

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

@@ -0,0 +1,10 @@
+import { CommandBar } from "@/components/ui/expanded/CommandBar"
+
+export function CommandBarDemo() {
+  return (
+    <div className="grid gap-6">
+      <CommandBar />
+      <CommandBar type="results" />
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+import { IconExplorer } from "@/components/ui/expanded/IconExplorer"
+
+export function IconsDemo() {
+  return <IconExplorer />
+}

package/registry/examples/expanded/onboarding-step-demo.tsx

@@ -0,0 +1,11 @@
+import { OnboardingStepListItem } from "@/components/ui/expanded/OnboardingStepListItem"
+
+export function OnboardingStepDemo() {
+  return (
+    <div className="flex gap-2">
+      <OnboardingStepListItem label="Finished" state="finished" />
+      <OnboardingStepListItem label="Active" state="active" />
+      <OnboardingStepListItem label="Inactive" state="inactive" />
+    </div>
+  )
+}

package/registry/examples/expanded/page-header-demo.tsx

@@ -0,0 +1,19 @@
+import { PageHeader } from "@/components/ui/expanded/PageHeader"
+
+export function PageHeaderDemo() {
+  return (
+    <PageHeader
+      actions={[{ label: "Export" }, { label: "Share" }]}
+      breadcrumbLabel="Breadcrumb"
+      breadcrumbs={[
+        { label: "Home" },
+        { label: "Design system" },
+        { label: "Components", current: true },
+      ]}
+      description="Section description"
+      metaInfo="Meta info"
+      tabs={{ ariaLabel: "Page sections", items: ["Overview", "Details", "Settings"] }}
+      title="Section Title"
+    />
+  )
+}

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

@@ -0,0 +1,15 @@
+import { Slideout, SlideoutFiltersExample } from "@/components/ui/expanded/Slideout"
+
+export function SlideoutDemo() {
+  return (
+    <Slideout
+      actionLabel="Action"
+      closeLabel="Close"
+      primaryActionLabel="Apply"
+      secondaryActionLabel="Cancel"
+      title="Heading"
+    >
+      <SlideoutFiltersExample />
+    </Slideout>
+  )
+}

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

@@ -0,0 +1,18 @@
+import { Steps, type StepItem } from "@/components/ui/expanded/Steps"
+
+const stepItems: StepItem[] = Array.from({ length: 6 }, (_, index) => ({
+  caption: "Caption",
+  label: "Label",
+  number: index + 1,
+  slotContent: <div className="ds-step-slot">Slot content</div>,
+  supportText: "Support",
+}))
+
+export function StepsDemo() {
+  return (
+    <div className="grid gap-8">
+      <Steps items={stepItems} />
+      <Steps direction="vertical" items={stepItems} />
+    </div>
+  )
+}

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

@@ -0,0 +1,13 @@
+import { Tabs } from "@/components/ui/expanded/Tabs"
+
+const tabItems = ["Overview", "Details", "Settings", "Activity", "Files"]
+
+export function TabsDemo() {
+  return (
+    <div className="grid gap-6">
+      <Tabs ariaLabel="Tabs" items={tabItems} />
+      <Tabs ariaLabel="Tabs" items={tabItems} variant="segment" />
+      <Tabs ariaLabel="Tabs" items={tabItems} variant="rounded" />
+    </div>
+  )
+}

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

@@ -0,0 +1,18 @@
+import { Timeline, type TimelineStep } from "@/components/ui/expanded/Timeline"
+
+const timelineSteps: TimelineStep[] = Array.from({ length: 6 }, (_, index) => ({
+  caption: "Caption",
+  date: "Mar 15. 2050",
+  id: `timeline-demo-${index}`,
+  label: "Label",
+  state: "finished",
+}))
+
+export function TimelineDemo() {
+  return (
+    <div className="grid gap-8">
+      <Timeline ariaLabel="Timeline" steps={timelineSteps} />
+      <Timeline ariaLabel="Timeline" orientation="horizontal" steps={timelineSteps} />
+    </div>
+  )
+}

package/registry/examples/input-demo.tsx

@@ -0,0 +1,87 @@
+import { Input } from "@/components/ui/input"
+
+const demoTags = [{ label: "Label" }, { label: "Label" }, { label: "Label" }]
+const demoRtlTags = [
+  { label: "\u0645\u0644\u0635\u0642" },
+  { label: "\u0645\u0644\u0635\u0642" },
+  { label: "\u0645\u0644\u0635\u0642" },
+]
+
+const demoInputProps = {
+  buttonLabel: "Button",
+  errorMessage: "Error message",
+  inlineLeadingAddon: "https://",
+  inlineTrailingAddon: ".com",
+  label: "Label",
+  leadingAddon: "https://",
+  message: "This is a hint text",
+  optionalText: "(Optional)",
+  placeholder: "Placeholder",
+  quantityLabel: "Quantity",
+  trailingAddon: ".com",
+  valueText: "Text here",
+}
+
+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.",
+  optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
+  placeholder: "\u0627\u0644\u0646\u0635",
+  valueText: "\u0646\u0635 \u0647\u0646\u0627",
+}
+
+export function InputDemo() {
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-start gap-6">
+        <Input {...demoInputProps} />
+        <Input {...demoInputProps} state="filled" />
+        <Input {...demoInputProps} state="error" />
+        <Input {...demoInputProps} state="disabled" />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-6">
+        <Input {...demoInputProps} kind="shortcut" />
+        <Input {...demoInputProps} kind="add-on" />
+        <Input {...demoInputProps} kind="inline-add-on" />
+        <Input {...demoInputProps} kind="tags" state="filled" tags={demoTags} />
+        <Input
+          {...demoInputProps}
+          kind="inline-tags"
+          state="filled"
+          tags={demoTags}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-6">
+        <Input {...demoInputProps} kind="leading-dropdown" />
+        <Input {...demoInputProps} kind="trailing-dropdown" />
+        <Input {...demoInputProps} kind="leading-button" />
+        <Input {...demoInputProps} kind="trailing-button" />
+        <Input {...demoInputProps} kind="quantity" state="filled" valueText="1" />
+        <Input {...demoInputProps} kind="quantity-2" state="filled" valueText="1" />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-6">
+        <Input {...demoInputProps} size="md" />
+        <Input {...demoInputProps} size="md" variant="soft" />
+        <Input {...demoInputProps} size="md" variant="soft" state="error" />
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-start gap-6">
+        <Input {...demoRtlInputProps} dir="rtl" />
+        <Input {...demoRtlInputProps} dir="rtl" state="filled" />
+        <Input {...demoRtlInputProps} dir="rtl" state="error" />
+        <Input
+          {...demoRtlInputProps}
+          dir="rtl"
+          kind="inline-tags"
+          state="filled"
+          tags={demoRtlTags}
+        />
+      </div>
+    </div>
+  )
+}