@helpdice/ui 1.0.1 → 1.0.2

package/esm/tooltip/tooltip-icon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Placement } from "../utils/prop-types";
+interface Props {
+    placement: Placement;
+    shadow: boolean;
+}
+declare const TooltipIcon: React.FC<Props>;
+export default TooltipIcon;

package/esm/tooltip/tooltip-icon.js

@@ -0,0 +1,28 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import { getIconPosition } from './placement';
+import useTheme from '../use-theme';
+var TooltipIcon = function TooltipIcon(_ref) {
+  var placement = _ref.placement,
+    shadow = _ref.shadow;
+  var theme = useTheme();
+  var _useMemo = useMemo(function () {
+      return getIconPosition(placement, 'var(--tooltip-icon-offset-x)', 'var(--tooltip-icon-offset-y)');
+    }, [placement]),
+    transform = _useMemo.transform,
+    top = _useMemo.top,
+    left = _useMemo.left,
+    right = _useMemo.right,
+    bottom = _useMemo.bottom;
+  var bgColorWithDark = useMemo(function () {
+    if (!shadow || theme.type !== 'dark') return 'var(--tooltip-content-bg)';
+    return theme.palette.accents_2;
+  }, [theme.type, shadow]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2440507693", [bgColorWithDark, left, top, right, bottom, transform]]])
+  }, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2440507693",
+    dynamic: [bgColorWithDark, left, top, right, bottom, transform]
+  }, "span.__jsx-style-dynamic-selector{width:0;height:0;border-style:solid;border-width:6px 7px 6px 0;border-color:transparent ".concat(bgColorWithDark, " transparent transparent;position:absolute;left:").concat(left, ";top:").concat(top, ";right:").concat(right, ";bottom:").concat(bottom, ";-webkit-transform:").concat(transform, ";-ms-transform:").concat(transform, ";transform:").concat(transform, ";}")));
+};
+export default TooltipIcon;

package/esm/tooltip/tooltip.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { TriggerTypes, Placement, SnippetTypes } from "../utils/prop-types";
+export type TooltipOnVisibleChange = (visible: boolean) => void;
+export type TooltipTypes = SnippetTypes;
+export type TooltipTriggers = TriggerTypes;
+export type TooltipPlacement = Placement;
+interface Props {
+    text: string | React.ReactNode;
+    type?: TooltipTypes;
+    placement?: TooltipPlacement;
+    visible?: boolean;
+    initialVisible?: boolean;
+    hideArrow?: boolean;
+    trigger?: TooltipTriggers;
+    enterDelay?: number;
+    leaveDelay?: number;
+    offset?: number;
+    className?: string;
+    portalClassName?: string;
+    onVisibleChange?: TooltipOnVisibleChange;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TooltipProps = Props & NativeAttrs;
+declare const Tooltip: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Tooltip;

package/esm/tooltip/tooltip.js

@@ -0,0 +1,120 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import TooltipContent from './tooltip-content';
+import useClickAway from '../utils/use-click-away';
+import { withScale } from '../use-scale';
+import { getRect } from './helper';
+import useClasses from '../use-classes';
+var TooltipComponent = function TooltipComponent(_ref) {
+  var children = _ref.children,
+    _ref$initialVisible = _ref.initialVisible,
+    initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
+    text = _ref.text,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 12 : _ref$offset,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$portalClassName = _ref.portalClassName,
+    portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
+    _ref$enterDelay = _ref.enterDelay,
+    enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
+    _ref$leaveDelay = _ref.leaveDelay,
+    leaveDelay = _ref$leaveDelay === void 0 ? 150 : _ref$leaveDelay,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$onVisibleChange = _ref.onVisibleChange,
+    onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
+    _ref$hideArrow = _ref.hideArrow,
+    hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
+    customVisible = _ref.visible,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var timer = useRef();
+  var ref = useRef(null);
+  var _useState = useState(initialVisible),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var iconOffset = useMemo(function () {
+    if (!(ref !== null && ref !== void 0 && ref.current)) return {
+      x: '0.75em',
+      y: '0.75em'
+    };
+    var rect = getRect(ref);
+    return {
+      x: "".concat(rect.width ? rect.width / 2 : 0, "px"),
+      y: "".concat(rect.height ? rect.height / 2 : 0, "px")
+    };
+  }, [ref === null || ref === void 0 ? void 0 : ref.current]);
+  var contentProps = {
+    type: type,
+    visible: visible,
+    offset: offset,
+    placement: placement,
+    hideArrow: hideArrow,
+    iconOffset: iconOffset,
+    parent: ref,
+    className: portalClassName
+  };
+  var changeVisible = function changeVisible(nextState) {
+    var clear = function clear() {
+      clearTimeout(timer.current);
+      timer.current = undefined;
+    };
+    var handler = function handler(nextState) {
+      setVisible(nextState);
+      onVisibleChange(nextState);
+      clear();
+    };
+    clear();
+    if (nextState) {
+      timer.current = window.setTimeout(function () {
+        return handler(true);
+      }, enterDelay);
+      return;
+    }
+    var leaveDelayWithoutClick = trigger === 'click' ? 0 : leaveDelay;
+    timer.current = window.setTimeout(function () {
+      return handler(false);
+    }, leaveDelayWithoutClick);
+  };
+  var mouseEventHandler = function mouseEventHandler(next) {
+    return trigger === 'hover' && changeVisible(next);
+  };
+  var clickEventHandler = function clickEventHandler() {
+    return trigger === 'click' && changeVisible(!visible);
+  };
+  useClickAway(ref, function () {
+    return trigger === 'click' && changeVisible(false);
+  });
+  useEffect(function () {
+    if (customVisible === undefined) return;
+    changeVisible(customVisible);
+  }, [customVisible]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    onClick: clickEventHandler,
+    onMouseEnter: function onMouseEnter() {
+      return mouseEventHandler(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return mouseEventHandler(false);
+    }
+  }, props, {
+    className: "jsx-418573366" + " " + (props && props.className != null && props.className || useClasses('tooltip', className) || "")
+  }), children, /*#__PURE__*/React.createElement(TooltipContent, contentProps, text), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "418573366"
+  }, ".tooltip.jsx-418573366{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}"));
+};
+TooltipComponent.displayName = 'Tooltip';
+var Tooltip = withScale(TooltipComponent);
+export default Tooltip;

package/esm/tree/index.d.ts

@@ -0,0 +1,10 @@
+import Tree from "./tree";
+import TreeFile from "./tree-file";
+import TreeFolder from "./tree-folder";
+export type TreeComponentType = typeof Tree & {
+    File: typeof TreeFile;
+    Folder: typeof TreeFolder;
+};
+export type { TreeProps, TreeFile } from "./tree";
+declare const _default: TreeComponentType;
+export default _default;

package/esm/tree/index.js

@@ -0,0 +1,6 @@
+import Tree from './tree';
+import TreeFile from './tree-file';
+import TreeFolder from './tree-folder';
+Tree.File = TreeFile;
+Tree.Folder = TreeFolder;
+export default Tree;

package/esm/tree/tree-context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface TreeConfig {
+    onFileClick?: (path: string) => void;
+    initialExpand: boolean;
+    isImperative: boolean;
+}
+export declare const TreeContext: React.Context<TreeConfig>;
+export declare const useTreeContext: () => TreeConfig;

package/esm/tree/tree-context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+var defaultContext = {
+  initialExpand: false,
+  isImperative: false
+};
+export var TreeContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useTreeContext = function useTreeContext() {
+  return React.useContext(TreeContext);
+};

package/esm/tree/tree-file-icon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface TreeFileIconProps {
+    color?: string;
+    width?: number;
+    height?: number;
+}
+declare const TreeFileIcon: React.FC<TreeFileIconProps>;
+export default TreeFileIcon;

package/esm/tree/tree-file-icon.js

@@ -0,0 +1,34 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+var TreeFileIcon = function TreeFileIcon(_ref) {
+  var color = _ref.color,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 22 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 22 : _ref$height;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: width,
+    height: height,
+    stroke: "currentColor",
+    strokeWidth: "1",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["4043754792", [color || theme.palette.accents_8]]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z",
+    className: _JSXStyle.dynamic([["4043754792", [color || theme.palette.accents_8]]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13 2v7h7",
+    className: _JSXStyle.dynamic([["4043754792", [color || theme.palette.accents_8]]])
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4043754792",
+    dynamic: [color || theme.palette.accents_8]
+  }, "svg.__jsx-style-dynamic-selector{color:".concat(color || theme.palette.accents_8, ";}")));
+};
+TreeFileIcon.displayName = 'TreeFileIcon';
+export default TreeFileIcon;

package/esm/tree/tree-file.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    name: string;
+    extra?: string;
+    parentPath?: string;
+    level?: number;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TreeFileProps = Props & NativeAttrs;
+declare const TreeFile: React.FC<React.PropsWithChildren<TreeFileProps>>;
+export default TreeFile;

package/esm/tree/tree-file.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["name", "parentPath", "level", "extra", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import TreeFileIcon from './tree-file-icon';
+import { useTreeContext } from './tree-context';
+import TreeIndents from './tree-indents';
+import { makeChildPath, stopPropagation } from './tree-help';
+import useClasses from '../use-classes';
+var TreeFile = function TreeFile(_ref) {
+  var name = _ref.name,
+    _ref$parentPath = _ref.parentPath,
+    parentPath = _ref$parentPath === void 0 ? '' : _ref$parentPath,
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 0 : _ref$level,
+    extra = _ref.extra,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useTreeContext = useTreeContext(),
+    onFileClick = _useTreeContext.onFileClick;
+  var currentPath = useMemo(function () {
+    return makeChildPath(name, parentPath);
+  }, []);
+  var clickHandler = function clickHandler(event) {
+    stopPropagation(event);
+    onFileClick && onFileClick(currentPath);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["4220802947", [level, theme.palette.accents_2, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + (props && props.className != null && props.className || useClasses('file', className) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4220802947", [level, theme.palette.accents_2, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + "names"
+  }, /*#__PURE__*/React.createElement(TreeIndents, {
+    count: level
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4220802947", [level, theme.palette.accents_2, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + "icon"
+  }, /*#__PURE__*/React.createElement(TreeFileIcon, null)), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4220802947", [level, theme.palette.accents_2, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + "name"
+  }, name, extra && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4220802947", [level, theme.palette.accents_2, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + "extra"
+  }, extra))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4220802947",
+    dynamic: [level, theme.palette.accents_2, theme.palette.accents_8, theme.palette.accents_5]
+  }, ".file.__jsx-style-dynamic-selector{cursor:pointer;line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:calc(1.875rem * ".concat(level, ");}.names.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:1.75rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}.names.__jsx-style-dynamic-selector>.indent{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:1px;height:100%;background-color:").concat(theme.palette.accents_2, ";margin-left:-1px;}.icon.__jsx-style-dynamic-selector{width:1.5rem;height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:0.5rem;}.name.__jsx-style-dynamic-selector{-webkit-transition:opacity 100ms ease 0ms;transition:opacity 100ms ease 0ms;color:").concat(theme.palette.accents_8, ";white-space:nowrap;font-size:0.875rem;}.extra.__jsx-style-dynamic-selector{font-size:0.75rem;-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline;padding-left:4px;color:").concat(theme.palette.accents_5, ";}.name.__jsx-style-dynamic-selector:hover{opacity:0.7;}")));
+};
+TreeFile.displayName = 'TreeFile';
+export default TreeFile;

package/esm/tree/tree-folder-icon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface TreeFolderIconProps {
+    color?: string;
+    width?: number;
+    height?: number;
+}
+declare const TreeFolderIcon: React.FC<TreeFolderIconProps>;
+export default TreeFolderIcon;

package/esm/tree/tree-folder-icon.js

@@ -0,0 +1,31 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+var TreeFolderIcon = function TreeFolderIcon(_ref) {
+  var color = _ref.color,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 22 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 22 : _ref$height;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: width,
+    height: height,
+    stroke: "currentColor",
+    strokeWidth: "1",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["4043754792", [color || theme.palette.accents_8]]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M2.707 7.454V5.62C2.707 4.725 3.469 4 4.409 4h4.843c.451 0 .884.17 1.204.474l.49.467c.126.12.296.186.473.186h8.399c.94 0 1.55.695 1.55 1.59v.737m-18.661 0h-.354a.344.344 0 00-.353.35l.508 11.587c.015.34.31.609.668.609h17.283c.358 0 .652-.269.667-.61L22 7.805a.344.344 0 00-.353-.35h-.278m-18.662 0h18.662",
+    className: _JSXStyle.dynamic([["4043754792", [color || theme.palette.accents_8]]])
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4043754792",
+    dynamic: [color || theme.palette.accents_8]
+  }, "svg.__jsx-style-dynamic-selector{color:".concat(color || theme.palette.accents_8, ";}")));
+};
+TreeFolderIcon.displayName = 'TreeFolderIcon';
+export default TreeFolderIcon;

package/esm/tree/tree-folder.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    name: string;
+    extra?: string;
+    parentPath?: string;
+    level?: number;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TreeFolderProps = Props & NativeAttrs;
+declare const TreeFolder: React.FC<React.PropsWithChildren<TreeFolderProps>>;
+export default TreeFolder;

package/esm/tree/tree-folder.js

@@ -0,0 +1,81 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["name", "children", "parentPath", "level", "extra", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import { setChildrenProps } from '../utils/collections';
+import TreeFile from './tree-file';
+import Expand from '../shared/expand';
+import TreeIndents from './tree-indents';
+import { useTreeContext } from './tree-context';
+import TreeFolderIcon from './tree-folder-icon';
+import TreeStatusIcon from './tree-status-icon';
+import { sortChildren, makeChildPath, stopPropagation } from './tree-help';
+import useClasses from '../use-classes';
+var TreeFolder = function TreeFolder(_ref) {
+  var name = _ref.name,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? '' : _ref$children,
+    _ref$parentPath = _ref.parentPath,
+    parentPath = _ref$parentPath === void 0 ? '' : _ref$parentPath,
+    _ref$level = _ref.level,
+    parentLevel = _ref$level === void 0 ? 0 : _ref$level,
+    extra = _ref.extra,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useTreeContext = useTreeContext(),
+    initialExpand = _useTreeContext.initialExpand,
+    isImperative = _useTreeContext.isImperative;
+  var _useState = useState(initialExpand),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  useEffect(function () {
+    return setExpanded(initialExpand);
+  }, []);
+  var currentPath = useMemo(function () {
+    return makeChildPath(name, parentPath);
+  }, []);
+  var clickHandler = function clickHandler() {
+    return setExpanded(!expanded);
+  };
+  var nextChildren = setChildrenProps(children, {
+    parentPath: currentPath,
+    level: parentLevel + 1
+  }, [TreeFolder, TreeFile]);
+  var sortedChildren = isImperative ? nextChildren : sortChildren(nextChildren, TreeFolder);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["1983983326", [parentLevel, theme.palette.accents_2, theme.palette.background, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + (props && props.className != null && props.className || useClasses('folder', className) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1983983326", [parentLevel, theme.palette.accents_2, theme.palette.background, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + "names"
+  }, /*#__PURE__*/React.createElement(TreeIndents, {
+    count: parentLevel
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["1983983326", [parentLevel, theme.palette.accents_2, theme.palette.background, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + "status"
+  }, /*#__PURE__*/React.createElement(TreeStatusIcon, {
+    active: expanded
+  })), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["1983983326", [parentLevel, theme.palette.accents_2, theme.palette.background, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + "icon"
+  }, /*#__PURE__*/React.createElement(TreeFolderIcon, null)), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["1983983326", [parentLevel, theme.palette.accents_2, theme.palette.background, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + "name"
+  }, name, extra && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["1983983326", [parentLevel, theme.palette.accents_2, theme.palette.background, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + "extra"
+  }, extra))), /*#__PURE__*/React.createElement(Expand, {
+    isExpanded: expanded
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: stopPropagation,
+    className: _JSXStyle.dynamic([["1983983326", [parentLevel, theme.palette.accents_2, theme.palette.background, theme.palette.accents_8, theme.palette.accents_5]]]) + " " + "content"
+  }, sortedChildren)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1983983326",
+    dynamic: [parentLevel, theme.palette.accents_2, theme.palette.background, theme.palette.accents_8, theme.palette.accents_5]
+  }, ".folder.__jsx-style-dynamic-selector{cursor:pointer;line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.names.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:1.75rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:calc(1.875rem * ".concat(parentLevel, ");position:relative;}.names.__jsx-style-dynamic-selector>.indent{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:1px;height:100%;background-color:").concat(theme.palette.accents_2, ";margin-left:-1px;}.status.__jsx-style-dynamic-selector{position:absolute;left:calc(-1.125rem);top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0.875rem;height:0.875rem;z-index:10;background-color:").concat(theme.palette.background, ";}.icon.__jsx-style-dynamic-selector{width:1.5rem;height:100%;margin-right:0.5rem;}.status.__jsx-style-dynamic-selector,.icon.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.name.__jsx-style-dynamic-selector{-webkit-transition:opacity 100ms ease 0ms;transition:opacity 100ms ease 0ms;color:").concat(theme.palette.accents_8, ";white-space:nowrap;font-size:0.875rem;}.extra.__jsx-style-dynamic-selector{font-size:0.75rem;-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline;padding-left:4px;color:").concat(theme.palette.accents_5, ";}.name.__jsx-style-dynamic-selector:hover{opacity:0.7;}.content.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:auto;}")));
+};
+TreeFolder.displayName = 'TreeFolder';
+export default TreeFolder;

package/esm/tree/tree-help.d.ts

@@ -0,0 +1,4 @@
+import React, { ReactNode } from 'react';
+export declare const sortChildren: (children: ReactNode | undefined, folderComponentType: React.ElementType) => (React.ReactChild | React.ReactFragment | React.ReactPortal)[];
+export declare const makeChildPath: (name: string, parentPath?: string) => string;
+export declare const stopPropagation: (event: React.MouseEvent) => void;

package/esm/tree/tree-help.js

@@ -0,0 +1,16 @@
+import React from 'react';
+export var sortChildren = function sortChildren(children, folderComponentType) {
+  return React.Children.toArray(children).sort(function (a, b) {
+    if (! /*#__PURE__*/React.isValidElement(a) || ! /*#__PURE__*/React.isValidElement(b)) return 0;
+    if (a.type !== b.type) return a.type !== folderComponentType ? 1 : -1;
+    return "".concat(a.props.name).charCodeAt(0) - "".concat(b.props.name).charCodeAt(0);
+  });
+};
+export var makeChildPath = function makeChildPath(name, parentPath) {
+  if (!parentPath) return name;
+  return "".concat(parentPath, "/").concat(name);
+};
+export var stopPropagation = function stopPropagation(event) {
+  event.stopPropagation();
+  event.nativeEvent.stopImmediatePropagation();
+};

package/esm/tree/tree-indents.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    count: number;
+}
+declare const TreeIndents: React.FC<Props>;
+export default TreeIndents;

package/esm/tree/tree-indents.js

@@ -0,0 +1,22 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+var TreeIndents = function TreeIndents(_ref) {
+  var count = _ref.count;
+  if (count === 0) return null;
+  return (
+    /*#__PURE__*/
+    /* eslint-disable react/jsx-no-useless-fragment */
+    React.createElement(React.Fragment, null, _toConsumableArray(new Array(count)).map(function (_, index) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: "indent-".concat(index),
+        className: _JSXStyle.dynamic([["2622387629", [index + 1]]]) + " " + "indent"
+      }, /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "2622387629",
+        dynamic: [index + 1]
+      }, "span.indent.__jsx-style-dynamic-selector{left:calc(-1.875rem * ".concat(index + 1, " + 0.75rem);}")));
+    }))
+    /* eslint-enable */
+  );
+};
+export default TreeIndents;

package/esm/tree/tree-status-icon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TreeStatusIconProps {
+    color?: string;
+    width?: number;
+    height?: number;
+    active?: boolean;
+}
+declare const TreeStatusIcon: React.FC<TreeStatusIconProps>;
+export default TreeStatusIcon;

package/esm/tree/tree-status-icon.js

@@ -0,0 +1,44 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+var TreeStatusIcon = function TreeStatusIcon(_ref) {
+  var color = _ref.color,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 12 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 12 : _ref$height,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: width,
+    height: height,
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["4043754792", [color || theme.palette.accents_8]]])
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "3",
+    y: "3",
+    width: "18",
+    height: "18",
+    rx: "2",
+    ry: "2",
+    className: _JSXStyle.dynamic([["4043754792", [color || theme.palette.accents_8]]])
+  }), !active && /*#__PURE__*/React.createElement("path", {
+    d: "M12 8v8",
+    className: _JSXStyle.dynamic([["4043754792", [color || theme.palette.accents_8]]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 12h8",
+    className: _JSXStyle.dynamic([["4043754792", [color || theme.palette.accents_8]]])
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4043754792",
+    dynamic: [color || theme.palette.accents_8]
+  }, "svg.__jsx-style-dynamic-selector{color:".concat(color || theme.palette.accents_8, ";}")));
+};
+TreeStatusIcon.displayName = 'TreeStatusIcon';
+export default TreeStatusIcon;

package/esm/tree/tree.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+declare const FileTreeValueType: ["directory", "file"];
+export type TreeFile = {
+    type: typeof FileTreeValueType[number];
+    name: string;
+    extra?: string;
+    files?: Array<TreeFile>;
+};
+interface Props {
+    value?: Array<TreeFile>;
+    initialExpand?: boolean;
+    onClick?: (path: string) => void;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TreeProps = Props & NativeAttrs;
+declare const Tree: React.FC<React.PropsWithChildren<TreeProps>>;
+export default Tree;