eddev 0.2.0-beta.10 → 0.2.0-beta.14

package/dev-ui/components/atoms/NumberField.js

@@ -0,0 +1,111 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberField = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var theme_1 = require("../../theme");
+function NumberField(props) {
+    var ref = (0, react_1.useRef)(null);
+    var _a = (0, react_1.useState)(false), focused = _a[0], setFocused = _a[1];
+    var _b = (0, react_1.useState)(props.value), value = _b[0], setValue = _b[1];
+    var focusAll = function () {
+        var range = document.createRange();
+        range.selectNodeContents(ref.current);
+        var sel = window.getSelection();
+        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+        sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+    };
+    var normalize = function (value) {
+        return parseFloat(Math.max(0, value).toFixed(4));
+    };
+    var setValueForced = function (value, changed) {
+        if (changed === void 0) { changed = false; }
+        var v = normalize(value);
+        setValue(v);
+        if (ref.current) {
+            if (ref.current.innerHTML !== v.toString()) {
+                ref.current.innerHTML = v.toString();
+            }
+        }
+        if (changed) {
+            props.onChange(value);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        setValueForced(props.value, false);
+    }, [props.value]);
+    (0, react_1.useEffect)(function () {
+        if (!focused) {
+            setValueForced(value);
+        }
+    }, [value, focused]);
+    return ((0, jsx_runtime_1.jsxs)(Field, __assign({ focused: focused, onMouseDown: function (e) {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+            if (!focused) {
+                focusAll();
+                e.preventDefault();
+            }
+        } }, { children: [props.prefix && (0, jsx_runtime_1.jsx)(Extra, { children: props.prefix }, void 0), (0, jsx_runtime_1.jsx)(Input, { ref: ref, contentEditable: !!props.onChange, tabIndex: props.tabIndex, onFocus: function () {
+                    setFocused(true);
+                    focusAll();
+                }, onBlur: function () { return setFocused(false); }, onInput: function (e) {
+                    var value = parseFloat(e.currentTarget.innerText.replace(/[^0-9\.]/g, "")) || 0;
+                    setValue(value);
+                    props.onChange(value);
+                }, 
+                // onPasteCapture={(e) => {
+                //   console.log(e.clipboardData.getData("text/plain"))
+                //   e.preventDefault()
+                // }}
+                onKeyDown: function (e) {
+                    var increment = props.increment * (e.shiftKey ? 10 : 1);
+                    if (e.key === "ArrowUp") {
+                        setValueForced(value + increment, true);
+                        setTimeout(function () { return focusAll(); }, 1);
+                    }
+                    else if (e.key === "ArrowDown") {
+                        setValueForced(value - increment, true);
+                        setTimeout(function () { return focusAll(); }, 1);
+                    }
+                    else if (e.key === "Enter") {
+                        e.preventDefault();
+                    }
+                } }, void 0), props.suffix && (0, jsx_runtime_1.jsx)(Extra, { children: props.suffix }, void 0)] }), void 0));
+}
+exports.NumberField = NumberField;
+var Field = (0, theme_1.styled)("div", {
+    display: "inline-flex",
+    fontFamily: "$mono",
+    fontSize: "$sm",
+    padding: "0 4px",
+    borderRadius: "$sm",
+    variants: {
+        focused: {
+            true: {
+                backgroundColor: "$bgHover",
+            },
+        },
+    },
+});
+var Input = (0, theme_1.styled)("span", {
+    outline: "0px",
+    "&::selection": {
+        background: "white",
+        color: "black",
+    },
+});
+var Extra = (0, theme_1.styled)("span", {
+    opacity: 0.7,
+});

package/dev-ui/components/atoms/Spacer.d.ts

@@ -0,0 +1,42 @@
+export declare const Spacer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    space: {
+        smallButtonHeight: string;
+        buttonHeight: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
+    colors: {
+        bg: string;
+        bgHover: string;
+        bgHoverLight: string;
+        bgLine: string;
+        bgLineStrong: string;
+        button: string;
+        buttonHover: string;
+        fg: string;
+        fgFaded: string;
+    };
+    fontSizes: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    fonts: {
+        body: string;
+        mono: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    transitions: {
+        default: string;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;

package/dev-ui/components/atoms/Spacer.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacer = void 0;
+var theme_1 = require("../../theme");
+exports.Spacer = (0, theme_1.styled)("div", {
+    display: "block",
+    width: "$spaces$1",
+});

package/dev-ui/components/atoms/Text.d.ts

@@ -0,0 +1,45 @@
+export declare const Text: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    variant?: "h1" | "mono" | "monoBold" | "monoTiny" | undefined;
+    align?: "left" | "right" | "center" | undefined;
+}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    space: {
+        smallButtonHeight: string;
+        buttonHeight: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
+    colors: {
+        bg: string;
+        bgHover: string;
+        bgHoverLight: string;
+        bgLine: string;
+        bgLineStrong: string;
+        button: string;
+        buttonHover: string;
+        fg: string;
+        fgFaded: string;
+    };
+    fontSizes: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    fonts: {
+        body: string;
+        mono: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    transitions: {
+        default: string;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;

package/dev-ui/components/atoms/Text.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+var theme_1 = require("../../theme");
+exports.Text = (0, theme_1.styled)("div", {
+    variants: {
+        variant: {
+            h1: {
+                fontSize: "$xl",
+            },
+            monoBold: {
+                fontFamily: "$mono",
+                fontSize: "$sm",
+                fontWeight: "bold",
+                lineHeight: "1.6",
+            },
+            mono: {
+                fontFamily: "$mono",
+                fontSize: "$sm",
+                lineHeight: "1.6",
+            },
+            monoTiny: {
+                fontSize: "8px",
+                fontFamily: "$mono",
+            },
+        },
+        align: {
+            left: {
+                textAlign: "left",
+            },
+            center: {
+                textAlign: "center",
+            },
+            right: {
+                textAlign: "right",
+            },
+        },
+    },
+});

package/dev-ui/components/atoms/ToggleButton.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+declare type Props = {
+    checked: boolean;
+    label: ReactNode;
+    onChange: (value: boolean) => void;
+};
+export declare function ToggleButton(props: Props): JSX.Element;
+export {};

package/dev-ui/components/atoms/ToggleButton.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icons_1 = require("../../icons");
+var theme_1 = require("../../theme");
+function ToggleButton(props) {
+    return ((0, jsx_runtime_1.jsxs)(ToggleButtonStyle, __assign({ onClick: function () { return props.onChange(!props.checked); } }, { children: [props.checked ? icons_1.checkFilled : icons_1.checkEmpty, props.label] }), void 0));
+}
+exports.ToggleButton = ToggleButton;
+var ToggleButtonStyle = (0, theme_1.styled)("button", {
+    appearance: "none",
+    background: "transparent",
+    border: "0px",
+    padding: "3px",
+    height: "auto",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "inherit",
+    "&:hover": {
+    // backgroundColor: "$bgHover",
+    },
+    svg: {
+        fill: "$fg",
+        width: "14px",
+        height: "14px",
+        display: "block",
+    },
+});

package/dev-ui/components/atoms/Tooltip.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactNode } from "react";
+declare type Props = PropsWithChildren<{
+    label: ReactNode;
+    mono?: boolean;
+    nowrap?: boolean;
+    offset?: number;
+}>;
+export declare function Tooltip(props: Props): JSX.Element;
+export {};

package/dev-ui/components/atoms/Tooltip.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var theme_1 = require("../../theme");
+function Tooltip(props) {
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(TooltipStyle, __assign({ css: { $$offset: (typeof props.offset === "number" ? props.offset : 5) + "px" }, nowrap: props.nowrap, mono: props.mono }, { children: props.label }), void 0), props.children] }, void 0));
+}
+exports.Tooltip = Tooltip;
+var TooltipStyle = (0, theme_1.styled)("div", {
+    position: "absolute",
+    bottom: "calc(100% + $$offset)",
+    left: "50%",
+    transform: "translateX(-50%)",
+    backgroundColor: "#f0f0f0",
+    color: "#000000",
+    borderRadius: "100px",
+    fontSize: "$sm",
+    padding: "3px 10px",
+    opacity: 0,
+    pointerEvents: "none",
+    fontWeight: "normal",
+    "&:after": {
+        backgroundColor: "inherit",
+        content: '" "',
+        width: "5px",
+        height: "5px",
+        display: "block",
+        position: "absolute",
+        top: "100%",
+        left: "50%",
+        transform: "translate(-50%, -50%) rotate(45deg)",
+    },
+    variants: {
+        mono: {
+            true: {
+                fontFamily: "$mono",
+            },
+        },
+        nowrap: {
+            true: {
+                whiteSpace: "nowrap",
+            },
+        },
+    },
+});
+var Wrapper = (0, theme_1.styled)("div", {
+    position: "relative",
+    "&:hover": (_a = {},
+        _a[TooltipStyle.toString()] = {
+            opacity: 1,
+        },
+        _a),
+});

package/dev-ui/components/panels/PageDataDebugger.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function PageDataDebugger(): JSX.Element;

package/dev-ui/components/panels/PageDataDebugger.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageDataDebugger = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_inspector_1 = require("react-inspector");
+var routing_1 = require("../../../routing");
+var theme_1 = require("../../theme");
+var PanelWrapper_1 = require("../PanelWrapper");
+function PageDataDebugger() {
+    var _a;
+    var route = (0, routing_1.useRoute)();
+    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Page Data" }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { theme: "chromeDark", data: (_a = route.data) === null || _a === void 0 ? void 0 : _a.viewData.data, expandLevel: 3 }, void 0) }, void 0) }), void 0));
+}
+exports.PageDataDebugger = PageDataDebugger;
+var Wrapper = (0, theme_1.styled)("div", {
+    width: "500px",
+    maxHeight: "calc(100vh - 100px)",
+    overflowY: "auto",
+});

package/dev-ui/components/panels/SpacingEditor.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SpacingEditor(): JSX.Element;

package/dev-ui/components/panels/SpacingEditor.js

@@ -0,0 +1,88 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpacingEditor = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore
+var _theme_1 = require("@theme");
+var react_1 = require("react");
+var style_1 = require("../../../style");
+var PanelWrapper_1 = require("../PanelWrapper");
+var ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
+var useStylesheet_1 = require("../../hooks/useStylesheet");
+var Button_1 = require("../atoms/Button");
+var icons_1 = require("../../icons");
+var Spacer_1 = require("../atoms/Spacer");
+function spaceToJSON(space) {
+    return ("{\n" +
+        Object.entries(space)
+            .map(function (_a) {
+            var token = _a[0], values = _a[1];
+            var tokenStr = Object.entries(values)
+                .map(function (_a) {
+                var breakpoint = _a[0], value = _a[1];
+                return "\"".concat(breakpoint, "\": ").concat(JSON.stringify(value));
+            })
+                .join(", ");
+            return "  \"".concat(token, "\": { ").concat(tokenStr, " }");
+        })
+            .join(",\n") +
+        "\n}");
+}
+function spaceToCSS(space) {
+    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
+    var globalResponsive = (0, style_1.parseResponsiveTokens)({
+        space: space,
+    }, parsedBreakpoints).globalResponsive;
+    var rules = [];
+    Object.entries(globalResponsive).forEach(function (_a) {
+        var breakpoint = _a[0], values = _a[1];
+        var rule = "";
+        var media = _theme_1.originalConfig.media[breakpoint.replace("@", "")];
+        var variables = [];
+        for (var key in values) {
+            variables.push(key + ": " + values[key]);
+        }
+        if (media) {
+            rules.push("@media " + media + " {\n:root {" + variables.join(";\n") + "}\n}");
+        }
+        else {
+            rules.push(":root {\n" + variables.join(";\n") + "\n}");
+        }
+    });
+    return rules.join("\n");
+}
+function SpacingEditor() {
+    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.responsive.space; }), values = _a[0], setValues = _a[1];
+    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
+    var stylesheet = (0, useStylesheet_1.useStylesheet)("spacing");
+    (0, react_1.useEffect)(function () {
+        stylesheet.set(spaceToCSS(values));
+    }, [values]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Spacing Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                            navigator.clipboard.writeText(spaceToJSON(values));
+                        } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                            navigator.clipboard.readText().then(function (text) {
+                                try {
+                                    var data = JSON.parse(text);
+                                    setValues(data);
+                                }
+                                catch (err) {
+                                    alert("Error decoding pasted content: " + err.message + ". You pasted:\n" + text);
+                                }
+                            });
+                        } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                            setValues(_theme_1.originalConfig.responsive.space);
+                        } }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: values, showBreakpointName: true, showRange: true, showValues: true, related: true, labelWidth: "30px", onChange: setValues, modes: ["px", "multiplier"] }, void 0) }), void 0) }, void 0));
+}
+exports.SpacingEditor = SpacingEditor;

package/dev-ui/components/panels/TypographyEditor.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function TypographyEditor(): JSX.Element;

package/dev-ui/components/panels/TypographyEditor.js

@@ -0,0 +1,88 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyEditor = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore
+var _theme_1 = require("@theme");
+var react_1 = require("react");
+var style_1 = require("../../../style");
+var usePersistState_1 = require("../../hooks/usePersistState");
+var icons_1 = require("../../icons");
+var theme_1 = require("../../theme");
+var Button_1 = require("../atoms/Button");
+var Spacer_1 = require("../atoms/Spacer");
+var Text_1 = require("../atoms/Text");
+var PanelWrapper_1 = require("../PanelWrapper");
+function TypographyEditor() {
+    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.typography; }), values = _a[0], setValues = _a[1];
+    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
+    var _b = (0, usePersistState_1.usePersistState)("preview_text", "The quick brown fox jumps over the lazy dog"), previewText = _b[0], setPreviewText = _b[1];
+    var reset = function () {
+        setValues(_theme_1.originalConfig.typography);
+        setPreviewText("The quick brown fox jumps over the lazy dog");
+    };
+    // const stylesheet = useStylesheet("spacing")
+    // useEffect(() => {
+    //   stylesheet.set(spaceToCSS(values))
+    // }, [values])
+    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Typography", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                        // navigator.clipboard.writeText(spaceToJSON(values))
+                    } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                        // navigator.clipboard.readText().then((text) => {
+                        //   try {
+                        //     const data = JSON.parse(text)
+                        //     setValues(data)
+                        //   } catch (err) {
+                        //     alert("Error decoding pasted content: " + (err as any).message + ". You pasted:\n" + text)
+                        //   }
+                        // })
+                    } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: reset }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: Object.entries(values).map(function (_a, index) {
+                var name = _a[0], settings = _a[1];
+                return ((0, jsx_runtime_1.jsxs)(TypographyItem, { children: [(0, jsx_runtime_1.jsx)(Meta, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoBold" }, { children: name }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(Details, { children: (0, jsx_runtime_1.jsx)(Preview, { css: { typography: name }, value: previewText, onChange: function (e) {
+                                    setPreviewText(e.currentTarget.value);
+                                } }, void 0) }, void 0)] }, index));
+            }) }, void 0) }), void 0));
+}
+exports.TypographyEditor = TypographyEditor;
+var TypographyItem = (0, theme_1.styled)("div", {
+    borderBottom: "1px solid $colors$bgLineStrong",
+    display: "flex",
+    paddingTop: "4px",
+    paddingBottom: "4px",
+});
+var Meta = (0, theme_1.styled)("div", {
+    width: "200px",
+    flex: "0 0 auto",
+});
+var Wrapper = (0, theme_1.styled)("div", {
+    maxHeight: "500px",
+    overflowY: "auto",
+});
+var Details = (0, theme_1.styled)("div", {
+    flex: "1 1 auto",
+});
+var Preview = (0, _theme_1.styled)("input", {
+    appearance: "none",
+    backgroundColor: "transparent",
+    borderLeft: 0,
+    borderRight: 0,
+    borderTop: "1px solid #555555",
+    borderBottom: "1px solid #555555",
+    outline: "0",
+    color: "#ffffff",
+    padding: "0px 6px",
+    borderRadius: "0",
+    width: "100%",
+    marginBottom: "8px",
+});

package/dev-ui/hooks/useBreakpoint.d.ts

@@ -0,0 +1,11 @@
+declare type Result = {
+    name: string;
+    index: number;
+    progress: number;
+    offset: number;
+    width: number;
+    bpMin: number;
+    bpMax: number;
+};
+export declare function useBreakpoint(): Result;
+export {};

package/dev-ui/hooks/useBreakpoint.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoint = void 0;
+// @ts-ignore
+var _theme_1 = require("@theme");
+var react_1 = require("react");
+function useBreakpoint() {
+    // const [value, setValue] = useState(["initial", -1, 0] as [string, number, number])
+    var _a = (0, react_1.useState)({
+        name: "initial",
+        index: -1,
+        progress: 0,
+        offset: 0,
+        width: 0,
+        bpMin: 0,
+        bpMax: 0,
+    }), value = _a[0], setValue = _a[1];
+    (0, react_1.useEffect)(function () {
+        var handle = function () {
+            var width = window.innerWidth;
+            var result = {
+                name: "initial",
+                index: 0,
+                offset: window.innerWidth,
+                progress: window.innerWidth / _theme_1.breakpoints[0].max,
+                width: window.innerWidth,
+                bpMin: 0,
+                bpMax: _theme_1.breakpoints[0].max,
+            };
+            for (var index in _theme_1.breakpoints) {
+                var bp = _theme_1.breakpoints[index];
+                var key = bp.key;
+                var media = _theme_1.config.media[key];
+                if (!media.includes("min-width") || !media)
+                    continue;
+                if (window.matchMedia(media).matches) {
+                    result.name = key;
+                    result.index = Number(index);
+                    result.offset = width - parseFloat(bp.min);
+                    result.progress = result.offset / (parseFloat(bp.max) - parseFloat(bp.min));
+                    result.bpMin = bp.min;
+                    result.bpMax = bp.max;
+                }
+                else {
+                    break;
+                }
+            }
+            setValue(result);
+            // if (breakpoint !== value[0]) {
+            // setValue([breakpoint, matchedIndex, progress])
+            // }
+        };
+        handle();
+        window.addEventListener("resize", handle);
+        return function () { return window.removeEventListener("resize", handle); };
+    }, []);
+    return value;
+}
+exports.useBreakpoint = useBreakpoint;

package/dev-ui/hooks/usePersistState.d.ts

@@ -0,0 +1 @@
+export declare function usePersistState<T>(id: string, initial: T): [T, (value: T) => void];