@uni-design-system/uni-react 0.0.19 → 2.0.0

package/dist/cjs/core/transition/transition.utils.d.ts

@@ -1,245 +0,0 @@
-import type { Target, TargetAndTransition, Transition } from 'framer-motion';
-export type TransitionProperties = {
-    /**
-     * Custom `transition` definition for `enter` and `exit`
-     */
-    transition?: TransitionConfig;
-    /**
-     * Custom `transitionEnd` definition for `enter` and `exit`
-     */
-    transitionEnd?: TransitionEndConfig;
-    /**
-     * Custom `delay` definition for `enter` and `exit`
-     */
-    delay?: number | DelayConfig;
-};
-type TargetResolver<P = {}> = (props: P & TransitionProperties) => TargetAndTransition;
-type Variant<P = {}> = TargetAndTransition | TargetResolver<P>;
-export type Variants<P = {}> = {
-    enter: Variant<P>;
-    exit: Variant<P>;
-    initial?: Variant<P>;
-};
-type WithMotionState<P> = Partial<Record<'enter' | 'exit', P>>;
-export type TransitionConfig = WithMotionState<Transition>;
-export type TransitionEndConfig = WithMotionState<Target>;
-export type DelayConfig = WithMotionState<number>;
-export declare const TRANSITION_EASINGS: {
-    readonly ease: readonly [0.25, 0.1, 0.25, 1];
-    readonly easeIn: readonly [0.4, 0, 1, 1];
-    readonly easeOut: readonly [0, 0, 0.2, 1];
-    readonly easeInOut: readonly [0.4, 0, 0.2, 1];
-};
-export declare const TRANSITION_VARIANTS: {
-    scale: {
-        enter: {
-            scale: number;
-        };
-        exit: {
-            scale: number;
-        };
-    };
-    fade: {
-        enter: {
-            opacity: number;
-        };
-        exit: {
-            opacity: number;
-        };
-    };
-    pushLeft: {
-        enter: {
-            x: string;
-        };
-        exit: {
-            x: string;
-        };
-    };
-    pushRight: {
-        enter: {
-            x: string;
-        };
-        exit: {
-            x: string;
-        };
-    };
-    pushUp: {
-        enter: {
-            y: string;
-        };
-        exit: {
-            y: string;
-        };
-    };
-    pushDown: {
-        enter: {
-            y: string;
-        };
-        exit: {
-            y: string;
-        };
-    };
-    slideLeft: {
-        position: {
-            left: number;
-            top: number;
-            bottom: number;
-            width: string;
-        };
-        enter: {
-            x: number;
-            y: number;
-        };
-        exit: {
-            x: string;
-            y: number;
-        };
-    };
-    slideRight: {
-        position: {
-            right: number;
-            top: number;
-            bottom: number;
-            width: string;
-        };
-        enter: {
-            x: number;
-            y: number;
-        };
-        exit: {
-            x: string;
-            y: number;
-        };
-    };
-    slideUp: {
-        position: {
-            top: number;
-            left: number;
-            right: number;
-            maxWidth: string;
-        };
-        enter: {
-            x: number;
-            y: number;
-        };
-        exit: {
-            x: number;
-            y: string;
-        };
-    };
-    slideDown: {
-        position: {
-            bottom: number;
-            left: number;
-            right: number;
-            maxWidth: string;
-        };
-        enter: {
-            x: number;
-            y: number;
-        };
-        exit: {
-            x: number;
-            y: string;
-        };
-    };
-};
-export type SlideDirection = 'top' | 'left' | 'bottom' | 'right';
-export declare function getSlideTransition(options?: {
-    direction?: SlideDirection;
-}): {
-    position: {
-        left: number;
-        top: number;
-        bottom: number;
-        width: string;
-    };
-    enter: {
-        x: number;
-        y: number;
-    };
-    exit: {
-        x: string;
-        y: number;
-    };
-} | {
-    position: {
-        right: number;
-        top: number;
-        bottom: number;
-        width: string;
-    };
-    enter: {
-        x: number;
-        y: number;
-    };
-    exit: {
-        x: string;
-        y: number;
-    };
-} | {
-    position: {
-        top: number;
-        left: number;
-        right: number;
-        maxWidth: string;
-    };
-    enter: {
-        x: number;
-        y: number;
-    };
-    exit: {
-        x: number;
-        y: string;
-    };
-} | {
-    position: {
-        bottom: number;
-        left: number;
-        right: number;
-        maxWidth: string;
-    };
-    enter: {
-        x: number;
-        y: number;
-    };
-    exit: {
-        x: number;
-        y: string;
-    };
-};
-export declare const TRANSITION_DEFAULTS: {
-    readonly enter: {
-        readonly duration: 0.2;
-        readonly ease: readonly [0, 0, 0.2, 1];
-    };
-    readonly exit: {
-        readonly duration: 0.1;
-        readonly ease: readonly [0.4, 0, 1, 1];
-    };
-};
-export type WithTransitionConfig<P extends object> = Omit<P, 'transition'> & TransitionProperties & {
-    /**
-     * If `true`, the element will unmount when `in={false}` and animation is done
-     */
-    unmountOnExit?: boolean;
-    /**
-     * Show the component; triggers when enter or exit states
-     */
-    in?: boolean;
-};
-export declare const withDelay: {
-    enter: (transition: Transition, delay?: number | DelayConfig) => Transition & {
-        delay: number | undefined;
-    };
-    exit: (transition: Transition, delay?: number | DelayConfig) => Transition & {
-        delay: number | undefined;
-    };
-};
-export declare const cx: (...classNames: any[]) => string;
-type MessageOptions = {
-    condition: boolean;
-    message: string;
-};
-export declare const warn: (options: MessageOptions) => void;
-export {};

package/dist/cjs/core/transition/transition.utils.js

@@ -1,99 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.warn = exports.cx = exports.withDelay = exports.TRANSITION_DEFAULTS = exports.getSlideTransition = exports.TRANSITION_VARIANTS = exports.TRANSITION_EASINGS = void 0;
-exports.TRANSITION_EASINGS = {
-    ease: [0.25, 0.1, 0.25, 1],
-    easeIn: [0.4, 0, 1, 1],
-    easeOut: [0, 0, 0.2, 1],
-    easeInOut: [0.4, 0, 0.2, 1],
-};
-exports.TRANSITION_VARIANTS = {
-    scale: {
-        enter: { scale: 1 },
-        exit: { scale: 0.95 },
-    },
-    fade: {
-        enter: { opacity: 1 },
-        exit: { opacity: 0 },
-    },
-    pushLeft: {
-        enter: { x: '100%' },
-        exit: { x: '-30%' },
-    },
-    pushRight: {
-        enter: { x: '-100%' },
-        exit: { x: '30%' },
-    },
-    pushUp: {
-        enter: { y: '100%' },
-        exit: { y: '-30%' },
-    },
-    pushDown: {
-        enter: { y: '-100%' },
-        exit: { y: '30%' },
-    },
-    slideLeft: {
-        position: { left: 0, top: 0, bottom: 0, width: '100%' },
-        enter: { x: 0, y: 0 },
-        exit: { x: '-100%', y: 0 },
-    },
-    slideRight: {
-        position: { right: 0, top: 0, bottom: 0, width: '100%' },
-        enter: { x: 0, y: 0 },
-        exit: { x: '100%', y: 0 },
-    },
-    slideUp: {
-        position: { top: 0, left: 0, right: 0, maxWidth: '100vw' },
-        enter: { x: 0, y: 0 },
-        exit: { x: 0, y: '-100%' },
-    },
-    slideDown: {
-        position: { bottom: 0, left: 0, right: 0, maxWidth: '100vw' },
-        enter: { x: 0, y: 0 },
-        exit: { x: 0, y: '100%' },
-    },
-};
-function getSlideTransition(options) {
-    var _a;
-    const side = (_a = options === null || options === void 0 ? void 0 : options.direction) !== null && _a !== void 0 ? _a : 'right';
-    switch (side) {
-        case 'right':
-            return exports.TRANSITION_VARIANTS.slideRight;
-        case 'left':
-            return exports.TRANSITION_VARIANTS.slideLeft;
-        case 'bottom':
-            return exports.TRANSITION_VARIANTS.slideDown;
-        case 'top':
-            return exports.TRANSITION_VARIANTS.slideUp;
-        default:
-            return exports.TRANSITION_VARIANTS.slideRight;
-    }
-}
-exports.getSlideTransition = getSlideTransition;
-exports.TRANSITION_DEFAULTS = {
-    enter: {
-        duration: 0.2,
-        ease: exports.TRANSITION_EASINGS.easeOut,
-    },
-    exit: {
-        duration: 0.1,
-        ease: exports.TRANSITION_EASINGS.easeIn,
-    },
-};
-exports.withDelay = {
-    enter: (transition, delay) => (Object.assign(Object.assign({}, transition), { delay: typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay['enter'] })),
-    exit: (transition, delay) => (Object.assign(Object.assign({}, transition), { delay: typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay['exit'] })),
-};
-// chakra-ui/packages/utilities/shared-utils
-const cx = (...classNames) => classNames.filter(Boolean).join(' ');
-exports.cx = cx;
-function isDev() {
-    return process.env.NODE_ENV !== 'production';
-}
-const warn = (options) => {
-    const { condition, message } = options;
-    if (condition && isDev()) {
-        console.warn(message);
-    }
-};
-exports.warn = warn;

package/dist/cjs/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./core"), exports);
-__exportStar(require("./components"), exports);
-__exportStar(require("./utils"), exports);

package/dist/cjs/layouts/parallax-hero/parallax-hero.component.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ParallaxHero = void 0;
-const react_1 = __importDefault(require("react"));
-const ParallaxHero = ({ layers, children }) => {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("div", { id: "hero" }, layers.map((layer) => (react_1.default.createElement("div", { className: layer.name + 'layer', "data-depth": layer.depth, "data-type": "parallax", style: { backgroundImage: layer.src } })))),
-        react_1.default.createElement("div", { id: "static-hero" },
-            react_1.default.createElement("div", { className: "static-hero-image" })),
-        react_1.default.createElement("div", null, children)));
-};
-exports.ParallaxHero = ParallaxHero;

package/dist/cjs/layouts/parallax-hero/parallax-hero.model.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/tools/color-picker/color-picker.component.js

@@ -1,138 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = void 0;
-const react_1 = __importStar(require("react"));
-const color_swatch_component_1 = require("../color-swatch/color-swatch.component");
-const ColorPicker = ({ imageUrl, imageWidth, imageHeight, sampleSize = 41 }) => {
-    const canvasRef = (0, react_1.useRef)(null);
-    const [pixelColor, setPixelColor] = (0, react_1.useState)({ red: 0, green: 0, blue: 0, alpha: 1 });
-    const [averageColor, setAverageColor] = (0, react_1.useState)({ red: 0, green: 0, blue: 0, alpha: 1 });
-    let canvas;
-    let ctx;
-    let img;
-    (0, react_1.useEffect)(() => {
-        canvas = canvasRef.current;
-        if (canvas) {
-            ctx = canvas.getContext('2d');
-            canvas.width = imageWidth;
-            canvas.style.width = `${imageWidth}px`;
-            canvas.height = imageHeight;
-            canvas.style.height = `${imageHeight}px`;
-        }
-        img = document.createElement('img');
-        img.crossOrigin = 'Anonymous';
-        img.src = imageUrl;
-        //once the image is loaded, add it to the canvas
-        img.onload = (ev) => {
-            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0);
-            //call the context.getImageData method to get the array of [r,g,b,a] values
-            let imgDataObj = ctx === null || ctx === void 0 ? void 0 : ctx.getImageData(0, 0, (canvas === null || canvas === void 0 ? void 0 : canvas.width) || 0, (canvas === null || canvas === void 0 ? void 0 : canvas.height) || 0);
-            const data = imgDataObj === null || imgDataObj === void 0 ? void 0 : imgDataObj.data; //data prop is an array
-            if (!!data && !!canvas) {
-                canvas === null || canvas === void 0 ? void 0 : canvas.addEventListener('mousemove', (ev) => {
-                    getPixel(data, ev);
-                });
-            }
-            // canvas?.addEventListener('click', addBox);
-        };
-    }, []);
-    const getPixel = (data, ev) => {
-        if (!canvas)
-            return;
-        //as the mouse moves around the image
-        // let canvas = ev.target;
-        let cols = canvas.width;
-        // let rows = canvas.height;
-        let { offsetX, offsetY } = ev;
-        //call the method to get the r,g,b,a values for current pixel
-        let c = getPixelColor(data, cols, offsetY, offsetX);
-        //save the string to use elsewhere
-        // pixel = clr;
-        setPixelColor(c);
-        //now get the average of the surrounding pixel colours
-        setAverageColor(getAverage(data, ev));
-    };
-    const getAverage = (data, ev) => {
-        if (!ctx)
-            return { red: 0, green: 0, blue: 0, alpha: 1 };
-        //create a 41px by 41px average colour square
-        //replace everything in the canvas with the original image
-        // let canvas = ev.target;
-        let cols = (canvas === null || canvas === void 0 ? void 0 : canvas.width) || 0;
-        let rows = (canvas === null || canvas === void 0 ? void 0 : canvas.height) || 0;
-        //remove the current contents of the canvas to draw the image and box again
-        ctx.clearRect(0, 0, cols, rows);
-        //add the image from memory
-        ctx.drawImage(img, 0, 0);
-        let { offsetX, offsetY } = ev;
-        const inset = Math.round(sampleSize / 2);
-        //inset by 20px as our workable range
-        offsetX = Math.min(offsetX, cols - inset);
-        offsetX = Math.max(inset, offsetX);
-        offsetY = Math.min(offsetY, rows - inset);
-        offsetY = Math.max(offsetY, inset);
-        //create a 41 x 41 pixel square for the average
-        let reds = 0; //total for all the red values in the 41x41 square
-        let greens = 0;
-        let blues = 0;
-        //for anything in the range (x-20, y-20) to (x+20, y+20)
-        for (let x = -1 * inset; x <= inset; x++) {
-            for (let y = -1 * inset; y <= inset; y++) {
-                let c = getPixelColor(data, cols, offsetY + y, offsetX + x);
-                reds += c.red;
-                greens += c.green;
-                blues += c.blue;
-            }
-        }
-        let nums = inset * inset * 4; //total number of pixels in the box
-        let red = Math.round(reds / nums);
-        let green = Math.round(greens / nums);
-        let blue = Math.round(blues / nums);
-        //now draw an overlaying square of that colour
-        //make the square twice as big as the sample area
-        ctx.fillStyle = `rgb(${red}, ${green}, ${blue})`;
-        ctx.strokeStyle = 'solid 2px #FFFFFF';
-        ctx.strokeRect(offsetX - inset, offsetY - inset, inset * 2, inset * 2);
-        ctx.fillRect(offsetX - inset, offsetY - inset, inset * 2, inset * 2);
-        return { red, green, blue, alpha: 1 };
-    };
-    const getPixelColor = (data, cols, x, y) => {
-        let pixel = cols * x + y;
-        let arrayPos = pixel * 4;
-        return {
-            red: data[arrayPos],
-            green: data[arrayPos + 1],
-            blue: data[arrayPos + 2],
-            alpha: data[arrayPos + 3],
-        };
-    };
-    return (react_1.default.createElement("div", { style: { padding: 16 } },
-        react_1.default.createElement("div", { style: { marginBottom: 16 } },
-            react_1.default.createElement("canvas", { ref: canvasRef })),
-        react_1.default.createElement(color_swatch_component_1.ColorSwatch, { rgba: pixelColor }, "Pixel Color"),
-        react_1.default.createElement(color_swatch_component_1.ColorSwatch, { rgba: averageColor }, "Average Color")));
-};
-exports.ColorPicker = ColorPicker;

package/dist/cjs/tools/color-swatch/color-swatch.component.js

@@ -1,38 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorSwatch = void 0;
-const react_1 = __importDefault(require("react"));
-const uni_core_1 = require("@uni-design-system/uni-core");
-const core_1 = require("../../core");
-function ColorSwatch({ rgba, children, cardType = 'elevated', elevation, width, height }) {
-    const theme = (0, core_1.useTheme)();
-    const { borderRadii } = theme.containers.card;
-    const cardStyle = Object.assign(Object.assign({ height,
-        width, display: 'inline-block', backgroundColor: theme.colors['background'], color: theme.colors['on-background'], borderRadius: borderRadii === null || borderRadii === void 0 ? void 0 : borderRadii.sm }, (0, core_1.Padding)('xs', 'all')), { margin: 8 });
-    if (cardType === 'elevated') {
-        cardStyle.boxShadow = (0, core_1.BoxShadow)(elevation || 'pressed');
-    }
-    const hsla = (0, uni_core_1.RGBToHSL)(rgba);
-    const HSLColor = (0, uni_core_1.HSLAToString)({
-        hue: Math.round(hsla.hue || 0),
-        saturation: Math.round(hsla.hue || 0),
-        lightness: Math.round(hsla.lightness || 0),
-    });
-    const swatchColor = `rgb(${rgba.red}, ${rgba.green}, ${rgba.blue})`;
-    const swatchStyle = {
-        backgroundColor: swatchColor,
-        height: 200,
-        width: 200,
-        display: 'inline-block',
-        borderRadius: borderRadii === null || borderRadii === void 0 ? void 0 : borderRadii.xs,
-    };
-    return (react_1.default.createElement("div", { style: cardStyle },
-        react_1.default.createElement("div", { style: swatchStyle }),
-        react_1.default.createElement(core_1.Text, { role: "headline-medium" }, children),
-        react_1.default.createElement(core_1.Text, { role: "title-small" }, swatchColor),
-        react_1.default.createElement(core_1.Text, { role: "title-small" }, HSLColor)));
-}
-exports.ColorSwatch = ColorSwatch;

package/dist/cjs/utils/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./storage-manager"), exports);

package/dist/cjs/utils/storage-manager.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCookieStorageManager = exports.createLocalStorageManager = void 0;
-// Usage
-// export const localStorageManager = createLocalStorageManager(STORAGE_KEY);
-const createLocalStorageManager = (key) => ({
-    type: 'localStorage',
-    get(init) {
-        if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document))
-            return init;
-        let value;
-        try {
-            value = localStorage.getItem(key) || init;
-        }
-        catch (e) {
-            // no op
-        }
-        return JSON.parse(value) || init;
-    },
-    set(value) {
-        try {
-            localStorage.setItem(key, JSON.stringify(value));
-        }
-        catch (e) {
-            // no op
-        }
-    },
-});
-exports.createLocalStorageManager = createLocalStorageManager;
-const parseCookie = (cookie, key) => {
-    const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
-    return match === null || match === void 0 ? void 0 : match[2];
-};
-// Usage
-// export const cookieStorageManager = createCookieStorageManager(STORAGE_KEY);
-const createCookieStorageManager = (key, cookie) => ({
-    type: 'cookie',
-    get(init) {
-        if (cookie)
-            return parseCookie(cookie, key);
-        if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document))
-            return init;
-        return parseCookie(document.cookie, key) || init;
-    },
-    set(value) {
-        document.cookie = `${key}=${value}; max-age=31536000; path=/`;
-    },
-});
-exports.createCookieStorageManager = createCookieStorageManager;

package/dist/esm/components/button/button.component.d.ts

@@ -1,16 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { ButtonType, ContentColorToken } from '@uni-design-system/uni-core';
-import { IconName } from '../../core/icon';
-export interface ButtonProps {
-    text?: string;
-    children?: ReactNode;
-    buttonType?: ButtonType;
-    active?: boolean;
-    disabled?: boolean;
-    iconName?: IconName;
-    contentColor?: ContentColorToken;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    disableRipple?: boolean;
-    style?: CSSProperties;
-}
-export declare const Button: ({ text, children, buttonType, disabled, iconName, contentColor: overrideContentColor, onClick, disableRipple, style: userStyle, ...rest }: ButtonProps) => JSX.Element;