@accelint/design-toolkit 9.4.0 → 9.5.0

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_runtime69 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_runtime69.JSX.Element;
+//#endregion
+export { TimeDisplay };
+//# sourceMappingURL=time-display.d.ts.map

package/dist/components/media-controls/time-display.js

@@ -0,0 +1,95 @@
+/*
+ * 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 { useMediaControlsDisabled } from "./context.js";
+import "client-only";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsx } from "react/jsx-runtime";
+import { MediaDurationDisplay, MediaTimeDisplay } from "media-chrome/react";
+import { useMediaSelector } from "media-chrome/react/media-store";
+import styles from "./styles.module.css";
+
+//#region src/components/media-controls/time-display.tsx
+/**
+* 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="--:--" />
+* ```
+*/
+function TimeDisplay({ className, placeholder = "hh:mm:ss", isDisabled: isDisabledProp, mode = "current", ref }) {
+	const mediaDuration = useMediaSelector((state) => state.mediaDuration);
+	const isDisabled = useMediaControlsDisabled(isDisabledProp);
+	const isLoaded = mediaDuration != null && mediaDuration > 0;
+	/**
+	* Renders time display content based on load state and mode.
+	* Shows placeholder before media loads, then delegates to media-chrome components.
+	*/
+	const renderContent = () => {
+		if (!isLoaded) return /* @__PURE__ */ jsx("span", {
+			className: styles.timeDisplayText,
+			children: placeholder
+		});
+		if (mode === "duration") return /* @__PURE__ */ jsx(MediaDurationDisplay, { className: styles.timeDisplayText });
+		return /* @__PURE__ */ jsx(MediaTimeDisplay, {
+			className: styles.timeDisplayText,
+			remaining: mode === "remaining" || void 0
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: clsx(styles.timeDisplay, className),
+		"data-disabled": isDisabled || void 0,
+		children: renderContent()
+	});
+}
+
+//#endregion
+export { TimeDisplay };
+//# sourceMappingURL=time-display.js.map

package/dist/components/media-controls/time-display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-display.js","names":[],"sources":["../../../src/components/media-controls/time-display.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 { MediaDurationDisplay, MediaTimeDisplay } from 'media-chrome/react';\nimport { useMediaSelector } from 'media-chrome/react/media-store';\nimport { useMediaControlsDisabled } from './context';\nimport styles from './styles.module.css';\nimport type { TimeDisplayProps } from './types';\n\n/**\n * A media control component for displaying time information.\n *\n * Wraps media-chrome's time display components with DTK styling.\n * Can show current time, remaining time, or total duration.\n * Shows placeholder text until media metadata is loaded.\n *\n * @param props - The display props.\n * @param props.className - CSS class name for the container.\n * @param props.placeholder - Placeholder text before media loads (default: 'hh:mm:ss').\n * @param props.isDisabled - Whether the display is disabled.\n * @param props.mode - Display mode ('current', 'remaining', or 'duration').\n * @param props.ref - Ref to the container element.\n * @returns The rendered time display.\n *\n * @example\n * ```tsx\n * // Basic usage - shows current time\n * <MediaProvider>\n *   <TimeDisplay />\n * </MediaProvider>\n * ```\n *\n * @example\n * ```tsx\n * // Show total duration\n * <TimeDisplay mode=\"duration\" />\n * ```\n *\n * @example\n * ```tsx\n * // Show remaining time\n * <TimeDisplay mode=\"remaining\" />\n * ```\n *\n * @example\n * ```tsx\n * // Custom placeholder\n * <TimeDisplay placeholder=\"--:--\" />\n * ```\n */\nexport function TimeDisplay({\n  className,\n  placeholder = 'hh:mm:ss',\n  isDisabled: isDisabledProp,\n  mode = 'current',\n  ref,\n}: TimeDisplayProps) {\n  const mediaDuration = useMediaSelector((state) => state.mediaDuration);\n  const isDisabled = useMediaControlsDisabled(isDisabledProp);\n  const isLoaded = mediaDuration != null && mediaDuration > 0;\n\n  /**\n   * Renders time display content based on load state and mode.\n   * Shows placeholder before media loads, then delegates to media-chrome components.\n   */\n  const renderContent = () => {\n    if (!isLoaded) {\n      return <span className={styles.timeDisplayText}>{placeholder}</span>;\n    }\n    if (mode === 'duration') {\n      return <MediaDurationDisplay className={styles.timeDisplayText} />;\n    }\n    // media-chrome: empty string enables remaining time, undefined shows current\n    return (\n      <MediaTimeDisplay\n        className={styles.timeDisplayText}\n        remaining={mode === 'remaining' || undefined}\n      />\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.timeDisplay, className)}\n      data-disabled={isDisabled || undefined}\n    >\n      {renderContent()}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,YAAY,EAC1B,WACA,cAAc,YACd,YAAY,gBACZ,OAAO,WACP,OACmB;CACnB,MAAM,gBAAgB,kBAAkB,UAAU,MAAM,cAAc;CACtE,MAAM,aAAa,yBAAyB,eAAe;CAC3D,MAAM,WAAW,iBAAiB,QAAQ,gBAAgB;;;;;CAM1D,MAAM,sBAAsB;AAC1B,MAAI,CAAC,SACH,QAAO,oBAAC;GAAK,WAAW,OAAO;aAAkB;IAAmB;AAEtE,MAAI,SAAS,WACX,QAAO,oBAAC,wBAAqB,WAAW,OAAO,kBAAmB;AAGpE,SACE,oBAAC;GACC,WAAW,OAAO;GAClB,WAAW,SAAS,eAAe;IACnC;;AAIN,QACE,oBAAC;EACM;EACL,WAAW,KAAK,OAAO,aAAa,UAAU;EAC9C,iBAAe,cAAc;YAE5B,eAAe;GACZ"}

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

@@ -0,0 +1,46 @@
+/*
+ * 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 { TimeRangeProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime71 from "react/jsx-runtime";
+
+//#region src/components/media-controls/time-range.d.ts
+
+/**
+ * A media control slider for seeking through media.
+ *
+ * Wraps media-chrome's MediaTimeRange component with DTK styling.
+ * Shows the current playback position and allows seeking.
+ *
+ * @param props - The slider props.
+ * @param props.className - CSS class name for the container.
+ * @param props.isDisabled - Whether the slider is disabled.
+ * @param props.ref - Ref to the container element.
+ * @returns The rendered time range slider.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within MediaProvider
+ * <MediaProvider>
+ *   <TimeRange />
+ * </MediaProvider>
+ * ```
+ */
+declare function TimeRange({
+  className,
+  isDisabled: isDisabledProp,
+  ref
+}: TimeRangeProps): react_jsx_runtime71.JSX.Element;
+//#endregion
+export { TimeRange };
+//# sourceMappingURL=time-range.d.ts.map

package/dist/components/media-controls/time-range.js

@@ -0,0 +1,63 @@
+/*
+ * 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 { useMediaControlsDisabled } from "./context.js";
+import "client-only";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsx } from "react/jsx-runtime";
+import { MediaTimeDisplay, MediaTimeRange } from "media-chrome/react";
+import styles from "./styles.module.css";
+
+//#region src/components/media-controls/time-range.tsx
+/**
+* A media control slider for seeking through media.
+*
+* Wraps media-chrome's MediaTimeRange component with DTK styling.
+* Shows the current playback position and allows seeking.
+*
+* @param props - The slider props.
+* @param props.className - CSS class name for the container.
+* @param props.isDisabled - Whether the slider is disabled.
+* @param props.ref - Ref to the container element.
+* @returns The rendered time range slider.
+*
+* @example
+* ```tsx
+* // Basic usage within MediaProvider
+* <MediaProvider>
+*   <TimeRange />
+* </MediaProvider>
+* ```
+*/
+function TimeRange({ className, isDisabled: isDisabledProp, ref }) {
+	const isDisabled = useMediaControlsDisabled(isDisabledProp);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: clsx(styles.timeRange, className),
+		children: /* @__PURE__ */ jsx(MediaTimeRange, {
+			className: styles.timeRangeInput,
+			"aria-label": "Seek",
+			disabled: isDisabled || void 0,
+			children: /* @__PURE__ */ jsx(MediaTimeDisplay, {
+				slot: "current",
+				className: styles.currentTimeDisplay
+			})
+		})
+	});
+}
+
+//#endregion
+export { TimeRange };
+//# sourceMappingURL=time-range.js.map

package/dist/components/media-controls/time-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-range.js","names":[],"sources":["../../../src/components/media-controls/time-range.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 { MediaTimeDisplay, MediaTimeRange } from 'media-chrome/react';\nimport { useMediaControlsDisabled } from './context';\nimport styles from './styles.module.css';\nimport type { TimeRangeProps } from './types';\n\n/**\n * A media control slider for seeking through media.\n *\n * Wraps media-chrome's MediaTimeRange component with DTK styling.\n * Shows the current playback position and allows seeking.\n *\n * @param props - The slider props.\n * @param props.className - CSS class name for the container.\n * @param props.isDisabled - Whether the slider is disabled.\n * @param props.ref - Ref to the container element.\n * @returns The rendered time range slider.\n *\n * @example\n * ```tsx\n * // Basic usage within MediaProvider\n * <MediaProvider>\n *   <TimeRange />\n * </MediaProvider>\n * ```\n */\nexport function TimeRange({\n  className,\n  isDisabled: isDisabledProp,\n  ref,\n}: TimeRangeProps) {\n  const isDisabled = useMediaControlsDisabled(isDisabledProp);\n\n  return (\n    <div ref={ref} className={clsx(styles.timeRange, className)}>\n      <MediaTimeRange\n        className={styles.timeRangeInput}\n        aria-label='Seek'\n        // @ts-expect-error - disabled prop is supported by the underlying web component but not in media-chrome's TypeScript types\n\n        disabled={isDisabled || undefined}\n      >\n        <MediaTimeDisplay\n          slot='current'\n          className={styles.currentTimeDisplay}\n        />\n      </MediaTimeRange>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,SAAgB,UAAU,EACxB,WACA,YAAY,gBACZ,OACiB;CACjB,MAAM,aAAa,yBAAyB,eAAe;AAE3D,QACE,oBAAC;EAAS;EAAK,WAAW,KAAK,OAAO,WAAW,UAAU;YACzD,oBAAC;GACC,WAAW,OAAO;GAClB,cAAW;GAGX,UAAU,cAAc;aAExB,oBAAC;IACC,MAAK;IACL,WAAW,OAAO;KAClB;IACa;GACb"}