@veracity/vui 0.2.0 → 0.2.1

package/system/custom.d.ts

@@ -2,30 +2,34 @@ import { BorderRadiusProp } from './borders';
 export interface BorderRadiusBottomProps {
     borderRadiusBottom?: BorderRadiusProp;
 }
-export declare const borderRadiusBottom: import("@xstyled/system").StyleGenerator;
+export declare const borderRadiusBottom: import("@xstyled/styled-components").StyleGenerator;
 export interface BorderRadiusLeftProps {
     borderRadiusLeft?: BorderRadiusProp;
 }
-export declare const borderRadiusLeft: import("@xstyled/system").StyleGenerator;
+export declare const borderRadiusLeft: import("@xstyled/styled-components").StyleGenerator;
 export interface BorderRadiusRightProps {
     borderRadiusRight?: BorderRadiusProp;
 }
-export declare const borderRadiusRight: import("@xstyled/system").StyleGenerator;
+export declare const borderRadiusRight: import("@xstyled/styled-components").StyleGenerator;
 export interface BorderRadiusTopProps {
     borderRadiusTop?: BorderRadiusProp;
 }
-export declare const borderRadiusTop: import("@xstyled/system").StyleGenerator;
+export declare const borderRadiusTop: import("@xstyled/styled-components").StyleGenerator;
 export interface IsTruncatedProps {
     isTruncated?: boolean;
 }
 /** Provides styling to truncate single-line text. */
-export declare const isTruncated: import("@xstyled/system").StyleGenerator;
+export declare const isTruncated: import("@xstyled/styled-components").StyleGenerator;
 export interface MaxLinesProps {
     maxLines?: number;
 }
 /** Provides styling to truncate multi-line text. */
-export declare const maxLines: import("@xstyled/system").StyleGenerator;
+export declare const maxLines: import("@xstyled/styled-components").StyleGenerator;
+export declare type SpaceAroundProps = {
+    spaceAround?: number | string;
+};
+export declare const spaceAround: import("@xstyled/styled-components").StyleGenerator;
 export declare type WordBreakProps = {
     wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
 };
-export declare const wordBreak: import("@xstyled/system").StyleGenerator;
+export declare const wordBreak: import("@xstyled/styled-components").StyleGenerator;

package/system/custom.js

@@ -1,29 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wordBreak = exports.maxLines = exports.isTruncated = exports.borderRadiusTop = exports.borderRadiusRight = exports.borderRadiusLeft = exports.borderRadiusBottom = void 0;
-var system_1 = require("@xstyled/system");
-exports.borderRadiusBottom = system_1.style({
+exports.wordBreak = exports.spaceAround = exports.maxLines = exports.isTruncated = exports.borderRadiusTop = exports.borderRadiusRight = exports.borderRadiusLeft = exports.borderRadiusBottom = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+exports.borderRadiusBottom = (0, styled_components_1.style)({
     prop: 'borderRadiusBottom',
-    themeGet: system_1.getRadius,
+    themeGet: styled_components_1.getRadius,
     cssProperty: ['borderBottomLeftRadius', 'borderBottomRightRadius']
 });
-exports.borderRadiusLeft = system_1.style({
+exports.borderRadiusLeft = (0, styled_components_1.style)({
     prop: 'borderRadiusLeft',
-    themeGet: system_1.getRadius,
+    themeGet: styled_components_1.getRadius,
     cssProperty: ['borderBottomLeftRadius', 'borderTopLeftRadius']
 });
-exports.borderRadiusRight = system_1.style({
+exports.borderRadiusRight = (0, styled_components_1.style)({
     prop: 'borderRadiusRight',
-    themeGet: system_1.getRadius,
+    themeGet: styled_components_1.getRadius,
     cssProperty: ['borderBottomRightRadius', 'borderTopRightRadius']
 });
-exports.borderRadiusTop = system_1.style({
+exports.borderRadiusTop = (0, styled_components_1.style)({
     prop: 'borderRadiusTop',
-    themeGet: system_1.getRadius,
+    themeGet: styled_components_1.getRadius,
     cssProperty: ['borderTopLeftRadius', 'borderTopRightRadius']
 });
 /** Provides styling to truncate single-line text. */
-exports.isTruncated = system_1.style({
+exports.isTruncated = (0, styled_components_1.style)({
     prop: 'isTruncated',
     cssProperty: function () {
         return {
@@ -35,7 +35,7 @@ exports.isTruncated = system_1.style({
     states: {}
 });
 /** Provides styling to truncate multi-line text. */
-exports.maxLines = system_1.style({
+exports.maxLines = (0, styled_components_1.style)({
     prop: 'maxLines',
     cssProperty: function (value) {
         return {
@@ -47,6 +47,17 @@ exports.maxLines = system_1.style({
     },
     states: {}
 });
-exports.wordBreak = system_1.style({
+exports.spaceAround = (0, styled_components_1.style)({
+    prop: 'spaceAround',
+    themeGet: styled_components_1.getSpace,
+    cssProperty: function (value) {
+        return {
+            '& > *': {
+                margin: value
+            }
+        };
+    }
+});
+exports.wordBreak = (0, styled_components_1.style)({
     prop: 'wordBreak'
 });

package/system/system.d.ts

@@ -4,14 +4,15 @@ import { BordersProps } from './borders';
 import { EffectsProps } from './effects';
 import { FlexboxesProps } from './flexboxes';
 import { InteractivityProps } from './interactivity';
-import { BorderRadiusBottomProps, BorderRadiusLeftProps, BorderRadiusRightProps, BorderRadiusTopProps, IsTruncatedProps, MaxLinesProps, WordBreakProps } from './custom';
+import { BorderRadiusBottomProps, BorderRadiusLeftProps, BorderRadiusRightProps, BorderRadiusTopProps, IsTruncatedProps, MaxLinesProps, SpaceAroundProps, WordBreakProps } from './custom';
 import { LayoutProps } from './layout';
 import { SizingProps } from './sizing';
 import { SpaceProps } from './space';
+import { TablesProps } from './tables';
 import { TransformsProps } from './transforms';
 import { TransitionsProps } from './transitions';
 import { TypographyProps } from './typography';
-export interface SystemProps extends AnimationsProps, BackgroundColorProps, BordersProps, BorderRadiusBottomProps, BorderRadiusLeftProps, BorderRadiusRightProps, BorderRadiusTopProps, EffectsProps, FlexboxesProps, InteractivityProps, IsTruncatedProps, LayoutProps, MaxLinesProps, SizingProps, SpaceProps, TransformsProps, TransitionsProps, TypographyProps, WordBreakProps {
+export interface SystemProps extends AnimationsProps, BackgroundColorProps, BordersProps, BorderRadiusBottomProps, BorderRadiusLeftProps, BorderRadiusRightProps, BorderRadiusTopProps, EffectsProps, FlexboxesProps, InteractivityProps, IsTruncatedProps, LayoutProps, MaxLinesProps, SizingProps, SpaceProps, SpaceAroundProps, TablesProps, TransformsProps, TransitionsProps, TypographyProps, WordBreakProps {
 }
-declare const _default: import("@xstyled/system").StyleGenerator;
+declare const _default: import("@xstyled/styled-components").StyleGenerator;
 export default _default;

package/system/system.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var system_1 = require("@xstyled/system");
+var styled_components_1 = require("@xstyled/styled-components");
 var custom_1 = require("./custom");
-exports.default = system_1.compose(system_1.animation, system_1.backgroundColor, system_1.borders, custom_1.borderRadiusBottom, custom_1.borderRadiusLeft, custom_1.borderRadiusRight, custom_1.borderRadiusTop, system_1.color, system_1.effects, system_1.flexboxes, system_1.interactivity, custom_1.isTruncated, system_1.layout, custom_1.maxLines, system_1.sizing, system_1.space, system_1.transforms, system_1.transitions, system_1.typography, custom_1.wordBreak);
+exports.default = (0, styled_components_1.compose)(styled_components_1.animation, styled_components_1.backgroundColor, styled_components_1.borders, custom_1.borderRadiusBottom, custom_1.borderRadiusLeft, custom_1.borderRadiusRight, custom_1.borderRadiusTop, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, custom_1.isTruncated, styled_components_1.layout, custom_1.maxLines, styled_components_1.sizing, styled_components_1.space, custom_1.spaceAround, styled_components_1.tables, styled_components_1.transforms, styled_components_1.transitions, styled_components_1.typography, custom_1.wordBreak);

package/system/tables.d.ts

@@ -0,0 +1,14 @@
+import { SystemProp } from '@xstyled/system';
+import * as CSS from 'csstype';
+import { VuiTheme } from '../theme';
+declare type BorderCollapseProp = SystemProp<CSS.Property.BorderCollapse, VuiTheme>;
+export interface BorderCollapseProps {
+    borderCollapse?: BorderCollapseProp;
+}
+declare type TableLayoutProp = SystemProp<CSS.Property.TableLayout, VuiTheme>;
+export interface TableLayoutProps {
+    tableLayout?: TableLayoutProp;
+}
+export interface TablesProps extends BorderCollapseProps, TableLayoutProps {
+}
+export {};

package/system/tables.js

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

package/t/t.js

@@ -35,11 +35,11 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.TBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
-exports.T = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, centerV = _a.centerV, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "centerV", "children", "className", "decoration", "text", "weight"]);
-    var styles = core_1.useStyleConfig('T', props);
-    var aliasedProps = utils_1.filterUndefined({
+exports.TBase = styled_components_1.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.T = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), align = _a.align, casing = _a.casing, centerV = _a.centerV, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "centerV", "children", "className", "decoration", "text", "weight"]);
+    var styles = (0, core_1.useStyleConfig)('T', props);
+    var aliasedProps = (0, utils_1.filterUndefined)({
         alignItems: centerV ? 'center' : undefined,
         display: centerV ? 'inline-flex' : undefined,
         fontWeight: weight,
@@ -47,7 +47,7 @@ exports.T = core_1.vui(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.TBase, __assign({ className: utils_1.cs('vui-t', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
+    return (react_1.default.createElement(exports.TBase, __assign({ className: (0, utils_1.cs)('vui-t', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.T.displayName = 'T';
 exports.default = exports.T;

package/tag/context.js

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

package/tag/index.d.ts

@@ -1,6 +1,7 @@
 export * from './context';
 export * from './tag';
 export * from './tag.types';
+export * from './tagButton';
 export * from './tagIcon';
 export * from './tagText';
 export { default } from './tag';

package/tag/index.js

@@ -17,6 +17,7 @@ exports.default = void 0;
 __exportStar(require("./context"), exports);
 __exportStar(require("./tag"), exports);
 __exportStar(require("./tag.types"), exports);
+__exportStar(require("./tagButton"), exports);
 __exportStar(require("./tagIcon"), exports);
 __exportStar(require("./tagText"), exports);
 var tag_1 = require("./tag");

package/tag/tag.d.ts

@@ -1,10 +1,12 @@
 import { TagProps } from './tag.types';
+import TagButton from './tagButton';
 import TagIcon from './tagIcon';
 import TagText from './tagText';
 import { VuiComponent } from '../core';
 import { SystemProps } from '../system';
 export declare const TagBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Tag: VuiComponent<"span", TagProps> & {
+    Button: typeof TagButton;
     Icon: typeof TagIcon;
     Text: typeof TagText;
 };

package/tag/tag.js

@@ -52,17 +52,18 @@ exports.Tag = exports.TagBase = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
+var tagButton_1 = __importDefault(require("./tagButton"));
 var tagIcon_1 = __importDefault(require("./tagIcon"));
 var tagText_1 = __importDefault(require("./tagText"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.TagBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), system_1.system);
-exports.Tag = core_1.vui(function (props, ref) {
-    var casing = props.casing, children = props.children, className = props.className, colorScheme = props.colorScheme, icon = props.icon, iconLeft = props.iconLeft, iconRight = props.iconRight, isFullWidth = props.isFullWidth, _a = props.isInteractive, isInteractive = _a === void 0 ? props.onClick !== undefined : _a, isRound = props.isRound, _b = props.isTruncated, isTruncated = _b === void 0 ? true : _b, itemLeft = props.itemLeft, itemRight = props.itemRight, size = props.size, text = props.text, variant = props.variant, weight = props.weight, rest = __rest(props, ["casing", "children", "className", "colorScheme", "icon", "iconLeft", "iconRight", "isFullWidth", "isInteractive", "isRound", "isTruncated", "itemLeft", "itemRight", "size", "text", "variant", "weight"]);
-    var styles = core_1.useStyleConfig('Tag', props);
-    var _c = styles.container, activeBg = _c.activeBg, h = _c.h, hoverBg = _c.hoverBg, _d = _c.spaceX, spaceXBase = _d === void 0 ? 0 : _d, tagStyles = __rest(_c, ["activeBg", "h", "hoverBg", "spaceX"]);
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, size: size, variant: variant }); }, [colorScheme, size, variant]);
+exports.TagBase = styled_components_1.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.Tag = (0, core_1.vui)(function (props, ref) {
+    var casing = props.casing, children = props.children, className = props.className, _a = props.colorScheme, colorScheme = _a === void 0 ? 'blue' : _a, icon = props.icon, iconLeft = props.iconLeft, iconRight = props.iconRight, isFullWidth = props.isFullWidth, _b = props.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isRound = props.isRound, _c = props.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = props.itemLeft, itemRight = props.itemRight, onDelete = props.onDelete, _d = props.size, size = _d === void 0 ? 'md' : _d, text = props.text, _e = props.variant, variant = _e === void 0 ? 'subtle' : _e, weight = props.weight, rest = __rest(props, ["casing", "children", "className", "colorScheme", "icon", "iconLeft", "iconRight", "isFullWidth", "isInteractive", "isRound", "isTruncated", "itemLeft", "itemRight", "onDelete", "size", "text", "variant", "weight"]);
+    var styles = (0, core_1.useStyleConfig)('Tag', props);
+    var _f = styles.container, activeBg = _f.activeBg, h = _f.h, hoverBg = _f.hoverBg, _g = _f.spaceX, spaceXBase = _g === void 0 ? 0 : _g, tagStyles = __rest(_f, ["activeBg", "h", "hoverBg", "spaceX"]);
+    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, size: size, variant: variant }); }, [colorScheme, size, variant]);
     var spaceX = spaceXBase / 8;
     var spaceXText = (spaceXBase + 4) / 8;
     var pl = icon || itemLeft || iconLeft ? spaceX : spaceXText;
@@ -77,22 +78,23 @@ exports.Tag = core_1.vui(function (props, ref) {
             userSelect: 'none'
         }
         : {};
-    var aliasedProps = utils_1.filterUndefined({
+    var aliasedProps = (0, utils_1.filterUndefined)({
         borderRadius: isRound ? h / 2 : undefined,
         fontWeight: weight,
         textTransform: casing,
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(context_1.TagProvider, { value: context },
-        react_1.default.createElement(exports.TagBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-tag', className), fontWeight: "medium", h: h, pl: pl, pr: pr, ref: ref, transitionDuration: "fast" }, tagStyles, interactiveProps, aliasedProps, rest),
-            utils_1.isString(icon) ? react_1.default.createElement(tagIcon_1.default, { name: icon }) : icon,
+        react_1.default.createElement(exports.TagBase, __assign({ borderRadius: "md", className: (0, utils_1.cs)('vui-tag', className), fontWeight: "medium", h: h, pl: pl, pr: pr, ref: ref, transitionDuration: "fast" }, tagStyles, interactiveProps, aliasedProps, rest),
+            (0, utils_1.isString)(icon) ? react_1.default.createElement(tagIcon_1.default, { name: icon }) : icon,
             !icon && (react_1.default.createElement(react_1.default.Fragment, null,
                 itemLeft,
-                utils_1.isString(iconLeft) ? react_1.default.createElement(tagIcon_1.default, { mr: spaceX, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : (utils_1.isReactText(text) ? react_1.default.createElement(tagText_1.default, __assign({}, { isTruncated: isTruncated, text: text })) : text),
-                utils_1.isString(iconRight) ? react_1.default.createElement(tagIcon_1.default, { ml: spaceX, name: iconRight }) : iconRight,
-                itemRight)))));
+                (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(tagIcon_1.default, { mr: spaceX, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(tagText_1.default, __assign({}, { isTruncated: isTruncated, text: text })) : text),
+                (0, utils_1.isString)(iconRight) ? react_1.default.createElement(tagIcon_1.default, { ml: spaceX, name: iconRight }) : iconRight,
+                onDelete ? react_1.default.createElement(tagButton_1.default, { ml: spaceX, onClick: onDelete }) : itemRight)))));
 });
 exports.Tag.displayName = 'Tag';
+exports.Tag.Button = tagButton_1.default;
 exports.Tag.Icon = tagIcon_1.default;
 exports.Tag.Text = tagText_1.default;
 exports.default = exports.Tag;

package/tag/tag.types.d.ts

@@ -14,6 +14,7 @@ export interface TagProps extends SystemProps, ThemingProps<'Tag'> {
     isRound?: boolean;
     itemLeft?: React.ReactNode;
     itemRight?: React.ReactNode;
+    onDelete?: () => void;
     text?: React.ReactNode;
     weight?: TypographyProps['fontWeight'];
 }

package/tag/tagButton.d.ts

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

package/tag/tagButton.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.TagButton = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var button_1 = __importDefault(require("../button"));
+var core_1 = require("../core");
+exports.TagButton = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var tagProps = (_a = (0, context_1.useTag)()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, tagProps), props);
+    var styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
+    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-tagButton", colorScheme: mergedProps.colorScheme, icon: "falTimes", isRound: true, mr: -0.5, ref: ref }, styles.button, props)));
+});
+exports.TagButton.displayName = 'TagButton';
+exports.default = exports.TagButton;

package/tag/tagIcon.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
-exports.TagIcon = core_1.vui(function (props, ref) {
+exports.TagIcon = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var tagProps = (_a = context_1.useTag()) !== null && _a !== void 0 ? _a : {};
+    var tagProps = (_a = (0, context_1.useTag)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, tagProps), props);
-    var styles = core_1.useStyleConfig('Tag', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
     return react_1.default.createElement(icon_1.default, __assign({ className: "vui-tagIcon", ref: ref }, styles.icon, props));
 });
 exports.TagIcon.displayName = 'TagIcon';

package/tag/tagText.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
-exports.TagText = core_1.vui(function (props, ref) {
+exports.TagText = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var tagProps = (_a = context_1.useTag()) !== null && _a !== void 0 ? _a : {};
+    var tagProps = (_a = (0, context_1.useTag)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, tagProps), props);
-    var styles = core_1.useStyleConfig('Tag', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
     return react_1.default.createElement(t_1.default, __assign({ className: "vui-tagText", fontSize: "inherit", ref: ref }, styles.text, props));
 });
 exports.TagText.displayName = 'TagText';

package/tag/theme.d.ts

@@ -6,6 +6,15 @@ declare function variantSolid(props: Dict): {
         bg: string;
         color: string;
     };
+    button: {
+        hoverBorderColor: string;
+        borderColor: string;
+        color: string;
+        hoverBg: string;
+        activeBg: string;
+        bg: string;
+        variant: string;
+    };
 };
 declare function variantSubtle(props: Dict): {
     container: {
@@ -14,6 +23,14 @@ declare function variantSubtle(props: Dict): {
         bg: string;
         color: string;
     };
+    button: {
+        hoverBorderColor: string;
+        borderColor: string;
+        color: string;
+        hoverBg: string;
+        activeBg: string;
+        variant: string;
+    };
 };
 declare const _default: {
     defaultProps: {
@@ -29,6 +46,9 @@ declare const _default: {
                 h: number;
                 spaceX: number;
             };
+            button: {
+                size: string;
+            };
             icon: {
                 size: string;
             };
@@ -40,6 +60,9 @@ declare const _default: {
                 h: number;
                 spaceX: number;
             };
+            button: {
+                size: string;
+            };
             icon: {
                 size: string;
             };
@@ -51,6 +74,9 @@ declare const _default: {
                 h: number;
                 spaceX: number;
             };
+            button: {
+                size: string;
+            };
             icon: {
                 size: string;
             };

package/tag/theme.js

@@ -8,12 +8,24 @@ function variantSolid(props) {
         bg: c + ".80",
         color: 'white'
     };
+    var button = {
+        hoverBorderColor: "transparent",
+        borderColor: "transparent",
+        color: 'white',
+        hoverBg: c + ".70",
+        activeBg: c + ".60",
+        bg: c + ".80",
+        variant: 'solid'
+    };
     if (c === 'yellow') {
         container.hoverBg = c + ".80";
         container.activeBg = c + ".90";
         container.bg = c + ".70";
+        button.hoverBg = 'yellow.60';
+        button.activeBg = 'yellow.50';
+        button.bg = 'yellow.70';
     }
-    return { container: container };
+    return { container: container, button: button };
 }
 function variantSubtle(props) {
     var c = props.colorScheme;
@@ -23,14 +35,22 @@ function variantSubtle(props) {
         bg: c + ".20",
         color: 'prussian.80'
     };
-    return { container: container };
+    var button = {
+        hoverBorderColor: "transparent",
+        borderColor: "transparent",
+        color: c + ".90",
+        hoverBg: c + ".30",
+        activeBg: c + ".40",
+        variant: 'outlined'
+    };
+    return { container: container, button: button };
 }
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
     variant: 'subtle'
 };
-var parts = ['container', 'icon', 'text'];
+var parts = ['container', 'button', 'icon', 'text'];
 var sizes = {
     sm: {
         container: {
@@ -38,6 +58,9 @@ var sizes = {
             h: 24,
             spaceX: 4
         },
+        button: {
+            size: 'xs'
+        },
         icon: {
             size: 'xs'
         },
@@ -49,6 +72,9 @@ var sizes = {
             h: 32,
             spaceX: 6
         },
+        button: {
+            size: 'xs'
+        },
         icon: {
             size: 'sm'
         },
@@ -60,6 +86,9 @@ var sizes = {
             h: 40,
             spaceX: 8
         },
+        button: {
+            size: 'sm'
+        },
         icon: {
             size: 'md'
         },

package/textarea/textarea.js

@@ -72,25 +72,25 @@ var core_1 = require("../core");
 var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-exports.TextareaTextarea = styled_components_1.default.textarea.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\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\t", "\n"], ["\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\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\t", "\n"])), system_1.system);
-exports.TextareaBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n\n\t", "\n"])), system_1.system);
-exports.Textarea = core_1.vui(function (props, ref) {
-    var _a = __read(react_1.useState(helpers_1.getInitialCount(props)), 2), count = _a[0], setCount = _a[1];
-    var _b = core_1.omitThemingProps(props), autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, defaultValue = _b.defaultValue, disabled = _b.disabled, id = _b.id, isInvalid = _b.isInvalid, maxLength = _b.maxLength, name = _b.name, onBlur = _b.onBlur, onChangeProp = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, resize = _b.resize, showCount = _b.showCount, _c = _b.textareaProps, textareaProps = _c === void 0 ? {} : _c, textareaRef = _b.textareaRef, value = _b.value, rest = __rest(_b, ["autoFocus", "className", "colorScheme", "defaultValue", "disabled", "id", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "showCount", "textareaProps", "textareaRef", "value"]);
-    var colorProps = utils_1.filterUndefined({
+exports.TextareaTextarea = styled_components_1.default.textarea.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\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\t", "\n"], ["\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\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\t", "\n"])), system_1.system);
+exports.TextareaBase = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n\n\t", "\n"])), system_1.system);
+exports.Textarea = (0, core_1.vui)(function (props, ref) {
+    var _a = __read((0, react_1.useState)((0, helpers_1.getInitialCount)(props)), 2), count = _a[0], setCount = _a[1];
+    var _b = (0, core_1.omitThemingProps)(props), autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, defaultValue = _b.defaultValue, disabled = _b.disabled, id = _b.id, isInvalid = _b.isInvalid, maxLength = _b.maxLength, name = _b.name, onBlur = _b.onBlur, onChangeProp = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, resize = _b.resize, showCount = _b.showCount, _c = _b.textareaProps, textareaProps = _c === void 0 ? {} : _c, textareaRef = _b.textareaRef, value = _b.value, rest = __rest(_b, ["autoFocus", "className", "colorScheme", "defaultValue", "disabled", "id", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "showCount", "textareaProps", "textareaRef", "value"]);
+    var colorProps = (0, utils_1.filterUndefined)({
         colorScheme: colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)
     });
-    var styles = core_1.useStyleConfig('Textarea', __assign(__assign({}, colorProps), props));
+    var styles = (0, core_1.useStyleConfig)('Textarea', __assign(__assign({}, colorProps), props));
     function onChange(e) {
         setCount(e.target.value.length);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
-    var aliasedProps = utils_1.filterUndefined({
+    var aliasedProps = (0, utils_1.filterUndefined)({
         bg: readOnly ? 'grey.20' : undefined,
         focusBorderColor: !readOnly ? 'transparent' : undefined,
         focusRing: readOnly ? 0 : undefined
     });
-    return (react_1.default.createElement(exports.TextareaBase, __assign({ className: utils_1.cs('vui-textarea', className), ref: ref }, styles.container, rest),
+    return (react_1.default.createElement(exports.TextareaBase, __assign({ className: (0, utils_1.cs)('vui-textarea', className), ref: ref }, styles.container, rest),
         react_1.default.createElement(exports.TextareaTextarea, __assign({ borderRadius: "md", className: "vui-textareaTextarea", p: 1, placeholderColor: "grey.60", ref: textareaRef, transitionDuration: "fast" }, {
             autoFocus: autoFocus,
             defaultValue: defaultValue,

package/theme/components.d.ts

@@ -786,6 +786,9 @@ declare const _default: {
                     h: number;
                     spaceX: number;
                 };
+                button: {
+                    size: string;
+                };
                 icon: {
                     size: string;
                 };
@@ -797,6 +800,9 @@ declare const _default: {
                     h: number;
                     spaceX: number;
                 };
+                button: {
+                    size: string;
+                };
                 icon: {
                     size: string;
                 };
@@ -808,6 +814,9 @@ declare const _default: {
                     h: number;
                     spaceX: number;
                 };
+                button: {
+                    size: string;
+                };
                 icon: {
                     size: string;
                 };
@@ -822,6 +831,15 @@ declare const _default: {
                     bg: string;
                     color: string;
                 };
+                button: {
+                    hoverBorderColor: string;
+                    borderColor: string;
+                    color: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    bg: string;
+                    variant: string;
+                };
             };
             subtle: (props: import("..").Dict<any>) => {
                 container: {
@@ -830,6 +848,14 @@ declare const _default: {
                     bg: string;
                     color: string;
                 };
+                button: {
+                    hoverBorderColor: string;
+                    borderColor: string;
+                    color: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    variant: string;
+                };
             };
         };
     };