@react95/core 7.0.2 → 8.0.0-alpha.0

package/esm/TextArea/TextArea.js

@@ -1,16 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef } from 'react';
-import styled from '@xstyled/styled-components';
-import { padding, borders, shadow } from 'styled-system';
-import Cursor from '../Cursor';
-var TextAreaComponent = styled.textarea.withConfig({
-  displayName: "TextArea__TextAreaComponent",
-  componentId: "sc-nssclc-0"
-})(["\n  outline: none;\n  border: none;\n  cursor: text;\n\n  padding: 3 3 5 3;\n\n  color: materialText;\n  background-color: inputBackground;\n\n  border-radius: 0;\n\n  border-top-width: 1;\n  border-top-style: 1;\n  border-top-color: borderDark;\n\n  border-right-width: 0;\n  border-bottom-width: 0;\n\n  border-left-width: 1;\n  border-left-style: 1;\n  border-left-color: borderDark;\n\n  box-shadow: input;\n\n  -webkit-appearance: none;\n\n  ", ";\n\n  ", "\n  ", "\n  ", "\n"], Cursor.Text, padding, borders, shadow);
-var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(TextAreaComponent, _extends({}, props, {
-    as: "textarea",
-    ref: ref
+import * as React from 'react';
+import { Frame } from '../Frame/Frame';
+import { input as textarea } from '../Input/Input.css';
+export var TextArea = /*#__PURE__*/React.forwardRef(function (rest, ref) {
+  return /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
+    ref: ref,
+    className: textarea,
+    as: "textarea"
   }));
-});
-export default TextArea;
+});

package/esm/TextArea/index.js

@@ -1,2 +1,2 @@
-import TextArea from './TextArea';
+import { TextArea } from './TextArea';
 export default TextArea;

package/esm/TitleBar/TitleBar.css.js

@@ -0,0 +1,72 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { contract } from '../themes/contract.css';
+import { recipe } from '@vanilla-extract/recipes';
+export var optionsBox = style({
+  listStyle: 'none',
+  padding: 0,
+  margin: 0,
+  display: 'flex'
+});
+export var option = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginLeft: contract.space[2],
+  padding: contract.space[0],
+  width: contract.space[17],
+  height: contract.space[14],
+  minWidth: contract.space[0],
+  fontWeight: 600,
+  fontSize: 10,
+  selectors: {
+    '&:active': {
+      paddingTop: contract.space[1],
+      paddingRight: contract.space[0],
+      paddingBottom: contract.space[0],
+      paddingLeft: contract.space[1],
+      outline: 'none'
+    },
+    '&:first-child': {
+      marginRight: contract.space[0]
+    },
+    '&:focus': {
+      boxShadow: "inset 1px 1px 0px 1px ".concat(contract.colors.borderLightest, ",\n        inset -1px -1px 0px 1px ").concat(contract.colors.borderDark)
+    }
+  }
+});
+export var titleBarBackground = recipe({
+  base: {
+    height: contract.space[20],
+    marginBottom: contract.space[2],
+    padding: contract.space[2],
+    display: 'flex',
+    boxShadow: 'none',
+    userSelect: 'none'
+  },
+  variants: {
+    active: {
+      "true": {
+        background: contract.colors.headerBackground,
+        color: contract.colors.headerText
+      },
+      "false": {
+        background: contract.colors.headerNotActiveBackground,
+        color: contract.colors.headerNotActiveText
+      }
+    }
+  }
+});
+globalStyle("".concat(titleBarBackground.classNames.base, " svg"), {
+  width: contract.space[16],
+  height: contract.space[16],
+  marginRight: contract.space[4]
+});
+export var title = style({
+  flexGrow: 1,
+  lineHeight: '1.4em',
+  margin: '0',
+  fontSize: '1em',
+  textShadow: '0.5px 0px white, 1.5px 0px white',
+  color: 'transparent',
+  letterSpacing: '1px'
+});

package/esm/TitleBar/TitleBar.js

@@ -1,49 +1,43 @@
+var _excluded = ["children", "title", "icon", "active"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
-import styled, { th } from '@xstyled/styled-components';
-import Button from '../Button';
-import Frame from '../Frame/Frame';
-var OptionsBox = styled.ul.withConfig({
-  displayName: "TitleBar__OptionsBox",
-  componentId: "sc-5cvtvn-0"
-})(["\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n"]);
-var Option = styled(Button).attrs({
-  as: 'li'
-}).withConfig({
-  displayName: "TitleBar__Option",
-  componentId: "sc-5cvtvn-1"
-})(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  margin-left: 2;\n  padding: 0;\n\n  width: 17px;\n  height: 14px;\n\n  min-width: 0;\n  font-weight: 600;\n  font-size: 10;\n\n  &:active {\n    padding: 1 0 0 1;\n\n    outline: none;\n  }\n\n  &:first-child {\n    margin-right: 0;\n  }\n\n  &:focus {\n    box-shadow: inset 1px 1px 0px 1px ", ",\n      inset -1px -1px 0px 1px ", ";\n  }\n"], th('colors.borderLightest'), th('colors.borderDark'));
-Option.displayName = 'Option';
-var TitleBarBackground = styled(Frame).withConfig({
-  displayName: "TitleBar__TitleBarBackground",
-  componentId: "sc-5cvtvn-2"
-})(["\n  height: 20;\n  margin-bottom: 2;\n\n  padding: 2;\n\n  display: flex;\n\n  box-shadow: none;\n\n  svg {\n    width: 16;\n    height: 16;\n    margin-right: 4;\n  }\n\n  background: ", ";\n"], function (_ref) {
-  var active = _ref.active,
-    theme = _ref.theme;
-  return active ? theme.colors.headerBackground : theme.colors.headerNotActiveBackground;
+import { Frame } from '../Frame/Frame';
+import * as styles from './TitleBar.css';
+import { button } from '../Button/Button.css';
+import cn from 'classnames';
+var OptionsBox = /*#__PURE__*/React.forwardRef(function (rest, ref) {
+  return /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
+    ref: ref,
+    className: cn(styles.optionsBox, rest.className)
+  }));
 });
-var Title = styled.div.withConfig({
-  displayName: "TitleBar__Title",
-  componentId: "sc-5cvtvn-3"
-})(["\n  flex-grow: 1;\n  line-height: 1.4em;\n  margin: 0;\n  font-size: 1em;\n  text-shadow: 0.5px 0px white, 1.5px 0px white;\n  color: transparent;\n  letter-spacing: 1px;\n  font-size: 1em;\n"]);
-var TitleBarRenderer = function TitleBarRenderer(_ref2, ref) {
-  var children = _ref2.children,
-    _ref2$title = _ref2.title,
-    title = _ref2$title === void 0 ? 'UNKNOWN.EXE' : _ref2$title,
-    icon = _ref2.icon,
-    _ref2$active = _ref2.active,
-    active = _ref2$active === void 0 ? true : _ref2$active,
-    className = _ref2.className;
-  return /*#__PURE__*/React.createElement(TitleBarBackground, {
-    active: active,
-    color: active ? 'headerText' : 'headerNotActiveText',
+var Option = /*#__PURE__*/React.forwardRef(function (rest, ref) {
+  return /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
     ref: ref,
-    className: "default"
-  }, icon && icon, /*#__PURE__*/React.createElement(Title, {
-    className: className
+    as: "button",
+    className: cn(styles.option, button, rest.className)
+  }));
+});
+var TitleBarRenderer = function TitleBarRenderer(_ref, ref) {
+  var children = _ref.children,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'UNKNOWN.EXE' : _ref$title,
+    icon = _ref.icon,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? true : _ref$active,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
+    className: cn(styles.titleBarBackground({
+      active: active
+    }), rest.className),
+    ref: ref
+  }), icon && icon, /*#__PURE__*/React.createElement("div", {
+    className: styles.title
   }, title), children);
 };
-var TitleBar = Object.assign( /*#__PURE__*/React.forwardRef(TitleBarRenderer), {
+export var TitleBar = Object.assign( /*#__PURE__*/React.forwardRef(TitleBarRenderer), {
   Option: Option,
   OptionsBox: OptionsBox
-});
-export default TitleBar;
+});

package/esm/TitleBar/index.js

@@ -1,2 +1,2 @@
-import TitleBar from './TitleBar';
+import { TitleBar } from './TitleBar';
 export default TitleBar;

package/esm/Tooltip/Tooltip.css.js

@@ -0,0 +1,25 @@
+import { style } from '@vanilla-extract/css';
+import { contract } from '../themes/contract.css';
+import { calc } from '@vanilla-extract/css-utils';
+export var tip = style({
+  background: "radial-gradient(#ff0 20%, transparent 20%) 0 0,\n     radial-gradient(#ff0 20%, transparent 20%) 4px 4px,\n     radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 0 1px,\n     radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 3px 4px",
+  backgroundSize: "".concat(contract.space[7], " ").concat(contract.space[7]),
+  backgroundColor: contract.colors.borderLightest,
+  borderWidth: contract.space[1],
+  borderStyle: 'solid',
+  paddingTop: contract.space[2],
+  paddingRight: contract.space[2],
+  paddingBottom: contract.space[2],
+  paddingLeft: contract.space[4],
+  boxShadow: 'none',
+  position: 'absolute',
+  top: calc.negate(contract.space[20]),
+  textAlign: 'center',
+  zIndex: contract.zIndices.taskbar
+});
+export var wrapper = style({
+  display: 'inline-block',
+  position: 'relative',
+  cursor: 'default',
+  whiteSpace: 'nowrap'
+});

package/esm/Tooltip/Tooltip.js

@@ -9,20 +9,21 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
-import styled from '@xstyled/styled-components';
-import Frame from '../Frame';
-var Tip = styled(Frame).withConfig({
-  displayName: "Tooltip__Tip",
-  componentId: "sc-klr207-0"
-})(["\n  background: radial-gradient(#ff0 20%, transparent 20%) 0 0,\n    radial-gradient(#ff0 20%, transparent 20%) 4px 4px,\n    radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 0 1px,\n    radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 3px 4px;\n  background-size: 7px 7px;\n  background-color: borderLightest;\n  border: 1;\n  padding: 2 2 2 4;\n  box-shadow: none;\n  position: absolute;\n  top: -20px;\n  text-align: center;\n  z-index: taskbar;\n"]);
-var Wrapper = styled.div.withConfig({
-  displayName: "Tooltip__Wrapper",
-  componentId: "sc-klr207-1"
-})(["\n  display: inline-block;\n  position: relative;\n  cursor: default;\n  white-space: nowrap;\n"]);
+import { tip, wrapper } from './Tooltip.css';
+import cn from 'classnames';
+function formatDate(date) {
+  var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  var day = date.getDate();
+  var monthIndex = date.getMonth();
+  var year = date.getFullYear();
+  return "".concat(day.toString().padStart(2, '0'), " ").concat(monthNames[monthIndex], " ").concat(year);
+}
 var TooltipRenderer = function TooltipRenderer(_ref, ref) {
   var children = _ref.children,
-    text = _ref.text,
-    delay = _ref.delay,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? formatDate(new Date()) : _ref$text,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 1000 : _ref$delay,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -42,23 +43,13 @@ var TooltipRenderer = function TooltipRenderer(_ref, ref) {
     clearTimeout(delayTimer);
     setShow(false);
   };
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cn(wrapper, rest.className),
     onMouseEnter: handleEnter,
-    onMouseLeave: handleLeave
-  }, rest, {
+    onMouseLeave: handleLeave,
     ref: ref
-  }), show && /*#__PURE__*/React.createElement(Tip, null, text), children);
-};
-var Tooltip = /*#__PURE__*/React.forwardRef(TooltipRenderer);
-function formatDate(date) {
-  var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-  var day = date.getDate();
-  var monthIndex = date.getMonth();
-  var year = date.getFullYear();
-  return "".concat(day.toString().padStart(2, '0'), " ").concat(monthNames[monthIndex], " ").concat(year);
-}
-Tooltip.defaultProps = {
-  delay: 1000,
-  text: formatDate(new Date())
+  }), show && /*#__PURE__*/React.createElement("div", {
+    className: tip
+  }, text), children);
 };
-export default Tooltip;
+export var Tooltip = /*#__PURE__*/React.forwardRef(TooltipRenderer);

package/esm/Tooltip/index.js

@@ -1,2 +1,2 @@
-import Tooltip from './Tooltip';
+import { Tooltip } from './Tooltip';
 export default Tooltip;

package/esm/Tree/Node.js

@@ -1,4 +1,5 @@
-var _excluded = ["children", "id", "icon", "label", "onClick"];
+var _excluded = ["children", "id", "icon", "label", "onClick"],
+  _excluded2 = ["id", "icon", "label", "onClick"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -9,11 +10,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
-import styled from '@xstyled/styled-components';
-import treeMidLines from './imgs/tree-mid.png';
-import treeLastLines from './imgs/tree-last.png';
-import treeNodeChildrenLine from './imgs/tree-node-children.png';
 import { Bat, BatExec, FileFont2, FilePen, FileSettings, FileText, FileTextSettings, Folder, FolderOpen, MediaCd } from '@react95/icons';
+import * as styles from './Tree.css';
+import { Frame } from '../Frame/Frame';
+import cn from 'classnames';
 export var icons = {
   FILE_MEDIA: MediaCd,
   FILE_TEXT: FileText,
@@ -24,39 +24,9 @@ export var icons = {
   FILE_TEXT_SETTINGS: FileTextSettings,
   FILE_EXECUTABLE: BatExec
 };
-var NodeItem = styled.div.withConfig({
-  displayName: "Node__NodeItem",
-  componentId: "sc-284w29-0"
-})(["\n  list-style-type: none;\n  background-repeat: no-repeat;\n  background-image: url(", ");\n\n  &:last-child {\n    background-image: url(", ");\n  }\n"], treeMidLines, function (_ref) {
-  var isOpen = _ref.isOpen;
-  return isOpen ? treeMidLines : treeLastLines;
-});
-var NodeInfo = styled.div.withConfig({
-  displayName: "Node__NodeInfo",
-  componentId: "sc-284w29-1"
-})(["\n  display: flex;\n  align-items: center;\n  user-select: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n"]);
-var FolderStatus = styled.div.withConfig({
-  displayName: "Node__FolderStatus",
-  componentId: "sc-284w29-2"
-})(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 10px;\n  height: 10px;\n  border: 1;\n  border-color: borderDarkest;\n  background-color: inputBackground;\n  font-size: 11px;\n"]);
-var IconContainer = styled.div.withConfig({
-  displayName: "Node__IconContainer",
-  componentId: "sc-284w29-3"
-})(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  margin-right: 6;\n  margin-left: ", "px;\n\n  > svg {\n    width: 14px;\n    height: 14px;\n  }\n"], function (_ref2) {
-  var hasChildren = _ref2.hasChildren;
-  return hasChildren ? 8 : 18;
-});
-var NodeChildren = styled.ul.withConfig({
-  displayName: "Node__NodeChildren",
-  componentId: "sc-284w29-4"
-})(["\n  padding: 0 0 0 22;\n  background-image: url(", ");\n  background-repeat: repeat-y;\n"], treeNodeChildrenLine);
-var Label = styled.span.withConfig({
-  displayName: "Node__Label",
-  componentId: "sc-284w29-5"
-})(["\n  outline: none;\n  padding: 1;\n\n  :focus {\n    border-width: 1;\n    border-style: dotted;\n    padding: 0;\n  }\n"]);
-var NodeIcon = function NodeIcon(_ref3) {
-  var hasChildren = _ref3.hasChildren,
-    isOpen = _ref3.isOpen;
+var NodeIcon = function NodeIcon(_ref) {
+  var hasChildren = _ref.hasChildren,
+    isOpen = _ref.isOpen;
   if (!hasChildren) {
     return /*#__PURE__*/React.createElement(Bat, {
       variant: "16x16_4",
@@ -74,15 +44,15 @@ var NodeIcon = function NodeIcon(_ref3) {
     "data-testid": "react95-default-icon-folder"
   });
 };
-var Node = function Node(_ref4) {
-  var _ref4$children = _ref4.children,
-    children = _ref4$children === void 0 ? [] : _ref4$children,
-    id = _ref4.id,
-    icon = _ref4.icon,
-    label = _ref4.label,
-    _ref4$onClick = _ref4.onClick,
-    onClick = _ref4$onClick === void 0 ? function () {} : _ref4$onClick,
-    rest = _objectWithoutProperties(_ref4, _excluded);
+var Node = function Node(_ref2) {
+  var _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? [] : _ref2$children,
+    id = _ref2.id,
+    icon = _ref2.icon,
+    label = _ref2.label,
+    _ref2$onClick = _ref2.onClick,
+    onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],
@@ -102,28 +72,73 @@ var Node = function Node(_ref4) {
       onClickHandler(event);
     }
   };
-  return /*#__PURE__*/React.createElement(NodeItem, _extends({
-    isOpen: isOpen
-  }, rest), /*#__PURE__*/React.createElement(NodeInfo, null, hasChildren && /*#__PURE__*/React.createElement(FolderStatus, {
+  return /*#__PURE__*/React.createElement(Frame, _extends({
+    as: "li"
+  }, rest, {
+    className: styles.node
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.nodeContent
+  }, hasChildren && /*#__PURE__*/React.createElement("div", {
+    className: styles.folderStatus,
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     }
-  }, isOpen ? '-' : '+'), /*#__PURE__*/React.createElement(IconContainer, {
-    hasChildren: hasChildren
+  }, isOpen ? '-' : '+'), /*#__PURE__*/React.createElement("div", {
+    className: styles.iconContainer({
+      hasChildren: hasChildren
+    })
   }, icon || /*#__PURE__*/React.createElement(NodeIcon, {
     hasChildren: hasChildren,
     isOpen: isOpen
-  })), /*#__PURE__*/React.createElement(Label, {
+  })), /*#__PURE__*/React.createElement("label", {
+    className: styles.label,
     tabIndex: 0,
     onDoubleClick: function onDoubleClick() {
       return setIsOpen(!isOpen);
     },
     onClick: onClickHandler,
     onKeyDown: onKeyDownHandler
-  }, label)), hasChildren && isOpen && /*#__PURE__*/React.createElement(NodeChildren, null, children === null || children === void 0 ? void 0 : children.map(function (dataNode) {
+  }, label)), hasChildren && isOpen && /*#__PURE__*/React.createElement("ul", {
+    className: styles.tree
+  }, children === null || children === void 0 ? void 0 : children.map(function (dataNode) {
     return /*#__PURE__*/React.createElement(Node, _extends({
       key: dataNode.id
     }, dataNode));
   })));
 };
+export var NodeRoot = function NodeRoot(_ref3) {
+  var id = _ref3.id,
+    icon = _ref3.icon,
+    label = _ref3.label,
+    _ref3$onClick = _ref3.onClick,
+    onClick = _ref3$onClick === void 0 ? function () {} : _ref3$onClick,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var onClickHandler = function onClickHandler(event) {
+    onClick(event, {
+      id: id,
+      icon: icon,
+      label: label
+    });
+  };
+  var onKeyDownHandler = function onKeyDownHandler(event) {
+    if (event.key === ' ') {
+      onClickHandler(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
+    className: cn(styles.node, styles.nodeRoot)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.nodeContent
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn(styles.iconContainer.classNames.base, styles.iconContainer.classNames.variants.hasChildren["true"])
+  }, icon || /*#__PURE__*/React.createElement(NodeIcon, {
+    hasChildren: false,
+    isOpen: true
+  })), /*#__PURE__*/React.createElement("label", {
+    className: styles.label,
+    tabIndex: 0,
+    onClick: onClickHandler,
+    onKeyDown: onKeyDownHandler
+  }, label)));
+};
 export default Node;

package/esm/Tree/Tree.css.js

@@ -0,0 +1,110 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { globalStyle, style } from '@vanilla-extract/css';
+import { contract } from '../themes/contract.css';
+import { calc } from '@vanilla-extract/css-utils';
+import { recipe } from '@vanilla-extract/recipes';
+var base = {
+  listStyle: 'none',
+  margin: '0',
+  padding: '0'
+};
+export var tree = style(base);
+globalStyle("".concat(tree, " ul"), _objectSpread(_objectSpread({}, base), {}, {
+  marginLeft: contract.space[6]
+}));
+export var node = style({
+  marginLeft: contract.space[12],
+  borderLeftWidth: 'thin',
+  borderLeftStyle: 'dotted',
+  borderLeftColor: contract.colors.borderDarkest,
+  position: 'relative',
+  selectors: {
+    '&:last-child': {
+      borderLeftColor: 'transparent'
+    },
+    '&:before': {
+      position: 'absolute',
+      left: 0,
+      width: contract.space[16],
+      height: contract.space[10],
+      verticalAlign: 'top',
+      borderBottomWidth: 'thin',
+      borderBottomStyle: 'dotted',
+      borderBottomColor: contract.colors.borderDarkest,
+      content: '""',
+      display: 'inline-block'
+    },
+    '&:last-child:before': {
+      borderLeftWidth: 'thin',
+      borderLeftStyle: 'dotted',
+      borderLeftColor: contract.colors.borderDarkest,
+      left: calc.negate(contract.space[1]),
+      width: contract.space[15]
+    }
+  }
+});
+export var nodeRoot = style({
+  padding: 0,
+  margin: 0,
+  borderLeft: 'unset',
+  selectors: {
+    '&:before': {
+      content: 'unset'
+    }
+  }
+});
+export var nodeContent = style({
+  display: 'flex',
+  alignItems: 'center',
+  position: 'relative'
+});
+export var label = style({
+  outline: 'none',
+  padding: contract.space[1],
+  selectors: {
+    '&:focus': {
+      borderWidth: contract.space[1],
+      borderStyle: 'dotted',
+      padding: contract.space[0]
+    }
+  }
+});
+export var folderStatus = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: contract.space[10],
+  height: contract.space[10],
+  borderWidth: contract.space[1],
+  borderStyle: 'solid',
+  borderColor: contract.colors.borderDarkest,
+  backgroundColor: contract.colors.inputBackground,
+  fontSize: '11px',
+  marginLeft: calc.negate(contract.space[5]),
+  userSelect: 'none'
+});
+export var iconContainer = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: contract.space[20],
+    minHeight: contract.space[20],
+    marginRight: contract.space[2]
+  },
+  variants: {
+    hasChildren: {
+      "true": {
+        marginLeft: contract.space[2]
+      },
+      "false": {
+        marginLeft: contract.space[6]
+      }
+    }
+  }
+});

package/esm/Tree/Tree.js

@@ -1,27 +1,26 @@
-var _excluded = ["data"];
+var _excluded = ["data", "root"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import Node, { icons } from './Node';
-var TreeParent = styled.ul.withConfig({
-  displayName: "Tree__TreeParent",
-  componentId: "sc-1wiuvvx-0"
-})(["\n  padding: 0;\n"]);
-var Tree = /*#__PURE__*/forwardRef(function (_ref, ref) {
+import Node, { icons, NodeRoot } from './Node';
+import { tree } from './Tree.css';
+import { Frame } from '../Frame/Frame';
+export var Tree = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var data = _ref.data,
+    root = _ref.root,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(TreeParent, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, root && /*#__PURE__*/React.createElement(NodeRoot, root), /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
+    className: tree,
+    as: "ul",
     ref: ref
   }), data.map(function (dataNode) {
     return /*#__PURE__*/React.createElement(Node, _extends({
       key: dataNode.id
     }, dataNode));
-  }));
+  })));
 });
 Tree.defaultProps = {
   data: []
 };
-Tree.icons = icons;
-export default Tree;
+Tree.icons = icons;

package/esm/Tree/index.js

@@ -1,2 +1,2 @@
-import Tree from './Tree';
+import { Tree } from './Tree';
 export default Tree;