banhaten 0.1.2 → 0.1.3

package/registry/components/toast.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import {
+  Toaster as SonnerToaster,
+  toast as sonnerToast,
+  type ExternalToast,
+  type ToasterProps as SonnerToasterProps,
+} from "sonner"
+
+import { cn } from "@/lib/utils"
+
+type ToastIntent = "default" | "success" | "danger" | "warning" | "info"
+type ToastSide = "start" | "end"
+type ToastOptions = ExternalToast & {
+  intent?: ToastIntent
+}
+type ToasterProps = Omit<SonnerToasterProps, "position"> & {
+  dir?: "ltr" | "rtl"
+  position?: SonnerToasterProps["position"]
+  side?: ToastSide
+}
+
+const intentClassNames: Record<ToastIntent, string> = {
+  danger:
+    "[--bh-toast-accent:var(--bh-content-danger-default)] [--bh-toast-accent-bg:var(--bh-bg-danger-subtle)]",
+  default:
+    "[--bh-toast-accent:var(--bh-content-brand-default)] [--bh-toast-accent-bg:var(--bh-bg-brand-subtle)]",
+  info:
+    "[--bh-toast-accent:var(--bh-content-brand-default)] [--bh-toast-accent-bg:var(--bh-bg-info-subtle)]",
+  success:
+    "[--bh-toast-accent:var(--bh-content-success-default)] [--bh-toast-accent-bg:var(--bh-bg-success-subtle)]",
+  warning:
+    "[--bh-toast-accent:var(--bh-content-warning-default)] [--bh-toast-accent-bg:var(--bh-bg-warning-subtle)]",
+}
+
+const toastClassName = [
+  "border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-component-default)]",
+  "rounded-[var(--bh-radius-xl-10)] font-[var(--bh-font-family)]",
+  "[--normal-bg:var(--bh-bg-raised)] [--normal-border:var(--bh-border-subtle)] [--normal-text:var(--bh-content-default)]",
+  "[--success-bg:var(--bh-bg-raised)] [--success-border:var(--bh-border-success-subtle)] [--success-text:var(--bh-content-default)]",
+  "[--error-bg:var(--bh-bg-raised)] [--error-border:var(--bh-border-danger-subtle)] [--error-text:var(--bh-content-default)]",
+  "[--warning-bg:var(--bh-bg-raised)] [--warning-border:var(--bh-border-warning-subtle)] [--warning-text:var(--bh-content-default)]",
+  "[--info-bg:var(--bh-bg-raised)] [--info-border:var(--bh-border-info-subtle)] [--info-text:var(--bh-content-default)]",
+].join(" ")
+
+function Toaster({
+  className,
+  closeButton = true,
+  dir,
+  position,
+  richColors = false,
+  side = "end",
+  toastOptions,
+  ...props
+}: ToasterProps) {
+  const resolvedPosition = position ?? getToastPosition(dir, side)
+  const mergedToastOptions: ToasterProps["toastOptions"] = {
+    ...toastOptions,
+    classNames: {
+      ...toastOptions?.classNames,
+      toast: cn(toastClassName, toastOptions?.classNames?.toast),
+      title: cn(
+        "text-[length:var(--bh-text-body-sm-semibold-font-size)] font-[var(--bh-text-body-sm-semibold-font-weight)] leading-[var(--bh-text-body-sm-semibold-line-height)] tracking-[var(--bh-text-body-sm-semibold-letter-spacing)]",
+        toastOptions?.classNames?.title
+      ),
+      description: cn(
+        "text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        toastOptions?.classNames?.description
+      ),
+      actionButton: cn(
+        "rounded-[var(--bh-control-default)] bg-[var(--bh-interactive-primary-default)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-on-color)]",
+        toastOptions?.classNames?.actionButton
+      ),
+      cancelButton: cn(
+        "rounded-[var(--bh-control-default)] bg-[var(--bh-bg-neutral-soft)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-default)]",
+        toastOptions?.classNames?.cancelButton
+      ),
+    },
+  }
+
+  return (
+    <SonnerToaster
+      className={cn("toaster group", className)}
+      closeButton={closeButton}
+      dir={dir}
+      position={resolvedPosition}
+      richColors={richColors}
+      toastOptions={mergedToastOptions}
+      {...props}
+    />
+  )
+}
+
+function showToast(message: React.ReactNode, options: ToastOptions = {}) {
+  const { intent = "default", className, ...rest } = options
+  return sonnerToast(message, {
+    className: cn(intentClassNames[intent], className),
+    ...rest,
+  })
+}
+
+const toast = Object.assign(showToast, {
+  danger: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "danger" }),
+  dismiss: sonnerToast.dismiss,
+  error: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "danger" }),
+  info: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "info" }),
+  loading: sonnerToast.loading,
+  promise: sonnerToast.promise,
+  success: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "success" }),
+  warning: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "warning" }),
+})
+
+function getToastPosition(
+  dir: ToasterProps["dir"],
+  side: ToastSide
+): SonnerToasterProps["position"] {
+  if (side === "start") {
+    return dir === "rtl" ? "top-right" : "top-left"
+  }
+
+  return dir === "rtl" ? "top-left" : "top-right"
+}
+
+export { Toaster, toast }
+export type { ToastIntent, ToastOptions, ToasterProps }

package/registry/examples/alert-dialog-demo.tsx

@@ -0,0 +1,42 @@
+import { Button } from "@/components/ui/button"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+
+export function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button size="sm" variant="danger">
+          Delete project
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogIcon intent="danger" />
+          <AlertDialogTitle>Delete project?</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogBody>
+          <AlertDialogDescription>
+            This action cannot be undone. All environments, deployments, and
+            saved settings will be permanently removed.
+          </AlertDialogDescription>
+        </AlertDialogBody>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Delete project</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/registry/examples/aspect-ratio-demo.tsx

@@ -0,0 +1,11 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio"
+
+export function AspectRatioDemo() {
+  return (
+    <AspectRatio ratio={16 / 9} className="max-w-xl">
+      <div className="flex size-full items-center justify-center bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]">
+        16:9
+      </div>
+    </AspectRatio>
+  )
+}

package/registry/examples/carousel-demo.tsx

@@ -0,0 +1,25 @@
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel"
+
+export function CarouselDemo() {
+  return (
+    <Carousel className="w-full max-w-sm">
+      <CarouselContent>
+        {[1, 2, 3].map((item) => (
+          <CarouselItem key={item}>
+            <div className="flex aspect-video items-center justify-center rounded-xl bg-[var(--bh-bg-neutral-subtle)] text-lg font-semibold">
+              {item}
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}

package/registry/examples/chart-demo.tsx

@@ -0,0 +1,33 @@
+import { Line, LineChart, XAxis, YAxis } from "recharts"
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+
+const data = [
+  { month: "Jan", revenue: 120 },
+  { month: "Feb", revenue: 180 },
+  { month: "Mar", revenue: 150 },
+  { month: "Apr", revenue: 220 },
+]
+
+export function ChartDemo() {
+  return (
+    <ChartContainer config={{ revenue: { color: "var(--bh-chart-1)" } }}>
+      <LineChart data={data}>
+        <XAxis dataKey="month" tickLine={false} axisLine={false} />
+        <YAxis tickLine={false} axisLine={false} width={32} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Line
+          dataKey="revenue"
+          type="monotone"
+          stroke="var(--color-revenue)"
+          strokeWidth={2}
+          dot={false}
+        />
+      </LineChart>
+    </ChartContainer>
+  )
+}

package/registry/examples/collapsible-demo.tsx

@@ -0,0 +1,16 @@
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+
+export function CollapsibleDemo() {
+  return (
+    <Collapsible defaultOpen className="w-full max-w-md rounded-xl border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
+      <CollapsibleTrigger>Workspace details</CollapsibleTrigger>
+      <CollapsibleContent>
+        Billing, members, and audit controls are grouped in this section.
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}

package/registry/examples/command-demo.tsx

@@ -0,0 +1,42 @@
+import { FileTextIcon, SettingsIcon, UserIcon } from "lucide-react"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command"
+
+export function CommandDemo() {
+  return (
+    <Command>
+      <CommandInput />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Pages">
+          <CommandItem value="profile">
+            <UserIcon className="size-4" />
+            Profile
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem value="docs">
+            <FileTextIcon className="size-4" />
+            Docs
+            <CommandShortcut>⌘D</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Actions">
+          <CommandItem value="settings">
+            <SettingsIcon className="size-4" />
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}

package/registry/examples/context-menu-demo.tsx

@@ -0,0 +1,29 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
+
+export function ContextMenuDemo() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-xl border border-dashed border-[var(--bh-border-default)] text-sm">
+        Right click
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuLabel>Project</ContextMenuLabel>
+        <ContextMenuItem>
+          Open
+          <ContextMenuShortcut>⌘O</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>Duplicate</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>Archive</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}

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

@@ -1,4 +1,4 @@
-import { Tabs } from "@/components/ui/expanded/Tabs"
+import { Tabs } from "@/components/ui/tabs"
 
 const tabItems = ["Overview", "Details", "Settings", "Activity", "Files"]
 

package/registry/examples/field-demo.tsx

@@ -0,0 +1,51 @@
+import { Button } from "@/components/ui/button"
+import {
+  Field,
+  FieldContent,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+export function FieldDemo() {
+  return (
+    <FieldSet>
+      <FieldLegend>Account details</FieldLegend>
+      <FieldGroup>
+        <Field>
+          <FieldLabel>Email</FieldLabel>
+          <FieldControl>
+            <Input placeholder="name@example.com" />
+          </FieldControl>
+          <FieldDescription>Use your work email for team access.</FieldDescription>
+        </Field>
+
+        <Field invalid>
+          <FieldLabel>Workspace</FieldLabel>
+          <FieldControl>
+            <Input state="error" valueText="Banhaten" />
+          </FieldControl>
+          <FieldError>Workspace name is already taken.</FieldError>
+        </Field>
+
+        <Field orientation="responsive">
+          <FieldContent>
+            <FieldLabel>Notes</FieldLabel>
+            <FieldDescription>Visible to workspace administrators.</FieldDescription>
+          </FieldContent>
+          <FieldControl>
+            <Textarea placeholder="Add setup notes..." />
+          </FieldControl>
+        </Field>
+
+        <Button size="sm">Save details</Button>
+      </FieldGroup>
+    </FieldSet>
+  )
+}

package/registry/examples/hover-card-demo.tsx

@@ -0,0 +1,23 @@
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
+
+export function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger className="underline underline-offset-4">
+        Workspace profile
+      </HoverCardTrigger>
+      <HoverCardContent>
+        <div className="grid gap-1">
+          <strong>Design System</strong>
+          <span className="text-sm text-[var(--bh-content-subtle)]">
+            Tokens, components, and RTL-ready examples.
+          </span>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}

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

@@ -0,0 +1,16 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+
+export function InputGroupDemo() {
+  return (
+    <InputGroup>
+      <InputGroupAddon>https://</InputGroupAddon>
+      <InputGroupInput aria-label="Workspace URL" defaultValue="banhaten.design" />
+      <InputGroupButton>Save</InputGroupButton>
+    </InputGroup>
+  )
+}

package/registry/examples/kbd-demo.tsx

@@ -0,0 +1,11 @@
+import { Kbd } from "@/components/ui/kbd"
+
+export function KbdDemo() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+      <Kbd size="md">Shift</Kbd>
+    </div>
+  )
+}

package/registry/examples/label-demo.tsx

@@ -0,0 +1,20 @@
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+
+export function LabelDemo() {
+  return (
+    <div className="grid gap-4">
+      <div className="flex items-center gap-[var(--bh-space-md-8)]">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+      <Label optionalText="(Optional)">Project name</Label>
+      <div dir="rtl" className="flex items-center gap-[var(--bh-space-md-8)]">
+        <Checkbox id="terms-rtl" />
+        <Label htmlFor="terms-rtl" required>
+          قبول الشروط والأحكام
+        </Label>
+      </div>
+    </div>
+  )
+}

package/registry/examples/menubar-demo.tsx

@@ -0,0 +1,34 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/components/ui/menubar"
+
+export function MenubarDemo() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New
+            <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>Open</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Export</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Toggle sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}

package/registry/examples/native-select-demo.tsx

@@ -0,0 +1,16 @@
+import { NativeSelect } from "@/components/ui/native-select"
+
+export function NativeSelectDemo() {
+  return (
+    <NativeSelect
+      label="Workspace"
+      defaultValue="design"
+      helperText="Native select for platform forms."
+      options={[
+        { label: "Design", value: "design" },
+        { label: "Engineering", value: "engineering" },
+        { label: "Operations", value: "operations" },
+      ]}
+    />
+  )
+}

package/registry/examples/navigation-menu-demo.tsx

@@ -0,0 +1,29 @@
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "@/components/ui/navigation-menu"
+
+export function NavigationMenuDemo() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Product</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="grid gap-2">
+              <NavigationMenuLink href="#">Components</NavigationMenuLink>
+              <NavigationMenuLink href="#">Tokens</NavigationMenuLink>
+              <NavigationMenuLink href="#">Patterns</NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      <NavigationMenuViewport />
+    </NavigationMenu>
+  )
+}

package/registry/examples/resizable-demo.tsx

@@ -0,0 +1,22 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+
+export function ResizableDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="h-48 rounded-xl border border-[var(--bh-border-subtle)]"
+    >
+      <ResizablePanel defaultSize={35}>
+        <div className="flex size-full items-center justify-center text-sm">Sidebar</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={65}>
+        <div className="flex size-full items-center justify-center text-sm">Content</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}

package/registry/examples/scroll-area-demo.tsx

@@ -0,0 +1,15 @@
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+export function ScrollAreaDemo() {
+  return (
+    <ScrollArea className="h-48 w-72 rounded-xl border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
+      <div className="grid gap-2 p-4">
+        {Array.from({ length: 12 }, (_, index) => (
+          <div key={index} className="rounded-lg bg-[var(--bh-bg-neutral-subtle)] px-3 py-2 text-sm">
+            Activity item {index + 1}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}

package/registry/examples/sheet-demo.tsx

@@ -0,0 +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>
+  )
+}