@veracity/vui 0.2.0 → 0.2.2

package/list/index.js

@@ -17,6 +17,7 @@ exports.default = void 0;
 __exportStar(require("./context"), exports);
 __exportStar(require("./list"), exports);
 __exportStar(require("./list.types"), exports);
+__exportStar(require("./listDivider"), exports);
 __exportStar(require("./listHeading"), exports);
 __exportStar(require("./listIcon"), exports);
 __exportStar(require("./listItem"), exports);

package/list/list.d.ts

@@ -1,4 +1,5 @@
 import { ListProps } from './list.types';
+import ListDivider from './listDivider';
 import ListHeading from './listHeading';
 import ListIcon from './listIcon';
 import ListItem from './listItem';
@@ -7,6 +8,7 @@ import { VuiComponent } from '../core';
 import { SystemProps } from '../system';
 export declare const ListBase: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const List: VuiComponent<"ul", ListProps> & {
+    Divider: typeof ListDivider;
     Heading: typeof ListHeading;
     Icon: typeof ListIcon;
     Item: typeof ListItem;

package/list/list.js

@@ -52,6 +52,7 @@ exports.List = exports.ListBase = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
+var listDivider_1 = __importDefault(require("./listDivider"));
 var listHeading_1 = __importDefault(require("./listHeading"));
 var listIcon_1 = __importDefault(require("./listIcon"));
 var listItem_1 = __importDefault(require("./listItem"));
@@ -59,22 +60,18 @@ var listText_1 = __importDefault(require("./listText"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.ListBase = styled_components_1.default.ul.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
-exports.List = core_1.vui(function (props, ref) {
+exports.ListBase = styled_components_1.default.ul.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.List = (0, core_1.vui)(function (props, ref) {
     var children = props.children, className = props.className, colorScheme = props.colorScheme, heading = props.heading, isInteractive = props.isInteractive, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "heading", "isInteractive", "size", "variant"]);
-    var styles = core_1.useStyleConfig('List', props);
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, styles: styles, variant: variant }); }, [
-        colorScheme,
-        isInteractive,
-        size,
-        variant
-    ]);
+    var styles = (0, core_1.useStyleConfig)('List', props);
+    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, variant: variant }); }, [colorScheme, isInteractive, size, variant]);
     return (react_1.default.createElement(context_1.ListProvider, { value: context },
-        react_1.default.createElement(exports.ListBase, __assign({ className: utils_1.cs('vui-list', className), ref: ref }, styles.container, rest),
-            utils_1.isReactText(heading) ? react_1.default.createElement(listHeading_1.default, { text: heading }) : heading,
+        react_1.default.createElement(exports.ListBase, __assign({ className: (0, utils_1.cs)('vui-list', className), ref: ref }, styles.container, rest),
+            (0, utils_1.isReactText)(heading) ? react_1.default.createElement(listHeading_1.default, { text: heading }) : heading,
             children)));
 });
 exports.List.displayName = 'List';
+exports.List.Divider = listDivider_1.default;
 exports.List.Heading = listHeading_1.default;
 exports.List.Icon = listIcon_1.default;
 exports.List.Item = listItem_1.default;

package/list/listDivider.d.ts

@@ -0,0 +1,3 @@
+import { DividerProps } from '../divider';
+export declare const ListDivider: import("../core").VuiComponent<"hr", DividerProps>;
+export default ListDivider;

package/list/listDivider.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListDivider = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var divider_1 = __importDefault(require("../divider"));
+exports.ListDivider = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, listProps), props);
+    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
+    return react_1.default.createElement(divider_1.default, __assign({ className: "vui-listDivider", ref: ref }, styles.divider, props));
+});
+exports.ListDivider.displayName = 'ListDivider';
+exports.default = exports.ListDivider;

package/list/listHeading.js

@@ -19,12 +19,12 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = require("../t");
-exports.ListHeading = core_1.vui(function (props, ref) {
+exports.ListHeading = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
+    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = core_1.useStyleConfig('List', mergedProps);
-    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", color: "grey.80", display: "inline-block", fontSize: "sm", px: 1, py: 0.5, ref: ref, textTransform: "uppercase", weight: "medium" }, styles.heading, props)));
+    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
+    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", display: "inline-block", p: 1, ref: ref, weight: "demi" }, styles.heading, props)));
 });
 exports.ListHeading.displayName = 'ListHeading';
 exports.default = exports.ListHeading;

package/list/listIcon.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
-exports.ListIcon = core_1.vui(function (props, ref) {
+exports.ListIcon = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
+    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = core_1.useStyleConfig('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
     return react_1.default.createElement(icon_1.default, __assign({ className: "vui-listIcon", ref: ref }, styles.icon, props));
 });
 exports.ListIcon.displayName = 'ListIcon';

package/list/listItem.js

@@ -38,12 +38,12 @@ var listText_1 = __importDefault(require("./listText"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.ListItemBase = styled_components_1.default.li.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\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\tmargin-bottom: 1px;\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"])), system_1.system);
-exports.ListItem = core_1.vui(function (props, ref) {
-    var listProps = context_1.useList();
+exports.ListItemBase = styled_components_1.default.li.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\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\tmargin-bottom: 1px;\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"])), system_1.system);
+exports.ListItem = (0, core_1.vui)(function (props, ref) {
+    var listProps = (0, context_1.useList)();
     var mergedProps = __assign(__assign({}, listProps), props);
     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, iconLeft = mergedProps.iconLeft, iconRight = mergedProps.iconRight, _b = mergedProps.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isSelected = mergedProps.isSelected, isTruncated = mergedProps.isTruncated, itemLeft = mergedProps.itemLeft, itemRight = mergedProps.itemRight, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconLeft", "iconRight", "isInteractive", "isSelected", "isTruncated", "itemLeft", "itemRight", "onClick", "text"]);
-    var styles = core_1.useStyleConfig('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
     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';
@@ -58,17 +58,17 @@ exports.ListItem = core_1.vui(function (props, ref) {
             userSelect: 'none'
         }
         : {};
-    var aliasedProps = utils_1.filterUndefined({
+    var aliasedProps = (0, utils_1.filterUndefined)({
         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), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
+    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: (0, utils_1.cs)('vui-listItem', className), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
         itemLeft,
-        utils_1.isString(iconLeft) ? react_1.default.createElement(listIcon_1.default, { mr: 1, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : (utils_1.isReactText(text) ? react_1.default.createElement(listText_1.default, { isTruncated: isTruncated, text: text }) : text),
-        utils_1.isString(iconRight) ? react_1.default.createElement(listIcon_1.default, { ml: "auto", name: iconRight }) : iconRight,
+        (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(listIcon_1.default, { mr: 1, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(listText_1.default, { isTruncated: isTruncated, text: text }) : text),
+        (0, utils_1.isString)(iconRight) ? react_1.default.createElement(listIcon_1.default, { ml: "auto", name: iconRight }) : iconRight,
         itemRight));
 });
 exports.ListItem.displayName = 'ListItem';

package/list/listText.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
-exports.ListText = core_1.vui(function (props, ref) {
+exports.ListText = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
+    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = core_1.useStyleConfig('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
     return react_1.default.createElement(t_1.default, __assign({ className: "vui-listText", fontSize: "inherit", ref: ref }, styles.text, props));
 });
 exports.ListText.displayName = 'ListText';

package/list/theme.d.ts

@@ -1,10 +1,6 @@
 import { Dict } from '../utils';
 declare function variantDefault(props: Dict): {
-    container: {};
-    heading: {};
-    icon: {};
     item: Dict<any>;
-    text: {};
 };
 declare const _default: {
     defaultProps: {
@@ -15,8 +11,6 @@ declare const _default: {
     parts: string[];
     sizes: {
         sm: {
-            container: {};
-            heading: {};
             icon: {
                 size: string;
             };
@@ -24,11 +18,8 @@ declare const _default: {
                 fontSize: string;
                 h: number;
             };
-            text: {};
         };
         md: {
-            container: {};
-            heading: {};
             icon: {
                 size: string;
             };
@@ -36,11 +27,8 @@ declare const _default: {
                 fontSize: string;
                 h: number;
             };
-            text: {};
         };
         lg: {
-            container: {};
-            heading: {};
             item: {
                 fontSize: string;
                 h: number;
@@ -48,11 +36,8 @@ declare const _default: {
             icon: {
                 size: string;
             };
-            text: {};
         };
         xl: {
-            container: {};
-            heading: {};
             item: {
                 fontSize: string;
                 h: number;
@@ -60,7 +45,6 @@ declare const _default: {
             icon: {
                 scale: number;
             };
-            text: {};
         };
     };
     variants: {

package/list/theme.js

@@ -7,66 +7,50 @@ function variantDefault(props) {
         borderRadius: 'md',
         hoverBg: c + ".20"
     };
-    var container = {};
-    var heading = {};
-    var icon = {};
-    var text = {};
-    return { container: container, heading: heading, icon: icon, item: item, text: text };
+    return { item: item };
 }
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
     variant: 'default'
 };
-var parts = ['container', 'heading', 'icon', 'item', 'text'];
+var parts = ['container', 'divider', 'heading', 'icon', 'item', 'text'];
 var sizes = {
     sm: {
-        container: {},
-        heading: {},
         icon: {
             size: 'sm'
         },
         item: {
             fontSize: 'md',
             h: 32
-        },
-        text: {}
+        }
     },
     md: {
-        container: {},
-        heading: {},
         icon: {
             size: 'md'
         },
         item: {
             fontSize: 'md',
             h: 40
-        },
-        text: {}
+        }
     },
     lg: {
-        container: {},
-        heading: {},
         item: {
             fontSize: 'md',
             h: 48
         },
         icon: {
             size: 'lg'
-        },
-        text: {}
+        }
     },
     xl: {
-        container: {},
-        heading: {},
         item: {
             fontSize: 'lg',
             h: 56
         },
         icon: {
             scale: 2
-        },
-        text: {}
+        }
     }
 };
 var variants = {

package/notification/context.js

@@ -18,6 +18,6 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useNotification = exports.NotificationProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), NotificationProvider = _a[0], useNotification = _a[1];
+var _a = __read((0, core_1.createContext)({ isOptional: true }), 2), NotificationProvider = _a[0], useNotification = _a[1];
 exports.NotificationProvider = NotificationProvider;
 exports.useNotification = useNotification;

package/notification/notification.js

@@ -55,23 +55,18 @@ var notificationTitle_1 = __importDefault(require("./notificationTitle"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-exports.Notification = core_1.vui(function (props, ref) {
+exports.Notification = (0, core_1.vui)(function (props, ref) {
     var _a, _b, _c;
     var action = props.action, children = props.children, className = props.className, _d = props.colorScheme, colorSchemeProp = _d === void 0 ? 'blue' : _d, icon = props.icon, onClose = props.onClose, size = props.size, _e = props.status, status = _e === void 0 ? '' : _e, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
     var statuses = __assign(__assign({}, consts_1.notificationStatusMapping), statusMapping);
     var _f = ((_a = statuses[status]) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _f === void 0 ? colorSchemeProp : _f;
-    var styles = core_1.useStyleConfig('Notification', __assign({ colorScheme: colorScheme }, props));
-    var iconName = utils_1.isString(icon) ? icon : (_c = (_b = statuses[status]) === null || _b === void 0 ? void 0 : _b.iconProps) === null || _c === void 0 ? void 0 : _c.name;
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, size: size, status: status, variant: variant }); }, [
-        colorScheme,
-        size,
-        status,
-        variant
-    ]);
+    var styles = (0, core_1.useStyleConfig)('Notification', __assign({ colorScheme: colorScheme }, props));
+    var iconName = (0, utils_1.isString)(icon) ? icon : (_c = (_b = statuses[status]) === null || _b === void 0 ? void 0 : _b.iconProps) === null || _c === void 0 ? void 0 : _c.name;
+    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, size: size, status: status, variant: variant }); }, [colorScheme, size, status, variant]);
     return (react_1.default.createElement(context_1.NotificationProvider, { value: context },
-        react_1.default.createElement(box_1.default, __assign({ borderRadius: "md", className: utils_1.cs('vui-notification', className), px: 1.5, py: 1, ref: ref, w: "fit-content" }, styles.container, rest),
+        react_1.default.createElement(box_1.default, __assign({ borderRadius: "md", className: (0, utils_1.cs)('vui-notification', className), px: 1.5, py: 1, ref: ref, w: "fit-content" }, styles.container, rest),
             iconName ? react_1.default.createElement(notificationIcon_1.default, { name: iconName }) : icon, children !== null && children !== void 0 ? children : (react_1.default.createElement(notificationText_1.default, null,
-            utils_1.isReactText(title) ? react_1.default.createElement(notificationTitle_1.default, { text: title }) : title,
+            (0, utils_1.isReactText)(title) ? react_1.default.createElement(notificationTitle_1.default, { text: title }) : title,
             " ",
             text)),
             action,

package/notification/notificationButton.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var button_1 = __importDefault(require("../button"));
-exports.NotificationButton = core_1.vui(function (props, ref) {
+exports.NotificationButton = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var notificationProps = (_a = context_1.useNotification()) !== null && _a !== void 0 ? _a : {};
+    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, notificationProps), props);
-    var styles = core_1.useStyleConfig('Notification', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
     return (react_1.default.createElement(button_1.default, __assign({ className: "vui-notificationButton", colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm" }, styles.button, props)));
 });
 exports.NotificationButton.displayName = 'NotificationButton';

package/notification/notificationIcon.js

@@ -20,11 +20,11 @@ var consts_1 = require("./consts");
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
-exports.NotificationIcon = core_1.vui(function (props, ref) {
+exports.NotificationIcon = (0, core_1.vui)(function (props, ref) {
     var _a, _b;
-    var notificationProps = (_a = context_1.useNotification()) !== null && _a !== void 0 ? _a : {};
+    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, notificationProps), props);
-    var styles = core_1.useStyleConfig('Notification', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
     var _c = mergedProps.status, status = _c === void 0 ? '' : _c;
     var iconProps = ((_b = consts_1.notificationStatusMapping[status]) !== null && _b !== void 0 ? _b : {}).iconProps;
     return (react_1.default.createElement(icon_1.default, __assign({ className: "vui-notificationIcon", mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, iconProps, props)));

package/notification/notificationText.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
-exports.NotificationText = core_1.vui(function (props, ref) {
+exports.NotificationText = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var notificationProps = (_a = context_1.useNotification()) !== null && _a !== void 0 ? _a : {};
+    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, notificationProps), props);
-    var styles = core_1.useStyleConfig('Notification', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
     return (react_1.default.createElement(t_1.default, __assign({ className: "vui-notificationText", flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref }, styles.text, props)));
 });
 exports.NotificationText.displayName = 'NotificationText';

package/notification/notificationTitle.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var heading_1 = require("../heading");
-exports.NotificationTitle = core_1.vui(function (props, ref) {
+exports.NotificationTitle = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var notificationProps = (_a = context_1.useNotification()) !== null && _a !== void 0 ? _a : {};
+    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, notificationProps), props);
-    var styles = core_1.useStyleConfig('Notification', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
     return react_1.default.createElement(heading_1.H6, __assign({ className: "vui-notificationTitle", display: "inline-flex", ref: ref }, styles.title, props));
 });
 exports.NotificationTitle.displayName = 'NotificationTitle';

package/p/p.js

@@ -35,17 +35,17 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.PBase = styled_components_1.default.p.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
-exports.P = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
-    var styles = core_1.useStyleConfig('P', props);
-    var aliasedProps = utils_1.filterUndefined({
+exports.PBase = styled_components_1.default.p.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.P = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
+    var styles = (0, core_1.useStyleConfig)('P', props);
+    var aliasedProps = (0, utils_1.filterUndefined)({
         fontWeight: weight,
         textAlign: align,
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.PBase, __assign({ className: utils_1.cs('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
+    return (react_1.default.createElement(exports.PBase, __assign({ className: (0, utils_1.cs)('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.P.displayName = 'P';
 exports.default = exports.P;

package/package.json

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

package/panel/panel.js

@@ -30,10 +30,10 @@ var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-exports.Panel = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
-    var styles = core_1.useStyleConfig('Panel', props);
-    return (react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", className: utils_1.cs('vui-panel', className), p: 2, ref: ref }, styles, rest)));
+exports.Panel = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), className = _a.className, rest = __rest(_a, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Panel', props);
+    return (react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", className: (0, utils_1.cs)('vui-panel', className), p: 2, ref: ref }, styles, rest)));
 });
 exports.Panel.displayName = 'Panel';
 exports.default = exports.Panel;

package/radio/context.js

@@ -18,6 +18,6 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRadioGroup = exports.RadioGroupProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), RadioGroupProvider = _a[0], useRadioGroup = _a[1];
+var _a = __read((0, core_1.createContext)({ isOptional: true }), 2), RadioGroupProvider = _a[0], useRadioGroup = _a[1];
 exports.RadioGroupProvider = RadioGroupProvider;
 exports.useRadioGroup = useRadioGroup;

package/radio/radio.js

@@ -14,6 +14,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,12 +44,28 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = exports.RadioControl = exports.RadioBase = exports.RadioInput = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
@@ -39,24 +74,34 @@ var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
 exports.RadioInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
-exports.RadioBase = styled_components_1.default.label.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th.color(p.controlHoverColor)(p); }, system_1.system);
-exports.RadioControl = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
-exports.Radio = core_1.vui(function (props, ref) {
-    var _a;
-    var _b = (_a = context_1.useRadioGroup()) !== null && _a !== void 0 ? _a : {}, groupOnChange = _b.onChange, groupValue = _b.value, radioGroupProps = __rest(_b, ["onChange", "value"]);
+exports.RadioBase = styled_components_1.default.label.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th.color(p.controlHoverColor)(p); }, system_1.system);
+exports.RadioControl = styled_components_1.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
+exports.Radio = (0, core_1.vui)(function (props, ref) {
+    var _a, _b;
+    var _c = (_a = (0, context_1.useRadioGroup)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _c.defaultValue, groupIsChecked = _c.isChecked, groupOnChange = _c.onChange, groupValue = _c.value, radioGroupProps = __rest(_c, ["defaultValue", "isChecked", "onChange", "value"]);
+    var defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined;
     var mergedProps = __assign(__assign({}, radioGroupProps), props);
-    var _c = core_1.omitThemingProps(mergedProps), _d = _c.checked, checked = _d === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _d, children = _c.children, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, _e = _c.icon, iconProp = _e === void 0 ? 'cuiRadioUnselected' : _e, _f = _c.iconChecked, iconChecked = _f === void 0 ? 'cuiRadioSelected' : _f, id = _c.id, inputProps = _c.inputProps, inputRef = _c.inputRef, label = _c.label, name = _c.name, onChange = _c.onChange, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "id", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
-    var styles = core_1.useStyleConfig('Radio', mergedProps);
-    var _g = styles.control, controlColor = _g.color, hoverColor = _g.hoverColor, controlStyles = __rest(_g, ["color", "hoverColor"]);
-    var icon = checked ? iconChecked : iconProp;
+    var _d = (0, core_1.omitThemingProps)(mergedProps), _e = _d.checked, checked = _e === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _e, children = _d.children, className = _d.className, _f = _d.defaultChecked, defaultChecked = _f === void 0 ? groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined : _f, disabled = _d.disabled, _g = _d.icon, iconProp = _g === void 0 ? 'cuiRadioUnselected' : _g, _h = _d.iconChecked, iconChecked = _h === void 0 ? 'cuiRadioSelected' : _h, id = _d.id, inputProps = _d.inputProps, inputRef = _d.inputRef, label = _d.label, name = _d.name, onChange = _d.onChange, required = _d.required, value = _d.value, rest = __rest(_d, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "id", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
+    var _j = __read((0, react_1.useState)((_b = defaultIsChecked !== null && defaultIsChecked !== void 0 ? defaultIsChecked : checked) !== null && _b !== void 0 ? _b : defaultChecked), 2), isChecked = _j[0], setIsChecked = _j[1];
+    var styles = (0, core_1.useStyleConfig)('Radio', mergedProps);
+    var _k = styles.control, controlColor = _k.color, hoverColor = _k.hoverColor, controlStyles = __rest(_k, ["color", "hoverColor"]);
+    var icon = isChecked ? iconChecked : iconProp;
     var controlMr = children || label ? 1 : 0;
-    var color = checked ? controlColor : 'grey.60';
-    var controlHoverColor = checked ? hoverColor : 'grey.90';
+    var color = isChecked ? controlColor : 'grey.60';
+    var controlHoverColor = isChecked ? hoverColor : 'grey.90';
+    (0, react_1.useEffect)(function () {
+        if (groupIsChecked !== undefined) {
+            setIsChecked(groupIsChecked === value);
+        }
+        else if (checked !== undefined) {
+            setIsChecked(checked);
+        }
+    }, [checked, groupIsChecked]);
     function handleOnChange(e) {
         groupOnChange === null || groupOnChange === void 0 ? void 0 : groupOnChange(e);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }
-    return (react_1.default.createElement(exports.RadioBase, __assign({ className: utils_1.cs('vui-radio', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
+    return (react_1.default.createElement(exports.RadioBase, __assign({ className: (0, utils_1.cs)('vui-radio', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
         react_1.default.createElement(exports.RadioControl, __assign({ borderRadius: "50%", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, transitionDuration: "fast" }, controlStyles),
             react_1.default.createElement(exports.RadioInput, __assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
             react_1.default.createElement(icon_1.default, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label), label)))));

package/radio/radio.types.d.ts

@@ -1,8 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
+import { ChangeEventHandler, FocusEventHandler } from '../utils';
 export interface RadioProps extends SystemProps, ThemingProps<'Radio'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'prussian';