@koine/react 1.0.14 → 1.0.15

package/node/Carousel/Carousel.js

@@ -0,0 +1,381 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineCarousel = void 0;
+exports.KoineCarousel = null;
+// import React, { useEffect, useState, useRef } from 'react';
+// import Slide from './slide';
+// import { getSliderListStyles } from './slider-list';
+// import { CarouselProps, KeyCodeFunction } from './types';
+// import renderControls from './controls';
+// import defaultProps from './default-carousel-props';
+// import { getIndexes, addEvent, removeEvent } from './utils';
+// import AnnounceSlide from './announce-slide';
+// export const Carousel = (props: CarouselProps): React.ReactElement => {
+//   const count = React.Children.count(props.children);
+//   const [currentSlide, setCurrentSlide] = useState<number>(
+//     props.autoplayReverse ? count - props.slidesToShow : props.slideIndex
+//   );
+//   const [animation, setAnimation] = useState<boolean>(false);
+//   const [pause, setPause] = useState<boolean>(false);
+//   const [dragging, setDragging] = useState<boolean>(false);
+//   const [move, setMove] = useState<number>(0);
+//   const [keyboardMove, setKeyboardMove] = useState<KeyCodeFunction>(null);
+//   const carouselWidth = useRef<number | null>(null);
+//   const focus = useRef<boolean>(false);
+//   const prevMove = useRef<number>(0);
+//   const carouselEl = useRef<HTMLDivElement>(null);
+//   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+//   const isMounted = useRef<boolean>(true);
+//   useEffect(
+//     () => () => {
+//       isMounted.current = false;
+//     },
+//     []
+//   );
+//   const slidesToScroll =
+//     props.animation === 'fade' ? props.slidesToShow : props.slidesToScroll;
+//   const dragThreshold = (carouselWidth.current || 0) / props.slidesToShow / 2;
+//   const carouselRef = props.innerRef || carouselEl;
+//   const moveSlide = (to?: number) => {
+//     const [slide, endSlide] = getIndexes(
+//       currentSlide,
+//       currentSlide - slidesToScroll,
+//       count
+//     );
+//     to && props.beforeSlide(slide, endSlide);
+//     !props.disableAnimation && setAnimation(true);
+//     setCurrentSlide(to ?? currentSlide);
+//     setTimeout(
+//       () => {
+//         if (!isMounted.current) return;
+//         to && props.afterSlide(currentSlide);
+//         !props.disableAnimation && setAnimation(false);
+//       },
+//       !props.disableAnimation ? props.speed || 500 : 40
+//     ); // if animation is disabled decrease the speed to 40
+//   };
+//   const nextSlide = () => {
+//     if (props.wrapAround || currentSlide <= count) {
+//       moveSlide(currentSlide + slidesToScroll);
+//     } else {
+//       moveSlide();
+//     }
+//   };
+//   const prevSlide = () => {
+//     // boundary
+//     if (props.wrapAround || currentSlide > 0) {
+//       moveSlide(currentSlide - slidesToScroll);
+//     } else {
+//       moveSlide();
+//     }
+//   };
+//   useEffect(() => {
+//     if (props.autoplay && !animation && props.wrapAround) {
+//       if (currentSlide > count) {
+//         setCurrentSlide(currentSlide - count);
+//         if (timer?.current) {
+//           clearTimeout(timer.current);
+//         }
+//       } else if (currentSlide < 0) {
+//         setCurrentSlide(count - -currentSlide);
+//         if (timer?.current) {
+//           clearTimeout(timer.current);
+//         }
+//       }
+//     }
+//   }, [animation, currentSlide]);
+//   useEffect(() => {
+//     if (props.autoplay && !pause) {
+//       timer.current = setTimeout(() => {
+//         if (props.autoplayReverse) {
+//           if (!props.wrapAround && currentSlide > 0) {
+//             prevSlide();
+//           } else if (props.wrapAround) {
+//             prevSlide();
+//           }
+//         } else if (
+//           !props.wrapAround &&
+//           currentSlide < count - props.slidesToShow
+//         ) {
+//           nextSlide();
+//         } else if (props.wrapAround) {
+//           nextSlide();
+//         }
+//       }, props.autoplayInterval);
+//     }
+//     // Clear the timeout if user hover on carousel
+//     if (props.autoplay && pause && timer?.current) {
+//       clearTimeout(timer.current);
+//     }
+//     return () => {
+//       if (timer.current) {
+//         clearTimeout(timer.current);
+//       }
+//     };
+//   }, [currentSlide, pause]);
+//   useEffect(() => {
+//     // makes the loop infinity
+//     if (props.wrapAround && !props.autoplay) {
+//       // if animation is disabled decrease the speed to 0
+//       const speed = !props.disableAnimation ? props.speed || 500 : 0;
+//       if (currentSlide <= -props.slidesToShow) {
+//         // prev
+//         setTimeout(() => {
+//           if (!isMounted.current) return;
+//           setCurrentSlide(count - -currentSlide);
+//         }, speed + 10);
+//       } else if (currentSlide >= count) {
+//         // next
+//         setTimeout(() => {
+//           if (!isMounted.current) return;
+//           setCurrentSlide(currentSlide - count);
+//         }, speed + 10);
+//       }
+//     }
+//   }, [currentSlide]);
+//   useEffect(() => {
+//     if (props.enableKeyboardControls && keyboardMove && focus.current) {
+//       switch (keyboardMove) {
+//         case 'nextSlide':
+//           nextSlide(); // set boundaries for !wrapAround
+//           break;
+//         case 'previousSlide':
+//           prevSlide(); // set boundaries for !wrapAround
+//           break;
+//         case 'firstSlide':
+//           setCurrentSlide(0);
+//           break;
+//         case 'lastSlide':
+//           setCurrentSlide(count - props.slidesToShow);
+//           break;
+//         case 'pause':
+//           if (pause && props.autoplay) {
+//             setPause(false);
+//             break;
+//           } else if (props.autoplay) {
+//             setPause(true);
+//             break;
+//           }
+//           break;
+//       }
+//       setKeyboardMove(null);
+//     }
+//   }, [keyboardMove]);
+//   const onKeyPress = (e: Event) => {
+//     if (
+//       props.enableKeyboardControls &&
+//       focus.current &&
+//       (e as KeyboardEvent).keyCode
+//     ) {
+//       const keyConfig = props.keyCodeConfig;
+//       for (const func in keyConfig) {
+//         if (
+//           keyConfig[func as keyof typeof keyConfig]?.includes(
+//             (e as KeyboardEvent).keyCode
+//           )
+//         ) {
+//           setKeyboardMove(func as KeyCodeFunction);
+//         }
+//       }
+//     }
+//   };
+//   useEffect(() => {
+//     if (carouselEl && carouselEl.current) {
+//       carouselWidth.current = carouselEl.current.offsetWidth;
+//     } else if (props.innerRef) {
+//       carouselWidth.current = props.innerRef.current.offsetWidth;
+//     }
+//     if (props.enableKeyboardControls) {
+//       addEvent(document, 'keydown', onKeyPress);
+//     }
+//     return () => {
+//       removeEvent(document, 'keydown', onKeyPress);
+//     };
+//   }, []);
+//   const handleDragEnd = () => {
+//     if (!props.dragging || !dragging) return;
+//     setDragging(false);
+//     if (Math.abs(move) <= dragThreshold) {
+//       moveSlide();
+//       setMove(0);
+//       prevMove.current = 0;
+//       return;
+//     }
+//     if (move > 0) {
+//       nextSlide();
+//     } else {
+//       prevSlide();
+//     }
+//     setMove(0);
+//     prevMove.current = 0;
+//   };
+//   const onTouchStart = () => {
+//     if (!props.swiping) {
+//       return;
+//     }
+//     setDragging(true);
+//   };
+//   const handlePointerMove = (m: number) => {
+//     if (!props.dragging || !dragging) return;
+//     const moveValue = m * 0.75; // Friction
+//     const moveState = move + (moveValue - prevMove.current);
+//     // Exit drag early if passed threshold
+//     if (Math.abs(move) > dragThreshold) {
+//       handleDragEnd();
+//       return;
+//     }
+//     if (
+//       !props.wrapAround &&
+//       props.disableEdgeSwiping &&
+//       ((currentSlide <= 0 && moveState <= 0) ||
+//         (moveState > 0 && currentSlide >= count - props.slidesToShow))
+//     ) {
+//       prevMove.current = moveValue;
+//       return;
+//     }
+//     if (prevMove.current !== 0) {
+//       setMove(moveState);
+//     }
+//     prevMove.current = moveValue;
+//   };
+//   const onTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+//     if (!props.dragging || !dragging) return;
+//     props.onDragStart(e);
+//     const moveValue = (carouselWidth?.current || 0) - e.touches[0].pageX;
+//     handlePointerMove(moveValue);
+//   };
+//   const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+//     e?.preventDefault();
+//     carouselRef?.current?.focus();
+//     if (!props.dragging) return;
+//     setDragging(true);
+//   };
+//   const onMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+//     if (!props.dragging || !dragging) return;
+//     props.onDragStart(e);
+//     const offsetX =
+//       e.clientX - (carouselRef.current?.getBoundingClientRect().left || 0);
+//     const moveValue = (carouselWidth?.current || 0) - offsetX;
+//     handlePointerMove(moveValue);
+//   };
+//   const onMouseUp = (e?: React.MouseEvent<HTMLDivElement>) => {
+//     e?.preventDefault();
+//     handleDragEnd();
+//   };
+//   const onMouseEnter = () => {
+//     if (props.pauseOnHover) {
+//       setPause(true);
+//     }
+//   };
+//   const onMouseLeave = () => {
+//     if (props.pauseOnHover) {
+//       setPause(false);
+//     }
+//   };
+//   const renderSlides = (typeOfSlide?: 'prev-cloned' | 'next-cloned') => {
+//     const slides = React.Children.map(props.children, (child, index) => {
+//       const isCurrentSlide = props.wrapAround
+//         ? currentSlide === index ||
+//           currentSlide === index + count ||
+//           currentSlide === index - count
+//         : currentSlide === index;
+//       return (
+//         <Slide
+//           key={`${typeOfSlide}-${index}`}
+//           count={count}
+//           currentSlide={currentSlide}
+//           index={index}
+//           isCurrentSlide={isCurrentSlide}
+//           typeOfSlide={typeOfSlide}
+//           wrapAround={props.wrapAround}
+//           cellSpacing={props.cellSpacing}
+//           animation={props.animation}
+//           slidesToShow={props.slidesToShow}
+//           speed={props.speed}
+//           zoomScale={props.zoomScale}
+//           cellAlign={props.cellAlign}
+//         >
+//           {child}
+//         </Slide>
+//       );
+//     });
+//     return slides;
+//   };
+//   const [slide] = getIndexes(
+//     currentSlide,
+//     currentSlide - slidesToScroll,
+//     count
+//   );
+//   return (
+//     <div
+//       className={'slider-container'}
+//       style={{
+//         position: 'relative',
+//         padding: props.withoutControls ? 0 : '0 60px 50px'
+//       }}
+//       onMouseEnter={onMouseEnter}
+//       onMouseLeave={onMouseLeave}
+//     >
+//       <AnnounceSlide
+//         ariaLive={props.autoplay && !pause ? 'off' : 'polite'}
+//         message={props.renderAnnounceSlideMessage({
+//           currentSlide: slide,
+//           count
+//         })}
+//       />
+//       <div
+//         className={['slider-frame', props.className || ''].join(' ').trim()}
+//         style={{
+//           overflow: 'hidden',
+//           width: '100%',
+//           position: 'relative',
+//           outline: 'none',
+//           ...props.style
+//         }}
+//         aria-label="carousel-slider"
+//         role="region"
+//         tabIndex={0}
+//         onFocus={() => (focus.current = true)}
+//         onBlur={() => (focus.current = false)}
+//         ref={props.innerRef || carouselEl}
+//         onMouseUp={onMouseUp}
+//         onMouseDown={onMouseDown}
+//         onMouseMove={onMouseMove}
+//         onMouseLeave={onMouseUp}
+//         onTouchStart={onTouchStart}
+//         onTouchEnd={handleDragEnd}
+//         onTouchMove={onTouchMove}
+//       >
+//         <div
+//           className="slider-list"
+//           style={getSliderListStyles(
+//             props.children,
+//             currentSlide,
+//             animation,
+//             props.slidesToShow,
+//             props.cellAlign,
+//             props.wrapAround,
+//             props.speed,
+//             move,
+//             props.animation
+//           )}
+//         >
+//           {props.wrapAround ? renderSlides('prev-cloned') : null}
+//           {renderSlides()}
+//           {props.wrapAround ? renderSlides('next-cloned') : null}
+//         </div>
+//       </div>
+//       {renderControls(
+//         props,
+//         count,
+//         currentSlide,
+//         moveSlide,
+//         nextSlide,
+//         prevSlide,
+//         slidesToScroll
+//       )}
+//     </div>
+//   );
+// };
+// Carousel.defaultProps = defaultProps;
+// export default Carousel;

package/node/Carousel/CarouselCss.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineCarouselCss = exports.CarouselCssCol = exports.CarouselCssRow = 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 Grid_1 = require("../Grid");
+var useId_1 = require("../hooks/useId");
+exports.CarouselCssRow = (0, styled_components_1.default)(Grid_1.Row)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
+    var cs = _a.$gutter, gutter = _a.theme.gutter;
+    return "\n    margin-left: -".concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : (gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2, "px;\n    margin-right: -").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : (gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2, "px;\n    padding-left: ").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs], "px;\n    padding-right: ").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs], "px;\n  ");
+});
+exports.CarouselCssCol = (0, styled_components_1.default)(Grid_1.Col)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"], ["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"])), function (p) { return p.$width && "flex-basis: ".concat(p.$width, "px; min-width: ").concat(p.$width, "px;"); }, function (p) { return p.$snap; });
+/**
+ * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
+ */
+var KoineCarouselCss = function (_a) {
+    var items = _a.items, $gutterRow = _a.$gutterRow, $gutterCol = _a.$gutterCol, _b = _a.$gutter, $gutter = _b === void 0 ? "quarter" : _b, $proportion = _a.$proportion, _c = _a.$snap, $snap = _c === void 0 ? "center" : _c, width = _a.width, children = _a.children, colProps = tslib_1.__rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
+    var slides = children ? react_1.Children.toArray(children) : items;
+    var id = (0, useId_1.useId)();
+    if (!slides)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(exports.CarouselCssRow, tslib_1.__assign({ "$noWrap": true, "$gutter": $gutterRow || $gutter }, { children: slides.map(function (_slide, idx) { return ((0, jsx_runtime_1.jsx)(exports.CarouselCssCol, tslib_1.__assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width }, { children: slides[idx] }), "CarouselCssCol-".concat(id, "-").concat(idx))); }) })));
+};
+exports.KoineCarouselCss = KoineCarouselCss;
+var templateObject_1, templateObject_2;

package/node/Carousel/index.js

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

package/node/Collapsable/Collapsable.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collapsable = void 0;
+exports.Collapsable = null;

package/node/Collapsable/CollapsableReach.js

@@ -0,0 +1,253 @@
+"use strict";
+/**
+ * @file
+ *
+ * Maybe do a simplified version following this example:
+ * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
+ */
+// import { forwardRef, useCallback, useEffect, /* useId, */ useRef, useState } from "react";
+// import styled from "styled-components";
+// import { MotionProps, m } from "framer-motion";
+// import {
+//   Disclosure,
+//   DisclosureButton,
+//   DisclosurePanel,
+// } from "@reach/disclosure";
+// import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
+// import { btnStyleReset } from "../Buttons";
+// import { useWindowSize } from "../hooks/useWindowSize";
+// import { InputInvisible } from "../Forms/styles";
+// import { useId } from "../hooks/useId";
+// export type CollapsableStyledProps = {
+//   $expanded?: boolean;
+// };
+// /**
+//  * `overflow-anchor: none;` keeps the same scrolling position
+//  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Accordion/Accordion.js#L54
+//  */
+// export const CollapsableRoot = styled(Disclosure)`
+//   overflow-anchor: none;
+// `;
+// export const CollapsableHeadRoot = styled(m.label).attrs(
+//   (props: Pick<CollapsableHeadProps, "id">) => ({
+//     htmlFor: `${props.id}-input`,
+//   })
+// )<Pick<CollapsableStyledProps, "$expanded">>`
+//   ${btnStyleReset}
+//   width: 100%;
+//   padding: 0;
+//   text-align: left;
+//   display: flex;
+//   justify-content: space-between;
+//   align-items: center;
+//   cursor: pointer;
+// `;
+// export const CollapsableHeadSpace = styled.div`
+//   flex: 1;
+//   padding-left: 20px;
+// `;
+// export const CollapsableHeadAction = styled.div`
+//   padding-left: 20px;
+// `;
+// export const CollaspableHeadLine = styled(m.div)`
+//   width: 0%;
+//   height: 1px;
+//   background: #bbb;
+// `;
+// export const collapsableHeadLineMotion = {
+//   hover: {
+//     width: "100%",
+//     transition: {
+//       duration: 0.4,
+//     },
+//   },
+// };
+// export const CollapsableHeadText = styled.div``;
+// export const CollapsableHeadIcon = styled(m.div)``;
+// export type CollapsableHeadProps = React.PropsWithChildren<
+//   Pick<CollapsableStyledProps, "$expanded"> &
+//     CollapsableComponents & {
+//       id: CollapsableProps["id"];
+//       onClick: (...args: any) => any;
+//     }
+// >;
+// export const CollapsableHead = ({
+//   $expanded,
+//   id,
+//   onClick,
+//   HeadRoot = CollapsableHeadRoot,
+//   HeadAction = CollapsableHeadAction,
+//   HeadIcon = CollapsableHeadIcon,
+//   children,
+// }: CollapsableHeadProps) => {
+//   return (
+//     <DisclosureButton
+//       onClick={onClick}
+//       // tabIndex={0}
+//       // role="tab"
+//       initial="rest"
+//       whileHover="hover"
+//       $expanded={$expanded}
+//       as={HeadRoot}
+//       id={id}
+//     >
+//       <CollapsableHeadText>{children}</CollapsableHeadText>
+//       <CollapsableHeadSpace>
+//         <CollaspableHeadLine
+//           variants={collapsableHeadLineMotion}
+//           animate={$expanded ? "hover" : ""}
+//         />
+//       </CollapsableHeadSpace>
+//       {HeadAction && (
+//         <HeadAction>
+//           {HeadIcon && (
+//             <HeadIcon animate={{ rotate: $expanded ? 180 : 0 }}>
+//               <IconCollapse />
+//             </HeadIcon>
+//           )}
+//         </HeadAction>
+//       )}
+//     </DisclosureButton>
+//   );
+// };
+// export const CollapsableInput = styled(InputInvisible).attrs({
+//   type: "checkbox",
+// })``;
+// export const CollasableBodyWrap = styled(
+//   DisclosurePanel
+// )<CollapsableStyledProps>`
+//   /* this is because @reach adds the "hidden" attribute */
+//   &[hidden] {
+//     display: block;
+//   }
+// `;
+// export const CollapsableBodyRoot = styled(m.div)`
+//   .no-js & {
+//     transition: margin-top 0.2s ease;
+//   }
+//   .no-js ${CollapsableInput}:checked + ${CollasableBodyWrap} & {
+//     margin-top: 0 !important;
+//     opacity: 1 !important;
+//   }
+// `;
+// export type CollapsableBodyProps = MotionProps &
+//   Pick<CollapsableStyledProps, "$expanded"> & {
+//     children?: React.ReactNode;
+//     style?: React.CSSProperties;
+//   };
+// export const CollapsableBody = forwardRef<HTMLDivElement, CollapsableBodyProps>(
+//   function CollapsableBody(props, ref) {
+//     return <CollapsableBodyRoot ref={ref} {...props} />;
+//   }
+// );
+// export type CollapsableComponents = {
+//   HeadRoot?: typeof CollapsableHeadRoot;
+//   HeadAction?: null | typeof CollapsableHeadAction | React.FC<any>;
+//   HeadIcon?: null | typeof CollapsableHeadIcon | React.FC<any>;
+// };
+// export type CollapsableProps = React.ComponentPropsWithoutRef<"div"> & {
+//   id?: string;
+//   expanded?: boolean;
+//   /** Used to trigger a recalculation effect */
+//   recalc?: any;
+//   onChange?: () => any;
+//   head: null | React.ReactNode;
+//   body: React.ReactNode;
+//   /** Amount of milliseconds after which the component collapses */
+//   // autoCollapse?: number;
+//   components?: CollapsableComponents;
+//   /** @default "Expand" */
+//   ariaExpand?: string;
+//   /** @default "Collapse" */
+//   ariaCollapse?: string;
+// };
+// export const Collapsable = ({
+//   expanded: propExpanded,
+//   recalc,
+//   onChange,
+//   id,
+//   head,
+//   body,
+//   // autoCollapse,
+//   components = {},
+//   ariaExpand = "Expand",
+//   ariaCollapse = "Collapse",
+//   ...props
+// }: CollapsableProps) => {
+//   const isControlled = typeof propExpanded !== "undefined";
+//   const [stateExpanded, setStateExpanded] = useState(propExpanded);
+//   const [height, setHeight] = useState(0);
+//   const hash = id ? `#${id}` : "";
+//   const winSize = useWindowSize();
+//   const expanded = isControlled ? propExpanded : stateExpanded;
+//   const [overflow, setOverflow] = useState(expanded ? "unset" : "hidden");
+//   const content = useRef<HTMLDivElement>(null);
+//   const defaultId = useId();
+//   id = id || defaultId;
+//   const handleClick = useCallback(() => {
+//     if (hash) {
+//       window.history.replaceState(
+//         null,
+//         "",
+//         expanded ? window.location.pathname + window.location.search : hash
+//       );
+//     }
+//     if (onChange) {
+//       onChange();
+//     }
+//     if (!isControlled) {
+//       setStateExpanded((prevExpanded) => !prevExpanded);
+//     }
+//   }, [expanded, hash, onChange, isControlled]);
+//   const handleAnimationStart = useCallback(() => {
+//     setOverflow("hidden");
+//   }, []);
+//   const handleAnimationComplete = useCallback(() => {
+//     setOverflow(expanded ? "unset" : "hidden");
+//   }, [expanded]);
+//   useEffect(() => {
+//     if (content.current) {
+//       setHeight(Math.ceil(content.current.offsetHeight));
+//     }
+//   }, [winSize, recalc]);
+//   // deeplink on mount
+//   useEffect(() => {
+//     if (!isControlled && hash && window.location.hash === hash) {
+//       setStateExpanded(true);
+//     }
+//   }, [hash, isControlled]);
+//   return (
+//     <CollapsableRoot id={id} {...props} open={expanded || false}>
+//       {head !== null && (
+//         <CollapsableHead
+//           id={id}
+//           $expanded={expanded}
+//           onClick={handleClick}
+//           {...components}
+//         >
+//           {head}
+//         </CollapsableHead>
+//       )}
+//       <CollapsableInput id={`${id}-input`} />
+//       <CollasableBodyWrap $expanded={expanded} style={{ overflow }}>
+//         <CollapsableBody
+//           ref={content}
+//           $expanded={expanded}
+//           // aria-expanded={expanded}
+//           // aria-label={expanded ? ariaCollapse : ariaExpand}
+//           style={{
+//             pointerEvents: expanded ? "all" : "none",
+//           }}
+//           onAnimationStart={handleAnimationStart}
+//           onAnimationComplete={handleAnimationComplete}
+//           animate={{
+//             marginTop: expanded ? 0 : height ? `-${height}px` : "-100vh",
+//             opacity: expanded ? 1 : 0.4,
+//           }}
+//         >
+//           {body}
+//         </CollapsableBody>
+//       </CollasableBodyWrap>
+//     </CollapsableRoot>
+//   );
+// };

package/node/Collapsable/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Collapsable"), exports);
+// export * from "./CollapsableReach";