windows-98-ui/dist/index.js

React component library inspired by and using the css from [98.css](https://github.com/jdan/98.css) library for vanilla html

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  Button: () => Button,
  CheckBox: () => CheckBox,
  Desktop: () => Desktop,
  Dropdown: () => Dropdown,
  Progress: () => Progress,
  Slider: () => Slider,
  TextBox: () => TextBox,
  TitleBar: () => TitleBar,
  TreeView: () => TreeView,
  Window: () => Window,
  WindowBody: () => WindowBody
});
module.exports = __toCommonJS(index_exports);

// src/components/button/Button.tsx
var import_react = require("react");
var import__ = require("98.css");
var import_jsx_runtime = require("react/jsx-runtime");
var Button = (0, import_react.forwardRef)(({
  as: Component = "button",
  label,
  className,
  disabled,
  ...props
}, ref) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    Component,
    {
      ref,
      className,
      disabled,
      ...props,
      children: label
    }
  );
});
Button.displayName = "Button";

// src/components/checkbox/CheckBox.tsx
var import_react2 = __toESM(require("react"));
var import_jsx_runtime2 = require("react/jsx-runtime");
var CheckBox = import_react2.default.forwardRef(
  ({ as: Component = "input", id, checked, disabled, label, ...props }, ref) => {
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "field-row", children: [
      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { id, ref, type: "checkbox", checked, disabled, ...props }),
      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, children: label })
    ] });
  }
);
CheckBox.displayName = "CheckBox";

// src/components/dropdown/Dropdown.tsx
var import_react3 = __toESM(require("react"));
var import_jsx_runtime3 = require("react/jsx-runtime");
var Dropdown = import_react3.default.forwardRef(({
  as: Component = "select",
  className,
  options,
  ...props
}, ref) => {
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    Component,
    {
      ref,
      className,
      ...props,
      children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: option.value, children: option.label }, option.value))
    }
  );
});
Dropdown.displayName = "Dropdown";

// src/components/textbox/TextBox.tsx
var import_react4 = __toESM(require("react"));
var import_jsx_runtime4 = require("react/jsx-runtime");
var TextBox = import_react4.default.forwardRef(
  ({ as: Component = "input", className, label, id, type, stacked, ...props }, ref) => {
    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: stacked ? "field-row-stacked" : "field-row", children: [
      label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: id, children: label }),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, className, id, type, ...props })
    ] });
  }
);
TextBox.displayName = "TextBox";

// src/components/slider/Slider.tsx
var import_react5 = __toESM(require("react"));
var import_jsx_runtime5 = require("react/jsx-runtime");
var Slider = import_react5.default.forwardRef(
  ({ as: Component = "input", label, id, min, max, value, minLabel, maxLabel, type = "range", ...props }, ref) => {
    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "field-row", style: { width: "300px" }, children: [
      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: id, children: label }),
      minLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: id, children: minLabel }),
      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { type, ref, id, min, max, value, ...props }),
      maxLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: id, children: maxLabel })
    ] });
  }
);
Slider.displayName = "Slider";

// src/components/titleBar/titleBar.tsx
var import_react6 = __toESM(require("react"));
var import_jsx_runtime6 = require("react/jsx-runtime");
var TitleBar = import_react6.default.forwardRef(
  ({
    as: Component = "div",
    className,
    inactive,
    title,
    minimize,
    maximize,
    close,
    onMaximize,
    onMinimize,
    onClose,
    ...props
  }, ref) => {
    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Component, { ref, className: `title-bar ${inactive ? "inactive" : ""} ${className || ""}`, ...props, children: [
      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "title-bar-text", children: title }),
      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "title-bar-controls", children: [
        minimize && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { "aria-label": "Minimize", onClick: onMinimize }),
        maximize && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { "aria-label": "Maximize", onClick: onMaximize }),
        close && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { "aria-label": "Close", onClick: onClose })
      ] })
    ] });
  }
);

// src/components/window/windowContainer/windowContainer.tsx
var import_react7 = __toESM(require("react"));
var import_jsx_runtime7 = require("react/jsx-runtime");
var Window = import_react7.default.forwardRef(
  ({ as: Component = "div", className, children, ...props }, ref) => {
    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
      Component,
      {
        ref,
        className: `window ${className}`,
        ...props,
        style: {
          width: `${props.width}px`,
          height: `${props.height}px`
        },
        children
      }
    );
  }
);
Window.displayName = "Window";

// src/components/window/windowBody/windowBody.tsx
var import_react8 = __toESM(require("react"));
var import_jsx_runtime8 = require("react/jsx-runtime");
var WindowBody = import_react8.default.forwardRef(
  ({ as: Component = "div", className, children, ...props }, ref) => {
    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, { ref, className: `window-body ${className}`, ...props, children });
  }
);
WindowBody.displayName = "WindowBody";

// src/components/prefabs/Desktop.tsx
var import_react9 = require("react");
var import__2 = require("98.css");
var import_jsx_runtime9 = require("react/jsx-runtime");
var Desktop = (0, import_react9.forwardRef)(
  ({ as: Component = "div", titleBarProps, windowProps, windowBodyProps, className, children, ...props }, ref) => {
    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Component, { ref, className: `desktop ${className}`, ...props, children: [
      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TitleBar, { ...titleBarProps }),
      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Window, { ...windowProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WindowBody, { ...windowBodyProps, children }) })
    ] });
  }
);
Desktop.displayName = "Desktop";

// src/components/treeView/TreeView.tsx
var import_react10 = __toESM(require("react"));
var import_jsx_runtime10 = require("react/jsx-runtime");
var TreeView = import_react10.default.forwardRef(
  ({ as: Component = "ul", items, ...props }, ref) => {
    const renderTree = (treeItems) => {
      return treeItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: item.items ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("details", { open: true, children: [
        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("summary", { children: item.label }),
        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { className: "tree-view", children: renderTree(item.items) })
      ] }) : item.label }, index));
    };
    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { ref, ...props, className: "tree-view", children: renderTree(items) });
  }
);
TreeView.displayName = "TreeView";

// src/components/progress/Progress.tsx
var import_react11 = require("react");
var import__3 = require("98.css");
var import_jsx_runtime11 = require("react/jsx-runtime");
var Progress = (0, import_react11.forwardRef)(
  ({ variant = "", value = 0, ...props }, ref) => {
    const width = Math.max(0, Math.min(100, Number(value)));
    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `progress-indicator${variant ? ` ${variant}` : ""}`, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "progress-indicator-bar", style: { width: `${width}%` } }) });
  }
);
Progress.displayName = "Progress";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Button,
  CheckBox,
  Desktop,
  Dropdown,
  Progress,
  Slider,
  TextBox,
  TitleBar,
  TreeView,
  Window,
  WindowBody
});