@baseline-ui/core 0.59.0 → 0.60.0

package/dist/hooks/useLocalStorage.d.ts

@@ -0,0 +1,20 @@
+import type { Dispatch, SetStateAction } from "react";
+export type SetValue<T> = Dispatch<SetStateAction<T>>;
+/**
+ * A hook to persist a value to localStorage.
+ *
+ * @example
+ *   ```tsx
+ *   function MyComponent() {
+ *    const [value, setValue] = useLocalStorage("my-value", "default-value");
+ *    return (
+ *    <input value={value} onChange={e => setValue(e.target.value)} />
+ *    );
+ *   }
+ *   ```;
+ *
+ * @param key The localStorage key to use
+ * @param initialValue The initial value to use if the key is not found in
+ *   localStorage
+ */
+export declare function useLocalStorage<T>(key: string, initialValue: T): [T, SetValue<T>];

package/dist/hooks/useMedia.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+/** A hook for managing media playback. */
+export declare function useMedia(ref: React.RefObject<HTMLAudioElement | HTMLVideoElement>): {
+    isPlaying: boolean;
+    progress: number;
+    duration: number;
+    togglePlay: () => void;
+    seek: (value: number) => void;
+    setProgress: React.Dispatch<React.SetStateAction<number>>;
+    formattedCurrentTime: string;
+    formattedDuration: string;
+    setIsSliderDragging: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/hooks/useMutationObserver.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A hook that uses a MutationObserver to watch for changes to the DOM.
+ *
+ * @example
+ *   ```tsx
+ *   const targetRef = React.useRef<HTMLDivElement>(null);
+ *
+ *   useMutationObserver(targetRef.current, { attributes: true }, (mutations) => {
+ *    console.log(mutations);
+ *    // do something with the mutations
+ *    // ...
+ *   });
+ *   ```;
+ *
+ * @param target The element to observe for changes.
+ * @param options The options to pass to the MutationObserver.
+ * @param callback The callback to call when a mutation occurs.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+ */
+export declare function useMutationObserver(target: Element | null, options: MutationObserverInit, callback: MutationCallback): MutationObserver | null;

package/dist/hooks/usePortalContainer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Custom hook for accessing PortalContainerProviderContext. This hook allows
+ * components to either use a specified portal container or fallback to a
+ * default provided via context.
+ *
+ * @param _portalContainer - An optional HTML element that can be specified as
+ *   an override.
+ * @returns The portal container element where components should be rendered,
+ *   either the overridden container, one from context or undefined.
+ */
+export declare function usePortalContainer(_portalContainer?: HTMLElement): HTMLElement | undefined;

package/dist/hooks/usePreventFocus.d.ts

@@ -0,0 +1,23 @@
+import type React from "react";
+/**
+ * This focus prevents the user from interacting with the element or its
+ * children. It is useful for components that are not interactive but need to
+ * prevent focus from being trapped inside them.
+ *
+ * @example
+ *   ```tsx
+ *   const ref = useRef<HTMLDivElement>(null);
+ *   usePreventFocus({ ref, isDisabled: false });
+ *
+ *   <div ref={ref}>
+ *     <button>Button</button>
+ *     <input type="text" />
+ *   </div>
+ *   ```;
+ */
+export declare function usePreventFocus({ ref, isDisabled, }: {
+    /** The ref to the element that will be prevented from receiving focus. */
+    ref: React.RefObject<HTMLElement>;
+    /** Whether the focus prevention is disabled. */
+    isDisabled?: boolean;
+}): void;

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+/**
+ * A hook that observes the size changes of a DOM element using the
+ * ResizeObserver API.
+ *
+ * @example
+ *   ```tsx
+ *   const ref = useRef<HTMLDivElement>(null);
+ *
+ *   const { size } = useResizeObserver({
+ *    ref,
+ *    onResize: (entry) => {
+ *    // do something
+ *    },
+ *    isDisabled: false,
+ *   });
+ *   ```;
+ *
+ * @param {Object} options - The options object.
+ * @param {React.RefObject<HTMLElement>} options.ref - The ref object that
+ *   points to the observed element.
+ * @param {Function} options.onResize - The callback function that is called
+ *   when the element is resized.
+ * @param {boolean} options.isDisabled - A flag that indicates whether the
+ *   observer is disabled.
+ * @returns {Object} An object that contains the size of the observed element.
+ */
+export declare function useResizeObserver({ ref, onResize, isDisabled, }: ResizeObserverOptions): {
+    size: {
+        width: number;
+        height: number;
+    } | undefined;
+};
+export interface ResizeObserverOptions {
+    ref: React.RefObject<HTMLElement>;
+    onResize?: (entry: ResizeObserverEntry) => void;
+    isDisabled?: boolean;
+}

package/dist/hooks/useTextSelection.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+/**
+ * A hook that provides text selection functionality for a given HTML element.
+ *
+ * ```jsx
+ * function MyComponent() {
+ *   const ref = useRef();
+ *   const [selection, setSelection] = useState();
+ *
+ *   useTextSelection({
+ *     ref,
+ *     onSelectionChange: setSelection,
+ *   });
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useTextSelection({ ref, onSelectionChange, onSelectionEnd, isDisabled, }: TextSelectionProps): void;
+export interface TextSelectionProps {
+    ref: React.RefObject<HTMLElement>;
+    onSelectionChange: (selection: Selection) => void;
+    onSelectionEnd?: (selection: Selection) => void;
+    isDisabled?: boolean;
+}

package/dist/hooks/useUndoRedo.d.ts

@@ -0,0 +1,44 @@
+/**
+ * A hook that provides undo and redo functionality for a given state.
+ *
+ * @example
+ *   ```tsx
+ *   const { state, push, undo, redo, pastStates, futureStates, canUndo, canRedo } = useUndoRedo({
+ *     onAction: (state, action) => {
+ *     // do something
+ *     },
+ *   });
+ *
+ *   // push a new state
+ *   push({ foo: "bar" });
+ *
+ *   // undo the last state
+ *   undo();
+ *
+ *   // redo the last state
+ *   redo();
+ *   ```;
+ *
+ * @template T The type of the state object.
+ * @param initialState The initial state object.
+ * @param options Additional options for the hook.
+ * @param options.isDisabled Whether the undo/redo functionality should be
+ *   disabled.
+ * @param options.onAction A callback function that is called whenever an undo
+ *   or redo action is performed.
+ * @returns An object containing the current state, undo and redo functions, and
+ *   other related properties.
+ */
+export declare const useUndoRedo: <T>(initialState: T | undefined, { isDisabled, onAction, }: {
+    isDisabled?: boolean;
+    onAction?: (state: T, action: "UNDO" | "REDO") => void;
+}) => {
+    state: T;
+    push: (newState: T) => void;
+    undo: () => void;
+    redo: () => void;
+    pastStates: T[];
+    futureStates: T[];
+    canUndo: boolean;
+    canRedo: boolean;
+};