import * as React$1 from "react";
import { PureComponent, ReactNode } from "react";
import * as react_jsx_runtime0 from "react/jsx-runtime";
import { AngleDegrees, AngleRadians, ElementType, KeysWhere, MarkType } from "@kablamo/kerosene";

//#region src/hooks/useAbortController.d.ts

/**
 * Custom hook which manages a series of `AbortController`s, aborting the previous when requesting
 * the `next`, and aborting the final controller on unmount
 *
 * e.g.
 *
 * ```typescript
 * const { next } = useAbortController();
 * const onClick = useCallback(() => {
 *   const controller = next();
 *   // all but the latest fetch is aborted, and is also aborted if the component unmounts
 *   fetch(url, { signal: controller.signal }).then(transformAndCheckStatus).then((data) => {
 *     if (controller.signal.aborted) return;
 *     setState(data);
 *   });
 * }, [next]);
 * ```
 */
declare function useAbortController(): {
  next: () => AbortController;
  ref: React$1.RefObject<AbortController | undefined>;
};
//#endregion
//#region src/hooks/useCollapsable.d.ts
interface UseCollapsableReturn {
  ref: React$1.RefObject<HTMLElement | null>;
  /**
   * Until `HTMLElement.inert` has widespread support, this flag can be used to determine whether to render child elements
   * of the collapsable container so that they are excluded from the accessibility tree and are not interactable via
   * keyboard.
   */
  render: boolean;
  /**
   * Styles to be applied to the collapsable element including:
   * - `maxHeight`
   * - `overflow`
   * - `transitionDuration`
   * - `transitionProperty`
   * - `transitionTimingFunction`
   */
  style: React$1.CSSProperties;
}
/**
 * Custom hook which manages height transitions on the element that `ref` is applied to using `maxHeight`
 * @param open
 * @param options
 */
declare function useCollapsable(open: boolean, {
  immediate,
  transitionDuration: animatedTransitionDuration,
  transitionTimingFunction
}?: {
  immediate?: boolean;
  transitionDuration?: number;
  transitionTimingFunction?: React$1.CSSProperties["transitionTimingFunction"];
}): UseCollapsableReturn;
//#endregion
//#region src/hooks/useCurrentTime.d.ts
/**
 * Custom hook which uses a shared `CurrentTimeEmitter` class to listen for time updates in a performant way.
 * Will update at least once every `period` milliseconds whilst the page is visible. Uses only a single interval to
 * avoid overloading the browser when there are a large number of components listening to the time. Whilst this hook
 * will attempt to updates components only as-required, it is not recommended to use this hook for extremely frequent
 * updates (sub 1-second) and for such specific cases, `requestAnimationFrame` should be used instead.
 * @param period Interval period
 * @returns `currentTime`
 */
declare function useCurrentTime(period?: number): number;
interface CurrentTimeProviderProps {
  children?: React$1.ReactNode;
  defaultPeriod?: number;
  ssrTime?: number;
}
/**
 * Context Provider for the CurrentTimeEmitter used internally by the `useCurrentTime` hook.
 * Recommended for use when using SSR so that on initial render and hydration a consistent and correct time will be used.
 * @param props.children
 * @param props.defaultPeriod
 * @param props.ssrTime Unix epoch milliseconds for initial SSR render
 */
declare const CurrentTimeProvider: ({
  children,
  defaultPeriod,
  ssrTime
}: CurrentTimeProviderProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/hooks/useInlineCSS.d.ts
type CSSStylePropertyKey = KeysWhere<Omit<CSSStyleDeclaration, number>, string> | `--${string}`;
interface UseInlineCSSOptions<PropertyKey extends CSSStylePropertyKey> {
  property: PropertyKey;
  value?: (PropertyKey extends keyof React$1.CSSProperties ? Extract<React$1.CSSProperties[PropertyKey], string> : string) | null;
  priority?: "important" | "";
}
/**
 * Custom hook which applies a CSS `property` `value` with `priority` to the element provided in `refOrSelector`
 * @param options.property
 * @param options.value
 * @param options.priority
 * @param refOrSelector
 */
declare function useInlineCSS<PropertyKey extends CSSStylePropertyKey, T extends HTMLElement | SVGElement>({
  property,
  value,
  priority
}: UseInlineCSSOptions<PropertyKey>, refOrSelector?: React$1.RefObject<T | null> | "html" | "body"): void;
//#endregion
//#region src/hooks/useInterval.d.ts
/**
 * Custom React Hook that makes `setInterval` work declaratively with hooks
 * @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 *
 * @param callback
 * @param delay
 */
declare function useInterval(callback: () => void, delay: number | null): void;
//#endregion
//#region src/hooks/useIsOnline.d.ts
/**
 * Custom hook which returns the current value of `navigator.onLine`, watching for changes via the
 * `"online"` and `"offline"` events
 */
declare function useIsOnline(): boolean;
//#endregion
//#region src/hooks/useIsomorphicLayoutEffect.d.ts
/**
 * Please avoid using this unless it is absolutely required. Most of the time, what you actually want is just
 * `React.useEffect()`, or may be accomplished more correctly with
 * `React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)`.
 *
 * Most of the time `React.useEffect()` should be used if what you need doesn't need to happen before the render is
 * ready for the user, e.g. making a network call.
 *
 * Sometimes, however, you don't want a brief intermediate state shown to the user if the result is available
 * immediately on the client and this is where `React.useLayoutEffect()` is useful. For hydration from SSR, this
 * actually makes no difference (and hence the reason why React recommends you just use `React.useEffect()`), since the
 * intermediate state would be shown anyway before React finishes hydrating.
 *
 * But when moving between pages client side, you want to avoid an intermediate flash which could result after a change
 * in `React.useEffect()`, but not `React.useLayoutEffect()` (which is called synchronously after render). It may also
 * be worth checking whether `React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)` is a better fit
 * for your use case, and would avoid a double render.
 */
declare const useIsomorphicLayoutEffect: typeof React$1.useEffect;
//#endregion
//#region src/hooks/useKonamiCode.d.ts
/**
 * Creates a hook that will call the callback when the `code` is entered
 *
 * Note: If the `code` only contains basic keys it can be supplied as a string. For keys that do not have a single
 * character representation, `KeyboardEvent#key` values may be specified in an array
 * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
 *
 * @param code
 * @param callback
 */
declare function useKonamiCode(code: string | readonly string[], callback: () => void): void;
//#endregion
//#region src/hooks/storage.d.ts
declare const CUSTOM_STORAGE_EVENT_NAME = "@kablamo/kerosene-ui/storage";
interface CustomStorageEventInit {
  readonly key: string | null;
  readonly newValue: string | null;
  readonly oldValue: string | null;
  readonly storageArea: Storage | null;
  readonly url: string;
}
declare global {
  interface WindowEventMap {
    [CUSTOM_STORAGE_EVENT_NAME]: CustomEvent<CustomStorageEventInit>;
  }
}
/**
 * Custom hook which allows reading/writing of `localStorage` in a manner similar to `React.useState`
 * @param key localStorage key
 * @param defaultValue Value used when `localStorage` contains an empty or invalid value
 * @param isT Type guard function which checks that the parsed value from `localStorage` is of type `T`
 */
declare const useLocalStorage: <T>(key: string, defaultValue: T, isT: (value: unknown) => value is T) => readonly [T, (value: React$1.SetStateAction<T>) => void];
/**
 * Custom hook which allows reading/writing of `sessionStorage` in a manner similar to `React.useState`
 * @param key sessionStorage key
 * @param defaultValue Value used when `sessionStorage` contains an empty or invalid value
 * @param isT Type guard function which checks that the parsed value from `sessionStorage` is of type `T`
 */
declare const useSessionStorage: <T>(key: string, defaultValue: T, isT: (value: unknown) => value is T) => readonly [T, (value: React$1.SetStateAction<T>) => void];
//#endregion
//#region src/hooks/useMediaQuery.d.ts
interface UseMediaQueryOptions {
  /**
   * Default for SSR
   * @default false
   */
  defaultMatches?: boolean;
}
/**
 * Custom hook which returns the result of the provided media `query`, watching for changes
 * @param query `query` passed to `window.matchMedia(query)`
 * @param options
 */
declare function useMediaQuery(query: string, {
  defaultMatches
}?: UseMediaQueryOptions): boolean;
//#endregion
//#region src/hooks/useMergedRefs.d.ts
/**
 * Custom hook which creates a new callback ref that effectively merges all provided `refs`.
 *
 * Note: React 19 callback refs with cleanup are not supported as this is impossible without library support.
 * @see https://github.com/facebook/react/issues/29757
 *
 * @param refs
 */
declare function useMergedRefs<T>(...refs: Array<React$1.Ref<T> | undefined>): React$1.RefCallback<T>;
//#endregion
//#region src/hooks/usePageVisibility.d.ts
declare function usePageVisibility(useState?: true): [boolean, React$1.RefObject<boolean>];
declare function usePageVisibility(useState: false): React$1.RefObject<boolean>;
//#endregion
//#region src/hooks/usePopup.d.ts
/**
 * Custom Hook for a popup portal
 * @param zIndex
 * @param inside List of refs that are considered _inside_ the popup - useful for portals
 */
declare function usePopup(zIndex?: string | null, inside?: readonly React$1.RefObject<HTMLElement>[]): {
  scrollX: number;
  scrollY: number;
  open: boolean;
  setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
  ref: React$1.RefObject<Element | null>;
  rect: {
    top: number;
    right: number;
    bottom: number;
    left: number;
  };
  portalEl: React$1.RefObject<HTMLDivElement | null>;
};
//#endregion
//#region src/hooks/usePrevious.d.ts
declare function usePrevious<T>(value: T, initialValue?: undefined): T | undefined;
declare function usePrevious<T, U>(value: T, initialValue: U): T | U;
//#endregion
//#region src/hooks/useRafThrottle.d.ts
/**
 * Custom hook for throttling a callback with `requestAnimationFrame`.
 * `cancelAnimationFrame` will automatically be called on component unmount.
 *
 * @param callback
 */
declare function useRafThrottle<T extends any[]>(callback: (...args: T) => void): ((...args: T) => void) & {
  cancel: () => void;
};
//#endregion
//#region src/utils/css.d.ts
declare const SIDES: readonly ["top", "right", "bottom", "left"];
//#endregion
//#region src/hooks/useRect.d.ts
type Rect = { [side in ElementType<typeof SIDES>]: number };
type ScrollPosition = {
  scrollX: number;
  scrollY: number;
};
/**
 * Custom React Hook for reading bounding rect of a DOM Element
 * @param disable When set to `true`, updating the rect will be disabled
 * @param eventList Listens for specified event types and triggers update
 */
declare function useRect(disable?: boolean, eventList?: ReadonlyArray<keyof WindowEventMap>): [React$1.RefObject<Element | null>, Rect, ScrollPosition];
//#endregion
//#region src/hooks/useStableIdentity.d.ts
/**
 * Custom hook which provides a stable identity between renders for `value` which is equal to the previous value
 * according to the `isEqual` function
 * @param value
 * @param isEqual
 */
declare function useStableIdentity<T>(value: T, isEqual?: (value: T, other: T) => boolean): T;
//#endregion
//#region src/hooks/useTimeZone.d.ts
declare global {
  interface WindowEventHandlersEventMap {
    timezonechange: Event;
  }
  interface WindowEventHandlers {
    ontimezonechange?: ((this: Window, ev: Event) => any) | null;
  }
}
/**
 * Custom hook which returns the current `timeZone`.
 *
 * Defaults to `"Etc/UTC"` during SSR and hydration, but this may be overriden with a provider
 * `<TimeZoneProvider ssrTimeZone={timeZone}>`. Ensure that the value used during SSR and hydration is the same.
 * @returns IANA tz database identifier
 * @see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
 */
declare function useTimeZone(): string;
interface TimeZoneProviderProps {
  children?: React$1.ReactNode;
  /** IANA tz database identifier */
  ssrTimeZone: string;
}
/**
 * Context Provider for the `useTimeZone` hook. May be used to override the default `"Etc/UTC"` `timeZone` value during
 * SSR and hydration.
 * @param props.children
 * @param props.ssrTimeZone IANA tz database identifier
 */
declare const TimeZoneProvider: ({
  children,
  ssrTimeZone
}: TimeZoneProviderProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/hooks/useUpdatingRef.d.ts
/**
 * Custom hook which creates a ref to the `value` which is kept up-to-date after each render in `useLayoutEffect`
 * @param value
 */
declare function useUpdatingRef<T>(value: T): React$1.RefObject<T>;
//#endregion
//#region src/components/ShowWhen/index.d.ts
interface ShowWhenProps {
  when: boolean;
  children: ReactNode;
}
declare class ShowWhen extends PureComponent<ShowWhenProps> {
  render(): ReactNode;
}
//#endregion
//#region src/types/index.d.ts
/**
 * Unwraps the decorated typings from a decorator-wrapped components to provide the original type of the underlying
 * component. Useful in unit testing when stubbing decorators with the identity function.
 */
type UnwrapComponent<T> = T extends React.MemoExoticComponent<infer TMemoComponent> ? UnwrapComponent<TMemoComponent> : T extends React.LazyExoticComponent<infer TLazyComponent> ? UnwrapComponent<TLazyComponent> : "WrappedComponent" extends keyof T ? UnwrapComponent<T["WrappedComponent"]> : T;
//#endregion
//#region src/utils/getSafeAreaInsets.d.ts
type SafeAreaInsets = { [side in ElementType<typeof SIDES>]: number };
/**
 * Return the safe area insets
 */
declare function getSafeAreaInsets(): SafeAreaInsets;
//#endregion
//#region src/utils/getTextWidth.d.ts
interface FontDetails {
  family: string;
  size: string;
  style?: string;
  weight?: string;
}
/**
 * Calculates the width of the provided text with 2D Canvas
 * @param text
 * @param font Font Details
 */
declare function getTextWidth(text: string, font: FontDetails): number;
//#endregion
//#region src/utils/getViewportDimensions.d.ts
interface ViewportDimensions {
  height: number;
  width: number;
}
/**
 * Returns the viewport dimensions
 *
 * iOS PWAs with no browser chrome (standalone mode) report `window.innerHeight` and `window.innerWidth` incorrectly
 * as a square with sides equal to the minimum of the height and width when the device is rotated.
 *
 * Instead, `screen.height` and `screen.width` may be used to measure the device height/width in its default
 * orientation (portrait) in tandem with media query to detect the current orientation so that the correct dimensions
 * are used. This cannot be used in regular Safari as the screen dimensions do not match the actual size of the viewport.
 */
declare function getViewportDimensions(): ViewportDimensions;
//#endregion
//#region src/utils/isInViewport.d.ts
/**
 * Returns whether or not a given `element` is within the current viewport
 * @param element
 */
declare function isInViewport(element: Element): boolean;
//#endregion
//#region src/utils/isPwa.d.ts
/**
 * Returns whether the current page is a PWA
 */
declare function isPwa(): boolean;
//#endregion
//#region src/utils/listeners.d.ts
declare const ADD_EVENT_LISTENER_PASSIVE_OPTIONS: boolean | {
  readonly passive: true;
};
declare const REMOVE_EVENT_LISTENER_PASSIVE_OPTIONS: {};
declare const ADD_EVENT_LISTENER_CAPTURE_PASSIVE_OPTIONS: boolean | {
  readonly capture: true;
  readonly passive: true;
};
declare const REMOVE_EVENT_LISTENER_CAPTURE_PASSIVE_OPTIONS: boolean | {
  readonly capture: true;
};
//#endregion
//#region src/utils/measureCSSProperty.d.ts
/**
 * Measures a CSS `property` at the provided `element` by injecting a `<noscript />` element and setting the style
 * `property` to `value` and measuring with `window.getComputedStyle`.
 *
 * Useful for measuring CSS Custom Properties that contain calc expressions, e.g.
 *
 * ```css
 * :root {
 *   --header-height: 48px;
 * }
 *
 * @media only screen and (min-width: 768px) {
 *   :root {
 *     --header-height: 72px;
 *   }
 * }
 * ```
 *
 * ```typescript
 * const headerHeight = measureCSSProperty(document.body, "paddingTop", "var(--header-height, 0px)");
 * ```
 *
 * @param element
 * @param property
 * @param value
 */
declare function measureCSSProperty<P extends keyof CSSStyleDeclaration>(element: Element, property: P, value: CSSStyleDeclaration[P]): CSSStyleDeclaration[P];
//#endregion
//#region src/utils/mergeRefs.d.ts
/**
 * Returns a new callback ref that effectively merges all provided `refs`
 *
 * Note: React 19 callback refs with cleanup are not supported as this is impossible without library support.
 * @see https://github.com/facebook/react/issues/29757
 *
 * @param refs
 */
declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T>;
//#endregion
//#region src/utils/rafThrottle.d.ts
/**
 * Throttles the provided `callback` with `window.requestAnimationFrame`
 * @param callback
 */
declare function rafThrottle<T extends any[]>(callback: (...args: T) => void): ((...args: T) => void) & {
  cancel: () => void;
};
//#endregion
//#region src/utils/svg.d.ts
type Point2D = MarkType<readonly [x: number, y: number], "Point2D">;
type Delta2D = MarkType<readonly [dx: number, dy: number], "Delta2D">;
type PolarVector2D = MarkType<readonly [r: number, theta: AngleRadians], "PolarVector2D">;
/**
 * Collection of SVG path d utils
 */
declare const d: {
  /**
   *
   * @param rx
   * @param ry
   * @param angle Angle in degrees (not radians)
   * @param largeArc
   * @param clockwise
   * @param delta
   */
  arcBy(rx: number, ry: number, angle: AngleDegrees, largeArc: boolean, clockwise: boolean, [dx, dy]: Delta2D): string;
  /**
   *
   * @param rx
   * @param ry
   * @param angle Angle in degrees (not radians)
   * @param largeArc
   * @param clockwise
   * @param point
   */
  arcTo(rx: number, ry: number, angle: AngleDegrees, largeArc: boolean, clockwise: boolean, [x, y]: Point2D): string;
  closePath(): string;
  cubicBezierBy([dx1, dy1]: Delta2D, [dx2, dy2]: Delta2D, [dx, dy]: Delta2D): string;
  cubicBezierTo([x1, y1]: Point2D, [x2, y2]: Point2D, [x, y]: Point2D): string;
  lineBy([dx, dy]: Delta2D): string;
  lineTo([x, y]: Point2D): string;
  moveBy([dx, dy]: Delta2D): string;
  moveTo([x, y]: Point2D): string;
  quadraticBezierBy([dx1, dy1]: Delta2D, [dx, dy]: Delta2D): string;
  quadraticBezierTo([x1, y1]: Point2D, [x, y]: Point2D): string;
  smoothCubicBezierBy([dx2, dy2]: Delta2D, [dx, dy]: Delta2D): string;
  smoothCubicBezierTo([x2, y2]: Point2D, [x, y]: Point2D): string;
  smoothQuadraticBezierBy([dx, dy]: Delta2D): string;
  smoothQuadraticBezierTo([x, y]: Point2D): string;
};
/**
 * Adds the vector `[r, theta]` to Point2D `[x, y]`
 * @param x Point2D cartesian x-coordinate
 * @param y Point2D cartesian y-coordinate
 * @param r Polar vector length
 * @param theta Polar vector angle in radians
 */
declare function point2DPlusPolarVector([x, y]: Point2D, [r, theta]: PolarVector2D): Point2D;
//#endregion
//#region src/utils/waitForRepaint.d.ts
/**
 * Returns a cancellable promise which resolves after a layout reflow/repaint
 * @param options.signal
 */
declare function waitForRepaint({
  signal
}?: {
  signal?: AbortSignal;
}): Promise<void> & {
  cancel: () => void;
};
//#endregion
//#region src/utils/createTestIds.d.ts
declare function createTestIds<N extends string>(name: string, components: readonly N[]): { [key in N]: string };
//#endregion
export { ADD_EVENT_LISTENER_CAPTURE_PASSIVE_OPTIONS, ADD_EVENT_LISTENER_PASSIVE_OPTIONS, type CSSStylePropertyKey, CurrentTimeProvider, type CurrentTimeProviderProps, type CustomStorageEventInit, Delta2D, type FontDetails, Point2D, PolarVector2D, REMOVE_EVENT_LISTENER_CAPTURE_PASSIVE_OPTIONS, REMOVE_EVENT_LISTENER_PASSIVE_OPTIONS, type SafeAreaInsets, ShowWhen, TimeZoneProvider, type TimeZoneProviderProps, UnwrapComponent, type UseCollapsableReturn, type UseInlineCSSOptions, type ViewportDimensions, createTestIds, d, getSafeAreaInsets, getTextWidth, getViewportDimensions, isInViewport, isPwa, measureCSSProperty, mergeRefs, point2DPlusPolarVector, rafThrottle, useAbortController, useCollapsable, useCurrentTime, useInlineCSS, useInterval, useIsOnline, useIsomorphicLayoutEffect, useKonamiCode, useLocalStorage, useMediaQuery, useMergedRefs, usePageVisibility, usePopup, usePrevious, useRafThrottle, useRect, useSessionStorage, useStableIdentity, useTimeZone, useUpdatingRef, waitForRepaint };
//# sourceMappingURL=index.d.cts.map