cambio/dist/index.js

A simple shared animation component for React

'use client';
Object.defineProperty(exports, '__esModule', { value: true });

var cc = require('./cc-D67s6OPX.js');
var react$1 = require('motion/react');
var react = require('react');
var dialog = require('@base-ui-components/react/dialog');

const CambioContext = /*#__PURE__*/ react.createContext(null);
function useCambioContext() {
    const context = react.useContext(CambioContext);
    if (!context) {
        throw new Error("Cambio components must be used within a Cambio Root");
    }
    return context;
}

const Root$1 = react$1.motion.create(dialog.Dialog.Root);
const Trigger$1 = react$1.motion.create(dialog.Dialog.Trigger);
const Portal$1 = react$1.motion.create(dialog.Dialog.Portal);
const Backdrop$1 = react$1.motion.create(dialog.Dialog.Backdrop);
const Popup$1 = react$1.motion.create(dialog.Dialog.Popup);
const Title$1 = react$1.motion.create(dialog.Dialog.Title);
const Description$1 = react$1.motion.create(dialog.Dialog.Description);
const Close$1 = react$1.motion.create(dialog.Dialog.Close);
const MotionDialog = {
    Root: Root$1,
    Trigger: Trigger$1,
    Portal: Portal$1,
    Backdrop: Backdrop$1,
    Popup: Popup$1,
    Title: Title$1,
    Description: Description$1,
    Close: Close$1
};

const Root = /*#__PURE__*/ react.forwardRef(function Root(props, _ref) {
    const { children, layoutId, open, onOpenChange, defaultOpen = false } = props, dialogProps = cc._object_without_properties_loose(props, [
        "children",
        "layoutId",
        "open",
        "onOpenChange",
        "defaultOpen"
    ]);
    const [internalOpen, setInternalOpen] = react.useState(defaultOpen);
    const reactId = react.useId();
    const uniqueLayoutId = react.useMemo(()=>layoutId || `cambio-dialog-${reactId}`, [
        layoutId,
        reactId
    ]);
    const isOpen = open !== undefined ? open : internalOpen;
    const handleOpenChange = react.useCallback((newOpen, event, reason)=>{
        if (onOpenChange) {
            onOpenChange(newOpen, event, reason);
        } else {
            setInternalOpen(newOpen);
        }
    }, [
        onOpenChange
    ]);
    return /*#__PURE__*/ React.createElement(CambioContext.Provider, {
        value: {
            layoutId: uniqueLayoutId,
            open: isOpen
        }
    }, /*#__PURE__*/ React.createElement(MotionDialog.Root, cc._extends({}, dialogProps, {
        open: isOpen,
        onOpenChange: handleOpenChange
    }), children));
});
const Trigger = /*#__PURE__*/ react.forwardRef(function Trigger(props, ref) {
    const { layoutId } = useCambioContext();
    const { transition = {
        type: "spring",
        bounce: 0.2,
        duration: 0.4
    } } = props;
    return /*#__PURE__*/ React.createElement(MotionDialog.Trigger, cc._extends({}, props, {
        ref: ref,
        layoutId: layoutId,
        layoutCrossfade: false,
        transition: transition
    }));
});
const Portal = /*#__PURE__*/ react.forwardRef(function Portal(props, _ref) {
    return /*#__PURE__*/ React.createElement(MotionDialog.Portal, cc._extends({
        keepMounted: true
    }, props));
});
const Backdrop = /*#__PURE__*/ react.forwardRef(function Backdrop(props, ref) {
    const { layoutId, open } = useCambioContext();
    const { transition = {
        ease: [
            0.19,
            1,
            0.22,
            1
        ],
        duration: 0.4
    }, initial = {
        opacity: 0
    }, animate = {
        opacity: 1
    }, exit = {
        opacity: 0
    } } = props;
    return /*#__PURE__*/ React.createElement(react$1.AnimatePresence, null, open && /*#__PURE__*/ React.createElement(MotionDialog.Backdrop, cc._extends({}, props, {
        ref: ref,
        key: `cambio-backdrop-${layoutId}`,
        transition: transition,
        initial: initial,
        animate: animate,
        exit: exit
    })));
});
const Popup = /*#__PURE__*/ react.forwardRef(function Popup(_param, ref) {
    var props = cc._extends({}, cc._object_destructuring_empty(_param));
    const { layoutId, open } = useCambioContext();
    const { transition = {
        type: "spring",
        bounce: 0.2,
        duration: 0.4
    } } = props;
    return /*#__PURE__*/ React.createElement(react$1.AnimatePresence, null, open && /*#__PURE__*/ React.createElement(MotionDialog.Popup, cc._extends({}, props, {
        ref: ref,
        layoutId: layoutId,
        transformTemplate: (_, generated)=>`translate(-50%, -50%) ${generated}`,
        transition: transition,
        layoutCrossfade: false,
        style: {
            position: "fixed",
            top: "50%",
            left: "50%"
        }
    })));
});
const Title = /*#__PURE__*/ react.forwardRef(function Title(props, ref) {
    return /*#__PURE__*/ React.createElement(MotionDialog.Title, cc._extends({
        ref: ref
    }, props));
});
const Description = /*#__PURE__*/ react.forwardRef(function Description(props, ref) {
    return /*#__PURE__*/ React.createElement(MotionDialog.Description, cc._extends({
        ref: ref
    }, props));
});
const Close = /*#__PURE__*/ react.forwardRef(function Close(props, ref) {
    return /*#__PURE__*/ React.createElement(MotionDialog.Close, cc._extends({
        ref: ref
    }, props));
});

exports.Backdrop = Backdrop;
exports.Close = Close;
exports.Description = Description;
exports.Popup = Popup;
exports.Portal = Portal;
exports.Root = Root;
exports.Title = Title;
exports.Trigger = Trigger;