@react95/core 8.0.0-alpha.9 → 8.0.1

package/README.md

@@ -12,60 +12,36 @@ React95 will be available via either npm and yarn.
 npm install @react95/core
 # or
 yarn add @react95/core
+# or
+pnpm add @react95/core
 ```
 
-You'll also need to add the [`@react95/icons/icons.css`](../icons) file
-
 ## Usage
 
-After installation, you can use any React95 component in your React application:
+The easiest way to check how the React95 components work altogether is by
+checking [the StackBlitz starter](https://stackblitz.com/edit/react95-vite-starter).
 
-```js
-import { Button, ThemeProvider } from '@react95/core';
-import '@react95/icons/icons.css';
+For a better look and usage of React95, we strongly recommend you choose and
+import a theme in your app. Optionally, you can add the GlobalStyle to style
+fonts, scrollbars, and links.
 
-const MyApp = () => (
-  <ThemeProvider>
-    <Button>Click me!</Button>
-  </ThemeProvider>
-);
+```js
+import '@react95/core/GlobalStyle';
+import '@react95/core/themes/win95.css';
 ```
 
-## Typescript
+After setting, you can use any React95 component in your React application:
 
-React95 has built-in TS support!
-
-make sure to install the types properly for `styled-components` and `xstyled`
+```js
+import { Button } from '@react95/core';
 
-```shell
-npm install @types/styled-components @types/xstyled__styled-components
-# or
-yarn add @types/styled-components @types/xstyled__styled-components
+export const MyApp = () => {
+  return <Button>Click me!</Button>;
+};
 ```
 
-You can find a list of all available components at our [Storybook](https://react95.github.io/React95/)
+You can find a list of all available components on our [Storybook page](https://react95.github.io/React95/)
 
 ### Next.JS
 
-If you want to use React95 on a NextJS project, you will need to do the follow
-steps:
-
-- Add `next-transpile-modules` and `next-fonts` dependencies:
-
-```
-  npm install --save-dev next-transpile-modules next-fonts
-  // or
-  yarn add next-transpile-modules next-fonts
-```
-
-- Edit your `next.config.js` file to something like:
-
-```javascript
-const withFonts = require('next-fonts');
-const withTM = require('next-transpile-modules')([
-  '@react95/core',
-  '@react95/icons',
-]);
-
-module.exports = withTM(withFonts());
-```
+If you want to use React95 on a NextJS project, check the [NextJS template](https://github.com/React95/nextjs-template)

package/cjs/Avatar/Avatar.cjs

@@ -3,24 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const Avatar_css = require("./Avatar.css.cjs");
 const Frame = require("../Frame/Frame.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const Avatar = React__namespace.forwardRef(
-  ({ src, srcSet, alt, circle, children, size = "48px", ...otherProps }, ref) => /* @__PURE__ */ React__namespace.createElement(Frame.Frame, { className: Avatar_css.avatar({ circle }), ref, ...otherProps, size }, src || srcSet ? /* @__PURE__ */ React__namespace.createElement("img", { className: Avatar_css.imgStyle, src, srcSet, alt }) : children)
+const Avatar = React.forwardRef(
+  ({ src, srcSet, alt, circle, children, size = "48px", ...otherProps }, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { className: Avatar_css.avatar({ circle }), ref, ...otherProps, size }, src || srcSet ? /* @__PURE__ */ React.createElement("img", { className: Avatar_css.imgStyle, src, srcSet, alt }) : children)
 );
 exports.Avatar = Avatar;

package/cjs/Button/Button.cjs

@@ -4,7 +4,7 @@ const React = require("react");
 const cn = require("classnames");
 const Button_css = require("./Button.css.cjs");
 const Frame = require("../Frame/Frame.cjs");
-const Button = React.forwardRef(
+const Button = Frame.fixedForwardRef(
   (props, ref) => {
     return /* @__PURE__ */ React.createElement(
       Frame.Frame,

package/cjs/Fieldset/Fieldset.cjs

@@ -4,6 +4,6 @@ const React = require("react");
 const Fieldset_css = require("./Fieldset.css.cjs");
 const Frame = require("../Frame/Frame.cjs");
 const Fieldset = React.forwardRef(
-  ({ legend, children, ...rest }, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { as: "fieldset", ...rest, ref, className: Fieldset_css.field }, legend && /* @__PURE__ */ React.createElement("legend", { className: Fieldset_css.legend }, legend), children)
+  ({ legend, children, ...rest }, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, as: "fieldset", ref, className: Fieldset_css.field }, legend && /* @__PURE__ */ React.createElement("legend", { className: Fieldset_css.legend }, legend), children)
 );
 exports.Fieldset = Fieldset;

package/cjs/Frame/Frame.cjs

@@ -21,3 +21,4 @@ const FrameComponent = (props, ref) => {
 };
 const Frame = fixedForwardRef(FrameComponent);
 exports.Frame = Frame;
+exports.fixedForwardRef = fixedForwardRef;

package/cjs/Input/Input.cjs

@@ -3,24 +3,5 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const Frame = require("../Frame/Frame.cjs");
 const Input_css = require("./Input.css.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const Input = React__namespace.forwardRef(
-  (rest, ref) => /* @__PURE__ */ React__namespace.createElement(Frame.Frame, { ...rest, ref, className: Input_css.input, as: "input" })
-);
+const Input = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: Input_css.input, as: "input" }));
 exports.Input = Input;

package/cjs/List/List.cjs

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const cn = require("classnames");
 const ListItem = require("./ListItem.cjs");
 const ListDivider = require("./ListDivider.cjs");
 const Frame = require("../Frame/Frame.cjs");
-const React = require("react");
 const List_css = require("./List.css.cjs");
-const cn = require("classnames");
-const ListRenderer = React.forwardRef(
-  (rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: cn(List_css.list, rest.className), as: "ul" })
-);
+const ListRenderer = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: cn(List_css.list, rest.className), as: "ul" }));
 const List = Object.assign(ListRenderer, {
   Item: ListItem.ListItem,
   Divider: ListDivider.Divider

package/cjs/List/ListDivider.cjs

@@ -4,16 +4,6 @@ const React = require("react");
 const Frame = require("../Frame/Frame.cjs");
 const List_css = require("./List.css.cjs");
 const cn = require("classnames");
-const Divider = React.forwardRef(
-  (rest, ref) => /* @__PURE__ */ React.createElement(
-    Frame.Frame,
-    {
-      ...rest,
-      ref,
-      className: cn(List_css.divider, rest.className),
-      as: "li"
-    }
-  )
-);
+const Divider = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: cn(List_css.divider, rest.className), as: "li" }));
 Divider.displayName = "List.Divider";
 exports.Divider = Divider;

package/cjs/Modal/Modal.cjs

@@ -9,23 +9,6 @@ const Modal_css = require("./Modal.css.cjs");
 const Frame = require("../Frame/Frame.cjs");
 const close = require("./close.svg.cjs");
 const help = require("./help.svg.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const ModalRenderer = ({
   hasWindowButton: hasButton = true,
   buttons = [],
@@ -49,11 +32,11 @@ const ModalRenderer = ({
     updateWindow,
     setActiveWindow,
     activeWindow
-  } = React__namespace.useContext(ModalContext.ModalContext);
-  const [id, setId] = React__namespace.useState(null);
-  const [menuOpened, setMenuOpened] = React__namespace.useState("");
-  const [isActive, setIsActive] = React__namespace.useState(false);
-  React__namespace.useEffect(() => {
+  } = React.useContext(ModalContext.ModalContext);
+  const [id, setId] = React.useState(null);
+  const [menuOpened, setMenuOpened] = React.useState("");
+  const [isActive, setIsActive] = React.useState(false);
+  React.useEffect(() => {
     if (!id) {
       const newId = addWindows({ icon, title, hasButton });
       if (newId) {
@@ -64,15 +47,15 @@ const ModalRenderer = ({
       updateWindow(id, { icon, title, hasButton });
     }
   }, [id, icon, title, hasButton]);
-  React__namespace.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       if (id) {
         removeWindow(id);
       }
     };
   }, [id]);
-  React__namespace.useEffect(() => setIsActive(id === activeWindow), [id, activeWindow]);
-  return /* @__PURE__ */ React__namespace.createElement(
+  React.useEffect(() => setIsActive(id === activeWindow), [id, activeWindow]);
+  return /* @__PURE__ */ React.createElement(
     Draggable,
     {
       handle: ".draggable",
@@ -80,7 +63,7 @@ const ModalRenderer = ({
       positionOffset,
       onMouseDown: id ? () => setActiveWindow(id) : void 0
     },
-    /* @__PURE__ */ React__namespace.createElement(
+    /* @__PURE__ */ React.createElement(
       Frame.Frame,
       {
         ...rest,
@@ -89,7 +72,7 @@ const ModalRenderer = ({
         className: Modal_css.modalWrapper({ active: isActive }),
         ref
       },
-      /* @__PURE__ */ React__namespace.createElement(
+      /* @__PURE__ */ React.createElement(
         TitleBar.TitleBar,
         {
           active: isActive,
@@ -97,11 +80,11 @@ const ModalRenderer = ({
           title,
           className: "draggable"
         },
-        /* @__PURE__ */ React__namespace.createElement(TitleBar.TitleBar.OptionsBox, null, onHelp && /* @__PURE__ */ React__namespace.createElement(TitleBar.TitleBar.Option, null, /* @__PURE__ */ React__namespace.createElement("img", { src: help, alt: "help", onClick: onHelp })), /* @__PURE__ */ React__namespace.createElement(TitleBar.TitleBar.Option, { onClick: onClose }, /* @__PURE__ */ React__namespace.createElement("img", { src: close, alt: "close" })))
+        /* @__PURE__ */ React.createElement(TitleBar.TitleBar.OptionsBox, null, onHelp && /* @__PURE__ */ React.createElement(TitleBar.TitleBar.Option, null, /* @__PURE__ */ React.createElement("img", { src: help, alt: "help", onClick: onHelp })), /* @__PURE__ */ React.createElement(TitleBar.TitleBar.Option, { onClick: onClose }, /* @__PURE__ */ React.createElement("img", { src: close, alt: "close" })))
       ),
-      menu && menu.length > 0 && /* @__PURE__ */ React__namespace.createElement("ul", { className: Modal_css.menuWrapper }, menu.map(({ name, list }) => {
+      menu && menu.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: Modal_css.menuWrapper }, menu.map(({ name, list }) => {
         const active = menuOpened === name;
-        return /* @__PURE__ */ React__namespace.createElement(
+        return /* @__PURE__ */ React.createElement(
           "li",
           {
             key: name,
@@ -112,14 +95,14 @@ const ModalRenderer = ({
           active && list
         );
       })),
-      /* @__PURE__ */ React__namespace.createElement("div", { className: Modal_css.content, onClick: () => setMenuOpened("") }, children),
-      buttons && buttons.length > 0 && /* @__PURE__ */ React__namespace.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: Modal_css.content, onClick: () => setMenuOpened("") }, children),
+      buttons && buttons.length > 0 && /* @__PURE__ */ React.createElement(
         Frame.Frame,
         {
           className: Modal_css.buttonWrapper,
           justifyContent: buttonsAlignment
         },
-        buttons.map((button) => /* @__PURE__ */ React__namespace.createElement(
+        buttons.map((button) => /* @__PURE__ */ React.createElement(
           Button.Button,
           {
             key: button.value,
@@ -132,9 +115,7 @@ const ModalRenderer = ({
     )
   );
 };
-const Modal = React__namespace.forwardRef(
-  ModalRenderer
-);
+const Modal = React.forwardRef(ModalRenderer);
 Modal.displayName = "Modal";
 Modal.defaultProps = {
   icon: void 0,

package/cjs/Modal/ModalProvider.cjs

@@ -3,23 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const nanoid = require("nanoid");
 const React = require("react");
 const ModalContext = require("./ModalContext.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const windowStackReducer = (state, action) => {
   const newWindows = { ...state };
   switch (action.type) {
@@ -39,9 +22,11 @@ const windowStackReducer = (state, action) => {
       return state;
   }
 };
-const ModalProvider = ({ children }) => {
-  const [windows, dispatch] = React__namespace.useReducer(windowStackReducer, {});
-  const [activeWindow, setActiveWindow] = React__namespace.useState();
+const ModalProvider = ({
+  children
+}) => {
+  const [windows, dispatch] = React.useReducer(windowStackReducer, {});
+  const [activeWindow, setActiveWindow] = React.useState();
   const addWindows = (window) => {
     const id = nanoid.nanoid();
     dispatch({ type: "ADD_WINDOW", id, window });
@@ -53,7 +38,7 @@ const ModalProvider = ({ children }) => {
   const updateWindow = (id, window) => {
     dispatch({ type: "UPDATE_WINDOW", id, window });
   };
-  return /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React.createElement(
     ModalContext.ModalContext.Provider,
     {
       value: {

package/cjs/Range/Range.cjs

@@ -4,33 +4,14 @@ const React = require("react");
 const Frame = require("../Frame/Frame.cjs");
 const Range_css = require("./Range.css.cjs");
 const cn = require("classnames");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
+const Range = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(
+  Frame.Frame,
+  {
+    ...rest,
+    ref,
+    className: cn(Range_css.range, rest.className),
+    as: "input",
+    type: "range"
   }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const Range = React__namespace.forwardRef(
-  (rest, ref) => /* @__PURE__ */ React__namespace.createElement(
-    Frame.Frame,
-    {
-      ...rest,
-      ref,
-      className: cn(Range_css.range, rest.className),
-      as: "input",
-      type: "range"
-    }
-  )
-);
+));
 exports.Range = Range;

package/cjs/Tabs/Tabs.cjs

@@ -19,28 +19,25 @@ const Tabs = React.forwardRef(
         as: "ol",
         ref
       },
-      React.Children.map(
-        children,
-        (child) => {
-          const { title, disabled } = child.props;
-          return /* @__PURE__ */ React.createElement(
-            Tab.Tab,
-            {
-              key: title,
-              ...child.props,
-              activeTab,
-              onClick: (e) => {
-                if (!disabled) {
-                  if (onChange) {
-                    onChange(title, e);
-                  }
-                  setActiveTab(title);
+      React.Children.map(children, (child) => {
+        const { title, disabled } = child.props;
+        return /* @__PURE__ */ React.createElement(
+          Tab.Tab,
+          {
+            key: title,
+            ...child.props,
+            activeTab,
+            onClick: (e) => {
+              if (!disabled) {
+                if (onChange) {
+                  onChange(title, e);
                 }
+                setActiveTab(title);
               }
             }
-          );
-        }
-      )
+          }
+        );
+      })
     ), /* @__PURE__ */ React.createElement(Frame.Frame, { className: Tabs_css.navContainer, width: rest.width || rest.w }, React.Children.map(
       children,
       (child) => child.props.title === activeTab && child.props.children

package/cjs/TextArea/TextArea.cjs

@@ -3,24 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const Frame = require("../Frame/Frame.cjs");
 const Input_css = require("../Input/Input.css.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const TextArea = React__namespace.forwardRef(
-  (rest, ref) => /* @__PURE__ */ React__namespace.createElement(Frame.Frame, { ...rest, ref, className: Input_css.input, as: "textarea" })
+const TextArea = React.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: Input_css.input, as: "textarea" })
 );
 exports.TextArea = TextArea;

package/cjs/TitleBar/TitleBar.cjs

@@ -5,14 +5,16 @@ const Frame = require("../Frame/Frame.cjs");
 const TitleBar_css = require("./TitleBar.css.cjs");
 const Button_css = require("../Button/Button.css.cjs");
 const cn = require("classnames");
-const OptionsBox = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(
-  Frame.Frame,
-  {
-    ...rest,
-    ref,
-    className: cn(TitleBar_css.optionsBox, rest.className)
-  }
-));
+const OptionsBox = React.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(
+    Frame.Frame,
+    {
+      ...rest,
+      ref,
+      className: cn(TitleBar_css.optionsBox, rest.className)
+    }
+  )
+);
 const Option = React.forwardRef(
   (rest, ref) => /* @__PURE__ */ React.createElement(
     Frame.Frame,

package/cjs/Tooltip/Tooltip.cjs

@@ -1,25 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Tooltip_css = require("./Tooltip.css.cjs");
 const cn = require("classnames");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Tooltip_css = require("./Tooltip.css.cjs");
 function formatDate(date) {
   const monthNames = [
     "January",
@@ -46,8 +29,8 @@ const TooltipRenderer = ({
   delay = 1e3,
   ...rest
 }, ref) => {
-  const [show, setShow] = React__namespace.useState(false);
-  const [delayTimer, setDelayTimer] = React__namespace.useState(0);
+  const [show, setShow] = React.useState(false);
+  const [delayTimer, setDelayTimer] = React.useState(0);
   const handleEnter = () => {
     const timer = window.setTimeout(() => {
       setShow(true);
@@ -58,7 +41,7 @@ const TooltipRenderer = ({
     clearTimeout(delayTimer);
     setShow(false);
   };
-  return /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...rest,
@@ -67,11 +50,11 @@ const TooltipRenderer = ({
       onMouseLeave: handleLeave,
       ref
     },
-    show && /* @__PURE__ */ React__namespace.createElement("div", { className: Tooltip_css.tip }, text),
+    show && /* @__PURE__ */ React.createElement("div", { className: Tooltip_css.tip }, text),
     children
   );
 };
-const Tooltip = React__namespace.forwardRef(
+const Tooltip = React.forwardRef(
   TooltipRenderer
 );
 exports.Tooltip = Tooltip;