@react95/core 9.2.1 → 9.2.2

package/cjs/Avatar/Avatar.cjs

@@ -3,7 +3,26 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const Avatar_css = require("./Avatar.css.cjs");
 const Frame = require("../Frame/Frame.cjs");
+const cn = require("classnames");
 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)
+  ({
+    src,
+    srcSet,
+    alt,
+    circle,
+    children,
+    size = "48px",
+    className,
+    ...otherProps
+  }, ref) => /* @__PURE__ */ React.createElement(
+    Frame.Frame,
+    {
+      ...otherProps,
+      ref,
+      size,
+      className: cn(Avatar_css.avatar({ circle }), className)
+    },
+    src || srcSet ? /* @__PURE__ */ React.createElement("img", { className: Avatar_css.imgStyle, src, srcSet, alt }) : children
+  )
 );
 exports.Avatar = Avatar;

package/cjs/Checkbox/Checkbox.cjs

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const Checkbox_css = require("./Checkbox.css.cjs");
+const cn = require("classnames");
 const Checkbox = React.forwardRef(
-  ({ children, style, label, disabled = false, ...rest }, ref) => /* @__PURE__ */ React.createElement("label", { style, className: Checkbox_css.label }, /* @__PURE__ */ React.createElement(
+  ({ children, style, label, disabled = false, className, ...rest }, ref) => /* @__PURE__ */ React.createElement("label", { style, className: cn(Checkbox_css.label, className) }, /* @__PURE__ */ React.createElement(
     "input",
     {
       className: Checkbox_css.field,

package/cjs/Fieldset/Fieldset.cjs

@@ -3,7 +3,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const Fieldset_css = require("./Fieldset.css.cjs");
 const Frame = require("../Frame/Frame.cjs");
+const cn = require("classnames");
 const Fieldset = React.forwardRef(
-  ({ 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)
+  ({ legend, children, className, ...rest }, ref) => /* @__PURE__ */ React.createElement(
+    Frame.Frame,
+    {
+      ...rest,
+      as: "fieldset",
+      ref,
+      className: cn(Fieldset_css.field, className)
+    },
+    legend && /* @__PURE__ */ React.createElement("legend", { className: Fieldset_css.legend }, legend),
+    children
+  )
 );
 exports.Fieldset = Fieldset;

package/cjs/GlobalStyle/GlobalStyle.css.cjs

@@ -1,3 +1,4 @@
 require('./GlobalStyle.css.ts.vanilla.css');
 "use strict";
+require("../themes/contract.css.ts.vanilla.css.cjs");
 /* empty css                                   */

package/cjs/Input/Input.cjs

@@ -3,5 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const Frame = require("../Frame/Frame.cjs");
 const Input_css = require("./Input.css.cjs");
-const Input = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: Input_css.input, as: "input" }));
+const cn = require("classnames");
+const Input = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: cn(Input_css.input, rest.className), as: "input" }));
 exports.Input = Input;

package/cjs/RadioButton/RadioButton.cjs

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const RadioButton_css = require("./RadioButton.css.cjs");
+const cn = require("classnames");
 const RadioButton = React.forwardRef(
-  ({ children, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement("label", { className: RadioButton_css.label }, /* @__PURE__ */ React.createElement(
+  ({ children, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement("label", { className: cn(RadioButton_css.label, props.className) }, /* @__PURE__ */ React.createElement(
     "input",
     {
       type: "radio",

package/cjs/Tabs/Tab.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const cn = require("classnames");
 const Tabs_css = require("./Tabs.css.cjs");
 const Frame = require("../Frame/Frame.cjs");
 const Tab = React.forwardRef(
@@ -8,7 +9,7 @@ const Tab = React.forwardRef(
     Frame.Frame,
     {
       ...rest,
-      className: Tabs_css.tab({ active: activeTab === title }),
+      className: cn(Tabs_css.tab({ active: activeTab === title }), rest.className),
       ref,
       as: "li"
     },

package/cjs/TaskBar/TaskBar.cjs

@@ -8,7 +8,7 @@ const icons = require("@react95/icons");
 const TaskBar_css = require("./TaskBar.css.cjs");
 const events = require("../shared/events.cjs");
 const TaskBar = React.forwardRef(
-  ({ list }, ref) => {
+  ({ list, className }, ref) => {
     const [showList, toggleShowList] = React.useState(false);
     const [activeStart, toggleActiveStart] = React.useState(false);
     const [modalWindows, setModalWindows] = React.useState([]);
@@ -58,7 +58,8 @@ const TaskBar = React.forwardRef(
         zIndex: "$taskbar",
         backgroundColor: "$material",
         boxShadow: "$out",
-        ref
+        ref,
+        className
       },
       showList && /* @__PURE__ */ React.createElement(
         Frame.Frame,

package/cjs/TextArea/TextArea.cjs

@@ -1,9 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const cn = require("classnames");
 const Frame = require("../Frame/Frame.cjs");
 const Input_css = require("../Input/Input.css.cjs");
 const TextArea = React.forwardRef(
-  (rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: Input_css.input, as: "textarea" })
+  (rest, ref) => /* @__PURE__ */ React.createElement(
+    Frame.Frame,
+    {
+      ...rest,
+      ref,
+      className: cn(Input_css.input, rest.className),
+      as: "textarea"
+    }
+  )
 );
 exports.TextArea = TextArea;

package/cjs/Tree/Node.cjs

@@ -58,7 +58,7 @@ const Node = ({
       onClickHandler(event);
     }
   };
-  return /* @__PURE__ */ React.createElement(Frame.Frame, { as: "li", ...rest, className: Tree_css.node }, /* @__PURE__ */ React.createElement("div", { className: Tree_css.nodeContent }, hasChildren && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Frame.Frame, { as: "li", ...rest, className: cn(Tree_css.node, rest.className) }, /* @__PURE__ */ React.createElement("div", { className: Tree_css.nodeContent }, hasChildren && /* @__PURE__ */ React.createElement(
     "div",
     {
       className: Tree_css.folderStatus,

package/cjs/Tree/Tree.cjs

@@ -1,16 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const cn = require("classnames");
 const Node = require("./Node.cjs");
 const Tree_css = require("./Tree.css.cjs");
 const Frame = require("../Frame/Frame.cjs");
 const Tree = React.forwardRef(
-  ({ data, root, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, root && /* @__PURE__ */ React.createElement(Node.NodeRoot, { ...root }), /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, className: Tree_css.tree, as: "ul", ref }, data.map((dataNode) => /* @__PURE__ */ React.createElement(Node.Node, { key: dataNode.id, ...dataNode }))));
+  ({ data = [], root, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, root && /* @__PURE__ */ React.createElement(Node.NodeRoot, { ...root }), /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, className: cn(Tree_css.tree, rest.className), as: "ul", ref }, data.map((dataNode) => /* @__PURE__ */ React.createElement(Node.Node, { key: dataNode.id, ...dataNode }))));
   }
 );
-Tree.defaultProps = {
-  data: []
-};
 Tree.icons = Node.icons;
 exports.Tree = Tree;

package/cjs/themes/azureOrange.css.cjs

@@ -1,4 +1,3 @@
 require('./azureOrange.css.ts.vanilla.css');
 "use strict";
-require("./contract.css.ts.vanilla.css.cjs");
 /* empty css                                   */

package/esm/Avatar/Avatar.mjs

@@ -1,8 +1,27 @@
 import React, { forwardRef } from "react";
 import { avatar, imgStyle } from "./Avatar.css.mjs";
 import { Frame } from "../Frame/Frame.mjs";
+import cn from "classnames";
 const Avatar = forwardRef(
-  ({ src, srcSet, alt, circle, children, size = "48px", ...otherProps }, ref) => /* @__PURE__ */ React.createElement(Frame, { className: avatar({ circle }), ref, ...otherProps, size }, src || srcSet ? /* @__PURE__ */ React.createElement("img", { className: imgStyle, src, srcSet, alt }) : children)
+  ({
+    src,
+    srcSet,
+    alt,
+    circle,
+    children,
+    size = "48px",
+    className,
+    ...otherProps
+  }, ref) => /* @__PURE__ */ React.createElement(
+    Frame,
+    {
+      ...otherProps,
+      ref,
+      size,
+      className: cn(avatar({ circle }), className)
+    },
+    src || srcSet ? /* @__PURE__ */ React.createElement("img", { className: imgStyle, src, srcSet, alt }) : children
+  )
 );
 export {
   Avatar

package/esm/Checkbox/Checkbox.mjs

@@ -1,7 +1,8 @@
 import React, { forwardRef } from "react";
 import { label, field, icon, text } from "./Checkbox.css.mjs";
+import cn from "classnames";
 const Checkbox = forwardRef(
-  ({ children, style, label: label$1, disabled = false, ...rest }, ref) => /* @__PURE__ */ React.createElement("label", { style, className: label }, /* @__PURE__ */ React.createElement(
+  ({ children, style, label: label$1, disabled = false, className, ...rest }, ref) => /* @__PURE__ */ React.createElement("label", { style, className: cn(label, className) }, /* @__PURE__ */ React.createElement(
     "input",
     {
       className: field,

package/esm/Fieldset/Fieldset.mjs

@@ -1,8 +1,19 @@
 import React, { forwardRef } from "react";
 import { field, legend } from "./Fieldset.css.mjs";
 import { Frame } from "../Frame/Frame.mjs";
+import cn from "classnames";
 const Fieldset = forwardRef(
-  ({ legend: legend$1, children, ...rest }, ref) => /* @__PURE__ */ React.createElement(Frame, { ...rest, as: "fieldset", ref, className: field }, legend$1 && /* @__PURE__ */ React.createElement("legend", { className: legend }, legend$1), children)
+  ({ legend: legend$1, children, className, ...rest }, ref) => /* @__PURE__ */ React.createElement(
+    Frame,
+    {
+      ...rest,
+      as: "fieldset",
+      ref,
+      className: cn(field, className)
+    },
+    legend$1 && /* @__PURE__ */ React.createElement("legend", { className: legend }, legend$1),
+    children
+  )
 );
 export {
   Fieldset

package/esm/GlobalStyle/GlobalStyle.css.mjs

@@ -1,2 +1,3 @@
 import './GlobalStyle.css.ts.vanilla.css';
+import "../themes/contract.css.ts.vanilla.css.mjs";
 /* empty css                                 */

package/esm/Input/Input.mjs

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

package/esm/RadioButton/RadioButton.mjs

@@ -1,7 +1,8 @@
 import React, { forwardRef } from "react";
 import { label, field, icon, text } from "./RadioButton.css.mjs";
+import cn from "classnames";
 const RadioButton = forwardRef(
-  ({ children, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement("label", { className: label }, /* @__PURE__ */ React.createElement(
+  ({ children, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement("label", { className: cn(label, props.className) }, /* @__PURE__ */ React.createElement(
     "input",
     {
       type: "radio",

package/esm/Tabs/Tab.mjs

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import cn from "classnames";
 import { tab } from "./Tabs.css.mjs";
 import { Frame } from "../Frame/Frame.mjs";
 const Tab = forwardRef(
@@ -6,7 +7,7 @@ const Tab = forwardRef(
     Frame,
     {
       ...rest,
-      className: tab({ active: activeTab === title }),
+      className: cn(tab({ active: activeTab === title }), rest.className),
       ref,
       as: "li"
     },

package/esm/TaskBar/TaskBar.mjs

@@ -6,7 +6,7 @@ import { Logo } from "@react95/icons";
 import { truncate } from "./TaskBar.css.mjs";
 import { modals, ModalEvents } from "../shared/events.mjs";
 const TaskBar = forwardRef(
-  ({ list }, ref) => {
+  ({ list, className }, ref) => {
     const [showList, toggleShowList] = useState(false);
     const [activeStart, toggleActiveStart] = useState(false);
     const [modalWindows, setModalWindows] = React.useState([]);
@@ -56,7 +56,8 @@ const TaskBar = forwardRef(
         zIndex: "$taskbar",
         backgroundColor: "$material",
         boxShadow: "$out",
-        ref
+        ref,
+        className
       },
       showList && /* @__PURE__ */ React.createElement(
         Frame,

package/esm/TextArea/TextArea.mjs

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

package/esm/Tree/Node.mjs

@@ -56,7 +56,7 @@ const Node = ({
       onClickHandler(event);
     }
   };
-  return /* @__PURE__ */ React.createElement(Frame, { as: "li", ...rest, className: node }, /* @__PURE__ */ React.createElement("div", { className: nodeContent }, hasChildren && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Frame, { as: "li", ...rest, className: cn(node, rest.className) }, /* @__PURE__ */ React.createElement("div", { className: nodeContent }, hasChildren && /* @__PURE__ */ React.createElement(
     "div",
     {
       className: folderStatus,

package/esm/Tree/Tree.mjs

@@ -1,15 +1,13 @@
 import React, { forwardRef } from "react";
+import cn from "classnames";
 import { NodeRoot, Node, icons } from "./Node.mjs";
 import { tree } from "./Tree.css.mjs";
 import { Frame } from "../Frame/Frame.mjs";
 const Tree = forwardRef(
-  ({ data, root, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, root && /* @__PURE__ */ React.createElement(NodeRoot, { ...root }), /* @__PURE__ */ React.createElement(Frame, { ...rest, className: tree, as: "ul", ref }, data.map((dataNode) => /* @__PURE__ */ React.createElement(Node, { key: dataNode.id, ...dataNode }))));
+  ({ data = [], root, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, root && /* @__PURE__ */ React.createElement(NodeRoot, { ...root }), /* @__PURE__ */ React.createElement(Frame, { ...rest, className: cn(tree, rest.className), as: "ul", ref }, data.map((dataNode) => /* @__PURE__ */ React.createElement(Node, { key: dataNode.id, ...dataNode }))));
   }
 );
-Tree.defaultProps = {
-  data: []
-};
 Tree.icons = icons;
 export {
   Tree

package/esm/themes/azureOrange.css.mjs

@@ -1,3 +1,2 @@
 import './azureOrange.css.ts.vanilla.css';
-import "./contract.css.ts.vanilla.css.mjs";
 /* empty css                                 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react95/core",
-  "version": "9.2.1",
+  "version": "9.2.2",
   "description": "Windows 95 styleguide",
   "main": "cjs/index.cjs",
   "type": "module",
@@ -180,7 +180,7 @@
     "url": "https://github.com/React95/React95/issues"
   },
   "homepage": "https://github.com/React95/React95#readme",
-  "gitHead": "1d85d653063cb2b96cfa61ffb7cd02d23a1ee081",
+  "gitHead": "235e048ee710c8a17d46f3704e53d02d1506ccfc",
   "module": "esm/index.mjs",
   "private": false,
   "types": "types/index.d.ts"

package/types/TaskBar/TaskBar.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { ReactElement } from 'react';
+import { FrameProps } from '../Frame/Frame';
 import { List } from '../List/List';
 export type TaskBarProps = {
     list?: ReactElement<typeof List>;
-};
-export declare const TaskBar: React.ForwardRefExoticComponent<TaskBarProps & React.RefAttributes<HTMLDivElement>>;
+} & FrameProps<'div'>;
+export declare const TaskBar: React.ForwardRefExoticComponent<Omit<TaskBarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/types/Tree/Tree.d.ts

@@ -4,7 +4,7 @@ import { FrameProps } from '../Frame/Frame';
 export type TreeProps = {
     data: Array<NodeProps>;
     root?: Omit<NodeProps, 'children'>;
-};
+} & FrameProps<'ul'>;
 type TreeComposition = ForwardRefExoticComponent<TreeProps & RefAttributes<HTMLUListElement>> & {
     icons: typeof icons;
 } & Omit<FrameProps<'ul'>, 'as'>;