xertica-ui 2.5.2 → 2.6.0

package/components/media/audio-player/AudioPlayer.mdx

@@ -1,67 +1,67 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks';
-import * as AudioPlayerStories from './AudioPlayer.stories';
-
-<Meta of={AudioPlayerStories} />
-
-<Title />
-<Subtitle>A versatile and unified audio playback component supporting two distinct layouts: an interactive card and a global floating bar.</Subtitle>
-
-<Description>
-The `AudioPlayer` is designed to handle all media consumption needs across the platform, from audio previews in content pages to persistent global playback for podcasts or process audios. It features intelligent state transitions and a highly responsive interface.
-</Description>
-
-<Primary />
-
-## Main Properties
-<Controls />
-
----
-
-## Layout Variants
-
-The component is highly adaptable and can be used in two primary modes via the `variant` prop:
-
-### 1. Card (Default)
-Ideal for embedding within pages, such as articles or process details.
-
-*   **Auto-Float**: By default, if audio is playing and the user scrolls away, the player automatically transforms into a floating window in the corner.
-*   **Behavior**: Can be disabled via the `enableAutoFloat={false}` prop.
-
-<Canvas>
-  <AudioPlayerStories.Card />
-</Canvas>
-
-### 2. Bar (Global)
-A fixed bar at the bottom of the application, perfect for continuous listening while the user navigates through different screens.
-
-*   **Layout Adjustment**: Automatically respects sidebar and AI assistant expansion using `LayoutContext` to avoid overlapping vital UI elements.
-*   **Podcast Style**: Can use `colorVariant="primary"` for a high-contrast look using brand colors.
-
-<Canvas>
-  <AudioPlayerStories.GlobalBar />
-</Canvas>
-
----
-
-## Features and Functionality
-
-### Playback Speed Control
-The player allows adjusting the playback speed (`0.5x`, `1x`, `1.5x`, `2x`). On large screens, the control is directly accessible; on smaller screens, it automatically migrates to the secondary options menu.
-
-### Intelligent Responsiveness
-Unlike static menus, the `AudioPlayer` uses dynamic reallocation logic:
-*   **Volume, Speed, and Actions**: As the screen width decreases, these controls move from the main bar and are automatically grouped into the "More Options" menu (`...`), ensuring the player never breaks or hides vital controls.
-
-### Floating Window
-When in floating mode (either via auto-float or manually), the player displays the fixed title **"Reproduzindo Mídia"** to maintain visual consistency and focus on playback, regardless of the original title length.
-
----
-
-## AI Best Practices
-
-> [!TIP]
-> - **Recommended Variant** — Use the `bar` variant for audios the user should continue listening to while performing other tasks. Use the `card` variant for page-specific explanatory content.
-> - **Playback Identification** — When the player floats, it shows a generic title for a clean compact layout, but keeps metadata accessible in the controls.
-
-> [!IMPORTANT]
-> - **Singleton** — We recommend instantiating only one global `AudioPlayer` per application to avoid overlapping audio streams.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks';
+import * as AudioPlayerStories from './AudioPlayer.stories';
+
+<Meta of={AudioPlayerStories} />
+
+<Title />
+<Subtitle>A versatile and unified audio playback component supporting two distinct layouts: an interactive card and a global floating bar.</Subtitle>
+
+<Description>
+The `AudioPlayer` is designed to handle all media consumption needs across the platform, from audio previews in content pages to persistent global playback for podcasts or process audios. It features intelligent state transitions and a highly responsive interface.
+</Description>
+
+<Primary />
+
+## Main Properties
+<Controls />
+
+---
+
+## Layout Variants
+
+The component is highly adaptable and can be used in two primary modes via the `variant` prop:
+
+### 1. Card (Default)
+Ideal for embedding within pages, such as articles or process details.
+
+*   **Auto-Float**: By default, if audio is playing and the user scrolls away, the player automatically transforms into a floating window in the corner.
+*   **Behavior**: Can be disabled via the `enableAutoFloat={false}` prop.
+
+<Canvas>
+  <AudioPlayerStories.Card />
+</Canvas>
+
+### 2. Bar (Global)
+A fixed bar at the bottom of the application, perfect for continuous listening while the user navigates through different screens.
+
+*   **Layout Adjustment**: Automatically respects sidebar and AI assistant expansion using `LayoutContext` to avoid overlapping vital UI elements.
+*   **Podcast Style**: Can use `colorVariant="primary"` for a high-contrast look using brand colors.
+
+<Canvas>
+  <AudioPlayerStories.GlobalBar />
+</Canvas>
+
+---
+
+## Features and Functionality
+
+### Playback Speed Control
+The player allows adjusting the playback speed (`0.5x`, `1x`, `1.5x`, `2x`). On large screens, the control is directly accessible; on smaller screens, it automatically migrates to the secondary options menu.
+
+### Intelligent Responsiveness
+Unlike static menus, the `AudioPlayer` uses dynamic reallocation logic:
+*   **Volume, Speed, and Actions**: As the screen width decreases, these controls move from the main bar and are automatically grouped into the "More Options" menu (`...`), ensuring the player never breaks or hides vital controls.
+
+### Floating Window
+When in floating mode (either via auto-float or manually), the player displays the fixed title **"Reproduzindo Mídia"** to maintain visual consistency and focus on playback, regardless of the original title length.
+
+---
+
+## AI Best Practices
+
+> [!TIP]
+> - **Recommended Variant** — Use the `bar` variant for audios the user should continue listening to while performing other tasks. Use the `card` variant for page-specific explanatory content.
+> - **Playback Identification** — When the player floats, it shows a generic title for a clean compact layout, but keeps metadata accessible in the controls.
+
+> [!IMPORTANT]
+> - **Singleton** — We recommend instantiating only one global `AudioPlayer` per application to avoid overlapping audio streams.

package/components/media/audio-player/AudioPlayer.test.tsx

@@ -9,7 +9,8 @@ class MockIntersectionObserver {
 }
 vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);
 
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { renderWithProviders as render } from '../../../test/render';
 import { AudioPlayer } from './AudioPlayer';
 import { LayoutProvider } from '../../../contexts/LayoutContext';
 

package/components/media/floating-media-wrapper.mdx

@@ -1,74 +1,74 @@
-import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-
-<Meta title="Media/FloatingMediaWrapper" />
-
-<Title>FloatingMediaWrapper</Title>
-<Subtitle>Draggable, resizable floating portal wrapper for video and audio players.</Subtitle>
-
----
-
-## Overview
-
-`FloatingMediaWrapper` wraps any media player (`VideoPlayer`, `AudioPlayer`, etc.) and provides two states:
-
-- **Inline** — The player renders in its normal document position.
-- **Floating** — The player detaches into a fixed, draggable, resizable overlay portal (`document.body`) while a placeholder occupies the original position.
-
-Position and size are persisted to `localStorage` per `playerId`, so the user's floating window survives page navigation.
-
-```tsx
-import { FloatingMediaWrapper } from 'xertica-ui/media';
-import { VideoPlayer } from 'xertica-ui/media';
-
-function MyPage() {
-  const [isFloating, setIsFloating] = React.useState(false);
-
-  return (
-    <FloatingMediaWrapper
-      isFloating={isFloating}
-      setIsFloating={setIsFloating}
-      title="Tutorial Video"
-      playerId="tutorial-v1"
-    >
-      <VideoPlayer src="https://example.com/video.mp4" />
-    </FloatingMediaWrapper>
-  );
-}
-```
-
----
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | **Required** | The media player to wrap. |
-| `isFloating` | `boolean` | **Required** | Controlled floating state. |
-| `setIsFloating` | `(floating: boolean) => void` | **Required** | Setter for the floating state. |
-| `title` | `string` | `'Reproduzindo Mídia'` | Title shown in the floating window's drag handle bar. |
-| `onClose` | `() => void` | — | Called when the close (X) button is clicked. |
-| `onCloseMedia` | `() => void` | — | Alternative close handler that takes priority over `onClose`. |
-| `aspectRatio` | `number` | `16/9` | Aspect ratio used for the inline placeholder height. |
-| `minWidth` | `number` | `320` | Minimum floating window width in pixels. |
-| `minHeight` | `number` | `110` | Minimum floating window height in pixels. |
-| `colorVariant` | `'default' \| 'primary'` | `'default'` | Floating window chrome color. `primary` uses brand colors. |
-| `playerId` | `string` | `'default'` | Unique key for persisting position/size to `localStorage`. |
-| `enablePadding` | `boolean` | `false` | Adds inner padding around the player inside the floating container. |
-| `className` | `string` | — | CSS classes applied to the inline container or placeholder. |
-
----
-
-## Resize Handles
-
-When floating, all eight directional resize handles are active (top, bottom, left, right, and all four corners). The window respects `minWidth` and `minHeight` constraints.
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Unique `playerId`** — Always provide a unique `playerId` per player instance. If two players share an ID, their saved positions will overwrite each other in `localStorage`.
-> - **Controlled state** — Manage `isFloating` in the parent component. A "Picture-in-Picture" or "Float" button in the player UI should call `setIsFloating(true)`.
-> - **Close vs. close media** — Use `onCloseMedia` to stop playback and `onClose` for navigation. `onCloseMedia` takes priority if both are provided.
-> - **SSR** — The portal uses `createPortal(…, document.body)`, which requires a browser DOM. Guard with `isMounted` state (already handled internally) when using SSR frameworks.
-> - **Aspect ratio** — Set `aspectRatio` to match your media source (e.g., `4/3` for legacy video, `1` for square audio art) so the inline placeholder has the correct height.
+import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
+
+<Meta title="Media/FloatingMediaWrapper" />
+
+<Title>FloatingMediaWrapper</Title>
+<Subtitle>Draggable, resizable floating portal wrapper for video and audio players.</Subtitle>
+
+---
+
+## Overview
+
+`FloatingMediaWrapper` wraps any media player (`VideoPlayer`, `AudioPlayer`, etc.) and provides two states:
+
+- **Inline** — The player renders in its normal document position.
+- **Floating** — The player detaches into a fixed, draggable, resizable overlay portal (`document.body`) while a placeholder occupies the original position.
+
+Position and size are persisted to `localStorage` per `playerId`, so the user's floating window survives page navigation.
+
+```tsx
+import { FloatingMediaWrapper } from 'xertica-ui/media';
+import { VideoPlayer } from 'xertica-ui/media';
+
+function MyPage() {
+  const [isFloating, setIsFloating] = React.useState(false);
+
+  return (
+    <FloatingMediaWrapper
+      isFloating={isFloating}
+      setIsFloating={setIsFloating}
+      title="Tutorial Video"
+      playerId="tutorial-v1"
+    >
+      <VideoPlayer src="https://example.com/video.mp4" />
+    </FloatingMediaWrapper>
+  );
+}
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | **Required** | The media player to wrap. |
+| `isFloating` | `boolean` | **Required** | Controlled floating state. |
+| `setIsFloating` | `(floating: boolean) => void` | **Required** | Setter for the floating state. |
+| `title` | `string` | `'Reproduzindo Mídia'` | Title shown in the floating window's drag handle bar. |
+| `onClose` | `() => void` | — | Called when the close (X) button is clicked. |
+| `onCloseMedia` | `() => void` | — | Alternative close handler that takes priority over `onClose`. |
+| `aspectRatio` | `number` | `16/9` | Aspect ratio used for the inline placeholder height. |
+| `minWidth` | `number` | `320` | Minimum floating window width in pixels. |
+| `minHeight` | `number` | `110` | Minimum floating window height in pixels. |
+| `colorVariant` | `'default' \| 'primary'` | `'default'` | Floating window chrome color. `primary` uses brand colors. |
+| `playerId` | `string` | `'default'` | Unique key for persisting position/size to `localStorage`. |
+| `enablePadding` | `boolean` | `false` | Adds inner padding around the player inside the floating container. |
+| `className` | `string` | — | CSS classes applied to the inline container or placeholder. |
+
+---
+
+## Resize Handles
+
+When floating, all eight directional resize handles are active (top, bottom, left, right, and all four corners). The window respects `minWidth` and `minHeight` constraints.
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Unique `playerId`** — Always provide a unique `playerId` per player instance. If two players share an ID, their saved positions will overwrite each other in `localStorage`.
+> - **Controlled state** — Manage `isFloating` in the parent component. A "Picture-in-Picture" or "Float" button in the player UI should call `setIsFloating(true)`.
+> - **Close vs. close media** — Use `onCloseMedia` to stop playback and `onClose` for navigation. `onCloseMedia` takes priority if both are provided.
+> - **SSR** — The portal uses `createPortal(…, document.body)`, which requires a browser DOM. Guard with `isMounted` state (already handled internally) when using SSR frameworks.
+> - **Aspect ratio** — Set `aspectRatio` to match your media source (e.g., `4/3` for legacy video, `1` for square audio art) so the inline placeholder has the correct height.

package/components/media/video-player/VideoPlayer.mdx

@@ -1,103 +1,103 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks';
-import * as VideoPlayerStories from './VideoPlayer.stories';
-
-<Meta of={VideoPlayerStories} />
-
-<Title />
-<Subtitle>A feature-rich video player component with floating mode support, custom controls, and automatic state management.</Subtitle>
-
-<Description>
-The `VideoPlayer` is a comprehensive video playback solution designed to deliver a seamless viewing experience across the platform. It features custom playback controls, automatic floating behavior when scrolled out of view, and full integration with the Xertica UI design system.
-</Description>
-
-<Primary />
-
-## Main Properties
-<Controls />
-
----
-
-## Features and Functionality
-
-### Custom Playback Controls
-The player provides a complete set of controls:
-- **Play/Pause**: Toggle playback with a single click on the video or the control button
-- **Progress Bar**: Seek to any position in the video
-- **Volume Control**: Adjust volume with a slider that appears on hover
-- **Mute Toggle**: Quick mute/unmute button
-- **Picture-in-Picture**: Float the player as a small overlay
-- **Fullscreen**: Restore the player to full view
-
-### Auto-Floating Mode
-When a video is playing and the user scrolls away:
-- The player automatically transforms into a floating window in the corner
-- Playback state is preserved (position, playing state)
-- The floating mode can be toggled manually via the PiP button
-- Clicking "Restore" returns the player to its original position
-
-<Canvas>
-  <VideoPlayerStories.AutoFloat />
-</Canvas>
-
-### Intelligent Controls Visibility
-Controls automatically hide after 2.5 seconds of inactivity while playing:
-- Moving the mouse restores controls visibility
-- Clicking anywhere on the video toggles play/pause
-
----
-
-## Usage Examples
-
-### Basic Video Player
-Use the default configuration for simple video embedding:
-
-```tsx
-<VideoPlayer
-  src="https://example.com/video.mp4"
-  title="My Video"
-/>
-```
-
-### Video with Poster Image
-Add a poster image for better visual presentation before playback:
-
-```tsx
-<VideoPlayer
-  src="https://example.com/video.mp4"
-  poster="https://example.com/poster.jpg"
-  title="Featured Video"
-/>
-```
-
-### Autoplay Video
-Enable autoplay for background videos or featured content:
-
-```tsx
-<VideoPlayer
-  src="https://example.com/video.mp4"
-  title="Autoplay Video"
-  autoPlay
-/>
-```
-
-### Disable Auto-Floating
-Disable the automatic floating behavior when scrolling:
-
-```tsx
-<VideoPlayer
-  src="https://example.com/video.mp4"
-  title="Static Video"
-  enableAutoFloat={false}
-/>
-```
-
----
-
-## AI Best Practices
-
-> [!TIP]
-> - **Auto-Float** — The floating behavior is ideal for long-form content where users may want to continue watching while scrolling through other content.
-> - **Posters** — Always provide a `poster` image for better UX, especially for videos that may take time to load.
-
-> [!IMPORTANT]
+import { Meta, Title, Subtitle, Description, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks';
+import * as VideoPlayerStories from './VideoPlayer.stories';
+
+<Meta of={VideoPlayerStories} />
+
+<Title />
+<Subtitle>A feature-rich video player component with floating mode support, custom controls, and automatic state management.</Subtitle>
+
+<Description>
+The `VideoPlayer` is a comprehensive video playback solution designed to deliver a seamless viewing experience across the platform. It features custom playback controls, automatic floating behavior when scrolled out of view, and full integration with the Xertica UI design system.
+</Description>
+
+<Primary />
+
+## Main Properties
+<Controls />
+
+---
+
+## Features and Functionality
+
+### Custom Playback Controls
+The player provides a complete set of controls:
+- **Play/Pause**: Toggle playback with a single click on the video or the control button
+- **Progress Bar**: Seek to any position in the video
+- **Volume Control**: Adjust volume with a slider that appears on hover
+- **Mute Toggle**: Quick mute/unmute button
+- **Picture-in-Picture**: Float the player as a small overlay
+- **Fullscreen**: Restore the player to full view
+
+### Auto-Floating Mode
+When a video is playing and the user scrolls away:
+- The player automatically transforms into a floating window in the corner
+- Playback state is preserved (position, playing state)
+- The floating mode can be toggled manually via the PiP button
+- Clicking "Restore" returns the player to its original position
+
+<Canvas>
+  <VideoPlayerStories.AutoFloat />
+</Canvas>
+
+### Intelligent Controls Visibility
+Controls automatically hide after 2.5 seconds of inactivity while playing:
+- Moving the mouse restores controls visibility
+- Clicking anywhere on the video toggles play/pause
+
+---
+
+## Usage Examples
+
+### Basic Video Player
+Use the default configuration for simple video embedding:
+
+```tsx
+<VideoPlayer
+  src="https://example.com/video.mp4"
+  title="My Video"
+/>
+```
+
+### Video with Poster Image
+Add a poster image for better visual presentation before playback:
+
+```tsx
+<VideoPlayer
+  src="https://example.com/video.mp4"
+  poster="https://example.com/poster.jpg"
+  title="Featured Video"
+/>
+```
+
+### Autoplay Video
+Enable autoplay for background videos or featured content:
+
+```tsx
+<VideoPlayer
+  src="https://example.com/video.mp4"
+  title="Autoplay Video"
+  autoPlay
+/>
+```
+
+### Disable Auto-Floating
+Disable the automatic floating behavior when scrolling:
+
+```tsx
+<VideoPlayer
+  src="https://example.com/video.mp4"
+  title="Static Video"
+  enableAutoFloat={false}
+/>
+```
+
+---
+
+## AI Best Practices
+
+> [!TIP]
+> - **Auto-Float** — The floating behavior is ideal for long-form content where users may want to continue watching while scrolling through other content.
+> - **Posters** — Always provide a `poster` image for better UX, especially for videos that may take time to load.
+
+> [!IMPORTANT]
 > - **Single Instance** — For auto-floating to work correctly, ensure the player is the only instance or properly managed when multiple videos exist on the page.

package/components/media/video-player/VideoPlayer.test.tsx

@@ -9,7 +9,8 @@ class MockIntersectionObserver {
 }
 vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);
 
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { renderWithProviders as render } from '../../../test/render';
 import { VideoPlayer } from './VideoPlayer';
 
 // Mock HTMLVideoElement methods
@@ -57,7 +58,7 @@ describe('VideoPlayer', () => {
   it('renders with default title when none is provided', () => {
     const { container } = render(<VideoPlayer src="test.mp4" />);
     const video = container.querySelector('video');
-    expect(video?.getAttribute('title')).toBe('Untitled Video');
+    expect(video?.getAttribute('title')).toBe('Vídeo');
   });
 
   it('does not autoPlay by default', () => {