eddev 0.2.0-beta.12 → 0.2.0-beta.13

package/dev-ui/components/ResponsiveLerpControl.js

@@ -0,0 +1,177 @@
+"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.ResponsiveLerpControl = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var icons_1 = require("../icons");
+var theme_1 = require("../theme");
+var Tooltip_1 = require("./atoms/Tooltip");
+function ResponsiveLerpControl(props) {
+    var breakpoints = (0, react_1.useMemo)(function () {
+        return props.data.map(function (item) { return item.breakpoint; });
+    }, [props.data]);
+    var ranges = (0, react_1.useMemo)(function () {
+        var ranges = [];
+        var currentRange = undefined;
+        props.data.forEach(function (item, i) {
+            if (!currentRange) {
+                currentRange = {
+                    fromBP: item.breakpoint,
+                    toBP: item.breakpoint,
+                    length: 1,
+                    lerped: item.lerpStart,
+                    isStart: true,
+                    isEnd: false,
+                };
+                ranges.push(currentRange);
+            }
+            else if (item.defined) {
+                currentRange = {
+                    fromBP: item.breakpoint,
+                    toBP: item.breakpoint,
+                    length: 1,
+                    lerped: item.lerpStart,
+                    isStart: false,
+                    isEnd: false,
+                };
+                ranges.push(currentRange);
+            }
+            else {
+                currentRange.toBP = item.breakpoint;
+                currentRange.length += 1;
+            }
+            currentRange.isEnd = i === props.data.length - 1;
+        });
+        return ranges;
+    }, [props.data]);
+    var lerpablePoints = (0, react_1.useMemo)(function () {
+        var points = [];
+        var length = 0;
+        ranges.forEach(function (range) {
+            if (!range.isEnd && !range.isStart) {
+                points.push({ index: length + range.length / 2, bp: range.fromBP, lerping: range.lerped });
+            }
+            length += range.length;
+        });
+        return points;
+    }, [props.data, ranges]);
+    console.log("Ranges", ranges, lerpablePoints);
+    return ((0, jsx_runtime_1.jsxs)(Outer, { children: [ranges.map(function (item, i) {
+                return ((0, jsx_runtime_1.jsx)(RangeItem, __assign({ css: { $$length: item.length } }, { children: (0, jsx_runtime_1.jsx)(RangeLine, { lerping: item.lerped, hasStart: !item.isStart, hasEnd: !item.isEnd }, void 0) }), i));
+            }), props.onToggleLerping &&
+                lerpablePoints.map(function (item, i) {
+                    return ((0, jsx_runtime_1.jsx)(LerpButton, __assign({ onClick: function () {
+                            if (props.onToggleLerping) {
+                                props.onToggleLerping(item.bp, !item.lerping);
+                            }
+                        }, lerping: item.lerping, css: { $$pos: item.index / breakpoints.length } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ label: item.lerping ? "Disable Lerping" : "Enable Lerping", nowrap: true, offset: 10 }, { children: (0, jsx_runtime_1.jsx)(LerpButtonInner, { children: item.lerping ? icons_1.close : icons_1.line }, void 0) }), void 0) }), i));
+                })] }, void 0));
+}
+exports.ResponsiveLerpControl = ResponsiveLerpControl;
+var Outer = (0, theme_1.styled)("div", {
+    width: "100%",
+    $$height: "16px",
+    height: "$$height",
+    display: "flex",
+    alignItems: "stretch",
+    position: "relative",
+});
+var RangeItem = (0, theme_1.styled)("div", {
+    flexGrow: "$$length",
+    position: "relative",
+});
+var RangeLine = (0, theme_1.styled)("div", {
+    position: "absolute",
+    left: "5px",
+    right: "5px",
+    top: "50%",
+    height: "3px",
+    transform: "translateY(-50%)",
+    background: "linear-gradient(to right, $$color1, $$color2)",
+    $$segHeight: "8px",
+    $$color1: "#888888",
+    $$color2: "#888888",
+    "&:before, &:after": {
+        position: "absolute",
+        height: "$$segHeight",
+        display: "block",
+        content: " ",
+        width: "2px",
+        top: "50%",
+        backgroundColor: "$$color1",
+        transform: "translateY(-50%)",
+    },
+    "&:after": {
+        right: 0,
+        backgroundColor: "$$color2",
+    },
+    variants: {
+        lerping: {
+            true: {
+                $$color1: "#FEBDF6",
+                $$color2: "#84FEDA",
+            },
+        },
+        hasEnd: {
+            false: {
+                $$color2: "transparent",
+            },
+        },
+        hasStart: {
+            false: {
+                $$color1: "transparent",
+            },
+        },
+    },
+});
+var LerpButton = (0, theme_1.styled)("div", {
+    position: "absolute",
+    left: "calc(100% * $$pos)",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    opacity: 0,
+    backgroundColor: "$bg",
+    padding: "2px",
+    cursor: "pointer",
+    svg: {
+        fill: "currentColor",
+        width: "12px",
+        height: "12px",
+        display: "block",
+    },
+    "&:hover": {
+        opacity: 1,
+    },
+    variants: {
+        lerping: {
+            true: {
+                color: "#ff5555",
+            },
+            false: {
+                color: "#ffff55",
+            },
+        },
+    },
+});
+var LerpButtonInner = (0, theme_1.styled)("div", {
+    "&:before": {
+        content: " ",
+        display: "block",
+        position: "absolute",
+        left: "-10px",
+        top: "-5px",
+        right: "-10px",
+        bottom: "-5px",
+    },
+});

package/dev-ui/components/ResponsiveScaleEditor.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { BreakpointArray } from "../../style";
+export declare const RESPONSIVE_COLUMN_WIDTH = "110px";
+export declare const RESPONSIVE_ROW_HEIGHT = "20px";
+declare type ModeType = "px" | "multiplier" | "%" | "number";
+declare type TokenData = {
+    [token: string]: {
+        [breakpoint: string]: string | [string];
+    };
+};
+declare type Props = {
+    editableRange?: boolean;
+    editableValues?: boolean;
+    showBreakpointName?: boolean;
+    showValues?: boolean;
+    showRange?: boolean;
+    data: TokenData;
+    breakpoints: BreakpointArray;
+    tabIndexStart?: number;
+    related?: boolean;
+    labelWidth: string;
+    modes: ModeType[];
+    onChange(data: TokenData): void;
+};
+export declare function ResponsiveScaleEditor(props: Props): JSX.Element;
+export {};

package/dev-ui/components/ResponsiveScaleEditor.js

@@ -0,0 +1,233 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveScaleEditor = exports.RESPONSIVE_ROW_HEIGHT = exports.RESPONSIVE_COLUMN_WIDTH = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
+var theme_1 = require("../theme");
+var NumberField_1 = require("./atoms/NumberField");
+var ResponsiveLerpControl_1 = require("./ResponsiveLerpControl");
+var Text_1 = require("./atoms/Text");
+var ToggleButton_1 = require("./atoms/ToggleButton");
+var Tooltip_1 = require("./atoms/Tooltip");
+var react_1 = require("react");
+var immer_1 = __importDefault(require("immer"));
+// @ts-ignore
+var _theme_1 = require("@theme");
+exports.RESPONSIVE_COLUMN_WIDTH = "110px";
+exports.RESPONSIVE_ROW_HEIGHT = "20px";
+function ResponsiveScaleEditor(props) {
+    var values = props.data;
+    var rows = (0, react_1.useMemo)(function () {
+        return Object.entries(props.data).map(function (_a) {
+            var key = _a[0], row = _a[1];
+            var info = (0, style_1.parseResponsiveObject)(props.breakpoints, row);
+            return {
+                token: key,
+                row: info,
+            };
+        });
+    }, [props.data]);
+    var general = (0, react_1.useMemo)(function () {
+        return props.data[0];
+    }, [props.data]);
+    var onChangeValue = function (item, value, token) {
+        props.onChange((0, immer_1.default)(values, function (draft) {
+            var subvalue = item.type === "px" ? value + "px" : item.type === "multiplier" ? "x" + value : undefined;
+            if (item.lerpStart && typeof subvalue === "string") {
+                subvalue = [subvalue];
+            }
+            if (subvalue === undefined) {
+                delete draft[token]["@" + item.breakpoint];
+            }
+            else {
+                draft[token]["@" + item.breakpoint] = subvalue;
+            }
+        }));
+    };
+    var onChangeUnits = function (breakpoint, token) {
+        var sampleValue = rows.find(function (r) { return r.token === token; }).row.find(function (item) { return item.breakpoint === breakpoint; });
+        var nextType = props.modes[(props.modes.indexOf(sampleValue.type) + 1) % props.modes.length];
+        props.onChange((0, immer_1.default)(values, function (draft) {
+            var updateToken = function (rowIndex) {
+                var token = rows[rowIndex].token;
+                var item = rows[rowIndex].row.find(function (i) { return i.breakpoint === breakpoint; });
+                var base = rows[rowIndex].row.find(function (i) { return i.breakpoint === item.lastBreakpoint; });
+                var nextValue;
+                if (item.type === "px" && nextType === "multiplier") {
+                    if (base) {
+                        console.log(item.value, base.concreteValue);
+                        nextValue = "x" + item.value / (base === null || base === void 0 ? void 0 : base.concreteValue);
+                    }
+                }
+                else if (item.type === "multiplier" && nextType === "px") {
+                    nextValue = item.value * (base === null || base === void 0 ? void 0 : base.concreteValue) + "px";
+                }
+                if (nextValue) {
+                    if (item.lerpStart) {
+                        nextValue = [nextValue];
+                    }
+                    draft[token]["@" + item.breakpoint] = nextValue;
+                }
+            };
+            if (props.related) {
+                for (var i = 0; i < rows.length; i++) {
+                    updateToken(i);
+                }
+            }
+        }));
+    };
+    var onToggleLerping = function (breakpoint, lerping) {
+        props.onChange((0, immer_1.default)(values, function (values) {
+            for (var token in values) {
+                var subval = values[token]["@" + breakpoint];
+                if (Array.isArray(subval)) {
+                    subval = subval[0];
+                }
+                values[token]["@" + breakpoint] = lerping ? [subval] : subval;
+            }
+        }));
+    };
+    var onToggleBreakpoint = function (item, enabled) {
+        var breakpoint = item.breakpoint;
+        if (!enabled) {
+            props.onChange((0, immer_1.default)(values, function (values) {
+                for (var token in values) {
+                    delete values[token]["@" + breakpoint];
+                }
+            }));
+        }
+        else {
+            props.onChange((0, immer_1.default)(values, function (values) {
+                for (var token in values) {
+                    var original = _theme_1.originalConfig.responsive.space[token]["@" + breakpoint];
+                    var value = original;
+                    if (!value) {
+                        value = values[token]["@" + item.baseBreakpoint];
+                    }
+                    if (!value)
+                        value = "1px";
+                    values[token]["@" + breakpoint] = value;
+                }
+            }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ css: { $$total: props.data.length, $$labelWidth: props.labelWidth } }, { children: [props.showBreakpointName && ((0, jsx_runtime_1.jsx)(Row, __assign({ heading: true }, { children: rows[0].row.map(function (item, i) {
+                    var bp = props.breakpoints[i];
+                    return ((0, jsx_runtime_1.jsx)(Col, __assign({ css: { textAlign: "center" } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ label: "".concat(bp.min, " to ").concat(bp.max || "∞"), mono: true, nowrap: true }, { children: (0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { checked: item.defined, onChange: function (checked) {
+                                    onToggleBreakpoint === null || onToggleBreakpoint === void 0 ? void 0 : onToggleBreakpoint(item, checked);
+                                }, label: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ as: "span", variant: "monoBold" }, { children: item.breakpoint }), void 0) }, void 0) }), void 0) }), i));
+                }) }), void 0)), props.showRange && ((0, jsx_runtime_1.jsx)(Row, __assign({ heading: true }, { children: (0, jsx_runtime_1.jsx)(ResponsiveLerpControl_1.ResponsiveLerpControl, { onToggleLerping: onToggleLerping, data: rows[0].row }, void 0) }), void 0)), props.showValues && ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: rows.map(function (_a, rowIndex) {
+                    var token = _a.token, row = _a.row;
+                    return ((0, jsx_runtime_1.jsxs)(Row, __assign({ hoverable: true, labelIndent: false }, { children: [(0, jsx_runtime_1.jsx)(RowLabel, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoBold" }, { children: token }), void 0) }, void 0), row.map(function (item, i) {
+                                var tabIndex = 500 + (props.tabIndexStart || 0) + i * 100;
+                                return ((0, jsx_runtime_1.jsxs)(Col, { children: [(0, jsx_runtime_1.jsx)(Field, { children: item.type === "multiplier" ||
+                                                item.type === "number" ||
+                                                item.type === "px" ||
+                                                item.type === "percent" ? ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { tabIndex: tabIndex, prefix: item.type === "multiplier" ? "x" : "", suffix: item.type === "px" ? "px" : item.type === "percent" ? "%" : "", value: item.value, onChange: function (value) {
+                                                    onChangeValue(item, value, token);
+                                                }, increment: item.type === "px" ? 1 : 0.1 }, void 0)) : null }, void 0), item.defined && (!props.related || rowIndex === 0) && ((0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function () {
+                                                onChangeUnits(item.breakpoint, token);
+                                            } }, { children: item.type === "px" ? "px" : "multiplier" }), void 0))] }, i));
+                            })] }), rowIndex));
+                }) }, void 0))] }), void 0));
+}
+exports.ResponsiveScaleEditor = ResponsiveScaleEditor;
+var Wrapper = (0, theme_1.styled)("div", {
+    position: "relative",
+    width: "calc(".concat(exports.RESPONSIVE_COLUMN_WIDTH, " * $$total)"),
+    $$lineColor: "$colors$bgLine",
+});
+var Row = (0, theme_1.styled)("div", {
+    display: "flex",
+    borderBottom: "1px solid $$lineColor",
+    paddingLeft: "$$labelWidth",
+    variants: {
+        heading: {
+            true: {
+                $$lineColor: "transparent",
+            },
+        },
+        labelIndent: {
+            false: {
+                paddingLeft: "0",
+            },
+        },
+        hoverable: {
+            true: {
+                "&:hover": {
+                    backgroundColor: "$colors$bgLine",
+                },
+            },
+        },
+    },
+});
+var Col = (0, theme_1.styled)("div", {
+    position: "relative",
+    width: exports.RESPONSIVE_COLUMN_WIDTH,
+    height: exports.RESPONSIVE_ROW_HEIGHT,
+    boxSizing: "border-box",
+    borderLeft: "1px solid $$lineColor",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingRight: "4px",
+    variants: {
+        autoHeight: {
+            true: {
+                height: "auto",
+            },
+        },
+    },
+});
+var Field = (0, theme_1.styled)("div", {
+    flex: "1 1 auto",
+});
+// const Start = styled("div", {
+//   position: "absolute",
+// })
+// const End = styled("div", {
+//   position: "absolute",
+//   right: 2,
+// })
+var RowLabel = (0, theme_1.styled)("div", {
+    width: "$$labelWidth",
+    height: exports.RESPONSIVE_ROW_HEIGHT,
+    boxSizing: "border-box",
+    flex: "0 0 auto",
+});
+var Toolbar = (0, theme_1.styled)("div", {
+    display: "flex",
+    textAlign: "left",
+    width: "100%",
+    paddingLeft: "4px",
+    paddingBottom: "4px",
+    button: {
+        marginRight: "3px",
+    },
+});
+var ToolbarButton = (0, theme_1.styled)("button", {
+    fontSize: "9px",
+    appearance: "none",
+    border: 0,
+    backgroundColor: "$colors$button",
+    color: "$colors$fg",
+    borderRadius: "4px",
+    padding: "0px 4px",
+    "&:hover": {
+        backgroundColor: "$colors$buttonHover",
+    },
+});

package/dev-ui/components/ResponsiveScaleHeader.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { BreakpointArray, ResponsiveAtomCalc } from "../../style";
+declare type Props = {
+    editableRange?: boolean;
+    editableValues?: boolean;
+    showBreakpointName?: boolean;
+    showValues?: boolean;
+    showRange?: boolean;
+    data: ResponsiveAtomCalc;
+    breakpoints: BreakpointArray;
+};
+export declare function ResponsiveScaleEditor(props: Props): JSX.Element;
+export declare const RESPONSIVE_COLUMN_WIDTH = "100px";
+export declare const RESPONSIVE_ROW_HEIGHT = "25px";
+export {};

package/dev-ui/components/ResponsiveScaleHeader.js

@@ -0,0 +1,51 @@
+"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.RESPONSIVE_ROW_HEIGHT = exports.RESPONSIVE_COLUMN_WIDTH = exports.ResponsiveScaleEditor = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var theme_1 = require("../theme");
+var NumberField_1 = require("./atoms/NumberField");
+var ResponsiveLerpControl_1 = require("./ResponsiveLerpControl");
+var Text_1 = require("./atoms/Text");
+var ToggleButton_1 = require("./atoms/ToggleButton");
+function ResponsiveScaleEditor(props) {
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ css: { $$total: props.data.length } }, { children: [props.showBreakpointName && ((0, jsx_runtime_1.jsx)(Row, { children: props.data.map(function (item, i) {
+                    return ((0, jsx_runtime_1.jsx)(Col, __assign({ css: { textAlign: "center" } }, { children: (0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { checked: item.defined, onChange: function (checked) { }, label: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ as: "span", variant: "monoBold" }, { children: item.breakpoint }), void 0) }, void 0) }), void 0));
+                }) }, void 0)), props.showRange && (0, jsx_runtime_1.jsx)(ResponsiveLerpControl_1.ResponsiveLerpControl, { data: props.data }, void 0), props.showValues && ((0, jsx_runtime_1.jsx)(Row, { children: props.data.map(function (item, i) {
+                    return ((0, jsx_runtime_1.jsx)(Col, { children: (0, jsx_runtime_1.jsx)(Start, { children: item.type === "px" ? (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { suffix: "px", value: item.value, onChange: function () { } }, void 0) : null }, void 0) }, void 0));
+                }) }, void 0))] }), void 0));
+}
+exports.ResponsiveScaleEditor = ResponsiveScaleEditor;
+exports.RESPONSIVE_COLUMN_WIDTH = "100px";
+exports.RESPONSIVE_ROW_HEIGHT = "25px";
+var Wrapper = (0, theme_1.styled)("div", {
+    position: "relative",
+    width: "calc(".concat(exports.RESPONSIVE_COLUMN_WIDTH, " * $$total)"),
+});
+var Row = (0, theme_1.styled)("div", {
+    display: "flex",
+});
+var Col = (0, theme_1.styled)("div", {
+    position: "relative",
+    width: exports.RESPONSIVE_COLUMN_WIDTH,
+    height: exports.RESPONSIVE_ROW_HEIGHT,
+    boxSizing: "border-box",
+    borderLeft: "1px solid $colors$bgHover",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+});
+var Start = (0, theme_1.styled)("div", {
+    position: "absolute",
+    left: 2,
+});

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

@@ -0,0 +1,47 @@
+export declare const Button: import("@stitches/react/types/styled-component").StyledComponent<"button", {
+    state?: "active" | "inactive" | undefined;
+    color?: "default" | "black" | undefined;
+    small?: boolean | "true" | undefined;
+    tiny?: boolean | "true" | 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/Button.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var theme_1 = require("../../theme");
+exports.Button = (0, theme_1.styled)("button", {
+    appearance: "none",
+    border: "0px",
+    $$bg: "$colors$bg",
+    $$fg: "$colors$fg",
+    $$bgHover: "$colors$bgHover",
+    background: "$$bg",
+    color: "$$fg",
+    borderRadius: "100px",
+    whiteSpace: "nowrap",
+    padding: "4px 8px",
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    height: "$space$buttonHeight",
+    pointerEvents: "all",
+    fontSize: "$sm",
+    "&:hover": {
+        backgroundColor: "$$bgHover",
+    },
+    svg: {
+        display: "block",
+        fill: "currentColor",
+        marginRight: "5px",
+        width: "14px",
+        height: "14px",
+    },
+    variants: {
+        state: {
+            active: {},
+            inactive: {
+                $$fg: "$colors$fgFaded",
+            },
+        },
+        color: {
+            black: {
+                $$bg: "$colors$bg",
+                $$fg: "$colors$fg",
+                $$bgHover: "$colors$bgHover",
+            },
+            default: {
+                $$bg: "$colors$button",
+                $$fg: "$colors$fg",
+                $$bgHover: "$colors$buttonHover",
+            },
+        },
+        small: {
+            true: {
+                height: "$space$smallButtonHeight",
+            },
+        },
+        tiny: {
+            true: {
+                height: "10px",
+                fontSize: "10px",
+            },
+        },
+    },
+    defaultVariants: {
+        color: "default",
+    },
+});

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

@@ -0,0 +1,13 @@
+import { PropsWithChildren, ReactNode } from "react";
+declare type MenuItem = {
+    icon?: ReactNode;
+    label: string;
+    onClick: () => void;
+};
+declare type Props = PropsWithChildren<{
+    items: MenuItem[];
+    mono?: boolean;
+    offset?: number;
+}>;
+export declare function Tooltip(props: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,50 @@
+"use strict";
+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)(MenuWrapper, { css: { $$offset: (typeof props.offset === "number" ? props.offset : 5) + "px" }, mono: props.mono }, void 0), props.children] }, void 0));
+}
+exports.Tooltip = Tooltip;
+var MenuWrapper = (0, theme_1.styled)("div", {
+    position: "absolute",
+    bottom: "calc(100% + $$offset)",
+    left: "50%",
+    transform: "translateX(-50%)",
+    backgroundColor: "$fg",
+    color: "$bg",
+    borderRadius: "100px",
+    fontSize: "$sm",
+    padding: "3px 10px",
+    opacity: 0,
+    pointerEvents: "none",
+    whiteSpace: "nowrap",
+    "&:after": {
+        backgroundColor: "inherit",
+        content: '" "',
+        width: "5px",
+        height: "5px",
+        display: "block",
+        position: "absolute",
+        top: "0%",
+        left: "50%",
+        transform: "translate(-50%, -50%) rotate(45deg)",
+    },
+    variants: {
+        mono: {
+            true: {
+                fontFamily: "$mono",
+            },
+        },
+    },
+});
+var Wrapper = (0, theme_1.styled)("div", {
+    position: "relative",
+    "&:hover": (_a = {},
+        _a[MenuWrapper.toString()] = {
+            opacity: 1,
+        },
+        _a),
+});