@uni-design-system/uni-react 0.0.3

package/dist/esm/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/esm/core/transition/transition.utils.js

@@ -0,0 +1,94 @@
+export const 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],
+};
+export const 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%' },
+    },
+};
+export 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 TRANSITION_VARIANTS.slideRight;
+        case 'left':
+            return TRANSITION_VARIANTS.slideLeft;
+        case 'bottom':
+            return TRANSITION_VARIANTS.slideDown;
+        case 'top':
+            return TRANSITION_VARIANTS.slideUp;
+        default:
+            return TRANSITION_VARIANTS.slideRight;
+    }
+}
+export const TRANSITION_DEFAULTS = {
+    enter: {
+        duration: 0.2,
+        ease: TRANSITION_EASINGS.easeOut,
+    },
+    exit: {
+        duration: 0.1,
+        ease: TRANSITION_EASINGS.easeIn,
+    },
+};
+export const 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
+export const cx = (...classNames) => classNames.filter(Boolean).join(' ');
+function isDev() {
+    return process.env.NODE_ENV !== 'production';
+}
+export const warn = (options) => {
+    const { condition, message } = options;
+    if (condition && isDev()) {
+        console.warn(message);
+    }
+};
+//# sourceMappingURL=transition.utils.js.map

package/dist/esm/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/esm/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/esm/layouts/parallax-hero/parallax-hero.component.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const ParallaxHero = ({ layers, children }) => {
+    return (React.createElement("div", null,
+        React.createElement("div", { id: "hero" }, layers.map((layer) => (React.createElement("div", { className: layer.name + 'layer', "data-depth": layer.depth, "data-type": "parallax", style: { backgroundImage: layer.src } })))),
+        React.createElement("div", { id: "static-hero" },
+            React.createElement("div", { className: "static-hero-image" })),
+        React.createElement("div", null, children)));
+};
+//# sourceMappingURL=parallax-hero.component.js.map

package/dist/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAqB,EAAe,EAAE;IACnF,OAAO,CACL;QACE,6BAAK,EAAE,EAAC,MAAM,IACX,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,6BACE,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,6BAAK,EAAE,EAAC,aAAa;YACnB,6BAAK,SAAS,EAAC,mBAAmB,GAAG,CACjC;QAEN,iCAAM,QAAQ,CAAO,CACjB,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/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/esm/layouts/parallax-hero/parallax-hero.model.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=parallax-hero.model.js.map

package/dist/esm/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/esm/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/esm/tools/color-picker/color-picker.component.js

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ColorSwatch } from '../color-swatch/color-swatch.component';
+export const ColorPicker = ({ imageUrl, imageWidth, imageHeight, sampleSize = 41 }) => {
+    const canvasRef = useRef(null);
+    const [pixelColor, setPixelColor] = useState({ red: 0, green: 0, blue: 0, alpha: 1 });
+    const [averageColor, setAverageColor] = useState({ red: 0, green: 0, blue: 0, alpha: 1 });
+    let canvas;
+    let ctx;
+    let img;
+    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.createElement("div", { style: { padding: 16 } },
+        React.createElement("div", { style: { marginBottom: 16 } },
+            React.createElement("canvas", { ref: canvasRef })),
+        React.createElement(ColorSwatch, { rgba: pixelColor }, "Pixel Color"),
+        React.createElement(ColorSwatch, { rgba: averageColor }, "Average Color")));
+};
+//# sourceMappingURL=color-picker.component.js.map

package/dist/esm/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/esm/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/esm/tools/color-swatch/color-swatch.component.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { HSLAToString, RGBToHSL } from '@uni-design-system/uni-core';
+import { BoxShadow, Padding, Text, useTheme } from '../../core';
+export function ColorSwatch({ rgba, children, cardType = 'elevated', elevation, width, height }) {
+    const theme = 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 }, Padding('xs', 'all')), { margin: 8 });
+    if (cardType === 'elevated') {
+        cardStyle.boxShadow = BoxShadow(elevation || 'pressed');
+    }
+    const hsla = RGBToHSL(rgba);
+    const HSLColor = 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.createElement("div", { style: cardStyle },
+        React.createElement("div", { style: swatchStyle }),
+        React.createElement(Text, { role: "headline-medium" }, children),
+        React.createElement(Text, { role: "title-small" }, swatchColor),
+        React.createElement(Text, { role: "title-small" }, HSLColor)));
+}
+//# sourceMappingURL=color-swatch.component.js.map

package/dist/esm/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,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,YAAY,EAAO,QAAQ,EAAmB,MAAM,6BAA6B,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAahE,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAoB;IAC/G,MAAM,KAAK,GAAG,QAAQ,EAAE,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,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,KACvB,MAAM,EAAE,CAAC,GACV,CAAC;IAEF,IAAI,QAAQ,KAAK,UAAU,EAAE;QAC3B,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC;KACzD;IAED,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE5B,MAAM,QAAQ,GAAG,YAAY,CAAC;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,6BAAK,KAAK,EAAE,SAAS;QACnB,6BAAK,KAAK,EAAE,WAAW,GAAI;QAC3B,oBAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,IAAE,QAAQ,CAAQ;QAC9C,oBAAC,IAAI,IAAC,IAAI,EAAC,aAAa,IAAE,WAAW,CAAQ;QAC7C,oBAAC,IAAI,IAAC,IAAI,EAAC,aAAa,IAAE,QAAQ,CAAQ,CACtC,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@uni-design-system/uni-react",
+  "version": "0.0.3",
+  "description": "React component library for the UNI Design System.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist/ && yarn build:esm && yarn build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "rm -rf docs/ && build-storybook -o docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uni-design-system/uni-react.git"
+  },
+  "author": "George English",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/uni-design-system/uni-react/issues"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "ux",
+    "design system"
+  ],
+  "homepage": "https://github.com/uni-design-system/uni-react#readme",
+  "packageManager": "yarn@3.0.2",
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.7",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@uni-design-system/uni-core": "^0.0.33",
+    "@uni-design-system/uni-react-icons": "^0.1.1",
+    "framer-motion": "4.1.17"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@react-theming/storybook-addon": "^1.1.6",
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-docs": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-interactions": "^6.5.6",
+    "@storybook/addon-links": "^6.5.6",
+    "@storybook/addons": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@storybook/testing-library": "^0.0.11",
+    "@storybook/theming": "^6.5.6",
+    "@types/node": "^18.14.6",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.13",
+    "babel-loader": "^8.2.3",
+    "prettier": "2.7.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "typescript": "^4.6.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}