@veracity/vui 0.3.0 → 0.3.2

package/panel/panel.types.d.ts

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

package/panel/theme.d.ts

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

package/panel/theme.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
 var defaultProps = {
     variant: 'elevated'
 };
@@ -14,6 +15,7 @@ var variants = {
     }
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     sizes: sizes,
     variants: variants

package/popover/consts.d.ts

@@ -0,0 +1,6 @@
+import { Modifier } from '@popperjs/core';
+import { Plugin } from 'tippy.js';
+/** Closes the popper if 'Escape' is pressed. Tippy plugin. */
+export declare const closeOnEscPlugin: Plugin;
+/** Sets popper width to be the same as reference. Updates on resize, etc. Popper modifier. */
+export declare const matchWidthModifier: Modifier<'matchWidth', any>;

package/popover/consts.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchWidthModifier = exports.closeOnEscPlugin = void 0;
+/** Closes the popper if 'Escape' is pressed. Tippy plugin. */
+exports.closeOnEscPlugin = {
+    name: 'closeOnEsc',
+    defaultValue: true,
+    fn: function (_a) {
+        var hide = _a.hide;
+        function onKeyDown(e) {
+            if (e.key === 'Escape') {
+                hide();
+            }
+        }
+        return {
+            onHide: function () {
+                document.removeEventListener('keydown', onKeyDown);
+            },
+            onShow: function () {
+                document.addEventListener('keydown', onKeyDown);
+            }
+        };
+    }
+};
+/** Sets popper width to be the same as reference. Updates on resize, etc. Popper modifier. */
+exports.matchWidthModifier = {
+    name: 'matchWidth',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['computeStyles'],
+    fn: function (_a) {
+        var state = _a.state;
+        state.styles.popper.width = state.rects.reference.width + "px";
+    },
+    effect: function (_a) {
+        var state = _a.state;
+        return function () {
+            var reference = state.elements.reference;
+            state.elements.popper.style.width = reference.offsetWidth + "px";
+        };
+    }
+};

package/popover/index.d.ts

@@ -1,8 +1,9 @@
+export * from './consts';
 export * from './context';
-export * from './plugins';
 export { default, default as Popover } from './popover';
 export * from './popover.types';
 export { default as PopoverContent } from './popoverContent';
+export { default as PopoverStyle } from './popoverStyle';
 export { default as PopoverTrigger } from './popoverTrigger';
 export { default as usePopover } from './usePopover';
 export * from './usePopover.types';

package/popover/index.js

@@ -13,15 +13,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePopover = exports.PopoverTrigger = exports.PopoverContent = exports.Popover = exports.default = void 0;
+exports.usePopover = exports.PopoverTrigger = exports.PopoverStyle = exports.PopoverContent = exports.Popover = exports.default = void 0;
+__exportStar(require("./consts"), exports);
 __exportStar(require("./context"), exports);
-__exportStar(require("./plugins"), exports);
 var popover_1 = require("./popover");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(popover_1).default; } });
 Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return __importDefault(popover_1).default; } });
 __exportStar(require("./popover.types"), exports);
 var popoverContent_1 = require("./popoverContent");
 Object.defineProperty(exports, "PopoverContent", { enumerable: true, get: function () { return __importDefault(popoverContent_1).default; } });
+var popoverStyle_1 = require("./popoverStyle");
+Object.defineProperty(exports, "PopoverStyle", { enumerable: true, get: function () { return __importDefault(popoverStyle_1).default; } });
 var popoverTrigger_1 = require("./popoverTrigger");
 Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: function () { return __importDefault(popoverTrigger_1).default; } });
 var usePopover_1 = require("./usePopover");

package/popover/popover.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import { PopoverProps } from './popover.types';
-import './popover.css';
+/**
+ * Uses 'usePopover' hook to expose relevant data to its children parts.
+ * By default, renders provided content only when popover is opened (lazy).
+ */
 declare function Popover({ children, isLazy, ...props }: PopoverProps): JSX.Element;
 declare namespace Popover {
-    var Content: import("..").VuiComponent<"div", import("..").SystemProps>;
+    var Content: import("..").VuiComponent<"div", import("..").BoxProps>;
     var Trigger: import("..").VuiComponent<"button", import("..").SystemProps>;
 }
 export default Popover;

package/popover/popover.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,12 +31,15 @@ var context_1 = require("./context");
 var popoverContent_1 = __importDefault(require("./popoverContent"));
 var popoverTrigger_1 = __importDefault(require("./popoverTrigger"));
 var usePopover_1 = __importDefault(require("./usePopover"));
-require("./popover.css");
+/**
+ * Uses 'usePopover' hook to expose relevant data to its children parts.
+ * By default, renders provided content only when popover is opened (lazy).
+ */
 function Popover(_a) {
     var children = _a.children, _b = _a.isLazy, isLazy = _b === void 0 ? true : _b, props = __rest(_a, ["children", "isLazy"]);
     var popoverProps = (0, usePopover_1.default)(props);
     var close = popoverProps.close, isOpen = popoverProps.isOpen, open = popoverProps.open;
-    return react_1.default.createElement(context_1.PopoverProvider, { value: popoverProps }, (0, utils_1.runIfFn)(children, { close: close, isOpen: isOpen, open: open }));
+    return (react_1.default.createElement(context_1.PopoverProvider, { value: __assign({ isLazy: isLazy }, popoverProps) }, (0, utils_1.runIfFn)(children, { close: close, isOpen: isOpen, open: open })));
 }
 exports.default = Popover;
 Popover.Content = popoverContent_1.default;

package/popover/popover.types.d.ts

@@ -1,10 +1,13 @@
+import { BoxProps } from '../box';
 import { SystemProps } from '../system';
 import { RenderProps } from '../utils';
 import { UsePopoverType } from './usePopover';
 import { UsePopoverProps } from './usePopover.types';
-export declare type PopoverContentProps = SystemProps;
+export declare type PopoverContentProps = BoxProps;
 export declare type PopoverProps = UsePopoverProps & {
+    /** Exposes render props to the children. */
     children?: PopoverRenderProps;
+    /** Mounts provided content only when popover is opened for performance. @default true */
     isLazy?: boolean;
 };
 export declare type PopoverRenderProps = RenderProps<{

package/popover/popoverContent.d.ts

@@ -1,2 +1,3 @@
-export declare const PopoverContent: import("../core").VuiComponent<"div", import("..").SystemProps>;
+/** Displays provided content in an overlaying wrapper. */
+export declare const PopoverContent: import("../core").VuiComponent<"div", import("../box").BoxProps>;
 export default PopoverContent;

package/popover/popoverContent.js

@@ -27,9 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopoverContent = void 0;
 var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var context_1 = require("./context");
+/** Displays provided content in an overlaying wrapper. */
 exports.PopoverContent = (0, core_1.vui)(function (props, ref) {
     var _a;
     var popoverProps = (_a = (0, context_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {};
@@ -37,7 +39,10 @@ exports.PopoverContent = (0, core_1.vui)(function (props, ref) {
     var children = props.children, rest = __rest(props, ["children"]);
     var styles = (0, core_1.useStyleConfig)('Popover', __assign(__assign({}, popoverProps), props));
     var shouldRenderChildren = isLazy ? isOpen : true;
-    return (react_1.default.createElement(core_1.v.div, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: "vui-popoverContent", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null));
+    return (
+    // Wrapping div prevents an error thrown when conditionally unmounting this component
+    react_1.default.createElement("div", null,
+        react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: "vui-popoverContent", overflowY: "scroll", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null)));
 });
 exports.PopoverContent.displayName = 'PopoverContent';
 exports.default = exports.PopoverContent;

package/popover/popoverStyle.js

@@ -0,0 +1,9 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("../core");
+exports.default = (0, core_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t[data-tippy-root] {\n\t\tmax-width: calc(100vw - 10px);\n\t}\n\n\t.tippy-box {\n\t\tposition: relative;\n\t\ttransition-property: transform, visibility, opacity;\n\t}\n\n\t.tippy-box[data-animation=fade][data-state=hidden] {\n\t\topacity: 0;\n\t}\n\n\t.tippy-content {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n"], ["\n\t[data-tippy-root] {\n\t\tmax-width: calc(100vw - 10px);\n\t}\n\n\t.tippy-box {\n\t\tposition: relative;\n\t\ttransition-property: transform, visibility, opacity;\n\t}\n\n\t.tippy-box[data-animation=fade][data-state=hidden] {\n\t\topacity: 0;\n\t}\n\n\t.tippy-content {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n"])));
+var templateObject_1;

package/popover/popoverTrigger.d.ts

@@ -1,2 +1,6 @@
+/**
+ * Displays a trigger component to toggle display of the popover content.
+ * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
+ */
 export declare const PopoverTrigger: import("../core").VuiComponent<"button", import("..").SystemProps>;
 export default PopoverTrigger;

package/popover/popoverTrigger.js

@@ -31,6 +31,10 @@ var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var context_1 = require("./context");
+/**
+ * Displays a trigger component to toggle display of the popover content.
+ * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
+ */
 exports.PopoverTrigger = (0, core_1.vui)(function (props, ref) {
     var _a;
     var _b = (_a = (0, context_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {}, setReference = _b.setReference, popoverProps = __rest(_b, ["setReference"]);

package/popover/theme.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    baseStyle: {};
     defaultProps: {};
     parts: string[];
     sizes: {};

package/popover/theme.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
 var defaultProps = {};
 var parts = ['content', 'trigger'];
 var sizes = {};
 var variants = {};
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/popover/usePopover.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="react" />
 import { Instance, Props as TippyProps } from 'tippy.js';
 import { UsePopoverProps } from './usePopover.types';
+/**
+ * Controls the logic of instantiating and managing a tippy instance.
+ * Takes multiple configuration props that control closing, placement or behavior.
+ * Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.
+ */
 export default function usePopover(props?: UsePopoverProps): {
     close: () => void | undefined;
     instance: Instance<TippyProps> | null;

package/popover/usePopover.js

@@ -37,21 +37,33 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var tippy_js_1 = __importDefault(require("tippy.js"));
 var react_1 = require("react");
+var tippy_js_1 = __importDefault(require("tippy.js"));
 var utils_1 = require("../utils");
-var plugins_1 = require("./plugins");
+var consts_1 = require("./consts");
+/**
+ * Controls the logic of instantiating and managing a tippy instance.
+ * Takes multiple configuration props that control closing, placement or behavior.
+ * Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.
+ */
 function usePopover(props) {
     if (props === void 0) { props = {}; }
     var _a = props.closeOnBlur, closeOnBlur = _a === void 0 ? true : _a, _b = props.closeOnEsc, closeOnEsc = _b === void 0 ? true : _b, _c = props.defaultIsOpen, defaultIsOpen = _c === void 0 ? false : _c, 
     // disablePortal,
-    isOpenProp = props.isOpen, 
-    // matchWidth,
-    offset = props.offset, onClose = props.onClose, onOpen = props.onOpen, options = props.options, _d = props.placement, placement = _d === void 0 ? 'bottom-start' : _d, plugins = props.plugins, _e = props.trigger, trigger = _e === void 0 ? 'click' : _e;
+    isOpenProp = props.isOpen, matchWidth = props.matchWidth, offset = props.offset, onClose = props.onClose, onOpen = props.onOpen, options = props.options, _d = props.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = props.trigger, trigger = _e === void 0 ? 'click' : _e;
     var _f = __read((0, react_1.useState)(isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : defaultIsOpen), 2), isOpen = _f[0], setIsOpen = _f[1];
     var _g = __read((0, react_1.useState)(null), 2), instance = _g[0], setInstance = _g[1];
     var _h = __read((0, react_1.useState)(null), 2), reference = _h[0], setReference = _h[1];
@@ -62,11 +74,9 @@ function usePopover(props) {
     var open = (0, react_1.useCallback)(function () { return instance === null || instance === void 0 ? void 0 : instance.show(); }, [instance]);
     var isControlled = isOpenProp !== undefined;
     var tippyOptions = (0, react_1.useMemo)(function () {
-        var _a = options !== null && options !== void 0 ? options : {}, onHidden = _a.onHidden, onHide = _a.onHide, onShow = _a.onShow, _b = _a.plugins, optionsPlugins = _b === void 0 ? [] : _b, otherOptions = __rest(_a, ["onHidden", "onHide", "onShow", "plugins"]);
-        var mergedPlugins = optionsPlugins.concat(plugins !== null && plugins !== void 0 ? plugins : []);
-        if (!isControlled && closeOnEsc)
-            mergedPlugins.push(plugins_1.closeOnEscPlugin);
-        return __assign({ arrow: false, duration: [200, 150], hideOnClick: !isControlled ? closeOnBlur : false, interactive: true, offset: offset, onHidden: function (instance) {
+        var _a, _b;
+        var _c = options !== null && options !== void 0 ? options : {}, optionsOffset = _c.offset, onHidden = _c.onHidden, onHide = _c.onHide, onShow = _c.onShow, _d = _c.plugins, plugins = _d === void 0 ? [] : _d, _e = _c.popperOptions, popperOptions = _e === void 0 ? {} : _e, otherOptions = __rest(_c, ["offset", "onHidden", "onHide", "onShow", "plugins", "popperOptions"]);
+        return __assign({ arrow: false, duration: [200, 150], hideOnClick: !isControlled ? closeOnBlur : false, interactive: true, maxWidth: 'none', offset: (_a = optionsOffset !== null && optionsOffset !== void 0 ? optionsOffset : offset) !== null && _a !== void 0 ? _a : [0, 2], onHidden: function (instance) {
                 setIsOpen(false);
                 onHidden === null || onHidden === void 0 ? void 0 : onHidden(instance);
             }, onHide: function (instance) {
@@ -78,7 +88,7 @@ function usePopover(props) {
                 setIsOpen(true);
                 (_a = onOpenRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenRef, instance);
                 onShow === null || onShow === void 0 ? void 0 : onShow(instance);
-            }, placement: placement, plugins: mergedPlugins, showOnCreate: defaultIsOpen, trigger: !isControlled ? trigger : 'manual' }, otherOptions);
+            }, placement: placement, plugins: __spreadArray(__spreadArray([], __read((!isControlled && closeOnEsc ? [consts_1.closeOnEscPlugin] : [])), false), __read(plugins), false), popperOptions: __assign(__assign({}, popperOptions), { modifiers: __spreadArray([__assign(__assign({}, consts_1.matchWidthModifier), { enabled: !!matchWidth })], __read(((_b = popperOptions.modifiers) !== null && _b !== void 0 ? _b : [])), false) }), showOnCreate: defaultIsOpen, trigger: !isControlled ? trigger : 'manual' }, otherOptions);
     }, [closeOnBlur, closeOnEsc, placement, trigger]);
     // Create a new Tippy instance
     (0, react_1.useEffect)(function () {

package/popover/usePopover.types.d.ts

@@ -1,16 +1,27 @@
-import { Instance, Placement, Props } from 'tippy.js';
+import { Instance, Placement, Props as TippyProps } from 'tippy.js';
 import { AnyString } from '../utils';
 export declare type PopoverTrigger = 'click' | 'focus' | 'focusin' | 'manual' | 'mouseenter';
 export declare type UsePopoverProps = {
+    /** Content closes when clicking the trigger or anywhere outside. @default true */
     closeOnBlur?: boolean;
+    /** Content closes when pressing 'Escape'. @default true */
     closeOnEsc?: boolean;
+    /** Content is opened on first render. Uncontrolled mode. */
     defaultIsOpen?: boolean;
+    /** Content is opened/closed by the consumer. Controlled mode. */
     isOpen?: boolean;
-    offset?: Props['offset'];
-    onClose?: (instance: Instance<Props>) => void;
-    onOpen?: (instance: Instance<Props>) => void;
-    options?: Partial<Props>;
+    /** Sets the content element width to be the same as trigger element. */
+    matchWidth?: boolean;
+    /** Displaces content from the trigger in pixels. */
+    offset?: TippyProps['offset'];
+    /** Invoked once content is fully hidden. */
+    onClose?: (instance: Instance<TippyProps>) => void;
+    /** Invoked once content begins to show. */
+    onOpen?: (instance: Instance<TippyProps>) => void;
+    /** Object with any Tippy props. */
+    options?: TippyProps;
+    /** Preferred placement of the content. Might be flipped if needs more space. */
     placement?: Placement;
-    plugins?: Props['plugins'];
+    /** Determintes the events that cause the content to show. */
     trigger?: PopoverTrigger | AnyString;
 };

package/radio/index.d.ts

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

package/radio/index.js

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

package/radio/radio.d.ts

@@ -1,7 +1,8 @@
 import { RadioProps, RadioStyleProps } from './radio.types';
-import { SystemProps } from '../system';
-export declare const RadioInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const RadioBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, RadioStyleProps, never>;
-export declare const RadioControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const RadioBase: 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 & RadioStyleProps, never>;
+/**
+ * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
+ * Uses icons to display itself in different states.
+ */
 export declare const Radio: import("../core").VuiComponent<"span", RadioProps>;
 export default Radio;

package/radio/radio.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.Radio = exports.RadioControl = exports.RadioBase = exports.RadioInput = void 0;
+exports.Radio = exports.RadioBase = 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.RadioInput = 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.RadioBase = 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-radioControl {\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-radioControl {\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-radioControl {\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-radioControl {\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.RadioControl = 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 RadioControl = core_1.styled.spanBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-radius: 50%;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\ttransition-duration: fast;\n"], ["\n\tborder-radius: 50%;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\ttransition-duration: fast;\n"])));
+var RadioInput = 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.RadioBase = 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-radioControl {\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-radioControl {\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-radioControl {\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-radioControl {\n\t\t\tcolor: disabled.color;\n\t\t}\n\t}\n"
+    /**
+     * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
+     * Uses icons to display itself in different states.
+     */
+])), function (p) { return core_1.th.color(p.controlHoverColor); });
+/**
+ * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
+ * Uses icons to display itself in different states.
+ */
 exports.Radio = (0, core_1.vui)(function (props, ref) {
     var _a, _b;
     var _c = (_a = (0, context_1.useRadioGroup)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _c.defaultValue, groupIsChecked = _c.isChecked, groupOnChange = _c.onChange, groupValue = _c.value, radioGroupProps = __rest(_c, ["defaultValue", "isChecked", "onChange", "value"]);
@@ -101,9 +108,12 @@ exports.Radio = (0, core_1.vui)(function (props, ref) {
         groupOnChange === null || groupOnChange === void 0 ? void 0 : groupOnChange(e);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }
-    return (react_1.default.createElement(exports.RadioBase, __assign({ className: (0, utils_1.cs)('vui-radio', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
-        react_1.default.createElement(exports.RadioControl, __assign({ borderRadius: "50%", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, transitionDuration: "fast" }, controlStyles),
-            react_1.default.createElement(exports.RadioInput, __assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
+    var aliasedProps = (0, utils_1.filterUndefined)({
+        'aria-disabled': disabled
+    });
+    return (react_1.default.createElement(exports.RadioBase, __assign({ className: (0, utils_1.cs)('vui-radio', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest),
+        react_1.default.createElement(RadioControl, __assign({ className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr }, controlStyles),
+            react_1.default.createElement(RadioInput, __assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
             react_1.default.createElement(icon_1.default, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label), label)))));
 });
 exports.Radio.displayName = 'Radio';

package/radio/radio.types.d.ts

@@ -3,22 +3,37 @@ import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { ChangeEventHandler, FocusEventHandler } from '../utils';
-export interface RadioProps extends SystemProps, ThemingProps<'Radio'> {
+export declare type RadioProps = SystemProps & ThemingProps<'Radio'> & {
+    /** Provides value to radio in controlled mode. */
     checked?: boolean;
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'prussian';
+    /** Disables radio and related elements with the right styling. */
     disabled?: boolean;
+    /** Icon used when not checked. @default cuiRadioSelected */
     icon?: IconProp;
+    /** Icon used when checked. @default cuiRadioUnselected */
     iconChecked?: 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;
+    /** 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 RadioStyleProps extends SystemProps {
+};
+export declare type RadioStyleProps = {
+    /** Styles the icon when any part of the radio is hovered. */
     controlHoverColor: string;
-}
+};

package/radio/radioGroup.d.ts

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

package/radio/radioGroup.js

@@ -60,18 +60,22 @@ 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.RadioGroup = exports.RadioGroupBase = 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.RadioGroupBase = 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.RadioGroupBase = 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 radio buttons as a row or column.
+     * Exposes some props to the children via context.
+     */
+])));
+/**
+ * Organizes layout and display of multiple radio buttons as a row or column.
+ * Exposes some props to the children via context.
+ */
 exports.RadioGroup = (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, value = props.value, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "isRow", "name", "onBlur", "onChange", "onFocus", "size", "value", "variant"]);
     var _a = __read((0, react_1.useState)(value !== null && value !== void 0 ? value : defaultValue), 2), isChecked = _a[0], setIsChecked = _a[1];

package/radio/radioGroup.types.d.ts

@@ -1,13 +1,21 @@
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { ChangeEventHandler, FocusEventHandler } from '../utils';
-export interface RadioGroupProps extends SystemProps, ThemingProps<'Radio'> {
+export declare type RadioGroupProps = SystemProps & ThemingProps<'Radio'> & {
+    /** Available theme colors for this component. */
     colorScheme?: 'blue' | 'prussian';
+    /** Passes the prop to each radio. */
     disabled?: boolean;
+    /** Displays radio buttons 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;
+    /** Passes the prop to each checkbox. */
     value?: number | string;
-}
+};

package/radio/theme.d.ts

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

package/radio/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,