@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/cjs/utilities/hooks/use-checkbox-group/use-checkbox-group.cjs

@@ -0,0 +1,115 @@
+'use client';
+let react = require("react");
+//#region src/utilities/hooks/use-checkbox-group/use-checkbox-group.ts
+const toggleIndeterminate = (getIndeterminateInputs, getInputs) => {
+	const inputs = getIndeterminateInputs();
+	const checked = !!getInputs(true).length;
+	const unchecked = !!getInputs(false).length;
+	for (const input of inputs) {
+		input.indeterminate = unchecked && checked;
+		input.checked = !unchecked && checked;
+	}
+};
+function useCheckboxGroup(props) {
+	const { error, name: groupName, onChange, value = [], disabled, readOnly, required } = props || {};
+	const [groupValue, setGroupValue] = (0, react.useState)(value);
+	const namedId = (0, react.useId)();
+	const errorId = (0, react.useId)();
+	const checkboxRefs = (0, react.useRef)(/* @__PURE__ */ new Set());
+	const indeterminateRefs = (0, react.useRef)(/* @__PURE__ */ new Set());
+	const inputRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
+	const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
+	(0, react.useEffect)(() => {
+		toggleIndeterminate(getIndeterminateInputs, getInputs);
+	}, [groupValue]);
+	return {
+		/**
+		* Current value of the group.
+		*/
+		value: groupValue,
+		/**
+		* Set the value of the group.
+		*
+		* @param value string[]
+		* @returns void
+		*/
+		setValue: setGroupValue,
+		/**
+		* Props to send to the `Checkbox` component.
+		* Accepts value or object
+		* @example
+		* <Checkbox {...getCheckboxProps('value')} />
+		*
+		* @example allow indeterminate
+		* <Checkbox {...getCheckboxProps({ value: 'all', allowIndeterminate: true })} />
+		*/
+		getCheckboxProps: (propsOrValue) => {
+			let groupProps;
+			if (props) {
+				const { onChange, error, ...rest } = props;
+				groupProps = rest;
+			}
+			const { allowIndeterminate = false, ref: forwardedRef = void 0, value = "", ...rest } = typeof propsOrValue === "string" ? { value: propsOrValue } : propsOrValue || {};
+			const handleRef = (element) => {
+				if (element) {
+					(allowIndeterminate ? indeterminateRefs : checkboxRefs).current.add(element);
+					inputRefs.current.set(value, element);
+					if (getIndeterminateInputs().length) toggleIndeterminate(getIndeterminateInputs, getInputs);
+				} else {
+					const oldElement = inputRefs.current.get(value);
+					if (oldElement) {
+						checkboxRefs.current.delete(oldElement);
+						indeterminateRefs.current.delete(oldElement);
+						inputRefs.current.delete(value);
+					}
+				}
+				if (forwardedRef) if (typeof forwardedRef === "function") forwardedRef(element);
+				else forwardedRef.current = element;
+			};
+			const handleChange = () => {
+				const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
+				setGroupValue(nextGroupValue);
+				onChange?.(nextGroupValue, groupValue);
+			};
+			const indeterminateChange = () => {
+				const element = inputRefs.current.get(value);
+				if (!element) return;
+				const checked = !!element.checked;
+				for (const input of getInputs(!checked)) input.click();
+			};
+			return {
+				...groupProps,
+				...rest,
+				"aria-describedby": `${error ? errorId : ""} ${rest["aria-describedby"] || ""}`.trim() || void 0,
+				"aria-invalid": !!error || rest["aria-invalid"],
+				checked: allowIndeterminate ? void 0 : groupValue.includes(value),
+				name: rest.name || groupName || namedId,
+				onChange: (e) => {
+					rest.onChange?.(e);
+					if (e.defaultPrevented) return;
+					allowIndeterminate && indeterminateChange();
+					handleChange();
+				},
+				ref: handleRef,
+				value,
+				disabled: disabled || rest.disabled,
+				readOnly: readOnly || rest.readOnly,
+				required: required || rest.required
+			};
+		},
+		/**
+		* Props to send to the `ValidationMessage` component.
+		*
+		* @example
+		* <ValidationMessage {...validationMessageProps} />
+		*/
+		validationMessageProps: {
+			children: error,
+			hidden: !error,
+			id: errorId
+		}
+	};
+}
+//#endregion
+exports.useCheckboxGroup = useCheckboxGroup;

package/dist/cjs/utilities/hooks/use-checkbox-group/use-checkbox-group.d.cts

@@ -0,0 +1,71 @@
+
+import { CheckboxProps } from "../../../components/checkbox/checkbox.cjs";
+import "../../../components/index.cjs";
+import { Dispatch, ForwardedRef, ReactNode, SetStateAction } from "react";
+//#region src/utilities/hooks/use-checkbox-group/use-checkbox-group.d.ts
+type UseCheckboxGroupProps = {
+  /**
+   * Disables all checkboxes in the group.
+   */
+  disabled?: boolean;
+  /**
+   * Error message for the group.
+   * If set, all checkboxes will have `aria-invalid` set to `true`.
+   */
+  error?: ReactNode;
+  /**
+   * Name of the group.
+   * If not set, a random id will be generated.
+   */
+  name?: string;
+  /**
+   * Makes all checkboxes in the group read-only.
+   * If set, all checkboxes will have `aria-readonly` set to `true`.
+   */
+  readOnly?: boolean;
+  /**
+   * Initial value of the group
+   * @default []
+   */
+  value?: string[];
+  /**
+   * Makes all checkboxes in the group required.
+   * If set, all checkboxes will have `required` set to `true`.
+   */
+  required?: boolean;
+  /**
+   * Callback that is called when the value of the group changes.
+   * @param nextValue string[]
+   * @param currentValue string[]
+   * @returns void
+   */
+  onChange?: (nextValue: string[], currentValue: string[]) => void;
+  /**
+   * If outline, all checkboxes in the group will have a border
+   */
+  variant?: CheckboxProps['variant'];
+};
+/**
+ * Get anything that is set on a checkbox, but
+ * remove anything that comes from the group itself.
+ */
+type GetCheckboxProps = Omit<CheckboxProps, 'prefix' | 'role' | 'type' | 'size' | 'aria-label' | 'aria-labelledby' | 'label' | 'checked' | 'value'> & {
+  /** Enables indeterminate handling for this `Checkbox` and `CheckboxGroup` */
+  allowIndeterminate?: boolean;
+  ref?: ForwardedRef<HTMLInputElement>;
+  checked?: boolean;
+  value?: string;
+};
+type useCheckboxGroupReturn = {
+  value: string[];
+  setValue: Dispatch<SetStateAction<string[]>>;
+  getCheckboxProps: (propsOrValue?: string | GetCheckboxProps) => GetCheckboxProps;
+  validationMessageProps: {
+    children: ReactNode;
+    hidden: boolean;
+    id: string;
+  };
+};
+declare function useCheckboxGroup(props?: UseCheckboxGroupProps): useCheckboxGroupReturn;
+//#endregion
+export { GetCheckboxProps, UseCheckboxGroupProps, useCheckboxGroup };

package/dist/cjs/utilities/hooks/use-merge-refs/use-merge-refs.cjs

@@ -0,0 +1,40 @@
+'use client';
+let react = require("react");
+//#region src/utilities/hooks/use-merge-refs/use-merge-refs.ts
+/**
+* Merges an array of refs into a single memoized callback ref or `null`.
+*/
+function useMergeRefs(refs) {
+	const cleanupRef = (0, react.useRef)(void 0);
+	const refEffect = (0, react.useCallback)((instance) => {
+		const cleanups = refs.map((ref) => {
+			if (ref == null) return null;
+			if (typeof ref === "function") {
+				const refCallback = ref;
+				const refCleanup = refCallback(instance);
+				return typeof refCleanup === "function" ? refCleanup : () => {
+					refCallback(null);
+				};
+			}
+			ref.current = instance;
+			return () => {
+				ref.current = null;
+			};
+		});
+		return () => {
+			for (const refCleanup of cleanups) refCleanup?.();
+		};
+	}, refs);
+	return (0, react.useMemo)(() => {
+		if (refs.every((ref) => ref == null)) return null;
+		return (value) => {
+			if (cleanupRef.current) {
+				cleanupRef.current();
+				cleanupRef.current = void 0;
+			}
+			if (value != null) cleanupRef.current = refEffect(value);
+		};
+	}, refs);
+}
+//#endregion
+exports.useMergeRefs = useMergeRefs;

package/dist/cjs/utilities/hooks/use-merge-refs/use-merge-refs.d.cts

@@ -0,0 +1,2 @@
+
+import "react";

package/dist/cjs/utilities/hooks/use-pagination/use-pagination.cjs

@@ -0,0 +1,85 @@
+'use client';
+let _digdir_designsystemet_web = require("@digdir/designsystemet-web");
+let react = require("react");
+//#region src/utilities/hooks/use-pagination/use-pagination.ts
+/**
+* Hook to help manage pagination state
+*
+* @example
+* const { pages, nextButtonProps, prevButtonProps } = usePagination({
+*   currentPage: page,
+*   totalPages: 10,
+*   showPages: 7,
+*   setCurrentPage,
+* })
+*
+* <Pagination>
+*   <Pagination.Item>
+*     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
+*   </Pagination.Item>
+*   {pages.map(({ page, itemKey, buttonProps }) => (
+*     <Pagination.Item key={itemKey}>
+*       {typeof page === 'number' && (
+*         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+*           {page}
+*         </Pagination.Button>
+*       )}
+*     </Pagination.Item>
+*   ))}
+*   <Pagination.Item>
+*     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
+*   </Pagination.Item>
+* </Pagination>
+**/
+const usePagination = ({ currentPage: current = 1, setCurrentPage, onChange, totalPages: total = 1, showPages: show = 7 }) => (0, react.useMemo)(() => {
+	const { next, prev, pages } = (0, _digdir_designsystemet_web.pagination)({
+		current,
+		total,
+		show
+	});
+	const handleClick = (page) => (event) => {
+		if (page < 1 || page > total) return event.preventDefault();
+		onChange?.(event, page);
+		if (!event.defaultPrevented) setCurrentPage?.(page);
+	};
+	return {
+		/** Number of steps */
+		pages: pages.map(({ page, current }, index) => ({
+			/**
+			* Page number or "ellipsis" for the ellipsis item
+			*/
+			page: page || "ellipsis",
+			/**
+			* Unique key for the item
+			*/
+			itemKey: page ? `page-${page}` : `ellipsis-${index}`,
+			/**
+			* Properties to spread on Pagination.Button
+			*/
+			buttonProps: page ? {
+				"aria-current": current ? "true" : void 0,
+				onClick: handleClick(page)
+			} : null
+		})),
+		/** Properties to spread on Pagination.Button used for previous navigation */
+		prevButtonProps: {
+			"aria-hidden": !prev,
+			onClick: handleClick(prev)
+		},
+		/** Properties to spread on Pagination.Button used for next navigation */
+		nextButtonProps: {
+			"aria-hidden": !next,
+			onClick: handleClick(next)
+		},
+		/** Indication if previous page action should be shown or not */
+		hasPrev: !!prev,
+		/** Indication if next page action should be shown or not */
+		hasNext: !!next
+	};
+}, [
+	current,
+	total,
+	show
+]);
+//#endregion
+exports.usePagination = usePagination;

package/dist/cjs/utilities/hooks/use-pagination/use-pagination.d.cts

@@ -0,0 +1,86 @@
+
+import { PaginationButtonProps } from "../../../components/pagination/pagination-button.cjs";
+import "../../../components/index.cjs";
+import { MouseEvent } from "react";
+//#region src/utilities/hooks/use-pagination/use-pagination.d.ts
+type UsePaginationProps = {
+  /**
+   * The current page number
+   * @default 1
+   */
+  currentPage: number;
+  /**
+   * The total number of pages
+   * @default 1
+   */
+  totalPages: number;
+  /**
+   * The maximum number of pages to show
+   * @default 7
+   */
+  showPages?: number;
+  /**
+   * Callback to set the current page
+   */
+  setCurrentPage?: (page: number) => void;
+  /**
+   * Callback when the page changes
+   */
+  onChange?: (event: MouseEvent<HTMLElement>, page: number) => void;
+};
+/**
+ * Hook to help manage pagination state
+ *
+ * @example
+ * const { pages, nextButtonProps, prevButtonProps } = usePagination({
+ *   currentPage: page,
+ *   totalPages: 10,
+ *   showPages: 7,
+ *   setCurrentPage,
+ * })
+ *
+ * <Pagination>
+ *   <Pagination.Item>
+ *     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ *   {pages.map(({ page, itemKey, buttonProps }) => (
+ *     <Pagination.Item key={itemKey}>
+ *       {typeof page === 'number' && (
+ *         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+ *           {page}
+ *         </Pagination.Button>
+ *       )}
+ *     </Pagination.Item>
+ *   ))}
+ *   <Pagination.Item>
+ *     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination>
+ **/
+declare const usePagination: ({ currentPage: current, setCurrentPage, onChange, totalPages: total, showPages: show }: UsePaginationProps) => {
+  /** Number of steps */
+  pages: {
+    /**
+     * Page number or "ellipsis" for the ellipsis item
+     */
+    page: string | number;
+    /**
+     * Unique key for the item
+     */
+    itemKey: string;
+    /**
+     * Properties to spread on Pagination.Button
+     */
+    buttonProps: PaginationButtonProps | null;
+  }[];
+  /** Properties to spread on Pagination.Button used for previous navigation */
+  prevButtonProps: PaginationButtonProps;
+  /** Properties to spread on Pagination.Button used for next navigation */
+  nextButtonProps: PaginationButtonProps;
+  /** Indication if previous page action should be shown or not */
+  hasPrev: boolean;
+  /** Indication if next page action should be shown or not */
+  hasNext: boolean;
+};
+//#endregion
+export { UsePaginationProps, usePagination };

package/dist/cjs/utilities/hooks/use-radio-group/use-radio-group.cjs

@@ -0,0 +1,90 @@
+'use client';
+let react = require("react");
+//#region src/utilities/hooks/use-radio-group/use-radio-group.ts
+/**
+* useRadioGroup is used to group multiple <Radio> components
+* @example
+* const { getRadioProps, validationMessageProps, value, setValue } = useRadioGroup({
+*   disabled: false,
+*   error: 'Validation message text',
+*   name: 'group-name',
+*   onChange: (nextValue, prevValue) => {},
+*   readOnly: false,
+*   required: true,
+*   value: '',
+* });
+*/
+function useRadioGroup(props) {
+	const { error, readOnly, required, disabled, name, onChange, value: initialValue = "" } = props || {};
+	const [groupValue, setGroupValue] = (0, react.useState)(initialValue);
+	const errorId = (0, react.useId)();
+	const namedId = (0, react.useId)();
+	const radioGroupName = name || namedId;
+	return {
+		/**
+		* Current value of the group.
+		*/
+		value: groupValue,
+		/**
+		* Set the value of the group.
+		*
+		* @param value string[]
+		* @returns void
+		*/
+		setValue: setGroupValue,
+		/**
+		* Props to send to the `Radio` component.
+		* @example
+		* <Radio label="Option 1" {...getRadioProps('option-1')} />
+		*/
+		getRadioProps: (propsOrValue) => {
+			let groupProps;
+			if (props) {
+				const { onChange, error, ...rest } = props;
+				groupProps = rest;
+			}
+			const { ref: forwardedRef = void 0, value = "", ...rest } = typeof propsOrValue === "string" ? { value: propsOrValue } : propsOrValue;
+			const handleRef = (element) => {
+				if (element) element.checked = value === groupValue;
+				if (forwardedRef) if (typeof forwardedRef === "function") forwardedRef(element);
+				else forwardedRef.current = element;
+			};
+			const handleChange = (e) => {
+				if (e.target.name === radioGroupName) setGroupValue((prevValue) => {
+					onChange?.(e.target.value, prevValue);
+					return e.target.value;
+				});
+			};
+			return {
+				...groupProps,
+				...rest,
+				name: radioGroupName,
+				"aria-describedby": `${error ? errorId : ""} ${rest["aria-describedby"] || ""}`.trim() || void 0,
+				"aria-invalid": !!error || rest["aria-invalid"],
+				value,
+				ref: handleRef,
+				required: required || rest.required,
+				readOnly: readOnly || rest.readOnly,
+				disabled: disabled || rest.disabled,
+				onChange: (e) => {
+					rest.onChange?.(e);
+					if (e.defaultPrevented) return;
+					handleChange(e);
+				}
+			};
+		},
+		/**
+		* Props to send to the `ValidationMessage` component.
+		*
+		* @example
+		* <ValidationMessage {...validationMessageProps} />
+		*/
+		validationMessageProps: {
+			children: error,
+			hidden: !error,
+			id: errorId
+		}
+	};
+}
+//#endregion
+exports.useRadioGroup = useRadioGroup;

package/dist/cjs/utilities/hooks/use-radio-group/use-radio-group.d.cts

@@ -0,0 +1,63 @@
+
+import { RadioProps } from "../../../components/radio/radio.cjs";
+import "../../../components/index.cjs";
+import { Dispatch, ForwardedRef, ReactNode, SetStateAction } from "react";
+//#region src/utilities/hooks/use-radio-group/use-radio-group.d.ts
+type UseRadioGroupProps = {
+  /** Set disabled state of all radios */
+  disabled?: boolean;
+  /** Shared error message for all radios */
+  error?: ReactNode;
+  /** Name of all radios.
+   * @default string of auto-generated name
+   */
+  name?: string;
+  /** Set read only state of all radios */
+  readOnly?: boolean;
+  /** Set required state of all radios */
+  required?: boolean;
+  /**
+   * Initial value of the group
+   */
+  value?: string;
+  /** Callback when selected radios changes */
+  onChange?: (nextValue: string, prevValue: string) => void;
+  /**
+   * If outline, all radios in the group will have a border
+   */
+  variant?: RadioProps['variant'];
+};
+/**
+ * Get anything that is set on a radio, but
+ * remove anything that comes from the group itself.
+ */
+type GetRadioProps = Omit<RadioProps, 'prefix' | 'role' | 'type' | 'size' | 'aria-label' | 'aria-labelledby' | 'label' | 'name' | 'checked' | 'value'> & {
+  ref?: ForwardedRef<HTMLInputElement>;
+  value?: string;
+};
+type useRadioGroupReturn = {
+  value: string;
+  setValue: Dispatch<SetStateAction<string>>;
+  getRadioProps: (propsOrValue: string | GetRadioProps) => GetRadioProps;
+  validationMessageProps: {
+    children: ReactNode;
+    hidden: boolean;
+    id: string;
+  };
+};
+/**
+ * useRadioGroup is used to group multiple <Radio> components
+ * @example
+ * const { getRadioProps, validationMessageProps, value, setValue } = useRadioGroup({
+ *   disabled: false,
+ *   error: 'Validation message text',
+ *   name: 'group-name',
+ *   onChange: (nextValue, prevValue) => {},
+ *   readOnly: false,
+ *   required: true,
+ *   value: '',
+ * });
+ */
+declare function useRadioGroup(props?: UseRadioGroupProps): useRadioGroupReturn;
+//#endregion
+export { GetRadioProps, UseRadioGroupProps, useRadioGroup };

package/dist/cjs/utilities/hooks/use-synchronized-animation/use-synchronized-animation.cjs

@@ -0,0 +1,33 @@
+'use client';
+let react = require("react");
+//#region src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+/**
+* Synchronizes the css animation of multiple elements with the same `animationName`.
+*
+* @example
+* ```tsx
+*  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+*
+*  <div
+*   ref={ref}
+*  />
+* ```
+*/
+function useSynchronizedAnimation(animationName) {
+	const ref = (0, react.useRef)(null);
+	useIsomorphicLayoutEffect(() => {
+		const animations = document.getAnimations().filter((animation) => "animationName" in animation && animation.animationName === animationName);
+		const firstOfType = animations.find((animation) => "animationName" in animation && animation.animationName === animationName);
+		const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
+		if (myAnimation && myAnimation === firstOfType) myAnimation.currentTime = 0;
+		if (myAnimation && firstOfType?.currentTime && myAnimation !== firstOfType) myAnimation.currentTime = firstOfType.currentTime;
+		return () => {
+			if (myAnimation && firstOfType?.currentTime) myAnimation.currentTime = firstOfType.currentTime;
+		};
+	}, [animationName]);
+	return ref;
+}
+//#endregion
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useSynchronizedAnimation = useSynchronizedAnimation;

package/dist/cjs/utilities/hooks/use-synchronized-animation/use-synchronized-animation.d.cts

@@ -0,0 +1,18 @@
+
+import { useEffect } from "react";
+//#region src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.d.ts
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
+declare function useSynchronizedAnimation<T>(animationName: string): import("react").RefObject<T | null>;
+//#endregion
+export { useSynchronizedAnimation };

package/dist/cjs/utilities/index.cjs

@@ -0,0 +1,25 @@
+'use client';
+const require_use_debounce_callback = require("./hooks/deprecated/use-debounce-callback/use-debounce-callback.cjs");
+const require_use_isomorphic_layout_effect = require("./hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.cjs");
+const require_use_media_query = require("./hooks/deprecated/use-media-query/use-media-query.cjs");
+const require_use_checkbox_group = require("./hooks/use-checkbox-group/use-checkbox-group.cjs");
+const require_use_pagination = require("./hooks/use-pagination/use-pagination.cjs");
+const require_use_radio_group = require("./hooks/use-radio-group/use-radio-group.cjs");
+const require_use_synchronized_animation = require("./hooks/use-synchronized-animation/use-synchronized-animation.cjs");
+require("./hooks/index.cjs");
+const require_roving_focus_root = require("./roving-focus/roving-focus-root.cjs");
+require("./roving-focus/use-roving-focus.cjs");
+const require_roving_focus_item = require("./roving-focus/roving-focus-item.cjs");
+//#region src/utilities/index.ts
+const warn = (message, ...args) => typeof window === "undefined" || window.dsWarnings === false || console.warn(`Designsystemet: ${message}`, ...args);
+//#endregion
+exports.RovingFocusItem = require_roving_focus_item.RovingFocusItem;
+exports.RovingFocusRoot = require_roving_focus_root.RovingFocusRoot;
+exports.useCheckboxGroup = require_use_checkbox_group.useCheckboxGroup;
+exports.useDebounceCallback = require_use_debounce_callback.useDebounceCallback;
+exports.useIsomorphicLayoutEffect = require_use_isomorphic_layout_effect.useIsomorphicLayoutEffect;
+exports.useMediaQuery = require_use_media_query.useMediaQuery;
+exports.usePagination = require_use_pagination.usePagination;
+exports.useRadioGroup = require_use_radio_group.useRadioGroup;
+exports.useSynchronizedAnimation = require_use_synchronized_animation.useSynchronizedAnimation;
+exports.warn = warn;

package/dist/cjs/utilities/index.d.cts

@@ -0,0 +1,21 @@
+
+import { useDebounceCallback } from "./hooks/deprecated/use-debounce-callback/use-debounce-callback.cjs";
+import { useIsomorphicLayoutEffect } from "./hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.cjs";
+import { useMediaQuery } from "./hooks/deprecated/use-media-query/use-media-query.cjs";
+import { UseCheckboxGroupProps, useCheckboxGroup } from "./hooks/use-checkbox-group/use-checkbox-group.cjs";
+import { UsePaginationProps, usePagination } from "./hooks/use-pagination/use-pagination.cjs";
+import { UseRadioGroupProps, useRadioGroup } from "./hooks/use-radio-group/use-radio-group.cjs";
+import { useSynchronizedAnimation } from "./hooks/use-synchronized-animation/use-synchronized-animation.cjs";
+import "./hooks/index.cjs";
+import { RovingFocusRoot } from "./roving-focus/roving-focus-root.cjs";
+import { RovingFocusItem } from "./roving-focus/roving-focus-item.cjs";
+import "./roving-focus/use-roving-focus.cjs";
+import { MergeRight } from "./types.cjs";
+//#region src/utilities/index.d.ts
+declare global {
+  interface Window {
+    dsWarnings?: boolean;
+  }
+}
+//#endregion
+export { type MergeRight, RovingFocusItem, RovingFocusRoot, type UseCheckboxGroupProps, type UsePaginationProps, type UseRadioGroupProps, useCheckboxGroup, useDebounceCallback, useIsomorphicLayoutEffect, useMediaQuery, usePagination, useRadioGroup, useSynchronizedAnimation };