@veracity/vui 0.6.2 → 0.7.0-beta.0

package/esm/panel/panel.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Box from '../box';
+import { omitThemingProps, useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
+/**
+ * Displays static or partially interactive content, such as text, images or buttons.
+ * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.
+ */
+export const Panel = vui((props, ref) => {
+    const { className, ...rest } = omitThemingProps(props);
+    const styles = useStyleConfig('Panel', props);
+    return (React.createElement(Box, { bg: "white", borderRadius: "md", className: cs('vui-panel', className), p: 2, ref: ref, ...styles, ...rest }));
+});
+Panel.displayName = 'Panel';
+export default Panel;

package/esm/panel/panel.types.d.ts

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

package/esm/panel/panel.types.js

@@ -0,0 +1 @@
+export {};

package/esm/panel/theme.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        variant: string;
+    };
+    sizes: {};
+    variants: {
+        elevated: {
+            shadow: string;
+        };
+        outlined: {
+            border: number;
+            borderColor: string;
+        };
+    };
+};
+export default _default;

package/esm/panel/theme.js

@@ -0,0 +1,20 @@
+const baseStyle = {};
+const defaultProps = {
+    variant: 'elevated'
+};
+const sizes = {};
+const variants = {
+    elevated: {
+        shadow: '1'
+    },
+    outlined: {
+        border: 1,
+        borderColor: 'grey.40'
+    }
+};
+export default {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/esm/popover/consts.d.ts

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

package/esm/popover/consts.js

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

package/esm/popover/context.d.ts

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

package/esm/popover/context.js

@@ -0,0 +1,3 @@
+import { createContext } from '../utils';
+const [PopoverProvider, usePopoverContext] = createContext({ isOptional: true });
+export { PopoverProvider, usePopoverContext };

package/esm/popover/index.d.ts

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

package/esm/popover/index.js

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

package/esm/popover/popover.d.ts

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

package/esm/popover/popover.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { filterUndefined, runIfFn } from '../utils';
+import { PopoverProvider } from './context';
+import PopoverContent from './popoverContent';
+import PopoverTrigger from './popoverTrigger';
+import usePopover from './usePopover';
+/**
+ * Uses 'usePopover' hook to expose relevant data to its children parts.
+ * By default, renders provided content only when popover is opened (lazy).
+ */
+export default function Popover(props) {
+    const { children, isLazy = true, ...rest } = props;
+    const popoverProps = usePopover(rest);
+    const { close, isOpen, open } = popoverProps;
+    const context = filterUndefined({ isLazy, ...popoverProps });
+    return React.createElement(PopoverProvider, { value: context }, runIfFn(children, { close, isOpen, open }));
+}
+Popover.Content = PopoverContent;
+Popover.Trigger = PopoverTrigger;

package/esm/popover/popover.types.d.ts

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

package/esm/popover/popover.types.js

@@ -0,0 +1 @@
+export {};

package/esm/popover/popoverContent.d.ts

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

package/esm/popover/popoverContent.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Box from '../box';
+import { useStyleConfig, vui } from '../core';
+import { mergeRefs } from '../utils';
+import { usePopoverContext } from './context';
+/** Displays provided content in an overlaying wrapper. */
+export const PopoverContent = vui((props, ref) => {
+    const popoverProps = usePopoverContext() ?? {};
+    const { isLazy, isOpen, setPopper } = popoverProps;
+    const { children, ...rest } = props;
+    const styles = useStyleConfig('Popover', { ...popoverProps, ...props });
+    const shouldRenderChildren = isLazy ? isOpen : true;
+    return (
+    // Wrapping div prevents an error thrown when conditionally unmounting this component
+    React.createElement("div", null,
+        React.createElement(Box, { bg: "white", borderRadius: "md", boxShadow: "2", className: "vui-popoverContent", overflowY: "auto", ref: mergeRefs(setPopper, ref), ...styles.content, ...rest }, shouldRenderChildren ? children : null)));
+});
+PopoverContent.displayName = 'PopoverContent';
+export default PopoverContent;

package/esm/popover/popoverStyle.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default _default;

package/esm/popover/popoverStyle.js

@@ -0,0 +1,20 @@
+import { createGlobalStyle } from '../core';
+export default createGlobalStyle `
+	[data-tippy-root] {
+		max-width: calc(100vw - 10px);
+	}
+
+	.tippy-box {
+		position: relative;
+		transition-property: transform, visibility, opacity;
+	}
+
+	.tippy-box[data-animation=fade][data-state=hidden] {
+		opacity: 0;
+	}
+
+	.tippy-content {
+		position: relative;
+		z-index: 1;
+	}
+`;

package/esm/popover/popoverTrigger.d.ts

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

package/esm/popover/popoverTrigger.js

@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React from 'react';
+import { useStyleConfig, v, vui } from '../core';
+import { mergeRefs } from '../utils';
+import { usePopoverContext } from './context';
+/**
+ * Displays a trigger component to toggle display of the popover content.
+ * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
+ */
+export const PopoverTrigger = vui((props, ref) => {
+    const { setReference, ...popoverProps } = usePopoverContext() ?? {};
+    const styles = useStyleConfig('Popover', { ...popoverProps, ...props });
+    // @ts-ignore - TS incorrectly doesn't recognize 'as' prop
+    const { as: As, onClick: onClickProp, ...rest } = props;
+    const Element = As || v.button;
+    const onClick = (e) => {
+        // Avoids triggering parent's onClick, like when inside a ListItem
+        e.stopPropagation();
+        onClickProp?.(e);
+    };
+    return (React.createElement(Element, { className: "vui-popoverTrigger", onClick: onClick, ref: mergeRefs(setReference, ref), ...styles.trigger, ...rest }));
+});
+PopoverTrigger.displayName = 'PopoverTrigger';
+export default PopoverTrigger;

package/esm/popover/theme.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/esm/popover/theme.js

@@ -0,0 +1,12 @@
+const baseStyle = {};
+const defaultProps = {};
+const parts = ['content', 'trigger'];
+const sizes = {};
+const variants = {};
+export default {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};

package/esm/popover/usePopover.d.ts

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

package/esm/popover/usePopover.js

@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import tippy from 'tippy.js';
+import { useCallbackRef } from '../utils';
+import { closeOnEscPlugin, matchWidthModifier } from './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.
+ */
+export default function usePopover(props = {}) {
+    const { closeOnBlur = true, closeOnEsc = true, defaultIsOpen = false, 
+    // disablePortal,
+    isOpen: isOpenProp, matchWidth, offset, onClose: onCloseProp, onOpen: onOpenProp, options, placement = 'bottom-start', trigger = 'click' } = props;
+    const [isOpen, setIsOpen] = useState(isOpenProp ?? defaultIsOpen);
+    const [instance, setInstance] = useState(null);
+    const [reference, setReference] = useState(null);
+    const [popper, setPopper] = useState(null);
+    const close = useCallback(() => instance?.hide(), [instance]);
+    const onClose = useCallbackRef(onCloseProp);
+    const onOpen = useCallbackRef(onOpenProp);
+    const open = useCallback(() => instance?.show(), [instance]);
+    const isControlled = isOpenProp !== undefined;
+    const tippyOptions = useMemo(() => {
+        const { offset: optionsOffset, onHidden, onHide, onShow, plugins = [], popperOptions = {}, ...otherOptions } = options ?? {};
+        return {
+            arrow: false,
+            duration: [200, 150],
+            hideOnClick: !isControlled ? closeOnBlur : false,
+            interactive: true,
+            maxWidth: 'none',
+            offset: optionsOffset ?? offset ?? [0, 4],
+            onHidden: instance => {
+                setIsOpen(false);
+                onHidden?.(instance);
+            },
+            onHide: instance => {
+                onClose(instance);
+                onHide?.(instance);
+            },
+            onShow: instance => {
+                setIsOpen(true);
+                onOpen(instance);
+                onShow?.(instance);
+            },
+            placement,
+            plugins: [...(!isControlled && closeOnEsc ? [closeOnEscPlugin] : []), ...plugins],
+            popperOptions: {
+                ...popperOptions,
+                modifiers: [{ ...matchWidthModifier, enabled: !!matchWidth }, ...(popperOptions.modifiers ?? [])]
+            },
+            showOnCreate: defaultIsOpen,
+            trigger: !isControlled ? trigger : 'manual',
+            ...otherOptions
+        };
+    }, [closeOnBlur, closeOnEsc, offset, options, placement, trigger]);
+    // Create a new Tippy instance
+    useEffect(() => {
+        if (popper !== null && reference !== null) {
+            // Destroy old instance to ensure new options work
+            instance?.destroy();
+            const newInstance = tippy(reference, {
+                ...tippyOptions,
+                content: popper
+            });
+            setInstance(newInstance);
+        }
+    }, [popper, tippyOptions, trigger]);
+    // Handle showing/hiding popup in controlled mode
+    useEffect(() => {
+        if (isControlled) {
+            if (isOpenProp) {
+                instance?.show();
+            }
+            else {
+                instance?.hide();
+            }
+        }
+    }, [isOpenProp]);
+    return {
+        close,
+        instance,
+        isOpen,
+        open,
+        popper,
+        reference,
+        setPopper,
+        setReference
+    };
+}

package/esm/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/esm/popover/usePopover.types.js

@@ -0,0 +1 @@
+export {};

package/esm/portal/index.d.ts

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

package/esm/portal/index.js

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

package/esm/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/esm/portal/portal.js

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+/** Provided children are portaled to document.body or custom container. */
+export const Portal = props => {
+    const { children, containerRef, disablePortal } = props;
+    const [mountNode, setMountNode] = useState();
+    useEffect(() => {
+        if (!disablePortal) {
+            setMountNode(containerRef?.current ?? document.body);
+        }
+    }, [disablePortal]);
+    if (disablePortal)
+        return React.createElement(React.Fragment, null, children);
+    return mountNode ? createPortal(children, mountNode) : React.createElement(React.Fragment, null, mountNode);
+};
+export default Portal;

package/esm/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/esm/portal/portal.types.js

@@ -0,0 +1 @@
+export {};

package/esm/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/esm/radio/context.js

@@ -0,0 +1,3 @@
+import { createContext } from '../utils';
+const [RadioGroupProvider, useRadioGroup] = createContext({ isOptional: true });
+export { RadioGroupProvider, useRadioGroup };

package/esm/radio/index.d.ts

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

package/esm/radio/index.js

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

package/esm/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/esm/radio/radio.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import { omitThemingProps, styled, th, useStyleConfig, vui } from '../core';
+import Icon from '../icon';
+import T from '../t';
+import { cs, filterUndefined } from '../utils';
+import { useRadioGroup } from './context';
+const RadioControl = styled.spanBox `
+	border-radius: 50%;
+	display: inline-flex;
+	flex-shrink: 0;
+	position: relative;
+	transition-duration: fast;
+`;
+const RadioInput = styled.input `
+	cursor: inherit;
+	height: 100%;
+	left: 0;
+	margin: 0;
+	opacity: 0;
+	padding: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+	z-index: 1;
+`;
+export const RadioBase = styled.labelBox `
+	align-items: center;
+	cursor: pointer;
+	display: inline-flex;
+	width: fit-content;
+
+	&:not([aria-disabled='true']):hover .vui-radioControl {
+		color: ${p => th.color(p.controlHoverColor)};
+	}
+
+	&[aria-disabled='true'] {
+		color: disabled.color;
+		cursor: not-allowed;
+
+		.vui-radioControl {
+			color: disabled.color;
+		}
+	}
+`;
+/**
+ * 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 const Radio = vui((props, ref) => {
+    const { defaultValue: groupDefaultValue, isChecked: groupIsChecked, onChange: groupOnChange, value: groupValue, ...radioGroupProps } = useRadioGroup() ?? {};
+    const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined;
+    const mergedProps = { ...radioGroupProps, ...props };
+    const { checked = groupValue !== undefined ? props.value === groupValue : undefined, children, className, defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined, disabled, icon: iconProp = 'cuiRadioUnselected', iconChecked = 'cuiRadioSelected', id, inputProps, inputRef, label, name, onChange, required, value, ...rest } = omitThemingProps(mergedProps);
+    const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked);
+    const styles = useStyleConfig('Radio', mergedProps);
+    const { color: controlColor, hoverColor, ...controlStyles } = styles.control;
+    const icon = isChecked ? iconChecked : iconProp;
+    const controlMr = children || label ? 1 : 0;
+    const color = isChecked ? controlColor : 'grey.60';
+    const controlHoverColor = isChecked ? hoverColor : 'grey.90';
+    useEffect(() => {
+        if (groupIsChecked !== undefined) {
+            setIsChecked(groupIsChecked === value);
+        }
+        else if (checked !== undefined) {
+            setIsChecked(checked);
+        }
+    }, [checked, groupIsChecked]);
+    function handleOnChange(e) {
+        groupOnChange?.(e);
+        onChange?.(e);
+    }
+    const aliasedProps = filterUndefined({
+        'aria-disabled': disabled
+    });
+    return (React.createElement(RadioBase, { className: cs('vui-radio', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest },
+        React.createElement(RadioControl, { className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, ...controlStyles },
+            React.createElement(RadioInput, { className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),
+            React.createElement(Icon, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })),
+        children ??
+            (label && (React.createElement(T, { className: "vui-radioLabel", lineHeight: "normal", ...styles.label }, label)))));
+});
+Radio.displayName = 'Radio';
+export default Radio;