@veracity/vui 0.0.4 → 0.0.6

package/alert/alertButton.js

@@ -24,7 +24,7 @@ exports.AlertButton = core_1.forwardRef(function (props, ref) {
     var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, alertProps), props);
     var styles = core_1.useStyleConfig('Alert', mergedProps);
-    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-alertButton", colorScheme: mergedProps.colorScheme, ml: 0.5, mr: -0.5, ref: ref, size: "sm" }, styles.button, props)));
+    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-alertButton", colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm" }, styles.button, props)));
 });
 exports.AlertButton.displayName = 'AlertButton';
 exports.default = exports.AlertButton;

package/checkbox/checkbox.types.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
 import { BackgroundColorProps, BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
@@ -14,9 +15,9 @@ export interface CheckboxProps extends CheckboxStyleProps, ThemingProps<'Checkbo
     isIndeterminate?: boolean;
     label?: string;
     name?: string;
-    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
     required?: boolean;
     value?: number | string;
 }

package/checkbox/checkboxGroup.types.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
+import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface CheckboxGroupProps extends CheckboxGroupStyleProps, ThemingProps<'Checkbox'> {
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     name?: string;
-    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
     row?: boolean;
 }
 export interface CheckboxGroupStyleProps extends FlexboxesProps, SizingProps, SpaceProps {

package/core/resetCSS.js

@@ -5,5 +5,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = require("styled-components");
-exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml {\n\tbox-sizing: border-box;\n\tline-height: 1.5;\n\t-webkit-text-size-adjust: 100%;\n}\n\n*, *::before, *::after {\n\tborder-style: solid;\n\tborder-width: 0;\n\tbox-sizing: inherit;\n}\n\nbody {\n\tmargin: 0;\n}\n\na {\n\tbackground-color: transparent;\n\ttext-decoration: none;\n}\n\nabbr[title] {\n\tborder-bottom: none;\n\ttext-decoration: underline dotted;\n}\n\nb, strong {\n\tfont-weight: bolder;\n}\n\nbutton {\n\tcursor: pointer;\n\t-webkit-appearance: button;\n}\n\nbutton, input, optgroup, select, textarea {\n\tfont-family: inherit;\n\tfont-size: 100%;\n\tmargin: 0;\n}\n\nbutton, select {\n\ttext-transform: none;\n}\n\ncode, kbd, pre, samp {\n\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\tfont-size: 1em;\n}\n\ndetails {\n\tdisplay: block;\n}\n\nfieldset {\n\tpadding: 0.35em 0.75em 0.625em;\n}\n\nh1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\tmargin: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n\tfont-size: inherit;\n\tfont-weight: inherit;\n}\n\nhr {\n\tcolor: inherit;\n\theight: 0;\n}\n\nimg {\n\tborder-style: none;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n\tdisplay: block;\n}\n\nlegend {\n\tcolor: inherit;\n\tdisplay: table;\n\tmax-width: 100%;\n\tpadding: 0;\n\twhite-space: normal;\n}\n\nmain {\n\tdisplay: block;\n}\n\nol, ul  {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nprogress {\n\tvertical-align: baseline;\n}\n\nsummary {\n\tdisplay: list-item;\n}\n\nsmall {\n\tfont-size: 80%;\n}\n\nsub, sup {\n\tfont-size: 75%;\n\tline-height: 0;\n\tposition: relative;\n\tvertical-align: baseline;\n}\n\nsub {\n\tbottom: -0.25em;\n}\n\nsup {\n\ttop: -0.5em;\n}\n\ntable {\n\ttext-indent: 0;\n\tborder-color: inherit;\n}\n\ntemplate {\n\tdisplay: none;\n}\n\ntextarea {\n\toverflow: auto;\n}\n\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n::-webkit-file-upload-button {\n\tfont: inherit;\n\t-webkit-appearance: button;\n}\n\n[type=checkbox], [type=radio] {\n\tpadding: 0;\n}\n\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n[type=search] {\n\toutline-offset: -2px;\n\t-webkit-appearance: textfield;\n}\n\n[type=search]::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n[hidden] {\n\tdisplay: none;\n}\n"], ["\nhtml {\n\tbox-sizing: border-box;\n\tline-height: 1.5;\n\t-webkit-text-size-adjust: 100%;\n}\n\n*, *::before, *::after {\n\tborder-style: solid;\n\tborder-width: 0;\n\tbox-sizing: inherit;\n}\n\nbody {\n\tmargin: 0;\n}\n\na {\n\tbackground-color: transparent;\n\ttext-decoration: none;\n}\n\nabbr[title] {\n\tborder-bottom: none;\n\ttext-decoration: underline dotted;\n}\n\nb, strong {\n\tfont-weight: bolder;\n}\n\nbutton {\n\tcursor: pointer;\n\t-webkit-appearance: button;\n}\n\nbutton, input, optgroup, select, textarea {\n\tfont-family: inherit;\n\tfont-size: 100%;\n\tmargin: 0;\n}\n\nbutton, select {\n\ttext-transform: none;\n}\n\ncode, kbd, pre, samp {\n\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\tfont-size: 1em;\n}\n\ndetails {\n\tdisplay: block;\n}\n\nfieldset {\n\tpadding: 0.35em 0.75em 0.625em;\n}\n\nh1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\tmargin: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n\tfont-size: inherit;\n\tfont-weight: inherit;\n}\n\nhr {\n\tcolor: inherit;\n\theight: 0;\n}\n\nimg {\n\tborder-style: none;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n\tdisplay: block;\n}\n\nlegend {\n\tcolor: inherit;\n\tdisplay: table;\n\tmax-width: 100%;\n\tpadding: 0;\n\twhite-space: normal;\n}\n\nmain {\n\tdisplay: block;\n}\n\nol, ul  {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nprogress {\n\tvertical-align: baseline;\n}\n\nsummary {\n\tdisplay: list-item;\n}\n\nsmall {\n\tfont-size: 80%;\n}\n\nsub, sup {\n\tfont-size: 75%;\n\tline-height: 0;\n\tposition: relative;\n\tvertical-align: baseline;\n}\n\nsub {\n\tbottom: -0.25em;\n}\n\nsup {\n\ttop: -0.5em;\n}\n\ntable {\n\ttext-indent: 0;\n\tborder-color: inherit;\n}\n\ntemplate {\n\tdisplay: none;\n}\n\ntextarea {\n\toverflow: auto;\n}\n\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n::-webkit-file-upload-button {\n\tfont: inherit;\n\t-webkit-appearance: button;\n}\n\n[type=checkbox], [type=radio] {\n\tpadding: 0;\n}\n\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n[type=search] {\n\toutline-offset: -2px;\n\t-webkit-appearance: textfield;\n}\n\n[type=search]::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n[hidden] {\n\tdisplay: none;\n}\n"])));
+exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml {\n\tbox-sizing: border-box;\n\tline-height: 1.4;\n\t-webkit-text-size-adjust: 100%;\n}\n\n*, *::before, *::after {\n\tborder-style: solid;\n\tborder-width: 0;\n\tbox-sizing: inherit;\n}\n\nbody {\n\tmargin: 0;\n}\n\na {\n\tbackground-color: transparent;\n\tcolor: inherit;\n\ttext-decoration: none;\n}\n\nabbr[title] {\n\tborder-bottom: none;\n\ttext-decoration: underline dotted;\n}\n\nb, strong {\n\tfont-weight: bolder;\n}\n\nbutton {\n\tcursor: pointer;\n\t-webkit-appearance: button;\n}\n\nbutton, input, optgroup, select, textarea {\n\tfont-family: inherit;\n\tfont-size: 100%;\n\tmargin: 0;\n}\n\nbutton, select {\n\ttext-transform: none;\n}\n\ncode, kbd, pre, samp {\n\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\tfont-size: 1em;\n}\n\ndetails {\n\tdisplay: block;\n}\n\nfieldset {\n\tpadding: 0.35em 0.75em 0.625em;\n}\n\nh1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\tmargin: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n\tfont-size: inherit;\n\tfont-weight: inherit;\n}\n\nhr {\n\tcolor: inherit;\n\theight: 0;\n}\n\nimg {\n\tborder-style: none;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n\tdisplay: block;\n}\n\nlegend {\n\tcolor: inherit;\n\tdisplay: table;\n\tmax-width: 100%;\n\tpadding: 0;\n\twhite-space: normal;\n}\n\nmain {\n\tdisplay: block;\n}\n\nol, ul  {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nprogress {\n\tvertical-align: baseline;\n}\n\nsummary {\n\tdisplay: list-item;\n}\n\nsmall {\n\tfont-size: 80%;\n}\n\nsub, sup {\n\tfont-size: 75%;\n\tline-height: 0;\n\tposition: relative;\n\tvertical-align: baseline;\n}\n\nsub {\n\tbottom: -0.25em;\n}\n\nsup {\n\ttop: -0.5em;\n}\n\ntable {\n\ttext-indent: 0;\n\tborder-color: inherit;\n}\n\ntemplate {\n\tdisplay: none;\n}\n\ntextarea {\n\toverflow: auto;\n}\n\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n::-webkit-file-upload-button {\n\tfont: inherit;\n\t-webkit-appearance: button;\n}\n\n[type=checkbox], [type=radio] {\n\tpadding: 0;\n}\n\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n[type=search] {\n\toutline-offset: -2px;\n\t-webkit-appearance: textfield;\n}\n\n[type=search]::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n[hidden] {\n\tdisplay: none;\n}\n"], ["\nhtml {\n\tbox-sizing: border-box;\n\tline-height: 1.4;\n\t-webkit-text-size-adjust: 100%;\n}\n\n*, *::before, *::after {\n\tborder-style: solid;\n\tborder-width: 0;\n\tbox-sizing: inherit;\n}\n\nbody {\n\tmargin: 0;\n}\n\na {\n\tbackground-color: transparent;\n\tcolor: inherit;\n\ttext-decoration: none;\n}\n\nabbr[title] {\n\tborder-bottom: none;\n\ttext-decoration: underline dotted;\n}\n\nb, strong {\n\tfont-weight: bolder;\n}\n\nbutton {\n\tcursor: pointer;\n\t-webkit-appearance: button;\n}\n\nbutton, input, optgroup, select, textarea {\n\tfont-family: inherit;\n\tfont-size: 100%;\n\tmargin: 0;\n}\n\nbutton, select {\n\ttext-transform: none;\n}\n\ncode, kbd, pre, samp {\n\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\tfont-size: 1em;\n}\n\ndetails {\n\tdisplay: block;\n}\n\nfieldset {\n\tpadding: 0.35em 0.75em 0.625em;\n}\n\nh1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\tmargin: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n\tfont-size: inherit;\n\tfont-weight: inherit;\n}\n\nhr {\n\tcolor: inherit;\n\theight: 0;\n}\n\nimg {\n\tborder-style: none;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n\tdisplay: block;\n}\n\nlegend {\n\tcolor: inherit;\n\tdisplay: table;\n\tmax-width: 100%;\n\tpadding: 0;\n\twhite-space: normal;\n}\n\nmain {\n\tdisplay: block;\n}\n\nol, ul  {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nprogress {\n\tvertical-align: baseline;\n}\n\nsummary {\n\tdisplay: list-item;\n}\n\nsmall {\n\tfont-size: 80%;\n}\n\nsub, sup {\n\tfont-size: 75%;\n\tline-height: 0;\n\tposition: relative;\n\tvertical-align: baseline;\n}\n\nsub {\n\tbottom: -0.25em;\n}\n\nsup {\n\ttop: -0.5em;\n}\n\ntable {\n\ttext-indent: 0;\n\tborder-color: inherit;\n}\n\ntemplate {\n\tdisplay: none;\n}\n\ntextarea {\n\toverflow: auto;\n}\n\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n::-webkit-file-upload-button {\n\tfont: inherit;\n\t-webkit-appearance: button;\n}\n\n[type=checkbox], [type=radio] {\n\tpadding: 0;\n}\n\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n[type=search] {\n\toutline-offset: -2px;\n\t-webkit-appearance: textfield;\n}\n\n[type=search]::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n[hidden] {\n\tdisplay: none;\n}\n"])));
 var templateObject_1;

package/core/types/component.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/** Merges component/element base props, custom props and 'as' prop */
+export declare type ComponentProps<C extends React.ElementType, Props = {}> = RightJoinProps<React.ComponentPropsWithRef<C>, Props>;
+/** Merges props definitions, overriding source keys */
+export declare type RightJoinProps<SourceProps, OverrideProps> = OverrideProps & Omit<SourceProps, keyof OverrideProps>;
+/** VUI Component definition supporting custom props, 'as' props and 'ref' */
+export interface VuiComponent<C extends React.ElementType, Props = {}> {
+    <AsC extends React.ElementType>(props: ComponentProps<AsC, Props> & {
+        as: AsC;
+    }): JSX.Element;
+    <AsC extends React.ElementType>(props: ComponentProps<AsC, Props> & {
+        forwardedAs: AsC;
+    }): JSX.Element;
+    (props: ComponentProps<C, Props>): JSX.Element;
+    defaultProps?: Partial<ComponentProps<C, Props>>;
+    displayName?: string;
+}

package/core/types/component.js

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

package/core/types/context.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface CreateContextOptions {
+    /** Message displayed when context is used outside of the provider */
+    errorMessage?: string;
+    /** Accessing context outside of provider won't throw error */
+    isOptional?: boolean;
+    /** Name of the context */
+    name?: string;
+}
+export declare type CreateContextReturn<T> = [React.Provider<T>, () => T];

package/core/types/context.js

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

package/core/types/events.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/** Type of change event defaulted to input element */
+export declare type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>;
+/** Type of change event handler defaulted to input element */
+export declare type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>;
+/** Type of blur/focus event defaulted to any html element */
+export declare type FocusEvent<T = HTMLElement> = React.FocusEvent<T>;
+/** Type of blur/focus event handler defaulted to any html element */
+export declare type FocusEventHandler<T = HTMLElement> = React.FocusEventHandler<T>;
+/** Type of mouse event defaulted to any html element */
+export declare type MouseEvent<T = HTMLElement> = React.MouseEvent<T>;
+/** Type of mouse event handler defaulted to any html element */
+export declare type MouseEventHandler<T = HTMLElement> = React.MouseEventHandler<T>;

package/core/types/events.js

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

package/core/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './component';
+export * from './context';
+export * from './events';

package/core/types/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./component"), exports);
+__exportStar(require("./context"), exports);
+__exportStar(require("./events"), exports);

package/core/types.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
+/** Type of change event defaulted to input element */
+export declare type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>;
+/** Type of change event handler defaulted to input element */
+export declare type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>;
 export interface CreateContextOptions {
     /** Message displayed when context is used outside of the provider */
     errorMessage?: string;
@@ -16,7 +20,12 @@ export declare type ComponentProps<C extends React.ElementType, Props = {}> = Ri
 /** Merges component/element base props, custom props, 'as' prop and 'ref' */
 export declare type ComponentPropsWithRef<C extends React.ElementType, Props = {}> = RightJoinProps<React.ComponentPropsWithRef<C>, Props & {
     as?: C;
+    forwardedAs?: C;
 }>;
+/** Type of blur/focus event defaulted to input element */
+export declare type FocusEvent<T = HTMLInputElement> = React.FocusEvent<T>;
+/** Type of blur/focus event handler defaulted to input element */
+export declare type FocusEventHandler<T = HTMLInputElement> = React.FocusEventHandler<T>;
 /** Strips call signature from ForwardRefExoticComponent */
 export declare type ForwardRefExoticBase<P> = Pick<React.ForwardRefExoticComponent<P>, keyof React.ForwardRefExoticComponent<any>>;
 /** Merges two props definitions without conflicts */

package/input/input.types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { inputLengths } from './consts';
+import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
 import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
@@ -21,9 +22,9 @@ export interface InputProps extends InputStyleProps, ThemingProps<'Input'> {
     itemRight?: React.ReactNode;
     length?: InputLength;
     name?: string;
-    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
     placeholder?: string;
     readOnly?: boolean;
     required?: boolean;

package/list/list.js

@@ -57,7 +57,7 @@ var listIcon_1 = __importDefault(require("./listIcon"));
 var listItem_1 = __importDefault(require("./listItem"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.sizing, styled_components_1.space, styled_components_1.typography);
+var generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.typography);
 exports.ListBase = styled_components_2.default.ul.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
 exports.List = core_1.forwardRef(function (props, ref) {
     var children = props.children, className = props.className, colorScheme = props.colorScheme, isInteractive = props.isInteractive, size = props.size, subheader = props.subheader, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "isInteractive", "size", "subheader", "variant"]);

package/list/list.types.d.ts

@@ -1,4 +1,4 @@
-import { SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface ListProps extends ListStyleProps, ThemingProps<'List'> {
     colorScheme?: 'blue' | 'grey';
@@ -6,5 +6,5 @@ export interface ListProps extends ListStyleProps, ThemingProps<'List'> {
     isInteractive?: boolean;
     subheader?: string;
 }
-export interface ListStyleProps extends SizingProps, SpaceProps, TransitionsProps, TypographyProps {
+export interface ListStyleProps extends FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/list/listItem.js

@@ -38,17 +38,20 @@ var listIcon_1 = __importDefault(require("./listIcon"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.ListItemBase = styled_components_2.default.li.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), generator);
+exports.ListItemBase = styled_components_2.default.li.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), generator);
 exports.ListItem = core_1.forwardRef(function (props, ref) {
     var listProps = context_1.useList();
     var mergedProps = __assign(__assign({}, listProps), props);
-    var children = mergedProps.children, className = mergedProps.className, disabled = mergedProps.disabled, iconRight = mergedProps.iconRight, iconLeft = mergedProps.iconLeft, _a = mergedProps.isInteractive, isInteractive = _a === void 0 ? props.onClick !== undefined : _a, isSelected = mergedProps.isSelected, onClick = mergedProps.onClick, rest = __rest(mergedProps, ["children", "className", "disabled", "iconRight", "iconLeft", "isInteractive", "isSelected", "onClick"]);
+    var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconRight = mergedProps.iconRight, iconLeft = mergedProps.iconLeft, _b = mergedProps.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isSelected = mergedProps.isSelected, onClick = mergedProps.onClick, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconRight", "iconLeft", "isInteractive", "isSelected", "onClick"]);
     var styles = core_1.useStyleConfig('List', mergedProps);
-    var _b = styles.item, activeBg = _b.activeBg, hoverBg = _b.hoverBg, itemStyles = __rest(_b, ["activeBg", "hoverBg"]);
+    var _c = styles.item, activeBg = _c.activeBg, hoverBg = _c.hoverBg, itemStyles = __rest(_c, ["activeBg", "hoverBg"]);
+    var alignItems = (center || (column ? centerH : centerV)) && 'center';
+    var flexDirection = column && 'column';
+    var justifyContent = (center || (column ? centerV : centerH)) && 'center';
     var interactiveProps = !disabled && isInteractive
         ? {
             cursor: 'pointer',
-            focusVisibleRing: 3,
+            focusVisibleRing: 2,
             hoverBg: hoverBg,
             activeBg: activeBg,
             tabIndex: 0,
@@ -56,9 +59,13 @@ exports.ListItem = core_1.forwardRef(function (props, ref) {
         }
         : {};
     var aliasedProps = utils_1.filterUndefined({
-        bg: isSelected ? hoverBg : undefined
+        alignItems: alignItems,
+        bg: isSelected ? hoverBg : undefined,
+        'data-disabled': disabled,
+        flexDirection: flexDirection,
+        justifyContent: justifyContent
     });
-    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: utils_1.cs('vui-listItem', className, disabled && 'disabled'), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
+    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: utils_1.cs('vui-listItem', className), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
         iconLeft && react_1.default.createElement(listIcon_1.default, { icon: iconLeft, mr: 1 }),
         children,
         iconRight && react_1.default.createElement(listIcon_1.default, { icon: iconRight, ml: "auto" })));

package/list/listItem.types.d.ts

@@ -2,7 +2,11 @@ import { IconProp } from '../icon';
 import { BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface ListItemProps extends ListItemStyleProps, ThemingProps<'List'> {
+    center?: boolean;
+    centerH?: boolean;
+    centerV?: boolean;
     colorScheme?: 'blue' | 'grey';
+    column?: boolean;
     disabled?: boolean;
     iconLeft?: IconProp;
     iconRight?: IconProp;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Veracity UI components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",

package/radio/radio.types.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
 import { BackgroundColorProps, BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
@@ -12,9 +13,9 @@ export interface RadioProps extends RadioStyleProps, ThemingProps<'Radio'> {
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     label?: string;
     name?: string;
-    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
     required?: boolean;
     value?: number | string;
 }

package/radio/radioGroup.types.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
+import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface RadioGroupProps extends RadioGroupStyleProps, ThemingProps<'Radio'> {
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     name?: string;
-    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
     row?: boolean;
     value?: number | string;
 }

package/switch/switch.types.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface SwitchProps extends SwitchStyleProps, ThemingProps<'Switch'> {
@@ -12,9 +13,9 @@ export interface SwitchProps extends SwitchStyleProps, ThemingProps<'Switch'> {
     labelLeft?: React.ReactElement | string;
     labelRight?: React.ReactElement | string;
     name?: string;
-    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
     required?: boolean;
     value?: number | string;
 }

package/switch/switchButton.types.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { BackgroundColorProps, BordersProps, ColorProps, FontSizeProps, SizingProps, SpaceProps, TransformsProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface SwitchButtonProps extends SwitchThumbStyleProps, ThemingProps<'Switch'> {
@@ -10,9 +11,9 @@ export interface SwitchButtonProps extends SwitchThumbStyleProps, ThemingProps<'
     inputProps?: HTMLAttributes<HTMLInputElement>;
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     name?: string;
-    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
     required?: boolean;
     value?: number | string;
 }