@koine/react 2.0.0-beta.10 → 2.0.0-beta.11

package/Sticky/Sticky.js

@@ -1,228 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Sticky", {
-    enumerable: true,
-    get: function() {
-        return Sticky;
-    }
-});
-const 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/Sticky/StickyCss.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "StickyCss", {
-    enumerable: true,
-    get: function() {
-        return StickyCss;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const StickyCss = ({ top, ...props })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        style: {
-            position: "sticky",
-            top: 100
-        },
-        ...props
-    });
-};

package/Sticky/index.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    StickyCss: function() {
-        return _StickyCss.StickyCss;
-    },
-    StickyCssProps: function() {
-        return _StickyCss.StickyCssProps;
-    }
-});
-const _StickyCss = require("./StickyCss");

package/Tabs/TabsMui.js

@@ -1,91 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    Root: function() {
-        return Root;
-    },
-    List: function() {
-        return List;
-    },
-    Indicator: function() {
-        return Indicator;
-    },
-    Panel: function() {
-        return Panel;
-    },
-    Tab: function() {
-        return Tab;
-    },
-    KoineTabs: function() {
-        return KoineTabs;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _Tab = /*#__PURE__*/ _interop_require_default._(require("@mui/base/Tab"));
-const _TabPanel = /*#__PURE__*/ _interop_require_default._(require("@mui/base/TabPanel"));
-const _Tabs = /*#__PURE__*/ _interop_require_default._(require("@mui/base/Tabs"));
-const _TabsList = /*#__PURE__*/ _interop_require_default._(require("@mui/base/TabsList"));
-const _useTab = /*#__PURE__*/ _interop_require_default._(require("@mui/base/useTab"));
-const _react = require("react");
-const _helpers = require("../helpers");
-const Root = _Tabs.default;
-const List = _TabsList.default;
-const Indicator = "span";
-const Panel = _TabPanel.default;
-const Tab = /*#__PURE__*/ (0, _react.forwardRef)(function Tab({ children, // component,
-slot, slotProps, slots, Indicator, ...props }, ref) {
-    const { active, /* disabled, */ selected } = (0, _useTab.default)({
-        ...props,
-        rootRef: ref
-    });
-    const indicatorProps = {
-        active,
-        /* disabled, */ selected
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Tab.default, {
-        ...props,
-        children: [
-            children,
-            Indicator && /*#__PURE__*/ (0, _jsxruntime.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 = /*#__PURE__*/ (0, _react.forwardRef)(function Tabs({ Root: _Root, List: _List, Tab: _Tab, Indicator: _Indicator, Panel: _Panel, ...props }, ref) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
-        ...props,
-        ref: ref
-    });
-});
-const KoineTabs = (0, _helpers.extendComponent)(TabsWithRef, {
-    Root,
-    List,
-    Tab,
-    Indicator,
-    Panel
-}); // export default Tabs;

package/Tabs/TabsMui.stories.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    default: function() {
-        return _default;
-    },
-    Bare: function() {
-        return Bare;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _stories = require("@koine/stories");
-const _TabsMui = require("./TabsMui");
-const _default = {
-    component: _TabsMui.KoineTabs,
-    title: "Base/Tabs",
-    ..._stories.storyTabsMeta
-};
-const BareTemplate = (args)=>{
-    // return <StoryTabs {...args} Tabs={KoineTabs} />;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stories.StoryTabs, {
-        ...args,
-        Tabs: _TabsMui.KoineTabs
-    });
-// return <div><Tabs {...args} /></div>;
-};
-const Bare = BareTemplate.bind({});
-Bare.args = {
-    ..._stories.storyTabsArgs
-};

package/Tabs/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./TabsMui"), exports);

package/Tabs/sc/bare.js

@@ -1,86 +0,0 @@
-// <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);
-//   }
-// `;
-"use strict";

package/Tabs/sc/index.stories.js

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

package/Tabs/tw/bare.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    Root: function() {
-        return Root;
-    },
-    List: function() {
-        return List;
-    },
-    Tab: function() {
-        return Tab;
-    },
-    Indicator: function() {
-        return Indicator;
-    },
-    Panel: function() {
-        return Panel;
-    },
-    KoineTabs: function() {
-        return KoineTabs;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _helpers = require("../../helpers");
-const _TabsMui = /*#__PURE__*/ _interop_require_wildcard._(require("../TabsMui"));
-const Root = (0, _helpers.classed)(_TabsMui.Root)`< class="tabs`;
-const List = (0, _helpers.classed)(_TabsMui.List)`< class="tabsList flex`;
-const Tab = (0, _helpers.classed)(_TabsMui.Tab)`< class="tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none`;
-const Indicator = (0, _helpers.classed)(_TabsMui.Indicator)`< class="tabsIndicator`;
-const Panel = (0, _helpers.classed)(_TabsMui.Panel)`< class="tabsPanel`;
-const KoineTabs = (0, _helpers.extendComponent)(_TabsMui.KoineTabs, {
-    Root,
-    List,
-    Tab,
-    Indicator,
-    Panel
-});

package/Tabs/tw/index.stories.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    // import { classed } from "../../helpers";
-    default: function() {
-        return _default;
-    },
-    bare: function() {
-        return bare;
-    },
-    material: function() {
-        return material;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _stories = require("@koine/stories");
-const _bare = require("./bare");
-const _material = require("./material");
-const _default = {
-    title: "Base/Tabs/Tailwind",
-    ..._stories.storyTabsMeta
-};
-const bareTemplate = (args)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stories.StoryTabs, {
-        ...args,
-        Tabs: _bare.KoineTabs
-    });
-};
-const bare = bareTemplate.bind({});
-bare.args = _stories.storyTabsArgs;
-const materialTemplate = (args)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stories.StoryTabs, {
-        ...args,
-        Tabs: _material.KoineTabs
-    });
-};
-const material = materialTemplate.bind({});
-material.args = _stories.storyTabsArgs;

package/Tabs/tw/material.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    Root: function() {
-        return Root;
-    },
-    List: function() {
-        return List;
-    },
-    Tab: function() {
-        return Tab;
-    },
-    Indicator: function() {
-        return Indicator;
-    },
-    Panel: function() {
-        return Panel;
-    },
-    KoineTabs: function() {
-        return KoineTabs;
-    }
-});
-const _helpers = require("../../helpers");
-const _bare = require("./bare");
-const Root = (0, _helpers.classed)(_bare.KoineTabs.Root)`< class="`;
-const List = (0, _helpers.classed)(_bare.KoineTabs.List)`< class="border-b-gray-200 border-b border-solid`;
-const Tab = (0, _helpers.classed)(_bare.KoineTabs.Tab)`< class="flex-col relative py-3 px-4 uppercase`; // ${p => p.selected ? "text-cyan-600" : ""}
-const Indicator = (0, _helpers.classed)(_bare.KoineTabs.Indicator)`< class="absolute bottom-0 w-full h-[2px] ${(p)=>p.selected ? "bg-current" : ""}`;
-const Panel = (0, _helpers.classed)(_bare.KoineTabs.Panel)`< class="tabsPanel`;
-const KoineTabs = (0, _helpers.extendComponent)(_bare.KoineTabs, {
-    Root,
-    List,
-    Tab,
-    Indicator,
-    Panel
-});