@koine/react 2.0.0-beta.15 → 2.0.0-beta.17

package/Sidebar/Sidebar.js

@@ -1,4 +1,4 @@
-import { __makeTemplateObject } from "tslib";
+import { __makeTemplateObject, __read } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { CgCloseR as IconClose } from "react-icons/cg";
@@ -13,8 +13,8 @@ var SidebarWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTe
 var SidebarToggle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), min.md);
 export var Sidebar = function (_a) {
     var children = _a.children;
-    var _b = useState(false), open = _b[0], setOpen = _b[1];
-    var _c = useHeader(), headerHeight = _c[2];
+    var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
+    var _c = __read(useHeader(), 3), headerHeight = _c[2];
     var handleClickToggle = useCallback(function () {
         setOpen(function (prevOpen) { return !prevOpen; });
     }, []);

package/Spacing/Spacing.js

@@ -1,11 +1,11 @@
-import { __assign, __makeTemplateObject, __rest, __spreadArray } from "tslib";
+import { __assign, __makeTemplateObject, __read, __rest, __spreadArray } from "tslib";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-import isUndefined from "@koine/utils/isUndefined";
+import { isUndefined } from "@koine/utils";
 import { spacingBottom, spacingTop, } from "../styles/spacing.js";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], p.$bottom, false)); });
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], __read(p.$top), false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], __read(p.$bottom), false)); });
 var extractDirectionArgs = function (raw) {
-    var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
+    var _a = __read(raw.split(":"), 4), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
     var factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
     var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
     return [size, factorArg, property, devicesArg];

package/Tabs/TabsMui.d.ts

@@ -5,7 +5,7 @@ import TabsListUnstyled, { type TabsListProps as TabsListUnstyledProps } from "@
 import { type UseTabReturnValue } from "@mui/base/useTab";
 import type { MotionProps } from "framer-motion";
 import type { Simplify } from "@koine/utils";
-import { type WithComponents } from "../helpers/index.js";
+import { type WithComponents } from "../extendComponent.js";
 type ReducedTabsUnstyledProps = Omit<TabsUnstyledProps, "component" | "slots" | "slotProps">;
 export type OwnProps = React.PropsWithChildren<ReducedTabsUnstyledProps & {
     mTab?: MotionProps;
@@ -44,7 +44,7 @@ export type TabsProps = Props;
 export type KoineTabsProps = Props;
 export declare const Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
 export declare const List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
-export declare const Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
+export declare const Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
     children?: import("react").ReactNode;
 }>>;
 export declare const Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
@@ -58,7 +58,7 @@ export declare const KoineTabs: ((props: Omit<{
     Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
     List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
     Tab: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tab").TabTypeMap<{}, "button">>;
-    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
+    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>>;
     Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
@@ -66,7 +66,7 @@ export declare const KoineTabs: ((props: Omit<{
     Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
     List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
     Tab: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
-    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
+    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>>;
     Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
@@ -75,7 +75,7 @@ export declare const KoineTabs: ((props: Omit<{
         Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
         List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
         Tab: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
-        Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
+        Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
             children?: import("react").ReactNode;
         }>>;
         Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;

package/Tabs/TabsMui.js

@@ -6,7 +6,7 @@ import TabsUnstyled from "@mui/base/Tabs";
 import TabsListUnstyled from "@mui/base/TabsList";
 import useTab from "@mui/base/useTab";
 import { forwardRef } from "react";
-import { extendComponent, } from "../helpers/index.js";
+import { extendComponent, } from "../extendComponent.js";
 export var Root = TabsUnstyled;
 export var List = TabsListUnstyled;
 export var Indicator = "span";

package/Tabs/tw/bare.d.ts

@@ -14,7 +14,7 @@ export declare const Tab: import("react").ForwardRefExoticComponent<Omit<{
 export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
-}, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
+}, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
     children?: import("react").ReactNode;
 }>>>>;
 export declare const Panel: import("react").ForwardRefExoticComponent<Omit<{
@@ -30,7 +30,7 @@ export declare const KoineTabs: ((props: Omit<{
     Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
     List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
     Tab: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tab").TabTypeMap<{}, "button">>;
-    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
+    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>>;
     Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
@@ -50,7 +50,7 @@ export declare const KoineTabs: ((props: Omit<{
     Indicator: import("react").ForwardRefExoticComponent<Omit<{
         className?: string | undefined;
         ref?: import("react").Ref<any> | undefined;
-    }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
+    }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>>>>;
     Panel: import("react").ForwardRefExoticComponent<Omit<{
@@ -74,7 +74,7 @@ export declare const KoineTabs: ((props: Omit<{
         Indicator: import("react").ForwardRefExoticComponent<Omit<{
             className?: string | undefined;
             ref?: import("react").Ref<any> | undefined;
-        }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
+        }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
             children?: import("react").ReactNode;
         }>>>>;
         Panel: import("react").ForwardRefExoticComponent<Omit<{

package/Tabs/tw/bare.js

@@ -1,5 +1,6 @@
 import { __makeTemplateObject } from "tslib";
-import { classed, extendComponent } from "../../helpers/index.js";
+import { classed } from "../../classed.js";
+import { extendComponent } from "../../extendComponent.js";
 import * as _ from "../TabsMui.js";
 export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\"tabs"], ["< class=\"tabs"])));
 export var List = classed(_.List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"tabsList flex"], ["< class=\"tabsList flex"])));

package/Tabs/tw/material.d.ts

@@ -41,7 +41,7 @@ export declare const KoineTabs: ((props: Omit<{
     Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
     List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
     Tab: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tab").TabTypeMap<{}, "button">>;
-    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
+    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>>;
     Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;

package/Tabs/tw/material.js

@@ -1,5 +1,6 @@
 import { __makeTemplateObject } from "tslib";
-import { classed, extendComponent } from "../../helpers/index.js";
+import { classed } from "../../classed.js";
+import { extendComponent } from "../../extendComponent.js";
 import { KoineTabs as _ } from "./bare.js";
 export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\""], ["< class=\""])));
 export var List = classed(_.List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"border-b-gray-200 border-b border-solid"], ["< class=\"border-b-gray-200 border-b border-solid"])));

package/Tabs/useTabs.js

@@ -1,13 +1,14 @@
+import { __read } from "tslib";
 import useControlled from "@mui/utils/useControlled";
 import { useCallback, useId, useMemo } from "react";
 export var useTabs = function (props) {
     var valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, orientation = props.orientation, direction = props.direction, selectionFollowsFocus = props.selectionFollowsFocus;
-    var _a = useControlled({
+    var _a = __read(useControlled({
         controlled: valueProp,
         default: defaultValue,
         name: "Tabs",
         state: "value",
-    }), value = _a[0], setValue = _a[1];
+    }), 2), value = _a[0], setValue = _a[1];
     var idPrefix = useId();
     var onSelected = useCallback(function (e, newValue) {
         setValue(newValue);

package/Typography/ReadMore.js

@@ -1,9 +1,9 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { m, useSpring } from "framer-motion";
 import { useMemo, useRef, useState } from "react";
 import styled from "styled-components";
-import { useIsomorphicLayoutEffect } from "../hooks/index.js";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
 var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & p:first-child {\n    margin-top: 0;\n  }\n"], ["\n  & p:first-child {\n    margin-top: 0;\n  }\n"])));
 var BtnWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  transition: transform 0.18s ease-in-out;\n  text-align: right;\n  transform: translateY(", ");\n  opacity: ", ";\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  transition: transform 0.18s ease-in-out;\n  text-align: right;\n  transform: translateY(", ");\n  opacity: ", ";\n"])), function (p) { return (p.$expanded ? "0" : "-100%"); }, function (p) { return (p.$expanded ? 0 : 1); });
@@ -13,10 +13,10 @@ var BtnIcon = styled.span(templateObject_6 || (templateObject_6 = __makeTemplate
 export var ReadMore = function (_a) {
     var _b = _a.lines, lines = _b === void 0 ? 3 : _b, _c = _a.lineHeight, lineHeight = _c === void 0 ? 1.6 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 14 : _d, _e = _a.bg, bg = _e === void 0 ? "var(--bodyBg)" : _e, _f = _a.expand, expand = _f === void 0 ? "Expand" : _f, _g = _a.collapse, collapse = _g === void 0 ? "Collapse" : _g, props = __rest(_a, ["lines", "lineHeight", "fontSize", "bg", "expand", "collapse"]);
     var defaultMaxHeight = lines * (lineHeight * fontSize);
-    var _h = useState(false), expanded = _h[0], setExpanded = _h[1];
-    var _j = useState(defaultMaxHeight), maxHeight = _j[0], setMaxHeight = _j[1];
-    var _k = useState(0), fullHeight = _k[0], setFullHeight = _k[1];
-    var _l = useState(false), exceeds = _l[0], setExceeds = _l[1];
+    var _h = __read(useState(false), 2), expanded = _h[0], setExpanded = _h[1];
+    var _j = __read(useState(defaultMaxHeight), 2), maxHeight = _j[0], setMaxHeight = _j[1];
+    var _k = __read(useState(0), 2), fullHeight = _k[0], setFullHeight = _k[1];
+    var _l = __read(useState(false), 2), exceeds = _l[0], setExceeds = _l[1];
     var content = useRef(null);
     var height = useSpring(defaultMaxHeight);
     var styles = useMemo(function () { return (exceeds ? { height: height, overflow: "hidden" } : {}); }, [exceeds, height]);

package/Typography/TextLoop.js

@@ -1,12 +1,12 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatePresence, m } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
 export var TextLoopPiece = function (_a) {
     var _b = _a.text, text = _b === void 0 ? "" : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.direction, direction = _e === void 0 ? "up" : _e, _f = _a.inline, inline = _f === void 0 ? true : _f, _g = _a.noOverflow, noOverflow = _g === void 0 ? true : _g, _h = _a.delay, delay = _h === void 0 ? 400 : _h;
     var placeholderRef = useRef(null);
-    var _j = useState({ data: "", key: "" }), content = _j[0], setContent = _j[1];
-    var _k = useState(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
+    var _j = __read(useState({ data: "", key: "" }), 2), content = _j[0], setContent = _j[1];
+    var _k = __read(useState(inline ? 0 : "auto"), 2), width = _k[0], setWidth = _k[1];
     useEffect(function () {
         var timeoutId = setTimeout(function () {
             if (!placeholderRef.current)
@@ -36,7 +36,7 @@ export var TextLoopPiece = function (_a) {
 };
 export var TextLoop = function (_a) {
     var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = __rest(_a, ["texts", "interval"]);
-    var _c = useState(0), index = _c[0], setIndex = _c[1];
+    var _c = __read(useState(0), 2), index = _c[0], setIndex = _c[1];
     useEffect(function () {
         var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval);
         return function () { return clearTimeout(intervalId); };

package/{helpers/createUseMediaQueryWidth.d.ts → createUseMediaQueryWidth.d.ts}

@@ -1,4 +1,4 @@
-import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils/getMediaQueryWidthResolvers";
+import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils";
 type _MediaQuerWidthDefExplicit<TBreakpoint extends string> = `min-${TBreakpoint}` | `max-${TBreakpoint}` | `up-${TBreakpoint}` | `down-${TBreakpoint}` | `between-${TBreakpoint}_${TBreakpoint}` | `only-${TBreakpoint}`;
 export type MediaQuerWidthDef<TBreakpoint extends string> = `${TBreakpoint}` | _MediaQuerWidthDefExplicit<TBreakpoint>;
 export type MediaQueryWidth<TBreakpoint extends string> = `@${MediaQuerWidthDef<TBreakpoint>}`;

package/{helpers/createUseMediaQueryWidth.js → createUseMediaQueryWidth.js}

@@ -1,21 +1,21 @@
+import { __read } from "tslib";
 import { useState } from "react";
-import getMediaQueryWidthResolvers from "@koine/utils/getMediaQueryWidthResolvers";
-import isUndefined from "@koine/utils/isUndefined";
-import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect.js";
+import { getMediaQueryWidthResolvers, isUndefined, } from "@koine/utils";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
 export function createUseMediaQueryWidth(customBreakpoints) {
     var queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
     return function useMediaQueryWidth(media, serverValue) {
         var definition = media.substring(1);
-        var _a = definition.split("-"), rule = _a[0], ruleBreakpoint = _a[1];
+        var _a = __read(definition.split("-"), 2), rule = _a[0], ruleBreakpoint = _a[1];
         if (isUndefined(ruleBreakpoint)) {
             ruleBreakpoint = rule;
         }
         if (isUndefined(rule)) {
             rule = "min";
         }
-        var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
+        var _b = __read(ruleBreakpoint.split("_"), 2), br1 = _b[0], br2 = _b[1];
         var query = queryResolvers[rule](br1, br2);
-        var _c = useState(isUndefined(serverValue) ? null : serverValue), matches = _c[0], setMatches = _c[1];
+        var _c = __read(useState(isUndefined(serverValue) ? null : serverValue), 2), matches = _c[0], setMatches = _c[1];
         useIsomorphicLayoutEffect(function () {
             var mq = window.matchMedia(query);
             var handleChange = function (event) {

package/css/index.d.ts

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

package/css/index.js

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

package/index.d.ts

@@ -1 +1,25 @@
-export * from "./shared/index.js";
+export { classed } from "./classed.js";
+export { createUseMediaQueryWidth, type MediaQuerWidthDef, type MediaQueryWidth, } from "./createUseMediaQueryWidth.js";
+export { type ExtendableComponent, type OverridableComponents, type WithComponents, extendComponent, } from "./extendComponent.js";
+export { mergeRefs } from "./mergeRefs.js";
+export { useAsyncFn, type UseAsyncFnReturn, type UseAsyncState, } from "./useAsyncFn.js";
+export { useDateLocale } from "./useDateLocale.js";
+export { useFirstMountState } from "./useFirstMountState.js";
+export { useFixedOffset } from "./useFixedOffset.js";
+export { useFocus } from "./useFocus.js";
+export { useInterval } from "./useInterval.js";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export { useKeyUp } from "./useKeyUp.js";
+export { useMeasure, type UseMeasureOptions, type UseMeasureReturn, } from "./useMeasure.js";
+export { useMountedState } from "./useMountedState.js";
+export { useNavigateAway, type UseNavigateAwayHandler, } from "./useNavigateAway.js";
+export { usePrevious } from "./usePrevious.js";
+export { usePreviousRef } from "./usePreviousRef.js";
+export { useScrollPosition } from "./useScrollPosition.js";
+export { useScrollThreshold } from "./useScrollThreshold.js";
+export { useSmoothScroll } from "./useSmoothScroll.js";
+export { useSpinDelay } from "./useSpinDelay.js";
+export { useTraceUpdate } from "./useTraceUpdate.js";
+export { useUpdateEffect } from "./useUpdateEffect.js";
+export { useWindowSize } from "./useWindowSize.js";
+export type { Translate, Option } from "./types.js";

package/index.js

@@ -1 +1,24 @@
-export * from "./shared/index.js";
+export { classed } from "./classed.js";
+export { createUseMediaQueryWidth, } from "./createUseMediaQueryWidth.js";
+export { extendComponent, } from "./extendComponent.js";
+export { mergeRefs } from "./mergeRefs.js";
+export { useAsyncFn, } from "./useAsyncFn.js";
+export { useDateLocale } from "./useDateLocale.js";
+export { useFirstMountState } from "./useFirstMountState.js";
+export { useFixedOffset } from "./useFixedOffset.js";
+export { useFocus } from "./useFocus.js";
+export { useInterval } from "./useInterval.js";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export { useKeyUp } from "./useKeyUp.js";
+export { useMeasure, } from "./useMeasure.js";
+export { useMountedState } from "./useMountedState.js";
+export { useNavigateAway, } from "./useNavigateAway.js";
+export { usePrevious } from "./usePrevious.js";
+export { usePreviousRef } from "./usePreviousRef.js";
+export { useScrollPosition } from "./useScrollPosition.js";
+export { useScrollThreshold } from "./useScrollThreshold.js";
+export { useSmoothScroll } from "./useSmoothScroll.js";
+export { useSpinDelay } from "./useSpinDelay.js";
+export { useTraceUpdate } from "./useTraceUpdate.js";
+export { useUpdateEffect } from "./useUpdateEffect.js";
+export { useWindowSize } from "./useWindowSize.js";

package/package.json

@@ -2,8 +2,8 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.15",
-    "@koine/utils": "2.0.0-beta.15"
+    "@koine/dom": "2.0.0-beta.17",
+    "@koine/utils": "2.0.0-beta.17"
   },
   "peerDependenciesMeta": {
     "@hookform/resolvers": {
@@ -416,17 +416,11 @@
     "./MenuItem/useMenuItem": {
       "import": "./MenuItem/useMenuItem.js"
     },
-    "./Meta/Meta": {
-      "import": "./Meta/Meta.js"
-    },
     "./Meta": {
-      "import": "./Meta/index.js"
-    },
-    "./NoJs/NoJs": {
-      "import": "./NoJs/NoJs.js"
+      "import": "./Meta.js"
     },
     "./NoJs": {
-      "import": "./NoJs/index.js"
+      "import": "./NoJs.js"
     },
     "./Pagination/PaginationNav": {
       "import": "./Pagination/PaginationNav.js"
@@ -527,92 +521,17 @@
     "./Typography": {
       "import": "./Typography/index.js"
     },
-    "./css": {
-      "import": "./css/index.js"
-    },
-    "./helpers/classed": {
-      "import": "./helpers/classed.js"
-    },
-    "./helpers/createUseMediaQueryWidth": {
-      "import": "./helpers/createUseMediaQueryWidth.js"
-    },
-    "./helpers/extend-component": {
-      "import": "./helpers/extend-component.js"
-    },
-    "./helpers": {
-      "import": "./helpers/index.js"
-    },
-    "./helpers/mergeRefs": {
-      "import": "./helpers/mergeRefs.js"
-    },
-    "./hooks": {
-      "import": "./hooks/index.js"
-    },
-    "./hooks/types": {
-      "import": "./hooks/types.js"
-    },
-    "./hooks/useAsyncFn": {
-      "import": "./hooks/useAsyncFn.js"
-    },
-    "./hooks/useDateLocale": {
-      "import": "./hooks/useDateLocale.js"
-    },
-    "./hooks/useFirstMountState": {
-      "import": "./hooks/useFirstMountState.js"
-    },
-    "./hooks/useFixedOffset": {
-      "import": "./hooks/useFixedOffset.js"
-    },
-    "./hooks/useFocus": {
-      "import": "./hooks/useFocus.js"
-    },
-    "./hooks/useInterval": {
-      "import": "./hooks/useInterval.js"
-    },
-    "./hooks/useIsomorphicLayoutEffect": {
-      "import": "./hooks/useIsomorphicLayoutEffect.js"
-    },
-    "./hooks/useKeyUp": {
-      "import": "./hooks/useKeyUp.js"
-    },
-    "./hooks/useMeasure": {
-      "import": "./hooks/useMeasure.js"
-    },
-    "./hooks/useMountedState": {
-      "import": "./hooks/useMountedState.js"
-    },
-    "./hooks/useNavigateAway": {
-      "import": "./hooks/useNavigateAway.js"
-    },
-    "./hooks/usePrevious": {
-      "import": "./hooks/usePrevious.js"
-    },
-    "./hooks/usePreviousRef": {
-      "import": "./hooks/usePreviousRef.js"
-    },
-    "./hooks/useScrollPosition": {
-      "import": "./hooks/useScrollPosition.js"
-    },
-    "./hooks/useScrollThreshold": {
-      "import": "./hooks/useScrollThreshold.js"
-    },
-    "./hooks/useScrollTo": {
-      "import": "./hooks/useScrollTo.js"
+    "./classed": {
+      "import": "./classed.js"
     },
-    "./hooks/useSmoothScroll": {
-      "import": "./hooks/useSmoothScroll.js"
+    "./createUseMediaQueryWidth": {
+      "import": "./createUseMediaQueryWidth.js"
     },
-    "./hooks/useSpinDelay": {
-      "import": "./hooks/useSpinDelay.js"
-    },
-    "./hooks/useTraceUpdate": {
-      "import": "./hooks/useTraceUpdate.js"
-    },
-    "./hooks/useUpdateEffect": {
-      "import": "./hooks/useUpdateEffect.js"
+    "./css": {
+      "import": "./css/index.js"
     },
-    "./hooks/useWindowSize": {
-      "import": "./hooks/useWindowSize.js"
+    "./extendComponent": {
+      "import": "./extendComponent.js"
     },
     "./m/MotionProvider": {
       "import": "./m/MotionProvider.js"
@@ -626,6 +545,9 @@
     "./m/max": {
       "import": "./m/max.js"
     },
+    "./mergeRefs": {
+      "import": "./mergeRefs.js"
+    },
     "./sc": {
       "import": "./sc/index.js"
     },
@@ -667,8 +589,71 @@
     },
     "./types": {
       "import": "./types.js"
+    },
+    "./useAsyncFn": {
+      "import": "./useAsyncFn.js"
+    },
+    "./useDateLocale": {
+      "import": "./useDateLocale.js"
+    },
+    "./useFirstMountState": {
+      "import": "./useFirstMountState.js"
+    },
+    "./useFixedOffset": {
+      "import": "./useFixedOffset.js"
+    },
+    "./useFocus": {
+      "import": "./useFocus.js"
+    },
+    "./useInterval": {
+      "import": "./useInterval.js"
+    },
+    "./useIsomorphicLayoutEffect": {
+      "import": "./useIsomorphicLayoutEffect.js"
+    },
+    "./useKeyUp": {
+      "import": "./useKeyUp.js"
+    },
+    "./useMeasure": {
+      "import": "./useMeasure.js"
+    },
+    "./useMountedState": {
+      "import": "./useMountedState.js"
+    },
+    "./useNavigateAway": {
+      "import": "./useNavigateAway.js"
+    },
+    "./usePrevious": {
+      "import": "./usePrevious.js"
+    },
+    "./usePreviousRef": {
+      "import": "./usePreviousRef.js"
+    },
+    "./useScrollPosition": {
+      "import": "./useScrollPosition.js"
+    },
+    "./useScrollThreshold": {
+      "import": "./useScrollThreshold.js"
+    },
+    "./useScrollTo": {
+      "import": "./useScrollTo.js"
+    },
+    "./useSmoothScroll": {
+      "import": "./useSmoothScroll.js"
+    },
+    "./useSpinDelay": {
+      "import": "./useSpinDelay.js"
+    },
+    "./useTraceUpdate": {
+      "import": "./useTraceUpdate.js"
+    },
+    "./useUpdateEffect": {
+      "import": "./useUpdateEffect.js"
+    },
+    "./useWindowSize": {
+      "import": "./useWindowSize.js"
     }
   },
   "peerDependencies": {},
-  "version": "2.0.0-beta.15"
+  "version": "2.0.0-beta.17"
 }

package/sc/index.d.ts

@@ -1,4 +1,3 @@
-export * from "../shared/index.js";
 export * from "../Alert/index.js";
 export * from "../Animations/index.js";
 export * from "../Autocomplete/index.js";

package/sc/index.js

@@ -1,4 +1,3 @@
-export * from "../shared/index.js";
 export * from "../Alert/index.js";
 export * from "../Animations/index.js";
 export * from "../Autocomplete/index.js";

package/scm/index.d.ts

@@ -1,4 +1,3 @@
-export * from "../shared/index.js";
 export * from "../Alert/index.js";
 export * from "../Animations/index.js";
 export * from "../Autocomplete/index.js";

package/scm/index.js

@@ -1,4 +1,3 @@
-export * from "../shared/index.js";
 export * from "../Alert/index.js";
 export * from "../Animations/index.js";
 export * from "../Autocomplete/index.js";

package/shared/index.d.ts

@@ -1,8 +1,7 @@
 export * from "../Calendar/index.js";
 export * from "../Dialog/index.js";
 export * from "../FaviconTags.js";
-export * from "../helpers/index.js";
-export * from "../hooks/index.js";
-export * from "../Meta/index.js";
-export * from "../NoJs/index.js";
+export { FaviconTags, type FaviconTagsProps } from "../FaviconTags.js";
+export * from "../Meta.js";
+export * from "../NoJs.js";
 export * from "../types.js";

package/shared/index.js

@@ -1,8 +1,7 @@
 export * from "../Calendar/index.js";
 export * from "../Dialog/index.js";
 export * from "../FaviconTags.js";
-export * from "../helpers/index.js";
-export * from "../hooks/index.js";
-export * from "../Meta/index.js";
-export * from "../NoJs/index.js";
+export { FaviconTags } from "../FaviconTags.js";
+export * from "../Meta.js";
+export * from "../NoJs.js";
 export * from "../types.js";

package/styles/media.js

@@ -1,11 +1,12 @@
 var _a;
+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 = useState(false), matches = _a[0], setMatches = _a[1];
-    var _b = media.split(":"), _c = _b[0], direction = _c === void 0 ? "min" : _c, breakpoint = _b[1];
+    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;