@react95/core 8.0.0-alpha.0 → 8.0.0-alpha.10

package/esm/Range/Range.css.ts.vanilla.css

@@ -0,0 +1,84 @@
+.r95_1i4w9z20 {
+  appearance: none;
+  width: 100%;
+}
+.r95_1i4w9z20::hover,.r95_1i4w9z20::focus,.r95_1i4w9z20::active {
+  outline: none;
+}
+.r95_1i4w9z20::-webkit-slider-runnable-track {
+  width: 100%;
+  height: var(--r95-space-4);
+  background-color: var(--r95-color-borderDarkest);
+  cursor: pointer;
+  border-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderLight);
+  border-right-width: var(--r95-space-2);
+  border-right-color: var(--r95-color-borderLightest);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-color: var(--r95-color-borderLighter);
+  border-left-width: var(--r95-space-2);
+  border-left-color: var(--r95-color-borderLightest);
+  box-shadow: 0px 1px 0px 0px var(--r95-color-borderLightest);
+}
+.r95_1i4w9z20::-moz-range-track {
+  width: 100%;
+  height: var(--r95-space-4);
+  background-color: var(--r95-color-borderDarkest);
+  cursor: pointer;
+  border-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderLight);
+  border-right-width: var(--r95-space-2);
+  border-right-color: var(--r95-color-borderLightest);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-color: var(--r95-color-borderLighter);
+  border-left-width: var(--r95-space-2);
+  border-left-color: var(--r95-color-borderLightest);
+  box-shadow: 0px 1px 0px 0px var(--r95-color-borderLightest);
+}
+.r95_1i4w9z20::-webkit-slider-thumb {
+  width: var(--r95-space-12);
+  height: var(--r95-space-20);
+  background-color: var(--r95-color-material);
+  cursor: pointer;
+  margin-top: calc(var(--r95-space-8) * -1);
+  border-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderLightest);
+  border-right-width: var(--r95-space-1);
+  border-right-color: var(--r95-color-borderDarkest);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-color: var(--r95-color-borderDarkest);
+  border-left-width: var(--r95-space-1);
+  border-left-color: var(--r95-color-borderLightest);
+  box-shadow: inset 0px -1px 0px var(--r95-color-borderDark),
+  inset -1px 0px 0px var(--r95-color-borderDark),
+  inset 0px 1px 0px var(--r95-color-borderLighter),
+  inset 1px 0px 0px var(--r95-color-borderLighter);
+  appearance: none;
+}
+.r95_1i4w9z20::-moz-range-thumb {
+  width: var(--r95-space-12);
+  height: var(--r95-space-20);
+  background-color: var(--r95-color-material);
+  cursor: pointer;
+  margin-top: calc(var(--r95-space-8) * -1);
+  border-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderLightest);
+  border-right-width: var(--r95-space-1);
+  border-right-color: var(--r95-color-borderDarkest);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-color: var(--r95-color-borderDarkest);
+  border-left-width: var(--r95-space-1);
+  border-left-color: var(--r95-color-borderLightest);
+  box-shadow: inset 0px -1px 0px var(--r95-color-borderDark),
+  inset -1px 0px 0px var(--r95-color-borderDark),
+  inset 0px 1px 0px var(--r95-color-borderLighter),
+  inset 1px 0px 0px var(--r95-color-borderLighter);
+  appearance: none;
+}
+.r95_1i4w9z20:focus::-webkit-slider-runnable-track {
+  background-color: var(--r95-color-borderDarkest);
+}

package/esm/Range/Range.mjs

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Frame } from "../Frame/Frame.mjs";
+import { range } from "./Range.css.mjs";
+import cn from "classnames";
+const Range = React.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(
+    Frame,
+    {
+      ...rest,
+      ref,
+      className: cn(range, rest.className),
+      as: "input",
+      type: "range"
+    }
+  )
+);
+export {
+  Range
+};

package/esm/Tabs/Tab.mjs

@@ -0,0 +1,18 @@
+import React__default, { forwardRef } from "react";
+import { tab } from "./Tabs.css.mjs";
+import { Frame } from "../Frame/Frame.mjs";
+const Tab = forwardRef(
+  ({ activeTab, title, ...rest }, ref) => /* @__PURE__ */ React__default.createElement(
+    Frame,
+    {
+      ...rest,
+      className: tab({ active: activeTab === title }),
+      ref,
+      as: "li"
+    },
+    title
+  )
+);
+export {
+  Tab
+};

package/esm/Tabs/Tabs.css.mjs

@@ -0,0 +1,10 @@
+import './Tabs.css.ts.vanilla.css';
+/* empty css                          */import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var navContainer = "r95_fyllcd1";
+var navbar = "r95_fyllcd0";
+var tab = createRuntimeFn({ defaultClassName: "r95_fyllcd2", variantClassNames: { active: { true: "r95_fyllcd3" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  navContainer,
+  navbar,
+  tab
+};

package/esm/Tabs/Tabs.css.ts.vanilla.css

@@ -0,0 +1,54 @@
+.r95_fyllcd0 {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  border: none;
+  z-index: 1;
+}
+.r95_fyllcd1 {
+  padding: var(--r95-space-12);
+  box-shadow: var(--r95-shadow-out);
+  background-color: var(--r95-color-material);
+}
+.r95_fyllcd2 {
+  list-style: none;
+  user-select: none;
+  padding-block: var(--r95-space-3);
+  padding-inline: var(--r95-space-6);
+  background-color: var(--r95-color-material);
+  margin-right: var(--r95-space-2);
+  margin-left: var(--r95-space-2);
+  box-shadow: inset 0 1px 0 0 var(--r95-color-borderLightest),
+      -2px 1px 0 -1px var(--r95-color-material),
+      -3px 1px 0 -1px var(--r95-color-borderLightest),
+      -2px 0 0 -1px var(--r95-color-borderLightest),
+      2px 1px 0 -1px var(--r95-color-borderDark),
+      2px 0 0 -1px var(--r95-color-borderDarkest),
+      3px 1px 0 -1px var(--r95-color-borderDarkest);
+}
+.r95_fyllcd2:first-child {
+  margin-left: var(--r95-space-4);
+}
+.r95_fyllcd3 {
+  margin-top: calc(var(--r95-space-2) * -1);
+  margin-left: calc(var(--r95-space-2) * -1);
+  margin-bottom: var(--r95-space-1);
+  &:first-child {
+    margin-left: var(--r95-space-2);
+  }
+  box-shadow: inset 0 1px 0 0 var(--r95-color-borderLightest),
+        -2px 1px 0 -1px var(--r95-color-material),
+        -0.5px 3px 0 0.5px var(--r95-color-material),
+        -2px 2px 0 0 var(--r95-color-borderLightest),
+        -2px 0 0 -1px var(--r95-color-borderLightest),
+        1px 2px 0 0 var(--r95-color-borderDark),
+        2px 0 0 -1px var(--r95-color-borderDarkest),
+        2px 2px 0 0 var(--r95-color-borderDarkest);
+}
+.r95_fyllcd3 + li {
+  margin-left: 0;
+  box-shadow: inset 0 1px 0 0 var(--r95-color-borderLightest),
+    2px 1px 0 -1px var(--r95-color-borderDark),
+    2px 0 0 -1px var(--r95-color-borderDarkest),
+    3px 1px 0 -1px var(--r95-color-borderDarkest);
+}

package/esm/Tabs/Tabs.mjs

@@ -0,0 +1,50 @@
+import React__default, { forwardRef } from "react";
+import cn from "classnames";
+import { Tab } from "./Tab.mjs";
+import { navbar, navContainer } from "./Tabs.css.mjs";
+import { Frame } from "../Frame/Frame.mjs";
+const Tabs = forwardRef(
+  ({ children, defaultActiveTab, onChange, ...rest }, ref) => {
+    const [firstTab] = React__default.Children.toArray(children);
+    const [activeTab, setActiveTab] = React__default.useState(
+      defaultActiveTab || firstTab.props.title
+    );
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      Frame,
+      {
+        ...rest,
+        className: cn(navbar, rest.className),
+        as: "ol",
+        ref
+      },
+      React__default.Children.map(
+        children,
+        (child) => {
+          const { title, disabled } = child.props;
+          return /* @__PURE__ */ React__default.createElement(
+            Tab,
+            {
+              key: title,
+              ...child.props,
+              activeTab,
+              onClick: (e) => {
+                if (!disabled) {
+                  if (onChange) {
+                    onChange(title, e);
+                  }
+                  setActiveTab(title);
+                }
+              }
+            }
+          );
+        }
+      )
+    ), /* @__PURE__ */ React__default.createElement(Frame, { className: navContainer, width: rest.width || rest.w }, React__default.Children.map(
+      children,
+      (child) => child.props.title === activeTab && child.props.children
+    )));
+  }
+);
+export {
+  Tabs
+};

package/esm/TaskBar/Clock.mjs

@@ -0,0 +1,34 @@
+import React__default, { useState, useEffect } from "react";
+import { Frame } from "../Frame/Frame.mjs";
+import { Tooltip } from "../Tooltip/Tooltip.mjs";
+import { tooltip } from "./TaskBar.css.mjs";
+const Clock = () => {
+  const [timer, setTimer] = useState("");
+  useEffect(() => {
+    function checkTime(i) {
+      return i < 10 ? `0${i}` : i;
+    }
+    const interval = setInterval(() => {
+      const today = /* @__PURE__ */ new Date();
+      const h = today.getHours();
+      const m = today.getMinutes();
+      setTimer(`${checkTime(h)}:${checkTime(m)}`);
+    });
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(
+    Frame,
+    {
+      boxShadow: "$in",
+      px: "$6",
+      py: "$2",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React__default.createElement(Tooltip, { className: tooltip }, timer)
+  );
+};
+export {
+  Clock
+};

package/esm/TaskBar/TaskBar.css.mjs

@@ -0,0 +1,12 @@
+import './TaskBar.css.ts.vanilla.css';
+/* empty css                             */import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var icon = "r95_1ct83mo9";
+var tooltip = "r95_1ct83mo1";
+var truncate = "r95_1ct83mo0";
+var windowsButton = createRuntimeFn({ defaultClassName: "r95_1ct83mo2", variantClassNames: { small: { true: "r95_1ct83mo3", false: "r95_1ct83mo4" }, active: { true: "r95_1ct83mo5", false: "r95_1ct83mo6" } }, defaultVariants: {}, compoundVariants: [[{ active: true, small: true }, "r95_1ct83mo7"], [{ active: true, small: false }, "r95_1ct83mo8"]] });
+export {
+  icon,
+  tooltip,
+  truncate,
+  windowsButton
+};

package/esm/TaskBar/TaskBar.css.ts.vanilla.css

@@ -0,0 +1,52 @@
+.r95_1ct83mo0 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-align: left;
+}
+.r95_1ct83mo1 div:first-child {
+  right: 0;
+}
+.r95_1ct83mo2 {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: var(--r95-color-material);
+  padding-block: var(--r95-space-2);
+  padding-inline: var(--r95-space-3);
+  margin-right: var(--r95-space-2);
+  max-width: 150px;
+  border: none;
+  outline: none;
+  color: var(--r95-color-materialText);
+}
+.r95_1ct83mo3 {
+  padding-inline: var(--r95-space-5);
+}
+.r95_1ct83mo4 {
+  width: 100%;
+}
+.r95_1ct83mo5 {
+  box-shadow: var(--r95-shadow-in);
+}
+.r95_1ct83mo6 {
+  box-shadow: var(--r95-shadow-out);
+}
+.r95_1ct83mo7 {
+  padding-top: var(--r95-space-4);
+  padding-bottom: var(--r95-space-0);
+  outline: var(--r95-space-1) dotted var(--r95-color-borderDarkest);
+  outline-offset: calc(var(--r95-space-4) * -1);
+}
+.r95_1ct83mo8 {
+  background-color: var(--r95-color-borderLighter);
+}
+.r95_1ct83mo9 svg {
+  margin-top: var(--r95-space-4);
+  margin-right: var(--r95-space-4);
+  min-width: var(--r95-space-2);
+  width: var(--r95-space-20);
+  height: var(--r95-space-20);
+  shape-rendering: auto;
+}

package/esm/TaskBar/TaskBar.mjs

@@ -0,0 +1,74 @@
+import React__default, { forwardRef, useState, useContext } from "react";
+import { ModalContext } from "../Modal/ModalContext.mjs";
+import { Frame } from "../Frame/Frame.mjs";
+import { Clock } from "./Clock.mjs";
+import { WindowButton } from "./WindowButton.mjs";
+import { Logo } from "@react95/icons";
+import { truncate } from "./TaskBar.css.mjs";
+const TaskBar = forwardRef(
+  ({ list }, ref) => {
+    const [showList, toggleShowList] = useState(false);
+    const [activeStart, toggleActiveStart] = useState(false);
+    const { windows, activeWindow, setActiveWindow } = useContext(ModalContext);
+    return /* @__PURE__ */ React__default.createElement(
+      Frame,
+      {
+        position: "fixed",
+        bottom: "0px",
+        left: "0px",
+        right: "0px",
+        display: "flex",
+        justifyContent: "space-between",
+        h: "28px",
+        w: "100%",
+        padding: "$2",
+        zIndex: "$taskbar",
+        backgroundColor: "$material",
+        boxShadow: "$out",
+        ref
+      },
+      showList && /* @__PURE__ */ React__default.createElement(
+        Frame,
+        {
+          position: "absolute",
+          bottom: "28px",
+          onClick: () => {
+            toggleActiveStart(false);
+            toggleShowList(false);
+          }
+        },
+        list
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        WindowButton,
+        {
+          small: true,
+          icon: /* @__PURE__ */ React__default.createElement(Logo, { variant: "32x32_4" }),
+          active: activeStart,
+          onClick: () => {
+            toggleActiveStart(!activeStart);
+            toggleShowList(!showList);
+          }
+        },
+        "Start"
+      ),
+      /* @__PURE__ */ React__default.createElement(Frame, { w: "100%", paddingLeft: "$0", ml: "$2", display: "flex" }, Object.entries(windows).map(
+        ([windowId, { icon, title, hasButton }]) => hasButton && /* @__PURE__ */ React__default.createElement(
+          WindowButton,
+          {
+            key: windowId,
+            icon,
+            active: windowId === activeWindow,
+            onClick: () => setActiveWindow(windowId),
+            small: false
+          },
+          /* @__PURE__ */ React__default.createElement("div", { className: truncate }, title)
+        )
+      )),
+      /* @__PURE__ */ React__default.createElement(Clock, null)
+    );
+  }
+);
+export {
+  TaskBar
+};

package/esm/TaskBar/WindowButton.mjs

@@ -0,0 +1,17 @@
+import React__default, { forwardRef } from "react";
+import { windowsButton, icon } from "./TaskBar.css.mjs";
+const WindowButton = forwardRef(
+  ({ children, small = false, icon: icon$1, active = false, ...props }, ref) => /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: windowsButton({ active, small }),
+      ...props,
+      ref
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: icon }, icon$1),
+    children
+  )
+);
+export {
+  WindowButton
+};

package/esm/TextArea/TextArea.mjs

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Frame } from "../Frame/Frame.mjs";
+import { input } from "../Input/Input.css.mjs";
+const TextArea = React.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(Frame, { ...rest, ref, className: input, as: "textarea" })
+);
+export {
+  TextArea
+};

package/esm/TitleBar/TitleBar.css.mjs

@@ -0,0 +1,12 @@
+import './TitleBar.css.ts.vanilla.css';
+/* empty css                              */import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var option = "r95_1kpzw681";
+var optionsBox = "r95_1kpzw680";
+var title = "r95_1kpzw685";
+var titleBarBackground = createRuntimeFn({ defaultClassName: "r95_1kpzw682", variantClassNames: { active: { true: "r95_1kpzw683", false: "r95_1kpzw684" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  option,
+  optionsBox,
+  title,
+  titleBarBackground
+};

package/esm/TitleBar/TitleBar.css.ts.vanilla.css

@@ -0,0 +1,62 @@
+.r95_1kpzw680 {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+.r95_1kpzw681 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--r95-space-2);
+  padding: var(--r95-space-0);
+  width: var(--r95-space-17);
+  height: var(--r95-space-14);
+  min-width: var(--r95-space-0);
+  font-weight: 600;
+  font-size: 10px;
+}
+.r95_1kpzw681:active {
+  padding-top: var(--r95-space-1);
+  padding-right: var(--r95-space-0);
+  padding-bottom: var(--r95-space-0);
+  padding-left: var(--r95-space-1);
+  outline: none;
+}
+.r95_1kpzw681:first-child {
+  margin-right: var(--r95-space-0);
+}
+.r95_1kpzw681:focus {
+  box-shadow: inset 1px 1px 0px 1px var(--r95-color-borderLightest),
+        inset -1px -1px 0px 1px var(--r95-color-borderDark);
+}
+.r95_1kpzw682 {
+  height: var(--r95-space-20);
+  margin-bottom: var(--r95-space-2);
+  padding: var(--r95-space-2);
+  display: flex;
+  box-shadow: none;
+  user-select: none;
+}
+.r95_1kpzw683 {
+  background: var(--r95-color-headerBackground);
+  color: var(--r95-color-headerText);
+}
+.r95_1kpzw684 {
+  background: var(--r95-color-headerNotActiveBackground);
+  color: var(--r95-color-headerNotActiveText);
+}
+.r95_1kpzw682 svg {
+  width: var(--r95-space-16);
+  height: var(--r95-space-16);
+  margin-right: var(--r95-space-4);
+}
+.r95_1kpzw685 {
+  flex-grow: 1;
+  line-height: 1.4em;
+  margin: 0;
+  font-size: 1em;
+  text-shadow: 0.5px 0px white, 1.5px 0px white;
+  color: transparent;
+  letter-spacing: 1px;
+}

package/esm/TitleBar/TitleBar.mjs

@@ -0,0 +1,45 @@
+import React__default from "react";
+import { Frame } from "../Frame/Frame.mjs";
+import { optionsBox, option, titleBarBackground, title } from "./TitleBar.css.mjs";
+import { button } from "../Button/Button.css.mjs";
+import cn from "classnames";
+const OptionsBox = React__default.forwardRef((rest, ref) => /* @__PURE__ */ React__default.createElement(
+  Frame,
+  {
+    ...rest,
+    ref,
+    className: cn(optionsBox, rest.className)
+  }
+));
+const Option = React__default.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React__default.createElement(
+    Frame,
+    {
+      ...rest,
+      ref,
+      as: "button",
+      className: cn(button, option, rest.className)
+    }
+  )
+);
+const TitleBarRenderer = ({ children, title: title$1 = "UNKNOWN.EXE", icon, active = true, ...rest }, ref) => /* @__PURE__ */ React__default.createElement(
+  Frame,
+  {
+    ...rest,
+    className: cn(titleBarBackground({ active }), rest.className),
+    ref
+  },
+  icon && icon,
+  /* @__PURE__ */ React__default.createElement("div", { className: title }, title$1),
+  children
+);
+const TitleBar = Object.assign(
+  React__default.forwardRef(TitleBarRenderer),
+  {
+    Option,
+    OptionsBox
+  }
+);
+export {
+  TitleBar
+};

package/esm/Tooltip/Tooltip.css.mjs

@@ -0,0 +1,7 @@
+import './Tooltip.css.ts.vanilla.css';
+/* empty css                             */var tip = "r95_f5whxn0";
+var wrapper = "r95_f5whxn1";
+export {
+  tip,
+  wrapper
+};

package/esm/Tooltip/Tooltip.css.ts.vanilla.css

@@ -0,0 +1,25 @@
+.r95_f5whxn0 {
+  background: radial-gradient(#ff0 20%, transparent 20%) 0 0,
+     radial-gradient(#ff0 20%, transparent 20%) 4px 4px,
+     radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 0 1px,
+     radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 3px 4px;
+  background-size: var(--r95-space-7) var(--r95-space-7);
+  background-color: var(--r95-color-borderLightest);
+  border-width: var(--r95-space-1);
+  border-style: solid;
+  padding-top: var(--r95-space-2);
+  padding-right: var(--r95-space-2);
+  padding-bottom: var(--r95-space-2);
+  padding-left: var(--r95-space-4);
+  box-shadow: none;
+  position: absolute;
+  top: calc(var(--r95-space-20) * -1);
+  text-align: center;
+  z-index: var(--r95-zIndex-taskbar);
+}
+.r95_f5whxn1 {
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  white-space: nowrap;
+}

package/esm/Tooltip/Tooltip.mjs

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { wrapper, tip } from "./Tooltip.css.mjs";
+import cn from "classnames";
+function formatDate(date) {
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  const day = date.getDate();
+  const monthIndex = date.getMonth();
+  const year = date.getFullYear();
+  return `${day.toString().padStart(2, "0")} ${monthNames[monthIndex]} ${year}`;
+}
+const TooltipRenderer = ({
+  children,
+  text = formatDate(/* @__PURE__ */ new Date()),
+  delay = 1e3,
+  ...rest
+}, ref) => {
+  const [show, setShow] = React.useState(false);
+  const [delayTimer, setDelayTimer] = React.useState(0);
+  const handleEnter = () => {
+    const timer = window.setTimeout(() => {
+      setShow(true);
+    }, delay);
+    setDelayTimer(timer);
+  };
+  const handleLeave = () => {
+    clearTimeout(delayTimer);
+    setShow(false);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: cn(wrapper, rest.className),
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
+      ref
+    },
+    show && /* @__PURE__ */ React.createElement("div", { className: tip }, text),
+    children
+  );
+};
+const Tooltip = React.forwardRef(
+  TooltipRenderer
+);
+export {
+  Tooltip
+};