banhaten 0.1.1 → 0.1.3

package/registry/examples/sidebar-demo.tsx

@@ -0,0 +1,55 @@
+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-80" 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 className="grid 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/skeleton-demo.tsx

@@ -0,0 +1,56 @@
+import {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonCard,
+  SkeletonForm,
+  SkeletonInput,
+  SkeletonList,
+  SkeletonTable,
+  SkeletonText,
+} from "@/components/ui/skeleton"
+
+export function SkeletonDemo() {
+  return (
+    <div className="grid w-full max-w-5xl gap-[var(--bh-space-5xl-24)]">
+      <div className="grid gap-[var(--bh-space-4xl-20)] lg:grid-cols-2">
+        <div className="grid gap-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-5xl-24)]">
+          <div className="flex items-start gap-[var(--bh-space-xl-12)]">
+            <SkeletonAvatar />
+            <SkeletonText
+              className="flex-1"
+              lineCount={3}
+              widths={["76%", "92%", "52%"]}
+            />
+          </div>
+          <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+            <SkeletonButton size="sm" />
+            <SkeletonButton size="icon" />
+          </div>
+        </div>
+
+        <SkeletonForm fields={3} />
+      </div>
+
+      <div className="grid gap-[var(--bh-space-4xl-20)] xl:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
+        <SkeletonCard />
+        <SkeletonTable columns={4} rows={4} />
+      </div>
+
+      <div className="grid gap-[var(--bh-space-4xl-20)] lg:grid-cols-2">
+        <SkeletonList rows={4} />
+        <div
+          dir="rtl"
+          className="grid gap-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-5xl-24)]"
+        >
+          <SkeletonInput />
+          <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+            <SkeletonButton />
+            <SkeletonButton size="sm" tone="brand" />
+          </div>
+          <Skeleton className="rounded-[var(--bh-radius-full)]" tone="brand" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/examples/spinner-demo.tsx

@@ -1,6 +1,6 @@
 import type * as React from "react"
 
-import { Spinner } from "@/components/ui/spinner"
+import { DynamicSpinner, Spinner } from "@/components/ui/spinner"
 
 export function SpinnerDemo() {
   return (
@@ -18,6 +18,18 @@ export function SpinnerDemo() {
           className="text-danger"
           style={{ "--bh-spinner-size": "24px" } as React.CSSProperties}
         />
+        <DynamicSpinner
+          className="text-primary"
+          style={{ "--bh-spinner-size": "16px" } as React.CSSProperties}
+        />
+        <DynamicSpinner
+          className="text-success"
+          style={{ "--bh-spinner-size": "20px" } as React.CSSProperties}
+        />
+        <DynamicSpinner
+          className="text-danger"
+          style={{ "--bh-spinner-size": "24px" } as React.CSSProperties}
+        />
       </div>
 
       <div className="flex flex-wrap items-center gap-3">
@@ -31,6 +43,16 @@ export function SpinnerDemo() {
           />
           Loading
         </div>
+        <div
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground"
+          role="status"
+        >
+          <DynamicSpinner
+            className="text-current"
+            style={{ "--bh-spinner-size": "18px" } as React.CSSProperties}
+          />
+          Syncing
+        </div>
       </div>
     </div>
   )

package/registry/examples/tabs-demo.tsx

@@ -0,0 +1,13 @@
+import { Tabs } from "@/components/ui/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/textarea-demo.tsx

@@ -24,7 +24,7 @@ const demoRtlTextareaProps = {
     "\u062a\u0648\u0641\u0631 \u0628\u0646\u064a\u062a\u0646\u0627 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 \u0644\u0644\u0625\u0633\u062a\u062f\u0644\u0627\u0644 \u0623\u0648\u0642\u0627\u062a \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0642\u0635\u064a\u0631\u0629 \u0644\u0644\u063a\u0627\u064a\u0629.",
   errorMessage: "\u0631\u0633\u0627\u0644\u0629 \u062e\u0637\u0623",
   label: "\u0645\u0644\u0635\u0642",
-  message: "\u0647\u0630\u0647 \u0646\u0635 \u062a\u0644\u0645\u064a\u062d.",
+  message: "\u0646\u0635 \u062a\u0648\u0636\u064a\u062d\u064a",
   optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
   tagInputText: "\u0628\u0631\u0627\u0646\u062f\u0648...",
 }

package/registry/examples/toast-demo.tsx

@@ -0,0 +1,35 @@
+import { Button } from "@/components/ui/button"
+import { Toaster, toast } from "@/components/ui/toast"
+
+export function ToastDemo() {
+  return (
+    <div className="grid gap-4">
+      <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+        <Button size="sm" onClick={() => toast.success("Project saved")}>
+          Success
+        </Button>
+        <Button size="sm" variant="warning" onClick={() => toast.warning("Review required")}>
+          Warning
+        </Button>
+        <Button size="sm" variant="danger" onClick={() => toast.danger("Unable to publish")}>
+          Danger
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() =>
+            toast.info("Invite sent", {
+              action: {
+                label: "Undo",
+                onClick: () => toast("Invite cancelled"),
+              },
+            })
+          }
+        >
+          Action
+        </Button>
+      </div>
+      <Toaster />
+    </div>
+  )
+}