@accelint/design-toolkit 9.4.1 → 9.5.0

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

@@ -0,0 +1,66 @@
+/*
+ * 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 { MediaControlsContextValue } from "./types.js";
+import "client-only";
+import * as react13 from "react";
+import { PropsWithChildren } from "react";
+import * as react_jsx_runtime61 from "react/jsx-runtime";
+
+//#region src/components/media-controls/context.d.ts
+/**
+ * Context for MediaControls component.
+ *
+ * Provides shared configuration values (isDisabled) to all child controls.
+ */
+declare const MediaControlsContext: react13.Context<MediaControlsContextValue>;
+/**
+ * Validates that media-chrome's MediaProvider is present.
+ *
+ * @throws {Error} Throws if called outside a MediaProvider context.
+ */
+declare function useMediaProviderGuard(): void;
+/**
+ * Resolves disabled state from prop or context.
+ *
+ * Returns true if either the prop or context indicates disabled.
+ * A parent context disabling controls cannot be overridden by children.
+ *
+ * @param propIsDisabled - The disabled prop value.
+ * @returns The resolved disabled state.
+ */
+declare function useMediaControlsDisabled(propIsDisabled?: boolean): boolean;
+/**
+ * Provider for MediaControls component.
+ *
+ * Provides shared configuration to all media control children.
+ *
+ * @param props - The provider props.
+ * @param props.children - Child components to receive context.
+ * @param props.isDisabled - Whether controls are disabled.
+ * @returns The context provider wrapping children.
+ *
+ * @example
+ * ```tsx
+ * <MediaControlsProvider isDisabled={false}>
+ *   <PlayButton />
+ *   <MuteButton />
+ * </MediaControlsProvider>
+ * ```
+ */
+declare function MediaControlsProvider({
+  children,
+  isDisabled
+}: PropsWithChildren<Partial<MediaControlsContextValue>>): react_jsx_runtime61.JSX.Element;
+//#endregion
+export { MediaControlsContext, MediaControlsProvider, useMediaControlsDisabled, useMediaProviderGuard };
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1,77 @@
+/*
+ * 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 "client-only";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useMediaStore } from "media-chrome/react/media-store";
+
+//#region src/components/media-controls/context.tsx
+/**
+* Context for MediaControls component.
+*
+* Provides shared configuration values (isDisabled) to all child controls.
+*/
+const MediaControlsContext = createContext({ isDisabled: false });
+/**
+* Validates that media-chrome's MediaProvider is present.
+*
+* @throws {Error} Throws if called outside a MediaProvider context.
+*/
+function useMediaProviderGuard() {
+	if (!useMediaStore()) throw new Error("MediaControls must be used within a MediaProvider from media-chrome.");
+}
+/**
+* Resolves disabled state from prop or context.
+*
+* Returns true if either the prop or context indicates disabled.
+* A parent context disabling controls cannot be overridden by children.
+*
+* @param propIsDisabled - The disabled prop value.
+* @returns The resolved disabled state.
+*/
+function useMediaControlsDisabled(propIsDisabled) {
+	const context = useContext(MediaControlsContext);
+	return Boolean(propIsDisabled || context.isDisabled);
+}
+/**
+* Provider for MediaControls component.
+*
+* Provides shared configuration to all media control children.
+*
+* @param props - The provider props.
+* @param props.children - Child components to receive context.
+* @param props.isDisabled - Whether controls are disabled.
+* @returns The context provider wrapping children.
+*
+* @example
+* ```tsx
+* <MediaControlsProvider isDisabled={false}>
+*   <PlayButton />
+*   <MuteButton />
+* </MediaControlsProvider>
+* ```
+*/
+function MediaControlsProvider({ children, isDisabled = false }) {
+	const value = useMemo(() => ({ isDisabled }), [isDisabled]);
+	return /* @__PURE__ */ jsx(MediaControlsContext.Provider, {
+		value,
+		children
+	});
+}
+
+//#endregion
+export { MediaControlsContext, MediaControlsProvider, useMediaControlsDisabled, useMediaProviderGuard };
+//# sourceMappingURL=context.js.map

package/dist/components/media-controls/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/media-controls/context.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 { useMediaStore } from 'media-chrome/react/media-store';\nimport {\n  createContext,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n} from 'react';\nimport type { MediaControlsContextValue } from './types';\n\n/**\n * Context for MediaControls component.\n *\n * Provides shared configuration values (isDisabled) to all child controls.\n */\nexport const MediaControlsContext = createContext<MediaControlsContextValue>({\n  isDisabled: false,\n});\n\n/**\n * Validates that media-chrome's MediaProvider is present.\n *\n * @throws {Error} Throws if called outside a MediaProvider context.\n */\nexport function useMediaProviderGuard(): void {\n  const store = useMediaStore();\n  if (!store) {\n    throw new Error(\n      'MediaControls must be used within a MediaProvider from media-chrome.',\n    );\n  }\n}\n\n/**\n * Resolves disabled state from prop or context.\n *\n * Returns true if either the prop or context indicates disabled.\n * A parent context disabling controls cannot be overridden by children.\n *\n * @param propIsDisabled - The disabled prop value.\n * @returns The resolved disabled state.\n */\nexport function useMediaControlsDisabled(propIsDisabled?: boolean): boolean {\n  const context = useContext(MediaControlsContext);\n  return Boolean(propIsDisabled || context.isDisabled);\n}\n\n/**\n * Provider for MediaControls component.\n *\n * Provides shared configuration to all media control children.\n *\n * @param props - The provider props.\n * @param props.children - Child components to receive context.\n * @param props.isDisabled - Whether controls are disabled.\n * @returns The context provider wrapping children.\n *\n * @example\n * ```tsx\n * <MediaControlsProvider isDisabled={false}>\n *   <PlayButton />\n *   <MuteButton />\n * </MediaControlsProvider>\n * ```\n */\nexport function MediaControlsProvider({\n  children,\n  isDisabled = false,\n}: PropsWithChildren<Partial<MediaControlsContextValue>>) {\n  const value = useMemo(() => ({ isDisabled }), [isDisabled]);\n\n  return (\n    <MediaControlsContext.Provider value={value}>\n      {children}\n    </MediaControlsContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,uBAAuB,cAAyC,EAC3E,YAAY,OACb,CAAC;;;;;;AAOF,SAAgB,wBAA8B;AAE5C,KAAI,CADU,eAAe,CAE3B,OAAM,IAAI,MACR,uEACD;;;;;;;;;;;AAaL,SAAgB,yBAAyB,gBAAmC;CAC1E,MAAM,UAAU,WAAW,qBAAqB;AAChD,QAAO,QAAQ,kBAAkB,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;AAqBtD,SAAgB,sBAAsB,EACpC,UACA,aAAa,SAC2C;CACxD,MAAM,QAAQ,eAAe,EAAE,YAAY,GAAG,CAAC,WAAW,CAAC;AAE3D,QACE,oBAAC,qBAAqB;EAAgB;EACnC;GAC6B"}

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

@@ -0,0 +1,68 @@
+/*
+ * 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 { MediaControlsProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime62 from "react/jsx-runtime";
+
+//#region src/components/media-controls/index.d.ts
+
+/**
+ * A container for media playback controls.
+ *
+ * Composes media control sub-components into a cohesive control bar.
+ * Must be used within a MediaProvider context from media-chrome.
+ *
+ * @param props - The component props.
+ * @param props.className - CSS class name for the container.
+ * @param props.classNames - Class names for sub-elements.
+ * @param props.children - Media control components to render.
+ * @param props.isDisabled - Disables all child controls via context.
+ * @returns The rendered media controls container.
+ *
+ * @example
+ * ```tsx
+ * <MediaProvider>
+ *   <MediaControls>
+ *     <PlayButton />
+ *     <TimeDisplay mode="current" />
+ *     <TimeRange />
+ *     <MuteButton />
+ *     <VolumeSlider />
+ *   </MediaControls>
+ * </MediaProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Audio player with seek controls
+ * <MediaProvider>
+ *   <MediaControls>
+ *     <SeekButton direction="backward" seekOffset={15} />
+ *     <PlayButton />
+ *     <SeekButton direction="forward" seekOffset={15} />
+ *     <TimeDisplay mode="current" />
+ *     <PlaybackRateButton rates={[0.5, 1, 1.5, 2]} />
+ *   </MediaControls>
+ * </MediaProvider>
+ * ```
+ */
+declare function MediaControls({
+  className,
+  classNames,
+  children,
+  isDisabled,
+  ...rest
+}: MediaControlsProps): react_jsx_runtime62.JSX.Element;
+//#endregion
+export { MediaControls };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,78 @@
+/*
+ * 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, useMediaProviderGuard } from "./context.js";
+import "client-only";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.css";
+
+//#region src/components/media-controls/index.tsx
+/**
+* A container for media playback controls.
+*
+* Composes media control sub-components into a cohesive control bar.
+* Must be used within a MediaProvider context from media-chrome.
+*
+* @param props - The component props.
+* @param props.className - CSS class name for the container.
+* @param props.classNames - Class names for sub-elements.
+* @param props.children - Media control components to render.
+* @param props.isDisabled - Disables all child controls via context.
+* @returns The rendered media controls container.
+*
+* @example
+* ```tsx
+* <MediaProvider>
+*   <MediaControls>
+*     <PlayButton />
+*     <TimeDisplay mode="current" />
+*     <TimeRange />
+*     <MuteButton />
+*     <VolumeSlider />
+*   </MediaControls>
+* </MediaProvider>
+* ```
+*
+* @example
+* ```tsx
+* // Audio player with seek controls
+* <MediaProvider>
+*   <MediaControls>
+*     <SeekButton direction="backward" seekOffset={15} />
+*     <PlayButton />
+*     <SeekButton direction="forward" seekOffset={15} />
+*     <TimeDisplay mode="current" />
+*     <PlaybackRateButton rates={[0.5, 1, 1.5, 2]} />
+*   </MediaControls>
+* </MediaProvider>
+* ```
+*/
+function MediaControls({ className, classNames, children, isDisabled = false, ...rest }) {
+	useMediaProviderGuard();
+	return /* @__PURE__ */ jsx(MediaControlsProvider, {
+		isDisabled,
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: clsx("group/media-controls", styles.mediaControls, className, classNames?.container),
+			"data-disabled": isDisabled || void 0,
+			children
+		})
+	});
+}
+
+//#endregion
+export { MediaControls };
+//# sourceMappingURL=index.js.map

package/dist/components/media-controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/media-controls/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 { MediaControlsProvider, useMediaProviderGuard } from './context';\nimport styles from './styles.module.css';\nimport type { MediaControlsProps } from './types';\n\n/**\n * A container for media playback controls.\n *\n * Composes media control sub-components into a cohesive control bar.\n * Must be used within a MediaProvider context from media-chrome.\n *\n * @param props - The component props.\n * @param props.className - CSS class name for the container.\n * @param props.classNames - Class names for sub-elements.\n * @param props.children - Media control components to render.\n * @param props.isDisabled - Disables all child controls via context.\n * @returns The rendered media controls container.\n *\n * @example\n * ```tsx\n * <MediaProvider>\n *   <MediaControls>\n *     <PlayButton />\n *     <TimeDisplay mode=\"current\" />\n *     <TimeRange />\n *     <MuteButton />\n *     <VolumeSlider />\n *   </MediaControls>\n * </MediaProvider>\n * ```\n *\n * @example\n * ```tsx\n * // Audio player with seek controls\n * <MediaProvider>\n *   <MediaControls>\n *     <SeekButton direction=\"backward\" seekOffset={15} />\n *     <PlayButton />\n *     <SeekButton direction=\"forward\" seekOffset={15} />\n *     <TimeDisplay mode=\"current\" />\n *     <PlaybackRateButton rates={[0.5, 1, 1.5, 2]} />\n *   </MediaControls>\n * </MediaProvider>\n * ```\n */\nexport function MediaControls({\n  className,\n  classNames,\n  children,\n  isDisabled = false,\n  ...rest\n}: MediaControlsProps) {\n  useMediaProviderGuard();\n\n  return (\n    <MediaControlsProvider isDisabled={isDisabled}>\n      <div\n        {...rest}\n        className={clsx(\n          'group/media-controls',\n          styles.mediaControls,\n          className,\n          classNames?.container,\n        )}\n        data-disabled={isDisabled || undefined}\n      >\n        {children}\n      </div>\n    </MediaControlsProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,SAAgB,cAAc,EAC5B,WACA,YACA,UACA,aAAa,OACb,GAAG,QACkB;AACrB,wBAAuB;AAEvB,QACE,oBAAC;EAAkC;YACjC,oBAAC;GACC,GAAI;GACJ,WAAW,KACT,wBACA,OAAO,eACP,WACA,YAAY,UACb;GACD,iBAAe,cAAc;GAE5B;IACG;GACgB"}

package/dist/components/media-controls/mute-button.d.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { MuteButtonProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime63 from "react/jsx-runtime";
+
+//#region src/components/media-controls/mute-button.d.ts
+
+/**
+ * A media control button for mute/unmute functionality.
+ *
+ * Integrates with media-chrome's media store to control media volume muting.
+ * Automatically shows the appropriate icon based on the current mute state.
+ *
+ * @param props - The button props.
+ * @param props.className - CSS class name for the button.
+ * @param props.isDisabled - Whether the button is disabled.
+ * @param props.ref - Ref to the button element.
+ * @returns The rendered mute/unmute button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within MediaProvider
+ * <MediaProvider>
+ *   <MuteButton />
+ * </MediaProvider>
+ * ```
+ */
+declare function MuteButton({
+  className,
+  isDisabled: isDisabledProp,
+  ref,
+  ...rest
+}: MuteButtonProps): react_jsx_runtime63.JSX.Element;
+//#endregion
+export { MuteButton };
+//# sourceMappingURL=mute-button.d.ts.map

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

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { Icon } from "../icon/index.js";
+import { Button } from "../button/index.js";
+import { useMediaControlsDisabled } from "./context.js";
+import "client-only";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MediaActionTypes, VolumeLevels, useMediaDispatch, useMediaSelector } from "media-chrome/react/media-store";
+import { SoundAudible, SoundMute } from "@accelint/icons";
+
+//#region src/components/media-controls/mute-button.tsx
+/**
+* A media control button for mute/unmute functionality.
+*
+* Integrates with media-chrome's media store to control media volume muting.
+* Automatically shows the appropriate icon based on the current mute state.
+*
+* @param props - The button props.
+* @param props.className - CSS class name for the button.
+* @param props.isDisabled - Whether the button is disabled.
+* @param props.ref - Ref to the button element.
+* @returns The rendered mute/unmute button.
+*
+* @example
+* ```tsx
+* // Basic usage within MediaProvider
+* <MediaProvider>
+*   <MuteButton />
+* </MediaProvider>
+* ```
+*/
+function MuteButton({ className, isDisabled: isDisabledProp, ref, ...rest }) {
+	const dispatch = useMediaDispatch();
+	const mediaMuted = useMediaSelector((state) => state.mediaMuted);
+	const mediaVolumeLevel = useMediaSelector((state) => state.mediaVolumeLevel);
+	const isDisabled = useMediaControlsDisabled(isDisabledProp);
+	const isEffectivelyMuted = mediaVolumeLevel === VolumeLevels.OFF;
+	const handleClick = useCallback(() => {
+		dispatch({ type: mediaMuted ? MediaActionTypes.MEDIA_UNMUTE_REQUEST : MediaActionTypes.MEDIA_MUTE_REQUEST });
+	}, [dispatch, mediaMuted]);
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		ref,
+		className,
+		variant: "icon",
+		size: "medium",
+		isDisabled,
+		onPress: handleClick,
+		"aria-label": isEffectivelyMuted ? "Unmute" : "Mute",
+		children: /* @__PURE__ */ jsx(Icon, {
+			size: "medium",
+			children: isEffectivelyMuted ? /* @__PURE__ */ jsx(SoundMute, {}) : /* @__PURE__ */ jsx(SoundAudible, {})
+		})
+	});
+}
+
+//#endregion
+export { MuteButton };
+//# sourceMappingURL=mute-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mute-button.js","names":[],"sources":["../../../src/components/media-controls/mute-button.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { SoundAudible, SoundMute } from '@accelint/icons';\nimport {\n  MediaActionTypes,\n  useMediaDispatch,\n  useMediaSelector,\n  VolumeLevels,\n} from 'media-chrome/react/media-store';\nimport { useCallback } from 'react';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { useMediaControlsDisabled } from './context';\nimport type { MuteButtonProps } from './types';\n\n/**\n * A media control button for mute/unmute functionality.\n *\n * Integrates with media-chrome's media store to control media volume muting.\n * Automatically shows the appropriate icon based on the current mute state.\n *\n * @param props - The button props.\n * @param props.className - CSS class name for the button.\n * @param props.isDisabled - Whether the button is disabled.\n * @param props.ref - Ref to the button element.\n * @returns The rendered mute/unmute button.\n *\n * @example\n * ```tsx\n * // Basic usage within MediaProvider\n * <MediaProvider>\n *   <MuteButton />\n * </MediaProvider>\n * ```\n */\nexport function MuteButton({\n  className,\n  isDisabled: isDisabledProp,\n  ref,\n  ...rest\n}: MuteButtonProps) {\n  const dispatch = useMediaDispatch();\n  const mediaMuted = useMediaSelector((state) => state.mediaMuted);\n  const mediaVolumeLevel = useMediaSelector((state) => state.mediaVolumeLevel);\n  const isDisabled = useMediaControlsDisabled(isDisabledProp);\n\n  // Effective muted state: true when volume is off (either muted or volume=0)\n  const isEffectivelyMuted = mediaVolumeLevel === VolumeLevels.OFF;\n\n  const handleClick = useCallback(() => {\n    const type = mediaMuted\n      ? MediaActionTypes.MEDIA_UNMUTE_REQUEST\n      : MediaActionTypes.MEDIA_MUTE_REQUEST;\n    dispatch({ type });\n  }, [dispatch, mediaMuted]);\n\n  return (\n    <Button\n      {...rest}\n      ref={ref}\n      className={className}\n      variant='icon'\n      size='medium'\n      isDisabled={isDisabled}\n      onPress={handleClick}\n      aria-label={isEffectivelyMuted ? 'Unmute' : 'Mute'}\n    >\n      <Icon size='medium'>\n        {isEffectivelyMuted ? <SoundMute /> : <SoundAudible />}\n      </Icon>\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,WAAW,EACzB,WACA,YAAY,gBACZ,KACA,GAAG,QACe;CAClB,MAAM,WAAW,kBAAkB;CACnC,MAAM,aAAa,kBAAkB,UAAU,MAAM,WAAW;CAChE,MAAM,mBAAmB,kBAAkB,UAAU,MAAM,iBAAiB;CAC5E,MAAM,aAAa,yBAAyB,eAAe;CAG3D,MAAM,qBAAqB,qBAAqB,aAAa;CAE7D,MAAM,cAAc,kBAAkB;AAIpC,WAAS,EAAE,MAHE,aACT,iBAAiB,uBACjB,iBAAiB,oBACJ,CAAC;IACjB,CAAC,UAAU,WAAW,CAAC;AAE1B,QACE,oBAAC;EACC,GAAI;EACC;EACM;EACX,SAAQ;EACR,MAAK;EACO;EACZ,SAAS;EACT,cAAY,qBAAqB,WAAW;YAE5C,oBAAC;GAAK,MAAK;aACR,qBAAqB,oBAAC,cAAY,GAAG,oBAAC,iBAAe;IACjD;GACA"}

package/dist/components/media-controls/play-button.d.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { PlayButtonProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime66 from "react/jsx-runtime";
+
+//#region src/components/media-controls/play-button.d.ts
+
+/**
+ * A media control button for play/pause functionality.
+ *
+ * Integrates with media-chrome's media store to control media playback.
+ * Automatically shows the appropriate icon based on the current playback state.
+ *
+ * @param props - The button props.
+ * @param props.className - CSS class name for the button.
+ * @param props.isDisabled - Whether the button is disabled.
+ * @param props.ref - Ref to the button element.
+ * @returns The rendered play/pause button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within MediaProvider
+ * <MediaProvider>
+ *   <PlayButton />
+ * </MediaProvider>
+ * ```
+ */
+declare function PlayButton({
+  className,
+  isDisabled: isDisabledProp,
+  ref,
+  ...rest
+}: PlayButtonProps): react_jsx_runtime66.JSX.Element;
+//#endregion
+export { PlayButton };
+//# sourceMappingURL=play-button.d.ts.map

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

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { Icon } from "../icon/index.js";
+import { Button } from "../button/index.js";
+import { useMediaControlsDisabled } from "./context.js";
+import "client-only";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MediaActionTypes, useMediaDispatch, useMediaSelector } from "media-chrome/react/media-store";
+import { Pause, Play } from "@accelint/icons";
+
+//#region src/components/media-controls/play-button.tsx
+/**
+* A media control button for play/pause functionality.
+*
+* Integrates with media-chrome's media store to control media playback.
+* Automatically shows the appropriate icon based on the current playback state.
+*
+* @param props - The button props.
+* @param props.className - CSS class name for the button.
+* @param props.isDisabled - Whether the button is disabled.
+* @param props.ref - Ref to the button element.
+* @returns The rendered play/pause button.
+*
+* @example
+* ```tsx
+* // Basic usage within MediaProvider
+* <MediaProvider>
+*   <PlayButton />
+* </MediaProvider>
+* ```
+*/
+function PlayButton({ className, isDisabled: isDisabledProp, ref, ...rest }) {
+	const dispatch = useMediaDispatch();
+	const mediaPaused = useMediaSelector((state) => state.mediaPaused);
+	const isDisabled = useMediaControlsDisabled(isDisabledProp);
+	const handleClick = useCallback(() => {
+		dispatch({ type: mediaPaused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST });
+	}, [dispatch, mediaPaused]);
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		ref,
+		className,
+		variant: "icon",
+		size: "medium",
+		isDisabled,
+		onPress: handleClick,
+		"aria-label": mediaPaused ? "Play" : "Pause",
+		children: /* @__PURE__ */ jsx(Icon, {
+			size: "medium",
+			children: mediaPaused ? /* @__PURE__ */ jsx(Play, {}) : /* @__PURE__ */ jsx(Pause, {})
+		})
+	});
+}
+
+//#endregion
+export { PlayButton };
+//# sourceMappingURL=play-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"play-button.js","names":[],"sources":["../../../src/components/media-controls/play-button.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { Pause, Play } from '@accelint/icons';\nimport {\n  MediaActionTypes,\n  useMediaDispatch,\n  useMediaSelector,\n} from 'media-chrome/react/media-store';\nimport { useCallback } from 'react';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { useMediaControlsDisabled } from './context';\nimport type { PlayButtonProps } from './types';\n\n/**\n * A media control button for play/pause functionality.\n *\n * Integrates with media-chrome's media store to control media playback.\n * Automatically shows the appropriate icon based on the current playback state.\n *\n * @param props - The button props.\n * @param props.className - CSS class name for the button.\n * @param props.isDisabled - Whether the button is disabled.\n * @param props.ref - Ref to the button element.\n * @returns The rendered play/pause button.\n *\n * @example\n * ```tsx\n * // Basic usage within MediaProvider\n * <MediaProvider>\n *   <PlayButton />\n * </MediaProvider>\n * ```\n */\nexport function PlayButton({\n  className,\n  isDisabled: isDisabledProp,\n  ref,\n  ...rest\n}: PlayButtonProps) {\n  const dispatch = useMediaDispatch();\n  const mediaPaused = useMediaSelector((state) => state.mediaPaused);\n  const isDisabled = useMediaControlsDisabled(isDisabledProp);\n\n  const handleClick = useCallback(() => {\n    const type = mediaPaused\n      ? MediaActionTypes.MEDIA_PLAY_REQUEST\n      : MediaActionTypes.MEDIA_PAUSE_REQUEST;\n    dispatch({ type });\n  }, [dispatch, mediaPaused]);\n\n  return (\n    <Button\n      {...rest}\n      ref={ref}\n      className={className}\n      variant='icon'\n      size='medium'\n      isDisabled={isDisabled}\n      onPress={handleClick}\n      aria-label={mediaPaused ? 'Play' : 'Pause'}\n    >\n      <Icon size='medium'>{mediaPaused ? <Play /> : <Pause />}</Icon>\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,WAAW,EACzB,WACA,YAAY,gBACZ,KACA,GAAG,QACe;CAClB,MAAM,WAAW,kBAAkB;CACnC,MAAM,cAAc,kBAAkB,UAAU,MAAM,YAAY;CAClE,MAAM,aAAa,yBAAyB,eAAe;CAE3D,MAAM,cAAc,kBAAkB;AAIpC,WAAS,EAAE,MAHE,cACT,iBAAiB,qBACjB,iBAAiB,qBACJ,CAAC;IACjB,CAAC,UAAU,YAAY,CAAC;AAE3B,QACE,oBAAC;EACC,GAAI;EACC;EACM;EACX,SAAQ;EACR,MAAK;EACO;EACZ,SAAS;EACT,cAAY,cAAc,SAAS;YAEnC,oBAAC;GAAK,MAAK;aAAU,cAAc,oBAAC,SAAO,GAAG,oBAAC,UAAQ;IAAQ;GACxD"}

package/dist/components/media-controls/playback-rate.d.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { PlaybackRateButtonProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime67 from "react/jsx-runtime";
+
+//#region src/components/media-controls/playback-rate.d.ts
+
+/**
+ * A media control button for changing playback speed.
+ *
+ * Integrates with media-chrome's media store to control playback rate.
+ * Cycles through available playback rates on each click.
+ * Shows the current playback rate as text (e.g., '1x', '2x').
+ * Invalid rates (negative, zero, NaN, Infinity) are automatically filtered out.
+ * If all provided rates are invalid, falls back to default rates [1, 2, 3].
+ *
+ * @param props - The button props.
+ * @param props.className - CSS class name for the button.
+ * @param props.rates - Array of playback rates to cycle through (default: [1, 2, 3]). Only positive finite numbers are accepted.
+ * @param props.isDisabled - Whether the button is disabled.
+ * @param props.ref - Ref to the button element.
+ * @returns The rendered playback rate button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within MediaProvider
+ * <MediaProvider>
+ *   <PlaybackRateButton />
+ * </MediaProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom rates
+ * <PlaybackRateButton rates={[0.5, 1, 1.5, 2]} />
+ * ```
+ */
+declare function PlaybackRateButton({
+  className,
+  rates,
+  isDisabled: isDisabledProp,
+  ref,
+  ...rest
+}: PlaybackRateButtonProps): react_jsx_runtime67.JSX.Element;
+//#endregion
+export { PlaybackRateButton };
+//# sourceMappingURL=playback-rate.d.ts.map