@koine/react 1.0.10 → 1.0.11

package/node/Sticky/Sticky.js

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sticky = void 0;
+exports.Sticky = null;
+// import {
+//   Ref,
+//   CSSProperties,
+//   useState,
+//   useCallback,
+//   useEffect,
+//   useRef,
+// } from "react";
+// /**
+//  * Get current coordinates `left` and `top` of specific element.
+//  */
+// const offsetRelative = (element: HTMLElement) => {
+//   var result = { l: 0, t: 0 };
+//   do {
+//     let offsetTop = element.offsetTop;
+//     let offsetLeft = element.offsetLeft;
+//     if (!isNaN(offsetTop)) result.t += offsetTop;
+//     if (!isNaN(offsetLeft)) result.l += offsetLeft;
+//     // @ts-expect-error just rething everyhting in this file
+//     element =
+//       "BODY" === element.tagName ? element.parentElement : element.offsetParent;
+//   } while (element);
+//   return result;
+// };
+// export type StickyElementProps = {
+//   ref: Ref<HTMLDivElement>;
+//   sticky?: boolean;
+//   style: CSSProperties;
+// };
+// /**
+//  * - `0`: "STATIC": Static position as nothing happened
+//  * - `1`: "VIEWPORT-TOP": Sticked to the top screen edge
+//  * - `2`: "VIEWPORT-BOTTOM": Sticked to the bottom screen edge
+//  * - `4`: "VIEWPORT-UNBOTTOM": ? Scrolling in the middle of the element, neither sticked nor static
+//  * - `3`: "CONTAINER-BOTTOM": ?
+//  */
+// export type StickyStatus = 0 | 1 | 2 | 3;
+// type DimensionsBasic = [
+//   /** containerTop */
+//   number,
+//   /** containerHeight */
+//   number,
+//   /** containerBottom */
+//   number,
+//   /** elementHeight */
+//   number,
+//   /** elementWidth */
+//   number,
+//   /** viewportHeight */
+//   number,
+//   /** maxTranslateY */
+//   number
+// ];
+// type DimensionsOnScroll = [
+//   /** elementLeft */
+//   number,
+//   /** viewportTop */
+//   number,
+//   /** viewportBottom */
+//   number,
+//   /** viewportLeft */
+//   number,
+//   /** topSpacing */
+//   number,
+//   /** bottomSpacing */
+//   number
+//   /** translateY */
+//   // number,
+//   /** lastTopSpacing */
+//   // number,
+//   /** lastBottomSpacing */
+//   // number,
+//   /** lastViewportTop */
+//   // number,
+// ];
+// type Dimensions = DimensionsBasic & DimensionsOnScroll;
+// const getDimensionsBasic = (container: HTMLElement, inner: HTMLElement) => {
+//   const containerTop = offsetRelative(container).t;
+//   const containerHeight = container.clientHeight;
+//   const containerBottom = containerTop + containerHeight;
+//   const elementHeight = inner.offsetHeight;
+//   const elementWidth = inner.offsetWidth;
+//   const viewportHeight = window.innerHeight;
+//   const maxTranslateY = containerHeight - elementHeight;
+//   return [
+//     containerTop,
+//     containerHeight,
+//     containerBottom,
+//     elementHeight,
+//     elementWidth,
+//     viewportHeight,
+//     maxTranslateY,
+//   ] as DimensionsBasic;
+// };
+// const getDimensionsOnScroll = (
+//   wrapper: HTMLElement,
+//   container: HTMLElement,
+//   inner: HTMLElement
+// ) => {
+//   const elementLeft = offsetRelative(wrapper).l;
+//   const viewportTop =
+//     document.documentElement.scrollTop || document.body.scrollTop;
+//   const viewportBottom = viewportTop + window.innerHeight;
+//   const viewportLeft =
+//     document.documentElement.scrollLeft || document.body.scrollLeft;
+//   const topSpacing = 0; // TODO: make it a prop?
+//   const bottomSpacing = 0; // TODO: make it a prop?
+//   // const lastTopSpacing = topSpacing;
+//   // const lastBottomSpacing = bottomSpacing;
+//   return [
+//     elementLeft,
+//     viewportTop,
+//     viewportBottom,
+//     viewportLeft,
+//     topSpacing,
+//     bottomSpacing,
+//   ] as DimensionsOnScroll;
+// };
+// // const getTranslateYonScroll = (dimensions: DimensionsOnScroll, status: StickyStatus) => {
+// //   if (status === 1) {
+// //     // Adjust translate Y in the case decrease top spacing value.
+// //     if (dimensions[5] < dims.lastTopSpacing) {
+// //       dims.translateY += dims.lastTopSpacing - dims.topSpacing;
+// //       this._reStyle = true;
+// //     }
+// //   } else if (status === 2) {
+// //     // Adjust translate Y in the case decrease bottom spacing value.
+// //     if (dims.bottomSpacing < dims.lastBottomSpacing) {
+// //       dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
+// //       this._reStyle = true;
+// //     }
+// //   }
+// // }
+// export type StickyProps = {
+//   /** @default "div" */
+//   Wrapper?: FC<StickyElementProps>;
+//   /** @default "div" */
+//   Inner?: FC<StickyElementProps>;
+//   top: number;
+// };
+// export const Sticky: FC<StickyProps> = ({
+//   Wrapper = "div",
+//   Inner = "div",
+//   children,
+//   top,
+//   ...props
+// }) => {
+//   const [sticky, setSticky] = useState(false);
+//   const [shouldRestyle, setShouldRestyle] = useState<boolean>();
+//   const stickyStatus = useRef<StickyStatus>(0);
+//   const [dimensionsBasic, setDimensionsBasic] = useState<DimensionsBasic>();
+//   const [dimensionsOnScroll, setDimensionsOnScroll] =
+//     useState<DimensionsOnScroll>();
+//   const [translateY, setTranslateY] = useState<number>(0);
+//   const [styleWrapper, setStyleWrapper] = useState({});
+//   const [styleInner, setStyleInner] = useState({});
+//   const [innerWidth, setInnerWidth] = useState<string>();
+//   const wrapperRef = useRef<HTMLDivElement>(null);
+//   const innerRef = useRef<HTMLDivElement>(null);
+//   const handleScroll = useCallback(() => {
+//     const wrapper = wrapperRef?.current;
+//     const container = wrapper?.parentElement || null;
+//     const inner = innerRef?.current;
+//     if (wrapper && inner && container) {
+//       const dimensions = getDimensionsOnScroll(wrapper, container, inner);
+//       setDimensionsOnScroll(dimensions);
+//     }
+//   }, []);
+//   const handleResize = useCallback(() => {
+//     const container = wrapperRef?.current?.parentElement || null;
+//     const inner = innerRef?.current;
+//     if (inner && container) {
+//       setDimensionsBasic(getDimensionsBasic(container, inner));
+//       // if (innerRef?.current) {
+//       //   setInnerWidth(window.getComputedStyle(innerRef.current).width);
+//       // }
+//       // setSticky(wrapperRef.current.getBoundingClientRect().top <= top);
+//     }
+//   }, []);
+//   useEffect(() => {
+//     const container = wrapperRef?.current?.parentElement || null;
+//     const inner = innerRef?.current;
+//     if (inner && container) {
+//       setDimensionsBasic(getDimensionsBasic(container, inner));
+//     }
+//     window.addEventListener("scroll", handleScroll, { passive: true });
+//     window.addEventListener("resize", handleResize, { passive: true });
+//     return () => {
+//       window.removeEventListener("scroll", () => handleScroll);
+//       window.removeEventListener("resize", () => handleResize);
+//     };
+//   }, [wrapperRef, innerRef, handleScroll, handleResize]);
+//   // useEffect(() => {
+//   //   if (sticky) {
+//   //     setStyleInner({
+//   //       position: "fixed",
+//   //       zIndex: 1,
+//   //       top,
+//   //       width: innerWidth,
+//   //     });
+//   //   } else {
+//   //     setStyleInner({});
+//   //   }
+//   // }, [sticky, top, innerWidth]);
+//   return (
+//     <Wrapper
+//       ref={wrapperRef}
+//       sticky={Wrapper === "div" ? undefined : sticky}
+//       style={{
+//         position: "relative",
+//       }}
+//     >
+//       <Inner ref={innerRef} style={styleInner}>
+//         {children}
+//       </Inner>
+//     </Wrapper>
+//   );
+// };

package/node/Sticky/StickyCss.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyCss = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StickyCss = ({ top, ...props }) => {
+    return (0, jsx_runtime_1.jsx)("div", { style: { position: "sticky", top: 100 }, ...props });
+};
+exports.StickyCss = StickyCss;

package/node/Sticky/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./StickyCss"), exports);

package/node/Tabs/TabsMui.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Tab = exports.Panel = exports.Indicator = exports.List = exports.Root = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TabsUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabsUnstyled"));
+const TabsListUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabsListUnstyled"));
+const TabUnstyled_1 = tslib_1.__importStar(require("@mui/base/TabUnstyled"));
+const TabPanelUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabPanelUnstyled"));
+const helpers_1 = require("../helpers");
+exports.Root = TabsUnstyled_1.default;
+exports.List = TabsListUnstyled_1.default;
+// export const Tab = TabUnstyled as unknown as Props["Tab"];
+exports.Indicator = "span";
+exports.Panel = TabPanelUnstyled_1.default;
+exports.Tab = (0, react_1.forwardRef)(function Tab({ children, component, componentsProps, components, Indicator, ...props }, ref) {
+    const { active, disabled, selected } = (0, TabUnstyled_1.useTab)({ ...props, ref });
+    const indicatorProps = { active, disabled, selected };
+    return ((0, jsx_runtime_1.jsxs)(TabUnstyled_1.default /* ref={ref}  */, { ...props, children: [children, Indicator && (0, jsx_runtime_1.jsx)(Indicator, { ...indicatorProps })] }));
+});
+/**
+ *
+ * Main differences from [Mui Tabs](https://mui.com/material-ui/react-dialog):
+ *
+ * @resources
+ * - [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#tabpanel)
+ * - [WAI-ARIA example](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html)
+ * - [[Proposal] New tags tabsection, tablist, tab, tabpanel](https://github.com/whatwg/html/issues/1809)
+ * - [Native <tab> elements](https://github.com/w3c/html/issues/1704)
+ * - [Let's talk about Native HTML Tabs](https://daverupert.com/2021/10/native-html-tabs/)
+ *
+ * @similar
+ * - [Zertz/react-headless-tabs](https://github.com/Zertz/react-headless-tabs)
+ *
+ * FIXME: it actually works even without forwardRef, check if we do need it
+ */
+const TabsWithRef = (0, react_1.forwardRef)(function Tabs({ Root: _Root, List: _List, Tab: _Tab, Indicator: _Indicator, Panel: _Panel, ...props }, ref) {
+    return (0, jsx_runtime_1.jsx)(exports.Root, { ...props, ref: ref });
+});
+exports.KoineTabs = (0, helpers_1.extendComponent)(TabsWithRef, {
+    Root: exports.Root,
+    List: exports.List,
+    Tab: exports.Tab,
+    Indicator: exports.Indicator,
+    Panel: exports.Panel,
+});

package/node/Tabs/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TabsMui"), exports);

package/node/Tabs/sc/bare.js

@@ -0,0 +1,87 @@
+"use strict";
+// <reference types="@reach/utils/dist/declarations/src/polymorphic" />
+/**
+ * @file
+ *
+ * Here we manage only "vertical" oriented tabs for now
+ */
+// import styled from "styled-components";
+// import {
+//   Tabs as _Tabs,
+//   TabList as _TabList,
+//   Tab as _Tab,
+//   TabPanels as _TabPanels,
+//   TabPanel as _TabPanel,
+//   TabProps as _TabProps,
+//   TabsProps as _TabsProps,
+//   useTabsContext,
+// } from "@reach/tabs";
+// import { min } from "../../styles/media";
+// import { UnderlineSkewed } from "../../Animations/Underline";
+// import { btnStyleReset } from "../../Buttons/Button";
+// export const Tabs = styled(_Tabs)<TabsProps>`
+//   ${min.sm} {
+//     display: flex;
+//     ${(p) => p.$vertical && "flex-direction: column;"}
+//   }
+// `;
+// export type TabsProps = React.PropsWithChildren<_TabsProps> & {
+//   $vertical?: boolean;
+// };
+// export const TabList = styled(_TabList)`
+//   display: flex;
+//   flex-direction: column;
+//   ${min.sm} {
+//     border-right: 1px solid var(--grey800);
+//   }
+// `;
+// export const TabWrap = styled(_Tab)<TabProps & TabStyledProps>`
+//   ${btnStyleReset}
+//   position: relative;
+//   justify-content: flex-end;
+//   padding: 0.7em;
+//   margin-bottom: 1em;
+//   font-weight: bold;
+//   color: ${(p) => (p.$active ? "var(--accent200)" : "var(--grey300)")};
+//   ${min.sm} {
+//     padding-right: var(--gutter-half);
+//   }
+//   &:hover {
+//     color: ${(p) => (p.$active ? "var(--accent200)" : "var(--accent300)")};
+//   }
+// `;
+// export const TabText = styled.span<TabStyledProps>`
+//   position: relative;
+//   z-index: 1;
+// `;
+// export const TabUnderline = styled(UnderlineSkewed)<TabStyledProps>``;
+// export type TabStyledProps = {
+//   $active: boolean;
+//   $focused: boolean;
+// };
+// export type TabProps = _TabProps & {
+//   idx: number;
+// };
+// export const Tab = ({ children, ...props }: TabProps) => {
+//   const { selectedIndex, focusedIndex } = useTabsContext();
+//   const styledProps = {
+//     $active: props.idx === selectedIndex,
+//     $focused: props.idx === focusedIndex,
+//   };
+//   return (
+//     <TabWrap {...props} {...styledProps}>
+//       {styledProps.$active && (
+//         <TabUnderline {...styledProps} layoutId="Tab-underline" />
+//       )}
+//       <TabText {...styledProps}>{children}</TabText>
+//     </TabWrap>
+//   );
+// };
+// export const TabPanels = styled(_TabPanels)`
+//   flex: 1;
+// `;
+// export const TabPanel = styled(_TabPanel)`
+//   ${min.sm} {
+//     padding-left: var(--gutter-half);
+//   }
+// `;

package/node/Tabs/tw/bare.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Panel = exports.Indicator = exports.Tab = exports.List = exports.Root = void 0;
+const tslib_1 = require("tslib");
+const helpers_1 = require("../../helpers");
+// import type { ComponentsProps } from "../TabsMui";
+const _ = tslib_1.__importStar(require("../TabsMui"));
+exports.Root = (0, helpers_1.classed)(_.Root) `< class="tabs`;
+exports.List = (0, helpers_1.classed)(_.List) `< class="tabsList flex`;
+exports.Tab = (0, helpers_1.classed)(_.Tab) `< class="tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none`;
+exports.Indicator = (0, helpers_1.classed)(_.Indicator) `< class="tabsIndicator`;
+exports.Panel = (0, helpers_1.classed)(_.Panel) `< class="tabsPanel`;
+exports.KoineTabs = (0, helpers_1.extendComponent)(_.KoineTabs, {
+    Root: exports.Root,
+    List: exports.List,
+    Tab: exports.Tab,
+    Indicator: exports.Indicator,
+    Panel: exports.Panel,
+});

package/node/Tabs/tw/material.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Panel = exports.Indicator = exports.Tab = exports.List = exports.Root = void 0;
+const helpers_1 = require("../../helpers");
+const bare_1 = require("./bare");
+exports.Root = (0, helpers_1.classed)(bare_1.KoineTabs.Root) `< class="`;
+exports.List = (0, helpers_1.classed)(bare_1.KoineTabs.List) `< class="border-b-gray-200 border-b border-solid`;
+exports.Tab = (0, helpers_1.classed)(bare_1.KoineTabs.Tab) `< class="flex-col relative py-3 px-4 uppercase`; // ${p => p.selected ? "text-cyan-600" : ""}
+exports.Indicator = (0, helpers_1.classed)(bare_1.KoineTabs.Indicator) `< class="absolute bottom-0 w-full h-[2px] ${p => p.selected ? "bg-current" : ""}`;
+exports.Panel = (0, helpers_1.classed)(bare_1.KoineTabs.Panel) `< class="tabsPanel`;
+exports.KoineTabs = (0, helpers_1.extendComponent)(bare_1.KoineTabs, {
+    Root: exports.Root,
+    List: exports.List,
+    Tab: exports.Tab,
+    Indicator: exports.Indicator,
+    Panel: exports.Panel,
+});

package/node/Tabs/useTabs.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabs = void 0;
+const react_1 = require("react");
+const utils_1 = require("@mui/utils");
+const useId_1 = require("../hooks/useId");
+const useTabs = (props) => {
+    const { value: valueProp, defaultValue, onChange, orientation, direction, selectionFollowsFocus, } = props;
+    const [value, setValue] = (0, utils_1.unstable_useControlled)({
+        controlled: valueProp,
+        default: defaultValue,
+        name: "Tabs",
+        state: "value",
+    });
+    const idPrefix = (0, useId_1.useId)();
+    const onSelected = (0, react_1.useCallback)((e, newValue) => {
+        setValue(newValue);
+        if (onChange) {
+            onChange(e, newValue);
+        }
+    }, [onChange, setValue]);
+    const getRootProps = () => {
+        return {};
+    };
+    const tabsContextValue = (0, react_1.useMemo)(() => {
+        return {
+            idPrefix,
+            value,
+            onSelected,
+            orientation,
+            direction,
+            selectionFollowsFocus,
+        };
+    }, [
+        idPrefix,
+        value,
+        onSelected,
+        orientation,
+        direction,
+        selectionFollowsFocus,
+    ]);
+    return {
+        getRootProps,
+        tabsContextValue,
+    };
+};
+exports.useTabs = useTabs;
+exports.default = exports.useTabs;

package/node/Typography/CopyPasteVisible.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyPasteVisible = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.CopyPasteVisible = styled_components_1.default.span `
+  color: transparent;
+  opacity: 0;
+  font-size: 0;
+`;

package/node/Typography/Native.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.P = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.p = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const media_1 = require("../styles/media");
+exports.p = `
+  margin: 0 0 1em 0;
+`;
+exports.h1 = `
+  margin: 0 0 10px 0;
+  font-size: 30px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+  ${media_1.min.md} {
+    font-size: 50px;
+  }
+`;
+exports.h2 = `
+  margin: 0 0 1em 0;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+`;
+exports.h3 = `
+  margin: 0 0 1em 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+exports.h4 = `
+  margin: 0 0 1em 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+exports.P = styled_components_1.default.div `
+  ${exports.p}
+`;
+exports.H1 = styled_components_1.default.div `
+  ${exports.h1}
+`;
+exports.H2 = styled_components_1.default.div `
+  ${exports.h2}
+`;
+exports.H3 = styled_components_1.default.div `
+  ${exports.h3}
+`;
+exports.H4 = styled_components_1.default.div `
+  ${exports.h4}
+`;

package/node/Typography/ReadMore.js

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

package/node/Typography/TextLoop.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLoop = exports.TextLoopPiece = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
+const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400, }) => {
+    const placeholderRef = (0, react_1.useRef)(null);
+    const [content, setContent] = (0, react_1.useState)({ data: "", key: "" });
+    const [width, setWidth] = (0, react_1.useState)(inline ? 0 : "auto");
+    (0, react_1.useEffect)(() => {
+        const timeoutId = setTimeout(() => {
+            if (!placeholderRef.current)
+                return;
+            placeholderRef.current.innerHTML = text + "";
+            if (inline)
+                setWidth(placeholderRef.current.offsetWidth);
+            setContent({ data: text + "", key: new Date() + "" });
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [text, delay, inline]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: {
+            ...style,
+            position: "relative",
+            display: inline ? "inline-block" : "block",
+            width,
+            whiteSpace: inline ? "nowrap" : "normal",
+        }, children: [(0, jsx_runtime_1.jsx)("span", { ref: placeholderRef, style: { visibility: "hidden" } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    overflow: noOverflow ? "hidden" : "visible",
+                    display: "block",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    height: "100%",
+                    width: "100%",
+                }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.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) }) })] }));
+};
+exports.TextLoopPiece = TextLoopPiece;
+const TextLoop = ({ texts, interval = 3000, ...props }) => {
+    const [index, setIndex] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const intervalId = setInterval(() => setIndex((index) => index + 1), interval // every 3 seconds
+        );
+        return () => clearTimeout(intervalId);
+    }, [interval]);
+    return (0, jsx_runtime_1.jsx)(exports.TextLoopPiece, { ...props, text: texts[index % texts.length] });
+};
+exports.TextLoop = TextLoop;