@veracity/vui 2.0.6 → 2.2.0

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

@@ -0,0 +1,59 @@
+import { Dict } from '../utils';
+declare function variantDefault(props: Dict): {
+    item: Dict<any>;
+};
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        size: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {
+        sm: {
+            icon: {
+                size: string;
+            };
+            item: {
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+        };
+        md: {
+            icon: {
+                size: string;
+            };
+            item: {
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+        };
+        lg: {
+            item: {
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+            icon: {
+                size: string;
+            };
+        };
+        xl: {
+            item: {
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+            icon: {
+                scale: number;
+            };
+        };
+    };
+    variants: {
+        default: typeof variantDefault;
+    };
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tree/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,cAAc,CAAC,KAAK,EAAE,IAAI;;EASlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DD,wBAMC"}

package/dist/esm/tree/theme.js

@@ -0,0 +1,67 @@
+function variantDefault(props) {
+    const item = {
+        activeBg: 'skyBlue.30',
+        hoverBg: 'skyBlue.20',
+        selectedBg: 'skyBlue.10',
+        px: 2
+    };
+    return { item };
+}
+const baseStyle = {};
+const defaultProps = {
+    size: 'md',
+    variant: 'default'
+};
+const parts = ['container', 'icon', 'item', 'text'];
+const sizes = {
+    sm: {
+        icon: {
+            size: 'xs'
+        },
+        item: {
+            fontSize: 'md',
+            h: 32,
+            py: '3px'
+        }
+    },
+    md: {
+        icon: {
+            size: 'sm'
+        },
+        item: {
+            fontSize: 'md',
+            h: 40,
+            py: '5px'
+        }
+    },
+    lg: {
+        item: {
+            fontSize: 'md',
+            h: 48,
+            py: '7px'
+        },
+        icon: {
+            size: 'md'
+        }
+    },
+    xl: {
+        item: {
+            fontSize: 'lg',
+            h: 56,
+            py: '9px'
+        },
+        icon: {
+            scale: 2
+        }
+    }
+};
+const variants = {
+    default: variantDefault
+};
+export default {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};

package/dist/esm/tree/tree.d.ts

@@ -0,0 +1,14 @@
+import { VuiComponent } from '../core';
+import { TreeProps } from './tree.types';
+import TreeIcon from './treeIcon';
+import TreeItem from './treeItem';
+import TreeText from './treeText';
+export declare const TreeBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
+export declare const Tree: VuiComponent<"div", TreeProps> & {
+    Icon: typeof TreeIcon;
+    Item: typeof TreeItem;
+    Text: typeof TreeText;
+};
+export default Tree;
+//# sourceMappingURL=tree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAA6B,SAAS,EAAE,MAAM,cAAc,CAAA;AACnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,QAAQ,MAAM,YAAY,CAAA;AAGjC,eAAO,MAAM,QAAQ,+HAKpB,CAAA;AAED,+GAA+G;AAC/G,eAAO,MAAM,IAAI;UA4FT,eAAe;UACf,eAAe;UACf,eAAe;CACtB,CAAA;AAMD,eAAe,IAAI,CAAA"}

package/dist/esm/tree/tree.js

@@ -0,0 +1,74 @@
+import React, { Children, useEffect, useMemo } from 'react';
+import { styled, useStyleConfig, vui } from '../core';
+import { cs, filterUndefined } from '../utils';
+import { TreeProvider } from './context';
+import TreeIcon from './treeIcon';
+import TreeItem from './treeItem';
+import TreeText from './treeText';
+import { useTreeState } from './useTreeState';
+export const TreeBase = styled.divBox `
+  display: flex;
+  height: auto;
+  align-content: flex-start;
+  flex-direction: column;
+`;
+/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
+export const Tree = vui((props, ref) => {
+    const { activeItemId, children, className, iconCollapse = 'falMinus', iconExpand = 'falPlus', items, onClickItem, size, variant, ...rest } = props;
+    const styles = useStyleConfig('Tree', props);
+    const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId);
+    const context = useMemo(() => filterUndefined({ size, variant }), [size, variant]);
+    const transformChildrenToItems = (children) => {
+        const t = [];
+        if (children) {
+            ;
+            Children.toArray(children).forEach((child, index) => {
+                if (child?.props?.text) {
+                    let items = [];
+                    if (child.props.children) {
+                        items = transformChildrenToItems(child.props.children);
+                    }
+                    t.push({
+                        id: child.props.id,
+                        text: child.props.text,
+                        isActive: child.props.isActive,
+                        items: child.props.items || items,
+                        isCollapsed: child.props.isCollapsed,
+                        disabled: child.props.disabled,
+                        onClickTreeItem: onClickTreeItem
+                    });
+                }
+            });
+        }
+        return t;
+    };
+    useEffect(() => {
+        if (items) {
+            setItemsInternal(items);
+            return;
+        }
+        const t = [];
+        if (children) {
+            const transformed = transformChildrenToItems(children);
+            t.push(...transformed);
+        }
+        setItemsInternal(t);
+        if (activeItemId !== undefined && t?.find((i) => i.id === activeItemId)) {
+            setActiveItemIndex(activeItemId);
+        }
+    }, [children, activeItemId]);
+    const onClickTreeItem = (id) => {
+        setActiveItemIndex(id);
+        if (onClickItem) {
+            onClickItem(id);
+        }
+    };
+    return (React.createElement(TreeProvider, { value: context },
+        React.createElement(TreeBase, { className: cs('vui-tree', className), ref: ref, ...styles.container, ...rest }, itemsInternal?.map(({ id, isActive, ...props }, index) => {
+            return (React.createElement(TreeItem, { activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, id: id, isActive: activeItemIndex ? activeItemIndex === id : false, key: id ?? index, onClickTreeItem: onClickTreeItem, ...props }));
+        }))));
+});
+Tree.Icon = TreeIcon;
+Tree.Item = TreeItem;
+Tree.Text = TreeText;
+export default Tree;

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

@@ -0,0 +1,58 @@
+import { ReactNode, ReactText } from 'react';
+import { IconProp } from '../icon';
+import { LinkProps } from '../link';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+import { PropsOf } from '../utils';
+export declare type TreeProps = SystemProps & ThemingProps<'Tree'> & {
+    /** Currently selected item.  */
+    activeItemId?: TreeItemId;
+    /** Socket defining the collapse icon on the left. */
+    iconCollapse?: IconProp;
+    /** Socket defining the expand icon on the left. */
+    iconExpand?: IconProp;
+    /** Socket displaying a tree of items. */
+    items?: PropsOf<'div', TreeItemProps>[] | JSX.Element;
+    /** Socket defining the size of the tree. */
+    onClickItem?: (id: TreeItemId) => void;
+};
+export declare type TreeItemLinkProps = PropsOf<'a', LinkProps> | object;
+export declare type TreeItemId = string | number;
+export declare type TreeOnToggleEvent = {
+    id: TreeItemId;
+    collapsed: boolean;
+};
+export declare type TreeItemProps = SystemProps & ThemingProps<'Tree'> & {
+    activeItemId?: TreeItemId;
+    /** internal, not exposed */
+    activeItemIndex?: TreeItemId;
+    /** Unique ID */
+    id: TreeItemId;
+    /** Centers the content vertically and horizontally. @deprecated */
+    center?: boolean;
+    /** Centers the content horizontally. @deprecated */
+    centerH?: boolean;
+    /** Centers the content vertically. @deprecated */
+    centerV?: boolean;
+    /** Socket defining the collapse icon on the left. */
+    iconCollapse?: IconProp;
+    /** Socket defining the expand icon on the left. */
+    iconExpand?: IconProp;
+    /** The children of this tree item. */
+    items?: PropsOf<'div', TreeItemProps>[];
+    children?: ReactNode;
+    /** Collapsed state */
+    isCollapsed?: boolean;
+    /** Displays item and its content in disabled state with appropriate styling. */
+    disabled?: boolean;
+    /** Displays item in selected state with appropriate styling. */
+    isActive?: boolean;
+    /** If provided, content is wrapper with a link and the props are provided to the element. */
+    linkProps?: TreeItemLinkProps;
+    /** Socket displaying text within the item. */
+    text: ReactText | JSX.Element;
+    /** Collapse change state */
+    onToggle?: (event: TreeOnToggleEvent) => void;
+    onClickTreeItem?: (id: TreeItemId) => void;
+};
+//# sourceMappingURL=tree.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.types.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;IACrD,4CAA4C;IAC5C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CACvC,CAAA;AAEH,oBAAY,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,GAAG,MAAM,CAAA;AAEhE,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAExC,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,UAAU,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,gBAAgB;IAChB,EAAE,EAAE,UAAU,CAAA;IACd,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,EAAE,CAAA;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sBAAsB;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,8CAA8C;IAC9C,IAAI,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC7C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CAC3C,CAAA"}

package/dist/esm/tree/tree.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/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/esm/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/esm/tree/treeIcon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useStyleConfig, vui } from '../core';
+import Icon from '../icon';
+import { cs } from '../utils';
+import { useTreeContext } from './context';
+/** Displays an icon on the side of the TreeItem. */
+export const TreeIcon = vui((props, ref) => {
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Tree', useTreeContext());
+    return React.createElement(Icon, { className: cs('vui-treeIcon', className), ref: ref, size: "xs", ...styles.icon, ...rest });
+});
+export default TreeIcon;

package/dist/esm/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/esm/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/esm/tree/treeItem.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { Box } from '../box';
+import { styled, useStyleConfig, vui } from '../core';
+import { cs, isArray, isReactText } from '../utils';
+import { useTreeContext } from './context';
+import TreeIcon from './treeIcon';
+import TreeText from './treeText';
+export const TreeItemBase = 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.
+ */
+export const TreeItem = vui((props, ref) => {
+    const mergedProps = { ...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, ...rest } = mergedProps;
+    const styles = useStyleConfig('Tree', useTreeContext());
+    const { activeBg, h, hoverBg, p, px, py, selectedBg, ...itemStyles } = styles.item;
+    const [collapsedInternal, setIsCollapsedInternal] = useState(false);
+    useEffect(() => {
+        setIsCollapsedInternal(!!isCollapsed);
+    }, [isCollapsed]);
+    const toggle = (e) => {
+        if (!disabled) {
+            onToggle?.({ id, collapsed: !collapsedInternal });
+            setIsCollapsedInternal(!collapsedInternal);
+        }
+        const target = e.target;
+        const active = target?.closest('.vui-tree')?.getElementsByClassName('vui-treeItem-active')[0];
+        active ? (active.style.backgroundColor = 'transparent') : null;
+        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) => {
+        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 = target
+                .closest('.vui-treeItem')
+                ?.getElementsByClassName('vui-treeItem-permanent')[0];
+            const collapsible = target
+                .closest('.vui-treeItem')
+                ?.getElementsByClassName('vui-treeItem-collapsible')[0];
+            const active = target.closest('.vui-treeItem')?.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 = (isArray(children) && children.length > 0) || (isArray(items) && items.length > 0);
+    const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id;
+    return (React.createElement(TreeItemBase, { alignItems: "start", className: 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.createElement(Box, { flexDirection: "column", hoverBg: "transparent", m: 0, pl: 2, pr: 0, py: py, w: 1 },
+            React.createElement(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?.length > 0 && (React.createElement(React.Fragment, null, collapsedInternal ? React.createElement(TreeIcon, { mr: 1, name: iconExpand }) : React.createElement(TreeIcon, { mr: 1, name: iconCollapse }))),
+                items?.length === 0 && React.createElement(TreeIcon, { mr: 1, name: "cusDotFullAlt" }),
+                isReactText(text) ? React.createElement(TreeText, { ...{ isTruncated, text } }) : text),
+            isCollapsable && !collapsedInternal && (React.createElement(Box, { className: "vui-treeItem-collapsible", flexDirection: "column", hoverBg: "transparent", m: 0, p: 0, w: 1 }, children ??
+                (isArray(items)
+                    ? items.map(({ key, ...props }, index) => {
+                        return (React.createElement(TreeItem, { activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, key: key ?? index, onClickTreeItem: onClickTreeItem, ...props }));
+                    })
+                    : items))))));
+});
+export default TreeItem;

package/dist/esm/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/esm/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/esm/tree/treeText.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useStyleConfig, vui } from '../core';
+import T from '../t';
+import { cs, ellipsisOverflow } from '../utils';
+import { useTreeContext } from './context';
+/** Displays text within the TreeItem. */
+export const TreeText = vui((props, ref) => {
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Tree', useTreeContext());
+    return (React.createElement(T, { className: cs('vui-treeText', className), fontSize: "inherit", py: styles.item.py, ref: ref, ...ellipsisOverflow, ...styles.text, ...rest }));
+});
+export default TreeText;

package/dist/esm/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/esm/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/esm/tree/useTreeState.js

@@ -0,0 +1,6 @@
+import { useState } from 'react';
+export const useTreeState = (activeItemId) => {
+    const [itemsInternal, setItemsInternal] = useState([]);
+    const [activeItemIndex, setActiveItemIndex] = useState(activeItemId ?? '');
+    return { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.0.6",
+  "version": "2.2.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/avatar/theme.ts

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

package/src/badge/theme.ts

@@ -2,7 +2,8 @@ const baseStyle = {}
 
 const defaultProps = {
   size: 'md',
-  variant: 'subtleSandstone'
+  variant: 'subtleSandstone',
+  fontWeight: 'medium'
 }
 
 const parts = ['container', 'icon', 'text']
@@ -54,7 +55,7 @@ const sizes = {
 const variants = {
   subtleSandstone: {
     container: {
-      bg: 'sandstone.95',
+      bg: 'sandstone.90',
       color: 'sandstone.20',
       borderColor: 'transparent'
     }
@@ -119,8 +120,8 @@ const variants = {
   },
   solidYellow: {
     container: {
-      bg: 'sunflower.65',
-      color: 'sunflower.20'
+      bg: 'sunflower.50',
+      color: 'sunflower.15'
     }
   },
   solidGreen: {

package/src/button/theme.ts

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

package/src/divider/divider.tsx

@@ -5,7 +5,7 @@ import { cs, filterUndefined } from '../utils'
 import { DividerProps } from './divider.types'
 
 export const DividerBase = styled.hrBox`
-  border-color: grey.30;
+  border-color: sandstone.90;
 `
 
 /** Visually separates content with a horizontal or vertical line. */

package/src/dragAndDrop/dragAndDrop.tsx

@@ -17,7 +17,7 @@ const DragAndDropBase = styled.labelBox`
   justify-content: center;
 `
 
-/** [Beta] Prepares uploading files by selecting or dragging. */
+/** Prepares uploading files by selecting or dragging. */
 export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
   const {
     accept,
@@ -51,12 +51,12 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
 
   return (
     <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)}
+      opacity={disabled ? 0.5 : 1}
       p={5}
       pointerEvents={disabled ? 'none' : 'auto'}
       ref={ref}
@@ -64,7 +64,7 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
       {...rest}
     >
       {children || (
-        <T color={disabled ? 'grey.50' : 'auto'} display="flex">
+        <T display="flex">
           <Icon mr={1} name={icon} />
           {text}
         </T>

package/src/dragAndDrop/dragAndDrop.types.ts

@@ -2,7 +2,7 @@ import { BoxProps } from '../box'
 import { IconProp } from '../icon'
 import { ThemingProps } from '../theme'
 
-export type DragAndDropProps = BoxProps &
+export 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

package/src/dragAndDrop/theme.ts

@@ -1,10 +1,31 @@
-const baseStyle = {}
+const colors = {
+  bg: 'skyBlue.95',
+  main: 'seaBlue.28',
+  hover: 'skyBlue.90'
+}
 
-const defaultProps = {}
+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,