@veracity/vui 0.3.0 → 0.3.2

package/skeleton/index.d.ts

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

package/skeleton/index.js

@@ -15,6 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./skeleton"), exports);
-__exportStar(require("./skeleton.types"), exports);
 var skeleton_1 = require("./skeleton");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(skeleton_1).default; } });
+__exportStar(require("./skeleton.types"), exports);

package/skeleton/skeleton.d.ts

@@ -1,5 +1,5 @@
 import { SkeletonProps } from './skeleton.types';
-import { SystemProps } from '../system';
-export declare const SkeletonBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const SkeletonBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays one or more animated skeleton elements to signify loading content. */
 export declare const Skeleton: import("../core").VuiComponent<"div", SkeletonProps>;
 export default Skeleton;

package/skeleton/skeleton.js

@@ -31,11 +31,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = exports.SkeletonBase = void 0;
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
-var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.SkeletonBase = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tanimation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"], ["\n\tanimation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"])), system_1.system);
+exports.SkeletonBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tanimation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n"], ["\n\tanimation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n"
+    /** Displays one or more animated skeleton elements to signify loading content. */
+])));
+/** Displays one or more animated skeleton elements to signify loading content. */
 exports.Skeleton = (0, core_1.vui)(function (props, ref) {
     var _a = (0, core_1.omitThemingProps)(props), className = _a.className, _b = _a.repeat, repeat = _b === void 0 ? 1 : _b, rest = __rest(_a, ["className", "repeat"]);
     var styles = (0, core_1.useStyleConfig)('Skeleton', props);

package/skeleton/skeleton.types.d.ts

@@ -1,7 +1,10 @@
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface SkeletonProps extends SystemProps, ThemingProps<'Skeleton'> {
+export declare type SkeletonProps = SystemProps & ThemingProps<'Skeleton'> & {
+    /** Children are disabled for this component. */
     children?: never;
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'grey';
+    /** Displays given amount of skeleton elements. */
     repeat?: number;
-}
+};

package/skeleton/theme.d.ts

@@ -9,6 +9,7 @@ declare function variantRectangle(props: Dict): {
     w: string;
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         size: string;

package/skeleton/theme.js

@@ -17,6 +17,7 @@ function variantRectangle(props) {
     };
     return styles;
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
@@ -41,6 +42,7 @@ var variants = {
     rect: variantRectangle
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     sizes: sizes,
     variants: variants

package/spinner/index.d.ts

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

package/spinner/index.js

@@ -15,6 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./spinner"), exports);
-__exportStar(require("./spinner.types"), exports);
 var spinner_1 = require("./spinner");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(spinner_1).default; } });
+__exportStar(require("./spinner.types"), exports);

package/spinner/spinner.d.ts

@@ -1,4 +1,8 @@
-import { SpinnerCircleStyleProps, SpinnerProps } from './spinner.types';
-export declare const SpinnerCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SpinnerCircleStyleProps, never>;
+import { SpinnerProps } from './spinner.types';
+export declare const SpinnerCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Displays a spinning circular element with optional text to signify loading content.
+ * Handles different positioning scenarios, speeds and coloring of the circle.
+ */
 export declare const Spinner: import("../core").VuiComponent<"div", SpinnerProps>;
 export default Spinner;

package/spinner/spinner.js

@@ -31,14 +31,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = exports.SpinnerCircle = void 0;
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var consts_1 = require("./consts");
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
-var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-exports.SpinnerCircle = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\n\t", "\n\n\tanimation-duration: ", ";\n"], ["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\n\t", "\n\n\tanimation-duration: ", ";\n"])), system_1.system, function (p) { return p.speed; });
+var consts_1 = require("./consts");
+exports.SpinnerCircle = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-radius: round;\n\tdisplay: flex;\n\tflex-shrink: 0;\n"], ["\n\tborder-radius: round;\n\tdisplay: flex;\n\tflex-shrink: 0;\n"
+    /**
+     * Displays a spinning circular element with optional text to signify loading content.
+     * Handles different positioning scenarios, speeds and coloring of the circle.
+     */
+])));
+/**
+ * Displays a spinning circular element with optional text to signify loading content.
+ * Handles different positioning scenarios, speeds and coloring of the circle.
+ */
 exports.Spinner = (0, core_1.vui)(function (props, ref) {
     var _a;
     var className = props.className, emptyColor = props.emptyColor, size = props.size, _b = props.speed, speedProp = _b === void 0 ? 'normal' : _b, text = props.text, _c = props.textPosition, textPosition = _c === void 0 ? 'bottom' : _c, thickness = props.thickness, rest = __rest(props, ["className", "emptyColor", "size", "speed", "text", "textPosition", "thickness"]);
@@ -53,7 +60,7 @@ exports.Spinner = (0, core_1.vui)(function (props, ref) {
         w: isCustomSize ? size : undefined
     });
     return (react_1.default.createElement(box_1.default, __assign({ center: true, className: (0, utils_1.cs)('vui-spinner', className), ref: ref, transitionDuration: "fast" }, styles.container, positionProps.container, rest),
-        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "spin", borderRadius: "round", className: "vui-spinnerCircle", speed: speed }, styles.circle, positionProps.circle, circleProps)),
+        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "vui-spin " + speed + " linear infinite", className: "vui-spinnerCircle" }, styles.circle, positionProps.circle, circleProps)),
         text && (react_1.default.createElement(t_1.default, __assign({ className: "vui-spinnerText" }, styles.text), text))));
 });
 exports.Spinner.displayName = 'Spinner';

package/spinner/spinner.types.d.ts

@@ -1,16 +1,20 @@
 import { BoxProps } from '../box';
-import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface SpinnerCircleStyleProps extends SystemProps {
-    speed?: string;
-}
-export interface SpinnerProps extends Omit<BoxProps, 'size' | 'variant'>, Omit<ThemingProps<'Spinner'>, 'size'> {
+export declare type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProps<'Spinner'>, 'size'> & {
+    /** Children are disabled for this component. */
     children?: never;
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'grey' | 'prussian';
+    /** Color of the 'empty' part of the circle. */
     emptyColor?: string;
+    /** Amount of time needed to make a full rotation. */
     speed?: string;
+    /** Theme size or a number defining height and width. */
     size?: ThemingProps<'Spinner'>['size'] | number;
+    /** Displays given text next to the spinner. */
     text?: string;
+    /** Text placement relative to the spinner. */
     textPosition?: 'bottom' | 'left' | 'right' | 'top';
+    /** Thickness of the spinner circle in pixels. */
     thickness?: number;
-}
+};

package/spinner/theme.d.ts

@@ -10,6 +10,7 @@ declare function variantDefault(props: Dict): {
     text: {};
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         size: string;

package/spinner/theme.js

@@ -12,6 +12,7 @@ function variantDefault(props) {
     var text = {};
     return { container: container, circle: circle, text: text };
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'blue',
     size: 'page',
@@ -66,6 +67,7 @@ var variants = {
     default: variantDefault
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/svg/helpers.d.ts

@@ -1,5 +1,5 @@
-import { SvgState } from './svg.types';
 import { Dict } from '../utils';
+import { SvgState } from './svg.types';
 /** Returns an object with given element's HTML attributes. */
 export declare function getAttributes(element?: Element): Dict<string>;
 /** Returns content of the SVG HTML string by stripping the svg tag. */

package/svg/index.d.ts

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

package/svg/index.js

@@ -15,6 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./svg"), exports);
-__exportStar(require("./svg.types"), exports);
 var svg_1 = require("./svg");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(svg_1).default; } });
+__exportStar(require("./svg.types"), exports);

package/svg/svg.d.ts

@@ -1,5 +1,10 @@
-import { SvgProps } from './svg.types';
 import { VuiComponent } from '../core';
+import { SvgProps } from './svg.types';
 export declare const SvgBase: VuiComponent<'svg', SvgProps>;
+/**
+ * Displays an svg element based on provided children or 'src' prop.
+ * When using src, it loads the content from the given URL and saves in in cache.
+ * Then, renders the svg by parsing loaded content (Review potential for XSS due to innerHTML).
+ */
 export declare const Svg: VuiComponent<"svg", SvgProps>;
 export default Svg;

package/svg/svg.js

@@ -102,13 +102,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Svg = exports.SvgBase = void 0;
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var cache_1 = __importDefault(require("./cache"));
-var helpers_1 = require("./helpers");
 var core_1 = require("../core");
-var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.SvgBase = styled_components_1.default.svg.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n\n\t", "\n"], ["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n\n\t", "\n"])), function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); }, function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); }, system_1.system);
+var cache_1 = __importDefault(require("./cache"));
+var helpers_1 = require("./helpers");
+exports.SvgBase = core_1.styled.svgBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n"], ["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n"
+    /**
+     * Displays an svg element based on provided children or 'src' prop.
+     * When using src, it loads the content from the given URL and saves in in cache.
+     * Then, renders the svg by parsing loaded content (Review potential for XSS due to innerHTML).
+     */
+])), function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); }, function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); });
+/**
+ * Displays an svg element based on provided children or 'src' prop.
+ * When using src, it loads the content from the given URL and saves in in cache.
+ * Then, renders the svg by parsing loaded content (Review potential for XSS due to innerHTML).
+ */
 exports.Svg = (0, core_1.vui)(function (props, ref) {
     var children = props.children, className = props.className, src = props.src, rest = __rest(props, ["children", "className", "src"]);
     var _a = __read((0, react_1.useState)((0, helpers_1.initState)()), 2), state = _a[0], setState = _a[1];

package/svg/svg.types.d.ts

@@ -1,10 +1,12 @@
 import { ColorGetter, SystemProps } from '../system';
 import { Dict } from '../utils';
-export interface SvgProps extends SystemProps {
+export declare type SvgProps = SystemProps & {
+    /** Color or aray of colors used for first and second path elements. */
     fill?: ColorGetter | ColorGetter[];
+    /** If provided, loads an svg file from this URL and displays parsed content. */
     src?: string;
-}
-export interface SvgState {
+};
+export declare type SvgState = {
     content?: string;
     svgAttributes: Dict<string>;
-}
+};

package/switch/context.d.ts

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

package/switch/index.d.ts

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

package/switch/index.js

@@ -15,9 +15,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./context"), exports);
+var switch_1 = require("./switch");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(switch_1).default; } });
 __exportStar(require("./switch"), exports);
 __exportStar(require("./switch.types"), exports);
 __exportStar(require("./switchButton"), 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

@@ -1,9 +1,12 @@
+import { VuiComponent } from '../core';
 import { SwitchProps } from './switch.types';
 import { SwitchButton } from './switchButton';
 import { SwitchLabel } from './switchLabel';
-import { VuiComponent } from '../core';
-import { SystemProps } from '../system';
-export declare const SwitchBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const SwitchBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.
+ * Forwards many relevant props to the innner input element. Exposes some props to the children via context.
+ */
 export declare const Switch: VuiComponent<"label", SwitchProps> & {
     Button: typeof SwitchButton;
     Label: typeof SwitchLabel;

package/switch/switch.js

@@ -44,24 +44,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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 react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 var switchButton_1 = require("./switchButton");
 var switchLabel_1 = require("./switchLabel");
-var core_1 = require("../core");
-var system_1 = require("../system");
-var t_1 = require("../t");
-var utils_1 = require("../utils");
-exports.SwitchBase = styled_components_1.default.label.withConfig((0, 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.SwitchBase = core_1.styled.labelBox(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&[aria-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t.vui-switchLabel {\n\t\t\tcolor: disabled.color;\n\t\t}\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&[aria-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t.vui-switchLabel {\n\t\t\tcolor: disabled.color;\n\t\t}\n\t}\n"
+    /**
+     * Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.
+     * Forwards many relevant props to the innner input element. Exposes some props to the children via context.
+     */
+])));
+/**
+ * Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.
+ * Forwards many relevant props to the innner input element. Exposes some props to the children via context.
+ */
 exports.Switch = (0, core_1.vui)(function (props, ref) {
     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 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, 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, ["button", "checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
     var styles = (0, core_1.useStyleConfig)('Switch', props);
     var context = (0, react_1.useMemo)(function () {
         return (0, utils_1.filterUndefined)({
@@ -80,11 +83,11 @@ exports.Switch = (0, core_1.vui)(function (props, ref) {
         });
     }, [checked, colorScheme, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]);
     var aliasedProps = (0, utils_1.filterUndefined)({
-        'data-disabled': disabled ? true : false
+        'aria-disabled': disabled
     });
     return (react_1.default.createElement(context_1.SwitchProvider, { value: context },
         react_1.default.createElement(exports.SwitchBase, __assign({ className: (0, utils_1.cs)('vui-switch', className), ref: ref }, styles.container, aliasedProps, rest),
-            (0, 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 })),
+            (0, 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, inputProps: inputProps, inputRef: inputRef })),
             (0, utils_1.isReactText)(labelRight) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { ml: 1, text: labelRight }) : labelRight)));
 });
 exports.Switch.displayName = 'Switch';

package/switch/switch.types.d.ts

@@ -2,35 +2,68 @@ import { ReactNode, ReactText } from 'react';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
-export interface SwitchButtonProps extends SystemProps, ThemingProps<'Switch'> {
+export declare type SwitchButtonProps = SystemProps & ThemingProps<'Switch'> & {
+    /** Provides value to switch in controlled mode. */
     checked?: boolean;
+    /** Available theme colors for this component. */
     colorScheme?: 'blue' | 'green' | 'prussian';
+    /** Disables switch and related elements with the right styling. */
     disabled?: boolean;
+    /** Displays custom content to the left of switch thumb. */
     innerLabelOff?: ReactNode;
+    /** Displays custom content to the right of switch thumb. */
     innerLabelOn?: ReactNode;
+    /** Props object passed to the inner input element. */
     inputProps?: PropsOf<'input', SystemProps>;
+    /** Ref passed to the inner input element. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    /** Passed to the inner input. */
     name?: string;
+    /** Passed to the inner input. */
     onBlur?: FocusEventHandler;
+    /** Passed to the inner input. */
     onChange?: ChangeEventHandler;
+    /** Passed to the inner input. */
     onFocus?: FocusEventHandler;
+    /** Passed to the inner input. */
     required?: boolean;
+    /** Passed to the inner input. */
     value?: number | string;
-}
-export interface SwitchProps extends SystemProps, ThemingProps<'Switch'> {
+};
+export declare type SwitchContext = Pick<SwitchProps, 'checked' | 'colorScheme' | 'disabled' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'required' | 'size' | 'value' | 'variant'> & {
+    defaultChecked?: boolean;
+};
+export declare type SwitchProps = SystemProps & ThemingProps<'Switch'> & {
+    /** Socket displaying a custom toggle button component. */
     button?: ReactNode;
+    /** Provides value to switch button in controlled mode. */
     checked?: boolean;
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'green' | 'prussian';
+    /** Disables switch and related elements with the right styling. */
     disabled?: boolean;
+    /** Displays custom content to the left of switch thumb. */
     innerLabelOff?: ReactNode;
+    /** Displays custom content to the right of switch thumb. */
     innerLabelOn?: ReactNode;
+    /** Props object passed to the inner input element. */
+    inputProps?: PropsOf<'input', SystemProps>;
+    /** Ref passed to the inner input element. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    /** Socket displaying content on the left. */
     labelLeft?: ReactNode;
+    /** Socket displaying content on the right. */
     labelRight?: ReactNode;
+    /** Passed to the inner input. */
     name?: string;
+    /** Passed to the inner input. */
     onBlur?: FocusEventHandler;
+    /** Passed to the inner input. */
     onChange?: ChangeEventHandler;
+    /** Passed to the inner input. */
     onFocus?: FocusEventHandler;
+    /** Passed to the inner input. */
     required?: boolean;
+    /** Passed to the inner input. */
     value?: ReactText;
-}
+};

package/switch/switchButton.d.ts

@@ -1,8 +1,8 @@
 import { SwitchButtonProps } from './switch.types';
-import { SystemProps } from '../system';
-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>;
+export declare const SwitchButtonBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Controls the logic and visuals of multiple inner parts, such as input, track or thumb elements.
+ * Handles controlled and uncontrolled modes.
+ */
 export declare const SwitchButton: import("../core").VuiComponent<"span", SwitchButtonProps>;
 export default SwitchButton;

package/switch/switchButton.js

@@ -60,31 +60,39 @@ var __read = (this && this.__read) || function (o, n) {
     }
     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;
+exports.SwitchButton = exports.SwitchButtonBase = void 0;
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-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.withConfig((0, 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((0, 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((0, 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((0, 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);
+var context_1 = require("./context");
+var SwitchInput = core_1.styled.inputBox(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"
+    /** Circular element that moves along the track when toggled. */
+])));
+/** Circular element that moves along the track when toggled. */
+var SwitchThumb = core_1.styled.spanBox(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tborder-radius: round;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\ttransition-duration: fast;\n"], ["\n\tborder-radius: round;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\ttransition-duration: fast;\n"
+    /** Track element along which the thumb moves when toggled. */
+])));
+/** Track element along which the thumb moves when toggled. */
+var SwitchTrack = core_1.styled.spanBox(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-radius: round;\n\tdisplay: inline-flex;\n\tflex: 1;\n\tposition: relative;\n\ttransition-duration: fast;\n"], ["\n\talign-items: center;\n\tborder-radius: round;\n\tdisplay: inline-flex;\n\tflex: 1;\n\tposition: relative;\n\ttransition-duration: fast;\n"])));
+exports.SwitchButtonBase = core_1.styled.spanBox(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&[aria-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t.vui-switchThumb {\n\t\t\tbackground-color: disabled.color;\n\t\t}\n\n\t\t.vui-switchTrack {\n\t\t\t// Using ring instead of border when disabled, because it's easier\n\t\t\t--x-ring-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: disabled.bg;\n\t\t}\n\t}\n"], ["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[aria-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t.vui-switchThumb {\n\t\t\tbackground-color: disabled.color;\n\t\t}\n\n\t\t.vui-switchTrack {\n\t\t\t// Using ring instead of border when disabled, because it's easier\n\t\t\t--x-ring-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: disabled.bg;\n\t\t}\n\t}\n"
+    /**
+     * Controls the logic and visuals of multiple inner parts, such as input, track or thumb elements.
+     * Handles controlled and uncontrolled modes.
+     */
+])));
+/**
+ * Controls the logic and visuals of multiple inner parts, such as input, track or thumb elements.
+ * Handles controlled and uncontrolled modes.
+ */
 exports.SwitchButton = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var switchProps = (_a = (0, context_1.useSwitch)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, switchProps), props);
-    var _b = (0, core_1.omitThemingProps)(mergedProps), checked = _b.checked, className = _b.className, defaultChecked = _b.defaultChecked, disabled = _b.disabled, id = _b.id, innerLabelOff = _b.innerLabelOff, innerLabelOn = _b.innerLabelOn, inputProps = _b.inputProps, inputRef = _b.inputRef, name = _b.name, onBlur = _b.onBlur, onChange = _b.onChange, onFocus = _b.onFocus, required = _b.required, value = _b.value, rest = __rest(_b, ["checked", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
+    var mergedProps = __assign(__assign({}, (0, context_1.useSwitch)()), props);
+    var _a = (0, core_1.omitThemingProps)(mergedProps), checked = _a.checked, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, id = _a.id, innerLabelOff = _a.innerLabelOff, innerLabelOn = _a.innerLabelOn, inputProps = _a.inputProps, inputRef = _a.inputRef, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, required = _a.required, value = _a.value, rest = __rest(_a, ["checked", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
     var isControlled = (0, react_1.useRef)(checked !== undefined).current;
-    var _c = __read((0, react_1.useState)(checked !== null && checked !== void 0 ? checked : defaultChecked), 2), isChecked = _c[0], setIsChecked = _c[1];
-    var _d = __read((0, react_1.useState)(false), 2), isFocused = _d[0], setIsFocused = _d[1];
+    var _b = __read((0, react_1.useState)(checked !== null && checked !== void 0 ? checked : defaultChecked), 2), isChecked = _b[0], setIsChecked = _b[1];
+    var _c = __read((0, react_1.useState)(false), 2), isFocused = _c[0], setIsFocused = _c[1];
     var styles = (0, core_1.useStyleConfig)('Switch', mergedProps);
-    var _e = styles.button, thumbStyles = _e.thumb, trackStyles = _e.track, buttonStyles = __rest(_e, ["thumb", "track"]);
+    var _d = styles.button, thumbStyles = _d.thumb, trackStyles = _d.track, buttonStyles = __rest(_d, ["thumb", "track"]);
     (0, react_1.useEffect)(function () {
         isControlled && setIsChecked(checked);
     }, [checked, isControlled]);
@@ -103,9 +111,9 @@ exports.SwitchButton = (0, core_1.vui)(function (props, ref) {
     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 = (0, utils_1.filterUndefined)({
-        'data-checked': isChecked ? true : false,
-        'data-disabled': disabled ? true : false,
+    var aliasedProps = (0, utils_1.filterUndefined)({
+        'aria-checked': isChecked ? true : false,
+        'aria-disabled': disabled,
         'data-focused': isFocused ? true : false
     });
     var thumbAliasedProps = (0, utils_1.filterUndefined)({
@@ -116,13 +124,13 @@ exports.SwitchButton = (0, core_1.vui)(function (props, ref) {
         bg: isChecked ? trackStyles.bg : 'grey.50',
         pl: isChecked ? 1 : labelOffset,
         pr: isChecked ? labelOffset : 1,
-        ring: isFocused ? trackStyles.ring : disabled ? 1 : 0
+        ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 1
     });
-    return (react_1.default.createElement(exports.SwitchButtonBase, __assign({ className: (0, 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),
+    return (react_1.default.createElement(exports.SwitchButtonBase, __assign({ className: (0, utils_1.cs)('vui-switchButton', className), ref: ref }, buttonStyles, aliasedProps, rest),
+        react_1.default.createElement(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(SwitchTrack, __assign({ className: "vui-switchTrack" }, trackStyles, trackAliasedProps),
             !isChecked && innerLabelOff,
-            react_1.default.createElement(exports.SwitchThumb, __assign({ borderRadius: "round", className: "vui-switchThumb", transitionDuration: "fast" }, thumbStyles, thumbAliasedProps)),
+            react_1.default.createElement(SwitchThumb, __assign({ className: "vui-switchThumb" }, thumbStyles, thumbAliasedProps)),
             isChecked && innerLabelOn)));
 });
 exports.SwitchButton.displayName = 'SwitchButton';

package/switch/switchLabel.d.ts

@@ -1,3 +1,4 @@
 import { TProps } from '../t';
+/** Displays label text within the Switch component. */
 export declare const SwitchLabel: import("../core").VuiComponent<"span", TProps>;
 export default SwitchLabel;

package/switch/switchLabel.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (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"));
+var context_1 = require("./context");
+/** Displays label text within the Switch component. */
 exports.SwitchLabel = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var switchProps = (_a = (0, context_1.useSwitch)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, switchProps), props);
-    var styles = (0, core_1.useStyleConfig)('Switch', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Switch', __assign(__assign({}, (0, context_1.useSwitch)()), props));
     return react_1.default.createElement(t_1.default, __assign({ className: "vui-switchLabel", display: "flex", ref: ref }, styles.label, props));
 });
 exports.SwitchLabel.displayName = 'SwitchLabel';