@arcanejs/toolkit-frontend 0.4.0 → 0.5.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.
@@ -2,9 +2,8 @@ import {
2
2
  Icon,
3
3
  TRANSPARENCY_SVG_URI,
4
4
  core_exports
5
- } from "../chunk-UJVH3PQF.mjs";
5
+ } from "../chunk-MESQQRK3.mjs";
6
6
  import {
7
- THEME,
8
7
  buttonPressed,
9
8
  buttonStateNormal,
10
9
  buttonStateNormalActive,
@@ -12,13 +11,12 @@ import {
12
11
  rectButton,
13
12
  touchIndicatorNormal,
14
13
  touchIndicatorTouching
15
- } from "../chunk-6Z2ACPNM.mjs";
14
+ } from "../chunk-BQS6YM6U.mjs";
16
15
  import {
17
16
  calculateClass,
18
17
  trackTouch,
19
18
  usePressable
20
- } from "../chunk-35U577MM.mjs";
21
- import "../chunk-7P6ASYW6.mjs";
19
+ } from "../chunk-E7JSREGM.mjs";
22
20
 
23
21
  // src/components/index.tsx
24
22
  import { isCoreComponent } from "@arcanejs/protocol/core";
@@ -98,8 +96,8 @@ var StyledButton = styled(Button)`
98
96
  }
99
97
 
100
98
  &.${ERROR_CLASS} {
101
- color: ${THEME.colorRed};
102
- border-color: ${THEME.colorRed};
99
+ color: ${(p) => p.theme.colorRed};
100
+ border-color: ${(p) => p.theme.colorRed};
103
101
  }
104
102
 
105
103
  &.${TOUCHING_CLASS} {
@@ -139,19 +137,19 @@ var NestedContent = ({ className, children }) => {
139
137
  };
140
138
  NestedContent.displayName = "NestedContent";
141
139
  var StyledNestedContent = styled2(NestedContent)`
142
- padding: ${THEME.sizingPx.spacing / 2}px;
143
- box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
140
+ padding: ${(p) => p.theme.sizingPx.spacing / 2}px;
141
+ box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
144
142
 
145
143
  &.color-dark {
146
- background: ${THEME.bgDark1};
144
+ background: ${(p) => p.theme.bgDark1};
147
145
  }
148
146
 
149
147
  &.color-lighter {
150
- background: ${THEME.bg};
148
+ background: ${(p) => p.theme.bg};
151
149
  }
152
150
 
153
151
  &.color-lighterer {
154
- background: ${THEME.bgLight1};
152
+ background: ${(p) => p.theme.bgLight1};
155
153
  }
156
154
  `;
157
155
 
@@ -164,11 +162,11 @@ var Header = styled3.div`
164
162
  display: flex;
165
163
  align-items: center;
166
164
  padding: 5px 2px;
167
- background: ${THEME.borderDark};
168
- border-bottom: 1px solid ${THEME.borderDark};
165
+ background: ${(p) => p.theme.borderDark};
166
+ border-bottom: 1px solid ${(p) => p.theme.borderDark};
169
167
 
170
168
  &.touching {
171
- background: ${THEME.bgDark1};
169
+ background: ${(p) => p.theme.bgDark1};
172
170
  }
173
171
 
174
172
  &.collapsed {
@@ -182,8 +180,8 @@ var Header = styled3.div`
182
180
  var Label = styled3.span`
183
181
  display: inline-block;
184
182
  border-radius: 3px;
185
- background: ${THEME.bg};
186
- border: 1px solid ${THEME.bgLight1};
183
+ background: ${(p) => p.theme.bg};
184
+ border: 1px solid ${(p) => p.theme.bgLight1};
187
185
  padding: 3px 4px;
188
186
  `;
189
187
  var Grow = styled3.span({
@@ -201,7 +199,7 @@ var GroupChildren = styled3.div`
201
199
  ${(p) => p.info.direction === "vertical" ? "" : "align-items: center;"}
202
200
 
203
201
  > * {
204
- margin: ${THEME.sizingPx.spacing / 2}px;
202
+ margin: ${(p) => p.theme.sizingPx.spacing / 2}px;
205
203
  }
206
204
  `;
207
205
  var EditableTitle = styled3.span`
@@ -216,14 +214,14 @@ var EditableTitle = styled3.span`
216
214
  }
217
215
 
218
216
  > .icon {
219
- color: ${THEME.bg};
217
+ color: ${(p) => p.theme.textMuted};
220
218
  }
221
219
 
222
220
  &:hover {
223
- background: ${THEME.bg};
221
+ background: ${(p) => p.theme.bg};
224
222
 
225
223
  > .icon {
226
- color: ${THEME.hint};
224
+ color: ${(p) => p.theme.hint};
227
225
  }
228
226
  }
229
227
  `;
@@ -231,7 +229,7 @@ var TitleInput = styled3.input`
231
229
  background: none;
232
230
  border: none;
233
231
  outline: none;
234
- color: ${THEME.textNormal};
232
+ color: ${(p) => p.theme.textNormal};
235
233
  `;
236
234
  var GroupStateContext = React3.createContext({
237
235
  isCollapsed: () => {
@@ -335,12 +333,12 @@ var Group = ({ className, info }) => {
335
333
  };
336
334
  Group.displayName = "Group";
337
335
  var StyledGroup = styled3(Group)`
338
- border: 1px solid ${THEME.borderDark};
336
+ border: 1px solid ${(p) => p.theme.borderDark};
339
337
 
340
338
  > .title {
341
339
  padding: 5px;
342
- background: ${THEME.borderDark};
343
- border-bottom: 1px solid ${THEME.borderDark};
340
+ background: ${(p) => p.theme.borderDark};
341
+ border-bottom: 1px solid ${(p) => p.theme.borderDark};
344
342
  }
345
343
 
346
344
  &.no-border {
@@ -370,7 +368,7 @@ var Wrapper = styled5.div`
370
368
  background: url('${TRANSPARENCY_SVG_URI}');
371
369
  background-repeat: repeat;
372
370
  background-size: 10px;
373
- border: 1px solid ${THEME.borderDark};
371
+ border: 1px solid ${(p) => p.theme.borderDark};
374
372
 
375
373
  &.${CLS_GROW} {
376
374
  flex-grow: 1;
@@ -586,11 +584,11 @@ var StyledSliderButton = styled6(SliderButton)`
586
584
  cursor: pointer;
587
585
  transition: all 200ms;
588
586
  border-radius: 3px;
589
- border: 1px solid ${THEME.borderDark};
587
+ border: 1px solid ${(p) => p.theme.borderDark};
590
588
  ${buttonStateNormal}
591
589
 
592
590
  > input {
593
- color: ${THEME.textNormal};
591
+ color: ${(p) => p.theme.textNormal};
594
592
  opacity: 0;
595
593
  margin: 0 -9px;
596
594
  padding: 6px 8px;
@@ -598,22 +596,22 @@ var StyledSliderButton = styled6(SliderButton)`
598
596
  pointer-events: none;
599
597
  transition: all 200ms;
600
598
  border-radius: 3px;
601
- background: ${THEME.bgDark1};
602
- border: 1px solid ${THEME.borderDark};
599
+ background: ${(p) => p.theme.bgDark1};
600
+ border: 1px solid ${(p) => p.theme.borderDark};
603
601
  overflow: hidden;
604
- box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
602
+ box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
605
603
  }
606
604
 
607
605
  > .${CLASS_SLIDER_DISPLAY} {
608
606
  flex-grow: 1;
609
607
  margin: 0 ${SLIDER_PADDING / 2}px;
610
608
  height: 4px;
611
- background: ${THEME.bgDark1};
612
- border: 1px solid ${THEME.borderDark};
609
+ background: ${(p) => p.theme.bgDark1};
610
+ border: 1px solid ${(p) => p.theme.borderDark};
613
611
 
614
612
  > .inner {
615
613
  height: 100%;
616
- background: ${THEME.hint};
614
+ background: ${(p) => p.theme.hint};
617
615
  }
618
616
 
619
617
  &.${CLASS_GRADIENT} {
@@ -622,7 +620,7 @@ var StyledSliderButton = styled6(SliderButton)`
622
620
  > .inner {
623
621
  position: relative;
624
622
  background: none;
625
- border-right: 2px solid ${THEME.borderDark};
623
+ border-right: 2px solid ${(p) => p.theme.borderDark};
626
624
 
627
625
  &::before {
628
626
  content: '';
@@ -631,7 +629,7 @@ var StyledSliderButton = styled6(SliderButton)`
631
629
  top: -5px;
632
630
  bottom: -5px;
633
631
  right: -3px;
634
- background: ${THEME.borderDark};
632
+ background: ${(p) => p.theme.borderDark};
635
633
  }
636
634
 
637
635
  &::after {
@@ -641,7 +639,7 @@ var StyledSliderButton = styled6(SliderButton)`
641
639
  top: -4px;
642
640
  bottom: -4px;
643
641
  right: -2px;
644
- background: ${THEME.textNormal};
642
+ background: ${(p) => p.theme.textNormal};
645
643
  }
646
644
  }
647
645
  }
@@ -681,7 +679,7 @@ var StyledSliderButton = styled6(SliderButton)`
681
679
  z-index: 100;
682
680
 
683
681
  .inner {
684
- background: ${THEME.bgDark1};
682
+ background: ${(p) => p.theme.bgDark1};
685
683
  width: ${OPEN_SLIDER_WIDTH}px;
686
684
 
687
685
  > .${CLASS_SLIDER_VALUE} {
@@ -759,7 +757,7 @@ var StyledSwitch = styled7(Switch)`
759
757
  min-width: ${BUTTON_WIDTH + TEXT_WIDTH}px;
760
758
  height: ${SWITCH_HEIGHT}px;
761
759
  border-radius: 3px;
762
- border: 1px solid ${THEME.borderDark};
760
+ border: 1px solid ${(p) => p.theme.borderDark};
763
761
 
764
762
  > .slider {
765
763
  position: absolute;
@@ -781,7 +779,7 @@ var StyledSwitch = styled7(Switch)`
781
779
  text-align: center;
782
780
  top: 0;
783
781
  line-height: ${SWITCH_HEIGHT - 2}px;
784
- text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
782
+ text-shadow: ${(p) => p.theme.shadows.textShadowActive};
785
783
  box-shadow:
786
784
  inset 0 1px 2px rgba(0, 0, 0, 0.2),
787
785
  0 1px 0 0 rgba(255, 255, 255, 0.15);
@@ -789,26 +787,22 @@ var StyledSwitch = styled7(Switch)`
789
787
 
790
788
  > .on-text {
791
789
  left: -40px;
792
- background: linear-gradient(
793
- to bottom,
794
- ${THEME.hintDark1},
795
- ${THEME.hint}
796
- );
790
+ background: ${(p) => p.theme.gradients.hintPressed};
797
791
  }
798
792
 
799
793
  > .button {
800
794
  top: -1px;
801
795
  left: -1px;
802
796
  width: ${BUTTON_WIDTH}px;
803
- background: linear-gradient(to bottom, #4f5053, #343436);
804
- text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
797
+ background: ${(p) => p.theme.gradients.button};
798
+ text-shadow: ${(p) => p.theme.shadows.textShadow};
805
799
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
806
800
  border-radius: 3px;
807
- border: 1px solid ${THEME.borderDark};
801
+ border: 1px solid ${(p) => p.theme.borderDark};
808
802
  }
809
803
 
810
804
  > .off-text {
811
- background: linear-gradient(to bottom, #242525, #37383a);
805
+ background: ${(p) => p.theme.gradients.buttonActive};
812
806
  left: ${BUTTON_WIDTH - 2}px;
813
807
  }
814
808
 
@@ -817,7 +811,7 @@ var StyledSwitch = styled7(Switch)`
817
811
  }
818
812
 
819
813
  &:hover > .button {
820
- background: linear-gradient(to bottom, #5e6064, #393a3b);
814
+ background: ${(p) => p.theme.gradients.buttonHover};
821
815
  }
822
816
  }
823
817
  }
@@ -840,37 +834,37 @@ import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
840
834
  var Wrapper2 = styled8.div`
841
835
  display: flex;
842
836
  flex-direction: column;
843
- background: ${THEME.borderDark};
844
- border: 1px solid ${THEME.borderDark};
837
+ background: ${(p) => p.theme.borderDark};
838
+ border: 1px solid ${(p) => p.theme.borderDark};
845
839
  `;
846
840
  var TabList = styled8.div`
847
841
  display: flex;
848
842
  flex-direction: row;
849
- border-bottom: 1px solid ${THEME.borderDark};
843
+ border-bottom: 1px solid ${(p) => p.theme.borderDark};
850
844
  `;
851
845
  var TabItem = styled8.div`
852
- height: ${THEME.sizingPx.spacing * 3}px;
846
+ height: ${(p) => p.theme.sizingPx.spacing * 3}px;
853
847
  display: flex;
854
848
  flex-direction: column;
855
849
  justify-content: center;
856
- padding: 0 ${THEME.sizingPx.spacing}px;
850
+ padding: 0 ${(p) => p.theme.sizingPx.spacing}px;
857
851
  cursor: pointer;
858
- background: ${THEME.bgDark1};
852
+ background: ${(p) => p.theme.bgDark1};
859
853
  margin-right: 1px;
860
854
 
861
855
  &:hover,
862
856
  &.touching {
863
- background: ${THEME.bgLight1};
857
+ background: ${(p) => p.theme.bgLight1};
864
858
  }
865
859
 
866
860
  &.current {
867
- color: ${THEME.hint};
861
+ color: ${(p) => p.theme.hint};
868
862
 
869
863
  &::after {
870
864
  content: '';
871
- border-bottom: 2px solid ${THEME.hint};
865
+ border-bottom: 2px solid ${(p) => p.theme.hint};
872
866
  display: block;
873
- margin-top: ${THEME.sizingPx.spacing / 2}px;
867
+ margin-top: ${(p) => p.theme.sizingPx.spacing / 2}px;
874
868
  }
875
869
  }
876
870
  `;
@@ -938,12 +932,12 @@ var StyledTextInput = styled9(TextInput)`
938
932
  box-sizing: border-box;
939
933
  padding: 6px 8px;
940
934
  border-radius: 3px;
941
- background: ${THEME.bgDark1};
942
- border: 1px solid ${THEME.borderDark};
935
+ background: ${(p) => p.theme.bgDark1};
936
+ border: 1px solid ${(p) => p.theme.borderDark};
943
937
  overflow: hidden;
944
- box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
945
- color: ${THEME.textNormal};
946
- text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
938
+ box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
939
+ color: ${(p) => p.theme.textNormal};
940
+ text-shadow: ${(p) => p.theme.shadows.textShadow};
947
941
 
948
942
  @media (max-width: 500px) {
949
943
  flex-basis: 100%;
@@ -975,12 +969,12 @@ var IndicatorIcon = styled10(Icon)`
975
969
  var Bar = styled10.div`
976
970
  width: 100%;
977
971
  height: 10px;
978
- border: 1px solid ${THEME.borderDark};
979
- background: ${THEME.borderDark};
972
+ border: 1px solid ${(p) => p.theme.borderDark};
973
+ background: ${(p) => p.theme.borderDark};
980
974
  `;
981
975
  var Fill = styled10.div`
982
976
  height: 100%;
983
- background: ${THEME.hint};
977
+ background: ${(p) => p.theme.hint};
984
978
  `;
985
979
  var Title = styled10.div`
986
980
  font-size: 1.5em;
@@ -1,7 +1,8 @@
1
1
  import { createGlobalStyle, RuleSet } from 'styled-components';
2
2
 
3
3
  declare const GlobalStyle: ReturnType<typeof createGlobalStyle>;
4
- declare const THEME: {
4
+ declare const DARK_THEME: {
5
+ pageBg: string;
5
6
  colorGreen: string;
6
7
  colorRed: string;
7
8
  colorAmber: string;
@@ -16,13 +17,27 @@ declare const THEME: {
16
17
  hintRGB: string;
17
18
  hintDark1: string;
18
19
  textNormal: string;
20
+ textActive: string;
19
21
  textMuted: string;
22
+ shadows: {
23
+ boxShadowInset: string;
24
+ textShadow: string;
25
+ textShadowActive: string;
26
+ };
27
+ gradients: {
28
+ button: string;
29
+ buttonHover: string;
30
+ buttonActive: string;
31
+ buttonPressedHover: string;
32
+ hintPressed: string;
33
+ };
20
34
  sizingPx: {
21
35
  spacing: number;
22
36
  unitHeight: number;
23
37
  };
24
38
  };
25
- type Theme = typeof THEME;
39
+ type Theme = typeof DARK_THEME;
40
+ declare const LIGHT_THEME: Theme;
26
41
  declare const BaseStyle: ReturnType<typeof createGlobalStyle>;
27
42
  declare const buttonStateNormal: RuleSet<object>;
28
43
  declare const buttonStateNormalHover: RuleSet<object>;
@@ -32,5 +47,10 @@ declare const buttonDisabled: RuleSet<object>;
32
47
  declare const rectButton: RuleSet<object>;
33
48
  declare const touchIndicatorNormal: RuleSet<object>;
34
49
  declare const touchIndicatorTouching: RuleSet<object>;
50
+ declare const PreferredThemeProvider: React.FC<{
51
+ dark: Theme;
52
+ light: Theme;
53
+ children: React.ReactNode;
54
+ }>;
35
55
 
36
- export { BaseStyle, GlobalStyle, THEME, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };
56
+ export { BaseStyle, DARK_THEME, GlobalStyle, LIGHT_THEME, PreferredThemeProvider, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };
package/dist/styling.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import { createGlobalStyle, RuleSet } from 'styled-components';
2
2
 
3
3
  declare const GlobalStyle: ReturnType<typeof createGlobalStyle>;
4
- declare const THEME: {
4
+ declare const DARK_THEME: {
5
+ pageBg: string;
5
6
  colorGreen: string;
6
7
  colorRed: string;
7
8
  colorAmber: string;
@@ -16,13 +17,27 @@ declare const THEME: {
16
17
  hintRGB: string;
17
18
  hintDark1: string;
18
19
  textNormal: string;
20
+ textActive: string;
19
21
  textMuted: string;
22
+ shadows: {
23
+ boxShadowInset: string;
24
+ textShadow: string;
25
+ textShadowActive: string;
26
+ };
27
+ gradients: {
28
+ button: string;
29
+ buttonHover: string;
30
+ buttonActive: string;
31
+ buttonPressedHover: string;
32
+ hintPressed: string;
33
+ };
20
34
  sizingPx: {
21
35
  spacing: number;
22
36
  unitHeight: number;
23
37
  };
24
38
  };
25
- type Theme = typeof THEME;
39
+ type Theme = typeof DARK_THEME;
40
+ declare const LIGHT_THEME: Theme;
26
41
  declare const BaseStyle: ReturnType<typeof createGlobalStyle>;
27
42
  declare const buttonStateNormal: RuleSet<object>;
28
43
  declare const buttonStateNormalHover: RuleSet<object>;
@@ -32,5 +47,10 @@ declare const buttonDisabled: RuleSet<object>;
32
47
  declare const rectButton: RuleSet<object>;
33
48
  declare const touchIndicatorNormal: RuleSet<object>;
34
49
  declare const touchIndicatorTouching: RuleSet<object>;
50
+ declare const PreferredThemeProvider: React.FC<{
51
+ dark: Theme;
52
+ light: Theme;
53
+ children: React.ReactNode;
54
+ }>;
35
55
 
36
- export { BaseStyle, GlobalStyle, THEME, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };
56
+ export { BaseStyle, DARK_THEME, GlobalStyle, LIGHT_THEME, PreferredThemeProvider, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };
package/dist/styling.js CHANGED
@@ -10,10 +10,10 @@
10
10
 
11
11
 
12
12
 
13
- var _chunkY5UYS6EXjs = require('./chunk-Y5UYS6EX.js');
14
- require('./chunk-MLKGABMK.js');
15
13
 
16
14
 
15
+ var _chunkWVMAJYGIjs = require('./chunk-WVMAJYGI.js');
16
+ require('./chunk-7VTNOX5O.js');
17
17
 
18
18
 
19
19
 
@@ -24,4 +24,8 @@ require('./chunk-MLKGABMK.js');
24
24
 
25
25
 
26
26
 
27
- exports.BaseStyle = _chunkY5UYS6EXjs.BaseStyle; exports.GlobalStyle = _chunkY5UYS6EXjs.GlobalStyle; exports.THEME = _chunkY5UYS6EXjs.THEME; exports.buttonDisabled = _chunkY5UYS6EXjs.buttonDisabled; exports.buttonPressed = _chunkY5UYS6EXjs.buttonPressed; exports.buttonStateNormal = _chunkY5UYS6EXjs.buttonStateNormal; exports.buttonStateNormalActive = _chunkY5UYS6EXjs.buttonStateNormalActive; exports.buttonStateNormalHover = _chunkY5UYS6EXjs.buttonStateNormalHover; exports.rectButton = _chunkY5UYS6EXjs.rectButton; exports.touchIndicatorNormal = _chunkY5UYS6EXjs.touchIndicatorNormal; exports.touchIndicatorTouching = _chunkY5UYS6EXjs.touchIndicatorTouching;
27
+
28
+
29
+
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;
package/dist/styling.mjs CHANGED
@@ -1,7 +1,9 @@
1
1
  import {
2
2
  BaseStyle,
3
+ DARK_THEME,
3
4
  GlobalStyle,
4
- THEME,
5
+ LIGHT_THEME,
6
+ PreferredThemeProvider,
5
7
  buttonDisabled,
6
8
  buttonPressed,
7
9
  buttonStateNormal,
@@ -10,12 +12,14 @@ import {
10
12
  rectButton,
11
13
  touchIndicatorNormal,
12
14
  touchIndicatorTouching
13
- } from "./chunk-6Z2ACPNM.mjs";
14
- import "./chunk-7P6ASYW6.mjs";
15
+ } from "./chunk-BQS6YM6U.mjs";
16
+ import "./chunk-E7JSREGM.mjs";
15
17
  export {
16
18
  BaseStyle,
19
+ DARK_THEME,
17
20
  GlobalStyle,
18
- THEME,
21
+ LIGHT_THEME,
22
+ PreferredThemeProvider,
19
23
  buttonDisabled,
20
24
  buttonPressed,
21
25
  buttonStateNormal,
@@ -19,5 +19,6 @@ 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 usePreferredColorScheme: () => 'dark' | 'light';
22
23
 
23
- export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePressable };
24
+ export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePreferredColorScheme, usePressable };
@@ -19,5 +19,6 @@ 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 usePreferredColorScheme: () => 'dark' | 'light';
22
23
 
23
- export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePressable };
24
+ export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePreferredColorScheme, usePressable };
@@ -5,13 +5,14 @@
5
5
 
6
6
 
7
7
 
8
- var _chunkXEIKOLS2js = require('../chunk-XEIKOLS2.js');
9
- require('../chunk-MLKGABMK.js');
10
8
 
9
+ var _chunk7VTNOX5Ojs = require('../chunk-7VTNOX5O.js');
11
10
 
12
11
 
13
12
 
14
13
 
15
14
 
16
15
 
17
- exports.calculateClass = _chunkXEIKOLS2js.calculateClass; exports.initialiseListeners = _chunkXEIKOLS2js.initialiseListeners; exports.switchToMouseMode = _chunkXEIKOLS2js.switchToMouseMode; exports.switchToTouchMode = _chunkXEIKOLS2js.switchToTouchMode; exports.trackTouch = _chunkXEIKOLS2js.trackTouch; exports.usePressable = _chunkXEIKOLS2js.usePressable;
16
+
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;
@@ -4,14 +4,15 @@ import {
4
4
  switchToMouseMode,
5
5
  switchToTouchMode,
6
6
  trackTouch,
7
+ usePreferredColorScheme,
7
8
  usePressable
8
- } from "../chunk-35U577MM.mjs";
9
- import "../chunk-7P6ASYW6.mjs";
9
+ } from "../chunk-E7JSREGM.mjs";
10
10
  export {
11
11
  calculateClass,
12
12
  initialiseListeners,
13
13
  switchToMouseMode,
14
14
  switchToTouchMode,
15
15
  trackTouch,
16
+ usePreferredColorScheme,
16
17
  usePressable
17
18
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcanejs/toolkit-frontend",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "private": false,
5
5
  "description": "Library of the frontend react components used to render the @arcanejs Toolkit",
6
6
  "keywords": [],
@@ -27,7 +27,7 @@
27
27
  "require": "./dist/components/core/index.js"
28
28
  },
29
29
  "./styling": {
30
- "@arcanejs/source": "./src/styling.ts",
30
+ "@arcanejs/source": "./src/styling.tsx",
31
31
  "types": "./dist/styling.d.ts",
32
32
  "import": "./dist/styling.mjs",
33
33
  "require": "./dist/styling.js"
@@ -1,9 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __export = (target, all) => {
3
- for (var name in all)
4
- __defProp(target, name, { get: all[name], enumerable: true });
5
- };
6
-
7
- export {
8
- __export
9
- };
@@ -1,9 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});var __defProp = Object.defineProperty;
2
- var __export = (target, all) => {
3
- for (var name in all)
4
- __defProp(target, name, { get: all[name], enumerable: true });
5
- };
6
-
7
-
8
-
9
- exports.__export = __export;