noorui-rtl 0.4.3 → 0.4.5

package/CHANGELOG.md

@@ -7,6 +7,58 @@ 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.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
+- **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
+  - **time-picker**: Fixed Use Cases, Type Definition, API Reference (2x), and Features sections
+  - All sections now use standard pattern: `<section className="mb-16">` with `<h2 className="text-2xl font-bold tracking-tight mb-6">`
+
+### Changed
+- **Component Documentation**: Standardized section spacing for consistent visual hierarchy
+
+### Notes
+This release focuses on improving documentation consistency and visual hierarchy across all component pages.
+
+## [0.4.3] - 2025-12-05
+
+### Fixed
+- **Code Quality**: Resolved all React Hooks exhaustive-deps warnings (zero warnings achieved)
+  - **DataTable**: Wrapped `sampleUsers` in `useMemo` and added to dependency arrays in sorting, filtering, and pagination hooks
+  - **useRelativeTime Hook**: Wrapped `targetDate` in `useMemo` and `getRelativeTime` in `useCallback` with proper dependencies
+  - **Calendar**: Wrapped calendar days generation in `useMemo` with complete dependencies including `getHijriDate`
+- **Translations**: Fixed missing i18n keys across 11+ experimental component pages
+  - Added `rtlDemo` object with `ltr` and `rtl` keys to common.ts (EN/AR)
+  - Added missing example keys: `fullFeatured`, `compactMode`, `withPresets`, `customPresets`, `withoutPresets`, `inContext`
+  - Fixed incorrect key references: `rtl` → `rtlSupport`, `interface` → `typeDefinitions`, `sizes` → `examples.sizes`, `inContext` → `examples.inContext`
+- **NotificationCenter**: Fixed PropDefinition type error by changing `defaultValue` to `default` property
+- **WorkflowCanvas & WorkflowNode**: Fixed missing imports for `useDirection` and `content` from i18n
+- **ThinkingIndicator**: Fixed incorrect translation key references in examples section
+- **ParameterSlider**: Fixed non-existent translation key reference
+
 ### Added
 - **Website**: Added "Starters" link to main navigation (both desktop and mobile)
 - **Website**: Added i18n translations for "Starters" menu item (English: "Starters", Arabic: "نماذج البداية")
@@ -20,6 +72,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Documentation**: Updated README.md to include Starters page in documentation links
 - **Documentation**: Updated ROADMAP.md to highlight Kitab as completed deliverable
 - **Documentation**: Updated starters/README.md with full Kitab feature list
+- **Code Standards**: Added ESLint disable comments for intentional img usage (component library design decision)
+  - NotificationCenter: Avatar display using dynamic user-provided URLs
+  - ListingCard: Product image display
+  - FileUpload: Image preview using blob URLs from FileReader
 
 ### Changed
 - **Website**: Improved visibility of /starters page through navigation integration
@@ -27,6 +83,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Starters Page**: Updated GitHub button to link to https://github.com/topics/noor-ui for broader project discovery
 - **Roadmap**: Updated current status to "READY FOR PUBLIC LAUNCH" with technical pre-launch checklist completed
 - **Roadmap**: Added Kitab to recent wins and next actions focused on marketing launch
+- **Website**: Updated all version references from v0.4.2 to v0.4.3
+  - Homepage (app/page.tsx)
+  - English home translations (lib/i18n/en/home.ts)
+  - Arabic home translations (lib/i18n/ar/home.ts)
+  - Launch plan documentation (LAUNCH_PLAN.md - 7 references)
+  - Roadmap documentation (ROADMAP.md - 4 references)
+- **Build Process**: Achieved zero build warnings and zero compilation errors
+- **Code Quality**: Improved React performance patterns with proper memoization and callback usage
+
+### Notes
+This release focuses on code quality improvements and documentation completeness. All 74+ components maintain full RTL/LTR support with zero build warnings. The codebase is now optimized for production use with proper React performance patterns.
 
 ## [0.4.2] - 2025-11-29
 
@@ -179,7 +246,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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
 
@@ -216,7 +283,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
@@ -225,7 +292,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.d.mts

@@ -345,11 +345,11 @@ declare const CollapsibleContent: React$1.ForwardRefExoticComponent<CollapsibleP
 
 declare const Command: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -373,45 +373,45 @@ declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pic
 } & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key">, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
     heading?: React$1.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key">, "value" | "disabled" | "onSelect"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/index.d.ts

@@ -345,11 +345,11 @@ declare const CollapsibleContent: React$1.ForwardRefExoticComponent<CollapsibleP
 
 declare const Command: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -373,45 +373,45 @@ declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pic
 } & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key">, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
     heading?: React$1.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key">, "value" | "disabled" | "onSelect"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;