@accelint/design-toolkit 9.4.0 → 9.5.0

package/catalog-info.yaml

@@ -12,14 +12,14 @@ metadata:
     Dependencies:
 
     accelint_biome-config@1.1.0, accelint_bus@3.0.2, accelint_core@0.5.2,
-    accelint_design-foundation@2.1.0, accelint_geo@0.5.1, accelint_icons@2.1.2,
+    accelint_design-foundation@2.1.0, accelint_geo@0.5.1, accelint_icons@2.2.0,
     accelint_logger@0.1.5, accelint_postcss-tailwind-css-modules@1.0.1,
     accelint_prettier-config@0.2.1, accelint_temporal@0.1.4,
     accelint_typescript-config@0.1.4, accelint_vitest-config@0.1.6
   annotations:
     backstage.io/edit-url: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/catalog-info.yaml
     backstage.io/techdocs-ref: dir:.
-    package/version: 9.4.0
+    package/version: 9.5.0
     github.com/project-slug: gohypergiant/standard-toolkit
   links:
     - url: https://github.com/gohypergiant/standard-toolkit/tree/main/packages/design-toolkit

package/dist/components/accordion/group.d.ts

@@ -12,7 +12,7 @@
 
 import { AccordionGroupProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/accordion/group.d.ts
 
@@ -57,7 +57,7 @@ declare function AccordionGroup({
   variant,
   isDisabled,
   ...rest
-}: AccordionGroupProps): react_jsx_runtime0.JSX.Element;
+}: AccordionGroupProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { AccordionGroup };
 //# sourceMappingURL=group.d.ts.map

package/dist/components/accordion/header.d.ts

@@ -12,7 +12,7 @@
 
 import { AccordionHeaderProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/components/accordion/header.d.ts
 
@@ -44,7 +44,7 @@ declare function AccordionHeader({
   ref,
   children,
   className
-}: AccordionHeaderProps): react_jsx_runtime0.JSX.Element;
+}: AccordionHeaderProps): react_jsx_runtime14.JSX.Element;
 //#endregion
 export { AccordionHeader };
 //# sourceMappingURL=header.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { AccordionProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/accordion/index.d.ts
 
@@ -75,7 +75,7 @@ import * as react_jsx_runtime1 from "react/jsx-runtime";
 declare function Accordion({
   ref,
   ...props
-}: AccordionProps): react_jsx_runtime1.JSX.Element;
+}: AccordionProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { Accordion };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/panel.d.ts

@@ -12,7 +12,7 @@
 
 import { AccordionPanelProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime148 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/components/accordion/panel.d.ts
 
@@ -47,7 +47,7 @@ declare function AccordionPanel({
   children,
   className,
   ...rest
-}: AccordionPanelProps): react_jsx_runtime148.JSX.Element;
+}: AccordionPanelProps): react_jsx_runtime13.JSX.Element;
 //#endregion
 export { AccordionPanel };
 //# sourceMappingURL=panel.d.ts.map

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

@@ -70,7 +70,7 @@
   }
 
   .trigger {
-    @apply w-full justify-start px-0;
+    @apply w-full justify-start px-0 select-none;
 
     &.cozy {
       @apply gap-s text-header-m;

package/dist/components/accordion/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { AccordionTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime151 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/accordion/trigger.d.ts
 
@@ -42,7 +42,7 @@ declare function AccordionTrigger({
   ref,
   children,
   classNames
-}: AccordionTriggerProps): react_jsx_runtime151.JSX.Element;
+}: AccordionTriggerProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { AccordionTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/action-bar/index.d.ts

@@ -12,7 +12,7 @@
 
 import { ActionBarProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime154 from "react/jsx-runtime";
+import * as react_jsx_runtime93 from "react/jsx-runtime";
 
 //#region src/components/action-bar/index.d.ts
 
@@ -59,7 +59,7 @@ declare function ActionBar({
   elevation,
   size,
   ...rest
-}: ActionBarProps): react_jsx_runtime154.JSX.Element;
+}: ActionBarProps): react_jsx_runtime93.JSX.Element;
 //#endregion
 export { ActionBar };
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,104 @@
+/*
+ * 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 { AudioProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime97 from "react/jsx-runtime";
+
+//#region src/components/audio/index.d.ts
+
+/**
+ * A complete audio player component.
+ *
+ * Combines an HTML audio element with MediaControls to provide a fully-featured
+ * audio player with play/pause, seek, volume control, and playback rate adjustment.
+ *
+ * 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 - Audio 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.title - Title to display (e.g., filename).
+ * @param props.classNames - Class names for sub-elements.
+ * @param props.isDisabled - Disable all audio controls.
+ * @param props.crossOrigin - CORS setting ('anonymous' | 'use-credentials'). Required when
+ *   loading audio from a different origin that requires credentials or when using canvas
+ *   to analyze audio. Without proper CORS configuration, the audio may fail to load.
+ * @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 audio playback finishes.
+ * @param props.onTimeUpdate - Callback invoked during playback with current time in seconds.
+ * @param props.onError - Callback invoked when audio 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 audio player component.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Audio src="audio.mp3" title="My Audio File" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With event callbacks
+ * <Audio
+ *   src="audio.mp3"
+ *   title="My Audio File"
+ *   onPlay={() => console.log('Playing')}
+ *   onPause={() => console.log('Paused')}
+ *   onEnded={() => console.log('Ended')}
+ *   onTimeUpdate={(time) => console.log('Current time:', time)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom controls layout
+ * <Audio src="audio.mp3">
+ *   <PlayButton />
+ *   <TimeRange />
+ * </Audio>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Loading audio from external origin (requires CORS)
+ * <Audio
+ *   src="https://example.com/audio.mp3"
+ *   crossOrigin="anonymous"
+ *   onError={(error) => {
+ *     // Handle CORS or loading errors
+ *     console.error('Failed to load audio:', error);
+ *   }}
+ * />
+ * ```
+ */
+declare function Audio({
+  classNames,
+  isDisabled,
+  noHotkeys,
+  hotkeys,
+  noVolumePref,
+  noMutedPref,
+  lang,
+  ...rest
+}: AudioProps): react_jsx_runtime97.JSX.Element;
+//#endregion
+export { Audio };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/audio/index.js

@@ -0,0 +1,242 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { MediaControlsProvider } 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 "client-only";
+import { 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 } from "media-chrome/react/media-store";
+import styles from "./styles.module.css";
+
+//#region src/components/audio/index.tsx
+const logger = getLogger({
+	enabled: true,
+	level: "error",
+	prefix: "[Audio]",
+	pretty: true
+});
+/**
+* Internal component that renders within MediaProvider context.
+*
+* This component is separated from the main Audio component to allow use of
+* media-chrome hooks (useMediaRef) that require MediaProvider context.
+* The outer Audio component wraps everything in MediaProvider, then AudioInner
+* handles the actual audio element and controls rendering.
+*
+* @param props - The component props.
+* @param props.src - Audio source URL.
+* @param props.title - Title to display (e.g., filename).
+* @param props.classNames - Class names for sub-elements.
+* @param props.children - Custom controls (replaces default layout).
+* @param props.autoPlay - Whether to autoplay the audio.
+* @param props.loop - Whether to loop the audio.
+* @param props.muted - Whether the audio starts muted.
+* @param props.preload - Audio preload strategy.
+* @param props.crossOrigin - CORS setting for the audio element.
+* @param props.isDisabled - Whether to disable all audio controls.
+* @param props.onEnded - Callback when audio ends.
+* @param props.onTimeUpdate - Callback when playback time updates.
+* @param props.onLoadedMetadata - Callback when metadata is loaded.
+* @param props.onPlay - Callback when audio starts playing.
+* @param props.onPause - Callback when audio is paused.
+* @param props.onError - Callback when an error occurs.
+* @param props.playbackRates - Custom playback rate options.
+* @returns The audio element with controls.
+*/
+function AudioInner({ src, title, children, classNames, autoPlay, loop, muted, preload = "metadata", crossOrigin, isDisabled: isDisabledProp, onEnded, onTimeUpdate, onLoadedMetadata, onPlay, onPause, onError, playbackRates }) {
+	const mediaRef = useMediaRef();
+	const [errorMessage, setErrorMessage] = useState("");
+	useEffect(() => {
+		setErrorMessage("");
+	}, [src]);
+	const isDisabled = isDisabledProp === true || errorMessage !== "";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("audio", {
+		ref: mediaRef,
+		slot: "media",
+		className: styles.audio,
+		"data-testid": "audio-element",
+		autoPlay,
+		loop,
+		muted,
+		preload,
+		crossOrigin,
+		onEnded: () => onEnded?.(),
+		onTimeUpdate: (e) => {
+			const time = e.currentTarget.currentTime;
+			if (Number.isFinite(time)) onTimeUpdate?.(time);
+		},
+		onLoadedMetadata: (e) => onLoadedMetadata?.(e),
+		onPlay: (e) => onPlay?.(e),
+		onPause: (e) => onPause?.(e),
+		onError: (e) => {
+			const mediaError = e.currentTarget.error;
+			logger.withContext({ src }).withError(mediaError).error("Failed to load audio");
+			setErrorMessage((mediaError && formatError(mediaError)?.message) ?? "Unable to load audio file");
+			if (mediaError) onError?.(mediaError);
+		},
+		children: /* @__PURE__ */ jsx("source", { src })
+	}), /* @__PURE__ */ jsx(MediaControlsProvider, {
+		isDisabled,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			title && /* @__PURE__ */ jsx("div", {
+				className: clsx(styles.titleRow, classNames?.title),
+				children: title
+			}),
+			errorMessage && /* @__PURE__ */ jsx("div", {
+				className: styles.errorMessage,
+				children: errorMessage
+			}),
+			/* @__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__ */ jsx("div", {
+							className: styles.rightGroup,
+							children: /* @__PURE__ */ jsx(PlaybackRateButton, { rates: playbackRates })
+						})
+					]
+				})]
+			})
+		] })
+	})] });
+}
+/**
+* A complete audio player component.
+*
+* Combines an HTML audio element with MediaControls to provide a fully-featured
+* audio player with play/pause, seek, volume control, and playback rate adjustment.
+*
+* 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 - Audio 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.title - Title to display (e.g., filename).
+* @param props.classNames - Class names for sub-elements.
+* @param props.isDisabled - Disable all audio controls.
+* @param props.crossOrigin - CORS setting ('anonymous' | 'use-credentials'). Required when
+*   loading audio from a different origin that requires credentials or when using canvas
+*   to analyze audio. Without proper CORS configuration, the audio may fail to load.
+* @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 audio playback finishes.
+* @param props.onTimeUpdate - Callback invoked during playback with current time in seconds.
+* @param props.onError - Callback invoked when audio 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 audio player component.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Audio src="audio.mp3" title="My Audio File" />
+* ```
+*
+* @example
+* ```tsx
+* // With event callbacks
+* <Audio
+*   src="audio.mp3"
+*   title="My Audio File"
+*   onPlay={() => console.log('Playing')}
+*   onPause={() => console.log('Paused')}
+*   onEnded={() => console.log('Ended')}
+*   onTimeUpdate={(time) => console.log('Current time:', time)}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // Custom controls layout
+* <Audio src="audio.mp3">
+*   <PlayButton />
+*   <TimeRange />
+* </Audio>
+* ```
+*
+* @example
+* ```tsx
+* // Loading audio from external origin (requires CORS)
+* <Audio
+*   src="https://example.com/audio.mp3"
+*   crossOrigin="anonymous"
+*   onError={(error) => {
+*     // Handle CORS or loading errors
+*     console.error('Failed to load audio:', error);
+*   }}
+* />
+* ```
+*/
+function Audio({ classNames, isDisabled, noHotkeys, hotkeys, noVolumePref, noMutedPref, lang, ...rest }) {
+	return /* @__PURE__ */ jsx(MediaProvider, { children: /* @__PURE__ */ jsx(MediaController, {
+		className: clsx("group/audio", styles.container, classNames?.container),
+		audio: true,
+		"data-disabled": isDisabled || void 0,
+		noHotkeys,
+		hotkeys,
+		noVolumePref,
+		noMutedPref,
+		lang,
+		children: /* @__PURE__ */ jsx(AudioInner, {
+			...rest,
+			classNames,
+			isDisabled
+		})
+	}) });
+}
+
+//#endregion
+export { Audio };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/audio/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 { getLogger } from '@accelint/logger/default';\nimport { formatError } from 'media-chrome/dist/labels/labels.js';\nimport { MediaController } from 'media-chrome/react';\nimport { MediaProvider, useMediaRef } from 'media-chrome/react/media-store';\nimport { useEffect, useState } from 'react';\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 { AudioProps } from './types';\n\nconst logger = getLogger({\n  enabled: true,\n  level: 'error',\n  prefix: '[Audio]',\n  pretty: true,\n});\n\n/**\n * Internal component that renders within MediaProvider context.\n *\n * This component is separated from the main Audio component to allow use of\n * media-chrome hooks (useMediaRef) that require MediaProvider context.\n * The outer Audio component wraps everything in MediaProvider, then AudioInner\n * handles the actual audio element and controls rendering.\n *\n * @param props - The component props.\n * @param props.src - Audio source URL.\n * @param props.title - Title to display (e.g., filename).\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 audio.\n * @param props.loop - Whether to loop the audio.\n * @param props.muted - Whether the audio starts muted.\n * @param props.preload - Audio preload strategy.\n * @param props.crossOrigin - CORS setting for the audio element.\n * @param props.isDisabled - Whether to disable all audio controls.\n * @param props.onEnded - Callback when audio ends.\n * @param props.onTimeUpdate - Callback when playback time updates.\n * @param props.onLoadedMetadata - Callback when metadata is loaded.\n * @param props.onPlay - Callback when audio starts playing.\n * @param props.onPause - Callback when audio is paused.\n * @param props.onError - Callback when an error occurs.\n * @param props.playbackRates - Custom playback rate options.\n * @returns The audio element with controls.\n */\nfunction AudioInner({\n  src,\n  title,\n  children,\n  classNames,\n  autoPlay,\n  loop,\n  muted,\n  preload = 'metadata',\n  crossOrigin,\n  isDisabled: isDisabledProp,\n  onEnded,\n  onTimeUpdate,\n  onLoadedMetadata,\n  onPlay,\n  onPause,\n  onError,\n  playbackRates,\n}: AudioProps) {\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 audio source changes\n  useEffect(() => {\n    setErrorMessage('');\n  }, [src]);\n\n  const hasError = errorMessage !== '';\n  const isDisabled = isDisabledProp === true || hasError;\n\n  return (\n    <>\n      <audio\n        ref={mediaRef}\n        slot='media'\n        className={styles.audio}\n        data-testid='audio-element'\n        autoPlay={autoPlay}\n        loop={loop}\n        muted={muted}\n        preload={preload}\n        crossOrigin={crossOrigin}\n        onEnded={() => onEnded?.()}\n        onTimeUpdate={(e) => {\n          const time = e.currentTarget.currentTime;\n          if (Number.isFinite(time)) {\n            onTimeUpdate?.(time);\n          }\n        }}\n        onLoadedMetadata={(e) => onLoadedMetadata?.(e)}\n        onPlay={(e) => onPlay?.(e)}\n        onPause={(e) => onPause?.(e)}\n        onError={(e) => {\n          const mediaError = e.currentTarget.error;\n          logger\n            .withContext({ src })\n            .withError(mediaError)\n            .error('Failed to load audio');\n          setErrorMessage(\n            (mediaError && formatError(mediaError)?.message) ??\n              'Unable to load audio file',\n          );\n          if (mediaError) {\n            onError?.(mediaError);\n          }\n        }}\n      >\n        <source src={src} />\n      </audio>\n\n      <MediaControlsProvider isDisabled={isDisabled}>\n        {children ?? (\n          <>\n            {title && (\n              <div className={clsx(styles.titleRow, classNames?.title)}>\n                {title}\n              </div>\n            )}\n\n            {errorMessage && (\n              <div className={styles.errorMessage}>{errorMessage}</div>\n            )}\n\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                </div>\n              </div>\n            </div>\n          </>\n        )}\n      </MediaControlsProvider>\n    </>\n  );\n}\n\n/**\n * A complete audio player component.\n *\n * Combines an HTML audio element with MediaControls to provide a fully-featured\n * audio player with play/pause, seek, volume control, and playback rate adjustment.\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 - Audio 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.title - Title to display (e.g., filename).\n * @param props.classNames - Class names for sub-elements.\n * @param props.isDisabled - Disable all audio controls.\n * @param props.crossOrigin - CORS setting ('anonymous' | 'use-credentials'). Required when\n *   loading audio from a different origin that requires credentials or when using canvas\n *   to analyze audio. Without proper CORS configuration, the audio may fail to load.\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 audio playback finishes.\n * @param props.onTimeUpdate - Callback invoked during playback with current time in seconds.\n * @param props.onError - Callback invoked when audio 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 audio player component.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Audio src=\"audio.mp3\" title=\"My Audio File\" />\n * ```\n *\n * @example\n * ```tsx\n * // With event callbacks\n * <Audio\n *   src=\"audio.mp3\"\n *   title=\"My Audio File\"\n *   onPlay={() => console.log('Playing')}\n *   onPause={() => console.log('Paused')}\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 * <Audio src=\"audio.mp3\">\n *   <PlayButton />\n *   <TimeRange />\n * </Audio>\n * ```\n *\n * @example\n * ```tsx\n * // Loading audio from external origin (requires CORS)\n * <Audio\n *   src=\"https://example.com/audio.mp3\"\n *   crossOrigin=\"anonymous\"\n *   onError={(error) => {\n *     // Handle CORS or loading errors\n *     console.error('Failed to load audio:', error);\n *   }}\n * />\n * ```\n */\nexport function Audio({\n  classNames,\n  isDisabled,\n  noHotkeys,\n  hotkeys,\n  noVolumePref,\n  noMutedPref,\n  lang,\n  ...rest\n}: AudioProps) {\n  return (\n    <MediaProvider>\n      <MediaController\n        className={clsx('group/audio', styles.container, classNames?.container)}\n        audio\n        data-disabled={isDisabled || undefined}\n        noHotkeys={noHotkeys}\n        hotkeys={hotkeys}\n        noVolumePref={noVolumePref}\n        noMutedPref={noMutedPref}\n        lang={lang}\n      >\n        <AudioInner {...rest} classNames={classNames} isDisabled={isDisabled} />\n      </MediaController>\n    </MediaProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,SAAS,UAAU;CACvB,SAAS;CACT,OAAO;CACP,QAAQ;CACR,QAAQ;CACT,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BF,SAAS,WAAW,EAClB,KACA,OACA,UACA,YACA,UACA,MACA,OACA,UAAU,YACV,aACA,YAAY,gBACZ,SACA,cACA,kBACA,QACA,SACA,SACA,iBACa;CACb,MAAM,WAAW,aAAa;CAC9B,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;AAG5D,iBAAgB;AACd,kBAAgB,GAAG;IAClB,CAAC,IAAI,CAAC;CAGT,MAAM,aAAa,mBAAmB,QADrB,iBAAiB;AAGlC,QACE,8CACE,oBAAC;EACC,KAAK;EACL,MAAK;EACL,WAAW,OAAO;EAClB,eAAY;EACF;EACJ;EACC;EACE;EACI;EACb,eAAe,WAAW;EAC1B,eAAe,MAAM;GACnB,MAAM,OAAO,EAAE,cAAc;AAC7B,OAAI,OAAO,SAAS,KAAK,CACvB,gBAAe,KAAK;;EAGxB,mBAAmB,MAAM,mBAAmB,EAAE;EAC9C,SAAS,MAAM,SAAS,EAAE;EAC1B,UAAU,MAAM,UAAU,EAAE;EAC5B,UAAU,MAAM;GACd,MAAM,aAAa,EAAE,cAAc;AACnC,UACG,YAAY,EAAE,KAAK,CAAC,CACpB,UAAU,WAAW,CACrB,MAAM,uBAAuB;AAChC,oBACG,cAAc,YAAY,WAAW,EAAE,YACtC,4BACH;AACD,OAAI,WACF,WAAU,WAAW;;YAIzB,oBAAC,YAAY,MAAO;GACd,EAER,oBAAC;EAAkC;YAChC,YACC;GACG,SACC,oBAAC;IAAI,WAAW,KAAK,OAAO,UAAU,YAAY,MAAM;cACrD;KACG;GAGP,gBACC,oBAAC;IAAI,WAAW,OAAO;cAAe;KAAmB;GAG3D,qBAAC;IAAI,WAAW,KAAK,OAAO,UAAU,YAAY,cAAc;eAC9D,qBAAC;KAAI,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;;MACvD,oBAAC,eAAY,MAAK,YAAY;MAC9B,oBAAC,cAAY;MACb,oBAAC,eAAY,MAAK,aAAa;;MAC3B,EAEN,qBAAC;KACC,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;;MAE5D,oBAAC;OAAI,WAAW,OAAO;iBACrB,qBAAC;QAAI,WAAW,OAAO;mBACrB,oBAAC,eAAa,EACd,oBAAC,iBAAe;SACZ;QACF;MACN,qBAAC;OAAI,WAAW,OAAO;;QACrB,oBAAC,cAAW,WAAU,aAAa;QACnC,oBAAC,eAAa;QACd,oBAAC,cAAW,WAAU,YAAY;;QAC9B;MACN,oBAAC;OAAI,WAAW,OAAO;iBACrB,oBAAC,sBAAmB,OAAO,gBAAiB;QACxC;;MACF;KACF;MACL;GAEiB,IACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EP,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;EACA,iBAAe,cAAc;EAClB;EACF;EACK;EACD;EACP;YAEN,oBAAC;GAAW,GAAI;GAAkB;GAAwB;IAAc;GACxD,GACJ"}

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

@@ -0,0 +1,77 @@
+/*
+ * 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 p-s space-y-s flex w-full flex-col;
+    min-width: 270px;
+
+    /* 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;
+    }
+  }
+
+  .audio {
+    @apply hidden;
+  }
+
+  .titleRow {
+    @apply fg-primary-bold text-header-l text-center;
+  }
+
+  .errorMessage {
+    @apply text-body-m fg-serious-bold text-center;
+  }
+
+  .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 justify-end;
+  }
+
+  .volumeGroup {
+    @apply gap-s flex;
+  }
+
+  .playbackGroup {
+    @apply gap-xs flex items-center justify-center;
+  }
+}

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

@@ -0,0 +1,45 @@
+/*
+ * 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/audio/types.d.ts
+type AudioProps = Omit<ComponentPropsWithRef<'audio'>, 'children' | 'onEnded' | 'onTimeUpdate' | 'onError' | 'src' | 'className'> & Pick<ComponentProps<typeof MediaController>, 'noHotkeys' | 'hotkeys' | 'noVolumePref' | 'noMutedPref' | 'lang'> & {
+  /** Audio source URL */
+  src: string;
+  /** Title to display (e.g., filename) */
+  title?: string;
+  /** Disable all audio controls */
+  isDisabled?: boolean;
+  /** Custom controls (replaces default layout) */
+  children?: ReactNode;
+  /** Class names for sub-elements */
+  classNames?: {
+    container?: string;
+    title?: string;
+    mediaControls?: string;
+    timeRow?: string;
+    controlsRow?: string;
+  };
+  /** Callback when audio ends */
+  onEnded?: () => void;
+  /** Callback when playback time updates */
+  onTimeUpdate?: (currentTime: number) => void;
+  /** Callback when audio fails to load or encounters an error */
+  onError?: (error: MediaError) => void;
+  /** Custom playback rate options (default: [1, 2, 3]) */
+  playbackRates?: number[];
+};
+//#endregion
+export { AudioProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/audio/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.
+ */
+