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,234 @@
+<template>
+  <PageHeader>
+    Chart
+    <template #description>
+      A component for displaying line charts with smooth curves and interactive tooltips.
+    </template>
+  </PageHeader>
+
+  <div class="chart-props">
+    <div class="chart-props__item">
+      <h4 class="chart-props__name">
+        lines
+      </h4>
+      <p class="chart-props__description">
+        An array of line objects to display on the chart.
+      </p>
+    </div>
+
+    <div class="chart-props__item">
+      <h4 class="chart-props__name">
+        detalization
+      </h4>
+      <p class="chart-props__description">
+        Controls how timestamps are formatted on the X-axis legend and tooltip.
+        Does not affect data aggregation — only the display format.
+      </p>
+      <ul class="chart-props__list">
+        <li><code>'days'</code> — shows day and month (e.g., "19 dec")</li>
+        <li><code>'hours'</code> — shows day, month, and time (e.g., "19 dec, 14:00")</li>
+        <li><code>'minutes'</code> — shows day, month, and time (e.g., "19 dec, 14:30")</li>
+      </ul>
+      <div class="chart-props__control">
+        <span class="chart-props__control-label">Try it:</span>
+        <Select
+          v-model="detalizationSelected"
+          :align="{ vertically: 'below', horizontally: 'left' }"
+          :is-disabled="false"
+          :items="detalizationItems"
+        />
+      </div>
+    </div>
+  </div>
+
+  <Heading :level="3">
+    Single Line
+  </Heading>
+  <div class="chart-example">
+    <div class="chart-example__showcase">
+      <Chart
+        :lines="[singleLineData]"
+        :detalization="currentDetalization"
+      />
+    </div>
+  </div>
+
+  <Heading :level="3">
+    Multiple Lines
+  </Heading>
+  <div class="chart-example">
+    <div class="chart-example__showcase">
+      <Chart
+        :lines="multipleLinesData"
+        :detalization="currentDetalization"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import PageHeader from '../../components/PageHeader.vue';
+import { Chart, ChartLineColor, Heading, Select } from '../../../src/vue';
+import type { ChartItem, ChartLine } from '../../../src/vue/components/chart';
+import type { ContextMenuItem, DefaultItem } from '../../../src/vue/components/context-menu/ContextMenu.types';
+
+/**
+ * Detalization types for chart timestamp formatting
+ */
+type DetalizationValue = 'minutes' | 'hours' | 'days';
+
+/**
+ * Mapping from Select title to detalization value
+ */
+const detalizationMap: Record<string, DetalizationValue> = {
+  days: 'days',
+  hours: 'hours',
+  minutes: 'minutes',
+};
+
+/**
+ * Generate sample chart data
+ *
+ * @param points - Number of data points to generate
+ * @param intervalSeconds - Time interval between points in seconds
+ * @param baseValue - Base value for random count generation
+ */
+function generateData(points: number, intervalSeconds: number, baseValue = 100): ChartItem[] {
+  const now = Math.floor(Date.now() / 1000);
+
+  return Array.from({ length: points }, (_, i) => ({
+    timestamp: now - (points - i) * intervalSeconds,
+    count: Math.floor(Math.random() * baseValue) + Math.floor(baseValue / 2),
+  }));
+}
+
+/**
+ * Empty handler for select option activation
+ */
+const onActivate = (): void => {};
+
+/**
+ * Currently selected detalization option
+ */
+const detalizationSelected = ref<DefaultItem>({
+  title: 'days',
+  onActivate,
+});
+
+/**
+ * Available detalization options for the Select component
+ */
+const detalizationItems: ContextMenuItem[] = [
+  { title: 'days',
+    onActivate },
+  { title: 'hours',
+    onActivate },
+  { title: 'minutes',
+    onActivate },
+];
+
+/**
+ * Current detalization value derived from selected option
+ */
+const currentDetalization = computed<DetalizationValue>(() => {
+  return detalizationMap[detalizationSelected.value.title] || 'days';
+});
+
+/**
+ * Single line chart data - 30 days of events
+ */
+const singleLineData = computed<ChartLine>(() => ({
+  label: 'events',
+  data: generateData(30, 86400, 2000),
+  color: ChartLineColor.Red,
+}));
+
+/**
+ * Multiple lines chart data - accepted and filtered events
+ */
+const multipleLinesData = computed<ChartLine[]>(() => [
+  {
+    label: 'accepted',
+    data: generateData(30, 86400, 150),
+    color: ChartLineColor.Red,
+  },
+  {
+    label: 'filtered',
+    data: generateData(30, 86400, 50),
+    color: ChartLineColor.LightGrey,
+  },
+]);
+</script>
+
+<style scoped>
+.chart-props {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-l);
+  margin-bottom: var(--spacing-xl);
+
+  &__item {
+    padding: var(--spacing-m);
+    background-color: var(--base--bg-secondary);
+    border-radius: var(--radius-m);
+  }
+
+  &__name {
+    margin: 0 0 var(--spacing-s);
+  }
+
+  &__description {
+    margin: 0 0 var(--spacing-s);
+    color: var(--base--text-secondary);
+  }
+
+  &__code {
+    margin: 0;
+    padding: var(--spacing-s);
+    background-color: var(--base--bg-primary);
+    border-radius: var(--radius-s);
+    overflow-x: auto;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+    margin: 0 0 var(--spacing-m);
+    padding-left: var(--spacing-l);
+    color: var(--base--text-secondary);
+
+    code {
+      padding: var(--spacing-xxs) var(--spacing-ms);
+      background-color: var(--base--bg-primary);
+      border-radius: var(--radius-s);
+    }
+  }
+
+  &__control {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+
+  &__control-label {
+    color: var(--base--text-secondary);
+  }
+}
+
+.chart-example {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-l);
+  margin-bottom: var(--spacing-xl);
+  position: relative;
+
+  &__showcase {
+    width: 100%;
+    background-color: var(--base--bg-secondary);
+    border-radius: var(--radius-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,46 @@
+import { ChartLineColor } from './Chart.types';
+import type { ChartLineColors } from './Chart.types';
+
+/**
+ * Colors for dark color scheme.
+ */
+export const chartColorsDark: 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',
+  },
+];
+
+/**
+ * Colors for light color scheme.
+ */
+export const chartColorsLight: ChartLineColors[] = [
+  {
+    name: ChartLineColor.LightGrey,
+    strokeStart: 'rgba(75, 90, 121, 0.22)',
+    strokeEnd: 'rgba(71, 72, 85, 0.08)',
+    fillStart: 'rgba(225, 236, 255, 0.12)',
+    fillEnd: 'rgba(66, 78, 93, 0.02)',
+    pointerColor: '#717289',
+  },
+  {
+    name: ChartLineColor.Red,
+    strokeStart: '#FF4A68',
+    strokeEnd: 'rgba(119, 136, 198, 0.4)',
+    fillStart: 'rgba(255, 94, 121, 0.46)',
+    fillEnd: 'rgba(255, 190, 198, 0)',
+    pointerColor: '#FF4A68',
+  },
+];