@koine/react 1.1.8 → 1.1.10

package/helpers/classed.d.ts

@@ -8,8 +8,7 @@ type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? R
  * 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:
- *
+ * It also plays nicely with tailwind intellisense:
  * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
  *
  * For references about tagged functions:
@@ -17,6 +16,12 @@ type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? R
  * - 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
+ *
+ * Similar projects:
+ * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
+ *
+ * Discussions and Q/A:
+ * - https://stackoverflow.com/q/73055695/1938970
  */
 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 default classed;

package/helpers/classed.js

@@ -4,8 +4,7 @@ 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:
- *
+ * It also plays nicely with tailwind intellisense:
  * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
  *
  * For references about tagged functions:
@@ -13,6 +12,12 @@ import { createElement, forwardRef } from "react";
  * - 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
+ *
+ * Similar projects:
+ * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
+ *
+ * Discussions and Q/A:
+ * - https://stackoverflow.com/q/73055695/1938970
  */
 export function classed(component) {
     // @ts-expect-error nevermind for now...

package/helpers/createUseMediaQueryWidth.d.ts

@@ -1,4 +1,4 @@
-import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils";
+import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils/getMediaQueryWidthResolvers";
 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

@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { isUndefined, getMediaQueryWidthResolvers, } from "@koine/utils";
-import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect";
+import isUndefined from "@koine/utils/isUndefined";
+import getMediaQueryWidthResolvers from "@koine/utils/getMediaQueryWidthResolvers";
+import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
 /**
  * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
  *
@@ -54,7 +55,8 @@ export default createUseMediaQueryWidth;
 //// without creator it would be:
 //// ---------------------------------------------------------------------------
 // import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
-// import { isBrowser, type Split } from "@koine/utils";
+// import type { Split } from "@koine/utils";
+// import isBrowser from "@koine/utils/isBrowser";
 // import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
 // import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
 // type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";

package/hooks/useFixedOffset.js

@@ -1,7 +1,10 @@
 import { useRef } from "react";
-import { injectCss, calculateFixedOffset, listenResizeDebounced, $each, } from "@koine/dom";
-import { debounce } from "@koine/utils";
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+import injectCss from "@koine/dom/injectCss";
+import calculateFixedOffset from "@koine/dom/calculateFixedOffset";
+import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
+import $each from "@koine/dom/$each";
+import debounce from "@koine/utils/debounce";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
 var inject = function (value) {
     injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
 };

package/hooks/useInterval.js

@@ -1,6 +1,6 @@
 import { __spreadArray } from "tslib";
 import { useEffect, useRef } from "react";
-import { noop } from "@koine/utils";
+import noop from "@koine/utils/noop";
 /**
  * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
  *

package/hooks/useIsomorphicLayoutEffect.js

@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect } from "react";
-import { isBrowser } from "@koine/utils";
+import isBrowser from "@koine/utils/isBrowser";
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
  */

package/hooks/useKeyUp.js

@@ -1,6 +1,6 @@
 import { __spreadArray } from "tslib";
 import { useEffect } from "react";
-import { on } from "@koine/dom";
+import on from "@koine/dom/on";
 export function useKeyUp(callback, deps) {
     if (deps === void 0) { deps = []; }
     useEffect(function () {

package/hooks/useMeasure.js

@@ -1,7 +1,11 @@
 import { __spreadArray } from "tslib";
 import { useEffect, useState, useRef, useMemo } from "react";
-import { debounce, noop } from "@koine/utils";
-import { listenResizeDebounced, listenScrollDebounced, on, off, } from "@koine/dom";
+import debounce from "@koine/utils/debounce";
+import noop from "@koine/utils/noop";
+import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
+import listenScrollDebounced from "@koine/dom/listenScrollDebounced";
+import on from "@koine/dom/on";
+import off from "@koine/dom/off";
 var observer;
 // Returns a list of scroll offsets
 function findScrollContainers(element) {

package/hooks/useNavigateAway.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { on } from "@koine/dom";
+import on from "@koine/dom/on";
 // type UseNavigateAwayPagehideHandler = (event: PageTransitionEvent) => unknown;
 /**
  * @resources

package/hooks/useScrollPosition.js

@@ -1,7 +1,7 @@
 import { useRef } from "react";
-import { isBrowser } from "@koine/utils";
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
-import { listenScroll } from "@koine/dom";
+import isBrowser from "@koine/utils/isBrowser";
+import listenScroll from "@koine/dom/listenScroll";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
 var zeroPosition = { x: 0, y: 0 };
 var getClientRect = function (element) {
     return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();

package/hooks/useScrollThreshold.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
-import { noop } from "@koine/utils";
-import { listenScroll } from "@koine/dom";
+import noop from "@koine/utils/noop";
+import listenScroll from "@koine/dom/listenScroll";
 export var useScrollThreshold = function (threshold, callback) {
     var _a = useState(false), isBelow = _a[0], setIsBelow = _a[1];
     var handler = useCallback(function () {

package/hooks/useScrollTo.js

@@ -1,5 +1,5 @@
-import { isBrowser } from "@koine/utils";
-import { useHeader } from "../Header/useHeader";
+import isBrowser from "@koine/utils/isBrowser";
+import useHeader from "../Header/useHeader";
 export function useScrollTo(id, offset) {
     if (id === void 0) { id = ""; }
     if (offset === void 0) { offset = 0; }

package/hooks/useSmoothScroll.js

@@ -1,7 +1,8 @@
 import { useCallback } from "react";
-import { isNumber } from "@koine/utils";
-import { getOffsetTopSlim, scrollTo } from "@koine/dom";
-import { useFixedOffset } from "./useFixedOffset";
+import isNumber from "@koine/utils/isNumber";
+import getOffsetTopSlim from "@koine/dom/getOffsetTopSlim";
+import scrollTo from "@koine/dom/scrollTo";
+import useFixedOffset from "./useFixedOffset";
 /**
  *
  * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM

package/hooks/useWindowSize.d.ts

@@ -1,4 +1,4 @@
-import { debounce } from "@koine/utils";
+import debounce from "@koine/utils/debounce";
 /**
  * # Use `window` size
  *

package/hooks/useWindowSize.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { listenResize, listenResizeDebounced } from "@koine/dom";
+import listenResize from "@koine/dom/listenResize";
+import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
 /**
  * # Use `window` size
  *

package/m/MotionProvider.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LazyProps } from "framer-motion";
+import { type LazyProps } from "framer-motion";
 export type MotionProviderFeatures = LazyProps["features"];
 export type MotionProviderProps = LazyProps & React.PropsWithChildren<{}>;
 /**

package/node/Autocomplete/AutocompleteDownshift.js

@@ -13,7 +13,7 @@ exports.Autocomplete = null;
 //   CSSProperties,
 // } from "react";
 // import { useCombobox } from "downshift";
-// import { SetRequired } from "@koine/utils";
+// import type { SetRequired } from "@koine/utils";
 // // import debounce from "lodash.debounce";
 // import {
 //   AutocompleteRoot,

package/node/Autocomplete/AutocompleteDownshiftMultiselect.js

@@ -14,7 +14,7 @@ exports.Autocomplete = null;
 //   ComponentPropsWithRef,
 //   CSSProperties,
 // } from "react";
-// import { SetRequired } from "@koine/utils";
+// import type { SetRequired } from "@koine/utils";
 // import {
 //   useCombobox,
 //   useMultipleSelection,

package/node/Autocomplete/AutocompleteMui.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var AutocompleteUnstyled_1 = require("@mui/base/AutocompleteUnstyled");
-var utils_1 = require("@koine/utils");
+var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
 var helpers_1 = require("../Forms/helpers");
 var helpers_2 = require("./helpers");
 var components_1 = require("./components");
@@ -135,13 +135,13 @@ var Autocomplete = function (_a) {
         },
         // support both freeSolo free text and full option structure
         isOptionEqualToValue: function (option, value) {
-            var optValue = (0, utils_1.isString)(option) ? option : option.value;
-            var valValue = (0, utils_1.isString)(value) ? value : value.value;
+            var optValue = (0, isString_1.default)(option) ? option : option.value;
+            var valValue = (0, isString_1.default)(value) ? value : value.value;
             return optValue === valValue;
         },
         getOptionLabel: function (option) {
             // @ts-expect-error TODO: I don't get this error
-            return (0, utils_1.isString)(option) ? option : option.label || "";
+            return (0, isString_1.default)(option) ? option : option.label || "";
         },
     }), getRootProps = _e.getRootProps, getInputLabelProps = _e.getInputLabelProps, getInputProps = _e.getInputProps, getTagProps = _e.getTagProps, getListboxProps = _e.getListboxProps, getOptionProps = _e.getOptionProps, getPopupIndicatorProps = _e.getPopupIndicatorProps, groupedOptions = _e.groupedOptions, stateValue = _e.value, setAnchorEl = _e.setAnchorEl, popupOpen = _e.popupOpen, focused = _e.focused;
     var value = typeof controlledValue !== "undefined" ? controlledValue : stateValue;
@@ -171,10 +171,10 @@ var Autocomplete = function (_a) {
     return ((0, jsx_runtime_1.jsxs)(components_1.AutocompleteRoot, { children: [label && ((0, jsx_runtime_1.jsx)(components_1.AutocompleteLabel, tslib_1.__assign({}, getInputLabelProps(), { children: label }))), (0, jsx_runtime_1.jsxs)(components_1.AutocompleteWrap, tslib_1.__assign({}, getRootProps(), { "data-focus": focused }, { children: [(0, jsx_runtime_1.jsxs)(components_1.AutocompleteInner, tslib_1.__assign({ ref: setAnchorEl }, { children: [multiple &&
                                 value.map(function (valueItem, index) {
                                     var _a = getTagProps({ index: index }), onDelete = _a.onDelete, key = _a.key, tagProps = tslib_1.__rest(_a, ["onDelete", "key"]);
-                                    return ((0, jsx_runtime_1.jsxs)(components_1.AutocompleteItem, tslib_1.__assign({}, tagProps, { children: [(0, jsx_runtime_1.jsx)(components_1.AutocompleteItemLabel, { children: (0, utils_1.isString)(valueItem)
+                                    return ((0, jsx_runtime_1.jsxs)(components_1.AutocompleteItem, tslib_1.__assign({}, tagProps, { children: [(0, jsx_runtime_1.jsx)(components_1.AutocompleteItemLabel, { children: (0, isString_1.default)(valueItem)
                                                     ? valueItem
                                                     : valueItem.Label || valueItem.label }), (0, jsx_runtime_1.jsx)(components_1.AutocompleteItemRemove, tslib_1.__assign({ onClick: onDelete }, { children: "\u2715" }))] }), key));
-                                }), (0, jsx_runtime_1.jsx)(components_1.AutocompleteInput, tslib_1.__assign({}, inputProps(), { placeholder: placeholder }))] })), !!options.length && ((0, jsx_runtime_1.jsx)(components_1.AutocompleteInputArrow, tslib_1.__assign({}, getPopupIndicatorProps(), { isOpen: popupOpen }))), loading && (0, jsx_runtime_1.jsx)(styles_1.InputProgress, {})] })), groupedOptions.length ? ((0, jsx_runtime_1.jsx)(components_1.AutocompleteMenu, tslib_1.__assign({}, getListboxProps(), { children: groupedOptions.map(function (option, index) { return ((0, jsx_runtime_1.jsx)(components_1.AutocompleteMenuItem, tslib_1.__assign({}, getOptionProps({ option: option, index: index }), { children: (0, utils_1.isString)(option) ? option : option.Label || option.label }), index)); }) }))) : null, children] }));
+                                }), (0, jsx_runtime_1.jsx)(components_1.AutocompleteInput, tslib_1.__assign({}, inputProps(), { placeholder: placeholder }))] })), !!options.length && ((0, jsx_runtime_1.jsx)(components_1.AutocompleteInputArrow, tslib_1.__assign({}, getPopupIndicatorProps(), { isOpen: popupOpen }))), loading && (0, jsx_runtime_1.jsx)(styles_1.InputProgress, {})] })), groupedOptions.length ? ((0, jsx_runtime_1.jsx)(components_1.AutocompleteMenu, tslib_1.__assign({}, getListboxProps(), { children: groupedOptions.map(function (option, index) { return ((0, jsx_runtime_1.jsx)(components_1.AutocompleteMenuItem, tslib_1.__assign({}, getOptionProps({ option: option, index: index }), { children: (0, isString_1.default)(option) ? option : option.Label || option.label }), index)); }) }))) : null, children] }));
     // });
 };
 exports.Autocomplete = Autocomplete;

package/node/Autocomplete/AutocompleteReach.js

@@ -27,7 +27,7 @@ exports.Autocomplete = null;
 //   AutocompleteLabel,
 // } from "./components";
 // import type { Option } from "../types";
-// import { SetRequired } from "@koine/utils";
+// import type { SetRequired } from "@koine/utils";
 // export type AutocompleteOption =
 //   | null
 //   | (Option & {

package/node/Autocomplete/helpers.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normaliseAutocompleteValue = void 0;
-var utils_1 = require("@koine/utils");
+var tslib_1 = require("tslib");
+var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
+var isArray_1 = tslib_1.__importDefault(require("@koine/utils/isArray"));
 // export function normaliseAutocompleteValue(
 //   value?: AutocompleteValue,
 //   asArray?: true
@@ -18,12 +20,12 @@ function normaliseAutocompleteValue(value, asArray) {
     if (!value) {
         return asArray ? [""] : "";
     }
-    if ((0, utils_1.isString)(value)) {
+    if ((0, isString_1.default)(value)) {
         return asArray ? [value] : value;
     }
-    if ((0, utils_1.isArray)(value)) {
+    if ((0, isArray_1.default)(value)) {
         var values = value.map(function (valueItem) {
-            return (0, utils_1.isString)(valueItem) ? valueItem : valueItem.value;
+            return (0, isString_1.default)(valueItem) ? valueItem : valueItem.value;
         });
         return asArray ? values : values.join(",");
     }

package/node/Breadcrumbs/Breadcrumbs.js

@@ -6,7 +6,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = tslib_1.__importStar(require("styled-components"));
 var framer_motion_1 = require("framer-motion");
 var md_1 = require("react-icons/md");
-var utils_1 = require("@koine/utils");
+var titleCase_1 = tslib_1.__importDefault(require("@koine/utils/titleCase"));
 var media_1 = require("../styles/media");
 var LINK_GUTTER_X = 10;
 var Root = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  position: relative;\n"], ["\n  display: flex;\n  position: relative;\n"])));
@@ -25,7 +25,7 @@ var KoineBreadcrumbs = function (_a) {
                     opacity: 1,
                     x: 0,
                     transition: { delay: idx * 0.2 },
-                } }, { children: [item.url && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: item.url }, { children: (0, utils_1.titleCase)(item.title) }))), !item.url && (0, jsx_runtime_1.jsx)(ItemCurrent, { children: (0, utils_1.titleCase)(item.title) }), idx < items.length - 1 && (0, jsx_runtime_1.jsx)(ItemSeparator, {})] }), idx)); }) }) })));
+                } }, { children: [item.url && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: item.url }, { children: (0, titleCase_1.default)(item.title) }))), !item.url && (0, jsx_runtime_1.jsx)(ItemCurrent, { children: (0, titleCase_1.default)(item.title) }), idx < items.length - 1 && (0, jsx_runtime_1.jsx)(ItemSeparator, {})] }), idx)); }) }) })));
 };
 exports.KoineBreadcrumbs = KoineBreadcrumbs;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/node/Calendar/calendar-api-google.js

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCalendarsEventsFromGoogle = void 0;
 var tslib_1 = require("tslib");
-var utils_1 = require("@koine/utils");
+var arrayToLookup_1 = tslib_1.__importDefault(require("@koine/utils/arrayToLookup"));
+var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
+var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
 var differenceInDays_1 = tslib_1.__importDefault(require("date-fns/differenceInDays"));
 var subDays_1 = tslib_1.__importDefault(require("date-fns/subDays"));
-var utils_2 = require("./utils");
+var utils_1 = require("./utils");
 var baseURL = "https://www.googleapis.com/calendar/v3/calendars/";
 function getCalendarsEventsFromGoogle(_a) {
     var calendars = _a.calendars, options = tslib_1.__rest(_a, ["calendars"]);
@@ -23,7 +25,7 @@ function getCalendarsEventsFromGoogle(_a) {
                                     case 0: return [4 /*yield*/, getCalendarEventsFromGoogle(tslib_1.__assign({ calendar: calendar }, options))];
                                     case 1:
                                         events = _a.sent();
-                                        (0, utils_2.addCalendarEvents)(events, allEvents);
+                                        (0, utils_1.addCalendarEvents)(events, allEvents);
                                         return [2 /*return*/];
                                 }
                             });
@@ -87,7 +89,7 @@ function transformCalendarEventFromGoogle(event, calendar) {
     var start = new Date(event.start.date || event.start.dateTime);
     var end = new Date(event.end.date || event.end.dateTime);
     var color = calendar.color;
-    var allDay = (0, utils_1.isUndefined)(event.end.dateTime) && (0, utils_1.isString)(event.end.date);
+    var allDay = (0, isUndefined_1.default)(event.end.dateTime) && (0, isString_1.default)(event.end.date);
     var location = event.location || "";
     var description = event.description || ""; // FIXME: he.decode(event.description || '');
     var uid = created.getTime() + "" + start.getTime();
@@ -98,16 +100,16 @@ function transformCalendarEventFromGoogle(event, calendar) {
         end.setHours(23, 59, 59);
     }
     var days = getDays();
-    var daysMap = (0, utils_1.arrayToLookup)(days);
+    var daysMap = (0, arrayToLookup_1.default)(days);
     var multi = days.length > 1;
     function getDays() {
         var from = new Date(start);
         var to = new Date(end);
-        var days = [(0, utils_2.getEventTimestamp)(from)];
+        var days = [(0, utils_1.getEventTimestamp)(from)];
         while ((0, differenceInDays_1.default)(to, from)) {
             // console.log(title, differenceInDays(to, from))
             from.setDate(from.getDate() + 1);
-            days.push((0, utils_2.getEventTimestamp)(from));
+            days.push((0, utils_1.getEventTimestamp)(from));
         }
         return days;
     }

package/node/Form/Form.js

@@ -4,7 +4,7 @@ exports.KoineForm = exports.Form = exports.Fail = exports.Ok = exports.Collapsab
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-// import { type MotionProps } from "framer-motion";
+// import type { MotionProps } from "framer-motion";
 var helpers_1 = require("../helpers");
 exports.Root = "form";
 exports.Overlay = "div";

package/node/Forms/Field/FieldControl.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
-var utils_1 = require("@koine/utils");
+var decode_1 = tslib_1.__importDefault(require("@koine/utils/decode"));
 var Field_1 = require("./Field");
 var FieldHint_1 = require("./FieldHint");
 var styles_1 = require("../styles");
@@ -21,7 +21,7 @@ var styles_1 = require("../styles");
  */
 var FieldControl = function (_a) {
     var control = _a.control, register = _a.register, setValue = _a.setValue, maybeEncodedName = _a.name, label = _a.label, placeholder = _a.placeholder, hint = _a.hint, t = _a.t, _b = _a.showError, showError = _b === void 0 ? true : _b, children = _a.children, encode = _a.encode, props = tslib_1.__rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
-    var name = encode ? (0, utils_1.decode)(maybeEncodedName) : maybeEncodedName;
+    var name = encode ? (0, decode_1.default)(maybeEncodedName) : maybeEncodedName;
     var errors = (0, react_hook_form_1.useFormState)({ name: name, control: control }).errors;
     var error = showError && errors[name] ? errors[name] : null;
     var FormFieldContent = (0, react_1.useMemo)(function () {

package/node/Forms/antispam.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.decodeForm = exports.encodeForm = void 0;
+var tslib_1 = require("tslib");
 var yup_1 = require("@kuus/yup");
-var utils_1 = require("@koine/utils");
+var encode_1 = tslib_1.__importDefault(require("@koine/utils/encode"));
+var decode_1 = tslib_1.__importDefault(require("@koine/utils/decode"));
+var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
 /**
  * Encode form
  *
@@ -19,7 +22,7 @@ function encodeForm(validationRules) {
     var encodedNames = {};
     for (var name_1 in validationRules) {
         if (!name_1.startsWith("_")) {
-            var encodedName = (0, utils_1.encode)(name_1);
+            var encodedName = (0, encode_1.default)(name_1);
             encoded[encodedName] = validationRules[name_1];
             encodedNames[name_1] = encodedName;
         }
@@ -42,7 +45,7 @@ exports.encodeForm = encodeForm;
 function decodeForm(formData) {
     var json = {};
     for (var encodedName in formData) {
-        var decodedName = (0, utils_1.decode)(encodedName);
+        var decodedName = (0, decode_1.default)(encodedName);
         // always add underscore prefixed names as they are treated as internal
         // private inputs outside of the honeypot system, normalise them here removing
         // the underscore prefix
@@ -51,7 +54,7 @@ function decodeForm(formData) {
             json[encodedName.substring(1)] = formData[encodedName];
         }
         // if the decoded `name` is empty and the encoded `name` is defined honeypot passed
-        else if (!(0, utils_1.isUndefined)(formData[encodedName]) &&
+        else if (!(0, isUndefined_1.default)(formData[encodedName]) &&
             formData[decodedName] === "") {
             // @ts-expect-error nevermind
             json[decodedName] = formData[encodedName];

package/node/Forms/helpers.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.triggerChange = exports.triggerOnChange = exports.defaultOptionsFilterFn = exports.normaliseOptions = void 0;
-var utils_1 = require("@koine/utils");
+var tslib_1 = require("tslib");
+var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
+var matchSorter_1 = tslib_1.__importDefault(require("@koine/utils/matchSorter"));
 var normaliseOptions = function (options) {
     if (options === void 0) { options = []; }
     return options.map(function (option) {
-        return (0, utils_1.isString)(option)
+        return (0, isString_1.default)(option)
             ? {
                 label: option,
                 value: option,
@@ -18,7 +20,7 @@ function defaultOptionsFilterFn(options, inputValue) {
     if (!inputValue) {
         return options;
     }
-    return (0, utils_1.matchSorter)(options, inputValue, { keys: ["value", "label"] });
+    return (0, matchSorter_1.default)(options, inputValue, { keys: ["value", "label"] });
 }
 exports.defaultOptionsFilterFn = defaultOptionsFilterFn;
 /**

package/node/Header/useHeader.js

@@ -32,3 +32,4 @@ var useHeader = function () {
     ];
 };
 exports.useHeader = useHeader;
+exports.default = exports.useHeader;

package/node/Menu/MenuMui.js

@@ -10,7 +10,7 @@ var MenuUnstyled_1 = require("@mui/base/MenuUnstyled");
 var ModalUnstyled_1 = tslib_1.__importDefault(require("@mui/base/ModalUnstyled"));
 var ClickAwayListener_1 = tslib_1.__importDefault(require("@mui/base/ClickAwayListener"));
 var react_popper_1 = require("react-popper");
-var clsx_1 = require("@koine/utils/clsx");
+var clsx_1 = tslib_1.__importDefault(require("@koine/utils/clsx"));
 var MenuRoot = framer_motion_1.motion.div;
 var MenuBackdrop = function () { return (0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0" }); };
 exports.Menu = (0, react_1.forwardRef)(function Menu(props, ref) {
@@ -73,6 +73,6 @@ exports.Menu = (0, react_1.forwardRef)(function Menu(props, ref) {
                                     opacity: 1,
                                 }, exit: {
                                     opacity: 0,
-                                }, className: (0, clsx_1.clsx)(className), style: styles["popper"] }, htmlAttributes, getListboxProps(), { "aria-labelledby": id }, { children: (0, jsx_runtime_1.jsx)(MenuUnstyled_1.MenuUnstyledContext.Provider, tslib_1.__assign({ value: contextValue }, { children: renderChildren })) })) })) }) }))) })] }));
+                                }, className: (0, clsx_1.default)(className), style: styles["popper"] }, htmlAttributes, getListboxProps(), { "aria-labelledby": id }, { children: (0, jsx_runtime_1.jsx)(MenuUnstyled_1.MenuUnstyledContext.Provider, tslib_1.__assign({ value: contextValue }, { children: renderChildren })) })) })) }) }))) })] }));
 });
 exports.default = exports.Menu;

package/node/MenuItem/MenuItemMui.js

@@ -6,13 +6,13 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var MenuItemUnstyled_1 = require("@mui/base/MenuItemUnstyled");
 // import { useMenuItem } from "./useMenuItem";
-var clsx_1 = require("@koine/utils/clsx");
+var clsx_1 = tslib_1.__importDefault(require("@koine/utils/clsx"));
 exports.MenuItem = (0, react_1.forwardRef)(function MenuItem(props, ref) {
     var _a = props.as, As = _a === void 0 ? "button" : _a, children = props.children, className = props.className, disabledProp = props.disabled, other = tslib_1.__rest(props, ["as", "children", "className", "disabled"]);
     var _b = (0, MenuItemUnstyled_1.useMenuItem)({
         ref: ref,
         disabled: disabledProp,
     }), getRootProps = _b.getRootProps, disabled = _b.disabled, focusVisible = _b.focusVisible;
-    return ((0, jsx_runtime_1.jsx)(As, tslib_1.__assign({ className: (0, clsx_1.clsx)(focusVisible && "", disabled && "", className) }, getRootProps(other), { children: children })));
+    return ((0, jsx_runtime_1.jsx)(As, tslib_1.__assign({ className: (0, clsx_1.default)(focusVisible && "", disabled && "", className) }, getRootProps(other), { children: children })));
 });
 exports.default = exports.MenuItem;

package/node/Pagination/PaginationNav.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
 var cg_1 = require("react-icons/cg");
-var utils_1 = require("@koine/utils");
+var ensureInt_1 = tslib_1.__importDefault(require("@koine/utils/ensureInt"));
 var Root = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px 0 40px;\n  font-weight: 600;\n\n  & a {\n    text-decoration: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px 0 40px;\n  font-weight: 600;\n\n  & a {\n    text-decoration: none;\n  }\n"])));
 var item = "\n  display: block;\n  padding: 5px 10px;\n";
 var ItemCurrent = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n  background: var(--accent400);\n  border-radius: 2px;\n"], ["\n  ", "\n  background: var(--accent400);\n  border-radius: 2px;\n"])), item);
@@ -24,9 +24,9 @@ var ItemNext = styled_components_1.default.a(templateObject_6 || (templateObject
  */
 var KoinePaginationNav = function (_a) {
     var total = _a.total, perPage = _a.perPage, currentPage = _a.currentPage, baseUrl = _a.baseUrl, _b = _a.showOffset, showOffset = _b === void 0 ? 2 : _b, _c = _a.currentUrl, currentUrl = _c === void 0 ? "/" : _c, _d = _a.Link, Link = _d === void 0 ? "a" : _d;
-    total = (0, utils_1.ensureInt)(total);
-    currentPage = (0, utils_1.ensureInt)(currentPage);
-    perPage = (0, utils_1.ensureInt)(perPage);
+    total = (0, ensureInt_1.default)(total);
+    currentPage = (0, ensureInt_1.default)(currentPage);
+    perPage = (0, ensureInt_1.default)(perPage);
     // page 0 means 1
     currentPage = currentPage || 1;
     baseUrl = baseUrl || currentUrl;

package/node/Spacing/Spacing.js

@@ -4,12 +4,12 @@ exports.Spacing = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var utils_1 = require("@koine/utils");
+var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
 var spacing_1 = require("../styles/spacing");
 var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacing_1.spacingTop.call.apply(spacing_1.spacingTop, tslib_1.__spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacing_1.spacingBottom.call.apply(spacing_1.spacingBottom, tslib_1.__spreadArray([p.theme], p.$bottom, false)); });
 var extractDirectionArgs = function (raw) {
     var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
-    var factorArg = (0, utils_1.isUndefined)(factor) ? undefined : parseFloat(factor);
+    var factorArg = (0, isUndefined_1.default)(factor) ? undefined : parseFloat(factor);
     var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
     return [size, factorArg, property, devicesArg];
 };

package/node/helpers/classed.js

@@ -7,8 +7,7 @@ var react_1 = require("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:
- *
+ * It also plays nicely with tailwind intellisense:
  * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
  *
  * For references about tagged functions:
@@ -16,6 +15,12 @@ var react_1 = require("react");
  * - 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
+ *
+ * Similar projects:
+ * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
+ *
+ * Discussions and Q/A:
+ * - https://stackoverflow.com/q/73055695/1938970
  */
 function classed(component) {
     // @ts-expect-error nevermind for now...