@yamada-ui/transitions/dist/flip.js

Yamada UI transitions components

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/flip.tsx
var flip_exports = {};
__export(flip_exports, {
  Flip: () => Flip
});
module.exports = __toCommonJS(flip_exports);
var import_core = require("@yamada-ui/core");
var import_motion = require("@yamada-ui/motion");
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var variants = {
  enter: ({ ident, orientation, visible }) => ({
    [orientation === "horizontal" ? "rotateY" : "rotateX"]: ident === "from" ? visible ? 180 : 0 : visible ? 0 : 180
  }),
  exit: ({ ident, orientation }) => ({
    [orientation === "horizontal" ? "rotateY" : "rotateX"]: ident === "from" ? 0 : 180
  })
};
var flipProps = {
  animate: "enter",
  initial: "exit",
  variants
};
var Flip = (0, import_motion.motionForwardRef)((props, ref) => {
  const [dimensions, setDimensions] = (0, import_react.useState)({});
  const fromRef = (0, import_react.useRef)(null);
  const toRef = (0, import_react.useRef)(null);
  const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Flip", props);
  const {
    className,
    defaultValue = "from",
    delay = 0,
    isDisabled,
    disabled = isDisabled,
    duration = 0.4,
    from,
    isReadOnly,
    orientation = "horizontal",
    readOnly = isReadOnly,
    to,
    transition: transitionProp = {},
    value: valueProp,
    onChange: onChangeProp,
    ...rest
  } = (0, import_core.omitThemeProps)(mergedProps);
  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
    defaultValue,
    value: valueProp,
    onChange: onChangeProp
  });
  const visible = value === "to";
  const css = {
    h: dimensions.height ? `${dimensions.height}px` : "auto",
    w: dimensions.width ? `${dimensions.width}px` : "auto",
    ...styles.container
  };
  const transition = {
    delay,
    duration,
    ...transitionProp
  };
  const onClick = () => {
    if (readOnly) return;
    setValue((prev) => prev === "from" ? "to" : "from");
  };
  (0, import_utils.useSafeLayoutEffect)(() => {
    const fromElement = fromRef.current;
    const toElement = toRef.current;
    if (!fromElement || !toElement) return;
    const fromWidth = fromElement.offsetWidth;
    const fromHeight = fromElement.offsetHeight;
    const toWidth = toElement.offsetWidth;
    const toHeight = toElement.offsetHeight;
    if (fromWidth !== toWidth || fromHeight !== toHeight) {
      console.warn(
        `Dimensions do not match:
        "from" element (Width: ${fromWidth}px, Height: ${fromHeight}px)
        does not match "to" element (Width: ${toWidth}px, Height: ${toHeight}px).
        Please ensure both elements have the same dimensions.`
      );
    }
    setDimensions({ height: fromHeight, width: fromWidth });
  }, [fromRef, toRef]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_motion.motion.button,
    {
      ref,
      type: "button",
      className: (0, import_utils.cx)("ui-flip", `ui-flip__${orientation}`, className),
      "data-disabled": (0, import_utils.dataAttr)(disabled),
      "data-readonly": (0, import_utils.dataAttr)(readOnly),
      "data-value": value,
      disabled,
      onClick,
      __css: css,
      ...rest,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_motion.motion.span,
          {
            ref: fromRef,
            className: (0, import_utils.cx)(
              "ui-flip__from",
              `ui-flip__from--${orientation}`,
              className
            ),
            custom: { ident: "from", orientation, visible },
            ...flipProps,
            transition,
            __css: {
              ...styles.flipIdent,
              ...styles.from
            },
            children: from
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_motion.motion.span,
          {
            ref: toRef,
            className: (0, import_utils.cx)("ui-flip__to", `ui-flip__to--${orientation}`, className),
            custom: { ident: "to", orientation, visible },
            ...flipProps,
            transition,
            __css: {
              ...styles.flipIdent,
              ...styles.to
            },
            children: to
          }
        )
      ]
    }
  );
});
Flip.displayName = "Flip";
Flip.__ui__ = "Flip";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Flip
});
//# sourceMappingURL=flip.js.map