@intlayer/design-system 6.1.3 → 6.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/dist/.vite/manifest.json +62 -7
  2. package/dist/components/DictionaryFieldEditor/ContentEditorView/TextEditor.cjs +2 -2
  3. package/dist/components/DictionaryFieldEditor/ContentEditorView/TextEditor.cjs.map +1 -1
  4. package/dist/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs +1 -1
  5. package/dist/components/DictionaryFieldEditor/VersionSwitcherDropDown/versionSwitcherDropDown.content.cjs +2 -1
  6. package/dist/components/DictionaryFieldEditor/VersionSwitcherDropDown/versionSwitcherDropDown.content.cjs.map +1 -1
  7. package/dist/components/ExpandCollapse/expandCollapse.content.cjs +2 -1
  8. package/dist/components/ExpandCollapse/expandCollapse.content.cjs.map +1 -1
  9. package/dist/components/Headers/index.cjs +12 -0
  10. package/dist/components/Headers/index.cjs.map +1 -1
  11. package/dist/components/Headers/index.d.ts +1 -0
  12. package/dist/components/Headers/index.d.ts.map +1 -1
  13. package/dist/components/Headers/index.mjs +13 -1
  14. package/dist/components/Headers/index.mjs.map +1 -1
  15. package/dist/components/IDE/Code.cjs +1 -1
  16. package/dist/components/IDE/Code.cjs.map +1 -1
  17. package/dist/components/IDE/Code.mjs +1 -1
  18. package/dist/components/IDE/Code.mjs.map +1 -1
  19. package/dist/components/IDE/code.content.cjs +2 -1
  20. package/dist/components/IDE/code.content.cjs.map +1 -1
  21. package/dist/components/IDE/copyCode.content.cjs +2 -1
  22. package/dist/components/IDE/copyCode.content.cjs.map +1 -1
  23. package/dist/components/LocaleSwitcherContentDropDown/localeSwitcher.content.cjs +2 -1
  24. package/dist/components/LocaleSwitcherContentDropDown/localeSwitcher.content.cjs.map +1 -1
  25. package/dist/components/LocaleSwitcherDropDown/localeSwitcher.content.cjs +2 -1
  26. package/dist/components/LocaleSwitcherDropDown/localeSwitcher.content.cjs.map +1 -1
  27. package/dist/components/MarkDownRender/MarkDownRender.cjs +188 -0
  28. package/dist/components/MarkDownRender/MarkDownRender.cjs.map +1 -0
  29. package/dist/components/MarkDownRender/MarkDownRender.d.ts +12 -0
  30. package/dist/components/MarkDownRender/MarkDownRender.d.ts.map +1 -0
  31. package/dist/components/MarkDownRender/MarkDownRender.mjs +188 -0
  32. package/dist/components/MarkDownRender/MarkDownRender.mjs.map +1 -0
  33. package/dist/components/MarkDownRender/index.cjs +2 -150
  34. package/dist/components/MarkDownRender/index.cjs.map +1 -1
  35. package/dist/components/MarkDownRender/index.d.ts +1 -11
  36. package/dist/components/MarkDownRender/index.d.ts.map +1 -1
  37. package/dist/components/MarkDownRender/index.mjs +1 -149
  38. package/dist/components/MarkDownRender/index.mjs.map +1 -1
  39. package/dist/components/MarkDownRender/processer.cjs +1619 -0
  40. package/dist/components/MarkDownRender/processer.cjs.map +1 -0
  41. package/dist/components/MarkDownRender/processer.d.ts +368 -0
  42. package/dist/components/MarkDownRender/processer.d.ts.map +1 -0
  43. package/dist/components/MarkDownRender/processer.mjs +1619 -0
  44. package/dist/components/MarkDownRender/processer.mjs.map +1 -0
  45. package/dist/components/Tab/Tab.cjs +171 -0
  46. package/dist/components/Tab/Tab.cjs.map +1 -0
  47. package/dist/components/Tab/Tab.d.ts +24 -0
  48. package/dist/components/Tab/Tab.d.ts.map +1 -0
  49. package/dist/components/Tab/Tab.mjs +171 -0
  50. package/dist/components/Tab/Tab.mjs.map +1 -0
  51. package/dist/components/Tab/TabContext.cjs +28 -0
  52. package/dist/components/Tab/TabContext.cjs.map +1 -0
  53. package/dist/components/Tab/TabContext.d.ts +19 -0
  54. package/dist/components/Tab/TabContext.d.ts.map +1 -0
  55. package/dist/components/Tab/TabContext.mjs +28 -0
  56. package/dist/components/Tab/TabContext.mjs.map +1 -0
  57. package/dist/components/Tab/index.cjs +5 -0
  58. package/dist/components/Tab/index.cjs.map +1 -0
  59. package/dist/components/Tab/index.d.ts +2 -0
  60. package/dist/components/Tab/index.d.ts.map +1 -0
  61. package/dist/components/Tab/index.mjs +5 -0
  62. package/dist/components/Tab/index.mjs.map +1 -0
  63. package/dist/components/TabSelector/TabSelector.cjs +6 -1
  64. package/dist/components/TabSelector/TabSelector.cjs.map +1 -1
  65. package/dist/components/TabSelector/TabSelector.d.ts +1 -1
  66. package/dist/components/TabSelector/TabSelector.d.ts.map +1 -1
  67. package/dist/components/TabSelector/TabSelector.mjs +6 -1
  68. package/dist/components/TabSelector/TabSelector.mjs.map +1 -1
  69. package/dist/components/Table/Table.cjs +15 -8
  70. package/dist/components/Table/Table.cjs.map +1 -1
  71. package/dist/components/Table/Table.d.ts.map +1 -1
  72. package/dist/components/Table/Table.mjs +15 -8
  73. package/dist/components/Table/Table.mjs.map +1 -1
  74. package/dist/components/Table/table.content.cjs +2 -1
  75. package/dist/components/Table/table.content.cjs.map +1 -1
  76. package/dist/components/index.cjs +5 -2
  77. package/dist/components/index.cjs.map +1 -1
  78. package/dist/components/index.d.ts +1 -0
  79. package/dist/components/index.d.ts.map +1 -1
  80. package/dist/components/index.mjs +5 -2
  81. package/dist/components/index.mjs.map +1 -1
  82. package/dist/hooks/index.cjs +2 -0
  83. package/dist/hooks/index.cjs.map +1 -1
  84. package/dist/hooks/index.d.ts +1 -0
  85. package/dist/hooks/index.d.ts.map +1 -1
  86. package/dist/hooks/index.mjs +2 -0
  87. package/dist/hooks/index.mjs.map +1 -1
  88. package/dist/hooks/useHorizontalSwipe.cjs +144 -0
  89. package/dist/hooks/useHorizontalSwipe.cjs.map +1 -0
  90. package/dist/hooks/useHorizontalSwipe.d.ts +26 -0
  91. package/dist/hooks/useHorizontalSwipe.d.ts.map +1 -0
  92. package/dist/hooks/useHorizontalSwipe.mjs +144 -0
  93. package/dist/hooks/useHorizontalSwipe.mjs.map +1 -0
  94. package/package.json +44 -19
@@ -41,6 +41,7 @@ export * from './RightDrawer';
41
41
  export * from './Select';
42
42
  export * from './SocialNetworks';
43
43
  export * from './SwitchSelector';
44
+ export * from './Tab';
44
45
  export * from './TabSelector';
45
46
  export * from './Tag';
46
47
  export * from './TextArea';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC;AACxC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC;AACxC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}
@@ -23,7 +23,7 @@ import { Footer } from "./Footer/index.mjs";
23
23
  import { useForm } from "./Form/FormBase.mjs";
24
24
  import { useFormField } from "./Form/FormField.mjs";
25
25
  import { F } from "../Form-CriPBaZk.js";
26
- import { H1, H2, H3, H4, H5 } from "./Headers/index.mjs";
26
+ import { H1, H2, H3, H4, H5, H6 } from "./Headers/index.mjs";
27
27
  import { HeightResizer } from "./HeightResizer/index.mjs";
28
28
  import { Code } from "./IDE/Code.mjs";
29
29
  import { IDE } from "./IDE/IDE.mjs";
@@ -43,7 +43,7 @@ import { Logo } from "./Logo/Logo.mjs";
43
43
  import { LogoTextOnly } from "./Logo/LogoTextOnly.mjs";
44
44
  import { LogoWithText } from "./Logo/LogoWithText.mjs";
45
45
  import { LogoWithTextBelow } from "./Logo/LogoWithTextBelow.mjs";
46
- import { MarkdownRenderer } from "./MarkDownRender/index.mjs";
46
+ import { MarkdownRenderer } from "./MarkDownRender/MarkDownRender.mjs";
47
47
  import { MaxHeightSmoother } from "./MaxHeightSmoother/index.mjs";
48
48
  import { MaxWidthSmoother } from "./MaxWidthSmoother/index.mjs";
49
49
  import { Modal, ModalSize } from "./Modal/Modal.mjs";
@@ -59,6 +59,7 @@ import { MultiSelect } from "./Select/Multiselect.mjs";
59
59
  import { Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator } from "./Select/Select.mjs";
60
60
  import { SocialNetworks } from "./SocialNetworks/index.mjs";
61
61
  import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "./SwitchSelector/index.mjs";
62
+ import { Tab } from "./Tab/Tab.mjs";
62
63
  import { TabSelector, TabSelectorColor } from "./TabSelector/TabSelector.mjs";
63
64
  import { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize } from "./Tag/index.mjs";
64
65
  import { AutoSizedTextArea } from "./TextArea/AutoSizeTextArea.mjs";
@@ -134,6 +135,7 @@ export {
134
135
  H3,
135
136
  H4,
136
137
  H5,
138
+ H6,
137
139
  HeightResizer,
138
140
  IDE,
139
141
  InformationTag,
@@ -182,6 +184,7 @@ export {
182
184
  SwitchSelector,
183
185
  SwitchSelectorColor,
184
186
  SwitchSelectorSize,
187
+ Tab,
185
188
  TabSelector,
186
189
  TabSelectorColor,
187
190
  Tag,
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -7,6 +7,7 @@ const hooks_useAuth_useOAuth2 = require("./useAuth/useOAuth2.cjs");
7
7
  const hooks_useAuth_useSession = require("./useAuth/useSession.cjs");
8
8
  const hooks_useDevice = require("./useDevice.cjs");
9
9
  const hooks_useGetElementOrWindow = require("./useGetElementOrWindow.cjs");
10
+ const hooks_useHorizontalSwipe = require("./useHorizontalSwipe.cjs");
10
11
  const hooks_useIsDarkMode = require("./useIsDarkMode.cjs");
11
12
  const hooks_useIsMounted = require("./useIsMounted.cjs");
12
13
  const hooks_useItemSelector = require("./useItemSelector.cjs");
@@ -87,6 +88,7 @@ exports.checkIsMobileUserAgent = hooks_useDevice.checkIsMobileUserAgent;
87
88
  exports.getBreakpointFromSize = hooks_useDevice.getBreakpointFromSize;
88
89
  exports.useDevice = hooks_useDevice.useDevice;
89
90
  exports.useGetElementOrWindow = hooks_useGetElementOrWindow.useGetElementOrWindow;
91
+ exports.useHorizontalSwipe = hooks_useHorizontalSwipe.useHorizontalSwipe;
90
92
  exports.useIsDarkMode = hooks_useIsDarkMode.useIsDarkMode;
91
93
  exports.useIsMounted = hooks_useIsMounted.useIsMounted;
92
94
  exports.useItemSelector = hooks_useItemSelector.useItemSelector;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -3,6 +3,7 @@ export * from './reactQuery';
3
3
  export * from './useAuth';
4
4
  export * from './useDevice';
5
5
  export * from './useGetElementOrWindow';
6
+ export * from './useHorizontalSwipe';
6
7
  export * from './useIsDarkMode';
7
8
  export * from './useIsMounted';
8
9
  export * from './useItemSelector';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC"}
@@ -5,6 +5,7 @@ import { useOAuth2 } from "./useAuth/useOAuth2.mjs";
5
5
  import { useSession } from "./useAuth/useSession.mjs";
6
6
  import { calculateIsMobile, checkIsIphoneOrSafariDevice, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
7
7
  import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
8
+ import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
8
9
  import { useIsDarkMode } from "./useIsDarkMode.mjs";
9
10
  import { useIsMounted } from "./useIsMounted.mjs";
10
11
  import { useItemSelector } from "./useItemSelector.mjs";
@@ -61,6 +62,7 @@ export {
61
62
  useGetUserByAccount,
62
63
  useGetUsers,
63
64
  useGetVerifyEmailStatus,
65
+ useHorizontalSwipe,
64
66
  useIsDarkMode,
65
67
  useIsMounted,
66
68
  useItemSelector,
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,144 @@
1
+ "use client";
2
+ "use strict";
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
+ const ReactExports = require("react");
5
+ const useHorizontalSwipe = (config) => {
6
+ const {
7
+ enable = true,
8
+ onSwipeLeft,
9
+ onSwipeRight,
10
+ itemIndex,
11
+ itemCount,
12
+ thresholdPct = 20,
13
+ touchAction = "pan-y",
14
+ disableWhenSelectingText = true
15
+ } = config;
16
+ const containerRef = ReactExports.useRef(null);
17
+ const [isDragging, setIsDragging] = ReactExports.useState(false);
18
+ const [dragDeltaPct, setDragDeltaPct] = ReactExports.useState(0);
19
+ const pointerStateRef = ReactExports.useRef({
20
+ pointerId: null,
21
+ startX: 0,
22
+ startY: 0,
23
+ lastX: 0,
24
+ axisLocked: false,
25
+ isHorizontal: false
26
+ });
27
+ const isTextSelectingRef = ReactExports.useRef(false);
28
+ const getContainerWidth = () => {
29
+ const node = containerRef.current;
30
+ return node ? node.clientWidth : 0;
31
+ };
32
+ const applyEdgeResistance = (pct) => {
33
+ const atFirst = itemIndex <= 0;
34
+ const atLast = itemIndex >= itemCount - 1;
35
+ if (atFirst && pct > 0 || atLast && pct < 0) {
36
+ const magnitude = Math.abs(pct);
37
+ const resistance = 1 + magnitude / 30;
38
+ return pct / resistance;
39
+ }
40
+ return pct;
41
+ };
42
+ const onPointerDown = (e) => {
43
+ if (!enable) return;
44
+ if (pointerStateRef.current.pointerId !== null) return;
45
+ pointerStateRef.current.pointerId = e.pointerId;
46
+ pointerStateRef.current.startX = e.clientX;
47
+ pointerStateRef.current.startY = e.clientY;
48
+ pointerStateRef.current.lastX = e.clientX;
49
+ pointerStateRef.current.axisLocked = false;
50
+ pointerStateRef.current.isHorizontal = false;
51
+ isTextSelectingRef.current = false;
52
+ setIsDragging(false);
53
+ setDragDeltaPct(0);
54
+ try {
55
+ e.currentTarget.setPointerCapture(e.pointerId);
56
+ } catch {
57
+ }
58
+ };
59
+ const onPointerMove = (e) => {
60
+ if (!enable) return;
61
+ if (pointerStateRef.current.pointerId !== e.pointerId) return;
62
+ const width = getContainerWidth();
63
+ if (!width) return;
64
+ const dx = e.clientX - pointerStateRef.current.startX;
65
+ const dy = e.clientY - pointerStateRef.current.startY;
66
+ if (disableWhenSelectingText) {
67
+ const sel = typeof window !== "undefined" ? window.getSelection?.() : null;
68
+ const isSelecting = !!sel && sel.rangeCount > 0 && !sel.isCollapsed;
69
+ if (isSelecting) {
70
+ isTextSelectingRef.current = true;
71
+ return;
72
+ }
73
+ }
74
+ if (!pointerStateRef.current.axisLocked) {
75
+ const absDx = Math.abs(dx);
76
+ const absDy = Math.abs(dy);
77
+ if (absDx > 6 || absDy > 6) {
78
+ pointerStateRef.current.axisLocked = true;
79
+ pointerStateRef.current.isHorizontal = absDx > absDy;
80
+ }
81
+ }
82
+ if (!pointerStateRef.current.isHorizontal) {
83
+ return;
84
+ }
85
+ e.preventDefault();
86
+ if (!isDragging) setIsDragging(true);
87
+ const pct = dx / width * 100;
88
+ setDragDeltaPct(applyEdgeResistance(pct));
89
+ pointerStateRef.current.lastX = e.clientX;
90
+ };
91
+ const endDrag = (e) => {
92
+ try {
93
+ e.currentTarget.releasePointerCapture(e.pointerId);
94
+ } catch {
95
+ }
96
+ const wasHorizontal = pointerStateRef.current.isHorizontal;
97
+ const delta = dragDeltaPct;
98
+ setIsDragging(false);
99
+ setDragDeltaPct(0);
100
+ pointerStateRef.current.pointerId = null;
101
+ pointerStateRef.current.axisLocked = false;
102
+ pointerStateRef.current.isHorizontal = false;
103
+ if (isTextSelectingRef.current) {
104
+ isTextSelectingRef.current = false;
105
+ return;
106
+ }
107
+ if (!wasHorizontal) return;
108
+ if (delta > thresholdPct) {
109
+ onSwipeRight?.();
110
+ } else if (delta < -thresholdPct) {
111
+ onSwipeLeft?.();
112
+ }
113
+ };
114
+ const onPointerUp = (e) => {
115
+ if (!enable) return;
116
+ if (pointerStateRef.current.pointerId !== e.pointerId) return;
117
+ endDrag(e);
118
+ };
119
+ const onPointerCancel = (e) => {
120
+ if (!enable) return;
121
+ if (pointerStateRef.current.pointerId !== e.pointerId) return;
122
+ endDrag(e);
123
+ };
124
+ ReactExports.useEffect(() => {
125
+ setDragDeltaPct(0);
126
+ setIsDragging(false);
127
+ }, [itemIndex]);
128
+ const style = { touchAction };
129
+ return {
130
+ containerRef,
131
+ isDragging,
132
+ dragDeltaPct,
133
+ containerProps: {
134
+ ref: containerRef,
135
+ onPointerDown,
136
+ onPointerMove,
137
+ onPointerUp,
138
+ onPointerCancel,
139
+ style
140
+ }
141
+ };
142
+ };
143
+ exports.useHorizontalSwipe = useHorizontalSwipe;
144
+ //# sourceMappingURL=useHorizontalSwipe.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useHorizontalSwipe.cjs","sources":["../../src/hooks/useHorizontalSwipe.ts"],"sourcesContent":["'use client';\n\nimport {\n useEffect,\n useRef,\n useState,\n type CSSProperties,\n type PointerEvent,\n type PointerEventHandler,\n type RefObject,\n} from 'react';\n\nexport type HorizontalSwipeConfig = {\n onSwipeLeft?: () => void; // move to next item\n onSwipeRight?: () => void; // move to previous item\n enable?: boolean;\n itemIndex: number;\n itemCount: number;\n thresholdPct?: number; // percentage of width required to trigger\n touchAction?: string; // CSS touch-action for the container, defaults to 'pan-y'\n disableWhenSelectingText?: boolean; // if true, do not swipe while text selection is active\n};\n\nexport type HorizontalSwipeHook = {\n containerRef: RefObject<HTMLDivElement>;\n isDragging: boolean;\n dragDeltaPct: number;\n containerProps: {\n ref: RefObject<HTMLDivElement>;\n onPointerDown: PointerEventHandler<HTMLDivElement>;\n onPointerMove: PointerEventHandler<HTMLDivElement>;\n onPointerUp: PointerEventHandler<HTMLDivElement>;\n onPointerCancel: PointerEventHandler<HTMLDivElement>;\n style: CSSProperties;\n };\n};\n\nexport const useHorizontalSwipe = (\n config: HorizontalSwipeConfig\n): HorizontalSwipeHook => {\n const {\n enable = true,\n onSwipeLeft,\n onSwipeRight,\n itemIndex,\n itemCount,\n thresholdPct = 20,\n touchAction = 'pan-y',\n disableWhenSelectingText = true,\n } = config;\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [dragDeltaPct, setDragDeltaPct] = useState(0);\n const pointerStateRef = useRef<{\n pointerId: number | null;\n startX: number;\n startY: number;\n lastX: number;\n axisLocked: boolean;\n isHorizontal: boolean;\n }>({\n pointerId: null,\n startX: 0,\n startY: 0,\n lastX: 0,\n axisLocked: false,\n isHorizontal: false,\n });\n\n const isTextSelectingRef = useRef<boolean>(false);\n\n const getContainerWidth = () => {\n const node = containerRef.current;\n return node ? node.clientWidth : 0;\n };\n\n const applyEdgeResistance = (pct: number) => {\n const atFirst = itemIndex <= 0;\n const atLast = itemIndex >= itemCount - 1;\n\n if ((atFirst && pct > 0) || (atLast && pct < 0)) {\n const magnitude = Math.abs(pct);\n const resistance = 1 + magnitude / 30;\n return pct / resistance;\n }\n\n return pct;\n };\n\n const onPointerDown: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== null) return;\n pointerStateRef.current.pointerId = e.pointerId;\n pointerStateRef.current.startX = e.clientX;\n pointerStateRef.current.startY = e.clientY;\n pointerStateRef.current.lastX = e.clientX;\n pointerStateRef.current.axisLocked = false;\n pointerStateRef.current.isHorizontal = false;\n isTextSelectingRef.current = false;\n setIsDragging(false);\n setDragDeltaPct(0);\n try {\n (\n e.currentTarget as Element & { setPointerCapture: (id: number) => void }\n ).setPointerCapture(e.pointerId);\n } catch {}\n };\n\n const onPointerMove: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n\n const width = getContainerWidth();\n if (!width) return;\n\n const dx = e.clientX - pointerStateRef.current.startX;\n const dy = e.clientY - pointerStateRef.current.startY;\n\n // If user is selecting text, do not engage swipe\n if (disableWhenSelectingText) {\n const sel =\n typeof window !== 'undefined' ? window.getSelection?.() : null;\n const isSelecting = !!sel && sel.rangeCount > 0 && !sel.isCollapsed;\n if (isSelecting) {\n isTextSelectingRef.current = true;\n return;\n }\n }\n\n if (!pointerStateRef.current.axisLocked) {\n const absDx = Math.abs(dx);\n const absDy = Math.abs(dy);\n if (absDx > 6 || absDy > 6) {\n pointerStateRef.current.axisLocked = true;\n pointerStateRef.current.isHorizontal = absDx > absDy;\n }\n }\n\n if (!pointerStateRef.current.isHorizontal) {\n return;\n }\n\n e.preventDefault();\n\n if (!isDragging) setIsDragging(true);\n\n const pct = (dx / width) * 100;\n setDragDeltaPct(applyEdgeResistance(pct));\n pointerStateRef.current.lastX = e.clientX;\n };\n\n const endDrag = (e: PointerEvent<HTMLDivElement>) => {\n try {\n (\n e.currentTarget as Element & {\n releasePointerCapture: (id: number) => void;\n }\n ).releasePointerCapture(e.pointerId);\n } catch {}\n\n const wasHorizontal = pointerStateRef.current.isHorizontal;\n const delta = dragDeltaPct;\n\n setIsDragging(false);\n setDragDeltaPct(0);\n pointerStateRef.current.pointerId = null;\n pointerStateRef.current.axisLocked = false;\n pointerStateRef.current.isHorizontal = false;\n\n if (isTextSelectingRef.current) {\n isTextSelectingRef.current = false;\n return;\n }\n\n if (!wasHorizontal) return;\n\n if (delta > thresholdPct) {\n onSwipeRight?.();\n } else if (delta < -thresholdPct) {\n onSwipeLeft?.();\n }\n };\n\n const onPointerUp: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n endDrag(e);\n };\n\n const onPointerCancel: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n endDrag(e);\n };\n\n useEffect(() => {\n setDragDeltaPct(0);\n setIsDragging(false);\n }, [itemIndex]);\n\n const style: CSSProperties = { touchAction };\n\n return {\n containerRef: containerRef as RefObject<HTMLDivElement>,\n isDragging,\n dragDeltaPct,\n containerProps: {\n ref: containerRef as RefObject<HTMLDivElement>,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n onPointerCancel,\n style,\n },\n };\n};\n"],"names":["useRef","useState","useEffect"],"mappings":"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"}
@@ -0,0 +1,26 @@
1
+ import { CSSProperties, PointerEventHandler, RefObject } from 'react';
2
+ export type HorizontalSwipeConfig = {
3
+ onSwipeLeft?: () => void;
4
+ onSwipeRight?: () => void;
5
+ enable?: boolean;
6
+ itemIndex: number;
7
+ itemCount: number;
8
+ thresholdPct?: number;
9
+ touchAction?: string;
10
+ disableWhenSelectingText?: boolean;
11
+ };
12
+ export type HorizontalSwipeHook = {
13
+ containerRef: RefObject<HTMLDivElement>;
14
+ isDragging: boolean;
15
+ dragDeltaPct: number;
16
+ containerProps: {
17
+ ref: RefObject<HTMLDivElement>;
18
+ onPointerDown: PointerEventHandler<HTMLDivElement>;
19
+ onPointerMove: PointerEventHandler<HTMLDivElement>;
20
+ onPointerUp: PointerEventHandler<HTMLDivElement>;
21
+ onPointerCancel: PointerEventHandler<HTMLDivElement>;
22
+ style: CSSProperties;
23
+ };
24
+ };
25
+ export declare const useHorizontalSwipe: (config: HorizontalSwipeConfig) => HorizontalSwipeHook;
26
+ //# sourceMappingURL=useHorizontalSwipe.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useHorizontalSwipe.d.ts","sourceRoot":"","sources":["../../src/hooks/useHorizontalSwipe.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,aAAa,EAElB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE;QACd,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;QAC/B,aAAa,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACnD,aAAa,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACnD,WAAW,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACjD,eAAe,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACrD,KAAK,EAAE,aAAa,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,qBAAqB,KAC5B,mBAiLF,CAAC"}
@@ -0,0 +1,144 @@
1
+ "use client";
2
+ import { useRef, useState, useEffect } from "react";
3
+ const useHorizontalSwipe = (config) => {
4
+ const {
5
+ enable = true,
6
+ onSwipeLeft,
7
+ onSwipeRight,
8
+ itemIndex,
9
+ itemCount,
10
+ thresholdPct = 20,
11
+ touchAction = "pan-y",
12
+ disableWhenSelectingText = true
13
+ } = config;
14
+ const containerRef = useRef(null);
15
+ const [isDragging, setIsDragging] = useState(false);
16
+ const [dragDeltaPct, setDragDeltaPct] = useState(0);
17
+ const pointerStateRef = useRef({
18
+ pointerId: null,
19
+ startX: 0,
20
+ startY: 0,
21
+ lastX: 0,
22
+ axisLocked: false,
23
+ isHorizontal: false
24
+ });
25
+ const isTextSelectingRef = useRef(false);
26
+ const getContainerWidth = () => {
27
+ const node = containerRef.current;
28
+ return node ? node.clientWidth : 0;
29
+ };
30
+ const applyEdgeResistance = (pct) => {
31
+ const atFirst = itemIndex <= 0;
32
+ const atLast = itemIndex >= itemCount - 1;
33
+ if (atFirst && pct > 0 || atLast && pct < 0) {
34
+ const magnitude = Math.abs(pct);
35
+ const resistance = 1 + magnitude / 30;
36
+ return pct / resistance;
37
+ }
38
+ return pct;
39
+ };
40
+ const onPointerDown = (e) => {
41
+ if (!enable) return;
42
+ if (pointerStateRef.current.pointerId !== null) return;
43
+ pointerStateRef.current.pointerId = e.pointerId;
44
+ pointerStateRef.current.startX = e.clientX;
45
+ pointerStateRef.current.startY = e.clientY;
46
+ pointerStateRef.current.lastX = e.clientX;
47
+ pointerStateRef.current.axisLocked = false;
48
+ pointerStateRef.current.isHorizontal = false;
49
+ isTextSelectingRef.current = false;
50
+ setIsDragging(false);
51
+ setDragDeltaPct(0);
52
+ try {
53
+ e.currentTarget.setPointerCapture(e.pointerId);
54
+ } catch {
55
+ }
56
+ };
57
+ const onPointerMove = (e) => {
58
+ if (!enable) return;
59
+ if (pointerStateRef.current.pointerId !== e.pointerId) return;
60
+ const width = getContainerWidth();
61
+ if (!width) return;
62
+ const dx = e.clientX - pointerStateRef.current.startX;
63
+ const dy = e.clientY - pointerStateRef.current.startY;
64
+ if (disableWhenSelectingText) {
65
+ const sel = typeof window !== "undefined" ? window.getSelection?.() : null;
66
+ const isSelecting = !!sel && sel.rangeCount > 0 && !sel.isCollapsed;
67
+ if (isSelecting) {
68
+ isTextSelectingRef.current = true;
69
+ return;
70
+ }
71
+ }
72
+ if (!pointerStateRef.current.axisLocked) {
73
+ const absDx = Math.abs(dx);
74
+ const absDy = Math.abs(dy);
75
+ if (absDx > 6 || absDy > 6) {
76
+ pointerStateRef.current.axisLocked = true;
77
+ pointerStateRef.current.isHorizontal = absDx > absDy;
78
+ }
79
+ }
80
+ if (!pointerStateRef.current.isHorizontal) {
81
+ return;
82
+ }
83
+ e.preventDefault();
84
+ if (!isDragging) setIsDragging(true);
85
+ const pct = dx / width * 100;
86
+ setDragDeltaPct(applyEdgeResistance(pct));
87
+ pointerStateRef.current.lastX = e.clientX;
88
+ };
89
+ const endDrag = (e) => {
90
+ try {
91
+ e.currentTarget.releasePointerCapture(e.pointerId);
92
+ } catch {
93
+ }
94
+ const wasHorizontal = pointerStateRef.current.isHorizontal;
95
+ const delta = dragDeltaPct;
96
+ setIsDragging(false);
97
+ setDragDeltaPct(0);
98
+ pointerStateRef.current.pointerId = null;
99
+ pointerStateRef.current.axisLocked = false;
100
+ pointerStateRef.current.isHorizontal = false;
101
+ if (isTextSelectingRef.current) {
102
+ isTextSelectingRef.current = false;
103
+ return;
104
+ }
105
+ if (!wasHorizontal) return;
106
+ if (delta > thresholdPct) {
107
+ onSwipeRight?.();
108
+ } else if (delta < -thresholdPct) {
109
+ onSwipeLeft?.();
110
+ }
111
+ };
112
+ const onPointerUp = (e) => {
113
+ if (!enable) return;
114
+ if (pointerStateRef.current.pointerId !== e.pointerId) return;
115
+ endDrag(e);
116
+ };
117
+ const onPointerCancel = (e) => {
118
+ if (!enable) return;
119
+ if (pointerStateRef.current.pointerId !== e.pointerId) return;
120
+ endDrag(e);
121
+ };
122
+ useEffect(() => {
123
+ setDragDeltaPct(0);
124
+ setIsDragging(false);
125
+ }, [itemIndex]);
126
+ const style = { touchAction };
127
+ return {
128
+ containerRef,
129
+ isDragging,
130
+ dragDeltaPct,
131
+ containerProps: {
132
+ ref: containerRef,
133
+ onPointerDown,
134
+ onPointerMove,
135
+ onPointerUp,
136
+ onPointerCancel,
137
+ style
138
+ }
139
+ };
140
+ };
141
+ export {
142
+ useHorizontalSwipe
143
+ };
144
+ //# sourceMappingURL=useHorizontalSwipe.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useHorizontalSwipe.mjs","sources":["../../src/hooks/useHorizontalSwipe.ts"],"sourcesContent":["'use client';\n\nimport {\n useEffect,\n useRef,\n useState,\n type CSSProperties,\n type PointerEvent,\n type PointerEventHandler,\n type RefObject,\n} from 'react';\n\nexport type HorizontalSwipeConfig = {\n onSwipeLeft?: () => void; // move to next item\n onSwipeRight?: () => void; // move to previous item\n enable?: boolean;\n itemIndex: number;\n itemCount: number;\n thresholdPct?: number; // percentage of width required to trigger\n touchAction?: string; // CSS touch-action for the container, defaults to 'pan-y'\n disableWhenSelectingText?: boolean; // if true, do not swipe while text selection is active\n};\n\nexport type HorizontalSwipeHook = {\n containerRef: RefObject<HTMLDivElement>;\n isDragging: boolean;\n dragDeltaPct: number;\n containerProps: {\n ref: RefObject<HTMLDivElement>;\n onPointerDown: PointerEventHandler<HTMLDivElement>;\n onPointerMove: PointerEventHandler<HTMLDivElement>;\n onPointerUp: PointerEventHandler<HTMLDivElement>;\n onPointerCancel: PointerEventHandler<HTMLDivElement>;\n style: CSSProperties;\n };\n};\n\nexport const useHorizontalSwipe = (\n config: HorizontalSwipeConfig\n): HorizontalSwipeHook => {\n const {\n enable = true,\n onSwipeLeft,\n onSwipeRight,\n itemIndex,\n itemCount,\n thresholdPct = 20,\n touchAction = 'pan-y',\n disableWhenSelectingText = true,\n } = config;\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [dragDeltaPct, setDragDeltaPct] = useState(0);\n const pointerStateRef = useRef<{\n pointerId: number | null;\n startX: number;\n startY: number;\n lastX: number;\n axisLocked: boolean;\n isHorizontal: boolean;\n }>({\n pointerId: null,\n startX: 0,\n startY: 0,\n lastX: 0,\n axisLocked: false,\n isHorizontal: false,\n });\n\n const isTextSelectingRef = useRef<boolean>(false);\n\n const getContainerWidth = () => {\n const node = containerRef.current;\n return node ? node.clientWidth : 0;\n };\n\n const applyEdgeResistance = (pct: number) => {\n const atFirst = itemIndex <= 0;\n const atLast = itemIndex >= itemCount - 1;\n\n if ((atFirst && pct > 0) || (atLast && pct < 0)) {\n const magnitude = Math.abs(pct);\n const resistance = 1 + magnitude / 30;\n return pct / resistance;\n }\n\n return pct;\n };\n\n const onPointerDown: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== null) return;\n pointerStateRef.current.pointerId = e.pointerId;\n pointerStateRef.current.startX = e.clientX;\n pointerStateRef.current.startY = e.clientY;\n pointerStateRef.current.lastX = e.clientX;\n pointerStateRef.current.axisLocked = false;\n pointerStateRef.current.isHorizontal = false;\n isTextSelectingRef.current = false;\n setIsDragging(false);\n setDragDeltaPct(0);\n try {\n (\n e.currentTarget as Element & { setPointerCapture: (id: number) => void }\n ).setPointerCapture(e.pointerId);\n } catch {}\n };\n\n const onPointerMove: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n\n const width = getContainerWidth();\n if (!width) return;\n\n const dx = e.clientX - pointerStateRef.current.startX;\n const dy = e.clientY - pointerStateRef.current.startY;\n\n // If user is selecting text, do not engage swipe\n if (disableWhenSelectingText) {\n const sel =\n typeof window !== 'undefined' ? window.getSelection?.() : null;\n const isSelecting = !!sel && sel.rangeCount > 0 && !sel.isCollapsed;\n if (isSelecting) {\n isTextSelectingRef.current = true;\n return;\n }\n }\n\n if (!pointerStateRef.current.axisLocked) {\n const absDx = Math.abs(dx);\n const absDy = Math.abs(dy);\n if (absDx > 6 || absDy > 6) {\n pointerStateRef.current.axisLocked = true;\n pointerStateRef.current.isHorizontal = absDx > absDy;\n }\n }\n\n if (!pointerStateRef.current.isHorizontal) {\n return;\n }\n\n e.preventDefault();\n\n if (!isDragging) setIsDragging(true);\n\n const pct = (dx / width) * 100;\n setDragDeltaPct(applyEdgeResistance(pct));\n pointerStateRef.current.lastX = e.clientX;\n };\n\n const endDrag = (e: PointerEvent<HTMLDivElement>) => {\n try {\n (\n e.currentTarget as Element & {\n releasePointerCapture: (id: number) => void;\n }\n ).releasePointerCapture(e.pointerId);\n } catch {}\n\n const wasHorizontal = pointerStateRef.current.isHorizontal;\n const delta = dragDeltaPct;\n\n setIsDragging(false);\n setDragDeltaPct(0);\n pointerStateRef.current.pointerId = null;\n pointerStateRef.current.axisLocked = false;\n pointerStateRef.current.isHorizontal = false;\n\n if (isTextSelectingRef.current) {\n isTextSelectingRef.current = false;\n return;\n }\n\n if (!wasHorizontal) return;\n\n if (delta > thresholdPct) {\n onSwipeRight?.();\n } else if (delta < -thresholdPct) {\n onSwipeLeft?.();\n }\n };\n\n const onPointerUp: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n endDrag(e);\n };\n\n const onPointerCancel: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n endDrag(e);\n };\n\n useEffect(() => {\n setDragDeltaPct(0);\n setIsDragging(false);\n }, [itemIndex]);\n\n const style: CSSProperties = { touchAction };\n\n return {\n containerRef: containerRef as RefObject<HTMLDivElement>,\n isDragging,\n dragDeltaPct,\n containerProps: {\n ref: containerRef as RefObject<HTMLDivElement>,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n onPointerCancel,\n style,\n },\n };\n};\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intlayer/design-system",
3
- "version": "6.1.3",
3
+ "version": "6.1.4",
4
4
  "private": false,
5
5
  "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
6
6
  "keywords": [
@@ -60,6 +60,31 @@
60
60
  "./css": "./src/tailwind.css",
61
61
  "./css-output": "./dist/tailwind.css"
62
62
  },
63
+ "main": "dist/components/index.cjs",
64
+ "module": "dist/components/index.mjs",
65
+ "types": "dist/components/index.d.ts",
66
+ "typesVersions": {
67
+ "*": {
68
+ ".": [
69
+ "./dist/components/index.d.ts"
70
+ ],
71
+ "hooks": [
72
+ "./dist/hooks/index.d.ts"
73
+ ],
74
+ "providers": [
75
+ "./dist/providers/index.d.ts"
76
+ ],
77
+ "libs": [
78
+ "./dist/libs/index.d.ts"
79
+ ],
80
+ "tailwind-config": [
81
+ "./dist/tailwind.config.d.ts"
82
+ ],
83
+ "package.json": [
84
+ "./package.json"
85
+ ]
86
+ }
87
+ },
63
88
  "files": [
64
89
  "dist"
65
90
  ],
@@ -85,13 +110,13 @@
85
110
  "tailwind-merge": "^3.3.1",
86
111
  "zod": "^3.25.56",
87
112
  "zustand": "^4.5.6",
88
- "@intlayer/api": "6.1.3",
89
- "@intlayer/core": "6.1.3",
90
- "@intlayer/dictionaries-entry": "6.1.3",
91
- "@intlayer/config": "6.1.3",
92
- "intlayer": "6.1.3",
93
- "@intlayer/editor-react": "6.1.3",
94
- "react-intlayer": "6.1.3"
113
+ "@intlayer/api": "6.1.4",
114
+ "@intlayer/config": "6.1.4",
115
+ "@intlayer/core": "6.1.4",
116
+ "@intlayer/dictionaries-entry": "6.1.4",
117
+ "intlayer": "6.1.4",
118
+ "@intlayer/editor-react": "6.1.4",
119
+ "react-intlayer": "6.1.4"
95
120
  },
96
121
  "devDependencies": {
97
122
  "@chromatic-com/storybook": "^3.2.7",
@@ -130,12 +155,12 @@
130
155
  "vite": "^7.1.7",
131
156
  "vite-plugin-dts": "^4.5.3",
132
157
  "vitest": "^3.2.4",
133
- "@intlayer/backend": "6.1.3",
158
+ "@intlayer/backend": "6.1.4",
159
+ "@utils/eslint-config": "1.0.4",
134
160
  "@utils/ts-config": "1.0.4",
135
161
  "@utils/ts-config-types": "1.0.4",
136
- "@utils/eslint-config": "1.0.4",
137
162
  "@utils/tsup-config": "1.0.4",
138
- "vite-intlayer": "6.1.3"
163
+ "vite-intlayer": "6.1.4"
139
164
  },
140
165
  "peerDependencies": {
141
166
  "@monaco-editor/react": "^4.7.0",
@@ -149,14 +174,14 @@
149
174
  "react-dom": ">=16.0.0",
150
175
  "tailwind-merge": "^3.3.1",
151
176
  "zustand": "^4.5.6",
152
- "@intlayer/api": "6.1.3",
153
- "@intlayer/config": "6.1.3",
154
- "@intlayer/core": "6.1.3",
155
- "@intlayer/dictionaries-entry": "6.1.3",
156
- "@intlayer/editor-react": "6.1.3",
157
- "intlayer": "6.1.3",
158
- "react-intlayer": "6.1.3",
159
- "@intlayer/backend": "6.1.3"
177
+ "@intlayer/api": "6.1.4",
178
+ "@intlayer/backend": "6.1.4",
179
+ "@intlayer/editor-react": "6.1.4",
180
+ "intlayer": "6.1.4",
181
+ "react-intlayer": "6.1.4",
182
+ "@intlayer/dictionaries-entry": "6.1.4",
183
+ "@intlayer/config": "6.1.4",
184
+ "@intlayer/core": "6.1.4"
160
185
  },
161
186
  "scripts": {
162
187
  "build": "pnpm clean & pnpm build:ci",