banhaten 0.4.0 → 0.5.0

package/registry/examples/input-demo.tsx

@@ -1,87 +1,87 @@
-import { Input } from "@/components/ui/input"
-
-const demoTags = [{ label: "Label" }, { label: "Label" }, { label: "Label" }]
-const demoRtlTags = [
-  { label: "\u0645\u0644\u0635\u0642" },
-  { label: "\u0645\u0644\u0635\u0642" },
-  { label: "\u0645\u0644\u0635\u0642" },
-]
-
-const demoInputProps = {
-  buttonLabel: "Button",
-  errorMessage: "Error message",
-  inlineLeadingAddon: "https://",
-  inlineTrailingAddon: ".com",
-  label: "Label",
-  leadingAddon: "https://",
-  message: "This is a hint text",
-  optionalText: "(Optional)",
-  placeholder: "Placeholder",
-  quantityLabel: "Quantity",
-  trailingAddon: ".com",
-  valueText: "Text here",
-}
-
-const demoRtlInputProps = {
-  ...demoInputProps,
-  errorMessage: "\u0631\u0633\u0627\u0644\u0629 \u062e\u0637\u0623",
-  label: "\u0645\u0644\u0635\u0642",
-  message: "\u0646\u0635 \u062a\u0648\u0636\u064a\u062d\u064a",
-  optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
-  placeholder: "\u0627\u0644\u0646\u0635",
-  valueText: "\u0646\u0635 \u0647\u0646\u0627",
-}
-
-export function InputDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
-        <Input {...demoInputProps} />
-        <Input {...demoInputProps} state="filled" />
-        <Input {...demoInputProps} state="error" />
-        <Input {...demoInputProps} state="disabled" />
-      </div>
-
-      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
-        <Input {...demoInputProps} kind="shortcut" />
-        <Input {...demoInputProps} kind="add-on" />
-        <Input {...demoInputProps} kind="inline-add-on" />
-        <Input {...demoInputProps} kind="tags" state="filled" tags={demoTags} />
-        <Input
-          {...demoInputProps}
-          kind="inline-tags"
-          state="filled"
-          tags={demoTags}
-        />
-      </div>
-
-      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
-        <Input {...demoInputProps} kind="leading-dropdown" />
-        <Input {...demoInputProps} kind="trailing-dropdown" />
-        <Input {...demoInputProps} kind="leading-button" />
-        <Input {...demoInputProps} kind="trailing-button" />
-        <Input {...demoInputProps} kind="quantity" state="filled" valueText="1" />
-        <Input {...demoInputProps} kind="quantity-2" state="filled" valueText="1" />
-      </div>
-
-      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
-        <Input {...demoInputProps} size="md" />
-        <Input {...demoInputProps} size="md" variant="soft" />
-        <Input {...demoInputProps} size="md" variant="soft" state="error" />
-      </div>
-
-      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
-        <Input {...demoRtlInputProps} dir="rtl" />
-        <Input {...demoRtlInputProps} dir="rtl" state="filled" />
-        <Input {...demoRtlInputProps} dir="rtl" state="error" />
-        <Input
-          {...demoRtlInputProps}
-          dir="rtl"
-          kind="inline-tags"
-          state="filled"
-          tags={demoRtlTags}
-        />
-      </div>
-    </div>
-  )
-}
+import { Input } from "@/components/ui/input"
+
+const demoTags = [{ label: "Label" }, { label: "Label" }, { label: "Label" }]
+const demoRtlTags = [
+  { label: "\u0645\u0644\u0635\u0642" },
+  { label: "\u0645\u0644\u0635\u0642" },
+  { label: "\u0645\u0644\u0635\u0642" },
+]
+
+const demoInputProps = {
+  buttonLabel: "Button",
+  errorMessage: "Error message",
+  inlineLeadingAddon: "https://",
+  inlineTrailingAddon: ".com",
+  label: "Label",
+  leadingAddon: "https://",
+  message: "This is a hint text",
+  optionalText: "(Optional)",
+  placeholder: "Placeholder",
+  quantityLabel: "Quantity",
+  trailingAddon: ".com",
+  valueText: "Text here",
+}
+
+const demoRtlInputProps = {
+  ...demoInputProps,
+  errorMessage: "\u0631\u0633\u0627\u0644\u0629 \u062e\u0637\u0623",
+  label: "\u0645\u0644\u0635\u0642",
+  message: "\u0646\u0635 \u062a\u0648\u0636\u064a\u062d\u064a",
+  optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
+  placeholder: "\u0627\u0644\u0646\u0635",
+  valueText: "\u0646\u0635 \u0647\u0646\u0627",
+}
+
+export function InputDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
+        <Input {...demoInputProps} />
+        <Input {...demoInputProps} state="filled" />
+        <Input {...demoInputProps} state="error" />
+        <Input {...demoInputProps} state="disabled" />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
+        <Input {...demoInputProps} kind="shortcut" />
+        <Input {...demoInputProps} kind="add-on" />
+        <Input {...demoInputProps} kind="inline-add-on" />
+        <Input {...demoInputProps} kind="tags" state="filled" tags={demoTags} />
+        <Input
+          {...demoInputProps}
+          kind="inline-tags"
+          state="filled"
+          tags={demoTags}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
+        <Input {...demoInputProps} kind="leading-dropdown" />
+        <Input {...demoInputProps} kind="trailing-dropdown" />
+        <Input {...demoInputProps} kind="leading-button" />
+        <Input {...demoInputProps} kind="trailing-button" />
+        <Input {...demoInputProps} kind="quantity" state="filled" valueText="1" />
+        <Input {...demoInputProps} kind="quantity-2" state="filled" valueText="1" />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
+        <Input {...demoInputProps} size="md" />
+        <Input {...demoInputProps} size="md" variant="soft" />
+        <Input {...demoInputProps} size="md" variant="soft" state="error" />
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
+        <Input {...demoRtlInputProps} dir="rtl" />
+        <Input {...demoRtlInputProps} dir="rtl" state="filled" />
+        <Input {...demoRtlInputProps} dir="rtl" state="error" />
+        <Input
+          {...demoRtlInputProps}
+          dir="rtl"
+          kind="inline-tags"
+          state="filled"
+          tags={demoRtlTags}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -1,16 +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>
-  )
-}
+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/input-otp-demo.tsx

@@ -1,72 +1,72 @@
-import { InputOTP } from "@/components/ui/input-otp"
-
-export function InputOTPDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
-        <InputOTP
-          label="Verification code"
-          message="Enter the code from your authenticator."
-          name="verification-code"
-        />
-        <InputOTP
-          defaultValue="482159"
-          label="Filled code"
-          state="filled"
-        />
-        <InputOTP
-          defaultValue="482"
-          errorMessage="The code is incomplete."
-          label="Recovery code"
-          state="error"
-        />
-        <InputOTP
-          defaultValue="482159"
-          label="Disabled code"
-          state="disabled"
-        />
-      </div>
-
-      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
-        <InputOTP
-          defaultValue="482159"
-          label="Masked code"
-          mask
-          state="filled"
-        />
-        <InputOTP
-          defaultValue="4821"
-          groupSize={2}
-          label="Four digit code"
-          length={4}
-          size="md"
-          state="filled"
-          variant="soft"
-        />
-        <InputOTP
-          defaultValue="48215983"
-          groupSize={4}
-          label="Backup code"
-          length={8}
-          state="filled"
-        />
-      </div>
-
-      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
-        <InputOTP
-          defaultValue="482159"
-          dir="rtl"
-          label="رمز التحقق"
-          message="أدخل الرمز المرسل إليك."
-          state="filled"
-        />
-        <InputOTP
-          dir="rtl"
-          errorMessage="الرمز غير مكتمل."
-          label="رمز الأمان"
-          state="error"
-        />
-      </div>
-    </div>
-  )
-}
+import { InputOTP } from "@/components/ui/input-otp"
+
+export function InputOTPDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
+        <InputOTP
+          label="Verification code"
+          message="Enter the code from your authenticator."
+          name="verification-code"
+        />
+        <InputOTP
+          defaultValue="482159"
+          label="Filled code"
+          state="filled"
+        />
+        <InputOTP
+          defaultValue="482"
+          errorMessage="The code is incomplete."
+          label="Recovery code"
+          state="error"
+        />
+        <InputOTP
+          defaultValue="482159"
+          label="Disabled code"
+          state="disabled"
+        />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
+        <InputOTP
+          defaultValue="482159"
+          label="Masked code"
+          mask
+          state="filled"
+        />
+        <InputOTP
+          defaultValue="4821"
+          groupSize={2}
+          label="Four digit code"
+          length={4}
+          size="md"
+          state="filled"
+          variant="soft"
+        />
+        <InputOTP
+          defaultValue="48215983"
+          groupSize={4}
+          label="Backup code"
+          length={8}
+          state="filled"
+        />
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
+        <InputOTP
+          defaultValue="482159"
+          dir="rtl"
+          label="رمز التحقق"
+          message="أدخل الرمز المرسل إليك."
+          state="filled"
+        />
+        <InputOTP
+          dir="rtl"
+          errorMessage="الرمز غير مكتمل."
+          label="رمز الأمان"
+          state="error"
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/item-demo.tsx

@@ -1,46 +1,46 @@
-import { ChevronRightIcon, FileTextIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-} from "@/components/ui/item"
-
-export function ItemDemo() {
-  return (
-    <ItemGroup aria-label="Recent documents">
-      <Item role="listitem" variant="outline">
-        <ItemMedia>
-          <FileTextIcon aria-hidden="true" />
-        </ItemMedia>
-        <ItemContent>
-          <ItemTitle>Launch checklist</ItemTitle>
-          <ItemDescription>Updated five minutes ago</ItemDescription>
-        </ItemContent>
-        <ItemActions>
-          <Button aria-label="Open Launch checklist" size="icon" variant="ghost">
-            <ChevronRightIcon aria-hidden="true" data-rtl-flip="true" />
-          </Button>
-        </ItemActions>
-      </Item>
-      <ItemSeparator />
-      <div dir="rtl">
-        <Item role="listitem" variant="muted">
-          <ItemMedia>
-            <FileTextIcon aria-hidden="true" />
-          </ItemMedia>
-          <ItemContent>
-            <ItemTitle>{"\u062e\u0637\u0629 \u0627\u0644\u0625\u0637\u0644\u0627\u0642"}</ItemTitle>
-            <ItemDescription>{"\u062a\u0645 \u0627\u0644\u062a\u062d\u062f\u064a\u062b \u0645\u0646\u0630 \u062e\u0645\u0633 \u062f\u0642\u0627\u0626\u0642"}</ItemDescription>
-          </ItemContent>
-        </Item>
-      </div>
-    </ItemGroup>
-  )
-}
+import { ChevronRightIcon, FileTextIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "@/components/ui/item"
+
+export function ItemDemo() {
+  return (
+    <ItemGroup aria-label="Recent documents">
+      <Item role="listitem" variant="outline">
+        <ItemMedia>
+          <FileTextIcon aria-hidden="true" />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Launch checklist</ItemTitle>
+          <ItemDescription>Updated five minutes ago</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button aria-label="Open Launch checklist" size="icon" variant="ghost">
+            <ChevronRightIcon aria-hidden="true" data-rtl-flip="true" />
+          </Button>
+        </ItemActions>
+      </Item>
+      <ItemSeparator />
+      <div dir="rtl">
+        <Item role="listitem" variant="muted">
+          <ItemMedia>
+            <FileTextIcon aria-hidden="true" />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>{"\u062e\u0637\u0629 \u0627\u0644\u0625\u0637\u0644\u0627\u0642"}</ItemTitle>
+            <ItemDescription>{"\u062a\u0645 \u0627\u0644\u062a\u062d\u062f\u064a\u062b \u0645\u0646\u0630 \u062e\u0645\u0633 \u062f\u0642\u0627\u0626\u0642"}</ItemDescription>
+          </ItemContent>
+        </Item>
+      </div>
+    </ItemGroup>
+  )
+}

package/registry/examples/kbd-demo.tsx

@@ -1,12 +1,12 @@
-import { Kbd, Shortcut } from "@/components/ui/kbd"
-
-export function KbdDemo() {
-  return (
-    <div className="flex flex-wrap items-center gap-[var(--bh-space-md-8)]">
-      <Kbd>⌘</Kbd>
-      <Kbd>K</Kbd>
-      <Kbd size="md">Shift</Kbd>
-      <Shortcut keys={["Mod", "K"]} />
-    </div>
-  )
-}
+import { Kbd, Shortcut } from "@/components/ui/kbd"
+
+export function KbdDemo() {
+  return (
+    <div className="flex flex-wrap items-center gap-[var(--bh-space-md-8)]">
+      <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+      <Kbd size="md">Shift</Kbd>
+      <Shortcut keys={["Mod", "K"]} />
+    </div>
+  )
+}

package/registry/examples/label-demo.tsx

@@ -1,20 +1,20 @@
-import { Checkbox } from "@/components/ui/checkbox"
-import { Label } from "@/components/ui/label"
-
-export function LabelDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-3xl-16)]">
-      <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>
-  )
-}
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+
+export function LabelDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
+      <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>
+  )
+}