reshaped 2.8.0 → 2.8.2

package/dist/components/_private/Flyout/FlyoutUncontrolled.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import FlyoutControlled from "./FlyoutControlled.js";
+const FlyoutUncontrolled = (props) => {
+    const { defaultActive, onClose, onOpen } = props;
+    const [active, setActive] = React.useState(defaultActive || false);
+    const handleClose = () => {
+        setActive(false);
+        if (onClose)
+            onClose();
+    };
+    const handleOpen = () => {
+        setActive(true);
+        if (onOpen)
+            onOpen();
+    };
+    return (_jsx(FlyoutControlled, Object.assign({}, props, { defaultActive: undefined, active: active, onClose: handleClose, onOpen: handleOpen })));
+};
+export default FlyoutUncontrolled;

package/dist/components/_private/HiddenInput/HiddenInput.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./HiddenInput.types";
+declare const HiddenInput: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+export default HiddenInput;

package/dist/components/_private/HiddenInput/HiddenInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../../utilities/helpers.js";
+import s from "./HiddenInput.module.css";
+const HiddenInput = (props) => {
+    const { name, value, type, onChange, onFocus, onBlur, checked, defaultChecked, disabled, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className);
+    return (_jsx("input", Object.assign({}, attributes, { className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, onFocus: onFocus || (attributes === null || attributes === void 0 ? void 0 : attributes.onFocus), onBlur: onBlur || (attributes === null || attributes === void 0 ? void 0 : attributes.onBlur) })));
+};
+export default HiddenInput;

package/dist/components/_private/Portal/Portal.d.ts

@@ -0,0 +1,12 @@
+import type * as T from "./Portal.types";
+export declare const usePortalScope: () => T.Context;
+/**
+ * Disclaimer: Works only for components that don't show the portal immediately
+ * That gives Portal time to receive scope on first render
+ */
+declare const Portal: {
+    (props: T.Props): any;
+    Scope: typeof PortalScope;
+};
+declare function PortalScope<T extends HTMLElement>(props: T.ScopeProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Portal;

package/dist/components/_private/Portal/Portal.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import ReactDOM from "react-dom";
+import Theme from "../../Theme/index.js";
+const PortalScopeContext = React.createContext({});
+export const usePortalScope = () => {
+    return React.useContext(PortalScopeContext);
+};
+/**
+ * Disclaimer: Works only for components that don't show the portal immediately
+ * That gives Portal time to receive scope on first render
+ */
+const Portal = (props) => {
+    const { children, targetRef } = props;
+    /**
+     * Check for parent portal to render inside it
+     * To avoid z-iondex issues
+     * Example:
+     * Dropdown rendered on the page should render under the modal
+     * Dropdown inside the modal should render above it
+     */
+    const portal = usePortalScope();
+    const nextScopeRef = targetRef || portal.scopeRef;
+    /* Preserve the current theme when rendered in body */
+    return ReactDOM.createPortal(_jsx(Theme, { children: children }), (nextScopeRef === null || nextScopeRef === void 0 ? void 0 : nextScopeRef.current) || document.body);
+};
+function PortalScope(props) {
+    const { children } = props;
+    const ref = React.useRef(null);
+    return (_jsx(PortalScopeContext.Provider, { value: { scopeRef: ref }, children: children(ref) }));
+}
+Portal.Scope = PortalScope;
+export default Portal;

package/dist/hooks/_private/useSingletonHotkeys.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+/**
+ * Types
+ */
+type Callback = (e: KeyboardEvent) => void;
+type PressedKeys = Record<string, KeyboardEvent>;
+type Hotkeys = Record<string, Callback | null>;
+type Context = {
+    isPressed: (key: string) => boolean;
+    addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>) => (() => void) | undefined;
+};
+export declare class HotkeyStore {
+    hotkeyMap: Record<string, {
+        data: Set<{
+            callback: Callback;
+            ref: React.RefObject<HTMLElement | null>;
+        }>;
+        used: boolean;
+    }>;
+    getSize: () => number;
+    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>) => void;
+    unbindHotkeys: (hotkeys: Hotkeys) => void;
+    handleKeyDown: (pressedMap: PressedKeys, e: KeyboardEvent) => void;
+    handleKeyUp: (e: KeyboardEvent) => void;
+}
+/**
+ * Components / Hooks
+ */
+export declare const HotkeyContext: React.Context<Context>;
+export declare const SingletonHotkeysProvider: (props: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const useSingletonHotkeys: () => Context;
+export default useSingletonHotkeys;

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+/**
+ * Utilities
+ */
+const COMBINATION_DELIMETER = "+";
+const pressedMap = {};
+const modifiedKeys = [];
+const formatHotkey = (hotkey) => {
+    if (hotkey === " ")
+        return hotkey;
+    return hotkey.replace(/\s/g, "").toLowerCase();
+};
+// Normalize passed key combinations to turn them into a consistent ids
+const getHotkeyId = (hotkey) => {
+    return formatHotkey(hotkey).split(COMBINATION_DELIMETER).sort().join(COMBINATION_DELIMETER);
+};
+const getEventKey = (e) => {
+    if (!e.key)
+        return;
+    // Having alt pressed modifies e.key value, so relying on e.code for it
+    if (e.altKey && e.key !== "Alt") {
+        return e.code.toLowerCase().replace(/key|digit|numpad/, "");
+    }
+    return e.key.toLowerCase();
+};
+const getCombinations = (pressedKeys) => {
+    const result = [];
+    const hotkey = pressedKeys.join(COMBINATION_DELIMETER);
+    const id = getHotkeyId(hotkey);
+    const sortedKeys = id.split(COMBINATION_DELIMETER);
+    const f = (prefix, items) => {
+        items.forEach((item, i) => {
+            const nextId = prefix ? `${prefix}+${item}` : item;
+            result.push(nextId);
+            f(nextId, items.slice(i + 1));
+        });
+    };
+    f("", sortedKeys);
+    return result;
+};
+const walkPressedCombinations = (pressed, cb) => {
+    const pressedKeys = Object.keys(pressed);
+    if (!pressedKeys.length)
+        return;
+    getCombinations(pressedKeys).forEach((pressedId) => {
+        cb(pressedId);
+    });
+};
+const walkHotkeys = (hotkeys, cb) => {
+    Object.keys(hotkeys).forEach((key) => {
+        key.split(",").forEach((hotkey) => {
+            const data = hotkeys[key];
+            if (!data)
+                return;
+            cb(getHotkeyId(hotkey), data);
+        });
+    });
+};
+export class HotkeyStore {
+    constructor() {
+        this.hotkeyMap = {};
+        this.getSize = () => Object.keys(this.hotkeyMap).length;
+        this.bindHotkeys = (hotkeys, ref) => {
+            walkHotkeys(hotkeys, (id, hotkeyData) => {
+                if (!hotkeyData)
+                    return;
+                if (!this.hotkeyMap[id]) {
+                    this.hotkeyMap[id] = { data: new Set(), used: false };
+                }
+                this.hotkeyMap[id].data.add({ callback: hotkeyData, ref });
+            });
+        };
+        this.unbindHotkeys = (hotkeys) => {
+            walkHotkeys(hotkeys, (id, hotkeyCallback) => {
+                var _a, _b;
+                if (!hotkeyCallback)
+                    return;
+                (_a = this.hotkeyMap[id]) === null || _a === void 0 ? void 0 : _a.data.forEach((data) => {
+                    if (data.callback === hotkeyCallback) {
+                        this.hotkeyMap[id].data.delete(data);
+                    }
+                });
+                if (!((_b = this.hotkeyMap[id]) === null || _b === void 0 ? void 0 : _b.data.size)) {
+                    delete this.hotkeyMap[id];
+                }
+            });
+        };
+        this.handleKeyDown = (pressedMap, e) => {
+            walkPressedCombinations(pressedMap, (pressedId) => {
+                const hotkeyData = this.hotkeyMap[pressedId];
+                if (!hotkeyData || hotkeyData.used)
+                    return;
+                if (hotkeyData === null || hotkeyData === void 0 ? void 0 : hotkeyData.data.size) {
+                    hotkeyData.data.forEach((data) => {
+                        var _a;
+                        if (((_a = data.ref) === null || _a === void 0 ? void 0 : _a.current) &&
+                            !(e.target === data.ref.current || data.ref.current.contains(e.target))) {
+                            return;
+                        }
+                        data.callback(pressedMap[pressedId]);
+                        this.hotkeyMap[pressedId].used = true;
+                    });
+                }
+            });
+        };
+        this.handleKeyUp = (e) => {
+            const id = getHotkeyId(e.key);
+            walkHotkeys(this.hotkeyMap, (hotkeyId, data) => {
+                const hotkeyIds = hotkeyId.split(COMBINATION_DELIMETER);
+                if (hotkeyIds.includes(id))
+                    data.used = false;
+            });
+        };
+    }
+}
+const globalHotkeyStore = new HotkeyStore();
+/**
+ * Components / Hooks
+ */
+export const HotkeyContext = React.createContext({});
+export const SingletonHotkeysProvider = (props) => {
+    const { children } = props;
+    // eslint-disable-next-line
+    const [_, setTriggerCount] = React.useState(0);
+    // Only handle key presses when there is at least one hook listening for hotkeys
+    const [hooksCount, setHooksCount] = React.useState(0);
+    const addPressedKey = React.useCallback((e) => {
+        if (e.repeat || hooksCount === 0)
+            return;
+        const eventKey = getEventKey(e);
+        if (!eventKey)
+            return;
+        pressedMap[eventKey] = e;
+        if (eventKey === "meta" || eventKey === "control") {
+            pressedMap.mod = e;
+        }
+        setTriggerCount(Object.keys(pressedMap).length);
+        // Key up won't trigger for other keys while Meta is pressed so we need to cache them
+        // and remove on Meta keyup
+        if (eventKey === "meta") {
+            modifiedKeys.push(...Object.keys(pressedMap));
+        }
+        if (pressedMap.Meta) {
+            modifiedKeys.push(eventKey);
+        }
+    }, [hooksCount]);
+    const removePressedKey = React.useCallback((e) => {
+        if (hooksCount === 0)
+            return;
+        const eventKey = getEventKey(e);
+        if (!eventKey)
+            return;
+        delete pressedMap[eventKey];
+        if (eventKey === "meta" || eventKey === "control") {
+            delete pressedMap.mod;
+        }
+        if (eventKey === "meta") {
+            modifiedKeys.forEach((key) => {
+                delete pressedMap[key];
+            });
+        }
+        setTriggerCount(Object.keys(pressedMap).length);
+    }, [hooksCount]);
+    const isPressed = (hotkey) => {
+        const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
+        if (keys.some((key) => !pressedMap[key]))
+            return false;
+        return true;
+    };
+    const addHotkeys = React.useCallback((hotkeys, ref) => {
+        setHooksCount((prev) => prev + 1);
+        globalHotkeyStore.bindHotkeys(hotkeys, ref);
+        return () => {
+            setHooksCount((prev) => prev - 1);
+            globalHotkeyStore.unbindHotkeys(hotkeys);
+        };
+    }, []);
+    const handleWindowKeyDown = React.useCallback((e) => {
+        // Browsers trigger keyboard event without passing e.key when you click on autocomplete
+        if (!e.key)
+            return;
+        addPressedKey(e);
+        globalHotkeyStore.handleKeyDown(pressedMap, e);
+    }, [addPressedKey]);
+    const handleWindowKeyUp = React.useCallback((e) => {
+        if (!e.key)
+            return;
+        removePressedKey(e);
+        globalHotkeyStore.handleKeyUp(e);
+    }, [removePressedKey]);
+    React.useEffect(() => {
+        window.addEventListener("keydown", handleWindowKeyDown);
+        window.addEventListener("keyup", handleWindowKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleWindowKeyDown);
+            window.removeEventListener("keyup", handleWindowKeyUp);
+        };
+    }, [handleWindowKeyDown, handleWindowKeyUp]);
+    return (_jsx(HotkeyContext.Provider, { value: { addHotkeys, isPressed }, children: children }));
+};
+const useSingletonHotkeys = () => React.useContext(HotkeyContext);
+export default useSingletonHotkeys;

package/dist/icons/ArrowUpRight.d.ts

@@ -0,0 +1,2 @@
+declare const IconArrowUpRight: () => import("react/jsx-runtime").JSX.Element;
+export default IconArrowUpRight;

package/dist/icons/ArrowUpRight.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconArrowUpRight = () => {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "7", y1: "17", x2: "17", y2: "7" }), _jsx("polyline", { points: "7 7 17 7 17 17" })] }));
+};
+export default IconArrowUpRight;

package/dist/icons/Checkmark.d.ts

@@ -0,0 +1,2 @@
+declare const IconCheckmark: () => import("react/jsx-runtime").JSX.Element;
+export default IconCheckmark;

package/dist/icons/Checkmark.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconCheckmark = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", stroke: "currentColor", fill: "none", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+};
+export default IconCheckmark;

package/dist/icons/ChevronDown.d.ts

@@ -0,0 +1,2 @@
+declare const IconChevronDown: () => import("react/jsx-runtime").JSX.Element;
+export default IconChevronDown;

package/dist/icons/ChevronDown.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconChevronDown = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", stroke: "currentColor", fill: "none", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }));
+};
+export default IconChevronDown;

package/dist/icons/ChevronLeft.d.ts

@@ -0,0 +1,2 @@
+declare const IconChevronLeft: () => import("react/jsx-runtime").JSX.Element;
+export default IconChevronLeft;

package/dist/icons/ChevronLeft.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconChevronLeft = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }));
+};
+export default IconChevronLeft;

package/dist/icons/ChevronRight.d.ts

@@ -0,0 +1,2 @@
+declare const IconChevronRight: () => import("react/jsx-runtime").JSX.Element;
+export default IconChevronRight;

package/dist/icons/ChevronRight.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconChevronRight = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }));
+};
+export default IconChevronRight;

package/dist/icons/ChevronVertical.d.ts

@@ -0,0 +1,2 @@
+declare const IconChevronVertical: () => import("react/jsx-runtime").JSX.Element;
+export default IconChevronVertical;

package/dist/icons/ChevronVertical.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconChevronVertical = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7 16L12 21L17 16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M17 8L12 3L7 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export default IconChevronVertical;

package/dist/icons/Close.d.ts

@@ -0,0 +1,2 @@
+declare const IconClose: () => import("react/jsx-runtime").JSX.Element;
+export default IconClose;

package/dist/icons/Close.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconClose = () => {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+};
+export default IconClose;

package/dist/icons/DotsHorizontal.d.ts

@@ -0,0 +1,2 @@
+declare const IconDotsHorizontal: () => import("react/jsx-runtime").JSX.Element;
+export default IconDotsHorizontal;

package/dist/icons/DotsHorizontal.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconDotsHorizontal = () => (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z", fill: "currentColor" }), _jsx("path", { d: "M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z", fill: "currentColor" }), _jsx("path", { d: "M4 9C4.55228 9 5 8.55228 5 8C5 7.44772 4.55228 7 4 7C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9Z", fill: "currentColor" })] }));
+export default IconDotsHorizontal;

package/dist/icons/Mic.d.ts

@@ -0,0 +1,2 @@
+declare const MicIcon: () => import("react/jsx-runtime").JSX.Element;
+export default MicIcon;

package/dist/icons/Mic.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MicIcon = () => {
+    return (_jsxs("svg", { viewBox: "0 0 16 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M8 1C7.20435 1 6.44129 1.31607 5.87868 1.87868C5.31607 2.44129 5 3.20435 5 4V12C5 12.7956 5.31607 13.5587 5.87868 14.1213C6.44129 14.6839 7.20435 15 8 15C8.79565 15 9.55871 14.6839 10.1213 14.1213C10.6839 13.5587 11 12.7956 11 12V4C11 3.20435 10.6839 2.44129 10.1213 1.87868C9.55871 1.31607 8.79565 1 8 1V1Z", stroke: "currentColor" }), _jsx("path", { d: "M15 10V12C15 13.8565 14.2625 15.637 12.9497 16.9497C11.637 18.2625 9.85652 19 8 19C6.14348 19 4.36301 18.2625 3.05025 16.9497C1.7375 15.637 1 13.8565 1 12V10", stroke: "currentColor" }), _jsx("path", { d: "M8 19V23", stroke: "currentColor" }), _jsx("path", { d: "M4 23H12", stroke: "currentColor" })] }));
+};
+export default MicIcon;

package/dist/icons/Zap.d.ts

@@ -0,0 +1,2 @@
+declare const IconZap: () => import("react/jsx-runtime").JSX.Element;
+export default IconZap;

package/dist/icons/Zap.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconZap = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2", fill: "currentColor" }) }));
+};
+export default IconZap;

package/dist/tests/themingWithDefinition.js

@@ -0,0 +1,5 @@
+/**
+ * File importing theming client to test its bundle size
+ */
+import * as themes from "../themes/index.js";
+console.log(themes);

package/dist/tests/themingWithoutDefinition.js

@@ -0,0 +1,5 @@
+/**
+ * File importing theming client to test its bundle size
+ */
+import { getThemeCSS, generateThemeColors } from "../themes/index.js";
+console.log({ getThemeCSS, generateThemeColors });

package/dist/themes/_generator/utilities/tests/generateColors.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/global.js

@@ -0,0 +1 @@
+export {};