@codebit-programando-solucoes/codebit-web-antd 1.1.32 → 1.1.34

package/dist/components/AudioPlayer.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'react';
+
+/** Props for the AudioPlayer component */
+export interface AudioPlayerProps {
+    /** The URL of the audio file to play */
+    audioUrl: string;
+}
+
+/** AudioPlayer component - A customizable audio player with play/pause, mute/unmute, and seek functionality. */
+export function AudioPlayer(props: AudioPlayerProps): JSX.Element;

package/dist/components/CssTokenBridge.d.ts

@@ -139,4 +139,10 @@ import { FC } from 'react';
  *     }
  *     ```;
  */
-export const CssTokenBridge: FC;
+export interface CssTokenBridgeProps {
+    /** Optional ID of the container element to receive the CSS variables. */
+    containerId?: string;
+}
+
+/** CssTokenBridge component definition. */
+export const CssTokenBridge: FC<CssTokenBridgeProps>;

package/dist/components/index.d.ts

@@ -5,3 +5,4 @@ export * from './ListCard';
 export * from './CssTokenBridge';
 export * from './TableContainer';
 export * from './FilterContainer';
+export * from './AudioPlayer';

package/dist/contexts/CodebitThemeContext.d.ts

@@ -23,4 +23,8 @@ type CodebitThemeProviderProps = {
     children: React.ReactNode;
     /** Whether to persist theme preference in localStorage (default: `true`) */
     storeThemeInLocalStorage?: boolean;
+    /** ID of the root container element where theme classes are applied (default: `'root'`) */
+    containerId?: string;
+    /** Optional explicit theme override. When set, the provider uses this value instead of internal detection. */
+    forcedTheme?: 'dark' | 'light' | null;
 } & ConfigProviderProps;

package/dist/index.cjs

@@ -304,17 +304,18 @@ var __webpack_exports__ = {};
         LocalLoginChangePasswordResult: ()=>LocalLoginChangePasswordResult,
         ChangePassword: ()=>ChangePassword,
         ListCard: ()=>ListCard,
-        CodebitConfigContext: ()=>CodebitConfigContext,
         ForgotPassword: ()=>ForgotPassword,
+        CodebitConfigContext: ()=>CodebitConfigContext,
         LoginContainer: ()=>LoginContainer,
         useErrorMessage: ()=>useErrorMessage,
         LocalLoginRecoveryPasswordResult: ()=>LocalLoginRecoveryPasswordResult,
         FilterContainer: ()=>FilterContainer,
         HandleError: ()=>HandleError,
-        OllamaOutlinedIcon: ()=>OllamaOutlinedIcon,
+        AudioPlayer: ()=>AudioPlayer,
         AdminUserOutlinedIcon: ()=>AdminUserOutlinedIcon,
         CodebitConfigProvider: ()=>CodebitConfigProvider,
         ElectronicBrainOutlinedIcon: ()=>ElectronicBrainOutlinedIcon,
+        OllamaOutlinedIcon: ()=>OllamaOutlinedIcon,
         ThemeToggle: ()=>ThemeToggle
     });
     var jsx_runtime = __webpack_require__("../../node_modules/.pnpm/react@19.2.3/node_modules/react/jsx-runtime.js");
@@ -514,6 +515,16 @@ var __webpack_exports__ = {};
             ListCard: {
                 clearFilters: 'Limpar filtros'
             },
+            AudioPlayer: {
+                play: 'Reproduzir',
+                pause: 'Pausar',
+                mute: 'Desativar som',
+                unmute: 'Ativar som',
+                playAudio: 'Reproduzir áudio',
+                pauseAudio: 'Pausar áudio',
+                muteAudio: 'Ativar som',
+                unmuteAudio: 'Desativar som'
+            },
             Common: {
                 ok: 'Ok',
                 close: 'Fechar',
@@ -616,6 +627,16 @@ var __webpack_exports__ = {};
             ListCard: {
                 clearFilters: 'Clear filters'
             },
+            AudioPlayer: {
+                play: 'Play',
+                pause: 'Pause',
+                mute: 'Mute',
+                unmute: 'Unmute',
+                playAudio: 'Play audio',
+                pauseAudio: 'Pause audio',
+                muteAudio: 'Mute audio',
+                unmuteAudio: 'Unmute audio'
+            },
             Common: {
                 ok: 'Ok',
                 close: 'Close',
@@ -797,10 +818,10 @@ var __webpack_exports__ = {};
         tableContainer: null,
         actions: null
     };
-    const CssTokenBridge = ()=>{
+    const CssTokenBridge = ({ containerId })=>{
         const { token } = external_antd_namespaceObject.theme.useToken();
         (0, external_react_.useLayoutEffect)(()=>{
-            const root = document.documentElement;
+            const root = containerId ? document.getElementById(containerId) ?? document.documentElement : document.documentElement;
             root.style.setProperty('--antd-color-bg-base', token['colorBgBase']);
             root.style.setProperty('--antd-color-bg-container', token['colorBgContainer']);
             root.style.setProperty('--antd-color-bg-elevated', token['colorBgElevated']);
@@ -888,10 +909,14 @@ var __webpack_exports__ = {};
             root.style.setProperty('--antd-border-radius', `${token['borderRadius']}px`);
             root.style.setProperty('--antd-border-radius-lg', `${token['borderRadiusLG']}px`);
         }, [
+            containerId,
             token
         ]);
         return null;
     };
+    CssTokenBridge.propTypes = {
+        containerId: external_prop_types_default().string
+    };
     const TableContainer_module = {
         tableContainer: "tableContainer-EhNwOm"
     };
@@ -979,10 +1004,155 @@ var __webpack_exports__ = {};
         children: external_prop_types_default().node.isRequired,
         ...external_antd_namespaceObject.Card.propTypes
     };
+    const external_date_fns_namespaceObject = require("date-fns");
+    const AudioPlayer_module = {
+        audioPlayer: "audioPlayer-a4xARM",
+        durationTimeContainer: "durationTimeContainer-kmkK6M",
+        slider: "slider-bdta4v"
+    };
+    const AudioPlayer = ({ audioUrl })=>{
+        const [isMuted, setIsMuted] = (0, external_react_.useState)(false);
+        const [duration, setDuration] = (0, external_react_.useState)(0);
+        const [currentTime, setCurrentTime] = (0, external_react_.useState)(0);
+        const [isPlaying, setIsPlaying] = (0, external_react_.useState)(false);
+        const { t } = useCodebitWebAntdTranslation();
+        const audioRef = (0, external_react_.useRef)(null);
+        const hasSource = !!audioUrl;
+        const formatTime = (seconds)=>{
+            const sec = Math.max(0, Math.floor(seconds));
+            const date = (0, external_date_fns_namespaceObject.addSeconds)(new Date(0), sec);
+            const h = Math.floor(sec / 3600);
+            const timeFormat = h > 0 ? 'H:mm:ss' : 'm:ss';
+            return (0, external_date_fns_namespaceObject.format)(date, timeFormat);
+        };
+        const togglePlay = async ()=>{
+            if (!audioRef.current || !hasSource) return;
+            if (audioRef.current.paused) {
+                await audioRef.current.play();
+                setIsPlaying(true);
+            } else {
+                audioRef.current.pause();
+                setIsPlaying(false);
+            }
+        };
+        const toggleMute = ()=>{
+            if (!audioRef.current) return;
+            audioRef.current.muted = !audioRef.current.muted;
+            setIsMuted(audioRef.current.muted);
+        };
+        const handleSliderChange = (value)=>{
+            if (!audioRef.current) return;
+            const safeValue = Math.min(Math.round(value), Math.round(duration));
+            audioRef.current.currentTime = safeValue;
+            setCurrentTime(safeValue);
+        };
+        (0, external_react_.useEffect)(()=>{
+            if (audioRef.current && audioUrl) {
+                audioRef.current.pause();
+                audioRef.current.currentTime = 0;
+                audioRef.current.src = audioUrl;
+                audioRef.current.load();
+            }
+            setIsPlaying(false);
+            setCurrentTime(0);
+            setDuration(0);
+        }, [
+            audioUrl
+        ]);
+        const handleLoadedMetadata = ()=>{
+            if (!audioRef.current) return;
+            const audio = audioRef.current;
+            if (audio.duration !== 1 / 0 && Number.isFinite(audio.duration)) {
+                if (audio.duration > 0) setDuration(audio.duration);
+            } else {
+                audio.currentTime = 1e101;
+                const timeUpdateHandler = ()=>{
+                    audio.removeEventListener('timeupdate', timeUpdateHandler);
+                    audio.currentTime = 0;
+                    setDuration(audio.duration || 0);
+                };
+                audio.addEventListener('timeupdate', timeUpdateHandler);
+            }
+        };
+        return /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+            className: AudioPlayer_module.audioPlayer,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
+                    orientation: 'vertical',
+                    size: 'middle',
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
+                            align: 'center',
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                                    type: 'primary',
+                                    shape: 'circle',
+                                    icon: isPlaying ? /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.PauseCircleOutlined, {}) : /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.PlayCircleOutlined, {}),
+                                    onClick: togglePlay,
+                                    disabled: !hasSource,
+                                    title: isPlaying ? t('AudioPlayer.pause') : t('AudioPlayer.play'),
+                                    "aria-label": isPlaying ? t('AudioPlayer.pauseAudio') : t('AudioPlayer.playAudio')
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Slider, {
+                                    min: 0,
+                                    max: duration,
+                                    value: currentTime,
+                                    onChange: handleSliderChange,
+                                    tooltip: {
+                                        open: false
+                                    },
+                                    disabled: 0 === duration,
+                                    className: AudioPlayer_module.slider
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                                    shape: 'circle',
+                                    icon: isMuted ? /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MutedOutlined, {}) : /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.SoundOutlined, {}),
+                                    onClick: toggleMute,
+                                    disabled: !hasSource,
+                                    title: isMuted ? t('AudioPlayer.unmute') : t('AudioPlayer.mute'),
+                                    "aria-label": isMuted ? t('AudioPlayer.unmuteAudio') : t('AudioPlayer.muteAudio')
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Space, {
+                            className: AudioPlayer_module.durationTimeContainer,
+                            children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Typography.Text, {
+                                strong: true,
+                                children: `${formatTime(currentTime)} / ${formatTime(duration)}`
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime.jsx)("audio", {
+                    ref: audioRef,
+                    onTimeUpdate: (e)=>{
+                        if (!isPlaying) return;
+                        const audioElement = e.target;
+                        setCurrentTime(audioElement.currentTime);
+                    },
+                    onLoadedMetadata: handleLoadedMetadata,
+                    onEnded: ()=>{
+                        setIsPlaying(false);
+                        setCurrentTime(0);
+                    },
+                    onPlay: ()=>setIsPlaying(true),
+                    onPause: ()=>setIsPlaying(false),
+                    muted: isMuted,
+                    children: /*#__PURE__*/ (0, jsx_runtime.jsx)("track", {
+                        kind: 'captions'
+                    })
+                })
+            ]
+        });
+    };
+    AudioPlayer.propTypes = {
+        audioUrl: external_prop_types_default().string.isRequired
+    };
     const CodebitThemeContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
-    const CodebitThemeProvider = ({ children, storeThemeInLocalStorage = true, ...props })=>{
+    const CodebitThemeProvider = ({ children, storeThemeInLocalStorage = true, containerId = 'root', forcedTheme = null, ...props })=>{
         const hasLoaded = (0, external_react_.useRef)(false);
         const [isDarkMode, setIsDarkMode] = (0, external_react_.useState)(()=>{
+            if (forcedTheme) return 'dark' === forcedTheme;
             try {
                 if (storeThemeInLocalStorage) {
                     const savedTheme = localStorage?.getItem('theme');
@@ -993,27 +1163,39 @@ var __webpack_exports__ = {};
                 hasLoaded.current = true;
             }
         });
+        (0, external_react_.useEffect)(()=>{
+            if (forcedTheme) {
+                const mode = 'dark' === forcedTheme;
+                setIsDarkMode(mode);
+            }
+        }, [
+            forcedTheme
+        ]);
         const toggleTheme = ()=>{
             setIsDarkMode((prev)=>!prev);
         };
         (0, external_react_.useEffect)(()=>{
-            const rootElement = document.getElementById('root');
+            const target = document.getElementById(containerId);
+            if (!target) return;
             if (isDarkMode) {
                 document.documentElement.classList.add('dark-theme');
-                rootElement.classList.add('dark-theme');
+                target.classList.add('dark-theme');
             } else {
                 document.documentElement.classList.remove('dark-theme');
-                rootElement.classList.remove('dark-theme');
+                target.classList.remove('dark-theme');
             }
             document.documentElement.style.setProperty('--color-primary', isDarkMode ? '#589C75' : '#29D266');
         }, [
-            isDarkMode
+            isDarkMode,
+            containerId
         ]);
         (0, external_react_.useEffect)(()=>{
             if (hasLoaded.current && storeThemeInLocalStorage) localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+            if (hasLoaded.current && storeThemeInLocalStorage && !forcedTheme) localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
         }, [
             isDarkMode,
-            storeThemeInLocalStorage
+            storeThemeInLocalStorage,
+            forcedTheme
         ]);
         const themeContextValue = (0, external_react_.useMemo)(()=>({
                 isDarkMode,
@@ -1056,7 +1238,9 @@ var __webpack_exports__ = {};
                 },
                 ...props,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime.jsx)(CssTokenBridge, {}),
+                    /*#__PURE__*/ (0, jsx_runtime.jsx)(CssTokenBridge, {
+                        containerId: containerId
+                    }),
                     children
                 ]
             })
@@ -1064,7 +1248,13 @@ var __webpack_exports__ = {};
     };
     CodebitThemeProvider.propTypes = {
         children: external_prop_types_default().node.isRequired,
-        storeThemeInLocalStorage: external_prop_types_default().bool
+        storeThemeInLocalStorage: external_prop_types_default().bool,
+        containerId: external_prop_types_default().string,
+        forcedTheme: external_prop_types_default().oneOf([
+            'dark',
+            'light',
+            null
+        ])
     };
     const LoggedMainContainer_module = {
         layout: "layout-mL5o6I",
@@ -2110,6 +2300,7 @@ var __webpack_exports__ = {};
     OllamaOutlinedIcon.propTypes = external_prop_types_default().object;
 })();
 exports.AdminUserOutlinedIcon = __webpack_exports__.AdminUserOutlinedIcon;
+exports.AudioPlayer = __webpack_exports__.AudioPlayer;
 exports.ChangePassword = __webpack_exports__.ChangePassword;
 exports.CodebitConfigContext = __webpack_exports__.CodebitConfigContext;
 exports.CodebitConfigProvider = __webpack_exports__.CodebitConfigProvider;
@@ -2135,6 +2326,7 @@ exports.useErrorMessage = __webpack_exports__.useErrorMessage;
 exports.useErrorModal = __webpack_exports__.useErrorModal;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "AdminUserOutlinedIcon",
+    "AudioPlayer",
     "ChangePassword",
     "CodebitConfigContext",
     "CodebitConfigProvider",

package/dist/index.css

@@ -73,6 +73,24 @@ html.dark-theme {
   height: 100vh;
 }
 
+.audioPlayer-a4xARM {
+  padding: var(--antd-padding);
+  gap: var(--antd-padding-sm);
+  border-radius: 8px;
+  flex-direction: column;
+  display: flex;
+}
+
+.audioPlayer-a4xARM .durationTimeContainer-kmkK6M {
+  justify-content: center;
+  width: 100%;
+}
+
+.audioPlayer-a4xARM .slider-bdta4v {
+  flex: 1;
+  min-width: 100px;
+}
+
 .layout-mL5o6I {
   height: 100vh;
   position: fixed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codebit-programando-solucoes/codebit-web-antd",
-  "version": "1.1.32",
+  "version": "1.1.34",
   "main": "./dist/index.cjs",
   "type": "module",
   "types": "./src/index.d.ts",
@@ -20,18 +20,19 @@
     "./dist/*.css": "./dist/*.css"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "i18next": "^25.6.2",
     "react-i18next": "^16.3.5"
   },
   "peerDependencies": {
+    "@ant-design/icons": ">=6.1.0",
     "@codebit-programando-solucoes/codebit-web": ">=1.1.6",
+    "@sentry/react": ">=10.26.0",
+    "antd": ">=5.29.3",
+    "prop-types": ">=15.8.1",
     "react": ">=19.2.0",
     "react-dom": ">=19.2.0",
     "react-router": ">=7.12.0",
-    "prop-types": ">=15.8.1",
-    "antd": ">=5.29.3",
-    "@ant-design/icons": ">=6.1.0",
-    "@sentry/react": ">=10.26.0",
     "sass": ">=1.94.0"
   },
   "devDependencies": {