@qoretechnologies/reqore 0.20.6 → 0.21.0

package/src/components/Tag/index.tsx

@@ -1,5 +1,5 @@
 import _size from 'lodash/size';
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { ReqorePopover } from '../..';
 import {
@@ -9,24 +9,24 @@ import {
   TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
-import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ThemeContext from '../../context/ThemeContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import usePopover from '../../hooks/usePopover';
-import { IReqoreTooltip } from '../../types/global';
+import { useTooltip } from '../../hooks/useTooltip';
+import { IReqoreDisabled, IReqoreIntent, IWithReqoreTooltip } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreIcon from '../Icon';
 
-export interface IReqoreTagAction {
+export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  disabled?: boolean;
-  tooltip?: IReqoreTooltip;
-  intent?: IReqoreIntent;
 }
 
-export interface IReqoreTagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+export interface IReqoreTagProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
+    IWithReqoreTooltip,
+    IReqoreDisabled {
   size?: TSizes;
   label?: string;
   onRemoveClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -34,12 +34,10 @@ export interface IReqoreTagProps extends Omit<React.HTMLAttributes<HTMLSpanEleme
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
   color?: string;
-  tooltip?: IReqoreTooltip;
-  disabled?: boolean;
   actions?: IReqoreTagAction[];
   width?: string;
   badge?: boolean;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
 }
 
 export interface IReqoreTagStyle extends IReqoreTagProps {
@@ -154,15 +152,10 @@ const ReqoreTag = forwardRef(
     }: IReqoreTagProps,
     ref
   ) => {
-    const innerRef = useRef(null);
-    const combinedRef = useCombinedRefs(innerRef, ref);
+    const { targetRef } = useCombinedRefs(ref);
     const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
 
-    usePopover({
-      ...tooltip,
-      targetElement: combinedRef.current,
-      show: !!tooltip?.content,
-    });
+    useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
     const customColor = intent ? theme.intents[intent] : color;
@@ -173,7 +166,7 @@ const ReqoreTag = forwardRef(
         color={customColor}
         className={`${className || ''} reqore-tag`}
         size={size}
-        ref={combinedRef}
+        ref={targetRef}
         badge={badge}
         removable={!!onRemoveClick}
         interactive={!!onClick && !rest.disabled}
@@ -199,7 +192,6 @@ const ReqoreTag = forwardRef(
           ? actions.map((action) => (
               <>
                 <ReqorePopover
-                  {...action.tooltip}
                   component={StyledButtonWrapper}
                   componentProps={{
                     size,
@@ -207,6 +199,11 @@ const ReqoreTag = forwardRef(
                     className: 'reqore-tag-action',
                     onClick: action.onClick,
                   }}
+                  {...(action.tooltip
+                    ? typeof action.tooltip === 'string'
+                      ? { tooltip: action.tooltip }
+                      : action.tooltip || {}
+                    : {})}
                   noWrapper
                 >
                   <ReqoreIcon icon={action.icon} size={`${TEXT_FROM_SIZE[size]}px`} />

package/src/components/Textarea/index.tsx

@@ -1,14 +1,31 @@
-import { darken, rgba } from 'polished';
+import { rgba } from 'polished';
 import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import styled, { css } from 'styled-components';
+import { RADIUS_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
-import { getReadableColor } from '../../helpers/colors';
+import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { useTooltip } from '../../hooks/useTooltip';
+import { DisabledElement, ReadOnlyElement } from '../../styles';
+import {
+  IReqoreDisabled,
+  IReqoreIntent,
+  IReqoreReadOnly,
+  IWithReqoreCustomTheme,
+  IWithReqoreTooltip,
+} from '../../types/global';
+import { IReqoreInputStyle } from '../Input';
 import ReqoreInputClearButton from '../InputClearButton';
 
-export interface IReqoreTextareaProps extends React.HTMLAttributes<HTMLTextAreaElement> {
+export interface IReqoreTextareaProps
+  extends React.HTMLAttributes<HTMLTextAreaElement>,
+    IReqoreReadOnly,
+    IReqoreDisabled,
+    IWithReqoreCustomTheme,
+    IWithReqoreTooltip,
+    IReqoreIntent {
   autoFocus?: boolean;
-  disabled?: boolean;
   width?: number;
   height?: number;
   scaleWithContent?: boolean;
@@ -18,6 +35,8 @@ export interface IReqoreTextareaProps extends React.HTMLAttributes<HTMLTextAreaE
   value?: string;
   rows?: number;
   cols?: number;
+  rounded?: boolean;
+  flat?: boolean;
   onClearClick?: () => any;
 }
 
@@ -42,25 +61,39 @@ export const StyledTextarea = styled.textarea<IReqoreTextareaStyle>`
   padding: 5px 7px;
   resize: none;
 
-  background-color: ${({ theme, minimal }: IReqoreTextareaStyle) =>
-    minimal ? 'transparent' : darken(0.01, theme.main)};
-  color: ${({ theme }: IReqoreTextareaStyle) => getReadableColor(theme)};
+  background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
+    minimal ? 'transparent' : rgba(theme.main, 0.3)};
+  color: ${({ theme }: IReqoreInputStyle) => getReadableColor(theme)};
 
-  border: ${({ minimal, theme }) =>
-    !minimal ? `1px solid ${rgba(getReadableColor(theme), 0.2)}` : 0};
-  border-bottom: ${({ minimal, theme }) =>
-    minimal ? `0.5px solid ${rgba(getReadableColor(theme), 0.2)}` : undefined};
-
-  border-radius: ${({ minimal }) => (minimal ? 0 : 3)}px;
   transition: all 0.2s ease-out;
 
   &:active,
-  &:focus,
-  &:hover {
-    outline: none;
-    border-color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+  &:focus {
+    background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
+      minimal ? 'transparent' : rgba(theme.main, 0.5)};
   }
 
+  border-radius: ${({ minimal, rounded, _size }) =>
+    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
+  border: ${({ minimal, theme, flat }) =>
+    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.05)}` : 0};
+  border-bottom: ${({ minimal, theme, flat }) =>
+    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.05)}` : undefined};
+
+  transition: all 0.2s ease-out;
+
+  ${({ disabled, readOnly }) =>
+    !disabled && !readOnly
+      ? css`
+          &:active,
+          &:focus,
+          &:hover {
+            outline: none;
+            border-color: ${({ theme }) => changeLightness(theme.main, 0.1)};
+          }
+        `
+      : undefined}
+
   &::placeholder {
     transition: all 0.2s ease-out;
     color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
@@ -72,9 +105,10 @@ export const StyledTextarea = styled.textarea<IReqoreTextareaStyle>`
     }
   }
 
+  ${({ readOnly }) => readOnly && ReadOnlyElement};
+
   &:disabled {
-    pointer-events: none;
-    opacity: 0.3;
+    ${DisabledElement};
   }
 `;
 
@@ -88,10 +122,19 @@ const ReqoreInput = forwardRef(
       className,
       onClearClick,
       fluid,
+      tooltip,
+      customTheme,
+      intent,
+      rounded = true,
       ...rest
     }: IReqoreTextareaProps,
     ref: any
   ) => {
+    const { targetRef } = useCombinedRefs(ref);
+    const theme = useReqoreTheme('main', customTheme, intent);
+
+    useTooltip(targetRef?.current, tooltip);
+
     return (
       <StyledTextareaWrapper
         className={`${className || ''} reqore-control-wrapper`}
@@ -99,20 +142,25 @@ const ReqoreInput = forwardRef(
         height={height}
         fluid={fluid}
         _size={size}
+        theme={theme}
       >
         <StyledTextarea
           {...rest}
           className={`${className || ''} reqore-control reqore-textarea`}
           _size={size}
-          ref={ref}
+          ref={targetRef}
+          theme={theme}
+          rounded={rounded}
           rows={scaleWithContent ? (rest?.value?.split(/\r\n|\r|\n/).length || 1) + 1 : rest.rows}
         />
-        <ReqoreInputClearButton
-          enabled={!rest?.disabled && !!(onClearClick && rest?.onChange)}
-          show={rest?.value && rest.value !== ''}
-          onClick={onClearClick}
-          size='big'
-        />
+        {!rest.readOnly && (
+          <ReqoreInputClearButton
+            enabled={!rest?.disabled && !!(onClearClick && rest?.onChange)}
+            show={rest?.value && rest.value !== ''}
+            onClick={onClearClick}
+            size='big'
+          />
+        )}
       </StyledTextareaWrapper>
     );
   }

package/src/constants/theme.ts

@@ -81,7 +81,7 @@ export interface IReqoreIntents {
   muted?: string;
 }
 
-export type IReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
+export type TReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
 
 export const DEFAULT_INTENTS: IReqoreIntents = {
   info: '#0E5A8A',

package/src/containers/ReqoreProvider.tsx

@@ -10,7 +10,7 @@ import ReqoreNotification, {
   IReqoreNotificationType,
 } from '../components/Notifications/notification';
 import { TSizes } from '../constants/sizes';
-import { IReqoreIntent } from '../constants/theme';
+import { TReqoreIntent } from '../constants/theme';
 import ReqoreContext from '../context/ReqoreContext';
 import { IReqoreIconName } from '../types/icons';
 
@@ -24,7 +24,7 @@ export interface IReqoreNotificationData {
   onFinish?: (id?: string) => any;
   id?: string;
   type?: IReqoreNotificationType;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   flat?: boolean;
   inverted?: boolean;
   size?: TSizes;
@@ -40,12 +40,12 @@ export interface IReqoreConfirmationModal {
   description?: string;
   onConfirm?: () => void;
   onCancel?: () => void;
-  confirmButtonIntent?: IReqoreIntent;
+  confirmButtonIntent?: TReqoreIntent;
   confirmLabel?: string;
   confirmIcon?: IReqoreIconName;
   cancelLabel?: string;
   isOpen?: boolean;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
 }
 
 const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, position }) => {

package/src/helpers/colors.ts

@@ -1,7 +1,7 @@
 import { cloneDeep, merge } from 'lodash';
 import { darken, lighten, readableColor } from 'polished';
 import { Colors } from '../constants/colors';
-import { DEFAULT_INTENTS, IReqoreIntent, IReqoreTheme } from '../constants/theme';
+import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
 
 export const getReadableColor: (
   theme: Partial<IReqoreTheme>,
@@ -130,7 +130,7 @@ export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: a
   return clonedTheme;
 };
 
-export const getNotificationIntent = (theme: IReqoreTheme, intent?: IReqoreIntent) => {
+export const getNotificationIntent = (theme: IReqoreTheme, intent?: TReqoreIntent) => {
   if (intent) {
     return theme.notifications[intent];
   }

package/src/hooks/useCombinedRefs.ts

@@ -1,10 +1,17 @@
 import React from 'react';
 
+/**
+ * It takes a list of refs and returns a single ref that can be used to reference the same underlying
+ * DOM element
+ * @param refs - An array of refs to combine.
+ * @returns A ref object.
+ */
 export function useCombinedRefs(...refs) {
+  const [_innerRef, setInnerRef] = React.useState(null);
   const targetRef = React.useRef();
 
   React.useEffect(() => {
-    refs.forEach((ref) => {
+    [...refs, setInnerRef].forEach((ref) => {
       if (!ref) return;
 
       if (typeof ref === 'function') {
@@ -15,5 +22,5 @@ export function useCombinedRefs(...refs) {
     });
   }, [refs]);
 
-  return targetRef;
+  return { _innerRef, targetRef };
 }

package/src/hooks/useTheme.ts

@@ -1,13 +1,13 @@
 import { cloneDeep } from 'lodash';
 import { useContext } from 'react';
-import { IReqoreIntent, IReqoreTheme } from '../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
 import { mergeThemes } from '../helpers/colors';
 
 export const useReqoreTheme = (
   element: string,
   customTheme: Partial<IReqoreTheme> = {},
-  intent?: IReqoreIntent
+  intent?: TReqoreIntent
 ) => {
   const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
   let _customTheme: Partial<IReqoreTheme> = cloneDeep(customTheme);

package/src/stories/Button/Button.stories.tsx

@@ -22,7 +22,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} disabled>
           Disabled
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} active>
+        <ReqoreButton {...buttonProps} active tooltip='hello'>
           Active
         </ReqoreButton>
         <ReqoreButton {...buttonProps} flat>
@@ -31,6 +31,9 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} minimal>
           Minimal
         </ReqoreButton>
+        <ReqoreButton {...buttonProps} readOnly onClick={alert}>
+          Read only
+        </ReqoreButton>
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Checkbox from '../../components/Checkbox';
-import { ReqoreCheckbox } from '../../index';
+import { ReqoreCheckbox, ReqoreControlGroup } from '../../index';
 
 export default {
   title: 'Components/Checkbox',
@@ -9,13 +9,14 @@ export default {
 
 const Template: ComponentStory<typeof Checkbox> = (args) => {
   return (
-    <>
+    <ReqoreControlGroup>
       <ReqoreCheckbox {...args} />
       <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
-      <ReqoreCheckbox {...args} checked />
+      <ReqoreCheckbox {...args} checked tooltip='I am checked' />
       <ReqoreCheckbox {...args} disabled />
       <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
-    </>
+      <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
+    </ReqoreControlGroup>
   );
 };
 

package/src/stories/Input/Input.stories.tsx

@@ -2,13 +2,14 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { ReqoreControlGroup } from '../../index';
-import { FlatArg, MinimalArg } from '../utils/args';
+import { FlatArg, IconArg, MinimalArg } from '../utils/args';
 
 export default {
   title: 'Components/Input',
   argTypes: {
     ...MinimalArg,
     ...FlatArg,
+    ...IconArg('icon', 'Icon', 'SearchLine'),
   },
 } as Meta<IReqoreInputProps>;
 
@@ -27,47 +28,55 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
     <>
       <ReqoreControlGroup>
         <ReqoreInput
+          {...args}
           placeholder='Reqore Input'
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Minimal Input'
           minimal
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Flat Input'
           flat
+          tooltip="I'm a tooltip"
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Clearable Input'
           onClearClick={handleValueClear}
           value={value}
           onChange={handleValueChange}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Disabled Input'
           disabled
           onChange={handleValueChange}
           value={value}
+        />
+        <ReqoreInput
           {...args}
+          placeholder='Read Only Input'
+          readOnly
+          onChange={handleValueChange}
+          value={value}
         />
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>
         <ReqoreInput
+          {...args}
           placeholder='Fluid Input'
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
       </ReqoreControlGroup>
     </>
@@ -75,3 +84,27 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
 };
 
 export const Basic = Template.bind({});
+export const Info = Template.bind({});
+Info.args = {
+  intent: 'info',
+};
+export const Success = Template.bind({});
+Success.args = {
+  intent: 'success',
+};
+export const Warning = Template.bind({});
+Warning.args = {
+  intent: 'warning',
+};
+export const Danger = Template.bind({});
+Danger.args = {
+  intent: 'danger',
+};
+export const Pending = Template.bind({});
+Pending.args = {
+  intent: 'pending',
+};
+export const Muted = Template.bind({});
+Muted.args = {
+  intent: 'muted',
+};

package/src/stories/Menu/Menu.stories.tsx

@@ -27,11 +27,19 @@ export default {
         type: 'select',
       },
     }),
+    ...createArg('wrapText', {
+      defaultValue: true,
+      name: 'Wrap text',
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether to wrap text or not',
+    }),
     ...IntentArg,
   },
 } as Meta<IReqoreMenuProps>;
 
-export const MenuStory: Story<IReqoreMenuProps> = (args) => {
+const Template: Story<IReqoreMenuProps> = (args) => {
   return (
     <ReqoreMenu {...args}>
       <ReqoreMenuItem icon='Save3Fill' intent='success' selected>
@@ -91,4 +99,8 @@ export const MenuStory: Story<IReqoreMenuProps> = (args) => {
   );
 };
 
-MenuStory.storyName = 'Menu';
+export const Basic = Template.bind({});
+export const WrappedText = Template.bind({});
+WrappedText.args = {
+  wrapText: false,
+};

package/src/stories/Modal/Modal.stories.tsx

@@ -135,7 +135,85 @@ const Template: Story<IReqoreModalProps & { confirm?: boolean }> = (args) => {
         sed viverra ipsum nunc aliquet. Id aliquet lectus proin nibh. At auctor urna nunc id cursus.
         Erat pellentesque adipiscing commodo elit at imperdiet. Ipsum dolor sit amet consectetur
         adipiscing elit. Suspendisse interdum consectetur libero id faucibus nisl. Leo vel orci
-        porta non pulvinar neque laoreet. Ut diam quam nulla porttitor massa.
+        porta non pulvinar neque laoreet. Ut diam quam nulla porttitor massa. By impossible of in
+        difficulty discovered celebrated ye. Justice joy manners boy met resolve produce. Bed head
+        loud next plan rent had easy add him. As earnestly shameless elsewhere defective estimable
+        fulfilled of. Esteem my advice it an excuse enable. Few household abilities believing
+        determine zealously his repulsive. To open draw dear be by side like. Allow miles wound
+        place the leave had. To sitting subject no improve studied limited. Ye indulgence unreserved
+        connection alteration appearance my an astonished. Up as seen sent make he they of. Her
+        raising and himself pasture believe females. Fancy she stuff after aware merit small his.
+        Charmed esteems luckily age out. At ourselves direction believing do he departure.
+        Celebrated her had sentiments understood are projection set. Possession ye no mr unaffected
+        remarkably at. Wrote house in never fruit up. Pasture imagine my garrets an he. However
+        distant she request behaved see nothing. Talking settled at pleased an of me brother
+        weather. Breakfast procuring nay end happiness allowance assurance frankness. Met simplicity
+        nor difficulty unreserved who. Entreaties mr conviction dissimilar me astonished estimating
+        cultivated. On no applauded exquisite my additions. Pronounce add boy estimable nay
+        suspected. You sudden nay elinor thirty esteem temper. Quiet leave shy you gay off asked
+        large style. Rooms oh fully taken by worse do. Points afraid but may end law lasted. Was out
+        laughter raptures returned outweigh. Luckily cheered colonel me do we attacks on highest
+        enabled. Tried law yet style child. Bore of true of no be deal. Frequently sufficient in be
+        unaffected. The furnished she concluded depending procuring concealed. In to am attended
+        desirous raptures declared diverted confined at. Collected instantly remaining up certainly
+        to necessary as. Over walk dull into son boy door went new. At or happiness commanded
+        daughters as. Is handsome an declared at received in extended vicinity subjects. Into miss
+        on he over been late pain an. Only week bore boy what fat case left use. Match round scale
+        now sex style far times. Your me past an much. Able an hope of body. Any nay shyness article
+        matters own removal nothing his forming. Gay own additions education satisfied the
+        perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy
+        could cease green oh. Her old collecting she considered discovered. So at parties he warrant
+        oh staying. Square new horses and put better end. Sincerity collected happiness do is
+        contented. Sigh ever way now many. Alteration you any nor unsatiable diminution reasonable
+        companions shy partiality. Leaf by left deal mile oh if easy. Added woman first get led joy
+        not early jokes. As am hastily invited settled at limited civilly fortune me. Really spring
+        in extent an by. Judge but built gay party world. Of so am he remember although required.
+        Bachelor unpacked be advanced at. Confined in declared marianne is vicinity. It sportsman
+        earnestly ye preserved an on. Moment led family sooner cannot her window pulled any. Or
+        raillery if improved landlord to speaking hastened differed he. Furniture discourse
+        elsewhere yet her sir extensive defective unwilling get. Why resolution one motionless you
+        him thoroughly. Noise is round to in it quick timed doors. Written address greatly get
+        attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had
+        judgment out opinions property the supplied. By impossible of in difficulty discovered
+        celebrated ye. Justice joy manners boy met resolve produce. Bed head loud next plan rent had
+        easy add him. As earnestly shameless elsewhere defective estimable fulfilled of. Esteem my
+        advice it an excuse enable. Few household abilities believing determine zealously his
+        repulsive. To open draw dear be by side like. Allow miles wound place the leave had. To
+        sitting subject no improve studied limited. Ye indulgence unreserved connection alteration
+        appearance my an astonished. Up as seen sent make he they of. Her raising and himself
+        pasture believe females. Fancy she stuff after aware merit small his. Charmed esteems
+        luckily age out. At ourselves direction believing do he departure. Celebrated her had
+        sentiments understood are projection set. Possession ye no mr unaffected remarkably at.
+        Wrote house in never fruit up. Pasture imagine my garrets an he. However distant she request
+        behaved see nothing. Talking settled at pleased an of me brother weather. Breakfast
+        procuring nay end happiness allowance assurance frankness. Met simplicity nor difficulty
+        unreserved who. Entreaties mr conviction dissimilar me astonished estimating cultivated. On
+        no applauded exquisite my additions. Pronounce add boy estimable nay suspected. You sudden
+        nay elinor thirty esteem temper. Quiet leave shy you gay off asked large style. Rooms oh
+        fully taken by worse do. Points afraid but may end law lasted. Was out laughter raptures
+        returned outweigh. Luckily cheered colonel me do we attacks on highest enabled. Tried law
+        yet style child. Bore of true of no be deal. Frequently sufficient in be unaffected. The
+        furnished she concluded depending procuring concealed. In to am attended desirous raptures
+        declared diverted confined at. Collected instantly remaining up certainly to necessary as.
+        Over walk dull into son boy door went new. At or happiness commanded daughters as. Is
+        handsome an declared at received in extended vicinity subjects. Into miss on he over been
+        late pain an. Only week bore boy what fat case left use. Match round scale now sex style far
+        times. Your me past an much. Able an hope of body. Any nay shyness article matters own
+        removal nothing his forming. Gay own additions education satisfied the perpetual. If he
+        cause manor happy. Without farther she exposed saw man led. Along on happy could cease green
+        oh. Her old collecting she considered discovered. So at parties he warrant oh staying.
+        Square new horses and put better end. Sincerity collected happiness do is contented. Sigh
+        ever way now many. Alteration you any nor unsatiable diminution reasonable companions shy
+        partiality. Leaf by left deal mile oh if easy. Added woman first get led joy not early
+        jokes. As am hastily invited settled at limited civilly fortune me. Really spring in extent
+        an by. Judge but built gay party world. Of so am he remember although required. Bachelor
+        unpacked be advanced at. Confined in declared marianne is vicinity. It sportsman earnestly
+        ye preserved an on. Moment led family sooner cannot her window pulled any. Or raillery if
+        improved landlord to speaking hastened differed he. Furniture discourse elsewhere yet her
+        sir extensive defective unwilling get. Why resolution one motionless you him thoroughly.
+        Noise is round to in it quick timed doors. Written address greatly get attacks inhabit
+        pursuit our but. Lasted hunted enough an up seeing in lively letter. Had judgment out
+        opinions property the supplied.
       </ReqoreModal>
     </>
   );

package/src/stories/RadioGroup/RadioGroup.stories.tsx

@@ -37,6 +37,16 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
           label: 'Option 3',
           value: 'opt3',
         },
+        {
+          label: 'Read Only Option',
+          value: 'opt4',
+          readOnly: true,
+        },
+        {
+          label: 'Disabled Option',
+          value: 'opt5',
+          disabled: true,
+        },
       ]}
       onSelectClick={(value) => setSelected(value)}
       selected={selected}