diff --git a/semcore/core/__tests__/decorators.test.ts b/semcore/core/__tests__/decorators.test.ts
new file mode 100644
index 0000000000..2530f11ab9
--- /dev/null
+++ b/semcore/core/__tests__/decorators.test.ts
@@ -0,0 +1,481 @@
+import { describe, it, expect, vi, Test } from '@semcore/testing-utils/vitest';
+
+import reactive from '../src/decorators/reactive';
+import trackPropsChanges from '../src/decorators/trackPropsChanges';
+
+interface TestProps {
+  name: string;
+  age: number;
+}
+
+describe('@reactive', () => {
+  describe('primitive values', () => {
+    it('should call callback when primitive value changes', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(callback)
+        counter = 0;
+      }
+
+      const instance = new TestClass();
+      instance.counter = 5;
+
+      expect(callback).toHaveBeenCalledWith('counter', 5);
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call callback with correct "this" context', () => {
+      let capturedThis: any;
+
+      class TestClass {
+        name = 'TestInstance';
+
+        @reactive(function (this: TestClass) {
+          capturedThis = this;
+        })
+        value = 10;
+      }
+
+      const instance = new TestClass();
+      instance.value = 20;
+
+      expect(capturedThis).toBe(instance);
+      expect(capturedThis.name).toBe('TestInstance');
+    });
+
+    it('should call callback multiple times on multiple changes', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(callback)
+        counter = 0;
+      }
+
+      const instance = new TestClass();
+      instance.counter = 1;
+      instance.counter = 2;
+      instance.counter = 3;
+
+      expect(callback).toHaveBeenCalledTimes(3);
+      expect(callback).toHaveBeenNthCalledWith(1, 'counter', 1);
+      expect(callback).toHaveBeenNthCalledWith(2, 'counter', 2);
+      expect(callback).toHaveBeenNthCalledWith(3, 'counter', 3);
+    });
+  });
+  describe('non-primitive values (objects)', () => {
+    it('should call callback when watched field changes in object', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(['name'], callback)
+        readonly user = { name: 'John', age: 30 };
+      }
+
+      const instance = new TestClass();
+      instance.user.name = 'Jane';
+
+      expect(callback).toHaveBeenCalledWith('name', 'Jane');
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+    it('should NOT call callback when non-watched field changes', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(['name'], callback)
+        readonly user = { name: 'John', age: 30 };
+      }
+
+      const instance = new TestClass();
+      instance.user.age = 31;
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    it('should watch multiple fields in object', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(['name', 'age'], callback)
+        readonly user = { name: 'John', age: 30, city: 'NYC' };
+      }
+
+      const instance = new TestClass();
+
+      instance.user.name = 'Jane';
+      expect(callback).toHaveBeenCalledWith('name', 'Jane');
+
+      instance.user.age = 31;
+      expect(callback).toHaveBeenCalledWith('age', 31);
+
+      instance.user.city = 'LA';
+      expect(callback).toHaveBeenCalledTimes(2); // city is not watched
+    });
+
+    it('should call callback with correct "this" context for objects', () => {
+      let capturedThis: any;
+
+      class TestClass {
+        id = 'test-123';
+
+        @reactive(['value'], function (this: TestClass) {
+          capturedThis = this;
+        })
+        readonly data = { value: 0 };
+      }
+
+      const instance = new TestClass();
+      instance.data.value = 42;
+
+      expect(capturedThis).toBe(instance);
+      expect(capturedThis.id).toBe('test-123');
+    });
+
+    it('should work with arrays', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(['0', '1'], callback)
+        readonly items = ['a', 'b', 'c'];
+      }
+
+      const instance = new TestClass();
+
+      instance.items[0] = 'x';
+      expect(callback).toHaveBeenCalledWith('0', 'x');
+
+      instance.items[1] = 'y';
+      expect(callback).toHaveBeenCalledWith('1', 'y');
+
+      instance.items[2] = 'z';
+      expect(callback).toHaveBeenCalledTimes(2); // index 2 not watched
+    });
+
+    it('should not be called for every change when watchedFields is not defined', () => {
+      const arrCallback = vi.fn();
+      const objCallback = vi.fn();
+
+      class TestClass {
+        @reactive(arrCallback)
+        readonly items = ['a', 'b', 'c'];
+
+        @reactive(objCallback)
+        obj = { a: 1, b: 2, c: 3 };
+      }
+
+      const instance = new TestClass();
+
+      instance.items[0] = 'x';
+      expect(arrCallback).not.toHaveBeenCalled();
+
+      instance.items[1] = 'y';
+      expect(arrCallback).not.toHaveBeenCalled();
+
+      instance.items[2] = 'z';
+      expect(arrCallback).not.toHaveBeenCalled();
+
+      expect(arrCallback).not.toHaveBeenCalled();
+
+      instance.obj.a = 4;
+      expect(objCallback).not.toHaveBeenCalled();
+
+      instance.obj.b = 5;
+      expect(objCallback).not.toHaveBeenCalled();
+
+      instance.obj.c = 6;
+      expect(objCallback).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty watchedFields array for objects', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive([], callback)
+        readonly data = { value: 0 };
+      }
+
+      const instance = new TestClass();
+      instance.data.value = 42;
+
+      expect(callback).toHaveBeenCalledOnce();
+    });
+
+    it('should work when setting same value multiple times', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(callback)
+        value = 0;
+      }
+
+      const instance = new TestClass();
+      instance.value = 5;
+      instance.value = 5;
+      instance.value = 5;
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+  });
+});
+
+describe('@trackPropsChanges', () => {
+  describe('Basic functionality', () => {
+    it('should track specified props changes', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      @trackPropsChanges(['name', 'age'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+
+      component.render();
+      expect(onPropsChangeSpy).not.toHaveBeenCalled();
+
+      component.props = { name: 'Jane', age: 30 };
+      component.render();
+
+      expect(onPropsChangeSpy).toHaveBeenCalledWith({ name: 'Jane' });
+      expect(onPropsChangeSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should detect multiple props changes', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      @trackPropsChanges(['name', 'age'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+      component.render();
+
+      component.props = { name: 'Jane', age: 25 };
+      component.render();
+
+      expect(onPropsChangeSpy).toHaveBeenCalledWith({ name: 'Jane', age: 25 });
+    });
+
+    it('should not call onPropsChange when no tracked props changed', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      @trackPropsChanges(['name'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+      component.render();
+
+      component.props = { name: 'John', age: 25 };
+      component.render();
+
+      expect(onPropsChangeSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Reference equality for objects and arrays', () => {
+    it('should detect object reference changes', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      interface ObjectProps {
+        user: { name: string };
+      }
+
+      @trackPropsChanges(['user'])
+      class TestComponent {
+        props: ObjectProps;
+
+        constructor(props: ObjectProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<ObjectProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const user = { name: 'John' };
+      const component = new TestComponent({ user });
+      component.render();
+
+      component.props = { user };
+      component.render();
+      expect(onPropsChangeSpy).not.toHaveBeenCalled();
+
+      component.props = { user: { name: 'John' } };
+      component.render();
+      expect(onPropsChangeSpy).toHaveBeenCalledWith({ user: { name: 'John' } });
+    });
+
+    it('should detect array reference changes', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      interface ArrayProps {
+        items: string[];
+      }
+
+      @trackPropsChanges(['items'])
+      class TestComponent {
+        props: ArrayProps;
+
+        constructor(props: ArrayProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<ArrayProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const items = ['a', 'b'];
+      const component = new TestComponent({ items });
+      component.render();
+
+      component.props = { items: ['a', 'b'] };
+      component.render();
+
+      expect(onPropsChangeSpy).toHaveBeenCalledWith({ items: ['a', 'b'] });
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle empty propsToWatch array', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      @trackPropsChanges([])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+
+      component.render();
+
+      component.props = { name: 'Jane', age: 25 };
+      component.render();
+
+      expect(onPropsChangeSpy).not.toHaveBeenCalled();
+    });
+
+    it('should work with multiple renders without prop changes', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      @trackPropsChanges(['name'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+
+      component.render();
+      component.render();
+      component.render();
+
+      expect(onPropsChangeSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Render behavior', () => {
+    it('should call onPropsChange before parent render', () => {
+      const callOrder: string[] = [];
+
+      @trackPropsChanges(['name'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          callOrder.push('onPropsChange');
+        }
+
+        render() {
+          callOrder.push('render');
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+      component.render();
+
+      component.props = { name: 'Jane', age: 30 };
+      component.render();
+
+      expect(callOrder).toEqual(['render', 'onPropsChange', 'render']);
+    });
+  });
+});
diff --git a/semcore/core/src/decorators/reactive.ts b/semcore/core/src/decorators/reactive.ts
new file mode 100644
index 0000000000..193620b3d3
--- /dev/null
+++ b/semcore/core/src/decorators/reactive.ts
@@ -0,0 +1,78 @@
+type Primitive = string | number | boolean | symbol | bigint | null | undefined;
+type IsReadonly<This, Property extends keyof This> =
+  (<F>() => F extends { [P in Property]: This[Property] } ? 1 : 2) extends
+  (<F>() => F extends { -readonly [P in Property]: This[Property] } ? 1 : 2)
+    ? false
+    : true;
+type Callback<This> = (this: This, field: string | symbol, newValue: any) => void;
+type ReturnType<
+  This,
+  Property extends keyof This = keyof This,
+> = IsReadonly<This, Property> extends true
+  ? (_: undefined, ctx: ClassFieldDecoratorContext<This, This[Property]>) => void
+  : This[Property] extends Primitive
+    ? (_: undefined, ctx: ClassFieldDecoratorContext<This, This[Property]>) => void
+    : never;
+
+const isPrimitiveValue = (value: any) => value !== Object(value);
+
+function reactive<This>(cb: Callback<This>): ReturnType<This>;
+function reactive<
+  This,
+  Property extends keyof This,
+  Value = This[Property],
+>(watchedFields: Value extends Primitive ? never : Array<keyof Value>, cb: Callback<This>): ReturnType<This>;
+
+function reactive<
+  This,
+  Property extends keyof This,
+>(watchedFieldsOrCb: Array<keyof This[Property]> | Callback<This>, cb?: Callback<This>) {
+  return function (_: undefined, ctx: ClassFieldDecoratorContext<This, This[Property]>) {
+    const { addInitializer, name } = ctx;
+
+    addInitializer(function (this: This) {
+      const thisRoot = this;
+
+      const isPrimitive = isPrimitiveValue(this[name as Property]);
+
+      const callback = typeof watchedFieldsOrCb === 'function' ? watchedFieldsOrCb : cb!;
+      const fields = Array.isArray(watchedFieldsOrCb) ? watchedFieldsOrCb : null;
+
+      if (isPrimitive) {
+        let value = this[name as Property];
+
+        Object.defineProperty(this, name, {
+          get() {
+            return value;
+          },
+          set(newValue) {
+            const oldValue = value;
+
+            value = newValue;
+
+            if (oldValue !== newValue) {
+              callback.call(thisRoot, name, newValue);
+            }
+          },
+          enumerable: true,
+          configurable: true,
+        });
+      } else {
+        // @ts-ignore
+        this[name] = new Proxy(this[name], {
+          set(target, p, newValue) {
+            target[p] = newValue;
+
+            if (fields?.length === 0 || fields?.includes(p as keyof This[Property])) {
+              callback.call(thisRoot, p, newValue);
+            }
+
+            return true;
+          },
+        });
+      }
+    });
+  };
+}
+
+export default reactive;
diff --git a/semcore/core/src/decorators/trackPropsChanges.ts b/semcore/core/src/decorators/trackPropsChanges.ts
new file mode 100644
index 0000000000..c934226700
--- /dev/null
+++ b/semcore/core/src/decorators/trackPropsChanges.ts
@@ -0,0 +1,56 @@
+type WatchedProps<Props> = { [key in keyof Props]?: any };
+
+type Constructor<Props> = new (...args: any) => {
+  props: Props;
+  onPropsChange(changedProps: WatchedProps<Props>): void;
+  render(): any;
+};
+
+function trackPropsChanges<
+  P,
+  C extends Constructor<P> = Constructor<P>,
+>(propsToWatch: Array<keyof P>) {
+  const watchedProps: WatchedProps<P> = {};
+
+  return function (Class: C) {
+    return class extends Class {
+      constructor(...args: any[]) {
+        super(...args);
+
+        propsToWatch.reduce((acc, prop) => {
+          acc[prop] = this.props?.[prop];
+
+          return acc;
+        }, watchedProps);
+      }
+
+      onPropsChange(_?: WatchedProps<P>) {
+        let shouldCallFunc = false;
+        const changedProps: WatchedProps<P> = {};
+
+        propsToWatch.forEach((prop) => {
+          const isPropValueEqual = Object.is(watchedProps[prop], this.props[prop]);
+
+          if (!isPropValueEqual) {
+            watchedProps[prop] = this.props[prop];
+            changedProps[prop] = this.props[prop];
+
+            shouldCallFunc = true;
+          }
+        });
+
+        if (!shouldCallFunc) return;
+
+        super.onPropsChange(changedProps);
+      }
+
+      render() {
+        this.onPropsChange();
+
+        return super.render();
+      }
+    };
+  };
+}
+
+export default trackPropsChanges;
diff --git a/semcore/time-picker/__tests__/index.test.jsx b/semcore/time-picker/__tests__/index.test.jsx
deleted file mode 100644
index 990bcdbcc1..0000000000
--- a/semcore/time-picker/__tests__/index.test.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
-import { describe } from '@semcore/testing-utils/vitest';
-
-describe('time-picker Dependency imports', () => {
-  runDependencyCheckTests('time-picker');
-});
diff --git a/semcore/time-picker/__tests__/index.test.tsx b/semcore/time-picker/__tests__/index.test.tsx
new file mode 100644
index 0000000000..bbcaa86719
--- /dev/null
+++ b/semcore/time-picker/__tests__/index.test.tsx
@@ -0,0 +1,231 @@
+import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
+import { describe, it, expect } from '@semcore/testing-utils/vitest';
+
+import TimePickerEntity from '../src/entity/TimePickerEntity';
+
+describe('time-picker Dependency imports', () => {
+  runDependencyCheckTests('time-picker');
+});
+
+describe('TimePickerEntity', () => {
+  describe('constructor', () => {
+    it('should initialize with default empty time when no value provided', () => {
+      const entity = new TimePickerEntity(':', false);
+
+      expect(entity.hours).toBe('');
+      expect(entity.minutes).toBe('');
+    });
+
+    it('should parse hours and minutes from value string', () => {
+      const entity = new TimePickerEntity('14:30', false);
+
+      expect(entity.hours).toBe('14');
+      expect(entity.minutes).toBe('30');
+    });
+
+    it('should handle single digit hours and minutes', () => {
+      const entity = new TimePickerEntity('9:5', false);
+
+      expect(entity.hours).toBe('09');
+      expect(entity.minutes).toBe('05');
+    });
+
+    it('should initialize with AM meridiem by default', () => {
+      const entity = new TimePickerEntity('10:00', true);
+
+      expect(entity.meridiem).toBe('AM');
+    });
+  });
+
+  describe('12-hour format', () => {
+    it('should format midnight (00:00) as 12:00 AM', () => {
+      const entity = new TimePickerEntity('0:00', true);
+
+      expect(entity.hours).toBe('12');
+      expect(entity.minutes).toBe('00');
+    });
+
+    it('should format hours 1-11 AM correctly', () => {
+      const entity = new TimePickerEntity('9:30', true);
+
+      expect(entity.hours).toBe('09');
+    });
+
+    it('should format noon (12:00) as 12:00', () => {
+      const entity = new TimePickerEntity('12:00', true);
+
+      expect(entity.hours).toBe('12');
+    });
+
+    it('should format hours 13-23 as 1-11 PM', () => {
+      const entity = new TimePickerEntity('14:45', true);
+
+      expect(entity.hours).toBe('02');
+    });
+
+    it('should format 23:59 as 11:59', () => {
+      const entity = new TimePickerEntity('23:59', true);
+
+      expect(entity.hours).toBe('11');
+      expect(entity.minutes).toBe('59');
+    });
+  });
+
+  describe('24-hour format', () => {
+    it('should format hours with leading zero in 24-hour mode', () => {
+      const entity = new TimePickerEntity('9:30', false);
+
+      expect(entity.hours).toBe('09');
+    });
+
+    it('should handle midnight in 24-hour format', () => {
+      const entity = new TimePickerEntity('0:00', false);
+
+      expect(entity.hours).toBe('00');
+    });
+
+    it('should convert 12 AM to 00:00 in 24-hour format', () => {
+      const entity = new TimePickerEntity('12:00', false);
+      entity.meridiem = 'AM';
+
+      expect(entity.hours).toBe('00');
+    });
+
+    it('should convert 12 PM to 12:00 in 24-hour format', () => {
+      const entity = new TimePickerEntity('12:00', false);
+      entity.meridiem = 'PM';
+
+      expect(entity.hours).toBe('12');
+    });
+
+    it('should convert PM hours correctly', () => {
+      const entity = new TimePickerEntity('3:00', false);
+      entity.meridiem = 'PM';
+
+      expect(entity.hours).toBe('15');
+    });
+
+    it('should keep AM hours unchanged (except 12)', () => {
+      const entity = new TimePickerEntity('9:00', false);
+      entity.meridiem = 'AM';
+
+      expect(entity.hours).toBe('09');
+    });
+  });
+
+  describe('getters and setters', () => {
+    it('should update hours via setter', () => {
+      const entity = new TimePickerEntity('10:00', false);
+      entity.hours = '15';
+
+      expect(entity.hours).toBe('15');
+    });
+
+    it('should update minutes via setter', () => {
+      const entity = new TimePickerEntity('10:00', false);
+      entity.minutes = '45';
+
+      expect(entity.minutes).toBe('45');
+    });
+
+    it('should update meridiem via setter', () => {
+      const entity = new TimePickerEntity('10:00', true);
+      entity.meridiem = 'PM';
+
+      expect(entity.meridiem).toBe('PM');
+    });
+  });
+
+  describe('toggleMeridiem', () => {
+    it('should toggle from AM to PM', () => {
+      const entity = new TimePickerEntity('10:00', true);
+
+      entity.toggleMeridiem();
+
+      expect(entity.meridiem).toBe('PM');
+    });
+
+    it('should toggle from PM to AM', () => {
+      const entity = new TimePickerEntity('10:00', true);
+      entity.meridiem = 'PM';
+
+      entity.toggleMeridiem();
+
+      expect(entity.meridiem).toBe('AM');
+    });
+
+    it('should toggle multiple times correctly', () => {
+      const entity = new TimePickerEntity('10:00', true);
+
+      entity.toggleMeridiem();
+      expect(entity.meridiem).toBe('PM');
+
+      entity.toggleMeridiem();
+      expect(entity.meridiem).toBe('AM');
+
+      entity.toggleMeridiem();
+      expect(entity.meridiem).toBe('PM');
+    });
+  });
+
+  describe('toString', () => {
+    it('should return 24-hour format string when is12Hour is false', () => {
+      const entity = new TimePickerEntity('14:30', false);
+
+      expect(entity.toString()).toBe('14:30');
+    });
+
+    it('should convert to 24-hour format string when is12Hour is true', () => {
+      const entity = new TimePickerEntity('2:30', true);
+      entity.meridiem = 'PM';
+
+      expect(entity.toString()).toBe('14:30');
+    });
+
+    it('should handle midnight (12 AM) conversion', () => {
+      const entity = new TimePickerEntity('12:00', true);
+      entity.meridiem = 'AM';
+
+      expect(entity.toString()).toBe('00:00');
+    });
+
+    it('should handle noon (12 PM) conversion', () => {
+      const entity = new TimePickerEntity('12:00', true);
+      entity.meridiem = 'PM';
+
+      expect(entity.toString()).toBe('12:00');
+    });
+
+    it('should add leading zeros to output', () => {
+      const entity = new TimePickerEntity('9:5', false);
+
+      expect(entity.toString()).toBe('09:05');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle invalid hours gracefully', () => {
+      const entity = new TimePickerEntity('invalid:30', false);
+
+      expect(entity.hours).toBe('invalid');
+    });
+
+    it('should handle empty minutes', () => {
+      const entity = new TimePickerEntity('10:', false);
+
+      expect(entity.minutes).toBe('');
+    });
+
+    it('should handle empty hours', () => {
+      const entity = new TimePickerEntity(':30', false);
+
+      expect(entity.hours).toBe('');
+    });
+
+    it('should preserve non-numeric hour values in 12-hour format', () => {
+      const entity = new TimePickerEntity('invalid:30', true);
+
+      expect(entity.hours).toBe('invalid');
+    });
+  });
+});
diff --git a/semcore/time-picker/package.json b/semcore/time-picker/package.json
index 6ef9e19833..9cae9060ac 100644
--- a/semcore/time-picker/package.json
+++ b/semcore/time-picker/package.json
@@ -9,7 +9,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "pnpm semcore-builder --source=js && pnpm vite build"
+    "build": "pnpm semcore-builder && pnpm vite build"
   },
   "exports": {
     "require": "./lib/cjs/index.js",
diff --git a/semcore/time-picker/src/TimePicker.jsx b/semcore/time-picker/src/TimePicker.jsx
deleted file mode 100644
index 460825b080..0000000000
--- a/semcore/time-picker/src/TimePicker.jsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import { createComponent, Component, sstyled, Root } from '@semcore/core';
-import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
-import { Box } from '@semcore/flex-box';
-import Input from '@semcore/input';
-import React from 'react';
-
-import Format from './PickerFormat';
-import { Hours, Minutes } from './PickerInput';
-import style from './style/time-picker.shadow.css';
-import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
-
-const MAP_MERIDIEM = {
-  AM: 'PM',
-  PM: 'AM',
-};
-const MAP_FIELD_TO_TIME = {
-  hours: 0,
-  minutes: 1,
-};
-
-export function intOrDefault(value, def = 0) {
-  const number = Number.parseInt(value);
-  return Number.isNaN(number) ? def : number;
-}
-
-export function withLeadingZero(value) {
-  value = String(value);
-  if (value.length === 1) return `0${value}`;
-  return String(value);
-}
-
-export function meridiemByHours(hours) {
-  return hours >= 12 ? 'PM' : 'AM';
-}
-
-export function formatHoursTo12(hours /* hours by 24 */) {
-  const nHours = intOrDefault(hours, Number.NaN); // if not (:00)
-  if (Number.isNaN(nHours)) return hours;
-
-  // if not (HH:00)
-  if (nHours === 0) return 12; // 0 => 12 PM
-  if (nHours > 12) return nHours - 12; // 22 => 10 PM
-
-  return hours;
-}
-
-export function formatHoursTo24(hours /* hours by 12 */, meridiem) {
-  const nHours = intOrDefault(hours, Number.NaN); // if not (:00)
-
-  if (Number.isNaN(nHours)) return hours;
-
-  if (meridiem === 'AM') {
-    if (nHours === 12) return 0; // 12 AM => 0
-  }
-
-  if (meridiem === 'PM') {
-    if (nHours < 12) return nHours + 12; // 10 PM => 22
-  }
-
-  return hours;
-}
-
-class TimePickerRoot extends Component {
-  static displayName = 'TimePicker';
-  static style = style;
-  static enhance = [i18nEnhance(localizedMessages)];
-  static defaultProps = ({ is12Hour }) => ({
-    defaultValue: '',
-    size: 'm',
-    children: (
-      <>
-        <TimePicker.Hours />
-        <TimePicker.Separator />
-        <TimePicker.Minutes />
-        {is12Hour && <TimePicker.Format />}
-      </>
-    ),
-    i18n: localizedMessages,
-    locale: 'en',
-    defaultTitle: '',
-  });
-
-  hoursInputRef = React.createRef();
-  minutesInputRef = React.createRef();
-
-  _lastMeridiem = 'AM'; // default AM
-
-  uncontrolledProps() {
-    return {
-      value: null,
-      title: null,
-    };
-  }
-
-  componentDidMount() {
-    const { id, 'aria-describedby': ariaDescribedBy } = this.asProps;
-    const selector = `[for=${id}]`;
-    const titleElement =
-      document.querySelector(selector) ?? document.querySelector(`#${ariaDescribedBy}`);
-
-    if (titleElement) {
-      this.handlers.title(titleElement.textContent);
-    }
-  }
-
-  get value() {
-    const { value } = this.asProps;
-    return value === null || value === undefined ? ':' : value;
-  }
-
-  get meridiem() {
-    const { value } = this.asProps;
-    const [hours = ''] = value.split(':');
-
-    const nHours = intOrDefault(hours, Number.NaN);
-
-    if (!Number.isNaN(nHours)) {
-      this._lastMeridiem = meridiemByHours(nHours);
-    }
-
-    return this._lastMeridiem;
-  }
-
-  valueToTime(value) {
-    const { is12Hour } = this.asProps;
-    let [hours = '', minutes = ''] = value.split(':');
-
-    if (is12Hour) hours = formatHoursTo12(hours);
-
-    hours = withLeadingZero(hours);
-    minutes = withLeadingZero(minutes);
-
-    return [hours, minutes];
-  }
-
-  timeToValue(time, meridiem) {
-    const { is12Hour } = this.asProps;
-    let [hours = '', minutes = ''] = time;
-
-    hours = intOrDefault(hours, hours); // 03 => 3
-    minutes = intOrDefault(minutes, minutes); // MM => MM
-
-    if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0
-
-    return `${hours}:${minutes}`;
-  }
-
-  handleValueChange = (value, field, event) => {
-    const { is12Hour } = this.asProps;
-    const { meridiem } = this;
-
-    let time;
-    if (field) {
-      time = this.value.split(':');
-      time[MAP_FIELD_TO_TIME[field]] = value;
-    } else {
-      time = value.split(':');
-    }
-
-    let [hours = '', minutes = ''] = time;
-
-    if (is12Hour) hours = String(formatHoursTo12(hours));
-
-    value = this.timeToValue([hours, minutes], meridiem);
-    this.handlers.value(value, event);
-  };
-
-  handleMeridiemClick = (event) => {
-    const { is12Hour } = this.asProps;
-    let { value, meridiem } = this;
-    let [hours = '', minutes = ''] = value.split(':');
-
-    if (is12Hour) hours = String(formatHoursTo12(hours));
-
-    value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);
-    this.handlers.value(value, event);
-  };
-
-  _getHoursAndMinutesProps = () => {
-    const { is12Hour, size, disabled, getI18nText } = this.asProps;
-    const time = this.valueToTime(this.value);
-
-    return {
-      time,
-      size,
-      is12Hour,
-      disabled,
-      $onValueChange: this.handleValueChange,
-      minutesInputRef: this.minutesInputRef,
-      hoursInputRef: this.hoursInputRef,
-      _getI18nText: getI18nText,
-    };
-  };
-
-  getHoursProps = () => {
-    return { ...this._getHoursAndMinutesProps(), ref: this.hoursInputRef };
-  };
-
-  getMinutesProps = () => {
-    return { ...this._getHoursAndMinutesProps(), ref: this.minutesInputRef };
-  };
-
-  getSeparatorProps() {
-    return {
-      disabled: this.asProps.disabled,
-      hoursInputRef: this.hoursInputRef,
-    };
-  }
-
-  getFormatProps() {
-    const { size, disabled, disablePortal, getI18nText } = this.asProps;
-
-    return {
-      size,
-      disabled,
-      disablePortal,
-      meridiem: this.meridiem,
-      onClick: this.handleMeridiemClick,
-      getI18nText,
-    };
-  }
-
-  render() {
-    const STimePicker = Root;
-    const { styles, Children, value, is12Hour, getI18nText, title } = this.asProps;
-    const [hours, minutes] = this.valueToTime(this.value);
-
-    const label = value
-      ? `${title} ${getI18nText('title', {
-        time: `${hours}:${withLeadingZero(minutes)}`,
-        meridiem: is12Hour ? this.meridiem : '',
-      })}`
-      : `${title} ${getI18nText('titleEmpty')}`;
-
-    return sstyled(styles)(
-      <>
-        <STimePicker
-          render={Input}
-          role='group'
-          aria-label={label}
-          __excludeProps={['value', 'title']}
-        >
-          <Children />
-        </STimePicker>
-      </>,
-    );
-  }
-}
-
-class Separator extends Component {
-  static defaultProps = {
-    children: ':',
-  };
-
-  handlerClick = () => {
-    if (this.asProps.hoursInputRef.current) {
-      this.asProps.hoursInputRef.current?.focus();
-    }
-  };
-
-  render() {
-    const STimePickerSeparator = Root;
-    const { styles } = this.asProps;
-
-    return sstyled(styles)(
-      <STimePickerSeparator render={Box} onClick={this.handlerClick} aria-hidden='true' />,
-    );
-  }
-}
-
-const TimePicker = createComponent(TimePickerRoot, {
-  Hours,
-  Minutes,
-  Separator,
-  Format,
-});
-
-export default TimePicker;
diff --git a/semcore/time-picker/src/PickerFormat.jsx b/semcore/time-picker/src/component/PickerFormat/PickerFormat.tsx
similarity index 80%
rename from semcore/time-picker/src/PickerFormat.jsx
rename to semcore/time-picker/src/component/PickerFormat/PickerFormat.tsx
index 8918571897..e2392e2ab7 100644
--- a/semcore/time-picker/src/PickerFormat.jsx
+++ b/semcore/time-picker/src/component/PickerFormat/PickerFormat.tsx
@@ -3,8 +3,12 @@ import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
 import { Box, ScreenReaderOnly } from '@semcore/flex-box';
 import React from 'react';
 
-class TimePickerFormat extends Component {
-  static enhance = [uniqueIDEnhancement()];
+import style from './picker-format.shadow.css';
+import type { TimePickerFormatProps, TimePickerFormatPropsInternal } from './PickerFormat.type';
+
+class TimePickerFormat extends Component<TimePickerFormatProps, {}, {}, typeof TimePickerFormat.enhance, TimePickerFormatPropsInternal> {
+  static style = style;
+  static enhance = [uniqueIDEnhancement()] as const;
 
   state = {
     changedFormatNotice: '',
diff --git a/semcore/time-picker/src/component/PickerFormat/PickerFormat.type.ts b/semcore/time-picker/src/component/PickerFormat/PickerFormat.type.ts
new file mode 100644
index 0000000000..284c561e9a
--- /dev/null
+++ b/semcore/time-picker/src/component/PickerFormat/PickerFormat.type.ts
@@ -0,0 +1,19 @@
+import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n';
+import type { BoxProps } from '@semcore/flex-box';
+
+import type { TimePickerMeridiem } from '../TimePicker/TimePicker.type';
+
+export type TimePickerFormatProps = BoxProps & {};
+
+export type TimePickerFormatPropsInternal = {
+  /** Internal */
+  getI18nText: ReturnType<typeof useI18n>;
+  /** Internal */
+  size: 'm' | 'l';
+  /** Internal */
+  disabled: boolean;
+  /** Internal */
+  meridiem: TimePickerMeridiem;
+  /** Internal */
+  onClick: (event: React.SyntheticEvent) => void;
+};
diff --git a/semcore/time-picker/src/style/time-picker.shadow.css b/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css
similarity index 60%
rename from semcore/time-picker/src/style/time-picker.shadow.css
rename to semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css
index bca1b0de4a..6c3e895d28 100644
--- a/semcore/time-picker/src/style/time-picker.shadow.css
+++ b/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css
@@ -1,45 +1,3 @@
-STimePicker {
-  position: relative;
-  width: auto;
-  outline: none;
-
-  SPickerInput {
-    box-sizing: content-box;
-    text-align: center;
-    z-index: 1;
-    height: 1.5em;
-
-    &[placeholder] {
-      text-overflow: initial;
-    }
-    &:focus {
-      outline: none;
-      background-color: var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2));
-    }
-  }
-}
-
-/*STimePicker[keyboardFocused]:focus {*/
-/*  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));*/
-/*}*/
-
-STimePicker[disabled] {
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  cursor: default;
-}
-
-SPickerInput[size='m'] {
-  width: 19px;
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  padding: 0;
-}
-
-SPickerInput[size='l'] {
-  width: 21px;
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  padding: 0;
-}
-
 SPickerFormat {
   flex-shrink: 0;
   position: relative;
@@ -100,17 +58,4 @@ SPickerFormat[disabled] {
   cursor: default;
   pointer-events: none;
   border-color: transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf);
-}
-
-/*SPickerFormat[keyboardFocused] {*/
-/*  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));*/
-/*}*/
-
-STimePickerSeparator {
-  color: var(--intergalactic-text-primary, #191b23);
-}
-
-STimePickerSeparator[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
-  pointer-events: none;
-}
+}
\ No newline at end of file
diff --git a/semcore/time-picker/src/PickerInput.jsx b/semcore/time-picker/src/component/PickerInput/PickerInput.tsx
similarity index 59%
rename from semcore/time-picker/src/PickerInput.jsx
rename to semcore/time-picker/src/component/PickerInput/PickerInput.tsx
index e1d6410bab..624c43d966 100644
--- a/semcore/time-picker/src/PickerInput.jsx
+++ b/semcore/time-picker/src/component/PickerInput/PickerInput.tsx
@@ -4,25 +4,19 @@ import Input from '@semcore/input';
 import Select from '@semcore/select';
 import React from 'react';
 
-import { intOrDefault, withLeadingZero } from './TimePicker';
+import style from './picker-input.shadow.css';
+import type { PickerInputMinMax, PickerInputProps } from './PickerInput.type';
+import type { TimePickerField } from '../TimePicker/TimePicker.type';
 
-const MAP_FIELD_TO_TIME = {
-  hours: 0,
-  minutes: 1,
-};
-
-const MAP_SIZE_SELECT = {
-  m: 'm',
-  l: 'l',
-};
-
-function getOptions(min, max, step = 1) {
+function getOptions(minMax: PickerInputMinMax, step = 1) {
+  const [min, max] = minMax;
   const length = Number(((max + 1 - min) / step).toFixed(0));
   const options = Array(length).fill('');
   let numValue = min;
   return options.map((_i, index) => {
     numValue = index === 0 ? numValue : numValue + step;
-    const value = withLeadingZero(String(numValue));
+    const value = String(numValue).padStart(2, '0');
+
     return (
       <Select.Option value={value} key={value}>
         {value}
@@ -31,36 +25,41 @@ function getOptions(min, max, step = 1) {
   });
 }
 
-const defaultPopperOffset = [-8, 4];
+type State = {
+  dirtyValue?: string;
+  visible: boolean;
+};
 
-class ItemPicker extends Component {
-  static defaultProps = {
+abstract class AbstractPickerInput extends Component<PickerInputProps, {}, State> {
+  static style = style;
+  static defaultProps = (_: PickerInputProps) => ({
     placeholder: '00',
-    offset: defaultPopperOffset,
+    offset: [-8, 4],
+  });
+
+  state: State = {
+    dirtyValue: undefined,
+    visible: false,
   };
 
   inputRef = React.createRef();
 
-  minMax() {
-    return [];
-  }
+  abstract get field(): TimePickerField;
+  abstract get minMax(): PickerInputMinMax;
+  abstract handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
 
-  state = {
-    dirtyValue: undefined,
-    visible: false,
-  };
+  parseValueWithMinMax = (value: string) => {
+    const [min, max] = this.minMax;
 
-  parseValueWithMinMax = (value) => {
-    const [min, max] = this.minMax();
-    return String(Math.max(min, Math.min(max, value)));
+    return String(Math.max(min, Math.min(max, Number(value))));
   };
 
-  dispatchOnChange(value, event) {
+  dispatchOnChange(value: string, event: React.SyntheticEvent) {
     this.setState({ dirtyValue: undefined });
     this.asProps.$onValueChange(value, this.field, event);
   }
 
-  submitChanges(event) {
+  submitChanges(event: React.SyntheticEvent) {
     let { dirtyValue } = this.state;
     if (dirtyValue !== undefined) {
       // if changes value
@@ -69,52 +68,39 @@ class ItemPicker extends Component {
     }
   }
 
-  handleChange = (value, event) => {
+  handleChange = (value: string, event: React.SyntheticEvent) => {
     /* hide props for bubbling events */
     event.stopPropagation();
-    const numberValue = intOrDefault(Number(value), Number.NaN);
+    const numberValue = Number.parseInt(value);
 
     if (!Number.isNaN(numberValue)) {
       this.setState({ dirtyValue: value.slice(-2) });
     }
   };
 
-  handleBlur = (event) => this.submitChanges(event);
-
-  /* rewrite method */
-  handleKeyDown = () => {};
+  handleBlur = (event: React.SyntheticEvent) => this.submitChanges(event);
 
-  handleSelect = (value, event) => {
+  handleSelect = (value: string, event: React.SyntheticEvent) => {
     this.dispatchOnChange(value, event);
   };
 
-  handleVisibleChange = (visible) => this.setState({ visible });
-
-  getAriaLabel = () => {
-    const { _getI18nText: getI18nText } = this.asProps;
-    if (this.field === 'hours') return getI18nText('hours');
-    if (this.field === 'minutes') return getI18nText('minutes');
-    return undefined;
-  };
+  handleVisibleChange = (visible: boolean) => this.setState({ visible });
 
   render() {
     const SPickerInput = Root;
-    const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =
-      this.asProps;
+    const { styles, step, onSelect, time, size, disabled, onVisibleChange, ariaLabel, ...other } = this.asProps;
     const { dirtyValue, visible } = this.state;
-    const timeValue = time[MAP_FIELD_TO_TIME[this.field]];
-    const value = dirtyValue === undefined ? timeValue : dirtyValue;
-    const [min, max] = this.minMax();
+    const value = dirtyValue === undefined ? time : dirtyValue;
 
     return sstyled(styles)(
       <Select
         {...other}
         interaction='focus'
-        size={size ? MAP_SIZE_SELECT[size] : false}
+        size={size}
         onChange={callAllEventHandlers(onSelect, this.handleSelect)}
         onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}
         visible={visible}
-        value={timeValue}
+        value={time}
       >
         <SPickerInput
           render={Select.Trigger}
@@ -125,31 +111,31 @@ class ItemPicker extends Component {
           disabled={disabled}
           neighborLocation={false}
           value={value}
-          aria-label={this.getAriaLabel()}
+          aria-label={ariaLabel}
           onChange={this.handleChange}
           onBlur={this.handleBlur}
           onKeyDown={this.handleKeyDown}
         />
-        <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>
+        <Select.Menu hMax={180}>{getOptions(this.minMax, step)}</Select.Menu>
       </Select>,
     );
   }
 }
 
-class Hours extends ItemPicker {
-  field = 'hours';
-  static defaultProps = ({ size }) => ({
-    ...ItemPicker.defaultProps,
-    ml: size === 'l' ? 3 : undefined,
+class Hours extends AbstractPickerInput {
+  static defaultProps = (props: PickerInputProps) => ({
+    ...AbstractPickerInput.defaultProps(props),
+    ml: props.size === 'l' ? 3 : undefined,
   });
 
-  minMax() {
+  get field(): TimePickerField {
+    return 'hours';
+  }
+
+  get minMax(): PickerInputMinMax {
     const { is12Hour } = this.asProps;
-    if (is12Hour) {
-      return [1, 12];
-    } else {
-      return [0, 23];
-    }
+
+    return is12Hour ? [1, 12] : [0, 23];
   }
 
   focusNext() {
@@ -159,13 +145,14 @@ class Hours extends ItemPicker {
     }
   }
 
-  handleKeyDown = (event) => {
+  handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const { currentTarget } = event;
     if (event.key === 'Enter') {
       this.submitChanges(event);
     }
     if (event.key === 'ArrowRight') {
       if (
+        currentTarget.selectionStart &&
         currentTarget.selectionStart >= currentTarget.value.length &&
         currentTarget.selectionStart === currentTarget.selectionEnd
       ) {
@@ -175,7 +162,7 @@ class Hours extends ItemPicker {
     }
   };
 
-  componentDidUpdate(_prevProps, prevState) {
+  componentDidUpdate(_: PickerInputProps, prevState: State) {
     const { dirtyValue } = this.state;
     if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;
 
@@ -185,14 +172,17 @@ class Hours extends ItemPicker {
   }
 }
 
-class Minutes extends ItemPicker {
-  field = 'minutes';
-  static defaultProps = ({ size }) => ({
-    ...ItemPicker.defaultProps,
-    mr: size === 'l' ? 3 : undefined,
+class Minutes extends AbstractPickerInput {
+  static defaultProps = (props: PickerInputProps) => ({
+    ...AbstractPickerInput.defaultProps(props),
+    mr: props.size === 'l' ? 3 : undefined,
   });
 
-  minMax() {
+  get field(): TimePickerField {
+    return 'minutes';
+  }
+
+  get minMax(): PickerInputMinMax {
     return [0, 59];
   }
 
@@ -203,10 +193,11 @@ class Minutes extends ItemPicker {
     }
   }
 
-  handleKeyDown = (event) => {
+  handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const { currentTarget } = event;
     if (event.key === 'ArrowLeft') {
       if (
+        currentTarget.selectionStart &&
         currentTarget.selectionStart <= 0 &&
         currentTarget.selectionStart === currentTarget.selectionEnd
       ) {
diff --git a/semcore/time-picker/src/component/PickerInput/PickerInput.type.ts b/semcore/time-picker/src/component/PickerInput/PickerInput.type.ts
new file mode 100644
index 0000000000..e3d365da6c
--- /dev/null
+++ b/semcore/time-picker/src/component/PickerInput/PickerInput.type.ts
@@ -0,0 +1,17 @@
+import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n';
+import type { SelectProps } from '@semcore/select';
+
+import type { TimePickerField, TimePickerItemProps } from '../TimePicker/TimePicker.type';
+
+export type PickerInputProps = SelectProps & TimePickerItemProps & {
+  time: string;
+  size?: 'm' | 'l';
+  is12Hour?: boolean;
+  disabled?: boolean;
+  $onValueChange: (value: string, field: TimePickerField, event: React.SyntheticEvent) => void;
+  minutesInputRef: React.RefObject<HTMLElement>;
+  hoursInputRef: React.RefObject<HTMLElement>;
+  ariaLabel: string;
+};
+
+export type PickerInputMinMax = [number, number];
diff --git a/semcore/time-picker/src/component/PickerInput/picker-input.shadow.css b/semcore/time-picker/src/component/PickerInput/picker-input.shadow.css
new file mode 100644
index 0000000000..6d2ff7be75
--- /dev/null
+++ b/semcore/time-picker/src/component/PickerInput/picker-input.shadow.css
@@ -0,0 +1,11 @@
+SPickerInput[size='m'] {
+  width: 19px;
+  margin: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0;
+}
+
+SPickerInput[size='l'] {
+  width: 21px;
+  margin: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0;
+}
\ No newline at end of file
diff --git a/semcore/time-picker/src/component/TimePicker/TimePicker.tsx b/semcore/time-picker/src/component/TimePicker/TimePicker.tsx
new file mode 100644
index 0000000000..739fc00c37
--- /dev/null
+++ b/semcore/time-picker/src/component/TimePicker/TimePicker.tsx
@@ -0,0 +1,170 @@
+import { createComponent, Component, sstyled, Root } from '@semcore/core';
+import reactive from '@semcore/core/lib/decorators/reactive';
+import trackPropsChanges from '@semcore/core/lib/decorators/trackPropsChanges';
+import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
+import { Box } from '@semcore/flex-box';
+import Input from '@semcore/input';
+import React from 'react';
+
+import style from './time-picker.shadow.css';
+import type {
+  TimePickerComponent,
+  TimePickerProps,
+  TimePickerField,
+  TimePickerSeparatorProps,
+} from './TimePicker.type';
+import TimePickerEntity from '../../entity/TimePickerEntity';
+import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
+import Format from '../PickerFormat/PickerFormat';
+import { Hours, Minutes } from '../PickerInput/PickerInput';
+
+@trackPropsChanges(['value'])
+class TimePickerRoot extends Component<TimePickerProps, {}, {}, typeof TimePickerRoot.enhance> {
+  static displayName = 'TimePicker';
+  static style = style;
+  static enhance = [i18nEnhance(localizedMessages)] as const;
+  static defaultProps = ({ is12Hour }: TimePickerProps) => ({
+    defaultValue: '',
+    size: 'm',
+    children: (
+      <>
+        <TimePicker.Hours />
+        <TimePicker.Separator />
+        <TimePicker.Minutes />
+        {is12Hour && <TimePicker.Format />}
+      </>
+    ),
+    locale: 'en',
+  });
+
+  hoursInputRef = React.createRef<HTMLElement>();
+  minutesInputRef = React.createRef<HTMLElement>();
+
+  @reactive(['meridiem'], function () {
+    this.forceUpdate();
+  })
+  readonly entity = new TimePickerEntity(this.props.value, this.props.is12Hour);
+
+  onPropsChange(changedProps: TimePickerProps) {
+    const { value } = changedProps;
+
+    if (!value) return;
+
+    const [hours = '', minutes = ''] = value.split(':');
+
+    this.entity.hours = hours;
+    this.entity.minutes = minutes;
+  }
+
+  uncontrolledProps() {
+    return {
+      value: null,
+    };
+  }
+
+  handleValueChange = (value: string, field: TimePickerField, event: React.SyntheticEvent) => {
+    this.entity[field] = value;
+
+    this.handlers.value(this.entity.toString(), event);
+  };
+
+  handleMeridiemClick = (event: React.SyntheticEvent) => {
+    this.entity.toggleMeridiem();
+
+    this.handlers.value(this.entity.toString(), event);
+  };
+
+  private getCommonPickerInputProps = () => {
+    const { is12Hour, size, disabled } = this.asProps;
+
+    return {
+      size,
+      is12Hour,
+      disabled,
+      $onValueChange: this.handleValueChange,
+      minutesInputRef: this.minutesInputRef,
+      hoursInputRef: this.hoursInputRef,
+    };
+  };
+
+  getHoursProps = () => {
+    return {
+      ...this.getCommonPickerInputProps(),
+      time: this.entity.hours,
+      ariaLabel: this.asProps.getI18nText('hours'),
+      ref: this.hoursInputRef,
+    };
+  };
+
+  getMinutesProps = () => {
+    return {
+      ...this.getCommonPickerInputProps(),
+      time: this.entity.minutes,
+      ariaLabel: this.asProps.getI18nText('minutes'),
+      ref: this.minutesInputRef,
+    };
+  };
+
+  getSeparatorProps() {
+    return {
+      disabled: this.asProps.disabled,
+      hoursInputRef: this.hoursInputRef,
+    };
+  }
+
+  getFormatProps() {
+    const { size, disabled, getI18nText } = this.asProps;
+    return {
+      size,
+      disabled,
+      meridiem: this.entity.meridiem,
+      onClick: this.handleMeridiemClick,
+      getI18nText,
+    };
+  }
+
+  render() {
+    const STimePicker = Root;
+    const { styles, Children, value, is12Hour, getI18nText } = this.asProps;
+    const label = value
+      ? `${getI18nText('title', {
+        time: this.entity.toString(),
+        meridiem: is12Hour ? this.entity.meridiem : '',
+      })}`
+      : `${getI18nText('titleEmpty')}`;
+
+    return sstyled(styles)(
+      <>
+        <STimePicker render={Input} role='group' aria-label={label} __excludeProps={['value']}>
+          <Children />
+        </STimePicker>
+      </>,
+    );
+  }
+}
+class Separator extends Component<TimePickerSeparatorProps> {
+  static defaultProps = {
+    children: ':',
+  };
+
+  handlerClick = () => {
+    if (this.asProps.hoursInputRef.current) {
+      this.asProps.hoursInputRef.current?.focus();
+    }
+  };
+
+  render() {
+    const STimePickerSeparator = Root;
+    const { styles } = this.asProps;
+    return sstyled(styles)(<STimePickerSeparator render={Box} onClick={this.handlerClick} aria-hidden='true' />);
+  }
+}
+
+const TimePicker = createComponent(TimePickerRoot, {
+  Hours,
+  Minutes,
+  Separator,
+  Format,
+}) as TimePickerComponent;
+
+export default TimePicker;
diff --git a/semcore/time-picker/src/index.d.ts b/semcore/time-picker/src/component/TimePicker/TimePicker.type.ts
similarity index 58%
rename from semcore/time-picker/src/index.d.ts
rename to semcore/time-picker/src/component/TimePicker/TimePicker.type.ts
index 454c9be06b..b9c3014523 100644
--- a/semcore/time-picker/src/index.d.ts
+++ b/semcore/time-picker/src/component/TimePicker/TimePicker.type.ts
@@ -1,10 +1,9 @@
-import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import type { Box, BoxProps } from '@semcore/flex-box';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { Box } from '@semcore/flex-box';
 import type { InputProps, InputValueProps } from '@semcore/input';
-import type React from 'react';
 
-/** @deprecated */
-export interface ITimePickerProps extends TimePickerProps, UnknownProperties {}
+import type { TimePickerFormatProps } from '../PickerFormat/PickerFormat.type';
+
 export type TimePickerProps = Omit<InputProps, 'size'> & {
   /** Time in the hh:mm format */
   value?: string;
@@ -23,32 +22,34 @@ export type TimePickerProps = Omit<InputProps, 'size'> & {
   locale?: string;
 };
 
-/** @deprecated */
-export interface ITimePickerItemProps extends TimePickerItemProps, UnknownProperties {}
-export type TimePickerItemProps = InputValueProps & {
+export type TimePickerSeparatorProps = {
+  /** Internal */
+  hoursInputRef: React.RefObject<HTMLElement>;
+  /** Internal */
+  disabled?: boolean;
+};
+
+export type TimePickerItemProps = {
   /** Step for changing of the values in the dropdown list */
   step?: number;
 };
 
-/** @deprecated */
-export interface ITimePickerFormatProps extends TimePickerFormatProps, UnknownProperties {}
-export type TimePickerFormatProps = BoxProps & {};
-
-/** @deprecated */
-export interface ITimePickerContext extends TimePickerContext, UnknownProperties {}
 export type TimePickerContext = {
   getHoursProps: PropGetterFn;
   getFormatProps: PropGetterFn;
   getMinutesProps: PropGetterFn;
+  getSeparatorProps: PropGetterFn;
 };
 
-/** @deprecated */
-export interface ITimePickerHandlers extends TimePickerHandlers, UnknownProperties {}
 export type TimePickerHandlers = {
   value: (value: string) => void;
 };
 
-declare const TimePicker: Intergalactic.Component<
+export type TimePickerMeridiem = 'AM' | 'PM';
+
+export type TimePickerField = 'hours' | 'minutes';
+
+export type TimePickerComponent = Intergalactic.Component<
   'div',
   TimePickerProps,
   TimePickerContext,
@@ -59,5 +60,3 @@ declare const TimePicker: Intergalactic.Component<
   Separator: typeof Box;
   Format: Intergalactic.Component<'div', TimePickerFormatProps>;
 };
-
-export default TimePicker;
diff --git a/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css b/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css
new file mode 100644
index 0000000000..9c6520513d
--- /dev/null
+++ b/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css
@@ -0,0 +1,34 @@
+STimePicker {
+  position: relative;
+  width: auto;
+  outline: none;
+
+  SPickerInput {
+    box-sizing: content-box;
+    text-align: center;
+    z-index: 1;
+    height: 1.5em;
+
+    &[placeholder] {
+      text-overflow: initial;
+    }
+    &:focus {
+      outline: none;
+      background-color: var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2));
+    }
+  }
+}
+
+STimePicker[disabled] {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  cursor: default;
+}
+
+STimePickerSeparator {
+  color: var(--intergalactic-text-primary, #191b23);
+}
+
+STimePickerSeparator[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/semcore/time-picker/src/entity/TimePickerEntity.ts b/semcore/time-picker/src/entity/TimePickerEntity.ts
new file mode 100644
index 0000000000..a5860c8152
--- /dev/null
+++ b/semcore/time-picker/src/entity/TimePickerEntity.ts
@@ -0,0 +1,85 @@
+import type { TimePickerMeridiem } from '../component/TimePicker/TimePicker.type';
+
+class TimePickerEntity {
+  private _hours: string = '';
+  private _minutes: string = '';
+  private is12Hour: undefined | boolean;
+  private _meridiem: TimePickerMeridiem = 'AM';
+
+  constructor(
+    value: string = ':', // should be in the format 'HH:mm'
+    is12Hour?: boolean,
+  ) {
+    const [hours = '', minutes = ''] = value.split(':');
+
+    this.is12Hour = is12Hour;
+    this._hours = hours;
+    this._minutes = minutes;
+  }
+
+  get meridiem() {
+    return this._meridiem;
+  }
+
+  get hours() {
+    return this.is12Hour ? this.formatHoursTo12(this._hours) : this.formatHoursTo24(this._hours);
+  }
+
+  get minutes() {
+    return this._minutes && this.withLeadingZero(this._minutes);
+  }
+
+  set hours(newHours) {
+    this._hours = newHours;
+  }
+
+  set minutes(newMinutes) {
+    this._minutes = newMinutes;
+  }
+
+  set meridiem(newMeridiem) {
+    this._meridiem = newMeridiem;
+  }
+
+  private withLeadingZero(value: string | number) {
+    return String(value).padStart(2, '0');
+  }
+
+  private formatHoursTo12(hours: string) {
+    const numberHours = Number.parseInt(hours);
+
+    if (Number.isNaN(numberHours)) return hours;
+
+    if (numberHours === 0) {
+      return '12';
+    } else if (numberHours > 12) {
+      return this.withLeadingZero(numberHours - 12);
+    }
+
+    return this.withLeadingZero(numberHours);
+  }
+
+  private formatHoursTo24(hours: string) {
+    const numberHours = Number.parseInt(hours);
+
+    if (Number.isNaN(numberHours)) return hours;
+
+    if (this.meridiem === 'AM') {
+      return this.withLeadingZero(numberHours === 12 ? 0 : numberHours);
+    }
+
+    return this.withLeadingZero(numberHours < 12 ? numberHours + 12 : numberHours);
+  }
+
+  toggleMeridiem() {
+    this.meridiem = this._meridiem === 'AM' ? 'PM' : 'AM';
+  }
+
+  toString() {
+    const hours = this.is12Hour ? this.formatHoursTo24(this.hours) : this.hours;
+
+    return `${hours}:${this.minutes}`;
+  }
+}
+
+export default TimePickerEntity;
diff --git a/semcore/time-picker/src/index.js b/semcore/time-picker/src/index.js
deleted file mode 100644
index b6cfc0eb76..0000000000
--- a/semcore/time-picker/src/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './TimePicker';
-export * from './TimePicker';
diff --git a/semcore/time-picker/src/index.ts b/semcore/time-picker/src/index.ts
new file mode 100644
index 0000000000..0561415850
--- /dev/null
+++ b/semcore/time-picker/src/index.ts
@@ -0,0 +1 @@
+export { default } from './component/TimePicker/TimePicker';
diff --git a/semcore/time-picker/vite.config.ts b/semcore/time-picker/vite.config.ts
index 0991a16528..3d4c534132 100644
--- a/semcore/time-picker/vite.config.ts
+++ b/semcore/time-picker/vite.config.ts
@@ -7,10 +7,7 @@ export default mergeConfig(
   defineConfig({
     build: {
       lib: {
-        entry: './src/index.js',
-      },
-      rollupOptions: {
-        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
+        entry: './src/index.ts',
       },
     },
   }),
diff --git a/tsconfig.json b/tsconfig.json
index 7713e96e7a..a81c7f89b0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,8 +13,6 @@
     "importHelpers": false,
     "noEmitHelpers": true,
     "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
     "resolveJsonModule": true,
     "baseUrl": "./semcore",
     "typeRoots": ["node_modules/@types", "tools/@types"],