banhaten 0.1.0

package/registry/examples/toolbar-demo.tsx

@@ -0,0 +1,80 @@
+import { DownloadIcon, PlusIcon } from "lucide-react"
+
+import {
+  Toolbar,
+  ToolbarBadge,
+  ToolbarButton,
+  ToolbarFilterButton,
+  ToolbarMoreButton,
+  ToolbarSearch,
+  ToolbarSection,
+  ToolbarSelect,
+  ToolbarText,
+} from "@/components/ui/toolbar"
+
+export function ToolbarDemo() {
+  return (
+    <div className="grid w-full max-w-5xl gap-[var(--bh-space-3xl-16)]">
+      <Toolbar layout="split" wrap>
+        <ToolbarSection grow wrap>
+          <ToolbarSearch aria-label="Search objects" width="default" />
+          <ToolbarSelect value="Status" />
+          <ToolbarSelect value="Owner" />
+          <ToolbarFilterButton />
+        </ToolbarSection>
+        <ToolbarSection wrap align="end">
+          <ToolbarMoreButton />
+          <ToolbarButton variant="soft">
+            <DownloadIcon data-icon="inline-start" />
+            Export
+          </ToolbarButton>
+          <ToolbarButton>
+            <PlusIcon data-icon="inline-start" />
+            Create Object
+          </ToolbarButton>
+        </ToolbarSection>
+      </Toolbar>
+
+      <Toolbar layout="split" wrap>
+        <ToolbarSection grow wrap>
+          <ToolbarSearch aria-label="Search selected rows" width="default" />
+          <ToolbarBadge>24 selected</ToolbarBadge>
+          <ToolbarButton variant="link">Clear filters</ToolbarButton>
+        </ToolbarSection>
+        <ToolbarSection wrap align="end">
+          <ToolbarMoreButton />
+          <ToolbarButton variant="soft">Export selected</ToolbarButton>
+          <ToolbarButton>Bulk Edit</ToolbarButton>
+        </ToolbarSection>
+      </Toolbar>
+
+      <Toolbar wrap>
+        <ToolbarSection wrap>
+          <ToolbarButton>Filter 1</ToolbarButton>
+          <ToolbarButton variant="soft">Filter</ToolbarButton>
+          <ToolbarButton variant="soft">Filter</ToolbarButton>
+          <ToolbarButton variant="soft">Filter</ToolbarButton>
+          <ToolbarButton variant="soft">
+            <span aria-hidden="true" data-icon="inline-start">
+              1
+            </span>
+            Filters - 1
+          </ToolbarButton>
+          <ToolbarButton variant="link">Clear</ToolbarButton>
+        </ToolbarSection>
+      </Toolbar>
+
+      <Toolbar layout="split" wrap>
+        <ToolbarSection wrap>
+          <ToolbarText>Filter by</ToolbarText>
+          <ToolbarSelect value="Label" />
+          <ToolbarButton variant="soft">More filters</ToolbarButton>
+          <ToolbarButton variant="ghost">Save segment</ToolbarButton>
+        </ToolbarSection>
+        <ToolbarSection align="end" grow>
+          <ToolbarSearch aria-label="Search segment" width="default" />
+        </ToolbarSection>
+      </Toolbar>
+    </div>
+  )
+}

package/registry/examples/tooltip-demo.tsx

@@ -0,0 +1,115 @@
+import { InfoIcon, SettingsIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const supportText =
+  "You may notice that we've made some updates to our look and feel."
+const rtlLabel = "\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0643\u062b\u0631"
+const rtlSupportText =
+  "\u0642\u062f \u062a\u0644\u0627\u062d\u0638 \u0623\u0646\u0646\u0627 \u0623\u062c\u0631\u064a\u0646\u0627 \u0628\u0639\u0636 \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0639\u0644\u0649 \u0634\u0643\u0644\u0646\u0627 \u0648\u0645\u0638\u0647\u0631\u0646\u0627."
+
+export function TooltipDemo() {
+  return (
+    <TooltipProvider delayDuration={0}>
+      <div className="grid gap-8">
+        <div className="flex flex-wrap items-center gap-8">
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="secondary" aria-label="More information">
+                <InfoIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent pointerPosition="top-left">
+              More information
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="outline" aria-label="Settings help">
+                <SettingsIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent pointerPosition="bottom-center" variant="default">
+              More information
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="ghost-primary" aria-label="No pointer help">
+                <InfoIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent pointerPosition="none" showPointer={false}>
+              More information
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-8">
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button variant="secondary">Dark large</Button>
+            </TooltipTrigger>
+            <TooltipContent
+              pointerPosition="center-right"
+              size="lg"
+              supportText={supportText}
+            >
+              More information
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button variant="outline">Default large</Button>
+            </TooltipTrigger>
+            <TooltipContent
+              pointerPosition="top-center"
+              size="lg"
+              supportText={supportText}
+              variant="default"
+            >
+              More information
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        <div dir="rtl" className="flex flex-wrap items-center gap-8">
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="secondary" aria-label={rtlLabel}>
+                <InfoIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent dir="rtl" pointerPosition="top-left">
+              {rtlLabel}
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button variant="outline">{rtlLabel}</Button>
+            </TooltipTrigger>
+            <TooltipContent
+              dir="rtl"
+              pointerPosition="top-left"
+              size="lg"
+              supportText={rtlSupportText}
+              variant="default"
+            >
+              {rtlLabel}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+    </TooltipProvider>
+  )
+}

package/registry/hooks/use-direction.ts

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+
+export type Direction = "ltr" | "rtl"
+
+export function useDirection(defaultDirection: Direction = "ltr") {
+  const [direction, setDirection] = React.useState<Direction>(defaultDirection)
+
+  React.useEffect(() => {
+    const htmlDirection = document.documentElement.getAttribute("dir")
+
+    if (htmlDirection === "ltr" || htmlDirection === "rtl") {
+      setDirection(htmlDirection)
+      return
+    }
+
+    document.documentElement.setAttribute("dir", defaultDirection)
+  }, [defaultDirection])
+
+  const updateDirection = React.useCallback((nextDirection: Direction) => {
+    document.documentElement.setAttribute("dir", nextDirection)
+    setDirection(nextDirection)
+  }, [])
+
+  return [direction, updateDirection] as const
+}