@veracity/vui 2.1.0 → 2.2.0

package/dist/cjs/tree/tree.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/tree/treeIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from '../icon';
+/** Displays an icon on the side of the TreeItem. */
+export declare const TreeIcon: import("../core").VuiComponent<"svg", IconProps>;
+export default TreeIcon;
+//# sourceMappingURL=treeIcon.d.ts.map

package/dist/cjs/tree/treeIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeIcon.d.ts","sourceRoot":"","sources":["../../../src/tree/treeIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,oDAAoD;AACpD,eAAO,MAAM,QAAQ,kDAKnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/tree/treeIcon.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const icon_1 = __importDefault(require("../icon"));
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+/** Displays an icon on the side of the TreeItem. */
+exports.TreeIcon = (0, core_1.vui)((props, ref) => {
+    const { className } = props, rest = __rest(props, ["className"]);
+    const styles = (0, core_1.useStyleConfig)('Tree', (0, context_1.useTreeContext)());
+    return react_1.default.createElement(icon_1.default, Object.assign({ className: (0, utils_1.cs)('vui-treeIcon', className), ref: ref, size: "xs" }, styles.icon, rest));
+});
+exports.default = exports.TreeIcon;

package/dist/cjs/tree/treeItem.d.ts

@@ -0,0 +1,8 @@
+import { TreeItemProps } from './tree.types';
+export declare const TreeItemBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Displays a tree item with text and optional icons. Can be shown as selected.
+ */
+export declare const TreeItem: import("../core").VuiComponent<"div", TreeItemProps>;
+export default TreeItem;
+//# sourceMappingURL=treeItem.d.ts.map

package/dist/cjs/tree/treeItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeItem.d.ts","sourceRoot":"","sources":["../../../src/tree/treeItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAI5C,eAAO,MAAM,YAAY,+HAcxB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,sDAiJnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/tree/treeItem.js

@@ -0,0 +1,131 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeItem = exports.TreeItemBase = void 0;
+const react_1 = __importStar(require("react"));
+const box_1 = require("../box");
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+const treeIcon_1 = __importDefault(require("./treeIcon"));
+const treeText_1 = __importDefault(require("./treeText"));
+exports.TreeItemBase = core_1.styled.divBox `
+  display: flex;
+  flex-direction: column;
+  line-height: normal;
+  outline: none;
+  align-content: flex-start;
+  align-items: flex-start;
+  overflow: visible;
+  height: auto;
+
+  & [aria-disabled='true'] {
+    cursor: not-allowed;
+    user-select: none;
+  }
+`;
+/**
+ * Displays a tree item with text and optional icons. Can be shown as selected.
+ */
+exports.TreeItem = (0, core_1.vui)((props, ref) => {
+    const mergedProps = Object.assign(Object.assign({}, (0, context_1.useTreeContext)()), props);
+    const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = 'falMinus', isCollapsed, disabled, iconExpand = 'falPlus', id, items, isActive, isTruncated, key, onClickTreeItem, onToggle, text } = mergedProps, rest = __rest(mergedProps, ["activeItemId", "activeItemIndex", "children", "center", "centerH", "centerV", "className", "iconCollapse", "isCollapsed", "disabled", "iconExpand", "id", "items", "isActive", "isTruncated", "key", "onClickTreeItem", "onToggle", "text"]);
+    const styles = (0, core_1.useStyleConfig)('Tree', (0, context_1.useTreeContext)());
+    const _a = styles.item, { activeBg, h, hoverBg, p, px, py, selectedBg } = _a, itemStyles = __rest(_a, ["activeBg", "h", "hoverBg", "p", "px", "py", "selectedBg"]);
+    const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsCollapsedInternal(!!isCollapsed);
+    }, [isCollapsed]);
+    const toggle = (e) => {
+        var _a;
+        if (!disabled) {
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle({ id, collapsed: !collapsedInternal });
+            setIsCollapsedInternal(!collapsedInternal);
+        }
+        const target = e.target;
+        const active = (_a = target === null || target === void 0 ? void 0 : target.closest('.vui-tree')) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('vui-treeItem-active')[0];
+        active ? (active.style.backgroundColor = 'transparent') : null;
+        onClickTreeItem === null || onClickTreeItem === void 0 ? void 0 : onClickTreeItem(id);
+        // Avoids triggering parent's onClick
+        e.stopPropagation();
+    };
+    const interactiveProps = !disabled
+        ? {
+            cursor: 'pointer',
+            focusVisibleRing: 2,
+            hoverBg: 'transparent',
+            activeBg: 'transparent',
+            userSelect: 'none'
+        }
+        : {};
+    const hoverTreeItem = (e, type) => {
+        var _a, _b, _c;
+        const target = e.target;
+        if (target.classList.contains('vui-treeItem-permanent')) {
+            target.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent';
+            e.stopPropagation();
+        }
+        else {
+            e.preventDefault();
+            const permanent = (_a = target
+                .closest('.vui-treeItem')) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('vui-treeItem-permanent')[0];
+            const collapsible = (_b = target
+                .closest('.vui-treeItem')) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('vui-treeItem-collapsible')[0];
+            const active = (_c = target.closest('.vui-treeItem')) === null || _c === void 0 ? void 0 : _c.getElementsByClassName('vui-treeItem-active')[0];
+            permanent ? (permanent.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent') : null;
+            collapsible ? (collapsible.style.backgroundColor = 'transparent') : null;
+            active ? (active.style.backgroundColor = 'hsl(139, 100%, 90%)') : null;
+        }
+    };
+    const isCollapsable = ((0, utils_1.isArray)(children) && children.length > 0) || ((0, utils_1.isArray)(items) && items.length > 0);
+    const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id;
+    return (react_1.default.createElement(exports.TreeItemBase, Object.assign({ alignItems: "start", className: (0, utils_1.cs)('vui-treeItem', className), h: collapsedInternal ? h : isCollapsable ? 'auto' : h, id: id, m: 0, onClick: !disabled ? (e) => toggle(e) : undefined, onMouseOut: !disabled ? (e) => hoverTreeItem(e, 'out') : undefined, onMouseOver: !disabled ? (e) => hoverTreeItem(e, 'over') : undefined, p: 0, ref: ref, w: 1 }, itemStyles, interactiveProps, rest, { hoverBg: "transparent" }),
+        react_1.default.createElement(box_1.Box, { flexDirection: "column", hoverBg: "transparent", m: 0, pl: 2, pr: 0, py: py, w: 1 },
+            react_1.default.createElement(box_1.Box, { alignItems: "center", bg: isActiveInternal ? 'hsl(139, 100%, 90%)' : 'transparent', className: isActiveInternal ? 'vui-treeItem-active' : 'vui-treeItem-permanent', flexDirection: "row", hoverBg: "transparent", m: 0, p: 0, w: 1 },
+                items && (items === null || items === void 0 ? void 0 : items.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null, collapsedInternal ? react_1.default.createElement(treeIcon_1.default, { mr: 1, name: iconExpand }) : react_1.default.createElement(treeIcon_1.default, { mr: 1, name: iconCollapse }))),
+                (items === null || items === void 0 ? void 0 : items.length) === 0 && react_1.default.createElement(treeIcon_1.default, { mr: 1, name: "cusDotFullAlt" }),
+                (0, utils_1.isReactText)(text) ? react_1.default.createElement(treeText_1.default, Object.assign({}, { isTruncated, text })) : text),
+            isCollapsable && !collapsedInternal && (react_1.default.createElement(box_1.Box, { className: "vui-treeItem-collapsible", flexDirection: "column", hoverBg: "transparent", m: 0, p: 0, w: 1 }, children !== null && children !== void 0 ? children : ((0, utils_1.isArray)(items)
+                ? items.map((_a, index) => {
+                    var { key } = _a, props = __rest(_a, ["key"]);
+                    return (react_1.default.createElement(exports.TreeItem, Object.assign({ activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, key: key !== null && key !== void 0 ? key : index, onClickTreeItem: onClickTreeItem }, props)));
+                })
+                : items))))));
+});
+exports.default = exports.TreeItem;

package/dist/cjs/tree/treeText.d.ts

@@ -0,0 +1,5 @@
+import { TProps } from '../t';
+/** Displays text within the TreeItem. */
+export declare const TreeText: import("../core").VuiComponent<"span", TProps>;
+export default TreeText;
+//# sourceMappingURL=treeText.d.ts.map

package/dist/cjs/tree/treeText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeText.d.ts","sourceRoot":"","sources":["../../../src/tree/treeText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,yCAAyC;AACzC,eAAO,MAAM,QAAQ,gDAenB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/tree/treeText.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeText = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const t_1 = __importDefault(require("../t"));
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+/** Displays text within the TreeItem. */
+exports.TreeText = (0, core_1.vui)((props, ref) => {
+    const { className } = props, rest = __rest(props, ["className"]);
+    const styles = (0, core_1.useStyleConfig)('Tree', (0, context_1.useTreeContext)());
+    return (react_1.default.createElement(t_1.default, Object.assign({ className: (0, utils_1.cs)('vui-treeText', className), fontSize: "inherit", py: styles.item.py, ref: ref }, utils_1.ellipsisOverflow, styles.text, rest)));
+});
+exports.default = exports.TreeText;

package/dist/cjs/tree/useTreeState.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TreeItemId, TreeItemProps } from './tree.types';
+export declare const useTreeState: (activeItemId?: TreeItemId) => {
+    itemsInternal: TreeItemProps[];
+    setItemsInternal: import("react").Dispatch<import("react").SetStateAction<TreeItemProps[]>>;
+    activeItemIndex: TreeItemId;
+    setActiveItemIndex: import("react").Dispatch<import("react").SetStateAction<TreeItemId>>;
+};
+//# sourceMappingURL=useTreeState.d.ts.map

package/dist/cjs/tree/useTreeState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTreeState.d.ts","sourceRoot":"","sources":["../../../src/tree/useTreeState.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAExD,eAAO,MAAM,YAAY,kBAAmB,UAAU;;;;;CAKrD,CAAA"}

package/dist/cjs/tree/useTreeState.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeState = void 0;
+const react_1 = require("react");
+const useTreeState = (activeItemId) => {
+    const [itemsInternal, setItemsInternal] = (0, react_1.useState)([]);
+    const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(activeItemId !== null && activeItemId !== void 0 ? activeItemId : '');
+    return { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex };
+};
+exports.useTreeState = useTreeState;

package/dist/esm/avatar/theme.d.ts

@@ -17,6 +17,7 @@ declare const _default: {
         colorScheme: string;
         size: string;
         variant: string;
+        fontWeight: string;
     };
     sizes: {
         xs: {

package/dist/esm/avatar/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/avatar/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI;;;;;EAuBhC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,IAAI;;;;;EA4BjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CD,wBAKC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/avatar/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI;;;;;EAuBhC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,IAAI;;;;;EA4BjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CD,wBAKC"}

package/dist/esm/avatar/theme.js

@@ -45,7 +45,8 @@ const baseStyle = {};
 const defaultProps = {
     colorScheme: 'blue',
     size: 'md',
-    variant: 'subtle'
+    variant: 'subtle',
+    fontWeight: 'medium'
 };
 const sizes = {
     xs: {

package/dist/esm/badge/theme.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     defaultProps: {
         size: string;
         variant: string;
+        fontWeight: string;
     };
     parts: string[];
     sizes: {

package/dist/esm/badge/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/badge/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkGE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCpB,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/badge/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAmGE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCpB,wBAMC"}

package/dist/esm/badge/theme.js

@@ -1,7 +1,8 @@
 const baseStyle = {};
 const defaultProps = {
     size: 'md',
-    variant: 'subtleSandstone'
+    variant: 'subtleSandstone',
+    fontWeight: 'medium'
 };
 const parts = ['container', 'icon', 'text'];
 const sizes = {

package/dist/esm/button/theme.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     defaultProps: {
         size: string;
         variant: string;
+        fontWeight: string;
     };
     parts: string[];
     sizes: {

package/dist/esm/button/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+RA,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgSA,wBAMC"}

package/dist/esm/button/theme.js

@@ -1,7 +1,8 @@
 const baseStyle = {};
 const defaultProps = {
     size: 'md',
-    variant: 'primaryDark'
+    variant: 'primaryDark',
+    fontWeight: 'medium'
 };
 const parts = ['container', 'icon', 'text'];
 const sizes = {

package/dist/esm/divider/divider.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
 import { cs, filterUndefined } from '../utils';
 export const DividerBase = styled.hrBox `
-  border-color: grey.30;
+  border-color: sandstone.90;
 `;
 /** Visually separates content with a horizontal or vertical line. */
 export const Divider = vui((props, ref) => {

package/dist/esm/dragAndDrop/dragAndDrop.d.ts

@@ -1,5 +1,5 @@
 import { DragAndDropProps } from './dragAndDrop.types';
-/** [Beta] Prepares uploading files by selecting or dragging. */
+/** Prepares uploading files by selecting or dragging. */
 export declare const DragAndDrop: import("../core").VuiComponent<"label", DragAndDropProps>;
 export default DragAndDrop;
 //# sourceMappingURL=dragAndDrop.d.ts.map

package/dist/esm/dragAndDrop/dragAndDrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAatD,gEAAgE;AAChE,eAAO,MAAM,WAAW,2DA8DtB,CAAA;AAEF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAatD,yDAAyD;AACzD,eAAO,MAAM,WAAW,2DA8DtB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/esm/dragAndDrop/dragAndDrop.js

@@ -11,7 +11,7 @@ const DragAndDropBase = styled.labelBox `
   transition-duration: normal;
   justify-content: center;
 `;
-/** [Beta] Prepares uploading files by selecting or dragging. */
+/** Prepares uploading files by selecting or dragging. */
 export const DragAndDrop = vui((props, ref) => {
     const { accept, icon = defaultIcon, className, onFilesAdded, multiple = true, text = defaultText, children, disabled, ...rest } = omitThemingProps(props);
     const fileInput = useRef(null);
@@ -33,8 +33,8 @@ export const DragAndDrop = vui((props, ref) => {
         if (files?.length)
             onFilesAdded?.(files);
     };
-    return (React.createElement(DragAndDropBase, { bg: disabled ? 'grey.20' : 'blue.20', className: cs('vui-drag-and-drop', className), cursor: disabled ? 'not-allowed' : 'pointer', onDragEnter: e => e.preventDefault(), onDragOver: e => e.preventDefault(), onDrop: e => handleDrop(e), p: 5, pointerEvents: disabled ? 'none' : 'auto', ref: ref, ...styles, ...rest },
-        children || (React.createElement(T, { color: disabled ? 'grey.50' : 'auto', display: "flex" },
+    return (React.createElement(DragAndDropBase, { className: cs('vui-drag-and-drop', className), cursor: disabled ? 'not-allowed' : 'pointer', onDragEnter: e => e.preventDefault(), onDragOver: e => e.preventDefault(), onDrop: e => handleDrop(e), opacity: disabled ? 0.5 : 1, p: 5, pointerEvents: disabled ? 'none' : 'auto', ref: ref, ...styles, ...rest },
+        children || (React.createElement(T, { display: "flex" },
             React.createElement(Icon, { mr: 1, name: icon }),
             text)),
         React.createElement(v.input, { accept: accept, className: "vui-drag-and-drop-hidden-input", display: "none", multiple: multiple, onChange: handleFileInput, ref: fileInput, type: "file" })));

package/dist/esm/dragAndDrop/dragAndDrop.types.d.ts

@@ -1,7 +1,7 @@
 import { BoxProps } from '../box';
 import { IconProp } from '../icon';
 import { ThemingProps } from '../theme';
-export declare type DragAndDropProps = BoxProps & ThemingProps<'DragAndDrop'> & {
+export declare type DragAndDropProps = Omit<BoxProps, 'variant'> & ThemingProps<'DragAndDrop'> & {
     /** A string that defines the file types the file input should accept. This string is a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
     accept?: string;
     /** Disabled. @default `false` */

package/dist/esm/dragAndDrop/dragAndDrop.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dragAndDrop.types.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,QAAQ,GACrC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,mPAAmP;IACnP,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;CACvC,CAAA"}
+{"version":3,"file":"dragAndDrop.types.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GACtD,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,mPAAmP;IACnP,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;CACvC,CAAA"}

package/dist/esm/dragAndDrop/theme.d.ts

@@ -1,8 +1,23 @@
 declare const _default: {
-    baseStyle: {};
-    defaultProps: {};
+    baseStyle: {
+        borderWidth: number;
+        borderStyle: string;
+        borderColor: string;
+        bg: string;
+        color: string;
+        hoverBg: string;
+    };
+    defaultProps: {
+        variant: string;
+    };
     sizes: {};
-    variants: {};
+    variants: {
+        default: {};
+        outlined: {
+            borderColor: string;
+            borderStyle: string;
+        };
+    };
 };
 export default _default;
 //# sourceMappingURL=theme.d.ts.map

package/dist/esm/dragAndDrop/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/theme.ts"],"names":[],"mappings":";;;;;;AAQA,wBAKC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6BA,wBAKC"}

package/dist/esm/dragAndDrop/theme.js

@@ -1,7 +1,27 @@
-const baseStyle = {};
-const defaultProps = {};
+const colors = {
+    bg: 'skyBlue.95',
+    main: 'seaBlue.28',
+    hover: 'skyBlue.90'
+};
+const baseStyle = {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    bg: colors.bg,
+    color: colors.main,
+    hoverBg: colors.hover
+};
+const defaultProps = {
+    variant: 'default'
+};
 const sizes = {};
-const variants = {};
+const variants = {
+    default: {},
+    outlined: {
+        borderColor: colors.main,
+        borderStyle: 'dashed'
+    }
+};
 export default {
     baseStyle,
     defaultProps,

package/dist/esm/index.d.ts

@@ -50,6 +50,7 @@ export * from './tabs';
 export * from './tag';
 export * from './textarea';
 export * from './theme';
+export * from './tree';
 export * from './tutorial';
 export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/esm/index.js

@@ -50,5 +50,6 @@ export * from './tabs';
 export * from './tag';
 export * from './textarea';
 export * from './theme';
+export * from './tree';
 export * from './tutorial';
 export * from './utils';

package/dist/esm/input/consts.d.ts

@@ -1,6 +1,20 @@
 import { InputStateMapping } from './input.types';
-export declare const greyLightColor = "warmGrey.90";
-export declare const greyColor = "sandstone.60";
-export declare const redColor = "energyRed.45";
+export declare const inputColors: {
+    border: string;
+    placeholder: string;
+    inputText: string;
+    helpText: string;
+    icons: string;
+    disabled: string;
+    focus: string;
+    error: string;
+    loading: string;
+    success: string;
+};
+export declare const stateIcons: {
+    error: string;
+    loading: string;
+    success: string;
+};
 export declare const inputStateMapping: InputStateMapping;
 //# sourceMappingURL=consts.d.ts.map

package/dist/esm/input/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/input/consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEjD,eAAO,MAAM,cAAc,gBAAgB,CAAA;AAC3C,eAAO,MAAM,SAAS,iBAAiB,CAAA;AACvC,eAAO,MAAM,QAAQ,iBAAiB,CAAA;AAEtC,eAAO,MAAM,iBAAiB,EAAE,iBAuB/B,CAAA"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/input/consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEjD,eAAO,MAAM,WAAW;;;;;;;;;;;CAWvB,CAAA;AAED,eAAO,MAAM,UAAU;;;;CAItB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAuB/B,CAAA"}

package/dist/esm/input/consts.js

@@ -1,27 +1,41 @@
-export const greyLightColor = 'warmGrey.90';
-export const greyColor = 'sandstone.60';
-export const redColor = 'energyRed.45';
+export const inputColors = {
+    border: 'sandstone.60',
+    placeholder: 'sandstone.55',
+    inputText: 'sandstone.10',
+    helpText: 'sandstone.30',
+    icons: 'seaBlue.28',
+    disabled: 'sandstone.95',
+    focus: 'seaBlue.28',
+    error: 'energyRed.45',
+    loading: 'seaBlue.70',
+    success: 'landGreen.41'
+};
+export const stateIcons = {
+    error: 'falExclamationTriangle',
+    loading: 'fadSpinnerThird',
+    success: 'falCheck'
+};
 export const inputStateMapping = {
     error: {
-        colorScheme: 'red',
+        variant: 'red',
         iconProps: {
-            color: 'energyRed.45',
-            icon: 'falExclamationTriangle'
+            color: inputColors.error,
+            icon: stateIcons.error
         }
     },
     loading: {
-        colorScheme: 'grey',
+        variant: 'grey',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
-            name: 'fadSpinnerThird',
-            pathFill: ['seaBlue.90', 'seaBlue.28']
+            name: stateIcons.loading,
+            pathFill: [inputColors.loading, inputColors.icons]
         }
     },
     success: {
-        colorScheme: 'green',
+        variant: 'green',
         iconProps: {
-            color: 'landGreen.30',
-            icon: 'falCheck'
+            color: inputColors.success,
+            icon: stateIcons.success
         }
     }
 };

package/dist/esm/input/helpText.js

@@ -3,7 +3,7 @@ import { useStyleConfig, vui } from '../core';
 import Icon from '../icon';
 import P from '../p';
 import { cs } from '../utils';
-import { greyColor, redColor } from './consts';
+import { inputColors } from './consts';
 import { useInputContext } from './context';
 /** Displaying help text bellow an input.. */
 export const HelpText = vui((props, ref) => {
@@ -11,9 +11,9 @@ export const HelpText = vui((props, ref) => {
     const inputProps = useInputContext();
     const mergedProps = { ...inputProps, ...props };
     const styles = useStyleConfig('Input', mergedProps);
-    const color = isError ? redColor : greyColor;
+    const color = isError ? inputColors.error : inputColors.helpText;
     return (React.createElement(P, { className: cs('vui-inputHelpText', className), color: color, display: "flex", py: 1, ref: ref, ...styles.helpText, ...rest },
-        isError && React.createElement(Icon, { mr: 1, name: "falExclamationTriangle", pathFill: redColor, size: "sm" }),
+        isError && React.createElement(Icon, { mr: 1, name: "falExclamationTriangle", pathFill: inputColors.error, size: "sm" }),
         children));
 });
 export default HelpText;

package/dist/esm/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAgIV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAuHV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}