banhaten 0.1.0 → 0.1.1

package/registry/examples/checkbox-demo.tsx

@@ -1,5 +1,7 @@
 import * as React from "react"
 
+import { UserIcon } from "lucide-react"
+
 import { Checkbox, CheckboxCard } from "@/components/ui/checkbox"
 
 export function CheckboxDemo() {
@@ -56,12 +58,5 @@ export function CheckboxDemo() {
 }
 
 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>
-  )
+  return <UserIcon aria-hidden="true" focusable="false" strokeWidth={2.1} />
 }

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

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

@@ -0,0 +1,142 @@
+import * as React from "react"
+
+import {
+  DataTable,
+  type TableColumn,
+  type TableRowBase,
+  type TableSortState,
+} from "@/components/ui/expanded/Table"
+
+type ProjectRow = TableRowBase & {
+  owner: string
+  progress: number
+  project: string
+  status: "Ready" | "Review" | "Blocked"
+  updated: string
+}
+
+const rows: ProjectRow[] = [
+  {
+    id: "token-contract",
+    owner: "Maya Chen",
+    progress: 92,
+    project: "Token contract",
+    status: "Ready",
+    updated: "Today",
+  },
+  {
+    id: "rtl-matrix",
+    owner: "Nora Ali",
+    progress: 74,
+    project: "RTL matrix",
+    status: "Review",
+    updated: "Yesterday",
+  },
+  {
+    id: "data-table",
+    owner: "Ahmed Galal",
+    progress: 58,
+    project: "Data table",
+    status: "Review",
+    updated: "Jun 12",
+  },
+  {
+    id: "audit-backgrounds",
+    owner: "Leila Haddad",
+    progress: 41,
+    project: "Audit backgrounds",
+    status: "Blocked",
+    updated: "Jun 10",
+  },
+]
+
+const columns: TableColumn<ProjectRow>[] = [
+  { id: "selection", kind: "selection", width: 42 },
+  {
+    id: "project",
+    header: "Project",
+    item: (row) => ({ type: "text", value: row.project, weight: "medium" }),
+    minWidth: 220,
+    searchValue: (row) => row.project,
+    sortable: true,
+    sortValue: (row) => row.project,
+    width: "fill",
+  },
+  {
+    id: "owner",
+    header: "Owner",
+    item: (row) => ({ type: "avatarText", name: row.owner, caption: row.status }),
+    searchValue: (row) => row.owner,
+    sortable: true,
+    sortValue: (row) => row.owner,
+    width: 180,
+  },
+  {
+    id: "status",
+    header: "Status",
+    item: (row) => ({
+      type: "badges",
+      items: [
+        {
+          dot: true,
+          label: row.status,
+          tone:
+            row.status === "Ready"
+              ? "success"
+              : row.status === "Review"
+                ? "amber"
+                : "danger",
+        },
+      ],
+    }),
+    searchValue: (row) => row.status,
+    sortable: true,
+    sortValue: (row) => row.status,
+    width: 132,
+  },
+  {
+    id: "progress",
+    header: "Progress",
+    item: (row) => ({ type: "progress", value: row.progress, label: `${row.progress}%` }),
+    sortable: true,
+    sortValue: (row) => row.progress,
+    width: 150,
+  },
+  {
+    id: "updated",
+    header: "Updated",
+    item: (row) => ({ type: "text", value: row.updated, tone: "subtle" }),
+    searchValue: (row) => row.updated,
+    sortable: true,
+    sortValue: (row) => row.updated,
+    width: 118,
+  },
+]
+
+export function TableDemo() {
+  const [selectedRows, setSelectedRows] = React.useState<string[]>(["token-contract"])
+  const [sort, setSort] = React.useState<TableSortState>({
+    columnId: "project",
+    direction: "asc",
+  })
+
+  return (
+    <DataTable
+      actions={[
+        { label: "Export", variant: "soft" },
+        { label: "Create", variant: "default" },
+      ]}
+      bulkActions={[{ label: "Archive", variant: "outline" }]}
+      columns={columns}
+      description="Search, sort, select, paginate, and act on a compact operational dataset."
+      onSelectedRowIdsChange={setSelectedRows}
+      onSortChange={setSort}
+      pagination={{ pageSize: 3 }}
+      rows={rows}
+      search={{ label: "Search projects", placeholder: "Search projects..." }}
+      selectedRowIds={selectedRows}
+      sort={sort}
+      title="Component Operations"
+    />
+  )
+}

package/registry/examples/progress-demo.tsx

@@ -24,8 +24,8 @@ export function ProgressDemo() {
         <Progress
           aria-label="Arabic upload progress"
           indicator="40%"
-          label="\u0639\u0646\u0648\u0627\u0646"
-          optional="\u0028\u0627\u062e\u062a\u064a\u0627\u0631\u064a\u0029"
+          label={"\u0639\u0646\u0648\u0627\u0646"}
+          optional={"\u0028\u0627\u062e\u062a\u064a\u0627\u0631\u064a\u0029"}
           showInfo
           showSpinner
           size="sm"

package/registry/examples/select-demo.tsx

@@ -1,10 +1,7 @@
 import {
   Select,
-  SelectItemAvatar,
   SelectItemCompanyLogo,
-  SelectItemFlag,
   SelectItemPaymentIcon,
-  SelectItemStatusDot,
   SelectMenuItem,
 } from "@/components/ui/select"
 
@@ -14,14 +11,13 @@ export function SelectDemo() {
       <Select
         helperText="This is a hint text"
         label="Label"
-        open
         placeholder="Select User"
         state="filled"
         value="Username"
       >
         <SelectMenuItem itemType="default" label="Text option" addonText="Meta" />
+        <SelectMenuItem itemType="icon" label="Add item" addonText="Action" />
         <SelectMenuItem itemType="avatar" label="User" addonText="Active" />
-        <SelectMenuItem itemType="flag" label="Egypt" addonText="+20" />
         <SelectMenuItem itemType="company" label="Company" addonText="Workspace" />
         <SelectMenuItem itemType="payment" label="Visa ending 2048" addonText="Default" />
         <SelectMenuItem itemType="dot" label="Active status" addonText="Online" selected />
@@ -40,32 +36,50 @@ export function SelectDemo() {
         />
       </Select>
 
-      <Select dir="rtl" label="ملصق" helperText="هذه نص تلميح.">
+      <Select
+        dir="rtl"
+        helperText="هذا نص تلميح."
+        label="ملصق"
+        placeholder="اختر مستخدمًا"
+        state="filled"
+        value="اسم المستخدم"
+      >
         <SelectMenuItem
           dir="rtl"
-          label="حدد"
-          addonText="إضافة نص"
-          selected
+          itemType="default"
+          label="خيار نصي"
+          addonText="بيانات"
+        />
+        <SelectMenuItem
+          dir="rtl"
+          itemType="icon"
+          label="إضافة"
+          addonText="إجراء"
         />
         <SelectMenuItem
           dir="rtl"
+          itemType="avatar"
           label="مستخدم"
           addonText="نشط"
-          media={<SelectItemAvatar fallback="م" />}
-          selectionType="checkbox"
-          selected
         />
         <SelectMenuItem
           dir="rtl"
-          label="الحالة"
-          addonText="متصل"
-          media={<SelectItemStatusDot />}
+          itemType="company"
+          label="شركة"
+          addonText="مساحة عمل"
         />
         <SelectMenuItem
           dir="rtl"
-          label="دولة"
-          addonText="+20"
-          media={<SelectItemFlag />}
+          itemType="payment"
+          label="بطاقة تنتهي بـ 2048"
+          addonText="افتراضي"
+        />
+        <SelectMenuItem
+          dir="rtl"
+          itemType="dot"
+          label="حالة نشطة"
+          addonText="متصل"
+          selected
         />
       </Select>
     </div>

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

@@ -1,50 +1,50 @@
-import { SocialButton } from "@/components/ui/social-button"
+import { SocialButton, type SocialPlatform } from "@/components/ui/social-button"
+
+const socialPlatforms: SocialPlatform[] = [
+  "apple",
+  "facebook",
+  "google",
+  "linkedin",
+  "twitter",
+  "whatsapp",
+]
 
 export function SocialButtonDemo() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-wrap items-center gap-3">
-        <SocialButton platform="apple" />
-        <SocialButton platform="facebook" />
-        <SocialButton platform="google" />
-        <SocialButton platform="linkedin" />
-        <SocialButton platform="twitter" />
-        <SocialButton platform="whatsapp" />
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} platform={platform} />
+        ))}
       </div>
 
       <div className="flex flex-wrap items-center gap-3">
-        <SocialButton platform="apple" variant="outline" />
-        <SocialButton platform="facebook" variant="outline" />
-        <SocialButton platform="google" variant="outline" />
-        <SocialButton platform="linkedin" variant="outline" />
-        <SocialButton platform="twitter" variant="outline" />
-        <SocialButton platform="whatsapp" variant="outline" />
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} platform={platform} variant="outline" />
+        ))}
       </div>
 
       <div className="flex flex-wrap items-center gap-3">
-        <SocialButton platform="apple" size="icon" />
-        <SocialButton platform="facebook" size="icon" />
-        <SocialButton platform="google" size="icon" />
-        <SocialButton platform="linkedin" size="icon" />
-        <SocialButton platform="twitter" size="icon" />
-        <SocialButton platform="whatsapp" size="icon" />
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} platform={platform} size="icon" />
+        ))}
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-center gap-3">
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} dir="rtl" platform={platform} />
+        ))}
       </div>
 
       <div dir="rtl" className="flex flex-wrap items-center gap-3">
-        <SocialButton
-          label="تسجيل الدخول باستخدام آبل"
-          platform="apple"
-          variant="outline"
-        />
-        <SocialButton
-          label="تسجيل الدخول باستخدام فيسبوك"
-          platform="facebook"
-        />
-        <SocialButton
-          label="تسجيل الدخول باستخدام جوجل"
-          platform="google"
-          variant="outline"
-        />
+        {socialPlatforms.map((platform) => (
+          <SocialButton
+            key={platform}
+            dir="rtl"
+            platform={platform}
+            variant="outline"
+          />
+        ))}
       </div>
     </div>
   )