@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/lib/components/tab/Tabs.js

@@ -0,0 +1,229 @@
+import classNames from "classnames";
+import React, { forwardRef, isValidElement, useEffect, useRef, useState } from "react";
+import useForkRef from "../../helper/useForkRef.js";
+import useTabScroll from "./useTabScroll.js";
+import IconWrapper from "../icon-wrapper/IconWrapper.js"; // legacy: recommended for desktop only applications
+// responsive: desktop, tablet, mobile with scrollable tabs
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+let nextId = 0;
+const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    config,
+    children,
+    className,
+    onChange,
+    viewType = "responsive",
+    showDivider = false,
+    ...props
+  } = _ref;
+  const [useCompactDensity, setCompactDensity] = useState(true);
+  const componentId = useRef(`tabs-${++nextId}`);
+  const elRef = useRef(null);
+  const combinedRef = useForkRef(ref, elRef);
+  const scrollContent = useRef(null);
+  const scrollArea = useRef(null);
+  const observer = useRef(null);
+  let activeId = "";
+  React.Children.forEach(children, (element, i) => {
+    if (/*#__PURE__*/React.isValidElement(element)) {
+      if (activeId === "") {
+        activeId = `${componentId.current}-tab-panel-${i}`;
+      } else if (element.props.active) {
+        activeId = `${componentId.current}-tab-panel-${i}`;
+      }
+    }
+  });
+  const [currentId, setId] = useState(activeId);
+  const innerChildren = React.Children.map(children, (element, i) => {
+    if (/*#__PURE__*/isValidElement(element)) {
+      const newId = `${componentId.current}-tab-panel-${i}`;
+      return /*#__PURE__*/React.cloneElement(element, {
+        isVisible: newId === currentId,
+        active: newId === currentId,
+        id: newId,
+        tabId: `${componentId.current}-tab-${i}`,
+        ...element.props
+      });
+    }
+    return undefined;
+  });
+  const [handleTabScroll, classes, style] = useTabScroll(innerChildren?.length ?? 0, componentId.current, {
+    elRef,
+    scrollContent,
+    scrollArea
+  });
+  useEffect(() => {
+    const {
+      current
+    } = scrollArea;
+    if (current) {
+      const initialWidth = current.offsetWidth;
+      if (initialWidth > 768) {
+        setCompactDensity(false);
+      }
+      observer.current = new ResizeObserver(() => {
+        const width = current.offsetWidth;
+        if (width > 768 && useCompactDensity) {
+          setCompactDensity(false);
+        } else if (width <= 768 && !useCompactDensity) {
+          setCompactDensity(true);
+        }
+      });
+      if (current) {
+        observer.current.observe(current);
+      }
+    }
+    return () => {
+      if (current && observer && observer.current) {
+        observer.current.unobserve(current);
+      }
+    };
+  }, [useCompactDensity]);
+  const showTabPane = id => {
+    if (id === undefined || id === null) {
+      return;
+    }
+    if (onChange) {
+      onChange({
+        previous: currentId,
+        current: id
+      });
+    }
+    setId(id);
+  };
+  function handleClick(e, index, id) {
+    handleTabScroll(e, index);
+    if (id !== undefined) {
+      showTabPane(id);
+    }
+  }
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    _jsx(_Fragment, {
+      children: viewType === "legacy" ? /*#__PURE__*/_jsxs("div", {
+        className: classNames("fwe-legacy-tabs", className),
+        children: [/*#__PURE__*/_jsx("ul", {
+          role: "tablist",
+          className: classNames("fwe-legacy-tab-bar", {
+            "fwe-legacy-tab-bar-full-width": config?.tabBar?.fullWidth
+          }, {
+            "fwe-legacy-tab-items-equal-width": config?.tabItems?.appearance === "equal"
+          }, {
+            "fwe-legacy-tab-items-fill": config?.tabItems?.appearance === "fill"
+          }),
+          children: innerChildren && innerChildren.map((child, i) => {
+            const {
+              active,
+              icon,
+              name,
+              id,
+              tabId
+            } = child.props;
+            return (
+              /*#__PURE__*/
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+              _jsx("li", {
+                className: classNames("fwe-legacy-tab-item", {
+                  "fwe-active": active
+                }),
+                onClick: () => showTabPane(id),
+                children: icon ?
+                /*#__PURE__*/
+                // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                _jsxs("a", {
+                  id: tabId,
+                  className: classNames("fwe-legacy-tab-link", {
+                    "fwe-can-swap-icon": innerChildren.length === 2 && i === 1
+                  }),
+                  role: "tab",
+                  "aria-controls": id,
+                  "aria-selected": active,
+                  children: [/*#__PURE__*/_jsx(IconWrapper, {
+                    icon: icon
+                  }), /*#__PURE__*/_jsx("span", {
+                    children: name
+                  })]
+                }) :
+                /*#__PURE__*/
+                // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                _jsx("a", {
+                  id: tabId,
+                  className: "fwe-legacy-tab-link",
+                  role: "tab",
+                  "aria-controls": id,
+                  "aria-selected": active,
+                  children: name
+                })
+              }, tabId)
+            );
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "fwe-legacy-tab-panel-content",
+          children: innerChildren
+        })]
+      }) : /*#__PURE__*/_jsxs("div", {
+        className: "fr-tab-bar",
+        role: "tablist",
+        ref: combinedRef,
+        ...props,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classNames("fr-tab-scroller", classes),
+          children: /*#__PURE__*/_jsx("div", {
+            className: classNames("fr-tab-scroller-scroll-area fr-tab-scroller-scroll-area--scroll", {
+              "fr-tab-scroller-scroll-area--compact": useCompactDensity
+            }),
+            ref: scrollArea,
+            children: /*#__PURE__*/_jsxs("div", {
+              className: classNames("fr-tab-scroller-scroll-content", {
+                "fr-tab-scroller-scroll-content--with-divider": showDivider
+              }),
+              ref: scrollContent,
+              style: style,
+              children: [innerChildren && innerChildren.map((child, i) => {
+                const {
+                  active,
+                  name,
+                  id,
+                  tabId
+                } = child.props;
+                return /*#__PURE__*/_jsxs("button", {
+                  type: "button",
+                  role: "tab",
+                  className: classNames("fr-tab", {
+                    "fr-tab--active": active
+                  }),
+                  id: tabId,
+                  "aria-controls": id,
+                  "aria-selected": active,
+                  tabIndex: i === 0 ? 0 : 1,
+                  onClick: e => handleClick(e, i, id),
+                  children: [/*#__PURE__*/_jsx("span", {
+                    className: "fr-tab-content",
+                    children: /*#__PURE__*/_jsx("span", {
+                      className: "fr-tab-text-label",
+                      children: name
+                    })
+                  }), /*#__PURE__*/_jsx("span", {
+                    className: classNames("fr-tab-indicator", {
+                      "fr-tab-indicator--active": active
+                    }),
+                    children: /*#__PURE__*/_jsx("span", {
+                      className: "fr-tab-indicator-content fr-tab-indicator-content--underline"
+                    })
+                  })]
+                }, tabId);
+              }), /*#__PURE__*/_jsx("div", {
+                className: "fr-tab-scroller-divider-line"
+              })]
+            })
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "fr-tab-panel-content",
+          children: innerChildren
+        })]
+      })
+    })
+  );
+});
+export default Tabs;

package/lib/components/tab/interfaces.js

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

package/lib/components/tab/tab-pane/TabPane.d.ts

@@ -0,0 +1,10 @@
+import { ClassNamePropsWithChildren } from "../../../helper/types";
+import { Tab } from "../interfaces";
+import "./TabPane.scss";
+export interface TabPaneProps extends ClassNamePropsWithChildren, Tab {
+    id?: string;
+    isVisible?: boolean;
+    tabId?: string;
+}
+declare function TabPane({ isVisible, children, className, tabId, id }: TabPaneProps): import("react/jsx-runtime").JSX.Element;
+export default TabPane;

package/lib/components/tab/tab-pane/TabPane.js

@@ -0,0 +1,23 @@
+import classNames from "classnames";
+import { jsx as _jsx } from "react/jsx-runtime";
+function TabPane(_ref) {
+  let {
+    isVisible = false,
+    children,
+    className,
+    tabId,
+    id
+  } = _ref;
+  const tabPaneClasses = classNames({
+    "fr-show": isVisible
+  }, {
+    "fr-hide": !isVisible
+  }, className);
+  return /*#__PURE__*/_jsx("div", {
+    id: id,
+    "aria-labelledby": tabId,
+    className: tabPaneClasses,
+    children: children
+  });
+}
+export default TabPane;

package/{dist → lib}/components/tab/useTabScroll.d.ts

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { type CSSProperties } from 'react';
+import React, { CSSProperties } from "react";
 export interface TabDimensions {
     rootLeft: number;
     rootRight: number;
@@ -21,5 +20,5 @@ interface Refs {
     scrollArea: React.MutableRefObject<HTMLDivElement | null>;
 }
 type TypeUseTabScroll = (tabLength: number, componentId: string, refs: Refs) => [TypeHandleTabScroll, string, CSSProperties];
-export declare const useTabScroll: TypeUseTabScroll;
-export {};
+declare const useTabScroll: TypeUseTabScroll;
+export default useTabScroll;

package/lib/components/tab/useTabScroll.js

@@ -0,0 +1,233 @@
+import { useState } from "react";
+
+// provides details about the left and right edges of the tab element and the tab content element
+// these values are used to determine the visual position of the tab with respect of its parent container
+
+const useTabScroll = (tabLength, componentId, refs) => {
+  const {
+    elRef,
+    scrollContent,
+    scrollArea
+  } = refs;
+  const [style, setStyle] = useState({});
+  const [classes, setClasses] = useState("");
+  function getScrollContentStyleValue(propName) {
+    return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : "";
+  }
+  function calculateCurrentTranslateX() {
+    const transformValue = getScrollContentStyleValue("transform");
+    if (transformValue === "none") {
+      return 0;
+    }
+
+    // the transform value is in form of 'matrix(a, b, c, d, tx, ty)'
+    // get all the parenthesized values
+    const match = /\((.+?)\)/.exec(transformValue);
+    if (!match) {
+      return 0;
+    }
+    const matrixParams = match[1];
+    // we need value of tx -> translateX
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [a, b, c, d, tx, ty] = matrixParams.split(",");
+    return parseFloat(tx);
+  }
+  function getScrollPosition() {
+    const currentTranslateX = calculateCurrentTranslateX();
+    const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
+    return scrollLeft - currentTranslateX;
+  }
+  function calculateScrollEdges() {
+    const scrollContentWidth = scrollContent.current?.offsetWidth ?? 0;
+    const scrollAreaWidth = scrollArea.current?.offsetWidth ?? 0;
+    return {
+      left: 0,
+      right: scrollContentWidth - scrollAreaWidth
+    };
+  }
+  function clampScrollValue(scrollX) {
+    const edges = calculateScrollEdges();
+    return Math.min(Math.max(edges.left, scrollX), edges.right);
+  }
+  function getIncrementScrollOperation(scrollX) {
+    const currentScrollX = getScrollPosition();
+    const targetScrollX = scrollX + currentScrollX;
+    const safeScrollX = clampScrollValue(targetScrollX);
+    const scrollDelta = safeScrollX - currentScrollX;
+    return {
+      finalScrollPosition: safeScrollX,
+      scrollDelta
+    };
+  }
+  function getAnimatingScrollPosition() {
+    const currentTranslateX = calculateCurrentTranslateX();
+    const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
+    return scrollLeft - currentTranslateX;
+  }
+  function stopScrollAnimation() {
+    const currentScrollPosition = getAnimatingScrollPosition();
+    setClasses("");
+    setStyle({
+      transform: "translateX(0px)"
+    });
+    if (scrollArea.current) {
+      scrollArea.current.scrollLeft = currentScrollPosition;
+    }
+  }
+  function animate(animation) {
+    // no animation needed
+    if (animation.scrollDelta === 0) {
+      return;
+    }
+    stopScrollAnimation();
+
+    // this animation uses the flip approach
+    // https://aerotwist.com/blog/flip-your-animations/
+    // https://css-tricks.com/animating-layouts-with-the-flip-technique/
+    if (scrollArea.current) {
+      scrollArea.current.scrollLeft = animation.finalScrollPosition;
+    }
+    setStyle({
+      transform: `translateX(${animation.scrollDelta}px)`
+    });
+    // force repaint
+    if (scrollArea.current) {
+      scrollArea.current.getBoundingClientRect();
+    }
+    requestAnimationFrame(() => {
+      setClasses("fr-tab-scroller--animating");
+      setStyle({
+        transform: "none"
+      });
+    });
+  }
+  function incrementScroll(scrollXIncrement) {
+    // no scroll needed
+    if (scrollXIncrement === 0) {
+      return;
+    }
+    const scrollOperation = getIncrementScrollOperation(scrollXIncrement);
+    animate(scrollOperation);
+  }
+  function computeDimensions(tab) {
+    const rootWidth = tab.offsetWidth;
+    const rootLeft = tab.offsetLeft;
+    const tabContent = tab.querySelector(".fr-tab-content");
+    const contentWidth = tabContent?.offsetWidth ?? 0;
+    const contentLeft = tabContent?.offsetLeft ?? 0;
+    return {
+      contentLeft: rootLeft + contentLeft,
+      contentRight: rootLeft + contentLeft + contentWidth,
+      rootLeft,
+      rootRight: rootLeft + rootWidth
+    };
+  }
+  function calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
+    const nextTab = elRef.current?.querySelector(`#${componentId}-tab-${nextIndex}`);
+    if (nextTab === null || nextTab === undefined) {
+      return 0;
+    }
+    const nextTabDimensions = computeDimensions(nextTab);
+    const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
+    const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
+    const leftIncrement = relativeContentRight - 48;
+    const rightIncrement = relativeContentLeft + 48;
+    if (nextIndex < index) {
+      return Math.min(leftIncrement, 0);
+    }
+    return Math.max(rightIncrement, 0);
+  }
+  function findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
+    /**
+     * tabs are laid out in the tab scroller like this:
+     *
+     *    scroll position
+     *    +---+
+     *    |   |   bar width
+     *    |   +-----------------------------------+
+     *    |   |                                   |
+     *    |   v                                   v
+     *    |   +-----------------------------------+
+     *    v   |             tab scroller          |
+     *    +------------+--------------+-------------------+
+     *    |    tab     |      tab     |        tab        |
+     *    +------------+--------------+-------------------+
+     *        |                                   |
+     *        +-----------------------------------+
+     *
+     * to determine the next adjacent index, we look at the tab root left and
+     * tab root right, both relative to the scroll position. if the tab root
+     * left is less than 0, then we know it's out of view to the left. if the
+     * tab root right minus the bar width is greater than 0, we know the tab is
+     * out of view to the right. from there, we either increment or decrement
+     * the index.
+     */
+    const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
+    const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
+    const relativeRootDelta = relativeRootLeft + relativeRootRight;
+    const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
+    const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
+    if (leftEdgeIsCloser) {
+      return index - 1;
+    }
+    if (rightEdgeIsCloser) {
+      return index + 1;
+    }
+    return -1;
+  }
+  function indexIsInRange(index) {
+    return index >= 0 && index < tabLength;
+  }
+  function scrollIntoView(index, tab) {
+    const scrollPosition = getScrollPosition();
+    const barWidth = scrollArea.current?.offsetWidth ?? 0;
+    const tabDimensions = computeDimensions(tab);
+    const nextIndex = findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
+    if (!indexIsInRange(nextIndex)) {
+      return;
+    }
+    const scrollIncrement = calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
+    incrementScroll(scrollIncrement);
+  }
+  function scrollTo(scrollX) {
+    const currentScrollX = getScrollPosition();
+    const safeScrollX = clampScrollValue(scrollX);
+    const scrollDelta = safeScrollX - currentScrollX;
+    animate({
+      finalScrollPosition: safeScrollX,
+      scrollDelta
+    });
+  }
+  function handleTabScroll(e, index) {
+    const scrollContentWidth = scrollContent.current?.offsetWidth ?? 0;
+    const scrollAreaWidth = scrollArea.current?.offsetWidth ?? 0;
+
+    // check if no scroll is needed
+    if (scrollAreaWidth > scrollContentWidth) {
+      return;
+    }
+
+    // check index
+    if (!indexIsInRange(index)) {
+      return;
+    }
+
+    // always scroll to 0 if scrolling to the first tab
+    if (index === 0) {
+      scrollTo(0);
+      return;
+    }
+
+    // always scroll to the max value if scrolling to the last tab
+    if (index === tabLength - 1 && scrollContent.current) {
+      scrollTo(scrollContent.current.offsetWidth);
+      return;
+    }
+    if (e.currentTarget instanceof HTMLElement) {
+      const currentTab = e.currentTarget;
+      scrollIntoView(index, currentTab);
+    }
+  }
+  return [handleTabScroll, classes, style];
+};
+export default useTabScroll;

package/lib/components/table-header-cell/TableHeaderCell.d.ts

@@ -0,0 +1,6 @@
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    active?: boolean;
+    ascending: boolean;
+}
+declare const TableHeaderCell: (props: TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default TableHeaderCell;

package/lib/components/table-header-cell/TableHeaderCell.js

@@ -0,0 +1,29 @@
+import classNames from "classnames";
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    active,
+    ascending,
+    className,
+    ...props
+  } = _ref;
+  function handleClick(event) {
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  }
+  return /*#__PURE__*/_jsx("th", {
+    ...props,
+    className: classNames("fwe-table-order", {
+      "fwe-active": active
+    }, {
+      "fwe-table-order-ascending": active && ascending
+    }, {
+      "fwe-table-order-descending": active && !ascending
+    }, className),
+    onClick: handleClick,
+    ref: ref
+  });
+});
+export default TableHeaderCell;

package/lib/forms/checkbox/Checkbox.d.ts

@@ -0,0 +1,17 @@
+import "./Checkbox.scss";
+import React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    id?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (value: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
+    large?: boolean;
+    valid?: boolean;
+    labelPosition?: "before" | "after" | "below";
+    required?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+}
+declare function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default Checkbox;

package/lib/forms/checkbox/Checkbox.js

@@ -0,0 +1,86 @@
+import classNames from "classnames";
+import React from "react";
+import useControlled from "../../helper/useControlled.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Checkbox(_ref) {
+  let {
+    id,
+    checked: checkedProp,
+    defaultChecked,
+    onChange,
+    name,
+    large = false,
+    valid = true,
+    labelPosition = "after",
+    required,
+    disabled = false,
+    indeterminate = false,
+    children,
+    className,
+    ...props
+  } = _ref;
+  const [isChecked, setChecked] = useControlled({
+    controlled: checkedProp,
+    default: defaultChecked
+  });
+  const handleChange = e => {
+    const newChecked = !isChecked;
+    setChecked(newChecked);
+    onChange?.(newChecked, e);
+  };
+  const containerClasses = classNames("fwe-checkbox-container", {
+    "fr-checkbox-large": large
+  }, {
+    "fr-checkbox-invalid": !valid || required
+  }, {
+    "fwe-disabled": disabled
+  }, {
+    "fwe-checked": isChecked
+  }, {
+    "fwe-label-below": labelPosition === "below"
+  }, {
+    "fwe-label-before": labelPosition === "before"
+  }, {
+    "fr-checkbox-indeterminate": indeterminate
+  }, className);
+  return /*#__PURE__*/_jsxs("label", {
+    className: containerClasses,
+    htmlFor: id,
+    children: [/*#__PURE__*/_jsx("input", {
+      name: name,
+      type: "checkbox",
+      id: id,
+      disabled: disabled,
+      required: required,
+      onChange: e => handleChange(e),
+      ...props,
+      checked: isChecked
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "fwe-checkbox-indicator-container",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "fwe-checkbox-indicator-background"
+      }), !indeterminate && isChecked && (large ? /*#__PURE__*/_jsx("svg", {
+        width: "24px",
+        height: "24px",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z",
+          fill: "#fff"
+        })
+      }) : /*#__PURE__*/_jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z",
+          fill: "#fff"
+        })
+      })), indeterminate && /*#__PURE__*/_jsx("div", {
+        className: "fwe-indeterminate-indicator"
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-checkbox-title",
+      children: children
+    })]
+  });
+}
+export default Checkbox;

package/{dist → lib}/forms/radio/RadioButton.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNamePropsWithChildren } from '../../utils/types';
+import { ClassNamePropsWithChildren } from "../../helper/types";
 export interface RadioProps extends ClassNamePropsWithChildren {
     id?: string;
     defaultChecked?: boolean;
@@ -6,9 +6,10 @@ export interface RadioProps extends ClassNamePropsWithChildren {
     onChange?: (value: string) => void;
     name?: string;
     value?: string;
-    labelPosition?: 'before' | 'after' | 'below';
+    labelPosition?: "before" | "after" | "below";
     large?: boolean;
     disabled?: boolean;
     required?: boolean;
 }
-export declare function RadioButton(props: RadioProps): import("react/jsx-runtime").JSX.Element;
+declare function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;
+export default Radio;