windows-98-ui/dist/index.mjs

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

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

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

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

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

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

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

// src/components/window/windowContainer/windowContainer.tsx
import React6 from "react";
import { jsx as jsx7 } from "react/jsx-runtime";
var Window = React6.forwardRef(
  ({ as: Component = "div", className, children, ...props }, ref) => {
    return /* @__PURE__ */ jsx7(
      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
import React7 from "react";
import { jsx as jsx8 } from "react/jsx-runtime";
var WindowBody = React7.forwardRef(
  ({ as: Component = "div", className, children, ...props }, ref) => {
    return /* @__PURE__ */ jsx8(Component, { ref, className: `window-body ${className}`, ...props, children });
  }
);
WindowBody.displayName = "WindowBody";

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

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

// src/components/progress/Progress.tsx
import { forwardRef as forwardRef3 } from "react";
import "98.css";
import { jsx as jsx11 } from "react/jsx-runtime";
var Progress = forwardRef3(
  ({ variant = "", value = 0, ...props }, ref) => {
    const width = Math.max(0, Math.min(100, Number(value)));
    return /* @__PURE__ */ jsx11("div", { className: `progress-indicator${variant ? ` ${variant}` : ""}`, ...props, ref, children: /* @__PURE__ */ jsx11("span", { className: "progress-indicator-bar", style: { width: `${width}%` } }) });
  }
);
Progress.displayName = "Progress";
export {
  Button,
  CheckBox,
  Desktop,
  Dropdown,
  Progress,
  Slider,
  TextBox,
  TitleBar,
  TreeView,
  Window,
  WindowBody
};