@veracity/vui 0.0.2 → 0.0.3

package/list/listItem.d.ts

@@ -1,5 +1,5 @@
 import { ListItemProps, ListItemStyleProps } from './listItem.types';
-export declare const BaseListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & ListItemStyleProps, never>;
 export declare const ListItem: import("styled-components").StyledComponent<"li", never, ListItemProps, never>;

package/list/listItem.js

@@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItem = exports.BaseListItem = void 0;
+exports.ListItem = exports.ListItemBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
@@ -37,19 +37,19 @@ var context_1 = require("./context");
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.BaseListItem = styled_components_2.default.li.withConfig({
+exports.ListItemBase = styled_components_2.default.li.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: 1.1;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&.disabled {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: 1.1;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&.disabled {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), core_1.th('colors.grey.20'), core_1.th('colors.grey.50'), generator);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: 1.1;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: 1.1;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), generator);
 exports.ListItem = core_1.forwardRef(function (props, ref) {
-    var _a;
-    var listContext = context_1.useList();
-    var className = props.className, disabled = props.disabled, _b = props.isInteractive, isInteractive = _b === void 0 ? (_a = listContext.isInteractive) !== null && _a !== void 0 ? _a : props.onClick !== undefined : _b, isSelected = props.isSelected, onClick = props.onClick, rest = __rest(props, ["className", "disabled", "isInteractive", "isSelected", "onClick"]);
-    var _c = listContext.styles.item, activeBg = _c.activeBg, hoverBg = _c.hoverBg, hoverColor = _c.hoverColor, itemStyles = __rest(_c, ["activeBg", "hoverBg", "hoverColor"]);
+    var listProps = context_1.useList();
+    var mergedProps = __assign(__assign({}, listProps), props);
+    var className = mergedProps.className, disabled = mergedProps.disabled, _a = mergedProps.isInteractive, isInteractive = _a === void 0 ? props.onClick !== undefined : _a, isSelected = mergedProps.isSelected, onClick = mergedProps.onClick, rest = __rest(mergedProps, ["className", "disabled", "isInteractive", "isSelected", "onClick"]);
+    var styles = core_1.useStyleConfig('List', mergedProps);
+    var _b = styles.item, activeBg = _b.activeBg, hoverBg = _b.hoverBg, hoverColor = _b.hoverColor, itemStyles = __rest(_b, ["activeBg", "hoverBg", "hoverColor"]);
     var interactiveProps = !disabled && isInteractive
         ? {
             cursor: 'pointer',
             focusVisibleRing: 3,
-            focusVisibleRingColor: 'blue.50',
             hoverBg: hoverBg,
             activeBg: activeBg,
             hoverColor: hoverColor,
@@ -61,7 +61,7 @@ exports.ListItem = core_1.forwardRef(function (props, ref) {
         bg: isSelected ? hoverBg : undefined,
         color: isSelected ? hoverColor : undefined
     });
-    return (react_1.default.createElement(exports.BaseListItem, __assign({ className: utils_1.cs('vui-listItem', className, disabled && 'disabled'), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: utils_1.cs('vui-listItem', className, disabled && 'disabled'), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest)));
 });
 exports.ListItem.displayName = 'ListItem';
 exports.default = exports.ListItem;

package/list/listItem.types.d.ts

@@ -1,6 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
-export interface ListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'color'>, ListItemStyleProps {
+import { ThemingProps } from '../theme';
+export interface ListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'color'>, ListItemStyleProps, ThemingProps<'List'> {
+    colorScheme?: 'blue' | 'grey';
     disabled?: boolean;
     isInteractive?: boolean;
     isSelected?: boolean;

package/list/theme.d.ts

@@ -1,7 +1,6 @@
 import { Dict } from '../utils';
 declare function variantDefault(props: Dict): {
     item: Dict<any>;
-    list: Dict<any>;
 };
 declare const _default: {
     defaultProps: {

package/list/theme.js

@@ -7,16 +7,12 @@ function variantDefault(props) {
         borderRadius: 'md',
         hoverBg: c + ".20"
     };
-    var listStyles = {
-        px: 1
-    };
     // Special cases
     if (c === 'blue') {
         itemStyles.hoverColor = 'blue.80';
     }
     return {
-        item: itemStyles,
-        list: listStyles
+        item: itemStyles
     };
 }
 var defaultProps = {

package/p/p.d.ts

@@ -1,5 +1,5 @@
 import { PProps, PStyleProps } from './p.types';
-export declare const BaseP: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {
+export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & PStyleProps, never>;
 export declare const P: import("styled-components").StyledComponent<"p", never, PProps, never>;

package/p/p.js

@@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.P = exports.BaseP = void 0;
+exports.P = exports.PBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
@@ -37,7 +37,7 @@ var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(system_1.isTruncated, system_1.maxLines, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.BaseP = styled_components_2.default.p.withConfig({
+exports.PBase = styled_components_2.default.p.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"], ["\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"])), generator);
 exports.P = core_1.forwardRef(function (props, ref) {
@@ -49,7 +49,7 @@ exports.P = core_1.forwardRef(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.BaseP, __assign({ className: utils_1.cs('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.PBase, __assign({ className: utils_1.cs('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
 });
 exports.P.displayName = 'P';
 exports.default = exports.P;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Veracity UI components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",

package/radio/context.d.ts

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

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

package/radio/index.d.ts

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

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);
+__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

@@ -0,0 +1,10 @@
+import { RadioControlStyleProps, RadioProps, RadioStyleProps } from './radio.types';
+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, {
+    [x: string]: {};
+} & RadioStyleProps, never>;
+export declare const RadioControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & RadioControlStyleProps, never>;
+export declare const Radio: import("styled-components").StyledComponent<"span", never, RadioProps, never>;
+export default Radio;

package/radio/radio.js

@@ -0,0 +1,74 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = exports.RadioControl = exports.RadioBase = exports.RadioInput = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importDefault(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var radioGenerator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
+var controlGenerator = styled_components_1.compose(styled_components_1.borders, styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
+exports.RadioInput = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
+exports.RadioBase = styled_components_2.default.label.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(radioGenerator.meta.props)
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t:hover .vui-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\ttransition: all 0s ease-in-out;\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('colors', p.controlHoverColor)(p); }, radioGenerator);
+exports.RadioControl = styled_components_2.default.span.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(controlGenerator.meta.props)
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), controlGenerator);
+exports.Radio = core_1.forwardRef(function (props, ref) {
+    var _a;
+    var _b = (_a = context_1.useRadioGroup()) !== null && _a !== void 0 ? _a : {}, groupOnChange = _b.onChange, groupValue = _b.value, radioGroupProps = __rest(_b, ["onChange", "value"]);
+    var mergedProps = __assign(__assign({}, radioGroupProps), props);
+    var _c = core_1.omitThemingProps(mergedProps), _d = _c.checked, checked = _d === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _d, children = _c.children, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, _e = _c.icon, iconProp = _e === void 0 ? 'cuiRadioUnselected' : _e, _f = _c.iconChecked, iconChecked = _f === void 0 ? 'cuiRadioSelected' : _f, inputProps = _c.inputProps, inputRef = _c.inputRef, label = _c.label, name = _c.name, onChange = _c.onChange, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
+    var styles = core_1.useStyleConfig('Radio', mergedProps);
+    var _g = styles.control, controlColor = _g.color, hoverColor = _g.hoverColor, controlStyles = __rest(_g, ["color", "hoverColor"]);
+    var icon = checked ? iconChecked : iconProp;
+    var controlMr = children || label ? 1 : 0;
+    var color = checked ? controlColor : 'grey.50';
+    var controlHoverColor = checked ? hoverColor : 'grey.90';
+    function handleOnChange(e) {
+        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: 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, 
+            // hoverColor={hoverColor}
+            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, name: name, required: required, value: value }, inputProps)),
+            react_1.default.createElement(icon_1.default, { h: "100%", icon: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-radioLabel" }, 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,23 @@
+import { HTMLAttributes } from 'react';
+import { IconProp } from '../icon';
+import { BackgroundColorProps, BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface RadioProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'>, RadioStyleProps, ThemingProps<'Radio'> {
+    checked?: boolean;
+    colorScheme?: 'blue' | 'prussian';
+    disabled?: boolean;
+    icon?: IconProp;
+    iconChecked?: IconProp;
+    inputProps?: HTMLAttributes<HTMLInputElement>;
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    label?: string;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    required?: boolean;
+    value?: number | string;
+}
+export interface RadioControlStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps {
+}
+export interface RadioStyleProps extends BackgroundColorProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
+    controlHoverColor?: string;
+}

package/radio/radio.types.js

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

package/radio/radioGroup.d.ts

@@ -0,0 +1,6 @@
+import { RadioGroupProps, RadioGroupStyleProps } from './radioGroup.types';
+export declare const RadioGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & RadioGroupStyleProps, never>;
+export declare const RadioGroup: import("styled-components").StyledComponent<"div", never, RadioGroupProps, never>;
+export default RadioGroup;

package/radio/radioGroup.js

@@ -0,0 +1,99 @@
+"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.RadioGroup = exports.RadioGroupBase = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importStar(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
+exports.RadioGroupBase = styled_components_2.default.div.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), generator);
+exports.RadioGroup = core_1.forwardRef(function (props, ref) {
+    var className = props.className, colorScheme = props.colorScheme, _a = props.defaultValue, defaultValue = _a === void 0 ? '' : _a, disabled = props.disabled, name = props.name, onChange = props.onChange, row = props.row, size = props.size, valueProp = props.value, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "name", "onChange", "row", "size", "value", "variant"]);
+    var isControlled = react_1.useRef(valueProp !== undefined).current;
+    var _b = __read(react_1.useState(defaultValue), 2), valueState = _b[0], setValueState = _b[1];
+    var value = isControlled ? valueProp : valueState;
+    var handleOnChange = react_1.useCallback(function (e) {
+        setValue(e.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [onChange]);
+    var setValue = react_1.useCallback(function (value) {
+        !isControlled && setValueState(value);
+    }, []);
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, name: name, onChange: handleOnChange, size: size, value: value, variant: variant }); }, [colorScheme, disabled, name, handleOnChange, size, value, variant]);
+    var aliasedProps = utils_1.filterUndefined({
+        flexDirection: row ? 'row' : undefined
+    });
+    return (react_1.default.createElement(context_1.RadioGroupProvider, { value: context },
+        react_1.default.createElement(exports.RadioGroupBase, __assign({ className: 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,13 @@
+import { HTMLAttributes } from 'react';
+import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, RadioGroupStyleProps, ThemingProps<'Radio'> {
+    colorScheme?: 'blue' | 'prussian';
+    disabled?: boolean;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    row?: boolean;
+    value?: number | string;
+}
+export interface RadioGroupStyleProps extends FlexboxesProps, SizingProps, SpaceProps {
+}

package/radio/radioGroup.types.js

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

package/radio/theme.d.ts

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

package/radio/theme.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantDefault(props) {
+    var c = props.colorScheme;
+    var controlStyles = {
+        color: c + ".80",
+        hoverColor: c + ".90"
+    };
+    return {
+        control: controlStyles
+    };
+}
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'default'
+};
+var parts = ['container', 'control', 'label'];
+var sizes = {
+    sm: {
+        control: {
+            h: 16,
+            w: 16
+        },
+        label: {
+            size: 'sm'
+        }
+    },
+    md: {
+        control: {
+            h: 20,
+            w: 20
+        },
+        label: {
+            lineHeight: 1.2,
+            size: 'md'
+        }
+    },
+    lg: {
+        control: {
+            h: 24,
+            w: 24
+        },
+        label: {
+            size: 'lg'
+        }
+    }
+};
+var variants = {
+    default: variantDefault
+};
+exports.default = {
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/skeleton/skeleton.d.ts

@@ -1,5 +1,5 @@
 import { SkeletonProps, SkeletonStyleProps } from './skeleton.types';
-export declare const BaseSkeleton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const SkeletonBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & SkeletonStyleProps, never>;
 export declare const Skeleton: import("styled-components").StyledComponent<"div", never, SkeletonProps, never>;

package/skeleton/skeleton.js

@@ -48,15 +48,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Skeleton = exports.BaseSkeleton = void 0;
+exports.Skeleton = exports.SkeletonBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importStar(require("styled-components"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borderRadius, styled_components_1.sizing, styled_components_1.space);
+var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borderRadius, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
 var pulse = styled_components_2.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"], ["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
-exports.BaseSkeleton = styled_components_2.default.div.withConfig({
+exports.SkeletonBase = styled_components_2.default.div.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"], ["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"])), pulse, generator);
 exports.Skeleton = core_1.forwardRef(function (props, ref) {
@@ -66,7 +66,7 @@ exports.Skeleton = core_1.forwardRef(function (props, ref) {
     var aliasedProps = utils_1.filterUndefined({
         w: props.variant === 'circle' ? styles.h : undefined
     });
-    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function (_, i) { return (react_1.default.createElement(exports.BaseSkeleton, __assign({ bg: "blue.20", className: utils_1.cs('vui-skeleton', className), key: i, ref: ref }, styles, aliasedProps, rest))); })));
+    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function (_, i) { return (react_1.default.createElement(exports.SkeletonBase, __assign({ bg: "blue.20", className: utils_1.cs('vui-skeleton', className), key: i, ref: ref }, styles, aliasedProps, rest))); })));
 });
 exports.Skeleton.displayName = 'Skeleton';
 exports.default = exports.Skeleton;

package/skeleton/skeleton.types.d.ts

@@ -1,9 +1,9 @@
 import { HTMLAttributes } from 'react';
-import { BackgroundColorProps, BorderRadiusProps, SizingProps, SpaceProps } from '../system';
+import { BackgroundColorProps, BorderRadiusProps, FlexboxesProps, SizingProps, SpaceProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, SkeletonStyleProps, ThemingProps<'Skeleton'> {
     colorScheme?: 'blue' | 'grey';
     repeat?: number;
 }
-export interface SkeletonStyleProps extends BackgroundColorProps, BorderRadiusProps, SizingProps, SpaceProps {
+export interface SkeletonStyleProps extends BackgroundColorProps, BorderRadiusProps, FlexboxesProps, SizingProps, SpaceProps {
 }

package/styles/animations.d.ts

@@ -5,3 +5,13 @@ export declare const fadeOut = "\n\tfrom { opacity: 1; }\n\tto { opacity: 0; }\n
 export declare const fadeRight = "\n\tfrom { opacity: 0; transform: translateX(-20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
 export declare const fadeUp = "\n\tfrom { opacity: 0; transform: translateY(20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
 export declare const spin = "\n\tfrom { transform: rotate(0deg); }\n\tto { transform: rotate(360deg); }\n";
+declare const _default: {
+    fadeDown: string;
+    fadeIn: string;
+    fadeLeft: string;
+    fadeOut: string;
+    fadeRight: string;
+    fadeUp: string;
+    spin: string;
+};
+export default _default;

package/styles/animations.js

@@ -8,3 +8,12 @@ exports.fadeOut = "\n\tfrom { opacity: 1; }\n\tto { opacity: 0; }\n";
 exports.fadeRight = "\n\tfrom { opacity: 0; transform: translateX(-20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
 exports.fadeUp = "\n\tfrom { opacity: 0; transform: translateY(20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
 exports.spin = "\n\tfrom { transform: rotate(0deg); }\n\tto { transform: rotate(360deg); }\n";
+exports.default = {
+    fadeDown: 'fadeDown 0.3s ease-in-out',
+    fadeIn: 'fadeIn 0.3s ease-in-out',
+    fadeLeft: 'fadeLeft 0.3s ease-in-out',
+    fadeOut: 'fadeOut 0.3s ease-in-out',
+    fadeRight: 'fadeRight 0.3s ease-in-out',
+    fadeUp: 'fadeUp 0.3s ease-in-out',
+    spin: 'spin 1s linear infinite'
+};