@arcanejs/toolkit-frontend 0.10.0 → 0.11.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.
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _chunkGBYIEWGNjs = require('./chunk-GBYIEWGN.js');
3
+ var _chunkR7E6SIN6js = require('./chunk-R7E6SIN6.js');
4
4
 
5
5
 
6
6
  var _chunkMLKGABMKjs = require('./chunk-MLKGABMK.js');
@@ -22,7 +22,7 @@ var Icon = ({
22
22
  }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
23
23
  "span",
24
24
  {
25
- className: _chunkGBYIEWGNjs.cn.call(void 0,
25
+ className: _chunkR7E6SIN6js.cn.call(void 0,
26
26
  `
27
27
  inline-block text-arcane-icon leading-none font-normal tracking-normal
28
28
  whitespace-nowrap
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  cn
3
- } from "./chunk-2HBLGAG3.mjs";
3
+ } from "./chunk-SNIL7DDI.mjs";
4
4
  import {
5
5
  __export
6
6
  } from "./chunk-7P6ASYW6.mjs";
@@ -37,12 +37,49 @@ var usePressable = (click) => {
37
37
  if (touching) {
38
38
  event.preventDefault();
39
39
  setTouching(false);
40
- click();
40
+ click(event);
41
41
  }
42
42
  }
43
43
  }
44
44
  };
45
45
  };
46
+ var useLongPressable = ({
47
+ onPress,
48
+ onRelease
49
+ }) => {
50
+ const [touching, setTouching] = _react.useState.call(void 0, false);
51
+ return _react.useMemo.call(void 0,
52
+ () => ({
53
+ touching,
54
+ handlers: {
55
+ onTouchStart: (e) => {
56
+ setTouching(true);
57
+ onPress(e);
58
+ },
59
+ onMouseDown: (e) => {
60
+ setTouching(true);
61
+ onPress(e);
62
+ },
63
+ onMouseUp: (e) => {
64
+ setTouching(false);
65
+ onRelease(e);
66
+ },
67
+ onTouchMove: (e) => {
68
+ setTouching(false);
69
+ onRelease(e);
70
+ },
71
+ onTouchEnd: (event) => {
72
+ if (touching) {
73
+ event.preventDefault();
74
+ setTouching(false);
75
+ onRelease(event);
76
+ }
77
+ }
78
+ }
79
+ }),
80
+ [touching, onRelease, onPress]
81
+ );
82
+ };
46
83
  function trackTouch(touch, move, end) {
47
84
  const touchMove = (ev) => {
48
85
  ev.preventDefault();
@@ -149,4 +186,5 @@ var usePreferredColorScheme = () => {
149
186
 
150
187
 
151
188
 
152
- exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.trackTouch = trackTouch; exports.cn = cn; exports.calculateClass = calculateClass; exports.VALID_COLOR_SCHEME_PREFS = VALID_COLOR_SCHEME_PREFS; exports.useColorSchemePreferences = useColorSchemePreferences; exports.usePreferredColorScheme = usePreferredColorScheme;
189
+
190
+ exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.useLongPressable = useLongPressable; exports.trackTouch = trackTouch; exports.cn = cn; exports.calculateClass = calculateClass; exports.VALID_COLOR_SCHEME_PREFS = VALID_COLOR_SCHEME_PREFS; exports.useColorSchemePreferences = useColorSchemePreferences; exports.usePreferredColorScheme = usePreferredColorScheme;
@@ -4,7 +4,7 @@ import { clsx } from "clsx";
4
4
  import { twMerge } from "tailwind-merge";
5
5
 
6
6
  // src/util/touch.ts
7
- import { useState } from "react";
7
+ import { useMemo, useState } from "react";
8
8
  function switchToMouseMode(ev) {
9
9
  if (ev.movementX === 0 && ev.movementY === 0) return;
10
10
  document.body.classList.remove("touch-mode");
@@ -37,12 +37,49 @@ var usePressable = (click) => {
37
37
  if (touching) {
38
38
  event.preventDefault();
39
39
  setTouching(false);
40
- click();
40
+ click(event);
41
41
  }
42
42
  }
43
43
  }
44
44
  };
45
45
  };
46
+ var useLongPressable = ({
47
+ onPress,
48
+ onRelease
49
+ }) => {
50
+ const [touching, setTouching] = useState(false);
51
+ return useMemo(
52
+ () => ({
53
+ touching,
54
+ handlers: {
55
+ onTouchStart: (e) => {
56
+ setTouching(true);
57
+ onPress(e);
58
+ },
59
+ onMouseDown: (e) => {
60
+ setTouching(true);
61
+ onPress(e);
62
+ },
63
+ onMouseUp: (e) => {
64
+ setTouching(false);
65
+ onRelease(e);
66
+ },
67
+ onTouchMove: (e) => {
68
+ setTouching(false);
69
+ onRelease(e);
70
+ },
71
+ onTouchEnd: (event) => {
72
+ if (touching) {
73
+ event.preventDefault();
74
+ setTouching(false);
75
+ onRelease(event);
76
+ }
77
+ }
78
+ }
79
+ }),
80
+ [touching, onRelease, onPress]
81
+ );
82
+ };
46
83
  function trackTouch(touch, move, end) {
47
84
  const touchMove = (ev) => {
48
85
  ev.preventDefault();
@@ -143,6 +180,7 @@ export {
143
180
  switchToTouchMode,
144
181
  initialiseListeners,
145
182
  usePressable,
183
+ useLongPressable,
146
184
  trackTouch,
147
185
  cn,
148
186
  calculateClass,
@@ -2,11 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- var _chunkLXNJPBVTjs = require('../../chunk-LXNJPBVT.js');
6
- require('../../chunk-GBYIEWGN.js');
5
+ var _chunkBBUHASWZjs = require('../../chunk-BBUHASWZ.js');
6
+ require('../../chunk-R7E6SIN6.js');
7
7
  require('../../chunk-MLKGABMK.js');
8
8
 
9
9
 
10
10
 
11
11
 
12
- exports.Icon = _chunkLXNJPBVTjs.Icon; exports.TRANSPARENCY_SVG = _chunkLXNJPBVTjs.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkLXNJPBVTjs.TRANSPARENCY_SVG_URI;
12
+ exports.Icon = _chunkBBUHASWZjs.Icon; exports.TRANSPARENCY_SVG = _chunkBBUHASWZjs.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkBBUHASWZjs.TRANSPARENCY_SVG_URI;
@@ -2,8 +2,8 @@ import {
2
2
  Icon,
3
3
  TRANSPARENCY_SVG,
4
4
  TRANSPARENCY_SVG_URI
5
- } from "../../chunk-TOVGDMHN.mjs";
6
- import "../../chunk-2HBLGAG3.mjs";
5
+ } from "../../chunk-DK4BAXVE.mjs";
6
+ import "../../chunk-SNIL7DDI.mjs";
7
7
  import "../../chunk-7P6ASYW6.mjs";
8
8
  export {
9
9
  Icon,
@@ -2,12 +2,12 @@
2
2
 
3
3
 
4
4
 
5
- var _chunkLXNJPBVTjs = require('../chunk-LXNJPBVT.js');
5
+ var _chunkBBUHASWZjs = require('../chunk-BBUHASWZ.js');
6
6
 
7
7
 
8
8
 
9
9
 
10
- var _chunkGBYIEWGNjs = require('../chunk-GBYIEWGN.js');
10
+ var _chunkR7E6SIN6js = require('../chunk-R7E6SIN6.js');
11
11
  require('../chunk-MLKGABMK.js');
12
12
 
13
13
  // src/components/index.tsx
@@ -32,7 +32,7 @@ var Button = (props) => {
32
32
  const { call } = _react2.default.useContext(StageContext);
33
33
  const [localState, setLocalState] = _react2.default.useState(null);
34
34
  const state = _nullishCoalesce(localState, () => ( props.info.state));
35
- const { touching, handlers } = _chunkGBYIEWGNjs.usePressable.call(void 0, async () => {
35
+ const { touching, handlers } = _chunkR7E6SIN6js.usePressable.call(void 0, async () => {
36
36
  try {
37
37
  if (!call) return;
38
38
  setLocalState({ state: "loading" });
@@ -50,7 +50,7 @@ var Button = (props) => {
50
50
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
51
51
  "div",
52
52
  {
53
- className: _chunkGBYIEWGNjs.cn.call(void 0,
53
+ className: _chunkR7E6SIN6js.cn.call(void 0,
54
54
  `
55
55
  relative box-border flex h-arcane-btn cursor-pointer items-center
56
56
  justify-center overflow-visible rounded-arcane-btn border
@@ -74,7 +74,7 @@ var Button = (props) => {
74
74
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
75
75
  "div",
76
76
  {
77
- className: _chunkGBYIEWGNjs.cn.call(void 0,
77
+ className: _chunkR7E6SIN6js.cn.call(void 0,
78
78
  `
79
79
  pointer-events-none absolute -inset-1.5 rounded-md border-2
80
80
  border-transparent bg-transparent transition-colors duration-300
@@ -83,9 +83,9 @@ var Button = (props) => {
83
83
  )
84
84
  }
85
85
  ),
86
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex items-center justify-center px-0.5"), children: [
87
- props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLXNJPBVTjs.Icon, { icon: props.info.icon }),
88
- props.info.text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkGBYIEWGNjs.cn.call(void 0, "px-1"), children: props.info.text })
86
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "flex items-center justify-center px-0.5"), children: [
87
+ props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBBUHASWZjs.Icon, { icon: props.info.icon }),
88
+ props.info.text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkR7E6SIN6js.cn.call(void 0, "px-1"), children: props.info.text })
89
89
  ] })
90
90
  ]
91
91
  }
@@ -117,7 +117,7 @@ var NestedContent = ({ className, children }) => {
117
117
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
118
118
  "div",
119
119
  {
120
- className: _chunkGBYIEWGNjs.cn.call(void 0,
120
+ className: _chunkR7E6SIN6js.cn.call(void 0,
121
121
  "p-2 shadow-arcane-box-inset",
122
122
  color === "dark" && "bg-arcane-bg-dark-1",
123
123
  color === "lighter" && "bg-arcane-bg",
@@ -168,7 +168,7 @@ var Group = ({ className, info }) => {
168
168
  const children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
169
169
  "div",
170
170
  {
171
- className: _chunkGBYIEWGNjs.cn.call(void 0,
171
+ className: _chunkR7E6SIN6js.cn.call(void 0,
172
172
  "flex gap-2",
173
173
  info.direction === "vertical" && "flex-col",
174
174
  info.direction === "horizontal" && "items-center",
@@ -179,7 +179,7 @@ var Group = ({ className, info }) => {
179
179
  );
180
180
  const collapsible = !!info.defaultCollapsibleState;
181
181
  const collapsed = info.defaultCollapsibleState ? groupState.isCollapsed(info.key, info.defaultCollapsibleState) : false;
182
- const collapsePressable = _chunkGBYIEWGNjs.usePressable.call(void 0,
182
+ const collapsePressable = _chunkR7E6SIN6js.usePressable.call(void 0,
183
183
  () => groupState.toggleCollapsed(info.key)
184
184
  );
185
185
  const showTitle = info.title || info.editableTitle;
@@ -209,7 +209,7 @@ var Group = ({ className, info }) => {
209
209
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
210
210
  "div",
211
211
  {
212
- className: _chunkGBYIEWGNjs.cn.call(void 0,
212
+ className: _chunkR7E6SIN6js.cn.call(void 0,
213
213
  hasBorder ? "border border-arcane-btn-border" : "m-0 border-none",
214
214
  className
215
215
  ),
@@ -217,7 +217,7 @@ var Group = ({ className, info }) => {
217
217
  displayHeader ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
218
218
  "div",
219
219
  {
220
- className: _chunkGBYIEWGNjs.cn.call(void 0,
220
+ className: _chunkR7E6SIN6js.cn.call(void 0,
221
221
  `
222
222
  flex items-center gap-0.5 border-b border-arcane-btn-border
223
223
  bg-arcane-btn-border p-1
@@ -227,9 +227,9 @@ var Group = ({ className, info }) => {
227
227
  ),
228
228
  children: [
229
229
  collapsible && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
230
- _chunkLXNJPBVTjs.Icon,
230
+ _chunkBBUHASWZjs.Icon,
231
231
  {
232
- className: _chunkGBYIEWGNjs.cn.call(void 0, "mx-0.5 cursor-pointer"),
232
+ className: _chunkR7E6SIN6js.cn.call(void 0, "mx-0.5 cursor-pointer"),
233
233
  icon: collapsed ? "arrow_right" : "arrow_drop_down",
234
234
  ...collapsePressable.handlers
235
235
  }
@@ -237,7 +237,7 @@ var Group = ({ className, info }) => {
237
237
  _optionalChain([info, 'access', _7 => _7.labels, 'optionalAccess', _8 => _8.map, 'call', _9 => _9((l, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
238
238
  "span",
239
239
  {
240
- className: _chunkGBYIEWGNjs.cn.call(void 0,
240
+ className: _chunkR7E6SIN6js.cn.call(void 0,
241
241
  `
242
242
  mx-0.5 inline-block rounded-arcane-btn border
243
243
  border-arcane-bg-light-1 bg-arcane-bg px-1 py-0.5
@@ -250,7 +250,7 @@ var Group = ({ className, info }) => {
250
250
  showTitle && (info.editableTitle ? editingTitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
251
251
  "input",
252
252
  {
253
- className: _chunkGBYIEWGNjs.cn.call(void 0,
253
+ className: _chunkR7E6SIN6js.cn.call(void 0,
254
254
  `
255
255
  border-none bg-transparent px-0.5 text-arcane-normal
256
256
  text-arcane-text outline-none
@@ -264,7 +264,7 @@ var Group = ({ className, info }) => {
264
264
  ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
265
265
  "span",
266
266
  {
267
- className: _chunkGBYIEWGNjs.cn.call(void 0,
267
+ className: _chunkR7E6SIN6js.cn.call(void 0,
268
268
  `
269
269
  group flex cursor-pointer items-center gap-0.5
270
270
  rounded-arcane-btn px-0.5 text-arcane-normal
@@ -275,9 +275,9 @@ var Group = ({ className, info }) => {
275
275
  children: [
276
276
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title }),
277
277
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
278
- _chunkLXNJPBVTjs.Icon,
278
+ _chunkBBUHASWZjs.Icon,
279
279
  {
280
- className: _chunkGBYIEWGNjs.cn.call(void 0,
280
+ className: _chunkR7E6SIN6js.cn.call(void 0,
281
281
  `
282
282
  text-arcane-text-muted
283
283
  group-hover:text-arcane-hint
@@ -292,10 +292,10 @@ var Group = ({ className, info }) => {
292
292
  collapsible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
293
293
  "span",
294
294
  {
295
- className: _chunkGBYIEWGNjs.cn.call(void 0, "mx-0.5 h-arcane-btn grow cursor-pointer"),
295
+ className: _chunkR7E6SIN6js.cn.call(void 0, "mx-0.5 h-arcane-btn grow cursor-pointer"),
296
296
  ...collapsePressable.handlers
297
297
  }
298
- ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkGBYIEWGNjs.cn.call(void 0, "grow") }),
298
+ ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkR7E6SIN6js.cn.call(void 0, "grow") }),
299
299
  _optionalChain([info, 'access', _12 => _12.headers, 'optionalAccess', _13 => _13.map, 'call', _14 => _14((h) => h.children.map((c) => renderComponent(c)))])
300
300
  ]
301
301
  }
@@ -312,7 +312,7 @@ Group.displayName = "Group";
312
312
  var Label = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
313
313
  "div",
314
314
  {
315
- className: _chunkGBYIEWGNjs.cn.call(void 0,
315
+ className: _chunkR7E6SIN6js.cn.call(void 0,
316
316
  "font-normal whitespace-nowrap",
317
317
  info.bold && "font-bold",
318
318
  className
@@ -326,7 +326,7 @@ var Label = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0
326
326
  var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
327
327
  "div",
328
328
  {
329
- className: _chunkGBYIEWGNjs.cn.call(void 0,
329
+ className: _chunkR7E6SIN6js.cn.call(void 0,
330
330
  `
331
331
  h-arcane-rect min-w-arcane-rect overflow-hidden rounded-arcane-btn
332
332
  border border-arcane-btn-border bg-repeat
@@ -335,10 +335,10 @@ var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
335
335
  className
336
336
  ),
337
337
  style: {
338
- backgroundImage: `url('${_chunkLXNJPBVTjs.TRANSPARENCY_SVG_URI}')`,
338
+ backgroundImage: `url('${_chunkBBUHASWZjs.TRANSPARENCY_SVG_URI}')`,
339
339
  backgroundSize: "10px"
340
340
  },
341
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "size-full"), style: { backgroundColor: info.color } })
341
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "size-full"), style: { backgroundColor: info.color } })
342
342
  }
343
343
  );
344
344
 
@@ -435,7 +435,7 @@ var SliderButton = ({ info, className }) => {
435
435
  touch.pageX
436
436
  );
437
437
  const start = onDown(cursorPosition);
438
- _chunkGBYIEWGNjs.trackTouch.call(void 0,
438
+ _chunkR7E6SIN6js.trackTouch.call(void 0,
439
439
  touch,
440
440
  (p) => {
441
441
  const amntDiff = (p.pageX - originalPageX) / OPEN_SLIDER_INNER_WIDTH;
@@ -472,12 +472,12 @@ var SliderButton = ({ info, className }) => {
472
472
  const valueCSSPercent = value ? (value - info.min) / (info.max - info.min) * 100 + "%" : "0";
473
473
  const gradientStops = info.gradient && info.gradient.map((g) => `${g.color} ${g.position * 100}%`);
474
474
  const sliderGradient = gradientStops ? {
475
- background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkLXNJPBVTjs.TRANSPARENCY_SVG_URI})`
475
+ background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkBBUHASWZjs.TRANSPARENCY_SVG_URI})`
476
476
  } : void 0;
477
477
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
478
478
  "div",
479
479
  {
480
- className: _chunkGBYIEWGNjs.cn.call(void 0,
480
+ className: _chunkR7E6SIN6js.cn.call(void 0,
481
481
  "relative min-h-arcane-btn min-w-arcane-slider-min",
482
482
  info.grow && "grow",
483
483
  state.state === "touching" && "z-arcane-slider-touching",
@@ -486,7 +486,7 @@ var SliderButton = ({ info, className }) => {
486
486
  children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
487
487
  "div",
488
488
  {
489
- className: _chunkGBYIEWGNjs.cn.call(void 0,
489
+ className: _chunkR7E6SIN6js.cn.call(void 0,
490
490
  `
491
491
  absolute inset-y-0 left-0 flex w-full cursor-pointer items-center
492
492
  rounded-arcane-btn border border-arcane-btn-border
@@ -508,7 +508,7 @@ var SliderButton = ({ info, className }) => {
508
508
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
509
509
  "input",
510
510
  {
511
- className: _chunkGBYIEWGNjs.cn.call(void 0,
511
+ className: _chunkR7E6SIN6js.cn.call(void 0,
512
512
  `
513
513
  pointer-events-none -mx-arcane-slider-input-hidden my-0 w-0
514
514
  overflow-hidden rounded-arcane-btn border border-arcane-btn-border
@@ -531,7 +531,7 @@ var SliderButton = ({ info, className }) => {
531
531
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
532
532
  "div",
533
533
  {
534
- className: _chunkGBYIEWGNjs.cn.call(void 0,
534
+ className: _chunkR7E6SIN6js.cn.call(void 0,
535
535
  `
536
536
  -mx-arcane-slider-value-hidden w-arcane-slider-value text-center
537
537
  leading-arcane-slider-value-hidden opacity-0
@@ -544,7 +544,7 @@ var SliderButton = ({ info, className }) => {
544
544
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
545
545
  "div",
546
546
  {
547
- className: _chunkGBYIEWGNjs.cn.call(void 0,
547
+ className: _chunkR7E6SIN6js.cn.call(void 0,
548
548
  `
549
549
  mx-arcane-slider-pad h-arcane-slider-display grow border
550
550
  border-arcane-btn-border bg-arcane-bg-dark-1
@@ -555,7 +555,7 @@ var SliderButton = ({ info, className }) => {
555
555
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
556
556
  "div",
557
557
  {
558
- className: _chunkGBYIEWGNjs.cn.call(void 0,
558
+ className: _chunkR7E6SIN6js.cn.call(void 0,
559
559
  `h-full bg-arcane-hint`,
560
560
  sliderGradient && `border-arcane-btn-border relative border-r-[2px] bg-transparent`,
561
561
  sliderGradient && `before:absolute before:w-[4px] before:-top-[5px] before:-bottom-[5px] before:-right-[3px] before:bg-arcane-btn-border`,
@@ -569,7 +569,7 @@ var SliderButton = ({ info, className }) => {
569
569
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
570
570
  "div",
571
571
  {
572
- className: _chunkGBYIEWGNjs.cn.call(void 0,
572
+ className: _chunkR7E6SIN6js.cn.call(void 0,
573
573
  `
574
574
  -mx-arcane-slider-value-hidden w-arcane-slider-value text-center
575
575
  leading-arcane-slider-value-hidden opacity-0
@@ -621,7 +621,7 @@ var Switch = ({ className, info }) => {
621
621
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
622
622
  "div",
623
623
  {
624
- className: _chunkGBYIEWGNjs.cn.call(void 0, "relative", className),
624
+ className: _chunkR7E6SIN6js.cn.call(void 0, "relative", className),
625
625
  onClick,
626
626
  onTouchStart,
627
627
  onTouchEnd,
@@ -629,7 +629,7 @@ var Switch = ({ className, info }) => {
629
629
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
630
630
  "div",
631
631
  {
632
- className: _chunkGBYIEWGNjs.cn.call(void 0,
632
+ className: _chunkR7E6SIN6js.cn.call(void 0,
633
633
  `
634
634
  pointer-events-none absolute -inset-arcane-touch-indicator
635
635
  rounded-arcane-touch-indicator border-2 border-transparent
@@ -642,7 +642,7 @@ var Switch = ({ className, info }) => {
642
642
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
643
643
  "div",
644
644
  {
645
- className: _chunkGBYIEWGNjs.cn.call(void 0,
645
+ className: _chunkR7E6SIN6js.cn.call(void 0,
646
646
  `
647
647
  relative block h-arcane-switch-knob w-arcane-switch-track
648
648
  min-w-arcane-switch-track overflow-hidden rounded-arcane-btn border
@@ -652,7 +652,7 @@ var Switch = ({ className, info }) => {
652
652
  children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
653
653
  "div",
654
654
  {
655
- className: _chunkGBYIEWGNjs.cn.call(void 0,
655
+ className: _chunkR7E6SIN6js.cn.call(void 0,
656
656
  `absolute top-0 left-0 cursor-pointer transition-all duration-300`,
657
657
  info.state === "on" && "left-arcane-switch-label"
658
658
  ),
@@ -660,7 +660,7 @@ var Switch = ({ className, info }) => {
660
660
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
661
661
  "div",
662
662
  {
663
- className: _chunkGBYIEWGNjs.cn.call(void 0,
663
+ className: _chunkR7E6SIN6js.cn.call(void 0,
664
664
  `
665
665
  absolute top-0 -left-arcane-switch-label h-arcane-switch-knob
666
666
  w-arcane-switch-label bg-arcane-grad-hint-pressed text-center
@@ -674,7 +674,7 @@ var Switch = ({ className, info }) => {
674
674
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
675
675
  "div",
676
676
  {
677
- className: _chunkGBYIEWGNjs.cn.call(void 0,
677
+ className: _chunkR7E6SIN6js.cn.call(void 0,
678
678
  `
679
679
  absolute top-0 left-arcane-switch-off-left h-arcane-switch-knob
680
680
  w-arcane-switch-label bg-arcane-grad-btn-active text-center
@@ -688,7 +688,7 @@ var Switch = ({ className, info }) => {
688
688
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
689
689
  "div",
690
690
  {
691
- className: _chunkGBYIEWGNjs.cn.call(void 0,
691
+ className: _chunkR7E6SIN6js.cn.call(void 0,
692
692
  `
693
693
  absolute -top-px -left-px size-arcane-btn rounded-arcane-btn
694
694
  border border-arcane-btn-border bg-arcane-grad-btn
@@ -719,14 +719,14 @@ var Tabs = (props) => {
719
719
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
720
720
  "div",
721
721
  {
722
- className: _chunkGBYIEWGNjs.cn.call(void 0,
722
+ className: _chunkR7E6SIN6js.cn.call(void 0,
723
723
  "flex flex-col border border-arcane-btn-border bg-arcane-btn-border"
724
724
  ),
725
725
  children: [
726
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex flex-row border-b border-arcane-btn-border"), children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
726
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "flex flex-row border-b border-arcane-btn-border"), children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
727
727
  "div",
728
728
  {
729
- className: _chunkGBYIEWGNjs.cn.call(void 0,
729
+ className: _chunkR7E6SIN6js.cn.call(void 0,
730
730
  `
731
731
  relative mr-px flex h-arcane-tabs-item cursor-pointer
732
732
  items-center bg-arcane-bg-dark-1 px-arcane
@@ -750,7 +750,7 @@ var Tabs = (props) => {
750
750
  currentTab === i ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
751
751
  "span",
752
752
  {
753
- className: _chunkGBYIEWGNjs.cn.call(void 0,
753
+ className: _chunkR7E6SIN6js.cn.call(void 0,
754
754
  "absolute inset-x-2 bottom-1 h-0.5 bg-arcane-hint"
755
755
  )
756
756
  }
@@ -779,7 +779,7 @@ var TextInput = ({ className, info }) => {
779
779
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
780
780
  "input",
781
781
  {
782
- className: _chunkGBYIEWGNjs.cn.call(void 0,
782
+ className: _chunkR7E6SIN6js.cn.call(void 0,
783
783
  `
784
784
  relative box-border overflow-hidden rounded-arcane-btn border
785
785
  border-arcane-btn-border bg-arcane-bg-dark-1 px-1 py-0.5
@@ -833,18 +833,18 @@ var Timeline = (props) => {
833
833
  window.cancelAnimationFrame(frameState.current.animationFrame);
834
834
  };
835
835
  }, [frameState, info.state, timeDifferenceMs]);
836
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "grow", className), children: [
837
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex"), children: [
838
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "grow"), children: [
839
- info.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "mb-2 text-arcane-title font-bold"), children: info.title }),
840
- _optionalChain([info, 'access', _25 => _25.subtitles, 'optionalAccess', _26 => _26.map, 'call', _27 => _27((subtitle, k) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "mb-2 text-arcane-subtitle font-bold"), children: subtitle }, k))])
836
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "grow", className), children: [
837
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "flex"), children: [
838
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "grow"), children: [
839
+ info.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "mb-2 text-arcane-title font-bold"), children: info.title }),
840
+ _optionalChain([info, 'access', _25 => _25.subtitles, 'optionalAccess', _26 => _26.map, 'call', _27 => _27((subtitle, k) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "mb-2 text-arcane-subtitle font-bold"), children: subtitle }, k))])
841
841
  ] }),
842
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex flex-col items-end justify-center"), children: [
842
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "flex flex-col items-end justify-center"), children: [
843
843
  _optionalChain([info, 'access', _28 => _28.source, 'optionalAccess', _29 => _29.name]),
844
844
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
845
- _chunkLXNJPBVTjs.Icon,
845
+ _chunkBBUHASWZjs.Icon,
846
846
  {
847
- className: _chunkGBYIEWGNjs.cn.call(void 0, "text-arcane-timeline-indicator"),
847
+ className: _chunkR7E6SIN6js.cn.call(void 0, "text-arcane-timeline-indicator"),
848
848
  icon: info.state.state === "playing" ? "play_arrow" : "pause"
849
849
  }
850
850
  )
@@ -853,7 +853,7 @@ var Timeline = (props) => {
853
853
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
854
854
  "div",
855
855
  {
856
- className: _chunkGBYIEWGNjs.cn.call(void 0,
856
+ className: _chunkR7E6SIN6js.cn.call(void 0,
857
857
  `
858
858
  h-arcane-timeline-bar w-full border border-arcane-btn-border
859
859
  bg-arcane-btn-border
@@ -862,7 +862,7 @@ var Timeline = (props) => {
862
862
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
863
863
  "div",
864
864
  {
865
- className: _chunkGBYIEWGNjs.cn.call(void 0, "h-full bg-arcane-hint"),
865
+ className: _chunkR7E6SIN6js.cn.call(void 0, "h-full bg-arcane-hint"),
866
866
  style: {
867
867
  width: `${Math.min(100, 100 * currentTimeMillis / info.state.totalTimeMillis)}%`
868
868
  }
@@ -924,4 +924,4 @@ var CORE_FRONTEND_COMPONENT_RENDERER = {
924
924
 
925
925
 
926
926
 
927
- exports.Button = Button; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = Group; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = Label; exports.NestedContent = NestedContent; exports.Rect = Rect; exports.SliderButton = SliderButton; exports.StageContext = StageContext; exports.Switch = Switch; exports.Tabs = Tabs; exports.TextInput = TextInput; exports.Timeline = Timeline; exports.code = _chunkLXNJPBVTjs.core_exports;
927
+ exports.Button = Button; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = Group; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = Label; exports.NestedContent = NestedContent; exports.Rect = Rect; exports.SliderButton = SliderButton; exports.StageContext = StageContext; exports.Switch = Switch; exports.Tabs = Tabs; exports.TextInput = TextInput; exports.Timeline = Timeline; exports.code = _chunkBBUHASWZjs.core_exports;
@@ -2,12 +2,12 @@ import {
2
2
  Icon,
3
3
  TRANSPARENCY_SVG_URI,
4
4
  core_exports
5
- } from "../chunk-TOVGDMHN.mjs";
5
+ } from "../chunk-DK4BAXVE.mjs";
6
6
  import {
7
7
  cn,
8
8
  trackTouch,
9
9
  usePressable
10
- } from "../chunk-2HBLGAG3.mjs";
10
+ } from "../chunk-SNIL7DDI.mjs";
11
11
  import "../chunk-7P6ASYW6.mjs";
12
12
 
13
13
  // src/components/index.tsx
package/dist/styling.js CHANGED
@@ -1,18 +1,18 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
2
2
 
3
3
 
4
- var _chunkGBYIEWGNjs = require('./chunk-GBYIEWGN.js');
4
+ var _chunkR7E6SIN6js = require('./chunk-R7E6SIN6.js');
5
5
  require('./chunk-MLKGABMK.js');
6
6
 
7
7
  // src/styling.tsx
8
8
  var _jsxruntime = require('react/jsx-runtime');
9
9
  var ThemeRoot = ({ children, rootProps }) => {
10
- const { colorSchemePreference } = _chunkGBYIEWGNjs.useColorSchemePreferences.call(void 0, );
10
+ const { colorSchemePreference } = _chunkR7E6SIN6js.useColorSchemePreferences.call(void 0, );
11
11
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
12
12
  "div",
13
13
  {
14
14
  ...rootProps,
15
- className: _chunkGBYIEWGNjs.calculateClass.call(void 0,
15
+ className: _chunkR7E6SIN6js.calculateClass.call(void 0,
16
16
  "arcane-theme-root",
17
17
  `theme-${colorSchemePreference}`,
18
18
  _optionalChain([rootProps, 'optionalAccess', _ => _.className])
package/dist/styling.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  calculateClass,
3
3
  useColorSchemePreferences
4
- } from "./chunk-2HBLGAG3.mjs";
4
+ } from "./chunk-SNIL7DDI.mjs";
5
5
  import "./chunk-7P6ASYW6.mjs";
6
6
 
7
7
  // src/styling.tsx
@@ -3,7 +3,8 @@ import { ClassValue } from 'clsx';
3
3
  declare function switchToMouseMode(ev: MouseEvent): void;
4
4
  declare function switchToTouchMode(): void;
5
5
  declare function initialiseListeners(): void;
6
- declare const usePressable: (click: () => unknown) => {
6
+ type PressableOnClickListener = (event: React.MouseEvent<unknown> | React.TouchEvent<unknown>) => unknown;
7
+ declare const usePressable: (click: PressableOnClickListener) => {
7
8
  touching: boolean;
8
9
  handlers: {
9
10
  onClick: React.MouseEventHandler<unknown>;
@@ -12,6 +13,19 @@ declare const usePressable: (click: () => unknown) => {
12
13
  onTouchEnd: React.TouchEventHandler<unknown>;
13
14
  };
14
15
  };
16
+ declare const useLongPressable: ({ onPress, onRelease, }: {
17
+ onPress: PressableOnClickListener;
18
+ onRelease: PressableOnClickListener;
19
+ }) => {
20
+ touching: boolean;
21
+ handlers: {
22
+ onMouseDown: React.MouseEventHandler<unknown>;
23
+ onMouseUp: React.MouseEventHandler<unknown>;
24
+ onTouchStart: React.TouchEventHandler<unknown>;
25
+ onTouchMove: React.TouchEventHandler<unknown>;
26
+ onTouchEnd: React.TouchEventHandler<unknown>;
27
+ };
28
+ };
15
29
  declare function trackTouch(touch: React.Touch, move: (pos: {
16
30
  pageX: number;
17
31
  pageY: number;
@@ -30,4 +44,4 @@ declare const useColorSchemePreferences: () => {
30
44
  };
31
45
  declare const usePreferredColorScheme: () => 'dark' | 'light';
32
46
 
33
- export { VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };
47
+ export { type PressableOnClickListener, VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, useLongPressable, usePreferredColorScheme, usePressable };
@@ -3,7 +3,8 @@ import { ClassValue } from 'clsx';
3
3
  declare function switchToMouseMode(ev: MouseEvent): void;
4
4
  declare function switchToTouchMode(): void;
5
5
  declare function initialiseListeners(): void;
6
- declare const usePressable: (click: () => unknown) => {
6
+ type PressableOnClickListener = (event: React.MouseEvent<unknown> | React.TouchEvent<unknown>) => unknown;
7
+ declare const usePressable: (click: PressableOnClickListener) => {
7
8
  touching: boolean;
8
9
  handlers: {
9
10
  onClick: React.MouseEventHandler<unknown>;
@@ -12,6 +13,19 @@ declare const usePressable: (click: () => unknown) => {
12
13
  onTouchEnd: React.TouchEventHandler<unknown>;
13
14
  };
14
15
  };
16
+ declare const useLongPressable: ({ onPress, onRelease, }: {
17
+ onPress: PressableOnClickListener;
18
+ onRelease: PressableOnClickListener;
19
+ }) => {
20
+ touching: boolean;
21
+ handlers: {
22
+ onMouseDown: React.MouseEventHandler<unknown>;
23
+ onMouseUp: React.MouseEventHandler<unknown>;
24
+ onTouchStart: React.TouchEventHandler<unknown>;
25
+ onTouchMove: React.TouchEventHandler<unknown>;
26
+ onTouchEnd: React.TouchEventHandler<unknown>;
27
+ };
28
+ };
15
29
  declare function trackTouch(touch: React.Touch, move: (pos: {
16
30
  pageX: number;
17
31
  pageY: number;
@@ -30,4 +44,4 @@ declare const useColorSchemePreferences: () => {
30
44
  };
31
45
  declare const usePreferredColorScheme: () => 'dark' | 'light';
32
46
 
33
- export { VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };
47
+ export { type PressableOnClickListener, VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, useLongPressable, usePreferredColorScheme, usePressable };
@@ -9,7 +9,8 @@
9
9
 
10
10
 
11
11
 
12
- var _chunkGBYIEWGNjs = require('../chunk-GBYIEWGN.js');
12
+
13
+ var _chunkR7E6SIN6js = require('../chunk-R7E6SIN6.js');
13
14
  require('../chunk-MLKGABMK.js');
14
15
 
15
16
 
@@ -22,4 +23,5 @@ require('../chunk-MLKGABMK.js');
22
23
 
23
24
 
24
25
 
25
- exports.VALID_COLOR_SCHEME_PREFS = _chunkGBYIEWGNjs.VALID_COLOR_SCHEME_PREFS; exports.calculateClass = _chunkGBYIEWGNjs.calculateClass; exports.cn = _chunkGBYIEWGNjs.cn; exports.initialiseListeners = _chunkGBYIEWGNjs.initialiseListeners; exports.switchToMouseMode = _chunkGBYIEWGNjs.switchToMouseMode; exports.switchToTouchMode = _chunkGBYIEWGNjs.switchToTouchMode; exports.trackTouch = _chunkGBYIEWGNjs.trackTouch; exports.useColorSchemePreferences = _chunkGBYIEWGNjs.useColorSchemePreferences; exports.usePreferredColorScheme = _chunkGBYIEWGNjs.usePreferredColorScheme; exports.usePressable = _chunkGBYIEWGNjs.usePressable;
26
+
27
+ exports.VALID_COLOR_SCHEME_PREFS = _chunkR7E6SIN6js.VALID_COLOR_SCHEME_PREFS; exports.calculateClass = _chunkR7E6SIN6js.calculateClass; exports.cn = _chunkR7E6SIN6js.cn; exports.initialiseListeners = _chunkR7E6SIN6js.initialiseListeners; exports.switchToMouseMode = _chunkR7E6SIN6js.switchToMouseMode; exports.switchToTouchMode = _chunkR7E6SIN6js.switchToTouchMode; exports.trackTouch = _chunkR7E6SIN6js.trackTouch; exports.useColorSchemePreferences = _chunkR7E6SIN6js.useColorSchemePreferences; exports.useLongPressable = _chunkR7E6SIN6js.useLongPressable; exports.usePreferredColorScheme = _chunkR7E6SIN6js.usePreferredColorScheme; exports.usePressable = _chunkR7E6SIN6js.usePressable;
@@ -7,9 +7,10 @@ import {
7
7
  switchToTouchMode,
8
8
  trackTouch,
9
9
  useColorSchemePreferences,
10
+ useLongPressable,
10
11
  usePreferredColorScheme,
11
12
  usePressable
12
- } from "../chunk-2HBLGAG3.mjs";
13
+ } from "../chunk-SNIL7DDI.mjs";
13
14
  import "../chunk-7P6ASYW6.mjs";
14
15
  export {
15
16
  VALID_COLOR_SCHEME_PREFS,
@@ -20,6 +21,7 @@ export {
20
21
  switchToTouchMode,
21
22
  trackTouch,
22
23
  useColorSchemePreferences,
24
+ useLongPressable,
23
25
  usePreferredColorScheme,
24
26
  usePressable
25
27
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcanejs/toolkit-frontend",
3
- "version": "0.10.0",
3
+ "version": "0.11.0",
4
4
  "private": false,
5
5
  "description": "Library of the frontend react components used to render the @arcanejs Toolkit",
6
6
  "keywords": [],