noorui-rtl 0.4.4 → 0.4.6

package/CHANGELOG.md

@@ -7,17 +7,44 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### To Be Fixed
+- **Popover Component**: RTL positioning issues in portal-rendered components
+  - NotificationCenter popup appears on wrong side in RTL mode
+  - TimePicker & TimeRangePicker popups appear on wrong side in RTL mode
+  - Need to add automatic direction detection (similar to DropdownMenu pattern)
+
+## [0.4.6] - 2025-12-08
+
+### Fixed
+- **Calendar Component**: Fixed form submission issue when used inside forms
+  - Added `type="button"` to all navigation buttons (previous month, next month, today)
+  - Added `type="button"` to all date selection buttons
+  - Prevents unintended form submissions when selecting dates or navigating months
+  - Resolves issue where clicking calendar buttons would trigger parent form submit handlers
+
+### Notes
+This is a critical bugfix for forms containing Calendar components in range or single selection mode. Previously, clicking any button within the Calendar would trigger form submission, causing premature validation and unexpected behavior.
+
+---
+
+## [0.4.5] - 2025-12-07
+
+### Changed
+- **Cozy Theme**: Removed opinionated spacing and padding rules for more flexibility
+  - Removed forced `margin-bottom: 1.5rem` from headings (h1, h2, h3, h4)
+  - Removed forced `padding: 2rem !important` from all card components
+  - Removed forced button padding (`padding: .75rem 1.5rem`)
+  - Theme now respects component-level spacing defaults
+  - Updated both `globals.css` and `package.css` for consistency
+
+### Notes
+This release makes the Cozy theme less opinionated and more flexible, allowing developers to use standard component spacing without theme overrides.
+
+---
+
 ## [0.4.4] - 2025-12-06
 
 ### Fixed
-- **Popover Component**: Fixed RTL positioning issues by adding automatic direction detection (similar to DropdownMenu)
-  - Added MutationObserver to detect document direction changes
-  - Popover Root now automatically passes `dir` prop to Radix UI for proper RTL support
-  - Fixes notification popups, time pickers, and all popover-based components appearing on wrong side in RTL mode
-- **NotificationCenter**: Fixed RTL positioning - popup now appears on correct side in RTL mode
-  - Updated align logic to `direction === 'rtl' ? 'start' : 'end'` for consistent right-side positioning
-- **TimePicker & TimeRangePicker**: Fixed RTL positioning - popups now appear on correct side in RTL mode
-  - Updated align logic from `isRTL ? 'end' : 'start'` to `isRTL ? 'start' : 'end'`
 - **Documentation Pages**: Fixed inconsistent section title spacing across component pages
   - **number-input**: Fixed Use Cases, API Reference, and Features sections
   - **date-picker**: Fixed Use Cases, Type Definition, API Reference (2x), and Features sections
@@ -25,11 +52,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - All sections now use standard pattern: `<section className="mb-16">` with `<h2 className="text-2xl font-bold tracking-tight mb-6">`
 
 ### Changed
-- **Popover Component**: Improved architecture to match DropdownMenu pattern for better RTL support
 - **Component Documentation**: Standardized section spacing for consistent visual hierarchy
 
 ### Notes
-This release focuses on fixing RTL positioning issues in portal-rendered components (Popover) and improving documentation consistency. All popover-based components (notifications, time pickers, etc.) now position correctly in RTL mode.
+This release focuses on improving documentation consistency and visual hierarchy across all component pages.
 
 ## [0.4.3] - 2025-12-05
 
@@ -234,7 +260,7 @@ This release focuses on code quality improvements and documentation completeness
 - Updated homepage URL to noorui.com
 
 ### Added
-- Complete barrel export with all 64 components
+- Complete barrel export with all 74+ components
 - CHANGELOG.md, CONTRIBUTING.md documentation
 - Improved package files configuration
 
@@ -271,7 +297,7 @@ Major update to Noor UI with significant component additions and improvements.
 
 **Features**
 - Complete RTL support with logical properties
-- 64 production-ready and experimental components
+- 74+ production-ready and experimental components
 - Full TypeScript support with type definitions
 - Radix UI primitives for accessibility
 - Tailwind CSS with design tokens
@@ -280,7 +306,7 @@ Major update to Noor UI with significant component additions and improvements.
 - WCAG AA compliant
 
 ### Changed
-- Updated package structure to include all 64 components
+- Updated package structure to include all 74+ components
 - Improved TypeScript types and exports
 - Enhanced documentation
 

package/README.md

@@ -14,7 +14,7 @@ Beautiful RTL-first React components for bilingual applications. Built with Radi
 ## ✨ Features
 
 - 🌍 **RTL-First**: Perfect Arabic/Persian support with logical properties
-- 🎨 **65 Components**: Complete UI toolkit for modern applications
+- 🎨 **74+ Components**: Complete UI toolkit for modern applications
 - ♿ **Accessible**: WCAG AA compliant with full keyboard navigation
 - 🎯 **TypeScript**: Full type safety and IntelliSense support
 - 🎭 **Themeable**: Light/dark mode with customizable design tokens

package/dist/index.js

@@ -3375,7 +3375,7 @@ var home = {
       },
       recentWins: {
         title: "Recent Wins",
-        performance: "NPM package published (noorui-rtl v0.4.3)",
+        performance: "NPM package published (noorui-rtl v0.4.5)",
         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"
@@ -11779,7 +11779,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.3)",
+        performance: "\u062A\u0645 \u0646\u0634\u0631 \u062D\u0632\u0645\u0629 NPM (noorui-rtl v0.4.5)",
         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"
@@ -17691,7 +17691,7 @@ var components_experimental2 = {
   },
   tokenCounterComponent: {
     title: "\u0639\u062F\u0627\u062F \u0627\u0644\u0631\u0645\u0648\u0632",
-    description: "\u0639\u062F\u0627\u062F \u0631\u0645\u0648\u0632 \u0641\u064A \u0627\u0644\u0648\u0642\u062A \u0627\u0644\u0641\u0639\u0644\u064A \u0645\u0639 \u062A\u0642\u062F\u064A\u0631\u0627\u062A \u0627\u0644\u062A\u0643\u0644\u0641\u0629 \u0648\u062A\u062D\u0630\u064A\u0631\u0627\u062A \u0627\u0644\u062D\u062F. \u0636\u0631\u0648\u0631\u064A \u0644\u0625\u062F\u0627\u0631\u0629 \u0627\u0633\u062A\u062E\u062F\u0627\u0645 API \u0644\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064A \u0648\u0627\u0644\u062A\u0643\u0627\u0644\u064A\u0641. \u064A\u0639\u0631\u0636 \u0639\u062F\u062F \u0627\u0644\u0631\u0645\u0648\u0632 \u0648\u0627\u0644\u062A\u0633\u0639\u064A\u0631 \u0648\u0627\u0644\u062A\u062D\u0630\u064A\u0631\u0627\u062A \u0627\u0644\u0628\u0635\u0631\u064A\u0629 \u0639\u0646\u062F \u0627\u0644\u0627\u0642\u062A\u0631\u0627\u0628 \u0645\u0646 \u0627\u0644\u062D\u062F\u0648\u062F.",
+    description: "\u0639\u0631\u0636 \u0648\u062A\u062A\u0628\u0639 \u0627\u0633\u062A\u062E\u062F\u0627\u0645 \u0627\u0644\u0631\u0645\u0648\u0632 \u0645\u0639 \u062A\u0642\u062F\u064A\u0631 \u0627\u0644\u062A\u0643\u0644\u0641\u0629 \u0644\u062A\u0641\u0627\u0639\u0644\u0627\u062A \u0646\u0645\u0648\u0630\u062C \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064A. \u064A\u062A\u0636\u0645\u0646 \u0634\u0631\u064A\u0637 \u0627\u0644\u062A\u0642\u062F\u0645\u060C \u0627\u0644\u062A\u0641\u0635\u064A\u0644 \u062D\u0633\u0628 \u0627\u0644\u0625\u062F\u062E\u0627\u0644/\u0627\u0644\u0625\u062E\u0631\u0627\u062C\u060C \u0648\u0627\u0644\u062A\u062D\u0630\u064A\u0631\u0627\u062A \u0627\u0644\u0645\u0631\u0626\u064A\u0629 \u0639\u0646\u062F \u0627\u0644\u0627\u0642\u062A\u0631\u0627\u0628 \u0645\u0646 \u0627\u0644\u062D\u062F\u0648\u062F.",
     preview: "\u0645\u0639\u0627\u064A\u0646\u0629",
     installation: "\u0627\u0644\u062A\u062B\u0628\u064A\u062A",
     usage: "\u0627\u0644\u0627\u0633\u062A\u062E\u062F\u0627\u0645",
@@ -17725,12 +17725,12 @@ var components_experimental2 = {
     },
     accessibility: {
       title: "\u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644",
-      liveRegion: "\u0645\u0646\u0637\u0642\u0629 \u0645\u0628\u0627\u0634\u0631\u0629",
-      liveRegionDesc: "\u064A\u062A\u0645 \u0627\u0644\u0625\u0639\u0644\u0627\u0646 \u0639\u0646 \u062A\u062D\u062F\u064A\u062B\u0627\u062A \u0639\u062F\u062F \u0627\u0644\u0631\u0645\u0648\u0632 \u0644\u0642\u0627\u0631\u0626\u0627\u062A \u0627\u0644\u0634\u0627\u0634\u0629 \u0628\u0627\u0633\u062A\u062E\u062F\u0627\u0645 \u0645\u0646\u0627\u0637\u0642 aria-live.",
-      warningAnnouncements: "\u0625\u0639\u0644\u0627\u0646\u0627\u062A \u0627\u0644\u062A\u062D\u0630\u064A\u0631",
-      warningAnnouncementsDesc: "\u064A\u062A\u0645 \u0627\u0644\u0625\u0639\u0644\u0627\u0646 \u0639\u0646 \u062A\u062D\u0630\u064A\u0631\u0627\u062A \u0627\u0644\u062D\u062F \u0628\u0634\u0643\u0644 \u0628\u0627\u0631\u0632 \u0645\u0639 \u0633\u0645\u0627\u062A ARIA \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629.",
+      screenReader: "\u0642\u0627\u0631\u0626 \u0627\u0644\u0634\u0627\u0634\u0629",
+      screenReaderDesc: "\u064A\u062A\u0636\u0645\u0646 \u0627\u0644\u0645\u0643\u0648\u0646 \u062A\u0633\u0645\u064A\u0627\u062A \u0648\u0646\u0635\u0627\u0626\u062D \u0623\u062F\u0648\u0627\u062A \u0648\u0635\u0641\u064A\u0629. \u064A\u062A\u0645 \u062A\u0646\u0633\u064A\u0642 \u0639\u062F\u062F \u0627\u0644\u0631\u0645\u0648\u0632 \u0648\u0627\u0644\u062A\u0643\u0627\u0644\u064A\u0641 \u0628\u062A\u0646\u0633\u064A\u0642 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u0644\u0642\u0627\u0631\u0626\u0627\u062A \u0627\u0644\u0634\u0627\u0634\u0629.",
       visualIndicators: "\u0627\u0644\u0645\u0624\u0634\u0631\u0627\u062A \u0627\u0644\u0628\u0635\u0631\u064A\u0629",
-      visualIndicatorsDesc: "\u062A\u0648\u0641\u0631 \u0627\u0644\u0645\u0624\u0634\u0631\u0627\u062A \u0627\u0644\u0645\u0634\u0641\u0631\u0629 \u0628\u0627\u0644\u0623\u0644\u0648\u0627\u0646 (\u0623\u0635\u0641\u0631 \u0644\u0644\u062A\u062D\u0630\u064A\u0631\u060C \u0623\u062D\u0645\u0631 \u0644\u0644\u062A\u062C\u0627\u0648\u0632) \u0645\u0644\u0627\u062D\u0638\u0627\u062A \u0628\u0635\u0631\u064A\u0629 \u0648\u0627\u0636\u062D\u0629."
+      visualIndicatorsDesc: "\u062A\u0634\u064A\u0631 \u0625\u0634\u0627\u0631\u0627\u062A \u0628\u0635\u0631\u064A\u0629 \u0645\u062A\u0639\u062F\u062F\u0629 \u0625\u0644\u0649 \u0627\u0644\u062D\u0627\u0644\u0629: \u0644\u0648\u0646 \u0634\u0631\u064A\u0637 \u0627\u0644\u062A\u0642\u062F\u0645\u060C \u0634\u0627\u0631\u0629 \u0627\u0644\u062A\u062D\u0630\u064A\u0631\u060C \u0648\u062A\u063A\u064A\u064A\u0631\u0627\u062A \u0644\u0648\u0646 \u0627\u0644\u062D\u062F\u0648\u062F. \u0647\u0630\u0627 \u064A\u0636\u0645\u0646 \u0623\u0646 \u0627\u0644\u062A\u062D\u0630\u064A\u0631\u0627\u062A \u0645\u0631\u0626\u064A\u0629 \u062D\u062A\u0649 \u062F\u0648\u0646 \u0627\u0644\u0627\u0639\u062A\u0645\u0627\u062F \u0641\u0642\u0637 \u0639\u0644\u0649 \u0627\u0644\u0644\u0648\u0646.",
+      tooltips: "\u0646\u0635\u0627\u0626\u062D \u0627\u0644\u0623\u062F\u0648\u0627\u062A",
+      tooltipsDesc: "\u062A\u0648\u0641\u0631 \u0623\u064A\u0642\u0648\u0646\u0629 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062A \u0633\u064A\u0627\u0642\u064B\u0627 \u062D\u0648\u0644 \u0627\u0644\u0631\u0645\u0648\u0632. \u062A\u0642\u0648\u0645 \u0646\u0635\u064A\u062D\u0629 \u0627\u0644\u062A\u0643\u0644\u0641\u0629 \u0628\u062A\u0641\u0635\u064A\u0644 \u062A\u0643\u0627\u0644\u064A\u0641 \u0627\u0644\u0625\u062F\u062E\u0627\u0644/\u0627\u0644\u0625\u062E\u0631\u0627\u062C \u0628\u0634\u0643\u0644 \u0645\u0646\u0641\u0635\u0644 \u0644\u0644\u0634\u0641\u0627\u0641\u064A\u0629."
     },
     rtl: {
       title: "\u0627\u0639\u062A\u0628\u0627\u0631\u0627\u062A RTL",
@@ -18273,6 +18273,7 @@ var Calendar2 = React74__namespace.forwardRef(
     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(
       Button,
       {
+        type: "button",
         variant: "outline",
         size: "icon",
         onClick: isRTL ? goToNextMonth : goToPreviousMonth,
@@ -18282,13 +18283,14 @@ var Calendar2 = React74__namespace.forwardRef(
     ), /* @__PURE__ */ React74__namespace.createElement(
       Button,
       {
+        type: "button",
         variant: "outline",
         size: "icon",
         onClick: isRTL ? goToPreviousMonth : goToNextMonth,
         className: "h-8 w-8"
       },
       /* @__PURE__ */ React74__namespace.createElement(lucideReact.ChevronRight, { className: "h-4 w-4" })
-    )), /* @__PURE__ */ React74__namespace.createElement("div", { className: "text-center" }, /* @__PURE__ */ React74__namespace.createElement("h2", { className: "text-lg font-semibold" }, monthName), showHijri && hijriMonthYear && /* @__PURE__ */ React74__namespace.createElement("p", { className: "text-sm text-muted-foreground" }, hijriMonthYear)), /* @__PURE__ */ React74__namespace.createElement(Button, { variant: "outline", size: "sm", onClick: goToToday }, t.ui.components.today)), /* @__PURE__ */ React74__namespace.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React74__namespace.createElement("div", { className: "grid grid-cols-7 gap-1" }, weekDays.map((day, index) => /* @__PURE__ */ React74__namespace.createElement(
+    )), /* @__PURE__ */ React74__namespace.createElement("div", { className: "text-center" }, /* @__PURE__ */ React74__namespace.createElement("h2", { className: "text-lg font-semibold" }, monthName), showHijri && hijriMonthYear && /* @__PURE__ */ React74__namespace.createElement("p", { className: "text-sm text-muted-foreground" }, hijriMonthYear)), /* @__PURE__ */ React74__namespace.createElement(Button, { type: "button", variant: "outline", size: "sm", onClick: goToToday }, t.ui.components.today)), /* @__PURE__ */ React74__namespace.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React74__namespace.createElement("div", { className: "grid grid-cols-7 gap-1" }, weekDays.map((day, index) => /* @__PURE__ */ React74__namespace.createElement(
       "div",
       {
         key: index,
@@ -18308,6 +18310,7 @@ var Calendar2 = React74__namespace.forwardRef(
       return /* @__PURE__ */ React74__namespace.createElement(
         "button",
         {
+          type: "button",
           key: index,
           onClick: () => handleDateClick(gregorian),
           disabled: isDisabled,