@onesy/ui-react 1.0.0

package/Path/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Path_1 = require("./Path");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Path_1).default; } });

package/Path/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Path/index.js",
+  "types": "./index.d.ts"
+}

package/PieChart/PieChart.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IChart } from '../Chart/Chart';
+export interface IPieChart extends IChart {
+}
+declare const PieChart: React.FC<IPieChart>;
+export default PieChart;

package/PieChart/PieChart.js

@@ -0,0 +1,276 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const Line_1 = __importDefault(require("../Line"));
+const Type_1 = __importDefault(require("../Type"));
+const Surface_1 = __importDefault(require("../Surface"));
+const Chart_1 = __importDefault(require("../Chart"));
+const Path_1 = __importDefault(require("../Path"));
+const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        '& .onesy-Chart-wrapper': {
+            aspectRatio: '1',
+            maxWidth: '240px',
+            height: 'unset',
+            overflow: 'hidden'
+        }
+    },
+    legend_item: {
+        userSelect: 'none'
+    },
+    legend_icon: {
+        width: '10px',
+        height: '2px'
+    },
+    text: Object.assign(Object.assign({}, theme.typography.values.b3), { textAnchor: 'middle', alignmentBaseline: 'middle', userSelect: 'none' }),
+    append_wrapper: {
+        userSelect: 'none',
+        pointerEvents: 'none'
+    },
+    append: {
+        padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
+        borderRadius: theme.methods.shape.radius.value(1.5, 'px')
+    },
+    append_icon: {
+        width: '8px',
+        height: '8px',
+        borderRadius: theme.methods.shape.radius.value(40, 'px')
+    }
+}), { name: 'onesy-PieChart' });
+const PieChart = react_1.default.forwardRef((props_, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyPieChart) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
+    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
+    const Chart = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Chart) || Chart_1.default; }, [theme]);
+    const Path = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Path) || Path_1.default; }, [theme]);
+    const { tonal = true, color = 'primary', values, animate: animate_, animateTimeout: animateTimeout_, names, gap = 4, innerOffset = 0, tooltipRender: tooltipRender_, PathProps, LegendItemProps, className } = props, other = __rest(props, ["tonal", "color", "values", "animate", "animateTimeout", "names", "gap", "innerOffset", "tooltipRender", "PathProps", "LegendItemProps", "className"]);
+    const { classes } = useStyle();
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        rects: react_1.default.useRef(undefined),
+        pathStyle: react_1.default.useRef(undefined),
+        animate: react_1.default.useRef(undefined),
+        animateTimeout: react_1.default.useRef(undefined),
+        init: react_1.default.useRef(undefined),
+        theme: react_1.default.useRef(undefined)
+    };
+    const keys = react_1.default.useMemo(() => {
+        const result = [];
+        const items = [animate_, animateTimeout_];
+        items.forEach(item => {
+            if ((0, utils_1.is)('object', item))
+                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+        });
+        return (0, utils_1.unique)(result);
+    }, [animate_, animateTimeout_]);
+    const breakpoints = {};
+    keys.forEach(key => {
+        breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
+    });
+    const animate = (0, utils_2.valueBreakpoints)(animate_, true, breakpoints, theme);
+    const animateTimeout = (0, utils_2.valueBreakpoints)(animateTimeout_, 140, breakpoints, theme);
+    const [value, setValue] = react_1.default.useState();
+    const [init, setInit] = react_1.default.useState();
+    refs.theme.current = theme;
+    refs.animate.current = animate;
+    refs.animateTimeout.current = animateTimeout;
+    refs.init.current = init;
+    const LegendItem = react_1.default.useCallback((props__) => {
+        const { item = {}, className: className_ } = props__, other_ = __rest(props__, ["item", "className"]);
+        const { color: color_, tone = 'main', name = 'No name' } = item;
+        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, LegendItemProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('PieChart', theme) && [
+                    'onesy-PieChart-legend-item'
+                ],
+                className_,
+                LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className,
+                classes.legend_item
+            ]) }, other_, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
+                        (0, utils_2.staticClassName)('PieChart', theme) && [
+                            'onesy-PieChart-legend-icon'
+                        ],
+                        classes.legend_icon
+                    ]), style: {
+                        background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
+                    } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: name }))] })));
+    }, [theme]);
+    const make = () => {
+        // Make values into x, y, coordinates
+        // normalized in rect width, height values
+        // invert y so 0, 0 is at bottom left
+        if (refs.rects.current && values) {
+            const { width, height } = refs.rects.current.wrapper;
+            // Legend
+            const legend_ = values.map((item) => {
+                return {
+                    item,
+                    element: ((0, jsx_runtime_1.jsx)(LegendItem, { item: item }))
+                };
+            });
+            const center = width / 2;
+            const radius = (width / 2) - (gap / 2);
+            const total = 360;
+            const valueTotal = values.reduce((result, itemValue) => result += itemValue.values[0], 0);
+            const angles = {
+                start: (0, utils_2.angleToCoordinates)(0, center, center, radius)
+            };
+            let anglePrevious = 0;
+            let anglePreviousInner = 0;
+            let value_ = [];
+            let d = '';
+            // Elements
+            const elements_ = (0, utils_1.copy)(values).map((item, index) => {
+                const { color: color_, tone = 'main' } = item;
+                const partPercentage = (0, utils_1.percentageFromValueWithinRange)(item.values[0], 0, valueTotal);
+                let part = total * (partPercentage / 100);
+                if (partPercentage === 100)
+                    part -= 0.0001;
+                const startInner = (0, utils_2.angleToCoordinates)(anglePreviousInner, center, center, radius * innerOffset);
+                // Move from inner value
+                if (index === 0)
+                    value_.push('M', startInner.x, startInner.y, 
+                    // Move to 0 deg
+                    'L', angles.start.x, angles.start.y);
+                const angleEnd = anglePrevious + part;
+                const angleEndInner = anglePreviousInner + part;
+                const angleText = anglePrevious + (part / 2);
+                const angleTextCoordinates = (0, utils_2.angleToCoordinates)(angleText, center, center, (radius - (radius - (radius * innerOffset)) / 2));
+                angles.end = (0, utils_2.angleToCoordinates)(angleEnd, center, center, radius);
+                angles.endInner = (0, utils_2.angleToCoordinates)(angleEndInner, center, center, radius * innerOffset);
+                angles.move = (0, utils_2.angleToCoordinates)(angleEnd, center, center, radius);
+                angles.moveInner = (0, utils_2.angleToCoordinates)(angleEnd, center, center, radius * innerOffset);
+                // Arc
+                let invert = 0;
+                if (part > 180)
+                    invert = 1;
+                value_.push('A', radius, radius, 0, invert, 1, angles.end.x, angles.end.y);
+                // To donut value or center
+                if (innerOffset) {
+                    const endInner = (0, utils_2.angleToCoordinates)(angleEndInner, center, center, radius * innerOffset);
+                    value_.push('L', endInner.x, endInner.y);
+                    value_.push('A', radius * innerOffset, radius * innerOffset, 0, invert, 0, startInner.x, startInner.y);
+                }
+                value_.push('Z');
+                // path
+                d = value_.join(' ');
+                anglePrevious = angleEnd;
+                anglePreviousInner = angleEndInner;
+                // Move for the next value
+                if (index < values.length - 1) {
+                    value_ = [
+                        'M', angles.moveInner.x, angles.moveInner.y,
+                        'L', angles.move.x, angles.move.y
+                    ];
+                }
+                return {
+                    item,
+                    element: ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(Path, Object.assign({ d: d, fill: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone], stroke: gap > 0 ? refs.theme.current.palette.background.default.primary : 'none', strokeWidth: gap }, PathProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), ((refs.animate.current && refs.init.current !== 'animated') && {
+                                    opacity: 0,
+                                    transform: 'scale(0)'
+                                })), { transformBox: 'fill-box', transformOrigin: 'center' }), refs.pathStyle.current) })), partPercentage >= 7 && ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: angleTextCoordinates.x, y: angleTextCoordinates.y, className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('PieChart', theme) && [
+                                        'onesy-PieChart-text'
+                                    ],
+                                    classes.text
+                                ]), fill: refs.theme.current.methods.palette.color.text(!refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone], true, 'light'), style: Object.assign(Object.assign(Object.assign(Object.assign({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), ((refs.animate.current && refs.init.current !== 'animated') && {
+                                    opacity: 0
+                                })), ((refs.animate.current && refs.init.current === 'animated') && {
+                                    opacity: 1
+                                })), refs.pathStyle.current) }, { children: `${partPercentage.toFixed(1)}%`.replace('.0%', '%') })))] }))
+                };
+            });
+            // Sort
+            elements_.sort((a, b) => { var _a, _b, _c, _d; return ((_b = (_a = a === null || a === void 0 ? void 0 : a.item) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b[0]) - ((_d = (_c = b === null || b === void 0 ? void 0 : b.item) === null || _c === void 0 ? void 0 : _c.values) === null || _d === void 0 ? void 0 : _d[0]); });
+            // Update children value
+            setValue({
+                legend: legend_,
+                elements: elements_
+            });
+        }
+    };
+    const initMethod = react_1.default.useCallback(() => {
+        if (animate) {
+            if (!init) {
+                refs.pathStyle.current = {
+                    transition: theme.methods.transitions.make(['transform', 'opacity'], { timing_function: 'decelerated' })
+                };
+                setInit(true);
+                setTimeout(() => {
+                    refs.pathStyle.current = Object.assign(Object.assign({}, refs.pathStyle.current), { opacity: 1, transform: 'scale(1)' });
+                    setInit('animated');
+                }, refs.animateTimeout.current);
+            }
+        }
+    }, [init, animate]);
+    react_1.default.useEffect(() => {
+        make();
+        initMethod();
+    }, [values, theme, animate, init]);
+    const onUpdateRects = (valueNew) => {
+        refs.rects.current = valueNew;
+        make();
+    };
+    const tooltipRender = (0, utils_1.is)('function', tooltipRender_) ? tooltipRender_ : (values_) => {
+        const { name, color: color_, tone = 'main', values: values__ } = values_;
+        const valueTotal = values.reduce((result, itemValue) => result += itemValue.values[0], 0);
+        const valueValue = values__[0];
+        const valuePercentage = (((valueValue / valueTotal) * 100).toFixed(1)).replace('.0', '');
+        return {
+            element: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ tonal: tonal, color: color, elevation: 1, gap: 0.5, direction: 'column', Component: Surface, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('PieChart', theme) && [
+                        'onesy-PieChart-append'
+                    ],
+                    classes.append
+                ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('PieChart', theme) && [
+                                        'onesy-LineChart-append-icon'
+                                    ],
+                                    classes.append_icon
+                                ]), style: {
+                                    background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
+                                } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: name }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.4, direction: 'column' }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', style: {
+                                            fontWeight: 600
+                                        } }, { children: (names === null || names === void 0 ? void 0 : names.value) || 'Value' })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: valueValue }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', style: {
+                                            fontWeight: 600
+                                        } }, { children: (names === null || names === void 0 ? void 0 : names.percentage) || 'Percentage' })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b3' }, { children: [valuePercentage, "%"] }))] }))] }))] })))
+        };
+    };
+    return ((0, jsx_runtime_1.jsx)(Chart, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, tonal: tonal, color: color, values: values, names: names, elements: value === null || value === void 0 ? void 0 : value.elements, legend: value === null || value === void 0 ? void 0 : value.legend, labels: false, marks: false, borders: false, tooltipRender: tooltipRender, onUpdateRects: onUpdateRects, elementTooltip: true, noMain: true, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('PieChart', theme) && [
+                'onesy-PieChart-root'
+            ],
+            className,
+            classes.root
+        ]) }, other)));
+});
+PieChart.displayName = 'onesy-PieChart';
+exports.default = PieChart;

package/PieChart/index.d.ts

@@ -0,0 +1 @@
+export { default } from './PieChart';

package/PieChart/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var PieChart_1 = require("./PieChart");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(PieChart_1).default; } });

package/PieChart/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/PieChart/index.js",
+  "types": "./index.d.ts"
+}

package/Placeholder/Placeholder.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IBaseElement, IColor } from '../types';
+export interface IPlaceholder extends Omit<IBaseElement, 'version'> {
+    color?: IColor;
+    version?: 'rectangle' | 'rounded' | 'circle';
+    width?: string | number;
+    height?: string | number;
+    animation?: 'wave' | 'pulse' | boolean;
+    text?: boolean;
+}
+declare const Placeholder: React.FC<IPlaceholder>;
+export default Placeholder;

package/Placeholder/Placeholder.js

@@ -0,0 +1,125 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const style_react_1 = require("@onesy/style-react");
+const Surface_1 = __importDefault(require("../Surface"));
+const utils_1 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    '@keyframes move': {
+        '100%': {
+            transform: 'translateX(100%)'
+        }
+    },
+    '@keyframes pulse': {
+        '0%': {
+            opacity: '1'
+        },
+        '50%': {
+            opacity: '0.4'
+        },
+        '100%': {
+            opacity: '1'
+        }
+    },
+    '@keyframes pulseDark': {
+        '0%': {
+            opacity: '1'
+        },
+        '50%': {
+            opacity: '0.7'
+        },
+        '100%': {
+            opacity: '1'
+        }
+    },
+    root: {
+        position: 'relative',
+        userSelect: 'none',
+        overflow: 'hidden'
+    },
+    wrapper: {
+        opacity: theme.palette.light ? '0.07' : '0.14',
+        background: 'currentColor',
+        width: '100%',
+        height: '100%'
+    },
+    animation_wave: {
+        '&::before': {
+            content: "''",
+            position: 'absolute',
+            inset: '0',
+            background: `linear-gradient(90deg, transparent, ${theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, 4)}, transparent)`,
+            transform: 'translateX(-100%)',
+            animation: '$move 2.4s infinite'
+        }
+    },
+    animation_pulse: {
+        animation: `$pulse${theme.palette.light ? '' : 'Dark'} 2.4s 0.4s infinite`
+    },
+    version_circle: {
+        borderRadius: theme.methods.shape.radius.value(40, 'px')
+    },
+    version_rounded: {
+        borderRadius: theme.methods.shape.radius.value(1, 'px')
+    },
+    version_rectangle: {
+        borderRadius: '0px'
+    },
+    text: {
+        height: '1em'
+    },
+    children: {
+        visibility: 'hidden'
+    }
+}), { name: 'onesy-Placeholder' });
+const Placeholder = react_1.default.forwardRef((props_, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyPlaceholder) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
+    const { color = 'default', version = 'rounded', width, height, animation = 'pulse', text, Component = 'div', className, style, children } = props, other = __rest(props, ["color", "version", "width", "height", "animation", "text", "Component", "className", "style", "children"]);
+    const { classes } = useStyle();
+    const styles = {
+        root: {}
+    };
+    if (width !== undefined)
+        styles.root.width = width;
+    if (height !== undefined)
+        styles.root.height = height;
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, style_react_1.classNames)([
+            (0, utils_1.staticClassName)('Placeholder', theme) && [
+                `onesy-Placeholder-root`
+            ],
+            className,
+            classes.root,
+            classes[`version_${version}`],
+            animation && animation && classes[`animation_${animation}`],
+            text && classes.text
+        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: (0, jsx_runtime_1.jsx)(Surface, Object.assign({ version: 'text', tonal: false, color: color, className: (0, style_react_1.classNames)([
+                (0, utils_1.staticClassName)('Placeholder', theme) && [
+                    `onesy-Placeholder-wrapper`
+                ],
+                classes.wrapper
+            ]) }, { children: children && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
+                    (0, utils_1.staticClassName)('Placeholder', theme) && [
+                        `onesy-Placeholder-children`
+                    ],
+                    classes.children
+                ]) }, { children: children }))) })) })));
+});
+Placeholder.displayName = 'onesy-Placeholder';
+exports.default = Placeholder;

package/Placeholder/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Placeholder';

package/Placeholder/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Placeholder_1 = require("./Placeholder");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Placeholder_1).default; } });

package/Placeholder/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Placeholder/index.js",
+  "types": "./index.d.ts"
+}

package/Portal/Portal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IBaseElement } from '../types';
+export interface IPortal extends IBaseElement {
+    element?: Element | DocumentFragment;
+}
+declare const Portal: React.FC<IPortal>;
+export default Portal;

package/Portal/Portal.js

@@ -0,0 +1,41 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const Portal = react_1.default.forwardRef((props_, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyPortal) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const { element, children } = props, other = __rest(props, ["element", "children"]);
+    return (react_dom_1.default.createPortal(react_1.default.cloneElement(children, Object.assign({ ref: (item) => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            if (children.ref) {
+                if ((0, utils_1.is)('function', children.ref))
+                    children.ref(item);
+                else
+                    children.ref.current = item;
+            }
+        } }, other)), element));
+});
+Portal.displayName = 'onesy-Portal';
+exports.default = Portal;

package/Portal/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Portal';

package/Portal/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Portal_1 = require("./Portal");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Portal_1).default; } });

package/Portal/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Portal/index.js",
+  "types": "./index.d.ts"
+}

package/Properties/Properties.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+import { IPropsAny } from '../types';
+export interface IPropertiesValue {
+    name: any;
+    value: any;
+    separator?: any;
+    props?: any;
+}
+export interface IProperties extends ILine {
+    version?: 'row' | 'row-20' | 'row-50' | 'row-between' | 'column';
+    size?: 'small' | 'regular' | 'large';
+    values?: (boolean | IPropertiesValue)[];
+    maxWidth?: 'extra_small' | 'small' | 'regular' | 'large' | 'extra_large' | 'extra_extra_large';
+    PropertyProps?: IPropsAny;
+}
+declare const Properties: React.FC<IProperties>;
+export default Properties;

package/Properties/Properties.js

@@ -0,0 +1,67 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const style_react_1 = require("@onesy/style-react");
+const Line_1 = __importDefault(require("../Line/Line"));
+const Property_1 = __importDefault(require("../Property"));
+const utils_1 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {},
+    maxWidth_extra_small: {
+        maxWidth: '240px'
+    },
+    maxWidth_small: {
+        maxWidth: '340px'
+    },
+    maxWidth_regular: {
+        maxWidth: '440px'
+    },
+    maxWidth_large: {
+        maxWidth: '740px'
+    },
+    maxWidth_extra_large: {
+        maxWidth: '1024px'
+    },
+    maxWidth_extra_extra_large: {
+        maxWidth: '1440px'
+    }
+}), { name: 'onesy-Properties' });
+const Properties = react_1.default.forwardRef((props_, ref) => {
+    var _a;
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyProperties) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const Property = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Property) || Property_1.default; }, [theme]);
+    const { version = 'row-20', size = 'regular', values = [], onlyWithValues = true, maxWidth, PropertyProps, className, children } = props, other = __rest(props, ["version", "size", "values", "onlyWithValues", "maxWidth", "PropertyProps", "className", "children"]);
+    const { classes } = useStyle();
+    if (!(values === null || values === void 0 ? void 0 : values.length) ||
+        onlyWithValues && !values.every((item) => item.value !== undefined))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: ref, gap: size === 'large' ? 1.5 : size === 'regular' ? 1 : 0.5, rowGap: size === 'large' ? 1.5 : size === 'regular' ? 1 : 0.5, fullWidth: true, className: (0, style_react_1.classNames)([
+            (0, utils_1.staticClassName)('Properties', theme) && [
+                'onesy-Properties-root',
+                `onesy-Properties-version-${version}`,
+                `onesy-Properties-size-${size}`
+            ],
+            className,
+            classes.root,
+            maxWidth && classes[`maxWidth_${maxWidth}`]
+        ]) }, other, { children: (_a = values === null || values === void 0 ? void 0 : values.filter(Boolean)) === null || _a === void 0 ? void 0 : _a.map((item, index) => ((0, jsx_runtime_1.jsx)(Property, Object.assign({ version: version, size: size, name: item.name, value: item.value, separator: item.separator }, PropertyProps, item.props), index))) })));
+});
+Properties.displayName = 'onesy-Properties';
+exports.default = Properties;

package/Properties/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Properties';