@veracity/vui 0.0.15 → 0.2.0

package/avatar/avatar.js

@@ -58,7 +58,7 @@ exports.AvatarBase = styled_components_2.default.span.withConfig(core_1.forwardP
 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);
+    return ("" + first.charAt(0) + last.charAt(0)).toUpperCase();
 }
 exports.Avatar = core_1.vui(function (props, ref) {
     var _a = 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"]);
@@ -75,7 +75,7 @@ exports.Avatar = core_1.vui(function (props, ref) {
             userSelect: 'none'
         }
         : {};
-    return (react_1.default.createElement(exports.AvatarBase, __assign({ borderRadius: borderRadius, className: 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, { icon: icon, size: iconSize })) : initials ? (initials) : null));
+    return (react_1.default.createElement(exports.AvatarBase, __assign({ borderRadius: borderRadius, className: 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));
 });
 exports.Avatar.displayName = 'Avatar';
 exports.default = exports.Avatar;

package/box/box.js

@@ -51,7 +51,7 @@ exports.Box = core_1.vui(function (props, ref) {
         hoverBoxShadow: hoverShadow,
         justifyContent: justify !== null && justify !== void 0 ? justify : justifyContent
     });
-    return (react_1.default.createElement(exports.BoxBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-box', className), ref: ref, transitionDuration: "normal" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.BoxBase, __assign({ className: utils_1.cs('vui-box', className), ref: ref, transitionDuration: "normal" }, styles, aliasedProps, rest)));
 });
 exports.Box.displayName = 'Box';
 exports.default = exports.Box;

package/button/button.d.ts

@@ -1,5 +1,11 @@
 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 Button: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const Button: VuiComponent<"button", ButtonProps> & {
+    Icon: typeof ButtonIcon;
+    Text: typeof ButtonText;
+};
 export default Button;

package/button/button.js

@@ -14,6 +14,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -30,52 +49,66 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = exports.ButtonBase = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+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 icon_1 = __importDefault(require("../icon"));
 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(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(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\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\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);
+exports.ButtonBase = styled_components_1.default.button.withConfig(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);
 exports.Button = core_1.vui(function (props, ref) {
-    var _a, _b;
-    var buttonGroupProps = context_1.useButtonGroup();
+    var _a, _b, _c, _d;
+    var buttonGroupProps = context_2.useButtonGroup();
     var mergedProps = __assign(__assign({}, buttonGroupProps), props);
-    var _c = core_1.omitThemingProps(mergedProps), borderWidthProp = _c.borderWidth, children = _c.children, className = _c.className, disabled = _c.disabled, icon = _c.icon, iconLeftProp = _c.iconLeft, iconRightProp = _c.iconRight, isElevated = _c.isElevated, isFullWidth = _c.isFullWidth, isLoading = _c.isLoading, // eslint-disable-line
-    isRound = _c.isRound, isSplit = _c.isSplit, itemLeftProp = _c.itemLeft, itemRightProp = _c.itemRight, _d = _c.state, state = _d === void 0 ? props.isLoading ? 'loading' : '' : _d, stateMapping = _c.stateMapping, text = _c.text, rest = __rest(_c, ["borderWidth", "children", "className", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "itemLeft", "itemRight", "state", "stateMapping", "text"]);
+    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"]);
     var hasState = Boolean(state);
     var states = __assign(__assign({}, consts_1.buttonStateMapping), stateMapping);
-    var _e = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, iconProps = _e.iconProps, stateProps = __rest(_e, ["iconProps"]);
-    var _f = core_1.useStyleConfig('Button', mergedProps), borderWidth = _f.borderWidth, h = _f.h, _g = _f.iconSize, iconSize = _g === void 0 ? 'md' : _g, minW = _f.minW, _h = _f.spaceX, spaceX = _h === void 0 ? 0 : _h, styles = __rest(_f, ["borderWidth", "h", "iconSize", "minW", "spaceX"]);
+    var _f = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, stateIconProps = _f.iconProps, stateProps = __rest(_f, ["iconProps"]);
+    var colorScheme = utils_1.filterUndefined({
+        colorScheme: (_c = (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme) !== null && _c !== void 0 ? _c : colorSchemeProp
+    });
+    var styles = core_1.useStyleConfig('Button', __assign(__assign({}, mergedProps), colorScheme));
+    var _g = styles.container, borderWidth = _g.borderWidth, h = _g.h, _h = _g.spaceX, spaceX = _h === void 0 ? 0 : _h, buttonStyles = __rest(_g, ["borderWidth", "h", "spaceX"]);
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, size: size, variant: variant }); }, [
+        colorScheme,
+        disabled,
+        size,
+        variant
+    ]);
     var Content = hasState ? ContentWrapper : react_1.default.Fragment;
-    var border = (_b = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _b !== void 0 ? _b : 0;
+    // Apply more space for text and less space for icons
+    var border = (_d = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _d !== void 0 ? _d : 0;
     var spaceXItem = spaceX - border + 'px';
     var spaceXText = spaceX * 2 - border + 'px';
     var iconRightMl = isSplit ? 'auto' : spaceXItem;
-    var iconLeft = iconLeftProp && react_1.default.createElement(icon_1.default, { icon: iconLeftProp, mr: spaceXItem, size: iconSize });
-    var iconRight = iconRightProp && react_1.default.createElement(icon_1.default, { icon: iconRightProp, ml: iconRightMl, size: iconSize });
-    var itemLeft = itemLeftProp !== null && itemLeftProp !== void 0 ? itemLeftProp : iconLeft;
-    var itemRight = itemRightProp !== null && itemRightProp !== void 0 ? itemRightProp : iconRight;
-    var pl = icon || itemLeft ? spaceXItem : spaceXText;
-    var pr = icon || itemRight ? spaceXItem : spaceXText;
-    var minWidth = !icon ? minW : undefined;
+    var pl = icon || iconLeft ? spaceXItem : spaceXText;
+    var pr = icon || iconRight ? spaceXItem : spaceXText;
     var aliasedProps = utils_1.filterUndefined({
         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(exports.ButtonBase, __assign({ borderRadius: "md", borderWidth: border, className: utils_1.cs('vui-button', className), disabled: disabled, focusRing: 3, fontWeight: "medium", h: h, minW: minWidth, pl: pl, pr: pr, ref: ref, transitionDuration: "fast", type: "button" }, styles, aliasedProps, rest),
-        hasState && (react_1.default.createElement(StateWrapper, __assign({ onClick: function (e) { return e.stopPropagation(); } }, stateProps),
-            react_1.default.createElement(icon_1.default, __assign({ m: "auto", size: iconSize }, iconProps)))),
-        react_1.default.createElement(Content, null, icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : (react_1.default.createElement(react_1.default.Fragment, null,
-            itemLeft, children !== null && children !== void 0 ? children : text,
-            itemRight)))));
+    return (react_1.default.createElement(context_1.ButtonProvider, { value: context },
+        react_1.default.createElement(exports.ButtonBase, __assign({ borderRadius: "md", borderWidth: border, className: 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),
+            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,
+                utils_1.isString(icon) ? react_1.default.createElement(buttonIcon_1.default, { name: icon }) : icon,
+                !icon && (react_1.default.createElement(react_1.default.Fragment, null,
+                    utils_1.isString(iconLeft) ? react_1.default.createElement(buttonIcon_1.default, { mr: spaceXItem, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : (utils_1.isReactText(text) ? react_1.default.createElement(buttonText_1.default, { text: text }) : text),
+                    utils_1.isString(iconRight) ? react_1.default.createElement(buttonIcon_1.default, { ml: iconRightMl, name: iconRight }) : iconRight))))));
 });
 exports.Button.displayName = 'Button';
+exports.Button.Icon = buttonIcon_1.default;
+exports.Button.Text = buttonText_1.default;
 exports.default = exports.Button;
 var templateObject_1, templateObject_2, templateObject_3;

package/button/button.types.d.ts

@@ -2,23 +2,25 @@
 import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
+import { AnyElement } from '../utils';
 export interface ButtonProps extends SystemProps, ThemingProps<'Button'> {
     colorScheme?: 'blue' | 'green' | 'grey' | 'pink' | 'prussian' | 'red';
-    icon?: IconProp;
-    iconLeft?: IconProp;
-    iconRight?: IconProp;
+    icon?: IconProp | AnyElement;
+    iconLeft?: IconProp | AnyElement;
+    iconRight?: IconProp | AnyElement;
     isElevated?: boolean;
     isFullWidth?: boolean;
     isLoading?: boolean;
     isRound?: boolean;
     isSplit?: boolean;
-    itemLeft?: React.ReactNode;
-    itemRight?: React.ReactNode;
     state?: ButtonState;
     stateMapping?: ButtonStateMapping;
-    text?: number | string;
+    text?: React.ReactNode;
 }
 export declare type ButtonState = 'error' | 'loading' | 'success';
 export declare type ButtonStateMapping = Record<string, SystemProps & {
+    colorScheme: ButtonProps['colorScheme'];
     iconProps: IconProps;
 }>;
+/** Narrower prop definition for IconButton component */
+export declare type IconButtonProps = Omit<ButtonProps, 'iconLeft' | 'iconRight' | 'text'>;

package/button/buttonIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '../icon';
+export declare const ButtonIcon: import("../core").VuiComponent<"svg", IconProps>;
+export default ButtonIcon;

package/{alert/alertText.js → button/buttonIcon.js}

@@ -14,17 +14,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertText = void 0;
+exports.ButtonIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
-var p_1 = __importDefault(require("../p"));
-exports.AlertText = core_1.vui(function (props, ref) {
+var icon_1 = __importDefault(require("../icon"));
+exports.ButtonIcon = core_1.vui(function (props, ref) {
     var _a;
-    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, alertProps), props);
-    var styles = core_1.useStyleConfig('Alert', mergedProps);
-    return react_1.default.createElement(p_1.default, __assign({ className: "vui-alertText", flex: "1", minW: 0, py: 0.5, ref: ref }, styles.text, props));
+    var buttonProps = (_a = context_1.useButton()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, buttonProps), props);
+    var styles = core_1.useStyleConfig('Button', mergedProps);
+    return react_1.default.createElement(icon_1.default, __assign({ className: "vui-buttonIcon", ref: ref }, styles.icon, props));
 });
-exports.AlertText.displayName = 'AlertText';
-exports.default = exports.AlertText;
+exports.ButtonIcon.displayName = 'ButtonIcon';
+exports.default = exports.ButtonIcon;

package/button/buttonText.d.ts

@@ -0,0 +1,3 @@
+import { TProps } from '../t';
+export declare const ButtonText: import("../core").VuiComponent<"span", TProps>;
+export default ButtonText;

package/button/buttonText.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.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"));
+exports.ButtonText = core_1.vui(function (props, ref) {
+    var _a;
+    var buttonProps = (_a = context_1.useButton()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, buttonProps), props);
+    var styles = core_1.useStyleConfig('Button', mergedProps);
+    return react_1.default.createElement(t_1.default, __assign({ className: "vui-buttonText", fontSize: "inherit", ref: ref }, styles.text, props));
+});
+exports.ButtonText.displayName = 'ButtonText';
+exports.default = exports.ButtonText;

package/button/buttons.d.ts

@@ -1,8 +1,9 @@
-import { ButtonProps } from './button.types';
+import { ButtonProps, IconButtonProps } from './button.types';
 export declare const AppButton: import("../core").VuiComponent<"button", ButtonProps>;
-export declare const BackButton: import("../core").VuiComponent<"button", ButtonProps>;
-export declare const CloseButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const BackButton: import("../core").VuiComponent<"button", IconButtonProps>;
+export declare const CloseButton: import("../core").VuiComponent<"button", IconButtonProps>;
 export declare const CTAButton: import("../core").VuiComponent<"button", ButtonProps>;
 export declare const DangerButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const IconButton: import("../core").VuiComponent<"button", IconButtonProps>;
 export declare const LineButton: import("../core").VuiComponent<"button", ButtonProps>;
 export declare const TextButton: import("../core").VuiComponent<"button", ButtonProps>;

package/button/buttons.js

@@ -14,14 +14,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextButton = exports.LineButton = exports.DangerButton = exports.CTAButton = exports.CloseButton = exports.BackButton = exports.AppButton = void 0;
+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");
 exports.AppButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "solid" }, props))); });
-exports.BackButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", icon: "falChevronLeft", ref: ref, variant: "text" }, props))); });
-exports.CloseButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", icon: "falTimes", ref: ref, variant: "text" }, props))); });
+exports.BackButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(exports.IconButton, __assign({ colorScheme: "blue", icon: "falChevronLeft", ref: ref, variant: "text" }, props))); });
+exports.CloseButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(exports.IconButton, __assign({ colorScheme: "blue", icon: "falTimes", ref: ref, variant: "text" }, props))); });
 exports.CTAButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "green", ref: ref, variant: "solid" }, props))); });
 exports.DangerButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "red", ref: ref, variant: "solid" }, props))); });
+exports.IconButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "text" }, props))); });
 exports.LineButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "outlined" }, props))); });
 exports.TextButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "text" }, props))); });

package/button/consts.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buttonStateMapping = void 0;
 exports.buttonStateMapping = {
     error: {
-        bg: 'red.80',
+        colorScheme: 'red',
         iconProps: {
             animation: 'fadeDown',
             icon: 'falTimesCircle'
         }
     },
     loading: {
+        colorScheme: 'blue',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
             fill: ['', 'transparent'],
@@ -17,7 +18,7 @@ exports.buttonStateMapping = {
         }
     },
     success: {
-        bg: 'green.80',
+        colorScheme: 'green',
         iconProps: {
             animation: 'fadeDown',
             icon: 'falCheckCircle'

package/button/context.d.ts

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

package/button/context.js

@@ -16,8 +16,8 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useButtonGroup = exports.ButtonGroupProvider = void 0;
+exports.useButton = exports.ButtonProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), ButtonGroupProvider = _a[0], useButtonGroup = _a[1];
-exports.ButtonGroupProvider = ButtonGroupProvider;
-exports.useButtonGroup = useButtonGroup;
+var _a = __read(core_1.createContext({ isOptional: true }), 2), ButtonProvider = _a[0], useButton = _a[1];
+exports.ButtonProvider = ButtonProvider;
+exports.useButton = useButton;

package/button/index.d.ts

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

package/button/index.js

@@ -17,8 +17,8 @@ exports.default = void 0;
 __exportStar(require("./button"), exports);
 __exportStar(require("./button.types"), exports);
 __exportStar(require("./buttons"), exports);
-__exportStar(require("./buttonGroup"), exports);
-__exportStar(require("./buttonGroup.types"), exports);
+__exportStar(require("./buttonIcon"), 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

@@ -1,30 +1,47 @@
 import { Dict } from '../utils';
 declare function variantOutlined(props: Dict): {
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
-    borderColor: string;
-    borderWidth: number;
-};
-declare function variantSubtle(props: Dict): {
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
+    container: {
+        borderColor: string;
+        hoverBorderColor: string;
+        hoverBg: string;
+        activeBg: string;
+        bg: string;
+        borderWidth: number;
+        color: string;
+    };
 };
 declare function variantSolid(props: Dict): {
-    borderColor: string;
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
+    container: {
+        hoverBg: string;
+        hoverBorderColor: string;
+        activeBg: string;
+        bg: string;
+        borderColor: string;
+        borderWidth: number;
+        color: string;
+    };
+};
+declare function variantSubtle(props: Dict): {
+    container: {
+        hoverBg: string;
+        hoverBorderColor: string;
+        activeBg: string;
+        bg: string;
+        borderColor: string;
+        borderWidth: number;
+        color: string;
+    };
 };
 declare function variantText(props: Dict): {
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
+    container: {
+        hoverBg: string;
+        hoverBorderColor: string;
+        activeBg: string;
+        bg: string;
+        borderColor: string;
+        borderWidth: number;
+        color: string;
+    };
 };
 declare const _default: {
     defaultProps: {
@@ -32,34 +49,55 @@ declare const _default: {
         size: string;
         variant: string;
     };
+    parts: string[];
     sizes: {
         xs: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-            minW: number;
-            spaceX: number;
+            container: {
+                fontSize: string;
+                h: number;
+                minW: number;
+                spaceX: number;
+            };
+            icon: {
+                size: string;
+            };
+            text: {};
         };
         sm: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-            minW: number;
-            spaceX: number;
+            container: {
+                fontSize: string;
+                h: number;
+                minW: number;
+                spaceX: number;
+            };
+            icon: {
+                size: string;
+            };
+            text: {};
         };
         md: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-            minW: number;
-            spaceX: number;
+            container: {
+                fontSize: string;
+                h: number;
+                minW: number;
+                spaceX: number;
+            };
+            icon: {
+                size: string;
+            };
+            text: {};
         };
         lg: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-            minW: number;
-            spaceX: number;
+            container: {
+                fontSize: string;
+                h: number;
+                minW: number;
+                spaceX: number;
+            };
+            icon: {
+                size: string;
+            };
+            text: {};
         };
     };
     variants: {