pixel-react-excel-sheet 1.2.0

package/src/components/Icon/iconList.ts

@@ -0,0 +1,240 @@
+let Components: any = {};
+
+import ManageApps from '../../assets/Icons/manage_apps.svg?react';
+import Logo from '../../assets/icons/logo.svg?react';
+import ArrowUp from '../../assets/icons/arrow_up.svg?react';
+import ArrowRight from '../../assets/icons/arrow_right.svg?react';
+import AccordionHeaderIcon from '../../assets/icons/accordion_header_icon.svg?react';
+import DeleteInfoIcon from '../../assets/icons/delete_info.svg?react';
+import WarningIcon from '../../assets/icons/warning.svg?react';
+import ToastInfoIcon from '../../assets/icons/info.svg?react';
+import ToastErrorIcon from '../../assets/icons/error.svg?react';
+import ToastCloseIcon from '../../assets/icons/toast_close.svg?react';
+import ToastSuccessIcon from '../../assets/icons/success.svg?react';
+import MoreIcon from '../../assets/icons/more.svg?react';
+import DropZoneIcon from '../../assets/icons/dropzone_icon.svg?react';
+import File from '../../assets/icons/file.svg?react';
+import Replace from '../../assets/icons/replace.svg?react';
+import Remove from '../../assets/icons/remove.svg?react';
+import PlusIcon from '../../assets/icons/plus_icon.svg?react';
+import ArrowsTopIcon from '../../assets/icons/arrows_top_icon.svg?react';
+import ArrowsRightIcon from '../../assets/icons/arrows_right_icon.svg?react';
+import ArrowsDownIcon from '../../assets/icons/arrows_down_icon.svg?react'; // import ArrowUp from '../../assets/Icons/arrow_up.svg?react';
+import ArrowDown from '../../assets/Icons/arrow_down.svg?react';
+import ClosePill from '../../assets/Icons/close_pill.svg?react';
+import MoonStarsIcon from '../../assets/icons/moon_stars.svg?react';
+import SunIcon from '../../assets/icons/sun_icon.svg?react';
+import CheckMarkIcon from '../../assets/icons/check_mark.svg?react';
+import WrongMarkIcon from '../../assets/icons/wrong_mark.svg?react';
+import FireflinkIcon from '../../assets/Icons/fireflink_icon.svg?react';
+import Tick from '../../assets/Icons/tick_icon.svg?react';
+import Search from '../../assets/icons/search.svg?react';
+import Filter from '../../assets/icons/filter.svg?react';
+import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
+import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
+import ClockIcon from '../../assets/icons/clock_icon.svg?react';
+import Edit from '../../assets/icons/edit_icon.svg?react';
+import ViewIcon from '../../assets/icons/view_icon.svg?react';
+import ExportCollection from '../../assets/icons/export_collection_icon.svg?react';
+import RunIcon from '../../assets/icons/run_icon.svg?react';
+import AddVariable from '../../assets/icons/add_variable_icon.svg?react';
+import ManualLocator from '../../assets/icons/manual_locator.svg?react';
+import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
+import DeleteIcon from '../../assets/icons/delete.svg?react';
+import DetailsIcon from '../../assets/icons/details.svg?react';
+import ImpactListIcon from '../../assets/icons/impactList.svg?react';
+import FormatePainter from '../../assets/icons/formate_painter.svg?react';
+import Bold from '../../assets/icons/bold.svg?react';
+import Italic from '../../assets/icons/italic.svg?react';
+import StrikeThrough from '../../assets/icons/strike_through.svg?react';
+import Underline from '../../assets/icons/underline.svg?react';
+import DoubleUnderline from '../../assets/icons/double_underline.svg?react';
+import AllBorders from '../../assets/icons/all_borders.svg?react';
+import BorderBottom from '../../assets/icons/border_bottom.svg?react';
+import BorderLeft from '../../assets/icons/border_left.svg?react';
+import BorderRight from '../../assets/icons/border_right.svg?react';
+import BorderTop from '../../assets/icons/border_top.svg?react';
+import NoBorder from '../../assets/icons/no_border.svg?react';
+import TextAlignCenter from '../../assets/icons/text_align_center.svg?react';
+import TextAlignLeft from '../../assets/icons/text_align_left.svg?react';
+import TextAlignRight from '../../assets/icons/text_align_right.svg?react';
+import TextColor from '../../assets/icons/text_color.svg?react';
+import FillColor from '../../assets/icons/fill_color.svg?react';
+import InfoIcon from '../../assets/icons/info_icon.svg?react';
+import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
+import HideIcon from '../../assets/icons/hide_icon.svg?react';
+import VerticalSeparator from '../../assets/icons/vertical_separator.svg?react';
+import CollapseIcon from '../../assets/icons/collapse-icon.svg?react';
+import ExpandIcon from '../../assets/icons/expand-icon.svg?react';
+import CopyIcon from '../../assets/icons/copy-icon.svg?react';
+import DownloadFile from '../../assets/icons/download-icon.svg?react';
+import RefreshIcon from '../../assets/icons/refresh-icon.svg?react';
+import LicenseInfo from '../../assets/icons/license_info.svg?react';
+import LicenseWarning from '../../assets/icons/license_warning.svg?react';
+import Windows from '../../assets/icons/windows.svg?react';
+import DataListIcon from '../../assets/icons/dataset_list.svg?react';
+import Mac from '../../assets/icons/mac.svg?react';
+import Android from '../../assets/icons/android.svg?react';
+import Chrome from '../../assets/icons/chrome.svg?react';
+import BrowserStack from '../../assets/icons/browser_stack.svg?react';
+import Run from '../../assets/icons/run_icon.svg?react';
+
+import DownloadIcon from '../../assets/icons/download_icon.svg?react';
+import WebIcon from '../../assets/icons/web_icon.svg?react';
+import WebMobileIcon from '../../assets/icons/web&mobile_icon.svg?react';
+import MobileIcon from '../../assets/icons/mobile_icon.svg?react';
+import SalesForceIcon from '../../assets/icons/sales_force.svg?react';
+import MSDynamicIcon from '../../assets/icons/ms_dynamic.svg?react';
+import AllProjectsIcon from '../../assets/icons/all_projects.svg?react';
+import AndroidIcon from '../../assets/icons/android_icon.svg?react';
+import NoAccessIcon from '../../assets/icons/no_access_icon.svg?react';
+import FullAccessIcon from '../../assets/icons/full_access_icon.svg?react';
+import ViewAccessIcon from '../../assets/icons/view_access_icon.svg?react';
+import AddLocator from '../../assets/icons/add_locator.svg?react';
+import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
+
+import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
+import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
+import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react';
+import WSWBPlusIcon from '../../assets/icons/wswb_plus_icon.svg?react';
+import LabelPlusIcon from '../../assets/icons/label_plus.svg?react';
+import Drag from '../../assets/icons/drag_icon.svg?react';
+import BackwardIcon from '../../assets/icons/backward_icon.svg?react';
+import ForwardIcon from '../../assets/icons/forward_icon.svg?react';
+import Reload from '../../assets/icons/reload.svg?react';
+import WindowMaximize from '../../assets/icons/window_maximize.svg?react';
+import WindowMinimize from '../../assets/icons/window_minimize.svg?react';
+import HamburgerMenu from '../../assets/icons/hamburger_menu.svg?react';
+import AppSwitchIcon from '../../assets/icons/app_switch.svg?react';
+import UserProfile from '../../assets/icons/user_profile.svg?react';
+import ContinueSignIn from '../../assets/icons/continue_without_sign.svg?react';
+import CloudServerHost from '../../assets/icons/cloud_server_host_icon.svg?react';
+import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
+import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
+import UpdateIcon from '../../assets/icons/update_icon.svg?react';
+import AddFile from '../../assets/icons/add_file.svg?react';
+
+import CloneIcon from '../../assets/icons/clone_icon.svg?react';
+import MoveIcon from '../../assets/icons/move_icon.svg?react';
+import Jira from '../../assets/icons/jira.svg?react';
+import HistoryIcon from '../../assets//icons/history_icon.svg?react';
+import LinkedDefects from '../../assets//icons/linked_defects.svg?react';
+
+Components['delete_info'] = DeleteInfoIcon;
+Components['success'] = ToastSuccessIcon;
+Components['warning'] = WarningIcon;
+Components['toast_info'] = ToastInfoIcon;
+Components['error'] = ToastErrorIcon;
+Components['close'] = ToastCloseIcon;
+Components['more'] = MoreIcon;
+Components['logo'] = Logo;
+Components['manage_apps'] = ManageApps;
+Components['arrow_up'] = ArrowUp;
+Components['accordion_header_icon'] = AccordionHeaderIcon;
+Components['dropzone_icon'] = DropZoneIcon;
+Components['file'] = File;
+Components['replace'] = Replace;
+Components['remove'] = Remove;
+Components['plus_icon'] = PlusIcon;
+Components['arrows_top_icon'] = ArrowsTopIcon;
+Components['arrows_right_icon'] = ArrowsRightIcon;
+Components['arrows_down_icon'] = ArrowsDownIcon;
+Components['arrow_down'] = ArrowDown;
+Components['close_pill'] = ClosePill;
+Components['moon_stars_icon'] = MoonStarsIcon;
+Components['sun_icon'] = SunIcon;
+Components['check_mark'] = CheckMarkIcon;
+Components['wrong_mark'] = WrongMarkIcon;
+Components['fireflink_icon'] = FireflinkIcon;
+Components['tick'] = Tick;
+Components['arrow_right'] = ArrowRight;
+Components['search'] = Search;
+Components['filter'] = Filter;
+Components['right_arrow_icon'] = RightArrow;
+Components['left_arrow_icon'] = LeftArrow;
+Components['clock_icon'] = ClockIcon;
+Components['edit'] = Edit;
+Components['view_icon'] = ViewIcon;
+Components['export_collection'] = ExportCollection;
+Components['run_icon'] = RunIcon;
+Components['license'] = LicenseIcon;
+Components['delete'] = DeleteIcon;
+Components['details'] = DetailsIcon;
+Components['impactList'] = ImpactListIcon;
+Components['add_variable'] = AddVariable;
+Components['formate_painter'] = FormatePainter;
+Components['bold'] = Bold;
+Components['italic'] = Italic;
+Components['strike_through'] = StrikeThrough;
+Components['underline'] = Underline;
+Components['double_underline'] = DoubleUnderline;
+Components['border_left'] = BorderLeft;
+Components['border_right'] = BorderRight;
+Components['border_bottom'] = BorderBottom;
+Components['border_top'] = BorderTop;
+Components['all_borders'] = AllBorders;
+Components['no_border'] = NoBorder;
+Components['text_align_center'] = TextAlignCenter;
+Components['text_align_left'] = TextAlignLeft;
+Components['text_align_right'] = TextAlignRight;
+Components['text_color'] = TextColor;
+Components['fill_color'] = FillColor;
+Components['info'] = InfoIcon;
+Components['calendar_icon'] = CalendarIcon;
+Components['hide_icon'] = HideIcon;
+Components['vertical_separator'] = VerticalSeparator;
+Components['collapse_icon'] = CollapseIcon;
+Components['refresh_icon'] = RefreshIcon;
+Components['download_file'] = DownloadFile;
+Components['copy_icon'] = CopyIcon;
+Components['expand_icon'] = ExpandIcon;
+Components['license_info'] = LicenseInfo;
+Components['license_warning'] = LicenseWarning;
+Components['download_icon'] = DownloadIcon;
+Components['web_icon'] = WebIcon;
+Components['web&mobile_icon'] = WebMobileIcon;
+Components['mobile_icon'] = MobileIcon;
+Components['sales_force'] = SalesForceIcon;
+Components['ms_dynamic'] = MSDynamicIcon;
+Components['all_projects'] = AllProjectsIcon;
+Components['android_icon'] = AndroidIcon;
+Components['plus_user_icon'] = PlusUserIcon;
+Components['label_plus'] = LabelPlusIcon;
+Components['manual_locator'] = ManualLocator;
+Components['select_license'] = SwitchLicenseIcon;
+Components['fireflink-logo'] = FireflinkLogo;
+Components['wswb_delete_icon'] = WSWBDeleteIcon;
+Components['wswb_plus_icon'] = WSWBPlusIcon;
+Components['add_locator'] = AddLocator;
+Components['drag'] = Drag;
+Components['windows'] = Windows;
+Components['datalist_icon'] = DataListIcon;
+Components['mac_icon'] = Mac;
+Components['android_icon'] = Android;
+Components['chrome_icon'] = Chrome;
+Components['browser_stack_icon'] = BrowserStack;
+Components['run_icon'] = Run;
+Components['backward_icon'] = BackwardIcon;
+Components['forward_icon'] = ForwardIcon;
+Components['reload'] = Reload;
+Components['window_maximize'] = WindowMaximize;
+Components['window_minimize'] = WindowMinimize;
+Components['hamburger_menu'] = HamburgerMenu;
+Components['app_switch'] = AppSwitchIcon;
+Components['user_profile'] = UserProfile;
+Components['continue_without_signin'] = ContinueSignIn;
+Components['cloud_server_host'] = CloudServerHost;
+Components['notification_icon'] = NotificationIcon;
+Components['nlp_help_icon'] = NLPHelpIcon;
+Components['update_icon'] = UpdateIcon;
+Components['add_file'] = AddFile;
+Components['clone_icon'] = CloneIcon;
+Components['move_icon'] = MoveIcon;
+Components['jira'] = Jira;
+Components['history'] = HistoryIcon;
+Components['linked_defects'] = LinkedDefects;
+Components['no_access_icon'] = NoAccessIcon;
+Components['full_access_icon'] = FullAccessIcon;
+Components['view_access_icon'] = ViewAccessIcon;
+
+export default Components;

package/src/components/Icon/index.ts

@@ -0,0 +1 @@
+export { default } from './Icon';

package/src/components/Icon/types.ts

@@ -0,0 +1,10 @@
+export interface IconProps {
+  name: string;
+  className?: string;
+  height?: number;
+  width?: number;
+  color?: string;
+  onClick?: (data?: any) => void;
+  hoverEffect?: boolean;
+  disabled?: boolean;
+}

package/src/components/IconButton/IconButton.scss

@@ -0,0 +1,54 @@
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins';
+
+.ff-plus-icon {
+  border-radius: 16px;
+  border-style: none;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  @include mixins.center-content();
+  gap: 8px;
+  background-color: var(--secondary-icon-color);
+  padding: 2px 8px 2px 2px;
+  border: 1px solid transparent;
+  .button-icon {
+    width: 20px;
+    height: 20px;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    @include mixins.center-content();
+    background-color: var(--hover-color);
+    .ff-icon-color {
+      path {
+        color: var(--secondary-icon-color);
+      }
+    }
+  }
+  .icon-name {
+    color: var(--primary-icon-color);
+    @include mixins.center-content();
+  }
+  &:hover {
+    border: 1px solid var(--secondary-icon-color);
+    background-color: var(--hover-color);
+    .icon-name {
+      font-weight: 600;
+      color: var(--secondary-icon-color);
+      @include mixins.center-content();
+    }
+    .button-icon {
+      width: 20px;
+      height: 20px;
+      border: 1px solid transparent;
+      border-radius: 50%;
+      @include mixins.center-content();
+      background-color: var(--secondary-icon-color);
+      .ff-icon-color {
+        path {
+          color: var(--primary-icon-color);
+        }
+      }
+    }
+  }
+}

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import IconButton from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof IconButton>;
+
+export const Default: Story = {
+  args: {
+    label: 'Script',
+    iconName: 'download_icon',
+    onClick: () => {},
+  },
+};
+
+export const PrimaryIconButton: Story = {
+  render: () => {
+    const name = 'Project';
+    const icon = 'plus_user_icon';
+    const onClick = () => {};
+
+    return <IconButton label={name} iconName={icon} onClick={onClick} />;
+  },
+};
+
+export default meta;

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Icon from '../Icon';
+import './IconButton.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import { IconButtonProps } from './types';
+
+const IconButton: React.FC<IconButtonProps> = ({
+  label,
+  iconName = 'plus_user_icon',
+  onClick,
+}) => {
+  return (
+    <button onClick={onClick} className={classNames('ff-plus-icon')}>
+      <div className={classNames('button-icon')}>
+      <Icon
+        height={12}
+        width={12}
+        name={iconName}
+        className={'ff-icon-color'}
+      />
+      </div>
+      <Typography as="div" textAlign="center" className="icon-name">
+        {label}
+      </Typography>
+    </button>
+  );
+};
+
+export default IconButton;

package/src/components/IconButton/index.ts

@@ -0,0 +1 @@
+export { default } from './IconButton';

package/src/components/IconButton/types.ts

@@ -0,0 +1,5 @@
+export interface IconButtonProps {
+  label: string;
+  iconName: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}

package/src/components/IconRadioGroup/IconRadioGroup.scss

@@ -0,0 +1,60 @@
+.ff-icon-radio-group {
+  width: 237px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 47px;
+  position: relative;
+}
+
+.ff-icon-radio-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+
+  &.selected {
+    background-color: var(--brand-color);
+  }
+
+  &.disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
+
+  .icon-container {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--border-color);
+    background: var(--drawer-footer-bg);
+
+    &.selected {
+      background-color: var(--brand-color);
+    }
+
+    .icon {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.line-connector {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--border-color);
+  z-index: -1;
+  border-radius: 2px 0px 0px 0px;
+  opacity: 0px;
+}

package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx

@@ -0,0 +1,108 @@
+import { Meta, StoryObj } from '@storybook/react';
+import IconRadioGroup from './IconRadioGroup';
+import { useState } from 'react';
+
+const meta: Meta<typeof IconRadioGroup> = {
+  title: 'Components/IconRadioGroup',
+  component: IconRadioGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof IconRadioGroup>;
+
+export const Default: Story = {
+  render: () => {
+    const radioOptions = [
+      {
+        iconName: 'no_access_icon',
+        iconLabel: 'No Access',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'view_access_icon',
+        iconLabel: 'View',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'edit',
+        iconLabel: 'Edit',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'full_access_icon',
+        iconLabel: 'Full Access',
+        disabled: false,
+        disableMessage: '',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+    const handleOptionChange = (selected: string | null) => {
+      setSelectedOption(selected);
+    };
+
+    return (
+      <IconRadioGroup
+        items={radioOptions}
+        onButtonClick={(selectedItem) => console.log('Selected:', selectedItem)}
+        onChange={handleOptionChange}
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const WithDisabledOption: Story = {
+  render: () => {
+    const radioOptions = [
+      {
+        iconName: 'no_access_icon',
+        iconLabel: 'No Access',
+        disabled: true,
+        disableMessage: 'user dont have access',
+      },
+      {
+        iconName: 'view_access_icon',
+        iconLabel: 'View',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'edit',
+        iconLabel: 'Edit',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'full_access_icon',
+        iconLabel: 'Full Access',
+        disabled: false,
+        disableMessage: '',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+    const handleOptionChange = (selected: string | null) => {
+      setSelectedOption(selected);
+    };
+
+    return (
+      <IconRadioGroup
+        items={radioOptions}
+        onButtonClick={() => {}}
+        onChange={handleOptionChange}
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/IconRadioGroup/IconRadioGroup.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import './IconRadioGroup.scss';
+import Icon from '../Icon/Icon';
+import { IconRadioItem, IconRadioGroupProps } from './type';
+
+const IconRadioGroup: React.FC<IconRadioGroupProps> = ({
+  items,
+  onButtonClick,
+  selectedValue: initialSelectedValue = null,
+  onChange,
+  className = '',
+}) => {
+  const [selectedValue, setSelectedValue] = useState<string | null>(
+    initialSelectedValue
+  );
+
+  useEffect(() => {
+    if (initialSelectedValue !== selectedValue) {
+      setSelectedValue(initialSelectedValue);
+    }
+  }, [initialSelectedValue, selectedValue]);
+
+  const handleButtonClick = (item: IconRadioItem) => {
+    if (item.disabled) return;
+
+    const newSelectedValue = item.iconName;
+    setSelectedValue(newSelectedValue);
+
+    if (onChange) {
+      onChange(newSelectedValue);
+    }
+
+    onButtonClick(item);
+  };
+
+  return (
+    <div className={classNames('ff-icon-radio-group', className)}>
+      {items.map((item) => (
+        <div
+          key={item.iconName}
+          className={classNames('ff-icon-radio-button', {
+            selected: selectedValue === item.iconName,
+            disabled: item.disabled,
+          })}
+          onClick={() => handleButtonClick(item)}
+        >
+          <div
+            className={classNames('icon-container', {
+              selected: selectedValue === item.iconName,
+            })}
+          >
+            <Icon
+              name={item.iconName}
+              height={14}
+              width={14}
+              hoverEffect={false}
+              color={
+                selectedValue === item.iconName
+                  ? 'var(--drawer-footer-bg)'
+                  : 'var(--brand-color)'
+              }
+            />
+          </div>
+        </div>
+      ))}
+      <div className="line-connector"></div>
+    </div>
+  );
+};
+
+export default IconRadioGroup;

package/src/components/IconRadioGroup/index.ts

@@ -0,0 +1 @@
+export { default } from './IconRadioGroup';

package/src/components/IconRadioGroup/type.ts

@@ -0,0 +1,50 @@
+export interface IconRadioItem {
+    /**
+     * The unique name for the icon, used to load the corresponding icon.
+     */
+    iconName: string;
+  
+    /**
+     * The display label for the icon. This can be used for accessibility purposes.
+     */
+    iconLabel: string;
+  
+    /**
+     * Flag to determine if the icon option is disabled.
+     */
+    disabled?: boolean;
+  
+    /**
+     * Message to display when the option is disabled.
+     */
+    disableMessage?: string;
+  }
+  
+  export interface IconRadioGroupProps {
+    /**
+     * Array of icon items that make up the radio button group.
+     */
+    items: IconRadioItem[];
+  
+    /**
+     * Callback function called when a button/icon is clicked. 
+     * It returns the selected item.
+     */
+    onButtonClick: (selectedItem: IconRadioItem) => void;
+  
+    /**
+     * The currently selected icon value
+     */
+    selectedValue?: string | null;
+  
+    /**
+     * Callback function to notify parent of selection change.
+     */
+    onChange?: (selected: string | null) => void;
+  
+    /**
+     * Optional className for custom styling
+     */
+    className?: string;
+  }
+