@veracity/vui 0.7.0-beta.2 → 0.7.1

package/popover/usePopover.js

@@ -0,0 +1,122 @@
+"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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __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 react_1 = require("react");
+var tippy_js_1 = __importDefault(require("tippy.js"));
+var utils_1 = require("../utils");
+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 = props.matchWidth, offset = props.offset, onCloseProp = props.onClose, onOpenProp = 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];
+    var _j = __read((0, react_1.useState)(null), 2), popper = _j[0], setPopper = _j[1];
+    var close = (0, react_1.useCallback)(function () { return instance === null || instance === void 0 ? void 0 : instance.hide(); }, [instance]);
+    var onClose = (0, utils_1.useCallbackRef)(onCloseProp);
+    var onOpen = (0, utils_1.useCallbackRef)(onOpenProp);
+    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, _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, 4], onHidden: function (instance) {
+                setIsOpen(false);
+                onHidden === null || onHidden === void 0 ? void 0 : onHidden(instance);
+            }, onHide: function (instance) {
+                onClose(instance);
+                onHide === null || onHide === void 0 ? void 0 : onHide(instance);
+            }, onShow: function (instance) {
+                setIsOpen(true);
+                onOpen(instance);
+                onShow === null || onShow === void 0 ? void 0 : onShow(instance);
+            }, 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, offset, options, placement, trigger]);
+    // Create a new Tippy instance
+    (0, react_1.useEffect)(function () {
+        if (popper !== null && reference !== null) {
+            // Destroy old instance to ensure new options work
+            instance === null || instance === void 0 ? void 0 : instance.destroy();
+            var newInstance = (0, tippy_js_1.default)(reference, __assign(__assign({}, tippyOptions), { content: popper }));
+            setInstance(newInstance);
+        }
+    }, [popper, tippyOptions, trigger]);
+    // Handle showing/hiding popup in controlled mode
+    (0, react_1.useEffect)(function () {
+        if (isControlled) {
+            if (isOpenProp) {
+                instance === null || instance === void 0 ? void 0 : instance.show();
+            }
+            else {
+                instance === null || instance === void 0 ? void 0 : instance.hide();
+            }
+        }
+    }, [isOpenProp]);
+    return {
+        close: close,
+        instance: instance,
+        isOpen: isOpen,
+        open: open,
+        popper: popper,
+        reference: reference,
+        setPopper: setPopper,
+        setReference: setReference
+    };
+}
+exports.default = usePopover;

package/popover/usePopover.types.d.ts

@@ -0,0 +1,27 @@
+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;
+    /** 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?: Partial<TippyProps>;
+    /** Preferred placement of the content. Might be flipped if needs more space. */
+    placement?: Placement;
+    /** Determintes the events that cause the content to show. */
+    trigger?: PopoverTrigger | AnyString;
+};

package/portal/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./portal"), exports);
+var portal_1 = require("./portal");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(portal_1).default; } });
+__exportStar(require("./portal.types"), exports);

package/portal/portal.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PortalProps } from './portal.types';
+/** Provided children are portaled to document.body or custom container. */
+export declare const Portal: FC<PortalProps>;
+export default Portal;

package/portal/portal.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 __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.Portal = void 0;
+var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
+/** Provided children are portaled to document.body or custom container. */
+var Portal = function (props) {
+    var children = props.children, containerRef = props.containerRef, disablePortal = props.disablePortal;
+    var _a = __read((0, react_1.useState)(), 2), mountNode = _a[0], setMountNode = _a[1];
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (!disablePortal) {
+            setMountNode((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) !== null && _a !== void 0 ? _a : document.body);
+        }
+    }, [disablePortal]);
+    if (disablePortal)
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    return mountNode ? (0, react_dom_1.createPortal)(children, mountNode) : react_1.default.createElement(react_1.default.Fragment, null, mountNode);
+};
+exports.Portal = Portal;
+exports.default = exports.Portal;

package/portal/portal.types.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+export declare type PortalProps = {
+    /** Ref of a custom container that will be used instead of document.body. */
+    containerRef?: RefObject<HTMLElement | null>;
+    /** Content will be rendered as usual, without portaling. */
+    disablePortal?: boolean;
+};

package/radio/context.d.ts

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

package/radio/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.useRadioGroupContext = exports.RadioGroupProvider = void 0;
+var utils_1 = require("../utils");
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), RadioGroupProvider = _a[0], useRadioGroupContext = _a[1];
+exports.RadioGroupProvider = RadioGroupProvider;
+exports.useRadioGroupContext = useRadioGroupContext;

package/radio/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./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);

package/radio/radio.d.ts

@@ -0,0 +1,8 @@
+import { RadioProps, RadioStyleProps } from './radio.types';
+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("../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

@@ -0,0 +1,121 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = exports.RadioBase = void 0;
+var react_1 = __importStar(require("react"));
+var core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+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.useRadioGroupContext)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _c.defaultValue, groupIsChecked = _c.isChecked, groupOnChange = _c.onChange, groupValue = _c.value, radioGroupProps = __rest(_c, ["defaultValue", "isChecked", "onChange", "value"]);
+    var defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined;
+    var mergedProps = __assign(__assign({}, radioGroupProps), props);
+    var _d = (0, core_1.omitThemingProps)(mergedProps), _e = _d.checked, checked = _e === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _e, children = _d.children, className = _d.className, _f = _d.defaultChecked, defaultChecked = _f === void 0 ? groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined : _f, disabled = _d.disabled, _g = _d.icon, iconProp = _g === void 0 ? 'cuiRadioUnselected' : _g, _h = _d.iconChecked, iconChecked = _h === void 0 ? 'cuiRadioSelected' : _h, id = _d.id, inputProps = _d.inputProps, inputRef = _d.inputRef, label = _d.label, name = _d.name, onChange = _d.onChange, required = _d.required, value = _d.value, rest = __rest(_d, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "id", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
+    var _j = __read((0, react_1.useState)((_b = defaultIsChecked !== null && defaultIsChecked !== void 0 ? defaultIsChecked : checked) !== null && _b !== void 0 ? _b : defaultChecked), 2), isChecked = _j[0], setIsChecked = _j[1];
+    var styles = (0, core_1.useStyleConfig)('Radio', mergedProps);
+    var _k = styles.control, controlColor = _k.color, hoverColor = _k.hoverColor, controlStyles = __rest(_k, ["color", "hoverColor"]);
+    var icon = isChecked ? iconChecked : iconProp;
+    var controlMr = children || label ? 1 : 0;
+    var color = isChecked ? controlColor : 'grey.60';
+    var controlHoverColor = isChecked ? hoverColor : 'grey.90';
+    (0, react_1.useEffect)(function () {
+        if (groupIsChecked !== undefined) {
+            setIsChecked(groupIsChecked === value);
+        }
+        else if (checked !== undefined) {
+            setIsChecked(checked);
+        }
+    }, [checked, groupIsChecked]);
+    function handleOnChange(e) {
+        groupOnChange === null || groupOnChange === void 0 ? void 0 : groupOnChange(e);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }
+    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';
+exports.default = exports.Radio;
+var templateObject_1, templateObject_2, templateObject_3;

package/radio/radio.types.d.ts

@@ -0,0 +1,39 @@
+import { HTMLAttributes } from 'react';
+import { IconProp } from '../icon';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+import { ChangeEventHandler, FocusEventHandler } from '../utils';
+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 declare type RadioStyleProps = {
+    /** Styles the icon when any part of the radio is hovered. */
+    controlHoverColor: string;
+};

package/radio/radioGroup.d.ts

@@ -0,0 +1,8 @@
+import { RadioGroupProps } from './radioGroup.types';
+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

@@ -0,0 +1,109 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = exports.RadioGroupBase = void 0;
+var react_1 = __importStar(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+exports.RadioGroupBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1;\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1;\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];
+    var handleOnChange = (0, react_1.useCallback)(function (e) {
+        setIsChecked(e.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [onChange]);
+    var context = (0, react_1.useMemo)(function () {
+        return (0, utils_1.filterUndefined)({
+            colorScheme: colorScheme,
+            defaultValue: defaultValue,
+            disabled: disabled,
+            isChecked: isChecked,
+            name: name,
+            onBlur: onBlur,
+            onChange: handleOnChange,
+            onFocus: onFocus,
+            size: size,
+            value: value,
+            variant: variant
+        });
+    }, [colorScheme, defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]);
+    var aliasedProps = (0, utils_1.filterUndefined)({
+        flexDirection: isRow ? 'row' : undefined
+    });
+    return (react_1.default.createElement(context_1.RadioGroupProvider, { value: context },
+        react_1.default.createElement(exports.RadioGroupBase, __assign({ className: (0, utils_1.cs)('vui-radioGroup', className), ref: ref }, aliasedProps, rest))));
+});
+exports.RadioGroup.displayName = 'RadioGroup';
+exports.default = exports.RadioGroup;
+var templateObject_1;

package/radio/radioGroup.types.d.ts

@@ -0,0 +1,21 @@
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+import { ChangeEventHandler, FocusEventHandler } from '../utils';
+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;
+};