@arcanejs/toolkit-frontend 0.9.0 → 0.10.0

package/dist/styles/index.mjs

@@ -0,0 +1,11 @@
+import "../chunk-7P6ASYW6.mjs";
+
+// src/styles/index.ts
+var CORE_STYLE_PATH = "@arcanejs/toolkit-frontend/styles/core.css";
+var THEME_STYLE_PATH = "@arcanejs/toolkit-frontend/styles/theme.css";
+var BASE_STYLE_PATH = "@arcanejs/toolkit-frontend/styles/base.css";
+export {
+  BASE_STYLE_PATH,
+  CORE_STYLE_PATH,
+  THEME_STYLE_PATH
+};

package/dist/styles/theme.css

@@ -0,0 +1,115 @@
+.arcane-theme-root {
+  --arcane-page-bg: #f8f9fa;
+  --arcane-color-green: #22863a;
+  --arcane-color-red: #d73a49;
+  --arcane-color-amber: #b08800;
+  --arcane-bg-dark-1: #e9ecef;
+  --arcane-bg: #ffffff;
+  --arcane-bg-light-1: #f5f5f5;
+  --arcane-border-dark: #c7c7c7;
+  --arcane-border-light: #d7d7d7;
+  --arcane-border-lighter: #eaecef;
+  --arcane-border-lighterer: #f6f8fa;
+  --arcane-hint: #4286f4;
+  --arcane-hint-rgb: 0, 92, 197;
+  --arcane-hint-dark-1: #2a77f3;
+  --arcane-text-normal: #24292e;
+  --arcane-text-active: #202020;
+  --arcane-text-muted: #6a737d;
+  --arcane-shadow-box-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
+  --arcane-shadow-text: 0 1px rgba(255, 255, 255, 0.7);
+  --arcane-shadow-text-active: 0 1px rgba(255, 255, 255, 0.4);
+  --arcane-gradient-button: linear-gradient(to bottom, #e1e4e8, #d1d5da);
+  --arcane-gradient-button-hover: linear-gradient(to bottom, #d1d5da, #c1c6cc);
+  --arcane-gradient-button-active: linear-gradient(to bottom, #b1b6bc, #d2d6da);
+  --arcane-gradient-button-pressed-hover: linear-gradient(
+    to bottom,
+    #a1a6ac,
+    #91969c
+  );
+  --arcane-gradient-hint-pressed: linear-gradient(to bottom, #438bff, #85b3ff);
+  --arcane-spacing: 15px;
+  --arcane-unit-height: 40px;
+}
+
+.arcane-theme-root.theme-dark {
+  --arcane-page-bg: #333;
+  --arcane-color-green: #98c379;
+  --arcane-color-red: #e06c75;
+  --arcane-color-amber: #d19a66;
+  --arcane-bg-dark-1: #252524;
+  --arcane-bg: #2a2a2b;
+  --arcane-bg-light-1: #353638;
+  --arcane-border-dark: #151516;
+  --arcane-border-light: #1c1d1d;
+  --arcane-border-lighter: #252524;
+  --arcane-border-lighterer: #6b6b67;
+  --arcane-hint: #4286f4;
+  --arcane-hint-rgb: 66, 134, 244;
+  --arcane-hint-dark-1: #2a77f3;
+  --arcane-text-normal: #f3f3f5;
+  --arcane-text-active: #ffffff;
+  --arcane-text-muted: #777777;
+  --arcane-shadow-box-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+  --arcane-shadow-text: 0 -1px rgba(0, 0, 0, 0.7);
+  --arcane-shadow-text-active: 0 -1px rgba(0, 0, 0, 0.4);
+  --arcane-gradient-button: linear-gradient(to bottom, #4f5053, #343436);
+  --arcane-gradient-button-hover: linear-gradient(to bottom, #5e6064, #393a3b);
+  --arcane-gradient-button-active: linear-gradient(to bottom, #242525, #37383a);
+  --arcane-gradient-button-pressed-hover: linear-gradient(
+    to bottom,
+    #282929,
+    #414243
+  );
+  --arcane-gradient-hint-pressed: linear-gradient(to bottom, #2a77f3, #4286f4);
+}
+
+@media (prefers-color-scheme: dark) {
+  .arcane-theme-root.theme-auto {
+    --arcane-page-bg: #333;
+    --arcane-color-green: #98c379;
+    --arcane-color-red: #e06c75;
+    --arcane-color-amber: #d19a66;
+    --arcane-bg-dark-1: #252524;
+    --arcane-bg: #2a2a2b;
+    --arcane-bg-light-1: #353638;
+    --arcane-border-dark: #151516;
+    --arcane-border-light: #1c1d1d;
+    --arcane-border-lighter: #252524;
+    --arcane-border-lighterer: #6b6b67;
+    --arcane-hint: #4286f4;
+    --arcane-hint-rgb: 66, 134, 244;
+    --arcane-hint-dark-1: #2a77f3;
+    --arcane-text-normal: #f3f3f5;
+    --arcane-text-active: #ffffff;
+    --arcane-text-muted: #777777;
+    --arcane-shadow-box-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    --arcane-shadow-text: 0 -1px rgba(0, 0, 0, 0.7);
+    --arcane-shadow-text-active: 0 -1px rgba(0, 0, 0, 0.4);
+    --arcane-gradient-button: linear-gradient(
+      to bottom,
+      #4f5053,
+      #343436
+    );
+    --arcane-gradient-button-hover: linear-gradient(
+      to bottom,
+      #5e6064,
+      #393a3b
+    );
+    --arcane-gradient-button-active: linear-gradient(
+      to bottom,
+      #242525,
+      #37383a
+    );
+    --arcane-gradient-button-pressed-hover: linear-gradient(
+      to bottom,
+      #282929,
+      #414243
+    );
+    --arcane-gradient-hint-pressed: linear-gradient(
+      to bottom,
+      #2a77f3,
+      #4286f4
+    );
+  }
+}

package/dist/styling.d.mts

@@ -1,56 +1,8 @@
-import { createGlobalStyle, RuleSet } from 'styled-components';
+import React__default from 'react';
 
-declare const GlobalStyle: ReturnType<typeof createGlobalStyle>;
-declare const DARK_THEME: {
-    pageBg: string;
-    colorGreen: string;
-    colorRed: string;
-    colorAmber: string;
-    bgDark1: string;
-    bg: string;
-    bgLight1: string;
-    borderDark: string;
-    borderLight: string;
-    borderLighter: string;
-    borderLighterer: string;
-    hint: string;
-    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 DARK_THEME;
-declare const LIGHT_THEME: Theme;
-declare const BaseStyle: ReturnType<typeof createGlobalStyle>;
-declare const buttonStateNormal: RuleSet<object>;
-declare const buttonStateNormalHover: RuleSet<object>;
-declare const buttonStateNormalActive: RuleSet<object>;
-declare const buttonPressed: RuleSet<object>;
-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;
+declare const ThemeRoot: React__default.FC<{
+    children: React__default.ReactNode;
+    rootProps?: React__default.HTMLAttributes<HTMLDivElement>;
 }>;
 
-export { BaseStyle, DARK_THEME, GlobalStyle, LIGHT_THEME, PreferredThemeProvider, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };
+export { ThemeRoot };

package/dist/styling.d.ts

@@ -1,56 +1,8 @@
-import { createGlobalStyle, RuleSet } from 'styled-components';
+import React__default from 'react';
 
-declare const GlobalStyle: ReturnType<typeof createGlobalStyle>;
-declare const DARK_THEME: {
-    pageBg: string;
-    colorGreen: string;
-    colorRed: string;
-    colorAmber: string;
-    bgDark1: string;
-    bg: string;
-    bgLight1: string;
-    borderDark: string;
-    borderLight: string;
-    borderLighter: string;
-    borderLighterer: string;
-    hint: string;
-    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 DARK_THEME;
-declare const LIGHT_THEME: Theme;
-declare const BaseStyle: ReturnType<typeof createGlobalStyle>;
-declare const buttonStateNormal: RuleSet<object>;
-declare const buttonStateNormalHover: RuleSet<object>;
-declare const buttonStateNormalActive: RuleSet<object>;
-declare const buttonPressed: RuleSet<object>;
-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;
+declare const ThemeRoot: React__default.FC<{
+    children: React__default.ReactNode;
+    rootProps?: React__default.HTMLAttributes<HTMLDivElement>;
 }>;
 
-export { BaseStyle, DARK_THEME, GlobalStyle, LIGHT_THEME, PreferredThemeProvider, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };
+export { ThemeRoot };

package/dist/styling.js

@@ -1,31 +1,26 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _chunkZHJBPEPYjs = require('./chunk-ZHJBPEPY.js');
-require('./chunk-TMN35K5Y.js');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-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;
+"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; }
+
+
+var _chunkGBYIEWGNjs = require('./chunk-GBYIEWGN.js');
+require('./chunk-MLKGABMK.js');
+
+// src/styling.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ThemeRoot = ({ children, rootProps }) => {
+  const { colorSchemePreference } = _chunkGBYIEWGNjs.useColorSchemePreferences.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ...rootProps,
+      className: _chunkGBYIEWGNjs.calculateClass.call(void 0, 
+        "arcane-theme-root",
+        `theme-${colorSchemePreference}`,
+        _optionalChain([rootProps, 'optionalAccess', _ => _.className])
+      ),
+      children
+    }
+  );
+};
+
+
+exports.ThemeRoot = ThemeRoot;

package/dist/styling.mjs

@@ -1,31 +1,26 @@
 import {
-  BaseStyle,
-  DARK_THEME,
-  GlobalStyle,
-  LIGHT_THEME,
-  PreferredThemeProvider,
-  buttonDisabled,
-  buttonPressed,
-  buttonStateNormal,
-  buttonStateNormalActive,
-  buttonStateNormalHover,
-  rectButton,
-  touchIndicatorNormal,
-  touchIndicatorTouching
-} from "./chunk-6XOE7F7U.mjs";
-import "./chunk-PTANIWKR.mjs";
+  calculateClass,
+  useColorSchemePreferences
+} from "./chunk-2HBLGAG3.mjs";
+import "./chunk-7P6ASYW6.mjs";
+
+// src/styling.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeRoot = ({ children, rootProps }) => {
+  const { colorSchemePreference } = useColorSchemePreferences();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rootProps,
+      className: calculateClass(
+        "arcane-theme-root",
+        `theme-${colorSchemePreference}`,
+        rootProps?.className
+      ),
+      children
+    }
+  );
+};
 export {
-  BaseStyle,
-  DARK_THEME,
-  GlobalStyle,
-  LIGHT_THEME,
-  PreferredThemeProvider,
-  buttonDisabled,
-  buttonPressed,
-  buttonStateNormal,
-  buttonStateNormalActive,
-  buttonStateNormalHover,
-  rectButton,
-  touchIndicatorNormal,
-  touchIndicatorTouching
+  ThemeRoot
 };

package/dist/types.d.mts

@@ -1,8 +1,9 @@
 import { BaseComponentProto } from '@arcanejs/protocol';
+import { ReactElement } from 'react';
 
 type FrontendComponentRenderer = {
     namespace: string;
-    render: (component: BaseComponentProto<string, string>) => JSX.Element;
+    render: (component: BaseComponentProto<string, string>) => ReactElement;
 };
 type FrontendComponentRenderers = FrontendComponentRenderer[];
 

package/dist/types.d.ts

@@ -1,8 +1,9 @@
 import { BaseComponentProto } from '@arcanejs/protocol';
+import { ReactElement } from 'react';
 
 type FrontendComponentRenderer = {
     namespace: string;
-    render: (component: BaseComponentProto<string, string>) => JSX.Element;
+    render: (component: BaseComponentProto<string, string>) => ReactElement;
 };
 type FrontendComponentRenderers = FrontendComponentRenderer[];
 

package/dist/util/index.d.mts

@@ -1,3 +1,5 @@
+import { ClassValue } from 'clsx';
+
 declare function switchToMouseMode(ev: MouseEvent): void;
 declare function switchToTouchMode(): void;
 declare function initialiseListeners(): void;
@@ -18,13 +20,14 @@ declare function trackTouch(touch: React.Touch, move: (pos: {
     pageY: number;
 }) => void): void;
 
-declare const calculateClass: (...args: (string | undefined | null | false)[]) => string;
+declare const cn: (...args: ClassValue[]) => string;
+declare const calculateClass: (...args: ClassValue[]) => string;
 declare const VALID_COLOR_SCHEME_PREFS: readonly ["auto", "dark", "light"];
 type ColorSchemePreference = (typeof VALID_COLOR_SCHEME_PREFS)[number];
 declare const useColorSchemePreferences: () => {
-    colorSchemePreference: "dark" | "light" | "auto";
+    colorSchemePreference: "auto" | "dark" | "light";
     setColorSchemePreference: (newPreference: ColorSchemePreference) => void;
 };
 declare const usePreferredColorScheme: () => 'dark' | 'light';
 
-export { VALID_COLOR_SCHEME_PREFS, calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };
+export { VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };

package/dist/util/index.d.ts

@@ -1,3 +1,5 @@
+import { ClassValue } from 'clsx';
+
 declare function switchToMouseMode(ev: MouseEvent): void;
 declare function switchToTouchMode(): void;
 declare function initialiseListeners(): void;
@@ -18,13 +20,14 @@ declare function trackTouch(touch: React.Touch, move: (pos: {
     pageY: number;
 }) => void): void;
 
-declare const calculateClass: (...args: (string | undefined | null | false)[]) => string;
+declare const cn: (...args: ClassValue[]) => string;
+declare const calculateClass: (...args: ClassValue[]) => string;
 declare const VALID_COLOR_SCHEME_PREFS: readonly ["auto", "dark", "light"];
 type ColorSchemePreference = (typeof VALID_COLOR_SCHEME_PREFS)[number];
 declare const useColorSchemePreferences: () => {
-    colorSchemePreference: "dark" | "light" | "auto";
+    colorSchemePreference: "auto" | "dark" | "light";
     setColorSchemePreference: (newPreference: ColorSchemePreference) => void;
 };
 declare const usePreferredColorScheme: () => 'dark' | 'light';
 
-export { VALID_COLOR_SCHEME_PREFS, calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };
+export { VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };

package/dist/util/index.js

@@ -8,8 +8,9 @@
 
 
 
-var _chunkTMN35K5Yjs = require('../chunk-TMN35K5Y.js');
 
+var _chunkGBYIEWGNjs = require('../chunk-GBYIEWGN.js');
+require('../chunk-MLKGABMK.js');
 
 
 
@@ -19,4 +20,6 @@ var _chunkTMN35K5Yjs = require('../chunk-TMN35K5Y.js');
 
 
 
-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;
+
+
+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;

package/dist/util/index.mjs

@@ -1,6 +1,7 @@
 import {
   VALID_COLOR_SCHEME_PREFS,
   calculateClass,
+  cn,
   initialiseListeners,
   switchToMouseMode,
   switchToTouchMode,
@@ -8,10 +9,12 @@ import {
   useColorSchemePreferences,
   usePreferredColorScheme,
   usePressable
-} from "../chunk-PTANIWKR.mjs";
+} from "../chunk-2HBLGAG3.mjs";
+import "../chunk-7P6ASYW6.mjs";
 export {
   VALID_COLOR_SCHEME_PREFS,
   calculateClass,
+  cn,
   initialiseListeners,
   switchToMouseMode,
   switchToTouchMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/toolkit-frontend",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "description": "Library of the frontend react components used to render the @arcanejs Toolkit",
   "keywords": [],
@@ -32,6 +32,21 @@
       "import": "./dist/styling.mjs",
       "require": "./dist/styling.js"
     },
+    "./styles": {
+      "@arcanejs/source": "./src/styles/index.ts",
+      "types": "./dist/styles/index.d.ts",
+      "import": "./dist/styles/index.mjs",
+      "require": "./dist/styles/index.js"
+    },
+    "./styles/core.css": {
+      "default": "./dist/styles/core.css"
+    },
+    "./styles/theme.css": {
+      "default": "./dist/styles/theme.css"
+    },
+    "./styles/base.css": {
+      "default": "./dist/styles/base.css"
+    },
     "./types": {
       "@arcanejs/source": "./src/types.ts",
       "types": "./dist/types.d.ts",
@@ -47,22 +62,26 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.1.13",
     "@types/eslint": "^8.56.5",
     "@types/node": "^20.11.24",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "check-export-map": "^1.3.1",
     "eslint": "^8.57.0",
+    "eslint-plugin-better-tailwindcss": "^4.2.0",
+    "tailwindcss": "^4.1.13",
     "tsup": "^8.1.0",
     "typescript": "^5.3.3",
     "@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.7.0"
+    "clsx": "^2.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.5.0",
+    "@arcanejs/protocol": "^0.8.0"
   },
   "files": [
     "dist"
@@ -71,7 +90,8 @@
     "access": "public"
   },
   "scripts": {
-    "lint": "eslint . --max-warnings 0",
-    "build": "rm -rf dist && tsup && check-export-map"
+    "lint": "pnpm build:styles && ESLINT_USE_FLAT_CONFIG=true eslint . --max-warnings 0",
+    "build": "rm -rf dist && tsup && pnpm build:styles && check-export-map",
+    "build:styles": "tailwindcss -i ./src/styles/core.css -o ./dist/styles/core.css && cp ./src/styles/theme.css ./dist/styles/theme.css && cp ./src/styles/base.css ./dist/styles/base.css"
   }
 }