@accelint/design-toolkit 9.4.1 → 9.6.0

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_runtime173 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_runtime173.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"}

package/dist/components/media-controls/types.d.ts

@@ -0,0 +1,127 @@
+/*
+ * 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 { AriaAttributesWithRef } from "../../lib/types.js";
+import { ButtonProps } from "../button/types.js";
+import { ComponentPropsWithRef } from "react";
+
+//#region src/components/media-controls/types.d.ts
+/**
+ * Locked-down button props for media controls.
+ *
+ * Style variants are controlled internally to ensure consistent appearance.
+ */
+type MediaButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'color'>;
+/**
+ * Props for the MediaControls component.
+ */
+type MediaControlsProps = ComponentPropsWithRef<'div'> & {
+  classNames?: {
+    container?: string;
+  };
+  /**
+   * Disables all child controls via context. Individual control isDisabled props take precedence.
+   */
+  isDisabled?: boolean;
+};
+/**
+ * Props for the PlayButton component.
+ */
+type PlayButtonProps = MediaButtonProps;
+/**
+ * Props for the MuteButton component.
+ */
+type MuteButtonProps = MediaButtonProps;
+/**
+ * Props for the FullscreenButton component.
+ */
+type FullscreenButtonProps = MediaButtonProps;
+/**
+ * Props for the SeekButton component.
+ */
+type SeekButtonProps = MediaButtonProps & {
+  /** Direction to seek: 'forward' advances playback, 'backward' rewinds. */
+  direction: 'forward' | 'backward';
+  /**
+   * Number of seconds to seek. Must be a positive finite number.
+   * Invalid values (NaN, Infinity, negative, zero) fall back to default (10).
+   * @default 10
+   */
+  seekOffset?: number;
+};
+/**
+ * Props for the PlaybackRateButton component.
+ */
+type PlaybackRateButtonProps = MediaButtonProps & {
+  /**
+   * Array of playback rates to cycle through.
+   * @default [1, 2, 3]
+   */
+  rates?: number[];
+};
+/**
+ * Base props for div-based media controls.
+ */
+type MediaControlBaseProps = {
+  /** CSS class name for the control container. */
+  className?: string;
+  /**
+   * Disables this specific control. When true, the control is non-interactive.
+   * Component-level isDisabled takes precedence over context-level disabled state.
+   */
+  isDisabled?: boolean;
+};
+/**
+ * Props for the VolumeSlider component.
+ */
+type VolumeSliderProps = MediaControlBaseProps & AriaAttributesWithRef<HTMLDivElement> & {
+  /** Whether to show a "Volume" label above the slider. */
+  showLabel?: boolean;
+};
+/**
+ * Props for the TimeRange component.
+ */
+type TimeRangeProps = MediaControlBaseProps & AriaAttributesWithRef<HTMLDivElement>;
+/**
+ * Time display mode - mutually exclusive options.
+ *
+ * - 'current': Shows current playback time
+ * - 'remaining': Shows remaining time
+ * - 'duration': Shows total duration
+ */
+type TimeDisplayMode = 'current' | 'remaining' | 'duration';
+/**
+ * Props for the TimeDisplay component.
+ */
+type TimeDisplayProps = MediaControlBaseProps & AriaAttributesWithRef<HTMLDivElement> & {
+  /**
+   * Display mode for the time.
+   * - 'current': Shows current playback time (default)
+   * - 'remaining': Shows remaining time
+   * - 'duration': Shows total duration
+   */
+  mode?: TimeDisplayMode;
+  /** Text shown when time value is unavailable or loading (e.g., "--:--"). */
+  placeholder?: string;
+};
+/**
+ * Context value for MediaControls.
+ *
+ * Provides shared state to all media control children.
+ */
+type MediaControlsContextValue = {
+  /** Whether controls are disabled. */
+  isDisabled: boolean;
+};
+//#endregion
+export { FullscreenButtonProps, MediaControlsContextValue, MediaControlsProps, MuteButtonProps, PlayButtonProps, PlaybackRateButtonProps, SeekButtonProps, TimeDisplayMode, TimeDisplayProps, TimeRangeProps, VolumeSliderProps };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+

package/dist/components/media-controls/volume-slider.d.ts

@@ -0,0 +1,54 @@
+/*
+ * 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 { VolumeSliderProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime170 from "react/jsx-runtime";
+
+//#region src/components/media-controls/volume-slider.d.ts
+
+/**
+ * A media control slider for adjusting volume.
+ *
+ * Wraps media-chrome's MediaVolumeRange component with DTK styling.
+ * Integrates automatically with the media store for volume control.
+ *
+ * @param props - The slider props.
+ * @param props.className - CSS class name for the slider container.
+ * @param props.showLabel - Whether to show a "Volume" label.
+ * @param props.isDisabled - Whether the slider is disabled.
+ * @param props.ref - Ref to the container element.
+ * @returns The rendered volume slider.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within MediaProvider
+ * <MediaProvider>
+ *   <VolumeSlider />
+ * </MediaProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With visible label
+ * <VolumeSlider showLabel />
+ * ```
+ */
+declare function VolumeSlider({
+  className,
+  showLabel,
+  isDisabled: isDisabledProp,
+  ref
+}: VolumeSliderProps): react_jsx_runtime170.JSX.Element;
+//#endregion
+export { VolumeSlider };
+//# sourceMappingURL=volume-slider.d.ts.map

package/dist/components/media-controls/volume-slider.js

@@ -0,0 +1,70 @@
+/*
+ * 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, jsxs } from "react/jsx-runtime";
+import { MediaVolumeRange } from "media-chrome/react";
+import styles from "./styles.module.css";
+
+//#region src/components/media-controls/volume-slider.tsx
+/**
+* A media control slider for adjusting volume.
+*
+* Wraps media-chrome's MediaVolumeRange component with DTK styling.
+* Integrates automatically with the media store for volume control.
+*
+* @param props - The slider props.
+* @param props.className - CSS class name for the slider container.
+* @param props.showLabel - Whether to show a "Volume" label.
+* @param props.isDisabled - Whether the slider is disabled.
+* @param props.ref - Ref to the container element.
+* @returns The rendered volume slider.
+*
+* @example
+* ```tsx
+* // Basic usage within MediaProvider
+* <MediaProvider>
+*   <VolumeSlider />
+* </MediaProvider>
+* ```
+*
+* @example
+* ```tsx
+* // With visible label
+* <VolumeSlider showLabel />
+* ```
+*/
+function VolumeSlider({ className, showLabel = false, isDisabled: isDisabledProp, ref }) {
+	const isDisabled = useMediaControlsDisabled(isDisabledProp);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: clsx(styles.volumeSlider, className),
+		"data-disabled": isDisabled || void 0,
+		children: [showLabel && /* @__PURE__ */ jsx("span", {
+			className: styles.volumeLabel,
+			children: "Volume"
+		}), /* @__PURE__ */ jsx(MediaVolumeRange, {
+			className: styles.volumeRange,
+			"aria-label": "Volume",
+			disabled: isDisabled || void 0
+		})]
+	});
+}
+
+//#endregion
+export { VolumeSlider };
+//# sourceMappingURL=volume-slider.js.map

package/dist/components/media-controls/volume-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider.js","names":[],"sources":["../../../src/components/media-controls/volume-slider.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 { MediaVolumeRange } from 'media-chrome/react';\nimport { useMediaControlsDisabled } from './context';\nimport styles from './styles.module.css';\nimport type { VolumeSliderProps } from './types';\n\n/**\n * A media control slider for adjusting volume.\n *\n * Wraps media-chrome's MediaVolumeRange component with DTK styling.\n * Integrates automatically with the media store for volume control.\n *\n * @param props - The slider props.\n * @param props.className - CSS class name for the slider container.\n * @param props.showLabel - Whether to show a \"Volume\" label.\n * @param props.isDisabled - Whether the slider is disabled.\n * @param props.ref - Ref to the container element.\n * @returns The rendered volume slider.\n *\n * @example\n * ```tsx\n * // Basic usage within MediaProvider\n * <MediaProvider>\n *   <VolumeSlider />\n * </MediaProvider>\n * ```\n *\n * @example\n * ```tsx\n * // With visible label\n * <VolumeSlider showLabel />\n * ```\n */\nexport function VolumeSlider({\n  className,\n  showLabel = false,\n  isDisabled: isDisabledProp,\n  ref,\n}: VolumeSliderProps) {\n  const isDisabled = useMediaControlsDisabled(isDisabledProp);\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.volumeSlider, className)}\n      data-disabled={isDisabled || undefined}\n    >\n      {showLabel && <span className={styles.volumeLabel}>Volume</span>}\n      <MediaVolumeRange\n        className={styles.volumeRange}\n        aria-label='Volume'\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    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,aAAa,EAC3B,WACA,YAAY,OACZ,YAAY,gBACZ,OACoB;CACpB,MAAM,aAAa,yBAAyB,eAAe;AAE3D,QACE,qBAAC;EACM;EACL,WAAW,KAAK,OAAO,cAAc,UAAU;EAC/C,iBAAe,cAAc;aAE5B,aAAa,oBAAC;GAAK,WAAW,OAAO;aAAa;IAAa,EAChE,oBAAC;GACC,WAAW,OAAO;GAClB,cAAW;GAGX,UAAU,cAAc;IACxB;GACE"}

package/dist/components/menu/context.d.ts

@@ -12,7 +12,7 @@
 
 import { MenuProps as MenuProps$1 } from "./types.js";
 import "client-only";
-import * as react1 from "react";
+import * as react43 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/menu/context.d.ts
@@ -20,7 +20,7 @@ import { ContextValue } from "react-aria-components";
  * Context for sharing Menu props across component tree.
  * Used internally by Menu subcomponents for variant and state coordination.
  */
-declare const MenuContext: react1.Context<ContextValue<MenuProps$1<unknown>, HTMLDivElement>>;
+declare const MenuContext: react43.Context<ContextValue<MenuProps$1<unknown>, HTMLDivElement>>;
 //#endregion
 export { MenuContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/menu/index.d.ts

@@ -12,7 +12,7 @@
 
 import { MenuProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime171 from "react/jsx-runtime";
 
 //#region src/components/menu/index.d.ts
 
@@ -126,7 +126,7 @@ import * as react_jsx_runtime13 from "react/jsx-runtime";
 declare function Menu<T extends object>({
   ref,
   ...props
-}: MenuProps<T>): react_jsx_runtime13.JSX.Element;
+}: MenuProps<T>): react_jsx_runtime171.JSX.Element;
 //#endregion
 export { Menu };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/menu/item-description.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { TextProps } from "react-aria-components";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime178 from "react/jsx-runtime";
 
 //#region src/components/menu/item-description.d.ts
 /**
@@ -34,7 +34,7 @@ declare function MenuItemDescription({
   children,
   className,
   ...rest
-}: TextProps): react_jsx_runtime19.JSX.Element;
+}: TextProps): react_jsx_runtime178.JSX.Element;
 //#endregion
 export { MenuItemDescription };
 //# sourceMappingURL=item-description.d.ts.map

package/dist/components/menu/item-label.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { TextProps } from "react-aria-components";
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime181 from "react/jsx-runtime";
 
 //#region src/components/menu/item-label.d.ts
 /**
@@ -34,7 +34,7 @@ declare function MenuItemLabel({
   children,
   className,
   ...rest
-}: TextProps): react_jsx_runtime34.JSX.Element;
+}: TextProps): react_jsx_runtime181.JSX.Element;
 //#endregion
 export { MenuItemLabel };
 //# sourceMappingURL=item-label.d.ts.map

package/dist/components/menu/item.d.ts

@@ -12,7 +12,7 @@
 
 import { MenuItemProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime33 from "react/jsx-runtime";
+import * as react_jsx_runtime174 from "react/jsx-runtime";
 
 //#region src/components/menu/item.d.ts
 
@@ -41,7 +41,7 @@ declare function MenuItem({
   classNames,
   color,
   ...rest
-}: MenuItemProps): react_jsx_runtime33.JSX.Element;
+}: MenuItemProps): react_jsx_runtime174.JSX.Element;
 //#endregion
 export { MenuItem };
 //# sourceMappingURL=item.d.ts.map

package/dist/components/menu/section.d.ts

@@ -12,7 +12,7 @@
 
 import { MenuSectionProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime63 from "react/jsx-runtime";
+import * as react_jsx_runtime175 from "react/jsx-runtime";
 
 //#region src/components/menu/section.d.ts
 
@@ -42,7 +42,7 @@ declare function MenuSection<T extends object>({
   items,
   title,
   ...rest
-}: MenuSectionProps<T>): react_jsx_runtime63.JSX.Element;
+}: MenuSectionProps<T>): react_jsx_runtime175.JSX.Element;
 //#endregion
 export { MenuSection };
 //# sourceMappingURL=section.d.ts.map

package/dist/components/menu/separator.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { SeparatorProps } from "react-aria-components";
-import * as react_jsx_runtime61 from "react/jsx-runtime";
+import * as react_jsx_runtime176 from "react/jsx-runtime";
 
 //#region src/components/menu/separator.d.ts
 /**
@@ -32,7 +32,7 @@ import * as react_jsx_runtime61 from "react/jsx-runtime";
 declare function MenuSeparator({
   className,
   ...rest
-}: SeparatorProps): react_jsx_runtime61.JSX.Element;
+}: SeparatorProps): react_jsx_runtime176.JSX.Element;
 //#endregion
 export { MenuSeparator };
 //# sourceMappingURL=separator.d.ts.map

package/dist/components/menu/styles.module.css

@@ -14,7 +14,7 @@
 
 @layer components.l1 {
   .menu {
-    @apply rounded-medium bg-surface-overlay shadow-elevation-overlay outline-static overflow-x-clip overflow-y-auto p-px outline;
+    @apply rounded-medium bg-surface-overlay shadow-elevation-overlay outline-static overflow-x-clip overflow-y-auto p-px outline select-none;
   }
 
   .item {

package/dist/components/menu/submenu.d.ts

@@ -11,8 +11,8 @@
  */
 
 import "client-only";
-import * as react18 from "react";
-import * as react_aria_components0 from "react-aria-components";
+import * as react44 from "react";
+import * as react_aria_components1 from "react-aria-components";
 
 //#region src/components/menu/submenu.d.ts
 /**
@@ -31,7 +31,7 @@ import * as react_aria_components0 from "react-aria-components";
  * </MenuSubmenu>
  * ```
  */
-declare const MenuSubmenu: (props: react_aria_components0.SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => react18.ReactElement | null;
+declare const MenuSubmenu: (props: react_aria_components1.SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => react44.ReactElement | null;
 //#endregion
 export { MenuSubmenu };
 //# sourceMappingURL=submenu.d.ts.map