@veracity/vui 1.4.0 → 1.5.0-beta.0

package/dist/esm/accordion/accordion.d.ts

@@ -0,0 +1,6 @@
+import { AccordionProps } from './accordion.types';
+export declare const AccordionBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** [BETA] Allows to show and hide sections of related content on a page. */
+export declare const Accordion: import("../core").VuiComponent<"div", AccordionProps>;
+export default Accordion;
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGtE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,4EAA4E;AAC5E,eAAO,MAAM,SAAS,uDAepB,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/esm/accordion/accordion.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
+import List from '../list';
+import { cs, filterUndefined } from '../utils';
+import AccordionItem from './accordionItem';
+export const AccordionBase = styled.divBox `
+  display: flex;
+  min-width: 0;
+  transition-duration: normal;
+`;
+/** [BETA] Allows to show and hide sections of related content on a page. */
+export const Accordion = vui((props, ref) => {
+    const { className, children, items, ...rest } = omitThemingProps(props);
+    const styles = useStyleConfig('Accordion', props);
+    const aliasedProps = filterUndefined({});
+    return (React.createElement(AccordionBase, { className: cs('vui-accordion', className), ref: ref, ...styles, ...aliasedProps, ...rest },
+        React.createElement(List, { w: "100%" }, items
+            ? items?.map?.((item, key) => React.createElement(AccordionItem, { key: key, ...item }))
+            : children)));
+});
+export default Accordion;

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ListItemProps } from '../list';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
+    items?: AccordionItemProps[];
+};
+export declare type AccordionItemId = string | number;
+export declare type AccordionOnToggleEvent = {
+    id: AccordionItemId;
+    collapsed: boolean;
+};
+export declare type AccordionItemProps = ListItemProps & {
+    id: AccordionItemId;
+    className?: string;
+    children?: ReactNode;
+    content?: ReactNode;
+    collapsed?: boolean;
+    title?: string;
+    onToggle?: (event: AccordionOnToggleEvent) => void;
+};
+export declare type AccordionItemArrowProps = {
+    collapsed?: boolean;
+};
+//# sourceMappingURL=accordion.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAE/C,EAAE,EAAE,eAAe,CAAA;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,OAAO,CAAC,EAAE,SAAS,CAAA;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA"}

package/dist/esm/accordion/accordion.types.js

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

package/dist/esm/accordion/accordionItem.d.ts

@@ -0,0 +1,5 @@
+import { AccordionItemProps } from './accordion.types';
+/** An accordion item. */
+export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
+export default AccordionItem;
+//# sourceMappingURL=accordionItem.d.ts.map

package/dist/esm/accordion/accordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAGtD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBA8CtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/esm/accordion/accordionItem.js

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+import { Box } from '../box';
+import { omitThemingProps } from '../core';
+import { ListItem } from '../list';
+import { cs } from '../utils';
+import AccordionItemArrow from './accordionItemArrow';
+/** An accordion item. */
+export const AccordionItem = (props) => {
+    const { className, children, id, content, disabled, title, collapsed, onToggle, ...rest } = omitThemingProps(props);
+    const [collapsedInternal, setIsCollapsedInternal] = useState(false);
+    useEffect(() => {
+        setIsCollapsedInternal(!!collapsed);
+    }, [collapsed]);
+    const toggle = () => {
+        if (!disabled) {
+            onToggle?.({ id, collapsed: !collapsedInternal });
+            setIsCollapsedInternal(!collapsedInternal);
+        }
+    };
+    return (React.createElement(ListItem, { borderBottom: "1px solid grey.40", className: cs('vui-accordion-item', className), disabled: disabled, flexDirection: "column", h: "auto", hoverBg: "blue.10", id: `${id}`, w: "100%", ...rest },
+        React.createElement(Box, { cursor: disabled ? 'not-allowed' : 'pointer', justifyContent: "space-between", onClick: toggle, py: 2, w: "100%" },
+            React.createElement(Box, { fontWeight: "500 " }, title),
+            React.createElement(Box, null,
+                React.createElement(AccordionItemArrow, { collapsed: collapsedInternal }))),
+        !collapsedInternal && (React.createElement(Box, { mb: 2, mt: 2, w: "100%" }, children ?? content))));
+};
+export default AccordionItem;

package/dist/esm/accordion/accordionItemArrow.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AccordionItemArrowProps } from './accordion.types';
+declare const _default: React.MemoExoticComponent<(props: AccordionItemArrowProps) => JSX.Element>;
+export default _default;
+//# sourceMappingURL=accordionItemArrow.d.ts.map

package/dist/esm/accordion/accordionItemArrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAO3D,wBAA6C"}

package/dist/esm/accordion/accordionItemArrow.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import Icon from '../icon';
+const AccordionItemArrow = (props) => {
+    const { collapsed } = props;
+    return React.createElement(Icon, { name: collapsed ? 'falChevronDown' : 'falChevronUp', size: "xs" });
+};
+export default React.memo(AccordionItemArrow);

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

@@ -0,0 +1,5 @@
+export * from './accordion';
+export * from './accordionItem';
+export { default } from './accordion';
+export * from './accordion.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,cAAc,mBAAmB,CAAA"}

package/dist/esm/accordion/index.js

@@ -0,0 +1,4 @@
+export * from './accordion';
+export * from './accordionItem';
+export { default } from './accordion';
+export * from './accordion.types';

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

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

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

package/dist/esm/accordion/theme.js

@@ -0,0 +1,10 @@
+const baseStyle = {};
+const defaultProps = {};
+const sizes = {};
+const variants = {};
+export default {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/dist/esm/index.d.ts

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './avatar';
 export * from './box';
 export * from './button';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,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,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,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,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,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,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,SAAS,CAAA"}

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './avatar';
 export * from './box';
 export * from './button';

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

@@ -1,4 +1,10 @@
 declare const _default: {
+    Accordion: {
+        baseStyle: {};
+        defaultProps: {};
+        sizes: {};
+        variants: {};
+    };
     Avatar: {
         baseStyle: {};
         defaultProps: {

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

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,wBAoCC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,wBAqCC"}

package/dist/esm/theme/components.js

@@ -1,3 +1,4 @@
+import Accordion from '../accordion/theme';
 import Avatar from '../avatar/theme';
 import Box from '../box/theme';
 import Button from '../button/theme';
@@ -34,6 +35,7 @@ import Tabs from '../tabs/theme';
 import Tag from '../tag/theme';
 import Textarea from '../textarea/theme';
 export default {
+    Accordion,
     Avatar,
     Box,
     Button,

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

@@ -195,6 +195,12 @@ declare const defaultTheme: {
         tooltip: number;
     };
     components: {
+        Accordion: {
+            baseStyle: {};
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
         Avatar: {
             baseStyle: {};
             defaultProps: {

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

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/toast/toast.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const toasterWidth = 420;
 declare const _default: React.MemoExoticComponent<() => JSX.Element>;
 export default _default;
 //# sourceMappingURL=toast.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;;AA8BzB,wBAAkC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,YAAY,MAAM,CAAA;;AAyB/B,wBAAkC"}

package/dist/esm/toast/toast.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { Box } from '../box';
 import { useVuiContext } from '../core';
 import { zIndices } from '../theme';
+export const toasterWidth = 420;
 const Toaster = () => {
     const { toasts } = useVuiContext();
-    return (React.createElement(Box, { bottom: "1rem", display: "block", maxW: "100%", minW: { md: 600, sm: 600, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: zIndices.toast }, toasts?.list?.map?.((toast) => (React.createElement("div", { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
+    return (React.createElement(Box, { bottom: "1rem", display: "block", maxW: { md: toasterWidth, sm: toasterWidth, xs: '100%' }, minW: { md: toasterWidth, sm: toasterWidth, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: zIndices.toast }, toasts?.list?.map?.((toast) => (React.createElement("div", { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
 };
 export default React.memo(Toaster);

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { NotificationProps } from '../notification';
+export declare type ToastDuration = 'fast' | 'slow' | 'sticky';
 export interface ToastListItem {
     id: string;
     component?: ReactNode;
@@ -10,7 +11,8 @@ export interface ToastSetup {
 }
 export interface ToastOptions extends NotificationProps {
     id?: string;
-    duration?: number;
+    duration?: ToastDuration;
+    /** @deprecated According to new UX requirements all toasts should be dismissible */
     dismissible?: boolean;
 }
 //# sourceMappingURL=toast.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toast.types.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,YAAY,CAAA;IACrB,aAAa,EAAE,aAAa,EAAE,CAAA;CAC/B;AAED,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB"}
+{"version":3,"file":"toast.types.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD,oBAAY,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEtD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,YAAY,CAAA;IACrB,aAAa,EAAE,aAAa,EAAE,CAAA;CAC/B;AAED,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB"}

package/dist/esm/toast/useToast.d.ts

@@ -1,12 +1,15 @@
 import { ReactNode } from 'react';
-import { ToastOptions } from './toast.types';
+import { ToastDuration, ToastOptions } from './toast.types';
+export declare const defaultDuration = "fast";
+export declare const fastToastDuration = 4000;
+export declare const slowToastDuration = 8000;
 export declare const useToast: () => {
     showToast: (options?: ToastOptions | undefined) => void;
     hideToast: (id: string) => void;
-    showInfo: (text: ReactNode) => void;
-    showSuccess: (text: ReactNode) => void;
-    showWarning: (text: ReactNode) => void;
-    showError: (text: ReactNode) => void;
-    showLoading: (text: ReactNode) => void;
+    showInfo: (text: ReactNode, duration?: ToastDuration) => void;
+    showSuccess: (text: ReactNode, duration?: ToastDuration) => void;
+    showWarning: (text: ReactNode, duration?: ToastDuration) => void;
+    showError: (text: ReactNode, duration?: ToastDuration) => void;
+    showLoading: (text: ReactNode, duration?: ToastDuration) => void;
 };
 //# sourceMappingURL=useToast.d.ts.map

package/dist/esm/toast/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAUxD,eAAO,MAAM,QAAQ;uDAKyB,IAAI;oBAFzB,MAAM;qBAqCL,SAAS;wBACN,SAAS;wBACT,SAAS;sBACX,SAAS;wBACP,SAAS;CAGrC,CAAA"}
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAEvE,eAAO,MAAM,eAAe,SAAS,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAWrC,eAAO,MAAM,QAAQ;uDAKyB,IAAI;oBAFzB,MAAM;qBAoCL,SAAS,aAAY,aAAa;wBAE/B,SAAS,aAAY,aAAa;wBAElC,SAAS,aAAY,aAAa;sBAEpC,SAAS,aAAY,aAAa;wBAEhC,SAAS,aAAY,aAAa;CAI9D,CAAA"}

package/dist/esm/toast/useToast.js

@@ -2,20 +2,22 @@ import React from 'react';
 import { useVuiContext } from '../core';
 import { Notification } from '../notification';
 import { uid } from '../utils';
+export const defaultDuration = 'fast';
+export const fastToastDuration = 4000;
+export const slowToastDuration = 8000;
 const setup = {
     options: {
-        duration: 5000,
-        dismissible: true
+        duration: defaultDuration
     },
     componentList: []
 };
+const getDurationTime = (duration) => (duration === 'fast' ? fastToastDuration : slowToastDuration);
 export const useToast = () => {
     const { addToast, removeToast } = useVuiContext();
     const hideToast = (id) => removeToast(id);
     const showToast = (options) => {
         const id = options?.id ? options.id : uid('toast');
         const { duration = setup.options.duration } = options || {};
-        const { dismissible = setup.options.dismissible } = options || {};
         const { status = setup.options.duration } = options || {};
         const { action } = options || {};
         const { icon } = options || {};
@@ -24,16 +26,16 @@ export const useToast = () => {
         const onClose = () => hideToast(id);
         const toast = {
             id,
-            component: (React.createElement(Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: dismissible ? onClose : undefined, shadow: 1, status: status, text: text, title: title, w: 1 }))
+            component: (React.createElement(Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: onClose, shadow: 1, status: status, text: text, title: title, w: 1 }))
         };
         addToast(toast);
-        if (duration !== 0)
-            window.setTimeout(() => hideToast(id), duration);
+        if (duration && duration !== 'sticky')
+            window.setTimeout(() => hideToast(id), getDurationTime(duration));
     };
-    const showInfo = (text) => showToast({ text, status: 'info' });
-    const showSuccess = (text) => showToast({ text, status: 'success' });
-    const showWarning = (text) => showToast({ text, status: 'warning' });
-    const showError = (text) => showToast({ text, status: 'error' });
-    const showLoading = (text) => showToast({ text, status: 'loading' });
+    const showInfo = (text, duration = defaultDuration) => showToast({ text, status: 'info', duration });
+    const showSuccess = (text, duration = defaultDuration) => showToast({ text, status: 'success', duration });
+    const showWarning = (text, duration = defaultDuration) => showToast({ text, status: 'warning', duration });
+    const showError = (text, duration = defaultDuration) => showToast({ text, status: 'error', duration });
+    const showLoading = (text, duration = defaultDuration) => showToast({ text, status: 'loading', duration });
     return { showToast, hideToast, showInfo, showSuccess, showWarning, showError, showLoading };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.4.0",
+  "version": "1.5.0-beta.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/accordion/accordion.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
+import List from '../list'
+import { cs, filterUndefined } from '../utils'
+import { AccordionItemProps, AccordionProps } from './accordion.types'
+import AccordionItem from './accordionItem'
+
+export const AccordionBase = styled.divBox`
+  display: flex;
+  min-width: 0;
+  transition-duration: normal;
+`
+
+/** [BETA] Allows to show and hide sections of related content on a page. */
+export const Accordion = vui<'div', AccordionProps>((props, ref) => {
+  const { className, children, items, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Accordion', props)
+
+  const aliasedProps = filterUndefined<AccordionProps>({})
+
+  return (
+    <AccordionBase className={cs('vui-accordion', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
+      <List w="100%">
+        {items
+          ? items?.map?.((item: AccordionItemProps, key: number) => <AccordionItem key={key} {...item} />)
+          : children}
+      </List>
+    </AccordionBase>
+  )
+})
+
+export default Accordion

package/src/accordion/accordion.types.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react'
+
+import { ListItemProps } from '../list'
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type AccordionProps = SystemProps &
+  ThemingProps<'Accordion'> & {
+    items?: AccordionItemProps[]
+  }
+
+export type AccordionItemId = string | number
+
+export type AccordionOnToggleEvent = {
+  id: AccordionItemId
+  collapsed: boolean
+}
+
+export type AccordionItemProps = ListItemProps & {
+  // Unique ID
+  id: AccordionItemId
+  // Custom class name
+  className?: string
+  // Content
+  children?: ReactNode
+  // Alternative way to provide content
+  content?: ReactNode
+  // Collapsed state
+  collapsed?: boolean
+  // Title
+  title?: string
+  // Collapse change state
+  onToggle?: (event: AccordionOnToggleEvent) => void
+}
+
+export type AccordionItemArrowProps = {
+  collapsed?: boolean
+}

package/src/accordion/accordionItem.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+
+import { Box } from '../box'
+import { omitThemingProps } from '../core'
+import { ListItem } from '../list'
+import { cs } from '../utils'
+import { AccordionItemProps } from './accordion.types'
+import AccordionItemArrow from './accordionItemArrow'
+
+/** An accordion item. */
+export const AccordionItem = (props: AccordionItemProps) => {
+  const { className, children, id, content, disabled, title, collapsed, onToggle, ...rest } = omitThemingProps(props)
+  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)
+
+  useEffect(() => {
+    setIsCollapsedInternal(!!collapsed)
+  }, [collapsed])
+
+  const toggle = () => {
+    if (!disabled) {
+      onToggle?.({ id, collapsed: !collapsedInternal })
+      setIsCollapsedInternal(!collapsedInternal)
+    }
+  }
+
+  return (
+    <ListItem
+      borderBottom="1px solid grey.40"
+      className={cs('vui-accordion-item', className)}
+      disabled={disabled}
+      flexDirection="column"
+      h="auto"
+      hoverBg="blue.10"
+      id={`${id}`}
+      w="100%"
+      {...rest}
+    >
+      <Box
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        justifyContent="space-between"
+        onClick={toggle}
+        py={2}
+        w="100%"
+      >
+        <Box fontWeight="500 ">{title}</Box>
+        <Box>
+          <AccordionItemArrow collapsed={collapsedInternal} />
+        </Box>
+      </Box>
+      {!collapsedInternal && (
+        <Box mb={2} mt={2} w="100%">
+          {children ?? content}
+        </Box>
+      )}
+    </ListItem>
+  )
+}
+
+export default AccordionItem

package/src/accordion/accordionItemArrow.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import Icon from '../icon'
+import { AccordionItemArrowProps } from './accordion.types'
+
+const AccordionItemArrow = (props: AccordionItemArrowProps) => {
+  const { collapsed } = props
+  return <Icon name={collapsed ? 'falChevronDown' : 'falChevronUp'} size="xs" />
+}
+
+export default React.memo(AccordionItemArrow)

package/src/accordion/index.ts

@@ -0,0 +1,4 @@
+export * from './accordion'
+export * from './accordionItem'
+export { default } from './accordion'
+export * from './accordion.types'

package/src/accordion/theme.ts

@@ -0,0 +1,14 @@
+const baseStyle = {}
+
+const defaultProps = {}
+
+const sizes = {}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './accordion'
 export * from './avatar'
 export * from './box'
 export * from './button'

package/src/theme/components.ts

@@ -1,3 +1,4 @@
+import Accordion from '../accordion/theme'
 import Avatar from '../avatar/theme'
 import Box from '../box/theme'
 import Button from '../button/theme'
@@ -35,6 +36,7 @@ import Tag from '../tag/theme'
 import Textarea from '../textarea/theme'
 
 export default {
+  Accordion,
   Avatar,
   Box,
   Button,

package/src/toast/toast.tsx

@@ -5,6 +5,8 @@ import { useVuiContext } from '../core'
 import { zIndices } from '../theme'
 import { ToastListItem } from './toast.types'
 
+export const toasterWidth = 420
+
 const Toaster = () => {
   const { toasts } = useVuiContext()
 
@@ -12,8 +14,8 @@ const Toaster = () => {
     <Box
       bottom="1rem"
       display="block"
-      maxW="100%"
-      minW={{ md: 600, sm: 600, xs: '100%' }}
+      maxW={{ md: toasterWidth, sm: toasterWidth, xs: '100%' }}
+      minW={{ md: toasterWidth, sm: toasterWidth, xs: '100%' }}
       p={{ md: '16px', sm: '4px', xs: '2px' }}
       position="fixed"
       right={{ md: '1rem', sm: 0, xs: 0 }}

package/src/toast/toast.types.ts

@@ -2,6 +2,8 @@ import { ReactNode } from 'react'
 
 import { NotificationProps } from '../notification'
 
+export type ToastDuration = 'fast' | 'slow' | 'sticky'
+
 export interface ToastListItem {
   id: string
   component?: ReactNode
@@ -14,6 +16,7 @@ export interface ToastSetup {
 
 export interface ToastOptions extends NotificationProps {
   id?: string
-  duration?: number
+  duration?: ToastDuration
+  /** @deprecated According to new UX requirements all toasts should be dismissible */
   dismissible?: boolean
 }