banhaten 0.1.2 → 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/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/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>
+  )
+}