@accelint/design-toolkit 9.4.1 → 9.6.0

package/dist/components/video/index.js

@@ -0,0 +1,261 @@
+/*
+ * 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 { MediaControlsProvider } from "../media-controls/context.js";
+import { MuteButton } from "../media-controls/mute-button.js";
+import { PlayButton } from "../media-controls/play-button.js";
+import { PlaybackRateButton } from "../media-controls/playback-rate.js";
+import { SeekButton } from "../media-controls/seek-button.js";
+import { TimeDisplay } from "../media-controls/time-display.js";
+import { TimeRange } from "../media-controls/time-range.js";
+import { VolumeSlider } from "../media-controls/volume-slider.js";
+import { FullscreenButton } from "../media-controls/fullscreen-button.js";
+import "client-only";
+import { useCallback, useEffect, useState } from "react";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { getLogger } from "@accelint/logger/default";
+import { formatError } from "media-chrome/dist/labels/labels.js";
+import { MediaController } from "media-chrome/react";
+import { MediaProvider, useMediaRef, useMediaSelector } from "media-chrome/react/media-store";
+import { Loop, Problem } from "@accelint/icons";
+import styles from "./styles.module.css";
+
+//#region src/components/video/index.tsx
+const logger = getLogger({
+	enabled: true,
+	level: "error",
+	prefix: "[Video]",
+	pretty: true
+});
+const selectMediaLoading = (state) => state.mediaLoading;
+const selectMediaDuration = (state) => state.mediaDuration;
+/**
+* Internal component that renders within MediaProvider context.
+*
+* This component is separated from the main Video component to allow use of
+* media-chrome hooks (useMediaRef) that require MediaProvider context.
+* The outer Video component wraps everything in MediaProvider, then VideoInner
+* handles the actual video element and controls rendering.
+*
+* @param props - The component props.
+* @param props.src - Video source URL.
+* @param props.poster - Poster image URL displayed before playback.
+* @param props.classNames - Class names for sub-elements.
+* @param props.children - Custom controls (replaces default layout).
+* @param props.autoPlay - Whether to autoplay the video.
+* @param props.loop - Whether to loop the video.
+* @param props.muted - Whether the video starts muted.
+* @param props.preload - Video preload strategy.
+* @param props.crossOrigin - CORS setting for the video element.
+* @param props.isDisabled - Whether to disable all video controls.
+* @param props.onEnded - Callback when video ends.
+* @param props.onTimeUpdate - Callback when playback time updates.
+* @param props.onError - Callback when an error occurs.
+* @param props.playbackRates - Custom playback rate options.
+* @returns The video element with controls.
+*/
+function VideoInner({ src, poster, children, classNames, autoPlay, loop, muted, preload = "metadata", crossOrigin, isDisabled: isDisabledProp, onEnded, onTimeUpdate, onError, playbackRates }) {
+	const mediaRef = useMediaRef();
+	const [errorMessage, setErrorMessage] = useState("");
+	useEffect(() => {
+		setErrorMessage("");
+	}, [src]);
+	const mediaLoading = useMediaSelector(selectMediaLoading);
+	const mediaDuration = useMediaSelector(selectMediaDuration);
+	const isMetadataLoaded = mediaDuration !== null && mediaDuration !== void 0 && mediaDuration > 0;
+	const hasError = errorMessage !== "";
+	const showLoading = !hasError && (mediaLoading || !isMetadataLoaded);
+	const isDisabled = isDisabledProp === true || hasError;
+	const handleEnded = useCallback(() => {
+		onEnded?.();
+	}, [onEnded]);
+	const handleTimeUpdate = useCallback((e) => {
+		onTimeUpdate?.(e.currentTarget.currentTime);
+	}, [onTimeUpdate]);
+	const handleError = useCallback((e) => {
+		const mediaError = e.currentTarget.error;
+		logger.withContext({ src }).withError(mediaError).error("Failed to load video");
+		setErrorMessage((mediaError && formatError(mediaError)?.message) ?? "Unable to load video file");
+		if (mediaError) onError?.(mediaError);
+	}, [src, onError]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("video", {
+			ref: mediaRef,
+			slot: "media",
+			className: clsx(styles.video, classNames?.video),
+			"data-testid": "video-element",
+			autoPlay,
+			loop,
+			muted,
+			preload,
+			crossOrigin,
+			poster,
+			playsInline: true,
+			onEnded: handleEnded,
+			onTimeUpdate: handleTimeUpdate,
+			onError: handleError,
+			children: /* @__PURE__ */ jsx("source", { src })
+		}),
+		showLoading && /* @__PURE__ */ jsx("output", {
+			className: styles.loadingOverlay,
+			"aria-label": "Loading video",
+			children: /* @__PURE__ */ jsx(Icon, {
+				size: "medium",
+				className: styles.loadingSpinner,
+				children: /* @__PURE__ */ jsx(Loop, {})
+			})
+		}),
+		errorMessage && /* @__PURE__ */ jsxs("div", {
+			className: styles.errorOverlay,
+			role: "alert",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				size: "medium",
+				children: /* @__PURE__ */ jsx(Problem, {})
+			}), /* @__PURE__ */ jsx("span", {
+				className: styles.errorText,
+				children: errorMessage
+			})]
+		}),
+		/* @__PURE__ */ jsx(MediaControlsProvider, {
+			isDisabled,
+			children: children ?? /* @__PURE__ */ jsx("div", {
+				className: styles.controlsOverlay,
+				noautohide: "",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: clsx(styles.controls, classNames?.mediaControls),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: clsx(styles.timeRow, classNames?.timeRow),
+						children: [
+							/* @__PURE__ */ jsx(TimeDisplay, { mode: "current" }),
+							/* @__PURE__ */ jsx(TimeRange, {}),
+							/* @__PURE__ */ jsx(TimeDisplay, { mode: "duration" })
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: clsx(styles.controlsRow, classNames?.controlsRow),
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: styles.leftGroup,
+								children: /* @__PURE__ */ jsxs("div", {
+									className: styles.volumeGroup,
+									children: [/* @__PURE__ */ jsx(MuteButton, {}), /* @__PURE__ */ jsx(VolumeSlider, {})]
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: styles.playbackGroup,
+								children: [
+									/* @__PURE__ */ jsx(SeekButton, { direction: "backward" }),
+									/* @__PURE__ */ jsx(PlayButton, {}),
+									/* @__PURE__ */ jsx(SeekButton, { direction: "forward" })
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: styles.rightGroup,
+								children: [/* @__PURE__ */ jsx(PlaybackRateButton, { rates: playbackRates }), /* @__PURE__ */ jsx(FullscreenButton, {})]
+							})
+						]
+					})]
+				})
+			})
+		})
+	] });
+}
+/**
+* A complete video player component.
+*
+* Combines an HTML video element with MediaControls to provide a fully-featured
+* video player with play/pause, seek, volume control, playback rate adjustment,
+* and fullscreen support.
+*
+* Uses media-chrome under the hood for state management and MediaController
+* for the accessible media chrome elements.
+*
+* @param props - The component props.
+* @param props.src - Video source URL. Must be accessible to the browser - if loading
+*   from a different origin, ensure the server sends appropriate CORS headers
+*   (Access-Control-Allow-Origin) or use the crossOrigin prop.
+* @param props.poster - Poster image URL displayed before playback starts.
+* @param props.classNames - Class names for sub-elements.
+* @param props.isDisabled - Disable all video controls.
+* @param props.crossOrigin - CORS setting ('anonymous' | 'use-credentials'). Required when
+*   loading video from a different origin that requires credentials.
+* @param props.playbackRates - Array of playback speed multipliers (default: [1, 2, 3]).
+*   Only positive finite numbers are accepted; invalid values are filtered out.
+* @param props.children - Custom controls to render instead of the default layout.
+* @param props.onEnded - Callback invoked when video playback finishes.
+* @param props.onTimeUpdate - Callback invoked during playback with current time in seconds.
+* @param props.onError - Callback invoked when video fails to load or encounters an error.
+* @param props.noHotkeys - Disable all keyboard shortcuts for media control.
+* @param props.hotkeys - Custom keyboard shortcuts configuration for media control.
+* @param props.noVolumePref - Disable automatic saving/restoring of volume preference.
+* @param props.noMutedPref - Disable automatic saving/restoring of muted state preference.
+* @param props.lang - Language code for localized media control labels.
+* @returns The rendered video player component.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Video src="video.mp4" />
+* ```
+*
+* @example
+* ```tsx
+* // With poster image
+* <Video
+*   src="video.mp4"
+*   poster="thumbnail.jpg"
+* />
+* ```
+*
+* @example
+* ```tsx
+* // With event callbacks
+* <Video
+*   src="video.mp4"
+*   onEnded={() => console.log('Ended')}
+*   onTimeUpdate={(time) => console.log('Current time:', time)}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // Custom controls layout
+* <Video src="video.mp4">
+*   <PlayButton />
+*   <TimeRange />
+* </Video>
+* ```
+*/
+function Video({ classNames, isDisabled, noHotkeys, hotkeys, noVolumePref, noMutedPref, lang, ...rest }) {
+	return /* @__PURE__ */ jsx(MediaProvider, { children: /* @__PURE__ */ jsx(MediaController, {
+		className: clsx("group/video", styles.container, classNames?.container),
+		"data-disabled": isDisabled || void 0,
+		noHotkeys,
+		hotkeys,
+		noVolumePref,
+		noMutedPref,
+		lang,
+		children: /* @__PURE__ */ jsx(VideoInner, {
+			...rest,
+			classNames,
+			isDisabled
+		})
+	}) });
+}
+
+//#endregion
+export { Video };
+//# sourceMappingURL=index.js.map

package/dist/components/video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/video/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Loop, Problem } from '@accelint/icons';\nimport { getLogger } from '@accelint/logger/default';\nimport { formatError } from 'media-chrome/dist/labels/labels.js';\nimport { MediaController } from 'media-chrome/react';\nimport {\n  MediaProvider,\n  useMediaRef,\n  useMediaSelector,\n} from 'media-chrome/react/media-store';\nimport type { MediaState } from 'media-chrome/react/media-store';\nimport { useCallback, useEffect, useState } from 'react';\nimport { Icon } from '../icon';\nimport { FullscreenButton } from '../media-controls/fullscreen-button';\nimport { MediaControlsProvider } from '../media-controls/context';\nimport { MuteButton } from '../media-controls/mute-button';\nimport { PlayButton } from '../media-controls/play-button';\nimport { PlaybackRateButton } from '../media-controls/playback-rate';\nimport { SeekButton } from '../media-controls/seek-button';\nimport { TimeDisplay } from '../media-controls/time-display';\nimport { TimeRange } from '../media-controls/time-range';\nimport { VolumeSlider } from '../media-controls/volume-slider';\nimport styles from './styles.module.css';\nimport type { VideoProps } from './types';\n\nconst logger = getLogger({\n  enabled: true,\n  level: 'error',\n  prefix: '[Video]',\n  pretty: true,\n});\n\nconst selectMediaLoading = (state: MediaState) => state.mediaLoading;\nconst selectMediaDuration = (state: MediaState) => state.mediaDuration;\n\n/**\n * Internal component that renders within MediaProvider context.\n *\n * This component is separated from the main Video component to allow use of\n * media-chrome hooks (useMediaRef) that require MediaProvider context.\n * The outer Video component wraps everything in MediaProvider, then VideoInner\n * handles the actual video element and controls rendering.\n *\n * @param props - The component props.\n * @param props.src - Video source URL.\n * @param props.poster - Poster image URL displayed before playback.\n * @param props.classNames - Class names for sub-elements.\n * @param props.children - Custom controls (replaces default layout).\n * @param props.autoPlay - Whether to autoplay the video.\n * @param props.loop - Whether to loop the video.\n * @param props.muted - Whether the video starts muted.\n * @param props.preload - Video preload strategy.\n * @param props.crossOrigin - CORS setting for the video element.\n * @param props.isDisabled - Whether to disable all video controls.\n * @param props.onEnded - Callback when video ends.\n * @param props.onTimeUpdate - Callback when playback time updates.\n * @param props.onError - Callback when an error occurs.\n * @param props.playbackRates - Custom playback rate options.\n * @returns The video element with controls.\n */\nfunction VideoInner({\n  src,\n  poster,\n  children,\n  classNames,\n  autoPlay,\n  loop,\n  muted,\n  preload = 'metadata',\n  crossOrigin,\n  isDisabled: isDisabledProp,\n  onEnded,\n  onTimeUpdate,\n  onError,\n  playbackRates,\n}: VideoProps) {\n  const mediaRef = useMediaRef();\n  const [errorMessage, setErrorMessage] = useState<string>('');\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: src is intentionally used as a trigger to reset error state when video source changes\n  useEffect(() => {\n    setErrorMessage('');\n  }, [src]);\n\n  const mediaLoading = useMediaSelector(selectMediaLoading);\n  const mediaDuration = useMediaSelector(selectMediaDuration);\n  const isMetadataLoaded =\n    mediaDuration !== null && mediaDuration !== undefined && mediaDuration > 0;\n  const hasError = errorMessage !== '';\n  const showLoading = !hasError && (mediaLoading || !isMetadataLoaded);\n  const isDisabled = isDisabledProp === true || hasError;\n\n  const handleEnded = useCallback(() => {\n    onEnded?.();\n  }, [onEnded]);\n\n  const handleTimeUpdate = useCallback(\n    (e: React.SyntheticEvent<HTMLVideoElement>) => {\n      onTimeUpdate?.(e.currentTarget.currentTime);\n    },\n    [onTimeUpdate],\n  );\n\n  const handleError = useCallback(\n    (e: React.SyntheticEvent<HTMLVideoElement>) => {\n      const mediaError = e.currentTarget.error;\n      logger\n        .withContext({ src })\n        .withError(mediaError)\n        .error('Failed to load video');\n      setErrorMessage(\n        (mediaError && formatError(mediaError)?.message) ??\n          'Unable to load video file',\n      );\n      if (mediaError) {\n        onError?.(mediaError);\n      }\n    },\n    [src, onError],\n  );\n\n  return (\n    <>\n      <video\n        ref={mediaRef}\n        slot='media'\n        className={clsx(styles.video, classNames?.video)}\n        data-testid='video-element'\n        autoPlay={autoPlay}\n        loop={loop}\n        muted={muted}\n        preload={preload}\n        crossOrigin={crossOrigin}\n        poster={poster}\n        playsInline\n        onEnded={handleEnded}\n        onTimeUpdate={handleTimeUpdate}\n        onError={handleError}\n      >\n        <source src={src} />\n      </video>\n\n      {showLoading && (\n        <output className={styles.loadingOverlay} aria-label='Loading video'>\n          <Icon size='medium' className={styles.loadingSpinner}>\n            <Loop />\n          </Icon>\n        </output>\n      )}\n\n      {errorMessage && (\n        <div className={styles.errorOverlay} role='alert'>\n          <Icon size='medium'>\n            <Problem />\n          </Icon>\n          <span className={styles.errorText}>{errorMessage}</span>\n        </div>\n      )}\n\n      <MediaControlsProvider isDisabled={isDisabled}>\n        {/* noautohide tells MediaController (web component) to keep this element visible */}\n        {children ?? (\n          // @ts-expect-error noautohide is a valid attribute for media-chrome's MediaController but not recognized by React typings\n          <div className={styles.controlsOverlay} noautohide=''>\n            <div className={clsx(styles.controls, classNames?.mediaControls)}>\n              <div className={clsx(styles.timeRow, classNames?.timeRow)}>\n                <TimeDisplay mode='current' />\n                <TimeRange />\n                <TimeDisplay mode='duration' />\n              </div>\n\n              <div\n                className={clsx(styles.controlsRow, classNames?.controlsRow)}\n              >\n                <div className={styles.leftGroup}>\n                  <div className={styles.volumeGroup}>\n                    <MuteButton />\n                    <VolumeSlider />\n                  </div>\n                </div>\n                <div className={styles.playbackGroup}>\n                  <SeekButton direction='backward' />\n                  <PlayButton />\n                  <SeekButton direction='forward' />\n                </div>\n                <div className={styles.rightGroup}>\n                  <PlaybackRateButton rates={playbackRates} />\n                  <FullscreenButton />\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </MediaControlsProvider>\n    </>\n  );\n}\n\n/**\n * A complete video player component.\n *\n * Combines an HTML video element with MediaControls to provide a fully-featured\n * video player with play/pause, seek, volume control, playback rate adjustment,\n * and fullscreen support.\n *\n * Uses media-chrome under the hood for state management and MediaController\n * for the accessible media chrome elements.\n *\n * @param props - The component props.\n * @param props.src - Video source URL. Must be accessible to the browser - if loading\n *   from a different origin, ensure the server sends appropriate CORS headers\n *   (Access-Control-Allow-Origin) or use the crossOrigin prop.\n * @param props.poster - Poster image URL displayed before playback starts.\n * @param props.classNames - Class names for sub-elements.\n * @param props.isDisabled - Disable all video controls.\n * @param props.crossOrigin - CORS setting ('anonymous' | 'use-credentials'). Required when\n *   loading video from a different origin that requires credentials.\n * @param props.playbackRates - Array of playback speed multipliers (default: [1, 2, 3]).\n *   Only positive finite numbers are accepted; invalid values are filtered out.\n * @param props.children - Custom controls to render instead of the default layout.\n * @param props.onEnded - Callback invoked when video playback finishes.\n * @param props.onTimeUpdate - Callback invoked during playback with current time in seconds.\n * @param props.onError - Callback invoked when video fails to load or encounters an error.\n * @param props.noHotkeys - Disable all keyboard shortcuts for media control.\n * @param props.hotkeys - Custom keyboard shortcuts configuration for media control.\n * @param props.noVolumePref - Disable automatic saving/restoring of volume preference.\n * @param props.noMutedPref - Disable automatic saving/restoring of muted state preference.\n * @param props.lang - Language code for localized media control labels.\n * @returns The rendered video player component.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Video src=\"video.mp4\" />\n * ```\n *\n * @example\n * ```tsx\n * // With poster image\n * <Video\n *   src=\"video.mp4\"\n *   poster=\"thumbnail.jpg\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // With event callbacks\n * <Video\n *   src=\"video.mp4\"\n *   onEnded={() => console.log('Ended')}\n *   onTimeUpdate={(time) => console.log('Current time:', time)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Custom controls layout\n * <Video src=\"video.mp4\">\n *   <PlayButton />\n *   <TimeRange />\n * </Video>\n * ```\n */\nexport function Video({\n  classNames,\n  isDisabled,\n  noHotkeys,\n  hotkeys,\n  noVolumePref,\n  noMutedPref,\n  lang,\n  ...rest\n}: VideoProps) {\n  return (\n    <MediaProvider>\n      <MediaController\n        className={clsx('group/video', styles.container, classNames?.container)}\n        data-disabled={isDisabled || undefined}\n        noHotkeys={noHotkeys}\n        hotkeys={hotkeys}\n        noVolumePref={noVolumePref}\n        noMutedPref={noMutedPref}\n        lang={lang}\n      >\n        <VideoInner {...rest} classNames={classNames} isDisabled={isDisabled} />\n      </MediaController>\n    </MediaProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,SAAS,UAAU;CACvB,SAAS;CACT,OAAO;CACP,QAAQ;CACR,QAAQ;CACT,CAAC;AAEF,MAAM,sBAAsB,UAAsB,MAAM;AACxD,MAAM,uBAAuB,UAAsB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BzD,SAAS,WAAW,EAClB,KACA,QACA,UACA,YACA,UACA,MACA,OACA,UAAU,YACV,aACA,YAAY,gBACZ,SACA,cACA,SACA,iBACa;CACb,MAAM,WAAW,aAAa;CAC9B,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;AAG5D,iBAAgB;AACd,kBAAgB,GAAG;IAClB,CAAC,IAAI,CAAC;CAET,MAAM,eAAe,iBAAiB,mBAAmB;CACzD,MAAM,gBAAgB,iBAAiB,oBAAoB;CAC3D,MAAM,mBACJ,kBAAkB,QAAQ,kBAAkB,UAAa,gBAAgB;CAC3E,MAAM,WAAW,iBAAiB;CAClC,MAAM,cAAc,CAAC,aAAa,gBAAgB,CAAC;CACnD,MAAM,aAAa,mBAAmB,QAAQ;CAE9C,MAAM,cAAc,kBAAkB;AACpC,aAAW;IACV,CAAC,QAAQ,CAAC;CAEb,MAAM,mBAAmB,aACtB,MAA8C;AAC7C,iBAAe,EAAE,cAAc,YAAY;IAE7C,CAAC,aAAa,CACf;CAED,MAAM,cAAc,aACjB,MAA8C;EAC7C,MAAM,aAAa,EAAE,cAAc;AACnC,SACG,YAAY,EAAE,KAAK,CAAC,CACpB,UAAU,WAAW,CACrB,MAAM,uBAAuB;AAChC,mBACG,cAAc,YAAY,WAAW,EAAE,YACtC,4BACH;AACD,MAAI,WACF,WAAU,WAAW;IAGzB,CAAC,KAAK,QAAQ,CACf;AAED,QACE;EACE,oBAAC;GACC,KAAK;GACL,MAAK;GACL,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;GAChD,eAAY;GACF;GACJ;GACC;GACE;GACI;GACL;GACR;GACA,SAAS;GACT,cAAc;GACd,SAAS;aAET,oBAAC,YAAY,MAAO;IACd;EAEP,eACC,oBAAC;GAAO,WAAW,OAAO;GAAgB,cAAW;aACnD,oBAAC;IAAK,MAAK;IAAS,WAAW,OAAO;cACpC,oBAAC,SAAO;KACH;IACA;EAGV,gBACC,qBAAC;GAAI,WAAW,OAAO;GAAc,MAAK;cACxC,oBAAC;IAAK,MAAK;cACT,oBAAC,YAAU;KACN,EACP,oBAAC;IAAK,WAAW,OAAO;cAAY;KAAoB;IACpD;EAGR,oBAAC;GAAkC;aAEhC,YAEC,oBAAC;IAAI,WAAW,OAAO;IAAiB,YAAW;cACjD,qBAAC;KAAI,WAAW,KAAK,OAAO,UAAU,YAAY,cAAc;gBAC9D,qBAAC;MAAI,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;;OACvD,oBAAC,eAAY,MAAK,YAAY;OAC9B,oBAAC,cAAY;OACb,oBAAC,eAAY,MAAK,aAAa;;OAC3B,EAEN,qBAAC;MACC,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;;OAE5D,oBAAC;QAAI,WAAW,OAAO;kBACrB,qBAAC;SAAI,WAAW,OAAO;oBACrB,oBAAC,eAAa,EACd,oBAAC,iBAAe;UACZ;SACF;OACN,qBAAC;QAAI,WAAW,OAAO;;SACrB,oBAAC,cAAW,WAAU,aAAa;SACnC,oBAAC,eAAa;SACd,oBAAC,cAAW,WAAU,YAAY;;SAC9B;OACN,qBAAC;QAAI,WAAW,OAAO;mBACrB,oBAAC,sBAAmB,OAAO,gBAAiB,EAC5C,oBAAC,qBAAmB;SAChB;;OACF;MACF;KACF;IAEc;KACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEP,SAAgB,MAAM,EACpB,YACA,YACA,WACA,SACA,cACA,aACA,MACA,GAAG,QACU;AACb,QACE,oBAAC,2BACC,oBAAC;EACC,WAAW,KAAK,eAAe,OAAO,WAAW,YAAY,UAAU;EACvE,iBAAe,cAAc;EAClB;EACF;EACK;EACD;EACP;YAEN,oBAAC;GAAW,GAAI;GAAkB;GAAwB;IAAc;GACxD,GACJ"}

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

@@ -0,0 +1,99 @@
+/*
+ * 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 {
+  .container {
+    @apply bg-surface-raised rounded-medium relative flex w-full flex-col;
+    min-width: 270px;
+    --video-controls-height: 84px;
+    padding-bottom: var(--video-controls-height);
+
+    /* Media Chrome theming - maps design tokens to media-chrome CSS variables */
+    --media-primary-color: var(--fg-primary-bold);
+    --media-secondary-color: transparent;
+    --media-icon-color: var(--fg-primary-muted);
+    --media-text-color: var(--fg-accent-primary-bold);
+    --media-control-background: transparent;
+    --media-control-hover-background: transparent;
+
+    @variant disabled {
+      @apply opacity-50;
+    }
+  }
+
+  .video {
+    @apply rounded-t-medium aspect-video w-full;
+    object-fit: contain;
+    background: black;
+  }
+
+  .controlsOverlay {
+    @apply space-y-s p-s;
+    border-radius: 0 0 var(--radius-medium) var(--radius-medium);
+    align-self: stretch;
+  }
+
+  .loadingOverlay {
+    @apply rounded-t-medium fg-primary-muted pointer-events-none absolute top-0 right-0 left-0 flex items-center justify-center;
+    bottom: var(--video-controls-height);
+  }
+
+  .loadingSpinner {
+    @variant motion-safe {
+      @apply animate-spin;
+    }
+  }
+
+  .errorOverlay {
+    @apply rounded-t-medium fg-serious-bold gap-s pointer-events-none absolute top-0 right-0 left-0 flex items-center justify-center;
+    bottom: var(--video-controls-height);
+  }
+
+  .errorText {
+    @apply text-body-m;
+  }
+
+  .timeRow {
+    @apply gap-s flex items-center;
+  }
+
+  .controls {
+    @apply space-y-s p-s;
+  }
+
+  .controlsRow {
+    @apply flex items-center;
+  }
+
+  .leftGroup,
+  .rightGroup {
+    @apply flex flex-1 items-center;
+  }
+
+  .leftGroup {
+    @apply justify-start;
+  }
+
+  .rightGroup {
+    @apply gap-xs justify-end;
+  }
+
+  .volumeGroup {
+    @apply gap-s flex;
+  }
+
+  .playbackGroup {
+    @apply gap-xs flex items-center justify-center;
+  }
+}

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

@@ -0,0 +1,52 @@
+/*
+ * 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 { ComponentProps, ComponentPropsWithRef, ReactNode } from "react";
+import { MediaController } from "media-chrome/react";
+
+//#region src/components/video/types.d.ts
+type VideoProps = Omit<ComponentPropsWithRef<'video'>, 'children' | 'onEnded' | 'onTimeUpdate' | 'onError' | 'src' | 'className'> & Pick<ComponentProps<typeof MediaController>, 'noHotkeys' | 'hotkeys' | 'noVolumePref' | 'noMutedPref' | 'lang'> & {
+  /** Video source URL */
+  src: string;
+  /** Poster image URL displayed before playback */
+  poster?: string;
+  /** Disable all video controls */
+  isDisabled?: boolean;
+  /** Custom controls (replaces default layout) */
+  children?: ReactNode;
+  /**
+   * Class names for sub-elements.
+   * @property container - The outer MediaController wrapper element.
+   * @property video - The native HTML video element.
+   * @property mediaControls - The controls overlay container.
+   * @property timeRow - The row containing time display and seek bar.
+   * @property controlsRow - The row containing playback and volume controls.
+   */
+  classNames?: {
+    container?: string;
+    video?: string;
+    mediaControls?: string;
+    timeRow?: string;
+    controlsRow?: string;
+  };
+  /** Callback when video ends */
+  onEnded?: () => void;
+  /** Callback when playback time updates */
+  onTimeUpdate?: (currentTime: number) => void;
+  /** Callback when video fails to load or encounters an error */
+  onError?: (error: MediaError) => void;
+  /** Custom playback rate options (default: [1, 2, 3]) */
+  playbackRates?: number[];
+};
+//#endregion
+export { VideoProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/video/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/view-stack/index.d.ts

@@ -12,7 +12,7 @@
 
 import { ViewStackProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime186 from "react/jsx-runtime";
+import * as react_jsx_runtime183 from "react/jsx-runtime";
 
 //#region src/components/view-stack/index.d.ts
 
@@ -47,7 +47,7 @@ declare function ViewStack({
   children,
   defaultView,
   onChange
-}: ViewStackProps): react_jsx_runtime186.JSX.Element;
+}: ViewStackProps): react_jsx_runtime183.JSX.Element;
 //#endregion
 export { ViewStack };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/view-stack/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { ViewStackTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime188 from "react/jsx-runtime";
+import * as react_jsx_runtime185 from "react/jsx-runtime";
 
 //#region src/components/view-stack/trigger.d.ts
 
@@ -45,7 +45,7 @@ import * as react_jsx_runtime188 from "react/jsx-runtime";
 declare function ViewStackTrigger({
   children,
   for: types
-}: ViewStackTriggerProps): react_jsx_runtime188.JSX.Element;
+}: ViewStackTriggerProps): react_jsx_runtime185.JSX.Element;
 //#endregion
 export { ViewStackTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/view-stack/view.d.ts

@@ -12,7 +12,7 @@
 
 import { ViewStackViewProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime175 from "react/jsx-runtime";
+import * as react_jsx_runtime186 from "react/jsx-runtime";
 
 //#region src/components/view-stack/view.d.ts
 
@@ -43,7 +43,7 @@ import * as react_jsx_runtime175 from "react/jsx-runtime";
 declare function ViewStackView({
   id,
   children
-}: ViewStackViewProps): react_jsx_runtime175.JSX.Element | null;
+}: ViewStackViewProps): react_jsx_runtime186.JSX.Element | null;
 //#endregion
 export { ViewStackView };
 //# sourceMappingURL=view.d.ts.map

package/dist/index.d.ts

@@ -20,6 +20,8 @@ import { AccordionPanel } from "./components/accordion/panel.js";
 import { AccordionTrigger } from "./components/accordion/trigger.js";
 import { ActionBarProps } from "./components/action-bar/types.js";
 import { ActionBar } from "./components/action-bar/index.js";
+import { AudioProps } from "./components/audio/types.js";
+import { Audio } from "./components/audio/index.js";
 import { AvatarProps } from "./components/avatar/types.js";
 import { AvatarContext, AvatarProvider } from "./components/avatar/context.js";
 import { Avatar } from "./components/avatar/index.js";
@@ -156,6 +158,17 @@ import { ListItemContent } from "./components/list/item-content.js";
 import { ListItemDescription } from "./components/list/item-description.js";
 import { ListItemTitle } from "./components/list/item-title.js";
 import { ListItem } from "./components/list/item.js";
+import { FullscreenButtonProps, MediaControlsContextValue, MediaControlsProps, MuteButtonProps, PlayButtonProps, PlaybackRateButtonProps, SeekButtonProps, TimeDisplayMode, TimeDisplayProps, TimeRangeProps, VolumeSliderProps } from "./components/media-controls/types.js";
+import { MediaControlsContext, MediaControlsProvider, useMediaControlsDisabled, useMediaProviderGuard } from "./components/media-controls/context.js";
+import { FullscreenButton } from "./components/media-controls/fullscreen-button.js";
+import { MediaControls } from "./components/media-controls/index.js";
+import { MuteButton } from "./components/media-controls/mute-button.js";
+import { PlayButton } from "./components/media-controls/play-button.js";
+import { PlaybackRateButton } from "./components/media-controls/playback-rate.js";
+import { SeekButton } from "./components/media-controls/seek-button.js";
+import { TimeDisplay } from "./components/media-controls/time-display.js";
+import { TimeRange } from "./components/media-controls/time-range.js";
+import { VolumeSlider } from "./components/media-controls/volume-slider.js";
 import { MenuItemProps, MenuProps, MenuSectionProps } from "./components/menu/types.js";
 import { MenuContext } from "./components/menu/context.js";
 import { Menu } from "./components/menu/index.js";
@@ -221,6 +234,8 @@ import { SkeletonProps } from "./components/skeleton/types.js";
 import { Skeleton } from "./components/skeleton/index.js";
 import { SliderMarker, SliderMarkersConfig, SliderProps } from "./components/slider/types.js";
 import { Slider } from "./components/slider/index.js";
+import { StatusIndicatorProps } from "./components/status-indicator/types.js";
+import { StatusIndicator } from "./components/status-indicator/index.js";
 import { SwitchProps } from "./components/switch/types.js";
 import { SwitchContext, SwitchProvider } from "./components/switch/context.js";
 import { Switch } from "./components/switch/index.js";
@@ -257,6 +272,8 @@ import { TreeItemLabel } from "./components/tree/item-label.js";
 import { TreeItemPrefixIcon } from "./components/tree/item-prefix-icon.js";
 import { TreeItem } from "./components/tree/item.js";
 import { TreeLines } from "./components/tree/lines.js";
+import { VideoProps } from "./components/video/types.js";
+import { Video } from "./components/video/index.js";
 import { ViewStackContext, ViewStackEventHandlers, useViewStackEmit } from "./components/view-stack/context.js";
 import { ViewStack } from "./components/view-stack/index.js";
 import { ViewStackTrigger } from "./components/view-stack/trigger.js";
@@ -274,4 +291,4 @@ import { useTreeState } from "./hooks/use-tree/state/index.js";
 import { isSlottedContextValue } from "./lib/utils.js";
 import { PortalProvider } from "./providers/portal.js";
 import { ThemeMode, ThemeProvider, useTheme } from "./providers/theme-provider.js";
-export { Accordion, AccordionContext, AccordionGroup, type AccordionGroupProps, AccordionHeader, type AccordionHeaderProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionStyleVariants, AccordionTrigger, type AccordionTriggerProps, ActionBar, type ActionBarProps, type AriaAttributes, type AriaAttributesWithRef, Avatar, AvatarContext, type AvatarProps, AvatarProvider, Badge, BadgeContext, type BadgeProps, BadgeProvider, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, Button, ButtonContext, type ButtonProps, ButtonProvider, type ButtonStyleVariants, COORDINATE_EPSILON, COORDINATE_ERROR_MESSAGES, COORDINATE_FORMAT_LABELS, COORDINATE_FORMAT_NAMES, COORDINATE_SYSTEMS, type ChainedEvents, Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext, type CheckboxGroupProps, type CheckboxProps, type ChildrenRenderProps, Chip, ChipContext, type ChipContextValue, ChipList, type ChipListProps, ChipListRenderingContext, type ChipProps, ChipProvider, type ClassNameRenderProps, type ClassNames, ClassificationBadge, ClassificationBadgeContext, type ClassificationBadgeProps, ClassificationBadgeProvider, ClassificationBanner, ClassificationBannerContext, type ClassificationBannerProps, ClassificationBannerProvider, Clock, type ClockProps, CloneAction, ColorPicker, type ColorPickerProps, CombinatorSelector, ComboBoxField, ComboBoxFieldContext, type ComboBoxFieldProps, ComboBoxFieldProvider, CoordinateField, CoordinateFieldContext, type CoordinateFieldProps, CoordinateFieldProvider, type CoordinateFieldState, CoordinateFieldStateContext, CoordinateFieldStateProvider, type CoordinateFormatResult, CoordinateSegment, type CoordinateSegmentProps, type CoordinateSystem, type CoordinateValue, DateField, type DateFieldProps, type DefaultRQBProps, DeferredCollection, type DeferredCollectionProps, DeletableChip, type DeletableChipProps, DetailsList, DetailsListContext, DetailsListLabel, type DetailsListLabelProps, type DetailsListProps, DetailsListProvider, DetailsListValue, type DetailsListValueProps, Dialog, DialogContent, DialogContext, DialogFooter, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, Divider, DividerContext, type DividerProps, DividerProvider, type DragAndDropConfig, DragContext, Drawer, DrawerBack, DrawerClose, type DrawerCloseEvent, type DrawerCloseProps, DrawerContent, DrawerContext, type DrawerContextValue, type DrawerEvent, DrawerEventHandlers, DrawerEventNamespace, DrawerEventTypes, DrawerFooter, DrawerHeader, DrawerHeaderTitle, DrawerLayout, DrawerLayoutMain, type DrawerLayoutProps, DrawerMenu, DrawerMenuItem, type DrawerMenuItemProps, type DrawerMenuProps, type DrawerOpenEvent, DrawerPanel, type DrawerProps, type DrawerTitleProps, type DrawerToggleEvent, DrawerTrigger, type DrawerTriggerProps, DrawerView, type DropTargetInfo, EXPECTED_SEGMENT_COUNTS, type Field, Flashcard, FlashcardAdditionalData, type FlashcardComponentProps, FlashcardContext, FlashcardDetailsLabel, FlashcardDetailsList, type FlashcardDetailsListProps, FlashcardDetailsValue, FlashcardHero, type FlashcardProps, GROUP_SEPARATOR, HeaderColumnAction, type HeaderColumnActionKey, Hero, HeroContext, type HeroProps, HeroSubtitle, HeroTitle, Hotkey, HotkeyContext, type HotkeyProps, HotkeyProvider, HotkeySet, Icon, IconContext, type IconProps, IconProvider, Input, InputContext, type InputProps, Kanban, KanbanCard, KanbanCardBody, type KanbanCardData, KanbanCardHeader, KanbanCardHeaderActions, KanbanCardHeaderTitle, type KanbanCardProps, type KanbanColContentActionProps, type KanbanColContentProps, type KanbanColProps, KanbanColumn, KanbanColumnActions, KanbanColumnContainer, KanbanColumnContent, type KanbanColumnData, KanbanColumnHeader, KanbanColumnHeaderActions, KanbanColumnHeaderDragHandle, KanbanColumnHeaderTitle, type KanbanComponentProps, type KanbanContextData, KanbanHeader, KanbanHeaderActions, KanbanHeaderSearch, KanbanHeaderTitle, type KanbanMenuProps, type KanbanProps, KanbanProvider, type KanbanProviderProps, type KanbanSearchProps, Label, LabelContext, type LabelProps, LabelProvider, Lines, type LinesProps, Link, LinkButton, LinkButtonContext, type LinkButtonProps, LinkButtonProvider, type LinkProps, LinkProvider, List, ListContext, ListItem, ListItemContent, type ListItemContentProps, ListItemDescription, type ListItemDescriptionProps, type ListItemProps, ListItemTitle, type ListItemTitleProps, type ListItemVariant, type ListProps, LockAction, Menu, MenuContext, MenuItem, MenuItemDescription, MenuItemLabel, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, MenuSubmenu, MenuTrigger, type MoveCard, type MoveCardValidationParams, type MoveCardValidationResult, Notice, type NoticeActionEvent, type NoticeColor, type NoticeContent, type NoticeDequeueEvent, NoticeEventNamespace, NoticeEventTypes, NoticeIcon, type NoticeIconProps, NoticeList, type NoticeListProps, type NoticeProps, type NoticeQueueEvent, Options, OptionsContext, type OptionsDataItem, OptionsItem, OptionsItemContent, OptionsItemDescription, OptionsItemLabel, type OptionsItemProps, type OptionsProps, OptionsSection, type OptionsSectionProps, Pagination, PaginationContext, type PaginationContextValue, PaginationNext, type PaginationNextProps, PaginationPages, type PaginationPagesProps, PaginationPrev, type PaginationPrevProps, type PaginationProps, type ParsedCoordinateMatch, Popover, PopoverContent, PopoverFooter, type PopoverProps, PopoverTitle, PopoverTrigger, type PopoverTriggerProps, PortalProvider, type ProviderProps, QueryBuilder, type QueryBuilderContextType, type QueryBuilderProps, type QueryBuilderValueEditors, Radio, RadioContext, RadioGroup, type RadioGroupProps, type RadioProps, RemoveRuleAction, type RenderProps, type RenderPropsChildren, type RenderPropsClassName, type RenderPropsStyle, type RuleGroupType, SearchField, SearchFieldContext, type SearchFieldProps, SearchFieldProvider, type SegmentConfig, type SegmentType, SelectField, SelectFieldContext, type SelectFieldProps, SelectFieldProvider, SelectableChip, type SelectableChipProps, Sidenav, SidenavAvatar, type SidenavAvatarProps, type SidenavCloseEvent, SidenavContent, type SidenavContentProps, SidenavContext, type SidenavContextValue, type SidenavDividerProps, type SidenavEvent, SidenavEventNamespace, SidenavEventTypes, SidenavFooter, type SidenavFooterProps, SidenavHeader, type SidenavHeaderProps, SidenavItem, type SidenavItemProps, SidenavLink, type SidenavLinkProps, SidenavMenu, SidenavMenuItem, type SidenavMenuItemProps, type SidenavMenuProps, type SidenavOpenEvent, type SidenavProps, type SidenavToggleEvent, SidenavTrigger, type SidenavTriggerProps, type SimpleEvents, Skeleton, type SkeletonProps, Slider, type SliderMarker, type SliderMarkersConfig, type SliderProps, type SlottedValue, SortDirection, type SortDirectionState, type StylePropRenderProps, type StyleRenderProps, Switch, SwitchContext, type SwitchProps, SwitchProvider, Tab, TabList, TabPanel, Table, type TableBodyProps, type TableCellProps, TableContext, type TableContextValue, type TableHeaderCellProps, type TableHeaderProps, type TableProps, type TableRowProps, Tabs, TabsContext, type TabsProps, TabsProvider, type TargetedEvents, TextAreaField, TextAreaFieldContext, type TextAreaFieldProps, TextAreaFieldProvider, TextField, TextFieldContext, type TextFieldProps, TextFieldProvider, type ThemeMode, ThemeProvider, TimeField, type TimeFieldProps, ToggleButton, ToggleButtonContext, type ToggleButtonProps, ToggleButtonProvider, type ToggleButtonStyleVariants, Tooltip, TooltipContext, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, Tree, type TreeActions, TreeContext, type TreeContextValue, type TreeData, TreeItem, TreeItemActions, TreeItemContent, type TreeItemContentProps, type TreeItemContentRenderProps, TreeItemContext, type TreeItemContextValue, TreeItemDescription, TreeItemLabel, TreeItemPrefixIcon, type TreeItemProps, TreeLines, type TreeNode, type TreeNodeBase, type TreeProps, type TreeStyleVariant, type UseCoordinateCopyOptions, type UseCoordinateCopyResult, type UseCoordinateFieldResult, type UseCoordinateFieldStateOptions, type UseCoordinateFieldStateResult, type UseCoordinateFocusOptions, type UseCoordinateFocusResult, type UseCoordinatePasteOptions, type UseCoordinatePasteResult, type UseFrameDelayOptions, type UseFrameDelayResult, type UseTimeoutCleanupResult, type UseTreeActionsOptions, type UseTreeState, type UseTreeStateOptions, ViewStack, type ViewStackBackEvent, type ViewStackClearEvent, ViewStackContext, type ViewStackContextValue, type ViewStackEvent, ViewStackEventHandlers, ViewStackEventNamespace, ViewStackEventTypes, type ViewStackProps, type ViewStackPushEvent, type ViewStackResetEvent, ViewStackTrigger, type ViewStackTriggerProps, ViewStackView, type ViewStackViewProps, areAllSegmentsFilled, areCoordinatesEqual, bus, calculateClosestEdge, columnData, convertDDToDisplaySegments, convertDisplaySegmentsToDD, ddSegmentConfigs, ddmSegmentConfigs, deduplicateMatchesByLocation, dmsSegmentConfigs, formatSegmentsToCoordinateString, getAllCoordinateFormats, getEditableSegmentCount, getFormatDescription, getInsertIndex, getSegmentConfigs, getSegmentLabel, hasAnySegmentValue, headerColumnActionValues, isCompleteCoordinate, isSlottedContextValue, matchesMetadata, mgrsSegmentConfigs, parseCoordinatePaste, parseCoordinateStringToSegments, parseDropTarget, sortDirectionValues, useCardInteractions, useColumnInteractions, useCoordinateCopy, useCoordinateField, useCoordinateFieldState, useCoordinateFieldStateContext, useCoordinateFocus, useCoordinatePaste, useDragContext, useDrawerEmit, useFrameDelay, useKanban, useListItemVariant, useTheme, useTimeoutCleanup, useTreeActions, useTreeState, useViewStackEmit, utmSegmentConfigs, validateCoordinateSegments, validateMoveCard };
+export { Accordion, AccordionContext, AccordionGroup, type AccordionGroupProps, AccordionHeader, type AccordionHeaderProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionStyleVariants, AccordionTrigger, type AccordionTriggerProps, ActionBar, type ActionBarProps, type AriaAttributes, type AriaAttributesWithRef, Audio, type AudioProps, Avatar, AvatarContext, type AvatarProps, AvatarProvider, Badge, BadgeContext, type BadgeProps, BadgeProvider, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, Button, ButtonContext, type ButtonProps, ButtonProvider, type ButtonStyleVariants, COORDINATE_EPSILON, COORDINATE_ERROR_MESSAGES, COORDINATE_FORMAT_LABELS, COORDINATE_FORMAT_NAMES, COORDINATE_SYSTEMS, type ChainedEvents, Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext, type CheckboxGroupProps, type CheckboxProps, type ChildrenRenderProps, Chip, ChipContext, type ChipContextValue, ChipList, type ChipListProps, ChipListRenderingContext, type ChipProps, ChipProvider, type ClassNameRenderProps, type ClassNames, ClassificationBadge, ClassificationBadgeContext, type ClassificationBadgeProps, ClassificationBadgeProvider, ClassificationBanner, ClassificationBannerContext, type ClassificationBannerProps, ClassificationBannerProvider, Clock, type ClockProps, CloneAction, ColorPicker, type ColorPickerProps, CombinatorSelector, ComboBoxField, ComboBoxFieldContext, type ComboBoxFieldProps, ComboBoxFieldProvider, CoordinateField, CoordinateFieldContext, type CoordinateFieldProps, CoordinateFieldProvider, type CoordinateFieldState, CoordinateFieldStateContext, CoordinateFieldStateProvider, type CoordinateFormatResult, CoordinateSegment, type CoordinateSegmentProps, type CoordinateSystem, type CoordinateValue, DateField, type DateFieldProps, type DefaultRQBProps, DeferredCollection, type DeferredCollectionProps, DeletableChip, type DeletableChipProps, DetailsList, DetailsListContext, DetailsListLabel, type DetailsListLabelProps, type DetailsListProps, DetailsListProvider, DetailsListValue, type DetailsListValueProps, Dialog, DialogContent, DialogContext, DialogFooter, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, Divider, DividerContext, type DividerProps, DividerProvider, type DragAndDropConfig, DragContext, Drawer, DrawerBack, DrawerClose, type DrawerCloseEvent, type DrawerCloseProps, DrawerContent, DrawerContext, type DrawerContextValue, type DrawerEvent, DrawerEventHandlers, DrawerEventNamespace, DrawerEventTypes, DrawerFooter, DrawerHeader, DrawerHeaderTitle, DrawerLayout, DrawerLayoutMain, type DrawerLayoutProps, DrawerMenu, DrawerMenuItem, type DrawerMenuItemProps, type DrawerMenuProps, type DrawerOpenEvent, DrawerPanel, type DrawerProps, type DrawerTitleProps, type DrawerToggleEvent, DrawerTrigger, type DrawerTriggerProps, DrawerView, type DropTargetInfo, EXPECTED_SEGMENT_COUNTS, type Field, Flashcard, FlashcardAdditionalData, type FlashcardComponentProps, FlashcardContext, FlashcardDetailsLabel, FlashcardDetailsList, type FlashcardDetailsListProps, FlashcardDetailsValue, FlashcardHero, type FlashcardProps, FullscreenButton, type FullscreenButtonProps, GROUP_SEPARATOR, HeaderColumnAction, type HeaderColumnActionKey, Hero, HeroContext, type HeroProps, HeroSubtitle, HeroTitle, Hotkey, HotkeyContext, type HotkeyProps, HotkeyProvider, HotkeySet, Icon, IconContext, type IconProps, IconProvider, Input, InputContext, type InputProps, Kanban, KanbanCard, KanbanCardBody, type KanbanCardData, KanbanCardHeader, KanbanCardHeaderActions, KanbanCardHeaderTitle, type KanbanCardProps, type KanbanColContentActionProps, type KanbanColContentProps, type KanbanColProps, KanbanColumn, KanbanColumnActions, KanbanColumnContainer, KanbanColumnContent, type KanbanColumnData, KanbanColumnHeader, KanbanColumnHeaderActions, KanbanColumnHeaderDragHandle, KanbanColumnHeaderTitle, type KanbanComponentProps, type KanbanContextData, KanbanHeader, KanbanHeaderActions, KanbanHeaderSearch, KanbanHeaderTitle, type KanbanMenuProps, type KanbanProps, KanbanProvider, type KanbanProviderProps, type KanbanSearchProps, Label, LabelContext, type LabelProps, LabelProvider, Lines, type LinesProps, Link, LinkButton, LinkButtonContext, type LinkButtonProps, LinkButtonProvider, type LinkProps, LinkProvider, List, ListContext, ListItem, ListItemContent, type ListItemContentProps, ListItemDescription, type ListItemDescriptionProps, type ListItemProps, ListItemTitle, type ListItemTitleProps, type ListItemVariant, type ListProps, LockAction, MediaControls, MediaControlsContext, type MediaControlsContextValue, type MediaControlsProps, MediaControlsProvider, Menu, MenuContext, MenuItem, MenuItemDescription, MenuItemLabel, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, MenuSubmenu, MenuTrigger, type MoveCard, type MoveCardValidationParams, type MoveCardValidationResult, MuteButton, type MuteButtonProps, Notice, type NoticeActionEvent, type NoticeColor, type NoticeContent, type NoticeDequeueEvent, NoticeEventNamespace, NoticeEventTypes, NoticeIcon, type NoticeIconProps, NoticeList, type NoticeListProps, type NoticeProps, type NoticeQueueEvent, Options, OptionsContext, type OptionsDataItem, OptionsItem, OptionsItemContent, OptionsItemDescription, OptionsItemLabel, type OptionsItemProps, type OptionsProps, OptionsSection, type OptionsSectionProps, Pagination, PaginationContext, type PaginationContextValue, PaginationNext, type PaginationNextProps, PaginationPages, type PaginationPagesProps, PaginationPrev, type PaginationPrevProps, type PaginationProps, type ParsedCoordinateMatch, PlayButton, type PlayButtonProps, PlaybackRateButton, type PlaybackRateButtonProps, Popover, PopoverContent, PopoverFooter, type PopoverProps, PopoverTitle, PopoverTrigger, type PopoverTriggerProps, PortalProvider, type ProviderProps, QueryBuilder, type QueryBuilderContextType, type QueryBuilderProps, type QueryBuilderValueEditors, Radio, RadioContext, RadioGroup, type RadioGroupProps, type RadioProps, RemoveRuleAction, type RenderProps, type RenderPropsChildren, type RenderPropsClassName, type RenderPropsStyle, type RuleGroupType, SearchField, SearchFieldContext, type SearchFieldProps, SearchFieldProvider, SeekButton, type SeekButtonProps, type SegmentConfig, type SegmentType, SelectField, SelectFieldContext, type SelectFieldProps, SelectFieldProvider, SelectableChip, type SelectableChipProps, Sidenav, SidenavAvatar, type SidenavAvatarProps, type SidenavCloseEvent, SidenavContent, type SidenavContentProps, SidenavContext, type SidenavContextValue, type SidenavDividerProps, type SidenavEvent, SidenavEventNamespace, SidenavEventTypes, SidenavFooter, type SidenavFooterProps, SidenavHeader, type SidenavHeaderProps, SidenavItem, type SidenavItemProps, SidenavLink, type SidenavLinkProps, SidenavMenu, SidenavMenuItem, type SidenavMenuItemProps, type SidenavMenuProps, type SidenavOpenEvent, type SidenavProps, type SidenavToggleEvent, SidenavTrigger, type SidenavTriggerProps, type SimpleEvents, Skeleton, type SkeletonProps, Slider, type SliderMarker, type SliderMarkersConfig, type SliderProps, type SlottedValue, SortDirection, type SortDirectionState, StatusIndicator, type StatusIndicatorProps, type StylePropRenderProps, type StyleRenderProps, Switch, SwitchContext, type SwitchProps, SwitchProvider, Tab, TabList, TabPanel, Table, type TableBodyProps, type TableCellProps, TableContext, type TableContextValue, type TableHeaderCellProps, type TableHeaderProps, type TableProps, type TableRowProps, Tabs, TabsContext, type TabsProps, TabsProvider, type TargetedEvents, TextAreaField, TextAreaFieldContext, type TextAreaFieldProps, TextAreaFieldProvider, TextField, TextFieldContext, type TextFieldProps, TextFieldProvider, type ThemeMode, ThemeProvider, TimeDisplay, type TimeDisplayMode, type TimeDisplayProps, TimeField, type TimeFieldProps, TimeRange, type TimeRangeProps, ToggleButton, ToggleButtonContext, type ToggleButtonProps, ToggleButtonProvider, type ToggleButtonStyleVariants, Tooltip, TooltipContext, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, Tree, type TreeActions, TreeContext, type TreeContextValue, type TreeData, TreeItem, TreeItemActions, TreeItemContent, type TreeItemContentProps, type TreeItemContentRenderProps, TreeItemContext, type TreeItemContextValue, TreeItemDescription, TreeItemLabel, TreeItemPrefixIcon, type TreeItemProps, TreeLines, type TreeNode, type TreeNodeBase, type TreeProps, type TreeStyleVariant, type UseCoordinateCopyOptions, type UseCoordinateCopyResult, type UseCoordinateFieldResult, type UseCoordinateFieldStateOptions, type UseCoordinateFieldStateResult, type UseCoordinateFocusOptions, type UseCoordinateFocusResult, type UseCoordinatePasteOptions, type UseCoordinatePasteResult, type UseFrameDelayOptions, type UseFrameDelayResult, type UseTimeoutCleanupResult, type UseTreeActionsOptions, type UseTreeState, type UseTreeStateOptions, Video, type VideoProps, ViewStack, type ViewStackBackEvent, type ViewStackClearEvent, ViewStackContext, type ViewStackContextValue, type ViewStackEvent, ViewStackEventHandlers, ViewStackEventNamespace, ViewStackEventTypes, type ViewStackProps, type ViewStackPushEvent, type ViewStackResetEvent, ViewStackTrigger, type ViewStackTriggerProps, ViewStackView, type ViewStackViewProps, VolumeSlider, type VolumeSliderProps, areAllSegmentsFilled, areCoordinatesEqual, bus, calculateClosestEdge, columnData, convertDDToDisplaySegments, convertDisplaySegmentsToDD, ddSegmentConfigs, ddmSegmentConfigs, deduplicateMatchesByLocation, dmsSegmentConfigs, formatSegmentsToCoordinateString, getAllCoordinateFormats, getEditableSegmentCount, getFormatDescription, getInsertIndex, getSegmentConfigs, getSegmentLabel, hasAnySegmentValue, headerColumnActionValues, isCompleteCoordinate, isSlottedContextValue, matchesMetadata, mgrsSegmentConfigs, parseCoordinatePaste, parseCoordinateStringToSegments, parseDropTarget, sortDirectionValues, useCardInteractions, useColumnInteractions, useCoordinateCopy, useCoordinateField, useCoordinateFieldState, useCoordinateFieldStateContext, useCoordinateFocus, useCoordinatePaste, useDragContext, useDrawerEmit, useFrameDelay, useKanban, useListItemVariant, useMediaControlsDisabled, useMediaProviderGuard, useTheme, useTimeoutCleanup, useTreeActions, useTreeState, useViewStackEmit, utmSegmentConfigs, validateCoordinateSegments, validateMoveCard };