@wener/console/lib/window/macos/MacOSWindowController.js

Base console UI toolkit

function _define_property(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    }
    else {
        obj[key] = value;
    }
    return obj;
}
function _object_spread(target) {
    for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i] != null ? arguments[i] : {};
        var ownKeys = Object.keys(source);
        if (typeof Object.getOwnPropertySymbols === "function") {
            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
            }));
        }
        ownKeys.forEach(function (key) {
            _define_property(target, key, source[key]);
        });
    }
    return target;
}
function _tagged_template_literal(strings, raw) {
    if (!raw) {
        raw = strings.slice(0);
    }
    return Object.freeze(Object.defineProperties(strings, {
        raw: {
            value: Object.freeze(raw)
        }
    }));
}
function _templateObject() {
    var data = _tagged_template_literal([
        "\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\n\t& > button > svg {\n\t\topacity: 0;\n\t}\n\n\t& > button > svg:hover {\n\t\topacity: 0.65;\n\t}\n\n\t& > button {\n\t\theight: 1rem;\n\t\twidth: 1rem;\n\t\tborder-radius: 9999px;\n\t\tbackground-color: rgb(209 213 219);\n\t\t--color: var(--color-gray-300);\n\n\t\t&:disabled {\n\t\t\topacity: 0.45;\n\t\t\t--color: #000 !important;\n\t\t}\n\n\t\t&[data-action='close'] {\n\t\t\t--color: #f34f4f;\n\t\t}\n\n\t\t&[data-action='minimize'] {\n\t\t\t--color: #f3b95d;\n\t\t}\n\n\t\t&[data-action='maximize'] {\n\t\t\t--color: #3ab54a;\n\t\t}\n\t}\n\n\t.group\\/window:focus-within & > button {\n\t\tbackground-color: var(--color) !important;\n\t}\n\n\t.group\\/window:hover & > button {\n\t\tbackground-color: var(--color) !important;\n\t}\n"
    ], [
        "\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\n\t& > button > svg {\n\t\topacity: 0;\n\t}\n\n\t& > button > svg:hover {\n\t\topacity: 0.65;\n\t}\n\n\t& > button {\n\t\theight: 1rem;\n\t\twidth: 1rem;\n\t\tborder-radius: 9999px;\n\t\tbackground-color: rgb(209 213 219);\n\t\t--color: var(--color-gray-300);\n\n\t\t&:disabled {\n\t\t\topacity: 0.45;\n\t\t\t--color: #000 !important;\n\t\t}\n\n\t\t&[data-action='close'] {\n\t\t\t--color: #f34f4f;\n\t\t}\n\n\t\t&[data-action='minimize'] {\n\t\t\t--color: #f3b95d;\n\t\t}\n\n\t\t&[data-action='maximize'] {\n\t\t\t--color: #3ab54a;\n\t\t}\n\t}\n\n\t.group\\\\/window:focus-within & > button {\n\t\tbackground-color: var(--color) !important;\n\t}\n\n\t.group\\\\/window:hover & > button {\n\t\tbackground-color: var(--color) !important;\n\t}\n"
    ]);
    _templateObject = function _templateObject() {
        return data;
    };
    return data;
}
import React from "react";
import { CgCompressRight, CgExpand } from "react-icons/cg";
import { HiMiniMinus, HiMiniXMark } from "react-icons/hi2";
import styled from "@emotion/styled";
import { clsx } from "clsx";
import { getWindowDragCancelClassname } from "../const.js";
var WindowController = styled.div(_templateObject());
export var MacOSWindowController = function (param) {
    var close = param.close, minimize = param.minimize, maximize = param.maximize;
    var className = "group-focus-within/window:bg-(color:--color)! group-hover/window:bg-(color:--color)!";
    return /*#__PURE__*/ React.createElement(WindowController, {
        className: clsx("".concat(getWindowDragCancelClassname(), " group/actions"), "WindowController")
    }, /*#__PURE__*/ React.createElement("button", _object_spread({
        type: "button",
        "data-action": "close",
        className: className
    }, close), /*#__PURE__*/ React.createElement(HiMiniXMark, null)), /*#__PURE__*/ React.createElement("button", _object_spread({
        type: "button",
        "data-action": "minimize",
        className: className
    }, minimize), /*#__PURE__*/ React.createElement(HiMiniMinus, null)), /*#__PURE__*/ React.createElement("button", _object_spread({
        type: "button",
        "data-action": "maximize",
        className: clsx(className, "group/btn")
    }, maximize), /*#__PURE__*/ React.createElement(CgExpand, {
        className: "block group-data-active/btn:hidden"
    }), /*#__PURE__*/ React.createElement(CgCompressRight, {
        className: "hidden p-[3px] group-data-active/btn:block"
    })));
};