@vitus-labs/rocketstyle 0.76.0 → 0.79.0

package/lib/vitus-labs-rocketstyle.native.js

@@ -0,0 +1,747 @@
+import { context as context$1, Provider as Provider$1, isEmpty, render, set, get, merge, config, pick, omit, compose } from '@vitus-labs/core';
+export { context } from '@vitus-labs/core';
+import React, { createContext, useContext, useState, useCallback, useRef, useImperativeHandle, forwardRef, useMemo } from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+
+const MODE_DEFAULT = 'light';
+const PSEUDO_KEYS = ['hover', 'active', 'focus', 'pressed'];
+const THEME_MODES = {
+    light: true,
+    dark: true,
+};
+const THEME_MODES_INVERSED = {
+    dark: 'light',
+    light: 'dark',
+};
+const CONFIG_KEYS = [
+    'provider',
+    'consumer',
+    'DEBUG',
+    'name',
+    'component',
+    'inversed',
+    'passProps',
+    'styled',
+];
+const STYLING_KEYS = ['theme', 'styles'];
+const STATIC_KEYS = [...STYLING_KEYS, 'compose'];
+const ALL_RESERVED_KEYS = [
+    ...Object.keys(THEME_MODES),
+    ...CONFIG_KEYS,
+    ...STATIC_KEYS,
+    'attrs',
+];
+
+const context = createContext({});
+const useLocalContext = (consumer) => {
+    const ctx = consumer ? useContext(context) : {};
+    const result = consumer ? consumer((callback) => callback(ctx)) : {};
+    return { pseudo: {}, ...result };
+};
+const LocalProvider = context.Provider;
+
+const usePseudoState = ({ onBlur, onFocus, onMouseDown, onMouseEnter, onMouseLeave, onMouseUp, }) => {
+    const [hover, setHover] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const [pressed, setPressed] = useState(false);
+    const handleOnMouseEnter = useCallback((e) => {
+        setHover(true);
+        if (onMouseEnter)
+            onMouseEnter(e);
+    }, [onMouseEnter]);
+    const handleOnMouseLeave = useCallback((e) => {
+        setHover(false);
+        setPressed(false);
+        if (onMouseLeave)
+            onMouseLeave(e);
+    }, [onMouseLeave]);
+    const handleOnMouseDown = useCallback((e) => {
+        setPressed(true);
+        if (onMouseDown)
+            onMouseDown(e);
+    }, [onMouseDown]);
+    const handleOnMouseUp = useCallback((e) => {
+        setPressed(false);
+        if (onMouseUp)
+            onMouseUp(e);
+    }, [onMouseUp]);
+    const handleOnFocus = useCallback((e) => {
+        setFocus(true);
+        if (onFocus)
+            onFocus(e);
+    }, [onFocus]);
+    const handleOnBlur = useCallback((e) => {
+        setFocus(false);
+        if (onBlur)
+            onBlur(e);
+    }, [onBlur]);
+    return {
+        state: {
+            hover,
+            focus,
+            pressed,
+        },
+        events: {
+            onMouseEnter: handleOnMouseEnter,
+            onMouseLeave: handleOnMouseLeave,
+            onMouseDown: handleOnMouseDown,
+            onMouseUp: handleOnMouseUp,
+            onFocus: handleOnFocus,
+            onBlur: handleOnBlur,
+        },
+    };
+};
+
+const useRocketstyleRef = ({ $rocketstyleRef, ref }) => {
+    const internalRef = useRef(null);
+    useImperativeHandle($rocketstyleRef, () => internalRef.current);
+    useImperativeHandle(ref, () => internalRef.current);
+    return internalRef;
+};
+
+const Provider = ({ provider = Provider$1, inversed, ...props }) => {
+    const ctx = useContext(context$1);
+    const { theme, mode, provider: RocketstyleProvider, children, } = { ...ctx, ...props, provider };
+    let newMode = MODE_DEFAULT;
+    if (mode) {
+        newMode = inversed ? THEME_MODES_INVERSED[mode] : mode;
+    }
+    return (React.createElement(RocketstyleProvider, { mode: newMode, isDark: newMode === 'dark', isLight: newMode === 'light', theme: theme, provider: provider }, children));
+};
+
+const useThemeAttrs = ({ inversed }) => {
+    const { theme, mode: ctxMode = 'light', isDark: ctxDark, } = useContext(context$1) || {};
+    const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
+    const isDark = inversed ? !ctxDark : ctxDark;
+    const isLight = !isDark;
+    return { theme, mode, isDark, isLight };
+};
+
+const RocketStyleProviderComponent = (WrappedComponent) => forwardRef(({ onMouseEnter, onMouseLeave, onMouseUp, onMouseDown, onFocus, onBlur, $rocketstate, ...props }, ref) => {
+    // pseudo hook to detect states hover / pressed / focus
+    const pseudo = usePseudoState({
+        onMouseEnter,
+        onMouseLeave,
+        onMouseUp,
+        onMouseDown,
+        onFocus,
+        onBlur,
+    });
+    const updatedState = useMemo(() => ({
+        ...$rocketstate,
+        pseudo: { ...$rocketstate.pseudo, ...pseudo.state },
+    }), [$rocketstate, pseudo]);
+    return (React.createElement(LocalProvider, { value: updatedState },
+        React.createElement(WrappedComponent, { ...props, ...pseudo.events, ref: ref, "$rocketstate": updatedState })));
+});
+
+class ThemeManager {
+    baseTheme = new WeakMap();
+    dimensionsThemes = new WeakMap();
+    modeBaseTheme = { light: new WeakMap(), dark: new WeakMap() };
+    modeDimensionTheme = { light: new WeakMap(), dark: new WeakMap() };
+}
+
+/* eslint-disable no-param-reassign */
+const removeUndefinedProps = (props) => Object.keys(props).reduce((acc, key) => {
+    const currentValue = props[key];
+    if (currentValue !== undefined)
+        return { ...acc, [key]: currentValue };
+    return acc;
+}, {});
+const pickStyledAttrs = (props, keywords) => Object.keys(props).reduce((acc, key) => {
+    if (keywords[key] && props[key])
+        acc[key] = props[key];
+    return acc;
+}, {});
+const calculateChainOptions = (options) => (args) => {
+    const result = {};
+    if (isEmpty(options))
+        return result;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return options.reduce((acc, item) => Object.assign(acc, item(...args)), {});
+};
+const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensions }) => {
+    const result = {};
+    // (1) find dimension keys values & initialize
+    // object with possible options
+    Object.keys(dimensions).forEach((item) => {
+        const pickedProp = props[item];
+        const valueTypes = ['number', 'string'];
+        // if the property is mutli key, allow assign array as well
+        if (multiKeys && multiKeys[item] && Array.isArray(pickedProp)) {
+            result[item] = pickedProp;
+        }
+        // assign when it's only a string or number otherwise it's considered
+        // as invalid param
+        else if (valueTypes.includes(typeof pickedProp)) {
+            result[item] = pickedProp;
+        }
+        else {
+            result[item] = undefined;
+        }
+    });
+    // (2) if booleans are being used let's find the rest
+    if (useBooleans) {
+        const propsKeys = Object.keys(props).reverse();
+        Object.entries(result).forEach(([key, value]) => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            const isMultiKey = multiKeys[key];
+            // when value in result is not assigned yet
+            if (!value) {
+                let newDimensionValue;
+                const keywords = Object.keys(dimensions[key]);
+                if (isMultiKey) {
+                    newDimensionValue = propsKeys.filter((key) => keywords.includes(key));
+                }
+                else {
+                    // reverse props to guarantee the last one will have
+                    // a priority over previous ones
+                    newDimensionValue = propsKeys.find((key) => {
+                        if (keywords.includes(key) && props[key])
+                            return key;
+                        return false;
+                    });
+                }
+                result[key] = newDimensionValue;
+            }
+        });
+    }
+    return result;
+};
+
+/* eslint-disable no-underscore-dangle */
+const rocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
+    // --------------------------------------------------
+    // .attrs(...)
+    // first we need to calculate final props which are
+    // being returned by using `attr` chaining method
+    // --------------------------------------------------
+    const calculateAttrs = calculateChainOptions(attrs);
+    const calculatePriorityAttrs = calculateChainOptions(priorityAttrs);
+    const Enhanced = (WrappedComponent) => forwardRef((props, ref) => {
+        const { theme, mode, isDark, isLight } = useThemeAttrs({
+            inversed,
+        });
+        const callbackParams = [theme, { render, mode, isDark, isLight }];
+        // --------------------------------------------------
+        // remove undefined props not to override potential default props
+        // only props with value (e.g. `null`) should override default props
+        // --------------------------------------------------
+        const filteredProps = removeUndefinedProps(props);
+        const prioritizedAttrs = calculatePriorityAttrs([
+            filteredProps,
+            ...callbackParams,
+        ]);
+        const finalAttrs = calculateAttrs([
+            {
+                ...prioritizedAttrs,
+                ...filteredProps,
+            },
+            ...callbackParams,
+        ]);
+        return (React.createElement(WrappedComponent, { "$rocketstyleRef": ref, ...prioritizedAttrs, ...finalAttrs, ...filteredProps }));
+    });
+    return Enhanced;
+};
+
+const createStaticsChainingEnhancers = ({ context, dimensionKeys, func, options, }) => {
+    const keys = [...dimensionKeys, ...STATIC_KEYS];
+    keys.forEach((item) => {
+        // eslint-disable-next-line no-param-reassign
+        context[item] = (props) => func(options, { [item]: props });
+    });
+};
+const createStaticsEnhancers = ({ context, options, }) => {
+    if (!isEmpty(options)) {
+        Object.assign(context, options);
+    }
+};
+
+/* eslint-disable import/prefer-default-export */
+const removeNullableValues = (obj) => Object.entries(obj)
+    .filter(([, v]) => v != null && v !== false)
+    .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});
+// --------------------------------------------------------
+// Remove All Empty Values
+// --------------------------------------------------------
+// type RemoveAllEmptyValues = (obj: Record<string, any>) => Record<string, any>
+// export const removeAllEmptyValues: RemoveAllEmptyValues = (obj) =>
+//   Object.entries(obj)
+//     .filter(([, v]) => v != null)
+//     .reduce(
+//       (acc, [k, v]) => ({
+//         ...acc,
+//         [k]: typeof v === 'object' ? removeAllEmptyValues(v) : v,
+//       }),
+//       {}
+//     )
+
+const isValidKey = (value) => value !== undefined && value !== null && value !== false;
+const isMultiKey = (value) => {
+    if (typeof value === 'object' && value !== null)
+        return [true, get(value, 'propName')];
+    return [false, value];
+};
+const getDimensionsMap = ({ themes, useBooleans }) => {
+    const result = {
+        keysMap: {},
+        keywords: {},
+    };
+    if (isEmpty(themes))
+        return result;
+    return Object.entries(themes).reduce((accumulator, [key, value]) => {
+        const { keysMap, keywords } = accumulator;
+        keywords[key] = true;
+        Object.entries(value).forEach(([itemKey, itemValue]) => {
+            if (!isValidKey(itemValue))
+                return;
+            if (useBooleans) {
+                keywords[itemKey] = true;
+            }
+            set(keysMap, [key, itemKey], true);
+        });
+        return accumulator;
+    }, result);
+};
+const getKeys = (obj) => Object.keys(obj);
+const getValues = (obj) => Object.values(obj);
+const getDimensionsValues = (obj) => getValues(obj).map((item) => {
+    if (typeof item === 'object') {
+        return item.propName;
+    }
+    return item;
+});
+const getMultipleDimensions = (obj) => getValues(obj).reduce((accumulator, value) => {
+    if (typeof value === 'object') {
+        // eslint-disable-next-line no-param-reassign
+        if (value.multi === true)
+            accumulator[value.propName] = true;
+    }
+    return accumulator;
+}, {});
+
+/* eslint-disable no-param-reassign */
+// --------------------------------------------------------
+// Theme Mode Callback
+// --------------------------------------------------------
+const themeModeCallback = (light, dark) => (mode) => {
+    if (!mode || mode === 'light')
+        return light;
+    return dark;
+};
+themeModeCallback.isMode = true;
+const isModeCallback = (value) => typeof value === 'function' &&
+    // @ts-ignore
+    value.toString() === themeModeCallback().toString();
+const getThemeFromChain = (options, theme) => {
+    const result = {};
+    if (!options || isEmpty(options))
+        return result;
+    return options.reduce((acc, item) => merge(acc, item(theme, themeModeCallback, config.css)), result);
+};
+const getDimensionThemes = (theme, options) => {
+    const result = {};
+    if (isEmpty(options.dimensions))
+        return result;
+    return Object.entries(options.dimensions).reduce((acc, [key, value]) => {
+        const [, dimension] = isMultiKey(value);
+        const helper = options[key];
+        if (Array.isArray(helper) && helper.length > 0) {
+            const finalDimensionThemes = getThemeFromChain(helper, theme);
+            // eslint-disable-next-line no-param-reassign
+            acc[dimension] = removeNullableValues(finalDimensionThemes);
+        }
+        return acc;
+    }, result);
+};
+const getTheme = ({ rocketstate, themes, baseTheme }) => {
+    // generate final theme which will be passed to styled component
+    let finalTheme = { ...baseTheme };
+    Object.entries(rocketstate).forEach(([key, value]) => {
+        const keyTheme = themes[key];
+        if (Array.isArray(value)) {
+            value.forEach((item) => {
+                finalTheme = merge({}, finalTheme, keyTheme[item]);
+            });
+        }
+        else {
+            finalTheme = merge({}, finalTheme, keyTheme[value]);
+        }
+    });
+    return finalTheme;
+};
+const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) => {
+    const value = object[key];
+    if (typeof value === 'object' && value !== null) {
+        acc[key] = getThemeByMode(value, mode);
+    }
+    else if (isModeCallback(value)) {
+        acc[key] = value(mode);
+    }
+    else {
+        acc[key] = value;
+    }
+    return acc;
+}, {});
+
+const chainOptions = (opts, defaultOpts = []) => {
+    const result = [...defaultOpts];
+    if (typeof opts === 'function')
+        result.push(opts);
+    else if (typeof opts === 'object')
+        result.push(() => opts);
+    return result;
+};
+const chainOrOptions = (keys, opts, defaultOpts) => keys.reduce((acc, item) => ({ ...acc, [item]: opts[item] || defaultOpts[item] }), {});
+const chainReservedKeyOptions = (keys, opts, defaultOpts) => keys.reduce((acc, item) => ({
+    ...acc,
+    [item]: chainOptions(opts[item], defaultOpts[item]),
+}), {});
+
+const calculateHocsFuncs = (options = {}) => Object.values(options)
+    .filter((item) => typeof item === 'function')
+    .reverse();
+
+/* eslint-disable import/prefer-default-export */
+const calculateStyles = (styles) => {
+    if (!styles)
+        return [];
+    return styles.map((item) => item(config.css));
+};
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const cloneAndEnhance = (defaultOpts, opts) => 
+// @ts-ignore
+rocketComponent({
+    ...defaultOpts,
+    attrs: chainOptions(opts.attrs, defaultOpts.attrs),
+    priorityAttrs: chainOptions(opts.priorityAttrs, defaultOpts.priorityAttrs),
+    statics: { ...defaultOpts.statics, ...opts.statics },
+    compose: { ...defaultOpts.compose, ...opts.compose },
+    ...chainOrOptions(CONFIG_KEYS, opts, defaultOpts),
+    ...chainReservedKeyOptions([...defaultOpts.dimensionKeys, ...STYLING_KEYS], opts, defaultOpts),
+});
+// --------------------------------------------------------
+// styleComponent
+// helper function which allows function chaining
+// always returns a valid React component with static functions
+// assigned, so it can be even rendered as a valid component
+// or styles can be extended via its statics
+// --------------------------------------------------------
+// @ts-ignore
+const rocketComponent = (options) => {
+    const { component, styles } = options;
+    const { styled } = config;
+    const _calculateStylingAttrs = calculateStylingAttrs({
+        multiKeys: options.multiKeys,
+        useBooleans: options.useBooleans,
+    });
+    const componentName = options.name || options.component.displayName || options.component.name;
+    // create styled component with all options.styles if available
+    const STYLED_COMPONENT = component.IS_ROCKETSTYLE || options.styled !== true
+        ? component
+        : styled(component) `
+          ${calculateStyles(styles)};
+        `;
+    // --------------------------------------------------------
+    // COMPONENT - Final component to be rendered
+    // --------------------------------------------------------
+    const RenderComponent = options.provider
+        ? RocketStyleProviderComponent(STYLED_COMPONENT)
+        : STYLED_COMPONENT;
+    // --------------------------------------------------------
+    // THEME - Cahed & Calculated theme(s)
+    // --------------------------------------------------------
+    const ThemeManager$1 = new ThemeManager();
+    // --------------------------------------------------------
+    // COMPOSE - high-order components
+    // --------------------------------------------------------
+    const hocsFuncs = [
+        rocketStyleHOC(options),
+        ...calculateHocsFuncs(options.compose),
+    ];
+    // --------------------------------------------------------
+    // ENHANCED COMPONENT (returned component)
+    // --------------------------------------------------------
+    // .attrs() chaining option is calculated in HOC and passed as props already
+    const EnhancedComponent = forwardRef(({ $rocketstyleRef, // it's forwarded from HOC which is always on top of all hocs
+    ...props }, ref) => {
+        // --------------------------------------------------
+        // handle refs
+        // (1) one is passed from inner HOC - $rocketstyleRef
+        // (2) second one is used to be used directly (e.g. inside hocs)
+        // --------------------------------------------------
+        const internalRef = useRocketstyleRef({ $rocketstyleRef, ref });
+        // --------------------------------------------------
+        // hover - focus - pressed state passed via context from parent component
+        // --------------------------------------------------
+        const localCtx = useLocalContext(options.consumer);
+        // --------------------------------------------------
+        // general theme and theme mode dark / light passed in context
+        // --------------------------------------------------
+        const { theme, mode } = useThemeAttrs(options);
+        // --------------------------------------------------
+        // calculate themes for all defined styling dimensions
+        // .theme(...) + defined dimensions like .states(...), .sizes(...), etc.
+        // --------------------------------------------------
+        // --------------------------------------------------
+        // BASE / DEFAULT THEME Object
+        // --------------------------------------------------
+        const baseTheme = useMemo(() => {
+            const helper = ThemeManager$1.baseTheme;
+            if (!helper.has(theme)) {
+                helper.set(theme, getThemeFromChain(options.theme, theme));
+            }
+            return helper.get(theme);
+        }, 
+        // recalculate this only when theme mode changes dark / light
+        [theme]);
+        // --------------------------------------------------
+        // DIMENSION(S) THEMES Object
+        // --------------------------------------------------
+        const themes = useMemo(() => {
+            const helper = ThemeManager$1.dimensionsThemes;
+            if (!helper.has(theme)) {
+                helper.set(theme, getDimensionThemes(theme, options));
+            }
+            return helper.get(theme);
+        }, 
+        // recalculate this only when theme object changes
+        [theme]);
+        // --------------------------------------------------
+        // BASE / DEFAULT MODE THEME Object
+        // --------------------------------------------------
+        const currentModeBaseTheme = useMemo(() => {
+            const helper = ThemeManager$1.modeBaseTheme[mode];
+            if (!helper.has(baseTheme)) {
+                helper.set(baseTheme, getThemeByMode(baseTheme, mode));
+            }
+            return helper.get(baseTheme);
+        }, 
+        // recalculate this only when theme mode changes dark / light
+        [mode, baseTheme]);
+        // --------------------------------------------------
+        // DIMENSION(S) MODE THEMES Object
+        // --------------------------------------------------
+        const currentModeThemes = useMemo(() => {
+            const helper = ThemeManager$1.modeDimensionTheme[mode];
+            if (!helper.has(themes)) {
+                helper.set(themes, getThemeByMode(themes, mode));
+            }
+            return helper.get(themes);
+        }, 
+        // recalculate this only when theme mode changes dark / light
+        [mode, themes]);
+        // --------------------------------------------------
+        // calculate reserved Keys defined in dimensions as styling keys
+        // there is no need to calculate this each time - keys are based on
+        // dimensions definitions
+        // --------------------------------------------------
+        const { keysMap: dimensions, keywords: reservedPropNames } = useMemo(() => getDimensionsMap({
+            themes,
+            useBooleans: options.useBooleans,
+        }), [themes]);
+        const RESERVED_STYLING_PROPS_KEYS = useMemo(() => Object.keys(reservedPropNames), [reservedPropNames]);
+        // --------------------------------------------------
+        // get final props which are (latest has the highest priority):
+        // (1) merged styling from context,
+        // (2) `attrs` chaining method, and from
+        // (3) passing them directly to component
+        // --------------------------------------------------
+        const { pseudo, ...mergeProps } = {
+            ...localCtx,
+            ...props,
+        };
+        // --------------------------------------------------
+        // pseudo rocket state
+        // calculate final component pseudo state including pseudo state
+        // from props and override by pseudo props from context
+        // --------------------------------------------------
+        const pseudoRocketstate = {
+            ...pseudo,
+            ...pick(props, PSEUDO_KEYS),
+        };
+        // --------------------------------------------------
+        // rocketstate
+        // calculate final component state including pseudo state
+        // passed as $rocketstate prop
+        // --------------------------------------------------
+        const rocketstate = _calculateStylingAttrs({
+            props: pickStyledAttrs(mergeProps, reservedPropNames),
+            dimensions,
+        });
+        const finalRocketstate = { ...rocketstate, pseudo: pseudoRocketstate };
+        // --------------------------------------------------
+        // rocketstyle
+        // calculated (based on styling props) final theme which will be passed
+        // to our styled component
+        // passed as $rocketstyle prop
+        // --------------------------------------------------
+        const rocketstyle = getTheme({
+            rocketstate,
+            themes: currentModeThemes,
+            baseTheme: currentModeBaseTheme,
+        });
+        // --------------------------------------------------
+        // final props
+        // final props passed to WrappedComponent
+        // excluding: styling props
+        // including: $rocketstyle, $rocketstate
+        // --------------------------------------------------
+        const finalProps = {
+            // this removes styling state from props and passes its state
+            // under rocketstate key only
+            ...omit(mergeProps, [...RESERVED_STYLING_PROPS_KEYS, ...PSEUDO_KEYS]),
+            // if enforced to pass styling props, we pass them directly
+            ...(options.passProps ? pick(mergeProps, options.passProps) : {}),
+            ref: ref || $rocketstyleRef ? internalRef : undefined,
+            // state props passed to styled component only, therefore the `$` symbol
+            $rocketstyle: rocketstyle,
+            $rocketstate: finalRocketstate,
+        };
+        // all the development stuff injected
+        if (process.env.NODE_ENV !== 'production') {
+            finalProps['data-rocketstyle'] = componentName;
+        }
+        return React.createElement(RenderComponent, { ...finalProps });
+    });
+    // ------------------------------------------------------
+    // This will hoist and generate dynamically next static methods
+    // for all dimensions available in configuration
+    // ------------------------------------------------------
+    const RocketComponent = compose(...hocsFuncs)(EnhancedComponent);
+    RocketComponent.IS_ROCKETSTYLE = true;
+    RocketComponent.displayName = componentName;
+    hoistNonReactStatics(RocketComponent, options.component);
+    // ------------------------------------------------------
+    // enhance for chaining methods
+    // ------------------------------------------------------
+    createStaticsChainingEnhancers({
+        context: RocketComponent,
+        dimensionKeys: options.dimensionKeys,
+        func: cloneAndEnhance,
+        options,
+    });
+    // ------------------------------------------------------
+    RocketComponent.IS_ROCKETSTYLE = true;
+    RocketComponent.displayName = componentName;
+    RocketComponent.meta = {};
+    // ------------------------------------------------------
+    // ------------------------------------------------------
+    // enhance for statics
+    // ------------------------------------------------------
+    createStaticsEnhancers({
+        context: RocketComponent.meta,
+        options: options.statics,
+    });
+    // @ts-ignore
+    RocketComponent.attrs = (attrs, { priority } = {}) => {
+        if (priority) {
+            return cloneAndEnhance(options, {
+                priorityAttrs: attrs,
+            });
+        }
+        return cloneAndEnhance(options, {
+            attrs: attrs,
+        });
+    };
+    // @ts-ignore
+    RocketComponent.config = (opts = {}) => {
+        const result = pick(opts, CONFIG_KEYS);
+        return cloneAndEnhance(options, result);
+    };
+    // @ts-ignore
+    RocketComponent.statics = (opts) => 
+    // @ts-ignore
+    cloneAndEnhance(options, { statics: opts });
+    RocketComponent.getStaticDimensions = (theme) => {
+        const themes = getDimensionThemes(theme, options);
+        const { keysMap, keywords } = getDimensionsMap({
+            themes,
+            useBooleans: options.useBooleans,
+        });
+        return {
+            dimensions: keysMap,
+            keywords,
+            useBooleans: options.useBooleans,
+            multiKeys: options.multiKeys,
+        };
+    };
+    RocketComponent.getDefaultAttrs = (props, theme, mode) => calculateChainOptions(options.attrs)([
+        props,
+        theme,
+        {
+            render,
+            mode,
+            isDark: mode === 'light',
+            isLight: mode === 'dark',
+        },
+    ]);
+    return RocketComponent;
+};
+
+const DEFAULT_DIMENSIONS = {
+    states: 'state',
+    sizes: 'size',
+    variants: 'variant',
+    multiple: {
+        propName: 'multiple',
+        multi: true,
+    },
+};
+
+// @ts-nocheck
+const rocketstyle = ({ dimensions = DEFAULT_DIMENSIONS, useBooleans = true } = {}) => ({ name, component }) => {
+    // --------------------------------------------------------
+    // handle ERRORS in development mode
+    // --------------------------------------------------------
+    if (process.env.NODE_ENV !== 'production') {
+        const errors = {};
+        if (!component) {
+            errors.component = 'Parameter `component` is missing in params!';
+        }
+        if (!name) {
+            errors.name = 'Parameter `name` is missing in params!';
+        }
+        if (isEmpty(dimensions)) {
+            errors.dimensions = 'Parameter `dimensions` is missing in params!';
+        }
+        else {
+            const definedDimensions = getKeys(dimensions);
+            const invalidDimension = ALL_RESERVED_KEYS.some((item) => definedDimensions.includes(item));
+            if (invalidDimension) {
+                errors.invalidDimensions = `Some of your \`dimensions\` is invalid and uses reserved static keys which are
+          ${DEFAULT_DIMENSIONS.toString()}`;
+            }
+        }
+        if (!isEmpty(errors)) {
+            throw Error(JSON.stringify(errors));
+        }
+    }
+    return rocketComponent({
+        name,
+        component,
+        useBooleans,
+        dimensions,
+        dimensionKeys: getKeys(dimensions),
+        dimensionValues: getDimensionsValues(dimensions),
+        multiKeys: getMultipleDimensions(dimensions),
+        styled: true,
+    });
+};
+
+const isRocketComponent = (component) => {
+    if (component &&
+        typeof component === 'object' &&
+        component !== null &&
+        Object.prototype.hasOwnProperty.call(component, 'IS_ROCKETSTYLE')) {
+        return true;
+    }
+    return false;
+};
+
+export { Provider, rocketstyle as default, isRocketComponent, rocketstyle };
+//# sourceMappingURL=vitus-labs-rocketstyle.native.js.map