@accelint/design-toolkit 9.4.1 → 9.6.0

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_runtime161 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_runtime161.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_runtime162 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_runtime162.JSX.Element;
+//#endregion
+export { SeekButton };
+//# sourceMappingURL=seek-button.d.ts.map

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

@@ -0,0 +1,116 @@
+/*
+ * 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 { getLogger } from "@accelint/logger/default";
+import { MediaActionTypes, useMediaDispatch, useMediaSelector } from "media-chrome/react/media-store";
+import { FastForward, FastRewind } from "@accelint/icons";
+
+//#region src/components/media-controls/seek-button.tsx
+const logger = getLogger({
+	enabled: process.env.NODE_ENV === "development",
+	level: "warn",
+	prefix: "[SeekButton]",
+	pretty: true
+});
+/** Default seek distance in seconds. */
+const DEFAULT_SEEK_OFFSET = 10;
+/**
+* Validates that value is a positive finite number.
+*
+* @param value - The number to validate.
+* @returns True if the value is positive and finite.
+*/
+function isPositiveFinite(value) {
+	return Number.isFinite(value) && value > 0;
+}
+/**
+* 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} />
+* ```
+*/
+function SeekButton({ className, direction, seekOffset: seekOffsetProp = DEFAULT_SEEK_OFFSET, isDisabled: isDisabledProp, ref, ...rest }) {
+	const dispatch = useMediaDispatch();
+	const mediaCurrentTime = useMediaSelector((state) => state.mediaCurrentTime);
+	const mediaDuration = useMediaSelector((state) => state.mediaDuration);
+	const isDisabledFromContext = useMediaControlsDisabled(isDisabledProp);
+	const seekOffset = isPositiveFinite(seekOffsetProp) ? seekOffsetProp : DEFAULT_SEEK_OFFSET;
+	if (seekOffset !== seekOffsetProp) logger.warn(`Invalid seekOffset "${seekOffsetProp}", using default (${DEFAULT_SEEK_OFFSET}).`);
+	const isDisabled = isDisabledFromContext || !(mediaDuration != null && mediaDuration > 0 && mediaCurrentTime != null);
+	const handleClick = useCallback(() => {
+		if (mediaCurrentTime == null || mediaDuration == null) return;
+		const delta = direction === "forward" ? seekOffset : -seekOffset;
+		const targetTime = Math.max(0, Math.min(mediaDuration, mediaCurrentTime + delta));
+		dispatch({
+			type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+			detail: targetTime
+		});
+	}, [
+		mediaCurrentTime,
+		mediaDuration,
+		direction,
+		seekOffset,
+		dispatch
+	]);
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		ref,
+		className,
+		variant: "icon",
+		size: "medium",
+		isDisabled,
+		onPress: handleClick,
+		"aria-label": `Seek ${direction} ${seekOffset} seconds`,
+		children: /* @__PURE__ */ jsx(Icon, {
+			size: "medium",
+			children: direction === "forward" ? /* @__PURE__ */ jsx(FastForward, {}) : /* @__PURE__ */ jsx(FastRewind, {})
+		})
+	});
+}
+
+//#endregion
+export { SeekButton };
+//# sourceMappingURL=seek-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"seek-button.js","names":[],"sources":["../../../src/components/media-controls/seek-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 { useCallback } from 'react';\nimport { FastForward, FastRewind } from '@accelint/icons';\nimport { getLogger } from '@accelint/logger/default';\nimport {\n  MediaActionTypes,\n  useMediaDispatch,\n  useMediaSelector,\n} from 'media-chrome/react/media-store';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { useMediaControlsDisabled } from './context';\nimport type { SeekButtonProps } from './types';\n\nconst logger = getLogger({\n  enabled: process.env.NODE_ENV === 'development',\n  level: 'warn',\n  prefix: '[SeekButton]',\n  pretty: true,\n});\n\n/** Default seek distance in seconds. */\nconst DEFAULT_SEEK_OFFSET = 10;\n\n/**\n * Validates that value is a positive finite number.\n *\n * @param value - The number to validate.\n * @returns True if the value is positive and finite.\n */\nfunction isPositiveFinite(value: number): boolean {\n  return Number.isFinite(value) && value > 0;\n}\n\n/**\n * A media control button for seeking forward or backward.\n *\n * Integrates with media-chrome's media store to seek the media playback position.\n * Can be configured to seek forward or backward with a customizable time offset.\n * Invalid seekOffset values (negative, zero, NaN, Infinity) automatically fall back\n * to the default of 10 seconds.\n *\n * @param props - The button props.\n * @param props.className - CSS class name for the button.\n * @param props.direction - Direction to seek ('forward' or 'backward').\n * @param props.seekOffset - Number of seconds to seek (default: 10). Must be a positive finite number.\n * @param props.isDisabled - Whether the button is disabled.\n * @param props.ref - Ref to the button element.\n * @returns The rendered seek button.\n *\n * @example\n * ```tsx\n * // Basic usage within MediaProvider\n * <MediaProvider>\n *   <SeekButton direction=\"backward\" />\n *   <SeekButton direction=\"forward\" />\n * </MediaProvider>\n * ```\n *\n * @example\n * ```tsx\n * // With custom seek offset (30 seconds)\n * <SeekButton direction=\"forward\" seekOffset={30} />\n * ```\n */\nexport function SeekButton({\n  className,\n  direction,\n  seekOffset: seekOffsetProp = DEFAULT_SEEK_OFFSET,\n  isDisabled: isDisabledProp,\n  ref,\n  ...rest\n}: SeekButtonProps) {\n  const dispatch = useMediaDispatch();\n  const mediaCurrentTime = useMediaSelector((state) => state.mediaCurrentTime);\n  const mediaDuration = useMediaSelector((state) => state.mediaDuration);\n  const isDisabledFromContext = useMediaControlsDisabled(isDisabledProp);\n\n  // Validate and resolve seekOffset\n  const seekOffset = isPositiveFinite(seekOffsetProp)\n    ? seekOffsetProp\n    : DEFAULT_SEEK_OFFSET;\n\n  if (seekOffset !== seekOffsetProp) {\n    logger.warn(\n      `Invalid seekOffset \"${seekOffsetProp}\", using default (${DEFAULT_SEEK_OFFSET}).`,\n    );\n  }\n\n  // Disable when media not loaded (duration unavailable)\n  const isMediaLoaded =\n    mediaDuration != null && mediaDuration > 0 && mediaCurrentTime != null;\n  const isDisabled = isDisabledFromContext || !isMediaLoaded;\n\n  const handleClick = useCallback(() => {\n    if (mediaCurrentTime == null || mediaDuration == null) {\n      return;\n    }\n\n    const delta = direction === 'forward' ? seekOffset : -seekOffset;\n    const targetTime = Math.max(\n      0,\n      Math.min(mediaDuration, mediaCurrentTime + delta),\n    );\n    dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: targetTime });\n  }, [mediaCurrentTime, mediaDuration, direction, seekOffset, dispatch]);\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={`Seek ${direction} ${seekOffset} seconds`}\n    >\n      <Icon size='medium'>\n        {direction === 'forward' ? <FastForward /> : <FastRewind />}\n      </Icon>\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,sBAAsB;;;;;;;AAQ5B,SAAS,iBAAiB,OAAwB;AAChD,QAAO,OAAO,SAAS,MAAM,IAAI,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkC3C,SAAgB,WAAW,EACzB,WACA,WACA,YAAY,iBAAiB,qBAC7B,YAAY,gBACZ,KACA,GAAG,QACe;CAClB,MAAM,WAAW,kBAAkB;CACnC,MAAM,mBAAmB,kBAAkB,UAAU,MAAM,iBAAiB;CAC5E,MAAM,gBAAgB,kBAAkB,UAAU,MAAM,cAAc;CACtE,MAAM,wBAAwB,yBAAyB,eAAe;CAGtE,MAAM,aAAa,iBAAiB,eAAe,GAC/C,iBACA;AAEJ,KAAI,eAAe,eACjB,QAAO,KACL,uBAAuB,eAAe,oBAAoB,oBAAoB,IAC/E;CAMH,MAAM,aAAa,yBAAyB,EAD1C,iBAAiB,QAAQ,gBAAgB,KAAK,oBAAoB;CAGpE,MAAM,cAAc,kBAAkB;AACpC,MAAI,oBAAoB,QAAQ,iBAAiB,KAC/C;EAGF,MAAM,QAAQ,cAAc,YAAY,aAAa,CAAC;EACtD,MAAM,aAAa,KAAK,IACtB,GACA,KAAK,IAAI,eAAe,mBAAmB,MAAM,CAClD;AACD,WAAS;GAAE,MAAM,iBAAiB;GAAoB,QAAQ;GAAY,CAAC;IAC1E;EAAC;EAAkB;EAAe;EAAW;EAAY;EAAS,CAAC;AAEtE,QACE,oBAAC;EACC,GAAI;EACC;EACM;EACX,SAAQ;EACR,MAAK;EACO;EACZ,SAAS;EACT,cAAY,QAAQ,UAAU,GAAG,WAAW;YAE5C,oBAAC;GAAK,MAAK;aACR,cAAc,YAAY,oBAAC,gBAAc,GAAG,oBAAC,eAAa;IACtD;GACA"}

package/dist/components/media-controls/styles.module.css

@@ -0,0 +1,145 @@
+/*
+ * Copyright 2026 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.
+ */
+
+@reference '@accelint/design-foundation/styles';
+
+@layer components.l1 {
+  .mediaControls {
+    @apply p-s flex items-center;
+
+    @variant disabled {
+      @apply opacity-50;
+    }
+  }
+
+  .volumeSlider {
+    @apply gap-s flex items-center;
+
+    @variant disabled {
+      @apply cursor-not-allowed opacity-50;
+    }
+  }
+
+  .volumeLabel {
+    @apply fg-primary-muted text-body-s;
+  }
+
+  .volumeRange {
+    @apply h-xxs w-full;
+    --media-range-track-height: 2px;
+    --media-range-track-border-radius: 2px;
+    --media-range-padding: 0;
+
+    /* Filled track (accent color) */
+    --media-range-bar-color: var(--bg-accent-primary-bold);
+
+    /* Thumb styling */
+    --media-range-thumb-height: 12px;
+    --media-range-thumb-width: 12px;
+    --media-range-thumb-border-radius: var(--radius-round);
+    --media-range-thumb-background: var(--fg-accent-primary-bold);
+
+    &::part(thumb) {
+      transition: transform 150ms ease;
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+
+    @variant disabled {
+      --media-range-bar-color: var(--bg-disabled-bold);
+      --media-range-thumb-background: var(--fg-disabled-secondary);
+    }
+  }
+
+  .timeRange {
+    @apply flex w-full grow items-center;
+  }
+
+  .timeRangeInput {
+    @apply w-full;
+
+    /* Track */
+    --media-control-background: var(--bg-surface-raised);
+    --media-control-hover-background: var(--bg-surface-raised);
+    --media-range-track-height: 4px;
+    --media-range-track-border-radius: 2px;
+    --media-range-bar-color: var(--bg-accent-primary-bold);
+    --media-range-padding: 0;
+
+    /* Thumb (playhead) */
+    --media-range-thumb-height: 16px;
+    --media-range-thumb-width: 4px;
+    --media-range-thumb-border-radius: var(--radius-round);
+    --media-range-thumb-background: var(--fg-accent-primary-bold);
+
+    /* Hide built-in preview tooltip */
+    --media-preview-box-display: none;
+    --media-box-arrow-display: none;
+    --media-text-color: var(--fg-primary-bold);
+    --media-primary-color: var(--fg-primary-bold);
+
+    &::part(thumb) {
+      &:hover {
+        background-color: var(--fg-accent-primary-hover);
+      }
+
+      &:focus-visible {
+        background-color: var(--fg-accent-primary-hover);
+        outline: 2px solid var(--outline-interactive-hover);
+        outline-offset: 2px;
+      }
+
+      &:active {
+        background-color: var(--fg-accent-primary-pressed);
+      }
+    }
+
+    &[disabled]::part(thumb) {
+      background-color: var(--fg-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  .timeDisplay {
+    --media-text-background: var(--bg-surface-raised);
+    @apply flex items-center;
+
+    @variant disabled {
+      @apply opacity-50;
+    }
+  }
+
+  .timeDisplayText {
+    @apply fg-primary-bold text-body-s tabular-nums;
+  }
+
+  .playbackRate {
+    @apply flex items-center;
+  }
+
+  .playbackRateText {
+    @apply fg-primary-muted text-body-s tabular-nums;
+  }
+
+  .currentTimeDisplay {
+    @apply text-body-xs fg-primary-bold tabular-nums opacity-0 transition-opacity duration-150;
+    --media-time-display-background: var(--bg-surface-raised);
+    --media-time-display-padding: var(--spacing-xs) var(--spacing-s);
+    --media-time-display-border-radius: var(--radius-s);
+
+    .timeRangeInput:hover & {
+      @apply opacity-100;
+    }
+  }
+}

package/dist/components/media-controls/time-display.d.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 { TimeDisplayProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime172 from "react/jsx-runtime";
+
+//#region src/components/media-controls/time-display.d.ts
+
+/**
+ * A media control component for displaying time information.
+ *
+ * Wraps media-chrome's time display components with DTK styling.
+ * Can show current time, remaining time, or total duration.
+ * Shows placeholder text until media metadata is loaded.
+ *
+ * @param props - The display props.
+ * @param props.className - CSS class name for the container.
+ * @param props.placeholder - Placeholder text before media loads (default: 'hh:mm:ss').
+ * @param props.isDisabled - Whether the display is disabled.
+ * @param props.mode - Display mode ('current', 'remaining', or 'duration').
+ * @param props.ref - Ref to the container element.
+ * @returns The rendered time display.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - shows current time
+ * <MediaProvider>
+ *   <TimeDisplay />
+ * </MediaProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Show total duration
+ * <TimeDisplay mode="duration" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Show remaining time
+ * <TimeDisplay mode="remaining" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom placeholder
+ * <TimeDisplay placeholder="--:--" />
+ * ```
+ */
+declare function TimeDisplay({
+  className,
+  placeholder,
+  isDisabled: isDisabledProp,
+  mode,
+  ref
+}: TimeDisplayProps): react_jsx_runtime172.JSX.Element;
+//#endregion
+export { TimeDisplay };
+//# sourceMappingURL=time-display.d.ts.map