@veracity/vui 0.0.3 → 0.0.4

package/switch/switch.js

@@ -75,11 +75,9 @@ var core_1 = require("../core");
 var t_1 = require("../t");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-exports.SwitchBase = styled_components_2.default.label.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), t_1.TBase, generator);
+exports.SwitchBase = styled_components_2.default.label.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), t_1.TBase, generator);
 exports.Switch = core_1.forwardRef(function (props, ref) {
-    var checked = props.checked, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultChecked = props.defaultChecked, disabled = props.disabled, innerLabelOff = props.innerLabelOff, innerLabelOn = props.innerLabelOn, inputProps = props.inputProps, inputRef = props.inputRef, labelLeft = props.labelLeft, labelRight = props.labelRight, name = props.name, onChange = props.onChange, required = props.required, size = props.size, value = props.value, variant = props.variant, rest = __rest(props, ["checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "labelLeft", "labelRight", "name", "onChange", "required", "size", "value", "variant"]);
+    var checked = props.checked, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultChecked = props.defaultChecked, disabled = props.disabled, innerLabelOff = props.innerLabelOff, innerLabelOn = props.innerLabelOn, inputProps = props.inputProps, inputRef = props.inputRef, labelLeft = props.labelLeft, labelRight = props.labelRight, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, required = props.required, size = props.size, value = props.value, variant = props.variant, rest = __rest(props, ["checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
     var _a = __read(react_1.useState(defaultChecked), 2), isChecked = _a[0], setIsChecked = _a[1];
     var styles = core_1.useStyleConfig('Switch', props);
     react_1.useEffect(function () {
@@ -89,11 +87,31 @@ exports.Switch = core_1.forwardRef(function (props, ref) {
         setIsChecked(e.target.checked);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }, [onChange]);
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, isChecked: isChecked, name: name, size: size, value: value, variant: variant }); }, [
+    var context = react_1.useMemo(function () {
+        return utils_1.filterUndefined({
+            colorScheme: colorScheme,
+            defaultChecked: defaultChecked,
+            disabled: disabled,
+            isChecked: isChecked,
+            name: name,
+            onBlur: onBlur,
+            onChange: handleOnChange,
+            onFocus: onFocus,
+            required: required,
+            size: size,
+            value: value,
+            variant: variant
+        });
+    }, [
         colorScheme,
+        defaultChecked,
         disabled,
+        handleOnChange,
         isChecked,
         name,
+        onBlur,
+        onFocus,
+        required,
         size,
         value,
         variant
@@ -105,9 +123,11 @@ exports.Switch = core_1.forwardRef(function (props, ref) {
     return (react_1.default.createElement(context_1.SwitchProvider, { value: context },
         react_1.default.createElement(exports.SwitchBase, __assign({ className: utils_1.cs('vui-switch', className), ref: ref }, styles.container, aliasedProps, rest), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
             labelLeft && react_1.default.createElement(switchLabel_1.SwitchLabel, null, labelLeft),
-            react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputProps: inputProps, inputRef: inputRef, required: required }, { onChange: handleOnChange })),
+            react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputProps: inputProps, inputRef: inputRef })),
             labelRight && react_1.default.createElement(switchLabel_1.SwitchLabel, null, labelRight))))));
 });
 exports.Switch.displayName = 'Switch';
+exports.Switch.Button = switchButton_1.SwitchButton;
+exports.Switch.Label = switchLabel_1.SwitchLabel;
 exports.default = exports.Switch;
 var templateObject_1;

package/switch/switch.types.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface SwitchProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'>, SwitchStyleProps, ThemingProps<'Switch'> {
+export interface SwitchProps extends SwitchStyleProps, ThemingProps<'Switch'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
@@ -12,7 +12,9 @@ export interface SwitchProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onC
     labelLeft?: React.ReactElement | string;
     labelRight?: React.ReactElement | string;
     name?: string;
+    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     required?: boolean;
     value?: number | string;
 }

package/switch/switchButton.d.ts

@@ -1,13 +1,7 @@
 import { SwitchButtonProps, SwitchButtonStyleProps, SwitchThumbStyleProps, SwitchTrackStyleProps } from './switchButton.types';
 export declare const SwitchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const SwitchThumb: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & SwitchThumbStyleProps, never>;
-export declare const SwitchTrack: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & SwitchTrackStyleProps, never>;
-export declare const SwitchButtonBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & SwitchButtonStyleProps, never>;
-export declare const SwitchButton: import("styled-components").StyledComponent<"span", never, SwitchButtonProps, never>;
+export declare const SwitchThumb: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SwitchThumbStyleProps, never>;
+export declare const SwitchTrack: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SwitchTrackStyleProps, never>;
+export declare const SwitchButtonBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SwitchButtonStyleProps, never>;
+export declare const SwitchButton: import("../core").VuiComponent<"span", SwitchButtonProps>;
 export default SwitchButton;

package/switch/switchButton.js

@@ -75,15 +75,9 @@ var buttonGenerator = styled_components_1.compose(styled_components_1.color, sty
 var thumbGenerator = styled_components_1.compose(styled_components_1.borders, styled_components_1.backgroundColor, styled_components_1.layout, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 var trackGenerator = styled_components_1.compose(styled_components_1.borders, styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 exports.SwitchInput = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
-exports.SwitchThumb = styled_components_2.default.span.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(thumbGenerator.meta.props)
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"])), thumbGenerator);
-exports.SwitchTrack = styled_components_2.default.span.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(trackGenerator.meta.props)
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tposition: relative;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tposition: relative;\n\n\t", "\n"])), trackGenerator);
-exports.SwitchButtonBase = styled_components_2.default.span.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(buttonGenerator.meta.props)
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tline-height: 1.333;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tline-height: 1.333;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"])), exports.SwitchThumb, exports.SwitchTrack, buttonGenerator);
+exports.SwitchThumb = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(thumbGenerator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\n\t", "\n"])), thumbGenerator);
+exports.SwitchTrack = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(trackGenerator))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tposition: relative;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tposition: relative;\n\n\t", "\n"])), trackGenerator);
+exports.SwitchButtonBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(buttonGenerator))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"])), exports.SwitchThumb, exports.SwitchTrack, buttonGenerator);
 exports.SwitchButton = core_1.forwardRef(function (props, ref) {
     var _a;
     var _b = (_a = context_1.useSwitch()) !== null && _a !== void 0 ? _a : {}, switchIsChecked = _b.isChecked, switchProps = __rest(_b, ["isChecked"]);

package/switch/switchButton.types.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { BackgroundColorProps, BordersProps, ColorProps, FontSizeProps, SizingProps, SpaceProps, TransformsProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface SwitchButtonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onBlur' | 'onChange' | 'onFocus'>, SwitchThumbStyleProps, ThemingProps<'Switch'> {
+export interface SwitchButtonProps extends SwitchThumbStyleProps, ThemingProps<'Switch'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;

package/switch/switchLabel.d.ts

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

package/switch/switchLabel.js

@@ -24,7 +24,7 @@ exports.SwitchLabel = core_1.forwardRef(function (props, ref) {
     var switchProps = (_a = context_1.useSwitch()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, switchProps), props);
     var styles = core_1.useStyleConfig('Switch', mergedProps);
-    return react_1.default.createElement(t_1.default, __assign({ ref: ref }, styles.label, props));
+    return react_1.default.createElement(t_1.default, __assign({ className: "vui-switchLabel", ref: ref }, styles.label, props));
 });
 exports.SwitchLabel.displayName = 'SwitchLabel';
 exports.default = exports.SwitchLabel;

package/system/colors.d.ts

@@ -1,3 +1,4 @@
-import { ITheme, VariantsType } from '@xstyled/system';
+import { ITheme } from '@xstyled/system';
 import { VuiTheme } from '../theme';
-export declare type ColorGetter<T extends ITheme = VuiTheme> = VariantsType<T['colors']>;
+import { AnyString } from '../utils';
+export declare type ColorGetter<T extends ITheme = VuiTheme> = keyof T['colors'] | AnyString;

package/system/transitions.d.ts

@@ -1,5 +1,6 @@
 import { ITheme, SystemProp, VariantsType } from '@xstyled/system';
 import { VuiTheme } from '../theme';
+export declare type DurationGetter = VariantsType<VuiTheme['durations']>;
 export declare type TransitionGetter<T extends ITheme = VuiTheme> = VariantsType<T['transitions']>;
 export declare type TransitionPropertyGetter<T extends ITheme = VuiTheme> = VariantsType<T['transitionProperties']>;
 export declare type TimingFunctionGetter<T extends ITheme = VuiTheme> = VariantsType<T['timingFunctions']>;
@@ -13,7 +14,7 @@ export interface TransitionPropertyProps<T extends ITheme = VuiTheme> {
     transitionProperty?: TransitionPropertyProp<T>;
     hoverTransitionProperty?: TransitionPropertyProp<T>;
 }
-declare type TransitionDurationProp<T extends ITheme> = SystemProp<any, T>;
+declare type TransitionDurationProp<T extends ITheme> = SystemProp<DurationGetter, T>;
 export interface TransitionDurationProps<T extends ITheme = VuiTheme> {
     transitionDuration?: TransitionDurationProp<T>;
     hoverTransitionDuration?: TransitionDurationProp<T>;

package/t/t.d.ts

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

package/t/t.js

@@ -37,9 +37,7 @@ var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(system_1.isTruncated, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.TBase = styled_components_2.default.span.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tline-height: 1.333;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"], ["\n\tline-height: 1.333;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"])), generator);
+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.T = core_1.forwardRef(function (props, ref) {
     var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, centerV = _a.centerV, className = _a.className, decoration = _a.decoration, isFlex = _a.isFlex, weight = _a.weight, rest = __rest(_a, ["align", "casing", "centerV", "className", "decoration", "isFlex", "weight"]);
     var styles = core_1.useStyleConfig('T', props);

package/t/t.types.d.ts

@@ -1,14 +1,12 @@
-import { HTMLAttributes } from 'react';
-import { IsTruncatedProps, FlexboxesProps, SizingProps, SpaceProps, TextAlignProps, TextDecorationProps, TextTransformProps, TransitionsProps, TypographyProps } from '../system';
-import { FontWeight, ThemingProps } from '../theme';
-import { AnyString } from '../utils';
-export interface TProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, TStyleProps, ThemingProps<'T'> {
-    align?: TextAlignProps['textAlign'];
-    casing?: TextTransformProps['textTransform'];
+import { IsTruncatedProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface TProps extends TStyleProps, ThemingProps<'T'> {
+    align?: TypographyProps['textAlign'];
+    casing?: TypographyProps['textTransform'];
     centerV?: boolean;
-    decoration?: TextDecorationProps['textDecoration'];
+    decoration?: TypographyProps['textDecoration'];
     isFlex?: boolean;
-    weight?: FontWeight | AnyString | number;
+    weight?: TypographyProps['fontWeight'];
 }
 export interface TStyleProps extends IsTruncatedProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

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, {
-    [x: string]: {};
-} & TextareaStyleProps, never>;
-export declare const Textarea: import("styled-components").StyledComponent<"textarea", never, TextareaProps, never>;
+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>;
 export default Textarea;

package/textarea/textarea.js

@@ -36,9 +36,7 @@ var styled_components_2 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 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({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(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.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.Textarea = core_1.forwardRef(function (props, ref) {
     var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
     var styles = core_1.useStyleConfig('Textarea', props);

package/textarea/textarea.types.d.ts

@@ -1,7 +1,6 @@
-import { HTMLAttributes } from 'react';
 import { BackgroundColorProps, BordersProps, ColorProps, FontSizeProps, ResizeProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface TextareaProps extends Omit<HTMLAttributes<HTMLTextAreaElement>, 'color'>, TextareaStyleProps, ThemingProps<'Textarea'> {
+export interface TextareaProps extends TextareaStyleProps, ThemingProps<'Textarea'> {
     colorScheme?: 'green' | 'grey' | 'red';
 }
 export interface TextareaStyleProps extends BackgroundColorProps, BordersProps, ColorProps, FontSizeProps, ResizeProps, SizingProps, SpaceProps, TransitionsProps {

package/theme/components.d.ts

@@ -1,4 +1,46 @@
 declare const _default: {
+    Alert: {
+        defaultProps: {
+            colorScheme: string;
+            variant: string;
+        };
+        parts: string[];
+        sizes: {};
+        variants: {
+            solid: (props: import("..").Dict<any>) => {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+                button: {
+                    bg: string;
+                    hoverBg: string;
+                };
+                icon: {};
+                message: {};
+                text: {};
+                title: {};
+            };
+            subtle: (props: import("..").Dict<any>) => {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    borderWidth: number;
+                    color: string;
+                };
+                button: {
+                    color: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    variant: string;
+                };
+                icon: {};
+                message: {};
+                text: {};
+                title: {};
+            };
+        };
+    };
     Avatar: {
         defaultProps: {
             colorScheme: string;
@@ -138,7 +180,6 @@ declare const _default: {
                     w: number;
                 };
                 label: {
-                    lineHeight: number;
                     size: string;
                 };
             };
@@ -356,18 +397,36 @@ declare const _default: {
         parts: string[];
         sizes: {
             sm: {
+                icon: {
+                    size: string;
+                };
                 item: {
                     fontSize: string;
                     h: number;
                 };
             };
             md: {
+                icon: {
+                    size: string;
+                };
                 item: {
                     fontSize: string;
                     h: number;
                 };
             };
             lg: {
+                icon: {
+                    size: string;
+                };
+                item: {
+                    fontSize: string;
+                    h: number;
+                };
+            };
+            xl: {
+                icon: {
+                    scale: number;
+                };
                 item: {
                     fontSize: string;
                     h: number;
@@ -376,16 +435,33 @@ declare const _default: {
         };
         variants: {
             default: (props: import("..").Dict<any>) => {
+                container: {};
+                icon: {};
                 item: import("..").Dict<any>;
             };
-            unstyled: {
+            ordered: {
+                container: {
+                    as: string;
+                    listStyleType: string;
+                    pl: number;
+                };
                 item: {
                     display: string;
                     h: undefined;
+                    lineHeight: number;
                 };
-                list: {
+            };
+            unordered: {
+                container: {
+                    as: string;
+                    listStyleType: string;
                     pl: number;
                 };
+                item: {
+                    display: string;
+                    h: undefined;
+                    lineHeight: number;
+                };
             };
         };
     };
@@ -440,7 +516,6 @@ declare const _default: {
                     w: number;
                 };
                 label: {
-                    lineHeight: number;
                     size: string;
                 };
             };
@@ -495,6 +570,71 @@ declare const _default: {
             };
         };
     };
+    Spinner: {
+        defaultProps: {
+            colorScheme: string;
+            size: string;
+            variant: string;
+        };
+        parts: string[];
+        sizes: {
+            xs: {
+                circle: {
+                    borderWidth: number;
+                    h: number;
+                    w: number;
+                };
+            };
+            sm: {
+                circle: {
+                    borderWidth: number;
+                    h: number;
+                    w: number;
+                };
+            };
+            md: {
+                circle: {
+                    borderWidth: number;
+                    h: number;
+                    w: number;
+                };
+            };
+            lg: {
+                circle: {
+                    borderWidth: number;
+                    h: number;
+                    w: number;
+                };
+            };
+            card: {
+                circle: {
+                    borderWidth: number;
+                    h: number;
+                    w: number;
+                };
+            };
+            page: {
+                circle: {
+                    borderWidth: number;
+                    h: number;
+                    w: number;
+                };
+            };
+        };
+        variants: {
+            default: (props: import("..").Dict<any>) => {
+                container: {
+                    color: string;
+                };
+                circle: {
+                    borderColor: string;
+                    borderTopColor: string;
+                    borderRightColor: string;
+                };
+                text: {};
+            };
+        };
+    };
     Switch: {
         defaultProps: {
             colorScheme: string;

package/theme/components.js

@@ -3,41 +3,45 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var theme_1 = __importDefault(require("../avatar/theme"));
-var theme_2 = __importDefault(require("../box/theme"));
-var theme_3 = __importDefault(require("../button/theme"));
-var theme_4 = __importDefault(require("../checkbox/theme"));
-var theme_5 = __importDefault(require("../divider/theme"));
-var theme_6 = __importDefault(require("../heading/theme"));
-var theme_7 = __importDefault(require("../icon/theme"));
-var theme_8 = __importDefault(require("../input/theme"));
-var theme_9 = __importDefault(require("../label/theme"));
-var theme_10 = __importDefault(require("../link/theme"));
-var theme_11 = __importDefault(require("../list/theme"));
-var theme_12 = __importDefault(require("../p/theme"));
-var theme_13 = __importDefault(require("../radio/theme"));
-var theme_14 = __importDefault(require("../skeleton/theme"));
-var theme_15 = __importDefault(require("../switch/theme"));
-var theme_16 = __importDefault(require("../t/theme"));
-var theme_17 = __importDefault(require("../textarea/theme"));
-var theme_18 = __importDefault(require("../tile/theme"));
+var theme_1 = __importDefault(require("../alert/theme"));
+var theme_2 = __importDefault(require("../avatar/theme"));
+var theme_3 = __importDefault(require("../box/theme"));
+var theme_4 = __importDefault(require("../button/theme"));
+var theme_5 = __importDefault(require("../checkbox/theme"));
+var theme_6 = __importDefault(require("../divider/theme"));
+var theme_7 = __importDefault(require("../heading/theme"));
+var theme_8 = __importDefault(require("../icon/theme"));
+var theme_9 = __importDefault(require("../input/theme"));
+var theme_10 = __importDefault(require("../label/theme"));
+var theme_11 = __importDefault(require("../link/theme"));
+var theme_12 = __importDefault(require("../list/theme"));
+var theme_13 = __importDefault(require("../p/theme"));
+var theme_14 = __importDefault(require("../radio/theme"));
+var theme_15 = __importDefault(require("../skeleton/theme"));
+var theme_16 = __importDefault(require("../spinner/theme"));
+var theme_17 = __importDefault(require("../switch/theme"));
+var theme_18 = __importDefault(require("../t/theme"));
+var theme_19 = __importDefault(require("../textarea/theme"));
+var theme_20 = __importDefault(require("../tile/theme"));
 exports.default = {
-    Avatar: theme_1.default,
-    Box: theme_2.default,
-    Button: theme_3.default,
-    Checkbox: theme_4.default,
-    Divider: theme_5.default,
-    Heading: theme_6.default,
-    Icon: theme_7.default,
-    Input: theme_8.default,
-    Label: theme_9.default,
-    Link: theme_10.default,
-    List: theme_11.default,
-    P: theme_12.default,
-    Radio: theme_13.default,
-    Skeleton: theme_14.default,
-    Switch: theme_15.default,
-    T: theme_16.default,
-    Textarea: theme_17.default,
-    Tile: theme_18.default
+    Alert: theme_1.default,
+    Avatar: theme_2.default,
+    Box: theme_3.default,
+    Button: theme_4.default,
+    Checkbox: theme_5.default,
+    Divider: theme_6.default,
+    Heading: theme_7.default,
+    Icon: theme_8.default,
+    Input: theme_9.default,
+    Label: theme_10.default,
+    Link: theme_11.default,
+    List: theme_12.default,
+    P: theme_13.default,
+    Radio: theme_14.default,
+    Skeleton: theme_15.default,
+    Spinner: theme_16.default,
+    Switch: theme_17.default,
+    T: theme_18.default,
+    Textarea: theme_19.default,
+    Tile: theme_20.default
 };