From 3202c80c9abf75be78ff9ef27d507d3ea010527e Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Tue, 12 May 2026 08:36:56 +0300
Subject: [PATCH 01/12] =?UTF-8?q?(feat/shared):=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D1=80=D0=B5=D0=B0=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20WebHaptics=20[DS-16107]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/checkbox/src/Component.tsx      | 20 ++++++++++-
 packages/checkbox/tsconfig.build.json    |  4 ++-
 packages/checkbox/tsconfig.json          |  3 ++
 packages/config/src/CoreConfigContext.ts |  3 ++
 packages/shared/package.json             |  3 +-
 packages/shared/src/haptics.ts           | 46 ++++++++++++++++++++++++
 packages/shared/src/index.ts             |  1 +
 yarn.lock                                | 22 ++++++++++++
 8 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 packages/shared/src/haptics.ts

diff --git a/packages/checkbox/src/Component.tsx b/packages/checkbox/src/Component.tsx
index 5422c03026..569a7d20bd 100644
--- a/packages/checkbox/src/Component.tsx
+++ b/packages/checkbox/src/Component.tsx
@@ -4,6 +4,7 @@ import React, {
     forwardRef,
     type InputHTMLAttributes,
     type LabelHTMLAttributes,
+    type PointerEvent,
     type ReactNode,
     type Ref,
     type RefObject,
@@ -12,7 +13,8 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { dom, getDataTestId } from '@alfalab/core-components-shared';
+import { useCoreConfig } from '@alfalab/core-components-config';
+import { dom, getDataTestId, triggerHaptic } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 
 import { CheckIcon } from './icon';
@@ -189,9 +191,23 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
         ref,
     ) => {
         const labelRef = useRef<HTMLLabelElement>(null);
+        const addonsRef = useRef<HTMLSpanElement>(null);
+        const { haptics } = useCoreConfig();
 
         const [focused] = useFocus(labelRef, 'keyboard');
 
+        const handlePointerDown = (event: PointerEvent<HTMLLabelElement>) => {
+            labelProps?.onPointerDown?.(event);
+
+            const isAddonClick = addonsRef.current?.contains(event.target as Node);
+
+            if (event.defaultPrevented || disabled || isAddonClick) {
+                return;
+            }
+
+            triggerHaptic('selection', { enabled: haptics?.enabled });
+        };
+
         const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
             if (onChange) {
                 onChange(event, { checked: event.target.checked, name });
@@ -216,6 +232,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
         return (
             <label
                 {...labelProps}
+                onPointerDown={handlePointerDown}
                 className={cn(
                     styles.component,
                     colorStyle.component,
@@ -288,6 +305,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                 {addons && (
                     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                     <span
+                        ref={addonsRef}
                         className={cn(styles.addons, addonsClassName)}
                         onClick={dom.preventDefault}
                     >
diff --git a/packages/checkbox/tsconfig.build.json b/packages/checkbox/tsconfig.build.json
index 0483fd8b67..c6cc032a09 100644
--- a/packages/checkbox/tsconfig.build.json
+++ b/packages/checkbox/tsconfig.build.json
@@ -9,9 +9,11 @@
         "paths": {
             "@alfalab/core-components-checkbox": ["./src"],
             "@alfalab/core-components-checkbox/*": ["./src/*"],
+            "@alfalab/core-components-config": ["../config/src"],
+            "@alfalab/core-components-config/*": ["../config/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
             "@alfalab/core-components-shared/*": ["../shared/src/*"]
         }
     },
-    "references": [{ "path": "../shared/tsconfig.build.json" }]
+    "references": [{ "path": "../config/tsconfig.build.json" }, { "path": "../shared/tsconfig.build.json" }]
 }
diff --git a/packages/checkbox/tsconfig.json b/packages/checkbox/tsconfig.json
index e89766043b..5b553050fd 100644
--- a/packages/checkbox/tsconfig.json
+++ b/packages/checkbox/tsconfig.json
@@ -8,6 +8,8 @@
         "paths": {
             "@alfalab/core-components-checkbox": ["./src"],
             "@alfalab/core-components-checkbox/*": ["./src/*"],
+            "@alfalab/core-components-config": ["../config/src"],
+            "@alfalab/core-components-config/*": ["../config/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
             "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
@@ -17,6 +19,7 @@
         }
     },
     "references": [
+        { "path": "../config/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../test-utils/tsconfig.build.json" }
diff --git a/packages/config/src/CoreConfigContext.ts b/packages/config/src/CoreConfigContext.ts
index f0ca34c8ca..4c260a6e4c 100644
--- a/packages/config/src/CoreConfigContext.ts
+++ b/packages/config/src/CoreConfigContext.ts
@@ -4,6 +4,9 @@ export type CoreConfigContextValue = {
     breakpoint: number;
     client: 'desktop' | 'mobile';
     getPortalContainer?: () => Element | null | undefined;
+    haptics?: {
+        enabled?: boolean;
+    };
 };
 
 export const CoreConfigContext = createContext<CoreConfigContextValue>({
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 366e03edd9..383e8f453d 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -15,7 +15,8 @@
         "@maskito/core": "^1.7.0",
         "classnames": "^2.5.1",
         "detect-browser": "^5.3.0",
-        "tslib": "^2.4.0"
+        "tslib": "^2.4.0",
+        "web-haptics": "^0.0.6"
     },
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0",
diff --git a/packages/shared/src/haptics.ts b/packages/shared/src/haptics.ts
new file mode 100644
index 0000000000..7879dab20c
--- /dev/null
+++ b/packages/shared/src/haptics.ts
@@ -0,0 +1,46 @@
+import { WebHaptics } from 'web-haptics';
+
+import { isClient } from './isClient';
+
+export type HapticPreset = 'selection';
+
+export type TriggerHapticOptions = {
+    enabled?: boolean;
+};
+
+const hapticPatterns: Record<HapticPreset, Parameters<WebHaptics['trigger']>[0]> = {
+    selection: [{ duration: 50, intensity: 1 }],
+    // TODO: add more custom haptic patterns... (or use defaultPatterns)
+};
+
+let haptics: WebHaptics | null = null;
+
+const isTouchEnvironment = () => {
+    if (!isClient()) return false;
+
+    return (
+        window.navigator.maxTouchPoints > 0 ||
+        window.matchMedia?.('(pointer: coarse)').matches === true
+    );
+};
+
+export const isHapticsSupported = () =>
+    isClient() && (typeof window.navigator.vibrate === 'function' || isTouchEnvironment());
+
+const getHaptics = () => {
+    if (!haptics) {
+        haptics = new WebHaptics({ showSwitch: false });
+    }
+
+    return haptics;
+};
+
+export const triggerHaptic = (preset: HapticPreset, options: TriggerHapticOptions = {}) => {
+    if (options.enabled === false) return;
+    if (!isHapticsSupported()) return;
+
+    getHaptics()
+        .trigger(hapticPatterns[preset])
+        // no-op on error
+        .catch(() => {});
+};
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 9a6fc88e3c..fe57e26828 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -16,3 +16,4 @@ export * from './get-color-var';
 export * from './mask';
 export * from './human-file-size';
 export * from './icon-20-adapter';
+export * from './haptics';
diff --git a/yarn.lock b/yarn.lock
index 8625c80d57..bba55c378d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1673,6 +1673,7 @@ __metadata:
     classnames: "npm:^2.5.1"
     detect-browser: "npm:^5.3.0"
     tslib: "npm:^2.4.0"
+    web-haptics: "npm:^0.0.6"
   peerDependencies:
     react: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
     react-dom: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
@@ -33067,6 +33068,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-haptics@npm:^0.0.6":
+  version: 0.0.6
+  resolution: "web-haptics@npm:0.0.6"
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+    svelte: ">=4"
+    vue: ">=3"
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+    svelte:
+      optional: true
+    vue:
+      optional: true
+  checksum: 10c0/71d3bfb0299469362e23ef177337f2cf665ed66aa49b6d5e7afc9d97fc05af9a2056263c17766eb929eb86ec1f526fba21502e926ea3cc39175f251c5c9374db
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"

From e722d38b34394e4b9c99008bfe3fe19b9f0c4b09 Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Tue, 12 May 2026 08:58:01 +0300
Subject: [PATCH 02/12] fix esLint

---
 .changeset/twelve-ends-find.md        | 8 ++++++++
 packages/checkbox/package.json        | 1 +
 packages/checkbox/tsconfig.build.json | 5 ++++-
 yarn.lock                             | 1 +
 4 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/twelve-ends-find.md

diff --git a/.changeset/twelve-ends-find.md b/.changeset/twelve-ends-find.md
new file mode 100644
index 0000000000..9e29678d1d
--- /dev/null
+++ b/.changeset/twelve-ends-find.md
@@ -0,0 +1,8 @@
+---
+'@alfalab/core-components-checkbox': minor
+'@alfalab/core-components-config': minor
+'@alfalab/core-components-shared': minor
+'@alfalab/core-components': minor
+---
+
+- Добавлена базовая инфраструктура haptic feedback.
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
index 45cd8863b2..e64964fb88 100644
--- a/packages/checkbox/package.json
+++ b/packages/checkbox/package.json
@@ -17,6 +17,7 @@
         "tslib": "^2.4.0"
     },
     "peerDependencies": {
+        "@alfalab/core-components-config": "^1.1.0",
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0",
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0"
     },
diff --git a/packages/checkbox/tsconfig.build.json b/packages/checkbox/tsconfig.build.json
index c6cc032a09..32f4638b01 100644
--- a/packages/checkbox/tsconfig.build.json
+++ b/packages/checkbox/tsconfig.build.json
@@ -15,5 +15,8 @@
             "@alfalab/core-components-shared/*": ["../shared/src/*"]
         }
     },
-    "references": [{ "path": "../config/tsconfig.build.json" }, { "path": "../shared/tsconfig.build.json" }]
+    "references": [
+        { "path": "../config/tsconfig.build.json" },
+        { "path": "../shared/tsconfig.build.json" }
+    ]
 }
diff --git a/yarn.lock b/yarn.lock
index bba55c378d..9fa8b9e5fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -397,6 +397,7 @@ __metadata:
     react-merge-refs: "npm:^1.1.0"
     tslib: "npm:^2.4.0"
   peerDependencies:
+    "@alfalab/core-components-config": ^1.1.0
     react: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
     react-dom: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
   languageName: unknown

From a9ccb8bbe9f6769d27d154b3990368d150799356 Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Tue, 12 May 2026 11:26:56 +0300
Subject: [PATCH 03/12] chore: add ios release

---
 packages/shared/src/haptics.ts | 38 ++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/packages/shared/src/haptics.ts b/packages/shared/src/haptics.ts
index 7879dab20c..ab2794ee09 100644
--- a/packages/shared/src/haptics.ts
+++ b/packages/shared/src/haptics.ts
@@ -1,6 +1,7 @@
 import { WebHaptics } from 'web-haptics';
 
 import { isClient } from './isClient';
+import { isIOS } from './os';
 
 export type HapticPreset = 'selection';
 
@@ -14,6 +15,7 @@ const hapticPatterns: Record<HapticPreset, Parameters<WebHaptics['trigger']>[0]>
 };
 
 let haptics: WebHaptics | null = null;
+let iosHapticInput: HTMLInputElement | null = null;
 
 const isTouchEnvironment = () => {
     if (!isClient()) return false;
@@ -35,10 +37,46 @@ const getHaptics = () => {
     return haptics;
 };
 
+const getIOSHapticInput = () => {
+    if (iosHapticInput?.isConnected) return iosHapticInput;
+
+    const input = document.createElement('input');
+
+    input.type = 'checkbox';
+    input.setAttribute('switch', '');
+    input.setAttribute('aria-hidden', 'true');
+    input.tabIndex = -1;
+    input.style.position = 'fixed';
+    input.style.opacity = '0';
+    input.style.pointerEvents = 'none';
+    input.style.width = '1px';
+    input.style.height = '1px';
+    input.style.left = '-9999px';
+    input.style.top = '0';
+
+    document.body.appendChild(input);
+    iosHapticInput = input;
+
+    return iosHapticInput;
+};
+
+const triggerIOSHapticFallback = () => {
+    const input = getIOSHapticInput();
+
+    input.checked = !input.checked;
+    input.click();
+};
+
 export const triggerHaptic = (preset: HapticPreset, options: TriggerHapticOptions = {}) => {
     if (options.enabled === false) return;
     if (!isHapticsSupported()) return;
 
+    if (isIOS()) {
+        triggerIOSHapticFallback();
+
+        return;
+    }
+
     getHaptics()
         .trigger(hapticPatterns[preset])
         // no-op on error

From 5d01d79ce28b39043aa7f45296b0c26b3c163177 Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Tue, 19 May 2026 11:50:47 +0300
Subject: [PATCH 04/12] chore: add HapticAPI

---
 .changeset/twelve-ends-find.md                |  5 +-
 .vscode/settings.json                         |  1 +
 .../src/__snapshots__/Component.test.tsx.snap | 14 +++++
 packages/checkbox/package.json                |  1 +
 packages/checkbox/src/Component.tsx           | 27 ++-------
 .../src/__snapshots__/Component.test.tsx.snap |  6 ++
 packages/checkbox/tsconfig.build.json         |  3 +
 packages/checkbox/tsconfig.json               |  3 +
 packages/haptics/CHANGELOG.md                 |  9 +++
 packages/haptics/package.json                 | 28 +++++++++
 packages/haptics/src/component.tsx            | 35 +++++++++++
 .../haptics/src/hooks/use-client-haptics.ts   | 32 ++++++++++
 packages/haptics/src/index.ts                 |  2 +
 packages/haptics/src/types.ts                 | 50 ++++++++++++++++
 .../src/haptics.ts => haptics/src/utils.ts}   | 59 +++++++++++--------
 packages/haptics/tsconfig.build.json          | 22 +++++++
 packages/haptics/tsconfig.json                | 27 +++++++++
 packages/root/package.json                    |  1 +
 packages/root/tsconfig.build.json             |  3 +
 packages/shared/package.json                  |  3 +-
 packages/shared/src/index.ts                  |  1 -
 tsconfig.react-docgen-typescript.json         |  2 +
 tsconfig.test.json                            |  2 +
 yarn.lock                                     | 16 ++++-
 24 files changed, 299 insertions(+), 53 deletions(-)
 create mode 100644 packages/haptics/CHANGELOG.md
 create mode 100644 packages/haptics/package.json
 create mode 100644 packages/haptics/src/component.tsx
 create mode 100644 packages/haptics/src/hooks/use-client-haptics.ts
 create mode 100644 packages/haptics/src/index.ts
 create mode 100644 packages/haptics/src/types.ts
 rename packages/{shared/src/haptics.ts => haptics/src/utils.ts} (55%)
 create mode 100644 packages/haptics/tsconfig.build.json
 create mode 100644 packages/haptics/tsconfig.json

diff --git a/.changeset/twelve-ends-find.md b/.changeset/twelve-ends-find.md
index 9e29678d1d..272a3f4e3c 100644
--- a/.changeset/twelve-ends-find.md
+++ b/.changeset/twelve-ends-find.md
@@ -1,8 +1,7 @@
 ---
-'@alfalab/core-components-checkbox': minor
+'@alfalab/core-components-haptics': minor
 '@alfalab/core-components-config': minor
-'@alfalab/core-components-shared': minor
 '@alfalab/core-components': minor
 ---
 
-- Добавлена базовая инфраструктура haptic feedback.
+- Добавлена базовая инфраструктура `haptic feedback`.
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 651b0db4bd..1308cc1402 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -56,6 +56,7 @@
         "packages/generic-wrapper",
         "packages/global-store",
         "packages/grid",
+        "packages/haptics",
         "packages/hatching-progress-bar",
         "packages/icon-button",
         "packages/icon-view",
diff --git a/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap b/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap
index a95e04d0f3..81dc561ecd 100644
--- a/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
             class="component component size-20 start my-checkbox checkbox"
           >
             <input
+              data-haptic="false"
               name="one"
               type="checkbox"
             />
@@ -40,6 +41,7 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
             class="component component size-20 start checkbox"
           >
             <input
+              data-haptic="false"
               name="two"
               type="checkbox"
             />
@@ -60,6 +62,7 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
             class="component component size-20 start checkbox"
           >
             <input
+              data-haptic="false"
               name="three"
               type="checkbox"
             />
@@ -96,6 +99,7 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
           class="component component size-20 start my-checkbox checkbox"
         >
           <input
+            data-haptic="false"
             name="one"
             type="checkbox"
           />
@@ -116,6 +120,7 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
           class="component component size-20 start checkbox"
         >
           <input
+            data-haptic="false"
             name="two"
             type="checkbox"
           />
@@ -136,6 +141,7 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
           class="component component size-20 start checkbox"
         >
           <input
+            data-haptic="false"
             name="three"
             type="checkbox"
           />
@@ -229,6 +235,7 @@ exports[`Checkbox Display tests should display checkbox group with error correct
             class="component component size-20 start my-checkbox checkbox"
           >
             <input
+              data-haptic="false"
               name="one"
               type="checkbox"
             />
@@ -249,6 +256,7 @@ exports[`Checkbox Display tests should display checkbox group with error correct
             class="component component size-20 start checkbox"
           >
             <input
+              data-haptic="false"
               name="two"
               type="checkbox"
             />
@@ -269,6 +277,7 @@ exports[`Checkbox Display tests should display checkbox group with error correct
             class="component component size-20 start checkbox"
           >
             <input
+              data-haptic="false"
               name="three"
               type="checkbox"
             />
@@ -311,6 +320,7 @@ exports[`Checkbox Display tests should display checkbox group with error correct
           class="component component size-20 start my-checkbox checkbox"
         >
           <input
+            data-haptic="false"
             name="one"
             type="checkbox"
           />
@@ -331,6 +341,7 @@ exports[`Checkbox Display tests should display checkbox group with error correct
           class="component component size-20 start checkbox"
         >
           <input
+            data-haptic="false"
             name="two"
             type="checkbox"
           />
@@ -351,6 +362,7 @@ exports[`Checkbox Display tests should display checkbox group with error correct
           class="component component size-20 start checkbox"
         >
           <input
+            data-haptic="false"
             name="three"
             type="checkbox"
           />
@@ -450,6 +462,7 @@ exports[`Checkbox Display tests should display checkbox group with one child cor
             class="component component size-20 start my-checkbox checkbox"
           >
             <input
+              data-haptic="false"
               name="one"
               type="checkbox"
             />
@@ -486,6 +499,7 @@ exports[`Checkbox Display tests should display checkbox group with one child cor
           class="component component size-20 start my-checkbox checkbox"
         >
           <input
+            data-haptic="false"
             name="one"
             type="checkbox"
           />
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
index e64964fb88..c5c5857ea0 100644
--- a/packages/checkbox/package.json
+++ b/packages/checkbox/package.json
@@ -10,6 +10,7 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
+        "@alfalab/core-components-haptics": "^0.0.1",
         "@alfalab/core-components-shared": "^2.1.1",
         "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
diff --git a/packages/checkbox/src/Component.tsx b/packages/checkbox/src/Component.tsx
index 569a7d20bd..9433c6d05b 100644
--- a/packages/checkbox/src/Component.tsx
+++ b/packages/checkbox/src/Component.tsx
@@ -4,7 +4,6 @@ import React, {
     forwardRef,
     type InputHTMLAttributes,
     type LabelHTMLAttributes,
-    type PointerEvent,
     type ReactNode,
     type Ref,
     type RefObject,
@@ -13,8 +12,8 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { useCoreConfig } from '@alfalab/core-components-config';
-import { dom, getDataTestId, triggerHaptic } from '@alfalab/core-components-shared';
+import { Haptic as Button } from '@alfalab/core-components-haptics';
+import { dom, getDataTestId } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 
 import { CheckIcon } from './icon';
@@ -191,23 +190,9 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
         ref,
     ) => {
         const labelRef = useRef<HTMLLabelElement>(null);
-        const addonsRef = useRef<HTMLSpanElement>(null);
-        const { haptics } = useCoreConfig();
 
         const [focused] = useFocus(labelRef, 'keyboard');
 
-        const handlePointerDown = (event: PointerEvent<HTMLLabelElement>) => {
-            labelProps?.onPointerDown?.(event);
-
-            const isAddonClick = addonsRef.current?.contains(event.target as Node);
-
-            if (event.defaultPrevented || disabled || isAddonClick) {
-                return;
-            }
-
-            triggerHaptic('selection', { enabled: haptics?.enabled });
-        };
-
         const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
             if (onChange) {
                 onChange(event, { checked: event.target.checked, name });
@@ -232,7 +217,6 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
         return (
             <label
                 {...labelProps}
-                onPointerDown={handlePointerDown}
                 className={cn(
                     styles.component,
                     colorStyle.component,
@@ -254,14 +238,16 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                 ref={mergeRefs([labelRef, ref, labelProps?.ref as Ref<HTMLLabelElement>])}
             >
                 {!hiddenInput && (
-                    <input
+                    <Button
+                        Component='input'
+                        haptic='checkbox'
                         type='checkbox'
                         onChange={handleChange}
                         name={name}
                         disabled={disabled}
                         checked={checked}
                         data-test-id={dataTestId}
-                        ref={inputRef}
+                        ref={inputRef as unknown as Ref<HTMLElement>}
                         {...restProps}
                     />
                 )}
@@ -305,7 +291,6 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                 {addons && (
                     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                     <span
-                        ref={addonsRef}
                         className={cn(styles.addons, addonsClassName)}
                         onClick={dom.preventDefault}
                     >
diff --git a/packages/checkbox/src/__snapshots__/Component.test.tsx.snap b/packages/checkbox/src/__snapshots__/Component.test.tsx.snap
index 546263e069..0b9b8bd09a 100644
--- a/packages/checkbox/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/checkbox/src/__snapshots__/Component.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`Checkbox Display tests should display correctly 1`] = `
         class="component component size-20 start"
       >
         <input
+          data-haptic="false"
           type="checkbox"
         />
         <span
@@ -36,6 +37,7 @@ exports[`Checkbox Display tests should display correctly 1`] = `
       class="component component size-20 start"
     >
       <input
+        data-haptic="false"
         type="checkbox"
       />
       <span
@@ -120,6 +122,7 @@ exports[`Checkbox Display tests should display error state 1`] = `
         class="component component size-20 start"
       >
         <input
+          data-haptic="false"
           type="checkbox"
         />
         <span
@@ -148,6 +151,7 @@ exports[`Checkbox Display tests should display error state 1`] = `
       class="component component size-20 start"
     >
       <input
+        data-haptic="false"
         type="checkbox"
       />
       <span
@@ -233,6 +237,7 @@ exports[`Checkbox Display tests should display indeterminate correctly 1`] = `
         class="component component size-20 start indeterminate"
       >
         <input
+          data-haptic="false"
           type="checkbox"
         />
         <span
@@ -264,6 +269,7 @@ exports[`Checkbox Display tests should display indeterminate correctly 1`] = `
       class="component component size-20 start indeterminate"
     >
       <input
+        data-haptic="false"
         type="checkbox"
       />
       <span
diff --git a/packages/checkbox/tsconfig.build.json b/packages/checkbox/tsconfig.build.json
index 32f4638b01..573695c9dc 100644
--- a/packages/checkbox/tsconfig.build.json
+++ b/packages/checkbox/tsconfig.build.json
@@ -11,12 +11,15 @@
             "@alfalab/core-components-checkbox/*": ["./src/*"],
             "@alfalab/core-components-config": ["../config/src"],
             "@alfalab/core-components-config/*": ["../config/src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
             "@alfalab/core-components-shared/*": ["../shared/src/*"]
         }
     },
     "references": [
         { "path": "../config/tsconfig.build.json" },
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" }
     ]
 }
diff --git a/packages/checkbox/tsconfig.json b/packages/checkbox/tsconfig.json
index 5b553050fd..1e0370246b 100644
--- a/packages/checkbox/tsconfig.json
+++ b/packages/checkbox/tsconfig.json
@@ -10,6 +10,8 @@
             "@alfalab/core-components-checkbox/*": ["./src/*"],
             "@alfalab/core-components-config": ["../config/src"],
             "@alfalab/core-components-config/*": ["../config/src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
             "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
@@ -20,6 +22,7 @@
     },
     "references": [
         { "path": "../config/tsconfig.build.json" },
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../test-utils/tsconfig.build.json" }
diff --git a/packages/haptics/CHANGELOG.md b/packages/haptics/CHANGELOG.md
new file mode 100644
index 0000000000..dd442a776b
--- /dev/null
+++ b/packages/haptics/CHANGELOG.md
@@ -0,0 +1,9 @@
+# @alfalab/core-components-haptics
+
+## 0.0.1
+
+### Patch Changes
+
+<sup><time>14.05.2026</time></sup>
+
+- Инициализация пакета
diff --git a/packages/haptics/package.json b/packages/haptics/package.json
new file mode 100644
index 0000000000..21ed3a4e5b
--- /dev/null
+++ b/packages/haptics/package.json
@@ -0,0 +1,28 @@
+{
+    "name": "@alfalab/core-components-haptics",
+    "version": "0.0.1",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "dependencies": {
+        "@alfalab/core-components-config": "^1.1.0",
+        "@alfalab/core-components-shared": "^2.1.1",
+        "tslib": "^2.4.0",
+        "web-haptics": "^0.0.6"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0"
+    },
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "themesVersion": "15.0.4",
+    "varsVersion": "11.0.2"
+}
diff --git a/packages/haptics/src/component.tsx b/packages/haptics/src/component.tsx
new file mode 100644
index 0000000000..2a81e51029
--- /dev/null
+++ b/packages/haptics/src/component.tsx
@@ -0,0 +1,35 @@
+import React, {
+    forwardRef,
+    type MouseEvent,
+} from 'react';
+
+import { useCoreConfig } from '@alfalab/core-components-config';
+
+import { type HapticPreset, type HapticProps, type HapticType } from './types';
+import { triggerHaptic } from './utils';
+
+// todo: add more haptic presets
+const hapticPresets: Record<HapticType, HapticPreset> = {
+    checkbox: 'selection',
+};
+
+export const Haptic = forwardRef<HTMLElement, HapticProps>(
+    ({ Component = 'button', haptic, onClick, ...restProps }, ref) => {
+        const { haptics } = useCoreConfig();
+
+        const handleClick = (event: MouseEvent<HTMLElement>) => {
+            onClick?.(event);
+
+            // if the event is default prevented, don't trigger the haptic
+            if (event.defaultPrevented) return;
+
+            triggerHaptic(hapticPresets[haptic as HapticType], {
+                enabled: true || haptics?.enabled,
+            });
+        };
+
+        // data-haptic='false' research
+        return <Component {...restProps} data-haptic='false' ref={ref} onClick={handleClick} />;
+    });
+
+Haptic.displayName = 'Haptic';
diff --git a/packages/haptics/src/hooks/use-client-haptics.ts b/packages/haptics/src/hooks/use-client-haptics.ts
new file mode 100644
index 0000000000..ee5c17e658
--- /dev/null
+++ b/packages/haptics/src/hooks/use-client-haptics.ts
@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+
+import {
+    type ClientHapticsApi,
+    type HapticPreset,
+    type TriggerHapticOptions,
+    type UseClientHapticsParams,
+} from '../types';
+import { triggerHaptic } from '../utils';
+
+/**
+ * Хук для ручного запуска haptic-фидбека из компонентов.
+ */
+export const useHaptic = ({
+    enabled: externalEnabled,
+}: UseClientHapticsParams = {}): ClientHapticsApi => {
+    const isEnabled = externalEnabled !== false;
+
+    const trigger = useCallback(
+        (preset: HapticPreset, options: TriggerHapticOptions = {}) => {
+            const enabled = options.enabled ?? externalEnabled;
+
+            triggerHaptic(preset, { ...options, enabled });
+        },
+        [externalEnabled],
+    );
+
+    return {
+        enabled: isEnabled,
+        triggerHaptic: trigger,
+    };
+};
diff --git a/packages/haptics/src/index.ts b/packages/haptics/src/index.ts
new file mode 100644
index 0000000000..f4c2e7db4f
--- /dev/null
+++ b/packages/haptics/src/index.ts
@@ -0,0 +1,2 @@
+export { Haptic } from './component';
+export { useHaptic } from './hooks/use-client-haptics';
diff --git a/packages/haptics/src/types.ts b/packages/haptics/src/types.ts
new file mode 100644
index 0000000000..8fea1a4769
--- /dev/null
+++ b/packages/haptics/src/types.ts
@@ -0,0 +1,50 @@
+import {
+    type AnchorHTMLAttributes,
+    type ButtonHTMLAttributes,
+    type ElementType,
+    type HTMLAttributes,
+    type InputHTMLAttributes,
+} from 'react';
+
+// todo: add more haptic types
+export type HapticType = 'checkbox';
+
+// todo: add more haptic presets
+export type HapticPreset = 'selection';
+
+export interface HapticBaseProps {
+    /**
+     * Компонент или тег, на который навешивается haptic-поведение
+     */
+    Component?: ElementType;
+
+    /**
+     * Тип элемента, для которого нужно применить haptic-поведение
+     */
+    haptic: HapticType;
+}
+
+type NativeInteractiveProps = Partial<
+    | InputHTMLAttributes<HTMLInputElement>
+    | ButtonHTMLAttributes<HTMLButtonElement>
+    | AnchorHTMLAttributes<HTMLAnchorElement>
+>;
+
+// REFACTOR TYPES FOR CLIENT HAPTICS
+
+export type HapticProps = HapticBaseProps & HTMLAttributes<HTMLElement> & NativeInteractiveProps;
+
+export interface TriggerHapticOptions {
+    enabled?: boolean;
+}
+
+export type TriggerHaptic = (preset: HapticPreset, options?: TriggerHapticOptions) => void;
+
+export interface ClientHapticsApi {
+    enabled: boolean;
+    triggerHaptic: TriggerHaptic;
+}
+
+export interface UseClientHapticsParams {
+    enabled?: boolean;
+}
diff --git a/packages/shared/src/haptics.ts b/packages/haptics/src/utils.ts
similarity index 55%
rename from packages/shared/src/haptics.ts
rename to packages/haptics/src/utils.ts
index ab2794ee09..2980466fac 100644
--- a/packages/shared/src/haptics.ts
+++ b/packages/haptics/src/utils.ts
@@ -1,22 +1,28 @@
-import { WebHaptics } from 'web-haptics';
+import { defaultPatterns, type HapticPattern, WebHaptics } from 'web-haptics';
 
-import { isClient } from './isClient';
-import { isIOS } from './os';
+import { isIOS } from '@alfalab/core-components-shared';
 
-export type HapticPreset = 'selection';
+import {
+    type HapticPreset,
+    type TriggerHapticOptions,
+} from './types';
 
-export type TriggerHapticOptions = {
-    enabled?: boolean;
+// todo: add more haptic patterns
+const hapticPatterns: Record<HapticPreset, HapticPattern> = {
+    ...defaultPatterns,
+    selection: [{ duration: 500, intensity: 1 }],
 };
 
-const hapticPatterns: Record<HapticPreset, Parameters<WebHaptics['trigger']>[0]> = {
-    selection: [{ duration: 50, intensity: 1 }],
-    // TODO: add more custom haptic patterns... (or use defaultPatterns)
+// todo: add more native haptic patterns
+const nativeHapticPatterns: Record<HapticPreset, number> = {
+    selection: 50,
 };
 
 let haptics: WebHaptics | null = null;
 let iosHapticInput: HTMLInputElement | null = null;
 
+const isClient = () => typeof window !== 'undefined';
+
 const isTouchEnvironment = () => {
     if (!isClient()) return false;
 
@@ -46,13 +52,15 @@ const getIOSHapticInput = () => {
     input.setAttribute('switch', '');
     input.setAttribute('aria-hidden', 'true');
     input.tabIndex = -1;
-    input.style.position = 'fixed';
-    input.style.opacity = '0';
-    input.style.pointerEvents = 'none';
-    input.style.width = '1px';
-    input.style.height = '1px';
-    input.style.left = '-9999px';
-    input.style.top = '0';
+    input.style.cssText = [
+        'position:fixed',
+        'top:0',
+        'left:0',
+        'width:1px',
+        'height:1px',
+        'opacity:0',
+        'pointer-events:none',
+    ].join(';');
 
     document.body.appendChild(input);
     iosHapticInput = input;
@@ -60,25 +68,26 @@ const getIOSHapticInput = () => {
     return iosHapticInput;
 };
 
-const triggerIOSHapticFallback = () => {
-    const input = getIOSHapticInput();
-
-    input.checked = !input.checked;
-    input.click();
-};
-
 export const triggerHaptic = (preset: HapticPreset, options: TriggerHapticOptions = {}) => {
     if (options.enabled === false) return;
     if (!isHapticsSupported()) return;
 
+    if (typeof window.navigator.vibrate === 'function') {
+        window.navigator.vibrate(nativeHapticPatterns[preset]);
+
+        return;
+    }
+
     if (isIOS()) {
-        triggerIOSHapticFallback();
+        const input = getIOSHapticInput();
+
+        input.checked = !input.checked;
+        input.click();
 
         return;
     }
 
     getHaptics()
         .trigger(hapticPatterns[preset])
-        // no-op on error
         .catch(() => {});
 };
diff --git a/packages/haptics/tsconfig.build.json b/packages/haptics/tsconfig.build.json
new file mode 100644
index 0000000000..5f178a7eef
--- /dev/null
+++ b/packages/haptics/tsconfig.build.json
@@ -0,0 +1,22 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "extends": "@alfalab/core-components-env/tsconfig.base.json",
+    "include": ["src", "src/**/*.json"],
+    "exclude": ["**/*.stories.*", "**/*.test.*"],
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "ts-dist",
+        "paths": {
+            "@alfalab/core-components-config": ["../config/src"],
+            "@alfalab/core-components-config/*": ["../config/src/*"],
+            "@alfalab/core-components-shared": ["../shared/src"],
+            "@alfalab/core-components-shared/*": ["../shared/src/*"],
+            "@alfalab/core-components-haptics": ["./src"],
+            "@alfalab/core-components-haptics/*": ["./src/*"]
+        }
+    },
+    "references": [
+        { "path": "../config/tsconfig.build.json" },
+        { "path": "../shared/tsconfig.build.json" }
+    ]
+}
diff --git a/packages/haptics/tsconfig.json b/packages/haptics/tsconfig.json
new file mode 100644
index 0000000000..42380665e0
--- /dev/null
+++ b/packages/haptics/tsconfig.json
@@ -0,0 +1,27 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "extends": "@alfalab/core-components-env/tsconfig.base.json",
+    "include": ["src", "src/**/*.json"],
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "no-dist",
+        "paths": {
+            "@alfalab/core-components-haptics": ["./src"],
+            "@alfalab/core-components-haptics/*": ["./src/*"],
+            "@alfalab/core-components-config": ["../config/src"],
+            "@alfalab/core-components-config/*": ["../config/src/*"],
+            "@alfalab/core-components-shared": ["../shared/src"],
+            "@alfalab/core-components-shared/*": ["../shared/src/*"],
+            "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
+            "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
+            "@alfalab/core-components-test-utils": ["../test-utils/src"],
+            "@alfalab/core-components-test-utils/*": ["../test-utils/src/*"]
+        }
+    },
+    "references": [
+        { "path": "../config/tsconfig.build.json" },
+        { "path": "../shared/tsconfig.build.json" },
+        { "path": "../screenshot-utils/tsconfig.build.json" },
+        { "path": "../test-utils/tsconfig.build.json" }
+    ]
+}
diff --git a/packages/root/package.json b/packages/root/package.json
index d95ce30f1a..d43a71931e 100644
--- a/packages/root/package.json
+++ b/packages/root/package.json
@@ -54,6 +54,7 @@
         "@alfalab/core-components-generic-wrapper": "^3.0.2",
         "@alfalab/core-components-global-store": "^4.0.1",
         "@alfalab/core-components-grid": "^5.0.2",
+        "@alfalab/core-components-haptics": "^0.0.1",
         "@alfalab/core-components-hatching-progress-bar": "^4.0.1",
         "@alfalab/core-components-icon-button": "^8.0.4",
         "@alfalab/core-components-icon-view": "^5.0.3",
diff --git a/packages/root/tsconfig.build.json b/packages/root/tsconfig.build.json
index 73697069bc..a53c5e11aa 100644
--- a/packages/root/tsconfig.build.json
+++ b/packages/root/tsconfig.build.json
@@ -99,6 +99,8 @@
             "@alfalab/core-components-global-store/*": ["../global-store/src/*"],
             "@alfalab/core-components-grid": ["../grid/src"],
             "@alfalab/core-components-grid/*": ["../grid/src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-hatching-progress-bar": ["../hatching-progress-bar/src"],
             "@alfalab/core-components-hatching-progress-bar/*": ["../hatching-progress-bar/src/*"],
             "@alfalab/core-components-icon-button": ["../icon-button/src"],
@@ -309,6 +311,7 @@
         { "path": "../generic-wrapper/tsconfig.build.json" },
         { "path": "../global-store/tsconfig.build.json" },
         { "path": "../grid/tsconfig.build.json" },
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../hatching-progress-bar/tsconfig.build.json" },
         { "path": "../icon-button/tsconfig.build.json" },
         { "path": "../icon-view/tsconfig.build.json" },
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 383e8f453d..366e03edd9 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -15,8 +15,7 @@
         "@maskito/core": "^1.7.0",
         "classnames": "^2.5.1",
         "detect-browser": "^5.3.0",
-        "tslib": "^2.4.0",
-        "web-haptics": "^0.0.6"
+        "tslib": "^2.4.0"
     },
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0",
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index fe57e26828..9a6fc88e3c 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -16,4 +16,3 @@ export * from './get-color-var';
 export * from './mask';
 export * from './human-file-size';
 export * from './icon-20-adapter';
-export * from './haptics';
diff --git a/tsconfig.react-docgen-typescript.json b/tsconfig.react-docgen-typescript.json
index 6015a0bf72..435dd18e6f 100644
--- a/tsconfig.react-docgen-typescript.json
+++ b/tsconfig.react-docgen-typescript.json
@@ -108,6 +108,8 @@
             "@alfalab/core-components-global-store/*": ["./packages/global-store/src/*"],
             "@alfalab/core-components-grid": ["./packages/grid/src"],
             "@alfalab/core-components-grid/*": ["./packages/grid/src/*"],
+            "@alfalab/core-components-haptics": ["./packages/haptics/src"],
+            "@alfalab/core-components-haptics/*": ["./packages/haptics/src/*"],
             "@alfalab/core-components-hatching-progress-bar": [
                 "./packages/hatching-progress-bar/src"
             ],
diff --git a/tsconfig.test.json b/tsconfig.test.json
index 2526e6b68e..2767c8967d 100644
--- a/tsconfig.test.json
+++ b/tsconfig.test.json
@@ -107,6 +107,8 @@
             "@alfalab/core-components-global-store/*": ["./packages/global-store/src/*"],
             "@alfalab/core-components-grid": ["./packages/grid/src"],
             "@alfalab/core-components-grid/*": ["./packages/grid/src/*"],
+            "@alfalab/core-components-haptics": ["./packages/haptics/src"],
+            "@alfalab/core-components-haptics/*": ["./packages/haptics/src/*"],
             "@alfalab/core-components-hatching-progress-bar": [
                 "./packages/hatching-progress-bar/src"
             ],
diff --git a/yarn.lock b/yarn.lock
index 9fa8b9e5fb..62a727b316 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -391,6 +391,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-checkbox@workspace:packages/checkbox"
   dependencies:
+    "@alfalab/core-components-haptics": "npm:^0.0.1"
     "@alfalab/core-components-shared": "npm:^2.1.1"
     "@alfalab/hooks": "npm:^1.13.1"
     classnames: "npm:^2.5.1"
@@ -487,6 +488,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-config@workspace:packages/config"
   dependencies:
+    "@alfalab/core-components-haptics": "npm:^0.0.1"
     tslib: "npm:^2.4.0"
   peerDependencies:
     react: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
@@ -799,6 +801,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@alfalab/core-components-haptics@npm:^0.0.1, @alfalab/core-components-haptics@workspace:packages/haptics":
+  version: 0.0.0-use.local
+  resolution: "@alfalab/core-components-haptics@workspace:packages/haptics"
+  dependencies:
+    tslib: "npm:^2.4.0"
+    web-haptics: "npm:^0.0.6"
+  peerDependencies:
+    react: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
+  languageName: unknown
+  linkType: soft
+
 "@alfalab/core-components-hatching-progress-bar@npm:^4.0.1, @alfalab/core-components-hatching-progress-bar@workspace:packages/hatching-progress-bar":
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-hatching-progress-bar@workspace:packages/hatching-progress-bar"
@@ -1674,7 +1688,6 @@ __metadata:
     classnames: "npm:^2.5.1"
     detect-browser: "npm:^5.3.0"
     tslib: "npm:^2.4.0"
-    web-haptics: "npm:^0.0.6"
   peerDependencies:
     react: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
     react-dom: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
@@ -2228,6 +2241,7 @@ __metadata:
     "@alfalab/core-components-generic-wrapper": "npm:^3.0.2"
     "@alfalab/core-components-global-store": "npm:^4.0.1"
     "@alfalab/core-components-grid": "npm:^5.0.2"
+    "@alfalab/core-components-haptics": "npm:^0.0.1"
     "@alfalab/core-components-hatching-progress-bar": "npm:^4.0.1"
     "@alfalab/core-components-icon-button": "npm:^8.0.4"
     "@alfalab/core-components-icon-view": "npm:^5.0.3"

From 0478bc373c3d0c9e1306b5061f8fe64c6e8b0bbd Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Tue, 19 May 2026 11:55:32 +0300
Subject: [PATCH 05/12] chore: up yarn.lock

---
 yarn.lock | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 62a727b316..d0a363d0b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -484,11 +484,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@alfalab/core-components-config@workspace:packages/config":
+"@alfalab/core-components-config@npm:^1.1.0, @alfalab/core-components-config@workspace:packages/config":
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-config@workspace:packages/config"
   dependencies:
-    "@alfalab/core-components-haptics": "npm:^0.0.1"
     tslib: "npm:^2.4.0"
   peerDependencies:
     react: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
@@ -805,6 +804,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-haptics@workspace:packages/haptics"
   dependencies:
+    "@alfalab/core-components-config": "npm:^1.1.0"
+    "@alfalab/core-components-shared": "npm:^2.1.1"
     tslib: "npm:^2.4.0"
     web-haptics: "npm:^0.0.6"
   peerDependencies:

From a8201278f25ae15c490058143ffffd1d49645401 Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Tue, 19 May 2026 12:33:21 +0300
Subject: [PATCH 06/12] chore: fix tsconfig

---
 packages/haptics/tsconfig.build.json | 23 +----------------------
 packages/haptics/tsconfig.json       | 28 +---------------------------
 2 files changed, 2 insertions(+), 49 deletions(-)

diff --git a/packages/haptics/tsconfig.build.json b/packages/haptics/tsconfig.build.json
index 5f178a7eef..26238075e9 100644
--- a/packages/haptics/tsconfig.build.json
+++ b/packages/haptics/tsconfig.build.json
@@ -1,22 +1 @@
-{
-    "$schema": "https://json.schemastore.org/tsconfig",
-    "extends": "@alfalab/core-components-env/tsconfig.base.json",
-    "include": ["src", "src/**/*.json"],
-    "exclude": ["**/*.stories.*", "**/*.test.*"],
-    "compilerOptions": {
-        "rootDir": "src",
-        "outDir": "ts-dist",
-        "paths": {
-            "@alfalab/core-components-config": ["../config/src"],
-            "@alfalab/core-components-config/*": ["../config/src/*"],
-            "@alfalab/core-components-shared": ["../shared/src"],
-            "@alfalab/core-components-shared/*": ["../shared/src/*"],
-            "@alfalab/core-components-haptics": ["./src"],
-            "@alfalab/core-components-haptics/*": ["./src/*"]
-        }
-    },
-    "references": [
-        { "path": "../config/tsconfig.build.json" },
-        { "path": "../shared/tsconfig.build.json" }
-    ]
-}
+{"$schema":"https://json.schemastore.org/tsconfig","extends":"@alfalab/core-components-env/tsconfig.base.json","include":["src","src/**/*.json"],"exclude":["**/*.stories.*","**/*.test.*"],"compilerOptions":{"rootDir":"src","outDir":"ts-dist","paths":{"@alfalab/core-components-config":["../config/src"],"@alfalab/core-components-config/*":["../config/src/*"],"@alfalab/core-components-haptics":["./src"],"@alfalab/core-components-haptics/*":["./src/*"],"@alfalab/core-components-shared":["../shared/src"],"@alfalab/core-components-shared/*":["../shared/src/*"]}},"references":[{"path":"../config/tsconfig.build.json"},{"path":"../shared/tsconfig.build.json"}]}
diff --git a/packages/haptics/tsconfig.json b/packages/haptics/tsconfig.json
index 42380665e0..3486f53214 100644
--- a/packages/haptics/tsconfig.json
+++ b/packages/haptics/tsconfig.json
@@ -1,27 +1 @@
-{
-    "$schema": "https://json.schemastore.org/tsconfig",
-    "extends": "@alfalab/core-components-env/tsconfig.base.json",
-    "include": ["src", "src/**/*.json"],
-    "compilerOptions": {
-        "rootDir": "src",
-        "outDir": "no-dist",
-        "paths": {
-            "@alfalab/core-components-haptics": ["./src"],
-            "@alfalab/core-components-haptics/*": ["./src/*"],
-            "@alfalab/core-components-config": ["../config/src"],
-            "@alfalab/core-components-config/*": ["../config/src/*"],
-            "@alfalab/core-components-shared": ["../shared/src"],
-            "@alfalab/core-components-shared/*": ["../shared/src/*"],
-            "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
-            "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
-            "@alfalab/core-components-test-utils": ["../test-utils/src"],
-            "@alfalab/core-components-test-utils/*": ["../test-utils/src/*"]
-        }
-    },
-    "references": [
-        { "path": "../config/tsconfig.build.json" },
-        { "path": "../shared/tsconfig.build.json" },
-        { "path": "../screenshot-utils/tsconfig.build.json" },
-        { "path": "../test-utils/tsconfig.build.json" }
-    ]
-}
+{"$schema":"https://json.schemastore.org/tsconfig","extends":"@alfalab/core-components-env/tsconfig.base.json","include":["src","src/**/*.json"],"compilerOptions":{"rootDir":"src","outDir":"no-dist","paths":{"@alfalab/core-components-config":["../config/src"],"@alfalab/core-components-config/*":["../config/src/*"],"@alfalab/core-components-haptics":["./src"],"@alfalab/core-components-haptics/*":["./src/*"],"@alfalab/core-components-screenshot-utils":["../screenshot-utils/src"],"@alfalab/core-components-screenshot-utils/*":["../screenshot-utils/src/*"],"@alfalab/core-components-shared":["../shared/src"],"@alfalab/core-components-shared/*":["../shared/src/*"],"@alfalab/core-components-test-utils":["../test-utils/src"],"@alfalab/core-components-test-utils/*":["../test-utils/src/*"]}},"references":[{"path":"../config/tsconfig.build.json"},{"path":"../screenshot-utils/tsconfig.build.json"},{"path":"../shared/tsconfig.build.json"},{"path":"../test-utils/tsconfig.build.json"}]}

From 3951702bedbfc1af361a1cf6b2cad24a16ed531a Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Fri, 29 May 2026 12:07:13 +0300
Subject: [PATCH 07/12] chore: add haptics comp

---
 packages/checkbox/src/Component.tsx           |  2 +-
 packages/haptics/src/component.tsx            | 62 +++++++++++--------
 .../src/components/haptic-a/Component.tsx     | 38 ++++++++++++
 .../haptics/src/components/haptic-a/index.ts  |  2 +
 .../components/haptic-button/Component.tsx    | 39 ++++++++++++
 .../src/components/haptic-button/index.ts     |  2 +
 .../src/components/haptic-input/Component.tsx | 37 +++++++++++
 .../src/components/haptic-input/index.ts      |  2 +
 .../haptics/src/hooks/use-client-haptics.ts   |  3 +-
 packages/haptics/src/types.ts                 | 41 +++++++-----
 10 files changed, 183 insertions(+), 45 deletions(-)
 create mode 100644 packages/haptics/src/components/haptic-a/Component.tsx
 create mode 100644 packages/haptics/src/components/haptic-a/index.ts
 create mode 100644 packages/haptics/src/components/haptic-button/Component.tsx
 create mode 100644 packages/haptics/src/components/haptic-button/index.ts
 create mode 100644 packages/haptics/src/components/haptic-input/Component.tsx
 create mode 100644 packages/haptics/src/components/haptic-input/index.ts

diff --git a/packages/checkbox/src/Component.tsx b/packages/checkbox/src/Component.tsx
index 9433c6d05b..86f867e620 100644
--- a/packages/checkbox/src/Component.tsx
+++ b/packages/checkbox/src/Component.tsx
@@ -240,7 +240,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                 {!hiddenInput && (
                     <Button
                         Component='input'
-                        haptic='checkbox'
+                        data-haptic-pattern="selection"
                         type='checkbox'
                         onChange={handleChange}
                         name={name}
diff --git a/packages/haptics/src/component.tsx b/packages/haptics/src/component.tsx
index 2a81e51029..3ea18e9527 100644
--- a/packages/haptics/src/component.tsx
+++ b/packages/haptics/src/component.tsx
@@ -1,35 +1,45 @@
 import React, {
+    type ComponentProps,
     forwardRef,
-    type MouseEvent,
+    type Ref,
 } from 'react';
 
-import { useCoreConfig } from '@alfalab/core-components-config';
-
-import { type HapticPreset, type HapticProps, type HapticType } from './types';
-import { triggerHaptic } from './utils';
-
-// todo: add more haptic presets
-const hapticPresets: Record<HapticType, HapticPreset> = {
-    checkbox: 'selection',
-};
+import { HapticA } from './components/haptic-a';
+import { HapticButton } from './components/haptic-button';
+import { HapticInput } from './components/haptic-input';
+import { type HapticPreset, type HapticProps } from './types';
 
 export const Haptic = forwardRef<HTMLElement, HapticProps>(
-    ({ Component = 'button', haptic, onClick, ...restProps }, ref) => {
-        const { haptics } = useCoreConfig();
-
-        const handleClick = (event: MouseEvent<HTMLElement>) => {
-            onClick?.(event);
-
-            // if the event is default prevented, don't trigger the haptic
-            if (event.defaultPrevented) return;
-
-            triggerHaptic(hapticPresets[haptic as HapticType], {
-                enabled: true || haptics?.enabled,
-            });
-        };
-
-        // data-haptic='false' research
-        return <Component {...restProps} data-haptic='false' ref={ref} onClick={handleClick} />;
+    ({ Component = 'button', 'data-haptic-pattern': hapticPattern = 'selection', ...restProps }, ref) => {
+        const resolvedHapticPattern = hapticPattern as HapticPreset; // match with web-haptics
+
+        if (Component === 'a') {
+            return (
+                <HapticA
+                    {...(restProps as ComponentProps<typeof HapticA>)}
+                    data-haptic-pattern={resolvedHapticPattern}
+                    ref={ref as unknown as Ref<HTMLAnchorElement>}
+                />
+            );
+        }
+
+        if (Component === 'input') {
+            return (
+                <HapticInput
+                    {...(restProps as ComponentProps<typeof HapticInput>)}
+                    data-haptic-pattern={resolvedHapticPattern}
+                    ref={ref as unknown as Ref<HTMLInputElement>}
+                />
+            );
+        }
+
+        return (
+            <HapticButton
+                {...(restProps as ComponentProps<typeof HapticButton>)}
+                data-haptic-pattern={resolvedHapticPattern}
+                ref={ref as unknown as Ref<HTMLButtonElement>}
+            />
+        );
     });
 
 Haptic.displayName = 'Haptic';
diff --git a/packages/haptics/src/components/haptic-a/Component.tsx b/packages/haptics/src/components/haptic-a/Component.tsx
new file mode 100644
index 0000000000..a2dade1623
--- /dev/null
+++ b/packages/haptics/src/components/haptic-a/Component.tsx
@@ -0,0 +1,38 @@
+import React, { type AnchorHTMLAttributes, forwardRef, type MouseEvent } from 'react';
+import { type HapticPreset } from 'web-haptics';
+
+import { useCoreConfig } from '@alfalab/core-components-config';
+
+// import { type HapticPreset } from '../../types';
+import { triggerHaptic } from '../../utils';
+
+export type HapticAProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    'data-haptic-pattern'?: HapticPreset;
+};
+
+export const HapticA = forwardRef<HTMLAnchorElement, HapticAProps>(
+    ({ 'data-haptic-pattern': hapticPattern = 'selection', onClick, ...restProps }, ref) => {
+        const { haptics } = useCoreConfig();
+
+        const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+            onClick?.(event);
+
+            if (event.defaultPrevented) return;
+
+            triggerHaptic(hapticPattern as HapticPreset, { enabled: haptics?.enabled });
+        };
+
+        return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-has-content, jsx-a11y/click-events-have-key-events
+            <a
+                {...restProps}
+                data-haptic='false'
+                data-haptic-pattern={hapticPattern}
+                ref={ref}
+                onClick={handleClick}
+            />
+        );
+    },
+);
+
+HapticA.displayName = 'HapticA';
diff --git a/packages/haptics/src/components/haptic-a/index.ts b/packages/haptics/src/components/haptic-a/index.ts
new file mode 100644
index 0000000000..cade252b3f
--- /dev/null
+++ b/packages/haptics/src/components/haptic-a/index.ts
@@ -0,0 +1,2 @@
+export { HapticA } from './Component';
+export type { HapticAProps } from './Component';
diff --git a/packages/haptics/src/components/haptic-button/Component.tsx b/packages/haptics/src/components/haptic-button/Component.tsx
new file mode 100644
index 0000000000..4aec60cc81
--- /dev/null
+++ b/packages/haptics/src/components/haptic-button/Component.tsx
@@ -0,0 +1,39 @@
+/* eslint-disable react/button-has-type */
+import React, { type ButtonHTMLAttributes, forwardRef, type MouseEvent } from 'react';
+// import { type HapticPreset } from '../../types';
+import { type HapticPreset } from 'web-haptics';
+
+import { useCoreConfig } from '@alfalab/core-components-config';
+
+import { triggerHaptic } from '../../utils';
+
+export type HapticButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    'data-haptic-pattern'?: HapticPreset;
+};
+
+export const HapticButton = forwardRef<HTMLButtonElement, HapticButtonProps>(
+    ({ 'data-haptic-pattern': hapticPattern = 'selection', onClick, ...restProps }, ref) => {
+        const { haptics } = useCoreConfig();
+
+        const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+            onClick?.(event);
+
+            if (event.defaultPrevented) return;
+
+            triggerHaptic(hapticPattern as HapticPreset, { enabled: haptics?.enabled });
+        };
+
+        return (
+            // eslint-disable-next-line react/button-has-type
+            <button
+                {...restProps}
+                data-haptic='false'
+                data-haptic-pattern={hapticPattern}
+                ref={ref}
+                onClick={handleClick}
+            />
+        );
+    },
+);
+
+HapticButton.displayName = 'HapticButton';
diff --git a/packages/haptics/src/components/haptic-button/index.ts b/packages/haptics/src/components/haptic-button/index.ts
new file mode 100644
index 0000000000..340fb6ad70
--- /dev/null
+++ b/packages/haptics/src/components/haptic-button/index.ts
@@ -0,0 +1,2 @@
+export { HapticButton } from './Component';
+export type { HapticButtonProps } from './Component';
diff --git a/packages/haptics/src/components/haptic-input/Component.tsx b/packages/haptics/src/components/haptic-input/Component.tsx
new file mode 100644
index 0000000000..32a3e6e51d
--- /dev/null
+++ b/packages/haptics/src/components/haptic-input/Component.tsx
@@ -0,0 +1,37 @@
+import React, { forwardRef, type InputHTMLAttributes, type MouseEvent } from 'react';
+import { type HapticPreset } from 'web-haptics';
+
+import { useCoreConfig } from '@alfalab/core-components-config';
+
+// import { type HapticPreset } from '../../types';
+import { triggerHaptic } from '../../utils';
+
+export type HapticInputProps = InputHTMLAttributes<HTMLInputElement> & {
+    'data-haptic-pattern'?: HapticPreset;
+};
+
+export const HapticInput = forwardRef<HTMLInputElement, HapticInputProps>(
+    ({ 'data-haptic-pattern': hapticPattern = 'selection', onClick, ...restProps }, ref) => {
+        const { haptics } = useCoreConfig();
+
+        const handleClick = (event: MouseEvent<HTMLInputElement>) => {
+            onClick?.(event);
+
+            if (event.defaultPrevented) return;
+
+            triggerHaptic(hapticPattern as HapticPreset, { enabled: haptics?.enabled });
+        };
+
+        return (
+            <input
+                {...restProps}
+                data-haptic='false'
+                data-haptic-pattern={hapticPattern}
+                ref={ref}
+                onClick={handleClick}
+            />
+        );
+    },
+);
+
+HapticInput.displayName = 'HapticInput';
diff --git a/packages/haptics/src/components/haptic-input/index.ts b/packages/haptics/src/components/haptic-input/index.ts
new file mode 100644
index 0000000000..89d358dadd
--- /dev/null
+++ b/packages/haptics/src/components/haptic-input/index.ts
@@ -0,0 +1,2 @@
+export { HapticInput } from './Component';
+export type { HapticInputProps } from './Component';
diff --git a/packages/haptics/src/hooks/use-client-haptics.ts b/packages/haptics/src/hooks/use-client-haptics.ts
index ee5c17e658..9b91252574 100644
--- a/packages/haptics/src/hooks/use-client-haptics.ts
+++ b/packages/haptics/src/hooks/use-client-haptics.ts
@@ -1,8 +1,9 @@
 import { useCallback } from 'react';
+import { type HapticPreset } from 'web-haptics';
 
 import {
     type ClientHapticsApi,
-    type HapticPreset,
+    // type HapticPreset,
     type TriggerHapticOptions,
     type UseClientHapticsParams,
 } from '../types';
diff --git a/packages/haptics/src/types.ts b/packages/haptics/src/types.ts
index 8fea1a4769..3bc7561e2d 100644
--- a/packages/haptics/src/types.ts
+++ b/packages/haptics/src/types.ts
@@ -1,38 +1,45 @@
 import {
     type AnchorHTMLAttributes,
     type ButtonHTMLAttributes,
-    type ElementType,
-    type HTMLAttributes,
     type InputHTMLAttributes,
 } from 'react';
-
-// todo: add more haptic types
-export type HapticType = 'checkbox';
+import { type HapticPreset as WebHapticPreset } from 'web-haptics';
 
 // todo: add more haptic presets
-export type HapticPreset = 'selection';
+export type HapticPreset = WebHapticPreset;
+export type HapticComponent = 'button' | 'a' | 'input';
 
 export interface HapticBaseProps {
     /**
-     * Компонент или тег, на который навешивается haptic-поведение
+     * Интерактивный элемент, на который навешивается haptic-поведение
+     * @default button
      */
-    Component?: ElementType;
+    Component?: HapticComponent;
 
     /**
-     * Тип элемента, для которого нужно применить haptic-поведение
+     * Паттерн хаптика, который будет запущен по клику
+     * @default selection
      */
-    haptic: HapticType;
+    'data-haptic-pattern'?: HapticPreset;
 }
 
-type NativeInteractiveProps = Partial<
-    | InputHTMLAttributes<HTMLInputElement>
-    | ButtonHTMLAttributes<HTMLButtonElement>
-    | AnchorHTMLAttributes<HTMLAnchorElement>
->;
+type HapticButtonProps = Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    'type' | 'data-haptic-pattern'
+> & {
+    Component?: 'button';
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'] | string;
+} & HapticBaseProps;
+
+type HapticAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'data-haptic-pattern'> & {
+    Component: 'a';
+} & HapticBaseProps;
 
-// REFACTOR TYPES FOR CLIENT HAPTICS
+type HapticInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'data-haptic-pattern'> & {
+    Component: 'input';
+} & HapticBaseProps;
 
-export type HapticProps = HapticBaseProps & HTMLAttributes<HTMLElement> & NativeInteractiveProps;
+export type HapticProps = HapticButtonProps | HapticAnchorProps | HapticInputProps;
 
 export interface TriggerHapticOptions {
     enabled?: boolean;

From c2931cde5d9be39a5714e7a8f1fe2d42b1ba1c75 Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Thu, 4 Jun 2026 12:07:19 +0300
Subject: [PATCH 08/12] =?UTF-8?q?feat(haptics):=20=D1=80=D0=B5=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=B0=20Haptics=20=D0=B8=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=B4=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=B2=20=D0=BF=D0=B0=D0=BA=D0=B5=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/button/package.json                  |   1 +
 .../src/components/base-button/Component.tsx  |  25 +-
 packages/button/src/typings.ts                |   8 +
 packages/button/tsconfig.build.json           |   3 +
 packages/button/tsconfig.json                 |   3 +
 .../src/__snapshots__/Component.test.tsx.snap |  14 -
 packages/checkbox/src/Component.tsx           |  13 +-
 .../src/__snapshots__/Component.test.tsx.snap |   6 -
 packages/haptics/src/component.tsx            |  91 ++++--
 .../src/components/haptic-a/Component.tsx     |  25 +-
 .../haptics/src/components/haptic-a/index.ts  |   1 -
 .../components/haptic-button/Component.tsx    |  30 +-
 .../src/components/haptic-button/index.ts     |   1 -
 .../src/components/haptic-input/Component.tsx |  27 +-
 .../src/components/haptic-input/index.ts      |   1 -
 packages/haptics/src/components/index.ts      |   4 +
 packages/haptics/src/docs/Component.docs.mdx  |  17 +
 .../haptics/src/docs/Component.stories.tsx    |  46 +++
 packages/haptics/src/docs/description.mdx     | 292 ++++++++++++++++++
 packages/haptics/src/docs/development.mdx     |  29 ++
 .../haptics/src/hooks/use-client-haptics.ts   |  33 --
 packages/haptics/src/hooks/use-haptic.ts      | 100 ++++++
 packages/haptics/src/index.ts                 |  12 +-
 packages/haptics/src/types.ts                 |  93 +++---
 packages/haptics/src/utils.ts                 | 165 +++++-----
 .../src/types/icon-button-props.ts            |   5 +-
 packages/number-input/package.json            |   1 +
 .../src/components/number-input/Component.tsx |   9 +
 .../src/components/steppers/Component.tsx     |   5 +
 packages/number-input/tsconfig.build.json     |   3 +
 packages/number-input/tsconfig.json           |   3 +
 packages/radio/package.json                   |   1 +
 packages/radio/src/Component.tsx              |  12 +-
 packages/radio/tsconfig.build.json            |   7 +-
 packages/radio/tsconfig.json                  |   3 +
 packages/switch/package.json                  |   1 +
 packages/switch/src/Component.tsx             |  12 +-
 packages/switch/tsconfig.build.json           |   3 +
 packages/switch/tsconfig.json                 |   3 +
 yarn.lock                                     |   4 +
 40 files changed, 833 insertions(+), 279 deletions(-)
 create mode 100644 packages/haptics/src/components/index.ts
 create mode 100644 packages/haptics/src/docs/Component.docs.mdx
 create mode 100644 packages/haptics/src/docs/Component.stories.tsx
 create mode 100644 packages/haptics/src/docs/description.mdx
 create mode 100644 packages/haptics/src/docs/development.mdx
 delete mode 100644 packages/haptics/src/hooks/use-client-haptics.ts
 create mode 100644 packages/haptics/src/hooks/use-haptic.ts

diff --git a/packages/button/package.json b/packages/button/package.json
index 04004a9284..70d70363b4 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -13,6 +13,7 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
+        "@alfalab/core-components-haptics": "^0.0.1",
         "@alfalab/core-components-mq": "^6.0.4",
         "@alfalab/core-components-shared": "^2.2.0",
         "@alfalab/core-components-spinner": "^6.0.4",
diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index 7aaffb248f..5fae198b5c 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -10,6 +10,7 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
+import { Haptic } from '@alfalab/core-components-haptics';
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { Spinner } from '@alfalab/core-components-spinner';
 import { useFocus } from '@alfalab/hooks';
@@ -50,6 +51,7 @@ export const BaseButton = forwardRef<
             nowrap = false,
             colors = 'default',
             Component = href ? 'a' : 'button',
+            'data-haptic-preset': dataHapticPreset,
             onClick,
             styles = {},
             colorStylesMap = { default: {}, inverted: {} },
@@ -71,6 +73,9 @@ export const BaseButton = forwardRef<
 
         const iconOnly = !children;
 
+        const isNativeButton = Component === 'button';
+        const isNativeAnchor = Component === 'a';
+
         const sizeStyle = `size-${size}`;
 
         const componentProps = {
@@ -183,12 +188,16 @@ export const BaseButton = forwardRef<
 
         if (href) {
             const { target } = restProps as AnchorHTMLAttributes<HTMLAnchorElement>;
+            const LinkComponent = isNativeAnchor ? Haptic : Component;
 
             // Для совместимости с react-router-dom, меняем href на to
-            const hrefProps = { [typeof Component === 'string' ? 'href' : 'to']: href };
+            const hrefProps = {
+                [Component && typeof Component !== 'string' ? 'to' : 'href']: href,
+            };
 
             return (
-                <Component
+                <LinkComponent
+                    {...(isNativeAnchor && { Component: 'a', 'data-haptic-preset': dataHapticPreset })}
                     rel={target === '_blank' ? 'noreferrer noopener' : undefined}
                     {...componentProps}
                     {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
@@ -198,12 +207,18 @@ export const BaseButton = forwardRef<
                     ref={mergeRefs([buttonRef, ref])}
                 >
                     {buttonChildren}
-                </Component>
+                </LinkComponent>
             );
         }
 
+        const ButtonComponent = isNativeButton ? Haptic : Component;
+
         return (
-            <Component
+            <ButtonComponent
+                {...(isNativeButton && {
+                    Component: 'button',
+                    'data-haptic-preset': dataHapticPreset,
+                })}
                 {...componentProps}
                 {...restButtonProps}
                 onClick={handleClick}
@@ -212,7 +227,7 @@ export const BaseButton = forwardRef<
                 ref={mergeRefs([buttonRef, ref])}
             >
                 {buttonChildren}
-            </Component>
+            </ButtonComponent>
         );
     },
 );
diff --git a/packages/button/src/typings.ts b/packages/button/src/typings.ts
index bc55f9567a..9bea5114d5 100644
--- a/packages/button/src/typings.ts
+++ b/packages/button/src/typings.ts
@@ -5,6 +5,8 @@ import {
     type ReactNode,
 } from 'react';
 
+import { type HapticPresetValue } from '@alfalab/core-components-haptics';
+
 export type StyleColors = {
     default: {
         [key: string]: string;
@@ -113,6 +115,12 @@ type ComponentProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+
+    /**
+     * Haptic-пресет или кастомный vibration-конфиг для клика по кнопке.
+     * @default selection
+     */
+    'data-haptic-preset'?: HapticPresetValue;
 };
 
 export type PrivateButtonProps = {
diff --git a/packages/button/tsconfig.build.json b/packages/button/tsconfig.build.json
index 0d03a57426..16cd041e1d 100644
--- a/packages/button/tsconfig.build.json
+++ b/packages/button/tsconfig.build.json
@@ -9,6 +9,8 @@
         "paths": {
             "@alfalab/core-components-button": ["./src"],
             "@alfalab/core-components-button/*": ["./src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-mq": ["../mq/src"],
             "@alfalab/core-components-mq/*": ["../mq/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
@@ -18,6 +20,7 @@
         }
     },
     "references": [
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../mq/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../spinner/tsconfig.build.json" }
diff --git a/packages/button/tsconfig.json b/packages/button/tsconfig.json
index c5b8c87ada..5ea1c204cf 100644
--- a/packages/button/tsconfig.json
+++ b/packages/button/tsconfig.json
@@ -8,6 +8,8 @@
         "paths": {
             "@alfalab/core-components-button": ["./src"],
             "@alfalab/core-components-button/*": ["./src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-mq": ["../mq/src"],
             "@alfalab/core-components-mq/*": ["../mq/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
@@ -21,6 +23,7 @@
         }
     },
     "references": [
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../mq/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
diff --git a/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap b/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap
index 81dc561ecd..a95e04d0f3 100644
--- a/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap
@@ -20,7 +20,6 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
             class="component component size-20 start my-checkbox checkbox"
           >
             <input
-              data-haptic="false"
               name="one"
               type="checkbox"
             />
@@ -41,7 +40,6 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
             class="component component size-20 start checkbox"
           >
             <input
-              data-haptic="false"
               name="two"
               type="checkbox"
             />
@@ -62,7 +60,6 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
             class="component component size-20 start checkbox"
           >
             <input
-              data-haptic="false"
               name="three"
               type="checkbox"
             />
@@ -99,7 +96,6 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
           class="component component size-20 start my-checkbox checkbox"
         >
           <input
-            data-haptic="false"
             name="one"
             type="checkbox"
           />
@@ -120,7 +116,6 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
           class="component component size-20 start checkbox"
         >
           <input
-            data-haptic="false"
             name="two"
             type="checkbox"
           />
@@ -141,7 +136,6 @@ exports[`Checkbox Display tests should display checkbox group correctly 1`] = `
           class="component component size-20 start checkbox"
         >
           <input
-            data-haptic="false"
             name="three"
             type="checkbox"
           />
@@ -235,7 +229,6 @@ exports[`Checkbox Display tests should display checkbox group with error correct
             class="component component size-20 start my-checkbox checkbox"
           >
             <input
-              data-haptic="false"
               name="one"
               type="checkbox"
             />
@@ -256,7 +249,6 @@ exports[`Checkbox Display tests should display checkbox group with error correct
             class="component component size-20 start checkbox"
           >
             <input
-              data-haptic="false"
               name="two"
               type="checkbox"
             />
@@ -277,7 +269,6 @@ exports[`Checkbox Display tests should display checkbox group with error correct
             class="component component size-20 start checkbox"
           >
             <input
-              data-haptic="false"
               name="three"
               type="checkbox"
             />
@@ -320,7 +311,6 @@ exports[`Checkbox Display tests should display checkbox group with error correct
           class="component component size-20 start my-checkbox checkbox"
         >
           <input
-            data-haptic="false"
             name="one"
             type="checkbox"
           />
@@ -341,7 +331,6 @@ exports[`Checkbox Display tests should display checkbox group with error correct
           class="component component size-20 start checkbox"
         >
           <input
-            data-haptic="false"
             name="two"
             type="checkbox"
           />
@@ -362,7 +351,6 @@ exports[`Checkbox Display tests should display checkbox group with error correct
           class="component component size-20 start checkbox"
         >
           <input
-            data-haptic="false"
             name="three"
             type="checkbox"
           />
@@ -462,7 +450,6 @@ exports[`Checkbox Display tests should display checkbox group with one child cor
             class="component component size-20 start my-checkbox checkbox"
           >
             <input
-              data-haptic="false"
               name="one"
               type="checkbox"
             />
@@ -499,7 +486,6 @@ exports[`Checkbox Display tests should display checkbox group with one child cor
           class="component component size-20 start my-checkbox checkbox"
         >
           <input
-            data-haptic="false"
             name="one"
             type="checkbox"
           />
diff --git a/packages/checkbox/src/Component.tsx b/packages/checkbox/src/Component.tsx
index 86f867e620..35bc9fb132 100644
--- a/packages/checkbox/src/Component.tsx
+++ b/packages/checkbox/src/Component.tsx
@@ -12,7 +12,7 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { Haptic as Button } from '@alfalab/core-components-haptics';
+import { Haptic, type HapticPresetValue } from '@alfalab/core-components-haptics';
 import { dom, getDataTestId } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 
@@ -155,6 +155,12 @@ export type CheckboxProps = Omit<NativeProps, 'size' | 'onChange' | 'enterKeyHin
      * @default default
      */
     colors?: 'default' | 'inverted';
+
+    /**
+     * Haptic-пресет или кастомный vibration-конфиг для переключения чекбокса.
+     * @default selection
+     */
+    'data-haptic-preset'?: HapticPresetValue;
 };
 
 export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
@@ -185,6 +191,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
             error,
             inputRef,
             colors = 'default',
+            'data-haptic-preset': dataHapticPreset,
             ...restProps
         },
         ref,
@@ -238,9 +245,9 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                 ref={mergeRefs([labelRef, ref, labelProps?.ref as Ref<HTMLLabelElement>])}
             >
                 {!hiddenInput && (
-                    <Button
+                    <Haptic
                         Component='input'
-                        data-haptic-pattern="selection"
+                        data-haptic-preset={dataHapticPreset}
                         type='checkbox'
                         onChange={handleChange}
                         name={name}
diff --git a/packages/checkbox/src/__snapshots__/Component.test.tsx.snap b/packages/checkbox/src/__snapshots__/Component.test.tsx.snap
index 0b9b8bd09a..546263e069 100644
--- a/packages/checkbox/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/checkbox/src/__snapshots__/Component.test.tsx.snap
@@ -9,7 +9,6 @@ exports[`Checkbox Display tests should display correctly 1`] = `
         class="component component size-20 start"
       >
         <input
-          data-haptic="false"
           type="checkbox"
         />
         <span
@@ -37,7 +36,6 @@ exports[`Checkbox Display tests should display correctly 1`] = `
       class="component component size-20 start"
     >
       <input
-        data-haptic="false"
         type="checkbox"
       />
       <span
@@ -122,7 +120,6 @@ exports[`Checkbox Display tests should display error state 1`] = `
         class="component component size-20 start"
       >
         <input
-          data-haptic="false"
           type="checkbox"
         />
         <span
@@ -151,7 +148,6 @@ exports[`Checkbox Display tests should display error state 1`] = `
       class="component component size-20 start"
     >
       <input
-        data-haptic="false"
         type="checkbox"
       />
       <span
@@ -237,7 +233,6 @@ exports[`Checkbox Display tests should display indeterminate correctly 1`] = `
         class="component component size-20 start indeterminate"
       >
         <input
-          data-haptic="false"
           type="checkbox"
         />
         <span
@@ -269,7 +264,6 @@ exports[`Checkbox Display tests should display indeterminate correctly 1`] = `
       class="component component size-20 start indeterminate"
     >
       <input
-        data-haptic="false"
         type="checkbox"
       />
       <span
diff --git a/packages/haptics/src/component.tsx b/packages/haptics/src/component.tsx
index 3ea18e9527..ce1ba04f2e 100644
--- a/packages/haptics/src/component.tsx
+++ b/packages/haptics/src/component.tsx
@@ -1,45 +1,76 @@
 import React, {
+    type AnchorHTMLAttributes,
+    type ButtonHTMLAttributes,
     type ComponentProps,
     forwardRef,
+    type InputHTMLAttributes,
     type Ref,
 } from 'react';
 
 import { HapticA } from './components/haptic-a';
 import { HapticButton } from './components/haptic-button';
 import { HapticInput } from './components/haptic-input';
-import { type HapticPreset, type HapticProps } from './types';
-
-export const Haptic = forwardRef<HTMLElement, HapticProps>(
-    ({ Component = 'button', 'data-haptic-pattern': hapticPattern = 'selection', ...restProps }, ref) => {
-        const resolvedHapticPattern = hapticPattern as HapticPreset; // match with web-haptics
-
-        if (Component === 'a') {
-            return (
-                <HapticA
-                    {...(restProps as ComponentProps<typeof HapticA>)}
-                    data-haptic-pattern={resolvedHapticPattern}
-                    ref={ref as unknown as Ref<HTMLAnchorElement>}
-                />
-            );
-        }
-
-        if (Component === 'input') {
-            return (
-                <HapticInput
-                    {...(restProps as ComponentProps<typeof HapticInput>)}
-                    data-haptic-pattern={resolvedHapticPattern}
-                    ref={ref as unknown as Ref<HTMLInputElement>}
-                />
-            );
-        }
-
-        return (
+import { type HapticPresetValue } from './types';
+
+type HapticButtonProps = Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    'type' | 'data-haptic-pattern'
+> & {
+    Component?: 'button';
+    type?: 'button' | 'submit';
+} & HapticBaseProps;
+
+type HapticAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'data-haptic-pattern'> & {
+    Component: 'a';
+} & HapticBaseProps;
+
+type HapticInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'data-haptic-pattern'> & {
+    Component: 'input';
+} & HapticBaseProps;
+
+export type HapticProps = HapticButtonProps | HapticAnchorProps | HapticInputProps;
+
+export interface HapticBaseProps {
+    /**
+     * Интерактивный элемент, на который навешивается haptic-поведение
+     * @default button
+     */
+    Component?: 'button' | 'a' | 'input';
+
+    /**
+     * Haptic-пресет или кастомный vibration-конфиг. Если не передан, компонент наследует `CoreConfig.haptics`
+     * @default selection
+     */
+    'data-haptic-preset'?: HapticPresetValue;
+}
+
+const HapticFeedback = (props: HapticProps, ref: Ref<HTMLElement>) => {
+    const { Component = 'button', ...restProps } = props;
+
+    const config = {
+        a: (
+            <HapticA
+                {...(restProps as ComponentProps<typeof HapticA>)}
+                ref={ref as unknown as Ref<HTMLAnchorElement>}
+            />
+        ),
+        button: (
             <HapticButton
                 {...(restProps as ComponentProps<typeof HapticButton>)}
-                data-haptic-pattern={resolvedHapticPattern}
                 ref={ref as unknown as Ref<HTMLButtonElement>}
             />
-        );
-    });
+        ),
+        input: (
+            <HapticInput
+                {...(restProps as ComponentProps<typeof HapticInput>)}
+                ref={ref as unknown as Ref<HTMLInputElement>}
+            />
+        ),
+    };
+
+    return config[Component];
+};
+
+export const Haptic = forwardRef<HTMLElement, HapticProps>(HapticFeedback);
 
 Haptic.displayName = 'Haptic';
diff --git a/packages/haptics/src/components/haptic-a/Component.tsx b/packages/haptics/src/components/haptic-a/Component.tsx
index a2dade1623..0984567fcd 100644
--- a/packages/haptics/src/components/haptic-a/Component.tsx
+++ b/packages/haptics/src/components/haptic-a/Component.tsx
@@ -1,36 +1,25 @@
 import React, { type AnchorHTMLAttributes, forwardRef, type MouseEvent } from 'react';
-import { type HapticPreset } from 'web-haptics';
 
-import { useCoreConfig } from '@alfalab/core-components-config';
+import { type HapticBaseProps } from '../../component';
+import { useHaptic } from '../../hooks/use-haptic';
 
-// import { type HapticPreset } from '../../types';
-import { triggerHaptic } from '../../utils';
-
-export type HapticAProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-    'data-haptic-pattern'?: HapticPreset;
-};
+type HapticAProps = AnchorHTMLAttributes<HTMLAnchorElement> & HapticBaseProps;
 
 export const HapticA = forwardRef<HTMLAnchorElement, HapticAProps>(
-    ({ 'data-haptic-pattern': hapticPattern = 'selection', onClick, ...restProps }, ref) => {
-        const { haptics } = useCoreConfig();
+    ({ 'data-haptic-preset': dataHapticPreset, onClick, ...restProps }, ref) => {
+        const { trigger } = useHaptic({ dataHapticPreset });
 
         const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
             onClick?.(event);
 
             if (event.defaultPrevented) return;
 
-            triggerHaptic(hapticPattern as HapticPreset, { enabled: haptics?.enabled });
+            trigger();
         };
 
         return (
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-has-content, jsx-a11y/click-events-have-key-events
-            <a
-                {...restProps}
-                data-haptic='false'
-                data-haptic-pattern={hapticPattern}
-                ref={ref}
-                onClick={handleClick}
-            />
+            <a {...restProps} ref={ref} onClick={handleClick} />
         );
     },
 );
diff --git a/packages/haptics/src/components/haptic-a/index.ts b/packages/haptics/src/components/haptic-a/index.ts
index cade252b3f..8803d33fa9 100644
--- a/packages/haptics/src/components/haptic-a/index.ts
+++ b/packages/haptics/src/components/haptic-a/index.ts
@@ -1,2 +1 @@
 export { HapticA } from './Component';
-export type { HapticAProps } from './Component';
diff --git a/packages/haptics/src/components/haptic-button/Component.tsx b/packages/haptics/src/components/haptic-button/Component.tsx
index 4aec60cc81..02c3a75a04 100644
--- a/packages/haptics/src/components/haptic-button/Component.tsx
+++ b/packages/haptics/src/components/haptic-button/Component.tsx
@@ -1,35 +1,29 @@
-/* eslint-disable react/button-has-type */
 import React, { type ButtonHTMLAttributes, forwardRef, type MouseEvent } from 'react';
-// import { type HapticPreset } from '../../types';
-import { type HapticPreset } from 'web-haptics';
 
-import { useCoreConfig } from '@alfalab/core-components-config';
+import { type HapticBaseProps } from '../../component';
+import { useHaptic } from '../../hooks/use-haptic';
 
-import { triggerHaptic } from '../../utils';
-
-export type HapticButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    'data-haptic-pattern'?: HapticPreset;
-};
+type HapticButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
+    type?: 'button' | 'submit';
+} & HapticBaseProps;
 
 export const HapticButton = forwardRef<HTMLButtonElement, HapticButtonProps>(
-    ({ 'data-haptic-pattern': hapticPattern = 'selection', onClick, ...restProps }, ref) => {
-        const { haptics } = useCoreConfig();
+    ({ 'data-haptic-preset': dataHapticPreset, onClick, type = 'button', ...restProps }, ref) => {
+        const { trigger } = useHaptic({ dataHapticPreset });
 
-        const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-            onClick?.(event);
+        const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e);
 
-            if (event.defaultPrevented) return;
+            if (e.defaultPrevented) return;
 
-            triggerHaptic(hapticPattern as HapticPreset, { enabled: haptics?.enabled });
+            trigger();
         };
 
         return (
-            // eslint-disable-next-line react/button-has-type
             <button
                 {...restProps}
-                data-haptic='false'
-                data-haptic-pattern={hapticPattern}
                 ref={ref}
+                type={type === 'submit' ? 'submit' : 'button'}
                 onClick={handleClick}
             />
         );
diff --git a/packages/haptics/src/components/haptic-button/index.ts b/packages/haptics/src/components/haptic-button/index.ts
index 340fb6ad70..db13a4dc89 100644
--- a/packages/haptics/src/components/haptic-button/index.ts
+++ b/packages/haptics/src/components/haptic-button/index.ts
@@ -1,2 +1 @@
 export { HapticButton } from './Component';
-export type { HapticButtonProps } from './Component';
diff --git a/packages/haptics/src/components/haptic-input/Component.tsx b/packages/haptics/src/components/haptic-input/Component.tsx
index 32a3e6e51d..b77c6364e7 100644
--- a/packages/haptics/src/components/haptic-input/Component.tsx
+++ b/packages/haptics/src/components/haptic-input/Component.tsx
@@ -1,36 +1,23 @@
 import React, { forwardRef, type InputHTMLAttributes, type MouseEvent } from 'react';
-import { type HapticPreset } from 'web-haptics';
 
-import { useCoreConfig } from '@alfalab/core-components-config';
+import { type HapticBaseProps } from '../../component';
+import { useHaptic } from '../../hooks/use-haptic';
 
-// import { type HapticPreset } from '../../types';
-import { triggerHaptic } from '../../utils';
-
-export type HapticInputProps = InputHTMLAttributes<HTMLInputElement> & {
-    'data-haptic-pattern'?: HapticPreset;
-};
+type HapticInputProps = InputHTMLAttributes<HTMLInputElement> & HapticBaseProps;
 
 export const HapticInput = forwardRef<HTMLInputElement, HapticInputProps>(
-    ({ 'data-haptic-pattern': hapticPattern = 'selection', onClick, ...restProps }, ref) => {
-        const { haptics } = useCoreConfig();
+    ({ 'data-haptic-preset': dataHapticPreset, onClick, ...restProps }, ref) => {
+        const { trigger } = useHaptic({ dataHapticPreset });
 
         const handleClick = (event: MouseEvent<HTMLInputElement>) => {
             onClick?.(event);
 
             if (event.defaultPrevented) return;
 
-            triggerHaptic(hapticPattern as HapticPreset, { enabled: haptics?.enabled });
+            trigger();
         };
 
-        return (
-            <input
-                {...restProps}
-                data-haptic='false'
-                data-haptic-pattern={hapticPattern}
-                ref={ref}
-                onClick={handleClick}
-            />
-        );
+        return <input {...restProps} ref={ref} onClick={handleClick} />;
     },
 );
 
diff --git a/packages/haptics/src/components/haptic-input/index.ts b/packages/haptics/src/components/haptic-input/index.ts
index 89d358dadd..005c46874d 100644
--- a/packages/haptics/src/components/haptic-input/index.ts
+++ b/packages/haptics/src/components/haptic-input/index.ts
@@ -1,2 +1 @@
 export { HapticInput } from './Component';
-export type { HapticInputProps } from './Component';
diff --git a/packages/haptics/src/components/index.ts b/packages/haptics/src/components/index.ts
new file mode 100644
index 0000000000..b1818046df
--- /dev/null
+++ b/packages/haptics/src/components/index.ts
@@ -0,0 +1,4 @@
+export { HapticA } from './haptic-a';
+export { HapticButton } from './haptic-button';
+export { HapticInput } from './haptic-input';
+
diff --git a/packages/haptics/src/docs/Component.docs.mdx b/packages/haptics/src/docs/Component.docs.mdx
new file mode 100644
index 0000000000..b9ab2de384
--- /dev/null
+++ b/packages/haptics/src/docs/Component.docs.mdx
@@ -0,0 +1,17 @@
+import { Meta, Markdown } from '@storybook/addon-docs';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
+import * as Stories from './Component.stories';
+
+import Description from './description.mdx';
+import Development from './development.mdx';
+import Changelog from '../../CHANGELOG.md?raw';
+
+<Meta of={Stories} />
+
+<ComponentHeader name='Haptic' children='Haptic feedback для мобильного веба.' />
+
+<Tabs
+    description={<Description />}
+    changelog={<Markdown>{Changelog}</Markdown>}
+    development={<Development />}
+/>
diff --git a/packages/haptics/src/docs/Component.stories.tsx b/packages/haptics/src/docs/Component.stories.tsx
new file mode 100644
index 0000000000..b0034b4a82
--- /dev/null
+++ b/packages/haptics/src/docs/Component.stories.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { boolean, select } from '@storybook/addon-knobs';
+
+import { Haptic } from '@alfalab/core-components-haptics';
+
+import type { HapticPreset } from '../types';
+
+const meta: Meta<typeof Haptic> = {
+    title: 'Components/Haptic',
+    component: Haptic,
+    id: 'Haptic',
+};
+
+type Story = StoryObj<typeof Haptic>;
+
+const PRESETS = [
+    'success',
+    'warning',
+    'error',
+    'light',
+    'medium',
+    'heavy',
+    'soft',
+    'rigid',
+    'selection',
+] as const;
+
+export const haptic: Story = {
+    name: 'Haptic',
+    render: () => {
+        const enabled = boolean('enabled', true);
+        const selectedPreset = select('data-haptic-pattern', PRESETS, 'selection') as HapticPreset;
+
+        return (
+            <Haptic
+                disabled={!enabled}
+                data-haptic-preset={selectedPreset}
+            >
+                Запустить {selectedPreset}
+            </Haptic>
+        );
+    },
+};
+
+export default meta;
diff --git a/packages/haptics/src/docs/description.mdx b/packages/haptics/src/docs/description.mdx
new file mode 100644
index 0000000000..9eac146097
--- /dev/null
+++ b/packages/haptics/src/docs/description.mdx
@@ -0,0 +1,292 @@
+## Пресеты
+
+Это аналоги системных паттернов тактильной отдачи в iOS, для которых описаны ситуации в которых они применимы. Если описание пресета не не подходит под вашу задачу, старайтесь не использовать его, даже если сама вибрация вас устраивает. Ознакомиться с формой вибраций можно в гайдлайнах Apple (https://developer.apple.com/design/human-interface-guidelines/playing-haptics).
+
+Уведомления. Эти пресеты обеспечивают обратную связь о результатах выполнения задачи или действия, таких как завершение операции или сохранение настроек.
+
+```jsx live mobileOnly mobileHeight={452}
+render(() => {
+    const presets = [
+        {
+            items: [
+                {
+                    label: 'Success',
+                    description: 'Всё прошло успешно',
+                    preset: 'success',
+                },
+                {
+                    label: 'Warning',
+                    description: 'Что-то требует внимания',
+                    preset: 'warning',
+                },
+                {
+                    label: 'Error',
+                    description: 'Что-то пошло не так',
+                    preset: 'error',
+                },
+            ],
+        },
+    ];
+
+    return (
+        <>
+            {presets.map((group) => (
+                <div key='notification'>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
+                        {group.items.map(({ preset, label, description }) => (
+                            <div
+                                key={preset}
+                                style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
+                            >
+                                <Button
+                                    block={true}
+                                    haptic={{ 'data-haptic-pattern': preset }}
+                                    view='secondary'
+                                >
+                                    {label}
+                                </Button>
+
+                                <Typography.Text
+                                    view='primary-small'
+                                    color='secondary'
+                                    style={{ textAlign: 'center' }}
+                                >
+                                    {description}
+                                </Typography.Text>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </>
+    );
+});
+```
+
+Взаимодействие. Это вибрации, которые дополняют визуальный опыт и делают его более ощутимым.
+
+```jsx live mobileOnly mobileHeight={750}
+render(() => {
+    const presets = [
+        {
+            items: [
+                {
+                    label: 'Light',
+                    description: 'Лёгкий, едва заметный щелчёк',
+                    preset: 'light',
+                },
+                {
+                    label: 'Medium',
+                    description: 'Более ощутимый щелчок, как мягкое нажатие кнопки',
+                    preset: 'medium',
+                },
+                {
+                    label: 'Heavy',
+                    description: 'Плотный, уверенный щелчёк будто нажал тугую физическую кнопку',
+                    preset: 'heavy',
+                },
+                {
+                    label: 'Rigid',
+                    description: 'Короткий, резкий щелчёк',
+                    preset: 'rigid',
+                },
+                {
+                    label: 'Soft',
+                    description: 'Мягкий импульс',
+                    preset: 'soft',
+                },
+            ],
+        },
+    ];
+
+    return (
+        <>
+            {presets.map((group) => (
+                <div key='notification'>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
+                        {group.items.map(({ preset, label, description }) => (
+                            <div
+                                key={preset}
+                                style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
+                            >
+                                <Button
+                                    block={true}
+                                    haptic={{ 'data-haptic-pattern': preset }}
+                                    view='secondary'
+                                >
+                                    {label}
+                                </Button>
+
+                                <Typography.Text
+                                    view='primary-small'
+                                    color='secondary'
+                                    style={{ textAlign: 'center' }}
+                                >
+                                    {description}
+                                </Typography.Text>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </>
+    );
+});
+```
+
+Изменение. Сигнал о том, что значение UI-элемента меняется.
+
+```jsx live mobileOnly mobileHeight={96}
+render(() => {
+    const presets = [
+        {
+            items: [
+                {
+                    label: 'Selection',
+                    preset: 'selection',
+                },
+            ],
+        },
+    ];
+
+    return (
+        <>
+            {presets.map((group) => (
+                <div key='notification'>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
+                        {group.items.map(({ preset, label }) => (
+                            <div
+                                key={preset}
+                                style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
+                            >
+                                <Button
+                                    block={true}
+                                    haptic={{ 'data-haptic-pattern': preset }}
+                                    view='secondary'
+                                >
+                                    {label}
+                                </Button>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </>
+    );
+});
+```
+
+## Кастом
+
+Управляя параметрами [delay], [intensity], [duration] — можно получить нужный вид вибрации, если ни один из пресетов не подходит.
+
+```jsx live mobileHeight={96} mobileOnly
+<Space direction='horizontal' size={12} align='center'>
+    <Button
+        view='secondary'
+        data-haptic-preset={{
+            duration: 12,
+            intensity: 0.4,
+            repeat: 2,
+        }}
+    >
+        Custom
+    </Button>
+</Space>
+```
+
+## Дефолтные вибрации
+
+В некоторые компоненты зашиты аналогичные iOS паттерны вибрации.
+
+```jsx live mobileHeight={658} mobileOnly
+render(() => {
+    const [checkboxFirst, setCheckboxFirst] = React.useState(false);
+    const [checkboxSecond, setCheckboxSecond] = React.useState(false);
+    const [radio, setRadio] = React.useState('first');
+    const [switchChecked, setSwitchChecked] = React.useState(true);
+    const [sliderValue, setSliderValue] = React.useState(2.5);
+    const [numberValue, setNumberValue] = React.useState(1);
+    const [date, setDate] = React.useState(null);
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                <Typography.Text view='primary-small' color='secondary'>
+                    Чекбоксы
+                </Typography.Text>
+                <Checkbox
+                    checked={checkboxFirst}
+                    label='Чекбокс 1'
+                    onChange={(_, { checked }) => setCheckboxFirst(checked)}
+                />
+                <Checkbox
+                    checked={checkboxSecond}
+                    label='Чекбокс 2'
+                    onChange={(_, { checked }) => setCheckboxSecond(checked)}
+                />
+            </div>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                <Typography.Text view='primary-small' color='secondary'>
+                    Радио
+                </Typography.Text>
+                <Radio
+                    checked={radio === 'first'}
+                    label='Радио 1'
+                    name='haptic-radio'
+                    onChange={() => setRadio('first')}
+                />
+                <Radio
+                    checked={radio === 'second'}
+                    label='Радио 2'
+                    name='haptic-radio'
+                    onChange={() => setRadio('second')}
+                />
+            </div>
+
+            <Switch
+                checked={switchChecked}
+                label='Свитч'
+                onChange={(_, { checked }) => setSwitchChecked(checked)}
+            />
+
+            <Slider
+                min={1}
+                max={10}
+                step={1}
+                value={sliderValue}
+                pips={{ mode: 'steps', values: 1 }}
+                onChange={({ value }) => setSliderValue(value)}
+            />
+
+            <NumberInput
+                block={true}
+                label='Инпут со степпером'
+                labelView='inner'
+                min={1}
+                max={10}
+                step={1}
+                value={numberValue}
+                onChange={(_, { value }) => setNumberValue(value)}
+            />
+
+            <UniversalDateInput
+                block={true}
+                view='date'
+                label='Календарь'
+                labelView='inner'
+                value={date}
+                onChange={setDate}
+                picker={true}
+                Calendar={Calendar}
+                disableUserInput={true}
+            />
+        </div>
+    );
+});
+```
+
+## Ограничения
+
+В данной реализации не поддерживается нативный параметр [sharpness] и длительный тип вибрации [Continuous].
diff --git a/packages/haptics/src/docs/development.mdx b/packages/haptics/src/docs/development.mdx
new file mode 100644
index 0000000000..37892c1a2d
--- /dev/null
+++ b/packages/haptics/src/docs/development.mdx
@@ -0,0 +1,29 @@
+import { ArgTypes } from '@storybook/addon-docs';
+import { Haptic } from '../index';
+
+## Подключение
+
+```jsx
+import { Haptic, useHaptic } from '@alfalab/core-components/haptics';
+```
+
+## Ручной запуск
+
+```jsx
+const { triggerHaptic } = useHaptic();
+
+triggerHaptic('success');
+triggerHaptic(
+    [
+        { duration: 12, intensity: 0.4 },
+        { delay: 32, duration: 20, intensity: 1 },
+    ],
+    {
+        repeat: 2,
+    },
+);
+```
+
+## Свойства
+
+<ArgTypes of={Haptic} />
diff --git a/packages/haptics/src/hooks/use-client-haptics.ts b/packages/haptics/src/hooks/use-client-haptics.ts
deleted file mode 100644
index 9b91252574..0000000000
--- a/packages/haptics/src/hooks/use-client-haptics.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useCallback } from 'react';
-import { type HapticPreset } from 'web-haptics';
-
-import {
-    type ClientHapticsApi,
-    // type HapticPreset,
-    type TriggerHapticOptions,
-    type UseClientHapticsParams,
-} from '../types';
-import { triggerHaptic } from '../utils';
-
-/**
- * Хук для ручного запуска haptic-фидбека из компонентов.
- */
-export const useHaptic = ({
-    enabled: externalEnabled,
-}: UseClientHapticsParams = {}): ClientHapticsApi => {
-    const isEnabled = externalEnabled !== false;
-
-    const trigger = useCallback(
-        (preset: HapticPreset, options: TriggerHapticOptions = {}) => {
-            const enabled = options.enabled ?? externalEnabled;
-
-            triggerHaptic(preset, { ...options, enabled });
-        },
-        [externalEnabled],
-    );
-
-    return {
-        enabled: isEnabled,
-        triggerHaptic: trigger,
-    };
-};
diff --git a/packages/haptics/src/hooks/use-haptic.ts b/packages/haptics/src/hooks/use-haptic.ts
new file mode 100644
index 0000000000..7c0be19127
--- /dev/null
+++ b/packages/haptics/src/hooks/use-haptic.ts
@@ -0,0 +1,100 @@
+import { useCallback } from 'react';
+import { useWebHaptics } from 'web-haptics/react';
+
+import { useCoreConfig } from '@alfalab/core-components-config';
+
+import {
+    type HapticInput,
+    type HapticPresetValue,
+    type TriggerOptions,
+} from '../types';
+import { resolveHapticConfig } from '../utils';
+
+type WebHapticsOptions = NonNullable<Parameters<typeof useWebHaptics>[0]>;
+
+interface UseHapticParams extends WebHapticsOptions {
+    dataHapticPreset?: HapticPresetValue;
+}
+
+interface UseHapticResponse {
+    /**
+     * Можно ли запускать haptic с учётом итогового конфига и поддержки окружения.
+     */
+    enabled: boolean;
+
+    /**
+     * Поддерживает ли текущее окружение запуск haptic feedback через `web-haptics`.
+     */
+    isSupported: boolean;
+
+    /**
+     * Запускает haptic feedback.
+     *
+     * Если передать `input`, он будет отправлен напрямую в `web-haptics.trigger`.
+     * Если `input` не передан, используется payload из локального `haptic` или `CoreConfig.haptics`.
+     */
+    trigger: (input?: HapticInput, options?: TriggerOptions) => void;
+
+    /**
+     * Отменяет текущий haptic feedback, если `web-haptics` уже начал проигрывать паттерн.
+     */
+    cancel: () => void;
+};
+
+/**
+ * Хук для ручного запуска haptic feedback.
+ *
+ * Оборачивает `useWebHaptics` и добавляет поддержку конфигурации из `CoreConfig.haptics`
+ * и локального `data-haptic-preset`-пропса компонента.
+ *
+ * Приоритет источников:
+ * 1. `trigger(input, options)` — прямой вызов с payload для `web-haptics`, самый высокий приоритет.
+ * 2. `useHaptic({ dataHapticPreset })` — локальный preset или кастомный vibration-конфиг.
+ * 3. `CoreConfig.haptics` — глобальная конфигурация из провайдера.
+ *
+ * Если `input` передан в `trigger`, локальный и глобальный конфиг используются только для
+ * проверки доступности hook-а, но не меняют payload. Если `input` не передан, hook запускает
+ * заранее разрешённый payload из локального `data-haptic-preset` или глобального `CoreConfig.haptics`.
+ *
+ * `enabled` возвращает `true` только когда итоговый конфиг есть и `web-haptics` поддерживается
+ * текущим окружением.
+ */
+export const useHaptic = ({
+    dataHapticPreset,
+    debug,
+    showSwitch,
+}: UseHapticParams = {}): UseHapticResponse => {
+    const { haptics } = useCoreConfig();
+    const { cancel, isSupported, trigger: triggerHaptics } = useWebHaptics({ debug, showSwitch });
+
+    const config = resolveHapticConfig({
+        dataHapticPreset,
+        global: haptics,
+    });
+
+    const trigger = useCallback(
+        (input?: HapticInput, options?: TriggerOptions) => {
+            if (!isSupported) return;
+
+            // Direct trigger has the highest priority and bypasses local/global config.
+            if (input !== undefined) {
+                triggerHaptics(input, options)?.catch(() => {});
+
+                return;
+            }
+
+            if (!config) return;
+
+            // No direct input: use resolved local `data-haptic-preset` prop or global CoreConfig.haptics.
+            triggerHaptics(config.input, options ?? config.options)?.catch(() => {});
+        },
+        [config, isSupported, triggerHaptics],
+    );
+
+    return {
+        enabled: Boolean(config && isSupported),
+        isSupported,
+        trigger,
+        cancel,
+    };
+};
diff --git a/packages/haptics/src/index.ts b/packages/haptics/src/index.ts
index f4c2e7db4f..ad895f410a 100644
--- a/packages/haptics/src/index.ts
+++ b/packages/haptics/src/index.ts
@@ -1,2 +1,12 @@
 export { Haptic } from './component';
-export { useHaptic } from './hooks/use-client-haptics';
+export { HapticA, HapticButton, HapticInput } from './components';
+export { useHaptic } from './hooks/use-haptic';
+
+export type {
+    HapticConfig,
+    HapticPattern,
+    HapticPreset,
+    HapticPresetValue,
+    HapticTriggerConfig,
+    TriggerOptions,
+} from './types';
diff --git a/packages/haptics/src/types.ts b/packages/haptics/src/types.ts
index 3bc7561e2d..e56d7af946 100644
--- a/packages/haptics/src/types.ts
+++ b/packages/haptics/src/types.ts
@@ -1,57 +1,62 @@
-import {
-    type AnchorHTMLAttributes,
-    type ButtonHTMLAttributes,
-    type InputHTMLAttributes,
-} from 'react';
-import { type HapticPreset as WebHapticPreset } from 'web-haptics';
-
-// todo: add more haptic presets
-export type HapticPreset = WebHapticPreset;
-export type HapticComponent = 'button' | 'a' | 'input';
-
-export interface HapticBaseProps {
-    /**
-     * Интерактивный элемент, на который навешивается haptic-поведение
-     * @default button
-     */
-    Component?: HapticComponent;
 
-    /**
-     * Паттерн хаптика, который будет запущен по клику
-     * @default selection
-     */
-    'data-haptic-pattern'?: HapticPreset;
-}
+import { type useWebHaptics } from 'web-haptics/react';
+
+export type HapticPreset =
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'light'
+    | 'medium'
+    | 'heavy'
+    | 'soft'
+    | 'rigid'
+    | 'selection'
+    | 'nudge'
+    | 'buzz';
 
-type HapticButtonProps = Omit<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    'type' | 'data-haptic-pattern'
-> & {
-    Component?: 'button';
-    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'] | string;
-} & HapticBaseProps;
+type WebHaptics = ReturnType<typeof useWebHaptics>;
+type WebHapticsTrigger = WebHaptics['trigger'];
 
-type HapticAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'data-haptic-pattern'> & {
-    Component: 'a';
-} & HapticBaseProps;
+export type HapticInput = Parameters<WebHapticsTrigger>[0];
+export type TriggerOptions = Parameters<WebHapticsTrigger>[1];
 
-type HapticInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'data-haptic-pattern'> & {
-    Component: 'input';
-} & HapticBaseProps;
+type HapticInputPattern = Extract<NonNullable<HapticInput>, Array<{ duration: number }>>;
 
-export type HapticProps = HapticButtonProps | HapticAnchorProps | HapticInputProps;
+type Vibration = HapticInputPattern[number];
+export type HapticPattern = Vibration[];
+export type HapticPresetValue = HapticPreset | (Partial<Vibration> & { repeat?: number });
 
-export interface TriggerHapticOptions {
+export interface HapticTriggerConfig {
     enabled?: boolean;
-}
 
-export type TriggerHaptic = (preset: HapticPreset, options?: TriggerHapticOptions) => void;
+    /**
+     * Payload, который будет передан напрямую в `web-haptics.trigger`.
+     */
+    input?: HapticInput;
+
+    /**
+     * Паттерн в формате `web-haptics` preset object.
+     */
+    pattern?: HapticPattern;
 
-export interface ClientHapticsApi {
-    enabled: boolean;
-    triggerHaptic: TriggerHaptic;
+    /**
+     * Опции, которые будут переданы напрямую в `web-haptics.trigger`.
+     */
+    options?: TriggerOptions;
 }
 
-export interface UseClientHapticsParams {
+export interface HapticConfig extends HapticTriggerConfig, Partial<Vibration> {
     enabled?: boolean;
+
+    /**
+     * Haptic-паттерн
+     * @default selection
+     */
+    'data-haptic-pattern'?: HapticPreset;
+
+    /**
+     * Повтор всего паттерна
+     * @default 1
+     */
+    repeat?: number;
 }
diff --git a/packages/haptics/src/utils.ts b/packages/haptics/src/utils.ts
index 2980466fac..aae4e628e7 100644
--- a/packages/haptics/src/utils.ts
+++ b/packages/haptics/src/utils.ts
@@ -1,93 +1,98 @@
-import { defaultPatterns, type HapticPattern, WebHaptics } from 'web-haptics';
-
-import { isIOS } from '@alfalab/core-components-shared';
+import { defaultPatterns } from 'web-haptics';
 
 import {
+    type HapticConfig,
+    type HapticPattern,
     type HapticPreset,
-    type TriggerHapticOptions,
+    type HapticPresetValue,
+    type HapticTriggerConfig,
 } from './types';
 
-// todo: add more haptic patterns
-const hapticPatterns: Record<HapticPreset, HapticPattern> = {
-    ...defaultPatterns,
-    selection: [{ duration: 500, intensity: 1 }],
-};
-
-// todo: add more native haptic patterns
-const nativeHapticPatterns: Record<HapticPreset, number> = {
-    selection: 50,
-};
-
-let haptics: WebHaptics | null = null;
-let iosHapticInput: HTMLInputElement | null = null;
-
-const isClient = () => typeof window !== 'undefined';
-
-const isTouchEnvironment = () => {
-    if (!isClient()) return false;
-
-    return (
-        window.navigator.maxTouchPoints > 0 ||
-        window.matchMedia?.('(pointer: coarse)').matches === true
-    );
-};
-
-export const isHapticsSupported = () =>
-    isClient() && (typeof window.navigator.vibrate === 'function' || isTouchEnvironment());
-
-const getHaptics = () => {
-    if (!haptics) {
-        haptics = new WebHaptics({ showSwitch: false });
-    }
-
-    return haptics;
+const DEFAULT_REPEAT = 1;
+const DEFAULT_PRESET: HapticPreset = 'selection';
+
+const normalizeRepeat = (repeat = DEFAULT_REPEAT) => Math.max(1, Math.floor(repeat));
+
+/**
+ * Повторяет весь haptic-паттерн целиком.
+ *
+ * `repeat=2` для `[A, B]` вернёт `[A, B, A, B]`.
+ */
+export const repeatHapticPattern = (pattern: HapticPattern, repeat = DEFAULT_REPEAT) =>
+    Array.from({ length: normalizeRepeat(repeat) }).flatMap(() => pattern);
+
+export type ResolveHapticConfigParams = {
+    /**
+     * Локальный haptic-пресет, переданный в компонент.
+     */
+    dataHapticPreset?: HapticPresetValue;
+
+    /**
+     * Глобальный haptic-конфиг из `CoreConfig`.
+     */
+    global?: HapticConfig;
 };
 
-const getIOSHapticInput = () => {
-    if (iosHapticInput?.isConnected) return iosHapticInput;
-
-    const input = document.createElement('input');
-
-    input.type = 'checkbox';
-    input.setAttribute('switch', '');
-    input.setAttribute('aria-hidden', 'true');
-    input.tabIndex = -1;
-    input.style.cssText = [
-        'position:fixed',
-        'top:0',
-        'left:0',
-        'width:1px',
-        'height:1px',
-        'opacity:0',
-        'pointer-events:none',
-    ].join(';');
-
-    document.body.appendChild(input);
-    iosHapticInput = input;
-
-    return iosHapticInput;
-};
-
-export const triggerHaptic = (preset: HapticPreset, options: TriggerHapticOptions = {}) => {
-    if (options.enabled === false) return;
-    if (!isHapticsSupported()) return;
-
-    if (typeof window.navigator.vibrate === 'function') {
-        window.navigator.vibrate(nativeHapticPatterns[preset]);
-
-        return;
+/**
+ * Собирает итоговый haptic-конфиг из локального `haptic` и глобального `CoreConfig.haptics`.
+ *
+ * Правила приоритета:
+ * - если `data-haptic-preset` не передан, используется только `global.enabled=true`
+ * - если `data-haptic-preset` передан, он включает haptic даже при `global.enabled=false`
+ * - строковый `data-haptic-preset` запускает только выбранный preset
+ * - объектный `data-haptic-preset` считается кастомным vibration-конфигом
+ */
+export const resolveHapticConfig = ({
+    dataHapticPreset,
+    global,
+}: ResolveHapticConfigParams): Omit<HapticTriggerConfig, 'pattern'> | null => {
+    const hasLocalPreset = dataHapticPreset !== undefined;
+
+    if (!hasLocalPreset && global?.enabled !== true) return null;
+
+    if (typeof dataHapticPreset === 'string') {
+        return {
+            input: defaultPatterns[dataHapticPreset].pattern as HapticPattern,
+            enabled: true,
+        };
     }
 
-    if (isIOS()) {
-        const input = getIOSHapticInput();
-
-        input.checked = !input.checked;
-        input.click();
+    if (dataHapticPreset) {
+        const { repeat = DEFAULT_REPEAT, ...vibration } = dataHapticPreset;
 
-        return;
+        return {
+            input: repeatHapticPattern([vibration] as HapticPattern, repeat),
+            enabled: true,
+        };
     }
 
-    getHaptics()
-        .trigger(hapticPatterns[preset])
-        .catch(() => {});
+    const {
+        input,
+        pattern,
+        options,
+        intensity,
+        repeat = DEFAULT_REPEAT,
+        'data-haptic-pattern': preset = DEFAULT_PRESET,
+        enabled: resolvedEnabled,
+    } = global ?? {};
+
+    if (resolvedEnabled === false) return null;
+
+    const inputFromGlobal =
+        input ??
+        pattern ??
+        repeatHapticPattern(defaultPatterns[preset].pattern as HapticPattern, repeat);
+    const optionsFromGlobal =
+        options || intensity !== undefined
+            ? {
+                  ...(intensity !== undefined && { intensity }),
+                  ...options,
+              }
+            : undefined;
+
+    return {
+        input: inputFromGlobal,
+        options: optionsFromGlobal,
+        enabled: resolvedEnabled === true,
+    };
 };
diff --git a/packages/icon-button/src/types/icon-button-props.ts b/packages/icon-button/src/types/icon-button-props.ts
index b9a4b21b06..cdc1f6ca52 100644
--- a/packages/icon-button/src/types/icon-button-props.ts
+++ b/packages/icon-button/src/types/icon-button-props.ts
@@ -9,7 +9,10 @@ import { type ButtonProps } from '@alfalab/core-components-button';
 
 export interface IconButtonProps
     extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'>,
-        Pick<ButtonProps, 'Component' | 'href' | 'loading' | 'breakpoint'>,
+        Pick<
+            ButtonProps,
+            'Component' | 'href' | 'loading' | 'breakpoint' | 'data-haptic-preset'
+        >,
         Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'download'> {
     /**
      * Компонент иконки
diff --git a/packages/number-input/package.json b/packages/number-input/package.json
index 35e05ccd8a..bbc92ae7b3 100644
--- a/packages/number-input/package.json
+++ b/packages/number-input/package.json
@@ -13,6 +13,7 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
+        "@alfalab/core-components-haptics": "^0.0.1",
         "@alfalab/core-components-icon-button": "^8.0.6",
         "@alfalab/core-components-input": "^17.1.6",
         "@alfalab/core-components-mq": "^6.0.4",
diff --git a/packages/number-input/src/components/number-input/Component.tsx b/packages/number-input/src/components/number-input/Component.tsx
index 68c0d98e57..6b4cb200f0 100644
--- a/packages/number-input/src/components/number-input/Component.tsx
+++ b/packages/number-input/src/components/number-input/Component.tsx
@@ -13,6 +13,7 @@ import mergeRefs from 'react-merge-refs';
 import { type MaskitoOptions, maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 
+import { type HapticConfig } from '@alfalab/core-components-haptics';
 import { type InputProps } from '@alfalab/core-components-input';
 import { fnUtils, isIOS } from '@alfalab/core-components-shared';
 
@@ -86,6 +87,12 @@ export interface NumberInputProps
      * Для кнопки инкремента используется модификатор -increment-button, декремента -decrement-button
      */
     dataTestId?: string;
+
+    /**
+     * Haptic-паттерн для кнопок increment/decrement. `false` отключает haptic для конкретного number input
+     * @default selection
+     */
+    haptic?: HapticConfig;
 }
 
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
@@ -110,6 +117,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             disableUserInput,
             clear: clearProp,
             colors = 'default',
+            haptic,
             ...restProps
         },
         ref,
@@ -242,6 +250,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
                         onIncrement={handleIncrement}
                         onDecrement={handleDecrement}
                         size={size}
+                        haptic={haptic}
                     />
                 )}
             </Fragment>
diff --git a/packages/number-input/src/components/steppers/Component.tsx b/packages/number-input/src/components/steppers/Component.tsx
index 1630f770d1..758dec25cb 100644
--- a/packages/number-input/src/components/steppers/Component.tsx
+++ b/packages/number-input/src/components/steppers/Component.tsx
@@ -1,6 +1,7 @@
 import React, { type FC } from 'react';
 import cn from 'classnames';
 
+import { type HapticConfig } from '@alfalab/core-components-haptics';
 import { IconButton } from '@alfalab/core-components-icon-button';
 import { type InputProps } from '@alfalab/core-components-input';
 import { getDataTestId } from '@alfalab/core-components-shared';
@@ -25,6 +26,7 @@ export type SteppersProps = {
     dataTestId?: string;
     colors: 'default' | 'inverted';
     size: InputProps['size'];
+    haptic?: HapticConfig;
 };
 
 const colorStyles = {
@@ -60,6 +62,7 @@ export const Steppers: FC<SteppersProps> = ({
     dataTestId,
     colors,
     size = 48,
+    haptic,
 }) => {
     const decButtonDisabled = disabled || value <= min;
     const incButtonDisabled = disabled || value >= max;
@@ -89,6 +92,7 @@ export const Steppers: FC<SteppersProps> = ({
                 onMouseDown={preventDefault}
                 onClick={onDecrement}
                 dataTestId={getDataTestId(dataTestId, 'decrement-button')}
+                haptic={haptic}
                 view='secondary'
             />
             <div className={cn(styles.separator, colorStyles[colors].separator)} />
@@ -101,6 +105,7 @@ export const Steppers: FC<SteppersProps> = ({
                 onMouseDown={preventDefault}
                 onClick={onIncrement}
                 dataTestId={getDataTestId(dataTestId, 'increment-button')}
+                haptic={haptic}
                 view='secondary'
             />
         </div>
diff --git a/packages/number-input/tsconfig.build.json b/packages/number-input/tsconfig.build.json
index 38c43c6b63..4e7f047257 100644
--- a/packages/number-input/tsconfig.build.json
+++ b/packages/number-input/tsconfig.build.json
@@ -7,6 +7,8 @@
         "rootDir": "src",
         "outDir": "ts-dist",
         "paths": {
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-icon-button": ["../icon-button/src"],
             "@alfalab/core-components-icon-button/*": ["../icon-button/src/*"],
             "@alfalab/core-components-input": ["../input/src"],
@@ -20,6 +22,7 @@
         }
     },
     "references": [
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../icon-button/tsconfig.build.json" },
         { "path": "../input/tsconfig.build.json" },
         { "path": "../mq/tsconfig.build.json" },
diff --git a/packages/number-input/tsconfig.json b/packages/number-input/tsconfig.json
index d5149860d4..1e269b47b6 100644
--- a/packages/number-input/tsconfig.json
+++ b/packages/number-input/tsconfig.json
@@ -6,6 +6,8 @@
         "rootDir": "src",
         "outDir": "no-dist",
         "paths": {
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-icon-button": ["../icon-button/src"],
             "@alfalab/core-components-icon-button/*": ["../icon-button/src/*"],
             "@alfalab/core-components-input": ["../input/src"],
@@ -23,6 +25,7 @@
         }
     },
     "references": [
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../icon-button/tsconfig.build.json" },
         { "path": "../input/tsconfig.build.json" },
         { "path": "../mq/tsconfig.build.json" },
diff --git a/packages/radio/package.json b/packages/radio/package.json
index e0533acaaf..5ffafb8d0a 100644
--- a/packages/radio/package.json
+++ b/packages/radio/package.json
@@ -13,6 +13,7 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
+        "@alfalab/core-components-haptics": "^0.0.1",
         "@alfalab/core-components-shared": "^2.2.0",
         "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
diff --git a/packages/radio/src/Component.tsx b/packages/radio/src/Component.tsx
index 0d115f93f3..d495427cb7 100644
--- a/packages/radio/src/Component.tsx
+++ b/packages/radio/src/Component.tsx
@@ -11,6 +11,7 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
+import { Haptic, type HapticPresetValue } from '@alfalab/core-components-haptics';
 import { dom } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 
@@ -117,6 +118,12 @@ export type RadioProps = Omit<
      * @default default
      */
     colors?: 'default' | 'inverted';
+
+    /**
+     * Haptic-пресет или кастомный vibration-конфиг для выбора radio.
+     * @default selection
+     */
+    'data-haptic-preset'?: HapticPresetValue;
 };
 
 export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
@@ -138,6 +145,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
             block,
             labelProps,
             colors = 'default',
+            'data-haptic-preset': dataHapticPreset,
             ...restProps
         },
         ref,
@@ -175,13 +183,15 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
                 )}
                 ref={mergeRefs([labelRef, ref, labelProps?.ref as Ref<HTMLLabelElement>])}
             >
-                <input
+                <Haptic
+                    Component='input'
                     type='radio'
                     onChange={handleChange}
                     data-test-id={dataTestId}
                     disabled={disabled}
                     checked={checked}
                     name={name}
+                    data-haptic-preset={dataHapticPreset}
                     {...restProps}
                 />
                 <span className={cn(styles.circle, colorStyle.circle, circleClassName)} />
diff --git a/packages/radio/tsconfig.build.json b/packages/radio/tsconfig.build.json
index d6012fb8e9..a8983d836f 100644
--- a/packages/radio/tsconfig.build.json
+++ b/packages/radio/tsconfig.build.json
@@ -9,9 +9,14 @@
         "paths": {
             "@alfalab/core-components-radio": ["./src"],
             "@alfalab/core-components-radio/*": ["./src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
             "@alfalab/core-components-shared/*": ["../shared/src/*"]
         }
     },
-    "references": [{ "path": "../shared/tsconfig.build.json" }]
+    "references": [
+        { "path": "../haptics/tsconfig.build.json" },
+        { "path": "../shared/tsconfig.build.json" }
+    ]
 }
diff --git a/packages/radio/tsconfig.json b/packages/radio/tsconfig.json
index 23e0309ebb..822f8c7097 100644
--- a/packages/radio/tsconfig.json
+++ b/packages/radio/tsconfig.json
@@ -8,6 +8,8 @@
         "paths": {
             "@alfalab/core-components-radio": ["./src"],
             "@alfalab/core-components-radio/*": ["./src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
             "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
@@ -17,6 +19,7 @@
         }
     },
     "references": [
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../test-utils/tsconfig.build.json" }
diff --git a/packages/switch/package.json b/packages/switch/package.json
index 9209c03732..abf2f58990 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -13,6 +13,7 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
+        "@alfalab/core-components-haptics": "^0.0.1",
         "@alfalab/core-components-shared": "^2.2.0",
         "@alfalab/core-components-skeleton": "^7.0.3",
         "@alfalab/hooks": "^1.13.1",
diff --git a/packages/switch/src/Component.tsx b/packages/switch/src/Component.tsx
index ccad3c3230..2c3c4f9985 100644
--- a/packages/switch/src/Component.tsx
+++ b/packages/switch/src/Component.tsx
@@ -8,6 +8,7 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
+import { Haptic, type HapticPresetValue } from '@alfalab/core-components-haptics';
 import { dom } from '@alfalab/core-components-shared';
 import { Skeleton } from '@alfalab/core-components-skeleton';
 import { useFocus } from '@alfalab/hooks';
@@ -101,6 +102,12 @@ export type SwitchProps = Omit<
      * @default false
      */
     showSkeleton?: boolean;
+
+    /**
+     * Haptic-пресет или кастомный vibration-конфиг для переключения switch.
+     * @default selection
+     */
+    'data-haptic-preset'?: HapticPresetValue;
 };
 
 export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
@@ -122,6 +129,7 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
             dataTestId,
             colors = 'default',
             showSkeleton = false,
+            'data-haptic-preset': dataHapticPreset,
             ...restProps
         },
         ref,
@@ -153,7 +161,8 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
                 })}
                 ref={mergeRefs([labelRef, ref])}
             >
-                <input
+                <Haptic
+                    Component='input'
                     type='checkbox'
                     onChange={handleChange}
                     disabled={disabled}
@@ -161,6 +170,7 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
                     name={name}
                     value={value}
                     data-test-id={dataTestId}
+                    data-haptic-preset={dataHapticPreset}
                     {...restProps}
                 />
 
diff --git a/packages/switch/tsconfig.build.json b/packages/switch/tsconfig.build.json
index a61f335b4d..c37e30a1c4 100644
--- a/packages/switch/tsconfig.build.json
+++ b/packages/switch/tsconfig.build.json
@@ -7,6 +7,8 @@
         "rootDir": "src",
         "outDir": "ts-dist",
         "paths": {
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
             "@alfalab/core-components-shared/*": ["../shared/src/*"],
             "@alfalab/core-components-skeleton": ["../skeleton/src"],
@@ -16,6 +18,7 @@
         }
     },
     "references": [
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../skeleton/tsconfig.build.json" }
     ]
diff --git a/packages/switch/tsconfig.json b/packages/switch/tsconfig.json
index 2ee9775a99..3da6e15d7c 100644
--- a/packages/switch/tsconfig.json
+++ b/packages/switch/tsconfig.json
@@ -6,6 +6,8 @@
         "rootDir": "src",
         "outDir": "no-dist",
         "paths": {
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
             "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
@@ -19,6 +21,7 @@
         }
     },
     "references": [
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../skeleton/tsconfig.build.json" },
diff --git a/yarn.lock b/yarn.lock
index 1323623fd2..bf8fdf358c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -241,6 +241,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-button@workspace:packages/button"
   dependencies:
+    "@alfalab/core-components-haptics": "npm:^0.0.1"
     "@alfalab/core-components-mq": "npm:^6.0.4"
     "@alfalab/core-components-shared": "npm:^2.2.0"
     "@alfalab/core-components-spinner": "npm:^6.0.4"
@@ -1187,6 +1188,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-number-input@workspace:packages/number-input"
   dependencies:
+    "@alfalab/core-components-haptics": "npm:^0.0.1"
     "@alfalab/core-components-icon-button": "npm:^8.0.6"
     "@alfalab/core-components-input": "npm:^17.1.6"
     "@alfalab/core-components-mq": "npm:^6.0.4"
@@ -1491,6 +1493,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-radio@workspace:packages/radio"
   dependencies:
+    "@alfalab/core-components-haptics": "npm:^0.0.1"
     "@alfalab/core-components-shared": "npm:^2.2.0"
     "@alfalab/hooks": "npm:^1.13.1"
     classnames: "npm:^2.5.1"
@@ -1910,6 +1913,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-switch@workspace:packages/switch"
   dependencies:
+    "@alfalab/core-components-haptics": "npm:^0.0.1"
     "@alfalab/core-components-shared": "npm:^2.2.0"
     "@alfalab/core-components-skeleton": "npm:^7.0.3"
     "@alfalab/hooks": "npm:^1.13.1"

From a02334328b537d76cc80a2212482bcbe11d13f65 Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Thu, 4 Jun 2026 13:14:54 +0300
Subject: [PATCH 09/12] fix esLint

---
 .../src/components/base-button/Component.tsx  |  5 +++-
 packages/checkbox/package.json                |  1 +
 packages/haptics/package.json                 |  1 -
 packages/haptics/src/components/index.ts      |  1 -
 .../haptics/src/docs/Component.stories.tsx    |  5 +---
 packages/haptics/src/hooks/use-haptic.ts      |  8 ++----
 packages/haptics/src/types.ts                 |  1 -
 packages/haptics/tsconfig.build.json          | 18 ++++++++++++-
 packages/haptics/tsconfig.json                | 25 ++++++++++++++++++-
 .../src/types/icon-button-props.ts            |  5 +---
 .../src/components/number-input/Component.tsx | 10 ++++----
 .../src/components/steppers/Component.tsx     | 10 ++++----
 packages/radio/tsconfig.build.json            |  4 +--
 packages/radio/tsconfig.json                  |  4 +--
 yarn.lock                                     |  4 +--
 15 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index 5fae198b5c..f6f19d507a 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -197,7 +197,10 @@ export const BaseButton = forwardRef<
 
             return (
                 <LinkComponent
-                    {...(isNativeAnchor && { Component: 'a', 'data-haptic-preset': dataHapticPreset })}
+                    {...(isNativeAnchor && {
+                        Component: 'a',
+                        'data-haptic-preset': dataHapticPreset,
+                    })}
                     rel={target === '_blank' ? 'noreferrer noopener' : undefined}
                     {...componentProps}
                     {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
index fab4af3817..fd00224f9e 100644
--- a/packages/checkbox/package.json
+++ b/packages/checkbox/package.json
@@ -13,6 +13,7 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
+        "@alfalab/core-components-haptics": "^0.0.1",
         "@alfalab/core-components-shared": "^2.2.0",
         "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
diff --git a/packages/haptics/package.json b/packages/haptics/package.json
index 21ed3a4e5b..6e5b39317a 100644
--- a/packages/haptics/package.json
+++ b/packages/haptics/package.json
@@ -11,7 +11,6 @@
     "module": "./esm/index.js",
     "dependencies": {
         "@alfalab/core-components-config": "^1.1.0",
-        "@alfalab/core-components-shared": "^2.1.1",
         "tslib": "^2.4.0",
         "web-haptics": "^0.0.6"
     },
diff --git a/packages/haptics/src/components/index.ts b/packages/haptics/src/components/index.ts
index b1818046df..4e2e26ba9b 100644
--- a/packages/haptics/src/components/index.ts
+++ b/packages/haptics/src/components/index.ts
@@ -1,4 +1,3 @@
 export { HapticA } from './haptic-a';
 export { HapticButton } from './haptic-button';
 export { HapticInput } from './haptic-input';
-
diff --git a/packages/haptics/src/docs/Component.stories.tsx b/packages/haptics/src/docs/Component.stories.tsx
index b0034b4a82..cb8bacedca 100644
--- a/packages/haptics/src/docs/Component.stories.tsx
+++ b/packages/haptics/src/docs/Component.stories.tsx
@@ -33,10 +33,7 @@ export const haptic: Story = {
         const selectedPreset = select('data-haptic-pattern', PRESETS, 'selection') as HapticPreset;
 
         return (
-            <Haptic
-                disabled={!enabled}
-                data-haptic-preset={selectedPreset}
-            >
+            <Haptic disabled={!enabled} data-haptic-preset={selectedPreset}>
                 Запустить {selectedPreset}
             </Haptic>
         );
diff --git a/packages/haptics/src/hooks/use-haptic.ts b/packages/haptics/src/hooks/use-haptic.ts
index 7c0be19127..44ac5afd44 100644
--- a/packages/haptics/src/hooks/use-haptic.ts
+++ b/packages/haptics/src/hooks/use-haptic.ts
@@ -3,11 +3,7 @@ import { useWebHaptics } from 'web-haptics/react';
 
 import { useCoreConfig } from '@alfalab/core-components-config';
 
-import {
-    type HapticInput,
-    type HapticPresetValue,
-    type TriggerOptions,
-} from '../types';
+import { type HapticInput, type HapticPresetValue, type TriggerOptions } from '../types';
 import { resolveHapticConfig } from '../utils';
 
 type WebHapticsOptions = NonNullable<Parameters<typeof useWebHaptics>[0]>;
@@ -39,7 +35,7 @@ interface UseHapticResponse {
      * Отменяет текущий haptic feedback, если `web-haptics` уже начал проигрывать паттерн.
      */
     cancel: () => void;
-};
+}
 
 /**
  * Хук для ручного запуска haptic feedback.
diff --git a/packages/haptics/src/types.ts b/packages/haptics/src/types.ts
index e56d7af946..40cb7b01ce 100644
--- a/packages/haptics/src/types.ts
+++ b/packages/haptics/src/types.ts
@@ -1,4 +1,3 @@
-
 import { type useWebHaptics } from 'web-haptics/react';
 
 export type HapticPreset =
diff --git a/packages/haptics/tsconfig.build.json b/packages/haptics/tsconfig.build.json
index 26238075e9..6bfbfbf51e 100644
--- a/packages/haptics/tsconfig.build.json
+++ b/packages/haptics/tsconfig.build.json
@@ -1 +1,17 @@
-{"$schema":"https://json.schemastore.org/tsconfig","extends":"@alfalab/core-components-env/tsconfig.base.json","include":["src","src/**/*.json"],"exclude":["**/*.stories.*","**/*.test.*"],"compilerOptions":{"rootDir":"src","outDir":"ts-dist","paths":{"@alfalab/core-components-config":["../config/src"],"@alfalab/core-components-config/*":["../config/src/*"],"@alfalab/core-components-haptics":["./src"],"@alfalab/core-components-haptics/*":["./src/*"],"@alfalab/core-components-shared":["../shared/src"],"@alfalab/core-components-shared/*":["../shared/src/*"]}},"references":[{"path":"../config/tsconfig.build.json"},{"path":"../shared/tsconfig.build.json"}]}
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "extends": "@alfalab/core-components-env/tsconfig.base.json",
+    "include": ["src", "src/**/*.json"],
+    "exclude": ["**/*.stories.*", "**/*.test.*"],
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "ts-dist",
+        "paths": {
+            "@alfalab/core-components-config": ["../config/src"],
+            "@alfalab/core-components-config/*": ["../config/src/*"],
+            "@alfalab/core-components-haptics": ["./src"],
+            "@alfalab/core-components-haptics/*": ["./src/*"]
+        }
+    },
+    "references": [{ "path": "../config/tsconfig.build.json" }]
+}
diff --git a/packages/haptics/tsconfig.json b/packages/haptics/tsconfig.json
index 3486f53214..01be67eaa4 100644
--- a/packages/haptics/tsconfig.json
+++ b/packages/haptics/tsconfig.json
@@ -1 +1,24 @@
-{"$schema":"https://json.schemastore.org/tsconfig","extends":"@alfalab/core-components-env/tsconfig.base.json","include":["src","src/**/*.json"],"compilerOptions":{"rootDir":"src","outDir":"no-dist","paths":{"@alfalab/core-components-config":["../config/src"],"@alfalab/core-components-config/*":["../config/src/*"],"@alfalab/core-components-haptics":["./src"],"@alfalab/core-components-haptics/*":["./src/*"],"@alfalab/core-components-screenshot-utils":["../screenshot-utils/src"],"@alfalab/core-components-screenshot-utils/*":["../screenshot-utils/src/*"],"@alfalab/core-components-shared":["../shared/src"],"@alfalab/core-components-shared/*":["../shared/src/*"],"@alfalab/core-components-test-utils":["../test-utils/src"],"@alfalab/core-components-test-utils/*":["../test-utils/src/*"]}},"references":[{"path":"../config/tsconfig.build.json"},{"path":"../screenshot-utils/tsconfig.build.json"},{"path":"../shared/tsconfig.build.json"},{"path":"../test-utils/tsconfig.build.json"}]}
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "extends": "@alfalab/core-components-env/tsconfig.base.json",
+    "include": ["src", "src/**/*.json", ".eslintrc.cjs"],
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "no-dist",
+        "paths": {
+            "@alfalab/core-components-config": ["../config/src"],
+            "@alfalab/core-components-config/*": ["../config/src/*"],
+            "@alfalab/core-components-haptics": ["./src"],
+            "@alfalab/core-components-haptics/*": ["./src/*"],
+            "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
+            "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
+            "@alfalab/core-components-test-utils": ["../test-utils/src"],
+            "@alfalab/core-components-test-utils/*": ["../test-utils/src/*"]
+        }
+    },
+    "references": [
+        { "path": "../config/tsconfig.build.json" },
+        { "path": "../screenshot-utils/tsconfig.build.json" },
+        { "path": "../test-utils/tsconfig.build.json" }
+    ]
+}
diff --git a/packages/icon-button/src/types/icon-button-props.ts b/packages/icon-button/src/types/icon-button-props.ts
index cdc1f6ca52..84e244e76b 100644
--- a/packages/icon-button/src/types/icon-button-props.ts
+++ b/packages/icon-button/src/types/icon-button-props.ts
@@ -9,10 +9,7 @@ import { type ButtonProps } from '@alfalab/core-components-button';
 
 export interface IconButtonProps
     extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'>,
-        Pick<
-            ButtonProps,
-            'Component' | 'href' | 'loading' | 'breakpoint' | 'data-haptic-preset'
-        >,
+        Pick<ButtonProps, 'Component' | 'href' | 'loading' | 'breakpoint' | 'data-haptic-preset'>,
         Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'download'> {
     /**
      * Компонент иконки
diff --git a/packages/number-input/src/components/number-input/Component.tsx b/packages/number-input/src/components/number-input/Component.tsx
index 6b4cb200f0..1d1332d5d1 100644
--- a/packages/number-input/src/components/number-input/Component.tsx
+++ b/packages/number-input/src/components/number-input/Component.tsx
@@ -13,7 +13,7 @@ import mergeRefs from 'react-merge-refs';
 import { type MaskitoOptions, maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 
-import { type HapticConfig } from '@alfalab/core-components-haptics';
+import { type HapticPresetValue } from '@alfalab/core-components-haptics';
 import { type InputProps } from '@alfalab/core-components-input';
 import { fnUtils, isIOS } from '@alfalab/core-components-shared';
 
@@ -89,10 +89,10 @@ export interface NumberInputProps
     dataTestId?: string;
 
     /**
-     * Haptic-паттерн для кнопок increment/decrement. `false` отключает haptic для конкретного number input
+     * Haptic-пресет или кастомный vibration-конфиг для кнопок increment/decrement.
      * @default selection
      */
-    haptic?: HapticConfig;
+    'data-haptic-preset'?: HapticPresetValue;
 }
 
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
@@ -117,7 +117,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             disableUserInput,
             clear: clearProp,
             colors = 'default',
-            haptic,
+            'data-haptic-preset': dataHapticPreset,
             ...restProps
         },
         ref,
@@ -250,7 +250,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
                         onIncrement={handleIncrement}
                         onDecrement={handleDecrement}
                         size={size}
-                        haptic={haptic}
+                        data-haptic-preset={dataHapticPreset}
                     />
                 )}
             </Fragment>
diff --git a/packages/number-input/src/components/steppers/Component.tsx b/packages/number-input/src/components/steppers/Component.tsx
index 758dec25cb..fcc8001c95 100644
--- a/packages/number-input/src/components/steppers/Component.tsx
+++ b/packages/number-input/src/components/steppers/Component.tsx
@@ -1,7 +1,7 @@
 import React, { type FC } from 'react';
 import cn from 'classnames';
 
-import { type HapticConfig } from '@alfalab/core-components-haptics';
+import { type HapticPresetValue } from '@alfalab/core-components-haptics';
 import { IconButton } from '@alfalab/core-components-icon-button';
 import { type InputProps } from '@alfalab/core-components-input';
 import { getDataTestId } from '@alfalab/core-components-shared';
@@ -26,7 +26,7 @@ export type SteppersProps = {
     dataTestId?: string;
     colors: 'default' | 'inverted';
     size: InputProps['size'];
-    haptic?: HapticConfig;
+    'data-haptic-preset'?: HapticPresetValue;
 };
 
 const colorStyles = {
@@ -62,7 +62,7 @@ export const Steppers: FC<SteppersProps> = ({
     dataTestId,
     colors,
     size = 48,
-    haptic,
+    'data-haptic-preset': dataHapticPreset,
 }) => {
     const decButtonDisabled = disabled || value <= min;
     const incButtonDisabled = disabled || value >= max;
@@ -92,7 +92,7 @@ export const Steppers: FC<SteppersProps> = ({
                 onMouseDown={preventDefault}
                 onClick={onDecrement}
                 dataTestId={getDataTestId(dataTestId, 'decrement-button')}
-                haptic={haptic}
+                data-haptic-preset={dataHapticPreset}
                 view='secondary'
             />
             <div className={cn(styles.separator, colorStyles[colors].separator)} />
@@ -105,7 +105,7 @@ export const Steppers: FC<SteppersProps> = ({
                 onMouseDown={preventDefault}
                 onClick={onIncrement}
                 dataTestId={getDataTestId(dataTestId, 'increment-button')}
-                haptic={haptic}
+                data-haptic-preset={dataHapticPreset}
                 view='secondary'
             />
         </div>
diff --git a/packages/radio/tsconfig.build.json b/packages/radio/tsconfig.build.json
index a8983d836f..9eeaa73cb6 100644
--- a/packages/radio/tsconfig.build.json
+++ b/packages/radio/tsconfig.build.json
@@ -7,10 +7,10 @@
         "rootDir": "src",
         "outDir": "ts-dist",
         "paths": {
-            "@alfalab/core-components-radio": ["./src"],
-            "@alfalab/core-components-radio/*": ["./src/*"],
             "@alfalab/core-components-haptics": ["../haptics/src"],
             "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
+            "@alfalab/core-components-radio": ["./src"],
+            "@alfalab/core-components-radio/*": ["./src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
             "@alfalab/core-components-shared/*": ["../shared/src/*"]
         }
diff --git a/packages/radio/tsconfig.json b/packages/radio/tsconfig.json
index 822f8c7097..84c3e44f2f 100644
--- a/packages/radio/tsconfig.json
+++ b/packages/radio/tsconfig.json
@@ -6,10 +6,10 @@
         "rootDir": "src",
         "outDir": "no-dist",
         "paths": {
-            "@alfalab/core-components-radio": ["./src"],
-            "@alfalab/core-components-radio/*": ["./src/*"],
             "@alfalab/core-components-haptics": ["../haptics/src"],
             "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
+            "@alfalab/core-components-radio": ["./src"],
+            "@alfalab/core-components-radio/*": ["./src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
             "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
diff --git a/yarn.lock b/yarn.lock
index bf8fdf358c..a85653c870 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -409,6 +409,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-checkbox@workspace:packages/checkbox"
   dependencies:
+    "@alfalab/core-components-haptics": "npm:^0.0.1"
     "@alfalab/core-components-shared": "npm:^2.2.0"
     "@alfalab/hooks": "npm:^1.13.1"
     classnames: "npm:^2.5.1"
@@ -822,7 +823,6 @@ __metadata:
   resolution: "@alfalab/core-components-haptics@workspace:packages/haptics"
   dependencies:
     "@alfalab/core-components-config": "npm:^1.1.0"
-    "@alfalab/core-components-shared": "npm:^2.1.1"
     tslib: "npm:^2.4.0"
     web-haptics: "npm:^0.0.6"
   peerDependencies:
@@ -1714,7 +1714,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@alfalab/core-components-shared@npm:^2.1.1, @alfalab/core-components-shared@npm:^2.2.0, @alfalab/core-components-shared@workspace:packages/shared":
+"@alfalab/core-components-shared@npm:^2.2.0, @alfalab/core-components-shared@workspace:packages/shared":
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-shared@workspace:packages/shared"
   dependencies:

From d21d5c6943bcc38f5d7899bb38b8bbb8159874f7 Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Fri, 5 Jun 2026 11:41:59 +0300
Subject: [PATCH 10/12] mini fix

---
 packages/button/src/components/base-button/Component.tsx | 4 +---
 packages/checkbox/package.json                           | 1 -
 packages/checkbox/tsconfig.build.json                    | 3 ---
 3 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index f6f19d507a..66f1d9d46e 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -191,9 +191,7 @@ export const BaseButton = forwardRef<
             const LinkComponent = isNativeAnchor ? Haptic : Component;
 
             // Для совместимости с react-router-dom, меняем href на to
-            const hrefProps = {
-                [Component && typeof Component !== 'string' ? 'to' : 'href']: href,
-            };
+            const hrefProps = { [typeof Component === 'string' ? 'href' : 'to']: href };
 
             return (
                 <LinkComponent
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
index fd00224f9e..ef89439da7 100644
--- a/packages/checkbox/package.json
+++ b/packages/checkbox/package.json
@@ -21,7 +21,6 @@
         "tslib": "^2.4.0"
     },
     "peerDependencies": {
-        "@alfalab/core-components-config": "^1.1.0",
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0",
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0"
     },
diff --git a/packages/checkbox/tsconfig.build.json b/packages/checkbox/tsconfig.build.json
index 573695c9dc..72475f2be2 100644
--- a/packages/checkbox/tsconfig.build.json
+++ b/packages/checkbox/tsconfig.build.json
@@ -9,8 +9,6 @@
         "paths": {
             "@alfalab/core-components-checkbox": ["./src"],
             "@alfalab/core-components-checkbox/*": ["./src/*"],
-            "@alfalab/core-components-config": ["../config/src"],
-            "@alfalab/core-components-config/*": ["../config/src/*"],
             "@alfalab/core-components-haptics": ["../haptics/src"],
             "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
@@ -18,7 +16,6 @@
         }
     },
     "references": [
-        { "path": "../config/tsconfig.build.json" },
         { "path": "../haptics/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" }
     ]

From f194d7ca67bb4cebd3abe31e61cb709536854a16 Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Fri, 5 Jun 2026 12:06:59 +0300
Subject: [PATCH 11/12] fix build

---
 packages/haptics/package.json | 3 +++
 yarn.lock                     | 1 -
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/haptics/package.json b/packages/haptics/package.json
index 6e5b39317a..78ae51d90a 100644
--- a/packages/haptics/package.json
+++ b/packages/haptics/package.json
@@ -9,6 +9,9 @@
     ],
     "main": "index.js",
     "module": "./esm/index.js",
+    "scripts": {
+        "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
+    },
     "dependencies": {
         "@alfalab/core-components-config": "^1.1.0",
         "tslib": "^2.4.0",
diff --git a/yarn.lock b/yarn.lock
index a85653c870..6fd04ba59d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -416,7 +416,6 @@ __metadata:
     react-merge-refs: "npm:^1.1.0"
     tslib: "npm:^2.4.0"
   peerDependencies:
-    "@alfalab/core-components-config": ^1.1.0
     react: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
     react-dom: ^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
   languageName: unknown

From bfd907a6d7f6eb4812c8893cf813885492cb03b2 Mon Sep 17 00:00:00 2001
From: Vadim Kalushko <vakalushko.job@yandex.ru>
Date: Tue, 9 Jun 2026 12:00:18 +0300
Subject: [PATCH 12/12] refactor

---
 .../src/components/base-button/Component.tsx  |  8 +-
 packages/button/src/typings.ts                |  4 +-
 packages/checkbox/src/Component.tsx           |  9 +--
 packages/haptics/src/component.tsx            | 76 -------------------
 .../src/components/haptic-a/Component.tsx     |  2 +-
 .../components/haptic-button/Component.tsx    |  2 +-
 .../src/components/haptic-input/Component.tsx |  2 +-
 .../haptics/src/docs/Component.stories.tsx    | 14 ++--
 packages/haptics/src/docs/description.mdx     | 18 +----
 packages/haptics/src/docs/development.mdx     | 12 +--
 packages/haptics/src/index.ts                 | 11 +--
 packages/haptics/src/types.ts                 |  6 +-
 packages/haptics/src/utils.ts                 | 50 ++++++------
 .../src/components/number-input/Component.tsx |  4 +-
 .../src/components/steppers/Component.tsx     |  4 +-
 packages/radio/src/Component.tsx              |  7 +-
 packages/switch/src/Component.tsx             |  7 +-
 17 files changed, 69 insertions(+), 167 deletions(-)
 delete mode 100644 packages/haptics/src/component.tsx

diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index 66f1d9d46e..12906a94f8 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -10,7 +10,7 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { Haptic } from '@alfalab/core-components-haptics';
+import { HapticA, HapticButton } from '@alfalab/core-components-haptics';
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { Spinner } from '@alfalab/core-components-spinner';
 import { useFocus } from '@alfalab/hooks';
@@ -188,7 +188,7 @@ export const BaseButton = forwardRef<
 
         if (href) {
             const { target } = restProps as AnchorHTMLAttributes<HTMLAnchorElement>;
-            const LinkComponent = isNativeAnchor ? Haptic : Component;
+            const LinkComponent = isNativeAnchor ? HapticA : Component;
 
             // Для совместимости с react-router-dom, меняем href на to
             const hrefProps = { [typeof Component === 'string' ? 'href' : 'to']: href };
@@ -196,7 +196,6 @@ export const BaseButton = forwardRef<
             return (
                 <LinkComponent
                     {...(isNativeAnchor && {
-                        Component: 'a',
                         'data-haptic-preset': dataHapticPreset,
                     })}
                     rel={target === '_blank' ? 'noreferrer noopener' : undefined}
@@ -212,12 +211,11 @@ export const BaseButton = forwardRef<
             );
         }
 
-        const ButtonComponent = isNativeButton ? Haptic : Component;
+        const ButtonComponent = isNativeButton ? HapticButton : Component;
 
         return (
             <ButtonComponent
                 {...(isNativeButton && {
-                    Component: 'button',
                     'data-haptic-preset': dataHapticPreset,
                 })}
                 {...componentProps}
diff --git a/packages/button/src/typings.ts b/packages/button/src/typings.ts
index 9bea5114d5..068d10ae84 100644
--- a/packages/button/src/typings.ts
+++ b/packages/button/src/typings.ts
@@ -5,7 +5,7 @@ import {
     type ReactNode,
 } from 'react';
 
-import { type HapticPresetValue } from '@alfalab/core-components-haptics';
+import { type HapticConfig } from '@alfalab/core-components-haptics';
 
 export type StyleColors = {
     default: {
@@ -120,7 +120,7 @@ type ComponentProps = {
      * Haptic-пресет или кастомный vibration-конфиг для клика по кнопке.
      * @default selection
      */
-    'data-haptic-preset'?: HapticPresetValue;
+    'data-haptic-preset'?: HapticConfig['data-haptic-preset'];
 };
 
 export type PrivateButtonProps = {
diff --git a/packages/checkbox/src/Component.tsx b/packages/checkbox/src/Component.tsx
index 35bc9fb132..df12740da2 100644
--- a/packages/checkbox/src/Component.tsx
+++ b/packages/checkbox/src/Component.tsx
@@ -12,7 +12,7 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { Haptic, type HapticPresetValue } from '@alfalab/core-components-haptics';
+import { type HapticConfig, HapticInput } from '@alfalab/core-components-haptics';
 import { dom, getDataTestId } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 
@@ -160,7 +160,7 @@ export type CheckboxProps = Omit<NativeProps, 'size' | 'onChange' | 'enterKeyHin
      * Haptic-пресет или кастомный vibration-конфиг для переключения чекбокса.
      * @default selection
      */
-    'data-haptic-preset'?: HapticPresetValue;
+    'data-haptic-preset'?: HapticConfig['data-haptic-preset'];
 };
 
 export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
@@ -245,8 +245,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                 ref={mergeRefs([labelRef, ref, labelProps?.ref as Ref<HTMLLabelElement>])}
             >
                 {!hiddenInput && (
-                    <Haptic
-                        Component='input'
+                    <HapticInput
                         data-haptic-preset={dataHapticPreset}
                         type='checkbox'
                         onChange={handleChange}
@@ -254,7 +253,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                         disabled={disabled}
                         checked={checked}
                         data-test-id={dataTestId}
-                        ref={inputRef as unknown as Ref<HTMLElement>}
+                        ref={inputRef}
                         {...restProps}
                     />
                 )}
diff --git a/packages/haptics/src/component.tsx b/packages/haptics/src/component.tsx
deleted file mode 100644
index ce1ba04f2e..0000000000
--- a/packages/haptics/src/component.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, {
-    type AnchorHTMLAttributes,
-    type ButtonHTMLAttributes,
-    type ComponentProps,
-    forwardRef,
-    type InputHTMLAttributes,
-    type Ref,
-} from 'react';
-
-import { HapticA } from './components/haptic-a';
-import { HapticButton } from './components/haptic-button';
-import { HapticInput } from './components/haptic-input';
-import { type HapticPresetValue } from './types';
-
-type HapticButtonProps = Omit<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    'type' | 'data-haptic-pattern'
-> & {
-    Component?: 'button';
-    type?: 'button' | 'submit';
-} & HapticBaseProps;
-
-type HapticAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'data-haptic-pattern'> & {
-    Component: 'a';
-} & HapticBaseProps;
-
-type HapticInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'data-haptic-pattern'> & {
-    Component: 'input';
-} & HapticBaseProps;
-
-export type HapticProps = HapticButtonProps | HapticAnchorProps | HapticInputProps;
-
-export interface HapticBaseProps {
-    /**
-     * Интерактивный элемент, на который навешивается haptic-поведение
-     * @default button
-     */
-    Component?: 'button' | 'a' | 'input';
-
-    /**
-     * Haptic-пресет или кастомный vibration-конфиг. Если не передан, компонент наследует `CoreConfig.haptics`
-     * @default selection
-     */
-    'data-haptic-preset'?: HapticPresetValue;
-}
-
-const HapticFeedback = (props: HapticProps, ref: Ref<HTMLElement>) => {
-    const { Component = 'button', ...restProps } = props;
-
-    const config = {
-        a: (
-            <HapticA
-                {...(restProps as ComponentProps<typeof HapticA>)}
-                ref={ref as unknown as Ref<HTMLAnchorElement>}
-            />
-        ),
-        button: (
-            <HapticButton
-                {...(restProps as ComponentProps<typeof HapticButton>)}
-                ref={ref as unknown as Ref<HTMLButtonElement>}
-            />
-        ),
-        input: (
-            <HapticInput
-                {...(restProps as ComponentProps<typeof HapticInput>)}
-                ref={ref as unknown as Ref<HTMLInputElement>}
-            />
-        ),
-    };
-
-    return config[Component];
-};
-
-export const Haptic = forwardRef<HTMLElement, HapticProps>(HapticFeedback);
-
-Haptic.displayName = 'Haptic';
diff --git a/packages/haptics/src/components/haptic-a/Component.tsx b/packages/haptics/src/components/haptic-a/Component.tsx
index 0984567fcd..89ffa1debc 100644
--- a/packages/haptics/src/components/haptic-a/Component.tsx
+++ b/packages/haptics/src/components/haptic-a/Component.tsx
@@ -1,7 +1,7 @@
 import React, { type AnchorHTMLAttributes, forwardRef, type MouseEvent } from 'react';
 
-import { type HapticBaseProps } from '../../component';
 import { useHaptic } from '../../hooks/use-haptic';
+import { type HapticBaseProps } from '../../types';
 
 type HapticAProps = AnchorHTMLAttributes<HTMLAnchorElement> & HapticBaseProps;
 
diff --git a/packages/haptics/src/components/haptic-button/Component.tsx b/packages/haptics/src/components/haptic-button/Component.tsx
index 02c3a75a04..9414eb5cca 100644
--- a/packages/haptics/src/components/haptic-button/Component.tsx
+++ b/packages/haptics/src/components/haptic-button/Component.tsx
@@ -1,7 +1,7 @@
 import React, { type ButtonHTMLAttributes, forwardRef, type MouseEvent } from 'react';
 
-import { type HapticBaseProps } from '../../component';
 import { useHaptic } from '../../hooks/use-haptic';
+import { type HapticBaseProps } from '../../types';
 
 type HapticButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
     type?: 'button' | 'submit';
diff --git a/packages/haptics/src/components/haptic-input/Component.tsx b/packages/haptics/src/components/haptic-input/Component.tsx
index b77c6364e7..59fd8084aa 100644
--- a/packages/haptics/src/components/haptic-input/Component.tsx
+++ b/packages/haptics/src/components/haptic-input/Component.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 
-import { type HapticBaseProps } from '../../component';
 import { useHaptic } from '../../hooks/use-haptic';
+import { type HapticBaseProps } from '../../types';
 
 type HapticInputProps = InputHTMLAttributes<HTMLInputElement> & HapticBaseProps;
 
diff --git a/packages/haptics/src/docs/Component.stories.tsx b/packages/haptics/src/docs/Component.stories.tsx
index cb8bacedca..4831077e9b 100644
--- a/packages/haptics/src/docs/Component.stories.tsx
+++ b/packages/haptics/src/docs/Component.stories.tsx
@@ -2,17 +2,17 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { boolean, select } from '@storybook/addon-knobs';
 
-import { Haptic } from '@alfalab/core-components-haptics';
+import { HapticButton } from '@alfalab/core-components-haptics';
 
 import type { HapticPreset } from '../types';
 
-const meta: Meta<typeof Haptic> = {
+const meta: Meta<typeof HapticButton> = {
     title: 'Components/Haptic',
-    component: Haptic,
+    component: HapticButton,
     id: 'Haptic',
 };
 
-type Story = StoryObj<typeof Haptic>;
+type Story = StoryObj<typeof HapticButton>;
 
 const PRESETS = [
     'success',
@@ -30,12 +30,12 @@ export const haptic: Story = {
     name: 'Haptic',
     render: () => {
         const enabled = boolean('enabled', true);
-        const selectedPreset = select('data-haptic-pattern', PRESETS, 'selection') as HapticPreset;
+        const selectedPreset = select('data-haptic-preset', PRESETS, 'selection') as HapticPreset;
 
         return (
-            <Haptic disabled={!enabled} data-haptic-preset={selectedPreset}>
+            <HapticButton disabled={!enabled} data-haptic-preset={selectedPreset}>
                 Запустить {selectedPreset}
-            </Haptic>
+            </HapticButton>
         );
     },
 };
diff --git a/packages/haptics/src/docs/description.mdx b/packages/haptics/src/docs/description.mdx
index 9eac146097..36eae4f569 100644
--- a/packages/haptics/src/docs/description.mdx
+++ b/packages/haptics/src/docs/description.mdx
@@ -38,11 +38,7 @@ render(() => {
                                 key={preset}
                                 style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
                             >
-                                <Button
-                                    block={true}
-                                    haptic={{ 'data-haptic-pattern': preset }}
-                                    view='secondary'
-                                >
+                                <Button block={true} data-haptic-preset={preset} view='secondary'>
                                     {label}
                                 </Button>
 
@@ -109,11 +105,7 @@ render(() => {
                                 key={preset}
                                 style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
                             >
-                                <Button
-                                    block={true}
-                                    haptic={{ 'data-haptic-pattern': preset }}
-                                    view='secondary'
-                                >
+                                <Button block={true} data-haptic-preset={preset} view='secondary'>
                                     {label}
                                 </Button>
 
@@ -159,11 +151,7 @@ render(() => {
                                 key={preset}
                                 style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
                             >
-                                <Button
-                                    block={true}
-                                    haptic={{ 'data-haptic-pattern': preset }}
-                                    view='secondary'
-                                >
+                                <Button block={true} data-haptic-preset={preset} view='secondary'>
                                     {label}
                                 </Button>
                             </div>
diff --git a/packages/haptics/src/docs/development.mdx b/packages/haptics/src/docs/development.mdx
index 37892c1a2d..169302f141 100644
--- a/packages/haptics/src/docs/development.mdx
+++ b/packages/haptics/src/docs/development.mdx
@@ -1,19 +1,19 @@
 import { ArgTypes } from '@storybook/addon-docs';
-import { Haptic } from '../index';
+import { HapticButton } from '../index';
 
 ## Подключение
 
 ```jsx
-import { Haptic, useHaptic } from '@alfalab/core-components/haptics';
+import { HapticButton, useHaptic } from '@alfalab/core-components/haptics';
 ```
 
 ## Ручной запуск
 
 ```jsx
-const { triggerHaptic } = useHaptic();
+const { trigger } = useHaptic();
 
-triggerHaptic('success');
-triggerHaptic(
+trigger('success');
+trigger(
     [
         { duration: 12, intensity: 0.4 },
         { delay: 32, duration: 20, intensity: 1 },
@@ -26,4 +26,4 @@ triggerHaptic(
 
 ## Свойства
 
-<ArgTypes of={Haptic} />
+<ArgTypes of={HapticButton} />
diff --git a/packages/haptics/src/index.ts b/packages/haptics/src/index.ts
index ad895f410a..4ae6869c8d 100644
--- a/packages/haptics/src/index.ts
+++ b/packages/haptics/src/index.ts
@@ -1,12 +1,3 @@
-export { Haptic } from './component';
 export { HapticA, HapticButton, HapticInput } from './components';
 export { useHaptic } from './hooks/use-haptic';
-
-export type {
-    HapticConfig,
-    HapticPattern,
-    HapticPreset,
-    HapticPresetValue,
-    HapticTriggerConfig,
-    TriggerOptions,
-} from './types';
+export type { HapticConfig } from './types';
diff --git a/packages/haptics/src/types.ts b/packages/haptics/src/types.ts
index 40cb7b01ce..e3ceb35b63 100644
--- a/packages/haptics/src/types.ts
+++ b/packages/haptics/src/types.ts
@@ -25,6 +25,8 @@ type Vibration = HapticInputPattern[number];
 export type HapticPattern = Vibration[];
 export type HapticPresetValue = HapticPreset | (Partial<Vibration> & { repeat?: number });
 
+export type HapticBaseProps = Pick<HapticConfig, 'data-haptic-preset'>
+
 export interface HapticTriggerConfig {
     enabled?: boolean;
 
@@ -48,10 +50,10 @@ export interface HapticConfig extends HapticTriggerConfig, Partial<Vibration> {
     enabled?: boolean;
 
     /**
-     * Haptic-паттерн
+     * Haptic-пресет или кастомный vibration-конфиг
      * @default selection
      */
-    'data-haptic-pattern'?: HapticPreset;
+    'data-haptic-preset'?: HapticPresetValue;
 
     /**
      * Повтор всего паттерна
diff --git a/packages/haptics/src/utils.ts b/packages/haptics/src/utils.ts
index aae4e628e7..ff490a6172 100644
--- a/packages/haptics/src/utils.ts
+++ b/packages/haptics/src/utils.ts
@@ -21,6 +21,24 @@ const normalizeRepeat = (repeat = DEFAULT_REPEAT) => Math.max(1, Math.floor(repe
 export const repeatHapticPattern = (pattern: HapticPattern, repeat = DEFAULT_REPEAT) =>
     Array.from({ length: normalizeRepeat(repeat) }).flatMap(() => pattern);
 
+const resolvePresetValue = (
+    presetValue: HapticPresetValue,
+): Omit<HapticTriggerConfig, 'pattern'> => {
+    if (typeof presetValue === 'string') {
+        return {
+            input: defaultPatterns[presetValue].pattern as HapticPattern,
+            enabled: true,
+        };
+    }
+
+    const { repeat = DEFAULT_REPEAT, ...vibration } = presetValue;
+
+    return {
+        input: repeatHapticPattern([vibration] as HapticPattern, repeat),
+        enabled: true,
+    };
+};
+
 export type ResolveHapticConfigParams = {
     /**
      * Локальный haptic-пресет, переданный в компонент.
@@ -50,38 +68,22 @@ export const resolveHapticConfig = ({
 
     if (!hasLocalPreset && global?.enabled !== true) return null;
 
-    if (typeof dataHapticPreset === 'string') {
-        return {
-            input: defaultPatterns[dataHapticPreset].pattern as HapticPattern,
-            enabled: true,
-        };
+    if (dataHapticPreset !== undefined) {
+        return resolvePresetValue(dataHapticPreset);
     }
 
-    if (dataHapticPreset) {
-        const { repeat = DEFAULT_REPEAT, ...vibration } = dataHapticPreset;
+    if (global?.enabled === false) return null;
 
-        return {
-            input: repeatHapticPattern([vibration] as HapticPattern, repeat),
-            enabled: true,
-        };
+    if (global?.['data-haptic-preset'] !== undefined) {
+        return resolvePresetValue(global['data-haptic-preset']);
     }
 
-    const {
-        input,
-        pattern,
-        options,
-        intensity,
-        repeat = DEFAULT_REPEAT,
-        'data-haptic-pattern': preset = DEFAULT_PRESET,
-        enabled: resolvedEnabled,
-    } = global ?? {};
-
-    if (resolvedEnabled === false) return null;
+    const { input, pattern, options, intensity, repeat = DEFAULT_REPEAT } = global ?? {};
 
     const inputFromGlobal =
         input ??
         pattern ??
-        repeatHapticPattern(defaultPatterns[preset].pattern as HapticPattern, repeat);
+        repeatHapticPattern(defaultPatterns[DEFAULT_PRESET].pattern as HapticPattern, repeat);
     const optionsFromGlobal =
         options || intensity !== undefined
             ? {
@@ -93,6 +95,6 @@ export const resolveHapticConfig = ({
     return {
         input: inputFromGlobal,
         options: optionsFromGlobal,
-        enabled: resolvedEnabled === true,
+        enabled: global?.enabled === true,
     };
 };
diff --git a/packages/number-input/src/components/number-input/Component.tsx b/packages/number-input/src/components/number-input/Component.tsx
index 1d1332d5d1..8aa99f60e5 100644
--- a/packages/number-input/src/components/number-input/Component.tsx
+++ b/packages/number-input/src/components/number-input/Component.tsx
@@ -13,7 +13,7 @@ import mergeRefs from 'react-merge-refs';
 import { type MaskitoOptions, maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 
-import { type HapticPresetValue } from '@alfalab/core-components-haptics';
+import { type HapticConfig } from '@alfalab/core-components-haptics';
 import { type InputProps } from '@alfalab/core-components-input';
 import { fnUtils, isIOS } from '@alfalab/core-components-shared';
 
@@ -92,7 +92,7 @@ export interface NumberInputProps
      * Haptic-пресет или кастомный vibration-конфиг для кнопок increment/decrement.
      * @default selection
      */
-    'data-haptic-preset'?: HapticPresetValue;
+    'data-haptic-preset'?: HapticConfig['data-haptic-preset'];
 }
 
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
diff --git a/packages/number-input/src/components/steppers/Component.tsx b/packages/number-input/src/components/steppers/Component.tsx
index fcc8001c95..0f116aebc1 100644
--- a/packages/number-input/src/components/steppers/Component.tsx
+++ b/packages/number-input/src/components/steppers/Component.tsx
@@ -1,7 +1,7 @@
 import React, { type FC } from 'react';
 import cn from 'classnames';
 
-import { type HapticPresetValue } from '@alfalab/core-components-haptics';
+import { type HapticConfig } from '@alfalab/core-components-haptics';
 import { IconButton } from '@alfalab/core-components-icon-button';
 import { type InputProps } from '@alfalab/core-components-input';
 import { getDataTestId } from '@alfalab/core-components-shared';
@@ -26,7 +26,7 @@ export type SteppersProps = {
     dataTestId?: string;
     colors: 'default' | 'inverted';
     size: InputProps['size'];
-    'data-haptic-preset'?: HapticPresetValue;
+    'data-haptic-preset'?: HapticConfig['data-haptic-preset'];
 };
 
 const colorStyles = {
diff --git a/packages/radio/src/Component.tsx b/packages/radio/src/Component.tsx
index d495427cb7..80721bbe94 100644
--- a/packages/radio/src/Component.tsx
+++ b/packages/radio/src/Component.tsx
@@ -11,7 +11,7 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { Haptic, type HapticPresetValue } from '@alfalab/core-components-haptics';
+import { type HapticConfig, HapticInput } from '@alfalab/core-components-haptics';
 import { dom } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 
@@ -123,7 +123,7 @@ export type RadioProps = Omit<
      * Haptic-пресет или кастомный vibration-конфиг для выбора radio.
      * @default selection
      */
-    'data-haptic-preset'?: HapticPresetValue;
+    'data-haptic-preset'?: HapticConfig['data-haptic-preset'];
 };
 
 export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
@@ -183,8 +183,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
                 )}
                 ref={mergeRefs([labelRef, ref, labelProps?.ref as Ref<HTMLLabelElement>])}
             >
-                <Haptic
-                    Component='input'
+                <HapticInput
                     type='radio'
                     onChange={handleChange}
                     data-test-id={dataTestId}
diff --git a/packages/switch/src/Component.tsx b/packages/switch/src/Component.tsx
index 2c3c4f9985..5dd5bef604 100644
--- a/packages/switch/src/Component.tsx
+++ b/packages/switch/src/Component.tsx
@@ -8,7 +8,7 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { Haptic, type HapticPresetValue } from '@alfalab/core-components-haptics';
+import { type HapticConfig, HapticInput } from '@alfalab/core-components-haptics';
 import { dom } from '@alfalab/core-components-shared';
 import { Skeleton } from '@alfalab/core-components-skeleton';
 import { useFocus } from '@alfalab/hooks';
@@ -107,7 +107,7 @@ export type SwitchProps = Omit<
      * Haptic-пресет или кастомный vibration-конфиг для переключения switch.
      * @default selection
      */
-    'data-haptic-preset'?: HapticPresetValue;
+    'data-haptic-preset'?: HapticConfig['data-haptic-preset'];
 };
 
 export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
@@ -161,8 +161,7 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
                 })}
                 ref={mergeRefs([labelRef, ref])}
             >
-                <Haptic
-                    Component='input'
+                <HapticInput
                     type='checkbox'
                     onChange={handleChange}
                     disabled={disabled}