@arcanejs/toolkit-frontend 0.7.0 → 0.8.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 (17) hide show
  1. package/dist/{chunk-BQS6YM6U.mjs → chunk-6XOE7F7U.mjs} +1 -1
  2. package/dist/{chunk-MESQQRK3.mjs → chunk-GMPDVDSW.mjs} +1 -1
  3. package/dist/{chunk-E7JSREGM.mjs → chunk-PTANIWKR.mjs} +53 -1
  4. package/dist/{chunk-7VTNOX5O.js → chunk-TMN35K5Y.js} +54 -2
  5. package/dist/{chunk-T3QSZARM.js → chunk-UHFE2X4V.js} +3 -3
  6. package/dist/{chunk-WVMAJYGI.js → chunk-ZHJBPEPY.js} +2 -2
  7. package/dist/components/core/index.js +3 -3
  8. package/dist/components/core/index.mjs +2 -2
  9. package/dist/components/index.js +31 -31
  10. package/dist/components/index.mjs +3 -3
  11. package/dist/styling.js +3 -3
  12. package/dist/styling.mjs +2 -2
  13. package/dist/util/index.d.mts +7 -1
  14. package/dist/util/index.d.ts +7 -1
  15. package/dist/util/index.js +6 -2
  16. package/dist/util/index.mjs +5 -1
  17. package/package.json +1 -1
package/dist/{chunk-BQS6YM6U.mjs → chunk-6XOE7F7U.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  usePreferredColorScheme
3
- } from "./chunk-E7JSREGM.mjs";
3
+ } from "./chunk-PTANIWKR.mjs";
4
4
 
5
5
  // src/styling.tsx
6
6
  import {
package/dist/{chunk-MESQQRK3.mjs → chunk-GMPDVDSW.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  __export,
3
3
  calculateClass
4
- } from "./chunk-E7JSREGM.mjs";
4
+ } from "./chunk-PTANIWKR.mjs";
5
5
 
6
6
  // src/components/core/index.ts
7
7
  var core_exports = {};
package/dist/{chunk-E7JSREGM.mjs → chunk-PTANIWKR.mjs} RENAMED
@@ -73,7 +73,57 @@ function trackTouch(touch, move, end) {
73
73
 
74
74
  // src/util/index.ts
75
75
  var calculateClass = (...args) => args.filter((a) => !!a).join(" ");
76
+ var COLOR_SCHEME_SETTINGS = "arcane-color-scheme-preference";
77
+ var VALID_COLOR_SCHEME_PREFS = ["auto", "dark", "light"];
78
+ var isValidColorSchemePreference = (value) => {
79
+ return VALID_COLOR_SCHEME_PREFS.includes(value);
80
+ };
81
+ var useColorSchemePreferences = () => {
82
+ if (typeof window === "undefined") {
83
+ return {
84
+ colorSchemePreference: "auto",
85
+ setColorSchemePreference: () => {
86
+ }
87
+ };
88
+ }
89
+ const [preference, setPreference] = useState2(
90
+ window.localStorage.getItem(
91
+ COLOR_SCHEME_SETTINGS
92
+ ) || "auto"
93
+ );
94
+ const setColorSchemePreference = (newPreference) => {
95
+ if (!isValidColorSchemePreference(newPreference)) {
96
+ throw new Error(`Invalid color scheme preference: ${newPreference}`);
97
+ }
98
+ window.localStorage.setItem(COLOR_SCHEME_SETTINGS, newPreference);
99
+ window.dispatchEvent(
100
+ new StorageEvent("storage", {
101
+ key: COLOR_SCHEME_SETTINGS,
102
+ newValue: newPreference
103
+ })
104
+ );
105
+ };
106
+ useEffect(() => {
107
+ const onStorageChange = (event) => {
108
+ if (event.key === COLOR_SCHEME_SETTINGS) {
109
+ const newValue = event.newValue;
110
+ if (isValidColorSchemePreference(newValue)) {
111
+ setPreference(newValue);
112
+ }
113
+ }
114
+ };
115
+ window.addEventListener("storage", onStorageChange);
116
+ return () => {
117
+ window.removeEventListener("storage", onStorageChange);
118
+ };
119
+ }, []);
120
+ return {
121
+ colorSchemePreference: isValidColorSchemePreference(preference) ? preference : "auto",
122
+ setColorSchemePreference
123
+ };
124
+ };
76
125
  var usePreferredColorScheme = () => {
126
+ const { colorSchemePreference } = useColorSchemePreferences();
77
127
  const [theme, setTheme] = useState2("light");
78
128
  useEffect(() => {
79
129
  if (typeof window !== "undefined") {
@@ -88,7 +138,7 @@ var usePreferredColorScheme = () => {
88
138
  };
89
139
  }
90
140
  }, []);
91
- return theme;
141
+ return colorSchemePreference === "auto" ? theme : colorSchemePreference;
92
142
  };
93
143
 
94
144
  export {
@@ -99,5 +149,7 @@ export {
99
149
  usePressable,
100
150
  trackTouch,
101
151
  calculateClass,
152
+ VALID_COLOR_SCHEME_PREFS,
153
+ useColorSchemePreferences,
102
154
  usePreferredColorScheme
103
155
  };
package/dist/{chunk-7VTNOX5O.js → chunk-TMN35K5Y.js} RENAMED
@@ -73,7 +73,57 @@ function trackTouch(touch, move, end) {
73
73
 
74
74
  // src/util/index.ts
75
75
  var calculateClass = (...args) => args.filter((a) => !!a).join(" ");
76
+ var COLOR_SCHEME_SETTINGS = "arcane-color-scheme-preference";
77
+ var VALID_COLOR_SCHEME_PREFS = ["auto", "dark", "light"];
78
+ var isValidColorSchemePreference = (value) => {
79
+ return VALID_COLOR_SCHEME_PREFS.includes(value);
80
+ };
81
+ var useColorSchemePreferences = () => {
82
+ if (typeof window === "undefined") {
83
+ return {
84
+ colorSchemePreference: "auto",
85
+ setColorSchemePreference: () => {
86
+ }
87
+ };
88
+ }
89
+ const [preference, setPreference] = _react.useState.call(void 0,
90
+ window.localStorage.getItem(
91
+ COLOR_SCHEME_SETTINGS
92
+ ) || "auto"
93
+ );
94
+ const setColorSchemePreference = (newPreference) => {
95
+ if (!isValidColorSchemePreference(newPreference)) {
96
+ throw new Error(`Invalid color scheme preference: ${newPreference}`);
97
+ }
98
+ window.localStorage.setItem(COLOR_SCHEME_SETTINGS, newPreference);
99
+ window.dispatchEvent(
100
+ new StorageEvent("storage", {
101
+ key: COLOR_SCHEME_SETTINGS,
102
+ newValue: newPreference
103
+ })
104
+ );
105
+ };
106
+ _react.useEffect.call(void 0, () => {
107
+ const onStorageChange = (event) => {
108
+ if (event.key === COLOR_SCHEME_SETTINGS) {
109
+ const newValue = event.newValue;
110
+ if (isValidColorSchemePreference(newValue)) {
111
+ setPreference(newValue);
112
+ }
113
+ }
114
+ };
115
+ window.addEventListener("storage", onStorageChange);
116
+ return () => {
117
+ window.removeEventListener("storage", onStorageChange);
118
+ };
119
+ }, []);
120
+ return {
121
+ colorSchemePreference: isValidColorSchemePreference(preference) ? preference : "auto",
122
+ setColorSchemePreference
123
+ };
124
+ };
76
125
  var usePreferredColorScheme = () => {
126
+ const { colorSchemePreference } = useColorSchemePreferences();
77
127
  const [theme, setTheme] = _react.useState.call(void 0, "light");
78
128
  _react.useEffect.call(void 0, () => {
79
129
  if (typeof window !== "undefined") {
@@ -88,7 +138,7 @@ var usePreferredColorScheme = () => {
88
138
  };
89
139
  }
90
140
  }, []);
91
- return theme;
141
+ return colorSchemePreference === "auto" ? theme : colorSchemePreference;
92
142
  };
93
143
 
94
144
 
@@ -100,4 +150,6 @@ var usePreferredColorScheme = () => {
100
150
 
101
151
 
102
152
 
103
- exports.__export = __export; exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.trackTouch = trackTouch; exports.calculateClass = calculateClass; exports.usePreferredColorScheme = usePreferredColorScheme;
153
+
154
+
155
+ exports.__export = __export; exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.trackTouch = trackTouch; exports.calculateClass = calculateClass; exports.VALID_COLOR_SCHEME_PREFS = VALID_COLOR_SCHEME_PREFS; exports.useColorSchemePreferences = useColorSchemePreferences; exports.usePreferredColorScheme = usePreferredColorScheme;
package/dist/{chunk-T3QSZARM.js → chunk-UHFE2X4V.js} RENAMED
@@ -1,11 +1,11 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _chunk7VTNOX5Ojs = require('./chunk-7VTNOX5O.js');
4
+ var _chunkTMN35K5Yjs = require('./chunk-TMN35K5Y.js');
5
5
 
6
6
  // src/components/core/index.ts
7
7
  var core_exports = {};
8
- _chunk7VTNOX5Ojs.__export.call(void 0, core_exports, {
8
+ _chunkTMN35K5Yjs.__export.call(void 0, core_exports, {
9
9
  Icon: () => Icon,
10
10
  TRANSPARENCY_SVG: () => TRANSPARENCY_SVG,
11
11
  TRANSPARENCY_SVG_URI: () => TRANSPARENCY_SVG_URI
@@ -31,7 +31,7 @@ var Span = _styledcomponents.styled.span`
31
31
  'wght' 300,
32
32
  'GRAD' -25;
33
33
  `;
34
- var Icon = ({ icon, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Span, { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, props.className, ICON_CLASS), ...props, children: icon });
34
+ var Icon = ({ icon, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Span, { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, props.className, ICON_CLASS), ...props, children: icon });
35
35
 
36
36
  // src/components/core/index.ts
37
37
  var TRANSPARENCY_SVG = `
package/dist/{chunk-WVMAJYGI.js → chunk-ZHJBPEPY.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _chunk7VTNOX5Ojs = require('./chunk-7VTNOX5O.js');
3
+ var _chunkTMN35K5Yjs = require('./chunk-TMN35K5Y.js');
4
4
 
5
5
  // src/styling.tsx
6
6
 
@@ -195,7 +195,7 @@ var touchIndicatorTouching = _styledcomponents.css`
195
195
  transition: border-color 0s;
196
196
  `;
197
197
  var PreferredThemeProvider = ({ dark, light, children }) => {
198
- const theme = _chunk7VTNOX5Ojs.usePreferredColorScheme.call(void 0, );
198
+ const theme = _chunkTMN35K5Yjs.usePreferredColorScheme.call(void 0, );
199
199
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styledcomponents.ThemeProvider, { theme: theme === "dark" ? dark : light, children });
200
200
  };
201
201
 
package/dist/components/core/index.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
 
4
4
 
5
- var _chunkT3QSZARMjs = require('../../chunk-T3QSZARM.js');
6
- require('../../chunk-7VTNOX5O.js');
5
+ var _chunkUHFE2X4Vjs = require('../../chunk-UHFE2X4V.js');
6
+ require('../../chunk-TMN35K5Y.js');
7
7
 
8
8
 
9
9
 
10
10
 
11
- exports.Icon = _chunkT3QSZARMjs.Icon; exports.TRANSPARENCY_SVG = _chunkT3QSZARMjs.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkT3QSZARMjs.TRANSPARENCY_SVG_URI;
11
+ exports.Icon = _chunkUHFE2X4Vjs.Icon; exports.TRANSPARENCY_SVG = _chunkUHFE2X4Vjs.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkUHFE2X4Vjs.TRANSPARENCY_SVG_URI;
package/dist/components/core/index.mjs CHANGED
@@ -2,8 +2,8 @@ import {
2
2
  Icon,
3
3
  TRANSPARENCY_SVG,
4
4
  TRANSPARENCY_SVG_URI
5
- } from "../../chunk-MESQQRK3.mjs";
6
- import "../../chunk-E7JSREGM.mjs";
5
+ } from "../../chunk-GMPDVDSW.mjs";
6
+ import "../../chunk-PTANIWKR.mjs";
7
7
  export {
8
8
  Icon,
9
9
  TRANSPARENCY_SVG,
package/dist/components/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- var _chunkT3QSZARMjs = require('../chunk-T3QSZARM.js');
5
+ var _chunkUHFE2X4Vjs = require('../chunk-UHFE2X4V.js');
6
6
 
7
7
 
8
8
 
@@ -11,12 +11,12 @@ var _chunkT3QSZARMjs = require('../chunk-T3QSZARM.js');
11
11
 
12
12
 
13
13
 
14
- var _chunkWVMAJYGIjs = require('../chunk-WVMAJYGI.js');
14
+ var _chunkZHJBPEPYjs = require('../chunk-ZHJBPEPY.js');
15
15
 
16
16
 
17
17
 
18
18
 
19
- var _chunk7VTNOX5Ojs = require('../chunk-7VTNOX5O.js');
19
+ var _chunkTMN35K5Yjs = require('../chunk-TMN35K5Y.js');
20
20
 
21
21
  // src/components/index.tsx
22
22
  var _core = require('@arcanejs/protocol/core');
@@ -58,7 +58,7 @@ var Button = (props) => {
58
58
  const { call } = _react2.default.useContext(StageContext);
59
59
  const [localState, setLocalState] = _react2.default.useState(null);
60
60
  const state = _nullishCoalesce(localState, () => ( props.info.state));
61
- const { touching, handlers } = _chunk7VTNOX5Ojs.usePressable.call(void 0, async () => {
61
+ const { touching, handlers } = _chunkTMN35K5Yjs.usePressable.call(void 0, async () => {
62
62
  try {
63
63
  if (!call) return;
64
64
  setLocalState({ state: "loading" });
@@ -76,7 +76,7 @@ var Button = (props) => {
76
76
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
77
77
  "div",
78
78
  {
79
- className: _chunk7VTNOX5Ojs.calculateClass.call(void 0,
79
+ className: _chunkTMN35K5Yjs.calculateClass.call(void 0,
80
80
  props.className,
81
81
  (touching || state.state === "pressed") && TOUCHING_CLASS,
82
82
  state.state === "loading" && LOADING_CLASS,
@@ -87,7 +87,7 @@ var Button = (props) => {
87
87
  children: [
88
88
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: TOUCH_INDICATOR_CLASS }),
89
89
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonContents, { children: [
90
- props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT3QSZARMjs.Icon, { icon: props.info.icon }),
90
+ props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUHFE2X4Vjs.Icon, { icon: props.info.icon }),
91
91
  props.info.text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonLabel, { children: props.info.text })
92
92
  ] })
93
93
  ]
@@ -95,14 +95,14 @@ var Button = (props) => {
95
95
  );
96
96
  };
97
97
  var StyledButton = _styledcomponents.styled.call(void 0, Button)`
98
- ${_chunkWVMAJYGIjs.rectButton}
98
+ ${_chunkZHJBPEPYjs.rectButton}
99
99
  outline: none;
100
100
  height: 30px;
101
101
  position: relative;
102
102
  overflow: visible;
103
103
 
104
104
  .${TOUCH_INDICATOR_CLASS} {
105
- ${_chunkWVMAJYGIjs.touchIndicatorNormal}
105
+ ${_chunkZHJBPEPYjs.touchIndicatorNormal}
106
106
  }
107
107
 
108
108
  &.${ERROR_CLASS} {
@@ -111,10 +111,10 @@ var StyledButton = _styledcomponents.styled.call(void 0, Button)`
111
111
  }
112
112
 
113
113
  &.${TOUCHING_CLASS}, &.${LOADING_CLASS} {
114
- ${_chunkWVMAJYGIjs.buttonStateNormalActive}
114
+ ${_chunkZHJBPEPYjs.buttonStateNormalActive}
115
115
 
116
116
  .${TOUCH_INDICATOR_CLASS} {
117
- ${_chunkWVMAJYGIjs.touchIndicatorTouching}
117
+ ${_chunkZHJBPEPYjs.touchIndicatorTouching}
118
118
  }
119
119
  }
120
120
  `;
@@ -143,7 +143,7 @@ function nextColor(currentColor) {
143
143
  var LastNestedColor = _react2.default.createContext("dark");
144
144
  var NestedContent = ({ className, children }) => {
145
145
  const color = _react2.default.useContext(LastNestedColor);
146
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, `color-${color}`), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LastNestedColor.Provider, { value: nextColor(color), children }) });
146
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, `color-${color}`), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LastNestedColor.Provider, { value: nextColor(color), children }) });
147
147
  };
148
148
  NestedContent.displayName = "NestedContent";
149
149
  var StyledNestedContent = _styledcomponents.styled.call(void 0, NestedContent)`
@@ -165,7 +165,7 @@ var StyledNestedContent = _styledcomponents.styled.call(void 0, NestedContent)`
165
165
 
166
166
  // src/components/group.tsx
167
167
 
168
- var CollapseIcon = _styledcomponents.styled.call(void 0, (0, _chunkT3QSZARMjs.Icon))({
168
+ var CollapseIcon = _styledcomponents.styled.call(void 0, (0, _chunkUHFE2X4Vjs.Icon))({
169
169
  cursor: "pointer"
170
170
  });
171
171
  var Header = _styledcomponents.styled.div`
@@ -277,7 +277,7 @@ var Group = ({ className, info }) => {
277
277
  const children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GroupChildren, { info, children: info.children.map(renderComponent) });
278
278
  const collapsible = !!info.defaultCollapsibleState;
279
279
  const collapsed = info.defaultCollapsibleState ? groupState.isCollapsed(info.key, info.defaultCollapsibleState) : false;
280
- const collapsePressable = _chunk7VTNOX5Ojs.usePressable.call(void 0,
280
+ const collapsePressable = _chunkTMN35K5Yjs.usePressable.call(void 0,
281
281
  () => groupState.toggleCollapsed(info.key)
282
282
  );
283
283
  const showTitle = info.title || info.editableTitle;
@@ -304,11 +304,11 @@ var Group = ({ className, info }) => {
304
304
  };
305
305
  const hasBorder = info.border || displayHeader;
306
306
  const childrenElements = hasBorder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledNestedContent, { children }) : children;
307
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, !hasBorder && "no-border"), children: [
307
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, !hasBorder && "no-border"), children: [
308
308
  displayHeader ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
309
309
  Header,
310
310
  {
311
- className: _chunk7VTNOX5Ojs.calculateClass.call(void 0,
311
+ className: _chunkTMN35K5Yjs.calculateClass.call(void 0,
312
312
  collapsePressable.touching && "touching",
313
313
  collapsible && collapsed && "collapsed"
314
314
  ),
@@ -331,7 +331,7 @@ var Group = ({ className, info }) => {
331
331
  }
332
332
  ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, EditableTitle, { onClick: () => setEditingTitle(true), children: [
333
333
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title }),
334
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT3QSZARMjs.Icon, { className: "icon", icon: "edit" })
334
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUHFE2X4Vjs.Icon, { className: "icon", icon: "edit" })
335
335
  ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title })),
336
336
  collapsible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseBar, { ...collapsePressable.handlers }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Grow, {}),
337
337
  _optionalChain([info, 'access', _12 => _12.headers, 'optionalAccess', _13 => _13.map, 'call', _14 => _14((h) => h.children.map((c) => renderComponent(c)))])
@@ -375,7 +375,7 @@ var Wrapper = _styledcomponents.styled.div`
375
375
  height: 30px;
376
376
  border-radius: 3px;
377
377
  overflow: hidden;
378
- background: url('${_chunkT3QSZARMjs.TRANSPARENCY_SVG_URI}');
378
+ background: url('${_chunkUHFE2X4Vjs.TRANSPARENCY_SVG_URI}');
379
379
  background-repeat: repeat;
380
380
  background-size: 10px;
381
381
  border: 1px solid ${(p) => p.theme.borderDark};
@@ -388,7 +388,7 @@ var Inner = _styledcomponents.styled.div`
388
388
  width: 100%;
389
389
  height: 100%;
390
390
  `;
391
- var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Wrapper, { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, info.grow && CLS_GROW), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Inner, { style: { backgroundColor: info.color } }) });
391
+ var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Wrapper, { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, info.grow && CLS_GROW), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Inner, { style: { backgroundColor: info.color } }) });
392
392
 
393
393
  // src/components/slider-button.tsx
394
394
 
@@ -488,7 +488,7 @@ var SliderButton = ({ info, className }) => {
488
488
  touch.pageX
489
489
  );
490
490
  const start = onDown(cursorPosition);
491
- _chunk7VTNOX5Ojs.trackTouch.call(void 0,
491
+ _chunkTMN35K5Yjs.trackTouch.call(void 0,
492
492
  touch,
493
493
  (p) => {
494
494
  const amntDiff = (p.pageX - originalPageX) / OPEN_SLIDER_INNER_WIDTH;
@@ -525,12 +525,12 @@ var SliderButton = ({ info, className }) => {
525
525
  const valueCSSPercent = value ? (value - info.min) / (info.max - info.min) * 100 + "%" : "0";
526
526
  const gradientStops = info.gradient && info.gradient.map((g) => `${g.color} ${g.position * 100}%`);
527
527
  const sliderGradient = gradientStops ? {
528
- background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkT3QSZARMjs.TRANSPARENCY_SVG_URI})`
528
+ background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkUHFE2X4Vjs.TRANSPARENCY_SVG_URI})`
529
529
  } : void 0;
530
530
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
531
531
  "div",
532
532
  {
533
- className: _chunk7VTNOX5Ojs.calculateClass.call(void 0,
533
+ className: _chunkTMN35K5Yjs.calculateClass.call(void 0,
534
534
  className,
535
535
  `state-${state.state}`,
536
536
  info.grow && CLASS_GROW
@@ -558,7 +558,7 @@ var SliderButton = ({ info, className }) => {
558
558
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
559
559
  "div",
560
560
  {
561
- className: _chunk7VTNOX5Ojs.calculateClass.call(void 0,
561
+ className: _chunkTMN35K5Yjs.calculateClass.call(void 0,
562
562
  CLASS_SLIDER_DISPLAY,
563
563
  sliderGradient && CLASS_GRADIENT
564
564
  ),
@@ -595,7 +595,7 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
595
595
  transition: all 200ms;
596
596
  border-radius: 3px;
597
597
  border: 1px solid ${(p) => p.theme.borderDark};
598
- ${_chunkWVMAJYGIjs.buttonStateNormal}
598
+ ${_chunkZHJBPEPYjs.buttonStateNormal}
599
599
 
600
600
  > input {
601
601
  color: ${(p) => p.theme.textNormal};
@@ -664,13 +664,13 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
664
664
  }
665
665
 
666
666
  &:hover {
667
- ${_chunkWVMAJYGIjs.buttonStateNormalHover}
667
+ ${_chunkZHJBPEPYjs.buttonStateNormalHover}
668
668
  }
669
669
  }
670
670
 
671
671
  &.state-mouse-down {
672
672
  > .inner {
673
- ${_chunkWVMAJYGIjs.buttonPressed}
673
+ ${_chunkZHJBPEPYjs.buttonPressed}
674
674
  }
675
675
  }
676
676
 
@@ -738,7 +738,7 @@ var Switch = ({ className, info }) => {
738
738
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
739
739
  "div",
740
740
  {
741
- className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, touching && CLASS_TOUCHING),
741
+ className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, touching && CLASS_TOUCHING),
742
742
  onClick,
743
743
  onTouchStart,
744
744
  onTouchEnd,
@@ -827,12 +827,12 @@ var StyledSwitch = _styledcomponents.styled.call(void 0, Switch)`
827
827
  }
828
828
 
829
829
  .${TOUCH_INDICATOR_CLASS2} {
830
- ${_chunkWVMAJYGIjs.touchIndicatorNormal}
830
+ ${_chunkZHJBPEPYjs.touchIndicatorNormal}
831
831
  }
832
832
 
833
833
  &.${CLASS_TOUCHING} {
834
834
  .${TOUCH_INDICATOR_CLASS2} {
835
- ${_chunkWVMAJYGIjs.touchIndicatorTouching}
835
+ ${_chunkZHJBPEPYjs.touchIndicatorTouching}
836
836
  }
837
837
  }
838
838
  `;
@@ -887,7 +887,7 @@ var Tabs = (props) => {
887
887
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabList, { children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
888
888
  TabItem,
889
889
  {
890
- className: _chunk7VTNOX5Ojs.calculateClass.call(void 0,
890
+ className: _chunkTMN35K5Yjs.calculateClass.call(void 0,
891
891
  touching === i && "touching",
892
892
  currentTab === i && "current"
893
893
  ),
@@ -973,7 +973,7 @@ var SourceData = _styledcomponents.styled.div`
973
973
  align-items: end;
974
974
  justify-content: center;
975
975
  `;
976
- var IndicatorIcon = _styledcomponents.styled.call(void 0, _chunkT3QSZARMjs.Icon)`
976
+ var IndicatorIcon = _styledcomponents.styled.call(void 0, _chunkUHFE2X4Vjs.Icon)`
977
977
  font-size: 40px;
978
978
  `;
979
979
  var Bar = _styledcomponents.styled.div`
@@ -1102,4 +1102,4 @@ var CORE_FRONTEND_COMPONENT_RENDERER = {
1102
1102
 
1103
1103
 
1104
1104
 
1105
- exports.Button = StyledButton; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = StyledGroup; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = StyledLabel; exports.NestedContent = StyledNestedContent; exports.Rect = Rect; exports.SliderButton = StyledSliderButton; exports.StageContext = StageContext; exports.Switch = StyledSwitch; exports.Tabs = Tabs; exports.TextInput = StyledTextInput; exports.Timeline = Timeline; exports.code = _chunkT3QSZARMjs.core_exports;
1105
+ exports.Button = StyledButton; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = StyledGroup; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = StyledLabel; exports.NestedContent = StyledNestedContent; exports.Rect = Rect; exports.SliderButton = StyledSliderButton; exports.StageContext = StageContext; exports.Switch = StyledSwitch; exports.Tabs = Tabs; exports.TextInput = StyledTextInput; exports.Timeline = Timeline; exports.code = _chunkUHFE2X4Vjs.core_exports;
package/dist/components/index.mjs CHANGED
@@ -2,7 +2,7 @@ import {
2
2
  Icon,
3
3
  TRANSPARENCY_SVG_URI,
4
4
  core_exports
5
- } from "../chunk-MESQQRK3.mjs";
5
+ } from "../chunk-GMPDVDSW.mjs";
6
6
  import {
7
7
  buttonPressed,
8
8
  buttonStateNormal,
@@ -11,12 +11,12 @@ import {
11
11
  rectButton,
12
12
  touchIndicatorNormal,
13
13
  touchIndicatorTouching
14
- } from "../chunk-BQS6YM6U.mjs";
14
+ } from "../chunk-6XOE7F7U.mjs";
15
15
  import {
16
16
  calculateClass,
17
17
  trackTouch,
18
18
  usePressable
19
- } from "../chunk-E7JSREGM.mjs";
19
+ } from "../chunk-PTANIWKR.mjs";
20
20
 
21
21
  // src/components/index.tsx
22
22
  import { isCoreComponent } from "@arcanejs/protocol/core";
package/dist/styling.js CHANGED
@@ -12,8 +12,8 @@
12
12
 
13
13
 
14
14
 
15
- var _chunkWVMAJYGIjs = require('./chunk-WVMAJYGI.js');
16
- require('./chunk-7VTNOX5O.js');
15
+ var _chunkZHJBPEPYjs = require('./chunk-ZHJBPEPY.js');
16
+ require('./chunk-TMN35K5Y.js');
17
17
 
18
18
 
19
19
 
@@ -28,4 +28,4 @@ require('./chunk-7VTNOX5O.js');
28
28
 
29
29
 
30
30
 
31
- exports.BaseStyle = _chunkWVMAJYGIjs.BaseStyle; exports.DARK_THEME = _chunkWVMAJYGIjs.DARK_THEME; exports.GlobalStyle = _chunkWVMAJYGIjs.GlobalStyle; exports.LIGHT_THEME = _chunkWVMAJYGIjs.LIGHT_THEME; exports.PreferredThemeProvider = _chunkWVMAJYGIjs.PreferredThemeProvider; exports.buttonDisabled = _chunkWVMAJYGIjs.buttonDisabled; exports.buttonPressed = _chunkWVMAJYGIjs.buttonPressed; exports.buttonStateNormal = _chunkWVMAJYGIjs.buttonStateNormal; exports.buttonStateNormalActive = _chunkWVMAJYGIjs.buttonStateNormalActive; exports.buttonStateNormalHover = _chunkWVMAJYGIjs.buttonStateNormalHover; exports.rectButton = _chunkWVMAJYGIjs.rectButton; exports.touchIndicatorNormal = _chunkWVMAJYGIjs.touchIndicatorNormal; exports.touchIndicatorTouching = _chunkWVMAJYGIjs.touchIndicatorTouching;
31
+ exports.BaseStyle = _chunkZHJBPEPYjs.BaseStyle; exports.DARK_THEME = _chunkZHJBPEPYjs.DARK_THEME; exports.GlobalStyle = _chunkZHJBPEPYjs.GlobalStyle; exports.LIGHT_THEME = _chunkZHJBPEPYjs.LIGHT_THEME; exports.PreferredThemeProvider = _chunkZHJBPEPYjs.PreferredThemeProvider; exports.buttonDisabled = _chunkZHJBPEPYjs.buttonDisabled; exports.buttonPressed = _chunkZHJBPEPYjs.buttonPressed; exports.buttonStateNormal = _chunkZHJBPEPYjs.buttonStateNormal; exports.buttonStateNormalActive = _chunkZHJBPEPYjs.buttonStateNormalActive; exports.buttonStateNormalHover = _chunkZHJBPEPYjs.buttonStateNormalHover; exports.rectButton = _chunkZHJBPEPYjs.rectButton; exports.touchIndicatorNormal = _chunkZHJBPEPYjs.touchIndicatorNormal; exports.touchIndicatorTouching = _chunkZHJBPEPYjs.touchIndicatorTouching;
package/dist/styling.mjs CHANGED
@@ -12,8 +12,8 @@ import {
12
12
  rectButton,
13
13
  touchIndicatorNormal,
14
14
  touchIndicatorTouching
15
- } from "./chunk-BQS6YM6U.mjs";
16
- import "./chunk-E7JSREGM.mjs";
15
+ } from "./chunk-6XOE7F7U.mjs";
16
+ import "./chunk-PTANIWKR.mjs";
17
17
  export {
18
18
  BaseStyle,
19
19
  DARK_THEME,
package/dist/util/index.d.mts CHANGED
@@ -19,6 +19,12 @@ declare function trackTouch(touch: React.Touch, move: (pos: {
19
19
  }) => void): void;
20
20
 
21
21
  declare const calculateClass: (...args: (string | undefined | null | false)[]) => string;
22
+ declare const VALID_COLOR_SCHEME_PREFS: readonly ["auto", "dark", "light"];
23
+ type ColorSchemePreference = (typeof VALID_COLOR_SCHEME_PREFS)[number];
24
+ declare const useColorSchemePreferences: () => {
25
+ colorSchemePreference: "dark" | "light" | "auto";
26
+ setColorSchemePreference: (newPreference: ColorSchemePreference) => void;
27
+ };
22
28
  declare const usePreferredColorScheme: () => 'dark' | 'light';
23
29
 
24
- export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePreferredColorScheme, usePressable };
30
+ export { VALID_COLOR_SCHEME_PREFS, calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };
package/dist/util/index.d.ts CHANGED
@@ -19,6 +19,12 @@ declare function trackTouch(touch: React.Touch, move: (pos: {
19
19
  }) => void): void;
20
20
 
21
21
  declare const calculateClass: (...args: (string | undefined | null | false)[]) => string;
22
+ declare const VALID_COLOR_SCHEME_PREFS: readonly ["auto", "dark", "light"];
23
+ type ColorSchemePreference = (typeof VALID_COLOR_SCHEME_PREFS)[number];
24
+ declare const useColorSchemePreferences: () => {
25
+ colorSchemePreference: "dark" | "light" | "auto";
26
+ setColorSchemePreference: (newPreference: ColorSchemePreference) => void;
27
+ };
22
28
  declare const usePreferredColorScheme: () => 'dark' | 'light';
23
29
 
24
- export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePreferredColorScheme, usePressable };
30
+ export { VALID_COLOR_SCHEME_PREFS, calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };
package/dist/util/index.js CHANGED
@@ -6,13 +6,17 @@
6
6
 
7
7
 
8
8
 
9
- var _chunk7VTNOX5Ojs = require('../chunk-7VTNOX5O.js');
10
9
 
11
10
 
11
+ var _chunkTMN35K5Yjs = require('../chunk-TMN35K5Y.js');
12
12
 
13
13
 
14
14
 
15
15
 
16
16
 
17
17
 
18
- exports.calculateClass = _chunk7VTNOX5Ojs.calculateClass; exports.initialiseListeners = _chunk7VTNOX5Ojs.initialiseListeners; exports.switchToMouseMode = _chunk7VTNOX5Ojs.switchToMouseMode; exports.switchToTouchMode = _chunk7VTNOX5Ojs.switchToTouchMode; exports.trackTouch = _chunk7VTNOX5Ojs.trackTouch; exports.usePreferredColorScheme = _chunk7VTNOX5Ojs.usePreferredColorScheme; exports.usePressable = _chunk7VTNOX5Ojs.usePressable;
18
+
19
+
20
+
21
+
22
+ exports.VALID_COLOR_SCHEME_PREFS = _chunkTMN35K5Yjs.VALID_COLOR_SCHEME_PREFS; exports.calculateClass = _chunkTMN35K5Yjs.calculateClass; exports.initialiseListeners = _chunkTMN35K5Yjs.initialiseListeners; exports.switchToMouseMode = _chunkTMN35K5Yjs.switchToMouseMode; exports.switchToTouchMode = _chunkTMN35K5Yjs.switchToTouchMode; exports.trackTouch = _chunkTMN35K5Yjs.trackTouch; exports.useColorSchemePreferences = _chunkTMN35K5Yjs.useColorSchemePreferences; exports.usePreferredColorScheme = _chunkTMN35K5Yjs.usePreferredColorScheme; exports.usePressable = _chunkTMN35K5Yjs.usePressable;
package/dist/util/index.mjs CHANGED
@@ -1,18 +1,22 @@
1
1
  import {
2
+ VALID_COLOR_SCHEME_PREFS,
2
3
  calculateClass,
3
4
  initialiseListeners,
4
5
  switchToMouseMode,
5
6
  switchToTouchMode,
6
7
  trackTouch,
8
+ useColorSchemePreferences,
7
9
  usePreferredColorScheme,
8
10
  usePressable
9
- } from "../chunk-E7JSREGM.mjs";
11
+ } from "../chunk-PTANIWKR.mjs";
10
12
  export {
13
+ VALID_COLOR_SCHEME_PREFS,
11
14
  calculateClass,
12
15
  initialiseListeners,
13
16
  switchToMouseMode,
14
17
  switchToTouchMode,
15
18
  trackTouch,
19
+ useColorSchemePreferences,
16
20
  usePreferredColorScheme,
17
21
  usePressable
18
22
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcanejs/toolkit-frontend",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "private": false,
5
5
  "description": "Library of the frontend react components used to render the @arcanejs Toolkit",
6
6
  "keywords": [],