@arcanejs/toolkit-frontend 0.3.1 → 0.5.0

package/dist/components/index.mjs

@@ -2,9 +2,8 @@ import {
   Icon,
   TRANSPARENCY_SVG_URI,
   core_exports
-} from "../chunk-UJVH3PQF.mjs";
+} from "../chunk-MESQQRK3.mjs";
 import {
-  THEME,
   buttonPressed,
   buttonStateNormal,
   buttonStateNormalActive,
@@ -12,13 +11,12 @@ import {
   rectButton,
   touchIndicatorNormal,
   touchIndicatorTouching
-} from "../chunk-6Z2ACPNM.mjs";
+} from "../chunk-BQS6YM6U.mjs";
 import {
   calculateClass,
   trackTouch,
   usePressable
-} from "../chunk-35U577MM.mjs";
-import "../chunk-7P6ASYW6.mjs";
+} from "../chunk-E7JSREGM.mjs";
 
 // src/components/index.tsx
 import { isCoreComponent } from "@arcanejs/protocol/core";
@@ -29,12 +27,13 @@ import { styled } from "styled-components";
 
 // src/components/context.ts
 import { createContext } from "react";
-var StageContext = createContext({
-  sendMessage: null,
-  renderComponent: () => {
-    throw new Error(`missing root context`);
-  }
-});
+var StageContext = createContext(
+  new Proxy({}, {
+    get: () => {
+      throw new Error("Missing StageContext.Provider");
+    }
+  })
+);
 
 // src/components/button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -97,8 +96,8 @@ var StyledButton = styled(Button)`
   }
 
   &.${ERROR_CLASS} {
-    color: ${THEME.colorRed};
-    border-color: ${THEME.colorRed};
+    color: ${(p) => p.theme.colorRed};
+    border-color: ${(p) => p.theme.colorRed};
   }
 
   &.${TOUCHING_CLASS} {
@@ -138,19 +137,19 @@ var NestedContent = ({ className, children }) => {
 };
 NestedContent.displayName = "NestedContent";
 var StyledNestedContent = styled2(NestedContent)`
-  padding: ${THEME.sizingPx.spacing / 2}px;
-  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+  padding: ${(p) => p.theme.sizingPx.spacing / 2}px;
+  box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
 
   &.color-dark {
-    background: ${THEME.bgDark1};
+    background: ${(p) => p.theme.bgDark1};
   }
 
   &.color-lighter {
-    background: ${THEME.bg};
+    background: ${(p) => p.theme.bg};
   }
 
   &.color-lighterer {
-    background: ${THEME.bgLight1};
+    background: ${(p) => p.theme.bgLight1};
   }
 `;
 
@@ -163,11 +162,11 @@ var Header = styled3.div`
   display: flex;
   align-items: center;
   padding: 5px 2px;
-  background: ${THEME.borderDark};
-  border-bottom: 1px solid ${THEME.borderDark};
+  background: ${(p) => p.theme.borderDark};
+  border-bottom: 1px solid ${(p) => p.theme.borderDark};
 
   &.touching {
-    background: ${THEME.bgDark1};
+    background: ${(p) => p.theme.bgDark1};
   }
 
   &.collapsed {
@@ -181,8 +180,8 @@ var Header = styled3.div`
 var Label = styled3.span`
   display: inline-block;
   border-radius: 3px;
-  background: ${THEME.bg};
-  border: 1px solid ${THEME.bgLight1};
+  background: ${(p) => p.theme.bg};
+  border: 1px solid ${(p) => p.theme.bgLight1};
   padding: 3px 4px;
 `;
 var Grow = styled3.span({
@@ -200,7 +199,7 @@ var GroupChildren = styled3.div`
   ${(p) => p.info.direction === "vertical" ? "" : "align-items: center;"}
 
   > * {
-    margin: ${THEME.sizingPx.spacing / 2}px;
+    margin: ${(p) => p.theme.sizingPx.spacing / 2}px;
   }
 `;
 var EditableTitle = styled3.span`
@@ -215,14 +214,14 @@ var EditableTitle = styled3.span`
   }
 
   > .icon {
-    color: ${THEME.bg};
+    color: ${(p) => p.theme.textMuted};
   }
 
   &:hover {
-    background: ${THEME.bg};
+    background: ${(p) => p.theme.bg};
 
     > .icon {
-      color: ${THEME.hint};
+      color: ${(p) => p.theme.hint};
     }
   }
 `;
@@ -230,7 +229,7 @@ var TitleInput = styled3.input`
   background: none;
   border: none;
   outline: none;
-  color: ${THEME.textNormal};
+  color: ${(p) => p.theme.textNormal};
 `;
 var GroupStateContext = React3.createContext({
   isCollapsed: () => {
@@ -334,12 +333,12 @@ var Group = ({ className, info }) => {
 };
 Group.displayName = "Group";
 var StyledGroup = styled3(Group)`
-  border: 1px solid ${THEME.borderDark};
+  border: 1px solid ${(p) => p.theme.borderDark};
 
   > .title {
     padding: 5px;
-    background: ${THEME.borderDark};
-    border-bottom: 1px solid ${THEME.borderDark};
+    background: ${(p) => p.theme.borderDark};
+    border-bottom: 1px solid ${(p) => p.theme.borderDark};
   }
 
   &.no-border {
@@ -369,7 +368,7 @@ var Wrapper = styled5.div`
   background: url('${TRANSPARENCY_SVG_URI}');
   background-repeat: repeat;
   background-size: 10px;
-  border: 1px solid ${THEME.borderDark};
+  border: 1px solid ${(p) => p.theme.borderDark};
 
   &.${CLS_GROW} {
     flex-grow: 1;
@@ -585,11 +584,11 @@ var StyledSliderButton = styled6(SliderButton)`
     cursor: pointer;
     transition: all 200ms;
     border-radius: 3px;
-    border: 1px solid ${THEME.borderDark};
+    border: 1px solid ${(p) => p.theme.borderDark};
     ${buttonStateNormal}
 
     > input {
-      color: ${THEME.textNormal};
+      color: ${(p) => p.theme.textNormal};
       opacity: 0;
       margin: 0 -9px;
       padding: 6px 8px;
@@ -597,22 +596,22 @@ var StyledSliderButton = styled6(SliderButton)`
       pointer-events: none;
       transition: all 200ms;
       border-radius: 3px;
-      background: ${THEME.bgDark1};
-      border: 1px solid ${THEME.borderDark};
+      background: ${(p) => p.theme.bgDark1};
+      border: 1px solid ${(p) => p.theme.borderDark};
       overflow: hidden;
-      box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+      box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
     }
 
     > .${CLASS_SLIDER_DISPLAY} {
       flex-grow: 1;
       margin: 0 ${SLIDER_PADDING / 2}px;
       height: 4px;
-      background: ${THEME.bgDark1};
-      border: 1px solid ${THEME.borderDark};
+      background: ${(p) => p.theme.bgDark1};
+      border: 1px solid ${(p) => p.theme.borderDark};
 
       > .inner {
         height: 100%;
-        background: ${THEME.hint};
+        background: ${(p) => p.theme.hint};
       }
 
       &.${CLASS_GRADIENT} {
@@ -621,7 +620,7 @@ var StyledSliderButton = styled6(SliderButton)`
         > .inner {
           position: relative;
           background: none;
-          border-right: 2px solid ${THEME.borderDark};
+          border-right: 2px solid ${(p) => p.theme.borderDark};
 
           &::before {
             content: '';
@@ -630,7 +629,7 @@ var StyledSliderButton = styled6(SliderButton)`
             top: -5px;
             bottom: -5px;
             right: -3px;
-            background: ${THEME.borderDark};
+            background: ${(p) => p.theme.borderDark};
           }
 
           &::after {
@@ -640,7 +639,7 @@ var StyledSliderButton = styled6(SliderButton)`
             top: -4px;
             bottom: -4px;
             right: -2px;
-            background: ${THEME.textNormal};
+            background: ${(p) => p.theme.textNormal};
           }
         }
       }
@@ -680,7 +679,7 @@ var StyledSliderButton = styled6(SliderButton)`
     z-index: 100;
 
     .inner {
-      background: ${THEME.bgDark1};
+      background: ${(p) => p.theme.bgDark1};
       width: ${OPEN_SLIDER_WIDTH}px;
 
       > .${CLASS_SLIDER_VALUE} {
@@ -758,7 +757,7 @@ var StyledSwitch = styled7(Switch)`
     min-width: ${BUTTON_WIDTH + TEXT_WIDTH}px;
     height: ${SWITCH_HEIGHT}px;
     border-radius: 3px;
-    border: 1px solid ${THEME.borderDark};
+    border: 1px solid ${(p) => p.theme.borderDark};
 
     > .slider {
       position: absolute;
@@ -780,7 +779,7 @@ var StyledSwitch = styled7(Switch)`
         text-align: center;
         top: 0;
         line-height: ${SWITCH_HEIGHT - 2}px;
-        text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+        text-shadow: ${(p) => p.theme.shadows.textShadowActive};
         box-shadow:
           inset 0 1px 2px rgba(0, 0, 0, 0.2),
           0 1px 0 0 rgba(255, 255, 255, 0.15);
@@ -788,26 +787,22 @@ var StyledSwitch = styled7(Switch)`
 
       > .on-text {
         left: -40px;
-        background: linear-gradient(
-          to bottom,
-          ${THEME.hintDark1},
-          ${THEME.hint}
-        );
+        background: ${(p) => p.theme.gradients.hintPressed};
       }
 
       > .button {
         top: -1px;
         left: -1px;
         width: ${BUTTON_WIDTH}px;
-        background: linear-gradient(to bottom, #4f5053, #343436);
-        text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+        background: ${(p) => p.theme.gradients.button};
+        text-shadow: ${(p) => p.theme.shadows.textShadow};
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
         border-radius: 3px;
-        border: 1px solid ${THEME.borderDark};
+        border: 1px solid ${(p) => p.theme.borderDark};
       }
 
       > .off-text {
-        background: linear-gradient(to bottom, #242525, #37383a);
+        background: ${(p) => p.theme.gradients.buttonActive};
         left: ${BUTTON_WIDTH - 2}px;
       }
 
@@ -816,7 +811,7 @@ var StyledSwitch = styled7(Switch)`
       }
 
       &:hover > .button {
-        background: linear-gradient(to bottom, #5e6064, #393a3b);
+        background: ${(p) => p.theme.gradients.buttonHover};
       }
     }
   }
@@ -839,37 +834,37 @@ import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var Wrapper2 = styled8.div`
   display: flex;
   flex-direction: column;
-  background: ${THEME.borderDark};
-  border: 1px solid ${THEME.borderDark};
+  background: ${(p) => p.theme.borderDark};
+  border: 1px solid ${(p) => p.theme.borderDark};
 `;
 var TabList = styled8.div`
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid ${THEME.borderDark};
+  border-bottom: 1px solid ${(p) => p.theme.borderDark};
 `;
 var TabItem = styled8.div`
-  height: ${THEME.sizingPx.spacing * 3}px;
+  height: ${(p) => p.theme.sizingPx.spacing * 3}px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0 ${THEME.sizingPx.spacing}px;
+  padding: 0 ${(p) => p.theme.sizingPx.spacing}px;
   cursor: pointer;
-  background: ${THEME.bgDark1};
+  background: ${(p) => p.theme.bgDark1};
   margin-right: 1px;
 
   &:hover,
   &.touching {
-    background: ${THEME.bgLight1};
+    background: ${(p) => p.theme.bgLight1};
   }
 
   &.current {
-    color: ${THEME.hint};
+    color: ${(p) => p.theme.hint};
 
     &::after {
       content: '';
-      border-bottom: 2px solid ${THEME.hint};
+      border-bottom: 2px solid ${(p) => p.theme.hint};
       display: block;
-      margin-top: ${THEME.sizingPx.spacing / 2}px;
+      margin-top: ${(p) => p.theme.sizingPx.spacing / 2}px;
     }
   }
 `;
@@ -937,12 +932,12 @@ var StyledTextInput = styled9(TextInput)`
   box-sizing: border-box;
   padding: 6px 8px;
   border-radius: 3px;
-  background: ${THEME.bgDark1};
-  border: 1px solid ${THEME.borderDark};
+  background: ${(p) => p.theme.bgDark1};
+  border: 1px solid ${(p) => p.theme.borderDark};
   overflow: hidden;
-  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
-  color: ${THEME.textNormal};
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
+  color: ${(p) => p.theme.textNormal};
+  text-shadow: ${(p) => p.theme.shadows.textShadow};
 
   @media (max-width: 500px) {
     flex-basis: 100%;
@@ -974,12 +969,12 @@ var IndicatorIcon = styled10(Icon)`
 var Bar = styled10.div`
   width: 100%;
   height: 10px;
-  border: 1px solid ${THEME.borderDark};
-  background: ${THEME.borderDark};
+  border: 1px solid ${(p) => p.theme.borderDark};
+  background: ${(p) => p.theme.borderDark};
 `;
 var Fill = styled10.div`
   height: 100%;
-  background: ${THEME.hint};
+  background: ${(p) => p.theme.hint};
 `;
 var Title = styled10.div`
   font-size: 1.5em;

package/dist/styling.d.mts

@@ -1,7 +1,8 @@
 import { createGlobalStyle, RuleSet } from 'styled-components';
 
 declare const GlobalStyle: ReturnType<typeof createGlobalStyle>;
-declare const THEME: {
+declare const DARK_THEME: {
+    pageBg: string;
     colorGreen: string;
     colorRed: string;
     colorAmber: string;
@@ -16,13 +17,27 @@ declare const THEME: {
     hintRGB: string;
     hintDark1: string;
     textNormal: string;
+    textActive: string;
     textMuted: string;
+    shadows: {
+        boxShadowInset: string;
+        textShadow: string;
+        textShadowActive: string;
+    };
+    gradients: {
+        button: string;
+        buttonHover: string;
+        buttonActive: string;
+        buttonPressedHover: string;
+        hintPressed: string;
+    };
     sizingPx: {
         spacing: number;
         unitHeight: number;
     };
 };
-type Theme = typeof THEME;
+type Theme = typeof DARK_THEME;
+declare const LIGHT_THEME: Theme;
 declare const BaseStyle: ReturnType<typeof createGlobalStyle>;
 declare const buttonStateNormal: RuleSet<object>;
 declare const buttonStateNormalHover: RuleSet<object>;
@@ -32,5 +47,10 @@ declare const buttonDisabled: RuleSet<object>;
 declare const rectButton: RuleSet<object>;
 declare const touchIndicatorNormal: RuleSet<object>;
 declare const touchIndicatorTouching: RuleSet<object>;
+declare const PreferredThemeProvider: React.FC<{
+    dark: Theme;
+    light: Theme;
+    children: React.ReactNode;
+}>;
 
-export { BaseStyle, GlobalStyle, THEME, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };
+export { BaseStyle, DARK_THEME, GlobalStyle, LIGHT_THEME, PreferredThemeProvider, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };

package/dist/styling.d.ts

@@ -1,7 +1,8 @@
 import { createGlobalStyle, RuleSet } from 'styled-components';
 
 declare const GlobalStyle: ReturnType<typeof createGlobalStyle>;
-declare const THEME: {
+declare const DARK_THEME: {
+    pageBg: string;
     colorGreen: string;
     colorRed: string;
     colorAmber: string;
@@ -16,13 +17,27 @@ declare const THEME: {
     hintRGB: string;
     hintDark1: string;
     textNormal: string;
+    textActive: string;
     textMuted: string;
+    shadows: {
+        boxShadowInset: string;
+        textShadow: string;
+        textShadowActive: string;
+    };
+    gradients: {
+        button: string;
+        buttonHover: string;
+        buttonActive: string;
+        buttonPressedHover: string;
+        hintPressed: string;
+    };
     sizingPx: {
         spacing: number;
         unitHeight: number;
     };
 };
-type Theme = typeof THEME;
+type Theme = typeof DARK_THEME;
+declare const LIGHT_THEME: Theme;
 declare const BaseStyle: ReturnType<typeof createGlobalStyle>;
 declare const buttonStateNormal: RuleSet<object>;
 declare const buttonStateNormalHover: RuleSet<object>;
@@ -32,5 +47,10 @@ declare const buttonDisabled: RuleSet<object>;
 declare const rectButton: RuleSet<object>;
 declare const touchIndicatorNormal: RuleSet<object>;
 declare const touchIndicatorTouching: RuleSet<object>;
+declare const PreferredThemeProvider: React.FC<{
+    dark: Theme;
+    light: Theme;
+    children: React.ReactNode;
+}>;
 
-export { BaseStyle, GlobalStyle, THEME, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };
+export { BaseStyle, DARK_THEME, GlobalStyle, LIGHT_THEME, PreferredThemeProvider, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };

package/dist/styling.js

@@ -10,10 +10,10 @@
 
 
 
-var _chunkY5UYS6EXjs = require('./chunk-Y5UYS6EX.js');
-require('./chunk-MLKGABMK.js');
 
 
+var _chunkWVMAJYGIjs = require('./chunk-WVMAJYGI.js');
+require('./chunk-7VTNOX5O.js');
 
 
 
@@ -24,4 +24,8 @@ require('./chunk-MLKGABMK.js');
 
 
 
-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;
+
+
+
+
+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

@@ -1,7 +1,9 @@
 import {
   BaseStyle,
+  DARK_THEME,
   GlobalStyle,
-  THEME,
+  LIGHT_THEME,
+  PreferredThemeProvider,
   buttonDisabled,
   buttonPressed,
   buttonStateNormal,
@@ -10,12 +12,14 @@ import {
   rectButton,
   touchIndicatorNormal,
   touchIndicatorTouching
-} from "./chunk-6Z2ACPNM.mjs";
-import "./chunk-7P6ASYW6.mjs";
+} from "./chunk-BQS6YM6U.mjs";
+import "./chunk-E7JSREGM.mjs";
 export {
   BaseStyle,
+  DARK_THEME,
   GlobalStyle,
-  THEME,
+  LIGHT_THEME,
+  PreferredThemeProvider,
   buttonDisabled,
   buttonPressed,
   buttonStateNormal,

package/dist/util/index.d.mts

@@ -19,5 +19,6 @@ declare function trackTouch(touch: React.Touch, move: (pos: {
 }) => void): void;
 
 declare const calculateClass: (...args: (string | undefined | null | false)[]) => string;
+declare const usePreferredColorScheme: () => 'dark' | 'light';
 
-export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePressable };
+export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePreferredColorScheme, usePressable };

package/dist/util/index.d.ts

@@ -19,5 +19,6 @@ declare function trackTouch(touch: React.Touch, move: (pos: {
 }) => void): void;
 
 declare const calculateClass: (...args: (string | undefined | null | false)[]) => string;
+declare const usePreferredColorScheme: () => 'dark' | 'light';
 
-export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePressable };
+export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePreferredColorScheme, usePressable };

package/dist/util/index.js

@@ -5,13 +5,14 @@
 
 
 
-var _chunkXEIKOLS2js = require('../chunk-XEIKOLS2.js');
-require('../chunk-MLKGABMK.js');
 
+var _chunk7VTNOX5Ojs = require('../chunk-7VTNOX5O.js');
 
 
 
 
 
 
-exports.calculateClass = _chunkXEIKOLS2js.calculateClass; exports.initialiseListeners = _chunkXEIKOLS2js.initialiseListeners; exports.switchToMouseMode = _chunkXEIKOLS2js.switchToMouseMode; exports.switchToTouchMode = _chunkXEIKOLS2js.switchToTouchMode; exports.trackTouch = _chunkXEIKOLS2js.trackTouch; exports.usePressable = _chunkXEIKOLS2js.usePressable;
+
+
+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;

package/dist/util/index.mjs

@@ -4,14 +4,15 @@ import {
   switchToMouseMode,
   switchToTouchMode,
   trackTouch,
+  usePreferredColorScheme,
   usePressable
-} from "../chunk-35U577MM.mjs";
-import "../chunk-7P6ASYW6.mjs";
+} from "../chunk-E7JSREGM.mjs";
 export {
   calculateClass,
   initialiseListeners,
   switchToMouseMode,
   switchToTouchMode,
   trackTouch,
+  usePreferredColorScheme,
   usePressable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/toolkit-frontend",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "private": false,
   "description": "Library of the frontend react components used to render the @arcanejs Toolkit",
   "keywords": [],
@@ -27,7 +27,7 @@
       "require": "./dist/components/core/index.js"
     },
     "./styling": {
-      "@arcanejs/source": "./src/styling.ts",
+      "@arcanejs/source": "./src/styling.tsx",
       "types": "./dist/styling.d.ts",
       "import": "./dist/styling.mjs",
       "require": "./dist/styling.js"
@@ -55,14 +55,14 @@
     "eslint": "^8.57.0",
     "tsup": "^8.1.0",
     "typescript": "^5.3.3",
-    "@arcanejs/typescript-config": "^0.0.0",
-    "@arcanejs/eslint-config": "^0.0.0"
+    "@arcanejs/eslint-config": "^0.0.0",
+    "@arcanejs/typescript-config": "^0.0.0"
   },
   "dependencies": {
     "react": "^18",
     "react-dom": "18.3.1",
     "styled-components": "^6.1.13",
-    "@arcanejs/protocol": "^0.4.1"
+    "@arcanejs/protocol": "^0.5.0"
   },
   "files": [
     "dist"

package/dist/chunk-7P6ASYW6.mjs

@@ -1,9 +0,0 @@
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-export {
-  __export
-};

package/dist/chunk-MLKGABMK.js

@@ -1,9 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-
-
-exports.__export = __export;