@veracity/vui 0.3.1 → 0.3.2

package/avatar/avatar.d.ts

@@ -1,5 +1,5 @@
 import { AvatarProps } from './avatar.types';
-import { SystemProps } from '../system';
-export declare const AvatarBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const AvatarBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays user data, such as name initials or profile image. */
 export declare const Avatar: import("../core").VuiComponent<"span", AvatarProps>;
 export default Avatar;

package/avatar/avatar.js

@@ -25,43 +25,23 @@ 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.Avatar = exports.AvatarBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
-var system_1 = require("../system");
+var image_1 = __importDefault(require("../image"));
 var utils_1 = require("../utils");
-var AvatarImage = styled_components_2.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\theight: 100%;\n\twidth: 100%;\n\n\t", "\n"], ["\n\theight: 100%;\n\twidth: 100%;\n\n\t", "\n"])), styled_components_1.borders);
-exports.AvatarBase = styled_components_2.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), system_1.system);
-function defaultGetInitials(name) {
-    if (name === void 0) { name = ''; }
-    var _a = __read(name.split(' '), 2), _b = _a[0], first = _b === void 0 ? '' : _b, _c = _a[1], last = _c === void 0 ? '' : _c;
-    return ("" + first.charAt(0) + last.charAt(0)).toUpperCase();
-}
+var helpers_1 = require("./helpers");
+exports.AvatarBase = core_1.styled.spanBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tfont-weight: medium;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tfont-weight: medium;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n"
+    /** Displays user data, such as name initials or profile image. */
+])));
+/** Displays user data, such as name initials or profile image. */
 exports.Avatar = (0, core_1.vui)(function (props, ref) {
-    var _a = (0, core_1.omitThemingProps)(props), children = _a.children, className = _a.className, _b = _a.getInitials, getInitials = _b === void 0 ? defaultGetInitials : _b, icon = _a.icon, _c = _a.isInteractive, isInteractive = _c === void 0 ? props.onClick !== undefined : _c, isSquare = _a.isSquare, _d = _a.name, name = _d === void 0 ? '' : _d, src = _a.src, rest = __rest(_a, ["children", "className", "getInitials", "icon", "isInteractive", "isSquare", "name", "src"]);
+    var _a = (0, core_1.omitThemingProps)(props), children = _a.children, className = _a.className, _b = _a.getInitials, getInitials = _b === void 0 ? helpers_1.defaultGetInitials : _b, icon = _a.icon, _c = _a.isInteractive, isInteractive = _c === void 0 ? props.onClick !== undefined : _c, isSquare = _a.isSquare, _d = _a.name, name = _d === void 0 ? '' : _d, src = _a.src, rest = __rest(_a, ["children", "className", "getInitials", "icon", "isInteractive", "isSquare", "name", "src"]);
     var _e = (0, core_1.useStyleConfig)('Avatar', props), activeBg = _e.activeBg, h = _e.h, hoverBg = _e.hoverBg, iconSize = _e.iconSize, styles = __rest(_e, ["activeBg", "h", "hoverBg", "iconSize"]);
     var borderRadius = isSquare ? 'lg' : '50%';
     var initials = getInitials(name);
@@ -75,8 +55,8 @@ exports.Avatar = (0, core_1.vui)(function (props, ref) {
             userSelect: 'none'
         }
         : {};
-    return (react_1.default.createElement(exports.AvatarBase, __assign({ borderRadius: borderRadius, className: (0, utils_1.cs)('vui-avatar', className), fontWeight: "medium", h: h, ref: ref, transitionDuration: "fast", w: h }, styles, interactiveProps, rest), children ? (children) : src ? (react_1.default.createElement(AvatarImage, { borderRadius: borderRadius, src: src })) : icon ? (react_1.default.createElement(icon_1.default, { name: icon, size: iconSize })) : initials ? (initials) : null));
+    return (react_1.default.createElement(exports.AvatarBase, __assign({ borderRadius: borderRadius, className: (0, utils_1.cs)('vui-avatar', className), h: h, ref: ref, w: h }, styles, interactiveProps, rest), children ? (children) : src ? (react_1.default.createElement(image_1.default, __assign({}, { borderRadius: borderRadius, src: src }))) : icon ? (react_1.default.createElement(icon_1.default, { name: icon, size: iconSize })) : initials ? (initials) : null));
 });
 exports.Avatar.displayName = 'Avatar';
 exports.default = exports.Avatar;
-var templateObject_1, templateObject_2;
+var templateObject_1;

package/avatar/avatar.types.d.ts

@@ -1,12 +1,19 @@
 import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface AvatarProps extends SystemProps, ThemingProps<'Avatar'> {
+export declare type AvatarProps = SystemProps & ThemingProps<'Avatar'> & {
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
+    /** Custom function to compute initials based on the provided name. */
     getInitials?: (name: string) => string;
+    /** Renders an icon as the only content. */
     icon?: IconProp;
+    /** Makes avatar clickable and focusable with correct styling. */
     isInteractive?: boolean;
+    /** Displays Avatar with slightly rounded corners. */
     isSquare?: boolean;
+    /** Displays initials of the provided name. */
     name?: string;
+    /** Displays an image loaded from the given URL. */
     src?: string;
-}
+};

package/avatar/helpers.d.ts

@@ -0,0 +1,2 @@
+/** Gets initials from the name for the Avatar. */
+export declare function defaultGetInitials(name?: string): string;

package/avatar/helpers.js

@@ -0,0 +1,26 @@
+"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.defaultGetInitials = void 0;
+/** Gets initials from the name for the Avatar. */
+function defaultGetInitials(name) {
+    if (name === void 0) { name = ''; }
+    var _a = __read(name.split(' '), 2), _b = _a[0], first = _b === void 0 ? '' : _b, _c = _a[1], last = _c === void 0 ? '' : _c;
+    return ("" + first.charAt(0) + last.charAt(0)).toUpperCase();
+}
+exports.defaultGetInitials = defaultGetInitials;

package/avatar/index.d.ts

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

package/avatar/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("./avatar"), exports);
-__exportStar(require("./avatar.types"), exports);
 var avatar_1 = require("./avatar");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
+__exportStar(require("./avatar.types"), exports);

package/avatar/theme.d.ts

@@ -12,6 +12,7 @@ declare function variantSubtle(props: Dict): {
     color: string;
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         size: string;

package/avatar/theme.js

@@ -8,6 +8,11 @@ function variantSolid(props) {
         bg: c + ".80",
         color: 'white'
     };
+    // Special cases
+    if (c === 'prussian') {
+        styles.activeBg = 'prussian.50';
+        styles.hoverBg = 'prussian.60';
+    }
     if (c === 'yellow') {
         styles.hoverBg = c + ".80";
         styles.activeBg = c + ".90";
@@ -38,6 +43,7 @@ function variantSubtle(props) {
     }
     return colors;
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
@@ -75,6 +81,7 @@ var variants = {
     subtle: variantSubtle
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     sizes: sizes,
     variants: variants

package/box/box.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from './box.types';
-import { SystemProps } from '../system';
-export declare const BoxBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const BoxBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Organizes content layout into columns or rows with easy centering. */
 export declare const Box: import("../core").VuiComponent<"div", BoxProps>;
 export default Box;

package/box/box.js

@@ -31,27 +31,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = exports.BoxBase = void 0;
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
-var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.BoxBase = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tmin-width: 0;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tmin-width: 0;\n\n\t", "\n"])), system_1.system);
+exports.BoxBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tmin-width: 0;\n\ttransition-duration: normal;\n"], ["\n\tdisplay: flex;\n\tmin-width: 0;\n\ttransition-duration: normal;\n"
+    /** Organizes content layout into columns or rows with easy centering. */
+])));
+/** Organizes content layout into columns or rows with easy centering. */
 exports.Box = (0, core_1.vui)(function (props, ref) {
     var _a = (0, core_1.omitThemingProps)(props), align = _a.align, center = _a.center, centerH = _a.centerH, centerV = _a.centerV, className = _a.className, column = _a.column, direction = _a.direction, hoverShadow = _a.hoverShadow, justify = _a.justify, radius = _a.radius, shadow = _a.shadow, wrap = _a.wrap, rest = __rest(_a, ["align", "center", "centerH", "centerV", "className", "column", "direction", "hoverShadow", "justify", "radius", "shadow", "wrap"]);
     var styles = (0, core_1.useStyleConfig)('Box', props);
-    var alignItems = (center || (column ? centerH : centerV)) && 'center';
-    var flexDirection = column && 'column';
-    var justifyContent = (center || (column ? centerV : centerH)) && 'center';
+    var alignItems = center || (column ? centerH : centerV) ? 'center' : undefined;
+    var flexDirection = column ? 'column' : undefined;
+    var justifyContent = center || (column ? centerV : centerH) ? 'center' : undefined;
     var aliasedProps = (0, utils_1.filterUndefined)({
         alignItems: align !== null && align !== void 0 ? align : alignItems,
         borderRadius: radius,
         boxShadow: shadow,
         flexDirection: direction !== null && direction !== void 0 ? direction : flexDirection,
-        flexWrap: wrap && 'wrap',
+        flexWrap: wrap ? 'wrap' : undefined,
         hoverBoxShadow: hoverShadow,
         justifyContent: justify !== null && justify !== void 0 ? justify : justifyContent
     });
-    return (react_1.default.createElement(exports.BoxBase, __assign({ className: (0, utils_1.cs)('vui-box', className), ref: ref, transitionDuration: "normal" }, styles, aliasedProps, rest)));
+    return react_1.default.createElement(exports.BoxBase, __assign({ className: (0, utils_1.cs)('vui-box', className), ref: ref }, styles, aliasedProps, rest));
 });
 exports.Box.displayName = 'Box';
 exports.default = exports.Box;

package/box/box.types.d.ts

@@ -1,15 +1,26 @@
 import { BordersProps, EffectsProps, FlexboxesProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface BoxProps extends SystemProps, ThemingProps<'Box'> {
+export declare type BoxProps = SystemProps & ThemingProps<'Box'> & {
+    /** Alias for alignItems prop. @deprecated */
     align?: FlexboxesProps['alignItems'];
+    /** Centers the content vertically and horizontally. */
     center?: boolean;
+    /** Centers the content horizontally. */
     centerH?: boolean;
+    /** Centers the content vertically. */
     centerV?: boolean;
+    /** Displays content in a column. */
     column?: boolean;
+    /** Alias for flexDirection prop. @deprecated */
     direction?: FlexboxesProps['flexDirection'];
+    /** Alias for hoverBoxShadow prop. @deprecated */
     hoverShadow?: EffectsProps['hoverBoxShadow'];
+    /** Alias for justifyContent prop. @deprecated */
     justify?: FlexboxesProps['justifyContent'];
+    /** Alias for borderRadius prop. @deprecated */
     radius?: BordersProps['borderRadius'];
+    /** Alias for boxShadow prop. @deprecated */
     shadow?: EffectsProps['boxShadow'];
+    /** Applies flex-wrap property. */
     wrap?: boolean;
-}
+};

package/box/index.d.ts

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

package/box/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("./box"), exports);
-__exportStar(require("./box.types"), exports);
 var box_1 = require("./box");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(box_1).default; } });
+__exportStar(require("./box.types"), exports);

package/box/theme.d.ts

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

package/box/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/button/button.d.ts

@@ -1,9 +1,13 @@
+import { VuiComponent } from '../core';
 import { ButtonProps } from './button.types';
 import ButtonIcon from './buttonIcon';
 import ButtonText from './buttonText';
-import { VuiComponent } from '../core';
-import { SystemProps } from '../system';
-export declare const ButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const ButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Triggers given actions on click. Supports multiple states, sizes and variant.
+ * Comes with additional props for extra behavior, like loading, disabled or elevated.
+ * Exposes some props to the children via context.
+ */
 export declare const Button: VuiComponent<"button", ButtonProps> & {
     Icon: typeof ButtonIcon;
     Text: typeof ButtonText;

package/button/button.js

@@ -50,24 +50,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = exports.ButtonBase = void 0;
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var context_1 = require("../buttonGroup/context");
+var core_1 = require("../core");
+var utils_1 = require("../utils");
 var buttonIcon_1 = __importDefault(require("./buttonIcon"));
 var buttonText_1 = __importDefault(require("./buttonText"));
 var consts_1 = require("./consts");
-var context_1 = require("./context");
-var context_2 = require("../buttonGroup/context");
-var core_1 = require("../core");
-var system_1 = require("../system");
-var utils_1 = require("../utils");
-var ContentWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tvisibility: hidden;\n"], ["\n\tvisibility: hidden;\n"])));
-var StateWrapper = styled_components_1.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\n\t", "\n"], ["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\n\t", "\n"])), system_1.system);
-exports.ButtonBase = styled_components_1.default.button.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toverflow: hidden;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus,\n\t&:focus:hover {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toverflow: hidden;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus,\n\t&:focus:hover {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"])), system_1.system);
+var context_2 = require("./context");
+var ContentWrapper = core_1.styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tvisibility: hidden;\n"], ["\n\tvisibility: hidden;\n"])));
+var StateWrapper = core_1.styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"], ["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"])));
+exports.ButtonBase = core_1.styled.buttonBox(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-radius: md;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tfont-weight: medium;\n\tjustify-content: center;\n\tline-height: normal;\n\toverflow: hidden;\n\tposition: relative;\n\ttransition-duration: fast;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus,\n\t&:focus:hover {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']:hover {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tborder-radius: md;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tfont-weight: medium;\n\tjustify-content: center;\n\tline-height: normal;\n\toverflow: hidden;\n\tposition: relative;\n\ttransition-duration: fast;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus,\n\t&:focus:hover {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']:hover {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"
+    /**
+     * Triggers given actions on click. Supports multiple states, sizes and variant.
+     * Comes with additional props for extra behavior, like loading, disabled or elevated.
+     * Exposes some props to the children via context.
+     */
+])));
+/**
+ * Triggers given actions on click. Supports multiple states, sizes and variant.
+ * Comes with additional props for extra behavior, like loading, disabled or elevated.
+ * Exposes some props to the children via context.
+ */
 exports.Button = (0, core_1.vui)(function (props, ref) {
     var _a, _b, _c, _d;
-    var buttonGroupProps = (0, context_2.useButtonGroup)();
+    var buttonGroupProps = (0, context_1.useButtonGroup)();
     var mergedProps = __assign(__assign({}, buttonGroupProps), props);
     var borderWidthProp = mergedProps.borderWidth, children = mergedProps.children, className = mergedProps.className, colorSchemeProp = mergedProps.colorScheme, disabled = mergedProps.disabled, icon = mergedProps.icon, iconLeft = mergedProps.iconLeft, iconRight = mergedProps.iconRight, isElevated = mergedProps.isElevated, isFullWidth = mergedProps.isFullWidth, isLoading = mergedProps.isLoading, // eslint-disable-line
-    isRound = mergedProps.isRound, isSplit = mergedProps.isSplit, size = mergedProps.size, _e = mergedProps.state, state = _e === void 0 ? props.isLoading ? 'loading' : '' : _e, stateMapping = mergedProps.stateMapping, text = mergedProps.text, variant = mergedProps.variant, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "size", "state", "stateMapping", "text", "variant"]);
+    isRound = mergedProps.isRound, isSplit = mergedProps.isSplit, isTruncated = mergedProps.isTruncated, size = mergedProps.size, _e = mergedProps.state, state = _e === void 0 ? props.isLoading ? 'loading' : '' : _e, stateMapping = mergedProps.stateMapping, text = mergedProps.text, variant = mergedProps.variant, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "variant"]);
     var hasState = Boolean(state) && state !== 'idle';
     var states = __assign(__assign({}, consts_1.buttonStateMapping), stateMapping);
     var _f = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, stateIconProps = _f.iconProps, stateProps = __rest(_f, ["iconProps"]);
@@ -87,20 +96,21 @@ exports.Button = (0, core_1.vui)(function (props, ref) {
     var pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
     var pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
     var aliasedProps = (0, utils_1.filterUndefined)({
+        'aria-disabled': disabled,
         borderRadius: isRound ? h / 2 : undefined,
         boxShadow: isElevated ? '2' : undefined,
         minW: icon ? 0 : undefined,
         pointerEvents: hasState ? 'none' : undefined,
         w: isFullWidth ? '100%' : undefined
     });
-    return (react_1.default.createElement(context_1.ButtonProvider, { value: context },
-        react_1.default.createElement(exports.ButtonBase, __assign({ borderRadius: "md", borderWidth: border, className: (0, utils_1.cs)('vui-button', className), disabled: disabled, focusRing: 3, fontWeight: "medium", h: h, pl: pl, pr: pr, ref: ref, transitionDuration: "fast", type: "button" }, buttonStyles, aliasedProps, rest),
+    return (react_1.default.createElement(context_2.ButtonProvider, { value: context },
+        react_1.default.createElement(exports.ButtonBase, __assign({ borderWidth: border, className: (0, utils_1.cs)('vui-button', className), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: pr, ref: ref, type: "button" }, buttonStyles, aliasedProps, rest),
             hasState && (react_1.default.createElement(StateWrapper, __assign({ onClick: function (e) { return e.stopPropagation(); } }, stateProps),
                 react_1.default.createElement(buttonIcon_1.default, __assign({ m: "auto" }, stateIconProps)))),
             react_1.default.createElement(Content, null,
                 (0, utils_1.isString)(icon) ? react_1.default.createElement(buttonIcon_1.default, { name: icon }) : icon,
                 !icon && (react_1.default.createElement(react_1.default.Fragment, null,
-                    (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(buttonIcon_1.default, { mr: iconLeftMr, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(buttonText_1.default, { text: text }) : text),
+                    (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(buttonIcon_1.default, { mr: iconLeftMr, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(buttonText_1.default, __assign({}, { isTruncated: isTruncated, text: text })) : text),
                     (0, utils_1.isString)(iconRight) ? react_1.default.createElement(buttonIcon_1.default, { ml: iconRightMl, name: iconRight }) : iconRight))))));
 });
 exports.Button.displayName = 'Button';

package/button/button.types.d.ts

@@ -3,50 +3,32 @@ import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { AnyElement, AnyString } from '../utils';
-export interface ButtonProps extends SystemProps, ThemingProps<'Button'> {
-    /**
-     * Available theme colors for this component.
-     * @default prussian
-     */
+export declare type ButtonProps = SystemProps & ThemingProps<'Button'> & {
+    /** Available theme colors for this component. @default prussian */
     colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red';
     /** Icon that replaces any other content. */
     icon?: IconProp | AnyElement;
-    /** Socket placing icon before the children. */
+    /** Socket displaying icon on the left side. */
     iconLeft?: IconProp | AnyElement;
-    /** Socket placing icon after the children. */
+    /** Socket displaying icon on the right side. */
     iconRight?: IconProp | AnyElement;
-    /**
-     * Adds box shadow style.
-     * @default false
-     */
+    /** Adds box shadow style. @default false */
     isElevated?: boolean;
-    /**
-     * Makes the button take full width of the container.
-     * @default false
-     */
+    /** Makes the button take full width of the container. @deprecated */
     isFullWidth?: boolean;
-    /**
-     * Replaces content with a loading spinner.
-     * @default false
-     */
+    /** Replaces content with a loading spinner. @default false */
     isLoading?: boolean;
-    /**
-     * Rounds the borders.
-     * @default false
-     */
+    /** Rounds the borders. @default false */
     isRound?: boolean;
-    /**
-     * Separates right icon from the content.
-     * @default false
-     */
+    /** Separates right icon from the content. @deprecated */
     isSplit?: boolean;
-    /** Replaces content with icon and color matching the operation state. */
+    /** Modifies Button style and content based on the given state. */
     state?: ButtonState;
-    /** Object allowing configuration of state variants. */
+    /** Object definition of styles and content for each state. */
     stateMapping?: ButtonStateMapping;
     /** Socket placing text as alternative to children. */
     text?: React.ReactNode;
-}
+};
 export declare type ButtonState = 'error' | 'idle' | 'loading' | 'success' | AnyString;
 export declare type ButtonStateMapping = Record<string, SystemProps & {
     colorScheme: ButtonProps['colorScheme'];

package/button/buttonIcon.d.ts

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

package/button/buttonIcon.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonIcon = 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 Button. */
 exports.ButtonIcon = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var buttonProps = (_a = (0, context_1.useButton)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, buttonProps), props);
-    var styles = (0, core_1.useStyleConfig)('Button', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Button', __assign(__assign({}, (0, context_1.useButton)()), props));
     return react_1.default.createElement(icon_1.default, __assign({ className: "vui-buttonIcon", ref: ref }, styles.icon, props));
 });
 exports.ButtonIcon.displayName = 'ButtonIcon';

package/button/buttonText.d.ts

@@ -1,3 +1,4 @@
 import { TProps } from '../t';
+/** Displays the text label of the button. */
 export declare const ButtonText: import("../core").VuiComponent<"span", TProps>;
 export default ButtonText;

package/button/buttonText.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonText = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Displays the text label of the button. */
 exports.ButtonText = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var buttonProps = (_a = (0, context_1.useButton)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, buttonProps), props);
-    var styles = (0, core_1.useStyleConfig)('Button', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Button', __assign(__assign({}, (0, context_1.useButton)()), props));
     return react_1.default.createElement(t_1.default, __assign({ className: "vui-buttonText", fontSize: "inherit", ref: ref }, styles.text, props));
 });
 exports.ButtonText.displayName = 'ButtonText';

package/button/buttons.js

@@ -16,8 +16,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextButton = exports.LineButton = exports.IconButton = exports.DangerButton = exports.CTAButton = exports.CloseButton = exports.BackButton = exports.AppButton = void 0;
 var react_1 = __importDefault(require("react"));
-var button_1 = __importDefault(require("./button"));
 var core_1 = require("../core");
+var button_1 = __importDefault(require("./button"));
 exports.AppButton = (0, core_1.vui)(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "solid" }, props))); });
 exports.BackButton = (0, core_1.vui)(function (props, ref) { return (react_1.default.createElement(exports.IconButton, __assign({ colorScheme: "blue", icon: "falArrowLeft", ref: ref, variant: "text" }, props))); });
 exports.CloseButton = (0, core_1.vui)(function (props, ref) { return (react_1.default.createElement(exports.IconButton, __assign({ colorScheme: "blue", icon: "falTimes", ref: ref, variant: "text" }, props))); });

package/button/index.d.ts

@@ -1,7 +1,7 @@
 export * from './button';
+export { default } from './button';
 export * from './button.types';
-export * from './buttons';
 export * from './buttonIcon';
+export * from './buttons';
 export * from './buttonText';
 export * from './context';
-export { default } from './button';

package/button/index.js

@@ -15,10 +15,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./button"), exports);
+var button_1 = require("./button");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
 __exportStar(require("./button.types"), exports);
-__exportStar(require("./buttons"), exports);
 __exportStar(require("./buttonIcon"), exports);
+__exportStar(require("./buttons"), exports);
 __exportStar(require("./buttonText"), exports);
 __exportStar(require("./context"), exports);
-var button_1 = require("./button");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(button_1).default; } });

package/button/theme.d.ts

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

package/button/theme.js

@@ -30,9 +30,9 @@ function variantSolid(props) {
     };
     // Special cases
     if (c === 'prussian') {
-        container.activeBg = 'prussian.60';
-        container.hoverBg = 'prussian.70';
-        container.hoverBorderColor = 'prussian.70';
+        container.activeBg = 'prussian.50';
+        container.hoverBg = 'prussian.60';
+        container.hoverBorderColor = 'prussian.60';
     }
     return { container: container };
 }
@@ -76,6 +76,7 @@ function variantText(props) {
     }
     return { container: container };
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'prussian',
     size: 'md',
@@ -139,6 +140,7 @@ var variants = {
     text: variantText
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/buttonGroup/buttonGroup.d.ts

@@ -1,7 +1,10 @@
 import { ButtonGroupProps } from './buttonGroup.types';
-import { SystemProps } from '../system';
-export declare const ButtonGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps & {
+export declare const ButtonGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("..").SpaceAroundProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & {
     innerBorderColor: string;
 }, never>;
+/**
+ * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.
+ * Exposes some props to the children via context.
+ */
 export declare const ButtonGroup: import("../core").VuiComponent<"div", ButtonGroupProps>;
 export default ButtonGroup;