@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/src/scroll/useScrollLock.ts

@@ -2,6 +2,12 @@
 import { useEffect } from "react";
 import { getScrollbarWidth } from "./getScrollbarWidth.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-scrollbar-size"?: string;
+  }
+}
+
 export const SCROLLBAR_SIZE_VAR = "--rmd-scrollbar-size";
 
 // this is really just so that nested dialogs will work correctly. Only the

package/src/searching/utils.ts

@@ -7,8 +7,8 @@ import { type BaseSearchOptions } from "./types.js";
  * @internal
  */
 export const defaultExtractor =
-  <T>(name: string) =>
-  (item: T): string => {
+  (name: string) =>
+  (item: unknown): string => {
     if (typeof item === "string") {
       return item;
     }
@@ -24,7 +24,7 @@ export const defaultExtractor =
  */
 export interface SearchOptions<T> extends BaseSearchOptions<T> {
   type: "search" | "filter";
-  filter(query: string, value: string): boolean;
+  filter: (query: string, value: string) => boolean;
   extractor: TextExtractor<T>;
 }
 

package/src/segmented-button/SegmentedButton.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { getIcon } from "../icon/iconConfig.js";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { useMaxWidthTransition } from "../transition/useMaxWidthTransition.js";
@@ -10,7 +11,8 @@ import { segmentedButton } from "./segmentedButtonStyles.js";
  * @since 6.0.0
  */
 export interface SegmentedButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    ComponentWithRippleProps {
   /**
    * Set this to `true` to apply selected styles and an optional
    * {@link selectedIcon}
@@ -126,6 +128,7 @@ export const SegmentedButton = forwardRef<
     onTouchEnd,
     onTouchMove,
     disabled,
+    disableRipple,
     ...remaining
   } = props;
 
@@ -138,6 +141,7 @@ export const SegmentedButton = forwardRef<
     disableTransition: disableSelectedTransition,
   });
   const { pressedClassName, handlers, ripples } = useElementInteraction({
+    mode: disableRipple ? "none" : undefined,
     onBlur,
     onClick,
     onKeyDown,

package/src/snackbar/ToastManager.tsx

@@ -542,8 +542,9 @@ export const toastManager = new ToastManager();
  * @see {@link ToastManager.addToast}
  * @since 6.0.0
  */
-export const addToast: ToastManager["addToast"] = (toast) =>
+export const addToast: ToastManager["addToast"] = (toast) => {
   toastManager.addToast(toast);
+};
 
 /**
  * @see {@link ToastManager.startRemoveTimeout}
@@ -551,23 +552,33 @@ export const addToast: ToastManager["addToast"] = (toast) =>
  */
 export const startRemoveToastTimeout: ToastManager["startRemoveTimeout"] = (
   toastId
-) => toastManager.startRemoveTimeout(toastId);
+) => {
+  toastManager.startRemoveTimeout(toastId);
+};
 
 /**
  * @see {@link ToastManager.popToast}
  * @since 6.0.0
  */
-export const popToast: ToastManager["popToast"] = () => toastManager.popToast();
+export const popToast: ToastManager["popToast"] = () => {
+  toastManager.popToast();
+};
 
 /**
  * @see {@link ToastManager.removeToast}
  * @since 6.0.0
  */
-export const removeToast: ToastManager["removeToast"] = (toastId, transition) =>
+export const removeToast: ToastManager["removeToast"] = (
+  toastId,
+  transition
+) => {
   toastManager.removeToast(toastId, transition);
+};
 
 /**
  * @see {@link ToastManager.clearToasts}
  * @since 6.0.0
  */
-export const clearToasts = (): void => toastManager.clearToasts();
+export const clearToasts = (): void => {
+  toastManager.clearToasts();
+};

package/src/snackbar/useCurrentToastActions.ts

@@ -9,15 +9,15 @@ import { createContext, useContext } from "react";
  */
 export interface CurrentToastActions {
   /** @see {@link ToastManager.clearTimer} */
-  clearTimer(): void;
+  clearTimer: () => void;
   /** @see {@link ToastManager.removeToast} */
-  removeToast(transition: boolean): void;
+  removeToast: (transition: boolean) => void;
   /** @see {@link ToastManager.startRemoveTimeout} */
-  startRemoveTimeout(): void;
+  startRemoveTimeout: () => void;
   /** @see {@link ToastManager.pauseRemoveTimeout} */
-  pauseRemoveTimeout(): void;
+  pauseRemoveTimeout: () => void;
   /** @see {@link ToastManager.resumeRemoveTimeout} */
-  resumeRemoveTimeout(): void;
+  resumeRemoveTimeout: () => void;
 }
 
 const context = createContext<CurrentToastActions | null>(null);

package/src/table/tableCellStyles.ts

@@ -12,14 +12,18 @@ export interface TableCellClassNameOptions {
   /**
    * Set this to `true` if the cell is rendered as a `<th>` so that the correct
    * sticky styles can be applied.
+   *
+   * @defaultValue `false`
    */
-  header: boolean;
+  header?: boolean;
 
   /**
    * Set this to true if the cell is rendered in a `<thead>` so that the correct
    * sticky styles can be applied.
+   *
+   * @defaultValue `header`
    */
-  isInTableHeader: boolean;
+  isInTableHeader?: boolean;
 
   /** @defaultValue `false` */
   grow?: boolean;
@@ -45,17 +49,17 @@ export interface TableCellClassNameOptions {
 /**
  * @since 6.0.0
  */
-export function tableCell(options: TableCellClassNameOptions): string {
+export function tableCell(options: TableCellClassNameOptions = {}): string {
   const {
     grow,
     sticky,
     header,
     inputToggle,
-    hAlign,
-    vAlign,
+    hAlign = "left",
+    vAlign = "middle",
     lineWrap = true,
     padding = "horizontal",
-    isInTableHeader,
+    isInTableHeader = header,
     className,
   } = options;
 

package/src/tabs/Tab.tsx

@@ -5,6 +5,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { type CustomLinkComponent } from "../link/Link.js";
@@ -20,7 +21,7 @@ import { type TabListProps } from "./TabList.js";
 /**
  * @since 6.0.0
  */
-export interface BaseTabProps {
+export interface BaseTabProps extends ComponentWithRippleProps {
   /**
    * Set this to `true` if the tab is currently active.
    *
@@ -126,6 +127,7 @@ export function Tab(props: TabProps): ReactElement {
     onTouchStart,
     onTouchEnd,
     onTouchMove,
+    disableRipple,
     ...remaining
   } = props as TabButtonProps;
   const { disabled } = props as TabButtonProps;
@@ -133,6 +135,7 @@ export function Tab(props: TabProps): ReactElement {
   const id = useEnsuredId(propId, "tab");
   const { activeDescendantId } = useKeyboardMovementContext();
   const { ripples, handlers } = useElementInteraction({
+    mode: disableRipple ? "none" : undefined,
     onBlur,
     onClick,
     onKeyDown,

package/src/tabs/TabList.tsx

@@ -8,13 +8,13 @@ import {
 } from "react";
 import { useAppSize } from "../media-queries/AppSizeProvider.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
+import { type GetTabListScrollToOptions } from "./getTabListScrollToOptions.js";
 import {
   TabListScrollButton,
   type BaseTabListScrollButtonProps,
 } from "./TabListScrollButton.js";
 import { tabList, type TabsAlignment } from "./tabListStyles.js";
 import { useTabList } from "./useTabList.js";
-import { type GetTabListScrollToOptions } from "./utils.js";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type useTabs } from "./useTabs.js";
@@ -24,7 +24,7 @@ import { type useTabs } from "./useTabs.js";
  */
 export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
   activeIndex: number;
-  setActiveIndex(nextActiveIndex: number): void;
+  setActiveIndex: (nextActiveIndex: number) => void;
 
   /**
    * @defaultValue `"left"`

package/src/tabs/TabListScrollButton.tsx

@@ -13,14 +13,14 @@ import { type PropsWithRef } from "../types.js";
 import { useDir } from "../typography/WritingDirectionProvider.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
 import { applyRef } from "../utils/applyRef.js";
+import {
+  getTabListScrollToOptions,
+  type GetTabListScrollToOptions,
+} from "./getTabListScrollToOptions.js";
 import {
   tabListScrollButton,
   tabListScrollButtonContainer,
 } from "./tabListScrollButtonStyles.js";
-import {
-  getTabListScrollToOptions,
-  type GetTabListScrollToOptions,
-} from "./utils.js";
 
 /**
  * @internal

package/src/tabs/getTabListScrollToOptions.ts

@@ -0,0 +1,37 @@
+/**
+ * @since 6.0.0
+ */
+export interface TabListScrollToOptions {
+  isRTL: boolean;
+  animate: boolean;
+  vertical: boolean;
+  increment: boolean;
+  container: HTMLElement;
+}
+
+/**
+ * @since 6.0.0
+ */
+export type GetTabListScrollToOptions = (
+  options: TabListScrollToOptions
+) => ScrollToOptions | undefined;
+
+/**
+ * @since 6.0.0
+ */
+export const getTabListScrollToOptions: GetTabListScrollToOptions = (
+  options
+) => {
+  const { isRTL, animate, vertical, increment, container } = options;
+  const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
+  const currentScroll = vertical ? scrollTop : scrollLeft;
+  const scrollDistance = vertical ? scrollHeight : scrollWidth;
+  const amount = (scrollDistance / 10) * (increment ? 1 : -1);
+  const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);
+
+  return {
+    left: vertical ? undefined : distance,
+    top: vertical ? distance : undefined,
+    behavior: animate ? "smooth" : "auto",
+  };
+};

package/src/tabs/tabStyles.ts

@@ -9,6 +9,10 @@ declare module "react" {
     "--rmd-tab-active-color"?: string;
     "--rmd-tab-inactive-color"?: string;
     "--rmd-tab-disabled-color"?: string;
+
+    "--rmd-tab-size"?: string;
+    "--rmd-tab-offset"?: string | number;
+    "--rmd-tab-indicator-background"?: string;
   }
 }
 

package/src/tabs/useTabList.ts

@@ -18,14 +18,6 @@ import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useResizeObserver } from "../useResizeObserver.js";
 import { getTabRoleOnly, scrollTabIntoView } from "./utils.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-tab-size"?: string;
-    "--rmd-tab-offset"?: string | number;
-    "--rmd-tab-indicator-background"?: string;
-  }
-}
-
 const TAB_SIZE_VAR = "--rmd-tab-size";
 const TAB_OFFSET_VAR = "--rmd-tab-offset";
 
@@ -43,7 +35,7 @@ export interface TabListHookOptions {
   ref: Ref<HTMLDivElement> | undefined;
   style: CSSProperties | undefined;
   activeIndex: number;
-  setActiveIndex(nextActiveIndex: number): void;
+  setActiveIndex: (nextActiveIndex: number) => void;
   scrollButtons: boolean;
   activationMode: "manual" | "automatic";
   vertical: boolean;
@@ -115,6 +107,7 @@ export function useTabList(
         // this is kind of hacky -- the styles should update when switching between
         // RTL, but the RTL state isn't required for any styles. Just reference it
         // so that the hooks eslint rule doesn't show a warning...
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         isRTL;
 
         const activeTab = getTabRoleOnly(entry.target)[activeIndex];

package/src/tabs/useTabs.ts

@@ -136,11 +136,11 @@ export interface TabsImplementation<TabValue extends string | number = number> {
   direction: SlideDirection;
   setDirection: UseStateSetter<SlideDirection>;
   activeTab?: TabValue;
-  setActiveTab?(nextActiveTab: TabValue): void;
-  getTabProps(tabValue: TabValue): ProvidedTabProps;
-  getTabListProps(): ProvidedTabListProps;
-  getTabPanelProps(tabValue: TabValue): ProvidedTabPanelProps;
-  getTabPanelsProps<E extends HTMLElement>(): ProvidedTabPanelsProps<E>;
+  setActiveTab?: (nextActiveTab: TabValue) => void;
+  getTabProps: (tabValue: TabValue) => ProvidedTabProps;
+  getTabListProps: () => ProvidedTabListProps;
+  getTabPanelProps: (tabValue: TabValue) => ProvidedTabPanelProps;
+  getTabPanelsProps: <E extends HTMLElement>() => ProvidedTabPanelsProps<E>;
 }
 
 /**
@@ -180,7 +180,7 @@ export interface TabsImplementation<TabValue extends string | number = number> {
  *
  * @since 6.0.0
  */
-export function useTabs(): TabsImplementation<number> & {
+export function useTabs(): TabsImplementation & {
   activeTab: number;
   setActiveTab: number;
 };

package/src/tabs/utils.ts

@@ -44,41 +44,3 @@ export const scrollTabIntoView = (options: ScrollOptions): void => {
     container[scrollAttribute] = elementStart - firstOffset;
   }
 };
-
-/**
- * @since 6.0.0
- */
-export interface TabListScrollToOptions {
-  isRTL: boolean;
-  animate: boolean;
-  vertical: boolean;
-  increment: boolean;
-  container: HTMLElement;
-}
-
-/**
- * @since 6.0.0
- */
-export type GetTabListScrollToOptions = (
-  options: TabListScrollToOptions
-) => ScrollToOptions | undefined;
-
-/**
- * @since 6.0.0
- */
-export const getTabListScrollToOptions: GetTabListScrollToOptions = (
-  options
-) => {
-  const { isRTL, animate, vertical, increment, container } = options;
-  const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
-  const currentScroll = vertical ? scrollTop : scrollLeft;
-  const scrollDistance = vertical ? scrollHeight : scrollWidth;
-  const amount = (scrollDistance / 10) * (increment ? 1 : -1);
-  const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);
-
-  return {
-    left: vertical ? undefined : distance,
-    top: vertical ? distance : undefined,
-    behavior: animate ? "smooth" : "auto",
-  };
-};

package/src/test-utils/ResizeObserver.ts

@@ -217,14 +217,14 @@ export interface SetupResizeObserverMockOptions {
  *
  * @example Main Usage
  * ```tsx
- * import { useCallback, useState } from "react";
  * import {
  *   cleanupResizeObserverAfterEach,
  *   render,
  *   screen,
  *   setupResizeObserverMock,
  * } from "@react-md/core/test-utils";
- * import { useResizeObserver } from "@react-md/core";
+ * import { useResizeObserver } from "@react-md/core/useResizeObserver";
+ * import { useCallback, useState } from "react";
  *
  * function ExampleComponent() {
  *   const [size, setSize] = useState({ height: 0, width: 0 });
@@ -234,7 +234,7 @@ export interface SetupResizeObserverMockOptions {
  *         height: entry.contentRect.height,
  *         width: entry.contentRect.width,
  *       });
- *     });
+ *     }, []),
  *   });
  *
  *   return (
@@ -250,10 +250,10 @@ export interface SetupResizeObserverMockOptions {
  * describe("ExampleComponent", () => {
  *   it("should do stuff", () => {
  *     const observer = setupResizeObserverMock();
- *     render(<ExampleComponent />)
+ *     render(<ExampleComponent />);
  *
  *     const size = screen.getByTestId("size");
- *     const resizeTarget = screen.getByTestId("resize-target")
+ *     const resizeTarget = screen.getByTestId("resize-target");
  *
  *     // jsdom sets all element sizes to 0 by default
  *     expect(size).toHaveTextContent(JSON.stringify({ height: 0, width: 0 }));
@@ -265,19 +265,18 @@ export interface SetupResizeObserverMockOptions {
  *     expect(size).toHaveTextContent(JSON.stringify({ height: 100, width: 100 }));
  *
  *     // or you can mock the `getBoundingClientRect` result
- *     jest.spyOn(resizeTarget, "getBoundingClientRect")
- *       .mockReturnValue({
- *         ...document.body.getBoundingClientRect(),
- *         height: 200,
- *         width: 200,
- *       }):
+ *     jest.spyOn(resizeTarget, "getBoundingClientRect").mockReturnValue({
+ *       ...document.body.getBoundingClientRect(),
+ *       height: 200,
+ *       width: 200,
+ *     });
  *
  *     act(() => {
  *       observer.resizeElement(resizeTarget);
  *     });
  *     expect(size).toHaveTextContent(JSON.stringify({ height: 200, width: 200 }));
  *   });
- * })
+ * });
  * ```
  *
  * @since 6.0.0

package/src/test-utils/matchMedia.ts

@@ -36,7 +36,7 @@ export type MatchMediaMatcher = (query: string) => boolean;
  * @returns `true` for phone media queries
  */
 export const matchPhone: MatchMediaMatcher = (query) =>
-  query.includes(`${DEFAULT_PHONE_MAX_WIDTH}`);
+  query.includes(DEFAULT_PHONE_MAX_WIDTH);
 
 /**
  * @see {@link spyOnMatchMedia} for usage
@@ -44,7 +44,7 @@ export const matchPhone: MatchMediaMatcher = (query) =>
  * @returns `true` for tablet media queries
  */
 export const matchTablet: MatchMediaMatcher = (query) =>
-  query.includes(`${DEFAULT_TABLET_MIN_WIDTH}`);
+  query.includes(DEFAULT_TABLET_MIN_WIDTH);
 
 /**
  * @see {@link spyOnMatchMedia} for usage
@@ -52,7 +52,7 @@ export const matchTablet: MatchMediaMatcher = (query) =>
  * @returns `true` for desktop media queries
  */
 export const matchDesktop: MatchMediaMatcher = (query) =>
-  query.includes(`${DEFAULT_DESKTOP_MIN_WIDTH}`);
+  query.includes(DEFAULT_DESKTOP_MIN_WIDTH);
 
 /**
  * @see {@link spyOnMatchMedia} for usage
@@ -60,7 +60,7 @@ export const matchDesktop: MatchMediaMatcher = (query) =>
  * @returns `true` for large desktop media queries
  */
 export const matchLargeDesktop: MatchMediaMatcher = (query) =>
-  query.includes(`${DEFAULT_DESKTOP_LARGE_MIN_WIDTH}`);
+  query.includes(DEFAULT_DESKTOP_LARGE_MIN_WIDTH);
 
 /**
  * @see {@link spyOnMatchMedia} for usage
@@ -101,13 +101,13 @@ export type MatchMediaSpiedFunction = jest.SpiedFunction<
    * // expect phone results
    * ```
    */
-  changeViewport(matcher: MatchMediaMatcher, disableAct?: boolean): void;
+  changeViewport: (matcher: MatchMediaMatcher, disableAct?: boolean) => void;
 };
 
 /**
  * @example Default Behavior
  * ```tsx
- * import { matchPhone, render, spyOnMatchMedia } from "@react-md/test-utils";
+ * import { matchPhone, render, spyOnMatchMedia } from "@react-md/core/test-utils";
  *
  * const matchMedia = spyOnMatchMedia();
  * render(<Test />);
@@ -120,7 +120,7 @@ export type MatchMediaSpiedFunction = jest.SpiedFunction<
  *
  * @example Set Default Media
  * ```tsx
- * import { matchPhone, render, spyOnMatchMedia } from "@react-md/test-utils";
+ * import { matchPhone, render, spyOnMatchMedia } from "@react-md/core/test-utils";
  *
  * const matchMedia = spyOnMatchMedia(matchPhone);
  * render(<Test />);

package/src/test-utils/polyfills/TextDecoder.ts

@@ -1,7 +1,6 @@
 import { TextDecoder } from "node:util";
 
 if (typeof global.TextDecoder === "undefined") {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error browser TextDecoder does not support `null` while `node:util` does
   global.TextDecoder = TextDecoder;
 }

package/src/test-utils/timers.ts

@@ -1,13 +1,18 @@
 import { jest } from "@jest/globals";
 
+/**
+ * @since 6.0.0
+ */
+export type RafSpy = jest.SpiedFunction<typeof requestAnimationFrame>;
+
 /**
  * @example
  * ```ts
- * import { useImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils";
  *
  * describe("some test suite", () => {
  *   it("should test something with requestAnimationFrame", () => {
- *     const raf = useImmediateRaf();
+ *     const raf = testImmediateRaf();
  *
  *     // do some testing with requestAnimationFrame
  *
@@ -19,7 +24,7 @@ import { jest } from "@jest/globals";
  *
  * @example Automatic Cleanup
  * ```ts
- * import { useImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils";
  *
  * afterEach(() => {
  *   jest.restoreAllMocks();
@@ -27,7 +32,7 @@ import { jest } from "@jest/globals";
  *
  * describe("some test suite", () => {
  *   it("should test something with requestAnimationFrame", () => {
- *     const raf = useImmediateRaf();
+ *     const raf = testImmediateRaf();
  *
  *     // do some testing with requestAnimationFrame
  *   });
@@ -36,9 +41,7 @@ import { jest } from "@jest/globals";
  *
  * @since 6.0.0
  */
-export const useImmediateRaf = (): jest.SpiedFunction<
-  typeof requestAnimationFrame
-> =>
+export const testImmediateRaf = (): RafSpy =>
   jest.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
     cb(0);
     return 0;

package/src/theme/LocalStorageColorSchemeProvider.tsx

@@ -1,8 +1,10 @@
 "use client";
 import { type ReactElement, type ReactNode } from "react";
 import { useLocalStorage } from "../useLocalStorage.js";
-import { ColorSchemeProvider, type ColorSchemeMode } from "./useColorScheme.js";
+import { type ColorSchemeMode } from "./types.js";
+import { ColorSchemeProvider } from "./useColorScheme.js";
 import { useColorSchemeProvider } from "./useColorSchemeProvider.js";
+import { isColorSchemeMode } from "./isColorScheme.js";
 
 /**
  * @since 6.0.0
@@ -115,9 +117,7 @@ export function LocalStorageColorSchemeProvider(
       key: localStorageKey,
       defaultValue: defaultColorSchemeMode,
       deserializer: (item) =>
-        item === "light" || item === "dark" || item === "system"
-          ? item
-          : defaultColorSchemeMode,
+        isColorSchemeMode(item) ? item : defaultColorSchemeMode,
     });
 
   const value = useColorSchemeProvider({

package/src/theme/ThemeProvider.tsx

@@ -384,9 +384,9 @@ export function ThemeProvider(props: ThemeProviderProps): ReactElement {
     // NOTE: This will not be correct the first time a new theme is lazy-loaded
     // and applied. It might be good to have a way to manually force this flow
     // again?
-    const frame = window.requestAnimationFrame(() =>
-      setDerivedTheme(getDerivedTheme(document.documentElement))
-    );
+    const frame = window.requestAnimationFrame(() => {
+      setDerivedTheme(getDerivedTheme(document.documentElement));
+    });
 
     return () => {
       window.cancelAnimationFrame(frame);

package/src/theme/isColorScheme.ts

@@ -0,0 +1,22 @@
+import { type ColorSchemeMode, type ColorScheme } from "./types.js";
+
+/**
+ * A type assertion helper to check if a value is a valid {@link ColorScheme}
+ * when it is pulled from unknown sources (like local storage).
+ *
+ * @since 6.0.0
+ */
+export function isColorScheme(value: unknown): value is ColorScheme {
+  return value === "light" || value === "dark";
+}
+
+/**
+ * A type assertion helper to check if a value is a valid
+ * {@link ColorSchemeMode} when it is pulled from unknown sources (like local
+ * storage).
+ *
+ * @since 6.0.0
+ */
+export function isColorSchemeMode(value: unknown): value is ColorSchemeMode {
+  return isColorScheme(value) || value === "system";
+}