banhaten 0.1.0

package/registry/examples/menu-demo.tsx

@@ -0,0 +1,109 @@
+import { ChevronRightIcon, PlusIcon } from "lucide-react"
+
+import {
+  Menu,
+  MenuCaption,
+  MenuItem,
+  MenuItemAction,
+  MenuItemAvatar,
+  MenuItemBadge,
+  MenuItemDescription,
+  MenuItemIcon,
+  MenuItemMeta,
+  MenuItemSwitch,
+  MenuItemText,
+  MenuItemTitle,
+  MenuLabel,
+  MenuProgress,
+  MenuSeparator,
+} from "@/components/ui/menu"
+
+export function MenuDemo() {
+  return (
+    <div className="flex flex-wrap items-start gap-8">
+      <Menu aria-label="Menu">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <MenuItem key={index}>
+            <MenuItemIcon>
+              <PlusIcon />
+            </MenuItemIcon>
+            Text item
+            <MenuItemIcon position="trailing">
+              <ChevronRightIcon data-rtl-flip="true" />
+            </MenuItemIcon>
+          </MenuItem>
+        ))}
+      </Menu>
+
+      <Menu aria-label="Rich menu" width="default">
+        <MenuItem>
+          <MenuItemIcon>
+            <PlusIcon />
+          </MenuItemIcon>
+          <MenuItemAvatar>AG</MenuItemAvatar>
+          <MenuItemText>
+            <MenuItemTitle>Text item</MenuItemTitle>
+          </MenuItemText>
+          <MenuItemSwitch />
+          <MenuItemBadge>Badge</MenuItemBadge>
+          <MenuItemMeta>Text Right</MenuItemMeta>
+          <MenuItemIcon position="trailing">
+            <ChevronRightIcon data-rtl-flip="true" />
+          </MenuItemIcon>
+        </MenuItem>
+
+        <MenuItem kind="multiline">
+          <MenuItemIcon>
+            <PlusIcon />
+          </MenuItemIcon>
+          <MenuItemAvatar size="lg">AG</MenuItemAvatar>
+          <MenuItemText>
+            <MenuItemTitle>Text item</MenuItemTitle>
+            <MenuItemDescription>Supporting text</MenuItemDescription>
+          </MenuItemText>
+          <MenuItemSwitch active />
+          <MenuItemBadge>Badge</MenuItemBadge>
+          <MenuItemMeta>Text Right</MenuItemMeta>
+          <MenuItemIcon position="trailing">
+            <ChevronRightIcon data-rtl-flip="true" />
+          </MenuItemIcon>
+        </MenuItem>
+
+        <MenuItem kind="action">
+          <MenuItemIcon>
+            <PlusIcon />
+          </MenuItemIcon>
+          <MenuItemText>
+            <MenuItemTitle>Text item</MenuItemTitle>
+            <MenuItemDescription>Supporting text</MenuItemDescription>
+          </MenuItemText>
+          <MenuItemAction>Button</MenuItemAction>
+        </MenuItem>
+
+        <MenuItem kind="progress">
+          <MenuProgress indicator="40%" label="Label" optional="(Optional)" />
+        </MenuItem>
+        <MenuSeparator />
+        <MenuItem kind="button">Button</MenuItem>
+        <MenuLabel caption="Caption" label="Label" />
+        <MenuCaption>Lorem ipsum dolor sit amet</MenuCaption>
+      </Menu>
+
+      <div dir="rtl">
+        <Menu aria-label="Arabic menu">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <MenuItem key={index}>
+              <MenuItemIcon>
+                <PlusIcon />
+              </MenuItemIcon>
+              {"\u0639\u0646\u0635\u0631 \u0646\u0635\u064a"}
+              <MenuItemIcon position="trailing">
+                <ChevronRightIcon data-rtl-flip="true" />
+              </MenuItemIcon>
+            </MenuItem>
+          ))}
+        </Menu>
+      </div>
+    </div>
+  )
+}

package/registry/examples/modal-demo.tsx

@@ -0,0 +1,16 @@
+import { Modal } from "@/components/ui/modal"
+
+export function ModalDemo() {
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-start gap-6">
+        <Modal size="sm" />
+        <Modal size="default" />
+      </div>
+      <div className="flex flex-wrap items-start gap-6">
+        <Modal dir="rtl" size="sm" />
+        <Modal dir="rtl" size="default" />
+      </div>
+    </div>
+  )
+}

package/registry/examples/pagination-demo.tsx

@@ -0,0 +1,17 @@
+import { Pagination } from "@/components/ui/pagination"
+
+export function PaginationDemo() {
+  return (
+    <div className="grid gap-6">
+      <Pagination />
+      <Pagination variant="ghost" />
+
+      <Pagination type="simple" />
+      <Pagination type="summary" />
+
+      <div dir="rtl">
+        <Pagination dir="rtl" />
+      </div>
+    </div>
+  )
+}

package/registry/examples/progress-demo.tsx

@@ -0,0 +1,37 @@
+import { Progress } from "@/components/ui/progress"
+
+export function ProgressDemo() {
+  return (
+    <div className="grid w-full max-w-md gap-6">
+      <Progress
+        aria-label="Upload progress"
+        helperText="Preparing the final file"
+        label="Upload"
+        optional="(Optional)"
+        showInfo
+        showSpinner
+        value={40}
+      />
+
+      <Progress
+        aria-label="Storage usage"
+        label="Storage"
+        labelPosition="bottom"
+        value={68}
+      />
+
+      <div dir="rtl">
+        <Progress
+          aria-label="Arabic upload progress"
+          indicator="40%"
+          label="\u0639\u0646\u0648\u0627\u0646"
+          optional="\u0028\u0627\u062e\u062a\u064a\u0627\u0631\u064a\u0029"
+          showInfo
+          showSpinner
+          size="sm"
+          value={40}
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/progress-slider-demo.tsx

@@ -0,0 +1,29 @@
+import { ProgressSlider } from "@/components/ui/progress-slider"
+
+export function ProgressSliderDemo() {
+  return (
+    <div className="grid gap-6">
+      <ProgressSlider
+        aria-label="Investment amount"
+        defaultValue={28}
+        showTicks
+        size="lg"
+        tone="brand"
+      />
+
+      <ProgressSlider
+        aria-label="Savings progress"
+        defaultValue={62}
+        showTicks
+        tone="success"
+      />
+
+      <ProgressSlider
+        aria-label="Disabled progress"
+        defaultValue={44}
+        disabled
+        tone="neutral"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,51 @@
+import { RadioCard } from "@/components/ui/radio-card"
+
+const radioCardDemoProps = {
+  description: "checkbox card description",
+  label: "Label",
+  supportDescription: "Support Description",
+  supportLabel: "Support",
+}
+
+const radioCardRtlDemoProps = {
+  description:
+    "\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631",
+  label: "\u0627\u0644\u062a\u0633\u0645\u064a\u0629",
+  supportDescription: "\u0648\u0635\u0641 \u062f\u0627\u0639\u0645",
+  supportLabel: "\u062f\u0639\u0645",
+}
+
+export function RadioCardDemo() {
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-start gap-4">
+        <RadioCard {...radioCardDemoProps} type="with-icon" />
+        <RadioCard {...radioCardDemoProps} type="icon-radio-right" />
+        <RadioCard {...radioCardDemoProps} type="icon-radio-left" />
+        <RadioCard {...radioCardDemoProps} type="radio-label" />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-4">
+        <RadioCard {...radioCardDemoProps} checked type="with-avatar" />
+        <RadioCard {...radioCardDemoProps} checked type="payment" />
+        <RadioCard {...radioCardDemoProps} checked type="company-icon" />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-4" dir="rtl">
+        <RadioCard {...radioCardRtlDemoProps} direction="rtl" type="with-icon" />
+        <RadioCard
+          {...radioCardRtlDemoProps}
+          checked
+          direction="rtl"
+          type="payment"
+        />
+        <RadioCard
+          {...radioCardRtlDemoProps}
+          disabled
+          direction="rtl"
+          type="company-icon"
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,62 @@
+import {
+  RadioField,
+  RadioGroup,
+  RadioGroupItem,
+} from "@/components/ui/radio-group"
+
+export function RadioGroupDemo() {
+  return (
+    <div className="grid gap-6">
+      <RadioGroup
+        defaultValue="monthly"
+        description="Choose the cadence for generated invoices."
+        label="Billing cadence"
+        name="billing-cadence"
+      >
+        <RadioGroupItem
+          value="monthly"
+          label="Monthly"
+          description="Send one invoice every calendar month."
+        />
+        <RadioGroupItem
+          value="quarterly"
+          label="Quarterly"
+          description="Collect three months into a single invoice."
+        />
+        <RadioGroupItem
+          disabled
+          value="annual"
+          label="Annual"
+          description="Requires an active enterprise agreement."
+        />
+      </RadioGroup>
+
+      <RadioGroup
+        defaultValue="card"
+        label="Payment method"
+        name="payment-method"
+        orientation="horizontal"
+      >
+        <RadioGroupItem value="card" label="Card" />
+        <RadioGroupItem value="bank" label="Bank transfer" />
+        <RadioGroupItem value="wallet" label="Wallet" />
+      </RadioGroup>
+
+      <div className="grid gap-3">
+        <RadioField
+          defaultChecked
+          label="Use as default"
+          name="default-method"
+          value="default"
+        />
+        <RadioField
+          controlPosition="end"
+          description="Use the same account for refunds and future charges."
+          label="Keep account on file"
+          name="account-storage"
+          value="stored"
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/select-demo.tsx

@@ -0,0 +1,73 @@
+import {
+  Select,
+  SelectItemAvatar,
+  SelectItemCompanyLogo,
+  SelectItemFlag,
+  SelectItemPaymentIcon,
+  SelectItemStatusDot,
+  SelectMenuItem,
+} from "@/components/ui/select"
+
+export function SelectDemo() {
+  return (
+    <div className="grid gap-8">
+      <Select
+        helperText="This is a hint text"
+        label="Label"
+        open
+        placeholder="Select User"
+        state="filled"
+        value="Username"
+      >
+        <SelectMenuItem itemType="default" label="Text option" addonText="Meta" />
+        <SelectMenuItem itemType="avatar" label="User" addonText="Active" />
+        <SelectMenuItem itemType="flag" label="Egypt" addonText="+20" />
+        <SelectMenuItem itemType="company" label="Company" addonText="Workspace" />
+        <SelectMenuItem itemType="payment" label="Visa ending 2048" addonText="Default" />
+        <SelectMenuItem itemType="dot" label="Active status" addonText="Online" selected />
+      </Select>
+
+      <Select label="Payment method" value="Mastercard" variant="soft">
+        <SelectMenuItem
+          label="Custom payment"
+          addonText="Primary"
+          media={<SelectItemPaymentIcon />}
+        />
+        <SelectMenuItem
+          label="Custom company"
+          addonText="Team"
+          media={<SelectItemCompanyLogo />}
+        />
+      </Select>
+
+      <Select dir="rtl" label="ملصق" helperText="هذه نص تلميح.">
+        <SelectMenuItem
+          dir="rtl"
+          label="حدد"
+          addonText="إضافة نص"
+          selected
+        />
+        <SelectMenuItem
+          dir="rtl"
+          label="مستخدم"
+          addonText="نشط"
+          media={<SelectItemAvatar fallback="م" />}
+          selectionType="checkbox"
+          selected
+        />
+        <SelectMenuItem
+          dir="rtl"
+          label="الحالة"
+          addonText="متصل"
+          media={<SelectItemStatusDot />}
+        />
+        <SelectMenuItem
+          dir="rtl"
+          label="دولة"
+          addonText="+20"
+          media={<SelectItemFlag />}
+        />
+      </Select>
+    </div>
+  )
+}

package/registry/examples/slider-demo.tsx

@@ -0,0 +1,31 @@
+import { Slider } from "@/components/ui/slider"
+
+export function SliderDemo() {
+  return (
+    <div className="grid gap-8">
+      <Slider
+        aria-label="Budget amount"
+        defaultValue={[40]}
+        indicator="upper-tooltip"
+      />
+
+      <Slider
+        aria-label="Savings range"
+        ariaLabels={["Minimum savings", "Maximum savings"]}
+        defaultValue={[25, 75]}
+        indicator="lower-text"
+        minStepsBetweenThumbs={4}
+      />
+
+      <div className="flex h-44 items-center">
+        <Slider
+          aria-label="Risk tolerance"
+          className="h-40"
+          defaultValue={[60]}
+          orientation="vertical"
+          tone="warning"
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/social-button-demo.tsx

@@ -0,0 +1,51 @@
+import { SocialButton } from "@/components/ui/social-button"
+
+export function SocialButtonDemo() {
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-wrap items-center gap-3">
+        <SocialButton platform="apple" />
+        <SocialButton platform="facebook" />
+        <SocialButton platform="google" />
+        <SocialButton platform="linkedin" />
+        <SocialButton platform="twitter" />
+        <SocialButton platform="whatsapp" />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <SocialButton platform="apple" variant="outline" />
+        <SocialButton platform="facebook" variant="outline" />
+        <SocialButton platform="google" variant="outline" />
+        <SocialButton platform="linkedin" variant="outline" />
+        <SocialButton platform="twitter" variant="outline" />
+        <SocialButton platform="whatsapp" variant="outline" />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <SocialButton platform="apple" size="icon" />
+        <SocialButton platform="facebook" size="icon" />
+        <SocialButton platform="google" size="icon" />
+        <SocialButton platform="linkedin" size="icon" />
+        <SocialButton platform="twitter" size="icon" />
+        <SocialButton platform="whatsapp" size="icon" />
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-center gap-3">
+        <SocialButton
+          label="تسجيل الدخول باستخدام آبل"
+          platform="apple"
+          variant="outline"
+        />
+        <SocialButton
+          label="تسجيل الدخول باستخدام فيسبوك"
+          platform="facebook"
+        />
+        <SocialButton
+          label="تسجيل الدخول باستخدام جوجل"
+          platform="google"
+          variant="outline"
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/tag-demo.tsx

@@ -0,0 +1,29 @@
+import { PlusIcon } from "lucide-react"
+
+import { Tag } from "@/components/ui/tag"
+
+export function TagDemo() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag>Label</Tag>
+      <Tag state="active">Active</Tag>
+      <Tag state="disabled">Disabled</Tag>
+      <Tag closeLabel="Remove tag" showCloseButton>Label</Tag>
+      <Tag closeLabel="Remove tag" type="dot" showCloseButton>
+        Live
+      </Tag>
+      <Tag closeLabel="Remove tag" type="flag" showCloseButton>
+        Egypt
+      </Tag>
+      <Tag closeLabel="Remove tag" type="avatar" avatar="AG" showCloseButton>
+        Ahmed
+      </Tag>
+      <Tag closeLabel="Remove tag" type="icon" icon={<PlusIcon aria-hidden="true" />} showCloseButton>
+        Add
+      </Tag>
+      <Tag closeLabel="\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645" dir="rtl" showCloseButton>
+        ملصق
+      </Tag>
+    </div>
+  )
+}

package/registry/examples/textarea-demo.tsx

@@ -0,0 +1,79 @@
+import { Textarea } from "@/components/ui/textarea"
+
+const demoTags = [{ label: "Label", removeLabel: "Remove tag" }]
+const demoRtlTags = [
+  {
+    label: "\u0645\u0644\u0635\u0642",
+    removeLabel: "\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645",
+  },
+]
+
+const demoTextareaProps = {
+  bodyText: "Our advanced inference infrastructure provides extremely short response.",
+  errorMessage: "Error message",
+  label: "Label",
+  message: "This is a hint text",
+  optionalText: "(Optional)",
+  placeholder: "Type text here",
+  tagInputText: "Brando...",
+}
+
+const demoRtlTextareaProps = {
+  ...demoTextareaProps,
+  bodyText:
+    "\u062a\u0648\u0641\u0631 \u0628\u0646\u064a\u062a\u0646\u0627 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 \u0644\u0644\u0625\u0633\u062a\u062f\u0644\u0627\u0644 \u0623\u0648\u0642\u0627\u062a \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0642\u0635\u064a\u0631\u0629 \u0644\u0644\u063a\u0627\u064a\u0629.",
+  errorMessage: "\u0631\u0633\u0627\u0644\u0629 \u062e\u0637\u0623",
+  label: "\u0645\u0644\u0635\u0642",
+  message: "\u0647\u0630\u0647 \u0646\u0635 \u062a\u0644\u0645\u064a\u062d.",
+  optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
+  tagInputText: "\u0628\u0631\u0627\u0646\u062f\u0648...",
+}
+
+export function TextareaDemo() {
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-start gap-6">
+        <Textarea {...demoTextareaProps} />
+        <Textarea {...demoTextareaProps} state="filled" />
+        <Textarea {...demoTextareaProps} hasError state="placeholder" />
+        <Textarea {...demoTextareaProps} state="disabled" />
+      </div>
+
+      <div className="flex flex-wrap items-start gap-6">
+        <Textarea {...demoTextareaProps} type="tags" state="placeholder" />
+        <Textarea
+          {...demoTextareaProps}
+          type="tags"
+          state="filled"
+          tags={demoTags}
+        />
+        <Textarea
+          {...demoTextareaProps}
+          type="tags"
+          hasError
+          state="filled"
+          tags={demoTags}
+        />
+        <Textarea
+          {...demoTextareaProps}
+          type="tags"
+          state="disabled"
+          tags={demoTags}
+        />
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-start gap-6">
+        <Textarea {...demoRtlTextareaProps} dir="rtl" />
+        <Textarea {...demoRtlTextareaProps} dir="rtl" state="filled" />
+        <Textarea {...demoRtlTextareaProps} dir="rtl" hasError state="placeholder" />
+        <Textarea
+          {...demoRtlTextareaProps}
+          dir="rtl"
+          type="tags"
+          state="filled"
+          tags={demoRtlTags}
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/toggle-demo.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+
+import { Toggle, ToggleField } from "@/components/ui/toggle"
+
+export function ToggleDemo() {
+  const [checked, setChecked] = React.useState(true)
+
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-center gap-4">
+        <Toggle
+          checked={checked}
+          onCheckedChange={setChecked}
+          aria-label="Toggle notifications"
+        />
+        <Toggle aria-label="Small toggle" size="sm" />
+        <Toggle aria-label="Icon toggle" showIcon defaultChecked />
+        <Toggle aria-label="Disabled toggle" disabled />
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <ToggleField
+          defaultChecked
+          label="Label"
+          description="Supporting text"
+        />
+        <ToggleField
+          className="w-56"
+          controlPosition="end"
+          label="Label"
+        />
+        <ToggleField
+          disabled
+          label="Label"
+          description="Supporting text"
+        />
+        <ToggleField
+          defaultChecked
+          showIcon
+          size="sm"
+          label="Label"
+        />
+      </div>
+
+      <div dir="rtl" className="grid gap-4 sm:grid-cols-2">
+        <ToggleField
+          defaultChecked
+          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
+          description={"\u0646\u0635 \u0645\u0633\u0627\u0639\u062f"}
+        />
+        <ToggleField
+          className="w-56"
+          controlPosition="end"
+          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
+        />
+      </div>
+    </div>
+  )
+}