baseui 16.1.0 → 18.1.0

package/radio-v2/radiogroup.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _overrides = require("../helpers/overrides");
+var _styledComponents = require("./styled-components");
+var _focusVisible = require("../utils/focusVisible");
+var _constants = require("./constants");
+var _radioContext = require("./radio-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+const StatelessRadioGroup = props => {
+  const {
+    overrides = {},
+    name = '',
+    value = '',
+    disabled = false,
+    autoFocus = false,
+    labelPlacement = _constants.LABEL_PLACEMENT.right,
+    align = _constants.ALIGN.vertical,
+    error = false,
+    required = false,
+    onChange = () => {},
+    onMouseEnter = () => {},
+    onMouseLeave = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+    children,
+    id
+  } = props;
+  const [isFocusVisibleState, setIsFocusVisibleState] = React.useState(false);
+  const [focusedRadioIndex, setFocusedRadioIndex] = React.useState(-1);
+
+  // Registration counter for child radios
+  const radioIndexRef = React.useRef(0);
+
+  // Reset the registration counter before each render
+  React.useLayoutEffect(() => {
+    radioIndexRef.current = 0;
+  });
+  const registerRadio = React.useCallback(() => {
+    const index = radioIndexRef.current;
+    radioIndexRef.current += 1;
+    return index;
+  }, []);
+  const handleFocus = React.useCallback((event, index) => {
+    if ((0, _focusVisible.isFocusVisible)(event)) {
+      setIsFocusVisibleState(true);
+    }
+    setFocusedRadioIndex(index);
+    onFocus && onFocus(event);
+  }, [onFocus]);
+  const handleBlur = React.useCallback((event, index) => {
+    if (isFocusVisibleState !== false) {
+      setIsFocusVisibleState(false);
+    }
+    setFocusedRadioIndex(-1);
+    onBlur && onBlur(event);
+  }, [isFocusVisibleState, onBlur]);
+  const [RadioGroupRoot, radioGroupRootProps] = (0, _overrides.getOverrides)(overrides.RadioGroupRoot, _styledComponents.RadioGroupRoot);
+  const contextValue = React.useMemo(() => ({
+    name,
+    selectedValue: value,
+    disabled,
+    autoFocus,
+    error,
+    required,
+    align,
+    labelPlacement,
+    focusedIndex: focusedRadioIndex,
+    isFocusVisible: isFocusVisibleState,
+    onChange,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    registerRadio
+  }), [name, value, disabled, autoFocus, error, required, align, labelPlacement, focusedRadioIndex, isFocusVisibleState, onChange, onMouseEnter, onMouseLeave, handleFocus, handleBlur, registerRadio]);
+  return /*#__PURE__*/React.createElement(_radioContext.RadioGroupContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(RadioGroupRoot, _extends({
+    id: id,
+    role: "radiogroup",
+    "aria-describedby": props['aria-describedby'],
+    "aria-errormessage": props['aria-errormessage'],
+    "aria-invalid": error || null,
+    "aria-label": props['aria-label'],
+    "aria-labelledby": props['aria-labelledby'],
+    "aria-required": required || null,
+    $align: align,
+    $disabled: disabled,
+    $error: error,
+    $required: required,
+    $labelPlacement: labelPlacement
+  }, radioGroupRootProps), children));
+};
+StatelessRadioGroup.displayName = 'StatelessRadioGroup';
+var _default = exports.default = StatelessRadioGroup;

package/radio-v2/stateful-radiogroup-container.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { StatefulContainerProps } from './types';
+declare const StatefulRadioGroupContainer: React.FC<StatefulContainerProps>;
+export default StatefulRadioGroupContainer;

package/radio-v2/stateful-radiogroup-container.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _constants = require("./constants");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const defaultStateReducer = (type, nextState) => nextState;
+const StatefulRadioGroupContainer = props => {
+  const {
+    children = childProps => null,
+    initialState = {
+      value: ''
+    },
+    stateReducer = defaultStateReducer,
+    onChange = () => {},
+    ...restProps
+  } = props;
+  const reducer = React.useCallback((currentState, action) => {
+    const {
+      type,
+      event
+    } = action;
+
+    // Calculate next state based on action type
+    let nextState = currentState;
+    if (type === _constants.STATE_TYPE.change) {
+      nextState = {
+        value: event.target.value
+      };
+    }
+
+    // Allow user's stateReducer to intercept and modify the state change
+    return stateReducer(type, nextState, currentState, event);
+  }, [stateReducer]);
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+  const handleChange = React.useCallback(e => {
+    dispatch({
+      type: _constants.STATE_TYPE.change,
+      event: e
+    });
+    onChange(e);
+  }, [onChange]);
+  return children({
+    ...restProps,
+    value: state.value,
+    onChange: handleChange
+  });
+};
+var _default = exports.default = StatefulRadioGroupContainer;

package/radio-v2/stateful-radiogroup.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { RadioGroupProps, StatefulRadioGroupProps } from './types';
+declare const StatefulRadioGroup: (props: StatefulRadioGroupProps & Omit<RadioGroupProps, keyof StatefulRadioGroupProps>) => React.JSX.Element;
+export default StatefulRadioGroup;

package/radio-v2/stateful-radiogroup.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _statefulRadiogroupContainer = _interopRequireDefault(require("./stateful-radiogroup-container"));
+var _radiogroup = _interopRequireDefault(require("./radiogroup"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const StatefulRadioGroup = function (props) {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/React.createElement(_statefulRadiogroupContainer.default, restProps, childrenProps => /*#__PURE__*/React.createElement(_radiogroup.default, childrenProps, children));
+};
+var _default = exports.default = StatefulRadioGroup;

package/radio-v2/styled-components.d.ts

@@ -0,0 +1,10 @@
+import type { StyleProps } from './types';
+export declare const RadioGroupRoot: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const Root: import("styletron-react").StyletronComponent<"label", StyleProps>;
+export declare const RadioBackplate: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const RadioMarkInner: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const RadioMarkOuter: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const LabelWrapper: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const Label: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const Input: import("styletron-react").StyletronComponent<"input", {}>;
+export declare const Description: import("styletron-react").StyletronComponent<"div", StyleProps>;

package/radio-v2/styled-components.js

@@ -0,0 +1,266 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Root = exports.RadioMarkOuter = exports.RadioMarkInner = exports.RadioGroupRoot = exports.RadioBackplate = exports.LabelWrapper = exports.Label = exports.Input = exports.Description = void 0;
+var _styles = require("../styles");
+var _constants = require("./constants");
+var _getSharedStyles = require("../utils/get-shared-styles");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+function getOuterColor(props) {
+  const {
+    $theme: {
+      colors
+    },
+    $disabled,
+    $error
+  } = props;
+  return $disabled ? colors.contentStateDisabled : $error ? colors.tagRedBorderSecondarySelected : colors.contentPrimary;
+}
+function getLabelColor(props) {
+  const {
+    $disabled,
+    $theme
+  } = props;
+  const {
+    colors
+  } = $theme;
+  return $disabled ? colors.contentSecondary : colors.contentPrimary;
+}
+const RadioGroupRoot = exports.RadioGroupRoot = (0, _styles.styled)('div', props => {
+  const {
+    $align,
+    $labelPlacement
+  } = props;
+  return {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: $align === _constants.ALIGN.horizontal ? 'row' : 'column',
+    alignItems: $align === _constants.ALIGN.horizontal && $labelPlacement === _constants.LABEL_PLACEMENT.top ? 'flex-end' : 'flex-start',
+    columnGap: props.$theme.sizing.scale600,
+    rowGap: props.$theme.sizing.scale300
+  };
+});
+RadioGroupRoot.displayName = "RadioGroupRoot";
+RadioGroupRoot.displayName = 'RadioGroupRoot';
+const Root = exports.Root = (0, _styles.styled)('label', props => {
+  const {
+    $disabled,
+    $labelPlacement,
+    $theme
+  } = props;
+  const {
+    sizing
+  } = $theme;
+  const isHorizontalLabelPlacement = $labelPlacement === _constants.LABEL_PLACEMENT.left || $labelPlacement === _constants.LABEL_PLACEMENT.right;
+  const isVerticalLabelPlacement = $labelPlacement === _constants.LABEL_PLACEMENT.top || $labelPlacement === _constants.LABEL_PLACEMENT.bottom;
+  return {
+    flexDirection: isVerticalLabelPlacement ? 'column' : 'row',
+    display: 'inline-flex',
+    alignItems: isHorizontalLabelPlacement ? 'flex-start' : 'center',
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    ...(isVerticalLabelPlacement ? {
+      rowGap: sizing.scale100
+    } : isHorizontalLabelPlacement ? {
+      columnGap: sizing.scale100
+    } : {}),
+    '@media (pointer: coarse)': {
+      // Increase target size for touch devices to meet the minimum touch target size of 48x48dp
+      padding: sizing.scale300
+    }
+  };
+});
+Root.displayName = "Root";
+Root.displayName = 'Root';
+const RadioBackplate = exports.RadioBackplate = (0, _styles.styled)('div', props => {
+  const {
+    sizing
+  } = props.$theme;
+  const {
+    hoveredColor,
+    pressedColor
+  } = (0, _getSharedStyles.getOverlayColor)(props);
+  return {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    borderRadius: sizing.scale300,
+    paddingTop: sizing.scale300,
+    paddingBottom: sizing.scale300,
+    paddingLeft: sizing.scale300,
+    paddingRight: sizing.scale300,
+    '@media (hover: hover)': {
+      ':hover': {
+        backgroundColor: hoveredColor
+      }
+    },
+    ':active': {
+      backgroundColor: pressedColor
+    },
+    minHeight: sizing.scale900,
+    minWidth: sizing.scale900
+  };
+});
+RadioBackplate.displayName = "RadioBackplate";
+RadioBackplate.displayName = 'RadioBackplate';
+const RadioMarkInner = exports.RadioMarkInner = (0, _styles.styled)('div', props => {
+  const {
+    $theme,
+    $checked,
+    $isActive,
+    $isHovered,
+    $disabled
+  } = props;
+  const {
+    animation,
+    colors
+  } = $theme;
+  const {
+    hoveredColor,
+    pressedColor
+  } = (0, _getSharedStyles.getOverlayColor)(props);
+  return {
+    borderTopLeftRadius: '50%',
+    borderTopRightRadius: '50%',
+    borderBottomRightRadius: '50%',
+    borderBottomLeftRadius: '50%',
+    height: $checked ? '5px' : '100%',
+    width: $checked ? '5px' : '100%',
+    backgroundColor: colors.contentInversePrimary,
+    // Add overlay for hover and pressed states with box-shadow (instead of background-color) to prevent RadioMarkOuter's background color bleeding through
+    // We also want this visual effect when hovering/pressing on backplate so using $isActive, $isHovered instead of css selectors.
+    boxShadow: !$disabled ? $isHovered ? `inset 999px 999px 0px ${hoveredColor}` : $isActive ? `inset 999px 999px 0px ${pressedColor}` : 'none' : 'none',
+    // Animations for height and width changes - transition when checking/unchecking radio
+    transitionProperty: 'width, height',
+    transitionDuration: animation.timing200,
+    transitionTimingFunction: animation.easeOutCurve
+  };
+});
+RadioMarkInner.displayName = "RadioMarkInner";
+RadioMarkInner.displayName = 'RadioMarkInner';
+const RadioMarkOuter = exports.RadioMarkOuter = (0, _styles.styled)('div', props => {
+  const {
+    $theme,
+    $checked,
+    $isFocusVisible
+  } = props;
+  const {
+    sizing
+  } = $theme;
+  const focusRingStyle = (0, _getSharedStyles.getFocusOutlineStyle)($theme);
+  return {
+    display: 'flex',
+    height: '17px',
+    width: '17px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    boxSizing: 'border-box',
+    borderWidth: sizing.scale0,
+    borderStyle: 'solid',
+    borderColor: getOuterColor(props),
+    backgroundColor: getOuterColor(props),
+    borderTopLeftRadius: '50%',
+    borderTopRightRadius: '50%',
+    borderBottomRightRadius: '50%',
+    borderBottomLeftRadius: '50%',
+    verticalAlign: 'middle',
+    ...($checked && $isFocusVisible ? focusRingStyle : {})
+  };
+});
+RadioMarkOuter.displayName = "RadioMarkOuter";
+RadioMarkOuter.displayName = 'RadioMarkOuter';
+const LabelWrapper = exports.LabelWrapper = (0, _styles.styled)('div', props => {
+  const {
+    $labelPlacement,
+    $theme,
+    $align
+  } = props;
+  const {
+    sizing
+  } = $theme;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    // don't stretch label and description(for example, when label is a select component)
+    ...($labelPlacement === _constants.LABEL_PLACEMENT.left || $labelPlacement === _constants.LABEL_PLACEMENT.right ? {
+      paddingTop: sizing.scale300
+    } : {}),
+    // add top padding when label is on left/right to align with radio center
+    rowGap: sizing.scale0,
+    //Horizontal: Not recommended when the text needs to wrap. If necessary, let the text wrap to 3 lines maximum and truncate.
+    ...($align === _constants.ALIGN.horizontal ? {
+      maxWidth: '240px'
+    } : {})
+  };
+});
+LabelWrapper.displayName = "LabelWrapper";
+LabelWrapper.displayName = 'LabelWrapper';
+
+// This style is design from horizontal alignment
+// Not recommended when the text needs to wrap. If necessary, let the text wrap to 3 lines maximum and truncate.
+const max3LinesStyle = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitLineClamp: 3,
+  WebkitBoxOrient: 'vertical'
+};
+const Label = exports.Label = (0, _styles.styled)('div', props => {
+  const {
+    $theme: {
+      typography
+    },
+    $align
+  } = props;
+  return {
+    verticalAlign: 'middle',
+    color: getLabelColor(props),
+    ...typography.LabelSmall,
+    ...($align === _constants.ALIGN.horizontal ? max3LinesStyle : {})
+  };
+});
+Label.displayName = "Label";
+Label.displayName = 'Label';
+
+// tricky style for focus event cause display: none doesn't work
+const Input = exports.Input = (0, _styles.styled)('input', {
+  width: 0,
+  height: 0,
+  marginTop: 0,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  clip: 'rect(0 0 0 0)',
+  position: 'absolute'
+});
+Input.displayName = "Input";
+Input.displayName = 'Input';
+const Description = exports.Description = (0, _styles.styled)('div', props => {
+  const {
+    $theme,
+    $align
+  } = props;
+  return {
+    ...$theme.typography.ParagraphSmall,
+    color: $theme.colors.contentSecondary,
+    cursor: 'auto',
+    ...($align === _constants.ALIGN.horizontal ? max3LinesStyle : {})
+  };
+});
+Description.displayName = "Description";
+Description.displayName = 'Description';

package/radio-v2/types.d.ts

@@ -0,0 +1,185 @@
+import type * as React from 'react';
+import type { Override } from '../helpers/overrides';
+import type { ALIGN, LABEL_PLACEMENT } from './constants';
+export type LabelPlacement = keyof typeof LABEL_PLACEMENT;
+export type Align = keyof typeof ALIGN;
+export type RadioOverrides = {
+    RadioBackplate?: Override;
+    RadioMarkInner?: Override;
+    RadioMarkOuter?: Override;
+    Label?: Override;
+    LabelWrapper?: Override;
+    Root?: Override;
+    Input?: Override;
+    Description?: Override;
+};
+export type RadioGroupOverrides = {
+    RadioGroupRoot?: Override;
+};
+export type DefaultProps = Partial<RadioGroupProps>;
+export type RadioGroupProps = {
+    /** Id of element which contains a related caption */
+    'aria-describedby'?: string;
+    /** Id of element which contains a related error message */
+    'aria-errormessage'?: string;
+    /**
+     * Used to define a string that labels the radio group. Use this prop if the label is not
+     * visible on screen. If the label is visible, use the 'aria-labeledby' prop instead.
+     */
+    'aria-label'?: string;
+    /**
+     * Establishes a relationship between the radio group and its label. Screen readers use this
+     * attribute to catalog the object on a page so that users can navigate between them.
+     */
+    'aria-labelledby'?: string;
+    overrides?: RadioGroupOverrides;
+    /** As `children` in React native approach represents radio buttons inside of Radio Group. Can use `Radio` from this package. */
+    children?: Array<React.ReactNode>;
+    /** The value of radio button, which is preselected. */
+    value?: string;
+    /** Disabled all radio group from being changed. To disable some of radios provide disabled flag in each of them. */
+    disabled?: boolean;
+    /** Set if the control is required to be checked. */
+    required?: boolean;
+    /** Sets radio group into error state. */
+    error?: boolean;
+    /** Set to be focused (active) on selected\checked radio. */
+    autoFocus?: boolean;
+    /** How to position radio buttons in the group. */
+    align?: Align;
+    /** String value for the name of RadioGroup, it is used to group buttons. If missed default is random ID string. */
+    name?: string;
+    /** How to position the label relative to the radio itself. */
+    labelPlacement?: LabelPlacement;
+    /** Unique id for RadioGroup, help ARIA to identify element */
+    id?: string;
+    /** Handler for change events on trigger element. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseenter events on trigger element. */
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseleave events on trigger element. */
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for focus events on trigger element. */
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for blur events on trigger element. */
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+};
+export type State = {
+    value?: string;
+};
+export type RadioProps = {
+    /** Id of element which contains a related caption */
+    'aria-describedby'?: string;
+    /** Id of element which contains a related error message */
+    'aria-errormessage'?: string;
+    /**
+     * Used to define a string that labels the radio. Use this prop if the label is not
+     * visible on screen. If the label is visible, use the 'aria-labeledby' prop instead.
+     */
+    'aria-label'?: string;
+    /**
+     * Establishes a relationship between the radio and its label. Screen readers use this
+     * attribute to catalog the object on a page so that users can navigate between them.
+     */
+    'aria-labelledby'?: string;
+    /** Focus the radio on initial render. */
+    autoFocus?: boolean;
+    /** How the radio will be displayed along with its description. Controls spacing */
+    align?: Align;
+    /** Check or uncheck the control. */
+    checked?: boolean;
+    /** Label of radio. */
+    children?: React.ReactNode;
+    /** Indicates if this radio children contain an interactive element (prevents the label from moving focus from the child element to the radio button) */
+    containsInteractiveElement?: boolean;
+    /** Add more detail about a radio element. */
+    description?: string;
+    /** Disable the checkbox from being changed. */
+    disabled?: boolean;
+    /** Used to get a ref to the input element. Useful for programmatically focusing the input */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /** Renders checkbox in errored state. */
+    error?: boolean;
+    /** Is radio focused / active? */
+    isFocused?: boolean;
+    /** Is parent RadioGroup focused by keyboard? */
+    isFocusVisible?: boolean;
+    /** How to position the label relative to the checkbox itself. */
+    labelPlacement?: LabelPlacement;
+    /** Passed to the input element name attribute */
+    name?: string;
+    /** handler for blur events on trigger element. */
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for change events on trigger element. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** handler for focus events on trigger element. */
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseenter events on trigger element. */
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseleave events on trigger element. */
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mousedown events on trigger element. */
+    onMouseDown?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseup events on trigger element. */
+    onMouseUp?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    overrides?: RadioOverrides;
+    /** Marks the checkbox as required. */
+    required?: boolean;
+    /** Passed to the input element value attribute */
+    value?: string;
+    /** Passed to the input element, typically managed by RadioGroup */
+    tabIndex?: string;
+};
+export type RadioState = {
+    isActive: boolean;
+    isHovered: boolean;
+};
+export type StateReducer = (stateType: string, nextState: State, currentState: State, event: React.ChangeEvent<HTMLInputElement>) => State;
+export type StatelessState = {
+    isFocusVisible: boolean;
+    focusedRadioIndex: number;
+};
+export type DefaultStatefulProps = {
+    initialState: State;
+    children?: (props: RadioGroupProps) => React.ReactNode;
+    stateReducer: StateReducer;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+};
+export type StatefulContainerProps = {
+    overrides?: RadioGroupOverrides;
+    /** Should return `RadioGroup` instance with standard or customized inner elements. */
+    children?: (props: RadioGroupProps) => React.ReactNode;
+    /** Initial state populated into the component */
+    initialState?: State;
+    /** Reducer function to manipulate internal state updates. */
+    stateReducer?: StateReducer;
+    /** Handler for change events on trigger element. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Set to be focused (active) on selected\checked radio. */
+    autoFocus?: boolean;
+};
+export type StatefulRadioGroupProps = {
+    overrides?: RadioGroupOverrides;
+    /** A list of `Radio` components. */
+    children?: Array<React.ReactNode>;
+    /** Initial state populated into the component */
+    initialState?: State;
+    /** Set to be focused (active) on selected\checked radio. */
+    autoFocus?: boolean;
+    /** Handler for change events on trigger element. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+};
+export type StyleProps = {
+    $align?: Align;
+    $checked: boolean;
+    $disabled: boolean;
+    $hasDescription: boolean;
+    $isActive: boolean;
+    $error: boolean;
+    $isFocused: boolean;
+    $isFocusVisible: boolean;
+    $isHovered: boolean;
+    $labelPlacement: LabelPlacement;
+    $required: boolean;
+    $value: string;
+};

package/radio-v2/types.js

@@ -0,0 +1 @@
+"use strict";