feat(InfoBox): introduce

apps/site/components/ApiDocs/StabilityIndex/index.module.css

@@ -0,0 +1,48 @@
+.stabilityIndex {
+  @apply py-3
+    px-4
+    flex
+    flex-row
+    items-center
+    gap-2
+    text-white
+    rounded;
+
+  .indexLelvel {
+    @apply rounded-sm
+      text-sm
+      px-1.5;
+  }
+
+  &.stabilityLevel3 {
+    @apply bg-info-600;
+
+    .indexLelvel {
+      @apply bg-info-700;
+    }
+  }
+
+  &.stabilityLevel2 {
+    @apply bg-green-600;
+
+    .indexLelvel {
+      @apply bg-green-700;
+    }
+  }
+
+  &.stabilityLevel1 {
+    @apply bg-warning-600;
+
+    .indexLelvel {
+      @apply bg-warning-700;
+    }
+  }
+
+  &.stabilityLevel0 {
+    @apply bg-danger-600;
+
+    .indexLelvel {
+      @apply bg-danger-700;
+    }
+  }
+}

apps/site/components/ApiDocs/StabilityIndex/index.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+
+import StabilityIndex from '@/components/ApiDocs/StabilityIndex';
+
+type Story = StoryObj<typeof StabilityIndex>;
+type Meta = MetaObj<typeof StabilityIndex>;
+
+export const Legacy: Story = {
+  args: {
+    level: 3,
+    children: 'Legacy. Although this feature is unlikely to be removed and is still covered by semantic versioning guarantees, it is no longer actively maintained, and other alternatives are available.'
+  },
+}
+
+export const Stable: Story = {
+  args: {
+    level: 2,
+    children: 'Stable. Compatibility with the npm ecosystem is a high priority.'
+  },
+}
+
+export const Experimental: Story = {
+  args: {
+    level: 1,
+    children: 'Experimental. The feature is not subject to semantic versioning rules. Non-backward compatible changes or removal may occur in any future release. Use of the feature is not recommended in production environments. Experimental features are subdivided into stages:'
+  },
+}
+
+export const Deprecated: Story = {
+  args: {
+    level: 0,
+    children: 'Deprecated. The feature may emit warnings. Backward compatibility is not guaranteed.'
+  },
+}
+
+export default { component: StabilityIndex } as Meta;

apps/site/components/ApiDocs/StabilityIndex/index.tsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type StabilityIndexProps = PropsWithChildren<{
+  level: number;
+}>;
+
+const StabilityIndex: FC<StabilityIndexProps> = ({ level, children }) => (
+    <div className={classNames(styles.stabilityIndex, styles[`stabilityLevel${level}`])}>
+      <span
+        className={styles.indexLelvel}
+      >{level}</span>{children}
+    </div>
+  );
+
+
+export default StabilityIndex;