@uxf/ui 1.0.0-beta.95 → 1.0.0-beta.97

package/_private-utils/get-provider-config.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getProviderConfig = void 0;
+const color_scheme_1 = require("../color-scheme");
 const icons_1 = require("../config/icons");
 const tw_screens_1 = require("../tw-tokens/tw-screens");
 const getProviderConfig = () => ({
+    colorScheme: {
+        ...color_scheme_1.COLOR_SCHEME_DEFAULTS,
+        respectSystemSetting: false,
+        respectUserSettings: false,
+    },
     icon: { spriteFilePath: "/icons-generated/_icon-sprite.svg", iconsConfig: icons_1.ICONS },
     rasterImage: {
         breakpoints: tw_screens_1.twScreens,

package/color-scheme/color-scheme-defaults.d.ts

@@ -0,0 +1,8 @@
+import { ColorScheme } from "../types";
+export declare const COLOR_SCHEME_DEFAULTS: {
+    readonly defaultColorScheme: "light";
+    readonly getUserSettings: () => ColorScheme;
+    readonly respectSystemSetting: true;
+    readonly respectUserSettings: true;
+    readonly setUserSettings: (colorScheme: ColorScheme) => void;
+};

package/color-scheme/color-scheme-defaults.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR_SCHEME_DEFAULTS = void 0;
+exports.COLOR_SCHEME_DEFAULTS = {
+    defaultColorScheme: "light",
+    getUserSettings: () => localStorage.getItem("theme"),
+    respectSystemSetting: true,
+    respectUserSettings: true,
+    setUserSettings: (colorScheme) => localStorage.setItem("theme", colorScheme),
+};

package/color-scheme/index.d.ts

@@ -0,0 +1,2 @@
+export { COLOR_SCHEME_DEFAULTS } from "./color-scheme-defaults";
+export { useToggleColorScheme } from "./use-toggle-color-scheme";

package/color-scheme/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleColorScheme = exports.COLOR_SCHEME_DEFAULTS = void 0;
+var color_scheme_defaults_1 = require("./color-scheme-defaults");
+Object.defineProperty(exports, "COLOR_SCHEME_DEFAULTS", { enumerable: true, get: function () { return color_scheme_defaults_1.COLOR_SCHEME_DEFAULTS; } });
+var use_toggle_color_scheme_1 = require("./use-toggle-color-scheme");
+Object.defineProperty(exports, "useToggleColorScheme", { enumerable: true, get: function () { return use_toggle_color_scheme_1.useToggleColorScheme; } });

package/color-scheme/use-handle-color-scheme.d.ts

@@ -0,0 +1,9 @@
+import { ColorScheme } from "../types";
+export interface ColorSchemeOptions {
+    defaultColorScheme?: ColorScheme;
+    getUserSettings: () => ColorScheme;
+    respectSystemSetting?: boolean;
+    respectUserSettings?: boolean;
+    setUserSettings: (colorScheme: ColorScheme) => void;
+}
+export declare function useHandleColorScheme(props: ColorSchemeOptions): void;

package/color-scheme/use-handle-color-scheme.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHandleColorScheme = void 0;
+const react_1 = require("react");
+const color_scheme_defaults_1 = require("./color-scheme-defaults");
+function useHandleColorScheme(props) {
+    const { defaultColorScheme = color_scheme_defaults_1.COLOR_SCHEME_DEFAULTS.defaultColorScheme, getUserSettings, respectSystemSetting, respectUserSettings, setUserSettings, } = props;
+    (0, react_1.useEffect)(() => {
+        const inverseColorScheme = defaultColorScheme === "light" ? "dark" : "light";
+        if ((respectUserSettings && getUserSettings() === inverseColorScheme) ||
+            (respectSystemSetting &&
+                !("theme" in localStorage) &&
+                window.matchMedia(`(prefers-color-scheme: ${inverseColorScheme})`).matches)) {
+            document.body.classList.remove(defaultColorScheme);
+            document.body.classList.add(inverseColorScheme);
+        }
+        else {
+            document.body.classList.remove(inverseColorScheme);
+            document.body.classList.add(defaultColorScheme);
+        }
+    }, [defaultColorScheme, getUserSettings, respectSystemSetting, respectUserSettings, setUserSettings]);
+}
+exports.useHandleColorScheme = useHandleColorScheme;

package/color-scheme/use-toggle-color-scheme.d.ts

@@ -0,0 +1 @@
+export declare function useToggleColorScheme(): () => void;

package/color-scheme/use-toggle-color-scheme.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleColorScheme = void 0;
+const isServer_1 = require("@uxf/core/utils/isServer");
+const react_1 = require("react");
+const context_1 = require("../context");
+function useToggleColorScheme() {
+    const { getUserSettings, setUserSettings } = (0, context_1.useComponentContext)("colorScheme");
+    return (0, react_1.useCallback)(() => {
+        if (isServer_1.isServer) {
+            return;
+        }
+        const currentColorSchema = getUserSettings();
+        const inverseColorScheme = currentColorSchema === "light" ? "dark" : "light";
+        document.body.classList.remove(currentColorSchema);
+        document.body.classList.add(inverseColorScheme);
+        setUserSettings(inverseColorScheme);
+    }, [getUserSettings, setUserSettings]);
+}
+exports.useToggleColorScheme = useToggleColorScheme;

package/context/context.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { ColorSchemeOptions } from "../color-scheme/use-handle-color-scheme";
 import { IconName } from "../icon/types";
 export declare type UiContextType = {
+    colorScheme: ColorSchemeOptions;
     icon: {
         spriteFilePath: string;
         iconsConfig: Record<IconName, {

package/context/provider.js

@@ -7,7 +7,11 @@ exports.UiContextProvider = void 0;
 const dayjs_1 = require("dayjs");
 const localizedFormat_1 = __importDefault(require("dayjs/plugin/localizedFormat"));
 const react_1 = __importDefault(require("react"));
+const use_handle_color_scheme_1 = require("../color-scheme/use-handle-color-scheme");
 const context_1 = require("./context");
 (0, dayjs_1.extend)(localizedFormat_1.default);
-const UiContextProvider = (props) => (react_1.default.createElement(context_1.UiContext.Provider, { value: props.value }, props.children));
+const UiContextProvider = (props) => {
+    (0, use_handle_color_scheme_1.useHandleColorScheme)(props.value.colorScheme);
+    return react_1.default.createElement(context_1.UiContext.Provider, { value: props.value }, props.children);
+};
 exports.UiContextProvider = UiContextProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.95",
+  "version": "1.0.0-beta.97",
   "description": "",
   "publishConfig": {
     "access": "public"

package/raster-image/raster-image.js

@@ -41,7 +41,7 @@ const RasterImage = (props) => {
             ? props.heights[i]
             : props.width && props.height
                 ? Math.ceil((props.height / props.width) * w)
-                : "auto", key: w, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _f !== void 0 ? _f : (react_1.default.createElement(image_1.ImgSources, { height: (_g = props.height) !== null && _g !== void 0 ? _g : "auto", options: props.options, quality: props.quality, src: props.src, width: (_h = props.width) !== null && _h !== void 0 ? _h : "auto" })),
+                : "auto", key: `${w}-${i}`, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _f !== void 0 ? _f : (react_1.default.createElement(image_1.ImgSources, { height: (_g = props.height) !== null && _g !== void 0 ? _g : "auto", options: props.options, quality: props.quality, src: props.src, width: (_h = props.width) !== null && _h !== void 0 ? _h : "auto" })),
         react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)(imgClassName), height: props.height, loading: props.loading, src: resizerSrc, width: props.width })));
 };
 exports.RasterImage = RasterImage;

package/types/color.d.ts

@@ -1 +1,2 @@
+export declare type ColorScheme = "dark" | "light";
 export declare type HexColor = `#${string}`;

package/utils/snap-test.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.snapTest = void 0;
-const react_test_renderer_1 = require("react-test-renderer");
 const react_1 = __importDefault(require("react"));
-const context_1 = require("../context");
+const react_test_renderer_1 = require("react-test-renderer");
 const get_provider_config_1 = require("../_private-utils/get-provider-config");
+const context_1 = require("../context");
 const snapTest = (name, component) => {
     it(name, () => {
         const tree = (0, react_test_renderer_1.create)(react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() }, component)).toJSON();

package/utils/tailwind-config.js

@@ -23,6 +23,7 @@ const SCREENS = {
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: [],
+    darkMode: "class",
     theme: {
         containers: CONTAINERS,
         screens: SCREENS,