@onesy/ui-react 1.0.0

package/TopAppBar/TopAppBar.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ISurface } from '../Surface/Surface';
+import { ISize, IElement } from '../types';
+export interface ITopAppBar extends Omit<ISurface, 'version'> {
+    position?: 'relative' | 'absolute' | 'static' | 'sticky' | 'fixed' | 'unset';
+    version?: 'small' | 'center' | 'medium' | 'large';
+    size?: ISize;
+    center?: boolean;
+    title?: IElement;
+    start?: IElement;
+    end?: IElement;
+}
+declare const TopAppBar: React.FC<ITopAppBar>;
+export default TopAppBar;

package/TopAppBar/TopAppBar.js

@@ -0,0 +1,200 @@
+"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 Surface_1 = __importDefault(require("../Surface"));
+const Type_1 = __importDefault(require("../Type"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        zIndex: theme.z_index.app_bar,
+        width: '100%',
+        paddingInline: theme.methods.space.value(0.5, 'px')
+    },
+    wrapper: {
+        width: '100%'
+    },
+    // Size
+    version_small_size_small: { height: '56px' },
+    version_small_size_regular: { height: '64px' },
+    version_small_size_large: { height: '72px' },
+    version_center_size_small: { height: '56px' },
+    version_center_size_regular: { height: '64px' },
+    version_center_size_large: { height: '72px' },
+    version_medium_size_small: { height: '104px' },
+    version_medium_size_regular: { height: '112px' },
+    version_medium_size_large: { height: '120px' },
+    version_large_size_small: { height: '144px' },
+    version_large_size_regular: { height: '152px' },
+    version_large_size_large: { height: '160px' },
+    aside: {
+        flex: '0 0 auto',
+        width: 'auto'
+    },
+    title: {
+        flex: '1 1 auto',
+        textAlign: 'start',
+        marginInline: '4px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    title_version_small: {
+        marginInline: '4px'
+    },
+    title_version_center: {
+        textAlign: 'center',
+        marginInline: '4px'
+    },
+    title_version_medium: {
+        marginInline: '12px',
+        marginBottom: '20px',
+        width: 'calc(100% - 24px)'
+    },
+    title_version_large: {
+        textAlign: 'start',
+        marginInline: '12px',
+        marginBottom: '28px',
+        width: 'calc(100% - 24px)'
+    },
+    title_no_start: {
+        marginInlineStart: '12px'
+    },
+    position_relative: {
+        position: 'relative'
+    },
+    position_absolute: {
+        position: 'absolute'
+    },
+    position_static: {
+        position: 'static'
+    },
+    position_fixed: {
+        position: 'fixed'
+    },
+    position_sticky: {
+        position: 'sticky',
+        top: '8px'
+    },
+    position_unset: {
+        position: 'unset'
+    },
+    center: {
+        margin: '8px auto'
+    },
+    center_absolute: {
+        top: '8px',
+        left: '50%',
+        transform: 'translateX(-50%)'
+    }
+}), { name: 'onesy-TopAppBar' });
+const TopAppBar = 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.onesyTopAppBar) === 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 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 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 = 'primary', version = 'small', size = 'regular', center = true, title: title_, start: start_, end: end_, position, Component = 'div', className, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "size", "center", "title", "start", "end", "position", "Component", "className", "children"]);
+    const { classes } = useStyle();
+    const start = react_1.default.Children
+        .toArray(start_)
+        .map((item, index) => react_1.default.cloneElement(item, {
+        key: index,
+        tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
+        color: item.props.color !== undefined ? item.props.color : color,
+        version: item.props.version !== undefined ? item.props.version : 'filled',
+        elevation: item.props.elevation !== undefined ? item.props.elevation : false
+    }));
+    const end = react_1.default.Children
+        .toArray(end_)
+        .map((item, index) => react_1.default.cloneElement(item, {
+        key: index,
+        tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
+        color: item.props.color !== undefined ? item.props.color : color,
+        version: item.props.version !== undefined ? item.props.version : 'filled',
+        elevation: item.props.elevation !== undefined ? item.props.elevation : false
+    }));
+    const classNameTitle = (0, style_react_1.classNames)([
+        (0, utils_2.staticClassName)('TopAppBar', theme) && [
+            'onesy-TopAppBar-title'
+        ],
+        classes.title,
+        classes[`title_version_${version}`],
+        version === 'small' && !start.length && classes.title_no_start
+    ]);
+    const classNameTitleMedium = (0, style_react_1.classNames)([
+        (0, utils_2.staticClassName)('TopAppBar', theme) && [
+            'onesy-TopAppBar-title',
+            'onesy-TopAppBar-title-medium'
+        ],
+        classes.title,
+        classes[`title_version_${version}`]
+    ]);
+    let title;
+    if (title_) {
+        if (['small', 'center'].includes(version)) {
+            title = (0, utils_1.is)('simple', title_) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't1', className: classNameTitle }, { children: title_ }))) : (title_ && react_1.default.cloneElement(title_, {
+                tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
+                color: title_.props.color !== undefined ? title_.props.color : 'inherit',
+                className: classNameTitle
+            }));
+        }
+        else {
+            title = (0, utils_1.is)('simple', title_) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: version === 'medium' ? 'h3' : 'h2', className: classNameTitleMedium }, { children: title_ }))) : (title_ && react_1.default.cloneElement(title_, {
+                tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
+                color: title_.props.color !== undefined ? title_.props.color : 'inherit',
+                className: classNameTitleMedium
+            }));
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: ref, color: color, tonal: tonal, gap: 0, justify: 'space-between', Component: Line, AdditionalProps: {
+            Component
+        }, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('TopAppBar', theme) && [
+                'onesy-TopAppBar-root',
+                `onesy-TopAppBar-version-${version}`,
+                `onesy-TopAppBar-size-${size}`
+            ],
+            className,
+            classes.root,
+            position && classes[`position_${position}`],
+            center && classes[`center${['absolute', 'fixed'].includes(position) ? '_absolute' : ''}`]
+        ]) }, other, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', gap: 0, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('TopAppBar', theme) && [
+                        'onesy-TopAppBar-wrapper'
+                    ],
+                    classes.wrapper,
+                    classes[`version_small_size_${size}`]
+                ]) }, { children: [!!start.length && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'flex-start', gap: 0, className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('TopAppBar', theme) && [
+                                'onesy-TopAppBar-aside',
+                                `onesy-TopAppBar-start`
+                            ],
+                            classes.aside
+                        ]) }, { children: start }))), ['small', 'center'].includes(version) && title, !!end.length && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'flex-end', gap: 0, className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('TopAppBar', theme) && [
+                                'onesy-TopAppBar-aside',
+                                `onesy-TopAppBar-end`
+                            ],
+                            classes.aside
+                        ]) }, { children: end })))] })), ['medium', 'large'].includes(version) && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ justify: 'flex-end', gap: 0 }, { children: title })))] })));
+});
+TopAppBar.displayName = 'onesy-TopAppBar';
+exports.default = TopAppBar;

package/TopAppBar/index.d.ts

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

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

package/TopAppBar/package.json

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

package/Transition/Context.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TransitionContext: React.Context<any>;
+export default TransitionContext;

package/Transition/Context.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 });
+const react_1 = __importDefault(require("react"));
+const TransitionContext = react_1.default.createContext(undefined);
+exports.default = TransitionContext;

package/Transition/Transition.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TTransitionsDurationProperties } from '@onesy/style-react';
+import { IBaseElement } from '../types';
+export declare type TTransitionStatus = 'appended' | 'add' | 'adding' | 'added' | 'enter' | 'entering' | 'entered' | 'exit' | 'exiting' | 'exited' | 'removed';
+export declare const STATUS: Record<TTransitionStatus, TTransitionStatus>;
+export interface ITransitionDelay {
+    default?: number;
+    add?: number;
+    enter?: number;
+    exit?: number;
+}
+export interface ITransition extends Omit<IBaseElement, 'children' | 'className'> {
+    in?: boolean;
+    name?: string;
+    className?: boolean;
+    prefix?: string;
+    run?: boolean;
+    append?: boolean;
+    add?: boolean;
+    enter?: boolean;
+    exit?: boolean;
+    enterOnAdd?: boolean;
+    exitOnAdd?: boolean;
+    noAbruption?: boolean;
+    removeOnExited?: boolean;
+    preEnterAppendTimeout?: number;
+    delay?: TTransitionsDurationProperties | number | ITransitionDelay;
+    duration?: TTransitionsDurationProperties | number | ITransitionDelay;
+    onTransition?: (element: HTMLElement, status: TTransitionStatus) => void;
+    onInit?: (element: HTMLElement) => void;
+    onAppended?: (element: HTMLElement) => void;
+    onAdd?: (element: HTMLElement) => void;
+    onAdding?: (element: HTMLElement) => void;
+    onAdded?: (element: HTMLElement) => void;
+    onEnter?: (element: HTMLElement) => void;
+    onEntering?: (element: HTMLElement) => void;
+    onEntered?: (element: HTMLElement) => void;
+    onExit?: (element: HTMLElement) => void;
+    onExiting?: (element: HTMLElement) => void;
+    onExited?: (element: HTMLElement) => void;
+    onRemoved?: (element: HTMLElement) => void;
+    children?: any;
+    [p: string]: any;
+}
+declare const Transition: React.FC<ITransition>;
+export default Transition;

package/Transition/Transition.js

@@ -0,0 +1,347 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATUS = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const subscription_1 = __importDefault(require("@onesy/subscription"));
+const style_react_1 = require("@onesy/style-react");
+const Context_1 = __importDefault(require("./Context"));
+const utils_2 = require("../utils");
+exports.STATUS = {
+    appended: 'appended',
+    add: 'add',
+    added: 'added',
+    adding: 'adding',
+    enter: 'enter',
+    entering: 'entering',
+    entered: 'entered',
+    exit: 'exit',
+    exiting: 'exiting',
+    exited: 'exited',
+    removed: 'removed'
+};
+const Transition = (props_) => {
+    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.onesyTransition) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const { in: inProp_, name, prefix, run, append, add: add_, enter: enter_ = true, exit: exit_ = true, enterOnAdd = props.add || props.enter, exitOnAdd, noAbruption, removeOnExited, preEnterAppendTimeout = 14, delay: delay_, duration: duration_, 
+    // An all in one method
+    onTransition, onInit, onAppended, onAdd, onAdding, onAdded, onEnter, onEntering, onEntered: onEntered_, onExit, onExiting, onExited, onRemoved, className, children, ref } = props;
+    const [init, setInit] = react_1.default.useState(false);
+    const [inProp, setInProp] = react_1.default.useState(inProp_);
+    const [status, setStatus] = react_1.default.useState(() => {
+        let statusNew = '';
+        if (inProp) {
+            statusNew = add_ ? exports.STATUS.add : exports.STATUS.entered;
+            if (enterOnAdd)
+                statusNew = exports.STATUS.enter;
+        }
+        else {
+            statusNew = (enterOnAdd || removeOnExited) ? exports.STATUS.removed : exports.STATUS.exited;
+            if (exitOnAdd)
+                statusNew = exports.STATUS.exit;
+        }
+        if (append)
+            statusNew = 'appended';
+        return statusNew;
+    });
+    const subs = react_1.default.useRef({
+        status: new subscription_1.default()
+    });
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        status: react_1.default.useRef(undefined),
+        inProp: react_1.default.useRef(undefined),
+        prefix: react_1.default.useRef(undefined)
+    };
+    refs.status.current = status;
+    refs.inProp.current = inProp;
+    refs.prefix.current = prefix;
+    react_1.default.useEffect(() => {
+        let statusNew;
+        if (status === 'appended') {
+            if ((0, utils_1.is)('function', onTransition))
+                onTransition(refs.root.current, 'appended');
+            if ((0, utils_1.is)('function', onAppended))
+                onAppended(refs.root.current);
+        }
+        if (inProp) {
+            statusNew = add_ ? exports.STATUS.add : exports.STATUS.entered;
+            if (enterOnAdd)
+                statusNew = exports.STATUS.enter;
+        }
+        else {
+            statusNew = (enterOnAdd || removeOnExited) ? exports.STATUS.removed : exports.STATUS.exited;
+            if (exitOnAdd)
+                statusNew = exports.STATUS.exit;
+        }
+        if ((0, utils_1.is)('function', onInit))
+            onInit(refs.root.current);
+        // Update
+        update(statusNew);
+        setInit(true);
+    }, []);
+    react_1.default.useEffect(() => {
+        var _a, _b, _c;
+        if (init) {
+            let statusNew;
+            if (inProp) {
+                if ([exports.STATUS.enter, exports.STATUS.entered].indexOf(status) === -1)
+                    statusNew = exports.STATUS.enter;
+            }
+            else {
+                if ([exports.STATUS.exit, exports.STATUS.exited].indexOf(status) === -1)
+                    statusNew = exports.STATUS.exit;
+            }
+            // Added
+            const classNameValue = ((_b = (_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.baseVal) || ((_c = refs.root.current) === null || _c === void 0 ? void 0 : _c.className);
+            if (inProp && (!refs.root.current || ((classNameValue === null || classNameValue === void 0 ? void 0 : classNameValue.indexOf('removed')) > -1))) {
+                // We add the element and get the ref value
+                // for update below to use it for enter
+                update('appended');
+                // Prevent update batches
+                setTimeout(() => update(statusNew), preEnterAppendTimeout);
+            }
+            else
+                update(statusNew);
+        }
+    }, [inProp]);
+    react_1.default.useEffect(() => {
+        if (status === exports.STATUS.exited && removeOnExited) {
+            updateStatus('removed');
+            // Subscriptions
+            subs.current.status.emit('removed');
+        }
+    }, [status]);
+    react_1.default.useEffect(() => {
+        if (!inProp_ && noAbruption && ['enter', 'entering'].indexOf(subs.current.status.value) > -1) {
+            const sub = (item) => {
+                if (item === 'entered') {
+                    setInProp(inProp_);
+                    subs.current.status.unsubscribe(sub);
+                }
+            };
+            subs.current.status.subscribe(sub);
+        }
+        else if (inProp_ && noAbruption && ['exit', 'exiting'].indexOf(subs.current.status.value) > -1) {
+            const sub = (item) => {
+                if (item === 'exited') {
+                    setInProp(inProp_);
+                    subs.current.status.unsubscribe(sub);
+                }
+            };
+            subs.current.status.subscribe(sub);
+        }
+        else if ((!inProp_ && noAbruption && subs.current.status.value === 'entered') ||
+            (inProp_ && noAbruption && subs.current.status.value === 'exited') ||
+            (inProp_ !== inProp))
+            setInProp(inProp_);
+    }, [inProp_]);
+    const update = async (status_, pause) => {
+        if (pause !== undefined)
+            await (0, utils_1.wait)(pause);
+        refs.status.current = status_;
+        switch (status_) {
+            case 'add':
+                return await add(status_);
+            case 'enter':
+                return await enter(status_);
+            case 'exit':
+                return await exit(status_);
+            case 'exited':
+                return updateStatus(status_);
+            default:
+                return updateStatus(status_);
+        }
+    };
+    const delay = react_1.default.useCallback(async (status_) => {
+        let value = delay_;
+        if ((0, utils_1.is)('string', value) &&
+            theme.transitions.duration[value] !== undefined)
+            value = theme.transitions.duration[value];
+        if ((0, utils_1.is)('object', value))
+            value = value[status_] !== undefined ? value[status_] : value.default;
+        if (!((0, utils_1.is)('number', value) && value > 0))
+            return;
+        await (0, utils_1.wait)(value);
+    }, [delay_, theme]);
+    const duration = react_1.default.useCallback(async (status_) => {
+        let value = duration_;
+        if ((0, utils_1.is)('string', value) &&
+            theme.transitions.duration[value] !== undefined)
+            value = theme.transitions.duration[value];
+        if ((0, utils_1.is)('object', value))
+            value = value[status_] !== undefined ? value[status_] : value.default;
+        if (!(0, utils_1.is)('number', value))
+            value = theme.transitions.duration.rg;
+        if (!((0, utils_1.is)('number', value) && value > 0))
+            return;
+        await (0, utils_1.wait)(value);
+    }, [duration_, theme]);
+    const add = async (status_) => {
+        if (!add_ ||
+            (refs.status.current !== status_))
+            return;
+        updateStatus('add');
+        // Reflow
+        (0, utils_2.reflow)(refs.root.current);
+        await delay('add');
+        // Prevent update batches
+        await (0, utils_1.wait)(14);
+        updateStatus('adding');
+        // await duration('add');
+        if (refs.status.current === status_)
+            updateStatus('added');
+    };
+    const enter = async (status_) => {
+        var _a;
+        if (!enter_ ||
+            (status_ !== 'appended' &&
+                (refs.status.current !== status_ || !refs.inProp.current)))
+            return;
+        updateStatus('enter');
+        // Reflow
+        (0, utils_2.reflow)(refs.root.current);
+        await delay('enter');
+        // Prevent update batches
+        await (0, utils_1.wait)(14);
+        updateStatus('entering');
+        await duration('enter');
+        if (((_a = refs.status.current) === null || _a === void 0 ? void 0 : _a.indexOf('exit')) === -1)
+            updateStatus('entered');
+    };
+    const exit = async (status_) => {
+        var _a;
+        if (!exit_ ||
+            (refs.status.current !== status_ || refs.inProp.current))
+            return;
+        updateStatus('exit');
+        // Reflow
+        (0, utils_2.reflow)(refs.root.current);
+        await delay('exit');
+        // Prevent update batches
+        await (0, utils_1.wait)(14);
+        updateStatus('exiting');
+        await duration('exit');
+        if (((_a = refs.status.current) === null || _a === void 0 ? void 0 : _a.indexOf('enter')) === -1)
+            updateStatus('exited');
+    };
+    const onEntered = (element) => {
+        if ((0, utils_1.is)('function', onEntered_))
+            onEntered_(element);
+        if (run && inProp)
+            setInProp(false);
+    };
+    const updateStatus = (status_) => {
+        var _a, _b, _c;
+        setStatus(status_);
+        // Subscriptions
+        subs.current.status.emit(status_);
+        switch (status_) {
+            case 'appended':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onAppended))
+                    onAppended(refs.root.current);
+                break;
+            case 'add':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onAdd))
+                    onAdd(refs.root.current);
+                break;
+            case 'adding':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onAdding))
+                    onAdding(refs.root.current);
+                break;
+            case 'added':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onAdded))
+                    onAdded(refs.root.current);
+                break;
+            case 'enter':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onEnter))
+                    onEnter(refs.root.current);
+                break;
+            case 'entering':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onEntering))
+                    onEntering(refs.root.current);
+                break;
+            case 'entered':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onEntered))
+                    onEntered(refs.root.current);
+                break;
+            case 'exit':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onExit))
+                    onExit(refs.root.current);
+                break;
+            case 'exiting':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onExiting))
+                    onExiting(refs.root.current);
+                break;
+            case 'exited':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onExited))
+                    onExited(refs.root.current);
+                break;
+            case 'removed':
+                if ((0, utils_1.is)('function', onTransition))
+                    onTransition(refs.root.current, status_);
+                if ((0, utils_1.is)('function', onRemoved))
+                    onRemoved(refs.root.current);
+                break;
+            default:
+                break;
+        }
+        // Add className
+        if (className && (0, utils_1.is)('element', refs.root.current)) {
+            let className_ = (0, style_react_1.classNames)([(_b = (((_a = refs.root.current.className) === null || _a === void 0 ? void 0 : _a.baseVal) || refs.root.current.className)) === null || _b === void 0 ? void 0 : _b.split(' ')]);
+            // Remove all previous classes
+            className_ = className_.replace(new RegExp(`(^| )${refs.prefix.current || ''}(add|enter|exit)(ed|ing)?($| )`, 'g'), ' ');
+            // Add
+            className_ += ` ${refs.prefix.current || ''}${status_}`;
+            className_ = className_.replace(/ +/g, ' ').trim();
+            if ((_c = refs.root.current.className) === null || _c === void 0 ? void 0 : _c.baseVal)
+                refs.root.current.className.baseVal = className_;
+            else
+                refs.root.current.className = className_;
+        }
+    };
+    if (status === 'removed')
+        return null;
+    const value_ = {
+        status
+    };
+    return ((0, jsx_runtime_1.jsx)(Context_1.default.Provider, Object.assign({ value: value_ }, { children: (0, utils_1.is)('function', children) ?
+            children(status, refs.root) :
+            react_1.default.cloneElement(children, {
+                ref: (item) => {
+                    if (ref) {
+                        if ((0, utils_1.is)('function', ref))
+                            ref(item);
+                        else
+                            ref.current = item;
+                    }
+                    refs.root.current = item;
+                }
+            }) })));
+};
+Transition.displayName = 'onesy-Transition';
+exports.default = Transition;

package/Transition/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TransitionContext } from './Context';
+export { default as useTransition } from './useTransition';
+export * from './Transition';
+export { default } from './Transition';