@hanifhan1f/vidstack-react 1.12.13

package/src/components/layouts/default/ui/menus/audio-menu.tsx

@@ -0,0 +1,167 @@
+import * as React from 'react';
+
+import { isArray } from 'maverick.js/std';
+
+import { useAudioOptions } from '../../../../../hooks/options/use-audio-options';
+import { useMediaState } from '../../../../../hooks/use-media-state';
+import * as Menu from '../../../../ui/menu';
+import * as AudioGainSlider from '../../../../ui/sliders/audio-gain-slider';
+import { useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
+import { slot, type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
+import { DefaultMenuButton, DefaultMenuSection } from './items/menu-items';
+import { DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps } from './items/menu-slider';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAudioMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+interface DefaultAudioMenuProps {
+  slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+
+function DefaultAudioMenu({ slots }: DefaultAudioMenuProps) {
+  const label = useDefaultLayoutWord('Audio'),
+    $canSetAudioGain = useMediaState('canSetAudioGain'),
+    $audioTracks = useMediaState('audioTracks'),
+    { noAudioGain, icons: Icons } = useDefaultLayoutContext(),
+    hasGainSlider = $canSetAudioGain && !noAudioGain,
+    $disabled = !hasGainSlider && $audioTracks.length <= 1;
+
+  if ($disabled) return null;
+
+  return (
+    <Menu.Root className="vds-audio-menu vds-menu">
+      <DefaultMenuButton label={label} Icon={Icons.Menu.Audio} />
+      <Menu.Content className="vds-menu-items">
+        {slot(slots, 'audioMenuItemsStart', null)}
+        <DefaultAudioTracksMenu />
+        {hasGainSlider ? <DefaultAudioBoostMenuSection /> : null}
+        {slot(slots, 'audioMenuItemsEnd', null)}
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+DefaultAudioMenu.displayName = 'DefaultAudioMenu';
+export { DefaultAudioMenu };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAudioBoostSection
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultAudioBoostMenuSection() {
+  const $audioGain = useMediaState('audioGain'),
+    label = useDefaultLayoutWord('Boost'),
+    value = Math.round((($audioGain ?? 1) - 1) * 100) + '%',
+    $canSetAudioGain = useMediaState('canSetAudioGain'),
+    { noAudioGain, icons: Icons } = useDefaultLayoutContext(),
+    $disabled = !$canSetAudioGain || noAudioGain,
+    min = useGainMin(),
+    max = useGainMax();
+
+  if ($disabled) return null;
+
+  return (
+    <DefaultMenuSection label={label} value={value}>
+      <DefaultMenuSliderItem
+        UpIcon={Icons.Menu.AudioBoostUp}
+        DownIcon={Icons.Menu.AudioBoostDown}
+        isMin={(($audioGain ?? 1) - 1) * 100 <= min}
+        isMax={(($audioGain ?? 1) - 1) * 100 === max}
+      >
+        <DefaultAudioGainSlider />
+      </DefaultMenuSliderItem>
+    </DefaultMenuSection>
+  );
+}
+
+DefaultAudioBoostMenuSection.displayName = 'DefaultAudioBoostMenuSection';
+
+function useGainMin() {
+  const { audioGains } = useDefaultLayoutContext(),
+    min = isArray(audioGains) ? audioGains[0] : audioGains?.min;
+  return min ?? 0;
+}
+
+function useGainMax() {
+  const { audioGains } = useDefaultLayoutContext(),
+    max = isArray(audioGains) ? audioGains[audioGains.length - 1] : audioGains?.max;
+  return max ?? 300;
+}
+
+function useGainStep() {
+  const { audioGains } = useDefaultLayoutContext(),
+    step = isArray(audioGains) ? audioGains[1] - audioGains[0] : audioGains?.step;
+  return step || 25;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAudioGainSlider
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultAudioGainSlider() {
+  const label = useDefaultLayoutWord('Audio Boost'),
+    min = useGainMin(),
+    max = useGainMax(),
+    step = useGainStep();
+  return (
+    <AudioGainSlider.Root
+      className="vds-audio-gain-slider vds-slider"
+      aria-label={label}
+      min={min}
+      max={max}
+      step={step}
+      keyStep={step}
+    >
+      <DefaultSliderParts />
+      <DefaultSliderSteps />
+    </AudioGainSlider.Root>
+  );
+}
+
+DefaultAudioGainSlider.displayName = 'DefaultAudioGainSlider';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAudioTracksMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultAudioTracksMenu() {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    label = useDefaultLayoutWord('Track'),
+    defaultText = useDefaultLayoutWord('Default'),
+    $track = useMediaState('audioTrack'),
+    options = useAudioOptions();
+
+  if (options.disabled) return null;
+
+  return (
+    <Menu.Root className="vds-audio-track-menu vds-menu">
+      <DefaultMenuButton
+        label={label}
+        hint={$track?.label ?? defaultText}
+        disabled={options.disabled}
+        Icon={Icons.Menu.Audio}
+      />
+      <Menu.Content className="vds-menu-items">
+        <Menu.RadioGroup
+          className="vds-audio-radio-group vds-radio-group"
+          value={options.selectedValue}
+        >
+          {options.map(({ label, value, select }) => (
+            <Menu.Radio
+              className="vds-audio-radio vds-radio"
+              value={value}
+              onSelect={select}
+              key={value}
+            >
+              <Icons.Menu.RadioCheck className="vds-icon" />
+              <span className="vds-radio-label">{label}</span>
+            </Menu.Radio>
+          ))}
+        </Menu.RadioGroup>
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+DefaultAudioTracksMenu.displayName = 'DefaultAudioTracksMenu';

package/src/components/layouts/default/ui/menus/captions-menu.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import { useCaptionOptions } from '../../../../../hooks/options/use-caption-options';
+import * as Menu from '../../../../ui/menu';
+import { useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
+import { slot, type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
+import { DefaultMenuButton } from './items/menu-items';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultCaptionMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+interface DefaultCaptionMenuProps {
+  slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+
+function DefaultCaptionMenu({ slots }: DefaultCaptionMenuProps) {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    label = useDefaultLayoutWord('Captions'),
+    offText = useDefaultLayoutWord('Off'),
+    options = useCaptionOptions({ off: offText }),
+    hint = options.selectedTrack?.label ?? offText;
+
+  if (options.disabled) return null;
+
+  return (
+    <Menu.Root className="vds-captions-menu vds-menu">
+      <DefaultMenuButton
+        label={label}
+        hint={hint}
+        disabled={options.disabled}
+        Icon={Icons.Menu.Captions}
+      />
+      <Menu.Content className="vds-menu-items">
+        {slot(slots, 'captionsMenuItemsStart', null)}
+
+        <Menu.RadioGroup
+          className="vds-captions-radio-group vds-radio-group"
+          value={options.selectedValue}
+        >
+          {options.map(({ label, value, select }) => (
+            <Menu.Radio
+              className="vds-caption-radio vds-radio"
+              value={value}
+              onSelect={select}
+              key={value}
+            >
+              <Icons.Menu.RadioCheck className="vds-icon" />
+              <span className="vds-radio-label">{label}</span>
+            </Menu.Radio>
+          ))}
+        </Menu.RadioGroup>
+
+        {slot(slots, 'captionsMenuItemsEnd', null)}
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+DefaultCaptionMenu.displayName = 'DefaultCaptionMenu';
+export { DefaultCaptionMenu };

package/src/components/layouts/default/ui/menus/chapters-menu.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+
+import { useSignal } from 'maverick.js/react';
+import { flushSync } from 'react-dom';
+
+import { useChapterOptions } from '../../../../../hooks/options/use-chapter-options';
+import { useMediaState } from '../../../../../hooks/use-media-state';
+import { isRemotionSrc } from '../../../../../providers/remotion/type-check';
+import * as Menu from '../../../../ui/menu';
+import * as Thumbnail from '../../../../ui/thumbnail';
+import { RemotionThumbnail } from '../../../remotion-ui';
+import { useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
+import { useColorSchemeClass } from '../../hooks';
+import { DefaultTooltip } from '../tooltip';
+import type { DefaultMediaMenuProps } from './settings-menu';
+import { useParentDialogEl } from './utils';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultChaptersMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultChaptersMenu({ tooltip, placement, portalClass = '' }: DefaultMediaMenuProps) {
+  const {
+      showMenuDelay,
+      noModal,
+      isSmallLayout,
+      icons: Icons,
+      menuGroup,
+      menuContainer,
+      colorScheme,
+    } = useDefaultLayoutContext(),
+    chaptersText = useDefaultLayoutWord('Chapters'),
+    options = useChapterOptions(),
+    disabled = !options.length,
+    { thumbnails } = useDefaultLayoutContext(),
+    $src = useMediaState('currentSrc'),
+    $viewType = useMediaState('viewType'),
+    $offset = !isSmallLayout && menuGroup === 'bottom' && $viewType === 'video' ? 26 : 0,
+    $RemotionThumbnail = useSignal(RemotionThumbnail),
+    colorSchemeClass = useColorSchemeClass(colorScheme),
+    [isOpen, setIsOpen] = React.useState(false),
+    dialogEl = useParentDialogEl();
+
+  if (disabled) return null;
+
+  function onOpen() {
+    flushSync(() => {
+      setIsOpen(true);
+    });
+  }
+
+  function onClose() {
+    setIsOpen(false);
+  }
+
+  const Content = (
+    <Menu.Content
+      className="vds-chapters-menu-items vds-menu-items"
+      placement={placement}
+      offset={$offset}
+    >
+      {isOpen ? (
+        <Menu.RadioGroup
+          className="vds-chapters-radio-group vds-radio-group"
+          value={options.selectedValue}
+          data-thumbnails={thumbnails ? '' : null}
+        >
+          {options.map(
+            ({ cue, label, value, startTimeText, durationText, select, setProgressVar }) => (
+              <Menu.Radio
+                className="vds-chapter-radio vds-radio"
+                value={value}
+                key={value}
+                onSelect={select}
+                ref={setProgressVar}
+              >
+                {thumbnails ? (
+                  <Thumbnail.Root src={thumbnails} className="vds-thumbnail" time={cue.startTime}>
+                    <Thumbnail.Img />
+                  </Thumbnail.Root>
+                ) : $RemotionThumbnail && isRemotionSrc($src) ? (
+                  <$RemotionThumbnail className="vds-thumbnail" frame={cue.startTime * $src.fps!} />
+                ) : null}
+                <div className="vds-chapter-radio-content">
+                  <span className="vds-chapter-radio-label">{label}</span>
+                  <span className="vds-chapter-radio-start-time">{startTimeText}</span>
+                  <span className="vds-chapter-radio-duration">{durationText}</span>
+                </div>
+              </Menu.Radio>
+            ),
+          )}
+        </Menu.RadioGroup>
+      ) : null}
+    </Menu.Content>
+  );
+
+  return (
+    <Menu.Root
+      className="vds-chapters-menu vds-menu"
+      showDelay={showMenuDelay}
+      onOpen={onOpen}
+      onClose={onClose}
+    >
+      <DefaultTooltip content={chaptersText} placement={tooltip}>
+        <Menu.Button
+          className="vds-menu-button vds-button"
+          disabled={disabled}
+          aria-label={chaptersText}
+        >
+          <Icons.Menu.Chapters className="vds-icon" />
+        </Menu.Button>
+      </DefaultTooltip>
+      {noModal || !isSmallLayout ? (
+        Content
+      ) : (
+        <Menu.Portal
+          container={menuContainer ?? dialogEl}
+          className={portalClass + (colorSchemeClass ? ` ${colorSchemeClass}` : '')}
+          disabled="fullscreen"
+          data-sm={isSmallLayout ? '' : null}
+          data-lg={!isSmallLayout ? '' : null}
+          data-size={isSmallLayout ? 'sm' : 'lg'}
+        >
+          {Content}
+        </Menu.Portal>
+      )}
+    </Menu.Root>
+  );
+}
+
+DefaultChaptersMenu.displayName = 'DefaultChaptersMenu';
+export { DefaultChaptersMenu };

package/src/components/layouts/default/ui/menus/font-menu.tsx

@@ -0,0 +1,331 @@
+import * as React from 'react';
+
+import { useSignal } from 'maverick.js/react';
+import { camelToKebabCase } from 'maverick.js/std';
+import {
+  FONT_COLOR_OPTION,
+  FONT_FAMILY_OPTION,
+  FONT_OPACITY_OPTION,
+  FONT_SIGNALS,
+  FONT_SIZE_OPTION,
+  FONT_TEXT_SHADOW_OPTION,
+  onFontReset,
+  type DefaultFontSettingProps,
+  type FontRadioOption,
+  type FontSliderOption,
+} from 'vidstack/exports/font.ts';
+
+import { useMediaPlayer } from '../../../../../hooks/use-media-player';
+import { useMediaState } from '../../../../../hooks/use-media-state';
+import * as Menu from '../../../../ui/menu';
+import * as Slider from '../../../../ui/sliders/slider';
+import { i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
+import type { DefaultLayoutIcon } from '../../icons';
+import {
+  createRadioOptions,
+  DefaultMenuButton,
+  DefaultMenuItem,
+  DefaultMenuRadioGroup,
+  DefaultMenuSection,
+} from './items/menu-items';
+import { DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps } from './items/menu-slider';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultFontMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultFontMenu() {
+  const label = useDefaultLayoutWord('Caption Styles'),
+    $hasCaptions = useMediaState('hasCaptions'),
+    fontSectionLabel = useDefaultLayoutWord('Font'),
+    textSectionLabel = useDefaultLayoutWord('Text'),
+    textBgSectionLabel = useDefaultLayoutWord('Text Background'),
+    displayBgSectionLabel = useDefaultLayoutWord('Display Background');
+
+  if (!$hasCaptions) return null;
+
+  return (
+    <Menu.Root className="vds-font-menu vds-menu">
+      <DefaultMenuButton label={label} />
+      <Menu.Content className="vds-font-style-items vds-menu-items">
+        <DefaultMenuSection label={fontSectionLabel}>
+          <DefaultFontFamilyMenu />
+          <DefaultFontSizeSlider />
+        </DefaultMenuSection>
+
+        <DefaultMenuSection label={textSectionLabel}>
+          <DefaultTextColorInput />
+          <DefaultTextShadowMenu />
+          <DefaultTextOpacitySlider />
+        </DefaultMenuSection>
+
+        <DefaultMenuSection label={textBgSectionLabel}>
+          <DefaultTextBgInput />
+          <DefaultTextBgOpacitySlider />
+        </DefaultMenuSection>
+
+        <DefaultMenuSection label={displayBgSectionLabel}>
+          <DefaultDisplayBgInput />
+          <DefaultDisplayBgOpacitySlider />
+        </DefaultMenuSection>
+
+        <DefaultMenuSection>
+          <DefaultResetMenuItem />
+        </DefaultMenuSection>
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+DefaultFontMenu.displayName = 'DefaultFontMenu';
+export { DefaultFontMenu };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultFontFamilyMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultFontFamilyMenu() {
+  return <DefaultFontSetting label="Family" type="fontFamily" option={FONT_FAMILY_OPTION} />;
+}
+
+DefaultFontFamilyMenu.displayName = 'DefaultFontFamilyMenu';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultFontSizeSlider
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultFontSizeSlider() {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    option: FontSliderOption = {
+      ...FONT_SIZE_OPTION,
+      upIcon: Icons.Menu.FontSizeUp,
+      downIcon: Icons.Menu.FontSizeDown,
+    };
+
+  return <DefaultFontSetting label="Size" type="fontSize" option={option} />;
+}
+
+DefaultFontSizeSlider.displayName = 'DefaultFontSizeSlider';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultTextColoInput
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultTextColorInput() {
+  return <DefaultFontSetting label="Color" type="textColor" option={FONT_COLOR_OPTION} />;
+}
+
+DefaultTextColorInput.displayName = 'DefaultTextColorInput';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultTextOpacitySlider
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultTextOpacitySlider() {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    option = {
+      ...FONT_OPACITY_OPTION,
+      upIcon: Icons.Menu.OpacityUp,
+      downIcon: Icons.Menu.OpacityDown,
+    };
+  return <DefaultFontSetting label="Opacity" type="textOpacity" option={option} />;
+}
+
+DefaultTextOpacitySlider.displayName = 'DefaultTextOpacitySlider';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultTextShadowMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultTextShadowMenu() {
+  return <DefaultFontSetting label="Shadow" type="textShadow" option={FONT_TEXT_SHADOW_OPTION} />;
+}
+
+DefaultTextShadowMenu.displayName = 'DefaultTextShadowMenu';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultTextBgInput
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultTextBgInput() {
+  return <DefaultFontSetting label="Color" type="textBg" option={FONT_COLOR_OPTION} />;
+}
+
+DefaultTextBgInput.displayName = 'DefaultTextBgInput';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultTextBgOpacitySlider
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultTextBgOpacitySlider() {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    option = {
+      ...FONT_OPACITY_OPTION,
+      upIcon: Icons.Menu.OpacityUp,
+      downIcon: Icons.Menu.OpacityDown,
+    };
+
+  return <DefaultFontSetting label="Opacity" type="textBgOpacity" option={option} />;
+}
+
+DefaultTextBgOpacitySlider.displayName = 'DefaultTextBgOpacitySlider';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultDisplayBgInput
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultDisplayBgInput() {
+  return <DefaultFontSetting label="Color" type="displayBg" option={FONT_COLOR_OPTION} />;
+}
+
+DefaultDisplayBgInput.displayName = 'DefaultDisplayBgInput';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultDisplayBgOpacitySlider
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultDisplayBgOpacitySlider() {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    option = {
+      ...FONT_OPACITY_OPTION,
+      upIcon: Icons.Menu.OpacityUp,
+      downIcon: Icons.Menu.OpacityDown,
+    };
+
+  return <DefaultFontSetting label="Opacity" type="displayBgOpacity" option={option} />;
+}
+
+DefaultDisplayBgOpacitySlider.displayName = 'DefaultDisplayBgOpacitySlider';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultFontSetting
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultFontSetting({ label, option, type }: DefaultFontSettingProps) {
+  const player = useMediaPlayer(),
+    $currentValue = FONT_SIGNALS[type],
+    $value = useSignal($currentValue),
+    translatedLabel = useDefaultLayoutWord(label);
+
+  const notify = React.useCallback(() => {
+    player?.dispatchEvent(new Event('vds-font-change'));
+  }, [player]);
+
+  const onChange = React.useCallback(
+    (newValue: string) => {
+      $currentValue.set(newValue);
+      notify();
+    },
+    [$currentValue, notify],
+  );
+
+  if (option.type === 'color') {
+    function onColorChange(event) {
+      onChange(event.target.value);
+    }
+
+    return (
+      <DefaultMenuItem label={translatedLabel}>
+        <input className="vds-color-picker" type="color" value={$value} onChange={onColorChange} />
+      </DefaultMenuItem>
+    );
+  }
+
+  if (option.type === 'slider') {
+    const { min, max, step, upIcon, downIcon } = option;
+
+    function onSliderValueChange(value) {
+      onChange(value + '%');
+    }
+
+    return (
+      <DefaultMenuSliderItem
+        label={translatedLabel}
+        value={$value}
+        UpIcon={upIcon as DefaultLayoutIcon}
+        DownIcon={downIcon as DefaultLayoutIcon}
+        isMin={$value === min + '%'}
+        isMax={$value === max + '%'}
+      >
+        <Slider.Root
+          className="vds-slider"
+          min={min}
+          max={max}
+          step={step}
+          keyStep={step}
+          value={parseInt($value)}
+          aria-label={translatedLabel}
+          onValueChange={onSliderValueChange}
+          onDragValueChange={onSliderValueChange}
+        >
+          <DefaultSliderParts />
+          <DefaultSliderSteps />
+        </Slider.Root>
+      </DefaultMenuSliderItem>
+    );
+  }
+
+  if (option.type === 'radio') {
+    return (
+      <DefaultFontRadioGroup
+        id={camelToKebabCase(type)}
+        label={translatedLabel}
+        value={$value}
+        values={option.values}
+        onChange={onChange}
+      />
+    );
+  }
+
+  return null;
+}
+
+DefaultFontSetting.displayName = 'DefaultFontSetting';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultFontRadioGroup
+ * -----------------------------------------------------------------------------------------------*/
+
+interface DefaultFontRadioGroupProps {
+  id: string;
+  label: string;
+  value: string;
+  values: FontRadioOption['values'];
+  onChange: (value: string) => void;
+}
+
+function DefaultFontRadioGroup({ id, label, value, values, onChange }: DefaultFontRadioGroupProps) {
+  const radioOptions = createRadioOptions(values),
+    { translations } = useDefaultLayoutContext(),
+    hint = React.useMemo(() => {
+      const label = radioOptions.find((radio) => radio.value === value)?.label || '';
+      return i18n(translations, label);
+    }, [value, radioOptions]);
+
+  return (
+    <Menu.Root className={`vds-${id}-menu vds-menu`}>
+      <DefaultMenuButton label={label} hint={hint} />
+      <Menu.Items className="vds-menu-items">
+        <DefaultMenuRadioGroup value={value} options={radioOptions} onChange={onChange} />
+      </Menu.Items>
+    </Menu.Root>
+  );
+}
+
+DefaultFontRadioGroup.displayName = 'DefaultFontRadioGroup';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultResetMenuItem
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultResetMenuItem() {
+  const resetText = useDefaultLayoutWord('Reset');
+
+  return (
+    <button className="vds-menu-item" role="menuitem" onClick={onFontReset}>
+      <span className="vds-menu-item-label">{resetText}</span>
+    </button>
+  );
+}
+
+DefaultResetMenuItem.displayName = 'DefaultResetMenuItem';