@veracity/vui 0.3.1 → 0.3.2

package/buttonGroup/buttonGroup.js

@@ -44,19 +44,23 @@ 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.ButtonGroup = exports.ButtonGroupBase = void 0;
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var context_1 = require("./context");
-var helpers_1 = require("./helpers");
 var core_1 = require("../core");
-var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.ButtonGroupBase = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t// Border color between Buttons\n\t> *:not(:last-of-type):not(:disabled):not(:focus) {\n\t\tborder-right-color: ", ";\n\t}\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", "\n"], ["\n\tdisplay: flex;\n\n\t// Border color between Buttons\n\t> *:not(:last-of-type):not(:disabled):not(:focus) {\n\t\tborder-right-color: ", ";\n\t}\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", "\n"])), function (p) { return core_1.th.color(p.innerBorderColor); }, system_1.system);
+var context_1 = require("./context");
+var helpers_1 = require("./helpers");
+exports.ButtonGroupBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t// Border color between Buttons\n\t> *:not(:last-of-type):not([aria-disabled='true']):not(:focus) {\n\t\tborder-right-color: ", ";\n\t}\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\tdisplay: flex;\n\n\t// Border color between Buttons\n\t> *:not(:last-of-type):not([aria-disabled='true']):not(:focus) {\n\t\tborder-right-color: ", ";\n\t}\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"
+    /**
+     * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.
+     * Exposes some props to the children via context.
+     */
+])), function (p) { return core_1.th.color(p.innerBorderColor); });
+/**
+ * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.
+ * Exposes some props to the children via context.
+ */
 exports.ButtonGroup = (0, core_1.vui)(function (props, ref) {
     var className = props.className, colorScheme = props.colorScheme, disabled = props.disabled, size = props.size, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "disabled", "size", "variant"]);
     var innerBorderColor = (0, helpers_1.getInnerBorderColor)(props);

package/buttonGroup/buttonGroup.types.d.ts

@@ -1,6 +1,8 @@
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ButtonGroupProps extends SystemProps, ThemingProps<'Button'> {
+export declare type ButtonGroupProps = SystemProps & ThemingProps<'ButtonGroup'> & {
+    /** Available theme colors for this component. */
     colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red';
+    /** Makes all wrapped buttons disabled. */
     disabled?: boolean;
-}
+};

package/buttonGroup/helpers.d.ts

@@ -1,3 +1,3 @@
 import { ButtonGroupProps } from './buttonGroup.types';
-/** Returns appropriate color for the border between the buttons */
+/** Returns appropriate color for the border between the buttons. */
 export declare function getInnerBorderColor(props: ButtonGroupProps): string;

package/buttonGroup/helpers.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInnerBorderColor = void 0;
-/** Returns appropriate color for the border between the buttons */
+/** Returns appropriate color for the border between the buttons. */
 function getInnerBorderColor(props) {
     var _a = props.colorScheme, colorScheme = _a === void 0 ? 'prussian' : _a, _b = props.variant, variant = _b === void 0 ? 'solid' : _b;
     var shade = variant === 'solid' ? '100' : '80';

package/buttonGroup/index.d.ts

@@ -1,4 +1,4 @@
 export * from './buttonGroup';
+export { default } from './buttonGroup';
 export * from './buttonGroup.types';
 export * from './context';
-export { default } from './buttonGroup';

package/buttonGroup/index.js

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

package/card/card.d.ts

@@ -1,3 +1,7 @@
 import { CardProps } from './card.types';
+/**
+ * Displays static, partially interactive or fully interactive content, such as text, images or buttons.
+ * Supports use cases like a single card or multiple tiles.
+ */
 export declare const Card: import("../core").VuiComponent<"div", CardProps>;
 export default Card;

package/card/card.js

@@ -30,14 +30,22 @@ var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
+/**
+ * Displays static, partially interactive or fully interactive content, such as text, images or buttons.
+ * Supports use cases like a single card or multiple tiles.
+ */
 exports.Card = (0, core_1.vui)(function (props, ref) {
     var _a = (0, core_1.omitThemingProps)(props), className = _a.className, _b = _a.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, rest = __rest(_a, ["className", "isInteractive"]);
     var styles = (0, core_1.useStyleConfig)('Card', props);
     var interactiveProps = isInteractive
         ? {
             cursor: 'pointer',
+            focusRing: 2,
+            focusRingColor: 'blue.50',
             hoverRingColor: 'prussian.80',
             hoverShadow: '4',
+            outline: 'none',
+            tabIndex: 0,
             userSelect: 'none'
         }
         : {};

package/card/card.types.d.ts

@@ -1,5 +1,6 @@
 import { BoxProps } from '../box';
 import { ThemingProps } from '../theme';
-export interface CardProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Card'> {
+export declare type CardProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Card'> & {
+    /** Makes card clickable and focusable with correct styling. */
     isInteractive?: boolean;
-}
+};

package/card/index.d.ts

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

package/card/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("./card"), exports);
-__exportStar(require("./card.types"), exports);
 var card_1 = require("./card");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(card_1).default; } });
+__exportStar(require("./card.types"), exports);

package/card/theme.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    baseStyle: {};
     defaultProps: {};
     sizes: {};
     variants: {};

package/card/theme.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
 var defaultProps = {};
 var sizes = {};
 var variants = {};
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     sizes: sizes,
     variants: variants

package/checkbox/checkbox.d.ts

@@ -1,7 +1,8 @@
 import { CheckboxProps, CheckboxStyleProps } from './checkbox.types';
-import { SystemProps } from '../system';
-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, CheckboxStyleProps, never>;
-export declare const CheckboxControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const CheckboxBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("..").SpaceAroundProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & CheckboxStyleProps, never>;
+/**
+ * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.
+ * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.
+ */
 export declare const Checkbox: import("../core").VuiComponent<"span", CheckboxProps>;
 export default Checkbox;

package/checkbox/checkbox.js

@@ -64,18 +64,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = exports.CheckboxControl = exports.CheckboxBase = exports.CheckboxInput = void 0;
+exports.Checkbox = exports.CheckboxBase = 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 icon_1 = __importDefault(require("../icon"));
-var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-exports.CheckboxInput = styled_components_1.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_1.default.label.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\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\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.color(p.controlHoverColor)(p); }, system_1.system);
-exports.CheckboxControl = styled_components_1.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(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"])), system_1.system);
+var context_1 = require("./context");
+var CheckboxControl = core_1.styled.spanBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-radius: sm;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\ttransition-duration: fast;\n"], ["\n\tborder-radius: sm;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\ttransition-duration: fast;\n"])));
+var CheckboxInput = core_1.styled.input(templateObject_2 || (templateObject_2 = __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 = core_1.styled.labelBox(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t&:not([aria-disabled='true']):hover .vui-checkboxControl {\n\t\tcolor: ", ";\n\t}\n\n\t&[aria-disabled='true'] {\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\n\t\t.vui-checkboxControl {\n\t\t\tcolor: disabled.color;\n\t\t}\n\t}\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t&:not([aria-disabled='true']):hover .vui-checkboxControl {\n\t\tcolor: ", ";\n\t}\n\n\t&[aria-disabled='true'] {\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\n\t\t.vui-checkboxControl {\n\t\t\tcolor: disabled.color;\n\t\t}\n\t}\n"
+    /**
+     * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.
+     * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.
+     */
+])), function (p) { return core_1.th.color(p.controlHoverColor); });
+/**
+ * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.
+ * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.
+ */
 exports.Checkbox = (0, core_1.vui)(function (props, ref) {
     var _a;
     var _b = (_a = (0, context_1.useCheckboxGroup)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _b.defaultValue, checkboxGroupProps = __rest(_b, ["defaultValue"]);
@@ -96,9 +103,12 @@ exports.Checkbox = (0, core_1.vui)(function (props, ref) {
         setIsChecked(e.target.checked);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }
-    return (react_1.default.createElement(exports.CheckboxBase, __assign({ className: (0, 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, id: id, name: name, required: required, value: value }, inputProps)),
+    var aliasedProps = (0, utils_1.filterUndefined)({
+        'aria-disabled': disabled
+    });
+    return (react_1.default.createElement(exports.CheckboxBase, __assign({ className: (0, utils_1.cs)('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest),
+        react_1.default.createElement(CheckboxControl, __assign({ className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr }, controlStyles),
+            react_1.default.createElement(CheckboxInput, __assign({ className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
             react_1.default.createElement(icon_1.default, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-checkboxLabel", lineHeight: "normal" }, styles.label), label)))));
 });
 exports.Checkbox.displayName = 'Checkbox';

package/checkbox/checkbox.types.d.ts

@@ -3,24 +3,41 @@ import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { ChangeEventHandler, FocusEventHandler } from '../utils';
-export interface CheckboxProps extends SystemProps, ThemingProps<'Checkbox'> {
+export declare type CheckboxProps = SystemProps & ThemingProps<'Checkbox'> & {
+    /** Provides value to checkbox in controlled mode. */
     checked?: boolean;
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'prussian';
+    /** Disables checkbox and related elements with the right styling. */
     disabled?: boolean;
+    /** Icon used when not checked. @default cuiCheckboxUnselected */
     icon?: IconProp;
+    /** Icon used when checked. @default cuiCheckboxSelected */
     iconChecked?: IconProp;
+    /** Icon used when in indeterminte state. @default cuiCheckboxIndeterminate */
     iconIndeterminate?: IconProp;
+    /** Props object passed to the inner input element. */
     inputProps?: HTMLAttributes<HTMLInputElement>;
+    /** Ref passed to the inner input element. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    /** Displays the checkbox as indeterminate. */
     isIndeterminate?: boolean;
+    /** Socket placing text to the left of the checkbox. */
     label?: string;
+    /** 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 CheckboxStyleProps extends SystemProps {
+};
+export declare type CheckboxStyleProps = {
+    /** Styles the icon when any part of the checkbox is hovered. */
     controlHoverColor: string;
-}
+};

package/checkbox/checkboxGroup.d.ts

@@ -1,5 +1,8 @@
 import { CheckboxGroupProps } from './checkboxGroup.types';
-import { SystemProps } from '../system';
-export declare const CheckboxGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const CheckboxGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Organizes layout and display of multiple checkboxes as a row or column.
+ * Exposes some props to the children via context.
+ */
 export declare const CheckboxGroup: import("../core").VuiComponent<"div", CheckboxGroupProps>;
 export default CheckboxGroup;

package/checkbox/checkboxGroup.js

@@ -44,18 +44,22 @@ 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.CheckboxGroup = exports.CheckboxGroupBase = 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.CheckboxGroupBase = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(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"])), system_1.system);
+var context_1 = require("./context");
+exports.CheckboxGroupBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n"
+    /**
+     * Organizes layout and display of multiple checkboxes as a row or column.
+     * Exposes some props to the children via context.
+     */
+])));
+/**
+ * Organizes layout and display of multiple checkboxes as a row or column.
+ * Exposes some props to the children via context.
+ */
 exports.CheckboxGroup = (0, core_1.vui)(function (props, ref) {
     var className = props.className, colorScheme = props.colorScheme, defaultValue = props.defaultValue, disabled = props.disabled, isRow = props.isRow, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, size = props.size, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "isRow", "name", "onBlur", "onChange", "onFocus", "size", "variant"]);
     var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, defaultValue: defaultValue, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, size: size, variant: variant }); }, [colorScheme, defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant]);

package/checkbox/checkboxGroup.types.d.ts

@@ -1,12 +1,19 @@
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { ChangeEventHandler, FocusEventHandler } from '../utils';
-export interface CheckboxGroupProps extends SystemProps, ThemingProps<'Checkbox'> {
+export declare type CheckboxGroupProps = SystemProps & ThemingProps<'Checkbox'> & {
+    /** Available theme colors for this component. */
     colorScheme?: 'blue' | 'prussian';
+    /** Passes the prop to each checkbox. */
     disabled?: boolean;
+    /** Displays checkboxes in a row. */
     isRow?: boolean;
+    /** Passes the prop to each checkbox. */
     name?: string;
+    /** Passes the prop to each checkbox. */
     onBlur?: FocusEventHandler;
+    /** Passes the prop to each checkbox. */
     onChange?: ChangeEventHandler;
+    /** Passes the prop to each checkbox. */
     onFocus?: FocusEventHandler;
-}
+};

package/checkbox/index.d.ts

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

package/checkbox/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("./checkbox"), exports);
+var checkbox_1 = require("./checkbox");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });
 __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

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

package/checkbox/theme.js

@@ -13,6 +13,7 @@ function variantDefault(props) {
         control: control
     };
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
@@ -52,6 +53,7 @@ var variants = {
     default: variantDefault
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/core/index.d.ts

@@ -1,7 +1,6 @@
 export * from './consts';
+export * from './media';
 export * from './styled';
-export * from './types';
-export * from './utils';
-export { default as GlobalStyle } from './globalStyle';
-export { default as ResetCSS } from './resetCSS';
-export { default as VuiProvider } from './vuiProvider';
+export * from './theme';
+export * from './vui';
+export * from './vuiProvider';

package/core/index.js

@@ -9,18 +9,10 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 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.VuiProvider = exports.ResetCSS = exports.GlobalStyle = void 0;
 __exportStar(require("./consts"), exports);
+__exportStar(require("./media"), exports);
 __exportStar(require("./styled"), exports);
-__exportStar(require("./types"), exports);
-__exportStar(require("./utils"), exports);
-var globalStyle_1 = require("./globalStyle");
-Object.defineProperty(exports, "GlobalStyle", { enumerable: true, get: function () { return __importDefault(globalStyle_1).default; } });
-var resetCSS_1 = require("./resetCSS");
-Object.defineProperty(exports, "ResetCSS", { enumerable: true, get: function () { return __importDefault(resetCSS_1).default; } });
-var vuiProvider_1 = require("./vuiProvider");
-Object.defineProperty(exports, "VuiProvider", { enumerable: true, get: function () { return __importDefault(vuiProvider_1).default; } });
+__exportStar(require("./theme"), exports);
+__exportStar(require("./vui"), exports);
+__exportStar(require("./vuiProvider"), exports);

package/core/media.d.ts

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { StyledProps } from 'styled-components';
+import { Screen } from '../theme';
+import { AnyNumber, AnyString } from '../utils';
+declare type ScreenWidth = Screen | AnyNumber | AnyString;
+export declare type RenderOnScreenProps = {
+    /** Changes direction to below the breakpoint. */
+    isDown?: boolean;
+    /** Breakpoint to compare viewport width against. */
+    screen?: Screen;
+};
+/** Returns CSS media string with appropriate min-width and max-width values. */
+export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/** Returns CSS media string with appropriate max-width value */
+export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/** Returns CSS media string with appropriate min-width value. */
+export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
+export declare const RenderOnDesktop: FC<RenderOnScreenProps>;
+/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
+export declare const RenderOnMobile: FC<RenderOnScreenProps>;
+/**
+ * Renders its content when viewport width is at or above a provided breakpoint.
+ * Optionally, direction can be set to down, or below, the breakpoint.
+ */
+export declare const RenderOnScreen: FC<RenderOnScreenProps>;
+/** Returns true if current viewport width is between provided min and max widths. */
+export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
+/** Returns true if current viewport width is smaller than provided width. */
+export declare function useDown(width: ScreenWidth): boolean;
+/** Returns viewport width and provided screen width as a number. */
+export declare function useMedia(width: ScreenWidth): {
+    value: number;
+    viewportWidth: number | null;
+};
+/** Returns true if current viewport width is larger than or equal to provided width. */
+export declare function useUp(width: ScreenWidth): boolean;
+export {};

package/core/media.js

@@ -0,0 +1,79 @@
+"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.useUp = exports.useMedia = exports.useDown = exports.useBetween = exports.RenderOnScreen = exports.RenderOnMobile = exports.RenderOnDesktop = exports.mediaUp = exports.mediaDown = exports.mediaBetween = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importDefault(require("react"));
+var theme_1 = require("./theme");
+/** Returns CSS media string with appropriate min-width and max-width values. */
+var mediaBetween = function (minWidth, maxWidth) { return function (props) {
+    return "@media (min-width: " + theme_1.th.screen(minWidth)(props) + ") and (max-width: " + theme_1.th.screen(maxWidth)(props) + ")";
+}; };
+exports.mediaBetween = mediaBetween;
+/** Returns CSS media string with appropriate max-width value */
+var mediaDown = function (width) { return function (props) {
+    return "@media (max-width: " + theme_1.th.screen(width)(props) + ")";
+}; };
+exports.mediaDown = mediaDown;
+/** Returns CSS media string with appropriate min-width value. */
+var mediaUp = function (width) { return function (props) {
+    return "@media (min-width: " + theme_1.th.screen(width)(props) + ")";
+}; };
+exports.mediaUp = mediaUp;
+/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
+var RenderOnDesktop = function (props) { return react_1.default.createElement(exports.RenderOnScreen, __assign({}, props)); };
+exports.RenderOnDesktop = RenderOnDesktop;
+/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
+var RenderOnMobile = function (props) { return react_1.default.createElement(exports.RenderOnScreen, __assign({ isDown: true }, props)); };
+exports.RenderOnMobile = RenderOnMobile;
+/**
+ * Renders its content when viewport width is at or above a provided breakpoint.
+ * Optionally, direction can be set to down, or below, the breakpoint.
+ */
+var RenderOnScreen = function (_a) {
+    var children = _a.children, isDown = _a.isDown, _b = _a.screen, screen = _b === void 0 ? 'md' : _b;
+    var mediaFn = isDown ? useDown : useUp;
+    return mediaFn(screen) ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+};
+exports.RenderOnScreen = RenderOnScreen;
+/** Returns true if current viewport width is between provided min and max widths. */
+function useBetween(minWidth, maxWidth) {
+    var isDown = useDown(maxWidth);
+    var isUp = useUp(minWidth);
+    return isDown && isUp;
+}
+exports.useBetween = useBetween;
+/** Returns true if current viewport width is smaller than provided width. */
+function useDown(width) {
+    var _a = useMedia(width), value = _a.value, viewportWidth = _a.viewportWidth;
+    return viewportWidth !== null && value !== null && viewportWidth < value;
+}
+exports.useDown = useDown;
+/** Returns viewport width and provided screen width as a number. */
+function useMedia(width) {
+    var theme = (0, theme_1.useTheme)();
+    var viewportWidth = (0, styled_components_1.useViewportWidth)();
+    var valueString = theme_1.th.screen(width)({ theme: theme });
+    var value = Number(valueString.replace('px', ''));
+    return { value: value, viewportWidth: viewportWidth };
+}
+exports.useMedia = useMedia;
+/** Returns true if current viewport width is larger than or equal to provided width. */
+function useUp(width) {
+    var _a = useMedia(width), value = _a.value, viewportWidth = _a.viewportWidth;
+    return viewportWidth !== null && value !== null && viewportWidth >= value;
+}
+exports.useUp = useUp;

package/core/styled.d.ts

@@ -3,8 +3,10 @@ import { StyleGenerator } from '@xstyled/styled-components';
 import { BoxElements } from '@xstyled/styled-components/dist/BoxElements';
 import { createGlobalStyle as scCreateGlobalStyle, DefaultTheme, ThemedCssFunction, ThemedStyledFunction, ThemedStyledInterface } from 'styled-components';
 import { SystemProps } from '../system';
+/** Custom 'css' function with theme support. */
 export declare type CSSFunction = ThemedCssFunction<DefaultTheme>;
 export declare type CreateGlobalStyle = typeof scCreateGlobalStyle;
+/** Type of the custom 'styled' function. */
 export declare type VStyled = ThemedStyledInterface<DefaultTheme> & {
     [Key in keyof BoxElements]: ThemedStyledFunction<BoxElements[Key], DefaultTheme, SystemProps>;
 };
@@ -190,3 +192,4 @@ export declare const v: {
     view: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGViewElement>, "color">) => import("react").ReactElement<any, "view">, DefaultTheme, SystemProps, "color">;
 };
 export declare const styled: VStyled;
+export default styled;