banhaten 0.1.0 → 0.1.2

package/registry/examples/skeleton-demo.tsx

@@ -0,0 +1,56 @@
+import {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonCard,
+  SkeletonForm,
+  SkeletonInput,
+  SkeletonList,
+  SkeletonTable,
+  SkeletonText,
+} from "@/components/ui/skeleton"
+
+export function SkeletonDemo() {
+  return (
+    <div className="grid w-full max-w-5xl gap-[var(--bh-space-5xl-24)]">
+      <div className="grid gap-[var(--bh-space-4xl-20)] lg:grid-cols-2">
+        <div className="grid gap-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-5xl-24)]">
+          <div className="flex items-start gap-[var(--bh-space-xl-12)]">
+            <SkeletonAvatar />
+            <SkeletonText
+              className="flex-1"
+              lineCount={3}
+              widths={["76%", "92%", "52%"]}
+            />
+          </div>
+          <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+            <SkeletonButton size="sm" />
+            <SkeletonButton size="icon" />
+          </div>
+        </div>
+
+        <SkeletonForm fields={3} />
+      </div>
+
+      <div className="grid gap-[var(--bh-space-4xl-20)] xl:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
+        <SkeletonCard />
+        <SkeletonTable columns={4} rows={4} />
+      </div>
+
+      <div className="grid gap-[var(--bh-space-4xl-20)] lg:grid-cols-2">
+        <SkeletonList rows={4} />
+        <div
+          dir="rtl"
+          className="grid gap-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-5xl-24)]"
+        >
+          <SkeletonInput />
+          <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+            <SkeletonButton />
+            <SkeletonButton size="sm" tone="brand" />
+          </div>
+          <Skeleton className="rounded-[var(--bh-radius-full)]" tone="brand" />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -1,50 +1,50 @@
-import { SocialButton } from "@/components/ui/social-button"
+import { SocialButton, type SocialPlatform } from "@/components/ui/social-button"
+
+const socialPlatforms: SocialPlatform[] = [
+  "apple",
+  "facebook",
+  "google",
+  "linkedin",
+  "twitter",
+  "whatsapp",
+]
 
 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" />
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} platform={platform} />
+        ))}
       </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" />
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} platform={platform} 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" />
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} platform={platform} size="icon" />
+        ))}
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-center gap-3">
+        {socialPlatforms.map((platform) => (
+          <SocialButton key={platform} dir="rtl" platform={platform} />
+        ))}
       </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"
-        />
+        {socialPlatforms.map((platform) => (
+          <SocialButton
+            key={platform}
+            dir="rtl"
+            platform={platform}
+            variant="outline"
+          />
+        ))}
       </div>
     </div>
   )

package/registry/examples/spinner-demo.tsx

@@ -0,0 +1,59 @@
+import type * as React from "react"
+
+import { DynamicSpinner, Spinner } from "@/components/ui/spinner"
+
+export function SpinnerDemo() {
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-center gap-6">
+        <Spinner
+          className="text-primary"
+          style={{ "--bh-spinner-size": "16px" } as React.CSSProperties}
+        />
+        <Spinner
+          className="text-success"
+          style={{ "--bh-spinner-size": "20px" } as React.CSSProperties}
+        />
+        <Spinner
+          className="text-danger"
+          style={{ "--bh-spinner-size": "24px" } as React.CSSProperties}
+        />
+        <DynamicSpinner
+          className="text-primary"
+          style={{ "--bh-spinner-size": "16px" } as React.CSSProperties}
+        />
+        <DynamicSpinner
+          className="text-success"
+          style={{ "--bh-spinner-size": "20px" } as React.CSSProperties}
+        />
+        <DynamicSpinner
+          className="text-danger"
+          style={{ "--bh-spinner-size": "24px" } as React.CSSProperties}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <div
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground"
+          role="status"
+        >
+          <Spinner
+            className="text-current"
+            style={{ "--bh-spinner-size": "18px" } as React.CSSProperties}
+          />
+          Loading
+        </div>
+        <div
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground"
+          role="status"
+        >
+          <DynamicSpinner
+            className="text-current"
+            style={{ "--bh-spinner-size": "18px" } as React.CSSProperties}
+          />
+          Syncing
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/examples/tag-demo.tsx

@@ -21,7 +21,7 @@ export function TagDemo() {
       <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 closeLabel={"\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"} dir="rtl" showCloseButton>
         ملصق
       </Tag>
     </div>

package/registry/examples/textarea-demo.tsx

@@ -24,7 +24,7 @@ const demoRtlTextareaProps = {
     "\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.",
+  message: "\u0646\u0635 \u062a\u0648\u0636\u064a\u062d\u064a",
   optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
   tagInputText: "\u0628\u0631\u0627\u0646\u062f\u0648...",
 }