@primereact/hooks 11.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 PrimeTek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# PrimeReact Hooks

package/index.d.ts

@@ -0,0 +1,7 @@
+export * from './use-attr-selector';
+export * from './use-id';
+export * from './use-mount-effect';
+export * from './use-props';
+export * from './use-unmount-effect';
+export * from './use-update-effect';
+export * from './use-view-transition';

package/index.mjs

@@ -0,0 +1,2 @@
+var l=Object.defineProperty;var i=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var p=(t,r,e)=>r in t?l(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,R=(t,r)=>{for(var e in r||(r={}))P.call(r,e)&&p(t,e,r[e]);if(i)for(var e of i(r))x.call(r,e)&&p(t,e,r[e]);return t};import*as n from"react";function E(t=""){let r=n.useId();return n.useMemo(()=>`${t}${r.replaceAll(/:|«|»/g,"")}`.trim().toLowerCase(),[r,t])}import*as o from"react";function w(t){let r=o.useId(),[e,s]=o.useState(t||`pr_id_${r.replaceAll(/:|«|»/g,"")}`);return o.useEffect(()=>{s(t||`pr_id_${r.replaceAll(/:|«|»/g,"")}`)},[t,r]),e}import*as a from"react";function b(t){let r=a.useRef(!1);a.useEffect(()=>{r.current||(r.current=!0,t==null||t())},[])}import*as m from"react";function T(t={},r={}){return m.useMemo(()=>{let e={props:R({},r),attrs:{}};return Object.entries(t).forEach(([s,u])=>{s in r?e.props[s]=u:e.attrs[s]=u}),e},[t,r])}import*as f from"react";function S(t){f.useEffect(()=>()=>{t==null||t()},[])}import*as c from"react";function $(t,r){let e=c.useRef(!1);c.useEffect(()=>{if(!e.current){e.current=!0;return}return t==null?void 0:t()},r)}import*as d from"react";function M(){return d.useCallback(r=>{document.startViewTransition?document.startViewTransition(()=>{r()}):r()},[])}export{E as useAttrSelector,w as useId,b as useMountEffect,T as useProps,S as useUnmountEffect,$ as useUpdateEffect,M as useViewTransition};
+//# sourceMappingURL=index.mjs.map

package/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-attr-selector/index.ts","../src/use-id/index.ts","../src/use-mount-effect/index.ts","../src/use-props/index.ts","../src/use-unmount-effect/index.ts","../src/use-update-effect/index.ts","../src/use-view-transition/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Generates a unique attribute selector based on the provided prefix.\n *\n * @param prefix - The prefix to prepend to the generated selector.\n * @returns A unique string combining the prefix and the selector.\n *\n * @example\n * ```ts\n * const selector = useAttrSelector('foo');\n * console.log(selector); // e.g., 'foo0'\n * ```\n */\nexport function useAttrSelector(prefix: string = ''): string {\n    const id = React.useId();\n\n    return React.useMemo(() => `${prefix}${id.replaceAll(/:|«|»/g, '')}`.trim().toLowerCase(), [id, prefix]);\n}\n","import * as React from 'react';\n\n/**\n * Generates a unique identifier.\n *\n * @param initialValue Optional initial value for the ID.\n * @returns The generated or provided ID.\n *\n * @example\n * ```tsx\n * const id = useId('foo');\n * console.log(id); // 'foo'\n * ```\n *\n * @example\n * ```tsx\n * const defaultId = useId();\n * console.log(defaultId); // e.g., 'pr_id_0'\n * ```\n */\nexport function useId(initialValue?: string): string {\n    const idx = React.useId();\n    const [idState, setIdState] = React.useState<string>(initialValue || `pr_id_${idx.replaceAll(/:|«|»/g, '')}`);\n\n    React.useEffect(() => {\n        setIdState(initialValue || `pr_id_${idx.replaceAll(/:|«|»/g, '')}`);\n    }, [initialValue, idx]);\n\n    return idState;\n}\n","import * as React from 'react';\n\n/**\n * Custom hook that runs a mount effect only once.\n * This is similar to `useEffect`, but it only runs on mount.\n *\n * @param {React.EffectCallback} effect the callback function\n * @returns {void}\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *     useMountEffect(() => {\n *         console.log('Mounted');\n *     });\n * };\n * ```\n */\nexport function useMountEffect(effect: React.EffectCallback): void {\n    const mounted = React.useRef<boolean>(false);\n\n    React.useEffect(() => {\n        if (!mounted.current) {\n            mounted.current = true;\n\n            effect?.();\n        }\n    }, []);\n}\n","import * as React from 'react';\n\n/**\n * Used to merge and differentiate incoming props with the default props.\n * - Keys that exist in both `props1` and `props2` are placed in `props`, with values from `props1`.\n * - Keys that exist in `props1` but not in `props2` are placed in `attrs`.\n *\n * @template P1 The type of the incoming set of props.\n * @template P2 The type of the default set of props.\n *\n * @param props1 The incoming set of props (e.g., user-defined or dynamic props).\n * @param props2 The default set of props (e.g., default props).\n * @returns An object containing:\n *   - `props`: A new object containing keys that exist in both `props1` and `props2`, using values from `props1`.\n *   - `attrs`: A new object containing keys that exist only in `props1`, excluding any keys from `props2`.\n *\n * @example\n * ```ts\n * const { props, attrs } = useProps({ id: 'foo', className: 'bar' }, { className: 'baz' });\n *\n * console.log(props); // { className: 'bar' }\n * console.log(attrs); // { id: 'foo' }\n * ```\n */\nexport function useProps<P1, P2>(props1: P1 = {} as P1, props2: P2 = {} as P2) {\n    type Props = Pick<P1 & P2, keyof P2>;\n    type Attrs = Omit<P1, keyof P2>;\n    type Result = { props: Props; attrs: Attrs };\n\n    return React.useMemo(() => {\n        const result: Result = { props: { ...props2 } as Props, attrs: {} as Attrs };\n\n        Object.entries(props1 as Record<string, unknown>).forEach(([key, value]) => {\n            if (key in (props2 as Record<string, unknown>)) {\n                (result.props as Record<string, unknown>)[key] = value;\n            } else {\n                (result.attrs as Record<string, unknown>)[key] = value;\n            }\n        });\n\n        return result;\n    }, [props1, props2]);\n}\n","import * as React from 'react';\n\n/**\n * Custom hook that runs an unmount effect only once.\n * This is similar to `useEffect`, but it only runs on unmount.\n *\n * @param {React.EffectCallback} effect the callback function\n * @returns {void}\n *\n * @example\n * ```tsx\n * const Component = () => {\n *     useUnmountEffect(() => {\n *         console.log('Unmounted');\n *     });\n * };\n * ```\n */\nexport function useUnmountEffect(effect: React.EffectCallback): void {\n    React.useEffect(() => {\n        return () => {\n            effect?.();\n        };\n    }, []);\n}\n","import * as React from 'react';\n\n/**\n * Custom hook that runs an update effect whenever dependencies change.\n * This is similar to `useEffect`, but it does not run on mount.\n *\n * @param {React.EffectCallback} effect the callback function\n * @param {React.DependencyList} dependencies the dependencies\n * @returns {void}\n *\n * @example\n * ```tsx\n * const Component = ({ value }) => {\n *     useUpdateEffect(() => {\n *         console.log('Updated');\n *     }, [value]);\n * };\n * ```\n */\nexport function useUpdateEffect(effect: React.EffectCallback, dependencies?: React.DependencyList): void {\n    const mounted = React.useRef<boolean>(false);\n\n    React.useEffect(() => {\n        if (!mounted.current) {\n            mounted.current = true;\n\n            return;\n        }\n\n        return effect?.();\n    }, dependencies);\n}\n","import * as React from 'react';\n\n/**\n * Starts a view transition.\n *\n * @returns A function that starts a view transition.\n *\n * @example\n * ```tsx\n * const Component = () => {\n *     const startTransition = useViewTransition();\n *\n *     const handleClick = () => {\n *         startTransition(() => {\n *             // Perform some work\n *         });\n *     };\n *\n *     return <button onClick={handleClick}>Click me</button>;\n * };\n */\nexport function useViewTransition() {\n    const startTransition = React.useCallback((callback: () => void) => {\n        if (document.startViewTransition) {\n            document.startViewTransition(() => {\n                callback();\n            });\n        } else {\n            callback();\n        }\n    }, []);\n\n    return startTransition;\n}\n"],"mappings":"yVAAA,UAAYA,MAAW,QAchB,SAASC,EAAgBC,EAAiB,GAAY,CACzD,IAAMC,EAAW,QAAM,EAEvB,OAAa,UAAQ,IAAM,GAAGD,CAAM,GAAGC,EAAG,WAAW,SAAU,EAAE,CAAC,GAAG,KAAK,EAAE,YAAY,EAAG,CAACA,EAAID,CAAM,CAAC,CAC3G,CClBA,UAAYE,MAAW,QAoBhB,SAASC,EAAMC,EAA+B,CACjD,IAAMC,EAAY,QAAM,EAClB,CAACC,EAASC,CAAU,EAAU,WAAiBH,GAAgB,SAASC,EAAI,WAAW,SAAU,EAAE,CAAC,EAAE,EAE5G,OAAM,YAAU,IAAM,CAClBE,EAAWH,GAAgB,SAASC,EAAI,WAAW,SAAU,EAAE,CAAC,EAAE,CACtE,EAAG,CAACD,EAAcC,CAAG,CAAC,EAEfC,CACX,CC7BA,UAAYE,MAAW,QAkBhB,SAASC,EAAeC,EAAoC,CAC/D,IAAMC,EAAgB,SAAgB,EAAK,EAErC,YAAU,IAAM,CACbA,EAAQ,UACTA,EAAQ,QAAU,GAElBD,GAAA,MAAAA,IAER,EAAG,CAAC,CAAC,CACT,CC5BA,UAAYE,MAAW,QAwBhB,SAASC,EAAiBC,EAAa,CAAC,EAASC,EAAa,CAAC,EAAS,CAK3E,OAAa,UAAQ,IAAM,CACvB,IAAMC,EAAiB,CAAE,MAAOC,EAAA,GAAKF,GAAmB,MAAO,CAAC,CAAW,EAE3E,cAAO,QAAQD,CAAiC,EAAE,QAAQ,CAAC,CAACI,EAAKC,CAAK,IAAM,CACpED,KAAQH,EACPC,EAAO,MAAkCE,CAAG,EAAIC,EAEhDH,EAAO,MAAkCE,CAAG,EAAIC,CAEzD,CAAC,EAEMH,CACX,EAAG,CAACF,EAAQC,CAAM,CAAC,CACvB,CC1CA,UAAYK,MAAW,QAkBhB,SAASC,EAAiBC,EAAoC,CAC3D,YAAU,IACL,IAAM,CACTA,GAAA,MAAAA,GACJ,EACD,CAAC,CAAC,CACT,CCxBA,UAAYC,MAAW,QAmBhB,SAASC,EAAgBC,EAA8BC,EAA2C,CACrG,IAAMC,EAAgB,SAAgB,EAAK,EAErC,YAAU,IAAM,CAClB,GAAI,CAACA,EAAQ,QAAS,CAClBA,EAAQ,QAAU,GAElB,MACJ,CAEA,OAAOF,GAAA,YAAAA,GACX,EAAGC,CAAY,CACnB,CC/BA,UAAYE,MAAW,QAqBhB,SAASC,GAAoB,CAWhC,OAV8B,cAAaC,GAAyB,CAC5D,SAAS,oBACT,SAAS,oBAAoB,IAAM,CAC/BA,EAAS,CACb,CAAC,EAEDA,EAAS,CAEjB,EAAG,CAAC,CAAC,CAGT","names":["React","useAttrSelector","prefix","id","React","useId","initialValue","idx","idState","setIdState","React","useMountEffect","effect","mounted","React","useProps","props1","props2","result","__spreadValues","key","value","React","useUnmountEffect","effect","React","useUpdateEffect","effect","dependencies","mounted","React","useViewTransition","callback"]}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@primereact/hooks",
+  "version": "11.0.0-alpha.1",
+  "author": "PrimeTek Informatics",
+  "description": "",
+  "homepage": "https://primereact.org/",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/primefaces/primereact.git",
+    "directory": "packages/hooks"
+  },
+  "bugs": {
+    "url": "https://github.com/primefaces/primereact/issues"
+  },
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "default": "./index.mjs"
+    },
+    "./*": {
+      "types": "./*/index.d.ts",
+      "import": "./*/index.mjs",
+      "default": "./*/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@primeuix/utils": "^0.6.0-beta.2"
+  }
+}

package/use-attr-selector/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Generates a unique attribute selector based on the provided prefix.
+ *
+ * @param prefix - The prefix to prepend to the generated selector.
+ * @returns A unique string combining the prefix and the selector.
+ *
+ * @example
+ * ```ts
+ * const selector = useAttrSelector('foo');
+ * console.log(selector); // e.g., 'foo0'
+ * ```
+ */
+export declare function useAttrSelector(prefix?: string): string;

package/use-attr-selector/index.mjs

@@ -0,0 +1,2 @@
+import*as t from"react";function o(e=""){let r=t.useId();return t.useMemo(()=>`${e}${r.replaceAll(/:|«|»/g,"")}`.trim().toLowerCase(),[r,e])}export{o as useAttrSelector};
+//# sourceMappingURL=index.mjs.map

package/use-attr-selector/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-attr-selector/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Generates a unique attribute selector based on the provided prefix.\n *\n * @param prefix - The prefix to prepend to the generated selector.\n * @returns A unique string combining the prefix and the selector.\n *\n * @example\n * ```ts\n * const selector = useAttrSelector('foo');\n * console.log(selector); // e.g., 'foo0'\n * ```\n */\nexport function useAttrSelector(prefix: string = ''): string {\n    const id = React.useId();\n\n    return React.useMemo(() => `${prefix}${id.replaceAll(/:|«|»/g, '')}`.trim().toLowerCase(), [id, prefix]);\n}\n"],"mappings":"AAAA,UAAYA,MAAW,QAchB,SAASC,EAAgBC,EAAiB,GAAY,CACzD,IAAMC,EAAW,QAAM,EAEvB,OAAa,UAAQ,IAAM,GAAGD,CAAM,GAAGC,EAAG,WAAW,SAAU,EAAE,CAAC,GAAG,KAAK,EAAE,YAAY,EAAG,CAACA,EAAID,CAAM,CAAC,CAC3G","names":["React","useAttrSelector","prefix","id"]}

package/use-attr-selector/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/use-controlled-state/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The options for the `useControlledState` hook.
+ */
+export interface UseControlledStateOptions<T = unknown, E = unknown> {
+    /**
+     * The value of the controlled state.
+     */
+    value?: T | undefined;
+    /**
+     * The default value of the uncontrolled state.
+     */
+    defaultValue?: T | undefined;
+    /**
+     * Callback function that is called when the value changes.
+     */
+    onChange?: (newValue: E) => void;
+}
+/**
+ * The return type of the `useControlledState` hook.
+ * A tuple containing the current value and a function to update it.
+ */
+export type UseControlledStateReturnType<T = unknown> = [T | undefined, (inValue: unknown | ((prev?: T) => unknown)) => void, boolean];
+/**
+ * A custom hook that manages controlled and uncontrolled state.
+ *
+ * @param {UseControlledStateOptions} options - The options for the controlled state.
+ * @returns A tuple containing the current value and a function to update it.
+ *
+ * @example
+ * ```tsx
+ * const ControlledComponent = () => {
+ *    const [controlledValue, setControlledValue] = React.useState('');
+ *
+ *    const [value, setValue] = useControlledState({
+ *        value: controlledValue,
+ *        defaultValue: 'initial value',
+ *        onChange: (newValue) => {
+ *           setControlledValue(newValue);
+ *        }
+ *    });
+ *
+ *   return <Component value={value} onChange={(e) => setValue(e.target.value)} />;
+ * };
+ * ```
+ */
+export declare function useControlledState<T = unknown, E = T>({ value, defaultValue, onChange }: UseControlledStateOptions<T, E>): UseControlledStateReturnType<T | undefined>;

package/use-controlled-state/index.mjs

@@ -0,0 +1,2 @@
+import{resolve as p}from"@primeuix/utils";import*as t from"react";function w({value:o,defaultValue:r,onChange:n}){let[s,d]=t.useState(r!=null?r:o),e=o!==void 0,u=e?o:s,a=t.useCallback(i=>{let[l,T]=p(i,u,e);n==null||n(T),e||d(l)},[u,e,n]);return[u,a,e]}export{w as useControlledState};
+//# sourceMappingURL=index.mjs.map

package/use-controlled-state/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-controlled-state/index.ts"],"sourcesContent":["import { resolve } from '@primeuix/utils';\nimport * as React from 'react';\n\n/**\n * The options for the `useControlledState` hook.\n */\nexport interface UseControlledStateOptions<T = unknown, E = unknown> {\n    /**\n     * The value of the controlled state.\n     */\n    value?: T | undefined;\n    /**\n     * The default value of the uncontrolled state.\n     */\n    defaultValue?: T | undefined;\n    /**\n     * Callback function that is called when the value changes.\n     */\n    onChange?: (newValue: E) => void;\n}\n\n/**\n * The return type of the `useControlledState` hook.\n * A tuple containing the current value and a function to update it.\n */\nexport type UseControlledStateReturnType<T = unknown> = [T | undefined, (inValue: unknown | ((prev?: T) => unknown)) => void, boolean];\n\n/**\n * A custom hook that manages controlled and uncontrolled state.\n *\n * @param {UseControlledStateOptions} options - The options for the controlled state.\n * @returns A tuple containing the current value and a function to update it.\n *\n * @example\n * ```tsx\n * const ControlledComponent = () => {\n *    const [controlledValue, setControlledValue] = React.useState('');\n *\n *    const [value, setValue] = useControlledState({\n *        value: controlledValue,\n *        defaultValue: 'initial value',\n *        onChange: (newValue) => {\n *           setControlledValue(newValue);\n *        }\n *    });\n *\n *   return <Component value={value} onChange={(e) => setValue(e.target.value)} />;\n * };\n * ```\n */\nexport function useControlledState<T = unknown, E = T>({ value, defaultValue, onChange }: UseControlledStateOptions<T, E>): UseControlledStateReturnType<T | undefined> {\n    const [valueState, setValueState] = React.useState<T | undefined>(defaultValue ?? value);\n\n    const isControlled = value !== undefined;\n    const computedValue = isControlled ? (value as T) : valueState;\n\n    const setValue = React.useCallback(\n        (inValue: unknown | ((prev?: T) => unknown)) => {\n            // @todo - update resolve to accept multiple parameters\n            const [newValue, onChangeParam] = resolve(inValue, computedValue, isControlled) as [T, E];\n\n            onChange?.(onChangeParam);\n\n            if (!isControlled) {\n                setValueState(newValue);\n            }\n        },\n        [computedValue, isControlled, onChange]\n    );\n\n    return [computedValue, setValue, isControlled];\n}\n"],"mappings":"AAAA,OAAS,WAAAA,MAAe,kBACxB,UAAYC,MAAW,QAiDhB,SAASC,EAAuC,CAAE,MAAAC,EAAO,aAAAC,EAAc,SAAAC,CAAS,EAAiF,CACpK,GAAM,CAACC,EAAYC,CAAa,EAAU,WAAwBH,GAAA,KAAAA,EAAgBD,CAAK,EAEjFK,EAAeL,IAAU,OACzBM,EAAgBD,EAAgBL,EAAcG,EAE9CI,EAAiB,cAClBC,GAA+C,CAE5C,GAAM,CAACC,EAAUC,CAAa,EAAIb,EAAQW,EAASF,EAAeD,CAAY,EAE9EH,GAAA,MAAAA,EAAWQ,GAENL,GACDD,EAAcK,CAAQ,CAE9B,EACA,CAACH,EAAeD,EAAcH,CAAQ,CAC1C,EAEA,MAAO,CAACI,EAAeC,EAAUF,CAAY,CACjD","names":["resolve","React","useControlledState","value","defaultValue","onChange","valueState","setValueState","isControlled","computedValue","setValue","inValue","newValue","onChangeParam"]}

package/use-event-listener/index.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+/**
+ * The options for the `useEventListener` hook.
+ */
+export interface UseEventListenerOptions<T = keyof HTMLElementEventMap> {
+    /**
+     * The target element to bind the event listener to.
+     * @default 'document'
+     */
+    target?: 'document' | 'window' | 'body' | HTMLElement | (() => HTMLElement) | React.Ref<HTMLElement> | string | null;
+    /**
+     * The event type to listen for.
+     */
+    type: T | string;
+    /**
+     * The event listener callback.
+     */
+    listener: EventListener;
+    /**
+     * The event listener options
+     */
+    options?: AddEventListenerOptions | boolean;
+    /**
+     * A boolean indicating whether the event listener should be active.
+     */
+    when?: boolean;
+}
+/**
+ * The return type of the `useEventListener` hook.
+ * A tuple containing functions;
+ * 1. `bind` function is used to bind the event listener.
+ * 2. `unbind` function is used to unbind the event listener.
+ */
+export type UseEventListenerReturnType = [(options?: Partial<Omit<UseEventListenerOptions, 'target'>> & {
+    target?: UseEventListenerOptions['target'] | Document | null;
+}) => void, () => void];
+/**
+ * Listens for the specified event type on the target element.
+ *
+ * @param {UseEventListenerOptions} options - The options for the event listener.
+ * @returns A tuple containing functions;
+ * 1. `bind` function is used to bind the event listener.
+ * 2. `unbind` function is used to unbind the event listener.
+ *
+ * @example
+ * ```tsx
+ * const Component = () => {
+ *     const [bind, unbind] = useEventListener({
+ *         target: 'document',
+ *         type: 'click',
+ *         listener: (event) => {
+ *             console.log(event);
+ *         },
+ *         when: true
+ *     });
+ *
+ *     return <div>Click me</div>;
+ * };
+ *
+ * @example
+ * ```tsx
+ * const Component = () => {
+ *     const [bind, unbind] = useEventListener({
+ *         target: () => document.querySelector('.element'),
+ *         type: 'mouseover',
+ *         listener: (event) => {
+ *             console.log(event);
+ *         }
+ *     });
+ *
+ *     return <div>MouseOver to `.element`</div>;
+ * };
+ * ```
+ */
+export declare function useEventListener({ target, type, listener, options, when }: UseEventListenerOptions): UseEventListenerReturnType;

package/use-event-listener/index.mjs

@@ -0,0 +1,2 @@
+import{getTargetElement as T,isNotEmpty as g}from"@primeuix/utils";import*as e from"react";import*as E from"react";function m(u){let r=E.useRef(null);return E.useEffect(()=>(r.current=u,()=>{r.current=null}),[u]),r.current}function H({target:u="document",type:r,listener:i,options:c,when:o=!0}){let s=e.useRef(null),t=e.useRef(null),p=m(i),v=m(c),L=(n={})=>{let{target:a}=n;g(a)&&(l(),(n.when||o)&&(s.current=T(a))),!t.current&&s.current&&(t.current=f=>i&&i(f),s.current.addEventListener(r,t.current,c))},l=()=>{var n;t.current&&((n=s.current)==null||n.removeEventListener(r,t.current,c),t.current=null)},R=()=>{l(),p=null,v=null},d=e.useCallback(()=>{o?s.current=T(u):(l(),s.current=null)},[u,o]);return e.useEffect(()=>()=>{R()},[]),e.useEffect(()=>{d()},[d]),e.useEffect(()=>{let n=`${p}`!=`${i}`,a=v!==c,f=t.current;f&&(n||a)?(l(),o&&L()):f||R()},[i,c,o]),[L,l]}export{H as useEventListener};
+//# sourceMappingURL=index.mjs.map

package/use-event-listener/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-event-listener/index.ts","../../src/use-previous/index.ts"],"sourcesContent":["import { getTargetElement, isNotEmpty } from '@primeuix/utils';\nimport * as React from 'react';\nimport { usePrevious } from '../use-previous';\n\n/**\n * The options for the `useEventListener` hook.\n */\nexport interface UseEventListenerOptions<T = keyof HTMLElementEventMap> {\n    /**\n     * The target element to bind the event listener to.\n     * @default 'document'\n     */\n    target?: 'document' | 'window' | 'body' | HTMLElement | (() => HTMLElement) | React.Ref<HTMLElement> | string | null;\n    /**\n     * The event type to listen for.\n     */\n    type: T | string;\n    /**\n     * The event listener callback.\n     */\n    listener: EventListener;\n    /**\n     * The event listener options\n     */\n    options?: AddEventListenerOptions | boolean;\n    /**\n     * A boolean indicating whether the event listener should be active.\n     */\n    when?: boolean;\n}\n\n/**\n * The return type of the `useEventListener` hook.\n * A tuple containing functions;\n * 1. `bind` function is used to bind the event listener.\n * 2. `unbind` function is used to unbind the event listener.\n */\nexport type UseEventListenerReturnType = [(options?: Partial<Omit<UseEventListenerOptions, 'target'>> & { target?: UseEventListenerOptions['target'] | Document | null }) => void, () => void];\n\n/**\n * Listens for the specified event type on the target element.\n *\n * @param {UseEventListenerOptions} options - The options for the event listener.\n * @returns A tuple containing functions;\n * 1. `bind` function is used to bind the event listener.\n * 2. `unbind` function is used to unbind the event listener.\n *\n * @example\n * ```tsx\n * const Component = () => {\n *     const [bind, unbind] = useEventListener({\n *         target: 'document',\n *         type: 'click',\n *         listener: (event) => {\n *             console.log(event);\n *         },\n *         when: true\n *     });\n *\n *     return <div>Click me</div>;\n * };\n *\n * @example\n * ```tsx\n * const Component = () => {\n *     const [bind, unbind] = useEventListener({\n *         target: () => document.querySelector('.element'),\n *         type: 'mouseover',\n *         listener: (event) => {\n *             console.log(event);\n *         }\n *     });\n *\n *     return <div>MouseOver to `.element`</div>;\n * };\n * ```\n */\nexport function useEventListener({ target = 'document', type, listener, options, when = true }: UseEventListenerOptions): UseEventListenerReturnType {\n    const targetRef = React.useRef<HTMLElement | null>(null);\n    const listenerRef = React.useRef<EventListener | null>(null);\n    let prevListener = usePrevious(listener);\n    let prevOptions = usePrevious(options);\n\n    const bind = (bindOptions: Partial<Omit<UseEventListenerOptions, 'target'>> & { target?: UseEventListenerOptions['target'] | Document | null } = {}) => {\n        const { target: bindTarget } = bindOptions;\n\n        if (isNotEmpty(bindTarget)) {\n            unbind();\n\n            if (bindOptions.when || when) {\n                targetRef.current = getTargetElement(bindTarget) as HTMLElement;\n            }\n        }\n\n        if (!listenerRef.current && targetRef.current) {\n            listenerRef.current = (event: Event) => listener && listener(event);\n            targetRef.current.addEventListener(type, listenerRef.current, options);\n        }\n    };\n\n    const unbind = () => {\n        if (listenerRef.current) {\n            targetRef.current?.removeEventListener(type, listenerRef.current, options);\n            listenerRef.current = null;\n        }\n    };\n\n    const dispose = () => {\n        unbind();\n        // Prevent memory leak by releasing\n        prevListener = null;\n        prevOptions = null;\n    };\n\n    const updateTarget = React.useCallback(() => {\n        if (when) {\n            targetRef.current = getTargetElement(target) as HTMLElement;\n        } else {\n            unbind();\n            targetRef.current = null;\n        }\n    }, [target, when]);\n\n    React.useEffect(() => {\n        return () => {\n            dispose();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        updateTarget();\n    }, [updateTarget]);\n\n    React.useEffect(() => {\n        const listenerChanged = `${prevListener}` !== `${listener}`;\n        const optionsChanged = prevOptions !== options;\n        const listenerExists = listenerRef.current;\n\n        if (listenerExists && (listenerChanged || optionsChanged)) {\n            unbind();\n\n            if (when) {\n                bind();\n            }\n        } else if (!listenerExists) {\n            dispose();\n        }\n    }, [listener, options, when]);\n\n    return [bind, unbind];\n}\n","import * as React from 'react';\n\n/**\n * Returns the previous value of the provided value.\n *\n * @param value - The value to track.\n * @returns The previous value of the provided value.\n *\n * @example\n * ```tsx\n * const [count, setCount] = React.useState(5);\n * const prevCount = usePrevious(count);\n *\n * console.log(prevCount); // undefined\n *\n * setCount(10);\n *\n * console.log(prevCount); // 5\n * ```\n */\nexport function usePrevious<T>(value: T): T | null | undefined {\n    const ref = React.useRef<T | null>(null);\n\n    React.useEffect(() => {\n        ref.current = value;\n\n        return () => {\n            ref.current = null;\n        };\n    }, [value]);\n\n    return ref.current;\n}\n"],"mappings":"AAAA,OAAS,oBAAAA,EAAkB,cAAAC,MAAkB,kBAC7C,UAAYC,MAAW,QCDvB,UAAYC,MAAW,QAoBhB,SAASC,EAAeC,EAAgC,CAC3D,IAAMC,EAAY,SAAiB,IAAI,EAEvC,OAAM,YAAU,KACZA,EAAI,QAAUD,EAEP,IAAM,CACTC,EAAI,QAAU,IAClB,GACD,CAACD,CAAK,CAAC,EAEHC,EAAI,OACf,CD6CO,SAASC,EAAiB,CAAE,OAAAC,EAAS,WAAY,KAAAC,EAAM,SAAAC,EAAU,QAAAC,EAAS,KAAAC,EAAO,EAAK,EAAwD,CACjJ,IAAMC,EAAkB,SAA2B,IAAI,EACjDC,EAAoB,SAA6B,IAAI,EACvDC,EAAeC,EAAYN,CAAQ,EACnCO,EAAcD,EAAYL,CAAO,EAE/BO,EAAO,CAACC,EAAmI,CAAC,IAAM,CACpJ,GAAM,CAAE,OAAQC,CAAW,EAAID,EAE3BE,EAAWD,CAAU,IACrBE,EAAO,GAEHH,EAAY,MAAQP,KACpBC,EAAU,QAAUU,EAAiBH,CAAU,IAInD,CAACN,EAAY,SAAWD,EAAU,UAClCC,EAAY,QAAWU,GAAiBd,GAAYA,EAASc,CAAK,EAClEX,EAAU,QAAQ,iBAAiBJ,EAAMK,EAAY,QAASH,CAAO,EAE7E,EAEMW,EAAS,IAAM,CApGzB,IAAAG,EAqGYX,EAAY,WACZW,EAAAZ,EAAU,UAAV,MAAAY,EAAmB,oBAAoBhB,EAAMK,EAAY,QAASH,GAClEG,EAAY,QAAU,KAE9B,EAEMY,EAAU,IAAM,CAClBJ,EAAO,EAEPP,EAAe,KACfE,EAAc,IAClB,EAEMU,EAAqB,cAAY,IAAM,CACrCf,EACAC,EAAU,QAAUU,EAAiBf,CAAM,GAE3Cc,EAAO,EACPT,EAAU,QAAU,KAE5B,EAAG,CAACL,EAAQI,CAAI,CAAC,EAEjB,OAAM,YAAU,IACL,IAAM,CACTc,EAAQ,CACZ,EACD,CAAC,CAAC,EAEC,YAAU,IAAM,CAClBC,EAAa,CACjB,EAAG,CAACA,CAAY,CAAC,EAEX,YAAU,IAAM,CAClB,IAAMC,EAAkB,GAAGb,CAAY,IAAO,GAAGL,CAAQ,GACnDmB,EAAiBZ,IAAgBN,EACjCmB,EAAiBhB,EAAY,QAE/BgB,IAAmBF,GAAmBC,IACtCP,EAAO,EAEHV,GACAM,EAAK,GAEDY,GACRJ,EAAQ,CAEhB,EAAG,CAAChB,EAAUC,EAASC,CAAI,CAAC,EAErB,CAACM,EAAMI,CAAM,CACxB","names":["getTargetElement","isNotEmpty","React","React","usePrevious","value","ref","useEventListener","target","type","listener","options","when","targetRef","listenerRef","prevListener","usePrevious","prevOptions","bind","bindOptions","bindTarget","isNotEmpty","unbind","getTargetElement","event","_a","dispose","updateTarget","listenerChanged","optionsChanged","listenerExists"]}

package/use-id/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Generates a unique identifier.
+ *
+ * @param initialValue Optional initial value for the ID.
+ * @returns The generated or provided ID.
+ *
+ * @example
+ * ```tsx
+ * const id = useId('foo');
+ * console.log(id); // 'foo'
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const defaultId = useId();
+ * console.log(defaultId); // e.g., 'pr_id_0'
+ * ```
+ */
+export declare function useId(initialValue?: string): string;

package/use-id/index.mjs

@@ -0,0 +1,2 @@
+import*as t from"react";function d(e){let r=t.useId(),[s,c]=t.useState(e||`pr_id_${r.replaceAll(/:|«|»/g,"")}`);return t.useEffect(()=>{c(e||`pr_id_${r.replaceAll(/:|«|»/g,"")}`)},[e,r]),s}export{d as useId};
+//# sourceMappingURL=index.mjs.map

package/use-id/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-id/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Generates a unique identifier.\n *\n * @param initialValue Optional initial value for the ID.\n * @returns The generated or provided ID.\n *\n * @example\n * ```tsx\n * const id = useId('foo');\n * console.log(id); // 'foo'\n * ```\n *\n * @example\n * ```tsx\n * const defaultId = useId();\n * console.log(defaultId); // e.g., 'pr_id_0'\n * ```\n */\nexport function useId(initialValue?: string): string {\n    const idx = React.useId();\n    const [idState, setIdState] = React.useState<string>(initialValue || `pr_id_${idx.replaceAll(/:|«|»/g, '')}`);\n\n    React.useEffect(() => {\n        setIdState(initialValue || `pr_id_${idx.replaceAll(/:|«|»/g, '')}`);\n    }, [initialValue, idx]);\n\n    return idState;\n}\n"],"mappings":"AAAA,UAAYA,MAAW,QAoBhB,SAASC,EAAMC,EAA+B,CACjD,IAAMC,EAAY,QAAM,EAClB,CAACC,EAASC,CAAU,EAAU,WAAiBH,GAAgB,SAASC,EAAI,WAAW,SAAU,EAAE,CAAC,EAAE,EAE5G,OAAM,YAAU,IAAM,CAClBE,EAAWH,GAAgB,SAASC,EAAI,WAAW,SAAU,EAAE,CAAC,EAAE,CACtE,EAAG,CAACD,EAAcC,CAAG,CAAC,EAEfC,CACX","names":["React","useId","initialValue","idx","idState","setIdState"]}

package/use-match-media/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Listens for the specified media query.
+ *
+ * @param query - The media query to match.
+ * @param when - A boolean indicating whether the media query should be active.
+ * @returns A boolean indicating whether the media query matches.
+ *
+ * @example
+ * ```tsx
+ * const Component = () => {
+ *     const isMobile = useMatchMedia('(max-width: 768px)');
+ *
+ *     return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
+ * };
+ */
+export declare function useMatchMedia(query: string, when?: boolean): boolean;

package/use-match-media/index.mjs

@@ -0,0 +1,2 @@
+import*as t from"react";function d(a,c=!0){let[u,r]=t.useState(!1),n=t.useRef(null),s=e=>r(e.matches),i=()=>{var e;return(e=n.current)==null?void 0:e.addEventListener("change",s)},o=()=>{var e;return((e=n.current)==null?void 0:e.removeEventListener("change",s))&&(n.current=null)};return t.useEffect(()=>(c&&(n.current=window.matchMedia(a),r(n.current.matches),i()),()=>{o()}),[a,c]),u}export{d as useMatchMedia};
+//# sourceMappingURL=index.mjs.map

package/use-match-media/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-match-media/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Listens for the specified media query.\n *\n * @param query - The media query to match.\n * @param when - A boolean indicating whether the media query should be active.\n * @returns A boolean indicating whether the media query matches.\n *\n * @example\n * ```tsx\n * const Component = () => {\n *     const isMobile = useMatchMedia('(max-width: 768px)');\n *\n *     return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;\n * };\n */\nexport function useMatchMedia(query: string, when: boolean = true): boolean {\n    const [matches, setMatches] = React.useState(false);\n    const matchMedia = React.useRef<MediaQueryList | null>(null);\n\n    const handleChange = (event: MediaQueryListEvent) => setMatches(event.matches);\n    const bind = () => matchMedia.current?.addEventListener('change', handleChange);\n    const unbind = () => matchMedia.current?.removeEventListener('change', handleChange) && (matchMedia.current = null);\n\n    React.useEffect(() => {\n        if (when) {\n            matchMedia.current = window.matchMedia(query);\n            setMatches(matchMedia.current.matches);\n\n            bind();\n        }\n\n        return () => {\n            unbind();\n        };\n    }, [query, when]);\n\n    return matches;\n}\n"],"mappings":"AAAA,UAAYA,MAAW,QAiBhB,SAASC,EAAcC,EAAeC,EAAgB,GAAe,CACxE,GAAM,CAACC,EAASC,CAAU,EAAU,WAAS,EAAK,EAC5CC,EAAmB,SAA8B,IAAI,EAErDC,EAAgBC,GAA+BH,EAAWG,EAAM,OAAO,EACvEC,EAAO,IAAG,CAtBpB,IAAAC,EAsBuB,OAAAA,EAAAJ,EAAW,UAAX,YAAAI,EAAoB,iBAAiB,SAAUH,IAC5DI,EAAS,IAAG,CAvBtB,IAAAD,EAuByB,QAAAA,EAAAJ,EAAW,UAAX,YAAAI,EAAoB,oBAAoB,SAAUH,MAAkBD,EAAW,QAAU,OAE9G,OAAM,YAAU,KACRH,IACAG,EAAW,QAAU,OAAO,WAAWJ,CAAK,EAC5CG,EAAWC,EAAW,QAAQ,OAAO,EAErCG,EAAK,GAGF,IAAM,CACTE,EAAO,CACX,GACD,CAACT,EAAOC,CAAI,CAAC,EAETC,CACX","names":["React","useMatchMedia","query","when","matches","setMatches","matchMedia","handleChange","event","bind","_a","unbind"]}

package/use-mount-effect/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Custom hook that runs a mount effect only once.
+ * This is similar to `useEffect`, but it only runs on mount.
+ *
+ * @param {React.EffectCallback} effect the callback function
+ * @returns {void}
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *     useMountEffect(() => {
+ *         console.log('Mounted');
+ *     });
+ * };
+ * ```
+ */
+export declare function useMountEffect(effect: React.EffectCallback): void;

package/use-mount-effect/index.mjs

@@ -0,0 +1,2 @@
+import*as t from"react";function a(e){let o=t.useRef(!1);t.useEffect(()=>{o.current||(o.current=!0,e==null||e())},[])}export{a as useMountEffect};
+//# sourceMappingURL=index.mjs.map

package/use-mount-effect/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-mount-effect/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Custom hook that runs a mount effect only once.\n * This is similar to `useEffect`, but it only runs on mount.\n *\n * @param {React.EffectCallback} effect the callback function\n * @returns {void}\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *     useMountEffect(() => {\n *         console.log('Mounted');\n *     });\n * };\n * ```\n */\nexport function useMountEffect(effect: React.EffectCallback): void {\n    const mounted = React.useRef<boolean>(false);\n\n    React.useEffect(() => {\n        if (!mounted.current) {\n            mounted.current = true;\n\n            effect?.();\n        }\n    }, []);\n}\n"],"mappings":"AAAA,UAAYA,MAAW,QAkBhB,SAASC,EAAeC,EAAoC,CAC/D,IAAMC,EAAgB,SAAgB,EAAK,EAErC,YAAU,IAAM,CACbA,EAAQ,UACTA,EAAQ,QAAU,GAElBD,GAAA,MAAAA,IAER,EAAG,CAAC,CAAC,CACT","names":["React","useMountEffect","effect","mounted"]}

package/use-previous/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Returns the previous value of the provided value.
+ *
+ * @param value - The value to track.
+ * @returns The previous value of the provided value.
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = React.useState(5);
+ * const prevCount = usePrevious(count);
+ *
+ * console.log(prevCount); // undefined
+ *
+ * setCount(10);
+ *
+ * console.log(prevCount); // 5
+ * ```
+ */
+export declare function usePrevious<T>(value: T): T | null | undefined;

package/use-previous/index.mjs

@@ -0,0 +1,2 @@
+import*as e from"react";function u(n){let r=e.useRef(null);return e.useEffect(()=>(r.current=n,()=>{r.current=null}),[n]),r.current}export{u as usePrevious};
+//# sourceMappingURL=index.mjs.map

package/use-previous/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-previous/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Returns the previous value of the provided value.\n *\n * @param value - The value to track.\n * @returns The previous value of the provided value.\n *\n * @example\n * ```tsx\n * const [count, setCount] = React.useState(5);\n * const prevCount = usePrevious(count);\n *\n * console.log(prevCount); // undefined\n *\n * setCount(10);\n *\n * console.log(prevCount); // 5\n * ```\n */\nexport function usePrevious<T>(value: T): T | null | undefined {\n    const ref = React.useRef<T | null>(null);\n\n    React.useEffect(() => {\n        ref.current = value;\n\n        return () => {\n            ref.current = null;\n        };\n    }, [value]);\n\n    return ref.current;\n}\n"],"mappings":"AAAA,UAAYA,MAAW,QAoBhB,SAASC,EAAeC,EAAgC,CAC3D,IAAMC,EAAY,SAAiB,IAAI,EAEvC,OAAM,YAAU,KACZA,EAAI,QAAUD,EAEP,IAAM,CACTC,EAAI,QAAU,IAClB,GACD,CAACD,CAAK,CAAC,EAEHC,EAAI,OACf","names":["React","usePrevious","value","ref"]}

package/use-props/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Used to merge and differentiate incoming props with the default props.
+ * - Keys that exist in both `props1` and `props2` are placed in `props`, with values from `props1`.
+ * - Keys that exist in `props1` but not in `props2` are placed in `attrs`.
+ *
+ * @template P1 The type of the incoming set of props.
+ * @template P2 The type of the default set of props.
+ *
+ * @param props1 The incoming set of props (e.g., user-defined or dynamic props).
+ * @param props2 The default set of props (e.g., default props).
+ * @returns An object containing:
+ *   - `props`: A new object containing keys that exist in both `props1` and `props2`, using values from `props1`.
+ *   - `attrs`: A new object containing keys that exist only in `props1`, excluding any keys from `props2`.
+ *
+ * @example
+ * ```ts
+ * const { props, attrs } = useProps({ id: 'foo', className: 'bar' }, { className: 'baz' });
+ *
+ * console.log(props); // { className: 'bar' }
+ * console.log(attrs); // { id: 'foo' }
+ * ```
+ */
+export declare function useProps<P1, P2>(props1?: P1, props2?: P2): {
+    props: Pick<P1 & P2, keyof P2>;
+    attrs: Omit<P1, keyof P2>;
+};

package/use-props/index.mjs

@@ -0,0 +1,2 @@
+var i=Object.defineProperty;var o=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var P=(r,t,s)=>t in r?i(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s,a=(r,t)=>{for(var s in t||(t={}))u.call(t,s)&&P(r,s,t[s]);if(o)for(var s of o(t))p.call(t,s)&&P(r,s,t[s]);return r};import*as c from"react";function f(r={},t={}){return c.useMemo(()=>{let s={props:a({},t),attrs:{}};return Object.entries(r).forEach(([n,e])=>{n in t?s.props[n]=e:s.attrs[n]=e}),s},[r,t])}export{f as useProps};
+//# sourceMappingURL=index.mjs.map

package/use-props/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-props/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Used to merge and differentiate incoming props with the default props.\n * - Keys that exist in both `props1` and `props2` are placed in `props`, with values from `props1`.\n * - Keys that exist in `props1` but not in `props2` are placed in `attrs`.\n *\n * @template P1 The type of the incoming set of props.\n * @template P2 The type of the default set of props.\n *\n * @param props1 The incoming set of props (e.g., user-defined or dynamic props).\n * @param props2 The default set of props (e.g., default props).\n * @returns An object containing:\n *   - `props`: A new object containing keys that exist in both `props1` and `props2`, using values from `props1`.\n *   - `attrs`: A new object containing keys that exist only in `props1`, excluding any keys from `props2`.\n *\n * @example\n * ```ts\n * const { props, attrs } = useProps({ id: 'foo', className: 'bar' }, { className: 'baz' });\n *\n * console.log(props); // { className: 'bar' }\n * console.log(attrs); // { id: 'foo' }\n * ```\n */\nexport function useProps<P1, P2>(props1: P1 = {} as P1, props2: P2 = {} as P2) {\n    type Props = Pick<P1 & P2, keyof P2>;\n    type Attrs = Omit<P1, keyof P2>;\n    type Result = { props: Props; attrs: Attrs };\n\n    return React.useMemo(() => {\n        const result: Result = { props: { ...props2 } as Props, attrs: {} as Attrs };\n\n        Object.entries(props1 as Record<string, unknown>).forEach(([key, value]) => {\n            if (key in (props2 as Record<string, unknown>)) {\n                (result.props as Record<string, unknown>)[key] = value;\n            } else {\n                (result.attrs as Record<string, unknown>)[key] = value;\n            }\n        });\n\n        return result;\n    }, [props1, props2]);\n}\n"],"mappings":"yVAAA,UAAYA,MAAW,QAwBhB,SAASC,EAAiBC,EAAa,CAAC,EAASC,EAAa,CAAC,EAAS,CAK3E,OAAa,UAAQ,IAAM,CACvB,IAAMC,EAAiB,CAAE,MAAOC,EAAA,GAAKF,GAAmB,MAAO,CAAC,CAAW,EAE3E,cAAO,QAAQD,CAAiC,EAAE,QAAQ,CAAC,CAACI,EAAKC,CAAK,IAAM,CACpED,KAAQH,EACPC,EAAO,MAAkCE,CAAG,EAAIC,EAEhDH,EAAO,MAAkCE,CAAG,EAAIC,CAEzD,CAAC,EAEMH,CACX,EAAG,CAACF,EAAQC,CAAM,CAAC,CACvB","names":["React","useProps","props1","props2","result","__spreadValues","key","value"]}

package/use-unmount-effect/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Custom hook that runs an unmount effect only once.
+ * This is similar to `useEffect`, but it only runs on unmount.
+ *
+ * @param {React.EffectCallback} effect the callback function
+ * @returns {void}
+ *
+ * @example
+ * ```tsx
+ * const Component = () => {
+ *     useUnmountEffect(() => {
+ *         console.log('Unmounted');
+ *     });
+ * };
+ * ```
+ */
+export declare function useUnmountEffect(effect: React.EffectCallback): void;

package/use-unmount-effect/index.mjs

@@ -0,0 +1,2 @@
+import*as a from"react";function o(t){a.useEffect(()=>()=>{t==null||t()},[])}export{o as useUnmountEffect};
+//# sourceMappingURL=index.mjs.map

package/use-unmount-effect/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-unmount-effect/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Custom hook that runs an unmount effect only once.\n * This is similar to `useEffect`, but it only runs on unmount.\n *\n * @param {React.EffectCallback} effect the callback function\n * @returns {void}\n *\n * @example\n * ```tsx\n * const Component = () => {\n *     useUnmountEffect(() => {\n *         console.log('Unmounted');\n *     });\n * };\n * ```\n */\nexport function useUnmountEffect(effect: React.EffectCallback): void {\n    React.useEffect(() => {\n        return () => {\n            effect?.();\n        };\n    }, []);\n}\n"],"mappings":"AAAA,UAAYA,MAAW,QAkBhB,SAASC,EAAiBC,EAAoC,CAC3D,YAAU,IACL,IAAM,CACTA,GAAA,MAAAA,GACJ,EACD,CAAC,CAAC,CACT","names":["React","useUnmountEffect","effect"]}

package/use-update-effect/index.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+/**
+ * Custom hook that runs an update effect whenever dependencies change.
+ * This is similar to `useEffect`, but it does not run on mount.
+ *
+ * @param {React.EffectCallback} effect the callback function
+ * @param {React.DependencyList} dependencies the dependencies
+ * @returns {void}
+ *
+ * @example
+ * ```tsx
+ * const Component = ({ value }) => {
+ *     useUpdateEffect(() => {
+ *         console.log('Updated');
+ *     }, [value]);
+ * };
+ * ```
+ */
+export declare function useUpdateEffect(effect: React.EffectCallback, dependencies?: React.DependencyList): void;

package/use-update-effect/index.mjs

@@ -0,0 +1,2 @@
+import*as e from"react";function n(t,a){let r=e.useRef(!1);e.useEffect(()=>{if(!r.current){r.current=!0;return}return t==null?void 0:t()},a)}export{n as useUpdateEffect};
+//# sourceMappingURL=index.mjs.map

package/use-update-effect/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-update-effect/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Custom hook that runs an update effect whenever dependencies change.\n * This is similar to `useEffect`, but it does not run on mount.\n *\n * @param {React.EffectCallback} effect the callback function\n * @param {React.DependencyList} dependencies the dependencies\n * @returns {void}\n *\n * @example\n * ```tsx\n * const Component = ({ value }) => {\n *     useUpdateEffect(() => {\n *         console.log('Updated');\n *     }, [value]);\n * };\n * ```\n */\nexport function useUpdateEffect(effect: React.EffectCallback, dependencies?: React.DependencyList): void {\n    const mounted = React.useRef<boolean>(false);\n\n    React.useEffect(() => {\n        if (!mounted.current) {\n            mounted.current = true;\n\n            return;\n        }\n\n        return effect?.();\n    }, dependencies);\n}\n"],"mappings":"AAAA,UAAYA,MAAW,QAmBhB,SAASC,EAAgBC,EAA8BC,EAA2C,CACrG,IAAMC,EAAgB,SAAgB,EAAK,EAErC,YAAU,IAAM,CAClB,GAAI,CAACA,EAAQ,QAAS,CAClBA,EAAQ,QAAU,GAElB,MACJ,CAEA,OAAOF,GAAA,YAAAA,GACX,EAAGC,CAAY,CACnB","names":["React","useUpdateEffect","effect","dependencies","mounted"]}

package/use-view-transition/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Starts a view transition.
+ *
+ * @returns A function that starts a view transition.
+ *
+ * @example
+ * ```tsx
+ * const Component = () => {
+ *     const startTransition = useViewTransition();
+ *
+ *     const handleClick = () => {
+ *         startTransition(() => {
+ *             // Perform some work
+ *         });
+ *     };
+ *
+ *     return <button onClick={handleClick}>Click me</button>;
+ * };
+ */
+export declare function useViewTransition(): (callback: () => void) => void;

package/use-view-transition/index.mjs

@@ -0,0 +1,2 @@
+import*as i from"react";function r(){return i.useCallback(t=>{document.startViewTransition?document.startViewTransition(()=>{t()}):t()},[])}export{r as useViewTransition};
+//# sourceMappingURL=index.mjs.map

package/use-view-transition/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-view-transition/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Starts a view transition.\n *\n * @returns A function that starts a view transition.\n *\n * @example\n * ```tsx\n * const Component = () => {\n *     const startTransition = useViewTransition();\n *\n *     const handleClick = () => {\n *         startTransition(() => {\n *             // Perform some work\n *         });\n *     };\n *\n *     return <button onClick={handleClick}>Click me</button>;\n * };\n */\nexport function useViewTransition() {\n    const startTransition = React.useCallback((callback: () => void) => {\n        if (document.startViewTransition) {\n            document.startViewTransition(() => {\n                callback();\n            });\n        } else {\n            callback();\n        }\n    }, []);\n\n    return startTransition;\n}\n"],"mappings":"AAAA,UAAYA,MAAW,QAqBhB,SAASC,GAAoB,CAWhC,OAV8B,cAAaC,GAAyB,CAC5D,SAAS,oBACT,SAAS,oBAAoB,IAAM,CAC/BA,EAAS,CACb,CAAC,EAEDA,EAAS,CAEjB,EAAG,CAAC,CAAC,CAGT","names":["React","useViewTransition","callback"]}