@koine/react 2.0.0-beta.2 → 2.0.0-beta.21

package/styles/media.js

@@ -1,32 +1,25 @@
-"use strict";
-/// TODO:FIXME: this should use code from `useMqWidthCreator`
 var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateMediaQueries = exports.useMedia = exports.only = exports.between = exports.down = exports.up = exports.max = exports.min = void 0;
-var react_1 = require("react");
-var theme_1 = require("./theme");
-exports.min = (_a = generateMediaQueries(theme_1.breakpoints), _a.min), exports.max = _a.max, exports.up = _a.up, exports.down = _a.down, exports.between = _a.between, exports.only = _a.only;
-function useMedia(media) {
-    var breakpoints = (0, theme_1.useTheme)().breakpoints;
-    var _a = (0, react_1.useState)(false), matches = _a[0], setMatches = _a[1];
-    var _b = media.split(":"), _c = _b[0], direction = _c === void 0 ? "min" : _c, breakpoint = _b[1];
+import { __read } from "tslib";
+import { useEffect, useState } from "react";
+import { breakpoints, useTheme } from "./theme.js";
+export var min = (_a = generateMediaQueries(breakpoints), _a.min), max = _a.max, up = _a.up, down = _a.down, between = _a.between, only = _a.only;
+export function useMedia(media) {
+    var breakpoints = useTheme().breakpoints;
+    var _a = __read(useState(false), 2), matches = _a[0], setMatches = _a[1];
+    var _b = __read(media.split(":"), 2), _c = _b[0], direction = _c === void 0 ? "min" : _c, breakpoint = _b[1];
     var px = breakpoints[breakpoint];
     if (direction === "max") {
         px = px - 0.02;
     }
     var query = "(".concat(direction, "-width: ").concat(px, "px)");
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         var mq = window.matchMedia(query);
         var handleChange = function (event) {
             setMatches(event.matches);
         };
         setMatches(mq.matches);
-        // Safari < 14 can't use addEventListener on a MediaQueryList
-        // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
         if (!mq.addEventListener) {
-            // Update the state whenever the media query match state changes
             mq.addListener(handleChange);
-            // Clean up on unmount and if the query changes
             return function () {
                 mq.removeListener(handleChange);
             };
@@ -38,57 +31,7 @@ function useMedia(media) {
     }, [query]);
     return matches;
 }
-exports.useMedia = useMedia;
-/**
- * Generate media queries helpers
- *
- * Usage:
- * ```jsx
- * import { generateMediaQueries } from "@koine/react";
- *
- * export const breakpoints = {
- *   xs: 0,
- *   sm: 440,
- *   md: 768,
- *   lg: 1024,
- *   xl: 1368,
- *   xxl: 1690,
- * } as const;
- *
- * export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
- * ```
- *
- * Consider the following syntaxes, using normal CSS is just slightly
- * longer but it aovid js imports, reduce the js overhead and improve CSS
- * highlighting in the editor.
- *
- * Even if we would reduce the function signature to the bare minimum the advantage
- * in terms of typing would not be much, also loosing in readability.
- *
- * ```css
- * // but unfortunately this does not work
- * @media (min-width: var(--b-sm)) {}
- * @media (min-width: 480px) {}
- *
- * ${media("min", "sm")} {}
- * ${mediaMin("sm")} {}
- * ${min.sm} {}
- * ${p => p.theme.min.sm}``
- * ```
- *
- * Related projects:
- * @see https://github.com/mg901/styled-breakpoints
- * @see https://github.com/morajabi/styled-media-query
- *
- * @see https://www.w3.org/TR/mediaqueries-5/#custom-mq The spec would allow for
- * something like this syntax
- *
- * ```css
- * @custom-media --narrow-window (max-width: 30em);
- * @media (--narrow-window) {}
- * ```
- */
-function generateMediaQueries(breakpoints) {
+export function generateMediaQueries(breakpoints) {
     var temp = Object.keys(breakpoints).map(function (key) {
         var br = key;
         return [br, breakpoints[br]];
@@ -98,21 +41,9 @@ function generateMediaQueries(breakpoints) {
         var index = sortedKeys.indexOf(breakpoint);
         return sortedKeys[index + 1];
     };
-    /**
-     * It behaves the same as `@media (min-width: ${value}px)`
-     * where value is the given breakpoint value.
-     * For ease of use this can be used both as a function `min("md")` and as an
-     * object literal `min.md`.
-     */ // @ts-expect-error FIXME: at some point
     var min = function (br) {
         return "@media (min-width: ".concat(breakpoints[br], "px)");
     };
-    /**
-     * It behaves the same as `@media (max-width: ${value}px)`
-     * where value is the given breakpoint value.
-     * For ease of use this can be used both as a function `max("md")` and as an
-     * object literal `max.md`.
-     */ // @ts-expect-error FIXME: at some point
     var max = function (br) {
         return "@media (max-width: ".concat(breakpoints[br] - 0.02, "px)");
     };
@@ -121,30 +52,14 @@ function generateMediaQueries(breakpoints) {
         min[_br] = "@media (min-width: ".concat(breakpoints[_br], "px)");
         max[_br] = "@media (max-width: ".concat(breakpoints[_br] - 0.02, "px)");
     }
-    /**
-     * It behaves the same as `min`
-     * @inheritdoc {max}
-     */
     var up = min;
-    /**
-     * It behaves similarly to `max` but you will use the "next" breakpoint,
-     * specifying CSS that will apply from the given breakpoint and down.
-     */
     var down = function (br) {
         var brNext = getNext(br);
-        // TODO: if br does not exists otherwise throw Error
         return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
     };
-    /**
-     * Media query between the two given breakpoints
-     */
     var between = function (br1, br2) {
         return "@media (min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)");
     };
-    /**
-     * Media query to apply from the given breakpoint until the next, just for its
-     * full range
-     */
     var only = function (br) {
         var brNext = getNext(br);
         return brNext ? between(br, brNext) : min(br);
@@ -158,4 +73,3 @@ function generateMediaQueries(breakpoints) {
         only: only,
     };
 }
-exports.generateMediaQueries = generateMediaQueries;

package/styles/spacing.d.ts

@@ -1,7 +1,6 @@
-import type { Theme } from "./theme";
+import type { Theme } from "./theme.js";
 export type SpacingSize = "sm" | "md" | "lg";
 export type SpacingProperty = "padding" | "margin";
-/** @default 1 */
 export type SpacingFactor = number;
 export type SpacingDirection = "top" | "bottom";
 export type SpacingDirectionAxis = "vertical" | SpacingDirection;

package/styles/spacing.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.spacingVertical = exports.spacingBottom = exports.spacingTop = exports.spacing = void 0;
 function _spacing(theme, size, factor, property, direction, devices) {
     if (size === void 0) { size = "md"; }
     if (factor === void 0) { factor = 1; }
@@ -29,24 +26,20 @@ function _spacing(theme, size, factor, property, direction, devices) {
     }
     return css;
 }
-function spacing(size, factor, property, direction, devices) {
+export function spacing(size, factor, property, direction, devices) {
     if (direction === "vertical") {
         return (_spacing(this, size, factor, property, "top", devices) +
             _spacing(this, size, factor, property, "bottom", devices));
     }
     return _spacing(this, size, factor, property, direction, devices);
 }
-exports.spacing = spacing;
-function spacingTop(size, factor, property, devices) {
+export function spacingTop(size, factor, property, devices) {
     return _spacing(this, size, factor, property, "top", devices);
 }
-exports.spacingTop = spacingTop;
-function spacingBottom(size, factor, property, devices) {
+export function spacingBottom(size, factor, property, devices) {
     return _spacing(this, size, factor, property, "bottom", devices);
 }
-exports.spacingBottom = spacingBottom;
-function spacingVertical(size, factor, property, devices) {
+export function spacingVertical(size, factor, property, devices) {
     return (_spacing(this, size, factor, property, "top", devices) +
         _spacing(this, size, factor, property, "bottom", devices));
 }
-exports.spacingVertical = spacingVertical;

package/styles/styled.d.ts

@@ -1,12 +1,8 @@
 import React from "react";
 export declare const colStretch: (direction: "left" | "right", bg: React.CSSProperties["background"]) => string;
-/** @see https://caniuse.com/?search=inset */
 export declare const inset0 = "top:0;left:0;right:0;bottom:0;";
 export declare const overlay: string;
 export declare const centered = "display: flex;align-items: center;justify-content: center;";
 export declare const ellipsis = "overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
-/**
- * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
- */
 export declare const invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
 export declare const stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";

package/styles/styled.js

@@ -1,17 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.stateFocus = exports.invisible = exports.ellipsis = exports.centered = exports.overlay = exports.inset0 = exports.colStretch = void 0;
-var colStretch = function (direction, bg) {
+export var colStretch = function (direction, bg) {
     return "\n    background: ".concat(bg, ";\n    position: relative;\n\n    &:before{\n      z-index: -1;\n      content: '';\n      position: absolute;\n      right: ").concat(direction === "left" ? "100%" : "-100vw", ";\n      left: ").concat(direction === "right" ? "100%" : "-100vw", ";\n      top: 0;\n      bottom: 0;\n      background: ").concat(bg, ";\n    }\n  ");
 };
-exports.colStretch = colStretch;
-/** @see https://caniuse.com/?search=inset */
-exports.inset0 = "top:0;left:0;right:0;bottom:0;";
-exports.overlay = "position: absolute;".concat(exports.inset0);
-exports.centered = "display: flex;align-items: center;justify-content: center;";
-exports.ellipsis = "overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
-/**
- * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
- */
-exports.invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
-exports.stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";
+export var inset0 = "top:0;left:0;right:0;bottom:0;";
+export var overlay = "position: absolute;".concat(inset0);
+export var centered = "display: flex;align-items: center;justify-content: center;";
+export var ellipsis = "overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
+export var invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
+export var stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";

package/styles/theme--vanilla.js

@@ -1,27 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeVanillaProvider = exports.ThemeVanillaContext = exports.getInitialThemeFromClient = exports.THEME_DEFAULT = exports.THEME_KEY = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
-// import setCookie from "@koine/utils/setCookie";
-// import parseCookie from "@koine/utils/parseCookie";
-var useUpdateEffect_1 = tslib_1.__importDefault(require("../hooks/useUpdateEffect"));
-exports.THEME_KEY = "theme";
-exports.THEME_DEFAULT = "light";
-// export const getInitialThemeFromRequest = (
-//   cookie?: string
-// ): ThemeVanillaValue => {
-//   if (cookie) {
-//     const parsed = parseCookie<ThemeCookie>(cookie);
-//     return parsed?.theme;
-//   }
-//   return THEME_DEFAULT;
-// };
-var getInitialThemeFromClient = function () {
+import { __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useState } from "react";
+import { isBrowser } from "@koine/utils";
+import useUpdateEffect from "../useUpdateEffect.js";
+export var THEME_KEY = "theme";
+export var THEME_DEFAULT = "light";
+export var getInitialThemeFromClient = function () {
     if (typeof window !== "undefined" && window.localStorage) {
-        var storedPrefs = window.localStorage.getItem(exports.THEME_KEY);
+        var storedPrefs = window.localStorage.getItem(THEME_KEY);
         if (typeof storedPrefs === "string") {
             return storedPrefs;
         }
@@ -30,35 +16,32 @@ var getInitialThemeFromClient = function () {
             return "dark";
         }
     }
-    return exports.THEME_DEFAULT;
+    return THEME_DEFAULT;
 };
-exports.getInitialThemeFromClient = getInitialThemeFromClient;
-exports.ThemeVanillaContext = (0, react_1.createContext)({
+export var ThemeVanillaContext = createContext({
     theme: "light",
     setTheme: undefined,
 });
-var ThemeVanillaProvider = function (_a) {
+export var ThemeVanillaProvider = function (_a) {
     var initialTheme = _a.initialTheme, children = _a.children;
-    var _b = (0, react_1.useState)(initialTheme), theme = _b[0], setTheme = _b[1];
+    var _b = __read(useState(initialTheme), 2), theme = _b[0], setTheme = _b[1];
     var rawSetTheme = function (rawTheme) {
-        if (!rawTheme || !isBrowser_1.default) {
+        if (!rawTheme || !isBrowser) {
             return;
         }
         var root = window.document.documentElement;
         var isDark = rawTheme === "dark";
         root.classList.remove(isDark ? "light" : "dark");
         root.classList.add(rawTheme);
-        localStorage.setItem(exports.THEME_KEY, rawTheme);
-        // setCookie(THEME_KEY, rawTheme);
+        localStorage.setItem(THEME_KEY, rawTheme);
     };
-    (0, react_1.useEffect)(function () {
-        var theme = (0, exports.getInitialThemeFromClient)();
+    useEffect(function () {
+        var theme = getInitialThemeFromClient();
         setTheme(theme);
         rawSetTheme(theme);
     }, []);
-    (0, useUpdateEffect_1.default)(function () {
+    useUpdateEffect(function () {
         rawSetTheme(theme);
     }, [theme]);
-    return ((0, jsx_runtime_1.jsx)(exports.ThemeVanillaContext.Provider, { value: { theme: theme, setTheme: setTheme }, children: children }));
+    return (_jsx(ThemeVanillaContext.Provider, { value: { theme: theme, setTheme: setTheme }, children: children }));
 };
-exports.ThemeVanillaProvider = ThemeVanillaProvider;

package/styles/theme.d.ts

@@ -1,16 +1,5 @@
 export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 export type Breakpoints = Record<Breakpoint, number>;
-/**
- * You can override the default breakpoints through the .env variable
- *
- * FIXME: find a better way to configure it, the problem is that we use the media
- * queries within this pre-compiled library and thrught it was better to avoid
- * using theming props for a more ergonomic usage.
- *
- * ```.env
- * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
- * ```
- */
 export declare const breakpoints: Breakpoints;
 export declare const createTheme: (options: ThemeOptions) => Theme;
 export declare const useTheme: () => Theme;
@@ -20,56 +9,38 @@ export type Theme = {
         quarter: number;
         third: number;
         half: number;
-        /** @default 60 */
         normal: number;
         double: number;
         triple: number;
     };
     breakpoints: Breakpoints;
     devices: {
-        /** @default "sm" */
         mobile: keyof Breakpoints;
-        /** @default "md" */
         tablet: keyof Breakpoints;
-        /** @default "lg" */
         desktop: keyof Breakpoints;
     };
     spaces: {
         mobile: {
-            /** @default 10 */
             sm: number;
-            /** @default 20 */
             md: number;
-            /** @default 40 */
             lg: number;
         };
         tablet: {
-            /** @default 15 */
             sm: number;
-            /** @default 30 */
             md: number;
-            /** @default 60 */
             lg: number;
         };
         desktop: {
-            /** @default 20 */
             sm: number;
-            /** @default 40 */
             md: number;
-            /** @default 80 */
             lg: number;
         };
     };
     header: {
-        /** @default "lg" */
         breakpoint: keyof Breakpoints;
-        /** @default [82, 134] */
         height: [number, number];
-        /** @default [60, 90] */
         heightSticky: [number, number];
-        /** @default [76, 76] */
         logoWidth: [number, number];
-        /** @default [70, 70] */
         logoWidthSticky: [number, number];
     };
 };

package/styles/theme.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.createTheme = exports.breakpoints = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = require("styled-components");
+import { __assign, __read } from "tslib";
+import { useTheme as _useTheme } from "styled-components";
 var DEFAULT_BREAKPOINTS = {
     xs: 0,
     sm: 440,
@@ -11,35 +8,23 @@ var DEFAULT_BREAKPOINTS = {
     xl: 1368,
     xxl: 1690,
 };
-/**
- * You can override the default breakpoints through the .env variable
- *
- * FIXME: find a better way to configure it, the problem is that we use the media
- * queries within this pre-compiled library and thrught it was better to avoid
- * using theming props for a more ergonomic usage.
- *
- * ```.env
- * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
- * ```
- */
-exports.breakpoints = process.env["BREAKPOINTS"]
+export var breakpoints = process.env["BREAKPOINTS"]
     ? process.env["BREAKPOINTS"].split(",").reduce(function (map, pair) {
-        var _a = pair.split(":"), key = _a[0], value = _a[1];
+        var _a = __read(pair.split(":"), 2), key = _a[0], value = _a[1];
         map[key] = parseFloat(value);
         return map;
     }, {})
     : DEFAULT_BREAKPOINTS;
 var themeDefault = {
-    maxWidth: exports.breakpoints.xxl,
-    breakpoints: exports.breakpoints,
+    maxWidth: breakpoints.xxl,
+    breakpoints: breakpoints,
     devices: {
         mobile: "sm",
         tablet: "md",
         desktop: "lg",
     },
 };
-var createTheme = function (options) {
-    return (tslib_1.__assign(tslib_1.__assign({}, themeDefault), options));
+export var createTheme = function (options) {
+    return (__assign(__assign({}, themeDefault), options));
 };
-exports.createTheme = createTheme;
-exports.useTheme = styled_components_1.useTheme;
+export var useTheme = _useTheme;

package/tw/index.d.ts

@@ -1,2 +1 @@
-export * from "../shared";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/bare";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/bare.js";

package/tw/index.js

@@ -1,36 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../shared"), exports);
-// export * from "../Alert";
-// export * from "../Animations";
-// export * from "../Autocomplete";
-// export * from "../Bg";
-// export * from "../Breadcrumbs";
-// export * from "../Buttons";
-// export * from "../Carousel";
-// export * from "../Collapsable";
-// export * from "../Debug";
-var bare_1 = require("../Dialog/tw/bare");
-Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return bare_1.KoineDialog; } });
-// export * from "../Form";
-// export * from "../Forms";
-// export * from "../Grid";
-// export * from "../Hamburger";
-// export * from "../Header";
-// export * from "../Hidden";
-// export * from "../Img";
-// export * from "../Link";
-// export * from "../MenuItem";
-// export * from "../Pagination";
-// export * from "../Pill";
-// export * from "../Progress";
-// export * from "../Rating";
-// // export * from "../Select";
-// export * from "../Sidebar";
-// export * from "../Spacing";
-// export * from "../Sticky";
-// export * from "../styles";
-// export * from "../Tabs";
-// export * from "../Typography";
+export { KoineDialog } from "../Dialog/tw/bare.js";

package/twm/index.d.ts

@@ -1,2 +1 @@
-export * from "../shared";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/framer";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/framer.js";

package/twm/index.js

@@ -1,36 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../shared"), exports);
-// export * from "../Alert";
-// export * from "../Animations";
-// export * from "../Autocomplete";
-// export * from "../Bg";
-// export * from "../Breadcrumbs";
-// export * from "../Buttons";
-// export * from "../Carousel";
-// export * from "../Collapsable";
-// export * from "../Debug";
-var framer_1 = require("../Dialog/tw/framer");
-Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return framer_1.KoineDialog; } });
-// export * from "../Form";
-// export * from "../Forms";
-// export * from "../Grid";
-// export * from "../Hamburger";
-// export * from "../Header";
-// export * from "../Hidden";
-// export * from "../Img";
-// export * from "../Link";
-// export * from "../MenuItem";
-// export * from "../Pagination";
-// export * from "../Pill";
-// export * from "../Progress";
-// export * from "../Rating";
-// // export * from "../Select";
-// export * from "../Sidebar";
-// export * from "../Spacing";
-// export * from "../Sticky";
-// export * from "../styles";
-// export * from "../Tabs";
-// export * from "../Typography";
+export { KoineDialog } from "../Dialog/tw/framer.js";

package/types.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export type { KoineImgSmartWrapProps, KoineImgSmartProps } from "./Img/types";
+export type { KoineImgSmartWrapProps, KoineImgSmartProps } from "./Img/types.js";
 export type Translate = (i18nKey: any, query?: any, options?: any) => string;
 export type Option = {
     value: string;
@@ -8,3 +7,5 @@ export type Option = {
 };
 export type KoineComponentProps<BaseComponentProps, ExtendableProps> = BaseComponentProps & ExtendableProps;
 export type KoineComponent<Props = any> = string | React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
+export type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T : never;
+export type FunctionReturningPromise = (...args: any[]) => Promise<any>;

package/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/typings.d.ts

@@ -1,4 +1,5 @@
 import "styled-components";
+
 // import type {} from "styled-components/cssprop"; // for `css` prop
 
 /**

package/{hooks/useAsyncFn.d.ts → useAsyncFn.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FunctionReturningPromise, PromiseType } from "./types";
+import type { FunctionReturningPromise, PromiseType } from "./types.js";
 export type UseAsyncState<T> = {
     loading: boolean;
     error?: undefined;
@@ -19,8 +19,5 @@ export type UseAsyncState<T> = {
 };
 type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = UseAsyncState<PromiseType<ReturnType<T>>>;
 export type UseAsyncFnReturn<T extends FunctionReturningPromise = FunctionReturningPromise> = [StateFromFunctionReturningPromise<T>, T];
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
- */
 export declare function useAsyncFn<T extends FunctionReturningPromise>(fn: T, deps?: React.DependencyList, initialState?: StateFromFunctionReturningPromise<T>): UseAsyncFnReturn<T>;
 export default useAsyncFn;

package/{hooks/useAsyncFn.mjs → useAsyncFn.js}

@@ -1,15 +1,12 @@
-import { __assign } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
 import { useCallback, useRef, useState } from "react";
-import { useMountedState } from "./useMountedState";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
- */
+import { useMountedState } from "./useMountedState.js";
 export function useAsyncFn(fn, deps, initialState) {
     if (deps === void 0) { deps = []; }
     if (initialState === void 0) { initialState = { loading: false }; }
     var lastCallId = useRef(0);
     var isMounted = useMountedState();
-    var _a = useState(initialState), state = _a[0], set = _a[1];
+    var _a = __read(useState(initialState), 2), state = _a[0], set = _a[1];
     var callback = useCallback(function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -19,7 +16,7 @@ export function useAsyncFn(fn, deps, initialState) {
         if (!state.loading) {
             set(function (prevState) { return (__assign(__assign({}, prevState), { loading: true })); });
         }
-        return fn.apply(void 0, args).then(function (value) {
+        return fn.apply(void 0, __spreadArray([], __read(args), false)).then(function (value) {
             isMounted() &&
                 callId === lastCallId.current &&
                 set({ value: value, loading: false });
@@ -30,7 +27,6 @@ export function useAsyncFn(fn, deps, initialState) {
                 set({ error: error, loading: false });
             return error;
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
     return [state, callback];
 }

package/useDateLocale.d.ts

@@ -0,0 +1,2 @@
+export declare function useDateLocale(locale?: string, defaultLocale?: string): globalThis.Locale | undefined;
+export default useDateLocale;