@veracity/vui 0.0.2 → 0.0.4

package/switch/switchButton.types.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { BackgroundColorProps, BordersProps, ColorProps, FontSizeProps, SizingProps, SpaceProps, TransformsProps, TransitionsProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface SwitchButtonProps extends SwitchThumbStyleProps, ThemingProps<'Switch'> {
+    checked?: boolean;
+    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
+    disabled?: boolean;
+    innerLabelOff?: React.ReactElement | string;
+    innerLabelOn?: React.ReactElement | string;
+    inputProps?: HTMLAttributes<HTMLInputElement>;
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    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;
+}
+export interface SwitchButtonStyleProps extends ColorProps, FontSizeProps, SizingProps, SpaceProps {
+}
+export interface SwitchThumbStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransformsProps, TransitionsProps {
+}
+export interface SwitchTrackStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps {
+}

package/switch/switchButton.types.js

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

package/switch/switchLabel.d.ts

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

package/switch/switchLabel.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.SwitchLabel = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+exports.SwitchLabel = core_1.forwardRef(function (props, ref) {
+    var _a;
+    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({ className: "vui-switchLabel", ref: ref }, styles.label, props));
+});
+exports.SwitchLabel.displayName = 'SwitchLabel';
+exports.default = exports.SwitchLabel;

package/switch/theme.d.ts

@@ -0,0 +1,87 @@
+import { Dict } from '../utils';
+declare function sizeLg(props: Dict): {
+    button: {
+        fontSize: string;
+    };
+    label: {
+        size: string;
+    };
+    thumb: {
+        h: number;
+        w: number;
+    };
+    track: {
+        h: number;
+        minW: number;
+    };
+};
+declare function sizeMd(props: Dict): {
+    button: {
+        fontSize: string;
+    };
+    label: {
+        size: string;
+    };
+    thumb: {
+        h: number;
+        w: number;
+    };
+    track: {
+        h: number;
+        minW: number;
+    };
+};
+declare function sizeSm(props: Dict): {
+    button: {
+        fontSize: string;
+    };
+    label: {
+        size: string;
+    };
+    thumb: {
+        h: number;
+        w: number;
+    };
+    track: {
+        h: number;
+        minW: number;
+    };
+};
+declare function variantContained(props: Dict): {
+    thumb: {
+        bg: string;
+    };
+    track: {
+        bg: string;
+        ring: number;
+    };
+};
+declare function variantThin(props: Dict): {
+    thumb: {
+        bg: string;
+        borderColor: string;
+        borderWidth: number;
+        ring: number;
+    };
+    track: {
+        bg: string;
+    };
+};
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {
+        sm: typeof sizeSm;
+        md: typeof sizeMd;
+        lg: typeof sizeLg;
+    };
+    variants: {
+        contained: typeof variantContained;
+        thin: typeof variantThin;
+    };
+};
+export default _default;

package/switch/theme.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function sizeLg(props) {
+    var variant = props.variant;
+    var button = {
+        fontSize: 'md'
+    };
+    var label = {
+        size: 'lg'
+    };
+    var thumb = {
+        h: 24,
+        w: 24
+    };
+    var track = {
+        h: 28,
+        minW: 50
+    };
+    if (variant === 'thin') {
+        track.h = 18;
+        track.minW = 40;
+    }
+    return { button: button, label: label, thumb: thumb, track: track };
+}
+function sizeMd(props) {
+    var variant = props.variant;
+    var button = {
+        fontSize: 'sm'
+    };
+    var label = {
+        size: 'md'
+    };
+    var thumb = {
+        h: 20,
+        w: 20
+    };
+    var track = {
+        h: 24,
+        minW: 42
+    };
+    if (variant === 'thin') {
+        track.h = 14;
+        track.minW = 32;
+    }
+    return { button: button, label: label, thumb: thumb, track: track };
+}
+function sizeSm(props) {
+    var variant = props.variant;
+    var button = {
+        fontSize: 'xs'
+    };
+    var label = {
+        size: 'sm'
+    };
+    var thumb = {
+        h: 16,
+        w: 16
+    };
+    var track = {
+        h: 20,
+        minW: 34
+    };
+    if (variant === 'thin') {
+        track.h = 10;
+        track.minW = 24;
+    }
+    return { button: button, label: label, thumb: thumb, track: track };
+}
+function variantContained(props) {
+    var c = props.colorScheme;
+    var thumb = {
+        bg: 'white'
+    };
+    var track = {
+        bg: c + ".80",
+        ring: 3
+    };
+    return { thumb: thumb, track: track };
+}
+function variantThin(props) {
+    var c = props.colorScheme;
+    var thumb = {
+        bg: 'white',
+        borderColor: c + ".80",
+        borderWidth: 1,
+        ring: 3
+    };
+    var track = {
+        bg: c + ".80"
+    };
+    return { thumb: thumb, track: track };
+}
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'contained'
+};
+var parts = ['container', 'button', 'label', 'track', 'thumb'];
+var sizes = {
+    sm: sizeSm,
+    md: sizeMd,
+    lg: sizeLg
+};
+var variants = {
+    contained: variantContained,
+    thin: variantThin
+};
+exports.default = {
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

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/system/typography.d.ts

@@ -16,20 +16,20 @@ export interface FontSizeProps<T extends ITheme = VuiTheme> {
     fontSize?: FontSizeProp<T>;
     hoverFontSize?: FontSizeProp<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 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 FontStyleProp<T extends ITheme> = SystemProp<Property.FontStyle, T>;
-export interface FontStyleProps<T extends ITheme = VuiTheme> {
-    fontStyle?: FontStyleProp<T>;
-    hoverFontStyle?: FontStyleProp<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> {
@@ -54,10 +54,15 @@ 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>, LineHeightProps<T>, FontWeightProps<T>, TextAlignProps<T>, ColorProps<T>, TextTransformProps<T>, TextDecorationProps<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> {
 }
 export {};

package/t/t.d.ts

@@ -1,6 +1,6 @@
 import { TProps, TStyleProps } from './t.types';
-export declare const BaseT: 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

@@ -29,27 +29,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.T = exports.BaseT = void 0;
+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 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.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.BaseT = 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);
+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(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, className = _a.className, decoration = _a.decoration, weight = _a.weight, rest = __rest(_a, ["align", "casing", "className", "decoration", "weight"]);
+    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);
     var aliasedProps = utils_1.filterUndefined({
+        alignItems: centerV ? 'center' : undefined,
+        display: isFlex ? 'inline-flex' : undefined,
         fontWeight: weight,
         textAlign: align,
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.BaseT, __assign({ className: utils_1.cs('vui-t', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.TBase, __assign({ className: utils_1.cs('vui-t', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
 });
 exports.T.displayName = 'T';
 exports.default = exports.T;

package/t/t.types.d.ts

@@ -1,12 +1,12 @@
-import { HTMLAttributes } from 'react';
-import { IsTruncatedProps, 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'];
-    decoration?: TextDecorationProps['textDecoration'];
-    weight?: FontWeight | AnyString | number;
+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?: TypographyProps['textDecoration'];
+    isFlex?: boolean;
+    weight?: TypographyProps['fontWeight'];
 }
-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,6 +1,6 @@
 import { TextareaProps, TextareaStyleProps } from './textarea.types';
-export declare const BaseTextarea: 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

@@ -29,22 +29,18 @@ 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({
-    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);
+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, 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/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/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',