@veracity/vui 0.3.1 → 0.4.0

package/icons/baseIcons/types.d.ts

@@ -1 +1 @@
-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';
+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' | 'falFileInvoiceDollar' | '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/icons/cache.d.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from './types';
+/**
+ * Holds the collection of selected predefined icons. Can be extended with more icons by the consumer.
+ * When using icons, they will be checked in library before loading them from CDN.
+ */
+declare class IconsCache {
+    cache: Map<string, IconDefinition>;
+    add: (...icons: IconDefinition[]) => void;
+    get: (name: string) => IconDefinition | undefined;
+    has: (name: string) => boolean;
+    init: () => void;
+    reset: () => void;
+}
+declare const cache: IconsCache;
+export default cache;

package/icons/{library.js → cache.js}

@@ -26,8 +26,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var consts_1 = require("./consts");
-var Library = /** @class */ (function () {
-    function Library() {
+/**
+ * Holds the collection of selected predefined icons. Can be extended with more icons by the consumer.
+ * When using icons, they will be checked in library before loading them from CDN.
+ */
+var IconsCache = /** @class */ (function () {
+    function IconsCache() {
         var _this = this;
         this.cache = new Map();
         this.add = function () {
@@ -57,8 +61,8 @@ var Library = /** @class */ (function () {
             _this.cache.clear();
         };
     }
-    return Library;
+    return IconsCache;
 }());
-var library = new Library();
-library.init();
-exports.default = library;
+var cache = new IconsCache();
+cache.init();
+exports.default = cache;

package/icons/index.d.ts

@@ -1,3 +1,3 @@
+export { default as iconsCache } from './cache';
 export * from './consts';
 export * from './types';
-export { default as library } from './library';

package/icons/index.js

@@ -13,8 +13,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.library = void 0;
+exports.iconsCache = void 0;
+var cache_1 = require("./cache");
+Object.defineProperty(exports, "iconsCache", { enumerable: true, get: function () { return __importDefault(cache_1).default; } });
 __exportStar(require("./consts"), exports);
 __exportStar(require("./types"), exports);
-var library_1 = require("./library");
-Object.defineProperty(exports, "library", { enumerable: true, get: function () { return __importDefault(library_1).default; } });

package/icons/types.d.ts

@@ -1,13 +1,19 @@
 import React from 'react';
-import { BaseIcon } from './baseIcons/types';
 import Svg from '../svg';
 import { PropsOf } from '../utils';
-export interface IconDefinition {
+import { BaseIcon } from './baseIcons/types';
+/** Object defining a custom icon. */
+export declare type IconDefinition = {
+    /** Icon details including height, width and 'd' attribute. */
     details: IconDetails;
+    /** Name of the icon used internally. */
     name: string;
+    /** Props object or array of objects passed to the path elements. */
     pathProps?: React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[];
+    /** Props object passed to the svg element. */
     svgProps?: PropsOf<typeof Svg>;
-}
+};
+/** Icon definition following Font Awesome standard. */
 export declare type IconDetails = [
     number,
     number,
@@ -17,5 +23,6 @@ export declare type IconDetails = [
     string | string[]
 ];
 export declare type VuiIcon = keyof VuiIcons;
+/** Base icons collection, which can be extended by the consumer. */
 export interface VuiIcons extends Record<BaseIcon, IconDefinition> {
 }

package/image/image.d.ts

@@ -1,3 +1,5 @@
 import { ImageProps } from './image.types';
+export declare const ImageBase: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays an image. Includes base styling. */
 export declare const Image: import("../core").VuiComponent<"img", ImageProps>;
 export default Image;

package/image/image.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -25,14 +29,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Image = void 0;
+exports.Image = exports.ImageBase = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
+exports.ImageBase = core_1.styled.imgBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\theight: auto;\n\tobject-fit: cover;\n\twidth: 100%;\n"], ["\n\theight: auto;\n\tobject-fit: cover;\n\twidth: 100%;\n"
+    /** Displays an image. Includes base styling. */
+])));
+/** Displays an image. Includes base styling. */
 exports.Image = (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)('Image', props);
-    return react_1.default.createElement(core_1.v.img, __assign({ className: (0, utils_1.cs)('vui-image', className), ref: ref }, styles, rest));
+    return react_1.default.createElement(exports.ImageBase, __assign({ className: (0, utils_1.cs)('vui-image', className), ref: ref }, styles, rest));
 });
 exports.Image.displayName = 'Image';
 exports.default = exports.Image;
+var templateObject_1;

package/image/image.types.d.ts

@@ -1,5 +1,6 @@
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ImageProps extends SystemProps, ThemingProps<'Image'> {
+export declare type ImageProps = SystemProps & ThemingProps<'Image'> & {
+    /** Children are disabled for this component. */
     children?: never;
-}
+};

package/image/index.d.ts

@@ -1,3 +1,3 @@
 export * from './image';
-export * from './image.types';
 export { default } from './image';
+export * from './image.types';

package/image/index.js

@@ -15,6 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./image"), exports);
-__exportStar(require("./image.types"), exports);
 var image_1 = require("./image");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(image_1).default; } });
+__exportStar(require("./image.types"), exports);

package/image/theme.d.ts

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

package/image/theme.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
 var defaultProps = {};
 var sizes = {};
 var variants = {};
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     sizes: sizes,
     variants: variants

package/index.d.ts

@@ -7,6 +7,7 @@ export * from './checkbox';
 export * from './core';
 export * from './divider';
 export * from './footer';
+export * from './header';
 export * from './heading';
 export * from './icon';
 export * from './icons';
@@ -15,14 +16,15 @@ export * from './input';
 export * from './link';
 export * from './list';
 export * from './menu';
+export * from './modal';
 export * from './notification';
 export * from './p';
 export * from './panel';
 export * from './popover';
+export * from './portal';
 export * from './radio';
 export * from './skeleton';
 export * from './spinner';
-export * from './styles';
 export * from './svg';
 export * from './switch';
 export * from './system';

package/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./checkbox"), exports);
 __exportStar(require("./core"), exports);
 __exportStar(require("./divider"), exports);
 __exportStar(require("./footer"), exports);
+__exportStar(require("./header"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./icon"), exports);
 __exportStar(require("./icons"), exports);
@@ -27,14 +28,15 @@ __exportStar(require("./input"), exports);
 __exportStar(require("./link"), exports);
 __exportStar(require("./list"), exports);
 __exportStar(require("./menu"), exports);
+__exportStar(require("./modal"), exports);
 __exportStar(require("./notification"), exports);
 __exportStar(require("./p"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
+__exportStar(require("./portal"), exports);
 __exportStar(require("./radio"), exports);
 __exportStar(require("./skeleton"), exports);
 __exportStar(require("./spinner"), exports);
-__exportStar(require("./styles"), exports);
 __exportStar(require("./svg"), exports);
 __exportStar(require("./switch"), exports);
 __exportStar(require("./system"), exports);

package/input/consts.js

@@ -13,8 +13,8 @@ exports.inputStateMapping = {
         colorScheme: 'grey',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
-            fill: ['blue.20', 'blue.50'],
-            icon: 'fadSpinnerThird'
+            name: 'fadSpinnerThird',
+            pathFill: ['blue.20', 'blue.50']
         }
     },
     success: {

package/input/helpers.d.ts

@@ -1,2 +1,3 @@
 import { InputProps } from './input.types';
+/** Returns length of the initial input's value. */
 export declare function getInitialCount(props: InputProps): number;

package/input/helpers.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInitialCount = void 0;
+/** Returns length of the initial input's value. */
 function getInitialCount(props) {
     var _a, _b;
     var defaultValue = props.defaultValue, value = props.value;

package/input/index.d.ts

@@ -1,5 +1,5 @@
 export * from './input';
+export { default } from './input';
 export * from './input.types';
 export * from './inputIcon';
 export * from './inputInput';
-export { default } from './input';

package/input/index.js

@@ -15,8 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./input"), exports);
+var input_1 = require("./input");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(input_1).default; } });
 __exportStar(require("./input.types"), exports);
 __exportStar(require("./inputIcon"), exports);
 __exportStar(require("./inputInput"), exports);
-var input_1 = require("./input");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(input_1).default; } });

package/input/input.d.ts

@@ -1,9 +1,13 @@
+import { VuiComponent } from '../core';
 import { InputProps } from './input.types';
 import InputIcon from './inputIcon';
 import InputInput from './inputInput';
-import { VuiComponent } from '../core';
-import { SystemProps } from '../system';
-export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
+ * Forwards many relevant props to the inner input. Handles different states, like loading or error.
+ * Exposes some props to the children via context.
+ */
 export declare const Input: VuiComponent<"div", InputProps> & {
     Icon: typeof InputIcon;
     Input: typeof InputInput;

package/input/input.js

@@ -66,17 +66,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = exports.InputBase = void 0;
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var consts_1 = require("./consts");
 var context_1 = require("./context");
 var helpers_1 = require("./helpers");
 var inputIcon_1 = __importDefault(require("./inputIcon"));
 var inputInput_1 = __importDefault(require("./inputInput"));
-var core_1 = require("../core");
-var system_1 = require("../system");
-var t_1 = __importDefault(require("../t"));
-var utils_1 = require("../utils");
-exports.InputBase = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\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}\n\n\t", "\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\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}\n\n\t", "\n"])), system_1.system);
+exports.InputBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-radius: md;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-radius: md;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"
+    /**
+     * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
+     * Forwards many relevant props to the inner input. Handles different states, like loading or error.
+     * Exposes some props to the children via context.
+     */
+])));
+/**
+ * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
+ * Forwards many relevant props to the inner input. Handles different states, like loading or error.
+ * Exposes some props to the children via context.
+ */
 exports.Input = (0, core_1.vui)(function (props, ref) {
     var _a, _b, _c, _d;
     var _e = __read((0, react_1.useState)((0, helpers_1.getInitialCount)(props)), 2), count = _e[0], setCount = _e[1];
@@ -92,12 +101,13 @@ exports.Input = (0, core_1.vui)(function (props, ref) {
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
     var aliasedProps = (0, utils_1.filterUndefined)({
+        'aria-disabled': disabled,
         bg: readOnly ? 'grey.10' : undefined,
         focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
     return (react_1.default.createElement(context_1.InputProvider, { value: context },
-        react_1.default.createElement(exports.InputBase, __assign({ borderRadius: "md", className: (0, utils_1.cs)('vui-input', disabled && 'disabled', className), ref: ref, transitionDuration: "fast" }, styles.container, aliasedProps, rest),
+        react_1.default.createElement(exports.InputBase, __assign({ className: (0, utils_1.cs)('vui-input', className), ref: ref }, styles.container, aliasedProps, rest),
             itemLeft,
             (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_c = children !== null && children !== void 0 ? children : input) !== null && _c !== void 0 ? _c : (react_1.default.createElement(inputInput_1.default, __assign({ ref: inputRef }, {
             autoComplete: autoComplete,

package/input/input.types.d.ts

@@ -2,41 +2,70 @@
 import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement, ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
-export interface InputInputProps extends PropsOf<'input', SystemProps> {
-}
-export interface InputProps extends SystemProps, ThemingProps<'Input'> {
+import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
+export declare type InputInputProps = PropsOf<'input', SystemProps>;
+export declare type InputProps = SystemProps & ThemingProps<'Input'> & {
+    /** Passed to the inner input. */
     autoComplete?: string;
+    /** Passed to the inner input. */
     autoFocus?: boolean;
+    /** Available theme colors for this component. @default grey */
     colorScheme?: 'green' | 'grey' | 'red';
+    /** Passed to the inner input. */
     defaultValue?: number | string;
+    /** Passed to the inner input. */
     disabled?: boolean;
-    iconLeft?: IconProp | AnyElement;
-    iconRight?: IconProp | AnyElement;
+    /** Socket displaying an icon on the left. */
+    iconLeft?: IconProp | JSX.Element;
+    /** Socket displaying an icon on the right. */
+    iconRight?: IconProp | JSX.Element;
+    /** Socket rendering a custom input element. */
     input?: React.ReactNode;
+    /** Props object passed to the inner input. */
     inputProps?: InputInputProps;
+    /** Ref passed to the inner input. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    /** Styles the input in invalid state. */
     isInvalid?: boolean;
+    /** Socket displaying a custom element on the left. */
     itemLeft?: React.ReactNode;
+    /** Socket displaying a custom element on the right. */
     itemRight?: React.ReactNode;
+    /** Passed to the inner input. */
     max?: number | string;
+    /** Passed to the inner input. */
     maxLength?: number;
+    /** Passed to the inner input. */
     min?: number | string;
+    /** Passed to the inner input. */
     name?: string;
+    /** Passed to the inner input. */
     onBlur?: FocusEventHandler;
+    /** Passed to the inner input. */
     onChange?: ChangeEventHandler;
+    /** Passed to the inner input. */
     onFocus?: FocusEventHandler;
+    /** Passed to the inner input. */
     pattern?: string;
+    /** Passed to the inner input. */
     placeholder?: string;
+    /** Passed to the inner input. */
     readOnly?: boolean;
+    /** Passed to the inner input. */
     required?: boolean;
+    /** Displays length of input value if also using maxLength. */
     showCount?: boolean;
+    /** Modifies Input style and content based on the given state. */
     state?: InputState;
+    /** Object definition of styles and content for each state. */
     stateMapping?: InputStateMapping;
+    /** Passed to the inner input. */
     step?: number | string;
+    /** Passed to the inner input. */
     type?: InputType;
+    /** Passed to the inner input. */
     value?: number | string;
-}
+};
 export declare type InputState = 'default' | 'error' | 'loading' | 'success';
 export declare type InputStateMapping = Record<string, {
     colorScheme?: InputProps['colorScheme'];

package/input/inputIcon.d.ts

@@ -1,3 +1,4 @@
 import { IconProps } from '../icon';
+/** Displays an icon within the Input. */
 export declare const InputIcon: import("../core").VuiComponent<"svg", IconProps>;
 export default InputIcon;

package/input/inputIcon.js

@@ -16,9 +16,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputIcon = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var context_1 = require("./context");
+/** Displays an icon within the Input. */
 exports.InputIcon = (0, core_1.vui)(function (props, ref) {
     var inputProps = (0, context_1.useInput)();
     var mergedProps = __assign(__assign({}, inputProps), props);

package/input/inputInput.d.ts

@@ -1,5 +1,5 @@
 import { InputInputProps } from './input.types';
-import { SystemProps } from '../system';
-export declare const InputInputBase: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const InputInputBase: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+/** Displays an input element within the Input component. */
 export declare const InputInput: import("../core").VuiComponent<"input", InputInputProps>;
 export default InputInput;

package/input/inputInput.js

@@ -20,16 +20,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputInput = exports.InputInputBase = void 0;
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var context_1 = require("./context");
 var core_1 = require("../core");
-var system_1 = require("../system");
-exports.InputInputBase = styled_components_1.default.input.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+exports.InputInputBase = core_1.styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tborder-radius: md;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0 1;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tborder-radius: md;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0 1;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"
+    /** Displays an input element within the Input component. */
+])));
+/** Displays an input element within the Input component. */
 exports.InputInput = (0, core_1.vui)(function (props, ref) {
     var inputProps = (0, context_1.useInput)();
     var mergedProps = __assign(__assign({}, inputProps), props);
     var styles = (0, core_1.useStyleConfig)('Input', mergedProps);
-    return (react_1.default.createElement(exports.InputInputBase, __assign({ borderRadius: "md", className: "vui-inputInput", placeholderColor: "grey.60", px: 1, ref: ref }, styles.input, props)));
+    var aliasedProps = (0, utils_1.filterUndefined)({
+        'aria-disabled': mergedProps.disabled
+    });
+    return react_1.default.createElement(exports.InputInputBase, __assign({ className: "vui-inputInput", ref: ref }, styles.input, aliasedProps, props));
 });
 exports.InputInput.displayName = 'InputInput';
 exports.default = exports.InputInput;

package/input/theme.d.ts

@@ -9,6 +9,7 @@ declare function variantDefault(props: Dict): {
     input: {};
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         size: string;

package/input/theme.js

@@ -15,6 +15,7 @@ function variantDefault(props) {
     var input = {};
     return { container: container, icon: icon, input: input };
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'grey',
     size: 'md',
@@ -67,6 +68,7 @@ var variants = {
     default: variantDefault
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/link/index.d.ts

@@ -1,5 +1,5 @@
 export * from './link';
+export { default } from './link';
 export * from './link.types';
 export * from './linkIcon';
 export * from './linkText';
-export { default } from './link';

package/link/index.js

@@ -15,8 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./link"), exports);
+var link_1 = require("./link");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(link_1).default; } });
 __exportStar(require("./link.types"), exports);
 __exportStar(require("./linkIcon"), exports);
 __exportStar(require("./linkText"), exports);
-var link_1 = require("./link");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(link_1).default; } });

package/link/link.d.ts

@@ -1,9 +1,12 @@
+import { VuiComponent } from '../core';
 import { LinkProps } from './link.types';
 import LinkIcon from './linkIcon';
 import LinkText from './linkText';
-import { VuiComponent } from '../core';
-import { SystemProps } from '../system';
-export declare const LinkBase: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const LinkBase: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Displays a link item. Handles different underline scenarios and opening external links in new tab.
+ * Exposes some props to the children via context.
+ */
 export declare const Link: VuiComponent<"a", LinkProps> & {
     Icon: typeof LinkIcon;
     Text: typeof LinkText;