react-modern-audio-player 2.1.0 → 2.3.0

package/dist/types/api/useAudioPlayer.d.ts

@@ -6,6 +6,7 @@ export interface AudioPlayerControls {
     duration: number;
     repeatType: RepeatType;
     muted: boolean;
+    playbackRate: number;
     currentTrack: AudioData | null;
     currentIndex: number;
     playList: ReadonlyArray<AudioData>;
@@ -18,6 +19,7 @@ export interface AudioPlayerControls {
     setVolume: (volume: number) => void;
     toggleMute: () => void;
     setTrack: (index: number) => void;
+    setPlaybackRate: (rate: number) => void;
 }
 /**
  * Convenience facade that composes all domain sub-hooks into a single flat

package/dist/types/api/useAudioPlayerPlayback.d.ts

@@ -2,8 +2,10 @@ import { RepeatType } from '../components/AudioPlayer/Context/StateContext';
 export interface AudioPlayerPlaybackControls {
     isPlaying: boolean;
     repeatType: RepeatType;
+    playbackRate: number;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;
+    setPlaybackRate: (rate: number) => void;
 }
 export declare const useAudioPlayerPlayback: () => AudioPlayerPlaybackControls;

package/dist/types/components/AudioPlayer/Context/PlaybackContext.d.ts

@@ -6,5 +6,6 @@ export interface PlaybackContext {
     repeatType: RepeatType;
     isLoadedMetaData: boolean | undefined;
     audioResetKey: number;
+    playbackRate: number;
 }
 export declare const playbackContext: import('react').Context<PlaybackContext | null>;

package/dist/types/components/AudioPlayer/Context/StateContext/audio.d.ts

@@ -8,6 +8,7 @@ export type AudioCustomProps = {
     volume?: number;
     currentTime?: number;
     duration?: number;
+    playbackRate?: number;
 };
 export declare const DEFAULT_AUDIO_STATE: {
     readonly isPlaying: false;
@@ -16,6 +17,7 @@ export declare const DEFAULT_AUDIO_STATE: {
     readonly repeatType: RepeatType;
     readonly currentTime: 0;
     readonly duration: 0;
+    readonly playbackRate: 1;
 };
 export type AudioData = {
     src: string;

package/dist/types/components/AudioPlayer/Context/StateContext/element.d.ts

@@ -15,6 +15,7 @@ export type ActiveUI = Partial<{
     trackInfo: boolean;
     artwork: boolean;
     progress: ProgressUI;
+    playbackRate: boolean;
 }>;
 export type CustomIcons = Partial<{
     play: ReactNode;

package/dist/types/components/AudioPlayer/Context/StateContext/index.d.ts

@@ -1,6 +1,6 @@
 import { AudioState } from './audio';
 import { ActiveUI, CoverImgsCss, ElementRefs, CustomIcons, PlayList } from './element';
-import { PlayListPlacement, InterfacePlacement, PlayerPlacement, VolumeSliderPlacement } from './placement';
+import { PlayListPlacement, InterfacePlacement, PlayerPlacement, SpeedSelectorPlacement, VolumeSliderPlacement } from './placement';
 export interface AudioPlayerStateContext {
     playList: PlayList;
     curPlayId: number;
@@ -11,6 +11,7 @@ export interface AudioPlayerStateContext {
     playerPlacement?: PlayerPlacement;
     interfacePlacement?: InterfacePlacement;
     volumeSliderPlacement?: VolumeSliderPlacement;
+    speedSelectorPlacement?: SpeedSelectorPlacement;
     elementRefs?: ElementRefs;
     customIcons?: CustomIcons;
     coverImgsCss?: CoverImgsCss;
@@ -19,6 +20,7 @@ export interface AudioPlayerStateContext {
 }
 export type InitialStates = Partial<AudioState> & {
     curPlayId: number;
+    playListExpanded?: boolean;
 };
 export * from './audio';
 export * from './element';

package/dist/types/components/AudioPlayer/Context/StateContext/placement.d.ts

@@ -2,24 +2,26 @@ import { DropdownContentPlacement } from '../../../Dropdown';
 import { NumbersToUnionNum } from '../../../../utils/generateUnionNumType';
 import { ActiveUI } from './element';
 export type VolumeSliderPlacement = DropdownContentPlacement;
+export type SpeedSelectorPlacement = DropdownContentPlacement;
 export type PlayListPlacement = "bottom" | "top";
 export type PlayerPlacement = "bottom" | "top" | "bottom-left" | "bottom-right" | "top-left" | "top-right" | "static";
-export declare const defaultInterfacePlacementMaxLength = 10;
+export declare const DEFAULT_INTERFACE_GRID_BOUND = 11;
 export type InterfacePlacementKey = Exclude<keyof ActiveUI, "all" | "prevNnext" | "trackTime" | "volumeSlider"> | "trackTimeCurrent" | "trackTimeDuration";
-export type InterfaceGridTemplateArea<TMaxLength extends number = typeof defaultInterfacePlacementMaxLength> = Partial<Record<InterfacePlacementKey, `row${NumbersToUnionNum<TMaxLength>}-${NumbersToUnionNum<TMaxLength>}`>>;
+export type InterfaceGridTemplateArea<TMaxLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND> = Partial<Record<InterfacePlacementKey, `row${NumbersToUnionNum<TMaxLength>}-${NumbersToUnionNum<TMaxLength>}`>>;
 export type InterfaceGridCustomComponentsArea<TMaxLength extends number> = Partial<Record<string, `row${NumbersToUnionNum<TMaxLength>}-${NumbersToUnionNum<TMaxLength>}`>>;
 export type InterfaceGridItemArea = Partial<Record<InterfacePlacementKey, string>>;
-export type InterfacePlacement<TMaxLength extends number = typeof defaultInterfacePlacementMaxLength> = {
+export type InterfacePlacement<TMaxLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND> = {
     templateArea?: InterfaceGridTemplateArea<TMaxLength>;
     customComponentsArea?: InterfaceGridCustomComponentsArea<TMaxLength>;
     itemCustomArea?: InterfaceGridItemArea;
 };
 export declare const defaultInterfacePlacement: {
-    templateArea: Required<InterfaceGridTemplateArea<typeof defaultInterfacePlacementMaxLength>>;
+    templateArea: Required<InterfaceGridTemplateArea<typeof DEFAULT_INTERFACE_GRID_BOUND>>;
 };
-export interface Placements<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength> {
+export interface Placements<TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND> {
     playListPlacement: PlayListPlacement;
     interfacePlacement: InterfacePlacement<TInterfacePlacementLength>;
     volumeSliderPlacement: VolumeSliderPlacement | undefined;
+    speedSelectorPlacement: SpeedSelectorPlacement | undefined;
     playerPlacement: PlayerPlacement | undefined;
 }

package/dist/types/components/AudioPlayer/Context/UIContext.d.ts

@@ -1,4 +1,4 @@
-import { ActiveUI, InterfacePlacement, PlayListPlacement, PlayerPlacement, VolumeSliderPlacement } from './StateContext';
+import { ActiveUI, InterfacePlacement, PlayListPlacement, PlayerPlacement, SpeedSelectorPlacement, VolumeSliderPlacement } from './StateContext';
 export type ColorScheme = "light" | "dark";
 export interface UIContext {
     activeUI: ActiveUI;
@@ -6,6 +6,8 @@ export interface UIContext {
     playerPlacement?: PlayerPlacement;
     interfacePlacement?: InterfacePlacement;
     volumeSliderPlacement?: VolumeSliderPlacement;
+    speedSelectorPlacement?: SpeedSelectorPlacement;
     colorScheme?: ColorScheme;
+    playListExpanded?: boolean;
 }
 export declare const uiContext: import('react').Context<UIContext | null>;

package/dist/types/components/AudioPlayer/Context/dispatchContext.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch } from 'react';
-import { RepeatType, PlayList, PlayListPlacement, PlayerPlacement, ActiveUI, ElementRefs, CustomIcons, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement, defaultInterfacePlacementMaxLength, AudioState } from './StateContext';
-export type AudioContextAction<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength> = {
+import { RepeatType, PlayList, PlayListPlacement, PlayerPlacement, ActiveUI, ElementRefs, CustomIcons, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement, DEFAULT_INTERFACE_GRID_BOUND, AudioState } from './StateContext';
+export type AudioContextAction<TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND> = {
     type: "NEXT_AUDIO";
 } | {
     type: "PREV_AUDIO";
@@ -34,6 +34,9 @@ export type AudioContextAction<TInterfacePlacementLength extends number = typeof
 } | {
     type: "SET_MUTED";
     muted: boolean;
+} | {
+    type: "SET_PLAYBACK_RATE";
+    playbackRate: number;
 } | {
     type: "SET_ACTIVE_UI";
     activeUI: ActiveUI;

package/dist/types/{hooks/context → components/AudioPlayer/Context/hooks}/index.d.ts

@@ -1,4 +1,3 @@
-export * from './useNonNullableContext';
 export * from './usePlaybackContext';
 export * from './useTimeContext';
 export * from './useTrackContext';

package/dist/types/components/AudioPlayer/Context/hooks/useAudioAttrsContext.d.ts

@@ -0,0 +1,2 @@
+import { AudioAttrsContext } from '../AudioAttrsContext';
+export declare const useAudioAttrsContext: () => AudioAttrsContext;

package/dist/types/components/AudioPlayer/Context/hooks/usePlaybackContext.d.ts

@@ -0,0 +1,2 @@
+import { PlaybackContext } from '../PlaybackContext';
+export declare const usePlaybackContext: () => PlaybackContext;

package/dist/types/components/AudioPlayer/Context/hooks/useResourceContext.d.ts

@@ -0,0 +1,2 @@
+import { ResourceContext } from '../ResourceContext';
+export declare const useResourceContext: () => ResourceContext;

package/dist/types/components/AudioPlayer/Context/hooks/useTimeContext.d.ts

@@ -0,0 +1,2 @@
+import { TimeContext } from '../TimeContext';
+export declare const useTimeContext: () => TimeContext;

package/dist/types/components/AudioPlayer/Context/hooks/useTrackContext.d.ts

@@ -0,0 +1,2 @@
+import { TrackContext } from '../TrackContext';
+export declare const useTrackContext: () => TrackContext;

package/dist/types/components/AudioPlayer/Context/hooks/useUIContext.d.ts

@@ -0,0 +1 @@
+export declare const useUIContext: () => import('../UIContext').UIContext;

package/dist/types/components/AudioPlayer/Context/index.d.ts

@@ -8,3 +8,4 @@ export * from './UIContext';
 export * from './ResourceContext';
 export * from './TimeContext';
 export * from './providerProps';
+export * from './hooks';

package/dist/types/components/AudioPlayer/Context/providerProps.d.ts

@@ -1,4 +1,4 @@
-import { ActiveUI, CoverImgsCss, CustomIcons, InitialStates, InterfacePlacement, PlayList, PlayListPlacement, PlayerPlacement, VolumeSliderPlacement } from './StateContext';
+import { ActiveUI, CoverImgsCss, CustomIcons, InitialStates, InterfacePlacement, PlayList, PlayListPlacement, PlayerPlacement, SpeedSelectorPlacement, VolumeSliderPlacement } from './StateContext';
 export interface AudioPlayerStateProviderProps<TInterfacePlacementLength extends number> {
     playList: PlayList;
     audioInitialState?: InitialStates;
@@ -10,5 +10,6 @@ export interface AudioPlayerStateProviderProps<TInterfacePlacementLength extends
         playList?: PlayListPlacement;
         interface?: InterfacePlacement<TInterfacePlacementLength>;
         volumeSlider?: VolumeSliderPlacement;
+        speedSelector?: SpeedSelectorPlacement;
     };
 }

package/dist/types/components/AudioPlayer/Interface/Controller/Button/RepeatTypeBtn.d.ts

@@ -1,2 +1,4 @@
 import { FC } from 'react';
-export declare const RepeatTypeBtn: FC;
+import { GridItemLayoutProps } from '../../../../Grid';
+export type RepeatTypeBtnProps = GridItemLayoutProps;
+export declare const RepeatTypeBtn: FC<RepeatTypeBtnProps>;

package/dist/types/components/AudioPlayer/Interface/Controller/Button/TransportControls/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { GridItemLayoutProps } from '../../../../../Grid';
+export type TransportControlsProps = GridItemLayoutProps;
+export declare const TransportControls: FC<TransportControlsProps>;

package/dist/types/components/AudioPlayer/Interface/Controller/Button/index.d.ts

@@ -1,5 +1,6 @@
-export * from './PlayBtn';
-export * from './PrevBtn';
-export * from './NextBtn';
+export * from './TransportControls';
+export * from './TransportControls/PlayBtn';
+export * from './TransportControls/PrevBtn';
+export * from './TransportControls/NextBtn';
 export * from './RepeatTypeBtn';
 export * from './VolumeIcon';

package/dist/types/components/AudioPlayer/Interface/Controller/Drawer/SortablePlayList/index.d.ts

@@ -1,2 +1,6 @@
 import { FC } from 'react';
-export declare const SortablePlayList: FC;
+import { GridItemLayoutProps } from '../../../../../Grid';
+export interface SortablePlayListProps extends GridItemLayoutProps {
+    initialExpanded?: boolean;
+}
+export declare const SortablePlayList: FC<SortablePlayListProps>;

package/dist/types/components/AudioPlayer/Interface/Controller/Input/Progress/index.d.ts

@@ -1,2 +1,13 @@
+import { GridItemLayoutProps } from '../../../../../Grid';
 import { FC } from 'react';
-export declare const Progress: FC;
+export type ProgressType = "bar" | "waveform";
+export interface ProgressProps extends GridItemLayoutProps {
+    /**
+     * Override which progress renderer to show. When omitted, falls back to
+     * `activeUI.progress`. Used when the preset is disabled but the compound
+     * `<AudioPlayer.Progress />` is still placed explicitly — without this,
+     * the component would render an empty grid slot.
+     */
+    type?: ProgressType;
+}
+export declare const Progress: FC<ProgressProps>;

package/dist/types/components/AudioPlayer/Interface/Controller/SpeedSelector/SpeedSelector.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { GridItemLayoutProps } from '../../../../Grid';
+import { SpeedSelectorPlacement } from '../../../Context/StateContext';
+export interface SpeedSelectorProps extends GridItemLayoutProps {
+    options?: number[];
+    formatRate?: (rate: number) => string;
+    triggerType?: "click" | "hover";
+    placement?: SpeedSelectorPlacement;
+}
+export declare const SpeedSelector: FC<SpeedSelectorProps>;

package/dist/types/components/AudioPlayer/Interface/Controller/SpeedSelector/index.d.ts

@@ -0,0 +1,2 @@
+export { SpeedSelector } from './SpeedSelector';
+export type { SpeedSelectorProps } from './SpeedSelector';

package/dist/types/components/AudioPlayer/Interface/Controller/Tooltip/Volume/index.d.ts

@@ -1,2 +1,8 @@
 import { FC } from 'react';
-export declare const Volume: FC;
+import { GridItemLayoutProps } from '../../../../../Grid';
+import { VolumeSliderPlacement } from '../../../../Context/StateContext';
+export interface VolumeProps extends GridItemLayoutProps {
+    triggerType?: "click" | "hover";
+    placement?: VolumeSliderPlacement;
+}
+export declare const Volume: FC<VolumeProps>;

package/dist/types/components/AudioPlayer/Interface/Information/Artwork.d.ts

@@ -1,2 +1,4 @@
 import { FC } from 'react';
-export declare const Artwork: FC;
+import { GridItemLayoutProps } from '../../../Grid';
+export type ArtworkProps = GridItemLayoutProps;
+export declare const Artwork: FC<ArtworkProps>;

package/dist/types/components/AudioPlayer/Interface/Information/TrackInfo.d.ts

@@ -1,2 +1,4 @@
 import { FC } from 'react';
-export declare const TrackInfo: FC;
+import { GridItemLayoutProps } from '../../../Grid';
+export type TrackInfoProps = GridItemLayoutProps;
+export declare const TrackInfo: FC<TrackInfoProps>;

package/dist/types/components/AudioPlayer/Interface/Information/TrackTime/index.d.ts

@@ -1,2 +1,4 @@
+import { GridItemLayoutProps } from '../../../../Grid';
 import { FC } from 'react';
-export declare const TrackTime: FC;
+export type TrackTimeProps = Pick<GridItemLayoutProps, "visible">;
+export declare const TrackTime: FC<TrackTimeProps>;

package/dist/types/components/AudioPlayer/Interface/PlayListEmpty/index.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+export declare const PLAYLIST_EMPTY_SLOT = "PlayListEmpty";
+export interface PlayListEmptyProps {
+    children?: ReactNode;
+}
+export declare const PlayListEmpty: FC<PlayListEmptyProps>;

package/dist/types/components/AudioPlayer/Interface/compound/index.d.ts

@@ -0,0 +1,3 @@
+export * from './slotMetaMap';
+export * from './useCompoundSlots';
+export * from './useDuplicateSlotWarning';

package/dist/types/components/AudioPlayer/Interface/compound/slotMetaMap.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ActiveUI } from '../../Context/StateContext';
+export type ActiveUIKey = keyof ActiveUI;
+export interface SlotMeta {
+    displayName: string;
+    activeUIKey: ActiveUIKey;
+}
+export declare const compoundSlotMetaMap: Record<string, SlotMeta>;
+export declare function isPresetActive(activeUI: ActiveUI, key: ActiveUIKey): boolean;
+export declare function resolveSlotKey(child: ReactElement): string | undefined;

package/dist/types/components/AudioPlayer/Interface/compound/useCompoundSlots.d.ts

@@ -0,0 +1,6 @@
+import { default as React, ReactElement, ReactNode } from 'react';
+export interface CompoundSlots {
+    compoundChildren: ReactElement[];
+    playListEmptyNode: ReactNode;
+}
+export declare function useCompoundSlots(children: React.ReactNode): CompoundSlots;

package/dist/types/components/AudioPlayer/Interface/compound/useDuplicateSlotWarning.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { ActiveUI } from '../../Context/StateContext';
+export interface DuplicateSlotWarningArgs {
+    compoundChildren: ReactElement[];
+    activeUI: ActiveUI;
+}
+export declare function useDuplicateSlotWarning({ compoundChildren, activeUI, }: DuplicateSlotWarningArgs): void;

package/dist/types/components/AudioPlayer/Interface/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './playListPortalContext';
+export * from './playListEmptyContext';

package/dist/types/components/AudioPlayer/Interface/contexts/playListEmptyContext.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const playListEmptyContext: import('react').Context<ReactNode>;

package/dist/types/components/AudioPlayer/Interface/contexts/playListPortalContext.d.ts

@@ -0,0 +1 @@
+export declare const playListPortalContext: import('react').Context<HTMLDivElement | null>;

package/dist/types/components/AudioPlayer/Interface/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useResolvedGridArea';
+export * from './useGridTemplate';
+export * from './useDropdownAutoPlacement';
+export * from './useResolvedDropdownProps';

package/dist/types/components/AudioPlayer/Interface/hooks/useDropdownAutoPlacement.d.ts

@@ -0,0 +1,5 @@
+import { DropdownContentPlacement } from '../../../Dropdown';
+export declare const useDropdownAutoPlacement: ({ triggerRef, initialState, }: {
+    triggerRef: React.RefObject<HTMLElement>;
+    initialState: DropdownContentPlacement;
+}) => DropdownContentPlacement;

package/dist/types/components/AudioPlayer/Interface/hooks/useGridTemplate.d.ts

@@ -0,0 +1,3 @@
+import { ActiveUI, InterfacePlacement } from '../../Context';
+import { ReactElement } from 'react';
+export declare const useGridTemplate: (activeUI: ActiveUI, templateArea: InterfacePlacement["templateArea"] | undefined, customComponentsArea?: InterfacePlacement["customComponentsArea"], compoundChildren?: ReactElement[]) => readonly [string[], string[]];

package/dist/types/components/AudioPlayer/Interface/hooks/useResolvedDropdownProps.d.ts

@@ -0,0 +1,18 @@
+import { DropdownContentPlacement } from '../../../Dropdown';
+type TriggerType = "click" | "hover";
+interface UseResolvedDropdownPropsParams {
+    triggerType: TriggerType | undefined;
+    placement: DropdownContentPlacement | undefined;
+    contextPlacement: DropdownContentPlacement | undefined;
+    triggerRef: React.RefObject<HTMLElement>;
+    defaults: {
+        triggerType: TriggerType;
+        placement: DropdownContentPlacement;
+    };
+}
+export declare const useResolvedDropdownProps: ({ triggerType, placement, contextPlacement, triggerRef, defaults, }: UseResolvedDropdownPropsParams) => {
+    triggerType: TriggerType;
+    placement: DropdownContentPlacement;
+    contentRole: "dialog" | "tooltip";
+};
+export {};

package/dist/types/components/AudioPlayer/Interface/hooks/useResolvedGridArea.d.ts

@@ -0,0 +1,2 @@
+import { InterfacePlacementKey } from '../../Context/StateContext';
+export declare function useResolvedGridArea(slotKey: InterfacePlacementKey, override?: string): string;

package/dist/types/components/AudioPlayer/Player/index.d.ts

@@ -1,4 +1,4 @@
-import { AudioPlayerStateProviderProps, defaultInterfacePlacementMaxLength } from '../Context';
+import { AudioPlayerStateProviderProps, DEFAULT_INTERFACE_GRID_BOUND } from '../Context';
 export interface AudioPlayerProps<TInterfacePlacementLength extends number> extends AudioPlayerStateProviderProps<TInterfacePlacementLength> {
     children?: React.ReactNode;
     audioRef?: React.MutableRefObject<HTMLAudioElement>;
@@ -9,4 +9,4 @@ export interface AudioPlayerProps<TInterfacePlacementLength extends number> exte
      */
     colorScheme?: "light" | "dark";
 }
-export declare const AudioPlayer: <TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength>({ audioRef, children, ...restProps }: AudioPlayerProps<TInterfacePlacementLength>) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioPlayer: <TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND>({ audioRef, children, ...restProps }: AudioPlayerProps<TInterfacePlacementLength>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/AudioPlayer/Provider/AudioPlayerStateProvider.d.ts

@@ -1,7 +1,7 @@
-import { defaultInterfacePlacementMaxLength, AudioPlayerStateProviderProps } from '../Context';
+import { DEFAULT_INTERFACE_GRID_BOUND, AudioPlayerStateProviderProps } from '../Context';
 import { PropsWithChildren } from 'react';
 interface AudioPlayerStateProviderOwnProps<T extends number = number> extends AudioPlayerStateProviderProps<T> {
     colorScheme?: "light" | "dark";
 }
-export declare const AudioPlayerStateProvider: <TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength>({ children, colorScheme, ...initProps }: PropsWithChildren<AudioPlayerStateProviderOwnProps<TInterfacePlacementLength>>) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioPlayerStateProvider: <TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND>({ children, colorScheme, ...initProps }: PropsWithChildren<AudioPlayerStateProviderOwnProps<TInterfacePlacementLength>>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/AudioPlayer/index.d.ts

@@ -1,10 +1,33 @@
 import { AudioPlayerContainerProps } from './Container';
-import { defaultInterfacePlacementMaxLength } from './Context';
+import { DEFAULT_INTERFACE_GRID_BOUND } from './Context';
+import { CustomComponent } from './Interface/CustomComponent';
+import { PlayListEmpty } from './Interface/PlayListEmpty';
 import { AudioPlayerProps } from './Player';
-export type RMAudioPlayerProps<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength> = AudioPlayerProps<TInterfacePlacementLength> & AudioPlayerContainerProps;
-declare function AudioPlayerWithProviders<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength>({ rootContainerProps, ...audioPlayProps }: RMAudioPlayerProps<TInterfacePlacementLength>): import("react/jsx-runtime").JSX.Element;
+import { Progress } from './Interface/Controller/Input';
+import { Volume } from './Interface/Controller/Tooltip';
+import { SortablePlayList } from './Interface/Controller/Drawer';
+import { SpeedSelector } from './Interface/Controller/SpeedSelector';
+import { TransportControls, RepeatTypeBtn } from './Interface/Controller/Button';
+import { Artwork } from './Interface/Information/Artwork';
+import { TrackInfo } from './Interface/Information/TrackInfo';
+import { TrackTime } from './Interface/Information/TrackTime';
+export type RMAudioPlayerProps<TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND> = AudioPlayerProps<TInterfacePlacementLength> & AudioPlayerContainerProps;
+declare function AudioPlayerWithProviders<TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND>({ rootContainerProps, ...audioPlayProps }: RMAudioPlayerProps<TInterfacePlacementLength>): import("react/jsx-runtime").JSX.Element;
 declare namespace AudioPlayerWithProviders {
     var displayName: string;
-    var CustomComponent: import("react").FC<import("./Interface/CustomComponent").CustomComponentProps>;
 }
-export default AudioPlayerWithProviders;
+type AudioPlayerComponent = typeof AudioPlayerWithProviders & {
+    Progress: typeof Progress;
+    Volume: typeof Volume;
+    PlayList: typeof SortablePlayList;
+    PlayListEmpty: typeof PlayListEmpty;
+    PlayButton: typeof TransportControls;
+    RepeatButton: typeof RepeatTypeBtn;
+    SpeedSelector: typeof SpeedSelector;
+    Artwork: typeof Artwork;
+    TrackInfo: typeof TrackInfo;
+    TrackTime: typeof TrackTime;
+    CustomComponent: typeof CustomComponent;
+};
+declare const AudioPlayerCompound: AudioPlayerComponent;
+export default AudioPlayerCompound;

package/dist/types/components/Drawer/Drawer.d.ts

@@ -5,6 +5,7 @@ import { DrawerContent } from './DrawerContent';
 export interface DrawerProps extends Omit<Partial<DrawerContext>, "setIsOpen"> {
     outboundClickActive?: boolean;
     placement?: "bottom" | "top";
+    initialOpen?: boolean;
 }
 declare const Drawer: FC<PropsWithChildren<DrawerProps>>;
 type DrawerComponent = typeof Drawer & {

package/dist/types/components/Grid/Item.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, HTMLAttributes } from 'react';
-export interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
+export interface GridItemLayoutProps {
     gridArea?: string;
     width?: CSSProperties["width"];
     visible?: boolean;
@@ -7,4 +7,5 @@ export interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
     justifySelf?: CSSProperties["justifySelf"];
     padding?: CSSProperties["padding"];
 }
-export declare const GridItem: import('react').ForwardRefExoticComponent<GridItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export type GridItemProps = GridItemLayoutProps & HTMLAttributes<HTMLDivElement>;
+export declare const GridItem: import('react').ForwardRefExoticComponent<GridItemLayoutProps & HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Grid/index.d.ts

@@ -6,4 +6,5 @@ type GridComponent = typeof BaseGrid & {
 declare const Grid: GridComponent;
 export type { NativeGridProps };
 export type { NativeGridProps as GridProps };
+export type { GridItemProps, GridItemLayoutProps } from './Item';
 export default Grid;

package/dist/types/hooks/index.d.ts

@@ -1,5 +1,4 @@
-export * from './context/useNonNullableContext';
+export * from './useNonNullableContext';
 export * from './useVariableColor';
 export * from './useClickOutside';
 export * from './useRefsDispatch';
-export * from './context';

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
-import { default as AudioPlayerWithProviders } from './components/AudioPlayer';
-export default AudioPlayerWithProviders;
+import { default as AudioPlayer } from './components/AudioPlayer';
+export default AudioPlayer;
 export * from './components/AudioPlayer';
 export * from './components/AudioPlayer/Context';
 export * from './components/AudioPlayer/Player';

package/dist/types/utils/ssr.d.ts

@@ -1,5 +1,3 @@
 import { useLayoutEffect } from 'react';
-/** true when running in a browser environment */
 export declare const isBrowser: boolean;
-/** useLayoutEffect that falls back to useEffect during SSR */
 export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/llms.txt

@@ -0,0 +1,61 @@
+# React Modern Audio Player
+
+> Modern, customizable React audio player with waveform visualization, drag-and-drop playlist, WAI-ARIA accessibility, TypeScript-first API, and Next.js App Router (Server Components) support. Published on npm as `react-modern-audio-player`.
+
+This library exports a single default `<AudioPlayer>` component driven by declarative props, plus a compound `<AudioPlayer.CustomComponent>` and a family of `useAudioPlayer*` hooks for programmatic control. Runtime requirements: React 18 or higher, `react-dom` 18 or higher. `wavesurfer.js` 6.x is an internal dependency (no peer install needed). The library entry point ships a `'use client'` directive so it can be imported directly from Next.js Server Components; hook consumers and compound children must themselves be Client Components.
+
+## Installation
+
+```
+npm install react-modern-audio-player
+```
+
+## Quick start
+
+```tsx
+import AudioPlayer from "react-modern-audio-player";
+
+const playList = [
+  { id: 1, src: "audio.mp3", name: "Track 1", writer: "Artist", img: "cover.jpg" },
+];
+
+export default function Page() {
+  return <AudioPlayer playList={playList} />;
+}
+```
+
+## Core API
+
+- `AudioPlayer` (default export) — accepts `playList`, `audioInitialState`, `activeUI`, `placement`, `colorScheme`, `customIcons`, `coverImgsCss`, `rootContainerProps`, `audioRef`.
+- `AudioPlayer.CustomComponent` — compound child that slots custom nodes into a named grid area (`placement.interface.customComponentsArea`). Requires `'use client'` in the consumer file.
+- `useAudioPlayer()` — control hook. Returns `{ isPlaying, volume, currentTime, duration, repeatType, muted, currentTrack, currentIndex, playList, play, pause, togglePlay, next, prev, seek, setVolume, toggleMute, setTrack }`.
+- Sub-hooks for minimal re-renders: `useAudioPlayerPlayback`, `useAudioPlayerTrack`, `useAudioPlayerVolume`, `useAudioPlayerTime`, `useAudioPlayerElement`.
+- Low-level context hooks (advanced): `usePlaybackContext`, `useTrackContext`, `useUIContext`, `useResourceContext`.
+
+## Key types
+
+```ts
+type AudioData = {
+  src: string;
+  id: number;
+  name?: string;
+  writer?: string;
+  img?: string;
+  description?: string | ReactNode;
+  customTrackInfo?: string | ReactNode;
+};
+type PlayList = AudioData[];
+type RepeatType = "ALL" | "ONE" | "NONE" | "SHUFFLE";
+type ProgressUI = "waveform" | "bar" | false;
+```
+
+## Docs
+
+- [README.md](https://unpkg.com/react-modern-audio-player/README.md): full reference — props tables, theme CSS variables, grid placement syntax, keyboard shortcuts, common integration pitfalls ("Gotchas"), and end-to-end examples.
+- [CHANGELOG.md](https://raw.githubusercontent.com/slash9494/react-modern-audio-player/main/package/CHANGELOG.md): version history, breaking changes, migration notes (served from GitHub — not shipped in the npm tarball).
+
+## Optional
+
+- [GitHub repository](https://github.com/slash9494/react-modern-audio-player)
+- [CodeSandbox demo](https://codesandbox.io/p/sandbox/basic-nfrpfq)
+- [npm page](https://www.npmjs.com/package/react-modern-audio-player)

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-modern-audio-player",
-  "version": "2.1.0",
+  "version": "2.3.0",
+  "description": "Modern, customizable React audio player with waveform visualization, drag-and-drop playlist, WAI-ARIA accessibility, TypeScript-first API, and Next.js App Router (Server Components) support.",
   "author": {
     "name": "MAXX",
     "email": "slash9494@gmail.com",
@@ -12,7 +13,8 @@
   "esnext": "dist/index.es.js",
   "typings": "dist/types/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "llms.txt"
   ],
   "license": "MIT",
   "repository": {

package/dist/types/components/AudioPlayer/Interface/Controller/Tooltip/Volume/useVolume.d.ts

@@ -1,5 +0,0 @@
-import { VolumeSliderPlacement } from '../../../../Context';
-export declare const useVolumeSliderPlacement: ({ triggerRef, initialState, }: {
-    triggerRef: React.RefObject<HTMLElement>;
-    initialState: VolumeSliderPlacement;
-}) => import('../../../../../Dropdown').DropdownContentPlacement;

package/dist/types/hooks/context/useAudioAttrsContext.d.ts

@@ -1,2 +0,0 @@
-import { AudioAttrsContext } from '../../components/AudioPlayer/Context/AudioAttrsContext';
-export declare const useAudioAttrsContext: () => AudioAttrsContext;