@koine/react 1.0.8 → 1.0.11

package/Carousel/CarouselCss.d.ts

@@ -1,47 +1,47 @@
-/// <reference types="react" />
-import { RowProps, ColProps } from "../Grid";
-export declare const CarouselCssRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Grid").GridProps & {
-    $valign?: import("csstype").Property.AlignItems | undefined;
-    $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
-    $noWrap?: boolean | undefined;
-} & import("@koine/utils").Simplify<import("@koine/utils").Except<RowProps, "$gutter"> & Required<Pick<RowProps, "$gutter">>>, never>;
-export declare const CarouselCssCol: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Grid").GridProps & Partial<Record<import("..").Breakpoint, number>> & {
-    $width?: number | undefined;
-    $flex?: boolean | undefined;
-    $valign?: import("csstype").Property.AlignItems | undefined;
-    $auto?: boolean | undefined;
-    $offset?: string | undefined;
-} & Pick<KoineCarouselCssProps, "$snap"> & {
-    $width: KoineCarouselCssProps["width"];
-}, never>;
-export declare type KoineCarouselCssProps = ColProps & {
-    /**
-     * Override the `<Row>` gutter, if not specified `$gutter` prop is used
-     */
-    $gutterRow?: RowProps["$gutter"];
-    /**
-     * Override the `<Col>` gutter, if not specified `$gutter` prop is used
-     */
-    $gutterCol?: ColProps["$gutter"];
-    /**
-     * If items are not passed solely children are used
-     */
-    items?: JSX.Element[];
-    /**
-     * @default undefined (in percentage)
-     */
-    $proportion?: number;
-    /**
-     * @default "start"
-     */
-    $snap?: React.CSSProperties["scrollSnapAlign"];
-    /**
-     * Carousel's slide width
-     */
-    width?: number;
-};
-export declare type CarouselCssProps = KoineCarouselCssProps;
-/**
- * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
- */
-export declare const KoineCarouselCss: React.FC<CarouselCssProps>;
+/// <reference types="react" />
+import { RowProps, ColProps } from "../Grid";
+export declare const CarouselCssRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Grid").GridProps & {
+    $valign?: import("csstype").Property.AlignItems | undefined;
+    $reverse?: "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | undefined;
+    $noWrap?: boolean | undefined;
+} & import("@koine/utils").Simplify<import("@koine/utils").Except<RowProps, "$gutter"> & Required<Pick<RowProps, "$gutter">>>, never>;
+export declare const CarouselCssCol: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Grid").GridProps & Partial<Record<import("../styles").Breakpoint, number>> & {
+    $width?: number | undefined;
+    $flex?: boolean | undefined;
+    $valign?: import("csstype").Property.AlignItems | undefined;
+    $auto?: boolean | undefined;
+    $offset?: string | undefined;
+} & Pick<KoineCarouselCssProps, "$snap"> & {
+    $width: KoineCarouselCssProps["width"];
+}, never>;
+export declare type KoineCarouselCssProps = ColProps & {
+    /**
+     * Override the `<Row>` gutter, if not specified `$gutter` prop is used
+     */
+    $gutterRow?: RowProps["$gutter"];
+    /**
+     * Override the `<Col>` gutter, if not specified `$gutter` prop is used
+     */
+    $gutterCol?: ColProps["$gutter"];
+    /**
+     * If items are not passed solely children are used
+     */
+    items?: JSX.Element[];
+    /**
+     * @default undefined (in percentage)
+     */
+    $proportion?: number;
+    /**
+     * @default "start"
+     */
+    $snap?: React.CSSProperties["scrollSnapAlign"];
+    /**
+     * Carousel's slide width
+     */
+    width?: number;
+};
+export declare type CarouselCssProps = React.PropsWithChildren<KoineCarouselCssProps>;
+/**
+ * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
+ */
+export declare const KoineCarouselCss: ({ items, $gutterRow, $gutterCol, $gutter, $proportion, $snap, width, children, ...colProps }: CarouselCssProps) => JSX.Element | null;

package/Carousel/CarouselCss.js

@@ -1,9 +1,8 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children } from "react";
+import { Children /* , useId */ } from "react";
 import styled from "styled-components";
-import { uid } from "@koine/utils";
 import { Row, Col, GRID_GUTTER_DEFAULT as DF, } from "../Grid";
+import { useId } from "../hooks/useId";
 export const CarouselCssRow = styled(Row) `
   ${({ $gutter: cs, theme: { gutter } }) => `
     margin-left: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
@@ -29,11 +28,10 @@ export const CarouselCssCol = styled(Col) `
 /**
  * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
  */
-export const KoineCarouselCss = (_a) => {
-    var { items, $gutterRow, $gutterCol, $gutter = "quarter", $proportion, $snap = "center", width, children } = _a, colProps = __rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
+export const KoineCarouselCss = ({ items, $gutterRow, $gutterCol, $gutter = "quarter", $proportion, $snap = "center", width, children, ...colProps }) => {
     const slides = children ? Children.toArray(children) : items;
-    const id = uid();
+    const id = useId();
     if (!slides)
         return null;
-    return (_jsx(CarouselCssRow, Object.assign({ "$noWrap": true, "$gutter": $gutterRow || $gutter }, { children: slides.map((_slide, idx) => (_jsx(CarouselCssCol, Object.assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width }, { children: slides[idx] }), `CarouselCssCol-${id}-${idx}`))) })));
+    return (_jsx(CarouselCssRow, { "$noWrap": true, "$gutter": $gutterRow || $gutter, children: slides.map((_slide, idx) => (_jsx(CarouselCssCol, { ...colProps, "$gutter": $gutterCol || $gutter, "$width": width, children: slides[idx] }, `CarouselCssCol-${id}-${idx}`))) }));
 };

package/Carousel/index.d.ts

@@ -1 +1 @@
-export * from "./CarouselCss";
+export * from "./CarouselCss";

package/Carousel/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Carousel/index.js",
+  "types": "./index.d.ts"
+}

package/Collapsable/Collapsable.d.ts

@@ -1,60 +1 @@
-/// <reference types="react" />
-import { MotionProps } from "framer-motion";
-export declare type CollapsableStyledProps = {
-    $expanded?: boolean;
-};
-export declare const CollapsableHeadRoot: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, import("styled-components").DefaultTheme, {
-    htmlFor: `${string}-input`;
-} & Pick<CollapsableStyledProps, "$expanded">, "htmlFor">;
-export declare const CollapsableHeadSpace: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const CollapsableHeadAction: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const CollaspableHeadLine: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
-export declare const collapsableHeadLineMotion: {
-    hover: {
-        width: string;
-        transition: {
-            duration: number;
-        };
-    };
-};
-export declare const CollapsableHeadText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const CollapsableHeadIcon: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
-export declare type CollapsableHeadProps = Pick<CollapsableStyledProps, "$expanded"> & CollapsableComponents & {
-    id: CollapsableProps["id"];
-    onClick: (...args: any) => any;
-};
-export declare const CollapsableHead: React.FC<CollapsableHeadProps>;
-export declare const CollapsableInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
-    type: "checkbox";
-}, "type">;
-export declare const CollasableBodyWrap: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", import("@reach/disclosure/dist/declarations/src").DisclosurePanelProps>, import("styled-components").DefaultTheme, CollapsableStyledProps, never>;
-export declare const CollapsableBodyRoot: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
-export declare type CollapsableBodyProps = MotionProps & Pick<CollapsableStyledProps, "$expanded"> & {
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-};
-export declare const CollapsableBody: import("react").ForwardRefExoticComponent<MotionProps & Pick<CollapsableStyledProps, "$expanded"> & {
-    children?: React.ReactNode;
-    style?: import("react").CSSProperties | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export declare type CollapsableComponents = {
-    HeadRoot?: typeof CollapsableHeadRoot;
-    HeadAction?: null | typeof CollapsableHeadAction | React.FC<any>;
-    HeadIcon?: null | typeof CollapsableHeadIcon | React.FC<any>;
-};
-export declare 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 */
-    components?: CollapsableComponents;
-    /** @default "Expand" */
-    ariaExpand?: string;
-    /** @default "Collapse" */
-    ariaCollapse?: string;
-};
-export declare const Collapsable: ({ expanded: propExpanded, recalc, onChange, id, head, body, components, ariaExpand, ariaCollapse, ...props }: CollapsableProps) => JSX.Element;
+export declare const Collapsable: null;

package/Collapsable/Collapsable.js

@@ -1,132 +1 @@
-import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @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, useRef, useState } from "react";
-import styled from "styled-components";
-import { m } from "framer-motion";
-import { Disclosure, DisclosureButton, DisclosurePanel, } from "@reach/disclosure";
-import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
-// FIXME: ssr likely problem
-import { uid } from "@koine/utils";
-import { btnStyleReset } from "../Buttons";
-import { useWindowSize } from "../hooks/useWindowSize";
-import { InputInvisible } from "../Forms/styles";
-export const CollapsableHeadRoot = styled(m.label).attrs((props) => ({
-    htmlFor: `${props.id}-input`,
-})) `
-  ${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 const CollapsableHead = ({ $expanded, id, onClick, HeadRoot = CollapsableHeadRoot, HeadAction = CollapsableHeadAction, HeadIcon = CollapsableHeadIcon, children, }) => {
-    return (_jsxs(DisclosureButton, Object.assign({ onClick: onClick, 
-        // tabIndex={0}
-        // role="tab"
-        initial: "rest", whileHover: "hover", "$expanded": $expanded, as: HeadRoot, id: id }, { children: [_jsx(CollapsableHeadText, { children: children }), _jsx(CollapsableHeadSpace, { children: _jsx(CollaspableHeadLine, { variants: collapsableHeadLineMotion, animate: $expanded ? "hover" : "" }) }), HeadAction && (_jsx(HeadAction, { children: HeadIcon && (_jsx(HeadIcon, Object.assign({ animate: { rotate: $expanded ? 180 : 0 } }, { children: _jsx(IconCollapse, {}) }))) }))] })));
-};
-export const CollapsableInput = styled(InputInvisible).attrs({
-    type: "checkbox",
-}) ``;
-export const CollasableBodyWrap = styled(DisclosurePanel) `
-  /* 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 const CollapsableBody = forwardRef(function CollapsableBody(props, ref) {
-    return _jsx(CollapsableBodyRoot, Object.assign({ ref: ref }, props));
-});
-export const Collapsable = (_a) => {
-    var { expanded: propExpanded, recalc, onChange, id, head, body, 
-    // autoCollapse,
-    components = {}, ariaExpand = "Expand", ariaCollapse = "Collapse" } = _a, props = __rest(_a, ["expanded", "recalc", "onChange", "id", "head", "body", "components", "ariaExpand", "ariaCollapse"]);
-    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(null);
-    // FIXME: ssr likely problem
-    id = id || uid();
-    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 (_jsxs(Disclosure, Object.assign({ id: id }, props, { open: expanded || false }, { children: [head !== null && (_jsx(CollapsableHead, Object.assign({ id: id, "$expanded": expanded, onClick: handleClick }, components, { children: head }))), _jsx(CollapsableInput, { id: `${id}-input` }), _jsx(CollasableBodyWrap, Object.assign({ "$expanded": expanded, style: { overflow } }, { children: _jsx(CollapsableBody, Object.assign({ 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,
-                    } }, { children: body })) }))] })));
-};
+export const Collapsable = null;

package/Collapsable/CollapsableReach.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @file
+ *
+ * Maybe do a simplified version following this example:
+ * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
+ */

package/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/Collapsable/index.d.ts

@@ -1 +1 @@
-export * from "./Collapsable";
+export * from "./Collapsable";

package/Collapsable/index.js

@@ -1 +1,2 @@
 export * from "./Collapsable";
+// export * from "./CollapsableReach";

package/Collapsable/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Collapsable/index.js",
+  "types": "./index.d.ts"
+}

package/Debug/Debug.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export declare type DebugProps = {
-    data: object;
-};
-export declare const Debug: ({ data }: DebugProps) => JSX.Element;
+export declare type DebugProps = {
+    data: object;
+};
+export declare const Debug: ({ data }: DebugProps) => JSX.Element;

package/Debug/index.d.ts

@@ -1 +1 @@
-export * from "./Debug";
+export * from "./Debug";

package/Debug/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Debug/index.js",
+  "types": "./index.d.ts"
+}