@a-type/ui 0.1.2 → 0.1.3

package/dist/esm/hooks/useOnUnmount.js

@@ -0,0 +1,18 @@
+import { useCallback, useRef } from 'react';
+import { useStableCallback } from './useStableCallback.js';
+/**
+ * Calls a callback with an element when it is unmounted.
+ * @returns a ref to pass to the component
+ */
+export function useOnUnmount(callback) {
+    const stableCallback = useStableCallback(callback);
+    const ref = useRef(null);
+    return useCallback((el) => {
+        console.log(el);
+        if (ref.current && !el) {
+            stableCallback(ref.current);
+        }
+        ref.current = el;
+    }, []);
+}
+//# sourceMappingURL=useOnUnmount.js.map

package/dist/esm/hooks/useOnUnmount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnUnmount.js","sourceRoot":"","sources":["../../../src/hooks/useOnUnmount.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,QAAmC;IAC/D,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAEnD,MAAM,GAAG,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAE7C,OAAO,WAAW,CAAC,CAAC,EAAsB,EAAE,EAAE;QAC7C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAChB,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,EAAE,EAAE;YACvB,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SAC5B;QACD,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;AACR,CAAC"}

package/dist/esm/hooks/useSize.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+interface ResizeObserverEntry {
+    target: Element;
+}
+type ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;
+export declare class ResizeObserver {
+    constructor(callback: ResizeObserverCallback);
+    observe(target: Element): void;
+    unobserve(target: Element): void;
+    disconnect(): void;
+}
+export declare function useSize<E extends HTMLElement>(callback: (payload: {
+    width: number;
+    height: number;
+}) => void): RefObject<E>;
+export declare function useSizeCssVars<E extends HTMLElement>(debounceMs?: number, applyToRef?: RefObject<HTMLElement>, propertyNames?: {
+    width: string;
+    height: string;
+}): RefObject<E>;
+export {};

package/dist/esm/hooks/useSize.js

@@ -0,0 +1,48 @@
+import { debounce } from '@a-type/utils';
+import { useLayoutEffect, useMemo, useRef } from 'react';
+import { useStableCallback } from './useStableCallback.js';
+export function useSize(callback) {
+    const ref = useRef(null);
+    const cb = useStableCallback(callback);
+    useLayoutEffect(() => {
+        const target = ref.current;
+        if (!target) {
+            return () => {
+                //
+            };
+        }
+        const resizeObserver = new ResizeObserver((entries) => {
+            entries.forEach((entry) => {
+                cb({
+                    width: entry.target.clientWidth,
+                    height: entry.target.clientHeight,
+                });
+            });
+        });
+        resizeObserver.observe(target);
+        return () => {
+            resizeObserver.unobserve(target);
+            resizeObserver.disconnect();
+        };
+    }, [ref, cb]);
+    return ref;
+}
+export function useSizeCssVars(debounceMs, applyToRef, propertyNames) {
+    const update = useMemo(() => {
+        const doupdate = ({ width, height }) => {
+            var _a, _b, _c, _d;
+            const usedRef = applyToRef || ref;
+            (_a = usedRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty((_b = propertyNames === null || propertyNames === void 0 ? void 0 : propertyNames.width) !== null && _b !== void 0 ? _b : '--width', width + 'px');
+            (_c = usedRef.current) === null || _c === void 0 ? void 0 : _c.style.setProperty((_d = propertyNames === null || propertyNames === void 0 ? void 0 : propertyNames.height) !== null && _d !== void 0 ? _d : '--height', height + 'px');
+        };
+        if (debounceMs) {
+            return debounce(doupdate, debounceMs);
+        }
+        else {
+            return doupdate;
+        }
+    }, [debounceMs, applyToRef, propertyNames === null || propertyNames === void 0 ? void 0 : propertyNames.width, propertyNames === null || propertyNames === void 0 ? void 0 : propertyNames.height]);
+    const ref = useSize(update);
+    return ref;
+}
+//# sourceMappingURL=useSize.js.map

package/dist/esm/hooks/useSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSize.js","sourceRoot":"","sources":["../../../src/hooks/useSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAa,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAY3D,MAAM,UAAU,OAAO,CACtB,QAA8D;IAE9D,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;IAC5B,MAAM,EAAE,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACvC,eAAe,CAAC,GAAG,EAAE;QACpB,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,MAAM,EAAE;YACZ,OAAO,GAAG,EAAE;gBACX,EAAE;YACH,CAAC,CAAC;SACF;QACD,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACrD,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACzB,EAAE,CAAC;oBACF,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;oBAC/B,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY;iBACjC,CAAC,CAAC;YACJ,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAC/B,OAAO,GAAG,EAAE;YACX,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;YACjC,cAAc,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IACd,OAAO,GAAG,CAAC;AACZ,CAAC;AAED,MAAM,UAAU,cAAc,CAC7B,UAAmB,EACnB,UAAmC,EACnC,aAAiD;IAEjD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAqC,EAAE,EAAE;;YACzE,MAAM,OAAO,GAAG,UAAU,IAAI,GAAG,CAAC;YAClC,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,CAAC,WAAW,CACjC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,mCAAI,SAAS,EACjC,KAAK,GAAG,IAAI,CACZ,CAAC;YACF,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,CAAC,WAAW,CACjC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,mCAAI,UAAU,EACnC,MAAM,GAAG,IAAI,CACb,CAAC;QACH,CAAC,CAAC;QACF,IAAI,UAAU,EAAE;YACf,OAAO,QAAQ,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;SACtC;aAAM;YACN,OAAO,QAAQ,CAAC;SAChB;IACF,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,CAAC,CAAC,CAAC;IAC1E,MAAM,GAAG,GAAG,OAAO,CAAI,MAAM,CAAC,CAAC;IAC/B,OAAO,GAAG,CAAC;AACZ,CAAC"}

package/dist/esm/hooks/useStableCallback.d.ts

@@ -0,0 +1 @@
+export declare function useStableCallback<Fn extends (...args: any[]) => any>(callback: Fn | undefined): (...args: any[]) => any;

package/dist/esm/hooks/useStableCallback.js

@@ -0,0 +1,9 @@
+import { useCallback, useMemo, useRef } from 'react';
+export function useStableCallback(callback) {
+    const ref = useRef(callback);
+    useMemo(() => {
+        ref.current = callback;
+    }, [callback]);
+    return useCallback((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }, []);
+}
+//# sourceMappingURL=useStableCallback.js.map

package/dist/esm/hooks/useStableCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStableCallback.js","sourceRoot":"","sources":["../../../src/hooks/useStableCallback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAa,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,UAAU,iBAAiB,CAChC,QAAwB;IAExB,MAAM,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7B,OAAO,CAAC,GAAG,EAAE;QACZ,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACf,OAAO,WAAW,CAAC,CAAC,GAAG,IAAW,EAAE,EAAE,WAAC,OAAA,MAAA,GAAG,CAAC,OAAO,oDAAG,GAAG,IAAI,CAAC,CAAA,EAAA,EAAE,EAAE,CAAC,CAAC;AACpE,CAAC"}

package/dist/esm/hooks/useToggle.d.ts

@@ -0,0 +1 @@
+export declare function useToggle(initialValue?: boolean): [boolean, () => void];

package/dist/esm/hooks/useToggle.js

@@ -0,0 +1,7 @@
+import { useCallback, useState } from 'react';
+export function useToggle(initialValue = false) {
+    const [value, setValue] = useState(initialValue);
+    const toggle = useCallback(() => setValue((v) => !v), []);
+    return [value, toggle];
+}
+//# sourceMappingURL=useToggle.js.map

package/dist/esm/hooks/useToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggle.js","sourceRoot":"","sources":["../../../src/hooks/useToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,UAAU,SAAS,CACxB,eAAwB,KAAK;IAE7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC1D,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACxB,CAAC"}

package/dist/esm/hooks/useVisualViewportOffset.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Applies bottom offset px as a CSS custom property to the document root.
+ */
+export declare function useVisualViewportOffset(): void;

package/dist/esm/hooks/useVisualViewportOffset.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+/**
+ * Applies bottom offset px as a CSS custom property to the document root.
+ */
+export function useVisualViewportOffset() {
+    const viewport = window.visualViewport;
+    useEffect(() => {
+        if (!viewport) {
+            return;
+        }
+        const update = () => {
+            document.documentElement.style.setProperty('--viewport-bottom-offset', `${window.innerHeight - viewport.height}px`);
+            document.documentElement.style.setProperty('--viewport-height', `${viewport.height}px`);
+        };
+        update();
+        window.addEventListener('scroll', update, { passive: true });
+        viewport.addEventListener('resize', update);
+        return () => {
+            viewport.removeEventListener('resize', update);
+            window.removeEventListener('scroll', update);
+        };
+    }, []);
+}
+//# sourceMappingURL=useVisualViewportOffset.js.map

package/dist/esm/hooks/useVisualViewportOffset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisualViewportOffset.js","sourceRoot":"","sources":["../../../src/hooks/useVisualViewportOffset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,UAAU,uBAAuB;IACtC,MAAM,QAAQ,GAAG,MAAM,CAAC,cAAc,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,QAAQ,EAAE;YACd,OAAO;SACP;QAED,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,0BAA0B,EAC1B,GAAG,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAC3C,CAAC;YACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,mBAAmB,EACnB,GAAG,QAAQ,CAAC,MAAM,IAAI,CACtB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,EAAE,CAAC;QAET,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE5C,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAC/C,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC9C,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;AACR,CAAC"}

package/dist/esm/hooks/withClassName.d.ts

@@ -0,0 +1,3 @@
+import classNames from 'classnames';
+import { ComponentPropsWithRef, ComponentType, ElementType, FunctionComponent } from 'react';
+export declare function withClassName<T extends ComponentType<any> | ElementType<any>>(Component: T, ...cs: Parameters<typeof classNames>): FunctionComponent<ComponentPropsWithRef<T>>;

package/dist/esm/hooks/withClassName.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef, } from 'react';
+export function withClassName(Component, ...cs) {
+    const WithClassName = forwardRef((props, ref) => {
+        const { className } = props, rest = __rest(props, ["className"]);
+        return (_jsx(Component, Object.assign({ ref: ref }, rest, { className: classNames(cs, className) })));
+    });
+    return WithClassName;
+}
+//# sourceMappingURL=withClassName.js.map

package/dist/esm/hooks/withClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withClassName.js","sourceRoot":"","sources":["../../../src/hooks/withClassName.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAKN,UAAU,GACV,MAAM,OAAO,CAAC;AAEf,MAAM,UAAU,aAAa,CAC5B,SAAY,EACZ,GAAG,EAAiC;IAEpC,MAAM,aAAa,GAAG,UAAU,CAAW,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QACzD,MAAM,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA9B,aAAsB,CAAQ,CAAC;QACrC,OAAO,CACN,KAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,IAAM,IAAI,IAAE,SAAS,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CACvE,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,aAAoB,CAAC;AAC7B,CAAC"}

package/dist/esm/hooks.d.ts

@@ -0,0 +1 @@
+export * from './hooks/index.js';

package/dist/esm/hooks.js

@@ -0,0 +1,2 @@
+export * from './hooks/index.js';
+//# sourceMappingURL=hooks.js.map

package/dist/esm/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/hooks.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/esm/uno.preset.d.ts

@@ -0,0 +1,2 @@
+import { Preset } from 'unocss';
+export default function presetAglio(): Preset;