@koine/react 1.0.10 → 1.0.11

package/Tabs/tw/material.js

@@ -0,0 +1,14 @@
+import { classed, extendComponent } from "../../helpers";
+import { KoineTabs as _ } from "./bare";
+export const Root = classed(_.Root) `< class="`;
+export const List = classed(_.List) `< class="border-b-gray-200 border-b border-solid`;
+export const Tab = classed(_.Tab) `< class="flex-col relative py-3 px-4 uppercase`; // ${p => p.selected ? "text-cyan-600" : ""}
+export const Indicator = classed(_.Indicator) `< class="absolute bottom-0 w-full h-[2px] ${p => p.selected ? "bg-current" : ""}`;
+export const Panel = classed(_.Panel) `< class="tabsPanel`;
+export const KoineTabs = extendComponent(_, {
+    Root,
+    List,
+    Tab,
+    Indicator,
+    Panel,
+});

package/Tabs/useTabs.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+export interface UseTabsProps {
+    /**
+     * The value of the currently selected `Tab`.
+     * If you don't want any selected `Tab`, you can set this prop to `false`.
+     */
+    value?: string | number | false;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string | number | false;
+    /**
+     * The component orientation (layout flow direction).
+     * @default 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * The direction of the text.
+     * @default 'ltr'
+     */
+    direction?: "ltr" | "rtl";
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onChange?: (event: React.SyntheticEvent, value: number | string) => void;
+    /**
+     * If `true` the selected tab changes on focus. Otherwise it only
+     * changes on activation.
+     */
+    selectionFollowsFocus?: boolean;
+}
+export declare const useTabs: (props: UseTabsProps) => {
+    getRootProps: () => {};
+    tabsContextValue: {
+        idPrefix: string;
+        value: string | number | false;
+        onSelected: (event: React.SyntheticEvent, value: number | string) => void;
+        orientation: "horizontal" | "vertical" | undefined;
+        direction: "ltr" | "rtl" | undefined;
+        selectionFollowsFocus: boolean | undefined;
+    };
+};
+export default useTabs;

package/Tabs/useTabs.js

@@ -0,0 +1,44 @@
+import { useCallback, /* useId, */ useMemo } from "react";
+import { unstable_useControlled as useControlled } from "@mui/utils";
+import { useId } from "../hooks/useId";
+export const useTabs = (props) => {
+    const { value: valueProp, defaultValue, onChange, orientation, direction, selectionFollowsFocus, } = props;
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: "Tabs",
+        state: "value",
+    });
+    const idPrefix = useId();
+    const onSelected = useCallback((e, newValue) => {
+        setValue(newValue);
+        if (onChange) {
+            onChange(e, newValue);
+        }
+    }, [onChange, setValue]);
+    const getRootProps = () => {
+        return {};
+    };
+    const tabsContextValue = useMemo(() => {
+        return {
+            idPrefix,
+            value,
+            onSelected,
+            orientation,
+            direction,
+            selectionFollowsFocus,
+        };
+    }, [
+        idPrefix,
+        value,
+        onSelected,
+        orientation,
+        direction,
+        selectionFollowsFocus,
+    ]);
+    return {
+        getRootProps,
+        tabsContextValue,
+    };
+};
+export default useTabs;

package/Typography/CopyPasteVisible.d.ts

@@ -0,0 +1 @@
+export declare const CopyPasteVisible: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/Typography/CopyPasteVisible.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+export const CopyPasteVisible = styled.span `
+  color: transparent;
+  opacity: 0;
+  font-size: 0;
+`;

package/Typography/Native.d.ts

@@ -0,0 +1,10 @@
+export declare const p = "\n  margin: 0 0 1em 0;\n";
+export declare const h1: string;
+export declare const h2 = "\n  margin: 0 0 1em 0;\n  font-size: 24px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n";
+export declare const h3 = "\n  margin: 0 0 1em 0;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
+export declare const h4 = "\n  margin: 0 0 1em 0;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
+export declare const P: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H1: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H2: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H3: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H4: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/Typography/Native.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import { min } from "../styles/media";
+export const p = `
+  margin: 0 0 1em 0;
+`;
+export const h1 = `
+  margin: 0 0 10px 0;
+  font-size: 30px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+  ${min.md} {
+    font-size: 50px;
+  }
+`;
+export const h2 = `
+  margin: 0 0 1em 0;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+`;
+export const h3 = `
+  margin: 0 0 1em 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+export const h4 = `
+  margin: 0 0 1em 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+export const P = styled.div `
+  ${p}
+`;
+export const H1 = styled.div `
+  ${h1}
+`;
+export const H2 = styled.div `
+  ${h2}
+`;
+export const H3 = styled.div `
+  ${h3}
+`;
+export const H4 = styled.div `
+  ${h4}
+`;

package/Typography/ReadMore.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export declare type ReadMoreProps = React.ComponentPropsWithoutRef<"div"> & {
+    lines?: number;
+    lineHeight?: number;
+    fontSize?: number;
+    bg?: React.CSSProperties["background"];
+    /** @default "Expand" */
+    expand?: string;
+    /** @default "Collapse" */
+    collapse?: string;
+};
+export declare const ReadMore: ({ lines, lineHeight, fontSize, bg, expand, collapse, ...props }: ReadMoreProps) => JSX.Element;

package/Typography/ReadMore.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useMemo } from "react";
+import styled from "styled-components";
+import { m, useSpring } from "framer-motion";
+// import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
+import { useIsomorphicLayoutEffect } from "../hooks";
+const Root = styled.div ``;
+const Content = styled.div `
+  & p:first-child {
+    margin-top: 0;
+  }
+`;
+const BtnWrap = styled.span `
+  display: flex;
+  justify-content: flex-end;
+  transition: transform 0.18s ease-in-out;
+  text-align: right;
+  transform: translateY(${(p) => (p.$expanded ? "0" : "-100%")});
+  opacity: ${(p) => (p.$expanded ? 0 : 1)};
+`;
+const BtnFader = styled.div `
+  width: 30%;
+  transition: transform 0.18s ease-in-out;
+  background: linear-gradient(45deg, transparent 50%, ${(p) => p.$bg} 70%);
+`;
+const Btn = styled.span `
+  padding: 0 10px 0 10px;
+  line-height: ${(p) => (p.$lineHeight ? p.$lineHeight : "inherit")};
+  background: var(--bodyBg);
+  color: var(--grey600);
+  white-space: nowrap;
+  font-size: ${(p) => p.$fontSize}px;
+  cursor: pointer;
+`;
+const BtnIcon = styled.span `
+  display: inline-block;
+  margin: 0 0 0 4px;
+  transition: transform 0.18s ease-in-out;
+  ${(p) => (p.$expanded ? "transform: rotate(180deg);" : "")};
+  font-size: ${(p) => p.$fontSize}px;
+`;
+export const ReadMore = ({ lines = 3, lineHeight = 1.6, fontSize = 14, bg = "var(--bodyBg)", expand = "Expand", collapse = "Collapse", ...props }) => {
+    const defaultMaxHeight = lines * (lineHeight * fontSize);
+    const [expanded, setExpanded] = useState(false);
+    const [maxHeight, setMaxHeight] = useState(defaultMaxHeight);
+    const [fullHeight, setFullHeight] = useState(0);
+    const [exceeds, setExceeds] = useState(false);
+    const content = useRef(null);
+    const height = useSpring(defaultMaxHeight);
+    const styles = useMemo(() => (exceeds ? { height, overflow: "hidden" } : {}), [exceeds, height]);
+    const handleExpandClick = () => {
+        setExpanded((prevExpanded) => !prevExpanded);
+    };
+    useIsomorphicLayoutEffect(() => {
+        if (content.current) {
+            const elementHeight = content.current.offsetHeight;
+            const newExceeds = elementHeight > maxHeight;
+            if (!newExceeds) {
+                setMaxHeight(elementHeight);
+            }
+            setExceeds(newExceeds);
+            setFullHeight(elementHeight);
+        }
+    }, [content, maxHeight]);
+    useIsomorphicLayoutEffect(() => {
+        height.set(expanded ? fullHeight : maxHeight);
+    }, [expanded, height, fullHeight, maxHeight]);
+    return (_jsxs(Root, { children: [_jsx(m.div, { style: styles, children: _jsx(Content, { ref: content, ...props }) }), exceeds && (_jsxs(BtnWrap, { "$expanded": expanded, children: [_jsx(BtnFader, { "$bg": bg }), _jsxs(Btn, { "$fontSize": fontSize, "$lineHeight": lineHeight, onClick: handleExpandClick, "aria-expanded": expanded, "aria-label": expanded ? collapse : expand, children: [expanded ? collapse : expand, _jsx(BtnIcon, { "$expanded": expanded })] })] }))] }));
+};

package/Typography/TextLoop.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type TextLoopPieceProps = React.PropsWithChildren<{
+    text: string | number;
+    direction?: "up" | "down";
+    inline?: boolean;
+    noOverflow?: boolean;
+    delay?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+export declare const TextLoopPiece: ({ text, style, className, direction, inline, noOverflow, delay, }: TextLoopPieceProps) => JSX.Element;
+export declare type TextLoopPrpps = Omit<TextLoopPieceProps, "text"> & {
+    texts: string[];
+    interval?: number;
+};
+export declare const TextLoop: ({ texts, interval, ...props }: TextLoopPrpps) => JSX.Element;

package/Typography/TextLoop.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { m, AnimatePresence } from "framer-motion";
+export const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400, }) => {
+    const placeholderRef = useRef(null);
+    const [content, setContent] = useState({ data: "", key: "" });
+    const [width, setWidth] = useState(inline ? 0 : "auto");
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            if (!placeholderRef.current)
+                return;
+            placeholderRef.current.innerHTML = text + "";
+            if (inline)
+                setWidth(placeholderRef.current.offsetWidth);
+            setContent({ data: text + "", key: new Date() + "" });
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [text, delay, inline]);
+    return (_jsxs("div", { className: className, style: {
+            ...style,
+            position: "relative",
+            display: inline ? "inline-block" : "block",
+            width,
+            whiteSpace: inline ? "nowrap" : "normal",
+        }, children: [_jsx("span", { ref: placeholderRef, style: { visibility: "hidden" } }), _jsx("div", { style: {
+                    overflow: noOverflow ? "hidden" : "visible",
+                    display: "block",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    height: "100%",
+                    width: "100%",
+                }, children: _jsx(AnimatePresence, { children: _jsx(m.div, { style: { position: "absolute" }, initial: {
+                            opacity: 0,
+                            y: direction === "down" ? "-100%" : "100%",
+                        }, animate: { opacity: 1, y: 0 }, exit: {
+                            opacity: 0,
+                            y: direction === "down" ? "100%" : "-100%",
+                        }, children: content.data }, content.key) }) })] }));
+};
+export const TextLoop = ({ texts, interval = 3000, ...props }) => {
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        const intervalId = setInterval(() => setIndex((index) => index + 1), interval // every 3 seconds
+        );
+        return () => clearTimeout(intervalId);
+    }, [interval]);
+    return _jsx(TextLoopPiece, { ...props, text: texts[index % texts.length] });
+};

package/Typography/TypeStairs.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type TypeStairsProps = {
+    children: string;
+    limit?: number;
+};
+export declare const TypeStairs: import("react").ForwardRefExoticComponent<TypeStairsProps & import("react").RefAttributes<unknown>>;

package/Typography/TypeStairs.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+export const TypeStairs = forwardRef(({ children, limit }, ref) => {
+    // split in rows or just use one row if there is no limit
+    const rows = limit ? splitTextIntoRows(children, limit) : [children];
+    return rows.length > 1 ? (_jsx(_Fragment, { children: rows.map((row, rowIndex) => {
+            return (_jsxs("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && _jsx("br", {})] }, `row-${rowIndex}`));
+        }) })) : (renderRow(rows[0], 0, ref));
+});
+/**
+ * every number chars find a space and break, then restart the gradient weight
+ * @see https://stackoverflow.com/a/25770787
+ */
+function splitTextIntoRows(input = "", limit = 18) {
+    const rows = [];
+    const arr = input.split(" ");
+    let currow = arr[0];
+    let rowlen = currow.length;
+    for (let i = 1; i < arr.length; i++) {
+        const word = arr[i];
+        rowlen += word.length + 1;
+        if (rowlen <= limit) {
+            currow += " " + word;
+        }
+        else {
+            rows.push(currow);
+            currow = word;
+            rowlen = word.length;
+        }
+    }
+    rows.push(currow);
+    return rows;
+}
+function renderRow(row, rowIndex, ref) {
+    const letters = row.split("");
+    let fontWeightIdx = 1;
+    // const fontWeight = Math.min(fontWeightIdx * 100, 800);
+    return (_jsx(_Fragment, { children: letters.map((letter, letterIndex) => {
+            const fontWeight = Math.min(fontWeightIdx * 100, 800);
+            // don't waste a fontWeight for a white space
+            if (letter !== " ") {
+                fontWeightIdx++;
+            }
+            return (_jsx("span", { style: { fontWeight }, ref: ref, children: letter }, `letter-${rowIndex}-${letterIndex}`));
+        }) }));
+}

package/Typography/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./CopyPasteVisible";
+export * from "./Native";
+export * from "./ReadMore";
+export * from "./TextLoop";
+export * from "./TypeStairs";

package/Typography/index.js

@@ -0,0 +1,5 @@
+export * from "./CopyPasteVisible";
+export * from "./Native";
+export * from "./ReadMore";
+export * from "./TextLoop";
+export * from "./TypeStairs";

package/Typography/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Typography/index.js",
+  "types": "./index.d.ts"
+}

package/css/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../shared";
+export { KoineDialog } from "../Dialog/css/bare";

package/css/index.js

@@ -0,0 +1,31 @@
+export * from "../shared";
+// 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";
+export { KoineDialog } from "../Dialog/css/bare";
+// 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";

package/css/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/css/index.js",
+  "types": "./index.d.ts"
+}

package/helpers/classed.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+declare type ClassedAugmentedProps<Props> = Props & {
+    className?: string;
+    ref?: React.Ref<any>;
+};
+declare type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? React.HTMLProps<Component> & ClassedAugmentedProps<Props> : ClassedAugmentedProps<Props>;
+/**
+ * This utility allows to extend a component a là `styled-components` but for
+ * a className based styling solution like Tailwind,
+ *
+ * It also plays nicely with tailwind intellisense @see:
+ *
+ * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
+ *
+ * For references about tagged functions:
+ * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
+ * - https://makersden.io/blog/reverse-engineering-styled-components
+ * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
+ * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
+ */
+export declare function classed<Props, Component extends React.ElementType = any>(component: Component): (strings: TemplateStringsArray, ...args: string[] | ((props: Props) => string)[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ClassedFinalProps<Props, Component>> & React.RefAttributes<Component>>;
+export {};

package/helpers/classed.js

@@ -0,0 +1,65 @@
+import { createElement, forwardRef } from "react";
+/**
+ * This utility allows to extend a component a là `styled-components` but for
+ * a className based styling solution like Tailwind,
+ *
+ * It also plays nicely with tailwind intellisense @see:
+ *
+ * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
+ *
+ * For references about tagged functions:
+ * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
+ * - https://makersden.io/blog/reverse-engineering-styled-components
+ * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
+ * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
+ */
+export function classed(component) {
+    // @ts-expect-error nevermind for now...
+    const type = component.type || component;
+    return function (strings, ...args) {
+        const WrappedComponent = forwardRef(function (props, ref) {
+            const argResolved = args
+                .map((arg, index) => {
+                let result = "";
+                if (typeof arg === "function") {
+                    result = arg(props);
+                }
+                else if (typeof arg !== "undefined") {
+                    result = arg.toString();
+                }
+                return strings[index] + result;
+            })
+                .join("");
+            const isNativeHtmlElement = typeof type === "string";
+            const propsToForward = isNativeHtmlElement
+                ? {}
+                : props;
+            if (isNativeHtmlElement) {
+                for (const key in props) {
+                    // like styled-components `transient` props
+                    if (!key.startsWith("$")) {
+                        // FIXME: for react 18 we need: @ts-expect-error
+                        propsToForward[key] = props[key];
+                    }
+                }
+            }
+            // get the tagged function string outcome
+            let className = argResolved || strings[0];
+            // check if we need to clean it or not from the optional structure `< class="..."`
+            className = className.match(/class="([^"]*)/)?.[1] || className;
+            // add the custom classes from props
+            className += props?.className ? " " + props?.className : "";
+            return createElement(type, {
+                // ...props,
+                ...propsToForward,
+                // only add ot props if it is not an empty string
+                className: className || undefined,
+                // add ref to props
+                ref,
+            });
+        });
+        // FIXME: not sure if this is needed
+        // WrappedComponent.displayName = type.toString();
+        return WrappedComponent; // as unknown as React.ReactElement<typeof props>;
+    };
+}

package/helpers/extend-component.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export declare type ExtendableComponent<Props = any> = React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
+export declare const extendComponent: <Component extends ExtendableComponent<any>, DefaultProps extends {}>(component: Component, defaultProps: DefaultProps) => ((props: React.ComponentProps<Component>) => React.FunctionComponentElement<any>) & DefaultProps & {
+    defaultProps: DefaultProps;
+};
+export interface OverridableComponents {
+    [key: string]: {
+        type: React.ElementType;
+        props: any;
+        motionable?: boolean;
+    };
+}
+/**
+ * Type to define a component that has overridable components.
+ *
+ * Each of them can define its:
+ * - `type`: either as a native HTMLElement (the props for that element will be
+ * automatically inferred) or as a custom React component
+ * - `props`: any additional custom props
+ * - `motionable`: if that component has a possible implementation with `framer-motion`,
+ * in that case we remove some HTMLAttributes props which collides with
+ * `MotionProps` from framer.
+ */
+export declare type WithComponents<Props, Components extends OverridableComponents> = Props & {
+    [Name in keyof Components]: NonNullable<Components[Name]["type"] extends keyof JSX.IntrinsicElements ? React.ElementType<Components[Name]["motionable"] extends true ? Omit<React.ComponentPropsWithoutRef<Components[Name]["type"]>, HtmlAttributesCollidingWithMotionProps> & Components[Name]["props"] : React.ComponentPropsWithoutRef<Components[Name]["type"]> & Components[Name]["props"]> : Components[Name]["type"]>;
+};
+declare type HtmlAttributesCollidingWithMotionProps = "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd";
+export {};

package/helpers/extend-component.js

@@ -0,0 +1,12 @@
+import { createElement } from "react";
+export const extendComponent = (component, defaultProps) => {
+    // FIXME: check if we need to forwardRef or not
+    const NewComponent = (props) => createElement(component, props);
+    // const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
+    //   (props, ref) => createElement(component, { ...props, ref })
+    // );
+    return Object.assign(NewComponent, {
+        ...defaultProps,
+        defaultProps,
+    });
+};

package/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./classed";
+export * from "./extend-component";
+export { type Simplify } from "type-fest";

package/helpers/index.js

@@ -0,0 +1,2 @@
+export * from "./classed";
+export * from "./extend-component";

package/helpers/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/helpers/index.js",
+  "types": "./index.d.ts"
+}

package/hooks/index.d.ts

@@ -0,0 +1,14 @@
+export * from "./useAsyncFn";
+export * from "./useDateLocale";
+export * from "./useEffectOnce";
+export * from "./useFirstMountState";
+export * from "./useFocus";
+export * from "./useId";
+export * from "./useIsomorphicLayoutEffect";
+export * from "./useMount";
+export * from "./useMountedState";
+export * from "./usePrevious";
+export * from "./useScrollPosition";
+export * from "./useTraceUpdate";
+export * from "./useUpdateEffect";
+export * from "./useWindowSize";

package/hooks/index.js

@@ -0,0 +1,15 @@
+export * from "./useAsyncFn";
+export * from "./useDateLocale";
+export * from "./useEffectOnce";
+export * from "./useFirstMountState";
+export * from "./useFocus";
+export * from "./useId";
+export * from "./useIsomorphicLayoutEffect";
+export * from "./useMount";
+export * from "./useMountedState";
+export * from "./usePrevious";
+export * from "./useScrollPosition";
+// export * from "./useScrollTo";
+export * from "./useTraceUpdate";
+export * from "./useUpdateEffect";
+export * from "./useWindowSize";

package/hooks/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/hooks/index.js",
+  "types": "./index.d.ts"
+}

package/hooks/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/misc/types.ts)
+ */
+export declare type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T : never;
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/misc/types.ts)
+ */
+export declare type FunctionReturningPromise = (...args: any[]) => Promise<any>;

package/hooks/types.js

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