@veracity/vui 0.2.4 → 0.3.1

package/icons/baseIcons/types.d.ts

@@ -1 +1 @@
-export declare type BaseIcon = 'cuiCheckboxIndeterminate' | 'cuiCheckboxSelected' | 'cuiCheckboxUnselected' | 'cuiRadioSelected' | 'cuiRadioUnselected' | 'culApiProduct' | 'culApiService' | 'culCovid' | 'culDeepSearch' | 'culDotsMenu' | 'culGlobePlus' | 'culListDense' | 'culMapMarkerStar' | 'culPlusThin' | 'culScreenshot' | 'culScreenshotAlt' | 'culShortcut' | 'culTimesThin' | 'culTransformer' | 'culUserTransfer' | 'culVeracityService' | 'culVessel' | 'culVesselGroup' | 'cusDotFull' | 'cusDotFullAlt' | 'cusDotsMenu' | 'cusTransformer' | 'cusVessel' | 'fabApplePay' | 'fabBluetooth' | 'fabBtc' | 'fabCcAmazonPay' | 'fabCcAmex' | 'fabCcApplePay' | 'fabCcDinersClub' | 'fabCcMastercard' | 'fabCcPaypal' | 'fabCcVisa' | 'fabDhl' | 'fabEbay' | 'fabFacebook' | 'fabFedex' | 'fabFirefox' | 'fabGoogle' | 'fabGoogleDrive' | 'fabLinkedinIn' | 'fabMedium' | 'fabOsi' | 'fabSlack' | 'fabTwitter' | 'fabUps' | 'fadSpinnerThird' | 'falAddressBook' | 'falAddressCard' | 'falAnalytics' | 'falAngleDoubleDown' | 'falAngleDoubleLeft' | 'falAngleDoubleRight' | 'falAngleDoubleUp' | 'falAngleDown' | 'falAngleLeft' | 'falAngleRight' | 'falAngleUp' | 'falArrowAltDown' | 'falArrowAltLeft' | 'falArrowAltRight' | 'falArrowAltUp' | 'falArrowCircleDown' | 'falArrowCircleLeft' | 'falArrowCircleRight' | 'falArrowCircleUp' | 'falArrowDown' | 'falArrowFromBottom' | 'falArrowFromLeft' | 'falArrowFromRight' | 'falArrowFromTop' | 'falArrowLeft' | 'falArrowRight' | 'falArrowToBottom' | 'falArrowToLeft' | 'falArrowToRight' | 'falArrowToTop' | 'falArrowUp' | 'falArrows' | 'falAward' | 'falBan' | 'falBars' | 'falBell' | 'falBookOpen' | 'falBroadcastTower' | 'falBroom' | 'falBuilding' | 'falBullseye' | 'falCalendar' | 'falCalendarAlt' | 'falCamera' | 'falCaretDown' | 'falCaretLeft' | 'falCaretRight' | 'falCaretUp' | 'falCauldron' | 'falChartArea' | 'falChartBar' | 'falChartLineDown' | 'falChartLine' | 'falChartNetwork' | 'falChartPie' | 'falChartPieAlt' | 'falChartScatter' | 'falCheckCircle' | 'falCheckSquare' | 'falCheck' | 'falChevronCircleDown' | 'falChevronCircleLeft' | 'falChevronCircleRight' | 'falChevronCircleUp' | 'falChevronDoubleDown' | 'falChevronDoubleLeft' | 'falChevronDoubleRight' | 'falChevronDoubleUp' | 'falChevronDown' | 'falChevronLeft' | 'falChevronRight' | 'falChevronUp' | 'falCircle' | 'falCloudShowersHeavy' | 'falCloudSnow' | 'falCloudSunRain' | 'falCloudSun' | 'falCloudUpload' | 'falCloud' | 'falCode' | 'falCog' | 'falCogs' | 'falComment' | 'falCommentAlt' | 'falCompressAlt' | 'falCopy' | 'falCreditCard' | 'falDatabase' | 'falDotCircle' | 'falDownload' | 'falEdit' | 'falEllipsisH' | 'falEllipsisV' | 'falEnvelope' | 'falExchange' | 'falExclamationCircle' | 'falExclamationTriangle' | 'falExpandAlt' | 'falExternalLink' | 'falEye' | 'falEyeSlash' | 'falFile' | 'falFilePdf' | 'falFileAlt' | 'falFileArchive' | 'falFileAudio' | 'falFileCertificate' | 'falFileChartLine' | 'falFileChartPie' | 'falFileCheck' | 'falFileCode' | 'falFileCsv' | 'falFileEdit' | 'falFileExcel' | 'falFileImage' | 'falFilePlus' | 'falFilePowerpoint' | 'falFileSpreadsheet' | 'falFileVideo' | 'falFileWord' | 'falFilter' | 'falFlag' | 'falFolderOpen' | 'falFolderPlus' | 'falFolder' | 'falFolders' | 'falGlassesAlt' | 'falGlobe' | 'falHome' | 'falHourglass' | 'falImage' | 'falInfoCircle' | 'falKey' | 'falLayerPlus' | 'falLink' | 'falList' | 'falLockAlt' | 'falLongArrowDown' | 'falLongArrowLeft' | 'falLongArrowRight' | 'falLongArrowUp' | 'falMapMarked' | 'falMapMarkedAlt' | 'falMapMarkerAlt' | 'falMapMarkerAltSlash' | 'falMapMarkerCheck' | 'falMapMarkerExclamation' | 'falMapMarker' | 'falMap' | 'falMinus' | 'falPause' | 'falPauseCircle' | 'falPen' | 'falPlay' | 'falPlayCircle' | 'falPlug' | 'falPlusSquare' | 'falPlus' | 'falPlusCircle' | 'falPrint' | 'falPuzzlePiece' | 'falReceipt' | 'falRedo' | 'falSave' | 'falSearch' | 'falSearchMinus' | 'falSearchPlus' | 'falServer' | 'falShareAll' | 'falShare' | 'falShareAlt' | 'falShieldAlt' | 'falShieldCheck' | 'falShip' | 'falShoppingBasket' | 'falSignIn' | 'falSignInAlt' | 'falSignOut' | 'falSignOutAlt' | 'falSlidersV' | 'falSnowBlowing' | 'falSnowflake' | 'falSolarPanel' | 'falSort' | 'falSpinner' | 'falSquare' | 'falStepForward' | 'falStop' | 'falStopCircle' | 'falStopwatch' | 'falSuitcase' | 'falSun' | 'falSync' | 'falTachometer' | 'falTemperatureHigh' | 'falThLarge' | 'falThList' | 'falTh' | 'falTimesCircle' | 'falTimes' | 'falToggleOff' | 'falToggleOn' | 'falTrashAlt' | 'falUnlockAlt' | 'falUserChart' | 'falUserCircle' | 'falUserCog' | 'falUserEdit' | 'falUserFriends' | 'falUserPlus' | 'falUserShield' | 'falUserTimes' | 'falUser' | 'falUsersClass' | 'falUsers' | 'falWater' | 'falWindTurbine' | 'falWind' | 'falWrench' | 'fasCaretDown' | 'fasCaretLeft' | 'fasCaretRight' | 'fasCaretUp' | 'fasCheckCircle' | 'fasDiamond' | 'fasFolder' | 'fasMapMarkerAlt' | 'fasMapMarkerExclamation' | 'fasQuoteLeft' | 'fasQuoteRight' | 'fasSolarPanel' | 'fasSort' | 'fasStar' | 'fasWindTurbine';
+export declare type BaseIcon = 'cubPowerBi' | 'cubVeracity' | 'cuiCheckboxIndeterminate' | 'cuiCheckboxSelected' | 'cuiCheckboxUnselected' | 'cuiRadioSelected' | 'cuiRadioUnselected' | 'culApiProduct' | 'culApiService' | 'culCircleChart' | 'culCircleChartAlt' | 'culCovid' | 'culDeepSearch' | 'culDotsMenu' | 'culGlobePlus' | 'culListDense' | 'culMapMarkerStar' | 'culNumber1' | 'culPlusThin' | 'culScreenshot' | 'culScreenshotAlt' | 'culShortcut' | 'culTarget' | 'culTimesThin' | 'culTransformer' | 'culUserTransfer' | 'culVeracityService' | 'culVessel' | 'culVesselGroup' | 'cusDotFull' | 'cusDotFullAlt' | 'cusDotsMenu' | 'cusTransformer' | 'cusVessel' | 'fabApplePay' | 'fabBluetooth' | 'fabBtc' | 'fabCcAmazonPay' | 'fabCcAmex' | 'fabCcApplePay' | 'fabCcDinersClub' | 'fabCcMastercard' | 'fabCcPaypal' | 'fabCcVisa' | 'fabDhl' | 'fabEbay' | 'fabFacebook' | 'fabFedex' | 'fabFirefox' | 'fabGoogle' | 'fabGoogleDrive' | 'fabLinkedinIn' | 'fabMedium' | 'fabOsi' | 'fabSlack' | 'fabTwitter' | 'fabUps' | 'fabYoutube' | 'fadSpinnerThird' | 'falAddressBook' | 'falAddressCard' | 'falAnalytics' | 'falAngleDoubleDown' | 'falAngleDoubleLeft' | 'falAngleDoubleRight' | 'falAngleDoubleUp' | 'falAngleDown' | 'falAngleLeft' | 'falAngleRight' | 'falAngleUp' | 'falArrowAltDown' | 'falArrowAltLeft' | 'falArrowAltRight' | 'falArrowAltUp' | 'falArrowCircleDown' | 'falArrowCircleLeft' | 'falArrowCircleRight' | 'falArrowCircleUp' | 'falArrowDown' | 'falArrowFromBottom' | 'falArrowFromLeft' | 'falArrowFromRight' | 'falArrowFromTop' | 'falArrowLeft' | 'falArrowRight' | 'falArrowToBottom' | 'falArrowToLeft' | 'falArrowToRight' | 'falArrowToTop' | 'falArrowUp' | 'falArrows' | 'falAward' | 'falBan' | 'falBars' | 'falBell' | 'falBookOpen' | 'falBroadcastTower' | 'falBroom' | 'falBuilding' | 'falBullseye' | 'falCalendar' | 'falCalendarAlt' | 'falCamera' | 'falCaretDown' | 'falCaretLeft' | 'falCaretRight' | 'falCaretUp' | 'falCauldron' | 'falChartArea' | 'falChartBar' | 'falChartLine' | 'falChartLineDown' | 'falChartNetwork' | 'falChartPie' | 'falChartPieAlt' | 'falChartScatter' | 'falCheck' | 'falCheckCircle' | 'falCheckSquare' | 'falChevronCircleDown' | 'falChevronCircleLeft' | 'falChevronCircleRight' | 'falChevronCircleUp' | 'falChevronDoubleDown' | 'falChevronDoubleLeft' | 'falChevronDoubleRight' | 'falChevronDoubleUp' | 'falChevronDown' | 'falChevronLeft' | 'falChevronRight' | 'falChevronUp' | 'falCircle' | 'falCloud' | 'falCloudShowersHeavy' | 'falCloudSnow' | 'falCloudSun' | 'falCloudSunRain' | 'falCloudUpload' | 'falCode' | 'falCog' | 'falCogs' | 'falComment' | 'falCommentAlt' | 'falCompressAlt' | 'falCopy' | 'falCreditCard' | 'falDatabase' | 'falDotCircle' | 'falDownload' | 'falEdit' | 'falEllipsisH' | 'falEllipsisV' | 'falEnvelope' | 'falExchange' | 'falExclamationCircle' | 'falExclamationTriangle' | 'falExpandAlt' | 'falExternalLink' | 'falEye' | 'falEyeSlash' | 'falFile' | 'falFileAlt' | 'falFileArchive' | 'falFileAudio' | 'falFileCertificate' | 'falFileChartLine' | 'falFileChartPie' | 'falFileCheck' | 'falFileCode' | 'falFileCsv' | 'falFileEdit' | 'falFileExcel' | 'falFileImage' | 'falFilePdf' | 'falFilePlus' | 'falFilePowerpoint' | 'falFileSpreadsheet' | 'falFileVideo' | 'falFileWord' | 'falFilter' | 'falFlag' | 'falFolder' | 'falFolderOpen' | 'falFolderPlus' | 'falFolders' | 'falGlassesAlt' | 'falGlobe' | 'falHome' | 'falHourglass' | 'falImage' | 'falInfoCircle' | 'falKey' | 'falLayerGroup' | 'falLayerPlus' | 'falLink' | 'falList' | 'falLockAlt' | 'falLongArrowDown' | 'falLongArrowLeft' | 'falLongArrowRight' | 'falLongArrowUp' | 'falMap' | 'falMapMarked' | 'falMapMarkedAlt' | 'falMapMarker' | 'falMapMarkerAlt' | 'falMapMarkerAltSlash' | 'falMapMarkerCheck' | 'falMapMarkerExclamation' | 'falMinus' | 'falPause' | 'falPauseCircle' | 'falPen' | 'falPlay' | 'falPlayCircle' | 'falPlug' | 'falPlus' | 'falPlusCircle' | 'falPlusSquare' | 'falPrint' | 'falPuzzlePiece' | 'falQuestionCircle' | 'falReceipt' | 'falRedo' | 'falSave' | 'falSearch' | 'falSearchMinus' | 'falSearchPlus' | 'falServer' | 'falShare' | 'falShareAll' | 'falShareAlt' | 'falShieldAlt' | 'falShieldCheck' | 'falShip' | 'falShoppingBasket' | 'falSignIn' | 'falSignInAlt' | 'falSignOut' | 'falSignOutAlt' | 'falSlidersV' | 'falSnowBlowing' | 'falSnowflake' | 'falSolarPanel' | 'falSort' | 'falSpinner' | 'falSquare' | 'falStepForward' | 'falStop' | 'falStopCircle' | 'falStopwatch' | 'falSuitcase' | 'falSun' | 'falSync' | 'falTachometer' | 'falTemperatureHigh' | 'falTh' | 'falThLarge' | 'falThList' | 'falTimes' | 'falTimesCircle' | 'falToggleOff' | 'falToggleOn' | 'falTrashAlt' | 'falUnlockAlt' | 'falUser' | 'falUserChart' | 'falUserCircle' | 'falUserCog' | 'falUserEdit' | 'falUserFriends' | 'falUserPlus' | 'falUserShield' | 'falUserTimes' | 'falUsers' | 'falUsersClass' | 'falWater' | 'falWind' | 'falWindTurbine' | 'falWrench' | 'fasCalendarAlt' | 'fasCaretDown' | 'fasCaretLeft' | 'fasCaretRight' | 'fasCaretUp' | 'fasCheckCircle' | 'fasDiamond' | 'fasFolder' | 'fasMapMarkerAlt' | 'fasMapMarkerExclamation' | 'fasQuoteLeft' | 'fasQuoteRight' | 'fasSolarPanel' | 'fasSort' | 'fasStar' | 'fasWindTurbine';

package/index.d.ts

@@ -6,6 +6,7 @@ export * from './card';
 export * from './checkbox';
 export * from './core';
 export * from './divider';
+export * from './footer';
 export * from './heading';
 export * from './icon';
 export * from './icons';
@@ -13,9 +14,11 @@ export * from './image';
 export * from './input';
 export * from './link';
 export * from './list';
+export * from './menu';
 export * from './notification';
 export * from './p';
 export * from './panel';
+export * from './popover';
 export * from './radio';
 export * from './skeleton';
 export * from './spinner';

package/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./card"), exports);
 __exportStar(require("./checkbox"), exports);
 __exportStar(require("./core"), exports);
 __exportStar(require("./divider"), exports);
+__exportStar(require("./footer"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./icon"), exports);
 __exportStar(require("./icons"), exports);
@@ -25,9 +26,11 @@ __exportStar(require("./image"), exports);
 __exportStar(require("./input"), exports);
 __exportStar(require("./link"), exports);
 __exportStar(require("./list"), exports);
+__exportStar(require("./menu"), exports);
 __exportStar(require("./notification"), exports);
 __exportStar(require("./p"), exports);
 __exportStar(require("./panel"), exports);
+__exportStar(require("./popover"), exports);
 __exportStar(require("./radio"), exports);
 __exportStar(require("./skeleton"), exports);
 __exportStar(require("./spinner"), exports);

package/input/context.js

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

package/link/context.js

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

package/link/link.js

@@ -57,7 +57,7 @@ var linkText_1 = __importDefault(require("./linkText"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.LinkBase = styled_components_1.default.a.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"])), system_1.system);
+exports.LinkBase = styled_components_1.default.a.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"])), system_1.system);
 exports.Link = (0, core_1.vui)(function (props, ref) {
     var children = props.children, className = props.className, colorScheme = props.colorScheme, decoration = props.decoration, disabled = props.disabled, _a = props.hoverDecoration, hoverDecoration = _a === void 0 ? 'underline' : _a, iconLeft = props.iconLeft, iconRight = props.iconRight, isExternal = props.isExternal, isUnderlined = props.isUnderlined, size = props.size, text = props.text, variant = props.variant, weight = props.weight, rest = __rest(props, ["children", "className", "colorScheme", "decoration", "disabled", "hoverDecoration", "iconLeft", "iconRight", "isExternal", "isUnderlined", "size", "text", "variant", "weight"]);
     var styles = (0, core_1.useStyleConfig)('Link', props);

package/list/context.js

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

package/list/listDivider.js

@@ -24,7 +24,7 @@ exports.ListDivider = (0, core_1.vui)(function (props, ref) {
     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));
+    return react_1.default.createElement(divider_1.default, __assign({ className: "vui-listDivider", my: 1, ref: ref }, styles.divider, props));
 });
 exports.ListDivider.displayName = 'ListDivider';
 exports.default = exports.ListDivider;

package/menu/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const MenuProvider: import("react").Provider<Dict<any>>, useMenuContext: () => Dict<any>;
+export { MenuProvider, useMenuContext };

package/menu/context.js

@@ -0,0 +1,23 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuContext = exports.MenuProvider = void 0;
+var utils_1 = require("../utils");
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), MenuProvider = _a[0], useMenuContext = _a[1];
+exports.MenuProvider = MenuProvider;
+exports.useMenuContext = useMenuContext;

package/menu/index.d.ts

@@ -0,0 +1,6 @@
+export * from './context';
+export { default, default as Menu } from './menu';
+export * from './menu.types';
+export { default as MenuButton } from './menuButton';
+export { default as MenuItem } from './menuItem';
+export { default as MenuList } from './menuList';

package/menu/index.js

@@ -0,0 +1,27 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuList = exports.MenuItem = exports.MenuButton = exports.Menu = exports.default = void 0;
+__exportStar(require("./context"), exports);
+var menu_1 = require("./menu");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(menu_1).default; } });
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return __importDefault(menu_1).default; } });
+__exportStar(require("./menu.types"), exports);
+var menuButton_1 = require("./menuButton");
+Object.defineProperty(exports, "MenuButton", { enumerable: true, get: function () { return __importDefault(menuButton_1).default; } });
+var menuItem_1 = require("./menuItem");
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return __importDefault(menuItem_1).default; } });
+var menuList_1 = require("./menuList");
+Object.defineProperty(exports, "MenuList", { enumerable: true, get: function () { return __importDefault(menuList_1).default; } });

package/menu/menu.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { MenuProps } from './menu.types';
+declare function Menu(props: MenuProps): JSX.Element;
+declare namespace Menu {
+    var Button: import("..").VuiComponent<"button", import("..").ButtonProps>;
+    var Item: import("..").VuiComponent<"li", import("..").ListItemProps>;
+    var List: import("..").VuiComponent<"ul", import("./menu.types").MenuListProps> & {
+        Divider: import("..").VuiComponent<"hr", import("..").DividerProps>;
+        Heading: import("..").VuiComponent<"span", import("..").TProps>;
+        Icon: import("..").VuiComponent<"svg", import("..").IconProps>;
+        Item: import("..").VuiComponent<"li", import("..").ListItemProps>;
+        Text: import("..").VuiComponent<"span", import("..").TProps>;
+    };
+}
+export default Menu;

package/menu/menu.js

@@ -0,0 +1,63 @@
+"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 __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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var popover_1 = require("../popover");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var menuButton_1 = __importDefault(require("./menuButton"));
+var menuItem_1 = __importDefault(require("./menuItem"));
+var menuList_1 = __importDefault(require("./menuList"));
+function Menu(props) {
+    var _a = props.closeOnSelect, closeOnSelect = _a === void 0 ? true : _a, size = props.size, variant = props.variant, rest = __rest(props, ["closeOnSelect", "size", "variant"]);
+    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ closeOnSelect: closeOnSelect, size: size, variant: variant }); }, [closeOnSelect, size, variant]);
+    return (react_1.default.createElement(context_1.MenuProvider, { value: context },
+        react_1.default.createElement(popover_1.Popover, __assign({}, rest))));
+}
+exports.default = Menu;
+Menu.Button = menuButton_1.default;
+Menu.Item = menuItem_1.default;
+Menu.List = menuList_1.default;

package/menu/menu.types.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+import { ListProps } from '../list';
+import { PopoverContentProps, PopoverProps } from '../popover';
+import { ThemingProps } from '../theme';
+export declare type MenuListProps = ListProps & {
+    contentProps?: PopoverContentProps;
+    contentRef?: RefObject<HTMLDivElement>;
+};
+export declare type MenuProps = ThemingProps<'Menu'> & PopoverProps & {
+    closeOnSelect?: boolean;
+};

package/menu/menu.types.js

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

package/menu/menuButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '../button';
+export declare const MenuButton: import("../core").VuiComponent<"button", ButtonProps>;
+export default MenuButton;

package/menu/menuButton.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.MenuButton = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("../button");
+var core_1 = require("../core");
+var popover_1 = require("../popover");
+var context_1 = require("./context");
+exports.MenuButton = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var menuProps = (_a = (0, context_1.useMenuContext)()) !== null && _a !== void 0 ? _a : {};
+    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, menuProps), props));
+    return react_1.default.createElement(popover_1.PopoverTrigger, __assign({ as: button_1.AppButton, className: "vui-menuButton", ref: ref }, styles.button, props));
+});
+exports.MenuButton.displayName = 'MenuButton';
+exports.default = exports.MenuButton;

package/menu/menuItem.d.ts

@@ -0,0 +1,3 @@
+import { ListItemProps } from '../list';
+export declare const MenuItem: import("../core").VuiComponent<"li", ListItemProps>;
+export default MenuItem;

package/menu/menuItem.js

@@ -0,0 +1,63 @@
+"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 __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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+var react_1 = __importStar(require("react"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var list_1 = require("../list");
+var popover_1 = require("../popover");
+exports.MenuItem = (0, core_1.vui)(function (props, ref) {
+    var _a, _b;
+    var onClickProp = props.onClick, rest = __rest(props, ["onClick"]);
+    var instance = ((_a = (0, popover_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {}).instance;
+    var _c = (_b = (0, context_1.useMenuContext)()) !== null && _b !== void 0 ? _b : {}, closeOnSelect = _c.closeOnSelect, menuProps = __rest(_c, ["closeOnSelect"]);
+    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, menuProps), props));
+    var onClick = (0, react_1.useCallback)(function (e) {
+        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+        closeOnSelect && (instance === null || instance === void 0 ? void 0 : instance.hide());
+    }, [closeOnSelect, instance]);
+    return react_1.default.createElement(list_1.ListItem, __assign({ className: "vui-menuItem", isInteractive: true, onClick: onClick, ref: ref }, styles.item, rest));
+});
+exports.MenuItem.displayName = 'MenuItem';
+exports.default = exports.MenuItem;

package/menu/menuList.d.ts

@@ -0,0 +1,11 @@
+import { VuiComponent } from '../core';
+import List from '../list';
+import { MenuListProps } from './menu.types';
+export declare const MenuList: VuiComponent<"ul", MenuListProps> & {
+    Divider: typeof List.Divider;
+    Heading: typeof List.Heading;
+    Icon: typeof List.Icon;
+    Item: typeof List.Item;
+    Text: typeof List.Text;
+};
+export default MenuList;

package/menu/menuList.js

@@ -0,0 +1,48 @@
+"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 __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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuList = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var list_1 = __importDefault(require("../list"));
+var popover_1 = require("../popover");
+var context_1 = require("./context");
+exports.MenuList = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var contentProps = props.contentProps, contentRef = props.contentRef, rest = __rest(props, ["contentProps", "contentRef"]);
+    var menuProps = (_a = (0, context_1.useMenuContext)()) !== null && _a !== void 0 ? _a : {};
+    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, menuProps), props));
+    return (react_1.default.createElement(popover_1.PopoverContent, __assign({ ref: contentRef }, contentProps),
+        react_1.default.createElement(list_1.default, __assign({ className: "vui-menuList", p: 1, ref: ref, size: "sm" }, styles.list, rest))));
+});
+exports.MenuList.displayName = 'MenuList';
+exports.MenuList.Divider = list_1.default.Divider;
+exports.MenuList.Heading = list_1.default.Heading;
+exports.MenuList.Icon = list_1.default.Icon;
+exports.MenuList.Item = list_1.default.Item;
+exports.MenuList.Text = list_1.default.Text;
+exports.default = exports.MenuList;

package/menu/theme.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/menu/theme.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var defaultProps = {};
+var parts = ['container', 'button', 'item', 'list'];
+var sizes = {};
+var variants = {};
+exports.default = {
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/notification/context.js

@@ -17,7 +17,7 @@ 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((0, core_1.createContext)({ isOptional: true }), 2), NotificationProvider = _a[0], useNotification = _a[1];
+var utils_1 = require("../utils");
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), NotificationProvider = _a[0], useNotification = _a[1];
 exports.NotificationProvider = NotificationProvider;
 exports.useNotification = useNotification;

package/notification/notificationButton.js

@@ -24,7 +24,7 @@ exports.NotificationButton = (0, core_1.vui)(function (props, ref) {
     var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, notificationProps), props);
     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)));
+    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-notificationButton", colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm", variant: "text" }, styles.button, props)));
 });
 exports.NotificationButton.displayName = 'NotificationButton';
 exports.default = exports.NotificationButton;

package/notification/theme.d.ts

@@ -10,12 +10,7 @@ declare function variantSubtle(props: Dict): {
         color: string;
         hoverBg: string;
         activeBg: string;
-        variant: string;
     };
-    icon: {};
-    message: {};
-    text: {};
-    title: {};
 };
 declare const _default: {
     defaultProps: {

package/notification/theme.js

@@ -11,18 +11,17 @@ function variantSubtle(props) {
     var button = {
         color: c + ".90",
         hoverBg: c + ".30",
-        activeBg: c + ".40",
-        variant: 'text'
+        activeBg: c + ".40"
     };
-    var icon = {};
-    var message = {};
-    var text = {};
-    var title = {};
+    if (c === 'blue') {
+        container.color = 'blue.80';
+        button.color = 'blue.80';
+    }
     if (c === 'yellow') {
         container.color = 'yellow.100';
         button.color = 'yellow.100';
     }
-    return { container: container, button: button, icon: icon, message: message, text: text, title: title };
+    return { container: container, button: button };
 }
 var defaultProps = {
     colorScheme: 'blue',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "description": "Veracity UI React components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",
@@ -18,7 +18,8 @@
   "dependencies": {
     "@types/styled-components": "^5.1.15",
     "@xstyled/styled-components": "^2.4.1",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1",
+    "tippy.js": "^6.3.7"
   },
   "peerDependencies": {
     "react": "^17.0.1",

package/popover/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const PopoverProvider: import("react").Provider<Dict<any>>, usePopoverContext: () => Dict<any>;
+export { PopoverProvider, usePopoverContext };

package/popover/context.js

@@ -0,0 +1,23 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopoverContext = exports.PopoverProvider = void 0;
+var utils_1 = require("../utils");
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), PopoverProvider = _a[0], usePopoverContext = _a[1];
+exports.PopoverProvider = PopoverProvider;
+exports.usePopoverContext = usePopoverContext;

package/popover/index.d.ts

@@ -0,0 +1,9 @@
+export * from './context';
+export * from './plugins';
+export { default, default as Popover } from './popover';
+export * from './popover.types';
+export { default as PopoverContent } from './popoverContent';
+export { default as PopoverStyle } from './popoverStyle';
+export { default as PopoverTrigger } from './popoverTrigger';
+export { default as usePopover } from './usePopover';
+export * from './usePopover.types';