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

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

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

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

@@ -1,7 +1,7 @@
 import { ColorScheme } from "../types";
 export interface ColorSchemeOptions {
     defaultColorScheme?: ColorScheme;
-    getUserSettings: () => ColorScheme;
+    getUserSettings: () => ColorScheme | null;
     respectSystemSetting?: boolean;
     respectUserSettings?: boolean;
     setUserSettings: (colorScheme: ColorScheme) => void;

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

@@ -7,9 +7,10 @@ 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) ||
+        const userSettings = getUserSettings();
+        if ((respectUserSettings && userSettings === inverseColorScheme) ||
             (respectSystemSetting &&
-                !("theme" in localStorage) &&
+                !userSettings &&
                 window.matchMedia(`(prefers-color-scheme: ${inverseColorScheme})`).matches)) {
             document.body.classList.remove(defaultColorScheme);
             document.body.classList.add(inverseColorScheme);

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

@@ -5,16 +5,26 @@ 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");
+    const { respectSystemSetting, respectUserSettings, 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]);
+        const userSettings = getUserSettings();
+        let inverseColorScheme;
+        if (userSettings && respectUserSettings) {
+            document.body.classList.remove(userSettings);
+            inverseColorScheme = userSettings === "light" ? "dark" : "light";
+        }
+        else if (respectSystemSetting) {
+            const userColorScheme = window.matchMedia(`(prefers-color-scheme: dark)`).matches ? "dark" : "light";
+            document.body.classList.remove(userColorScheme);
+            inverseColorScheme = userColorScheme === "light" ? "dark" : "light";
+        }
+        if (inverseColorScheme) {
+            document.body.classList.add(inverseColorScheme);
+            setUserSettings(inverseColorScheme);
+        }
+    }, [getUserSettings, respectSystemSetting, respectUserSettings, setUserSettings]);
 }
 exports.useToggleColorScheme = useToggleColorScheme;

package/css/loader.css

@@ -0,0 +1,11 @@
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.uxf-loader {
+    animation: spinner 1.2s linear infinite;
+
+    @apply inline-block h-12 w-12 rounded-full border-r-4 border-t-4 border-r-transparent border-t-current;
+}

package/loader/loader.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Loader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/loader/loader.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+exports.Loader = (0, forwardRef_1.forwardRef)("Loader", (props, ref) => {
+    const loaderClassName = (0, cx_1.cx)("uxf-loader", props.className);
+    return react_1.default.createElement("span", { ref: ref, className: loaderClassName });
+});

package/loader/loader.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/loader/loader.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const loader_1 = require("./loader");
+exports.default = {
+    title: "UI/Loader",
+    component: loader_1.Loader,
+};
+function Default() {
+    const loaders = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(loader_1.Loader, null),
+        react_1.default.createElement(loader_1.Loader, { className: "h-6 w-6" })));
+    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-4 space-x-4 rounded bg-white p-8" }, loaders),
+        react_1.default.createElement("div", { className: "dark space-y-4 space-x-4 rounded bg-gray-900 p-8 text-white" }, loaders)));
+}
+exports.Default = Default;

package/package.json

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