@weser/theming 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present Robin Weser
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# @weser/theming
+
+<img alt="npm version" src="https://badge.fury.io/js/@weser/theming.svg"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/@weser/theming.svg"> <a href="https://bundlephobia.com/result?p=@weser/theming@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@weser/theming.svg"></a>
+
+## Installation
+
+```sh
+# npm
+npm i --save @weser/theming
+# yarn
+yarn add @weser/theming
+# pnpm
+pnpm add @weser/theming
+```
+
+## Documentation
+
+## License
+
+@weser/theming is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
+Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
+Created with ♥ by [@robinweser](http://weser.io).

package/dist/alpha.d.ts

@@ -0,0 +1 @@
+export default function alpha(reference: string, alpha: number): string;

package/dist/alpha.js

@@ -0,0 +1,12 @@
+function normalizeAlpha(alpha) {
+    if (alpha < 0) {
+        return 0;
+    }
+    if (alpha > 1) {
+        return 1;
+    }
+    return alpha;
+}
+export default function alpha(reference, alpha) {
+    return `hsl(from ${reference} h s l / ${normalizeAlpha(alpha)})`;
+}

package/dist/createTheme.d.ts

@@ -0,0 +1,7 @@
+import { Tokens } from './types.js';
+export type SingleConfig = {
+    selector?: string;
+    shouldTransformValue?: (path: string) => boolean;
+};
+export declare const defaultShouldTransformValue: () => boolean;
+export default function createTheme<T extends Tokens>(tokens: T, config?: SingleConfig): [T, string];

package/dist/createTheme.js

@@ -0,0 +1,27 @@
+import isObject from 'isobject';
+import createVariable from './createVariable.js';
+export const defaultShouldTransformValue = () => true;
+export default function createTheme(tokens, config = {}) {
+    const { selector = ':root', shouldTransformValue = defaultShouldTransformValue, } = config;
+    const [theme, declarations] = extractVariables(structuredClone(tokens), shouldTransformValue);
+    const css = `${selector}{${declarations.join(';')}}`;
+    return [theme, css];
+}
+function extractVariables(tokens, convert, path = '', variables = []) {
+    for (const property in tokens) {
+        const value = tokens[property];
+        const name = path + (path ? '.' : '') + property;
+        if (isObject(value)) {
+            extractVariables(value, convert, name, variables);
+        }
+        else {
+            if (convert(path)) {
+                const [reference, declaration] = createVariable(name.replace(/[.]/g, '-'), value);
+                variables.push(declaration);
+                // @ts-ignore
+                tokens[property] = reference;
+            }
+        }
+    }
+    return [tokens, variables];
+}

package/dist/createThemes.d.ts

@@ -0,0 +1,11 @@
+import { SingleConfig } from './createTheme.js';
+import { Tokens } from './types.js';
+type ThemeMap<T> = {
+    [name: string]: T;
+};
+type MutliConfig = {
+    shouldTransformValue?: SingleConfig['shouldTransformValue'];
+    getSelector?: (name: string) => string;
+};
+export default function createThemes<T extends Tokens>(themes: ThemeMap<T>, config?: MutliConfig): [T, string];
+export {};

package/dist/createThemes.js

@@ -0,0 +1,16 @@
+import createTheme, { defaultShouldTransformValue, } from './createTheme.js';
+const defaultGetSelector = (name) => name;
+export default function createThemes(themes, config = {}) {
+    const { shouldTransformValue = defaultShouldTransformValue, getSelector = defaultGetSelector, } = config;
+    let css = '';
+    let theme;
+    for (const name in themes) {
+        const [_theme, _css] = createTheme(themes[name], {
+            shouldTransformValue,
+            selector: getSelector(name),
+        });
+        css += _css;
+        theme = _theme;
+    }
+    return [theme, css];
+}

package/dist/createVariable.d.ts

@@ -0,0 +1 @@
+export default function createVariable(name: string, value: string): [string, string];

package/dist/createVariable.js

@@ -0,0 +1,6 @@
+export default function createVariable(name, value) {
+    const variable = `--${name}`;
+    const reference = `var(${variable})`;
+    const declaration = `${variable}:${value}`;
+    return [reference, declaration];
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as createVariable } from './createVariable.js';
+export { default as createTheme } from './createTheme.js';
+export { default as createThemes } from './createThemes.js';
+export { default as alpha } from './alpha.js';
+export { default as a } from './alpha.js';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as createVariable } from './createVariable.js';
+export { default as createTheme } from './createTheme.js';
+export { default as createThemes } from './createThemes.js';
+export { default as alpha } from './alpha.js';
+export { default as a } from './alpha.js';

package/dist/types.d.ts

@@ -0,0 +1 @@
+export type Tokens = Record<string, any>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/useClickAway.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export default function useClickAway(ref: RefObject<HTMLElement | null>, callback: () => void, active?: boolean): void;

package/dist/useClickAway.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+export default function useClickAway(ref, callback, active = true) {
+    useEffect(() => {
+        const onClickAway = (e) => {
+            if (active && ref.current) {
+                const isClickOnInner = ref.current.contains(e.target);
+                if (!isClickOnInner) {
+                    setTimeout(callback, 0);
+                }
+            }
+        };
+        document.addEventListener('mousedown', onClickAway);
+        document.addEventListener('touchstart', onClickAway);
+        return () => {
+            document.removeEventListener('mousedown', onClickAway);
+            document.removeEventListener('touchstart', onClickAway);
+        };
+    }, [ref, active, callback]);
+}

package/dist/useClientOnly.d.ts

@@ -0,0 +1 @@
+export default function useClientSide(): boolean;

package/dist/useClientOnly.js

@@ -0,0 +1,6 @@
+import { useEffect, useState } from 'react';
+export default function useClientSide() {
+    const [isClientSide, setClientSide] = useState(false);
+    useEffect(() => setClientSide(true), []);
+    return isClientSide;
+}

package/dist/useDisclosure.d.ts

@@ -0,0 +1,16 @@
+export default function useDisclosure(defaultExpanded?: boolean): {
+    toggleProps: {
+        id: string;
+        onClick: void;
+        type: string;
+        'aria-expanded': boolean;
+        'aria-controls': string;
+    };
+    contentProps: {
+        id: string;
+        'aria-hidden': boolean;
+        'aria-labelledby': string;
+    };
+    isExpanded: boolean;
+    toggle: void;
+};

package/dist/useDisclosure.js

@@ -0,0 +1,25 @@
+import { useState, useEffect, useId } from 'react';
+export default function useDisclosure(defaultExpanded = false) {
+    const [isExpanded, setExpanded] = useState(defaultExpanded);
+    const id = useId();
+    useEffect(() => setExpanded(defaultExpanded), [defaultExpanded]);
+    const toggle = setExpanded((isExpanded) => !isExpanded);
+    const toggleProps = {
+        id: id + '-toggle',
+        onClick: toggle,
+        type: 'button',
+        'aria-expanded': isExpanded,
+        'aria-controls': id + '-content',
+    };
+    const contentProps = {
+        id: id + '-content',
+        'aria-hidden': !isExpanded,
+        'aria-labelledby': id + '-toggle',
+    };
+    return {
+        toggleProps,
+        contentProps,
+        isExpanded,
+        toggle,
+    };
+}

package/dist/useFocusTrap.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Config = {
+    visible?: boolean;
+    autoFocus?: boolean;
+};
+export default function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean, config?: Config): void;
+export {};

package/dist/useFocusTrap.js

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import useKeyDown from './useKeyDown.js';
+const focusableSelector = `:is(
+  a[href], 
+  area[href], 
+  input:not([disabled]), 
+  select:not([disabled]), 
+  textarea:not([disabled]), 
+  button:not([disabled]), 
+  [tabindex]:not([tabindex="-1"]), 
+  [contenteditable]
+)`;
+export default function useFocusTrap(ref, active, config = {}) {
+    const { visible, autoFocus = true } = config;
+    useKeyDown('Tab', (e) => {
+        const element = ref.current;
+        if (!active || !element) {
+            return;
+        }
+        const focusables = [
+            ...element.querySelectorAll(focusableSelector),
+        ].filter((el) => el.hasAttribute('tabindex')
+            ? el.getAttribute('tabindex') !== '-1'
+            : true);
+        const firstFocusable = focusables[0];
+        const lastFocusable = focusables[focusables.length - 1];
+        const activeElement = document.activeElement;
+        let nextElement;
+        if (activeElement && focusables.includes(activeElement)) {
+            const index = focusables.indexOf(activeElement);
+            if (e.shiftKey) {
+                if (index === 0) {
+                    nextElement = lastFocusable;
+                }
+            }
+            else {
+                if (index === focusables.length - 1) {
+                    nextElement = firstFocusable;
+                }
+            }
+        }
+        else {
+            if (e.shiftKey) {
+                nextElement = lastFocusable;
+            }
+            else {
+                nextElement = firstFocusable;
+            }
+        }
+        if (nextElement) {
+            ;
+            nextElement.focus();
+            e.preventDefault();
+        }
+    }, {
+        active,
+    });
+    useEffect(() => {
+        const element = ref.current;
+        if (!autoFocus || !visible || !element) {
+            return;
+        }
+        const autoFocusElement = element.querySelector('[data-autofocus="true"]' + focusableSelector);
+        if (autoFocusElement) {
+            // @ts-ignore
+            autoFocusElement.focus();
+            return;
+        }
+        const nodeList = element.querySelectorAll(focusableSelector);
+        const elements = Array.from(nodeList);
+        const focusableElements = elements.filter((element) => !element.hasAttribute('tabindex') ||
+            element.getAttribute('tabindex') === '0');
+        // 1. focus the first focusable
+        // @ts-ignore, TODO: fix typing
+        focusableElements[0]?.focus();
+    }, [visible, ref, autoFocus]);
+}

package/dist/useKeyDown.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Options = {
+    target?: RefObject<HTMLElement>;
+    active?: boolean;
+};
+export default function useKeyDown(keyCode: string | Array<string>, callback: (e: KeyboardEvent) => void, options?: Options): void;
+export {};

package/dist/useKeyDown.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+export default function useKeyDown(keyCode, callback, options = {}) {
+    const { active = true, target } = options;
+    const keyCodes = [].concat(keyCode);
+    useEffect(() => {
+        if (!active || target === null || target?.current === null) {
+            return;
+        }
+        const hasRef = target && target.current;
+        const element = hasRef ? target.current : document;
+        if (element) {
+            const handleKeyDown = (e) => {
+                if (keyCodes.includes(e.code) &&
+                    (!hasRef || (hasRef && document.activeElement === element))) {
+                    callback(e);
+                }
+            };
+            element.addEventListener('keydown', handleKeyDown);
+            return () => element.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [target, callback, active, keyCode]);
+}

package/dist/useRouteChange.d.ts

@@ -0,0 +1 @@
+export default function useRouteChange(onRouteChange: (path: string) => void, pathname?: string): void;

package/dist/useRouteChange.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+export default function useRouteChange(onRouteChange, pathname) {
+    useEffect(() => {
+        if (pathname) {
+            onRouteChange(pathname);
+        }
+    }, [pathname]);
+    // track clicks on links with the current path
+    useEffect(() => {
+        const onClick = (e) => {
+            const target = e.target;
+            if (target.tagName === 'A' && target.href === pathname) {
+                onRouteChange(pathname);
+            }
+        };
+        window.addEventListener('click', onClick);
+        return () => window.removeEventListener('click', onClick);
+    }, []);
+}

package/dist/useScrollBlocking.d.ts

@@ -0,0 +1 @@
+export default function useScrollBlocking(active: boolean): void;

package/dist/useScrollBlocking.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+let scrollTop;
+function blockScrolling(scrollElement) {
+    scrollTop = window.scrollY;
+    scrollElement.style.overflow = 'hidden';
+    scrollElement.style.position = 'fixed';
+    scrollElement.style.width = '100%';
+    scrollElement.style.top = -scrollTop + 'px';
+}
+function enableScrolling(scrollElement) {
+    scrollElement.style.removeProperty('position');
+    scrollElement.style.removeProperty('overflow');
+    scrollElement.style.removeProperty('top');
+    scrollElement.style.removeProperty('width');
+    window.scrollTo(0, scrollTop);
+}
+function toggleScrolling(isBlocked) {
+    const scrollElement = document.scrollingElement;
+    if (isBlocked) {
+        blockScrolling(scrollElement);
+    }
+    else {
+        enableScrolling(scrollElement);
+    }
+}
+export default function useScrollBlocking(active) {
+    useEffect(() => toggleScrolling(active), [active]);
+}

package/dist/useTrigger.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Props = {
+    defaultVisible?: boolean;
+    getTrigger?: () => HTMLElement | null;
+};
+export default function useTrigger({ defaultVisible, getTrigger, }?: Props): [boolean, (visible: boolean) => void, RefObject<HTMLElement>];
+export {};

package/dist/useTrigger.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from 'react';
+export default function useTrigger({ defaultVisible = false, getTrigger, } = {}) {
+    const triggerRef = useRef(null);
+    const [isVisible, _setVisible] = useState(false);
+    function getTriggerElement() {
+        if (getTrigger) {
+            return getTrigger();
+        }
+        return triggerRef.current;
+    }
+    function setVisible(visible) {
+        if (isVisible !== visible) {
+            _setVisible(visible);
+            if (!visible) {
+                const trigger = getTriggerElement();
+                if (trigger) {
+                    trigger.focus();
+                }
+            }
+        }
+    }
+    useEffect(() => _setVisible(defaultVisible), [defaultVisible]);
+    return [isVisible, setVisible, triggerRef];
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@weser/theming",
+  "version": "0.0.1",
+  "description": "Utils for theming with CSS variables",
+  "author": "Robin Weser <robin@weser.io>",
+  "license": "MIT",
+  "homepage": "https://github.com/robinweser/weser.git",
+  "repository": "https://github.com/robinweser/weser.git",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist/**"
+  ],
+  "browserslist": [
+    "IE >= 11",
+    "Firefox >= 60",
+    "Safari >= 11.1",
+    "Chrome >= 66",
+    "ChromeAndroid >= 66",
+    "iOS >= 11.3",
+    "Edge >= 15"
+  ],
+  "scripts": {
+    "setup": "pnpm build",
+    "clean": "rimraf dist",
+    "build": "tsc -b",
+    "dev": "pnpm build -w",
+    "test": "ava"
+  },
+  "keywords": [
+    "theming",
+    "css",
+    "css theming"
+  ],
+  "dependencies": {
+    "isobject": "^4.0.0"
+  },
+  "devDependencies": {
+    "ava": "^6.1.3",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.4.5"
+  },
+  "gitHead": "f8cd929768ab80c7c441f66770df2a95c33318a7"
+}