@accelint/design-toolkit 9.4.0 → 9.5.0

package/dist/components/media-controls/index.js

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { MediaControlsProvider, useMediaProviderGuard } from "./context.js";
+import "client-only";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.css";
+
+//#region src/components/media-controls/index.tsx
+/**
+* A container for media playback controls.
+*
+* Composes media control sub-components into a cohesive control bar.
+* Must be used within a MediaProvider context from media-chrome.
+*
+* @param props - The component props.
+* @param props.className - CSS class name for the container.
+* @param props.classNames - Class names for sub-elements.
+* @param props.children - Media control components to render.
+* @param props.isDisabled - Disables all child controls via context.
+* @returns The rendered media controls container.
+*
+* @example
+* ```tsx
+* <MediaProvider>
+*   <MediaControls>
+*     <PlayButton />
+*     <TimeDisplay mode="current" />
+*     <TimeRange />
+*     <MuteButton />
+*     <VolumeSlider />
+*   </MediaControls>
+* </MediaProvider>
+* ```
+*
+* @example
+* ```tsx
+* // Audio player with seek controls
+* <MediaProvider>
+*   <MediaControls>
+*     <SeekButton direction="backward" seekOffset={15} />
+*     <PlayButton />
+*     <SeekButton direction="forward" seekOffset={15} />
+*     <TimeDisplay mode="current" />
+*     <PlaybackRateButton rates={[0.5, 1, 1.5, 2]} />
+*   </MediaControls>
+* </MediaProvider>
+* ```
+*/
+function MediaControls({ className, classNames, children, isDisabled = false, ...rest }) {
+	useMediaProviderGuard();
+	return /* @__PURE__ */ jsx(MediaControlsProvider, {
+		isDisabled,
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: clsx("group/media-controls", styles.mediaControls, className, classNames?.container),
+			"data-disabled": isDisabled || void 0,
+			children
+		})
+	});
+}
+
+//#endregion
+export { MediaControls };
+//# sourceMappingURL=index.js.map

package/dist/components/media-controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/media-controls/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { MediaControlsProvider, useMediaProviderGuard } from './context';\nimport styles from './styles.module.css';\nimport type { MediaControlsProps } from './types';\n\n/**\n * A container for media playback controls.\n *\n * Composes media control sub-components into a cohesive control bar.\n * Must be used within a MediaProvider context from media-chrome.\n *\n * @param props - The component props.\n * @param props.className - CSS class name for the container.\n * @param props.classNames - Class names for sub-elements.\n * @param props.children - Media control components to render.\n * @param props.isDisabled - Disables all child controls via context.\n * @returns The rendered media controls container.\n *\n * @example\n * ```tsx\n * <MediaProvider>\n *   <MediaControls>\n *     <PlayButton />\n *     <TimeDisplay mode=\"current\" />\n *     <TimeRange />\n *     <MuteButton />\n *     <VolumeSlider />\n *   </MediaControls>\n * </MediaProvider>\n * ```\n *\n * @example\n * ```tsx\n * // Audio player with seek controls\n * <MediaProvider>\n *   <MediaControls>\n *     <SeekButton direction=\"backward\" seekOffset={15} />\n *     <PlayButton />\n *     <SeekButton direction=\"forward\" seekOffset={15} />\n *     <TimeDisplay mode=\"current\" />\n *     <PlaybackRateButton rates={[0.5, 1, 1.5, 2]} />\n *   </MediaControls>\n * </MediaProvider>\n * ```\n */\nexport function MediaControls({\n  className,\n  classNames,\n  children,\n  isDisabled = false,\n  ...rest\n}: MediaControlsProps) {\n  useMediaProviderGuard();\n\n  return (\n    <MediaControlsProvider isDisabled={isDisabled}>\n      <div\n        {...rest}\n        className={clsx(\n          'group/media-controls',\n          styles.mediaControls,\n          className,\n          classNames?.container,\n        )}\n        data-disabled={isDisabled || undefined}\n      >\n        {children}\n      </div>\n    </MediaControlsProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,SAAgB,cAAc,EAC5B,WACA,YACA,UACA,aAAa,OACb,GAAG,QACkB;AACrB,wBAAuB;AAEvB,QACE,oBAAC;EAAkC;YACjC,oBAAC;GACC,GAAI;GACJ,WAAW,KACT,wBACA,OAAO,eACP,WACA,YAAY,UACb;GACD,iBAAe,cAAc;GAE5B;IACG;GACgB"}

package/dist/components/media-controls/mute-button.d.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { MuteButtonProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime63 from "react/jsx-runtime";
+
+//#region src/components/media-controls/mute-button.d.ts
+
+/**
+ * A media control button for mute/unmute functionality.
+ *
+ * Integrates with media-chrome's media store to control media volume muting.
+ * Automatically shows the appropriate icon based on the current mute state.
+ *
+ * @param props - The button props.
+ * @param props.className - CSS class name for the button.
+ * @param props.isDisabled - Whether the button is disabled.
+ * @param props.ref - Ref to the button element.
+ * @returns The rendered mute/unmute button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within MediaProvider
+ * <MediaProvider>
+ *   <MuteButton />
+ * </MediaProvider>
+ * ```
+ */
+declare function MuteButton({
+  className,
+  isDisabled: isDisabledProp,
+  ref,
+  ...rest
+}: MuteButtonProps): react_jsx_runtime63.JSX.Element;
+//#endregion
+export { MuteButton };
+//# sourceMappingURL=mute-button.d.ts.map

package/dist/components/media-controls/mute-button.js

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { Icon } from "../icon/index.js";
+import { Button } from "../button/index.js";
+import { useMediaControlsDisabled } from "./context.js";
+import "client-only";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MediaActionTypes, VolumeLevels, useMediaDispatch, useMediaSelector } from "media-chrome/react/media-store";
+import { SoundAudible, SoundMute } from "@accelint/icons";
+
+//#region src/components/media-controls/mute-button.tsx
+/**
+* A media control button for mute/unmute functionality.
+*
+* Integrates with media-chrome's media store to control media volume muting.
+* Automatically shows the appropriate icon based on the current mute state.
+*
+* @param props - The button props.
+* @param props.className - CSS class name for the button.
+* @param props.isDisabled - Whether the button is disabled.
+* @param props.ref - Ref to the button element.
+* @returns The rendered mute/unmute button.
+*
+* @example
+* ```tsx
+* // Basic usage within MediaProvider
+* <MediaProvider>
+*   <MuteButton />
+* </MediaProvider>
+* ```
+*/
+function MuteButton({ className, isDisabled: isDisabledProp, ref, ...rest }) {
+	const dispatch = useMediaDispatch();
+	const mediaMuted = useMediaSelector((state) => state.mediaMuted);
+	const mediaVolumeLevel = useMediaSelector((state) => state.mediaVolumeLevel);
+	const isDisabled = useMediaControlsDisabled(isDisabledProp);
+	const isEffectivelyMuted = mediaVolumeLevel === VolumeLevels.OFF;
+	const handleClick = useCallback(() => {
+		dispatch({ type: mediaMuted ? MediaActionTypes.MEDIA_UNMUTE_REQUEST : MediaActionTypes.MEDIA_MUTE_REQUEST });
+	}, [dispatch, mediaMuted]);
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		ref,
+		className,
+		variant: "icon",
+		size: "medium",
+		isDisabled,
+		onPress: handleClick,
+		"aria-label": isEffectivelyMuted ? "Unmute" : "Mute",
+		children: /* @__PURE__ */ jsx(Icon, {
+			size: "medium",
+			children: isEffectivelyMuted ? /* @__PURE__ */ jsx(SoundMute, {}) : /* @__PURE__ */ jsx(SoundAudible, {})
+		})
+	});
+}
+
+//#endregion
+export { MuteButton };
+//# sourceMappingURL=mute-button.js.map

package/dist/components/media-controls/mute-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mute-button.js","names":[],"sources":["../../../src/components/media-controls/mute-button.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { SoundAudible, SoundMute } from '@accelint/icons';\nimport {\n  MediaActionTypes,\n  useMediaDispatch,\n  useMediaSelector,\n  VolumeLevels,\n} from 'media-chrome/react/media-store';\nimport { useCallback } from 'react';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { useMediaControlsDisabled } from './context';\nimport type { MuteButtonProps } from './types';\n\n/**\n * A media control button for mute/unmute functionality.\n *\n * Integrates with media-chrome's media store to control media volume muting.\n * Automatically shows the appropriate icon based on the current mute state.\n *\n * @param props - The button props.\n * @param props.className - CSS class name for the button.\n * @param props.isDisabled - Whether the button is disabled.\n * @param props.ref - Ref to the button element.\n * @returns The rendered mute/unmute button.\n *\n * @example\n * ```tsx\n * // Basic usage within MediaProvider\n * <MediaProvider>\n *   <MuteButton />\n * </MediaProvider>\n * ```\n */\nexport function MuteButton({\n  className,\n  isDisabled: isDisabledProp,\n  ref,\n  ...rest\n}: MuteButtonProps) {\n  const dispatch = useMediaDispatch();\n  const mediaMuted = useMediaSelector((state) => state.mediaMuted);\n  const mediaVolumeLevel = useMediaSelector((state) => state.mediaVolumeLevel);\n  const isDisabled = useMediaControlsDisabled(isDisabledProp);\n\n  // Effective muted state: true when volume is off (either muted or volume=0)\n  const isEffectivelyMuted = mediaVolumeLevel === VolumeLevels.OFF;\n\n  const handleClick = useCallback(() => {\n    const type = mediaMuted\n      ? MediaActionTypes.MEDIA_UNMUTE_REQUEST\n      : MediaActionTypes.MEDIA_MUTE_REQUEST;\n    dispatch({ type });\n  }, [dispatch, mediaMuted]);\n\n  return (\n    <Button\n      {...rest}\n      ref={ref}\n      className={className}\n      variant='icon'\n      size='medium'\n      isDisabled={isDisabled}\n      onPress={handleClick}\n      aria-label={isEffectivelyMuted ? 'Unmute' : 'Mute'}\n    >\n      <Icon size='medium'>\n        {isEffectivelyMuted ? <SoundMute /> : <SoundAudible />}\n      </Icon>\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,WAAW,EACzB,WACA,YAAY,gBACZ,KACA,GAAG,QACe;CAClB,MAAM,WAAW,kBAAkB;CACnC,MAAM,aAAa,kBAAkB,UAAU,MAAM,WAAW;CAChE,MAAM,mBAAmB,kBAAkB,UAAU,MAAM,iBAAiB;CAC5E,MAAM,aAAa,yBAAyB,eAAe;CAG3D,MAAM,qBAAqB,qBAAqB,aAAa;CAE7D,MAAM,cAAc,kBAAkB;AAIpC,WAAS,EAAE,MAHE,aACT,iBAAiB,uBACjB,iBAAiB,oBACJ,CAAC;IACjB,CAAC,UAAU,WAAW,CAAC;AAE1B,QACE,oBAAC;EACC,GAAI;EACC;EACM;EACX,SAAQ;EACR,MAAK;EACO;EACZ,SAAS;EACT,cAAY,qBAAqB,WAAW;YAE5C,oBAAC;GAAK,MAAK;aACR,qBAAqB,oBAAC,cAAY,GAAG,oBAAC,iBAAe;IACjD;GACA"}

package/dist/components/media-controls/play-button.d.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { PlayButtonProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime66 from "react/jsx-runtime";
+
+//#region src/components/media-controls/play-button.d.ts
+
+/**
+ * A media control button for play/pause functionality.
+ *
+ * Integrates with media-chrome's media store to control media playback.
+ * Automatically shows the appropriate icon based on the current playback state.
+ *
+ * @param props - The button props.
+ * @param props.className - CSS class name for the button.
+ * @param props.isDisabled - Whether the button is disabled.
+ * @param props.ref - Ref to the button element.
+ * @returns The rendered play/pause button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within MediaProvider
+ * <MediaProvider>
+ *   <PlayButton />
+ * </MediaProvider>
+ * ```
+ */
+declare function PlayButton({
+  className,
+  isDisabled: isDisabledProp,
+  ref,
+  ...rest
+}: PlayButtonProps): react_jsx_runtime66.JSX.Element;
+//#endregion
+export { PlayButton };
+//# sourceMappingURL=play-button.d.ts.map

package/dist/components/media-controls/play-button.js

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { Icon } from "../icon/index.js";
+import { Button } from "../button/index.js";
+import { useMediaControlsDisabled } from "./context.js";
+import "client-only";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MediaActionTypes, useMediaDispatch, useMediaSelector } from "media-chrome/react/media-store";
+import { Pause, Play } from "@accelint/icons";
+
+//#region src/components/media-controls/play-button.tsx
+/**
+* A media control button for play/pause functionality.
+*
+* Integrates with media-chrome's media store to control media playback.
+* Automatically shows the appropriate icon based on the current playback state.
+*
+* @param props - The button props.
+* @param props.className - CSS class name for the button.
+* @param props.isDisabled - Whether the button is disabled.
+* @param props.ref - Ref to the button element.
+* @returns The rendered play/pause button.
+*
+* @example
+* ```tsx
+* // Basic usage within MediaProvider
+* <MediaProvider>
+*   <PlayButton />
+* </MediaProvider>
+* ```
+*/
+function PlayButton({ className, isDisabled: isDisabledProp, ref, ...rest }) {
+	const dispatch = useMediaDispatch();
+	const mediaPaused = useMediaSelector((state) => state.mediaPaused);
+	const isDisabled = useMediaControlsDisabled(isDisabledProp);
+	const handleClick = useCallback(() => {
+		dispatch({ type: mediaPaused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST });
+	}, [dispatch, mediaPaused]);
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		ref,
+		className,
+		variant: "icon",
+		size: "medium",
+		isDisabled,
+		onPress: handleClick,
+		"aria-label": mediaPaused ? "Play" : "Pause",
+		children: /* @__PURE__ */ jsx(Icon, {
+			size: "medium",
+			children: mediaPaused ? /* @__PURE__ */ jsx(Play, {}) : /* @__PURE__ */ jsx(Pause, {})
+		})
+	});
+}
+
+//#endregion
+export { PlayButton };
+//# sourceMappingURL=play-button.js.map

package/dist/components/media-controls/play-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-button.js","names":[],"sources":["../../../src/components/media-controls/play-button.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { Pause, Play } from '@accelint/icons';\nimport {\n  MediaActionTypes,\n  useMediaDispatch,\n  useMediaSelector,\n} from 'media-chrome/react/media-store';\nimport { useCallback } from 'react';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { useMediaControlsDisabled } from './context';\nimport type { PlayButtonProps } from './types';\n\n/**\n * A media control button for play/pause functionality.\n *\n * Integrates with media-chrome's media store to control media playback.\n * Automatically shows the appropriate icon based on the current playback state.\n *\n * @param props - The button props.\n * @param props.className - CSS class name for the button.\n * @param props.isDisabled - Whether the button is disabled.\n * @param props.ref - Ref to the button element.\n * @returns The rendered play/pause button.\n *\n * @example\n * ```tsx\n * // Basic usage within MediaProvider\n * <MediaProvider>\n *   <PlayButton />\n * </MediaProvider>\n * ```\n */\nexport function PlayButton({\n  className,\n  isDisabled: isDisabledProp,\n  ref,\n  ...rest\n}: PlayButtonProps) {\n  const dispatch = useMediaDispatch();\n  const mediaPaused = useMediaSelector((state) => state.mediaPaused);\n  const isDisabled = useMediaControlsDisabled(isDisabledProp);\n\n  const handleClick = useCallback(() => {\n    const type = mediaPaused\n      ? MediaActionTypes.MEDIA_PLAY_REQUEST\n      : MediaActionTypes.MEDIA_PAUSE_REQUEST;\n    dispatch({ type });\n  }, [dispatch, mediaPaused]);\n\n  return (\n    <Button\n      {...rest}\n      ref={ref}\n      className={className}\n      variant='icon'\n      size='medium'\n      isDisabled={isDisabled}\n      onPress={handleClick}\n      aria-label={mediaPaused ? 'Play' : 'Pause'}\n    >\n      <Icon size='medium'>{mediaPaused ? <Play /> : <Pause />}</Icon>\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,WAAW,EACzB,WACA,YAAY,gBACZ,KACA,GAAG,QACe;CAClB,MAAM,WAAW,kBAAkB;CACnC,MAAM,cAAc,kBAAkB,UAAU,MAAM,YAAY;CAClE,MAAM,aAAa,yBAAyB,eAAe;CAE3D,MAAM,cAAc,kBAAkB;AAIpC,WAAS,EAAE,MAHE,cACT,iBAAiB,qBACjB,iBAAiB,qBACJ,CAAC;IACjB,CAAC,UAAU,YAAY,CAAC;AAE3B,QACE,oBAAC;EACC,GAAI;EACC;EACM;EACX,SAAQ;EACR,MAAK;EACO;EACZ,SAAS;EACT,cAAY,cAAc,SAAS;YAEnC,oBAAC;GAAK,MAAK;aAAU,cAAc,oBAAC,SAAO,GAAG,oBAAC,UAAQ;IAAQ;GACxD"}

package/dist/components/media-controls/playback-rate.d.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { PlaybackRateButtonProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime67 from "react/jsx-runtime";
+
+//#region src/components/media-controls/playback-rate.d.ts
+
+/**
+ * A media control button for changing playback speed.
+ *
+ * Integrates with media-chrome's media store to control playback rate.
+ * Cycles through available playback rates on each click.
+ * Shows the current playback rate as text (e.g., '1x', '2x').
+ * Invalid rates (negative, zero, NaN, Infinity) are automatically filtered out.
+ * If all provided rates are invalid, falls back to default rates [1, 2, 3].
+ *
+ * @param props - The button props.
+ * @param props.className - CSS class name for the button.
+ * @param props.rates - Array of playback rates to cycle through (default: [1, 2, 3]). Only positive finite numbers are accepted.
+ * @param props.isDisabled - Whether the button is disabled.
+ * @param props.ref - Ref to the button element.
+ * @returns The rendered playback rate button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within MediaProvider
+ * <MediaProvider>
+ *   <PlaybackRateButton />
+ * </MediaProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom rates
+ * <PlaybackRateButton rates={[0.5, 1, 1.5, 2]} />
+ * ```
+ */
+declare function PlaybackRateButton({
+  className,
+  rates,
+  isDisabled: isDisabledProp,
+  ref,
+  ...rest
+}: PlaybackRateButtonProps): react_jsx_runtime67.JSX.Element;
+//#endregion
+export { PlaybackRateButton };
+//# sourceMappingURL=playback-rate.d.ts.map

package/dist/components/media-controls/playback-rate.js

@@ -0,0 +1,114 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { Button } from "../button/index.js";
+import { useMediaControlsDisabled } from "./context.js";
+import "client-only";
+import { useCallback } from "react";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getLogger } from "@accelint/logger/default";
+import { MediaActionTypes, useMediaDispatch, useMediaSelector } from "media-chrome/react/media-store";
+import styles from "./styles.module.css";
+
+//#region src/components/media-controls/playback-rate.tsx
+const logger = getLogger({
+	enabled: process.env.NODE_ENV === "development",
+	level: "warn",
+	prefix: "[PlaybackRateButton]",
+	pretty: true
+});
+/** Default playback rate options: normal, 2x, and 3x speed. */
+const DEFAULT_RATES = [
+	1,
+	2,
+	3
+];
+/**
+* Filters to only positive finite numbers.
+*
+* @param rates - Array of rate values to filter.
+* @returns Array containing only positive finite rates.
+*/
+const filterValidRates = (rates) => rates.filter((r) => Number.isFinite(r) && r > 0);
+/**
+* A media control button for changing playback speed.
+*
+* Integrates with media-chrome's media store to control playback rate.
+* Cycles through available playback rates on each click.
+* Shows the current playback rate as text (e.g., '1x', '2x').
+* Invalid rates (negative, zero, NaN, Infinity) are automatically filtered out.
+* If all provided rates are invalid, falls back to default rates [1, 2, 3].
+*
+* @param props - The button props.
+* @param props.className - CSS class name for the button.
+* @param props.rates - Array of playback rates to cycle through (default: [1, 2, 3]). Only positive finite numbers are accepted.
+* @param props.isDisabled - Whether the button is disabled.
+* @param props.ref - Ref to the button element.
+* @returns The rendered playback rate button.
+*
+* @example
+* ```tsx
+* // Basic usage within MediaProvider
+* <MediaProvider>
+*   <PlaybackRateButton />
+* </MediaProvider>
+* ```
+*
+* @example
+* ```tsx
+* // With custom rates
+* <PlaybackRateButton rates={[0.5, 1, 1.5, 2]} />
+* ```
+*/
+function PlaybackRateButton({ className, rates = DEFAULT_RATES, isDisabled: isDisabledProp, ref, ...rest }) {
+	const dispatch = useMediaDispatch();
+	const mediaPlaybackRate = useMediaSelector((state) => state.mediaPlaybackRate ?? 1);
+	const isDisabled = useMediaControlsDisabled(isDisabledProp);
+	const validRates = filterValidRates(rates);
+	const safeRates = validRates.length > 0 ? validRates : DEFAULT_RATES;
+	if (validRates.length === 0 && rates.length > 0) logger.warn(`Invalid rates provided, using defaults [${DEFAULT_RATES.join(", ")}].`);
+	const displayRate = Number.isFinite(mediaPlaybackRate) && mediaPlaybackRate > 0 ? mediaPlaybackRate : safeRates[0];
+	const handleClick = useCallback(() => {
+		const nextIndex = (safeRates.indexOf(mediaPlaybackRate) + 1) % safeRates.length;
+		dispatch({
+			type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+			detail: safeRates[nextIndex]
+		});
+	}, [
+		dispatch,
+		mediaPlaybackRate,
+		safeRates
+	]);
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		ref,
+		className: clsx(styles.playbackRate, className),
+		variant: "icon",
+		size: "medium",
+		isDisabled,
+		onPress: handleClick,
+		"aria-label": `Playback rate ${displayRate}x`,
+		"data-testid": "playback-rate",
+		children: /* @__PURE__ */ jsxs("span", {
+			className: styles.playbackRateText,
+			children: [displayRate, "x"]
+		})
+	});
+}
+
+//#endregion
+export { PlaybackRateButton };
+//# sourceMappingURL=playback-rate.js.map

package/dist/components/media-controls/playback-rate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate.js","names":[],"sources":["../../../src/components/media-controls/playback-rate.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { getLogger } from '@accelint/logger/default';\nimport {\n  MediaActionTypes,\n  useMediaDispatch,\n  useMediaSelector,\n} from 'media-chrome/react/media-store';\nimport { useCallback } from 'react';\nimport { Button } from '../button';\nimport { useMediaControlsDisabled } from './context';\nimport styles from './styles.module.css';\nimport type { PlaybackRateButtonProps } from './types';\n\nconst logger = getLogger({\n  enabled: process.env.NODE_ENV === 'development',\n  level: 'warn',\n  prefix: '[PlaybackRateButton]',\n  pretty: true,\n});\n\n/** Default playback rate options: normal, 2x, and 3x speed. */\nconst DEFAULT_RATES = [1, 2, 3];\n\n/**\n * Filters to only positive finite numbers.\n *\n * @param rates - Array of rate values to filter.\n * @returns Array containing only positive finite rates.\n */\nconst filterValidRates = (rates: number[]) =>\n  rates.filter((r) => Number.isFinite(r) && r > 0);\n\n/**\n * A media control button for changing playback speed.\n *\n * Integrates with media-chrome's media store to control playback rate.\n * Cycles through available playback rates on each click.\n * Shows the current playback rate as text (e.g., '1x', '2x').\n * Invalid rates (negative, zero, NaN, Infinity) are automatically filtered out.\n * If all provided rates are invalid, falls back to default rates [1, 2, 3].\n *\n * @param props - The button props.\n * @param props.className - CSS class name for the button.\n * @param props.rates - Array of playback rates to cycle through (default: [1, 2, 3]). Only positive finite numbers are accepted.\n * @param props.isDisabled - Whether the button is disabled.\n * @param props.ref - Ref to the button element.\n * @returns The rendered playback rate button.\n *\n * @example\n * ```tsx\n * // Basic usage within MediaProvider\n * <MediaProvider>\n *   <PlaybackRateButton />\n * </MediaProvider>\n * ```\n *\n * @example\n * ```tsx\n * // With custom rates\n * <PlaybackRateButton rates={[0.5, 1, 1.5, 2]} />\n * ```\n */\nexport function PlaybackRateButton({\n  className,\n  rates = DEFAULT_RATES,\n  isDisabled: isDisabledProp,\n  ref,\n  ...rest\n}: PlaybackRateButtonProps) {\n  const dispatch = useMediaDispatch();\n  const mediaPlaybackRate = useMediaSelector(\n    (state) => state.mediaPlaybackRate ?? 1,\n  );\n  const isDisabled = useMediaControlsDisabled(isDisabledProp);\n\n  const validRates = filterValidRates(rates);\n  const safeRates = validRates.length > 0 ? validRates : DEFAULT_RATES;\n\n  if (validRates.length === 0 && rates.length > 0) {\n    logger.warn(\n      `Invalid rates provided, using defaults [${DEFAULT_RATES.join(', ')}].`,\n    );\n  }\n\n  const displayRate =\n    Number.isFinite(mediaPlaybackRate) && mediaPlaybackRate > 0\n      ? mediaPlaybackRate\n      : safeRates[0];\n\n  const handleClick = useCallback(() => {\n    const currentIndex = safeRates.indexOf(mediaPlaybackRate);\n    const nextIndex = (currentIndex + 1) % safeRates.length;\n    dispatch({\n      type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,\n      detail: safeRates[nextIndex],\n    });\n  }, [dispatch, mediaPlaybackRate, safeRates]);\n\n  return (\n    <Button\n      {...rest}\n      ref={ref}\n      className={clsx(styles.playbackRate, className)}\n      variant='icon'\n      size='medium'\n      isDisabled={isDisabled}\n      onPress={handleClick}\n      aria-label={`Playback rate ${displayRate}x`}\n      data-testid='playback-rate'\n    >\n      <span className={styles.playbackRateText}>{displayRate}x</span>\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,SAAS,UAAU;CACvB,SAAS,QAAQ,IAAI,aAAa;CAClC,OAAO;CACP,QAAQ;CACR,QAAQ;CACT,CAAC;;AAGF,MAAM,gBAAgB;CAAC;CAAG;CAAG;CAAE;;;;;;;AAQ/B,MAAM,oBAAoB,UACxB,MAAM,QAAQ,MAAM,OAAO,SAAS,EAAE,IAAI,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgClD,SAAgB,mBAAmB,EACjC,WACA,QAAQ,eACR,YAAY,gBACZ,KACA,GAAG,QACuB;CAC1B,MAAM,WAAW,kBAAkB;CACnC,MAAM,oBAAoB,kBACvB,UAAU,MAAM,qBAAqB,EACvC;CACD,MAAM,aAAa,yBAAyB,eAAe;CAE3D,MAAM,aAAa,iBAAiB,MAAM;CAC1C,MAAM,YAAY,WAAW,SAAS,IAAI,aAAa;AAEvD,KAAI,WAAW,WAAW,KAAK,MAAM,SAAS,EAC5C,QAAO,KACL,2CAA2C,cAAc,KAAK,KAAK,CAAC,IACrE;CAGH,MAAM,cACJ,OAAO,SAAS,kBAAkB,IAAI,oBAAoB,IACtD,oBACA,UAAU;CAEhB,MAAM,cAAc,kBAAkB;EAEpC,MAAM,aADe,UAAU,QAAQ,kBAAkB,GACvB,KAAK,UAAU;AACjD,WAAS;GACP,MAAM,iBAAiB;GACvB,QAAQ,UAAU;GACnB,CAAC;IACD;EAAC;EAAU;EAAmB;EAAU,CAAC;AAE5C,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,KAAK,OAAO,cAAc,UAAU;EAC/C,SAAQ;EACR,MAAK;EACO;EACZ,SAAS;EACT,cAAY,iBAAiB,YAAY;EACzC,eAAY;YAEZ,qBAAC;GAAK,WAAW,OAAO;cAAmB,aAAY;IAAQ;GACxD"}

package/dist/components/media-controls/seek-button.d.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { SeekButtonProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime70 from "react/jsx-runtime";
+
+//#region src/components/media-controls/seek-button.d.ts
+
+/**
+ * A media control button for seeking forward or backward.
+ *
+ * Integrates with media-chrome's media store to seek the media playback position.
+ * Can be configured to seek forward or backward with a customizable time offset.
+ * Invalid seekOffset values (negative, zero, NaN, Infinity) automatically fall back
+ * to the default of 10 seconds.
+ *
+ * @param props - The button props.
+ * @param props.className - CSS class name for the button.
+ * @param props.direction - Direction to seek ('forward' or 'backward').
+ * @param props.seekOffset - Number of seconds to seek (default: 10). Must be a positive finite number.
+ * @param props.isDisabled - Whether the button is disabled.
+ * @param props.ref - Ref to the button element.
+ * @returns The rendered seek button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within MediaProvider
+ * <MediaProvider>
+ *   <SeekButton direction="backward" />
+ *   <SeekButton direction="forward" />
+ * </MediaProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom seek offset (30 seconds)
+ * <SeekButton direction="forward" seekOffset={30} />
+ * ```
+ */
+declare function SeekButton({
+  className,
+  direction,
+  seekOffset: seekOffsetProp,
+  isDisabled: isDisabledProp,
+  ref,
+  ...rest
+}: SeekButtonProps): react_jsx_runtime70.JSX.Element;
+//#endregion
+export { SeekButton };
+//# sourceMappingURL=seek-button.d.ts.map