@veracity/vui 0.0.1 → 0.0.3

package/styles/index.js

@@ -13,8 +13,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fonts = void 0;
+exports.shadows = exports.screens = exports.radii = exports.fontWeights = exports.fontSizes = exports.fonts = exports.fontFaces = exports.durations = exports.colors = exports.animations = void 0;
 __exportStar(require("./animations"), exports);
+__exportStar(require("./colors"), exports);
 __exportStar(require("./helpers"), exports);
+var animations_1 = require("./animations");
+Object.defineProperty(exports, "animations", { enumerable: true, get: function () { return __importDefault(animations_1).default; } });
+var colors_1 = require("./colors");
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return __importDefault(colors_1).default; } });
+var durations_1 = require("./durations");
+Object.defineProperty(exports, "durations", { enumerable: true, get: function () { return __importDefault(durations_1).default; } });
+var fontFaces_1 = require("./fontFaces");
+Object.defineProperty(exports, "fontFaces", { enumerable: true, get: function () { return __importDefault(fontFaces_1).default; } });
 var fonts_1 = require("./fonts");
 Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return __importDefault(fonts_1).default; } });
+var fontSizes_1 = require("./fontSizes");
+Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return __importDefault(fontSizes_1).default; } });
+var fontWeights_1 = require("./fontWeights");
+Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return __importDefault(fontWeights_1).default; } });
+var radii_1 = require("./radii");
+Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return __importDefault(radii_1).default; } });
+var screens_1 = require("./screens");
+Object.defineProperty(exports, "screens", { enumerable: true, get: function () { return __importDefault(screens_1).default; } });
+var shadows_1 = require("./shadows");
+Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return __importDefault(shadows_1).default; } });

package/styles/radii.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export default _default;

package/styles/radii.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    none: 0,
+    sm: 4,
+    md: 6,
+    lg: 10
+};

package/styles/screens.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export default _default;

package/styles/screens.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1280,
+    xl: 1920
+};

package/styles/shadows.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+};
+export default _default;

package/styles/shadows.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var colors_1 = require("./colors");
+exports.default = {
+    0: "0px 0px 0px 0px " + colors_1.grey[80],
+    1: "0px 2px 7px -3px " + colors_1.grey[80],
+    2: "0px 6px 23px -8px " + colors_1.grey[80],
+    3: "0px 16px 42px -15px " + colors_1.grey[80],
+    4: "0px 18px 54px -8px " + colors_1.grey[80],
+    5: "0px 28px 77px -5px " + colors_1.grey[80]
+};

package/svg/svg.d.ts

@@ -1,5 +1,5 @@
 import { SvgProps, SvgStyleProps } from './svg.types';
-export declare const BaseSvg: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
+export declare const SvgBase: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & SvgStyleProps, never>;
 export declare const Svg: import("styled-components").StyledComponent<"svg", never, SvgProps, never>;

package/svg/svg.js

@@ -100,7 +100,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Svg = exports.BaseSvg = void 0;
+exports.Svg = exports.SvgBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
@@ -108,10 +108,10 @@ var cache_1 = __importDefault(require("./cache"));
 var helpers_1 = require("./helpers");
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.animation, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transform);
-exports.BaseSvg = styled_components_2.default.svg.withConfig({
+var generator = styled_components_1.compose(styled_components_1.animation, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transform);
+exports.SvgBase = styled_components_2.default.svg.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\n\t", "\n"])), generator);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
 exports.Svg = core_1.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, src = _a.src, rest = __rest(_a, ["children", "className", "src"]);
     var _b = __read(react_1.useState(helpers_1.initState()), 2), state = _b[0], setState = _b[1];
@@ -146,7 +146,7 @@ exports.Svg = core_1.forwardRef(function (_a, ref) {
         src && loadSvg(src);
     }, [src]);
     var innerHTML = !children ? { __html: content } : undefined;
-    return (react_1.default.createElement(exports.BaseSvg, __assign({ className: utils_1.cs('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest), children));
+    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';
 exports.default = exports.Svg;

package/svg/svg.types.d.ts

@@ -1,13 +1,13 @@
 import { SVGProps } from 'react';
-import { AnimationProps, ColorProps, SizingProps, SpaceProps, TransformProps } from '../system';
+import { AnimationProps, ColorProps, FlexboxesProps, SizingProps, SpaceProps, TransformProps } from '../system';
 import { Dict } from '../utils';
-export interface SvgProps extends Omit<SVGProps<SVGSVGElement>, 'transform'>, SvgStyleProps {
+export interface SvgProps extends Omit<SVGProps<SVGSVGElement>, 'display' | 'order' | 'transform'>, SvgStyleProps {
     src?: string;
 }
 export interface SvgState {
     content?: string;
     svgAttributes: Dict<string>;
 }
-export interface SvgStyleProps extends AnimationProps, ColorProps, SizingProps, SpaceProps, TransformProps {
+export interface SvgStyleProps extends AnimationProps, ColorProps, FlexboxesProps, SizingProps, SpaceProps, TransformProps {
     color?: string;
 }

package/switch/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const SwitchProvider: import("react").Provider<Dict<any>>, useSwitch: () => Dict<any>;
+export { SwitchProvider, useSwitch };

package/switch/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSwitch = exports.SwitchProvider = void 0;
+var core_1 = require("../core");
+var _a = __read(core_1.createContext({ isOptional: true }), 2), SwitchProvider = _a[0], useSwitch = _a[1];
+exports.SwitchProvider = SwitchProvider;
+exports.useSwitch = useSwitch;

package/switch/index.d.ts

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,23 @@
+"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("./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.d.ts

@@ -0,0 +1,6 @@
+import { SwitchProps, SwitchStyleProps } from './switch.types';
+export declare const SwitchBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & SwitchStyleProps, never>;
+export declare const Switch: import("styled-components").StyledComponent<"span", never, SwitchProps, never>;
+export default Switch;

package/switch/switch.js

@@ -0,0 +1,113 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = exports.SwitchBase = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importStar(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var context_1 = require("./context");
+var switchButton_1 = require("./switchButton");
+var switchLabel_1 = require("./switchLabel");
+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.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 _a = __read(react_1.useState(defaultChecked), 2), isChecked = _a[0], setIsChecked = _a[1];
+    var styles = core_1.useStyleConfig('Switch', props);
+    react_1.useEffect(function () {
+        checked !== undefined && setIsChecked(checked);
+    }, [checked]);
+    var handleOnChange = react_1.useCallback(function (e) {
+        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 }); }, [
+        colorScheme,
+        disabled,
+        isChecked,
+        name,
+        size,
+        value,
+        variant
+    ]);
+    var aliasedProps = utils_1.filterUndefined({
+        'data-checked': isChecked ? true : false,
+        '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, null, labelLeft),
+            react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputProps: inputProps, inputRef: inputRef, required: required }, { onChange: handleOnChange })),
+            labelRight && react_1.default.createElement(switchLabel_1.SwitchLabel, null, labelRight))))));
+});
+exports.Switch.displayName = 'Switch';
+exports.default = exports.Switch;
+var templateObject_1;

package/switch/switch.types.d.ts

@@ -0,0 +1,20 @@
+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'> {
+    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;
+    labelLeft?: React.ReactElement | string;
+    labelRight?: React.ReactElement | string;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    required?: boolean;
+    value?: number | string;
+}
+export interface SwitchStyleProps extends FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
+}

package/switch/switch.types.js

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

package/switch/switchButton.d.ts

@@ -0,0 +1,13 @@
+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 default SwitchButton;

package/switch/switchButton.js

@@ -0,0 +1,140 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchButton = exports.SwitchButtonBase = exports.SwitchTrack = exports.SwitchThumb = exports.SwitchInput = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importStar(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var buttonGenerator = styled_components_1.compose(styled_components_1.color, styled_components_1.fontSize, styled_components_1.sizing, styled_components_1.space);
+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.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"]);
+    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 _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 isControlled = checked !== undefined || switchIsChecked !== undefined;
+    react_1.useEffect(function () {
+        if (isControlled) {
+            setIsChecked(checked !== null && checked !== void 0 ? checked : switchIsChecked);
+        }
+    }, [checked, isControlled, switchIsChecked]);
+    function handleOnBlur(e) {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }
+    function handleOnChange(e) {
+        !isControlled && setIsChecked(e.target.checked);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }
+    function handleOnFocus(e) {
+        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({
+        'data-checked': isChecked ? true : false,
+        'data-disabled': disabled ? true : false,
+        'data-focused': isFocused ? true : false
+    });
+    var thumbProps = utils_1.filterUndefined({
+        left: isChecked ? thumbOffset : -hDiff,
+        ring: isFocused ? styles.thumb.ring : 0
+    });
+    var trackProps = utils_1.filterUndefined({
+        bg: isChecked ? styles.track.bg : 'grey.50',
+        pl: isChecked ? 1 : labelOffset,
+        pr: isChecked ? labelOffset : 1,
+        ring: isFocused ? styles.track.ring : 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),
+            !isChecked && innerLabelOff,
+            react_1.default.createElement(exports.SwitchThumb, __assign({ borderRadius: "50%", className: "vui-switchThumb", transitionDuration: "fast" }, styles.thumb, thumbProps)),
+            isChecked && innerLabelOn)));
+});
+exports.SwitchButton.displayName = 'SwitchButton';
+exports.default = exports.SwitchButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_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 Omit<HTMLAttributes<HTMLSpanElement>, 'onBlur' | 'onChange' | 'onFocus'>, 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("styled-components").StyledComponent<"span", never, TProps, never>;
+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({ ref: ref }, styles.label, props));
+});
+exports.SwitchLabel.displayName = 'SwitchLabel';
+exports.default = exports.SwitchLabel;