@veracity/vui 0.0.2 → 0.0.3

package/avatar/avatar.d.ts

@@ -1,5 +1,5 @@
 import { AvatarProps, AvatarStyleProps } from './avatar.types';
-export declare const BaseAvatar: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+export declare const AvatarBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & AvatarStyleProps, never>;
 export declare const Avatar: import("styled-components").StyledComponent<"span", never, AvatarProps, never>;

package/avatar/avatar.js

@@ -45,7 +45,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = exports.BaseAvatar = void 0;
+exports.Avatar = exports.AvatarBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
@@ -54,7 +54,7 @@ var icon_1 = __importDefault(require("../icon"));
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 var AvatarImage = styled_components_2.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\theight: 100%;\n\twidth: 100%;\n\n\t", "\n"], ["\n\theight: 100%;\n\twidth: 100%;\n\n\t", "\n"])), styled_components_1.borders);
-exports.BaseAvatar = styled_components_2.default.span.withConfig({
+exports.AvatarBase = styled_components_2.default.span.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: 1.333;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: 1.333;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), generator);
 function defaultGetInitials(name) {
@@ -73,13 +73,12 @@ exports.Avatar = core_1.forwardRef(function (props, ref) {
             hoverBg: hoverBg,
             activeBg: activeBg,
             focusRing: 3,
-            focusRingColor: 'blue.50',
             tabIndex: 0,
             userSelect: 'none'
         }
         : {};
     var aliasedProps = utils_1.filterUndefined({});
-    return (react_1.default.createElement(exports.BaseAvatar, __assign({ borderRadius: borderRadius, className: utils_1.cs('vui-avatar', className), fontWeight: "medium", h: h, ref: ref, transitionDuration: "fast", w: h }, styles, interactiveProps, aliasedProps, rest), children ? (children) : src ? (react_1.default.createElement(AvatarImage, { borderRadius: borderRadius, src: src })) : icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : initials ? (initials) : null));
+    return (react_1.default.createElement(exports.AvatarBase, __assign({ borderRadius: borderRadius, className: utils_1.cs('vui-avatar', className), fontWeight: "medium", h: h, ref: ref, transitionDuration: "fast", w: h }, styles, interactiveProps, aliasedProps, rest), children ? (children) : src ? (react_1.default.createElement(AvatarImage, { borderRadius: borderRadius, src: src })) : icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : initials ? (initials) : null));
 });
 exports.Avatar.displayName = 'Avatar';
 exports.default = exports.Avatar;

package/avatar/theme.js

@@ -19,18 +19,18 @@ function variantOutlined(props) {
 }
 function variantSolid(props) {
     var c = props.colorScheme;
-    var colors = {
+    var styles = {
         hoverBg: c + ".90",
         activeBg: c + ".100",
         bg: c + ".80",
         color: 'white'
     };
     if (c === 'yellow') {
-        colors.hoverBg = c + ".80";
-        colors.activeBg = c + ".90";
-        colors.bg = c + ".70";
+        styles.hoverBg = c + ".80";
+        styles.activeBg = c + ".90";
+        styles.bg = c + ".70";
     }
-    return colors;
+    return styles;
 }
 function variantSubtle(props) {
     var c = props.colorScheme;

package/box/box.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, BoxStyleProps } from './box.types';
-export declare const BaseBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const BoxBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & BoxStyleProps, never>;
 export declare const Box: import("styled-components").StyledComponent<"div", never, BoxProps, never>;

package/box/box.js

@@ -29,14 +29,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Box = exports.BaseBox = void 0;
+exports.Box = exports.BoxBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, styled_components_1.layout, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-exports.BaseBox = styled_components_2.default.div.withConfig({
+exports.BoxBase = styled_components_2.default.div.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"])), generator);
 exports.Box = core_1.forwardRef(function (props, ref) {
@@ -54,7 +54,7 @@ exports.Box = core_1.forwardRef(function (props, ref) {
         hoverBoxShadow: hoverShadow,
         justifyContent: justify !== null && justify !== void 0 ? justify : justifyContent
     });
-    return (react_1.default.createElement(exports.BaseBox, __assign({ className: utils_1.cs('vui-box', className), ref: ref, transitionDuration: "normal" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.BoxBase, __assign({ className: utils_1.cs('vui-box', className), ref: ref, transitionDuration: "normal" }, styles, aliasedProps, rest)));
 });
 exports.Box.displayName = 'Box';
 exports.default = exports.Box;

package/button/button.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps, ButtonStyleProps } from './button.types';
-export declare const BaseButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+export declare const ButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & ButtonStyleProps, never>;
 export declare const Button: import("styled-components").StyledComponent<"button", never, ButtonProps, never>;

package/button/button.js

@@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = exports.BaseButton = void 0;
+exports.Button = exports.ButtonBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
@@ -40,14 +40,15 @@ var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.fontSize, styled_components_1.fontWeight, styled_components_1.pointerEvents, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 var ContentWrapper = styled_components_2.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tvisibility: hidden;\n"], ["\n\tvisibility: hidden;\n"])));
 var LoadingWrapper = styled_components_2.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"], ["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"])));
-exports.BaseButton = styled_components_2.default.button.withConfig({
+exports.ButtonBase = styled_components_2.default.button.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), generator);
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"])), generator);
 exports.Button = core_1.forwardRef(function (props, ref) {
     var _a;
-    var group = context_1.useButtonGroup();
-    var _b = core_1.omitThemingProps(props), borderWidthProp = _b.borderWidth, children = _b.children, className = _b.className, _c = _b.disabled, disabled = _c === void 0 ? group === null || group === void 0 ? void 0 : group.disabled : _c, icon = _b.icon, iconLeftProp = _b.iconLeft, iconRightProp = _b.iconRight, isElevated = _b.isElevated, isFullWidth = _b.isFullWidth, isLoading = _b.isLoading, isRound = _b.isRound, isSplit = _b.isSplit, itemLeftProp = _b.itemLeft, itemRightProp = _b.itemRight, text = _b.text, rest = __rest(_b, ["borderWidth", "children", "className", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "itemLeft", "itemRight", "text"]);
-    var _d = core_1.useStyleConfig('Button', __assign(__assign({}, group), props)), borderWidth = _d.borderWidth, h = _d.h, _e = _d.iconSize, iconSize = _e === void 0 ? 'md' : _e, minW = _d.minW, _f = _d.spaceX, spaceXBase = _f === void 0 ? 0 : _f, styles = __rest(_d, ["borderWidth", "h", "iconSize", "minW", "spaceX"]);
+    var buttonGroupProps = context_1.useButtonGroup();
+    var mergedProps = __assign(__assign({}, buttonGroupProps), props);
+    var _b = core_1.omitThemingProps(mergedProps), borderWidthProp = _b.borderWidth, children = _b.children, className = _b.className, disabled = _b.disabled, icon = _b.icon, iconLeftProp = _b.iconLeft, iconRightProp = _b.iconRight, isElevated = _b.isElevated, isFullWidth = _b.isFullWidth, isLoading = _b.isLoading, isRound = _b.isRound, isSplit = _b.isSplit, itemLeftProp = _b.itemLeft, itemRightProp = _b.itemRight, text = _b.text, rest = __rest(_b, ["borderWidth", "children", "className", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "itemLeft", "itemRight", "text"]);
+    var _c = core_1.useStyleConfig('Button', mergedProps), borderWidth = _c.borderWidth, h = _c.h, _d = _c.iconSize, iconSize = _d === void 0 ? 'md' : _d, minW = _c.minW, _e = _c.spaceX, spaceXBase = _e === void 0 ? 0 : _e, styles = __rest(_c, ["borderWidth", "h", "iconSize", "minW", "spaceX"]);
     var Content = isLoading ? ContentWrapper : react_1.default.Fragment;
     var border = (_a = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _a !== void 0 ? _a : 0;
     var spaceX = (spaceXBase - border) / 8;
@@ -63,10 +64,10 @@ exports.Button = core_1.forwardRef(function (props, ref) {
     var aliasedProps = utils_1.filterUndefined({
         borderRadius: isRound ? h / 2 : undefined,
         boxShadow: isElevated ? 2 : undefined,
-        pointerEvents: disabled || isLoading ? 'none' : undefined,
+        pointerEvents: isLoading ? 'none' : undefined,
         w: isFullWidth ? '100%' : undefined
     });
-    return (react_1.default.createElement(exports.BaseButton, __assign({ borderRadius: "md", borderWidth: border, className: utils_1.cs('vui-button', className), disabled: disabled, disabledBg: "grey.20", disabledBorderColor: "grey.50", disabledColor: "grey.50", focusRing: 3, focusRingColor: "blue.50", fontWeight: "medium", h: h, minW: minWidth, pl: pl, pr: pr, ref: ref, transitionDuration: "fast", type: "button" }, styles, aliasedProps, rest),
+    return (react_1.default.createElement(exports.ButtonBase, __assign({ borderRadius: "md", borderWidth: border, className: utils_1.cs('vui-button', className), disabled: disabled, focusRing: 3, fontWeight: "medium", h: h, minW: minWidth, pl: pl, pr: pr, ref: ref, transitionDuration: "fast", type: "button" }, styles, aliasedProps, rest),
         isLoading && (react_1.default.createElement(LoadingWrapper, { onClick: function (e) { return e.stopPropagation(); } },
             react_1.default.createElement(icon_1.default, { animation: "spin", icon: "falSpinner", m: "auto", size: iconSize }))),
         react_1.default.createElement(Content, null, icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : (react_1.default.createElement(react_1.default.Fragment, null,

package/button/buttonGroup.d.ts

@@ -1,5 +1,5 @@
 import { ButtonGroupProps, ButtonGroupStyleProps } from './buttonGroup.types';
-export declare const BaseButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const ButtonGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & ButtonGroupStyleProps, never>;
 export declare const ButtonGroup: import("styled-components").StyledComponent<"div", never, ButtonGroupProps, never>;

package/button/buttonGroup.js

@@ -48,7 +48,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonGroup = exports.BaseButtonGroup = void 0;
+exports.ButtonGroup = exports.ButtonGroupBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
@@ -56,7 +56,7 @@ var context_1 = require("./context");
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
-exports.BaseButtonGroup = styled_components_2.default.div.withConfig({
+exports.ButtonGroupBase = styled_components_2.default.div.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t// First Button\n\t> *:first-of-type:not(:last-of-type) {\n\t\tborder-bottom-right-radius: 0;\n\t\tborder-right-width: 1px;\n\t\tborder-top-right-radius: 0;\n\t}\n\n\t// Middle Buttons\n\t> *:not(:first-of-type):not(:last-of-type) {\n\t\tborder-left-width: 0px;\n\t\tborder-radius: 0;\n\t\tborder-right-width: 1px;\n\t}\n\n\t// Last Button\n\t> *:not(:first-of-type):last-of-type {\n\t\tborder-bottom-left-radius: 0;\n\t\tborder-left-width: 0px;\n\t\tborder-top-left-radius: 0;\n\t}\n\n\t> *:focus {\n\t\tz-index: 1;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\n\t// First Button\n\t> *:first-of-type:not(:last-of-type) {\n\t\tborder-bottom-right-radius: 0;\n\t\tborder-right-width: 1px;\n\t\tborder-top-right-radius: 0;\n\t}\n\n\t// Middle Buttons\n\t> *:not(:first-of-type):not(:last-of-type) {\n\t\tborder-left-width: 0px;\n\t\tborder-radius: 0;\n\t\tborder-right-width: 1px;\n\t}\n\n\t// Last Button\n\t> *:not(:first-of-type):last-of-type {\n\t\tborder-bottom-left-radius: 0;\n\t\tborder-left-width: 0px;\n\t\tborder-top-left-radius: 0;\n\t}\n\n\t> *:focus {\n\t\tz-index: 1;\n\t}\n\n\t", "\n"])), generator);
 exports.ButtonGroup = core_1.forwardRef(function (props, ref) {
@@ -68,7 +68,7 @@ exports.ButtonGroup = core_1.forwardRef(function (props, ref) {
         variant
     ]);
     return (react_1.default.createElement(context_1.ButtonGroupProvider, { value: context },
-        react_1.default.createElement(exports.BaseButtonGroup, __assign({ className: utils_1.cs('vui-buttonGroup', className), ref: ref }, rest))));
+        react_1.default.createElement(exports.ButtonGroupBase, __assign({ className: utils_1.cs('vui-buttonGroup', className), ref: ref }, rest))));
 });
 exports.ButtonGroup.displayName = 'ButtonGroup';
 exports.default = exports.ButtonGroup;

package/button/index.d.ts

@@ -3,4 +3,5 @@ export * from './button.types';
 export * from './buttons';
 export * from './buttonGroup';
 export * from './buttonGroup.types';
+export * from './context';
 export { default } from './button';

package/button/index.js

@@ -19,5 +19,6 @@ __exportStar(require("./button.types"), exports);
 __exportStar(require("./buttons"), exports);
 __exportStar(require("./buttonGroup"), exports);
 __exportStar(require("./buttonGroup.types"), exports);
+__exportStar(require("./context"), exports);
 var button_1 = require("./button");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(button_1).default; } });

package/button/theme.js

@@ -25,6 +25,11 @@ function variantSolid(props) {
         bg: c + ".80",
         color: 'white'
     };
+    // Special cases
+    if (c === 'prussian') {
+        styles.activeBg = 'prussian.60';
+        styles.hoverBg = 'prussian.70';
+    }
     return styles;
 }
 function variantText(props) {

package/checkbox/checkbox.d.ts

@@ -1,7 +1,10 @@
-import { CheckboxProps, CheckboxStyleProps } from './checkbox.types';
-export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const BaseCheckbox: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+import { CheckboxControlStyleProps, CheckboxProps, CheckboxStyleProps } from './checkbox.types';
+export declare const CheckboxInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const CheckboxBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & CheckboxStyleProps, never>;
+export declare const CheckboxControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & CheckboxControlStyleProps, never>;
 export declare const Checkbox: import("styled-components").StyledComponent<"span", never, CheckboxProps, never>;
 export default Checkbox;

package/checkbox/checkbox.js

@@ -64,34 +64,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = exports.BaseCheckbox = exports.Input = void 0;
+exports.Checkbox = exports.CheckboxControl = exports.CheckboxBase = exports.CheckboxInput = 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 icon_1 = __importDefault(require("../icon"));
+var context_1 = require("./context");
 var core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-exports.Input = 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.BaseCheckbox = styled_components_2.default.span.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\n\tinput:disabled {\n\t\tcursor: not-allowed;\n\t}\n\n\t// Remove when icons are fixed\n\tpath {\n\t\tfill: currentColor;\n\t}\n\n\t", "\n"], ["\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\n\tinput:disabled {\n\t\tcursor: not-allowed;\n\t}\n\n\t// Remove when icons are fixed\n\tpath {\n\t\tfill: currentColor;\n\t}\n\n\t", "\n"])), generator);
+var checkboxGenerator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
+var controlGenerator = 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.CheckboxInput = 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.CheckboxBase = styled_components_2.default.label.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(checkboxGenerator.meta.props)
+})(templateObject_2 || (templateObject_2 = __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:hover .vui-checkboxControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-checkboxControl {\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:hover .vui-checkboxControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-checkboxControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th('colors', p.controlHoverColor)(p); }, checkboxGenerator);
+exports.CheckboxControl = styled_components_2.default.span.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(controlGenerator.meta.props)
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), controlGenerator);
 exports.Checkbox = core_1.forwardRef(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), checked = _a.checked, _b = _a.checkedIcon, checkedIcon = _b === void 0 ? 'cusCheckboxSelected' : _b, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, _c = _a.icon, iconProp = _c === void 0 ? 'falSquare' : _c, _d = _a.indeterminateIcon, indeterminateIcon = _d === void 0 ? 'cusSquareMinus' : _d, inputProps = _a.inputProps, inputRef = _a.inputRef, isIndeterminate = _a.isIndeterminate, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, required = _a.required, value = _a.value, rest = __rest(_a, ["checked", "checkedIcon", "className", "defaultChecked", "disabled", "icon", "indeterminateIcon", "inputProps", "inputRef", "isIndeterminate", "name", "onChange", "readOnly", "required", "value"]);
-    var _e = __read(react_1.useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checked), 2), isChecked = _e[0], setIsChecked = _e[1];
-    var _f = core_1.useStyleConfig('Checkbox', props), colorStyle = _f.color, h = _f.h, hoverColorStyle = _f.hoverColor, styles = __rest(_f, ["color", "h", "hoverColor"]);
+    var checkboxGroupProps = context_1.useCheckboxGroup();
+    var mergedProps = __assign(__assign({}, checkboxGroupProps), props);
+    var _a = core_1.omitThemingProps(mergedProps), checked = _a.checked, children = _a.children, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, _b = _a.icon, iconProp = _b === void 0 ? 'cuiCheckboxUnselected' : _b, _c = _a.iconChecked, iconChecked = _c === void 0 ? 'cuiCheckboxSelected' : _c, _d = _a.iconIndeterminate, iconIndeterminate = _d === void 0 ? 'cuiCheckboxIndeterminate' : _d, inputProps = _a.inputProps, inputRef = _a.inputRef, isIndeterminate = _a.isIndeterminate, label = _a.label, name = _a.name, onChange = _a.onChange, required = _a.required, value = _a.value, rest = __rest(_a, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "iconIndeterminate", "inputProps", "inputRef", "isIndeterminate", "label", "name", "onChange", "required", "value"]);
+    var _e = __read(react_1.useState(defaultChecked), 2), isChecked = _e[0], setIsChecked = _e[1];
+    var styles = core_1.useStyleConfig('Checkbox', mergedProps);
+    var _f = styles.control, controlColor = _f.color, hoverColor = _f.hoverColor, controlStyles = __rest(_f, ["color", "hoverColor"]);
+    react_1.useEffect(function () {
+        checked !== undefined && setIsChecked(checked);
+    }, [checked]);
     var isFilled = isChecked || isIndeterminate;
-    var color = disabled ? 'grey.40' : isFilled ? colorStyle : 'grey.60';
-    var hoverColor = disabled ? 'grey.40' : isFilled ? hoverColorStyle : 'grey.80';
-    var icon = isIndeterminate ? indeterminateIcon : isChecked ? checkedIcon : iconProp;
+    var icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
+    var controlMr = children || label ? 1 : 0;
+    var color = isFilled ? controlColor : 'grey.50';
+    var controlHoverColor = isFilled ? hoverColor : 'grey.90';
     function handleOnChange(e) {
         setIsChecked(e.target.checked);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }
-    return (react_1.default.createElement(exports.BaseCheckbox, __assign({ borderRadius: "sm", className: utils_1.cs('vui-checkbox', className), color: color, focusWithinRing: 3, focusWithinRingColor: "blue.50", h: h, hoverColor: hoverColor, onChange: handleOnChange, ref: ref, transitionDuration: "fast", type: "checkbox", w: h }, styles, rest),
-        react_1.default.createElement(exports.Input, __assign({}, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, onChange: onChange, readOnly: readOnly, required: required, value: value }, { className: "vui-checkboxInput", ref: inputRef, type: "checkbox" }, inputProps)),
-        react_1.default.createElement(icon_1.default, { h: "100%", icon: icon, w: "100%" })));
+    return (react_1.default.createElement(exports.CheckboxBase, __assign({ className: utils_1.cs('vui-checkbox', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
+        react_1.default.createElement(exports.CheckboxControl, __assign({ borderRadius: "sm", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, transitionDuration: "fast" }, controlStyles),
+            react_1.default.createElement(exports.CheckboxInput, __assign({ className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, required: required, value: value }, inputProps)),
+            react_1.default.createElement(icon_1.default, { h: "100%", icon: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-checkboxLabel" }, styles.label), label)))));
 });
 exports.Checkbox.displayName = 'Checkbox';
 exports.default = exports.Checkbox;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/checkbox/checkbox.types.d.ts

@@ -1,25 +1,25 @@
 import { HTMLAttributes } from 'react';
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { BackgroundColorProps, BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface CheckboxProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onChange'>, CheckboxStyleProps, ThemingProps<'Checkbox'> {
+export interface CheckboxProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'>, CheckboxStyleProps, ThemingProps<'Checkbox'> {
     checked?: boolean;
-    checkedIcon?: IconProp;
     colorScheme?: 'blue' | 'prussian';
     disabled?: boolean;
     icon?: IconProp;
-    indeterminateIcon?: IconProp;
-    inputProps?: InputProps;
+    iconChecked?: IconProp;
+    iconIndeterminate?: IconProp;
+    inputProps?: HTMLAttributes<HTMLInputElement>;
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     isIndeterminate?: boolean;
+    label?: string;
     name?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    readOnly?: boolean;
     required?: boolean;
     value?: number | string;
 }
-export interface CheckboxStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps {
+export interface CheckboxControlStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps {
 }
-interface InputProps extends HTMLAttributes<HTMLInputElement> {
+export interface CheckboxStyleProps extends BackgroundColorProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
+    controlHoverColor?: string;
 }
-export {};

package/checkbox/checkboxGroup.d.ts

@@ -0,0 +1,6 @@
+import { CheckboxGroupProps, CheckboxGroupStyleProps } from './checkboxGroup.types';
+export declare const CheckboxGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & CheckboxGroupStyleProps, never>;
+export declare const CheckboxGroup: import("styled-components").StyledComponent<"div", never, CheckboxGroupProps, never>;
+export default CheckboxGroup;

package/checkbox/checkboxGroup.js

@@ -0,0 +1,80 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroup = exports.CheckboxGroupBase = 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 generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
+exports.CheckboxGroupBase = styled_components_2.default.div.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), generator);
+exports.CheckboxGroup = core_1.forwardRef(function (props, ref) {
+    var className = props.className, colorScheme = props.colorScheme, disabled = props.disabled, name = props.name, onChange = props.onChange, row = props.row, size = props.size, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "disabled", "name", "onChange", "row", "size", "variant"]);
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, name: name, onChange: onChange, size: size, variant: variant }); }, [
+        colorScheme,
+        disabled,
+        name,
+        onChange,
+        size,
+        variant
+    ]);
+    var aliasedProps = utils_1.filterUndefined({
+        flexDirection: row ? 'row' : undefined
+    });
+    return (react_1.default.createElement(context_1.CheckboxGroupProvider, { value: context },
+        react_1.default.createElement(exports.CheckboxGroupBase, __assign({ className: utils_1.cs('vui-checkboxGroup', className), ref: ref }, aliasedProps, rest))));
+});
+exports.CheckboxGroup.displayName = 'CheckboxGroup';
+exports.default = exports.CheckboxGroup;
+var templateObject_1;

package/checkbox/checkboxGroup.types.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, CheckboxGroupStyleProps, ThemingProps<'Checkbox'> {
+    colorScheme?: 'blue' | 'prussian';
+    disabled?: boolean;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    row?: boolean;
+}
+export interface CheckboxGroupStyleProps extends FlexboxesProps, SizingProps, SpaceProps {
+}

package/checkbox/checkboxGroup.types.js

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

package/checkbox/context.d.ts

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

package/checkbox/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.useCheckboxGroup = exports.CheckboxGroupProvider = void 0;
+var core_1 = require("../core");
+var _a = __read(core_1.createContext({ isOptional: true }), 2), CheckboxGroupProvider = _a[0], useCheckboxGroup = _a[1];
+exports.CheckboxGroupProvider = CheckboxGroupProvider;
+exports.useCheckboxGroup = useCheckboxGroup;

package/checkbox/index.d.ts

@@ -1,3 +1,6 @@
 export * from './checkbox';
 export * from './checkbox.types';
+export * from './checkboxGroup';
+export * from './checkboxGroup.types';
+export * from './context';
 export { default } from './checkbox';

package/checkbox/index.js

@@ -16,5 +16,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./checkbox"), exports);
 __exportStar(require("./checkbox.types"), exports);
+__exportStar(require("./checkboxGroup"), exports);
+__exportStar(require("./checkboxGroup.types"), exports);
+__exportStar(require("./context"), exports);
 var checkbox_1 = require("./checkbox");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });

package/checkbox/theme.d.ts

@@ -1,7 +1,9 @@
 import { Dict } from '../utils';
 declare function variantDefault(props: Dict): {
-    color: string;
-    hoverColor: string;
+    control: {
+        color: string;
+        hoverColor: string;
+    };
 };
 declare const _default: {
     defaultProps: {
@@ -9,12 +11,35 @@ declare const _default: {
         size: string;
         variant: string;
     };
+    parts: string[];
     sizes: {
         sm: {
-            h: number;
+            control: {
+                h: number;
+                w: number;
+            };
+            label: {
+                size: string;
+            };
         };
         md: {
-            h: number;
+            control: {
+                h: number;
+                w: number;
+            };
+            label: {
+                lineHeight: number;
+                size: string;
+            };
+        };
+        lg: {
+            control: {
+                h: number;
+                w: number;
+            };
+            label: {
+                size: string;
+            };
         };
     };
     variants: {