@veracity/vui 0.0.14 → 0.1.0

package/button/button.js

@@ -1,81 +1,114 @@
-"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++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = exports.ButtonBase = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var consts_1 = require("./consts");
-var context_1 = require("./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.Button = core_1.vui(function (props, ref) {
-    var _a, _b;
-    var buttonGroupProps = context_1.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 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 Content = hasState ? ContentWrapper : react_1.default.Fragment;
-    var border = (_b = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _b !== void 0 ? _b : 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 aliasedProps = utils_1.filterUndefined({
-        borderRadius: isRound ? h / 2 : undefined,
-        boxShadow: isElevated ? '2' : 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)))));
-});
-exports.Button.displayName = 'Button';
-exports.default = exports.Button;
-var templateObject_1, templateObject_2, templateObject_3;
+"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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.ButtonBase = void 0;
+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 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&: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, _c, _d;
+    var buttonGroupProps = context_2.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"]);
+    var hasState = Boolean(state);
+    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"]);
+    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;
+    // 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 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(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

@@ -1,24 +1,26 @@
-/// <reference types="react" />
-import { IconProp, IconProps } from '../icon';
-import { SystemProps } from '../system';
-import { ThemingProps } from '../theme';
-export interface ButtonProps extends SystemProps, ThemingProps<'Button'> {
-    colorScheme?: 'blue' | 'green' | 'grey' | 'pink' | 'prussian' | 'red';
-    icon?: IconProp;
-    iconLeft?: IconProp;
-    iconRight?: IconProp;
-    isElevated?: boolean;
-    isFullWidth?: boolean;
-    isLoading?: boolean;
-    isRound?: boolean;
-    isSplit?: boolean;
-    itemLeft?: React.ReactNode;
-    itemRight?: React.ReactNode;
-    state?: ButtonState;
-    stateMapping?: ButtonStateMapping;
-    text?: number | string;
-}
-export declare type ButtonState = 'error' | 'loading' | 'success';
-export declare type ButtonStateMapping = Record<string, SystemProps & {
-    iconProps: IconProps;
-}>;
+/// <reference types="react" />
+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 | AnyElement;
+    iconLeft?: IconProp | AnyElement;
+    iconRight?: IconProp | AnyElement;
+    isElevated?: boolean;
+    isFullWidth?: boolean;
+    isLoading?: boolean;
+    isRound?: boolean;
+    isSplit?: boolean;
+    state?: ButtonState;
+    stateMapping?: ButtonStateMapping;
+    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/button.types.js

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

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/button/buttonIcon.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.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"));
+exports.ButtonIcon = 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(icon_1.default, __assign({ className: "vui-buttonIcon", ref: ref }, styles.icon, props));
+});
+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';
-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 CTAButton: import("../core").VuiComponent<"button", ButtonProps>;
-export declare const DangerButton: import("../core").VuiComponent<"button", ButtonProps>;
-export declare const LineButton: import("../core").VuiComponent<"button", ButtonProps>;
-export declare const TextButton: import("../core").VuiComponent<"button", ButtonProps>;
+import { ButtonProps, IconButtonProps } from './button.types';
+export declare const AppButton: 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

@@ -1,27 +1,28 @@
-"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.TextButton = exports.LineButton = 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.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.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))); });
+"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.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(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.d.ts

@@ -1,2 +1,2 @@
-import { ButtonStateMapping } from './button.types';
-export declare const buttonStateMapping: ButtonStateMapping;
+import { ButtonStateMapping } from './button.types';
+export declare const buttonStateMapping: ButtonStateMapping;

package/button/consts.js

@@ -1,26 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonStateMapping = void 0;
-exports.buttonStateMapping = {
-    error: {
-        bg: 'red.80',
-        iconProps: {
-            animation: 'fadeDown',
-            icon: 'falTimesCircle'
-        }
-    },
-    loading: {
-        iconProps: {
-            animation: 'vui-spin 0.6s linear infinite',
-            fill: ['', 'transparent'],
-            icon: 'fadSpinnerThird'
-        }
-    },
-    success: {
-        bg: 'green.80',
-        iconProps: {
-            animation: 'fadeDown',
-            icon: 'falCheckCircle'
-        }
-    }
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonStateMapping = void 0;
+exports.buttonStateMapping = {
+    error: {
+        colorScheme: 'red',
+        iconProps: {
+            animation: 'fadeDown',
+            icon: 'falTimesCircle'
+        }
+    },
+    loading: {
+        colorScheme: 'blue',
+        iconProps: {
+            animation: 'vui-spin 0.6s linear infinite',
+            fill: ['', 'transparent'],
+            icon: 'fadSpinnerThird'
+        }
+    },
+    success: {
+        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 };
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const ButtonProvider: import("react").Provider<Dict<any>>, useButton: () => Dict<any>;
+export { ButtonProvider, useButton };

package/button/context.js

@@ -1,23 +1,23 @@
-"use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useButtonGroup = exports.ButtonGroupProvider = 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;
+"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.useButton = exports.ButtonProvider = void 0;
+var core_1 = require("../core");
+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 './context';
-export { default } from './button';
+export * from './button';
+export * from './button.types';
+export * from './buttons';
+export * from './buttonIcon';
+export * from './buttonText';
+export * from './context';
+export { default } from './button';

package/button/index.js

@@ -1,24 +1,24 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.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("./context"), exports);
-var button_1 = require("./button");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./button"), exports);
+__exportStar(require("./button.types"), exports);
+__exportStar(require("./buttons"), 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; } });