@veracity/vui 0.0.15 → 0.2.0

package/{alert → notification}/theme.d.ts

@@ -1,18 +1,4 @@
 import { Dict } from '../utils';
-declare function variantSolid(props: Dict): {
-    container: {
-        bg: string;
-        color: string;
-    };
-    button: {
-        bg: string;
-        hoverBg: string;
-    };
-    icon: {};
-    message: {};
-    text: {};
-    title: {};
-};
 declare function variantSubtle(props: Dict): {
     container: {
         bg: string;
@@ -39,7 +25,6 @@ declare const _default: {
     parts: string[];
     sizes: {};
     variants: {
-        solid: typeof variantSolid;
         subtle: typeof variantSubtle;
     };
 };

package/{alert → notification}/theme.js

@@ -1,21 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantSolid(props) {
-    var c = props.colorScheme;
-    var container = {
-        bg: c + ".70",
-        color: 'white'
-    };
-    var button = {
-        bg: c + ".70",
-        hoverBg: c + ".80"
-    };
-    var icon = {};
-    var message = {};
-    var text = {};
-    var title = {};
-    return { container: container, button: button, icon: icon, message: message, text: text, title: title };
-}
 function variantSubtle(props) {
     var c = props.colorScheme;
     var container = {
@@ -34,13 +18,9 @@ function variantSubtle(props) {
     var message = {};
     var text = {};
     var title = {};
-    if (c === 'grey') {
-        button.color = 'prussian.80';
-        container.color = 'prussian.80';
-    }
     if (c === 'yellow') {
-        button.color = 'yellow.100';
         container.color = 'yellow.100';
+        button.color = 'yellow.100';
     }
     return { container: container, button: button, icon: icon, message: message, text: text, title: title };
 }
@@ -51,7 +31,6 @@ var defaultProps = {
 var parts = ['container', 'button', 'icon', 'message', 'text', 'title'];
 var sizes = {};
 var variants = {
-    solid: variantSolid,
     subtle: variantSubtle
 };
 exports.default = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.0.15",
+  "version": "0.2.0",
   "description": "Veracity UI React components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",
@@ -17,8 +17,7 @@
   },
   "dependencies": {
     "@xstyled/styled-components": "^2.4.1",
-    "axios": "^0.21.1",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.3.1"
   },
   "peerDependencies": {
     "react": "^17.0.1",

package/panel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './panel';
+export * from './panel.types';
+export { default } from './panel';

package/panel/index.js

@@ -0,0 +1,20 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./panel"), exports);
+__exportStar(require("./panel.types"), exports);
+var panel_1 = require("./panel");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(panel_1).default; } });

package/panel/panel.d.ts

@@ -0,0 +1,3 @@
+import { PanelProps } from './panel.types';
+export declare const Panel: import("../core").VuiComponent<"div", PanelProps>;
+export default Panel;

package/panel/panel.js

@@ -0,0 +1,39 @@
+"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 __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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+exports.Panel = core_1.vui(function (props, ref) {
+    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
+    var styles = core_1.useStyleConfig('Panel', props);
+    return (react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", className: utils_1.cs('vui-panel', className), p: 2, ref: ref }, styles, rest)));
+});
+exports.Panel.displayName = 'Panel';
+exports.default = exports.Panel;

package/panel/panel.types.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+import { ThemingProps } from '../theme';
+export interface PanelProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Panel'> {
+}

package/{tile → panel}/theme.d.ts

@@ -4,19 +4,12 @@ declare const _default: {
     };
     sizes: {};
     variants: {
-        default: {
-            bg: string;
-            borderRadius: string;
+        elevated: {
             shadow: string;
-            hoverShadow: string;
-            p: number;
         };
         outlined: {
-            bg: string;
             border: number;
             borderColor: string;
-            borderRadius: string;
-            p: number;
         };
     };
 };

package/{tile → panel}/theme.js

@@ -1,23 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var defaultProps = {
-    variant: 'default'
+    variant: 'elevated'
 };
 var sizes = {};
 var variants = {
-    default: {
-        bg: 'white',
-        borderRadius: 'md',
-        shadow: '1',
-        hoverShadow: '3',
-        p: 2
+    elevated: {
+        shadow: '1'
     },
     outlined: {
-        bg: 'white',
         border: 1,
-        borderColor: 'grey.40',
-        borderRadius: 'md',
-        p: 2
+        borderColor: 'grey.40'
     }
 };
 exports.default = {

package/radio/radio.js

@@ -45,12 +45,12 @@ exports.Radio = core_1.vui(function (props, ref) {
     var _a;
     var _b = (_a = context_1.useRadioGroup()) !== null && _a !== void 0 ? _a : {}, groupOnChange = _b.onChange, groupValue = _b.value, radioGroupProps = __rest(_b, ["onChange", "value"]);
     var mergedProps = __assign(__assign({}, radioGroupProps), props);
-    var _c = core_1.omitThemingProps(mergedProps), _d = _c.checked, checked = _d === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _d, children = _c.children, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, _e = _c.icon, iconProp = _e === void 0 ? 'cuiRadioUnselected' : _e, _f = _c.iconChecked, iconChecked = _f === void 0 ? 'cuiRadioSelected' : _f, inputProps = _c.inputProps, inputRef = _c.inputRef, label = _c.label, name = _c.name, onChange = _c.onChange, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
+    var _c = core_1.omitThemingProps(mergedProps), _d = _c.checked, checked = _d === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _d, children = _c.children, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, _e = _c.icon, iconProp = _e === void 0 ? 'cuiRadioUnselected' : _e, _f = _c.iconChecked, iconChecked = _f === void 0 ? 'cuiRadioSelected' : _f, id = _c.id, inputProps = _c.inputProps, inputRef = _c.inputRef, label = _c.label, name = _c.name, onChange = _c.onChange, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "id", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
     var styles = core_1.useStyleConfig('Radio', mergedProps);
     var _g = styles.control, controlColor = _g.color, hoverColor = _g.hoverColor, controlStyles = __rest(_g, ["color", "hoverColor"]);
     var icon = checked ? iconChecked : iconProp;
     var controlMr = children || label ? 1 : 0;
-    var color = checked ? controlColor : 'grey.50';
+    var color = checked ? controlColor : 'grey.60';
     var controlHoverColor = checked ? hoverColor : 'grey.90';
     function handleOnChange(e) {
         groupOnChange === null || groupOnChange === void 0 ? void 0 : groupOnChange(e);
@@ -58,8 +58,8 @@ exports.Radio = core_1.vui(function (props, ref) {
     }
     return (react_1.default.createElement(exports.RadioBase, __assign({ className: utils_1.cs('vui-radio', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
         react_1.default.createElement(exports.RadioControl, __assign({ borderRadius: "50%", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, transitionDuration: "fast" }, controlStyles),
-            react_1.default.createElement(exports.RadioInput, __assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, required: required, value: value }, inputProps)),
-            react_1.default.createElement(icon_1.default, { className: "vui-radioIcon", h: "100%", icon: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label), label)))));
+            react_1.default.createElement(exports.RadioInput, __assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
+            react_1.default.createElement(icon_1.default, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label), label)))));
 });
 exports.Radio.displayName = 'Radio';
 exports.default = exports.Radio;

package/radio/radio.types.d.ts

@@ -5,7 +5,7 @@ import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface RadioProps extends SystemProps, ThemingProps<'Radio'> {
     checked?: boolean;
-    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
+    colorScheme?: 'blue' | 'prussian';
     disabled?: boolean;
     icon?: IconProp;
     iconChecked?: IconProp;

package/radio/radioGroup.types.d.ts

@@ -2,7 +2,7 @@ import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface RadioGroupProps extends SystemProps, ThemingProps<'Radio'> {
-    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
+    colorScheme?: 'blue' | 'prussian';
     disabled?: boolean;
     name?: string;
     onBlur?: FocusEventHandler;

package/skeleton/skeleton.types.d.ts

@@ -1,6 +1,7 @@
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface SkeletonProps extends SystemProps, ThemingProps<'Skeleton'> {
+    children?: never;
     colorScheme?: 'blue' | 'grey';
     repeat?: number;
 }

package/spinner/spinner.types.d.ts

@@ -5,6 +5,7 @@ export interface SpinnerCircleStyleProps extends SystemProps {
     speed?: string;
 }
 export interface SpinnerProps extends Omit<BoxProps, 'size' | 'variant'>, Omit<ThemingProps<'Spinner'>, 'size'> {
+    children?: never;
     colorScheme?: 'blue' | 'grey' | 'prussian';
     emptyColor?: string;
     speed?: string;

package/svg/cache.js

@@ -1,9 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var axios_1 = __importDefault(require("axios"));
 /**
  * Provides svg caching functionality to avoid redundant XHR requests.
  * When the retrieved item doesn't exist in cache yet, a request is sent
@@ -20,7 +16,7 @@ var Cache = /** @class */ (function () {
         this.get = function (src) {
             var item = _this.cache.get(src);
             if (!item) {
-                var promise = axios_1.default.get(src).then(function (res) { return res.data; });
+                var promise = fetch(src).then(function (res) { return res.text(); });
                 _this.add(src, promise);
                 return promise;
             }

package/svg/svg.js

@@ -114,6 +114,8 @@ exports.Svg = core_1.vui(function (props, ref) {
     var _a = __read(react_1.useState(helpers_1.initState()), 2), state = _a[0], setState = _a[1];
     var isMountedRef = react_1.useRef(false);
     var srcRef = react_1.useRef(src);
+    var _b = state.content, content = _b === void 0 ? '' : _b, _c = state.svgAttributes, svgAttributes = _c === void 0 ? {} : _c;
+    var innerHTML = !children ? { __html: content } : undefined;
     react_1.useEffect(function () {
         isMountedRef.current = true;
         return function () {
@@ -155,9 +157,6 @@ exports.Svg = core_1.vui(function (props, ref) {
         }
         src && loadSvg(src);
     }, [src]);
-    var _b = state.content, content = _b === void 0 ? '' : _b, _c = state.svgAttributes, svgAttributes = _c === void 0 ? {} : _c;
-    var innerHTML = !children ? { __html: content } : undefined;
-    // const pathFill = Array.isArray(fill) ? fill : [fill]
     return (react_1.default.createElement(exports.SvgBase, __assign({ className: utils_1.cs('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest), children));
 });
 exports.Svg.displayName = 'Svg';

package/switch/index.d.ts

@@ -2,6 +2,5 @@ export * from './context';
 export * from './switch';
 export * from './switch.types';
 export * from './switchButton';
-export * from './switchButton.types';
 export * from './switchLabel';
 export { default } from './switch';

package/switch/index.js

@@ -18,7 +18,6 @@ __exportStar(require("./context"), exports);
 __exportStar(require("./switch"), exports);
 __exportStar(require("./switch.types"), exports);
 __exportStar(require("./switchButton"), exports);
-__exportStar(require("./switchButton.types"), exports);
 __exportStar(require("./switchLabel"), exports);
 var switch_1 = require("./switch");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(switch_1).default; } });

package/switch/switch.js

@@ -76,8 +76,9 @@ var t_1 = require("../t");
 var utils_1 = require("../utils");
 exports.SwitchBase = styled_components_1.default.label.withConfig(core_1.forwardPropConfig(system_1.system))(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, system_1.system);
 exports.Switch = core_1.vui(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, 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 _a;
+    var button = props.button, checked = props.checked, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultChecked = props.defaultChecked, disabled = props.disabled, id = props.id, innerLabelOff = props.innerLabelOff, innerLabelOn = props.innerLabelOn, 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, ["button", "checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
+    var _b = __read(react_1.useState(defaultChecked), 2), isChecked = _b[0], setIsChecked = _b[1];
     var styles = core_1.useStyleConfig('Switch', props);
     react_1.useEffect(function () {
         checked !== undefined && setIsChecked(checked);
@@ -120,10 +121,9 @@ exports.Switch = core_1.vui(function (props, ref) {
         'data-disabled': disabled ? true : false
     });
     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, { mr: 1 }, labelLeft),
-            react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputProps: inputProps, inputRef: inputRef })),
-            labelRight && react_1.default.createElement(switchLabel_1.SwitchLabel, { ml: 1 }, labelRight))))));
+        react_1.default.createElement(exports.SwitchBase, __assign({ className: utils_1.cs('vui-switch', className), ref: ref }, styles.container, aliasedProps, rest),
+            utils_1.isReactText(labelLeft) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { mr: 1, text: labelLeft }) : labelLeft, (_a = children !== null && children !== void 0 ? children : button) !== null && _a !== void 0 ? _a : react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { id: id, innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputRef: inputRef })),
+            utils_1.isReactText(labelRight) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { ml: 1, text: labelRight }) : labelRight)));
 });
 exports.Switch.displayName = 'Switch';
 exports.Switch.Button = switchButton_1.SwitchButton;

package/switch/switch.types.d.ts

@@ -1,14 +1,29 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { ChangeEventHandler, FocusEventHandler } from '../core';
+import { ReactNode, ReactText } from 'react';
+import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../core';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
+export interface SwitchButtonProps extends SystemProps, ThemingProps<'Switch'> {
+    checked?: boolean;
+    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
+    disabled?: boolean;
+    innerLabelOff?: ReactNode;
+    innerLabelOn?: ReactNode;
+    inputProps?: PropsOf<'input', SystemProps>;
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    name?: string;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
+    required?: boolean;
+    value?: number | string;
+}
 export interface SwitchProps extends SystemProps, ThemingProps<'Switch'> {
+    button?: ReactNode;
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     innerLabelOff?: ReactNode;
     innerLabelOn?: ReactNode;
-    inputProps?: HTMLAttributes<HTMLInputElement>;
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     labelLeft?: ReactNode;
     labelRight?: ReactNode;
@@ -17,5 +32,5 @@ export interface SwitchProps extends SystemProps, ThemingProps<'Switch'> {
     onChange?: ChangeEventHandler;
     onFocus?: FocusEventHandler;
     required?: boolean;
-    value?: number | string;
+    value?: ReactText;
 }

package/switch/switchButton.d.ts

@@ -1,6 +1,6 @@
-import { SwitchButtonProps } from './switchButton.types';
+import { SwitchButtonProps } from './switch.types';
 import { SystemProps } from '../system';
-export declare const SwitchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const SwitchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const SwitchThumb: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const SwitchTrack: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const SwitchButtonBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;

package/switch/switchButton.js

@@ -71,18 +71,19 @@ var context_1 = require("./context");
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.SwitchInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n"])));
+exports.SwitchInput = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n\n\t", "\n"], ["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n\n\t", "\n"])), system_1.system);
 exports.SwitchThumb = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(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"])), system_1.system);
-exports.SwitchTrack = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(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"])), system_1.system);
-exports.SwitchButtonBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(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, system_1.system);
+exports.SwitchTrack = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex: 1;\n\tposition: relative;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex: 1;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
+exports.SwitchButtonBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(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\t--x-ring-color: var(--vui-colors-disabled-border);\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\t--x-ring-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"])), exports.SwitchThumb, exports.SwitchTrack, system_1.system);
 exports.SwitchButton = core_1.vui(function (props, ref) {
     var _a;
     var _b = (_a = context_1.useSwitch()) !== null && _a !== void 0 ? _a : {}, switchIsChecked = _b.isChecked, switchProps = __rest(_b, ["isChecked"]);
     var mergedProps = __assign(__assign({}, switchProps), props);
-    var _c = core_1.omitThemingProps(mergedProps), checked = _c.checked, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, innerLabelOff = _c.innerLabelOff, innerLabelOn = _c.innerLabelOn, inputProps = _c.inputProps, inputRef = _c.inputRef, name = _c.name, onBlur = _c.onBlur, onChange = _c.onChange, onFocus = _c.onFocus, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "className", "defaultChecked", "disabled", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
+    var _c = core_1.omitThemingProps(mergedProps), checked = _c.checked, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, id = _c.id, innerLabelOff = _c.innerLabelOff, innerLabelOn = _c.innerLabelOn, inputProps = _c.inputProps, inputRef = _c.inputRef, name = _c.name, onBlur = _c.onBlur, onChange = _c.onChange, onFocus = _c.onFocus, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
     var _d = __read(react_1.useState(defaultChecked), 2), isChecked = _d[0], setIsChecked = _d[1];
     var _e = __read(react_1.useState(false), 2), isFocused = _e[0], setIsFocused = _e[1];
     var styles = core_1.useStyleConfig('Switch', mergedProps);
+    var _f = styles.button, thumbStyles = _f.thumb, trackStyles = _f.track, buttonStyles = __rest(_f, ["thumb", "track"]);
     var isControlled = checked !== undefined || switchIsChecked !== undefined;
     react_1.useEffect(function () {
         if (isControlled) {
@@ -101,31 +102,29 @@ exports.SwitchButton = core_1.vui(function (props, ref) {
         setIsFocused(true);
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
     }
-    var hDiff = (styles.thumb.h - styles.track.h) / 2;
-    var thumbOffset = "calc(100% - " + Math.abs(hDiff - styles.thumb.h) + "px)";
-    var labelOffset = styles.thumb.h - hDiff + 4 + "px";
-    var buttonProps = utils_1.filterUndefined({
+    var hDiff = (thumbStyles.h - trackStyles.h) / 2;
+    var thumbOffset = "calc(100% - " + Math.abs(hDiff - thumbStyles.h) + "px)";
+    var labelOffset = thumbStyles.h - hDiff + 4 + "px";
+    var buttonAliasedProps = utils_1.filterUndefined({
         'data-checked': isChecked ? true : false,
         'data-disabled': disabled ? true : false,
         'data-focused': isFocused ? true : false
     });
-    var thumbProps = utils_1.filterUndefined({
+    var thumbAliasedProps = utils_1.filterUndefined({
         left: isChecked ? thumbOffset : -hDiff,
-        ring: isFocused ? styles.thumb.ring : 0
+        ring: isFocused ? thumbStyles.ring : 0
     });
-    var trackProps = utils_1.filterUndefined({
-        bg: isChecked ? styles.track.bg : 'grey.50',
+    var trackAliasedProps = utils_1.filterUndefined({
+        bg: isChecked ? trackStyles.bg : 'grey.50',
         pl: isChecked ? 1 : labelOffset,
         pr: isChecked ? labelOffset : 1,
-        ring: isFocused ? styles.track.ring : 0
+        ring: isFocused ? trackStyles.ring : disabled ? 1 : 0
     });
-    return (react_1.default.createElement(exports.SwitchButtonBase, __assign({ className: utils_1.cs('vui-switchButton', className), 
-        // p={1}
-        ref: ref }, styles.button, buttonProps, rest),
-        react_1.default.createElement(exports.SwitchInput, __assign({ className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, required: required, value: value }, inputProps)),
-        react_1.default.createElement(exports.SwitchTrack, __assign({ borderRadius: 100, className: "vui-switchTrack", transitionDuration: "fast" }, styles.track, trackProps),
+    return (react_1.default.createElement(exports.SwitchButtonBase, __assign({ className: utils_1.cs('vui-switchButton', className), ref: ref }, buttonStyles, buttonAliasedProps, rest),
+        react_1.default.createElement(exports.SwitchInput, __assign({ className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
+        react_1.default.createElement(exports.SwitchTrack, __assign({ borderRadius: "round", className: "vui-switchTrack", transitionDuration: "fast" }, trackStyles, trackAliasedProps),
             !isChecked && innerLabelOff,
-            react_1.default.createElement(exports.SwitchThumb, __assign({ borderRadius: "50%", className: "vui-switchThumb", transitionDuration: "fast" }, styles.thumb, thumbProps)),
+            react_1.default.createElement(exports.SwitchThumb, __assign({ borderRadius: "round", className: "vui-switchThumb", transitionDuration: "fast" }, thumbStyles, thumbAliasedProps)),
             isChecked && innerLabelOn)));
 });
 exports.SwitchButton.displayName = 'SwitchButton';

package/switch/theme.d.ts

@@ -1,71 +1,67 @@
 import { Dict } from '../utils';
-declare function sizeLg(props: Dict): {
+declare function sizeLg(): {
+    container: {};
     button: {
         fontSize: string;
+        minW: number;
+        thumb: {
+            h: number;
+            w: number;
+        };
+        track: {
+            h: number;
+        };
     };
     label: {
         size: string;
     };
-    thumb: {
-        h: number;
-        w: number;
-    };
-    track: {
-        h: number;
-        minW: number;
-    };
 };
-declare function sizeMd(props: Dict): {
+declare function sizeMd(): {
+    container: {};
     button: {
         fontSize: string;
+        minW: number;
+        thumb: {
+            h: number;
+            w: number;
+        };
+        track: {
+            h: number;
+        };
     };
     label: {
         size: string;
     };
-    thumb: {
-        h: number;
-        w: number;
-    };
-    track: {
-        h: number;
-        minW: number;
-    };
 };
-declare function sizeSm(props: Dict): {
+declare function sizeSm(): {
+    container: {};
     button: {
         fontSize: string;
+        minW: number;
+        thumb: {
+            h: number;
+            w: number;
+        };
+        track: {
+            h: number;
+        };
     };
     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;
-    };
+    container: {};
+    button: {
+        thumb: {
+            bg: string;
+        };
+        track: {
+            bg: string;
+            ring: number;
+        };
+    };
+    label: {};
 };
 declare const _default: {
     defaultProps: {
@@ -81,7 +77,6 @@ declare const _default: {
     };
     variants: {
         contained: typeof variantContained;
-        thin: typeof variantThin;
     };
 };
 export default _default;