noorui-rtl 0.4.6 → 0.5.0

package/CHANGELOG.md

@@ -272,7 +272,7 @@ This release focuses on code quality improvements and documentation completeness
 
 Major update to Noor UI with significant component additions and improvements.
 
-**Core Components (54)**
+**Core Components (69)**
 - Form components: Form, Button, Input, Label, Textarea, Checkbox, Radio Group, Select, Switch, Slider
 - Layout components: Card, Separator, Tabs, Accordion, Collapsible
 - Navigation: Breadcrumb, Pagination, Command

package/CONTRIBUTING.md

@@ -78,6 +78,8 @@ npm run dev
 - `npm run dev` - Start development server (documentation site)
 - `npm run build` - Build for production (includes checks)
 - `npm run build:skip-checks` - Build without running checks
+- `npm run storybook` - Start Storybook for interactive component development
+- `npm run storybook:build` - Build static Storybook
 - `npm run lint` - Run ESLint
 - `npm run type-check` - Run TypeScript type checking
 - `npm run check:translations` - Verify translation completeness

package/README.md

@@ -4,12 +4,13 @@
 
 [![npm version](https://badge.fury.io/js/noorui-rtl.svg)](https://www.npmjs.com/package/noorui-rtl)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Storybook](https://img.shields.io/badge/Storybook-Interactive-FF4785?logo=storybook&logoColor=white)](https://storybook.noorui.com)
 
 ![Noor UI - Beautiful RTL-first React components for bilingual applications](https://raw.githubusercontent.com/ositaka/noor-ui/main/public/noorui--og-image--bilingual.png)
 
 Beautiful RTL-first React components for bilingual applications. Built with Radix UI, Tailwind CSS, and full Arabic/English support.
 
-**[Documentation](https://noorui.com)** · **[Examples](https://noorui.com/examples)** · **[npm](https://www.npmjs.com/package/noorui-rtl)**
+**[Documentation](https://noorui.com)** · **[Storybook](https://storybook.noorui.com)** · **[Examples](https://noorui.com/examples)** · **[npm](https://www.npmjs.com/package/noorui-rtl)**
 
 ## ✨ Features
 
@@ -204,7 +205,7 @@ export default function App() {
 
 ## 📚 Components
 
-### Core UI (54 components)
+### Core UI (69 components)
 
 **Forms**: Button, Input, Label, Textarea, Checkbox, Radio, Select, Switch, Slider, Form
 
@@ -298,6 +299,7 @@ Full documentation, examples, and guides available at **[noorui.com](https://noo
 
 - [Getting Started](https://noorui.com/getting-started)
 - [Components](https://noorui.com/components)
+- [Storybook](https://storybook.noorui.com) - **Interactive component playground with 749 stories**
 - [RTL Guide](https://noorui.com/rtl-guide)
 - [Examples](https://noorui.com/examples)
 - [Starters](https://noorui.com/starters)

package/dist/index.d.mts

@@ -159,8 +159,9 @@ declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.Re
  * Arrow direction semantics:
  * - 'forward': Arrow points in the direction of progression (right in LTR, left in RTL)
  * - 'back': Arrow points in the opposite direction (left in LTR, right in RTL)
+ * - 'external': Diagonal arrow for external links (↗ in LTR, ↖ in RTL)
  */
-type ArrowDirection = 'forward' | 'back';
+type ArrowDirection = 'forward' | 'back' | 'external';
 /**
  * Arrow icon style:
  * - 'chevron': Uses chevron icons (< or >)
@@ -199,6 +200,13 @@ interface ButtonArrowProps extends ButtonProps {
  *   Back to Blog
  * </ButtonArrow>
  *
+ * // External link button (diagonal arrow, ↗ in LTR, ↖ in RTL)
+ * <ButtonArrow direction="external" asChild>
+ *   <a href="https://example.com" target="_blank" rel="noopener noreferrer">
+ *     View Documentation
+ *   </a>
+ * </ButtonArrow>
+ *
  * // With arrow style
  * <ButtonArrow direction="forward" icon="arrow">
  *   Next Step
@@ -1381,7 +1389,7 @@ declare const RichTextEditor: React$1.ForwardRefExoticComponent<RichTextEditorPr
 declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const Select: typeof SelectPrimitive.Root;
+declare const Select: ({ dir, ...props }: React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>) => React$1.JSX.Element;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;

package/dist/index.d.ts

@@ -159,8 +159,9 @@ declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.Re
  * Arrow direction semantics:
  * - 'forward': Arrow points in the direction of progression (right in LTR, left in RTL)
  * - 'back': Arrow points in the opposite direction (left in LTR, right in RTL)
+ * - 'external': Diagonal arrow for external links (↗ in LTR, ↖ in RTL)
  */
-type ArrowDirection = 'forward' | 'back';
+type ArrowDirection = 'forward' | 'back' | 'external';
 /**
  * Arrow icon style:
  * - 'chevron': Uses chevron icons (< or >)
@@ -199,6 +200,13 @@ interface ButtonArrowProps extends ButtonProps {
  *   Back to Blog
  * </ButtonArrow>
  *
+ * // External link button (diagonal arrow, ↗ in LTR, ↖ in RTL)
+ * <ButtonArrow direction="external" asChild>
+ *   <a href="https://example.com" target="_blank" rel="noopener noreferrer">
+ *     View Documentation
+ *   </a>
+ * </ButtonArrow>
+ *
  * // With arrow style
  * <ButtonArrow direction="forward" icon="arrow">
  *   Next Step
@@ -1381,7 +1389,7 @@ declare const RichTextEditor: React$1.ForwardRefExoticComponent<RichTextEditorPr
 declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const Select: typeof SelectPrimitive.Root;
+declare const Select: ({ dir, ...props }: React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>) => React$1.JSX.Element;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;

package/dist/index.js

@@ -104,6 +104,19 @@ function DirectionProvider({ children }) {
     if (document.documentElement.lang !== initialLocale) {
       document.documentElement.lang = initialLocale;
     }
+    if (typeof window !== "undefined" && window.parent !== window) {
+      const observer = new MutationObserver(() => {
+        const newDir = document.documentElement.dir || "ltr";
+        const newLang = document.documentElement.lang || "en";
+        setDirectionState((prevDir) => prevDir !== newDir ? newDir : prevDir);
+        setLocaleState((prevLang) => prevLang !== newLang ? newLang : prevLang);
+      });
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["dir", "lang"]
+      });
+      return () => observer.disconnect();
+    }
   }, []);
   const setDirection = React74__namespace.useCallback((newDirection) => {
     setDirectionState(newDirection);
@@ -1082,8 +1095,11 @@ var ButtonArrow = React74__namespace.forwardRef(
     asChild = false,
     ...props
   }, ref) => {
-    const resolvedPosition = iconPosition === "auto" ? direction === "forward" ? "end" : "start" : iconPosition;
+    const resolvedPosition = iconPosition === "auto" ? direction === "back" ? "start" : "end" : iconPosition;
     const IconComponent = React74__namespace.useMemo(() => {
+      if (direction === "external") {
+        return lucideReact.ArrowUpRight;
+      }
       if (icon === "chevron") {
         return direction === "forward" ? lucideReact.ChevronRight : lucideReact.ChevronLeft;
       }
@@ -1091,7 +1107,8 @@ var ButtonArrow = React74__namespace.forwardRef(
     }, [direction, icon]);
     const iconClasses = cn(
       iconSizeClasses[iconSize],
-      "rtl:rotate-180",
+      // External links need horizontal mirroring (scale-x), not rotation
+      direction === "external" ? "rtl:scale-x-[-1]" : "rtl:rotate-180",
       "shrink-0",
       "transition-transform duration-200"
     );
@@ -1151,12 +1168,30 @@ var common = {
     components: "Components",
     examples: "Examples",
     starters: "Starters",
+    storybook: "Storybook",
     rtlGuide: "RTL Guide",
     tokens: "Design Tokens",
     themes: "Themes",
     documentation: "Documentation",
     getStarted: "Get Started"
   },
+  storybook: {
+    title: "Storybook",
+    viewInStorybook: "View in Storybook",
+    exploreStorybook: "Explore Storybook",
+    tryStorybook: "Try Storybook",
+    openStorybook: "Open Storybook",
+    interactivePlayground: "Interactive Component Playground",
+    description: "Explore 749 interactive stories across 74 components. Switch between RTL/LTR, try different themes, and test accessibility\u2014all in your browser.",
+    shortDescription: "Interactive component showcase with 749 stories",
+    features: {
+      interactive: "Live component playground",
+      rtl: "RTL/LTR switching",
+      themes: "4 theme variants",
+      accessibility: "Full accessibility testing",
+      examples: "Arabic/English examples"
+    }
+  },
   ui: {
     button: {
       submit: "Submit",
@@ -1582,6 +1617,7 @@ var common = {
       home: "Home",
       gettingStarted: "Getting Started",
       documentation: "Documentation",
+      storybook: "Storybook",
       rtlGuide: "RTL Development Guide",
       roadmap: "Roadmap",
       themes: "Themes",
@@ -3375,7 +3411,7 @@ var home = {
       },
       recentWins: {
         title: "Recent Wins",
-        performance: "NPM package published (noorui-rtl v0.4.5)",
+        performance: "NPM package published (noorui-rtl v0.4.6)",
         skeletons: "74+ production-ready components with full documentation",
         components: "10+ complete demo projects (Blog, Marketplace, AI workflows)",
         rebranding: "Full RTL/LTR support for ALL RTL languages (Arabic, Hebrew, Urdu, Farsi) + WCAG AA accessibility"
@@ -3929,6 +3965,7 @@ var documentation = {
         title: "Components",
         description: "Browse all available UI components",
         library: "Component Library",
+        storybook: "Storybook \u2197",
         props: "Props Documentation",
         examples: "Examples"
       },
@@ -4507,7 +4544,7 @@ var examples = {
     lookingForAppsDesc: "Browse production-ready starters - complete applications with authentication, database, and everything you need to get started.",
     viewStarters: "View Production Starters \u2192",
     lookingForComponents: "Looking for Individual Components?",
-    lookingForComponentsDesc: "Browse our complete component library with 64 fully documented components (including 10 experimental AI/LLM components) with live examples and accessibility guidelines.",
+    lookingForComponentsDesc: "Browse our complete component library with 74 fully documented components with live examples and accessibility guidelines.",
     viewAllComponents: "View All Components \u2192"
   },
   exampleCards: [
@@ -4674,7 +4711,7 @@ var examples = {
 var components_meta = {
   components: {
     title: "Components",
-    description: "64 beautifully designed components built with Radix UI, Tailwind CSS, and React Flow. 54 production-ready, 10 experimental AI/LLM components. Full RTL support, accessible, and customizable.",
+    description: "74 beautifully designed components built with Radix UI, Tailwind CSS, and React Flow. Full RTL support, accessible, and customizable.",
     quickPreview: "Quick Preview",
     previewDescription: "See how components adapt to different directions",
     categories: {
@@ -9555,12 +9592,30 @@ var common2 = {
     components: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062A",
     examples: "\u0627\u0644\u0623\u0645\u062B\u0644\u0629",
     starters: "\u0646\u0645\u0627\u0630\u062C \u0627\u0644\u0628\u062F\u0627\u064A\u0629",
+    storybook: "\u0633\u062A\u0648\u0631\u064A\u0628\u0648\u0643",
     rtlGuide: "\u062F\u0644\u064A\u0644 RTL",
     tokens: "\u0631\u0645\u0648\u0632 \u0627\u0644\u062A\u0635\u0645\u064A\u0645",
     themes: "\u0627\u0644\u0633\u0645\u0627\u062A",
     documentation: "\u0627\u0644\u062A\u0648\u062B\u064A\u0642",
     getStarted: "\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646"
   },
+  storybook: {
+    title: "\u0633\u062A\u0648\u0631\u064A\u0628\u0648\u0643",
+    viewInStorybook: "\u0639\u0631\u0636 \u0641\u064A \u0633\u062A\u0648\u0631\u064A\u0628\u0648\u0643",
+    exploreStorybook: "\u0627\u0633\u062A\u0643\u0634\u0641 \u0633\u062A\u0648\u0631\u064A\u0628\u0648\u0643",
+    tryStorybook: "\u062C\u0631\u0651\u0628 \u0633\u062A\u0648\u0631\u064A\u0628\u0648\u0643",
+    openStorybook: "\u0627\u0641\u062A\u062D \u0633\u062A\u0648\u0631\u064A\u0628\u0648\u0643",
+    interactivePlayground: "\u0633\u0627\u062D\u0629 \u0645\u0643\u0648\u0646\u0627\u062A \u062A\u0641\u0627\u0639\u0644\u064A\u0629",
+    description: "\u0627\u0633\u062A\u0643\u0634\u0641 749 \u0642\u0635\u0629 \u062A\u0641\u0627\u0639\u0644\u064A\u0629 \u0639\u0628\u0631 74 \u0645\u0643\u0648\u0646\u064B\u0627. \u0642\u0645 \u0628\u0627\u0644\u062A\u0628\u062F\u064A\u0644 \u0628\u064A\u0646 RTL/LTR\u060C \u0648\u062C\u0631\u0651\u0628 \u0633\u0645\u0627\u062A \u0645\u062E\u062A\u0644\u0641\u0629\u060C \u0648\u0627\u062E\u062A\u0628\u0631 \u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644\u2014\u0643\u0644 \u0630\u0644\u0643 \u0641\u064A \u0645\u062A\u0635\u0641\u062D\u0643.",
+    shortDescription: "\u0639\u0631\u0636 \u062A\u0641\u0627\u0639\u0644\u064A \u0644\u0644\u0645\u0643\u0648\u0646\u0627\u062A \u0645\u0639 749 \u0642\u0635\u0629",
+    features: {
+      interactive: "\u0633\u0627\u062D\u0629 \u0645\u0643\u0648\u0646\u0627\u062A \u062D\u064A\u0629",
+      rtl: "\u0627\u0644\u062A\u0628\u062F\u064A\u0644 \u0628\u064A\u0646 RTL/LTR",
+      themes: "4 \u0623\u0646\u0648\u0627\u0639 \u0645\u0646 \u0627\u0644\u0633\u0645\u0627\u062A",
+      accessibility: "\u0627\u062E\u062A\u0628\u0627\u0631 \u0643\u0627\u0645\u0644 \u0644\u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644",
+      examples: "\u0623\u0645\u062B\u0644\u0629 \u0628\u0627\u0644\u0639\u0631\u0628\u064A\u0629 \u0648\u0627\u0644\u0625\u0646\u062C\u0644\u064A\u0632\u064A\u0629"
+    }
+  },
   ui: {
     button: {
       submit: "\u0625\u0631\u0633\u0627\u0644",
@@ -9986,6 +10041,7 @@ var common2 = {
       home: "\u0627\u0644\u0631\u0626\u064A\u0633\u064A\u0629",
       gettingStarted: "\u0627\u0644\u0628\u062F\u0621",
       documentation: "\u0627\u0644\u062A\u0648\u062B\u064A\u0642",
+      storybook: "\u0633\u062A\u0648\u0631\u064A\u0628\u0648\u0643",
       rtlGuide: "\u062F\u0644\u064A\u0644 \u062A\u0637\u0648\u064A\u0631 RTL",
       roadmap: "\u062E\u0627\u0631\u0637\u0629 \u0627\u0644\u0637\u0631\u064A\u0642",
       themes: "\u0627\u0644\u0633\u0645\u0627\u062A",
@@ -11779,7 +11835,7 @@ var home2 = {
       },
       recentWins: {
         title: "\u0627\u0644\u0625\u0646\u062C\u0627\u0632\u0627\u062A \u0627\u0644\u0623\u062E\u064A\u0631\u0629",
-        performance: "\u062A\u0645 \u0646\u0634\u0631 \u062D\u0632\u0645\u0629 NPM (noorui-rtl v0.4.5)",
+        performance: "\u062A\u0645 \u0646\u0634\u0631 \u062D\u0632\u0645\u0629 NPM (noorui-rtl v0.4.6)",
         skeletons: "\u0623\u0643\u062B\u0631 \u0645\u0646 74 \u0645\u0643\u0648\u0646 \u062C\u0627\u0647\u0632 \u0644\u0644\u0625\u0646\u062A\u0627\u062C \u0645\u0639 \u062A\u0648\u062B\u064A\u0642 \u0643\u0627\u0645\u0644",
         components: "\u0623\u0643\u062B\u0631 \u0645\u0646 10 \u0645\u0634\u0627\u0631\u064A\u0639 \u0639\u0631\u0636 \u0643\u0627\u0645\u0644\u0629 (\u0645\u062F\u0648\u0646\u0629\u060C \u0633\u0648\u0642\u060C \u0633\u064A\u0631 \u0639\u0645\u0644 AI)",
         rebranding: "\u062F\u0639\u0645 \u0643\u0627\u0645\u0644 \u0644\u062C\u0645\u064A\u0639 \u0627\u0644\u0644\u063A\u0627\u062A RTL (\u0627\u0644\u0639\u0631\u0628\u064A\u0629\u060C \u0627\u0644\u0639\u0628\u0631\u064A\u0629\u060C \u0627\u0644\u0623\u0631\u062F\u064A\u0629\u060C \u0627\u0644\u0641\u0627\u0631\u0633\u064A\u0629) + \u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644 WCAG AA"
@@ -12333,6 +12389,7 @@ var documentation2 = {
         title: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062A",
         description: "\u062A\u0635\u0641\u062D \u062C\u0645\u064A\u0639 \u0645\u0643\u0648\u0646\u0627\u062A \u0648\u0627\u062C\u0647\u0629 \u0627\u0644\u0645\u0633\u062A\u062E\u062F\u0645 \u0627\u0644\u0645\u062A\u0627\u062D\u0629",
         library: "\u0645\u0643\u062A\u0628\u0629 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062A",
+        storybook: "\u0633\u062A\u0648\u0631\u064A\u0628\u0648\u0643 \u2197",
         props: "\u062A\u0648\u062B\u064A\u0642 \u0627\u0644\u062E\u0635\u0627\u0626\u0635",
         examples: "\u0627\u0644\u0623\u0645\u062B\u0644\u0629"
       },
@@ -12911,7 +12968,7 @@ var examples2 = {
     lookingForAppsDesc: "\u062A\u0635\u0641\u062D \u0646\u0645\u0627\u0630\u062C \u0627\u0644\u0628\u062F\u0621 \u0627\u0644\u062C\u0627\u0647\u0632\u0629 \u0644\u0644\u0625\u0646\u062A\u0627\u062C - \u062A\u0637\u0628\u064A\u0642\u0627\u062A \u0643\u0627\u0645\u0644\u0629 \u0645\u0639 \u0645\u0635\u0627\u062F\u0642\u0629\u060C \u0642\u0627\u0639\u062F\u0629 \u0628\u064A\u0627\u0646\u0627\u062A\u060C \u0648\u0643\u0644 \u0645\u0627 \u062A\u062D\u062A\u0627\u062C\u0647 \u0644\u0644\u0628\u062F\u0621.",
     viewStarters: "\u0639\u0631\u0636 \u0627\u0644\u0646\u0645\u0627\u0630\u062C \u0627\u0644\u062C\u0627\u0647\u0632\u0629 \u2190",
     lookingForComponents: "\u0647\u0644 \u062A\u0628\u062D\u062B \u0639\u0646 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062A \u0627\u0644\u0641\u0631\u062F\u064A\u0629\u061F",
-    lookingForComponentsDesc: "\u062A\u0635\u0641\u062D \u0645\u0643\u062A\u0628\u0629 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062A \u0627\u0644\u0643\u0627\u0645\u0644\u0629 \u0644\u062F\u064A\u0646\u0627 \u0627\u0644\u062A\u064A \u062A\u062D\u062A\u0648\u064A \u0639\u0644\u0649 64 \u0645\u0643\u0648\u0646\u0627\u064B \u0645\u0648\u062B\u0642\u0627\u064B \u0628\u0627\u0644\u0643\u0627\u0645\u0644 (\u0628\u0645\u0627 \u0641\u064A \u0630\u0644\u0643 10 \u0645\u0643\u0648\u0646\u0627\u062A \u062A\u062C\u0631\u064A\u0628\u064A\u0629 \u0644\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064A) \u0645\u0639 \u0623\u0645\u062B\u0644\u0629 \u062D\u064A\u0629 \u0648\u0625\u0631\u0634\u0627\u062F\u0627\u062A \u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644.",
+    lookingForComponentsDesc: "\u062A\u0635\u0641\u062D \u0645\u0643\u062A\u0628\u0629 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062A \u0627\u0644\u0643\u0627\u0645\u0644\u0629 \u0644\u062F\u064A\u0646\u0627 \u0627\u0644\u062A\u064A \u062A\u062D\u062A\u0648\u064A \u0639\u0644\u0649 74 \u0645\u0643\u0648\u0646\u0627\u064B \u0645\u0648\u062B\u0642\u0627\u064B \u0628\u0627\u0644\u0643\u0627\u0645\u0644 \u0645\u0639 \u0623\u0645\u062B\u0644\u0629 \u062D\u064A\u0629 \u0648\u0625\u0631\u0634\u0627\u062F\u0627\u062A \u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644.",
     viewAllComponents: "\u0639\u0631\u0636 \u062C\u0645\u064A\u0639 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062A \u2190"
   },
   exampleCards: [
@@ -13078,7 +13135,7 @@ var examples2 = {
 var components_meta2 = {
   components: {
     title: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062A",
-    description: "64 \u0645\u0643\u0648\u0651\u0646 \u0645\u0635\u0645\u0645 \u0628\u0634\u0643\u0644 \u062C\u0645\u064A\u0644 \u0628\u0627\u0633\u062A\u062E\u062F\u0627\u0645 Radix UI \u0648 Tailwind CSS \u0648 React Flow. 54 \u0645\u0643\u0648\u0651\u0646 \u062C\u0627\u0647\u0632 \u0644\u0644\u0625\u0646\u062A\u0627\u062C\u060C 10 \u0645\u0643\u0648\u0646\u0627\u062A \u062A\u062C\u0631\u064A\u0628\u064A\u0629 \u0644\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064A. \u062F\u0639\u0645 \u0643\u0627\u0645\u0644 \u0644\u0627\u062A\u062C\u0627\u0647 \u0627\u0644\u0646\u0635\u060C \u0642\u0627\u0628\u0644 \u0644\u0644\u0648\u0635\u0648\u0644\u060C \u0648\u0642\u0627\u0628\u0644 \u0644\u0644\u062A\u062E\u0635\u064A\u0635.",
+    description: "74 \u0645\u0643\u0648\u0651\u0646 \u0645\u0635\u0645\u0645 \u0628\u0634\u0643\u0644 \u062C\u0645\u064A\u0644 \u0628\u0627\u0633\u062A\u062E\u062F\u0627\u0645 Radix UI \u0648 Tailwind CSS \u0648 React Flow. \u062F\u0639\u0645 \u0643\u0627\u0645\u0644 \u0644\u0627\u062A\u062C\u0627\u0647 \u0627\u0644\u0646\u0635\u060C \u0642\u0627\u0628\u0644 \u0644\u0644\u0648\u0635\u0648\u0644\u060C \u0648\u0642\u0627\u0628\u0644 \u0644\u0644\u062A\u062E\u0635\u064A\u0635.",
     quickPreview: "\u0645\u0639\u0627\u064A\u0646\u0629 \u0633\u0631\u064A\u0639\u0629",
     previewDescription: "\u0634\u0627\u0647\u062F \u0643\u064A\u0641 \u062A\u062A\u0643\u064A\u0641 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062A \u0645\u0639 \u0627\u0644\u0627\u062A\u062C\u0627\u0647\u0627\u062A \u0627\u0644\u0645\u062E\u062A\u0644\u0641\u0629",
     categories: {
@@ -18270,7 +18327,7 @@ var Calendar2 = React74__namespace.forwardRef(
       }
       return days2;
     }, [locale]);
-    return /* @__PURE__ */ React74__namespace.createElement("div", { ref, className: cn("w-full p-4", className), ...props }, /* @__PURE__ */ React74__namespace.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React74__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React74__namespace.createElement(
+    return /* @__PURE__ */ React74__namespace.createElement("div", { ref, className: cn("w-full p-4", className), ...props }, /* @__PURE__ */ React74__namespace.createElement("div", { className: "flex items-center justify-between mb-4 gap-4" }, /* @__PURE__ */ React74__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React74__namespace.createElement(
       Button,
       {
         type: "button",
@@ -21050,11 +21107,16 @@ var MessageActions = React74__namespace.forwardRef(
   }
 );
 MessageActions.displayName = "MessageActions";
-var Select = ((props) => {
+var Select = ({ dir, ...props }) => {
   const { direction } = useDirection();
-  return /* @__PURE__ */ React74__namespace.createElement(SelectPrimitive__namespace.Root, { dir: direction, ...props });
-});
-Select.displayName = "Select";
+  return /* @__PURE__ */ React74__namespace.createElement(
+    SelectPrimitive__namespace.Root,
+    {
+      dir: dir || direction,
+      ...props
+    }
+  );
+};
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
 var SelectTrigger = React74__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React74__namespace.createElement(
@@ -21910,23 +21972,12 @@ var PromptInput = React74__namespace.forwardRef(
 );
 PromptInput.displayName = "PromptInput";
 var RadioGroup3 = React74__namespace.forwardRef(({ className, dir, ...props }, ref) => {
-  const [documentDir, setDocumentDir] = React74__namespace.useState("ltr");
-  React74__namespace.useEffect(() => {
-    setDocumentDir(document.documentElement.dir || "ltr");
-    const observer = new MutationObserver(() => {
-      setDocumentDir(document.documentElement.dir || "ltr");
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["dir"]
-    });
-    return () => observer.disconnect();
-  }, []);
+  const { direction } = useDirection();
   return /* @__PURE__ */ React74__namespace.createElement(
     RadioGroupPrimitive__namespace.Root,
     {
       className: cn("grid gap-2", className),
-      dir: dir || documentDir,
+      dir: dir || direction,
       ...props,
       ref
     }