@qyu/reactcmp-dropdown 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 qlwt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,138 @@
+# @qyu/reactcmp-dropdown
+
+React Component Library for solving dropdown positioning problems
+
+## First include styles
+
+```typescript
+// import styles with your bundler or copy them by hand and reference in your html
+import "@qyu/reactcmp-dropdown/style/index.global"
+// or import module and insert them directly to the component
+import stylemodule from "@qyu/reactcmp-dropdown/stlye/index.module"
+```
+
+## Use Dropdown
+
+```tsx
+import * as ddn from "qyu/reactcmp-dropdown"
+
+function App() {
+    const [open, open_set] = r.useState(false)
+
+    return <ddn.CmpContainer 
+        // optional, will be added to other styles
+        className={""}
+        // here you can insert styles in modular form
+        stylemodule={stylemodule}
+
+        // optional, will use local state if not provided
+        open={open}
+        open_set={open_set}
+
+        // on which events should close the dropdown
+        // optional, all true by default
+        closeevents={{ 
+            // focus going outside the container
+            blur: true,
+            // click anywhere outside
+            click: true,
+            // scroll of any parent
+            scroll: true,
+            // page resize
+            resize: true,
+            // press escape
+            escape: true,
+        }}
+    >
+        {/* You would often want to imlement you own button. See futher */}
+        <ddn.CmpButton className={""}>
+            Press
+        </ddn.CmpButton>
+
+        <ddn.CmpListAbs
+            className={""}
+            stylemodule={stylemodule}
+
+            // do not render children when hidden, default if false
+            lazy
+
+            // add gap between button and list, in pixels
+            gap={5}
+
+            // inverse direction default if "ver"
+            direction
+            // set direction directly
+            direction={"hor" || "ver"}
+
+            // inverse align default is "start"
+            align
+            // set align directly
+            align={"start" || "end" || "center"}
+
+            // inverse justify default is "end"
+            justify
+            // set justify directly
+            jystify={"end" || "start"}
+        >
+            Your Content Here
+        </ddn.CmpListAbs>
+
+        {/* Same as CmpListAbs, but uses fixed positioning */}
+        <ddn.CmpListFix
+            className={""}
+            stylemodule={stylemodule}
+
+            // do not render children when hidden, default if false
+            lazy
+
+            // add gap between button and list, in pixels
+            gap={5}
+
+            // inverse direction default if "ver"
+            direction
+            // set direction directly
+            direction={"hor" || "ver"}
+
+            // inverse align default is "start"
+            align
+            // set align directly
+            align={"start" || "end" || "center"}
+
+            // inverse justify default is "end"
+            justify
+            // set justify directly
+            jystify={"end" || "start"}
+        >
+            Your Content Here
+        </ddn.CmpListFix>
+    </ddn.CmpContainer>
+}
+```
+
+## Making your custom button
+
+```tsx
+export const CmpButton = () => {
+    // just listen to the context state
+    const ctxstate = r.useContext(CmpCtxState_Open)
+
+    if (!ctxstate) { throw new Error(`Using DropdownStateOpen dependend component outside of DropdownStateOpen Context`) }
+
+    return <button
+        onClick={() => {
+            ctxstate.open_set(t => !t)
+        }}
+    >
+        Press
+    </button>
+}
+```
+
+## Change Transition time and z-index
+
+```css
+:root {
+    --qyuddn-z-index: 3;
+    --qyuddn-trtime: 0.2s;
+}
+```

package/build/bundle/entry/index.js

@@ -0,0 +1,632 @@
+import * as r from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const CmpCtxState_Open = r.createContext(null);
+
+const CmpButton = props => {
+    const ctxstate = r.useContext(CmpCtxState_Open);
+    if (!ctxstate) {
+        throw new Error(`Using DropdownStateOpen dependend component outside of DropdownStateOpen Context`);
+    }
+    const event_click = r.useCallback(() => {
+        ctxstate.open_set(t => !t);
+    }, []);
+    return jsx("button", { onClick: event_click, className: props.className, children: props.children });
+};
+
+const useDropdownCloseEvents = function (params) {
+    const nconfig_blur = params.config?.blur ?? true;
+    const nconfig_click = params.config?.click ?? true;
+    const nconfig_scroll = params.config?.scroll ?? true;
+    const nconfig_resize = params.config?.resize ?? true;
+    const nconfig_escape = params.config?.escape ?? true;
+    r.useEffect(() => {
+        const container = params.ref();
+        if (params.open && container) {
+            const controller = new AbortController();
+            if (nconfig_blur) {
+                container.addEventListener("focusout", ev => {
+                    if (!(ev.relatedTarget instanceof Element) || !container.contains(ev.relatedTarget)) {
+                        params.open_set(false);
+                    }
+                }, { signal: controller.signal });
+            }
+            if (nconfig_click) {
+                document.addEventListener("click", ev => {
+                    const path = ev.composedPath();
+                    if (!container || !path.includes(container)) {
+                        params.open_set(false);
+                    }
+                }, { signal: controller.signal });
+            }
+            if (nconfig_escape) {
+                document.addEventListener("keydown", ev => {
+                    if (!ev.defaultPrevented && ev.key.toLowerCase() === "escape") {
+                        params.open_set(false);
+                        ev.preventDefault();
+                    }
+                }, { signal: controller.signal });
+            }
+            if (nconfig_resize) {
+                window.addEventListener("resize", () => {
+                    params.open_set(false);
+                }, { signal: controller.signal });
+            }
+            if (nconfig_scroll) {
+                let parent = container.parentElement;
+                while (parent) {
+                    parent.addEventListener("scroll", () => {
+                        params.open_set(false);
+                    }, { signal: controller.signal });
+                    parent = parent.parentElement;
+                }
+                document.addEventListener("scroll", () => {
+                    params.open_set(false);
+                }, { signal: controller.signal });
+            }
+            return () => {
+                controller.abort();
+            };
+        }
+    }, [
+        params.ref,
+        params.open,
+        params.open_set,
+        nconfig_click,
+        nconfig_scroll,
+        nconfig_resize,
+        nconfig_escape
+    ]);
+};
+
+const cl = function (...clnames) {
+    let result = [];
+    for (const clname of clnames) {
+        if (clname) {
+            result.push(clname);
+        }
+    }
+    return result.join(" ");
+};
+
+const stylemap_new_remap = function (def, remap) {
+    const result = {};
+    for (const clname of Object.keys(def)) {
+        const remaped = remap[clname];
+        if (remaped !== undefined) {
+            result[clname] = remaped;
+            continue;
+        }
+        {
+            result[clname] = clname;
+        }
+    }
+    return result;
+};
+
+const stylemap$2 = {
+    container: "container"
+};
+const CmpContainer = r.memo(r.forwardRef((props, ref) => {
+    const nprop_style = r.useMemo(() => (props.stylemodule ? stylemap_new_remap(stylemap$2, props.stylemodule) : stylemap$2), [props.stylemodule]);
+    const l_ref = r.useRef(null);
+    const [open, open_set] = r.useState(false);
+    const l_open = props.open ?? open;
+    const l_open_set = props.open_set ?? open_set;
+    const ctxstate = r.useMemo(() => {
+        return {
+            open: l_open,
+            ref: l_ref,
+            open_set: l_open_set,
+        };
+    }, [l_open, l_open_set]);
+    const mref = r.useMemo(() => {
+        return (element) => {
+            l_ref.current = element;
+            if (ref) {
+                if (typeof ref === "object") {
+                    ref.current = element;
+                }
+                else {
+                    ref(element);
+                }
+            }
+        };
+    }, [ref]);
+    useDropdownCloseEvents({
+        config: props.closeevents,
+        ref: r.useCallback(() => l_ref.current, []),
+        open: ctxstate.open,
+        open_set: ctxstate.open_set,
+    });
+    return jsx("div", { ref: mref, className: cl("__qyuddn", props.className, nprop_style.container), children: jsx(CmpCtxState_Open.Provider, { value: ctxstate, children: props.children }) });
+}));
+
+const nprop_align_new = function (raw) {
+    if (!raw) {
+        return "start";
+    }
+    if (raw === true) {
+        return "end";
+    }
+    return raw;
+};
+const nprop_justify_new = function (raw) {
+    if (!raw) {
+        return "end";
+    }
+    if (raw === true) {
+        return "start";
+    }
+    return raw;
+};
+const nprop_direction_new = function (raw) {
+    if (!raw) {
+        return "ver";
+    }
+    if (raw === true) {
+        return "hor";
+    }
+    return raw;
+};
+
+const stylemap$1 = {
+    listfix: "listfix",
+    listfix_open: "listfix_open",
+    listfix_justify_start: "listfix_justify_start",
+    listfix_justify_end: "listfix_justify_end",
+    listfix_align_start: "listfix_align_start",
+    listfix_align_end: "listfix_align_end",
+    listfix_align_center: "listfix_align_center",
+    listfix_vertical: "listfix_vertical",
+    listfix_horizontal: "listfix_horizontal",
+};
+const normalize_justify$1 = function (params) {
+    let axis_main;
+    switch (params.direction) {
+        case "ver": {
+            axis_main = params.axis_main;
+            break;
+        }
+        case "hor": {
+            axis_main = params.axis_cross;
+            break;
+        }
+    }
+    let flow_direct;
+    let flow_reverse;
+    let freespace_direct;
+    let freespace_reverse;
+    let position_direct;
+    let position_reverse;
+    switch (params.justify) {
+        case "start": {
+            freespace_reverse = axis_main.screen_size - params.gap - (axis_main.container_pos + axis_main.container_size);
+            freespace_direct = axis_main.container_pos - params.gap;
+            flow_direct = axis_main.flow_reverse;
+            flow_reverse = axis_main.flow_direct;
+            position_direct = axis_main.screen_size - axis_main.container_pos + params.gap;
+            position_reverse = axis_main.container_pos + axis_main.container_size + params.gap;
+            break;
+        }
+        case "end": {
+            freespace_direct = axis_main.screen_size - params.gap - (axis_main.container_pos + axis_main.container_size);
+            freespace_reverse = axis_main.container_pos - params.gap;
+            flow_direct = axis_main.flow_direct;
+            flow_reverse = axis_main.flow_reverse;
+            position_direct = axis_main.container_pos + axis_main.container_size + params.gap;
+            position_reverse = axis_main.screen_size - axis_main.container_pos + params.gap;
+            break;
+        }
+    }
+    if (freespace_direct >= axis_main.list_size) {
+        params.reverse_justify_set(false);
+        axis_main.space_set(null);
+        flow_direct.position_set(position_direct);
+        flow_reverse.position_set(null);
+    }
+    else if (freespace_reverse >= axis_main.list_size) {
+        params.reverse_justify_set(true);
+        axis_main.space_set(null);
+        flow_direct.position_set(null);
+        flow_reverse.position_set(position_reverse);
+    }
+    else if (freespace_direct >= freespace_reverse) {
+        params.reverse_justify_set(false);
+        axis_main.space_set(freespace_direct);
+        flow_direct.position_set(position_direct);
+        flow_reverse.position_set(null);
+    }
+    else {
+        params.reverse_justify_set(true);
+        axis_main.space_set(freespace_reverse);
+        flow_direct.position_set(null);
+        flow_reverse.position_set(position_reverse);
+    }
+};
+const normalize_align$1 = function (params) {
+    let axis_main;
+    switch (params.direction) {
+        case "hor": {
+            axis_main = params.axis_main;
+            break;
+        }
+        case "ver": {
+            axis_main = params.axis_cross;
+            break;
+        }
+    }
+    axis_main.space_set(null);
+    switch (params.align) {
+        case "center": {
+            const offset = (axis_main.list_size - axis_main.container_size) / 2;
+            params.reverse_align_set(false);
+            axis_main.flow_reverse.position_set(null);
+            axis_main.flow_direct.position_set(Math.max(0, axis_main.container_pos - offset));
+            break;
+        }
+        case "start": {
+            const freespace_direct = axis_main.screen_size - axis_main.container_pos;
+            const freespace_reverse = axis_main.container_pos + axis_main.container_size;
+            const flow_direct = axis_main.flow_direct;
+            const flow_reverse = axis_main.flow_reverse;
+            const position_direct = Math.max(0, (+axis_main.container_pos
+                - Math.max(0, axis_main.list_size - freespace_direct)));
+            const position_reverse = Math.max(0, (+axis_main.screen_size
+                - (axis_main.container_pos + axis_main.container_size)
+                - Math.max(0, axis_main.list_size - freespace_reverse)));
+            if (freespace_direct >= axis_main.list_size || freespace_direct >= freespace_reverse) {
+                params.reverse_align_set(false);
+                flow_reverse.position_set(null);
+                flow_direct.position_set(position_direct);
+            }
+            else {
+                params.reverse_align_set(true);
+                flow_direct.position_set(null);
+                flow_reverse.position_set(position_reverse);
+            }
+            break;
+        }
+        case "end": {
+            const freespace_direct = axis_main.container_pos + axis_main.container_size;
+            const freespace_reverse = axis_main.screen_size - axis_main.container_pos;
+            const flow_direct = axis_main.flow_reverse;
+            const flow_reverse = axis_main.flow_direct;
+            const position_direct = Math.max(0, (+axis_main.screen_size
+                - (axis_main.container_pos + axis_main.container_size)
+                - Math.max(0, axis_main.list_size - freespace_direct)));
+            const position_reverse = Math.max(0, (+axis_main.container_pos
+                - Math.max(0, axis_main.list_size - freespace_reverse)));
+            if (freespace_direct >= axis_main.list_size || freespace_direct >= freespace_reverse) {
+                params.reverse_align_set(false);
+                flow_reverse.position_set(null);
+                flow_direct.position_set(position_direct);
+            }
+            else {
+                params.reverse_align_set(true);
+                flow_direct.position_set(null);
+                flow_reverse.position_set(position_reverse);
+            }
+            break;
+        }
+    }
+};
+const CmpListFix = r.memo(r.forwardRef((props, ref) => {
+    const nprop_gap = props.gap ?? 0;
+    const nprop_lazy = props.lazy ?? false;
+    const nprop_align = nprop_align_new(props.align);
+    const nprop_justify = nprop_justify_new(props.justify);
+    const nprop_direction = nprop_direction_new(props.direction);
+    const nprop_style = r.useMemo(() => (props.stylemodule ? stylemap_new_remap(stylemap$1, props.stylemodule) : stylemap$1), [props.stylemodule]);
+    const ctxstate = r.useContext(CmpCtxState_Open);
+    if (!ctxstate) {
+        throw new Error(`Using DDN dependend component outside of DDN Context`);
+    }
+    const l_ref = r.useRef(null);
+    const [visible, visible_set] = r.useState(false);
+    const [revalign, revalign_set] = r.useState(false);
+    const [revjustify, revjustify_set] = r.useState(false);
+    const [maxheight, maxheight_set] = r.useState(null);
+    const [maxwidth, maxwidth_set] = r.useState(null);
+    const [top, top_set] = r.useState(null);
+    const [left, left_set] = r.useState(null);
+    const [right, right_set] = r.useState(null);
+    const [bottom, bottom_set] = r.useState(null);
+    r.useLayoutEffect(() => {
+        const list = l_ref.current;
+        const container = ctxstate.ref.current;
+        if (list && container && ctxstate.open) {
+            const container_rect = container.getBoundingClientRect();
+            const axis_main = {
+                list_size: list.offsetHeight,
+                space_set: maxheight_set,
+                screen_size: document.documentElement.clientHeight,
+                container_pos: container_rect.y,
+                container_size: container_rect.height,
+                flow_direct: {
+                    position_set: top_set
+                },
+                flow_reverse: {
+                    position_set: bottom_set
+                },
+            };
+            const axis_cross = {
+                list_size: list.offsetWidth,
+                space_set: maxwidth_set,
+                screen_size: document.documentElement.clientWidth,
+                container_pos: container_rect.x,
+                container_size: container_rect.width,
+                flow_direct: {
+                    position_set: left_set
+                },
+                flow_reverse: {
+                    position_set: right_set
+                },
+            };
+            normalize_justify$1({
+                axis_main,
+                axis_cross,
+                gap: nprop_gap,
+                justify: nprop_justify,
+                direction: nprop_direction,
+                reverse_align_set: revalign_set,
+                reverse_justify_set: revjustify_set,
+            });
+            normalize_align$1({
+                axis_main,
+                axis_cross,
+                align: nprop_align,
+                direction: nprop_direction,
+                reverse_align_set: revalign_set,
+                reverse_justify_set: revjustify_set,
+            });
+        }
+    }, [ctxstate.open, ctxstate.ref, nprop_gap, nprop_align, nprop_justify, nprop_direction]);
+    const mref = r.useMemo(() => {
+        return (element) => {
+            l_ref.current = element;
+            if (ref) {
+                if (typeof ref === "object") {
+                    ref.current = element;
+                }
+                else {
+                    ref(element);
+                }
+            }
+        };
+    }, [ref]);
+    const children = r.useMemo(() => {
+        if (!nprop_lazy || visible || ctxstate.open) {
+            if (typeof props.children === "function") {
+                return props.children();
+            }
+            return props.children;
+        }
+        return null;
+    }, [nprop_lazy, visible, ctxstate.open, props.children]);
+    return jsx("div", { ref: mref, className: cl("__qyuddn", props.className, nprop_style.listfix, ctxstate.open && nprop_style.listfix_open, ((nprop_align === "end" && !revalign) || (nprop_align === "start" && revalign)) && nprop_style.listfix_align_end, ((nprop_align === "start" && !revalign) || (nprop_align === "end" && revalign)) && nprop_style.listfix_align_start, nprop_align === "center" && nprop_style.listfix_align_center, ((nprop_justify === "end") !== revjustify) && nprop_style.listfix_justify_end, ((nprop_justify === "start") !== revjustify) && nprop_style.listfix_justify_start, nprop_direction === "hor" && nprop_style.listfix_horizontal, nprop_direction === "ver" && nprop_style.listfix_vertical), style: {
+            ["--gap"]: `${nprop_gap}px`,
+            top: top !== null ? `${top}px` : null,
+            left: left !== null ? `${left}px` : null,
+            right: right !== null ? `${right}px` : null,
+            bottom: bottom !== null ? `${bottom}px` : null,
+            maxWidth: maxwidth === null ? undefined : `${maxwidth}px`,
+            maxHeight: maxheight === null ? undefined : `${maxheight}px`,
+        }, onTransitionStart: ev => {
+            if (ev.propertyName === "opacity" && ctxstate.open) {
+                visible_set(true);
+            }
+        }, onTransitionEnd: ev => {
+            if (ev.propertyName === "opacity" && !ctxstate.open) {
+                revalign_set(false);
+                revjustify_set(false);
+                maxwidth_set(null);
+                maxheight_set(null);
+                visible_set(false);
+                top_set(null);
+                bottom_set(null);
+                left_set(null);
+                right_set(null);
+            }
+        }, children: children });
+}));
+
+const stylemap = {
+    listabs: "listabs",
+    listabs_open: "listabs_open",
+    listabs_justify_start: "listabs_justify_start",
+    listabs_justify_end: "listabs_justify_end",
+    listabs_align_start: "listabs_align_start",
+    listabs_align_end: "listabs_align_end",
+    listabs_align_center: "listabs_align_center",
+    listabs_vertical: "listabs_vertical",
+    listabs_horizontal: "listabs_horizontal",
+};
+const normalize_justify = function (params) {
+    let axis_main;
+    switch (params.direction) {
+        case "ver": {
+            axis_main = params.axis_main;
+            break;
+        }
+        case "hor": {
+            axis_main = params.axis_cross;
+            break;
+        }
+    }
+    let freespace_direct;
+    let freespace_reverse;
+    switch (params.justify) {
+        case "start": {
+            freespace_direct = axis_main.container_pos - params.gap;
+            freespace_reverse = axis_main.screen_size - params.gap - (axis_main.container_pos + axis_main.container_size);
+            break;
+        }
+        case "end": {
+            freespace_direct = axis_main.screen_size - params.gap - (axis_main.container_pos + axis_main.container_size);
+            freespace_reverse = axis_main.container_pos - params.gap;
+            break;
+        }
+    }
+    if (freespace_direct >= axis_main.list_size) {
+        params.reverse_justify_set(false);
+        axis_main.space_set(null);
+    }
+    else if (freespace_reverse >= axis_main.list_size) {
+        params.reverse_justify_set(true);
+        axis_main.space_set(null);
+    }
+    else if (freespace_direct >= freespace_reverse) {
+        params.reverse_justify_set(false);
+        axis_main.space_set(freespace_direct);
+    }
+    else {
+        params.reverse_justify_set(true);
+        axis_main.space_set(freespace_reverse);
+    }
+};
+const normalize_align = function (params) {
+    let axis_main;
+    switch (params.direction) {
+        case "hor": {
+            axis_main = params.axis_main;
+            break;
+        }
+        case "ver": {
+            axis_main = params.axis_cross;
+            break;
+        }
+    }
+    let freespace_direct;
+    let freespace_reverse;
+    switch (params.align) {
+        case "center": {
+            params.reverse_align_set(false);
+            axis_main.space_set(null);
+            return;
+        }
+        case "start": {
+            freespace_direct = axis_main.screen_size - axis_main.container_pos;
+            freespace_reverse = axis_main.container_pos + axis_main.container_size;
+            break;
+        }
+        case "end": {
+            freespace_direct = axis_main.container_pos + axis_main.container_size;
+            freespace_reverse = axis_main.screen_size - axis_main.container_pos;
+            break;
+        }
+    }
+    if (freespace_direct >= axis_main.list_size) {
+        params.reverse_align_set(false);
+        axis_main.space_set(null);
+    }
+    else if (freespace_reverse >= axis_main.list_size) {
+        params.reverse_align_set(true);
+        axis_main.space_set(null);
+    }
+    else if (freespace_direct >= freespace_reverse) {
+        params.reverse_align_set(false);
+        axis_main.space_set(freespace_direct);
+    }
+    else {
+        params.reverse_align_set(true);
+        axis_main.space_set(freespace_reverse);
+    }
+};
+const CmpListAbs = r.memo(r.forwardRef((props, ref) => {
+    const nprop_gap = props.gap ?? 0;
+    const nprop_lazy = props.lazy ?? false;
+    const nprop_align = nprop_align_new(props.align);
+    const nprop_justify = nprop_justify_new(props.justify);
+    const nprop_direction = nprop_direction_new(props.direction);
+    const nprop_style = r.useMemo(() => (props.stylemodule ? stylemap_new_remap(stylemap, props.stylemodule) : stylemap), [props.stylemodule]);
+    const ctxstate = r.useContext(CmpCtxState_Open);
+    if (!ctxstate) {
+        throw new Error(`Using DDN dependend component outside of DDN Context`);
+    }
+    const l_ref = r.useRef(null);
+    const [visible, visible_set] = r.useState(false);
+    const [revalign, revalign_set] = r.useState(false);
+    const [revjustify, revjustify_set] = r.useState(false);
+    const [maxheight, maxheight_set] = r.useState(null);
+    const [maxwidth, maxwidth_set] = r.useState(null);
+    r.useLayoutEffect(() => {
+        const list = l_ref.current;
+        const container = ctxstate.ref.current;
+        if (list && container && ctxstate.open) {
+            const container_rect = container.getBoundingClientRect();
+            const axis_main = {
+                list_size: list.offsetHeight,
+                space_set: maxheight_set,
+                screen_size: document.documentElement.clientHeight,
+                container_pos: container_rect.y,
+                container_size: container_rect.height,
+            };
+            const axis_cross = {
+                list_size: list.offsetWidth,
+                space_set: maxwidth_set,
+                screen_size: document.documentElement.clientWidth,
+                container_pos: container_rect.x,
+                container_size: container_rect.width,
+            };
+            normalize_justify({
+                axis_main,
+                axis_cross,
+                gap: nprop_gap,
+                justify: nprop_justify,
+                direction: nprop_direction,
+                reverse_align_set: revalign_set,
+                reverse_justify_set: revjustify_set,
+            });
+            normalize_align({
+                axis_main,
+                axis_cross,
+                align: nprop_align,
+                direction: nprop_direction,
+                reverse_align_set: revalign_set,
+                reverse_justify_set: revjustify_set,
+            });
+        }
+    }, [ctxstate.open, ctxstate.ref, nprop_gap, nprop_align, nprop_justify, nprop_direction]);
+    const mref = r.useMemo(() => {
+        return (element) => {
+            l_ref.current = element;
+            if (ref) {
+                if (typeof ref === "object") {
+                    ref.current = element;
+                }
+                else {
+                    ref(element);
+                }
+            }
+        };
+    }, [ref]);
+    const children = r.useMemo(() => {
+        if (!nprop_lazy || visible || ctxstate.open) {
+            if (typeof props.children === "function") {
+                return props.children();
+            }
+            return props.children;
+        }
+        return null;
+    }, [nprop_lazy, visible, ctxstate.open, props.children]);
+    return jsx("div", { ref: mref, className: cl("__qyuddn", props.className, nprop_style.listabs, ctxstate.open && nprop_style.listabs_open, ((nprop_align === "end" && !revalign) || (nprop_align === "start" && revalign)) && nprop_style.listabs_align_end, ((nprop_align === "start" && !revalign) || (nprop_align === "end" && revalign)) && nprop_style.listabs_align_start, nprop_align === "center" && nprop_style.listabs_align_center, ((nprop_justify === "end") !== revjustify) && nprop_style.listabs_justify_end, ((nprop_justify === "start") !== revjustify) && nprop_style.listabs_justify_start, nprop_direction === "hor" && nprop_style.listabs_horizontal, nprop_direction === "ver" && nprop_style.listabs_vertical), style: {
+            ["--gap"]: `${nprop_gap}px`,
+            maxWidth: maxwidth === null ? undefined : `${maxwidth}px`,
+            maxHeight: maxheight === null ? undefined : `${maxheight}px`,
+        }, onTransitionStart: ev => {
+            if (ev.propertyName === "opacity" && ctxstate.open) {
+                visible_set(true);
+            }
+        }, onTransitionEnd: ev => {
+            if (ev.propertyName === "opacity" && !ctxstate.open) {
+                revalign_set(false);
+                revjustify_set(false);
+                maxwidth_set(null);
+                maxheight_set(null);
+                visible_set(false);
+            }
+        }, children: children });
+}));
+
+export { CmpButton, CmpContainer, CmpCtxState_Open, CmpListAbs, CmpListFix, useDropdownCloseEvents };

package/build/declaration/component/button/element/view.d.ts

@@ -0,0 +1,7 @@
+import * as r from "react";
+export type Cmp_Button_Props = Readonly<{
+    className?: string;
+    children?: r.ReactNode;
+}>;
+export declare const CmpButton: r.FC<Cmp_Button_Props>;
+export default CmpButton;

package/build/declaration/component/container/element/view.d.ts

@@ -0,0 +1,26 @@
+import { type UseDropdownCloseEvents_Config } from "../hook/useDropdownCloseEvents.js";
+import type { FnSetterStateful } from "../../../type/setter.js";
+import * as r from "react";
+declare const stylemap: {
+    readonly container: "container";
+};
+export type CmpContainer_StyleModule = {
+    [K in keyof typeof stylemap]?: string | null;
+};
+export type CmpContainer_Props = Readonly<{
+    open?: boolean;
+    open_set?: FnSetterStateful<boolean>;
+    className?: string;
+    children?: r.ReactNode;
+    stylemodule?: CmpContainer_StyleModule;
+    closeevents?: UseDropdownCloseEvents_Config;
+}>;
+export declare const CmpContainer: r.NamedExoticComponent<Readonly<{
+    open?: boolean;
+    open_set?: FnSetterStateful<boolean>;
+    className?: string;
+    children?: r.ReactNode;
+    stylemodule?: CmpContainer_StyleModule;
+    closeevents?: UseDropdownCloseEvents_Config;
+}> & r.RefAttributes<HTMLDivElement>>;
+export {};

package/build/declaration/component/container/hook/useDropdownCloseEvents.d.ts

@@ -0,0 +1,15 @@
+import type { FnSetterStateful } from "../../../type/setter.js";
+export type UseDropdownCloseEvents_Config = Readonly<{
+    blur?: boolean;
+    click?: boolean;
+    scroll?: boolean;
+    resize?: boolean;
+    escape?: boolean;
+}>;
+export type UseDropdownCloseEvents_Params = Readonly<{
+    ref: () => HTMLElement | null;
+    open: boolean;
+    open_set: FnSetterStateful<boolean>;
+    config?: UseDropdownCloseEvents_Config;
+}>;
+export declare const useDropdownCloseEvents: (params: UseDropdownCloseEvents_Params) => void;

package/build/declaration/component/ctx-state/element/open.d.ts

@@ -0,0 +1,6 @@
+import * as r from "react";
+export declare const CmpCtxState_Open: r.Context<Readonly<{
+    ref: r.RefObject<HTMLDivElement | null>;
+    open: boolean;
+    open_set: import("../../../index.js").FnSetterStateful<boolean>;
+}> | null>;

package/build/declaration/component/ctx-state/type/state.d.ts

@@ -0,0 +1,7 @@
+import type { FnSetterStateful } from "../../../type/setter.js";
+import * as r from "react";
+export type CmpCtxState_StateOpen = Readonly<{
+    ref: r.RefObject<HTMLDivElement | null>;
+    open: boolean;
+    open_set: FnSetterStateful<boolean>;
+}>;

package/build/declaration/component/list-abs/element/view.d.ts

@@ -0,0 +1,37 @@
+import type { AlignRaw, DirectionRaw, JustifyRaw } from "../../../type/params.js";
+import * as r from "react";
+declare const stylemap: {
+    readonly listabs: "listabs";
+    readonly listabs_open: "listabs_open";
+    readonly listabs_justify_start: "listabs_justify_start";
+    readonly listabs_justify_end: "listabs_justify_end";
+    readonly listabs_align_start: "listabs_align_start";
+    readonly listabs_align_end: "listabs_align_end";
+    readonly listabs_align_center: "listabs_align_center";
+    readonly listabs_vertical: "listabs_vertical";
+    readonly listabs_horizontal: "listabs_horizontal";
+};
+export type CmpListAbs_StyleModule = {
+    [K in keyof typeof stylemap]?: string | null;
+};
+export type CmpListAbs_Props = Readonly<{
+    gap?: number;
+    lazy?: boolean;
+    align?: AlignRaw;
+    justify?: JustifyRaw;
+    direction?: DirectionRaw;
+    className?: string;
+    stylemodule?: CmpListAbs_StyleModule;
+    children?: r.ReactNode | (() => r.ReactNode);
+}>;
+export declare const CmpListAbs: r.NamedExoticComponent<Readonly<{
+    gap?: number;
+    lazy?: boolean;
+    align?: AlignRaw;
+    justify?: JustifyRaw;
+    direction?: DirectionRaw;
+    className?: string;
+    stylemodule?: CmpListAbs_StyleModule;
+    children?: r.ReactNode | (() => r.ReactNode);
+}> & r.RefAttributes<HTMLDivElement>>;
+export default CmpListAbs;

package/build/declaration/component/list-fix/element/view.d.ts

@@ -0,0 +1,37 @@
+import type { AlignRaw, DirectionRaw, JustifyRaw } from "../../../type/params.js";
+import * as r from "react";
+declare const stylemap: {
+    readonly listfix: "listfix";
+    readonly listfix_open: "listfix_open";
+    readonly listfix_justify_start: "listfix_justify_start";
+    readonly listfix_justify_end: "listfix_justify_end";
+    readonly listfix_align_start: "listfix_align_start";
+    readonly listfix_align_end: "listfix_align_end";
+    readonly listfix_align_center: "listfix_align_center";
+    readonly listfix_vertical: "listfix_vertical";
+    readonly listfix_horizontal: "listfix_horizontal";
+};
+export type CmpListFix_StyleModule = {
+    [K in keyof typeof stylemap]?: string | null;
+};
+export type CmpListFix_Props = Readonly<{
+    gap?: number;
+    lazy?: boolean;
+    align?: AlignRaw;
+    justify?: JustifyRaw;
+    direction?: DirectionRaw;
+    className?: string;
+    stylemodule?: CmpListFix_StyleModule;
+    children?: r.ReactNode | (() => r.ReactNode);
+}>;
+export declare const CmpListFix: r.NamedExoticComponent<Readonly<{
+    gap?: number;
+    lazy?: boolean;
+    align?: AlignRaw;
+    justify?: JustifyRaw;
+    direction?: DirectionRaw;
+    className?: string;
+    stylemodule?: CmpListFix_StyleModule;
+    children?: r.ReactNode | (() => r.ReactNode);
+}> & r.RefAttributes<HTMLDivElement>>;
+export default CmpListFix;

package/build/declaration/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./type/setter.js";
+export * from "./type/params.js";
+export * from "./component/ctx-state/type/state.js";
+export * from "./component/ctx-state/element/open.js";
+export * from "./component/button/element/view.js";
+export * from "./component/container/element/view.js";
+export * from "./component/container/hook/useDropdownCloseEvents.js";
+export * from "./component/list-fix/element/view.js";
+export * from "./component/list-abs/element/view.js";

package/build/declaration/type/params.d.ts

@@ -0,0 +1,6 @@
+export type Direction = ("hor" | "ver");
+export type Justify = ("start" | "end");
+export type Align = ("start" | "center" | "end");
+export type DirectionRaw = (Direction | null | boolean | undefined);
+export type JustifyRaw = (Justify | null | boolean | undefined);
+export type AlignRaw = (Align | null | boolean | undefined);

package/build/declaration/type/setter.d.ts

@@ -0,0 +1,6 @@
+export type FnSetterStateles<T> = {
+    (setter_value: T): void;
+};
+export type FnSetterStateful<T> = {
+    (setter_value: T | ((old_setter_value: T) => T)): void;
+};

package/build/declaration/util/cl.d.ts

@@ -0,0 +1 @@
+export declare const cl: (...clnames: (string | false | undefined | null)[]) => string;

package/build/declaration/util/nprop/index.d.ts

@@ -0,0 +1,4 @@
+import type { Align, AlignRaw, Direction, DirectionRaw, Justify, JustifyRaw } from "../../type/params.js";
+export declare const nprop_align_new: (raw: AlignRaw) => Align;
+export declare const nprop_justify_new: (raw: JustifyRaw) => Justify;
+export declare const nprop_direction_new: (raw: DirectionRaw) => Direction;

package/build/declaration/util/stylemap/new/remap.d.ts

@@ -0,0 +1,2 @@
+import type { StyleMap } from "../type/StyleMap.js";
+export declare const stylemap_new_remap: <Def extends Readonly<Record<string, string>>>(def: Def, remap: Readonly<Record<string, string | null>>) => StyleMap<keyof Def>;

package/build/declaration/util/stylemap/type/StyleMap.d.ts

@@ -0,0 +1,3 @@
+export type StyleMap<ClName extends keyof any> = {
+    [K in ClName]: string | null;
+};

package/build/style/index.global.css

@@ -0,0 +1,130 @@
+.__qyuddn.container {
+  position: relative;
+}
+
+.__qyuddn.listabs {
+  --scale: 1;
+  position: absolute;
+  z-index: var(--qyuddn-z-index, 3);
+  transition: transform var(--qyuddn-trtime, 0.2s), opacity var(--qyuddn-trtime, 0.2s);
+}
+.__qyuddn.listabs:not(.listabs_open) {
+  --scale: 0;
+  opacity: 0;
+  user-select: none;
+  pointer-events: none;
+}
+
+.__qyuddn.listabs_justify_start.listabs_horizontal {
+  right: 100%;
+  transform-origin: center right;
+}
+.__qyuddn.listabs_justify_start.listabs_horizontal:not(.listabs_align_center) {
+  transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px)));
+}
+.__qyuddn.listabs_justify_start.listabs_horizontal.listabs_align_center {
+  transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px))) translateY(-50%);
+}
+.__qyuddn.listabs_justify_start.listabs_vertical {
+  bottom: 100%;
+  transform-origin: bottom center;
+}
+.__qyuddn.listabs_justify_start.listabs_vertical:not(.listabs_align_center) {
+  transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px)));
+}
+.__qyuddn.listabs_justify_start.listabs_vertical.listabs_align_center {
+  transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px))) translateX(-50%);
+}
+
+.__qyuddn.listabs_justify_end.listabs_horizontal {
+  left: 100%;
+  transform-origin: center left;
+}
+.__qyuddn.listabs_justify_end.listabs_horizontal:not(.listabs_align_center) {
+  transform: scaleX(--scale), translateX(var(--gap, 0px));
+}
+.__qyuddn.listabs_justify_end.listabs_horizontal.listabs_align_center {
+  transform: scaleX(--scale), translateX(var(--gap, 0px)) translateY(-50%);
+}
+.__qyuddn.listabs_justify_end.listabs_vertical {
+  top: 100%;
+  transform-origin: top center;
+}
+.__qyuddn.listabs_justify_end.listabs_vertical:not(.listabs_align_center) {
+  transform: scaleY(--scale), translateY(var(--gap, 0px));
+}
+.__qyuddn.listabs_justify_end.listabs_vertical.listabs_align_center {
+  transform: scaleY(--scale), translateY(var(--gap, 0px)) translateX(-50%);
+}
+
+.__qyuddn.listabs_align_start.listabs_horizontal {
+  top: 0;
+}
+.__qyuddn.listabs_align_start.listabs_vertical {
+  left: 0;
+}
+
+.__qyuddn.listabs_align_center.listabs_horizontal {
+  top: 50%;
+}
+.__qyuddn.listabs_align_center.listabs_vertical {
+  left: 50%;
+}
+
+.__qyuddn.listabs_align_end.listabs_horizontal {
+  right: 0;
+}
+.__qyuddn.listabs_align_end.listabs_vertical {
+  top: 0;
+}
+
+.__qyuddn.listfix {
+  --scale: 1;
+  position: fixed;
+  z-index: var(--qyuddn-z-index, 3);
+  transition: transform var(--qyuddn-trtime, 0.2s), opacity var(--qyuddn-trtime, 0.2s);
+}
+.__qyuddn.listfix:not(.listfix_open) {
+  --scale: 0;
+  opacity: 0;
+  user-select: none;
+  pointer-events: none;
+}
+
+.__qyuddn.listfix_justify_start.listfix_horizontal {
+  transform-origin: center right;
+}
+.__qyuddn.listfix_justify_start.listfix_horizontal:not(.listfix_align_center) {
+  transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px)));
+}
+.__qyuddn.listfix_justify_start.listfix_horizontal.listfix_align_center {
+  transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px))) translateY(-50%);
+}
+.__qyuddn.listfix_justify_start.listfix_vertical {
+  transform-origin: bottom center;
+}
+.__qyuddn.listfix_justify_start.listfix_vertical:not(.listfix_align_center) {
+  transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px)));
+}
+.__qyuddn.listfix_justify_start.listfix_vertical.listfix_align_center {
+  transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px))) translateX(-50%);
+}
+
+.__qyuddn.listfix_justify_end.listfix_horizontal {
+  transform-origin: center left;
+}
+.__qyuddn.listfix_justify_end.listfix_horizontal:not(.listfix_align_center) {
+  transform: scaleX(--scale), translateX(var(--gap, 0px));
+}
+.__qyuddn.listfix_justify_end.listfix_horizontal.listfix_align_center {
+  transform: scaleX(--scale), translateX(var(--gap, 0px)) translateY(-50%);
+}
+.__qyuddn.listfix_justify_end.listfix_vertical {
+  transform-origin: top center;
+}
+.__qyuddn.listfix_justify_end.listfix_vertical:not(.listfix_align_center) {
+  transform: scaleY(--scale), translateY(var(--gap, 0px));
+}
+.__qyuddn.listfix_justify_end.listfix_vertical.listfix_align_center {
+  transform: scaleY(--scale), translateY(var(--gap, 0px)) translateX(-50%);
+}

package/build/style/index.global.css.d.ts

@@ -0,0 +1,22 @@
+declare const styles: {
+  readonly "__qyuddn": string;
+  readonly "container": string;
+  readonly "listabs": string;
+  readonly "listabs_align_center": string;
+  readonly "listabs_align_end": string;
+  readonly "listabs_align_start": string;
+  readonly "listabs_horizontal": string;
+  readonly "listabs_justify_end": string;
+  readonly "listabs_justify_start": string;
+  readonly "listabs_open": string;
+  readonly "listabs_vertical": string;
+  readonly "listfix": string;
+  readonly "listfix_align_center": string;
+  readonly "listfix_horizontal": string;
+  readonly "listfix_justify_end": string;
+  readonly "listfix_justify_start": string;
+  readonly "listfix_open": string;
+  readonly "listfix_vertical": string;
+};
+export = styles;
+

package/build/style/index.module.css

@@ -0,0 +1,130 @@
+.container {
+  position: relative;
+}
+
+.listabs {
+  --scale: 1;
+  position: absolute;
+  z-index: var(--qyuddn-z-index, 3);
+  transition: transform var(--qyuddn-trtime, 0.2s), opacity var(--qyuddn-trtime, 0.2s);
+}
+.listabs:not(.listabs_open) {
+  --scale: 0;
+  opacity: 0;
+  user-select: none;
+  pointer-events: none;
+}
+
+.listabs_justify_start.listabs_horizontal {
+  right: 100%;
+  transform-origin: center right;
+}
+.listabs_justify_start.listabs_horizontal:not(.listabs_align_center) {
+  transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px)));
+}
+.listabs_justify_start.listabs_horizontal.listabs_align_center {
+  transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px))) translateY(-50%);
+}
+.listabs_justify_start.listabs_vertical {
+  bottom: 100%;
+  transform-origin: bottom center;
+}
+.listabs_justify_start.listabs_vertical:not(.listabs_align_center) {
+  transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px)));
+}
+.listabs_justify_start.listabs_vertical.listabs_align_center {
+  transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px))) translateX(-50%);
+}
+
+.listabs_justify_end.listabs_horizontal {
+  left: 100%;
+  transform-origin: center left;
+}
+.listabs_justify_end.listabs_horizontal:not(.listabs_align_center) {
+  transform: scaleX(--scale), translateX(var(--gap, 0px));
+}
+.listabs_justify_end.listabs_horizontal.listabs_align_center {
+  transform: scaleX(--scale), translateX(var(--gap, 0px)) translateY(-50%);
+}
+.listabs_justify_end.listabs_vertical {
+  top: 100%;
+  transform-origin: top center;
+}
+.listabs_justify_end.listabs_vertical:not(.listabs_align_center) {
+  transform: scaleY(--scale), translateY(var(--gap, 0px));
+}
+.listabs_justify_end.listabs_vertical.listabs_align_center {
+  transform: scaleY(--scale), translateY(var(--gap, 0px)) translateX(-50%);
+}
+
+.listabs_align_start.listabs_horizontal {
+  top: 0;
+}
+.listabs_align_start.listabs_vertical {
+  left: 0;
+}
+
+.listabs_align_center.listabs_horizontal {
+  top: 50%;
+}
+.listabs_align_center.listabs_vertical {
+  left: 50%;
+}
+
+.listabs_align_end.listabs_horizontal {
+  right: 0;
+}
+.listabs_align_end.listabs_vertical {
+  top: 0;
+}
+
+.listfix {
+  --scale: 1;
+  position: fixed;
+  z-index: var(--qyuddn-z-index, 3);
+  transition: transform var(--qyuddn-trtime, 0.2s), opacity var(--qyuddn-trtime, 0.2s);
+}
+.listfix:not(.listfix_open) {
+  --scale: 0;
+  opacity: 0;
+  user-select: none;
+  pointer-events: none;
+}
+
+.listfix_justify_start.listfix_horizontal {
+  transform-origin: center right;
+}
+.listfix_justify_start.listfix_horizontal:not(.listfix_align_center) {
+  transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px)));
+}
+.listfix_justify_start.listfix_horizontal.listfix_align_center {
+  transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px))) translateY(-50%);
+}
+.listfix_justify_start.listfix_vertical {
+  transform-origin: bottom center;
+}
+.listfix_justify_start.listfix_vertical:not(.listfix_align_center) {
+  transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px)));
+}
+.listfix_justify_start.listfix_vertical.listfix_align_center {
+  transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px))) translateX(-50%);
+}
+
+.listfix_justify_end.listfix_horizontal {
+  transform-origin: center left;
+}
+.listfix_justify_end.listfix_horizontal:not(.listfix_align_center) {
+  transform: scaleX(--scale), translateX(var(--gap, 0px));
+}
+.listfix_justify_end.listfix_horizontal.listfix_align_center {
+  transform: scaleX(--scale), translateX(var(--gap, 0px)) translateY(-50%);
+}
+.listfix_justify_end.listfix_vertical {
+  transform-origin: top center;
+}
+.listfix_justify_end.listfix_vertical:not(.listfix_align_center) {
+  transform: scaleY(--scale), translateY(var(--gap, 0px));
+}
+.listfix_justify_end.listfix_vertical.listfix_align_center {
+  transform: scaleY(--scale), translateY(var(--gap, 0px)) translateX(-50%);
+}

package/build/style/index.module.css.d.ts

@@ -0,0 +1,21 @@
+declare const styles: {
+  readonly "container": string;
+  readonly "listabs": string;
+  readonly "listabs_align_center": string;
+  readonly "listabs_align_end": string;
+  readonly "listabs_align_start": string;
+  readonly "listabs_horizontal": string;
+  readonly "listabs_justify_end": string;
+  readonly "listabs_justify_start": string;
+  readonly "listabs_open": string;
+  readonly "listabs_vertical": string;
+  readonly "listfix": string;
+  readonly "listfix_align_center": string;
+  readonly "listfix_horizontal": string;
+  readonly "listfix_justify_end": string;
+  readonly "listfix_justify_start": string;
+  readonly "listfix_open": string;
+  readonly "listfix_vertical": string;
+};
+export = styles;
+

package/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "@qyu/reactcmp-dropdown",
+    "type": "module",
+    "version": "1.0.0",
+    "main": "./build/bundle/entry/index.js",
+    "description": "React Components for Dropdown Positioning",
+    "keywords": [
+        "react",
+        "dropdown",
+        "select"
+    ],
+    "homepage": "https://github.com/qlwt/reactcmp-dropdown#readme",
+    "license": "MIT",
+    "files": [
+        "./build/**/*"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/qlwt/reactcmp-dropdown.git"
+    },
+    "scripts": {
+        "build": "run-s build:clear build:style:module build:style:global build:style:types build:rollup",
+        "build:clear": "rimraf ./build",
+        "build:rollup": "rollup -c npm/rollup/rollup.config.js",
+        "build:style:module": "sass ./src/style/index.module.scss:./build/style/index.module.css --no-source-map",
+        "build:style:global": "postcss ./build/style/index.module.css --config ./npm/postcss/ -o ./build/style/index.global.css",
+        "build:style:types": "tcm ./build/style"
+    },
+    "exports": {
+        ".": {
+            "types": "./build/declaration/index.d.ts",
+            "import": "./build/bundle/entry/index.js"
+        },
+        "./style/*": {
+            "types": "./build/style/*.css.d.ts",
+            "import": "./build/style/*.css"
+        }
+    },
+    "devDependencies": {
+        "@rollup/plugin-typescript": "^11.1.6",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "npm-run-all": "^4.1.5",
+        "postcss": "^8.5.6",
+        "postcss-cli": "^11.0.1",
+        "postcss-prefix-selector": "^2.1.1",
+        "rimraf": "^6.0.1",
+        "rollup": "^4.20.0",
+        "sass": "^1.94.2",
+        "typed-css-modules": "^0.9.1",
+        "typescript": "^5.8.2",
+        "typescript-transform-paths": "^3.5.5"
+    },
+    "dependencies": {
+        "tslib": "^2.6.3"
+    },
+    "peerDependencies": {
+        "react": ">=19.0.0",
+        "react-dom": ">=19.0.0"
+    }
+}