@uni-design-system/uni-react 0.0.18 → 1.0.0

package/dist/esm/core/image/image.argTypes.d.ts

@@ -1,187 +0,0 @@
-export declare const imageArgTypes: {
-    blur: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        description: string;
-    };
-    brightness: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        description: string;
-    };
-    contrast: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        description: string;
-    };
-    grayscale: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        description: string;
-    };
-    'hue-rotate': {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        description: string;
-    };
-    invert: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        description: string;
-    };
-    opacity: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        description: string;
-    };
-    saturate: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        description: string;
-    };
-    sepia: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        description: string;
-    };
-    url: {
-        control: {
-            type: string;
-        };
-        table: {
-            summary: string;
-        };
-    };
-    fit: {
-        options: string[];
-        control: {
-            type: string;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-    };
-    height: {
-        control: {
-            type: string;
-        };
-    };
-    width: {
-        control: {
-            type: string;
-        };
-    };
-};

package/dist/esm/core/image/image.argTypes.js

@@ -1,16 +0,0 @@
-import { filterArgTypes } from '../filter/filter.argTypes';
-export const imageArgTypes = Object.assign({ url: {
-        control: { type: 'text' },
-        table: { summary: 'string' },
-    }, fit: {
-        options: ['contain', 'cover', 'fill', 'none', 'scale-down'],
-        control: { type: 'inline-radio' },
-        table: {
-            type: { summary: 'string literal' },
-            defaultValue: { summary: 'cover' },
-        },
-    }, height: {
-        control: { type: 'number' },
-    }, width: {
-        control: { type: 'number' },
-    } }, filterArgTypes);

package/dist/esm/core/image/image.component.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ImageProps } from './image.model';
-export declare const Image: ({ url, alt, height, width, opacity, fit, ...rest }: ImageProps) => JSX.Element | null;

package/dist/esm/core/image/image.component.js

@@ -1,17 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import { ImageStyle } from './image.style';
-export const Image = (_a) => {
-    var { url, alt, height, width, opacity, fit = 'cover' } = _a, rest = __rest(_a, ["url", "alt", "height", "width", "opacity", "fit"]);
-    return url ? React.createElement("img", { src: url, alt: alt, style: ImageStyle(Object.assign({ fit, opacity, height, width }, rest)) }) : null;
-};

package/dist/esm/core/image/image.model.js

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

package/dist/esm/core/image/image.style.js

@@ -1,18 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { FilterStyle } from '../filter/filter.style';
-export const ImageStyle = (props) => {
-    const { fit, opacity, height, width } = props, rest = __rest(props, ["fit", "opacity", "height", "width"]);
-    const filter = FilterStyle(Object.assign({}, rest));
-    const objectFit = height || width ? {} : { objectFit: fit };
-    return Object.assign(Object.assign(Object.assign({}, objectFit), { width: (width && `${width}px`) || '100vw', height: (height && `${height}px`) || '100vh', opacity }), filter);
-};

package/dist/esm/core/image/image.types.js

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

package/dist/esm/core/image/index.js

@@ -1,2 +0,0 @@
-export * from './image.component';
-export * from './image.model';

package/dist/esm/core/index.js

@@ -1,14 +0,0 @@
-export * from './background';
-export * from './border';
-export * from './container';
-export * from './flex';
-export * from './hooks';
-export * from './icon';
-export * from './image';
-export * from './layout';
-export * from './overlay';
-export * from './padding';
-export * from './shadow';
-export * from './text';
-export * from './theme';
-export * from './transition';

package/dist/esm/core/layout/index.js

@@ -1,2 +0,0 @@
-export * from './layout.hook';
-export * from './layout.provider';

package/dist/esm/core/layout/layout.context.js

@@ -1,6 +0,0 @@
-import React from 'react';
-const LayoutContext = React.createContext({ height: 1000, width: 1000 });
-if (process.env.NODE_ENV !== 'production') {
-    LayoutContext.displayName = 'LayoutContext';
-}
-export default LayoutContext;

package/dist/esm/core/layout/layout.hook.d.ts

@@ -1,2 +0,0 @@
-import { Layout } from '@uni-design-system/uni-core';
-export declare function useLayout(): Layout;

package/dist/esm/core/layout/layout.hook.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { getDeviceOrientation, getDeviceSize } from '@uni-design-system/uni-core';
-import LayoutContext from './layout.context';
-export function useLayout() {
-    const { height, width } = React.useContext(LayoutContext);
-    const deviceSize = getDeviceSize(height, width);
-    const orientation = getDeviceOrientation(height, width);
-    return { orientation, deviceSize };
-}

package/dist/esm/core/layout/layout.provider.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const LayoutProvider: ({ children }: {
-    children: any;
-}) => JSX.Element;

package/dist/esm/core/layout/layout.provider.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import LayoutContext from './layout.context';
-// @ts-ignore
-export const LayoutProvider = ({ children }) => {
-    const getWidth = () => document.documentElement.clientWidth;
-    const getHeight = () => document.documentElement.clientHeight;
-    const [width, setWidth] = React.useState(getWidth);
-    const [height, setHeight] = React.useState(getHeight);
-    const handleWindowResize = () => {
-        setWidth(getWidth);
-        setHeight(getHeight);
-    };
-    React.useEffect(() => {
-        window.addEventListener("resize", handleWindowResize);
-        return () => window.removeEventListener("resize", handleWindowResize);
-    }, []);
-    return (React.createElement(LayoutContext.Provider, { value: { height, width } }, children));
-};

package/dist/esm/core/overlay/index.js

@@ -1,2 +0,0 @@
-export * from './overlay.component';
-export * from './overlay.model';

package/dist/esm/core/overlay/overlay.component.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { OverlayProps } from './overlay.model';
-export declare const Overlay: (props: OverlayProps) => JSX.Element;

package/dist/esm/core/overlay/overlay.component.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { OverlayStyle } from './overlay.config';
-import { useTheme } from '../theme';
-export const Overlay = (props) => {
-    const { isOpen, fadeDuration = 0.35 } = props;
-    const theme = useTheme();
-    const overlayStyle = OverlayStyle(theme, props);
-    return (React.createElement(AnimatePresence, null, isOpen && (React.createElement(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: fadeDuration }, style: overlayStyle }, props.children))));
-};

package/dist/esm/core/overlay/overlay.config.js

@@ -1,16 +0,0 @@
-import { HSLAToString } from '@uni-design-system/uni-core';
-export const OverlayStyle = (theme, { hueRotateDeg = 0, hueDeg = 0, saturation = 0, lightness = 0, transparency = 0.5, blurPx = 0 }) => {
-    const backgroundColor = HSLAToString({ hue: hueDeg, saturation, lightness, alpha: transparency });
-    return {
-        position: 'fixed',
-        left: '0',
-        top: '0',
-        width: '100vw',
-        height: '100vh',
-        backgroundColor,
-        backdropFilter: `blur(${blurPx}px) hue-rotate(${hueRotateDeg}deg)`,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    };
-};

package/dist/esm/core/overlay/overlay.model.js

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

package/dist/esm/core/padding/index.d.ts

@@ -1 +0,0 @@
-export * from './padding.style';

package/dist/esm/core/padding/index.js

@@ -1 +0,0 @@
-export * from './padding.style';

package/dist/esm/core/padding/padding.style.js

@@ -1,30 +0,0 @@
-export function Padding(size, apply) {
-    const amount = 16;
-    const unit = 'px';
-    const PaddingMap = {
-        top: {
-            paddingTop: amount + unit
-        },
-        bottom: {
-            paddingBottom: amount + unit
-        },
-        left: {
-            paddingLeft: amount + unit
-        },
-        right: {
-            paddingRight: amount + unit
-        },
-        vertical: {
-            paddingTop: amount + unit,
-            paddingBottom: amount + unit
-        },
-        horizontal: {
-            paddingLeft: amount + unit,
-            paddingRight: amount + unit
-        },
-        all: {
-            padding: amount + unit
-        }
-    };
-    return PaddingMap[apply];
-}

package/dist/esm/core/shadow/index.d.ts

@@ -1 +0,0 @@
-export * from './shadow.style';

package/dist/esm/core/shadow/index.js

@@ -1 +0,0 @@
-export * from './shadow.style';

package/dist/esm/core/shadow/shadow.style.d.ts

@@ -1,2 +0,0 @@
-import { ShadowElevation } from '@uni-design-system/uni-core';
-export declare function BoxShadow(elevation: ShadowElevation): string;

package/dist/esm/core/shadow/shadow.style.js

@@ -1,4 +0,0 @@
-import { ShadowCssMap } from '@uni-design-system/uni-core';
-export function BoxShadow(elevation) {
-    return ShadowCssMap[elevation];
-}

package/dist/esm/core/text/index.d.ts

@@ -1 +0,0 @@
-export * from './text.component';

package/dist/esm/core/text/index.js

@@ -1 +0,0 @@
-export * from './text.component';

package/dist/esm/core/text/text.component.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { FontWeightMap, } from '@uni-design-system/uni-core';
-import { useTheme } from '../theme';
-export function Text(props) {
-    const { text, children, align, role = 'body-1-long', color } = props;
-    const theme = useTheme();
-    const style = Style(theme, align, role, color);
-    return React.createElement("div", { style: style }, text || children);
-}
-function Style(theme, textAlign, role, color) {
-    const { fontSize, letterSpacing, lineHeight, fontWeight, fontFamily, fontStyle, textTransform } = theme.typography[role];
-    return {
-        color: theme.colors[color || 'on-background'],
-        fontSize: fontSize + 'px',
-        letterSpacing,
-        textAlign,
-        textTransform,
-        lineHeight: lineHeight + 'px',
-        fontFamily,
-        fontStyle,
-        fontWeight: FontWeightMap[fontWeight],
-    };
-}

package/dist/esm/core/theme/index.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { Theme } from '@uni-design-system/uni-core';
-export declare const ThemeProvider: import("react").ComponentType<{
-    theme?: Theme | undefined;
-}>, withTheme: <Props extends {
-    theme: Theme;
-}, C>(WrappedComponent: import("react").ComponentType<Props> & C) => import("react").ComponentType<import("@callstack/react-theme-provider").$Without<Props, "theme"> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<Theme> | undefined;
-}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<Props> & C, {}>, useTheme: <T = Theme>(overrides?: import("@callstack/react-theme-provider").$DeepPartial<T> | undefined) => T;

package/dist/esm/core/theme/index.js

@@ -1,3 +0,0 @@
-import { createTheming } from '@callstack/react-theme-provider';
-import { LightTheme } from '@uni-design-system/uni-core';
-export const { ThemeProvider, withTheme, useTheme } = createTheming(LightTheme);

package/dist/esm/core/transition/collapse/collapse.component.js

@@ -1,73 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { forwardRef, useEffect, useState } from 'react';
-import { TRANSITION_EASINGS, withDelay, cx, warn } from '../transition.utils';
-const isNumeric = (value) => value != null && parseInt(value.toString(), 10) > 0;
-const defaultTransitions = {
-    exit: {
-        height: { duration: 0.2, ease: TRANSITION_EASINGS.ease },
-        opacity: { duration: 0.3, ease: TRANSITION_EASINGS.ease },
-    },
-    enter: {
-        height: { duration: 0.3, ease: TRANSITION_EASINGS.ease },
-        opacity: { duration: 0.4, ease: TRANSITION_EASINGS.ease },
-    },
-};
-const variants = {
-    exit: ({ animateOpacity, startingHeight, transition, transitionEnd, delay }) => {
-        var _a;
-        return (Object.assign(Object.assign({}, (animateOpacity && { opacity: isNumeric(startingHeight) ? 1 : 0 })), { height: startingHeight, transitionEnd: transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.exit, transition: (_a = transition === null || transition === void 0 ? void 0 : transition.exit) !== null && _a !== void 0 ? _a : withDelay.exit(defaultTransitions.exit, delay) }));
-    },
-    enter: ({ animateOpacity, endingHeight, transition, transitionEnd, delay }) => {
-        var _a;
-        return (Object.assign(Object.assign({}, (animateOpacity && { opacity: 1 })), { height: endingHeight, transitionEnd: transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.enter, transition: (_a = transition === null || transition === void 0 ? void 0 : transition.enter) !== null && _a !== void 0 ? _a : withDelay.enter(defaultTransitions.enter, delay) }));
-    },
-};
-export const Collapse = forwardRef((props, ref) => {
-    const { in: isOpen, unmountOnExit, animateOpacity = true, startingHeight = 0, endingHeight = 'auto', style, className, transition, transitionEnd } = props, rest = __rest(props, ["in", "unmountOnExit", "animateOpacity", "startingHeight", "endingHeight", "style", "className", "transition", "transitionEnd"]);
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            setMounted(true);
-        });
-        return () => clearTimeout(timeout);
-    }, []);
-    /**
-     * Warn 🚨: `startingHeight` and `unmountOnExit` are mutually exclusive
-     *
-     * If you specify a starting height, the collapsed needs to be mounted
-     * for the height to take effect.
-     */
-    warn({
-        condition: Boolean(startingHeight > 0 && unmountOnExit),
-        message: `startingHeight and unmountOnExit are mutually exclusive. You can't use them together`,
-    });
-    const hasStartingHeight = parseFloat(startingHeight.toString()) > 0;
-    const custom = {
-        startingHeight,
-        endingHeight,
-        animateOpacity,
-        transition: !mounted ? { enter: { duration: 0 } } : transition,
-        transitionEnd: {
-            enter: transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.enter,
-            exit: unmountOnExit
-                ? transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.exit
-                : Object.assign(Object.assign({}, transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.exit), { display: hasStartingHeight ? 'block' : 'none' }),
-        },
-    };
-    const show = unmountOnExit ? isOpen : true;
-    const animate = isOpen || unmountOnExit ? 'enter' : 'exit';
-    return (React.createElement(AnimatePresence, { initial: false, custom: custom }, show && (React.createElement(motion.div, Object.assign({ ref: ref }, rest, { className: cx('chakra-collapse', className), style: Object.assign({ overflow: 'hidden', display: 'block' }, style), custom: custom, variants: variants, initial: unmountOnExit ? 'exit' : false, animate: animate, exit: "exit" })))));
-});
-Collapse.displayName = 'Collapse';

package/dist/esm/core/transition/collapse/index.js

@@ -1 +0,0 @@
-export * from './collapse.component';

package/dist/esm/core/transition/fade/fade.argTypes.d.ts

@@ -1,5 +0,0 @@
-export declare const fadeArgTypes: {
-    transition: {};
-    transitionEnd: {};
-    delay: {};
-};

package/dist/esm/core/transition/fade/fade.argTypes.js

@@ -1,5 +0,0 @@
-export const fadeArgTypes = {
-    transition: {},
-    transitionEnd: {},
-    delay: {},
-};

package/dist/esm/core/transition/fade/fade.component.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { HTMLMotionProps } from 'framer-motion';
-import { WithTransitionConfig } from '../transition.utils';
-export interface FadeProps extends WithTransitionConfig<HTMLMotionProps<'div'>> {
-}
-export declare const fadeConfig: HTMLMotionProps<'div'>;
-export declare const Fade: React.ForwardRefExoticComponent<FadeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/core/transition/fade/fade.component.js

@@ -1,47 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { forwardRef } from 'react';
-import { TRANSITION_DEFAULTS, withDelay } from '../transition.utils';
-const variants = {
-    enter: ({ transition, transitionEnd, delay } = {}) => {
-        var _a;
-        return ({
-            opacity: 1,
-            transition: (_a = transition === null || transition === void 0 ? void 0 : transition.enter) !== null && _a !== void 0 ? _a : withDelay.enter(TRANSITION_DEFAULTS.enter, delay),
-            transitionEnd: transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.enter,
-        });
-    },
-    exit: ({ transition, transitionEnd, delay } = {}) => {
-        var _a;
-        return ({
-            opacity: 0,
-            transition: (_a = transition === null || transition === void 0 ? void 0 : transition.exit) !== null && _a !== void 0 ? _a : withDelay.exit(TRANSITION_DEFAULTS.exit, delay),
-            transitionEnd: transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.exit,
-        });
-    },
-};
-export const fadeConfig = {
-    initial: 'exit',
-    animate: 'enter',
-    exit: 'exit',
-    variants: variants,
-};
-export const Fade = forwardRef(function Fade(props, ref) {
-    const { unmountOnExit, in: isOpen, className, transition, transitionEnd, delay } = props, rest = __rest(props, ["unmountOnExit", "in", "className", "transition", "transitionEnd", "delay"]);
-    const animate = isOpen || unmountOnExit ? 'enter' : 'exit';
-    const show = unmountOnExit ? isOpen && unmountOnExit : true;
-    const custom = { transition, transitionEnd, delay };
-    return (React.createElement(AnimatePresence, { custom: custom }, show && React.createElement(motion.div, Object.assign({ ref: ref, className: 'fade', custom: custom }, fadeConfig, { animate: animate }, rest))));
-});
-Fade.displayName = 'Fade';

package/dist/esm/core/transition/fade/index.d.ts

@@ -1 +0,0 @@
-export * from './fade.component';

package/dist/esm/core/transition/fade/index.js

@@ -1 +0,0 @@
-export * from './fade.component';

package/dist/esm/core/transition/index.js

@@ -1,3 +0,0 @@
-export * from './collapse';
-export * from './fade';
-export * from './slide';

package/dist/esm/core/transition/slide/index.js

@@ -1 +0,0 @@
-export * from './slide.component';