Updated: Tag component updated.

app/components/ComponentApi.tsx

@@ -19,7 +19,7 @@ const spaceMono = Space_Mono({ subsets: ['latin'], weight: ['400'] })
 const ComponentApi: FC<ComponentProps> = ({ data }) => {
   return (
     <div className={spaceMono.className + 'mx-auto w-full overflow-auto'}>
-      <table className="whitespace-no-wrap z-50 mt-10 min-w-max table-auto border border-metal-100 bg-white text-left md:w-full lg:min-w-min">
+      <table className="whitespace-no-wrap z-50 mt-10 min-w-max table-auto overflow-hidden rounded-lg bg-white text-left md:w-full lg:min-w-min">
         <thead>
           <tr>
             <th className="rounded-bl rounded-tl bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900">
@@ -39,19 +39,19 @@ const ComponentApi: FC<ComponentProps> = ({ data }) => {
                 <td className="border-t border-metal-100 px-4 py-3 text-body-4 !font-medium text-black">
                   {item.propsName}
                 </td>
-                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-500">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400">
                   {item.propsDescription}
                 </td>
-                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-pink-400">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400">
                   {typeof item.propsType === 'string'
                     ? item.propsType
                     : item.propsType.map((prop) => (
-                        <pre key={prop} className="m-0.5 inline-block rounded bg-metal-100 px-2 py-0.5 ">
+                        <pre key={prop} className="m-0.5 inline-block rounded-lg bg-metal-100 px-2 py-0.5 ">
                           {prop}
                         </pre>
                       ))}
                 </td>
-                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-500">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400">
                   {item.default ? item.default : 'None'}
                 </td>
               </tr>

app/docs/components/avatar/avatarApi.ts

@@ -25,7 +25,7 @@ export const avatarApiData = [
     propsName: 'color',
     propsType: ['primary', 'secondary', 'success', 'warning', 'error'],
     propsDescription: 'Specifies the color of the avatar',
-    default: 'primary',
+    default: 'secondary',
   },
   {
     id: 4,

app/docs/components/avatar/variant/StatusOfAvatar.tsx

@@ -4,8 +4,8 @@ import { Avatar } from '../../../../src'
 const StatusOfAvatar = () => {
   return (
     <div className="my-5 flex items-center gap-3">
-      <Avatar active={true} verified={true} shape="circle" color="primary" />
-      <Avatar active={true} verified={true} shape="rounded" color="error" />
+      <Avatar active={true} verified={true} shape="circle" />
+      <Avatar active={true} verified={true} shape="rounded" />
     </div>
   )
 }
@@ -17,8 +17,8 @@ import { Avatar } from "keep-react";
 export const AvatarComponent = () => {
   return (
     <>
-      <Avatar active={true} verified={true} shape="circle" color="primary" />
-      <Avatar active={true} verified={true} shape="rounded" color="error" />
+      <Avatar active={true} verified={true} shape="circle" />
+      <Avatar active={true} verified={true} shape="rounded" />
     </>
   );
 }

app/docs/components/tag/Tag.mdx

@@ -1,60 +1,40 @@
 import { DefaultTag, DefaultTagCode } from './variant/DefaultTag'
-import { BothSideIconTag, BothSideIconTagCode } from './variant/BothSideIconTag'
-import { ColorsOfTag, ColorsOfTagCode } from './variant/ColorsOfTag'
-import { LeftSideIconTag, LeftSideIconTagCode } from './variant/LeftSideIconTag'
-import { TagWithDashedBorder, TagWithDashedBorderCode } from './variant/TagWithDashedBorder'
+import { TagWithIcon, TagWithIconCode } from './variant/TagWithIcon'
+import { DisabledTag, DisabledTagCode } from './variant/DisabledTag'
 import { tagApiData } from './TagApi'
-
 import CodePreview from '../../../components/CodePreview'
-
 import ComponentApi from '../../../components/ComponentApi'
 
 ## Table of Contents
 
-The Color Tag Component in the Keep React allows you to visually represent and label items with different colors. With customizable options for the type, close button, color, and border, you can create color tags that align with your design and provide a clear visual distinction.
+The Color Tag Component in Keep React allows you to visually represent and label items with customizable options for style and icon.
 
 ## Default Tag
 
-The Default Tag component represents a tag without any additional elements. It serves as a fundamental building block for various tag variations.
+The Default Tag component represents a tag without any additional elements.
 
 <CodePreview github="Tag" code={DefaultTagCode}>
   <DefaultTag />
 </CodePreview>
 
-## Colors of Tag
-
-Customize the appearance of your tags by choosing from a range of color options. The "Colors of Tag" component showcases the available color variants.
-
-<CodePreview github="Tag" code={ColorsOfTagCode}>
-  <ColorsOfTag />
-</CodePreview>
-
-## Left Side Icon Tag
-
-Enhance your tags by adding an icon to the left side using the `leftIcon` props.
-
-<CodePreview github="Tag" code={LeftSideIconTagCode}>
-  <LeftSideIconTag />
-</CodePreview>
-
-## Tag With Both Side Icon
+## Tag With Icon
 
-Create tags with icons on both sides. The left side can accommodate a custom icon, while the right side features a dismiss icon for easy removal.
+Enhance your tags by adding icons for better visual representation.
 
-<CodePreview github="Tag" code={BothSideIconTagCode}>
-  <BothSideIconTag />
+<CodePreview github="Tag" code={TagWithIconCode}>
+  <TagWithIcon />
 </CodePreview>
 
-## Tag With Dashed Border
+## Disabled Tag
 
-The "Tag With Dashed Border" example demonstrates two types of border styles for tags: `borderType="solid"` and `borderType="dashed"`.
+Restrict user interaction with the `disabled` prop set to `true`.
 
-<CodePreview github="Tag" code={TagWithDashedBorderCode}>
-  <TagWithDashedBorder />
+<CodePreview github="Tag" code={DisabledTagCode}>
+  <DisabledTag />
 </CodePreview>
 
 ## API Reference
 
-For a comprehensive overview of the Tag component's properties, refer to the API documentation.
+Refer to the API documentation for a comprehensive overview of the Tag component's properties.
 
 <ComponentApi data={tagApiData} />

app/docs/components/tag/TagApi.ts

@@ -1,51 +1,16 @@
 export const tagApiData = [
   {
     id: 1,
-    propsName: 'leftIcon',
-    propsType: 'ReactNode',
-    propsDescription: 'Icon component displayed on the left side of the tag.',
-    default: '<CrownSimple/>',
-  },
-  {
-    id: 2,
-    propsName: 'dismissIcon',
-    propsType: 'ReactNode',
-    propsDescription: 'Icon component used for dismissing the tag.',
-    default: '<X/>',
-  },
-  {
-    id: 3,
-    propsName: 'dismiss',
-    propsType: 'Boolean',
-    propsDescription: 'Determines if the tag can be dismissed.',
+    propsName: 'rounded',
+    propsType: 'boolean',
+    propsDescription: 'Tag with rounded corner',
     default: 'false',
   },
   {
-    id: 4,
+    id: 2,
     propsName: 'disabled',
     propsType: 'Boolean',
     propsDescription: 'Disables interactions with the tag.',
     default: 'false',
   },
-  {
-    id: 5,
-    propsName: 'color',
-    propsType: ['error', 'gray', 'info', 'success', 'warning', 'teal', 'purple'],
-    propsDescription: 'Specifies the color variant of the tag.',
-    default: 'gray',
-  },
-  {
-    id: 6,
-    propsName: 'borderType',
-    propsType: ['solid', 'dashed'],
-    propsDescription: 'Sets the type of border for the tag.',
-    default: 'solid',
-  },
-  {
-    id: 7,
-    propsName: 'onDismiss',
-    propsType: 'boolean | (() => void)',
-    propsDescription: 'Callback function when the tag is dismissed.',
-    default: 'Function',
-  },
 ]

app/docs/components/tag/page.tsx

@@ -1,10 +1,10 @@
 import type { Metadata, NextPage } from 'next'
-import { DocsContentLayout } from '../../../components/DocsContentLayout'
 import TagDocs from '.'
+import { DocsContentLayout } from '../../../components/DocsContentLayout'
 
 export const metadata: Metadata = {
   description:
-    'The Color Tag Component in the Keep React allows you to visually represent and label items with different colors. With customizable options for the type, close button, color, and border, you can create color tags that align with your design and provide a clear visual distinction.',
+    'The Color Tag Component in the Keep React allows you to visually represent and label items. With customizable options for the style, icon.',
   title: 'Tag - Keep React',
 }