@koine/react 1.0.8 → 1.0.9

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,8 +1,6 @@
-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";
 export const CarouselCssRow = styled(Row) `
   ${({ $gutter: cs, theme: { gutter } }) => `
@@ -29,11 +27,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 Collasable: 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 Collasable = null;

package/Collapsable/CollapsableReach.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+/// <reference types="@reach/utils/dist/declarations/src/polymorphic" />
+import { MotionProps } from "framer-motion";
+export declare 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 declare const CollapsableRoot: import("styled-components").StyledComponent<import("react").FC<import("@reach/disclosure/dist/declarations/src").DisclosureProps>, import("styled-components").DefaultTheme, {}, never>;
+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 = React.PropsWithChildren<Pick<CollapsableStyledProps, "$expanded"> & CollapsableComponents & {
+    id: CollapsableProps["id"];
+    onClick: (...args: any) => any;
+}>;
+export declare const CollapsableHead: ({ $expanded, id, onClick, HeadRoot, HeadAction, HeadIcon, children, }: CollapsableHeadProps) => JSX.Element;
+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;

package/Collapsable/CollapsableReach.js

@@ -0,0 +1,135 @@
+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, useId, 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";
+import { btnStyleReset } from "../Buttons";
+import { useWindowSize } from "../hooks/useWindowSize";
+import { InputInvisible } from "../Forms/styles";
+/**
+ * `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) => ({
+    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, { 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, { 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, { ref: ref, ...props });
+});
+export const Collapsable = ({ expanded: propExpanded, recalc, onChange, id, head, body, 
+// autoCollapse,
+components = {}, ariaExpand = "Expand", ariaCollapse = "Collapse", ...props }) => {
+    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);
+    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 (_jsxs(CollapsableRoot, { id: id, ...props, open: expanded || false, children: [head !== null && (_jsx(CollapsableHead, { id: id, "$expanded": expanded, onClick: handleClick, ...components, children: head })), _jsx(CollapsableInput, { id: `${id}-input` }), _jsx(CollasableBodyWrap, { "$expanded": expanded, style: { overflow }, children: _jsx(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,
+                    }, children: body }) })] }));
+};

package/Collapsable/index.d.ts

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

package/Collapsable/index.js

@@ -1 +1 @@
-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"
+}