banhaten 0.3.0 → 0.5.0

package/registry/examples/expanded/file-upload-demo.tsx

@@ -1,60 +1,60 @@
-import {
-  FileUpload,
-  type FileUploadFile,
-} from "@/components/ui/expanded/FileUpload"
-
-const uploadFiles: FileUploadFile[] = [
-  {
-    id: "uploaded",
-    name: "file-name.pdf",
-    sizeLabel: "32mb",
-    status: "uploaded",
-    versionLabel: "v1.2.2",
-  },
-  {
-    id: "uploading",
-    name: "file-name.pdf",
-    sizeLabel: "32mb",
-    status: "uploading",
-    versionLabel: "v1.2.2",
-  },
-  {
-    id: "progress",
-    name: "file-name.pdf",
-    progress: 40,
-    sizeLabel: "32 KB",
-    status: "uploading-progress",
-  },
-  {
-    errorLabel: "Upload failed",
-    id: "error",
-    name: "file-name.pdf",
-    sizeLabel: "32mb",
-    status: "error",
-    versionLabel: "v1.2.2",
-  },
-]
-
-export function FileUploadDemo() {
-  return (
-    <div className="grid items-start gap-[var(--bh-space-4xl-20)] xl:grid-cols-2">
-      <FileUpload
-        files={uploadFiles}
-        multiple
-      />
-      <FileUpload
-        files={uploadFiles}
-        size="sm"
-      />
-      <FileUpload
-        dropzoneState="hover"
-        files={uploadFiles.slice(0, 1)}
-        variant="button"
-      />
-      <FileUpload
-        disabled
-        files={[]}
-      />
-    </div>
-  )
-}
+import {
+  FileUpload,
+  type FileUploadFile,
+} from "@/components/ui/expanded/FileUpload"
+
+const uploadFiles: FileUploadFile[] = [
+  {
+    id: "uploaded",
+    name: "file-name.pdf",
+    sizeLabel: "32mb",
+    status: "uploaded",
+    versionLabel: "v1.2.2",
+  },
+  {
+    id: "uploading",
+    name: "file-name.pdf",
+    sizeLabel: "32mb",
+    status: "uploading",
+    versionLabel: "v1.2.2",
+  },
+  {
+    id: "progress",
+    name: "file-name.pdf",
+    progress: 40,
+    sizeLabel: "32 KB",
+    status: "uploading-progress",
+  },
+  {
+    errorLabel: "Upload failed",
+    id: "error",
+    name: "file-name.pdf",
+    sizeLabel: "32mb",
+    status: "error",
+    versionLabel: "v1.2.2",
+  },
+]
+
+export function FileUploadDemo() {
+  return (
+    <div className="grid items-start gap-[var(--bh-space-4xl-20)] xl:grid-cols-2">
+      <FileUpload
+        files={uploadFiles}
+        multiple
+      />
+      <FileUpload
+        files={uploadFiles}
+        size="sm"
+      />
+      <FileUpload
+        dropzoneState="hover"
+        files={uploadFiles.slice(0, 1)}
+        variant="button"
+      />
+      <FileUpload
+        disabled
+        files={[]}
+      />
+    </div>
+  )
+}

package/registry/examples/expanded/onboarding-step-demo.tsx

@@ -1,11 +1,11 @@
-import { OnboardingStepListItem } from "@/components/ui/expanded/OnboardingStepListItem"
-
-export function OnboardingStepDemo() {
-  return (
-    <div className="flex gap-[var(--bh-space-md-8)]">
-      <OnboardingStepListItem label="Finished" state="finished" />
-      <OnboardingStepListItem label="Active" state="active" />
-      <OnboardingStepListItem label="Inactive" state="inactive" />
-    </div>
-  )
-}
+import { OnboardingStepListItem } from "@/components/ui/expanded/OnboardingStepListItem"
+
+export function OnboardingStepDemo() {
+  return (
+    <div className="flex gap-[var(--bh-space-md-8)]">
+      <OnboardingStepListItem label="Finished" state="finished" />
+      <OnboardingStepListItem label="Active" state="active" />
+      <OnboardingStepListItem label="Inactive" state="inactive" />
+    </div>
+  )
+}

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

@@ -1,15 +1,15 @@
-import { Slideout } from "@/components/ui/expanded/Slideout"
-
-export function SlideoutDemo() {
-  return (
-    <Slideout
-      actionLabel="Action"
-      closeLabel="Close"
-      primaryActionLabel="Apply"
-      secondaryActionLabel="Cancel"
-      title="Heading"
-    >
-      <p>Slideout content</p>
-    </Slideout>
-  )
-}
+import { Slideout } from "@/components/ui/expanded/Slideout"
+
+export function SlideoutDemo() {
+  return (
+    <Slideout
+      actionLabel="Action"
+      closeLabel="Close"
+      primaryActionLabel="Apply"
+      secondaryActionLabel="Cancel"
+      title="Heading"
+    >
+      <p>Slideout content</p>
+    </Slideout>
+  )
+}

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

@@ -1,29 +1,29 @@
-import { Button } from "@/components/ui/button"
-import { Steps, type StepItem } from "@/components/ui/expanded/Steps"
-
-const stepItems: StepItem[] = Array.from({ length: 6 }, (_, index) => ({
-  actions: (
-    <>
-      <Button size="sm" type="button" variant="default">
-        Button
-      </Button>
-      <Button size="sm" type="button" variant="secondary">
-        Button
-      </Button>
-    </>
-  ),
-  caption: "Caption",
-  label: "Label",
-  number: index + 1,
-  slotContent: <div className="ds-step-slot">Slot content</div>,
-  supportText: "Support",
-}))
-
-export function StepsDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-6xl-32)]">
-      <Steps items={stepItems} />
-      <Steps direction="vertical" items={stepItems} />
-    </div>
-  )
-}
+import { Button } from "@/components/ui/button"
+import { Steps, type StepItem } from "@/components/ui/expanded/Steps"
+
+const stepItems: StepItem[] = Array.from({ length: 6 }, (_, index) => ({
+  actions: (
+    <>
+      <Button size="sm" type="button" variant="default">
+        Button
+      </Button>
+      <Button size="sm" type="button" variant="secondary">
+        Button
+      </Button>
+    </>
+  ),
+  caption: "Caption",
+  label: "Label",
+  number: index + 1,
+  slotContent: <div className="ds-step-slot">Slot content</div>,
+  supportText: "Support",
+}))
+
+export function StepsDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-6xl-32)]">
+      <Steps items={stepItems} />
+      <Steps direction="vertical" items={stepItems} />
+    </div>
+  )
+}

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

@@ -1,13 +1,13 @@
-import { Tabs } from "@/components/ui/tabs"
-
-const tabItems = ["Overview", "Details", "Settings", "Activity", "Files"]
-
-export function TabsDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <Tabs ariaLabel="Tabs" items={tabItems} />
-      <Tabs ariaLabel="Tabs" items={tabItems} variant="segment" />
-      <Tabs ariaLabel="Tabs" items={tabItems} variant="rounded" />
-    </div>
-  )
-}
+import { Tabs } from "@/components/ui/tabs"
+
+const tabItems = ["Overview", "Details", "Settings", "Activity", "Files"]
+
+export function TabsDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <Tabs ariaLabel="Tabs" items={tabItems} />
+      <Tabs ariaLabel="Tabs" items={tabItems} variant="segment" />
+      <Tabs ariaLabel="Tabs" items={tabItems} variant="rounded" />
+    </div>
+  )
+}

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

@@ -1,18 +1,18 @@
-import { Timeline, type TimelineStep } from "@/components/ui/expanded/Timeline"
-
-const timelineSteps: TimelineStep[] = Array.from({ length: 6 }, (_, index) => ({
-  caption: "Caption",
-  date: "Mar 15. 2050",
-  id: `timeline-demo-${index}`,
-  label: "Label",
-  state: "finished",
-}))
-
-export function TimelineDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-6xl-32)]">
-      <Timeline ariaLabel="Timeline" steps={timelineSteps} />
-      <Timeline ariaLabel="Timeline" orientation="horizontal" steps={timelineSteps} />
-    </div>
-  )
-}
+import { Timeline, type TimelineStep } from "@/components/ui/expanded/Timeline"
+
+const timelineSteps: TimelineStep[] = Array.from({ length: 6 }, (_, index) => ({
+  caption: "Caption",
+  date: "Mar 15. 2050",
+  id: `timeline-demo-${index}`,
+  label: "Label",
+  state: "finished",
+}))
+
+export function TimelineDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-6xl-32)]">
+      <Timeline ariaLabel="Timeline" steps={timelineSteps} />
+      <Timeline ariaLabel="Timeline" orientation="horizontal" steps={timelineSteps} />
+    </div>
+  )
+}

package/registry/examples/field-demo.tsx

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

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

@@ -0,0 +1,31 @@
+import {
+  CitationMark,
+  CitationProse,
+  InlineCitations,
+  type CitationSource,
+} from "@/components/ui/inline-citations"
+
+const sources: CitationSource[] = [
+  {
+    host: "arxiv.org",
+    label: "Attention Is All You Need",
+    url: "https://arxiv.org/abs/1706.03762",
+  },
+  {
+    host: "arxiv.org",
+    label: "Efficient Transformers: A Survey",
+    url: "https://arxiv.org/abs/2009.06732",
+  },
+]
+
+export function InlineCitationsDemo() {
+  return (
+    <InlineCitations className="max-w-[var(--bh-space-19xl-384)]" sources={sources}>
+      <CitationProse>
+        Transformers scale well with data and compute
+        <CitationMark n={1} />, though attention is quadratic in sequence length
+        <CitationMark n={2} />.
+      </CitationProse>
+    </InlineCitations>
+  )
+}

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

@@ -0,0 +1,36 @@
+import * as React from "react"
+
+import { Input } from "@/components/ui/input"
+
+export function InputActionsDemo() {
+  const [quantity, setQuantity] = React.useState("1")
+  const [reference, setReference] = React.useState("")
+  const [applied, setApplied] = React.useState("Choose a quantity, then apply your reference.")
+
+  return (
+    <div className="grid gap-[var(--bh-space-xl-12)]">
+      <Input
+        kind="quantity"
+        label="Order quantity"
+        quantityLabel="order quantity"
+        min={0}
+        max={10}
+        step={1}
+        value={quantity}
+        onChange={(event) => setQuantity(event.currentTarget.value)}
+      />
+      <Input
+        kind="trailing-button"
+        label="Order reference"
+        placeholder="Reference"
+        buttonLabel="Apply"
+        value={reference}
+        onChange={(event) => setReference(event.currentTarget.value)}
+        buttonProps={{
+          onClick: () => setApplied(`${quantity || "0"} items${reference ? ` · ${reference}` : ""}`),
+        }}
+      />
+      <p role="status" className="text-[var(--bh-content-subtle)]">{applied}</p>
+    </div>
+  )
+}