@veracity/vui 0.0.2 → 0.0.3

package/t/t.types.d.ts

@@ -1,12 +1,14 @@
 import { HTMLAttributes } from 'react';
-import { IsTruncatedProps, SizingProps, SpaceProps, TextAlignProps, TextDecorationProps, TextTransformProps, TransitionsProps, TypographyProps } from '../system';
+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'];
+    centerV?: boolean;
     decoration?: TextDecorationProps['textDecoration'];
+    isFlex?: boolean;
     weight?: FontWeight | AnyString | number;
 }
-export interface TStyleProps extends IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
+export interface TStyleProps extends IsTruncatedProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/textarea/textarea.d.ts

@@ -1,5 +1,5 @@
 import { TextareaProps, TextareaStyleProps } from './textarea.types';
-export declare const BaseTextarea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, {
+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>;

package/textarea/textarea.js

@@ -29,22 +29,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = exports.BaseTextarea = void 0;
+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"));
 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.BaseTextarea = styled_components_2.default.textarea.withConfig({
+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\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\tcursor: not-allowed;\n\t}\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), 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, disabled = _a.disabled, rest = __rest(_a, ["className", "disabled"]);
+    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
     var styles = core_1.useStyleConfig('Textarea', props);
-    var disabledTextColor = 'grey.50';
-    var placeholderColor = disabled ? disabledTextColor : 'grey.60';
-    return (react_1.default.createElement(exports.BaseTextarea, __assign({ borderRadius: "md", className: utils_1.cs('vui-textarea', className), disabled: disabled, disabledBg: "grey.20", disabledBorderColor: "transparent", disabledColor: disabledTextColor, p: 1, placeholderColor: placeholderColor, ref: ref, transitionDuration: "fast" }, styles, rest)));
+    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)));
 });
 exports.Textarea.displayName = 'Textarea';
 exports.default = exports.Textarea;

package/textarea/theme.js

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function variantDefault(props) {
     var c = props.colorScheme;
-    var colors = {
+    var styles = {
         borderColor: c + ".80",
         focusRing: 2,
         focusRingColor: c + ".80"
     };
     if (c === 'grey') {
-        colors.borderColor = c + ".60";
-        colors.focusRingColor = 'blue.70';
+        styles.borderColor = c + ".60";
+        styles.focusRingColor = 'blue.50';
     }
-    return colors;
+    return styles;
 }
 var defaultProps = {
     colorScheme: 'grey',

package/theme/components.d.ts

@@ -121,31 +121,46 @@ declare const _default: {
             size: string;
             variant: string;
         };
+        parts: string[];
         sizes: {
             sm: {
-                h: number;
+                control: {
+                    h: number;
+                    w: number;
+                };
+                label: {
+                    size: string;
+                };
             };
             md: {
-                h: number;
+                control: {
+                    h: number;
+                    w: number;
+                };
+                label: {
+                    lineHeight: number;
+                    size: string;
+                };
+            };
+            lg: {
+                control: {
+                    h: number;
+                    w: number;
+                };
+                label: {
+                    size: string;
+                };
             };
         };
         variants: {
             default: (props: import("..").Dict<any>) => {
-                color: string;
-                hoverColor: string;
+                control: {
+                    color: string;
+                    hoverColor: string;
+                };
             };
         };
     };
-    ControlLabel: {
-        defaultProps: {
-            size: string;
-        };
-        sizes: {
-            sm: {};
-            md: {};
-        };
-        variants: {};
-    };
     Divider: {
         defaultProps: {};
         sizes: {};
@@ -220,6 +235,11 @@ declare const _default: {
             variant: string;
         };
         sizes: {
+            xs: {
+                fontSize: string;
+                h: number;
+                iconSize: string;
+            };
             sm: {
                 fontSize: string;
                 h: number;
@@ -301,9 +321,31 @@ declare const _default: {
         };
     };
     Link: {
-        defaultProps: {};
-        sizes: {};
-        variants: {};
+        defaultProps: {
+            colorScheme: string;
+            size: string;
+            variant: string;
+        };
+        sizes: {
+            xs: {
+                fontSize: string;
+            };
+            sm: {
+                fontSize: string;
+            };
+            md: {
+                fontSize: string;
+            };
+            lg: {
+                fontSize: string;
+            };
+        };
+        variants: {
+            default: (props: import("..").Dict<any>) => {
+                color: string;
+                hoverColor: string;
+            };
+        };
     };
     List: {
         defaultProps: {
@@ -335,7 +377,6 @@ declare const _default: {
         variants: {
             default: (props: import("..").Dict<any>) => {
                 item: import("..").Dict<any>;
-                list: import("..").Dict<any>;
             };
             unstyled: {
                 item: {
@@ -376,6 +417,52 @@ declare const _default: {
         };
         variants: {};
     };
+    Radio: {
+        defaultProps: {
+            colorScheme: string;
+            size: string;
+            variant: string;
+        };
+        parts: string[];
+        sizes: {
+            sm: {
+                control: {
+                    h: number;
+                    w: number;
+                };
+                label: {
+                    size: string;
+                };
+            };
+            md: {
+                control: {
+                    h: number;
+                    w: number;
+                };
+                label: {
+                    lineHeight: number;
+                    size: string;
+                };
+            };
+            lg: {
+                control: {
+                    h: number;
+                    w: number;
+                };
+                label: {
+                    size: string;
+                };
+            };
+        };
+        variants: {
+            default: (props: import("..").Dict<any>) => {
+                control: {
+                    color: string;
+                    hoverColor: string;
+                };
+            };
+        };
+    };
     Skeleton: {
         defaultProps: {
             colorScheme: string;
@@ -408,6 +495,86 @@ declare const _default: {
             };
         };
     };
+    Switch: {
+        defaultProps: {
+            colorScheme: string;
+            size: string;
+            variant: string;
+        };
+        parts: string[];
+        sizes: {
+            sm: (props: import("..").Dict<any>) => {
+                button: {
+                    fontSize: string;
+                };
+                label: {
+                    size: string;
+                };
+                thumb: {
+                    h: number;
+                    w: number;
+                };
+                track: {
+                    h: number;
+                    minW: number;
+                };
+            };
+            md: (props: import("..").Dict<any>) => {
+                button: {
+                    fontSize: string;
+                };
+                label: {
+                    size: string;
+                };
+                thumb: {
+                    h: number;
+                    w: number;
+                };
+                track: {
+                    h: number;
+                    minW: number;
+                };
+            };
+            lg: (props: import("..").Dict<any>) => {
+                button: {
+                    fontSize: string;
+                };
+                label: {
+                    size: string;
+                };
+                thumb: {
+                    h: number;
+                    w: number;
+                };
+                track: {
+                    h: number;
+                    minW: number;
+                };
+            };
+        };
+        variants: {
+            contained: (props: import("..").Dict<any>) => {
+                thumb: {
+                    bg: string;
+                };
+                track: {
+                    bg: string;
+                    ring: number;
+                };
+            };
+            thin: (props: import("..").Dict<any>) => {
+                thumb: {
+                    bg: string;
+                    borderColor: string;
+                    borderWidth: number;
+                    ring: number;
+                };
+                track: {
+                    bg: string;
+                };
+            };
+        };
+    };
     T: {
         defaultProps: {
             size: string;

package/theme/components.js

@@ -7,35 +7,37 @@ 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("../controlLabel/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_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("../t/theme"));
-var theme_16 = __importDefault(require("../textarea/theme"));
-var theme_17 = __importDefault(require("../tile/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"));
 exports.default = {
     Avatar: theme_1.default,
     Box: theme_2.default,
     Button: theme_3.default,
     Checkbox: theme_4.default,
-    ControlLabel: 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,
+    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,
-    T: theme_15.default,
-    Textarea: theme_16.default,
-    Tile: theme_17.default
+    Switch: theme_15.default,
+    T: theme_16.default,
+    Textarea: theme_17.default,
+    Tile: theme_18.default
 };

package/theme/defaultTheme.d.ts

@@ -1,19 +1,4 @@
 declare const defaultTheme: {
-    fonts: {
-        avenir: string;
-    };
-    fontSizes: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-    };
-    fontWeights: {
-        regular: number;
-        medium: number;
-        demi: number;
-        bold: number;
-    };
     animations: {
         fadeDown: string;
         fadeIn: string;
@@ -110,10 +95,26 @@ declare const defaultTheme: {
         };
     };
     durations: {
+        instant: string;
         fast: string;
         normal: string;
         slow: string;
     };
+    fonts: {
+        avenir: string;
+    };
+    fontSizes: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        demi: string;
+        bold: string;
+    };
     radii: {
         none: number;
         sm: number;
@@ -261,31 +262,46 @@ declare const defaultTheme: {
                 size: string;
                 variant: string;
             };
+            parts: string[];
             sizes: {
                 sm: {
-                    h: number;
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        size: string;
+                    };
                 };
                 md: {
-                    h: number;
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        lineHeight: number;
+                        size: string;
+                    };
+                };
+                lg: {
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        size: string;
+                    };
                 };
             };
             variants: {
                 default: (props: import("..").Dict<any>) => {
-                    color: string;
-                    hoverColor: string;
+                    control: {
+                        color: string;
+                        hoverColor: string;
+                    };
                 };
             };
         };
-        ControlLabel: {
-            defaultProps: {
-                size: string;
-            };
-            sizes: {
-                sm: {};
-                md: {};
-            };
-            variants: {};
-        };
         Divider: {
             defaultProps: {};
             sizes: {};
@@ -360,6 +376,11 @@ declare const defaultTheme: {
                 variant: string;
             };
             sizes: {
+                xs: {
+                    fontSize: string;
+                    h: number;
+                    iconSize: string;
+                };
                 sm: {
                     fontSize: string;
                     h: number;
@@ -441,9 +462,31 @@ declare const defaultTheme: {
             };
         };
         Link: {
-            defaultProps: {};
-            sizes: {};
-            variants: {};
+            defaultProps: {
+                colorScheme: string;
+                size: string;
+                variant: string;
+            };
+            sizes: {
+                xs: {
+                    fontSize: string;
+                };
+                sm: {
+                    fontSize: string;
+                };
+                md: {
+                    fontSize: string;
+                };
+                lg: {
+                    fontSize: string;
+                };
+            };
+            variants: {
+                default: (props: import("..").Dict<any>) => {
+                    color: string;
+                    hoverColor: string;
+                };
+            };
         };
         List: {
             defaultProps: {
@@ -475,7 +518,6 @@ declare const defaultTheme: {
             variants: {
                 default: (props: import("..").Dict<any>) => {
                     item: import("..").Dict<any>;
-                    list: import("..").Dict<any>;
                 };
                 unstyled: {
                     item: {
@@ -516,6 +558,52 @@ declare const defaultTheme: {
             };
             variants: {};
         };
+        Radio: {
+            defaultProps: {
+                colorScheme: string;
+                size: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {
+                sm: {
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        size: string;
+                    };
+                };
+                md: {
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        lineHeight: number;
+                        size: string;
+                    };
+                };
+                lg: {
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        size: string;
+                    };
+                };
+            };
+            variants: {
+                default: (props: import("..").Dict<any>) => {
+                    control: {
+                        color: string;
+                        hoverColor: string;
+                    };
+                };
+            };
+        };
         Skeleton: {
             defaultProps: {
                 colorScheme: string;
@@ -548,6 +636,86 @@ declare const defaultTheme: {
                 };
             };
         };
+        Switch: {
+            defaultProps: {
+                colorScheme: string;
+                size: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {
+                sm: (props: import("..").Dict<any>) => {
+                    button: {
+                        fontSize: string;
+                    };
+                    label: {
+                        size: string;
+                    };
+                    thumb: {
+                        h: number;
+                        w: number;
+                    };
+                    track: {
+                        h: number;
+                        minW: number;
+                    };
+                };
+                md: (props: import("..").Dict<any>) => {
+                    button: {
+                        fontSize: string;
+                    };
+                    label: {
+                        size: string;
+                    };
+                    thumb: {
+                        h: number;
+                        w: number;
+                    };
+                    track: {
+                        h: number;
+                        minW: number;
+                    };
+                };
+                lg: (props: import("..").Dict<any>) => {
+                    button: {
+                        fontSize: string;
+                    };
+                    label: {
+                        size: string;
+                    };
+                    thumb: {
+                        h: number;
+                        w: number;
+                    };
+                    track: {
+                        h: number;
+                        minW: number;
+                    };
+                };
+            };
+            variants: {
+                contained: (props: import("..").Dict<any>) => {
+                    thumb: {
+                        bg: string;
+                    };
+                    track: {
+                        bg: string;
+                        ring: number;
+                    };
+                };
+                thin: (props: import("..").Dict<any>) => {
+                    thumb: {
+                        bg: string;
+                        borderColor: string;
+                        borderWidth: number;
+                        ring: number;
+                    };
+                    track: {
+                        bg: string;
+                    };
+                };
+            };
+        };
         T: {
             defaultProps: {
                 size: string;