feat: add componets chart and animatedCounter

@codexteam/ui/dev/Playground.vue

@@ -223,6 +223,16 @@ const pages = computed(() => [
         onActivate: () => router.push('/components/confirm'),
         isActive: route.path === '/components/confirm',
       },
+      {
+        title: 'Counter',
+        onActivate: () => router.push('/components/counter'),
+        isActive: route.path === '/components/counter',
+      },
+      {
+        title: 'Chart',
+        onActivate: () => router.push('/components/chart'),
+        isActive: route.path === '/components/chart',
+      },
     ],
   },
 ]);

@codexteam/ui/dev/pages/components/Chart.vue

@@ -0,0 +1,97 @@
+<template>
+  <PageHeader>
+    Chart
+    <template #description>
+      A component for displaying line charts with smooth curves and interactive tooltips.
+    </template>
+  </PageHeader>
+
+  <Heading :level="3">
+    Single Line Chart
+  </Heading>
+
+  <div class="charts">
+    <div class="charts__showcase">
+      <Chart
+        :lines="[singleLine]"
+        detalization="days"
+      />
+    </div>
+  </div>
+
+  <Heading :level="3">
+    Multiple Lines Chart
+  </Heading>
+
+  <div class="charts">
+    <div class="charts__showcase">
+      <Chart
+        :lines="multipleLines"
+        detalization="days"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { Chart, ChartLineColor, Heading } from '../../../src/vue';
+import type { ChartItem, ChartLine } from '../../../src/vue/components/chart';
+
+/**
+ * Generate sample data for a given number of days
+ *
+ * @param days Number of days to generate data for.
+ * @param baseValue Base value used to scale the random counts (default: 100).
+ */
+function generateData(days: number, baseValue: number = 100): ChartItem[] {
+  const now = Math.floor(Date.now() / 1000);
+  const dayInSeconds = 86400;
+
+  return Array.from({ length: days }, (_, i) => ({
+    timestamp: now - (days - i) * dayInSeconds,
+    count: Math.floor(Math.random() * baseValue) + Math.floor(baseValue / 2),
+  }));
+}
+
+/**
+ * Single line chart data
+ */
+const singleLine: ChartLine = {
+  label: 'events',
+  data: generateData(30, 200),
+  color: ChartLineColor.Red,
+};
+
+/**
+ * Multiple lines chart data
+ */
+const multipleLines: ChartLine[] = [
+  {
+    label: 'accepted',
+    data: generateData(30, 150),
+    color: ChartLineColor.Red,
+  },
+  {
+    label: 'rate-limited',
+    data: generateData(30, 50),
+    color: ChartLineColor.LightGrey,
+  },
+];
+</script>
+
+<style scoped>
+.charts {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-l);
+  margin-bottom: var(--spacing-xl);
+  &__showcase {
+    width: 100%;
+    height: 200px;
+    background-color: var(--base--bg-secondary);
+    border-radius: var(--radius-m);
+    padding: var(--spacing-m);
+  }
+}
+</style>

@codexteam/ui/dev/pages/components/Counter.vue

@@ -0,0 +1,61 @@
+<template>
+  <PageHeader>
+    Counter
+    <template #description>
+      A component that animates value changes with a smooth slide transition effect.
+    </template>
+  </PageHeader>
+
+  <div class="counters">
+    <div class="counters__value">
+      <Counter :value="animatedValue" />
+    </div>
+    <div class="counters__btn">
+      <Button
+
+        @click="animatedValue += 100"
+      >
+        +100
+      </Button>
+      <Button
+
+        @click="animatedValue -= 100"
+      >
+        -100
+      </Button>
+      <Button
+        secondary
+        @click="animatedValue = 0"
+      >
+        Reset
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '../../components/PageHeader.vue';
+import { Counter, Button } from '../../../src/vue';
+
+const animatedValue = ref(100);
+
+</script>
+
+<style scoped>
+.counters {
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+  gap: var(--spacing-xxl);
+  align-items: center;
+  &__value{
+    width: 3rem;
+  }
+  &__btn{
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+}
+
+</style>

@codexteam/ui/dev/routes.ts

@@ -30,6 +30,8 @@ import Editor from './pages/components/Editor.vue';
 import ThemePreview from './pages/components/ThemePreview.vue';
 import Popup from './pages/components/Popup.vue';
 import Confirm from './pages/components/Confirm.vue';
+import Counter from './pages/components/Counter.vue';
+import Chart from './pages/components/Chart.vue';
 import Navbar from './pages/layout/Navbar.vue';
 import PageBlock from './pages/layout/PageBlock.vue';
 
@@ -157,6 +159,14 @@ const routes: RouteRecordRaw[] = [
     path: '/components/confirm',
     component: Confirm as Component,
   },
+  {
+    path: '/components/counter',
+    component: Counter as Component,
+  },
+  {
+    path: '/components/chart',
+    component: Chart as Component,
+  },
   {
     path: '/layout/navbar',
     component: Navbar as Component,

@codexteam/ui/src/vue/components/chart/Chart.colors.ts

@@ -0,0 +1,24 @@
+import { ChartLineColor } from './Chart.types';
+import type { ChartLineColors } from './Chart.types';
+
+/**
+ * Colors set for several chart lines
+ */
+export const chartColors: ChartLineColors[] = [
+  {
+    name: ChartLineColor.LightGrey,
+    strokeStart: 'rgba(75, 90, 121, 0.33)',
+    strokeEnd: 'rgba(71, 72, 85, 0.16)',
+    fillStart: 'rgba(63, 136, 255, 0.01)',
+    fillEnd: 'rgba(66, 78, 93, 0.05)',
+    pointerColor: '#717289',
+  },
+  {
+    name: ChartLineColor.Red,
+    strokeStart: '#FF2E51',
+    strokeEnd: '#424565',
+    fillStart: 'rgba(255, 46, 81, 0.3)',
+    fillEnd: 'rgba(66, 69, 101, 0)',
+    pointerColor: '#FF2E51',
+  },
+];

@codexteam/ui/src/vue/components/chart/Chart.types.ts

@@ -0,0 +1,80 @@
+/**
+ * Name of the color for the chart line stroke and fill.
+ */
+export enum ChartLineColor {
+  /**
+   * Accent color for primary line
+   */
+  Red = 'red',
+
+  /**
+   * Accent color for secondary line
+   */
+  LightGrey = 'light-grey'
+}
+
+/**
+ * Chart element in common case
+ */
+export interface ChartItem {
+  /**
+   * Day midnight
+   */
+  timestamp: number;
+
+  /**
+   * How many events occurred in that day
+   */
+  count: number;
+}
+
+/**
+ * Chart line with label and data points
+ */
+export interface ChartLine {
+  /**
+   * Series label (e.g., "accepted", "rate-limited")
+   */
+  label: string;
+
+  /**
+   * Data points for the series
+   */
+  data: ChartItem[];
+
+  /**
+   * Name of the color for the line stroke and fill.
+   */
+  color?: ChartLineColor;
+}
+
+/**
+ * A particular color params
+ */
+export interface ChartLineColors {
+  /**
+   * Name of the color
+   */
+  name: ChartLineColor;
+  /**
+   * Starting color for stroke gradient (top)
+   */
+  strokeStart: string;
+  /**
+   * Ending color for stroke gradient (bottom)
+   */
+  strokeEnd: string;
+  /**
+   * Starting color for fill gradient (top, with opacity)
+   */
+  fillStart: string;
+  /**
+   * Ending color for fill gradient (bottom, usually transparent)
+   */
+  fillEnd: string;
+
+  /**
+   * Pointer + legend color
+   */
+  pointerColor: string;
+}