@uni-design-system/uni-react 0.0.3

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

@@ -0,0 +1,245 @@
+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

@@ -0,0 +1,100 @@
+"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;
+//# sourceMappingURL=transition.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"transition.utils.js","sourceRoot":"","sources":["../../../../src/core/transition/transition.utils.ts"],"names":[],"mappings":"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"}

package/dist/cjs/layouts/parallax-hero/parallax-hero.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ParallaxHeroProps } from './parallax-hero.model';
+export declare const ParallaxHero: ({ layers, children }: ParallaxHeroProps) => JSX.Element;

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

@@ -0,0 +1,16 @@
+"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;
+//# sourceMappingURL=parallax-hero.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parallax-hero.component.js","sourceRoot":"","sources":["../../../../src/layouts/parallax-hero/parallax-hero.component.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAGnB,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAqB,EAAe,EAAE;IACnF,OAAO,CACL;QACE,uCAAK,EAAE,EAAC,MAAM,IACX,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,uCACE,SAAS,EAAE,KAAK,CAAC,IAAI,GAAG,OAAO,gBACnB,KAAK,CAAC,KAAK,eACb,UAAU,EACpB,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,GAAG,EAAE,GACrC,CACH,CAAC,CACE;QAEN,uCAAK,EAAE,EAAC,aAAa;YACnB,uCAAK,SAAS,EAAC,mBAAmB,GAAG,CACjC;QAEN,2CAAM,QAAQ,CAAO,CACjB,CACP,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,YAAY,gBAqBvB"}

package/dist/cjs/layouts/parallax-hero/parallax-hero.model.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface ImageLayer {
+    name: string;
+    src: string;
+    depth: number;
+}
+export interface ParallaxHeroProps {
+    layers: ImageLayer[];
+    children: ReactNode;
+}

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=parallax-hero.model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parallax-hero.model.js","sourceRoot":"","sources":["../../../../src/layouts/parallax-hero/parallax-hero.model.ts"],"names":[],"mappings":""}

package/dist/cjs/tools/color-picker/color-picker.component.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface ColorPickerProps {
+    imageUrl: string;
+    imageWidth: number;
+    imageHeight: number;
+    sampleSize: number;
+}
+export declare const ColorPicker: ({ imageUrl, imageWidth, imageHeight, sampleSize }: ColorPickerProps) => JSX.Element;

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

@@ -0,0 +1,139 @@
+"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;
+//# sourceMappingURL=color-picker.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.component.js","sourceRoot":"","sources":["../../../../src/tools/color-picker/color-picker.component.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/tools/color-swatch/color-swatch.component.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { RGB, ShadowElevation } from '@uni-design-system/uni-core';
+export type CardType = 'elevated' | 'filled' | 'outlined';
+export interface ColorSwatchProps {
+    rgba: RGB;
+    children?: ReactNode;
+    cardType?: CardType;
+    elevation?: ShadowElevation;
+    width?: string | number;
+    height?: string | number;
+}
+export declare function ColorSwatch({ rgba, children, cardType, elevation, width, height }: ColorSwatchProps): JSX.Element;

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

@@ -0,0 +1,39 @@
+"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;
+//# sourceMappingURL=color-swatch.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.component.js","sourceRoot":"","sources":["../../../../src/tools/color-swatch/color-swatch.component.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAwD;AACxD,0DAA2F;AAC3F,qCAAgE;AAahE,SAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAoB;IAC/G,MAAM,KAAK,GAAG,IAAA,eAAQ,GAAE,CAAC;IAEzB,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAE9C,MAAM,SAAS,iCACb,MAAM;QACN,KAAK,EACL,OAAO,EAAE,cAAc,EACvB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,EAC3C,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,EACpC,YAAY,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,EAAE,IAC1B,IAAA,cAAO,EAAC,IAAI,EAAE,KAAK,CAAC,KACvB,MAAM,EAAE,CAAC,GACV,CAAC;IAEF,IAAI,QAAQ,KAAK,UAAU,EAAE;QAC3B,SAAS,CAAC,SAAS,GAAG,IAAA,gBAAS,EAAC,SAAS,IAAI,SAAS,CAAC,CAAC;KACzD;IAED,MAAM,IAAI,GAAG,IAAA,mBAAQ,EAAC,IAAI,CAAC,CAAC;IAE5B,MAAM,QAAQ,GAAG,IAAA,uBAAY,EAAC;QAC5B,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QAC9B,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QACrC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;KAC3C,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,OAAO,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,GAAG,CAAC;IAEpE,MAAM,WAAW,GAAkB;QACjC,eAAe,EAAE,WAAW;QAC5B,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,cAAc;QACvB,YAAY,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,EAAE;KAC9B,CAAC;IAEF,OAAO,CACL,uCAAK,KAAK,EAAE,SAAS;QACnB,uCAAK,KAAK,EAAE,WAAW,GAAI;QAC3B,8BAAC,WAAI,IAAC,IAAI,EAAC,iBAAiB,IAAE,QAAQ,CAAQ;QAC9C,8BAAC,WAAI,IAAC,IAAI,EAAC,aAAa,IAAE,WAAW,CAAQ;QAC7C,8BAAC,WAAI,IAAC,IAAI,EAAC,aAAa,IAAE,QAAQ,CAAQ,CACtC,CACP,CAAC;AACJ,CAAC;AA7CD,kCA6CC"}

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

@@ -0,0 +1,14 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { ButtonType } from '@uni-design-system/uni-core';
+import { IconName } from '../../core/icon';
+export interface ButtonProps {
+    text?: string;
+    children?: ReactNode;
+    buttonType?: ButtonType;
+    disabled?: boolean;
+    iconName?: IconName;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    useRipple?: boolean;
+    style?: CSSProperties;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;