@koine/react 1.0.14 → 1.0.15

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,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyCss = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var StickyCss = function (_a) {
+    var top = _a.top, props = tslib_1.__rest(_a, ["top"]);
+    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ 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 });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./StickyCss"), exports);

package/node/Tabs/TabsMui.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Tab = exports.Panel = exports.Indicator = exports.List = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var TabsUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabsUnstyled"));
+var TabsListUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabsListUnstyled"));
+var TabUnstyled_1 = tslib_1.__importStar(require("@mui/base/TabUnstyled"));
+var TabPanelUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabPanelUnstyled"));
+var 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(_a, ref) {
+    var children = _a.children, component = _a.component, componentsProps = _a.componentsProps, components = _a.components, Indicator = _a.Indicator, props = tslib_1.__rest(_a, ["children", "component", "componentsProps", "components", "Indicator"]);
+    var _b = (0, TabUnstyled_1.useTab)(tslib_1.__assign(tslib_1.__assign({}, props), { ref: ref })), active = _b.active, disabled = _b.disabled, selected = _b.selected;
+    var indicatorProps = { active: active, disabled: disabled, selected: selected };
+    return ((0, jsx_runtime_1.jsxs)(TabUnstyled_1.default /* ref={ref}  */, tslib_1.__assign({}, props, { children: [children, Indicator && (0, jsx_runtime_1.jsx)(Indicator, tslib_1.__assign({}, 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
+ */
+var TabsWithRef = (0, react_1.forwardRef)(function Tabs(_a, ref) {
+    var _Root = _a.Root, _List = _a.List, _Tab = _a.Tab, _Indicator = _a.Indicator, _Panel = _a.Panel, props = tslib_1.__rest(_a, ["Root", "List", "Tab", "Indicator", "Panel"]);
+    return (0, jsx_runtime_1.jsx)(exports.Root, tslib_1.__assign({}, 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 });
+var 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,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Panel = exports.Indicator = exports.Tab = exports.List = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var helpers_1 = require("../../helpers");
+// import type { ComponentsProps } from "../TabsMui";
+var _ = tslib_1.__importStar(require("../TabsMui"));
+exports.Root = (0, helpers_1.classed)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["< class=\"tabs"], ["< class=\"tabs"])));
+exports.List = (0, helpers_1.classed)(_.List)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["< class=\"tabsList flex"], ["< class=\"tabsList flex"])));
+exports.Tab = (0, helpers_1.classed)(_.Tab)(templateObject_3 || (templateObject_3 = tslib_1.__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"])));
+exports.Indicator = (0, helpers_1.classed)(_.Indicator)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["< class=\"tabsIndicator"], ["< class=\"tabsIndicator"])));
+exports.Panel = (0, helpers_1.classed)(_.Panel)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+exports.KoineTabs = (0, helpers_1.extendComponent)(_.KoineTabs, {
+    Root: exports.Root,
+    List: exports.List,
+    Tab: exports.Tab,
+    Indicator: exports.Indicator,
+    Panel: exports.Panel,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/node/Tabs/tw/material.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Panel = exports.Indicator = exports.Tab = exports.List = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var helpers_1 = require("../../helpers");
+var bare_1 = require("./bare");
+exports.Root = (0, helpers_1.classed)(bare_1.KoineTabs.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["< class=\""], ["< class=\""])));
+exports.List = (0, helpers_1.classed)(bare_1.KoineTabs.List)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["< class=\"border-b-gray-200 border-b border-solid"], ["< class=\"border-b-gray-200 border-b border-solid"])));
+exports.Tab = (0, helpers_1.classed)(bare_1.KoineTabs.Tab)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["< class=\"flex-col relative py-3 px-4 uppercase"], ["< 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)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["< class=\"absolute bottom-0 w-full h-[2px] ", ""], ["< class=\"absolute bottom-0 w-full h-[2px] ", ""])), function (p) {
+    return p.selected ? "bg-current" : "";
+});
+exports.Panel = (0, helpers_1.classed)(bare_1.KoineTabs.Panel)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["< class=\"tabsPanel"], ["< 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,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/node/Tabs/useTabs.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabs = void 0;
+var react_1 = require("react");
+var utils_1 = require("@mui/utils");
+var useId_1 = require("../hooks/useId");
+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 = (0, utils_1.unstable_useControlled)({
+        controlled: valueProp,
+        default: defaultValue,
+        name: "Tabs",
+        state: "value",
+    }), value = _a[0], setValue = _a[1];
+    var idPrefix = (0, useId_1.useId)();
+    var onSelected = (0, react_1.useCallback)(function (e, newValue) {
+        setValue(newValue);
+        if (onChange) {
+            onChange(e, newValue);
+        }
+    }, [onChange, setValue]);
+    var getRootProps = function () {
+        return {};
+    };
+    var tabsContextValue = (0, react_1.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,
+    };
+};
+exports.useTabs = useTabs;
+exports.default = exports.useTabs;

package/node/Typography/CopyPasteVisible.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyPasteVisible = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.CopyPasteVisible = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_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/node/Typography/Native.js

@@ -0,0 +1,17 @@
+"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;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var media_1 = require("../styles/media");
+exports.p = "\n  margin: 0 0 1em 0;\n";
+exports.h1 = "\n  margin: 0 0 10px 0;\n  font-size: 30px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n  ".concat(media_1.min.md, " {\n    font-size: 50px;\n  }\n");
+exports.h2 = "\n  margin: 0 0 1em 0;\n  font-size: 24px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n";
+exports.h3 = "\n  margin: 0 0 1em 0;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
+exports.h4 = "\n  margin: 0 0 1em 0;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
+exports.P = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.p);
+exports.H1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h1);
+exports.H2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h2);
+exports.H3 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h3);
+exports.H4 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h4);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/node/Typography/ReadMore.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReadMore = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var framer_motion_1 = require("framer-motion");
+// import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
+var hooks_1 = require("../hooks");
+var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+var Content = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  & p:first-child {\n    margin-top: 0;\n  }\n"], ["\n  & p:first-child {\n    margin-top: 0;\n  }\n"])));
+var BtnWrap = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__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_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__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_components_1.default.span(templateObject_5 || (templateObject_5 = tslib_1.__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_components_1.default.span(templateObject_6 || (templateObject_6 = tslib_1.__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; });
+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 = tslib_1.__rest(_a, ["lines", "lineHeight", "fontSize", "bg", "expand", "collapse"]);
+    var defaultMaxHeight = lines * (lineHeight * fontSize);
+    var _h = (0, react_1.useState)(false), expanded = _h[0], setExpanded = _h[1];
+    var _j = (0, react_1.useState)(defaultMaxHeight), maxHeight = _j[0], setMaxHeight = _j[1];
+    var _k = (0, react_1.useState)(0), fullHeight = _k[0], setFullHeight = _k[1];
+    var _l = (0, react_1.useState)(false), exceeds = _l[0], setExceeds = _l[1];
+    var content = (0, react_1.useRef)(null);
+    var height = (0, framer_motion_1.useSpring)(defaultMaxHeight);
+    var styles = (0, react_1.useMemo)(function () { return (exceeds ? { height: height, overflow: "hidden" } : {}); }, [exceeds, height]);
+    var handleExpandClick = function () {
+        setExpanded(function (prevExpanded) { return !prevExpanded; });
+    };
+    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+        if (content.current) {
+            var elementHeight = content.current.offsetHeight;
+            var newExceeds = elementHeight > maxHeight;
+            if (!newExceeds) {
+                setMaxHeight(elementHeight);
+            }
+            setExceeds(newExceeds);
+            setFullHeight(elementHeight);
+        }
+    }, [content, maxHeight]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+        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, tslib_1.__assign({ style: styles }, { children: (0, jsx_runtime_1.jsx)(Content, tslib_1.__assign({ ref: content }, props)) })), exceeds && ((0, jsx_runtime_1.jsxs)(BtnWrap, tslib_1.__assign({ "$expanded": expanded }, { children: [(0, jsx_runtime_1.jsx)(BtnFader, { "$bg": bg }), (0, jsx_runtime_1.jsxs)(Btn, tslib_1.__assign({ "$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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/node/Typography/TextLoop.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLoop = exports.TextLoopPiece = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var framer_motion_1 = require("framer-motion");
+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 = (0, react_1.useRef)(null);
+    var _j = (0, react_1.useState)({ data: "", key: "" }), content = _j[0], setContent = _j[1];
+    var _k = (0, react_1.useState)(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
+    (0, react_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 ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: className, style: tslib_1.__assign(tslib_1.__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: width, whiteSpace: inline ? "nowrap" : "normal" }) }, { children: [(0, jsx_runtime_1.jsx)("span", { ref: placeholderRef, style: { visibility: "hidden" } }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ 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, tslib_1.__assign({ 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;
+var TextLoop = function (_a) {
+    var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = tslib_1.__rest(_a, ["texts", "interval"]);
+    var _c = (0, react_1.useState)(0), index = _c[0], setIndex = _c[1];
+    (0, react_1.useEffect)(function () {
+        var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval // every 3 seconds
+        );
+        return function () { return clearTimeout(intervalId); };
+    }, [interval]);
+    return (0, jsx_runtime_1.jsx)(exports.TextLoopPiece, tslib_1.__assign({}, props, { text: texts[index % texts.length] }));
+};
+exports.TextLoop = TextLoop;