@veracity/vui 0.0.9 → 0.0.11

package/system/typography.d.ts

@@ -1,68 +1,75 @@
-import { ITheme, SystemProp, VariantsType } from '@xstyled/system';
+import { SystemProp, VariantsType } from '@xstyled/system';
 import { Globals, Property } from 'csstype';
 import { ColorGetter } from './colors';
 import { VuiTheme } from '../theme';
-export declare type FontGetter<T extends ITheme = VuiTheme> = VariantsType<T['fonts']>;
-export declare type FontSizeGetter<T extends ITheme = VuiTheme> = VariantsType<T['fontSizes']>;
-export declare type FontWeightGetter<T extends ITheme = VuiTheme> = VariantsType<T['fontWeights']>;
-export declare type LineHeightGetter<T extends ITheme = VuiTheme> = VariantsType<T['lineHeights']>;
-declare type FontFamilyProp<T extends ITheme> = SystemProp<FontGetter<T>, T>;
-export interface FontFamilyProps<T extends ITheme = VuiTheme> {
-    fontFamily?: FontFamilyProp<T>;
-    hoverFontFamily?: FontFamilyProp<T>;
-}
-declare type FontSizeProp<T extends ITheme> = SystemProp<FontSizeGetter<T>, T>;
-export interface FontSizeProps<T extends ITheme = VuiTheme> {
-    fontSize?: FontSizeProp<T>;
-    hoverFontSize?: FontSizeProp<T>;
-}
-declare type FontStyleProp<T extends ITheme> = SystemProp<Property.FontStyle, T>;
-export interface FontStyleProps<T extends ITheme = VuiTheme> {
-    fontStyle?: FontStyleProp<T>;
-    hoverFontStyle?: FontStyleProp<T>;
-}
-declare type FontWeightProp<T extends ITheme> = SystemProp<FontWeightGetter<T>, T>;
-export interface FontWeightProps<T extends ITheme = VuiTheme> {
-    fontWeight?: FontWeightProp<T>;
-    hoverFontWeight?: FontWeightProp<T>;
-}
-declare type LineHeightProp<T extends ITheme> = SystemProp<LineHeightGetter<T>, T>;
-export interface LineHeightProps<T extends ITheme = VuiTheme> {
-    lineHeight?: LineHeightProp<T>;
-    hoverLineHeight?: LineHeightProp<T>;
-}
-declare type ColorProp<T extends ITheme> = SystemProp<ColorGetter<T>, T>;
-export interface ColorProps<T extends ITheme = VuiTheme> {
-    color?: ColorProp<T>;
-    disabledColor?: ColorProp<T>;
-    hoverColor?: ColorProp<T>;
-    placeholderColor?: ColorProp<T>;
-}
-declare type TextTransformProp<T extends ITheme> = SystemProp<Property.TextTransform, T>;
-export interface TextTransformProps<T extends ITheme = VuiTheme> {
-    textTransform?: TextTransformProp<T>;
-    hoverTextTransform?: TextTransformProp<T>;
+export declare type FontGetter = VariantsType<VuiTheme['fonts']>;
+export declare type FontSizeGetter = VariantsType<VuiTheme['fontSizes']>;
+export declare type FontWeightGetter = VariantsType<VuiTheme['fontWeights']>;
+export declare type LineHeightGetter = VariantsType<unknown>;
+declare type FontFamilyProp = SystemProp<FontGetter, VuiTheme>;
+export interface FontFamilyProps {
+    fontFamily?: FontFamilyProp;
+}
+declare type FontSizeProp = SystemProp<FontSizeGetter, VuiTheme>;
+export interface FontSizeProps {
+    fontSize?: FontSizeProp;
+}
+declare type FontStyleProp = SystemProp<Property.FontStyle, VuiTheme>;
+export interface FontStyleProps {
+    fontStyle?: FontStyleProp;
+}
+declare type FontWeightProp = SystemProp<FontWeightGetter, VuiTheme>;
+export interface FontWeightProps {
+    fontWeight?: FontWeightProp;
+}
+declare type LineHeightProp = SystemProp<LineHeightGetter, VuiTheme>;
+export interface LineHeightProps {
+    lineHeight?: LineHeightProp;
+}
+declare type ColorProp = ColorGetter;
+export interface ColorProps {
+    color?: ColorProp;
+    disabledColor?: ColorProp;
+    hoverColor?: ColorProp;
+    placeholderColor?: ColorProp;
+}
+declare type TextTransformProp = SystemProp<Property.TextTransform, VuiTheme>;
+export interface TextTransformProps {
+    textTransform?: TextTransformProp;
 }
 declare type TextDecoration = Globals | 'overline' | 'underline' | 'line-through';
-declare type TextDecorationProp<T extends ITheme> = SystemProp<TextDecoration, T>;
-export interface TextDecorationProps<T extends ITheme = VuiTheme> {
-    textDecoration?: TextDecorationProp<T>;
-    hoverTextDecoration?: TextDecorationProp<T>;
-}
-declare type TextAlignProp<T extends ITheme> = SystemProp<Property.TextAlign, T>;
-export interface TextAlignProps<T extends ITheme = VuiTheme> {
-    textAlign?: TextAlignProp<T>;
-    hoverTextAlign?: TextAlignProp<T>;
-}
-declare type VerticalAlignProp<T extends ITheme> = SystemProp<Property.VerticalAlign, T>;
-export interface VerticalAlignProps<T extends ITheme = VuiTheme> {
-    verticalAlign?: VerticalAlignProp<T>;
-    hoverVerticalAlign?: VerticalAlignProp<T>;
-}
-declare type ListStyleTypeProp<T extends ITheme> = SystemProp<Property.ListStyleType, T>;
-export interface ListStyleTypeProps<T extends ITheme = VuiTheme> {
-    listStyleType?: ListStyleTypeProp<T>;
-}
-export interface TypographyProps<T extends ITheme = VuiTheme> extends FontFamilyProps<T>, FontSizeProps<T>, FontStyleProps<T>, FontWeightProps<T>, LineHeightProps<T>, ColorProps<T>, TextTransformProps<T>, TextDecorationProps<T>, TextAlignProps<T>, VerticalAlignProps<T>, ListStyleTypeProps<T> {
+declare type TextDecorationProp = SystemProp<TextDecoration, VuiTheme>;
+export interface TextDecorationProps {
+    textDecoration?: TextDecorationProp;
+}
+declare type TextAlignProp = SystemProp<Property.TextAlign, VuiTheme>;
+export interface TextAlignProps {
+    textAlign?: TextAlignProp;
+}
+declare type VerticalAlignProp = SystemProp<Property.VerticalAlign, VuiTheme>;
+export interface VerticalAlignProps {
+    verticalAlign?: VerticalAlignProp;
+}
+declare type LetterSpacingProp = SystemProp<Property.LetterSpacing, VuiTheme>;
+export interface LetterSpacingProps {
+    letterSpacing?: LetterSpacingProp;
+}
+declare type WhiteSpaceProp = SystemProp<Property.WhiteSpace, VuiTheme>;
+export interface WhiteSpaceProps {
+    whiteSpace?: WhiteSpaceProp;
+}
+declare type TextOverflowProp = SystemProp<Property.TextOverflow, VuiTheme>;
+export interface TextOverflowProps {
+    textOverflow?: TextOverflowProp;
+}
+declare type ListStyleTypeProp = SystemProp<Property.ListStyleType, VuiTheme>;
+export interface ListStyleTypeProps {
+    listStyleType?: ListStyleTypeProp;
+}
+declare type ListStylePositionProp = SystemProp<Property.ListStylePosition, VuiTheme>;
+export interface ListStylePositionProps {
+    listStylePosition?: ListStylePositionProp;
+}
+export interface TypographyProps extends FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, LineHeightProps, ColorProps, TextTransformProps, TextDecorationProps, TextAlignProps, VerticalAlignProps, LetterSpacingProps, WhiteSpaceProps, TextOverflowProps, ListStyleTypeProps, ListStylePositionProps {
 }
 export {};

package/t/t.d.ts

@@ -1,6 +1,5 @@
-import { TProps, TStyleProps } from './t.types';
-export declare const TBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TStyleProps & {
-    color?: any;
-}, never>;
+import { TProps } from './t.types';
+import { SystemProps } from '../system';
+export declare const TBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const T: import("../core").VuiComponent<"span", TProps>;
 export default T;

package/t/t.js

@@ -30,14 +30,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.T = exports.TBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.cursor, styled_components_1.flexboxes, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.TBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
+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, isFlex = _a.isFlex, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "centerV", "children", "className", "decoration", "isFlex", "text", "weight"]);
     var styles = core_1.useStyleConfig('T', props);

package/t/t.types.d.ts

@@ -1,6 +1,6 @@
-import { BackgroundColorProps, BordersProps, CursorProps, FlexboxesProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface TProps extends TStyleProps, ThemingProps<'T'> {
+export interface TProps extends SystemProps, ThemingProps<'T'> {
     align?: TypographyProps['textAlign'];
     casing?: TypographyProps['textTransform'];
     centerV?: boolean;
@@ -9,5 +9,3 @@ export interface TProps extends TStyleProps, ThemingProps<'T'> {
     text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
-export interface TStyleProps extends BackgroundColorProps, BordersProps, CursorProps, FlexboxesProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}

package/textarea/helpers.d.ts

@@ -0,0 +1,2 @@
+import { TextareaProps } from './textarea.types';
+export declare function getInitialCount(props: TextareaProps): number;

package/textarea/helpers.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitialCount = void 0;
+function getInitialCount(props) {
+    var _a, _b;
+    var defaultValue = props.defaultValue, value = props.value;
+    return (_b = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.toString().length) !== null && _b !== void 0 ? _b : 0;
+}
+exports.getInitialCount = getInitialCount;

package/textarea/textarea.d.ts

@@ -1,6 +1,6 @@
-import { TextareaProps, TextareaStyleProps } from './textarea.types';
-export declare const TextareaBase: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, TextareaStyleProps & {
-    color?: any;
-}, never>;
-export declare const Textarea: import("../core").VuiComponent<"textarea", TextareaProps>;
+import { TextareaProps } from './textarea.types';
+import { SystemProps } from '../system';
+export declare const TextareaTextarea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const TextareaBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const Textarea: import("../core").VuiComponent<"div", TextareaProps>;
 export default Textarea;

package/textarea/textarea.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)
@@ -25,23 +44,73 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = exports.TextareaBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
-var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+exports.Textarea = exports.TextareaBase = exports.TextareaTextarea = void 0;
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var helpers_1 = require("./helpers");
 var core_1 = require("../core");
+var system_1 = require("../system");
+var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.fontSize, styled_components_1.resize, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-exports.TextareaBase = styled_components_2.default.textarea.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-width: 1px;\n\tmin-height: 80px;\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:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\tborder-width: 1px;\n\tmin-height: 80px;\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:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), generator);
+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 = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
-    var styles = core_1.useStyleConfig('Textarea', props);
-    return (react_1.default.createElement(exports.TextareaBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-textarea', className), p: 1, placeholderColor: "grey.60", ref: ref, transitionDuration: "fast" }, styles, rest)));
+    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, 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", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "showCount", "textareaProps", "textareaRef", "value"]);
+    var colorProps = utils_1.filterUndefined({
+        colorScheme: colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)
+    });
+    var styles = 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({
+        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),
+        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,
+            disabled: disabled,
+            maxLength: maxLength,
+            name: name,
+            onBlur: onBlur,
+            onChange: onChange,
+            onFocus: onFocus,
+            placeholder: placeholder,
+            readOnly: readOnly,
+            required: required,
+            resize: resize,
+            value: value
+        }, styles.textarea, aliasedProps, textareaProps)),
+        showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 2px)" },
+            count,
+            " / ",
+            maxLength))));
 });
 exports.Textarea.displayName = 'Textarea';
 exports.default = exports.Textarea;
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/textarea/textarea.types.d.ts

@@ -1,7 +1,25 @@
-import { BackgroundColorProps, BordersProps, ColorProps, FontSizeProps, ResizeProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+/// <reference types="react" />
+import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../core';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface TextareaProps extends TextareaStyleProps, ThemingProps<'Textarea'> {
+export interface TextareaProps extends SystemProps, ThemingProps<'Textarea'> {
+    autoFocus?: boolean;
     colorScheme?: 'green' | 'grey' | 'red';
-}
-export interface TextareaStyleProps extends BackgroundColorProps, BordersProps, ColorProps, FontSizeProps, ResizeProps, SizingProps, SpaceProps, TransitionsProps {
+    cols?: number;
+    defaultValue?: number | string;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    maxLength?: number;
+    name?: string;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    rows?: number;
+    showCount?: boolean;
+    textareaProps?: PropsOf<'textarea', SystemProps>;
+    textareaRef?: React.MutableRefObject<HTMLTextAreaElement | null> | null;
+    value?: number | string;
 }

package/textarea/theme.d.ts

@@ -1,14 +1,18 @@
 import { Dict } from '../utils';
 declare function variantDefault(props: Dict): {
-    borderColor: string;
-    focusRing: number;
-    focusRingColor: string;
+    container: {};
+    textarea: {
+        borderColor: string;
+        focusRing: number;
+        focusRingColor: string;
+    };
 };
 declare const _default: {
     defaultProps: {
         colorScheme: string;
         variant: string;
     };
+    parts: string[];
     sizes: {};
     variants: {
         default: typeof variantDefault;

package/textarea/theme.js

@@ -2,27 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function variantDefault(props) {
     var c = props.colorScheme;
-    var styles = {
+    var container = {};
+    var textarea = {
         borderColor: c + ".80",
         focusRing: 2,
         focusRingColor: c + ".80"
     };
     if (c === 'grey') {
-        styles.borderColor = c + ".60";
-        styles.focusRingColor = 'blue.50';
+        textarea.borderColor = c + ".60";
+        textarea.focusRingColor = 'blue.50';
     }
-    return styles;
+    return { container: container, textarea: textarea };
 }
 var defaultProps = {
     colorScheme: 'grey',
     variant: 'default'
 };
+var parts = ['container', 'textarea'];
 var sizes = {};
 var variants = {
     default: variantDefault
 };
 exports.default = {
     defaultProps: defaultProps,
+    parts: parts,
     sizes: sizes,
     variants: variants
 };

package/theme/components.d.ts

@@ -143,6 +143,7 @@ declare const _default: {
                 borderWidth: number;
             };
             solid: (props: import("..").Dict<any>) => {
+                borderColor: string;
                 hoverBg: string;
                 activeBg: string;
                 bg: string;
@@ -307,7 +308,6 @@ declare const _default: {
                 borderColor: string;
                 focusWithinRing: number;
                 focusWithinRingColor: string;
-                iconColor: string;
             };
         };
     };
@@ -391,6 +391,10 @@ declare const _default: {
                 color: string;
                 hoverColor: string;
             };
+            light: (props: import("..").Dict<any>) => {
+                color: string;
+                hoverColor: string;
+            };
         };
     };
     List: {
@@ -744,12 +748,16 @@ declare const _default: {
             colorScheme: string;
             variant: string;
         };
+        parts: string[];
         sizes: {};
         variants: {
             default: (props: import("..").Dict<any>) => {
-                borderColor: string;
-                focusRing: number;
-                focusRingColor: string;
+                container: {};
+                textarea: {
+                    borderColor: string;
+                    focusRing: number;
+                    focusRingColor: string;
+                };
             };
         };
     };

package/theme/defaultTheme.d.ts

@@ -294,6 +294,7 @@ declare const defaultTheme: {
                     borderWidth: number;
                 };
                 solid: (props: import("..").Dict<any>) => {
+                    borderColor: string;
                     hoverBg: string;
                     activeBg: string;
                     bg: string;
@@ -458,7 +459,6 @@ declare const defaultTheme: {
                     borderColor: string;
                     focusWithinRing: number;
                     focusWithinRingColor: string;
-                    iconColor: string;
                 };
             };
         };
@@ -542,6 +542,10 @@ declare const defaultTheme: {
                     color: string;
                     hoverColor: string;
                 };
+                light: (props: import("..").Dict<any>) => {
+                    color: string;
+                    hoverColor: string;
+                };
             };
         };
         List: {
@@ -895,12 +899,16 @@ declare const defaultTheme: {
                 colorScheme: string;
                 variant: string;
             };
+            parts: string[];
             sizes: {};
             variants: {
                 default: (props: import("..").Dict<any>) => {
-                    borderColor: string;
-                    focusRing: number;
-                    focusRingColor: string;
+                    container: {};
+                    textarea: {
+                        borderColor: string;
+                        focusRing: number;
+                        focusRingColor: string;
+                    };
                 };
             };
         };

package/theme/foundations/animations.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     bounce: 'vui-bounce 1s infinite',
-    fadeDown: 'vui-fadeDown 0.3s ease-in-out',
-    fadeIn: 'vui-fadeIn 0.3s ease-in-out',
-    fadeLeft: 'vui-fadeLeft 0.3s ease-in-out',
-    fadeOut: 'vui-fadeOut 0.3s ease-in-out',
-    fadeRight: 'vui-fadeRight 0.3s ease-in-out',
-    fadeUp: 'vui-fadeUp 0.3s ease-in-out',
+    fadeDown: 'vui-fadeDown 0.2s ease-in-out',
+    fadeIn: 'vui-fadeIn 0.2s ease-in-out',
+    fadeLeft: 'vui-fadeLeft 0.2s ease-in-out',
+    fadeOut: 'vui-fadeOut 0.2s ease-in-out',
+    fadeRight: 'vui-fadeRight 0.2s ease-in-out',
+    fadeUp: 'vui-fadeUp 0.2s ease-in-out',
     pulse: 'vui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
     spin: 'vui-spin 1s linear infinite'
 };

package/tile/tile.types.d.ts

@@ -1,7 +1,5 @@
-import { BoxProps, BoxStyleProps } from '../box';
+import { BoxProps } from '../box';
 import { ThemingProps } from '../theme';
-export interface TileProps extends Omit<BoxProps, 'size' | 'variant'>, TileStyleProps, ThemingProps<'Tile'> {
+export interface TileProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Tile'> {
     isInteractive?: boolean;
 }
-export interface TileStyleProps extends BoxStyleProps {
-}