banhaten 0.3.0 → 0.5.0

package/registry/examples/select-demo.tsx

@@ -1,87 +1,87 @@
-import {
-  Select,
-  SelectItemCompanyLogo,
-  SelectItemPaymentIcon,
-  SelectMenuItem,
-} from "@/components/ui/select"
-
-export function SelectDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-6xl-32)]">
-      <Select
-        helperText="This is a hint text"
-        label="Label"
-        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="company" label="Company" addonText="Workspace" />
-        <SelectMenuItem itemType="payment" label="Visa ending 2048" addonText="Default" />
-        <SelectMenuItem itemType="dot" label="Active status" addonText="Online" selected />
-      </Select>
-
-      <Select label="Payment method" value="Mastercard" variant="soft">
-        <SelectMenuItem
-          label="Custom payment"
-          addonText="Primary"
-          media={<SelectItemPaymentIcon />}
-        />
-        <SelectMenuItem
-          label="Custom company"
-          addonText="Team"
-          media={<SelectItemCompanyLogo />}
-        />
-      </Select>
-
-      <Select
-        dir="rtl"
-        helperText="نص توضيحي"
-        label="ملصق"
-        placeholder="اختر مستخدمًا"
-        state="filled"
-        value="اسم المستخدم"
-      >
-        <SelectMenuItem
-          dir="rtl"
-          itemType="default"
-          label="خيار نصي"
-          addonText="بيانات"
-        />
-        <SelectMenuItem
-          dir="rtl"
-          itemType="icon"
-          label="إضافة"
-          addonText="إجراء"
-        />
-        <SelectMenuItem
-          dir="rtl"
-          itemType="avatar"
-          label="مستخدم"
-          addonText="نشط"
-        />
-        <SelectMenuItem
-          dir="rtl"
-          itemType="company"
-          label="شركة"
-          addonText="مساحة عمل"
-        />
-        <SelectMenuItem
-          dir="rtl"
-          itemType="payment"
-          label="بطاقة تنتهي بـ 2048"
-          addonText="افتراضي"
-        />
-        <SelectMenuItem
-          dir="rtl"
-          itemType="dot"
-          label="حالة نشطة"
-          addonText="متصل"
-          selected
-        />
-      </Select>
-    </div>
-  )
-}
+import {
+  Select,
+  SelectItemCompanyLogo,
+  SelectItemPaymentIcon,
+  SelectMenuItem,
+} from "@/components/ui/select"
+
+export function SelectDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-6xl-32)]">
+      <Select
+        helperText="This is a hint text"
+        label="Label"
+        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="company" label="Company" addonText="Workspace" />
+        <SelectMenuItem itemType="payment" label="Visa ending 2048" addonText="Default" />
+        <SelectMenuItem itemType="dot" label="Active status" addonText="Online" selected />
+      </Select>
+
+      <Select label="Payment method" value="Mastercard" variant="soft">
+        <SelectMenuItem
+          label="Custom payment"
+          addonText="Primary"
+          media={<SelectItemPaymentIcon />}
+        />
+        <SelectMenuItem
+          label="Custom company"
+          addonText="Team"
+          media={<SelectItemCompanyLogo />}
+        />
+      </Select>
+
+      <Select
+        dir="rtl"
+        helperText="نص توضيحي"
+        label="ملصق"
+        placeholder="اختر مستخدمًا"
+        state="filled"
+        value="اسم المستخدم"
+      >
+        <SelectMenuItem
+          dir="rtl"
+          itemType="default"
+          label="خيار نصي"
+          addonText="بيانات"
+        />
+        <SelectMenuItem
+          dir="rtl"
+          itemType="icon"
+          label="إضافة"
+          addonText="إجراء"
+        />
+        <SelectMenuItem
+          dir="rtl"
+          itemType="avatar"
+          label="مستخدم"
+          addonText="نشط"
+        />
+        <SelectMenuItem
+          dir="rtl"
+          itemType="company"
+          label="شركة"
+          addonText="مساحة عمل"
+        />
+        <SelectMenuItem
+          dir="rtl"
+          itemType="payment"
+          label="بطاقة تنتهي بـ 2048"
+          addonText="افتراضي"
+        />
+        <SelectMenuItem
+          dir="rtl"
+          itemType="dot"
+          label="حالة نشطة"
+          addonText="متصل"
+          selected
+        />
+      </Select>
+    </div>
+  )
+}

package/registry/examples/sheet-demo.tsx

@@ -1,47 +1,47 @@
-import { Button } from "@/components/ui/button"
-import {
-  Sheet,
-  SheetBody,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-
-export function SheetDemo() {
-  return (
-    <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
-      {(["start", "end", "top", "bottom"] as const).map((side) => (
-        <Sheet key={side}>
-          <SheetTrigger asChild>
-            <Button size="sm" variant="outline">
-              {side}
-            </Button>
-          </SheetTrigger>
-          <SheetContent side={side}>
-            <SheetHeader>
-              <SheetTitle>Workspace settings</SheetTitle>
-              <SheetDescription>
-                Review billing, access, and notification settings.
-              </SheetDescription>
-            </SheetHeader>
-            <SheetBody>
-              <div className="grid gap-[var(--bh-space-md-8)] text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]">
-                <p>Sheets are suited to contextual workflows that need more space than a popover.</p>
-                <p>Use logical start and end sides so the panel mirrors in RTL surfaces.</p>
-              </div>
-            </SheetBody>
-            <SheetFooter>
-              <Button size="sm" variant="soft">
-                Cancel
-              </Button>
-              <Button size="sm">Save changes</Button>
-            </SheetFooter>
-          </SheetContent>
-        </Sheet>
-      ))}
-    </div>
-  )
-}
+import { Button } from "@/components/ui/button"
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
+
+export function SheetDemo() {
+  return (
+    <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+      {(["start", "end", "top", "bottom"] as const).map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button size="sm" variant="outline">
+              {side}
+            </Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>Workspace settings</SheetTitle>
+              <SheetDescription>
+                Review billing, access, and notification settings.
+              </SheetDescription>
+            </SheetHeader>
+            <SheetBody>
+              <div className="grid gap-[var(--bh-space-md-8)] text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]">
+                <p>Sheets are suited to contextual workflows that need more space than a popover.</p>
+                <p>Use logical start and end sides so the panel mirrors in RTL surfaces.</p>
+              </div>
+            </SheetBody>
+            <SheetFooter>
+              <Button size="sm" variant="soft">
+                Cancel
+              </Button>
+              <Button size="sm">Save changes</Button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  )
+}

package/registry/examples/shimmer-text-demo.tsx

@@ -0,0 +1,20 @@
+import { ShimmerText } from "@/components/ui/shimmer-text"
+
+export function ShimmerTextDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-3xl-16)] text-[length:var(--bh-text-body-sm-regular-font-size)] leading-[var(--bh-text-body-sm-regular-line-height)] text-[var(--bh-content-default)]">
+      <p className="m-0">
+        Searching the workspace for{" "}
+        <ShimmerText tone="default">billing/invoices.ts</ShimmerText>
+      </p>
+
+      <p className="m-0">
+        <ShimmerText>Reading 12 files</ShimmerText>
+      </p>
+
+      <p className="m-0" dir="rtl">
+        جارٍ البحث في <ShimmerText tone="default">billing/invoices.ts</ShimmerText>
+      </p>
+    </div>
+  )
+}

package/registry/examples/sidebar-demo.tsx

@@ -1,57 +1,101 @@
-import { HomeIcon, SettingsIcon, UsersIcon } from "lucide-react"
-
-import {
-  Sidebar,
-  SidebarBody,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/components/ui/sidebar"
-
-export function SidebarDemo() {
-  return (
-    <SidebarProvider className="flex h-[var(--bh-space-18xl-320)]" defaultCollapsed={false}>
-      <Sidebar>
-        <SidebarHeader>
-          <div className="min-w-0 flex-1 text-sm font-semibold group-data-[collapsed=true]/sidebar:hidden">
-            Banhaten
-          </div>
-          <SidebarTrigger />
-        </SidebarHeader>
-        <SidebarBody>
-          <SidebarGroup>
-            <SidebarGroupLabel>Workspace</SidebarGroupLabel>
-            <SidebarMenu>
-              <SidebarMenuItem>
-                <SidebarMenuButton active icon={<HomeIcon />}>
-                  Overview
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-              <SidebarMenuItem>
-                <SidebarMenuButton icon={<UsersIcon />}>Members</SidebarMenuButton>
-              </SidebarMenuItem>
-              <SidebarMenuItem>
-                <SidebarMenuButton icon={<SettingsIcon />}>Settings</SidebarMenuButton>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          </SidebarGroup>
-        </SidebarBody>
-        <SidebarFooter>
-          <SidebarMenuButton icon={<SettingsIcon />}>Admin</SidebarMenuButton>
-        </SidebarFooter>
-      </Sidebar>
-      <SidebarInset asChild>
-        <div className="grid min-w-0 flex-1 place-items-center bg-[var(--bh-bg-subtle)] p-[var(--bh-space-4xl-20)] text-sm text-[var(--bh-content-subtle)]">
-          App content
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
-  )
-}
+import {
+  CreditCardIcon,
+  InboxIcon,
+  LayoutGridIcon,
+  SettingsIcon,
+  UsersIcon,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import {
+  Sidebar,
+  SidebarBody,
+  SidebarFooter,
+  SidebarFooterUser,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarHeaderWorkspaceSwitch,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarProvider,
+} from "@/components/ui/sidebar"
+
+export function SidebarDemo() {
+  return (
+    <SidebarProvider className="flex h-[var(--bh-space-19xl-384)]">
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarHeaderWorkspaceSwitch
+            image={
+              <span className="grid size-full place-items-center bg-[var(--bh-bg-brand-default)] text-xs font-semibold text-[var(--bh-content-on-brand)]">
+                AC
+              </span>
+            }
+            label="Acme Inc"
+          />
+        </SidebarHeader>
+        <SidebarBody>
+          <SidebarGroup>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton icon={<LayoutGridIcon />}>
+                  Overview
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton icon={<CreditCardIcon />}>
+                  Transactions
+                </SidebarMenuButton>
+                <SidebarMenuSub>
+                  <SidebarMenuItem>
+                    <SidebarMenuSubButton showLine>
+                      Payments
+                    </SidebarMenuSubButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuSubButton active showLine>
+                      Refunds
+                    </SidebarMenuSubButton>
+                  </SidebarMenuItem>
+                </SidebarMenuSub>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  badge={<SidebarMenuBadge>12</SidebarMenuBadge>}
+                  icon={<InboxIcon />}
+                >
+                  Inbox
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton icon={<UsersIcon />}>Customers</SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton icon={<SettingsIcon />}>Settings</SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarBody>
+        <SidebarFooter>
+          <SidebarFooterUser
+            avatar={
+              <Avatar aria-label="Olivia Rhye" className="size-full" size="sm">
+                <AvatarFallback size="sm">OR</AvatarFallback>
+              </Avatar>
+            }
+            name="Olivia Rhye"
+            supportText="olivia@acme.com"
+          />
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset className="grid min-w-0 place-items-center bg-[var(--bh-bg-subtle)] p-[var(--bh-space-4xl-20)] text-sm text-[var(--bh-content-subtle)]">
+        App content
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

package/registry/examples/slider-demo.tsx

@@ -1,31 +1,31 @@
-import { Slider } from "@/components/ui/slider"
-
-export function SliderDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-6xl-32)]">
-      <Slider
-        aria-label="Budget amount"
-        defaultValue={[40]}
-        indicator="upper-tooltip"
-      />
-
-      <Slider
-        aria-label="Savings range"
-        ariaLabels={["Minimum savings", "Maximum savings"]}
-        defaultValue={[25, 75]}
-        indicator="lower-text"
-        minStepsBetweenThumbs={4}
-      />
-
-      <div className="flex h-[calc(var(--bh-space-13xl-160)_+_var(--bh-space-3xl-16))] items-center">
-        <Slider
-          aria-label="Risk tolerance"
-          className="h-[var(--bh-space-13xl-160)]"
-          defaultValue={[60]}
-          orientation="vertical"
-          tone="warning"
-        />
-      </div>
-    </div>
-  )
-}
+import { Slider } from "@/components/ui/slider"
+
+export function SliderDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-6xl-32)]">
+      <Slider
+        aria-label="Budget amount"
+        defaultValue={[40]}
+        indicator="upper-tooltip"
+      />
+
+      <Slider
+        aria-label="Savings range"
+        ariaLabels={["Minimum savings", "Maximum savings"]}
+        defaultValue={[25, 75]}
+        indicator="lower-text"
+        minStepsBetweenThumbs={4}
+      />
+
+      <div className="flex h-[calc(var(--bh-space-13xl-160)_+_var(--bh-space-3xl-16))] items-center">
+        <Slider
+          aria-label="Risk tolerance"
+          className="h-[var(--bh-space-13xl-160)]"
+          defaultValue={[60]}
+          orientation="vertical"
+          tone="warning"
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -1,61 +1,61 @@
-import {
-  arabicSocialButtonMessages,
-  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-[var(--bh-space-5xl-24)]">
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        {socialPlatforms.map((platform) => (
-          <SocialButton key={platform} platform={platform} />
-        ))}
-      </div>
-
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        {socialPlatforms.map((platform) => (
-          <SocialButton key={platform} platform={platform} variant="outline" />
-        ))}
-      </div>
-
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        {socialPlatforms.map((platform) => (
-          <SocialButton key={platform} platform={platform} size="icon" />
-        ))}
-      </div>
-
-      <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        {socialPlatforms.map((platform) => (
-          <SocialButton
-            key={platform}
-            dir="rtl"
-            messages={arabicSocialButtonMessages}
-            platform={platform}
-          />
-        ))}
-      </div>
-
-      <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        {socialPlatforms.map((platform) => (
-          <SocialButton
-            key={platform}
-            dir="rtl"
-            messages={arabicSocialButtonMessages}
-            platform={platform}
-            variant="outline"
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
+import {
+  arabicSocialButtonMessages,
+  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-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} platform={platform} />
+        ))}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} platform={platform} variant="outline" />
+        ))}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} platform={platform} size="icon" />
+        ))}
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        {socialPlatforms.map((platform) => (
+          <SocialButton
+            key={platform}
+            dir="rtl"
+            messages={arabicSocialButtonMessages}
+            platform={platform}
+          />
+        ))}
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        {socialPlatforms.map((platform) => (
+          <SocialButton
+            key={platform}
+            dir="rtl"
+            messages={arabicSocialButtonMessages}
+            platform={platform}
+            variant="outline"
+          />
+        ))}
+      </div>
+    </div>
+  )
+}