fix: added component description for figma kit

example/storybook/src/components/DataDisplay/Badge/Badge.stories.tsx

@@ -4,6 +4,12 @@ import Badge from './Badge';
 const BadgeMeta: ComponentMeta<typeof Badge> = {
   title: 'stories/DATA DISPLAY/Badge',
   component: Badge,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription:
+      'The badge component lets you quickly and easily add status indicators to your interface for improved usability. They are designed to be attention-grabbing and quickly convey important information.',
+  },
   argTypes: {
     variant: {
       control: 'select',

example/storybook/src/components/DataDisplay/Divider/Divider.stories.tsx

@@ -4,6 +4,12 @@ import Divider from './Divider';
 const DividerMeta: ComponentMeta<typeof Divider> = {
   title: 'stories/DATA DISPLAY/Divider',
   component: Divider,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription:
+      'Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.',
+  },
   argTypes: {
     orientation: {
       control: 'select',

example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.stories.tsx

@@ -11,6 +11,11 @@ import ActionsheetWithKeyboardAvoidingViewWithSnapPoints from './ActionsheetAvoi
 const ActionsheetMeta: ComponentMeta<typeof Actionsheet> = {
   title: 'stories/DISCLOSURE/Actionsheet',
   component: Actionsheet,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.`,
+  },
 };
 
 export default ActionsheetMeta;

example/storybook/src/components/Feedback/Alert/Alert.stories.tsx

@@ -5,6 +5,11 @@ import AlertVariants from './Variants';
 const AlertMeta: ComponentMeta<typeof Alert> = {
   title: 'stories/FEEDBACK/Alert',
   component: Alert,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.`,
+  },
   argTypes: {
     variant: {
       control: 'select',

example/storybook/src/components/Feedback/Progress/Progress.stories.tsx

@@ -4,6 +4,11 @@ import Progress from './Progress';
 const ProgressMeta: ComponentMeta<typeof Progress> = {
   title: 'stories/FEEDBACK/Progress',
   component: Progress,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete.`,
+  },
   argTypes: {
     value: {
       type: 'number',

example/storybook/src/components/Feedback/Spinner/Spinner.stories.tsx

@@ -4,6 +4,11 @@ import Spinner from './Spinner';
 const SpinnerMeta: ComponentMeta<typeof Spinner> = {
   title: 'stories/FEEDBACK/Spinner',
   component: Spinner,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/Feedback/Toast/Toast.stories.tsx

@@ -5,6 +5,11 @@ import DuplicateToastPrevent from './DuplicateToastPrevent';
 const ToastMeta: ComponentMeta<typeof Toast> = {
   title: 'stories/FEEDBACK/Toast',
   component: Toast,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.`,
+  },
   argTypes: {
     placement: {
       control: 'select',

example/storybook/src/components/Forms/Button/Button.stories.tsx

@@ -8,6 +8,11 @@ import ButtonWithIconsTemp from './ButtonWithIcon';
 const ButtonMeta: ComponentMeta<typeof Button> = {
   title: 'stories/FORMS/Button',
   component: Button,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `A button component is a graphical user interface element that enables users to act by clicking or tapping.`,
+  },
   args: {
     action: 'primary',
     variant: 'solid',

example/storybook/src/components/Forms/Button/ButtonGroup.stories.tsx

@@ -4,6 +4,11 @@ import ButtonGroup from './ButtonGroup';
 const ButtonGroupMeta: ComponentMeta<any> = {
   title: 'stories/FORMS/Button',
   component: ButtonGroup,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Buttons can be grouped together as individual segments of related actions.`,
+  },
   args: {
     space: 'md',
     isAttached: true,

example/storybook/src/components/Forms/Checkbox/Checkbox.stories.tsx

@@ -4,6 +4,11 @@ import Checkbox from './Checkbox';
 const CheckboxMeta: ComponentMeta<typeof Checkbox> = {
   title: 'stories/FORMS/Checkbox',
   component: Checkbox,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/Forms/FormControl/FormControl.stories.tsx

@@ -4,6 +4,11 @@ import FormControl from './FormControl';
 const FormControlMeta: ComponentMeta<typeof FormControl> = {
   title: 'stories/FORMS/FormControl',
   component: FormControl,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.`,
+  },
   argTypes: {
     isInvalid: {
       control: 'boolean',

example/storybook/src/components/Forms/Input/Input.stories.tsx

@@ -5,6 +5,11 @@ import InputIcon from './InputIcon';
 const InputMeta: ComponentMeta<typeof Input> = {
   title: 'stories/FORMS/Input',
   component: Input,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Input component is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/Forms/Link/Link.stories.tsx

@@ -4,6 +4,11 @@ import Link from './Link';
 const LinkMeta: ComponentMeta<typeof Link> = {
   title: 'stories/FORMS/Link',
   component: Link,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `With links, users can navigate seamlessly throughout a website. This component has a hyperlinked appearance for a user-friendly experience.`,
+  },
   argTypes: {
     isHovered: {
       control: 'boolean',

example/storybook/src/components/Forms/Pressable/Pressable.stories.tsx

@@ -4,6 +4,11 @@ import Pressable from './Pressable';
 const PressableMeta: ComponentMeta<typeof Pressable> = {
   title: 'stories/FORMS/Pressable',
   component: Pressable,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.`,
+  },
   argTypes: {},
   args: {},
 };

example/storybook/src/components/Forms/Radio/Radio.stories.tsx

@@ -4,6 +4,11 @@ import Radio from './Radio';
 const RadioMeta: ComponentMeta<typeof Radio> = {
   title: 'stories/FORMS/Radio',
   component: Radio,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Radio component presents users with predefined choices and enables them to select only one option. It is commonly used for providing a single-choice selection in forms or surveys.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/Forms/Select/Select.stories.tsx

@@ -10,6 +10,11 @@ import type { ComponentMeta } from '@storybook/react-native';
 const SelectMeta: ComponentMeta<typeof Select> = {
   title: 'stories/FORMS/Select',
   component: Select,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Select offers a dynamic and user-friendly way to present a list of options in a closed view, with the ability to expand and select items from a dropdown list.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/Forms/Slider/Slider.stories.tsx

@@ -4,6 +4,11 @@ import Slider from './Slider';
 const SliderMeta: ComponentMeta<typeof Slider> = {
   title: 'stories/FORMS/Slider',
   component: Slider,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Slider component enables an intuitive selection of values within a designated range. Users can easily adjust their selection by sliding a visual indicator along the track.`,
+  },
   argTypes: {
     value: {
       control: { type: 'number', min: 1, max: 100 },

example/storybook/src/components/Forms/Switch/Switch.stories.tsx

@@ -4,6 +4,11 @@ import Switch from './Switch';
 const SwitchMeta: ComponentMeta<typeof Switch> = {
   title: 'stories/FORMS/Switch',
   component: Switch,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Switch component offers a stylish alternative to the Checkbox, allowing users to enable or disable an option with a sleek sliding motion.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/Forms/Tabs/Tabs.stories.tsx

@@ -4,6 +4,11 @@ import Tabs from './Tabs';
 const TabsMeta: ComponentMeta<typeof Tabs> = {
   title: 'stories/DISCLOSURE/Tabs',
   component: Tabs,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Tabs Desc`,
+  },
   argTypes: {
     isDisabled: {
       control: 'boolean',

example/storybook/src/components/Forms/Textarea/Textarea.stories.tsx

@@ -4,6 +4,11 @@ import Textarea from './Textarea';
 const TextareaMeta: ComponentMeta<typeof Textarea> = {
   title: 'stories/FORMS/Textarea',
   component: Textarea,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Textarea component is designed to accommodate larger amounts of text input. It allows multi-line input and can be easily customized to fit the user's needs.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/MediaAndIcons/Avatar/Avatar.stories.tsx

@@ -6,6 +6,11 @@ import AvatarSizeExample from './AvatarSizes';
 const AvatarMeta: ComponentMeta<typeof Avatar> = {
   title: 'stories/MEDIA AND ICONS/Avatar',
   component: Avatar,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Avatar component is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging.`,
+  },
   args: {
     size: 'md',
     uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',

example/storybook/src/components/MediaAndIcons/Icon/Icon.stories.tsx

@@ -61,8 +61,12 @@ import {
 const IconMeta: ComponentMeta<typeof Icon> = {
   title: 'stories/MEDIA AND ICONS/Icons',
   component: Icon,
+  // metaInfo is required for figma generation
+  // @ts-ignore
   metaInfo: {
-    clusteringOrder: [['name', 'displayName'], 'size'],
+    clusteringOrder: [['as', 'displayName'], 'size'],
+    componentDescription:
+      'Icons are often used to enhance the usability and accessibility of digital products by providing users with clear and intuitive visual cues. It serves as an intuitive and easily recognizable way to communicate with users.',
   },
   argTypes: {
     size: {

example/storybook/src/components/MediaAndIcons/Icon/Icon.tsx

@@ -62,8 +62,8 @@ import {
 
 import { ChromeIcon, InstagramIcon, FacebookIcon } from 'lucide-react-native';
 
-const IconBasic = ({ size, name, ...props }: any) => {
-  return <Icon as={name} size={size} {...props} />;
+const IconBasic = ({ size, ...props }: any) => {
+  return <Icon size={size} {...props} />;
 };
 
 IconBasic.description =

example/storybook/src/components/MediaAndIcons/Image/Image.stories.tsx

@@ -5,6 +5,11 @@ import ImageSizesStory from './ImageSizes';
 const ImageMeta: ComponentMeta<typeof Image> = {
   title: 'stories/MEDIA AND ICONS/Image',
   component: Image,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `With the Image component, you can enhance the look and feel of your app or website by incorporating compelling imagery.`,
+  },
   argTypes: {},
   args: {
     uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',

example/storybook/src/components/Others/Fab/Fab.stories.tsx

@@ -4,6 +4,11 @@ import Fab from './Fab';
 const FabMeta: ComponentMeta<typeof Fab> = {
   title: 'stories/OTHERS/Fab',
   component: Fab,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Floating Action Button (FAB) is a dynamic button that stays visible and provides access to a primary action throughout the user's journey in the application. It is a powerful UI element that adds a touch of elegance and convenience to the user experience.`,
+  },
   argTypes: {
     placement: {
       control: 'select',

example/storybook/src/components/Overlay/AlertDialog/AlertDialog.stories.tsx

@@ -4,6 +4,11 @@ import AlertDialog from './AlertDialog';
 const AlertDialogMeta: ComponentMeta<typeof AlertDialog> = {
   title: 'stories/OVERLAY/AlertDialog',
   component: AlertDialog,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `AlertDialog effectively interrupts a user's flow and prompts them to take a specific action. It's commonly used for mandatory confirmations or call-to-actions.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/Overlay/Menu/Menu.stories.tsx

@@ -4,6 +4,11 @@ import Menu from './Menu';
 const MenuMeta: ComponentMeta<typeof Menu> = {
   title: 'stories/OVERLAY/Menu',
   component: Menu,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user.`,
+  },
   argTypes: {
     placement: {
       control: 'select',

example/storybook/src/components/Overlay/Modal/Modal.stories.tsx

@@ -5,6 +5,11 @@ import MultipleModal from './MultipleModal';
 const ModalMeta: ComponentMeta<typeof Modal> = {
   title: 'stories/OVERLAY/Modal',
   component: Modal,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `A Modal is a window on top of the primary content to draw the user's attention to important information or actions. It provides a focused and interruptive way to interact with the application.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/Overlay/Popover/Popover.stories.tsx

@@ -4,6 +4,11 @@ import Popover from './Popover';
 const PopoverMeta: ComponentMeta<typeof Popover> = {
   title: 'stories/OVERLAY/Popover',
   component: Popover,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Popovers often provide contextual information or quick access to related actions without requiring the user to navigate to a different page or view.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/Overlay/Tooltip/Tooltip.stories.tsx

@@ -4,6 +4,11 @@ import Tooltip from './Tooltip';
 const TooltipMeta: ComponentMeta<typeof Tooltip> = {
   title: 'stories/OVERLAY/Tooltip',
   component: Tooltip,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Whether you need to provide helpful hints to new users or display extra details for power users, the Tooltip component is a simple and effective way.`,
+  },
   argTypes: {
     placement: {
       control: 'select',

example/storybook/src/components/Typography/Heading/Heading.stories.tsx

@@ -4,6 +4,11 @@ import Heading from './Heading';
 const HeadingMeta: ComponentMeta<typeof Heading> = {
   title: 'stories/TYPOGRAPHY/Heading',
   component: Heading,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Heading component gives you the ability to create headings for your page with different sizes and symantics from h1 to h6.`,
+  },
   argTypes: {
     size: {
       control: 'select',

example/storybook/src/components/Typography/Text/Text.stories.tsx

@@ -5,6 +5,11 @@ import TextSizes from './TextSizes';
 const TextMeta: ComponentMeta<typeof Text> = {
   title: 'stories/TYPOGRAPHY/Text',
   component: Text,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Text component, which supports paragraphs and other formatting options.`,
+  },
   argTypes: {
     size: {
       control: 'select',