@os-design/core 1.0.254 → 1.0.256

package/dist/Popover/index.js

@@ -0,0 +1,156 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import Portal from '@os-design/portal';
+import { sizeStyles } from '@os-design/styles';
+import { clr, useTheme } from '@os-design/theming';
+import { omitEmotionProps, useBrowserLayoutEffect, useClickOutside, useClosable, useEvent, useForwardedRef, useResizeObserver } from '@os-design/utils';
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import usePopoverPosition from './utils/usePopoverPosition';
+import { jsx as _jsx } from "react/jsx-runtime";
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+const fadeOut = keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
+const visibleStyles = p => p.visible && css`
+    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;
+  `;
+const invisibleStyles = p => !p.visible && css`
+    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;
+  `;
+const Container = styled('div', omitEmotionProps('top', 'left', 'visible', 'size'))`
+  position: absolute;
+  top: ${p => p.top}px;
+  left: ${p => p.left}px;
+
+  border-radius: ${p => p.theme.borderRadius}em;
+  background-color: ${p => clr(p.theme.popoverColorBg)};
+  color: ${p => clr(p.theme.popoverColorText)};
+  border: 1px solid ${p => clr(p.theme.popoverColorBorder)};
+  box-shadow: 0 0.15em 0.8em ${p => clr(p.theme.popoverColorBoxShadow)};
+  z-index: 1000; // Greater than the z-index of the Drawer
+
+  ${visibleStyles};
+  ${invisibleStyles};
+  ${sizeStyles};
+`;
+const emptyRect = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+
+/**
+ * The pop-up window located next to the element.
+ */
+const Popover = /*#__PURE__*/forwardRef(({
+  trigger,
+  placement = 'top',
+  gap = 0.2,
+  flip = true,
+  visible = false,
+  onClose = () => {},
+  id,
+  children,
+  ...rest
+}, ref) => {
+  const [popoverRef, mergedPopoverRef] = useForwardedRef(ref);
+  const [popoverRect, setPopoverRect] = useState(emptyRect);
+  const [triggerRect, setTriggerRect] = useState(emptyRect);
+  const {
+    theme
+  } = useTheme();
+  const mounted = useClosable(visible, theme.transitionDelay);
+
+  // Init the rect of the popover and update it when the popover size changes
+  const popoverResizeListener = useCallback(() => {
+    if (!popoverRef.current) return;
+    setPopoverRect(popoverRef.current.getBoundingClientRect());
+  }, [popoverRef]);
+  useResizeObserver(popoverRef.current, popoverResizeListener);
+  const measuredPopoverRef = useCallback(node => {
+    if (node === null) return;
+    setPopoverRect(node.getBoundingClientRect());
+    mergedPopoverRef(node);
+  }, [mergedPopoverRef]);
+
+  // Init the rect of the trigger and update it when the window was resized
+  // or scrolled
+  const triggerResizeListener = useCallback(() => {
+    window.requestAnimationFrame(() => {
+      if (!trigger) return;
+      const {
+        current
+      } = trigger;
+      if (!current) return;
+      setTriggerRect(current.getBoundingClientRect());
+    });
+  }, [trigger]);
+  useBrowserLayoutEffect(() => {
+    if (!visible) return;
+    triggerResizeListener();
+  }, [triggerResizeListener, visible]);
+  useResizeObserver(trigger, triggerResizeListener);
+  useEvent(typeof window === 'undefined' ? null : window, 'resize', triggerResizeListener);
+  useEvent(document, 'scroll', triggerResizeListener);
+  useEffect(() => {
+    if (!trigger || trigger.current !== undefined) return;
+    setTriggerRect(trigger);
+  }, [trigger]);
+  const popoverId = useMemo(() => id || `popover-${Math.random().toString(36).slice(2, 11)}`, [id]);
+
+  // Set the aria tags to support accessibility features
+  useBrowserLayoutEffect(() => {
+    if (!trigger) return;
+    const {
+      current
+    } = trigger;
+    if (!current) return;
+    if (current.getAttribute('aria-haspopup') === null) {
+      current.setAttribute('aria-haspopup', 'dialog');
+    }
+    current.setAttribute('aria-controls', popoverId);
+  }, []);
+  useBrowserLayoutEffect(() => {
+    if (!trigger) return;
+    const {
+      current
+    } = trigger;
+    if (!current) return;
+    current.setAttribute('aria-expanded', visible.toString());
+  }, [visible]);
+
+  // Get the popover coordinates
+  const {
+    top,
+    left
+  } = usePopoverPosition({
+    elementRect: triggerRect,
+    popoverRect,
+    placement,
+    gap,
+    flip
+  });
+
+  // Close the popover when the user clicks outside of it
+  useClickOutside(popoverRef, onClose);
+  if (!mounted) return null;
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(Container, {
+      top: top,
+      left: left,
+      visible: visible,
+      id: popoverId,
+      role: "dialog",
+      ...rest,
+      ref: measuredPopoverRef,
+      children: children
+    })
+  });
+});
+Popover.displayName = 'Popover';
+export default Popover;

package/dist/Popover/utils/usePopoverPosition.d.ts

@@ -0,0 +1,47 @@
+type Side = 'top' | 'left' | 'right' | 'bottom';
+type Alignment = 'start' | 'end';
+type AlignedPlacement = `${Side}-${Alignment}`;
+export type Placement = Side | AlignedPlacement;
+export interface Rect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+interface UsePopoverPositionProps {
+    /**
+     * The rect of the element.
+     */
+    elementRect: Rect;
+    /**
+     * The rect of the popover.
+     */
+    popoverRect: Rect;
+    /**
+     * On which side of the element the popover will appear.
+     * @default top
+     */
+    placement?: Placement;
+    /**
+     * The gap between the element and the popover in em.
+     * @default 0.5
+     */
+    gap?: number;
+    /**
+     * Whether to flip the popover if it does not fit in the window.
+     * @default true
+     */
+    flip?: boolean;
+}
+interface PopoverPosition {
+    top: number;
+    left: number;
+}
+/**
+ * Computes the position of the popover.
+ * Note that you must change the elementRect when the scroll and resize events of the parent scrollable container occur.
+ * In most cases, it will be the window.
+ */
+declare const usePopoverPosition: ({ elementRect, popoverRect, placement, gap, flip, }: UsePopoverPositionProps) => PopoverPosition;
+export default usePopoverPosition;
+//# sourceMappingURL=usePopoverPosition.d.ts.map

package/dist/Popover/utils/usePopoverPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopoverPosition.d.ts","sourceRoot":"","sources":["../../../src/Popover/utils/usePopoverPosition.ts"],"names":[],"mappings":"AAGA,KAAK,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAChD,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;AACjC,KAAK,gBAAgB,GAAG,GAAG,IAAI,IAAI,SAAS,EAAE,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,gBAAgB,CAAC;AAEhD,MAAM,WAAW,IAAI;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,uBAAuB;IAC/B;;OAEG;IACH,WAAW,EAAE,IAAI,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA6ID,UAAU,eAAe;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wDAMrB,uBAAuB,KAAG,eAgB5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/Popover/utils/usePopoverPosition.js

@@ -0,0 +1,158 @@
+import { useFontSize } from '@os-design/utils';
+import { useMemo } from 'react';
+const popoverPositionGetters = rectKey => {
+  const sizeKey = rectKey === 'top' ? 'height' : 'width';
+  const windowSizeKey = rectKey === 'top' ? 'innerHeight' : 'innerWidth';
+  const windowOffsetKey = rectKey === 'top' ? 'pageYOffset' : 'pageXOffset';
+  const fitToWindow = (start, {
+    elementRect,
+    popoverRect
+  }) => {
+    let popoverStart = start;
+    const windowStart = window[windowOffsetKey];
+    const windowEnd = windowStart + window[windowSizeKey];
+    const elementStart = windowStart + elementRect[rectKey];
+    const elementEnd = elementStart + elementRect[sizeKey];
+    const popoverEnd = popoverStart + popoverRect[sizeKey];
+
+    // Fit the popover to the end of the window
+    if (popoverEnd > windowEnd) {
+      if (elementEnd < windowEnd) popoverStart = windowEnd - popoverRect[sizeKey];else if (popoverRect[sizeKey] > elementRect[sizeKey]) popoverStart = elementEnd - popoverRect[sizeKey];else if (windowEnd - elementStart > popoverRect[sizeKey]) popoverStart = windowEnd - popoverRect[sizeKey];else popoverStart = elementStart;
+    }
+
+    // Fit the popover to the beginning of the window
+    if (popoverStart < windowStart) {
+      if (elementStart > windowStart) popoverStart = windowStart;else if (popoverRect[sizeKey] > elementRect[sizeKey]) popoverStart = elementStart;else if (elementEnd - windowStart > popoverRect[sizeKey]) popoverStart = windowStart;else popoverStart = elementEnd - popoverRect[sizeKey];
+    }
+    return popoverStart;
+  };
+  return {
+    before(options) {
+      const {
+        elementRect,
+        popoverRect,
+        gap,
+        flip
+      } = options;
+      const windowStart = window[windowOffsetKey];
+      const windowEnd = windowStart + window[windowSizeKey];
+      const elementStart = windowStart + elementRect[rectKey];
+      const popoverStart = elementStart - popoverRect[sizeKey] - gap;
+      if (flip && popoverStart < windowStart) {
+        const afterPopoverStart = this.after({
+          ...options,
+          flip: false
+        });
+        const afterPopoverEnd = afterPopoverStart + popoverRect[sizeKey];
+        const diffStart = windowStart - popoverStart;
+        const diffEnd = afterPopoverEnd - windowEnd;
+        if (afterPopoverEnd <= windowEnd || diffStart > diffEnd) return afterPopoverStart;
+      }
+      return popoverStart;
+    },
+    after(options) {
+      const {
+        elementRect,
+        popoverRect,
+        gap,
+        flip
+      } = options;
+      const windowStart = window[windowOffsetKey];
+      const windowEnd = windowStart + window[windowSizeKey];
+      const elementStart = windowStart + elementRect[rectKey];
+      const elementEnd = elementStart + elementRect[sizeKey];
+      const popoverStart = elementEnd + gap;
+      const popoverEnd = popoverStart + popoverRect[sizeKey];
+      if (flip && popoverEnd > windowEnd) {
+        const beforePopoverStart = this.before({
+          ...options,
+          flip: false
+        });
+        const diffStart = windowStart - beforePopoverStart;
+        const diffEnd = popoverEnd - windowEnd;
+        if (beforePopoverStart >= windowStart || diffEnd > diffStart) return beforePopoverStart;
+      }
+      return popoverStart;
+    },
+    start: ({
+      elementRect,
+      popoverRect
+    }) => {
+      const windowStart = window[windowOffsetKey];
+      const elementStart = windowStart + elementRect[rectKey];
+      return fitToWindow(elementStart, {
+        elementRect,
+        popoverRect
+      });
+    },
+    end: ({
+      elementRect,
+      popoverRect
+    }) => {
+      const windowStart = window[windowOffsetKey];
+      const elementStart = windowStart + elementRect[rectKey];
+      const elementEnd = elementStart + elementRect[sizeKey];
+      const popoverStart = elementEnd - popoverRect[sizeKey];
+      return fitToWindow(popoverStart, {
+        elementRect,
+        popoverRect
+      });
+    },
+    center: ({
+      elementRect,
+      popoverRect
+    }) => {
+      const windowStart = window[windowOffsetKey];
+      const elementStart = windowStart + elementRect[rectKey];
+      const popoverStart = elementStart + (elementRect[sizeKey] - popoverRect[sizeKey]) / 2;
+      return fitToWindow(popoverStart, {
+        elementRect,
+        popoverRect
+      });
+    }
+  };
+};
+const getPopoverPosition = (top, left, options) => ({
+  top: popoverPositionGetters('top')[top](options),
+  left: popoverPositionGetters('left')[left](options)
+});
+const placementPositionKeysMap = {
+  top: ['before', 'center'],
+  bottom: ['after', 'center'],
+  left: ['center', 'before'],
+  right: ['center', 'after'],
+  'top-start': ['before', 'start'],
+  'top-end': ['before', 'end'],
+  'bottom-start': ['after', 'start'],
+  'bottom-end': ['after', 'end'],
+  'left-start': ['start', 'before'],
+  'left-end': ['end', 'before'],
+  'right-start': ['start', 'after'],
+  'right-end': ['end', 'after']
+};
+/**
+ * Computes the position of the popover.
+ * Note that you must change the elementRect when the scroll and resize events of the parent scrollable container occur.
+ * In most cases, it will be the window.
+ */
+const usePopoverPosition = ({
+  elementRect,
+  popoverRect,
+  placement = 'top',
+  gap = 0.5,
+  flip = true
+}) => {
+  const bodyFontSize = useFontSize(document.body);
+  const gapPx = useMemo(() => gap * bodyFontSize, [gap, bodyFontSize]);
+  const positionKeys = useMemo(() => {
+    if (typeof placement === 'string' && !!placementPositionKeysMap[placement]) return placementPositionKeysMap[placement];
+    return placementPositionKeysMap.top;
+  }, [placement]);
+  return getPopoverPosition(...positionKeys, {
+    elementRect,
+    popoverRect,
+    gap: gapPx,
+    flip
+  });
+};
+export default usePopoverPosition;

package/dist/Progress/index.d.ts

@@ -0,0 +1,25 @@
+import { type WithSize } from '@os-design/styles';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface ProgressProps extends JsxDivProps, WithSize {
+    /**
+     * The percentage of completion.
+     * @default 0
+     */
+    percent?: number;
+    /**
+     * The text that is displayed to the right of the progress bar.
+     * @default undefined
+     */
+    text?: string;
+    /**
+     * The height of the progress bar.
+     * @default 0.5em
+     */
+    height?: string;
+}
+/**
+ * The progress bar.
+ */
+declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Progress;
+//# sourceMappingURL=index.d.ts.map

package/dist/Progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Progress/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAgC,MAAM,mBAAmB,CAAC;AAKhF,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,QAAQ;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsCD;;GAEG;AACH,QAAA,MAAM,QAAQ,0GA8Bb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/Progress/index.js

@@ -0,0 +1,68 @@
+import styled from '@emotion/styled';
+import { sizeStyles, transitionStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = styled('div', omitEmotionProps('size'))`
+  display: flex;
+  align-items: center;
+  ${sizeStyles};
+`;
+const Trail = styled('div', omitEmotionProps('height'))`
+  width: 100%;
+  background-color: ${p => clr(p.theme.progressColorTrail)};
+  border-radius: ${p => `calc(${p.height} / 2)`};
+  overflow: hidden; // To hide the border of the progress bar
+`;
+const Stroke = styled('div', omitEmotionProps('percent', 'height'))`
+  width: ${p => p.percent}%;
+  height: ${p => p.height};
+  border-radius: 0 ${p => `calc(${p.height} / 2)`}
+    ${p => `calc(${p.height} / 2)`} 0;
+  background-color: ${p => p.percent < 100 ? clr(p.theme.progressColorStroke) : clr(p.theme.progressColorStrokeSuccess)};
+  ${transitionStyles('width', 'background-color')};
+`;
+const Text = styled.div`
+  margin-left: 0.5em;
+  color: ${p => clr(p.theme.progressColorPercentage)};
+  line-height: 1;
+`;
+
+/**
+ * The progress bar.
+ */
+const Progress = /*#__PURE__*/forwardRef(({
+  percent = 0,
+  text,
+  height = '0.5em',
+  ...rest
+}, ref) => {
+  const validPercent = useMemo(() => {
+    if (percent < 0) return 0;
+    if (percent > 100) return 100;
+    return percent;
+  }, [percent]);
+  const textId = useMemo(() => `progress-bar-text-${Math.random().toString(36).slice(2, 11)}`, []);
+  return /*#__PURE__*/_jsxs(Container, {
+    role: "progressbar",
+    "aria-valuenow": validPercent,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-describedby": textId,
+    ...rest,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(Trail, {
+      height: height,
+      children: /*#__PURE__*/_jsx(Stroke, {
+        percent: validPercent,
+        height: height
+      })
+    }), text && /*#__PURE__*/_jsx(Text, {
+      id: textId,
+      children: text
+    })]
+  });
+});
+Progress.displayName = 'Progress';
+export default Progress;

package/dist/RadioGroup/index.d.ts

@@ -0,0 +1,55 @@
+import type { WithSize } from '@os-design/styles';
+import { type ButtonProps } from '../Button';
+export interface RadioGroupOption extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {
+    /**
+     * The title of the option.
+     */
+    title: string;
+    /**
+     * The value of the option.
+     */
+    value: string;
+}
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'value' | 'defaultValue' | 'onChange' | 'ref'>;
+export interface RadioGroupProps extends JsxDivProps, WithSize {
+    /**
+     * Options of the radio group.
+     * @default undefined
+     */
+    options?: RadioGroupOption[];
+    /**
+     * Whether the radio group has full width.
+     * Possible values:
+     * `default` – the radio group has full width if the screen width is less than xs;
+     * `always` – the radio group always has full width;
+     * `never` – the radio group never has full width.
+     * @default default
+     */
+    wide?: 'default' | 'always' | 'never';
+    /**
+     * Whether the radio group is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Selected option.
+     * @default false
+     */
+    value?: string;
+    /**
+     * The default value.
+     * @default undefined
+     */
+    defaultValue?: string;
+    /**
+     * The change event handler.
+     * @default undefined
+     */
+    onChange?: (value: string) => void;
+}
+/**
+ * The radio buttons that allow a user to select only one of a limited number of options.
+ */
+declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default RadioGroup;
+//# sourceMappingURL=index.d.ts.map

package/dist/RadioGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RadioGroup/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIlD,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAC5D;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA8CD;;GAEG;AACH,QAAA,MAAM,UAAU,4GAmDf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/RadioGroup/index.js

@@ -0,0 +1,85 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { m } from '@os-design/media';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps, useForwardedState } from '@os-design/utils';
+import { forwardRef } from 'react';
+import Button from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+const wideDefaultStyles = p => p.wide === 'default' && css`
+    ${m.max.xxs} {
+      width: 100%;
+      & > button {
+        flex: 1;
+      }
+    }
+  `;
+const wideAlwaysStyles = p => p.wide === 'always' && css`
+    width: 100%;
+    & > button {
+      flex: 1;
+    }
+  `;
+const Container = styled('div', omitEmotionProps('wide', 'disabled'))`
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  border-radius: ${p => p.theme.borderRadius}em;
+  overflow: hidden;
+  border: 1px solid
+    ${p => p.disabled ? clr(p.theme.buttonDisabledGhostColorText) : clr(p.theme.colorPrimary)};
+
+  ${wideDefaultStyles};
+  ${wideAlwaysStyles};
+`;
+const StyledButton = styled(Button)`
+  border-radius: 0;
+`;
+
+/**
+ * The radio buttons that allow a user to select only one of a limited number of options.
+ */
+const RadioGroup = /*#__PURE__*/forwardRef(({
+  options = [],
+  wide = 'default',
+  disabled = false,
+  value,
+  defaultValue,
+  onChange = () => {},
+  size,
+  ...rest
+}, ref) => {
+  const [forwardedValue, setForwardedValue] = useForwardedState({
+    value,
+    defaultValue,
+    onChange
+  });
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(Container, {
+      wide: wide,
+      disabled: disabled,
+      ...rest,
+      ref: ref,
+      children: options?.map(({
+        title,
+        value: valueOption,
+        disabled: disabledOption,
+        onClick = () => {},
+        ...buttonRest
+      }) => /*#__PURE__*/_jsx(StyledButton, {
+        type: forwardedValue === valueOption ? 'primary' : 'ghost',
+        wide: "never",
+        disabled: disabled || disabledOption,
+        size: size,
+        onClick: e => {
+          setForwardedValue(valueOption);
+          onClick(e);
+        },
+        ...buttonRest,
+        children: title
+      }, valueOption))
+    })
+  });
+});
+RadioGroup.displayName = 'RadioGroup';
+export default RadioGroup;

package/dist/RadioGroupSkeleton/index.d.ts

@@ -0,0 +1,15 @@
+import { type WithSize } from '@os-design/styles';
+import { type SkeletonProps } from '../Skeleton';
+export interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {
+    /**
+     * The width of the skeleton.
+     * @default 10em
+     */
+    width?: string;
+}
+/**
+ * Provides a radio group placeholder while a user waits for the content to load.
+ */
+declare const RadioGroupSkeleton: import("react").ForwardRefExoticComponent<RadioGroupSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default RadioGroupSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/RadioGroupSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RadioGroupSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,WAAW,uBAAwB,SAAQ,aAAa,EAAE,QAAQ;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAUD;;GAEG;AACH,QAAA,MAAM,kBAAkB,oHAIvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}

package/dist/RadioGroupSkeleton/index.js

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+import { sizeStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import Skeleton from '../Skeleton';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledRadioGroupSkeleton = styled(Skeleton, omitEmotionProps('size'))`
+  height: calc(${p => p.theme.baseHeight}em + 2px);
+  ${sizeStyles};
+`;
+
+/**
+ * Provides a radio group placeholder while a user waits for the content to load.
+ */
+const RadioGroupSkeleton = /*#__PURE__*/forwardRef(({
+  width = '10em',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(StyledRadioGroupSkeleton, {
+  width: width,
+  ...rest,
+  ref: ref
+}));
+RadioGroupSkeleton.displayName = 'RadioGroupSkeleton';
+export default RadioGroupSkeleton;

package/dist/Result/index.d.ts

@@ -0,0 +1,31 @@
+import { type WithSize } from '@os-design/styles';
+import React from 'react';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface ResultProps extends JsxDivProps, WithSize {
+    /**
+     * The title of the result.
+     */
+    title: string;
+    /**
+     * The description that is under the title.
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * The icon that is located above the title.
+     * @default undefined
+     */
+    icon?: React.ReactElement;
+    /**
+     * Active elements.
+     * @default undefined
+     */
+    actions?: React.ReactNode;
+}
+/**
+ * Used to give the user feedback instead of results.
+ * For example, error happened, results not found, no results yet.
+ */
+declare const Result: React.ForwardRefExoticComponent<ResultProps & React.RefAttributes<HTMLDivElement>>;
+export default Result;
+//# sourceMappingURL=index.d.ts.map