@koine/react 2.0.0-beta.14 → 2.0.0-beta.16

package/Spacing/Spacing.js

@@ -0,0 +1,32 @@
+import { __assign, __makeTemplateObject, __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";
+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 extractDirectionArgs = function (raw) {
+    var _a = raw.split(":"), 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];
+};
+export var Spacing = function (_a) {
+    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = __rest(_a, ["top", "bottom", "vertical"]);
+    var $top;
+    var $bottom;
+    if (top) {
+        $top = extractDirectionArgs(top);
+    }
+    if (bottom) {
+        $bottom = extractDirectionArgs(bottom);
+    }
+    if (vertical) {
+        $top = extractDirectionArgs(vertical);
+        $bottom = $top;
+    }
+    if (!$top && !$bottom && !vertical) {
+        return _jsx(_Fragment, { children: props.children });
+    }
+    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
+};
+var templateObject_1;

package/Spacing/index.d.ts

@@ -1 +1 @@
-export * from "./Spacing";
+export * from "./Spacing.js";

package/Spacing/index.js

@@ -0,0 +1 @@
+export * from "./Spacing.js";

package/Sticky/Sticky.js

@@ -0,0 +1 @@
+export var Sticky = null;

package/Sticky/StickyCss.js

@@ -0,0 +1,6 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var StickyCss = function (_a) {
+    var top = _a.top, props = __rest(_a, ["top"]);
+    return _jsx("div", __assign({ style: { position: "sticky", top: 100 } }, props));
+};

package/Sticky/index.d.ts

@@ -1 +1 @@
-export { StickyCss, StickyCssProps } from "./StickyCss";
+export { StickyCss, StickyCssProps } from "./StickyCss.js";

package/Sticky/index.js

@@ -0,0 +1 @@
+export { StickyCss } from "./StickyCss.js";

package/Tabs/TabsMui.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import TabUnstyled, { type TabProps as TabUnstyledProps } from "@mui/base/Tab";
 import TabPanelUnstyled, { type TabPanelProps as TabPanelUnstyledProps } from "@mui/base/TabPanel";
 import TabsUnstyled, { type TabsProps as TabsUnstyledProps } from "@mui/base/Tabs";
@@ -6,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";
+import { type WithComponents } from "../extendComponent.js";
 type ReducedTabsUnstyledProps = Omit<TabsUnstyledProps, "component" | "slots" | "slotProps">;
 export type OwnProps = React.PropsWithChildren<ReducedTabsUnstyledProps & {
     mTab?: MotionProps;
@@ -29,7 +28,7 @@ export type Components = {
     };
     Indicator: {
         type: "span";
-        props: React.PropsWithChildren<Pick<UseTabReturnValue, "active" | /* "disabled" | */ "selected">>;
+        props: React.PropsWithChildren<Pick<UseTabReturnValue, "active" | "selected">>;
         motionable: true;
     };
     Panel: {
@@ -45,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">>;
@@ -59,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">>;
@@ -67,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">>;
@@ -76,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

@@ -0,0 +1,30 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TabUnstyled from "@mui/base/Tab";
+import TabPanelUnstyled from "@mui/base/TabPanel";
+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 "../extendComponent.js";
+export var Root = TabsUnstyled;
+export var List = TabsListUnstyled;
+export var Indicator = "span";
+export var Panel = TabPanelUnstyled;
+export var Tab = forwardRef(function Tab(_a, ref) {
+    var children = _a.children, slot = _a.slot, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = __rest(_a, ["children", "slot", "slotProps", "slots", "Indicator"]);
+    var _b = useTab(__assign(__assign({}, props), { rootRef: ref })), active = _b.active, selected = _b.selected;
+    var indicatorProps = { active: active, selected: selected };
+    return (_jsxs(TabUnstyled, __assign({}, props, { children: [children, Indicator && _jsx(Indicator, __assign({}, indicatorProps))] })));
+});
+var TabsWithRef = forwardRef(function Tabs(_a, ref) {
+    var _Root = _a.Root, _List = _a.List, _Tab = _a.Tab, _Indicator = _a.Indicator, _Panel = _a.Panel, props = __rest(_a, ["Root", "List", "Tab", "Indicator", "Panel"]);
+    return _jsx(Root, __assign({}, props, { ref: ref }));
+});
+export var KoineTabs = extendComponent(TabsWithRef, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
+});

package/Tabs/index.d.ts

@@ -1 +1 @@
-export * from "./TabsMui";
+export * from "./TabsMui.js";

package/Tabs/index.js

@@ -0,0 +1 @@
+export * from "./TabsMui.js";

package/Tabs/sc/bare.d.ts

@@ -1,5 +0,0 @@
-/**
- * @file
- *
- * Here we manage only "vertical" oriented tabs for now
- */

package/Tabs/sc/bare.js

@@ -0,0 +1 @@
+"use strict";

package/Tabs/tw/bare.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export type { KoineTabsProps } from "../TabsMui";
+export type { KoineTabsProps } from "../TabsMui.js";
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
@@ -15,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<{
@@ -31,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">>;
@@ -51,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<{
@@ -75,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

@@ -0,0 +1,17 @@
+import { __makeTemplateObject } from "tslib";
+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"])));
+export var Tab = classed(_.Tab)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"], ["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"])));
+export var Indicator = classed(_.Indicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"tabsIndicator"], ["< class=\"tabsIndicator"])));
+export var Panel = classed(_.Panel)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+export var KoineTabs = extendComponent(_.KoineTabs, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Tabs/tw/material.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export type { KoineTabsProps } from "./bare";
+export type { KoineTabsProps } from "./bare.js";
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
@@ -42,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

@@ -0,0 +1,19 @@
+import { __makeTemplateObject } from "tslib";
+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"])));
+export var Tab = classed(_.Tab)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"flex-col relative py-3 px-4 uppercase"], ["< class=\"flex-col relative py-3 px-4 uppercase"])));
+export var Indicator = classed(_.Indicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"absolute bottom-0 w-full h-[2px] ", ""], ["< class=\"absolute bottom-0 w-full h-[2px] ", ""])), function (p) {
+    return p.selected ? "bg-current" : "";
+});
+export var Panel = classed(_.Panel)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+export var KoineTabs = extendComponent(_, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Tabs/useTabs.d.ts

@@ -1,32 +1,10 @@
 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) => {

package/Tabs/useTabs.js

@@ -0,0 +1,43 @@
+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({
+        controlled: valueProp,
+        default: defaultValue,
+        name: "Tabs",
+        state: "value",
+    }), value = _a[0], setValue = _a[1];
+    var idPrefix = useId();
+    var onSelected = useCallback(function (e, newValue) {
+        setValue(newValue);
+        if (onChange) {
+            onChange(e, newValue);
+        }
+    }, [onChange, setValue]);
+    var getRootProps = function () {
+        return {};
+    };
+    var tabsContextValue = useMemo(function () {
+        return {
+            idPrefix: idPrefix,
+            value: value,
+            onSelected: onSelected,
+            orientation: orientation,
+            direction: direction,
+            selectionFollowsFocus: selectionFollowsFocus,
+        };
+    }, [
+        idPrefix,
+        value,
+        onSelected,
+        orientation,
+        direction,
+        selectionFollowsFocus,
+    ]);
+    return {
+        getRootProps: getRootProps,
+        tabsContextValue: tabsContextValue,
+    };
+};
+export default useTabs;

package/Typography/CopyPasteVisible.js

@@ -0,0 +1,4 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var CopyPasteVisible = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"], ["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"])));
+var templateObject_1;

package/Typography/Native.js

@@ -0,0 +1,14 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+import { min } from "../styles/media.js";
+export var p = "\n  margin: 0 0 1em 0;\n";
+export var h1 = "\n  margin: 0 0 10px 0;\n  font-size: 30px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n  ".concat(min.md, " {\n    font-size: 50px;\n  }\n");
+export var h2 = "\n  margin: 0 0 1em 0;\n  font-size: 24px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n";
+export var h3 = "\n  margin: 0 0 1em 0;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
+export var h4 = "\n  margin: 0 0 1em 0;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
+export var P = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), p);
+export var H1 = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), h1);
+export var H2 = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), h2);
+export var H3 = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), h3);
+export var H4 = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), h4);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Typography/ReadMore.d.ts

@@ -4,9 +4,7 @@ export type ReadMoreProps = React.ComponentPropsWithoutRef<"div"> & {
     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) => import("react/jsx-runtime").JSX.Element;

package/Typography/ReadMore.js

@@ -0,0 +1,42 @@
+import { __assign, __makeTemplateObject, __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 "../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); });
+var BtnFader = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 30%;\n  transition: transform 0.18s ease-in-out;\n  background: linear-gradient(45deg, transparent 50%, ", " 70%);\n"], ["\n  width: 30%;\n  transition: transform 0.18s ease-in-out;\n  background: linear-gradient(45deg, transparent 50%, ", " 70%);\n"])), function (p) { return p.$bg; });
+var Btn = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 0 10px 0 10px;\n  line-height: ", ";\n  background: var(--bodyBg);\n  color: var(--grey600);\n  white-space: nowrap;\n  font-size: ", "px;\n  cursor: pointer;\n"], ["\n  padding: 0 10px 0 10px;\n  line-height: ", ";\n  background: var(--bodyBg);\n  color: var(--grey600);\n  white-space: nowrap;\n  font-size: ", "px;\n  cursor: pointer;\n"])), function (p) { return (p.$lineHeight ? p.$lineHeight : "inherit"); }, function (p) { return p.$fontSize; });
+var BtnIcon = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-block;\n  margin: 0 0 0 4px;\n  transition: transform 0.18s ease-in-out;\n  ", ";\n  font-size: ", "px;\n"], ["\n  display: inline-block;\n  margin: 0 0 0 4px;\n  transition: transform 0.18s ease-in-out;\n  ", ";\n  font-size: ", "px;\n"])), function (p) { return (p.$expanded ? "transform: rotate(180deg);" : ""); }, function (p) { return p.$fontSize; });
+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 content = useRef(null);
+    var height = useSpring(defaultMaxHeight);
+    var styles = useMemo(function () { return (exceeds ? { height: height, overflow: "hidden" } : {}); }, [exceeds, height]);
+    var handleExpandClick = function () {
+        setExpanded(function (prevExpanded) { return !prevExpanded; });
+    };
+    useIsomorphicLayoutEffect(function () {
+        if (content.current) {
+            var elementHeight = content.current.offsetHeight;
+            var newExceeds = elementHeight > maxHeight;
+            if (!newExceeds) {
+                setMaxHeight(elementHeight);
+            }
+            setExceeds(newExceeds);
+            setFullHeight(elementHeight);
+        }
+    }, [content, maxHeight]);
+    useIsomorphicLayoutEffect(function () {
+        height.set(expanded ? fullHeight : maxHeight);
+    }, [expanded, height, fullHeight, maxHeight]);
+    return (_jsxs(Root, { children: [_jsx(m.div, { style: styles, children: _jsx(Content, __assign({ 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 })] })] }))] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Typography/TextLoop.js

@@ -0,0 +1,45 @@
+import { __assign, __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];
+    useEffect(function () {
+        var timeoutId = setTimeout(function () {
+            if (!placeholderRef.current)
+                return;
+            placeholderRef.current.innerHTML = text + "";
+            if (inline)
+                setWidth(placeholderRef.current.offsetWidth);
+            setContent({ data: text + "", key: new Date() + "" });
+        }, delay);
+        return function () { return clearTimeout(timeoutId); };
+    }, [text, delay, inline]);
+    return (_jsxs("div", { className: className, style: __assign(__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: 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 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];
+    useEffect(function () {
+        var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval);
+        return function () { return clearTimeout(intervalId); };
+    }, [interval]);
+    return _jsx(TextLoopPiece, __assign({}, props, { text: texts[index % texts.length] }));
+};

package/Typography/TypeStairs.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+export var TypeStairs = forwardRef(function (_a, ref) {
+    var children = _a.children, limit = _a.limit;
+    var rows = limit ? splitTextIntoRows(children, limit) : [children];
+    return rows.length > 1 ? (_jsx(_Fragment, { children: rows.map(function (row, rowIndex) {
+            return (_jsxs("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && _jsx("br", {})] }, "row-".concat(rowIndex)));
+        }) })) : (renderRow(rows[0], 0, ref));
+});
+function splitTextIntoRows(input, limit) {
+    if (input === void 0) { input = ""; }
+    if (limit === void 0) { limit = 18; }
+    var rows = [];
+    var arr = input.split(" ");
+    var currow = arr[0];
+    var rowlen = currow.length;
+    for (var i = 1; i < arr.length; i++) {
+        var 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) {
+    var letters = row.split("");
+    var fontWeightIdx = 1;
+    return (_jsx(_Fragment, { children: letters.map(function (letter, letterIndex) {
+            var fontWeight = Math.min(fontWeightIdx * 100, 800);
+            if (letter !== " ") {
+                fontWeightIdx++;
+            }
+            return (_jsx("span", { style: { fontWeight: fontWeight }, ref: ref, children: letter }, "letter-".concat(rowIndex, "-").concat(letterIndex)));
+        }) }));
+}

package/Typography/index.d.ts

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

package/Typography/index.js

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

package/classed.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type ClassedAugmentedProps<Props> = Props & {
+    className?: string;
+    ref?: React.Ref<any>;
+};
+type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? React.HTMLProps<Component> & ClassedAugmentedProps<Props> : ClassedAugmentedProps<Props>;
+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/classed.js

@@ -0,0 +1,43 @@
+import { __assign } from "tslib";
+import { createElement, forwardRef } from "react";
+export function classed(component) {
+    var type = component.type || component;
+    return function (strings) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
+        var WrappedComponent = forwardRef(function (props, ref) {
+            var _a;
+            var argResolved = args
+                .map(function (arg, index) {
+                var result = "";
+                if (typeof arg === "function") {
+                    result = arg(props);
+                }
+                else if (typeof arg !== "undefined") {
+                    result = arg.toString();
+                }
+                return strings[index] + result;
+            })
+                .join("");
+            var isNativeHtmlElement = typeof type === "string";
+            var propsToForward = isNativeHtmlElement
+                ? {}
+                : props;
+            if (isNativeHtmlElement) {
+                for (var key in props) {
+                    if (!key.startsWith("$")) {
+                        propsToForward[key] = props[key];
+                    }
+                }
+            }
+            var className = argResolved || strings[0];
+            className = ((_a = className.match(/class="([^"]*)/)) === null || _a === void 0 ? void 0 : _a[1]) || className;
+            className += (props === null || props === void 0 ? void 0 : props.className) ? " " + (props === null || props === void 0 ? void 0 : props.className) : "";
+            return createElement(type, __assign(__assign({}, propsToForward), { className: className || undefined, ref: ref }));
+        });
+        return WrappedComponent;
+    };
+}
+export default classed;

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

@@ -1,12 +1,6 @@
-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>}`;
-/**
- * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
- *
- * @param customBreakpoints
- * @returns
- */
 export declare function createUseMediaQueryWidth<TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig): <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: `@${TBreakpoints}` | `@min-${TBreakpoints}` | `@max-${TBreakpoints}` | `@up-${TBreakpoints}` | `@down-${TBreakpoints}` | `@between-${TBreakpoints}_${TBreakpoints}` | `@only-${TBreakpoints}`, serverValue?: null | boolean) => boolean | null;
 export default createUseMediaQueryWidth;