@qoretechnologies/reqore 0.30.6 → 0.30.8

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

@@ -20,7 +20,7 @@ export default {
 const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
   return (
     <>
-      <ReqoreControlGroup size={buttonProps.size}>
+      <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} icon='BankFill' rightIcon={null} />
         <ReqoreButton {...buttonProps} />
         <ReqoreButton {...buttonProps}>Default</ReqoreButton>
@@ -41,14 +41,21 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup size={buttonProps.size}>
+      <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
           Active Not Flat
         </ReqoreButton>
         <ReqoreButton {...buttonProps} flat={false}>
           Not Flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal flat={false}>
+        <ReqoreButton
+          {...buttonProps}
+          minimal
+          flat={false}
+          iconColor='#38fdb2'
+          leftIconColor='#33023c:lighten:3'
+          rightIconColor='#0a487b:lighten:3'
+        >
           Minimal not flat
         </ReqoreButton>
         <ReqoreButton {...buttonProps} readOnly onClick={alert} flat={false}>
@@ -59,16 +66,49 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup fluid>
+      <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps} fluid>
           Fluid button
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup>
+      <ReqoreControlGroup fluid wrap>
+        <ReqoreButton {...buttonProps}>Left text</ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          textAlign='center'
+          maxWidth='250px'
+          badge='10'
+          wrap
+          description='I am a button with a center aligned text and description'
+        >
+          Center
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          textAlign='center'
+          maxWidth='200px'
+          badge="I'm a badge, baby"
+          wrap
+          description='I am a button with a center aligned text and description'
+        >
+          Center text with a longer text
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          textAlign='right'
+          badge="I'm a badge"
+          description='I am a button with a right aligned text and description'
+        >
+          Right text
+        </ReqoreButton>
+      </ReqoreControlGroup>
+      <br />
+      <ReqoreControlGroup wrap>
         <ReqoreButton
           {...buttonProps}
           description='This is a very interesting description for a button, I like it very much'
+          iconColor='#38fdb2'
         >
           With Default Description
         </ReqoreButton>
@@ -87,8 +127,22 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
         <ReqoreButton
           {...buttonProps}
+          minimal
           description='This is a very interesting description for a button, I like it very much'
           maxWidth='200px'
+          labelEffect={{
+            gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
+          }}
+          descriptionEffect={{
+            gradient: { colors: { 0: '#fd7600', 90: '#c997ff' }, type: 'radial' },
+          }}
+          effect={{
+            gradient: {
+              colors: { 0: '#be00fd', 130: '#e70eeb' },
+              direction: 'to left bottom',
+              animate: 'hover',
+            },
+          }}
           badge={{
             effect: {
               gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
@@ -109,11 +163,22 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         />
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
           Read only with badge
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal badge={20} onClick={alert}>
+        <ReqoreButton
+          {...buttonProps}
+          minimal
+          badge={20}
+          onClick={alert}
+          effect={{
+            gradient: { colors: { 90: '#ffe69c', 0: '#ff7818' }, type: 'radial' },
+          }}
+          labelEffect={{
+            gradient: { colors: { 0: '#ffe69c', 90: '#ff7818' }, type: 'radial' },
+          }}
+        >
           Minimal with badge
         </ReqoreButton>
         <ReqoreButton

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

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Checkbox from '../../components/Checkbox';
-import { ReqoreCheckbox, ReqoreControlGroup } from '../../index';
+import { ReqoreCheckbox, ReqoreControlGroup, ReqoreVerticalSpacer } from '../../index';
 
 export default {
   title: 'Components/Checkbox',
@@ -10,7 +10,7 @@ export default {
 const Template: ComponentStory<typeof Checkbox> = (args) => {
   return (
     <ReqoreControlGroup vertical>
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreCheckbox {...args} />
         <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
         <ReqoreCheckbox {...args} checked tooltip='I am checked' />
@@ -18,7 +18,8 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
         <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
         <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
       </ReqoreControlGroup>
-      <ReqoreControlGroup>
+      <ReqoreVerticalSpacer height={10} />
+      <ReqoreControlGroup wrap>
         <ReqoreCheckbox {...args} intent='info' checked />
         <ReqoreCheckbox
           {...args}
@@ -34,6 +35,8 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
           effect={{ gradient: { colors: { 0: '#00fafd', 100: '#ff00d0' } } }}
         />
         <ReqoreCheckbox {...args} disabled onText='yes' offText='no' />
+        <ReqoreCheckbox {...args} onText='yes' offText='no' />
+        <ReqoreCheckbox {...args} onText='yes' offText='no' checked />
         <ReqoreCheckbox
           {...args}
           label='Label'

package/src/stories/Collection/Collection.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react';
 import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Collection';
 import { IReqoreColumnsProps } from '../../components/Columns';
 import items from '../../mock/collectionData';
-import { argManager, IntentArg, SizeArg } from '../utils/args';
+import { IntentArg, SizeArg, argManager } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
   multipleColumns?: boolean;
@@ -45,7 +45,7 @@ export default {
       description: 'If true, the collection will be rounded when stacked',
     }),
     ...createArg('height', {
-      defaultValue: '600px',
+      defaultValue: undefined,
       type: 'string',
       name: 'Height',
       description: 'Height of the collection',
@@ -72,6 +72,8 @@ const Template: Story<IReqoreCollectionProps> = (args) => {
   return (
     <ReqoreCollection
       {...args}
+      badge={10}
+      selectedIcon='CheckLine'
       actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ value: 'Test' }] }]}
     />
   );
@@ -83,6 +85,13 @@ Basic.args = {
   items,
 };
 
+export const WithHeight = Template.bind({});
+WithHeight.args = {
+  label: 'Collection of items',
+  height: '600px',
+  items,
+};
+
 export const Stacked = Template.bind({});
 Stacked.args = {
   label: 'Collection of items',
@@ -96,3 +105,10 @@ Fill.args = {
   fill: true,
   items,
 };
+
+export const SelectedFirst = Template.bind({});
+SelectedFirst.args = {
+  label: 'Collection of items',
+  items,
+  showSelectedFirst: true,
+};

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -1,7 +1,14 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
-import ReqoreInput from '../../components/Input';
-import { ReqoreButton, ReqoreCheckbox, ReqoreControlGroup, ReqoreTag } from '../../index';
+import {
+  ReqoreButton,
+  ReqoreCheckbox,
+  ReqoreControlGroup,
+  ReqoreDropdown,
+  ReqoreInput,
+  ReqoreTag,
+  ReqoreVerticalSpacer,
+} from '../../index';
 import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
@@ -30,42 +37,240 @@ export default {
       description: 'Whether the control group should be fluid',
       control: 'boolean',
     }),
+    ...createArg('wrap', {
+      name: 'wrap',
+      defaultValue: true,
+      description: 'Whether the control group should wrap',
+      control: 'boolean',
+    }),
   },
 } as Meta<IReqoreControlGroupProps>;
 
 const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProps) => {
+  if (args.fill) {
+    return (
+      <>
+        <ReqoreControlGroup {...args} stack>
+          <ReqoreButton icon='PictureInPictureLine' description='I will be a bit larger'>
+            Button
+          </ReqoreButton>
+          <ReqoreControlGroup stack>
+            <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+          </ReqoreControlGroup>
+          <ReqoreControlGroup stack>
+            <ReqoreControlGroup>
+              <ReqoreInput customTheme={{ main: '#00e3e8' }} placeholder='Level 2 deep' />
+              <ReqoreControlGroup fixed>
+                <ReqoreButton disabled fixed id='test'>
+                  Level 3 deep and fixed
+                </ReqoreButton>
+              </ReqoreControlGroup>
+            </ReqoreControlGroup>
+            <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
+            <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
+          </ReqoreControlGroup>
+        </ReqoreControlGroup>
+        <ReqoreVerticalSpacer height={10} />
+        <ReqoreControlGroup {...args} stack>
+          <ReqoreButton
+            icon='PictureInPictureLine'
+            description='Here is a really weird and long description that needs to stretch the button a little bit so we can get some idea on how the other buttons are going to react.'
+            maxWidth='400px'
+          >
+            Please select
+          </ReqoreButton>
+          <ReqoreButton icon='AddLine' intent='info' />
+          <ReqoreButton>Edit</ReqoreButton>
+          <ReqoreButton icon='DeleteBinLine' intent='danger'>
+            Remove
+          </ReqoreButton>
+        </ReqoreControlGroup>
+        <ReqoreVerticalSpacer height={10} />
+        <ReqoreControlGroup {...args} stack fluid>
+          <ReqoreButton
+            icon='PictureInPictureLine'
+            description='Here is a really weird and long description that needs to stretch the button a little bit so we can get some idea on how the other buttons are going to react.'
+          >
+            Please select
+          </ReqoreButton>
+          <ReqoreButton icon='AddLine' intent='info' fixed />
+          <ReqoreButton fixed>Edit</ReqoreButton>
+          <ReqoreButton icon='DeleteBinLine' intent='danger' fixed>
+            Remove
+          </ReqoreButton>
+        </ReqoreControlGroup>
+      </>
+    );
+  }
+
+  if (args.responsive) {
+    return (
+      <div style={{ width: 600 }}>
+        <ReqoreControlGroup {...args} wrap={false}>
+          <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
+          <ReqoreControlGroup stack>
+            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+          </ReqoreControlGroup>
+          <ReqoreControlGroup stack>
+            <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+          </ReqoreControlGroup>
+          <ReqoreControlGroup stack>
+            <ReqoreControlGroup>
+              <ReqoreButton customTheme={{ main: '#00e3e8' }}>Level 2 deep</ReqoreButton>
+              <ReqoreControlGroup fixed>
+                <ReqoreButton disabled fixed id='test'>
+                  Level 3 deep and fixed
+                </ReqoreButton>
+              </ReqoreControlGroup>
+            </ReqoreControlGroup>
+            <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
+            <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
+          </ReqoreControlGroup>
+          <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
+          <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+        </ReqoreControlGroup>
+      </div>
+    );
+  }
+
   return (
-    <ReqoreControlGroup {...args}>
-      <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-      <ReqoreButton
-        icon='PictureInPictureLine'
-        flat={false}
-        effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
-      >
-        Non flat Button
-      </ReqoreButton>
-      <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-      <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-      <ReqoreCheckbox
-        asSwitch
-        label='Switchy switch'
-        margin='both'
-        intent='warning'
-        checkedIcon='CheckFill'
-        checked
-        uncheckedIcon='CheckboxBlankLine'
-      />
-      <ReqoreInput icon='4KFill' value='Hello' />
-      <ReqoreButton disabled fixed>
-        Disabled & Fixed
-      </ReqoreButton>
-      <ReqoreCheckbox checked margin='both'>
-        Checkbox
-      </ReqoreCheckbox>
-
-      <ReqoreButton minimal>Minimal</ReqoreButton>
-      <ReqoreTag label='smol tag' size='small' />
-    </ReqoreControlGroup>
+    <>
+      <ReqoreControlGroup {...args}>
+        <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
+        <ReqoreButton icon='PictureInPictureLine' fluid>
+          Fluid Button
+        </ReqoreButton>
+        <ReqoreButton
+          icon='PictureInPictureLine'
+          flat={false}
+          effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
+          description="With a description, it's a bit longer than the button itself"
+          fixed
+        >
+          Non flat fixed Button
+        </ReqoreButton>
+        <ReqoreControlGroup stack>
+          <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+          <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+        </ReqoreControlGroup>
+        <ReqoreCheckbox
+          asSwitch
+          label='Switchy switch'
+          margin='both'
+          intent='warning'
+          checkedIcon='CheckFill'
+          checked
+          uncheckedIcon='CheckboxBlankLine'
+        />
+        <ReqoreInput icon='4KFill' value='Hello I am fluid' fluid />
+        <ReqoreControlGroup stack>
+          <ReqoreControlGroup>
+            <ReqoreButton customTheme={{ main: '#00e3e8' }}>Level 2 deep</ReqoreButton>
+            <ReqoreControlGroup fixed>
+              <ReqoreButton disabled fixed id='test'>
+                Level 3 deep and fixed
+              </ReqoreButton>
+            </ReqoreControlGroup>
+          </ReqoreControlGroup>
+          <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
+          <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
+        </ReqoreControlGroup>
+
+        <ReqoreButton minimal>Minimal</ReqoreButton>
+        <ReqoreTag label='smol tag' size='small' />
+      </ReqoreControlGroup>
+      <ReqoreVerticalSpacer height={15} />
+      <ReqoreControlGroup {...args} className='root-group' id='root-group'>
+        <ReqoreControlGroup intent='info' className='group-1' id='group-1-wrapper'>
+          <ReqoreControlGroup intent='info' className='group-1' id='group-1'>
+            <>
+              <ReqoreButton icon='PictureInPictureLine' id='group-1-button'>
+                Group 1
+              </ReqoreButton>
+              <ReqoreTag icon='PictureInPictureLine' label='Group 1' id='group-1-tag' />
+            </>
+          </ReqoreControlGroup>
+          <ReqoreControlGroup intent='pending' className='group-1-1' id='group-1-1'>
+            <ReqoreButton icon='PictureInPictureLine' id='group-1-1-button'>
+              Group 1-1
+            </ReqoreButton>
+            <ReqoreTag icon='PictureInPictureLine' label='Group 1-1' id='group-1-1-tag' />
+            <ReqoreDropdown
+              items={[
+                {
+                  selected: true,
+                  label: 'Hello',
+                  value: 'hello',
+                  icon: 'SunCloudyLine',
+                },
+                {
+                  label: 'How are ya',
+                  value: 'howareya',
+                  icon: 'BatteryChargeFill',
+                },
+                {
+                  disabled: true,
+                  label: 'i aM diSAblEd',
+                  value: 'disabled',
+                  icon: 'StopCircleLine',
+                },
+                {
+                  label: 'With right button',
+                  value: 'kek',
+                  icon: 'CheckDoubleLine',
+                },
+              ]}
+            >
+              Dropdown
+            </ReqoreDropdown>
+          </ReqoreControlGroup>
+        </ReqoreControlGroup>
+        <ReqoreButton icon='PictureInPictureLine' id='group-root-button'>
+          Root group
+        </ReqoreButton>
+        <ReqoreControlGroup intent='success' className='group-2' id='group-2'>
+          <>
+            <ReqoreButton icon='PictureInPictureLine' id='group-2-button' fixed>
+              Group 2
+            </ReqoreButton>
+            <ReqoreControlGroup intent='danger' className='group-3' id='group-3'>
+              <ReqoreButton icon='PictureInPictureLine' id='group-3-button-1'>
+                Group 3
+              </ReqoreButton>
+              <ReqoreButton icon='PictureInPictureLine' id='group-3-button-2'>
+                Group 3
+              </ReqoreButton>
+            </ReqoreControlGroup>
+          </>
+          <ReqoreCheckbox label='Group 2' margin='both' id='group-2-checkbox' />
+        </ReqoreControlGroup>
+        <ReqoreButton icon='PictureInPictureLine' id='group-root-button-2'>
+          Root group
+        </ReqoreButton>
+        <ReqoreControlGroup intent='warning' className='group-4' id='group-4'>
+          <ReqoreControlGroup id='group-4-1' fluid={false}>
+            <ReqoreTag icon='PictureInPictureLine' label='Group 4' id='group-4-1-tag' />
+            <ReqoreInput icon='PictureInPictureLine' value='Group 4' id='group-4-1-input' />
+          </ReqoreControlGroup>
+          <ReqoreControlGroup id='group-4-3'>
+            <ReqoreTag icon='PictureInPictureLine' label='Group 4' id='group-4-3-tag' />
+            <>
+              <ReqoreInput icon='PictureInPictureLine' value='Group 4' id='group-4-3-input' />
+              <ReqoreControlGroup id='group-5' intent='muted' fluid={false}>
+                <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-1-tag' />
+                <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-2-tag' />
+                <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-3-tag' />
+                <ReqoreControlGroup id='group 6' intent='success'>
+                  <ReqoreButton fixed>Group 6</ReqoreButton>
+                </ReqoreControlGroup>
+              </ReqoreControlGroup>
+            </>
+          </ReqoreControlGroup>
+        </ReqoreControlGroup>
+      </ReqoreControlGroup>
+    </>
   );
 };
 
@@ -75,6 +280,16 @@ Minimal.args = {
   minimal: true,
 };
 
+export const Fluid = Template.bind({});
+Fluid.args = {
+  fluid: true,
+};
+
+export const Fill = Template.bind({});
+Fill.args = {
+  fill: true,
+};
+
 export const NotFlat = Template.bind({});
 NotFlat.args = {
   flat: false,
@@ -85,6 +300,19 @@ Vertical.args = {
   vertical: true,
 };
 
+export const VerticalFluid = Template.bind({});
+VerticalFluid.args = {
+  vertical: true,
+  fluid: true,
+};
+
+export const VerticalStackedFluid = Template.bind({});
+VerticalStackedFluid.args = {
+  vertical: true,
+  stack: true,
+  fluid: true,
+};
+
 export const Stacked = Template.bind({});
 Stacked.args = {
   stack: true,
@@ -94,3 +322,24 @@ export const BigGapSize = Template.bind({});
 BigGapSize.args = {
   gapSize: 'big',
 };
+
+export const NoWrap = Template.bind({});
+NoWrap.args = {
+  wrap: false,
+};
+
+export const HorizontalAlign = Template.bind({});
+HorizontalAlign.args = {
+  vertical: true,
+  horizontalAlign: 'center',
+};
+
+export const VerticalAlign = Template.bind({});
+VerticalAlign.args = {
+  verticalAlign: 'flex-end',
+};
+
+export const Responsive = Template.bind({});
+Responsive.args = {
+  responsive: true,
+};

package/src/stories/Drawer/Drawer.stories.tsx

@@ -2,14 +2,16 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
 import { useContext } from 'react';
 import { IReqoreDrawerProps, ReqoreDrawer } from '../../components/Drawer';
+import { IReqoreInputProps } from '../../components/Input';
 import {
   ReqoreButton,
   ReqoreContext,
+  ReqoreInput,
   ReqorePanel,
   ReqoreTabs,
   ReqoreTabsContent,
 } from '../../index';
-import { argManager, FlatArg, IntentArg } from '../utils/args';
+import { FlatArg, IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreDrawerProps>();
 
@@ -46,7 +48,7 @@ export default {
       options: ['left', 'right', 'top', 'bottom'],
     }),
     ...createArg('size', {
-      defaultValue: '450px',
+      defaultValue: 'auto',
       name: 'Size',
       type: 'string',
     }),
@@ -124,7 +126,68 @@ const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
         attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had
         judgment out opinions property the supplied.
       </ReqorePanel>
-      <ReqoreDrawer {...args} label='This is a test' icon='EmphasisCn' onClose={noop}>
+      <ReqoreDrawer
+        {...args}
+        label='This is a test'
+        icon='EmphasisCn'
+        onClose={noop}
+        actions={[
+          {
+            responsive: false,
+            group: [
+              {
+                label: 'Non responsive',
+                icon: '24HoursFill',
+                customTheme: { main: '#eb0e8c' },
+              },
+              {
+                icon: 'FullscreenExitLine',
+                customTheme: { main: '#a40a62' },
+              },
+            ],
+          },
+          {
+            group: [
+              { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
+              { icon: 'CopperCoinFill', intent: 'danger' },
+            ],
+          },
+          {
+            as: ReqoreInput,
+            props: {
+              placeholder: 'Custom action!',
+              icon: 'Search2Line',
+              minimal: false,
+            } as IReqoreInputProps,
+          },
+          {
+            label: 'More actions',
+            actions: [
+              { value: 'Sub Test', icon: 'FileDownloadLine' },
+              { value: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
+            ],
+            intent: 'info',
+          },
+        ]}
+        bottomActions={[
+          {
+            position: 'left',
+            intent: 'success',
+            group: [
+              { label: 'Test 1', icon: '24HoursFill' },
+              { label: 'Test 2', icon: '24HoursFill' },
+            ],
+          },
+          {
+            label: 'More actions',
+            position: 'right',
+            actions: [
+              { value: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
+              { value: 'Sub Test 2', icon: 'FileDownloadLine' },
+            ],
+          },
+        ]}
+      >
         <ReqoreTabs
           flat
           intent={args.intent}
@@ -179,3 +242,7 @@ export const Transparent = Template.bind({});
 Transparent.args = {
   opacity: 0.5,
 };
+export const WithSize = Template.bind({});
+WithSize.args = {
+  size: '500px',
+};