@onesy/ui-react 1.0.0

package/LinearProgress/LinearProgress.js

@@ -0,0 +1,274 @@
+"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 utils_2 = require("../utils");
+const other_ = {
+    position: 'absolute',
+    inset: '0',
+    height: '100%',
+    transformOrigin: 'inherit'
+};
+// @keyframes's for line, line1, inner and inner1 source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_keyframes.scss
+const useStyle = (0, style_react_1.style)(theme => ({
+    '@keyframes line': {
+        '0%': {
+            transform: 'translateX(0)'
+        },
+        '20%': {
+            'animation-timing-function': 'cubic-bezier(0.5, 0, 0.701732, 0.495819)',
+            transform: 'translateX(0)',
+        },
+        '59.15%': {
+            'animation-timing-function': 'cubic-bezier(0.302435, 0.381352, 0.55, 0.956352)',
+            transform: `translateX(83.67142%)`,
+        },
+        '100%': {
+            transform: `translateX(200.611057%)`
+        }
+    },
+    '@keyframes line_reverse': {
+        '0%': {
+            transform: 'translateX(0)'
+        },
+        '20%': {
+            'animation-timing-function': 'cubic-bezier(0.5, 0, 0.701732, 0.495819)',
+            transform: 'translateX(0)',
+        },
+        '59.15%': {
+            'animation-timing-function': 'cubic-bezier(0.302435, 0.381352, 0.55, 0.956352)',
+            transform: `translateX(-83.67142%)`,
+        },
+        '100%': {
+            transform: `translateX(-200.611057%)`
+        }
+    },
+    '@keyframes inner': {
+        '0%': {
+            transform: 'scaleX(0.08)'
+        },
+        '36.65%': {
+            'animation-timing-function': 'cubic-bezier(0.334731, 0.12482, 0.785844, 1)',
+            transform: 'scaleX(0.08)'
+        },
+        '69.15%': {
+            'animation-timing-function': 'cubic-bezier(0.06, 0.11, 0.6, 1)',
+            transform: 'scaleX(0.661479)',
+        },
+        '100%': {
+            transform: 'scaleX(0.08)',
+        }
+    },
+    '@keyframes line1': {
+        '0%': {
+            'animation-timing-function': 'cubic-bezier(0.15, 0, 0.515058, 0.409685)',
+            transform: 'translateX(0)'
+        },
+        '25%': {
+            'animation-timing-function': 'cubic-bezier(0.31033, 0.284058, 0.8, 0.733712)',
+            transform: `translateX(37.651913%)`
+        },
+        '48.35%': {
+            'animation-timing-function': 'cubic-bezier(0.4, 0.627035, 0.6, 0.902026)',
+            transform: `translateX(84.386165%)`
+        },
+        '100%': {
+            transform: `translateX(160.277782%)`
+        }
+    },
+    '@keyframes line1_reverse': {
+        '0%': {
+            'animation-timing-function': 'cubic-bezier(0.15, 0, 0.515058, 0.409685)',
+            transform: 'translateX(0)'
+        },
+        '25%': {
+            'animation-timing-function': 'cubic-bezier(0.31033, 0.284058, 0.8, 0.733712)',
+            transform: `translateX(-37.651913%)`
+        },
+        '48.35%': {
+            'animation-timing-function': 'cubic-bezier(0.4, 0.627035, 0.6, 0.902026)',
+            transform: `translateX(-84.386165%)`
+        },
+        '100%': {
+            transform: `translateX(-160.277782%)`
+        }
+    },
+    '@keyframes inner1': {
+        '0%': {
+            'animation-timing-function': 'cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971)',
+            transform: 'scaleX(0.08)'
+        },
+        '19.15%': {
+            'animation-timing-function': 'cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315)',
+            transform: 'scaleX(0.457104)'
+        },
+        '44.15%': {
+            'animation-timing-function': 'cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179)',
+            transform: 'scaleX(0.72796)'
+        },
+        '100%': {
+            transform: 'scaleX(0.08)'
+        }
+    },
+    '@keyframes bufferDots': {
+        '100%': {
+            backgroundPosition: '-10px 0'
+        }
+    },
+    '@keyframes bufferDotsInverted': {
+        '100%': {
+            backgroundPosition: '10px 0'
+        }
+    },
+    root: {
+        width: '100%',
+        height: '4px',
+        position: 'relative',
+        overflow: 'hidden',
+        transformOrigin: '0 0'
+    },
+    // Reverse
+    reverse: {
+        transformOrigin: '100% 0'
+    },
+    // Color
+    color_default: { color: theme.palette.text.default.primary },
+    color_neutral: { color: theme.palette.color.neutral.main },
+    color_primary: { color: theme.palette.color.primary.main },
+    color_secondary: { color: theme.palette.color.secondary.main },
+    color_tertiary: { color: theme.palette.color.tertiary.main },
+    color_quaternary: { color: theme.palette.color.quaternary.main },
+    color_info: { color: theme.palette.color.info.main },
+    color_success: { color: theme.palette.color.success.main },
+    color_warning: { color: theme.palette.color.warning.main },
+    color_error: { color: theme.palette.color.error.main },
+    tonal_color_neutral: { color: theme.methods.palette.color.value('neutral', 50) },
+    tonal_color_primary: { color: theme.methods.palette.color.value('primary', 50) },
+    tonal_color_secondary: { color: theme.methods.palette.color.value('secondary', 50) },
+    tonal_color_tertiary: { color: theme.methods.palette.color.value('tertiary', 50) },
+    tonal_color_quaternary: { color: theme.methods.palette.color.value('quaternary', 50) },
+    tonal_color_info: { color: theme.methods.palette.color.value('info', 50) },
+    tonal_color_success: { color: theme.methods.palette.color.value('success', 50) },
+    tonal_color_warning: { color: theme.methods.palette.color.value('warning', 50) },
+    tonal_color_error: { color: theme.methods.palette.color.value('error', 50) },
+    line: Object.assign(Object.assign({}, other_), { transition: theme.methods.transitions.make('transform'), background: 'currentColor' }),
+    lineIndeterminate: Object.assign(Object.assign({}, other_), { width: '100%', left: '-145.166611%', transformOrigin: 'initial', animation: '$line 2s infinite linear' }),
+    lineIndeterminate_reverse: Object.assign(Object.assign({}, other_), { width: '100%', right: '-145.166611%', transformOrigin: 'initial', animation: '$line_reverse 2s infinite linear' }),
+    inner: Object.assign(Object.assign({}, other_), { width: '100%', background: 'currentColor', animation: '$inner 2s infinite linear' }),
+    lineIndeterminate1: Object.assign(Object.assign({}, other_), { width: '100%', left: '-54.888891%', transformOrigin: 'initial', animation: '$line1 2s infinite linear' }),
+    lineIndeterminate1_reverse: Object.assign(Object.assign({}, other_), { width: '100%', right: '-54.888891%', transformOrigin: 'initial', animation: '$line1_reverse 2s infinite linear' }),
+    inner1: Object.assign(Object.assign({}, other_), { width: '100%', background: 'currentColor', animation: '$inner1 2s infinite linear' }),
+    buffer: Object.assign(Object.assign({}, other_), { background: 'currentColor', opacity: '0.24', transition: theme.methods.transitions.make('transform') }),
+    bufferDots: Object.assign(Object.assign({}, other_), { backgroundImage: `radial-gradient(2px 2px at center, currentColor 4px, transparent 4px)`, backgroundSize: '10px 4px', opacity: '0.24', animation: '$bufferDots .3s infinite linear' }),
+    // Reverse
+    bufferDots_reverse: {
+        animation: '$bufferDotsInverted .3s infinite linear',
+    }
+}), { name: 'onesy-LinearProgress' });
+const LinearProgress = 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.onesyLinearProgress) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const { tonal = true, color = 'primary', value, version = 'indeterminate', buffer, reverse: reverse_, Component = 'div', className, style } = props, other = __rest(props, ["tonal", "color", "value", "version", "buffer", "reverse", "Component", "className", "style"]);
+    const { classes } = useStyle();
+    let reverse = version === 'indeterminate' ? false : reverse_;
+    if (theme.direction === 'rtl' && version === 'indeterminate')
+        reverse = !reverse;
+    const styles = {
+        root: {},
+        buffer: {},
+        bufferDots: {},
+        line: {}
+    };
+    if (!classes[`color_${color}`]) {
+        styles.root.color = color;
+        if (tonal) {
+            const palette = theme.methods.color(color);
+            styles.root.color = theme.methods.palette.color.value(undefined, 50, true, palette);
+        }
+    }
+    const withBuffer = version === 'determinate' && buffer;
+    if (version === 'determinate') {
+        const values = { buffer: !buffer ? 100 : 0, line: 0 };
+        if ((0, utils_1.is)('object', value)) {
+            if (buffer)
+                values.buffer = (0, utils_1.clamp)(value === null || value === void 0 ? void 0 : value.buffer, 0, 100);
+            values.line = (0, utils_1.clamp)(value === null || value === void 0 ? void 0 : value.progress, 0, 100);
+        }
+        else {
+            if (buffer)
+                values.buffer = (0, utils_1.clamp)(value, 0, 100);
+            values.line = (0, utils_1.clamp)(value, 0, 100);
+        }
+        styles.bufferDots[!reverse ? 'left' : 'right'] = `${values.buffer}%`;
+        styles.buffer.transform = `translateX(${!reverse ? '-' : ''}${100 - values.buffer}%)`;
+        styles.line.transform = `translateX(${!reverse ? '-' : ''}${100 - values.line}%)`;
+        other['aria-valuenow'] = values.line;
+        other['aria-valuemin'] = 0;
+        other['aria-valuemax'] = 100;
+        other['aria-valuetext'] = `${values.line}%`;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, role: 'meter', className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('LinearProgress', theme) && [
+                'onesy-LinearProgress-root'
+            ],
+            className,
+            classes.root,
+            classes[`color_${color}`],
+            tonal && classes[`tonal_color_${color}`],
+            reverse && classes.reverse
+        ]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: [withBuffer && ((0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('LinearProgress', theme) && [
+                        'onesy-LinearProgress-buffer-dots'
+                    ],
+                    classes.bufferDots,
+                    reverse && classes.bufferDots_reverse
+                ]), style: styles.bufferDots })), (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('LinearProgress', theme) && [
+                        'onesy-LinearProgress-buffer'
+                    ],
+                    classes.buffer
+                ]), style: styles.buffer }), version === 'indeterminate' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('LinearProgress', theme) && [
+                                'onesy-LinearProgress-line-indeterminate'
+                            ],
+                            classes[!reverse ? 'lineIndeterminate' : 'lineIndeterminate_reverse']
+                        ]) }, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
+                                (0, utils_2.staticClassName)('LinearProgress', theme) && [
+                                    'onesy-LinearProgress-inner'
+                                ],
+                                classes.inner
+                            ]) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('LinearProgress', theme) && [
+                                'onesy-LinearProgress-line-indeterminate-1'
+                            ],
+                            classes[!reverse ? 'lineIndeterminate1' : 'lineIndeterminate1_reverse']
+                        ]) }, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
+                                (0, utils_2.staticClassName)('LinearProgress', theme) && [
+                                    'onesy-LinearProgress-inner-1'
+                                ],
+                                classes.inner1
+                            ]) }) }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('LinearProgress', theme) && [
+                        'onesy-LinearProgress-line'
+                    ],
+                    classes.line
+                ]), style: styles.line }))] })));
+});
+LinearProgress.displayName = 'onesy-LinearProgress';
+exports.default = LinearProgress;

package/LinearProgress/index.d.ts

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

package/LinearProgress/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 LinearProgress_1 = require("./LinearProgress");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(LinearProgress_1).default; } });

package/LinearProgress/package.json

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

package/Link/Link.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IType } from '../Type/Type';
+import { IColor } from '../types';
+export interface ILink extends Omit<IType, 'color'> {
+    color?: IColor;
+    underline?: true | 'hover';
+}
+declare const Link: React.FC<ILink>;
+export default Link;

package/Link/Link.js

@@ -0,0 +1,133 @@
+"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 Type_1 = __importDefault(require("../Type"));
+const utils_1 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative',
+        display: 'inline-flex',
+        transition: theme.methods.transitions.make(['color', 'text-decoration'], { duration: 'xxs' }),
+        '&::before': {
+            content: "''",
+            display: 'inline-flex',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            background: 'currentColor',
+            width: '100%',
+            height: '100%',
+            zIndex: '0',
+            padding: '0.14em 0.77em',
+            borderRadius: `${(theme.shape.radius.unit / 8) * 0.4}em`,
+            transition: theme.methods.transitions.make(['opacity', 'background']),
+            opacity: '0'
+        }
+    },
+    focus: {
+        '&::before': {
+            opacity: theme.palette.visual_contrast.default.opacity.selected
+        }
+    },
+    // Underline
+    underline: {
+        textDecoration: 'underline'
+    },
+    underline_hover: {
+        '&:hover': {
+            textDecoration: 'underline'
+        }
+    },
+    // Color
+    color_default: { color: theme.palette.text.default.primary },
+    color_neutral: { color: theme.palette.color.neutral.main },
+    color_primary: { color: theme.palette.color.primary.main },
+    color_secondary: { color: theme.palette.color.secondary.main },
+    color_tertiary: { color: theme.palette.color.tertiary.main },
+    color_quaternary: { color: theme.palette.color.quaternary.main },
+    color_info: { color: theme.palette.color.info.main },
+    color_success: { color: theme.palette.color.success.main },
+    color_warning: { color: theme.palette.color.warning.main },
+    color_error: { color: theme.palette.color.error.main },
+    // Tonal
+    tonal_color_neutral: { color: theme.methods.palette.color.value('neutral', 30) },
+    tonal_color_primary: { color: theme.methods.palette.color.value('primary', 30) },
+    tonal_color_secondary: { color: theme.methods.palette.color.value('secondary', 30) },
+    tonal_color_tertiary: { color: theme.methods.palette.color.value('tertiary', 30) },
+    tonal_color_quaternary: { color: theme.methods.palette.color.value('quaternary', 30) },
+    tonal_color_info: { color: theme.methods.palette.color.value('info', 30) },
+    tonal_color_success: { color: theme.methods.palette.color.value('success', 30) },
+    tonal_color_warning: { color: theme.methods.palette.color.value('warning', 30) },
+    tonal_color_error: { color: theme.methods.palette.color.value('error', 30) }
+}), { name: 'onesy-Link' });
+const Link = 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.onesyLink) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    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 { tonal = true, color: color_ = 'primary', version = 'b2', underline = true, Component = 'a', className, style, children } = props, other = __rest(props, ["tonal", "color", "version", "underline", "Component", "className", "style", "children"]);
+    const { classes } = useStyle();
+    const [focus, setFocus] = react_1.default.useState(false);
+    const [hover, setHover] = react_1.default.useState(false);
+    const styles = {
+        root: {}
+    };
+    const onFocus = react_1.default.useCallback((event) => {
+        setFocus(true);
+    }, []);
+    const onBlur = react_1.default.useCallback((event) => {
+        setFocus(false);
+    }, []);
+    const onMouseEnter = react_1.default.useCallback((event) => {
+        setHover(true);
+    }, []);
+    const onMouseLeave = react_1.default.useCallback((event) => {
+        setHover(false);
+    }, []);
+    const color = color_;
+    let palette;
+    if (!classes[`color_${color}`]) {
+        styles.root.color = color;
+        palette = theme.methods.color(color);
+        if (tonal)
+            styles.root.color = theme.methods.palette.color.value(undefined, 30, true, palette);
+    }
+    if (underline === true && !hover) {
+        styles.root.textDecorationColor = theme.methods.palette.color.value(color, 70, true, palette);
+    }
+    if (hover) {
+        styles.root.color = theme.methods.palette.color.value(color, 10, true, palette);
+    }
+    return ((0, jsx_runtime_1.jsx)(Type, Object.assign({ ref: ref, onFocus: onFocus, onBlur: onBlur, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: onMouseEnter, onTouchEnd: onMouseLeave, version: version, role: 'link', Component: Component, className: (0, style_react_1.classNames)([
+            (0, utils_1.staticClassName)('Link', theme) && [
+                'onesy-Link-root',
+                hover && `onesy-Link-hover`,
+                focus && `onesy-Link-focus`
+            ],
+            className,
+            classes.root,
+            classes[`color_${color}`],
+            tonal && classes[`tonal_color_${color}`],
+            underline === true && classes.underline,
+            underline === 'hover' && classes.underline_hover,
+            focus && classes.focus
+        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: children })));
+});
+Link.displayName = 'onesy-Link';
+exports.default = Link;

package/Link/index.d.ts

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

package/Link/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 Link_1 = require("./Link");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });

package/Link/package.json

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

package/Links/Links.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { IBaseElement, IMediaObject } from '../types';
+export interface ILinksItem {
+    version?: 'primary' | 'secondary' | 'default';
+    name?: any;
+    url?: string;
+    sensitivity?: string | boolean;
+    share?: boolean;
+    props?: any;
+}
+export interface ILinks extends IBaseElement {
+    name?: any;
+    short_description?: any;
+    links?: ILinksItem[];
+    cover?: IMediaObject;
+    profile?: IMediaObject;
+    share?: boolean;
+    start?: any;
+    end?: any;
+    IconMore?: any;
+    IconShare?: any;
+    ShareProps?: any;
+    ItemShareProps?: any;
+    IconButtonProps?: any;
+    IconProps?: any;
+    NameProps?: any;
+    ShortDescriptionProps?: any;
+    LinkProps?: any;
+    LinkTypeProps?: any;
+}
+declare const Element: React.FC<ILinks>;
+export default Element;

package/Links/Links.js

@@ -0,0 +1,159 @@
+"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 IconMaterialShareW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialShareW100"));
+const IconMaterialMoreVertW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialMoreVertW100"));
+const Section_1 = __importDefault(require("../Section"));
+const Menu_1 = __importDefault(require("../Menu"));
+const Share_1 = __importDefault(require("../Share"));
+const Line_1 = __importDefault(require("../Line"));
+const Type_1 = __importDefault(require("../Type"));
+const Button_1 = __importDefault(require("../Button"));
+const MenuItem_1 = __importDefault(require("../MenuItem"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Confirm_1 = require("../Confirm");
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        padding: `${theme.methods.space.value(5, 'px')} ${theme.methods.space.value(3, 'px')}`
+    },
+    wrapper: {
+        maxWidth: '1024px'
+    },
+    profile: {
+        width: '140px',
+        height: '140px',
+        borderRadius: theme.methods.shape.radius.value(40, 'px'),
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        border: `4px solid ${theme.palette.light ? theme.palette.color.primary[99] : theme.palette.color.primary[5]}`,
+        cursor: 'default',
+        userSelect: 'none'
+    },
+    cover: {
+        height: '100vh',
+        maxHeight: '274px',
+        borderRadius: theme.methods.shape.radius.value(5, 'px'),
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        cursor: 'default',
+        userSelect: 'none'
+    },
+    name: {
+        wordBreak: 'break-word'
+    },
+    summary: {
+        wordBreak: 'break-word',
+        maxWidth: '540px'
+    },
+    links: {
+        marginTop: '40px',
+        padding: `0 ${theme.methods.space.value(3, 'px')}`
+    },
+    linkWrapper: {
+        maxWidth: '740px'
+    },
+    link: {
+        '&.onesy-Button-root': {
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+            flex: '1 1 auto !important'
+        }
+    },
+    more: {
+        flex: '0 0 auto'
+    }
+}), { name: 'onesy-Links' });
+const Element = 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.onesyLinks) === 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 Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
+    const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
+    const Share = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Share) || Share_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 Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
+    const MenuItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.MenuItem) || MenuItem_1.default; }, [theme]);
+    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
+    const { classes } = useStyle();
+    const { name, short_description, cover, profile, links, share = true, start, end, IconMore = IconMaterialMoreVertW100_1.default, IconShare = IconMaterialShareW100_1.default, ShareProps, ItemShareProps, IconButtonProps, IconProps, NameProps, ShortDescriptionProps, LinkProps, LinkTypeProps, className } = props, other = __rest(props, ["name", "short_description", "cover", "profile", "links", "share", "start", "end", "IconMore", "IconShare", "ShareProps", "ItemShareProps", "IconButtonProps", "IconProps", "NameProps", "ShortDescriptionProps", "LinkProps", "LinkTypeProps", "className"]);
+    const confirm = (0, Confirm_1.useConfirm)();
+    const onOpenLink = react_1.default.useCallback(async (item) => {
+        const confirmed = (item.sensitivity && !['none'].includes(item.sensitivity)) ? await confirm.open({
+            name: 'Sensitive URL',
+            description: `This is URL might contain sensitive information, confirm you are 18+ to continue.`
+        }) : true;
+        if (confirmed) {
+            window.open(item.url, 'blank');
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(Section, Object.assign({ ref: ref, gap: 2, align: 'center', maxWidth: false, padding: false, fullWidth: true, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Links', theme) && [
+                'onesy-Links-root'
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: [start, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.4, fullWidth: true, className: classes.wrapper }, { children: [(profile || cover) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'center', fullWidth: true }, { children: [cover && ((0, jsx_runtime_1.jsx)(Line, { fullWidth: true, className: classes.cover, style: {
+                                    backgroundImage: `url('${(cover === null || cover === void 0 ? void 0 : cover.url) || (cover === null || cover === void 0 ? void 0 : cover.urlSmall)}')`
+                                } })), profile && ((0, jsx_runtime_1.jsx)(Line, { fullWidth: true, className: classes.profile, style: {
+                                    marginTop: cover ? -71 : 0,
+                                    backgroundImage: `url('${(profile === null || profile === void 0 ? void 0 : profile.urlSmall) || (profile === null || profile === void 0 ? void 0 : profile.url)}')`
+                                } }))] }))), (name || short_description) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, align: 'center', fullWidth: true }, { children: [name && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1', weight: 400, align: 'center', fullWidth: true, dangerouslySetInnerHTML: {
+                                    __html: (0, utils_1.textToInnerHTML)(name)
+                                } }, NameProps, { className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('Links', theme) && [
+                                        'onesy-Links-name'
+                                    ],
+                                    NameProps === null || NameProps === void 0 ? void 0 : NameProps.className,
+                                    classes.name
+                                ]) }))), short_description && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b1', weight: 300, align: 'center', fullWidth: true, dangerouslySetInnerHTML: {
+                                    __html: (0, utils_1.textToInnerHTML)(short_description)
+                                } }, ShortDescriptionProps, { className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('Links', theme) && [
+                                        'onesy-Links-short-description'
+                                    ],
+                                    ShortDescriptionProps === null || ShortDescriptionProps === void 0 ? void 0 : ShortDescriptionProps.className,
+                                    classes.summary
+                                ]) })))] }))), !!(links === null || links === void 0 ? void 0 : links.length) && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1.4, align: 'center', fullWidth: true, className: classes.links }, { children: links.map((item, index) => {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center', fullWidth: true, className: classes.linkWrapper }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: true }, item.props, { version: [undefined, 'default'].includes(item.version) ? 'outlined' : 'filled', elevation: item.version === 'primary', color: item.version === 'primary' ? 'primary' : item.version === 'secondary' ? 'secondary' : 'default', fullWidth: true, onClick: () => onOpenLink(item) }, LinkProps, { className: (0, style_react_1.classNames)([
+                                            `onesy-Links-link-version-${item.version}`,
+                                            LinkProps === null || LinkProps === void 0 ? void 0 : LinkProps.className,
+                                            (_a = item.props) === null || _a === void 0 ? void 0 : _a.className,
+                                            classes.link
+                                        ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b1', weight: 300 }, LinkTypeProps, { children: item.name || 'Link' })) })), (0, jsx_runtime_1.jsx)(Menu, Object.assign({ menuItems: [
+                                            (0, jsx_runtime_1.jsx)(MenuItem, { start: ((0, jsx_runtime_1.jsx)(IconShare, Object.assign({ size: 'small' }, IconProps))), startAlign: 'center', primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Share" }))), menu: item.share ? ((0, jsx_runtime_1.jsx)(Share, Object.assign({ version: 'menu-items', name: item.name, url: item.url, exclude: ['print'] }, ItemShareProps, { ListItemProps: Object.assign({ size: 'small', noBackground: true }, ItemShareProps === null || ItemShareProps === void 0 ? void 0 : ItemShareProps.ListItemProps) }))) : undefined, MenuProps: {
+                                                    ListProps: {
+                                                        noChildrenTransform: true
+                                                    }
+                                                }, size: 'small', button: true, disabled: !item.share })
+                                        ] }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'regular', disabled: !item.share }, IconButtonProps, { className: (0, style_react_1.classNames)([
+                                                (0, utils_2.staticClassName)('Links', theme) && [
+                                                    'onesy-Links-more'
+                                                ],
+                                                IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className,
+                                                classes.more
+                                            ]) }, { children: (0, jsx_runtime_1.jsx)(IconMore, Object.assign({ size: 'large' }, IconProps)) })) }))] }), index));
+                        }) })))] })), share && ((0, jsx_runtime_1.jsx)(Share, Object.assign({}, ShareProps))), end] })));
+});
+Element.displayName = 'onesy-Links';
+exports.default = Element;