@veracity/vui 0.3.2 → 0.5.0

package/system/custom.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wordBreak = exports.spaceAround = exports.maxLines = exports.isTruncated = void 0;
+exports.wordBreak = exports.maxLines = exports.isTruncated = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 /** Provides styling to truncate single-line text. */
 exports.isTruncated = (0, styled_components_1.style)({
@@ -27,20 +27,6 @@ exports.maxLines = (0, styled_components_1.style)({
     },
     states: {}
 });
-exports.spaceAround = (0, styled_components_1.style)({
-    prop: 'spaceAround',
-    themeGet: styled_components_1.getSpace,
-    cssProperty: function (value) {
-        return {
-            '&': {
-                margin: '-' + value
-            },
-            '& > *': {
-                margin: value
-            }
-        };
-    }
-});
 exports.wordBreak = (0, styled_components_1.style)({
     prop: 'wordBreak'
 });

package/system/effects.d.ts

@@ -1,19 +1,19 @@
-import { SystemProp } from '@xstyled/system';
+import { SystemProp, VariantsType } from '@xstyled/system';
 import * as CSS from 'csstype';
 import { VuiTheme } from '../theme';
 import { AnyString } from '../utils';
-export declare type ShadowGetter = keyof VuiTheme['shadows'] | AnyString;
+export declare type ShadowGetter = VariantsType<VuiTheme['shadows']>;
 declare type OpacityProp = SystemProp<CSS.Property.Opacity, VuiTheme>;
 export declare type OpacityProps = {
     opacity?: OpacityProp;
     hoverOpacity?: OpacityProp;
 };
-declare type BoxShadowProp = SystemProp<ShadowGetter, VuiTheme>;
+declare type BoxShadowProp = SystemProp<ShadowGetter | AnyString, VuiTheme>;
 export declare type BoxShadowProps = {
     boxShadow?: BoxShadowProp;
     hoverBoxShadow?: BoxShadowProp;
 };
-declare type TextShadowProp = SystemProp<ShadowGetter, VuiTheme>;
+declare type TextShadowProp = SystemProp<ShadowGetter | AnyString, VuiTheme>;
 export declare type TextShadowProps = {
     textShadow?: TextShadowProp;
 };

package/system/grids.d.ts

@@ -1,7 +1,9 @@
-import { SystemProp } from '@xstyled/system';
+import { SystemProp, VariantsType } from '@xstyled/system';
 import * as CSS from 'csstype';
 import { VuiTheme } from '../theme';
 import { SpaceGetter } from './space';
+export declare type GridTemplateColumnsGetter = VariantsType<VuiTheme['gridTemplateColumns']>;
+export declare type GridTemplateRowsGetter = VariantsType<VuiTheme['gridTemplateRows']>;
 declare type GapProp = SystemProp<SpaceGetter | CSS.Property.Gap, VuiTheme>;
 export declare type GapProps = {
     gap?: GapProp;
@@ -34,11 +36,11 @@ declare type GridAutoRowsProp = SystemProp<CSS.Property.GridAutoRows, VuiTheme>;
 export declare type GridAutoRowsProps = {
     gridAutoRows?: GridAutoRowsProp;
 };
-declare type GridTemplateColumnsProp = SystemProp<CSS.Property.GridTemplateColumns, VuiTheme>;
+declare type GridTemplateColumnsProp = SystemProp<GridTemplateColumnsGetter | CSS.Property.GridTemplateColumns, VuiTheme>;
 export declare type GridTemplateColumnsProps = {
     gridTemplateColumns?: GridTemplateColumnsProp;
 };
-declare type GridTemplateRowsProp = SystemProp<CSS.Property.GridTemplateRows, VuiTheme>;
+declare type GridTemplateRowsProp = SystemProp<GridTemplateRowsGetter | CSS.Property.GridTemplateRows, VuiTheme>;
 export declare type GridTemplateRowsProps = {
     gridTemplateRows?: GridTemplateRowsProp;
 };

package/system/system.d.ts

@@ -1,7 +1,7 @@
 import { AnimationsProps } from './animations';
 import { BackgroundColorProps } from './backgrounds';
 import { BordersProps } from './borders';
-import { IsTruncatedProps, MaxLinesProps, SpaceAroundProps, WordBreakProps } from './custom';
+import { IsTruncatedProps, MaxLinesProps, WordBreakProps } from './custom';
 import { EffectsProps } from './effects';
 import { FlexboxesProps } from './flexboxes';
 import { FlexboxGridsProps } from './flexboxGrids';
@@ -14,6 +14,6 @@ import { TablesProps } from './tables';
 import { TransformsProps } from './transforms';
 import { TransitionsProps } from './transitions';
 import { TypographyProps } from './typography';
-export declare type SystemProps = AnimationsProps & BackgroundColorProps & BordersProps & EffectsProps & FlexboxesProps & FlexboxGridsProps & GridsProps & InteractivityProps & IsTruncatedProps & LayoutProps & MaxLinesProps & SizingProps & SpaceProps & SpaceAroundProps & TablesProps & TransformsProps & TransitionsProps & TypographyProps & WordBreakProps;
+export declare type SystemProps = AnimationsProps & BackgroundColorProps & BordersProps & EffectsProps & FlexboxesProps & FlexboxGridsProps & GridsProps & InteractivityProps & IsTruncatedProps & LayoutProps & MaxLinesProps & SizingProps & SpaceProps & TablesProps & TransformsProps & TransitionsProps & TypographyProps & WordBreakProps;
 export declare const system: import("@xstyled/styled-components").StyleGenerator;
 export default system;

package/system/system.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.system = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var custom_1 = require("./custom");
-exports.system = (0, styled_components_1.compose)(styled_components_1.animation, styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.flexboxGrids, styled_components_1.grids, styled_components_1.interactivity, custom_1.isTruncated, styled_components_1.layout, custom_1.maxLines, styled_components_1.sizing, styled_components_1.space, custom_1.spaceAround, styled_components_1.tables, styled_components_1.transforms, styled_components_1.transitions, styled_components_1.typography, custom_1.wordBreak);
+exports.system = (0, styled_components_1.compose)(styled_components_1.animation, styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.flexboxGrids, styled_components_1.grids, styled_components_1.interactivity, custom_1.isTruncated, styled_components_1.layout, custom_1.maxLines, styled_components_1.sizing, styled_components_1.space, styled_components_1.tables, styled_components_1.transforms, styled_components_1.transitions, styled_components_1.typography, custom_1.wordBreak);
 exports.default = exports.system;

package/system/transitions.d.ts

@@ -1,9 +1,9 @@
 import { SystemProp, VariantsType } from '@xstyled/system';
 import { VuiTheme } from '../theme';
 export declare type DurationGetter = VariantsType<VuiTheme['durations']>;
+export declare type TimingFunctionGetter = VariantsType<VuiTheme['timingFunctions']>;
 export declare type TransitionGetter = VariantsType<VuiTheme['transitions']>;
 export declare type TransitionPropertyGetter = VariantsType<unknown>;
-export declare type TimingFunctionGetter = VariantsType<unknown>;
 declare type TransitionProp = SystemProp<TransitionGetter, VuiTheme>;
 export declare type TransitionProps = {
     transition?: TransitionProp;

package/tag/tag.js

@@ -80,7 +80,6 @@ exports.Tag = (0, core_1.vui)(function (props, ref) {
             cursor: 'pointer',
             hoverBg: hoverBg,
             activeBg: activeBg,
-            focusRing: 3,
             tabIndex: 0,
             userSelect: 'none'
         }
@@ -93,7 +92,7 @@ exports.Tag = (0, core_1.vui)(function (props, ref) {
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(context_1.TagProvider, { value: context },
-        react_1.default.createElement(exports.TagBase, __assign({ className: (0, utils_1.cs)('vui-tag', className), h: h, onClick: !disabled ? onClick : undefined, pl: pl, pr: pr, ref: ref }, tagStyles, interactiveProps, aliasedProps, rest),
+        react_1.default.createElement(exports.TagBase, __assign({ className: (0, utils_1.cs)('vui-tag', className), focusRing: 2, h: h, onClick: !disabled ? onClick : undefined, pl: pl, pr: pr, ref: ref }, tagStyles, interactiveProps, aliasedProps, rest),
             (0, utils_1.isString)(icon) ? react_1.default.createElement(tagIcon_1.default, { name: icon }) : icon,
             !icon && (react_1.default.createElement(react_1.default.Fragment, null,
                 itemLeft,

package/tag/tag.types.d.ts

@@ -2,7 +2,6 @@
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
 export declare type TagProps = SystemProps & ThemingProps<'Tag'> & {
     /** Alias for textTransform prop. @deprecated */
     casing?: TypographyProps['textTransform'];
@@ -11,11 +10,11 @@ export declare type TagProps = SystemProps & ThemingProps<'Tag'> & {
     /** Displays tag and its content in disabled state with appropriate styling. */
     disabled?: boolean;
     /** Icon that replaces any other content. */
-    icon?: IconProp | AnyElement;
+    icon?: IconProp | JSX.Element;
     /** Socket displaying icon on the left side. */
-    iconLeft?: IconProp | AnyElement;
+    iconLeft?: IconProp | JSX.Element;
     /** Socket displaying icon on the right side. */
-    iconRight?: IconProp | AnyElement;
+    iconRight?: IconProp | JSX.Element;
     /** Makes the button take full width of the container. @deprecated */
     isFullWidth?: boolean;
     /** Makes item clickable and focusable with appropriate styling. */

package/tag/theme.d.ts

@@ -5,6 +5,7 @@ declare function variantSolid(props: Dict): {
         activeBg: string;
         bg: string;
         color: string;
+        focusRing: number;
     };
     button: {
         hoverBg: string;

package/tag/theme.js

@@ -6,7 +6,8 @@ function variantSolid(props) {
         hoverBg: c + ".90",
         activeBg: c + ".100",
         bg: c + ".80",
-        color: 'white'
+        color: 'white',
+        focusRing: 3
     };
     var button = {
         hoverBg: c + ".70",

package/textarea/textarea.js

@@ -70,8 +70,8 @@ var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
 var helpers_1 = require("./helpers");
-var TextareaTextarea = core_1.styled.textareaBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-radius: md;\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tpadding: 1;\n\tresize: none;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\tborder-radius: md;\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tpadding: 1;\n\tresize: none;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"])));
-exports.TextareaBase = core_1.styled.divBox(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n"
+var TextareaTextarea = core_1.styled.textareaBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-radius: md;\n\tborder-width: 1px;\n\toutline: none;\n\tpadding: 1;\n\tresize: none;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\tborder-radius: md;\n\tborder-width: 1px;\n\toutline: none;\n\tpadding: 1;\n\tresize: none;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"])));
+exports.TextareaBase = core_1.styled.divBox(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n"], ["\n\tdisplay: flex;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n"
     /**
      * Displays a textarea element wrapped in a div to allow extra content, like counter.
      * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.

package/theme/components.d.ts

@@ -117,6 +117,7 @@ declare const _default: {
                 container: {
                     borderColor: string;
                     hoverBorderColor: string;
+                    focusRing: number;
                     hoverBg: string;
                     activeBg: string;
                     bg: string;
@@ -155,6 +156,7 @@ declare const _default: {
                     borderColor: string;
                     borderWidth: number;
                     color: string;
+                    focusRing: number;
                 };
             };
         };
@@ -211,6 +213,27 @@ declare const _default: {
             };
         };
     };
+    Dialog: {
+        baseStyle: {};
+        defaultProps: {
+            size: string;
+        };
+        parts: string[];
+        sizes: {
+            md: {
+                container: {
+                    maxW: number;
+                };
+            };
+            lg: {
+                container: {
+                    maxW: number;
+                };
+            };
+            fullWidth: {};
+        };
+        variants: {};
+    };
     Divider: {
         baseStyle: {};
         defaultProps: {};
@@ -224,24 +247,85 @@ declare const _default: {
         sizes: {};
         variants: {};
     };
+    Grid: {
+        baseStyle: {};
+        defaultProps: {};
+        sizes: {};
+        variants: {};
+    };
     Header: {
         baseStyle: {};
         defaultProps: {};
         parts: string[];
         sizes: {};
         variants: {
-            test: {
+            dark: {
                 container: {
                     bg: string;
-                    color: string;
+                    borderBottom: number;
                 };
-                profile: {
-                    content: {
-                        color: string;
-                    };
+                account: {
                     trigger: {
+                        bg: string;
                         color: string;
-                        name: string;
+                        hoverBg: string;
+                        activeBg: string;
+                    };
+                };
+                createAccount: {
+                    link: {
+                        color: {
+                            xs: string;
+                            md: string;
+                        };
+                        hoverColor: {
+                            xs: string;
+                            md: string;
+                        };
+                    };
+                    text: {
+                        color: {
+                            md: string;
+                        };
+                    };
+                };
+                divider: {
+                    borderColor: string;
+                };
+                linkItem: {
+                    container: {
+                        hoverBg: {
+                            xs: string;
+                            md: string;
+                        };
+                        activeBg: {
+                            xs: string;
+                            md: string;
+                        };
+                    };
+                    link: {
+                        borderColor: string;
+                    };
+                };
+                logo: {
+                    svg: {
+                        pathFill: string;
+                    };
+                };
+                mainLinks: {
+                    color: {
+                        md: string;
+                    };
+                };
+                mobileContent: {
+                    top: string;
+                };
+                mobileToggle: {
+                    variant: string;
+                };
+                notifications: {
+                    container: {
+                        variant: string;
                     };
                 };
                 services: {
@@ -499,8 +583,7 @@ declare const _default: {
                 };
                 item: {
                     display: string;
-                    h: undefined;
-                    lineHeight: number;
+                    h: string;
                 };
             };
             unordered: {
@@ -511,8 +594,7 @@ declare const _default: {
                 };
                 item: {
                     display: string;
-                    h: undefined;
-                    lineHeight: number;
+                    h: string;
                 };
             };
         };
@@ -537,6 +619,13 @@ declare const _default: {
         };
         variants: {};
     };
+    Modal: {
+        baseStyle: {};
+        defaultProps: {};
+        parts: string[];
+        sizes: {};
+        variants: {};
+    };
     Notification: {
         baseStyle: {};
         defaultProps: {
@@ -906,6 +995,7 @@ declare const _default: {
                     activeBg: string;
                     bg: string;
                     color: string;
+                    focusRing: number;
                 };
                 button: {
                     hoverBg: string;

package/theme/components.js

@@ -8,52 +8,58 @@ var theme_2 = __importDefault(require("../box/theme"));
 var theme_3 = __importDefault(require("../button/theme"));
 var theme_4 = __importDefault(require("../card/theme"));
 var theme_5 = __importDefault(require("../checkbox/theme"));
-var theme_6 = __importDefault(require("../divider/theme"));
-var theme_7 = __importDefault(require("../footer/theme"));
-var theme_8 = __importDefault(require("../header/theme"));
-var theme_9 = __importDefault(require("../heading/theme"));
-var theme_10 = __importDefault(require("../icon/theme"));
-var theme_11 = __importDefault(require("../image/theme"));
-var theme_12 = __importDefault(require("../input/theme"));
-var theme_13 = __importDefault(require("../link/theme"));
-var theme_14 = __importDefault(require("../list/theme"));
-var theme_15 = __importDefault(require("../menu/theme"));
-var theme_16 = __importDefault(require("../notification/theme"));
-var theme_17 = __importDefault(require("../p/theme"));
-var theme_18 = __importDefault(require("../panel/theme"));
-var theme_19 = __importDefault(require("../popover/theme"));
-var theme_20 = __importDefault(require("../radio/theme"));
-var theme_21 = __importDefault(require("../skeleton/theme"));
-var theme_22 = __importDefault(require("../spinner/theme"));
-var theme_23 = __importDefault(require("../switch/theme"));
-var theme_24 = __importDefault(require("../t/theme"));
-var theme_25 = __importDefault(require("../tag/theme"));
-var theme_26 = __importDefault(require("../textarea/theme"));
+var theme_6 = __importDefault(require("../dialog/theme"));
+var theme_7 = __importDefault(require("../divider/theme"));
+var theme_8 = __importDefault(require("../footer/theme"));
+var theme_9 = __importDefault(require("../grid/theme"));
+var theme_10 = __importDefault(require("../header/theme"));
+var theme_11 = __importDefault(require("../heading/theme"));
+var theme_12 = __importDefault(require("../icon/theme"));
+var theme_13 = __importDefault(require("../image/theme"));
+var theme_14 = __importDefault(require("../input/theme"));
+var theme_15 = __importDefault(require("../link/theme"));
+var theme_16 = __importDefault(require("../list/theme"));
+var theme_17 = __importDefault(require("../menu/theme"));
+var theme_18 = __importDefault(require("../modal/theme"));
+var theme_19 = __importDefault(require("../notification/theme"));
+var theme_20 = __importDefault(require("../p/theme"));
+var theme_21 = __importDefault(require("../panel/theme"));
+var theme_22 = __importDefault(require("../popover/theme"));
+var theme_23 = __importDefault(require("../radio/theme"));
+var theme_24 = __importDefault(require("../skeleton/theme"));
+var theme_25 = __importDefault(require("../spinner/theme"));
+var theme_26 = __importDefault(require("../switch/theme"));
+var theme_27 = __importDefault(require("../t/theme"));
+var theme_28 = __importDefault(require("../tag/theme"));
+var theme_29 = __importDefault(require("../textarea/theme"));
 exports.default = {
     Avatar: theme_1.default,
     Box: theme_2.default,
     Button: theme_3.default,
     Card: theme_4.default,
     Checkbox: theme_5.default,
-    Divider: theme_6.default,
-    Footer: theme_7.default,
-    Header: theme_8.default,
-    Heading: theme_9.default,
-    Icon: theme_10.default,
-    Image: theme_11.default,
-    Input: theme_12.default,
-    Link: theme_13.default,
-    List: theme_14.default,
-    Menu: theme_15.default,
-    Notification: theme_16.default,
-    P: theme_17.default,
-    Panel: theme_18.default,
-    Popover: theme_19.default,
-    Radio: theme_20.default,
-    Skeleton: theme_21.default,
-    Spinner: theme_22.default,
-    Switch: theme_23.default,
-    T: theme_24.default,
-    Tag: theme_25.default,
-    Textarea: theme_26.default
+    Dialog: theme_6.default,
+    Divider: theme_7.default,
+    Footer: theme_8.default,
+    Grid: theme_9.default,
+    Header: theme_10.default,
+    Heading: theme_11.default,
+    Icon: theme_12.default,
+    Image: theme_13.default,
+    Input: theme_14.default,
+    Link: theme_15.default,
+    List: theme_16.default,
+    Menu: theme_17.default,
+    Modal: theme_18.default,
+    Notification: theme_19.default,
+    P: theme_20.default,
+    Panel: theme_21.default,
+    Popover: theme_22.default,
+    Radio: theme_23.default,
+    Skeleton: theme_24.default,
+    Spinner: theme_25.default,
+    Switch: theme_26.default,
+    T: theme_27.default,
+    Tag: theme_28.default,
+    Textarea: theme_29.default
 };