@tcn/ui 0.9.0 → 0.10.0

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 (182) hide show
  1. package/dist/bar.css +1 -0
  2. package/dist/body.css +1 -1
  3. package/dist/body.module-BbFZ7KNP.js +5 -0
  4. package/dist/body.module-BbFZ7KNP.js.map +1 -0
  5. package/dist/divider.css +1 -1
  6. package/dist/footer.css +1 -1
  7. package/dist/layouts/bar/bar.d.ts +5 -0
  8. package/dist/layouts/bar/bar.d.ts.map +1 -0
  9. package/dist/layouts/bar/bar.js +20 -0
  10. package/dist/layouts/bar/bar.js.map +1 -0
  11. package/dist/layouts/body/body.d.ts +2 -2
  12. package/dist/layouts/body/body.d.ts.map +1 -1
  13. package/dist/layouts/body/body.js +12 -12
  14. package/dist/layouts/body/body.js.map +1 -1
  15. package/dist/layouts/body/h_body.d.ts.map +1 -1
  16. package/dist/layouts/body/h_body.js +18 -12
  17. package/dist/layouts/body/h_body.js.map +1 -1
  18. package/dist/layouts/body/v_body.d.ts.map +1 -1
  19. package/dist/layouts/body/v_body.js +16 -10
  20. package/dist/layouts/body/v_body.js.map +1 -1
  21. package/dist/layouts/footer/footer.d.ts +2 -3
  22. package/dist/layouts/footer/footer.d.ts.map +1 -1
  23. package/dist/layouts/footer/footer.js +7 -7
  24. package/dist/layouts/footer/footer.js.map +1 -1
  25. package/dist/layouts/header/header.d.ts +2 -2
  26. package/dist/layouts/header/header.d.ts.map +1 -1
  27. package/dist/layouts/header/header.js +13 -21
  28. package/dist/layouts/header/header.js.map +1 -1
  29. package/dist/layouts/index.d.ts +0 -1
  30. package/dist/layouts/index.d.ts.map +1 -1
  31. package/dist/layouts/index.js +17 -19
  32. package/dist/layouts/index.js.map +1 -1
  33. package/dist/layouts/rail/rail.js +41 -41
  34. package/dist/layouts/rail/rail.js.map +1 -1
  35. package/dist/layouts/rail/side/side.d.ts.map +1 -1
  36. package/dist/layouts/rail/side/side.js +1 -1
  37. package/dist/layouts/rail/side/side.js.map +1 -1
  38. package/dist/layouts/rail/utility_strip/utility_strip.d.ts.map +1 -1
  39. package/dist/layouts/rail/utility_strip/utility_strip.js +21 -17
  40. package/dist/layouts/rail/utility_strip/utility_strip.js.map +1 -1
  41. package/dist/layouts/scaffold/scaffold.js +32 -32
  42. package/dist/layouts/scaffold/scaffold.js.map +1 -1
  43. package/dist/layouts/utility_bar/utility_bar.d.ts +2 -2
  44. package/dist/layouts/utility_bar/utility_bar.d.ts.map +1 -1
  45. package/dist/layouts/utility_bar/utility_bar.js +17 -19
  46. package/dist/layouts/utility_bar/utility_bar.js.map +1 -1
  47. package/dist/overlay/frame/frame.js +3 -3
  48. package/dist/overlay/frame/frame.js.map +1 -1
  49. package/dist/panel.css +1 -0
  50. package/dist/rail.css +1 -1
  51. package/dist/scaffold.css +1 -1
  52. package/dist/side.css +1 -1
  53. package/dist/stacks/box/bottom_resize_handle.d.ts +2 -2
  54. package/dist/stacks/box/bottom_resize_handle.d.ts.map +1 -1
  55. package/dist/stacks/box/bottom_resize_handle.js +12 -10
  56. package/dist/stacks/box/bottom_resize_handle.js.map +1 -1
  57. package/dist/stacks/box/box.d.ts +4 -4
  58. package/dist/stacks/box/box.d.ts.map +1 -1
  59. package/dist/stacks/box/box.js +26 -26
  60. package/dist/stacks/box/box.js.map +1 -1
  61. package/dist/stacks/box/end_resize_handle.d.ts +2 -2
  62. package/dist/stacks/box/end_resize_handle.d.ts.map +1 -1
  63. package/dist/stacks/box/end_resize_handle.js +6 -5
  64. package/dist/stacks/box/end_resize_handle.js.map +1 -1
  65. package/dist/stacks/box/left_resize_handle.d.ts +2 -2
  66. package/dist/stacks/box/left_resize_handle.d.ts.map +1 -1
  67. package/dist/stacks/box/left_resize_handle.js +10 -9
  68. package/dist/stacks/box/left_resize_handle.js.map +1 -1
  69. package/dist/stacks/box/resize_handlers.d.ts +2 -2
  70. package/dist/stacks/box/resize_handlers.d.ts.map +1 -1
  71. package/dist/stacks/box/resize_handlers.js +24 -24
  72. package/dist/stacks/box/resize_handlers.js.map +1 -1
  73. package/dist/stacks/box/right_resize_handle.d.ts +2 -2
  74. package/dist/stacks/box/right_resize_handle.d.ts.map +1 -1
  75. package/dist/stacks/box/right_resize_handle.js +6 -5
  76. package/dist/stacks/box/right_resize_handle.js.map +1 -1
  77. package/dist/stacks/box/start_resize_handle.d.ts +2 -2
  78. package/dist/stacks/box/start_resize_handle.d.ts.map +1 -1
  79. package/dist/stacks/box/start_resize_handle.js +4 -4
  80. package/dist/stacks/box/start_resize_handle.js.map +1 -1
  81. package/dist/stacks/box/top_resize_handle.d.ts +2 -2
  82. package/dist/stacks/box/top_resize_handle.d.ts.map +1 -1
  83. package/dist/stacks/box/top_resize_handle.js +2 -1
  84. package/dist/stacks/box/top_resize_handle.js.map +1 -1
  85. package/dist/stacks/h_collapsible_box.d.ts.map +1 -1
  86. package/dist/stacks/h_collapsible_box.js +24 -24
  87. package/dist/stacks/h_collapsible_box.js.map +1 -1
  88. package/dist/stacks/v_collapsible_box.js +25 -25
  89. package/dist/stacks/v_collapsible_box.js.map +1 -1
  90. package/dist/surfaces/index.d.ts +1 -2
  91. package/dist/surfaces/index.d.ts.map +1 -1
  92. package/dist/surfaces/index.js +18 -20
  93. package/dist/surfaces/index.js.map +1 -1
  94. package/dist/surfaces/panel/panel.d.ts +5 -0
  95. package/dist/surfaces/panel/panel.d.ts.map +1 -0
  96. package/dist/surfaces/panel/panel.js +19 -0
  97. package/dist/surfaces/panel/panel.js.map +1 -0
  98. package/dist/surfaces/pop_confirm/pop_confirm.js +2 -3
  99. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  100. package/dist/themes/theme.d.ts +2 -1
  101. package/dist/themes/theme.d.ts.map +1 -1
  102. package/dist/themes/theme.js +16 -9
  103. package/dist/themes/theme.js.map +1 -1
  104. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  105. package/dist/themes/themes/ergo/ergo_theme.js +27 -0
  106. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  107. package/package.json +1 -1
  108. package/src/layouts/__stories__/composed.stories.tsx +0 -55
  109. package/src/layouts/__stories__/rail.stories.tsx +78 -0
  110. package/src/layouts/__stories__/scaffold.stories.tsx +90 -0
  111. package/src/layouts/__stories__/utils/content.tsx +27 -0
  112. package/src/layouts/__stories__/utils/layout_theme.css +88 -0
  113. package/src/layouts/__stories__/utils/layout_theme_provider.tsx +11 -0
  114. package/src/layouts/__stories__/utils.tsx +6 -6
  115. package/src/layouts/{utility_bar/utility_bar.module.css → bar/bar.module.css} +2 -1
  116. package/src/layouts/bar/bar.tsx +23 -0
  117. package/src/layouts/body/body.module.css +9 -4
  118. package/src/layouts/body/body.tsx +7 -6
  119. package/src/layouts/body/h_body.module.css +1 -2
  120. package/src/layouts/body/h_body.tsx +9 -4
  121. package/src/layouts/body/v_body.tsx +9 -4
  122. package/src/layouts/divider/divider.module.css +1 -1
  123. package/src/layouts/footer/footer.module.css +0 -3
  124. package/src/layouts/footer/footer.tsx +5 -6
  125. package/src/layouts/header/header.tsx +6 -15
  126. package/src/layouts/index.ts +0 -1
  127. package/src/layouts/rail/rail.module.css +9 -5
  128. package/src/layouts/rail/rail.tsx +1 -1
  129. package/src/layouts/rail/side/side.module.css +0 -1
  130. package/src/layouts/rail/side/side.tsx +1 -2
  131. package/src/layouts/rail/utility_strip/utility_strip.module.css +5 -0
  132. package/src/layouts/rail/utility_strip/utility_strip.tsx +4 -1
  133. package/src/layouts/scaffold/scaffold.module.css +10 -7
  134. package/src/layouts/scaffold/scaffold.tsx +1 -1
  135. package/src/layouts/utility_bar/utility_bar.tsx +6 -9
  136. package/src/overlay/frame/frame.tsx +2 -2
  137. package/src/stacks/box/bottom_resize_handle.tsx +7 -5
  138. package/src/stacks/box/box.tsx +12 -18
  139. package/src/stacks/box/end_resize_handle.tsx +6 -6
  140. package/src/stacks/box/left_resize_handle.tsx +4 -3
  141. package/src/stacks/box/resize_handlers.ts +11 -9
  142. package/src/stacks/box/right_resize_handle.tsx +4 -3
  143. package/src/stacks/box/start_resize_handle.tsx +3 -3
  144. package/src/stacks/box/top_resize_handle.tsx +4 -3
  145. package/src/stacks/collapsible_box.stories.tsx +11 -11
  146. package/src/stacks/h_collapsible_box.tsx +5 -5
  147. package/src/stacks/v_collapsible_box.tsx +4 -4
  148. package/src/surfaces/index.ts +1 -2
  149. package/src/surfaces/panel/__stories__/panel.stories.tsx +12 -12
  150. package/src/surfaces/panel/__stories__/panel_stories.module.css +3 -3
  151. package/src/surfaces/panel/panel.module.css +1 -6
  152. package/src/surfaces/panel/panel.tsx +22 -0
  153. package/src/themes/theme.tsx +6 -2
  154. package/src/themes/themes/ergo/__stories__/material.stories.tsx +15 -16
  155. package/src/themes/themes/ergo/ergo_theme.css +27 -0
  156. package/dist/h_body.css +0 -1
  157. package/dist/h_panel.css +0 -1
  158. package/dist/header.css +0 -1
  159. package/dist/layouts/rail/main/main.d.ts +0 -6
  160. package/dist/layouts/rail/main/main.d.ts.map +0 -1
  161. package/dist/layouts/rail/main/main.js +0 -21
  162. package/dist/layouts/rail/main/main.js.map +0 -1
  163. package/dist/main.css +0 -1
  164. package/dist/surfaces/panel/h_panel.d.ts +0 -9
  165. package/dist/surfaces/panel/h_panel.d.ts.map +0 -1
  166. package/dist/surfaces/panel/h_panel.js +0 -60
  167. package/dist/surfaces/panel/h_panel.js.map +0 -1
  168. package/dist/surfaces/panel/v_panel.d.ts +0 -5
  169. package/dist/surfaces/panel/v_panel.d.ts.map +0 -1
  170. package/dist/surfaces/panel/v_panel.js +0 -19
  171. package/dist/surfaces/panel/v_panel.js.map +0 -1
  172. package/dist/utility_bar.css +0 -1
  173. package/dist/v_body.css +0 -1
  174. package/src/layouts/header/header.module.css +0 -8
  175. package/src/layouts/rail/__stories__/rail.stories.tsx +0 -64
  176. package/src/layouts/rail/__stories__/rail_stories.module.css +0 -25
  177. package/src/layouts/rail/main/main.module.css +0 -7
  178. package/src/layouts/rail/main/main.tsx +0 -26
  179. package/src/layouts/scaffold/__stories__/scaffold.stories.tsx +0 -53
  180. package/src/layouts/scaffold/__stories__/scaffold_stories.module.css +0 -31
  181. package/src/surfaces/panel/h_panel.tsx +0 -65
  182. package/src/surfaces/panel/v_panel.tsx +0 -20
@@ -3,8 +3,8 @@ import { HandleProps } from './handle_props.js';
3
3
  export interface EndResizeHandleProps {
4
4
  targetRef: React.MutableRefObject<HTMLElement | null>;
5
5
  handleProps?: HandleProps;
6
- onWidthResize?: (value: number) => void;
7
- onWidthResizeEnd?: (value: number) => void;
6
+ onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
7
+ onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
8
8
  }
9
9
  export declare function EndResizeHandle({ targetRef, handleProps, onWidthResize, onWidthResizeEnd, }: EndResizeHandleProps): import("react/jsx-runtime").JSX.Element;
10
10
  //# sourceMappingURL=end_resize_handle.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"end_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/end_resize_handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,oBAAoB,2CAuBtB"}
1
+ {"version":3,"file":"end_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/end_resize_handle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CACtE;AACD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,oBAAoB,2CAwBtB"}
@@ -1,6 +1,6 @@
1
1
  import { jsx as d } from "react/jsx-runtime";
2
- import { createHorizontalResizeHandler as l } from "./resize_handlers.js";
3
- import { clsx as c } from "clsx";
2
+ import { clsx as l } from "clsx";
3
+ import { createHorizontalResizeHandler as c } from "./resize_handlers.js";
4
4
  import '../../end_resize_handle.css';const f = "_end-resize-handle_1c5e6ba", z = { "end-resize-handle": f };
5
5
  function x({
6
6
  targetRef: n,
@@ -8,10 +8,11 @@ function x({
8
8
  onWidthResize: s,
9
9
  onWidthResizeEnd: t
10
10
  }) {
11
- const i = l(
11
+ const i = c(
12
12
  n,
13
13
  s,
14
- t
14
+ t,
15
+ "right"
15
16
  ), o = e?.offset ? e.offset : -8, r = {
16
17
  ...e?.style,
17
18
  "--resize-offset": `${o}px`,
@@ -20,7 +21,7 @@ function x({
20
21
  return /* @__PURE__ */ d(
21
22
  "div",
22
23
  {
23
- className: c(z["end-resize-handle"], "tcn-end-resize-handle"),
24
+ className: l(z["end-resize-handle"], "tcn-end-resize-handle"),
24
25
  onMouseDown: i,
25
26
  style: r,
26
27
  children: e?.children
@@ -1 +1 @@
1
- {"version":3,"file":"end_resize_handle.js","sources":["../../../src/stacks/box/end_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './end_resize_handle.module.css';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport { clsx } from 'clsx';\nimport type { HandleProps } from './handle_props.js';\n\nexport interface EndResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onWidthResize?: (value: number) => void;\n onWidthResizeEnd?: (value: number) => void;\n}\n\nexport function EndResizeHandle({\n targetRef,\n handleProps,\n onWidthResize,\n onWidthResizeEnd,\n}: EndResizeHandleProps) {\n const resizeHandler = createHorizontalResizeHandler(\n targetRef,\n onWidthResize,\n onWidthResizeEnd\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const endResizeHandleStyle: any = {\n ...handleProps?.style,\n '--resize-offset': `${offset}px`,\n width: handleProps?.size || '16px',\n };\n\n return (\n <div\n className={clsx(styles['end-resize-handle'], 'tcn-end-resize-handle')}\n onMouseDown={resizeHandler}\n style={endResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["EndResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","endResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAaO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4B;AAAA,IAChC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
1
+ {"version":3,"file":"end_resize_handle.js","sources":["../../../src/stacks/box/end_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './end_resize_handle.module.css';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\n\nexport interface EndResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;\n onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;\n}\nexport function EndResizeHandle({\n targetRef,\n handleProps,\n onWidthResize,\n onWidthResizeEnd,\n}: EndResizeHandleProps) {\n const resizeHandler = createHorizontalResizeHandler(\n targetRef,\n onWidthResize,\n onWidthResizeEnd,\n 'right'\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const endResizeHandleStyle: any = {\n ...handleProps?.style,\n '--resize-offset': `${offset}px`,\n width: handleProps?.size || '16px',\n };\n\n return (\n <div\n className={clsx(styles['end-resize-handle'], 'tcn-end-resize-handle')}\n onMouseDown={resizeHandler}\n style={endResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["EndResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","endResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4B;AAAA,IAChC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
@@ -3,8 +3,8 @@ import { HandleProps } from './handle_props.js';
3
3
  export interface LeftResizeHandleProps {
4
4
  targetRef: React.MutableRefObject<HTMLElement | null>;
5
5
  handleProps?: HandleProps;
6
- onWidthResize?: (value: number) => void;
7
- onWidthResizeEnd?: (value: number) => void;
6
+ onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
7
+ onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
8
8
  }
9
9
  export declare function LeftResizeHandle({ targetRef, handleProps, onWidthResize, onWidthResizeEnd, }: LeftResizeHandleProps): import("react/jsx-runtime").JSX.Element;
10
10
  //# sourceMappingURL=left_resize_handle.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"left_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/left_resize_handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AACD,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,qBAAqB,2CAyBvB"}
1
+ {"version":3,"file":"left_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/left_resize_handle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CACtE;AACD,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,qBAAqB,2CA0BvB"}
@@ -1,29 +1,30 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
- import { createHorizontalResizeHandler as o } from "./resize_handlers.js";
3
- import { clsx as c } from "clsx";
2
+ import { clsx as o } from "clsx";
3
+ import { createHorizontalResizeHandler as c } from "./resize_handlers.js";
4
4
  import '../../left_resize_handle.css';const z = "_left-resize-handle_215501a", a = { "left-resize-handle": z };
5
5
  function u({
6
6
  targetRef: t,
7
7
  handleProps: e,
8
8
  onWidthResize: s,
9
- onWidthResizeEnd: i
9
+ onWidthResizeEnd: l
10
10
  }) {
11
- const l = o(
11
+ const f = c(
12
12
  t,
13
13
  s,
14
- i,
14
+ l,
15
+ "left",
15
16
  !0,
16
17
  !0
17
- ), f = e?.offset ? e.offset : -8, n = {
18
+ ), i = e?.offset ? e.offset : -8, n = {
18
19
  ...e?.style,
19
- "--resize-offset": `${f}px`,
20
+ "--resize-offset": `${i}px`,
20
21
  width: e?.size || "16px"
21
22
  };
22
23
  return /* @__PURE__ */ r(
23
24
  "div",
24
25
  {
25
- className: c(a["left-resize-handle"], "tcn-left-resize-handle"),
26
- onMouseDown: l,
26
+ className: o(a["left-resize-handle"], "tcn-left-resize-handle"),
27
+ onMouseDown: f,
27
28
  style: n,
28
29
  children: e?.children
29
30
  }
@@ -1 +1 @@
1
- {"version":3,"file":"left_resize_handle.js","sources":["../../../src/stacks/box/left_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport styles from './left_resize_handle.module.css';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport { clsx } from 'clsx';\n\nexport interface LeftResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onWidthResize?: (value: number) => void;\n onWidthResizeEnd?: (value: number) => void;\n}\nexport function LeftResizeHandle({\n targetRef,\n handleProps,\n onWidthResize,\n onWidthResizeEnd,\n}: LeftResizeHandleProps) {\n const resizeHandler = createHorizontalResizeHandler(\n targetRef,\n onWidthResize,\n onWidthResizeEnd,\n true,\n true\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const leftResizeHandleStyle: any = {\n ...handleProps?.style,\n '--resize-offset': `${offset}px`,\n width: handleProps?.size || '16px',\n };\n\n return (\n <div\n className={clsx(styles['left-resize-handle'], 'tcn-left-resize-handle')}\n onMouseDown={resizeHandler}\n style={leftResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["LeftResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","leftResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAiB;AAAA,EAC/B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA0B;AACxB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA6B;AAAA,IACjC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,oBAAoB,GAAG,wBAAwB;AAAA,MACtE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
1
+ {"version":3,"file":"left_resize_handle.js","sources":["../../../src/stacks/box/left_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport styles from './left_resize_handle.module.css';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\n\nexport interface LeftResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;\n onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;\n}\nexport function LeftResizeHandle({\n targetRef,\n handleProps,\n onWidthResize,\n onWidthResizeEnd,\n}: LeftResizeHandleProps) {\n const resizeHandler = createHorizontalResizeHandler(\n targetRef,\n onWidthResize,\n onWidthResizeEnd,\n 'left',\n true,\n true\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const leftResizeHandleStyle: any = {\n ...handleProps?.style,\n '--resize-offset': `${offset}px`,\n width: handleProps?.size || '16px',\n };\n\n return (\n <div\n className={clsx(styles['left-resize-handle'], 'tcn-left-resize-handle')}\n onMouseDown={resizeHandler}\n style={leftResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["LeftResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","leftResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAiB;AAAA,EAC/B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA0B;AACxB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA6B;AAAA,IACjC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,oBAAoB,GAAG,wBAAwB;AAAA,MACtE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
@@ -1,3 +1,3 @@
1
- export declare function createHorizontalResizeHandler(targetRef: React.MutableRefObject<HTMLElement | null>, onWidthResize?: (value: number) => void, onWidthResizeEnd?: (value: number) => void, invert?: boolean, disableDirection?: boolean): (event: React.MouseEvent) => void;
2
- export declare function createVerticalResizeHandler(targetRef: React.MutableRefObject<HTMLElement | null>, onHeightResize?: (value: number) => void, onHeightResizeEnd?: (value: number) => void, invert?: boolean): (event: React.MouseEvent) => void;
1
+ export declare function createHorizontalResizeHandler(targetRef: React.MutableRefObject<HTMLElement | null>, onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void, onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void, origin?: 'left' | 'right', invert?: boolean, disableDirection?: boolean): (event: React.MouseEvent) => void;
2
+ export declare function createVerticalResizeHandler(targetRef: React.MutableRefObject<HTMLElement | null>, onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void, onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void, invert?: boolean, origin?: 'top' | 'bottom'): (event: React.MouseEvent) => void;
3
3
  //# sourceMappingURL=resize_handlers.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"resize_handlers.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/resize_handlers.ts"],"names":[],"mappings":"AASA,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACvC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAC1C,MAAM,UAAQ,EACd,gBAAgB,UAAQ,IAEc,OAAO,KAAK,CAAC,UAAU,UAuD9D;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACxC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAC3C,MAAM,UAAQ,IAGsB,OAAO,KAAK,CAAC,UAAU,UAgD5D"}
1
+ {"version":3,"file":"resize_handlers.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/resize_handlers.ts"],"names":[],"mappings":"AASA,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,EAChF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,EACpE,MAAM,GAAE,MAAM,GAAG,OAAiB,EAClC,MAAM,UAAQ,EACd,gBAAgB,UAAQ,IAEc,OAAO,KAAK,CAAC,UAAU,UAuD9D;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,EAClF,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,QAAQ,KAAK,IAAI,EACtE,MAAM,UAAQ,EACd,MAAM,GAAE,KAAK,GAAG,QAAmB,IAGC,OAAO,KAAK,CAAC,UAAU,UAgD5D"}
@@ -1,50 +1,50 @@
1
- function h() {
1
+ function L() {
2
2
  const n = window.document.createElement("div");
3
3
  return n.style.position = "absolute", n.style.inset = "-500px", n.style.backgroundColor = "transparent", n.style.pointerEvents = "auto", n;
4
4
  }
5
- function w(n, i, c, l = !1, g = !1) {
5
+ function D(n, g, v, l = "right", i = !1, f = !1) {
6
6
  return function(t) {
7
7
  const e = n.current;
8
8
  if (e == null)
9
9
  return;
10
- const a = h();
11
- e.appendChild(a);
12
- const m = (window.getComputedStyle(e).direction === "rtl" && !g ? !l : l) ? -1 : 1, p = t.clientX, d = e.getBoundingClientRect();
13
- let s = d.width;
10
+ const d = L();
11
+ e.appendChild(d);
12
+ const m = (window.getComputedStyle(e).direction === "rtl" && !f ? !i : i) ? -1 : 1, p = t.clientX, c = e.getBoundingClientRect();
13
+ let s = c.width;
14
14
  const o = (u) => {
15
- const L = m * (u.clientX - p), y = d.width + L;
16
- s = y, e.style.width = `${y}px`, i && i(y), u.stopPropagation(), u.preventDefault();
17
- }, v = (u) => {
15
+ const E = m * (u.clientX - p), h = c.width + E;
16
+ s = h, e.style.width = `${h}px`, g?.(h, l, E), u.stopPropagation(), u.preventDefault();
17
+ }, a = (u) => {
18
18
  u.buttons === 0 && r();
19
19
  }, r = () => {
20
- e.removeChild(a), document.body.removeEventListener("mousemove", o), document.body.removeEventListener("mouseup", r), document.body.removeEventListener("mouseenter", v), t.stopPropagation(), t.preventDefault(), c && c(s);
20
+ e.removeChild(d), document.body.removeEventListener("mousemove", o), document.body.removeEventListener("mouseup", r), document.body.removeEventListener("mouseenter", a), t.stopPropagation(), t.preventDefault(), v?.(s, l);
21
21
  };
22
- document.body.addEventListener("mousemove", o), document.body.addEventListener("mouseup", r), document.body.addEventListener("mouseenter", v), t.stopPropagation(), t.preventDefault();
22
+ document.body.addEventListener("mousemove", o), document.body.addEventListener("mouseup", r), document.body.addEventListener("mouseenter", a), t.stopPropagation(), t.preventDefault();
23
23
  };
24
24
  }
25
- function D(n, i, c, l = !1) {
26
- const g = l ? -1 : 1;
25
+ function C(n, g, v, l = !1, i = "bottom") {
26
+ const f = l ? -1 : 1;
27
27
  return function(t) {
28
28
  const e = n.current;
29
29
  if (e == null)
30
30
  return;
31
- const a = h();
32
- e.appendChild(a);
33
- const b = t.clientY, f = e.getBoundingClientRect();
34
- let m = f.height;
31
+ const d = L();
32
+ e.appendChild(d);
33
+ const y = t.clientY, b = e.getBoundingClientRect();
34
+ let m = b.height;
35
35
  const p = (o) => {
36
- const v = g * (o.clientY - b), r = f.height + v;
37
- m = r, e.style.height = `${r}px`, i && i(r), o.stopPropagation(), o.preventDefault();
38
- }, d = (o) => {
36
+ const a = f * (o.clientY - y), r = b.height + a;
37
+ m = r, e.style.height = `${r}px`, g?.(r, i, a), o.stopPropagation(), o.preventDefault();
38
+ }, c = (o) => {
39
39
  o.buttons === 0 && s();
40
40
  }, s = () => {
41
- e.removeChild(a), document.body.removeEventListener("mousemove", p), document.body.removeEventListener("mouseup", s), document.body.removeEventListener("mouseenter", d), t.stopPropagation(), t.preventDefault(), c && c(m);
41
+ e.removeChild(d), document.body.removeEventListener("mousemove", p), document.body.removeEventListener("mouseup", s), document.body.removeEventListener("mouseenter", c), t.stopPropagation(), t.preventDefault(), v?.(m, i);
42
42
  };
43
- document.body.addEventListener("mousemove", p), document.body.addEventListener("mouseup", s), document.body.addEventListener("mouseenter", d), t.stopPropagation(), t.preventDefault();
43
+ document.body.addEventListener("mousemove", p), document.body.addEventListener("mouseup", s), document.body.addEventListener("mouseenter", c), t.stopPropagation(), t.preventDefault();
44
44
  };
45
45
  }
46
46
  export {
47
- w as createHorizontalResizeHandler,
48
- D as createVerticalResizeHandler
47
+ D as createHorizontalResizeHandler,
48
+ C as createVerticalResizeHandler
49
49
  };
50
50
  //# sourceMappingURL=resize_handlers.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"resize_handlers.js","sources":["../../../src/stacks/box/resize_handlers.ts"],"sourcesContent":["function createVeil() {\n const veil = window.document.createElement('div');\n veil.style.position = 'absolute';\n veil.style.inset = '-500px';\n veil.style.backgroundColor = 'transparent';\n veil.style.pointerEvents = 'auto';\n return veil;\n}\n\nexport function createHorizontalResizeHandler(\n targetRef: React.MutableRefObject<HTMLElement | null>,\n onWidthResize?: (value: number) => void,\n onWidthResizeEnd?: (value: number) => void,\n invert = false,\n disableDirection = false\n) {\n return function startHorizontalResize(event: React.MouseEvent) {\n const box = targetRef.current;\n\n if (box == null) {\n return;\n }\n\n const veil = createVeil();\n box.appendChild(veil);\n\n const languageDirection = window.getComputedStyle(box).direction;\n const finalInvert =\n languageDirection === 'rtl' && !disableDirection ? !invert : invert;\n const direction = finalInvert ? -1 : 1;\n\n const startX = event.clientX;\n const startRect = box.getBoundingClientRect();\n let width = startRect.width;\n\n const drag = (event: MouseEvent) => {\n const deltaX = direction * (event.clientX - startX);\n const newWidth = startRect.width + deltaX;\n\n width = newWidth;\n\n box.style.width = `${newWidth}px`;\n onWidthResize && onWidthResize(newWidth);\n event.stopPropagation();\n event.preventDefault();\n };\n\n const mouseEnter = (event: MouseEvent) => {\n if (event.buttons === 0) {\n endDrag();\n }\n };\n\n const endDrag = () => {\n box.removeChild(veil);\n\n document.body.removeEventListener('mousemove', drag);\n document.body.removeEventListener('mouseup', endDrag);\n document.body.removeEventListener('mouseenter', mouseEnter);\n event.stopPropagation();\n event.preventDefault();\n\n onWidthResizeEnd && onWidthResizeEnd(width);\n };\n\n document.body.addEventListener('mousemove', drag);\n document.body.addEventListener('mouseup', endDrag);\n document.body.addEventListener('mouseenter', mouseEnter);\n event.stopPropagation();\n event.preventDefault();\n };\n}\n\nexport function createVerticalResizeHandler(\n targetRef: React.MutableRefObject<HTMLElement | null>,\n onHeightResize?: (value: number) => void,\n onHeightResizeEnd?: (value: number) => void,\n invert = false\n) {\n const direction = invert ? -1 : 1;\n return function startVerticalResize(event: React.MouseEvent) {\n const box = targetRef.current;\n\n if (box == null) {\n return;\n }\n\n const veil = createVeil();\n box.appendChild(veil);\n\n const startY = event.clientY;\n const startRect = box.getBoundingClientRect();\n let height = startRect.height;\n\n const drag = (event: MouseEvent) => {\n const deltaY = direction * (event.clientY - startY);\n const newHeight = startRect.height + deltaY;\n height = newHeight;\n box.style.height = `${newHeight}px`;\n onHeightResize && onHeightResize(newHeight);\n event.stopPropagation();\n event.preventDefault();\n };\n\n const mouseEnter = (event: MouseEvent) => {\n if (event.buttons === 0) {\n endDrag();\n }\n };\n\n const endDrag = () => {\n box.removeChild(veil);\n\n document.body.removeEventListener('mousemove', drag);\n document.body.removeEventListener('mouseup', endDrag);\n document.body.removeEventListener('mouseenter', mouseEnter);\n event.stopPropagation();\n event.preventDefault();\n\n onHeightResizeEnd && onHeightResizeEnd(height);\n };\n\n document.body.addEventListener('mousemove', drag);\n document.body.addEventListener('mouseup', endDrag);\n document.body.addEventListener('mouseenter', mouseEnter);\n event.stopPropagation();\n event.preventDefault();\n };\n}\n"],"names":["createVeil","veil","createHorizontalResizeHandler","targetRef","onWidthResize","onWidthResizeEnd","invert","disableDirection","event","box","direction","startX","startRect","width","drag","deltaX","newWidth","mouseEnter","endDrag","createVerticalResizeHandler","onHeightResize","onHeightResizeEnd","startY","height","deltaY","newHeight"],"mappings":"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"}
1
+ {"version":3,"file":"resize_handlers.js","sources":["../../../src/stacks/box/resize_handlers.ts"],"sourcesContent":["function createVeil() {\n const veil = window.document.createElement('div');\n veil.style.position = 'absolute';\n veil.style.inset = '-500px';\n veil.style.backgroundColor = 'transparent';\n veil.style.pointerEvents = 'auto';\n return veil;\n}\n\nexport function createHorizontalResizeHandler(\n targetRef: React.MutableRefObject<HTMLElement | null>,\n onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void,\n onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void,\n origin: 'left' | 'right' = 'right',\n invert = false,\n disableDirection = false\n) {\n return function startHorizontalResize(event: React.MouseEvent) {\n const box = targetRef.current;\n\n if (box == null) {\n return;\n }\n\n const veil = createVeil();\n box.appendChild(veil);\n\n const languageDirection = window.getComputedStyle(box).direction;\n const finalInvert =\n languageDirection === 'rtl' && !disableDirection ? !invert : invert;\n const direction = finalInvert ? -1 : 1;\n\n const startX = event.clientX;\n const startRect = box.getBoundingClientRect();\n let width = startRect.width;\n\n const drag = (event: MouseEvent) => {\n const deltaX = direction * (event.clientX - startX);\n const newWidth = startRect.width + deltaX;\n\n width = newWidth;\n\n box.style.width = `${newWidth}px`;\n onWidthResize?.(newWidth, origin, deltaX);\n event.stopPropagation();\n event.preventDefault();\n };\n\n const mouseEnter = (event: MouseEvent) => {\n if (event.buttons === 0) {\n endDrag();\n }\n };\n\n const endDrag = () => {\n box.removeChild(veil);\n\n document.body.removeEventListener('mousemove', drag);\n document.body.removeEventListener('mouseup', endDrag);\n document.body.removeEventListener('mouseenter', mouseEnter);\n event.stopPropagation();\n event.preventDefault();\n\n onWidthResizeEnd?.(width, origin);\n };\n\n document.body.addEventListener('mousemove', drag);\n document.body.addEventListener('mouseup', endDrag);\n document.body.addEventListener('mouseenter', mouseEnter);\n event.stopPropagation();\n event.preventDefault();\n };\n}\n\nexport function createVerticalResizeHandler(\n targetRef: React.MutableRefObject<HTMLElement | null>,\n onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void,\n onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void,\n invert = false,\n origin: 'top' | 'bottom' = 'bottom'\n) {\n const direction = invert ? -1 : 1;\n return function startVerticalResize(event: React.MouseEvent) {\n const box = targetRef.current;\n\n if (box == null) {\n return;\n }\n\n const veil = createVeil();\n box.appendChild(veil);\n\n const startY = event.clientY;\n const startRect = box.getBoundingClientRect();\n let height = startRect.height;\n\n const drag = (event: MouseEvent) => {\n const deltaY = direction * (event.clientY - startY);\n const newHeight = startRect.height + deltaY;\n height = newHeight;\n box.style.height = `${newHeight}px`;\n onHeightResize?.(newHeight, origin, deltaY);\n event.stopPropagation();\n event.preventDefault();\n };\n\n const mouseEnter = (event: MouseEvent) => {\n if (event.buttons === 0) {\n endDrag();\n }\n };\n\n const endDrag = () => {\n box.removeChild(veil);\n\n document.body.removeEventListener('mousemove', drag);\n document.body.removeEventListener('mouseup', endDrag);\n document.body.removeEventListener('mouseenter', mouseEnter);\n event.stopPropagation();\n event.preventDefault();\n\n onHeightResizeEnd?.(height, origin);\n };\n\n document.body.addEventListener('mousemove', drag);\n document.body.addEventListener('mouseup', endDrag);\n document.body.addEventListener('mouseenter', mouseEnter);\n event.stopPropagation();\n event.preventDefault();\n };\n}\n"],"names":["createVeil","veil","createHorizontalResizeHandler","targetRef","onWidthResize","onWidthResizeEnd","origin","invert","disableDirection","event","box","direction","startX","startRect","width","drag","deltaX","newWidth","mouseEnter","endDrag","createVerticalResizeHandler","onHeightResize","onHeightResizeEnd","startY","height","deltaY","newHeight"],"mappings":"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"}
@@ -3,8 +3,8 @@ import { HandleProps } from './handle_props.js';
3
3
  export interface RightResizeHandleProps {
4
4
  targetRef: React.MutableRefObject<HTMLElement | null>;
5
5
  handleProps?: HandleProps;
6
- onWidthResize?: (value: number) => void;
7
- onWidthResizeEnd?: (value: number) => void;
6
+ onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
7
+ onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
8
8
  }
9
9
  export declare function RightResizeHandle({ targetRef, handleProps, onWidthResize, onWidthResizeEnd, }: RightResizeHandleProps): import("react/jsx-runtime").JSX.Element;
10
10
  //# sourceMappingURL=right_resize_handle.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"right_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/right_resize_handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AACD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,sBAAsB,2CAyBxB"}
1
+ {"version":3,"file":"right_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/right_resize_handle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CACtE;AACD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,sBAAsB,2CA0BxB"}
@@ -1,17 +1,18 @@
1
1
  import { jsx as l } from "react/jsx-runtime";
2
- import { createHorizontalResizeHandler as f } from "./resize_handlers.js";
3
- import { clsx as c } from "clsx";
4
- import '../../right_resize_handle.css';const z = "_right-resize-handle_7f232b9", a = { "right-resize-handle": z };
2
+ import { clsx as f } from "clsx";
3
+ import { createHorizontalResizeHandler as c } from "./resize_handlers.js";
4
+ import '../../right_resize_handle.css';const z = "_right-resize-handle_7f232b9", h = { "right-resize-handle": z };
5
5
  function m({
6
6
  targetRef: t,
7
7
  handleProps: e,
8
8
  onWidthResize: i,
9
9
  onWidthResizeEnd: s
10
10
  }) {
11
- const r = f(
11
+ const r = c(
12
12
  t,
13
13
  i,
14
14
  s,
15
+ "right",
15
16
  !1,
16
17
  !0
17
18
  ), n = e?.offset ? e.offset : -8, o = {
@@ -22,7 +23,7 @@ function m({
22
23
  return /* @__PURE__ */ l(
23
24
  "div",
24
25
  {
25
- className: c(a["right-resize-handle"], "tcn-right-resize-handle"),
26
+ className: f(h["right-resize-handle"], "tcn-right-resize-handle"),
26
27
  onMouseDown: r,
27
28
  style: o,
28
29
  children: e?.children
@@ -1 +1 @@
1
- {"version":3,"file":"right_resize_handle.js","sources":["../../../src/stacks/box/right_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './right_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface RightResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onWidthResize?: (value: number) => void;\n onWidthResizeEnd?: (value: number) => void;\n}\nexport function RightResizeHandle({\n targetRef,\n handleProps,\n onWidthResize,\n onWidthResizeEnd,\n}: RightResizeHandleProps) {\n const resizeHandler = createHorizontalResizeHandler(\n targetRef,\n onWidthResize,\n onWidthResizeEnd,\n false,\n true\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const rightResizeHandleStyle: any = {\n ...handleProps?.style,\n '--resize-offset': `${offset}px`,\n width: handleProps?.size || '16px',\n };\n\n return (\n <div\n className={clsx(styles['right-resize-handle'], 'tcn-right-resize-handle')}\n onMouseDown={resizeHandler}\n style={rightResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["RightResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","rightResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
1
+ {"version":3,"file":"right_resize_handle.js","sources":["../../../src/stacks/box/right_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './right_resize_handle.module.css';\n\nexport interface RightResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;\n onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;\n}\nexport function RightResizeHandle({\n targetRef,\n handleProps,\n onWidthResize,\n onWidthResizeEnd,\n}: RightResizeHandleProps) {\n const resizeHandler = createHorizontalResizeHandler(\n targetRef,\n onWidthResize,\n onWidthResizeEnd,\n 'right',\n false,\n true\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const rightResizeHandleStyle: any = {\n ...handleProps?.style,\n '--resize-offset': `${offset}px`,\n width: handleProps?.size || '16px',\n };\n\n return (\n <div\n className={clsx(styles['right-resize-handle'], 'tcn-right-resize-handle')}\n onMouseDown={resizeHandler}\n style={rightResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["RightResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","rightResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
@@ -3,8 +3,8 @@ import { HandleProps } from './handle_props.js';
3
3
  export interface StartResizeHandleProps {
4
4
  targetRef: React.MutableRefObject<HTMLElement | null>;
5
5
  handleProps?: HandleProps;
6
- onWidthResize?: (value: number) => void;
7
- onWidthResizeEnd?: (value: number) => void;
6
+ onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
7
+ onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
8
8
  }
9
9
  export declare function StartResizeHandle({ targetRef, handleProps, onWidthResize, onWidthResizeEnd, }: StartResizeHandleProps): import("react/jsx-runtime").JSX.Element;
10
10
  //# sourceMappingURL=start_resize_handle.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"start_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/start_resize_handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AACD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,sBAAsB,2CAwBxB"}
1
+ {"version":3,"file":"start_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/start_resize_handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CACtE;AACD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,sBAAsB,2CAwBxB"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
2
  import { createHorizontalResizeHandler as l } from "./resize_handlers.js";
3
- import { clsx as c } from "clsx";
4
- import '../../start_resize_handle.css';const f = "_start-resize-handle_22a3d5a", z = { "start-resize-handle": f };
3
+ import { clsx as f } from "clsx";
4
+ import '../../start_resize_handle.css';const c = "_start-resize-handle_22a3d5a", z = { "start-resize-handle": c };
5
5
  function x({
6
6
  targetRef: t,
7
7
  handleProps: e,
@@ -12,7 +12,7 @@ function x({
12
12
  t,
13
13
  s,
14
14
  r,
15
- !0
15
+ "left"
16
16
  ), n = e?.offset ? e.offset : -8, a = {
17
17
  ...e?.style,
18
18
  "--resize-offset": `${n}px`,
@@ -21,7 +21,7 @@ function x({
21
21
  return /* @__PURE__ */ o(
22
22
  "div",
23
23
  {
24
- className: c(z["start-resize-handle"], "tcn-start-resize-handle"),
24
+ className: f(z["start-resize-handle"], "tcn-start-resize-handle"),
25
25
  onMouseDown: i,
26
26
  style: a,
27
27
  children: e?.children
@@ -1 +1 @@
1
- {"version":3,"file":"start_resize_handle.js","sources":["../../../src/stacks/box/start_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './start_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface StartResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onWidthResize?: (value: number) => void;\n onWidthResizeEnd?: (value: number) => void;\n}\nexport function StartResizeHandle({\n targetRef,\n handleProps,\n onWidthResize,\n onWidthResizeEnd,\n}: StartResizeHandleProps) {\n const resizeHandler = createHorizontalResizeHandler(\n targetRef,\n onWidthResize,\n onWidthResizeEnd,\n true\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const startResizeHandleStyle: any = {\n ...handleProps?.style,\n '--resize-offset': `${offset}px`,\n width: handleProps?.size || '16px',\n };\n\n return (\n <div\n className={clsx(styles['start-resize-handle'], 'tcn-start-resize-handle')}\n onMouseDown={resizeHandler}\n style={startResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["StartResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","startResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
1
+ {"version":3,"file":"start_resize_handle.js","sources":["../../../src/stacks/box/start_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './start_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface StartResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;\n onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;\n}\nexport function StartResizeHandle({\n targetRef,\n handleProps,\n onWidthResize,\n onWidthResizeEnd,\n}: StartResizeHandleProps) {\n const resizeHandler = createHorizontalResizeHandler(\n targetRef,\n onWidthResize,\n onWidthResizeEnd,\n 'left'\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const startResizeHandleStyle: any = {\n ...handleProps?.style,\n '--resize-offset': `${offset}px`,\n width: handleProps?.size || '16px',\n };\n\n return (\n <div\n className={clsx(styles['start-resize-handle'], 'tcn-start-resize-handle')}\n onMouseDown={resizeHandler}\n style={startResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["StartResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","startResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
@@ -3,8 +3,8 @@ import { HandleProps } from './handle_props.js';
3
3
  export interface TopResizeHandleProps {
4
4
  targetRef: React.MutableRefObject<HTMLElement | null>;
5
5
  handleProps?: HandleProps;
6
- onHeightResize?: (value: number) => void;
7
- onHeightResizeEnd?: (value: number) => void;
6
+ onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
7
+ onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
8
8
  }
9
9
  export declare function TopResizeHandle({ targetRef, handleProps, onHeightResize, onHeightResizeEnd, }: TopResizeHandleProps): import("react/jsx-runtime").JSX.Element;
10
10
  //# sourceMappingURL=top_resize_handle.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"top_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AACD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,cAAc,EACd,iBAAiB,GAClB,EAAE,oBAAoB,2CAuBtB"}
1
+ {"version":3,"file":"top_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,QAAQ,KAAK,IAAI,CAAC;CACxE;AACD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,cAAc,EACd,iBAAiB,GAClB,EAAE,oBAAoB,2CAwBtB"}
@@ -12,7 +12,8 @@ function x({
12
12
  t,
13
13
  o,
14
14
  s,
15
- !0
15
+ !0,
16
+ "top"
16
17
  ), n = e?.offset ? e.offset : -8, r = {
17
18
  ...e?.style,
18
19
  top: `${n}px`,
@@ -1 +1 @@
1
- {"version":3,"file":"top_resize_handle.js","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createVerticalResizeHandler } from './resize_handlers.js';\nimport styles from './top_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface TopResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onHeightResize?: (value: number) => void;\n onHeightResizeEnd?: (value: number) => void;\n}\nexport function TopResizeHandle({\n targetRef,\n handleProps,\n onHeightResize,\n onHeightResizeEnd,\n}: TopResizeHandleProps) {\n const resizeHandler = createVerticalResizeHandler(\n targetRef,\n onHeightResize,\n onHeightResizeEnd,\n true\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const topResizeHandleStyle: React.CSSProperties = {\n ...handleProps?.style,\n top: `${offset}px`,\n height: handleProps?.size || '16px',\n };\n return (\n <div\n className={clsx(styles['top-resize-handle'], 'tcn-top-resize-handle')}\n onMouseDown={resizeHandler}\n style={topResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["TopResizeHandle","targetRef","handleProps","onHeightResize","onHeightResizeEnd","resizeHandler","createVerticalResizeHandler","offset","topResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4C;AAAA,IAChD,GAAGN,GAAa;AAAA,IAChB,KAAK,GAAGK,CAAM;AAAA,IACd,QAAQL,GAAa,QAAQ;AAAA,EAAA;AAE/B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
1
+ {"version":3,"file":"top_resize_handle.js","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createVerticalResizeHandler } from './resize_handlers.js';\nimport styles from './top_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface TopResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;\n onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;\n}\nexport function TopResizeHandle({\n targetRef,\n handleProps,\n onHeightResize,\n onHeightResizeEnd,\n}: TopResizeHandleProps) {\n const resizeHandler = createVerticalResizeHandler(\n targetRef,\n onHeightResize,\n onHeightResizeEnd,\n true,\n 'top'\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const topResizeHandleStyle: React.CSSProperties = {\n ...handleProps?.style,\n top: `${offset}px`,\n height: handleProps?.size || '16px',\n };\n return (\n <div\n className={clsx(styles['top-resize-handle'], 'tcn-top-resize-handle')}\n onMouseDown={resizeHandler}\n style={topResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["TopResizeHandle","targetRef","handleProps","onHeightResize","onHeightResizeEnd","resizeHandler","createVerticalResizeHandler","offset","topResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4C;AAAA,IAChD,GAAGN,GAAa;AAAA,IAChB,KAAK,GAAGK,CAAM;AAAA,IACd,QAAQL,GAAa,QAAQ;AAAA,EAAA;AAE/B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
@@ -1 +1 @@
1
- {"version":3,"file":"h_collapsible_box.d.ts","sourceRoot":"","sources":["../../src/stacks/h_collapsible_box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,6FAuC1B,CAAC"}
1
+ {"version":3,"file":"h_collapsible_box.d.ts","sourceRoot":"","sources":["../../src/stacks/h_collapsible_box.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,6FAuC1B,CAAC"}
@@ -1,46 +1,46 @@
1
- import { jsx as f } from "react/jsx-runtime";
2
- import t, { useLayoutEffect as p } from "react";
1
+ import { jsx as d } from "react/jsx-runtime";
2
+ import { clsx as u } from "clsx";
3
+ import i, { useLayoutEffect as R } from "react";
3
4
  import "../utils/click_away_listener.js";
4
5
  import "../utils/focus_redirect.js";
5
6
  import "../utils/scroll_away_listener.js";
6
- import { useForkRef as d } from "../utils/hooks/use_fork_ref.js";
7
+ import { useForkRef as x } from "../utils/hooks/use_fork_ref.js";
7
8
  import "../utils/hooks/use_resize_observer.js";
8
9
  import "../utils/dnd/context.js";
9
- import { clsx as u } from "clsx";
10
10
  import "../draggable.module-BgelQsuJ.js";
11
- import { Box as R } from "./box/box.js";
12
- import { s as x } from "../collapsible_box.module-BiS98xXA.js";
13
- import { useIsCollapsed as z } from "./utils/use_is_collapsed.js";
14
- const H = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e }, a) {
15
- const o = t.useRef(null), n = d(a, o), [c, r] = t.useState(!1);
16
- p(() => {
17
- o.current?.style.setProperty("--collapsible-size", i);
18
- }, [i]);
19
- const m = z(l, o) && !l ? null : e.children;
20
- return /* @__PURE__ */ f(
21
- R,
11
+ import { Box as z } from "./box/box.js";
12
+ import { s as b } from "../collapsible_box.module-BiS98xXA.js";
13
+ import { useIsCollapsed as h } from "./utils/use_is_collapsed.js";
14
+ const S = i.forwardRef(function({ open: l = !1, defaultWidth: r = "400px", ...e }, n) {
15
+ const o = i.useRef(null), c = x(n, o), [m, a] = i.useState(!1);
16
+ R(() => {
17
+ o.current?.style.setProperty("--collapsible-size", r);
18
+ }, [r]);
19
+ const f = h(l, o) && !l ? null : e.children;
20
+ return /* @__PURE__ */ d(
21
+ z,
22
22
  {
23
- ref: n,
23
+ ref: c,
24
24
  ...e,
25
25
  "data-is-collapsed": !l,
26
26
  "data-collapse-orientation": "horizontal",
27
- "data-is-resizing": c,
28
- onWidthResize: (s) => {
29
- r(!0), e.onWidthResize?.(s);
27
+ "data-is-resizing": m,
28
+ onWidthResize: (s, t, p) => {
29
+ a(!0), e.onWidthResize?.(s, t, p);
30
30
  },
31
- onWidthResizeEnd: (s) => {
32
- r(!1), e.onWidthResizeEnd?.(s), o.current?.style.setProperty("--collapsible-size", `${s}px`);
31
+ onWidthResizeEnd: (s, t) => {
32
+ a(!1), e.onWidthResizeEnd?.(s, t), o.current?.style.setProperty("--collapsible-size", `${s}px`);
33
33
  },
34
34
  className: u(
35
35
  e.className,
36
- x["collapsible-box"],
36
+ b["collapsible-box"],
37
37
  "tcn-h-collapsible-box"
38
38
  ),
39
- children: m
39
+ children: f
40
40
  }
41
41
  );
42
42
  });
43
43
  export {
44
- H as HCollapsibleBox
44
+ S as HCollapsibleBox
45
45
  };
46
46
  //# sourceMappingURL=h_collapsible_box.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"h_collapsible_box.js","sources":["../../src/stacks/h_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface HCollapsibleBoxProps extends BoxProps {\n open?: boolean;\n defaultWidth?: string;\n}\n\nexport const HCollapsibleBox = React.forwardRef(function CollapsibleBox(\n { open = false, defaultWidth = '400px', ...props }: HCollapsibleBoxProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n const forkRef = useForkRef(ref, collapsibleRef);\n const [resizing, setIsResizing] = React.useState(false);\n\n useLayoutEffect(() => {\n collapsibleRef.current?.style.setProperty('--collapsible-size', defaultWidth);\n }, [defaultWidth]);\n\n const isCollapsed = useIsCollapsed(open, collapsibleRef);\n const children = isCollapsed && !open ? null : props.children;\n\n return (\n <Box\n ref={forkRef}\n {...props}\n data-is-collapsed={!open}\n data-collapse-orientation=\"horizontal\"\n data-is-resizing={resizing}\n onWidthResize={width => {\n setIsResizing(true);\n props.onWidthResize?.(width);\n }}\n onWidthResizeEnd={width => {\n setIsResizing(false);\n props.onWidthResizeEnd?.(width);\n collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);\n }}\n className={clsx(\n props.className,\n styles['collapsible-box'],\n 'tcn-h-collapsible-box'\n )}\n children={children}\n />\n );\n});\n"],"names":["HCollapsibleBox","React","open","defaultWidth","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","width","clsx","styles"],"mappings":";;;;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,cAAAC,IAAe,SAAS,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAY;AAAA,EAC9E,GAAG,CAACA,CAAY,CAAC;AAGjB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,eAAe,CAAAO,MAAS;AACtB,QAAAN,EAAc,EAAI,GAClBN,EAAM,gBAAgBY,CAAK;AAAA,MAC7B;AAAA,MACA,kBAAkB,CAAAA,MAAS;AACzB,QAAAN,EAAc,EAAK,GACnBN,EAAM,mBAAmBY,CAAK,GAC9BV,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAK,IAAI;AAAA,MAC9E;AAAA,MACA,WAAWC;AAAA,QACTb,EAAM;AAAA,QACNc,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
1
+ {"version":3,"file":"h_collapsible_box.js","sources":["../../src/stacks/h_collapsible_box.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface HCollapsibleBoxProps extends BoxProps {\n open?: boolean;\n defaultWidth?: string;\n}\n\nexport const HCollapsibleBox = React.forwardRef(function CollapsibleBox(\n { open = false, defaultWidth = '400px', ...props }: HCollapsibleBoxProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n const forkRef = useForkRef(ref, collapsibleRef);\n const [resizing, setIsResizing] = React.useState(false);\n\n useLayoutEffect(() => {\n collapsibleRef.current?.style.setProperty('--collapsible-size', defaultWidth);\n }, [defaultWidth]);\n\n const isCollapsed = useIsCollapsed(open, collapsibleRef);\n const children = isCollapsed && !open ? null : props.children;\n\n return (\n <Box\n ref={forkRef}\n {...props}\n data-is-collapsed={!open}\n data-collapse-orientation=\"horizontal\"\n data-is-resizing={resizing}\n onWidthResize={(width, origin, delta) => {\n setIsResizing(true);\n props.onWidthResize?.(width, origin, delta);\n }}\n onWidthResizeEnd={(width, origin) => {\n setIsResizing(false);\n props.onWidthResizeEnd?.(width, origin);\n collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);\n }}\n className={clsx(\n props.className,\n styles['collapsible-box'],\n 'tcn-h-collapsible-box'\n )}\n children={children}\n />\n );\n});\n"],"names":["HCollapsibleBox","React","open","defaultWidth","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","width","origin","delta","clsx","styles"],"mappings":";;;;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,cAAAC,IAAe,SAAS,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAY;AAAA,EAC9E,GAAG,CAACA,CAAY,CAAC;AAGjB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,eAAe,CAACO,GAAOC,GAAQC,MAAU;AACvC,QAAAR,EAAc,EAAI,GAClBN,EAAM,gBAAgBY,GAAOC,GAAQC,CAAK;AAAA,MAC5C;AAAA,MACA,kBAAkB,CAACF,GAAOC,MAAW;AACnC,QAAAP,EAAc,EAAK,GACnBN,EAAM,mBAAmBY,GAAOC,CAAM,GACtCX,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAK,IAAI;AAAA,MAC9E;AAAA,MACA,WAAWG;AAAA,QACTf,EAAM;AAAA,QACNgB,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}